@smartnet360/svelte-components 0.0.96 → 0.0.97
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-v3/features/cells/components/CellSettingsPanel.svelte +74 -4
- package/dist/map-v3/features/cells/layers/CellsLayer.svelte +21 -0
- package/dist/map-v3/features/cells/stores/cell.display.svelte.d.ts +2 -0
- package/dist/map-v3/features/cells/stores/cell.display.svelte.js +7 -0
- package/package.json +1 -1
|
@@ -127,16 +127,86 @@
|
|
|
127
127
|
id="cell-autosize-base-slider"
|
|
128
128
|
type="range"
|
|
129
129
|
class="form-range w-100"
|
|
130
|
-
min="0.
|
|
131
|
-
max="
|
|
130
|
+
min="0.5"
|
|
131
|
+
max="3.0"
|
|
132
132
|
step="0.1"
|
|
133
133
|
bind:value={displayStore.autoSizeBase}
|
|
134
134
|
/>
|
|
135
135
|
</div>
|
|
136
136
|
</div>
|
|
137
|
-
{
|
|
137
|
+
{:else}
|
|
138
|
+
<!-- Density-Based Caps (Manual Mode Only) -->
|
|
139
|
+
<div class="ps-3 border-start border-2 mb-3">
|
|
140
|
+
<!-- Min Cap -->
|
|
141
|
+
<div class="row align-items-center g-2 mb-2">
|
|
142
|
+
<div class="col-7 text-secondary small">Min Size Cap (Density)</div>
|
|
143
|
+
<div class="col-5">
|
|
144
|
+
<div class="form-check form-switch m-0 d-flex align-items-center justify-content-end">
|
|
145
|
+
<input
|
|
146
|
+
id="cell-mincap-toggle"
|
|
147
|
+
type="checkbox"
|
|
148
|
+
class="form-check-input"
|
|
149
|
+
role="switch"
|
|
150
|
+
bind:checked={displayStore.useMinCap}
|
|
151
|
+
/>
|
|
152
|
+
</div>
|
|
153
|
+
</div>
|
|
154
|
+
</div>
|
|
138
155
|
|
|
139
|
-
|
|
156
|
+
<!-- Max Cap -->
|
|
157
|
+
<div class="row align-items-center g-2 mb-2">
|
|
158
|
+
<div class="col-7 text-secondary small">Max Size Cap (Density)</div>
|
|
159
|
+
<div class="col-5">
|
|
160
|
+
<div class="form-check form-switch m-0 d-flex align-items-center justify-content-end">
|
|
161
|
+
<input
|
|
162
|
+
id="cell-maxcap-toggle"
|
|
163
|
+
type="checkbox"
|
|
164
|
+
class="form-check-input"
|
|
165
|
+
role="switch"
|
|
166
|
+
bind:checked={displayStore.useMaxCap}
|
|
167
|
+
/>
|
|
168
|
+
</div>
|
|
169
|
+
</div>
|
|
170
|
+
</div>
|
|
171
|
+
|
|
172
|
+
{#if displayStore.useMinCap || displayStore.useMaxCap}
|
|
173
|
+
<!-- Cap Mode (shares auto-size settings) -->
|
|
174
|
+
<div class="row align-items-center g-2 mb-2 mt-2">
|
|
175
|
+
<div class="col-4 text-secondary small">Cap Mode</div>
|
|
176
|
+
<div class="col-8">
|
|
177
|
+
<select
|
|
178
|
+
class="form-select form-select-sm"
|
|
179
|
+
bind:value={displayStore.autoSizeMode}
|
|
180
|
+
>
|
|
181
|
+
<option value="logarithmic">Logarithmic</option>
|
|
182
|
+
<option value="percentage">Proportional</option>
|
|
183
|
+
<option value="tiered">Tiered</option>
|
|
184
|
+
<option value="hybrid">Hybrid</option>
|
|
185
|
+
</select>
|
|
186
|
+
</div>
|
|
187
|
+
</div>
|
|
188
|
+
|
|
189
|
+
<!-- Cap Base -->
|
|
190
|
+
<div class="row align-items-center g-2 mb-2">
|
|
191
|
+
<div class="col-4 text-secondary small">Cap Base</div>
|
|
192
|
+
<div class="col-3 text-end">
|
|
193
|
+
<span class="badge bg-white text-muted border">{displayStore.autoSizeBase.toFixed(1)}x</span>
|
|
194
|
+
</div>
|
|
195
|
+
<div class="col-5">
|
|
196
|
+
<input
|
|
197
|
+
id="cell-cap-base-slider"
|
|
198
|
+
type="range"
|
|
199
|
+
class="form-range w-100"
|
|
200
|
+
min="0.5"
|
|
201
|
+
max="3.0"
|
|
202
|
+
step="0.1"
|
|
203
|
+
bind:value={displayStore.autoSizeBase}
|
|
204
|
+
/>
|
|
205
|
+
</div>
|
|
206
|
+
</div>
|
|
207
|
+
{/if}
|
|
208
|
+
</div>
|
|
209
|
+
{/if} <div class="border-top my-3"></div>
|
|
140
210
|
|
|
141
211
|
<!-- Show Labels -->
|
|
142
212
|
<div class="row align-items-center g-2 mb-3">
|
|
@@ -134,6 +134,8 @@
|
|
|
134
134
|
const _useAutoSize = displayStore.useAutoSize;
|
|
135
135
|
const _autoSizeMode = displayStore.autoSizeMode;
|
|
136
136
|
const _autoSizeBase = displayStore.autoSizeBase;
|
|
137
|
+
const _useMinCap = displayStore.useMinCap;
|
|
138
|
+
const _useMaxCap = displayStore.useMaxCap;
|
|
137
139
|
|
|
138
140
|
updateLayer();
|
|
139
141
|
});
|
|
@@ -210,6 +212,25 @@
|
|
|
210
212
|
// Manual mode: base from pixel size, then scale by z-index
|
|
211
213
|
const scaleFactor = 1 + Math.max(0, MAX_Z - zIndex) * 0.08;
|
|
212
214
|
radiusMeters = baseRadiusMeters * scaleFactor;
|
|
215
|
+
|
|
216
|
+
// Apply density-based caps if enabled
|
|
217
|
+
if (displayStore.useMinCap || displayStore.useMaxCap) {
|
|
218
|
+
const siteDistance = dataStore.siteDistanceStore.getDistance(cell.siteId, 500);
|
|
219
|
+
const autoRadius = calculateAutoRadius(siteDistance, displayStore.autoSizeMode);
|
|
220
|
+
const baseAdjusted = autoRadius * displayStore.autoSizeBase;
|
|
221
|
+
const scaledAuto = baseAdjusted * scaleFactor;
|
|
222
|
+
|
|
223
|
+
// Apply caps: min = 60% of auto-size, max = 140% of auto-size
|
|
224
|
+
const minCap = scaledAuto * 0.6;
|
|
225
|
+
const maxCap = scaledAuto * 1.4;
|
|
226
|
+
|
|
227
|
+
if (displayStore.useMinCap && radiusMeters < minCap) {
|
|
228
|
+
radiusMeters = minCap;
|
|
229
|
+
}
|
|
230
|
+
if (displayStore.useMaxCap && radiusMeters > maxCap) {
|
|
231
|
+
radiusMeters = maxCap;
|
|
232
|
+
}
|
|
233
|
+
}
|
|
213
234
|
}
|
|
214
235
|
|
|
215
236
|
// 7. Apply beamwidth boost from displayStore preset
|
|
@@ -10,6 +10,8 @@ export declare class CellDisplayStore {
|
|
|
10
10
|
useAutoSize: boolean;
|
|
11
11
|
autoSizeMode: AutoSizeMode;
|
|
12
12
|
autoSizeBase: number;
|
|
13
|
+
useMinCap: boolean;
|
|
14
|
+
useMaxCap: boolean;
|
|
13
15
|
level1: CellGroupingField;
|
|
14
16
|
level2: CellGroupingField;
|
|
15
17
|
currentZIndex: Record<string, number>;
|
|
@@ -12,6 +12,9 @@ export class CellDisplayStore {
|
|
|
12
12
|
useAutoSize = $state(false);
|
|
13
13
|
autoSizeMode = $state('logarithmic');
|
|
14
14
|
autoSizeBase = $state(1.0);
|
|
15
|
+
// Density-based caps (for manual mode)
|
|
16
|
+
useMinCap = $state(false);
|
|
17
|
+
useMaxCap = $state(false);
|
|
15
18
|
// Grouping
|
|
16
19
|
level1 = $state('tech');
|
|
17
20
|
level2 = $state('fband');
|
|
@@ -42,6 +45,8 @@ export class CellDisplayStore {
|
|
|
42
45
|
this.useAutoSize = parsed.useAutoSize ?? false;
|
|
43
46
|
this.autoSizeMode = parsed.autoSizeMode ?? 'logarithmic';
|
|
44
47
|
this.autoSizeBase = parsed.autoSizeBase ?? 1.0;
|
|
48
|
+
this.useMinCap = parsed.useMinCap ?? false;
|
|
49
|
+
this.useMaxCap = parsed.useMaxCap ?? false;
|
|
45
50
|
this.level1 = parsed.level1 ?? 'tech';
|
|
46
51
|
this.level2 = parsed.level2 ?? 'fband';
|
|
47
52
|
this.labelPixelDistance = parsed.labelPixelDistance ?? 60;
|
|
@@ -67,6 +72,8 @@ export class CellDisplayStore {
|
|
|
67
72
|
useAutoSize: this.useAutoSize,
|
|
68
73
|
autoSizeMode: this.autoSizeMode,
|
|
69
74
|
autoSizeBase: this.autoSizeBase,
|
|
75
|
+
useMinCap: this.useMinCap,
|
|
76
|
+
useMaxCap: this.useMaxCap,
|
|
70
77
|
level1: this.level1,
|
|
71
78
|
level2: this.level2,
|
|
72
79
|
labelPixelDistance: this.labelPixelDistance,
|