yadunut/clan-core
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

Merge pull request 'ui/labels: fix font, bg radius' (#5061) from ui-more-3 into main

Browse Source 
Reviewed-on: https://git.clan.lol/clan/clan-core/pulls/5061
This commit is contained in:
hsjobeki
2025-09-02 09:38:38 +00:00
parent c266261d3b 93c31d4c26
commit 1d9ad2ae54
2 changed files with 33 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
pkgs/clan-app/fonts.nix
View File

@@ -48,9 +48,9 @@ let
url = "https://github.com/eigilnikolajsen/commit-mono/raw/0b3b192f035cdc8d1ea8ffb5463cc23d73d0b89f/src/fonts/fontlab/CommitMonoV143-VF.woff2";
hash = "sha256-80LKbD8ll+bA/NhLPz7WTTzlvbbQrxnRkNZFpVixzyk=";
};
commitMono_ttf = fetchurl {
url = "https://github.com/eigilnikolajsen/commit-mono/raw/0b3b192f035cdc8d1ea8ffb5463cc23d73d0b89f/src/fonts/fontlab/CommitMonoV143-VF.ttf";
hash = "sha256-mN6akBFjp2mBLDzy8bhtY6mKnO1nINdHqmZSaIQHw08=";
archivoSemi_ttf = fetchurl {
url = "https://github.com/Omnibus-Type/Archivo/raw/b5d63988ce19d044d3e10362de730af00526b672/fonts/ttf/ArchivoSemiCondensed-Medium.ttf";
hash = "sha256-Kot1CvKqnXW1VZ7zX2wYZEziSA/l9J0gdfKkSdBxZ0w=";
};
in
@@ -66,5 +66,5 @@ runCommand "" { } ''
cp ${archivoSemi.semiBold} $out/ArchivoSemiCondensed-SemiBold.woff2
cp ${commitMono} $out/CommitMonoV143-VF.woff2
cp ${commitMono_ttf} $out/CommitMonoV143-VF.ttf
cp ${archivoSemi_ttf} $out/ArchivoSemiCondensed-Medium.ttf
''

36
pkgs/clan-app/ui/src/scene/MachineRepr.ts
View File

@@ -4,7 +4,7 @@ import { Accessor, createEffect, createRoot, on } from "solid-js";
import { renderLoop } from "./RenderLoop";
// @ts-expect-error: No types for troika-three-text
import { Text } from "troika-three-text";
import ttf from "../../.fonts/CommitMonoV143-VF.ttf";
import ttf from "../../.fonts/ArchivoSemiCondensed-Medium.ttf";
// Constants
const BASE_SIZE = 0.9;
@@ -69,6 +69,24 @@ export function createCubeBase(
return { baseMesh, baseMaterial };
}
// Function to build rounded rect shape
export function roundedRectShape(w: number, h: number, r: number) {
const shape = new THREE.Shape();
const x = -w / 2;
const y = -h / 2;
shape.moveTo(x + r, y);
shape.lineTo(x + w - r, y);
shape.quadraticCurveTo(x + w, y, x + w, y + r);
shape.lineTo(x + w, y + h - r);
shape.quadraticCurveTo(x + w, y + h, x + w - r, y + h);
shape.lineTo(x + r, y + h);
shape.quadraticCurveTo(x, y + h, x, y + h - r);
shape.lineTo(x, y + r);
shape.quadraticCurveTo(x, y, x + r, y);
return shape;
}
export class MachineRepr {
public id: string;
public group: THREE.Group;
@@ -200,21 +218,25 @@ export class MachineRepr {
});
// --- Background (rounded rect) ---
const padding = 0.01;
const padding = 0.04;
// TODO: compute from text.bounds after sync
const bgWidth = text.text.length * 0.1 + padding;
const bgWidth = text.text.length * 0.07 + padding;
const bgHeight = 0.1 + 2 * padding;
const radius = 0.02;
const bgGeom = new THREE.PlaneGeometry(bgWidth, bgHeight, 1, 1);
const bgMat = new THREE.MeshBasicMaterial({ color: 0x162324 }); // dark gray
const bgShape = roundedRectShape(bgWidth, bgHeight, radius);
const bgGeom = new THREE.ShapeGeometry(bgShape);
const bgMat = new THREE.MeshBasicMaterial({ color: 0x162324 });
const bg = new THREE.Mesh(bgGeom, bgMat);
bg.position.set(0, 0, -0.01); // slightly behind text
bg.position.set(0, 0, -0.01);
// bg.position.set(0, 0, -0.01); // slightly behind text
// --- Arrow (triangle pointing down) ---
const arrowShape = new THREE.Shape();
arrowShape.moveTo(-0.05, 0);
arrowShape.lineTo(0.05, 0);
arrowShape.lineTo(0, -0.08);
arrowShape.lineTo(0, -0.05);
arrowShape.closePath();
const arrowGeom = new THREE.ShapeGeometry(arrowShape);