three-cad-viewer 1.5.6 → 1.5.9

package/Readme.md

@@ -117,3 +117,18 @@ yarn run start
 ```
 
 For the deployment, see [Release.md](./Release.md)
+
+# Changes
+
+v1.5.7
+
+- fixed ids of checkboxes to be unique across the document
+
+v1.5.8
+
+- fixed glass and tools paramewter handling
+- fixed initial zoom for wide cad views with low height
+
+v1.5.9
+
+- fixed a regression from v1.5.8 around initial zoom value handling)

package/dist/three-cad-viewer.esm.js

@@ -51284,37 +51284,38 @@ function getIconBackground(theme, name) {
   return `url(data:image/svg+xml;utf8,${escape(icons[name][theme])});`;
 }
 
-const TEMPLATE = `
+function TEMPLATE(id) {
+  return `
 <div class="tcv_cad_viewer">
     <div class="tcv_cad_toolbar tcv_round">
         <span class="tcv_tooltip" data-tooltip="Show coordinate axis">
-            <input class='tcv_axes tcv_check' id='tcv_axes' type="checkbox" />
-            <label for='tcv_axes' class="tcv_label">Axes</label>
+            <input class='tcv_axes tcv_check' id='tcv_axes_${id}' type="checkbox" />
+            <label for='tcv_axes_${id}' class="tcv_label">Axes</label>
         </span>
         <div class="tcv_grid-dropdown">
             <input class='tcv_grid tcv_check' id='tcv_grid' type="checkbox" /><label for='tcv_grid'
                 class="tcv_label">Grid</label>
             <div class="tcv_grid-content tcv_dropdown-content">
                 <div class="tcv_tooltip" data-tooltip="Show xy grid">
-                    <input class='tcv_grid-xy tcv_check tcv_dropdown-entry' id='tcv_grid-xy' type="checkbox">
-                    <label for='tcv_grid-xy' class="tcv_label tcv_dropdown-entry">xy</label>
+                    <input class='tcv_grid-xy tcv_check tcv_dropdown-entry' id='tcv_grid-xy_${id}' type="checkbox">
+                    <label for='tcv_grid-xy_${id}' class="tcv_label tcv_dropdown-entry">xy</label>
                 </div>
                 <div class="tcv_tooltip" data-tooltip="Show xz grid">
-                    <input class='tcv_grid-xz tcv_check tcv_dropdown-entry' id='tcv_grid-xz' type="checkbox">
-                    <label for='tcv_grid-xz' class="tcv_label tcv_dropdown-entry">xz</label>
+                    <input class='tcv_grid-xz tcv_check tcv_dropdown-entry' id='tcv_grid-xz_${id}' type="checkbox">
+                    <label for='tcv_grid-xz_${id}' class="tcv_label tcv_dropdown-entry">xz</label>
                 </div>
                 <div class="tcv_tooltip" data-tooltip="Show yz grid">
-                    <input class='tcv_grid-yz tcv_check tcv_dropdown-entry' id='tcv_grid-yz' type="checkbox">
-                    <label for='tcv_grid-yz' class="tcv_label tcv_dropdown-entry">yz</label>
+                    <input class='tcv_grid-yz tcv_check tcv_dropdown-entry' id='tcv_grid-yz_${id}' type="checkbox">
+                    <label for='tcv_grid-yz_${id}' class="tcv_label tcv_dropdown-entry">yz</label>
                 </div>
             </div>
         </div>
         <span class="tcv_tooltip" data-tooltip="Move center of axis and grid to (0,0,0)">
-            <input class='tcv_axes0 tcv_check' id='tcv_axes0' type="checkbox" /><label for='tcv_axes0'
+            <input class='tcv_axes0 tcv_check' id='tcv_axes0_${id}' type="checkbox" /><label for='tcv_axes0_${id}'
                 class="tcv_label">@0</label>
         </span>
         <span class="tcv_tooltip" data-tooltip="Toggle camera between orthographic and perspective view">
-            <input class='tcv_ortho tcv_check' id='tcv_ortho' type="checkbox" /><label for='tcv_ortho'
+            <input class='tcv_ortho tcv_check' id='tcv_ortho_${id}' type="checkbox" /><label for='tcv_ortho_${id}'
                 class="tcv_label">Ortho</label>
         </span>
         <span class="tcv_tooltip" data-tooltip="Reset view">
@@ -51348,17 +51349,17 @@ const TEMPLATE = `
             <button class="tcv_more-btn">More<span class="tcv_more_icon">\u25BC</span></button>
             <div class="tcv_more-content tcv_dropdown-content">
                 <div class="tcv_tooltip" data-tooltip="Toggle transparent objects">
-                    <input class='tcv_transparent tcv_check tcv_dropdown-entry' id='tcv_transparent' type="checkbox" />
-                    <label for='tcv_transparent' class="tcv_label tcv_dropdown-entry">Transparent</label>
+                    <input class='tcv_transparent tcv_check tcv_dropdown-entry' id='tcv_transparent_${id}' type="checkbox" />
+                    <label for='tcv_transparent_${id}' class="tcv_label tcv_dropdown-entry">Transparent</label>
                 </div>
                 <div class="tcv_tooltip" data-tooltip="Toggle black edges">
-                    <input class='tcv_black_edges tcv_check tcv_dropdown-entry' id='tcv_black_edges' type="checkbox" />
-                    <label for='tcv_black_edges' class="tcv_label tcv_dropdown-entry">Black edges</label>
+                    <input class='tcv_black_edges tcv_check tcv_dropdown-entry' id='tcv_black_edges_${id}' type="checkbox" />
+                    <label for='tcv_black_edges_${id}' class="tcv_label tcv_dropdown-entry">Black edges</label>
                 </div>
                 <div class="tcv_explode_widget tcv_tooltip"
                     data-tooltip="Explode assembly (@0 determines explosion center)">
-                    <input class='tcv_explode tcv_check tcv_dropdown-entry' id='tcv_explode' type="checkbox" />
-                    <label for='tcv_explode' class="tcv_label tcv_dropdown-entry">Explode</label>
+                    <input class='tcv_explode tcv_check tcv_dropdown-entry' id='tcv_explode_${id}' type="checkbox" />
+                    <label for='tcv_explode_${id}' class="tcv_label tcv_dropdown-entry">Explode</label>
                 </div>
             </div>
         </div>
@@ -51535,6 +51536,7 @@ const TEMPLATE = `
     </div>
 </div>
 `;
+}
 
 function px(val) {
   return `${val}px`;
@@ -51636,7 +51638,7 @@ class Display {
   constructor(container, options) {
     this.container = container;
 
-    this.container.innerHTML = TEMPLATE;
+    this.container.innerHTML = TEMPLATE(this.container.id);
     this.cadBody = this._getElement("tcv_cad_body");
     this.cadTool = this._getElement("tcv_cad_toolbar");
     this.cadView = this._getElement("tcv_cad_view");
@@ -51656,15 +51658,14 @@ class Display {
     }
 
     this.viewer = null;
-    this._glassMode = false;
-    this.tools = true;
-    this._events = [];
+    this.glass = options.glass;
+    this.tools = options.tools;
     this.cadWidth = options.cadWidth;
     this.height = options.height;
     this.treeWidth = options.treeWidth;
 
-    this.showTools(options.tools);
-    this.glassMode(options.glass);
+    this._events = [];
+
     this.setSizes(options);
 
     this.activeTab = "tree";
@@ -51829,7 +51830,7 @@ class Display {
     this._setupClickEvent("tcv_pin", this.pinAsPng);
     this._setupClickEvent("tcv_help", this.toggleHelp);
     this.help_shown = true;
-    this.info_shown = !this._glassMode;
+    this.info_shown = !this.glass;
 
     const tabs = ["tcv_tab_tree", "tcv_tab_clip"];
     tabs.forEach((name) => {
@@ -51880,15 +51881,18 @@ class Display {
    * @property {boolean} [ortho = true] - use an orthographic (true) or perspective camera (false)
    * @property {boolean} [transparent = false] - show CAD object transparent.
    * @property {boolean} [blackEdges = false] - show edges in black and not in edgeColor.
-   * @property {boolean} [clipIntersection = false] - use intersection clipping
-   * @property {boolean} [clipPlaneHelpers = false] - show clipping planes
+   * @property {boolean} [tools = true] - show CAD tools.
+   * @property {boolean} [glass = false] - use glass mode, i.e. CAD navigation as overlay.
    */
-  updateUI(axes, axes0, ortho, transparent, blackEdges) {
+  updateUI(axes, axes0, ortho, transparent, blackEdges, tools, glass) {
     this.checkElement("tcv_axes", axes);
     this.checkElement("tcv_axes0", axes0);
     this.checkElement("tcv_ortho", ortho);
     this.checkElement("tcv_transparent", transparent);
     this.checkElement("tcv_black_edges", blackEdges);
+
+    this.showTools(tools);
+    this.glassMode(glass);
   }
   // setup functions
 
@@ -52104,6 +52108,10 @@ class Display {
    */
   showTools = (flag) => {
     this.tools = flag;
+    if (this.viewer) {
+      // not available at first call
+      this.viewer.tools = flag;
+    }
     var tb = this._getElement("tcv_cad_toolbar");
     var cn = this._getElement("tcv_cad_navigation");
     for (var el of [cn, tb]) {
@@ -52416,6 +52424,18 @@ class Display {
     this.showInfo(!this.info_shown);
   };
 
+  /**
+   * Auto collapse tree nodes, when cad width < 600
+   * @function
+   * @param {boolean} flag - whether to enable/disable glass mode
+   */
+  autoCollapse() {
+    if (this.cadWidth < 600 && this.glass) {
+      console.info("Small view, collapsing tree");
+      this.collapseNodes("C");
+    }
+  }
+
   /**
    * Enable/disable glass mode
    * @function
@@ -52435,7 +52455,8 @@ class Display {
       this._getElement("tcv_toggle_info_wrapper").style.display = "block";
 
       this.showInfo(false);
-      this._glassMode = true;
+      this.glass = true;
+      this.autoCollapse();
     } else {
       this._getElement("tcv_cad_tree").classList.remove("tcv_cad_tree_glass");
       this._getElement("tcv_cad_tree").style["max-height"] = null;
@@ -52448,14 +52469,18 @@ class Display {
       this._getElement("tcv_toggle_info_wrapper").style.display = "none";
 
       this.showInfo(true);
-      this._glassMode = false;
+      this.glass = false;
+    }
+    if (this.viewer) {
+      // not available at first call
+      this.viewer.glass = false;
     }
     const options = {
       cadWidth: this.cadWidth,
-      glass: this._glassMode,
+      glass: this.glass,
       height: this.height,
       tools: this.tools,
-      treeWidth: (flag) ? 0 : this.treeWidth    
+      treeWidth: flag ? 0 : this.treeWidth,
     };
     this.setSizes(options);
   }
@@ -57005,6 +57030,13 @@ class Controls {
     return this.controls.target;
   }
 
+  /**
+   * Get the initial zoom value of the camera.
+   **/
+  getZoom0() {
+    return this.controls.zoom0;
+  }
+
   /**
    * Get the lookAt target of the camera.
    * @param {number[]} target - camera target as THREE.Vector3.
@@ -57389,7 +57421,6 @@ class Viewer {
     this.hasAnimationLoop = false;
 
     this.setDisplayDefaults(options);
-    this.theme = options.theme;
 
     this.display = new Display(container, {
       theme: this.theme,
@@ -57521,16 +57552,17 @@ class Viewer {
     this.clipSlider0 = -1;
     this.clipSlider1 = -1;
     this.clipSlider2 = -1;
-    this.tools = true;
     this.control = "orbit";
-    this.glass = false;
     this.ticks = 10;
 
     this.position = null;
     this.quaternion = null;
     this.target = null;
-    this.zoom = null;
-    this.zoom0 = 1.0;
+
+    this.zoom = 4 / 3;
+    if (this.cadWidth >= this.height) {
+      this.zoom *= this.height / this.cadWidth;
+    }
 
     this.panSpeed = 0.5;
     this.rotateSpeed = 1.0;
@@ -57587,7 +57619,7 @@ class Viewer {
     console.log("- glass", this.glass);
     console.log("- transparent", this.transparent);
     console.log("- zoom", this.zoom);
-    console.log("- zoom0", this.zoom0);
+    console.log("- zoom0", this.controls.getZoom0());
     console.log("- zoomSpeed", this.zoomSpeed);
   }
   // - - - - - - - - - - - - - - - - - - - - - - - -
@@ -57991,10 +58023,10 @@ class Viewer {
 
     // this needs to happen after the controls have been established
     if (options.position == null && options.quaternion == null) {
-      this.presetCamera("iso", options.zoom);
+      this.presetCamera("iso", this.zoom);
       this.display.highlightButton("iso");
     } else if (options.position != null) {
-      this.setCamera(false, options.position, options.quaternion, options.zoom);
+      this.setCamera(false, options.position, options.quaternion, this.zoom);
       if (options.quaternion == null) {
         this.camera.lookAtTarget();
       }
@@ -58002,7 +58034,7 @@ class Viewer {
       this.info.addHtml(
         "<b>quaternion needs position to be provided, falling back to ISO view</b>",
       );
-      this.presetCamera("iso", options.zoom);
+      this.presetCamera("iso", this.zoom);
     }
     this.controls.update();
 
@@ -58143,12 +58175,11 @@ class Viewer {
       this.ortho,
       this.transparent,
       this.blackEdges,
+      this.tools,
+      this.glass,
     );
 
-    if (this.cadWidth < 600 && this.display._glassMode) {
-      console.info("Small view, collapsing tree");
-      this.display.collapseNodes("C");
-    }
+    this.display.autoCollapse();
 
     //
     // show the rendering
@@ -58246,7 +58277,7 @@ class Viewer {
    * @function
    */
   resize = () => {
-    this.camera.setZoom(this.zoom0);
+    this.camera.setZoom(this.controls.getZoom0());
     this.camera.updateProjectionMatrix();
     this.update(true);
   };
@@ -59082,6 +59113,13 @@ class Viewer {
     });
   };
 
+  /**
+   * Calculate explode trajectories and initiate the animation
+   *
+   * @param {number} [duration=2] - duration of animation.
+   * @param {number} [speed=1] - speed of animation.
+   * @param {number} [multiplier=2.5] - multiplier for length of trajectories.
+   */
   explode(duration = 2, speed = 1, multiplier = 2.5) {
     this.clearAnimation();
 
@@ -59141,6 +59179,12 @@ class Viewer {
     this.initAnimation(duration, speed, "E", false);
   }
 
+  /**
+   * Calculate explode trajectories and initiate the animation
+   *
+   * @param {string[]} tags - e.g. ["axes", "axes0", "grid", "ortho", "more", "help"]
+   * @param {boolean} flag - whether to turn on or off the UI elements.
+   */
   trimUI(tags, flag) {
     var display = flag ? "inline-block" : "none";
     for (var tag of tags) {
@@ -59159,6 +59203,32 @@ class Viewer {
       }
     }
   }
+
+  //
+  // DOESN'T WORK DUE TO CAMERA CANNOT BE CHANGED EASILY
+  //
+  // /**
+  //  * Resize cadWidth, treeWidth and height of thew viewer
+  //  *
+  //  * @param {cadWidth} tags - e.g. ["axes", "axes0", "grid", "ortho", "more", "help"]
+  //  * @param {treeWidth} flag - whether to turn on or off the UI elements.
+  //  * @param {height} flag - whether to turn on or off the UI elements.
+  //  */
+  // resetUISize(cadWidth, treeWidth, height) {
+  //   this.cadWidth = cadWidth;
+  //   this.treeWidth = treeWidth;
+  //   this.height = height;
+  //   this.display.setSizes({
+  //     cadWidth: cadWidth,
+  //     treeWidth: treeWidth,
+  //     height: height,
+  //     tools: this.tools,
+  //     glass: this.glass,
+  //   });
+  //   this.display.autoCollapse();
+  //   this.renderer.setSize(cadWidth, height);
+  //   this.update(true);
+  // }
 }
 
 export { Display, Timer, Viewer };