Skip to content

Commit

Permalink
Minor changes and improvements
Browse files Browse the repository at this point in the history
  • Loading branch information
@Calculamatrise
Calculamatrise committed May 30, 2022
1 parent ee78ad7 commit ab71679
Show file tree
Hide file tree
Showing 5 changed files with 51 additions and 78 deletions.
2 changes: 0 additions & 2 deletions bootstrap.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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;
}

Expand Down
22 changes: 11 additions & 11 deletions handlers/Mouse.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -42,7 +42,7 @@ export default class {
if (!this.#events.has(event)) {
return;
}

return this.#events.get(event)(...args);
}

Expand All @@ -56,7 +56,7 @@ export default class {
}

event.preventDefault();

this.isAlternate = !!event.button;
this.isDown = true;
this.real = {
Expand All @@ -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);
}

Expand All @@ -78,28 +78,28 @@ export default class {
}

event.preventDefault();

this.real = {
x: event.offsetX,
y: event.offsetY
}

return this.emit("move", event);
}

up(event) {
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);
}

Expand Down Expand Up @@ -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));
}
}
15 changes: 1 addition & 14 deletions handlers/Tool.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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) {
Expand Down
13 changes: 1 addition & 12 deletions tools/Tool.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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 = {}) {
Expand Down
77 changes: 38 additions & 39 deletions utils/Canvas.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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();

Expand All @@ -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;
Expand Down Expand Up @@ -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;
}
Expand All @@ -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;
}

Expand All @@ -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;
}
Expand All @@ -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;
Expand All @@ -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);
}
Expand Down Expand Up @@ -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;
}

Expand Down

0 comments on commit ab71679

Please sign in to comment.