From 6e07542ace4a98d0df620dbc72b65e79da5110e3 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Tom=C3=A1=C5=A1=20Ml=C3=A1dek?= <t@mldk.cz>
Date: Sat, 9 Jan 2021 22:50:06 +0100
Subject: [PATCH] edge scrolling (todo: use rAF instead of timers)

---
 app/src/App.vue                   |  2 +-
 app/src/components/SVGContent.vue | 40 +++++++++++++++++++++++++++++++
 2 files changed, 41 insertions(+), 1 deletion(-)

diff --git a/app/src/App.vue b/app/src/App.vue
index 0dc60a4..4735fe7 100644
--- a/app/src/App.vue
+++ b/app/src/App.vue
@@ -1,5 +1,5 @@
 <template>
-  <SVGContent id="root" url="content/intro.svg"/>
+  <SVGContent id="root" url="content/intro.svg" edge-scrolling />
 </template>
 
 <script lang="ts">
diff --git a/app/src/components/SVGContent.vue b/app/src/components/SVGContent.vue
index d6b69d7..3541c33 100644
--- a/app/src/components/SVGContent.vue
+++ b/app/src/components/SVGContent.vue
@@ -19,6 +19,7 @@ export default defineComponent({
       type: String,
       required: true
     },
+    edgeScrolling: Boolean
   },
   setup(props) {
     const root = ref(null);
@@ -42,6 +43,45 @@ export default defineComponent({
       });
       panzoom.value = pz;
 
+      // Edge scrolling
+      if (props.edgeScrolling) {
+        const MOVE_EDGE = 75;
+        const MAX_SPEED = 20;
+        let edgeScrollInterval: number | undefined;
+        window.addEventListener("mousemove", (ev) => {
+          clearTimeout(edgeScrollInterval);
+          edgeScrollInterval = undefined;
+
+          let horizontalShift: number;
+          let verticalShift: number;
+
+          const transform = pz.getTransform();
+          if (ev.clientX < MOVE_EDGE || ev.clientX > window.innerWidth - MOVE_EDGE) {
+            const horizontalEdgeDistance =
+                (ev.clientX < window.innerWidth / 2) ? ev.clientX : (ev.clientX - window.innerWidth);
+            const horizontalRatio = (MOVE_EDGE - Math.abs(horizontalEdgeDistance)) / MOVE_EDGE;
+            horizontalShift = horizontalRatio * Math.sign(horizontalEdgeDistance) * MAX_SPEED;
+          } else {
+            horizontalShift = 0;
+          }
+
+          if (ev.clientY < MOVE_EDGE || ev.clientY > window.innerHeight - MOVE_EDGE) {
+            const verticalEdgeDistance =
+                (ev.clientY < window.innerHeight / 2) ? ev.clientY : (ev.clientY - window.innerHeight);
+            const verticalRatio = (MOVE_EDGE - Math.abs(verticalEdgeDistance)) / MOVE_EDGE;
+            verticalShift = verticalRatio * Math.sign(verticalEdgeDistance) * MAX_SPEED;
+          } else {
+            verticalShift = 0;
+          }
+
+          if (horizontalShift || verticalShift) {
+            edgeScrollInterval = setInterval(() => {
+              pz.moveTo(transform!.x + horizontalShift, transform!.y + verticalShift);
+            }, 1000 / 60);
+          }
+        });
+      }
+
       // Anchors
       anchors.value = processAnchors(svg);
       panToAnchor.value = (anchor: SVGRectElement) => {