@rogieking/figui3 2.10.0 → 2.10.2
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/LICENSE +21 -0
- package/README.md +696 -203
- package/components.css +107 -129
- package/dist/fig.js +74 -0
- package/fig.js +207 -118
- package/package.json +31 -8
- package/.vscode/settings.json +0 -3
- package/AUDIT.md +0 -183
- package/example.html +0 -3135
- package/glitch.html +0 -70
- package/index.ts +0 -1
- package/test.html +0 -843
- package/tracer.html +0 -584
- package/tsconfig.json +0 -27
package/tracer.html
DELETED
|
@@ -1,584 +0,0 @@
|
|
|
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"
|
|
155
|
-
variant="minimal"></fig-slider>
|
|
156
|
-
</div>
|
|
157
|
-
|
|
158
|
-
<div class="option">
|
|
159
|
-
<label for="qtres">Quadratic Threshold (qtres): <span class="value-display"
|
|
160
|
-
id="qtres-value">1</span></label>
|
|
161
|
-
<fig-slider min="0"
|
|
162
|
-
max="10"
|
|
163
|
-
value="1"
|
|
164
|
-
step="0.01"
|
|
165
|
-
id="qtres"
|
|
166
|
-
name="qtres"
|
|
167
|
-
variant="minimal"></fig-slider>
|
|
168
|
-
</div>
|
|
169
|
-
|
|
170
|
-
<div class="option">
|
|
171
|
-
<label for="pathomit">Path Omit (pathomit): <span class="value-display"
|
|
172
|
-
id="pathomit-value">8</span></label>
|
|
173
|
-
<fig-slider min="0"
|
|
174
|
-
max="100"
|
|
175
|
-
value="8"
|
|
176
|
-
step="1"
|
|
177
|
-
id="pathomit"
|
|
178
|
-
name="pathomit"
|
|
179
|
-
variant="minimal"></fig-slider>
|
|
180
|
-
</div>
|
|
181
|
-
|
|
182
|
-
<div class="option checkbox-option">
|
|
183
|
-
<fig-checkbox id="rightangleenhance"
|
|
184
|
-
name="rightangleenhance"
|
|
185
|
-
checked
|
|
186
|
-
label="Right Angle Enhance"></fig-checkbox>
|
|
187
|
-
</div>
|
|
188
|
-
</div>
|
|
189
|
-
|
|
190
|
-
<div class="section">
|
|
191
|
-
<h3>Color Quantization</h3>
|
|
192
|
-
|
|
193
|
-
<div class="option">
|
|
194
|
-
<label for="colorsampling">Color Sampling: <span class="value-display"
|
|
195
|
-
id="colorsampling-value">2</span></label>
|
|
196
|
-
<fig-slider min="0"
|
|
197
|
-
max="3"
|
|
198
|
-
value="2"
|
|
199
|
-
step="1"
|
|
200
|
-
id="colorsampling"
|
|
201
|
-
name="colorsampling"
|
|
202
|
-
variant="minimal"></fig-slider>
|
|
203
|
-
</div>
|
|
204
|
-
|
|
205
|
-
<div class="option">
|
|
206
|
-
<label for="numberofcolors">Number of Colors: <span class="value-display"
|
|
207
|
-
id="numberofcolors-value">16</span></label>
|
|
208
|
-
<fig-slider min="2"
|
|
209
|
-
max="256"
|
|
210
|
-
value="16"
|
|
211
|
-
step="1"
|
|
212
|
-
id="numberofcolors"
|
|
213
|
-
name="numberofcolors"
|
|
214
|
-
variant="minimal"></fig-slider>
|
|
215
|
-
</div>
|
|
216
|
-
|
|
217
|
-
<div class="option">
|
|
218
|
-
<label for="mincolorratio">Min Color Ratio: <span class="value-display"
|
|
219
|
-
id="mincolorratio-value">0</span></label>
|
|
220
|
-
<fig-slider min="0"
|
|
221
|
-
max="1"
|
|
222
|
-
value="0"
|
|
223
|
-
step="0.01"
|
|
224
|
-
id="mincolorratio"
|
|
225
|
-
name="mincolorratio"
|
|
226
|
-
variant="minimal"></fig-slider>
|
|
227
|
-
</div>
|
|
228
|
-
|
|
229
|
-
<div class="option">
|
|
230
|
-
<label for="colorquantcycles">Color Quant Cycles: <span class="value-display"
|
|
231
|
-
id="colorquantcycles-value">3</span></label>
|
|
232
|
-
<fig-slider min="1"
|
|
233
|
-
max="10"
|
|
234
|
-
value="3"
|
|
235
|
-
step="1"
|
|
236
|
-
id="colorquantcycles"
|
|
237
|
-
name="colorquantcycles"
|
|
238
|
-
variant="minimal"></fig-slider>
|
|
239
|
-
</div>
|
|
240
|
-
</div>
|
|
241
|
-
|
|
242
|
-
<div class="section">
|
|
243
|
-
<h3>SVG Rendering</h3>
|
|
244
|
-
|
|
245
|
-
<div class="option">
|
|
246
|
-
<label for="strokewidth">Stroke Width: <span class="value-display"
|
|
247
|
-
id="strokewidth-value">1</span></label>
|
|
248
|
-
<fig-slider min="0"
|
|
249
|
-
max="10"
|
|
250
|
-
value="1"
|
|
251
|
-
step="0.1"
|
|
252
|
-
id="strokewidth"
|
|
253
|
-
name="strokewidth"
|
|
254
|
-
variant="minimal"></fig-slider>
|
|
255
|
-
</div>
|
|
256
|
-
|
|
257
|
-
<div class="option checkbox-option">
|
|
258
|
-
<fig-checkbox id="linefilter"
|
|
259
|
-
name="linefilter"
|
|
260
|
-
label="Line Filter"></fig-checkbox>
|
|
261
|
-
</div>
|
|
262
|
-
|
|
263
|
-
<div class="option">
|
|
264
|
-
<label for="scale">Scale: <span class="value-display"
|
|
265
|
-
id="scale-value">1</span></label>
|
|
266
|
-
<fig-slider min="0.1"
|
|
267
|
-
max="5"
|
|
268
|
-
value="1"
|
|
269
|
-
step="0.1"
|
|
270
|
-
id="scale"
|
|
271
|
-
name="scale"
|
|
272
|
-
variant="minimal"></fig-slider>
|
|
273
|
-
</div>
|
|
274
|
-
|
|
275
|
-
<div class="option">
|
|
276
|
-
<label for="roundcoords">Round Coords: <span class="value-display"
|
|
277
|
-
id="roundcoords-value">1</span></label>
|
|
278
|
-
<fig-slider min="0"
|
|
279
|
-
max="3"
|
|
280
|
-
value="1"
|
|
281
|
-
step="1"
|
|
282
|
-
id="roundcoords"
|
|
283
|
-
name="roundcoords"
|
|
284
|
-
variant="minimal"></fig-slider>
|
|
285
|
-
</div>
|
|
286
|
-
|
|
287
|
-
<div class="option checkbox-option">
|
|
288
|
-
<fig-checkbox id="viewbox"
|
|
289
|
-
name="viewbox"
|
|
290
|
-
checked
|
|
291
|
-
label="Viewbox"></fig-checkbox>
|
|
292
|
-
</div>
|
|
293
|
-
|
|
294
|
-
<div class="option checkbox-option">
|
|
295
|
-
<fig-checkbox id="desc"
|
|
296
|
-
name="desc"
|
|
297
|
-
label="Description"></fig-checkbox>
|
|
298
|
-
</div>
|
|
299
|
-
|
|
300
|
-
<div class="option">
|
|
301
|
-
<label for="lcpr">LCPR: <span class="value-display"
|
|
302
|
-
id="lcpr-value">0</span></label>
|
|
303
|
-
<fig-slider min="0"
|
|
304
|
-
max="10"
|
|
305
|
-
value="0"
|
|
306
|
-
step="0.1"
|
|
307
|
-
id="lcpr"
|
|
308
|
-
name="lcpr"
|
|
309
|
-
variant="minimal"></fig-slider>
|
|
310
|
-
</div>
|
|
311
|
-
|
|
312
|
-
<div class="option">
|
|
313
|
-
<label for="qcpr">QCPR: <span class="value-display"
|
|
314
|
-
id="qcpr-value">0</span></label>
|
|
315
|
-
<fig-slider min="0"
|
|
316
|
-
max="10"
|
|
317
|
-
value="0"
|
|
318
|
-
step="0.1"
|
|
319
|
-
id="qcpr"
|
|
320
|
-
name="qcpr"
|
|
321
|
-
variant="minimal"></fig-slider>
|
|
322
|
-
</div>
|
|
323
|
-
</div>
|
|
324
|
-
|
|
325
|
-
<div class="section">
|
|
326
|
-
<h3>Blur</h3>
|
|
327
|
-
|
|
328
|
-
<div class="option">
|
|
329
|
-
<label for="blurradius">Blur Radius: <span class="value-display"
|
|
330
|
-
id="blurradius-value">0</span></label>
|
|
331
|
-
<fig-slider min="0"
|
|
332
|
-
max="20"
|
|
333
|
-
value="0"
|
|
334
|
-
step="0.1"
|
|
335
|
-
id="blurradius"
|
|
336
|
-
name="blurradius"
|
|
337
|
-
variant="minimal"></fig-slider>
|
|
338
|
-
</div>
|
|
339
|
-
|
|
340
|
-
<div class="option">
|
|
341
|
-
<label for="blurdelta">Blur Delta: <span class="value-display"
|
|
342
|
-
id="blurdelta-value">20</span></label>
|
|
343
|
-
<fig-slider min="1"
|
|
344
|
-
max="256"
|
|
345
|
-
value="20"
|
|
346
|
-
step="1"
|
|
347
|
-
id="blurdelta"
|
|
348
|
-
name="blurdelta"
|
|
349
|
-
variant="minimal"></fig-slider>
|
|
350
|
-
</div>
|
|
351
|
-
</div>
|
|
352
|
-
|
|
353
|
-
<div class="section">
|
|
354
|
-
<h3>Layering</h3>
|
|
355
|
-
|
|
356
|
-
<div class="option">
|
|
357
|
-
<label for="layering">Layering Method: <span class="value-display"
|
|
358
|
-
id="layering-value">0</span></label>
|
|
359
|
-
<fig-slider min="0"
|
|
360
|
-
max="2"
|
|
361
|
-
value="0"
|
|
362
|
-
step="1"
|
|
363
|
-
id="layering"
|
|
364
|
-
name="layering"
|
|
365
|
-
variant="minimal"></fig-slider>
|
|
366
|
-
</div>
|
|
367
|
-
</div>
|
|
368
|
-
</div>
|
|
369
|
-
|
|
370
|
-
<div id="svg">
|
|
371
|
-
<fig-spinner></fig-spinner>
|
|
372
|
-
</div>
|
|
373
|
-
|
|
374
|
-
<script type="module">
|
|
375
|
-
let options = {
|
|
376
|
-
'default': {
|
|
377
|
-
// Tracing
|
|
378
|
-
corsenabled: false,
|
|
379
|
-
ltres: 1,
|
|
380
|
-
qtres: 1,
|
|
381
|
-
pathomit: 8,
|
|
382
|
-
rightangleenhance: true,
|
|
383
|
-
|
|
384
|
-
// Color quantization
|
|
385
|
-
colorsampling: 2,
|
|
386
|
-
numberofcolors: 16,
|
|
387
|
-
mincolorratio: 0,
|
|
388
|
-
colorquantcycles: 3,
|
|
389
|
-
|
|
390
|
-
// Layering method
|
|
391
|
-
layering: 0,
|
|
392
|
-
|
|
393
|
-
// SVG rendering
|
|
394
|
-
strokewidth: 1,
|
|
395
|
-
linefilter: false,
|
|
396
|
-
scale: 1,
|
|
397
|
-
roundcoords: 1,
|
|
398
|
-
viewbox: true,
|
|
399
|
-
desc: false,
|
|
400
|
-
lcpr: 0,
|
|
401
|
-
qcpr: 0,
|
|
402
|
-
|
|
403
|
-
// Blur
|
|
404
|
-
blurradius: 0,
|
|
405
|
-
blurdelta: 20
|
|
406
|
-
},
|
|
407
|
-
'posterized1': { colorsampling: 0, numberofcolors: 2 },
|
|
408
|
-
'posterized2': { numberofcolors: 4, blurradius: 5 },
|
|
409
|
-
'curvy': { ltres: 0.01, linefilter: true, rightangleenhance: false },
|
|
410
|
-
'sharp': { qtres: 0.01, linefilter: false },
|
|
411
|
-
'detailed': { pathomit: 0, roundcoords: 2, ltres: 0.5, qtres: 0.5, numberofcolors: 64 },
|
|
412
|
-
'smoothed': { blurradius: 5, blurdelta: 64 },
|
|
413
|
-
'grayscale': { colorsampling: 0, colorquantcycles: 1, numberofcolors: 7 },
|
|
414
|
-
'fixedpalette': { colorsampling: 0, colorquantcycles: 1, numberofcolors: 27 },
|
|
415
|
-
'randomsampling1': { colorsampling: 1, numberofcolors: 8 },
|
|
416
|
-
'randomsampling2': { colorsampling: 1, numberofcolors: 64 },
|
|
417
|
-
'artistic1': { colorsampling: 0, colorquantcycles: 1, pathomit: 0, blurradius: 5, blurdelta: 64, ltres: 0.01, linefilter: true, numberofcolors: 16, strokewidth: 2 },
|
|
418
|
-
'artistic2': { qtres: 0.01, colorsampling: 0, colorquantcycles: 1, numberofcolors: 4, strokewidth: 0 },
|
|
419
|
-
'artistic3': { qtres: 10, ltres: 10, numberofcolors: 8 },
|
|
420
|
-
'artistic4': { qtres: 10, ltres: 10, numberofcolors: 64, blurradius: 5, blurdelta: 256, strokewidth: 2 },
|
|
421
|
-
'posterized3': {
|
|
422
|
-
ltres: 1, qtres: 1, pathomit: 20, rightangleenhance: true, colorsampling: 0, numberofcolors: 3,
|
|
423
|
-
mincolorratio: 0, colorquantcycles: 3, blurradius: 3, blurdelta: 20, strokewidth: 0, linefilter: false,
|
|
424
|
-
roundcoords: 1, pal: [{ r: 0, g: 0, b: 100, a: 255 }, { r: 255, g: 255, b: 255, a: 255 }]
|
|
425
|
-
}
|
|
426
|
-
}
|
|
427
|
-
|
|
428
|
-
// Import imagetracerjs
|
|
429
|
-
import ImageTracer from "https://esm.sh/imagetracerjs";
|
|
430
|
-
|
|
431
|
-
let figImage = document.querySelector("fig-image");
|
|
432
|
-
let currentImageBlob = null;
|
|
433
|
-
let currentOptions = { ...options.default };
|
|
434
|
-
|
|
435
|
-
// Function to update current options from form controls
|
|
436
|
-
function updateCurrentOptions() {
|
|
437
|
-
// Get all form controls - now they are fig.js components
|
|
438
|
-
const sliders = document.querySelectorAll('fig-slider');
|
|
439
|
-
const checkboxes = document.querySelectorAll('fig-checkbox');
|
|
440
|
-
|
|
441
|
-
// Handle sliders
|
|
442
|
-
sliders.forEach(slider => {
|
|
443
|
-
const name = slider.getAttribute('name');
|
|
444
|
-
if (name && currentOptions.hasOwnProperty(name)) {
|
|
445
|
-
currentOptions[name] = parseFloat(slider.value);
|
|
446
|
-
}
|
|
447
|
-
});
|
|
448
|
-
|
|
449
|
-
// Handle checkboxes
|
|
450
|
-
checkboxes.forEach(checkbox => {
|
|
451
|
-
const name = checkbox.getAttribute('name');
|
|
452
|
-
if (name && currentOptions.hasOwnProperty(name)) {
|
|
453
|
-
currentOptions[name] = checkbox.input.checked;
|
|
454
|
-
}
|
|
455
|
-
});
|
|
456
|
-
}
|
|
457
|
-
|
|
458
|
-
// Function to update form controls from current options
|
|
459
|
-
function updateFormControlsFromOptions() {
|
|
460
|
-
const sliders = document.querySelectorAll('fig-slider');
|
|
461
|
-
const checkboxes = document.querySelectorAll('fig-checkbox');
|
|
462
|
-
|
|
463
|
-
// Handle sliders
|
|
464
|
-
sliders.forEach(slider => {
|
|
465
|
-
const name = slider.getAttribute('name');
|
|
466
|
-
if (name && currentOptions.hasOwnProperty(name)) {
|
|
467
|
-
slider.setAttribute('value', currentOptions[name]);
|
|
468
|
-
}
|
|
469
|
-
});
|
|
470
|
-
|
|
471
|
-
// Handle checkboxes
|
|
472
|
-
checkboxes.forEach(checkbox => {
|
|
473
|
-
const name = checkbox.getAttribute('name');
|
|
474
|
-
if (name && currentOptions.hasOwnProperty(name)) {
|
|
475
|
-
if (currentOptions[name]) {
|
|
476
|
-
checkbox.setAttribute('checked', 'true');
|
|
477
|
-
} else {
|
|
478
|
-
checkbox.removeAttribute('checked');
|
|
479
|
-
}
|
|
480
|
-
}
|
|
481
|
-
});
|
|
482
|
-
|
|
483
|
-
updateValueDisplays();
|
|
484
|
-
}
|
|
485
|
-
|
|
486
|
-
// Function to apply a preset
|
|
487
|
-
function applyPreset(presetName) {
|
|
488
|
-
if (!options[presetName]) return;
|
|
489
|
-
|
|
490
|
-
// Reset to default first
|
|
491
|
-
currentOptions = { ...options.default };
|
|
492
|
-
|
|
493
|
-
// Apply preset values
|
|
494
|
-
const preset = options[presetName];
|
|
495
|
-
Object.assign(currentOptions, preset);
|
|
496
|
-
|
|
497
|
-
// Update form controls to reflect new values
|
|
498
|
-
updateFormControlsFromOptions();
|
|
499
|
-
|
|
500
|
-
// Update the preset dropdown
|
|
501
|
-
document.getElementById('preset').setAttribute('value', presetName);
|
|
502
|
-
|
|
503
|
-
// Perform tracing with new options
|
|
504
|
-
performTracing();
|
|
505
|
-
}
|
|
506
|
-
|
|
507
|
-
// Function to update value displays
|
|
508
|
-
function updateValueDisplays() {
|
|
509
|
-
const sliders = document.querySelectorAll('fig-slider');
|
|
510
|
-
sliders.forEach(slider => {
|
|
511
|
-
const valueDisplay = document.getElementById(slider.id + '-value');
|
|
512
|
-
if (valueDisplay) {
|
|
513
|
-
valueDisplay.textContent = slider.value;
|
|
514
|
-
}
|
|
515
|
-
});
|
|
516
|
-
}
|
|
517
|
-
|
|
518
|
-
// Function to perform tracing
|
|
519
|
-
function performTracing() {
|
|
520
|
-
if (!currentImageBlob) return;
|
|
521
|
-
|
|
522
|
-
// Clear existing SVG
|
|
523
|
-
document.getElementById('svg').innerHTML = '';
|
|
524
|
-
|
|
525
|
-
let appendImg = function (svgstr) {
|
|
526
|
-
console.log('SVG generated, updating display');
|
|
527
|
-
document.getElementById('svg').innerHTML = svgstr;
|
|
528
|
-
};
|
|
529
|
-
|
|
530
|
-
console.log('Tracing with options:', currentOptions);
|
|
531
|
-
ImageTracer.imageToSVG(currentImageBlob, appendImg, currentOptions);
|
|
532
|
-
}
|
|
533
|
-
|
|
534
|
-
// Set up event listeners for all controls
|
|
535
|
-
function setupControlListeners() {
|
|
536
|
-
const sliders = document.querySelectorAll('fig-slider');
|
|
537
|
-
const checkboxes = document.querySelectorAll('fig-checkbox');
|
|
538
|
-
|
|
539
|
-
// Handle slider events
|
|
540
|
-
sliders.forEach(slider => {
|
|
541
|
-
slider.addEventListener('input', (e) => {
|
|
542
|
-
updateValueDisplays();
|
|
543
|
-
updateCurrentOptions();
|
|
544
|
-
|
|
545
|
-
// Debounce the tracing to avoid too many calls
|
|
546
|
-
clearTimeout(slider.tracingTimeout);
|
|
547
|
-
slider.tracingTimeout = setTimeout(performTracing, 300);
|
|
548
|
-
});
|
|
549
|
-
});
|
|
550
|
-
|
|
551
|
-
// Handle checkbox events
|
|
552
|
-
checkboxes.forEach(checkbox => {
|
|
553
|
-
checkbox.addEventListener('change', (e) => {
|
|
554
|
-
updateCurrentOptions();
|
|
555
|
-
|
|
556
|
-
// Debounce the tracing to avoid too many calls
|
|
557
|
-
clearTimeout(checkbox.tracingTimeout);
|
|
558
|
-
checkbox.tracingTimeout = setTimeout(performTracing, 300);
|
|
559
|
-
});
|
|
560
|
-
});
|
|
561
|
-
|
|
562
|
-
// Set up preset dropdown listener
|
|
563
|
-
const presetSelect = document.getElementById('preset');
|
|
564
|
-
presetSelect.addEventListener('input', (e) => {
|
|
565
|
-
const selectedPreset = e.target.value;
|
|
566
|
-
applyPreset(selectedPreset);
|
|
567
|
-
});
|
|
568
|
-
}
|
|
569
|
-
|
|
570
|
-
// Initial setup
|
|
571
|
-
updateValueDisplays();
|
|
572
|
-
setupControlListeners();
|
|
573
|
-
|
|
574
|
-
// Handle image upload
|
|
575
|
-
figImage.addEventListener("change", e => {
|
|
576
|
-
console.log('Image uploaded:', figImage.blob);
|
|
577
|
-
currentImageBlob = figImage.blob;
|
|
578
|
-
updateCurrentOptions();
|
|
579
|
-
performTracing();
|
|
580
|
-
});
|
|
581
|
-
</script>
|
|
582
|
-
</body>
|
|
583
|
-
|
|
584
|
-
</html>
|
package/tsconfig.json
DELETED
|
@@ -1,27 +0,0 @@
|
|
|
1
|
-
{
|
|
2
|
-
"compilerOptions": {
|
|
3
|
-
// Enable latest features
|
|
4
|
-
"lib": ["ESNext", "DOM"],
|
|
5
|
-
"target": "ESNext",
|
|
6
|
-
"module": "ESNext",
|
|
7
|
-
"moduleDetection": "force",
|
|
8
|
-
"jsx": "react-jsx",
|
|
9
|
-
"allowJs": true,
|
|
10
|
-
|
|
11
|
-
// Bundler mode
|
|
12
|
-
"moduleResolution": "bundler",
|
|
13
|
-
"allowImportingTsExtensions": true,
|
|
14
|
-
"verbatimModuleSyntax": true,
|
|
15
|
-
"noEmit": true,
|
|
16
|
-
|
|
17
|
-
// Best practices
|
|
18
|
-
"strict": true,
|
|
19
|
-
"skipLibCheck": true,
|
|
20
|
-
"noFallthroughCasesInSwitch": true,
|
|
21
|
-
|
|
22
|
-
// Some stricter flags (disabled by default)
|
|
23
|
-
"noUnusedLocals": false,
|
|
24
|
-
"noUnusedParameters": false,
|
|
25
|
-
"noPropertyAccessFromIndexSignature": false
|
|
26
|
-
}
|
|
27
|
-
}
|