WIP WYSIWYG ~3D SVG editor.
Modify History API, implement TranslateCommand
Collapsing/merging compatible commands is a neat idea but actually
managing all that merging logic and undoing the partial command and
executing the combined command is actually kinda horrific.
Instead for interaction operations we'll just keep a reference around
to the command we started and ensure it encapsulates our changes.
+39
-11
+39
-11
zoodle.js
+39
-11
zoodle.js
···
59
59
requestAnimationFrame(this.update.bind(this));
60
60
}
61
61
62
+
// Perform a command and add it to the history.
62
63
do(command) {
63
64
this.history.push(command);
64
65
command.do();
66
+
}
67
+
68
+
// Store a record of a command that has already been performed.
69
+
did(command) {
70
+
this.history.push(command);
65
71
}
66
72
67
73
toggleSelection(target) {
···
193
199
}
194
200
do() {}
195
201
undo() {}
196
-
canMerge(command) {
197
-
return false;
198
-
}
199
-
merge(command) {}
200
202
}
201
203
202
204
class SelectCommand extends Command {
···
231
233
}
232
234
}
233
235
236
+
class TranslateCommand extends Command {
237
+
constructor(editor, target, delta) {
238
+
super(editor);
239
+
if (!Array.isArray(target)) {
240
+
target = [target];
241
+
}
242
+
this.target = target;
243
+
this.delta = delta;
244
+
this.oldTranslate = target.map((t) => t.translate.copy());
245
+
}
246
+
247
+
do() {
248
+
if (!this.target) return console.error("Doing TranslateCommand with no target.");
249
+
250
+
this.target.forEach((t, i) => {
251
+
t.translate.set(this.oldTranslate[i]).add(this.delta);
252
+
});
253
+
}
254
+
255
+
undo() {
256
+
if (!this.target) return console.error("Undoing TranslateCommand with no target.");
257
+
258
+
this.target.forEach((t, i) => {
259
+
t.translate.set(this.oldTranslate[i]);
260
+
});
261
+
}
262
+
}
263
+
234
264
class History {
235
265
constructor() {
236
266
this.undoStack = [];
237
267
this.redoStack = [];
238
268
}
239
269
240
-
push(command) {
241
-
// Check to see if this command is mergeable into the last.
242
-
let lastCommand = this.undoStack[this.undoStack.length - 1];
243
-
if (lastCommand && lastCommand.canMerge(command)) {
244
-
lastCommand.merge(command);
245
-
return;
270
+
push(command, newCommand = true) {
271
+
if (newCommand) {
272
+
this.undoStack[this.undoStack.length - 1] = command;
273
+
} else {
274
+
this.undoStack.push(command);
246
275
}
247
276
248
-
this.undoStack.push(command);
249
277
this.redoStack = [];
250
278
}
251
279