WIP WYSIWYG ~3D SVG editor.
0
fork

Configure Feed

Select the types of activity you want to include in your feed.

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
··· 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
··· 137 137 filter: url(#better-highlight); 138 138 } 139 139 140 - #widgets { 140 + #ui { 141 141 z-index: 2; 142 + } 143 + 144 + #ui > *, #ui.active { 145 + pointer-events: auto; 146 + cursor: pointer; 142 147 } 143 148 144 149 /* Properties */
+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);