src/toolbar/SectionMode.js

import {Controller} from "../Controller.js";
import {SectionPlanesPlugin} from "@xeokit/xeokit-sdk/src/plugins/SectionPlanesPlugin/SectionPlanesPlugin.js";

/** @private */
class SectionMode extends Controller {

    constructor(parent, cfg) {

        super(parent, cfg);

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

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

        const buttonElement = cfg.buttonElement;
        const sectionPlanesOverviewCanvasElement = cfg.sectionPlanesOverviewCanvasElement;

        this._sectionPlanesPlugin = new SectionPlanesPlugin(this.viewer, {
            overviewCanvas: sectionPlanesOverviewCanvasElement
        });

        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");
            } else {
                buttonElement.classList.remove("active");
            }
        });

        this.on("active", (active) => {
            this._sectionPlanesPlugin.setOverviewVisible(active);
            if (!active) {
                this._sectionPlanesPlugin.hideControl();
            }
        });

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

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

        this._initSectionMode();
    }

    _initSectionMode() {
        this._onPickedSurface = this.viewer.cameraControl.on("pickedSurface", (e) => {
            if (!this.getActive() || !this.getEnabled()) {
                return;
            }
            const sectionPlane = this._sectionPlanesPlugin.createSectionPlane({
                pos: e.worldPos,
                dir: [-e.worldNormal[0], -e.worldNormal[1], -e.worldNormal[2]]
            });
            this._sectionPlanesPlugin.showControl(sectionPlane.id);
        });
    }

    clear() {
        this._sectionPlanesPlugin.clear();
    }

    destroy() {
        this._sectionPlanesPlugin.destroy();
        super.destroy();
    }
}

export {SectionMode};