diff --git a/src/plugins/ZonesPlugin/index.js b/src/plugins/ZonesPlugin/index.js index 123eef5f16..096d051479 100644 --- a/src/plugins/ZonesPlugin/index.js +++ b/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)); diff --git a/src/plugins/lib/ui/index.js b/src/plugins/lib/ui/index.js index 20c54d77dd..2cd2a3edfd 100644 --- a/src/plugins/lib/ui/index.js +++ b/src/plugins/lib/ui/index.js @@ -2,6 +2,8 @@ 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(); @@ -9,7 +11,27 @@ export function transformToNode(from, to, vec) { 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; });