@cs-open/react-fabric 0.0.7 → 0.0.10

package/dist/cjs/components/BackgroundImage/index.cjs

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var f=require("fabric"),i=require("react"),F=require("../../hooks/useDidUpdate.cjs"),w=require("../../hooks/useStore.cjs");const q=n=>({width:n.width,height:n.height}),R=i.forwardRef(({src:n,onLoad:b,onScaling:V,scaleToFit:l,scaleToCover:d,...g},S)=>{const r=i.useRef(null),a=w.useStoreApi(),{width:T,height:p}=w.useStore(q),m=i.useCallback(c=>{const{canvas:e,manualZoom:t=1,defaultCentered:o}=a.getState();if(!r.current)return;if(!e){console.warn("updateViewport: !canvas");return}if(!e.backgroundImage){console.warn("updateViewport: !canvas.backgroundImage");return}const u=c.scaleToFit?f.util.findScaleToFit(r.current,e):c.scaleToCover?f.util.findScaleToCover(r.current,e):1,s=u*t;e.setViewportTransform([s,0,0,s,0,0]);let h=0,v=0;if(o&&e.backgroundImage){const k=e.backgroundImage.width||0,C=e.backgroundImage.height||0;h=(e.width-k*s)/2,v=(e.height-C*s)/2}const I=[s,0,0,s,h,v];e.setViewportTransform(I),e.requestRenderAll(),a.setState({fitZoom:u,manualZoom:t,zoom:s})},[a]);return i.useEffect(()=>{m({scaleToFit:l,scaleToCover:d})},[T,p,l,d,m,a]),i.useEffect(()=>{if(!n){console.warn("ReactFabricBackgroundImage: !src");return}const{domNode:c,setLoading:e}=a.getState();return e(!0),f.FabricImage.fromURL(n,{crossOrigin:"anonymous"}).then(t=>{const{canvas:o}=a.getState();if(o){const u={...g,angle:0};if(t.set({...u,objectCaching:!1}),o.getContext().imageSmoothingEnabled=!0,o.getContext().imageSmoothingQuality="high",o.backgroundImage=t,r.current=t,requestAnimationFrame(()=>{m({scaleToFit:l,scaleToCover:d})}),!o.viewportTransform){console.warn("!viewport");return}b?.(t)}else console.warn("ReactFabric:BackgroundImage: !canvas",o)}).catch(console.error).finally(()=>{c&&(c.dataset.src=n),e(!1)}),()=>{const{canvas:t}=a.getState();t?.backgroundImage&&(t.backgroundImage=void 0,t.remove(r.current),r.current=null,t.renderAll())}},[n]),F.useDidUpdate(()=>{const{canvas:c}=a.getState();r.current&&(Object.entries(g).forEach(([e,t])=>{e==="angle"?r.current?.rotate(t):r.current?.set(e,t)}),c?.requestRenderAll())},[g,a]),i.useImperativeHandle(S,()=>({instance:r.current})),null});var A=i.memo(R);exports.default=A;
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var h=require("fabric"),s=require("react"),F=require("../../hooks/useDidUpdate.cjs"),w=require("../../hooks/useStore.cjs");const q=o=>({width:o.width,height:o.height}),R=s.forwardRef(({src:o,onLoad:b,onScaling:V,scaleToFit:l,scaleToCover:g,...d},S)=>{const a=s.useRef(null),n=w.useStoreApi(),{width:T,height:p}=w.useStore(q),m=s.useCallback(c=>{const{canvas:e,manualZoom:r=1,defaultCentered:f}=n.getState();if(!a.current)return;if(!e){console.warn("updateViewport: !canvas");return}if(!e.backgroundImage){console.warn("updateViewport: !canvas.backgroundImage");return}const i=c.scaleToFit?h.util.findScaleToFit(a.current,e):c.scaleToCover?h.util.findScaleToCover(a.current,e):1,t=i*r;e.setViewportTransform([t,0,0,t,0,0]);let u=0,v=0;if(f&&e.backgroundImage){const k=e.backgroundImage.width||0,C=e.backgroundImage.height||0;u=(e.width-k*t)/2,v=(e.height-C*t)/2}const I=[t,0,0,t,u,v];e.setViewportTransform(I),e.requestRenderAll(),n.setState({fitZoom:i,manualZoom:r,zoom:t})},[n]);return s.useEffect(()=>{m({scaleToFit:l,scaleToCover:g})},[T,p,l,g,m,n]),s.useEffect(()=>{if(!o){console.warn("ReactFabricBackgroundImage: !src");return}const{domNode:c,setLoading:e}=n.getState();return e(!0),h.FabricImage.fromURL(o,{crossOrigin:"anonymous"}).then(r=>{const f=r.getSrc(),i=a.current?.getSrc();if(i&&f!==i)return;const{canvas:t}=n.getState();if(t){const u={...d,angle:0};if(r.set({...u,objectCaching:!1}),t.getContext().imageSmoothingEnabled=!0,t.getContext().imageSmoothingQuality="high",t.backgroundImage=r,a.current=r,requestAnimationFrame(()=>{m({scaleToFit:l,scaleToCover:g})}),!t.viewportTransform){console.warn("!viewport");return}b?.(r)}else console.warn("ReactFabric:BackgroundImage: !canvas",t)}).catch(console.error).finally(()=>{c&&(c.dataset.src=o),e(!1)}),()=>{const{canvas:r}=n.getState();r?.backgroundImage&&(r.backgroundImage=void 0,r.remove(a.current),a.current=null,r.renderAll())}},[o]),F.useDidUpdate(()=>{const{canvas:c}=n.getState();a.current&&(Object.entries(d).forEach(([e,r])=>{e==="angle"?a.current?.rotate(r):a.current?.set(e,r)}),c?.requestRenderAll())},[d,n]),s.useImperativeHandle(S,()=>({instance:a.current})),null});var A=s.memo(R);exports.default=A;
 //# sourceMappingURL=index.cjs.map

package/dist/cjs/components/BackgroundImage/index.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.cjs","sources":["../../../../src/components/BackgroundImage/index.tsx"],"sourcesContent":["import type {\n  BasicTransformEvent,\n  ImageProps,\n  ObjectEvents,\n  SerializedImageProps,\n  TDegree,\n  TPointerEvent,\n} from 'fabric'\nimport { FabricImage, util } from 'fabric'\nimport { forwardRef, memo, useCallback, useEffect, useImperativeHandle, useRef } from 'react'\nimport { useDidUpdate } from '../../hooks/useDidUpdate'\nimport { useStore, useStoreApi } from '../../hooks/useStore'\nimport type { ReactFabricState } from '../../types/store'\n\nexport type Handle = {}\n\ntype ScaleMode = {\n  scaleToFit?: boolean\n  scaleToCover?: boolean\n}\nexport type BackgroundImageProps = Partial<ImageProps> & {\n  src: string\n  onLoad?: (imageSource: FabricImage<Partial<ImageProps>, SerializedImageProps, ObjectEvents>) => void\n  onScaling?: (scale: BasicTransformEvent<TPointerEvent>) => void\n\n  /** 自动缩放至容器宽高 */\n} & ScaleMode\n\nconst selector = (s: ReactFabricState) => ({\n  width: s.width,\n  height: s.height,\n})\n\nconst BackgroundImage = forwardRef<Handle, BackgroundImageProps>(\n  ({ src, onLoad, onScaling, scaleToFit, scaleToCover, ...options }, ref) => {\n    const backgroundImageRef = useRef<FabricImage | null>(null)\n\n    const store = useStoreApi()\n\n    const { width, height } = useStore(selector)\n\n    const updateViewport = useCallback(\n      (params: { scaleToFit?: boolean; scaleToCover?: boolean }) => {\n        const { canvas, manualZoom = 1, defaultCentered } = store.getState()\n        if (!backgroundImageRef.current) {\n          return\n        }\n        if (!canvas) {\n          console.warn('updateViewport: !canvas')\n          return\n        }\n        if (!canvas.backgroundImage) {\n          console.warn('updateViewport: !canvas.backgroundImage')\n          return\n        }\n\n        // 1. 计算缩放\n        const fitZoom = params.scaleToFit\n          ? util.findScaleToFit(backgroundImageRef.current, canvas)\n          : params.scaleToCover\n            ? util.findScaleToCover(backgroundImageRef.current, canvas)\n            : 1\n\n        const combinedZoom = fitZoom * manualZoom\n\n        // 2. 先应用基础缩放\n        canvas.setViewportTransform([combinedZoom, 0, 0, combinedZoom, 0, 0])\n\n        // 3. 如果需要居中，计算偏移量\n        let deltaX = 0\n        let deltaY = 0\n\n        if (defaultCentered && canvas.backgroundImage) {\n          const bgWidth = canvas.backgroundImage.width || 0\n          const bgHeight = canvas.backgroundImage.height || 0\n          deltaX = (canvas.width! - bgWidth * combinedZoom) / 2\n          deltaY = (canvas.height! - bgHeight * combinedZoom) / 2\n          // const canvasCenter = {\n          //   x: canvas.width! / 2,\n          //   y: canvas.height! / 2,\n          // }\n          // const bgCenter = {\n          //   x:\n          //     (canvas.backgroundImage.left! + (canvas.backgroundImage.width! * canvas.backgroundImage.scaleX!) / 2) *\n          //     combinedZoom,\n          //   y:\n          //     (canvas.backgroundImage.top! + (canvas.backgroundImage.height! * canvas.backgroundImage.scaleY!) / 2) *\n          //     combinedZoom,\n          // }\n          // deltaX = canvasCenter.x - bgCenter.x\n          // deltaY = canvasCenter.y - bgCenter.y\n        }\n\n        // 4. 应用最终变换\n        const finalTransform: [number, number, number, number, number, number] = [\n          combinedZoom,\n          0,\n          0,\n          combinedZoom,\n          deltaX,\n          deltaY,\n        ]\n\n        canvas.setViewportTransform(finalTransform)\n        canvas.requestRenderAll()\n\n        // 5. 更新 store\n        store.setState({\n          fitZoom,\n          manualZoom,\n          zoom: combinedZoom,\n        })\n      },\n      [store],\n    )\n\n    // 监听 width, height 的变化\n    useEffect(() => {\n      updateViewport({\n        scaleToFit,\n        scaleToCover,\n      })\n    }, [width, height, scaleToFit, scaleToCover, updateViewport, store])\n\n    useEffect(() => {\n      if (!src) {\n        console.warn('ReactFabricBackgroundImage: !src')\n        return\n      }\n      const { domNode, setLoading } = store.getState()\n      setLoading(true)\n      FabricImage.fromURL(src, { crossOrigin: 'anonymous' })\n        .then(imageSource => {\n          const { canvas } = store.getState()\n          if (canvas) {\n            // 初始化时角度的旋转，一定要放到 updateViewport 之后；先画正图片，再进行旋转\n            const removeAngleOptions = { ...options, angle: 0 }\n            imageSource.set({\n              ...removeAngleOptions,\n              objectCaching: false,\n            })\n            canvas.getContext().imageSmoothingEnabled = true\n            canvas.getContext().imageSmoothingQuality = 'high'\n            canvas.backgroundImage = imageSource\n            backgroundImageRef.current = imageSource\n\n            requestAnimationFrame(() => {\n              updateViewport({\n                scaleToFit,\n                scaleToCover,\n              })\n            })\n\n            const viewport = canvas.viewportTransform\n            if (!viewport) {\n              console.warn('!viewport')\n              return\n            }\n\n            // imageSource.angle = options.angle || 0\n            onLoad?.(imageSource)\n          } else {\n            console.warn('ReactFabric:BackgroundImage: !canvas', canvas)\n          }\n        })\n        .catch(console.error)\n        .finally(() => {\n          if (domNode) domNode.dataset.src = src\n          setLoading(false)\n        })\n\n      return () => {\n        const { canvas } = store.getState()\n        if (canvas?.backgroundImage) {\n          canvas.backgroundImage = undefined\n          canvas.remove(backgroundImageRef.current!)\n          backgroundImageRef.current = null\n          canvas.renderAll()\n        }\n      }\n      // eslint-disable-next-line react-hooks/exhaustive-deps\n    }, [src])\n\n    useDidUpdate(() => {\n      const { canvas } = store.getState()\n\n      if (backgroundImageRef.current) {\n        Object.entries(options).forEach(([key, value]) => {\n          if (key === 'angle') {\n            backgroundImageRef.current?.rotate(value as TDegree)\n          } else {\n            backgroundImageRef.current?.set(key, value)\n          }\n        })\n        canvas?.requestRenderAll()\n      }\n    }, [options, store])\n\n    useImperativeHandle(ref, () => ({\n      // 是最新的?\n      instance: backgroundImageRef.current,\n    }))\n\n    return null\n  },\n)\n\nexport default memo(BackgroundImage)\n"],"names":["selector","s","BackgroundImage","forwardRef","src","onLoad","onScaling","scaleToFit","scaleToCover","options","ref","backgroundImageRef","useRef","store","useStoreApi","width","height","useStore","updateViewport","useCallback","params","canvas","manualZoom","defaultCentered","fitZoom","util","combinedZoom","deltaX","deltaY","bgWidth","bgHeight","finalTransform","useEffect","domNode","setLoading","FabricImage","imageSource","removeAngleOptions","useDidUpdate","key","value","useImperativeHandle","memo"],"mappings":"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"}
+{"version":3,"file":"index.cjs","sources":["../../../../src/components/BackgroundImage/index.tsx"],"sourcesContent":["import type {\n  BasicTransformEvent,\n  ImageProps,\n  ObjectEvents,\n  SerializedImageProps,\n  TDegree,\n  TPointerEvent,\n} from 'fabric'\nimport { FabricImage, util } from 'fabric'\nimport { forwardRef, memo, useCallback, useEffect, useImperativeHandle, useRef } from 'react'\nimport { useDidUpdate } from '../../hooks/useDidUpdate'\nimport { useStore, useStoreApi } from '../../hooks/useStore'\nimport type { ReactFabricState } from '../../types/store'\n\nexport type Handle = {}\n\ntype ScaleMode = {\n  scaleToFit?: boolean\n  scaleToCover?: boolean\n}\nexport type BackgroundImageProps = Partial<ImageProps> & {\n  src: string\n  onLoad?: (imageSource: FabricImage<Partial<ImageProps>, SerializedImageProps, ObjectEvents>) => void\n  onScaling?: (scale: BasicTransformEvent<TPointerEvent>) => void\n\n  /** 自动缩放至容器宽高 */\n} & ScaleMode\n\nconst selector = (s: ReactFabricState) => ({\n  width: s.width,\n  height: s.height,\n})\n\nconst BackgroundImage = forwardRef<Handle, BackgroundImageProps>(\n  ({ src, onLoad, onScaling, scaleToFit, scaleToCover, ...options }, ref) => {\n    const backgroundImageRef = useRef<FabricImage | null>(null)\n\n    const store = useStoreApi()\n\n    const { width, height } = useStore(selector)\n\n    const updateViewport = useCallback(\n      (params: { scaleToFit?: boolean; scaleToCover?: boolean }) => {\n        const { canvas, manualZoom = 1, defaultCentered } = store.getState()\n        if (!backgroundImageRef.current) {\n          return\n        }\n        if (!canvas) {\n          console.warn('updateViewport: !canvas')\n          return\n        }\n        if (!canvas.backgroundImage) {\n          console.warn('updateViewport: !canvas.backgroundImage')\n          return\n        }\n\n        // 1. 计算缩放\n        const fitZoom = params.scaleToFit\n          ? util.findScaleToFit(backgroundImageRef.current, canvas)\n          : params.scaleToCover\n            ? util.findScaleToCover(backgroundImageRef.current, canvas)\n            : 1\n\n        const combinedZoom = fitZoom * manualZoom\n\n        // 2. 先应用基础缩放\n        canvas.setViewportTransform([combinedZoom, 0, 0, combinedZoom, 0, 0])\n\n        // 3. 如果需要居中，计算偏移量\n        let deltaX = 0\n        let deltaY = 0\n\n        if (defaultCentered && canvas.backgroundImage) {\n          const bgWidth = canvas.backgroundImage.width || 0\n          const bgHeight = canvas.backgroundImage.height || 0\n          deltaX = (canvas.width! - bgWidth * combinedZoom) / 2\n          deltaY = (canvas.height! - bgHeight * combinedZoom) / 2\n          // const canvasCenter = {\n          //   x: canvas.width! / 2,\n          //   y: canvas.height! / 2,\n          // }\n          // const bgCenter = {\n          //   x:\n          //     (canvas.backgroundImage.left! + (canvas.backgroundImage.width! * canvas.backgroundImage.scaleX!) / 2) *\n          //     combinedZoom,\n          //   y:\n          //     (canvas.backgroundImage.top! + (canvas.backgroundImage.height! * canvas.backgroundImage.scaleY!) / 2) *\n          //     combinedZoom,\n          // }\n          // deltaX = canvasCenter.x - bgCenter.x\n          // deltaY = canvasCenter.y - bgCenter.y\n        }\n\n        // 4. 应用最终变换\n        const finalTransform: [number, number, number, number, number, number] = [\n          combinedZoom,\n          0,\n          0,\n          combinedZoom,\n          deltaX,\n          deltaY,\n        ]\n\n        canvas.setViewportTransform(finalTransform)\n        canvas.requestRenderAll()\n\n        // 5. 更新 store\n        store.setState({\n          fitZoom,\n          manualZoom,\n          zoom: combinedZoom,\n        })\n      },\n      [store],\n    )\n\n    // 监听 width, height 的变化\n    useEffect(() => {\n      updateViewport({\n        scaleToFit,\n        scaleToCover,\n      })\n    }, [width, height, scaleToFit, scaleToCover, updateViewport, store])\n\n    useEffect(() => {\n      if (!src) {\n        console.warn('ReactFabricBackgroundImage: !src')\n        return\n      }\n      const { domNode, setLoading } = store.getState()\n      setLoading(true)\n      FabricImage.fromURL(src, { crossOrigin: 'anonymous' })\n        .then(imageSource => {\n          const currentSrc = imageSource.getSrc()\n          const latestSrc = backgroundImageRef.current?.getSrc()\n\n          if (latestSrc && currentSrc !== latestSrc) {\n            return\n          }\n\n          const { canvas } = store.getState()\n          if (canvas) {\n            // 初始化时角度的旋转，一定要放到 updateViewport 之后；先画正图片，再进行旋转\n            const removeAngleOptions = { ...options, angle: 0 }\n            imageSource.set({\n              ...removeAngleOptions,\n              objectCaching: false,\n            })\n            canvas.getContext().imageSmoothingEnabled = true\n            canvas.getContext().imageSmoothingQuality = 'high'\n            canvas.backgroundImage = imageSource\n            backgroundImageRef.current = imageSource\n\n            requestAnimationFrame(() => {\n              updateViewport({\n                scaleToFit,\n                scaleToCover,\n              })\n            })\n\n            const viewport = canvas.viewportTransform\n            if (!viewport) {\n              console.warn('!viewport')\n              return\n            }\n\n            // imageSource.angle = options.angle || 0\n            onLoad?.(imageSource)\n          } else {\n            console.warn('ReactFabric:BackgroundImage: !canvas', canvas)\n          }\n        })\n        .catch(console.error)\n        .finally(() => {\n          if (domNode) domNode.dataset.src = src\n          setLoading(false)\n        })\n\n      return () => {\n        const { canvas } = store.getState()\n        if (canvas?.backgroundImage) {\n          canvas.backgroundImage = undefined\n          canvas.remove(backgroundImageRef.current!)\n          backgroundImageRef.current = null\n          canvas.renderAll()\n        }\n      }\n    }, [src])\n\n    useDidUpdate(() => {\n      const { canvas } = store.getState()\n\n      if (backgroundImageRef.current) {\n        Object.entries(options).forEach(([key, value]) => {\n          if (key === 'angle') {\n            backgroundImageRef.current?.rotate(value as TDegree)\n          } else {\n            backgroundImageRef.current?.set(key, value)\n          }\n        })\n        canvas?.requestRenderAll()\n      }\n    }, [options, store])\n\n    useImperativeHandle(ref, () => ({\n      // 是最新的?\n      instance: backgroundImageRef.current,\n    }))\n\n    return null\n  },\n)\n\nexport default memo(BackgroundImage)\n"],"names":["selector","s","BackgroundImage","forwardRef","src","onLoad","onScaling","scaleToFit","scaleToCover","options","ref","backgroundImageRef","useRef","store","useStoreApi","width","height","useStore","updateViewport","useCallback","params","canvas","manualZoom","defaultCentered","fitZoom","util","combinedZoom","deltaX","deltaY","bgWidth","bgHeight","finalTransform","useEffect","domNode","setLoading","FabricImage","imageSource","currentSrc","latestSrc","removeAngleOptions","useDidUpdate","key","value","useImperativeHandle","memo"],"mappings":"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"}

package/dist/cjs/components/Canvas/index.cjs

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var h=require("react/jsx-runtime"),c=require("fabric"),n=require("react"),E=require("../../hooks/useDraggable.cjs"),R=require("../../hooks/useResizeHandler.cjs"),g=require("../../hooks/useSplitProps.cjs"),z=require("../../hooks/useStore.cjs"),Y=require("../../utils/events.cjs");const j={position:"absolute",width:"100%",height:"100%",top:0,left:0},x=({children:w,onMouseWheel:l,...q})=>{const e=n.useRef(),t=z.useStoreApi(),i=n.useRef(null);E.default();const f=n.useRef(null),[S,u]=g.useSplitProps(q);return n.useLayoutEffect(()=>{const o=i.current;e.current=new c.Canvas(o||void 0,{...u});const r=Y.bindEvents(e.current,S);return t.setState({canvas:e.current}),window.canvas=e.current,()=>{r(),e.current?.dispose(),o?.remove(),e.current=void 0,t.setState({canvas:null})}},[]),R.default(),n.useEffect(()=>{const o=r=>{const{zoomable:b,maxManualZoom:v,minManualZoom:d,fitZoom:m=1,zoom:P}=t.getState();if(r.e.preventDefault(),r.e.stopPropagation(),r.e.wheelDeltaY!==0){if(r.e.ctrlKey||r.e.wheelDeltaY===void 0){if(!b)return;const a=r.e.deltaY>0?.95:1.05;let s=P/m*a;s>v&&(s=v),s<d&&(s=d);const p=s*m;e.current?.zoomToPoint(new c.Point(r.e.offsetX,r.e.offsetY),p),t.setState({manualZoom:s,zoom:p})}else{const a=new c.Point(-r.e.deltaX*1.5,-r.e.deltaY*1.5);e.current?.relativePan(a)}l?.(r)}};return e.current?.on("mouse:wheel",o),()=>{e.current?.off("mouse:wheel",o)}},[l,t]),n.useEffect(()=>{t.setState({domNode:f.current?.closest(".react-fabric")})},[t]),n.useEffect(()=>{e.current&&(e.current.set(u),e.current.requestRenderAll())},[u]),h.jsxs("div",{className:"react-fabric__canvas",ref:f,style:j,children:[h.jsx("canvas",{ref:i}),w]})};exports.default=x;
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var c=require("react/jsx-runtime"),i=require("fabric"),a=require("react"),j=require("../../hooks/useDraggable.cjs"),x=require("../../hooks/useResizeHandler.cjs"),y=require("../../hooks/useSplitProps.cjs"),b=require("../../hooks/useStore.cjs"),z=require("../../utils/events.cjs");const E={position:"absolute",width:"100%",height:"100%",top:0,left:0},M=({children:w,onMouseWheel:l,...S})=>{const e=a.useRef(),o=b.useStoreApi(),f=a.useRef(null);j.default();const d=a.useRef(null),q=b.useStore(r=>r.controls),[P,n]=y.useSplitProps(S);return a.useLayoutEffect(()=>{const r=f.current;e.current=new i.Canvas(r||void 0,{...n});const t=z.bindEvents(e.current,P);return o.setState({canvas:e.current}),window.canvas=e.current,()=>{t(),e.current?.dispose(),r?.remove(),e.current=void 0,o.setState({canvas:null})}},[]),x.default(),a.useEffect(()=>{const r=t=>{const{zoomable:R,panAble:_,maxManualZoom:v,minManualZoom:m,fitZoom:p=1,zoom:g}=o.getState();if(t.e.preventDefault(),t.e.stopPropagation(),t.e.wheelDeltaY!==0){if(t.e.ctrlKey||t.e.wheelDeltaY===void 0){if(!R)return;const u=t.e.deltaY>0?.95:1.05;let s=g/p*u;s>v&&(s=v),s<m&&(s=m);const h=s*p;e.current?.zoomToPoint(new i.Point(t.e.offsetX,t.e.offsetY),h),o.setState({manualZoom:s,zoom:h})}else{if(!_)return;const u=1.5,s=new i.Point(-t.e.deltaX*u,-t.e.deltaY*u);e.current?.relativePan(s)}l?.(t)}};return e.current?.on("mouse:wheel",r),()=>{e.current?.off("mouse:wheel",r)}},[l,o]),a.useEffect(()=>{o.setState({domNode:d.current?.closest(".react-fabric")})},[o]),a.useEffect(()=>{e.current&&(e.current.set(n),e.current.requestRenderAll())},[n]),c.jsxs("div",{className:"react-fabric__canvas",ref:d,style:E,children:[c.jsx("canvas",{ref:f}),w,q.map(r=>c.jsx("div",{id:r.id,style:{position:"absolute"},className:`react-fabric__control ${r.className}`,ref:r.ref,children:r.children},r.id))]})};exports.default=M;
 //# sourceMappingURL=index.cjs.map

package/dist/cjs/components/Canvas/index.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.cjs","sources":["../../../../src/components/Canvas/index.tsx"],"sourcesContent":["import type { CanvasEvents, CanvasOptions, TPointerEventInfo } from 'fabric'\nimport { Canvas as BaseCanvas, Point } from 'fabric'\nimport type { CSSProperties, PropsWithChildren } from 'react'\nimport { useEffect, useLayoutEffect, useRef } from 'react'\nimport useDraggable from '../../hooks/useDraggable'\nimport useResizeHandler from '../../hooks/useResizeHandler'\nimport { useSplitProps } from '../../hooks/useSplitProps'\nimport { useStoreApi } from '../../hooks/useStore'\nimport type { AllCanvasEvents } from '../../types/canvas'\nimport { bindEvents } from '../../utils/events'\n\nconst style: CSSProperties = {\n  position: 'absolute',\n  width: '100%',\n  height: '100%',\n  top: 0,\n  left: 0,\n}\n\n// 首先定义事件类型\ntype CanvasEventProps = {\n  [K in keyof AllCanvasEvents]: AllCanvasEvents[K]\n}\n\n// 分离配置属性类型\ntype CanvasConfigProps = Omit<CanvasOptions, keyof CanvasEventProps>\n\n// 重新定义 CanvasProps\nexport type CanvasProps = PropsWithChildren<Partial<CanvasConfigProps> & Partial<CanvasEventProps>>\n\nconst Canvas = ({ children, onMouseWheel, ...props }: CanvasProps) => {\n  const canvasRef = useRef<BaseCanvas>()\n  const store = useStoreApi()\n  const canvasDomRef = useRef<HTMLCanvasElement | null>(null)\n  useDraggable()\n  const domRef = useRef<HTMLDivElement>(null)\n\n  const [listeners, attributes] = useSplitProps(props)\n\n  useLayoutEffect(() => {\n    const canvas = canvasDomRef.current\n\n    canvasRef.current = new BaseCanvas(canvas || undefined, {\n      ...attributes,\n    })\n\n    // 绑定事件并获取清理函数\n    const unbindEvents = bindEvents<CanvasEvents>(canvasRef.current, listeners)\n\n    store.setState({\n      canvas: canvasRef.current,\n    })\n    //@ts-expect-error\n    window.canvas = canvasRef.current\n\n    return () => {\n      unbindEvents() // 调用清理函数\n      canvasRef.current?.dispose()\n      canvas?.remove()\n      canvasRef.current = undefined // 清除引用\n      store.setState({\n        canvas: null,\n      })\n    }\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [])\n\n  useResizeHandler()\n\n  useEffect(() => {\n    const onMouseWheelHandler = (opt: TPointerEventInfo<WheelEvent>) => {\n      const { zoomable, maxManualZoom, minManualZoom, fitZoom = 1, zoom } = store.getState()\n\n      // 阻止默认行为\n      opt.e.preventDefault()\n      opt.e.stopPropagation()\n\n      // 如果是惯性滚动，直接返回\n      if ((opt.e as any).wheelDeltaY === 0) return\n\n      // 检查是否为缩放手势(Mac 上的双指捏合/张开)\n      if (opt.e.ctrlKey || (opt.e as any).wheelDeltaY === undefined) {\n        // 缩放逻辑\n        if (!zoomable) return\n\n        const delta = opt.e.deltaY\n        const zoomFactor = delta > 0 ? 0.95 : 1.05\n        let currentManualZoom = zoom / fitZoom\n        let newManualZoom = currentManualZoom * zoomFactor\n\n        if (newManualZoom > maxManualZoom) newManualZoom = maxManualZoom\n        if (newManualZoom < minManualZoom) newManualZoom = minManualZoom\n\n        const combinedZoom = newManualZoom * fitZoom\n\n        canvasRef.current?.zoomToPoint(new Point(opt.e.offsetX, opt.e.offsetY), combinedZoom)\n\n        store.setState({\n          manualZoom: newManualZoom,\n          zoom: combinedZoom,\n        })\n      } else {\n        // 平移逻辑\n        // 如果觉得太灵敏了，可以调小这个值，比如改为 1.2 或更小\n        const sensitivityFactor = 1.5\n        const delta = new Point(-opt.e.deltaX * sensitivityFactor, -opt.e.deltaY * sensitivityFactor)\n        canvasRef.current?.relativePan(delta)\n      }\n\n      onMouseWheel?.(opt)\n    }\n\n    canvasRef.current?.on('mouse:wheel', onMouseWheelHandler)\n\n    return () => {\n      canvasRef.current?.off('mouse:wheel', onMouseWheelHandler)\n    }\n  }, [onMouseWheel, store])\n\n  useEffect(() => {\n    store.setState({\n      domNode: domRef.current?.closest('.react-fabric') as HTMLDivElement,\n    })\n  }, [store])\n\n  useEffect(() => {\n    if (canvasRef.current) {\n      canvasRef.current.set(attributes)\n      canvasRef.current.requestRenderAll()\n    }\n  }, [attributes])\n\n  return (\n    <div className=\"react-fabric__canvas\" ref={domRef} style={style}>\n      <canvas ref={canvasDomRef}></canvas>\n      {children}\n    </div>\n  )\n}\n\nexport default Canvas\n"],"names":["style","Canvas","children","onMouseWheel","props","canvasRef","useRef","store","useStoreApi","canvasDomRef","useDraggable","domRef","listeners","attributes","useSplitProps","useLayoutEffect","canvas","BaseCanvas","unbindEvents","bindEvents","useResizeHandler","useEffect","onMouseWheelHandler","opt","zoomable","maxManualZoom","minManualZoom","fitZoom","zoom","zoomFactor","newManualZoom","combinedZoom","Point","delta","jsxs","jsx"],"mappings":"iWAWMA,EAAuB,CAC3B,SAAU,WACV,MAAO,OACP,OAAQ,OACR,IAAK,EACL,KAAM,CACR,EAaMC,EAAS,CAAC,CAAE,SAAAC,EAAU,aAAAC,EAAc,GAAGC,CAAM,IAAmB,CACpE,MAAMC,EAAYC,EAAAA,SACZC,EAAQC,EAAAA,YACRC,EAAAA,EAAeH,SAAiC,IAAI,EAC1DI,EAAAA,QACA,EAAA,MAAMC,EAASL,EAAuB,OAAA,IAAI,EAEpC,CAACM,EAAWC,CAAU,EAAIC,EAAAA,cAAcV,CAAK,EAEnD,OAAAW,EAAAA,gBAAgB,IAAM,CACpB,MAAMC,EAASP,EAAa,QAE5BJ,EAAU,QAAU,IAAIY,EAAAA,OAAWD,GAAU,OAAW,CACtD,GAAGH,CACL,CAAC,EAGD,MAAMK,EAAeC,EAAAA,WAAyBd,EAAU,QAASO,CAAS,EAE1E,OAAAL,EAAM,SAAS,CACb,OAAQF,EAAU,OACpB,CAAC,EAED,OAAO,OAASA,EAAU,QAEnB,IAAM,CACXa,EAAa,EACbb,EAAU,SAAS,QAAA,EACnBW,GAAQ,OACRX,EAAAA,EAAU,QAAU,OACpBE,EAAM,SAAS,CACb,OAAQ,IACV,CAAC,CACH,CAEF,EAAG,CAAE,CAAA,EAELa,EAAAA,QAEAC,EAAAA,EAAAA,UAAU,IAAM,CACd,MAAMC,EAAuBC,GAAuC,CAClE,KAAM,CAAE,SAAAC,EAAU,cAAAC,EAAe,cAAAC,EAAe,QAAAC,EAAU,EAAG,KAAAC,CAAK,EAAIrB,EAAM,SAAS,EAOrF,GAJAgB,EAAI,EAAE,eAAe,EACrBA,EAAI,EAAE,gBAAA,EAGDA,EAAI,EAAU,cAAgB,EAGnC,IAAIA,EAAI,EAAE,SAAYA,EAAI,EAAU,cAAgB,OAAW,CAE7D,GAAI,CAACC,EAAU,OAGf,MAAMK,EADQN,EAAI,EAAE,OACO,EAAI,IAAO,KAEtC,IAAIO,EADoBF,EAAOD,EACSE,EAEpCC,EAAgBL,IAAeK,EAAgBL,GAC/CK,EAAgBJ,IAAeI,EAAgBJ,GAEnD,MAAMK,EAAeD,EAAgBH,EAErCtB,EAAU,SAAS,YAAY,IAAI2B,QAAMT,EAAI,EAAE,QAASA,EAAI,EAAE,OAAO,EAAGQ,CAAY,EAEpFxB,EAAM,SAAS,CACb,WAAYuB,EACZ,KAAMC,CACR,CAAC,CACH,KAAO,CAIL,MAAME,EAAQ,IAAID,EAAAA,MAAM,CAACT,EAAI,EAAE,OAAS,IAAmB,CAACA,EAAI,EAAE,OAAS,GAAiB,EAC5FlB,EAAU,SAAS,YAAY4B,CAAK,CACtC,CAEA9B,IAAeoB,CAAG,CACpB,CAAA,EAEA,OAAAlB,EAAU,SAAS,GAAG,cAAeiB,CAAmB,EAEjD,IAAM,CACXjB,EAAU,SAAS,IAAI,cAAeiB,CAAmB,CAC3D,CACF,EAAG,CAACnB,EAAcI,CAAK,CAAC,EAExBc,EAAAA,UAAU,IAAM,CACdd,EAAM,SAAS,CACb,QAASI,EAAO,SAAS,QAAQ,eAAe,CAClD,CAAC,CACH,EAAG,CAACJ,CAAK,CAAC,EAEVc,EAAAA,UAAU,IAAM,CACVhB,EAAU,UACZA,EAAU,QAAQ,IAAIQ,CAAU,EAChCR,EAAU,QAAQ,iBAEtB,EAAA,EAAG,CAACQ,CAAU,CAAC,EAGbqB,EAAAA,KAAC,OAAI,UAAU,uBAAuB,IAAKvB,EAAQ,MAAOX,EACxD,SAAAmC,CAAAA,EAAAA,IAAC,UAAO,IAAK1B,CAAAA,CAAc,EAC1BP,CACH,CAAA,CAAA,CAEJ"}
+{"version":3,"file":"index.cjs","sources":["../../../../src/components/Canvas/index.tsx"],"sourcesContent":["import type { CanvasEvents, CanvasOptions, TPointerEventInfo } from 'fabric'\nimport { Canvas as BaseCanvas, Point } from 'fabric'\nimport type { CSSProperties, PropsWithChildren } from 'react'\nimport { useEffect, useLayoutEffect, useRef } from 'react'\nimport useDraggable from '../../hooks/useDraggable'\nimport useResizeHandler from '../../hooks/useResizeHandler'\nimport { useSplitProps } from '../../hooks/useSplitProps'\nimport { useStore, useStoreApi } from '../../hooks/useStore'\nimport type { AllCanvasEvents } from '../../types/canvas'\nimport { bindEvents } from '../../utils/events'\n\nconst style: CSSProperties = {\n  position: 'absolute',\n  width: '100%',\n  height: '100%',\n  top: 0,\n  left: 0,\n}\n\n// 首先定义事件类型\ntype CanvasEventProps = {\n  [K in keyof AllCanvasEvents]: AllCanvasEvents[K]\n}\n\n// 分离配置属性类型\ntype CanvasConfigProps = Omit<CanvasOptions, keyof CanvasEventProps>\n\n// 重新定义 CanvasProps\nexport type CanvasProps = PropsWithChildren<Partial<CanvasConfigProps> & Partial<CanvasEventProps>>\n\nconst Canvas = ({ children, onMouseWheel, ...props }: CanvasProps) => {\n  const canvasRef = useRef<BaseCanvas>()\n  const store = useStoreApi()\n  const canvasDomRef = useRef<HTMLCanvasElement | null>(null)\n  useDraggable()\n  const domRef = useRef<HTMLDivElement>(null)\n  const controls = useStore(state => state.controls)\n\n  const [listeners, attributes] = useSplitProps(props)\n\n  useLayoutEffect(() => {\n    const canvas = canvasDomRef.current\n\n    canvasRef.current = new BaseCanvas(canvas || undefined, {\n      ...attributes,\n    })\n\n    // 绑定事件并获取清理函数\n    const unbindEvents = bindEvents<CanvasEvents>(canvasRef.current, listeners)\n\n    store.setState({\n      canvas: canvasRef.current,\n    })\n    //@ts-expect-error 报错撒撒\n    window.canvas = canvasRef.current\n\n    return () => {\n      unbindEvents() // 调用清理函数\n      canvasRef.current?.dispose()\n      canvas?.remove()\n      canvasRef.current = undefined // 清除引用\n      store.setState({\n        canvas: null,\n      })\n    }\n  }, [])\n\n  useResizeHandler()\n\n  useEffect(() => {\n    const onMouseWheelHandler = (opt: TPointerEventInfo<WheelEvent>) => {\n      const { zoomable, panAble, maxManualZoom, minManualZoom, fitZoom = 1, zoom } = store.getState()\n\n      // 阻止默认行为\n      opt.e.preventDefault()\n      opt.e.stopPropagation()\n\n      // 如果是惯性滚动，直接返回\n      if ((opt.e as any).wheelDeltaY === 0) return\n\n      // 检查是否为缩放手势(Mac 上的双指捏合/张开)\n      if (opt.e.ctrlKey || (opt.e as any).wheelDeltaY === undefined) {\n        // 缩放逻辑\n        if (!zoomable) return\n\n        const delta = opt.e.deltaY\n        const zoomFactor = delta > 0 ? 0.95 : 1.05\n        const currentManualZoom = zoom / fitZoom\n        let newManualZoom = currentManualZoom * zoomFactor\n\n        if (newManualZoom > maxManualZoom) newManualZoom = maxManualZoom\n        if (newManualZoom < minManualZoom) newManualZoom = minManualZoom\n\n        const combinedZoom = newManualZoom * fitZoom\n\n        canvasRef.current?.zoomToPoint(new Point(opt.e.offsetX, opt.e.offsetY), combinedZoom)\n\n        store.setState({\n          manualZoom: newManualZoom,\n          zoom: combinedZoom,\n        })\n      } else {\n        if (!panAble) return\n        // 平移逻辑\n        // 如果觉得太灵敏了，可以调小这个值，比如改为 1.2 或更小\n        const sensitivityFactor = 1.5\n        const delta = new Point(-opt.e.deltaX * sensitivityFactor, -opt.e.deltaY * sensitivityFactor)\n        canvasRef.current?.relativePan(delta)\n      }\n\n      onMouseWheel?.(opt)\n    }\n\n    canvasRef.current?.on('mouse:wheel', onMouseWheelHandler)\n\n    return () => {\n      canvasRef.current?.off('mouse:wheel', onMouseWheelHandler)\n    }\n  }, [onMouseWheel, store])\n\n  useEffect(() => {\n    store.setState({\n      domNode: domRef.current?.closest('.react-fabric') as HTMLDivElement,\n    })\n  }, [store])\n\n  useEffect(() => {\n    if (canvasRef.current) {\n      canvasRef.current.set(attributes)\n      canvasRef.current.requestRenderAll()\n    }\n  }, [attributes])\n\n  return (\n    <div className=\"react-fabric__canvas\" ref={domRef} style={style}>\n      <canvas ref={canvasDomRef}></canvas>\n      {children}\n      {controls.map(control => (\n        <div\n          key={control.id}\n          id={control.id}\n          style={{\n            position: 'absolute',\n          }}\n          className={`react-fabric__control ${control.className}`}\n          ref={control.ref}\n        >\n          {control.children}\n        </div>\n      ))}\n    </div>\n  )\n}\n\nexport default Canvas\n"],"names":["style","Canvas","children","onMouseWheel","props","canvasRef","useRef","store","useStoreApi","canvasDomRef","useDraggable","domRef","controls","useStore","state","listeners","attributes","useSplitProps","useLayoutEffect","canvas","BaseCanvas","unbindEvents","bindEvents","useResizeHandler","useEffect","onMouseWheelHandler","opt","zoomable","panAble","maxManualZoom","minManualZoom","fitZoom","zoom","zoomFactor","newManualZoom","combinedZoom","Point","sensitivityFactor","delta","jsxs","jsx","control"],"mappings":"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"}

package/dist/cjs/components/Control2/index.cjs

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var x=require("react/jsx-runtime"),p=require("@floating-ui/core"),b=require("fabric"),n=require("react"),E=require("../../hooks/useStore.cjs");const O=()=>Math.random().toString(36).substring(2)+Date.now().toString(36),P=n.forwardRef(({children:u,className:g,placement:v="bottom",open:a=!0,onOpenChange:w,closeOnOutsideClick:S=!0,Content:h},l)=>{const m=n.useRef(void 0),r=E.useStore(e=>e.canvas),o=n.useRef(null),[c,j]=n.useState(O()),i=E.useStoreApi(),y=n.useCallback(e=>{e!==m.current&&(m.current=e,typeof l=="function"?l(e):l&&(l.current=e))},[l]),C=n.useMemo(()=>n.Children.only(u)&&n.isValidElement(u)?n.cloneElement(u,{ref:y,...u.props}):u,[u,y]),d=n.useCallback(()=>{if(!m.current||!o.current||!r)return;const e=o.current.getBoundingClientRect();if(e.width===0||e.height===0){requestAnimationFrame(d);return}const t=m.current.getCoords().map(s=>b.util.sendPointToPlane(s,r.viewportTransform,void 0)),f={getElementRects:s=>s,getDimensions:s=>s,getClippingRect:()=>({x:0,y:0,width:r.width,height:r.height})},R={x:t[0].x,y:t[0].y,width:t[2].x-t[0].x,height:t[2].y-t[0].y};p.computePosition(R,o.current.getBoundingClientRect(),{platform:f,placement:v,middleware:[p.offset(5),p.flip(),p.shift({padding:5})]}).then(({x:s,y:q})=>{o.current&&Object.assign(o.current.style,{left:`${s}px`,top:`${q}px`})})},[r,v]);return n.useEffect(()=>{a&&requestAnimationFrame(d)},[a,d]),n.useEffect(()=>(r?.on("after:render",d),()=>{r?.off("after:render",d)}),[r,d]),n.useEffect(()=>{const e=f=>{f.e.stopPropagation(),f.e.preventDefault()},t=f=>{o.current?.contains(f.target)||S&&a&&w?.(!1)};return r?.on("mouse:down",e),document.addEventListener("mousedown",t,!1),()=>{r?.off("mouse:down",e),document.removeEventListener("mousedown",t,!1)}},[r,S,w,a]),n.useEffect(()=>{const{controls:e}=i.getState();if(!e.find(t=>t.id===c))return i.setState({controls:[...e,{id:c,className:g,children:h,ref:o}]}),()=>{i.setState({controls:e.filter(t=>t.id!==c)})}},[i]),n.useEffect(()=>{const{controls:e}=i.getState();e.find(t=>t.id===c)&&i.setState({controls:e.map(t=>t.id===c?{...t,children:a?h:null,className:g}:t)})},[h,g,c,i,a]),x.jsx(x.Fragment,{children:C})});exports.default=P;
+//# sourceMappingURL=index.cjs.map

package/dist/cjs/components/Control2/index.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.cjs","sources":["../../../../src/components/Control2/index.tsx"],"sourcesContent":["import { computePosition, flip, offset, shift } from '@floating-ui/core'\nimport type { ComputePositionConfig } from '@floating-ui/react'\nimport type { FabricObject, FabricObjectProps, TPointerEvent, TPointerEventInfo } from 'fabric'\nimport { util } from 'fabric'\nimport type { ReactNode } from 'react'\nimport { useState } from 'react'\nimport { useMemo } from 'react'\nimport { useCallback } from 'react'\nimport { useRef } from 'react'\nimport { useEffect } from 'react'\nimport React from 'react'\nimport { useStore, useStoreApi } from '../../hooks/useStore'\nimport type { AllObjectEvents } from '../../types/object'\n\n// 生成随机ID的函数\nconst generateRandomId = (): string => {\n  return Math.random().toString(36).substring(2) + Date.now().toString(36)\n}\n\n/**\n * @desc 不能内置支持 selected , 因为需要 rect 开启 lockMovementX lockMovementY, 这样支持的场景就受限了\n */\nexport type Control2Props = Partial<AllObjectEvents & FabricObjectProps> & {\n  Content: ReactNode\n  children: ReactNode\n  placement?: ComputePositionConfig['placement']\n  className?: string\n  open?: boolean\n  onOpenChange?: (open: boolean) => void\n  closeOnOutsideClick?: boolean\n}\n\nconst Control = React.forwardRef(\n  (\n    {\n      children,\n      className,\n      placement = 'bottom',\n      open = true,\n      onOpenChange,\n      closeOnOutsideClick = true,\n      Content,\n    }: Control2Props,\n    forwardRef,\n  ) => {\n    const instanceRef = useRef<FabricObject | undefined>(undefined)\n    const canvas = useStore(state => state.canvas)\n    const floatingElRef = useRef<HTMLDivElement>(null)\n    const [id, _setId] = useState(generateRandomId())\n\n    const store = useStoreApi()\n    // 使用 useCallback 创建稳定的 ref 回调\n    const refCallback = useCallback(\n      (node: any) => {\n        // 只在节点真正改变时更新 ref\n        if (node !== instanceRef.current) {\n          instanceRef.current = node\n\n          // 处理 forwardRef\n          if (typeof forwardRef === 'function') {\n            forwardRef(node)\n          } else if (forwardRef) {\n            forwardRef.current = node\n          }\n        }\n      },\n      [forwardRef],\n    )\n\n    // 使用 useMemo 缓存克隆的子元素\n    const newChildren = useMemo(() => {\n      if (React.Children.only(children) && React.isValidElement(children)) {\n        return React.cloneElement(children, {\n          ref: refCallback,\n          ...children.props,\n        })\n      }\n      return children\n    }, [children, refCallback]) // 只在 children 或 refCallback 改变时重新克隆\n\n    const updatePosition = useCallback(() => {\n      // 这里测试下来是多余的，可删除；after:render 后都有值\n      if (!instanceRef.current || !floatingElRef.current || !canvas) {\n        return\n      }\n\n      // 确保元素已经渲染并且有尺寸\n      const floatingRect = floatingElRef.current.getBoundingClientRect()\n      if (floatingRect.width === 0 || floatingRect.height === 0) {\n        // 如果元素还没有尺寸，等待下一帧再试\n        requestAnimationFrame(updatePosition)\n        return\n      }\n\n      const sceneCoords = instanceRef.current.getCoords()\n      const viewportCoords = sceneCoords.map(point => util.sendPointToPlane(point, canvas.viewportTransform, undefined))\n\n      const platform = {\n        getElementRects: (data: any) => data,\n        getDimensions: (element: any) => element,\n        getClippingRect: () => ({\n          x: 0,\n          y: 0,\n          width: canvas.width,\n          height: canvas.height,\n        }),\n      }\n\n      const virtualEl = {\n        x: viewportCoords[0].x,\n        y: viewportCoords[0].y,\n        width: viewportCoords[2].x - viewportCoords[0].x,\n        height: viewportCoords[2].y - viewportCoords[0].y,\n      }\n\n      computePosition(virtualEl, floatingElRef.current.getBoundingClientRect(), {\n        platform,\n        placement,\n        middleware: [offset(5), flip(), shift({ padding: 5 })],\n      }).then(({ x, y }) => {\n        if (!floatingElRef.current) return\n\n        Object.assign(floatingElRef.current.style, {\n          left: `${x}px`,\n          top: `${y}px`,\n        })\n      })\n    }, [canvas, placement])\n\n    // 确保在元素挂载后更新位置\n    // 这里测试下来是多余的，可删除；\n    useEffect(() => {\n      if (open) {\n        requestAnimationFrame(updatePosition)\n      }\n    }, [open, updatePosition])\n\n    useEffect(() => {\n      canvas?.on('after:render', updatePosition)\n\n      return () => {\n        canvas?.off('after:render', updatePosition)\n      }\n    }, [canvas, updatePosition])\n\n    useEffect(() => {\n      const handleCanvasClick = (e: TPointerEventInfo<TPointerEvent>) => {\n        // 阻止事件冒泡到 document\n        e.e.stopPropagation()\n        e.e.preventDefault() // 也阻止默认行为\n\n        // 使用 id 比较来确保正确匹配\n        // if (e.target === instanceRef.current) {\n        //   onOpenChange?.(!open)\n        // }\n        // // 点击其他区域时关闭\n        // else if (open) {\n        //   onOpenChange?.(false)\n        // }\n      }\n\n      const handleDocumentClick = (e: MouseEvent) => {\n        // 如果点击在浮动内容内，不处理\n        if (floatingElRef.current?.contains(e.target as Node)) {\n          return\n        }\n\n        if (closeOnOutsideClick && open) {\n          onOpenChange?.(false)\n        }\n      }\n\n      canvas?.on('mouse:down', handleCanvasClick)\n      // 改为冒泡阶段处理 document 事件\n      document.addEventListener('mousedown', handleDocumentClick, false)\n\n      return () => {\n        canvas?.off('mouse:down', handleCanvasClick)\n        document.removeEventListener('mousedown', handleDocumentClick, false)\n      }\n    }, [canvas, closeOnOutsideClick, onOpenChange, open])\n\n    useEffect(() => {\n      const { controls } = store.getState()\n\n      const control = controls.find(control => control.id === id)\n\n      if (control) {\n        return\n      }\n\n      store.setState({\n        controls: [\n          ...controls,\n          {\n            id,\n            className,\n            children: Content,\n            ref: floatingElRef,\n          },\n        ],\n      })\n      return () => {\n        store.setState({\n          controls: controls.filter(control => control.id !== id),\n        })\n      }\n    }, [store])\n\n    useEffect(() => {\n      const { controls } = store.getState()\n      const control = controls.find(control => control.id === id)\n\n      if (control) {\n        store.setState({\n          controls: controls.map(control =>\n            control.id === id ? { ...control, children: open ? Content : null, className } : control,\n          ),\n        })\n      }\n    }, [Content, className, id, store, open])\n\n    return <>{newChildren}</>\n  },\n)\n\nexport default Control\n"],"names":["generateRandomId","Control","React","children","className","placement","open","onOpenChange","closeOnOutsideClick","Content","forwardRef","instanceRef","useRef","canvas","useStore","state","floatingElRef","id","_setId","useState","store","useStoreApi","refCallback","useCallback","node","newChildren","useMemo","updatePosition","floatingRect","viewportCoords","point","util","platform","data","element","virtualEl","computePosition","offset","flip","shift","x","y","useEffect","handleCanvasClick","e","handleDocumentClick","controls","control","jsx","Fragment"],"mappings":"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"}

package/dist/cjs/components/Ellipse/index.cjs

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var u=require("react/jsx-runtime"),p=require("fabric"),e=require("react"),c=require("../../hooks/useCreateObject.cjs"),v=require("../../hooks/useSplitProps.cjs"),f=require("../../hooks/useChildrenPosition.cjs");const m=e.forwardRef(({group:i,children:r,...s},l)=>{const[n,a,o]=v.useSplitProps(s),t=c.useCreateObject({Constructor:p.Ellipse,defaultValues:o,attributes:a,group:i,listeners:n}),d=f.useChildrenPosition(t);return e.useImperativeHandle(l,()=>t,[t]),r?u.jsx(u.Fragment,{children:e.isValidElement(r)?e.cloneElement(r,{...r.props,ref:d}):null}):null});var q=e.memo(m);exports.default=q;
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var l=require("fabric"),r=require("react"),c=require("../../hooks/useCreateObject.cjs"),p=require("../../hooks/useSplitProps.cjs"),d=require("../../hooks/useInstancePosition.cjs");const v=r.forwardRef(({group:t,children:u,...s},i)=>{const[a,o,n]=p.useSplitProps(s),e=c.useCreateObject({Constructor:l.Ellipse,defaultValues:n,attributes:o,group:t,listeners:a});return r.useImperativeHandle(i,()=>e,[e]),d.useInstancePosition(e,u)});var b=r.memo(v);exports.default=b;
 //# sourceMappingURL=index.cjs.map

package/dist/cjs/components/Ellipse/index.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.cjs","sources":["../../../../src/components/Ellipse/index.tsx"],"sourcesContent":["import type { Group as BaseGroup } from 'fabric'\nimport { Ellipse as BaseEllipse } from 'fabric'\nimport { cloneElement, forwardRef, isValidElement, memo, useImperativeHandle, type ReactNode } from 'react'\nimport { useCreateObject } from '../../hooks/useCreateObject'\nimport { useSplitProps } from '../../hooks/useSplitProps'\nimport type { AllObjectEvents } from '../../types/object'\nimport { useChildrenPosition } from '../../hooks/useChildrenPosition'\n\nexport type EllipseProps<T = unknown> = Partial<BaseEllipse & AllObjectEvents> & {\n  group?: BaseGroup\n  defaultLeft?: number\n  defaultTop?: number\n  defaultWidth?: number\n  defaultHeight?: number\n  children?: ReactNode\n} & T\n\nconst Ellipse = forwardRef<BaseEllipse | undefined, EllipseProps>(({ group, children, ...props }, ref) => {\n  const [listeners, attributes, defaultValues] = useSplitProps(props)\n\n  const instance = useCreateObject({\n    Constructor: BaseEllipse,\n    defaultValues,\n    attributes,\n    group,\n    listeners,\n  })\n  const childrenRef = useChildrenPosition<HTMLDivElement>(instance)\n  useImperativeHandle(ref, () => instance, [instance])\n\n  return children ? (\n    <>\n      {isValidElement(children)\n        ? cloneElement(children, {\n            ...(children.props as any),\n            ref: childrenRef,\n          } as any)\n        : null}\n    </>\n  ) : null\n})\n\nexport default memo(Ellipse)\n"],"names":["Ellipse","forwardRef","group","children","props","ref","listeners","attributes","defaultValues","useSplitProps","instance","useCreateObject","BaseEllipse","childrenRef","useChildrenPosition","useImperativeHandle","jsx","Fragment","isValidElement","cloneElement","memo"],"mappings":"uRAiBA,MAAMA,EAAUC,EAAkD,WAAA,CAAC,CAAE,MAAAC,EAAO,SAAAC,EAAU,GAAGC,CAAM,EAAGC,IAAQ,CACxG,KAAM,CAACC,EAAWC,EAAYC,CAAa,EAAIC,EAAcL,cAAAA,CAAK,EAE5DM,EAAWC,EAAAA,gBAAgB,CAC/B,YAAaC,EACb,QAAA,cAAAJ,EACA,WAAAD,EACA,MAAAL,EACA,UAAAI,CACF,CAAC,EACKO,EAAcC,EAAoCJ,oBAAAA,CAAQ,EAChE,OAAAK,sBAAoBV,EAAK,IAAMK,EAAU,CAACA,CAAQ,CAAC,EAE5CP,EACLa,EAAAA,IAAAC,EAAA,SAAA,CACG,SAAAC,EAAAA,eAAef,CAAQ,EACpBgB,EAAAA,aAAahB,EAAU,CACrB,GAAIA,EAAS,MACb,IAAKU,CACP,CAAQ,EACR,IACN,CAAA,EACE,IACN,CAAC,EAED,IAAeO,EAAAA,EAAAA,KAAKpB,CAAO"}
+{"version":3,"file":"index.cjs","sources":["../../../../src/components/Ellipse/index.tsx"],"sourcesContent":["import type { Group as BaseGroup } from 'fabric'\nimport { Ellipse as BaseEllipse } from 'fabric'\nimport { forwardRef, memo, useImperativeHandle, type ReactNode } from 'react'\nimport { useCreateObject } from '../../hooks/useCreateObject'\nimport { useSplitProps } from '../../hooks/useSplitProps'\nimport type { AllObjectEvents } from '../../types/object'\nimport { useInstancePosition } from '../../hooks/useInstancePosition'\n\nexport type EllipseProps<T = unknown> = Partial<BaseEllipse & AllObjectEvents> & {\n  group?: BaseGroup\n  defaultLeft?: number\n  defaultTop?: number\n  defaultWidth?: number\n  defaultHeight?: number\n  children?: ReactNode\n} & T\n\nconst Ellipse = forwardRef<BaseEllipse | undefined, EllipseProps>(({ group, children, ...props }, ref) => {\n  const [listeners, attributes, defaultValues] = useSplitProps(props)\n\n  const instance = useCreateObject({\n    Constructor: BaseEllipse,\n    defaultValues,\n    attributes,\n    group,\n    listeners,\n  })\n  useImperativeHandle(ref, () => instance, [instance])\n\n  return useInstancePosition(instance, children)\n})\n\nexport default memo(Ellipse)\n"],"names":["Ellipse","forwardRef","group","children","props","ref","listeners","attributes","defaultValues","useSplitProps","instance","useCreateObject","BaseEllipse","useImperativeHandle","useInstancePosition","memo"],"mappings":"wPAiBA,MAAMA,EAAUC,EAAAA,WAAkD,CAAC,CAAE,MAAAC,EAAO,SAAAC,EAAU,GAAGC,CAAM,EAAGC,IAAQ,CACxG,KAAM,CAACC,EAAWC,EAAYC,CAAa,EAAIC,EAAAA,cAAcL,CAAK,EAE5DM,EAAWC,EAAAA,gBAAgB,CAC/B,YAAaC,EAAAA,QACb,cAAAJ,EACA,WAAAD,EACA,MAAAL,EACA,UAAAI,CACF,CAAC,EACD,OAAAO,EAAAA,oBAAoBR,EAAK,IAAMK,EAAU,CAACA,CAAQ,CAAC,EAE5CI,sBAAoBJ,EAAUP,CAAQ,CAC/C,CAAC,EAED,MAAeY,OAAKf,CAAO"}

package/dist/cjs/components/Group/index.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.cjs","sources":["../../../../src/components/Group/index.tsx"],"sourcesContent":["import type { GroupEvents, GroupProps } from 'fabric'\nimport { Group as BaseGroup } from 'fabric'\nimport { Children, cloneElement, isValidElement, memo, useEffect, useLayoutEffect, useState } from 'react'\nimport { useDidUpdate } from '../../hooks/useDidUpdate'\nimport { useSplitProps } from '../../hooks/useSplitProps'\nimport { useStoreApi } from '../../hooks/useStore'\nimport type { AllEvents } from '../../types/canvas'\nimport { bindEvents } from '../../utils/events'\n\nexport type MyGroupProps = Partial<GroupProps & AllEvents<GroupEvents>> & {\n  children: React.ReactElement<{ group?: BaseGroup }>[] | React.ReactElement<{ group?: BaseGroup }>\n  controlsVisibility?: {\n    ml?: boolean\n    mt?: boolean\n    mr?: boolean\n    mb?: boolean\n    mtr?: boolean\n    tl?: boolean\n    tr?: boolean\n    bl?: boolean\n    br?: boolean\n  }\n}\n\nconst Group = memo(({ children, controlsVisibility, ...props }: MyGroupProps) => {\n  const store = useStoreApi()\n  const [instance, setInstance] = useState<BaseGroup | null>(null)\n\n  const [listeners, attributes] = useSplitProps(props)\n\n  // 创建 Group 实例，但不立即添加到 canvas\n  useLayoutEffect(() => {\n    const newInstance = new BaseGroup([], {\n      ...attributes,\n    })\n    setInstance(newInstance)\n\n    return () => {\n      const { canvas } = store.getState()\n      if (newInstance && canvas) {\n        canvas.remove(newInstance)\n      }\n      setInstance(null)\n    }\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [store])\n\n  // 等待子元素添加完成后，再将 group 添加到 canvas\n  useEffect(() => {\n    const { canvas } = store.getState()\n    if (!instance || !canvas) return\n\n    canvas.add(instance)\n  }, [store, instance])\n\n  // 单独处理事件绑定\n  useEffect(() => {\n    if (!instance) return\n\n    const cleanup = bindEvents(instance, listeners)\n    return cleanup\n  }, [instance, listeners])\n\n  // 专门处理 setControlsVisibility\n  useEffect(() => {\n    if (!instance || !controlsVisibility) return\n    instance.setControlsVisibility(controlsVisibility)\n  }, [instance, controlsVisibility])\n\n  // 处理属性更新\n  useDidUpdate(() => {\n    const { canvas } = store.getState()\n    if (!instance || !canvas) return\n\n    instance.set(attributes)\n    instance.setCoords()\n    canvas.requestRenderAll()\n  }, [attributes])\n\n  return (\n    <>\n      {instance &&\n        Children.map(children, child => {\n          if (isValidElement(child)) {\n            return cloneElement(child, {\n              group: instance,\n            })\n          }\n          return null\n        })}\n    </>\n  )\n})\n\nexport default Group\n"],"names":["Group","memo","children","controlsVisibility","props","store","useStoreApi","instance","setInstance","useState","listeners","attributes","useSplitProps","useLayoutEffect","newInstance","BaseGroup","canvas","useEffect","bindEvents","useDidUpdate","jsx","Fragment","Children","child","isValidElement","cloneElement"],"mappings":"mTAwBMA,EAAQC,EAAAA,KAAK,CAAC,CAAE,SAAAC,EAAU,mBAAAC,EAAoB,GAAGC,CAAM,IAAoB,CAC/E,MAAMC,EAAQC,gBACR,CAACC,EAAUC,CAAW,EAAIC,EAAAA,SAA2B,IAAI,EAEzD,CAACC,EAAWC,CAAU,EAAIC,EAAAA,cAAcR,CAAK,EAGnD,OAAAS,EAAgB,gBAAA,IAAM,CACpB,MAAMC,EAAc,IAAIC,QAAU,CAAA,EAAI,CACpC,GAAGJ,CACL,CAAC,EACD,OAAAH,EAAYM,CAAW,EAEhB,IAAM,CACX,KAAM,CAAE,OAAAE,CAAO,EAAIX,EAAM,SAAS,EAC9BS,GAAeE,GACjBA,EAAO,OAAOF,CAAW,EAE3BN,EAAY,IAAI,CAClB,CAEF,EAAG,CAACH,CAAK,CAAC,EAGVY,EAAU,UAAA,IAAM,CACd,KAAM,CAAE,OAAAD,CAAO,EAAIX,EAAM,SAAS,EAC9B,CAACE,GAAY,CAACS,GAElBA,EAAO,IAAIT,CAAQ,CACrB,EAAG,CAACF,EAAOE,CAAQ,CAAC,EAGpBU,YAAU,IACHV,EAEWW,EAAAA,WAAWX,EAAUG,CAAS,EAF/B,OAId,CAACH,EAAUG,CAAS,CAAC,EAGxBO,EAAAA,UAAU,IAAM,CACV,CAACV,GAAY,CAACJ,GAClBI,EAAS,sBAAsBJ,CAAkB,CACnD,EAAG,CAACI,EAAUJ,CAAkB,CAAC,EAGjCgB,EAAAA,aAAa,IAAM,CACjB,KAAM,CAAE,OAAAH,CAAO,EAAIX,EAAM,SAAS,EAC9B,CAACE,GAAY,CAACS,IAElBT,EAAS,IAAII,CAAU,EACvBJ,EAAS,UACTS,EAAAA,EAAO,iBAAiB,EAC1B,EAAG,CAACL,CAAU,CAAC,EAGbS,EAAAA,IAAAC,EAAAA,SAAA,CACG,SAAAd,GACCe,EAAAA,SAAS,IAAIpB,EAAUqB,GACjBC,EAAAA,eAAeD,CAAK,EACfE,EAAAA,aAAaF,EAAO,CACzB,MAAOhB,CACT,CAAC,EAEI,IACR,CACL,CAAA,CAEJ,CAAC"}
+{"version":3,"file":"index.cjs","sources":["../../../../src/components/Group/index.tsx"],"sourcesContent":["import type { GroupEvents, GroupProps } from 'fabric'\nimport { Group as BaseGroup } from 'fabric'\nimport { Children, cloneElement, isValidElement, memo, useEffect, useLayoutEffect, useState } from 'react'\nimport { useDidUpdate } from '../../hooks/useDidUpdate'\nimport { useSplitProps } from '../../hooks/useSplitProps'\nimport { useStoreApi } from '../../hooks/useStore'\nimport type { AllEvents } from '../../types/canvas'\nimport { bindEvents } from '../../utils/events'\n\nexport type MyGroupProps = Partial<GroupProps & AllEvents<GroupEvents>> & {\n  children: React.ReactElement<{ group?: BaseGroup }>[] | React.ReactElement<{ group?: BaseGroup }>\n  controlsVisibility?: {\n    ml?: boolean\n    mt?: boolean\n    mr?: boolean\n    mb?: boolean\n    mtr?: boolean\n    tl?: boolean\n    tr?: boolean\n    bl?: boolean\n    br?: boolean\n  }\n}\n\nconst Group = memo(({ children, controlsVisibility, ...props }: MyGroupProps) => {\n  const store = useStoreApi()\n  const [instance, setInstance] = useState<BaseGroup | null>(null)\n\n  const [listeners, attributes] = useSplitProps(props)\n\n  // 创建 Group 实例，但不立即添加到 canvas\n  useLayoutEffect(() => {\n    const newInstance = new BaseGroup([], {\n      ...attributes,\n    })\n    setInstance(newInstance)\n\n    return () => {\n      const { canvas } = store.getState()\n      if (newInstance && canvas) {\n        canvas.remove(newInstance)\n      }\n      setInstance(null)\n    }\n  }, [store])\n\n  // 等待子元素添加完成后，再将 group 添加到 canvas\n  useEffect(() => {\n    const { canvas } = store.getState()\n    if (!instance || !canvas) return\n\n    canvas.add(instance)\n  }, [store, instance])\n\n  // 单独处理事件绑定\n  useEffect(() => {\n    if (!instance) return\n\n    const cleanup = bindEvents(instance, listeners)\n    return cleanup\n  }, [instance, listeners])\n\n  // 专门处理 setControlsVisibility\n  useEffect(() => {\n    if (!instance || !controlsVisibility) return\n    instance.setControlsVisibility(controlsVisibility)\n  }, [instance, controlsVisibility])\n\n  // 处理属性更新\n  useDidUpdate(() => {\n    const { canvas } = store.getState()\n    if (!instance || !canvas) return\n\n    instance.set(attributes)\n    instance.setCoords()\n    canvas.requestRenderAll()\n  }, [attributes])\n\n  return (\n    <>\n      {instance &&\n        Children.map(children, child => {\n          if (isValidElement(child)) {\n            return cloneElement(child, {\n              group: instance,\n            })\n          }\n          return null\n        })}\n    </>\n  )\n})\n\nexport default Group\n"],"names":["Group","memo","children","controlsVisibility","props","store","useStoreApi","instance","setInstance","useState","listeners","attributes","useSplitProps","useLayoutEffect","newInstance","BaseGroup","canvas","useEffect","bindEvents","useDidUpdate","jsx","Fragment","Children","child","isValidElement","cloneElement"],"mappings":"mTAwBMA,EAAQC,EAAAA,KAAK,CAAC,CAAE,SAAAC,EAAU,mBAAAC,EAAoB,GAAGC,CAAM,IAAoB,CAC/E,MAAMC,EAAQC,gBACR,CAACC,EAAUC,CAAW,EAAIC,EAAAA,SAA2B,IAAI,EAEzD,CAACC,EAAWC,CAAU,EAAIC,EAAAA,cAAcR,CAAK,EAGnD,OAAAS,EAAgB,gBAAA,IAAM,CACpB,MAAMC,EAAc,IAAIC,QAAU,CAAA,EAAI,CACpC,GAAGJ,CACL,CAAC,EACD,OAAAH,EAAYM,CAAW,EAEhB,IAAM,CACX,KAAM,CAAE,OAAAE,CAAO,EAAIX,EAAM,SAAS,EAC9BS,GAAeE,GACjBA,EAAO,OAAOF,CAAW,EAE3BN,EAAY,IAAI,CAClB,CACF,EAAG,CAACH,CAAK,CAAC,EAGVY,EAAU,UAAA,IAAM,CACd,KAAM,CAAE,OAAAD,CAAO,EAAIX,EAAM,SAAS,EAC9B,CAACE,GAAY,CAACS,GAElBA,EAAO,IAAIT,CAAQ,CACrB,EAAG,CAACF,EAAOE,CAAQ,CAAC,EAGpBU,YAAU,IACHV,EAEWW,EAAAA,WAAWX,EAAUG,CAAS,EAF/B,OAId,CAACH,EAAUG,CAAS,CAAC,EAGxBO,EAAAA,UAAU,IAAM,CACV,CAACV,GAAY,CAACJ,GAClBI,EAAS,sBAAsBJ,CAAkB,CACnD,EAAG,CAACI,EAAUJ,CAAkB,CAAC,EAGjCgB,EAAAA,aAAa,IAAM,CACjB,KAAM,CAAE,OAAAH,CAAO,EAAIX,EAAM,SAAS,EAC9B,CAACE,GAAY,CAACS,IAElBT,EAAS,IAAII,CAAU,EACvBJ,EAAS,UACTS,EAAAA,EAAO,iBAAiB,EAC1B,EAAG,CAACL,CAAU,CAAC,EAGbS,EAAAA,IAAAC,EAAAA,SAAA,CACG,SAAAd,GACCe,EAAAA,SAAS,IAAIpB,EAAUqB,GACjBC,EAAAA,eAAeD,CAAK,EACfE,EAAAA,aAAaF,EAAO,CACzB,MAAOhB,CACT,CAAC,EAEI,IACR,CACL,CAAA,CAEJ,CAAC"}

package/dist/cjs/components/IText/index.cjs

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var s=require("react/jsx-runtime"),t=require("fabric"),e=require("react"),p=require("../../hooks/useCreateObject.cjs"),c=require("../../hooks/useSplitProps.cjs"),h=require("../../hooks/useChildrenPosition.cjs");t.IText.prototype.set({_getNonTransformedDimensions(){return new t.Point(this.width,this.height).scalarAdd(this.padding)},_calculateCurrentDimensions(){return t.util.transformPoint(this._getTransformedDimensions(),this.getViewportTransform(),!0)}});const f=e.forwardRef(({group:n,text:u,children:r,...o},a)=>{const[l,d]=c.useSplitProps(o),i=p.useCreateObject({Constructor:t.IText,param:u,attributes:d,group:n,listeners:l}),m=h.useChildrenPosition(i);return e.useImperativeHandle(a,()=>i,[i]),r?s.jsx(s.Fragment,{children:e.isValidElement(r)?e.cloneElement(r,{...r.props,ref:m}):null}):null});var g=e.memo(f);exports.default=g;
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("fabric"),t=require("react"),p=require("../../hooks/useCreateObject.cjs"),d=require("../../hooks/useSplitProps.cjs"),l=require("../../hooks/useInstancePosition.cjs");e.IText.prototype.set({_getNonTransformedDimensions(){return new e.Point(this.width,this.height).scalarAdd(this.padding)},_calculateCurrentDimensions(){return e.util.transformPoint(this._getTransformedDimensions(),this.getViewportTransform(),!0)}});const m=t.forwardRef(({group:s,text:i,children:n,...a},o)=>{const[u,c]=d.useSplitProps(a),r=p.useCreateObject({Constructor:e.IText,param:i,attributes:c,group:s,listeners:u});return t.useImperativeHandle(o,()=>r,[r]),l.useInstancePosition(r,n)});var h=t.memo(m);exports.default=h;
 //# sourceMappingURL=index.cjs.map

package/dist/cjs/components/IText/index.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.cjs","sources":["../../../../src/components/IText/index.tsx"],"sourcesContent":["import type { Group as BaseGroup } from 'fabric'\nimport { IText, util, Point } from 'fabric'\nimport { cloneElement, forwardRef, isValidElement, memo, useImperativeHandle, type ReactNode } from 'react'\nimport { useCreateObject } from '../../hooks/useCreateObject'\nimport { useSplitProps } from '../../hooks/useSplitProps'\nimport type { AllObjectEvents } from '../../types/object'\nimport { useChildrenPosition } from '../../hooks/useChildrenPosition'\n\nexport type ITextProps<T = unknown> = Partial<ConstructorParameters<typeof IText>[1] & AllObjectEvents> & {\n  group?: BaseGroup\n  text: string\n  children?: ReactNode\n} & T\n\nIText.prototype.set({\n  _getNonTransformedDimensions() {\n    // Object dimensions\n    return new Point(this.width, this.height).scalarAdd(this.padding)\n  },\n  _calculateCurrentDimensions() {\n    // Controls dimensions\n    return util.transformPoint(this._getTransformedDimensions(), this.getViewportTransform(), true)\n  },\n})\n\nconst ITextBox = forwardRef<IText | undefined, ITextProps>(({ group, text, children, ...props }, ref) => {\n  const [listeners, attributes] = useSplitProps(props)\n\n  const instance = useCreateObject({\n    Constructor: IText,\n    param: text,\n    attributes,\n    group,\n    listeners,\n  })\n  const childrenRef = useChildrenPosition<HTMLDivElement>(instance)\n\n  useImperativeHandle(ref, () => instance, [instance])\n\n  return children ? (\n    <>\n      {isValidElement(children)\n        ? cloneElement(children, {\n            ...(children.props as any),\n            ref: childrenRef,\n          } as any)\n        : null}\n    </>\n  ) : null\n})\n\nexport default memo(ITextBox)\n"],"names":["IText","Point","util","ITextBox","forwardRef","group","text","children","props","ref","listeners","attributes","useSplitProps","instance","useCreateObject","childrenRef","useChildrenPosition","useImperativeHandle","jsx","Fragment","isValidElement","cloneElement","memo"],"mappings":"uRAcAA,EAAAA,MAAM,UAAU,IAAI,CAClB,8BAA+B,CAE7B,OAAO,IAAIC,EAAAA,MAAM,KAAK,MAAO,KAAK,MAAM,EAAE,UAAU,KAAK,OAAO,CAClE,EACA,6BAA8B,CAE5B,OAAOC,EAAAA,KAAK,eAAe,KAAK,4BAA6B,KAAK,uBAAwB,EAAI,CAChG,CACF,CAAC,EAED,MAAMC,EAAWC,aAA0C,CAAC,CAAE,MAAAC,EAAO,KAAAC,EAAM,SAAAC,EAAU,GAAGC,CAAM,EAAGC,IAAQ,CACvG,KAAM,CAACC,EAAWC,CAAU,EAAIC,gBAAcJ,CAAK,EAE7CK,EAAWC,EAAAA,gBAAgB,CAC/B,YAAad,QACb,MAAOM,EACP,WAAAK,EACA,MAAAN,EACA,UAAAK,CACF,CAAC,EACKK,EAAcC,sBAAoCH,CAAQ,EAEhE,OAAAI,sBAAoBR,EAAK,IAAMI,EAAU,CAACA,CAAQ,CAAC,EAE5CN,EACLW,MAAAC,EAAAA,SAAA,CACG,SAAAC,iBAAeb,CAAQ,EACpBc,eAAad,EAAU,CACrB,GAAIA,EAAS,MACb,IAAKQ,CACP,CAAQ,EACR,IAAA,CACN,EACE,IACN,CAAC,EAED,MAAeO,OAAKnB,CAAQ"}
+{"version":3,"file":"index.cjs","sources":["../../../../src/components/IText/index.tsx"],"sourcesContent":["import type { Group as BaseGroup } from 'fabric'\nimport { IText, util, Point } from 'fabric'\nimport { forwardRef, memo, useImperativeHandle, type ReactNode } from 'react'\nimport { useCreateObject } from '../../hooks/useCreateObject'\nimport { useSplitProps } from '../../hooks/useSplitProps'\nimport type { AllObjectEvents } from '../../types/object'\nimport { useInstancePosition } from '../../hooks/useInstancePosition'\n\nexport type ITextProps<T = unknown> = Partial<ConstructorParameters<typeof IText>[1] & AllObjectEvents> & {\n  group?: BaseGroup\n  text: string\n  children?: ReactNode\n} & T\n\nIText.prototype.set({\n  _getNonTransformedDimensions() {\n    // Object dimensions\n    return new Point(this.width, this.height).scalarAdd(this.padding)\n  },\n  _calculateCurrentDimensions() {\n    // Controls dimensions\n    return util.transformPoint(this._getTransformedDimensions(), this.getViewportTransform(), true)\n  },\n})\n\nconst ITextBox = forwardRef<IText | undefined, ITextProps>(({ group, text, children, ...props }, ref) => {\n  const [listeners, attributes] = useSplitProps(props)\n\n  const instance = useCreateObject({\n    Constructor: IText,\n    param: text,\n    attributes,\n    group,\n    listeners,\n  })\n\n  useImperativeHandle(ref, () => instance, [instance])\n\n  return useInstancePosition(instance, children)\n})\n\nexport default memo(ITextBox)\n"],"names":["IText","Point","util","ITextBox","forwardRef","group","text","children","props","ref","listeners","attributes","useSplitProps","instance","useCreateObject","useImperativeHandle","useInstancePosition","x","memo"],"mappings":"wPAcAA,EAAAA,MAAM,UAAU,IAAI,CAClB,8BAA+B,CAE7B,OAAO,IAAIC,EAAM,MAAA,KAAK,MAAO,KAAK,MAAM,EAAE,UAAU,KAAK,OAAO,CAClE,EACA,6BAA8B,CAE5B,OAAOC,EAAAA,KAAK,eAAe,KAAK,4BAA6B,KAAK,uBAAwB,EAAI,CAChG,CACF,CAAC,EAED,MAAMC,EAAWC,EAA0C,WAAA,CAAC,CAAE,MAAAC,EAAO,KAAAC,EAAM,SAAAC,EAAU,GAAGC,CAAM,EAAGC,IAAQ,CACvG,KAAM,CAACC,EAAWC,CAAU,EAAIC,gBAAcJ,CAAK,EAE7CK,EAAWC,EAAgB,gBAAA,CAC/B,YAAad,EACb,MAAA,MAAOM,EACP,WAAAK,EACA,MAAAN,EACA,UAAAK,CACF,CAAC,EAED,OAAAK,sBAAoBN,EAAK,IAAMI,EAAU,CAACA,CAAQ,CAAC,EAE5CG,EAAoBH,oBAAAA,EAAUN,CAAQ,CAC/C,CAAC,EAED,IAAAU,EAAeC,EAAAA,KAAKf,CAAQ"}

package/dist/cjs/components/Image/index.cjs

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var l=require("fabric"),e=require("react"),m=require("../../hooks/useDidUpdate.cjs"),p=require("../../hooks/useStore.cjs");const R=e.forwardRef(({group:a,src:c,onLoad:o,...t},v)=>{const r=e.useRef(),i=e.useRef(o),u=p.useStoreApi(),d=e.useRef(t);return e.useEffect(()=>{i.current=o,d.current=t}),e.useEffect(()=>{const{canvas:n}=u.getState();if(!n?.getElement())return;const f=a??n;return l.FabricImage.fromURL(c,{crossOrigin:"anonymous"}).then(s=>{r.current=s,s.set(d.current),i.current?.(s),f.add(s)}),()=>{r.current&&f?.remove(r.current)}},[c,u,a]),m.useDidUpdate(()=>{const{canvas:n}=u.getState();r.current&&(r.current.set(t),r.current.setCoords(),n?.requestRenderAll())},[t,u]),e.useImperativeHandle(v,()=>({instance:r.current??void 0})),null});var g=e.memo(R);exports.default=g;
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var l=require("fabric"),e=require("react"),g=require("../../hooks/useStore.cjs"),p=require("../../hooks/useInstancePosition.cjs");const R=e.forwardRef(({group:u,src:n,onLoad:c,children:m,...s},v)=>{const r=e.useRef(),o=e.useRef(c),a=g.useStoreApi(),i=e.useRef(s);return e.useEffect(()=>{o.current=c,i.current=s}),e.useEffect(()=>{const{canvas:f}=a.getState();if(!f?.getElement())return;const d=u??f;return l.FabricImage.fromURL(n,{crossOrigin:"anonymous"}).then(t=>{r.current=t,t.set(i.current),o.current?.(t),d.add(t)}),()=>{r.current&&d?.remove(r.current)}},[n,a,u]),e.useImperativeHandle(v,()=>r.current),p.useInstancePosition(r.current,m)});var q=e.memo(R);exports.default=q;
 //# sourceMappingURL=index.cjs.map

package/dist/cjs/components/Image/index.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.cjs","sources":["../../../../src/components/Image/index.tsx"],"sourcesContent":["import type { ImageProps as FabricImageProps, ObjectEvents, SerializedImageProps } from 'fabric'\nimport { FabricImage } from 'fabric'\nimport type { Group as BaseGroup } from 'fabric'\nimport { forwardRef, memo, useEffect, useImperativeHandle, useRef } from 'react'\nimport { useDidUpdate } from '../../hooks/useDidUpdate'\nimport { useStoreApi } from '../../hooks/useStore'\n\nexport type Handle = {\n  instance: FabricImage | undefined\n}\n\nexport type ImageProps = Partial<FabricImageProps> & {\n  src: string\n  group?: BaseGroup\n  onLoad?: (imageSource: FabricImage<Partial<ImageProps>, SerializedImageProps, ObjectEvents>) => void\n}\n\nconst Image = forwardRef<Handle, ImageProps>(({ group, src, onLoad, ...options }, ref) => {\n  const instanceRef = useRef<FabricImage>()\n  const onLoadRef = useRef(onLoad)\n  const store = useStoreApi()\n  const optionsRef = useRef(options)\n\n  // 更新 onLoadRef\n  useEffect(() => {\n    onLoadRef.current = onLoad\n    optionsRef.current = options\n  })\n\n  // 只在 src 改变时初始化 image\n  useEffect(() => {\n    const { canvas } = store.getState()\n    if (!canvas?.getElement()) return\n\n    const parent = group ?? canvas\n\n    FabricImage.fromURL(src, { crossOrigin: 'anonymous' }).then(imageSource => {\n      instanceRef.current = imageSource\n      imageSource.set(optionsRef.current)\n      onLoadRef.current?.(imageSource)\n      parent.add(imageSource)\n    })\n\n    return () => {\n      if (instanceRef.current) {\n        parent?.remove(instanceRef.current)\n      }\n    }\n  }, [src, store, group]) // 只包含初始化需要的依赖\n\n  // 只在 options 更新时执行\n  useDidUpdate(() => {\n    const { canvas } = store.getState()\n\n    if (instanceRef.current) {\n      instanceRef.current.set(options)\n      instanceRef.current.setCoords()\n      canvas?.requestRenderAll()\n    }\n  }, [options, store])\n\n  useImperativeHandle(ref, () => ({\n    instance: instanceRef.current ?? undefined,\n  }))\n\n  return null\n})\n\nexport default memo(Image)\n"],"names":["Image","forwardRef","group","src","onLoad","options","ref","instanceRef","useRef","onLoadRef","store","useStoreApi","optionsRef","useEffect","canvas","parent","FabricImage","imageSource","useDidUpdate","useImperativeHandle","memo"],"mappings":"+LAiBA,MAAMA,EAAQC,EAAAA,WAA+B,CAAC,CAAE,MAAAC,EAAO,IAAAC,EAAK,OAAAC,EAAQ,GAAGC,CAAQ,EAAGC,IAAQ,CACxF,MAAMC,EAAcC,WACdC,EAAYD,EAAAA,OAAOJ,CAAM,EACzBM,EAAQC,EAAAA,YAAAA,EACRC,EAAaJ,EAAAA,OAAOH,CAAO,EAGjC,OAAAQ,EAAAA,UAAU,IAAM,CACdJ,EAAU,QAAUL,EACpBQ,EAAW,QAAUP,CACvB,CAAC,EAGDQ,EAAAA,UAAU,IAAM,CACd,KAAM,CAAE,OAAAC,CAAO,EAAIJ,EAAM,WACzB,GAAI,CAACI,GAAQ,aAAc,OAE3B,MAAMC,EAASb,GAASY,EAExB,OAAAE,EAAAA,YAAY,QAAQb,EAAK,CAAE,YAAa,WAAY,CAAC,EAAE,KAAKc,GAAe,CACzEV,EAAY,QAAUU,EACtBA,EAAY,IAAIL,EAAW,OAAO,EAClCH,EAAU,UAAUQ,CAAW,EAC/BF,EAAO,IAAIE,CAAW,CACxB,CAAC,EAEM,IAAM,CACPV,EAAY,SACdQ,GAAQ,OAAOR,EAAY,OAAO,CAEtC,CACF,EAAG,CAACJ,EAAKO,EAAOR,CAAK,CAAC,EAGtBgB,EAAa,aAAA,IAAM,CACjB,KAAM,CAAE,OAAAJ,CAAO,EAAIJ,EAAM,WAErBH,EAAY,UACdA,EAAY,QAAQ,IAAIF,CAAO,EAC/BE,EAAY,QAAQ,UAAU,EAC9BO,GAAQ,iBAAiB,EAE7B,EAAG,CAACT,EAASK,CAAK,CAAC,EAEnBS,EAAoBb,oBAAAA,EAAK,KAAO,CAC9B,SAAUC,EAAY,SAAW,MACnC,EAAE,EAEK,IACT,CAAC,EAED,IAAea,EAAAA,EAAAA,KAAKpB,CAAK"}
+{"version":3,"file":"index.cjs","sources":["../../../../src/components/Image/index.tsx"],"sourcesContent":["import type { ImageProps as FabricImageProps, ObjectEvents, SerializedImageProps } from 'fabric'\nimport { FabricImage } from 'fabric'\nimport type { Group as BaseGroup } from 'fabric'\nimport { forwardRef, memo, useEffect, useImperativeHandle, useRef, type ReactNode } from 'react'\nimport { useStoreApi } from '../../hooks/useStore'\nimport { useInstancePosition } from '../../hooks/useInstancePosition'\n\nexport type ImageProps = Partial<FabricImageProps> & {\n  src: string\n  group?: BaseGroup\n  onLoad?: (imageSource: FabricImage<Partial<ImageProps>, SerializedImageProps, ObjectEvents>) => void\n  children?: ReactNode\n}\n\nconst Image = forwardRef<FabricImage | undefined, ImageProps>(({ group, src, onLoad, children, ...options }, ref) => {\n  const instanceRef = useRef<FabricImage>()\n  const onLoadRef = useRef(onLoad)\n  const store = useStoreApi()\n  const optionsRef = useRef(options)\n\n  // 更新 onLoadRef\n  useEffect(() => {\n    onLoadRef.current = onLoad\n    optionsRef.current = options\n  })\n\n  // 只在 src 改变时初始化 image\n  useEffect(() => {\n    const { canvas } = store.getState()\n    if (!canvas?.getElement()) return\n\n    const parent = group ?? canvas\n\n    FabricImage.fromURL(src, { crossOrigin: 'anonymous' }).then(imageSource => {\n      instanceRef.current = imageSource\n      imageSource.set(optionsRef.current)\n      onLoadRef.current?.(imageSource)\n      parent.add(imageSource)\n    })\n\n    return () => {\n      if (instanceRef.current) {\n        parent?.remove(instanceRef.current)\n      }\n    }\n  }, [src, store, group]) // 只包含初始化需要的依赖\n\n  useImperativeHandle(ref, () => instanceRef.current)\n\n  return useInstancePosition(instanceRef.current, children)\n})\n\nexport default memo(Image)\n"],"names":["Image","forwardRef","group","src","onLoad","children","options","ref","instanceRef","useRef","onLoadRef","store","useStoreApi","optionsRef","useEffect","canvas","parent","FabricImage","imageSource","useImperativeHandle","useInstancePosition","memo"],"mappings":"sMAcA,MAAMA,EAAQC,EAAAA,WAAgD,CAAC,CAAE,MAAAC,EAAO,IAAAC,EAAK,OAAAC,EAAQ,SAAAC,EAAU,GAAGC,CAAQ,EAAGC,IAAQ,CACnH,MAAMC,EAAcC,EAAAA,OAAoB,EAClCC,EAAYD,SAAOL,CAAM,EACzBO,EAAQC,EAAY,YAAA,EACpBC,EAAaJ,EAAAA,OAAOH,CAAO,EAGjC,OAAAQ,EAAAA,UAAU,IAAM,CACdJ,EAAU,QAAUN,EACpBS,EAAW,QAAUP,CACvB,CAAC,EAGDQ,EAAAA,UAAU,IAAM,CACd,KAAM,CAAE,OAAAC,CAAO,EAAIJ,EAAM,SAAS,EAClC,GAAI,CAACI,GAAQ,WAAW,EAAG,OAE3B,MAAMC,EAASd,GAASa,EAExB,OAAAE,cAAY,QAAQd,EAAK,CAAE,YAAa,WAAY,CAAC,EAAE,KAAKe,GAAe,CACzEV,EAAY,QAAUU,EACtBA,EAAY,IAAIL,EAAW,OAAO,EAClCH,EAAU,UAAUQ,CAAW,EAC/BF,EAAO,IAAIE,CAAW,CACxB,CAAC,EAEM,IAAM,CACPV,EAAY,SACdQ,GAAQ,OAAOR,EAAY,OAAO,CAEtC,CACF,EAAG,CAACL,EAAKQ,EAAOT,CAAK,CAAC,EAEtBiB,sBAAoBZ,EAAK,IAAMC,EAAY,OAAO,EAE3CY,EAAAA,oBAAoBZ,EAAY,QAASH,CAAQ,CAC1D,CAAC,EAED,IAAegB,EAAAA,EAAAA,KAAKrB,CAAK"}

package/dist/cjs/components/Line/index.cjs

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var u=require("react/jsx-runtime"),m=require("fabric"),e=require("react"),f=require("../../hooks/useCreateObject.cjs"),q=require("../../hooks/useSplitProps.cjs"),b=require("../../hooks/useChildrenPosition.cjs");const j=e.forwardRef(({group:i,x1:s,y1:n,x2:a,y2:l,children:r,...o},c)=>{const[p,d]=q.useSplitProps(o),t=f.useCreateObject({Constructor:m.Line,param:[s,n,a,l],attributes:d,group:i,listeners:p}),v=b.useChildrenPosition(t);return e.useImperativeHandle(c,()=>t,[t]),r?u.jsx(u.Fragment,{children:e.isValidElement(r)?e.cloneElement(r,{...r.props,ref:v}):null}):null});var C=e.memo(j);exports.default=C;
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var v=require("fabric"),r=require("react"),d=require("../../hooks/useCreateObject.cjs"),P=require("../../hooks/useSplitProps.cjs"),b=require("../../hooks/useInstancePosition.cjs");const f=r.forwardRef(({group:t,x1:u,y1:s,x2:a,y2:i,children:o,...n},c)=>{const[p,l]=P.useSplitProps(n),e=d.useCreateObject({Constructor:v.Line,param:[u,s,a,i],attributes:l,group:t,listeners:p});return r.useImperativeHandle(c,()=>e,[e]),b.useInstancePosition(e,o)});var m=r.memo(f);exports.default=m;
 //# sourceMappingURL=index.cjs.map

package/dist/cjs/components/Line/index.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.cjs","sources":["../../../../src/components/Line/index.tsx"],"sourcesContent":["import type { Group as BaseGroup } from 'fabric'\nimport { Line as BaseLine } from 'fabric'\nimport { cloneElement, forwardRef, isValidElement, memo, useImperativeHandle, type ReactNode } from 'react'\nimport { useCreateObject } from '../../hooks/useCreateObject'\nimport { useSplitProps } from '../../hooks/useSplitProps'\nimport type { AllObjectEvents } from '../../types/object'\nimport { useChildrenPosition } from '../../hooks/useChildrenPosition'\n\nexport type Handle = BaseLine | undefined\n\nexport type LineProps<T = unknown> = Partial<ConstructorParameters<typeof BaseLine>[1] & AllObjectEvents> & {\n  group?: BaseGroup\n  path?: string\n  children?: ReactNode\n\n} & T\n\nconst Line = forwardRef<Handle, LineProps>(({ group, x1, y1, x2, y2, children, ...props }, ref) => {\n  const [listeners, attributes] = useSplitProps(props)\n\n  const instance = useCreateObject({\n    Constructor: BaseLine,\n    param: [x1, y1, x2, y2],\n    attributes,\n    group,\n    listeners,\n  })\n  const childrenRef = useChildrenPosition<HTMLDivElement>(instance)\n\n  useImperativeHandle(ref, () => instance, [instance])\n\n  return children ? (\n    <>\n      {isValidElement(children)\n        ? cloneElement(children, {\n          ...(children.props as any),\n          ref: childrenRef,\n        } as any)\n        : null}\n    </>\n  ) : null\n})\n\nexport default memo(Line)\n"],"names":["Line","forwardRef","group","x1","y1","x2","y2","children","props","ref","listeners","attributes","useSplitProps","instance","useCreateObject","BaseLine","childrenRef","useChildrenPosition","useImperativeHandle","jsx","Fragment","isValidElement","cloneElement","c","memo"],"mappings":"uRAiBA,MAAMA,EAAOC,EAA8B,WAAA,CAAC,CAAE,MAAAC,EAAO,GAAAC,EAAI,GAAAC,EAAI,GAAAC,EAAI,GAAAC,EAAI,SAAAC,EAAU,GAAGC,CAAM,EAAGC,IAAQ,CACjG,KAAM,CAACC,EAAWC,CAAU,EAAIC,EAAAA,cAAcJ,CAAK,EAE7CK,EAAWC,kBAAgB,CAC/B,YAAaC,EAAAA,KACb,MAAO,CAACZ,EAAIC,EAAIC,EAAIC,CAAE,EACtB,WAAAK,EACA,MAAAT,EACA,UAAAQ,CACF,CAAC,EACKM,EAAcC,EAAoCJ,oBAAAA,CAAQ,EAEhE,OAAAK,EAAAA,oBAAoBT,EAAK,IAAMI,EAAU,CAACA,CAAQ,CAAC,EAE5CN,EACLY,EAAAA,IAAAC,EAAAA,SAAA,CACG,SAAAC,EAAAA,eAAed,CAAQ,EACpBe,EAAAA,aAAaf,EAAU,CACvB,GAAIA,EAAS,MACb,IAAKS,CACP,CAAQ,EACN,IAAA,CACN,EACE,IACN,CAAC,EAED,IAAAO,EAAeC,EAAAA,KAAKxB,CAAI"}
+{"version":3,"file":"index.cjs","sources":["../../../../src/components/Line/index.tsx"],"sourcesContent":["import type { Group as BaseGroup } from 'fabric'\nimport { Line as BaseLine } from 'fabric'\nimport { forwardRef, memo, useImperativeHandle, type ReactNode } from 'react'\nimport { useCreateObject } from '../../hooks/useCreateObject'\nimport { useSplitProps } from '../../hooks/useSplitProps'\nimport type { AllObjectEvents } from '../../types/object'\nimport { useInstancePosition } from '../../hooks/useInstancePosition'\n\nexport type Handle = BaseLine | undefined\n\nexport type LineProps<T = unknown> = Partial<ConstructorParameters<typeof BaseLine>[1] & AllObjectEvents> & {\n  group?: BaseGroup\n  path?: string\n  children?: ReactNode\n} & T\n\nconst Line = forwardRef<Handle, LineProps>(({ group, x1, y1, x2, y2, children, ...props }, ref) => {\n  const [listeners, attributes] = useSplitProps(props)\n\n  const instance = useCreateObject({\n    Constructor: BaseLine,\n    param: [x1, y1, x2, y2],\n    attributes,\n    group,\n    listeners,\n  })\n\n  useImperativeHandle(ref, () => instance, [instance])\n\n  return useInstancePosition(instance, children)\n})\n\nexport default memo(Line)\n"],"names":["Line","forwardRef","group","x1","y1","x2","y2","children","props","ref","listeners","attributes","useSplitProps","instance","useCreateObject","BaseLine","useImperativeHandle","useInstancePosition","memo"],"mappings":"wPAgBA,MAAMA,EAAOC,EAAAA,WAA8B,CAAC,CAAE,MAAAC,EAAO,GAAAC,EAAI,GAAAC,EAAI,GAAAC,EAAI,GAAAC,EAAI,SAAAC,EAAU,GAAGC,CAAM,EAAGC,IAAQ,CACjG,KAAM,CAACC,EAAWC,CAAU,EAAIC,EAAAA,cAAcJ,CAAK,EAE7CK,EAAWC,EAAgB,gBAAA,CAC/B,YAAaC,EACb,KAAA,MAAO,CAACZ,EAAIC,EAAIC,EAAIC,CAAE,EACtB,WAAAK,EACA,MAAAT,EACA,UAAAQ,CACF,CAAC,EAED,OAAAM,EAAAA,oBAAoBP,EAAK,IAAMI,EAAU,CAACA,CAAQ,CAAC,EAE5CI,sBAAoBJ,EAAUN,CAAQ,CAC/C,CAAC,EAED,IAAeW,EAAAA,EAAAA,KAAKlB,CAAI"}

package/dist/cjs/components/Loading/index.cjs

@@ -1,2 +1,11 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),i=require("../../hooks/useStore.cjs");const o=()=>i.useStore(t=>t.loading)?e.jsxs("div",{style:{position:"absolute",bottom:0,left:0,right:0,top:0,zIndex:40,display:"flex",flexDirection:"column",alignItems:"center",justifyContent:"center",overflow:"hidden"},children:[e.jsx("div",{style:{position:"absolute",bottom:0,left:0,right:0,top:0}}),e.jsxs("span",{role:"img","aria-label":"loading",className:"anticon anticon-loading anticon-spin",style:{fontSize:48,color:"#04AA65"},children:[e.jsx("svg",{viewBox:"0 0 1024 1024",focusable:"false","data-icon":"loading",width:"1em",height:"1em",fill:"currentColor","aria-hidden":"true",children:e.jsx("path",{d:"M988 548c-19.9 0-36-16.1-36-36 0-59.4-11.6-117-34.6-171.3a440.45 440.45 0 00-94.3-139.9 437.71 437.71 0 00-139.9-94.3C629 83.6 571.4 72 512 72c-19.9 0-36-16.1-36-36s16.1-36 36-36c69.1 0 136.2 13.5 199.3 40.3C772.3 66 827 103 874 150c47 47 83.9 101.8 109.7 162.7 26.7 63.1 40.2 130.2 40.2 199.3.1 19.9-16 36-35.9 36z"})}),e.jsx("svg",{viewBox:"0 0 1024 1024",focusable:"false","data-icon":"loading",width:"1em",height:"1em",fill:"currentColor","aria-hidden":"true",children:e.jsx("path",{d:"M988 548c-19.9 0-36-16.1-36-36 0-59.4-11.6-117-34.6-171.3a440.45 440.45 0 00-94.3-139.9 437.71 437.71 0 00-139.9-94.3C629 83.6 571.4 72 512 72c-19.9 0-36-16.1-36-36s16.1-36 36-36c69.1 0 136.2 13.5 199.3 40.3C772.3 66 827 103 874 150c47 47 83.9 101.8 109.7 162.7 26.7 63.1 40.2 130.2 40.2 199.3.1 19.9-16 36-35.9 36z"})})]})]}):null;exports.default=o;
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),r=require("../../hooks/useStore.cjs");const o=()=>r.useStore(t=>t.loading)?e.jsxs("div",{style:{position:"absolute",bottom:0,left:0,right:0,top:0,zIndex:40,display:"flex",flexDirection:"column",alignItems:"center",justifyContent:"center",overflow:"hidden"},children:[e.jsx("span",{style:{width:"48px",height:"48px",border:"5px solid #04aa65",borderBottomColor:"transparent",borderRadius:"50%",display:"inline-block",boxSizing:"border-box",animation:"rotation 1s linear infinite"}}),e.jsx("style",{children:`
+          @keyframes rotation {
+            0% {
+              transform: rotate(0deg);
+            }
+            100% {
+              transform: rotate(360deg);
+            }
+          }
+        `})]}):null;exports.default=o;
 //# sourceMappingURL=index.cjs.map

package/dist/cjs/components/Loading/index.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.cjs","sources":["../../../../src/components/Loading/index.tsx"],"sourcesContent":["import { useStore } from '../../hooks/useStore'\n\n// bg-[hsla(221,14%,4%,0.6)\nconst Loading = () => {\n  const loading = useStore(state => state.loading)\n\n  return loading ? (\n    <div\n      style={{\n        position: 'absolute',\n        bottom: 0,\n        left: 0,\n        right: 0,\n        top: 0,\n        zIndex: 40,\n        display: 'flex',\n        flexDirection: 'column',\n        alignItems: 'center',\n        justifyContent: 'center',\n        overflow: 'hidden',\n      }}\n    >\n      <div\n        style={{\n          position: 'absolute',\n          bottom: 0,\n          left: 0,\n          right: 0,\n          top: 0,\n        }}\n      ></div>\n      <span\n        role=\"img\"\n        aria-label=\"loading\"\n        className=\"anticon anticon-loading anticon-spin\"\n        style={{\n          fontSize: 48,\n          color: '#04AA65',\n        }}\n      >\n        <svg\n          viewBox=\"0 0 1024 1024\"\n          focusable=\"false\"\n          data-icon=\"loading\"\n          width=\"1em\"\n          height=\"1em\"\n          fill=\"currentColor\"\n          aria-hidden=\"true\"\n        >\n          <path d=\"M988 548c-19.9 0-36-16.1-36-36 0-59.4-11.6-117-34.6-171.3a440.45 440.45 0 00-94.3-139.9 437.71 437.71 0 00-139.9-94.3C629 83.6 571.4 72 512 72c-19.9 0-36-16.1-36-36s16.1-36 36-36c69.1 0 136.2 13.5 199.3 40.3C772.3 66 827 103 874 150c47 47 83.9 101.8 109.7 162.7 26.7 63.1 40.2 130.2 40.2 199.3.1 19.9-16 36-35.9 36z\"></path>\n        </svg>\n        <svg\n          viewBox=\"0 0 1024 1024\"\n          focusable=\"false\"\n          data-icon=\"loading\"\n          width=\"1em\"\n          height=\"1em\"\n          fill=\"currentColor\"\n          aria-hidden=\"true\"\n        >\n          <path d=\"M988 548c-19.9 0-36-16.1-36-36 0-59.4-11.6-117-34.6-171.3a440.45 440.45 0 00-94.3-139.9 437.71 437.71 0 00-139.9-94.3C629 83.6 571.4 72 512 72c-19.9 0-36-16.1-36-36s16.1-36 36-36c69.1 0 136.2 13.5 199.3 40.3C772.3 66 827 103 874 150c47 47 83.9 101.8 109.7 162.7 26.7 63.1 40.2 130.2 40.2 199.3.1 19.9-16 36-35.9 36z\"></path>\n        </svg>\n      </span>\n    </div>\n  ) : null\n}\n\nexport default Loading\n"],"names":["Loading","useStore","state","jsxs","jsx"],"mappings":"6IAGMA,MAAAA,EAAU,IACEC,EAAAA,SAASC,GAASA,EAAM,OAAO,EAG7CC,OAAC,MAAA,CACC,MAAO,CACL,SAAU,WACV,OAAQ,EACR,KAAM,EACN,MAAO,EACP,IAAK,EACL,OAAQ,GACR,QAAS,OACT,cAAe,SACf,WAAY,SACZ,eAAgB,SAChB,SAAU,QACZ,EAEA,SAAA,CAAAC,EAAAA,IAAC,MAAA,CACC,MAAO,CACL,SAAU,WACV,OAAQ,EACR,KAAM,EACN,MAAO,EACP,IAAK,CACP,CACD,CAAA,EACDD,EAAC,KAAA,OAAA,CACC,KAAK,MACL,aAAW,UACX,UAAU,uCACV,MAAO,CACL,SAAU,GACV,MAAO,SACT,EAEA,SAAA,CAAAC,EAAC,IAAA,MAAA,CACC,QAAQ,gBACR,UAAU,QACV,YAAU,UACV,MAAM,MACN,OAAO,MACP,KAAK,eACL,cAAY,OAEZ,SAAAA,EAAAA,IAAC,OAAK,CAAA,EAAE,6TAA8T,CAAA,CAAA,CACxU,EACAA,EAAAA,IAAC,MACC,CAAA,QAAQ,gBACR,UAAU,QACV,YAAU,UACV,MAAM,MACN,OAAO,MACP,KAAK,eACL,cAAY,OAEZ,SAAAA,EAAAA,IAAC,OAAA,CAAK,EAAE,6TAAA,CAA8T,CACxU,CAAA,CAAA,CAAA,CACF,CACF,CAAA,CAAA,EACE"}
+{"version":3,"file":"index.cjs","sources":["../../../../src/components/Loading/index.tsx"],"sourcesContent":["import { useStore } from '../../hooks/useStore'\n\n// bg-[hsla(221,14%,4%,0.6)\nconst Loading = () => {\n  const loading = useStore(state => state.loading)\n\n  return loading ? (\n    <div\n      style={{\n        position: 'absolute',\n        bottom: 0,\n        left: 0,\n        right: 0,\n        top: 0,\n        zIndex: 40,\n        display: 'flex',\n        flexDirection: 'column',\n        alignItems: 'center',\n        justifyContent: 'center',\n        overflow: 'hidden',\n      }}\n    >\n      <span\n        style={{\n          width: '48px',\n          height: '48px',\n          border: '5px solid #04aa65',\n          borderBottomColor: 'transparent',\n          borderRadius: '50%',\n          display: 'inline-block',\n          boxSizing: 'border-box',\n          animation: 'rotation 1s linear infinite',\n        }}\n      ></span>\n      <style>\n        {`\n          @keyframes rotation {\n            0% {\n              transform: rotate(0deg);\n            }\n            100% {\n              transform: rotate(360deg);\n            }\n          }\n        `}\n      </style>\n    </div>\n  ) : null\n}\n\nexport default Loading\n"],"names":["Loading","useStore","state","jsxs","jsx"],"mappings":"6IAGMA,MAAAA,EAAU,IACEC,EAAAA,SAASC,GAASA,EAAM,OAAO,EAG7CC,EAAAA,KAAC,MACC,CAAA,MAAO,CACL,SAAU,WACV,OAAQ,EACR,KAAM,EACN,MAAO,EACP,IAAK,EACL,OAAQ,GACR,QAAS,OACT,cAAe,SACf,WAAY,SACZ,eAAgB,SAChB,SAAU,QACZ,EAEA,SAAA,CAAAC,EAAAA,IAAC,OAAA,CACC,MAAO,CACL,MAAO,OACP,OAAQ,OACR,OAAQ,oBACR,kBAAmB,cACnB,aAAc,MACd,QAAS,eACT,UAAW,aACX,UAAW,6BACb,CACD,CAAA,EACDA,MAAC,QACE,CAAA,SAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,SAUH,CAAA,CAAA,CAAA,CACF,EACE"}

package/dist/cjs/components/Path/index.cjs

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var u=require("react/jsx-runtime"),c=require("fabric"),e=require("react"),d=require("../../hooks/useCreateObject.cjs"),m=require("../../hooks/useSplitProps.cjs"),v=require("../../hooks/useChildrenPosition.cjs");const b=e.forwardRef(({group:i,path:s="M 0 0",children:r,...a},n)=>{const[l,o]=m.useSplitProps(a),t=d.useCreateObject({Constructor:c.Path,param:s,attributes:o,group:i,listeners:l}),p=v.useChildrenPosition(t);return e.useImperativeHandle(n,()=>t,[t]),r?u.jsx(u.Fragment,{children:e.isValidElement(r)?e.cloneElement(r,{...r.props,ref:p}):null}):null});var f=e.memo(b);exports.default=f;
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var c=require("fabric"),r=require("react"),p=require("../../hooks/useCreateObject.cjs"),l=require("../../hooks/useSplitProps.cjs"),v=require("../../hooks/useInstancePosition.cjs");const d=r.forwardRef(({group:t,path:s="M 0 0",children:u,...a},i)=>{const[o,n]=l.useSplitProps(a),e=p.useCreateObject({Constructor:c.Path,param:s,attributes:n,group:t,listeners:o});return r.useImperativeHandle(i,()=>e,[e]),v.useInstancePosition(e,u)});var P=r.memo(d);exports.default=P;
 //# sourceMappingURL=index.cjs.map

package/dist/cjs/components/Path/index.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.cjs","sources":["../../../../src/components/Path/index.tsx"],"sourcesContent":["import type { Group as BaseGroup } from 'fabric'\nimport { Path as BasePath } from 'fabric'\nimport { cloneElement, forwardRef, isValidElement, memo, useImperativeHandle, type ReactNode } from 'react'\nimport { useCreateObject } from '../../hooks/useCreateObject'\nimport { useSplitProps } from '../../hooks/useSplitProps'\nimport type { AllObjectEvents } from '../../types/object'\nimport { useChildrenPosition } from '../../hooks/useChildrenPosition'\n\nexport type Handle = BasePath | undefined\n\nexport type PathProps<T = unknown> = Partial<ConstructorParameters<typeof BasePath>[1] & AllObjectEvents> & {\n  group?: BaseGroup\n  path?: string\n  children?: ReactNode\n\n} & T\n\nconst Path = forwardRef<Handle, PathProps>(({ group, path = 'M 0 0', children, ...props }, ref) => {\n  const [listeners, attributes] = useSplitProps(props)\n\n  const instance = useCreateObject({\n    Constructor: BasePath,\n    param: path,\n    attributes,\n    group,\n    listeners,\n  })\n  const childrenRef = useChildrenPosition<HTMLDivElement>(instance)\n\n  useImperativeHandle(ref, () => instance, [instance])\n\n  return children ? (\n    <>\n      {isValidElement(children)\n        ? cloneElement(children, {\n          ...(children.props as any),\n          ref: childrenRef,\n        } as any)\n        : null}\n    </>\n  ) : null\n})\n\nexport default memo(Path)\n"],"names":["Path","forwardRef","group","path","children","props","ref","listeners","attributes","useSplitProps","instance","useCreateObject","BasePath","childrenRef","useChildrenPosition","useImperativeHandle","jsx","Fragment","isValidElement","cloneElement","s","memo"],"mappings":"uRAiBA,MAAMA,EAAOC,EAA8B,WAAA,CAAC,CAAE,MAAAC,EAAO,KAAAC,EAAO,QAAS,SAAAC,EAAU,GAAGC,CAAM,EAAGC,IAAQ,CACjG,KAAM,CAACC,EAAWC,CAAU,EAAIC,EAAAA,cAAcJ,CAAK,EAE7CK,EAAWC,EAAgB,gBAAA,CAC/B,YAAaC,EAAAA,KACb,MAAOT,EACP,WAAAK,EACA,MAAAN,EACA,UAAAK,CACF,CAAC,EACKM,EAAcC,EAAAA,oBAAoCJ,CAAQ,EAEhE,OAAAK,EAAoBT,oBAAAA,EAAK,IAAMI,EAAU,CAACA,CAAQ,CAAC,EAE5CN,EACLY,EAAAC,IAAAA,EAAAA,SAAA,CACG,SAAAC,iBAAed,CAAQ,EACpBe,EAAAA,aAAaf,EAAU,CACvB,GAAIA,EAAS,MACb,IAAKS,CACP,CAAQ,EACN,IAAA,CACN,EACE,IACN,CAAC,EAED,IAAAO,EAAeC,EAAAA,KAAKrB,CAAI"}
+{"version":3,"file":"index.cjs","sources":["../../../../src/components/Path/index.tsx"],"sourcesContent":["import type { Group as BaseGroup } from 'fabric'\nimport { Path as BasePath } from 'fabric'\nimport { forwardRef, memo, useImperativeHandle, type ReactNode } from 'react'\nimport { useCreateObject } from '../../hooks/useCreateObject'\nimport { useSplitProps } from '../../hooks/useSplitProps'\nimport type { AllObjectEvents } from '../../types/object'\nimport { useInstancePosition } from '../../hooks/useInstancePosition'\n\nexport type Handle = BasePath | undefined\n\nexport type PathProps<T = unknown> = Partial<ConstructorParameters<typeof BasePath>[1] & AllObjectEvents> & {\n  group?: BaseGroup\n  path?: string\n  children?: ReactNode\n} & T\n\nconst Path = forwardRef<Handle, PathProps>(({ group, path = 'M 0 0', children, ...props }, ref) => {\n  const [listeners, attributes] = useSplitProps(props)\n\n  const instance = useCreateObject({\n    Constructor: BasePath,\n    param: path,\n    attributes,\n    group,\n    listeners,\n  })\n\n  useImperativeHandle(ref, () => instance, [instance])\n\n  return useInstancePosition(instance, children)\n})\n\nexport default memo(Path)\n"],"names":["Path","forwardRef","group","path","children","props","ref","listeners","attributes","useSplitProps","instance","useCreateObject","BasePath","useImperativeHandle","useInstancePosition","memo"],"mappings":"wPAgBA,MAAMA,EAAOC,EAAAA,WAA8B,CAAC,CAAE,MAAAC,EAAO,KAAAC,EAAO,QAAS,SAAAC,EAAU,GAAGC,CAAM,EAAGC,IAAQ,CACjG,KAAM,CAACC,EAAWC,CAAU,EAAIC,gBAAcJ,CAAK,EAE7CK,EAAWC,EAAAA,gBAAgB,CAC/B,YAAaC,OACb,MAAOT,EACP,WAAAK,EACA,MAAAN,EACA,UAAAK,CACF,CAAC,EAED,OAAAM,sBAAoBP,EAAK,IAAMI,EAAU,CAACA,CAAQ,CAAC,EAE5CI,sBAAoBJ,EAAUN,CAAQ,CAC/C,CAAC,EAED,MAAeW,OAAKf,CAAI"}

package/dist/cjs/components/Polyline/index.cjs

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var i=require("react/jsx-runtime"),c=require("fabric"),e=require("react"),d=require("../../hooks/useCreateObject.cjs"),v=require("../../hooks/useSplitProps.cjs"),m=require("../../hooks/useChildrenPosition.cjs");const f=e.forwardRef(({group:u,points:s,children:r,...n},l)=>{const[a,o]=v.useSplitProps(n),t=d.useCreateObject({Constructor:c.Polyline,param:s,attributes:o,group:u,listeners:a}),p=m.useChildrenPosition(t);return e.useImperativeHandle(l,()=>t,[t]),r?i.jsx(i.Fragment,{children:e.isValidElement(r)?e.cloneElement(r,{...r.props,ref:p}):null}):null});var q=e.memo(f);exports.default=q;
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var c=require("fabric"),r=require("react"),p=require("../../hooks/useCreateObject.cjs"),l=require("../../hooks/useSplitProps.cjs"),v=require("../../hooks/useInstancePosition.cjs");const d=r.forwardRef(({group:t,points:s,children:u,...i},a)=>{const[o,n]=l.useSplitProps(i),e=p.useCreateObject({Constructor:c.Polyline,param:s,attributes:n,group:t,listeners:o});return r.useImperativeHandle(a,()=>e,[e]),v.useInstancePosition(e,u)});var P=r.memo(d);exports.default=P;
 //# sourceMappingURL=index.cjs.map

package/dist/cjs/components/Polyline/index.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.cjs","sources":["../../../../src/components/Polyline/index.tsx"],"sourcesContent":["import type { Group as BaseGroup } from 'fabric'\nimport { Polyline as BasePolyline } from 'fabric'\nimport { cloneElement, forwardRef, isValidElement, memo, useImperativeHandle, type ReactNode } from 'react'\nimport { useCreateObject } from '../../hooks/useCreateObject'\nimport { useSplitProps } from '../../hooks/useSplitProps'\nimport type { AllObjectEvents } from '../../types/object'\nimport { useChildrenPosition } from '../../hooks/useChildrenPosition'\n\nexport type PolylineProps<T = unknown> = Partial<ConstructorParameters<typeof BasePolyline>[1] & AllObjectEvents> & {\n  group?: BaseGroup\n  path?: string\n  children?: ReactNode\n} & T\n\nconst Polyline = forwardRef<BasePolyline | undefined, PolylineProps>(({ group, points, children, ...props }, ref) => {\n  const [listeners, attributes] = useSplitProps(props)\n\n  const instance = useCreateObject({\n    Constructor: BasePolyline,\n    param: points,\n    attributes,\n    group,\n    listeners,\n  })\n\n  const childrenRef = useChildrenPosition<HTMLDivElement>(instance)\n\n  useImperativeHandle(ref, () => instance, [instance])\n\n  return children ? (\n    <>\n      {isValidElement(children)\n        ? cloneElement(children, {\n            ...(children.props as any),\n            ref: childrenRef,\n          } as any)\n        : null}\n    </>\n  ) : null\n})\n\nexport default memo(Polyline)\n"],"names":["Polyline","forwardRef","group","points","children","props","ref","listeners","attributes","useSplitProps","instance","useCreateObject","BasePolyline","childrenRef","useChildrenPosition","useImperativeHandle","jsx","Fragment","isValidElement","cloneElement","index","memo"],"mappings":"uRAcA,MAAMA,EAAWC,EAAoD,WAAA,CAAC,CAAE,MAAAC,EAAO,OAAAC,EAAQ,SAAAC,EAAU,GAAGC,CAAM,EAAGC,IAAQ,CACnH,KAAM,CAACC,EAAWC,CAAU,EAAIC,EAAAA,cAAcJ,CAAK,EAE7CK,EAAWC,EAAAA,gBAAgB,CAC/B,YAAaC,EAAAA,SACb,MAAOT,EACP,WAAAK,EACA,MAAAN,EACA,UAAAK,CACF,CAAC,EAEKM,EAAcC,EAAAA,oBAAoCJ,CAAQ,EAEhE,OAAAK,EAAAA,oBAAoBT,EAAK,IAAMI,EAAU,CAACA,CAAQ,CAAC,EAE5CN,EACLY,EAAAA,IAAAC,EAAAA,SAAA,CACG,SAAAC,iBAAed,CAAQ,EACpBe,EAAAA,aAAaf,EAAU,CACrB,GAAIA,EAAS,MACb,IAAKS,CACP,CAAQ,EACR,IAAA,CACN,EACE,IACN,CAAC,EAED,IAAAO,EAAeC,EAAAA,KAAKrB,CAAQ"}
+{"version":3,"file":"index.cjs","sources":["../../../../src/components/Polyline/index.tsx"],"sourcesContent":["import type { Group as BaseGroup } from 'fabric'\nimport { Polyline as BasePolyline } from 'fabric'\nimport { forwardRef, memo, useImperativeHandle, type ReactNode } from 'react'\nimport { useCreateObject } from '../../hooks/useCreateObject'\nimport { useSplitProps } from '../../hooks/useSplitProps'\nimport type { AllObjectEvents } from '../../types/object'\nimport { useInstancePosition } from '../../hooks/useInstancePosition'\n\nexport type PolylineProps<T = unknown> = Partial<ConstructorParameters<typeof BasePolyline>[1] & AllObjectEvents> & {\n  group?: BaseGroup\n  path?: string\n  children?: ReactNode\n} & T\n\nconst Polyline = forwardRef<BasePolyline | undefined, PolylineProps>(({ group, points, children, ...props }, ref) => {\n  const [listeners, attributes] = useSplitProps(props)\n\n  const instance = useCreateObject({\n    Constructor: BasePolyline,\n    param: points,\n    attributes,\n    group,\n    listeners,\n  })\n\n  useImperativeHandle(ref, () => instance, [instance])\n\n  return useInstancePosition(instance, children)\n})\n\nexport default memo(Polyline)\n"],"names":["Polyline","forwardRef","group","points","children","props","ref","listeners","attributes","useSplitProps","instance","useCreateObject","BasePolyline","useImperativeHandle","useInstancePosition","memo"],"mappings":"wPAcA,MAAMA,EAAWC,EAAAA,WAAoD,CAAC,CAAE,MAAAC,EAAO,OAAAC,EAAQ,SAAAC,EAAU,GAAGC,CAAM,EAAGC,IAAQ,CACnH,KAAM,CAACC,EAAWC,CAAU,EAAIC,EAAAA,cAAcJ,CAAK,EAE7CK,EAAWC,kBAAgB,CAC/B,YAAaC,EAAAA,SACb,MAAOT,EACP,WAAAK,EACA,MAAAN,EACA,UAAAK,CACF,CAAC,EAED,OAAAM,sBAAoBP,EAAK,IAAMI,EAAU,CAACA,CAAQ,CAAC,EAE5CI,sBAAoBJ,EAAUN,CAAQ,CAC/C,CAAC,EAED,MAAeW,OAAKf,CAAQ"}

package/dist/cjs/components/Rect/index.cjs

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var u=require("react/jsx-runtime"),d=require("fabric"),e=require("react"),p=require("../../hooks/useCreateObject.cjs"),v=require("../../hooks/useSplitProps.cjs"),f=require("../../hooks/useChildrenPosition.cjs");const m=e.forwardRef(({group:i,children:r,...s},a)=>{const[l,n,o]=v.useSplitProps(s),t=p.useCreateObject({Constructor:d.Rect,defaultValues:o,attributes:n,group:i,listeners:l}),c=f.useChildrenPosition(t);return e.useImperativeHandle(a,()=>t,[t]),r?u.jsx(u.Fragment,{children:e.isValidElement(r)?e.cloneElement(r,{...r.props,ref:c}):null}):null});var q=e.memo(m);exports.default=q;
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var c=require("fabric"),r=require("react"),l=require("../../hooks/useCreateObject.cjs"),p=require("../../hooks/useSplitProps.cjs"),v=require("../../hooks/useInstancePosition.cjs");const d=r.forwardRef(({group:t,children:u,...s},a)=>{const[i,o,n]=p.useSplitProps(s),e=l.useCreateObject({Constructor:c.Rect,defaultValues:n,attributes:o,group:t,listeners:i});return r.useImperativeHandle(a,()=>e,[e]),v.useInstancePosition(e,u)});var f=r.memo(d);exports.default=f;
 //# sourceMappingURL=index.cjs.map

package/dist/cjs/components/Rect/index.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.cjs","sources":["../../../../src/components/Rect/index.tsx"],"sourcesContent":["import type { Group as BaseGroup } from 'fabric'\nimport { Rect as BaseRect } from 'fabric'\n\nimport { cloneElement, forwardRef, isValidElement, memo, useImperativeHandle, type ReactNode } from 'react'\nimport { useCreateObject } from '../../hooks/useCreateObject'\nimport { useSplitProps } from '../../hooks/useSplitProps'\nimport { useChildrenPosition } from '../../hooks/useChildrenPosition'\nimport type { AllObjectEvents } from '../../types/object'\n\nexport type RectProps<T = unknown> = Partial<BaseRect & AllObjectEvents> & {\n  group?: BaseGroup\n  defaultLeft?: number\n  defaultTop?: number\n  defaultWidth?: number\n  defaultHeight?: number\n  children?: ReactNode\n} & T\n\nconst Rect = forwardRef<BaseRect | undefined, RectProps>(({ group, children, ...props }, ref) => {\n  const [listeners, attributes, defaultValues] = useSplitProps(props)\n  const instance = useCreateObject({\n    Constructor: BaseRect,\n    defaultValues,\n    attributes,\n    group,\n    listeners,\n  })\n  const childrenRef = useChildrenPosition<HTMLDivElement>(instance)\n\n  useImperativeHandle(ref, () => instance, [instance])\n\n  return children ? (\n    <>\n      {isValidElement(children)\n        ? cloneElement(children, {\n          ...(children.props as any),\n          ref: childrenRef,\n        } as any)\n        : null}\n    </>\n  ) : null\n})\n\nexport default memo(Rect)\n"],"names":["Rect","forwardRef","group","children","props","ref","listeners","attributes","defaultValues","useSplitProps","instance","useCreateObject","BaseRect","childrenRef","useChildrenPosition","useImperativeHandle","jsx","Fragment","isValidElement","cloneElement","memo"],"mappings":"uRAkBA,MAAMA,EAAOC,EAA4C,WAAA,CAAC,CAAE,MAAAC,EAAO,SAAAC,EAAU,GAAGC,CAAM,EAAGC,IAAQ,CAC/F,KAAM,CAACC,EAAWC,EAAYC,CAAa,EAAIC,EAAcL,cAAAA,CAAK,EAC5DM,EAAWC,EAAAA,gBAAgB,CAC/B,YAAaC,EACb,KAAA,cAAAJ,EACA,WAAAD,EACA,MAAAL,EACA,UAAAI,CACF,CAAC,EACKO,EAAcC,EAAoCJ,oBAAAA,CAAQ,EAEhE,OAAAK,sBAAoBV,EAAK,IAAMK,EAAU,CAACA,CAAQ,CAAC,EAE5CP,EACLa,EAAAA,IAAAC,EAAA,SAAA,CACG,SAAAC,EAAAA,eAAef,CAAQ,EACpBgB,EAAAA,aAAahB,EAAU,CACvB,GAAIA,EAAS,MACb,IAAKU,CACP,CAAQ,EACN,IACN,CAAA,EACE,IACN,CAAC,EAED,IAAeO,EAAAA,EAAAA,KAAKpB,CAAI"}
+{"version":3,"file":"index.cjs","sources":["../../../../src/components/Rect/index.tsx"],"sourcesContent":["import type { Group as BaseGroup } from 'fabric'\nimport { Rect as BaseRect } from 'fabric'\nimport { forwardRef, memo, useImperativeHandle, type ReactNode } from 'react'\nimport { useCreateObject } from '../../hooks/useCreateObject'\nimport { useSplitProps } from '../../hooks/useSplitProps'\nimport type { AllObjectEvents } from '../../types/object'\nimport { useInstancePosition } from '../../hooks/useInstancePosition'\n\nexport type RectProps<T = unknown> = Partial<BaseRect & AllObjectEvents> & {\n  group?: BaseGroup\n  defaultLeft?: number\n  defaultTop?: number\n  defaultWidth?: number\n  defaultHeight?: number\n  children?: ReactNode\n} & T\n\nconst Rect = forwardRef<BaseRect | undefined, RectProps>(({ group, children, ...props }, ref) => {\n  const [listeners, attributes, defaultValues] = useSplitProps(props)\n\n  const instance = useCreateObject({\n    Constructor: BaseRect,\n    defaultValues,\n    attributes,\n    group,\n    listeners,\n  })\n\n  useImperativeHandle(ref, () => instance, [instance])\n\n  return useInstancePosition(instance, children)\n})\n\nexport default memo(Rect)\n"],"names":["Rect","forwardRef","group","children","props","ref","listeners","attributes","defaultValues","useSplitProps","instance","useCreateObject","BaseRect","useImperativeHandle","useInstancePosition","memo"],"mappings":"wPAiBA,MAAMA,EAAOC,EAAAA,WAA4C,CAAC,CAAE,MAAAC,EAAO,SAAAC,EAAU,GAAGC,CAAM,EAAGC,IAAQ,CAC/F,KAAM,CAACC,EAAWC,EAAYC,CAAa,EAAIC,EAAAA,cAAcL,CAAK,EAE5DM,EAAWC,EAAAA,gBAAgB,CAC/B,YAAaC,EAAAA,KACb,cAAAJ,EACA,WAAAD,EACA,MAAAL,EACA,UAAAI,CACF,CAAC,EAED,OAAAO,EAAAA,oBAAoBR,EAAK,IAAMK,EAAU,CAACA,CAAQ,CAAC,EAE5CI,sBAAoBJ,EAAUP,CAAQ,CAC/C,CAAC,EAED,MAAeY,OAAKf,CAAI"}

package/dist/cjs/components/StoreUpdater/index.cjs

@@ -1,2 +1,2 @@
-"use strict";var l=require("react"),g=require("zustand/shallow"),u=require("../../hooks/useStore.cjs");const D=["minManualZoom","maxManualZoom","width","height","zoomable","defaultCentered","defaultSelection","defaultDraggable","selection"],n=[...D],d=e=>({setMinManualZoom:e.setMinManualZoom,setMaxManualZoom:e.setMaxManualZoom,reset:e.reset,setDefaultSelection:e.setDefaultSelection,setDefaultDraggable:e.setDefaultDraggable}),r={};function Z(e){const{reset:s,setMinManualZoom:f,setMaxManualZoom:i,setDefaultSelection:c,setDefaultDraggable:m}=u.useStore(d,g.shallow),M=u.useStoreApi();l.useEffect(()=>(c(e.defaultSelection),m(e.defaultDraggable),()=>{o.current=r,s()}),[]);const o=l.useRef(r);return l.useEffect(()=>{for(const t of n){const a=e[t],S=o.current[t];a!==S&&(typeof e[t]>"u"||(t==="minManualZoom"?f(a):t==="maxManualZoom"?i(a):M.setState({[t]:a})))}o.current=e},n.map(t=>e[t])),null}exports.StoreUpdater=Z;
+"use strict";var l=require("react"),g=require("zustand/shallow"),u=require("../../hooks/useStore.cjs");const D=["minManualZoom","maxManualZoom","width","height","zoomable","panAble","defaultCentered","defaultSelection","defaultDraggable","selection","manualZoom"],n=[...D],Z=e=>({setMinManualZoom:e.setMinManualZoom,setMaxManualZoom:e.setMaxManualZoom,reset:e.reset,setDefaultSelection:e.setDefaultSelection,setDefaultDraggable:e.setDefaultDraggable}),r={};function d(e){const{reset:s,setMinManualZoom:f,setMaxManualZoom:i,setDefaultSelection:c,setDefaultDraggable:m}=u.useStore(Z,g.shallow),M=u.useStoreApi();l.useEffect(()=>(c(e.defaultSelection),m(e.defaultDraggable),()=>{o.current=r,s()}),[]);const o=l.useRef(r);return l.useEffect(()=>{for(const t of n){const a=e[t],S=o.current[t];a!==S&&(typeof e[t]>"u"||(t==="minManualZoom"?f(a):t==="maxManualZoom"?i(a):M.setState({[t]:a})))}o.current=e},n.map(t=>e[t])),null}exports.StoreUpdater=d;
 //# sourceMappingURL=index.cjs.map

package/dist/cjs/components/StoreUpdater/index.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.cjs","sources":["../../../../src/components/StoreUpdater/index.tsx"],"sourcesContent":["import { useEffect, useRef } from 'react'\nimport { shallow } from 'zustand/shallow'\nimport type { ReactFabricProps } from '../../container/ReactFabric'\nimport { useStore, useStoreApi } from '../../hooks/useStore'\nimport type { Node } from '../../types/nodes'\nimport type { ReactFabricState } from '../../types/store'\n\nconst reactFabricFieldsToTrack = [\n  'minManualZoom',\n  'maxManualZoom',\n  'width',\n  'height',\n  'zoomable',\n  'defaultCentered',\n  'defaultSelection',\n  'defaultDraggable',\n  'selection',\n] as const\n\ntype ReactFabricFieldsToTrack = (typeof reactFabricFieldsToTrack)[number]\n\ntype StoreUpdaterProps = Pick<ReactFabricProps, ReactFabricFieldsToTrack>\n\nconst fieldsToTrack = [...reactFabricFieldsToTrack, ] as const\n\nconst selector = (s: ReactFabricState) => ({\n  setMinManualZoom: s.setMinManualZoom,\n  setMaxManualZoom: s.setMaxManualZoom,\n  reset: s.reset,\n  setDefaultSelection: s.setDefaultSelection,\n  setDefaultDraggable: s.setDefaultDraggable,\n})\n\nconst initPrevValues = {}\n\nexport function StoreUpdater<NodeType extends Node = Node>(props: StoreUpdaterProps) {\n  const { reset, setMinManualZoom, setMaxManualZoom, setDefaultSelection,setDefaultDraggable } = useStore(selector, shallow)\n  const store = useStoreApi<NodeType>()\n\n  useEffect(() => {\n    setDefaultSelection(props.defaultSelection)\n    setDefaultDraggable(props.defaultDraggable)\n\n    return () => {\n      previousFields.current = initPrevValues\n      reset()\n    }\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [])\n\n  const previousFields = useRef<Partial<StoreUpdaterProps>>(initPrevValues)\n\n  useEffect(\n    () => {\n      for (const fieldName of fieldsToTrack) {\n        const fieldValue = props[fieldName]\n        const previousFieldValue = previousFields.current[fieldName]\n\n        if (fieldValue === previousFieldValue) continue\n        if (typeof props[fieldName] === 'undefined') continue\n        else if (fieldName === 'minManualZoom') setMinManualZoom(fieldValue as number)\n        else if (fieldName === 'maxManualZoom') setMaxManualZoom(fieldValue as number)\n        else store.setState({ [fieldName]: fieldValue })\n      }\n      previousFields.current = props\n    },\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n    fieldsToTrack.map(fieldName => props[fieldName]),\n  )\n\n  return null\n}\n"],"names":["reactFabricFieldsToTrack","fieldsToTrack","selector","s","initPrevValues","StoreUpdater","props","reset","setMinManualZoom","setMaxManualZoom","setDefaultSelection","setDefaultDraggable","useStore","shallow","store","useStoreApi","useEffect","previousFields","useRef","fieldName","fieldValue","previousFieldValue"],"mappings":"uGAOA,MAAMA,EAA2B,CAC/B,gBACA,gBACA,QACA,SACA,WACA,kBACA,mBACA,mBACA,WACF,EAMMC,EAAgB,CAAC,GAAGD,CAA0B,EAE9CE,EAAYC,IAAyB,CACzC,iBAAkBA,EAAE,iBACpB,iBAAkBA,EAAE,iBACpB,MAAOA,EAAE,MACT,oBAAqBA,EAAE,oBACvB,oBAAqBA,EAAE,mBACzB,GAEMC,EAAiB,CAAA,EAEP,SAAAC,EAA2CC,EAA0B,CACnF,KAAM,CAAE,MAAAC,EAAO,iBAAAC,EAAkB,iBAAAC,EAAkB,oBAAAC,EAAoB,oBAAAC,CAAoB,EAAIC,EAAAA,SAASV,EAAUW,EAAAA,OAAO,EACnHC,EAAQC,EAAAA,YAAAA,EAEdC,EAAAA,UAAU,KACRN,EAAoBJ,EAAM,gBAAgB,EAC1CK,EAAoBL,EAAM,gBAAgB,EAEnC,IAAM,CACXW,EAAe,QAAUb,EACzBG,EACF,CAAA,GAEC,CAAE,CAAA,EAEL,MAAMU,EAAiBC,EAAAA,OAAmCd,CAAc,EAExE,OAAAY,YACE,IAAM,CACJ,UAAWG,KAAalB,EAAe,CACrC,MAAMmB,EAAad,EAAMa,CAAS,EAC5BE,EAAqBJ,EAAe,QAAQE,CAAS,EAEvDC,IAAeC,IACf,OAAOf,EAAMa,CAAS,EAAM,MACvBA,IAAc,gBAAiBX,EAAiBY,CAAoB,EACpED,IAAc,gBAAiBV,EAAiBW,CAAoB,EACxEN,EAAM,SAAS,CAAE,CAACK,CAAS,EAAGC,CAAW,CAAC,GACjD,CACAH,EAAe,QAAUX,CAC3B,EAEAL,EAAc,IAAIkB,GAAab,EAAMa,CAAS,CAAC,CACjD,EAEO,IACT"}
+{"version":3,"file":"index.cjs","sources":["../../../../src/components/StoreUpdater/index.tsx"],"sourcesContent":["import { useEffect, useRef } from 'react'\nimport { shallow } from 'zustand/shallow'\nimport type { ReactFabricProps } from '../../container/ReactFabric'\nimport { useStore, useStoreApi } from '../../hooks/useStore'\nimport type { Node } from '../../types/nodes'\nimport type { ReactFabricState } from '../../types/store'\n\nconst reactFabricFieldsToTrack = [\n  'minManualZoom',\n  'maxManualZoom',\n  'width',\n  'height',\n  'zoomable',\n  'panAble',\n  'defaultCentered',\n  'defaultSelection',\n  'defaultDraggable',\n  'selection',\n  'manualZoom',\n] as const\n\ntype ReactFabricFieldsToTrack = (typeof reactFabricFieldsToTrack)[number]\n\ntype StoreUpdaterProps = Pick<ReactFabricProps, ReactFabricFieldsToTrack>\n\nconst fieldsToTrack = [...reactFabricFieldsToTrack] as const\n\nconst selector = (s: ReactFabricState) => ({\n  setMinManualZoom: s.setMinManualZoom,\n  setMaxManualZoom: s.setMaxManualZoom,\n  reset: s.reset,\n  setDefaultSelection: s.setDefaultSelection,\n  setDefaultDraggable: s.setDefaultDraggable,\n})\n\nconst initPrevValues = {}\n\nexport function StoreUpdater<NodeType extends Node = Node>(props: StoreUpdaterProps) {\n  const { reset, setMinManualZoom, setMaxManualZoom, setDefaultSelection, setDefaultDraggable } = useStore(\n    selector,\n    shallow,\n  )\n  const store = useStoreApi<NodeType>()\n\n  useEffect(() => {\n    setDefaultSelection(props.defaultSelection)\n    setDefaultDraggable(props.defaultDraggable)\n\n    return () => {\n      previousFields.current = initPrevValues\n      reset()\n    }\n  }, [])\n\n  const previousFields = useRef<Partial<StoreUpdaterProps>>(initPrevValues)\n\n  useEffect(\n    () => {\n      for (const fieldName of fieldsToTrack) {\n        const fieldValue = props[fieldName]\n        const previousFieldValue = previousFields.current[fieldName]\n\n        if (fieldValue === previousFieldValue) continue\n        if (typeof props[fieldName] === 'undefined') continue\n        else if (fieldName === 'minManualZoom') setMinManualZoom(fieldValue as number)\n        else if (fieldName === 'maxManualZoom') setMaxManualZoom(fieldValue as number)\n        else store.setState({ [fieldName]: fieldValue })\n      }\n      previousFields.current = props\n    },\n    fieldsToTrack.map(fieldName => props[fieldName]),\n  )\n\n  return null\n}\n"],"names":["reactFabricFieldsToTrack","fieldsToTrack","selector","s","initPrevValues","StoreUpdater","props","reset","setMinManualZoom","setMaxManualZoom","setDefaultSelection","setDefaultDraggable","useStore","shallow","store","useStoreApi","useEffect","previousFields","useRef","fieldName","fieldValue","previousFieldValue"],"mappings":"uGAOA,MAAMA,EAA2B,CAC/B,gBACA,gBACA,QACA,SACA,WACA,UACA,kBACA,mBACA,mBACA,YACA,YACF,EAMMC,EAAgB,CAAC,GAAGD,CAAwB,EAE5CE,EAAYC,IAAyB,CACzC,iBAAkBA,EAAE,iBACpB,iBAAkBA,EAAE,iBACpB,MAAOA,EAAE,MACT,oBAAqBA,EAAE,oBACvB,oBAAqBA,EAAE,mBACzB,GAEMC,EAAiB,CAEhB,EAAA,SAASC,EAA2CC,EAA0B,CACnF,KAAM,CAAE,MAAAC,EAAO,iBAAAC,EAAkB,iBAAAC,EAAkB,oBAAAC,EAAqB,oBAAAC,CAAoB,EAAIC,EAAAA,SAC9FV,EACAW,EAAAA,OACF,EACMC,EAAQC,gBAEdC,EAAAA,UAAU,KACRN,EAAoBJ,EAAM,gBAAgB,EAC1CK,EAAoBL,EAAM,gBAAgB,EAEnC,IAAM,CACXW,EAAe,QAAUb,EACzBG,EACF,CAAA,GACC,CAAE,CAAA,EAEL,MAAMU,EAAiBC,EAAAA,OAAmCd,CAAc,EAExE,OAAAY,EACE,UAAA,IAAM,CACJ,UAAWG,KAAalB,EAAe,CACrC,MAAMmB,EAAad,EAAMa,CAAS,EAC5BE,EAAqBJ,EAAe,QAAQE,CAAS,EAEvDC,IAAeC,IACf,OAAOf,EAAMa,CAAS,EAAM,MACvBA,IAAc,gBAAiBX,EAAiBY,CAAoB,EACpED,IAAc,gBAAiBV,EAAiBW,CAAoB,EACxEN,EAAM,SAAS,CAAE,CAACK,CAAS,EAAGC,CAAW,CAAC,GACjD,CACAH,EAAe,QAAUX,CAC3B,EACAL,EAAc,IAAIkB,GAAab,EAAMa,CAAS,CAAC,CACjD,EAEO,IACT"}

package/dist/cjs/components/Text/index.cjs

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var s=require("react/jsx-runtime"),n=require("fabric"),t=require("react"),p=require("../../hooks/useCreateObject.cjs"),h=require("../../hooks/useSplitProps.cjs"),v=require("../../hooks/useStore.cjs"),F=require("fontfaceobserver"),g=require("../../hooks/useChildrenPosition.cjs");n.FabricText.prototype.set({_getNonTransformedDimensions(){return new n.Point(this.width,this.height).scalarAdd(this.padding)},_calculateCurrentDimensions(){return n.util.transformPoint(this._getTransformedDimensions(),this.getViewportTransform(),!0)}});const q=t.forwardRef(({group:a,text:o,children:i,...u},l)=>{const c=v.useStoreApi(),[m,e]=h.useSplitProps(u),r=p.useCreateObject({Constructor:n.FabricText,param:o,attributes:e,group:a,listeners:m});t.useEffect(()=>{const{canvas:d}=c.getState();!e.fontFamily||!r||new F(e.fontFamily).load().then(()=>{r.set({fontFamily:e.fontFamily}),d?.requestRenderAll()}).catch(()=>{console.error(`ReactFabric: \u5B57\u4F53\u52A0\u8F7D\u5931\u8D25: ${e.fontFamily}`)})},[e.fontFamily,r]);const f=g.useChildrenPosition(r);return t.useImperativeHandle(l,()=>r,[r]),i?s.jsx(s.Fragment,{children:t.isValidElement(i)?t.cloneElement(i,{...i.props,ref:f}):null}):null});var b=t.memo(q);exports.default=b;
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var t=require("fabric"),i=require("react"),d=require("../../hooks/useCreateObject.cjs"),p=require("../../hooks/useSplitProps.cjs"),h=require("../../hooks/useStore.cjs"),v=require("fontfaceobserver"),F=require("../../hooks/useInstancePosition.cjs");t.FabricText.prototype.set({_getNonTransformedDimensions(){return new t.Point(this.width,this.height).scalarAdd(this.padding)},_calculateCurrentDimensions(){return t.util.transformPoint(this._getTransformedDimensions(),this.getViewportTransform(),!0)}});const g=i.forwardRef(({group:s,text:a,children:n,...o},u)=>{const c=h.useStoreApi(),[l,e]=p.useSplitProps(o),r=d.useCreateObject({Constructor:t.FabricText,param:a,attributes:e,group:s,listeners:l});return i.useEffect(()=>{const{canvas:f}=c.getState();!e.fontFamily||!r||new v(e.fontFamily).load().then(()=>{r.set({fontFamily:e.fontFamily}),f?.requestRenderAll()}).catch(m=>{console.error(`ReactFabric: \u5B57\u4F53\u52A0\u8F7D\u5931\u8D25: ${e.fontFamily}`,m)})},[e.fontFamily,r]),i.useImperativeHandle(u,()=>r,[r]),F.useInstancePosition(r,n)});var b=i.memo(g);exports.default=b;
 //# sourceMappingURL=index.cjs.map

package/dist/cjs/components/Text/index.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.cjs","sources":["../../../../src/components/Text/index.tsx"],"sourcesContent":["import type { Group as BaseGroup } from 'fabric'\nimport { FabricText, Point, util } from 'fabric'\nimport { cloneElement, forwardRef, isValidElement, memo, useEffect, useImperativeHandle, type ReactNode } from 'react'\nimport { useCreateObject } from '../../hooks/useCreateObject'\nimport { useSplitProps } from '../../hooks/useSplitProps'\nimport { useStoreApi } from '../../hooks/useStore'\nimport type { AllObjectEvents } from '../../types/object'\nimport FontFaceObserver from 'fontfaceobserver'\nimport { useChildrenPosition } from '../../hooks/useChildrenPosition'\n\nexport type Handle = FabricText | undefined\n\nexport type TextProps<T = unknown> = Partial<ConstructorParameters<typeof FabricText>[1] & AllObjectEvents> & {\n  group?: BaseGroup\n  text: string\n  children?: ReactNode\n} & T\n\nFabricText.prototype.set({\n  _getNonTransformedDimensions() {\n    // Object dimensions\n    return new Point(this.width, this.height).scalarAdd(this.padding)\n  },\n  _calculateCurrentDimensions() {\n    // Controls dimensions\n    return util.transformPoint(this._getTransformedDimensions(), this.getViewportTransform(), true)\n  },\n})\n\nconst Text = forwardRef<Handle, TextProps>(({ group, text, children, ...props }, ref) => {\n  const store = useStoreApi()\n\n  const [listeners, attributes] = useSplitProps(props)\n\n  const instance = useCreateObject({\n    Constructor: FabricText,\n    param: text,\n    attributes,\n    group,\n    listeners,\n  })\n\n  /**\n   * 字体只有被使用了才会加载;先由 Text 使用一次, 监听加载完成,之后再 set 一次\n   */\n  useEffect(() => {\n    const { canvas } = store.getState()\n    if (!attributes.fontFamily || !instance) return\n    const font = new FontFaceObserver(attributes.fontFamily)\n    font\n      .load()\n      .then(() => {\n        instance.set({\n          fontFamily: attributes.fontFamily,\n        })\n        canvas?.requestRenderAll()\n      })\n      .catch(() => {\n        // 加载失败\n        console.error(`ReactFabric: 字体加载失败: ${attributes.fontFamily}`)\n      })\n  }, [attributes.fontFamily, instance])\n\n  const childrenRef = useChildrenPosition<HTMLDivElement>(instance)\n\n  useImperativeHandle(ref, () => instance, [instance])\n\n  return children ? (\n    <>\n      {isValidElement(children)\n        ? cloneElement(children, {\n            ...(children.props as any),\n            ref: childrenRef,\n          } as any)\n        : null}\n    </>\n  ) : null\n})\n\nexport default memo(Text)\n"],"names":["FabricText","Point","util","Text","forwardRef","group","text","children","props","ref","store","useStoreApi","listeners","attributes","useSplitProps","instance","useCreateObject","useEffect","canvas","FontFaceObserver","childrenRef","useChildrenPosition","useImperativeHandle","jsx","Fragment","isValidElement","cloneElement","e","memo"],"mappings":"2VAkBAA,EAAAA,WAAW,UAAU,IAAI,CACvB,8BAA+B,CAE7B,OAAO,IAAIC,EAAAA,MAAM,KAAK,MAAO,KAAK,MAAM,EAAE,UAAU,KAAK,OAAO,CAClE,EACA,6BAA8B,CAE5B,OAAOC,EAAAA,KAAK,eAAe,KAAK,0BAA6B,EAAA,KAAK,qBAAqB,EAAG,EAAI,CAChG,CACF,CAAC,EAED,MAAMC,EAAOC,EAAAA,WAA8B,CAAC,CAAE,MAAAC,EAAO,KAAAC,EAAM,SAAAC,EAAU,GAAGC,CAAM,EAAGC,IAAQ,CACvF,MAAMC,EAAQC,EAAAA,YAER,EAAA,CAACC,EAAWC,CAAU,EAAIC,EAAAA,cAAcN,CAAK,EAE7CO,EAAWC,kBAAgB,CAC/B,YAAahB,EACb,WAAA,MAAOM,EACP,WAAAO,EACA,MAAAR,EACA,UAAAO,CACF,CAAC,EAKDK,EAAU,UAAA,IAAM,CACd,KAAM,CAAE,OAAAC,CAAO,EAAIR,EAAM,SACzB,EAAI,CAACG,EAAW,YAAc,CAACE,GAClB,IAAII,EAAiBN,EAAW,UAAU,EAEpD,KACA,EAAA,KAAK,IAAM,CACVE,EAAS,IAAI,CACX,WAAYF,EAAW,UACzB,CAAC,EACDK,GAAQ,kBACV,CAAC,EACA,MAAM,IAAM,CAEX,QAAQ,MAAM,sDAAwBL,EAAW,UAAU,EAAE,CAC/D,CAAC,CACL,EAAG,CAACA,EAAW,WAAYE,CAAQ,CAAC,EAEpC,MAAMK,EAAcC,EAAAA,oBAAoCN,CAAQ,EAEhE,OAAAO,EAAoBb,oBAAAA,EAAK,IAAMM,EAAU,CAACA,CAAQ,CAAC,EAE5CR,EACLgB,EAAAA,IAAAC,EAAAA,SAAA,CACG,SAAAC,EAAAA,eAAelB,CAAQ,EACpBmB,eAAanB,EAAU,CACrB,GAAIA,EAAS,MACb,IAAKa,CACP,CAAQ,EACR,IAAA,CACN,EACE,IACN,CAAC,EAED,IAAAO,EAAeC,EAAAA,KAAKzB,CAAI"}
+{"version":3,"file":"index.cjs","sources":["../../../../src/components/Text/index.tsx"],"sourcesContent":["import type { Group as BaseGroup } from 'fabric'\nimport { FabricText, Point, util } from 'fabric'\nimport { forwardRef, memo, useEffect, useImperativeHandle, type ReactNode } from 'react'\nimport { useCreateObject } from '../../hooks/useCreateObject'\nimport { useSplitProps } from '../../hooks/useSplitProps'\nimport { useStoreApi } from '../../hooks/useStore'\nimport type { AllObjectEvents } from '../../types/object'\nimport FontFaceObserver from 'fontfaceobserver'\nimport { useInstancePosition } from '../../hooks/useInstancePosition'\n\nexport type Handle = FabricText | undefined\n\nexport type TextProps<T = unknown> = Partial<ConstructorParameters<typeof FabricText>[1] & AllObjectEvents> & {\n  group?: BaseGroup\n  text: string\n  children?: ReactNode\n} & T\n\nFabricText.prototype.set({\n  _getNonTransformedDimensions() {\n    // Object dimensions\n    return new Point(this.width, this.height).scalarAdd(this.padding)\n  },\n  _calculateCurrentDimensions() {\n    // Controls dimensions\n    return util.transformPoint(this._getTransformedDimensions(), this.getViewportTransform(), true)\n  },\n})\n\nconst Text = forwardRef<Handle, TextProps>(({ group, text, children, ...props }, ref) => {\n  const store = useStoreApi()\n\n  const [listeners, attributes] = useSplitProps(props)\n\n  const instance = useCreateObject({\n    Constructor: FabricText,\n    param: text,\n    attributes,\n    group,\n    listeners,\n  })\n\n  /**\n   * 字体只有被使用了才会加载;先由 Text 使用一次, 监听加载完成,之后再 set 一次\n   */\n  useEffect(() => {\n    const { canvas } = store.getState()\n    if (!attributes.fontFamily || !instance) return\n    const font = new FontFaceObserver(attributes.fontFamily)\n    font\n      .load()\n      .then(() => {\n        instance.set({\n          fontFamily: attributes.fontFamily,\n        })\n        canvas?.requestRenderAll()\n      })\n      .catch(error => {\n        // 加载失败\n        console.error(`ReactFabric: 字体加载失败: ${attributes.fontFamily}`, error)\n      })\n  }, [attributes.fontFamily, instance])\n\n  useImperativeHandle(ref, () => instance, [instance])\n  return useInstancePosition(instance, children)\n})\n\nexport default memo(Text)\n"],"names":["FabricText","Point","util","Text","forwardRef","group","text","children","props","ref","store","useStoreApi","listeners","attributes","useSplitProps","instance","useCreateObject","useEffect","canvas","FontFaceObserver","error","useImperativeHandle","useInstancePosition","memo"],"mappings":"4TAkBAA,EAAAA,WAAW,UAAU,IAAI,CACvB,8BAA+B,CAE7B,OAAO,IAAIC,EAAM,MAAA,KAAK,MAAO,KAAK,MAAM,EAAE,UAAU,KAAK,OAAO,CAClE,EACA,6BAA8B,CAE5B,OAAOC,OAAK,eAAe,KAAK,4BAA6B,KAAK,qBAAwB,EAAA,EAAI,CAChG,CACF,CAAC,EAED,MAAMC,EAAOC,aAA8B,CAAC,CAAE,MAAAC,EAAO,KAAAC,EAAM,SAAAC,EAAU,GAAGC,CAAM,EAAGC,IAAQ,CACvF,MAAMC,EAAQC,EAAAA,YAAY,EAEpB,CAACC,EAAWC,CAAU,EAAIC,EAAAA,cAAcN,CAAK,EAE7CO,EAAWC,EAAgB,gBAAA,CAC/B,YAAahB,EAAAA,WACb,MAAOM,EACP,WAAAO,EACA,MAAAR,EACA,UAAAO,CACF,CAAC,EAKD,OAAAK,EAAAA,UAAU,IAAM,CACd,KAAM,CAAE,OAAAC,CAAO,EAAIR,EAAM,SAAS,EAC9B,CAACG,EAAW,YAAc,CAACE,GAClB,IAAII,EAAiBN,EAAW,UAAU,EAEpD,OACA,KAAK,IAAM,CACVE,EAAS,IAAI,CACX,WAAYF,EAAW,UACzB,CAAC,EACDK,GAAQ,iBAAiB,CAC3B,CAAC,EACA,MAAME,GAAS,CAEd,QAAQ,MAAM,sDAAwBP,EAAW,UAAU,GAAIO,CAAK,CACtE,CAAC,CACL,EAAG,CAACP,EAAW,WAAYE,CAAQ,CAAC,EAEpCM,EAAAA,oBAAoBZ,EAAK,IAAMM,EAAU,CAACA,CAAQ,CAAC,EAC5CO,EAAAA,oBAAoBP,EAAUR,CAAQ,CAC/C,CAAC,EAED,IAAegB,EAAAA,EAAAA,KAAKpB,CAAI"}

package/dist/cjs/components/Textbox/index.cjs

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var s=require("react/jsx-runtime"),t=require("fabric"),e=require("react"),p=require("../../hooks/useCreateObject.cjs"),c=require("../../hooks/useSplitProps.cjs"),h=require("../../hooks/useChildrenPosition.cjs");t.Textbox.prototype.set({_getNonTransformedDimensions(){return new t.Point(this.width,this.height).scalarAdd(this.padding)},_calculateCurrentDimensions(){return t.util.transformPoint(this._getTransformedDimensions(),this.getViewportTransform(),!0)}});const f=e.forwardRef(({group:n,text:o,children:r,...u},a)=>{const[l,d]=c.useSplitProps(u),i=p.useCreateObject({Constructor:t.Textbox,param:o,attributes:d,group:n,listeners:l}),m=h.useChildrenPosition(i);return e.useImperativeHandle(a,()=>i,[i]),r?s.jsx(s.Fragment,{children:e.isValidElement(r)?e.cloneElement(r,{...r.props,ref:m}):null}):null});var v=e.memo(f);exports.default=v;
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("fabric"),t=require("react"),d=require("../../hooks/useCreateObject.cjs"),p=require("../../hooks/useSplitProps.cjs"),l=require("../../hooks/useInstancePosition.cjs");e.Textbox.prototype.set({_getNonTransformedDimensions(){return new e.Point(this.width,this.height).scalarAdd(this.padding)},_calculateCurrentDimensions(){return e.util.transformPoint(this._getTransformedDimensions(),this.getViewportTransform(),!0)}});const m=t.forwardRef(({group:s,text:i,children:n,...o},a)=>{const[u,c]=p.useSplitProps(o),r=d.useCreateObject({Constructor:e.Textbox,param:i,attributes:c,group:s,listeners:u});return t.useImperativeHandle(a,()=>r,[r]),l.useInstancePosition(r,n)});var f=t.memo(m);exports.default=f;
 //# sourceMappingURL=index.cjs.map

package/dist/cjs/components/Textbox/index.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.cjs","sources":["../../../../src/components/Textbox/index.tsx"],"sourcesContent":["import type { Group as BaseGroup } from 'fabric'\nimport { Textbox as FabricTextbox, util, Point } from 'fabric'\nimport { cloneElement, forwardRef, isValidElement, memo, useImperativeHandle, type ReactNode } from 'react'\nimport { useCreateObject } from '../../hooks/useCreateObject'\nimport { useSplitProps } from '../../hooks/useSplitProps'\nimport type { AllObjectEvents } from '../../types/object'\nimport { useChildrenPosition } from '../../hooks/useChildrenPosition'\n\nexport type TextboxProps<T = unknown> = Partial<ConstructorParameters<typeof FabricTextbox>[1] & AllObjectEvents> & {\n  group?: BaseGroup\n  text: string\n  children?: ReactNode\n} & T\n\nFabricTextbox.prototype.set({\n  _getNonTransformedDimensions() {\n    // Object dimensions\n    return new Point(this.width, this.height).scalarAdd(this.padding)\n  },\n  _calculateCurrentDimensions() {\n    // Controls dimensions\n    return util.transformPoint(this._getTransformedDimensions(), this.getViewportTransform(), true)\n  },\n})\n\nconst Textbox = forwardRef<FabricTextbox | undefined, TextboxProps>(({ group, text, children, ...props }, ref) => {\n  const [listeners, attributes] = useSplitProps(props)\n\n  const instance = useCreateObject({\n    Constructor: FabricTextbox,\n    param: text,\n    attributes,\n    group,\n    listeners,\n  })\n  const childrenRef = useChildrenPosition<HTMLDivElement>(instance)\n\n  useImperativeHandle(ref, () => instance, [instance])\n\n  return children ? (\n    <>\n      {isValidElement(children)\n        ? cloneElement(children, {\n            ...(children.props as any),\n            ref: childrenRef,\n          } as any)\n        : null}\n    </>\n  ) : null\n})\n\nexport default memo(Textbox)\n"],"names":["FabricTextbox","Point","util","Textbox","forwardRef","group","text","children","props","ref","listeners","attributes","useSplitProps","instance","useCreateObject","childrenRef","useChildrenPosition","useImperativeHandle","jsx","Fragment","isValidElement","cloneElement","memo"],"mappings":"uRAcAA,EAAAA,QAAc,UAAU,IAAI,CAC1B,8BAA+B,CAE7B,OAAO,IAAIC,EAAAA,MAAM,KAAK,MAAO,KAAK,MAAM,EAAE,UAAU,KAAK,OAAO,CAClE,EACA,6BAA8B,CAE5B,OAAOC,EAAAA,KAAK,eAAe,KAAK,4BAA6B,KAAK,uBAAwB,EAAI,CAChG,CACF,CAAC,EAED,MAAMC,EAAUC,aAAoD,CAAC,CAAE,MAAAC,EAAO,KAAAC,EAAM,SAAAC,EAAU,GAAGC,CAAM,EAAGC,IAAQ,CAChH,KAAM,CAACC,EAAWC,CAAU,EAAIC,gBAAcJ,CAAK,EAE7CK,EAAWC,EAAAA,gBAAgB,CAC/B,YAAad,UACb,MAAOM,EACP,WAAAK,EACA,MAAAN,EACA,UAAAK,CACF,CAAC,EACKK,EAAcC,sBAAoCH,CAAQ,EAEhE,OAAAI,sBAAoBR,EAAK,IAAMI,EAAU,CAACA,CAAQ,CAAC,EAE5CN,EACLW,MAAAC,EAAAA,SAAA,CACG,SAAAC,iBAAeb,CAAQ,EACpBc,eAAad,EAAU,CACrB,GAAIA,EAAS,MACb,IAAKQ,CACP,CAAQ,EACR,IAAA,CACN,EACE,IACN,CAAC,EAED,MAAeO,OAAKnB,CAAO"}
+{"version":3,"file":"index.cjs","sources":["../../../../src/components/Textbox/index.tsx"],"sourcesContent":["import type { Group as BaseGroup } from 'fabric'\nimport { Textbox as FabricTextbox, util, Point } from 'fabric'\nimport { forwardRef, memo, useImperativeHandle, type ReactNode } from 'react'\nimport { useCreateObject } from '../../hooks/useCreateObject'\nimport { useSplitProps } from '../../hooks/useSplitProps'\nimport type { AllObjectEvents } from '../../types/object'\nimport { useInstancePosition } from '../../hooks/useInstancePosition'\n\nexport type TextboxProps<T = unknown> = Partial<ConstructorParameters<typeof FabricTextbox>[1] & AllObjectEvents> & {\n  group?: BaseGroup\n  text: string\n  children?: ReactNode\n} & T\n\nFabricTextbox.prototype.set({\n  _getNonTransformedDimensions() {\n    // Object dimensions\n    return new Point(this.width, this.height).scalarAdd(this.padding)\n  },\n  _calculateCurrentDimensions() {\n    // Controls dimensions\n    return util.transformPoint(this._getTransformedDimensions(), this.getViewportTransform(), true)\n  },\n})\n\nconst Textbox = forwardRef<FabricTextbox | undefined, TextboxProps>(({ group, text, children, ...props }, ref) => {\n  const [listeners, attributes] = useSplitProps(props)\n\n  const instance = useCreateObject({\n    Constructor: FabricTextbox,\n    param: text,\n    attributes,\n    group,\n    listeners,\n  })\n\n  useImperativeHandle(ref, () => instance, [instance])\n\n  return useInstancePosition(instance, children)\n})\n\nexport default memo(Textbox)\n"],"names":["FabricTextbox","Point","util","Textbox","forwardRef","group","text","children","props","ref","listeners","attributes","useSplitProps","instance","useCreateObject","useImperativeHandle","useInstancePosition","index","memo"],"mappings":"wPAcAA,EAAAA,QAAc,UAAU,IAAI,CAC1B,8BAA+B,CAE7B,OAAO,IAAIC,EAAM,MAAA,KAAK,MAAO,KAAK,MAAM,EAAE,UAAU,KAAK,OAAO,CAClE,EACA,6BAA8B,CAE5B,OAAOC,EAAAA,KAAK,eAAe,KAAK,4BAA6B,KAAK,uBAAwB,EAAI,CAChG,CACF,CAAC,EAED,MAAMC,EAAUC,EAAoD,WAAA,CAAC,CAAE,MAAAC,EAAO,KAAAC,EAAM,SAAAC,EAAU,GAAGC,CAAM,EAAGC,IAAQ,CAChH,KAAM,CAACC,EAAWC,CAAU,EAAIC,gBAAcJ,CAAK,EAE7CK,EAAWC,EAAgB,gBAAA,CAC/B,YAAad,EACb,QAAA,MAAOM,EACP,WAAAK,EACA,MAAAN,EACA,UAAAK,CACF,CAAC,EAED,OAAAK,sBAAoBN,EAAK,IAAMI,EAAU,CAACA,CAAQ,CAAC,EAE5CG,EAAoBH,oBAAAA,EAAUN,CAAQ,CAC/C,CAAC,EAED,IAAAU,EAAeC,EAAAA,KAAKf,CAAO"}

package/dist/cjs/components/WavyLine/index.cjs

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var x=require("react/jsx-runtime"),P=require("fabric"),p=require("react"),M=require("../../hooks/useCreateObject.cjs"),j=require("../../hooks/useSplitProps.cjs"),O=require("../../hooks/useChildrenPosition.cjs"),k=Object.defineProperty,q=(o,e,t)=>e in o?k(o,e,{enumerable:!0,configurable:!0,writable:!0,value:t}):o[e]=t,w=(o,e,t)=>q(o,e+"",t);class b extends P.Line{constructor(e,t={}){super(e,t)}_render(e){e.beginPath();const t=this.calcLinePoints(),s=this.pointOnLine(this.point(t.x2,t.y2));this.wavy(this.point(t.x1,t.y1),s,e),e.lineWidth=this.strokeWidth;const n=e.strokeStyle;e.strokeStyle=this.stroke??e.fillStyle,this.stroke&&this._renderStroke(e),e.strokeStyle=n}point(e,t){return{x:e,y:t}}wavy(e,t,s){let n=0,i=0,a=e.x,u=e.y,l=t.x,h=t.y,r=0,c=1,y=0,d=Math.atan2(h-u,l-a),v=Math.sqrt((a-l)*(a-l)+(u-h)*(u-h)),f=-1*2,m=Math.PI*v/12;for(r;r<=v;r+=c)y=Math.sin(r/v*m)*f,n=e.x+Math.cos(d)*r+Math.cos(d-Math.PI/2)*y,i=e.y+Math.sin(d)*r+Math.sin(d-Math.PI/2)*y,r>0?s.lineTo(n,i):s.moveTo(n,i)}pointOnLine(e){const t=e.x,s=e.y;return new P.Point(t,s)}calcLinePoints(){const{x1:e,x2:t,y1:s,y2:n,width:i,height:a}=this,u=e<=t?-1:1,l=s<=n?-1:1,h=u*i/2,r=l*a/2,c=u*-i/2,y=l*-a/2;return{x1:h,x2:c,y1:r,y2:y}}toObject(e=[]){return{...super.toObject(e)}}}w(b,"type","wavyLine");const L=p.forwardRef(({group:o,x1:e,y1:t,x2:s,y2:n,children:i,...a},u)=>{const[l,h]=j.useSplitProps(a),r=M.useCreateObject({Constructor:b,param:[e,t,s,n],attributes:h,group:o,listeners:l}),c=O.useChildrenPosition(r);return p.useImperativeHandle(u,()=>r,[r]),i?x.jsx(x.Fragment,{children:p.isValidElement(i)?p.cloneElement(i,{...i.props,ref:c}):null}):null});var S=p.memo(L);exports.default=S;
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var d=require("fabric"),x=require("react"),f=require("../../hooks/useCreateObject.cjs"),O=require("../../hooks/useSplitProps.cjs"),k=require("../../hooks/useInstancePosition.cjs"),m=Object.defineProperty,w=(n,e,t)=>e in n?m(n,e,{enumerable:!0,configurable:!0,writable:!0,value:t}):n[e]=t,L=(n,e,t)=>w(n,e+"",t);class P extends d.Line{constructor(e,t={}){super(e,t)}_render(e){e.beginPath();const t=this.calcLinePoints(),i=this.pointOnLine(this.point(t.x2,t.y2));this.wavy(this.point(t.x1,t.y1),i,e),e.lineWidth=this.strokeWidth;const s=e.strokeStyle;e.strokeStyle=this.stroke??e.fillStyle,this.stroke&&this._renderStroke(e),e.strokeStyle=s}point(e,t){return{x:e,y:t}}wavy(e,t,i){let s=0,o=0,a=e.x,u=e.y,c=t.x,h=t.y,r=0,p=1,l=0,y=Math.atan2(h-u,c-a),v=Math.sqrt((a-c)*(a-c)+(u-h)*(u-h)),b=-1*2,M=Math.PI*v/12;for(r;r<=v;r+=p)l=Math.sin(r/v*M)*b,s=e.x+Math.cos(y)*r+Math.cos(y-Math.PI/2)*l,o=e.y+Math.sin(y)*r+Math.sin(y-Math.PI/2)*l,r>0?i.lineTo(s,o):i.moveTo(s,o)}pointOnLine(e){const t=e.x,i=e.y;return new d.Point(t,i)}calcLinePoints(){const{x1:e,x2:t,y1:i,y2:s,width:o,height:a}=this,u=e<=t?-1:1,c=i<=s?-1:1,h=u*o/2,r=c*a/2,p=u*-o/2,l=c*-a/2;return{x1:h,x2:p,y1:r,y2:l}}toObject(e=[]){return{...super.toObject(e)}}}L(P,"type","wavyLine");const S=x.forwardRef(({group:n,x1:e,y1:t,x2:i,y2:s,children:o,...a},u)=>{const[c,h]=O.useSplitProps(a),r=f.useCreateObject({Constructor:P,param:[e,t,i,s],attributes:h,group:n,listeners:c});return x.useImperativeHandle(u,()=>r,[r]),k.useInstancePosition(r,o)});var j=x.memo(S);exports.default=j;
 //# sourceMappingURL=index.cjs.map