From 6177613a189af405a24c8f3bfe8249d31d3c1974 Mon Sep 17 00:00:00 2001
From: Yuriy Maksymets <iurii.maksymets@gmail.com>
Date: Fri, 3 Jan 2020 12:32:00 +0000
Subject: [PATCH] Added dragging fronted elements
---
public/index.html | 6 ++++++
public/styles.css | 2 +-
src/elements.js | 2 ++
src/tool-selection.js | 39 +++++++++++++++++++++++++++++++++------
4 files changed, 42 insertions(+), 7 deletions(-)
diff --git a/public/index.html b/public/index.html
index 400687d..1b87a46 100644
--- a/public/index.html
+++ b/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>
diff --git a/public/styles.css b/public/styles.css
index b4ba7fb..6c3a114 100644
--- a/public/styles.css
+++ b/public/styles.css
@@ -287,7 +287,7 @@ button.selected {
}
#eraser-tool {
- margin-right: 8px;
+ /* margin-right: 8px; */
}
#eraser-tool > i {
diff --git a/src/elements.js b/src/elements.js
index 04f62a9..a054db5 100644
--- a/src/elements.js
+++ b/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")
diff --git a/src/tool-selection.js b/src/tool-selection.js
index 2928c0f..ad9bfd8 100644
--- a/src/tool-selection.js
+++ b/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", () => {
--
GitLab