@xeokit/xeokit-sdk 2.5.2-beta-13 → 2.5.2-beta-16

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

@@ -1,179 +0,0 @@
-/** @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';
-
-        this._visible = true;
-        this._culled = false;
-
-        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);
-
-        dotClickable.addEventListener('click', (event) => {
-            parentElement.dispatchEvent(new MouseEvent('mouseover', event));
-        });
-
-        if (cfg.onMouseOver) {
-            dotClickable.addEventListener('mouseover', (event) => {
-                cfg.onMouseOver(event, this);
-                parentElement.dispatchEvent(new MouseEvent('mouseover', event));
-            });
-        }
-
-        if (cfg.onMouseLeave) {
-            dotClickable.addEventListener('mouseleave', (event) => {
-                cfg.onMouseLeave(event, this);
-            });
-        }
-
-        if (cfg.onMouseWheel) {
-            dotClickable.addEventListener('wheel', (event) => {
-                cfg.onMouseWheel(event, this);
-            });
-        }
-
-        if (cfg.onMouseDown) {
-            dotClickable.addEventListener('mousedown', (event) => {
-                cfg.onMouseDown(event, this);
-            });
-        }
-
-        if (cfg.onMouseUp) {
-            dotClickable.addEventListener('mouseup', (event) => {
-                cfg.onMouseUp(event, this);
-            });
-        }
-
-        if (cfg.onMouseMove) {
-            dotClickable.addEventListener('mousemove', (event) => {
-                cfg.onMouseMove(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 && !this._culled ? "visible" : "hidden";
-    }
-
-    setCulled(culled) {
-        if (this._culled === culled) {
-            return;
-        }
-        this._culled = !!culled;
-        this._dot.style.visibility = this._visible && !this._culled ? "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/src/plugins/lib/html/Label.js

@@ -1,174 +0,0 @@
-/** @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.onMouseDown) {
-            label.addEventListener('mousedown', (event) => {
-                cfg.onMouseDown(event, this);
-            });
-        }
-
-        if (cfg.onMouseUp) {
-            label.addEventListener('mouseup', (event) => {
-                cfg.onMouseUp(event, this);
-            });
-        }
-
-        if (cfg.onMouseMove) {
-            label.addEventListener('mousemove', (event) => {
-                cfg.onMouseMove(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/src/plugins/lib/html/Wire.js

@@ -1,220 +0,0 @@
-/** @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;
-
-        this._visible = true;
-        this._culled = false;
-
-        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.onMouseDown) {
-            wireClickable.addEventListener('mousedown', (event) => {
-                cfg.onMouseDown(event, this);
-            });
-        }
-
-        if (cfg.onMouseUp) {
-            wireClickable.addEventListener('mouseup', (event) => {
-                cfg.onMouseUp(event, this);
-            });
-        }
-
-        if (cfg.onMouseMove) {
-            wireClickable.addEventListener('mousemove', (event) => {
-                cfg.onMouseMove(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) {
-        if (this._visible === visible) {
-            return;
-        }
-        this._visible = !!visible;
-        this._wire.style.visibility = this._visible && !this._culled ? "visible" : "hidden";
-    }
-
-    setCulled(culled) {
-        if (this._culled === culled) {
-            return;
-        }
-        this._culled = !!culled;
-        this._wire.style.visibility = this._visible && !this._culled ? "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/src/viewer/Configs.js

@@ -1,127 +0,0 @@
-import {math} from "./scene/math/math.js";
-
-let maxDataTextureHeight = 1 << 16;
-let maxGeometryBatchSize = 5000000
-
-/**
- * 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"
- * });
- * ````
- */
-export 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();
-    }
-
-    /**
-     * Sets the maximum data texture height.
-     *
-     * Should be a multiple of 1024. Default is 4096, which is the maximum allowed value.
-     */
-    set maxDataTextureHeight(value) {
-        value = Math.ceil(value / 1024) * 1024;
-        if (value > 4096) {
-            value = 4096;
-        } else if (value < 1024) {
-            value = 1024;
-        }
-        maxDataTextureHeight = value;
-    }
-
-    /**
-     * Sets maximum data texture height.
-     * @returns {*|number}
-     */
-    get maxDataTextureHeight() {
-        return maxDataTextureHeight;
-    }
-
-    /**
-     * Sets the maximum batched geometry VBO size.
-     *
-     * Default value is 5000000, which is the maximum size.
-     *
-     * Minimum size is 100000.
-     */
-    set maxGeometryBatchSize(value) {
-        if (value < 100000) {
-            value = 100000;
-        } else if (value > 5000000) {
-            value = 5000000;
-        }
-        maxGeometryBatchSize = value;
-    }
-
-    /**
-     * Gets the maximum batched geometry VBO size.
-     */
-    get maxGeometryBatchSize() {
-        return maxGeometryBatchSize;
-    }
-}
-