@d3-maps/react 0.2.0 → 0.3.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/dist/index.d.ts CHANGED
@@ -6,12 +6,15 @@ import "topojson-client";
6
6
  import { D3ZoomEvent, ZoomBehavior } from "d3-zoom";
7
7
 
8
8
  //#region ../core/src/lib/mapObject.d.ts
9
+
9
10
  /**
10
11
  * Supported interaction states for map objects.
11
12
  */
12
13
  declare const mapObjectState: readonly ["default", "hover", "active"];
13
14
  type MapObjectState = typeof mapObjectState[number];
14
- type MapObjectStyles$1<TStyle> = Partial<Record<MapObjectState, TStyle>>;
15
+ interface MapObject<TStyle = unknown> {
16
+ styles?: Partial<Record<MapObjectState, TStyle>>;
17
+ }
15
18
  //#endregion
16
19
  //#region ../core/src/lib/feature.d.ts
17
20
  /**
@@ -23,9 +26,8 @@ type MapFeature$1 = (ExtendedFeature & Record<string, unknown>) | ExtendedFeatur
23
26
  /**
24
27
  * Shared props contract for a single rendered feature.
25
28
  */
26
- interface MapFeatureProps$1<TStyle = unknown> {
29
+ interface MapFeatureProps$1<TStyle = unknown> extends MapObject<TStyle> {
27
30
  data: MapFeature$1;
28
- styles?: MapObjectStyles$1<TStyle>;
29
31
  }
30
32
  //#endregion
31
33
  //#region ../../node_modules/.pnpm/@types+geojson@7946.0.16/node_modules/@types/geojson/index.d.ts
@@ -435,9 +437,8 @@ type MapMarkerCoordinates = [number, number];
435
437
  /**
436
438
  * Shared props contract for marker layers.
437
439
  */
438
- interface MapMarkerProps$1<TStyle = unknown> {
440
+ interface MapMarkerProps$1<TStyle = unknown> extends MapObject<TStyle> {
439
441
  coordinates?: MapMarkerCoordinates;
440
- styles?: MapObjectStyles$1<TStyle>;
441
442
  }
442
443
  //#endregion
443
444
  //#region ../core/src/lib/zoom.d.ts
@@ -490,34 +491,14 @@ declare function MapFeature({
490
491
  ...pathProps
491
492
  }: MapFeatureProps): ReactElement | null;
492
493
  //#endregion
493
- //#region src/hooks/useMapObject.d.ts
494
- type MapObjectStyle = CSSProperties;
495
- type MapObjectStyles = MapObjectStyles$1<MapObjectStyle>;
496
- interface UseMapObjectOptions<TElement extends Element> {
497
- styles?: MapObjectStyles;
498
- onMouseEnter?: MouseEventHandler<TElement>;
499
- onMouseLeave?: MouseEventHandler<TElement>;
500
- onMouseDown?: MouseEventHandler<TElement>;
501
- onMouseUp?: MouseEventHandler<TElement>;
502
- }
503
- interface UseMapObjectResult<TElement extends Element> {
504
- style: MapObjectStyle | undefined;
505
- onMouseEnter: MouseEventHandler<TElement>;
506
- onMouseLeave: MouseEventHandler<TElement>;
507
- onMouseDown: MouseEventHandler<TElement>;
508
- onMouseUp: MouseEventHandler<TElement>;
509
- }
510
- declare function useMapObject<TElement extends Element>(options: UseMapObjectOptions<TElement>): UseMapObjectResult<TElement>;
511
- //#endregion
512
494
  //#region src/components/MapFeatures.d.ts
513
495
  interface MapFeaturesRenderProps {
514
496
  features: MapFeature$1[];
515
497
  }
516
498
  type MapFeaturesChildren = ReactNode | ((props: MapFeaturesRenderProps) => ReactNode);
517
499
  type MapFeaturesElementProps = Omit<SVGProps<SVGGElement>, 'children'>;
518
- interface MapFeaturesProps extends MapFeaturesElementProps {
500
+ interface MapFeaturesProps extends MapFeaturesElementProps, MapObject<CSSProperties> {
519
501
  idKey?: string;
520
- styles?: MapObjectStyles;
521
502
  children?: MapFeaturesChildren;
522
503
  }
523
504
  declare function MapFeatures({
@@ -528,11 +509,10 @@ declare function MapFeatures({
528
509
  }: MapFeaturesProps): ReactElement;
529
510
  //#endregion
530
511
  //#region src/components/MapGraticule.d.ts
531
- interface MapGraticuleProps extends Omit<SVGProps<SVGPathElement>, 'children' | 'd' | 'style' | 'fill'> {
512
+ interface MapGraticuleProps extends Omit<SVGProps<SVGPathElement>, 'children' | 'd' | 'style' | 'fill'>, MapObject<CSSProperties> {
532
513
  config?: GraticuleConfig;
533
514
  background?: boolean | string;
534
515
  border?: boolean | string;
535
- styles?: MapObjectStyles;
536
516
  }
537
517
  declare function MapGraticule({
538
518
  config,
@@ -560,9 +540,7 @@ declare function MapMarker({
560
540
  }: MapMarkerProps): ReactElement;
561
541
  //#endregion
562
542
  //#region src/components/MapMesh.d.ts
563
- interface MapMeshProps extends Omit<SVGProps<SVGPathElement>, 'children' | 'd' | 'style'> {
564
- styles?: MapObjectStyles;
565
- }
543
+ interface MapMeshProps extends Omit<SVGProps<SVGPathElement>, 'children' | 'd' | 'style'>, MapObject<CSSProperties> {}
566
544
  declare function MapMesh({
567
545
  styles,
568
546
  onMouseEnter,
@@ -597,4 +575,21 @@ declare function MapZoom({
597
575
  declare const MapContextValue: react0.Context<MapContext | undefined>;
598
576
  declare function useMapContext(): MapContext | undefined;
599
577
  //#endregion
600
- export { Map, MapContextValue, MapFeature, MapFeatures, MapGraticule, MapMarker, MapMesh, MapObjectStyle, MapObjectStyles, MapZoom, UseMapObjectOptions, UseMapObjectResult, useMapContext, useMapObject };
578
+ //#region src/hooks/useMapObject.d.ts
579
+ type MapObjectStyle = CSSProperties;
580
+ interface UseMapObjectOptions<TElement extends Element> extends MapObject<MapObjectStyle> {
581
+ onMouseEnter?: MouseEventHandler<TElement>;
582
+ onMouseLeave?: MouseEventHandler<TElement>;
583
+ onMouseDown?: MouseEventHandler<TElement>;
584
+ onMouseUp?: MouseEventHandler<TElement>;
585
+ }
586
+ interface UseMapObjectResult<TElement extends Element> {
587
+ style: MapObjectStyle | undefined;
588
+ onMouseEnter: MouseEventHandler<TElement>;
589
+ onMouseLeave: MouseEventHandler<TElement>;
590
+ onMouseDown: MouseEventHandler<TElement>;
591
+ onMouseUp: MouseEventHandler<TElement>;
592
+ }
593
+ declare function useMapObject<TElement extends Element>(options: UseMapObjectOptions<TElement>): UseMapObjectResult<TElement>;
594
+ //#endregion
595
+ export { Map, MapContextValue, MapFeature, MapFeatures, MapGraticule, MapMarker, MapMesh, MapObjectStyle, MapZoom, UseMapObjectOptions, UseMapObjectResult, useMapContext, useMapObject };
@@ -1 +1 @@
1
- "use client";(function(e,t,n,r,i){let a=(0,r.createContext)(void 0);function o(){return(0,r.useContext)(a)}function s({context:e,children:t}){return(0,i.jsx)(a.Provider,{value:e,children:t})}function c(e){return typeof e==`function`}function l({width:e,height:t,aspectRatio:a,projection:o,projectionConfig:l,data:u,dataTransformer:d,children:f,className:p,...m}){let h=(0,r.useMemo)(()=>(0,n.makeMapContext)({width:e,height:t,aspectRatio:a,projection:o,projectionConfig:l,data:u,dataTransformer:d}),[e,t,a,o,l,u,d]),g=c(f)?f(h):f;return(0,i.jsx)(s,{context:h,children:(0,i.jsx)(`svg`,{...m,className:`d3-map ${p??``}`,viewBox:`0 0 ${h.width} ${h.height}`,children:g})})}function u(e){let t=(0,r.useRef)(e);return t.current=e,t}function d(e){let[t,i]=(0,r.useState)(`default`),a=u(e.onMouseEnter),o=u(e.onMouseLeave),s=u(e.onMouseDown),c=u(e.onMouseUp),l=(0,r.useCallback)(e=>{i(t=>{let r=(0,n.getObjectStateUpdate)(e);return t===r?t:r})},[]);return{style:(0,r.useMemo)(()=>(0,n.resolveObjectStyle)(t,e.styles),[t,e.styles]),onMouseEnter:(0,r.useCallback)(e=>{l(`mouseenter`),a.current?.(e)},[l]),onMouseLeave:(0,r.useCallback)(e=>{l(`mouseleave`),o.current?.(e)},[l]),onMouseDown:(0,r.useCallback)(e=>{l(`mousedown`),s.current?.(e)},[l]),onMouseUp:(0,r.useCallback)(e=>{l(`mouseup`),c.current?.(e)},[l])}}function f({data:e,styles:t,onMouseEnter:n,onMouseLeave:a,onMouseDown:s,onMouseUp:c,...l}){let u=o(),f=(0,r.useMemo)(()=>u?.path(e)??void 0,[u,e]),{style:p,...m}=d({styles:t,onMouseEnter:n,onMouseLeave:a,onMouseDown:s,onMouseUp:c});return(0,i.jsx)(`path`,{...l,d:f,style:p,name:`feature`,...m})}function p(e){return typeof e==`function`}function m({idKey:e=`id`,styles:t,children:r,...a}){let s=o()?.features??[],c=p(r)?r({features:s}):r;return(0,i.jsx)(`g`,{...a,name:`features`,children:c??s.map((r,a)=>(0,i.jsx)(f,{data:r,styles:t},(0,n.getFeatureKey)(r,e,a)))})}function h({config:e,background:t,border:a,styles:s,onMouseEnter:c,onMouseLeave:l,onMouseDown:u,onMouseUp:f,...p}){let m=o(),h=(0,r.useMemo)(()=>{if(m)return(0,n.renderGraticule)(m,e)??void 0},[m,e]),g=t===!0||typeof t==`string`,_=a===!0||typeof a==`string`,v=typeof t==`string`?t:void 0,y=typeof a==`string`?a:void 0,b=g||_,x=(0,r.useMemo)(()=>{if(!(!m||!b))return(0,n.renderOutline)(m)??void 0},[m,b]),{style:S,...C}=d({styles:s,onMouseEnter:c,onMouseLeave:l,onMouseDown:u,onMouseUp:f});return(0,i.jsxs)(`g`,{children:[g?(0,i.jsx)(`path`,{d:x??void 0,fill:v,name:`background`,pointerEvents:`none`}):null,(0,i.jsx)(`path`,{...p,d:h??void 0,style:S,fill:`none`,name:`graticule`,...C}),_?(0,i.jsx)(`path`,{d:x??void 0,fill:`none`,stroke:y,name:`border`,pointerEvents:`none`}):null]})}let g=[0,0];function _({coordinates:e=g,styles:t,children:a,onMouseEnter:s,onMouseLeave:c,onMouseDown:l,onMouseUp:u,...f}){let p=o(),m=(0,r.useMemo)(()=>(0,n.getMarkerTransform)(p,e),[p,e[0],e[1]]),{style:h,..._}=d({styles:t,onMouseEnter:s,onMouseLeave:c,onMouseDown:l,onMouseUp:u});return(0,i.jsx)(`g`,{...f,transform:m,style:h,name:`marker`,..._,children:a})}function v({styles:e,onMouseEnter:t,onMouseLeave:n,onMouseDown:a,onMouseUp:s,...c}){let l=o(),u=(0,r.useMemo)(()=>l?.renderMesh()??void 0,[l]),{style:f,...p}=d({styles:e,onMouseEnter:t,onMouseLeave:n,onMouseDown:a,onMouseUp:s}),m=c.fill??`none`;return(0,i.jsx)(`path`,{...c,d:u,style:f,fill:m,name:`mesh`,...p})}function y({center:e,zoom:t,minZoom:a=n.ZOOM_DEFAULTS.minZoom,maxZoom:s=n.ZOOM_DEFAULTS.maxZoom,config:c,onZoomStart:l,onZoom:d,onZoomEnd:f,children:p,className:m,...h}){let g=(0,r.useRef)(null),_=(0,r.useRef)(!1),v=o(),y=u(l),b=u(d),x=u(f),S=e??n.ZOOM_DEFAULTS.center,C=t??n.ZOOM_DEFAULTS.zoom,w=S[0],T=S[1],E=(0,r.useMemo)(()=>(0,n.createZoomBehavior)(v,{minZoom:a,maxZoom:s,config:c,onZoomStart:e=>{y.current?.(e)},onZoom:e=>{(0,n.applyZoomGroupTransform)(g.current,e.transform),b.current?.(e)},onZoomEnd:e=>{x.current?.(e)}}),[v,a,s,c]);(0,r.useEffect)(()=>{_.current=!0,(0,n.setupZoom)({element:g.current,behavior:E,center:S,zoom:C})},[E]),(0,r.useEffect)(()=>{if(_.current){_.current=!1;return}(0,n.applyZoomTransform)({element:g.current,behavior:E,center:[w,T],zoom:C})},[E,w,T,C]);let D=m?`d3-map-zoom ${m}`:`d3-map-zoom`;return(0,i.jsx)(`g`,{...h,ref:g,className:D,name:`zoom`,children:p})}e.Map=l,e.MapContextValue=a,e.MapFeature=f,e.MapFeatures=m,e.MapGraticule=h,e.MapMarker=_,e.MapMesh=v,e.MapZoom=y,e.useMapContext=o,e.useMapObject=d})(this.D3Maps=this.D3Maps||{},_d3_maps_core_index_css,D3Maps,React,ReactJSXRuntime);
1
+ "use client";(function(e,t,n,r,i){let a=(0,r.createContext)(void 0);function o(){return(0,r.useContext)(a)}function s({context:e,children:t}){return(0,i.jsx)(a.Provider,{value:e,children:t})}function c(e){return typeof e==`function`}function l({width:e,height:t,aspectRatio:a,projection:o,projectionConfig:l,data:u,dataTransformer:d,children:f,className:p,...m}){let h=(0,r.useMemo)(()=>(0,n.makeMapContext)({width:e,height:t,aspectRatio:a,projection:o,projectionConfig:l,data:u,dataTransformer:d}),[e,t,a,o,l,u,d]),g=c(f)?f(h):f;return(0,i.jsx)(s,{context:h,children:(0,i.jsx)(`svg`,{...m,className:`d3-map ${p??``}`,viewBox:`0 0 ${h.width} ${h.height}`,children:g})})}let u=(0,r.createContext)(!1);function d(){return(0,r.useContext)(u)}function f(e){let t=(0,r.useRef)(e);return t.current=e,t}function p(e){let[t,i]=(0,r.useState)(`default`),a=(0,r.useRef)(t),o=d(),s=f(e.onMouseEnter),c=f(e.onMouseLeave),l=f(e.onMouseDown),u=f(e.onMouseUp);(0,r.useEffect)(()=>{a.current=t},[t]);let p=(0,r.useCallback)(e=>{a.current!==e&&(a.current=e,i(e))},[]),m=(0,r.useMemo)(()=>(0,n.useMapObjectEvents)(p,o),[o,p]);return(0,r.useEffect)(()=>()=>{m.dispose()},[m]),{style:(0,r.useMemo)(()=>(0,n.resolveObjectStyle)(t,e.styles),[t,e.styles]),onMouseEnter:(0,r.useCallback)(e=>{m.onMouseenter(),s.current?.(e)},[m]),onMouseLeave:(0,r.useCallback)(e=>{m.onMouseleave(),c.current?.(e)},[m]),onMouseDown:(0,r.useCallback)(e=>{m.onMousedown(e),l.current?.(e)},[m]),onMouseUp:(0,r.useCallback)(e=>{m.onMouseup(),u.current?.(e)},[m])}}function m({data:e,styles:t,onMouseEnter:n,onMouseLeave:a,onMouseDown:s,onMouseUp:c,...l}){let u=o(),d=(0,r.useMemo)(()=>u?.path(e)??void 0,[u,e]),{style:f,...m}=p({styles:t,onMouseEnter:n,onMouseLeave:a,onMouseDown:s,onMouseUp:c});return(0,i.jsx)(`path`,{...l,d,style:f,name:`feature`,...m})}function h(e){return typeof e==`function`}function g({idKey:e=`id`,styles:t,children:r,...a}){let s=o()?.features??[],c=h(r)?r({features:s}):r;return(0,i.jsx)(`g`,{...a,name:`features`,children:c??s.map((r,a)=>(0,i.jsx)(m,{data:r,styles:t},(0,n.getFeatureKey)(r,e,a)))})}function _({config:e,background:t,border:a,styles:s,onMouseEnter:c,onMouseLeave:l,onMouseDown:u,onMouseUp:d,...f}){let m=o(),h=(0,r.useMemo)(()=>{if(m)return(0,n.renderGraticule)(m,e)??void 0},[m,e]),g=t===!0||typeof t==`string`,_=a===!0||typeof a==`string`,v=typeof t==`string`?t:void 0,y=typeof a==`string`?a:void 0,b=g||_,x=(0,r.useMemo)(()=>{if(!(!m||!b))return(0,n.renderOutline)(m)??void 0},[m,b]),{style:S,...C}=p({styles:s,onMouseEnter:c,onMouseLeave:l,onMouseDown:u,onMouseUp:d});return(0,i.jsxs)(`g`,{children:[g?(0,i.jsx)(`path`,{d:x??void 0,fill:v,name:`background`,pointerEvents:`none`}):null,(0,i.jsx)(`path`,{...f,d:h??void 0,style:S,fill:`none`,name:`graticule`,...C}),_?(0,i.jsx)(`path`,{d:x??void 0,fill:`none`,stroke:y,name:`border`,pointerEvents:`none`}):null]})}let v=[0,0];function y({coordinates:e=v,styles:t,children:a,onMouseEnter:s,onMouseLeave:c,onMouseDown:l,onMouseUp:u,...d}){let f=o(),m=(0,r.useMemo)(()=>(0,n.getMarkerTransform)(f,e),[f,e[0],e[1]]),{style:h,...g}=p({styles:t,onMouseEnter:s,onMouseLeave:c,onMouseDown:l,onMouseUp:u});return(0,i.jsx)(`g`,{...d,transform:m,style:h,name:`marker`,...g,children:a})}function b({styles:e,onMouseEnter:t,onMouseLeave:n,onMouseDown:a,onMouseUp:s,...c}){let l=o(),u=(0,r.useMemo)(()=>l?.renderMesh()??void 0,[l]),{style:d,...f}=p({styles:e,onMouseEnter:t,onMouseLeave:n,onMouseDown:a,onMouseUp:s}),m=c.fill??`none`;return(0,i.jsx)(`path`,{...c,d:u,style:d,fill:m,name:`mesh`,...f})}function x({center:e,zoom:t,minZoom:a=n.ZOOM_DEFAULTS.minZoom,maxZoom:s=n.ZOOM_DEFAULTS.maxZoom,config:c,onZoomStart:l,onZoom:d,onZoomEnd:p,children:m,className:h,...g}){let _=(0,r.useRef)(null),v=(0,r.useRef)(!1),y=o(),b=f(l),x=f(d),S=f(p),C=e??n.ZOOM_DEFAULTS.center,w=t??n.ZOOM_DEFAULTS.zoom,T=C[0],E=C[1],D=(0,r.useMemo)(()=>(0,n.createZoomBehavior)(y,{minZoom:a,maxZoom:s,config:c,onZoomStart:e=>{b.current?.(e)},onZoom:e=>{(0,n.applyZoomGroupTransform)(_.current,e.transform),x.current?.(e)},onZoomEnd:e=>{S.current?.(e)}}),[y,a,s,c]);(0,r.useEffect)(()=>{v.current=!0,(0,n.setupZoom)({element:_.current,behavior:D,center:C,zoom:w})},[D]),(0,r.useEffect)(()=>{if(v.current){v.current=!1;return}(0,n.applyZoomTransform)({element:_.current,behavior:D,center:[T,E],zoom:w})},[D,T,E,w]);let O=h?`d3-map-zoom ${h}`:`d3-map-zoom`;return(0,i.jsx)(u.Provider,{value:!0,children:(0,i.jsx)(`g`,{...g,ref:_,className:O,name:`zoom`,children:m})})}e.Map=l,e.MapContextValue=a,e.MapFeature=m,e.MapFeatures=g,e.MapGraticule=_,e.MapMarker=y,e.MapMesh=b,e.MapZoom=x,e.useMapContext=o,e.useMapObject=p})(this.D3Maps=this.D3Maps||{},_d3_maps_core_index_css,D3Maps,React,ReactJSXRuntime);
package/dist/index.js CHANGED
@@ -1,7 +1,7 @@
1
1
  'use client';
2
2
 
3
3
  import "@d3-maps/core/index.css";
4
- import { ZOOM_DEFAULTS, applyZoomGroupTransform, applyZoomTransform, createZoomBehavior, getFeatureKey, getMarkerTransform, getObjectStateUpdate, makeMapContext, renderGraticule, renderOutline, resolveObjectStyle, setupZoom } from "@d3-maps/core";
4
+ import { ZOOM_DEFAULTS, applyZoomGroupTransform, applyZoomTransform, createZoomBehavior, getFeatureKey, getMarkerTransform, makeMapContext, renderGraticule, renderOutline, resolveObjectStyle, setupZoom, useMapObjectEvents } from "@d3-maps/core";
5
5
  import { createContext, useCallback, useContext, useEffect, useMemo, useRef, useState } from "react";
6
6
  import { jsx, jsxs } from "react/jsx-runtime";
7
7
 
@@ -57,6 +57,13 @@ function Map({ width, height, aspectRatio, projection, projectionConfig, data, d
57
57
  });
58
58
  }
59
59
 
60
+ //#endregion
61
+ //#region src/hooks/useInsideZoom.ts
62
+ const InsideZoomContext = createContext(false);
63
+ function useInsideZoom() {
64
+ return useContext(InsideZoomContext);
65
+ }
66
+
60
67
  //#endregion
61
68
  //#region src/hooks/useLatest.ts
62
69
  function useLatest(value) {
@@ -69,36 +76,46 @@ function useLatest(value) {
69
76
  //#region src/hooks/useMapObject.ts
70
77
  function useMapObject(options) {
71
78
  const [state, setState] = useState("default");
79
+ const stateRef = useRef(state);
80
+ const insideZoom = useInsideZoom();
72
81
  const onMouseEnterRef = useLatest(options.onMouseEnter);
73
82
  const onMouseLeaveRef = useLatest(options.onMouseLeave);
74
83
  const onMouseDownRef = useLatest(options.onMouseDown);
75
84
  const onMouseUpRef = useLatest(options.onMouseUp);
76
- const setStateForEvent = useCallback((eventName) => {
77
- setState((currentState) => {
78
- const nextState = getObjectStateUpdate(eventName);
79
- return currentState === nextState ? currentState : nextState;
80
- });
85
+ useEffect(() => {
86
+ stateRef.current = state;
87
+ }, [state]);
88
+ const syncState = useCallback((nextState) => {
89
+ if (stateRef.current === nextState) return;
90
+ stateRef.current = nextState;
91
+ setState(nextState);
81
92
  }, []);
93
+ const interactionController = useMemo(() => {
94
+ return useMapObjectEvents(syncState, insideZoom);
95
+ }, [insideZoom, syncState]);
96
+ useEffect(() => {
97
+ return () => {
98
+ interactionController.dispose();
99
+ };
100
+ }, [interactionController]);
82
101
  return {
83
- style: useMemo(() => {
84
- return resolveObjectStyle(state, options.styles);
85
- }, [state, options.styles]),
102
+ style: useMemo(() => resolveObjectStyle(state, options.styles), [state, options.styles]),
86
103
  onMouseEnter: useCallback((event) => {
87
- setStateForEvent("mouseenter");
104
+ interactionController.onMouseenter();
88
105
  onMouseEnterRef.current?.(event);
89
- }, [setStateForEvent]),
106
+ }, [interactionController]),
90
107
  onMouseLeave: useCallback((event) => {
91
- setStateForEvent("mouseleave");
108
+ interactionController.onMouseleave();
92
109
  onMouseLeaveRef.current?.(event);
93
- }, [setStateForEvent]),
110
+ }, [interactionController]),
94
111
  onMouseDown: useCallback((event) => {
95
- setStateForEvent("mousedown");
112
+ interactionController.onMousedown(event);
96
113
  onMouseDownRef.current?.(event);
97
- }, [setStateForEvent]),
114
+ }, [interactionController]),
98
115
  onMouseUp: useCallback((event) => {
99
- setStateForEvent("mouseup");
116
+ interactionController.onMouseup();
100
117
  onMouseUpRef.current?.(event);
101
- }, [setStateForEvent])
118
+ }, [interactionController])
102
119
  };
103
120
  }
104
121
 
@@ -308,12 +325,15 @@ function MapZoom({ center, zoom, minZoom = ZOOM_DEFAULTS.minZoom, maxZoom = ZOOM
308
325
  resolvedZoom
309
326
  ]);
310
327
  const mergedClassName = className ? `d3-map-zoom ${className}` : "d3-map-zoom";
311
- return /* @__PURE__ */ jsx("g", {
312
- ...groupProps,
313
- ref: containerRef,
314
- className: mergedClassName,
315
- name: "zoom",
316
- children
328
+ return /* @__PURE__ */ jsx(InsideZoomContext.Provider, {
329
+ value: true,
330
+ children: /* @__PURE__ */ jsx("g", {
331
+ ...groupProps,
332
+ ref: containerRef,
333
+ className: mergedClassName,
334
+ name: "zoom",
335
+ children
336
+ })
317
337
  });
318
338
  }
319
339
 
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@d3-maps/react",
3
3
  "type": "module",
4
- "version": "0.2.0",
4
+ "version": "0.3.0",
5
5
  "private": false,
6
6
  "description": "React bindings for @d3-maps/core to build reactive D3 SVG maps",
7
7
  "author": "Georgii Bukharov <souljorje@gmail.com>",
@@ -45,7 +45,7 @@
45
45
  "react-dom": ">=19 <20"
46
46
  },
47
47
  "dependencies": {
48
- "@d3-maps/core": "0.5.0"
48
+ "@d3-maps/core": "0.6.0"
49
49
  },
50
50
  "devDependencies": {
51
51
  "@testing-library/react": "^16.3.0",