edge scrolling (todo: use rAF instead of timers)

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">

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) => {