@xeokit/xeokit-sdk 2.6.23 → 2.6.25

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@xeokit/xeokit-sdk",
-  "version": "2.6.23",
+  "version": "2.6.25",
   "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/plugins/AngleMeasurementsPlugin/AngleMeasurement.js

@@ -1,6 +1,5 @@
-import {Marker} from "../../viewer/scene/marker/Marker.js";
+import {Dot3D} from "../lib/ui/index.js";
 import {Wire} from "../lib/html/Wire.js";
-import {Dot} from "../lib/html/Dot.js";
 import {Label} from "../lib/html/Label.js";
 import {math} from "../../viewer/scene/math/math.js";
 import {Component} from "../../viewer/scene/Component.js";
@@ -37,10 +36,6 @@ class AngleMeasurement extends Component {
 
         var scene = this.plugin.viewer.scene;
 
-        this._originMarker = new Marker(scene, cfg.origin);
-        this._cornerMarker = new Marker(scene, cfg.corner);
-        this._targetMarker = new Marker(scene, cfg.target);
-
         this._originWorld = math.vec3();
         this._cornerWorld = math.vec3();
         this._targetWorld = math.vec3();
@@ -80,7 +75,7 @@ class AngleMeasurement extends Component {
             this.plugin.viewer.scene.canvas.canvas.dispatchEvent(new MouseEvent('mousemove', event));
         };
 
-        this._originDot = new Dot(this._container, {
+        this._originDot = new Dot3D(scene, cfg.origin, this._container, {
             fillColor: this._color,
             zIndex: plugin.zIndex !== undefined ? plugin.zIndex + 2 : undefined,
             onMouseOver,
@@ -91,7 +86,7 @@ class AngleMeasurement extends Component {
             onMouseMove,
             onContextMenu
         });
-        this._cornerDot = new Dot(this._container, {
+        this._cornerDot = new Dot3D(scene, cfg.corner, this._container, {
             fillColor: this._color,
             zIndex: plugin.zIndex !== undefined ? plugin.zIndex + 2 : undefined,
             onMouseOver,
@@ -102,7 +97,7 @@ class AngleMeasurement extends Component {
             onMouseMove,
             onContextMenu
         });
-        this._targetDot = new Dot(this._container, {
+        this._targetDot = new Dot3D(scene, cfg.target, this._container, {
             fillColor: this._color,
             zIndex: plugin.zIndex !== undefined ? plugin.zIndex + 2 : undefined,
             onMouseOver,
@@ -169,19 +164,19 @@ class AngleMeasurement extends Component {
         this._labelsVisible = false;
         this._clickable = false;
 
-        this._originMarker.on("worldPos", (value) => {
+        this._originDot.on("worldPos", (value) => {
             this._originWorld.set(value || [0, 0, 0]);
             this._wpDirty = true;
             this._needUpdate(0); // No lag
         });
 
-        this._cornerMarker.on("worldPos", (value) => {
+        this._cornerDot.on("worldPos", (value) => {
             this._cornerWorld.set(value || [0, 0, 0]);
             this._wpDirty = true;
             this._needUpdate(0); // No lag
         });
 
-        this._targetMarker.on("worldPos", (value) => {
+        this._targetDot.on("worldPos", (value) => {
             this._targetWorld.set(value || [0, 0, 0]);
             this._wpDirty = true;
             this._needUpdate(0); // No lag
@@ -287,9 +282,9 @@ class AngleMeasurement extends Component {
         if (this._cpDirty) {
 
             const near = -0.3;
-            const zOrigin = this._originMarker.viewPos[2];
-            const zCorner = this._cornerMarker.viewPos[2];
-            const zTarget = this._targetMarker.viewPos[2];
+            const zOrigin = this._originDot.viewPos[2];
+            const zCorner = this._cornerDot.viewPos[2];
+            const zTarget = this._targetDot.viewPos[2];
 
             if (zOrigin > near || zCorner > near || zTarget > near) {
 
@@ -326,10 +321,6 @@ class AngleMeasurement extends Component {
                 j += 2;
             }
 
-            this._originDot.setPos(cp[0], cp[1]);
-            this._cornerDot.setPos(cp[2], cp[3]);
-            this._targetDot.setPos(cp[4], cp[5]);
-
             this._originWire.setStartAndEnd(cp[0], cp[1], cp[2], cp[3]);
             this._targetWire.setStartAndEnd(cp[2], cp[3], cp[4], cp[5]);
 
@@ -410,30 +401,30 @@ class AngleMeasurement extends Component {
     }
 
     /**
-     * Gets the origin {@link Marker}.
+     * Gets the origin {@link Dot3D}.
      *
-     * @type {Marker}
+     * @type {Dot3D}
      */
     get origin() {
-        return this._originMarker;
+        return this._originDot;
     }
 
     /**
-     * Gets the corner {@link Marker}.
+     * Gets the corner {@link Dot3D}.
      *
-     * @type {Marker}
+     * @type {Dot3D}
      */
     get corner() {
-        return this._cornerMarker;
+        return this._cornerDot;
     }
 
     /**
-     * Gets the target {@link Marker}.
+     * Gets the target {@link Dot3D}.
      *
-     * @type {Marker}
+     * @type {Dot3D}
      */
     get target() {
-        return this._targetMarker;
+        return this._targetDot;
     }
 
     /**
@@ -503,7 +494,7 @@ class AngleMeasurement extends Component {
     }
 
     /**
-     * Sets if the origin {@link Marker} is visible.
+     * Sets if the origin {@link Dot3D} is visible.
      *
      * @type {Boolean}
      */
@@ -516,7 +507,7 @@ class AngleMeasurement extends Component {
     }
 
     /**
-     * Gets if the origin {@link Marker} is visible.
+     * Gets if the origin {@link Dot3D} is visible.
      *
      * @type {Boolean}
      */
@@ -525,7 +516,7 @@ class AngleMeasurement extends Component {
     }
 
     /**
-     * Sets if the corner {@link Marker} is visible.
+     * Sets if the corner {@link Dot3D} is visible.
      *
      * @type {Boolean}
      */
@@ -538,7 +529,7 @@ class AngleMeasurement extends Component {
     }
 
     /**
-     * Gets if the corner {@link Marker} is visible.
+     * Gets if the corner {@link Dot3D} is visible.
      *
      * @type {Boolean}
      */
@@ -547,7 +538,7 @@ class AngleMeasurement extends Component {
     }
 
     /**
-     * Sets if the target {@link Marker} is visible.
+     * Sets if the target {@link Dot3D} is visible.
      *
      * @type {Boolean}
      */
@@ -560,7 +551,7 @@ class AngleMeasurement extends Component {
     }
 
     /**
-     * Gets if the target {@link Marker} is visible.
+     * Gets if the target {@link Dot3D} is visible.
      *
      * @type {Boolean}
      */

package/src/plugins/AngleMeasurementsPlugin/index.js

@@ -4,6 +4,7 @@ export * from "./AngleMeasurementsMouseControl.js";
 export * from "./AngleMeasurementsTouchControl.js";
 
 import {Component} from "../../viewer/scene/Component.js";
+import {math} from "../../viewer/scene/math/math.js";
 import {activateDraggableDots} from "../../../src/plugins/lib/ui/index.js";
 
 class AngleMeasurementEditControl extends Component {
@@ -28,11 +29,30 @@ class AngleMeasurementEditControl extends Component {
             viewer: viewer,
             handleMouseEvents: handleMouseEvents,
             handleTouchEvents: handleTouchEvents,
-            snapping: cfg.snapping,
             pointerLens: cfg.pointerLens,
-            color: measurement.color,
-            markers: [ measurement.origin, measurement.corner, measurement.target ],
-            onEdit: () => this.fire("edited")
+            dots: [ measurement.origin, measurement.corner, measurement.target ],
+            ray2WorldPos: (orig, dir, canvasPos) => {
+                const tryPickWorldPos = snap => {
+                    const pickResult = viewer.scene.pick({
+                        canvasPos: canvasPos,
+                        snapToEdge: snap,
+                        snapToVertex: snap,
+                        pickSurface: true  // <<------ This causes picking to find the intersection point on the entity
+                    });
+
+                    // If - when snapping - no pick found, then try w/o snapping
+                    return (pickResult && pickResult.worldPos) ? pickResult.worldPos : (snap && tryPickWorldPos(false));
+                };
+
+                return tryPickWorldPos(!!cfg.snapping);
+            },
+            onEnd: (initPos, dot) => {
+                const changed = ! math.compareVec3(initPos, dot.worldPos);
+                if (changed) {
+                    this.fire("edited");
+                }
+                return changed;
+            }
         });
 
         const destroyCb = measurement.on("destroyed", cleanup);

package/src/plugins/AnnotationsPlugin/Annotation.js

@@ -1,6 +1,11 @@
+import {math} from '../../viewer/scene/math/math.js';
 import {Marker} from "../../viewer/scene/marker/Marker.js";
 import {utils} from "../../viewer/scene/utils.js";
 
+const tempVec3a = math.vec3();
+const tempVec3b = math.vec3();
+const tempVec3c = math.vec3();
+
 /**
  * A {@link Marker} with an HTML label attached to it, managed by an {@link AnnotationsPlugin}.
  *
@@ -40,6 +45,9 @@ class Annotation extends Marker {
             this._marker.addEventListener("click", this._onMouseClickedExternalMarker = () => {
                 this.plugin.fire("markerClicked", this);
             });
+            this._marker.addEventListener("contextmenu", this._onContextMenuExtenalMarker = () => {
+                this.plugin.fire("contextmenu", this);
+            });
             this._marker.addEventListener("mouseenter", this._onMouseEnterExternalMarker = () => {
                 this.plugin.fire("markerMouseEnter", this);
             });
@@ -159,6 +167,10 @@ class Annotation extends Marker {
             this._marker.addEventListener("click", () => {
                 this.plugin.fire("markerClicked", this);
             });
+            this._marker.addEventListener("contextmenu", e => {
+                e.preventDefault();
+                this.plugin.fire("contextmenu", this);
+            });
             this._marker.addEventListener("mouseenter", () => {
                 this.plugin.fire("markerMouseEnter", this);
             });
@@ -220,6 +232,24 @@ class Annotation extends Marker {
         return template;
     }
 
+    /**
+     * Sets the Marker's worldPos and entity properties based on passed {@link PickResult}
+     *
+     * @param {PickResult} pickResult A PickResult to position the Marker at.
+     */
+    setFromPickResult(pickResult) {
+        if (!pickResult.worldPos || !pickResult.worldNormal) {
+            this.error("Param 'pickResult' does not have both worldPos and worldNormal");
+        } else {
+            const normalizedWorldNormal = math.normalizeVec3(pickResult.worldNormal, tempVec3a);
+            const offset = (this.plugin && this.plugin.surfaceOffset) || 0;
+            const offsetVec = math.mulVec3Scalar(normalizedWorldNormal, offset, tempVec3b);
+            const offsetWorldPos = math.addVec3(pickResult.worldPos, offsetVec, tempVec3c);
+            this.entity = pickResult.entity;
+            this.worldPos = offsetWorldPos;
+        }
+    }
+
     /**
      * Sets whether or not to show this Annotation's marker.
      *
@@ -350,6 +380,7 @@ class Annotation extends Marker {
                 this._marker = null;
             } else {
                 this._marker.removeEventListener("click", this._onMouseClickedExternalMarker);
+                this._marker.removeEventListener("contextmenu", this._onContextMenuExtenalMarker);
                 this._marker.removeEventListener("mouseenter", this._onMouseEnterExternalMarker);
                 this._marker.removeEventListener("mouseleave", this._onMouseLeaveExternalMarker);
                 this._marker = null;

package/src/plugins/AnnotationsPlugin/AnnotationsPlugin.js

@@ -3,10 +3,6 @@ import {Annotation} from "./Annotation.js";
 import {utils} from "../../viewer/scene/utils.js";
 import {math} from "../../viewer/scene/math/math.js";
 
-const tempVec3a = math.vec3();
-const tempVec3b = math.vec3();
-const tempVec3c = math.vec3();
-
 /**
  * {@link Viewer} plugin that creates {@link Annotation}s.
  *
@@ -481,24 +477,6 @@ class AnnotationsPlugin extends Plugin {
             this.error("Viewer component with this ID already exists: " + params.id);
             delete params.id;
         }
-        var worldPos;
-        var entity;
-        params.pickResult = params.pickResult || params.pickRecord;
-        if (params.pickResult) {
-            const pickResult = params.pickResult;
-            if (!pickResult.worldPos || !pickResult.worldNormal) {
-                this.error("Param 'pickResult' does not have both worldPos and worldNormal");
-            } else {
-                const normalizedWorldNormal = math.normalizeVec3(pickResult.worldNormal, tempVec3a);
-                const offsetVec = math.mulVec3Scalar(normalizedWorldNormal, this._surfaceOffset, tempVec3b);
-                const offsetWorldPos = math.addVec3(pickResult.worldPos, offsetVec, tempVec3c);
-                worldPos = offsetWorldPos;
-                entity = pickResult.entity;
-            }
-        } else {
-            worldPos = params.worldPos;
-            entity = params.entity;
-        }
 
         var markerElement = null;
         if (params.markerElementId) {
@@ -519,8 +497,6 @@ class AnnotationsPlugin extends Plugin {
         const annotation = new Annotation(this.viewer.scene, {
             id: params.id,
             plugin: this,
-            entity: entity,
-            worldPos: worldPos,
             container: this._container,
             markerElement: markerElement,
             labelElement: labelElement,
@@ -536,6 +512,15 @@ class AnnotationsPlugin extends Plugin {
             projection: params.projection,
             visible: (params.visible !== false)
         });
+
+        params.pickResult = params.pickResult || params.pickRecord;
+        if (params.pickResult) {
+            annotation.setFromPickResult(params.pickResult);
+        } else {
+            annotation.entity = params.entity;
+            annotation.worldPos = params.worldPos;
+        }
+
         this.annotations[annotation.id] = annotation;
         annotation.on("destroyed", () => {
             delete this.annotations[annotation.id];

package/src/plugins/DistanceMeasurementsPlugin/DistanceMeasurement.js

@@ -1,6 +1,5 @@
-import {Marker} from "../../viewer/scene/marker/Marker.js";
+import {Dot3D} from "../lib/ui/index.js";
 import {Wire} from "../lib/html/Wire.js";
-import {Dot} from "../lib/html/Dot.js";
 import {Label} from "../lib/html/Label.js";
 import {math} from "../../viewer/scene/math/math.js";
 import {Component} from "../../viewer/scene/Component.js";
@@ -50,8 +49,6 @@ class DistanceMeasurement extends Component {
         this._eventSubs = {};
 
         var scene = this.plugin.viewer.scene;
-        this._originMarker = new Marker(scene, cfg.origin);
-        this._targetMarker = new Marker(scene, cfg.target);
 
         this._originWorld = math.vec3();
         this._targetWorld = math.vec3();
@@ -97,7 +94,7 @@ class DistanceMeasurement extends Component {
             this.plugin.viewer.scene.canvas.canvas.dispatchEvent(new WheelEvent('wheel', event));
         };
 
-        this._originDot = new Dot(this._container, {
+        this._originDot = new Dot3D(scene, cfg.origin, this._container, {
             fillColor: this._color,
             zIndex: plugin.zIndex !== undefined ? plugin.zIndex + 2 : undefined,
             onMouseOver,
@@ -109,7 +106,7 @@ class DistanceMeasurement extends Component {
             onContextMenu
         });
 
-        this._targetDot = new Dot(this._container, {
+        this._targetDot = new Dot3D(scene, cfg.target, this._container, {
             fillColor: this._color,
             zIndex: plugin.zIndex !== undefined ? plugin.zIndex + 2 : undefined,
             onMouseOver,
@@ -256,13 +253,13 @@ class DistanceMeasurement extends Component {
         this._labelsOnWires = false;
         this._clickable = false;
 
-        this._originMarker.on("worldPos", (value) => {
+        this._originDot.on("worldPos", (value) => {
             this._originWorld.set(value || [0,0,0]); 
             this._wpDirty = true;
             this._needUpdate(0); // No lag
         });
 
-        this._targetMarker.on("worldPos", (value) => {
+        this._targetDot.on("worldPos", (value) => {
             this._targetWorld.set(value || [0,0,0]); 
             this._wpDirty = true;
             this._needUpdate(0); // No lag
@@ -424,8 +421,8 @@ class DistanceMeasurement extends Component {
         }
 
         const near = -0.3;
-        const vpz1 = this._originMarker.viewPos[2];
-        const vpz2 = this._targetMarker.viewPos[2];
+        const vpz1 = this._originDot.viewPos[2];
+        const vpz2 = this._targetDot.viewPos[2];
 
         if (vpz1 > near || vpz2 > near) {
 
@@ -474,9 +471,6 @@ class DistanceMeasurement extends Component {
                 j += 2;
             }
 
-            this._originDot.setPos(cp[0], cp[1]);
-            this._targetDot.setPos(cp[6], cp[7]);
-
             this._lengthWire.setStartAndEnd(cp[0], cp[1], cp[6], cp[7]);
 
             this._xAxisWire.setStartAndEnd(cp[0], cp[1], cp[2], cp[3]);
@@ -618,21 +612,21 @@ class DistanceMeasurement extends Component {
     }
 
     /**
-     * Gets the origin {@link Marker}.
+     * Gets the origin {@link Dot3D}.
      *
-     * @type {Marker}
+     * @type {Dot3D}
      */
     get origin() {
-        return this._originMarker;
+        return this._originDot;
     }
 
     /**
-     * Gets the target {@link Marker}.
+     * Gets the target {@link Dot3D}.
      *
-     * @type {Marker}
+     * @type {Dot3D}
      */
     get target() {
-        return this._targetMarker;
+        return this._targetDot;
     }
 
     /**
@@ -701,7 +695,7 @@ class DistanceMeasurement extends Component {
     }
 
     /**
-     * Sets if the origin {@link Marker} is visible.
+     * Sets if the origin {@link Dot3D} is visible.
      *
      * @type {Boolean}
      */
@@ -712,7 +706,7 @@ class DistanceMeasurement extends Component {
     }
 
     /**
-     * Gets if the origin {@link Marker} is visible.
+     * Gets if the origin {@link Dot3D} is visible.
      *
      * @type {Boolean}
      */
@@ -721,7 +715,7 @@ class DistanceMeasurement extends Component {
     }
 
     /**
-     * Sets if the target {@link Marker} is visible.
+     * Sets if the target {@link Dot3D} is visible.
      *
      * @type {Boolean}
      */
@@ -732,7 +726,7 @@ class DistanceMeasurement extends Component {
     }
 
     /**
-     * Gets if the target {@link Marker} is visible.
+     * Gets if the target {@link Dot3D} is visible.
      *
      * @type {Boolean}
      */

package/src/plugins/DistanceMeasurementsPlugin/index.js

@@ -4,6 +4,7 @@ export * from "./DistanceMeasurementsMouseControl.js";
 export * from "./DistanceMeasurementsTouchControl.js";
 
 import {Component} from "../../viewer/scene/Component.js";
+import {math} from "../../viewer/scene/math/math.js";
 import {activateDraggableDots} from "../../../src/plugins/lib/ui/index.js";
 
 class DistanceMeasurementEditControl extends Component {
@@ -28,11 +29,30 @@ class DistanceMeasurementEditControl extends Component {
             viewer: viewer,
             handleMouseEvents: handleMouseEvents,
             handleTouchEvents: handleTouchEvents,
-            snapping: cfg.snapping,
             pointerLens: cfg.pointerLens,
-            color: measurement.color,
-            markers: [ measurement.origin, measurement.target ],
-            onEdit: () => this.fire("edited")
+            dots: [ measurement.origin, measurement.target ],
+            ray2WorldPos: (orig, dir, canvasPos) => {
+                const tryPickWorldPos = snap => {
+                    const pickResult = viewer.scene.pick({
+                        canvasPos: canvasPos,
+                        snapToEdge: snap,
+                        snapToVertex: snap,
+                        pickSurface: true  // <<------ This causes picking to find the intersection point on the entity
+                    });
+
+                    // If - when snapping - no pick found, then try w/o snapping
+                    return (pickResult && pickResult.worldPos) ? pickResult.worldPos : (snap && tryPickWorldPos(false));
+                };
+
+                return tryPickWorldPos(!!cfg.snapping);
+            },
+            onEnd: (initPos, dot) => {
+                const changed = ! math.compareVec3(initPos, dot.worldPos);
+                if (changed) {
+                    this.fire("edited");
+                }
+                return changed;
+            }
         });
 
         const destroyCb = measurement.on("destroyed", cleanup);

package/src/plugins/XKTLoaderPlugin/XKTDefaultDataSource.js

@@ -1,5 +1,4 @@
 import {utils} from "../../viewer/scene/utils.js";
-import {math} from "../../viewer";
 
 /**
  * Default data access strategy for {@link XKTLoaderPlugin}.

package/src/plugins/ZonesPlugin/index.js

@@ -7,7 +7,7 @@ import {PhongMaterial} from "../../viewer/scene/materials/PhongMaterial.js";
 import {math} from "../../viewer/scene/math/math.js";
 import {Mesh} from "../../viewer/scene/mesh/Mesh.js";
 import {Dot} from "../lib/html/Dot.js";
-import {createDraggableDot3D, transformToNode} from "../../../src/plugins/lib/ui/index.js";
+import {activateDraggableDots, Dot3D, transformToNode} from "../../../src/plugins/lib/ui/index.js";
 
 const hex2rgb = function(color) {
     const rgb = idx => parseInt(color.substr(idx + 1, 2), 16) / 255;
@@ -1612,26 +1612,19 @@ export class ZonesPolysurfaceTouchControl extends Component {
 
 export class ZoneEditControl extends Component {
     constructor(zone, cfg, handleMouseEvents, handleTouchEvents) {
-        super(zone.plugin.viewer.scene);
-        const self = this;
+        const viewer = zone.plugin.viewer;
+        const scene = viewer.scene;
+        super(scene);
 
         const altitude = zone._geometry.altitude;
-        const pointerLens = cfg && cfg.pointerLens;
-        const updatePointerLens = (pointerLens
-                                   ? function(canvasPos) {
-                                       pointerLens.visible = !! canvasPos;
-                                       if (canvasPos)
-                                       {
-                                           pointerLens.canvasPos = canvasPos;
-                                       }
-                                   }
-                                   : () => { });
 
         const dots = zone._geometry.planeCoordinates.map(planeCoord => {
-            let initWorldPos, initPlaneCoord;
-            const setPlaneCoord = function(coord) {
-                planeCoord[0] = coord[0];
-                planeCoord[1] = coord[1];
+            const dotParent = scene.canvas.canvas.ownerDocument.body;
+            const dot = new Dot3D(scene, {}, dotParent, { fillColor: zone._color });
+            dot.worldPos = math.vec3([ planeCoord[0], altitude, planeCoord[1] ]);
+            dot.on("worldPos", function() {
+                planeCoord[0] = dot.worldPos[0];
+                planeCoord[1] = dot.worldPos[2];
                 try {
                     zone._rebuildMesh();
                 } catch (e) {
@@ -1640,46 +1633,29 @@ export class ZoneEditControl extends Component {
                         zone._zoneMesh = null;
                     }
                 }
-            };
-
-            const dot = createDraggableDot3D({
-                handleMouseEvents: handleMouseEvents,
-                handleTouchEvents: handleTouchEvents,
-                viewer: zone.plugin.viewer,
-                worldPos: math.vec3([ planeCoord[0], altitude, planeCoord[1] ]),
-                color: zone._color,
-                ray2WorldPos: (orig, dir) => planeIntersect(altitude, math.vec3([ 0, 1, 0 ]), orig, dir),
-                onStart: () => {
-                    initWorldPos = dot.getWorldPos().slice();
-                    initPlaneCoord = planeCoord.slice();
-                    set_other_dots_active(false, dot);
-                },
-                onMove: (canvasPos, worldPos) => {
-                    updatePointerLens(canvasPos);
-                    setPlaneCoord([ worldPos[0], worldPos[2] ]);
-                },
-                onEnd: () => {
-                    if (zone._zoneMesh)
-                    {
-                        self.fire("edited");
-                    }
-                    else
-                    {
-                        dot.setWorldPos(initWorldPos);
-                        setPlaneCoord(initPlaneCoord);
-                    }
-                    updatePointerLens(null);
-                    set_other_dots_active(true, dot);
-                }
             });
             return dot;
         });
-        const set_other_dots_active = (active, dot) => dots.forEach(d => (d !== dot) && d.setActive(active));
-        set_other_dots_active(true);
+
+        const cleanupDrag = activateDraggableDots({
+            viewer: viewer,
+            handleMouseEvents: handleMouseEvents,
+            handleTouchEvents: handleTouchEvents,
+            pointerLens: cfg && cfg.pointerLens,
+            dots: dots,
+            ray2WorldPos: (orig, dir) => planeIntersect(altitude, math.vec3([ 0, 1, 0 ]), orig, dir),
+            onEnd: (initPos, dot) => {
+                if (zone._zoneMesh)
+                {
+                    this.fire("edited");
+                }
+                return !! zone._zoneMesh;
+            }
+        });
 
         const cleanup = function() {
-            dots.forEach(m => m.destroy());
-            updatePointerLens(null);
+            cleanupDrag();
+            dots.forEach(d => d.destroy());
         };
 
         const destroyCb = zone.on("destroyed", cleanup);