@rogieking/figui3 1.5.8 → 1.6.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/components.css +5 -1
- package/fig.js +1 -0
- package/package.json +1 -1
- package/tracer.html +569 -0
package/components.css
CHANGED
|
@@ -547,6 +547,7 @@ input[type="text"][list] {
|
|
|
547
547
|
}
|
|
548
548
|
}
|
|
549
549
|
|
|
550
|
+
/* Not enough support for this yet
|
|
550
551
|
@supports (appearance: base-select) {
|
|
551
552
|
select {
|
|
552
553
|
appearance: base-select;
|
|
@@ -648,6 +649,7 @@ input[type="text"][list] {
|
|
|
648
649
|
box-shadow: var(--figma-elevation-400-menu-panel);
|
|
649
650
|
}
|
|
650
651
|
}
|
|
652
|
+
*/
|
|
651
653
|
input[type="text"][list]:hover,
|
|
652
654
|
input[type="text"][list]:active,
|
|
653
655
|
input[type="text"][list]:focus,
|
|
@@ -1127,7 +1129,9 @@ fig-chit {
|
|
|
1127
1129
|
height: 0.875rem;
|
|
1128
1130
|
background-image: var(--src);
|
|
1129
1131
|
border-radius: 0.125rem;
|
|
1130
|
-
background-size:
|
|
1132
|
+
background-size: contain;
|
|
1133
|
+
background-position: center center;
|
|
1134
|
+
background-repeat: no-repeat;
|
|
1131
1135
|
box-shadow: inset 0 0 0 1px var(--figma-color-bordertranslucent);
|
|
1132
1136
|
}
|
|
1133
1137
|
&::after,
|
package/fig.js
CHANGED
|
@@ -1686,6 +1686,7 @@ class FigCheckbox extends HTMLElement {
|
|
|
1686
1686
|
this.input.indeterminate = false;
|
|
1687
1687
|
this.input.removeAttribute("indeterminate");
|
|
1688
1688
|
this.value = this.input.value;
|
|
1689
|
+
this.checked = this.input.checked;
|
|
1689
1690
|
}
|
|
1690
1691
|
}
|
|
1691
1692
|
window.customElements.define("fig-checkbox", FigCheckbox);
|
package/package.json
CHANGED
package/tracer.html
ADDED
|
@@ -0,0 +1,569 @@
|
|
|
1
|
+
<!DOCTYPE html>
|
|
2
|
+
<html lang="en">
|
|
3
|
+
|
|
4
|
+
<head>
|
|
5
|
+
<meta charset="UTF-8">
|
|
6
|
+
<meta name="viewport"
|
|
7
|
+
content="width=device-width, initial-scale=1.0">
|
|
8
|
+
<title>Figma UI3 Web Components</title>
|
|
9
|
+
<link rel="stylesheet"
|
|
10
|
+
type="text/css"
|
|
11
|
+
href="fig.css">
|
|
12
|
+
<script src="fig.js"></script>
|
|
13
|
+
<style>
|
|
14
|
+
body {
|
|
15
|
+
margin: 0 auto;
|
|
16
|
+
padding: 1rem;
|
|
17
|
+
display: flex;
|
|
18
|
+
gap: 1rem;
|
|
19
|
+
}
|
|
20
|
+
|
|
21
|
+
#svg {
|
|
22
|
+
width: 100%;
|
|
23
|
+
height: calc(100vh - 2rem);
|
|
24
|
+
border: 1px solid #000;
|
|
25
|
+
overflow: scroll;
|
|
26
|
+
|
|
27
|
+
svg {
|
|
28
|
+
width: 100%;
|
|
29
|
+
height: 100%;
|
|
30
|
+
object-fit: contain;
|
|
31
|
+
}
|
|
32
|
+
}
|
|
33
|
+
|
|
34
|
+
.controls {
|
|
35
|
+
width: 16rem;
|
|
36
|
+
flex-shrink: 0;
|
|
37
|
+
max-height: calc(100vh - 2rem);
|
|
38
|
+
overflow-y: auto;
|
|
39
|
+
padding: 1rem;
|
|
40
|
+
background: #f5f5f5;
|
|
41
|
+
border-radius: 8px;
|
|
42
|
+
}
|
|
43
|
+
|
|
44
|
+
.section {
|
|
45
|
+
margin-bottom: 1.5rem;
|
|
46
|
+
}
|
|
47
|
+
|
|
48
|
+
.section h3 {
|
|
49
|
+
margin: 0 0 0.5rem 0;
|
|
50
|
+
font-size: 0.9rem;
|
|
51
|
+
font-weight: bold;
|
|
52
|
+
color: #333;
|
|
53
|
+
border-bottom: 1px solid #ddd;
|
|
54
|
+
padding-bottom: 0.25rem;
|
|
55
|
+
}
|
|
56
|
+
|
|
57
|
+
.option {
|
|
58
|
+
margin-bottom: 0.75rem;
|
|
59
|
+
}
|
|
60
|
+
|
|
61
|
+
.option label {
|
|
62
|
+
display: block;
|
|
63
|
+
font-size: 0.8rem;
|
|
64
|
+
margin-bottom: 0.25rem;
|
|
65
|
+
color: #666;
|
|
66
|
+
}
|
|
67
|
+
|
|
68
|
+
.option fig-slider {
|
|
69
|
+
width: 100%;
|
|
70
|
+
margin-bottom: 0.25rem;
|
|
71
|
+
}
|
|
72
|
+
|
|
73
|
+
.option fig-checkbox {
|
|
74
|
+
margin-right: 0.5rem;
|
|
75
|
+
}
|
|
76
|
+
|
|
77
|
+
.option fig-dropdown {
|
|
78
|
+
width: 100%;
|
|
79
|
+
margin-top: 0.25rem;
|
|
80
|
+
}
|
|
81
|
+
|
|
82
|
+
.value-display {
|
|
83
|
+
font-size: 0.75rem;
|
|
84
|
+
color: #888;
|
|
85
|
+
}
|
|
86
|
+
|
|
87
|
+
.checkbox-option {
|
|
88
|
+
display: flex;
|
|
89
|
+
align-items: center;
|
|
90
|
+
}
|
|
91
|
+
|
|
92
|
+
fig-image {
|
|
93
|
+
--image-size: 14rem !important;
|
|
94
|
+
width: 100%;
|
|
95
|
+
margin-bottom: 1rem;
|
|
96
|
+
position: sticky;
|
|
97
|
+
top: 0;
|
|
98
|
+
z-index: 100;
|
|
99
|
+
background: #f5f5f5;
|
|
100
|
+
}
|
|
101
|
+
</style>
|
|
102
|
+
</head>
|
|
103
|
+
|
|
104
|
+
<body>
|
|
105
|
+
<div class="controls">
|
|
106
|
+
<fig-image upload="true"
|
|
107
|
+
label="Upload image"
|
|
108
|
+
size="large"></fig-image>
|
|
109
|
+
|
|
110
|
+
<div class="section">
|
|
111
|
+
<h3>Presets</h3>
|
|
112
|
+
<div class="option">
|
|
113
|
+
<label for="preset">Select Preset:</label>
|
|
114
|
+
<fig-dropdown id="preset"
|
|
115
|
+
name="preset"
|
|
116
|
+
value="default">
|
|
117
|
+
<option value="default">Default</option>
|
|
118
|
+
<option value="posterized1">Posterized 1</option>
|
|
119
|
+
<option value="posterized2">Posterized 2</option>
|
|
120
|
+
<option value="posterized3">Posterized 3</option>
|
|
121
|
+
<option value="curvy">Curvy</option>
|
|
122
|
+
<option value="sharp">Sharp</option>
|
|
123
|
+
<option value="detailed">Detailed</option>
|
|
124
|
+
<option value="smoothed">Smoothed</option>
|
|
125
|
+
<option value="grayscale">Grayscale</option>
|
|
126
|
+
<option value="fixedpalette">Fixed Palette</option>
|
|
127
|
+
<option value="randomsampling1">Random Sampling 1</option>
|
|
128
|
+
<option value="randomsampling2">Random Sampling 2</option>
|
|
129
|
+
<option value="artistic1">Artistic 1</option>
|
|
130
|
+
<option value="artistic2">Artistic 2</option>
|
|
131
|
+
<option value="artistic3">Artistic 3</option>
|
|
132
|
+
<option value="artistic4">Artistic 4</option>
|
|
133
|
+
</fig-dropdown>
|
|
134
|
+
</div>
|
|
135
|
+
</div>
|
|
136
|
+
|
|
137
|
+
<div class="section">
|
|
138
|
+
<h3>Tracing</h3>
|
|
139
|
+
|
|
140
|
+
<div class="option checkbox-option">
|
|
141
|
+
<fig-checkbox id="corsenabled"
|
|
142
|
+
name="corsenabled"
|
|
143
|
+
label="CORS Enabled"></fig-checkbox>
|
|
144
|
+
</div>
|
|
145
|
+
|
|
146
|
+
<div class="option">
|
|
147
|
+
<label for="ltres">Line Threshold (ltres): <span class="value-display"
|
|
148
|
+
id="ltres-value">1</span></label>
|
|
149
|
+
<fig-slider min="0"
|
|
150
|
+
max="10"
|
|
151
|
+
value="1"
|
|
152
|
+
step="0.01"
|
|
153
|
+
id="ltres"
|
|
154
|
+
name="ltres"></fig-slider>
|
|
155
|
+
</div>
|
|
156
|
+
|
|
157
|
+
<div class="option">
|
|
158
|
+
<label for="qtres">Quadratic Threshold (qtres): <span class="value-display"
|
|
159
|
+
id="qtres-value">1</span></label>
|
|
160
|
+
<fig-slider min="0"
|
|
161
|
+
max="10"
|
|
162
|
+
value="1"
|
|
163
|
+
step="0.01"
|
|
164
|
+
id="qtres"
|
|
165
|
+
name="qtres"></fig-slider>
|
|
166
|
+
</div>
|
|
167
|
+
|
|
168
|
+
<div class="option">
|
|
169
|
+
<label for="pathomit">Path Omit (pathomit): <span class="value-display"
|
|
170
|
+
id="pathomit-value">8</span></label>
|
|
171
|
+
<fig-slider min="0"
|
|
172
|
+
max="100"
|
|
173
|
+
value="8"
|
|
174
|
+
step="1"
|
|
175
|
+
id="pathomit"
|
|
176
|
+
name="pathomit"></fig-slider>
|
|
177
|
+
</div>
|
|
178
|
+
|
|
179
|
+
<div class="option checkbox-option">
|
|
180
|
+
<fig-checkbox id="rightangleenhance"
|
|
181
|
+
name="rightangleenhance"
|
|
182
|
+
checked
|
|
183
|
+
label="Right Angle Enhance"></fig-checkbox>
|
|
184
|
+
</div>
|
|
185
|
+
</div>
|
|
186
|
+
|
|
187
|
+
<div class="section">
|
|
188
|
+
<h3>Color Quantization</h3>
|
|
189
|
+
|
|
190
|
+
<div class="option">
|
|
191
|
+
<label for="colorsampling">Color Sampling: <span class="value-display"
|
|
192
|
+
id="colorsampling-value">2</span></label>
|
|
193
|
+
<fig-slider min="0"
|
|
194
|
+
max="3"
|
|
195
|
+
value="2"
|
|
196
|
+
step="1"
|
|
197
|
+
id="colorsampling"
|
|
198
|
+
name="colorsampling"></fig-slider>
|
|
199
|
+
</div>
|
|
200
|
+
|
|
201
|
+
<div class="option">
|
|
202
|
+
<label for="numberofcolors">Number of Colors: <span class="value-display"
|
|
203
|
+
id="numberofcolors-value">16</span></label>
|
|
204
|
+
<fig-slider min="2"
|
|
205
|
+
max="256"
|
|
206
|
+
value="16"
|
|
207
|
+
step="1"
|
|
208
|
+
id="numberofcolors"
|
|
209
|
+
name="numberofcolors"></fig-slider>
|
|
210
|
+
</div>
|
|
211
|
+
|
|
212
|
+
<div class="option">
|
|
213
|
+
<label for="mincolorratio">Min Color Ratio: <span class="value-display"
|
|
214
|
+
id="mincolorratio-value">0</span></label>
|
|
215
|
+
<fig-slider min="0"
|
|
216
|
+
max="1"
|
|
217
|
+
value="0"
|
|
218
|
+
step="0.01"
|
|
219
|
+
id="mincolorratio"
|
|
220
|
+
name="mincolorratio"></fig-slider>
|
|
221
|
+
</div>
|
|
222
|
+
|
|
223
|
+
<div class="option">
|
|
224
|
+
<label for="colorquantcycles">Color Quant Cycles: <span class="value-display"
|
|
225
|
+
id="colorquantcycles-value">3</span></label>
|
|
226
|
+
<fig-slider min="1"
|
|
227
|
+
max="10"
|
|
228
|
+
value="3"
|
|
229
|
+
step="1"
|
|
230
|
+
id="colorquantcycles"
|
|
231
|
+
name="colorquantcycles"></fig-slider>
|
|
232
|
+
</div>
|
|
233
|
+
</div>
|
|
234
|
+
|
|
235
|
+
<div class="section">
|
|
236
|
+
<h3>SVG Rendering</h3>
|
|
237
|
+
|
|
238
|
+
<div class="option">
|
|
239
|
+
<label for="strokewidth">Stroke Width: <span class="value-display"
|
|
240
|
+
id="strokewidth-value">1</span></label>
|
|
241
|
+
<fig-slider min="0"
|
|
242
|
+
max="10"
|
|
243
|
+
value="1"
|
|
244
|
+
step="0.1"
|
|
245
|
+
id="strokewidth"
|
|
246
|
+
name="strokewidth"></fig-slider>
|
|
247
|
+
</div>
|
|
248
|
+
|
|
249
|
+
<div class="option checkbox-option">
|
|
250
|
+
<fig-checkbox id="linefilter"
|
|
251
|
+
name="linefilter"
|
|
252
|
+
label="Line Filter"></fig-checkbox>
|
|
253
|
+
</div>
|
|
254
|
+
|
|
255
|
+
<div class="option">
|
|
256
|
+
<label for="scale">Scale: <span class="value-display"
|
|
257
|
+
id="scale-value">1</span></label>
|
|
258
|
+
<fig-slider min="0.1"
|
|
259
|
+
max="5"
|
|
260
|
+
value="1"
|
|
261
|
+
step="0.1"
|
|
262
|
+
id="scale"
|
|
263
|
+
name="scale"></fig-slider>
|
|
264
|
+
</div>
|
|
265
|
+
|
|
266
|
+
<div class="option">
|
|
267
|
+
<label for="roundcoords">Round Coords: <span class="value-display"
|
|
268
|
+
id="roundcoords-value">1</span></label>
|
|
269
|
+
<fig-slider min="0"
|
|
270
|
+
max="3"
|
|
271
|
+
value="1"
|
|
272
|
+
step="1"
|
|
273
|
+
id="roundcoords"
|
|
274
|
+
name="roundcoords"></fig-slider>
|
|
275
|
+
</div>
|
|
276
|
+
|
|
277
|
+
<div class="option checkbox-option">
|
|
278
|
+
<fig-checkbox id="viewbox"
|
|
279
|
+
name="viewbox"
|
|
280
|
+
checked
|
|
281
|
+
label="Viewbox"></fig-checkbox>
|
|
282
|
+
</div>
|
|
283
|
+
|
|
284
|
+
<div class="option checkbox-option">
|
|
285
|
+
<fig-checkbox id="desc"
|
|
286
|
+
name="desc"
|
|
287
|
+
label="Description"></fig-checkbox>
|
|
288
|
+
</div>
|
|
289
|
+
|
|
290
|
+
<div class="option">
|
|
291
|
+
<label for="lcpr">LCPR: <span class="value-display"
|
|
292
|
+
id="lcpr-value">0</span></label>
|
|
293
|
+
<fig-slider min="0"
|
|
294
|
+
max="10"
|
|
295
|
+
value="0"
|
|
296
|
+
step="0.1"
|
|
297
|
+
id="lcpr"
|
|
298
|
+
name="lcpr"></fig-slider>
|
|
299
|
+
</div>
|
|
300
|
+
|
|
301
|
+
<div class="option">
|
|
302
|
+
<label for="qcpr">QCPR: <span class="value-display"
|
|
303
|
+
id="qcpr-value">0</span></label>
|
|
304
|
+
<fig-slider min="0"
|
|
305
|
+
max="10"
|
|
306
|
+
value="0"
|
|
307
|
+
step="0.1"
|
|
308
|
+
id="qcpr"
|
|
309
|
+
name="qcpr"></fig-slider>
|
|
310
|
+
</div>
|
|
311
|
+
</div>
|
|
312
|
+
|
|
313
|
+
<div class="section">
|
|
314
|
+
<h3>Blur</h3>
|
|
315
|
+
|
|
316
|
+
<div class="option">
|
|
317
|
+
<label for="blurradius">Blur Radius: <span class="value-display"
|
|
318
|
+
id="blurradius-value">0</span></label>
|
|
319
|
+
<fig-slider min="0"
|
|
320
|
+
max="20"
|
|
321
|
+
value="0"
|
|
322
|
+
step="0.1"
|
|
323
|
+
id="blurradius"
|
|
324
|
+
name="blurradius"></fig-slider>
|
|
325
|
+
</div>
|
|
326
|
+
|
|
327
|
+
<div class="option">
|
|
328
|
+
<label for="blurdelta">Blur Delta: <span class="value-display"
|
|
329
|
+
id="blurdelta-value">20</span></label>
|
|
330
|
+
<fig-slider min="1"
|
|
331
|
+
max="256"
|
|
332
|
+
value="20"
|
|
333
|
+
step="1"
|
|
334
|
+
id="blurdelta"
|
|
335
|
+
name="blurdelta"></fig-slider>
|
|
336
|
+
</div>
|
|
337
|
+
</div>
|
|
338
|
+
|
|
339
|
+
<div class="section">
|
|
340
|
+
<h3>Layering</h3>
|
|
341
|
+
|
|
342
|
+
<div class="option">
|
|
343
|
+
<label for="layering">Layering Method: <span class="value-display"
|
|
344
|
+
id="layering-value">0</span></label>
|
|
345
|
+
<fig-slider min="0"
|
|
346
|
+
max="2"
|
|
347
|
+
value="0"
|
|
348
|
+
step="1"
|
|
349
|
+
id="layering"
|
|
350
|
+
name="layering"></fig-slider>
|
|
351
|
+
</div>
|
|
352
|
+
</div>
|
|
353
|
+
</div>
|
|
354
|
+
|
|
355
|
+
<div id="svg">
|
|
356
|
+
<fig-spinner></fig-spinner>
|
|
357
|
+
</div>
|
|
358
|
+
|
|
359
|
+
<script type="module">
|
|
360
|
+
let options = {
|
|
361
|
+
'default': {
|
|
362
|
+
// Tracing
|
|
363
|
+
corsenabled: false,
|
|
364
|
+
ltres: 1,
|
|
365
|
+
qtres: 1,
|
|
366
|
+
pathomit: 8,
|
|
367
|
+
rightangleenhance: true,
|
|
368
|
+
|
|
369
|
+
// Color quantization
|
|
370
|
+
colorsampling: 2,
|
|
371
|
+
numberofcolors: 16,
|
|
372
|
+
mincolorratio: 0,
|
|
373
|
+
colorquantcycles: 3,
|
|
374
|
+
|
|
375
|
+
// Layering method
|
|
376
|
+
layering: 0,
|
|
377
|
+
|
|
378
|
+
// SVG rendering
|
|
379
|
+
strokewidth: 1,
|
|
380
|
+
linefilter: false,
|
|
381
|
+
scale: 1,
|
|
382
|
+
roundcoords: 1,
|
|
383
|
+
viewbox: true,
|
|
384
|
+
desc: false,
|
|
385
|
+
lcpr: 0,
|
|
386
|
+
qcpr: 0,
|
|
387
|
+
|
|
388
|
+
// Blur
|
|
389
|
+
blurradius: 0,
|
|
390
|
+
blurdelta: 20
|
|
391
|
+
},
|
|
392
|
+
'posterized1': { colorsampling: 0, numberofcolors: 2 },
|
|
393
|
+
'posterized2': { numberofcolors: 4, blurradius: 5 },
|
|
394
|
+
'curvy': { ltres: 0.01, linefilter: true, rightangleenhance: false },
|
|
395
|
+
'sharp': { qtres: 0.01, linefilter: false },
|
|
396
|
+
'detailed': { pathomit: 0, roundcoords: 2, ltres: 0.5, qtres: 0.5, numberofcolors: 64 },
|
|
397
|
+
'smoothed': { blurradius: 5, blurdelta: 64 },
|
|
398
|
+
'grayscale': { colorsampling: 0, colorquantcycles: 1, numberofcolors: 7 },
|
|
399
|
+
'fixedpalette': { colorsampling: 0, colorquantcycles: 1, numberofcolors: 27 },
|
|
400
|
+
'randomsampling1': { colorsampling: 1, numberofcolors: 8 },
|
|
401
|
+
'randomsampling2': { colorsampling: 1, numberofcolors: 64 },
|
|
402
|
+
'artistic1': { colorsampling: 0, colorquantcycles: 1, pathomit: 0, blurradius: 5, blurdelta: 64, ltres: 0.01, linefilter: true, numberofcolors: 16, strokewidth: 2 },
|
|
403
|
+
'artistic2': { qtres: 0.01, colorsampling: 0, colorquantcycles: 1, numberofcolors: 4, strokewidth: 0 },
|
|
404
|
+
'artistic3': { qtres: 10, ltres: 10, numberofcolors: 8 },
|
|
405
|
+
'artistic4': { qtres: 10, ltres: 10, numberofcolors: 64, blurradius: 5, blurdelta: 256, strokewidth: 2 },
|
|
406
|
+
'posterized3': {
|
|
407
|
+
ltres: 1, qtres: 1, pathomit: 20, rightangleenhance: true, colorsampling: 0, numberofcolors: 3,
|
|
408
|
+
mincolorratio: 0, colorquantcycles: 3, blurradius: 3, blurdelta: 20, strokewidth: 0, linefilter: false,
|
|
409
|
+
roundcoords: 1, pal: [{ r: 0, g: 0, b: 100, a: 255 }, { r: 255, g: 255, b: 255, a: 255 }]
|
|
410
|
+
}
|
|
411
|
+
}
|
|
412
|
+
|
|
413
|
+
// Import imagetracerjs
|
|
414
|
+
import ImageTracer from "https://esm.sh/imagetracerjs";
|
|
415
|
+
|
|
416
|
+
let figImage = document.querySelector("fig-image");
|
|
417
|
+
let currentImageBlob = null;
|
|
418
|
+
let currentOptions = { ...options.default };
|
|
419
|
+
|
|
420
|
+
// Function to update current options from form controls
|
|
421
|
+
function updateCurrentOptions() {
|
|
422
|
+
// Get all form controls - now they are fig.js components
|
|
423
|
+
const sliders = document.querySelectorAll('fig-slider');
|
|
424
|
+
const checkboxes = document.querySelectorAll('fig-checkbox');
|
|
425
|
+
|
|
426
|
+
// Handle sliders
|
|
427
|
+
sliders.forEach(slider => {
|
|
428
|
+
const name = slider.getAttribute('name');
|
|
429
|
+
if (name && currentOptions.hasOwnProperty(name)) {
|
|
430
|
+
currentOptions[name] = parseFloat(slider.value);
|
|
431
|
+
}
|
|
432
|
+
});
|
|
433
|
+
|
|
434
|
+
// Handle checkboxes
|
|
435
|
+
checkboxes.forEach(checkbox => {
|
|
436
|
+
const name = checkbox.getAttribute('name');
|
|
437
|
+
if (name && currentOptions.hasOwnProperty(name)) {
|
|
438
|
+
currentOptions[name] = checkbox.input.checked;
|
|
439
|
+
}
|
|
440
|
+
});
|
|
441
|
+
}
|
|
442
|
+
|
|
443
|
+
// Function to update form controls from current options
|
|
444
|
+
function updateFormControlsFromOptions() {
|
|
445
|
+
const sliders = document.querySelectorAll('fig-slider');
|
|
446
|
+
const checkboxes = document.querySelectorAll('fig-checkbox');
|
|
447
|
+
|
|
448
|
+
// Handle sliders
|
|
449
|
+
sliders.forEach(slider => {
|
|
450
|
+
const name = slider.getAttribute('name');
|
|
451
|
+
if (name && currentOptions.hasOwnProperty(name)) {
|
|
452
|
+
slider.setAttribute('value', currentOptions[name]);
|
|
453
|
+
}
|
|
454
|
+
});
|
|
455
|
+
|
|
456
|
+
// Handle checkboxes
|
|
457
|
+
checkboxes.forEach(checkbox => {
|
|
458
|
+
const name = checkbox.getAttribute('name');
|
|
459
|
+
if (name && currentOptions.hasOwnProperty(name)) {
|
|
460
|
+
if (currentOptions[name]) {
|
|
461
|
+
checkbox.setAttribute('checked', 'true');
|
|
462
|
+
} else {
|
|
463
|
+
checkbox.removeAttribute('checked');
|
|
464
|
+
}
|
|
465
|
+
}
|
|
466
|
+
});
|
|
467
|
+
|
|
468
|
+
updateValueDisplays();
|
|
469
|
+
}
|
|
470
|
+
|
|
471
|
+
// Function to apply a preset
|
|
472
|
+
function applyPreset(presetName) {
|
|
473
|
+
if (!options[presetName]) return;
|
|
474
|
+
|
|
475
|
+
// Reset to default first
|
|
476
|
+
currentOptions = { ...options.default };
|
|
477
|
+
|
|
478
|
+
// Apply preset values
|
|
479
|
+
const preset = options[presetName];
|
|
480
|
+
Object.assign(currentOptions, preset);
|
|
481
|
+
|
|
482
|
+
// Update form controls to reflect new values
|
|
483
|
+
updateFormControlsFromOptions();
|
|
484
|
+
|
|
485
|
+
// Update the preset dropdown
|
|
486
|
+
document.getElementById('preset').setAttribute('value', presetName);
|
|
487
|
+
|
|
488
|
+
// Perform tracing with new options
|
|
489
|
+
performTracing();
|
|
490
|
+
}
|
|
491
|
+
|
|
492
|
+
// Function to update value displays
|
|
493
|
+
function updateValueDisplays() {
|
|
494
|
+
const sliders = document.querySelectorAll('fig-slider');
|
|
495
|
+
sliders.forEach(slider => {
|
|
496
|
+
const valueDisplay = document.getElementById(slider.id + '-value');
|
|
497
|
+
if (valueDisplay) {
|
|
498
|
+
valueDisplay.textContent = slider.value;
|
|
499
|
+
}
|
|
500
|
+
});
|
|
501
|
+
}
|
|
502
|
+
|
|
503
|
+
// Function to perform tracing
|
|
504
|
+
function performTracing() {
|
|
505
|
+
if (!currentImageBlob) return;
|
|
506
|
+
|
|
507
|
+
// Clear existing SVG
|
|
508
|
+
document.getElementById('svg').innerHTML = '';
|
|
509
|
+
|
|
510
|
+
let appendImg = function (svgstr) {
|
|
511
|
+
console.log('SVG generated, updating display');
|
|
512
|
+
document.getElementById('svg').innerHTML = svgstr;
|
|
513
|
+
};
|
|
514
|
+
|
|
515
|
+
console.log('Tracing with options:', currentOptions);
|
|
516
|
+
ImageTracer.imageToSVG(currentImageBlob, appendImg, currentOptions);
|
|
517
|
+
}
|
|
518
|
+
|
|
519
|
+
// Set up event listeners for all controls
|
|
520
|
+
function setupControlListeners() {
|
|
521
|
+
const sliders = document.querySelectorAll('fig-slider');
|
|
522
|
+
const checkboxes = document.querySelectorAll('fig-checkbox');
|
|
523
|
+
|
|
524
|
+
// Handle slider events
|
|
525
|
+
sliders.forEach(slider => {
|
|
526
|
+
slider.addEventListener('input', (e) => {
|
|
527
|
+
updateValueDisplays();
|
|
528
|
+
updateCurrentOptions();
|
|
529
|
+
|
|
530
|
+
// Debounce the tracing to avoid too many calls
|
|
531
|
+
clearTimeout(slider.tracingTimeout);
|
|
532
|
+
slider.tracingTimeout = setTimeout(performTracing, 300);
|
|
533
|
+
});
|
|
534
|
+
});
|
|
535
|
+
|
|
536
|
+
// Handle checkbox events
|
|
537
|
+
checkboxes.forEach(checkbox => {
|
|
538
|
+
checkbox.addEventListener('change', (e) => {
|
|
539
|
+
updateCurrentOptions();
|
|
540
|
+
|
|
541
|
+
// Debounce the tracing to avoid too many calls
|
|
542
|
+
clearTimeout(checkbox.tracingTimeout);
|
|
543
|
+
checkbox.tracingTimeout = setTimeout(performTracing, 300);
|
|
544
|
+
});
|
|
545
|
+
});
|
|
546
|
+
|
|
547
|
+
// Set up preset dropdown listener
|
|
548
|
+
const presetSelect = document.getElementById('preset');
|
|
549
|
+
presetSelect.addEventListener('input', (e) => {
|
|
550
|
+
const selectedPreset = e.target.value;
|
|
551
|
+
applyPreset(selectedPreset);
|
|
552
|
+
});
|
|
553
|
+
}
|
|
554
|
+
|
|
555
|
+
// Initial setup
|
|
556
|
+
updateValueDisplays();
|
|
557
|
+
setupControlListeners();
|
|
558
|
+
|
|
559
|
+
// Handle image upload
|
|
560
|
+
figImage.addEventListener("change", e => {
|
|
561
|
+
console.log('Image uploaded:', figImage.blob);
|
|
562
|
+
currentImageBlob = figImage.blob;
|
|
563
|
+
updateCurrentOptions();
|
|
564
|
+
performTracing();
|
|
565
|
+
});
|
|
566
|
+
</script>
|
|
567
|
+
</body>
|
|
568
|
+
|
|
569
|
+
</html>
|