@pascal-app/viewer 0.5.0 → 0.6.0

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.0",
+  "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.1.4",
+    "@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": [