@smartnet360/svelte-components 0.0.73 → 0.0.75
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/dist/map-v2/core/providers/MapboxProvider.svelte +29 -0
- package/dist/map-v2/core/providers/MapboxProvider.svelte.d.ts +2 -0
- package/dist/map-v2/shared/controls/FeatureSettingsControl.svelte +55 -142
- package/dist/map-v2/shared/controls/MapControl.svelte +16 -6
- package/dist/map-v2/shared/controls/MapControl.svelte.d.ts +4 -0
- package/dist/map-v2/shared/controls/panels/CellSettingsPanel.svelte +240 -306
- package/dist/map-v2/shared/controls/panels/RepeaterSettingsPanel.svelte +180 -232
- package/dist/map-v2/shared/controls/panels/SiteSettingsPanel.svelte +119 -178
- package/package.json +1 -1
|
@@ -22,321 +22,255 @@
|
|
|
22
22
|
}
|
|
23
23
|
</script>
|
|
24
24
|
|
|
25
|
-
<div class="
|
|
25
|
+
<div class="card border-0 shadow-sm rounded-2">
|
|
26
|
+
<div class="card-body bg-light p-3">
|
|
27
|
+
<div class="row align-items-center g-2 mb-3">
|
|
28
|
+
<div class="col-4 text-secondary fw-semibold small text-uppercase">Base Radius</div>
|
|
29
|
+
<div class="col-3 text-end">
|
|
30
|
+
<span class="badge bg-white text-muted border">{store.baseRadius}m</span>
|
|
31
|
+
</div>
|
|
32
|
+
<div class="col-5">
|
|
33
|
+
<input
|
|
34
|
+
id="cell-radius-slider"
|
|
35
|
+
type="range"
|
|
36
|
+
class="form-range w-100"
|
|
37
|
+
min="100"
|
|
38
|
+
max="2000"
|
|
39
|
+
step="50"
|
|
40
|
+
bind:value={store.baseRadius}
|
|
41
|
+
/>
|
|
42
|
+
</div>
|
|
43
|
+
</div>
|
|
26
44
|
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
45
|
+
<div class="row align-items-center g-2 mb-3">
|
|
46
|
+
<div class="col-4 text-secondary fw-semibold small text-uppercase">Line Width</div>
|
|
47
|
+
<div class="col-3 text-end">
|
|
48
|
+
<span class="badge bg-white text-muted border">{store.lineWidth}px</span>
|
|
49
|
+
</div>
|
|
50
|
+
<div class="col-5">
|
|
51
|
+
<input
|
|
52
|
+
id="cell-line-width-slider"
|
|
53
|
+
type="range"
|
|
54
|
+
class="form-range w-100"
|
|
55
|
+
min="1"
|
|
56
|
+
max="5"
|
|
57
|
+
step="0.5"
|
|
58
|
+
bind:value={store.lineWidth}
|
|
59
|
+
/>
|
|
60
|
+
</div>
|
|
61
|
+
</div>
|
|
42
62
|
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
63
|
+
<div class="row align-items-center g-2 mb-3">
|
|
64
|
+
<div class="col-4 text-secondary fw-semibold small text-uppercase">Fill Opacity</div>
|
|
65
|
+
<div class="col-3 text-end">
|
|
66
|
+
<span class="badge bg-white text-muted border">{Math.round(store.fillOpacity * 100)}%</span>
|
|
67
|
+
</div>
|
|
68
|
+
<div class="col-5">
|
|
69
|
+
<input
|
|
70
|
+
id="cell-opacity-slider"
|
|
71
|
+
type="range"
|
|
72
|
+
class="form-range w-100"
|
|
73
|
+
min="0"
|
|
74
|
+
max="1"
|
|
75
|
+
step="0.1"
|
|
76
|
+
bind:value={store.fillOpacity}
|
|
77
|
+
/>
|
|
78
|
+
</div>
|
|
79
|
+
</div>
|
|
58
80
|
|
|
59
|
-
|
|
60
|
-
<div class="control-row">
|
|
61
|
-
<label for="cell-opacity-slider" class="control-label">
|
|
62
|
-
Fill Opacity: <strong>{Math.round(store.fillOpacity * 100)}%</strong>
|
|
63
|
-
</label>
|
|
64
|
-
<input
|
|
65
|
-
id="cell-opacity-slider"
|
|
66
|
-
type="range"
|
|
67
|
-
class="form-range"
|
|
68
|
-
min="0"
|
|
69
|
-
max="1"
|
|
70
|
-
step="0.1"
|
|
71
|
-
bind:value={store.fillOpacity}
|
|
72
|
-
/>
|
|
73
|
-
</div>
|
|
74
|
-
|
|
75
|
-
<!-- Cell Labels Section -->
|
|
76
|
-
<hr class="section-divider" />
|
|
81
|
+
<div class="border-top my-3"></div>
|
|
77
82
|
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
</div>
|
|
94
|
-
</div>
|
|
95
|
-
|
|
96
|
-
{#if store.showLabels}
|
|
97
|
-
<!-- 4G/5G Primary Label Field -->
|
|
98
|
-
<div class="control-row">
|
|
99
|
-
<label for="label-primary-4g5g" class="control-label">
|
|
100
|
-
4G/5G Primary
|
|
101
|
-
</label>
|
|
102
|
-
<select
|
|
103
|
-
id="label-primary-4g5g"
|
|
104
|
-
class="form-select form-select-sm"
|
|
105
|
-
value={store.primaryLabelField4G5G}
|
|
106
|
-
onchange={(e) => store.setPrimaryLabelField4G5G(e.currentTarget.value as keyof Cell)}
|
|
107
|
-
>
|
|
108
|
-
{#each labelFieldOptions4G5G as field}
|
|
109
|
-
<option value={field}>{getFieldLabel(field)}</option>
|
|
110
|
-
{/each}
|
|
111
|
-
</select>
|
|
112
|
-
</div>
|
|
113
|
-
|
|
114
|
-
<!-- 4G/5G Secondary Label Field -->
|
|
115
|
-
<div class="control-row">
|
|
116
|
-
<label for="label-secondary-4g5g" class="control-label">
|
|
117
|
-
4G/5G Secondary
|
|
118
|
-
</label>
|
|
119
|
-
<select
|
|
120
|
-
id="label-secondary-4g5g"
|
|
121
|
-
class="form-select form-select-sm"
|
|
122
|
-
value={store.secondaryLabelField4G5G}
|
|
123
|
-
onchange={(e) => store.setSecondaryLabelField4G5G(e.currentTarget.value as keyof Cell | 'none')}
|
|
124
|
-
>
|
|
125
|
-
<option value="none">None</option>
|
|
126
|
-
{#each labelFieldOptions4G5G as field}
|
|
127
|
-
<option value={field}>{getFieldLabel(field)}</option>
|
|
128
|
-
{/each}
|
|
129
|
-
</select>
|
|
130
|
-
</div>
|
|
131
|
-
|
|
132
|
-
<!-- 2G Primary Label Field -->
|
|
133
|
-
<div class="control-row">
|
|
134
|
-
<label for="label-primary-2g" class="control-label">
|
|
135
|
-
2G Primary
|
|
136
|
-
</label>
|
|
137
|
-
<select
|
|
138
|
-
id="label-primary-2g"
|
|
139
|
-
class="form-select form-select-sm"
|
|
140
|
-
value={store.primaryLabelField2G}
|
|
141
|
-
onchange={(e) => store.setPrimaryLabelField2G(e.currentTarget.value as keyof Cell)}
|
|
142
|
-
>
|
|
143
|
-
{#each labelFieldOptions2G as field}
|
|
144
|
-
<option value={field}>{getFieldLabel(field)}</option>
|
|
145
|
-
{/each}
|
|
146
|
-
</select>
|
|
147
|
-
</div>
|
|
148
|
-
|
|
149
|
-
<!-- 2G Secondary Label Field -->
|
|
150
|
-
<div class="control-row">
|
|
151
|
-
<label for="label-secondary-2g" class="control-label">
|
|
152
|
-
2G Secondary
|
|
153
|
-
</label>
|
|
154
|
-
<select
|
|
155
|
-
id="label-secondary-2g"
|
|
156
|
-
class="form-select form-select-sm"
|
|
157
|
-
value={store.secondaryLabelField2G}
|
|
158
|
-
onchange={(e) => store.setSecondaryLabelField2G(e.currentTarget.value as keyof Cell | 'none')}
|
|
159
|
-
>
|
|
160
|
-
<option value="none">None</option>
|
|
161
|
-
{#each labelFieldOptions2G as field}
|
|
162
|
-
<option value={field}>{getFieldLabel(field)}</option>
|
|
163
|
-
{/each}
|
|
164
|
-
</select>
|
|
165
|
-
</div>
|
|
166
|
-
|
|
167
|
-
<!-- Label Size -->
|
|
168
|
-
<div class="control-row">
|
|
169
|
-
<label for="label-size-slider" class="control-label">
|
|
170
|
-
Label Size: <strong>{store.labelSize}px</strong>
|
|
171
|
-
</label>
|
|
172
|
-
<input
|
|
173
|
-
id="label-size-slider"
|
|
174
|
-
type="range"
|
|
175
|
-
class="form-range"
|
|
176
|
-
min="8"
|
|
177
|
-
max="20"
|
|
178
|
-
step="1"
|
|
179
|
-
value={store.labelSize}
|
|
180
|
-
oninput={(e) => store.setLabelSize(Number(e.currentTarget.value))}
|
|
181
|
-
/>
|
|
182
|
-
</div>
|
|
183
|
-
|
|
184
|
-
<!-- Label Color -->
|
|
185
|
-
<div class="control-row">
|
|
186
|
-
<label for="label-color-picker" class="control-label">
|
|
187
|
-
Label Color
|
|
188
|
-
</label>
|
|
189
|
-
<input
|
|
190
|
-
id="label-color-picker"
|
|
191
|
-
type="color"
|
|
192
|
-
class="form-control form-control-color"
|
|
193
|
-
value={store.labelColor}
|
|
194
|
-
oninput={(e) => store.setLabelColor(e.currentTarget.value)}
|
|
195
|
-
/>
|
|
196
|
-
</div>
|
|
197
|
-
|
|
198
|
-
<!-- Label Offset -->
|
|
199
|
-
<div class="control-row">
|
|
200
|
-
<label for="label-offset-slider" class="control-label">
|
|
201
|
-
Label Offset: <strong>{store.labelOffset}%</strong>
|
|
202
|
-
</label>
|
|
203
|
-
<input
|
|
204
|
-
id="label-offset-slider"
|
|
205
|
-
type="range"
|
|
206
|
-
class="form-range"
|
|
207
|
-
min="100"
|
|
208
|
-
max="1000"
|
|
209
|
-
step="50"
|
|
210
|
-
value={store.labelOffset}
|
|
211
|
-
oninput={(e) => store.setLabelOffset(Number(e.currentTarget.value))}
|
|
212
|
-
/>
|
|
213
|
-
</div>
|
|
214
|
-
|
|
215
|
-
<!-- Label Halo Color -->
|
|
216
|
-
<div class="control-row">
|
|
217
|
-
<label for="label-halo-color-picker" class="control-label">
|
|
218
|
-
Halo Color
|
|
219
|
-
</label>
|
|
220
|
-
<input
|
|
221
|
-
id="label-halo-color-picker"
|
|
222
|
-
type="color"
|
|
223
|
-
class="form-control form-control-color"
|
|
224
|
-
value={store.labelHaloColor}
|
|
225
|
-
oninput={(e) => store.setLabelHaloColor(e.currentTarget.value)}
|
|
226
|
-
/>
|
|
227
|
-
</div>
|
|
228
|
-
|
|
229
|
-
<!-- Label Halo Width -->
|
|
230
|
-
<div class="control-row">
|
|
231
|
-
<label for="label-halo-width-slider" class="control-label">
|
|
232
|
-
Halo Width: <strong>{store.labelHaloWidth}px</strong>
|
|
233
|
-
</label>
|
|
234
|
-
<input
|
|
235
|
-
id="label-halo-width-slider"
|
|
236
|
-
type="range"
|
|
237
|
-
class="form-range"
|
|
238
|
-
min="0"
|
|
239
|
-
max="3"
|
|
240
|
-
step="0.5"
|
|
241
|
-
value={store.labelHaloWidth}
|
|
242
|
-
oninput={(e) => store.setLabelHaloWidth(Number(e.currentTarget.value))}
|
|
243
|
-
/>
|
|
83
|
+
<div class="row align-items-center g-2 mb-3">
|
|
84
|
+
<div class="col-4 text-secondary fw-semibold small text-uppercase">Show Cell Labels</div>
|
|
85
|
+
<div class="col-3"></div>
|
|
86
|
+
<div class="col-5">
|
|
87
|
+
<div class="form-check form-switch m-0 d-flex align-items-center justify-content-end">
|
|
88
|
+
<input
|
|
89
|
+
id="cell-labels-toggle"
|
|
90
|
+
type="checkbox"
|
|
91
|
+
class="form-check-input"
|
|
92
|
+
role="switch"
|
|
93
|
+
checked={store.showLabels}
|
|
94
|
+
onchange={(e) => store.setShowLabels(e.currentTarget.checked)}
|
|
95
|
+
/>
|
|
96
|
+
</div>
|
|
97
|
+
</div>
|
|
244
98
|
</div>
|
|
245
|
-
|
|
246
|
-
<!-- Min Label Zoom -->
|
|
247
|
-
<div class="control-row">
|
|
248
|
-
<label for="min-label-zoom-slider" class="control-label">
|
|
249
|
-
Min Zoom: <strong>{store.minLabelZoom}</strong>
|
|
250
|
-
</label>
|
|
251
|
-
<input
|
|
252
|
-
id="min-label-zoom-slider"
|
|
253
|
-
type="range"
|
|
254
|
-
class="form-range"
|
|
255
|
-
min="10"
|
|
256
|
-
max="18"
|
|
257
|
-
step="1"
|
|
258
|
-
value={store.minLabelZoom}
|
|
259
|
-
oninput={(e) => store.setMinLabelZoom(Number(e.currentTarget.value))}
|
|
260
|
-
/>
|
|
261
|
-
</div>
|
|
262
|
-
|
|
263
|
-
<!-- Azimuth Tolerance -->
|
|
264
|
-
<!-- <div class="control-row">
|
|
265
|
-
<label for="azimuth-tolerance-slider" class="control-label">
|
|
266
|
-
Azimuth Tolerance: <strong>±{store.azimuthTolerance}°</strong>
|
|
267
|
-
</label>
|
|
268
|
-
<input
|
|
269
|
-
id="azimuth-tolerance-slider"
|
|
270
|
-
type="range"
|
|
271
|
-
class="form-range"
|
|
272
|
-
min="1"
|
|
273
|
-
max="45"
|
|
274
|
-
step="1"
|
|
275
|
-
value={store.azimuthTolerance}
|
|
276
|
-
oninput={(e) => store.setAzimuthTolerance(Number(e.currentTarget.value))}
|
|
277
|
-
/>
|
|
278
|
-
</div> -->
|
|
279
|
-
{/if}
|
|
280
|
-
</div>
|
|
281
99
|
|
|
282
|
-
|
|
283
|
-
|
|
284
|
-
|
|
285
|
-
|
|
286
|
-
|
|
287
|
-
|
|
288
|
-
|
|
289
|
-
|
|
290
|
-
|
|
291
|
-
|
|
292
|
-
|
|
293
|
-
|
|
294
|
-
|
|
100
|
+
{#if store.showLabels}
|
|
101
|
+
<div class="row align-items-center g-2 mb-3">
|
|
102
|
+
<div class="col-4 text-secondary fw-semibold small text-uppercase">4G/5G Primary</div>
|
|
103
|
+
<div class="col-3"></div>
|
|
104
|
+
<div class="col-5">
|
|
105
|
+
<select
|
|
106
|
+
id="label-primary-4g5g"
|
|
107
|
+
class="form-select form-select-sm w-100"
|
|
108
|
+
value={store.primaryLabelField4G5G}
|
|
109
|
+
onchange={(e) => store.setPrimaryLabelField4G5G(e.currentTarget.value as keyof Cell)}
|
|
110
|
+
>
|
|
111
|
+
{#each labelFieldOptions4G5G as field}
|
|
112
|
+
<option value={field}>{getFieldLabel(field)}</option>
|
|
113
|
+
{/each}
|
|
114
|
+
</select>
|
|
115
|
+
</div>
|
|
116
|
+
</div>
|
|
295
117
|
|
|
296
|
-
|
|
297
|
-
|
|
298
|
-
|
|
299
|
-
|
|
300
|
-
|
|
301
|
-
|
|
302
|
-
|
|
118
|
+
<div class="row align-items-center g-2 mb-3">
|
|
119
|
+
<div class="col-4 text-secondary fw-semibold small text-uppercase">4G/5G Secondary</div>
|
|
120
|
+
<div class="col-3"></div>
|
|
121
|
+
<div class="col-5">
|
|
122
|
+
<select
|
|
123
|
+
id="label-secondary-4g5g"
|
|
124
|
+
class="form-select form-select-sm w-100"
|
|
125
|
+
value={store.secondaryLabelField4G5G}
|
|
126
|
+
onchange={(e) => store.setSecondaryLabelField4G5G(e.currentTarget.value as keyof Cell | 'none')}
|
|
127
|
+
>
|
|
128
|
+
<option value="none">None</option>
|
|
129
|
+
{#each labelFieldOptions4G5G as field}
|
|
130
|
+
<option value={field}>{getFieldLabel(field)}</option>
|
|
131
|
+
{/each}
|
|
132
|
+
</select>
|
|
133
|
+
</div>
|
|
134
|
+
</div>
|
|
303
135
|
|
|
304
|
-
|
|
305
|
-
|
|
306
|
-
|
|
136
|
+
<div class="row align-items-center g-2 mb-3">
|
|
137
|
+
<div class="col-4 text-secondary fw-semibold small text-uppercase">2G Primary</div>
|
|
138
|
+
<div class="col-3"></div>
|
|
139
|
+
<div class="col-5">
|
|
140
|
+
<select
|
|
141
|
+
id="label-primary-2g"
|
|
142
|
+
class="form-select form-select-sm w-100"
|
|
143
|
+
value={store.primaryLabelField2G}
|
|
144
|
+
onchange={(e) => store.setPrimaryLabelField2G(e.currentTarget.value as keyof Cell)}
|
|
145
|
+
>
|
|
146
|
+
{#each labelFieldOptions2G as field}
|
|
147
|
+
<option value={field}>{getFieldLabel(field)}</option>
|
|
148
|
+
{/each}
|
|
149
|
+
</select>
|
|
150
|
+
</div>
|
|
151
|
+
</div>
|
|
307
152
|
|
|
308
|
-
|
|
309
|
-
|
|
310
|
-
|
|
311
|
-
|
|
312
|
-
|
|
313
|
-
|
|
314
|
-
|
|
315
|
-
|
|
153
|
+
<div class="row align-items-center g-2 mb-3">
|
|
154
|
+
<div class="col-4 text-secondary fw-semibold small text-uppercase">2G Secondary</div>
|
|
155
|
+
<div class="col-3"></div>
|
|
156
|
+
<div class="col-5">
|
|
157
|
+
<select
|
|
158
|
+
id="label-secondary-2g"
|
|
159
|
+
class="form-select form-select-sm w-100"
|
|
160
|
+
value={store.secondaryLabelField2G}
|
|
161
|
+
onchange={(e) => store.setSecondaryLabelField2G(e.currentTarget.value as keyof Cell | 'none')}
|
|
162
|
+
>
|
|
163
|
+
<option value="none">None</option>
|
|
164
|
+
{#each labelFieldOptions2G as field}
|
|
165
|
+
<option value={field}>{getFieldLabel(field)}</option>
|
|
166
|
+
{/each}
|
|
167
|
+
</select>
|
|
168
|
+
</div>
|
|
169
|
+
</div>
|
|
316
170
|
|
|
317
|
-
|
|
318
|
-
|
|
319
|
-
|
|
320
|
-
|
|
321
|
-
|
|
322
|
-
|
|
323
|
-
|
|
324
|
-
|
|
325
|
-
|
|
326
|
-
|
|
327
|
-
|
|
328
|
-
|
|
329
|
-
|
|
330
|
-
|
|
331
|
-
|
|
332
|
-
|
|
171
|
+
<div class="row align-items-center g-2 mb-3">
|
|
172
|
+
<div class="col-4 text-secondary fw-semibold small text-uppercase">Label Size</div>
|
|
173
|
+
<div class="col-3 text-end">
|
|
174
|
+
<span class="badge bg-white text-muted border">{store.labelSize}px</span>
|
|
175
|
+
</div>
|
|
176
|
+
<div class="col-5">
|
|
177
|
+
<input
|
|
178
|
+
id="label-size-slider"
|
|
179
|
+
type="range"
|
|
180
|
+
class="form-range w-100"
|
|
181
|
+
min="8"
|
|
182
|
+
max="20"
|
|
183
|
+
step="1"
|
|
184
|
+
value={store.labelSize}
|
|
185
|
+
oninput={(e) => store.setLabelSize(Number(e.currentTarget.value))}
|
|
186
|
+
/>
|
|
187
|
+
</div>
|
|
188
|
+
</div>
|
|
333
189
|
|
|
334
|
-
|
|
335
|
-
|
|
336
|
-
|
|
337
|
-
|
|
190
|
+
<div class="row align-items-center g-2 mb-3">
|
|
191
|
+
<div class="col-4 text-secondary fw-semibold small text-uppercase">Label Color</div>
|
|
192
|
+
<div class="col-3"></div>
|
|
193
|
+
<div class="col-5 d-flex justify-content-end">
|
|
194
|
+
<input
|
|
195
|
+
id="label-color-picker"
|
|
196
|
+
type="color"
|
|
197
|
+
class="form-control form-control-color"
|
|
198
|
+
value={store.labelColor}
|
|
199
|
+
oninput={(e) => store.setLabelColor(e.currentTarget.value)}
|
|
200
|
+
/>
|
|
201
|
+
</div>
|
|
202
|
+
</div>
|
|
338
203
|
|
|
339
|
-
|
|
340
|
-
|
|
341
|
-
|
|
342
|
-
|
|
204
|
+
<div class="row align-items-center g-2 mb-3">
|
|
205
|
+
<div class="col-4 text-secondary fw-semibold small text-uppercase">Label Offset</div>
|
|
206
|
+
<div class="col-3 text-end">
|
|
207
|
+
<span class="badge bg-white text-muted border">{store.labelOffset}%</span>
|
|
208
|
+
</div>
|
|
209
|
+
<div class="col-5">
|
|
210
|
+
<input
|
|
211
|
+
id="label-offset-slider"
|
|
212
|
+
type="range"
|
|
213
|
+
class="form-range w-100"
|
|
214
|
+
min="100"
|
|
215
|
+
max="1000"
|
|
216
|
+
step="50"
|
|
217
|
+
value={store.labelOffset}
|
|
218
|
+
oninput={(e) => store.setLabelOffset(Number(e.currentTarget.value))}
|
|
219
|
+
/>
|
|
220
|
+
</div>
|
|
221
|
+
</div>
|
|
222
|
+
|
|
223
|
+
<div class="row align-items-center g-2 mb-3">
|
|
224
|
+
<div class="col-4 text-secondary fw-semibold small text-uppercase">Halo Color</div>
|
|
225
|
+
<div class="col-3"></div>
|
|
226
|
+
<div class="col-5 d-flex justify-content-end">
|
|
227
|
+
<input
|
|
228
|
+
id="label-halo-color-picker"
|
|
229
|
+
type="color"
|
|
230
|
+
class="form-control form-control-color"
|
|
231
|
+
value={store.labelHaloColor}
|
|
232
|
+
oninput={(e) => store.setLabelHaloColor(e.currentTarget.value)}
|
|
233
|
+
/>
|
|
234
|
+
</div>
|
|
235
|
+
</div>
|
|
236
|
+
|
|
237
|
+
<div class="row align-items-center g-2 mb-3">
|
|
238
|
+
<div class="col-4 text-secondary fw-semibold small text-uppercase">Halo Width</div>
|
|
239
|
+
<div class="col-3 text-end">
|
|
240
|
+
<span class="badge bg-white text-muted border">{store.labelHaloWidth}px</span>
|
|
241
|
+
</div>
|
|
242
|
+
<div class="col-5">
|
|
243
|
+
<input
|
|
244
|
+
id="label-halo-width-slider"
|
|
245
|
+
type="range"
|
|
246
|
+
class="form-range w-100"
|
|
247
|
+
min="0"
|
|
248
|
+
max="3"
|
|
249
|
+
step="0.5"
|
|
250
|
+
value={store.labelHaloWidth}
|
|
251
|
+
oninput={(e) => store.setLabelHaloWidth(Number(e.currentTarget.value))}
|
|
252
|
+
/>
|
|
253
|
+
</div>
|
|
254
|
+
</div>
|
|
255
|
+
|
|
256
|
+
<div class="row align-items-center g-2">
|
|
257
|
+
<div class="col-4 text-secondary fw-semibold small text-uppercase">Min Zoom</div>
|
|
258
|
+
<div class="col-3 text-end">
|
|
259
|
+
<span class="badge bg-white text-muted border">{store.minLabelZoom}</span>
|
|
260
|
+
</div>
|
|
261
|
+
<div class="col-5">
|
|
262
|
+
<input
|
|
263
|
+
id="min-label-zoom-slider"
|
|
264
|
+
type="range"
|
|
265
|
+
class="form-range w-100"
|
|
266
|
+
min="10"
|
|
267
|
+
max="18"
|
|
268
|
+
step="1"
|
|
269
|
+
value={store.minLabelZoom}
|
|
270
|
+
oninput={(e) => store.setMinLabelZoom(Number(e.currentTarget.value))}
|
|
271
|
+
/>
|
|
272
|
+
</div>
|
|
273
|
+
</div>
|
|
274
|
+
{/if}
|
|
275
|
+
</div>
|
|
276
|
+
</div>
|