WIP WYSIWYG ~3D SVG editor.
Initial implementation of undo/redo via selection
+44
-27
+44
-27
zoodle.js
+44
-27
zoodle.js
···
51
51
}
52
52
53
53
update() {
54
+
this.syncLayers();
54
55
this.scene.updateRenderGraph();
55
56
this.overlay.updateRenderGraph();
56
57
this.widgets.updateRenderGraph();
···
58
59
requestAnimationFrame(this.update.bind(this));
59
60
}
60
61
61
-
select(target) {
62
-
if (!target) {
63
-
this.clearSelection();
64
-
return;
65
-
}
66
-
67
-
// If this is a compositeChild, find its parent
68
-
while (target.compositeChild) {
69
-
target = target.addTo;
70
-
}
71
-
72
-
// Don't highlight if target is the scene element
73
-
if (!target.addTo) {
74
-
this.clearSelection();
75
-
return;
76
-
}
77
-
78
-
this.toggleSelection(target);
62
+
do(command) {
63
+
this.history.push(command);
64
+
command.do();
79
65
}
80
66
81
67
toggleSelection(target) {
···
85
71
} else {
86
72
this.selection.push(target);
87
73
}
88
-
this.updateSelection();
74
+
this.updateHighlight();
89
75
}
90
76
91
77
clearSelection() {
92
78
this.selection = [];
93
-
this.updateSelection();
79
+
this.updateHighlight();
94
80
}
95
81
96
-
updateSelection() {
82
+
updateHighlight() {
97
83
this.overlay.children = [];
98
84
this.selection.forEach((selected) => {
99
85
let highlight = selected.copyGraph({
···
111
97
// Apply parent transforms to selected object.
112
98
Zdog.extend(highlight, this.getWorldTransforms(selected));
113
99
});
114
-
115
-
this.syncLayers();
116
100
}
117
101
118
102
syncLayers() {
···
163
147
164
148
// input
165
149
click(ptr, target, x, y) {
166
-
this.select(target);
150
+
this.do(new SelectCommand(this, target));
167
151
}
168
152
169
153
dragStart(ptr, target, x, y) {
···
199
183
}
200
184
move(ptr, target, x, y) {
201
185
this.editor.fetch.rotateMove(ptr, target, x, y);
186
+
this.editor.syncLayers();
202
187
}
203
188
}
204
189
···
206
191
constructor(editor) {
207
192
this.editor = editor;
208
193
}
209
-
execute() {}
194
+
do() {}
210
195
undo() {}
211
196
canMerge(command) {
212
197
return false;
···
214
199
merge(command) {}
215
200
}
216
201
202
+
class SelectCommand extends Command {
203
+
constructor(editor, target) {
204
+
super(editor);
205
+
this.oldSelection = null;
206
+
207
+
// If this is a compositeChild, find its parent
208
+
while (target && target.compositeChild) {
209
+
target = target.addTo;
210
+
}
211
+
// Don't select root elements.
212
+
if (target && !target.addTo) {
213
+
target = null;
214
+
}
215
+
this.target = target;
216
+
}
217
+
do() {
218
+
if (!this.target) {
219
+
this.oldSelection = this.editor.selection;
220
+
this.editor.clearSelection();
221
+
} else {
222
+
this.editor.toggleSelection(this.target);
223
+
}
224
+
}
225
+
undo() {
226
+
if (!this.target) {
227
+
this.editor.selection = this.oldSelection;
228
+
} else {
229
+
this.editor.toggleSelection(this.target);
230
+
}
231
+
}
232
+
}
233
+
217
234
class History {
218
235
constructor() {
219
236
this.undoStack = [];
···
223
240
push(command) {
224
241
// Check to see if this command is mergeable into the last.
225
242
let lastCommand = this.undoStack[this.undoStack.length - 1];
226
-
if (lastCommand.canMerge(command)) {
243
+
if (lastCommand && lastCommand.canMerge(command)) {
227
244
lastCommand.merge(command);
228
245
return;
229
246
}
···
248
265
}
249
266
250
267
let command = this.redoStack.pop();
251
-
command.execute();
268
+
command.do();
252
269
this.undoStack.push(command);
253
270
}
254
271
}