WIP WYSIWYG ~3D SVG editor.
Add support for editing properties in the panel.
Properties can be edited in the panel and they will now live update
within the editor.
+27
-1
+27
-1
zoodle.js
+27
-1
zoodle.js
···
33
33
translate: new TranslateTool(this),
34
34
rotate: new RotateTool(this),
35
35
};
36
-
this.tool = this.tools.rotate;
36
+
this.tool = this.tools.translate;
37
37
38
38
this.props = props;
39
39
···
62
62
63
63
uiElem.addEventListener("gotpointercapture", _ => uiElem.classList.add("active"));
64
64
uiElem.addEventListener("lostpointercapture", _ => uiElem.classList.remove("active"));
65
+
props.addEventListener("input", this.readProperty.bind(this));
65
66
66
67
this.update();
67
68
this.updateProperties();
···
151
152
this.tool.drawWidget(targets);
152
153
}
153
154
155
+
// Read a property from the panel into object(s)
156
+
readProperty(e) {
157
+
let prop = e.target.closest(".prop");
158
+
if (!prop) {
159
+
return;
160
+
}
161
+
let value = this.getProperty(prop);
162
+
// TODO: Make a command.
163
+
let targets = this.selection;
164
+
targets.forEach((target) => {
165
+
target[prop.id] = value;
166
+
if (target.updatePath) target.updatePath();
167
+
target.updateGraph();
168
+
});
169
+
this.updateHighlights();
170
+
this.updateUI();
171
+
}
172
+
173
+
// Update the properties panel to match the selected object(s)
154
174
updateProperties() {
155
175
// Set properties header.
156
176
let header = props.querySelector("h2");
···
185
205
}
186
206
}
187
207
208
+
// Update the properties panel to match one specific object, optionally merging with the properties that are already there.
188
209
setProperties(srcObj, updateValues = true) {
189
210
let srcProps = srcObj.constructor.optionKeys;
190
211
let destProps = this.props.querySelectorAll(".prop");
···
208
229
});
209
230
}
210
231
232
+
// Get the type of a property.
211
233
getPropertyType(prop) {
212
234
let types = ["vector", "number", "color", "bool"];
213
235
for (let i = 0; i < types.length; i++) {
···
218
240
return null;
219
241
}
220
242
243
+
// Set the value of a property in the properties panel.
221
244
setProperty(srcObj, prop) {
222
245
let type = this.getPropertyType(prop);
223
246
···
260
283
return "#000000";
261
284
}
262
285
286
+
// Get the value of a property in the properties panel.
263
287
getProperty(prop) {
264
288
let type = this.getPropertyType(prop);
265
289
···
481
505
});
482
506
this.editor.updateHighlights();
483
507
this.editor.updateUI();
508
+
this.editor.updateProperties();
484
509
}
485
510
end(ptr, target, x, y) {
486
511
if (!this.mode) { return; }
···
599
624
});
600
625
this.editor.updateHighlights();
601
626
this.editor.updateUI();
627
+
this.editor.updateProperties();
602
628
}
603
629
// TODO: Let's stash `delta` somewhere so we don't have to recalculate it in end()
604
630
end( ptr, target, x, y ) {