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

package/src/src/extras/ContextMenu/index.js

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

package/src/src/extras/MarqueePicker/MarqueePicker.js

@@ -1,352 +0,0 @@
-import {Component} from "../../viewer/scene/Component.js";
-import {math} from "../../viewer/scene/math/math.js";
-import {Frustum, frustumIntersectsAABB3, setFrustum} from "../../viewer/scene/math/Frustum.js";
-
-/**
- * Picks a {@link Viewer}'s {@link Entity}s with a canvas-space 2D marquee box.
- *
- * [<img src="https://xeokit.github.io/xeokit-sdk/assets/images/MarqueeSelect.gif">](https://xeokit.github.io/xeokit-sdk/examples/picking/#marqueePick_select)
- *
- * * [[Example 1: Select Objects with Marquee](https://xeokit.github.io/xeokit-sdk/examples/picking/#marqueePick_select)]
- * * [[Example 2: View-Fit Objects with Marquee](https://xeokit.github.io/xeokit-sdk/examples/picking/#marqueePick_viewFit)]
- *
- * # Usage
- *
- * In the example below, we
- *
- * 1. Create a {@link Viewer}, arrange the {@link Camera}
- * 2. Use an {@link XKTLoaderPlugin} to load a BIM model,
- * 3. Create a {@link ObjectsKdTree3} to automatically index the `Viewer's` {@link Entity}s for fast spatial lookup,
- * 4. Create a `MarqueePicker` to pick {@link Entity}s in the {@link Viewer}, using the {@link ObjectsKdTree3} to accelerate picking
- * 5. Create a {@link MarqueePickerMouseControl} to perform the marquee-picking with the `MarqueePicker`, using mouse input to draw the marquee box on the `Viewer's` canvas.
- *
- * When the {@link MarqueePickerMouseControl} is active:
- *
- * * Long-click, drag and release on the canvas to define a marque box that picks {@link Entity}s.
- * * Drag left-to-right to pick {@link Entity}s that intersect the box.
- * * Drag right-to-left to pick {@link Entity}s that are fully inside the box.
- * * On release, the `MarqueePicker` will fire a "picked" event with IDs of the picked {@link Entity}s, if any.
- * * Handling that event, we mark the {@link Entity}s as selected.
- * * Hold down CTRL to multi-pick.
- *
- * ````javascript
- * import {
- *         Viewer,
- *         XKTLoaderPlugin,
- *         ObjectsKdTree3,
- *         MarqueePicker,
- *         MarqueePickerMouseControl
- * } from "xeokit-sdk.es.js";
- *
- * // 1
- *
- * const viewer = new Viewer({
- *     canvasId: "myCanvas"
- * });
- *
- * viewer.scene.camera.eye = [14.9, 14.3, 5.4];
- * viewer.scene.camera.look = [6.5, 8.3, -4.1];
- * viewer.scene.camera.up = [-0.28, 0.9, -0.3];
- *
- * // 2
- *
- * const xktLoader = new XKTLoaderPlugin(viewer);
- *
- * const sceneModel = xktLoader.load({
- *     id: "myModel",
- *     src: "../../assets/models/xkt/v8/ifc/HolterTower.ifc.xkt"
- * });
- *
- * // 3
- *
- * const objectsKdTree3 = new ObjectsKdTree3({viewer});
- *
- * // 4
- *
- * const marqueePicker = new MarqueePicker({viewer, objectsKdTree3});
- *
- * // 5
- *
- * const marqueePickerMouseControl = new MarqueePickerMouseControl({marqueePicker});
- *
- * marqueePicker.on("clear", () => {
- *     viewer.scene.setObjectsSelected(viewer.scene.selectedObjectIds, false);
- * });
- *
- * marqueePicker.on("picked", (objectIds) => {
- *     viewer.scene.setObjectsSelected(objectIds, true);
- * });
- *
- * marqueePickerMouseControl.setActive(true);
- * ````
- *
- * # Design Notes
- *
- * * The {@link ObjectsKdTree3} can be shared with any other components that want to use it to spatially search for {@link Entity}s.
- * * The {@link MarqueePickerMouseControl} can be replaced with other types of controllers (i.e. touch), or used alongside them.
- * * The `MarqueePicker` has no input handlers of its own, and provides an API through which to programmatically control marquee picking. By firing the "picked" events, `MarqueePicker` implements the *Blackboard Pattern*.
- */
-export class MarqueePicker extends Component {
-
-    /**
-     * Creates a MarqueePicker.
-     *
-     * @param {*} cfg Configuration
-     * @param {Viewer} cfg.viewer The Viewer to pick Entities from.
-     * @param {ObjectsKdTree3} cfg.objectsKdTree3 A k-d tree that indexes the Entities in the Viewer for fast spatial lookup.
-     */
-    constructor(cfg = {}) {
-
-        if (!cfg.viewer) {
-            throw "[MarqueePicker] Missing config: viewer";
-        }
-
-        if (!cfg.objectsKdTree3) {
-            throw "[MarqueePicker] Missing config: objectsKdTree3";
-        }
-
-        super(cfg.viewer.scene, cfg);
-
-        this.viewer = cfg.viewer;
-        this._objectsKdTree3 = cfg.objectsKdTree3;
-        this._canvasMarqueeCorner1 = math.vec2();
-        this._canvasMarqueeCorner2 = math.vec2();
-        this._canvasMarquee = math.AABB2();
-        this._marqueeFrustum = new Frustum();
-        this._marqueeFrustumProjMat = math.mat4();
-        this._pickMode = false;
-
-        this._marqueeElement = document.createElement('div');
-        document.body.appendChild(this._marqueeElement);
-
-        this._marqueeElement.style.position = "absolute";
-        this._marqueeElement.style["z-index"] = "40000005";
-        this._marqueeElement.style.width = 8 + "px";
-        this._marqueeElement.style.height = 8 + "px";
-        this._marqueeElement.style.visibility = "hidden";
-        this._marqueeElement.style.top = 0 + "px";
-        this._marqueeElement.style.left = 0 + "px";
-        this._marqueeElement.style["box-shadow"] = "0 2px 5px 0 #182A3D;";
-        this._marqueeElement.style["opacity"] = 1.0;
-        this._marqueeElement.style["pointer-events"] = "none";
-    }
-
-    /**
-     * Sets the canvas-space position of the first marquee box corner.
-     *
-     * @param corner1
-     */
-    setMarqueeCorner1(corner1) {
-        this._canvasMarqueeCorner1.set(corner1);
-        this._canvasMarqueeCorner2.set(corner1);
-        this._updateMarquee();
-    }
-
-    /**
-     * Sets the canvas-space position of the second marquee box corner.
-     *
-     * @param corner2
-     */
-    setMarqueeCorner2(corner2) {
-        this._canvasMarqueeCorner2.set(corner2);
-        this._updateMarquee();
-    }
-
-    /**
-     * Sets both canvas-space corner positions of the marquee box.
-     *
-     * @param corner1
-     * @param corner2
-     */
-    setMarquee(corner1, corner2) {
-        this._canvasMarqueeCorner1.set(corner1);
-        this._canvasMarqueeCorner2.set(corner2);
-        this._updateMarquee();
-    }
-
-    /**
-     * Sets if the marquee box is visible.
-     *
-     * @param {boolean} visible True if the marquee box is to be visible, else false.
-     */
-    setMarqueeVisible(visible) {
-        this._marqueVisible = visible;
-        this._marqueeElement.style.visibility = visible ? "visible" : "hidden";
-    }
-
-    /**
-     * Gets if the marquee box is visible.
-     *
-     * @returns {boolean} True if the marquee box is visible, else false.
-     */
-    getMarqueeVisible() {
-        return this._marqueVisible;
-    }
-
-    /**
-     * Sets the pick mode.
-     *
-     * Supported pick modes are:
-     *
-     * * MarqueePicker.PICK_MODE_INSIDE - picks {@link Entity}s that are completely inside the marquee box.
-     * * MarqueePicker.PICK_MODE_INTERSECTS - picks {@link Entity}s that intersect the marquee box.
-     *
-     * @param {number} pickMode The pick mode.
-     */
-    setPickMode(pickMode) {
-        if (pickMode !== MarqueePicker.PICK_MODE_INSIDE && pickMode !== MarqueePicker.PICK_MODE_INTERSECTS) {
-            throw "Illegal MarqueePicker pickMode: must be MarqueePicker.PICK_MODE_INSIDE or MarqueePicker.PICK_MODE_INTERSECTS";
-        }
-        if (pickMode !== this._pickMode) {
-            this._marqueeElement.style["background-image"] =
-                pickMode === MarqueePicker.PICK_MODE_INSIDE
-                    /* Solid */ ? "url(\"data:image/svg+xml,%3csvg width='100%25' height='100%25' xmlns='http://www.w3.org/2000/svg'%3e%3crect width='100%25' height='100%25' fill='none' rx='6' ry='6' stroke='%23333' stroke-width='4'/%3e%3c/svg%3e\")"
-                    /* Dashed */ : "url(\"data:image/svg+xml,%3csvg width='100%25' height='100%25' xmlns='http://www.w3.org/2000/svg'%3e%3crect width='100%25' height='100%25' fill='none' rx='6' ry='6' stroke='%23333' stroke-width='4' stroke-dasharray='6%2c 14' stroke-dashoffset='0' stroke-linecap='square'/%3e%3c/svg%3e\")";
-            this._pickMode = pickMode;
-        }
-    }
-
-    /**
-     * Gets the pick mode.
-     *
-     * Supported pick modes are:
-     *
-     * * MarqueePicker.PICK_MODE_INSIDE - picks {@link Entity}s that are completely inside the marquee box.
-     * * MarqueePicker.PICK_MODE_INTERSECTS - picks {@link Entity}s that intersect the marquee box.
-     *
-     * @returns {number} The pick mode.
-     */
-    getPickMode() {
-        return this._pickMode;
-    }
-
-    /**
-     * Fires a "clear" event on this MarqueePicker.
-     */
-    clear() {
-        this.fire("clear", {})
-    }
-
-    /**
-     * Attempts to pick {@link Entity}s, using the current MarquePicker settings.
-     *
-     * Fires a "picked" event with the IDs of the {@link Entity}s that were picked, if any.
-     *
-     * @returns {string[]} IDs of the {@link Entity}s that were picked, if any
-     */
-    pick() {
-        this._updateMarquee();
-        this._buildMarqueeFrustum();
-        const entityIds = [];
-        const visitNode = (node, intersects = Frustum.INTERSECT) => {
-            if (intersects === Frustum.INTERSECT) {
-                intersects = frustumIntersectsAABB3(this._marqueeFrustum, node.aabb);
-            }
-            if (intersects === Frustum.OUTSIDE) {
-                return;
-            }
-            if (node.entities) {
-                const entities = node.entities;
-                for (let i = 0, len = entities.length; i < len; i++) {
-                    const entity = entities[i];
-                    if (!entity.visible) {
-                        continue;
-                    }
-                    const entityAABB = entity.aabb;
-                    if (this._pickMode === MarqueePicker.PICK_MODE_INSIDE) {
-                        // Select entities that are completely inside marquee
-                        const intersection = frustumIntersectsAABB3(this._marqueeFrustum, entityAABB);
-                        if (intersection === Frustum.INSIDE) {
-                            entityIds.push(entity.id);
-                        }
-                    } else {
-                        // Select entities that are partially inside marquee
-                        const intersection = frustumIntersectsAABB3(this._marqueeFrustum, entityAABB);
-                        if (intersection !== Frustum.OUTSIDE) {
-                            entityIds.push(entity.id);
-                        }
-                    }
-                }
-            }
-            if (node.left) {
-                visitNode(node.left, intersects);
-            }
-            if (node.right) {
-                visitNode(node.right, intersects);
-            }
-        }
-        if (this._canvasMarquee[2] - this._canvasMarquee[0] > 3 || this._canvasMarquee[3] - this._canvasMarquee[1] > 3) { // Marquee pick if rectangle big enough
-            visitNode(this._objectsKdTree3.root);
-        }
-        this.fire("picked", entityIds);
-        return entityIds;
-    }
-
-    _updateMarquee() {
-        this._canvasMarquee[0] = Math.min(this._canvasMarqueeCorner1[0], this._canvasMarqueeCorner2[0]);
-        this._canvasMarquee[1] = Math.min(this._canvasMarqueeCorner1[1], this._canvasMarqueeCorner2[1]);
-        this._canvasMarquee[2] = Math.max(this._canvasMarqueeCorner1[0], this._canvasMarqueeCorner2[0]);
-        this._canvasMarquee[3] = Math.max(this._canvasMarqueeCorner1[1], this._canvasMarqueeCorner2[1]);
-        this._marqueeElement.style.width = `${this._canvasMarquee[2] - this._canvasMarquee[0]}px`;
-        this._marqueeElement.style.height = `${this._canvasMarquee[3] - this._canvasMarquee[1]}px`;
-        this._marqueeElement.style.left = `${this._canvasMarquee[0]}px`;
-        this._marqueeElement.style.top = `${this._canvasMarquee[1]}px`;
-    }
-
-    _buildMarqueeFrustum() { // https://github.com/xeokit/xeokit-sdk/issues/869#issuecomment-1165375770
-        const canvas = this.viewer.scene.canvas.canvas;
-        const canvasWidth = canvas.clientWidth;
-        const canvasHeight = canvas.clientHeight;
-        const canvasLeft = canvas.clientLeft;
-        const canvasTop = canvas.clientTop;
-        const xCanvasToClip = 2.0 / canvasWidth;
-        const yCanvasToClip = 2.0 / canvasHeight;
-        const NEAR_SCALING = 17;
-        const ratio = canvas.clientHeight / canvas.clientWidth;
-        const FAR_PLANE = 10000;
-        const left = (this._canvasMarquee[0] - canvasLeft) * xCanvasToClip + -1;
-        const right = (this._canvasMarquee[2] - canvasLeft) * xCanvasToClip + -1;
-        const bottom = -(this._canvasMarquee[3] - canvasTop) * yCanvasToClip + 1;
-        const top = -(this._canvasMarquee[1] - canvasTop) * yCanvasToClip + 1;
-        const near = this.viewer.scene.camera.frustum.near * (NEAR_SCALING * ratio);
-        const far = FAR_PLANE;
-        math.frustumMat4(
-            left,
-            right,
-            bottom * ratio,
-            top * ratio,
-            near,
-            far,
-            this._marqueeFrustumProjMat,
-        );
-        setFrustum(this._marqueeFrustum, this.viewer.scene.camera.viewMatrix, this._marqueeFrustumProjMat);
-    }
-
-    /**
-     * Destroys this MarqueePicker.
-     *
-     * Does not destroy the {@link Viewer} or the {@link ObjectsKdTree3} provided to the constructor of this MarqueePicker.
-     */
-    destroy() {
-        super.destroy();
-        if (this._marqueeElement.parentElement) {
-            this._marqueeElement.parentElement.removeChild(this._marqueeElement);
-            this._marqueeElement = null;
-            this._objectsKdTree3 = null;
-        }
-    }
-}
-
-/**
- * Pick mode that picks {@link Entity}s that intersect the marquee box.
- *
- * @type {number}
- */
-MarqueePicker.PICK_MODE_INTERSECTS = 0;
-
-/**
- * Pick mode that picks {@link Entity}s that are completely inside the marquee box.
- *
- * @type {number}
- */
-MarqueePicker.PICK_MODE_INSIDE = 1;

package/src/src/extras/MarqueePicker/MarqueePickerMouseControl.js

@@ -1,174 +0,0 @@
-import {Component} from "../../viewer/scene/Component.js";
-import {MarqueePicker} from "./MarqueePicker.js";
-
-/**
- * Controls a {@link MarqueePicker} with mouse input.
- *
- * See {@link MarqueePicker} for usage example.
- *
- * When the MarqueePickerMouseControl is active:
- *
- * * Long-click, drag and release on the canvas to define a marque box that picks {@link Entity}s.
- * * Drag left-to-right to pick Entities that intersect the box.
- * * Drag right-to-left to pick Entities that are fully inside the box.
- * * On release, the MarqueePicker will fire a "picked" event with IDs of the picked Entities , if any.
- */
-export class MarqueePickerMouseControl extends Component {
-
-    /**
-     * Creates a new MarqueePickerMouseControl.
-     *
-     * @param {*} cfg Configuration
-     * @param {MarqueePicker} cfg.marqueePicker The MarqueePicker to control.
-     */
-    constructor(cfg) {
-
-        super(cfg.marqueePicker, cfg);
-
-        const marqueePicker = cfg.marqueePicker;
-        const scene = marqueePicker.viewer.scene;
-        const canvas = scene.canvas.canvas;
-
-        let pageStartX;
-        let pageStartY;
-        let pageEndX;
-        let pageEndY;
-
-        let canvasStartX;
-        let canvasStartY;
-        let canvasEndX;
-        let canvasEndY;
-
-        let isMouseDragging = false;
-        let isMouseDown = false;
-        let mouseWasUpOffCanvas = false;
-        let mouseDownTimer;
-
-        canvas.addEventListener("mousedown", (e) => {
-            if (!this.getActive()) {
-                return;
-            }
-            if (e.button !== 0) { // Left button only
-                return;
-            }
-            mouseDownTimer = setTimeout(function () {
-                const input = marqueePicker.viewer.scene.input;
-                if (!input.keyDown[input.KEY_CTRL]) { // Clear selection unless CTRL down
-                    marqueePicker.clear();
-                }
-                pageStartX = e.pageX;
-                pageStartY = e.pageY;
-                canvasStartX = e.offsetX;
-                canvasStartY = e.offsetY;
-                marqueePicker.setMarqueeCorner1([pageStartX, pageStartY]);
-                isMouseDragging = true;
-                marqueePicker.viewer.cameraControl.pointerEnabled = false; // Disable camera rotation
-                marqueePicker.setMarqueeVisible(true);
-                canvas.style.cursor = "crosshair";
-            }, 400);
-
-            isMouseDown = true;
-        });
-
-        canvas.addEventListener("mouseup", (e) => {
-            if (!this.getActive()) {
-                return;
-            }
-            if (!isMouseDragging && !mouseWasUpOffCanvas) {
-                return
-            }
-            if (e.button !== 0) {
-                return;
-            }
-            clearTimeout(mouseDownTimer);
-            pageEndX = e.pageX;
-            pageEndY = e.pageY;
-            const width = Math.abs(pageEndX - pageStartX);
-            const height = Math.abs(pageEndY - pageStartY);
-            isMouseDragging = false;
-            marqueePicker.viewer.cameraControl.pointerEnabled = true; // Enable camera rotation
-            if (mouseWasUpOffCanvas) {
-                mouseWasUpOffCanvas = false;
-            }
-            if (width > 3 || height > 3) { // Marquee pick if rectangle big enough
-                marqueePicker.pick();
-            }
-        }); // Bubbling
-
-        document.addEventListener("mouseup", (e) => {
-            if (!this.getActive()) {
-                return;
-            }
-            if (e.button !== 0) { // check if left button was clicked
-                return;
-            }
-            clearTimeout(mouseDownTimer);
-            if (!isMouseDragging) {
-                return
-            }
-            marqueePicker.setMarqueeVisible(false);
-            isMouseDragging = false;
-            isMouseDown = false;
-            mouseWasUpOffCanvas = true;
-            marqueePicker.viewer.cameraControl.pointerEnabled = true;
-        }, true); // Capturing
-
-        canvas.addEventListener("mousemove", (e) => {
-            if (!this.getActive()) {
-                return;
-            }
-            if (e.button !== 0) { // check if left button was clicked
-                return;
-            }
-
-            if (!isMouseDown) {
-                return;
-            }
-
-            clearTimeout(mouseDownTimer);
-
-            if (!isMouseDragging) {
-                return
-            }
-
-            pageEndX = e.pageX;
-            pageEndY = e.pageY;
-            canvasEndX = e.offsetX;
-            canvasEndY = e.offsetY;
-
-            marqueePicker.setMarqueeVisible(true);
-            marqueePicker.setMarqueeCorner2([pageEndX, pageEndY]);
-            marqueePicker.setPickMode((canvasStartX < canvasEndX) ? MarqueePicker.PICK_MODE_INSIDE : MarqueePicker.PICK_MODE_INTERSECTS);
-
-        });
-    }
-
-    /**
-     * Activates or deactivates this MarqueePickerMouseControl.
-     *
-     * @param {boolean} active Whether or not to activate.
-     */
-    setActive(active) {
-        if (this._active === active) {
-            return;
-        }
-        this._active = active;
-        this.fire("active", this._active);
-    }
-
-    /**
-     * Gets if this MarqueePickerMouseControl is active.
-     *
-     * @returns {boolean}
-     */
-    getActive() {
-        return this._active;
-    }
-
-    /**
-     *
-     */
-    destroy() {
-
-    }
-}

package/src/src/extras/MarqueePicker/index.js

@@ -1,2 +0,0 @@
-export * from "./MarqueePicker.js";
-export * from "./MarqueePickerMouseControl.js";