@xeokit/xeokit-sdk 2.6.0-beta-11 → 2.6.0-beta-13

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@xeokit/xeokit-sdk",
-  "version": "2.6.0-beta-11",
+  "version": "2.6.0-beta-13",
   "description": "Web Programming Toolkit for 3D/2D BIM and AEC Graphics",
   "module": "./dist/xeokit-sdk.es.js",
   "main": "./dist/xeokit-sdk.cjs.js",

package/src/extras/PointerCircle/PointerCircle.js

@@ -0,0 +1,135 @@
+const SHRINK_SPEED = 3;
+
+/**
+ * A PointerCircle shows a circle, centered at the position of the
+ * mouse or touch pointer.
+ */
+export class PointerCircle {
+
+    /**
+     * Constructs a new PointerCircle.
+     * @param viewer The Viewer
+     * @param [cfg] PointerCircle configuration.
+     * @param [cfg.active=true] Whether PointerCircle is active. The PointerCircle can only be shown when this is `true` (default).
+     */
+    constructor(viewer, cfg = {}) {
+
+        this.viewer = viewer;
+        this.scene = this.viewer.scene;
+        this._circleDiv = document.createElement('div');
+        this.viewer.scene.canvas.canvas.parentNode.insertBefore(this._circleDiv, this.viewer.scene.canvas.canvas);
+        this._circleDiv.style.backgroundColor = "transparent";
+        this._circleDiv.style.border = "2px solid green";
+        this._circleDiv.style.borderRadius = "50px";
+        this._circleDiv.style.width = "50px";
+        this._circleDiv.style.height = "50px";
+        this._circleDiv.style.margin = "-200px -200px";
+        this._circleDiv.style.zIndex = "100000";
+        this._circleDiv.style.position = "absolute";
+        this._circleDiv.style.pointerEvents = "none";
+
+        this._circlePos = null;
+
+        this._circleMaxRadius = 200;
+        this._circleMinRadius = 2;
+
+        this._active = (cfg.active !== false);
+        this._visible = false;
+
+        this._running = false;
+        this._destroyed = false;
+    }
+
+    /**
+     * Show the circle at the given canvas coordinates and begin shrinking it.
+     */
+    start(circlePos) {
+        if (this._destroyed) {
+            return;
+        }
+        this._circlePos = circlePos;
+        this._running = false;
+        this._circleRadius = this._circleMaxRadius;
+        this._circleDiv.style.borderRadius = `${this._circleRadius}px`;
+        this._circleDiv.style.marginLeft = `${this._circlePos[0] - this._circleRadius}px`;
+        this._circleDiv.style.marginTop = `${this._circlePos[1] - this._circleRadius}px`;
+
+        const startValue = this._circleMaxRadius;
+        const endValue = 2;
+        let startTime;
+        const duration = 300;
+
+        const animateCircle = (currentTime) => {
+            if (!this._running) {
+                return;
+            }
+            if (!startTime) {
+                startTime = currentTime;
+            }
+
+            const elapsedTime = currentTime - startTime;
+            const progress = Math.min(elapsedTime / duration, 1);
+            const interpolatedValue = startValue + (endValue - startValue) * progress;
+
+            this._circleRadius = interpolatedValue;
+            this._circleDiv.style.width = `${this._circleRadius}px`;
+            this._circleDiv.style.height = `${this._circleRadius}px`;
+            this._circleDiv.style.marginLeft = `${this._circlePos[0] - this._circleRadius / 2}px`;
+            this._circleDiv.style.marginTop = `${this._circlePos[1] - this._circleRadius / 2}px`;
+
+            if (progress < 1) {
+                requestAnimationFrame(animateCircle);
+            }
+        }
+        this._running = true;
+        requestAnimationFrame(animateCircle);
+        this._circleDiv.style.visibility = "visible";
+    }
+
+    /**
+     * Stop the shricking circle and hide it.
+     */
+    stop() {
+        if (this._destroyed) {
+            return;
+        }
+        this._running = false;
+        this._circleRadius = this._circleMaxRadius;
+        this._circleDiv.style.borderRadius = `${this._circleRadius}px`;
+        this._circleDiv.style.visibility = "hidden";
+    }
+
+    /**
+     * Sets the zoom factor for the lens.
+     *
+     * This is `2` by default.
+     *
+     * @param durationMs
+     */
+    set durationMs(durationMs) {
+        this.stop();
+        this._durationMs = durationMs;
+    }
+
+    /**
+     * Gets the zoom factor for the lens.
+     *
+     * This is `2` by default.
+     *
+     * @returns Number
+     */
+    get durationMs() {
+        return this._durationMs;
+    }
+
+    /**
+     * Destroys this PointerCircle.
+     */
+    destroy() {
+        if (!this._destroyed) {
+            this.stop();
+            document.body.removeChild(this._circleDiv);
+            this._destroyed = true;
+        }
+    }
+}

package/src/extras/PointerCircle/index.js

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

package/src/extras/index.js

@@ -1,4 +1,5 @@
 export * from "./ContextMenu/index.js";
 export * from "./PointerLens/index.js";
 export * from "./collision/index.js";
-export * from "./MarqueePicker/index.js";
+export * from "./MarqueePicker/index.js";
+export * from "./PointerCircle/index.js";

package/src/plugins/AngleMeasurementsPlugin/AngleMeasurementsPlugin.js

@@ -203,6 +203,46 @@ import {AngleMeasurementsMouseControl} from "./AngleMeasurementsMouseControl.js"
  *         });
  * });
  * ````
+ *
+ * ## Example 5: Creating AngleMeasurements with Touch Input
+ *
+ * In our fifth example, we'll show how to create angle measurements with touch input, with snapping
+ * to the nearest vertex or edge. While creating the measurements, a long-touch when setting the
+ * start, corner or end point will cause the point to snap to the nearest vertex or edge. A quick
+ * touch-release will immediately set the point at the tapped position on the object surface.
+ *
+ * [[Run example](https://xeokit.github.io/xeokit-sdk/examples/measurement/#angle_createWithTouch_snapping)]
+ *
+ * ````javascript
+ * import {Viewer, XKTLoaderPlugin, AngleMeasurementsPlugin, AngleMeasurementsTouchControl} from "xeokit-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"
+ * });
+ *
+ * const angleMeasurements = new AngleMeasurementsPlugin(viewer);
+ *
+ * const angleMeasurementsTouchControl  = new AngleMeasurementsTouchControl(angleMeasurements, {
+ *     pointerLens : new PointerLens(viewer),
+ *     snapToVertex: true,
+ *     snapToEdge: true
+ * })
+ *
+ * angleMeasurementsTouchControl.activate();
+ * ````
  */
 export class AngleMeasurementsPlugin extends Plugin {