From cd699e7c99ae6a4ad76b8687ac5d373a8b4f4a57 Mon Sep 17 00:00:00 2001 From: Michal Dybizbanski Date: Tue, 18 Jun 2024 16:44:16 +0200 Subject: [PATCH 1/8] Remove duplicated listeners --- .../distance_createWithMouse_snapping.html | 11 ----------- 1 file changed, 11 deletions(-) diff --git a/examples/measurement/distance_createWithMouse_snapping.html b/examples/measurement/distance_createWithMouse_snapping.html index fb0e3e62b1..ad4752b2f2 100644 --- a/examples/measurement/distance_createWithMouse_snapping.html +++ b/examples/measurement/distance_createWithMouse_snapping.html @@ -191,17 +191,6 @@

Assets

console.log("target", distanceMeasurement.target.entity); }); - distanceMeasurementsPlugin.on("mouseOver", (e) => { - e.distanceMeasurement.setHighlighted(true); - }); - - distanceMeasurementsPlugin.on("mouseLeave", (e) => { - if (distanceMeasurementsContextMenu.shown && distanceMeasurementsContextMenu.context.distanceMeasurement.id === e.distanceMeasurement.id) { - return; - } - e.distanceMeasurement.setHighlighted(false); - }); - const distanceMeasurementsMouseControl = new DistanceMeasurementsMouseControl(distanceMeasurementsPlugin, { pointerLens: new PointerLens(viewer), snapping: true // Default From 7b676bc538dad25fff8a48dcbe363aa625c7e68f Mon Sep 17 00:00:00 2001 From: Michal Dybizbanski Date: Tue, 18 Jun 2024 17:34:44 +0200 Subject: [PATCH 2/8] Fix Angle Measurements markerDiv not disappearing when deactivated --- .../AngleMeasurementsPlugin/AngleMeasurementsMouseControl.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/plugins/AngleMeasurementsPlugin/AngleMeasurementsMouseControl.js b/src/plugins/AngleMeasurementsPlugin/AngleMeasurementsMouseControl.js index 459367f02b..e0a35ca8d8 100644 --- a/src/plugins/AngleMeasurementsPlugin/AngleMeasurementsMouseControl.js +++ b/src/plugins/AngleMeasurementsPlugin/AngleMeasurementsMouseControl.js @@ -103,10 +103,10 @@ export class AngleMeasurementsMouseControl extends AngleMeasurementsControl { } _destroyMarkerDiv() { - if (this._markerDiv) { + if (this.markerDiv) { const element = document.getElementById('myMarkerDiv') element.parentNode.removeChild(element) - this._markerDiv = null + this.markerDiv = null } } From 07701ea32815e84d50a68bf6a014e46d8ca4998c Mon Sep 17 00:00:00 2001 From: Michal Dybizbanski Date: Tue, 18 Jun 2024 18:32:56 +0200 Subject: [PATCH 3/8] Move draggableDot3D and transformToNode inside src/plugins/lib/ui/index.js --- src/plugins/ZonesPlugin/index.js | 150 +----------------------------- src/plugins/lib/ui/index.js | 152 +++++++++++++++++++++++++++++++ 2 files changed, 153 insertions(+), 149 deletions(-) create mode 100644 src/plugins/lib/ui/index.js diff --git a/src/plugins/ZonesPlugin/index.js b/src/plugins/ZonesPlugin/index.js index 4fe829cfa6..123eef5f16 100644 --- a/src/plugins/ZonesPlugin/index.js +++ b/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 {draggableDot3D, 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; diff --git a/src/plugins/lib/ui/index.js b/src/plugins/lib/ui/index.js new file mode 100644 index 0000000000..f1305c1408 --- /dev/null +++ b/src/plugins/lib/ui/index.js @@ -0,0 +1,152 @@ +import {Dot} from "../html/Dot.js"; +import {math} from "../../../viewer/scene/math/math.js"; +import {Marker} from "../../../viewer/scene/marker/Marker.js"; + +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) { + 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(); + } + }; +}; From 1a6ea797bddbc8fee836829b01dc78206855ade7 Mon Sep 17 00:00:00 2001 From: Michal Dybizbanski Date: Tue, 18 Jun 2024 20:19:43 +0200 Subject: [PATCH 4/8] XEOK-36 Implement editing for AngleMeasurement and DistanceMeasurement --- .../angle_createWithMouse_snapping.html | 64 ++++++++++++++++- .../distance_createWithMouse_snapping.html | 40 ++++++++++- src/plugins/AngleMeasurementsPlugin/index.js | 59 ++++++++++++++- .../DistanceMeasurementsPlugin/index.js | 59 ++++++++++++++- src/plugins/lib/ui/index.js | 72 ++++++++++++++++++- 5 files changed, 288 insertions(+), 6 deletions(-) diff --git a/examples/measurement/angle_createWithMouse_snapping.html b/examples/measurement/angle_createWithMouse_snapping.html index c80a24a3db..c051101c40 100644 --- a/examples/measurement/angle_createWithMouse_snapping.html +++ b/examples/measurement/angle_createWithMouse_snapping.html @@ -120,7 +120,7 @@

Assets