# src/toolbar/MarqueeSelectionTool.js

    import {Controller} from "../Controller.js";
    import {Frustum, frustumIntersectsAABB3, math, setFrustum} from "@xeokit/xeokit-sdk/dist/xeokit-sdk.es.js";

    const LEFT_TO_RIGHT = 0;
    const RIGHT_TO_LEFT = 1;

    /** @private */
    export class MarqueeSelectionTool extends Controller {

        constructor(parent, cfg) {

            super(parent);

            if (!cfg.buttonElement) {
                throw "Missing config: buttonElement";
            }

            this._objectsKdTree3 = cfg.objectsKdTree3;
            this._marquee = math.AABB2();
            this._marqueeFrustum = new Frustum();
            this._marqueeFrustumProjMat = math.mat4();
            this._marqueeDir = false;

            const buttonElement = cfg.buttonElement;

            this.on("enabled", (enabled) => {
                if (!enabled) {
                    buttonElement.classList.add("disabled");
                } else {
                    buttonElement.classList.remove("disabled");
                }
            });

            this.on("active", (active) => {
                if (active) {
                    buttonElement.classList.add("active");
                    const nop = this._objectsKdTree3.root; // Lazy-build the kd-tree
                } else {
                    buttonElement.classList.remove("active");
                }
            });

            buttonElement.addEventListener("click", (event) => {
                if (this.getEnabled()) {
                    const active = this.getActive();
                    this.setActive(!active);
                }
                event.preventDefault();
            });

            this.bimViewer.on("reset", () => {
                this.setActive(false);
            });

            const scene = this.viewer.scene;
            const canvas = scene.canvas.canvas;

            this._marqueeElement = document.createElement('div');
            document.body.appendChild(this._marqueeElement);

            const marqueeElement = this._marqueeElement;
            const marqueeStyle = marqueeElement.style;
            marqueeStyle.position = "absolute";
            marqueeStyle["z-index"] = "40000005";
            marqueeStyle.width = 8 + "px";
            marqueeStyle.height = 8 + "px";
            marqueeStyle.visibility = "hidden";
            marqueeStyle.top = 0 + "px";
            marqueeStyle.left = 0 + "px";
            marqueeStyle["box-shadow"] = "0 2px 5px 0 #182A3D;";
            marqueeStyle["opacity"] = 1.0;
            marqueeStyle["pointer-events"] = "none";

            let canvasDragStartX;
            let canvasDragStartY;
            let canvasDragEndX;
            let canvasDragEndY;

            let canvasMarqueeStartX;
            let canvasMarqueeStartY;
            let canvasMarqueeEndX;
            let canvasMarqueeEndY;

            let isMouseDragging = false;
            let mouseWasUpOffCanvas = false;

            canvas.addEventListener("mousedown", (e) => {
                if (!this.getActive() || !this.getEnabled()) {
                    return;
                }
                if (e.button !== 0) { // Left button only
                    return;
                }
                const input = this.bimViewer.viewer.scene.input;
                if (!input.keyDown[input.KEY_CTRL]) { // Clear selection unless CTRL down
                    scene.setObjectsSelected(scene.selectedObjectIds, false);
                }
                canvasDragStartX = e.pageX;
                canvasDragStartY = e.pageY;
                marqueeStyle.visibility = "visible";
                marqueeStyle.left = `${canvasDragStartX}px`;
                marqueeStyle.top = `${canvasDragStartY}px`;
                marqueeStyle.width = "0px";
                marqueeStyle.height = "0px";
                marqueeStyle.display = "block";
                canvasMarqueeStartX = e.offsetX;
                canvasMarqueeStartY = e.offsetY;
                isMouseDragging = true;
                this.viewer.cameraControl.pointerEnabled = false; // Disable camera rotation
            });

            canvas.addEventListener("mouseup", (e) => {
                if (!this.getActive() || !this.getEnabled()) {
                    return;
                }
                if (!isMouseDragging && !mouseWasUpOffCanvas) {
                    return
                }
                if (e.button !== 0) {
                    return;
                }
                canvasDragEndX = e.pageX;
                canvasDragEndY = e.pageY;
                const width = Math.abs(canvasDragEndX - canvasDragStartX);
                const height = Math.abs(canvasDragEndY - canvasDragStartY);
                marqueeStyle.width = `${width}px`;
                marqueeStyle.height = `${height}px`;
                marqueeStyle.visibility = "hidden";
                isMouseDragging = false;
                this.viewer.cameraControl.pointerEnabled = true; // Enable camera rotation
                if (mouseWasUpOffCanvas) {
                    mouseWasUpOffCanvas = false;
                }
                if (width > 3 || height > 3) { // Marquee pick if rectangle big enough
                    this._marqueePick();
                }
            }); // Bubbling

            document.addEventListener("mouseup", (e) => {
                if (!this.getActive() || !this.getEnabled()) {
                    return;
                }
                if (e.button !== 0) { // check if left button was clicked
                    return;
                }
                if (!isMouseDragging) {
                    return
                }
                marqueeStyle.visibility = "hidden";
                isMouseDragging = false;
                mouseWasUpOffCanvas = true;
                this.viewer.cameraControl.pointerEnabled = true;
            }, true); // Capturing

            canvas.addEventListener("mousemove", (e) => {
                if (!this.getActive() || !this.getEnabled()) {
                    return;
                }
                if (e.button !== 0) { // check if left button was clicked
                    return;
                }
                if (!isMouseDragging) {
                    return
                }
                const x = e.pageX;
                const y = e.pageY;
                const width = x - canvasDragStartX;
                const height = y - canvasDragStartY;
                marqueeStyle.width = `${Math.abs(width)}px`;
                marqueeStyle.height = `${Math.abs(height)}px`;
                marqueeStyle.left = `${Math.min(canvasDragStartX, x)}px`;
                marqueeStyle.top = `${Math.min(canvasDragStartY, y)}px`;
                canvasMarqueeEndX = e.offsetX;
                canvasMarqueeEndY = e.offsetY;
                const marqueeDir = (canvasMarqueeStartX < canvasMarqueeEndX) ? LEFT_TO_RIGHT : RIGHT_TO_LEFT;
                this._setMarqueeDir(marqueeDir);
                this._marquee[0] = Math.min(canvasMarqueeStartX, canvasMarqueeEndX);
                this._marquee[1] = Math.min(canvasMarqueeStartY, canvasMarqueeEndY);
                this._marquee[2] = Math.max(canvasMarqueeStartX, canvasMarqueeEndX);
                this._marquee[3] = Math.max(canvasMarqueeStartY, canvasMarqueeEndY);
            });
        }

        _setMarqueeDir(marqueeDir) {
            if (marqueeDir !== this._marqueeDir) {
                this._marqueeElement.style["background-image"] =
                    marqueeDir === LEFT_TO_RIGHT
                        /* 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._marqueeDir = marqueeDir;
            }
        }

        _marqueePick() {
            this._buildMarqueeFrustum();
            const entities1 = [];
            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._marqueeDir === LEFT_TO_RIGHT) {
                            // Select entities that are completely inside marquee
                            const intersection = frustumIntersectsAABB3(this._marqueeFrustum, entityAABB);
                            if (intersection === Frustum.INSIDE) {
                                entities1.push(entity);
                            }
                        } else {
                            // Select entities that are partially inside marquee
                            const intersection = frustumIntersectsAABB3(this._marqueeFrustum, entityAABB);
                            if (intersection !== Frustum.OUTSIDE) {
                                entities1.push(entity);
                            }
                        }
                    }
                }
                //    }
                if (node.left) {
                    visitNode(node.left, intersects);
                }
                if (node.right) {
                    visitNode(node.right, intersects);
                }
            }
            visitNode(this._objectsKdTree3.root);
            for (let i = 0, len = entities1.length; i < len; i++) {
                entities1[i].selected = true;
            }
            return entities1;
        }

        _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 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._marquee[0] * xCanvasToClip + -1;
            const right = this._marquee[2] * xCanvasToClip + -1;
            const bottom = -this._marquee[3] * yCanvasToClip + 1;
            const top = -this._marquee[1] * 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);
        }
    }