mirror
/
pixel-editor
mirror of https://github.com/lospec/pixel-editor.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

Fixed #43, #41, #37 and #35

This commit is contained in:
Nicola 2021-12-11 10:48:14 +01:00
parent dfa9810a75
commit a238fb1b47
7 changed files with 117 additions and 65 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
js/ColorModule.js
View File

@ -101,7 +101,7 @@ const ColorModule = (() => {
document.querySelector('#colors-menu li.selected')?.classList.remove('selected'); document.querySelector('#colors-menu li.selected')?.classList.remove('selected');
//set current color //set current color
updateCurrentColor(e.target.style.backgroundColor); updateCurrentColor(Color.cssToHex(e.target.style.backgroundColor));
//make color selected //make color selected
e.target.parentElement.classList.add('selected'); e.target.parentElement.classList.add('selected');
@ -136,8 +136,6 @@ const ColorModule = (() => {
//show color picker //show color picker
addedColor.firstElementChild.jscolor.show(); addedColor.firstElementChild.jscolor.show();
console.log('showing picker');
//hide edit button //hide edit button
addedColor.lastChild.classList.add('hidden'); addedColor.lastChild.classList.add('hidden');
} }
@ -427,6 +425,9 @@ const ColorModule = (() => {
} }
function updateCurrentColor(color, refLayer) { function updateCurrentColor(color, refLayer) {
if (color[0] != '#')
color = '#' + color;
if (refLayer) if (refLayer)
color = refLayer.context.fillStyle; color = refLayer.context.fillStyle;

13
js/Input.js
View File

@ -1,6 +1,7 @@
const Input = (() => { const Input = (() => {
let dragging = false; let dragging = false;
let currentMouseEvent = undefined; let currentMouseEvent = undefined;
let lastMouseTarget = undefined;
let spacePressed = false; let spacePressed = false;
let altPressed = false; let altPressed = false;
let ctrlPressed = false; let ctrlPressed = false;
@ -19,6 +20,7 @@ const Input = (() => {
Events.on("mouseup", window, onMouseUp); Events.on("mouseup", window, onMouseUp);
function onMouseDown(event) { function onMouseDown(event) {
lastMouseTarget = event.target;
currentMouseEvent = event; currentMouseEvent = event;
dragging = true; dragging = true;
@ -154,6 +156,10 @@ const Input = (() => {
case 32: case 32:
spacePressed = true; spacePressed = true;
break; break;
case 46:
console.log("Pressed del");
Events.emit("del");
break;
} }
} }
} }
@ -178,12 +184,17 @@ const Input = (() => {
return spacePressed; return spacePressed;
} }
function getLastTarget() {
return lastMouseTarget;
}
return { return {
isDragging, isDragging,
getCurrMouseEvent, getCurrMouseEvent,
getCursorPosition, getCursorPosition,
isAltPressed, isAltPressed,
isCtrlPressed, isCtrlPressed,
isSpacePressed isSpacePressed,
getLastTarget
} }
})(); })();

4
js/LayerList.js
View File

@ -345,11 +345,11 @@ const LayerList = (() => {
// Merging all the layer but the last one // Merging all the layer but the last one
for (let i=0; i<visibleLayers.length - 1; i++) { for (let i=0; i<visibleLayers.length - 1; i++) {
nToFlatten++; nToFlatten++;
console.log(visibleLayers[i].menuEntry.nextElementSibling);
new HistoryState().FlattenTwoVisibles( new HistoryState().FlattenTwoVisibles(
visibleLayers[i + 1].context.getImageData(0, 0, currFile.canvasSize[0], currFile.canvasSize[1]), visibleLayers[i + 1].context.getImageData(0, 0, currFile.canvasSize[0], currFile.canvasSize[1]),
visibleLayers[i].menuEntry.nextElementSibling, visibleLayers[i].menuEntry.nextElementSibling,
layers.indexOf(visibleLayers[i]), currFile.layers.indexOf(visibleLayers[i]),
visibleLayers[i], visibleLayers[i + 1] visibleLayers[i], visibleLayers[i + 1]
); );

9
js/layers/Layer.js
View File

@ -50,6 +50,7 @@ class Layer {
if (this.menuEntry !== undefined) { if (this.menuEntry !== undefined) {
this.name = this.menuEntry.getElementsByTagName("p")[0].innerHTML; this.name = this.menuEntry.getElementsByTagName("p")[0].innerHTML;
this.menuEntry.id = "layer" + id; this.menuEntry.id = "layer" + id;
this.menuEntry.onmouseover = () => this.hover(); this.menuEntry.onmouseover = () => this.hover();
this.menuEntry.onmouseout = () => this.unhover(); this.menuEntry.onmouseout = () => this.unhover();
this.menuEntry.onclick = () => this.selectLayer(); this.menuEntry.onclick = () => this.selectLayer();
@ -63,6 +64,8 @@ class Layer {
this.menuEntry.addEventListener("dragleave", this.layerDragLeave, false); this.menuEntry.addEventListener("dragleave", this.layerDragLeave, false);
this.menuEntry.addEventListener("dragend", this.layerDragEnd, false); this.menuEntry.addEventListener("dragend", this.layerDragEnd, false);
Events.onCustom("del", this.tryDelete.bind(this));
this.menuEntry.getElementsByTagName("canvas")[0].getContext('2d').imageSmoothingEnabled = false; this.menuEntry.getElementsByTagName("canvas")[0].getContext('2d').imageSmoothingEnabled = false;
} }
@ -73,6 +76,12 @@ class Layer {
return this.menuEntry != null; return this.menuEntry != null;
} }
tryDelete() {
if (Input.getLastTarget() != this.menuEntry && Input.getLastTarget().parentElement != this.menuEntry)
return;
LayerList.deleteLayer();
}
// Initializes the canvas // Initializes the canvas
initialize() { initialize() {
//resize canvas //resize canvas

4
js/layers/PixelGrid.js
View File

@ -3,7 +3,7 @@ class PixelGrid extends Layer {
// Start colour of the pixel grid (can be changed in the preferences) // Start colour of the pixel grid (can be changed in the preferences)
pixelGridColor = "#000000"; pixelGridColor = "#000000";
// Distance between one line and another in HTML pixels // Distance between one line and another in HTML pixels
lineDistance = 11; lineDistance = 10;
// The grid is not visible by default // The grid is not visible by default
pixelGridVisible = false; pixelGridVisible = false;
// The grid is enabled, but is disabled in order to save performance with big sprites // 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; this.context.strokeStyle = Settings.getCurrSettings().pixelGridColour;
console.log("Line ditance: " + this.lineDistance)
// OPTIMIZABLE, could probably be a bit more elegant // OPTIMIZABLE, could probably be a bit more elegant
// Draw horizontal lines // Draw horizontal lines
for (let i=0; i<this.canvas.width / Math.round(this.lineDistance); i++) { for (let i=0; i<this.canvas.width / Math.round(this.lineDistance); i++) {

106
package-lock.json generated
View File

@ -24,7 +24,7 @@
}, },
"devDependencies": { "devDependencies": {
"cross-env": "7.0.3", "cross-env": "7.0.3",
"reload": "^3.1.1", "reload": "^3.2.0",
"wait-cli": "^1.0.0" "wait-cli": "^1.0.0"
} }
}, },
@ -5818,45 +5818,32 @@
} }
}, },
"node_modules/reload": { "node_modules/reload": {
"version": "3.1.1", "version": "3.2.0",
"resolved": "https://registry.npmjs.org/reload/-/reload-3.1.1.tgz", "resolved": "https://registry.npmjs.org/reload/-/reload-3.2.0.tgz",
"integrity": "sha512-JblFn8P8CUfKqpclWNGs6rhda4hmywTq/a8DyjmwoGZ7Lp2krZ3swXgU3guvZ0waI3rorXFVS6z6UkKLYulmMA==", "integrity": "sha512-30iJoDvFHGbfq6tT3Vag/4RV3wkpuCOqPSM3GyeuOSSo48wKfZT/iI19oeO0GCVX0XSr+44XJ6yBiRJWqOq+sw==",
"dev": true, "dev": true,
"dependencies": { "dependencies": {
"cli-color": "~2.0.0", "cli-color": "~2.0.0",
"commander": "~6.1.0", "commander": "~7.2.0",
"finalhandler": "~1.1.1", "finalhandler": "~1.1.1",
"minimist": "~1.2.0", "minimist": "~1.2.0",
"open": "^7.0.0", "open": "^8.0.0",
"serve-static": "~1.14.0", "serve-static": "~1.14.0",
"supervisor": "~0.12.0", "supervisor": "~0.12.0",
"url-parse": "~1.4.4", "url-parse": "~1.5.0",
"ws": "~7.3.0" "ws": "~7.4.0"
}, },
"bin": { "bin": {
"reload": "bin/reload" "reload": "bin/reload"
} }
}, },
"node_modules/reload/node_modules/commander": { "node_modules/reload/node_modules/commander": {
"version": "6.1.0", "version": "7.2.0",
"resolved": "https://registry.npmjs.org/commander/-/commander-6.1.0.tgz", "resolved": "https://registry.npmjs.org/commander/-/commander-7.2.0.tgz",
"integrity": "sha512-wl7PNrYWd2y5mp1OK/LhTlv8Ff4kQJQRXXAvF+uU/TPNiVJUxZLRYGj/B0y/lPGAVcSbJqH2Za/cvHmrPMC8mA==", "integrity": "sha512-QrWXB+ZQSVPmIWIhtEO9H+gwHaMGYiF5ChvoJ+K9ZGHG/sVsa6yiesAD1GC/x46sET00Xlwo1u49RVVVzvcSkw==",
"dev": true, "dev": true,
"engines": { "engines": {
"node": ">= 6" "node": ">= 10"
}
},
"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_modules/remove-bom-buffer": { "node_modules/remove-bom-buffer": {
@ -7365,9 +7352,9 @@
"integrity": "sha1-2pN/emLiH+wf0Y1Js1wpNQZ6bHI=" "integrity": "sha1-2pN/emLiH+wf0Y1Js1wpNQZ6bHI="
}, },
"node_modules/url-parse": { "node_modules/url-parse": {
"version": "1.4.7", "version": "1.5.3",
"resolved": "https://registry.npmjs.org/url-parse/-/url-parse-1.4.7.tgz", "resolved": "https://registry.npmjs.org/url-parse/-/url-parse-1.5.3.tgz",
"integrity": "sha512-d3uaVyzDB9tQoSXFvuSUNFibTd9zxd2bkVrDRvF5TmvWWQwqE4lgYJ5m+x1DbecWkw+LK4RNl2CU1hHuOKPVlg==", "integrity": "sha512-IIORyIQD9rvj0A4CLWsHkBBJuNqWpFQe224b6j9t/ABmquIS0qDU2pY6kl6AuOrL5OkCXHMCFNe1jBcuAggjvQ==",
"dev": true, "dev": true,
"dependencies": { "dependencies": {
"querystringify": "^2.1.1", "querystringify": "^2.1.1",
@ -7705,12 +7692,24 @@
} }
}, },
"node_modules/ws": { "node_modules/ws": {
"version": "7.3.1", "version": "7.4.6",
"resolved": "https://registry.npmjs.org/ws/-/ws-7.3.1.tgz", "resolved": "https://registry.npmjs.org/ws/-/ws-7.4.6.tgz",
"integrity": "sha512-D3RuNkynyHmEJIpD2qrgVkc9DQ23OrN/moAwZX4L8DfvszsJxpjQuUq3LMx6HoYji9fbIOBY18XWBsAux1ZZUA==", "integrity": "sha512-YmhHDO4MzaDLB+M9ym/mDA5z0naX8j7SIlT8f8z+I0VtzsRbekxEutHSme7NPS2qE8StCYQNUnfWdXta/Yu85A==",
"dev": true, "dev": true,
"engines": { "engines": {
"node": ">=8.3.0" "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": { "node_modules/xdg-basedir": {
@ -12398,37 +12397,27 @@
} }
}, },
"reload": { "reload": {
"version": "3.1.1", "version": "3.2.0",
"resolved": "https://registry.npmjs.org/reload/-/reload-3.1.1.tgz", "resolved": "https://registry.npmjs.org/reload/-/reload-3.2.0.tgz",
"integrity": "sha512-JblFn8P8CUfKqpclWNGs6rhda4hmywTq/a8DyjmwoGZ7Lp2krZ3swXgU3guvZ0waI3rorXFVS6z6UkKLYulmMA==", "integrity": "sha512-30iJoDvFHGbfq6tT3Vag/4RV3wkpuCOqPSM3GyeuOSSo48wKfZT/iI19oeO0GCVX0XSr+44XJ6yBiRJWqOq+sw==",
"dev": true, "dev": true,
"requires": { "requires": {
"cli-color": "~2.0.0", "cli-color": "~2.0.0",
"commander": "~6.1.0", "commander": "~7.2.0",
"finalhandler": "~1.1.1", "finalhandler": "~1.1.1",
"minimist": "~1.2.0", "minimist": "~1.2.0",
"open": "^7.0.0", "open": "^8.0.0",
"serve-static": "~1.14.0", "serve-static": "~1.14.0",
"supervisor": "~0.12.0", "supervisor": "~0.12.0",
"url-parse": "~1.4.4", "url-parse": "~1.5.0",
"ws": "~7.3.0" "ws": "~7.4.0"
}, },
"dependencies": { "dependencies": {
"commander": { "commander": {
"version": "6.1.0", "version": "7.2.0",
"resolved": "https://registry.npmjs.org/commander/-/commander-6.1.0.tgz", "resolved": "https://registry.npmjs.org/commander/-/commander-7.2.0.tgz",
"integrity": "sha512-wl7PNrYWd2y5mp1OK/LhTlv8Ff4kQJQRXXAvF+uU/TPNiVJUxZLRYGj/B0y/lPGAVcSbJqH2Za/cvHmrPMC8mA==", "integrity": "sha512-QrWXB+ZQSVPmIWIhtEO9H+gwHaMGYiF5ChvoJ+K9ZGHG/sVsa6yiesAD1GC/x46sET00Xlwo1u49RVVVzvcSkw==",
"dev": true "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=" "integrity": "sha1-2pN/emLiH+wf0Y1Js1wpNQZ6bHI="
}, },
"url-parse": { "url-parse": {
"version": "1.4.7", "version": "1.5.3",
"resolved": "https://registry.npmjs.org/url-parse/-/url-parse-1.4.7.tgz", "resolved": "https://registry.npmjs.org/url-parse/-/url-parse-1.5.3.tgz",
"integrity": "sha512-d3uaVyzDB9tQoSXFvuSUNFibTd9zxd2bkVrDRvF5TmvWWQwqE4lgYJ5m+x1DbecWkw+LK4RNl2CU1hHuOKPVlg==", "integrity": "sha512-IIORyIQD9rvj0A4CLWsHkBBJuNqWpFQe224b6j9t/ABmquIS0qDU2pY6kl6AuOrL5OkCXHMCFNe1jBcuAggjvQ==",
"dev": true, "dev": true,
"requires": { "requires": {
"querystringify": "^2.1.1", "querystringify": "^2.1.1",
@ -13936,10 +13925,11 @@
} }
}, },
"ws": { "ws": {
"version": "7.3.1", "version": "7.4.6",
"resolved": "https://registry.npmjs.org/ws/-/ws-7.3.1.tgz", "resolved": "https://registry.npmjs.org/ws/-/ws-7.4.6.tgz",
"integrity": "sha512-D3RuNkynyHmEJIpD2qrgVkc9DQ23OrN/moAwZX4L8DfvszsJxpjQuUq3LMx6HoYji9fbIOBY18XWBsAux1ZZUA==", "integrity": "sha512-YmhHDO4MzaDLB+M9ym/mDA5z0naX8j7SIlT8f8z+I0VtzsRbekxEutHSme7NPS2qE8StCYQNUnfWdXta/Yu85A==",
"dev": true "dev": true,
"requires": {}
}, },
"xdg-basedir": { "xdg-basedir": {
"version": "4.0.0", "version": "4.0.0",

39
package.json.bak Normal file
View File

@ -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"
}
}