@d3-maps/vue 0.7.0 → 0.8.0

package/dist/index.d.ts

@@ -1,6 +1,7 @@
 import "@d3-maps/core/index.css";
 import * as vue6 from "vue";
 import { App, ComputedRef, InjectionKey, MaybeRef, StyleValue } from "vue";
+import { CurveFactory, CurveFactoryLineOnly } from "d3-shape";
 import { ExtendedFeature, ExtendedFeatureCollection, GeoGraticuleGenerator, GeoPath, GeoProjection } from "d3-geo";
 import { Topology } from "topojson-specification";
 import "topojson-client";
@@ -154,12 +155,46 @@ interface MapProps {
 interface MapContext {
   width: number;
   height: number;
-  projection?: GeoProjection;
+  projection: GeoProjection;
   features: MapFeature[];
   path: GeoPath;
   renderMesh: () => ReturnType<GeoPath>;
 }
 //#endregion
+//#region ../core/src/lib/line.d.ts
+/**
+ * Geographic or cartesian line coordinates expressed as ordered `[x, y]` pairs
+ */
+type MapLineCoordinates = [number, number][];
+/**
+ * D3 curve factory used by custom and cartesian line rendering
+ */
+type MapLineCurve = CurveFactory | CurveFactoryLineOnly;
+/**
+ * Midpoint adjustment expressed as percentages of the segment length
+ *
+ * - first value: moves the generated midpoint along the segment direction
+ * - second value: moves the generated midpoint perpendicular to the segment direction
+ */
+type MapLineMidpoint = [number, number];
+//#endregion
+//#region ../core/src/lib/annotation.d.ts
+/**
+ * Geographic anchor coordinate for an annotation
+ */
+type MapAnnotationCoordinates = [number, number];
+/**
+ * Public annotation props shared across adapters
+ */
+interface MapAnnotationProps<TStyle = unknown> extends MapObjectProps<TStyle> {
+  coordinates: MapAnnotationCoordinates;
+  length?: number;
+  angle?: number;
+  margin?: number;
+  curve?: MapLineCurve;
+  midpoint?: MapLineMidpoint;
+}
+//#endregion
 //#region ../core/src/lib/graticule.d.ts
 /**
  * Extra graticule generator method calls to apply before rendering.
@@ -185,7 +220,7 @@ type MapMarkerCoordinates = [number, number];
  * Shared props contract for marker layers.
  */
 interface MapMarkerProps<TStyle = unknown> extends MapObjectProps<TStyle> {
-  coordinates?: MapMarkerCoordinates;
+  coordinates: MapMarkerCoordinates;
 }
 //#endregion
 //#region ../core/src/lib/zoom.d.ts
@@ -208,13 +243,28 @@ interface ZoomProps {
 }
 interface ZoomEvent extends D3ZoomEvent<SVGSVGElement, unknown> {}
 //#endregion
+//#region src/components/MapAnnotation.vue.d.ts
+type __VLS_Props$4 = 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_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 & {
+  new (): {
+    $slots: S;
+  };
+};
+//#endregion
 //#region src/components/MapBase.vue.d.ts
 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_export$6: __VLS_WithSlots$3<typeof __VLS_base$3, __VLS_Slots$3>;
-declare const _default: typeof __VLS_export$6;
+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 & {
   new (): {
     $slots: S;
@@ -222,23 +272,23 @@ type __VLS_WithSlots$3<T, S> = T & {
 };
 //#endregion
 //#region src/components/MapFeature.vue.d.ts
-type __VLS_Props$4 = MapFeatureProps<StyleValue>;
-declare const __VLS_export$5: vue6.DefineComponent<__VLS_Props$4, {}, {}, {}, {}, vue6.ComponentOptionsMixin, vue6.ComponentOptionsMixin, {}, string, vue6.PublicProps, Readonly<__VLS_Props$4> & Readonly<{}>, {}, {}, {}, {}, string, vue6.ComponentProvideOptions, false, {}, any>;
-declare const _default$1: typeof __VLS_export$5;
+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>;
+declare const _default$2: typeof __VLS_export$6;
 //#endregion
 //#region src/components/MapFeatures.vue.d.ts
-type __VLS_Props$3 = MapFeaturesProps<StyleValue>;
+type __VLS_Props$2 = 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$3, {}, {}, {}, {}, vue6.ComponentOptionsMixin, vue6.ComponentOptionsMixin, {}, string, vue6.PublicProps, Readonly<__VLS_Props$3> & Readonly<{}>, {
+declare const __VLS_base$2: vue6.DefineComponent<__VLS_Props$2, {}, {}, {}, {}, vue6.ComponentOptionsMixin, vue6.ComponentOptionsMixin, {}, string, vue6.PublicProps, Readonly<__VLS_Props$2> & Readonly<{}>, {
   idKey: string;
 }, {}, {}, {}, string, vue6.ComponentProvideOptions, false, {}, any>;
-declare const __VLS_export$4: __VLS_WithSlots$2<typeof __VLS_base$2, __VLS_Slots$2>;
-declare const _default$2: typeof __VLS_export$4;
+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 & {
   new (): {
     $slots: S;
@@ -246,21 +296,37 @@ type __VLS_WithSlots$2<T, S> = T & {
 };
 //#endregion
 //#region src/components/MapGraticule.vue.d.ts
-type __VLS_Props$2 = MapGraticuleProps<StyleValue>;
-declare const __VLS_export$3: vue6.DefineComponent<__VLS_Props$2, {}, {}, {}, {}, vue6.ComponentOptionsMixin, vue6.ComponentOptionsMixin, {}, string, vue6.PublicProps, Readonly<__VLS_Props$2> & Readonly<{}>, {}, {}, {}, {}, string, vue6.ComponentProvideOptions, false, {}, any>;
-declare const _default$3: typeof __VLS_export$3;
+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>;
+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<{}>, {
+  cartesian: boolean;
+  custom: boolean;
+}, {}, {}, {}, string, vue6.ComponentProvideOptions, false, {}, any>;
+declare const _default$5: typeof __VLS_export$3;
 //#endregion
 //#region src/components/MapMarker.vue.d.ts
-type __VLS_Props$1 = MapMarkerProps<StyleValue>;
+interface Props extends MapMarkerProps<StyleValue> {
+  name?: string;
+}
 declare var __VLS_1$1: {};
 type __VLS_Slots$1 = {} & {
   default?: (props: typeof __VLS_1$1) => any;
 };
-declare const __VLS_base$1: vue6.DefineComponent<__VLS_Props$1, {}, {}, {}, {}, vue6.ComponentOptionsMixin, vue6.ComponentOptionsMixin, {}, string, vue6.PublicProps, Readonly<__VLS_Props$1> & Readonly<{}>, {
-  coordinates: MapMarkerCoordinates;
+declare const __VLS_base$1: vue6.DefineComponent<Props, {}, {}, {}, {}, vue6.ComponentOptionsMixin, vue6.ComponentOptionsMixin, {}, string, vue6.PublicProps, Readonly<Props> & Readonly<{}>, {
+  name: string;
 }, {}, {}, {}, string, vue6.ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export$2: __VLS_WithSlots$1<typeof __VLS_base$1, __VLS_Slots$1>;
-declare const _default$4: typeof __VLS_export$2;
+declare const _default$6: typeof __VLS_export$2;
 type __VLS_WithSlots$1<T, S> = T & {
   new (): {
     $slots: S;
@@ -270,7 +336,7 @@ type __VLS_WithSlots$1<T, S> = T & {
 //#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 _default$5: typeof __VLS_export$1;
+declare const _default$7: typeof __VLS_export$1;
 //#endregion
 //#region src/components/MapZoom.vue.d.ts
 declare var __VLS_1: {};
@@ -295,7 +361,7 @@ declare const __VLS_base: vue6.DefineComponent<ZoomProps, {
   maxZoom: number;
 }, {}, {}, {}, string, vue6.ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
-declare const _default$6: typeof __VLS_export;
+declare const _default$8: typeof __VLS_export;
 type __VLS_WithSlots<T, S> = T & {
   new (): {
     $slots: S;
@@ -324,4 +390,4 @@ declare const plugin: {
   install(app: App): void;
 };
 //#endregion
-export { _default as MapBase, _default$1 as MapFeature, _default$2 as MapFeatures, _default$3 as MapGraticule, _default$4 as MapMarker, _default$5 as MapMesh, _default$6 as MapZoom, UseMapObjectResult, mapContextKey, plugin, useMapContext, useMapObject };
+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 };

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=[`viewBox`];var l=(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,c))}});let u=Symbol(`InsideZoom`);function d(){return(0,n.inject)(u,!1)}function f(e){let t=(0,n.ref)(`default`),{onMouseenter:i,onMouseleave:a,onMouseup:o,onMousedown:s,dispose:c}=(0,r.useMapObjectEvents)(e=>{t.value=e},d());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 p=[`d`];var m=(0,n.defineComponent)({__name:`MapFeature`,props:{data:{},styles:{}},setup(e){let t=e,{style:r,...i}=f((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,p))}});let h={name:`features`};var g=(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`,h,[(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)(m,{key:(0,n.unref)(r.getFeatureKey)(t,e.idKey,i),data:t,styles:e.styles},null,8,[`data`,`styles`]))),128))])]))}});let _=[`d`,`fill`],v=[`d`],y=[`d`,`stroke`];var b=(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),u=(0,n.computed)(()=>(0,r.isString)(t.border)?t.border:void 0),{style:d,...p}=f((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,_)):(0,n.createCommentVNode)(`v-if`,!0),(0,n.createElementVNode)(`path`,(0,n.mergeProps)({d:o.value,fill:`none`,style:(0,n.unref)(d)},(0,n.mergeProps)(p,(0,n.unref)(a)),{name:`graticule`}),null,16,v),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,y)):(0,n.createCommentVNode)(`v-if`,!0)]))}});let x=[`transform`];var S=(0,n.defineComponent)({__name:`MapMarker`,props:{coordinates:{default:()=>[0,0]},styles:{}},setup(e){let t=e,i=s(),a=(0,n.computed)(()=>(0,r.getMarkerTransform)(i?.value,t.coordinates)),{style:o,...c}=f((0,n.toRef)(t,`styles`));return(e,t)=>((0,n.openBlock)(),(0,n.createElementBlock)(`g`,(0,n.mergeProps)({transform:a.value,style:(0,n.unref)(o)},c,{name:`marker`}),[(0,n.renderSlot)(e.$slots,`default`)],16,x))}});let C=[`d`];var w=(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}=f((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,C))}}),T=(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();(0,n.provide)(u,!0);let d=(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)(d,e=>{c.value&&(0,r.setupZoom)({element:c.value,behavior:e,center:a.center,zoom:a.zoom})},{immediate:!0}),(0,n.watch)(()=>[d.value,a.center[0],a.center[1],a.zoom],()=>{c.value&&(0,r.applyZoomTransform)({element:c.value,behavior:d.value,center:a.center,zoom:a.zoom})})}),t({container:c,zoomBehavior:d}),(e,t)=>((0,n.openBlock)(),(0,n.createElementBlock)(`g`,{ref_key:`container`,ref:c,name:`zoom`},[(0,n.renderSlot)(e.$slots,`default`)],512))}}),E=a({MapBase:()=>l,MapFeature:()=>m,MapFeatures:()=>g,MapGraticule:()=>b,MapMarker:()=>S,MapMesh:()=>w,MapZoom:()=>T});e.MapBase=l,e.MapFeature=m,e.MapFeatures=g,e.MapGraticule=b,e.MapMarker=S,e.MapMesh=w,e.MapZoom=T,e.mapContextKey=o,e.plugin={install(e){Object.entries(E).forEach(([t,n])=>{e.component(t,n)})}},e.useMapContext=s,e.useMapObject=f})(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(){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);

package/dist/index.js

@@ -1,6 +1,6 @@
 import "@d3-maps/core/index.css";
-import { Fragment, computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, defineComponent, guardReactiveProps, inject, mergeProps, normalizeProps, onBeforeUnmount, onMounted, openBlock, provide, ref, renderList, renderSlot, toRef, unref, useAttrs, watch } from "vue";
-import { applyZoomGroupTransform, applyZoomTransform, createZoomBehavior, getFeatureKey, 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, 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";
 
 //#region rolldown:runtime
 var __defProp = Object.defineProperty;
@@ -25,9 +25,174 @@ function useMapContext() {
 	return inject(mapContextKey);
 }
 
+//#endregion
+//#region src/hooks/useInsideZoom.ts
+const insideZoomKey = Symbol("InsideZoom");
+function useInsideZoom() {
+	return inject(insideZoomKey, false);
+}
+
+//#endregion
+//#region src/hooks/useMapObject.ts
+function useMapObject(styles) {
+	const state = ref("default");
+	const { onMouseenter, onMouseleave, onMouseup, onMousedown, dispose } = useMapObjectEvents((nextState) => {
+		state.value = nextState;
+	}, useInsideZoom());
+	onBeforeUnmount(() => {
+		dispose();
+	});
+	return {
+		style: computed(() => resolveObjectStyle(state.value, unref(styles))),
+		onMouseenter,
+		onMouseleave,
+		onMousedown,
+		onMouseup
+	};
+}
+
+//#endregion
+//#region src/components/MapLine.vue?vue&type=script&setup=true&lang.ts
+const _hoisted_1$7 = ["d"];
+var MapLine_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
+	inheritAttrs: false,
+	__name: "MapLine",
+	props: {
+		coordinates: {},
+		cartesian: {
+			type: Boolean,
+			default: false
+		},
+		custom: {
+			type: Boolean,
+			default: false
+		},
+		curve: {},
+		midpoint: {},
+		styles: {}
+	},
+	setup(__props) {
+		const props = __props;
+		const attrs = useAttrs();
+		const context = useMapContext();
+		const path = computed(() => {
+			return getLinePath(context?.value, {
+				coordinates: props.coordinates,
+				custom: props.custom,
+				curve: props.curve,
+				cartesian: props.cartesian,
+				midpoint: props.midpoint
+			});
+		});
+		const pathName = computed(() => attrs.name ?? "line");
+		const { style, ...events } = useMapObject(toRef(props, "styles"));
+		const pathAttrs = computed(() => ({
+			...attrs,
+			...events,
+			name: pathName.value
+		}));
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("path", mergeProps(pathAttrs.value, {
+				d: path.value,
+				fill: "none",
+				style: unref(style)
+			}), null, 16, _hoisted_1$7);
+		};
+	}
+});
+
+//#endregion
+//#region src/components/MapLine.vue
+var MapLine_default = MapLine_vue_vue_type_script_setup_true_lang_default;
+
+//#endregion
+//#region src/components/MapMarker.vue?vue&type=script&setup=true&lang.ts
+const _hoisted_1$6 = ["transform", "name"];
+var MapMarker_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
+	__name: "MapMarker",
+	props: {
+		name: { default: "marker" },
+		coordinates: {},
+		styles: {}
+	},
+	setup(__props) {
+		const props = __props;
+		const context = useMapContext();
+		const transform = computed(() => getMarkerTransform(context?.value, props.coordinates));
+		const { style, ...events } = useMapObject(toRef(props, "styles"));
+		return (_ctx, _cache) => {
+			return transform.value ? (openBlock(), createElementBlock("g", mergeProps({
+				key: 0,
+				transform: transform.value,
+				style: unref(style),
+				name: __props.name
+			}, events), [renderSlot(_ctx.$slots, "default")], 16, _hoisted_1$6)) : createCommentVNode("v-if", true);
+		};
+	}
+});
+
+//#endregion
+//#region src/components/MapMarker.vue
+var MapMarker_default = MapMarker_vue_vue_type_script_setup_true_lang_default;
+
+//#endregion
+//#region src/components/MapAnnotation.vue?vue&type=script&setup=true&lang.ts
+const _hoisted_1$5 = ["transform"];
+const _hoisted_2$1 = ["transform"];
+var MapAnnotation_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
+	inheritAttrs: false,
+	__name: "MapAnnotation",
+	props: {
+		coordinates: {},
+		length: {},
+		angle: {},
+		margin: {},
+		curve: { type: Function },
+		midpoint: {},
+		styles: {}
+	},
+	setup(__props) {
+		const props = __props;
+		const geometry = computed(() => getAnnotationGeometry({
+			length: props.length,
+			angle: props.angle,
+			margin: props.margin
+		}));
+		return (_ctx, _cache) => {
+			return openBlock(), createBlock(MapMarker_default, {
+				coordinates: __props.coordinates,
+				name: "annotation"
+			}, {
+				default: withCtx(() => [createElementVNode("g", { transform: geometry.value.lineTransform }, [createVNode(MapLine_default, mergeProps(_ctx.$attrs, {
+					coordinates: geometry.value.lineCoordinates,
+					cartesian: "",
+					curve: __props.curve,
+					midpoint: __props.midpoint,
+					styles: __props.styles,
+					fill: "none",
+					name: "annotation-line"
+				}), null, 16, [
+					"coordinates",
+					"curve",
+					"midpoint",
+					"styles"
+				])], 8, _hoisted_1$5), createElementVNode("g", {
+					transform: geometry.value.contentTransform,
+					name: "annotation-content"
+				}, [renderSlot(_ctx.$slots, "default")], 8, _hoisted_2$1)]),
+				_: 3
+			}, 8, ["coordinates"]);
+		};
+	}
+});
+
+//#endregion
+//#region src/components/MapAnnotation.vue
+var MapAnnotation_default = MapAnnotation_vue_vue_type_script_setup_true_lang_default;
+
 //#endregion
 //#region src/components/MapBase.vue?vue&type=script&setup=true&lang.ts
-const _hoisted_1$5 = ["viewBox"];
+const _hoisted_1$4 = ["viewBox"];
 var MapBase_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
 	__name: "MapBase",
 	props: {
@@ -52,7 +217,7 @@ var MapBase_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ define
 		}));
 		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$5);
+			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);
 		};
 	}
 });
@@ -61,35 +226,9 @@ var MapBase_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ define
 //#region src/components/MapBase.vue
 var MapBase_default = MapBase_vue_vue_type_script_setup_true_lang_default;
 
-//#endregion
-//#region src/hooks/useInsideZoom.ts
-const insideZoomKey = Symbol("InsideZoom");
-function useInsideZoom() {
-	return inject(insideZoomKey, false);
-}
-
-//#endregion
-//#region src/hooks/useMapObject.ts
-function useMapObject(styles) {
-	const state = ref("default");
-	const { onMouseenter, onMouseleave, onMouseup, onMousedown, dispose } = useMapObjectEvents((nextState) => {
-		state.value = nextState;
-	}, useInsideZoom());
-	onBeforeUnmount(() => {
-		dispose();
-	});
-	return {
-		style: computed(() => resolveObjectStyle(state.value, unref(styles))),
-		onMouseenter,
-		onMouseleave,
-		onMousedown,
-		onMouseup
-	};
-}
-
 //#endregion
 //#region src/components/MapFeature.vue?vue&type=script&setup=true&lang.ts
-const _hoisted_1$4 = ["d"];
+const _hoisted_1$3 = ["d"];
 var MapFeature_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
 	__name: "MapFeature",
 	props: {
@@ -105,7 +244,7 @@ var MapFeature_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ def
 			return openBlock(), createElementBlock("path", mergeProps({
 				d: path.value,
 				style: unref(style)
-			}, events, { name: "feature" }), null, 16, _hoisted_1$4);
+			}, events, { name: "feature" }), null, 16, _hoisted_1$3);
 		};
 	}
 });
@@ -116,7 +255,7 @@ var MapFeature_default = MapFeature_vue_vue_type_script_setup_true_lang_default;
 
 //#endregion
 //#region src/components/MapFeatures.vue?vue&type=script&setup=true&lang.ts
-const _hoisted_1$3 = { name: "features" };
+const _hoisted_1$2 = { name: "features" };
 var MapFeatures_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
 	__name: "MapFeatures",
 	props: {
@@ -127,7 +266,7 @@ var MapFeatures_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ de
 		const context = useMapContext();
 		const features = computed(() => context?.value.features ?? []);
 		return (_ctx, _cache) => {
-			return openBlock(), createElementBlock("g", _hoisted_1$3, [renderSlot(_ctx.$slots, "default", { features: features.value }, () => [(openBlock(true), createElementBlock(Fragment, null, renderList(features.value, (feature, index) => {
+			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, {
 					key: unref(getFeatureKey)(feature, __props.idKey, index),
 					data: feature,
@@ -144,7 +283,7 @@ var MapFeatures_default = MapFeatures_vue_vue_type_script_setup_true_lang_defaul
 
 //#endregion
 //#region src/components/MapGraticule.vue?vue&type=script&setup=true&lang.ts
-const _hoisted_1$2 = ["d", "fill"];
+const _hoisted_1$1 = ["d", "fill"];
 const _hoisted_2 = ["d"];
 const _hoisted_3 = ["d", "stroke"];
 var MapGraticule_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
@@ -179,7 +318,7 @@ var MapGraticule_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ d
 					fill: backgroundColor.value,
 					"pointer-events": "none",
 					name: "background"
-				}, null, 8, _hoisted_1$2)) : createCommentVNode("v-if", true),
+				}, null, 8, _hoisted_1$1)) : createCommentVNode("v-if", true),
 				createElementVNode("path", mergeProps({
 					d: graticulePath.value,
 					fill: "none",
@@ -202,35 +341,6 @@ var MapGraticule_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ d
 //#region src/components/MapGraticule.vue
 var MapGraticule_default = MapGraticule_vue_vue_type_script_setup_true_lang_default;
 
-//#endregion
-//#region src/components/MapMarker.vue?vue&type=script&setup=true&lang.ts
-const _hoisted_1$1 = ["transform"];
-var MapMarker_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
-	__name: "MapMarker",
-	props: {
-		coordinates: { default: () => [0, 0] },
-		styles: {}
-	},
-	setup(__props) {
-		const props = __props;
-		const context = useMapContext();
-		const transform = computed(() => {
-			return getMarkerTransform(context?.value, props.coordinates);
-		});
-		const { style, ...events } = useMapObject(toRef(props, "styles"));
-		return (_ctx, _cache) => {
-			return openBlock(), createElementBlock("g", mergeProps({
-				transform: transform.value,
-				style: unref(style)
-			}, events, { name: "marker" }), [renderSlot(_ctx.$slots, "default")], 16, _hoisted_1$1);
-		};
-	}
-});
-
-//#endregion
-//#region src/components/MapMarker.vue
-var MapMarker_default = MapMarker_vue_vue_type_script_setup_true_lang_default;
-
 //#endregion
 //#region src/components/MapMesh.vue?vue&type=script&setup=true&lang.ts
 const _hoisted_1 = ["d"];
@@ -337,10 +447,12 @@ var MapZoom_default = MapZoom_vue_vue_type_script_setup_true_lang_default;
 //#endregion
 //#region src/components/index.ts
 var components_exports = /* @__PURE__ */ __exportAll({
+	MapAnnotation: () => MapAnnotation_default,
 	MapBase: () => MapBase_default,
 	MapFeature: () => MapFeature_default,
 	MapFeatures: () => MapFeatures_default,
 	MapGraticule: () => MapGraticule_default,
+	MapLine: () => MapLine_default,
 	MapMarker: () => MapMarker_default,
 	MapMesh: () => MapMesh_default,
 	MapZoom: () => MapZoom_default
@@ -358,4 +470,4 @@ const plugin = { install(app) {
 } };
 
 //#endregion
-export { MapBase_default as MapBase, MapFeature_default as MapFeature, MapFeatures_default as MapFeatures, MapGraticule_default as MapGraticule, 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, plugin, useMapContext, useMapObject };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@d3-maps/vue",
   "type": "module",
-  "version": "0.7.0",
+  "version": "0.8.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.7.0"
+    "@d3-maps/core": "0.8.0"
   },
   "devDependencies": {
     "@types/geojson": "^7946.0.16",