@d3-maps/vue 0.2.0 → 0.4.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/README.md +6 -0
- package/dist/index.d.ts +136 -40
- package/dist/index.iife.js +1 -1
- package/dist/index.js +40 -51
- package/package.json +4 -2
package/README.md
CHANGED
|
@@ -47,6 +47,12 @@ export default defineNuxtPlugin((nuxtApp) => {
|
|
|
47
47
|
})
|
|
48
48
|
```
|
|
49
49
|
|
|
50
|
+
## Styling
|
|
51
|
+
|
|
52
|
+
Importing `@d3-maps/vue` automatically includes `@d3-maps/core/index.css`
|
|
53
|
+
|
|
54
|
+
If you need strict stylesheet ordering, load your global reset/theme styles before importing the adapter entry
|
|
55
|
+
|
|
50
56
|
## License
|
|
51
57
|
|
|
52
58
|
MIT licensed. Copyright © 2020 Georgii Bukharov. See [LICENSE](./LICENSE) for more details.
|
package/dist/index.d.ts
CHANGED
|
@@ -1,18 +1,22 @@
|
|
|
1
1
|
import "@d3-maps/core/index.css";
|
|
2
2
|
import * as vue6 from "vue";
|
|
3
|
-
import { App, StyleValue } from "vue";
|
|
4
|
-
import {
|
|
5
|
-
import { GeoPath, GeoProjection } from "d3-geo";
|
|
3
|
+
import { App, ComputedRef, InjectionKey, MaybeRef, StyleValue } from "vue";
|
|
4
|
+
import { ExtendedFeature, ExtendedFeatureCollection, GeoPath, GeoProjection } from "d3-geo";
|
|
6
5
|
import { Topology } from "topojson-specification";
|
|
7
|
-
import {
|
|
6
|
+
import { mesh } from "topojson-client";
|
|
7
|
+
import { D3ZoomEvent, ZoomBehavior } from "d3-zoom";
|
|
8
8
|
|
|
9
9
|
//#region ../core/src/lib/mapObject.d.ts
|
|
10
|
+
type MapObjectFocusEventType = 'focus' | 'blur';
|
|
11
|
+
type MapObjectMouseEventType = 'mouseenter' | 'mouseleave' | 'mousedown' | 'mouseup';
|
|
12
|
+
type MapObjectEventType = MapObjectFocusEventType | MapObjectMouseEventType;
|
|
13
|
+
type MapObjectEvent<E> = E extends MapObjectFocusEventType ? FocusEvent : MouseEvent;
|
|
10
14
|
/**
|
|
11
15
|
* Supported interaction states for map objects.
|
|
12
16
|
*/
|
|
13
17
|
declare const mapObjectState: readonly ["default", "hover", "active"];
|
|
14
18
|
type MapObjectState = typeof mapObjectState[number];
|
|
15
|
-
type MapObjectStyles<TStyle> = Partial<Record<MapObjectState, TStyle>>;
|
|
19
|
+
type MapObjectStyles$1<TStyle> = Partial<Record<MapObjectState, TStyle>>;
|
|
16
20
|
//#endregion
|
|
17
21
|
//#region ../core/src/lib/feature.d.ts
|
|
18
22
|
/**
|
|
@@ -20,30 +24,98 @@ type MapObjectStyles<TStyle> = Partial<Record<MapObjectState, TStyle>>;
|
|
|
20
24
|
*
|
|
21
25
|
* This type allows extra top-level fields to be attached in `dataTransformer` (e.g. choropleth colors).
|
|
22
26
|
*/
|
|
23
|
-
type MapFeature = (
|
|
27
|
+
type MapFeature = (ExtendedFeature & Record<string, unknown>) | ExtendedFeature;
|
|
24
28
|
/**
|
|
25
29
|
* Shared props contract for a single rendered feature.
|
|
26
30
|
*/
|
|
27
31
|
interface MapFeatureProps<TStyle = unknown> {
|
|
28
32
|
data: MapFeature;
|
|
29
|
-
styles?: MapObjectStyles<TStyle>;
|
|
33
|
+
styles?: MapObjectStyles$1<TStyle>;
|
|
30
34
|
fill?: string;
|
|
31
35
|
stroke?: string;
|
|
32
36
|
}
|
|
33
37
|
//#endregion
|
|
38
|
+
//#region ../core/src/lib/utils.d.ts
|
|
39
|
+
type AnyFn = (...args: any) => any;
|
|
40
|
+
/**
|
|
41
|
+
* Extracts a union of parameter tuples from a (possibly overloaded) function type.
|
|
42
|
+
*
|
|
43
|
+
* TypeScript's built-in `Parameters<F>` only captures the *last* overload, which breaks typing
|
|
44
|
+
* for overloaded getter/setter APIs (common in d3), where the setter overload might not be last.
|
|
45
|
+
*
|
|
46
|
+
* Notes:
|
|
47
|
+
* - This helper supports up to 5 overload signatures (adjust if needed).
|
|
48
|
+
* - Getter overloads like `(): T` are filtered out later via `Exclude<..., []>` when we build
|
|
49
|
+
* setter-only config types.
|
|
50
|
+
*/
|
|
51
|
+
type OverloadedArgs<F> = F extends {
|
|
52
|
+
(...a: infer A1): any;
|
|
53
|
+
(...a: infer A2): any;
|
|
54
|
+
(...a: infer A3): any;
|
|
55
|
+
(...a: infer A4): any;
|
|
56
|
+
(...a: infer A5): any;
|
|
57
|
+
} ? A1 | A2 | A3 | A4 | A5 : F extends {
|
|
58
|
+
(...a: infer A1): any;
|
|
59
|
+
(...a: infer A2): any;
|
|
60
|
+
(...a: infer A3): any;
|
|
61
|
+
(...a: infer A4): any;
|
|
62
|
+
} ? A1 | A2 | A3 | A4 : F extends {
|
|
63
|
+
(...a: infer A1): any;
|
|
64
|
+
(...a: infer A2): any;
|
|
65
|
+
(...a: infer A3): any;
|
|
66
|
+
} ? A1 | A2 | A3 : F extends {
|
|
67
|
+
(...a: infer A1): any;
|
|
68
|
+
(...a: infer A2): any;
|
|
69
|
+
} ? A1 | A2 : F extends ((...a: infer A1) => any) ? A1 : never;
|
|
70
|
+
/**
|
|
71
|
+
* Removes 0-arg overloads (getters), leaving only setter-style overload argument tuples.
|
|
72
|
+
*/
|
|
73
|
+
type SetterArgs<F> = Exclude<OverloadedArgs<F>, []>;
|
|
74
|
+
/**
|
|
75
|
+
* True if the function has at least one overload that accepts arguments (i.e. a setter overload).
|
|
76
|
+
*/
|
|
77
|
+
type HasArgs<F> = [SetterArgs<F>] extends [never] ? false : true;
|
|
78
|
+
type OwnKeys<T> = T extends AnyFn ? Exclude<keyof T, keyof CallableFunction> : keyof T;
|
|
79
|
+
/**
|
|
80
|
+
* Converts method parameters to modifiers values
|
|
81
|
+
* - single non-array arg: `arg` | `[arg]`
|
|
82
|
+
* - multiple args/single array wrapped with array
|
|
83
|
+
*/
|
|
84
|
+
type ModifierArgs<P extends unknown[]> = P extends [infer Only] ? Only extends readonly unknown[] ? [Only] : Only | [Only] : P;
|
|
85
|
+
/**
|
|
86
|
+
* Maps methods with args to modifiers
|
|
87
|
+
*
|
|
88
|
+
* @example
|
|
89
|
+
* type X = {
|
|
90
|
+
* a: string; // not a function - will be ignored
|
|
91
|
+
* b(): void; // has no arguments - will be ignored
|
|
92
|
+
* c(x: number): void;
|
|
93
|
+
* d(x: number, y: string): void;
|
|
94
|
+
* e(xs: string[]): void;
|
|
95
|
+
* }
|
|
96
|
+
*
|
|
97
|
+
* type R = MethodsToModifiers<X>
|
|
98
|
+
* {
|
|
99
|
+
* c: number | [number];
|
|
100
|
+
* d: [number, string];
|
|
101
|
+
* e: [string[]]; // forced wrapper (arg is array)
|
|
102
|
+
* }
|
|
103
|
+
*/
|
|
104
|
+
type MethodsToModifiers<T extends object> = { [K in OwnKeys<T> as Extract<T[K], AnyFn> extends never ? never : HasArgs<Extract<T[K], AnyFn>> extends true ? K : never]?: ModifierArgs<Extract<SetterArgs<Extract<T[K], AnyFn>>, unknown[]>> };
|
|
105
|
+
//#endregion
|
|
34
106
|
//#region ../core/src/lib/map.d.ts
|
|
35
|
-
type
|
|
107
|
+
type MapMesh = ReturnType<typeof mesh>;
|
|
108
|
+
type MapData = ExtendedFeatureCollection | Topology;
|
|
36
109
|
type DataTransformer = (features: MapFeature[]) => MapFeature[];
|
|
37
110
|
/**
|
|
38
|
-
*
|
|
111
|
+
* Extra projection method calls to apply before rendering.
|
|
112
|
+
*
|
|
113
|
+
* Use projection method names as keys and method arguments as values.
|
|
114
|
+
* Example: `{ center: [[0, 20]], rotate: [[0, 0, 0]], scale: 160 }`
|
|
39
115
|
*
|
|
40
|
-
* d3-
|
|
116
|
+
* @see https://d3js.org/d3-geo/projection
|
|
41
117
|
*/
|
|
42
|
-
interface ProjectionConfig {
|
|
43
|
-
center?: [number, number];
|
|
44
|
-
rotate?: [number, number, number];
|
|
45
|
-
scale?: number;
|
|
46
|
-
}
|
|
118
|
+
interface ProjectionConfig extends Omit<MethodsToModifiers<GeoProjection>, 'invert' | 'stream'> {}
|
|
47
119
|
/**
|
|
48
120
|
* Input configuration for creating a map context.
|
|
49
121
|
*
|
|
@@ -56,9 +128,12 @@ interface MapConfig {
|
|
|
56
128
|
/**
|
|
57
129
|
* Projection factory from d3-geo (or a compatible implementation).
|
|
58
130
|
*
|
|
59
|
-
* Example: `
|
|
131
|
+
* Example: `geoNaturalEarth1`.
|
|
60
132
|
*/
|
|
61
133
|
projection?: () => GeoProjection;
|
|
134
|
+
/**
|
|
135
|
+
* Projection method arguments passed to the created projection
|
|
136
|
+
*/
|
|
62
137
|
projectionConfig?: ProjectionConfig;
|
|
63
138
|
/**
|
|
64
139
|
* TopoJSON or GeoJSON input.
|
|
@@ -81,9 +156,9 @@ interface MapContext {
|
|
|
81
156
|
height: number;
|
|
82
157
|
projection?: GeoProjection;
|
|
83
158
|
features: MapFeature[];
|
|
84
|
-
mesh?:
|
|
159
|
+
mesh?: MapMesh;
|
|
85
160
|
path: GeoPath;
|
|
86
|
-
renderPath: (feature:
|
|
161
|
+
renderPath: (feature: MapFeature) => ReturnType<GeoPath>;
|
|
87
162
|
renderMesh: () => ReturnType<GeoPath>;
|
|
88
163
|
}
|
|
89
164
|
//#endregion
|
|
@@ -94,23 +169,26 @@ type MapMarkerCoordinates = [number, number];
|
|
|
94
169
|
*/
|
|
95
170
|
interface MapMarkerProps<TStyle = unknown> {
|
|
96
171
|
coordinates?: MapMarkerCoordinates;
|
|
97
|
-
styles?: MapObjectStyles<TStyle>;
|
|
172
|
+
styles?: MapObjectStyles$1<TStyle>;
|
|
98
173
|
}
|
|
99
174
|
//#endregion
|
|
100
175
|
//#region ../core/src/lib/zoom.d.ts
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
176
|
+
interface DefaultZoomBehavior extends ZoomBehavior<SVGSVGElement, unknown> {}
|
|
177
|
+
/**
|
|
178
|
+
* Extra zoom method calls to apply before rendering.
|
|
179
|
+
*
|
|
180
|
+
* Use zoom method names as keys and method arguments as values.
|
|
181
|
+
* Example: `{ scaleExtent: [[2, 9]], translateExtent: [[[0, 0], [10, 10]]] }`
|
|
182
|
+
*
|
|
183
|
+
* @see https://d3js.org/d3-zoom
|
|
184
|
+
*/
|
|
185
|
+
interface ZoomModifiers extends MethodsToModifiers<DefaultZoomBehavior> {}
|
|
186
|
+
interface ZoomProps {
|
|
108
187
|
center?: [number, number];
|
|
109
188
|
zoom?: number;
|
|
110
189
|
minZoom?: number;
|
|
111
190
|
maxZoom?: number;
|
|
112
|
-
|
|
113
|
-
modifiers?: ZoomModifiers<TElement, TDatum>;
|
|
191
|
+
config?: ZoomModifiers;
|
|
114
192
|
}
|
|
115
193
|
interface ZoomEvent extends D3ZoomEvent<SVGSVGElement, unknown> {}
|
|
116
194
|
//#endregion
|
|
@@ -128,19 +206,34 @@ type __VLS_WithSlots$3<T, S> = T & {
|
|
|
128
206
|
};
|
|
129
207
|
//#endregion
|
|
130
208
|
//#region src/components/MapFeature.vue.d.ts
|
|
131
|
-
type __VLS_Props$
|
|
132
|
-
declare const __VLS_export$4: vue6.DefineComponent<__VLS_Props$
|
|
209
|
+
type __VLS_Props$1 = MapFeatureProps<StyleValue>;
|
|
210
|
+
declare const __VLS_export$4: vue6.DefineComponent<__VLS_Props$1, {}, {}, {}, {}, vue6.ComponentOptionsMixin, vue6.ComponentOptionsMixin, {} & {
|
|
133
211
|
[x: string]: any;
|
|
134
|
-
}, string, vue6.PublicProps, Readonly<__VLS_Props$
|
|
212
|
+
}, string, vue6.PublicProps, Readonly<__VLS_Props$1> & Readonly<{
|
|
135
213
|
[x: `on${Capitalize<any>}`]: ((...args: any) => any) | undefined;
|
|
136
214
|
}>, {}, {}, {}, {}, string, vue6.ComponentProvideOptions, false, {}, any>;
|
|
137
215
|
declare const _default$1: typeof __VLS_export$4;
|
|
138
216
|
//#endregion
|
|
217
|
+
//#region src/hooks/useMapObject.d.ts
|
|
218
|
+
type MapObjectStyles = MapObjectStyles$1<StyleValue>;
|
|
219
|
+
type MapObjectEmit = <E extends MapObjectEventType>(event: E, payload: MapObjectEvent<E>) => void;
|
|
220
|
+
interface UseMapObjectResult {
|
|
221
|
+
computedStyle: ComputedRef<StyleValue | undefined>;
|
|
222
|
+
onMouseEnter: (event: MouseEvent) => void;
|
|
223
|
+
onMouseLeave: (event: MouseEvent) => void;
|
|
224
|
+
onMouseDown: (event: MouseEvent) => void;
|
|
225
|
+
onMouseUp: (event: MouseEvent) => void;
|
|
226
|
+
onFocus: (event: FocusEvent) => void;
|
|
227
|
+
onBlur: (event: FocusEvent) => void;
|
|
228
|
+
}
|
|
229
|
+
declare function useMapObject(emit: MapObjectEmit, styles: MaybeRef<MapObjectStyles | undefined>): UseMapObjectResult;
|
|
230
|
+
//#endregion
|
|
139
231
|
//#region src/components/MapFeatures.vue.d.ts
|
|
140
232
|
interface Props$1 {
|
|
141
233
|
idKey?: string;
|
|
142
234
|
fill?: string;
|
|
143
235
|
stroke?: string;
|
|
236
|
+
styles?: MapObjectStyles;
|
|
144
237
|
}
|
|
145
238
|
declare var __VLS_1$2: {
|
|
146
239
|
features: MapFeature[];
|
|
@@ -160,14 +253,14 @@ type __VLS_WithSlots$2<T, S> = T & {
|
|
|
160
253
|
};
|
|
161
254
|
//#endregion
|
|
162
255
|
//#region src/components/MapMarker.vue.d.ts
|
|
163
|
-
type __VLS_Props
|
|
256
|
+
type __VLS_Props = MapMarkerProps<StyleValue>;
|
|
164
257
|
declare var __VLS_1$1: {};
|
|
165
258
|
type __VLS_Slots$1 = {} & {
|
|
166
259
|
default?: (props: typeof __VLS_1$1) => any;
|
|
167
260
|
};
|
|
168
|
-
declare const __VLS_base$1: vue6.DefineComponent<__VLS_Props
|
|
261
|
+
declare const __VLS_base$1: vue6.DefineComponent<__VLS_Props, {}, {}, {}, {}, vue6.ComponentOptionsMixin, vue6.ComponentOptionsMixin, {} & {
|
|
169
262
|
[x: string]: any;
|
|
170
|
-
}, string, vue6.PublicProps, Readonly<__VLS_Props
|
|
263
|
+
}, string, vue6.PublicProps, Readonly<__VLS_Props> & Readonly<{
|
|
171
264
|
[x: `on${Capitalize<any>}`]: ((...args: any) => any) | undefined;
|
|
172
265
|
}>, {
|
|
173
266
|
coordinates: MapMarkerCoordinates;
|
|
@@ -184,7 +277,7 @@ type __VLS_WithSlots$1<T, S> = T & {
|
|
|
184
277
|
interface Props {
|
|
185
278
|
fill?: string;
|
|
186
279
|
stroke?: string;
|
|
187
|
-
styles?: MapObjectStyles
|
|
280
|
+
styles?: MapObjectStyles;
|
|
188
281
|
}
|
|
189
282
|
declare const __VLS_export$1: vue6.DefineComponent<Props, {}, {}, {}, {}, vue6.ComponentOptionsMixin, vue6.ComponentOptionsMixin, {} & {
|
|
190
283
|
[x: string]: any;
|
|
@@ -196,19 +289,18 @@ declare const __VLS_export$1: vue6.DefineComponent<Props, {}, {}, {}, {}, vue6.C
|
|
|
196
289
|
declare const _default$4: typeof __VLS_export$1;
|
|
197
290
|
//#endregion
|
|
198
291
|
//#region src/components/MapZoom.vue.d.ts
|
|
199
|
-
type __VLS_Props = ZoomProps;
|
|
200
292
|
declare var __VLS_1: {};
|
|
201
293
|
type __VLS_Slots = {} & {
|
|
202
294
|
default?: (props: typeof __VLS_1) => any;
|
|
203
295
|
};
|
|
204
|
-
declare const __VLS_base: vue6.DefineComponent<
|
|
296
|
+
declare const __VLS_base: vue6.DefineComponent<ZoomProps, {
|
|
205
297
|
container: vue6.Ref<SVGGElement | null, SVGGElement | null>;
|
|
206
|
-
zoomBehavior: vue6.ComputedRef<
|
|
298
|
+
zoomBehavior: vue6.ComputedRef<DefaultZoomBehavior>;
|
|
207
299
|
}, {}, {}, {}, vue6.ComponentOptionsMixin, vue6.ComponentOptionsMixin, {} & {
|
|
208
300
|
zoom: (payload: ZoomEvent) => any;
|
|
209
301
|
zoomstart: (payload: ZoomEvent) => any;
|
|
210
302
|
zoomend: (payload: ZoomEvent) => any;
|
|
211
|
-
}, string, vue6.PublicProps, Readonly<
|
|
303
|
+
}, string, vue6.PublicProps, Readonly<ZoomProps> & Readonly<{
|
|
212
304
|
onZoom?: ((payload: ZoomEvent) => any) | undefined;
|
|
213
305
|
onZoomstart?: ((payload: ZoomEvent) => any) | undefined;
|
|
214
306
|
onZoomend?: ((payload: ZoomEvent) => any) | undefined;
|
|
@@ -226,6 +318,10 @@ type __VLS_WithSlots<T, S> = T & {
|
|
|
226
318
|
};
|
|
227
319
|
};
|
|
228
320
|
//#endregion
|
|
321
|
+
//#region src/hooks/useMapContext.d.ts
|
|
322
|
+
declare const mapContextKey: InjectionKey<ComputedRef<MapContext>>;
|
|
323
|
+
declare function useMapContext(): ComputedRef<MapContext> | undefined;
|
|
324
|
+
//#endregion
|
|
229
325
|
//#region src/plugin.d.ts
|
|
230
326
|
/**
|
|
231
327
|
* Vue plugin that registers all d3-maps components globally.
|
|
@@ -234,4 +330,4 @@ declare const plugin: {
|
|
|
234
330
|
install(app: App): void;
|
|
235
331
|
};
|
|
236
332
|
//#endregion
|
|
237
|
-
export { _default as Map, _default$1 as MapFeature, _default$2 as MapFeatures, _default$3 as MapMarker, _default$4 as MapMesh, _default$5 as MapZoom, plugin };
|
|
333
|
+
export { _default as Map, _default$1 as MapFeature, _default$2 as MapFeatures, _default$3 as MapMarker, _default$4 as MapMesh, MapObjectEmit, MapObjectStyles, _default$5 as MapZoom, UseMapObjectResult, mapContextKey, plugin, useMapContext, useMapObject };
|
package/dist/index.iife.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
(function(e,t,n,r){var i=Object.defineProperty,a=(e,t)=>{let n={};for(var r in e)i(n,r,{get:e[r],enumerable:!0});return t&&i(n,Symbol.toStringTag,{value:`Module`}),n};let o=Symbol(`MapContext`)
|
|
1
|
+
(function(e,t,n,r){var i=Object.defineProperty,a=(e,t)=>{let n={};for(var r in e)i(n,r,{get:e[r],enumerable:!0});return t&&i(n,Symbol.toStringTag,{value:`Module`}),n};let o=Symbol(`MapContext`);function s(){return(0,n.inject)(o)}let c=[`viewBox`];var l=(0,n.defineComponent)({__name:`Map`,props:{width:{},height:{},aspectRatio:{},projection:{type:Function},projectionConfig:{},data:{},dataTransformer:{type:Function}},setup(e){let t=e,i=(0,n.computed)(()=>(0,r.makeMapContext)({width:t.width,height:t.height,aspectRatio:t.aspectRatio,projection:t.projection,projectionConfig:t.projectionConfig,data:t.data,dataTransformer:t.dataTransformer}));return(0,n.provide)(o,i),(e,t)=>((0,n.openBlock)(),(0,n.createElementBlock)(`svg`,(0,n.mergeProps)({viewBox:`0 0 ${i.value.width} ${i.value.height}`},e.$attrs,{class:`d3-map`}),[(0,n.renderSlot)(e.$slots,`default`,(0,n.normalizeProps)((0,n.guardReactiveProps)(i.value)))],16,c))}});function u(e,t){let i=(0,n.ref)(`default`),a=t=>n=>{i.value=(0,r.getObjectStateUpdate)(t),e(t,n)};return{computedStyle:(0,n.computed)(()=>(0,r.resolveObjectStyle)(i.value,(0,n.unref)(t))),onMouseEnter:a(`mouseenter`),onMouseLeave:a(`mouseleave`),onMouseDown:a(`mousedown`),onMouseUp:a(`mouseup`),onFocus:a(`focus`),onBlur:a(`blur`)}}let d=[`d`,`fill`,`stroke`];var f=(0,n.defineComponent)({__name:`MapFeature`,props:{data:{},styles:{},fill:{},stroke:{}},setup(e,{emit:t}){let r=e,i=t,a=s(),o=(0,n.computed)(()=>a?.value.renderPath(r.data)),{computedStyle:c,onMouseEnter:l,onMouseLeave:f,onMouseDown:p,onMouseUp:m,onFocus:h,onBlur:g}=u(i,(0,n.toRef)(r,`styles`));return(t,r)=>o.value?((0,n.openBlock)(),(0,n.createElementBlock)(`path`,(0,n.mergeProps)({key:0,d:o.value,style:(0,n.unref)(c),fill:e.fill,stroke:e.stroke},t.$attrs,{onMouseenter:r[0]||=(...e)=>(0,n.unref)(l)&&(0,n.unref)(l)(...e),onMouseleave:r[1]||=(...e)=>(0,n.unref)(f)&&(0,n.unref)(f)(...e),onMousedown:r[2]||=(...e)=>(0,n.unref)(p)&&(0,n.unref)(p)(...e),onMouseup:r[3]||=(...e)=>(0,n.unref)(m)&&(0,n.unref)(m)(...e),onClick:r[4]||=(...e)=>(0,n.unref)(m)&&(0,n.unref)(m)(...e),onFocus:r[5]||=(...e)=>(0,n.unref)(h)&&(0,n.unref)(h)(...e),onBlur:r[6]||=(...e)=>(0,n.unref)(g)&&(0,n.unref)(g)(...e)}),null,16,d)):(0,n.createCommentVNode)(`v-if`,!0)}}),p=(0,n.defineComponent)({__name:`MapFeatures`,props:{idKey:{default:`id`},fill:{},stroke:{},styles:{}},setup(e){let t=s(),i=(0,n.computed)(()=>t?.value.features??[]);return(t,a)=>((0,n.openBlock)(),(0,n.createElementBlock)(`g`,null,[(0,n.renderSlot)(t.$slots,`default`,{features:i.value},()=>[((0,n.openBlock)(!0),(0,n.createElementBlock)(n.Fragment,null,(0,n.renderList)(i.value,(i,a)=>((0,n.openBlock)(),(0,n.createBlock)(f,(0,n.mergeProps)({key:(0,n.unref)(r.getFeatureKey)(i,e.idKey,a),data:i,fill:e.fill,stroke:e.stroke,styles:e.styles},{ref_for:!0},t.$attrs),null,16,[`data`,`fill`,`stroke`,`styles`]))),128))])]))}});let m=[`transform`];var h=(0,n.defineComponent)({__name:`MapMarker`,props:{coordinates:{default:()=>[0,0]},styles:{}},setup(e,{emit:t}){let i=e,a=t,o=s(),c=(0,n.computed)(()=>(0,r.getMarkerTransform)(o?.value,i.coordinates)),{computedStyle:l,onMouseEnter:d,onMouseLeave:f,onMouseDown:p,onMouseUp:h,onFocus:g,onBlur:_}=u(a,(0,n.toRef)(i,`styles`));return(e,t)=>((0,n.openBlock)(),(0,n.createElementBlock)(`g`,{transform:c.value,style:(0,n.normalizeStyle)((0,n.unref)(l)),onMouseenter:t[0]||=(...e)=>(0,n.unref)(d)&&(0,n.unref)(d)(...e),onMouseleave:t[1]||=(...e)=>(0,n.unref)(f)&&(0,n.unref)(f)(...e),onMousedown:t[2]||=(...e)=>(0,n.unref)(p)&&(0,n.unref)(p)(...e),onMouseup:t[3]||=(...e)=>(0,n.unref)(h)&&(0,n.unref)(h)(...e),onClick:t[4]||=(...e)=>(0,n.unref)(h)&&(0,n.unref)(h)(...e),onFocus:t[5]||=(...e)=>(0,n.unref)(g)&&(0,n.unref)(g)(...e),onBlur:t[6]||=(...e)=>(0,n.unref)(_)&&(0,n.unref)(_)(...e)},[(0,n.renderSlot)(e.$slots,`default`)],44,m))}});let g=[`d`,`fill`,`stroke`];var _=(0,n.defineComponent)({__name:`MapMesh`,props:{fill:{default:`none`},stroke:{},styles:{}},setup(e,{emit:t}){let r=e,i=t,a=s(),o=(0,n.computed)(()=>a?.value.renderMesh()),{computedStyle:c,onMouseEnter:l,onMouseLeave:d,onMouseDown:f,onMouseUp:p,onFocus:m,onBlur:h}=u(i,(0,n.toRef)(r,`styles`));return(t,r)=>o.value?((0,n.openBlock)(),(0,n.createElementBlock)(`path`,(0,n.mergeProps)({key:0,d:o.value,style:(0,n.unref)(c),fill:e.fill,stroke:e.stroke},t.$attrs,{onMouseenter:r[0]||=(...e)=>(0,n.unref)(l)&&(0,n.unref)(l)(...e),onMouseleave:r[1]||=(...e)=>(0,n.unref)(d)&&(0,n.unref)(d)(...e),onMousedown:r[2]||=(...e)=>(0,n.unref)(f)&&(0,n.unref)(f)(...e),onMouseup:r[3]||=(...e)=>(0,n.unref)(p)&&(0,n.unref)(p)(...e),onClick:r[4]||=(...e)=>(0,n.unref)(p)&&(0,n.unref)(p)(...e),onFocus:r[5]||=(...e)=>(0,n.unref)(m)&&(0,n.unref)(m)(...e),onBlur:r[6]||=(...e)=>(0,n.unref)(h)&&(0,n.unref)(h)(...e)}),null,16,g)):(0,n.createCommentVNode)(`v-if`,!0)}}),v=(0,n.defineComponent)({__name:`MapZoom`,props:{center:{default:()=>[0,0]},zoom:{default:1},minZoom:{default:1},maxZoom:{default:8},config:{}},emits:[`zoomstart`,`zoom`,`zoomend`],setup(e,{expose:t,emit:i}){let a=e,o=i,c=(0,n.ref)(null),l=s(),u=(0,n.computed)(()=>(0,r.createZoomBehavior)(l?.value,{minZoom:a.minZoom,maxZoom:a.maxZoom,config:a.config,onZoomStart:e=>o(`zoomstart`,e),onZoom:e=>{(0,r.applyZoomGroupTransform)(c.value,e.transform),o(`zoom`,e)},onZoomEnd:e=>o(`zoomend`,e)}));return(0,n.onMounted)(()=>{(0,n.watch)(u,e=>{c.value&&(0,r.setupZoom)({element:c.value,behavior:e,center:a.center,zoom:a.zoom})},{immediate:!0}),(0,n.watch)(()=>[u.value,a.center[0],a.center[1],a.zoom],()=>{c.value&&(0,r.applyZoomTransform)({element:c.value,behavior:u.value,center:a.center,zoom:a.zoom})})}),t({container:c,zoomBehavior:u}),(e,t)=>((0,n.openBlock)(),(0,n.createElementBlock)(`g`,{ref_key:`container`,ref:c,class:`d3-map-zoom`},[(0,n.renderSlot)(e.$slots,`default`)],512))}}),y=a({Map:()=>l,MapFeature:()=>f,MapFeatures:()=>p,MapMarker:()=>h,MapMesh:()=>_,MapZoom:()=>v});e.Map=l,e.MapFeature=f,e.MapFeatures=p,e.MapMarker=h,e.MapMesh=_,e.MapZoom=v,e.mapContextKey=o,e.plugin={install(e){Object.entries(y).forEach(([t,n])=>{e.component(t,n)})}},e.useMapContext=s,e.useMapObject=u})(this.D3Maps=this.D3Maps||{},_d3_maps_core_index_css,Vue,D3Maps);
|
package/dist/index.js
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import "@d3-maps/core/index.css";
|
|
2
|
-
import { Fragment, computed, createBlock, createCommentVNode, createElementBlock, defineComponent, guardReactiveProps, inject, mergeProps, normalizeProps, normalizeStyle, onMounted, openBlock, provide, ref, renderList, renderSlot, toRef, unref, watch
|
|
3
|
-
import { applyZoomTransform, createZoomBehavior, getFeatureKey, getMarkerTransform, getObjectStateUpdate, makeMapContext, resolveObjectStyle, setupZoom } from "@d3-maps/core";
|
|
2
|
+
import { Fragment, computed, createBlock, createCommentVNode, createElementBlock, defineComponent, guardReactiveProps, inject, mergeProps, normalizeProps, normalizeStyle, onMounted, openBlock, provide, ref, renderList, renderSlot, toRef, unref, watch } from "vue";
|
|
3
|
+
import { applyZoomGroupTransform, applyZoomTransform, createZoomBehavior, getFeatureKey, getMarkerTransform, getObjectStateUpdate, makeMapContext, resolveObjectStyle, setupZoom } from "@d3-maps/core";
|
|
4
4
|
|
|
5
5
|
//#region rolldown:runtime
|
|
6
6
|
var __defProp = Object.defineProperty;
|
|
@@ -19,25 +19,8 @@ var __exportAll = (all, symbols) => {
|
|
|
19
19
|
};
|
|
20
20
|
|
|
21
21
|
//#endregion
|
|
22
|
-
//#region src/
|
|
22
|
+
//#region src/hooks/useMapContext.ts
|
|
23
23
|
const mapContextKey = Symbol("MapContext");
|
|
24
|
-
const MapProvider = defineComponent((props, { slots }) => {
|
|
25
|
-
provide(mapContextKey, props.context);
|
|
26
|
-
return () => slots.default?.() ?? null;
|
|
27
|
-
}, { props: { context: {
|
|
28
|
-
type: Object,
|
|
29
|
-
required: true
|
|
30
|
-
} } });
|
|
31
|
-
const MapConsumer = defineComponent({
|
|
32
|
-
name: "MapConsumer",
|
|
33
|
-
setup(_, { slots }) {
|
|
34
|
-
const context = inject(mapContextKey);
|
|
35
|
-
return () => {
|
|
36
|
-
if (!slots.default) return null;
|
|
37
|
-
return slots.default(context ?? {});
|
|
38
|
-
};
|
|
39
|
-
}
|
|
40
|
-
});
|
|
41
24
|
function useMapContext() {
|
|
42
25
|
return inject(mapContextKey);
|
|
43
26
|
}
|
|
@@ -67,11 +50,9 @@ var Map_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComp
|
|
|
67
50
|
data: props.data,
|
|
68
51
|
dataTransformer: props.dataTransformer
|
|
69
52
|
}));
|
|
53
|
+
provide(mapContextKey, context);
|
|
70
54
|
return (_ctx, _cache) => {
|
|
71
|
-
return openBlock(),
|
|
72
|
-
default: withCtx(() => [(openBlock(), createElementBlock("svg", mergeProps({ viewBox: `0 0 ${context.value.width} ${context.value.height}` }, _ctx.$attrs, { class: "d3-map" }), [renderSlot(_ctx.$slots, "default", normalizeProps(guardReactiveProps(context.value)))], 16, _hoisted_1$3))]),
|
|
73
|
-
_: 3
|
|
74
|
-
}, 8, ["context"]);
|
|
55
|
+
return openBlock(), createElementBlock("svg", mergeProps({ viewBox: `0 0 ${context.value.width} ${context.value.height}` }, _ctx.$attrs, { class: "d3-map" }), [renderSlot(_ctx.$slots, "default", normalizeProps(guardReactiveProps(context.value)))], 16, _hoisted_1$3);
|
|
75
56
|
};
|
|
76
57
|
}
|
|
77
58
|
});
|
|
@@ -81,7 +62,7 @@ var Map_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComp
|
|
|
81
62
|
var Map_default = Map_vue_vue_type_script_setup_true_lang_default;
|
|
82
63
|
|
|
83
64
|
//#endregion
|
|
84
|
-
//#region src/
|
|
65
|
+
//#region src/hooks/useMapObject.ts
|
|
85
66
|
function useMapObject(emit, styles) {
|
|
86
67
|
const state = ref("default");
|
|
87
68
|
const eventCallbackFactory = (eventName) => (event) => {
|
|
@@ -118,7 +99,7 @@ var MapFeature_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ def
|
|
|
118
99
|
const props = __props;
|
|
119
100
|
const emit = __emit;
|
|
120
101
|
const context = useMapContext();
|
|
121
|
-
const path = computed(() => context?.renderPath(props.data));
|
|
102
|
+
const path = computed(() => context?.value.renderPath(props.data));
|
|
122
103
|
const { computedStyle, onMouseEnter, onMouseLeave, onMouseDown, onMouseUp, onFocus, onBlur } = useMapObject(emit, toRef(props, "styles"));
|
|
123
104
|
return (_ctx, _cache) => {
|
|
124
105
|
return path.value ? (openBlock(), createElementBlock("path", mergeProps({
|
|
@@ -151,22 +132,25 @@ var MapFeatures_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ de
|
|
|
151
132
|
props: {
|
|
152
133
|
idKey: { default: "id" },
|
|
153
134
|
fill: {},
|
|
154
|
-
stroke: {}
|
|
135
|
+
stroke: {},
|
|
136
|
+
styles: {}
|
|
155
137
|
},
|
|
156
138
|
setup(__props) {
|
|
157
139
|
const context = useMapContext();
|
|
158
|
-
const features = computed(() => context?.features ?? []);
|
|
140
|
+
const features = computed(() => context?.value.features ?? []);
|
|
159
141
|
return (_ctx, _cache) => {
|
|
160
142
|
return openBlock(), createElementBlock("g", null, [renderSlot(_ctx.$slots, "default", { features: features.value }, () => [(openBlock(true), createElementBlock(Fragment, null, renderList(features.value, (feature, index) => {
|
|
161
143
|
return openBlock(), createBlock(MapFeature_default, mergeProps({
|
|
162
144
|
key: unref(getFeatureKey)(feature, __props.idKey, index),
|
|
163
145
|
data: feature,
|
|
164
146
|
fill: __props.fill,
|
|
165
|
-
stroke: __props.stroke
|
|
147
|
+
stroke: __props.stroke,
|
|
148
|
+
styles: __props.styles
|
|
166
149
|
}, { ref_for: true }, _ctx.$attrs), null, 16, [
|
|
167
150
|
"data",
|
|
168
151
|
"fill",
|
|
169
|
-
"stroke"
|
|
152
|
+
"stroke",
|
|
153
|
+
"styles"
|
|
170
154
|
]);
|
|
171
155
|
}), 128))])]);
|
|
172
156
|
};
|
|
@@ -191,7 +175,7 @@ var MapMarker_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defi
|
|
|
191
175
|
const emit = __emit;
|
|
192
176
|
const context = useMapContext();
|
|
193
177
|
const transform = computed(() => {
|
|
194
|
-
return getMarkerTransform(context, props.coordinates);
|
|
178
|
+
return getMarkerTransform(context?.value, props.coordinates);
|
|
195
179
|
});
|
|
196
180
|
const { computedStyle, onMouseEnter, onMouseLeave, onMouseDown, onMouseUp, onFocus, onBlur } = useMapObject(emit, toRef(props, "styles"));
|
|
197
181
|
return (_ctx, _cache) => {
|
|
@@ -232,7 +216,7 @@ var MapMesh_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ define
|
|
|
232
216
|
const props = __props;
|
|
233
217
|
const emit = __emit;
|
|
234
218
|
const context = useMapContext();
|
|
235
|
-
const path = computed(() => context?.renderMesh());
|
|
219
|
+
const path = computed(() => context?.value.renderMesh());
|
|
236
220
|
const { computedStyle, onMouseEnter, onMouseLeave, onMouseDown, onMouseUp, onFocus, onBlur } = useMapObject(emit, toRef(props, "styles"));
|
|
237
221
|
return (_ctx, _cache) => {
|
|
238
222
|
return path.value ? (openBlock(), createElementBlock("path", mergeProps({
|
|
@@ -267,8 +251,7 @@ var MapZoom_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ define
|
|
|
267
251
|
zoom: { default: 1 },
|
|
268
252
|
minZoom: { default: 1 },
|
|
269
253
|
maxZoom: { default: 8 },
|
|
270
|
-
|
|
271
|
-
modifiers: {}
|
|
254
|
+
config: {}
|
|
272
255
|
},
|
|
273
256
|
emits: [
|
|
274
257
|
"zoomstart",
|
|
@@ -281,36 +264,42 @@ var MapZoom_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ define
|
|
|
281
264
|
const container = ref(null);
|
|
282
265
|
const context = useMapContext();
|
|
283
266
|
const zoomBehavior = computed(() => {
|
|
284
|
-
return createZoomBehavior(context, {
|
|
267
|
+
return createZoomBehavior(context?.value, {
|
|
285
268
|
minZoom: props.minZoom,
|
|
286
269
|
maxZoom: props.maxZoom,
|
|
287
|
-
|
|
288
|
-
modifiers: props.modifiers,
|
|
270
|
+
config: props.config,
|
|
289
271
|
onZoomStart: (event) => emit("zoomstart", event),
|
|
290
272
|
onZoom: (event) => {
|
|
291
|
-
|
|
273
|
+
applyZoomGroupTransform(container.value, event.transform);
|
|
292
274
|
emit("zoom", event);
|
|
293
275
|
},
|
|
294
276
|
onZoomEnd: (event) => emit("zoomend", event)
|
|
295
277
|
});
|
|
296
278
|
});
|
|
297
279
|
onMounted(() => {
|
|
298
|
-
watch(
|
|
299
|
-
|
|
300
|
-
|
|
301
|
-
|
|
302
|
-
|
|
303
|
-
|
|
280
|
+
watch(zoomBehavior, (behavior) => {
|
|
281
|
+
if (!container.value) return;
|
|
282
|
+
setupZoom({
|
|
283
|
+
element: container.value,
|
|
284
|
+
behavior,
|
|
285
|
+
center: props.center,
|
|
286
|
+
zoom: props.zoom
|
|
287
|
+
});
|
|
288
|
+
}, { immediate: true });
|
|
304
289
|
watch(() => [
|
|
290
|
+
zoomBehavior.value,
|
|
305
291
|
props.center[0],
|
|
306
292
|
props.center[1],
|
|
307
293
|
props.zoom
|
|
308
|
-
], () =>
|
|
309
|
-
|
|
310
|
-
|
|
311
|
-
|
|
312
|
-
|
|
313
|
-
|
|
294
|
+
], () => {
|
|
295
|
+
if (!container.value) return;
|
|
296
|
+
applyZoomTransform({
|
|
297
|
+
element: container.value,
|
|
298
|
+
behavior: zoomBehavior.value,
|
|
299
|
+
center: props.center,
|
|
300
|
+
zoom: props.zoom
|
|
301
|
+
});
|
|
302
|
+
});
|
|
314
303
|
});
|
|
315
304
|
__expose({
|
|
316
305
|
container,
|
|
@@ -353,4 +342,4 @@ const plugin = { install(app) {
|
|
|
353
342
|
} };
|
|
354
343
|
|
|
355
344
|
//#endregion
|
|
356
|
-
export { Map_default as Map, MapFeature_default as MapFeature, MapFeatures_default as MapFeatures, MapMarker_default as MapMarker, MapMesh_default as MapMesh, MapZoom_default as MapZoom, plugin };
|
|
345
|
+
export { Map_default as Map, MapFeature_default as MapFeature, MapFeatures_default as MapFeatures, MapMarker_default as MapMarker, MapMesh_default as MapMesh, MapZoom_default as MapZoom, mapContextKey, plugin, useMapContext, useMapObject };
|
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@d3-maps/vue",
|
|
3
3
|
"type": "module",
|
|
4
|
-
"version": "0.
|
|
4
|
+
"version": "0.4.0",
|
|
5
5
|
"private": false,
|
|
6
6
|
"description": "Vue bindings for @d3-maps/core to build reactive D3 SVG maps",
|
|
7
7
|
"author": "Georgii Bukharov <souljorje@gmail.com>",
|
|
@@ -44,7 +44,7 @@
|
|
|
44
44
|
"vue": "3.5.25"
|
|
45
45
|
},
|
|
46
46
|
"dependencies": {
|
|
47
|
-
"@d3-maps/core": "0.
|
|
47
|
+
"@d3-maps/core": "0.4.0"
|
|
48
48
|
},
|
|
49
49
|
"devDependencies": {
|
|
50
50
|
"@types/geojson": "^7946.0.16",
|
|
@@ -56,12 +56,14 @@
|
|
|
56
56
|
"tsdown": "0.19.0",
|
|
57
57
|
"typescript": "^5.9.3",
|
|
58
58
|
"unplugin-vue": "^6.0.1",
|
|
59
|
+
"vite-tsconfig-paths": "^6.1.1",
|
|
59
60
|
"vitest": "^4.0.15",
|
|
60
61
|
"vue": "3.5.25",
|
|
61
62
|
"vue-tsc": "^3.2.0"
|
|
62
63
|
},
|
|
63
64
|
"scripts": {
|
|
64
65
|
"typecheck": "vue-tsc --noEmit",
|
|
66
|
+
"typecheck:test": "vue-tsc -p tsconfig.test.json --noEmit",
|
|
65
67
|
"build": "pnpm run typecheck && tsdown",
|
|
66
68
|
"test": "vitest run",
|
|
67
69
|
"test:watch": "vitest"
|