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

package/src/src/extras/PointerLens/PointerLens.js

@@ -0,0 +1,312 @@
+/**
+ * A PointerLens shows a magnified view of a {@link Viewer}'s canvas, centered at the position of the
+ * mouse or touch pointer.
+ *
+ * This component is used by {@link DistanceMeasurementsControl} and {@link AngleMeasurementsControl}
+ * to help position the pointer when snap-to-vertex or snap-toedge is enabled.
+ *
+ * [[Run example](https://xeokit.github.io/xeokit-sdk/examples/measurements/#distance_modelWithMeasurements)]
+ *
+ * ````JavaScript
+ *
+ *  import {Viewer, XKTLoaderPlugin, AngleMeasurementsPlugin, AngleMeasurementsMouseControl, PointerLens} from "../../dist/xeokit-sdk.es.js";
+ *
+ *  const viewer = new Viewer({
+ *      canvasId: "myCanvas",
+ *      dtxEnabled: true
+ *  });
+ *
+ *  viewer.camera.eye = [-3.93, 2.85, 27.01];
+ *  viewer.camera.look = [4.40, 3.72, 8.89];
+ *  viewer.camera.up = [-0.01, 0.99, 0.039];
+ *
+ *  const xktLoader = new XKTLoaderPlugin(viewer);
+ *
+ *  const sceneModel = xktLoader.load({
+ *      id: "myModel",
+ *      src: "../../assets/models/xkt/v10/glTF-Embedded/Duplex_A_20110505.glTFEmbedded.xkt",
+ *      edges: true
+ *  });
+ *
+ *  const angleMeasurements = new AngleMeasurementsPlugin(viewer);
+ *
+ *  const angleMeasurementsMouseControl  = new AngleMeasurementsMouseControl(angleMeasurements, {
+ *      pointerLens : new PointerLens(viewer, {
+ *          zoomFactor: 2
+ *      })
+ *  })
+ *
+ *  angleMeasurementsMouseControl.activate();
+ * ````
+ */
+export class PointerLens {
+
+    /**
+     * Constructs a new PointerLens.
+     * @param viewer The Viewer
+     * @param [cfg] PointerLens configuration.
+     * @param [cfg.active=true] Whether PointerLens is active. The PointerLens can only be shown when this is `true` (default).
+     */
+    constructor(viewer, cfg={}) {
+
+        this.viewer = viewer;
+        this.scene = this.viewer.scene;
+
+        this._lensCursorDiv = document.createElement('div');
+        this.viewer.scene.canvas.canvas.parentNode.insertBefore(this._lensCursorDiv, this.viewer.scene.canvas.canvas);
+        this._lensCursorDiv.style.background = "pink";
+        this._lensCursorDiv.style.border = "2px solid red";
+        this._lensCursorDiv.style.borderRadius = "20px";
+        this._lensCursorDiv.style.width = "10px";
+        this._lensCursorDiv.style.height = "10px";
+        this._lensCursorDiv.style.margin = "-200px -200px";
+        this._lensCursorDiv.style.zIndex = "100000";
+        this._lensCursorDiv.style.position = "absolute";
+        this._lensCursorDiv.style.pointerEvents = "none";
+
+        this._lensContainer = document.createElement('div');
+        this._lensContainer.style.border = "1px solid black";
+        this._lensContainer.style.background = "white";
+    //    this._lensContainer.style.opacity = "0";
+        this._lensContainer.style.borderRadius = "50%";
+        this._lensContainer.style.width = "300px";
+        this._lensContainer.style.height = "300px";
+        this._lensContainer.style.marginTop = "85px";
+        this._lensContainer.style.marginLeft = "25px";
+        this._lensContainer.style.zIndex = "15000";
+        this._lensContainer.style.position = "absolute";
+        this._lensContainer.style.pointerEvents = "none";
+        this._lensContainer.style.visibility = "hidden";
+
+        this._lensCanvas = document.createElement('canvas');
+        // this._lensCanvas.style.background = "darkblue";
+        this._lensCanvas.style.borderRadius = "50%";
+
+        this._lensCanvas.style.width = "300px";
+        this._lensCanvas.style.height = "300px";
+        this._lensCanvas.style.zIndex = "15000";
+        this._lensCanvas.style.pointerEvents = "none";
+
+        document.body.appendChild(this._lensContainer);
+        this._lensContainer.appendChild(this._lensCanvas);
+
+        this._lensCanvasContext = this._lensCanvas.getContext('2d');
+        this._canvasElement = this.viewer.scene.canvas.canvas;
+
+        this._canvasPos = null;
+        this._snappedCanvasPos = null;
+        this._lensPosToggle = true;
+
+        this._zoomLevel = cfg.zoomLevel || 2;
+
+        this._active = (cfg.active !== false);
+        this._visible = false;
+        this._snapped = false;
+
+        this._onViewerRendering = this.viewer.scene.on("rendering", () => {
+            if (this._active && this._visible) {
+                this.update();
+            }
+        });
+    }
+
+    /**
+     * Updates this PointerLens.
+     */
+    update() {
+        if (!this._active || !this._visible) {
+            return;
+        }
+        if (!this._canvasPos) {
+            return;
+        }
+        const lensRect = this._lensContainer.getBoundingClientRect();
+        const canvasRect = this._canvasElement.getBoundingClientRect();
+        const pointerOnLens =
+            this._canvasPos[0] < lensRect.right && this._canvasPos[0] > lensRect.left &&
+            this._canvasPos[1] < lensRect.bottom && this._canvasPos[1] > lensRect.top;
+        this._lensContainer.style.marginLeft = `25px`;
+        if (pointerOnLens) {
+            if (this._lensPosToggle) {
+                this._lensContainer.style.marginTop = `${canvasRect.bottom - canvasRect.top - this._lensCanvas.height - 85}px`;
+            } else {
+                this._lensContainer.style.marginTop = `85px`;
+            }
+            this._lensPosToggle = !this._lensPosToggle;
+        }
+        this._lensCanvasContext.clearRect(0, 0, this._lensCanvas.width, this._lensCanvas.height);
+        const size = Math.max(this._lensCanvas.width, this._lensCanvas.height) / this._zoomLevel;
+        this._lensCanvasContext.drawImage(
+            this._canvasElement, // source canvas
+            this._canvasPos[0] - size / 2, // source x (zoom center)
+            this._canvasPos[1] - size / 2, // source y (zoom center)
+            size, // source width
+            size, // source height
+            0, // destination x
+            0, // destination y
+            this._lensCanvas.width, // destination width
+            this._lensCanvas.height // destination height
+        );
+
+        const centerLensCanvas = [
+            (lensRect.left + lensRect.right) / 2,
+            (lensRect.top + lensRect.bottom) / 2
+        ];
+
+        if (this._snappedCanvasPos) {
+            const deltaX = this._snappedCanvasPos[0] - this._canvasPos[0];
+            const deltaY = this._snappedCanvasPos[1] - this._canvasPos[1];
+
+            this._lensCursorDiv.style.marginLeft = `${centerLensCanvas[0] + deltaX * this._zoomLevel - 10}px`;
+            this._lensCursorDiv.style.marginTop = `${centerLensCanvas[1] + deltaY * this._zoomLevel - 10}px`;
+        } else {
+            this._lensCursorDiv.style.marginLeft = `${centerLensCanvas[0] - 10}px`;
+            this._lensCursorDiv.style.marginTop = `${centerLensCanvas[1] - 10}px`;
+        }
+    }
+
+
+    /**
+     * Sets the zoom factor for the lens.
+     *
+     * This is `2` by default.
+     *
+     * @param zoomFactor
+     */
+    set zoomFactor(zoomFactor) {
+        this._zoomFactor = zoomFactor;
+        this.update();
+    }
+
+    /**
+     * Gets the zoom factor for the lens.
+     *
+     * This is `2` by default.
+     *
+     * @returns Number
+     */
+    get zoomFactor() {
+        return this._zoomFactor;
+    }
+
+    /**
+     * Sets the canvas central position of the lens.
+     * @param canvasPos
+     */
+    set canvasPos(canvasPos) {
+        this._canvasPos = canvasPos;
+        this.update();
+    }
+
+    /**
+     * Gets the canvas central position of the lens.
+     * @returns {Number[]}
+     */
+    get canvasPos() {
+        return this._canvasPos;
+    }
+
+    /**
+     * Sets the canvas coordinates of the pointer.
+     * @param snappedCanvasPos
+     */
+    set snappedCanvasPos(snappedCanvasPos) {
+        this._snappedCanvasPos = snappedCanvasPos;
+        this.update();
+    }
+
+    /**
+     * Gets the canvas coordinates of the snapped pointer.
+     * @returns {Number[]}
+     */
+    get snappedCanvasPos() {
+        return this._snappedCanvasPos;
+    }
+
+    /**
+     * Sets if the cursor has snapped to anything.
+     * This is set by plugins.
+     * @param snapped
+     * @private
+     */
+    set snapped(snapped) {
+     this._snapped = snapped;
+        if (snapped) {
+            this._lensCursorDiv.style.background = "greenyellow";
+            this._lensCursorDiv.style.border = "2px solid green";
+        } else {
+            this._lensCursorDiv.style.background = "pink";
+            this._lensCursorDiv.style.border = "2px solid red";
+        }
+    }
+
+    /**
+     * Gets  if the cursor has snapped to anything.
+     * This is called by plugins.
+     * @returns {Boolean}
+     * @private
+     */
+    get snapped() {
+        return this._snapped;
+    }
+    
+    /**
+     * Sets if this PointerLens is active.
+     * @param active
+     */
+    set active(active) {
+        this._active = active;
+        this._lensContainer.style.visibility = (active && this._visible) ? "visible" : "hidden";
+        if (!active || !this._visible ) {
+            this._lensCursorDiv.style.marginLeft = `-100px`;
+            this._lensCursorDiv.style.marginTop = `-100px`;
+        }
+        this.update();
+    }
+
+    /**
+     * Gets if this PointerLens is active.
+     * @returns {Boolean}
+     */
+    get active() {
+        return this._active;
+    }
+
+    /**
+     * Sets if this PointerLens is visible.
+     * This is set by plugins.
+     * @param visible
+     * @private
+     */
+    set visible(visible) {
+        this._visible = visible;
+        this._lensContainer.style.visibility = (visible && this._active) ? "visible" : "hidden";
+        if (!visible || !this._active) {
+            this._lensCursorDiv.style.marginLeft = `-100px`;
+            this._lensCursorDiv.style.marginTop = `-100px`;
+        }
+        this.update();
+    }
+
+    /**
+     * Gets if this PointerLens is visible.
+     * This is called by plugins.
+     * @returns {Boolean}
+     * @private
+     */
+    get visible() {
+        return this._visible;
+    }
+
+    /**
+     * Destroys this PointerLens.
+     */
+    destroy() {
+        if (!this._destroyed) {
+            this.viewer.scene.off(this._onViewerRendering);
+            this._lensContainer.removeChild(this._lensCanvas);
+            document.body.removeChild(this._lensContainer);
+            this._destroyed = true;
+        }
+    }
+}

package/src/src/extras/PointerLens/index.js

@@ -0,0 +1 @@
+export * from "./PointerLens.js";

package/src/src/extras/collision/ObjectsKdTree3.js

@@ -0,0 +1,149 @@
+import {math} from "../../viewer/scene/math/math.js";
+
+const MAX_KD_TREE_DEPTH = 15; // Increase if greater precision needed
+const kdTreeDimLength = new Float32Array(3);
+
+/**
+ * Automatically indexes a {@link Viewer}'s {@link Entity}s in a 3D k-d tree
+ * to support fast collision detection with 3D World-space axis-aligned boundaries (AABBs) and frustums.
+ *
+ * See {@link MarqueePicker} for usage example.
+ *
+ * An ObjectsKdTree3 is configured with a Viewer, and will then automatically
+ * keep itself populated with k-d nodes that contain the Viewer's Entitys.
+ *
+ * We can then traverse the k-d nodes, starting at {@link ObjectsKdTree3#root}, to find
+ * the contained Entities.
+ */
+export class ObjectsKdTree3 {
+
+    /**
+     * Creates an ObjectsKdTree3.
+     *
+     * @param {*} cfg Configuration
+     * @param {Viewer} cfg.viewer The Viewer that provides the {@link Entity}s in this ObjectsKdTree3.
+     * @param {number} [cfg.maxTreeDepth=15] Optional maximum depth for the k-d tree.
+     */
+    constructor(cfg) {
+
+        if (!cfg) {
+            throw "Parameter expected: cfg";
+        }
+
+        if (!cfg.viewer) {
+            throw "Parameter expected: cfg.viewer";
+        }
+
+        this.viewer = cfg.viewer;
+
+        this._maxTreeDepth = cfg.maxTreeDepth || MAX_KD_TREE_DEPTH;
+        this._root = null;
+        this._needsRebuild = true;
+
+        this._onModelLoaded = this.viewer.scene.on("modelLoaded", (modelId) => {
+            this._needsRebuild = true;
+        });
+
+        this._onModelUnloaded = this.viewer.scene.on("modelUnloaded", (modelId) => {
+            this._needsRebuild = true;
+        });
+    }
+
+    /**
+     * Gets the root ObjectsKdTree3 node.
+     *
+     * Each time this accessor is accessed, it will lazy-rebuild the ObjectsKdTree3
+     * if {@link Entity}s have been created or removed in the {@link Viewer} since the last time it was accessed.
+     */
+    get root() {
+        if (this._needsRebuild) {
+            this._rebuild();
+        }
+        return this._root;
+    }
+
+    _rebuild() {
+        const viewer = this.viewer;
+        const scene = viewer.scene;
+        const depth = 0;
+        this._root = {
+            aabb: scene.getAABB()
+        };
+        for (let objectId in scene.objects) {
+            const entity = scene.objects[objectId];
+            this._insertEntity(this._root, entity, depth + 1);
+        }
+        this._needsRebuild = false;
+    }
+
+    _insertEntity(node, entity, depth) {
+
+        const entityAABB = entity.aabb;
+
+        if (depth >= this._maxTreeDepth) {
+            node.entities = node.entities || [];
+            node.entities.push(entity);
+            return;
+        }
+        if (node.left) {
+            if (math.containsAABB3(node.left.aabb, entityAABB)) {
+                this._insertEntity(node.left, entity, depth + 1);
+                return;
+            }
+        }
+        if (node.right) {
+            if (math.containsAABB3(node.right.aabb, entityAABB)) {
+                this._insertEntity(node.right, entity, depth + 1);
+                return;
+            }
+        }
+        const nodeAABB = node.aabb;
+        kdTreeDimLength[0] = nodeAABB[3] - nodeAABB[0];
+        kdTreeDimLength[1] = nodeAABB[4] - nodeAABB[1];
+        kdTreeDimLength[2] = nodeAABB[5] - nodeAABB[2];
+        let dim = 0;
+        if (kdTreeDimLength[1] > kdTreeDimLength[dim]) {
+            dim = 1;
+        }
+        if (kdTreeDimLength[2] > kdTreeDimLength[dim]) {
+            dim = 2;
+        }
+        if (!node.left) {
+            const aabbLeft = nodeAABB.slice();
+            aabbLeft[dim + 3] = ((nodeAABB[dim] + nodeAABB[dim + 3]) / 2.0);
+            node.left = {
+                aabb: aabbLeft
+            };
+            if (math.containsAABB3(aabbLeft, entityAABB)) {
+                this._insertEntity(node.left, entity, depth + 1);
+                return;
+            }
+        }
+        if (!node.right) {
+            const aabbRight = nodeAABB.slice();
+            aabbRight[dim] = ((nodeAABB[dim] + nodeAABB[dim + 3]) / 2.0);
+            node.right = {
+                aabb: aabbRight
+            };
+            if (math.containsAABB3(aabbRight, entityAABB)) {
+                this._insertEntity(node.right, entity, depth + 1);
+                return;
+            }
+        }
+        node.entities = node.entities || [];
+        node.entities.push(entity);
+    }
+
+    /**
+     * Destroys this ObjectsKdTree3.
+     *
+     * Does not destroy the {@link Viewer} given to the constructor of the ObjectsKdTree3.
+     */
+    destroy() {
+        const scene = this.viewer.scene;
+        scene.off(this._onModelLoaded);
+        scene.off(this._onModelUnloaded);
+        this._root = null;
+        this._needsRebuild = true;
+    }
+}

package/src/src/extras/collision/index.js

@@ -0,0 +1 @@
+export * from "./ObjectsKdTree3.js";

package/src/src/extras/index.js

@@ -0,0 +1,4 @@
+export * from "./ContextMenu/index.js";
+export * from "./PointerLens/index.js";
+export * from "./collision/index.js";
+export * from "./MarqueePicker/index.js";

package/src/src/index.js

@@ -0,0 +1,3 @@
+export * from "./extras/index.js";
+export * from "./plugins/index.js";
+export * from "./viewer/index.js";