three-cad-viewer 1.5.3 → 1.5.6

package/Readme.md

@@ -70,7 +70,7 @@ For the `States` object, see [Class States](https://bernhard-42.github.io/three-
         axes: true,
         grid: [false, false, false],
         timeit: false,
-        rotateSpeed: 1
+        rotateSpeed: 1,
       };
 
       const shapes = {}; // a Shapes object, see example or API docs
@@ -107,3 +107,13 @@ To understand the data format, a look at the simple 1 unit sized box might be he
 - [API docs](https://bernhard-42.github.io/three-cad-viewer/Viewer.html)
 
 Back to [Github repo](https://github.com/bernhard-42/three-cad-viewer)
+
+## Development
+
+Run a web server in watch mode
+
+```bash
+yarn run start
+```
+
+For the deployment, see [Release.md](./Release.md)

package/dist/three-cad-viewer.css

@@ -64,7 +64,7 @@ canvas {
 
 .tcv_cad_view_glass {
   position: absolute !important;
-  left: 16px;
+  left: 4px;
 }
 
 .tcv_cad_tree_toggles {
@@ -217,7 +217,7 @@ th {
   margin: 0;
   padding: 0px;
   position: absolute;
-  right: 2px;
+  right: 0px;
   bottom: 0px;
   z-index: 100;
 }
@@ -276,7 +276,7 @@ th {
 }
 
 .tcv_btn_highlight {
-  border: 1px solid var(--tcv-shadow);
+  outline: 1px solid var(--tcv-shadow);
 }
 
 .tcv_small_btn {
@@ -293,7 +293,7 @@ th {
 
 .tcv_btn:hover {
   box-shadow: 1px 1px 1px 0 var(--tcv-shadow);
-  background-color: var(--tcv-bg-overlay-color);
+  background-color: var(--tcv-bg-highlight-color);
 }
 
 .tcv_btn:active {
@@ -328,7 +328,7 @@ input[type="button"] {
 }
 
 .tcv_tab:hover {
-  background-color: var(--tcv-bg-overlay-color);
+  background-color: var(--tcv-bg-highlight-color);
   font-weight: bold;
 }
 
@@ -342,12 +342,12 @@ input[type="button"] {
 
 .tcv_tab-selected {
   border-bottom: none;
-  /* font-weight: bold; */
+  font-weight: bold;
 }
 
 .tcv_tab-unselected {
   border-bottom: 1px solid lightgray;
-  /* font-weight: normal; */
+  font-weight: normal;
 }
 
 .tcv_vertical-center {
@@ -493,6 +493,8 @@ input[type="button"] {
   color: var(--tcv-z-color);
 }
 
+/*  Scrollbar styling for Chrome like browsers */
+
 .tcv_mac-scrollbar::-webkit-scrollbar {
   width: 5px !important;
   height: 5px !important;
@@ -507,16 +509,20 @@ input[type="button"] {
   background-color: transparent !important;
 }
 
+.tcv_mac-scrollbar::-webkit-scrollbar-piece {
+  background-color: transparent !important;
+}
+
 .tcv_mac-scrollbar::-webkit-scrollbar-corner {
   background-color: transparent !important;
 }
 
 .tcv_mac-scrollbar::-webkit-scrollbar-thumb:hover {
-  background: var(--tcv-scrollbar-hover) !important;
+  background-color: var(--tcv-scrollbar-hover) !important;
 }
 
 .tcv_mac-scrollbar::-webkit-scrollbar-thumb:active {
-  background: var(--tcv-scrollbar-active) !important;
+  background-color: var(--tcv-scrollbar-hover) !important;
 }
 
 .tcv_mac-scrollbar .widget-html-content {
@@ -524,12 +530,20 @@ input[type="button"] {
   overflow-y: visible;
 }
 
+/* Scrollbar styling for Firefox Browser */
+
 .tcv_scroller {
-  /* scrollbar-color: #7f7f7f white; */
   scrollbar-width: thin;
+  scrollbar-color: var(--tcv-scrollbar-thumb) transparent;
   background-color: transparent !important;
 }
 
+.tcv_scroller:hover {
+  scrollbar-width: thin;
+  scrollbar-color: var(--tcv-scrollbar-hover) transparent;
+}
+
+/* tooltips */
 [data-tooltip]:before {
   position: absolute;
   pointer-events: none;

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

@@ -64,7 +64,7 @@ canvas {
 
 .tcv_cad_view_glass {
   position: absolute !important;
-  left: 16px;
+  left: 4px;
 }
 
 .tcv_cad_tree_toggles {
@@ -217,7 +217,7 @@ th {
   margin: 0;
   padding: 0px;
   position: absolute;
-  right: 2px;
+  right: 0px;
   bottom: 0px;
   z-index: 100;
 }
@@ -276,7 +276,7 @@ th {
 }
 
 .tcv_btn_highlight {
-  border: 1px solid var(--tcv-shadow);
+  outline: 1px solid var(--tcv-shadow);
 }
 
 .tcv_small_btn {
@@ -293,7 +293,7 @@ th {
 
 .tcv_btn:hover {
   box-shadow: 1px 1px 1px 0 var(--tcv-shadow);
-  background-color: var(--tcv-bg-overlay-color);
+  background-color: var(--tcv-bg-highlight-color);
 }
 
 .tcv_btn:active {
@@ -328,7 +328,7 @@ input[type="button"] {
 }
 
 .tcv_tab:hover {
-  background-color: var(--tcv-bg-overlay-color);
+  background-color: var(--tcv-bg-highlight-color);
   font-weight: bold;
 }
 
@@ -342,12 +342,12 @@ input[type="button"] {
 
 .tcv_tab-selected {
   border-bottom: none;
-  /* font-weight: bold; */
+  font-weight: bold;
 }
 
 .tcv_tab-unselected {
   border-bottom: 1px solid lightgray;
-  /* font-weight: normal; */
+  font-weight: normal;
 }
 
 .tcv_vertical-center {
@@ -493,6 +493,8 @@ input[type="button"] {
   color: var(--tcv-z-color);
 }
 
+/*  Scrollbar styling for Chrome like browsers */
+
 .tcv_mac-scrollbar::-webkit-scrollbar {
   width: 5px !important;
   height: 5px !important;
@@ -507,16 +509,20 @@ input[type="button"] {
   background-color: transparent !important;
 }
 
+.tcv_mac-scrollbar::-webkit-scrollbar-piece {
+  background-color: transparent !important;
+}
+
 .tcv_mac-scrollbar::-webkit-scrollbar-corner {
   background-color: transparent !important;
 }
 
 .tcv_mac-scrollbar::-webkit-scrollbar-thumb:hover {
-  background: var(--tcv-scrollbar-hover) !important;
+  background-color: var(--tcv-scrollbar-hover) !important;
 }
 
 .tcv_mac-scrollbar::-webkit-scrollbar-thumb:active {
-  background: var(--tcv-scrollbar-active) !important;
+  background-color: var(--tcv-scrollbar-hover) !important;
 }
 
 .tcv_mac-scrollbar .widget-html-content {
@@ -524,12 +530,20 @@ input[type="button"] {
   overflow-y: visible;
 }
 
+/* Scrollbar styling for Firefox Browser */
+
 .tcv_scroller {
-  /* scrollbar-color: #7f7f7f white; */
   scrollbar-width: thin;
+  scrollbar-color: var(--tcv-scrollbar-thumb) transparent;
   background-color: transparent !important;
 }
 
+.tcv_scroller:hover {
+  scrollbar-width: thin;
+  scrollbar-color: var(--tcv-scrollbar-hover) transparent;
+}
+
+/* tooltips */
 [data-tooltip]:before {
   position: absolute;
   pointer-events: none;

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

@@ -51657,10 +51657,14 @@ class Display {
 
     this.viewer = null;
     this._glassMode = false;
+    this.tools = true;
     this._events = [];
     this.cadWidth = options.cadWidth;
     this.height = options.height;
     this.treeWidth = options.treeWidth;
+
+    this.showTools(options.tools);
+    this.glassMode(options.glass);
     this.setSizes(options);
 
     this.activeTab = "tree";
@@ -51754,14 +51758,22 @@ class Display {
         options.treeWidth,
       );
     }
-    const treeHeight = Math.round(options.height * ratio);
-    this.cadTree.parentElement.parentElement.style.height = px(treeHeight);
-    this.cadInfo.parentElement.parentElement.style.height = px(
-      options.height - treeHeight - 4,
-    );
+    if (!options.glass) {
+      const treeHeight = Math.round(options.height * ratio);
+      this.cadTree.parentElement.parentElement.style.height = px(treeHeight);
+      this.cadInfo.parentElement.parentElement.style.height = px(
+        options.height - treeHeight - 4,
+      );
+    }
+
+    if (options.tools && !options.glass) {
+      this.cadTool.style.width = px(options.treeWidth + options.cadWidth + 4);
+      this.cadBody.style.width = px(options.treeWidth + options.cadWidth + 4);
+    } else {
+      this.cadTool.style.width = px(options.cadWidth + 2);
+      this.cadBody.style.width = px(options.cadWidth + 2);
+    }
 
-    this.cadTool.style.width = px(options.treeWidth + options.cadWidth + 4);
-    this.cadBody.style.width = px(options.treeWidth + options.cadWidth + 4);
     this.cadBody.style.height = px(options.height + 4);
   }
 
@@ -51808,16 +51820,16 @@ class Display {
       this._setupClickEvent(name, this.setView);
     });
 
-    this._setupClickEvent("tcv_collapse_singles", this.collapseNodes1);
-    this._setupClickEvent("tcv_collapse_all", this.collapseNodes);
-    this._setupClickEvent("tcv_expand", this.expandNodes);
+    this._setupClickEvent("tcv_collapse_singles", this.handleCollapseNodes);
+    this._setupClickEvent("tcv_collapse_all", this.handleCollapseNodes);
+    this._setupClickEvent("tcv_expand", this.handleCollapseNodes);
 
     this._setupClickEvent("tcv_toggle_info", this.toggleInfo);
 
     this._setupClickEvent("tcv_pin", this.pinAsPng);
     this._setupClickEvent("tcv_help", this.toggleHelp);
     this.help_shown = true;
-    this.info_shown = true;
+    this.info_shown = !this._glassMode;
 
     const tabs = ["tcv_tab_tree", "tcv_tab_clip"];
     tabs.forEach((name) => {
@@ -51870,15 +51882,13 @@ class Display {
    * @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/hide all tools.
    */
-  updateUI(axes, axes0, ortho, transparent, blackEdges, tools) {
+  updateUI(axes, axes0, ortho, transparent, blackEdges) {
     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);
   }
   // setup functions
 
@@ -52093,6 +52103,7 @@ class Display {
    * @param {boolean} flag - whether to show or hide the CAD tools
    */
   showTools = (flag) => {
+    this.tools = flag;
     var tb = this._getElement("tcv_cad_toolbar");
     var cn = this._getElement("tcv_cad_navigation");
     for (var el of [cn, tb]) {
@@ -52132,6 +52143,7 @@ class Display {
    */
   reset = () => {
     this.viewer.reset();
+    this.clearHighlights();
   };
 
   /**
@@ -52271,35 +52283,28 @@ class Display {
   }
 
   /**
-   * Collapse all nodes with one leaf only
-   * @function
-   * @param {Event} e - a DOM click event
-   */
-  // eslint-disable-next-line no-unused-vars
-  collapseNodes1 = (e) => {
-    this.viewer.treeview.expandNodes(2);
-    this.viewer.treeview.collapseNodes(1);
-  };
-
-  /**
-   * Collapse all nodes
+   * Collapse nodes handler
    * @function
    * @param {Event} e - a DOM click event
    */
-  // eslint-disable-next-line no-unused-vars
-  collapseNodes = (e) => {
-    this.viewer.treeview.collapseNodes(2);
+  handleCollapseNodes = (e) => {
+    this.collapseNodes(e.target.value);
   };
 
   /**
-   * Expand all nodes
-   * @function
-   * @param {Event} e - a DOM click event
+   * Collapse nodes handler
+   * @param {string} value - 1: collapse all leaf nodes, 2: collapse all nodes, "E": expand all nodes
    */
-  // eslint-disable-next-line no-unused-vars
-  expandNodes = (e) => {
-    this.viewer.treeview.expandNodes(2);
-  };
+  collapseNodes(value) {
+    if (value === "1") {
+      this.viewer.treeview.expandNodes();
+      this.viewer.treeview.collapseNodes(1);
+    } else if (value === "C") {
+      this.viewer.treeview.collapseNodes(2);
+    } else if (value === "E") {
+      this.viewer.treeview.expandNodes();
+    }
+  }
 
   /**
    * Set minimum and maximum of the sliders
@@ -52398,8 +52403,6 @@ class Display {
    * @param {boolean} flag - whether to show or hide info dialog
    */
   showInfo = (flag) => {
-    console.log(flag);
-    console.log(this.cadInfo);
     this.cadInfo.parentNode.parentNode.style.display = flag ? "block" : "none";
     this._getElement("tcv_toggle_info").value = flag ? "\u25B2 i" : "\u25BC i";
     this.info_shown = flag;
@@ -52429,9 +52432,6 @@ class Display {
       this._getElement("tcv_cad_info").classList.add("tcv_cad_info_glass");
       this._getElement("tcv_cad_view").classList.add("tcv_cad_view_glass");
 
-      this._getElement("tcv_cad_toolbar").style.width = px(this.cadWidth);
-      this._getElement("tcv_cad_body").style.width = px(this.cadWidth);
-
       this._getElement("tcv_toggle_info_wrapper").style.display = "block";
 
       this.showInfo(false);
@@ -52445,18 +52445,19 @@ class Display {
       this._getElement("tcv_cad_info").classList.remove("tcv_cad_info_glass");
       this._getElement("tcv_cad_view").classList.remove("tcv_cad_view_glass");
 
-      this._getElement("tcv_cad_toolbar").style.width = px(
-        this.cadWidth + this.treeWidth,
-      );
-      this._getElement("tcv_cad_body").style.width = px(
-        this.cadWidth + this.treeWidth + 4,
-      );
-
       this._getElement("tcv_toggle_info_wrapper").style.display = "none";
 
       this.showInfo(true);
       this._glassMode = false;
     }
+    const options = {
+      cadWidth: this.cadWidth,
+      glass: this._glassMode,
+      height: this.height,
+      tools: this.tools,
+      treeWidth: (flag) ? 0 : this.treeWidth    
+    };
+    this.setSizes(options);
   }
 }
 
@@ -54760,7 +54761,7 @@ class TreeView {
     var icon_id = 0;
     var img_button;
 
-    var li = tag("li");
+    var li = tag("li", [`node${model.id.replaceAll(" ", "_")}`]);
     var lbl = tag("span", ["tcv_tree_label"]);
     lbl.innerHTML = model.name;
     var entry = tag("span", ["tcv_node_entry"], { id: model.id });
@@ -54844,9 +54845,29 @@ class TreeView {
     }
   }
 
-  render() {
+  render(collapse) {
+    // before the nodes can be collapsed, the DOM element needs to be rendered and added to the container
     this.container = tag("ul", ["tcv_toplevel"]);
-    this.container.appendChild(this.toHtml(this.treeModel));
+
+    // eslint-disable-next-line no-unused-vars
+    var observer = new MutationObserver((_mutuations) => {
+      if (this.container.contains(tree)) {
+        if (collapse > 0 && collapse < 3) {
+          this.collapseNodes(collapse);
+        }
+        observer.disconnect();
+      }
+    });
+
+    observer.observe(this.container, {
+      attributes: false,
+      childList: true,
+      characterData: false,
+      subtree: false,
+    });
+
+    const tree = this.toHtml(this.treeModel);
+    this.container.appendChild(tree);
 
     for (var icon_id in this.icons) {
       this.updateNodes(this.treeModel, icon_id);
@@ -54858,6 +54879,7 @@ class TreeView {
         this.toggleTreeNode(e.target.parentElement.parentElement, null);
       });
     }
+
     return this.container;
   }
 
@@ -54923,8 +54945,12 @@ class TreeView {
             obj.children[0].type === "leaf") ||
           mode == 2
         ) {
-          var el = document.getElementById(obj.id).parentElement.parentElement;
-          this.toggleTreeNode(el, collapse);
+          var el = this.container.getElementsByClassName(
+            `node${obj.id.replaceAll(" ", "_")}`,
+          )[0];
+          if (el != null) {
+            this.toggleTreeNode(el, collapse);
+          }
         }
         for (var o of obj.children) {
           walk(o);
@@ -54938,8 +54964,8 @@ class TreeView {
     this._toggleNodes(mode, true);
   }
 
-  expandNodes(mode) {
-    this._toggleNodes(mode, false);
+  expandNodes() {
+    this._toggleNodes(2, false);
   }
 
   getIcon(icon_id, state) {
@@ -55282,6 +55308,10 @@ class Animation {
     };
   }
 
+  cleanBackup() {
+    this._backup = [];
+  }
+
   hasTracks() {
     return this.tracks != null && this.tracks.length > 0;
   }
@@ -57361,13 +57391,15 @@ class Viewer {
     this.setDisplayDefaults(options);
     this.theme = options.theme;
 
-    this.display = new Display(container, options);
-    this.display.setSizes({
+    this.display = new Display(container, {
+      theme: this.theme,
       cadWidth: this.cadWidth,
-      height: this.height,
       treeWidth: this.treeWidth,
+      height: this.height,
+      pinning: this.pinning,
+      glass: this.glass,
+      tools: this.tools,
     });
-    this.display.glassMode(options.glass);
 
     window.THREE = THREE;
 
@@ -57436,6 +57468,7 @@ class Viewer {
     this.height = 600;
     this.pinning = false;
     this.glass = false;
+    this.tools = true;
 
     for (var option in options) {
       if (this[option] == null) {
@@ -57895,6 +57928,8 @@ class Viewer {
   render(group, tree, states, options) {
     this.setViewerDefaults(options);
 
+    this.animation.cleanBackup();
+
     const timer = new Timer("viewer", this.timeit);
 
     this.states = states;
@@ -58093,12 +58128,7 @@ class Viewer {
       theme,
     );
 
-    this.display.addCadTree(this.treeview.render());
-
-    if ([1, 2].includes(options.collapse)) {
-      this.treeview.collapseNodes(options.collapse);
-    }
-
+    this.display.addCadTree(this.treeview.render(options.collapse));
     this.display.selectTabByName("tree");
 
     timer.split("scene done");
@@ -58113,9 +58143,13 @@ class Viewer {
       this.ortho,
       this.transparent,
       this.blackEdges,
-      this.tools,
     );
 
+    if (this.cadWidth < 600 && this.display._glassMode) {
+      console.info("Small view, collapsing tree");
+      this.display.collapseNodes("C");
+    }
+
     //
     // show the rendering
     //
@@ -59106,6 +59140,25 @@ class Viewer {
     }
     this.initAnimation(duration, speed, "E", false);
   }
+
+  trimUI(tags, flag) {
+    var display = flag ? "inline-block" : "none";
+    for (var tag of tags) {
+      var el;
+      if (["axes", "axes0", "grid", "ortho", "more", "help"].includes(tag)) {
+        if (tag != "more") {
+          el = this.display._getElement(`tcv_${tag}`);
+          el.style.display = display;
+          if (tag !== "help") {
+            el.nextElementSibling.style.display = display;
+          }
+        } else {
+          el = this.display._getElement(`tcv_${tag}-dropdown`);
+          el.style.display = display;
+        }
+      }
+    }
+  }
 }
 
 export { Display, Timer, Viewer };