@xeokit/xeokit-sdk 2.6.23 → 2.6.26

package/dist/xeokit-sdk.cjs.js

@@ -9529,6 +9529,239 @@ class Plugin {
     }
 }
 
+const os = {
+    isIphoneSafari() {
+        const userAgent = window.navigator.userAgent;
+        const isIphone = /iPhone/i.test(userAgent);
+        const isSafari = /Safari/i.test(userAgent) && !/Chrome/i.test(userAgent);
+
+        return isIphone && isSafari;
+    }
+};
+
+/** @private */
+class Dot {
+
+    constructor(parentElement, cfg = {}) {
+
+        this._highlightClass = "viewer-ruler-dot-highlighted";
+
+        this._x = 0;
+        this._y = 0;
+
+        this._dot = document.createElement('div');
+        this._dot.className += this._dot.className ? ' viewer-ruler-dot' : 'viewer-ruler-dot';
+
+        this._dotClickable = document.createElement('div');
+        this._dotClickable.className += this._dotClickable.className ? ' viewer-ruler-dot-clickable' : 'viewer-ruler-dot-clickable';
+
+        this._visible = !!cfg.visible;
+        this._culled = false;
+
+        var dot = this._dot;
+        var dotStyle = dot.style;
+        dotStyle["border-radius"] = 25 + "px";
+        dotStyle.border = "solid 2px white";
+        dotStyle.background = "lightgreen";
+        dotStyle.position = "absolute";
+        dotStyle["z-index"] = cfg.zIndex === undefined ? "40000005" : cfg.zIndex ;
+        dotStyle.width = 8 + "px";
+        dotStyle.height = 8 + "px";
+        dotStyle.visibility = cfg.visible !== false ? "visible" : "hidden";
+        dotStyle.top = 0 + "px";
+        dotStyle.left = 0 + "px";
+        dotStyle["box-shadow"] = "0 2px 5px 0 #182A3D;";
+        dotStyle["opacity"] = 1.0;
+        dotStyle["pointer-events"] = "none";
+        if (cfg.onContextMenu) ;
+        parentElement.appendChild(dot);
+
+        var dotClickable = this._dotClickable;
+        var dotClickableStyle = dotClickable.style;
+        dotClickableStyle["border-radius"] = 35 + "px";
+        dotClickableStyle.border = "solid 10px white";
+        dotClickableStyle.position = "absolute";
+        dotClickableStyle["z-index"] = cfg.zIndex === undefined ? "40000007" : (cfg.zIndex + 1);
+        dotClickableStyle.width = 8 + "px";
+        dotClickableStyle.height = 8 + "px";
+        dotClickableStyle.visibility = "visible";
+        dotClickableStyle.top = 0 + "px";
+        dotClickableStyle.left = 0 + "px";
+        dotClickableStyle["opacity"] = 0.0;
+        dotClickableStyle["pointer-events"] = "none";
+        if (cfg.onContextMenu) ;
+        parentElement.appendChild(dotClickable);
+
+        dotClickable.addEventListener('click', (event) => {
+            parentElement.dispatchEvent(new MouseEvent('mouseover', event));
+        });
+
+        if (cfg.onMouseOver) {
+            dotClickable.addEventListener('mouseover', (event) => {
+                cfg.onMouseOver(event, this);
+                parentElement.dispatchEvent(new MouseEvent('mouseover', event));
+            });
+        }
+
+        if (cfg.onMouseLeave) {
+            dotClickable.addEventListener('mouseleave', (event) => {
+                cfg.onMouseLeave(event, this);
+            });
+        }
+
+        if (cfg.onMouseWheel) {
+            dotClickable.addEventListener('wheel', (event) => {
+                cfg.onMouseWheel(event, this);
+            });
+        }
+
+        if (cfg.onMouseDown) {
+            dotClickable.addEventListener('mousedown', (event) => {
+                cfg.onMouseDown(event, this);
+            });
+        }
+
+        if (cfg.onMouseUp) {
+            dotClickable.addEventListener('mouseup', (event) => {
+                cfg.onMouseUp(event, this);
+            });
+        }
+
+        if (cfg.onMouseMove) {
+            dotClickable.addEventListener('mousemove', (event) => {
+                cfg.onMouseMove(event, this);
+            });
+        }
+
+        if (cfg.onTouchstart) {
+            dotClickable.addEventListener('touchstart', (event) => {
+                cfg.onTouchstart(event, this);
+            });
+        }
+
+        if (cfg.onTouchmove) {
+            dotClickable.addEventListener('touchmove', (event) => {
+                cfg.onTouchmove(event, this);
+            });
+        }
+
+        if (cfg.onTouchend) {
+            dotClickable.addEventListener('touchend', (event) => {
+                cfg.onTouchend(event, this);
+            });
+        }
+
+        if (cfg.onContextMenu) {
+            if(os.isIphoneSafari()){
+                dotClickable.addEventListener('touchstart', (event) => {
+                    event.preventDefault();
+                    if(this._timeout){
+                        clearTimeout(this._timeout);
+                        this._timeout = null;
+                    }
+                    this._timeout = setTimeout(() => {
+                        event.clientX = event.touches[0].clientX;
+                        event.clientY = event.touches[0].clientY;
+                        cfg.onContextMenu(event, this);
+                        clearTimeout(this._timeout);
+                        this._timeout = null;
+                    }, 500);
+                });
+
+                dotClickable.addEventListener('touchend', (event) => {
+                    event.preventDefault();
+                    //stops short touches from calling the timeout
+                    if(this._timeout) {
+                        clearTimeout(this._timeout);
+                        this._timeout = null;
+                    }
+                } );
+
+            }
+            else {
+                dotClickable.addEventListener('contextmenu', (event) => {
+                    console.log(event);
+                    cfg.onContextMenu(event, this);
+                    event.preventDefault();
+                    event.stopPropagation();
+                    console.log("Label context menu");
+                });
+            }
+            
+        }
+
+        this.setPos(cfg.x || 0, cfg.y || 0);
+        this.setFillColor(cfg.fillColor);
+        this.setBorderColor(cfg.borderColor);
+    }
+
+    setPos(x, y) {
+        this._x = x;
+        this._y = y;
+        var dotStyle = this._dot.style;
+        dotStyle["left"] = (Math.round(x) - 4) + 'px';
+        dotStyle["top"] = (Math.round(y) - 4) + 'px';
+
+        var dotClickableStyle = this._dotClickable.style;
+        dotClickableStyle["left"] = (Math.round(x) - 9) + 'px';
+        dotClickableStyle["top"] = (Math.round(y) - 9) + 'px';
+    }
+
+    setFillColor(color) {
+        this._dot.style.background = color || "lightgreen";
+    }
+
+    setBorderColor(color) {
+        this._dot.style.border = "solid 2px" + (color || "black");
+    }
+
+    setOpacity(opacity) {
+        this._dot.style.opacity = opacity;
+    }
+
+    setVisible(visible) {
+        if (this._visible === visible) {
+            return;
+        }
+        this._visible = !!visible;
+        this._dot.style.visibility = this._visible && !this._culled ? "visible" : "hidden";
+    }
+
+    setCulled(culled) {
+        if (this._culled === culled) {
+            return;
+        }
+        this._culled = !!culled;
+        this._dot.style.visibility = this._visible && !this._culled ? "visible" : "hidden";
+    }
+
+    setClickable(clickable) {
+        this._dotClickable.style["pointer-events"] = (clickable) ? "all" : "none";
+    }
+
+    setHighlighted(highlighted) {
+        if (this._highlighted === highlighted) {
+            return;
+        }
+        this._highlighted = !!highlighted;
+        if (this._highlighted) {
+            this._dot.classList.add(this._highlightClass);
+        } else {
+            this._dot.classList.remove(this._highlightClass);
+        }
+    }
+    
+    destroy() {
+        this.setVisible(false);
+        if (this._dot.parentElement) {
+            this._dot.parentElement.removeChild(this._dot);
+        }
+        if (this._dotClickable.parentElement) {
+            this._dotClickable.parentElement.removeChild(this._dotClickable);
+        }
+    }
+}
+
 const tempVec3a$L = math.vec3();
 
 /**
@@ -10589,11 +10822,17 @@ class Marker extends Component {
                 return;
             }
             if (this._onEntityDestroyed !== null) {
-                this._entity.model.off(this._onEntityDestroyed);
+                if (this._entity.model) {
+                    this._entity.model.off(this._onEntityDestroyed);
+                } else {
+                    this._entity.off(this._onEntityDestroyed);
+                }
                 this._onEntityDestroyed = null;
             }
             if (this._onEntityModelDestroyed !== null) {
-                this._entity.model.off(this._onEntityModelDestroyed);
+                if (this._entity.model) {
+                    this._entity.model.off(this._onEntityModelDestroyed);
+                }
                 this._onEntityModelDestroyed = null;
             }
         }
@@ -10605,7 +10844,7 @@ class Marker extends Component {
                     this._onEntityModelDestroyed = null;
                 });
             } else {
-                this._onEntityDestroyed = this._entity.model.on("destroyed", () => {
+                this._onEntityDestroyed = this._entity.on("destroyed", () => {
                     this._entity = null;
                     this._onEntityDestroyed = null;
                 });
@@ -10774,15 +11013,286 @@ class Marker extends Component {
     }
 }
 
-const os = {
-    isIphoneSafari() {
-        const userAgent = window.navigator.userAgent;
-        const isIphone = /iPhone/i.test(userAgent);
-        const isSafari = /Safari/i.test(userAgent) && !/Chrome/i.test(userAgent);
+const nop = () => { };
 
-        return isIphone && isSafari;
+function transformToNode(from, to, vec) {
+    const fromRec = from.getBoundingClientRect();
+    const toRec = to.getBoundingClientRect();
+    vec[0] += fromRec.left - toRec.left;
+    vec[1] += fromRec.top  - toRec.top;
+}
+class Dot3D extends Marker {
+    constructor(scene, markerCfg, parentElement, cfg = {}) {
+        super(scene, markerCfg);
+
+        const handler = (cfgEvent, componentEvent) => {
+            return event => {
+                if (cfgEvent) {
+                    cfgEvent(event);
+                }
+                this.fire(componentEvent, event, true);
+            };
+        };
+        this._dot = new Dot(parentElement, {
+            fillColor: cfg.fillColor,
+            zIndex: cfg.zIndex,
+            onMouseOver:   handler(cfg.onMouseOver,   "mouseover"),
+            onMouseLeave:  handler(cfg.onMouseLeave,  "mouseleave"),
+            onMouseWheel:  handler(cfg.onMouseWheel,  "wheel"),
+            onMouseDown:   handler(cfg.onMouseDown,   "mousedown"),
+            onMouseUp:     handler(cfg.onMouseUp,     "mouseup"),
+            onMouseMove:   handler(cfg.onMouseMove,   "mousemove"),
+            onTouchstart:  handler(cfg.onTouchstart,  "touchstart"),
+            onTouchmove:   handler(cfg.onTouchmove,   "touchmove"),
+            onTouchend:    handler(cfg.onTouchend,    "touchend"),
+            onContextMenu: handler(cfg.onContextMenu, "contextmenu")
+        });
+
+        const updateDotPos = () => {
+            const pos = this.canvasPos.slice();
+            transformToNode(scene.canvas.canvas, parentElement, pos);
+            this._dot.setPos(pos[0], pos[1]);
+        };
+
+        this.on("worldPos", updateDotPos);
+
+        const onViewMatrix = scene.camera.on("viewMatrix", updateDotPos);
+        const onProjMatrix = scene.camera.on("projMatrix", updateDotPos);
+        this._cleanup = () => {
+            scene.camera.off(onViewMatrix);
+            scene.camera.off(onProjMatrix);
+            this._dot.destroy();
+        };
     }
-};
+
+    setClickable(value) {
+        this._dot.setClickable(value);
+    }
+
+    setCulled(value) {
+        this._dot.setCulled(value);
+    }
+
+    setFillColor(value) {
+        this._dot.setFillColor(value);
+    }
+
+    setHighlighted(value) {
+        this._dot.setHighlighted(value);
+    }
+
+    setOpacity(value) {
+        this._dot.setOpacity(value);
+    }
+
+    setVisible(value) {
+        this._dot.setVisible(value);
+    }
+
+    destroy() {
+        this._cleanup();
+        super.destroy();
+    }
+
+}
+
+function activateDraggableDot(dot, cfg) {
+    const extractCFG = function(propName, defaultValue) {
+        if (propName in cfg) {
+            return cfg[propName];
+        } else if (defaultValue !== undefined) {
+            return defaultValue;
+        } else {
+            throw "config missing: " + propName;
+        }
+    };
+
+    const viewer = extractCFG("viewer");
+    const ray2WorldPos = extractCFG("ray2WorldPos");
+    const handleMouseEvents = extractCFG("handleMouseEvents", false);
+    const handleTouchEvents = extractCFG("handleTouchEvents", false);
+    const onStart = extractCFG("onStart", nop);
+    const onMove  = extractCFG("onMove",  nop);
+    const onEnd   = extractCFG("onEnd",   nop);
+
+    const scene = viewer.scene;
+    const canvas = scene.canvas.canvas;
+
+    const pickWorldPos = canvasPos => {
+        const origin = math.vec3();
+        const direction = math.vec3();
+        math.canvasPosToWorldRay(canvas, scene.camera.viewMatrix, scene.camera.projMatrix, canvasPos, origin, direction);
+        return ray2WorldPos(origin, direction, canvasPos);
+    };
+
+    const onChange = event => {
+        const canvasPos = math.vec2([ event.clientX, event.clientY ]);
+        transformToNode(canvas.ownerDocument.body, canvas, canvasPos);
+        onMove(canvasPos, pickWorldPos(canvasPos));
+    };
+
+    let currentDrag = null;
+
+    const onDragMove = function(event) {
+        const e = currentDrag.matchesEvent(event);
+        if (e)
+        {
+            onChange(e);
+        }
+    };
+
+    const onDragEnd = function(event) {
+        const e = currentDrag.matchesEvent(event);
+        if (e)
+        {
+            dot.setOpacity(idleOpacity);
+            currentDrag.cleanup();
+            onChange(e);
+            onEnd();
+        }
+    };
+
+    const startDrag = function(matchesEvent, cleanupHandlers) {
+        if (currentDrag) {
+            currentDrag.cleanup();
+        }
+
+        dot.setOpacity(1.0);
+        dot.setClickable(false);
+        viewer.cameraControl.active = false;
+
+        currentDrag = {
+            matchesEvent: matchesEvent,
+            cleanup: function() {
+                currentDrag = null;
+                dot.setClickable(true);
+                viewer.cameraControl.active = true;
+                cleanupHandlers();
+            }
+        };
+
+        onStart();
+    };
+
+    const cleanupDotHandlers = [ ];
+    const dot_on = function(event, callback) {
+        const id = dot.on(event, callback);
+        cleanupDotHandlers.push(() => dot.off(id));
+    };
+
+    if (handleMouseEvents)
+    {
+        dot_on("mouseover",  () => (! currentDrag) && dot.setOpacity(1.0));
+        dot_on("mouseleave", () => (! currentDrag) && dot.setOpacity(idleOpacity));
+        dot_on("mousedown",  event => {
+            if (event.which === 1)
+            {
+                canvas.addEventListener("mousemove", onDragMove);
+                canvas.addEventListener("mouseup",   onDragEnd);
+                startDrag(
+                    event => (event.which === 1) && event,
+                    () => {
+                        canvas.removeEventListener("mousemove", onDragMove);
+                        canvas.removeEventListener("mouseup",   onDragEnd);
+                    });
+            }
+        });
+    }
+
+    if (handleTouchEvents)
+    {
+        let touchStartId;
+        dot_on("touchstart", event => {
+            event.preventDefault();
+            if (event.touches.length === 1)
+            {
+                touchStartId = event.touches[0].identifier;
+                startDrag(
+                    event => [...event.changedTouches].find(e => e.identifier === touchStartId),
+                    () => { touchStartId = null; });
+            }
+        });
+        dot_on("touchmove", event => {
+            event.preventDefault();
+            onDragMove(event);
+        });
+        dot_on("touchend",  event => {
+            event.preventDefault();
+            onDragEnd(event);
+        });
+    }
+
+    const idleOpacity = 0.8;
+    dot.setOpacity(idleOpacity);
+
+    return function() {
+        currentDrag && currentDrag.cleanup();
+        cleanupDotHandlers.forEach(c => c());
+        dot.setOpacity(1.0);
+    };
+}
+function activateDraggableDots(cfg) {
+    const extractCFG = function(propName, defaultValue) {
+        if (propName in cfg) {
+            return cfg[propName];
+        } else if (defaultValue !== undefined) {
+            return defaultValue;
+        } else {
+            throw "config missing: " + propName;
+        }
+    };
+
+    const viewer = extractCFG("viewer");
+    const handleMouseEvents = extractCFG("handleMouseEvents", false);
+    const handleTouchEvents = extractCFG("handleTouchEvents", false);
+    const pointerLens = extractCFG("pointerLens", null);
+    const dots = extractCFG("dots");
+    const ray2WorldPos = extractCFG("ray2WorldPos");
+    const onEnd = extractCFG("onEnd", nop);
+
+    const updatePointerLens = (pointerLens
+                               ? function(canvasPos) {
+                                   pointerLens.visible = !! canvasPos;
+                                   if (canvasPos)
+                                   {
+                                       pointerLens.canvasPos = canvasPos;
+                                   }
+                               }
+                               : () => { });
+
+    const cleanups = dots.map(dot => {
+        let initPos;
+        return activateDraggableDot(dot, {
+            handleMouseEvents: handleMouseEvents,
+            handleTouchEvents: handleTouchEvents,
+            viewer: viewer,
+            ray2WorldPos: (orig, dir, canvasPos) => (ray2WorldPos(orig, dir, canvasPos) || initPos),
+            onStart: () => {
+                initPos = dot.worldPos.slice();
+                setOtherDotsActive(false, dot);
+            },
+            onMove: (canvasPos, worldPos) => {
+                updatePointerLens(canvasPos);
+                dot.worldPos = worldPos;
+            },
+            onEnd: () => {
+                if (! onEnd(initPos, dot)) {
+                    dot.worldPos = initPos;
+                }
+                updatePointerLens(null);
+                setOtherDotsActive(true, dot);
+            }
+        });
+    });
+
+    const setOtherDotsActive = (active, dot) => dots.forEach(d => (d !== dot) && d.setClickable(active));
+    setOtherDotsActive(true);
+
+    return function() {
+        cleanups.forEach(c => c());
+        updatePointerLens(null);
+    };
+}
 
 /** @private */
 class Wire {
@@ -11031,229 +11541,6 @@ class Wire {
     }
 }
 
-/** @private */
-class Dot {
-
-    constructor(parentElement, cfg = {}) {
-
-        this._highlightClass = "viewer-ruler-dot-highlighted";
-
-        this._x = 0;
-        this._y = 0;
-
-        this._dot = document.createElement('div');
-        this._dot.className += this._dot.className ? ' viewer-ruler-dot' : 'viewer-ruler-dot';
-
-        this._dotClickable = document.createElement('div');
-        this._dotClickable.className += this._dotClickable.className ? ' viewer-ruler-dot-clickable' : 'viewer-ruler-dot-clickable';
-
-        this._visible = !!cfg.visible;
-        this._culled = false;
-
-        var dot = this._dot;
-        var dotStyle = dot.style;
-        dotStyle["border-radius"] = 25 + "px";
-        dotStyle.border = "solid 2px white";
-        dotStyle.background = "lightgreen";
-        dotStyle.position = "absolute";
-        dotStyle["z-index"] = cfg.zIndex === undefined ? "40000005" : cfg.zIndex ;
-        dotStyle.width = 8 + "px";
-        dotStyle.height = 8 + "px";
-        dotStyle.visibility = cfg.visible !== false ? "visible" : "hidden";
-        dotStyle.top = 0 + "px";
-        dotStyle.left = 0 + "px";
-        dotStyle["box-shadow"] = "0 2px 5px 0 #182A3D;";
-        dotStyle["opacity"] = 1.0;
-        dotStyle["pointer-events"] = "none";
-        if (cfg.onContextMenu) ;
-        parentElement.appendChild(dot);
-
-        var dotClickable = this._dotClickable;
-        var dotClickableStyle = dotClickable.style;
-        dotClickableStyle["border-radius"] = 35 + "px";
-        dotClickableStyle.border = "solid 10px white";
-        dotClickableStyle.position = "absolute";
-        dotClickableStyle["z-index"] = cfg.zIndex === undefined ? "40000007" : (cfg.zIndex + 1);
-        dotClickableStyle.width = 8 + "px";
-        dotClickableStyle.height = 8 + "px";
-        dotClickableStyle.visibility = "visible";
-        dotClickableStyle.top = 0 + "px";
-        dotClickableStyle.left = 0 + "px";
-        dotClickableStyle["opacity"] = 0.0;
-        dotClickableStyle["pointer-events"] = "none";
-        if (cfg.onContextMenu) ;
-        parentElement.appendChild(dotClickable);
-
-        dotClickable.addEventListener('click', (event) => {
-            parentElement.dispatchEvent(new MouseEvent('mouseover', event));
-        });
-
-        if (cfg.onMouseOver) {
-            dotClickable.addEventListener('mouseover', (event) => {
-                cfg.onMouseOver(event, this);
-                parentElement.dispatchEvent(new MouseEvent('mouseover', event));
-            });
-        }
-
-        if (cfg.onMouseLeave) {
-            dotClickable.addEventListener('mouseleave', (event) => {
-                cfg.onMouseLeave(event, this);
-            });
-        }
-
-        if (cfg.onMouseWheel) {
-            dotClickable.addEventListener('wheel', (event) => {
-                cfg.onMouseWheel(event, this);
-            });
-        }
-
-        if (cfg.onMouseDown) {
-            dotClickable.addEventListener('mousedown', (event) => {
-                cfg.onMouseDown(event, this);
-            });
-        }
-
-        if (cfg.onMouseUp) {
-            dotClickable.addEventListener('mouseup', (event) => {
-                cfg.onMouseUp(event, this);
-            });
-        }
-
-        if (cfg.onMouseMove) {
-            dotClickable.addEventListener('mousemove', (event) => {
-                cfg.onMouseMove(event, this);
-            });
-        }
-
-        if (cfg.onContextMenu) {
-            if(os.isIphoneSafari()){
-                dotClickable.addEventListener('touchstart', (event) => {
-                    event.preventDefault();
-                    if(this._timeout){
-                        clearTimeout(this._timeout);
-                        this._timeout = null;
-                    }
-                    this._timeout = setTimeout(() => {
-                        event.clientX = event.touches[0].clientX;
-                        event.clientY = event.touches[0].clientY;
-                        cfg.onContextMenu(event, this);
-                        clearTimeout(this._timeout);
-                        this._timeout = null;
-                    }, 500);
-                });
-
-                dotClickable.addEventListener('touchend', (event) => {
-                    event.preventDefault();
-                    //stops short touches from calling the timeout
-                    if(this._timeout) {
-                        clearTimeout(this._timeout);
-                        this._timeout = null;
-                    }
-                } );
-
-            }
-            else {
-                dotClickable.addEventListener('contextmenu', (event) => {
-                    console.log(event);
-                    cfg.onContextMenu(event, this);
-                    event.preventDefault();
-                    event.stopPropagation();
-                    console.log("Label context menu");
-                });
-            }
-            
-        }
-
-        if (cfg.onTouchstart) {
-            dotClickable.addEventListener('touchstart', (event) => {
-                cfg.onTouchstart(event, this);
-            });
-        }
-
-        if (cfg.onTouchmove) {
-            dotClickable.addEventListener('touchmove', (event) => {
-                cfg.onTouchmove(event, this);
-            });
-        }
-
-        if (cfg.onTouchend) {
-            dotClickable.addEventListener('touchend', (event) => {
-                cfg.onTouchend(event, this);
-            });
-        }
-
-        this.setPos(cfg.x || 0, cfg.y || 0);
-        this.setFillColor(cfg.fillColor);
-        this.setBorderColor(cfg.borderColor);
-    }
-
-    setPos(x, y) {
-        this._x = x;
-        this._y = y;
-        var dotStyle = this._dot.style;
-        dotStyle["left"] = (Math.round(x) - 4) + 'px';
-        dotStyle["top"] = (Math.round(y) - 4) + 'px';
-
-        var dotClickableStyle = this._dotClickable.style;
-        dotClickableStyle["left"] = (Math.round(x) - 9) + 'px';
-        dotClickableStyle["top"] = (Math.round(y) - 9) + 'px';
-    }
-
-    setFillColor(color) {
-        this._dot.style.background = color || "lightgreen";
-    }
-
-    setBorderColor(color) {
-        this._dot.style.border = "solid 2px" + (color || "black");
-    }
-
-    setOpacity(opacity) {
-        this._dot.style.opacity = opacity;
-    }
-
-    setVisible(visible) {
-        if (this._visible === visible) {
-            return;
-        }
-        this._visible = !!visible;
-        this._dot.style.visibility = this._visible && !this._culled ? "visible" : "hidden";
-    }
-
-    setCulled(culled) {
-        if (this._culled === culled) {
-            return;
-        }
-        this._culled = !!culled;
-        this._dot.style.visibility = this._visible && !this._culled ? "visible" : "hidden";
-    }
-
-    setClickable(clickable) {
-        this._dotClickable.style["pointer-events"] = (clickable) ? "all" : "none";
-    }
-
-    setHighlighted(highlighted) {
-        if (this._highlighted === highlighted) {
-            return;
-        }
-        this._highlighted = !!highlighted;
-        if (this._highlighted) {
-            this._dot.classList.add(this._highlightClass);
-        } else {
-            this._dot.classList.remove(this._highlightClass);
-        }
-    }
-    
-    destroy() {
-        this.setVisible(false);
-        if (this._dot.parentElement) {
-            this._dot.parentElement.removeChild(this._dot);
-        }
-        if (this._dotClickable.parentElement) {
-            this._dotClickable.parentElement.removeChild(this._dotClickable);
-        }
-    }
-}
-
 /** @private */
 class Label {
 
@@ -11500,10 +11787,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();
@@ -11543,7 +11826,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,
@@ -11554,7 +11837,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,
@@ -11565,7 +11848,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,
@@ -11632,19 +11915,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
@@ -11750,9 +12033,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) {
 
@@ -11789,10 +12072,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]);
 
@@ -11873,30 +12152,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;
     }
 
     /**
@@ -11966,7 +12245,7 @@ class AngleMeasurement extends Component {
     }
 
     /**
-     * Sets if the origin {@link Marker} is visible.
+     * Sets if the origin {@link Dot3D} is visible.
      *
      * @type {Boolean}
      */
@@ -11979,7 +12258,7 @@ class AngleMeasurement extends Component {
     }
 
     /**
-     * Gets if the origin {@link Marker} is visible.
+     * Gets if the origin {@link Dot3D} is visible.
      *
      * @type {Boolean}
      */
@@ -11988,7 +12267,7 @@ class AngleMeasurement extends Component {
     }
 
     /**
-     * Sets if the corner {@link Marker} is visible.
+     * Sets if the corner {@link Dot3D} is visible.
      *
      * @type {Boolean}
      */
@@ -12001,7 +12280,7 @@ class AngleMeasurement extends Component {
     }
 
     /**
-     * Gets if the corner {@link Marker} is visible.
+     * Gets if the corner {@link Dot3D} is visible.
      *
      * @type {Boolean}
      */
@@ -12010,7 +12289,7 @@ class AngleMeasurement extends Component {
     }
 
     /**
-     * Sets if the target {@link Marker} is visible.
+     * Sets if the target {@link Dot3D} is visible.
      *
      * @type {Boolean}
      */
@@ -12023,7 +12302,7 @@ class AngleMeasurement extends Component {
     }
 
     /**
-     * Gets if the target {@link Marker} is visible.
+     * Gets if the target {@link Dot3D} is visible.
      *
      * @type {Boolean}
      */
@@ -14103,265 +14382,6 @@ class AngleMeasurementsTouchControl extends AngleMeasurementsControl {
     }
 }
 
-const nop = () => { };
-
-function transformToNode(from, to, vec) {
-    const fromRec = from.getBoundingClientRect();
-    const toRec = to.getBoundingClientRect();
-    vec[0] += fromRec.left - toRec.left;
-    vec[1] += fromRec.top  - toRec.top;
-}
-function createDraggableDot3D(cfg) {
-    const extractCFG = function(propName, defaultValue) {
-        if (propName in cfg) {
-            return cfg[propName];
-        } else if (defaultValue !== undefined) {
-            return defaultValue;
-        } else {
-            throw "config missing: " + propName;
-        }
-    };
-
-    const viewer = extractCFG("viewer");
-    const worldPos = extractCFG("worldPos");
-    const color = extractCFG("color");
-    const ray2WorldPos = extractCFG("ray2WorldPos");
-    const handleMouseEvents = extractCFG("handleMouseEvents", false);
-    const handleTouchEvents = extractCFG("handleTouchEvents", false);
-    const onStart = extractCFG("onStart", nop);
-    const onMove  = extractCFG("onMove",  nop);
-    const onEnd   = extractCFG("onEnd",   nop);
-
-    const scene = viewer.scene;
-    const canvas = scene.canvas.canvas;
-
-    const marker = new Marker(scene, {});
-
-    const pickWorldPos = canvasPos => {
-        const origin = math.vec3();
-        const direction = math.vec3();
-        math.canvasPosToWorldRay(canvas, scene.camera.viewMatrix, scene.camera.projMatrix, canvasPos, origin, direction);
-        return ray2WorldPos(origin, direction, canvasPos);
-    };
-
-    const onChange = event => {
-        const canvasPos = math.vec2([ event.clientX, event.clientY ]);
-        transformToNode(canvas.ownerDocument.body, canvas, canvasPos);
-
-        const worldPos = pickWorldPos(canvasPos);
-        marker.worldPos = worldPos;
-        updateDotPos();
-        onMove(canvasPos, worldPos);
-    };
-
-    let currentDrag = null;
-
-    const onDragMove = function(event) {
-        const e = currentDrag.matchesEvent(event);
-        if (e)
-        {
-            onChange(e);
-        }
-    };
-
-    const onDragEnd = function(event) {
-        const e = currentDrag.matchesEvent(event);
-        if (e)
-        {
-            dot.setOpacity(idleOpacity);
-            currentDrag.cleanup();
-            onChange(e);
-            onEnd();
-        }
-    };
-
-    const startDrag = function(matchesEvent, cleanupHandlers) {
-        if (currentDrag) {
-            currentDrag.cleanup();
-        }
-
-        dot.setOpacity(1.0);
-        dot.setClickable(false);
-        viewer.cameraControl.active = false;
-
-        currentDrag = {
-            matchesEvent: matchesEvent,
-            cleanup: function() {
-                currentDrag = null;
-                dot.setClickable(true);
-                viewer.cameraControl.active = true;
-                cleanupHandlers();
-            }
-        };
-
-        onStart();
-    };
-
-    const dotCfg = { fillColor: color };
-
-    if (handleMouseEvents)
-    {
-        dotCfg.onMouseOver  = () => (! currentDrag) && dot.setOpacity(1.0);
-        dotCfg.onMouseLeave = () => (! currentDrag) && dot.setOpacity(idleOpacity);
-        dotCfg.onMouseDown  = event => {
-            if (event.which === 1)
-            {
-                canvas.addEventListener("mousemove", onDragMove);
-                canvas.addEventListener("mouseup",   onDragEnd);
-                startDrag(
-                    event => (event.which === 1) && event,
-                    () => {
-                        canvas.removeEventListener("mousemove", onDragMove);
-                        canvas.removeEventListener("mouseup",   onDragEnd);
-                    });
-            }
-        };
-    }
-
-    if (handleTouchEvents)
-    {
-        let touchStartId;
-        dotCfg.onTouchstart  = event => {
-            event.preventDefault();
-            if (event.touches.length === 1)
-            {
-                touchStartId = event.touches[0].identifier;
-                startDrag(
-                    event => [...event.changedTouches].find(e => e.identifier === touchStartId),
-                    () => { touchStartId = null; });
-            }
-        };
-        dotCfg.onTouchmove = event => {
-            event.preventDefault();
-            onDragMove(event);
-        };
-        dotCfg.onTouchend  = event => {
-            event.preventDefault();
-            onDragEnd(event);
-        };
-    }
-
-    const dotParent = canvas.ownerDocument.body;
-    const dot = new Dot(dotParent, dotCfg);
-
-    const idleOpacity = 0.5;
-    dot.setOpacity(idleOpacity);
-
-    const updateDotPos = function() {
-        const pos = marker.canvasPos.slice();
-        transformToNode(canvas, dotParent, pos);
-        dot.setPos(pos[0], pos[1]);
-    };
-
-    marker.worldPos = worldPos;
-    updateDotPos();
-
-    const onViewMatrix = scene.camera.on("viewMatrix", updateDotPos);
-    const onProjMatrix = scene.camera.on("projMatrix", updateDotPos);
-
-    return {
-        setActive: value => dot.setClickable(value),
-        getWorldPos: () => marker.worldPos,
-        setWorldPos: pos => { marker.worldPos = pos; updateDotPos(); },
-        destroy: function() {
-            currentDrag && currentDrag.cleanup();
-            scene.camera.off(onViewMatrix);
-            scene.camera.off(onProjMatrix);
-            marker.destroy();
-            dot.destroy();
-        }
-    };
-}
-function activateDraggableDots(cfg) {
-    const extractCFG = function(propName, defaultValue) {
-        if (propName in cfg) {
-            return cfg[propName];
-        } else if (defaultValue !== undefined) {
-            return defaultValue;
-        } else {
-            throw "config missing: " + propName;
-        }
-    };
-
-    const viewer = extractCFG("viewer");
-    const handleMouseEvents = extractCFG("handleMouseEvents", false);
-    const handleTouchEvents = extractCFG("handleTouchEvents", false);
-    const snapping = extractCFG("snapping");
-    const pointerLens = extractCFG("pointerLens", null);
-    const color = extractCFG("color");
-    const markers = extractCFG("markers");
-    const onEdit = extractCFG("onEdit", nop);
-
-    const updatePointerLens = (pointerLens
-                               ? function(canvasPos) {
-                                   pointerLens.visible = !! canvasPos;
-                                   if (canvasPos)
-                                   {
-                                       pointerLens.canvasPos = canvasPos;
-                                   }
-                               }
-                               : () => { });
-
-    const dots = markers.map(marker => {
-        let initDotPos, initMarkerPos;
-        const setCoord = coord => marker.worldPos = coord;
-
-        const dot = createDraggableDot3D({
-            handleMouseEvents: handleMouseEvents,
-            handleTouchEvents: handleTouchEvents,
-            viewer: viewer,
-            worldPos: marker.worldPos,
-            color: color,
-            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(!!snapping) || initDotPos;
-            },
-            onStart: () => {
-                initDotPos = dot.getWorldPos().slice();
-                initMarkerPos = marker.worldPos.slice();
-                setOtherDotsActive(false, dot);
-            },
-            onMove: (canvasPos, worldPos) => {
-                updatePointerLens(canvasPos);
-                setCoord(worldPos);
-            },
-            onEnd: () => {
-                if (! math.compareVec3(initMarkerPos, marker.worldPos))
-                {
-                    onEdit();
-                }
-                else
-                {
-                    dot.setWorldPos(initDotPos);
-                    setCoord(initMarkerPos);
-                }
-                updatePointerLens(null);
-                setOtherDotsActive(true, dot);
-            }
-        });
-        return dot;
-    });
-
-    const setOtherDotsActive = (active, dot) => dots.forEach(d => (d !== dot) && d.setActive(active));
-    setOtherDotsActive(true);
-
-    return function() {
-        dots.forEach(m => m.destroy());
-        updatePointerLens(null);
-    };
-}
-
 class AngleMeasurementEditControl extends Component {
 
     /**
@@ -14384,11 +14404,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);
@@ -14417,6 +14456,10 @@ class AngleMeasurementEditTouchControl extends AngleMeasurementEditControl {
     }
 }
 
+const tempVec3a$K = math.vec3();
+const tempVec3b$z = math.vec3();
+const tempVec3c$v = math.vec3();
+
 /**
  * A {@link Marker} with an HTML label attached to it, managed by an {@link AnnotationsPlugin}.
  *
@@ -14456,6 +14499,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);
             });
@@ -14483,6 +14529,7 @@ class Annotation extends Marker {
         this._values = cfg.values || {};
         this._layoutDirty = true;
         this._visibilityDirty = true;
+        this._labelPosition = 24;
 
         this._buildHTML();
 
@@ -14575,6 +14622,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);
             });
@@ -14609,17 +14660,23 @@ class Annotation extends Marker {
      * @private
      */
     _updatePosition() {
+        const px = x => x + "px";
         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";
+        const left = boundary[0] + this.canvasPos[0];
+        const top  = boundary[1] + this.canvasPos[1];
+        const markerRect = this._marker.getBoundingClientRect();
+        const markerWidth = markerRect.width;
+        const markerDir = (this._markerAlign === "right") ? -1 : ((this._markerAlign === "center") ? 0 : 1);
+        const markerCenter = left + markerDir * (markerWidth / 2 - 12);
+        this._marker.style.left = px(markerCenter - markerWidth / 2);
+        this._marker.style.top  = px(top - 12);
         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";
+
+        const labelRect = this._label.getBoundingClientRect();
+        const labelWidth = labelRect.width;
+        const labelDir = Math.sign(this._labelPosition);
+        this._label.style.left = px(markerCenter + labelDir * (markerWidth / 2 + Math.abs(this._labelPosition) + labelWidth / 2) - labelWidth / 2);
+        this._label.style.top  = px(top - 17);
         this._label.style["z-index"] = 90005 + Math.floor(this._viewPos[2]) + 1;
     }
 
@@ -14636,6 +14693,55 @@ 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$K);
+            const offset = (this.plugin && this.plugin.surfaceOffset) || 0;
+            const offsetVec = math.mulVec3Scalar(normalizedWorldNormal, offset, tempVec3b$z);
+            const offsetWorldPos = math.addVec3(pickResult.worldPos, offsetVec, tempVec3c$v);
+            this.entity = pickResult.entity;
+            this.worldPos = offsetWorldPos;
+        }
+    }
+
+    /**
+     * Sets the horizontal alignment of the Annotation's marker HTML.
+     *
+     * @param {String} align Either "left", "center", "right" (default "left")
+     */
+    setMarkerAlign(align) {
+        const valid = [ "left", "center", "right" ];
+        if (! valid.includes(align)) {
+            this.error("Param 'align' should be one of: " + JSON.stringify(valid));
+        } else {
+            this._markerAlign = align;
+            this._updatePosition();
+        }
+    }
+
+    /**
+     * Sets the relative horizontal position of the Annotation's label HTML.
+     *
+     * @param {Number} position Negative - to the left, positive - to the right, otherwise ignore (default 24)
+     */
+    setLabelPosition(position) {
+        if (typeof position !== "number") {
+            this.error("Param 'position' is not a number");
+        } else if (position === 0) {
+            this.error("Param 'position' is zero");
+        } else {
+            this._labelPosition = position;
+            this._updatePosition();
+        }
+    }
+
     /**
      * Sets whether or not to show this Annotation's marker.
      *
@@ -14766,6 +14872,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;
@@ -14782,10 +14889,6 @@ class Annotation extends Marker {
     }
 }
 
-const tempVec3a$K = math.vec3();
-const tempVec3b$z = math.vec3();
-const tempVec3c$v = math.vec3();
-
 /**
  * {@link Viewer} plugin that creates {@link Annotation}s.
  *
@@ -15260,24 +15363,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$K);
-                const offsetVec = math.mulVec3Scalar(normalizedWorldNormal, this._surfaceOffset, tempVec3b$z);
-                const offsetWorldPos = math.addVec3(pickResult.worldPos, offsetVec, tempVec3c$v);
-                worldPos = offsetWorldPos;
-                entity = pickResult.entity;
-            }
-        } else {
-            worldPos = params.worldPos;
-            entity = params.entity;
-        }
 
         var markerElement = null;
         if (params.markerElementId) {
@@ -15298,8 +15383,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,
@@ -15315,6 +15398,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];
@@ -31723,10 +31815,10 @@ class Scene extends Component {
      */
     get center() {
         if (this._aabbDirty || !this._center) {
-            if (!this._center || !this._center) {
+            const aabb = this.aabb;
+            if (!this._center) {
                 this._center = math.vec3();
             }
-            const aabb = this.aabb;
             this._center[0] = (aabb[0] + aabb[3]) / 2;
             this._center[1] = (aabb[1] + aabb[4]) / 2;
             this._center[2] = (aabb[2] + aabb[5]) / 2;
@@ -31801,6 +31893,7 @@ class Scene extends Component {
             this._aabb[4] = ymax;
             this._aabb[5] = zmax;
             this._aabbDirty = false;
+            this._center = null;
         }
         return this._aabb;
     }
@@ -49794,6 +49887,270 @@ function buildPolylineGeometryFromCurve(cfg = {}) {
     });
 }
 
+/**
+ * @desc Creates a 3D line {@link Geometry}.
+ *
+ * ## Usage
+ *
+ * In the example below we'll create a {@link Mesh} with a line {@link ReadableGeometry}.
+ *
+ * [[Run this example](https://xeokit.github.io/xeokit-sdk/examples/scenegraph/#buildLineGeometry)]
+ *
+ * ````javascript
+ * //------------------------------------------------------------------------------------------------------------------
+ * // Import the modules we need for this example
+ * //------------------------------------------------------------------------------------------------------------------
+ *
+ * import {buildLineGeometry, Viewer, Mesh, ReadableGeometry, PhongMaterial} from "../../dist/xeokit-sdk.min.es.js";
+ *
+ * //------------------------------------------------------------------------------------------------------------------
+ * // Create a Viewer and arrange the camera
+ * //------------------------------------------------------------------------------------------------------------------
+ *
+ * const viewer = new Viewer({
+ *     canvasId: "myCanvas"
+ * });
+ *
+ * viewer.camera.eye = [0, 0, 8];
+ * viewer.camera.look = [0, 0, 0];
+ * viewer.camera.up = [0, 1, 0];
+ *
+ * //------------------------------------------------------------------------------------------------------------------
+ * // Create a mesh with simple 2d line shape
+ * //------------------------------------------------------------------------------------------------------------------
+ *
+ * new Mesh(viewer.scene, {
+ *     geometry: new ReadableGeometry(viewer.scene, buildLineGeometry({
+ *         startPoint: [-5,-2,0],
+ *         endPoint: [-5,2,0],
+ *     })),
+ *     material: new PhongMaterial(viewer.scene, {
+ *         emissive: [0, 1,]
+ *     })
+ * });
+ *
+ * //------------------------------------------------------------------------------------------------------------------
+ * // Create a mesh with simple 2d line shape with black color
+ * //------------------------------------------------------------------------------------------------------------------
+ *
+ * new Mesh(viewer.scene, {
+ *     geometry: new ReadableGeometry(viewer.scene, buildLineGeometry({
+ *         startPoint: [-4,-2,0],
+ *         endPoint: [-4,2,0],
+ *     })),
+ *     material: new PhongMaterial(viewer.scene, {
+ *         emissive: [0, 0, 0]
+ *     })
+ * });
+ *
+ * //------------------------------------------------------------------------------------------------------------------
+ * // Create a mesh with simple 2d line shape with black color and simple pattern
+ * //------------------------------------------------------------------------------------------------------------------
+ *
+ * new Mesh(viewer.scene, {
+ *     geometry: new ReadableGeometry(viewer.scene, buildLineGeometry({
+ *         startPoint: [-3,-2,0],
+ *         endPoint: [-3,2,0],
+ *         pattern: [0.10],
+ *     })),
+ *     material: new PhongMaterial(viewer.scene, {
+ *         emissive: [0, 0, 0]
+ *     })
+ * });
+ *
+ * //------------------------------------------------------------------------------------------------------------------
+ * // Create a mesh with simple 2d line shape with blue color and simple pattern extended to end
+ * //------------------------------------------------------------------------------------------------------------------
+ *
+ * new Mesh(viewer.scene, {
+ *     geometry: new ReadableGeometry(viewer.scene, buildLineGeometry({
+ *         startPoint: [-2,-2,0],
+ *         endPoint: [-2,2,0],
+ *         pattern: [0.10],
+ *         extendToEnd: true,
+ *     })),
+ *     material: new PhongMaterial(viewer.scene, {
+ *         emissive: [0, 0, 1]
+ *     })
+ * });
+ *
+ * //------------------------------------------------------------------------------------------------------------------
+ * // Create a mesh with simple 2d line shape with black color and more complex pattern
+ * //------------------------------------------------------------------------------------------------------------------
+ *
+ * new Mesh(viewer.scene, {
+ *     geometry: new ReadableGeometry(viewer.scene, buildLineGeometry({
+ *         startPoint: [-1,-2,0],
+ *         endPoint: [-1,2,0],
+ *         pattern: [0.15, 0.05],
+ *     })),
+ *     material: new PhongMaterial(viewer.scene, {
+ *         emissive: [0, 0, 0]
+ *     })
+ * });
+ *
+ * //------------------------------------------------------------------------------------------------------------------
+ * // Create a mesh with simple 2d line shape with blue color and more complex pattern extended to end
+ * //------------------------------------------------------------------------------------------------------------------
+ *
+ * new Mesh(viewer.scene, {
+ *     geometry: new ReadableGeometry(viewer.scene, buildLineGeometry({
+ *         startPoint: [0,-2,0],
+ *         endPoint: [0,2,0],
+ *         pattern: [0.15, 0.05],
+ *         extendToEnd: true,
+ *     })),
+ *     material: new PhongMaterial(viewer.scene, {
+ *         emissive: [0, 0, 1]
+ *     })
+ * });
+ *
+ * //------------------------------------------------------------------------------------------------------------------
+ * // Create a mesh with simple 2d line shape with black color and complex pattern
+ * //------------------------------------------------------------------------------------------------------------------
+ *
+ * new Mesh(viewer.scene, {
+ *     geometry: new ReadableGeometry(viewer.scene, buildLineGeometry({
+ *         startPoint: [1,-2,0],
+ *         endPoint: [1,2,0],
+ *         pattern: [0.15, 0.05, 0.50],
+ *     })),
+ *     material: new PhongMaterial(viewer.scene, {
+ *         emissive: [0, 0, 0]
+ *     })
+ * });
+ *
+ * //------------------------------------------------------------------------------------------------------------------
+ * // Create a mesh with simple 2d line shape with blue color and complex pattern extended to end
+ * //------------------------------------------------------------------------------------------------------------------
+ *
+ * new Mesh(viewer.scene, {
+ *     geometry: new ReadableGeometry(viewer.scene, buildLineGeometry({
+ *         startPoint: [2,-2,0],
+ *         endPoint: [2,2,0],
+ *         pattern: [0.15, 0.05, 0.50],
+ *         extendToEnd: true,
+ *     })),
+ *     material: new PhongMaterial(viewer.scene, {
+ *         emissive: [0, 0, 1]
+ *     })
+ * });
+ *
+ * //------------------------------------------------------------------------------------------------------------------
+ * // Create a mesh with simple 3d line shape with white color and simple pattern
+ * //------------------------------------------------------------------------------------------------------------------
+ *
+ * new Mesh(viewer.scene, {
+ *     geometry: new ReadableGeometry(viewer.scene, buildLineGeometry({
+ *         startPoint: [3,-2,-1],
+ *         endPoint: [5,2,1],
+ *         pattern: [0.10],
+ *     })),
+ *     material: new PhongMaterial(viewer.scene, {
+ *         emissive: [1, 1, 1]
+ *     })
+ * });
+ *
+ * //------------------------------------------------------------------------------------------------------------------
+ * // Create a mesh with simple 3d line shape with black color and simple dot pattern
+ * //------------------------------------------------------------------------------------------------------------------
+ *
+ * new Mesh(viewer.scene, {
+ *     geometry: new ReadableGeometry(viewer.scene, buildLineGeometry({
+ *         startPoint: [5,-2,-1],
+ *         endPoint: [7,2,1],
+ *         pattern: [0.03],
+ *     })),
+ *     material: new PhongMaterial(viewer.scene, {
+ *         emissive: [0, 0, 0]
+ *     })
+ * });
+ * ````
+ *
+ * @function buildLineGeometry
+ * @param {*} [cfg] Configs
+ * @param {String} [cfg.id] Optional ID, unique among all components in the parent {@link Scene}, generated automatically when omitted.
+ * @param {Number[]} [cfg.startPoint]  3D start point (x0, y0, z0).
+ * @param {Number[]} [cfg.endPoint]  3D end point (x1, y1, z1).
+ * @param {Number[]} [cfg.pattern] Lengths of segments that describe a pattern.
+ * @param {Bool} [cfg.extendToEnd] If true: it will try to make sure the line doesn't end up with a gap, as it will
+ * extend the last segment.
+ * @returns {Object} Configuration for a {@link Geometry} subtype.
+ */
+function buildLineGeometry(cfg = {}) {
+
+    if (cfg.startPoint.length !== 3) {
+        throw "Start point should contain 3 elements in array: x, y and z";
+    }
+    if (cfg.endPoint.length !== 3) {
+        throw "End point should contain 3 elements in array: x, y and z";
+    }
+    let indices = [];
+    let points = [];
+    let x0 = cfg.startPoint[0]; let y0 = cfg.startPoint[1]; let z0 = cfg.startPoint[2];
+    let x1 = cfg.endPoint[0]; let y1 = cfg.endPoint[1]; let z1 = cfg.endPoint[2];
+    let lineLength = Math.sqrt((x1- x0)**2 + (y1 - y0)**2 + (z1 - z0)**2);
+    let normalizedDirectionVectorOfLine = [(x1-x0)/lineLength, (y1-y0)/lineLength, (z1-z0)/lineLength];
+
+    if (!cfg.pattern) {
+        indices.push(0);
+        indices.push(1);
+        points.push(x0, y0, z0, x1, y1, z1);
+    }
+    else {
+        let patternsNumber = cfg.pattern.length;
+        let gap = false;
+        let segmentFilled = 0.0;
+        let idOfCurrentPatternLength = 0;
+        let pointIndicesCounter = 0;
+        let currentStartPoint = [x0, y0, z0];
+        let currentPatternLength = cfg.pattern[idOfCurrentPatternLength];
+        points.push(currentStartPoint[0], currentStartPoint[1], currentStartPoint[2]);
+
+        while (currentPatternLength <= (lineLength - segmentFilled)) {
+            let vectorFromCurrentStartPointToCurrentEndPoint = [
+                normalizedDirectionVectorOfLine[0] * currentPatternLength,
+                normalizedDirectionVectorOfLine[1] * currentPatternLength,
+                normalizedDirectionVectorOfLine[2] * currentPatternLength,
+            ];
+            let currentEndPoint = [
+                currentStartPoint[0] + vectorFromCurrentStartPointToCurrentEndPoint[0],
+                currentStartPoint[1] + vectorFromCurrentStartPointToCurrentEndPoint[1],
+                currentStartPoint[2] + vectorFromCurrentStartPointToCurrentEndPoint[2],
+            ];
+
+            points.push(currentEndPoint[0], currentEndPoint[1], currentEndPoint[2]);
+
+            if (!gap) {
+                indices.push(pointIndicesCounter);
+                indices.push(pointIndicesCounter + 1);
+            }
+            gap = !gap;
+
+            pointIndicesCounter += 1;
+            currentStartPoint = currentEndPoint;
+            idOfCurrentPatternLength += 1;
+            if (idOfCurrentPatternLength >= patternsNumber) {
+                idOfCurrentPatternLength = 0;
+            }
+            segmentFilled += currentPatternLength;
+            currentPatternLength = cfg.pattern[idOfCurrentPatternLength];
+        }
+
+        if (cfg.extendToEnd) {
+            points.push(x1, y1, z1);
+            indices.push(indices.length - 2);
+            indices.push(indices.length - 1);
+        }
+    }
+
+    return utils.apply(cfg, {
+        primitive: "lines",
+        positions: points,
+        indices: indices,
+    });
+}
+
 /**
  *  A plane-shaped 3D object containing a bitmap image.
  *
@@ -86729,8 +87086,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();
@@ -86776,7 +87131,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,
@@ -86788,7 +87143,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,
@@ -86935,13 +87290,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
@@ -87103,8 +87458,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) {
 
@@ -87153,9 +87508,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]);
@@ -87297,21 +87649,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;
     }
 
     /**
@@ -87380,7 +87732,7 @@ class DistanceMeasurement extends Component {
     }
 
     /**
-     * Sets if the origin {@link Marker} is visible.
+     * Sets if the origin {@link Dot3D} is visible.
      *
      * @type {Boolean}
      */
@@ -87391,7 +87743,7 @@ class DistanceMeasurement extends Component {
     }
 
     /**
-     * Gets if the origin {@link Marker} is visible.
+     * Gets if the origin {@link Dot3D} is visible.
      *
      * @type {Boolean}
      */
@@ -87400,7 +87752,7 @@ class DistanceMeasurement extends Component {
     }
 
     /**
-     * Sets if the target {@link Marker} is visible.
+     * Sets if the target {@link Dot3D} is visible.
      *
      * @type {Boolean}
      */
@@ -87411,7 +87763,7 @@ class DistanceMeasurement extends Component {
     }
 
     /**
-     * Gets if the target {@link Marker} is visible.
+     * Gets if the target {@link Dot3D} is visible.
      *
      * @type {Boolean}
      */
@@ -89699,11 +90051,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);
@@ -96442,7 +96813,7 @@ class KeyboardAxisViewHandler {
                 return;
             }
 
-            if (!states.mouseover) {
+            if (configs.keyboardEnabledOnlyIfMouseover && !states.mouseover) {
                 return;
             }
 
@@ -96936,7 +97307,7 @@ class KeyboardPanRotateDollyHandler {
             if (!(configs.active && configs.pointerEnabled) || (!scene.input.keyboardEnabled)) {
                 return;
             }
-            if (!states.mouseover) {
+            if (configs.keyboardEnabledOnlyIfMouseover && !states.mouseover) {
                 return;
             }
             keyDownMap[keyCode] = true;
@@ -96967,7 +97338,7 @@ class KeyboardPanRotateDollyHandler {
                 return;
             }
 
-            if (!states.mouseover) {
+            if (configs.keyboardEnabledOnlyIfMouseover &&  !states.mouseover) {
                 return;
             }
 
@@ -98608,6 +98979,8 @@ class CameraControl extends Component {
             snapToEdge: DEFAULT_SNAP_EDGE,
             snapRadius: DEFAULT_SNAP_PICK_RADIUS,
 
+            keyboardEnabledOnlyIfMouseover: true,
+
             // Rotation
 
             dragRotationRate: 360.0,
@@ -98918,6 +99291,24 @@ class CameraControl extends Component {
     get snapRadius() {
         return this._configs.snapRadius;
     }
+
+    /**
+     * If `true`, the keyboard shortcuts are enabled ONLY if the mouse is over the canvas.
+     * 
+     * @param {boolean} value
+     */
+    set keyboardEnabledOnlyIfMouseover(value) {
+        this._configs.keyboardEnabledOnlyIfMouseover = !!value;
+    }
+
+    /**
+     * Gets whether the keyboard shortcuts are enabled ONLY if the mouse is over the canvas or ALWAYS.
+     * 
+     * @returns {boolean}
+     */
+    get keyboardEnabledOnlyIfMouseover() {
+        return this._configs.keyboardEnabledOnlyIfMouseover;
+    }
     
     /**
      * Sets the current navigation mode.
@@ -139876,26 +140267,19 @@ class ZonesPolysurfaceTouchControl extends Component {
 
 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) {
@@ -139904,46 +140288,29 @@ 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);
@@ -140337,6 +140704,7 @@ exports.buildBoxLinesGeometry = buildBoxLinesGeometry;
 exports.buildBoxLinesGeometryFromAABB = buildBoxLinesGeometryFromAABB;
 exports.buildCylinderGeometry = buildCylinderGeometry;
 exports.buildGridGeometry = buildGridGeometry;
+exports.buildLineGeometry = buildLineGeometry;
 exports.buildPlaneGeometry = buildPlaneGeometry;
 exports.buildPolylineGeometry = buildPolylineGeometry;
 exports.buildPolylineGeometryFromCurve = buildPolylineGeometryFromCurve;