three-cad-viewer 2.1.2 → 2.2.0

package/src/display.js

@@ -11,7 +11,11 @@ function TEMPLATE(id) {
   const shift = KeyMapper.getshortcuts("shift");
   const ctrl = KeyMapper.getshortcuts("ctrl");
   const meta = KeyMapper.getshortcuts("meta");
-  var html = template.replaceAll("{{id}}", id).replaceAll("{{shift}}", shift).replaceAll("{{ctrl}}", ctrl).replaceAll("{{meta}}", meta);
+  var html = template
+    .replaceAll("{{id}}", id)
+    .replaceAll("{{shift}}", shift)
+    .replaceAll("{{ctrl}}", ctrl)
+    .replaceAll("{{meta}}", meta);
   return html;
 }
 
@@ -19,12 +23,7 @@ function px(val) {
   return `${val}px`;
 }
 
-const buttons = [
-  "plane",
-  "play",
-  "pause",
-  "stop",
-];
+const buttons = ["plane", "play", "pause", "stop"];
 
 class Display {
   /**
@@ -42,11 +41,20 @@ class Display {
     this.cadBody = this._getElement("tcv_cad_body");
 
     // this.cadTool = this._getElement("tcv_cad_toolbar");
-    this.cadTool = new Toolbar(this._getElement("tcv_cad_toolbar"), container.id);
+    this.cadTool = new Toolbar(
+      this._getElement("tcv_cad_toolbar"),
+      container.id,
+    );
     this.cadView = this._getElement("tcv_cad_view");
-    this.distanceMeasurementPanel = this._getElement("tcv_distance_measurement_panel");
-    this.propertiesMeasurementPanel = this._getElement("tcv_properties_measurement_panel");
-    this.angleMeasurementPanel = this._getElement("tcv_angle_measurement_panel");
+    this.distanceMeasurementPanel = this._getElement(
+      "tcv_distance_measurement_panel",
+    );
+    this.propertiesMeasurementPanel = this._getElement(
+      "tcv_properties_measurement_panel",
+    );
+    this.angleMeasurementPanel = this._getElement(
+      "tcv_angle_measurement_panel",
+    );
     this.cadTree = this._getElement("tcv_cad_tree_container");
     this.cadTreeToggles = this._getElement("tcv_cad_tree_toggles");
     this.cadClip = this._getElement("tcv_cad_clip_container");
@@ -79,6 +87,7 @@ class Display {
     this.cadClip.style.display = "none";
     this.cadMaterial.style.display = "none";
     this.clipSliders = null;
+    this.explodeFlag = false;
 
     this.lastPlaneState = false;
 
@@ -108,50 +117,147 @@ class Display {
 
     this.toolbarButtons = {};
 
-    this.toolbarButtons["axes"] = new ClickButton(theme, "axes", "Show axes", this.setAxes);
+    this.toolbarButtons["axes"] = new ClickButton(
+      theme,
+      "axes",
+      "Show axes",
+      this.setAxes,
+    );
     this.cadTool.addButton(this.toolbarButtons["axes"]);
-    this.toolbarButtons["axes0"] = new ClickButton(theme, "axes0", "Show axes at origin (0,0,0)", this.setAxes0);
+    this.toolbarButtons["axes0"] = new ClickButton(
+      theme,
+      "axes0",
+      "Show axes at origin (0,0,0)",
+      this.setAxes0,
+    );
     this.cadTool.addButton(this.toolbarButtons["axes0"]);
-    this.toolbarButtons["grid"] = new ClickButton(theme, "grid", "Show grid", this.setGrid, null, ["xy", "xz", "yz"]);
+    this.toolbarButtons["grid"] = new ClickButton(
+      theme,
+      "grid",
+      "Show grid",
+      this.setGrid,
+      null,
+      ["xy", "xz", "yz"],
+    );
     this.cadTool.addButton(this.toolbarButtons["grid"]);
     this.cadTool.addSeparator();
-    this.toolbarButtons["perspective"] = new ClickButton(theme, "perspective", "Use perspective camera", this.setOrtho);
+    this.toolbarButtons["perspective"] = new ClickButton(
+      theme,
+      "perspective",
+      "Use perspective camera",
+      this.setOrtho,
+    );
     this.cadTool.addButton(this.toolbarButtons["perspective"]);
-    this.toolbarButtons["transparent"] = new ClickButton(theme, "transparent", "Show transparent faces", this.setTransparent);
+    this.toolbarButtons["transparent"] = new ClickButton(
+      theme,
+      "transparent",
+      "Show transparent faces",
+      this.setTransparent,
+    );
     this.cadTool.addButton(this.toolbarButtons["transparent"]);
-    this.toolbarButtons["blackedges"] = new ClickButton(theme, "blackedges", "Show black edges", this.setBlackEdges);
+    this.toolbarButtons["blackedges"] = new ClickButton(
+      theme,
+      "blackedges",
+      "Show black edges",
+      this.setBlackEdges,
+    );
     this.cadTool.addButton(this.toolbarButtons["blackedges"]);
     this.cadTool.addSeparator();
 
-    this.toolbarButtons["reset"] = new Button(theme, "reset", "Reset view", this.reset);
+    this.toolbarButtons["reset"] = new Button(
+      theme,
+      "reset",
+      "Reset view",
+      this.reset,
+    );
     this.cadTool.addButton(this.toolbarButtons["reset"]);
-    this.toolbarButtons["resize"] = new Button(theme, "resize", "Resize object", this.resize);
+    this.toolbarButtons["resize"] = new Button(
+      theme,
+      "resize",
+      "Resize object",
+      this.resize,
+    );
     this.cadTool.addButton(this.toolbarButtons["resize"]);
     this.cadTool.addSeparator();
 
-    this.toolbarButtons["iso"] = new Button(theme, "iso", "Switch to iso view", this.setView);
+    this.toolbarButtons["iso"] = new Button(
+      theme,
+      "iso",
+      "Switch to iso view",
+      this.setView,
+    );
     this.cadTool.addButton(this.toolbarButtons["iso"]);
-    this.toolbarButtons["front"] = new Button(theme, "front", "Switch to front view", this.setView);
+    this.toolbarButtons["front"] = new Button(
+      theme,
+      "front",
+      "Switch to front view",
+      this.setView,
+    );
     this.cadTool.addButton(this.toolbarButtons["front"]);
-    this.toolbarButtons["rear"] = new Button(theme, "rear", "Switch to back view", this.setView);
+    this.toolbarButtons["rear"] = new Button(
+      theme,
+      "rear",
+      "Switch to back view",
+      this.setView,
+    );
     this.cadTool.addButton(this.toolbarButtons["rear"]);
-    this.toolbarButtons["top"] = new Button(theme, "top", "Switch to top view", this.setView);
+    this.toolbarButtons["top"] = new Button(
+      theme,
+      "top",
+      "Switch to top view",
+      this.setView,
+    );
     this.cadTool.addButton(this.toolbarButtons["top"]);
-    this.toolbarButtons["bottom"] = new Button(theme, "bottom", "Switch to bottom view", this.setView);
+    this.toolbarButtons["bottom"] = new Button(
+      theme,
+      "bottom",
+      "Switch to bottom view",
+      this.setView,
+    );
     this.cadTool.addButton(this.toolbarButtons["bottom"]);
-    this.toolbarButtons["left"] = new Button(theme, "left", "Switch to left view", this.setView);
+    this.toolbarButtons["left"] = new Button(
+      theme,
+      "left",
+      "Switch to left view",
+      this.setView,
+    );
     this.cadTool.addButton(this.toolbarButtons["left"]);
-    this.toolbarButtons["right"] = new Button(theme, "right", "Switch to right view", this.setView);
+    this.toolbarButtons["right"] = new Button(
+      theme,
+      "right",
+      "Switch to right view",
+      this.setView,
+    );
     this.cadTool.addButton(this.toolbarButtons["right"]);
     this.cadTool.addSeparator();
 
-    this.toolbarButtons["explode"] = new ClickButton(theme, "explode", "Explode tool", this.setExplode);
+    this.toolbarButtons["explode"] = new ClickButton(
+      theme,
+      "explode",
+      "Explode tool",
+      this.setExplode,
+    );
     this.cadTool.addButton(this.toolbarButtons["explode"]);
-    this.toolbarButtons["distance"] = new ClickButton(theme, "distance", "Measure distance between shapes", this.setTool);
+    this.toolbarButtons["distance"] = new ClickButton(
+      theme,
+      "distance",
+      "Measure distance between shapes",
+      this.setTool,
+    );
     this.cadTool.addButton(this.toolbarButtons["distance"]);
-    this.toolbarButtons["properties"] = new ClickButton(theme, "properties", "Show shape properties", this.setTool);
+    this.toolbarButtons["properties"] = new ClickButton(
+      theme,
+      "properties",
+      "Show shape properties",
+      this.setTool,
+    );
     this.cadTool.addButton(this.toolbarButtons["properties"]);
-    this.toolbarButtons["angle"] = new ClickButton(theme, "angle", "Measure angle between shapes", this.setTool);
+    this.toolbarButtons["angle"] = new ClickButton(
+      theme,
+      "angle",
+      "Measure angle between shapes",
+      this.setTool,
+    );
     this.cadTool.addButton(this.toolbarButtons["angle"]);
 
     this.cadTool.defineGroup([
@@ -161,18 +267,26 @@ class Display {
       this.toolbarButtons["angle"],
     ]);
 
-    this.toolbarButtons["help"] = new Button(theme, "help", "Help", this.toggleHelp);
+    this.toolbarButtons["help"] = new Button(
+      theme,
+      "help",
+      "Help",
+      this.toggleHelp,
+    );
     this.toolbarButtons["help"].alignRight();
     this.cadTool.addButton(this.toolbarButtons["help"]);
-    this.toolbarButtons["pin"] = new Button(theme, "pin", "Pin viewer as png", this.pinAsPng);
+    this.toolbarButtons["pin"] = new Button(
+      theme,
+      "pin",
+      "Pin viewer as png",
+      this.pinAsPng,
+    );
     this.toolbarButtons["pin"].alignRight();
     this.cadTool.addButton(this.toolbarButtons["pin"]);
     this.shapeFilterDropDownMenu = new FilterByDropDownMenu(this);
 
-
     this.showPinning(options.pinning);
     // this.showMeasureTools(options.measureTools);
-
   }
 
   _setupCheckEvent(name, fn, flag) {
@@ -192,8 +306,8 @@ class Display {
   }
 
   /**
-   * 
-   * @param {string} name Name of the DOM element 
+   *
+   * @param {string} name Name of the DOM element
    * @returns {DOMElement}
    */
   _getElement(name) {
@@ -219,6 +333,7 @@ class Display {
    * Use More fropdown if overall width < 970px else just check boxes
    * @param {number} fullWidth - overall width of tree and cad view (taking glass mode into account)
    */
+  // eslint-disable-next-line no-unused-vars
   handleMoreButton(fullWidth) {
     // const moreButton = this._getElement("tcv_more-btn");
     // const moreContent = this._getElement("tcv_more-wrapper");
@@ -264,7 +379,9 @@ class Display {
     }
 
     if (options.tools && !options.glass) {
-      this.cadTool.container.style.width = px(options.treeWidth + options.cadWidth + 4);
+      this.cadTool.container.style.width = px(
+        options.treeWidth + options.cadWidth + 4,
+      );
       this.cadBody.style.width = px(options.treeWidth + options.cadWidth + 4);
     } else {
       this.cadTool.container.style.width = px(options.cadWidth + 2);
@@ -286,6 +403,8 @@ class Display {
     this._setupClickEvent("tcv_collapse_all", this.handleCollapseNodes);
     this._setupClickEvent("tcv_expand", this.handleCollapseNodes);
 
+    this._setupClickEvent("tcv_material_reset", this.handleMaterialReset);
+
     this._setupClickEvent("tcv_toggle_info", this.toggleInfo);
 
     this.help_shown = true;
@@ -316,6 +435,7 @@ class Display {
       this.setClipIntersection,
       false,
     );
+    this._setupCheckEvent("tcv_clip_caps", this.setObjectColorCaps, false);
 
     for (i = 1; i < 4; i++) {
       this._setupClickEvent(
@@ -511,17 +631,22 @@ class Display {
    * @param {boolean} flag - to set or not
    */
   setExplode = (name, flag) => {
+    if (flag && this.explodeFlag) return;
+    if (!flag && !this.explodeFlag) return;
+
     if (flag) {
       if (this.viewer.hasAnimation()) {
         this.viewer.backupAnimation();
       }
       this.viewer.explode();
+      this.explodeFlag = true;
     } else {
       if (this.viewer.hasAnimation()) {
         this.controlAnimationByName("stop");
         this.viewer.clearAnimation();
         this.viewer.restoreAnimation();
       }
+      this.explodeFlag = false;
     }
   };
 
@@ -567,12 +692,10 @@ class Display {
       } else if (name == "properties") {
         this.viewer.cadTools.enable(ToolTypes.PROPERTIES);
         this.viewer.checkChanges({ activeTool: ToolTypes.PROPERTIES });
-      }
-      else if (name == "angle") {
+      } else if (name == "angle") {
         this.viewer.cadTools.enable(ToolTypes.ANGLE);
         this.viewer.checkChanges({ activeTool: ToolTypes.ANGLE });
       }
-
     } else {
       this.viewer.checkChanges({ activeTool: ToolTypes.NONE });
       this.viewer.clearSelection();
@@ -632,7 +755,7 @@ class Display {
 
   /**
    * Show or hides measurement tools, measurement tools needs a backend to be used.
-   * @param {boolean} flag 
+   * @param {boolean} flag
    */
   showMeasureTools = (flag) => {
     this.toolbarButtons["distance"].show(flag);
@@ -660,6 +783,26 @@ class Display {
     el.checked = flag;
   };
 
+  /**
+   * Checkbox Handler for toggling the clip caps
+   * @function
+   * @param {*} e
+   */
+  setObjectColorCaps = (e) => {
+    const flag = !!e.target.checked;
+    this.viewer.setClipObjectColorCaps(flag);
+  };
+
+  /**
+   * Check or uncheck the Intersection checkbox
+   * @function
+   * @param {boolean} flag - whether to check or uncheck the object colors checkbox
+   */
+  setClipObjectColorsCheck = (flag) => {
+    const el = this._getElement("tcv_clip_caps");
+    el.checked = flag;
+  };
+
   /**
    * Handler to reset position, zoom and up of the camera
    * @function
@@ -681,15 +824,7 @@ class Display {
    * Clear all highlights of navigation tree entries
    */
   clearHighlights() {
-    const buttons = [
-      "front",
-      "rear",
-      "top",
-      "bottom",
-      "left",
-      "right",
-      "iso",
-    ];
+    const buttons = ["front", "rear", "top", "bottom", "left", "right", "iso"];
     buttons.forEach((btn) => {
       var el = this.toolbarButtons[btn];
       el.highlight(false);
@@ -805,6 +940,16 @@ class Display {
     this.roughnessSlider.setValue(val * 100);
   };
 
+  /**
+   * Reset material values to original values
+   * @function
+   * @param {Event} e - a DOM click event
+   */
+  // eslint-disable-next-line no-unused-vars
+  handleMaterialReset = (e) => {
+    this.viewer.resetMaterial();
+  };
+
   /**
    * Activate the UI tab given the name of the tab
    * @param {string} tab - name of the tab "tree" or "clip"
@@ -821,6 +966,7 @@ class Display {
       this.cadMaterial.style.display = "none";
       this.viewer.nestedGroup.setBackVisible(false);
       this.viewer.setLocalClipping(false);
+      this.viewer.clipping.setVisible(false);
       // copy state since setClipHelpers(false) will set to false
       var lastPlaneState = this.viewer.getClipPlaneHelpers();
       this.viewer.setClipPlaneHelpers(false);
@@ -832,7 +978,10 @@ class Display {
       this.cadMaterial.style.display = "none";
       this.viewer.nestedGroup.setBackVisible(true);
       this.viewer.setLocalClipping(true);
+      this.viewer.setClipIntersection(this.viewer.clipIntersection);
       this.viewer.setClipPlaneHelpers(this.lastPlaneState);
+      this.viewer.clipping.setVisible(true);
+      this.viewer.update(true, false);
     } else if (tab === "material" && this.activeTab !== "material") {
       this.cadTree.style.display = "none";
       this.cadTreeToggles.style.display = "none";
@@ -841,6 +990,7 @@ class Display {
       this.viewer.nestedGroup.setBackVisible(false);
       this.viewer.setLocalClipping(false);
       this.viewer.setClipPlaneHelpers(false);
+      this.viewer.clipping.setVisible(false);
     }
     this.activeTab = tab;
 
@@ -1008,16 +1158,16 @@ class Display {
 
   /**
    * Show or hide the distance measurement panel
-   * @param {boolean} flag 
+   * @param {boolean} flag
    */
   showDistancePanel = (flag) => {
     this.distanceMeasurementPanel.style.display = flag ? "block" : "none";
   };
 
   /**
-  * Show or hide the properties measurement panel
-  * @param {boolean} flag 
-  */
+   * Show or hide the properties measurement panel
+   * @param {boolean} flag
+   */
   showPropertiesPanel = (flag) => {
     this.propertiesMeasurementPanel.style.display = flag ? "block" : "none";
   };
@@ -1117,8 +1267,8 @@ class Display {
     };
     this.setSizes(options);
 
-    const fullWidth = this.cadWidth + (this.glass ? 0 : this.treeWidth);
-    this.handleMoreButton(fullWidth);
+    // const fullWidth = this.cadWidth + (this.glass ? 0 : this.treeWidth);
+    // this.handleMoreButton(fullWidth);
   }
 
   updateHelp(before, after) {

package/src/font.js

@@ -18,6 +18,78 @@ export const helvetiker = {
       ha: 849,
       o: "m 779 0 l 0 0 l 0 113 l 621 896 l 40 896 l 40 1013 l 779 1013 l 778 887 l 171 124 l 779 124 l 779 0 ",
     },
+    0: {
+      x_min: 73,
+      x_max: 715,
+      ha: 792,
+      o: "m 394 -29 q 153 129 242 -29 q 73 479 73 272 q 152 829 73 687 q 394 989 241 989 q 634 829 545 989 q 715 479 715 684 q 635 129 715 270 q 394 -29 546 -29 m 394 89 q 546 211 489 89 q 598 479 598 322 q 548 748 598 640 q 394 871 491 871 q 241 748 298 871 q 190 479 190 637 q 239 211 190 319 q 394 89 296 89 ",
+    },
+    1: {
+      x_min: 215.671875,
+      x_max: 574,
+      ha: 792,
+      o: "m 574 0 l 442 0 l 442 697 l 215 697 l 215 796 q 386 833 330 796 q 475 986 447 875 l 574 986 l 574 0 ",
+    },
+    2: {
+      x_min: 59,
+      x_max: 731,
+      ha: 792,
+      o: "m 731 0 l 59 0 q 197 314 59 188 q 457 487 199 315 q 598 691 598 580 q 543 819 598 772 q 411 867 488 867 q 272 811 328 867 q 209 630 209 747 l 81 630 q 182 901 81 805 q 408 986 271 986 q 629 909 536 986 q 731 694 731 826 q 613 449 731 541 q 378 316 495 383 q 201 122 235 234 l 731 122 l 731 0 ",
+    },
+    3: {
+      x_min: 54,
+      x_max: 737,
+      ha: 792,
+      o: "m 737 284 q 635 55 737 141 q 399 -25 541 -25 q 156 52 248 -25 q 54 308 54 140 l 185 308 q 245 147 185 202 q 395 96 302 96 q 539 140 484 96 q 602 280 602 190 q 510 429 602 390 q 324 454 451 454 l 324 565 q 487 584 441 565 q 565 719 565 617 q 515 835 565 791 q 395 879 466 879 q 255 824 307 879 q 203 661 203 769 l 78 661 q 166 909 78 822 q 387 992 250 992 q 603 921 513 992 q 701 723 701 844 q 669 607 701 656 q 578 524 637 558 q 696 434 655 499 q 737 284 737 369 ",
+    },
+    4: {
+      x_min: 48,
+      x_max: 742.453125,
+      ha: 792,
+      o: "m 742 243 l 602 243 l 602 0 l 476 0 l 476 243 l 48 243 l 48 368 l 476 958 l 602 958 l 602 354 l 742 354 l 742 243 m 476 354 l 476 792 l 162 354 l 476 354 ",
+    },
+    5: {
+      x_min: 54.171875,
+      x_max: 738,
+      ha: 792,
+      o: "m 738 314 q 626 60 738 153 q 382 -23 526 -23 q 155 47 248 -23 q 54 256 54 125 l 183 256 q 259 132 204 174 q 382 91 314 91 q 533 149 471 91 q 602 314 602 213 q 538 469 602 411 q 386 528 475 528 q 284 506 332 528 q 197 439 237 484 l 81 439 l 159 958 l 684 958 l 684 840 l 254 840 l 214 579 q 306 627 258 612 q 407 643 354 643 q 636 552 540 643 q 738 314 738 457 ",
+    },
+    6: {
+      x_min: 53,
+      x_max: 739,
+      ha: 792,
+      o: "m 739 312 q 633 62 739 162 q 400 -31 534 -31 q 162 78 257 -31 q 53 439 53 206 q 178 859 53 712 q 441 986 284 986 q 643 912 559 986 q 732 713 732 833 l 601 713 q 544 830 594 786 q 426 875 494 875 q 268 793 331 875 q 193 517 193 697 q 301 597 240 570 q 427 624 362 624 q 643 540 552 624 q 739 312 739 451 m 603 298 q 540 461 603 400 q 404 516 484 516 q 268 461 323 516 q 207 300 207 401 q 269 137 207 198 q 405 83 325 83 q 541 137 486 83 q 603 298 603 197 ",
+    },
+    7: {
+      x_min: 58.71875,
+      x_max: 730.953125,
+      ha: 792,
+      o: "m 730 839 q 469 448 560 641 q 335 0 378 255 l 192 0 q 328 441 235 252 q 593 830 421 630 l 58 830 l 58 958 l 730 958 l 730 839 ",
+    },
+    8: {
+      x_min: 55,
+      x_max: 736,
+      ha: 792,
+      o: "m 571 527 q 694 424 652 491 q 736 280 736 358 q 648 71 736 158 q 395 -26 551 -26 q 142 69 238 -26 q 55 279 55 157 q 96 425 55 359 q 220 527 138 491 q 120 615 153 562 q 88 726 88 668 q 171 904 88 827 q 395 986 261 986 q 618 905 529 986 q 702 727 702 830 q 670 616 702 667 q 571 527 638 565 m 394 565 q 519 610 475 565 q 563 717 563 655 q 521 823 563 781 q 392 872 474 872 q 265 824 312 872 q 224 720 224 783 q 265 613 224 656 q 394 565 312 565 m 395 91 q 545 150 488 91 q 597 280 597 204 q 546 408 597 355 q 395 465 492 465 q 244 408 299 465 q 194 280 194 356 q 244 150 194 203 q 395 91 299 91 ",
+    },
+    9: {
+      x_min: 53,
+      x_max: 739,
+      ha: 792,
+      o: "m 739 524 q 619 94 739 241 q 362 -32 516 -32 q 150 47 242 -32 q 59 244 59 126 l 191 244 q 246 129 191 176 q 373 82 301 82 q 526 161 466 82 q 597 440 597 255 q 363 334 501 334 q 130 432 216 334 q 53 650 53 521 q 134 880 53 786 q 383 986 226 986 q 659 841 566 986 q 739 524 739 719 m 388 449 q 535 514 480 449 q 585 658 585 573 q 535 805 585 744 q 388 873 480 873 q 242 809 294 873 q 191 658 191 745 q 239 514 191 572 q 388 449 292 449 ",
+    },
+    "-": {
+      x_min: 8.71875,
+      x_max: 350.390625,
+      ha: 478,
+      o: "m 350 317 l 8 317 l 8 428 l 350 428 l 350 317 ",
+    },
+    ".": {
+      x_min: 0,
+      x_max: 142,
+      ha: 239,
+      o: "m 142 0 l 0 0 l 0 151 l 142 151 l 142 0 ",
+    },
   },
   cssFontWeight: "normal",
   ascender: 1189,