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

package/src/src/plugins/AnnotationsPlugin/Annotation.js

@@ -0,0 +1,368 @@
+import {Marker} from "../../viewer/scene/marker/Marker.js";
+import {utils} from "../../viewer/scene/utils.js";
+
+/**
+ * A {@link Marker} with an HTML label attached to it, managed by an {@link AnnotationsPlugin}.
+ *
+ * See {@link AnnotationsPlugin} for more info.
+ */
+class Annotation extends Marker {
+
+    /**
+     * @private
+     */
+    constructor(owner, cfg) {
+
+        super(owner, cfg);
+
+        /**
+         * The {@link AnnotationsPlugin} this Annotation was created by.
+         * @type {AnnotationsPlugin}
+         */
+        this.plugin = cfg.plugin;
+
+        this._container = cfg.container;
+        if (!this._container) {
+            throw "config missing: container";
+        }
+
+        if ((!cfg.markerElement) && (!cfg.markerHTML)) {
+            throw "config missing: need either markerElement or markerHTML";
+        }
+        if ((!cfg.labelElement) && (!cfg.labelHTML)) {
+            throw "config missing: need either labelElement or labelHTML";
+        }
+
+        this._htmlDirty = false;
+
+        if (cfg.markerElement) {
+            this._marker = cfg.markerElement;
+            this._marker.addEventListener("click", this._onMouseClickedExternalMarker = () => {
+                this.plugin.fire("markerClicked", this);
+            });
+            this._marker.addEventListener("mouseenter", this._onMouseEnterExternalMarker = () => {
+                this.plugin.fire("markerMouseEnter", this);
+            });
+            this._marker.addEventListener("mouseleave", this._onMouseLeaveExternalMarker = () => {
+                this.plugin.fire("markerMouseLeave", this);
+            });
+            this._markerExternal = true; // Don't destroy marker when destroying Annotation
+        } else {
+            this._markerHTML = cfg.markerHTML;
+            this._htmlDirty = true;
+            this._markerExternal = false;
+        }
+
+        if (cfg.labelElement) {
+            this._label = cfg.labelElement;
+            this._labelExternal = true; // Don't destroy marker when destroying Annotation
+        } else {
+            this._labelHTML = cfg.labelHTML;
+            this._htmlDirty = true;
+            this._labelExternal = false;
+        }
+
+        this._markerShown = !!cfg.markerShown;
+        this._labelShown = !!cfg.labelShown;
+        this._values = cfg.values || {};
+        this._layoutDirty = true;
+        this._visibilityDirty = true;
+
+        this._buildHTML();
+
+        this._onTick = this.scene.on("tick", () => {
+            if (this._htmlDirty) {
+                this._buildHTML();
+                this._htmlDirty = false;
+                this._layoutDirty = true;
+                this._visibilityDirty = true;
+            }
+            if (this._layoutDirty || this._visibilityDirty) {
+                if (this._markerShown || this._labelShown) {
+                    this._updatePosition();
+                    this._layoutDirty = false;
+                }
+            }
+            if (this._visibilityDirty) {
+                this._marker.style.visibility = (this.visible && this._markerShown) ? "visible" : "hidden";
+                this._label.style.visibility = (this.visible && this._markerShown && this._labelShown) ? "visible" : "hidden";
+                this._visibilityDirty = false;
+            }
+        });
+
+        this.on("canvasPos", () => {
+            this._layoutDirty = true;
+        });
+
+        this.on("visible", () => {
+            this._visibilityDirty = true;
+        });
+
+        this.setMarkerShown(cfg.markerShown !== false);
+        this.setLabelShown(cfg.labelShown);
+
+        /**
+         * Optional World-space position for {@link Camera#eye}, used when this Annotation is associated with a {@link Camera} position.
+         *
+         * Undefined by default.
+         *
+         * @type {Number[]} Eye position.
+         */
+        this.eye = cfg.eye ? cfg.eye.slice() : null;
+
+        /**
+         * Optional World-space position for {@link Camera#look}, used when this Annotation is associated with a {@link Camera} position.
+         *
+         * Undefined by default.
+         *
+         * @type {Number[]} The "look" vector.
+         */
+        this.look = cfg.look ? cfg.look.slice() : null;
+
+        /**
+         * Optional World-space position for {@link Camera#up}, used when this Annotation is associated with a {@link Camera} position.
+         *
+         * Undefined by default.
+         *
+         * @type {Number[]} The "up" vector.
+         */
+        this.up = cfg.up ? cfg.up.slice() : null;
+
+        /**
+         * Optional projection type for {@link Camera#projection}, used when this Annotation is associated with a {@link Camera} position.
+         *
+         * Undefined by default.
+         *
+         * @type {String} The projection type - "perspective" or "ortho"..
+         */
+        this.projection = cfg.projection;
+    }
+
+    /**
+     * @private
+     */
+    _buildHTML() {
+        if (!this._markerExternal) {
+            if (this._marker) {
+                this._container.removeChild(this._marker);
+                this._marker = null;
+            }
+            let markerHTML = this._markerHTML || "<p></p>"; // Make marker
+            if (utils.isArray(markerHTML)) {
+                markerHTML = markerHTML.join("");
+            }
+            markerHTML = this._renderTemplate(markerHTML.trim());
+            const markerFragment = document.createRange().createContextualFragment(markerHTML);
+            this._marker = markerFragment.firstChild;
+            this._container.appendChild(this._marker);
+            this._marker.style.visibility = this._markerShown ? "visible" : "hidden";
+            this._marker.addEventListener("click", () => {
+                this.plugin.fire("markerClicked", this);
+            });
+            this._marker.addEventListener("mouseenter", () => {
+                this.plugin.fire("markerMouseEnter", this);
+            });
+            this._marker.addEventListener("mouseleave", () => {
+                this.plugin.fire("markerMouseLeave", this);
+            });
+            this._marker.addEventListener('wheel', (event) => {
+                this.plugin.viewer.scene.canvas.canvas.dispatchEvent(new WheelEvent('wheel', event));
+            });
+        }
+        if (!this._labelExternal) {
+            if (this._label) {
+                this._container.removeChild(this._label);
+                this._label = null;
+            }
+            let labelHTML = this._labelHTML || "<p></p>"; // Make label
+            if (utils.isArray(labelHTML)) {
+                labelHTML = labelHTML.join("");
+            }
+            labelHTML = this._renderTemplate(labelHTML.trim());
+            const labelFragment = document.createRange().createContextualFragment(labelHTML);
+            this._label = labelFragment.firstChild;
+            this._container.appendChild(this._label);
+            this._label.style.visibility = (this._markerShown && this._labelShown) ? "visible" : "hidden";
+            this._label.addEventListener('wheel', (event) => {
+                this.plugin.viewer.scene.canvas.canvas.dispatchEvent(new WheelEvent('wheel', event));
+            });
+        }
+    }
+
+    /**
+     * @private
+     */
+    _updatePosition() {
+        const boundary = this.scene.canvas.boundary;
+        const left = boundary[0];
+        const top = boundary[1];
+        const canvasPos = this.canvasPos;
+        this._marker.style.left = (Math.floor(left + canvasPos[0]) - 12) + "px";
+        this._marker.style.top = (Math.floor(top + canvasPos[1]) - 12) + "px";
+        this._marker.style["z-index"] = 90005 + Math.floor(this._viewPos[2]) + 1;
+        const offsetX = 20;
+        const offsetY = -17;
+        this._label.style.left = 20 + Math.floor(left + canvasPos[0] + offsetX) + "px";
+        this._label.style.top = Math.floor(top + canvasPos[1] + offsetY) + "px";
+        this._label.style["z-index"] = 90005 + Math.floor(this._viewPos[2]) + 1;
+    }
+
+    /**
+     * @private
+     */
+    _renderTemplate(template) {
+        for (var key in this._values) {
+            if (this._values.hasOwnProperty(key)) {
+                const value = this._values[key];
+                template = template.replace(new RegExp('{{' + key + '}}', 'g'), value);
+            }
+        }
+        return template;
+    }
+
+    /**
+     * Sets whether or not to show this Annotation's marker.
+     *
+     * The marker shows the Annotation's position.
+     *
+     * The marker is only visible when both this property and {@link Annotation#visible} are ````true````.
+     *
+     * See {@link AnnotationsPlugin} for more info.
+     *
+     * @param {Boolean} shown Whether to show the marker.
+     */
+    setMarkerShown(shown) {
+        shown = !!shown;
+        if (this._markerShown === shown) {
+            return;
+        }
+        this._markerShown = shown;
+        this._visibilityDirty = true;
+    }
+
+    /**
+     * Gets whether or not to show this Annotation's marker.
+     *
+     * The marker shows the Annotation's position.
+     *
+     * The marker is only visible when both this property and {@link Annotation#visible} are ````true````.
+     *
+     * See {@link AnnotationsPlugin} for more info.
+     *
+     * @returns {Boolean} Whether to show the marker.
+     */
+    getMarkerShown() {
+        return this._markerShown;
+    }
+
+    /**
+     * Sets whether or not to show this Annotation's label.
+     *
+     * The label is only visible when both this property and {@link Annotation#visible} are ````true````.
+     *
+     * See {@link AnnotationsPlugin} for more info.
+     *
+     * @param {Boolean} shown Whether to show the label.
+     */
+    setLabelShown(shown) {
+        shown = !!shown;
+        if (this._labelShown === shown) {
+            return;
+        }
+        this._labelShown = shown;
+        this._visibilityDirty = true;
+    }
+
+    /**
+     * Gets whether or not to show this Annotation's label.
+     *
+     * The label is only visible when both this property and {@link Annotation#visible} are ````true````.
+     *
+     * See {@link AnnotationsPlugin} for more info.
+     *
+     * @returns {Boolean} Whether to show the label.
+     */
+    getLabelShown() {
+        return this._labelShown;
+    }
+
+    /**
+     * Sets the value of a field within the HTML templates for either the Annotation's marker or label.
+     *
+     * See {@link AnnotationsPlugin} for more info.
+     *
+     * @param {String} key Identifies the field.
+     * @param {String} value The field's value.
+     */
+    setField(key, value) {
+        this._values[key] = value || "";
+        this._htmlDirty = true;
+    }
+
+    /**
+     * Gets the value of a field within the HTML templates for either the Annotation's marker or label.
+     *
+     * See {@link AnnotationsPlugin} for more info.
+     *
+     * @param {String} key Identifies the field.
+     * @returns {String} The field's value.
+     */
+    getField(key) {
+        return this._values[key];
+    }
+
+    /**
+     * Sets values for multiple placeholders within the Annotation's HTML templates for marker and label.
+     *
+     * See {@link AnnotationsPlugin} for more info.
+     *
+     * @param {{String:(String|Number)}} values Map of field values.
+     */
+    setValues(values) {
+        for (var key in values) {
+            if (values.hasOwnProperty(key)) {
+                const value = values[key];
+                this.setField(key, value);
+            }
+        }
+    }
+
+    /**
+     * Gets the values that were set for the placeholders within this Annotation's HTML marker and label templates.
+     *
+     * See {@link AnnotationsPlugin} for more info.
+     *
+     * @RETURNS {{String:(String|Number)}} Map of field values.
+     */
+    getValues() {
+        return this._values;
+    }
+
+    /**
+     * Destroys this Annotation.
+     *
+     * You can also call {@link AnnotationsPlugin#destroyAnnotation}.
+     */
+    destroy() {
+        if (this._marker) {
+            if (!this._markerExternal) {
+                this._marker.parentNode.removeChild(this._marker);
+            } else {
+                this._marker.removeEventListener("click", this._onMouseClickedExternalMarker);
+                this._marker.removeEventListener("mouseenter", this._onMouseEnterExternalMarker);
+                this._marker.removeEventListener("mouseleave", this._onMouseLeaveExternalMarker);
+                this._marker = null;
+            }
+        }
+        if (this._label) {
+            if (!this._labelExternal) {
+                this._label.parentNode.removeChild(this._label);
+            }
+            this._label = null;
+        }
+        this.scene.off(this._onTick);
+        super.destroy();
+    }
+}
+
+export {Annotation};