@pascal-app/viewer 0.3.3 → 0.5.0

package/dist/lib/suppress-three-clock-warning.js

@@ -0,0 +1,51 @@
+/**
+ * Suppresses the `THREE.Clock: This module has been deprecated` warning
+ * emitted by three.js r183+ on every `new THREE.Clock()` call.
+ *
+ * We don't instantiate `Clock` ourselves — `@react-three/fiber` 9.x
+ * (current stable) creates one internally per `<Canvas>` mount. The
+ * migration to `THREE.Timer` lands in R3F 10.x (still alpha).
+ *
+ * Uses three's `setConsoleFunction` hook so we don't touch `console.warn`
+ * globally. Only the exact Clock deprecation message is suppressed; all
+ * other three.js logs (including TSL stack-trace warnings) pass through
+ * untouched.
+ *
+ * Runs in production as well as dev — the suppressed message is a pure
+ * deprecation notice with no user-actionable content.
+ *
+ * REMOVAL: safe to delete once `@react-three/fiber` no longer constructs
+ * `new THREE.Clock()`. To verify after an R3F upgrade:
+ *   grep -n "new THREE.Clock" node_modules/@react-three/fiber/dist/*.js
+ * No hits → delete this file and its import in components/viewer/index.tsx.
+ *
+ * @see https://github.com/pascalorg/editor/issues/213
+ */
+import { setConsoleFunction } from 'three';
+// three's warn() prepends 'THREE.' to its first argument, and the Clock
+// constructor passes 'THREE.Clock: ...', producing a double-prefixed
+// string. Exact equality keeps the suppression surgical — if three ever
+// rewords this, the filter stops matching and the message resurfaces.
+const CLOCK_DEPRECATION_MESSAGE = 'THREE.THREE.Clock: This module has been deprecated. Please use THREE.Timer instead.';
+// HMR-idempotent install guard. setConsoleFunction is a single-slot global
+// in three, so re-evaluating this module on HMR would reinstall the hook.
+const INSTALLED = Symbol.for('@pascal-app/viewer/suppress-three-clock-warning');
+if (!globalThis[INSTALLED]) {
+    ;
+    globalThis[INSTALLED] = true;
+    setConsoleFunction((method, message, ...params) => {
+        if (method === 'warn' && message === CLOCK_DEPRECATION_MESSAGE) {
+            return;
+        }
+        // Mirror three's default stack-trace handling so TSL warnings/errors
+        // keep their clickable stack frames.
+        if (method !== 'log') {
+            const first = params[0];
+            if (first?.isStackTrace && typeof first.getError === 'function') {
+                console[method](first.getError(message));
+                return;
+            }
+        }
+        console[method](message, ...params);
+    });
+}

package/dist/store/use-viewer.d.ts

@@ -12,6 +12,10 @@ type Outliner = {
 };
 type ViewerState = {
     selection: SelectionPath;
+    previewSelectedIds: BaseNode['id'][];
+    setPreviewSelectedIds: (ids: BaseNode['id'][]) => void;
+    hoverHighlightMode: 'default' | 'delete';
+    setHoverHighlightMode: (mode: 'default' | 'delete') => void;
     hoveredId: AnyNode['id'] | ZoneNode['id'] | null;
     setHoveredId: (id: AnyNode['id'] | ZoneNode['id'] | null) => void;
     cameraMode: 'perspective' | 'orthographic';
@@ -44,6 +48,8 @@ type ViewerState = {
     setExportScene: (fn: ((format?: 'glb' | 'stl' | 'obj') => Promise<void>) | null) => void;
     debugColors: boolean;
     setDebugColors: (enabled: boolean) => void;
+    walkthroughMode: boolean;
+    setWalkthroughMode: (mode: boolean) => void;
     cameraDragging: boolean;
     setCameraDragging: (dragging: boolean) => void;
 };

package/dist/store/use-viewer.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"use-viewer.d.ts","sourceRoot":"","sources":["../../src/store/use-viewer.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"use-viewer.d.ts","sourceRoot":"","sources":["../../src/store/use-viewer.ts"],"names":[],"mappings":"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"}

package/dist/store/use-viewer.js

@@ -3,6 +3,10 @@ import { create } from 'zustand';
 import { persist } from 'zustand/middleware';
 const useViewer = create()(persist((set) => ({
     selection: { buildingId: null, levelId: null, zoneId: null, selectedIds: [] },
+    previewSelectedIds: [],
+    setPreviewSelectedIds: (ids) => set({ previewSelectedIds: ids }),
+    hoverHighlightMode: 'default',
+    setHoverHighlightMode: (mode) => set({ hoverHighlightMode: mode }),
     hoveredId: null,
     setHoveredId: (id) => set({ hoveredId: id }),
     cameraMode: 'perspective',
@@ -82,7 +86,7 @@ const useViewer = create()(persist((set) => ({
             if (updates.selectedIds === undefined)
                 newSelection.selectedIds = [];
         }
-        return { selection: newSelection };
+        return { selection: newSelection, previewSelectedIds: [] };
     }),
     resetSelection: () => set({
         selection: {
@@ -91,12 +95,15 @@ const useViewer = create()(persist((set) => ({
             zoneId: null,
             selectedIds: [],
         },
+        previewSelectedIds: [],
     }),
     outliner: { selectedObjects: [], hoveredObjects: [] },
     exportScene: null,
     setExportScene: (fn) => set({ exportScene: fn }),
     debugColors: false,
     setDebugColors: (enabled) => set({ debugColors: enabled }),
+    walkthroughMode: false,
+    setWalkthroughMode: (mode) => set({ walkthroughMode: mode }),
     cameraDragging: false,
     setCameraDragging: (dragging) => set({ cameraDragging: dragging }),
 }), {

package/dist/systems/wall/wall-cutout.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"wall-cutout.d.ts","sourceRoot":"","sources":["../../../src/systems/wall/wall-cutout.tsx"],"names":[],"mappings":"AAmIA,eAAO,MAAM,UAAU,YAiFtB,CAAA"}
+{"version":3,"file":"wall-cutout.d.ts","sourceRoot":"","sources":["../../../src/systems/wall/wall-cutout.tsx"],"names":[],"mappings":"AAoMA,eAAO,MAAM,UAAU,YAgFtB,CAAA"}

package/dist/systems/wall/wall-cutout.js

@@ -1,12 +1,26 @@
-import { sceneRegistry, useScene } from '@pascal-app/core';
+import { baseMaterial, sceneRegistry, useScene, } from '@pascal-app/core';
 import { useFrame } from '@react-three/fiber';
 import { useRef } from 'react';
+import { Color } from 'three';
 import { Fn, float, fract, length, mix, positionLocal, smoothstep, step, vec2 } from 'three/tsl';
 import { MeshStandardNodeMaterial, Vector3 } from 'three/webgpu';
 import useViewer from '../../store/use-viewer';
 const tmpVec = new Vector3();
 const u = new Vector3();
 const v = new Vector3();
+const DEFAULT_WALL_COLOR = '#f2f0ed';
+const WALL_HIGHLIGHT_PROFILES = {
+    delete: {
+        color: new Color('#dc2626'),
+        blend: 0.78,
+        emissiveIntensity: 0.46,
+    },
+    selection: {
+        color: new Color('#818cf8'),
+        blend: 0.32,
+        emissiveIntensity: 0.42,
+    },
+};
 const dotPattern = Fn(() => {
     const scale = float(0.1);
     const dotSize = float(0.3);
@@ -19,6 +33,17 @@ const dotPattern = Fn(() => {
     return dots.mul(yFade);
 });
 const wallMaterialCache = new Map();
+const presetColors = {
+    white: '#ffffff',
+    brick: '#8b4513',
+    concrete: '#808080',
+    wood: '#deb887',
+    glass: '#87ceeb',
+    metal: '#c0c0c0',
+    plaster: '#f5f5dc',
+    tile: '#dcdcdc',
+    marble: '#f5f5f5',
+};
 function getMaterialHash(wallNode) {
     if (!wallNode.material)
         return 'none';
@@ -31,20 +56,22 @@ function getMaterialHash(wallNode) {
     }
     return 'default';
 }
-const presetColors = {
-    white: '#ffffff',
-    brick: '#8b4513',
-    concrete: '#808080',
-    wood: '#deb887',
-    glass: '#87ceeb',
-    metal: '#c0c0c0',
-    plaster: '#f5f5dc',
-    tile: '#dcdcdc',
-    marble: '#f5f5f5',
-};
 function getPresetColor(preset) {
     return presetColors[preset] ?? '#ffffff';
 }
+function getHighlightedColor(color, kind) {
+    const profile = WALL_HIGHLIGHT_PROFILES[kind];
+    return new Color(color).lerp(profile.color, profile.blend);
+}
+function createHighlightedWallMaterial(material, baseColor, kind) {
+    const highlightedMaterial = material.clone();
+    const highlightedColor = getHighlightedColor(baseColor, kind);
+    const profile = WALL_HIGHLIGHT_PROFILES[kind];
+    highlightedMaterial.color = highlightedColor;
+    highlightedMaterial.emissive = highlightedColor.clone();
+    highlightedMaterial.emissiveIntensity = profile.emissiveIntensity;
+    return highlightedMaterial;
+}
 function getMaterialsForWall(wallNode) {
     const cacheKey = wallNode.id;
     const materialHash = getMaterialHash(wallNode);
@@ -55,19 +82,25 @@ function getMaterialsForWall(wallNode) {
     if (existing) {
         existing.visible.dispose();
         existing.invisible.dispose();
+        existing.deleteVisible.dispose();
+        existing.deleteInvisible.dispose();
+        existing.highlightedVisible.dispose();
+        existing.highlightedInvisible.dispose();
     }
-    let userColor = '#ffffff';
+    let userColor = DEFAULT_WALL_COLOR;
     if (wallNode.material?.properties?.color) {
         userColor = wallNode.material.properties.color;
     }
     else if (wallNode.material?.preset && wallNode.material.preset !== 'custom') {
         userColor = getPresetColor(wallNode.material.preset);
     }
-    const visibleMat = new MeshStandardNodeMaterial({
-        color: userColor,
-        roughness: 1,
-        metalness: 0,
-    });
+    const visibleMat = wallNode.material
+        ? new MeshStandardNodeMaterial({
+            color: userColor,
+            roughness: 1,
+            metalness: 0,
+        })
+        : baseMaterial.clone();
     const invisibleMat = new MeshStandardNodeMaterial({
         transparent: true,
         opacityNode: mix(float(0.0), float(0.24), dotPattern()),
@@ -75,7 +108,19 @@ function getMaterialsForWall(wallNode) {
         depthWrite: false,
         emissive: userColor,
     });
-    const result = { visible: visibleMat, invisible: invisibleMat, materialHash };
+    const highlightedVisible = createHighlightedWallMaterial(visibleMat, userColor, 'selection');
+    const highlightedInvisible = createHighlightedWallMaterial(invisibleMat, userColor, 'selection');
+    const deleteVisible = createHighlightedWallMaterial(visibleMat, userColor, 'delete');
+    const deleteInvisible = createHighlightedWallMaterial(invisibleMat, userColor, 'delete');
+    const result = {
+        visible: visibleMat,
+        invisible: invisibleMat,
+        deleteVisible,
+        deleteInvisible,
+        highlightedVisible,
+        highlightedInvisible,
+        materialHash,
+    };
     wallMaterialCache.set(cacheKey, result);
     return result;
 }
@@ -106,65 +151,69 @@ export const WallCutout = () => {
     const lastUpdateTime = useRef(0);
     const lastWallMode = useRef(useViewer.getState().wallMode);
     const lastNumberOfWalls = useRef(0);
-    const lastWallMaterials = useRef(new Map());
+    const lastHighlightKey = useRef('');
     useFrame(({ camera, clock }) => {
         const wallMode = useViewer.getState().wallMode;
+        const selectedIds = useViewer.getState().selection.selectedIds;
+        const previewSelectedIds = useViewer.getState().previewSelectedIds;
+        const hoveredId = useViewer.getState().hoveredId;
+        const hoverHighlightMode = useViewer.getState().hoverHighlightMode;
         const currentTime = clock.elapsedTime;
         const currentCameraPosition = camera.position;
         camera.getWorldDirection(tmpVec);
         tmpVec.add(currentCameraPosition);
+        const highlightedWallIds = new Set([...selectedIds, ...previewSelectedIds].filter((id) => useScene.getState().nodes[id]?.type === 'wall'));
+        const deleteHoveredWallId = hoverHighlightMode === 'delete' &&
+            hoveredId &&
+            useScene.getState().nodes[hoveredId]?.type === 'wall'
+            ? hoveredId
+            : null;
+        const highlightKey = `${Array.from(highlightedWallIds).sort().join('|')}::${deleteHoveredWallId ?? ''}`;
         const distanceMoved = currentCameraPosition.distanceTo(lastCameraPosition.current);
         const directionChanged = tmpVec.distanceTo(lastCameraTarget.current);
         const timeSinceUpdate = currentTime - lastUpdateTime.current;
-        const shouldUpdate = ((distanceMoved > 0.5 || directionChanged > 0.3) && timeSinceUpdate > 0.1) ||
+        if (((distanceMoved > 0.5 || directionChanged > 0.3) && timeSinceUpdate > 0.1) ||
             lastWallMode.current !== wallMode ||
-            sceneRegistry.byType.wall.size !== lastNumberOfWalls.current;
-        const walls = sceneRegistry.byType.wall;
-        const currentWallIds = new Set();
-        walls.forEach((wallId) => {
-            const wallMesh = sceneRegistry.nodes.get(wallId);
-            if (!wallMesh)
-                return;
-            const wallNode = useScene.getState().nodes[wallId];
-            if (!wallNode || wallNode.type !== 'wall')
-                return;
-            currentWallIds.add(wallId);
-            const hideWall = getWallHideState(wallNode, wallMesh, wallMode, u);
-            if (shouldUpdate) {
-                const materials = getMaterialsForWall(wallNode);
-                wallMesh.material = hideWall ? materials.invisible : materials.visible;
-            }
-            else {
-                const currentMaterial = wallMesh.material;
-                const materials = wallMaterialCache.get(wallId);
-                if (!materials ||
-                    currentMaterial !== (hideWall ? materials.invisible : materials.visible)) {
-                    const newMaterials = getMaterialsForWall(wallNode);
-                    wallMesh.material = hideWall ? newMaterials.invisible : newMaterials.visible;
-                }
-            }
-        });
-        if (shouldUpdate) {
+            sceneRegistry.byType.wall.size !== lastNumberOfWalls.current ||
+            lastHighlightKey.current !== highlightKey) {
             lastCameraPosition.current.copy(currentCameraPosition);
             lastCameraTarget.current.copy(tmpVec);
             lastUpdateTime.current = currentTime;
             camera.getWorldDirection(u);
-            if (lastWallMode.current !== wallMode) {
-                wallMaterialCache.clear();
-            }
-            for (const [wallId, mats] of lastWallMaterials.current) {
-                if (!currentWallIds.has(wallId)) {
-                    mats.visible.dispose();
-                    mats.invisible.dispose();
-                    wallMaterialCache.delete(wallId);
+            const walls = sceneRegistry.byType.wall;
+            walls.forEach((wallId) => {
+                const wallMesh = sceneRegistry.nodes.get(wallId);
+                if (!wallMesh)
+                    return;
+                const wallNode = useScene.getState().nodes[wallId];
+                if (!wallNode || wallNode.type !== 'wall')
+                    return;
+                const hideWall = getWallHideState(wallNode, wallMesh, wallMode, u);
+                const isDeleteHighlighted = deleteHoveredWallId === wallId;
+                const isSelectionHighlighted = !isDeleteHighlighted && highlightedWallIds.has(wallId);
+                const materials = getMaterialsForWall(wallNode);
+                if (hideWall) {
+                    ;
+                    wallMesh.material = isDeleteHighlighted
+                        ? materials.deleteInvisible
+                        : isSelectionHighlighted
+                            ? materials.highlightedInvisible
+                            : materials.invisible;
                 }
-            }
-            lastWallMaterials.current.clear();
-            for (const [wallId, mats] of wallMaterialCache) {
-                lastWallMaterials.current.set(wallId, mats);
-            }
+                else {
+                    ;
+                    wallMesh.material = isDeleteHighlighted
+                        ? materials.deleteVisible
+                        : isSelectionHighlighted
+                            ? materials.highlightedVisible
+                            : wallNode.material
+                                ? materials.visible
+                                : baseMaterial;
+                }
+            });
             lastWallMode.current = wallMode;
             lastNumberOfWalls.current = sceneRegistry.byType.wall.size;
+            lastHighlightKey.current = highlightKey;
         }
     });
     return null;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pascal-app/viewer",
-  "version": "0.3.3",
+  "version": "0.5.0",
   "description": "3D viewer component for Pascal building editor",
   "type": "module",
   "main": "./dist/index.js",