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

Merge pull request 'ui/scene: init move machine' (#5031) from ui-more-2 into main

Browse Source 
Reviewed-on: https://git.clan.lol/clan/clan-core/pulls/5031
This commit is contained in:
hsjobeki
2025-08-31 15:22:32 +00:00
parent 14a52dbc2e 9bffa2a774
commit a131448dcf
13 changed files with 351 additions and 122 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -48,6 +48,10 @@ 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=";
};
in
runCommand "" { } ''
@@ -62,4 +66,5 @@ runCommand "" { } ''
cp ${archivoSemi.semiBold} $out/ArchivoSemiCondensed-SemiBold.woff2
cp ${commitMono} $out/CommitMonoV143-VF.woff2
cp ${commitMono_ttf} $out/CommitMonoV143-VF.ttf
''

55
pkgs/clan-app/ui/package-lock.json generated
View File

@@ -23,6 +23,7 @@
"solid-js": "^1.9.7",
"solid-toast": "^0.5.0",
"three": "^0.176.0",
"troika-three-text": "^0.52.4",
"valibot": "^1.1.0"
},
"devDependencies": {
@@ -3807,6 +3808,15 @@
"node": ">=12.0.0"
}
},
"node_modules/bidi-js": {
"version": "1.0.3",
"resolved": "https://registry.npmjs.org/bidi-js/-/bidi-js-1.0.3.tgz",
"integrity": "sha512-RKshQI1R3YQ+n9YJz2QQ147P66ELpa1FQEg20Dk8oW9t2KgLbpDLLp9aGZ7y8WHSshDknG0bknqGw5/tyCs5tw==",
"license": "MIT",
"dependencies": {
"require-from-string": "^2.0.2"
}
},
"node_modules/binary-extensions": {
"version": "2.3.0",
"resolved": "https://registry.npmjs.org/binary-extensions/-/binary-extensions-2.3.0.tgz",
@@ -7528,6 +7538,15 @@
"node": ">=0.10.0"
}
},
"node_modules/require-from-string": {
"version": "2.0.2",
"resolved": "https://registry.npmjs.org/require-from-string/-/require-from-string-2.0.2.tgz",
"integrity": "sha512-Xf0nWe6RseziFMu+Ap9biiUbmplq6S9/p+7w7YXP/JBHhrUDDUhwa+vANyubuqfZWTveU//DYVGsDG7RKL/vEw==",
"license": "MIT",
"engines": {
"node": ">=0.10.0"
}
},
"node_modules/requires-port": {
"version": "1.0.0",
"resolved": "https://registry.npmjs.org/requires-port/-/requires-port-1.0.0.tgz",
@@ -8655,6 +8674,36 @@
"tree-kill": "cli.js"
}
},
"node_modules/troika-three-text": {
"version": "0.52.4",
"resolved": "https://registry.npmjs.org/troika-three-text/-/troika-three-text-0.52.4.tgz",
"integrity": "sha512-V50EwcYGruV5rUZ9F4aNsrytGdKcXKALjEtQXIOBfhVoZU9VAqZNIoGQ3TMiooVqFAbR1w15T+f+8gkzoFzawg==",
"license": "MIT",
"dependencies": {
"bidi-js": "^1.0.2",
"troika-three-utils": "^0.52.4",
"troika-worker-utils": "^0.52.0",
"webgl-sdf-generator": "1.1.1"
},
"peerDependencies": {
"three": ">=0.125.0"
}
},
"node_modules/troika-three-utils": {
"version": "0.52.4",
"resolved": "https://registry.npmjs.org/troika-three-utils/-/troika-three-utils-0.52.4.tgz",
"integrity": "sha512-NORAStSVa/BDiG52Mfudk4j1FG4jC4ILutB3foPnfGbOeIs9+G5vZLa0pnmnaftZUGm4UwSoqEpWdqvC7zms3A==",
"license": "MIT",
"peerDependencies": {
"three": ">=0.125.0"
}
},
"node_modules/troika-worker-utils": {
"version": "0.52.0",
"resolved": "https://registry.npmjs.org/troika-worker-utils/-/troika-worker-utils-0.52.0.tgz",
"integrity": "sha512-W1CpvTHykaPH5brv5VHLfQo9D1OYuo0cSBEUQFFT/nBUzM8iD6Lq2/tgG/f1OelbAS1WtaTPQzE5uM49egnngw==",
"license": "MIT"
},
"node_modules/ts-api-utils": {
"version": "2.1.0",
"resolved": "https://registry.npmjs.org/ts-api-utils/-/ts-api-utils-2.1.0.tgz",
@@ -9268,6 +9317,12 @@
"node": "20 || >=22"
}
},
"node_modules/webgl-sdf-generator": {
"version": "1.1.1",
"resolved": "https://registry.npmjs.org/webgl-sdf-generator/-/webgl-sdf-generator-1.1.1.tgz",
"integrity": "sha512-9Z0JcMTFxeE+b2x1LJTdnaT8rT8aEp7MVxkNwoycNmJWwPdzoXzMh0BjJSh/AEFP+KPYZUli814h8bJZFIZ2jA==",
"license": "MIT"
},
"node_modules/webidl-conversions": {
"version": "7.0.0",
"resolved": "https://registry.npmjs.org/webidl-conversions/-/webidl-conversions-7.0.0.tgz",

1
pkgs/clan-app/ui/package.json
View File

@@ -80,6 +80,7 @@
"solid-js": "^1.9.7",
"solid-toast": "^0.5.0",
"three": "^0.176.0",
"troika-three-text": "^0.52.4",
"valibot": "^1.1.0"
},
"optionalDependencies": {

33
pkgs/clan-app/ui/src/components/ContextMenu/ContextMenu.module.css Normal file
View File

@@ -0,0 +1,33 @@
.list {
display: flex;
width: 113px;
padding: 8px;
flex-direction: column;
align-items: flex-start;
border-radius: 5px;
border: 1px solid var(--clr-border-def-2, #d8e8eb);
background: var(--clr-bg-def-1, #fff);
box-shadow: 0 3px 8px 0 rgba(0, 0, 0, 0.24);
}
.item {
max-height: 28px;
height: 28px;
padding: 4px 8px;
cursor: pointer;
display: flex;
align-items: center;
align-self: stretch;
gap: 4px;
&:hover {
@apply bg-def-3;
border-radius: 2px;
}
&[aria-disabled="true"] {
cursor: not-allowed;
pointer-events: none;
}
}

61
pkgs/clan-app/ui/src/components/ContextMenu/ContextMenu.tsx Normal file
View File

@@ -0,0 +1,61 @@
import { onCleanup, onMount } from "solid-js";
import styles from "./ContextMenu.module.css";
import { Typography } from "../Typography/Typography";
export const Menu = (props: {
x: number;
y: number;
onSelect: (option: "move") => void;
close: () => void;
intersect: string[];
}) => {
let ref: HTMLUListElement;
const handleClickOutside = (e: MouseEvent) => {
if (!ref.contains(e.target as Node)) {
props.close();
}
};
onMount(() => {
document.addEventListener("mousedown", handleClickOutside);
});
onCleanup(() =>
document.removeEventListener("mousedown", handleClickOutside),
);
const currentMachine = () => props.intersect.at(0) || null;
return (
<ul
ref={(el) => (ref = el)}
style={{
position: "absolute",
top: `${props.y}px`,
left: `${props.x}px`,
"z-index": 1000,
"pointer-events": "auto",
}}
class={styles.list}
>
<li
class={styles.item}
aria-disabled={!currentMachine()}
onClick={() => {
console.log("Move clicked", currentMachine());
props.onSelect("move");
props.close();
}}
>
<Typography
hierarchy="label"
size="s"
weight="bold"
color={currentMachine() ? "primary" : "quaternary"}
>
Move
</Typography>
</li>
</ul>
);
};

7
pkgs/clan-app/ui/src/components/Sidebar/SidebarBody.tsx
View File

@@ -8,8 +8,8 @@ import { MachineStatus } from "@/src/components/MachineStatus/MachineStatus";
import { buildMachinePath, useClanURI } from "@/src/hooks/clan";
import { useMachineStateQuery } from "@/src/hooks/queries";
import { SidebarProps } from "./Sidebar";
import { ClanContext } from "@/src/routes/Clan/Clan";
import { Button } from "../Button/Button";
import { useClanContext } from "@/src/routes/Clan/Clan";
interface MachineProps {
clanURI: string;
@@ -59,10 +59,7 @@ const MachineRoute = (props: MachineProps) => {
export const SidebarBody = (props: SidebarProps) => {
const clanURI = useClanURI();
const ctx = useContext(ClanContext);
if (!ctx) {
throw new Error("ClanContext not found");
}
const ctx = useClanContext();
const sectionLabels = (props.staticSections || []).map(
(section) => section.title,

10
pkgs/clan-app/ui/src/components/Sidebar/SidebarHeader.tsx
View File

@@ -3,12 +3,12 @@ import Icon from "@/src/components/Icon/Icon";
import { DropdownMenu } from "@kobalte/core/dropdown-menu";
import { useNavigate } from "@solidjs/router";
import { Typography } from "../Typography/Typography";
import { createSignal, For, Show, Suspense, useContext } from "solid-js";
import { createSignal, For, Show, Suspense } from "solid-js";
import { navigateToOnboarding } from "@/src/hooks/clan";
import { setActiveClanURI } from "@/src/stores/clan";
import { Button } from "../Button/Button";
import { ClanContext } from "@/src/routes/Clan/Clan";
import { ClanSettingsModal } from "@/src/modals/ClanSettingsModal/ClanSettingsModal";
import { useClanContext } from "@/src/routes/Clan/Clan";
export const SidebarHeader = () => {
const navigate = useNavigate();
@@ -17,11 +17,7 @@ export const SidebarHeader = () => {
const [showSettings, setShowSettings] = createSignal(false);
// get information about the current active clan
const ctx = useContext(ClanContext);
if (!ctx) {
throw new Error("SidebarContext not found");
}
const ctx = useClanContext();
const clanChar = () =>
ctx?.activeClanQuery?.data?.details.name.charAt(0).toUpperCase();

104
pkgs/clan-app/ui/src/routes/Clan/Clan.tsx
View File

@@ -8,10 +8,10 @@ import {
on,
onMount,
Show,
Signal,
useContext,
} from "solid-js";
import {
buildClanPath,
buildMachinePath,
maybeUseMachineName,
useClanURI,
@@ -55,57 +55,38 @@ interface ClanContextProps {
setShowAddMachine(value: boolean): void;
}
class DefaultClanContext implements ClanContextProps {
public readonly clanURI: string;
function createClanContext(
clanURI: string,
machinesQuery: MachinesQueryResult,
activeClanQuery: UseQueryResult<ClanDetails>,
otherClanQueries: UseQueryResult<ClanDetails>[],
) {
const [showAddMachine, setShowAddMachine] = createSignal(false);
const allClansQueries = [activeClanQuery, ...otherClanQueries];
const allQueries = [machinesQuery, ...allClansQueries];
public readonly activeClanQuery: UseQueryResult<ClanDetails>;
public readonly otherClanQueries: UseQueryResult<ClanDetails>[];
public readonly allClansQueries: UseQueryResult<ClanDetails>[];
public readonly machinesQuery: MachinesQueryResult;
allQueries: UseQueryResult[];
showAddMachineSignal: Signal<boolean>;
constructor(
clanURI: string,
machinesQuery: MachinesQueryResult,
activeClanQuery: UseQueryResult<ClanDetails>,
otherClanQueries: UseQueryResult<ClanDetails>[],
) {
this.clanURI = clanURI;
this.machinesQuery = machinesQuery;
this.activeClanQuery = activeClanQuery;
this.otherClanQueries = otherClanQueries;
this.allClansQueries = [activeClanQuery, ...otherClanQueries];
this.allQueries = [machinesQuery, activeClanQuery, ...otherClanQueries];
this.showAddMachineSignal = createSignal(false);
}
isLoading(): boolean {
return this.allQueries.some((q) => q.isLoading);
}
isError(): boolean {
return this.activeClanQuery.isError;
}
setShowAddMachine(value: boolean) {
const [_, setShow] = this.showAddMachineSignal;
setShow(value);
}
showAddMachine(): boolean {
const [show, _] = this.showAddMachineSignal;
return show();
}
return {
clanURI,
machinesQuery,
activeClanQuery,
otherClanQueries,
allClansQueries,
isLoading: () => allQueries.some((q) => q.isLoading),
isError: () => activeClanQuery.isError,
showAddMachine,
setShowAddMachine,
};
}
export const ClanContext = createContext<ClanContextProps>();
const ClanContext = createContext<ClanContextProps>();
export const useClanContext = () => {
const ctx = useContext(ClanContext);
if (!ctx) {
throw new Error("ClanContext not found");
}
return ctx;
};
export const Clan: Component<RouteSectionProps> = (props) => {
const clanURI = useClanURI();
@@ -124,17 +105,15 @@ export const Clan: Component<RouteSectionProps> = (props) => {
const machinesQuery = useMachinesQuery(clanURI);
const ctx = createClanContext(
clanURI,
machinesQuery,
activeClanQuery,
otherClanQueries,
);
return (
<ClanContext.Provider
value={
new DefaultClanContext(
clanURI,
machinesQuery,
activeClanQuery,
otherClanQueries,
)
}
>
<ClanContext.Provider value={ctx}>
<div
class={cx(styles.sidebarContainer, {
[styles.machineSelected]: useMachineName(),
@@ -149,10 +128,7 @@ export const Clan: Component<RouteSectionProps> = (props) => {
};
const ClanSceneController = (props: RouteSectionProps) => {
const ctx = useContext(ClanContext);
if (!ctx) {
throw new Error("ClanContext not found");
}
const ctx = useClanContext();
const navigate = useNavigate();
@@ -197,6 +173,8 @@ const ClanSceneController = (props: RouteSectionProps) => {
const selected = ids.values().next().value;
if (selected) {
navigate(buildMachinePath(ctx.clanURI, selected));
} else {
navigate(buildClanPath(ctx.clanURI));
}
};

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

@@ -27,6 +27,7 @@ export class MachineManager {
machinesQueryResult: MachinesQueryResult,
selectedIds: Accessor<Set<string>>,
setMachinePos: (id: string, position: [number, number] | null) => void,
camera: THREE.Camera,
) {
this.machinePositionsSignal = machinePositionsSignal;
@@ -82,6 +83,7 @@ export class MachineManager {
id,
selectedIds,
highlightGroups,
camera,
);
this.machines.set(id, repr);
scene.add(repr.group);

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

@@ -3,6 +3,9 @@ import { ObjectRegistry } from "./ObjectRegistry";
import { CSS2DObject } from "three/examples/jsm/renderers/CSS2DRenderer.js";
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";
// Constants
const BASE_SIZE = 0.9;
@@ -28,6 +31,7 @@ export class MachineRepr {
private baseMesh: THREE.Mesh;
private geometry: THREE.BoxGeometry;
private material: THREE.MeshPhongMaterial;
private camera: THREE.Camera;
private disposeRoot: () => void;
@@ -38,8 +42,10 @@ export class MachineRepr {
id: string,
selectedSignal: Accessor<Set<string>>,
highlightGroups: Record<string, Set<string>>, // Reactive store
camera: THREE.Camera,
) {
this.id = id;
this.camera = camera;
this.geometry = new THREE.BoxGeometry(CUBE_SIZE, CUBE_SIZE, CUBE_SIZE);
this.material = new THREE.MeshPhongMaterial({
color: CUBE_COLOR,
@@ -62,7 +68,6 @@ export class MachineRepr {
this.baseMesh.name = "base";
const label = this.createLabel(id);
this.cubeMesh.add(label);
const shadowPlaneMaterial = new THREE.MeshStandardMaterial({
color: BASE_COLOR, // any color you like
@@ -82,6 +87,7 @@ export class MachineRepr {
shadowPlane.position.set(0, BASE_HEIGHT + 0.0001, 0);
this.group = new THREE.Group();
this.group.add(label);
this.group.add(this.cubeMesh);
this.group.add(this.baseMesh);
this.group.add(shadowPlane);
@@ -161,12 +167,27 @@ export class MachineRepr {
}
private createLabel(id: string) {
const div = document.createElement("div");
div.className = "machine-label";
div.textContent = id;
const label = new CSS2DObject(div);
label.position.set(0, CUBE_SIZE + 0.1, 0);
return label;
const text = new Text();
text.text = id;
text.font = ttf;
// text.font = ".fonts/CommitMonoV143-VF.woff2"; // <-- normal web font, not JSON
text.fontSize = 0.15; // relative to your cube size
text.color = 0x000000; // any THREE.Color
text.anchorX = "center"; // horizontal centering
text.anchorY = "bottom"; // baseline aligns to cube top
text.position.set(0, CUBE_SIZE + 0.05, 0);
// If you want it to always face camera:
text.userData.isLabel = true;
text.outlineWidth = 0.005;
text.outlineColor = 0x333333;
text.quaternion.copy(this.camera.quaternion);
// Re-render on text changes
text.sync(() => {
renderLoop.requestRender();
});
return text;
}
dispose(scene: THREE.Scene) {

14
pkgs/clan-app/ui/src/scene/RenderLoop.ts
View File

@@ -1,7 +1,7 @@
import { Scene, Camera, WebGLRenderer } from "three";
import { MapControls } from "three/examples/jsm/controls/MapControls.js";
import { CSS2DRenderer } from "three/examples/jsm/renderers/CSS2DRenderer.js";
import * as THREE from "three";
/**
* Private class to manage the render loop
* @internal
@@ -93,6 +93,18 @@ class RenderLoop {
this.renderer.render(this.bgScene, this.bgCamera);
this.renderer.render(this.scene, this.camera);
this.scene.traverse((obj) => {
if (obj.userData.isLabel) {
(obj as THREE.Mesh).quaternion.copy(this.camera.quaternion);
}
// if (obj.userData.isLabel) {
// const camPos = new THREE.Vector3();
// this.camera.getWorldPosition(camPos);
// obj.lookAt(new THREE.Vector3(camPos.x, obj.position.y, camPos.z));
// }
});
this.labelRenderer.render(this.scene, this.camera);
}

145
pkgs/clan-app/ui/src/scene/cubes.tsx
View File

@@ -5,6 +5,7 @@ import {
onMount,
on,
JSX,
Show,
} from "solid-js";
import "./cubes.css";
@@ -22,6 +23,29 @@ import { renderLoop } from "./RenderLoop";
import { ObjectRegistry } from "./ObjectRegistry";
import { MachineManager } from "./MachineManager";
import cx from "classnames";
import { Portal } from "solid-js/web";
import { Menu } from "../components/ContextMenu/ContextMenu";
import { clearHighlight, setHighlightGroups } from "./highlightStore";
function intersectMachines(
event: MouseEvent,
renderer: THREE.WebGLRenderer,
camera: THREE.Camera,
machineManager: MachineManager,
raycaster: THREE.Raycaster,
): string[] {
const rect = renderer.domElement.getBoundingClientRect();
const mouse = new THREE.Vector2(
((event.clientX - rect.left) / rect.width) * 2 - 1,
-((event.clientY - rect.top) / rect.height) * 2 + 1,
);
raycaster.setFromCamera(mouse, camera);
const intersects = raycaster.intersectObjects(
Array.from(machineManager.machines.values().map((m) => m.group)),
);
return intersects.map((i) => i.object.userData.id);
}
function garbageCollectGroup(group: THREE.Group) {
for (const child of group.children) {
@@ -64,7 +88,7 @@ export function useMachineClick() {
/*Gloabl signal*/
const [worldMode, setWorldMode] = createSignal<
"default" | "select" | "service" | "create"
"default" | "select" | "service" | "create" | "move"
>("select");
export { worldMode, setWorldMode };
@@ -88,7 +112,7 @@ export function CubeScene(props: {
let controls: MapControls;
// Raycaster for clicking
const raycaster = new THREE.Raycaster();
let initBase: THREE.Mesh | undefined;
let actionBase: THREE.Mesh | undefined;
// Create background scene
const bgScene = new THREE.Scene();
@@ -111,6 +135,10 @@ export function CubeScene(props: {
position: { x: 0, y: 0, z: 0 },
spherical: { radius: 0, theta: 0, phi: 0 },
});
// Context menu state
const [contextOpen, setContextOpen] = createSignal(false);
const [menuPos, setMenuPos] = createSignal<{ x: number; y: number }>();
const [menuIntersection, setMenuIntersection] = createSignal<string[]>([]);
// Grid configuration
const GRID_SIZE = 1;
@@ -126,8 +154,10 @@ export function CubeScene(props: {
const BASE_COLOR = 0xecfdff;
const BASE_EMISSIVE = 0x0c0c0c;
const CREATE_BASE_COLOR = 0x636363;
const ACTION_BASE_COLOR = 0x636363;
const CREATE_BASE_EMISSIVE = 0xc5fad7;
const MOVE_BASE_EMISSIVE = 0xb2d7ff;
function createCubeBase(
cube_pos: [number, number, number],
@@ -148,12 +178,6 @@ export function CubeScene(props: {
return base;
}
function toggleSelection(id: string) {
const next = new Set<string>();
next.add(id);
props.onSelect(next);
}
const initialCameraPosition = { x: 20, y: 20, z: 20 };
const initialSphericalCameraPosition = new THREE.Spherical();
initialSphericalCameraPosition.setFromVector3(
@@ -350,15 +374,15 @@ export function CubeScene(props: {
);
// Important create CubeBase depends on sharedBaseGeometry
initBase = createCubeBase(
actionBase = createCubeBase(
[1, BASE_HEIGHT / 2, 1],
1,
CREATE_BASE_COLOR,
ACTION_BASE_COLOR,
CREATE_BASE_EMISSIVE,
);
initBase.visible = false;
actionBase.visible = false;
scene.add(initBase);
scene.add(actionBase);
// const spherical = new THREE.Spherical();
// spherical.setFromVector3(camera.position);
@@ -387,9 +411,9 @@ export function CubeScene(props: {
createEffect(
on(worldMode, (mode) => {
if (mode === "create") {
initBase!.visible = true;
actionBase!.visible = true;
} else {
initBase!.visible = false;
actionBase!.visible = false;
}
renderLoop.requestRender();
}),
@@ -404,6 +428,7 @@ export function CubeScene(props: {
props.cubesQuery,
props.selectedIds,
props.setMachinePos,
camera,
);
// Click handler:
@@ -426,11 +451,21 @@ export function CubeScene(props: {
console.error("Error creating cube:", error);
})
.finally(() => {
if (initBase) initBase.visible = false;
if (actionBase) actionBase.visible = false;
setWorldMode("default");
});
}
if (worldMode() === "move") {
console.log("sanpped");
const currId = menuIntersection().at(0);
const pos = cursorPosition();
if (!currId || !pos) return;
props.setMachinePos(currId, pos);
setWorldMode("select");
clearHighlight("move");
}
const rect = renderer.domElement.getBoundingClientRect();
const mouse = new THREE.Vector2(
@@ -447,13 +482,13 @@ export function CubeScene(props: {
console.log("Clicked on cube:", intersects);
const id = intersects[0].object.userData.id;
if (worldMode() === "select") toggleSelection(id);
if (worldMode() === "select") props.onSelect(new Set<string>([id]));
emitMachineClick(id); // notify subscribers
} else {
emitMachineClick(null);
props.onSelect(new Set<string>()); // Clear selection if clicked outside cubes
if (worldMode() === "select") props.onSelect(new Set<string>());
}
};
@@ -484,18 +519,28 @@ export function CubeScene(props: {
renderLoop.requestRender();
};
const handleMouseDown = (e: MouseEvent) => {
if (e.button === 2) {
e.preventDefault();
e.stopPropagation();
const intersection = intersectMachines(
e,
renderer,
camera,
machineManager,
raycaster,
);
if (!intersection.length) return;
setMenuIntersection(intersection);
setMenuPos({ x: e.clientX, y: e.clientY });
setContextOpen(true);
}
};
renderer.domElement.addEventListener("mousedown", handleMouseDown);
renderer.domElement.addEventListener("mousemove", onMouseMove);
window.addEventListener("resize", handleResize);
// For debugging,
// TODO: Remove in production
window.addEventListener(
"contextmenu",
(e) => {
e.stopPropagation();
},
{ capture: true },
);
// Initial render
renderLoop.requestRender();
@@ -522,12 +567,12 @@ export function CubeScene(props: {
renderer.domElement.removeEventListener("mousemove", onMouseMove);
window.removeEventListener("resize", handleResize);
if (initBase) {
initBase.geometry.dispose();
if (Array.isArray(initBase.material)) {
initBase.material.forEach((material) => material.dispose());
if (actionBase) {
actionBase.geometry.dispose();
if (Array.isArray(actionBase.material)) {
actionBase.material.forEach((material) => material.dispose());
} else {
initBase.material.dispose();
actionBase.material.dispose();
}
}
@@ -543,10 +588,18 @@ export function CubeScene(props: {
renderLoop.requestRender();
};
const onMouseMove = (event: MouseEvent) => {
if (worldMode() !== "create") return;
if (!initBase) return;
if (!(worldMode() === "create" || worldMode() === "move")) return;
if (!actionBase) return;
initBase.visible = true;
console.log("Mouse move in create/move mode");
actionBase.visible = true;
(actionBase.material as THREE.MeshPhongMaterial).emissive.set(
worldMode() === "create" ? CREATE_BASE_EMISSIVE : MOVE_BASE_EMISSIVE,
);
// Calculate mouse position in normalized device coordinates
// (-1 to +1) for both components
const rect = renderer.domElement.getBoundingClientRect();
const mouse = new THREE.Vector2(
@@ -577,21 +630,37 @@ export function CubeScene(props: {
}
if (
Math.abs(initBase.position.x - snapped.x) > 0.01 ||
Math.abs(initBase.position.z - snapped.z) > 0.01
Math.abs(actionBase.position.x - snapped.x) > 0.01 ||
Math.abs(actionBase.position.z - snapped.z) > 0.01
) {
// Only request render if the position actually changed
initBase.position.set(snapped.x, 0, snapped.z);
actionBase.position.set(snapped.x, 0, snapped.z);
setCursorPosition([snapped.x, snapped.z]); // Update next position for cube creation
renderLoop.requestRender();
}
}
};
const handleMenuSelect = (mode: "move") => {
setWorldMode(mode);
setHighlightGroups({ move: new Set(menuIntersection()) });
console.log("Menu selected, new World mode", worldMode());
};
const machinesQuery = useMachinesQuery(props.clanURI);
return (
<>
<Show when={contextOpen()}>
<Portal mount={document.body}>
<Menu
onSelect={handleMenuSelect}
intersect={menuIntersection()}
x={menuPos()!.x - 10}
y={menuPos()!.y - 10}
close={() => setContextOpen(false)}
/>
</Portal>
</Show>
<div
class={cx(
"cubes-scene-container",

1
pkgs/clan-app/ui/src/workflows/AddMachine/StepTags.tsx
View File

@@ -63,7 +63,6 @@ export const StepTags = (props: { onDone: () => void }) => {
store.onCreated(store.general.name);
}
}
console.log("Done creating machine");
props.onDone();
};