Skip to content

Feature: Add support for middle click dragging to pan #30

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

Open
dimani128 wants to merge 2 commits into
base: main
Choose a base branch
from
Open

Feature: Add support for middle click dragging to pan #30

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
aee7a99
Add support for middle click dragging to pan
dimani128 Aug 30, 2025
6358f74
Add middle-click and drag icon to the help menu entry for panning.
dimani128 Sep 1, 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
2 changes: 1 addition & 1 deletion dist/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -302,7 +302,7 @@ <h2 class="title">Help <span class="background">&nbsp;&nbsp;&nbsp;&nbsp;(⩾﹏
</tr>
<tr class="help-placeholder">
<td>
$|Space|+|%mouse-drag%|$
$|Space|+|%mouse-drag%|,|%middle-mouse-drag%|$
=Pan canvas=
</td>
</tr>
Expand Down
1 change: 1 addition & 0 deletions src/DomUtils/SvgIcons.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -52,6 +52,7 @@ export class SvgIcons
"mouse-left": "M 480 -80 a 269.6 269.6 90 0 1 -198 -82 A 269.6 269.6 90 0 1 200 -360 V -600 c 0 -77.2 27.2 -143.2 82 -198 A 269.6 269.6 90 0 1 480 -880 c 77.2 0 143.2 27.2 198 82 A 269.6 269.6 90 0 1 760 -600 v 240 c 0 77.2 -27.2 143.2 -82 198 A 269.6 269.6 90 0 1 480 -80 Z m 40 -520 h 160 c 0 -48 -15.2 -90.4 -45.6 -126.8 A 195.2 195.2 90 0 0 520 -796 V -600 Z m -40 440 c 55.2 0 102.4 -19.6 141.6 -58.4 A 192.8 192.8 90 0 0 680 -360 v -160 H 280 v 160 c 0 55.2 19.6 102.4 58.4 141.6 A 192.8 192.8 90 0 0 480 -160 Z",
"mouse-right": "M 480 -80 a 269.6 269.6 90 0 1 -198 -82 A 269.6 269.6 90 0 1 200 -360 V -600 c 0 -77.2 27.2 -143.2 82 -198 A 269.6 269.6 90 0 1 480 -880 c 77.2 0 143.2 27.2 198 82 A 269.6 269.6 90 0 1 760 -600 v 240 c 0 77.2 -27.2 143.2 -82 198 A 269.6 269.6 90 0 1 480 -80 Z M 280 -600 h 160 V -796 c -46 9.2 -84 32 -114.4 69.2 A 193.6 193.6 90 0 0 280 -600 Z m 200 440 c 55.2 0 102.4 -19.6 141.6 -58.4 A 192.8 192.8 90 0 0 680 -360 v -160 H 280 v 160 c 0 55.2 19.6 102.4 58.4 141.6 A 192.8 192.8 90 0 0 480 -160 Z",
"mouse-drag": "M 699.11 -179.11 H 592.06 l 22.98 22.45 a 20.63 20.63 0 0 1 6.26 15.15 c 0 5.91 -2.08 10.96 -6.26 15.14 a 20.63 20.63 0 0 1 -15.14 6.27 a 20.63 20.63 0 0 1 -15.15 -6.27 l -59 -59 a 18.32 18.32 0 0 1 -4.45 -6.8 A 23.13 23.13 0 0 1 520 -200 c 0 -2.78 0.43 -5.4 1.3 -7.83 c 0.88 -2.44 2.36 -4.7 4.44 -6.8 l 59.01 -59 a 20.33 20.33 0 0 1 14.88 -6.27 c 5.75 0 10.7 2.1 14.89 6.27 a 20.33 20.33 0 0 1 6.26 14.88 c 0 5.75 -2.09 10.7 -6.26 14.89 l -22.98 22.97 h 107.57 V -328.46 l -23.5 23.5 c -4.17 4.18 -9.05 6.18 -14.62 6 c -5.57 -0.17 -10.44 -2.34 -14.62 -6.52 a 20.33 20.33 0 0 1 -6.27 -14.89 c 0 -5.74 2.1 -10.7 6.27 -14.88 l 59 -59 a 18.32 18.32 0 0 1 6.8 -4.45 c 2.43 -0.87 5.05 -1.3 7.83 -1.3 c 2.78 0 5.4 0.43 7.83 1.3 c 2.44 0.88 4.7 2.36 6.8 4.44 l 59.52 59.53 c 4.18 4.18 6.27 9.06 6.27 14.63 s -2.1 10.44 -6.27 14.62 a 20.33 20.33 0 0 1 -14.88 6.26 c -5.75 0 -10.7 -2.08 -14.88 -6.26 l -23.5 -22.98 v 107.57 h 107.05 l -22.98 -22.45 a 20.63 20.63 0 0 1 -6.27 -15.15 c 0 -5.91 2.1 -10.96 6.27 -15.14 a 20.63 20.63 0 0 1 15.14 -6.27 c 5.92 0 10.97 2.1 15.15 6.27 l 59 59 a 18.3 18.3 0 0 1 4.44 6.8 A 23.1 23.1 0 0 1 920 -200 c 0 2.78 -0.43 5.4 -1.3 7.83 a 18.3 18.3 0 0 1 -4.44 6.8 l -59.53 59.52 c -4.18 4.18 -9.06 6.18 -14.63 6 c -5.57 -0.17 -10.44 -2.34 -14.62 -6.52 a 20.33 20.33 0 0 1 -6.26 -14.88 c 0 -5.75 2.08 -10.7 6.26 -14.89 l 22.98 -22.97 H 740.89 v 107.05 l 22.45 -22.98 a 20.63 20.63 0 0 1 15.15 -6.26 c 5.91 0 10.96 2.08 15.14 6.26 a 20.63 20.63 0 0 1 6.26 15.14 c 0 5.92 -2.08 10.97 -6.26 15.15 l -59 59 a 18.3 18.3 0 0 1 -6.8 4.44 A 23.1 23.1 0 0 1 720 0 c -2.78 0 -5.4 -0.43 -7.83 -1.3 a 18.3 18.3 0 0 1 -6.8 -4.44 l -59.52 -59.53 a 19.44 19.44 0 0 1 -6 -14.89 a 21.3 21.3 0 0 1 6.52 -14.88 a 20.33 20.33 0 0 1 14.88 -6.26 c 5.75 0 10.7 2.08 14.89 6.26 l 22.97 23.5 V -179.11 Z M 320 -160 c -77.33 0 -143.33 -27.33 -198 -82 c -54.67 -54.67 -82 -120.67 -82 -198 V -680 c 0 -77.33 27.33 -143.33 82 -198 C 176.67 -932.67 242.67 -960 320 -960 s 143.33 27.33 198 82 c 54.67 54.67 82 120.67 82 198 v 240 c 0 77.33 -27.33 143.33 -82 198 c -54.67 54.67 -120.67 82 -198 82 Z m 40 -520 h 160 c 0 -48 -15.17 -90.33 -45.5 -127 S 406 -866.67 360 -876 v 196 Z m -39 440 c 55.33 0 102.5 -19.5 141.5 -58.5 S 520.67 -384.67 520 -440 V -600 H 120 v 160 c 0 55.33 19.5 102.5 58.5 141.5 S 264.67 -240 320 -240 h 1 Z",
"middle-mouse-drag": "m 320,-160 c -77.33333,0 -143.33333,-27.33333 -198,-82 -54.666667,-54.66667 -82,-120.66667 -82,-198 v -240 c 0,-77.33333 27.333333,-143.33333 82,-198 54.66667,-54.66667 120.66667,-82 198,-82 77.33333,0 143.33333,27.33333 198,82 54.66667,54.66667 82,120.66667 82,198 v 240 c 0,77.33333 -27.33333,143.33333 -82,198 -54.66667,54.66667 -120.66667,82 -198,82 z m 40,-520 h 160 c 0,-48 -15.16667,-90.33333 -45.5,-127 -30.33333,-36.66667 -68.5,-59.66667 -114.5,-69 z m -240,0 h 160 v -196 c -46,9.33333 -84.16667,32.33333 -114.5,69 -30.33333,36.66667 -45.5,79 -45.5,127 z m 200,440 c 55.33333,0 102.5,-19.5 141.5,-58.5 39,-39 58.5,-86.16667 58.5,-141.5 V -600 H 120 v 160 c 0,55.33333 19.5,102.5 58.5,141.5 39,39 86.16667,58.5 141.5,58.5 z m 379.11,60.89 H 592.06 l 22.98,22.45 c 4.07629,3.98228 6.35535,9.45215 6.26,15.15 0,5.91 -2.08,10.96 -6.26,15.14 -3.96454,4.09068 -9.44411,6.35996 -15.14,6.27 -5.69934,0.0927 -11.18307,-2.17677 -15.15,-6.27 l -59,-59 c -1.97371,-1.90493 -3.49445,-4.22877 -4.45,-6.8 -0.88126,-2.5156 -1.32107,-5.16459 -1.3,-7.83 0,-2.78 0.43,-5.4 1.3,-7.83 0.88,-2.44 2.36,-4.7 4.44,-6.8 l 59.01,-59 c 3.88173,-4.05458 9.26711,-6.32382 14.88,-6.27 5.75,0 10.7,2.1 14.89,6.27 4.0509,3.88345 6.31642,9.2686 6.26,14.88 0,5.75 -2.09,10.7 -6.26,14.89 l -22.98,22.97 h 107.57 v -107.57 l -23.5,23.5 c -4.17,4.18 -9.05,6.18 -14.62,6 -5.57,-0.17 -10.44,-2.34 -14.62,-6.52 -4.05712,-3.88412 -6.32659,-9.27364 -6.27,-14.89 0,-5.74 2.1,-10.7 6.27,-14.88 l 59,-59 c 1.90493,-1.97371 4.22877,-3.49445 6.8,-4.45 2.43,-0.87 5.05,-1.3 7.83,-1.3 2.78,0 5.4,0.43 7.83,1.3 2.44,0.88 4.7,2.36 6.8,4.44 l 59.52,59.53 c 4.18,4.18 6.27,9.06 6.27,14.63 0,5.57 -2.1,10.44 -6.27,14.62 -3.88345,4.0509 -9.2686,6.31642 -14.88,6.26 -5.75,0 -10.7,-2.08 -14.88,-6.26 l -23.5,-22.98 v 107.57 h 107.05 l -22.98,-22.45 c -4.09323,-3.96693 -6.36273,-9.45066 -6.27,-15.15 0,-5.91 2.1,-10.96 6.27,-15.14 3.96454,-4.09068 9.44411,-6.35996 15.14,-6.27 5.92,0 10.97,2.1 15.15,6.27 l 59,59 c 1.9706,1.90552 3.488,4.2294 4.44,6.8 0.8852,2.51485 1.3285,5.16396 1.31,7.83 0,2.78 -0.43,5.4 -1.3,7.83 -0.952,2.5706 -2.5015,4.86183 -4.44,6.8 l -59.53,59.52 c -4.18035,4.17965 -9.06,6.18 -14.63,6 -5.57,-0.17 -10.44,-2.34 -14.62,-6.52 -4.0509,-3.88345 -6.31642,-9.2686 -6.26,-14.88 0,-5.75 2.07409,-10.70591 6.26,-14.89 l 22.98,-22.97 H 740.89 v 107.05 l 22.45,-22.98 c 3.96865,-4.08956 9.45215,-6.35535 15.15,-6.26 5.91,0 10.96,2.08 15.14,6.26 4.087,3.96625 6.35257,9.4456 6.26,15.14 0,5.92 -2.08,10.97 -6.26,15.15 l -59,59 c -1.93834,1.9383433 -4.2294,3.48798 -6.8,4.44 -2.51485,0.88525 -5.16396,1.32846 -7.83,1.31 -2.78,0 -5.4,-0.43 -7.83,-1.3 -2.5706,-0.95202 -4.86182,-2.5014939 -6.8,-4.44 l -59.52,-59.53 c -3.96018,-3.960841 -6.23842,-9.29407 -6,-14.89 0.12218,-5.62658 2.46621,-10.97614 6.52,-14.88 3.88345,-4.05089 9.2686,-6.31642 14.88,-6.26 5.75,0 10.7,2.08 14.89,6.26 l 22.97,23.5 z",
"mac-command": "M260-120q-58 0-99-41t-41-99q0-58 41-99t99-41h60v-160h-60q-58 0-99-41t-41-99q0-58 41-99t99-41q58 0 99 41t41 99v60h160v-60q0-58 41-99t99-41q58 0 99 41t41 99q0 58-41 99t-99 41h-60v160h60q58 0 99 41t41 99q0 58-41 99t-99 41q-58 0-99-41t-41-99v-60H400v60q0 58-41 99t-99 41Zm0-80q25 0 42.5-17.5T320-260v-60h-60q-25 0-42.5 17.5T200-260q0 25 17.5 42.5T260-200Zm440 0q25 0 42.5-17.5T760-260q0-25-17.5-42.5T700-320h-60v60q0 25 17.5 42.5T700-200ZM400-400h160v-160H400v160ZM260-640h60v-60q0-25-17.5-42.5T260-760q-25 0-42.5 17.5T200-700q0 25 17.5 42.5T260-640Zm380 0h60q25 0 42.5-17.5T760-700q0-25-17.5-42.5T700-760q-25 0-42.5 17.5T640-700v60Z",
"question-mark": "M584-637q0-43-28.5-69T480-732q-29 0-52.5 12.5T387-683q-16 23-43.5 26.5T296-671q-14-13-15.5-32t9.5-36q32-48 81.5-74.5T480-840q97 0 157.5 55T698-641q0 45-19 81t-70 85q-37 35-50 54.5T542-376q-4 24-20.5 40T482-320q-23 0-39.5-15.5T426-374q0-39 17-71.5t57-68.5q51-45 67.5-69.5T584-637ZM480-80q-33 0-56.5-23.5T400-160q0-33 23.5-56.5T480-240q33 0 56.5 23.5T560-160q0 33-23.5 56.5T480-80Z",
"touchpad": "M593-80q-24 0-46-9t-39-26L332-292q-11-11-11.5-27.5T331-348l6-6q14-14 34-19t40 0l69 20v-287q0-17 11.5-28.5T520-680q17 0 28.5 11.5T560-640v340q0 20-15.5 31.5T509-262l-47-13 103 103q6 6 13 9t15 3h167q33 0 56.5-23.5T840-240v-160q0-17 11.5-28.5T880-440q17 0 28.5 11.5T920-400v160q0 66-47 113T760-80H593Zm47-280q-17 0-28.5-11.5T600-400v-120q0-17 11.5-28.5T640-560q17 0 28.5 11.5T680-520v120q0 17-11.5 28.5T640-360Zm120 0q-17 0-28.5-11.5T720-400v-80q0-17 11.5-28.5T760-520q17 0 28.5 11.5T800-480v80q0 17-11.5 28.5T760-360Zm0 200H565h195Zm-600-40q-33 0-56.5-23.5T80-280v-480q0-33 23.5-56.5T160-840h600q33 0 56.5 23.5T840-760v120q0 17-11.5 28.5T800-600q-17 0-28.5-11.5T760-640v-120H160v480h72q17 0 28.5 11.5T272-240q0 17-11.5 28.5T232-200h-72Z",
Expand Down
7 changes: 6 additions & 1 deletion src/PanZoomConfiguration.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,8 +10,13 @@ export class PanZoomConfiguration
zoomDoubleClickSpeed: 1, // disables double click zoom
minZoom: 0.05,
maxZoom: 25,
beforeMouseDown: () =>
beforeMouseDown: (e) =>
{
// Middle click drag
if (e.button === 1) {
return false;
}

let shouldIgnore = !this._isPanning;
return shouldIgnore;
},
Expand Down