svg-path-simplify 0.3.0 → 0.3.4
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/README.md +3 -1
- package/dist/svg-path-simplify.esm.js +2786 -2764
- package/dist/svg-path-simplify.esm.min.js +5 -7
- package/dist/svg-path-simplify.js +2786 -2764
- package/dist/svg-path-simplify.min.js +5 -7
- package/dist/svg-path-simplify.pathdata.esm.js +31 -2
- package/dist/svg-path-simplify.pathdata.esm.min.js +5 -5
- package/index.html +209 -158
- package/package.json +1 -1
- package/src/detect_input.js +30 -3
- package/src/pathSimplify-main.js +131 -66
- package/src/poly-fit-curve-schneider.js +266 -175
- package/src/simplify_poly_RDP.js +101 -1
- package/src/simplify_poly_radial_distance.js +85 -2
- package/src/svgii/geometry.js +1 -0
- package/src/svgii/pathData_fromPoly.js +22 -7
- package/src/svgii/pathData_toPolygon.js +122 -230
- package/src/svgii/poly_analyze.js +114 -435
- package/src/svgii/poly_analyze_get_chunks.js +67 -0
- package/src/svgii/poly_normalize.js +51 -0
- package/src/svgii/poly_to_pathdata.js +51 -24
- package/src/svgii/rounding.js +36 -0
- package/src/svgii/svg_cleanup.js +10 -0
package/index.html
CHANGED
|
@@ -24,53 +24,47 @@
|
|
|
24
24
|
<script src="https://cdn.jsdelivr.net/npm/path-data-polyfill@1.0.10/path-data-polyfill.min.js"></script>
|
|
25
25
|
|
|
26
26
|
|
|
27
|
-
|
|
28
|
-
<
|
|
29
|
-
<script src="//localhost/___git/enhance-inputs/enhance-inputs/dist/enhanceInputs.js" defer></script>
|
|
30
|
-
|
|
27
|
+
-->
|
|
28
|
+
<script src="demo/samples.js" defer></script>
|
|
31
29
|
|
|
32
30
|
|
|
33
|
-
-->
|
|
34
31
|
|
|
35
32
|
<!-- UI helpers -->
|
|
36
33
|
|
|
37
|
-
|
|
34
|
+
|
|
38
35
|
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/enhance-inputs@latest/dist/enhanceInputs.min.css">
|
|
39
36
|
<script src="https://cdn.jsdelivr.net/npm/enhance-inputs@latest/dist/enhanceInputs.min.js" defer></script>
|
|
37
|
+
|
|
40
38
|
<!--
|
|
41
|
-
|
|
39
|
+
<link rel="stylesheet" href="//localhost/___git/enhance-inputs/enhance-inputs/dist/enhanceInputs.css">
|
|
40
|
+
<script src="//localhost/___git/enhance-inputs/enhance-inputs/dist/enhanceInputs.js" defer></script>
|
|
42
41
|
|
|
42
|
+
-->
|
|
43
43
|
|
|
44
44
|
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
<script src="https://cdn.jsdelivr.net/npm/uzip@0.20201231.0/UZIP.min.js"></script>
|
|
48
|
-
|
|
49
|
-
|
|
45
|
+
<script src="https://cdn.jsdelivr.net/npm/uzip@0.20201231.0/UZIP.min.js" defer></script>
|
|
50
46
|
|
|
51
47
|
|
|
52
48
|
<script src="demo/lib/elzoomo/elzoomo.js" defer></script>
|
|
53
49
|
|
|
54
|
-
<script src="dist/svg-path-simplify.js" defer></script>
|
|
55
50
|
<!--
|
|
56
51
|
<script src="https://cdn.jsdelivr.net/npm/svg-path-simplify@0.1.2/dist/svg-path-simplify.min.js" defer></script>
|
|
57
52
|
-->
|
|
58
53
|
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
-->
|
|
54
|
+
|
|
55
|
+
|
|
56
|
+
<script src="dist/svg-path-simplify.js" defer></script>
|
|
63
57
|
<script src="demo/app.js" type="module"></script>
|
|
64
58
|
|
|
65
59
|
|
|
66
60
|
<link rel="stylesheet" href="demo/css/app.css">
|
|
67
61
|
|
|
68
|
-
|
|
69
62
|
</head>
|
|
70
63
|
|
|
71
64
|
|
|
72
|
-
<body class="enhance-inputs-init --scrollbar --scroll-content pdd-0 mrg-0"
|
|
73
|
-
data-enhance-inputs='{"storageName":"svgPathSimplify", "getQuery":true, "cacheToStorage":true,"icons":"all"}'
|
|
65
|
+
<body class="enhance-inputs-init --scrollbar --scroll-content pdd-0 mrg-0 enhance-detail-plus"
|
|
66
|
+
data-enhance-inputs='{"storageName":"svgPathSimplify", "getQuery":true, "cacheToStorage":true,"icons":"all"}'
|
|
67
|
+
data-details='{"icon":"plus"}'>
|
|
74
68
|
|
|
75
69
|
<div class="grd-main hgh-100vh grd grd-md-3 grd-ld-5 gap-0">
|
|
76
70
|
<div class="sidebar-wrap scrollbar scroll-content scroll-track">
|
|
@@ -78,23 +72,21 @@
|
|
|
78
72
|
<!--toolbars-->
|
|
79
73
|
<aside class="aside aside-1 hgh-100 aside scrollbar scroll-content-ld scroll-track pdd-1em pos-rlt">
|
|
80
74
|
<p class="txt-cnt --mrg-0-5em --mrg-btt">
|
|
81
|
-
<img class="icn-logo dsp-inl-blc fnt-siz-3em" src="./favicon.svg">
|
|
75
|
+
<img class="icn-logo dsp-inl-blc fnt-siz-3em" width="100" height="100" src="./favicon.svg" alt="svg-path-simplify">
|
|
82
76
|
</p>
|
|
83
77
|
|
|
84
78
|
<h1 class="txt-cnt">Simplify pathdata</h1>
|
|
85
79
|
<p>Enter your SVG pathData or complete file markup or upload SVG files</p>
|
|
86
80
|
|
|
81
|
+
<p class="--btn-neg" data-ui="reset"></p>
|
|
82
|
+
|
|
87
83
|
<p><input type="file" class="dsp-non --btn-neg" id="inputFile" name="svgFile" value="upload"
|
|
88
84
|
data-label="Upload SVG file/s" accept=".svg" data-ignore="true" multiple></p>
|
|
89
85
|
|
|
90
86
|
|
|
91
|
-
<p class="--btn-neg" data-ui="reset"></p>
|
|
92
|
-
|
|
93
|
-
|
|
94
87
|
<p>
|
|
95
|
-
<label>
|
|
88
|
+
<label for="inputSamples" class="sr-only"> Select samples</label>
|
|
96
89
|
<select name="samples" id="inputSamples" data-options="samples"></select>
|
|
97
|
-
</label>
|
|
98
90
|
</p>
|
|
99
91
|
|
|
100
92
|
|
|
@@ -103,183 +95,185 @@
|
|
|
103
95
|
</textarea>
|
|
104
96
|
</label>
|
|
105
97
|
|
|
106
|
-
<
|
|
107
|
-
|
|
108
|
-
<
|
|
109
|
-
|
|
98
|
+
<details open>
|
|
99
|
+
<summary class="h3">SVG input normalization</summary>
|
|
100
|
+
<p>
|
|
101
|
+
<label><input type="checkbox" name="arcToCubic">arcToCubic</label>
|
|
102
|
+
<label><input type="checkbox" name="quadraticToCubic" checked>quadraticToCubic</label>
|
|
110
103
|
|
|
111
|
-
|
|
104
|
+
<!--
|
|
112
105
|
|
|
113
106
|
<label><input type="checkbox" name="removePrologue" checked>removePrologue</label>
|
|
114
107
|
-->
|
|
115
108
|
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
109
|
+
<label><input type="checkbox" name="removeNameSpaced" checked>removeNameSpaced</label>
|
|
110
|
+
<label><input type="checkbox" name="cleanupSVGAtts" checked
|
|
111
|
+
data-info="remove SVG non-essential attributes">cleanupSVGAtts</label>
|
|
119
112
|
|
|
120
|
-
|
|
121
|
-
|
|
113
|
+
<label><input type="checkbox" name="fixHref" checked
|
|
114
|
+
data-info="replaces xlibnk:href with href">fixHref</label>
|
|
122
115
|
|
|
123
116
|
|
|
124
|
-
|
|
117
|
+
<label><input type="checkbox" name="removeHidden" checked>removeHidden</label>
|
|
125
118
|
|
|
126
119
|
|
|
127
|
-
|
|
128
|
-
|
|
120
|
+
<label><input type="checkbox" name="stylesToAttributes"
|
|
121
|
+
data-info="replaces inline styles with SVG atributes and removes obsolete attributes and styles">stylesToAttributes</label>
|
|
129
122
|
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
|
|
123
|
+
<label><input type="checkbox" name="mergePaths">mergePaths</label>
|
|
124
|
+
<label><input type="checkbox" name="shapesToPaths"
|
|
125
|
+
data-info="convert shapes like circles, rects to path elements">shapesToPaths</label>
|
|
133
126
|
|
|
134
|
-
|
|
135
|
-
|
|
136
|
-
|
|
137
|
-
|
|
138
|
-
|
|
127
|
+
<label><input type="checkbox" name="removeDimensions">removeDimensions</label>
|
|
128
|
+
<label><input type="checkbox" name="removeIds">removeIds</label>
|
|
129
|
+
<label><input type="checkbox" name="removeClassNames">removeClassNames</label>
|
|
130
|
+
<label><input type="checkbox" name="omitNamespace"
|
|
131
|
+
data-info="Removes xmlns attribute - only recommended when embedding svg in DOM">omitNamespace</label>
|
|
139
132
|
|
|
133
|
+
</p>
|
|
134
|
+
</details>
|
|
140
135
|
|
|
136
|
+
<details>
|
|
137
|
+
<summary class="h3">SVG/path scaling</summary>
|
|
138
|
+
<p>
|
|
139
|
+
<label>Scale <input type="number" value="1" min="0.00001" max="10000" name="scale"
|
|
140
|
+
step="0.1"></label>
|
|
141
|
+
</p>
|
|
142
|
+
<p>
|
|
143
|
+
<label>ScaleTo <input type="number" value="0" name="scaleTo"></label>
|
|
144
|
+
</p>
|
|
145
|
+
<p>
|
|
146
|
+
<label><input type="checkbox" name="crop" data-info="crops svgs to tight bbox">crop</label>
|
|
147
|
+
<label><input type="checkbox" name="alignToOrigin"
|
|
148
|
+
data-info="aligns path to x/y 0 origin">alignToOrigin</label>
|
|
141
149
|
|
|
142
|
-
|
|
143
|
-
|
|
150
|
+
</p>
|
|
144
151
|
|
|
145
|
-
|
|
146
|
-
<p>
|
|
147
|
-
<label>Scale <input type="number" value="1" min="0.00001" max="10000" name="scale"
|
|
148
|
-
step="0.1"></label>
|
|
149
|
-
</p>
|
|
150
|
-
<p>
|
|
151
|
-
<label>ScaleTo <input type="number" value="0" name="scaleTo"></label>
|
|
152
|
-
</p>
|
|
153
|
-
<p>
|
|
154
|
-
<label><input type="checkbox" name="crop" data-info="crops svgs to tight bbox">crop</label>
|
|
155
|
-
<label><input type="checkbox" name="alignToOrigin"
|
|
156
|
-
data-info="aligns path to x/y 0 origin">alignToOrigin</label>
|
|
157
|
-
|
|
158
|
-
</p>
|
|
152
|
+
</details>
|
|
159
153
|
|
|
160
154
|
|
|
161
155
|
</aside>
|
|
162
156
|
|
|
163
157
|
<aside class="aside aside-2 pdd-1em pdd-top scrollbar scroll-content-ld scroll-track">
|
|
164
158
|
|
|
165
|
-
<
|
|
166
|
-
|
|
167
|
-
<
|
|
168
|
-
|
|
159
|
+
<details open>
|
|
160
|
+
<summary class="h3">Simplification</summary>
|
|
161
|
+
<p>
|
|
162
|
+
<label><input type="checkbox" name="simplifyBezier" checked>simplifyBezier</label>
|
|
163
|
+
<label><input type="checkbox" name="removeZeroLength" checked>removeZeroLength</label>
|
|
169
164
|
|
|
170
|
-
|
|
165
|
+
<label><input type="checkbox" name="refineClosing" checked>refineClosing</label>
|
|
171
166
|
|
|
172
167
|
|
|
173
|
-
|
|
168
|
+
<label><input type="checkbox" name="removeColinear" checked>remove colinear linetos</label>
|
|
174
169
|
|
|
175
|
-
|
|
170
|
+
<label><input type="checkbox" name="flatBezierToLinetos" checked>flat beziers to linetos</label>
|
|
176
171
|
|
|
177
172
|
|
|
178
|
-
|
|
179
|
-
|
|
180
|
-
|
|
173
|
+
<label><input type="checkbox" name="optimizeOrder" checked>optimize path order</label>
|
|
174
|
+
<label><input type="checkbox" name="keepExtremes" checked>keepExtremes</label>
|
|
175
|
+
<label><input type="checkbox" name="keepCorners" checked>keepCorners</label>
|
|
181
176
|
|
|
182
|
-
|
|
183
|
-
|
|
177
|
+
<label><input type="checkbox" name="keepInflections"
|
|
178
|
+
data-info="retain inflections e.g spine of an S shape">keepInflections</label>
|
|
184
179
|
|
|
185
|
-
|
|
180
|
+
<!--
|
|
186
181
|
<label><input type="checkbox" name="extrapolateDominant"
|
|
187
182
|
data-info="extrapolates dominant bezier segment – rather sloppy">extrapolateDominant</label>
|
|
188
183
|
-->
|
|
189
184
|
|
|
190
|
-
|
|
191
|
-
|
|
192
|
-
|
|
185
|
+
<label><input type="checkbox" name="revertToQuadratics"
|
|
186
|
+
data-info="Reverts cubic to quadratic Béziers if applicable" checked>revert
|
|
187
|
+
revertToQuadratics</label>
|
|
193
188
|
|
|
194
|
-
|
|
189
|
+
<!--
|
|
195
190
|
<label><input type="checkbox" name="reverse">try with reversed drawing direction</label>
|
|
196
191
|
|
|
197
192
|
<label><input type="checkbox" name="multipass"
|
|
198
193
|
data-info="takes better simplification – slower">multipass</label>
|
|
199
194
|
-->
|
|
200
195
|
|
|
196
|
+
</p>
|
|
197
|
+
</details>
|
|
201
198
|
|
|
202
199
|
|
|
200
|
+
<details open>
|
|
201
|
+
<summary class="h3">Quality</summary>
|
|
202
|
+
<p>
|
|
203
|
+
<label>tolerance<input type="number" name="tolerance" min="0.1" max="10" step="0.1" value="1"
|
|
204
|
+
data-info="higher tolerance = sloppier approximations – default 1"></label>
|
|
205
|
+
</p>
|
|
206
|
+
|
|
207
|
+
</details>
|
|
208
|
+
|
|
203
209
|
|
|
204
|
-
</p>
|
|
205
|
-
<h3>Advanced simplifications</h3>
|
|
206
|
-
<p>
|
|
207
210
|
|
|
208
|
-
|
|
209
|
-
|
|
211
|
+
<details>
|
|
212
|
+
<summary class="h3">Advanced simplifications</summary>
|
|
213
|
+
<p>
|
|
210
214
|
|
|
211
|
-
|
|
212
|
-
|
|
213
|
-
checked>removeOrphanSubpaths</label>
|
|
214
|
-
<label><input type="checkbox" name="refineExtremes">refineExtremes</label>
|
|
215
|
-
<label><input type="checkbox" name="simplifyCorners">simplifyCorners</label>
|
|
216
|
-
<label><input type="checkbox" name="simplifyRound">simplifyRound</label>
|
|
217
|
-
<label><input type="checkbox" name="addExtremes">addExtremes</label>
|
|
215
|
+
<label><input type="checkbox" name="cubicToArc"
|
|
216
|
+
data-info="Reverts cubic to arcs if applicable">cubicToArc</label>
|
|
218
217
|
|
|
219
|
-
|
|
218
|
+
<label><input type="checkbox" name="removeOrphanSubpaths"
|
|
219
|
+
data-info="remove orphaned M commands not connecting to lines or curve segments"
|
|
220
|
+
checked>removeOrphanSubpaths</label>
|
|
221
|
+
<label><input type="checkbox" name="refineExtremes">refineExtremes</label>
|
|
222
|
+
<label><input type="checkbox" name="simplifyCorners">simplifyCorners</label>
|
|
223
|
+
<label><input type="checkbox" name="simplifyRound">simplifyRound</label>
|
|
224
|
+
<label><input type="checkbox" name="addExtremes">addExtremes</label>
|
|
225
|
+
|
|
226
|
+
<!--
|
|
220
227
|
<label><input type="checkbox" name="redraw"
|
|
221
228
|
data-info="try to redraw messed up paths based on extremes, semiextermes and corners">redraw</label>
|
|
222
229
|
|
|
223
230
|
-->
|
|
224
231
|
|
|
225
232
|
|
|
226
|
-
|
|
227
|
-
|
|
233
|
+
<label class="dsp-debug"><input type="checkbox" name="addSemiExtremes">addSemiExtremes</label>
|
|
234
|
+
<label class="dsp-debug"><input type="checkbox" name="harmonizeCpts">harmonizeCpts</label>
|
|
228
235
|
|
|
236
|
+
</p>
|
|
237
|
+
</details>
|
|
229
238
|
|
|
230
239
|
|
|
231
|
-
|
|
240
|
+
<details>
|
|
241
|
+
<summary class="h3">Path directions</summary>
|
|
242
|
+
<p>
|
|
243
|
+
<label><input type="checkbox" name="reversePath"
|
|
244
|
+
data-info="Reverses path drawing direction">reversePath</label>
|
|
232
245
|
|
|
233
|
-
|
|
234
|
-
|
|
235
|
-
|
|
236
|
-
|
|
246
|
+
<label><input type="checkbox" name="fixDirections"
|
|
247
|
+
data-info="Fixes sub path drawing directions to make fill rules obsolete">fixDirections</label>
|
|
248
|
+
</p>
|
|
249
|
+
</details>
|
|
237
250
|
|
|
238
|
-
|
|
239
|
-
|
|
240
|
-
|
|
251
|
+
<details open>
|
|
252
|
+
<summary class="h3">SVG output settings</summary>
|
|
253
|
+
<p>
|
|
254
|
+
<label><input type="checkbox" name="toRelative" checked>toRelative</label>
|
|
255
|
+
<label><input type="checkbox" name="toShorthands" checked>toShorthands</label>
|
|
256
|
+
<label><input type="checkbox" name="lineToCubic"
|
|
257
|
+
data-info="converts lines to cubics – helpful for morphing animations">lineToCubic</label>
|
|
241
258
|
|
|
242
|
-
|
|
243
|
-
<p>
|
|
244
|
-
<label class="--dsp-debug"><input type="checkbox" name="smoothPoly"
|
|
245
|
-
data-info="Converts a polygon to smooth cubic beziers using the Philip J. Schneider curve fitting algorithm">smoothPoly</label>
|
|
259
|
+
</p>
|
|
246
260
|
|
|
247
|
-
<
|
|
248
|
-
|
|
249
|
-
|
|
250
|
-
|
|
251
|
-
|
|
252
|
-
|
|
253
|
-
|
|
254
|
-
|
|
255
|
-
|
|
256
|
-
|
|
257
|
-
|
|
258
|
-
<h3>SVG settings</h3>
|
|
259
|
-
<p>
|
|
260
|
-
<label><input type="checkbox" name="toRelative" checked>toRelative</label>
|
|
261
|
-
<label><input type="checkbox" name="toShorthands" checked>toShorthands</label>
|
|
262
|
-
<label><input type="checkbox" name="lineToCubic"
|
|
263
|
-
data-info="converts lines to cubics – helpful for morphing animations">lineToCubic</label>
|
|
264
|
-
|
|
265
|
-
</p>
|
|
266
|
-
|
|
267
|
-
<h3>SVG string optimization</h3>
|
|
268
|
-
<p><label><input type="radio" name="minifyD" value="0" checked>minify</label>
|
|
269
|
-
<label><input type="radio" name="minifyD" value="1">verbose</label>
|
|
270
|
-
<label><input type="radio" name="minifyD" value="2">beautify</label>
|
|
271
|
-
</p>
|
|
272
|
-
<p>
|
|
273
|
-
<label><input type="checkbox" name="autoAccuracy"
|
|
274
|
-
data-info="takes an estimated suitable floating point accuracy based on smallest segment"
|
|
275
|
-
checked>autoAccuracy</label>
|
|
276
|
-
</p>
|
|
277
|
-
|
|
278
|
-
<p>
|
|
279
|
-
<label class="wdt-100">decimals <input type="number" name="decimals" min="0" value="1"
|
|
280
|
-
data-info="reduces floating point precision: reduces filesize significantly!"></label>
|
|
281
|
-
</p>
|
|
261
|
+
<p class="h4">SVG string optimization</p>
|
|
262
|
+
<p><label><input type="radio" name="minifyD" value="0" checked>minify</label>
|
|
263
|
+
<label><input type="radio" name="minifyD" value="1">verbose</label>
|
|
264
|
+
<label><input type="radio" name="minifyD" value="2">beautify</label>
|
|
265
|
+
</p>
|
|
266
|
+
<p>
|
|
267
|
+
<label><input type="checkbox" name="autoAccuracy"
|
|
268
|
+
data-info="takes an estimated suitable floating point accuracy based on smallest segment"
|
|
269
|
+
checked>autoAccuracy</label>
|
|
270
|
+
</p>
|
|
282
271
|
|
|
272
|
+
<p>
|
|
273
|
+
<label class="wdt-100">decimals <input type="number" name="decimals" min="0" value="1"
|
|
274
|
+
data-info="reduces floating point precision: reduces filesize significantly!"></label>
|
|
275
|
+
</p>
|
|
276
|
+
</details>
|
|
283
277
|
|
|
284
278
|
<p>
|
|
285
279
|
<label>Output SVG
|
|
@@ -288,15 +282,60 @@
|
|
|
288
282
|
</label>
|
|
289
283
|
</p>
|
|
290
284
|
|
|
291
|
-
<
|
|
292
|
-
<
|
|
293
|
-
|
|
294
|
-
|
|
295
|
-
|
|
296
|
-
|
|
297
|
-
|
|
298
|
-
|
|
299
|
-
|
|
285
|
+
<details>
|
|
286
|
+
<summary class="h3">Polygon</summary>
|
|
287
|
+
<p>
|
|
288
|
+
<label class="--dsp-debug"><input type="checkbox" name="smoothPoly"
|
|
289
|
+
data-info="Converts a polygon to smooth cubic beziers using the Philip J. Schneider curve fitting algorithm">smoothPoly</label>
|
|
290
|
+
|
|
291
|
+
<label class="--dsp-debug"><input type="checkbox" name="toPolygon">toPolygon</label>
|
|
292
|
+
</p>
|
|
293
|
+
|
|
294
|
+
|
|
295
|
+
<p>
|
|
296
|
+
<label>precisionPoly<input type="number" name="precisionPoly" min="0.1" max="100" step="0.1"
|
|
297
|
+
value="1"
|
|
298
|
+
data-info="Precision for polygon approximation – higher values add more vertices"></label>
|
|
299
|
+
</p>
|
|
300
|
+
|
|
301
|
+
|
|
302
|
+
<p class="h4">Polygon simplification</p>
|
|
303
|
+
<p>
|
|
304
|
+
<label class="">simplifyRDP<input type="number" min="0" max="500" step="1" value="0"
|
|
305
|
+
name="simplifyRDP" data-info="reduce vertices via Ramer-Douglas-Peucker"></label>
|
|
306
|
+
</p>
|
|
307
|
+
<p>
|
|
308
|
+
<label class="">simplifyRD<input type="number" min="0" max="500" step="1" value="0"
|
|
309
|
+
name="simplifyRD" data-info="reduce vertices via radial distance"></label>
|
|
310
|
+
</p>
|
|
311
|
+
|
|
312
|
+
|
|
313
|
+
<p>
|
|
314
|
+
<label class=""><input type="radio" name="polyFormat" value="object" checked>object</label>
|
|
315
|
+
<label class=""><input type="radio" name="polyFormat" value="array">array</label>
|
|
316
|
+
<label class=""><input type="radio" name="polyFormat" value="string">string</label>
|
|
317
|
+
</p>
|
|
318
|
+
<p>
|
|
319
|
+
<label>Output Polygon
|
|
320
|
+
<textarea class="outputPoly code" name="polyOut" id="polyOut" data-tools="size copy"
|
|
321
|
+
data-ignore="true" readonly data-file="polygon.txt"></textarea>
|
|
322
|
+
</label>
|
|
323
|
+
</p>
|
|
324
|
+
|
|
325
|
+
</details>
|
|
326
|
+
|
|
327
|
+
<details>
|
|
328
|
+
<summary class="h3">Settings</summary>
|
|
329
|
+
<p>
|
|
330
|
+
<label>Current Settings
|
|
331
|
+
<textarea class="code" name="config" id="textConfig" data-tools="copy" data-ignore="true"
|
|
332
|
+
readonly></textarea>
|
|
333
|
+
</label>
|
|
334
|
+
<label><input type="checkbox" name="omitDefaults"
|
|
335
|
+
data-info="only include settings that are not defaults" checked>omitDefaults</label>
|
|
336
|
+
|
|
337
|
+
</p>
|
|
338
|
+
</details>
|
|
300
339
|
|
|
301
340
|
|
|
302
341
|
</aside>
|
|
@@ -327,13 +366,15 @@
|
|
|
327
366
|
<label><input type="checkbox" name="showMarkers" checked>showMarkers</label>
|
|
328
367
|
|
|
329
368
|
<!-- Share -->
|
|
330
|
-
<a href="#" class="btn
|
|
369
|
+
<a href="#" class="drp-shd btn btn-default btn-download btn-neg" id="shareUrl"
|
|
370
|
+
data-icon="link">Share</a>
|
|
331
371
|
|
|
332
372
|
<!-- codepen -->
|
|
333
373
|
<form action="https://codepen.io/pen/define" method="POST" target="_blank"
|
|
334
374
|
class="form-codepen dsp-inl-blc">
|
|
335
375
|
<input id="inputCodepen" type="hidden" value="" name="data" data-ignore="true">
|
|
336
|
-
<button title="Edit in codepen"
|
|
376
|
+
<button title="Edit in codepen"
|
|
377
|
+
class="drp-shd btn btnCodepen btn-default btn-download btn-neg" type="submit">
|
|
337
378
|
<span class="icn-wrp icn-wrp-codepen icn-wrp-left">
|
|
338
379
|
<svg xmlns="http://www.w3.org/2000/svg" class="icn-svg" viewBox="0 0 24 24"
|
|
339
380
|
fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"
|
|
@@ -346,20 +387,24 @@
|
|
|
346
387
|
</form>
|
|
347
388
|
|
|
348
389
|
<!-- svg editor -->
|
|
349
|
-
<a class="btn lnk-edit btn-download btn-neg" id="linkEdit"
|
|
350
|
-
target="_blank" rel="noopener noreferrer" data-icon="pencil"
|
|
390
|
+
<a class="drp-shd btn lnk-edit btn-default btn-download btn-neg" id="linkEdit"
|
|
391
|
+
title="Edit in svg-path-editor" target="_blank" rel="noopener noreferrer" data-icon="pencil"
|
|
392
|
+
href="">Edit</a>
|
|
351
393
|
|
|
352
394
|
|
|
353
395
|
<!-- copy -->
|
|
354
|
-
<button id="btnCopy" class="btn btn-download btn-neg btn-copy"
|
|
396
|
+
<button id="btnCopy" class="drp-shd btn btn-default btn-download btn-neg btn-copy"
|
|
397
|
+
data-icon="copy">Copy</button>
|
|
355
398
|
|
|
356
399
|
<!-- save -->
|
|
357
|
-
<a href="#" data-name=""
|
|
400
|
+
<a href="#" data-name=""
|
|
401
|
+
class="drp-shd btn btn-default btn-download btn-neg btn-download-single" id="btnDownload"
|
|
358
402
|
data-icon="arrow-down-tray" download="simplified.svg"> Download SVG</a>
|
|
359
403
|
|
|
360
404
|
|
|
361
405
|
<!-- save multi -->
|
|
362
|
-
<a href="#" data-name=""
|
|
406
|
+
<a href="#" data-name=""
|
|
407
|
+
class="drp-shd btn btn-default btn-download btn-download-multi btn-neg processing"
|
|
363
408
|
id="btnDownloadZip" data-icon="arrow-down-tray" download="simplified.zip"> Download Zip</a>
|
|
364
409
|
|
|
365
410
|
|
|
@@ -421,6 +466,12 @@
|
|
|
421
466
|
|
|
422
467
|
|
|
423
468
|
|
|
469
|
+
|
|
470
|
+
|
|
471
|
+
<!--
|
|
472
|
+
<div id="spriteMap"></div>
|
|
473
|
+
-->
|
|
474
|
+
|
|
424
475
|
</body>
|
|
425
476
|
|
|
426
477
|
</html>
|
package/package.json
CHANGED
package/src/detect_input.js
CHANGED
|
@@ -9,9 +9,37 @@ export function detectInputType(input) {
|
|
|
9
9
|
if (input instanceof Blob) return "blob";
|
|
10
10
|
*/
|
|
11
11
|
if (Array.isArray(input)) {
|
|
12
|
-
|
|
12
|
+
|
|
13
|
+
// nested array
|
|
14
|
+
if (Array.isArray(input[0])) {
|
|
15
|
+
//console.log('is array', input[0], input[0][0])
|
|
16
|
+
|
|
17
|
+
if(input[0].length===2){
|
|
18
|
+
//console.log('is single poly value array')
|
|
19
|
+
return 'polyArray'
|
|
20
|
+
}
|
|
21
|
+
|
|
22
|
+
else if (Array.isArray(input[0][0]) && input[0][0].length === 2 ) {
|
|
23
|
+
//console.log('is complex poly point value array', input[0][0])
|
|
24
|
+
return 'polyComplexArray'
|
|
25
|
+
}
|
|
26
|
+
else if (input[0][0].x !== undefined && input[0][0].y !== undefined) {
|
|
27
|
+
//console.log('is nested point object array')
|
|
28
|
+
return 'polyComplexObjectArray'
|
|
29
|
+
}
|
|
30
|
+
}
|
|
31
|
+
|
|
32
|
+
// is point array
|
|
33
|
+
else if (input[0].x!==undefined && input[0].y!==undefined) {
|
|
34
|
+
//console.log('is nested point object array')
|
|
35
|
+
return 'polyObjectArray'
|
|
36
|
+
}
|
|
37
|
+
|
|
38
|
+
// path data array
|
|
39
|
+
else if (input[0]?.type && input[0]?.values
|
|
13
40
|
) {
|
|
14
|
-
return "pathData"
|
|
41
|
+
return "pathData"
|
|
42
|
+
|
|
15
43
|
}
|
|
16
44
|
//console.log(input[0], typeof input[0]);
|
|
17
45
|
return "array";
|
|
@@ -23,7 +51,6 @@ export function detectInputType(input) {
|
|
|
23
51
|
let isPathData = input.startsWith('M') || input.startsWith('m');
|
|
24
52
|
let isPolyString = !isNaN(input.substring(0, 1)) && !isNaN(input.substring(input.length - 1, input.length))
|
|
25
53
|
|
|
26
|
-
//console.log(input.substring(0, 1), input.substring(input.length-1, input.length));
|
|
27
54
|
|
|
28
55
|
if (isSVG) {
|
|
29
56
|
type = 'svgMarkup'
|