@d3-maps/vue 0.8.0 → 0.9.0

package/README.md

@@ -1,8 +1,18 @@
 # @d3-maps/vue
 
-Reactive SVG maps, powered by D3.  
+Reactive SVG maps, powered by D3  
 
-[docs](https://souljorje.github.io/d3-maps)
+[**Docs**](https://souljorje.github.io/d3-maps/guide) · [**Examples**](https://souljorje.github.io/d3-maps/examples)
+
+## Features
+
+- Drop-in components, powerful defaults
+- Zoom, drag, lines, markers, and more
+- Reactive rerender
+- Responsive by default
+- Lightweight and tree-shakable
+- SSR friendly
+- Supports TopoJSON and GeoJSON
 
 ## Installation
 
@@ -26,6 +36,27 @@ bun add @d3-maps/vue
 
 ## Usage
 
+```html
+<script setup lang="ts">
+import type { MapData } from '@d3-maps/core'
+
+import { MapBase, MapFeatures } from '@d3-maps/vue'
+defineProps<{
+  data: MapData
+}>()
+</script>
+
+<template>
+  <MapBase :data="data">
+    <MapFeatures />
+  </MapBase>
+</template>
+```
+
+### Plugin
+
+Registers all components in the app
+
 ```js
 import { createApp } from 'vue'
 import { plugin as D3MapsVue } from '@d3-maps/vue'
@@ -47,12 +78,6 @@ export default defineNuxtPlugin((nuxtApp) => {
 })
 ```
 
-## Styling
-
-Importing `@d3-maps/vue` automatically includes `@d3-maps/core/index.css`
-
-If you need strict stylesheet ordering, load your global reset/theme styles before importing the adapter entry
-
 ## License
 
 MIT licensed. Copyright © 2020 Georgii Bukharov. See [LICENSE](./LICENSE) for more details.

package/dist/index.d.ts

@@ -1,8 +1,8 @@
 import "@d3-maps/core/index.css";
-import * as vue6 from "vue";
-import { App, ComputedRef, InjectionKey, MaybeRef, StyleValue } from "vue";
+import * as vue0 from "vue";
+import { App, ComputedRef, InjectionKey, MaybeRef, Ref, StyleValue } from "vue";
 import { CurveFactory, CurveFactoryLineOnly } from "d3-shape";
-import { ExtendedFeature, ExtendedFeatureCollection, GeoGraticuleGenerator, GeoPath, GeoProjection } from "d3-geo";
+import { ExtendedFeature, ExtendedFeatureCollection, GeoGraticuleGenerator, GeoPath, GeoPermissibleObjects, GeoProjection } from "d3-geo";
 import { Topology } from "topojson-specification";
 import "topojson-client";
 import { D3ZoomEvent, ZoomBehavior } from "d3-zoom";
@@ -11,7 +11,7 @@ import { D3ZoomEvent, ZoomBehavior } from "d3-zoom";
 /**
  * Supported interaction states for map objects.
  */
-declare const mapObjectState: readonly ["default", "hover", "active"];
+declare const mapObjectState: readonly ["default", "hover", "active", "focus"];
 type MapObjectState = typeof mapObjectState[number];
 interface MapObjectProps<TStyle = unknown> {
   styles?: Partial<Record<MapObjectState, TStyle>>;
@@ -110,8 +110,8 @@ type MapData = ExtendedFeatureCollection | Topology;
 type DataTransformer = (features: MapFeature[]) => MapFeature[];
 /**
  * Extra projection method calls to apply before rendering.
- *
  * Use projection method names as keys and method arguments as values.
+ *
  * Example: `{ center: [[0, 20]], rotate: [[0, 0, 0]], scale: 160 }`
  *
  * @see https://d3js.org/d3-geo/projection
@@ -153,12 +153,30 @@ interface MapProps {
  * Adapters provide this context to child layers (features, markers, custom SVG).
  */
 interface MapContext {
+  /**
+   * Resolved SVG width used by the map.
+   */
   width: number;
+  /**
+   * Resolved SVG height used by the map.
+   */
   height: number;
+  /**
+   * Configured projection instance shared by map layers.
+   */
   projection: GeoProjection;
+  /**
+   * Normalized feature list after optional transformation.
+   */
   features: MapFeature[];
+  /**
+   * Shared path generator bound to the map projection.
+   */
   path: GeoPath;
-  renderMesh: () => ReturnType<GeoPath>;
+  /**
+   * Renders a TopoJSON mesh path when one is available.
+   */
+  renderMesh: () => string | null;
 }
 //#endregion
 //#region ../core/src/lib/line.d.ts
@@ -177,6 +195,20 @@ type MapLineCurve = CurveFactory | CurveFactoryLineOnly;
  * - second value: moves the generated midpoint perpendicular to the segment direction
  */
 type MapLineMidpoint = [number, number];
+/**
+ * Core line rendering options shared by framework adapters
+ */
+interface MapLineOptions {
+  coordinates: MapLineCoordinates;
+  cartesian?: boolean;
+  custom?: boolean;
+  curve?: MapLineCurve;
+  midpoint?: MapLineMidpoint;
+}
+/**
+ * Public map line props including map object styling and interaction support
+ */
+interface MapLineProps<TStyle = unknown> extends MapObjectProps<TStyle>, MapLineOptions {}
 //#endregion
 //#region ../core/src/lib/annotation.d.ts
 /**
@@ -225,6 +257,7 @@ interface MapMarkerProps<TStyle = unknown> extends MapObjectProps<TStyle> {
 //#endregion
 //#region ../core/src/lib/zoom.d.ts
 interface DefaultZoomBehavior extends ZoomBehavior<SVGSVGElement, unknown> {}
+type ZoomObject = GeoPermissibleObjects;
 /**
  * Extra zoom method calls to apply before rendering.
  *
@@ -235,21 +268,61 @@ interface DefaultZoomBehavior extends ZoomBehavior<SVGSVGElement, unknown> {}
  */
 interface ZoomModifiers extends MethodsToModifiers<DefaultZoomBehavior> {}
 interface ZoomProps {
+  /**
+   * Projected map-space point to keep centered in the viewport.
+   *
+   * If omitted, changing `zoom` alone preserves the current viewport center.
+   */
   center?: [number, number];
   zoom?: number;
   minZoom?: number;
   maxZoom?: number;
+  transition?: ZoomTransition;
   config?: ZoomModifiers;
 }
+/**
+ * D3 zoom event used by adapter components and hooks.
+ */
 interface ZoomEvent extends D3ZoomEvent<SVGSVGElement, unknown> {}
+/**
+ * Zoom lifecycle callbacks forwarded from the underlying D3 zoom behavior.
+ */
+interface ZoomEvents {
+  onZoomStart?: (event: ZoomEvent) => void;
+  onZoom?: (event: ZoomEvent) => void;
+  onZoomEnd?: (event: ZoomEvent) => void;
+}
+/**
+ * Full zoom behavior configuration, including view props and event callbacks.
+ */
+interface ZoomBehaviorOptions extends ZoomProps, ZoomEvents {}
+/**
+ * Transition settings for programmatic zoom updates.
+ */
+interface ZoomTransition {
+  duration?: number;
+  delay?: number;
+  ease?: (normalizedTime: number) => number;
+}
+/**
+ * Computed zoom target for an object fit operation.
+ */
+interface ObjectZoomView {
+  center: [number, number];
+  zoom: number;
+}
+/**
+ * Creates a D3 zoom behavior configured for the current map viewport.
+ */
+declare function createZoomBehavior(context?: Pick<MapContext, 'width' | 'height'>, options?: ZoomBehaviorOptions): DefaultZoomBehavior;
 //#endregion
 //#region src/components/MapAnnotation.vue.d.ts
-type __VLS_Props$4 = MapAnnotationProps<StyleValue>;
+type __VLS_Props$5 = MapAnnotationProps<StyleValue>;
 declare var __VLS_13: {};
 type __VLS_Slots$4 = {} & {
   default?: (props: typeof __VLS_13) => any;
 };
-declare const __VLS_base$4: vue6.DefineComponent<__VLS_Props$4, {}, {}, {}, {}, vue6.ComponentOptionsMixin, vue6.ComponentOptionsMixin, {}, string, vue6.PublicProps, Readonly<__VLS_Props$4> & Readonly<{}>, {}, {}, {}, {}, string, vue6.ComponentProvideOptions, false, {}, any>;
+declare const __VLS_base$4: vue0.DefineComponent<__VLS_Props$5, {}, {}, {}, {}, vue0.ComponentOptionsMixin, vue0.ComponentOptionsMixin, {}, string, vue0.PublicProps, Readonly<__VLS_Props$5> & Readonly<{}>, {}, {}, {}, {}, string, vue0.ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export$8: __VLS_WithSlots$4<typeof __VLS_base$4, __VLS_Slots$4>;
 declare const _default: typeof __VLS_export$8;
 type __VLS_WithSlots$4<T, S> = T & {
@@ -259,10 +332,16 @@ type __VLS_WithSlots$4<T, S> = T & {
 };
 //#endregion
 //#region src/components/MapBase.vue.d.ts
+type MapConfigProps = MapProps & {
+  context?: undefined;
+};
+type MapContextProps = Partial<MapProps> & {
+  context: MapContext;
+};
 type __VLS_Slots$3 = {
   default?: (props: MapContext) => unknown;
 };
-declare const __VLS_base$3: vue6.DefineComponent<MapProps, {}, {}, {}, {}, vue6.ComponentOptionsMixin, vue6.ComponentOptionsMixin, {}, string, vue6.PublicProps, Readonly<MapProps> & Readonly<{}>, {}, {}, {}, {}, string, vue6.ComponentProvideOptions, false, {}, any>;
+declare const __VLS_base$3: vue0.DefineComponent<MapConfigProps | MapContextProps, {}, {}, {}, {}, vue0.ComponentOptionsMixin, vue0.ComponentOptionsMixin, {}, string, vue0.PublicProps, Readonly<MapConfigProps | MapContextProps> & Readonly<{}>, {}, {}, {}, {}, string, vue0.ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export$7: __VLS_WithSlots$3<typeof __VLS_base$3, __VLS_Slots$3>;
 declare const _default$1: typeof __VLS_export$7;
 type __VLS_WithSlots$3<T, S> = T & {
@@ -272,21 +351,21 @@ type __VLS_WithSlots$3<T, S> = T & {
 };
 //#endregion
 //#region src/components/MapFeature.vue.d.ts
-type __VLS_Props$3 = MapFeatureProps<StyleValue>;
-declare const __VLS_export$6: vue6.DefineComponent<__VLS_Props$3, {}, {}, {}, {}, vue6.ComponentOptionsMixin, vue6.ComponentOptionsMixin, {}, string, vue6.PublicProps, Readonly<__VLS_Props$3> & Readonly<{}>, {}, {}, {}, {}, string, vue6.ComponentProvideOptions, false, {}, any>;
+type __VLS_Props$4 = MapFeatureProps<StyleValue>;
+declare const __VLS_export$6: vue0.DefineComponent<__VLS_Props$4, {}, {}, {}, {}, vue0.ComponentOptionsMixin, vue0.ComponentOptionsMixin, {}, string, vue0.PublicProps, Readonly<__VLS_Props$4> & Readonly<{}>, {}, {}, {}, {}, string, vue0.ComponentProvideOptions, false, {}, any>;
 declare const _default$2: typeof __VLS_export$6;
 //#endregion
 //#region src/components/MapFeatures.vue.d.ts
-type __VLS_Props$2 = MapFeaturesProps<StyleValue>;
+type __VLS_Props$3 = MapFeaturesProps<StyleValue>;
 declare var __VLS_1$2: {
   features: MapFeature[];
 };
 type __VLS_Slots$2 = {} & {
   default?: (props: typeof __VLS_1$2) => any;
 };
-declare const __VLS_base$2: vue6.DefineComponent<__VLS_Props$2, {}, {}, {}, {}, vue6.ComponentOptionsMixin, vue6.ComponentOptionsMixin, {}, string, vue6.PublicProps, Readonly<__VLS_Props$2> & Readonly<{}>, {
+declare const __VLS_base$2: vue0.DefineComponent<__VLS_Props$3, {}, {}, {}, {}, vue0.ComponentOptionsMixin, vue0.ComponentOptionsMixin, {}, string, vue0.PublicProps, Readonly<__VLS_Props$3> & Readonly<{}>, {
   idKey: string;
-}, {}, {}, {}, string, vue6.ComponentProvideOptions, false, {}, any>;
+}, {}, {}, {}, string, vue0.ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export$5: __VLS_WithSlots$2<typeof __VLS_base$2, __VLS_Slots$2>;
 declare const _default$3: typeof __VLS_export$5;
 type __VLS_WithSlots$2<T, S> = T & {
@@ -296,22 +375,16 @@ type __VLS_WithSlots$2<T, S> = T & {
 };
 //#endregion
 //#region src/components/MapGraticule.vue.d.ts
-type __VLS_Props$1 = MapGraticuleProps<StyleValue>;
-declare const __VLS_export$4: vue6.DefineComponent<__VLS_Props$1, {}, {}, {}, {}, vue6.ComponentOptionsMixin, vue6.ComponentOptionsMixin, {}, string, vue6.PublicProps, Readonly<__VLS_Props$1> & Readonly<{}>, {}, {}, {}, {}, string, vue6.ComponentProvideOptions, false, {}, any>;
+type __VLS_Props$2 = MapGraticuleProps<StyleValue>;
+declare const __VLS_export$4: vue0.DefineComponent<__VLS_Props$2, {}, {}, {}, {}, vue0.ComponentOptionsMixin, vue0.ComponentOptionsMixin, {}, string, vue0.PublicProps, Readonly<__VLS_Props$2> & Readonly<{}>, {}, {}, {}, {}, string, vue0.ComponentProvideOptions, false, {}, any>;
 declare const _default$4: typeof __VLS_export$4;
 //#endregion
 //#region src/components/MapLine.vue.d.ts
-interface Props$1 extends MapObjectProps<StyleValue> {
-  coordinates: MapLineCoordinates;
-  cartesian?: boolean;
-  custom?: boolean;
-  curve?: MapLineCurve;
-  midpoint?: [number, number];
-}
-declare const __VLS_export$3: vue6.DefineComponent<Props$1, {}, {}, {}, {}, vue6.ComponentOptionsMixin, vue6.ComponentOptionsMixin, {}, string, vue6.PublicProps, Readonly<Props$1> & Readonly<{}>, {
+type __VLS_Props$1 = MapLineProps<StyleValue>;
+declare const __VLS_export$3: vue0.DefineComponent<__VLS_Props$1, {}, {}, {}, {}, vue0.ComponentOptionsMixin, vue0.ComponentOptionsMixin, {}, string, vue0.PublicProps, Readonly<__VLS_Props$1> & Readonly<{}>, {
   cartesian: boolean;
   custom: boolean;
-}, {}, {}, {}, string, vue6.ComponentProvideOptions, false, {}, any>;
+}, {}, {}, {}, string, vue0.ComponentProvideOptions, false, {}, any>;
 declare const _default$5: typeof __VLS_export$3;
 //#endregion
 //#region src/components/MapMarker.vue.d.ts
@@ -322,9 +395,9 @@ declare var __VLS_1$1: {};
 type __VLS_Slots$1 = {} & {
   default?: (props: typeof __VLS_1$1) => any;
 };
-declare const __VLS_base$1: vue6.DefineComponent<Props, {}, {}, {}, {}, vue6.ComponentOptionsMixin, vue6.ComponentOptionsMixin, {}, string, vue6.PublicProps, Readonly<Props> & Readonly<{}>, {
+declare const __VLS_base$1: vue0.DefineComponent<Props, {}, {}, {}, {}, vue0.ComponentOptionsMixin, vue0.ComponentOptionsMixin, {}, string, vue0.PublicProps, Readonly<Props> & Readonly<{}>, {
   name: string;
-}, {}, {}, {}, string, vue6.ComponentProvideOptions, false, {}, any>;
+}, {}, {}, {}, string, vue0.ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export$2: __VLS_WithSlots$1<typeof __VLS_base$1, __VLS_Slots$1>;
 declare const _default$6: typeof __VLS_export$2;
 type __VLS_WithSlots$1<T, S> = T & {
@@ -335,7 +408,7 @@ type __VLS_WithSlots$1<T, S> = T & {
 //#endregion
 //#region src/components/MapMesh.vue.d.ts
 type __VLS_Props = MapObjectProps<StyleValue>;
-declare const __VLS_export$1: vue6.DefineComponent<__VLS_Props, {}, {}, {}, {}, vue6.ComponentOptionsMixin, vue6.ComponentOptionsMixin, {}, string, vue6.PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, vue6.ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export$1: vue0.DefineComponent<__VLS_Props, {}, {}, {}, {}, vue0.ComponentOptionsMixin, vue0.ComponentOptionsMixin, {}, string, vue0.PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, vue0.ComponentProvideOptions, false, {}, any>;
 declare const _default$7: typeof __VLS_export$1;
 //#endregion
 //#region src/components/MapZoom.vue.d.ts
@@ -343,23 +416,26 @@ declare var __VLS_1: {};
 type __VLS_Slots = {} & {
   default?: (props: typeof __VLS_1) => any;
 };
-declare const __VLS_base: vue6.DefineComponent<ZoomProps, {
-  container: vue6.Ref<SVGGElement | null, SVGGElement | null>;
-  zoomBehavior: vue6.ComputedRef<DefaultZoomBehavior>;
-}, {}, {}, {}, vue6.ComponentOptionsMixin, vue6.ComponentOptionsMixin, {} & {
+declare const __VLS_base: vue0.DefineComponent<ZoomProps, {
+  container: vue0.Ref<SVGGElement | null, SVGGElement | null>;
+  zoomBehavior: vue0.ComputedRef<DefaultZoomBehavior>;
+}, {}, {}, {}, vue0.ComponentOptionsMixin, vue0.ComponentOptionsMixin, {} & {
   zoom: (payload: ZoomEvent) => any;
-  zoomstart: (payload: ZoomEvent) => any;
-  zoomend: (payload: ZoomEvent) => any;
-}, string, vue6.PublicProps, Readonly<ZoomProps> & Readonly<{
+  zoomStart: (payload: ZoomEvent) => any;
+  zoomEnd: (payload: ZoomEvent) => any;
+  "update:center": (payload: [number, number]) => any;
+  "update:zoom": (payload: number) => any;
+}, string, vue0.PublicProps, Readonly<ZoomProps> & Readonly<{
   onZoom?: ((payload: ZoomEvent) => any) | undefined;
-  onZoomstart?: ((payload: ZoomEvent) => any) | undefined;
-  onZoomend?: ((payload: ZoomEvent) => any) | undefined;
+  onZoomStart?: ((payload: ZoomEvent) => any) | undefined;
+  onZoomEnd?: ((payload: ZoomEvent) => any) | undefined;
+  "onUpdate:center"?: ((payload: [number, number]) => any) | undefined;
+  "onUpdate:zoom"?: ((payload: number) => any) | undefined;
 }>, {
-  center: [number, number];
   zoom: number;
   minZoom: number;
   maxZoom: number;
-}, {}, {}, {}, string, vue6.ComponentProvideOptions, false, {}, any>;
+}, {}, {}, {}, string, vue0.ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
 declare const _default$8: typeof __VLS_export;
 type __VLS_WithSlots<T, S> = T & {
@@ -368,20 +444,52 @@ type __VLS_WithSlots<T, S> = T & {
   };
 };
 //#endregion
+//#region src/hooks/useCreateMapContext.d.ts
+declare function useCreateMapContext(config?: MaybeRef<Partial<MapProps> | undefined>, context?: MaybeRef<MapContext | undefined>): ComputedRef<MapContext | undefined>;
+//#endregion
 //#region src/hooks/useMapContext.d.ts
 declare const mapContextKey: InjectionKey<ComputedRef<MapContext>>;
-declare function useMapContext(): ComputedRef<MapContext> | undefined;
+declare function useMapContext(): ComputedRef<MapContext>;
 //#endregion
 //#region src/hooks/useMapObject.d.ts
 interface UseMapObjectResult {
   style: ComputedRef<StyleValue | undefined>;
-  onMouseenter: (event: MouseEvent) => void;
-  onMouseleave: (event: MouseEvent) => void;
+  onMouseenter: () => void;
+  onMouseleave: () => void;
   onMousedown: (event: MouseEvent) => void;
-  onMouseup: (event: MouseEvent) => void;
+  onMouseup: () => void;
+  onFocus: () => void;
+  onBlur: () => void;
 }
 declare function useMapObject(styles: MaybeRef<Partial<Record<MapObjectState, StyleValue>> | undefined>): UseMapObjectResult;
 //#endregion
+//#region src/hooks/useMapZoom.d.ts
+type ZoomToObjectCallback = (view: ObjectZoomView) => void;
+interface UseMapZoomResult {
+  center: ComputedRef<[number, number] | undefined>;
+  zoom: ComputedRef<number>;
+  minZoom: ComputedRef<number>;
+  maxZoom: ComputedRef<number>;
+  zoomToObject: (object: ZoomObject, callback: ZoomToObjectCallback) => void;
+}
+declare const mapZoomKey: InjectionKey<UseMapZoomResult>;
+interface MapZoomEventCallbacks {
+  onZoomStart?: (event: ZoomEvent) => void;
+  onZoom?: (event: ZoomEvent) => void;
+  onZoomEnd?: (event: ZoomEvent) => void;
+}
+interface ZoomPropsWithDefaults extends ZoomProps {
+  zoom: number;
+  minZoom: number;
+  maxZoom: number;
+}
+interface CreateMapZoomResult {
+  zoomBehavior: ComputedRef<ReturnType<typeof createZoomBehavior>>;
+  zoomContext: UseMapZoomResult;
+}
+declare function useCreateMapZoom(container: Ref<SVGGElement | null>, props: Readonly<ZoomPropsWithDefaults>, eventCallbacks: MapZoomEventCallbacks): CreateMapZoomResult;
+declare function useMapZoom(): UseMapZoomResult | undefined;
+//#endregion
 //#region src/plugin.d.ts
 /**
  * Vue plugin that registers all d3-maps components globally.
@@ -390,4 +498,4 @@ declare const plugin: {
   install(app: App): void;
 };
 //#endregion
-export { _default as MapAnnotation, _default$1 as MapBase, _default$2 as MapFeature, _default$3 as MapFeatures, _default$4 as MapGraticule, _default$5 as MapLine, _default$6 as MapMarker, _default$7 as MapMesh, _default$8 as MapZoom, UseMapObjectResult, mapContextKey, plugin, useMapContext, useMapObject };
+export { CreateMapZoomResult, _default as MapAnnotation, _default$1 as MapBase, _default$2 as MapFeature, _default$3 as MapFeatures, _default$4 as MapGraticule, _default$5 as MapLine, _default$6 as MapMarker, _default$7 as MapMesh, _default$8 as MapZoom, MapZoomEventCallbacks, UseMapObjectResult, UseMapZoomResult, ZoomPropsWithDefaults, ZoomToObjectCallback, mapContextKey, mapZoomKey, plugin, useCreateMapContext, useCreateMapZoom, useMapContext, useMapObject, useMapZoom };

package/dist/index.iife.js

@@ -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`);function s(){return(0,n.inject)(o)}let c=Symbol(`InsideZoom`);function l(){return(0,n.inject)(c,!1)}function u(e){let t=(0,n.ref)(`default`),{onMouseenter:i,onMouseleave:a,onMouseup:o,onMousedown:s,dispose:c}=(0,r.useMapObjectEvents)(e=>{t.value=e},l());return(0,n.onBeforeUnmount)(()=>{c()}),{style:(0,n.computed)(()=>(0,r.resolveObjectStyle)(t.value,(0,n.unref)(e))),onMouseenter:i,onMouseleave:a,onMousedown:s,onMouseup:o}}let d=[`d`];var f=(0,n.defineComponent)({inheritAttrs:!1,__name:`MapLine`,props:{coordinates:{},cartesian:{type:Boolean,default:!1},custom:{type:Boolean,default:!1},curve:{},midpoint:{},styles:{}},setup(e){let t=e,i=(0,n.useAttrs)(),a=s(),o=(0,n.computed)(()=>(0,r.getLinePath)(a?.value,{coordinates:t.coordinates,custom:t.custom,curve:t.curve,cartesian:t.cartesian,midpoint:t.midpoint})),c=(0,n.computed)(()=>i.name??`line`),{style:l,...f}=u((0,n.toRef)(t,`styles`)),p=(0,n.computed)(()=>({...i,...f,name:c.value}));return(e,t)=>((0,n.openBlock)(),(0,n.createElementBlock)(`path`,(0,n.mergeProps)(p.value,{d:o.value,fill:`none`,style:(0,n.unref)(l)}),null,16,d))}});let p=[`transform`,`name`];var m=(0,n.defineComponent)({__name:`MapMarker`,props:{name:{default:`marker`},coordinates:{},styles:{}},setup(e){let t=e,i=s(),a=(0,n.computed)(()=>(0,r.getMarkerTransform)(i?.value,t.coordinates)),{style:o,...c}=u((0,n.toRef)(t,`styles`));return(t,r)=>a.value?((0,n.openBlock)(),(0,n.createElementBlock)(`g`,(0,n.mergeProps)({key:0,transform:a.value,style:(0,n.unref)(o),name:e.name},c),[(0,n.renderSlot)(t.$slots,`default`)],16,p)):(0,n.createCommentVNode)(`v-if`,!0)}});let h=[`transform`],g=[`transform`];var _=(0,n.defineComponent)({inheritAttrs:!1,__name:`MapAnnotation`,props:{coordinates:{},length:{},angle:{},margin:{},curve:{type:Function},midpoint:{},styles:{}},setup(e){let t=e,i=(0,n.computed)(()=>(0,r.getAnnotationGeometry)({length:t.length,angle:t.angle,margin:t.margin}));return(t,r)=>((0,n.openBlock)(),(0,n.createBlock)(m,{coordinates:e.coordinates,name:`annotation`},{default:(0,n.withCtx)(()=>[(0,n.createElementVNode)(`g`,{transform:i.value.lineTransform},[(0,n.createVNode)(f,(0,n.mergeProps)(t.$attrs,{coordinates:i.value.lineCoordinates,cartesian:``,curve:e.curve,midpoint:e.midpoint,styles:e.styles,fill:`none`,name:`annotation-line`}),null,16,[`coordinates`,`curve`,`midpoint`,`styles`])],8,h),(0,n.createElementVNode)(`g`,{transform:i.value.contentTransform,name:`annotation-content`},[(0,n.renderSlot)(t.$slots,`default`)],8,g)]),_:3},8,[`coordinates`]))}});let v=[`viewBox`];var y=(0,n.defineComponent)({__name:`MapBase`,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,v))}});let b=[`d`];var x=(0,n.defineComponent)({__name:`MapFeature`,props:{data:{},styles:{}},setup(e){let t=e,{style:r,...i}=u((0,n.toRef)(t,`styles`)),a=s(),o=(0,n.computed)(()=>a?.value.path(t.data)??void 0);return(e,t)=>((0,n.openBlock)(),(0,n.createElementBlock)(`path`,(0,n.mergeProps)({d:o.value,style:(0,n.unref)(r)},i,{name:`feature`}),null,16,b))}});let S={name:`features`};var C=(0,n.defineComponent)({__name:`MapFeatures`,props:{idKey:{default:`id`},styles:{}},setup(e){let t=s(),i=(0,n.computed)(()=>t?.value.features??[]);return(t,a)=>((0,n.openBlock)(),(0,n.createElementBlock)(`g`,S,[(0,n.renderSlot)(t.$slots,`default`,{features:i.value},()=>[((0,n.openBlock)(!0),(0,n.createElementBlock)(n.Fragment,null,(0,n.renderList)(i.value,(t,i)=>((0,n.openBlock)(),(0,n.createBlock)(x,{key:(0,n.unref)(r.getFeatureKey)(t,e.idKey,i),data:t,styles:e.styles},null,8,[`data`,`styles`]))),128))])]))}});let w=[`d`,`fill`],T=[`d`],E=[`d`,`stroke`];var D=(0,n.defineComponent)({inheritAttrs:!1,__name:`MapGraticule`,props:{config:{},background:{type:[Boolean,String]},border:{type:[Boolean,String]},styles:{}},setup(e){let t=e,i=s(),a=(0,n.useAttrs)(),o=(0,n.computed)(()=>{if(i?.value)return(0,r.renderGraticule)(i.value,t.config)??void 0}),c=(0,n.computed)(()=>{if(i?.value)return(0,r.renderOutline)(i.value)??void 0}),l=(0,n.computed)(()=>(0,r.isString)(t.background)?t.background:void 0),d=(0,n.computed)(()=>(0,r.isString)(t.border)?t.border:void 0),{style:f,...p}=u((0,n.toRef)(t,`styles`));return(t,r)=>((0,n.openBlock)(),(0,n.createElementBlock)(`g`,null,[e.background?((0,n.openBlock)(),(0,n.createElementBlock)(`path`,{key:0,d:c.value,fill:l.value,"pointer-events":`none`,name:`background`},null,8,w)):(0,n.createCommentVNode)(`v-if`,!0),(0,n.createElementVNode)(`path`,(0,n.mergeProps)({d:o.value,fill:`none`,style:(0,n.unref)(f)},(0,n.mergeProps)(p,(0,n.unref)(a)),{name:`graticule`}),null,16,T),e.border?((0,n.openBlock)(),(0,n.createElementBlock)(`path`,{key:1,d:c.value,fill:`none`,stroke:d.value,"pointer-events":`none`,name:`border`},null,8,E)):(0,n.createCommentVNode)(`v-if`,!0)]))}});let O=[`d`];var k=(0,n.defineComponent)({__name:`MapMesh`,props:{styles:{}},setup(e){let t=e,r=s(),i=(0,n.computed)(()=>r?.value.renderMesh()??void 0),{style:a,...o}=u((0,n.toRef)(t,`styles`));return(e,t)=>((0,n.openBlock)(),(0,n.createElementBlock)(`path`,(0,n.mergeProps)({d:i.value,fill:`none`,style:(0,n.unref)(a)},o,{name:`mesh`}),null,16,O))}}),A=(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,l=(0,n.ref)(null),u=s();(0,n.provide)(c,!0);let d=(0,n.computed)(()=>(0,r.createZoomBehavior)(u?.value,{minZoom:a.minZoom,maxZoom:a.maxZoom,config:a.config,onZoomStart:e=>o(`zoomstart`,e),onZoom:e=>{(0,r.applyZoomGroupTransform)(l.value,e.transform),o(`zoom`,e)},onZoomEnd:e=>o(`zoomend`,e)}));return(0,n.onMounted)(()=>{(0,n.watch)(d,e=>{l.value&&(0,r.setupZoom)({element:l.value,behavior:e,center:a.center,zoom:a.zoom})},{immediate:!0}),(0,n.watch)(()=>[d.value,a.center[0],a.center[1],a.zoom],()=>{l.value&&(0,r.applyZoomTransform)({element:l.value,behavior:d.value,center:a.center,zoom:a.zoom})})}),t({container:l,zoomBehavior:d}),(e,t)=>((0,n.openBlock)(),(0,n.createElementBlock)(`g`,{ref_key:`container`,ref:l,name:`zoom`},[(0,n.renderSlot)(e.$slots,`default`)],512))}}),j=a({MapAnnotation:()=>_,MapBase:()=>y,MapFeature:()=>x,MapFeatures:()=>C,MapGraticule:()=>D,MapLine:()=>f,MapMarker:()=>m,MapMesh:()=>k,MapZoom:()=>A});e.MapAnnotation=_,e.MapBase=y,e.MapFeature=x,e.MapFeatures=C,e.MapGraticule=D,e.MapLine=f,e.MapMarker=m,e.MapMesh=k,e.MapZoom=A,e.mapContextKey=o,e.plugin={install(e){Object.entries(j).forEach(([t,n])=>{e.component(t,n)})}},e.useMapContext=s,e.useMapObject=u})(this.D3Maps=this.D3Maps||{},_d3_maps_core_index_css,Vue,D3Maps);
+(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(){let e=(0,n.inject)(o);if(!e)throw Error(`useMapContext must be used inside Map`);return e}let c=Symbol(`MapZoom`);function l(e,t,i){let a=s(),o=(0,n.computed)(()=>t.center?.[0]),l=(0,n.computed)(()=>t.center?.[1]),u=(0,n.computed)(()=>(0,r.createZoomBehavior)(a.value,{minZoom:t.minZoom,maxZoom:t.maxZoom,config:t.config,onZoomStart:e=>i.onZoomStart?.(e),onZoom:t=>{(0,r.applyZoomGroupTransform)(e.value,t.transform),i.onZoom?.(t)},onZoomEnd:e=>i.onZoomEnd?.(e)})),d={center:(0,n.computed)(()=>t.center),zoom:(0,n.computed)(()=>t.zoom),minZoom:(0,n.computed)(()=>t.minZoom),maxZoom:(0,n.computed)(()=>t.maxZoom),zoomToObject:(e,n)=>{let i=(0,r.getObjectZoomView)(a.value,e,{minZoom:t.minZoom,maxZoom:t.maxZoom});i&&n(i)}};(0,n.provide)(c,d);let f,p;return(0,n.onMounted)(()=>{f=(0,n.watch)(u,t=>{e.value&&(0,r.setupZoom)({element:e.value,behavior:t})},{immediate:!0}),p=(0,n.watch)([o,l,()=>t.zoom,()=>t.transition,u],()=>{e.value&&(0,r.applyZoom)({element:e.value,behavior:u.value,center:t.center,zoom:t.zoom,transition:t.transition})},{immediate:!0})}),(0,n.onUnmounted)(()=>{f?.(),p?.()}),{zoomBehavior:u,zoomContext:d}}function u(){let e=(0,n.inject)(c,void 0),t=(0,n.inject)(o,void 0);if(e)return{...e,zoomToObject:(n,i)=>{if(!t?.value)return;let a=(0,r.getObjectZoomView)(t.value,n,{minZoom:e.minZoom.value,maxZoom:e.maxZoom.value});a&&i(a)}}}function d(e){let t=(0,n.ref)(`default`),{onMouseenter:i,onMouseleave:a,onMouseup:o,onMousedown:s,onFocus:c,onBlur:l,dispose:d}=(0,r.useMapObjectEvents)(e=>{t.value=e},!!u());return(0,n.onBeforeUnmount)(()=>{d()}),{style:(0,n.computed)(()=>(0,r.resolveObjectStyle)(t.value,(0,n.unref)(e))),onMouseenter:i,onMouseleave:a,onMousedown:s,onMouseup:o,onFocus:c,onBlur:l}}let f=[`d`,`fill`];var p=(0,n.defineComponent)({inheritAttrs:!1,__name:`MapLine`,props:{styles:{},coordinates:{},cartesian:{type:Boolean,default:!1},custom:{type:Boolean,default:!1},curve:{},midpoint:{}},setup(e){let t=e,i=(0,n.useAttrs)(),a=s(),o=(0,n.computed)(()=>(0,r.getLinePath)(a.value,{coordinates:t.coordinates,custom:t.custom,curve:t.curve,cartesian:t.cartesian,midpoint:t.midpoint})),c=(0,n.computed)(()=>i.name??`line`),l=(0,n.computed)(()=>i.fill??`none`),{style:u,...p}=d((0,n.toRef)(t,`styles`)),m=(0,n.computed)(()=>({...i,...p,name:c.value}));return(e,t)=>((0,n.openBlock)(),(0,n.createElementBlock)(`path`,(0,n.mergeProps)(m.value,{d:o.value,fill:l.value,style:(0,n.unref)(u)}),null,16,f))}});let m=[`transform`,`name`];var h=(0,n.defineComponent)({__name:`MapMarker`,props:{name:{default:`marker`},coordinates:{},styles:{}},setup(e){let t=e,i=s(),a=(0,n.computed)(()=>(0,r.getMarkerTransform)(i.value,t.coordinates)),{style:o,...c}=d((0,n.toRef)(t,`styles`));return(t,r)=>a.value?((0,n.openBlock)(),(0,n.createElementBlock)(`g`,(0,n.mergeProps)({key:0,transform:a.value,style:(0,n.unref)(o),name:e.name},c),[(0,n.renderSlot)(t.$slots,`default`)],16,m)):(0,n.createCommentVNode)(`v-if`,!0)}});let g=[`transform`],_=[`transform`];var v=(0,n.defineComponent)({inheritAttrs:!1,__name:`MapAnnotation`,props:{coordinates:{},length:{},angle:{},margin:{},curve:{type:Function},midpoint:{},styles:{}},setup(e){let t=e,i=(0,n.computed)(()=>(0,r.getAnnotationGeometry)({length:t.length,angle:t.angle,margin:t.margin}));return(t,r)=>((0,n.openBlock)(),(0,n.createBlock)(h,{coordinates:e.coordinates,name:`annotation`},{default:(0,n.withCtx)(()=>[(0,n.createElementVNode)(`g`,{transform:i.value.lineTransform},[(0,n.createVNode)(p,(0,n.mergeProps)(t.$attrs,{coordinates:i.value.lineCoordinates,cartesian:``,curve:e.curve,midpoint:e.midpoint,styles:e.styles,fill:`none`,name:`annotation-line`}),null,16,[`coordinates`,`curve`,`midpoint`,`styles`])],8,g),(0,n.createElementVNode)(`g`,{transform:i.value.contentTransform,name:`annotation-content`},[(0,n.renderSlot)(t.$slots,`default`)],8,_)]),_:3},8,[`coordinates`]))}});function y(e,t){return(0,n.computed)(()=>{let i=(0,n.unref)(t);if(i)return i;let a=(0,n.unref)(e);if(a?.data)return(0,r.makeMapContext)(a)})}let b=[`viewBox`];var x=(0,n.defineComponent)({__name:`MapBase`,props:{width:{},height:{},aspectRatio:{},projection:{type:Function},projectionConfig:{},data:{},dataTransformer:{type:Function},context:{}},setup(e){let t=e,r=y(t,(0,n.toRef)(t,`context`)),i=(0,n.computed)(()=>{if(!r.value)throw Error(`Map requires data or context`);return r.value});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,b))}});let S=[`d`];var C=(0,n.defineComponent)({__name:`MapFeature`,props:{data:{},styles:{}},setup(e){let t=e,{style:r,...i}=d((0,n.toRef)(t,`styles`)),a=s(),o=(0,n.computed)(()=>a.value.path(t.data)??void 0);return(e,t)=>((0,n.openBlock)(),(0,n.createElementBlock)(`path`,(0,n.mergeProps)({d:o.value,style:(0,n.unref)(r)},i,{name:`feature`}),null,16,S))}});let w={name:`features`};var T=(0,n.defineComponent)({__name:`MapFeatures`,props:{idKey:{default:`id`},styles:{}},setup(e){let t=s(),i=(0,n.computed)(()=>t.value.features);return(t,a)=>((0,n.openBlock)(),(0,n.createElementBlock)(`g`,w,[(0,n.renderSlot)(t.$slots,`default`,{features:i.value},()=>[((0,n.openBlock)(!0),(0,n.createElementBlock)(n.Fragment,null,(0,n.renderList)(i.value,(t,i)=>((0,n.openBlock)(),(0,n.createBlock)(C,{key:(0,n.unref)(r.getFeatureKey)(t,e.idKey,i),data:t,styles:e.styles},null,8,[`data`,`styles`]))),128))])]))}});let E=[`d`,`fill`],D=[`d`],O=[`d`,`stroke`];var k=(0,n.defineComponent)({inheritAttrs:!1,__name:`MapGraticule`,props:{config:{},background:{type:[Boolean,String]},border:{type:[Boolean,String]},styles:{}},setup(e){let t=e,i=s(),a=(0,n.useAttrs)(),o=(0,n.computed)(()=>(0,r.renderGraticule)(i.value,t.config)??void 0),c=(0,n.computed)(()=>(0,r.renderOutline)(i.value)??void 0),l=(0,n.computed)(()=>(0,r.isString)(t.background)?t.background:void 0),u=(0,n.computed)(()=>(0,r.isString)(t.border)?t.border:void 0),{style:f,...p}=d((0,n.toRef)(t,`styles`));return(t,r)=>((0,n.openBlock)(),(0,n.createElementBlock)(`g`,null,[e.background?((0,n.openBlock)(),(0,n.createElementBlock)(`path`,{key:0,d:c.value,fill:l.value,"pointer-events":`none`,name:`background`},null,8,E)):(0,n.createCommentVNode)(`v-if`,!0),(0,n.createElementVNode)(`path`,(0,n.mergeProps)({d:o.value,fill:`none`,style:(0,n.unref)(f)},(0,n.mergeProps)(p,(0,n.unref)(a)),{name:`graticule`}),null,16,D),e.border?((0,n.openBlock)(),(0,n.createElementBlock)(`path`,{key:1,d:c.value,fill:`none`,stroke:u.value,"pointer-events":`none`,name:`border`},null,8,O)):(0,n.createCommentVNode)(`v-if`,!0)]))}});let A=[`d`];var j=(0,n.defineComponent)({__name:`MapMesh`,props:{styles:{}},setup(e){let t=e,r=s(),i=(0,n.computed)(()=>r.value.renderMesh()??void 0),{style:a,...o}=d((0,n.toRef)(t,`styles`));return(e,t)=>((0,n.openBlock)(),(0,n.createElementBlock)(`path`,(0,n.mergeProps)({d:i.value,fill:`none`,style:(0,n.unref)(a)},o,{name:`mesh`}),null,16,A))}}),M=(0,n.defineComponent)({__name:`MapZoom`,props:{center:{},zoom:{default:1},minZoom:{default:1},maxZoom:{default:8},transition:{},config:{}},emits:[`zoomStart`,`zoom`,`zoomEnd`,`update:center`,`update:zoom`],setup(e,{expose:t,emit:i}){let a=e,o=i,c=(0,n.ref)(null),u=s();function d(e,t){return!!(t&&e[0]===t[0]&&e[1]===t[1])}let{zoomBehavior:f}=l(c,a,{onZoomStart:e=>o(`zoomStart`,e),onZoom:e=>{let t=(0,r.getZoomViewportCenter)(u.value,e.transform),n=e.transform.k;d(t,a.center)||o(`update:center`,t),n!==a.zoom&&o(`update:zoom`,n),o(`zoom`,e)},onZoomEnd:e=>o(`zoomEnd`,e)});return t({container:c,zoomBehavior:f}),(e,t)=>((0,n.openBlock)(),(0,n.createElementBlock)(`g`,{ref_key:`container`,ref:c,name:`zoom`},[(0,n.renderSlot)(e.$slots,`default`)],512))}}),N=a({MapAnnotation:()=>v,MapBase:()=>x,MapFeature:()=>C,MapFeatures:()=>T,MapGraticule:()=>k,MapLine:()=>p,MapMarker:()=>h,MapMesh:()=>j,MapZoom:()=>M});e.MapAnnotation=v,e.MapBase=x,e.MapFeature=C,e.MapFeatures=T,e.MapGraticule=k,e.MapLine=p,e.MapMarker=h,e.MapMesh=j,e.MapZoom=M,e.mapContextKey=o,e.mapZoomKey=c,e.plugin={install(e){Object.entries(N).forEach(([t,n])=>{e.component(t,n)})}},e.useCreateMapContext=y,e.useCreateMapZoom=l,e.useMapContext=s,e.useMapObject=d,e.useMapZoom=u})(this.D3Maps=this.D3Maps||{},_d3_maps_core_index_css,Vue,D3Maps);

package/dist/index.js

@@ -1,6 +1,6 @@
 import "@d3-maps/core/index.css";
-import { Fragment, computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createVNode, defineComponent, guardReactiveProps, inject, mergeProps, normalizeProps, onBeforeUnmount, onMounted, openBlock, provide, ref, renderList, renderSlot, toRef, unref, useAttrs, watch, withCtx } from "vue";
-import { applyZoomGroupTransform, applyZoomTransform, createZoomBehavior, getAnnotationGeometry, getFeatureKey, getLinePath, getMarkerTransform, isString, makeMapContext, renderGraticule, renderOutline, resolveObjectStyle, setupZoom, useMapObjectEvents } from "@d3-maps/core";
+import { Fragment, computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createVNode, defineComponent, guardReactiveProps, inject, mergeProps, normalizeProps, onBeforeUnmount, onMounted, onUnmounted, openBlock, provide, ref, renderList, renderSlot, toRef, unref, useAttrs, watch, withCtx } from "vue";
+import { applyZoom, applyZoomGroupTransform, createZoomBehavior, getAnnotationGeometry, getFeatureKey, getLinePath, getMarkerTransform, getObjectZoomView, getZoomViewportCenter, isString, makeMapContext, renderGraticule, renderOutline, resolveObjectStyle, setupZoom, useMapObjectEvents } from "@d3-maps/core";
 
 //#region rolldown:runtime
 var __defProp = Object.defineProperty;
@@ -22,23 +22,107 @@ var __exportAll = (all, symbols) => {
 //#region src/hooks/useMapContext.ts
 const mapContextKey = Symbol("MapContext");
 function useMapContext() {
-	return inject(mapContextKey);
+	const context = inject(mapContextKey);
+	if (!context) throw new Error("useMapContext must be used inside Map");
+	return context;
 }
 
 //#endregion
-//#region src/hooks/useInsideZoom.ts
-const insideZoomKey = Symbol("InsideZoom");
-function useInsideZoom() {
-	return inject(insideZoomKey, false);
+//#region src/hooks/useMapZoom.ts
+const mapZoomKey = Symbol("MapZoom");
+function useCreateMapZoom(container, props, eventCallbacks) {
+	const context = useMapContext();
+	const centerX = computed(() => props.center?.[0]);
+	const centerY = computed(() => props.center?.[1]);
+	const zoomBehavior = computed(() => {
+		return createZoomBehavior(context.value, {
+			minZoom: props.minZoom,
+			maxZoom: props.maxZoom,
+			config: props.config,
+			onZoomStart: (event) => eventCallbacks.onZoomStart?.(event),
+			onZoom: (event) => {
+				applyZoomGroupTransform(container.value, event.transform);
+				eventCallbacks.onZoom?.(event);
+			},
+			onZoomEnd: (event) => eventCallbacks.onZoomEnd?.(event)
+		});
+	});
+	const zoomContext = {
+		center: computed(() => props.center),
+		zoom: computed(() => props.zoom),
+		minZoom: computed(() => props.minZoom),
+		maxZoom: computed(() => props.maxZoom),
+		zoomToObject: (object, callback) => {
+			const view = getObjectZoomView(context.value, object, {
+				minZoom: props.minZoom,
+				maxZoom: props.maxZoom
+			});
+			if (!view) return;
+			callback(view);
+		}
+	};
+	provide(mapZoomKey, zoomContext);
+	let stopBehaviorWatch;
+	let stopViewWatch;
+	onMounted(() => {
+		stopBehaviorWatch = watch(zoomBehavior, (behavior) => {
+			if (!container.value) return;
+			setupZoom({
+				element: container.value,
+				behavior
+			});
+		}, { immediate: true });
+		stopViewWatch = watch([
+			centerX,
+			centerY,
+			() => props.zoom,
+			() => props.transition,
+			zoomBehavior
+		], () => {
+			if (!container.value) return;
+			applyZoom({
+				element: container.value,
+				behavior: zoomBehavior.value,
+				center: props.center,
+				zoom: props.zoom,
+				transition: props.transition
+			});
+		}, { immediate: true });
+	});
+	onUnmounted(() => {
+		stopBehaviorWatch?.();
+		stopViewWatch?.();
+	});
+	return {
+		zoomBehavior,
+		zoomContext
+	};
+}
+function useMapZoom() {
+	const zoomContext = inject(mapZoomKey, void 0);
+	const mapContext = inject(mapContextKey, void 0);
+	if (!zoomContext) return void 0;
+	return {
+		...zoomContext,
+		zoomToObject: (object, callback) => {
+			if (!mapContext?.value) return;
+			const view = getObjectZoomView(mapContext.value, object, {
+				minZoom: zoomContext.minZoom.value,
+				maxZoom: zoomContext.maxZoom.value
+			});
+			if (!view) return;
+			callback(view);
+		}
+	};
 }
 
 //#endregion
 //#region src/hooks/useMapObject.ts
 function useMapObject(styles) {
 	const state = ref("default");
-	const { onMouseenter, onMouseleave, onMouseup, onMousedown, dispose } = useMapObjectEvents((nextState) => {
+	const { onMouseenter, onMouseleave, onMouseup, onMousedown, onFocus, onBlur, dispose } = useMapObjectEvents((nextState) => {
 		state.value = nextState;
-	}, useInsideZoom());
+	}, Boolean(useMapZoom()));
 	onBeforeUnmount(() => {
 		dispose();
 	});
@@ -47,17 +131,20 @@ function useMapObject(styles) {
 		onMouseenter,
 		onMouseleave,
 		onMousedown,
-		onMouseup
+		onMouseup,
+		onFocus,
+		onBlur
 	};
 }
 
 //#endregion
 //#region src/components/MapLine.vue?vue&type=script&setup=true&lang.ts
-const _hoisted_1$7 = ["d"];
+const _hoisted_1$7 = ["d", "fill"];
 var MapLine_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
 	inheritAttrs: false,
 	__name: "MapLine",
 	props: {
+		styles: {},
 		coordinates: {},
 		cartesian: {
 			type: Boolean,
@@ -68,15 +155,14 @@ var MapLine_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ define
 			default: false
 		},
 		curve: {},
-		midpoint: {},
-		styles: {}
+		midpoint: {}
 	},
 	setup(__props) {
 		const props = __props;
 		const attrs = useAttrs();
 		const context = useMapContext();
 		const path = computed(() => {
-			return getLinePath(context?.value, {
+			return getLinePath(context.value, {
 				coordinates: props.coordinates,
 				custom: props.custom,
 				curve: props.curve,
@@ -85,6 +171,7 @@ var MapLine_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ define
 			});
 		});
 		const pathName = computed(() => attrs.name ?? "line");
+		const fill = computed(() => attrs.fill ?? "none");
 		const { style, ...events } = useMapObject(toRef(props, "styles"));
 		const pathAttrs = computed(() => ({
 			...attrs,
@@ -94,7 +181,7 @@ var MapLine_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ define
 		return (_ctx, _cache) => {
 			return openBlock(), createElementBlock("path", mergeProps(pathAttrs.value, {
 				d: path.value,
-				fill: "none",
+				fill: fill.value,
 				style: unref(style)
 			}), null, 16, _hoisted_1$7);
 		};
@@ -118,7 +205,9 @@ var MapMarker_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defi
 	setup(__props) {
 		const props = __props;
 		const context = useMapContext();
-		const transform = computed(() => getMarkerTransform(context?.value, props.coordinates));
+		const transform = computed(() => {
+			return getMarkerTransform(context.value, props.coordinates);
+		});
 		const { style, ...events } = useMapObject(toRef(props, "styles"));
 		return (_ctx, _cache) => {
 			return transform.value ? (openBlock(), createElementBlock("g", mergeProps({
@@ -190,6 +279,18 @@ var MapAnnotation_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */
 //#region src/components/MapAnnotation.vue
 var MapAnnotation_default = MapAnnotation_vue_vue_type_script_setup_true_lang_default;
 
+//#endregion
+//#region src/hooks/useCreateMapContext.ts
+function useCreateMapContext(config, context) {
+	return computed(() => {
+		const resolvedContext = unref(context);
+		if (resolvedContext) return resolvedContext;
+		const resolvedConfig = unref(config);
+		if (!resolvedConfig?.data) return void 0;
+		return makeMapContext(resolvedConfig);
+	});
+}
+
 //#endregion
 //#region src/components/MapBase.vue?vue&type=script&setup=true&lang.ts
 const _hoisted_1$4 = ["viewBox"];
@@ -202,19 +303,16 @@ var MapBase_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ define
 		projection: { type: Function },
 		projectionConfig: {},
 		data: {},
-		dataTransformer: { type: Function }
+		dataTransformer: { type: Function },
+		context: {}
 	},
 	setup(__props) {
 		const props = __props;
-		const context = computed(() => makeMapContext({
-			width: props.width,
-			height: props.height,
-			aspectRatio: props.aspectRatio,
-			projection: props.projection,
-			projectionConfig: props.projectionConfig,
-			data: props.data,
-			dataTransformer: props.dataTransformer
-		}));
+		const unresolvedContext = useCreateMapContext(props, toRef(props, "context"));
+		const context = computed(() => {
+			if (!unresolvedContext.value) throw new Error("Map requires data or context");
+			return unresolvedContext.value;
+		});
 		provide(mapContextKey, context);
 		return (_ctx, _cache) => {
 			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$4);
@@ -239,7 +337,7 @@ var MapFeature_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ def
 		const props = __props;
 		const { style, ...events } = useMapObject(toRef(props, "styles"));
 		const context = useMapContext();
-		const path = computed(() => context?.value.path(props.data) ?? void 0);
+		const path = computed(() => context.value.path(props.data) ?? void 0);
 		return (_ctx, _cache) => {
 			return openBlock(), createElementBlock("path", mergeProps({
 				d: path.value,
@@ -264,7 +362,7 @@ var MapFeatures_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ de
 	},
 	setup(__props) {
 		const context = useMapContext();
-		const features = computed(() => context?.value.features ?? []);
+		const features = computed(() => context.value.features);
 		return (_ctx, _cache) => {
 			return openBlock(), createElementBlock("g", _hoisted_1$2, [renderSlot(_ctx.$slots, "default", { features: features.value }, () => [(openBlock(true), createElementBlock(Fragment, null, renderList(features.value, (feature, index) => {
 				return openBlock(), createBlock(MapFeature_default, {
@@ -300,11 +398,9 @@ var MapGraticule_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ d
 		const context = useMapContext();
 		const attrs = useAttrs();
 		const graticulePath = computed(() => {
-			if (!context?.value) return void 0;
 			return renderGraticule(context.value, props.config) ?? void 0;
 		});
 		const outlinePath = computed(() => {
-			if (!context?.value) return void 0;
 			return renderOutline(context.value) ?? void 0;
 		});
 		const backgroundColor = computed(() => isString(props.background) ? props.background : void 0);
@@ -350,7 +446,7 @@ var MapMesh_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ define
 	setup(__props) {
 		const props = __props;
 		const context = useMapContext();
-		const path = computed(() => context?.value.renderMesh() ?? void 0);
+		const path = computed(() => context.value.renderMesh() ?? void 0);
 		const { style, ...events } = useMapObject(toRef(props, "styles"));
 		return (_ctx, _cache) => {
 			return openBlock(), createElementBlock("path", mergeProps({
@@ -371,60 +467,38 @@ var MapMesh_default = MapMesh_vue_vue_type_script_setup_true_lang_default;
 var MapZoom_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
 	__name: "MapZoom",
 	props: {
-		center: { default: () => [0, 0] },
+		center: {},
 		zoom: { default: 1 },
 		minZoom: { default: 1 },
 		maxZoom: { default: 8 },
+		transition: {},
 		config: {}
 	},
 	emits: [
-		"zoomstart",
+		"zoomStart",
 		"zoom",
-		"zoomend"
+		"zoomEnd",
+		"update:center",
+		"update:zoom"
 	],
 	setup(__props, { expose: __expose, emit: __emit }) {
 		const props = __props;
 		const emit = __emit;
 		const container = ref(null);
 		const context = useMapContext();
-		provide(insideZoomKey, true);
-		const zoomBehavior = computed(() => {
-			return createZoomBehavior(context?.value, {
-				minZoom: props.minZoom,
-				maxZoom: props.maxZoom,
-				config: props.config,
-				onZoomStart: (event) => emit("zoomstart", event),
-				onZoom: (event) => {
-					applyZoomGroupTransform(container.value, event.transform);
-					emit("zoom", event);
-				},
-				onZoomEnd: (event) => emit("zoomend", event)
-			});
-		});
-		onMounted(() => {
-			watch(zoomBehavior, (behavior) => {
-				if (!container.value) return;
-				setupZoom({
-					element: container.value,
-					behavior,
-					center: props.center,
-					zoom: props.zoom
-				});
-			}, { immediate: true });
-			watch(() => [
-				zoomBehavior.value,
-				props.center[0],
-				props.center[1],
-				props.zoom
-			], () => {
-				if (!container.value) return;
-				applyZoomTransform({
-					element: container.value,
-					behavior: zoomBehavior.value,
-					center: props.center,
-					zoom: props.zoom
-				});
-			});
+		function isSameCenter(nextCenter, currentCenter) {
+			return Boolean(currentCenter && nextCenter[0] === currentCenter[0] && nextCenter[1] === currentCenter[1]);
+		}
+		const { zoomBehavior } = useCreateMapZoom(container, props, {
+			onZoomStart: (event) => emit("zoomStart", event),
+			onZoom: (event) => {
+				const nextCenter = getZoomViewportCenter(context.value, event.transform);
+				const nextZoom = event.transform.k;
+				if (!isSameCenter(nextCenter, props.center)) emit("update:center", nextCenter);
+				if (nextZoom !== props.zoom) emit("update:zoom", nextZoom);
+				emit("zoom", event);
+			},
+			onZoomEnd: (event) => emit("zoomEnd", event)
 		});
 		__expose({
 			container,
@@ -470,4 +544,4 @@ const plugin = { install(app) {
 } };
 
 //#endregion
-export { MapAnnotation_default as MapAnnotation, MapBase_default as MapBase, MapFeature_default as MapFeature, MapFeatures_default as MapFeatures, MapGraticule_default as MapGraticule, MapLine_default as MapLine, MapMarker_default as MapMarker, MapMesh_default as MapMesh, MapZoom_default as MapZoom, mapContextKey, plugin, useMapContext, useMapObject };
+export { MapAnnotation_default as MapAnnotation, MapBase_default as MapBase, MapFeature_default as MapFeature, MapFeatures_default as MapFeatures, MapGraticule_default as MapGraticule, MapLine_default as MapLine, MapMarker_default as MapMarker, MapMesh_default as MapMesh, MapZoom_default as MapZoom, mapContextKey, mapZoomKey, plugin, useCreateMapContext, useCreateMapZoom, useMapContext, useMapObject, useMapZoom };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@d3-maps/vue",
   "type": "module",
-  "version": "0.8.0",
+  "version": "0.9.0",
   "private": false,
   "description": "Vue bindings for @d3-maps/core to build reactive D3 SVG maps",
   "author": "Georgii Bukharov <souljorje@gmail.com>",
@@ -44,7 +44,7 @@
     "vue": "3.5.25"
   },
   "dependencies": {
-    "@d3-maps/core": "0.8.0"
+    "@d3-maps/core": "0.9.0"
   },
   "devDependencies": {
     "@types/geojson": "^7946.0.16",