@pascal-app/viewer 0.5.1 → 0.6.0

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

@@ -1,129 +1,12 @@
-import { baseMaterial, emitter, sceneRegistry, useScene, } from '@pascal-app/core';
+import { emitter, sceneRegistry, useScene } from '@pascal-app/core';
 import { useFrame } from '@react-three/fiber';
 import { useEffect, 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 { Vector3 } from 'three/webgpu';
 import useViewer from '../../store/use-viewer';
+import { getMaterialsForWall } from './wall-materials';
 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);
-    const uv = vec2(positionLocal.x, positionLocal.y).div(scale);
-    const gridUV = fract(uv);
-    const dist = length(gridUV.sub(0.5));
-    const dots = step(dist, dotSize.mul(0.5));
-    const fadeHeight = float(2.5);
-    const yFade = float(1).sub(smoothstep(float(0), fadeHeight, positionLocal.y));
-    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';
-    const mat = wallNode.material;
-    if (mat.preset && mat.preset !== 'custom') {
-        return `preset-${mat.preset}`;
-    }
-    if (mat.properties) {
-        return `props-${mat.properties.color}-${mat.properties.roughness}-${mat.properties.metalness}`;
-    }
-    return 'default';
-}
-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);
-    const existing = wallMaterialCache.get(cacheKey);
-    if (existing && existing.materialHash === materialHash) {
-        return existing;
-    }
-    if (existing) {
-        existing.visible.dispose();
-        existing.invisible.dispose();
-        existing.deleteVisible.dispose();
-        existing.deleteInvisible.dispose();
-        existing.highlightedVisible.dispose();
-        existing.highlightedInvisible.dispose();
-    }
-    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 = 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()),
-        color: userColor,
-        depthWrite: false,
-        emissive: userColor,
-    });
-    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;
-}
 function getWallHideState(wallNode, wallMesh, wallMode, cameraDir) {
     let hideWall = wallNode.frontSide === 'interior' && wallNode.backSide === 'interior';
     if (wallMode === 'up') {
@@ -206,9 +89,7 @@ export const WallCutout = () => {
                         ? materials.deleteVisible
                         : isSelectionHighlighted
                             ? materials.highlightedVisible
-                            : wallNode.material
-                                ? materials.visible
-                                : baseMaterial;
+                            : materials.visible;
                 }
             });
             lastWallMode.current = wallMode;

package/dist/systems/wall/wall-materials.d.ts

@@ -0,0 +1,16 @@
+import { type WallNode } from '@pascal-app/core';
+import { type Material } from 'three';
+export type WallMaterialArray = [Material, Material, Material];
+export interface WallMaterials {
+    visible: WallMaterialArray;
+    invisible: WallMaterialArray;
+    deleteVisible: WallMaterialArray;
+    deleteInvisible: WallMaterialArray;
+    highlightedVisible: WallMaterialArray;
+    highlightedInvisible: WallMaterialArray;
+    materialHash: string;
+}
+export declare function getWallMaterialHash(wallNode: WallNode): string;
+export declare function getMaterialsForWall(wallNode: WallNode): WallMaterials;
+export declare function getVisibleWallMaterials(wallNode: WallNode): WallMaterialArray;
+//# sourceMappingURL=wall-materials.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"wall-materials.d.ts","sourceRoot":"","sources":["../../../src/systems/wall/wall-materials.ts"],"names":[],"mappings":"AAAA,OAAO,EAML,KAAK,QAAQ,EAEd,MAAM,kBAAkB,CAAA;AACzB,OAAO,EAAS,KAAK,QAAQ,EAAE,MAAM,OAAO,CAAA;AAwB5C,MAAM,MAAM,iBAAiB,GAAG,CAAC,QAAQ,EAAE,QAAQ,EAAE,QAAQ,CAAC,CAAA;AAE9D,MAAM,WAAW,aAAa;IAC5B,OAAO,EAAE,iBAAiB,CAAA;IAC1B,SAAS,EAAE,iBAAiB,CAAA;IAC5B,aAAa,EAAE,iBAAiB,CAAA;IAChC,eAAe,EAAE,iBAAiB,CAAA;IAClC,kBAAkB,EAAE,iBAAiB,CAAA;IACrC,oBAAoB,EAAE,iBAAiB,CAAA;IACvC,YAAY,EAAE,MAAM,CAAA;CACrB;AA4GD,wBAAgB,mBAAmB,CAAC,QAAQ,EAAE,QAAQ,GAAG,MAAM,CAS9D;AAED,wBAAgB,mBAAmB,CAAC,QAAQ,EAAE,QAAQ,GAAG,aAAa,CA2DrE;AAED,wBAAgB,uBAAuB,CAAC,QAAQ,EAAE,QAAQ,GAAG,iBAAiB,CAE7E"}

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

@@ -0,0 +1,148 @@
+import { baseMaterial, getEffectiveWallSurfaceMaterial, getMaterialPresetByRef, getWallSurfaceMaterialSignature, resolveMaterial, } from '@pascal-app/core';
+import { Color } from 'three';
+import { Fn, float, fract, length, mix, positionLocal, smoothstep, step, vec2 } from 'three/tsl';
+import { MeshStandardNodeMaterial } from 'three/webgpu';
+import { createMaterial, createMaterialFromPresetRef } from '../../lib/materials';
+const DEFAULT_WALL_COLOR = '#f2f0ed';
+const WALL_HIGHLIGHT_PROFILES = {
+    delete: {
+        color: new Color('#dc2626'),
+        blend: 0.76,
+        emissiveBlend: 0.92,
+        emissiveIntensity: 0.46,
+    },
+    selection: {
+        color: new Color('#818cf8'),
+        blend: 0.32,
+        emissiveBlend: 0.7,
+        emissiveIntensity: 0.42,
+    },
+};
+const wallMaterialCache = new Map();
+const dotPattern = Fn(() => {
+    const scale = float(0.1);
+    const dotSize = float(0.3);
+    const uv = vec2(positionLocal.x, positionLocal.y).div(scale);
+    const gridUV = fract(uv);
+    const dist = length(gridUV.sub(0.5));
+    const dots = step(dist, dotSize.mul(0.5));
+    const fadeHeight = float(2.5);
+    const yFade = float(1).sub(smoothstep(float(0), fadeHeight, positionLocal.y));
+    return dots.mul(yFade);
+});
+function getSurfaceVisibleMaterial(spec) {
+    if (spec.materialPreset) {
+        return createMaterialFromPresetRef(spec.materialPreset) ?? baseMaterial;
+    }
+    if (spec.material) {
+        return createMaterial(spec.material);
+    }
+    return baseMaterial;
+}
+function getSurfaceColor(spec, fallback = DEFAULT_WALL_COLOR) {
+    const preset = getMaterialPresetByRef(spec.materialPreset);
+    if (preset?.mapProperties?.color) {
+        return preset.mapProperties.color;
+    }
+    if (spec.material) {
+        return resolveMaterial(spec.material).color;
+    }
+    return fallback;
+}
+function getHighlightedColor(color, kind) {
+    const profile = WALL_HIGHLIGHT_PROFILES[kind];
+    return color.clone().lerp(profile.color, profile.blend);
+}
+function createHighlightedWallMaterial(material, kind) {
+    const highlightedMaterial = material.clone();
+    const profile = WALL_HIGHLIGHT_PROFILES[kind];
+    if ('color' in highlightedMaterial && highlightedMaterial.color) {
+        highlightedMaterial.color = getHighlightedColor(highlightedMaterial.color, kind);
+    }
+    if ('emissive' in highlightedMaterial && highlightedMaterial.emissive) {
+        highlightedMaterial.emissive = highlightedMaterial.emissive
+            .clone()
+            .lerp(profile.color, profile.emissiveBlend);
+    }
+    if ('emissiveIntensity' in highlightedMaterial) {
+        highlightedMaterial.emissiveIntensity = Math.max(highlightedMaterial.emissiveIntensity ?? 0, profile.emissiveIntensity);
+    }
+    highlightedMaterial.needsUpdate = true;
+    return highlightedMaterial;
+}
+function createInvisibleWallMaterial(color) {
+    return new MeshStandardNodeMaterial({
+        transparent: true,
+        opacityNode: mix(float(0.0), float(0.24), dotPattern()),
+        color,
+        depthWrite: false,
+        emissive: color,
+    });
+}
+function mapWallMaterialArray(materials, iteratee) {
+    return materials.map(iteratee);
+}
+function disposeOwnedMaterials(materials) {
+    const owned = new Set();
+    materials.forEach((entry) => {
+        entry.forEach((material) => {
+            owned.add(material);
+        });
+    });
+    owned.forEach((material) => {
+        material.dispose();
+    });
+}
+export function getWallMaterialHash(wallNode) {
+    return JSON.stringify({
+        interior: getWallSurfaceMaterialSignature(getEffectiveWallSurfaceMaterial(wallNode, 'interior')),
+        exterior: getWallSurfaceMaterialSignature(getEffectiveWallSurfaceMaterial(wallNode, 'exterior')),
+    });
+}
+export function getMaterialsForWall(wallNode) {
+    const cacheKey = wallNode.id;
+    const materialHash = getWallMaterialHash(wallNode);
+    const existing = wallMaterialCache.get(cacheKey);
+    if (existing && existing.materialHash === materialHash) {
+        return existing;
+    }
+    if (existing) {
+        disposeOwnedMaterials([
+            existing.invisible,
+            existing.deleteVisible,
+            existing.deleteInvisible,
+            existing.highlightedVisible,
+            existing.highlightedInvisible,
+        ]);
+    }
+    const interiorSpec = getEffectiveWallSurfaceMaterial(wallNode, 'interior');
+    const exteriorSpec = getEffectiveWallSurfaceMaterial(wallNode, 'exterior');
+    const visible = [
+        baseMaterial,
+        getSurfaceVisibleMaterial(interiorSpec),
+        getSurfaceVisibleMaterial(exteriorSpec),
+    ];
+    const invisible = [
+        createInvisibleWallMaterial(DEFAULT_WALL_COLOR),
+        createInvisibleWallMaterial(getSurfaceColor(interiorSpec, DEFAULT_WALL_COLOR)),
+        createInvisibleWallMaterial(getSurfaceColor(exteriorSpec, DEFAULT_WALL_COLOR)),
+    ];
+    const highlightedVisible = mapWallMaterialArray(visible, (material) => createHighlightedWallMaterial(material, 'selection'));
+    const highlightedInvisible = mapWallMaterialArray(invisible, (material) => createHighlightedWallMaterial(material, 'selection'));
+    const deleteVisible = mapWallMaterialArray(visible, (material) => createHighlightedWallMaterial(material, 'delete'));
+    const deleteInvisible = mapWallMaterialArray(invisible, (material) => createHighlightedWallMaterial(material, 'delete'));
+    const result = {
+        visible,
+        invisible,
+        deleteVisible,
+        deleteInvisible,
+        highlightedVisible,
+        highlightedInvisible,
+        materialHash,
+    };
+    wallMaterialCache.set(cacheKey, result);
+    return result;
+}
+export function getVisibleWallMaterials(wallNode) {
+    return getMaterialsForWall(wallNode).visible;
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pascal-app/viewer",
-  "version": "0.5.1",
+  "version": "0.6.0",
   "description": "3D viewer component for Pascal building editor",
   "type": "module",
   "main": "./dist/index.js",
@@ -22,11 +22,11 @@
     "prepublishOnly": "npm run build"
   },
   "peerDependencies": {
-    "@pascal-app/core": "^0.5.1",
+    "@pascal-app/core": "^0.6.0",
     "@react-three/drei": "^10",
     "@react-three/fiber": "^9",
     "react": "^18 || ^19",
-    "three": "^0.183"
+    "three": "^0.184"
   },
   "dependencies": {
     "polygon-clipping": "^0.15.7",
@@ -36,7 +36,7 @@
     "@pascal/typescript-config": "*",
     "@types/node": "^25.5.0",
     "@types/react": "^19.2.2",
-    "@types/three": "^0.183.0",
+    "@types/three": "^0.184.0",
     "typescript": "5.9.3"
   },
   "keywords": [