Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Fixes for touch Angle- and DistanceMeasurement creation. #1782

Merged
merged 4 commits into from
Jan 22, 2025
Merged

Fixes for touch Angle- and DistanceMeasurement creation. #1782

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
d1f8878
XCD-237 Fix AngleMeasurementTouchControl canvas offset (and adjust Di…
MichalDybizbanskiCreoox Jan 21, 2025
865d5ff
Fix Angle and DistanceMeasurementTouchControl's pointerCircle coordin…
MichalDybizbanskiCreoox Jan 21, 2025
bc7e524
Abstract PointerLens::_updateActiveVisible
MichalDybizbanskiCreoox Jan 21, 2025
39a547c
Change _lensCursorDiv to be parented by _lensContainer - fixes incorr…
MichalDybizbanskiCreoox Jan 21, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
73 changes: 27 additions & 46 deletions src/extras/PointerLens/PointerLens.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -53,13 +53,10 @@ export class PointerLens {
this.scene = this.viewer.scene;

this._lensCursorDiv = document.createElement('div');
this.viewer.scene.canvas.canvas.parentNode.insertBefore(this._lensCursorDiv, this.viewer.scene.canvas.canvas);
this._lensCursorDiv.style.background = "pink";
this._lensCursorDiv.style.border = "2px solid red";
this._lensCursorDiv.style.borderRadius = "20px";
this._lensCursorDiv.style.width = "10px";
this._lensCursorDiv.style.height = "10px";
this._lensCursorDiv.style.margin = "-200px -200px";
this._lensParams = { canvasSize: 300, cursorBorder: 2, cursorSize: 10 };
this._lensCursorDiv.style.borderRadius = "50%";
this._lensCursorDiv.style.width = this._lensParams.cursorSize + "px";
this._lensCursorDiv.style.height = this._lensParams.cursorSize + "px";
this._lensCursorDiv.style.zIndex = "100000";
this._lensCursorDiv.style.position = "absolute";
this._lensCursorDiv.style.pointerEvents = "none";
Expand All @@ -72,8 +69,8 @@ export class PointerLens {
this._lensContainer.style.background = "white";
// this._lensContainer.style.opacity = "0";
this._lensContainer.style.borderRadius = "50%";
this._lensContainer.style.width = "300px";
this._lensContainer.style.height = "300px";
this._lensContainer.style.width = this._lensParams.canvasSize + "px";
this._lensContainer.style.height = this._lensParams.canvasSize + "px";

this._lensContainer.style.zIndex = "15000";
this._lensContainer.style.position = "absolute";
Expand All @@ -85,13 +82,14 @@ export class PointerLens {
// this._lensCanvas.style.background = "darkblue";
this._lensCanvas.style.borderRadius = "50%";

this._lensCanvas.style.width = "300px";
this._lensCanvas.style.height = "300px";
this._lensCanvas.style.width = this._lensParams.canvasSize + "px";
this._lensCanvas.style.height = this._lensParams.canvasSize + "px";
this._lensCanvas.style.zIndex = "15000";
this._lensCanvas.style.pointerEvents = "none";

document.body.appendChild(this._lensContainer);
this._lensContainer.appendChild(this._lensCanvas);
this._lensContainer.appendChild(this._lensCursorDiv);

this._lensCanvasContext = this._lensCanvas.getContext('2d');
this._canvasElement = this.viewer.scene.canvas.canvas;
Expand All @@ -109,7 +107,7 @@ export class PointerLens {

this._active = (cfg.active !== false);
this._visible = false;
this._snapped = false;
this.snapped = false;

this._onViewerRendering = this.viewer.scene.on("rendering", () => {
if (this._active && this._visible) {
Expand Down Expand Up @@ -156,21 +154,13 @@ export class PointerLens {
this._lensCanvas.height // destination height
);

const centerLensCanvas = [
(lensRect.left + lensRect.right) / 2 - canvasRect.left,
(lensRect.top + lensRect.bottom) / 2 - canvasRect.top
];
const middle = this._lensParams.canvasSize / 2 - this._lensParams.cursorSize / 2 - this._lensParams.cursorBorder;

if (this._snappedCanvasPos) {
const deltaX = this._snappedCanvasPos[0] - this._canvasPos[0];
const deltaY = this._snappedCanvasPos[1] - this._canvasPos[1];
const deltaX = this._snappedCanvasPos ? (this._snappedCanvasPos[0] - this._canvasPos[0]) : 0;
const deltaY = this._snappedCanvasPos ? (this._snappedCanvasPos[1] - this._canvasPos[1]) : 0;

this._lensCursorDiv.style.marginLeft = `${centerLensCanvas[0] + deltaX * this._zoomLevel - 10}px`;
this._lensCursorDiv.style.marginTop = `${centerLensCanvas[1] + deltaY * this._zoomLevel - 10}px`;
} else {
this._lensCursorDiv.style.marginLeft = `${centerLensCanvas[0] - 10}px`;
this._lensCursorDiv.style.marginTop = `${centerLensCanvas[1] - 10}px`;
}
this._lensCursorDiv.style.left = `${middle + deltaX * this._zoomLevel}px`;
this._lensCursorDiv.style.top = `${middle + deltaY * this._zoomLevel}px`;
}


Expand Down Expand Up @@ -238,14 +228,10 @@ export class PointerLens {
* @private
*/
set snapped(snapped) {
this._snapped = snapped;
if (snapped) {
this._lensCursorDiv.style.background = "greenyellow";
this._lensCursorDiv.style.border = "2px solid green";
} else {
this._lensCursorDiv.style.background = "pink";
this._lensCursorDiv.style.border = "2px solid red";
}
this._snapped = snapped;
const [ bg, border ] = snapped ? [ "greenyellow", "green" ] : [ "pink", "red" ];
this._lensCursorDiv.style.background = bg;
this._lensCursorDiv.style.border = this._lensParams.cursorBorder + "px solid " + border;
}

/**
Expand All @@ -257,19 +243,19 @@ export class PointerLens {
get snapped() {
return this._snapped;
}


_updateActiveVisible() {
this._lensContainer.style.visibility = (this._active && this._visible) ? "visible" : "hidden";
this.update();
}

/**
* Sets if this PointerLens is active.
* @param active
*/
set active(active) {
this._active = active;
this._lensContainer.style.visibility = (active && this._visible) ? "visible" : "hidden";
if (!active || !this._visible ) {
this._lensCursorDiv.style.marginLeft = `-100px`;
this._lensCursorDiv.style.marginTop = `-100px`;
}
this.update();
this._updateActiveVisible();
}

/**
Expand All @@ -288,12 +274,7 @@ export class PointerLens {
*/
set visible(visible) {
this._visible = visible;
this._lensContainer.style.visibility = (visible && this._active) ? "visible" : "hidden";
if (!visible || !this._active) {
this._lensCursorDiv.style.marginLeft = `-100px`;
this._lensCursorDiv.style.marginTop = `-100px`;
}
this.update();
this._updateActiveVisible();
}

/**
Expand Down
49 changes: 29 additions & 20 deletions src/plugins/AngleMeasurementsPlugin/AngleMeasurementsTouchControl.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
import {math} from "../../viewer/scene/math/math.js";
import {PointerCircle} from "../../extras/PointerCircle/PointerCircle.js";
import {AngleMeasurementsControl} from "./AngleMeasurementsControl.js";

import {transformToNode} from "../lib/ui/index.js";

const WAITING_FOR_ORIGIN_TOUCH_START = 0;
const WAITING_FOR_ORIGIN_QUICK_TOUCH_END = 1;
Expand All @@ -17,6 +17,8 @@ const WAITING_FOR_TARGET_LONG_TOUCH_END = 8;

const TOUCH_CANCELING = 7;

const tmpVec2 = math.vec2();

/**
* Creates {@link AngleMeasurement}s from touch input.
*
Expand Down Expand Up @@ -155,6 +157,19 @@ export class AngleMeasurementsTouchControl extends AngleMeasurementsControl {
this._touchState = WAITING_FOR_ORIGIN_TOUCH_START;
}

const copyCanvasPos = (event, dst) => {
dst[0] = event.clientX;
dst[1] = event.clientY;
transformToNode(canvas.ownerDocument.documentElement, canvas, dst);
return dst;
};

const toBodyPos = (pos, dst) => {
dst.set(pos);
transformToNode(canvas, canvas.ownerDocument.documentElement, dst);
return dst;
};

canvas.addEventListener("touchstart", this._onCanvasTouchStart = (event) => {

const currentNumTouches = event.touches.length;
Expand All @@ -168,11 +183,8 @@ export class AngleMeasurementsTouchControl extends AngleMeasurementsControl {
}

const touch = event.touches[0];
const touchX = touch.clientX;
const touchY = touch.clientY;

touchStartCanvasPos.set([touchX, touchY]);
touchMoveCanvasPos.set([touchX, touchY]);
copyCanvasPos(touch, touchStartCanvasPos);
touchMoveCanvasPos.set(touchStartCanvasPos);

switch (this._touchState) {

Expand All @@ -188,15 +200,15 @@ export class AngleMeasurementsTouchControl extends AngleMeasurementsControl {
});
if (snapPickResult && snapPickResult.snapped) {
pointerWorldPos.set(snapPickResult.worldPos);
this.pointerCircle.start(snapPickResult.snappedCanvasPos);
this.pointerCircle.start(toBodyPos(snapPickResult.snappedCanvasPos, tmpVec2));
} else {
const pickResult = scene.pick({
canvasPos: touchMoveCanvasPos,
pickSurface: true
})
if (pickResult && pickResult.worldPos) {
pointerWorldPos.set(pickResult.worldPos);
this.pointerCircle.start(pickResult.canvasPos);
this.pointerCircle.start(toBodyPos(pickResult.canvasPos, tmpVec2));
} else {
return;
}
Expand Down Expand Up @@ -303,7 +315,7 @@ export class AngleMeasurementsTouchControl extends AngleMeasurementsControl {
this.pointerLens.cursorPos = snapPickResult.snappedCanvasPos;
this.pointerLens.snapped = true;
}
this.pointerCircle.start(snapPickResult.snappedCanvasPos);
this.pointerCircle.start(toBodyPos(snapPickResult.snappedCanvasPos, tmpVec2));
pointerWorldPos.set(snapPickResult.worldPos);
this._currentAngleMeasurement.corner.worldPos = snapPickResult.worldPos;
this._currentAngleMeasurement.corner.entity = snapPickResult.entity;
Expand All @@ -325,7 +337,7 @@ export class AngleMeasurementsTouchControl extends AngleMeasurementsControl {
this.pointerLens.cursorPos = pickResult.canvasPos;
this.pointerLens.snapped = false;
}
this.pointerCircle.start(pickResult.canvasPos);
this.pointerCircle.start(toBodyPos(pickResult.canvasPos, tmpVec2));
pointerWorldPos.set(pickResult.worldPos);
this._currentAngleMeasurement.corner.worldPos = pickResult.worldPos;
this._currentAngleMeasurement.corner.entity = pickResult.entity;
Expand Down Expand Up @@ -396,7 +408,7 @@ export class AngleMeasurementsTouchControl extends AngleMeasurementsControl {
this.pointerLens.cursorPos = snapPickResult.snappedCanvasPos;
this.pointerLens.snapped = true;
}
this.pointerCircle.start(snapPickResult.snappedCanvasPos);
this.pointerCircle.start(toBodyPos(snapPickResult.snappedCanvasPos, tmpVec2));
pointerWorldPos.set(snapPickResult.worldPos);
this._currentAngleMeasurement.target.worldPos = snapPickResult.worldPos;
this._currentAngleMeasurement.target.entity = snapPickResult.entity;
Expand All @@ -418,7 +430,7 @@ export class AngleMeasurementsTouchControl extends AngleMeasurementsControl {
this.pointerLens.cursorPos = pickResult.canvasPos;
this.pointerLens.snapped = false;
}
this.pointerCircle.start(pickResult.canvasPos);
this.pointerCircle.start(toBodyPos(pickResult.canvasPos, tmpVec2));
pointerWorldPos.set(pickResult.worldPos);
this._currentAngleMeasurement.target.worldPos = pickResult.worldPos;
this._currentAngleMeasurement.target.entity = pickResult.entity;
Expand Down Expand Up @@ -482,14 +494,11 @@ export class AngleMeasurementsTouchControl extends AngleMeasurementsControl {
}

const touch = event.touches[0];
const touchX = touch.clientX;
const touchY = touch.clientY;

if (touch.identifier !== touchId) {
return;
}

touchMoveCanvasPos.set([touchX, touchY]);
copyCanvasPos(touch, touchMoveCanvasPos);

let snapPickResult;
let pickResult;
Expand Down Expand Up @@ -662,9 +671,6 @@ export class AngleMeasurementsTouchControl extends AngleMeasurementsControl {
}

const touch = event.changedTouches[0];
const touchX = touch.clientX;
const touchY = touch.clientY;

if (touch.identifier !== touchId) {
return;
}
Expand All @@ -674,7 +680,10 @@ export class AngleMeasurementsTouchControl extends AngleMeasurementsControl {
longTouchTimeout = null;
}

touchEndCanvasPos.set([touchX, touchY]);
copyCanvasPos(touch, touchEndCanvasPos);

const touchX = touchEndCanvasPos[0];
const touchY = touchEndCanvasPos[1];

switch (this._touchState) {

Expand Down
Loading
Loading