@versatiles/svelte 1.0.2 → 1.1.0
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/components/BBoxMap/AutoComplete.svelte +1 -1
- package/dist/components/BBoxMap/BBoxMap.svelte +0 -1
- package/dist/components/BBoxMap/BBoxMap.svelte.d.ts +0 -1
- package/dist/components/BasicMap/BasicMap.svelte +3 -2
- package/dist/components/LocatorMap/LocatorMap.svelte +0 -1
- package/dist/components/LocatorMap/LocatorMap.svelte.d.ts +0 -1
- package/dist/components/MapEditor/MapEditor.svelte +0 -1
- package/dist/components/MapEditor/MapEditor.svelte.d.ts +0 -1
- package/dist/components/MapEditor/components/EditorFill.svelte +1 -1
- package/dist/components/MapEditor/components/EditorStroke.svelte +1 -1
- package/dist/components/MapEditor/components/SymbolSelector.svelte +1 -1
- package/dist/components/MapEditor/lib/cursor.d.ts +4 -3
- package/dist/components/MapEditor/lib/cursor.js +24 -12
- package/dist/components/MapEditor/lib/geometry_manager.js +9 -4
- package/dist/components/MapEditor/lib/map_layer/abstract.js +11 -7
- package/package.json +27 -28
|
@@ -135,7 +135,7 @@
|
|
|
135
135
|
aria-controls="autocomplete-results"
|
|
136
136
|
/>
|
|
137
137
|
<div class="autocomplete-results" class:hide-results={!isOpen}>
|
|
138
|
-
{#each results as result, i}
|
|
138
|
+
{#each results as result, i (result.key)}
|
|
139
139
|
<button
|
|
140
140
|
onclick={() => close(i)}
|
|
141
141
|
class={i === selectedIndex ? ' is-active' : ''}
|
|
@@ -1,7 +1,6 @@
|
|
|
1
1
|
<!-- BBoxMap.svelte -->
|
|
2
2
|
<script lang="ts">
|
|
3
3
|
import type { CameraOptions, Map as MaplibreMapType } from 'maplibre-gl';
|
|
4
|
-
import 'maplibre-gl/dist/maplibre-gl.css';
|
|
5
4
|
import AutoComplete from './AutoComplete.svelte';
|
|
6
5
|
import { getCountryName } from '../../utils/location.js';
|
|
7
6
|
import BasicMap from '../BasicMap/BasicMap.svelte';
|
|
@@ -3,7 +3,8 @@
|
|
|
3
3
|
import type { Map as MaplibreMapType, MapOptions } from 'maplibre-gl';
|
|
4
4
|
import 'maplibre-gl/dist/maplibre-gl.css';
|
|
5
5
|
import { getMapStyle, isDarkMode } from '../../utils/map_style.js';
|
|
6
|
-
import
|
|
6
|
+
import maplibre from 'maplibre-gl';
|
|
7
|
+
const { Map } = maplibre;
|
|
7
8
|
|
|
8
9
|
// Props
|
|
9
10
|
let {
|
|
@@ -39,7 +40,7 @@
|
|
|
39
40
|
|
|
40
41
|
const style = getMapStyle(darkMode, styleOptions);
|
|
41
42
|
style.transition = { duration: 0, delay: 0 };
|
|
42
|
-
map = new
|
|
43
|
+
map = new Map({
|
|
43
44
|
container,
|
|
44
45
|
style,
|
|
45
46
|
renderWorldCopies: false,
|
|
@@ -1,4 +1,3 @@
|
|
|
1
|
-
import 'maplibre-gl/dist/maplibre-gl.css';
|
|
2
1
|
interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
|
|
3
2
|
new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
|
|
4
3
|
$$bindings?: Bindings;
|
|
@@ -16,7 +16,7 @@
|
|
|
16
16
|
<div class="row-input">
|
|
17
17
|
<label for="pattern">Pattern:</label>
|
|
18
18
|
<select id="pattern" bind:value={$pattern}>
|
|
19
|
-
{#each fillPatterns as [index, fill]}
|
|
19
|
+
{#each fillPatterns as [index, fill] (index)}
|
|
20
20
|
<option value={index}>{fill.name}</option>
|
|
21
21
|
{/each}
|
|
22
22
|
</select>
|
|
@@ -11,7 +11,7 @@
|
|
|
11
11
|
<div class="row-input">
|
|
12
12
|
<label for="dashed">Dashed:</label>
|
|
13
13
|
<select id="dashed" bind:value={$dashed}>
|
|
14
|
-
{#each dashArrays as [index, dash]}
|
|
14
|
+
{#each dashArrays as [index, dash] (index)}
|
|
15
15
|
<option value={index}>{dash.name}</option>
|
|
16
16
|
{/each}
|
|
17
17
|
</select>
|
|
@@ -38,7 +38,7 @@
|
|
|
38
38
|
<div class="modal" style="display: {open ? 'block' : 'none'};">
|
|
39
39
|
<button class="close" onclick={() => (open = false)}>✕</button>
|
|
40
40
|
<div class="inner">
|
|
41
|
-
{#each symbolLibrary.asList() as symbol}
|
|
41
|
+
{#each symbolLibrary.asList() as symbol (symbol.index)}
|
|
42
42
|
<button
|
|
43
43
|
class="icon"
|
|
44
44
|
onclick={() => {
|
|
@@ -3,7 +3,8 @@ export declare class Cursor {
|
|
|
3
3
|
private readonly element;
|
|
4
4
|
constructor(element: HTMLElement);
|
|
5
5
|
private update;
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
6
|
+
toggleHover(id: string, add?: boolean): void;
|
|
7
|
+
togglePrecise(id: string, add?: boolean): void;
|
|
8
|
+
toggleGrab(id: string, add?: boolean): void;
|
|
9
|
+
isPrecise(): boolean;
|
|
9
10
|
}
|
|
@@ -1,31 +1,43 @@
|
|
|
1
1
|
export class Cursor {
|
|
2
2
|
element;
|
|
3
|
-
#
|
|
4
|
-
#
|
|
5
|
-
#
|
|
3
|
+
#precise = new Set(); // Priority: high
|
|
4
|
+
#grab = new Set(); // Priority: medium
|
|
5
|
+
#hover = new Set(); // Priority: low
|
|
6
6
|
constructor(element) {
|
|
7
7
|
this.element = element;
|
|
8
8
|
this.update();
|
|
9
9
|
}
|
|
10
10
|
update() {
|
|
11
|
-
if (this.#precise > 0)
|
|
11
|
+
if (this.#precise.size > 0)
|
|
12
12
|
return (this.element.style.cursor = 'crosshair');
|
|
13
|
-
if (this.#grab > 0)
|
|
13
|
+
if (this.#grab.size > 0)
|
|
14
14
|
return (this.element.style.cursor = 'grab');
|
|
15
|
-
if (this.#hover > 0)
|
|
15
|
+
if (this.#hover.size > 0)
|
|
16
16
|
return (this.element.style.cursor = 'pointer');
|
|
17
17
|
this.element.style.cursor = 'default';
|
|
18
18
|
}
|
|
19
|
-
|
|
20
|
-
|
|
19
|
+
toggleHover(id, add = true) {
|
|
20
|
+
if (add)
|
|
21
|
+
this.#hover.add(id);
|
|
22
|
+
else
|
|
23
|
+
this.#hover.delete(id);
|
|
21
24
|
this.update();
|
|
22
25
|
}
|
|
23
|
-
|
|
24
|
-
|
|
26
|
+
togglePrecise(id, add = true) {
|
|
27
|
+
if (add)
|
|
28
|
+
this.#precise.add(id);
|
|
29
|
+
else
|
|
30
|
+
this.#precise.delete(id);
|
|
25
31
|
this.update();
|
|
26
32
|
}
|
|
27
|
-
|
|
28
|
-
|
|
33
|
+
toggleGrab(id, add = true) {
|
|
34
|
+
if (add)
|
|
35
|
+
this.#grab.add(id);
|
|
36
|
+
else
|
|
37
|
+
this.#grab.delete(id);
|
|
29
38
|
this.update();
|
|
30
39
|
}
|
|
40
|
+
isPrecise() {
|
|
41
|
+
return this.#precise.size > 0;
|
|
42
|
+
}
|
|
31
43
|
}
|
|
@@ -68,8 +68,12 @@ export class GeometryManager {
|
|
|
68
68
|
});
|
|
69
69
|
}
|
|
70
70
|
});
|
|
71
|
-
map.on('mouseenter', 'selection_nodes', () =>
|
|
72
|
-
|
|
71
|
+
map.on('mouseenter', 'selection_nodes', () => {
|
|
72
|
+
this.cursor.togglePrecise('selection_nodes');
|
|
73
|
+
});
|
|
74
|
+
map.on('mouseleave', 'selection_nodes', () => {
|
|
75
|
+
this.cursor.togglePrecise('selection_nodes', false);
|
|
76
|
+
});
|
|
73
77
|
map.on('click', (e) => {
|
|
74
78
|
if (!e.originalEvent.shiftKey)
|
|
75
79
|
this.selectElement(undefined);
|
|
@@ -126,7 +130,7 @@ export class GeometryManager {
|
|
|
126
130
|
this.map.setCenter({ lng: state.map.point[0], lat: state.map.point[1] });
|
|
127
131
|
}
|
|
128
132
|
if (state.elements) {
|
|
129
|
-
|
|
133
|
+
const elements = state.elements.map((element) => {
|
|
130
134
|
switch (element.type) {
|
|
131
135
|
case 'marker':
|
|
132
136
|
return MarkerElement.fromState(this, element);
|
|
@@ -137,7 +141,8 @@ export class GeometryManager {
|
|
|
137
141
|
default:
|
|
138
142
|
throw new Error('Unknown element type');
|
|
139
143
|
}
|
|
140
|
-
})
|
|
144
|
+
});
|
|
145
|
+
this.elements.set(elements);
|
|
141
146
|
}
|
|
142
147
|
}
|
|
143
148
|
catch (error) {
|
|
@@ -37,22 +37,26 @@ export class MapLayer {
|
|
|
37
37
|
addEvents() {
|
|
38
38
|
this.map.on('mouseenter', this.id, () => {
|
|
39
39
|
if (this.isSelected)
|
|
40
|
-
this.manager.cursor.
|
|
41
|
-
this.manager.cursor.
|
|
40
|
+
this.manager.cursor.toggleGrab(this.id);
|
|
41
|
+
this.manager.cursor.toggleHover(this.id);
|
|
42
42
|
});
|
|
43
43
|
this.map.on('mouseleave', this.id, () => {
|
|
44
44
|
if (this.isSelected)
|
|
45
|
-
this.manager.cursor.
|
|
46
|
-
this.manager.cursor.
|
|
45
|
+
this.manager.cursor.toggleGrab(this.id, false);
|
|
46
|
+
this.manager.cursor.toggleHover(this.id, false);
|
|
47
47
|
});
|
|
48
48
|
this.map.on('click', this.id, (e) => {
|
|
49
49
|
this.dispatchEvent('click', e);
|
|
50
50
|
if (this.isSelected)
|
|
51
|
-
this.manager.cursor.
|
|
52
|
-
this.manager.cursor.
|
|
51
|
+
this.manager.cursor.toggleGrab(this.id);
|
|
52
|
+
this.manager.cursor.toggleHover(this.id);
|
|
53
53
|
e.preventDefault();
|
|
54
54
|
});
|
|
55
|
-
this.map.on('mousedown', this.id, (e) =>
|
|
55
|
+
this.map.on('mousedown', this.id, (e) => {
|
|
56
|
+
if (this.manager.cursor.isPrecise())
|
|
57
|
+
return;
|
|
58
|
+
this.dispatchEvent('mousedown', e);
|
|
59
|
+
});
|
|
56
60
|
this.map.on('mouseup', this.id, (e) => this.dispatchEvent('mouseup', e));
|
|
57
61
|
this.map.on('mousemove', this.id, (e) => this.dispatchEvent('mousemove', e));
|
|
58
62
|
}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@versatiles/svelte",
|
|
3
|
-
"version": "1.0
|
|
3
|
+
"version": "1.1.0",
|
|
4
4
|
"license": "MIT",
|
|
5
5
|
"scripts": {
|
|
6
6
|
"build": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json && vite build && npm run package",
|
|
@@ -10,16 +10,16 @@
|
|
|
10
10
|
"format": "prettier --write .",
|
|
11
11
|
"lint": "prettier --check . && eslint --color .",
|
|
12
12
|
"package": "svelte-kit sync && svelte-package && publint",
|
|
13
|
-
"prepack": "npm run
|
|
13
|
+
"prepack": "npm run build",
|
|
14
14
|
"prepublishOnly": "npm run package",
|
|
15
15
|
"preview": "vite preview",
|
|
16
16
|
"screenshots": "npm run build && npx tsx ./scripts/screenshots.ts && pngquant --nofs --force --ext .png screenshots/*.png && optipng -quiet screenshots/*.png",
|
|
17
|
-
"release": "
|
|
17
|
+
"release": "vrt release-npm",
|
|
18
18
|
"test:integration": "playwright test",
|
|
19
19
|
"test:unit": "vitest run",
|
|
20
20
|
"test:coverage": "vitest run --coverage",
|
|
21
21
|
"test": "npm run test:unit && npm run test:integration",
|
|
22
|
-
"upgrade": "
|
|
22
|
+
"upgrade": "vrt deps-upgrade"
|
|
23
23
|
},
|
|
24
24
|
"exports": {
|
|
25
25
|
".": {
|
|
@@ -35,46 +35,45 @@
|
|
|
35
35
|
"!dist/BBoxMap/helpers/*"
|
|
36
36
|
],
|
|
37
37
|
"peerDependencies": {
|
|
38
|
-
"sass-embedded": "^1.
|
|
38
|
+
"sass-embedded": "^1.86.0",
|
|
39
39
|
"svelte": "^5.0.3"
|
|
40
40
|
},
|
|
41
41
|
"devDependencies": {
|
|
42
|
-
"@playwright/test": "^1.
|
|
42
|
+
"@playwright/test": "^1.51.1",
|
|
43
43
|
"@sveltejs/adapter-static": "^3.0.8",
|
|
44
|
-
"@sveltejs/kit": "^2.
|
|
44
|
+
"@sveltejs/kit": "^2.20.0",
|
|
45
45
|
"@sveltejs/package": "^2.3.10",
|
|
46
46
|
"@sveltejs/vite-plugin-svelte": "^5.0.3",
|
|
47
47
|
"@turf/turf": "^7.2.0",
|
|
48
48
|
"@types/eslint": "^9.6.1",
|
|
49
|
-
"@types/node": "^22.13.
|
|
50
|
-
"@versatiles/release-tool": "^
|
|
51
|
-
"@vitest/coverage-v8": "^3.0.
|
|
49
|
+
"@types/node": "^22.13.10",
|
|
50
|
+
"@versatiles/release-tool": "^2.4.2",
|
|
51
|
+
"@vitest/coverage-v8": "^3.0.9",
|
|
52
52
|
"cookie": "^1.0.2",
|
|
53
|
-
"eslint": "^9.
|
|
54
|
-
"eslint-config-prettier": "^10.
|
|
55
|
-
"eslint-plugin-svelte": "^
|
|
53
|
+
"eslint": "^9.22.0",
|
|
54
|
+
"eslint-config-prettier": "^10.1.1",
|
|
55
|
+
"eslint-plugin-svelte": "^3.3.2",
|
|
56
56
|
"geojson": "^0.5.0",
|
|
57
|
-
"globals": "^
|
|
58
|
-
"happy-dom": "^17.
|
|
59
|
-
"
|
|
60
|
-
"prettier": "^3.4.2",
|
|
57
|
+
"globals": "^16.0.0",
|
|
58
|
+
"happy-dom": "^17.4.4",
|
|
59
|
+
"prettier": "^3.5.3",
|
|
61
60
|
"prettier-plugin-svelte": "^3.3.3",
|
|
62
|
-
"publint": "^0.3.
|
|
63
|
-
"sass": "^1.
|
|
64
|
-
"svelte": "^5.
|
|
65
|
-
"svelte-check": "^4.1.
|
|
61
|
+
"publint": "^0.3.9",
|
|
62
|
+
"sass": "^1.86.0",
|
|
63
|
+
"svelte": "^5.23.1",
|
|
64
|
+
"svelte-check": "^4.1.5",
|
|
66
65
|
"svelte-preprocess": "^6.0.3",
|
|
67
|
-
"tsx": "^4.19.
|
|
68
|
-
"typescript": "^5.
|
|
69
|
-
"typescript-eslint": "^8.
|
|
70
|
-
"vite": "^6.
|
|
71
|
-
"vitest": "^3.0.
|
|
66
|
+
"tsx": "^4.19.3",
|
|
67
|
+
"typescript": "^5.8.2",
|
|
68
|
+
"typescript-eslint": "^8.26.1",
|
|
69
|
+
"vite": "^6.2.2",
|
|
70
|
+
"vitest": "^3.0.9"
|
|
72
71
|
},
|
|
73
72
|
"svelte": "./dist/index.js",
|
|
74
73
|
"types": "./dist/index.d.ts",
|
|
75
74
|
"type": "module",
|
|
76
75
|
"dependencies": {
|
|
77
|
-
"@versatiles/style": "^5.
|
|
78
|
-
"maplibre-gl": "^5.
|
|
76
|
+
"@versatiles/style": "^5.6.0",
|
|
77
|
+
"maplibre-gl": "^5.2.0"
|
|
79
78
|
}
|
|
80
79
|
}
|