WIP WYSIWYG ~3D SVG editor.
1<!DOCTYPE html>
2<html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <meta name="viewport" content="width=device-width, initial-scale=1.0">
6 <title>Zoodle</title>
7 <link rel="stylesheet" href="styles.css">
8 <link rel="stylesheet" href="https://use.typekit.net/mcn0osz.css">
9 <script src="zdog/dist/zdog.dist.js"></script>
10 <script src="zfetch/zfetch.js"></script>
11 </head>
12 <body>
13 <main>
14 <menu>
15 <li><button id="tool-select">Select</button></li>
16 <li><button id="tool-translate">Translate</button></li>
17 <li><button id="tool-rotate">Rotate</button></li>
18 <li><button id="tool-scale">Scale</button></li>
19 <li><button id="tool-delete">Delete</button></li>
20 <li><button id="tool-add">Add</button></li>
21 </menu>
22 <div class="canvas-container">
23 <svg id="ui" class="canvas-layer" xmlns="http://www.w3.org/2000/svg"></svg>
24 <svg id="overlay" class="canvas-layer" xmlns="http://www.w3.org/2000/svg"></svg>
25 <svg id="canvas" class="canvas-layer" xmlns="http://www.w3.org/2000/svg"></svg>
26 <svg id="defs">
27 <!-- TODO: Find a better filter. This one scares the pants off Safari, and on Firefox is a bit slow to render. -->
28 <filter id="better-highlight" filterUnits="objectBoundingBox" primitiveUnits="userSpaceOnUse">
29 <feMorphology operator="dilate" radius="2" result="outer" />
30 <feComposite in="SourceGraphic" operator="xor" result="outline" />
31 <feFlood flood-color="#E628" />
32 <feComposite in2="SourceGraphic" operator="in" />
33 <feComposite in2="outline" operator="over" />
34 </filter>
35 </svg>
36 </div>
37 <aside id="outliner">
38 <h2>Outliner</h2>
39 <hr />
40 <ul id="outliner-list">
41 <li>No objects</li>
42 </ul>
43 </aside>
44 <aside id="properties">
45 <h2>No objects selected</h2>
46 <hr />
47 <div class="prop-group">
48 <h3>Transform</h3>
49 <div id="translate" class="vector prop">
50 <h4>Translate</h4>
51 <label for="translate-x">X</label>
52 <input type="number" id="translate-x" step="-1" />
53 <label for="translate-y">Y</label>
54 <input type="number" id="translate-y" step="-1" />
55 <label for="translate-z">Z</label>
56 <input type="number" id="translate-z" step="-1" />
57 </div>
58 <div id="rotate" class="vector prop">
59 <h4>Rotate</h4>
60 <label for="rotate-x">X</label>
61 <input type="number" id="rotate-x" step="-0.1" />
62 <label for="rotate-y">Y</label>
63 <input type="number" id="rotate-y" step="-0.1" />
64 <label for="rotate-z">Z</label>
65 <input type="number" id="rotate-z" step="-0.1" />
66 </div>
67 <div id="scale" class="vector prop">
68 <h4>Scale</h4> <label for="scale-x">X</label>
69 <input type="number" id="scale-x" step="0.1" />
70 <label for="scale-y">Y</label>
71 <input type="number" id="scale-y" step="0.1" />
72 <label for="scale-z">Z</label>
73 <input type="number" id="scale-z" step="0.1" />
74 </div>
75 </div>
76 <div class="prop-group">
77 <h3>Shape</h3>
78 <div id="width" class="number prop">
79 <label for="width-value">Width</label>
80 <input type="number" id="width-value" />
81 </div>
82 <div id="height" class="number prop">
83 <label for="height-value">Height</label>
84 <input type="number" id="height-value" />
85 </div>
86 <div id="depth" class="number prop">
87 <label for="depth-value">Depth</label>
88 <input type="number" id="depth-value" />
89 </div>
90 <div id="length" class="number prop">
91 <label for="length-value">Length</label>
92 <input type="number" id="length-value" />
93 </div>
94 <div id="radius" class="number prop">
95 <label for="radius-value">Radius</label>
96 <input type="number" id="radius-value" />
97 </div>
98 <div id="diameter" class="number prop">
99 <label for="diameter-value">Diameter</label>
100 <input type="number" id="diameter-value" />
101 </div>
102 <div id="sides" class="number prop">
103 <label for="sides-value">Sides</label>
104 <input type="number" id="sides-value" />
105 </div>
106 </div>
107 <div class="prop-group">
108 <h3>Appearance</h3>
109 <div id="color" class="color prop">
110 <label for="color-value">Color</label>
111 <input type="color" id="color-value" />
112 </div>
113 <div id="stroke" class="number prop">
114 <label for="stroke-value">Stroke</label>
115 <input type="number" id="stroke-value" />
116 </div>
117 <div id="fill" class="optional color prop">
118 <label for="fill-enabled">Fill</label>
119 <input type="checkbox" id="fill-enabled" />
120 <input type="color" id="fill-value" />
121 </div>
122 <div id="backface" class="optional color prop">
123 <label for="backface-enabled">Backface</label>
124 <input type="checkbox" id="backface-enabled" />
125 <input type="color" id="backface-value" />
126 </div>
127 </div>
128 </aside>
129 </main>
130 <footer>
131 Made with love, anime.js, and zdog by Jaromino.
132 </footer>
133 <script src="globals.js"></script>
134 <script src="presets.js"></script>
135 <script src="tools.js"></script>
136 <script src="outliner.js"></script>
137 <script src="properties.js"></script>
138 <script src="zoodle.js"></script>
139 <script src="input-enhancements.js"></script>
140 </body>
141</html>