@xeokit/xeokit-sdk 2.6.22 → 2.6.25

package/src/plugins/ZonesPlugin/index.js

@@ -7,19 +7,13 @@ 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 {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;
     return [ rgb(0), rgb(2), rgb(4) ];
 };
 
-const transformToNode = function(from, to, vec) {
-    const fromRec = from.getBoundingClientRect();
-    const toRec = to.getBoundingClientRect();
-    vec[0] += fromRec.left - toRec.left;
-    vec[1] += fromRec.top  - toRec.top;
-};
-
 const triangulateEarClipping = function(planeCoords) {
 
     const polygonVertices = [ ];
@@ -123,148 +117,6 @@ const triangulateEarClipping = function(planeCoords) {
     return [ planeCoords, baseTriangles ];
 };
 
-const draggableDot3D = function(handleMouseEvents, handleTouchEvents, viewer, worldPos, color, ray2WorldPos, onStart, onMove, onEnd) {
-    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);
-    };
-
-    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();
-        }
-    };
-};
-
 const marker3D = function(scene, color) {
     const canvas = scene.canvas.canvas;
 
@@ -1760,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) {
@@ -1788,45 +1633,29 @@ export class ZoneEditControl extends Component {
                         zone._zoneMesh = null;
                     }
                 }
-            };
-
-            const dot = draggableDot3D(
-                handleMouseEvents,
-                handleTouchEvents,
-                zone.plugin.viewer,
-                math.vec3([ planeCoord[0], altitude, planeCoord[1] ]),
-                zone._color,
-                (orig, dir) => planeIntersect(altitude, math.vec3([ 0, 1, 0 ]), orig, dir),
-                () => {
-                    initWorldPos = dot.getWorldPos().slice();
-                    initPlaneCoord = planeCoord.slice();
-                    set_other_dots_active(false, dot);
-                },
-                (canvasPos, worldPos) => {
-                    updatePointerLens(canvasPos);
-                    setPlaneCoord([ worldPos[0], worldPos[2] ]);
-                },
-                () => {
-                    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);

package/src/plugins/lib/html/Dot.js

@@ -97,6 +97,24 @@ class Dot {
             });
         }
 
+        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) => {
@@ -136,24 +154,6 @@ class Dot {
             
         }
 
-        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);

package/src/plugins/lib/ui/index.js

@@ -0,0 +1,286 @@
+import {Dot} from "../html/Dot.js";
+import {math} from "../../../viewer/scene/math/math.js";
+import {Marker} from "../../../viewer/scene/marker/Marker.js";
+
+const nop = () => { };
+
+export 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;
+};
+
+export 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();
+    }
+
+}
+
+export 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);
+    };
+};
+
+export 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);
+    };
+}

package/src/viewer/scene/geometry/builders/index.js

@@ -6,4 +6,5 @@ export * from "./buildPlaneGeometry.js";
 export * from "./buildSphereGeometry.js";
 export * from "./buildTorusGeometry.js";
 export * from "./buildVectorTextGeometry.js";
-export * from "./buildPolylineGeometry.js";
+export * from "./buildPolylineGeometry.js";
+export * from "./buildLineGeometry.js";

package/src/viewer/scene/marker/Marker.js

@@ -196,11 +196,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;
             }
         }
@@ -212,7 +218,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;
                 });