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');
//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;

13
js/Input.js
View File

@ -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
}
})();

4
js/LayerList.js
View File

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

9
js/layers/Layer.js
View File

@ -50,6 +50,7 @@ class Layer {
if (this.menuEntry !== undefined) {
this.name = this.menuEntry.getElementsByTagName("p")[0].innerHTML;
this.menuEntry.id = "layer" + id;
this.menuEntry.onmouseover = () => 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

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)
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<this.canvas.width / Math.round(this.lineDistance); i++) {

106
package-lock.json generated
View File

@ -24,7 +24,7 @@
},
"devDependencies": {
"cross-env": "7.0.3",
"reload": "^3.1.1",
"reload": "^3.2.0",
"wait-cli": "^1.0.0"
}
},
@ -5818,45 +5818,32 @@
}
},
"node_modules/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,
"dependencies": {
"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"
},
"bin": {
"reload": "bin/reload"
}
},
"node_modules/reload/node_modules/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,
"engines": {
"node": ">= 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",

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