diff --git a/src/components/three/ModelViewer.tsx b/src/components/three/ModelViewer.tsx index 91350cd..62cc5e0 100644 --- a/src/components/three/ModelViewer.tsx +++ b/src/components/three/ModelViewer.tsx @@ -83,6 +83,7 @@ function GLBModel({ sceneModel, isActive }: { sceneModel: SceneModel; isActive: const edgeThresholdAngle = useModelStore((s) => s.edgeThresholdAngle); const checklist = useModelStore((s) => s.checklist); const setActive = useModelStore((s) => s.setActiveModel); + const selectionMode = useModelStore((s) => s.selectionMode); const fineTuning = sceneModel.fineTuning; const modelInfo = useMemo(() => { @@ -184,7 +185,20 @@ function GLBModel({ sceneModel, isActive }: { sceneModel: SceneModel; isActive: return ( { e.stopPropagation(); setActive(sceneModel.id); }} + onClick={(e) => { + e.stopPropagation(); + if ((e.delta ?? 0) > 4) return; + + if (selectionMode) { + const element = findElementRoot(e.object); + if (element) { + useModelStore.getState().toggleElementSelection(elementKey(sceneModel.id, element)); + } + return; + } + + setActive(sceneModel.id); + }} userData={{ modelId: sceneModel.id, dominantAxis }} > {/* Translation */} @@ -707,43 +721,27 @@ function SelectionHandler() { const prevCursor = gl.domElement.style.cursor; gl.domElement.style.cursor = 'cell'; const canvas = gl.domElement; - let downX = 0, downY = 0, armed = false; - - const onDown = (e: PointerEvent) => { - if (e.button !== 0) { armed = false; return; } - downX = e.clientX; downY = e.clientY; armed = true; - }; - const onUp = (e: PointerEvent) => { - if (!armed) return; - armed = false; - if (Math.hypot(e.clientX - downX, e.clientY - downY) > 4) return; + const onR3FMiss = (event: Event) => { + const detail = (event as CustomEvent).detail; + if (!detail || detail.button !== 0) return; const rect = canvas.getBoundingClientRect(); - mouse.x = ((e.clientX - rect.left) / rect.width) * 2 - 1; - mouse.y = -((e.clientY - rect.top) / rect.height) * 2 + 1; + mouse.x = ((detail.clientX - rect.left) / rect.width) * 2 - 1; + mouse.y = -((detail.clientY - rect.top) / rect.height) * 2 + 1; raycaster.setFromCamera(mouse, camera); const intersects = raycaster.intersectObjects(scene.children, true); const hit = intersects.find((i) => isPickableModelMesh(i.object)); if (!hit) return; const element = findElementRoot(hit.object); - let cur: THREE.Object3D | null = hit.object; - let modelId: string | null = null; - while (cur) { - if (!modelId && cur.userData?.modelId) modelId = cur.userData.modelId as string; - cur = cur.parent; - } - if (!modelId) modelId = useModelStore.getState().activeModelId; + const modelId = useModelStore.getState().activeModelId; if (!modelId || !element) return; - const key = elementKey(modelId, element); - useModelStore.getState().toggleElementSelection(key); + useModelStore.getState().toggleElementSelection(elementKey(modelId, element)); }; - canvas.addEventListener('pointerdown', onDown); - canvas.addEventListener('pointerup', onUp); + canvas.addEventListener('tsxr-selection-miss', onR3FMiss); return () => { - canvas.removeEventListener('pointerdown', onDown); - canvas.removeEventListener('pointerup', onUp); + canvas.removeEventListener('tsxr-selection-miss', onR3FMiss); gl.domElement.style.cursor = prevCursor; }; }, [selectionMode, camera, scene, gl, raycaster, mouse]); @@ -1021,6 +1019,11 @@ export function ModelViewerCanvas({ url }: ModelViewerProps) { gl={{ antialias: true, alpha: true, powerPreference: 'high-performance', preserveDrawingBuffer: true }} frameloop="always" className="!bg-background" + onPointerMissed={(e) => { + if (useModelStore.getState().selectionMode) { + (e.target as HTMLCanvasElement).dispatchEvent(new CustomEvent('tsxr-selection-miss', { detail: e })); + } + }} onCreated={({ gl }) => { const isApple = /Mac|iPhone|iPad/.test(navigator.platform); const maxRatio = isApple ? 2 : 1.5;