Canvas offset during dragging

src/app.js

@@ -474,6 +474,25 @@ const updateOverallStatusIcon = () => {
   HTML.overallStatusIconImage.src = "synchronised.svg"
 }
 
+let canvasDraggingStart = null
+
+function startCanvasDragging(mousePos) {
+  canvasDraggingStart = mousePos
+}
+
+function stopCanvasDragging() {
+  canvasDraggingStart = null
+}
+
+function dragCanvas(mousePos) {
+  if (canvasDraggingStart) {
+    let [x0, y0] = canvasDraggingStart
+    let [x1, y1] = mousePos
+    let offset = [x0 - x1, y0 - y1]
+    toolSelection.applyCanvasOffset(offset)
+  }
+}
+
 canvas.input.addEventListener("strokestart", ({ detail: e }) => {
   e.preventDefault()
   const pressure = getNormalizedPressure(e)
@@ -484,13 +503,23 @@ canvas.input.addEventListener("strokestart", ({ detail: e }) => {
   }
   const currentTool = toolSelection.getTool()
   const mousePos = [e.offsetX, e.offsetY]
-  if (currentTool == toolSelection.Tools.PEN) {
-    pathIDsByPointerID.set(
-      e.pointerId,
-      room.addPath(selectedColorAndRadiusPoint(...mousePos, pressure)),
-    )
-  } else if (currentTool == toolSelection.Tools.ERASER) {
-    eraseEverythingAtPosition(...mousePos, toolSelection.getEraseRadius(), room)
+  switch (currentTool) {
+    case toolSelection.Tools.PEN:
+      pathIDsByPointerID.set(
+        e.pointerId,
+        room.addPath(selectedColorAndRadiusPoint(...mousePos, pressure)),
+      )
+      break
+    case toolSelection.Tools.ERASER:
+      eraseEverythingAtPosition(
+        ...mousePos,
+        toolSelection.getEraseRadius(),
+        room,
+      )
+      break
+    case toolSelection.Tools.DRAGGER:
+      startCanvasDragging(mousePos)
+      break
   }
 })
 
@@ -498,11 +527,13 @@ canvas.input.addEventListener("strokeend", ({ detail: e }) => {
   const { pointerId } = e
   const pressure = getNormalizedPressure(e)
   const pathID = pathIDsByPointerID.get(pointerId)
+
   if (toolSelection.isRecognitionModeSet()) {
     drawRecognized(pathID, room.getPathPoints(pathID), pressure)
   }
   pathIDsByPointerID.delete(pointerId)
   clearRecognizedUpcoming()
+  stopCanvasDragging()
 })
 
 canvas.input.addEventListener("strokemove", ({ detail: e }) => {
@@ -512,14 +543,27 @@ canvas.input.addEventListener("strokemove", ({ detail: e }) => {
   const pressure = getNormalizedPressure(e)
   const currentTool = toolSelection.getTool()
   const mousePos = [e.offsetX, e.offsetY]
-  if (currentTool == toolSelection.Tools.PEN) {
-    const pathID = pathIDsByPointerID.get(e.pointerId)
-    room.extendPath(pathID, selectedColorAndRadiusPoint(...mousePos, pressure))
-    if (toolSelection.isRecognitionModeSet()) {
-      drawRecognizedUpcoming(room.getPathPoints(pathID), pressure)
-    }
-  } else if (currentTool == toolSelection.Tools.ERASER) {
-    eraseEverythingAtPosition(...mousePos, toolSelection.getEraseRadius(), room)
+  switch (currentTool) {
+    case toolSelection.Tools.PEN:
+      const pathID = pathIDsByPointerID.get(e.pointerId)
+      room.extendPath(
+        pathID,
+        selectedColorAndRadiusPoint(...mousePos, pressure),
+      )
+      if (toolSelection.isRecognitionModeSet()) {
+        drawRecognizedUpcoming(room.getPathPoints(pathID), pressure)
+      }
+      break
+    case toolSelection.Tools.ERASER:
+      eraseEverythingAtPosition(
+        ...mousePos,
+        toolSelection.getEraseRadius(),
+        room,
+      )
+      break
+    case toolSelection.Tools.DRAGGER:
+      dragCanvas(mousePos)
+      break
   }
 })
 

src/tool-selection.js

@@ -18,6 +18,10 @@ export const getTool = () => selectedTool
 export const getStrokeColour = () => strokeColour
 export const getStrokeRadius = () => strokeRadius
 export const getCanvasOffset = () => canvasOffset
+export const applyCanvasOffset = ([x, y]) => {
+  canvasOffset[0] += x
+  canvasOffset[1] += y
+}
 
 export const getEraseRadius = () => ERASE_RADIUS
 export const isRecognitionModeSet = () => recognitionEnabled