@cs-open/react-fabric 0.0.5 → 0.0.7

package/README.md

@@ -0,0 +1,132 @@
+# @cs-open/react-fabric
+
+React 组件库，基于 Fabric.js 构建，提供强大的 Canvas 绘图功能。
+
+## 安装
+
+```bash
+npm install @cs-open/react-fabric
+# 或者
+yarn add @cs-open/react-fabric
+# 或者
+pnpm add @cs-open/react-fabric
+```
+
+## 依赖要求
+
+### 必需依赖
+
+以下依赖会自动安装：
+
+- `fabric` - Fabric.js 核心库
+- `react` - React 框架
+- `react-dom` - React DOM 渲染器
+- `zustand` - 状态管理
+- `@floating-ui/core` - 浮动 UI 组件
+- `use-sync-external-store` - 同步外部存储
+
+### 可选依赖
+
+某些插件需要额外的依赖才能正常工作：
+
+#### Pinch 插件（触摸手势支持）
+
+```bash
+npm install hammerjs
+# 如果使用 TypeScript，还需要安装类型定义
+npm install @types/hammerjs
+```
+
+**注意**：如果没有安装 `hammerjs`，Pinch 插件会自动禁用，不会影响其他功能。
+
+## 使用示例
+
+```tsx
+import React from 'react'
+import { Canvas, Rect, Text } from '@cs-open/react-fabric'
+
+function App() {
+  return (
+    <Canvas width={800} height={600}>
+      <Rect left={100} top={100} width={200} height={100} fill="red" />
+      <Text left={150} top={150} text="Hello Fabric!" fontSize={20} fill="white" />
+    </Canvas>
+  )
+}
+
+export default App
+```
+
+## 插件系统
+
+### 内置插件
+
+- **Pinch**: 触摸设备双指缩放支持
+- **FreeDraw**: 自由绘制工具
+- **FreeRect**: 自由矩形绘制工具
+- **FreeText**: 自由文本工具
+- **GridLine**: 网格线辅助工具
+- **Mask**: 遮罩效果
+- **Pinch**: 触摸手势支持
+
+### 使用插件
+
+```tsx
+import { Canvas } from '@cs-open/react-fabric'
+import { Pinch, FreeDraw } from '@cs-open/react-fabric/plugins'
+
+function App() {
+  return (
+    <Canvas width={800} height={600}>
+      {/* 你的画布内容 */}
+      <Pinch />
+      <FreeDraw />
+    </Canvas>
+  )
+}
+```
+
+## 故障排除
+
+### Pinch 插件不工作
+
+如果触摸手势功能不工作，请确保：
+
+1. 已安装 `hammerjs`：
+
+   ```bash
+   npm install hammerjs
+   ```
+
+2. 检查控制台是否有相关警告信息
+
+3. 确保在触摸设备上测试
+
+### 其他问题
+
+如果遇到其他问题，请检查：
+
+1. 所有必需依赖是否正确安装
+2. 浏览器控制台是否有错误信息
+3. 确保使用兼容的浏览器版本
+
+DOM control
+
+```jsx
+<Rect>
+  <div className="w-full h-full bg-red-500">
+    <EvaluatesHtml
+      type="right"
+      pageSize={pageSize}
+      allSentences={allSentences}
+      isPaperFront={isPaperFront}
+      fontSizeMemo={fontSizeMemo / 1.2}
+      singleColumnLeft={singleColumnLeft}
+    />
+  </div>
+</Rect>
+```
+
+## 许可证
+
+MIT

package/dist/cjs/components/Control/index.cjs

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

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

@@ -1 +1 @@
-{"version":3,"file":"index.cjs","sources":["../../../../src/components/Control/index.tsx"],"sourcesContent":["import { computePosition, flip, offset, shift,ComputePositionConfig } from '@floating-ui/core'\nimport type { FabricObject, FabricObjectProps, TPointerEvent, TPointerEventInfo } from 'fabric'\nimport { util } from 'fabric'\nimport { twMerge } from 'tailwind-merge'\nimport type { ReactNode } from 'react'\nimport { useMemo } from 'react'\nimport { useCallback } from 'react'\nimport { useRef } from 'react'\nimport { useEffect } from 'react'\nimport React from 'react'\nimport { useStore } from '../../hooks/useStore'\nimport type { AllObjectEvents } from '../../types/object'\nimport NodeToolbarPortal from '../NodeToolbarPortal'\n\n/**\n * @desc 不能内置支持 selected , 因为需要 rect 开启 lockMovementX lockMovementY, 这样支持的场景就受限了\n */\nexport type ControlProps = 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    }: ControlProps,\n    forwardRef,\n  ) => {\n    const instanceRef = useRef<FabricObject | undefined>(undefined)\n    const canvas = useStore(state => state.canvas)\n    const floatingElRef = useRef<HTMLDivElement>(null)\n\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      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    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    return (\n      <>\n        {newChildren}\n        {open && (\n          <NodeToolbarPortal\n            className={twMerge('absolute', className)}\n            ref={floatingElRef}\n            onClick={e => {\n              e.stopPropagation()\n              e.preventDefault()\n            }}\n          >\n            {Content}\n          </NodeToolbarPortal>\n        )}\n      </>\n    )\n  },\n)\n\nexport default Control\n"],"names":["Control","React","children","className","placement","open","onOpenChange","closeOnOutsideClick","Content","forwardRef","instanceRef","useRef","canvas","useStore","state","floatingElRef","refCallback","useCallback","node","newChildren","useMemo","updatePosition","floatingRect","viewportCoords","point","util","platform","data","element","virtualEl","computePosition","offset","flip","shift","x","y","useEffect","handleCanvasClick","e","handleDocumentClick","jsxs","Fragment","jsx","NodeToolbarPortal","twMerge"],"mappings":"2RA2BA,MAAMA,EAAUC,EAAM,WACpB,CACE,CACE,SAAAC,EACA,UAAAC,EACA,UAAAC,EAAY,SACZ,KAAAC,EAAO,GACP,aAAAC,EACA,oBAAAC,EAAsB,GACtB,QAAAC,CACF,EACAC,IACG,CACH,MAAMC,EAAcC,EAAAA,OAAiC,MAAS,EACxDC,EAASC,WAASC,GAASA,EAAM,MAAM,EACvCC,EAAgBJ,SAAuB,IAAI,EAG3CK,EAAcC,EAAAA,YACjBC,GAAc,CAETA,IAASR,EAAY,UACvBA,EAAY,QAAUQ,EAGlB,OAAOT,GAAe,WACxBA,EAAWS,CAAI,EACNT,IACTA,EAAW,QAAUS,GAG3B,EACA,CAACT,CAAU,CACb,EAGMU,EAAcC,EAAQ,QAAA,IACtBnB,EAAM,SAAS,KAAKC,CAAQ,GAAKD,EAAM,eAAeC,CAAQ,EACzDD,EAAM,aAAaC,EAAU,CAClC,IAAKc,EACL,GAAGd,EAAS,KACd,CAAC,EAEIA,EACN,CAACA,EAAUc,CAAW,CAAC,EAEpBK,EAAiBJ,EAAAA,YAAY,IAAM,CACvC,GAAI,CAACP,EAAY,SAAW,CAACK,EAAc,SAAW,CAACH,EACrD,OAIF,MAAMU,EAAeP,EAAc,QAAQ,sBAAsB,EACjE,GAAIO,EAAa,QAAU,GAAKA,EAAa,SAAW,EAAG,CAEzD,sBAAsBD,CAAc,EACpC,MACF,CAGA,MAAME,EADcb,EAAY,QAAQ,YACL,IAAIc,GAASC,EAAK,KAAA,iBAAiBD,EAAOZ,EAAO,kBAAmB,MAAS,CAAC,EAE3Gc,EAAW,CACf,gBAAkBC,GAAaA,EAC/B,cAAgBC,GAAgBA,EAChC,gBAAiB,KAAO,CACtB,EAAG,EACH,EAAG,EACH,MAAOhB,EAAO,MACd,OAAQA,EAAO,MACjB,EACF,EAEMiB,EAAY,CAChB,EAAGN,EAAe,CAAC,EAAE,EACrB,EAAGA,EAAe,CAAC,EAAE,EACrB,MAAOA,EAAe,CAAC,EAAE,EAAIA,EAAe,CAAC,EAAE,EAC/C,OAAQA,EAAe,CAAC,EAAE,EAAIA,EAAe,CAAC,EAAE,CAClD,EAEAO,EAAgBD,gBAAAA,EAAWd,EAAc,QAAQ,wBAAyB,CACxE,SAAAW,EACA,UAAAtB,EACA,WAAY,CAAC2B,SAAO,CAAC,EAAGC,EAAAA,KAAK,EAAGC,QAAM,CAAE,QAAS,CAAE,CAAC,CAAC,CACvD,CAAC,EAAE,KAAK,CAAC,CAAE,EAAAC,EAAG,EAAAC,CAAE,IAAM,CACfpB,EAAc,SAEnB,OAAO,OAAOA,EAAc,QAAQ,MAAO,CACzC,KAAM,GAAGmB,CAAC,KACV,IAAK,GAAGC,CAAC,IACX,CAAC,CACH,CAAC,CACH,EAAG,CAACvB,EAAQR,CAAS,CAAC,EAGtB,OAAAgC,EAAAA,UAAU,IAAM,CACV/B,GACF,sBAAsBgB,CAAc,CAExC,EAAG,CAAChB,EAAMgB,CAAc,CAAC,EAEzBe,EAAAA,UAAU,KACRxB,GAAQ,GAAG,eAAgBS,CAAc,EAElC,IAAM,CACXT,GAAQ,IAAI,eAAgBS,CAAc,CAC5C,GACC,CAACT,EAAQS,CAAc,CAAC,EAE3Be,EAAAA,UAAU,IAAM,CACd,MAAMC,EAAqBC,GAAwC,CAEjEA,EAAE,EAAE,kBACJA,EAAE,EAAE,iBAGAA,EAAE,SAAW5B,EAAY,QAC3BJ,IAAe,CAACD,CAAI,EAGbA,GACPC,IAAe,EAAK,CAExB,EAEMiC,EAAuBD,GAAkB,CAEzCvB,EAAc,SAAS,SAASuB,EAAE,MAAc,GAIhD/B,GAAuBF,GACzBC,IAAe,EAAK,CAExB,EAEA,OAAAM,GAAQ,GAAG,aAAcyB,CAAiB,EAE1C,SAAS,iBAAiB,YAAaE,EAAqB,EAAK,EAE1D,IAAM,CACX3B,GAAQ,IAAI,aAAcyB,CAAiB,EAC3C,SAAS,oBAAoB,YAAaE,EAAqB,EAAK,CACtE,CACF,EAAG,CAAC3B,EAAQL,EAAqBD,EAAcD,CAAI,CAAC,EAGlDmC,EAAAA,KAAAC,EAAAA,SAAA,CACG,SAAAtB,CAAAA,EACAd,GACCqC,EAACC,IAAAA,UAAA,CACC,UAAWC,EAAAA,QAAQ,WAAYzC,CAAS,EACxC,IAAKY,EACL,QAASuB,GAAK,CACZA,EAAE,gBAAgB,EAClBA,EAAE,eACJ,CAAA,EAEC,SAAA9B,CAAAA,CACH,CAEJ,CAAA,CAAA,CAEJ,CACF"}
+{"version":3,"file":"index.cjs","sources":["../../../../src/components/Control/index.tsx"],"sourcesContent":["import { computePosition, flip, offset, shift, ComputePositionConfig } from '@floating-ui/core'\nimport type { FabricObject, FabricObjectProps, TPointerEvent, TPointerEventInfo } from 'fabric'\nimport { util } from 'fabric'\nimport type { ReactNode } from 'react'\nimport { useMemo } from 'react'\nimport { useCallback } from 'react'\nimport { useRef } from 'react'\nimport { useEffect } from 'react'\nimport React from 'react'\nimport { useStore } from '../../hooks/useStore'\nimport type { AllObjectEvents } from '../../types/object'\nimport NodeToolbarPortal from '../NodeToolbarPortal'\n\n/**\n * @desc 不能内置支持 selected , 因为需要 rect 开启 lockMovementX lockMovementY, 这样支持的场景就受限了\n */\nexport type ControlProps = 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    }: ControlProps,\n    forwardRef,\n  ) => {\n    const instanceRef = useRef<FabricObject | undefined>(undefined)\n    const canvas = useStore(state => state.canvas)\n    const floatingElRef = useRef<HTMLDivElement>(null)\n\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      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    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    return (\n      <>\n        {newChildren}\n        {open && (\n          <NodeToolbarPortal\n            className={`absolute ${className}`}\n            ref={floatingElRef}\n            onClick={e => {\n              e.stopPropagation()\n              e.preventDefault()\n            }}\n          >\n            {Content}\n          </NodeToolbarPortal>\n        )}\n      </>\n    )\n  },\n)\n\nexport default Control\n"],"names":["Control","React","children","className","placement","open","onOpenChange","closeOnOutsideClick","Content","forwardRef","instanceRef","useRef","canvas","useStore","state","floatingElRef","refCallback","useCallback","node","newChildren","useMemo","updatePosition","floatingRect","viewportCoords","point","util","platform","data","element","virtualEl","computePosition","offset","flip","shift","x","y","useEffect","handleCanvasClick","e","handleDocumentClick","jsxs","Fragment","jsx","NodeToolbarPortal"],"mappings":"+PA0BA,MAAMA,EAAUC,EAAM,WACpB,CACE,CACE,SAAAC,EACA,UAAAC,EACA,UAAAC,EAAY,SACZ,KAAAC,EAAO,GACP,aAAAC,EACA,oBAAAC,EAAsB,GACtB,QAAAC,CACF,EACAC,IACG,CACH,MAAMC,EAAcC,EAAAA,OAAiC,MAAS,EACxDC,EAASC,WAASC,GAASA,EAAM,MAAM,EACvCC,EAAgBJ,SAAuB,IAAI,EAG3CK,EAAcC,EAAAA,YACjBC,GAAc,CAETA,IAASR,EAAY,UACvBA,EAAY,QAAUQ,EAGlB,OAAOT,GAAe,WACxBA,EAAWS,CAAI,EACNT,IACTA,EAAW,QAAUS,GAG3B,EACA,CAACT,CAAU,CACb,EAGMU,EAAcC,EAAAA,QAAQ,IACtBnB,EAAM,SAAS,KAAKC,CAAQ,GAAKD,EAAM,eAAeC,CAAQ,EACzDD,EAAM,aAAaC,EAAU,CAClC,IAAKc,EACL,GAAGd,EAAS,KACd,CAAC,EAEIA,EACN,CAACA,EAAUc,CAAW,CAAC,EAEpBK,EAAiBJ,EAAY,YAAA,IAAM,CACvC,GAAI,CAACP,EAAY,SAAW,CAACK,EAAc,SAAW,CAACH,EACrD,OAIF,MAAMU,EAAeP,EAAc,QAAQ,wBAC3C,GAAIO,EAAa,QAAU,GAAKA,EAAa,SAAW,EAAG,CAEzD,sBAAsBD,CAAc,EACpC,MACF,CAGA,MAAME,EADcb,EAAY,QAAQ,YACL,IAAIc,GAASC,EAAK,KAAA,iBAAiBD,EAAOZ,EAAO,kBAAmB,MAAS,CAAC,EAE3Gc,EAAW,CACf,gBAAkBC,GAAcA,EAChC,cAAgBC,GAAiBA,EACjC,gBAAiB,KAAO,CACtB,EAAG,EACH,EAAG,EACH,MAAOhB,EAAO,MACd,OAAQA,EAAO,MACjB,EACF,EAEMiB,EAAY,CAChB,EAAGN,EAAe,CAAC,EAAE,EACrB,EAAGA,EAAe,CAAC,EAAE,EACrB,MAAOA,EAAe,CAAC,EAAE,EAAIA,EAAe,CAAC,EAAE,EAC/C,OAAQA,EAAe,CAAC,EAAE,EAAIA,EAAe,CAAC,EAAE,CAClD,EAEAO,EAAAA,gBAAgBD,EAAWd,EAAc,QAAQ,wBAAyB,CACxE,SAAAW,EACA,UAAAtB,EACA,WAAY,CAAC2B,SAAO,CAAC,EAAGC,EAAAA,KAAK,EAAGC,QAAM,CAAE,QAAS,CAAE,CAAC,CAAC,CACvD,CAAC,EAAE,KAAK,CAAC,CAAE,EAAAC,EAAG,EAAAC,CAAE,IAAM,CACfpB,EAAc,SAEnB,OAAO,OAAOA,EAAc,QAAQ,MAAO,CACzC,KAAM,GAAGmB,CAAC,KACV,IAAK,GAAGC,CAAC,IACX,CAAC,CACH,CAAC,CACH,EAAG,CAACvB,EAAQR,CAAS,CAAC,EAGtB,OAAAgC,EAAAA,UAAU,IAAM,CACV/B,GACF,sBAAsBgB,CAAc,CAExC,EAAG,CAAChB,EAAMgB,CAAc,CAAC,EAEzBe,EAAAA,UAAU,KACRxB,GAAQ,GAAG,eAAgBS,CAAc,EAElC,IAAM,CACXT,GAAQ,IAAI,eAAgBS,CAAc,CAC5C,GACC,CAACT,EAAQS,CAAc,CAAC,EAE3Be,EAAAA,UAAU,IAAM,CACd,MAAMC,EAAqBC,GAAwC,CAEjEA,EAAE,EAAE,gBAAgB,EACpBA,EAAE,EAAE,iBAGAA,EAAE,SAAW5B,EAAY,QAC3BJ,IAAe,CAACD,CAAI,EAGbA,GACPC,IAAe,EAAK,CAExB,EAEMiC,EAAuBD,GAAkB,CAEzCvB,EAAc,SAAS,SAASuB,EAAE,MAAc,GAIhD/B,GAAuBF,GACzBC,IAAe,EAAK,CAExB,EAEA,OAAAM,GAAQ,GAAG,aAAcyB,CAAiB,EAE1C,SAAS,iBAAiB,YAAaE,EAAqB,EAAK,EAE1D,IAAM,CACX3B,GAAQ,IAAI,aAAcyB,CAAiB,EAC3C,SAAS,oBAAoB,YAAaE,EAAqB,EAAK,CACtE,CACF,EAAG,CAAC3B,EAAQL,EAAqBD,EAAcD,CAAI,CAAC,EAGlDmC,EAAAA,KAAAC,EAAAA,SAAA,CACG,SAAA,CAAAtB,EACAd,GACCqC,EAAAA,IAACC,UAAA,CACC,UAAW,YAAYxC,CAAS,GAChC,IAAKY,EACL,QAASuB,GAAK,CACZA,EAAE,gBAAgB,EAClBA,EAAE,eACJ,CAAA,EAEC,SAAA9B,CAAAA,CACH,CAEJ,CAAA,CAAA,CAEJ,CACF"}

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

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var o=require("fabric"),e=require("react"),p=require("../../hooks/useCreateObject.cjs"),n=require("../../hooks/useSplitProps.cjs");const c=e.forwardRef(({group:t,...u},s)=>{const[a,i,l]=n.useSplitProps(u),r=p.useCreateObject({Constructor:o.Ellipse,defaultValues:l,attributes:i,group:t,listeners:a});return e.useImperativeHandle(s,()=>r,[r]),null});var d=e.memo(c);exports.default=d;
+"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;
 //# 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 { forwardRef, memo, useImperativeHandle } from 'react'\nimport { useCreateObject } from '../../hooks/useCreateObject'\nimport { useSplitProps } from '../../hooks/useSplitProps'\nimport type { AllObjectEvents } from '../../types/object'\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} & T\n\nconst Ellipse = forwardRef<BaseEllipse | undefined, EllipseProps>(({ group, ...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\n  useImperativeHandle(ref, () => instance, [instance])\n\n  return null\n})\n\nexport default memo(Ellipse)\n"],"names":["Ellipse","forwardRef","group","props","ref","listeners","attributes","defaultValues","useSplitProps","instance","useCreateObject","BaseEllipse","useImperativeHandle","memo"],"mappings":"uMAeA,MAAMA,EAAUC,EAAAA,WAAkD,CAAC,CAAE,MAAAC,EAAO,GAAGC,CAAM,EAAGC,IAAQ,CAC9F,KAAM,CAACC,EAAWC,EAAYC,CAAa,EAAIC,EAAAA,cAAcL,CAAK,EAE5DM,EAAWC,kBAAgB,CAC/B,YAAaC,EAAAA,QACb,cAAAJ,EACA,WAAAD,EACA,MAAAJ,EACA,UAAAG,CACF,CAAC,EAED,OAAAO,EAAAA,oBAAoBR,EAAK,IAAMK,EAAU,CAACA,CAAQ,CAAC,EAE5C,IACT,CAAC,EAED,MAAeI,OAAKb,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 { 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"}

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

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var l=require("react/jsx-runtime"),v=require("fabric"),r=require("react"),p=require("../../hooks/useDidUpdate.cjs"),f=require("../../hooks/useSplitProps.cjs"),m=require("../../hooks/useStore.cjs"),S=require("../../utils/events.cjs");const q=r.memo(({children:c,controlsVisibility:u,...d})=>{const s=m.useStoreApi(),[e,n]=r.useState(null),[a,i]=f.useSplitProps(d);return r.useLayoutEffect(()=>{const t=new v.Group([],{...i});return n(t),()=>{const{canvas:o}=s.getState();t&&o&&o.remove(t),n(null)}},[s]),r.useEffect(()=>{const{canvas:t}=s.getState();!e||!t||t.add(e)},[s,e]),r.useEffect(()=>e?S.bindEvents(e,a):void 0,[e,a]),r.useEffect(()=>{!e||!u||e.setControlsVisibility(u)},[e,u]),p.useDidUpdate(()=>{const{canvas:t}=s.getState();!e||!t||(e.set(i),e.setCoords(),t.requestRenderAll())},[i]),l.jsx(l.Fragment,{children:e&&r.Children.map(c,t=>r.isValidElement(t)?r.cloneElement(t,{group:e}):null)})});exports.default=q;
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var l=require("react/jsx-runtime"),v=require("fabric"),r=require("react"),p=require("../../hooks/useDidUpdate.cjs"),f=require("../../hooks/useSplitProps.cjs"),S=require("../../hooks/useStore.cjs"),m=require("../../utils/events.cjs");const q=r.memo(({children:c,controlsVisibility:u,...d})=>{const s=S.useStoreApi(),[e,n]=r.useState(null),[a,i]=f.useSplitProps(d);return r.useLayoutEffect(()=>{const t=new v.Group([],{...i});return n(t),()=>{const{canvas:o}=s.getState();t&&o&&o.remove(t),n(null)}},[s]),r.useEffect(()=>{const{canvas:t}=s.getState();!e||!t||t.add(e)},[s,e]),r.useEffect(()=>e?m.bindEvents(e,a):void 0,[e,a]),r.useEffect(()=>{!e||!u||e.setControlsVisibility(u)},[e,u]),p.useDidUpdate(()=>{const{canvas:t}=s.getState();!e||!t||(e.set(i),e.setCoords(),t.requestRenderAll())},[i]),l.jsx(l.Fragment,{children:e&&r.Children.map(c,t=>r.isValidElement(t)?r.cloneElement(t,{group:e}):null)})});exports.default=q;
 //# sourceMappingURL=index.cjs.map

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

@@ -0,0 +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;
+//# sourceMappingURL=index.cjs.map

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

@@ -0,0 +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"}

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

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var v=require("fabric"),e=require("react"),l=require("../../hooks/useDidUpdate.cjs"),p=require("../../hooks/useStore.cjs");const R=e.forwardRef(({group:a,src:c,onLoad:o,...t},m)=>{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 v.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]),l.useDidUpdate(()=>{const{canvas:n}=u.getState();r.current&&(r.current.set(t),r.current.setCoords(),n?.requestRenderAll())},[t,u]),e.useImperativeHandle(m,()=>({instance:r.current})),null});var g=e.memo(R);exports.default=g;
+"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;
 //# 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, Canvas } 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,\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,EAAAA,OAAoB,EAClCC,EAAYD,EAAAA,OAAOJ,CAAM,EACzBM,EAAQC,EAAAA,YACRC,EAAAA,EAAaJ,SAAOH,CAAO,EAGjC,OAAAQ,EAAU,UAAA,IAAM,CACdJ,EAAU,QAAUL,EACpBQ,EAAW,QAAUP,CACvB,CAAC,EAGDQ,EAAAA,UAAU,IAAM,CACd,KAAM,CAAE,OAAAC,CAAO,EAAIJ,EAAM,SAAS,EAClC,GAAI,CAACI,GAAQ,WAAc,EAAA,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,EAAAA,aAAa,IAAM,CACjB,KAAM,CAAE,OAAAJ,CAAO,EAAIJ,EAAM,WAErBH,EAAY,UACdA,EAAY,QAAQ,IAAIF,CAAO,EAC/BE,EAAY,QAAQ,UAAA,EACpBO,GAAQ,iBAEZ,EAAA,EAAG,CAACT,EAASK,CAAK,CAAC,EAEnBS,EAAAA,oBAAoBb,EAAK,KAAO,CAC9B,SAAUC,EAAY,OACxB,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 } 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"}

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

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var c=require("fabric"),e=require("react"),v=require("../../hooks/useCreateObject.cjs"),b=require("../../hooks/useSplitProps.cjs");const f=e.forwardRef(({group:t,x1:u,y1:a,x2:s,y2:i,...o},l)=>{const[n,p]=b.useSplitProps(o),r=v.useCreateObject({Constructor:c.Line,param:[u,a,s,i],attributes:p,group:t,listeners:n});return e.useImperativeHandle(l,()=>r,[r]),null});var m=e.memo(f);exports.default=m;
+"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;
 //# 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 { forwardRef, memo, useImperativeHandle } from 'react'\nimport { useCreateObject } from '../../hooks/useCreateObject'\nimport { useSplitProps } from '../../hooks/useSplitProps'\nimport type { AllObjectEvents } from '../../types/object'\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} & T\n\nconst Line = forwardRef<Handle, LineProps>(({ group, x1, y1, x2, y2, ...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 null\n})\n\nexport default memo(Line)\n"],"names":["Line","forwardRef","group","x1","y1","x2","y2","props","ref","listeners","attributes","useSplitProps","instance","useCreateObject","BaseLine","useImperativeHandle","memo"],"mappings":"uMAcA,MAAMA,EAAOC,aAA8B,CAAC,CAAE,MAAAC,EAAO,GAAAC,EAAI,GAAAC,EAAI,GAAAC,EAAI,GAAAC,EAAI,GAAGC,CAAM,EAAGC,IAAQ,CACvF,KAAM,CAACC,EAAWC,CAAU,EAAIC,gBAAcJ,CAAK,EAE7CK,EAAWC,EAAAA,gBAAgB,CAC/B,YAAaC,EAAAA,KACb,MAAO,CAACX,EAAIC,EAAIC,EAAIC,CAAE,EACtB,WAAAI,EACA,MAAAR,EACA,UAAAO,CACF,CAAC,EAED,OAAAM,EAAAA,oBAAoBP,EAAK,IAAMI,EAAU,CAACA,CAAQ,CAAC,EAE5C,IACT,CAAC,EAED,IAAeI,EAAAA,EAAAA,KAAKhB,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 { 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"}

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

@@ -0,0 +1,2 @@
+"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;
+//# sourceMappingURL=index.cjs.map

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

@@ -0,0 +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"}

package/dist/cjs/components/NodeToolbarPortal/index.cjs

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var i=require("react-dom"),d=require("tailwind-merge"),u=require("react"),f=require("../../hooks/useStore.cjs");const v=a=>a.domNode?.querySelector(".react-fabric__canvas"),m=u.forwardRef(({children:a,className:l,onClick:n},t)=>{const o=f.useStore(v),e=u.useRef(),s=u.useCallback(r=>{r!==e.current&&(e.current=r||void 0,typeof t=="function"?t(r):t&&(t.current=r))},[t]);if(u.useEffect(()=>()=>{e.current&&(e.current.remove(),e.current=void 0)},[]),!o||e.current)return e.current?i.createPortal(a,e.current):null;const c=document.createElement("div");return c.className=d.twMerge("react-fabric__portal",l),n&&c.addEventListener("click",r=>{r.stopPropagation(),n(r)}),o.appendChild(c),s(c),i.createPortal(a,c)});exports.default=m;
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var i=require("react-dom"),a=require("react"),d=require("../../hooks/useStore.cjs");const f=u=>u.domNode?.querySelector(".react-fabric__canvas"),v=a.forwardRef(({children:u,className:l,onClick:n},t)=>{const o=d.useStore(f),e=a.useRef(),s=a.useCallback(r=>{r!==e.current&&(e.current=r||void 0,typeof t=="function"?t(r):t&&(t.current=r))},[t]);if(a.useEffect(()=>()=>{e.current&&(e.current.remove(),e.current=void 0)},[]),!o||e.current)return e.current?i.createPortal(u,e.current):null;const c=document.createElement("div");return c.className=`react-fabric__portal ${l}`,n&&c.addEventListener("click",r=>{r.stopPropagation(),n(r)}),o.appendChild(c),s(c),i.createPortal(u,c)});exports.default=v;
 //# sourceMappingURL=index.cjs.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.cjs","sources":["../../../../src/components/NodeToolbarPortal/index.tsx"],"sourcesContent":["import { createPortal } from 'react-dom'\nimport { twMerge } from 'tailwind-merge'\nimport type { ReactNode } from 'react'\nimport { forwardRef, useCallback, useEffect, useRef } from 'react'\nimport { useStore } from '../../hooks/useStore'\nimport type { ReactFabricState } from '../../types/store'\n\nconst selector = (state: ReactFabricState) => state.domNode?.querySelector('.react-fabric__canvas')\n\ninterface Props {\n  children: ReactNode\n  className?: string\n  onClick?: (e: React.MouseEvent) => void\n}\n\nconst NodeToolbarPortal = forwardRef<HTMLDivElement, Props>(({ children, className, onClick }, forwardRef) => {\n  const wrapperRef = useStore(selector)\n  const containerRef = useRef<HTMLDivElement>()\n\n  // 使用 useCallback 创建稳定的 ref 回调\n  const refCallback = useCallback(\n    (node: HTMLDivElement | null) => {\n      if (node !== containerRef.current) {\n        containerRef.current = node || undefined\n\n        if (typeof forwardRef === 'function') {\n          forwardRef(node)\n        } else if (forwardRef) {\n          forwardRef.current = node\n        }\n      }\n    },\n    [forwardRef],\n  )\n\n  // 组件卸载时清理\n  useEffect(() => {\n    return () => {\n      if (containerRef.current) {\n        containerRef.current.remove()\n        containerRef.current = undefined\n      }\n    }\n  }, [])\n\n  // 如果已经有 container 或没有 wrapper，直接返回\n  if (!wrapperRef || containerRef.current) {\n    return containerRef.current ? createPortal(children, containerRef.current) : null\n  }\n\n  // 创建 DOM 元素\n  const div = document.createElement('div')\n  div.className = twMerge('react-fabric__portal', className)\n  if (onClick) {\n    div.addEventListener('click', e => {\n      e.stopPropagation()\n      onClick(e as any)\n    })\n  }\n  wrapperRef.appendChild(div)\n  refCallback(div)\n\n  return createPortal(children, div)\n})\n\nexport default NodeToolbarPortal\n"],"names":["selector","state","NodeToolbarPortal","forwardRef","children","className","onClick","wrapperRef","useStore","containerRef","useRef","refCallback","useCallback","node","useEffect","createPortal","div","twMerge","e"],"mappings":"oLAOA,MAAMA,EAAYC,GAA4BA,EAAM,SAAS,cAAc,uBAAuB,EAQ5FC,EAAoBC,EAAkC,WAAA,CAAC,CAAE,SAAAC,EAAU,UAAAC,EAAW,QAAAC,CAAQ,EAAGH,IAAe,CAC5G,MAAMI,EAAaC,EAASR,SAAAA,CAAQ,EAC9BS,EAAeC,EAAAA,OAAAA,EAGfC,EAAcC,EAAAA,YACjBC,GAAgC,CAC3BA,IAASJ,EAAa,UACxBA,EAAa,QAAUI,GAAQ,OAE3B,OAAOV,GAAe,WACxBA,EAAWU,CAAI,EACNV,IACTA,EAAW,QAAUU,GAG3B,EACA,CAACV,CAAU,CACb,EAaA,GAVAW,EAAAA,UAAU,IACD,IAAM,CACPL,EAAa,UACfA,EAAa,QAAQ,SACrBA,EAAa,QAAU,OAE3B,EACC,CAAA,CAAE,EAGD,CAACF,GAAcE,EAAa,QAC9B,OAAOA,EAAa,QAAUM,EAAAA,aAAaX,EAAUK,EAAa,OAAO,EAAI,KAI/E,MAAMO,EAAM,SAAS,cAAc,KAAK,EACxC,OAAAA,EAAI,UAAYC,EAAAA,QAAQ,uBAAwBZ,CAAS,EACrDC,GACFU,EAAI,iBAAiB,QAASE,GAAK,CACjCA,EAAE,gBACFZ,EAAAA,EAAQY,CAAQ,CAClB,CAAC,EAEHX,EAAW,YAAYS,CAAG,EAC1BL,EAAYK,CAAG,EAERD,EAAAA,aAAaX,EAAUY,CAAG,CACnC,CAAC"}
+{"version":3,"file":"index.cjs","sources":["../../../../src/components/NodeToolbarPortal/index.tsx"],"sourcesContent":["import { createPortal } from 'react-dom'\nimport type { ReactNode } from 'react'\nimport { forwardRef, useCallback, useEffect, useRef } from 'react'\nimport { useStore } from '../../hooks/useStore'\nimport type { ReactFabricState } from '../../types/store'\n\nconst selector = (state: ReactFabricState) => state.domNode?.querySelector('.react-fabric__canvas')\n\ninterface Props {\n  children: ReactNode\n  className?: string\n  onClick?: (e: React.MouseEvent) => void\n}\n\nconst NodeToolbarPortal = forwardRef<HTMLDivElement, Props>(({ children, className, onClick }, forwardRef) => {\n  const wrapperRef = useStore(selector)\n  const containerRef = useRef<HTMLDivElement>()\n\n  // 使用 useCallback 创建稳定的 ref 回调\n  const refCallback = useCallback(\n    (node: HTMLDivElement | null) => {\n      if (node !== containerRef.current) {\n        containerRef.current = node || undefined\n\n        if (typeof forwardRef === 'function') {\n          forwardRef(node)\n        } else if (forwardRef) {\n          forwardRef.current = node\n        }\n      }\n    },\n    [forwardRef],\n  )\n\n  // 组件卸载时清理\n  useEffect(() => {\n    return () => {\n      if (containerRef.current) {\n        containerRef.current.remove()\n        containerRef.current = undefined\n      }\n    }\n  }, [])\n\n  // 如果已经有 container 或没有 wrapper，直接返回\n  if (!wrapperRef || containerRef.current) {\n    return containerRef.current ? createPortal(children, containerRef.current) : null\n  }\n\n  // 创建 DOM 元素\n  const div = document.createElement('div')\n  div.className = `react-fabric__portal ${className}`\n  if (onClick) {\n    div.addEventListener('click', e => {\n      e.stopPropagation()\n      onClick(e as any)\n    })\n  }\n  wrapperRef.appendChild(div)\n  refCallback(div)\n\n  return createPortal(children, div)\n})\n\nexport default NodeToolbarPortal\n"],"names":["selector","state","NodeToolbarPortal","forwardRef","children","className","onClick","wrapperRef","useStore","containerRef","useRef","refCallback","useCallback","node","useEffect","createPortal","div","e"],"mappings":"wJAMA,MAAMA,EAAYC,GAA4BA,EAAM,SAAS,cAAc,uBAAuB,EAQ5FC,EAAoBC,EAAAA,WAAkC,CAAC,CAAE,SAAAC,EAAU,UAAAC,EAAW,QAAAC,CAAQ,EAAGH,IAAe,CAC5G,MAAMI,EAAaC,WAASR,CAAQ,EAC9BS,EAAeC,EAAAA,OAAAA,EAGfC,EAAcC,EAAAA,YACjBC,GAAgC,CAC3BA,IAASJ,EAAa,UACxBA,EAAa,QAAUI,GAAQ,OAE3B,OAAOV,GAAe,WACxBA,EAAWU,CAAI,EACNV,IACTA,EAAW,QAAUU,GAG3B,EACA,CAACV,CAAU,CACb,EAaA,GAVAW,EAAAA,UAAU,IACD,IAAM,CACPL,EAAa,UACfA,EAAa,QAAQ,SACrBA,EAAa,QAAU,OAE3B,EACC,CAAA,CAAE,EAGD,CAACF,GAAcE,EAAa,QAC9B,OAAOA,EAAa,QAAUM,EAAAA,aAAaX,EAAUK,EAAa,OAAO,EAAI,KAI/E,MAAMO,EAAM,SAAS,cAAc,KAAK,EACxC,OAAAA,EAAI,UAAY,wBAAwBX,CAAS,GAC7CC,GACFU,EAAI,iBAAiB,QAASC,GAAK,CACjCA,EAAE,gBACFX,EAAAA,EAAQW,CAAQ,CAClB,CAAC,EAEHV,EAAW,YAAYS,CAAG,EAC1BL,EAAYK,CAAG,EAERD,EAAAA,aAAaX,EAAUY,CAAG,CACnC,CAAC"}

package/dist/cjs/components/Objects/index.cjs

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),l=require("react"),d=require("../Path/index.cjs"),u=require("../Text/index.cjs"),s=require("../Rect/index.cjs"),o=require("../Line/index.cjs");const x=({objects:r})=>{const a={rect:s.default,path:d.default,text:u.default,line:o.default,"i-text":u.default};return r?e.jsx(e.Fragment,{children:r?.map(({type:n,...i})=>{const t=a[n.toLowerCase()];return t?e.jsx(t,{...i}):null})}):null};var c=l.memo(x);exports.default=c;
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),d=require("react"),l=require("../Path/index.cjs"),u=require("../Text/index.cjs"),x=require("../Rect/index.cjs"),s=require("../Line/index.cjs"),o=require("../IText/index.cjs");const v=({objects:r})=>{const a={rect:x.default,path:l.default,text:u.default,line:s.default,"i-text":u.default,itext:o.default};return r?e.jsx(e.Fragment,{children:r?.map(({type:i,...n})=>{const t=a[i.toLowerCase()];return t?e.jsx(t,{...n}):null})}):null};var c=d.memo(v);exports.default=c;
 //# sourceMappingURL=index.cjs.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.cjs","sources":["../../../../src/components/Objects/index.tsx"],"sourcesContent":["import { memo } from 'react'\nimport Path from '../Path'\nimport Text from '../Text'\nimport Rect from '../Rect'\nimport Line from '../Line'\n\nexport type ObjectsProps = {\n  objects: { type: string; [index: string]: any }[]\n}\n\nconst Objects = ({ objects }: ObjectsProps) => {\n  const components = {\n    rect: Rect,\n    path: Path,\n    text: Text,\n    line: Line,\n    'i-text': Text,\n  }\n\n  if (!objects) return null\n  return (\n    <>\n      {objects?.map(({ type, ...options }) => {\n        // @ts-expect-error\n        const Component = components[type.toLowerCase()]\n        if (!Component) {\n         \n          return null\n        }\n        return <Component {...options} />\n      })}\n    </>\n  )\n}\n\nexport default memo(Objects)\n"],"names":["Objects","objects","components","Rect","Path","Text","Line","jsx","Fragment","type","options","Component","memo"],"mappings":"sPAUA,MAAMA,EAAU,CAAC,CAAE,QAAAC,CAAQ,IAAoB,CAC7C,MAAMC,EAAa,CACjB,KAAMC,UACN,KAAMC,EAAAA,QACN,KAAMC,EAAAA,QACN,KAAMC,EAAAA,QACN,SAAUD,SACZ,EAEA,OAAKJ,EAEHM,MAAAC,EAAAA,SAAA,CACG,SAAAP,GAAS,IAAI,CAAC,CAAE,KAAAQ,EAAM,GAAGC,CAAQ,IAAM,CAEtC,MAAMC,EAAYT,EAAWO,EAAK,YAAA,CAAa,EAC/C,OAAKE,EAIEJ,EAACI,IAAAA,EAAA,CAAW,GAAGD,CAAAA,CAAS,EAFtB,IAGX,CAAC,CACH,CAAA,EAZmB,IAcvB,EAEA,IAAeE,EAAAA,EAAAA,KAAKZ,CAAO"}
+{"version":3,"file":"index.cjs","sources":["../../../../src/components/Objects/index.tsx"],"sourcesContent":["import { memo } from 'react'\nimport Path from '../Path'\nimport Text from '../Text'\nimport Rect from '../Rect'\nimport Line from '../Line'\nimport IText from '../IText'\n\nexport type ObjectsProps = {\n  objects: { type: string;[index: string]: any }[]\n}\n\nconst Objects = ({ objects }: ObjectsProps) => {\n  const components = {\n    rect: Rect,\n    path: Path,\n    text: Text,\n    line: Line,\n    'i-text': Text,\n    itext: IText,\n  }\n\n  if (!objects) return null\n  return (\n    <>\n      {objects?.map(({ type, ...options }) => {\n        const Component = components[type.toLowerCase() as keyof typeof components]\n        if (!Component) {\n          return null\n        }\n        return <Component {...options} />\n      })}\n    </>\n  )\n}\n\nexport default memo(Objects)\n"],"names":["Objects","objects","components","Rect","Path","Text","Line","IText","jsx","Fragment","type","options","Component","memo"],"mappings":"sRAWA,MAAMA,EAAU,CAAC,CAAE,QAAAC,CAAQ,IAAoB,CAC7C,MAAMC,EAAa,CACjB,KAAMC,EAAAA,QACN,KAAMC,UACN,KAAMC,UACN,KAAMC,EACN,QAAA,SAAUD,EAAAA,QACV,MAAOE,EAAAA,OACT,EAEA,OAAKN,EAEHO,EAAAA,IAAAC,EAAAA,SAAA,CACG,SAAAR,GAAS,IAAI,CAAC,CAAE,KAAAS,EAAM,GAAGC,CAAQ,IAAM,CACtC,MAAMC,EAAYV,EAAWQ,EAAK,YAAwC,CAAA,EAC1E,OAAKE,EAGEJ,EAAAA,IAACI,EAAA,CAAW,GAAGD,EAAS,EAFtB,IAGX,CAAC,CACH,CAAA,EAVmB,IAYvB,EAEA,IAAeE,EAAAA,EAAAA,KAAKb,CAAO"}

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

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var p=require("fabric"),e=require("react"),l=require("../../hooks/useCreateObject.cjs"),c=require("../../hooks/useSplitProps.cjs");const n=e.forwardRef(({group:t,path:u="M 0 0",...a},s)=>{const[i,o]=c.useSplitProps(a),r=l.useCreateObject({Constructor:p.Path,param:u,attributes:o,group:t,listeners:i});return e.useImperativeHandle(s,()=>r,[r]),null});var v=e.memo(n);exports.default=v;
+"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;
 //# 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 { forwardRef, memo, useImperativeHandle } from 'react'\nimport { useCreateObject } from '../../hooks/useCreateObject'\nimport { useSplitProps } from '../../hooks/useSplitProps'\nimport type { AllObjectEvents } from '../../types/object'\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} & T\n\nconst Path = forwardRef<Handle, PathProps>(({ group, path = 'M 0 0', ...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 null\n})\n\nexport default memo(Path)\n"],"names":["Path","forwardRef","group","path","props","ref","listeners","attributes","useSplitProps","instance","useCreateObject","BasePath","useImperativeHandle","memo"],"mappings":"uMAcA,MAAMA,EAAOC,EAAAA,WAA8B,CAAC,CAAE,MAAAC,EAAO,KAAAC,EAAO,QAAS,GAAGC,CAAM,EAAGC,IAAQ,CACvF,KAAM,CAACC,EAAWC,CAAU,EAAIC,EAAcJ,cAAAA,CAAK,EAE7CK,EAAWC,EAAAA,gBAAgB,CAC/B,YAAaC,EAAAA,KACb,MAAOR,EACP,WAAAI,EACA,MAAAL,EACA,UAAAI,CACF,CAAC,EAED,OAAAM,EAAoBP,oBAAAA,EAAK,IAAMI,EAAU,CAACA,CAAQ,CAAC,EAE5C,IACT,CAAC,EAED,MAAeI,OAAKb,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 { 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"}

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

@@ -0,0 +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;
+//# sourceMappingURL=index.cjs.map

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

@@ -0,0 +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"}

package/dist/cjs/components/ReactFabricProvider.cjs

@@ -1,2 +1,2 @@
-"use strict";var n=require("react/jsx-runtime"),o=require("react"),u=require("../contexts/StoreContext.cjs"),c=require("../store/index.cjs");function s({initialNodes:e,defaultNodes:i,initialWidth:r,initialHeight:t,children:a}){const[d]=o.useState(()=>c.createStore({nodes:e,defaultNodes:i,width:r,height:t}));return n.jsx(u.Provider,{value:d,children:a})}exports.ReactFabricProvider=s;
+"use strict";var n=require("react/jsx-runtime"),u=require("react"),o=require("../contexts/StoreContext.cjs"),c=require("../store/index.cjs");function s({initialNodes:e,defaultNodes:i,initialWidth:r,initialHeight:t,children:a}){const[d]=u.useState(()=>c.createStore({nodes:e,defaultNodes:i,width:r,height:t}));return n.jsx(o.Provider,{value:d,children:a})}exports.ReactFabricProvider=s;
 //# sourceMappingURL=ReactFabricProvider.cjs.map

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

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var l=require("fabric"),e=require("react"),c=require("../../hooks/useCreateObject.cjs"),p=require("../../hooks/useSplitProps.cjs");const n=e.forwardRef(({group:t,...u},s)=>{const[a,i,o]=p.useSplitProps(u),r=c.useCreateObject({Constructor:l.Rect,defaultValues:o,attributes:i,group:t,listeners:a});return e.useImperativeHandle(s,()=>r,[r]),null});var v=e.memo(n);exports.default=v;
+"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;
 //# 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'\nimport { forwardRef, memo, useImperativeHandle } from 'react'\nimport { useCreateObject } from '../../hooks/useCreateObject'\nimport { useSplitProps } from '../../hooks/useSplitProps'\nimport type { AllObjectEvents } from '../../types/object'\n\nexport type Handle = BaseRect | undefined\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} & T\n\nconst Rect = forwardRef<Handle, RectProps>(({ group, ...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 null\n})\n\nexport default memo(Rect)\n"],"names":["Rect","forwardRef","group","props","ref","listeners","attributes","defaultValues","useSplitProps","instance","useCreateObject","BaseRect","useImperativeHandle","memo"],"mappings":"uMAiBA,MAAMA,EAAOC,EAAAA,WAA8B,CAAC,CAAE,MAAAC,EAAO,GAAGC,CAAM,EAAGC,IAAQ,CACvE,KAAM,CAACC,EAAWC,EAAYC,CAAa,EAAIC,EAAAA,cAAcL,CAAK,EAE5DM,EAAWC,kBAAgB,CAC/B,YAAaC,EAAAA,KACb,cAAAJ,EACA,WAAAD,EACA,MAAAJ,EACA,UAAAG,CACF,CAAC,EAED,OAAAO,EAAAA,oBAAoBR,EAAK,IAAMK,EAAU,CAACA,CAAQ,CAAC,EAE5C,IACT,CAAC,EAED,MAAeI,OAAKb,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'\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"}

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

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var c=require("fabric"),t=require("react"),f=require("../../hooks/useCreateObject.cjs"),m=require("../../hooks/useSplitProps.cjs"),p=require("../../hooks/useStore.cjs"),v=require("fontfaceobserver");const F=t.forwardRef(({group:u,text:a,...i},o)=>{const s=p.useStoreApi(),[n,e]=m.useSplitProps(i),r=f.useCreateObject({Constructor:c.FabricText,param:a,attributes:e,group:u,listeners:n});return t.useEffect(()=>{const{canvas:l}=s.getState();!e.fontFamily||!r||new v(e.fontFamily).load().then(()=>{r.set({fontFamily:e.fontFamily}),l?.requestRenderAll()}).catch(()=>{console.error(`ReactFabric: \u5B57\u4F53\u52A0\u8F7D\u5931\u8D25: ${e.fontFamily}`)})},[e.fontFamily,r]),t.useImperativeHandle(o,()=>r,[r]),null});var d=t.memo(F);exports.default=d;
+"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;
 //# 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 } from 'fabric'\nimport { forwardRef, memo, useEffect, useImperativeHandle } 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'\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} & T\n\nconst Text = forwardRef<Handle, TextProps>(({ group, text, ...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  useImperativeHandle(ref, () => instance, [instance])\n\n  return null\n})\n\nexport default memo(Text)\n"],"names":["Text","forwardRef","group","text","props","ref","store","useStoreApi","listeners","attributes","useSplitProps","instance","useCreateObject","FabricText","useEffect","canvas","FontFaceObserver","useImperativeHandle","memo"],"mappings":"2QAgBA,MAAMA,EAAOC,EAAAA,WAA8B,CAAC,CAAE,MAAAC,EAAO,KAAAC,EAAM,GAAGC,CAAM,EAAGC,IAAQ,CAC7E,MAAMC,EAAQC,EAAAA,cAER,CAACC,EAAWC,CAAU,EAAIC,EAAAA,cAAcN,CAAK,EAE7CO,EAAWC,kBAAgB,CAC/B,YAAaC,aACb,MAAOV,EACP,WAAAM,EACA,MAAAP,EACA,UAAAM,CACF,CAAC,EAKD,OAAAM,EAAAA,UAAU,IAAM,CACd,KAAM,CAAE,OAAAC,CAAO,EAAIT,EAAM,SAAS,EAC9B,CAACG,EAAW,YAAc,CAACE,GAClB,IAAIK,EAAiBP,EAAW,UAAU,EAEpD,OACA,KAAK,IAAM,CACVE,EAAS,IAAI,CACX,WAAYF,EAAW,UACzB,CAAC,EACDM,GAAQ,iBAAA,CACV,CAAC,EACA,MAAM,IAAM,CAEX,QAAQ,MAAM,sDAAwBN,EAAW,UAAU,EAAE,CAC/D,CAAC,CACL,EAAG,CAACA,EAAW,WAAYE,CAAQ,CAAC,EAEpCM,EAAAA,oBAAoBZ,EAAK,IAAMM,EAAU,CAACA,CAAQ,CAAC,EAE5C,IACT,CAAC,EAED,MAAeO,OAAKlB,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 { 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"}

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

@@ -0,0 +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;
+//# sourceMappingURL=index.cjs.map

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

@@ -0,0 +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"}

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

@@ -0,0 +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;
+//# sourceMappingURL=index.cjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.cjs","sources":["../../../../src/components/WavyLine/index.tsx"],"sourcesContent":["/* eslint-disable prefer-const */\nimport type { Group as BaseGroup } from 'fabric'\nimport { Line as BaseLine, 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\ninterface UniqueLineProps {\n  x1: number\n  x2: number\n  y1: number\n  y2: number\n}\n\nclass WavyLineClass extends BaseLine {\n  static type = 'wavyLine'\n\n  constructor(points: any, options = {}) {\n    super(points, options)\n  }\n\n  _render(ctx: any) {\n    /** 参考 Line 源码改造，可能不完整 https://github.com/fabricjs/fabric.js/blob/e114448a1bce9b68a3e1bba337bc0c83a35c1aa5/src/shapes/Line.ts#L29 */\n    ctx.beginPath()\n\n    const p = this.calcLinePoints()\n    const point = this.pointOnLine(this.point(p.x2, p.y2))\n    this.wavy(this.point(p.x1, p.y1), point, ctx)\n    ctx.lineWidth = this.strokeWidth\n    const origStrokeStyle = ctx.strokeStyle\n    ctx.strokeStyle = this.stroke ?? ctx.fillStyle\n    // eslint-disable-next-line @typescript-eslint/no-unused-expressions\n    this.stroke && this._renderStroke(ctx)\n    ctx.strokeStyle = origStrokeStyle\n  }\n\n  point(x: any, y: any) {\n    return {\n      x: x,\n      y: y,\n    }\n  }\n\n  wavy(from: any, to: any, ctx: any) {\n    const wavyWidth = 4 * 3\n    let cx = 0,\n      cy = 0,\n      fx = from.x,\n      fy = from.y,\n      tx = to.x,\n      ty = to.y,\n      i = 0,\n      step = 1,\n      waveOffsetLength = 0,\n      ang = Math.atan2(ty - fy, tx - fx),\n      distance = Math.sqrt((fx - tx) * (fx - tx) + (fy - ty) * (fy - ty)),\n      amplitude = -1 * 2,\n      f = (Math.PI * distance) / wavyWidth\n    for (i; i <= distance; i += step) {\n      waveOffsetLength = Math.sin((i / distance) * f) * amplitude\n      cx = from.x + Math.cos(ang) * i + Math.cos(ang - Math.PI / 2) * waveOffsetLength\n      cy = from.y + Math.sin(ang) * i + Math.sin(ang - Math.PI / 2) * waveOffsetLength\n\n      // eslint-disable-next-line @typescript-eslint/no-unused-expressions\n      i > 0 ? ctx.lineTo(cx, cy) : ctx.moveTo(cx, cy)\n    }\n  }\n\n  pointOnLine(point1: any) {\n    const x3 = point1.x,\n      y3 = point1.y\n    return new Point(x3, y3)\n  }\n\n  calcLinePoints(): UniqueLineProps {\n    const { x1: _x1, x2: _x2, y1: _y1, y2: _y2, width, height } = this\n    const xMult = _x1 <= _x2 ? -1 : 1,\n      yMult = _y1 <= _y2 ? -1 : 1,\n      x1 = (xMult * width) / 2,\n      y1 = (yMult * height) / 2,\n      x2 = (xMult * -width) / 2,\n      y2 = (yMult * -height) / 2\n\n    return {\n      x1,\n      x2,\n      y1,\n      y2,\n    }\n  }\n\n  toObject(propertiesToInclude = []) {\n    const obj = super.toObject(propertiesToInclude)\n    return { ...obj } as any\n  }\n}\n\nexport type WavyLineProps<T = unknown> = Partial<ConstructorParameters<typeof BaseLine>[1] & AllObjectEvents> & {\n  group?: BaseGroup\n  path?: string\n  children?: ReactNode\n} & T\n\nconst WavyLine = forwardRef<BaseLine | undefined, WavyLineProps>(\n  ({ group, x1, y1, x2, y2, children, ...props }, ref) => {\n    const [listeners, attributes] = useSplitProps(props)\n\n    const instance = useCreateObject({\n      Constructor: WavyLineClass,\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)\n\nexport default memo(WavyLine)\n"],"names":["WavyLineClass","BaseLine","points","options","ctx","p","point","origStrokeStyle","x","y","from","to","cx","cy","fx","fy","tx","ty","i","step","waveOffsetLength","ang","distance","amplitude","f","point1","x3","y3","Point","_x1","_x2","_y1","_y2","width","height","xMult","yMult","x1","y1","x2","y2","propertiesToInclude","__publicField","WavyLine","forwardRef","group","children","props","ref","listeners","attributes","useSplitProps","instance","useCreateObject","childrenRef","useChildrenPosition","useImperativeHandle","jsx","Fragment","isValidElement","cloneElement","memo"],"mappings":"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"}

package/dist/cjs/container/ReactFabric/index.cjs

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),o=require("react"),w=require("./Wrapper.cjs"),j=require("../../components/Canvas/index.cjs"),q=require("../../components/StoreUpdater/index.cjs");const y={width:"100%",height:"100%",overflow:"hidden",position:"relative",zIndex:0},D=o.forwardRef(({minManualZoom:r,maxManualZoom:l,className:t,children:i,width:n,height:u,selection:d,style:s,onMouseWheel:c,onMouseDown:m,onMouseMove:h,onMouseUp:M,zoomable:f,defaultSelection:v,defaultCentered:p,defaultDraggable:x,...b},g)=>e.jsx("div",{style:{...s,...y},ref:g,className:`react-fabric ${t||""}`,children:e.jsxs(w.Wrapper,{width:n,height:u,children:[e.jsx(q.StoreUpdater,{minManualZoom:r,maxManualZoom:l,zoomable:f,defaultCentered:p,selection:d,defaultSelection:v,defaultDraggable:x}),e.jsx(j.default,{onMouseDown:m,onMouseMove:h,onMouseUp:M,onMouseWheel:c,...b,children:i})]})})),a=o.memo(D);a.displayName="ReactFabric",exports.default=a;
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),a=require("react"),j=require("./Wrapper.cjs"),w=require("../../components/Canvas/index.cjs"),q=require("../../components/StoreUpdater/index.cjs"),y=require("../../components/Loading/index.cjs");const D={width:"100%",height:"100%",overflow:"hidden",position:"relative",zIndex:0},W=a.forwardRef(({minManualZoom:r,maxManualZoom:i,className:l,children:t,width:n,height:u,selection:d,style:s,onMouseWheel:c,onMouseDown:h,onMouseMove:m,onMouseUp:f,zoomable:M,defaultSelection:v,defaultCentered:x,defaultDraggable:p,...b},g)=>e.jsx("div",{style:{...D,...s},ref:g,className:`react-fabric ${l||""}`,children:e.jsxs(j.Wrapper,{width:n,height:u,children:[e.jsx(q.StoreUpdater,{minManualZoom:r,maxManualZoom:i,zoomable:M,defaultCentered:x,selection:d,defaultSelection:v,defaultDraggable:p}),e.jsx(w.default,{onMouseDown:h,onMouseMove:m,onMouseUp:f,onMouseWheel:c,...b,children:t}),e.jsx(y.default,{})]})})),o=a.memo(W);o.displayName="ReactFabric",exports.default=o;
 //# sourceMappingURL=index.cjs.map

package/dist/cjs/container/ReactFabric/index.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.cjs","sources":["../../../../src/container/ReactFabric/index.tsx"],"sourcesContent":["import type { CSSProperties } from 'react'\nimport { forwardRef, memo } from 'react'\n\n// 自定义基础事件类型\ntype FabricEvent = {\n  e: Event\n  pointer: { x: number; y: number }\n  target?: unknown\n  subTargets?: unknown[]\n  button?: number\n  isClick?: boolean\n  transform?: unknown\n}\n\n// 重新定义 CanvasProps，不再从 components/Canvas 导入\ntype BaseCanvasProps = {\n  width?: number\n  height?: number\n  selection?: boolean\n  children?: React.ReactNode\n  // 添加其他必要的 Canvas 属性\n}\n\nimport { Wrapper } from './Wrapper'\n\nimport Canvas from '../../components/Canvas'\nimport { StoreUpdater } from '../../components/StoreUpdater'\n\nconst wrapperStyle: CSSProperties = {\n  width: '100%',\n  height: '100%',\n  overflow: 'hidden',\n  position: 'relative',\n  zIndex: 0,\n}\n\nexport type ReactFabricProps = BaseCanvasProps & {\n  style?: CSSProperties\n  className?: string\n  zoomable?: boolean\n  minManualZoom?: number\n  maxManualZoom?: number\n  /** 背景图是否默认居中显示\n   * @default false\n   */\n  defaultCentered?: boolean\n  /** 是否启用选择功能\n   * @default true\n   *  */\n  defaultSelection?: boolean\n  /**\n   * 是否默认可拖拽\n   */\n  defaultDraggable?: boolean\n  onMouseDown?: (e: FabricEvent) => void\n  onMouseMove?: (e: FabricEvent) => void\n  onMouseUp?: (e: FabricEvent) => void\n  onMouseWheel?: (e: FabricEvent) => void\n}\n\nconst ForwardReactFabric = forwardRef<HTMLDivElement, ReactFabricProps>(\n  (\n    {\n      minManualZoom,\n      maxManualZoom,\n      className,\n      children,\n      width,\n      height,\n      selection,\n      style,\n      onMouseWheel,\n      onMouseDown,\n      onMouseMove,\n      onMouseUp,\n      zoomable,\n      defaultSelection,\n      defaultCentered,\n      defaultDraggable,\n      ...rest\n    },\n    ref,\n  ) => {\n    return (\n      <div style={{ ...style, ...wrapperStyle }} ref={ref} className={`react-fabric ${className || ''}`}>\n        <Wrapper width={width} height={height}>\n          <StoreUpdater\n            minManualZoom={minManualZoom}\n            maxManualZoom={maxManualZoom}\n            zoomable={zoomable}\n            defaultCentered={defaultCentered}\n            selection={selection}\n            defaultSelection={defaultSelection}\n            defaultDraggable={defaultDraggable}\n          />\n\n          <Canvas\n            onMouseDown={onMouseDown}\n            onMouseMove={onMouseMove}\n            onMouseUp={onMouseUp}\n            onMouseWheel={onMouseWheel}\n            {...rest}\n          >\n            {children}\n          </Canvas>\n        </Wrapper>\n      </div>\n    )\n  },\n)\n\ntype ReactFabricComponent = React.MemoExoticComponent<typeof ForwardReactFabric>\n\nconst ReactFabric: ReactFabricComponent = memo(ForwardReactFabric)\nReactFabric.displayName = 'ReactFabric'\n\nexport default ReactFabric\n"],"names":["wrapperStyle","ForwardReactFabric","forwardRef","minManualZoom","maxManualZoom","className","children","width","height","selection","style","onMouseWheel","onMouseDown","onMouseMove","onMouseUp","zoomable","defaultSelection","defaultCentered","defaultDraggable","rest","ref","jsx","jsxs","Wrapper","StoreUpdater","Canvas","ReactFabric","memo"],"mappings":"+PA4BMA,EAA8B,CAClC,MAAO,OACP,OAAQ,OACR,SAAU,SACV,SAAU,WACV,OAAQ,CACV,EA0BMC,EAAqBC,EAAAA,WACzB,CACE,CACE,cAAAC,EACA,cAAAC,EACA,UAAAC,EACA,SAAAC,EACA,MAAAC,EACA,OAAAC,EACA,UAAAC,EACA,MAAAC,EACA,aAAAC,EACA,YAAAC,EACA,YAAAC,EACA,UAAAC,EACA,SAAAC,EACA,iBAAAC,EACA,gBAAAC,EACA,iBAAAC,EACA,GAAGC,CACL,EACAC,IAGEC,EAAC,IAAA,MAAA,CAAI,MAAO,CAAE,GAAGX,EAAO,GAAGV,CAAa,EAAG,IAAKoB,EAAK,UAAW,gBAAgBf,GAAa,EAAE,GAC7F,SAAAiB,EAAAA,KAACC,EAAAA,QAAA,CAAQ,MAAOhB,EAAO,OAAQC,EAC7B,SAAA,CAAAa,MAACG,eAAA,CACC,cAAerB,EACf,cAAeC,EACf,SAAUW,EACV,gBAAiBE,EACjB,UAAWR,EACX,iBAAkBO,EAClB,iBAAkBE,CAAAA,CACpB,EAEAG,EAAAA,IAACI,EAAAA,QAAA,CACC,YAAab,EACb,YAAaC,EACb,UAAWC,EACX,aAAcH,EACb,GAAGQ,EAEH,SAAAb,CAAAA,CACH,GACF,CACF,CAAA,CAGN,EAIMoB,EAAoCC,OAAK1B,CAAkB,EACjEyB,EAAY,YAAc"}
+{"version":3,"file":"index.cjs","sources":["../../../../src/container/ReactFabric/index.tsx"],"sourcesContent":["import type { CSSProperties } from 'react'\nimport { forwardRef, memo } from 'react'\nimport { Wrapper } from './Wrapper'\nimport Canvas from '../../components/Canvas'\nimport { StoreUpdater } from '../../components/StoreUpdater'\nimport Loading from '../../components/Loading'\n\n// 自定义基础事件类型\ntype FabricEvent = {\n  e: Event\n  pointer: { x: number; y: number }\n  target?: unknown\n  subTargets?: unknown[]\n  button?: number\n  isClick?: boolean\n  transform?: unknown\n}\n\n// 重新定义 CanvasProps，不再从 components/Canvas 导入\ntype BaseCanvasProps = {\n  width?: number\n  height?: number\n  selection?: boolean\n  children?: React.ReactNode\n  // 添加其他必要的 Canvas 属性\n}\n\nconst wrapperStyle: CSSProperties = {\n  width: '100%',\n  height: '100%',\n  overflow: 'hidden',\n  position: 'relative',\n  zIndex: 0,\n}\n\nexport type ReactFabricProps = BaseCanvasProps & {\n  style?: CSSProperties\n  className?: string\n  zoomable?: boolean\n  minManualZoom?: number\n  maxManualZoom?: number\n  /** 背景图是否默认居中显示\n   * @default false\n   */\n  defaultCentered?: boolean\n  /** 是否启用选择功能\n   * @default true\n   *  */\n  defaultSelection?: boolean\n  /**\n   * 是否默认可拖拽\n   */\n  defaultDraggable?: boolean\n  onMouseDown?: (e: FabricEvent) => void\n  onMouseMove?: (e: FabricEvent) => void\n  onMouseUp?: (e: FabricEvent) => void\n  onMouseWheel?: (e: FabricEvent) => void\n}\n\nconst ForwardReactFabric = forwardRef<HTMLDivElement, ReactFabricProps>(\n  (\n    {\n      minManualZoom,\n      maxManualZoom,\n      className,\n      children,\n      width,\n      height,\n      selection,\n      style,\n      onMouseWheel,\n      onMouseDown,\n      onMouseMove,\n      onMouseUp,\n      zoomable,\n      defaultSelection,\n      defaultCentered,\n      defaultDraggable,\n      ...rest\n    },\n    ref,\n  ) => {\n    return (\n      <div style={{ ...wrapperStyle, ...style }} ref={ref} className={`react-fabric ${className || ''}`}>\n        <Wrapper width={width} height={height}>\n          <StoreUpdater\n            minManualZoom={minManualZoom}\n            maxManualZoom={maxManualZoom}\n            zoomable={zoomable}\n            defaultCentered={defaultCentered}\n            selection={selection}\n            defaultSelection={defaultSelection}\n            defaultDraggable={defaultDraggable}\n          />\n\n          <Canvas\n            onMouseDown={onMouseDown}\n            onMouseMove={onMouseMove}\n            onMouseUp={onMouseUp}\n            onMouseWheel={onMouseWheel}\n            {...rest}\n          >\n            {children}\n          </Canvas>\n          <Loading />\n        </Wrapper>\n      </div>\n    )\n  },\n)\n\ntype ReactFabricComponent = React.MemoExoticComponent<typeof ForwardReactFabric>\n\nconst ReactFabric: ReactFabricComponent = memo(ForwardReactFabric)\nReactFabric.displayName = 'ReactFabric'\n\nexport default ReactFabric\n"],"names":["wrapperStyle","ForwardReactFabric","forwardRef","minManualZoom","maxManualZoom","className","children","width","height","selection","style","onMouseWheel","onMouseDown","onMouseMove","onMouseUp","zoomable","defaultSelection","defaultCentered","defaultDraggable","rest","ref","jsx","jsxs","Wrapper","StoreUpdater","Canvas","Loading","ReactFabric","memo"],"mappings":"ySA2BMA,MAAAA,EAA8B,CAClC,MAAO,OACP,OAAQ,OACR,SAAU,SACV,SAAU,WACV,OAAQ,CACV,EA0BMC,EAAqBC,EAAAA,WACzB,CACE,CACE,cAAAC,EACA,cAAAC,EACA,UAAAC,EACA,SAAAC,EACA,MAAAC,EACA,OAAAC,EACA,UAAAC,EACA,MAAAC,EACA,aAAAC,EACA,YAAAC,EACA,YAAAC,EACA,UAAAC,EACA,SAAAC,EACA,iBAAAC,EACA,gBAAAC,EACA,iBAAAC,EACA,GAAGC,CACL,EACAC,IAGEC,EAAAA,IAAC,MAAI,CAAA,MAAO,CAAE,GAAGrB,EAAc,GAAGU,CAAM,EAAG,IAAKU,EAAK,UAAW,gBAAgBf,GAAa,EAAE,GAC7F,SAAAiB,EAAAA,KAACC,UAAA,CAAQ,MAAOhB,EAAO,OAAQC,EAC7B,SAAAa,CAAAA,MAACG,EAAAA,aAAA,CACC,cAAerB,EACf,cAAeC,EACf,SAAUW,EACV,gBAAiBE,EACjB,UAAWR,EACX,iBAAkBO,EAClB,iBAAkBE,CAAAA,CACpB,EAEAG,EAACI,IAAAA,EAAAA,QAAA,CACC,YAAab,EACb,YAAaC,EACb,UAAWC,EACX,aAAcH,EACb,GAAGQ,EAEH,SAAAb,EACH,EACAe,EAAAA,IAACK,EAAA,QAAA,CAAQ,CAAA,GACX,CACF,CAAA,CAGN,EAIMC,EAAoCC,OAAK3B,CAAkB,EACjE0B,EAAY,YAAc"}

package/dist/cjs/hooks/useChildrenPosition.cjs

@@ -0,0 +1,2 @@
+"use strict";var o=require("react"),f=require("fabric"),c=require("./useStore.cjs");function l(t){const n=o.useRef(null),s=c.useStoreApi();return o.useEffect(()=>{if(!t)return;const{canvas:r}=s.getState(),i=()=>{if(!n.current||!r)return;const e=t.getCoords().map(a=>f.util.sendPointToPlane(a,r.viewportTransform,void 0)),u={position:"absolute",left:`${e[0].x}px`,top:`${e[0].y}px`,width:`${e[2].x-e[0].x}px`,height:`${e[2].y-e[0].y}px`};Object.assign(n.current.style,u)};return r?.on("after:render",i),i(),()=>{r?.off("after:render",i)}},[t,s]),n}exports.useChildrenPosition=l;
+//# sourceMappingURL=useChildrenPosition.cjs.map

package/dist/cjs/hooks/useChildrenPosition.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"useChildrenPosition.cjs","sources":["../../../src/hooks/useChildrenPosition.ts"],"sourcesContent":["import { useEffect, useRef } from 'react'\nimport { util } from 'fabric'\nimport type { FabricObject } from 'fabric'\nimport { useStoreApi } from './useStore'\n\n/**\n * 用于同步子元素位置与 Fabric.js 对象位置的 Hook\n * @param instance Fabric.js 对象实例\n * @returns childrenRef - 需要绑定到子元素的 ref\n */\nexport function useChildrenPosition<T extends HTMLElement = HTMLDivElement>(instance: FabricObject | undefined) {\n  const childrenRef = useRef<T>(null)\n  const store = useStoreApi()\n\n  useEffect(() => {\n    if (!instance) return\n\n    const { canvas } = store.getState()\n\n    const updatePosition = () => {\n      if (!childrenRef.current || !canvas) return\n\n      const sceneCoords = instance.getCoords()\n      const viewportCoords = sceneCoords.map(point => util.sendPointToPlane(point, canvas.viewportTransform, undefined))\n\n      const style = {\n        position: 'absolute' as const,\n        left: `${viewportCoords[0].x}px`,\n        top: `${viewportCoords[0].y}px`,\n        width: `${viewportCoords[2].x - viewportCoords[0].x}px`,\n        height: `${viewportCoords[2].y - viewportCoords[0].y}px`,\n      }\n\n      Object.assign(childrenRef.current.style, style)\n    }\n\n    canvas?.on('after:render', updatePosition)\n\n    // 初始化位置\n    updatePosition()\n\n    return () => {\n      canvas?.off('after:render', updatePosition)\n    }\n  }, [instance, store])\n\n  return childrenRef\n}\n"],"names":["useChildrenPosition","instance","childrenRef","useRef","store","useStoreApi","useEffect","canvas","updatePosition","viewportCoords","point","util","style"],"mappings":"oFAUgB,SAAAA,EAA4DC,EAAoC,CAC9G,MAAMC,EAAcC,EAAAA,OAAU,IAAI,EAC5BC,EAAQC,EAAAA,YAAAA,EAEd,OAAAC,EAAAA,UAAU,IAAM,CACd,GAAI,CAACL,EAAU,OAEf,KAAM,CAAE,OAAAM,CAAO,EAAIH,EAAM,SAAS,EAE5BI,EAAiB,IAAM,CAC3B,GAAI,CAACN,EAAY,SAAW,CAACK,EAAQ,OAGrC,MAAME,EADcR,EAAS,UAAU,EACJ,IAAIS,GAASC,OAAK,iBAAiBD,EAAOH,EAAO,kBAAmB,MAAS,CAAC,EAE3GK,EAAQ,CACZ,SAAU,WACV,KAAM,GAAGH,EAAe,CAAC,EAAE,CAAC,KAC5B,IAAK,GAAGA,EAAe,CAAC,EAAE,CAAC,KAC3B,MAAO,GAAGA,EAAe,CAAC,EAAE,EAAIA,EAAe,CAAC,EAAE,CAAC,KACnD,OAAQ,GAAGA,EAAe,CAAC,EAAE,EAAIA,EAAe,CAAC,EAAE,CAAC,IACtD,EAEA,OAAO,OAAOP,EAAY,QAAQ,MAAOU,CAAK,CAChD,EAEA,OAAAL,GAAQ,GAAG,eAAgBC,CAAc,EAGzCA,IAEO,IAAM,CACXD,GAAQ,IAAI,eAAgBC,CAAc,CAC5C,CACF,EAAG,CAACP,EAAUG,CAAK,CAAC,EAEbF,CACT"}

package/dist/cjs/hooks/useCreateObject.cjs

@@ -1,2 +1,2 @@
-"use strict";var n=require("react"),q=require("../utils/events.cjs"),m=require("../utils/props.cjs"),j=require("./useDidUpdate.cjs"),h=require("./useStore.cjs");function C({Constructor:o,attributes:u,defaultValues:i={},param:c,group:a,listeners:l={}}){const d=h.useStoreApi(),f=h.useStore(t=>t.canvas),p=n.useRef(null),e=n.useMemo(()=>{const t=Object.keys(i).length>0;p.current=t?"uncontrolled":"controlled";const s={...u,...m.transformDefaultProps(i)};return c!==void 0?new o(c,s):new o(s)},[o,c]),r=n.useMemo(()=>a??f,[a,f]);return n.useEffect(()=>{if(!(!e||!r))return r.add(e),()=>{try{e&&(e.off(),r.contains(e)&&r.remove(e),typeof e.dispose=="function"&&e.dispose())}catch(t){console.warn("\u6E05\u7406\u5BF9\u8C61\u65F6\u53D1\u751F\u9519\u8BEF:",t)}}},[e,r]),n.useEffect(()=>{if(e)return q.bindEvents(e,l)},[e,l]),j.useDidUpdate(()=>{if(!e)return;const{canvas:t}=d.getState();if(p.current==="uncontrolled"){const s=Object.entries(u).reduce((v,[g,b])=>(g.match(/^(left|top|width|height|scaleX|scaleY|angle|points|path|originX|originY)$/)||(v[g]=b),v),{});Object.keys(s).length>0&&(e.set(s),t?.requestRenderAll())}else e.set(u),e.setCoords(),t?.requestRenderAll()},[e,u,d]),e}exports.useCreateObject=C;
+"use strict";var u=require("react"),q=require("../utils/events.cjs"),j=require("../utils/props.cjs"),m=require("./useDidUpdate.cjs"),h=require("./useStore.cjs");function C({Constructor:o,attributes:n,defaultValues:i={},param:c,group:a,listeners:l={}}){const d=h.useStoreApi(),f=h.useStore(t=>t.canvas),p=u.useRef(null),e=u.useMemo(()=>{const t=Object.keys(i).length>0;p.current=t?"uncontrolled":"controlled";const s={...n,...j.transformDefaultProps(i)};return c!==void 0?new o(c,s):new o(s)},[o,c]),r=u.useMemo(()=>a??f,[a,f]);return u.useEffect(()=>{if(!(!e||!r))return r.add(e),()=>{try{e&&(e.off(),r.contains(e)&&r.remove(e),typeof e.dispose=="function"&&e.dispose())}catch(t){console.warn("\u6E05\u7406\u5BF9\u8C61\u65F6\u53D1\u751F\u9519\u8BEF:",t)}}},[e,r]),u.useEffect(()=>{if(e)return q.bindEvents(e,l)},[e,l]),m.useDidUpdate(()=>{if(!e)return;const{canvas:t}=d.getState();if(p.current==="uncontrolled"){const s=Object.entries(n).reduce((v,[g,b])=>(g.match(/^(left|top|width|height|scaleX|scaleY|angle|points|path|originX|originY)$/)||(v[g]=b),v),{});Object.keys(s).length>0&&(e.set(s),t?.requestRenderAll())}else e.set(n),e.setCoords(),t?.requestRenderAll()},[e,n,d]),e}exports.useCreateObject=C;
 //# sourceMappingURL=useCreateObject.cjs.map