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

ui/machineRepr: listen to highlight state

Browse Source
This commit is contained in:
Johannes Kirschbauer
2025-08-28 22:37:52 +02:00
parent 73f2a4f56f
commit 6a964f37d5
2 changed files with 34 additions and 15 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
pkgs/clan-app/ui/src/scene/MachineManager.ts
View File

@@ -5,6 +5,7 @@ import { SceneData } from "../stores/clan";
import { MachinesQueryResult } from "../hooks/queries"; import { MachinesQueryResult } from "../hooks/queries";
import { ObjectRegistry } from "./ObjectRegistry"; import { ObjectRegistry } from "./ObjectRegistry";
import { renderLoop } from "./RenderLoop"; import { renderLoop } from "./RenderLoop";
import { highlightGroups } from "./highlightStore";
function keyFromPos(pos: [number, number]): string { function keyFromPos(pos: [number, number]): string {
return `${pos[0]},${pos[1]}`; return `${pos[0]},${pos[1]}`;
@@ -79,6 +80,7 @@ export class MachineManager {
new THREE.Vector2(data.position[0], data.position[1]), new THREE.Vector2(data.position[0], data.position[1]),
id, id,
selectedIds, selectedIds,
highlightGroups,
); );
this.machines.set(id, repr); this.machines.set(id, repr);
scene.add(repr.group); scene.add(repr.group);

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

@@ -13,6 +13,7 @@ const CUBE_COLOR = 0xe2eff0;
const CUBE_EMISSIVE = 0x303030; const CUBE_EMISSIVE = 0x303030;
const CUBE_SELECTED_COLOR = 0x4b6767; const CUBE_SELECTED_COLOR = 0x4b6767;
const HIGHLIGHT_COLOR = 0x00ee66;
const BASE_COLOR = 0xdbeaeb; const BASE_COLOR = 0xdbeaeb;
const BASE_EMISSIVE = 0x0c0c0c; const BASE_EMISSIVE = 0x0c0c0c;
@@ -36,6 +37,7 @@ export class MachineRepr {
position: THREE.Vector2, position: THREE.Vector2,
id: string, id: string,
selectedSignal: Accessor<Set<string>>, selectedSignal: Accessor<Set<string>>,
highlightGroups: Record<string, Set<string>>, // Reactive store
) { ) {
this.id = id; this.id = id;
this.geometry = new THREE.BoxGeometry(CUBE_SIZE, CUBE_SIZE, CUBE_SIZE); this.geometry = new THREE.BoxGeometry(CUBE_SIZE, CUBE_SIZE, CUBE_SIZE);
@@ -89,23 +91,38 @@ export class MachineRepr {
this.disposeRoot = createRoot((disposeEffects) => { this.disposeRoot = createRoot((disposeEffects) => {
createEffect( createEffect(
on(selectedSignal, (selectedIds) => { on(
const isSelected = selectedIds.has(this.id); [selectedSignal, () => Object.entries(highlightGroups)],
// Update cube ([selectedIds, groups]) => {
(this.cubeMesh.material as THREE.MeshPhongMaterial).color.set( const isSelected = selectedIds.has(this.id);
isSelected ? CUBE_SELECTED_COLOR : CUBE_COLOR, const highlightedGroups = groups
); .filter(([, ids]) => ids.has(this.id))
.map(([name]) => name);
// Update base // console.log("MachineRepr effect", id, highlightedGroups);
(this.baseMesh.material as THREE.MeshPhongMaterial).color.set( // Update cube
isSelected ? BASE_SELECTED_COLOR : BASE_COLOR, (this.cubeMesh.material as THREE.MeshPhongMaterial).color.set(
); isSelected ? CUBE_SELECTED_COLOR : CUBE_COLOR,
(this.baseMesh.material as THREE.MeshPhongMaterial).emissive.set( );
isSelected ? BASE_SELECTED_EMISSIVE : BASE_EMISSIVE,
);
renderLoop.requestRender(); // Update base
}), (this.baseMesh.material as THREE.MeshPhongMaterial).color.set(
isSelected ? BASE_SELECTED_COLOR : BASE_COLOR,
);
// TOOD: Find a different way to show both selected & highlighted
// I.e. via outline or pulsing
// selected > highlighted > normal
(this.baseMesh.material as THREE.MeshPhongMaterial).emissive.set(
highlightedGroups.length > 0 ? HIGHLIGHT_COLOR : 0x000000,
);
// (this.baseMesh.material as THREE.MeshPhongMaterial).emissive.set(
// isSelected ? BASE_SELECTED_EMISSIVE : BASE_EMISSIVE,
// );
renderLoop.requestRender();
},
),
); );
return disposeEffects; return disposeEffects;