diff --git a/engine/CHANGELOG.md b/engine/CHANGELOG.md index befb16c7..ada42dea 100644 --- a/engine/CHANGELOG.md +++ b/engine/CHANGELOG.md @@ -1,3 +1,9 @@ +# @wwtelescope/engine 7.30.1 (2024-02-08) + +- Further improvements to touch gesture handling (#288, @Carifio24). Hopefully + this nails it! + + # @wwtelescope/engine 7.30.0 (2024-02-07) - Add a `TileCache.clearCache()` method allowing the tile cache to be cleared diff --git a/engine/esm/wwt_control.js b/engine/esm/wwt_control.js index 80555fbb..1fa4fb4e 100644 --- a/engine/esm/wwt_control.js +++ b/engine/esm/wwt_control.js @@ -117,7 +117,11 @@ export function WWTControl() { this._moved = false; this._zooming = false; this._rotating = false; - this._dragThreshold = 4; + this._dragThreshold = 8; + this._twoTouchCenter = null; + this._lastTouchRect = new Array(2); + this._twoTouchEvents = 0; + this._twoTouchEventThreshold = 10; this._foregroundCanvas = null; this._fgDevice = null; @@ -1145,6 +1149,11 @@ var WWTControl$ = { this._lastY = ev.targetTouches[0].pageY; if (ev.targetTouches.length === 2) { this._hasTwoTouches = true; + var t0 = ev.touches[0]; + var t1 = ev.touches[1]; + this._twoTouchCenter = Vector2d.create(0.5 * (t0.pageX + t1.pageX), 0.5 * (t0.pageY + t1.pageY)); + this._lastTouchRect[0] = Vector2d.create(t0.pageX, t0.pageY); + this._lastTouchRect[1] = Vector2d.create(t1.pageX, t1.pageY); return; } if (this.uiController != null) { @@ -1167,13 +1176,15 @@ var WWTControl$ = { var newRect = new Array(2); newRect[0] = Vector2d.create(t0.pageX, t0.pageY); newRect[1] = Vector2d.create(t1.pageX, t1.pageY); + this._twoTouchEvents += 1; + + if (!this._dragging && this._lastTouchRect[0] != null && this._lastTouchRect[1] != null && + this._twoTouchCenter != null && this._twoTouchEvents > this._twoTouchEventThreshold) { - if (!this._dragging && this._pinchingZoomRect[0] != null && this._pinchingZoomRect[1] != null) { - var centerPoint = Vector2d.create(this.renderContext.width / 2, this.renderContext.height / 2); - var delta1 = Vector2d.subtract(newRect[0], this._pinchingZoomRect[0]); - var delta2 = Vector2d.subtract(newRect[1], this._pinchingZoomRect[1]); - var radialDirection1 = Vector2d.subtract(this._pinchingZoomRect[0], centerPoint); - var radialDirection2 = Vector2d.subtract(this._pinchingZoomRect[1], centerPoint); + var delta1 = Vector2d.subtract(newRect[0], this._lastTouchRect[0]); + var delta2 = Vector2d.subtract(newRect[1], this._lastTouchRect[1]); + var radialDirection1 = Vector2d.subtract(this._lastTouchRect[0], this._twoTouchCenter); + var radialDirection2 = Vector2d.subtract(this._lastTouchRect[1], this._twoTouchCenter); radialDirection1.normalize(); radialDirection2.normalize(); var radialDot1 = delta1.x * radialDirection1.x + delta1.y * radialDirection1.y; @@ -1185,17 +1196,17 @@ var WWTControl$ = { var radialMagnitude = radialComponent1.get_length() + radialComponent2.get_length(); var angularMagnitude = angularComponent1.get_length() + angularComponent2.get_length(); - if (radialMagnitude >= 0.5 * angularMagnitude && !this._rotating) { - var oldDist = this.getDistance(this._pinchingZoomRect[0], this._pinchingZoomRect[1]); + if (radialMagnitude > angularMagnitude && !this._rotating) { + var oldDist = this.getDistance(this._lastTouchRect[0], this._lastTouchRect[1]); var newDist = this.getDistance(newRect[0], newRect[1]); var ratio = oldDist / newDist; this.zoom(ratio); this._zooming = true; - } else if (!this._zooming) { - var oldCenterDelta1 = Vector2d.subtract(this._pinchingZoomRect[0], centerPoint); - var oldCenterDelta2 = Vector2d.subtract(this._pinchingZoomRect[1], centerPoint); - var newCenterDelta1 = Vector2d.subtract(newRect[0], centerPoint); - var newCenterDelta2 = Vector2d.subtract(newRect[1], centerPoint); + } else if (!this._zooming && radialMagnitude > 0) { + var oldCenterDelta1 = Vector2d.subtract(this._lastTouchRect[0], this._twoTouchCenter); + var oldCenterDelta2 = Vector2d.subtract(this._lastTouchRect[1], this._twoTouchCenter); + var newCenterDelta1 = Vector2d.subtract(newRect[0], this._twoTouchCenter); + var newCenterDelta2 = Vector2d.subtract(newRect[1], this._twoTouchCenter); var cross1 = this.crossProductZ(oldCenterDelta1, newCenterDelta1); var cross2 = this.crossProductZ(oldCenterDelta2, newCenterDelta2); var angle1 = Math.asin(cross1 / (oldCenterDelta1.get_length() * newCenterDelta1.get_length())); @@ -1210,6 +1221,9 @@ var WWTControl$ = { this._rotating = true; } } + this._twoTouchCenter = Vector2d.create(0.5 * (t0.pageX + t1.pageX), 0.5 * (t0.pageY + t1.pageY)); + this._lastTouchRect[0] = newRect[0]; + this._lastTouchRect[1] = newRect[1]; } this._pinchingZoomRect = newRect; @@ -1249,6 +1263,10 @@ var WWTControl$ = { if (this._hasTwoTouches) { if (ev.touches.length < 2) { this._hasTwoTouches = false; + this._lastTouchRect[0] = null; + this._lastTouchRect[1] = null; + this._twoTouchCenter = null; + this._twoTouchEvents = 0; } return; } diff --git a/engine/package.json b/engine/package.json index eaff6ab7..a875ee12 100644 --- a/engine/package.json +++ b/engine/package.json @@ -56,5 +56,5 @@ "tscheck": "tsc" }, "types": "./src/index.d.ts", - "version": "7.30.0" + "version": "7.30.1" }