@xeokit/xeokit-sdk 2.4.0-alpha-81 → 2.4.0-alpha-83

package/src/plugins/lib/html/Dot.js

@@ -0,0 +1,145 @@
+/** @private */
+class Dot {
+
+    constructor(parentElement, cfg = {}) {
+
+        this._highlightClass = "viewer-ruler-dot-highlighted";
+
+        this._x = 0;
+        this._y = 0;
+
+        this._visible = true;
+        this._dot = document.createElement('div');
+        this._dot.className += this._dot.className ? ' viewer-ruler-dot' : 'viewer-ruler-dot';
+
+        this._dotClickable = document.createElement('div');
+        this._dotClickable.className += this._dotClickable.className ? ' viewer-ruler-dot-clickable' : 'viewer-ruler-dot-clickable';
+
+        var dot = this._dot;
+        var dotStyle = dot.style;
+        dotStyle["border-radius"] = 25 + "px";
+        dotStyle.border = "solid 2px white";
+        dotStyle.background = "lightgreen";
+        dotStyle.position = "absolute";
+        dotStyle["z-index"] = cfg.zIndex === undefined ? "40000005" : cfg.zIndex ;
+        dotStyle.width = 8 + "px";
+        dotStyle.height = 8 + "px";
+        dotStyle.visibility = cfg.visible !== false ? "visible" : "hidden";
+        dotStyle.top = 0 + "px";
+        dotStyle.left = 0 + "px";
+        dotStyle["box-shadow"] = "0 2px 5px 0 #182A3D;";
+        dotStyle["opacity"] = 1.0;
+        dotStyle["pointer-events"] = "none";
+        if (cfg.onContextMenu) {
+          //  dotStyle["cursor"] = "context-menu";
+        }
+        parentElement.appendChild(dot);
+
+        var dotClickable = this._dotClickable;
+        var dotClickableStyle = dotClickable.style;
+        dotClickableStyle["border-radius"] = 35 + "px";
+        dotClickableStyle.border = "solid 10px white";
+        dotClickableStyle.position = "absolute";
+        dotClickableStyle["z-index"] = cfg.zIndex === undefined ? "40000007" : (cfg.zIndex + 1);
+        dotClickableStyle.width = 8 + "px";
+        dotClickableStyle.height = 8 + "px";
+        dotClickableStyle.visibility = "visible";
+        dotClickableStyle.top = 0 + "px";
+        dotClickableStyle.left = 0 + "px";
+        dotClickableStyle["opacity"] = 0.0;
+        dotClickableStyle["pointer-events"] = "none";
+        if (cfg.onContextMenu) {
+          //  dotClickableStyle["cursor"] = "context-menu";
+        }
+        parentElement.appendChild(dotClickable);
+
+        if (cfg.onMouseOver) {
+            dotClickable.addEventListener('mouseover', (event) => {
+                cfg.onMouseOver(event, this);
+            });
+        }
+
+        if (cfg.onMouseLeave) {
+            dotClickable.addEventListener('mouseleave', (event) => {
+                cfg.onMouseLeave(event, this);
+            });
+        }
+
+        if (cfg.onMouseWheel) {
+            dotClickable.addEventListener('wheel', (event) => {
+                cfg.onMouseWheel(event, this);
+            });
+        }
+
+        if (cfg.onContextMenu) {
+            dotClickable.addEventListener('contextmenu', (event) => {
+                cfg.onContextMenu(event, this);
+                event.preventDefault();
+            });
+        }
+        
+        this.setPos(cfg.x || 0, cfg.y || 0);
+        this.setFillColor(cfg.fillColor);
+        this.setBorderColor(cfg.borderColor);
+    }
+
+    setPos(x, y) {
+        this._x = x;
+        this._y = y;
+        var dotStyle = this._dot.style;
+        dotStyle["left"] = (Math.round(x) - 4) + 'px';
+        dotStyle["top"] = (Math.round(y) - 4) + 'px';
+
+        var dotClickableStyle = this._dotClickable.style;
+        dotClickableStyle["left"] = (Math.round(x) - 9) + 'px';
+        dotClickableStyle["top"] = (Math.round(y) - 9) + 'px';
+    }
+
+    setFillColor(color) {
+        this._dot.style.background = color || "lightgreen";
+    }
+
+    setBorderColor(color) {
+        this._dot.style.border = "solid 2px" + (color || "black");
+    }
+
+    setOpacity(opacity) {
+        this._dot.style.opacity = opacity;
+    }
+
+    setVisible(visible) {
+        if (this._visible === visible) {
+            return;
+        }
+        this._visible = !!visible;
+        this._dot.style.visibility = this._visible ? "visible" : "hidden";
+    }
+
+    setClickable(clickable) {
+        this._dotClickable.style["pointer-events"] = (!!clickable) ? "all" : "none";
+    }
+
+    setHighlighted(highlighted) {
+        if (this._highlighted === highlighted) {
+            return;
+        }
+        this._highlighted = !!highlighted;
+        if (this._highlighted) {
+            this._dot.classList.add(this._highlightClass);
+        } else {
+            this._dot.classList.remove(this._highlightClass);
+        }
+    }
+    
+    destroy() {
+        this.setVisible(false);
+        if (this._dot.parentElement) {
+            this._dot.parentElement.removeChild(this._dot);
+        }
+        if (this._dotClickable.parentElement) {
+            this._dotClickable.parentElement.removeChild(this._dotClickable);
+        }
+    }
+}
+
+export {Dot};

package/src/plugins/lib/html/Label.js

@@ -0,0 +1,156 @@
+/** @private */
+class Label {
+
+    constructor(parentElement, cfg = {}) {
+
+        this._highlightClass = "viewer-ruler-label-highlighted";
+
+        this._prefix = cfg.prefix || "";
+        this._x = 0;
+        this._y = 0;
+        this._visible = true;
+        this._culled = false;
+
+        this._label = document.createElement('div');
+        this._label.className += this._label.className ? ' viewer-ruler-label' : 'viewer-ruler-label';
+
+        var label = this._label;
+        var style = label.style;
+
+        style["border-radius"] = 5 + "px";
+        style.color = "white";
+        style.padding = "4px";
+        style.border = "solid 1px";
+        style.background = "lightgreen";
+        style.position = "absolute";
+        style["z-index"] = cfg.zIndex === undefined ? "5000005" : cfg.zIndex;
+        style.width = "auto";
+        style.height = "auto";
+        style.visibility = "visible";
+        style.top = 0 + "px";
+        style.left = 0 + "px";
+        style["pointer-events"] = "all";
+        style["opacity"] = 1.0;
+        if (cfg.onContextMenu) {
+            //  style["cursor"] = "context-menu";
+        }
+        label.innerText = "";
+
+        parentElement.appendChild(label);
+
+        this.setPos(cfg.x || 0, cfg.y || 0);
+        this.setFillColor(cfg.fillColor);
+        this.setBorderColor(cfg.fillColor);
+        this.setText(cfg.text);
+
+        if (cfg.onMouseOver) {
+            label.addEventListener('mouseover', (event) => {
+                cfg.onMouseOver(event, this);
+                event.preventDefault();
+            });
+        }
+
+        if (cfg.onMouseLeave) {
+            label.addEventListener('mouseleave', (event) => {
+                cfg.onMouseLeave(event, this);
+                event.preventDefault();
+            });
+        }
+
+        if (cfg.onMouseWheel) {
+            label.addEventListener('wheel', (event) => {
+                cfg.onMouseWheel(event, this);
+            });
+        }
+
+        if (cfg.onContextMenu) {
+            label.addEventListener('contextmenu', (event) => {
+                cfg.onContextMenu(event, this);
+                event.preventDefault();
+            });
+        }
+    }
+
+    setPos(x, y) {
+        this._x = x;
+        this._y = y;
+        var style = this._label.style;
+        style["left"] = (Math.round(x) - 20) + 'px';
+        style["top"] = (Math.round(y) - 12) + 'px';
+    }
+
+    setPosOnWire(x1, y1, x2, y2) {
+        var x = x1 + ((x2 - x1) * 0.5);
+        var y = y1 + ((y2 - y1) * 0.5);
+        var style = this._label.style;
+        style["left"] = (Math.round(x) - 20) + 'px';
+        style["top"] = (Math.round(y) - 12) + 'px';
+    }
+
+    setPosBetweenWires(x1, y1, x2, y2, x3, y3) {
+        var x = (x1 + x2 + x3) / 3;
+        var y = (y1 + y2 + y3) / 3;
+        var style = this._label.style;
+        style["left"] = (Math.round(x) - 20) + 'px';
+        style["top"] = (Math.round(y) - 12) + 'px';
+    }
+
+    setText(text) {
+        this._label.innerHTML = this._prefix + (text || "");
+    }
+
+    setFillColor(color) {
+        this._fillColor = color || "lightgreen";
+        this._label.style.background =this._fillColor;
+    }
+
+    setBorderColor(color) {
+        this._borderColor = color || "black";
+        this._label.style.border = "solid 1px " + this._borderColor;
+    }
+
+    setOpacity(opacity) {
+        this._label.style.opacity = opacity;
+    }
+
+    setVisible(visible) {
+        if (this._visible === visible) {
+            return;
+        }
+        this._visible = !!visible;
+        this._label.style.visibility = this._visible && !this._culled ? "visible" : "hidden";
+    }
+
+    setCulled(culled) {
+        if (this._culled === culled) {
+            return;
+        }
+        this._culled = !!culled;
+        this._label.style.visibility = this._visible && !this._culled ? "visible" : "hidden";
+    }
+
+    setHighlighted(highlighted) {
+        if (this._highlighted === highlighted) {
+            return;
+        }
+        this._highlighted = !!highlighted;
+        if (this._highlighted) {
+            this._label.classList.add(this._highlightClass);
+        } else {
+            this._label.classList.remove(this._highlightClass);
+        }
+    }
+
+    setClickable(clickable) {
+        this._label.style["pointer-events"] = (!!clickable) ? "all" : "none";
+    }
+
+    destroy() {
+        if (this._label.parentElement) {
+            this._label.parentElement.removeChild(this._label);
+        }
+    }
+}
+
+export {Label};
+

package/src/plugins/lib/html/Wire.js

@@ -0,0 +1,191 @@
+/** @private */
+class Wire {
+
+    constructor(parentElement, cfg = {}) {
+
+        this._color = cfg.color || "black";
+        this._highlightClass = "viewer-ruler-wire-highlighted";
+
+        this._wire = document.createElement('div');
+        this._wire.className += this._wire.className ? ' viewer-ruler-wire' : 'viewer-ruler-wire';
+
+        this._wireClickable = document.createElement('div');
+        this._wireClickable.className += this._wireClickable.className ? ' viewer-ruler-wire-clickable' : 'viewer-ruler-wire-clickable';
+
+        this._thickness = cfg.thickness || 1.0;
+        this._thicknessClickable = cfg.thicknessClickable || 6.0;
+
+        var wire = this._wire;
+        var wireStyle = wire.style;
+
+        wireStyle.border = "solid " + this._thickness + "px " + this._color
+        wireStyle.position = "absolute";
+        wireStyle["z-index"] = cfg.zIndex === undefined ? "2000001" : cfg.zIndex;
+        wireStyle.width = 0 + "px";
+        wireStyle.height = 0 + "px";
+        wireStyle.visibility = "visible";
+        wireStyle.top = 0 + "px";
+        wireStyle.left = 0 + "px";
+        wireStyle['-webkit-transform-origin'] = "0 0";
+        wireStyle['-moz-transform-origin'] = "0 0";
+        wireStyle['-ms-transform-origin'] = "0 0";
+        wireStyle['-o-transform-origin'] = "0 0";
+        wireStyle['transform-origin'] = "0 0";
+        wireStyle['-webkit-transform'] = 'rotate(0deg)';
+        wireStyle['-moz-transform'] = 'rotate(0deg)';
+        wireStyle['-ms-transform'] = 'rotate(0deg)';
+        wireStyle['-o-transform'] = 'rotate(0deg)';
+        wireStyle['transform'] = 'rotate(0deg)';
+        wireStyle["opacity"] = 1.0;
+        wireStyle["pointer-events"] = "none";
+        if (cfg.onContextMenu) {
+         //   wireStyle["cursor"] = "context-menu";
+        }
+
+        parentElement.appendChild(wire);
+
+        var wireClickable = this._wireClickable;
+        var wireClickableStyle = wireClickable.style;
+
+        wireClickableStyle.border = "solid " + this._thicknessClickable + "px " + this._color;
+        wireClickableStyle.position = "absolute";
+        wireClickableStyle["z-index"] = cfg.zIndex === undefined ? "2000002" : (cfg.zIndex + 1);
+        wireClickableStyle.width = 0 + "px";
+        wireClickableStyle.height = 0 + "px";
+        wireClickableStyle.visibility = "visible";
+        wireClickableStyle.top = 0 + "px";
+        wireClickableStyle.left = 0 + "px";
+        // wireClickableStyle["pointer-events"] = "none";
+        wireClickableStyle['-webkit-transform-origin'] = "0 0";
+        wireClickableStyle['-moz-transform-origin'] = "0 0";
+        wireClickableStyle['-ms-transform-origin'] = "0 0";
+        wireClickableStyle['-o-transform-origin'] = "0 0";
+        wireClickableStyle['transform-origin'] = "0 0";
+        wireClickableStyle['-webkit-transform'] = 'rotate(0deg)';
+        wireClickableStyle['-moz-transform'] = 'rotate(0deg)';
+        wireClickableStyle['-ms-transform'] = 'rotate(0deg)';
+        wireClickableStyle['-o-transform'] = 'rotate(0deg)';
+        wireClickableStyle['transform'] = 'rotate(0deg)';
+        wireClickableStyle["opacity"] = 0.0;
+        wireClickableStyle["pointer-events"] = "none";
+        if (cfg.onContextMenu) {
+            //wireClickableStyle["cursor"] = "context-menu";
+        }
+
+        parentElement.appendChild(wireClickable);
+
+        if (cfg.onMouseOver) {
+            wireClickable.addEventListener('mouseover', (event) => {
+                cfg.onMouseOver(event, this);
+            });
+        }
+
+        if (cfg.onMouseLeave) {
+            wireClickable.addEventListener('mouseleave', (event) => {
+                cfg.onMouseLeave(event, this);
+            });
+        }
+
+        if (cfg.onMouseWheel) {
+            wireClickable.addEventListener('wheel', (event) => {
+                cfg.onMouseWheel(event, this);
+            });
+        }
+
+        if (cfg.onContextMenu) {
+            wireClickable.addEventListener('contextmenu', (event) => {
+                cfg.onContextMenu(event, this);
+                event.preventDefault();
+            });
+        }
+
+        this._x1 = 0;
+        this._y1 = 0;
+        this._x2 = 0;
+        this._y2 = 0;
+
+        this._update();
+    }
+
+    get _visible() {
+        return this._wire.style.visibility === "visible";
+    }
+
+    _update() {
+
+        var length = Math.abs(Math.sqrt((this._x1 - this._x2) * (this._x1 - this._x2) + (this._y1 - this._y2) * (this._y1 - this._y2)));
+        var angle = Math.atan2(this._y2 - this._y1, this._x2 - this._x1) * 180.0 / Math.PI;
+
+        var wireStyle = this._wire.style;
+        wireStyle["width"] = Math.round(length) + 'px';
+        wireStyle["left"] = Math.round(this._x1) + 'px';
+        wireStyle["top"] = Math.round(this._y1) + 'px';
+        wireStyle['-webkit-transform'] = 'rotate(' + angle + 'deg)';
+        wireStyle['-moz-transform'] = 'rotate(' + angle + 'deg)';
+        wireStyle['-ms-transform'] = 'rotate(' + angle + 'deg)';
+        wireStyle['-o-transform'] = 'rotate(' + angle + 'deg)';
+        wireStyle['transform'] = 'rotate(' + angle + 'deg)';
+
+        var wireClickableStyle = this._wireClickable.style;
+        wireClickableStyle["width"] = Math.round(length) + 'px';
+        wireClickableStyle["left"] = Math.round(this._x1) + 'px';
+        wireClickableStyle["top"] = Math.round(this._y1) + 'px';
+        wireClickableStyle['-webkit-transform'] = 'rotate(' + angle + 'deg)';
+        wireClickableStyle['-moz-transform'] = 'rotate(' + angle + 'deg)';
+        wireClickableStyle['-ms-transform'] = 'rotate(' + angle + 'deg)';
+        wireClickableStyle['-o-transform'] = 'rotate(' + angle + 'deg)';
+        wireClickableStyle['transform'] = 'rotate(' + angle + 'deg)';
+    }
+
+    setStartAndEnd(x1, y1, x2, y2) {
+        this._x1 = x1;
+        this._y1 = y1;
+        this._x2 = x2;
+        this._y2 = y2;
+        this._update();
+    }
+
+    setColor(color) {
+        this._color = color || "black";
+        this._wire.style.border = "solid " + this._thickness + "px " + this._color;
+    }
+
+    setOpacity(opacity) {
+        this._wire.style.opacity = opacity;
+    }
+
+    setVisible(visible) {
+        visible = !!visible;
+        if (this._visible === visible) {
+            return;
+        }
+        this._wire.style.visibility = visible ? "visible" : "hidden";
+    }
+
+    setClickable(clickable) {
+        this._wireClickable.style["pointer-events"] = (!!clickable) ? "all" : "none";
+    }
+
+    setHighlighted(highlighted) {
+        if (this._highlighted === highlighted) {
+            return;
+        }
+        this._highlighted = !!highlighted;
+        if (this._highlighted) {
+            this._wire.classList.add(this._highlightClass);
+        } else {
+            this._wire.classList.remove(this._highlightClass);
+        }
+    }
+
+    destroy(visible) {
+        if (this._wire.parentElement) {
+            this._wire.parentElement.removeChild(this._wire);
+        }
+        if (this._wireClickable.parentElement) {
+            this._wireClickable.parentElement.removeChild(this._wireClickable);
+        }
+    }
+}
+
+export {Wire};

package/src/viewer/Configs.js

@@ -0,0 +1,79 @@
+import {math} from "./scene/math/math.js";
+
+/**
+ * Manages global configurations for all {@link Viewer}s.
+ *
+ * ## Example
+ *
+ * In the example below, we'll disable xeokit's double-precision support, which gives a performance and memory boost
+ * on low-power devices, but also means that we can no longer render double-precision models without jittering.
+ *
+ * That's OK if we know that we're not going to view models that are geographically vast, or offset far from the World coordinate origin.
+ *
+ * [[Run this example](/examples/#Configs_disableDoublePrecisionAndRAF)]
+ *
+ * ````javascript
+ * import {Configs, Viewer, XKTLoaderPlugin} from "https://cdn.jsdelivr.net/npm/@xeokit/xeokit-sdk/dist/xeokit-sdk.es.min.js";
+ *
+ * // Access xeoit-sdk global configs.
+ * // We typically set configs only before we create any Viewers.
+ * const configs = new Configs();
+ *
+ * // Disable 64-bit precision for extra speed.
+ * // Only set this config once, before you create any Viewers.
+ * configs.doublePrecisionEnabled = false;
+ *
+ * // Create a Viewer, to which our configs apply
+ * const viewer = new Viewer({
+ *      canvasId: "myCanvas"
+ *  });
+ *
+ * viewer.camera.eye = [-3.933, 2.855, 27.018];
+ * viewer.camera.look = [4.400, 3.724, 8.899];
+ * viewer.camera.up = [-0.018, 0.999, 0.039];
+ *
+ * const xktLoader = new XKTLoaderPlugin(viewer);
+ *
+ * const model = xktLoader.load({
+ *     src: "../assets/models/xkt/v8/ifc/Duplex.ifc.xkt"
+ * });
+ * ````
+ */
+class Configs {
+
+    /**
+     * Creates a Configs.
+     */
+    constructor() {
+
+    }
+
+    /**
+     * Sets whether double precision mode is enabled for Viewers.
+     *
+     * When double precision mode is enabled (default), Viewers will accurately render models that contain
+     * double-precision coordinates, without jittering.
+     *
+     * Internally, double precision incurs extra performance and memory overhead, so if we're certain that
+     * we're not going to render models that rely on double-precision coordinates, then it's a good idea to disable
+     * it, especially on low-power devices.
+     *
+     * This should only be set once, before creating any Viewers.
+     *
+     * @returns {Boolean}
+     */
+    set doublePrecisionEnabled(doublePrecision) {
+        math.setDoublePrecisionEnabled(doublePrecision);
+    }
+
+    /**
+     * Gets whether double precision mode is enabled for all Viewers.
+     *
+     * @returns {Boolean}
+     */
+    get doublePrecisionEnabled() {
+        return math.getDoublePrecisionEnabled();
+    }
+}
+
+export {Configs};