Add Color Customization for JupyterCAD Models

packages/base/src/3dview/helpers.ts

@@ -114,12 +114,21 @@ export function buildShape(options: {
   selected: boolean;
   isSolid: boolean;
   guidata?: IDict;
+  objColor?: THREE.Color | string | number;
 }): {
   meshGroup: THREE.Group;
   mainMesh: THREE.Mesh<THREE.BufferGeometry, THREE.MeshPhongMaterial>;
   edgesMeshes: LineSegments2[];
 } | null {
-  const { objName, data, guidata, isSolid, clippingPlanes, selected } = options;
+  const {
+    objName,
+    data,
+    guidata,
+    isSolid,
+    clippingPlanes,
+    selected,
+    objColor
+  } = options;
   const { faceList, edgeList, jcObject } = data;
 
   const vertices: Array<number> = [];
@@ -148,14 +157,13 @@ export function buildShape(options: {
     vInd += vertexCoorLength / 3;
   }
 
-  let color = DEFAULT_MESH_COLOR;
+  let color = objColor || DEFAULT_MESH_COLOR;
   let visible = jcObject.visible;
   if (guidata && guidata[objName]) {
     const objdata = guidata[objName];
 
     if (Object.prototype.hasOwnProperty.call(objdata, 'color')) {
-      const rgba = objdata['color'] as number[];
-      color = new THREE.Color(rgba[0], rgba[1], rgba[2]);
+      color = new THREE.Color(color);
     }
 
     if (Object.prototype.hasOwnProperty.call(objdata, 'visibility')) {
@@ -168,7 +176,7 @@ export function buildShape(options: {
   // We need one material per-mesh because we will set the uniform color independently later
   // it's too bad Three.js does not easily allow setting uniforms independently per-mesh
   const material = new THREE.MeshPhongMaterial({
-    color,
+    color: new THREE.Color(color),
     wireframe: false,
     flatShading: false,
     clippingPlanes,

packages/base/src/3dview/mainview.tsx

@@ -590,6 +590,7 @@ export class MainView extends React.Component<IProps, IStates> {
     Object.entries(payload).forEach(([objName, data]) => {
       const selected = selectedNames.includes(objName);
       const obj = this._model.sharedModel.getObjectByName(objName);
+      const objColor = obj?.parameters?.Color;
 
       // TODO Have a more generic way to spot non-solid objects
       const isSolid = !(
@@ -602,7 +603,8 @@ export class MainView extends React.Component<IProps, IStates> {
         clippingPlanes: this._clippingPlanes,
         selected,
         isSolid,
-        guidata
+        guidata,
+        objColor
       });
 
       if (output) {
@@ -619,6 +621,14 @@ export class MainView extends React.Component<IProps, IStates> {
             this._selectedMeshes.push(el as any as BasicMesh);
             el.material.color = SELECTED_MESH_COLOR;
             el.material.linewidth = SELECTED_LINEWIDTH;
+            el.userData.originalColor = new THREE.Color(objColor);
+          } else {
+            // Apply objColor for non-selected meshes
+            if (objColor && el.material?.color) {
+              const newColor = new THREE.Color(objColor);
+              el.material.color = newColor;
+              el.userData.originalColor = newColor.clone();
+            }
           }
         });
         this._meshGroup?.add(meshGroup);
@@ -842,17 +852,12 @@ export class MainView extends React.Component<IProps, IStates> {
   private _updateSelected(selection: { [key: string]: ISelection }) {
     // Reset original color for old selection
     for (const selectedMesh of this._selectedMeshes) {
-      let originalColor = selectedMesh.name.startsWith('edge-')
-        ? DEFAULT_EDGE_COLOR
-        : DEFAULT_MESH_COLOR;
-      const guidata = this._model.sharedModel.getOption('guidata');
-      if (
-        guidata &&
-        guidata[selectedMesh.name] &&
-        guidata[selectedMesh.name]['color']
-      ) {
-        const rgba = guidata[selectedMesh.name]['color'] as number[];
-        originalColor = new THREE.Color(rgba[0], rgba[1], rgba[2]);
+      let originalColor = selectedMesh.userData.originalColor;
+
+      if (!originalColor) {
+        originalColor = selectedMesh.name.startsWith('edge-')
+          ? DEFAULT_EDGE_COLOR
+          : DEFAULT_MESH_COLOR;
       }
       if (selectedMesh.material?.color) {
         selectedMesh.material.color = originalColor;
@@ -875,6 +880,12 @@ export class MainView extends React.Component<IProps, IStates> {
         continue;
       }
 
+      // Prevents object from going back to DEFAULT_MESH_COLOR
+      if (!selectedMesh.userData.originalColor) {
+        selectedMesh.userData.originalColor =
+          selectedMesh.material.color.clone();
+      }
+
       this._selectedMeshes.push(selectedMesh);
       if (selectedMesh?.material?.color) {
         selectedMesh.material.color = SELECTED_MESH_COLOR;
@@ -1041,6 +1052,7 @@ export class MainView extends React.Component<IProps, IStates> {
         const obj = this._meshGroup?.getObjectByName(objName) as
           | BasicMesh
           | undefined;
+        const objColor = obj?.material.color;
         if (!obj) {
           continue;
         }
@@ -1064,7 +1076,7 @@ export class MainView extends React.Component<IProps, IStates> {
             const color = new THREE.Color(rgba[0], rgba[1], rgba[2]);
             obj.material.color = color;
           } else {
-            obj.material.color = DEFAULT_MESH_COLOR;
+            obj.material.color = objColor || DEFAULT_MESH_COLOR;
           }
         }
       }

packages/base/src/commands.ts

@@ -37,6 +37,7 @@ import {
   wireframeIcon
 } from './tools';
 import keybindings from './keybindings.json';
+import { DEFAULT_MESH_COLOR } from './3dview/helpers';
 import { JupyterCadPanel, JupyterCadWidget } from './widget';
 import { DocumentRegistry } from '@jupyterlab/docregistry';
 import { PathExt } from '@jupyterlab/coreutils';
@@ -257,11 +258,14 @@ const OPERATORS = {
       const selected = model.localState?.selected.value || {};
       const sel0 = getSelectedMeshName(selected, 0);
       const sel1 = getSelectedMeshName(selected, 1);
+      const baseName = sel0 || objects[0].name || '';
+      const baseModel = model.sharedModel.getObjectByName(baseName);
       return {
         Name: newName('Cut', model),
-        Base: sel0 || objects[0].name || '',
+        Base: baseName,
         Tool: sel1 || objects[1].name || '',
         Refine: false,
+        Color: baseModel?.parameters?.Color || DEFAULT_MESH_COLOR,
         Placement: { Position: [0, 0, 0], Axis: [0, 0, 1], Angle: 0 }
       };
     },
@@ -297,13 +301,16 @@ const OPERATORS = {
       const objects = model.getAllObject();
       const selected = model.localState?.selected.value || {};
       const sel0 = getSelectedMeshName(selected, 0);
+      const baseName = sel0 || objects[0].name || '';
+      const baseModel = model.sharedModel.getObjectByName(baseName);
       return {
         Name: newName('Extrusion', model),
-        Base: sel0 || objects[0].name || '',
+        Base: baseName,
         Dir: [0, 0, 1],
         LengthFwd: 10,
         LengthRev: 0,
         Solid: false,
+        Color: baseModel?.parameters?.Color || DEFAULT_MESH_COLOR,
         Placement: { Position: [0, 0, 0], Axis: [0, 0, 1], Angle: 0 }
       };
     },
@@ -339,10 +346,13 @@ const OPERATORS = {
       const selected = model.localState?.selected.value || {};
       const sel0 = getSelectedMeshName(selected, 0);
       const sel1 = getSelectedMeshName(selected, 1);
+      const baseName = sel0 || objects[0].name || '';
+      const baseModel = model.sharedModel.getObjectByName(baseName);
       return {
         Name: newName('Union', model),
-        Shapes: [sel0 || objects[0].name || '', sel1 || objects[1].name || ''],
+        Shapes: [baseName, sel1 || objects[1].name || ''],
         Refine: false,
+        Color: baseModel?.parameters?.Color || DEFAULT_MESH_COLOR,
         Placement: { Position: [0, 0, 0], Axis: [0, 0, 1], Angle: 0 }
       };
     },
@@ -380,10 +390,13 @@ const OPERATORS = {
       const selected = model.localState?.selected.value || {};
       const sel0 = getSelectedMeshName(selected, 0);
       const sel1 = getSelectedMeshName(selected, 1);
+      const baseName = sel0 || objects[0].name || '';
+      const baseModel = model.sharedModel.getObjectByName(baseName);
       return {
         Name: newName('Intersection', model),
-        Shapes: [sel0 || objects[0].name || '', sel1 || objects[1].name || ''],
+        Shapes: [baseName, sel1 || objects[1].name || ''],
         Refine: false,
+        Color: baseModel?.parameters?.Color || DEFAULT_MESH_COLOR,
         Placement: { Position: [0, 0, 0], Axis: [0, 0, 1], Angle: 0 }
       };
     },
@@ -419,11 +432,14 @@ const OPERATORS = {
     default: (model: IJupyterCadModel) => {
       const objects = model.getAllObject();
       const selectedEdge = getSelectedEdge(model.localState?.selected.value);
+      const baseName = selectedEdge?.shape || objects[0].name || '';
+      const baseModel = model.sharedModel.getObjectByName(baseName);
       return {
         Name: newName('Chamfer', model),
-        Base: selectedEdge?.shape || objects[0].name || '',
+        Base: baseName,
         Edge: selectedEdge?.edgeIndex || 0,
         Dist: 0.2,
+        Color: baseModel?.parameters?.Color || DEFAULT_MESH_COLOR,
         Placement: { Position: [0, 0, 0], Axis: [0, 0, 1], Angle: 0 }
       };
     },
@@ -457,11 +473,14 @@ const OPERATORS = {
     default: (model: IJupyterCadModel) => {
       const objects = model.getAllObject();
       const selectedEdge = getSelectedEdge(model.localState?.selected.value);
+      const baseName = selectedEdge?.shape || objects[0].name || '';
+      const baseModel = model.sharedModel.getObjectByName(baseName);
       return {
         Name: newName('Fillet', model),
-        Base: selectedEdge?.shape || objects[0].name || '',
+        Base: baseName,
         Edge: selectedEdge?.edgeIndex || 0,
         Radius: 0.2,
+        Color: baseModel?.parameters?.Color || DEFAULT_MESH_COLOR,
         Placement: { Position: [0, 0, 0], Axis: [0, 0, 1], Angle: 0 }
       };
     },

packages/base/src/panelview/formbuilder.tsx

@@ -121,6 +121,9 @@ export class ObjectPropertiesForm extends React.Component<IProps, IStates> {
         uiSchema[k] = {};
         this.removeArrayButton(v, uiSchema[k]);
       }
+      uiSchema['Color'] = {
+        'ui:widget': 'color'
+      };
     });
   }
 

packages/schema/src/schema/any.json

@@ -13,6 +13,11 @@
       "type": "string",
       "enum": ["brep", "step", "stl"]
     },
+    "Color": {
+      "type": "string",
+      "description": "The color of the object",
+      "default": "#808080"
+    },
     "Placement": {
       "$ref": "./placement.json"
     }

packages/schema/src/schema/box.json

@@ -20,6 +20,11 @@
       "exclusiveMinimum": 0,
       "description": "The height of the box"
     },
+    "Color": {
+      "type": "string",
+      "description": "The color of the box",
+      "default": "#808080"
+    },
     "Placement": {
       "$ref": "./placement.json"
     }

packages/schema/src/schema/chamfer.json

@@ -19,6 +19,11 @@
       "minimum": 0,
       "description": "The distance of the symmetric chamfer"
     },
+    "Color": {
+      "type": "string",
+      "description": "The color of the chamfer",
+      "default": "#808080"
+    },
     "Placement": {
       "$ref": "./placement.json"
     }

packages/schema/src/schema/cone.json

@@ -25,6 +25,11 @@
       "exclusiveMinimum": 0,
       "description": "The angle of the cone"
     },
+    "Color": {
+      "type": "string",
+      "description": "The color of the cone",
+      "default": "#808080"
+    },
     "Placement": {
       "$ref": "./placement.json"
     }

packages/schema/src/schema/cut.json

@@ -19,6 +19,11 @@
       "type": "boolean",
       "description": "Refine shape"
     },
+    "Color": {
+      "type": "string",
+      "description": "The color of the cut object",
+      "default": "#808080"
+    },
     "Placement": {
       "$ref": "./placement.json"
     }

packages/schema/src/schema/cylinder.json

@@ -20,6 +20,11 @@
       "exclusiveMinimum": 0,
       "description": "Angle of the cylinder"
     },
+    "Color": {
+      "type": "string",
+      "description": "The color of the cylinder",
+      "default": "#808080"
+    },
     "Placement": {
       "$ref": "./placement.json"
     }

packages/schema/src/schema/extrusion.json

@@ -29,6 +29,11 @@
       "type": "boolean",
       "description": "If true, creating a solid"
     },
+    "Color": {
+      "type": "string",
+      "description": "The color of the extrusion",
+      "default": "#808080"
+    },
     "Placement": {
       "$ref": "./placement.json"
     }

packages/schema/src/schema/fillet.json

@@ -19,6 +19,11 @@
       "exclusiveMinimum": 0,
       "description": "The radius for the fillet"
     },
+    "Color": {
+      "type": "string",
+      "description": "The color of the fillet",
+      "default": "#808080"
+    },
     "Placement": {
       "$ref": "./placement.json"
     }

packages/schema/src/schema/fuse.json

@@ -17,6 +17,11 @@
       "type": "boolean",
       "description": "Refine shape"
     },
+    "Color": {
+      "type": "string",
+      "description": "The color of the fused object",
+      "default": "#808080"
+    },
     "Placement": {
       "$ref": "./placement.json"
     }

packages/schema/src/schema/intersection.json

@@ -17,6 +17,11 @@
       "type": "boolean",
       "description": "Refine shape"
     },
+    "Color": {
+      "type": "string",
+      "description": "The color of the intersection",
+      "default": "#808080"
+    },
     "Placement": {
       "$ref": "./placement.json"
     }

packages/schema/src/schema/sketch.json

@@ -23,6 +23,11 @@
         ]
       }
     },
+    "Color": {
+      "type": "string",
+      "description": "The color of the sketch object",
+      "default": "#808080"
+    },
     "Placement": {
       "$ref": "./placement.json"
     }

packages/schema/src/schema/sphere.json

@@ -22,6 +22,11 @@
       "type": "number",
       "description": "The angle of the sphere"
     },
+    "Color": {
+      "type": "string",
+      "description": "The color of the sphere",
+      "default": "#808080"
+    },
     "Placement": {
       "$ref": "./placement.json"
     }