From 572428a598a2edcf47a4664d7fe6e2b1c0716d7b Mon Sep 17 00:00:00 2001 From: yapi Date: Sat, 13 Jan 2024 20:26:58 +0800 Subject: [PATCH 1/4] feat: optimize track pad gesture --- src/litegraph.js | 47 ++++++++++++++++++++++++++++++++--------------- 1 file changed, 32 insertions(+), 15 deletions(-) diff --git a/src/litegraph.js b/src/litegraph.js index 359f6e1d0..fe51fe707 100755 --- a/src/litegraph.js +++ b/src/litegraph.js @@ -6993,28 +6993,45 @@ LGraphNode.prototype.executeAction = function(action) if (!this.graph || !this.allow_dragcanvas) { return; } + + const x = e.clientX; + const y = e.clientY; + const is_inside = !this.viewport || ( this.viewport && x >= this.viewport[0] && x < (this.viewport[0] + this.viewport[2]) && y >= this.viewport[1] && y < (this.viewport[1] + this.viewport[3]) ); - var delta = e.wheelDeltaY != null ? e.wheelDeltaY : e.detail * -60; + if(!is_inside) { + return; + } - this.adjustMouseEvent(e); + const isTouchPad = !!e.wheelDeltaY && e.wheelDeltaY === e.deltaY * -3 - var x = e.clientX; - var y = e.clientY; - var is_inside = !this.viewport || ( this.viewport && x >= this.viewport[0] && x < (this.viewport[0] + this.viewport[2]) && y >= this.viewport[1] && y < (this.viewport[1] + this.viewport[3]) ); - if(!is_inside) - return; + if(isTouchPad) { + const isNatural = event.webkitDirectionInvertedFromDevice + if(e.ctrlKey) { + let scale = this.ds.scale; + let deltaS = Math.exp(-e.deltaY / 100); + scale = isNatural ? scale / deltaS : scale * deltaS + this.ds.changeScale(scale, [x, y]); + } - var scale = this.ds.scale; + const naturalFix = isNatural ? 1 : -1 + this.ds.offset[0] += e.deltaX / this.ds.scale * naturalFix; + this.ds.offset[1] += e.deltaY / this.ds.scale * naturalFix; + this.dirty_canvas = true; + this.dirty_bgcanvas = true; + } else { + const delta = e.wheelDeltaY != null ? e.wheelDeltaY : e.detail * -60; + this.adjustMouseEvent(e); + let scale = this.ds.scale; + if (delta > 0) { + scale *= 1.1; + } else if (delta < 0) { + scale *= 1 / 1.1; + } - if (delta > 0) { - scale *= 1.1; - } else if (delta < 0) { - scale *= 1 / 1.1; + //this.setZoom( scale, [ e.clientX, e.clientY ] ); + this.ds.changeScale(scale, [e.clientX, e.clientY]); } - //this.setZoom( scale, [ e.clientX, e.clientY ] ); - this.ds.changeScale(scale, [e.clientX, e.clientY]); - this.graph.change(); e.preventDefault(); From f0792b90ec25c34f3473ced789e744295275fc14 Mon Sep 17 00:00:00 2001 From: yapi Date: Sat, 13 Jan 2024 20:42:01 +0800 Subject: [PATCH 2/4] fix: scale center off --- src/litegraph.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/litegraph.js b/src/litegraph.js index fe51fe707..04f8645b2 100755 --- a/src/litegraph.js +++ b/src/litegraph.js @@ -6995,7 +6995,7 @@ LGraphNode.prototype.executeAction = function(action) } const x = e.clientX; - const y = e.clientY; + const y = e.clientY - this.canvas.getBoundingClientRect().top; const is_inside = !this.viewport || ( this.viewport && x >= this.viewport[0] && x < (this.viewport[0] + this.viewport[2]) && y >= this.viewport[1] && y < (this.viewport[1] + this.viewport[3]) ); if(!is_inside) { @@ -7029,7 +7029,7 @@ LGraphNode.prototype.executeAction = function(action) } //this.setZoom( scale, [ e.clientX, e.clientY ] ); - this.ds.changeScale(scale, [e.clientX, e.clientY]); + this.ds.changeScale(scale, [x, y]); } this.graph.change(); From 2a752b5f3dc1986b4e7aa711716ec043ecd2eaae Mon Sep 17 00:00:00 2001 From: yapi Date: Sat, 13 Jan 2024 22:45:57 +0800 Subject: [PATCH 3/4] fix: zooming handling --- src/litegraph.js | 31 ++++++++++++++----------------- 1 file changed, 14 insertions(+), 17 deletions(-) diff --git a/src/litegraph.js b/src/litegraph.js index 04f8645b2..2eb2f019d 100755 --- a/src/litegraph.js +++ b/src/litegraph.js @@ -7002,30 +7002,27 @@ LGraphNode.prototype.executeAction = function(action) return; } - const isTouchPad = !!e.wheelDeltaY && e.wheelDeltaY === e.deltaY * -3 + const isTouchpadPan = !!e.wheelDeltaY && e.wheelDeltaY === e.deltaY * -3 - if(isTouchPad) { - const isNatural = event.webkitDirectionInvertedFromDevice - if(e.ctrlKey) { - let scale = this.ds.scale; - let deltaS = Math.exp(-e.deltaY / 100); - scale = isNatural ? scale / deltaS : scale * deltaS - this.ds.changeScale(scale, [x, y]); - } - - const naturalFix = isNatural ? 1 : -1 + if(isTouchpadPan) { // Touchpad pan + const naturalFix = -1; this.ds.offset[0] += e.deltaX / this.ds.scale * naturalFix; this.ds.offset[1] += e.deltaY / this.ds.scale * naturalFix; this.dirty_canvas = true; this.dirty_bgcanvas = true; } else { - const delta = e.wheelDeltaY != null ? e.wheelDeltaY : e.detail * -60; - this.adjustMouseEvent(e); let scale = this.ds.scale; - if (delta > 0) { - scale *= 1.1; - } else if (delta < 0) { - scale *= 1 / 1.1; + if(Math.abs(e.deltaY) < 10) { // Treat smaller delta as touchpad zoom + let deltaS = Math.exp(-e.deltaY / 50); + scale = scale * deltaS; + } else { // Mouse zoom + const delta = e.wheelDeltaY != null ? e.wheelDeltaY : e.detail * -60; + this.adjustMouseEvent(e); + if (delta > 0) { + scale *= 1.1; + } else if (delta < 0) { + scale *= 1 / 1.1; + } } //this.setZoom( scale, [ e.clientX, e.clientY ] ); From 8973975d21ba40cd2ae6e024ad64b626f1dbfb1c Mon Sep 17 00:00:00 2001 From: yapi Date: Sat, 13 Jan 2024 23:24:16 +0800 Subject: [PATCH 4/4] refactor --- src/litegraph.js | 8 +++----- 1 file changed, 3 insertions(+), 5 deletions(-) diff --git a/src/litegraph.js b/src/litegraph.js index 2eb2f019d..8ba1b45a3 100755 --- a/src/litegraph.js +++ b/src/litegraph.js @@ -7005,16 +7005,14 @@ LGraphNode.prototype.executeAction = function(action) const isTouchpadPan = !!e.wheelDeltaY && e.wheelDeltaY === e.deltaY * -3 if(isTouchpadPan) { // Touchpad pan - const naturalFix = -1; - this.ds.offset[0] += e.deltaX / this.ds.scale * naturalFix; - this.ds.offset[1] += e.deltaY / this.ds.scale * naturalFix; + this.ds.offset[0] += e.deltaX / this.ds.scale * -1; + this.ds.offset[1] += e.deltaY / this.ds.scale * -1; this.dirty_canvas = true; this.dirty_bgcanvas = true; } else { let scale = this.ds.scale; if(Math.abs(e.deltaY) < 10) { // Treat smaller delta as touchpad zoom - let deltaS = Math.exp(-e.deltaY / 50); - scale = scale * deltaS; + scale *= Math.exp(-e.deltaY / 50); } else { // Mouse zoom const delta = e.wheelDeltaY != null ? e.wheelDeltaY : e.detail * -60; this.adjustMouseEvent(e);