@team-geospan/struct3d 1.0.5 → 1.0.7

package/MR_TEMPLATE.md

@@ -0,0 +1,81 @@
+# Merge Request: Add Color Theme Support to 3D Viewer
+
+### Type of Change
+
+Indicate the type of change this MR introduces:
+
+- [x] New Feature
+- [ ] Bug Fix
+- [ ] Documentation Update
+- [ ] Refactoring
+- [ ] Hotfix
+- [ ] Security Patch
+- [ ] UI/UX Improvement
+
+### Description 
+
+* **Summary**: Added color theme support to the StructureThreeD component, allowing users to toggle between different visual themes (default and gray) with dynamic sky and ground color changes.
+
+* **JIRA Ticket**: N/A
+
+**Details**: Explain the changes in more detail, including:
+
+* **Why these changes were necessary**: The 3D viewer needed visual theme options to improve user experience and provide different viewing modes for various use cases.
+
+* **The approach taken to implement them**: 
+  - Added a `COLOR_THEMES` object with predefined theme configurations
+  - Extended the `StructureThreeD` component to accept a `colorTheme` prop
+  - Updated the `createReferences` function to accept a `groundColor` parameter
+  - Implemented dynamic color application based on the selected theme
+
+* **Links to any related issues or tickets**: N/A
+
+### Testing 
+
+* **Environment**: Local development environment with eitri 3D viewer integration
+* **Steps**: 
+  1. Load a 3D model in the StructureThreeD component
+  2. Toggle between "default" and "gray" themes using the theme selector
+  3. Verify sky color changes from blue to gray
+  4. Verify ground color changes from green to gray
+  5. Confirm no visual regressions in model rendering
+* **Automated Tests**: No new automated tests added (existing functionality preserved)
+
+### Impact
+
+* **Performance**: Minimal impact - only adds theme selection logic and color calculations during render
+* **Dependencies**: No new dependencies added
+* **Risks**: 
+  - None - this is a purely additive change with no breaking changes
+
+### Rollback Plan
+
+* **Steps to rollback**:
+  1. Remove `colorTheme` prop from `StructureThreeD` component
+  2. Remove `COLOR_THEMES` object and related theme logic
+  3. Revert `createReferences` function signature to original: `createReferences(scene)`
+  4. Revert ground color to hardcoded `0xf8f9fa`
+* **Preconditions**: None - this is a safe rollback
+* **Impacts**: Any projects using the new theme functionality will lose theme support
+
+### Checklist
+
+Ensure the following before requesting a review:
+
+- [x] Code comments have been added, particularly for complex logic or significant changes.
+- [ ] Documentation has been updated to reflect the changes.
+- [ ] Unit and integration tests have been added or updated.
+- [x] All tests are passing.
+- [x] No new warnings are generated by the linter.
+- [x] The GitLab pipeline passes without errors.
+- [ ] A teammate has been assigned as a reviewer, and any high-priority MRs have been shared with #development for quicker review.
+
+### CHANGELOG
+
+If this MR contains changes that should be highlighted in the changelog or release notes, please provide a draft here.
+
+* 1.0.5
+  * Add color theme support to 3D viewer
+  * Add `colorTheme` prop to `StructureThreeD` component
+  * Add `COLOR_THEMES` object with default and gray themes
+  * Update `createReferences` function to accept `groundColor` parameter

package/docs/src/pages/demo.jsx

@@ -40,15 +40,18 @@ function SelectedInfo({ structureCollection, selectedId }) {
   const [structureIndex, elementId] = selectedId.split("-");
   const structure = structureCollection.structures[parseInt(structureIndex)];
 
-  let unitLabel = "sq. m.";
+  let unitLabel = "";
   let value = 0.0;
   if (structure.edges[elementId]) {
     // use as edge
     unitLabel = "m.";
     value = structure.edges[elementId].properties.length;
-  } else {
-    // assume a surface
+  } else if (structure.surfaces[elementId]) {
+    // use as surface
+    unitLabel = "sq. m.";
     value = structure.surfaces[elementId].properties.area;
+  } else if (structure.points[elementId]) {
+    value = structure.points[elementId].label;
   }
 
   return (

package/lib/defaults.js

@@ -19,6 +19,7 @@ export const DEFAULT_EDGE_COLORS = {
   parapet: "#6e468d",
   fance: "#a97bc2",
   chimney: "#5b517d",
+  gutter: "#087502",
 };
 
 export const DEFAULT_SCENE_THEME = {

package/lib/draw.js

@@ -77,6 +77,10 @@ export function createLines(
     const { edges, points } = structure;
     return Object.keys(edges).map((edgeId) => {
       const edge = edges[edgeId];
+      const effectiveKind = edge.properties?.attachments?.includes("gutter")
+        ? "gutter"
+        : edge.kind;
+
       // offset and swap coordinates
       const linePoints = edge.points.map((pointId) => {
         const pt = points[pointId].coordinates;
@@ -87,15 +91,15 @@ export function createLines(
       geometry.setPositions(linePoints.flatMap((p) => p));
 
       const material = new LineMaterial({
-        color: edgeColors[edge.kind] || "#000000",
-        linewidth: edge.kind ? 3 : 1,
+        color: edgeColors[effectiveKind] || "#000000",
+        linewidth: effectiveKind ? 3 : 1,
       });
       material.resolution.set(width, height);
 
       const line = new Line2(geometry, material);
       line.userData = {
         ...edge.properties,
-        kind: edge.kind,
+        kind: effectiveKind,
         id: `${stIdx}-${edgeId}`,
         layer: "edges",
       };
@@ -214,6 +218,42 @@ export function createReferences(scene, groundColor = 0x315d0a) {
   scene.add(gridHelper);
 }
 
+export function createAccessories(structureCollection, baseElevation) {
+  const [x0, y0, minz] = getAnchor(structureCollection);
+  const points = structureCollection.structures[0].points;
+  const pois = structureCollection.structures.flatMap((structure, stIdx) => {
+    return Object.keys(structure.surfaces).flatMap((surfaceId) => {
+      const surface = structure.surfaces[surfaceId];
+      const poiIDs = surface.properties?.accessories || [];
+
+      return poiIDs.map((poiID) => {
+        const pinGeom = new THREE.SphereGeometry(0.3, 32, 32);
+        const poiColor = points[poiID].color;
+        const poiLabel = points[poiID].label;
+        const material = new THREE.MeshBasicMaterial({
+          color: poiColor,
+        });
+        const pin = new THREE.Mesh(pinGeom, material);
+        const point = points[poiID].coordinates;
+        const coords = [
+          point[0] - x0,
+          point[2] - minz + baseElevation,
+          y0 - point[1],
+        ];
+        pin.position.fromArray(coords);
+        pin.userData = {
+          id: `${stIdx}-${poiID}`,
+          layer: "accessories",
+          label: poiLabel,
+          color: poiColor,
+        };
+        return pin;
+      });
+    });
+  });
+  return pois;
+}
+
 export function addLights(scene, center, bounds) {
   const intensity = 5000;
   const ambient = new THREE.AmbientLight(0xffffff);

package/lib/index.js

@@ -28,6 +28,7 @@ import {
   clearScene,
   createFacets,
   createLines,
+  createAccessories,
   createReferences,
 } from "./draw";
 
@@ -124,6 +125,11 @@ const renderModel = (
     scene.add(line);
   });
 
+  const pois = createAccessories(collection, baseElevation);
+  pois.forEach((poi) => {
+    scene.add(poi);
+  });
+
   const center = new THREE.Vector3();
   boundingBox.getCenter(center);
 
@@ -251,12 +257,12 @@ export default function StructureThreeD({
         true,
       );
       const ids = intersects
-        .map((f) => f.object.userData)
-        .map((f) => f.id)
+        .map((f) => f.object.userData.id)
         // ensure the object has an ID
         .filter((id) => !!id);
       if (onClick) {
-        onClick(ids);
+        // only return the closest intersected object
+        onClick(ids.slice(0, 1));
       }
     },
     [onClick],
@@ -267,10 +273,18 @@ export default function StructureThreeD({
       sceneRef.current.traverse((object) => {
         // ensure the object has a material set and the userData has our layer specified
         if (object.material && Boolean(object.userData?.layer)) {
-          let color =
-            object.userData.layer === "facets"
-              ? facetColors[object.userData?.material || "asphalt"]
-              : edgeColors[object.userData.kind] || "#00000000";
+          let color = null;
+          switch (object.userData.layer) {
+            case "accessories":
+              color = object.userData?.color || "#FFF";
+              break;
+            case "facets":
+              color = facetColors[object.userData?.material || "asphalt"];
+              break;
+            case "edges":
+              color = edgeColors[object.userData.kind] || "#00000000";
+              break;
+          }
           if (selectedIds.includes(object.userData?.id)) {
             color = selectionColor;
           }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@team-geospan/struct3d",
-  "version": "1.0.5",
+  "version": "1.0.7",
   "description": "The 3D Viewer component for StructuresJSON models.",
   "license": "Apache-2.0",
   "author": "GEOSPAN Corp and Contributors",
@@ -37,6 +37,7 @@
     }
   },
   "dependencies": {
+    "@team-geospan/structuresio": "^0.0.7",
     "@turf/projection": "^6.5.0",
     "earcut": "^3.0.1",
     "react-resize-detector": "^12.0.2",