Added dragging fronted elements

public/index.html

@@ -199,6 +199,12 @@
         <button id="eraser-tool" class="selectable-tool">
           <i class="fa fa-eraser"></i>
         </button>
+        <button id="dragging-tool" class="selectable-tool">
+          <i class="fa fa-hand-paper-o"></i>
+        </button>
+        <button id="canvas-center" class="selectable-tool">
+          <i class="fa fa-crosshairs"></i>
+        </button>
         <button id="recognition-mode" class="selectable-tool">
           <i class="fa fa-square"></i>
         </button>

public/styles.css

@@ -287,7 +287,7 @@ button.selected {
 }
 
 #eraser-tool {
-  margin-right: 8px;
+  /* margin-right: 8px; */
 }
 
 #eraser-tool > i {

src/elements.js

@@ -13,6 +13,8 @@ export const canvas = document.getElementById("canvas")
 export const penButton = document.getElementById("pen-tool")
 export const eraserButton = document.getElementById("eraser-tool")
 export const recognitionModeButton = document.getElementById("recognition-mode")
+export const draggingToolButton = document.getElementById("dragging-tool")
+export const canvasCenterToolButton = document.getElementById("canvas-center")
 
 export const fastUndoButton = document.getElementById("fast-undo-tool")
 export const undoButton = document.getElementById("undo-tool")

src/tool-selection.js

@@ -3,8 +3,10 @@ import * as HTML from "./elements.js"
 export const Tools = Object.freeze({
   PEN: Symbol("pen"),
   ERASER: Symbol("eraser"),
+  DRAGGER: Symbol("dragger"),
 })
 
+let canvasOffset = [0, 0]
 let selectedTool = Tools.PEN
 let strokeColour = "#000000"
 let strokeRadius = 2
@@ -15,6 +17,7 @@ const ERASE_RADIUS = 20
 export const getTool = () => selectedTool
 export const getStrokeColour = () => strokeColour
 export const getStrokeRadius = () => strokeRadius
+export const getCanvasOffset = () => canvasOffset
 
 export const getEraseRadius = () => ERASE_RADIUS
 export const isRecognitionModeSet = () => recognitionEnabled
@@ -51,20 +54,44 @@ HTML.recognitionModeButton.addEventListener("click", () => {
   }
 })
 
+const toolElements = {
+  [Tools.PEN]: HTML.penButton,
+  [Tools.ERASER]: HTML.eraserButton,
+  [Tools.DRAGGER]: HTML.draggingToolButton,
+}
+
+function setSelectedTool(newSelectedTool) {
+  selectedTool = newSelectedTool
+
+  Object.getOwnPropertySymbols(toolElements).forEach((e) =>
+    toolElements[e].classList.remove("selected"),
+  )
+
+  toolElements[newSelectedTool].classList.add("selected")
+}
+
+function centerCanvas() {
+  canvasOffset = [0, 0]
+}
+
 HTML.penButton.addEventListener("click", () => {
   if (selectedTool == Tools.PEN) {
     showElement(HTML.penProperties)
   } else {
-    selectedTool = Tools.PEN
-    HTML.penButton.classList.add("selected")
-    HTML.eraserButton.classList.remove("selected")
+    setSelectedTool(Tools.PEN)
   }
 })
 
 HTML.eraserButton.addEventListener("click", () => {
-  selectedTool = Tools.ERASER
-  HTML.penButton.classList.remove("selected")
-  HTML.eraserButton.classList.add("selected")
+  setSelectedTool(Tools.ERASER)
+})
+
+HTML.draggingToolButton.addEventListener("click", () => {
+  setSelectedTool(Tools.DRAGGER)
+})
+
+HTML.canvasCenterToolButton.addEventListener("click", () => {
+  centerCanvas()
 })
 
 HTML.strokeColorPicker.addEventListener("change", () => {