@versatiles/svelte 1.0.0 → 1.0.1

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.
Files changed (5) hide show
  1. package/dist/components/BBoxMap/BBoxMap.svelte +23 -23
  2. package/dist/components/BBoxMap/BBoxMap.svelte.d.ts +5 -3
  3. package/dist/utils/draw/bbox.d.ts +2 -1
  4. package/dist/utils/draw/bbox.js +55 -50
  5. package/package.json +3 -3
package/dist/components/BBoxMap/BBoxMap.svelte CHANGED
@@ -8,35 +8,35 @@ import { loadBBoxes } from './BBoxMap.js';
8
8
  import { BBoxDrawer } from '../../utils/draw/bbox.js';
9
9
  let { selectedBBox = $bindable() } = $props();
10
10
  const startTime = Date.now();
11
- let bbox;
11
+ let bboxDrawer;
12
12
  let map = $state();
13
13
  let bboxes = $state();
14
14
  let mapContainer;
15
- function onMapInit(_map) {
15
+ async function onMapLoad(_map) {
16
16
  map = _map;
17
17
  mapContainer = map.getContainer();
18
18
  map.setPadding({ top: 31 + 5, right: 5, bottom: 5, left: 5 });
19
- map.on('load', async () => {
20
- bbox = new BBoxDrawer(map, [-180, -86, 180, 86], isDarkMode(mapContainer) ? '#FFFFFF' : '#000000');
21
- bboxes = await loadBBoxes();
19
+ bboxDrawer = new BBoxDrawer(map, [-180, -86, 180, 86], isDarkMode(mapContainer) ? '#FFFFFF' : '#000000');
20
+ bboxes = await loadBBoxes();
21
+ bboxDrawer.bbox.subscribe((bbox) => {
22
+ selectedBBox = bbox;
22
23
  });
23
24
  }
24
- function setBBox(newBBox) {
25
- selectedBBox = newBBox;
26
- if (bbox && map) {
27
- bbox.setGeometry(newBBox);
28
- const transform = map.cameraForBounds(bbox.getBounds());
29
- if (transform == null)
30
- return;
31
- transform.zoom = transform.zoom ?? 0 - 0.5;
32
- transform.bearing = 0;
33
- transform.pitch = 0;
34
- if (Date.now() - startTime < 1000) {
35
- map.jumpTo(transform);
36
- }
37
- else {
38
- map.flyTo({ ...transform, essential: true, speed: 5 });
39
- }
25
+ function flyToBBox(bbox) {
26
+ if (!map || !bbox)
27
+ return;
28
+ bboxDrawer.setGeometry(bbox);
29
+ const transform = map.cameraForBounds(bboxDrawer.getBounds());
30
+ if (transform == null)
31
+ return;
32
+ transform.zoom = transform.zoom ?? 0 - 0.5;
33
+ transform.bearing = 0;
34
+ transform.pitch = 0;
35
+ if (Date.now() - startTime < 1000) {
36
+ map.jumpTo(transform);
37
+ }
38
+ else {
39
+ map.flyTo({ ...transform, essential: true, speed: 5 });
40
40
  }
41
41
  }
42
42
  </script>
@@ -47,12 +47,12 @@ function setBBox(newBBox) {
47
47
  <AutoComplete
48
48
  items={bboxes}
49
49
  placeholder="Find country, region or city …"
50
- change={setBBox}
50
+ change={(bbox) => flyToBBox(bbox)}
51
51
  initialInputText={getCountryName() ?? ''}
52
52
  />
53
53
  </div>
54
54
  {/if}
55
- <BasicMap {onMapInit}></BasicMap>
55
+ <BasicMap {onMapLoad}></BasicMap>
56
56
  </div>
57
57
 
58
58
  <style>
package/dist/components/BBoxMap/BBoxMap.svelte.d.ts CHANGED
@@ -1,6 +1,8 @@
1
1
  import 'maplibre-gl/dist/maplibre-gl.css';
2
- declare const BBoxMap: import("svelte").Component<{
3
- selectedBBox?: any;
4
- }, {}, "selectedBBox">;
2
+ import type { BBox } from 'geojson';
3
+ type $$ComponentProps = {
4
+ selectedBBox?: BBox;
5
+ };
6
+ declare const BBoxMap: import("svelte").Component<$$ComponentProps, {}, "selectedBBox">;
5
7
  type BBoxMap = ReturnType<typeof BBoxMap>;
6
8
  export default BBoxMap;
package/dist/utils/draw/bbox.d.ts CHANGED
@@ -1,4 +1,5 @@
1
1
  import type geojson from 'geojson';
2
+ import { type Writable } from 'svelte/store';
2
3
  type DragPoint = 'n' | 'ne' | 'e' | 'se' | 's' | 'sw' | 'w' | 'nw' | false;
3
4
  export declare const DragPointMap: Map<DragPoint, {
4
5
  cursor: string;
@@ -13,7 +14,7 @@ export declare class BBoxDrawer {
13
14
  private map;
14
15
  private canvas;
15
16
  private inverted;
16
- private bbox;
17
+ readonly bbox: Writable<BBox>;
17
18
  constructor(map: maplibregl.Map, bbox: BBox, color: string, inverted?: boolean);
18
19
  private updateDragPoint;
19
20
  private getAsFeatureCollection;
package/dist/utils/draw/bbox.js CHANGED
@@ -1,3 +1,4 @@
1
+ import { get, writable } from 'svelte/store';
1
2
  const maplibregl = await import('maplibre-gl');
2
3
  const { LngLatBounds } = maplibregl;
3
4
  // prettier-ignore
@@ -22,7 +23,7 @@ export class BBoxDrawer {
22
23
  inverted;
23
24
  bbox;
24
25
  constructor(map, bbox, color, inverted) {
25
- this.bbox = bbox;
26
+ this.bbox = writable(bbox);
26
27
  this.inverted = inverted ?? true;
27
28
  this.map = map;
28
29
  const sourceId = 'bbox_' + Math.random().toString(36).slice(2);
@@ -81,7 +82,7 @@ export class BBoxDrawer {
81
82
  this.canvas.style.cursor = this.getCursor(dragPoint);
82
83
  }
83
84
  getAsFeatureCollection() {
84
- const ring = getRing(this.bbox);
85
+ const ring = getRing(get(this.bbox));
85
86
  return {
86
87
  type: 'FeatureCollection',
87
88
  features: [
@@ -105,18 +106,19 @@ export class BBoxDrawer {
105
106
  }
106
107
  }
107
108
  setGeometry(bbox) {
108
- this.bbox = bbox.slice(0, 4);
109
+ this.bbox.set(bbox.slice(0, 4));
109
110
  this.redraw();
110
111
  }
111
112
  getBounds() {
112
- return new LngLatBounds(this.bbox);
113
+ return new LngLatBounds(get(this.bbox));
113
114
  }
114
115
  redraw() {
115
116
  this.source?.setData(this.getAsFeatureCollection());
116
117
  }
117
118
  getAsPixel() {
118
- const p0 = this.map.project([this.bbox[0], this.bbox[1]]);
119
- const p1 = this.map.project([this.bbox[2], this.bbox[3]]);
119
+ const bbox = get(this.bbox);
120
+ const p0 = this.map.project([bbox[0], bbox[1]]);
121
+ const p1 = this.map.project([bbox[2], bbox[3]]);
120
122
  return [Math.min(p0.x, p1.x), Math.min(p0.y, p1.y), Math.max(p0.x, p1.x), Math.max(p0.y, p1.y)];
121
123
  }
122
124
  checkDragPointAt(point) {
@@ -145,49 +147,52 @@ export class BBoxDrawer {
145
147
  return DragPointMap.get(drag)?.cursor ?? 'default';
146
148
  }
147
149
  doDrag(lngLat) {
148
- const x = Math.round(lngLat.lng * 1e3) / 1e3;
149
- const y = Math.round(lngLat.lat * 1e3) / 1e3;
150
- // prettier-ignore
151
- switch (this.dragPoint) {
152
- case 'n':
153
- this.bbox[3] = y;
154
- break;
155
- case 'ne':
156
- this.bbox[2] = x;
157
- this.bbox[3] = y;
158
- break;
159
- case 'e':
160
- this.bbox[2] = x;
161
- break;
162
- case 'se':
163
- this.bbox[2] = x;
164
- this.bbox[1] = y;
165
- break;
166
- case 's':
167
- this.bbox[1] = y;
168
- break;
169
- case 'sw':
170
- this.bbox[0] = x;
171
- this.bbox[1] = y;
172
- break;
173
- case 'w':
174
- this.bbox[0] = x;
175
- break;
176
- case 'nw':
177
- this.bbox[0] = x;
178
- this.bbox[3] = y;
179
- break;
180
- default: return;
181
- }
182
- if (this.bbox[2] < this.bbox[0]) {
183
- // flip horizontal
184
- this.bbox = [this.bbox[2], this.bbox[1], this.bbox[0], this.bbox[3]];
185
- this.updateDragPoint(DragPointMap.get(this.dragPoint)?.flipH ?? false);
186
- }
187
- if (this.bbox[3] < this.bbox[1]) {
188
- // flip vertical
189
- this.bbox = [this.bbox[0], this.bbox[3], this.bbox[2], this.bbox[1]];
190
- this.updateDragPoint(DragPointMap.get(this.dragPoint)?.flipV ?? false);
191
- }
150
+ this.bbox.update((bbox) => {
151
+ const x = Math.round(lngLat.lng * 1e3) / 1e3;
152
+ const y = Math.round(lngLat.lat * 1e3) / 1e3;
153
+ // prettier-ignore
154
+ switch (this.dragPoint) {
155
+ case 'n':
156
+ bbox[3] = y;
157
+ break;
158
+ case 'ne':
159
+ bbox[2] = x;
160
+ bbox[3] = y;
161
+ break;
162
+ case 'e':
163
+ bbox[2] = x;
164
+ break;
165
+ case 'se':
166
+ bbox[2] = x;
167
+ bbox[1] = y;
168
+ break;
169
+ case 's':
170
+ bbox[1] = y;
171
+ break;
172
+ case 'sw':
173
+ bbox[0] = x;
174
+ bbox[1] = y;
175
+ break;
176
+ case 'w':
177
+ bbox[0] = x;
178
+ break;
179
+ case 'nw':
180
+ bbox[0] = x;
181
+ bbox[3] = y;
182
+ break;
183
+ default: return bbox;
184
+ }
185
+ if (bbox[2] < bbox[0]) {
186
+ // flip horizontal
187
+ bbox = [bbox[2], bbox[1], bbox[0], bbox[3]];
188
+ this.updateDragPoint(DragPointMap.get(this.dragPoint)?.flipH ?? false);
189
+ }
190
+ if (bbox[3] < bbox[1]) {
191
+ // flip vertical
192
+ bbox = [bbox[0], bbox[3], bbox[2], bbox[1]];
193
+ this.updateDragPoint(DragPointMap.get(this.dragPoint)?.flipV ?? false);
194
+ }
195
+ return bbox;
196
+ });
192
197
  }
193
198
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@versatiles/svelte",
3
- "version": "1.0.0",
3
+ "version": "1.0.1",
4
4
  "license": "MIT",
5
5
  "scripts": {
6
6
  "build": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json && vite build && npm run package",
@@ -35,7 +35,8 @@
35
35
  "!dist/BBoxMap/helpers/*"
36
36
  ],
37
37
  "peerDependencies": {
38
- "svelte": "^5.0.3"
38
+ "svelte": "^5.0.3",
39
+ "sass-embedded": "^1.83.4"
39
40
  },
40
41
  "devDependencies": {
41
42
  "@playwright/test": "^1.50.0",
@@ -60,7 +61,6 @@
60
61
  "prettier-plugin-svelte": "^3.3.3",
61
62
  "publint": "^0.3.2",
62
63
  "sass": "^1.83.4",
63
- "sass-embedded": "^1.83.4",
64
64
  "svelte": "^5.19.6",
65
65
  "svelte-check": "^4.1.4",
66
66
  "svelte-preprocess": "^6.0.3",