Rename draggableDot3D to createDraggableDot3D and accept cfg argument

src/plugins/ZonesPlugin/index.js

@@ -7,7 +7,7 @@ import {PhongMaterial} from "../../viewer/scene/materials/PhongMaterial.js";
 import {math} from "../../viewer/scene/math/math.js";
 import {Mesh} from "../../viewer/scene/mesh/Mesh.js";
 import {Dot} from "../lib/html/Dot.js";
-import {draggableDot3D, transformToNode} from "../../../src/plugins/lib/ui/index.js";
+import {createDraggableDot3D, transformToNode} from "../../../src/plugins/lib/ui/index.js";
 
 const hex2rgb = function(color) {
     const rgb = idx => parseInt(color.substr(idx + 1, 2), 16) / 255;
@@ -1642,23 +1642,23 @@ export class ZoneEditControl extends Component {
                 }
             };
 
-            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),
-                () => {
+            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);
                 },
-                (canvasPos, worldPos) => {
+                onMove: (canvasPos, worldPos) => {
                     updatePointerLens(canvasPos);
                     setPlaneCoord([ worldPos[0], worldPos[2] ]);
                 },
-                () => {
+                onEnd: () => {
                     if (zone._zoneMesh)
                     {
                         self.fire("edited");
@@ -1670,7 +1670,8 @@ export class ZoneEditControl extends Component {
                     }
                     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));

src/plugins/lib/ui/index.js

@@ -2,14 +2,36 @@ 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 function draggableDot3D(handleMouseEvents, handleTouchEvents, viewer, worldPos, color, ray2WorldPos, onStart, onMove, onEnd) {
+export 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;
 
@@ -166,13 +188,13 @@ export function activateDraggableDots(viewer, handleMouseEvents, handleTouchEven
         let initDotPos, initMarkerPos;
         const setCoord = coord => marker.worldPos = coord;
 
-        const dot = draggableDot3D(
-            handleMouseEvents,
-            handleTouchEvents,
-            viewer,
-            marker.worldPos,
-            color,
-            (orig, dir, canvasPos) => {
+        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,
@@ -187,16 +209,16 @@ export function activateDraggableDots(viewer, handleMouseEvents, handleTouchEven
 
                 return tryPickWorldPos(!!snapping) || initDotPos;
             },
-            () => {
+            onStart: () => {
                 initDotPos = dot.getWorldPos().slice();
                 initMarkerPos = marker.worldPos.slice();
                 setOtherDotsActive(false, dot);
             },
-            (canvasPos, worldPos) => {
+            onMove: (canvasPos, worldPos) => {
                 updatePointerLens(canvasPos);
                 setCoord(worldPos);
             },
-            () => {
+            onEnd: () => {
                 if (! math.compareVec3(initMarkerPos, marker.worldPos))
                 {
                     onEdit();
@@ -208,7 +230,8 @@ export function activateDraggableDots(viewer, handleMouseEvents, handleTouchEven
                 }
                 updatePointerLens(null);
                 setOtherDotsActive(true, dot);
-            });
+            }
+        });
         return dot;
     });