From a238fb1b4719846b5e4ac044c116fa8a94bd1400 Mon Sep 17 00:00:00 2001 From: Nicola <47360416+unsettledgames@users.noreply.github.com> Date: Sat, 11 Dec 2021 10:48:14 +0100 Subject: [PATCH] Fixed #43, #41, #37 and #35 --- js/ColorModule.js | 7 +-- js/Input.js | 13 ++++- js/LayerList.js | 4 +- js/layers/Layer.js | 9 ++++ js/layers/PixelGrid.js | 4 +- package-lock.json | 106 +++++++++++++++++++---------------------- package.json.bak | 39 +++++++++++++++ 7 files changed, 117 insertions(+), 65 deletions(-) create mode 100644 package.json.bak diff --git a/js/ColorModule.js b/js/ColorModule.js index 2a194e6..9b90237 100644 --- a/js/ColorModule.js +++ b/js/ColorModule.js @@ -101,7 +101,7 @@ const ColorModule = (() => { document.querySelector('#colors-menu li.selected')?.classList.remove('selected'); //set current color - updateCurrentColor(e.target.style.backgroundColor); + updateCurrentColor(Color.cssToHex(e.target.style.backgroundColor)); //make color selected e.target.parentElement.classList.add('selected'); @@ -136,8 +136,6 @@ const ColorModule = (() => { //show color picker addedColor.firstElementChild.jscolor.show(); - console.log('showing picker'); - //hide edit button addedColor.lastChild.classList.add('hidden'); } @@ -427,6 +425,9 @@ const ColorModule = (() => { } function updateCurrentColor(color, refLayer) { + if (color[0] != '#') + color = '#' + color; + if (refLayer) color = refLayer.context.fillStyle; diff --git a/js/Input.js b/js/Input.js index 5f44c08..df7cbf1 100644 --- a/js/Input.js +++ b/js/Input.js @@ -1,6 +1,7 @@ const Input = (() => { let dragging = false; let currentMouseEvent = undefined; + let lastMouseTarget = undefined; let spacePressed = false; let altPressed = false; let ctrlPressed = false; @@ -19,6 +20,7 @@ const Input = (() => { Events.on("mouseup", window, onMouseUp); function onMouseDown(event) { + lastMouseTarget = event.target; currentMouseEvent = event; dragging = true; @@ -154,6 +156,10 @@ const Input = (() => { case 32: spacePressed = true; break; + case 46: + console.log("Pressed del"); + Events.emit("del"); + break; } } } @@ -178,12 +184,17 @@ const Input = (() => { return spacePressed; } + function getLastTarget() { + return lastMouseTarget; + } + return { isDragging, getCurrMouseEvent, getCursorPosition, isAltPressed, isCtrlPressed, - isSpacePressed + isSpacePressed, + getLastTarget } })(); \ No newline at end of file diff --git a/js/LayerList.js b/js/LayerList.js index 66a0b13..c0a2107 100644 --- a/js/LayerList.js +++ b/js/LayerList.js @@ -345,11 +345,11 @@ const LayerList = (() => { // Merging all the layer but the last one for (let i=0; i this.hover(); this.menuEntry.onmouseout = () => this.unhover(); this.menuEntry.onclick = () => this.selectLayer(); @@ -63,6 +64,8 @@ class Layer { this.menuEntry.addEventListener("dragleave", this.layerDragLeave, false); this.menuEntry.addEventListener("dragend", this.layerDragEnd, false); + Events.onCustom("del", this.tryDelete.bind(this)); + this.menuEntry.getElementsByTagName("canvas")[0].getContext('2d').imageSmoothingEnabled = false; } @@ -73,6 +76,12 @@ class Layer { return this.menuEntry != null; } + tryDelete() { + if (Input.getLastTarget() != this.menuEntry && Input.getLastTarget().parentElement != this.menuEntry) + return; + LayerList.deleteLayer(); + } + // Initializes the canvas initialize() { //resize canvas diff --git a/js/layers/PixelGrid.js b/js/layers/PixelGrid.js index 77153e3..5401ccb 100644 --- a/js/layers/PixelGrid.js +++ b/js/layers/PixelGrid.js @@ -3,7 +3,7 @@ class PixelGrid extends Layer { // Start colour of the pixel grid (can be changed in the preferences) pixelGridColor = "#000000"; // Distance between one line and another in HTML pixels - lineDistance = 11; + lineDistance = 10; // The grid is not visible by default pixelGridVisible = false; // The grid is enabled, but is disabled in order to save performance with big sprites @@ -82,6 +82,8 @@ class PixelGrid extends Layer { this.context.strokeStyle = Settings.getCurrSettings().pixelGridColour; + console.log("Line ditance: " + this.lineDistance) + // OPTIMIZABLE, could probably be a bit more elegant // Draw horizontal lines for (let i=0; i= 6" - } - }, - "node_modules/reload/node_modules/open": { - "version": "7.4.2", - "resolved": "https://registry.npmjs.org/open/-/open-7.4.2.tgz", - "integrity": "sha512-MVHddDVweXZF3awtlAS+6pgKLlm/JgxZ90+/NBurBoQctVOOB/zDdVjcyPzQ+0laDGbsWgrRkflI65sQeOgT9Q==", - "dev": true, - "dependencies": { - "is-docker": "^2.0.0", - "is-wsl": "^2.1.1" - }, - "engines": { - "node": ">=8" + "node": ">= 10" } }, "node_modules/remove-bom-buffer": { @@ -7365,9 +7352,9 @@ "integrity": "sha1-2pN/emLiH+wf0Y1Js1wpNQZ6bHI=" }, "node_modules/url-parse": { - "version": "1.4.7", - "resolved": "https://registry.npmjs.org/url-parse/-/url-parse-1.4.7.tgz", - "integrity": "sha512-d3uaVyzDB9tQoSXFvuSUNFibTd9zxd2bkVrDRvF5TmvWWQwqE4lgYJ5m+x1DbecWkw+LK4RNl2CU1hHuOKPVlg==", + "version": "1.5.3", + "resolved": "https://registry.npmjs.org/url-parse/-/url-parse-1.5.3.tgz", + "integrity": "sha512-IIORyIQD9rvj0A4CLWsHkBBJuNqWpFQe224b6j9t/ABmquIS0qDU2pY6kl6AuOrL5OkCXHMCFNe1jBcuAggjvQ==", "dev": true, "dependencies": { "querystringify": "^2.1.1", @@ -7705,12 +7692,24 @@ } }, "node_modules/ws": { - "version": "7.3.1", - "resolved": "https://registry.npmjs.org/ws/-/ws-7.3.1.tgz", - "integrity": "sha512-D3RuNkynyHmEJIpD2qrgVkc9DQ23OrN/moAwZX4L8DfvszsJxpjQuUq3LMx6HoYji9fbIOBY18XWBsAux1ZZUA==", + "version": "7.4.6", + "resolved": "https://registry.npmjs.org/ws/-/ws-7.4.6.tgz", + "integrity": "sha512-YmhHDO4MzaDLB+M9ym/mDA5z0naX8j7SIlT8f8z+I0VtzsRbekxEutHSme7NPS2qE8StCYQNUnfWdXta/Yu85A==", "dev": true, "engines": { "node": ">=8.3.0" + }, + "peerDependencies": { + "bufferutil": "^4.0.1", + "utf-8-validate": "^5.0.2" + }, + "peerDependenciesMeta": { + "bufferutil": { + "optional": true + }, + "utf-8-validate": { + "optional": true + } } }, "node_modules/xdg-basedir": { @@ -12398,37 +12397,27 @@ } }, "reload": { - "version": "3.1.1", - "resolved": "https://registry.npmjs.org/reload/-/reload-3.1.1.tgz", - "integrity": "sha512-JblFn8P8CUfKqpclWNGs6rhda4hmywTq/a8DyjmwoGZ7Lp2krZ3swXgU3guvZ0waI3rorXFVS6z6UkKLYulmMA==", + "version": "3.2.0", + "resolved": "https://registry.npmjs.org/reload/-/reload-3.2.0.tgz", + "integrity": "sha512-30iJoDvFHGbfq6tT3Vag/4RV3wkpuCOqPSM3GyeuOSSo48wKfZT/iI19oeO0GCVX0XSr+44XJ6yBiRJWqOq+sw==", "dev": true, "requires": { "cli-color": "~2.0.0", - "commander": "~6.1.0", + "commander": "~7.2.0", "finalhandler": "~1.1.1", "minimist": "~1.2.0", - "open": "^7.0.0", + "open": "^8.0.0", "serve-static": "~1.14.0", "supervisor": "~0.12.0", - "url-parse": "~1.4.4", - "ws": "~7.3.0" + "url-parse": "~1.5.0", + "ws": "~7.4.0" }, "dependencies": { "commander": { - "version": "6.1.0", - "resolved": "https://registry.npmjs.org/commander/-/commander-6.1.0.tgz", - "integrity": "sha512-wl7PNrYWd2y5mp1OK/LhTlv8Ff4kQJQRXXAvF+uU/TPNiVJUxZLRYGj/B0y/lPGAVcSbJqH2Za/cvHmrPMC8mA==", + "version": "7.2.0", + "resolved": "https://registry.npmjs.org/commander/-/commander-7.2.0.tgz", + "integrity": "sha512-QrWXB+ZQSVPmIWIhtEO9H+gwHaMGYiF5ChvoJ+K9ZGHG/sVsa6yiesAD1GC/x46sET00Xlwo1u49RVVVzvcSkw==", "dev": true - }, - "open": { - "version": "7.4.2", - "resolved": "https://registry.npmjs.org/open/-/open-7.4.2.tgz", - "integrity": "sha512-MVHddDVweXZF3awtlAS+6pgKLlm/JgxZ90+/NBurBoQctVOOB/zDdVjcyPzQ+0laDGbsWgrRkflI65sQeOgT9Q==", - "dev": true, - "requires": { - "is-docker": "^2.0.0", - "is-wsl": "^2.1.1" - } } } }, @@ -13651,9 +13640,9 @@ "integrity": "sha1-2pN/emLiH+wf0Y1Js1wpNQZ6bHI=" }, "url-parse": { - "version": "1.4.7", - "resolved": "https://registry.npmjs.org/url-parse/-/url-parse-1.4.7.tgz", - "integrity": "sha512-d3uaVyzDB9tQoSXFvuSUNFibTd9zxd2bkVrDRvF5TmvWWQwqE4lgYJ5m+x1DbecWkw+LK4RNl2CU1hHuOKPVlg==", + "version": "1.5.3", + "resolved": "https://registry.npmjs.org/url-parse/-/url-parse-1.5.3.tgz", + "integrity": "sha512-IIORyIQD9rvj0A4CLWsHkBBJuNqWpFQe224b6j9t/ABmquIS0qDU2pY6kl6AuOrL5OkCXHMCFNe1jBcuAggjvQ==", "dev": true, "requires": { "querystringify": "^2.1.1", @@ -13936,10 +13925,11 @@ } }, "ws": { - "version": "7.3.1", - "resolved": "https://registry.npmjs.org/ws/-/ws-7.3.1.tgz", - "integrity": "sha512-D3RuNkynyHmEJIpD2qrgVkc9DQ23OrN/moAwZX4L8DfvszsJxpjQuUq3LMx6HoYji9fbIOBY18XWBsAux1ZZUA==", - "dev": true + "version": "7.4.6", + "resolved": "https://registry.npmjs.org/ws/-/ws-7.4.6.tgz", + "integrity": "sha512-YmhHDO4MzaDLB+M9ym/mDA5z0naX8j7SIlT8f8z+I0VtzsRbekxEutHSme7NPS2qE8StCYQNUnfWdXta/Yu85A==", + "dev": true, + "requires": {} }, "xdg-basedir": { "version": "4.0.0", diff --git a/package.json.bak b/package.json.bak new file mode 100644 index 0000000..0001d7b --- /dev/null +++ b/package.json.bak @@ -0,0 +1,39 @@ +{ + "name": "pixel-editor", + "version": "1.0.0", + "description": "Online pixel art creation tool", + "main": "build.js", + "scripts": { + "build": "node ./build.js ./build", + "serve": "node ./server.js ./build 3000", + "test": "npm run build && npm run serve", + "hot": "concurrently \"nodemon --exec npm test\" \"await tcp localhost:3000 && open-cli http://localhost:3000\"", + "hot:reload": "cross-env RELOAD=yes npm run hot" + }, + "author": "Lospec", + "license": "ISC", + "nodemonConfig": { + "ext": "js,hbs,scss", + "ignore": "build/" + }, + "dependencies": { + "concurrently": "^6.0.2", + "express": "^4.16.4", + "fs-extra": "^7.0.1", + "gulp": "^4.0.2", + "gulp-hb": "^8.0.0", + "gulp-include": "^2.3.1", + "gulp-rename": "^2.0.0", + "gulp-sass": "^7.0", + "handlebars-helper-svg": "^2.0.2", + "nodemon": "^2.0.7", + "open": "^8.0.6", + "open-cli": "^6.0.1", + "sass": "^1.17.3" + }, + "devDependencies": { + "cross-env": "7.0.3", + "reload": "^3.2.0", + "wait-cli": "^1.0.0" + } +}