Skip to content

Commit 012f96a

Browse files
pxlvxlpxlvxl
committed
push2
1 parent ca32746 commit 012f96a

24 files changed

+139
-71
lines changed

‎.gitignore

+3-1
Original file line numberDiff line numberDiff line change
@@ -4,4 +4,6 @@ routes
44
build
55
node_modules
66
.idea
7-
.history
7+
.history
8+
*.css
9+
*.map

‎file_copier.js

+30
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
1+
const fs = require('fs');
2+
3+
const fileArr = walk("./",n => !n.includes("node_modules")
4+
&& !n.includes(".git")
5+
&& !n.includes(".vscode")
6+
&& !n.includes("build")
7+
);
8+
const destPath = `C:/Users/jaman/OneDrive/Documents/GitHub/pixel-editor/`;
9+
console.log('fileArr === ',fileArr);
10+
fileArr.forEach(pathStr=>{
11+
const fileStr = fs.readFileSync(pathStr, "utf8");
12+
const destFilePathStr = destPath + pathStr;
13+
console.log('destFilePathStr, fileStr.length === ',destFilePathStr, fileStr.length);
14+
fs.writeFileSync(destFilePathStr, fileStr);
15+
})
16+
17+
function walk(dir, condition = () => true ) {
18+
// console.log('dir === ',dir);
19+
let results = [];
20+
for (let file of fs.readdirSync(dir)) {
21+
file = dir + '/' + file;
22+
const stat = fs.statSync(file);
23+
if (stat && stat.isDirectory()) {
24+
results = results.concat(walk(file, condition));
25+
} else {
26+
if(condition(file))results.push(file);
27+
}
28+
}
29+
return results;
30+
}

‎js/FileManager.js

+40-3
Original file line numberDiff line numberDiff line change
@@ -148,6 +148,18 @@ const FileManager = (() => {
148148
]
149149
}));
150150
}
151+
function defaultLPE(w,h,colors) {
152+
return {
153+
"canvasWidth":w,
154+
"canvasHeight":h,
155+
"editorMode":"Advanced",
156+
colors,
157+
"selectedLayer":0,
158+
"layers":[
159+
{"canvas":{},"context":{"mozImageSmoothingEnabled":false},"isSelected":true,"isVisible":true,"isLocked":false,"oldLayerName":null,"menuEntry":{},"id":"layer0","name":"Layer 0","src":emptyCanvasSrc(w,h)}
160+
]
161+
};
162+
}
151163
function localStorageLoad() {
152164
////console.log("loading from localStorage");
153165
////console.log('JSON.parse(localStorage.getItem("lpe-cache") ?? "{}") === ',JSON.parse(localStorage.getItem("lpe-cache") ?? "{}"));
@@ -185,7 +197,10 @@ const FileManager = (() => {
185197

186198
img.onload = function() {
187199
//create a new pixel with the images dimentions
188-
Startup.newPixel(this.width, this.height);
200+
Startup.newPixel({
201+
canvasWidth: this.width,
202+
canvasHeight: this.height
203+
});
189204
EditorState.switchMode('Advanced');
190205

191206
//draw the image onto the canvas
@@ -218,7 +233,7 @@ const FileManager = (() => {
218233
}
219234

220235
function _parseLPE(dictionary) {
221-
Startup.newPixel(dictionary['canvasWidth'], dictionary['canvasHeight'], dictionary, true);
236+
Startup.newPixel(dictionary, true);
222237
}
223238
}
224239
function loadFromLPE(dictionary) {
@@ -361,20 +376,42 @@ const FileManager = (() => {
361376
}
362377
return dictionary;
363378
}
379+
function emptyCanvasSrc(w,h) {
380+
const canvas = document.createElement('canvas');
381+
canvas.width = w;
382+
canvas.height = h;
383+
const ctx = canvas.getContext('2d');
384+
return canvas.toDataURL();
385+
}
386+
function toggleCache(elm){
387+
console.log('elm === ',elm);
388+
FileManager.cacheEnabled = !FileManager.cacheEnabled;
389+
localStorage.setItem("lpe-cache-enabled",FileManager.cacheEnabled ? "1" : "0");
390+
elm.textContent = cacheBtnText(FileManager.cacheEnabled);
391+
}
392+
function cacheBtnText(cacheEnabled) {
393+
return `${cacheEnabled ? "Disable" : "Enable"} auto-cache`;
394+
}
395+
396+
const cacheEnabled = !!Number(localStorage.getItem("lpe-cache-enabled"));
397+
document.getElementById("auto-cache-button").textContent = cacheBtnText(cacheEnabled);
364398

365399
return {
400+
cacheEnabled,
366401
loadFromLPE,
402+
toggleCache,
367403
getProjectData,
368404
localStorageReset,
369405
localStorageCheck,
370406
localStorageSave,
371407
localStorageLoad,
372408
upgradeLPE,
409+
defaultLPE,
373410
saveProject,
374411
openProject,
375412
exportProject,
376413
openPixelExportWindow,
377414
openSaveProjectWindow,
378415
open
379-
}
416+
};
380417
})();

‎js/LayerList.js

+2-2
Original file line numberDiff line numberDiff line change
@@ -71,7 +71,7 @@ const LayerList = (() => {
7171
// Basically "if I'm not adding a layer because redo() is telling meto do so", then I can save the history
7272
if (saveHistory) {
7373
new HistoryState().AddLayer(newLayer, index);
74-
FileManager.localStorageSave();
74+
if(FileManager.cacheEnabled)FileManager.localStorageSave();
7575
}
7676

7777
return newLayer;
@@ -155,7 +155,7 @@ const LayerList = (() => {
155155
currFile.layers[i].isSelected = i===selectedIdx;
156156
});
157157

158-
FileManager.localStorageSave();
158+
if(FileManager.cacheEnabled)FileManager.localStorageSave();
159159

160160
}
161161
/** Saves the layer that is being moved when the dragging starts

‎js/Startup.js

+8-10
Original file line numberDiff line numberDiff line change
@@ -17,10 +17,7 @@ const Startup = (() => {
1717
var height = Util.getValue('size-height' + splashPostfix);
1818
var selectedPalette = Util.getText('palette-button' + splashPostfix);
1919

20-
newPixel({
21-
canvasWidth: width,
22-
canvasHeight: height,
23-
});
20+
newPixel(FileManager.defaultLPE(width,height));
2421
resetInput();
2522

2623
//track google event
@@ -34,8 +31,8 @@ const Startup = (() => {
3431
* @param {*} skipModeConfirm If skipModeConfirm == true, then the mode switching confirmation will be skipped
3532
*/
3633
function newPixel (fileContent = null, skipModeConfirm = false) {
37-
//console.log('called newPixel');
38-
//console.trace();
34+
console.log('called newPixel');
35+
console.trace();
3936
// The palette is empty, at the beginning
4037
ColorModule.resetPalette();
4138

@@ -75,14 +72,14 @@ const Startup = (() => {
7572
//console.group('called initLayers');
7673
//console.log('currFile.layers === ',currFile.layers);
7774

78-
const width = lpe.canvasWidth;
79-
const height = lpe.canvasHeight;
75+
const width = lpe.canvasWidth = Number(lpe.canvasWidth);
76+
const height = lpe.canvasHeight = Number(lpe.canvasHeight);
8077
clearLayers();
8178

8279
// debugger;
8380
//
8481
currFile.canvasSize = [width, height];
85-
82+
console.log('lpe === ',lpe);
8683
if( lpe.layers && lpe.layers.length ) {
8784
currFile.currentLayer = new Layer(width, height, `pixel-canvas`,"","layer-li-template");
8885
currFile.currentLayer.canvas.style.zIndex = 2;
@@ -215,7 +212,8 @@ const Startup = (() => {
215212
x = presetProperties.width;
216213
y = presetProperties.height;
217214
}
218-
newPixel(x, y);
215+
216+
newPixel(FileManager.defaultLPE(x,y));
219217
}
220218

221219
function splashEditorMode(mode) {

‎js/Tool.js

+1-1
Original file line numberDiff line numberDiff line change
@@ -162,6 +162,6 @@ class Tool {
162162

163163
onEnd(mousePos, mouseTarget) {
164164
this.endMousePos = mousePos;
165-
FileManager.localStorageSave();
165+
if(FileManager.cacheEnabled)FileManager.localStorageSave();
166166
}
167167
}

‎js/canvas_util.js

+1-1
Original file line numberDiff line numberDiff line change
@@ -208,4 +208,4 @@ function tilesToCanvas(arr,columns,tilesData) {
208208
/* then draw tile fringe? */ // TODO
209209

210210
return canvas;
211-
}
211+
}

‎js/layers/Layer.js

+1-1
Original file line numberDiff line numberDiff line change
@@ -247,7 +247,7 @@ class Layer {
247247
this.menuEntry.classList.add("selected-layer");
248248
currFile.currentLayer = this;
249249

250-
FileManager.localStorageSave();
250+
if(FileManager.cacheEnabled)FileManager.localStorageSave();
251251
}
252252

253253
toggleLock() {

‎js/pixel-editor.js

+20-10
Original file line numberDiff line numberDiff line change
@@ -77,6 +77,9 @@ window.onload = function () {
7777
ToolManager.currentTool().updateCursor();
7878
// Apply checkboxes
7979

80+
////console.log('window.location.pathname === ',window.location.pathname);
81+
82+
////console.log('window.location === ',window.location);
8083
let args = window.location.pathname.split('/');
8184
let paletteSlug = args[2];
8285
let dimensions = args[3];
@@ -93,22 +96,29 @@ window.onload = function () {
9396
//palette loaded successfully
9497
palettes[paletteSlug] = data;
9598
palettes[paletteSlug].specified = true;
99+
////console.log('palettes[paletteSlug] === ',palettes[paletteSlug]);
96100
//refresh list of palettes
97101
document.getElementById('palette-menu-splash').refresh();
98-
102+
console.log('paletteSlug === ',paletteSlug);
103+
console.log('dimensions === ',dimensions);
99104
//if the dimensions were specified
100105
if (dimensions && dimensions.length >= 3 && dimensions.includes('x')) {
101106
let width = dimensions.split('x')[0];
102107
let height = dimensions.split('x')[1];
103108
const layers = [];
104-
let selectedLayer;
105-
Startup.newPixel({
106-
canvasWidth: width,
107-
canvasHeight: height,
108-
selectedLayer,
109-
colors: data.colors.map(n=>"#"+n),
110-
layers
111-
});
109+
let selectedLayer = 0;
110+
// if(prefill && prefillWidth){ // TODO
111+
// layers.push({
112+
// id: "layer0",
113+
// name: "Layer 0",
114+
// prefillWidth,
115+
// prefill
116+
// });
117+
// selectedLayer = 0;
118+
// }
119+
let _lpe = FileManager.defaultLPE(width, height, (data.colors ?? []).map(n=>"#"+n));
120+
console.log('_lpe === ',_lpe);
121+
Startup.newPixel(_lpe);
112122
}
113123
//dimensions were not specified -- show splash screen with palette preselected
114124
else {
@@ -123,7 +133,7 @@ window.onload = function () {
123133
Dialogue.showDialogue('splash', false);
124134
});
125135
} else {
126-
if(FileManager.localStorageCheck()) {
136+
if(FileManager.cacheEnabled && FileManager.localStorageCheck()) {
127137
//load cached document
128138
const lpe = FileManager.localStorageLoad();
129139

‎js/tools/BrushTool.js

+1-1
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,7 @@ class BrushTool extends ResizableTool {
1212
this.addTutorialKey("Left drag", " to draw a stroke");
1313
this.addTutorialKey("Right drag", " to resize the brush");
1414
this.addTutorialKey("+ or -", " to resize the brush");
15-
this.addTutorialImg("/images/ToolTutorials/brush-tutorial.gif");
15+
this.addTutorialImg("/brush-tutorial.gif");
1616
}
1717

1818
onStart(mousePos, cursorTarget) {

‎js/tools/EllipseTool.js

+1-1
Original file line numberDiff line numberDiff line change
@@ -25,7 +25,7 @@ class EllipseTool extends ResizableTool {
2525
this.addTutorialKey("Left drag", " to draw an ellipse");
2626
this.addTutorialKey("Right drag", " to resize the brush");
2727
this.addTutorialKey("+ or -", " to resize the brush");
28-
this.addTutorialImg("/images/ToolTutorials/ellipse-tutorial.gif");
28+
this.addTutorialImg("/ellipse-tutorial.gif");
2929
}
3030

3131
changeFillType() {

‎js/tools/EraserTool.js

+1-1
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,7 @@ class EraserTool extends ResizableTool {
1212
this.addTutorialKey("Left drag", " to erase an area");
1313
this.addTutorialKey("Right drag", " to resize the eraser");
1414
this.addTutorialKey("+ or -", " to resize the eraser");
15-
this.addTutorialImg("/images/ToolTutorials/eraser-tutorial.gif");
15+
this.addTutorialImg("/eraser-tutorial.gif");
1616
}
1717

1818
onStart(mousePos) {

‎js/tools/EyeDropperTool.js

+1-1
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,7 @@ class EyeDropperTool extends Tool {
1414
this.addTutorialKey("Aòt + left drag", " to preview the picked colour");
1515
this.addTutorialKey("Left click", " to select a colour");
1616
this.addTutorialKey("Alt + click", " to select a colour");
17-
this.addTutorialImg("/images/ToolTutorials/eyedropper-tutorial.gif");
17+
this.addTutorialImg("/eyedropper-tutorial.gif");
1818
}
1919

2020
onStart(mousePos, target) {

‎js/tools/FillTool.js

+1-1
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@ class FillTool extends DrawingTool {
88
this.addTutorialTitle("Fill tool");
99
this.addTutorialKey("F", " to select the fill tool");
1010
this.addTutorialKey("Left click", " to fill a contiguous area");
11-
this.addTutorialImg("/images/ToolTutorials/fill-tutorial.gif");
11+
this.addTutorialImg("/fill-tutorial.gif");
1212
}
1313

1414
onStart(mousePos, target) {

‎js/tools/LassoSelectionTool.js

+1-1
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,7 @@ class LassoSelectionTool extends SelectionTool {
1515
this.addTutorialKey("CTRL+C", " to copy a selection")
1616
this.addTutorialKey("CTRL+V", " to paste a selection")
1717
this.addTutorialKey("CTRL+X", " to cut a selection")
18-
this.addTutorialImg("/images/ToolTutorials/lassoselect-tutorial.gif");
18+
this.addTutorialImg("/lassoselect-tutorial.gif");
1919
}
2020

2121
onStart(mousePos, mouseTarget) {

‎js/tools/LineTool.js

+1-1
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,7 @@ class LineTool extends ResizableTool {
1212
this.addTutorialKey("Left drag", " to draw a line");
1313
this.addTutorialKey("Right drag", " to resize the brush");
1414
this.addTutorialKey("+ or -", " to resize the brush");
15-
this.addTutorialImg("/images/ToolTutorials/line-tutorial.gif");
15+
this.addTutorialImg("/line-tutorial.gif");
1616
}
1717

1818
onStart(mousePos) {

‎js/tools/MagicWandTool.js

+1-1
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,7 @@ class MagicWandTool extends SelectionTool {
1313
this.addTutorialKey("CTRL+C", " to copy a selection");
1414
this.addTutorialKey("CTRL+V", " to paste a selection");
1515
this.addTutorialKey("CTRL+X", " to cut a selection");
16-
this.addTutorialImg("/images/ToolTutorials/magicwand-tutorial.gif");
16+
this.addTutorialImg("/magicwand-tutorial.gif");
1717
}
1818

1919
onEnd(mousePos, mouseTarget) {

‎js/tools/PanTool.js

+1-1
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@ class PanTool extends Tool {
1010
this.addTutorialKey("P", " to select the lasso selection tool");
1111
this.addTutorialKey("Left drag", " to move the viewport");
1212
this.addTutorialKey("Space + drag", " to move the viewport");
13-
this.addTutorialImg("/images/ToolTutorials/pan-tutorial.gif");
13+
this.addTutorialImg("/pan-tutorial.gif");
1414
}
1515

1616
onStart(mousePos, target) {

‎js/tools/RectangleTool.js

+1-1
Original file line numberDiff line numberDiff line change
@@ -23,7 +23,7 @@ class RectangleTool extends ResizableTool {
2323
this.addTutorialKey("Left drag", " to draw a rectangle");
2424
this.addTutorialKey("Right drag", " to resize the brush");
2525
this.addTutorialKey("+ or -", " to resize the brush");
26-
this.addTutorialImg("/images/ToolTutorials/rectangle-tutorial.gif");
26+
this.addTutorialImg("/rectangle-tutorial.gif");
2727
}
2828

2929
changeFillType() {

‎js/tools/RectangularSelectionTool.js

+1-1
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,7 @@ class RectangularSelectionTool extends SelectionTool {
1414
this.addTutorialKey("CTRL+C", " to copy a selection");
1515
this.addTutorialKey("CTRL+V", " to paste a selection");
1616
this.addTutorialKey("CTRL+X", " to cut a selection");
17-
this.addTutorialImg("/images/ToolTutorials/rectselect-tutorial.gif");
17+
this.addTutorialImg("/rectselect-tutorial.gif");
1818
}
1919

2020
onStart(mousePos, mouseTarget) {

0 commit comments

Comments
 (0)