From ab716791b839fc3e027e22ca8eb33f6cd8515114 Mon Sep 17 00:00:00 2001 From: Calculus Date: Mon, 30 May 2022 00:11:53 -0700 Subject: [PATCH] Minor changes and improvements --- bootstrap.js | 2 -- handlers/Mouse.js | 22 +++++++------- handlers/Tool.js | 15 +-------- tools/Tool.js | 13 +------- utils/Canvas.js | 77 +++++++++++++++++++++++------------------------ 5 files changed, 51 insertions(+), 78 deletions(-) diff --git a/bootstrap.js b/bootstrap.js index 84c81e6..380ea3d 100644 --- a/bootstrap.js +++ b/bootstrap.js @@ -16,9 +16,7 @@ container.addEventListener("contextmenu", function(event) { document.querySelector("#patch-notes").addEventListener("click", function(event) { if (this.iframe) { this.iframe.remove(); - this.iframe = null; - return; } diff --git a/handlers/Mouse.js b/handlers/Mouse.js index afcad01..d2af886 100644 --- a/handlers/Mouse.js +++ b/handlers/Mouse.js @@ -42,7 +42,7 @@ export default class { if (!this.#events.has(event)) { return; } - + return this.#events.get(event)(...args); } @@ -56,7 +56,7 @@ export default class { } event.preventDefault(); - + this.isAlternate = !!event.button; this.isDown = true; this.real = { @@ -68,7 +68,7 @@ export default class { x: (event.offsetX * this.parent.zoom) + this.parent.viewBox.x, y: (event.offsetY * this.parent.zoom) + this.parent.viewBox.y } - + return this.emit("down", event); } @@ -78,12 +78,12 @@ export default class { } event.preventDefault(); - + this.real = { x: event.offsetX, y: event.offsetY } - + return this.emit("move", event); } @@ -91,15 +91,15 @@ export default class { if (event.target.id !== "container") { return; } - + event.preventDefault(); - + this.isDown = false; this.pointB = { x: (event.offsetX * this.parent.zoom) + this.parent.viewBox.x, y: (event.offsetY * this.parent.zoom) + this.parent.viewBox.y } - + return this.emit("up", event); } @@ -151,8 +151,8 @@ export default class { } close() { - document.removeEventListener("mousedown", this.down.bind(this)); - document.removeEventListener("mousemove", this.move.bind(this)); - document.removeEventListener("mouseup", this.up.bind(this)); + document.removeEventListener("pointerdown", this.down.bind(this)); + document.removeEventListener("pointermove", this.move.bind(this)); + document.removeEventListener("pointerup", this.up.bind(this)); } } \ No newline at end of file diff --git a/handlers/Tool.js b/handlers/Tool.js index 44af750..32dfaff 100644 --- a/handlers/Tool.js +++ b/handlers/Tool.js @@ -43,30 +43,17 @@ export default class { } this.selected.close(); - this._selected = toolName.toLowerCase(); - this.selected.init(); - - clearTimeout(this.canvas.text.timeout); this.canvas.view.parentElement.style.cursor = this._selected === "camera" ? "move" : "default"; - - this.canvas.text.innerHTML = this._selected.charAt(0).toUpperCase() + this._selected.slice(1); - this.canvas.text.setAttribute("x", this.canvas.viewBox.width / 2 + this.canvas.viewBox.x - this.canvas.text.innerHTML.length * 2.5); - this.canvas.text.setAttribute("y", 25 + this.canvas.viewBox.y); - this.canvas.text.setAttribute("fill", this.canvas.dark ? "#FBFBFB" : "1B1B1B"); - this.canvas.view.appendChild(this.canvas.text); + this.canvas.alert(this._selected.charAt(0).toUpperCase() + this._selected.slice(1)); const primary = this.canvas.container.querySelector("#primary"); const secondary = this.canvas.container.querySelector("#secondary"); const display = new Set(["line", "brush", "curve", "circle", "ellipse", "rectangle"]).has(toolName.toLowerCase()) ? "flex" : "none"; primary.parentElement.style.setProperty("display", display); secondary.parentElement.style.setProperty("display", display); - - this.canvas.text.timeout = setTimeout(() => { - this.canvas.text.remove(); - }, 2000); } select(toolName) { diff --git a/tools/Tool.js b/tools/Tool.js index f21bd58..24652ab 100644 --- a/tools/Tool.js +++ b/tools/Tool.js @@ -20,18 +20,7 @@ export default class { this._size = size; this.init(); - - clearTimeout(this.canvas.text.timeout); - - this.canvas.text.innerHTML = this.parent.canvas.tools._selected.charAt(0).toUpperCase() + this.parent.canvas.tools._selected.slice(1) + " size - " + this.size; - this.canvas.text.setAttribute("x", this.canvas.viewBox.width / 2 - this.canvas.text.innerHTML.length * 2.5 + this.canvas.viewBox.x); - this.canvas.text.setAttribute("y", 25 + this.canvas.viewBox.y); - this.canvas.text.setAttribute("fill", this.canvas.dark ? "#FBFBFB" : "1B1B1B"); - this.canvas.view.appendChild(this.canvas.text); - - this.canvas.text.timeout = setTimeout(() => { - this.canvas.text.remove(); - }, 2000); + this.canvas.alert(this.parent.canvas.tools._selected.charAt(0).toUpperCase() + this.parent.canvas.tools._selected.slice(1) + " size - " + this.size); } createElementNS(element, properties = {}) { diff --git a/utils/Canvas.js b/utils/Canvas.js index aae246a..b53d8ce 100644 --- a/utils/Canvas.js +++ b/utils/Canvas.js @@ -6,10 +6,10 @@ import ToolHandler from "../handlers/Tool.js"; export default class { constructor(view) { this.view = view; - let boundingRect = view.getBoundingClientRect(); + let { width, height } = view.getBoundingClientRect(); this.view.style.setProperty("stroke-linecap", "round"); this.view.style.setProperty("stroke-linejoin", "round"); - this.view.setAttribute("viewBox", `0 0 ${boundingRect.width} ${boundingRect.height}`); + this.view.setAttribute("viewBox", `0 0 ${width} ${height}`); this.layers.create(); @@ -21,6 +21,7 @@ export default class { window.addEventListener("resize", this.resize.bind(this)); document.addEventListener("keydown", this.keydown.bind(this)); } + alerts = []; zoom = 1; zoomIncrementValue = 0.5; #layer = 1; @@ -59,10 +60,6 @@ export default class { }, Object.assign(JSON.parse(localStorage.getItem("svg-drawpad-settings")) ?? {}, value ?? {})))); } - get dark() { - return JSON.parse(localStorage.getItem("dark")) ?? window.matchMedia('(prefers-color-scheme: dark)').matches; - } - get tool() { return this.tools.selected; } @@ -80,18 +77,7 @@ export default class { } set layerDepth(layer) { - clearTimeout(this.text.timeout); - - this.text.innerHTML = "Layer " + layer; - this.text.setAttribute("x", this.viewBox.width / 2 + this.viewBox.x - this.text.innerHTML.length * 2.5); - this.text.setAttribute("y", 25 + this.viewBox.y); - this.text.setAttribute("fill", this.dark ? "#FBFBFB" : "1B1B1B"); - this.view.appendChild(this.text); - - this.text.timeout = setTimeout(() => { - this.text.remove(); - }, 2000); - + this.alert("Layer" + layer); this.#layer = layer; } @@ -104,8 +90,8 @@ export default class { } set fill(boolean) { - this.text.setAttribute("fill", boolean ? this.primary : "#FFFFFF00"); - this.tool.element.setAttribute("fill", boolean ? this.primary : "#FFFFFF00"); + this.text.setAttribute("fill", boolean ? this.primary : "#ffffff00"); + this.tool.element.setAttribute("fill", boolean ? this.primary : "#ffffff00"); this.#fill = boolean; } @@ -115,21 +101,44 @@ export default class { } get viewBox() { - const viewBox = this.view.getAttribute("viewBox").split(/\s+/g); + let viewBox = this.view.getAttribute("viewBox").split(/\s+/g); return { - x: parseFloat(viewBox[0]), - y: parseFloat(viewBox[1]), - width: parseFloat(viewBox[2]), - height: parseFloat(viewBox[3]) + x: parseFloat(viewBox[0]) || 0, + y: parseFloat(viewBox[1]) || 0, + width: parseFloat(viewBox[2]) || window.innerWidth, + height: parseFloat(viewBox[3]) || window.outerWidth } } + set viewBox(value) { + let viewBox = this.viewBox; + this.view.setAttribute("viewBox", `${value.x || viewBox.x} ${value.y || viewBox.y} ${value.width || viewBox.width} ${value.height || viewBox.height}`); + } + + alert(text) { + // let label = document.createElementNS("http://www.w3.org/2000/svg", "text"); + clearTimeout(this.text.timeout); + + this.text.innerHTML = text; + this.text.setAttribute("x", this.viewBox.width / 2 + this.viewBox.x - this.text.innerHTML.length * 2.5); + this.text.setAttribute("y", 25 + this.viewBox.y); + this.text.setAttribute("fill", this.config.theme == "dark" ? "#fbfbfb" : "#1b1b1b"); + this.text.timeout = setTimeout(() => { + this.text.remove(); + }, 2000); + + this.view.appendChild(this.text); + // this.alerts.push(label); + + return text; + } + import(data) { try { this.close(); - const newView = new DOMParser().parseFromString(data, "text/xml").querySelector("svg"); - + let parser = new DOMParser(); + let newView = parser.parseFromString(data, "text/xml").querySelector("svg"); this.view.innerHTML = newView.innerHTML; let layerId = 1; @@ -150,9 +159,8 @@ export default class { } resize(event) { - const boundingRect = this.view.getBoundingClientRect(); + let boundingRect = this.view.getBoundingClientRect(); this.view.setAttribute("viewBox", `0 0 ${boundingRect.width} ${boundingRect.height}`); - this.text.setAttribute("x", boundingRect.width / 2 + this.viewBox.x - this.text.innerHTML.length * 2.5); this.text.setAttribute("y", 25 + this.viewBox.y); } @@ -288,16 +296,7 @@ export default class { } if (event.shiftKey) { - clearTimeout(this.text.timeout); - - this.text.innerHTML = "Camera"; - this.text.setAttribute("x", this.viewBox.width / 2 - this.text.innerHTML.length * 2 + this.viewBox.x); - this.text.setAttribute("y", 20 + this.viewBox.y); - this.text.timeout = setTimeout(() => { - this.text.remove(); - }, 2000); - - this.view.appendChild(this.text); + this.alert("Camera"); return; }