Created
April 11, 2024 00:14
-
-
Save xeolabs/7fbad0c539dc8f5fa395c44f64f6783d to your computer and use it in GitHub Desktop.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| import {Component} from "../../viewer/scene/Component.js"; | |
| import {math} from "../../viewer/scene/math/math.js"; | |
| import {PointerCircle} from "../../extras/PointerCircle/PointerCircle.js"; | |
| import {DistanceMeasurementsControl} from "./DistanceMeasurementsControl.js"; | |
| const WAITING_FOR_FIRST_TOUCH = 0; | |
| const WAITING_FOR_SECOND_TOUCH = 1; | |
| const LONG_TOUCH_FINDING_ORIGIN = 2; | |
| const TOUCH_FINDING_TARGET = 3; | |
| const TOUCH2_FINDING_TARGET = 4; | |
| const LONG_TOUCH_FINDING_TARGET = 5; | |
| const TOUCH_CANCELLED = 6; | |
| /** | |
| * Creates {@link DistanceMeasurement}s from mouse and touch input. | |
| * | |
| * Belongs to a {@link DistanceMeasurementsPlugin}. Located at {@link DistanceMeasurementsPlugin#control}. | |
| * | |
| * Once the DistanceMeasurementControl is activated, the first click on any {@link Entity} begins constructing a {@link DistanceMeasurement}, fixing its origin to that Entity. The next click on any Entity will complete the DistanceMeasurement, fixing its target to that second Entity. The DistanceMeasurementControl will then wait for the next click on any Entity, to begin constructing another DistanceMeasurement, and so on, until deactivated. | |
| * | |
| * See {@link DistanceMeasurementsPlugin} for more info. | |
| * | |
| * @experimental | |
| */ | |
| export class DistanceMeasurementDoubleTouchControl extends DistanceMeasurementsControl { | |
| /** | |
| * Creates a DistanceMeasurementDoubleTouchControl bound to the given DistanceMeasurementsPlugin. | |
| */ | |
| constructor(distanceMeasurementsPlugin, cfg = {}) { | |
| super(distanceMeasurementsPlugin.viewer.scene); | |
| this.pointerLens = cfg.pointerLens; | |
| this.pointerCircle = new PointerCircle(distanceMeasurementsPlugin.viewer); | |
| this._active = false; | |
| const markerDiv = document.createElement('div'); | |
| const canvas = this.scene.canvas.canvas; | |
| canvas.parentNode.insertBefore(markerDiv, canvas); | |
| markerDiv.style.background = "black"; | |
| markerDiv.style.border = "2px solid blue"; | |
| markerDiv.style.borderRadius = "10px"; | |
| markerDiv.style.width = "5px"; | |
| markerDiv.style.height = "5px"; | |
| markerDiv.style.margin = "-200px -200px"; | |
| markerDiv.style.zIndex = "100"; | |
| markerDiv.style.position = "absolute"; | |
| markerDiv.style.pointerEvents = "none"; | |
| this.markerDiv = markerDiv; | |
| this._currentDistanceMeasurement = null; | |
| this._currentDistanceMeasurementInitState = { | |
| wireVisible: null, | |
| axisVisible: null, | |
| xAxisVisible: null, | |
| yaxisVisible: null, | |
| zAxisVisible: null, | |
| targetVisible: null, | |
| } | |
| this._onCanvasTouchStart = null; | |
| this._onCanvasTouchEnd = null; | |
| this._doubleTouchTimeoutMs = 300; | |
| this._snapToEdge = cfg.snapToEdge !== false; | |
| this._snapToVertex = cfg.snapToVertex !== false; | |
| this._touchState = WAITING_FOR_FIRST_TOUCH; | |
| this._attachPlugin(distanceMeasurementsPlugin, cfg); | |
| } | |
| _attachPlugin(distanceMeasurementsPlugin) { | |
| /** | |
| * The {@link DistanceMeasurementsPlugin} that owns this DistanceMeasurementDoubleTouchControl. | |
| * @type {DistanceMeasurementsPlugin} | |
| */ | |
| this.distanceMeasurementsPlugin = distanceMeasurementsPlugin; | |
| /** | |
| * The {@link DistanceMeasurementsPlugin} that owns this DistanceMeasurementDoubleTouchControl. | |
| * @type {DistanceMeasurementsPlugin} | |
| */ | |
| this.plugin = distanceMeasurementsPlugin; | |
| } | |
| /** Gets if this DistanceMeasurementDoubleTouchControl is currently active, where it is responding to input. | |
| * | |
| * @returns {Boolean} | |
| */ | |
| get active() { | |
| return this._active; | |
| } | |
| /** | |
| * Sets whether snap-to-vertex is enabled for this DistanceMeasurementDoubleTouchControl. | |
| * This is `true` by default. | |
| * @param snapToVertex | |
| */ | |
| set snapToVertex(snapToVertex) { | |
| this._snapToVertex = snapToVertex; | |
| } | |
| /** | |
| * Gets whether snap-to-vertex is enabled for this DistanceMeasurementDoubleTouchControl. | |
| * This is `true` by default. | |
| * @returns {*} | |
| */ | |
| get snapToVertex() { | |
| return this._snapToVertex; | |
| } | |
| /** | |
| * Sets whether snap-to-edge is enabled for this DistanceMeasurementDoubleTouchControl. | |
| * This is `true` by default. | |
| * @param snapToEdge | |
| */ | |
| set snapToEdge(snapToEdge) { | |
| this._snapToEdge = snapToEdge; | |
| } | |
| /** | |
| * Gets whether snap-to-edge is enabled for this DistanceMeasurementDoubleTouchControl. | |
| * This is `true` by default. | |
| * @returns {*} | |
| */ | |
| get snapToEdge() { | |
| return this._snapToEdge; | |
| } | |
| /** | |
| * Activates this DistanceMeasurementDoubleTouchControl, ready to respond to input. | |
| */ | |
| activate() { | |
| if (this._active) { | |
| return; | |
| } | |
| const plugin = this.plugin; | |
| const scene = this.scene; | |
| const canvas = scene.canvas.canvas; | |
| const pointerLens = plugin.pointerLens; | |
| const pointerWorldPos = math.vec3(); | |
| const touchTolerance = 20; | |
| let doubleTouchTimeout = null; | |
| const disableCameraMouseControl = () => { | |
| this.plugin.viewer.cameraControl.active = false; | |
| } | |
| const enableCameraMouseControl = () => { | |
| this.plugin.viewer.cameraControl.active = true; | |
| } | |
| this._touchState = WAITING_FOR_FIRST_TOUCH; | |
| const touchStartCanvasPos = math.vec2(); | |
| const touchMoveCanvasPos = math.vec2(); | |
| const touchEndCanvasPos = math.vec2(); | |
| const cancel = ()=> { | |
| if (doubleTouchTimeout) { | |
| clearTimeout(doubleTouchTimeout); | |
| doubleTouchTimeout = null; | |
| } | |
| if (this._currentDistanceMeasurement) { | |
| this._currentDistanceMeasurement.destroy(); | |
| this._currentDistanceMeasurement = null; | |
| } | |
| this._touchState = TOUCH_CANCELLED; | |
| } | |
| canvas.addEventListener("touchstart", this._onCanvasTouchStart = (event) => { | |
| const currentNumTouches = event.touches.length; | |
| if (currentNumTouches !== 1) { | |
| return; | |
| } | |
| const touchX = event.touches[0].clientX; | |
| const touchY = event.touches[0].clientY; | |
| touchStartCanvasPos.set([touchX, touchY]); | |
| touchMoveCanvasPos.set([touchX, touchY]); | |
| switch (this._touchState) { | |
| case WAITING_FOR_FIRST_TOUCH: | |
| if (currentNumTouches !== 1) { // Two or more fingers down | |
| cancel(); | |
| return; | |
| } | |
| if (doubleTouchTimeout) { | |
| clearTimeout(doubleTouchTimeout); | |
| doubleTouchTimeout = null; | |
| } | |
| doubleTouchTimeout = setTimeout(() => { | |
| if (doubleTouchTimeout !== null) { | |
| this._touchState = WAITING_FOR_FIRST_TOUCH; | |
| if (this.pointerLens) { | |
| this.pointerLens.visible = false; | |
| } | |
| doubleTouchTimeout = null; | |
| console.log("touchstart: this._touchState= WAITING_FOR_SECOND_TOUCH-> (timeout) WAITING_FOR_FIRST_TOUCH") | |
| } | |
| }, this._doubleTouchTimeoutMs); | |
| this._touchState = WAITING_FOR_SECOND_TOUCH; | |
| console.log("touchstart: this._touchState= WAITING_FOR_FIRST_TOUCH -> WAITING_FOR_SECOND_TOUCH") | |
| break; | |
| case WAITING_FOR_SECOND_TOUCH: | |
| if (currentNumTouches !== 1) { // Two or more fingers down | |
| cancel(); | |
| return; | |
| } | |
| if (doubleTouchTimeout) { | |
| clearTimeout(doubleTouchTimeout); | |
| doubleTouchTimeout = null; | |
| } | |
| if (touchMoveCanvasPos[0] > touchStartCanvasPos[0] + touchTolerance || | |
| touchMoveCanvasPos[0] < touchStartCanvasPos[0] - touchTolerance || | |
| touchMoveCanvasPos[1] > touchStartCanvasPos[1] + touchTolerance || | |
| touchMoveCanvasPos[1] < touchStartCanvasPos[1] - touchTolerance) { | |
| this._touchState = WAITING_FOR_FIRST_TOUCH; | |
| return; // Has moved | |
| } | |
| disableCameraMouseControl(); | |
| if (this.pointerLens) { | |
| this.pointerLens.visible = true; | |
| this.pointerLens.centerPos = touchStartCanvasPos; | |
| this.pointerLens.cursorPos = touchStartCanvasPos; | |
| } | |
| if (this.pointerLens) { | |
| this.pointerLens.centerPos = touchMoveCanvasPos; | |
| this.pointerLens.snapped = false; | |
| } | |
| const snapPickResult = scene.pick({ | |
| canvasPos: touchMoveCanvasPos, | |
| snapToVertex: this._snapToVertex, | |
| snapToEdge: this._snapToEdge | |
| }); | |
| if (snapPickResult && snapPickResult.worldPos) { | |
| if (this.pointerLens) { | |
| this.pointerLens.cursorPos = snapPickResult.snappedCanvasPos; | |
| this.pointerLens.snapped = true; | |
| } | |
| pointerWorldPos.set(snapPickResult.worldPos); | |
| if (!this._currentDistanceMeasurement) { | |
| this._currentDistanceMeasurement = plugin.createMeasurement({ | |
| id: math.createUUID(), | |
| origin: { | |
| worldPos: snapPickResult.worldPos | |
| }, | |
| target: { | |
| worldPos: snapPickResult.worldPos | |
| } | |
| }); | |
| this._currentDistanceMeasurement.labelsVisible = false; | |
| this._currentDistanceMeasurement.xAxisVisible = false; | |
| this._currentDistanceMeasurement.yAxisVisible = false; | |
| this._currentDistanceMeasurement.zAxisVisible = false; | |
| this._currentDistanceMeasurement.wireVisible = false; | |
| this._currentDistanceMeasurement.originVisible = true; | |
| this._currentDistanceMeasurement.targetVisible = false; | |
| this._currentDistanceMeasurement.clickable = false; | |
| } else { | |
| this._currentDistanceMeasurement.origin.worldPos = snapPickResult.worldPos; | |
| } | |
| this.distanceMeasurementsPlugin.fire("measurementStart", this._currentDistanceMeasurement); | |
| this._touchState = LONG_TOUCH_FINDING_ORIGIN; | |
| console.log("touchstart: this._touchState= WAITING_FOR_SECOND_TOUCH -> LONG_TOUCH_FINDING_ORIGIN") | |
| } else { | |
| const pickResult = scene.pick({ | |
| canvasPos: touchMoveCanvasPos, | |
| pickSurface: true | |
| }) | |
| if (pickResult && pickResult.worldPos) { | |
| if (this.pointerLens) { | |
| this.pointerLens.cursorPos = pickResult.canvasPos; | |
| this.pointerLens.snapped = false; | |
| } | |
| pointerWorldPos.set(pickResult.worldPos); | |
| if (!this._currentDistanceMeasurement) { | |
| this._currentDistanceMeasurement = plugin.createMeasurement({ | |
| id: math.createUUID(), | |
| origin: { | |
| worldPos: pickResult.worldPos | |
| }, | |
| target: { | |
| worldPos: pickResult.worldPos | |
| } | |
| }); | |
| this._currentDistanceMeasurement.labelsVisible = false; | |
| this._currentDistanceMeasurement.xAxisVisible = false; | |
| this._currentDistanceMeasurement.yAxisVisible = false; | |
| this._currentDistanceMeasurement.zAxisVisible = false; | |
| this._currentDistanceMeasurement.wireVisible = false; | |
| this._currentDistanceMeasurement.originVisible = true; | |
| this._currentDistanceMeasurement.targetVisible = false; | |
| this._currentDistanceMeasurement.clickable = false; | |
| } else { | |
| this._currentDistanceMeasurement.origin.worldPos = pickResult.worldPos; | |
| } | |
| this.distanceMeasurementsPlugin.fire("measurementStart", this._currentDistanceMeasurement); | |
| this._touchState = LONG_TOUCH_FINDING_ORIGIN; | |
| console.log("touchstart: this._touchState= WAITING_FOR_SECOND_TOUCH -> LONG_TOUCH_FINDING_ORIGIN") | |
| } else { | |
| if (this.pointerLens) { | |
| this.pointerLens.visible = false; | |
| } | |
| if (this._currentDistanceMeasurement) { | |
| this._currentDistanceMeasurement.destroy(); | |
| this._currentDistanceMeasurement = null; | |
| } | |
| this._touchState = WAITING_FOR_FIRST_TOUCH; | |
| console.log("touchstart: this._touchState= WAITING_FOR_SECOND_TOUCH -> WAITING_FOR_FIRST_TOUCH") | |
| } | |
| } | |
| break; | |
| case TOUCH_FINDING_TARGET: | |
| if (currentNumTouches !== 1 && doubleTouchTimeout !== null) { // Two or more fingers down | |
| clearTimeout(doubleTouchTimeout); | |
| doubleTouchTimeout = null; | |
| return; | |
| } | |
| if (doubleTouchTimeout) { | |
| clearTimeout(doubleTouchTimeout); | |
| doubleTouchTimeout = null; | |
| } | |
| doubleTouchTimeout = setTimeout(() => { | |
| // if (doubleTouchTimeout !== null) { | |
| doubleTouchTimeout = null; | |
| console.log("touchstart: this._touchState= TOUCH2_FINDING_TARGET -> (timeout) TOUCH_FINDING_TARGET") | |
| this._touchState = TOUCH_FINDING_TARGET; | |
| // } | |
| }, this._doubleTouchTimeoutMs); | |
| this._touchState = TOUCH2_FINDING_TARGET; | |
| break; | |
| case TOUCH2_FINDING_TARGET: { | |
| if (doubleTouchTimeout) { | |
| clearTimeout(doubleTouchTimeout); | |
| doubleTouchTimeout = null; | |
| } | |
| if (currentNumTouches !== 1 || | |
| touchMoveCanvasPos[0] > touchStartCanvasPos[0] + touchTolerance || | |
| touchMoveCanvasPos[0] < touchStartCanvasPos[0] - touchTolerance || | |
| touchMoveCanvasPos[1] > touchStartCanvasPos[1] + touchTolerance || | |
| touchMoveCanvasPos[1] < touchStartCanvasPos[1] - touchTolerance) { | |
| this._touchState = WAITING_FOR_FIRST_TOUCH; | |
| return; | |
| } | |
| // Long touch | |
| disableCameraMouseControl(); | |
| if (this.pointerLens) { | |
| this.pointerLens.visible = true; | |
| this.pointerLens.centerPos = touchStartCanvasPos; | |
| this.pointerLens.snapped = false; | |
| } | |
| const snapPickResult = scene.pick({ | |
| canvasPos: touchMoveCanvasPos, | |
| snapToVertex: this._snapToVertex, | |
| snapToEdge: this._snapToEdge | |
| }); | |
| if (snapPickResult && snapPickResult.worldPos) { | |
| if (this.pointerLens) { | |
| this.pointerLens.cursorPos = snapPickResult.snappedCanvasPos; | |
| this.pointerLens.snapped = true; | |
| } | |
| pointerWorldPos.set(snapPickResult.worldPos); | |
| this._currentDistanceMeasurement.target.worldPos = snapPickResult.worldPos; | |
| this._currentDistanceMeasurement.targetVisible = true; | |
| this._currentDistanceMeasurement.wireVisible = true; | |
| this._currentDistanceMeasurement.labelsVisible = true; | |
| this.distanceMeasurementsPlugin.fire("measurementStart", this._currentDistanceMeasurement); | |
| this._touchState = LONG_TOUCH_FINDING_TARGET; | |
| console.log("touchstart: this._touchState= TOUCH2_FINDING_TARGET -> LONG_TOUCH_FINDING_TARGET") | |
| } else { | |
| const pickResult = scene.pick({ | |
| canvasPos: touchMoveCanvasPos, | |
| pickSurface: true | |
| }) | |
| if (pickResult && pickResult.worldPos) { | |
| if (this.pointerLens) { | |
| this.pointerLens.cursorPos = pickResult.canvasPos; | |
| this.pointerLens.snapped = false; | |
| } | |
| pointerWorldPos.set(pickResult.worldPos); | |
| this._currentDistanceMeasurement.target.worldPos = pickResult.worldPos; | |
| this._currentDistanceMeasurement.targetVisible = true; | |
| this._currentDistanceMeasurement.wireVisible = true; | |
| this._currentDistanceMeasurement.labelsVisible = true; | |
| this.distanceMeasurementsPlugin.fire("measurementStart", this._currentDistanceMeasurement); | |
| this._touchState = LONG_TOUCH_FINDING_TARGET; | |
| console.log("touchstart: this._touchState= TOUCH2_FINDING_TARGET -> LONG_TOUCH_FINDING_TARGET") | |
| } else { | |
| if (this.pointerLens) { | |
| this.pointerLens.visible = false; | |
| } | |
| if (this._currentDistanceMeasurement) { | |
| this._currentDistanceMeasurement.destroy(); | |
| this._currentDistanceMeasurement = null; | |
| } | |
| this._touchState = WAITING_FOR_FIRST_TOUCH; | |
| console.log("touchstart: this._touchState= TOUCH2_FINDING_TARGET -> WAITING_FOR_FIRST_TOUCH") | |
| } | |
| } | |
| break; | |
| } | |
| default: | |
| // if (doubleTouchTimeout !== null) { | |
| // clearTimeout(doubleTouchTimeout); | |
| // doubleTouchTimeout = null; | |
| // } | |
| // enableCameraMouseControl(); | |
| // this._touchState = TOUCH_CANCELLED; | |
| // console.log("touchstart: this._touchState= default -> TOUCH_CANCELLED") | |
| return; | |
| } | |
| }, {passive: true}); | |
| canvas.addEventListener("touchmove", (event) => { | |
| const currentNumTouches = event.touches.length; | |
| if (currentNumTouches !== 1 || event.changedTouches.length !== 1) { | |
| return; | |
| } | |
| if (doubleTouchTimeout) { | |
| clearTimeout(doubleTouchTimeout); | |
| doubleTouchTimeout = null; | |
| } | |
| const touchX = event.touches[0].clientX; | |
| const touchY = event.touches[0].clientY; | |
| touchMoveCanvasPos.set([touchX, touchY]); | |
| let snapPickResult; | |
| let pickResult; | |
| switch (this._touchState) { | |
| case TOUCH_CANCELLED: | |
| break; | |
| case WAITING_FOR_FIRST_TOUCH: | |
| this._touchState = WAITING_FOR_FIRST_TOUCH; | |
| console.log("touchmove: this._touchState= WAITING_FOR_FIRST_TOUCH -> WAITING_FOR_FIRST_TOUCH") | |
| break; | |
| case LONG_TOUCH_FINDING_ORIGIN: | |
| if (this.pointerLens) { | |
| this.pointerLens.centerPos = touchMoveCanvasPos; | |
| } | |
| snapPickResult = scene.pick({ | |
| canvasPos: touchMoveCanvasPos, | |
| snapToVertex: this._snapToVertex, | |
| snapToEdge: this._snapToEdge | |
| }); | |
| if (snapPickResult && (snapPickResult.snappedToVertex || snapPickResult.snappedToEdge)) { | |
| if (this.pointerLens) { | |
| this.pointerLens.cursorPos = snapPickResult.snappedCanvasPos; | |
| this.pointerLens.snapped = true; | |
| } | |
| pointerWorldPos.set(snapPickResult.worldPos); | |
| if (!this._currentDistanceMeasurement) { | |
| this._currentDistanceMeasurement = plugin.createMeasurement({ | |
| id: math.createUUID(), | |
| origin: { | |
| worldPos: snapPickResult.worldPos | |
| }, | |
| target: { | |
| worldPos: snapPickResult.worldPos | |
| } | |
| }); | |
| this._currentDistanceMeasurement.labelsVisible = false; | |
| this._currentDistanceMeasurement.xAxisVisible = false; | |
| this._currentDistanceMeasurement.yAxisVisible = false; | |
| this._currentDistanceMeasurement.zAxisVisible = false; | |
| this._currentDistanceMeasurement.wireVisible = false; | |
| this._currentDistanceMeasurement.originVisible = true; | |
| this._currentDistanceMeasurement.targetVisible = false; | |
| this._currentDistanceMeasurement.clickable = false; | |
| } else { | |
| this._currentDistanceMeasurement.origin.worldPos = snapPickResult.worldPos; | |
| } | |
| this.distanceMeasurementsPlugin.fire("measurementStart", this._currentDistanceMeasurement); | |
| } else { | |
| pickResult = scene.pick({ | |
| canvasPos: touchMoveCanvasPos, | |
| pickSurface: true | |
| }) | |
| if (pickResult && pickResult.worldPos) { | |
| if (this.pointerLens) { | |
| this.pointerLens.cursorPos = pickResult.canvasPos; | |
| this.pointerLens.snapped = false; | |
| } | |
| pointerWorldPos.set(pickResult.worldPos); | |
| if (!this._currentDistanceMeasurement) { | |
| this._currentDistanceMeasurement = plugin.createMeasurement({ | |
| id: math.createUUID(), | |
| origin: { | |
| worldPos: pickResult.worldPos | |
| }, | |
| target: { | |
| worldPos: pickResult.worldPos | |
| } | |
| }); | |
| this._currentDistanceMeasurement.labelsVisible = false; | |
| this._currentDistanceMeasurement.xAxisVisible = false; | |
| this._currentDistanceMeasurement.yAxisVisible = false; | |
| this._currentDistanceMeasurement.zAxisVisible = false; | |
| this._currentDistanceMeasurement.wireVisible = false; | |
| this._currentDistanceMeasurement.originVisible = true; | |
| this._currentDistanceMeasurement.targetVisible = false; | |
| this._currentDistanceMeasurement.clickable = false; | |
| } else { | |
| this._currentDistanceMeasurement.origin.worldPos = pickResult.worldPos; | |
| } | |
| this.distanceMeasurementsPlugin.fire("measurementStart", this._currentDistanceMeasurement); | |
| } else { | |
| if (this.pointerLens) { | |
| this.pointerLens.cursorPos = null; | |
| this.pointerLens.snapped = false; | |
| } | |
| } | |
| } | |
| this._touchState = LONG_TOUCH_FINDING_ORIGIN; | |
| console.log("touchmove: this._touchState= LONG_TOUCH_FINDING_ORIGIN -> LONG_TOUCH_FINDING_ORIGIN") | |
| break; | |
| case TOUCH_FINDING_TARGET: | |
| this._touchState = TOUCH_FINDING_TARGET; | |
| console.log("touchmove: this._touchState= TOUCH_FINDING_TARGET -> TOUCH_FINDING_TARGET") | |
| break; | |
| case LONG_TOUCH_FINDING_TARGET: | |
| if (currentNumTouches !== 1 && doubleTouchTimeout !== null) { // Two or more fingers down | |
| clearTimeout(doubleTouchTimeout); | |
| doubleTouchTimeout = null; | |
| if (this.pointerLens) { | |
| this.pointerLens.visible = false; | |
| } | |
| enableCameraMouseControl(); | |
| this._touchState = TOUCH_CANCELLED; | |
| console.log("touchmove: this._touchState= QUICK_TOUCH_FINDING_TARGET -> TOUCH_CANCELLED") | |
| return; | |
| } | |
| if (this.pointerLens) { | |
| this.pointerLens.centerPos = touchMoveCanvasPos; | |
| } | |
| snapPickResult = scene.pick({ | |
| canvasPos: touchMoveCanvasPos, | |
| snapToVertex: this._snapToVertex, | |
| snapToEdge: this._snapToEdge | |
| }); | |
| if (snapPickResult && snapPickResult.worldPos) { | |
| if (this.pointerLens) { | |
| this.pointerLens.cursorPos = snapPickResult.snappedCanvasPos; | |
| this.pointerLens.snapped = true; | |
| } | |
| this._currentDistanceMeasurement.target.worldPos = snapPickResult.worldPos; | |
| this._currentDistanceMeasurement.targetVisible = true; | |
| this._currentDistanceMeasurement.wireVisible = true; | |
| this._currentDistanceMeasurement.labelsVisible = true; | |
| } else { | |
| pickResult = scene.pick({ | |
| canvasPos: touchMoveCanvasPos, | |
| pickSurface: true | |
| }) | |
| if (pickResult && pickResult.worldPos) { | |
| if (this.pointerLens) { | |
| this.pointerLens.cursorPos = pickResult.canvasPos; | |
| this.pointerLens.snapped = false; | |
| } | |
| this._currentDistanceMeasurement.target.worldPos = pickResult.worldPos; | |
| this._currentDistanceMeasurement.targetVisible = true; | |
| this._currentDistanceMeasurement.wireVisible = true; | |
| this._currentDistanceMeasurement.labelsVisible = true; | |
| } | |
| } | |
| this._touchState = LONG_TOUCH_FINDING_TARGET; | |
| break; | |
| default: | |
| // this._touchState = WAITING_FOR_FIRST_TOUCH; | |
| // console.log("touchmove: this._touchState= default -> WAITING_FOR_FIRST_TOUCH") | |
| // break; | |
| } | |
| }, {passive: true}); | |
| canvas.addEventListener("touchend", this._onCanvasTouchEnd = (event) => { | |
| const currentNumTouches = event.changedTouches.length; | |
| if (currentNumTouches !== 1) { | |
| return; | |
| } | |
| enableCameraMouseControl(); | |
| // if (doubleTouchTimeout) { | |
| // clearTimeout(doubleTouchTimeout); | |
| // doubleTouchTimeout = null; | |
| // } | |
| const touchX = event.changedTouches[0].clientX; | |
| const touchY = event.changedTouches[0].clientY; | |
| touchEndCanvasPos.set([touchX, touchY]); | |
| switch (this._touchState) { | |
| case TOUCH_CANCELLED: | |
| this._touchState = WAITING_FOR_FIRST_TOUCH; | |
| break; | |
| case WAITING_FOR_FIRST_TOUCH: | |
| this._touchState = WAITING_FOR_FIRST_TOUCH; | |
| // if (touchEndCanvasPos[0] > touchStartCanvasPos[0] + touchTolerance || | |
| // touchEndCanvasPos[0] < touchStartCanvasPos[0] - touchTolerance || | |
| // touchEndCanvasPos[1] > touchStartCanvasPos[1] + touchTolerance || | |
| // touchEndCanvasPos[1] < touchStartCanvasPos[1] - touchTolerance) { | |
| // } else { | |
| // if (this._currentDistanceMeasurement) { | |
| // this._currentDistanceMeasurement.destroy(); | |
| // this._currentDistanceMeasurement = null; | |
| // } | |
| // } | |
| console.log("touchend: this._touchState= WAITING_FOR_FIRST_TOUCH -> WAITING_FOR_FIRST_TOUCH") | |
| break; | |
| case TOUCH_FINDING_TARGET: | |
| this._touchState = TOUCH_FINDING_TARGET; | |
| // if (touchEndCanvasPos[0] > touchStartCanvasPos[0] + touchTolerance || | |
| // touchEndCanvasPos[0] < touchStartCanvasPos[0] - touchTolerance || | |
| // touchEndCanvasPos[1] > touchStartCanvasPos[1] + touchTolerance || | |
| // touchEndCanvasPos[1] < touchStartCanvasPos[1] - touchTolerance) { | |
| // } else { | |
| // if (this._currentDistanceMeasurement) { | |
| // this._currentDistanceMeasurement.destroy(); | |
| // this._currentDistanceMeasurement = null; | |
| // } | |
| // } | |
| console.log("touchend: this._touchState= TOUCH_FINDING_TARGET -> TOUCH_FINDING_TARGET") | |
| break; | |
| case WAITING_FOR_SECOND_TOUCH: | |
| this._touchState = WAITING_FOR_SECOND_TOUCH; | |
| console.log("touchend: this._touchState= WAITING_FOR_SECOND_TOUCH -> WAITING_FOR_SECOND_TOUCH") | |
| break; | |
| case LONG_TOUCH_FINDING_ORIGIN: | |
| if (this.pointerLens) { | |
| this.pointerLens.visible = false; | |
| } | |
| if (!this._currentDistanceMeasurement) { | |
| if (this.pointerLens) { | |
| this.pointerLens.snapped = false; | |
| this.pointerLens.visible = false; | |
| } | |
| this._touchState = WAITING_FOR_FIRST_TOUCH; | |
| console.log("touchend: this._touchState= LONG_TOUCH_FINDING_ORIGIN (no measurement) -> WAITING_FOR_FIRST_TOUCH") | |
| } else { | |
| this._touchState = TOUCH_FINDING_TARGET; | |
| console.log("touchend: this._touchState= LONG_TOUCH_FINDING_ORIGIN (picked, begin measurement) -> TOUCH_FINDING_TARGET") | |
| } | |
| break; | |
| case TOUCH2_FINDING_TARGET: | |
| this._touchState = TOUCH2_FINDING_TARGET; | |
| console.log("touchend: this._touchState= TOUCH2_FINDING_TARGET -> TOUCH2_FINDING_TARGET") | |
| break; | |
| case LONG_TOUCH_FINDING_TARGET: | |
| if (this.pointerLens) { | |
| this.pointerLens.visible = false; | |
| } | |
| if (!this._currentDistanceMeasurement || !this._currentDistanceMeasurement.targetVisible) { | |
| if (this._currentDistanceMeasurement) { | |
| this._currentDistanceMeasurement.destroy(); | |
| this._currentDistanceMeasurement = null; | |
| } | |
| this._touchState = WAITING_FOR_FIRST_TOUCH; | |
| console.log("touchend: this._touchState= LONG_TOUCH_FINDING_TARGET (no target found) -> WAITING_FOR_FIRST_TOUCH") | |
| } else { | |
| this._currentDistanceMeasurement.clickable = true; | |
| this.distanceMeasurementsPlugin.fire("measurementEnd", this._currentDistanceMeasurement); | |
| this._currentDistanceMeasurement = null; | |
| this._touchState = WAITING_FOR_FIRST_TOUCH; | |
| console.log("touchend: this._touchState= LONG_TOUCH_FINDING_TARGET -> WAITING_FOR_FIRST_TOUCH") | |
| } | |
| break; | |
| // case TOUCH_CANCELLED: | |
| // if (this.pointerLens) { | |
| // this.pointerLens.visible = false; | |
| // } | |
| // this._currentDistanceMeasurement = null; | |
| // this._touchState = WAITING_FOR_FIRST_TOUCH; | |
| // console.log("touchend: this._touchState= default -> WAITING_FOR_FIRST_TOUCH") | |
| // break; | |
| } | |
| }, {passive: true}); | |
| this._active = true; | |
| } | |
| /** | |
| * Deactivates this DistanceMeasurementDoubleTouchControl, making it unresponsive to input. | |
| * | |
| * Destroys any {@link DistanceMeasurement} under construction. | |
| */ | |
| deactivate() { | |
| if (!this._active) { | |
| return; | |
| } | |
| if (this.plugin.pointerLens) { | |
| this.plugin.pointerLens.visible = false; | |
| } | |
| this.reset(); | |
| const canvas = this.plugin.viewer.scene.canvas.canvas; | |
| canvas.removeEventListener("touchstart", this._onCanvasTouchStart); | |
| canvas.removeEventListener("touchend", this._onCanvasTouchEnd); | |
| if (this._currentDistanceMeasurement) { | |
| this.distanceMeasurementsPlugin.fire("measurementCancel", this._currentDistanceMeasurement); | |
| this._currentDistanceMeasurement.destroy(); | |
| this._currentDistanceMeasurement = null; | |
| } | |
| this._active = false; | |
| } | |
| /** | |
| * Resets this DistanceMeasurementDoubleTouchControl. | |
| * | |
| * Destroys any {@link DistanceMeasurement} under construction. | |
| * | |
| * Does nothing if the DistanceMeasurementDoubleTouchControl is not active. | |
| */ | |
| reset() { | |
| if (!this._active) { | |
| return; | |
| } | |
| if (this._currentDistanceMeasurement) { | |
| this.distanceMeasurementsPlugin.fire("measurementCancel", this._currentDistanceMeasurement); | |
| this._currentDistanceMeasurement.destroy(); | |
| this._currentDistanceMeasurement = null; | |
| } | |
| } | |
| /** | |
| * Destroys this DistanceMeasurementDoubleTouchControl. | |
| */ | |
| destroy() { | |
| this.deactivate(); | |
| super.destroy(); | |
| } | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment