WIP WYSIWYG ~3D SVG editor.
Add input handler for UI layer.
Also rename Widget layer to UI. I plan to merge the Highlights layer into the UI layer. I'm hoping this can be a path to solving some filter issues I'm seeing in Safari.
+29
-13
+1
-1
index.html
+1
-1
index.html
···
20
20
<li><button id="add">Add</button></li>
21
21
</menu>
22
22
<div class="canvas-container">
23
-
<svg id="widgets" class="canvas-layer" xmlns="http://www.w3.org/2000/svg"></svg>
23
+
<svg id="ui" class="canvas-layer" xmlns="http://www.w3.org/2000/svg"></svg>
24
24
<svg id="overlay" class="canvas-layer" xmlns="http://www.w3.org/2000/svg"></svg>
25
25
<svg id="canvas" class="canvas-layer" xmlns="http://www.w3.org/2000/svg"></svg>
26
26
<svg id="defs">
+6
-1
styles.css
+6
-1
styles.css
+22
-11
zoodle.js
+22
-11
zoodle.js
···
1
1
class Zoodle {
2
-
constructor(sceneElem, overlayElem, widgetsElem) {
2
+
constructor(sceneElem, overlayElem, uiElem) {
3
3
// TODO: Calculate appropriate zooms and sizes
4
4
let zoom = 10;
5
5
let rotate = { x: -Math.atan(1 / Math.sqrt(2)), y: TAU / 8 };
···
18
18
rotate: rotate,
19
19
dragRotate: false,
20
20
});
21
-
this.widgets = new Zdog.Illustration({
22
-
element: widgetsElem,
21
+
this.ui = new Zdog.Illustration({
22
+
element: uiElem,
23
23
zoom: zoom,
24
24
resize: 'fullscreen',
25
25
rotate: rotate,
···
39
39
40
40
this.presets.solar.load(this.scene);
41
41
42
-
this.fetch = new Zfetch({
42
+
this.sceneInput = new Zfetch({
43
43
scene: this.scene,
44
44
click: this.click.bind(this),
45
45
dragStart: this.dragStart.bind(this),
···
47
47
dragEnd: this.dragEnd.bind(this),
48
48
});
49
49
50
+
this.uiInput = new Zfetch({
51
+
scene: this.ui,
52
+
capture: true,
53
+
click: this.click.bind(this),
54
+
dragStart: this.dragStart.bind(this),
55
+
dragMove: this.dragMove.bind(this),
56
+
dragEnd: this.dragEnd.bind(this),
57
+
});
58
+
59
+
uiElem.addEventListener("gotpointercapture", _ => uiElem.classList.add("active"));
60
+
uiElem.addEventListener("lostpointercapture", _ => uiElem.classList.remove("active"));
61
+
50
62
this.update();
51
63
}
52
64
···
54
66
this.syncLayers();
55
67
this.scene.updateRenderGraph();
56
68
this.overlay.updateRenderGraph();
57
-
this.widgets.updateRenderGraph();
69
+
this.ui.updateRenderGraph();
58
70
//this.scene.element.setAttribute("data-zdog", JSON.stringify(this.scene));
59
71
requestAnimationFrame(this.update.bind(this));
60
72
}
···
107
119
108
120
syncLayers() {
109
121
const scene = this.scene;
110
-
const targets = [this.overlay, this.widgets];
122
+
const targets = [this.overlay, this.ui];
111
123
112
124
targets.forEach((target) => {
113
125
target.translate = scene.translate;
···
185
197
186
198
class OrbitTool extends Tool {
187
199
start(ptr, target, x, y) {
188
-
this.editor.fetch.rotateStart(ptr, target, x, y);
200
+
this.editor.sceneInput.rotateStart(ptr, target, x, y);
189
201
}
190
202
move(ptr, target, x, y) {
191
-
this.editor.fetch.rotateMove(ptr, target, x, y);
203
+
this.editor.sceneInput.rotateMove(ptr, target, x, y);
192
204
this.editor.syncLayers();
193
205
}
194
206
}
···
251
263
t.translate.set(this.oldTranslate[i]).add(this.delta);
252
264
});
253
265
}
254
-
255
266
undo() {
256
267
if (!this.target) return console.error("Undoing TranslateCommand with no target.");
257
268
···
425
436
426
437
const sceneElem = document.querySelector("#canvas");
427
438
const overlayElem = document.querySelector("#overlay");
428
-
const widgetsElem = document.querySelector("#widgets");
429
-
const zoodle = new Zoodle(sceneElem, overlayElem, widgetsElem);
439
+
const uiElem = document.querySelector("#ui");
440
+
const zoodle = new Zoodle(sceneElem, overlayElem, uiElem);