@smartnet360/svelte-components 0.0.74 → 0.0.76
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/features/cells/layers/CellsLayer.svelte +127 -106
- package/dist/map-v2/features/cells/stores/cellStoreContext.svelte.js +4 -16
- package/dist/map-v2/features/cells/utils/cellGeoJSON.js +2 -0
- package/dist/map-v2/features/repeaters/constants/techBandZOrder.d.ts +4 -17
- package/dist/map-v2/features/repeaters/constants/techBandZOrder.js +17 -34
- package/dist/map-v2/features/repeaters/index.d.ts +1 -1
- package/dist/map-v2/features/repeaters/index.js +1 -1
- package/dist/map-v2/features/repeaters/layers/RepeatersLayer.svelte +114 -98
- package/dist/map-v2/features/repeaters/stores/repeaterStoreContext.svelte.js +4 -17
- package/dist/map-v2/features/repeaters/utils/repeaterGeoJSON.js +24 -10
- package/dist/map-v2/index.d.ts +1 -1
- package/dist/map-v2/index.js +1 -1
- 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 +7 -7
|
@@ -53,242 +53,190 @@
|
|
|
53
53
|
}
|
|
54
54
|
</script>
|
|
55
55
|
|
|
56
|
-
<div class="
|
|
56
|
+
<div class="card border-0 shadow-sm rounded-2">
|
|
57
|
+
<div class="card-body bg-light p-3">
|
|
58
|
+
<div class="row align-items-center g-2 mb-3">
|
|
59
|
+
<div class="col-4 text-secondary fw-semibold small text-uppercase">Base Radius</div>
|
|
60
|
+
<div class="col-3 text-end">
|
|
61
|
+
<span class="badge bg-white text-muted border">{store.baseRadius}m</span>
|
|
62
|
+
</div>
|
|
63
|
+
<div class="col-5">
|
|
64
|
+
<input
|
|
65
|
+
id="repeater-radius-slider"
|
|
66
|
+
type="range"
|
|
67
|
+
class="form-range w-100"
|
|
68
|
+
min="100"
|
|
69
|
+
max="2000"
|
|
70
|
+
step="50"
|
|
71
|
+
value={store.baseRadius}
|
|
72
|
+
oninput={(e) => store.setBaseRadius(Number(e.currentTarget.value))}
|
|
73
|
+
/>
|
|
74
|
+
</div>
|
|
75
|
+
</div>
|
|
57
76
|
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
77
|
+
<div class="row align-items-center g-2 mb-3">
|
|
78
|
+
<div class="col-4 text-secondary fw-semibold small text-uppercase">Line Width</div>
|
|
79
|
+
<div class="col-3 text-end">
|
|
80
|
+
<span class="badge bg-white text-muted border">{store.lineWidth}px</span>
|
|
81
|
+
</div>
|
|
82
|
+
<div class="col-5">
|
|
83
|
+
<input
|
|
84
|
+
id="repeater-line-width-slider"
|
|
85
|
+
type="range"
|
|
86
|
+
class="form-range w-100"
|
|
87
|
+
min="1"
|
|
88
|
+
max="5"
|
|
89
|
+
step="0.5"
|
|
90
|
+
value={store.lineWidth}
|
|
91
|
+
oninput={(e) => store.setLineWidth(Number(e.currentTarget.value))}
|
|
92
|
+
/>
|
|
93
|
+
</div>
|
|
94
|
+
</div>
|
|
74
95
|
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
96
|
+
<div class="row align-items-center g-2 mb-3">
|
|
97
|
+
<div class="col-4 text-secondary fw-semibold small text-uppercase">Fill Opacity</div>
|
|
98
|
+
<div class="col-3 text-end">
|
|
99
|
+
<span class="badge bg-white text-muted border">{Math.round(store.fillOpacity * 100)}%</span>
|
|
100
|
+
</div>
|
|
101
|
+
<div class="col-5">
|
|
102
|
+
<input
|
|
103
|
+
id="repeater-opacity-slider"
|
|
104
|
+
type="range"
|
|
105
|
+
class="form-range w-100"
|
|
106
|
+
min="0"
|
|
107
|
+
max="1"
|
|
108
|
+
step="0.1"
|
|
109
|
+
value={store.fillOpacity}
|
|
110
|
+
oninput={(e) => store.setFillOpacity(Number(e.currentTarget.value))}
|
|
111
|
+
/>
|
|
112
|
+
</div>
|
|
113
|
+
</div>
|
|
91
114
|
|
|
92
|
-
|
|
93
|
-
<div class="control-row">
|
|
94
|
-
<label for="repeater-opacity-slider" class="control-label">
|
|
95
|
-
Fill Opacity: <strong>{Math.round(store.fillOpacity * 100)}%</strong>
|
|
96
|
-
</label>
|
|
97
|
-
<input
|
|
98
|
-
id="repeater-opacity-slider"
|
|
99
|
-
type="range"
|
|
100
|
-
class="form-range"
|
|
101
|
-
min="0"
|
|
102
|
-
max="1"
|
|
103
|
-
step="0.1"
|
|
104
|
-
value={store.fillOpacity}
|
|
105
|
-
oninput={(e) => store.setFillOpacity(Number(e.currentTarget.value))}
|
|
106
|
-
/>
|
|
107
|
-
</div>
|
|
108
|
-
|
|
109
|
-
<!-- Repeater Labels Section -->
|
|
110
|
-
<hr class="section-divider" />
|
|
115
|
+
<div class="border-top my-3"></div>
|
|
111
116
|
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
|
|
117
|
+
<div class="row align-items-center g-2 mb-3">
|
|
118
|
+
<div class="col-4 text-secondary fw-semibold small text-uppercase">Show Labels</div>
|
|
119
|
+
<div class="col-3"></div>
|
|
120
|
+
<div class="col-5">
|
|
121
|
+
<div class="form-check form-switch m-0 d-flex align-items-center justify-content-end">
|
|
122
|
+
<input
|
|
123
|
+
id="repeater-labels-toggle"
|
|
124
|
+
type="checkbox"
|
|
125
|
+
class="form-check-input"
|
|
126
|
+
role="switch"
|
|
127
|
+
checked={store.showLabels}
|
|
128
|
+
onchange={(e) => store.setShowLabels(e.currentTarget.checked)}
|
|
129
|
+
/>
|
|
130
|
+
</div>
|
|
131
|
+
</div>
|
|
126
132
|
</div>
|
|
133
|
+
|
|
134
|
+
{#if store.showLabels}
|
|
135
|
+
<div class="row align-items-center g-2 mb-3">
|
|
136
|
+
<div class="col-4 text-secondary fw-semibold small text-uppercase">Primary Field</div>
|
|
137
|
+
<div class="col-3"></div>
|
|
138
|
+
<div class="col-5">
|
|
139
|
+
<select
|
|
140
|
+
id="repeater-label-primary"
|
|
141
|
+
class="form-select form-select-sm w-100"
|
|
142
|
+
value={store.primaryLabelField}
|
|
143
|
+
onchange={(e) => store.setPrimaryLabelField(e.currentTarget.value as keyof Repeater)}
|
|
144
|
+
>
|
|
145
|
+
{#each labelFieldOptions as field}
|
|
146
|
+
<option value={field}>{getFieldLabel(field)}</option>
|
|
147
|
+
{/each}
|
|
148
|
+
</select>
|
|
149
|
+
</div>
|
|
150
|
+
</div>
|
|
151
|
+
|
|
152
|
+
<div class="row align-items-center g-2 mb-3">
|
|
153
|
+
<div class="col-4 text-secondary fw-semibold small text-uppercase">Secondary Field</div>
|
|
154
|
+
<div class="col-3"></div>
|
|
155
|
+
<div class="col-5">
|
|
156
|
+
<select
|
|
157
|
+
id="repeater-label-secondary"
|
|
158
|
+
class="form-select form-select-sm w-100"
|
|
159
|
+
value={store.secondaryLabelField}
|
|
160
|
+
onchange={(e) => store.setSecondaryLabelField(e.currentTarget.value as keyof Repeater | 'none')}
|
|
161
|
+
>
|
|
162
|
+
<option value="none">None</option>
|
|
163
|
+
{#each labelFieldOptions as field}
|
|
164
|
+
<option value={field}>{getFieldLabel(field)}</option>
|
|
165
|
+
{/each}
|
|
166
|
+
</select>
|
|
167
|
+
</div>
|
|
168
|
+
</div>
|
|
169
|
+
|
|
170
|
+
<div class="row align-items-center g-2 mb-3">
|
|
171
|
+
<div class="col-4 text-secondary fw-semibold small text-uppercase">Label Size</div>
|
|
172
|
+
<div class="col-3 text-end">
|
|
173
|
+
<span class="badge bg-white text-muted border">{store.labelSize}px</span>
|
|
174
|
+
</div>
|
|
175
|
+
<div class="col-5">
|
|
176
|
+
<input
|
|
177
|
+
id="repeater-label-size-slider"
|
|
178
|
+
type="range"
|
|
179
|
+
class="form-range w-100"
|
|
180
|
+
min="8"
|
|
181
|
+
max="20"
|
|
182
|
+
step="1"
|
|
183
|
+
value={store.labelSize}
|
|
184
|
+
oninput={(e) => store.setLabelSize(Number(e.currentTarget.value))}
|
|
185
|
+
/>
|
|
186
|
+
</div>
|
|
187
|
+
</div>
|
|
188
|
+
|
|
189
|
+
<div class="row align-items-center g-2 mb-3">
|
|
190
|
+
<div class="col-4 text-secondary fw-semibold small text-uppercase">Label Color</div>
|
|
191
|
+
<div class="col-3"></div>
|
|
192
|
+
<div class="col-5 d-flex justify-content-end">
|
|
193
|
+
<input
|
|
194
|
+
id="repeater-label-color-picker"
|
|
195
|
+
type="color"
|
|
196
|
+
class="form-control form-control-color"
|
|
197
|
+
value={store.labelColor}
|
|
198
|
+
oninput={(e) => store.setLabelColor(e.currentTarget.value)}
|
|
199
|
+
/>
|
|
200
|
+
</div>
|
|
201
|
+
</div>
|
|
202
|
+
|
|
203
|
+
<div class="row align-items-center g-2 mb-3">
|
|
204
|
+
<div class="col-4 text-secondary fw-semibold small text-uppercase">Label Offset</div>
|
|
205
|
+
<div class="col-3 text-end">
|
|
206
|
+
<span class="badge bg-white text-muted border">{store.labelOffset}%</span>
|
|
207
|
+
</div>
|
|
208
|
+
<div class="col-5">
|
|
209
|
+
<input
|
|
210
|
+
id="repeater-label-offset-slider"
|
|
211
|
+
type="range"
|
|
212
|
+
class="form-range w-100"
|
|
213
|
+
min="0"
|
|
214
|
+
max="500"
|
|
215
|
+
step="25"
|
|
216
|
+
value={store.labelOffset}
|
|
217
|
+
oninput={(e) => store.setLabelOffset(Number(e.currentTarget.value))}
|
|
218
|
+
/>
|
|
219
|
+
</div>
|
|
220
|
+
</div>
|
|
221
|
+
|
|
222
|
+
<div class="row align-items-center g-2">
|
|
223
|
+
<div class="col-4 text-secondary fw-semibold small text-uppercase">Min Zoom</div>
|
|
224
|
+
<div class="col-3 text-end">
|
|
225
|
+
<span class="badge bg-white text-muted border">{store.minLabelZoom}</span>
|
|
226
|
+
</div>
|
|
227
|
+
<div class="col-5">
|
|
228
|
+
<input
|
|
229
|
+
id="repeater-min-zoom-slider"
|
|
230
|
+
type="range"
|
|
231
|
+
class="form-range w-100"
|
|
232
|
+
min="0"
|
|
233
|
+
max="18"
|
|
234
|
+
step="1"
|
|
235
|
+
value={store.minLabelZoom}
|
|
236
|
+
oninput={(e) => store.setMinLabelZoom(Number(e.currentTarget.value))}
|
|
237
|
+
/>
|
|
238
|
+
</div>
|
|
239
|
+
</div>
|
|
240
|
+
{/if}
|
|
127
241
|
</div>
|
|
128
|
-
|
|
129
|
-
{#if store.showLabels}
|
|
130
|
-
<!-- Primary Label Field -->
|
|
131
|
-
<div class="control-row">
|
|
132
|
-
<label for="repeater-label-primary" class="control-label">
|
|
133
|
-
Primary Field
|
|
134
|
-
</label>
|
|
135
|
-
<select
|
|
136
|
-
id="repeater-label-primary"
|
|
137
|
-
class="form-select form-select-sm"
|
|
138
|
-
value={store.primaryLabelField}
|
|
139
|
-
onchange={(e) => store.setPrimaryLabelField(e.currentTarget.value as keyof Repeater)}
|
|
140
|
-
>
|
|
141
|
-
{#each labelFieldOptions as field}
|
|
142
|
-
<option value={field}>{getFieldLabel(field)}</option>
|
|
143
|
-
{/each}
|
|
144
|
-
</select>
|
|
145
|
-
</div>
|
|
146
|
-
|
|
147
|
-
<!-- Secondary Label Field -->
|
|
148
|
-
<div class="control-row">
|
|
149
|
-
<label for="repeater-label-secondary" class="control-label">
|
|
150
|
-
Secondary Field
|
|
151
|
-
</label>
|
|
152
|
-
<select
|
|
153
|
-
id="repeater-label-secondary"
|
|
154
|
-
class="form-select form-select-sm"
|
|
155
|
-
value={store.secondaryLabelField}
|
|
156
|
-
onchange={(e) => store.setSecondaryLabelField(e.currentTarget.value as keyof Repeater | 'none')}
|
|
157
|
-
>
|
|
158
|
-
<option value="none">None</option>
|
|
159
|
-
{#each labelFieldOptions as field}
|
|
160
|
-
<option value={field}>{getFieldLabel(field)}</option>
|
|
161
|
-
{/each}
|
|
162
|
-
</select>
|
|
163
|
-
</div>
|
|
164
|
-
|
|
165
|
-
<!-- Label Size -->
|
|
166
|
-
<div class="control-row">
|
|
167
|
-
<label for="repeater-label-size-slider" class="control-label">
|
|
168
|
-
Label Size: <strong>{store.labelSize}px</strong>
|
|
169
|
-
</label>
|
|
170
|
-
<input
|
|
171
|
-
id="repeater-label-size-slider"
|
|
172
|
-
type="range"
|
|
173
|
-
class="form-range"
|
|
174
|
-
min="8"
|
|
175
|
-
max="20"
|
|
176
|
-
step="1"
|
|
177
|
-
value={store.labelSize}
|
|
178
|
-
oninput={(e) => store.setLabelSize(Number(e.currentTarget.value))}
|
|
179
|
-
/>
|
|
180
|
-
</div>
|
|
181
|
-
|
|
182
|
-
<!-- Label Color -->
|
|
183
|
-
<div class="control-row">
|
|
184
|
-
<label for="repeater-label-color-picker" class="control-label">
|
|
185
|
-
Label Color
|
|
186
|
-
</label>
|
|
187
|
-
<input
|
|
188
|
-
id="repeater-label-color-picker"
|
|
189
|
-
type="color"
|
|
190
|
-
class="form-control form-control-color"
|
|
191
|
-
value={store.labelColor}
|
|
192
|
-
oninput={(e) => store.setLabelColor(e.currentTarget.value)}
|
|
193
|
-
/>
|
|
194
|
-
</div>
|
|
195
|
-
|
|
196
|
-
<!-- Label Offset -->
|
|
197
|
-
<div class="control-row">
|
|
198
|
-
<label for="repeater-label-offset-slider" class="control-label">
|
|
199
|
-
Label Offset: <strong>{store.labelOffset}%</strong>
|
|
200
|
-
</label>
|
|
201
|
-
<input
|
|
202
|
-
id="repeater-label-offset-slider"
|
|
203
|
-
type="range"
|
|
204
|
-
class="form-range"
|
|
205
|
-
min="0"
|
|
206
|
-
max="500"
|
|
207
|
-
step="25"
|
|
208
|
-
value={store.labelOffset}
|
|
209
|
-
oninput={(e) => store.setLabelOffset(Number(e.currentTarget.value))}
|
|
210
|
-
/>
|
|
211
|
-
</div>
|
|
212
|
-
|
|
213
|
-
<!-- Min Label Zoom -->
|
|
214
|
-
<div class="control-row">
|
|
215
|
-
<label for="repeater-min-zoom-slider" class="control-label">
|
|
216
|
-
Min Zoom: <strong>{store.minLabelZoom}</strong>
|
|
217
|
-
</label>
|
|
218
|
-
<input
|
|
219
|
-
id="repeater-min-zoom-slider"
|
|
220
|
-
type="range"
|
|
221
|
-
class="form-range"
|
|
222
|
-
min="0"
|
|
223
|
-
max="18"
|
|
224
|
-
step="1"
|
|
225
|
-
value={store.minLabelZoom}
|
|
226
|
-
oninput={(e) => store.setMinLabelZoom(Number(e.currentTarget.value))}
|
|
227
|
-
/>
|
|
228
|
-
</div>
|
|
229
|
-
{/if}
|
|
230
242
|
</div>
|
|
231
|
-
|
|
232
|
-
<style>
|
|
233
|
-
.settings-panel {
|
|
234
|
-
width: 100%;
|
|
235
|
-
display: flex;
|
|
236
|
-
flex-direction: column;
|
|
237
|
-
gap: 0.75rem;
|
|
238
|
-
padding: 0.5rem 0;
|
|
239
|
-
}
|
|
240
|
-
|
|
241
|
-
.control-row {
|
|
242
|
-
display: flex;
|
|
243
|
-
align-items: center;
|
|
244
|
-
gap: 0.5rem;
|
|
245
|
-
}
|
|
246
|
-
|
|
247
|
-
.control-label {
|
|
248
|
-
flex: 0 0 auto;
|
|
249
|
-
min-width: 120px;
|
|
250
|
-
font-size: 0.875rem;
|
|
251
|
-
margin: 0;
|
|
252
|
-
}
|
|
253
|
-
|
|
254
|
-
.form-range {
|
|
255
|
-
flex: 1;
|
|
256
|
-
min-width: 140px;
|
|
257
|
-
max-width: 140px;
|
|
258
|
-
}
|
|
259
|
-
|
|
260
|
-
.form-select {
|
|
261
|
-
flex: 1;
|
|
262
|
-
min-width: 140px;
|
|
263
|
-
max-width: 140px;
|
|
264
|
-
font-size: 0.875rem;
|
|
265
|
-
}
|
|
266
|
-
|
|
267
|
-
.form-control-color {
|
|
268
|
-
flex: 0 0 auto;
|
|
269
|
-
width: 40px;
|
|
270
|
-
height: 32px;
|
|
271
|
-
padding: 2px;
|
|
272
|
-
border-radius: 4px;
|
|
273
|
-
cursor: pointer;
|
|
274
|
-
margin-right: auto;
|
|
275
|
-
}
|
|
276
|
-
|
|
277
|
-
.form-check {
|
|
278
|
-
flex: 0 0 auto;
|
|
279
|
-
margin: 0;
|
|
280
|
-
margin-right: auto;
|
|
281
|
-
}
|
|
282
|
-
|
|
283
|
-
.form-check-input {
|
|
284
|
-
cursor: pointer;
|
|
285
|
-
width: 40px;
|
|
286
|
-
height: 20px;
|
|
287
|
-
}
|
|
288
|
-
|
|
289
|
-
.section-divider {
|
|
290
|
-
margin: 0.5rem 0;
|
|
291
|
-
border-color: var(--bs-border-color);
|
|
292
|
-
opacity: 0.5;
|
|
293
|
-
}
|
|
294
|
-
</style>
|