Skip to content

Commit 04f66c2

Browse files
zero01101zero01101
committed
marching ants during image generation
i uh also decided to useTabs in prettier and it now looks like i rewrote the entire application again :badpokerface:
1 parent d63ddd5 commit 04f66c2

4 files changed

Lines changed: 908 additions & 885 deletions

File tree

‎.prettierrc.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -14,6 +14,6 @@
1414
"singleQuote": false,
1515
"tabWidth": 2,
1616
"trailingComma": "es5",
17-
"useTabs": false,
17+
"useTabs": true,
1818
"vueIndentScriptAndStyle": false
1919
}

‎js/commands.js‎

Lines changed: 105 additions & 105 deletions
Original file line numberDiff line numberDiff line change
@@ -2,124 +2,124 @@
22
* Command pattern to allow for editing history
33
*/
44
const commands = {
5-
current: -1,
6-
history: [],
7-
undo(n = 1) {
8-
for (var i = 0; i < n && this.current > -1; i++) {
9-
this.history[this.current--].undo();
10-
}
11-
},
12-
redo(n = 1) {
13-
for (var i = 0; i < n && this.current + 1 < this.history.length; i++) {
14-
this.history[++this.current].redo();
15-
}
16-
},
5+
current: -1,
6+
history: [],
7+
undo(n = 1) {
8+
for (var i = 0; i < n && this.current > -1; i++) {
9+
this.history[this.current--].undo();
10+
}
11+
},
12+
redo(n = 1) {
13+
for (var i = 0; i < n && this.current + 1 < this.history.length; i++) {
14+
this.history[++this.current].redo();
15+
}
16+
},
1717

18-
/**
19-
* These are basic commands that can be done/undone
20-
*
21-
* They must contain a 'run' method that performs the action the first time,
22-
* a 'undo' method that undoes that action and a 'redo' method that does the
23-
* action again, but without requiring parameters. 'redo' is by default the
24-
* same as 'run'.
25-
*
26-
* The 'run' and 'redo' functions will receive a 'options' parameter which will be
27-
* forwarded directly to the operation, and a 'state' parameter that
28-
* can be used to store state for undoing things.
29-
*
30-
* The 'state' object will be passed to the 'undo' function as well.
31-
*/
32-
createCommand(name, run, undo, redo = run) {
33-
const command = function runWrapper(options) {
34-
// Create copy of options and state object
35-
const copy = {};
36-
Object.assign(copy, options);
37-
const state = {};
18+
/**
19+
* These are basic commands that can be done/undone
20+
*
21+
* They must contain a 'run' method that performs the action the first time,
22+
* a 'undo' method that undoes that action and a 'redo' method that does the
23+
* action again, but without requiring parameters. 'redo' is by default the
24+
* same as 'run'.
25+
*
26+
* The 'run' and 'redo' functions will receive a 'options' parameter which will be
27+
* forwarded directly to the operation, and a 'state' parameter that
28+
* can be used to store state for undoing things.
29+
*
30+
* The 'state' object will be passed to the 'undo' function as well.
31+
*/
32+
createCommand(name, run, undo, redo = run) {
33+
const command = function runWrapper(options) {
34+
// Create copy of options and state object
35+
const copy = {};
36+
Object.assign(copy, options);
37+
const state = {};
3838

39-
// Attempt to run command
40-
try {
41-
run(copy, state);
42-
} catch (e) {
43-
console.warn(`Error while running command '${name}' with options:`);
44-
console.warn(copy);
45-
console.warn(e);
46-
return;
47-
}
39+
// Attempt to run command
40+
try {
41+
run(copy, state);
42+
} catch (e) {
43+
console.warn(`Error while running command '${name}' with options:`);
44+
console.warn(copy);
45+
console.warn(e);
46+
return;
47+
}
4848

49-
const undoWrapper = () => {
50-
console.debug(`Undoing ${name}, currently ${commands.current}`);
51-
undo(state);
52-
};
53-
const redoWrapper = () => {
54-
console.debug(`Redoing ${name}, currently ${commands.current}`);
55-
redo(copy, state);
56-
};
49+
const undoWrapper = () => {
50+
console.debug(`Undoing ${name}, currently ${commands.current}`);
51+
undo(state);
52+
};
53+
const redoWrapper = () => {
54+
console.debug(`Redoing ${name}, currently ${commands.current}`);
55+
redo(copy, state);
56+
};
5757

58-
// Add to history
59-
if (commands.history.length > commands.current + 1)
60-
commands.history.splice(commands.current + 1);
61-
commands.history.push({undo: undoWrapper, redo: redoWrapper});
62-
commands.current++;
63-
};
58+
// Add to history
59+
if (commands.history.length > commands.current + 1)
60+
commands.history.splice(commands.current + 1);
61+
commands.history.push({undo: undoWrapper, redo: redoWrapper});
62+
commands.current++;
63+
};
6464

65-
this.types[name] = command;
65+
this.types[name] = command;
6666

67-
return command;
68-
},
69-
runCommand(name, options) {
70-
this.types[name](options);
71-
},
72-
types: {},
67+
return command;
68+
},
69+
runCommand(name, options) {
70+
this.types[name](options);
71+
},
72+
types: {},
7373
};
7474

7575
/**
7676
* Draw Image Command, used to draw a Image to a context
7777
*/
7878
commands.createCommand(
79-
"drawImage",
80-
(options, state) => {
81-
if (
82-
!options ||
83-
options.image === undefined ||
84-
options.x === undefined ||
85-
options.y === undefined
86-
)
87-
throw "Command drawImage requires options in the format: {image, x, y, ctx?}";
79+
"drawImage",
80+
(options, state) => {
81+
if (
82+
!options ||
83+
options.image === undefined ||
84+
options.x === undefined ||
85+
options.y === undefined
86+
)
87+
throw "Command drawImage requires options in the format: {image, x, y, ctx?}";
8888

89-
// Check if we have state
90-
if (!state.context) {
91-
const context = options.ctx || imgCtx;
92-
state.context = context;
89+
// Check if we have state
90+
if (!state.context) {
91+
const context = options.ctx || imgCtx;
92+
state.context = context;
9393

94-
// Saving what was in the canvas before the command
95-
const imgData = context.getImageData(
96-
options.x,
97-
options.y,
98-
options.image.width,
99-
options.image.height
100-
);
101-
state.box = {
102-
x: options.x,
103-
y: options.y,
104-
w: options.image.width,
105-
h: options.image.height,
106-
};
107-
// Create Image
108-
const cutout = document.createElement("canvas");
109-
cutout.width = state.box.w;
110-
cutout.height = state.box.h;
111-
cutout.getContext("2d").putImageData(imgData, 0, 0);
112-
state.original = new Image();
113-
state.original.src = cutout.toDataURL();
114-
}
94+
// Saving what was in the canvas before the command
95+
const imgData = context.getImageData(
96+
options.x,
97+
options.y,
98+
options.image.width,
99+
options.image.height
100+
);
101+
state.box = {
102+
x: options.x,
103+
y: options.y,
104+
w: options.image.width,
105+
h: options.image.height,
106+
};
107+
// Create Image
108+
const cutout = document.createElement("canvas");
109+
cutout.width = state.box.w;
110+
cutout.height = state.box.h;
111+
cutout.getContext("2d").putImageData(imgData, 0, 0);
112+
state.original = new Image();
113+
state.original.src = cutout.toDataURL();
114+
}
115115

116-
// Apply command
117-
state.context.drawImage(options.image, state.box.x, state.box.y);
118-
},
119-
(state) => {
120-
// Clear destination area
121-
state.context.clearRect(state.box.x, state.box.y, state.box.w, state.box.h);
122-
// Undo
123-
state.context.drawImage(state.original, state.box.x, state.box.y);
124-
}
116+
// Apply command
117+
state.context.drawImage(options.image, state.box.x, state.box.y);
118+
},
119+
(state) => {
120+
// Clear destination area
121+
state.context.clearRect(state.box.x, state.box.y, state.box.w, state.box.h);
122+
// Undo
123+
state.context.drawImage(state.original, state.box.x, state.box.y);
124+
}
125125
);

0 commit comments

Comments
 (0)