three-cad-viewer 2.1.2 → 2.2.0

package/src/nestedgroup.js

@@ -97,14 +97,16 @@ class NestedGroup {
       1.0,
       color == null ? this.edgeColor : color,
       geomtype,
-      "edges"
+      "edges",
     );
 
     var edges = this._renderEdges(
-      (edgeList.edges)
+      edgeList.edges
         ? edgeList.edges // protocol version 2
-        : edgeList,  // protocol version 1
-      lineWidth, color, state
+        : edgeList, // protocol version 1
+      lineWidth,
+      color,
+      state,
     );
     if (name) {
       edges.name = name;
@@ -124,20 +126,24 @@ class NestedGroup {
       1.0,
       color == null ? this.edgeColor : color,
       geomtype,
-      "vertices"
+      "vertices",
     );
 
     const vertex_color = color == null ? this.edgeColor : color;
 
     let positions;
-    if (vertexList.obj_vertices) { // protocol version 2
-      positions = vertexList.obj_vertices instanceof Float32Array
-        ? vertexList.obj_vertices
-        : new Float32Array(vertexList.obj_vertices);
-    } else {  // protocol version 1
-      positions = vertexList instanceof Float32Array
-        ? vertexList.flat()
-        : new Float32Array(vertexList.flat());
+    if (vertexList.obj_vertices) {
+      // protocol version 2
+      positions =
+        vertexList.obj_vertices instanceof Float32Array
+          ? vertexList.obj_vertices
+          : new Float32Array(vertexList.obj_vertices);
+    } else {
+      // protocol version 1
+      positions =
+        vertexList instanceof Float32Array
+          ? vertexList.flat()
+          : new Float32Array(vertexList.flat());
     }
     const geometry = new THREE.BufferGeometry();
     geometry.setAttribute(
@@ -167,7 +173,20 @@ class NestedGroup {
     return group;
   }
 
-  renderShape(shape, color, alpha, renderback, path, name, states, geomtype = null, subtype = null) {
+  renderShape(
+    shape,
+    color,
+    alpha,
+    renderback,
+    path,
+    name,
+    states,
+    geomtype = null,
+    subtype = null,
+    texture_data = null,
+    texture_width = null,
+    texture_height = null,
+  ) {
     const positions =
       shape.vertices instanceof Float32Array
         ? shape.vertices
@@ -199,38 +218,74 @@ class NestedGroup {
     } else if (alpha < 1.0) {
       this.transparent = true;
     }
-    var shapeGeometry = new THREE.BufferGeometry();
-    shapeGeometry.setAttribute(
-      "position",
-      new THREE.BufferAttribute(positions, 3),
-    );
-    shapeGeometry.setAttribute("normal", new THREE.BufferAttribute(normals, 3));
-    shapeGeometry.setIndex(new THREE.BufferAttribute(triangles, 1));
-
-    // see https://stackoverflow.com/a/37651610
-    // "A common draw configuration you see is to draw all the opaque object with depth testing on,
-    //  turn depth write off, then draw the transparent objects in a back to front order."
-    const frontMaterial = new THREE.MeshStandardMaterial({
-      color: color,
-      metalness: this.metalness,
-      roughness: this.roughness,
-      // envMap: texture,
-      polygonOffset: true,
-      polygonOffsetFactor: 1.0,
-      polygonOffsetUnits: 1.0,
-      transparent: true,
-      opacity: this.transparent ? this.defaultOpacity * alpha : alpha,
-      // turn depth write off for transparent objects
-      depthWrite: !this.transparent,
-      // but keep depth test
-      depthTest: true,
-      clipIntersection: false,
-      side: THREE.FrontSide,
-      visible: states[0] == 1,
-    });
+
+    var shapeGeometry;
+    var texture = null;
+    var frontMaterial = null;
+
+    if (texture_data != null) {
+      const url = `data:image/${texture_data.format};base64,${texture_data.data}`;
+      var img = new Image();
+      img.setAttribute("src", url);
+      shapeGeometry = new THREE.PlaneGeometry(texture_width, texture_height);
+
+      texture = new THREE.Texture(img);
+      texture.needsUpdate = true;
+      texture.colorSpace = THREE.SRGBColorSpace;
+
+      frontMaterial = new THREE.MeshBasicMaterial({
+        color: "#ffffff",
+        map: texture,
+        side: THREE.DoubleSide,
+      });
+      renderback = false;
+    } else {
+      shapeGeometry = new THREE.BufferGeometry();
+      shapeGeometry.setAttribute(
+        "position",
+        new THREE.BufferAttribute(positions, 3),
+      );
+      shapeGeometry.setAttribute(
+        "normal",
+        new THREE.BufferAttribute(normals, 3),
+      );
+      shapeGeometry.setIndex(new THREE.BufferAttribute(triangles, 1));
+      group.shapeGeometry = shapeGeometry;
+
+      // see https://stackoverflow.com/a/37651610
+      // "A common draw configuration you see is to draw all the opaque object with depth testing on,
+      //  turn depth write off, then draw the transparent objects in a back to front order."
+      frontMaterial = new THREE.MeshStandardMaterial({
+        color: color,
+        metalness: this.metalness,
+        roughness: this.roughness,
+        // envMap: texture,
+        polygonOffset: true,
+        polygonOffsetFactor: 1.0,
+        polygonOffsetUnits: 1.0,
+        transparent: true,
+        opacity: this.transparent ? this.defaultOpacity * alpha : alpha,
+        // turn depth write off for transparent objects
+        depthWrite: !this.transparent,
+        // but keep depth test
+        depthTest: true,
+        clipIntersection: false,
+        side: THREE.FrontSide,
+        visible: states[0] == 1,
+        map: texture,
+        name:"frontMaterial"
+      });
+    }
+
+    const backColor =
+      group.subtype === "solid"
+        ? color
+        : new THREE.Color(
+            Math.round(Math.min(0xffffff, this.edgeColor * 1.25)),
+          );
 
     const backMaterial = new THREE.MeshBasicMaterial({
-      color: new THREE.Color(this.edgeColor),
+      color: backColor,
       side: THREE.BackSide,
       polygonOffset: true,
       polygonOffsetFactor: 1.0,
@@ -243,14 +298,15 @@ class NestedGroup {
       depthTest: true,
       clipIntersection: false,
       visible: states[0] == 1 && (renderback || this.backVisible),
+      name: "backMaterial"
     });
 
-    const front = new THREE.Mesh(shapeGeometry, frontMaterial);
-    front.name = name;
-
     const back = new THREE.Mesh(shapeGeometry, backMaterial);
     back.name = name;
 
+    const front = new THREE.Mesh(shapeGeometry, frontMaterial);
+    front.name = name;
+
     // ensure, transparent objects will be rendered at the end
     if (alpha < 1.0) {
       back.renderOrder = 999;
@@ -282,7 +338,7 @@ class NestedGroup {
   }
 
   renderLoop(shapes, path, states) {
-    const _render = (shape) => {
+    const _render = (shape, texture, width, height) => {
       var mesh;
       switch (shape.type) {
         case "edges":
@@ -318,6 +374,9 @@ class NestedGroup {
             states[shape.id],
             { topo: "face", geomtype: shape.geomtype },
             shape.subtype,
+            texture,
+            width,
+            height,
           );
       }
       // support object locations
@@ -346,7 +405,11 @@ class NestedGroup {
       if (shape.parts) {
         group.add(this.renderLoop(shape, path, states));
       } else {
-        const objectGroup = _render(shape);
+        const has_texture = shape.texture != null;
+        var texture = has_texture ? shape.texture.image : null;
+        var width = has_texture ? shape.texture.width : null;
+        var height = has_texture ? shape.texture.height : null;
+        const objectGroup = _render(shape, texture, width, height);
         this.groups[shape.id] = objectGroup;
         group.add(objectGroup);
       }
@@ -369,10 +432,9 @@ class NestedGroup {
 
   _traverse(func, flag) {
     for (var path in this.groups) {
-      for (var obj of this.groups[path].children) {
-        if (obj instanceof ObjectGroup) {
-          obj[func](flag);
-        }
+      var obj = this.groups[path];
+      if (obj instanceof ObjectGroup) {
+        obj[func](flag);
       }
     }
   }

package/src/objectgroup.js

@@ -112,15 +112,19 @@ class ObjectGroup extends THREE.Group {
 
     setMetalness(value) {
         for (var child of this.children) {
-            child.material.metalness = value;
-            child.material.needsUpdate = true;
+            if (!child.name.startsWith("clipping")) {
+                child.material.metalness = value;
+                child.material.needsUpdate = true;
+            }
         }
     }
 
     setRoughness(value) {
         for (var child of this.children) {
-            child.material.roughness = value;
-            child.material.needsUpdate = true;
+            if (!child.name.startsWith("clipping")) {
+                child.material.roughness = value;
+                child.material.needsUpdate = true;
+            }
         }
     }
 
@@ -134,11 +138,13 @@ class ObjectGroup extends THREE.Group {
                 : this.alpha;
         }
         for (var child of this.children) {
-            // turn depth write off for transparent objects
-            child.material.depthWrite = this.alpha < 1.0 ? false : !flag;
-            // but keep depth test
-            child.material.depthTest = true;
-            child.material.needsUpdate = true;
+            if (!child.name.startsWith("clipping")){
+                // turn depth write off for transparent objects
+                child.material.depthWrite = this.alpha < 1.0 ? false : !flag;
+                // but keep depth test
+                child.material.depthTest = true;
+                child.material.needsUpdate = true;
+            }
         }
     }
 
@@ -193,9 +199,11 @@ class ObjectGroup extends THREE.Group {
 
     setClipIntersection(flag) {
         for (var child of this.children) {
-            child.material.clipIntersection = flag;
-            child.material.clipIntersection = flag;
-            child.material.clipIntersection = flag;
+            if (!child.name.startsWith("clipping")) {
+                child.material.clipIntersection = flag;
+                child.material.clipIntersection = flag;
+                child.material.clipIntersection = flag;
+            }
         }
     }
 

package/src/slider.js

@@ -91,7 +91,7 @@ class Slider {
             Math.min(value, this.slider.max),
             this.slider.min,
         );
-        this.input.value = trimmed_value.toFixed(0);
+        this.input.value = Math.round(1000 * trimmed_value) / 1000;
         this.slider.value = value;
         this._handle(this.type, this.index, this.input.value);
         this._notify(value, notify);

package/src/toolbar.js

@@ -145,12 +145,20 @@ class ClickButton extends BaseButton {
         }
     };
 
-    // eslint-disable-next-line no-unused-vars
+    extractIdFromName = (name) => {
+        const match = "grid-";
+        const start = name.indexOf(match) + match.length;
+        const end = name.indexOf("_", start);
+        const result = name.slice(start, end);
+        return result;
+    };
+
     handler = (e) => {
-        if (this.dropdown != null && this.dropdown.includes(e.target.innerHTML)) {
-            this.action(`grid-${e.target.innerHTML}`, !this.checkElems[e.target.innerHTML].checked);
-            e.preventDefault();
-            e.stopPropagation();
+        const id = this.extractIdFromName(e.target.id);
+        if (this.dropdown != null && id && this.dropdown.includes(id)) {
+            const newstate = e.target.checked;
+            this.action(`grid-${id}`, newstate);
+            this.checkElems[id].checked = newstate;
         } else if (e.target.type === "button") {
             if (!this.state) {
                 this.clearGroup();

package/src/treeview.js

@@ -26,12 +26,13 @@ const States = {
 };
 
 class TreeView {
-  constructor(states, tree, objectHandler, pickHandler, theme) {
+  constructor(states, tree, objectHandler, pickHandler, theme, newTreeBehavior) {
     this.states = states;
     this.tree = tree;
     this.objectHandler = objectHandler;
     this.pickHandler = pickHandler;
     this.theme = theme;
+    this.newTreeBehavior = newTreeBehavior;
     this.lastSelection = null;
 
     this.setupIcons(theme);
@@ -401,10 +402,19 @@ class TreeView {
     if (type == "leaf") {
       this.updateState(node, icon_id, newState);
       this.updateNodes(this.treeModel, icon_id);
+      if (this.newTreeBehavior && icon_id == 0) {
+        this.updateState(node, 1, newState);
+        this.updateNodes(this.treeModel, 1);
+      }
       this.objectHandler(this.states);
     } else if (type == "node") {
       this.propagateChange(node, icon_id, newState);
       this.updateNodes(this.treeModel, icon_id);
+      if (this.newTreeBehavior && icon_id == 0) {
+        this.objectHandler(this.states);
+        this.propagateChange(node, 1, newState);
+        this.updateNodes(this.treeModel, 1);
+      }
       this.objectHandler(this.states);
     } else {
       console.error(`Error, unknown type '${type}'`);