@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
|
@@ -12,188 +12,129 @@
|
|
|
12
12
|
let { store }: Props = $props();
|
|
13
13
|
</script>
|
|
14
14
|
|
|
15
|
-
<div class="
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
<div class="control-row">
|
|
34
|
-
<label for="site-opacity-slider" class="control-label">
|
|
35
|
-
Opacity: <strong>{Math.round(store.opacity * 100)}%</strong>
|
|
36
|
-
</label>
|
|
37
|
-
<input
|
|
38
|
-
id="site-opacity-slider"
|
|
39
|
-
type="range"
|
|
40
|
-
class="form-range"
|
|
41
|
-
min="0"
|
|
42
|
-
max="1"
|
|
43
|
-
step="0.1"
|
|
44
|
-
bind:value={store.opacity}
|
|
45
|
-
/>
|
|
46
|
-
</div>
|
|
47
|
-
|
|
48
|
-
<!-- Site Circle Color -->
|
|
49
|
-
<!-- <div class="control-row">
|
|
50
|
-
<label for="site-color-picker" class="control-label">
|
|
51
|
-
Base Color
|
|
52
|
-
</label>
|
|
53
|
-
<input
|
|
54
|
-
id="site-color-picker"
|
|
55
|
-
type="color"
|
|
56
|
-
class="form-control form-control-color"
|
|
57
|
-
bind:value={store.color}
|
|
58
|
-
/>
|
|
59
|
-
</div> -->
|
|
60
|
-
<!-- Cell Labels Section -->
|
|
61
|
-
<hr class="section-divider" />
|
|
62
|
-
<!-- Show site labels checkbox -->
|
|
63
|
-
<div class="control-row">
|
|
64
|
-
<label for="site-show-labels" class="control-label">
|
|
65
|
-
Show Site Labels
|
|
66
|
-
</label>
|
|
67
|
-
<div class="form-check form-switch">
|
|
68
|
-
<input
|
|
69
|
-
id="site-show-labels"
|
|
70
|
-
type="checkbox"
|
|
71
|
-
class="form-check-input"
|
|
72
|
-
role="switch"
|
|
73
|
-
bind:checked={store.showLabels}
|
|
74
|
-
/>
|
|
75
|
-
</div>
|
|
76
|
-
</div>
|
|
77
|
-
|
|
78
|
-
{#if store.showLabels}
|
|
79
|
-
<!-- Site Label size slider -->
|
|
80
|
-
<div class="control-row">
|
|
81
|
-
<label for="site-label-size-slider" class="control-label">
|
|
82
|
-
Label Size: <strong>{store.labelSize}px</strong>
|
|
83
|
-
</label>
|
|
84
|
-
<input
|
|
85
|
-
id="site-label-size-slider"
|
|
86
|
-
type="range"
|
|
87
|
-
class="form-range"
|
|
88
|
-
min="8"
|
|
89
|
-
max="20"
|
|
90
|
-
step="1"
|
|
91
|
-
bind:value={store.labelSize}
|
|
92
|
-
/>
|
|
15
|
+
<div class="card border-0 shadow-sm rounded-2">
|
|
16
|
+
<div class="card-body bg-light p-3">
|
|
17
|
+
<div class="row align-items-center g-2 mb-3">
|
|
18
|
+
<div class="col-4 text-secondary fw-semibold small text-uppercase">Radius</div>
|
|
19
|
+
<div class="col-3 text-end">
|
|
20
|
+
<span class="badge bg-white text-muted border">{store.size}px</span>
|
|
21
|
+
</div>
|
|
22
|
+
<div class="col-5">
|
|
23
|
+
<input
|
|
24
|
+
id="site-size-slider"
|
|
25
|
+
type="range"
|
|
26
|
+
class="form-range w-100"
|
|
27
|
+
min="2"
|
|
28
|
+
max="10"
|
|
29
|
+
step="1"
|
|
30
|
+
bind:value={store.size}
|
|
31
|
+
/>
|
|
32
|
+
</div>
|
|
93
33
|
</div>
|
|
94
34
|
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
<
|
|
98
|
-
|
|
99
|
-
</
|
|
100
|
-
<
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
35
|
+
<div class="row align-items-center g-2 mb-3">
|
|
36
|
+
<div class="col-4 text-secondary fw-semibold small text-uppercase">Opacity</div>
|
|
37
|
+
<div class="col-3 text-end">
|
|
38
|
+
<span class="badge bg-white text-muted border">{Math.round(store.opacity * 100)}%</span>
|
|
39
|
+
</div>
|
|
40
|
+
<div class="col-5">
|
|
41
|
+
<input
|
|
42
|
+
id="site-opacity-slider"
|
|
43
|
+
type="range"
|
|
44
|
+
class="form-range w-100"
|
|
45
|
+
min="0"
|
|
46
|
+
max="1"
|
|
47
|
+
step="0.1"
|
|
48
|
+
bind:value={store.opacity}
|
|
49
|
+
/>
|
|
50
|
+
</div>
|
|
106
51
|
</div>
|
|
107
52
|
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
<
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
53
|
+
<div class="border-top my-3"></div>
|
|
54
|
+
|
|
55
|
+
<div class="row align-items-center g-2 mb-3">
|
|
56
|
+
<div class="col-4 text-secondary fw-semibold small text-uppercase">Show Site Labels</div>
|
|
57
|
+
<div class="col-3"></div>
|
|
58
|
+
<div class="col-5">
|
|
59
|
+
<div class="form-check form-switch m-0 d-flex align-items-center justify-content-end">
|
|
60
|
+
<input
|
|
61
|
+
id="site-show-labels"
|
|
62
|
+
type="checkbox"
|
|
63
|
+
class="form-check-input"
|
|
64
|
+
role="switch"
|
|
65
|
+
bind:checked={store.showLabels}
|
|
66
|
+
/>
|
|
67
|
+
</div>
|
|
68
|
+
</div>
|
|
122
69
|
</div>
|
|
123
70
|
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
|
|
133
|
-
|
|
134
|
-
|
|
135
|
-
|
|
136
|
-
|
|
137
|
-
|
|
138
|
-
|
|
139
|
-
|
|
140
|
-
|
|
141
|
-
|
|
71
|
+
{#if store.showLabels}
|
|
72
|
+
<div class="row align-items-center g-2 mb-3">
|
|
73
|
+
<div class="col-4 text-secondary fw-semibold small text-uppercase">Label Size</div>
|
|
74
|
+
<div class="col-3 text-end">
|
|
75
|
+
<span class="badge bg-white text-muted border">{store.labelSize}px</span>
|
|
76
|
+
</div>
|
|
77
|
+
<div class="col-5">
|
|
78
|
+
<input
|
|
79
|
+
id="site-label-size-slider"
|
|
80
|
+
type="range"
|
|
81
|
+
class="form-range w-100"
|
|
82
|
+
min="8"
|
|
83
|
+
max="20"
|
|
84
|
+
step="1"
|
|
85
|
+
bind:value={store.labelSize}
|
|
86
|
+
/>
|
|
87
|
+
</div>
|
|
88
|
+
</div>
|
|
89
|
+
|
|
90
|
+
<div class="row align-items-center g-2 mb-3">
|
|
91
|
+
<div class="col-4 text-secondary fw-semibold small text-uppercase">Label Color</div>
|
|
92
|
+
<div class="col-3"></div>
|
|
93
|
+
<div class="col-5 d-flex justify-content-end">
|
|
94
|
+
<input
|
|
95
|
+
id="site-label-color-picker"
|
|
96
|
+
type="color"
|
|
97
|
+
class="form-control form-control-color"
|
|
98
|
+
bind:value={store.labelColor}
|
|
99
|
+
/>
|
|
100
|
+
</div>
|
|
101
|
+
</div>
|
|
102
|
+
|
|
103
|
+
<div class="row align-items-center g-2 mb-3">
|
|
104
|
+
<div class="col-4 text-secondary fw-semibold small text-uppercase">Label Offset</div>
|
|
105
|
+
<div class="col-3 text-end">
|
|
106
|
+
<span class="badge bg-white text-muted border">{store.labelOffset.toFixed(1)}</span>
|
|
107
|
+
</div>
|
|
108
|
+
<div class="col-5">
|
|
109
|
+
<input
|
|
110
|
+
id="site-label-offset-slider"
|
|
111
|
+
type="range"
|
|
112
|
+
class="form-range w-100"
|
|
113
|
+
min="-6"
|
|
114
|
+
max="6"
|
|
115
|
+
step="0.1"
|
|
116
|
+
bind:value={store.labelOffset}
|
|
117
|
+
/>
|
|
118
|
+
</div>
|
|
119
|
+
</div>
|
|
120
|
+
|
|
121
|
+
<div class="row align-items-center g-2">
|
|
122
|
+
<div class="col-4 text-secondary fw-semibold small text-uppercase">Label Field</div>
|
|
123
|
+
<div class="col-3"></div>
|
|
124
|
+
<div class="col-5">
|
|
125
|
+
<select
|
|
126
|
+
id="site-label-property-select"
|
|
127
|
+
class="form-select form-select-sm w-100"
|
|
128
|
+
bind:value={store.labelProperty}
|
|
129
|
+
>
|
|
130
|
+
<option value="name">Name</option>
|
|
131
|
+
<option value="id">ID</option>
|
|
132
|
+
<option value="provider">Provider</option>
|
|
133
|
+
<option value="technology">Technology</option>
|
|
134
|
+
<option value="featureGroup">Feature Group</option>
|
|
135
|
+
</select>
|
|
136
|
+
</div>
|
|
137
|
+
</div>
|
|
138
|
+
{/if}
|
|
139
|
+
</div>
|
|
142
140
|
</div>
|
|
143
|
-
|
|
144
|
-
<style>
|
|
145
|
-
.settings-panel {
|
|
146
|
-
width: 100%;
|
|
147
|
-
padding: 0.75rem;
|
|
148
|
-
border: 1px solid rgba(0, 0, 0, 0.1);
|
|
149
|
-
border-radius: 0.375rem;
|
|
150
|
-
background-color: rgba(255, 255, 255, 0.02);
|
|
151
|
-
}
|
|
152
|
-
|
|
153
|
-
.control-row {
|
|
154
|
-
display: flex;
|
|
155
|
-
align-items: center;
|
|
156
|
-
justify-content: space-between;
|
|
157
|
-
gap: 0.75rem;
|
|
158
|
-
margin-bottom: 0.875rem;
|
|
159
|
-
}
|
|
160
|
-
|
|
161
|
-
.control-row:last-child {
|
|
162
|
-
margin-bottom: 0;
|
|
163
|
-
}
|
|
164
|
-
|
|
165
|
-
.control-label {
|
|
166
|
-
font-size: 0.8125rem;
|
|
167
|
-
font-weight: 500;
|
|
168
|
-
margin: 0;
|
|
169
|
-
white-space: nowrap;
|
|
170
|
-
flex-shrink: 0;
|
|
171
|
-
min-width: 110px;
|
|
172
|
-
}
|
|
173
|
-
|
|
174
|
-
.form-range,
|
|
175
|
-
.form-select {
|
|
176
|
-
width: 140px;
|
|
177
|
-
min-width: 140px;
|
|
178
|
-
max-width: 140px;
|
|
179
|
-
flex: 0 0 140px;
|
|
180
|
-
}
|
|
181
|
-
|
|
182
|
-
.form-control-color {
|
|
183
|
-
width: 45px;
|
|
184
|
-
height: 28px;
|
|
185
|
-
padding: 2px;
|
|
186
|
-
border-radius: 4px;
|
|
187
|
-
flex-shrink: 0;
|
|
188
|
-
margin-right: auto;
|
|
189
|
-
}
|
|
190
|
-
|
|
191
|
-
.form-check {
|
|
192
|
-
margin: 0;
|
|
193
|
-
margin-right: auto;
|
|
194
|
-
}
|
|
195
|
-
|
|
196
|
-
.form-switch .form-check-input {
|
|
197
|
-
cursor: pointer;
|
|
198
|
-
}
|
|
199
|
-
</style>
|