csyjk 1.1.1 → 1.2.2

package/src/lib/gltf/assets/yjkkit-sdk/src/plugins/AngleMeasurementsPlugin/AngleMeasurementsControl.js

@@ -0,0 +1,279 @@
+import {Component} from "../../viewer/scene/Component.js";
+import {math} from "../../viewer/scene/math/math.js";
+
+const HOVERING = 0;
+const FINDING_ORIGIN = 1;
+const FINDING_CORNER = 2;
+const FINDING_TARGET = 3;
+
+/**
+ * Creates {@link AngleMeasurement}s from mouse and touch input.
+ *
+ * Belongs to a {@link AngleMeasurementsPlugin}. Located at {@link AngleMeasurementsPlugin#control}.
+ *
+ * Once the AngleMeasurementControl is activated, the first click on any {@link Entity} begins constructing a {@link AngleMeasurement}, fixing its origin to that Entity. The next click on any Entity will complete the AngleMeasurement, fixing its target to that second Entity. The AngleMeasurementControl will then wait for the next click on any Entity, to begin constructing another AngleMeasurement, and so on, until deactivated.
+ *
+ * See {@link AngleMeasurementsPlugin} for more info.
+ */
+class AngleMeasurementsControl extends Component {
+
+    /**
+     * @private
+     */
+    constructor(plugin) {
+
+        super(plugin.viewer.scene);
+
+        /**
+         * The {@link AngleMeasurementsPlugin} that owns this AngleMeasurementsControl.
+         * @type {AngleMeasurementsPlugin}
+         */
+        this.plugin = plugin;
+
+        this._active = false;
+        this._state = HOVERING;
+        this._currentAngleMeasurement = null;
+        this._previousAngleMeasurement = null;
+        this._onhoverSurface = null;
+        this._onPickedSurface = null;
+        this._onHoverNothing = null;
+        this._onPickedNothing = null;
+    }
+
+    /** Gets if this AngleMeasurementsControl is currently active, where it is responding to input.
+     *
+     * @returns {boolean}
+     */
+    get active() {
+        return this._active;
+    }
+
+    /**
+     * Activates this AngleMeasurementsControl, ready to respond to input.
+     */
+    activate() {
+
+        if (this._active) {
+            return;
+        }
+
+        const cameraControl = this.plugin.viewer.cameraControl;
+
+        let over = false;
+        let entity = null;
+        let worldPos = math.vec3();
+
+        this._onhoverSurface = cameraControl.on("hoverSurface", e => {
+
+            over = true;
+            entity = e.entity;
+            worldPos.set(e.worldPos);
+
+            if (this._state === HOVERING) {
+                document.body.style.cursor = "pointer";
+                return;
+            }
+
+            if (this._currentAngleMeasurement) {
+                switch (this._state) {
+                    case FINDING_CORNER:
+                        this._currentAngleMeasurement.originWireVisible = true;
+                        this._currentAngleMeasurement.targetWireVisible = false;
+                        this._currentAngleMeasurement.cornerVisible = true;
+                        this._currentAngleMeasurement.angleVisible = false;
+                        this._currentAngleMeasurement.corner.entity = e.entity;
+                        this._currentAngleMeasurement.corner.worldPos = e.worldPos;
+                        document.body.style.cursor = "pointer";
+                        break;
+                    case FINDING_TARGET:
+                        this._currentAngleMeasurement.targetWireVisible = true;
+                        this._currentAngleMeasurement.targetVisible = true;
+                        this._currentAngleMeasurement.angleVisible = true;
+                        this._currentAngleMeasurement.target.entity = e.entity;
+                        this._currentAngleMeasurement.target.worldPos = e.worldPos;
+                        document.body.style.cursor = "pointer";
+                        break;
+                }
+            }
+        });
+
+        var lastX;
+        var lastY;
+        const tolerance = 2;
+
+        this._onInputMouseDown = this.plugin.viewer.scene.input.on("mousedown", (coords) => {
+            if (!over) {
+                return;
+            }
+            lastX = coords[0];
+            lastY = coords[1];
+        });
+
+        this._onInputMouseUp = this.plugin.viewer.scene.input.on("mouseup", (coords) => {
+
+            if (coords[0] > lastX + tolerance || coords[0] < lastX - tolerance || coords[1] > lastY + tolerance || coords[1] < lastY - tolerance) {
+                return;
+            }
+
+            switch (this._state) {
+
+                case HOVERING:
+                    if (this._previousAngleMeasurement) {
+                        this._previousAngleMeasurement.originVisible = true;
+                        this._previousAngleMeasurement.cornerVisible = true;
+                        this._previousAngleMeasurement.targetVisible = true;
+                    }
+                    if (over) {
+                        this._currentAngleMeasurement = this.plugin.createMeasurement({
+                            id: math.createUUID(),
+                            origin: {
+                                entity: entity,
+                                worldPos: worldPos
+                            },
+                            corner: {
+                                entity: entity,
+                                worldPos: worldPos
+                            },
+                            target: {
+                                entity: entity,
+                                worldPos: worldPos
+                            }
+                        });
+                        this._currentAngleMeasurement.originVisible = true;
+                        this._currentAngleMeasurement.originWireVisible = true;
+                        this._currentAngleMeasurement.cornerVisible = false;
+                        this._currentAngleMeasurement.targetWireVisible = false;
+                        this._currentAngleMeasurement.targetVisible = false;
+                        this._currentAngleMeasurement.angleVisible = false;
+                        this._previousAngleMeasurement = this._currentAngleMeasurement;
+                        this._state = FINDING_CORNER;
+                    }
+                    break;
+
+                case FINDING_CORNER:
+                    if (over) {
+                        this._currentAngleMeasurement.targetWireVisible = false;
+                        this._currentAngleMeasurement.targetVisible = true;
+                        this._currentAngleMeasurement.angleVisible = true;
+                        this._state = FINDING_TARGET;
+                    } else {
+                        if (this._currentAngleMeasurement) {
+                            this._currentAngleMeasurement.destroy();
+                            this._currentAngleMeasurement = null;
+                            this._previousAngleMeasurement = null;
+                            this._state = HOVERING
+                        }
+                    }
+                    break;
+
+                case FINDING_TARGET:
+                    if (over) {
+                        this._currentAngleMeasurement.targetVisible = true;
+                        this._currentAngleMeasurement.angleVisible = true;
+                        this._currentAngleMeasurement = null;
+                        this._previousAngleMeasurement = null;
+                        this._state = HOVERING;
+                    } else {
+                        if (this._currentAngleMeasurement) {
+                            this._currentAngleMeasurement.destroy();
+                            this._currentAngleMeasurement = null;
+                            this._previousAngleMeasurement = null;
+                            this._state = HOVERING;
+                        }
+                    }
+                    break;
+            }
+        });
+
+        this._onHoverNothing = cameraControl.on("hoverOff", e => {
+            over = false;
+            if (this._currentAngleMeasurement) {
+                switch (this._state) {
+                    case HOVERING:
+                    case FINDING_ORIGIN:
+                        this._currentAngleMeasurement.originVisible = false;
+                        break;
+                    case FINDING_CORNER:
+                        this._currentAngleMeasurement.cornerVisible = false;
+                        this._currentAngleMeasurement.originWireVisible = false;
+                        this._currentAngleMeasurement.targetVisible = false;
+                        this._currentAngleMeasurement.targetWireVisible = false;
+                        this._currentAngleMeasurement.angleVisible = false;
+                        break;
+                    case FINDING_TARGET:
+                        this._currentAngleMeasurement.targetVisible = false;
+                        this._currentAngleMeasurement.targetWireVisible = false;
+                        this._currentAngleMeasurement.angleVisible = false;
+                        break;
+
+                }
+                document.body.style.cursor = "default";
+            }
+        });
+
+        this._active = true;
+    }
+
+    /**
+     * Deactivates this AngleMeasurementsControl, making it unresponsive to input.
+     *
+     * Destroys any {@link AngleMeasurement} under construction.
+     */
+    deactivate() {
+
+        if (!this._active) {
+            return;
+        }
+
+        this.reset();
+
+        const cameraControl = this.plugin.viewer.cameraControl;
+        const input = this.plugin.viewer.scene.input;
+
+        input.off(this._onInputMouseDown);
+        input.off(this._onInputMouseUp);
+
+        cameraControl.off(this._onhoverSurface);
+        cameraControl.off(this._onPickedSurface);
+        cameraControl.off(this._onHoverNothing);
+        cameraControl.off(this._onPickedNothing);
+
+        this._currentAngleMeasurement = null;
+
+        this._active = false;
+    }
+
+    /**
+     * Resets this AngleMeasurementsControl.
+     *
+     * Destroys any {@link AngleMeasurement} under construction.
+     *
+     * Does nothing if the AngleMeasurementsControl is not active.
+     */
+    reset() {
+        
+        if (!this._active) {
+            return;
+        }
+        
+        if (this._currentAngleMeasurement) {
+            this._currentAngleMeasurement.destroy();
+            this._currentAngleMeasurement = null;
+        }
+        
+        this._previousAngleMeasurement = null;
+        
+        this._state = HOVERING;
+    }
+
+    /**
+     * @private
+     */
+    destroy() {
+        this.deactivate();
+        super.destroy();
+    }
+
+}
+
+export {AngleMeasurementsControl};

package/src/lib/gltf/assets/yjkkit-sdk/src/plugins/AngleMeasurementsPlugin/AngleMeasurementsPlugin.js

@@ -0,0 +1,262 @@
+import {Plugin} from "../../viewer/Plugin.js";
+import {AngleMeasurement} from "./AngleMeasurement.js";
+import {AngleMeasurementsControl} from "./AngleMeasurementsControl.js";
+
+/**
+ * {@link Viewer} plugin for measuring angles.
+ *
+ * [<img src="https://user-images.githubusercontent.com/83100/63641903-61488180-c6b6-11e9-8e00-895b9d16dc4b.gif">](https://yjkkit.github.io/yjkkit-sdk/examples/#measurements_angle_createWithMouse)
+ *
+ * * [[Example 1: Model with angle measurements](https://yjkkit.github.io/yjkkit-sdk/examples/#measurements_angle_modelWithMeasurements)]
+ * * [[Example 2: Create angle measurements with mouse](https://yjkkit.github.io/yjkkit-sdk/examples/#measurements_angle_createWithMouse)]
+ *
+ * ## Overview
+ *
+ * * An {@link AngleMeasurement} shows the angle between two connected 3D line segments, given
+ * as three positions on the surface(s) of one or more {@link Entity}s.
+ * * As shown on the screen capture above, a AngleMeasurement has two wires that show the line segments, with a label that shows the angle between them.
+ * * Create AngleMeasurements programmatically with {@link AngleMeasurementsPlugin#createMeasurement}.
+ * * Create AngleMeasurements interactively using the {@link AngleMeasurementsControl}, located at {@link AngleMeasurementsPlugin#control}.
+ * * Existing AngleMeasurements are registered by ID in {@link AngleMeasurementsPlugin#measurements}.
+ * * Destroy AngleMeasurements using {@link AngleMeasurementsPlugin#destroyMeasurement}.
+ * * Configure global measurement units and scale via {@link Metrics}, located at {@link Scene#metrics}
+ *
+ * ## Example 1: Creating AngleMeasurements Programmatically
+ *
+ * In our first example, we'll use an {@link XKTLoaderPlugin} to load a model, and then use a AngleMeasurementsPlugin to programmatically create two {@link AngleMeasurement}s.
+ *
+ * Note how each AngleMeasurement has ````origin````, ````corner```` and  ````target````, which each indicate a 3D World-space
+ * position on the surface of an {@link Entity}. These can be aon the same Entity, or on different Entitys.
+ *
+ * [[Run example](https://yjkkit.github.io/yjkkit-sdk/examples/#measurements_angle_modelWithMeasurements)]
+ *
+ * ````JavaScript
+ * import {Viewer, XKTLoaderPlugin, AngleMeasurementsPlugin} from "yjkkit-sdk.es.js";
+ *
+ * const viewer = new Viewer({
+ *     canvasId: "myCanvas",
+ *     transparent: true
+ * });
+ *
+ * viewer.scene.camera.eye = [-2.37, 18.97, -26.12];
+ * viewer.scene.camera.look = [10.97, 5.82, -11.22];
+ * viewer.scene.camera.up = [0.36, 0.83, 0.40];
+ *
+ * const xktLoader = new XKTLoaderPlugin(viewer);
+ *
+ * const angleMeasurements = new AngleMeasurementsPlugin(viewer);
+ *
+ * const model = xktLoader.load({
+ *      src: "./models/xkt/duplex/duplex.xkt"
+ * });
+ *
+ * model.on("loaded", () => {
+ *
+ *      const myMeasurement1 = angleMeasurements.createMeasurement({
+ *          id: "myAngleMeasurement1",
+ *          origin: {
+ *              entity: viewer.scene.objects["2O2Fr$t4X7Zf8NOew3FLOH"],
+ *              worldPos: [0.044, 5.998, 17.767]
+ *          },
+ *          corner: {
+ *              entity: viewer.scene.objects["2O2Fr$t4X7Zf8NOew3FLOH"],
+ *              worldPos: [0.044, 5.998, 17.767]
+ *          },
+ *          target: {
+ *              entity: viewer.scene.objects["2O2Fr$t4X7Zf8NOew3FLOH"],
+ *              worldPos: [4.738, 3.172, 17.768]
+ *          },
+ *          visible: true
+ *      });
+ *
+ *      const myMeasurement2 = angleMeasurements.createMeasurement({
+ *          id: "myAngleMeasurement2",
+ *          origin: {
+ *              entity: viewer.scene.objects["2O2Fr$t4X7Zf8NOew3FNr2"],
+ *              worldPos: [0.457, 2.532, 17.766]
+ *          },
+ *          corner: {
+ *              entity: viewer.scene.objects["2O2Fr$t4X7Zf8NOew3FNr2"],
+ *              worldPos: [0.457, 2.532, 17.766]
+ *          },
+ *          target: {
+ *              entity: viewer.scene.objects["1CZILmCaHETO8tf3SgGEXu"],
+ *              worldPos: [0.436, 0.001, 22.135]
+ *          },
+ *          visible: true
+ *      });
+ * });
+ * ````
+ *
+ * ## Example 2: Creating AngleMeasurements Interactively
+ *
+ * In our second example, we'll use an {@link XKTLoaderPlugin} to load a model, then we'll use the AngleMeasurementsPlugin's {@link AngleMeasurementsControl} to interactively create {@link AngleMeasurement}s with mouse or touch input.
+ *
+ * After we've activated the AngleMeasurementsControl, the first click on any {@link Entity} begins constructing a AngleMeasurement, fixing its
+ * origin to that Entity. The next click on any Entity will fix the AngleMeasurement's corner, and the next click after
+ * that will fix its target and complete the AngleMeasurement.
+ *
+ * The AngleMeasurementControl will then wait for the next click on any Entity, to begin constructing
+ * another AngleMeasurement, and so on, until deactivated again.
+ *
+ * [[Run example](https://yjkkit.github.io/yjkkit-sdk/examples/#measurements_angle_createWithMouse)]
+ *
+ * ````JavaScript
+ * import {Viewer, XKTLoaderPlugin, AngleMeasurementsPlugin} from "yjkkit-sdk.es.js";
+ *
+ * const viewer = new Viewer({
+ *     canvasId: "myCanvas",
+ *     transparent: true
+ * });
+ *
+ * viewer.scene.camera.eye = [-2.37, 18.97, -26.12];
+ * viewer.scene.camera.look = [10.97, 5.82, -11.22];
+ * viewer.scene.camera.up = [0.36, 0.83, 0.40];
+ *
+ * const xktLoader = new XKTLoaderPlugin(viewer);
+ *
+ * const angleMeasurements = new AngleMeasurementsPlugin(viewer);
+ *
+ * const model = xktLoader.load({
+ *     src: "./models/xkt/duplex/duplex.xkt"
+ * });
+ *
+ * angleMeasurements.control.activate();  // <------------ Activate the AngleMeasurementsControl
+ * ````
+ */
+class AngleMeasurementsPlugin extends Plugin {
+
+    /**
+     * @constructor
+     * @param {Viewer} viewer The Viewer.
+     * @param {Object} [cfg]  Plugin configuration.
+     * @param {String} [cfg.id="AngleMeasurements"] Optional ID for this plugin, so that we can find it within {@link Viewer#plugins}.
+     * @param {HTMLElement} [cfg.container] Container DOM element for markers and labels. Defaults to ````document.body````.
+    */
+    constructor(viewer, cfg = {}) {
+
+        super("AngleMeasurements", viewer);
+
+        this._container = cfg.container || document.body;
+
+        this._control = new AngleMeasurementsControl(this);
+
+        this._measurements = {};
+    }
+
+    /**
+     * @private
+     */
+    send(name, value) {
+
+    }
+
+    /**
+     * Gets the {@link AngleMeasurementsControl}, which creates {@link AngleMeasurement}s from user input.
+     *
+     * @type {AngleMeasurementsControl}
+     */
+    get control() {
+        return this._control;
+    }
+
+    /**
+     * Gets the existing {@link AngleMeasurement}s, each mapped to its {@link AngleMeasurement#id}.
+     *
+     * @type {{String:AngleMeasurement}}
+     */
+    get measurements() {
+        return this._measurements;
+    }
+
+    /**
+     * Creates an {@link AngleMeasurement}.
+     *
+     * The AngleMeasurement is then registered by {@link AngleMeasurement#id} in {@link AngleMeasurementsPlugin#measurements}.
+     *
+     * @param {Object} params {@link AngleMeasurement} configuration.
+     * @param {String} params.id Unique ID to assign to {@link AngleMeasurement#id}. The AngleMeasurement will be registered by this in {@link AngleMeasurementsPlugin#measurements} and {@link Scene.components}. Must be unique among all components in the {@link Viewer}.
+     * @param {Number[]} params.origin.worldPos Origin World-space 3D position.
+     * @param {Entity} params.origin.entity Origin Entity.
+     * @param {Number[]} params.corner.worldPos Corner World-space 3D position.
+     * @param {Entity} params.corner.entity Corner Entity.
+     * @param {Number[]} params.target.worldPos Target World-space 3D position.
+     * @param {Entity} params.target.entity Target Entity.
+     * @param {Boolean} [params.visible=true] Whether to initially show the {@link AngleMeasurement}.
+     * @returns {AngleMeasurement} The new {@link AngleMeasurement}.
+     */
+    createMeasurement(params = {}) {
+        if (this.viewer.scene.components[params.id]) {
+            this.error("Viewer scene component with this ID already exists: " + params.id);
+            delete params.id;
+        }
+        const origin = params.origin;
+        const corner = params.corner;
+        const target = params.target;
+        const measurement = new AngleMeasurement(this, {
+            id: params.id,
+            plugin: this,
+            container: this._container,
+            origin: {
+                entity: origin.entity,
+                worldPos: origin.worldPos
+            },
+            corner: {
+                entity: corner.entity,
+                worldPos: corner.worldPos
+            },
+            target: {
+                entity: target.entity,
+                worldPos: target.worldPos
+            },
+
+            visible: params.visible,
+            originVisible: true,
+            originWireVisible: true,
+            cornerVisible: true,
+            targetWireVisible: true,
+            targetVisible: true,
+        });
+        this._measurements[measurement.id] = measurement;
+        measurement.on("destroyed", () => {
+            delete this._measurements[measurement.id];
+        });
+        return measurement;
+    }
+
+    /**
+     * Destroys a {@link AngleMeasurement}.
+     *
+     * @param {String} id ID of AngleMeasurement to destroy.
+     */
+    destroyMeasurement(id) {
+        const measurement = this._measurements[id];
+        if (!measurement) {
+            this.log("AngleMeasurement not found: " + id);
+            return;
+        }
+        measurement.destroy();
+    }
+
+    /**
+     * Destroys all {@link AngleMeasurement}s.
+     */
+    clear() {
+        const ids = Object.keys(this._measurements);
+        for (var i = 0, len = ids.length; i < len; i++) {
+            this.destroyMeasurement(ids[i]);
+        }
+    }
+
+    /**
+     * Destroys this AngleMeasurementsPlugin.
+     *
+     * Destroys all {@link AngleMeasurement}s first.
+     */
+    destroy() {
+        this.clear();
+        super.destroy();
+    }
+}
+
+export {AngleMeasurementsPlugin}

package/src/lib/gltf/assets/yjkkit-sdk/src/plugins/AngleMeasurementsPlugin/index.js

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