three-cad-viewer 1.5.5 → 1.5.8

package/Readme.md

@@ -117,3 +117,14 @@ 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

package/dist/three-cad-viewer.css

@@ -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

@@ -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

@@ -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,11 +51658,14 @@ class Display {
     }
 
     this.viewer = null;
-    this._glassMode = false;
-    this._events = [];
+    this.glass = options.glass;
+    this.tools = options.tools;
     this.cadWidth = options.cadWidth;
     this.height = options.height;
     this.treeWidth = options.treeWidth;
+
+    this._events = [];
+
     this.setSizes(options);
 
     this.activeTab = "tree";
@@ -51754,14 +51759,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 +51821,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 = !this._glassMode;
+    this.info_shown = !this.glass;
 
     const tabs = ["tcv_tab_tree", "tcv_tab_clip"];
     tabs.forEach((name) => {
@@ -51868,17 +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/hide all tools.
+   * @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, tools) {
+  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
 
@@ -52093,6 +52107,11 @@ class Display {
    * @param {boolean} flag - whether to show or hide the CAD tools
    */
   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]) {
@@ -52272,35 +52291,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
@@ -52412,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
@@ -52428,13 +52452,11 @@ 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);
-      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;
@@ -52444,18 +52466,23 @@ 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;
+      this.glass = false;
     }
+    if (this.viewer) {
+      // not available at first call
+      this.viewer.glass = false;
+    }
+    const options = {
+      cadWidth: this.cadWidth,
+      glass: this.glass,
+      height: this.height,
+      tools: this.tools,
+      treeWidth: flag ? 0 : this.treeWidth,
+    };
+    this.setSizes(options);
   }
 }
 
@@ -54962,8 +54989,8 @@ class TreeView {
     this._toggleNodes(mode, true);
   }
 
-  expandNodes(mode) {
-    this._toggleNodes(mode, false);
+  expandNodes() {
+    this._toggleNodes(2, false);
   }
 
   getIcon(icon_id, state) {
@@ -57387,15 +57414,16 @@ class Viewer {
     this.hasAnimationLoop = false;
 
     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;
 
@@ -57464,6 +57492,7 @@ class Viewer {
     this.height = 600;
     this.pinning = false;
     this.glass = false;
+    this.tools = true;
 
     for (var option in options) {
       if (this[option] == null) {
@@ -57516,16 +57545,18 @@ 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;
+    if (this.cadWidth >= this.height) {
+      this.zoom0 = (4 / 3) * (this.height / this.cadWidth);
+    } else {
+      this.zoom0 = 4 / 3;
+    }
 
     this.panSpeed = 0.5;
     this.rotateSpeed = 1.0;
@@ -57921,6 +57952,7 @@ class Viewer {
    * @param {ViewerOptions} options - the Viewer options
    */
   render(group, tree, states, options) {
+    console.log(options);
     this.setViewerDefaults(options);
 
     this.animation.cleanBackup();
@@ -58139,8 +58171,12 @@ class Viewer {
       this.transparent,
       this.blackEdges,
       this.tools,
+      this.glass,
     );
 
+    this.display.autoCollapse();
+    this.resize();
+
     //
     // show the rendering
     //
@@ -59073,6 +59109,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();
 
@@ -59131,6 +59174,57 @@ 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) {
+      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;
+        }
+      }
+    }
+  }
+
+  //
+  // 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 };

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

@@ -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;