@cs-open/react-fabric 0.0.6 → 0.0.8

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 { forwardRef, memo, useImperativeHandle, type ReactNode } from 'react'\nimport { useCreateObject } from '../../hooks/useCreateObject'\nimport { useSplitProps } from '../../hooks/useSplitProps'\nimport type { AllObjectEvents } from '../../types/object'\nimport { useInstancePosition } from '../../hooks/useInstancePosition'\n\nexport type Handle = BasePath | undefined\n\nexport type PathProps<T = unknown> = Partial<ConstructorParameters<typeof BasePath>[1] & AllObjectEvents> & {\n  group?: BaseGroup\n  path?: string\n  children?: ReactNode\n} & T\n\nconst Path = forwardRef<Handle, PathProps>(({ group, path = 'M 0 0', children, ...props }, ref) => {\n  const [listeners, attributes] = useSplitProps(props)\n\n  const instance = useCreateObject({\n    Constructor: BasePath,\n    param: path,\n    attributes,\n    group,\n    listeners,\n  })\n\n  useImperativeHandle(ref, () => instance, [instance])\n\n  return useInstancePosition(instance, children)\n})\n\nexport default memo(Path)\n"],"names":["Path","forwardRef","group","path","children","props","ref","listeners","attributes","useSplitProps","instance","useCreateObject","BasePath","useImperativeHandle","useInstancePosition","memo"],"mappings":"wPAgBA,MAAMA,EAAOC,EAAAA,WAA8B,CAAC,CAAE,MAAAC,EAAO,KAAAC,EAAO,QAAS,SAAAC,EAAU,GAAGC,CAAM,EAAGC,IAAQ,CACjG,KAAM,CAACC,EAAWC,CAAU,EAAIC,gBAAcJ,CAAK,EAE7CK,EAAWC,EAAAA,gBAAgB,CAC/B,YAAaC,OACb,MAAOT,EACP,WAAAK,EACA,MAAAN,EACA,UAAAK,CACF,CAAC,EAED,OAAAM,sBAAoBP,EAAK,IAAMI,EAAU,CAACA,CAAQ,CAAC,EAE5CI,sBAAoBJ,EAAUN,CAAQ,CAC/C,CAAC,EAED,MAAeW,OAAKf,CAAI"}

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

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

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

@@ -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 { forwardRef, memo, useImperativeHandle, type ReactNode } from 'react'\nimport { useCreateObject } from '../../hooks/useCreateObject'\nimport { useSplitProps } from '../../hooks/useSplitProps'\nimport type { AllObjectEvents } from '../../types/object'\nimport { useInstancePosition } from '../../hooks/useInstancePosition'\n\nexport type PolylineProps<T = unknown> = Partial<ConstructorParameters<typeof BasePolyline>[1] & AllObjectEvents> & {\n  group?: BaseGroup\n  path?: string\n  children?: ReactNode\n} & T\n\nconst Polyline = forwardRef<BasePolyline | undefined, PolylineProps>(({ group, points, children, ...props }, ref) => {\n  const [listeners, attributes] = useSplitProps(props)\n\n  const instance = useCreateObject({\n    Constructor: BasePolyline,\n    param: points,\n    attributes,\n    group,\n    listeners,\n  })\n\n  useImperativeHandle(ref, () => instance, [instance])\n\n  return useInstancePosition(instance, children)\n})\n\nexport default memo(Polyline)\n"],"names":["Polyline","forwardRef","group","points","children","props","ref","listeners","attributes","useSplitProps","instance","useCreateObject","BasePolyline","useImperativeHandle","useInstancePosition","memo"],"mappings":"wPAcA,MAAMA,EAAWC,EAAAA,WAAoD,CAAC,CAAE,MAAAC,EAAO,OAAAC,EAAQ,SAAAC,EAAU,GAAGC,CAAM,EAAGC,IAAQ,CACnH,KAAM,CAACC,EAAWC,CAAU,EAAIC,EAAAA,cAAcJ,CAAK,EAE7CK,EAAWC,kBAAgB,CAC/B,YAAaC,EAAAA,SACb,MAAOT,EACP,WAAAK,EACA,MAAAN,EACA,UAAAK,CACF,CAAC,EAED,OAAAM,sBAAoBP,EAAK,IAAMI,EAAU,CAACA,CAAQ,CAAC,EAE5CI,sBAAoBJ,EAAUN,CAAQ,CAC/C,CAAC,EAED,MAAeW,OAAKf,CAAQ"}

package/dist/cjs/components/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 c=require("fabric"),r=require("react"),l=require("../../hooks/useCreateObject.cjs"),p=require("../../hooks/useSplitProps.cjs"),v=require("../../hooks/useInstancePosition.cjs");const d=r.forwardRef(({group:t,children:u,...s},a)=>{const[i,o,n]=p.useSplitProps(s),e=l.useCreateObject({Constructor:c.Rect,defaultValues:n,attributes:o,group:t,listeners:i});return r.useImperativeHandle(a,()=>e,[e]),v.useInstancePosition(e,u)});var f=r.memo(d);exports.default=f;
 //# sourceMappingURL=index.cjs.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.cjs","sources":["../../../../src/components/Rect/index.tsx"],"sourcesContent":["import type { Group as BaseGroup } from 'fabric'\nimport { Rect as BaseRect } from 'fabric'\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'\nimport { forwardRef, memo, useImperativeHandle, type ReactNode } from 'react'\nimport { useCreateObject } from '../../hooks/useCreateObject'\nimport { useSplitProps } from '../../hooks/useSplitProps'\nimport type { AllObjectEvents } from '../../types/object'\nimport { useInstancePosition } from '../../hooks/useInstancePosition'\n\nexport type RectProps<T = unknown> = Partial<BaseRect & AllObjectEvents> & {\n  group?: BaseGroup\n  defaultLeft?: number\n  defaultTop?: number\n  defaultWidth?: number\n  defaultHeight?: number\n  children?: ReactNode\n} & T\n\nconst Rect = forwardRef<BaseRect | undefined, RectProps>(({ group, children, ...props }, ref) => {\n  const [listeners, attributes, defaultValues] = useSplitProps(props)\n\n  const instance = useCreateObject({\n    Constructor: BaseRect,\n    defaultValues,\n    attributes,\n    group,\n    listeners,\n  })\n\n  useImperativeHandle(ref, () => instance, [instance])\n\n  return useInstancePosition(instance, children)\n})\n\nexport default memo(Rect)\n"],"names":["Rect","forwardRef","group","children","props","ref","listeners","attributes","defaultValues","useSplitProps","instance","useCreateObject","BaseRect","useImperativeHandle","useInstancePosition","memo"],"mappings":"wPAiBA,MAAMA,EAAOC,EAAAA,WAA4C,CAAC,CAAE,MAAAC,EAAO,SAAAC,EAAU,GAAGC,CAAM,EAAGC,IAAQ,CAC/F,KAAM,CAACC,EAAWC,EAAYC,CAAa,EAAIC,EAAAA,cAAcL,CAAK,EAE5DM,EAAWC,EAAAA,gBAAgB,CAC/B,YAAaC,EAAAA,KACb,cAAAJ,EACA,WAAAD,EACA,MAAAL,EACA,UAAAI,CACF,CAAC,EAED,OAAAO,EAAAA,oBAAoBR,EAAK,IAAMK,EAAU,CAACA,CAAQ,CAAC,EAE5CI,sBAAoBJ,EAAUP,CAAQ,CAC/C,CAAC,EAED,MAAeY,OAAKf,CAAI"}

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

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

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

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

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

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

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

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

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

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

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

@@ -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 { forwardRef, memo, useImperativeHandle, type ReactNode } from 'react'\nimport { useCreateObject } from '../../hooks/useCreateObject'\nimport { useSplitProps } from '../../hooks/useSplitProps'\nimport type { AllObjectEvents } from '../../types/object'\nimport { useInstancePosition } from '../../hooks/useInstancePosition'\n\nexport type TextboxProps<T = unknown> = Partial<ConstructorParameters<typeof FabricTextbox>[1] & AllObjectEvents> & {\n  group?: BaseGroup\n  text: string\n  children?: ReactNode\n} & T\n\nFabricTextbox.prototype.set({\n  _getNonTransformedDimensions() {\n    // Object dimensions\n    return new Point(this.width, this.height).scalarAdd(this.padding)\n  },\n  _calculateCurrentDimensions() {\n    // Controls dimensions\n    return util.transformPoint(this._getTransformedDimensions(), this.getViewportTransform(), true)\n  },\n})\n\nconst Textbox = forwardRef<FabricTextbox | undefined, TextboxProps>(({ group, text, children, ...props }, ref) => {\n  const [listeners, attributes] = useSplitProps(props)\n\n  const instance = useCreateObject({\n    Constructor: FabricTextbox,\n    param: text,\n    attributes,\n    group,\n    listeners,\n  })\n\n  useImperativeHandle(ref, () => instance, [instance])\n\n  return useInstancePosition(instance, children)\n})\n\nexport default memo(Textbox)\n"],"names":["FabricTextbox","Point","util","Textbox","forwardRef","group","text","children","props","ref","listeners","attributes","useSplitProps","instance","useCreateObject","useImperativeHandle","useInstancePosition","index","memo"],"mappings":"wPAcAA,EAAAA,QAAc,UAAU,IAAI,CAC1B,8BAA+B,CAE7B,OAAO,IAAIC,EAAM,MAAA,KAAK,MAAO,KAAK,MAAM,EAAE,UAAU,KAAK,OAAO,CAClE,EACA,6BAA8B,CAE5B,OAAOC,EAAAA,KAAK,eAAe,KAAK,4BAA6B,KAAK,uBAAwB,EAAI,CAChG,CACF,CAAC,EAED,MAAMC,EAAUC,EAAoD,WAAA,CAAC,CAAE,MAAAC,EAAO,KAAAC,EAAM,SAAAC,EAAU,GAAGC,CAAM,EAAGC,IAAQ,CAChH,KAAM,CAACC,EAAWC,CAAU,EAAIC,gBAAcJ,CAAK,EAE7CK,EAAWC,EAAgB,gBAAA,CAC/B,YAAad,EACb,QAAA,MAAOM,EACP,WAAAK,EACA,MAAAN,EACA,UAAAK,CACF,CAAC,EAED,OAAAK,sBAAoBN,EAAK,IAAMI,EAAU,CAACA,CAAQ,CAAC,EAE5CG,EAAoBH,oBAAAA,EAAUN,CAAQ,CAC/C,CAAC,EAED,IAAAU,EAAeC,EAAAA,KAAKf,CAAO"}

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

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

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 { forwardRef, memo, useImperativeHandle, type ReactNode } from 'react'\nimport { useCreateObject } from '../../hooks/useCreateObject'\nimport { useSplitProps } from '../../hooks/useSplitProps'\nimport type { AllObjectEvents } from '../../types/object'\nimport { useInstancePosition } from '../../hooks/useInstancePosition'\n\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\n    useImperativeHandle(ref, () => instance, [instance])\n\n    return useInstancePosition(instance, children)\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","useImperativeHandle","useInstancePosition","memo"],"mappings":"2XAgBA,MAAMA,UAAsBC,EAAS,IAAA,CAGnC,YAAYC,EAAaC,EAAU,CAAC,EAAG,CACrC,MAAMD,EAAQC,CAAO,CACvB,CAEA,QAAQC,EAAU,CAEhBA,EAAI,UAAU,EAEd,MAAMC,EAAI,KAAK,iBACTC,EAAQ,KAAK,YAAY,KAAK,MAAMD,EAAE,GAAIA,EAAE,EAAE,CAAC,EACrD,KAAK,KAAK,KAAK,MAAMA,EAAE,GAAIA,EAAE,EAAE,EAAGC,EAAOF,CAAG,EAC5CA,EAAI,UAAY,KAAK,YACrB,MAAMG,EAAkBH,EAAI,YAC5BA,EAAI,YAAc,KAAK,QAAUA,EAAI,UAErC,KAAK,QAAU,KAAK,cAAcA,CAAG,EACrCA,EAAI,YAAcG,CACpB,CAEA,MAAMC,EAAQC,EAAQ,CACpB,MAAO,CACL,EAAGD,EACH,EAAGC,CACL,CACF,CAEA,KAAKC,EAAWC,EAASP,EAAU,CAEjC,IAAIQ,EAAK,EACPC,EAAK,EACLC,EAAKJ,EAAK,EACVK,EAAKL,EAAK,EACVM,EAAKL,EAAG,EACRM,EAAKN,EAAG,EACRO,EAAI,EACJC,EAAO,EACPC,EAAmB,EACnBC,EAAM,KAAK,MAAMJ,EAAKF,EAAIC,EAAKF,CAAE,EACjCQ,EAAW,KAAK,MAAMR,EAAKE,IAAOF,EAAKE,IAAOD,EAAKE,IAAOF,EAAKE,EAAG,EAClEM,EAAY,GAAK,EACjBC,EAAK,KAAK,GAAKF,EAAY,GAC7B,IAAKJ,EAAGA,GAAKI,EAAUJ,GAAKC,EAC1BC,EAAmB,KAAK,IAAKF,EAAII,EAAYE,CAAC,EAAID,EAClDX,EAAKF,EAAK,EAAI,KAAK,IAAIW,CAAG,EAAIH,EAAI,KAAK,IAAIG,EAAM,KAAK,GAAK,CAAC,EAAID,EAChEP,EAAKH,EAAK,EAAI,KAAK,IAAIW,CAAG,EAAIH,EAAI,KAAK,IAAIG,EAAM,KAAK,GAAK,CAAC,EAAID,EAGhEF,EAAI,EAAId,EAAI,OAAOQ,EAAIC,CAAE,EAAIT,EAAI,OAAOQ,EAAIC,CAAE,CAElD,CAEA,YAAYY,EAAa,CACvB,MAAMC,EAAKD,EAAO,EAChBE,EAAKF,EAAO,EACd,OAAO,IAAIG,EAAAA,MAAMF,EAAIC,CAAE,CACzB,CAEA,gBAAkC,CAChC,KAAM,CAAE,GAAIE,EAAK,GAAIC,EAAK,GAAIC,EAAK,GAAIC,EAAK,MAAAC,EAAO,OAAAC,CAAO,EAAI,KACxDC,EAAQN,GAAOC,EAAM,GAAK,EAC9BM,EAAQL,GAAOC,EAAM,GAAK,EAC1BK,EAAMF,EAAQF,EAAS,EACvBK,EAAMF,EAAQF,EAAU,EACxBK,EAAMJ,EAAQ,CAACF,EAAS,EACxBO,EAAMJ,EAAQ,CAACF,EAAU,EAE3B,MAAO,CACL,GAAAG,EACA,GAAAE,EACA,GAAAD,EACA,GAAAE,CACF,CACF,CAEA,SAASC,EAAsB,CAAI,EAAA,CAEjC,MAAO,CAAE,GADG,MAAM,SAASA,CAAmB,CAC9B,CAClB,CACF,CAhFEC,EADI1C,EACG,OAAO,UAwFhB,EAAA,MAAM2C,EAAWC,EACf,WAAA,CAAC,CAAE,MAAAC,EAAO,GAAAR,EAAI,GAAAC,EAAI,GAAAC,EAAI,GAAAC,EAAI,SAAAM,EAAU,GAAGC,CAAM,EAAGC,IAAQ,CACtD,KAAM,CAACC,EAAWC,CAAU,EAAIC,EAAcJ,cAAAA,CAAK,EAE7CK,EAAWC,EAAAA,gBAAgB,CAC/B,YAAarD,EACb,MAAO,CAACqC,EAAIC,EAAIC,EAAIC,CAAE,EACtB,WAAAU,EACA,MAAAL,EACA,UAAAI,CACF,CAAC,EAED,OAAAK,EAAAA,oBAAoBN,EAAK,IAAMI,EAAU,CAACA,CAAQ,CAAC,EAE5CG,sBAAoBH,EAAUN,CAAQ,CAC/C,CACF,EAEA,MAAeU,EAAAA,KAAKb,CAAQ"}

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"),Z=require("./Wrapper.cjs"),q=require("../../components/Canvas/index.cjs"),y=require("../../components/StoreUpdater/index.cjs"),D=require("../../components/Loading/index.cjs");const W={width:"100%",height:"100%",overflow:"hidden",position:"relative",zIndex:0},z=a.forwardRef(({minManualZoom:r,maxManualZoom:l,className:n,children:i,width:t,height:u,selection:d,style:s,onMouseWheel:m,onMouseDown:c,onMouseMove:h,onMouseUp:f,zoomable:M,panAble:x,defaultSelection:p,defaultCentered:v,defaultDraggable:b,manualZoom:g,...j},w)=>e.jsx("div",{style:{...W,...s},ref:w,className:`react-fabric ${n||""}`,children:e.jsxs(Z.Wrapper,{width:t,height:u,children:[e.jsx(y.StoreUpdater,{minManualZoom:r,maxManualZoom:l,zoomable:M,panAble:x,defaultCentered:v,selection:d,defaultSelection:p,defaultDraggable:b,manualZoom:g}),e.jsx(q.default,{onMouseDown:c,onMouseMove:h,onMouseUp:f,onMouseWheel:m,...j,children:i}),e.jsx(D.default,{})]})})),o=a.memo(z);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  panAble?: boolean\n  manualZoom?: number\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      panAble,\n      defaultSelection,\n      defaultCentered,\n      defaultDraggable,\n      manualZoom,\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            panAble={panAble}\n            defaultCentered={defaultCentered}\n            selection={selection}\n            defaultSelection={defaultSelection}\n            defaultDraggable={defaultDraggable}\n            manualZoom={manualZoom}\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","panAble","defaultSelection","defaultCentered","defaultDraggable","manualZoom","rest","ref","jsx","jsxs","Wrapper","StoreUpdater","Canvas","Loading","ReactFabric","memo"],"mappings":"+SA2BMA,EAA8B,CAClC,MAAO,OACP,OAAQ,OACR,SAAU,SACV,SAAU,WACV,OAAQ,CACV,EA4BMC,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,QAAAC,EACA,iBAAAC,EACA,gBAAAC,EACA,iBAAAC,EACA,WAAAC,EACA,GAAGC,CACL,EACAC,IAGEC,EAAC,IAAA,MAAA,CAAI,MAAO,CAAE,GAAGvB,EAAc,GAAGU,CAAM,EAAG,IAAKY,EAAK,UAAW,gBAAgBjB,GAAa,EAAE,GAC7F,SAAAmB,EAACC,KAAAA,EAAAA,QAAA,CAAQ,MAAOlB,EAAO,OAAQC,EAC7B,UAAAe,EAACG,IAAAA,EAAAA,aAAA,CACC,cAAevB,EACf,cAAeC,EACf,SAAUW,EACV,QAASC,EACT,gBAAiBE,EACjB,UAAWT,EACX,iBAAkBQ,EAClB,iBAAkBE,EAClB,WAAYC,EACd,EAEAG,EAAAA,IAACI,EAAAA,QAAA,CACC,YAAaf,EACb,YAAaC,EACb,UAAWC,EACX,aAAcH,EACb,GAAGU,EAEH,SAAAf,CACH,CAAA,EACAiB,EAAAA,IAACK,EAAAA,QAAA,CAAA,CAAQ,CACX,CAAA,CAAA,CAAA,CACF,CAGN,EAIMC,EAAoCC,EAAK7B,KAAAA,CAAkB,EACjE4B,EAAY,YAAc"}

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

package/dist/cjs/hooks/useCreateObject.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"useCreateObject.cjs","sources":["../../../src/hooks/useCreateObject.ts"],"sourcesContent":["import type { FabricObject, Group } from 'fabric'\nimport { useEffect, useMemo, useRef } from 'react'\nimport type { AllObjectEvents } from '../types/object'\nimport { bindEvents } from '../utils/events'\nimport { transformDefaultProps } from '../utils/props'\nimport { useDidUpdate } from './useDidUpdate'\nimport { useStore, useStoreApi } from './useStore'\n\ntype SingleParamConstructor<T> = new (attributes: any) => T\ntype DualParamConstructor<T, P> = new (param: P, attributes: any) => T\n\ntype CreateObjectProps<T extends FabricObject, P = any> = {\n  Constructor: SingleParamConstructor<T> | DualParamConstructor<T, P>\n  attributes: any\n  defaultValues?: any\n  param?: P\n  group?: Group\n  listeners?: Partial<AllObjectEvents>\n}\n\nexport function useCreateObject<T extends FabricObject, P = any>({\n  Constructor,\n  attributes,\n  defaultValues = {},\n  param,\n  group,\n  listeners = {},\n}: CreateObjectProps<T, P>) {\n  const store = useStoreApi()\n  const canvas = useStore( state => state.canvas)\n\n\n  // 使用 ref 记录控制模式\n  const modeRef = useRef<'controlled' | 'uncontrolled' | null>(null)\n\n  // 在创建实例时确定控制模式\n  const instance = useMemo(() => {\n    const hasUncontrolledProps = Object.keys(defaultValues).length > 0\n    modeRef.current = hasUncontrolledProps ? 'uncontrolled' : 'controlled'\n\n    const mergedAttributes = {\n      ...attributes,\n      ...transformDefaultProps(defaultValues),\n    }\n\n    const newInstance =\n      param !== undefined\n        ? new (Constructor as DualParamConstructor<T, P>)(param, mergedAttributes)\n        : new (Constructor as SingleParamConstructor<T>)(mergedAttributes)\n    return newInstance\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [Constructor, param])\n\n  // 计算父容器（group 或 canvas）\n  const parent = useMemo(() => group ?? canvas, [group, canvas])\n\n  // 处理实例的添加和移除\n  useEffect(() => {\n    if (!instance || !parent) return\n    // 添加到父容器\n    parent.add(instance)\n\n    return () => {\n      try {\n        if (instance) {\n          // 移除所有事件监听\n          instance.off()\n\n          // 从父容器中移除\n          if (parent.contains(instance)) {\n            parent.remove(instance)\n          }\n\n          // 如果存在 dispose 方法则调用\n          if (typeof instance.dispose === 'function') {\n            instance.dispose()\n          }\n        }\n      } catch (error) {\n        console.warn('清理对象时发生错误:', error)\n      }\n    }\n  }, [instance, parent])\n\n  // 处理事件绑定\n  useEffect(() => {\n    if (!instance) return\n    return bindEvents(instance, listeners)\n  }, [instance, listeners])\n\n  // 处理属性更新\n  useDidUpdate(() => {\n    if (!instance) return\n    const { canvas } = store.getState()\n\n    // 在非受控模式下，跳过位置相关属性的更新\n    if (modeRef.current === 'uncontrolled') {\n      const styleUpdates = Object.entries(attributes).reduce(\n        (acc, [key, value]) => {\n          if (!key.match(/^(left|top|width|height|scaleX|scaleY|angle|points|path|originX|originY)$/)) {\n            acc[key] = value\n          }\n          return acc\n        },\n        {} as Record<string, any>,\n      )\n\n      if (Object.keys(styleUpdates).length > 0) {\n        instance.set(styleUpdates)\n        canvas?.requestRenderAll()\n      }\n    } else {\n      // 受控模式：正常更新所有属性\n      instance.set(attributes)\n      instance.setCoords()\n      canvas?.requestRenderAll()\n    }\n  }, [instance, attributes, store])\n\n  return instance\n}\n"],"names":["useCreateObject","Constructor","attributes","defaultValues","param","group","listeners","store","useStoreApi","canvas","useStore","state","modeRef","useRef","instance","useMemo","hasUncontrolledProps","mergedAttributes","transformDefaultProps","parent","useEffect","error","bindEvents","useDidUpdate","styleUpdates","acc","key","value"],"mappings":"iKAoBO,SAASA,EAAiD,CAC/D,YAAAC,EACA,WAAAC,EACA,cAAAC,EAAgB,GAChB,MAAAC,EACA,MAAAC,EACA,UAAAC,EAAY,CAAA,CACd,EAA4B,CAC1B,MAAMC,EAAQC,cACRC,EAAAA,EAASC,EAAAA,SAAUC,GAASA,EAAM,MAAM,EAIxCC,EAAUC,EAAAA,OAA6C,IAAI,EAG3DC,EAAWC,UAAQ,IAAM,CAC7B,MAAMC,EAAuB,OAAO,KAAKb,CAAa,EAAE,OAAS,EACjES,EAAQ,QAAUI,EAAuB,eAAiB,aAE1D,MAAMC,EAAmB,CACvB,GAAGf,EACH,GAAGgB,EAAAA,sBAAsBf,CAAa,CACxC,EAMA,OAHEC,IAAU,OACN,IAAKH,EAA2CG,EAAOa,CAAgB,EACvE,IAAKhB,EAA0CgB,CAAgB,CAGvE,EAAG,CAAChB,EAAaG,CAAK,CAAC,EAGjBe,EAASJ,EAAAA,QAAQ,IAAMV,GAASI,EAAQ,CAACJ,EAAOI,CAAM,CAAC,EAG7D,OAAAW,EAAAA,UAAU,IAAM,CACd,GAAI,EAAA,CAACN,GAAY,CAACK,GAElB,OAAAA,EAAO,IAAIL,CAAQ,EAEZ,IAAM,CACX,GAAI,CACEA,IAEFA,EAAS,IAGLK,EAAAA,EAAO,SAASL,CAAQ,GAC1BK,EAAO,OAAOL,CAAQ,EAIpB,OAAOA,EAAS,SAAY,YAC9BA,EAAS,QAAQ,EAGvB,OAASO,EAAO,CACd,QAAQ,KAAK,0DAAcA,CAAK,CAClC,CACF,CACF,EAAG,CAACP,EAAUK,CAAM,CAAC,EAGrBC,YAAU,IAAM,CACd,GAAKN,EACL,OAAOQ,aAAWR,EAAUR,CAAS,CACvC,EAAG,CAACQ,EAAUR,CAAS,CAAC,EAGxBiB,eAAa,IAAM,CACjB,GAAI,CAACT,EAAU,OACf,KAAM,CAAE,OAAAL,CAAO,EAAIF,EAAM,SAGzB,EAAA,GAAIK,EAAQ,UAAY,eAAgB,CACtC,MAAMY,EAAe,OAAO,QAAQtB,CAAU,EAAE,OAC9C,CAACuB,EAAK,CAACC,EAAKC,CAAK,KACVD,EAAI,MAAM,2EAA2E,IACxFD,EAAIC,CAAG,EAAIC,GAENF,GAET,EACF,EAEI,OAAO,KAAKD,CAAY,EAAE,OAAS,IACrCV,EAAS,IAAIU,CAAY,EACzBf,GAAQ,mBAEZ,MAEEK,EAAS,IAAIZ,CAAU,EACvBY,EAAS,UAAA,EACTL,GAAQ,iBAEZ,CAAA,EAAG,CAACK,EAAUZ,EAAYK,CAAK,CAAC,EAEzBO,CACT"}
+{"version":3,"file":"useCreateObject.cjs","sources":["../../../src/hooks/useCreateObject.ts"],"sourcesContent":["import type { FabricObject, Group } from 'fabric'\nimport { useEffect, useMemo, useRef } from 'react'\nimport type { AllObjectEvents } from '../types/object'\nimport { bindEvents } from '../utils/events'\nimport { transformDefaultProps } from '../utils/props'\nimport { useDidUpdate } from './useDidUpdate'\nimport { useStore, useStoreApi } from './useStore'\n\ntype SingleParamConstructor<T> = new (attributes: any) => T\ntype DualParamConstructor<T, P> = new (param: P, attributes: any) => T\n\ntype CreateObjectProps<T extends FabricObject, P = any> = {\n  Constructor: SingleParamConstructor<T> | DualParamConstructor<T, P>\n  attributes: any\n  defaultValues?: any\n  param?: P\n  group?: Group\n  listeners?: Partial<AllObjectEvents>\n}\n\nexport function useCreateObject<T extends FabricObject, P = any>({\n  Constructor,\n  attributes,\n  defaultValues = {},\n  param,\n  group,\n  listeners = {},\n}: CreateObjectProps<T, P>) {\n  const store = useStoreApi()\n  const canvas = useStore(state => state.canvas)\n\n\n  // 使用 ref 记录控制模式\n  const modeRef = useRef<'controlled' | 'uncontrolled' | null>(null)\n\n  // 在创建实例时确定控制模式\n  const instance = useMemo(() => {\n    const hasUncontrolledProps = Object.keys(defaultValues).length > 0\n    modeRef.current = hasUncontrolledProps ? 'uncontrolled' : 'controlled'\n\n    const mergedAttributes = {\n      ...attributes,\n      ...transformDefaultProps(defaultValues),\n    }\n\n    const newInstance =\n      param !== undefined\n        ? new (Constructor as DualParamConstructor<T, P>)(param, mergedAttributes)\n        : new (Constructor as SingleParamConstructor<T>)(mergedAttributes)\n    return newInstance\n  }, [Constructor, param])\n\n  // 计算父容器（group 或 canvas）\n  const parent = useMemo(() => group ?? canvas, [group, canvas])\n\n  // 处理实例的添加和移除\n  useEffect(() => {\n    if (!instance || !parent) return\n    // 添加到父容器\n    parent.add(instance)\n\n    return () => {\n      try {\n        if (instance) {\n          // 移除所有事件监听\n          instance.off()\n\n          // 从父容器中移除\n          if (parent.contains(instance)) {\n            parent.remove(instance)\n          }\n\n          // 如果存在 dispose 方法则调用\n          if (typeof instance.dispose === 'function') {\n            instance.dispose()\n          }\n        }\n      } catch (error) {\n        console.warn('清理对象时发生错误:', error)\n      }\n    }\n  }, [instance, parent])\n\n  // 处理事件绑定\n  useEffect(() => {\n    if (!instance) return\n    return bindEvents(instance, listeners)\n  }, [instance, listeners])\n\n  // 处理属性更新\n  useDidUpdate(() => {\n    if (!instance) return\n    const { canvas } = store.getState()\n\n    // 在非受控模式下，跳过位置相关属性的更新\n    if (modeRef.current === 'uncontrolled') {\n      const styleUpdates = Object.entries(attributes).reduce(\n        (acc, [key, value]) => {\n          if (!key.match(/^(left|top|width|height|scaleX|scaleY|angle|points|path|originX|originY)$/)) {\n            acc[key] = value\n          }\n          return acc\n        },\n        {} as Record<string, any>,\n      )\n\n      if (Object.keys(styleUpdates).length > 0) {\n        instance.set(styleUpdates)\n        canvas?.requestRenderAll()\n      }\n    } else {\n      // 受控模式：正常更新所有属性\n      instance.set(attributes)\n      instance.setCoords()\n      canvas?.requestRenderAll()\n    }\n  }, [instance, attributes, store])\n\n  return instance\n}\n"],"names":["useCreateObject","Constructor","attributes","defaultValues","param","group","listeners","store","useStoreApi","canvas","useStore","state","modeRef","useRef","instance","useMemo","hasUncontrolledProps","mergedAttributes","transformDefaultProps","parent","useEffect","error","bindEvents","useDidUpdate","styleUpdates","acc","key","value"],"mappings":"iKAoBO,SAASA,EAAiD,CAC/D,YAAAC,EACA,WAAAC,EACA,cAAAC,EAAgB,GAChB,MAAAC,EACA,MAAAC,EACA,UAAAC,EAAY,CAAA,CACd,EAA4B,CAC1B,MAAMC,EAAQC,cACRC,EAAAA,EAASC,EAAAA,SAASC,GAASA,EAAM,MAAM,EAIvCC,EAAUC,EAAAA,OAA6C,IAAI,EAG3DC,EAAWC,UAAQ,IAAM,CAC7B,MAAMC,EAAuB,OAAO,KAAKb,CAAa,EAAE,OAAS,EACjES,EAAQ,QAAUI,EAAuB,eAAiB,aAE1D,MAAMC,EAAmB,CACvB,GAAGf,EACH,GAAGgB,EAAAA,sBAAsBf,CAAa,CACxC,EAMA,OAHEC,IAAU,OACN,IAAKH,EAA2CG,EAAOa,CAAgB,EACvE,IAAKhB,EAA0CgB,CAAgB,CAEvE,EAAG,CAAChB,EAAaG,CAAK,CAAC,EAGjBe,EAASJ,EAAAA,QAAQ,IAAMV,GAASI,EAAQ,CAACJ,EAAOI,CAAM,CAAC,EAG7D,OAAAW,EAAAA,UAAU,IAAM,CACd,GAAI,EAAA,CAACN,GAAY,CAACK,GAElB,OAAAA,EAAO,IAAIL,CAAQ,EAEZ,IAAM,CACX,GAAI,CACEA,IAEFA,EAAS,IAGLK,EAAAA,EAAO,SAASL,CAAQ,GAC1BK,EAAO,OAAOL,CAAQ,EAIpB,OAAOA,EAAS,SAAY,YAC9BA,EAAS,QAAQ,EAGvB,OAASO,EAAO,CACd,QAAQ,KAAK,0DAAcA,CAAK,CAClC,CACF,CACF,EAAG,CAACP,EAAUK,CAAM,CAAC,EAGrBC,YAAU,IAAM,CACd,GAAKN,EACL,OAAOQ,aAAWR,EAAUR,CAAS,CACvC,EAAG,CAACQ,EAAUR,CAAS,CAAC,EAGxBiB,eAAa,IAAM,CACjB,GAAI,CAACT,EAAU,OACf,KAAM,CAAE,OAAAL,CAAO,EAAIF,EAAM,SAGzB,EAAA,GAAIK,EAAQ,UAAY,eAAgB,CACtC,MAAMY,EAAe,OAAO,QAAQtB,CAAU,EAAE,OAC9C,CAACuB,EAAK,CAACC,EAAKC,CAAK,KACVD,EAAI,MAAM,2EAA2E,IACxFD,EAAIC,CAAG,EAAIC,GAENF,GAET,EACF,EAEI,OAAO,KAAKD,CAAY,EAAE,OAAS,IACrCV,EAAS,IAAIU,CAAY,EACzBf,GAAQ,mBAEZ,MAEEK,EAAS,IAAIZ,CAAU,EACvBY,EAAS,UAAA,EACTL,GAAQ,iBAEZ,CAAA,EAAG,CAACK,EAAUZ,EAAYK,CAAK,CAAC,EAEzBO,CACT"}

package/dist/cjs/hooks/useDidUpdate.cjs

@@ -1,2 +1,2 @@
-"use strict";var r=require("react");function s(t,u){const e=r.useRef(!1);r.useEffect(()=>{if(e.current)return t();e.current=!0},u)}exports.useDidUpdate=s;
+"use strict";var u=require("react");function s(r,t){const e=u.useRef(!1);u.useEffect(()=>{if(e.current)return r();e.current=!0},t)}exports.useDidUpdate=s;
 //# sourceMappingURL=useDidUpdate.cjs.map

package/dist/cjs/hooks/useDraggable.cjs

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var g=require("zustand/shallow"),u=require("react"),d=require("./useStore.cjs");const b=r=>({canvas:r.canvas,draggable:r.draggable}),h=r=>{const e=r.get("selectable");return r.set("selectable",!1),()=>{r.set("selectable",e)}},p=r=>{if(!r)return()=>{};const e=r.getObjects().map(n=>h(n));return()=>{e.forEach(n=>n())}},w=()=>{const r=d.useStoreApi(),{canvas:e,draggable:n}=d.useStore(b,g.shallow),o=u.useRef(0),l=u.useRef(0),a=u.useRef(!1);return u.useEffect(()=>{if(!n)return;const v=p(e),i=({e:t})=>{const c=t.changedTouches?.[0];a.current=!0,o.current=t.clientX??c?.clientX,l.current=t.clientY??c?.clientY},f=({e:t})=>{if(a.current&&e){var c=e.viewportTransform;const s=t.changedTouches?.[0];c[4]+=(t.clientX??s?.clientX)-o.current,c[5]+=(t.clientY??s?.clientY)-l.current,e.requestRenderAll(),o.current=t.clientX??s?.clientX,l.current=t.clientY??s?.clientY}},m=t=>{e&&(e.setViewportTransform(e.viewportTransform),a.current=!1)};return e?.on("mouse:down",i),e?.on("mouse:move",f),e?.on("mouse:up",m),()=>{v(),e?.off("mouse:down",i),e?.off("mouse:move",f),e?.off("mouse:up",m)}},[e,n,r]),null};exports.default=w;
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var g=require("zustand/shallow"),s=require("react"),d=require("./useStore.cjs");const b=r=>({canvas:r.canvas,draggable:r.draggable}),h=r=>{const e=r.get("selectable");return r.set("selectable",!1),()=>{r.set("selectable",e)}},p=r=>{if(!r)return()=>{};const e=r.getObjects().map(n=>h(n));return()=>{e.forEach(n=>n())}},w=()=>{const r=d.useStoreApi(),{canvas:e,draggable:n}=d.useStore(b,g.shallow),o=s.useRef(0),l=s.useRef(0),a=s.useRef(!1);return s.useEffect(()=>{if(!n)return;const v=p(e),i=({e:t})=>{const c=t.changedTouches?.[0];a.current=!0,o.current=t.clientX??c?.clientX,l.current=t.clientY??c?.clientY},f=({e:t})=>{if(a.current&&e){var c=e.viewportTransform;const u=t.changedTouches?.[0];c[4]+=(t.clientX??u?.clientX)-o.current,c[5]+=(t.clientY??u?.clientY)-l.current,e.requestRenderAll(),o.current=t.clientX??u?.clientX,l.current=t.clientY??u?.clientY}},m=t=>{e&&(e.setViewportTransform(e.viewportTransform),a.current=!1)};return e?.on("mouse:down",i),e?.on("mouse:move",f),e?.on("mouse:up",m),()=>{v(),e?.off("mouse:down",i),e?.off("mouse:move",f),e?.off("mouse:up",m)}},[e,n,r]),null};exports.default=w;
 //# sourceMappingURL=useDraggable.cjs.map

package/dist/cjs/hooks/useInstancePosition.cjs

@@ -0,0 +1,2 @@
+"use strict";var n=require("react"),$=require("fabric"),d=require("./useStore.cjs");function v(o,s){const c=d.useStoreApi(),u=n.useRef(null),f=n.useRef("");if(n.useEffect(()=>{if(!o)return;const{canvas:t}=c.getState();if(!t)return;const i=()=>{if(!u.current)return;const e=o.getCoords().map(x=>$.util.sendPointToPlane(x,t.viewportTransform,void 0)),l=`${e[0].x},${e[0].y},${e[2].x-e[0].x},${e[2].y-e[0].y}`;if(l===f.current)return;f.current=l;const y=u.current;Object.assign(y.style,{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`})};return t.on("after:render",i),i(),()=>{t.off("after:render",i)}},[o,c]),!n.isValidElement(s))return s;const a=s.props,r=s.ref,p=n.useCallback(t=>{u.current=t,r&&(typeof r=="function"?r(t):r&&(r.current=t))},[r]);return n.cloneElement(s,{...a,ref:p,style:{position:"absolute",...a.style}})}exports.useInstancePosition=v;
+//# sourceMappingURL=useInstancePosition.cjs.map

package/dist/cjs/hooks/useInstancePosition.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"useInstancePosition.cjs","sources":["../../../src/hooks/useInstancePosition.ts"],"sourcesContent":["import { useEffect, useRef, useCallback, cloneElement, isValidElement, type ReactNode } from 'react'\nimport { util } from 'fabric'\nimport type { FabricObject } from 'fabric'\nimport { useStoreApi } from './useStore'\n\n/**\n * 用于同步子元素位置与 Fabric.js 对象位置的 Hook\n * 直接操作 DOM 元素样式，避免频繁的 React 重渲染\n * 同时处理 ref 合并和 children 克隆\n * @param instance Fabric.js 对象实例\n * @param children 需要处理的子元素\n * @returns 处理后的 children\n */\nexport function useInstancePosition(instance: FabricObject | undefined, children: ReactNode) {\n  const store = useStoreApi()\n  const childElementRef = useRef<HTMLElement | null>(null)\n  const lastPositionRef = useRef<string>('')\n\n  useEffect(() => {\n    if (!instance) return\n\n    const { canvas } = store.getState()\n    if (!canvas) return\n\n    const updatePosition = () => {\n      if (!childElementRef.current) return\n\n      const sceneCoords = instance.getCoords()\n      const viewportCoords = sceneCoords.map(point => util.sendPointToPlane(point, canvas.viewportTransform, undefined))\n\n      const newPosition = `${viewportCoords[0].x},${viewportCoords[0].y},${viewportCoords[2].x - viewportCoords[0].x},${viewportCoords[2].y - viewportCoords[0].y}`\n\n      if (newPosition === lastPositionRef.current) return\n      lastPositionRef.current = newPosition\n\n      const element = childElementRef.current\n      Object.assign(element.style, {\n        position: 'absolute',\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\n    canvas.on('after:render', updatePosition)\n    updatePosition()\n\n    return () => {\n      canvas.off('after:render', updatePosition)\n    }\n  }, [instance, store])\n\n  // 处理 children\n  if (!isValidElement(children)) return children\n\n  const childProps = children.props as any\n  const originalRef = (children as any).ref\n\n  const handleRef = useCallback(\n    (node: any) => {\n      childElementRef.current = node\n      if (originalRef) {\n        if (typeof originalRef === 'function') {\n          originalRef(node)\n        } else if (originalRef) {\n          originalRef.current = node\n        }\n      }\n    },\n    [originalRef],\n  )\n\n  return cloneElement(children, {\n    ...childProps,\n    ref: handleRef,\n    style: {\n      position: 'absolute',\n      ...childProps.style,\n    },\n  } as any)\n}\n"],"names":["useInstancePosition","instance","children","store","useStoreApi","childElementRef","useRef","lastPositionRef","useEffect","canvas","updatePosition","viewportCoords","point","util","newPosition","element","isValidElement","childProps","originalRef","handleRef","useCallback","node","cloneElement"],"mappings":"oFAaO,SAASA,EAAoBC,EAAoCC,EAAqB,CAC3F,MAAMC,EAAQC,EAAY,YAAA,EACpBC,EAAkBC,SAA2B,IAAI,EACjDC,EAAkBD,EAAe,OAAA,EAAE,EAsCzC,GApCAE,EAAU,UAAA,IAAM,CACd,GAAI,CAACP,EAAU,OAEf,KAAM,CAAE,OAAAQ,CAAO,EAAIN,EAAM,SAAA,EACzB,GAAI,CAACM,EAAQ,OAEb,MAAMC,EAAiB,IAAM,CAC3B,GAAI,CAACL,EAAgB,QAAS,OAG9B,MAAMM,EADcV,EAAS,YACM,IAAIW,GAASC,OAAK,iBAAiBD,EAAOH,EAAO,kBAAmB,MAAS,CAAC,EAE3GK,EAAc,GAAGH,EAAe,CAAC,EAAE,CAAC,IAAIA,EAAe,CAAC,EAAE,CAAC,IAAIA,EAAe,CAAC,EAAE,EAAIA,EAAe,CAAC,EAAE,CAAC,IAAIA,EAAe,CAAC,EAAE,EAAIA,EAAe,CAAC,EAAE,CAAC,GAE3J,GAAIG,IAAgBP,EAAgB,QAAS,OAC7CA,EAAgB,QAAUO,EAE1B,MAAMC,EAAUV,EAAgB,QAChC,OAAO,OAAOU,EAAQ,MAAO,CAC3B,SAAU,WACV,KAAM,GAAGJ,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,CAAC,CACH,EAEA,OAAAF,EAAO,GAAG,eAAgBC,CAAc,EACxCA,IAEO,IAAM,CACXD,EAAO,IAAI,eAAgBC,CAAc,CAC3C,CACF,EAAG,CAACT,EAAUE,CAAK,CAAC,EAGhB,CAACa,iBAAed,CAAQ,EAAG,OAAOA,EAEtC,MAAMe,EAAaf,EAAS,MACtBgB,EAAehB,EAAiB,IAEhCiB,EAAYC,EAAAA,YACfC,GAAc,CACbhB,EAAgB,QAAUgB,EACtBH,IACE,OAAOA,GAAgB,WACzBA,EAAYG,CAAI,EACPH,IACTA,EAAY,QAAUG,GAG5B,EACA,CAACH,CAAW,CACd,EAEA,OAAOI,eAAapB,EAAU,CAC5B,GAAGe,EACH,IAAKE,EACL,MAAO,CACL,SAAU,WACV,GAAGF,EAAW,KAChB,CACF,CAAQ,CACV"}

package/dist/cjs/hooks/useReactFabric.cjs

@@ -1,2 +1,2 @@
-"use strict";var Z=require("zustand/vanilla/shallow"),r=require("react"),u=require("./useStore.cjs");const S=e=>({draggable:e.draggable,selection:e.selection,isDragging:e.isDragging,width:e.width,height:e.height,canvas:e.canvas,setDraggable:e.setDraggable,setIsDragging:e.setIsDragging,lastPosX:e.lastPosX,lastPosY:e.lastPosY,setSelection:e.setSelection,zoomable:e.zoomable,setZoomable:e.setZoomable,scale:e.scale,zoom:e.zoom,defaultCentered:e.defaultCentered,manualZoom:e.manualZoom,maxManualZoom:e.maxManualZoom,minManualZoom:e.minManualZoom,loading:e.loading});function b(){const e=u.useStoreApi(),i=u.useStore(S,Z.shallow),l=r.useMemo(()=>({getCanvas:()=>e.getState().canvas,getNodes:()=>e.getState().nodes.map(t=>({...t})),getState:()=>e.getState,zoomIn:()=>{let{manualZoom:t,canvas:o,fitZoom:m}=e.getState();t+=.2;const n=e.getState().maxManualZoom,a=e.getState().minManualZoom;t>n&&(t=n),t<a&&(t=a);const s=t*m;if(o?.backgroundImage&&o){const g=o.getCenterPoint();o.zoomToPoint(g,s)}e.setState({manualZoom:t,zoom:s})},zoomOut:()=>{let{manualZoom:t,canvas:o,fitZoom:m}=e.getState();t-=.2;const n=e.getState().maxManualZoom,a=e.getState().minManualZoom;t>n&&(t=n),t<a&&(t=a);const s=t*m;if(o?.backgroundImage&&o){const g=o.getCenterPoint();o.zoomToPoint(g,s)}e.setState({manualZoom:t,zoom:s})},getZoom:()=>e.getState().zoom,resetViewport:()=>{let{canvas:t,fitZoom:o=1,defaultCentered:m}=e.getState();const n=1,a=n*o;if(t){if(m&&t.backgroundImage){const s=t.backgroundImage.width||0,g=t.backgroundImage.height||0,c=(t.width-s*a)/2,d=(t.height-g*a)/2;t.setViewportTransform([a,0,0,a,c,d])}else t.setViewportTransform([a,0,0,a,0,0]);t.requestRenderAll()}e.setState({manualZoom:n,zoom:a})}}),[e]);return r.useMemo(()=>({...l,...i}),[l,i])}exports.useReactFabric=b;
+"use strict";var Z=require("zustand/vanilla/shallow"),r=require("react"),u=require("./useStore.cjs");const S=e=>({draggable:e.draggable,selection:e.selection,isDragging:e.isDragging,width:e.width,height:e.height,canvas:e.canvas,setDraggable:e.setDraggable,setIsDragging:e.setIsDragging,lastPosX:e.lastPosX,lastPosY:e.lastPosY,setSelection:e.setSelection,zoomable:e.zoomable,setZoomable:e.setZoomable,scale:e.scale,zoom:e.zoom,defaultCentered:e.defaultCentered,manualZoom:e.manualZoom,maxManualZoom:e.maxManualZoom,minManualZoom:e.minManualZoom,loading:e.loading});function b(){const e=u.useStoreApi(),i=u.useStore(S,Z.shallow),l=r.useMemo(()=>({getCanvas:()=>e.getState().canvas,getNodes:()=>e.getState().nodes.map(a=>({...a})),getState:()=>e.getState,zoomIn:()=>{let{manualZoom:a,canvas:o,fitZoom:m}=e.getState();a+=.2;const n=e.getState().maxManualZoom,t=e.getState().minManualZoom;a>n&&(a=n),a<t&&(a=t);const s=a*m;if(o?.backgroundImage&&o){const g=o.getCenterPoint();o.zoomToPoint(g,s)}e.setState({manualZoom:a,zoom:s})},zoomOut:()=>{let{manualZoom:a,canvas:o,fitZoom:m}=e.getState();a-=.2;const n=e.getState().maxManualZoom,t=e.getState().minManualZoom;a>n&&(a=n),a<t&&(a=t);const s=a*m;if(o?.backgroundImage&&o){const g=o.getCenterPoint();o.zoomToPoint(g,s)}e.setState({manualZoom:a,zoom:s})},getZoom:()=>e.getState().zoom,resetViewport:(a=1)=>{const{canvas:o,fitZoom:m=1,defaultCentered:n}=e.getState(),t=a*m;if(o){if(n&&o.backgroundImage){const s=o.backgroundImage.width||0,g=o.backgroundImage.height||0,c=(o.width-s*t)/2,d=(o.height-g*t)/2;o.setViewportTransform([t,0,0,t,c,d])}else o.setViewportTransform([t,0,0,t,0,0]);o.requestRenderAll()}e.setState({manualZoom:a,zoom:t})}}),[e]);return r.useMemo(()=>({...l,...i}),[l,i])}exports.useReactFabric=b;
 //# sourceMappingURL=useReactFabric.cjs.map

package/dist/cjs/hooks/useReactFabric.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"useReactFabric.cjs","sources":["../../../src/hooks/useReactFabric.ts"],"sourcesContent":["import { shallow } from 'zustand/vanilla/shallow'\nimport { useMemo } from 'react'\nimport type { ReactFabricState } from '../types/store'\nimport { useStore, useStoreApi } from './useStore'\n\nconst selector = (s: ReactFabricState) => ({\n  draggable: s.draggable,\n  selection: s.selection,\n  isDragging: s.isDragging,\n  width: s.width,\n  height: s.height,\n  canvas: s.canvas,\n  setDraggable: s.setDraggable,\n  setIsDragging: s.setIsDragging,\n  lastPosX: s.lastPosX,\n  lastPosY: s.lastPosY,\n  setSelection: s.setSelection,\n  zoomable: s.zoomable,\n  setZoomable: s.setZoomable,\n  scale: s.scale,\n  zoom: s.zoom,\n  defaultCentered: s.defaultCentered,\n  manualZoom: s.manualZoom,\n  maxManualZoom: s.maxManualZoom,\n  minManualZoom: s.minManualZoom,\n  loading: s.loading,\n})\n\nexport function useReactFabric() {\n  const store = useStoreApi()\n  const state = useStore(selector, shallow)\n\n  const generalHelper = useMemo(() => {\n    return {\n      getCanvas: () => store.getState().canvas,\n      getNodes: () => store.getState().nodes.map(n => ({ ...n })),\n      getState: () => store.getState,\n\n      /**\n       * 放大\n       */\n      zoomIn: () => {\n        let { manualZoom, canvas, fitZoom } = store.getState()\n        manualZoom += 0.2\n        const maxManualZoom = store.getState().maxManualZoom\n        const minManualZoom = store.getState().minManualZoom\n        if (manualZoom > maxManualZoom) manualZoom = maxManualZoom\n        if (manualZoom < minManualZoom) manualZoom = minManualZoom\n\n        const combinedZoom = manualZoom * fitZoom\n        const bgImage = canvas?.backgroundImage\n        if (bgImage && canvas) {\n          // 返回画布的中心点，这个点是固定的 不受背景图位置和变换的影响\n          const center = canvas.getCenterPoint()\n          canvas.zoomToPoint(center, combinedZoom)\n        }\n\n        store.setState({\n          manualZoom: manualZoom,\n          zoom: combinedZoom,\n        })\n      },\n\n      /**\n       * 缩小\n       */\n      zoomOut: () => {\n        let { manualZoom, canvas, fitZoom } = store.getState()\n        manualZoom -= 0.2\n        const maxManualZoom = store.getState().maxManualZoom\n        const minManualZoom = store.getState().minManualZoom\n        if (manualZoom > maxManualZoom) manualZoom = maxManualZoom\n        if (manualZoom < minManualZoom) manualZoom = minManualZoom\n\n        const combinedZoom = manualZoom * fitZoom\n        const bgImage = canvas?.backgroundImage\n        if (bgImage && canvas) {\n          // 返回画布的中心点，这个点是固定的 不受背景图位置和变换的影响\n          const center = canvas.getCenterPoint()\n          canvas.zoomToPoint(center, combinedZoom)\n        }\n\n        store.setState({\n          manualZoom: manualZoom,\n          zoom: combinedZoom,\n        })\n      },\n      getZoom: () => store.getState().zoom,\n\n      /**\n       * 重置视口/缩放\n       */\n      resetViewport: () => {\n        let { canvas, fitZoom = 1, defaultCentered } = store.getState()\n\n        const manualZoom = 1\n        const combinedZoom = manualZoom * fitZoom\n        if (canvas) {\n          // 先重置 viewport transform\n          if (defaultCentered && canvas.backgroundImage) {\n            const bgWidth = canvas.backgroundImage.width || 0\n            const bgHeight = canvas.backgroundImage.height || 0\n            const deltaX = (canvas.width! - bgWidth * combinedZoom) / 2\n            const deltaY = (canvas.height! - bgHeight * combinedZoom) / 2\n            canvas.setViewportTransform([combinedZoom, 0, 0, combinedZoom, deltaX, deltaY])\n          } else {\n            canvas.setViewportTransform([combinedZoom, 0, 0, combinedZoom, 0, 0])\n          }\n          canvas.requestRenderAll()\n        }\n\n        store.setState({\n          manualZoom: manualZoom,\n          zoom: combinedZoom,\n        })\n      },\n    }\n  }, [store])\n\n  return useMemo(\n    () => ({\n      ...generalHelper,\n      ...state,\n    }),\n    [generalHelper, state],\n  )\n}\n"],"names":["selector","s","useReactFabric","store","useStoreApi","state","useStore","shallow","generalHelper","useMemo","n","manualZoom","canvas","fitZoom","maxManualZoom","minManualZoom","combinedZoom","center","defaultCentered","bgWidth","bgHeight","deltaX","deltaY"],"mappings":"qGAKA,MAAMA,EAAYC,IAAyB,CACzC,UAAWA,EAAE,UACb,UAAWA,EAAE,UACb,WAAYA,EAAE,WACd,MAAOA,EAAE,MACT,OAAQA,EAAE,OACV,OAAQA,EAAE,OACV,aAAcA,EAAE,aAChB,cAAeA,EAAE,cACjB,SAAUA,EAAE,SACZ,SAAUA,EAAE,SACZ,aAAcA,EAAE,aAChB,SAAUA,EAAE,SACZ,YAAaA,EAAE,YACf,MAAOA,EAAE,MACT,KAAMA,EAAE,KACR,gBAAiBA,EAAE,gBACnB,WAAYA,EAAE,WACd,cAAeA,EAAE,cACjB,cAAeA,EAAE,cACjB,QAASA,EAAE,OACb,GAEgB,SAAAC,GAAiB,CAC/B,MAAMC,EAAQC,EAAAA,YACRC,EAAAA,EAAQC,EAAAA,SAASN,EAAUO,EAAO,OAAA,EAElCC,EAAgBC,UAAQ,KACrB,CACL,UAAW,IAAMN,EAAM,WAAW,OAClC,SAAU,IAAMA,EAAM,WAAW,MAAM,IAAIO,IAAM,CAAE,GAAGA,CAAE,EAAE,EAC1D,SAAU,IAAMP,EAAM,SAKtB,OAAQ,IAAM,CACZ,GAAI,CAAE,WAAAQ,EAAY,OAAAC,EAAQ,QAAAC,CAAQ,EAAIV,EAAM,SAAS,EACrDQ,GAAc,GACd,MAAMG,EAAgBX,EAAM,SAAW,EAAA,cACjCY,EAAgBZ,EAAM,WAAW,cACnCQ,EAAaG,IAAeH,EAAaG,GACzCH,EAAaI,IAAeJ,EAAaI,GAE7C,MAAMC,EAAeL,EAAaE,EAElC,GADgBD,GAAQ,iBACTA,EAAQ,CAErB,MAAMK,EAASL,EAAO,iBACtBA,EAAO,YAAYK,EAAQD,CAAY,CACzC,CAEAb,EAAM,SAAS,CACb,WAAYQ,EACZ,KAAMK,CACR,CAAC,CACH,EAKA,QAAS,IAAM,CACb,GAAI,CAAE,WAAAL,EAAY,OAAAC,EAAQ,QAAAC,CAAQ,EAAIV,EAAM,SAAS,EACrDQ,GAAc,GACd,MAAMG,EAAgBX,EAAM,SAAA,EAAW,cACjCY,EAAgBZ,EAAM,SAAA,EAAW,cACnCQ,EAAaG,IAAeH,EAAaG,GACzCH,EAAaI,IAAeJ,EAAaI,GAE7C,MAAMC,EAAeL,EAAaE,EAElC,GADgBD,GAAQ,iBACTA,EAAQ,CAErB,MAAMK,EAASL,EAAO,eAAA,EACtBA,EAAO,YAAYK,EAAQD,CAAY,CACzC,CAEAb,EAAM,SAAS,CACb,WAAYQ,EACZ,KAAMK,CACR,CAAC,CACH,EACA,QAAS,IAAMb,EAAM,WAAW,KAKhC,cAAe,IAAM,CACnB,GAAI,CAAE,OAAAS,EAAQ,QAAAC,EAAU,EAAG,gBAAAK,CAAgB,EAAIf,EAAM,SAAA,EAErD,MAAMQ,EAAa,EACbK,EAAeL,EAAaE,EAClC,GAAID,EAAQ,CAEV,GAAIM,GAAmBN,EAAO,gBAAiB,CAC7C,MAAMO,EAAUP,EAAO,gBAAgB,OAAS,EAC1CQ,EAAWR,EAAO,gBAAgB,QAAU,EAC5CS,GAAUT,EAAO,MAASO,EAAUH,GAAgB,EACpDM,GAAUV,EAAO,OAAUQ,EAAWJ,GAAgB,EAC5DJ,EAAO,qBAAqB,CAACI,EAAc,EAAG,EAAGA,EAAcK,EAAQC,CAAM,CAAC,CAChF,MACEV,EAAO,qBAAqB,CAACI,EAAc,EAAG,EAAGA,EAAc,EAAG,CAAC,CAAC,EAEtEJ,EAAO,iBAAA,CACT,CAEAT,EAAM,SAAS,CACb,WAAYQ,EACZ,KAAMK,CACR,CAAC,CACH,CACF,GACC,CAACb,CAAK,CAAC,EAEV,OAAOM,EAAAA,QACL,KAAO,CACL,GAAGD,EACH,GAAGH,CACL,GACA,CAACG,EAAeH,CAAK,CACvB,CACF"}
+{"version":3,"file":"useReactFabric.cjs","sources":["../../../src/hooks/useReactFabric.ts"],"sourcesContent":["import { shallow } from 'zustand/vanilla/shallow'\nimport { useMemo } from 'react'\nimport type { ReactFabricState } from '../types/store'\nimport { useStore, useStoreApi } from './useStore'\n\nconst selector = (s: ReactFabricState) => ({\n  draggable: s.draggable,\n  selection: s.selection,\n  isDragging: s.isDragging,\n  width: s.width,\n  height: s.height,\n  canvas: s.canvas,\n  setDraggable: s.setDraggable,\n  setIsDragging: s.setIsDragging,\n  lastPosX: s.lastPosX,\n  lastPosY: s.lastPosY,\n  setSelection: s.setSelection,\n  zoomable: s.zoomable,\n  setZoomable: s.setZoomable,\n  scale: s.scale,\n  zoom: s.zoom,\n  defaultCentered: s.defaultCentered,\n  manualZoom: s.manualZoom,\n  maxManualZoom: s.maxManualZoom,\n  minManualZoom: s.minManualZoom,\n  loading: s.loading,\n})\n\nexport function useReactFabric() {\n  const store = useStoreApi()\n  const state = useStore(selector, shallow)\n\n  const generalHelper = useMemo(() => {\n    return {\n      getCanvas: () => store.getState().canvas,\n      getNodes: () => store.getState().nodes.map(n => ({ ...n })),\n      getState: () => store.getState,\n\n      /**\n       * 放大\n       */\n      zoomIn: () => {\n        let { manualZoom, canvas, fitZoom } = store.getState()\n        manualZoom += 0.2\n        const maxManualZoom = store.getState().maxManualZoom\n        const minManualZoom = store.getState().minManualZoom\n        if (manualZoom > maxManualZoom) manualZoom = maxManualZoom\n        if (manualZoom < minManualZoom) manualZoom = minManualZoom\n\n        const combinedZoom = manualZoom * fitZoom\n        const bgImage = canvas?.backgroundImage\n        if (bgImage && canvas) {\n          // 返回画布的中心点，这个点是固定的 不受背景图位置和变换的影响\n          const center = canvas.getCenterPoint()\n          canvas.zoomToPoint(center, combinedZoom)\n        }\n\n        store.setState({\n          manualZoom: manualZoom,\n          zoom: combinedZoom,\n        })\n      },\n\n      /**\n       * 缩小\n       */\n      zoomOut: () => {\n        let { manualZoom, canvas, fitZoom } = store.getState()\n        manualZoom -= 0.2\n        const maxManualZoom = store.getState().maxManualZoom\n        const minManualZoom = store.getState().minManualZoom\n        if (manualZoom > maxManualZoom) manualZoom = maxManualZoom\n        if (manualZoom < minManualZoom) manualZoom = minManualZoom\n\n        const combinedZoom = manualZoom * fitZoom\n        const bgImage = canvas?.backgroundImage\n        if (bgImage && canvas) {\n          // 返回画布的中心点，这个点是固定的 不受背景图位置和变换的影响\n          const center = canvas.getCenterPoint()\n          canvas.zoomToPoint(center, combinedZoom)\n        }\n\n        store.setState({\n          manualZoom: manualZoom,\n          zoom: combinedZoom,\n        })\n      },\n      getZoom: () => store.getState().zoom,\n\n      /**\n       * 重置视口/缩放\n       */\n      resetViewport: (manualZoom = 1) => {\n        const { canvas, fitZoom = 1, defaultCentered } = store.getState()\n\n        const combinedZoom = manualZoom * fitZoom\n        if (canvas) {\n          // 先重置 viewport transform\n          if (defaultCentered && canvas.backgroundImage) {\n            const bgWidth = canvas.backgroundImage.width || 0\n            const bgHeight = canvas.backgroundImage.height || 0\n            const deltaX = (canvas.width! - bgWidth * combinedZoom) / 2\n            const deltaY = (canvas.height! - bgHeight * combinedZoom) / 2\n            canvas.setViewportTransform([combinedZoom, 0, 0, combinedZoom, deltaX, deltaY])\n          } else {\n            canvas.setViewportTransform([combinedZoom, 0, 0, combinedZoom, 0, 0])\n          }\n          canvas.requestRenderAll()\n        }\n\n        store.setState({\n          manualZoom: manualZoom,\n          zoom: combinedZoom,\n        })\n      },\n    }\n  }, [store])\n\n  return useMemo(\n    () => ({\n      ...generalHelper,\n      ...state,\n    }),\n    [generalHelper, state],\n  )\n}\n"],"names":["selector","s","useReactFabric","store","useStoreApi","state","useStore","shallow","generalHelper","useMemo","n","manualZoom","canvas","fitZoom","maxManualZoom","minManualZoom","combinedZoom","center","defaultCentered","bgWidth","bgHeight","deltaX","deltaY"],"mappings":"qGAKA,MAAMA,EAAYC,IAAyB,CACzC,UAAWA,EAAE,UACb,UAAWA,EAAE,UACb,WAAYA,EAAE,WACd,MAAOA,EAAE,MACT,OAAQA,EAAE,OACV,OAAQA,EAAE,OACV,aAAcA,EAAE,aAChB,cAAeA,EAAE,cACjB,SAAUA,EAAE,SACZ,SAAUA,EAAE,SACZ,aAAcA,EAAE,aAChB,SAAUA,EAAE,SACZ,YAAaA,EAAE,YACf,MAAOA,EAAE,MACT,KAAMA,EAAE,KACR,gBAAiBA,EAAE,gBACnB,WAAYA,EAAE,WACd,cAAeA,EAAE,cACjB,cAAeA,EAAE,cACjB,QAASA,EAAE,OACb,GAEgB,SAAAC,GAAiB,CAC/B,MAAMC,EAAQC,EAAAA,YACRC,EAAAA,EAAQC,EAAAA,SAASN,EAAUO,EAAO,OAAA,EAElCC,EAAgBC,UAAQ,KACrB,CACL,UAAW,IAAMN,EAAM,WAAW,OAClC,SAAU,IAAMA,EAAM,WAAW,MAAM,IAAIO,IAAM,CAAE,GAAGA,CAAE,EAAE,EAC1D,SAAU,IAAMP,EAAM,SAKtB,OAAQ,IAAM,CACZ,GAAI,CAAE,WAAAQ,EAAY,OAAAC,EAAQ,QAAAC,CAAQ,EAAIV,EAAM,SAAS,EACrDQ,GAAc,GACd,MAAMG,EAAgBX,EAAM,SAAW,EAAA,cACjCY,EAAgBZ,EAAM,WAAW,cACnCQ,EAAaG,IAAeH,EAAaG,GACzCH,EAAaI,IAAeJ,EAAaI,GAE7C,MAAMC,EAAeL,EAAaE,EAElC,GADgBD,GAAQ,iBACTA,EAAQ,CAErB,MAAMK,EAASL,EAAO,iBACtBA,EAAO,YAAYK,EAAQD,CAAY,CACzC,CAEAb,EAAM,SAAS,CACb,WAAYQ,EACZ,KAAMK,CACR,CAAC,CACH,EAKA,QAAS,IAAM,CACb,GAAI,CAAE,WAAAL,EAAY,OAAAC,EAAQ,QAAAC,CAAQ,EAAIV,EAAM,SAAA,EAC5CQ,GAAc,GACd,MAAMG,EAAgBX,EAAM,SAAS,EAAE,cACjCY,EAAgBZ,EAAM,WAAW,cACnCQ,EAAaG,IAAeH,EAAaG,GACzCH,EAAaI,IAAeJ,EAAaI,GAE7C,MAAMC,EAAeL,EAAaE,EAElC,GADgBD,GAAQ,iBACTA,EAAQ,CAErB,MAAMK,EAASL,EAAO,iBACtBA,EAAO,YAAYK,EAAQD,CAAY,CACzC,CAEAb,EAAM,SAAS,CACb,WAAYQ,EACZ,KAAMK,CACR,CAAC,CACH,EACA,QAAS,IAAMb,EAAM,SAAS,EAAE,KAKhC,cAAe,CAACQ,EAAa,IAAM,CACjC,KAAM,CAAE,OAAAC,EAAQ,QAAAC,EAAU,EAAG,gBAAAK,CAAgB,EAAIf,EAAM,SAAA,EAEjDa,EAAeL,EAAaE,EAClC,GAAID,EAAQ,CAEV,GAAIM,GAAmBN,EAAO,gBAAiB,CAC7C,MAAMO,EAAUP,EAAO,gBAAgB,OAAS,EAC1CQ,EAAWR,EAAO,gBAAgB,QAAU,EAC5CS,GAAUT,EAAO,MAASO,EAAUH,GAAgB,EACpDM,GAAUV,EAAO,OAAUQ,EAAWJ,GAAgB,EAC5DJ,EAAO,qBAAqB,CAACI,EAAc,EAAG,EAAGA,EAAcK,EAAQC,CAAM,CAAC,CAChF,MACEV,EAAO,qBAAqB,CAACI,EAAc,EAAG,EAAGA,EAAc,EAAG,CAAC,CAAC,EAEtEJ,EAAO,iBAAA,CACT,CAEAT,EAAM,SAAS,CACb,WAAYQ,EACZ,KAAMK,CACR,CAAC,CACH,CACF,GACC,CAACb,CAAK,CAAC,EAEV,OAAOM,EAAAA,QACL,KAAO,CACL,GAAGD,EACH,GAAGH,CACL,GACA,CAACG,EAAeH,CAAK,CACvB,CACF"}

package/dist/cjs/hooks/useResizeHandler.cjs

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var d=require("lodash-es"),o=require("react"),a=require("./useStore.cjs");const c=()=>{const{domNode:t,canvas:s,setDimensions:i}=a.useStore(e=>({domNode:e.domNode,canvas:e.canvas,setDimensions:e.setDimensions})),r=o.useCallback(()=>{if(!t||!s)return;const{width:e,height:n}=t.getBoundingClientRect();i({width:e,height:n})},[t,s,i]);o.useEffect(()=>{if(!t||!s)return;r();const e=d.throttle(r,200,{leading:!0,trailing:!0});window.addEventListener("resize",e);const n=new ResizeObserver(e);return n.observe(t),()=>{window.removeEventListener("resize",e),n.disconnect(),e.cancel()}},[r,t,s])};exports.default=c;
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var c=require("es-toolkit"),o=require("react"),d=require("./useStore.cjs");const u=()=>{const{domNode:t,canvas:s,setDimensions:i}=d.useStore(e=>({domNode:e.domNode,canvas:e.canvas,setDimensions:e.setDimensions})),r=o.useCallback(()=>{if(!t||!s)return;const{width:e,height:n}=t.getBoundingClientRect();i({width:e,height:n})},[t,s,i]);o.useEffect(()=>{if(!t||!s)return;r();const e=c.throttle(r,200);window.addEventListener("resize",e);const n=new ResizeObserver(e);return n.observe(t),()=>{window.removeEventListener("resize",e),n.disconnect(),e.cancel()}},[r,t,s])};exports.default=u;
 //# sourceMappingURL=useResizeHandler.cjs.map

package/dist/cjs/hooks/useResizeHandler.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"useResizeHandler.cjs","sources":["../../../src/hooks/useResizeHandler.ts"],"sourcesContent":["import { throttle } from 'lodash-es'\nimport { useCallback, useEffect } from 'react'\nimport { useStore } from './useStore'\n\nconst useResizeHandler = () => {\n  const { domNode, canvas, setDimensions } = useStore(state => ({\n    domNode: state.domNode,\n    canvas: state.canvas,\n    setDimensions: state.setDimensions,\n  }))\n\n  const updateDimensions = useCallback(() => {\n    if (!domNode || !canvas) return\n\n    // 获取父容器的尺寸\n    const { width, height } = domNode.getBoundingClientRect()\n\n    // 使用 store 中的 setDimensions 方法\n    setDimensions({ width, height })\n\n    // canvas.requestRenderAll()\n  }, [domNode, canvas, setDimensions])\n\n  useEffect(() => {\n    if (!domNode || !canvas) return\n\n    // 初始化时立即计算一次\n    updateDimensions()\n    const throttledUpdate = throttle(updateDimensions, 200, {\n      leading: true,\n      trailing: true,\n    })\n\n    window.addEventListener('resize', throttledUpdate)\n    const resizeObserver = new ResizeObserver(throttledUpdate)\n    resizeObserver.observe(domNode)\n\n    return () => {\n      window.removeEventListener('resize', throttledUpdate)\n      resizeObserver.disconnect()\n      throttledUpdate.cancel()\n    }\n  }, [updateDimensions, domNode, canvas])\n}\n\nexport default useResizeHandler\n"],"names":["useResizeHandler","domNode","canvas","setDimensions","useStore","state","updateDimensions","useCallback","width","height","useEffect","throttledUpdate","throttle","resizeObserver"],"mappings":"8IAIMA,MAAAA,EAAmB,IAAM,CAC7B,KAAM,CAAE,QAAAC,EAAS,OAAAC,EAAQ,cAAAC,CAAc,EAAIC,WAASC,IAAU,CAC5D,QAASA,EAAM,QACf,OAAQA,EAAM,OACd,cAAeA,EAAM,aACvB,EAAE,EAEIC,EAAmBC,EAAY,YAAA,IAAM,CACzC,GAAI,CAACN,GAAW,CAACC,EAAQ,OAGzB,KAAM,CAAE,MAAAM,EAAO,OAAAC,CAAO,EAAIR,EAAQ,wBAGlCE,EAAc,CAAE,MAAAK,EAAO,OAAAC,CAAO,CAAC,CAGjC,EAAG,CAACR,EAASC,EAAQC,CAAa,CAAC,EAEnCO,YAAU,IAAM,CACd,GAAI,CAACT,GAAW,CAACC,EAAQ,OAGzBI,EACA,EAAA,MAAMK,EAAkBC,WAASN,EAAkB,IAAK,CACtD,QAAS,GACT,SAAU,EACZ,CAAC,EAED,OAAO,iBAAiB,SAAUK,CAAe,EACjD,MAAME,EAAiB,IAAI,eAAeF,CAAe,EACzD,OAAAE,EAAe,QAAQZ,CAAO,EAEvB,IAAM,CACX,OAAO,oBAAoB,SAAUU,CAAe,EACpDE,EAAe,WAAW,EAC1BF,EAAgB,QAClB,CACF,EAAG,CAACL,EAAkBL,EAASC,CAAM,CAAC,CACxC"}
+{"version":3,"file":"useResizeHandler.cjs","sources":["../../../src/hooks/useResizeHandler.ts"],"sourcesContent":["import { throttle } from 'es-toolkit'\nimport { useCallback, useEffect } from 'react'\nimport { useStore } from './useStore'\n\nconst useResizeHandler = () => {\n  const { domNode, canvas, setDimensions } = useStore(state => ({\n    domNode: state.domNode,\n    canvas: state.canvas,\n    setDimensions: state.setDimensions,\n  }))\n\n  const updateDimensions = useCallback(() => {\n    if (!domNode || !canvas) return\n\n    // 获取父容器的尺寸\n    const { width, height } = domNode.getBoundingClientRect()\n\n    // 使用 store 中的 setDimensions 方法\n    setDimensions({ width, height })\n\n    // canvas.requestRenderAll()\n  }, [domNode, canvas, setDimensions])\n\n  useEffect(() => {\n    if (!domNode || !canvas) return\n\n    // 初始化时立即计算一次\n    updateDimensions()\n    const throttledUpdate = throttle(updateDimensions, 200)\n\n    window.addEventListener('resize', throttledUpdate)\n    const resizeObserver = new ResizeObserver(throttledUpdate)\n    resizeObserver.observe(domNode)\n\n    return () => {\n      window.removeEventListener('resize', throttledUpdate)\n      resizeObserver.disconnect()\n      throttledUpdate.cancel()\n    }\n  }, [updateDimensions, domNode, canvas])\n}\n\nexport default useResizeHandler\n"],"names":["useResizeHandler","domNode","canvas","setDimensions","useStore","state","updateDimensions","useCallback","width","height","useEffect","throttledUpdate","throttle","resizeObserver"],"mappings":"+IAIA,MAAMA,EAAmB,IAAM,CAC7B,KAAM,CAAE,QAAAC,EAAS,OAAAC,EAAQ,cAAAC,CAAc,EAAIC,EAAAA,SAASC,IAAU,CAC5D,QAASA,EAAM,QACf,OAAQA,EAAM,OACd,cAAeA,EAAM,aACvB,EAAE,EAEIC,EAAmBC,EAAAA,YAAY,IAAM,CACzC,GAAI,CAACN,GAAW,CAACC,EAAQ,OAGzB,KAAM,CAAE,MAAAM,EAAO,OAAAC,CAAO,EAAIR,EAAQ,sBAAsB,EAGxDE,EAAc,CAAE,MAAAK,EAAO,OAAAC,CAAO,CAAC,CAGjC,EAAG,CAACR,EAASC,EAAQC,CAAa,CAAC,EAEnCO,EAAU,UAAA,IAAM,CACd,GAAI,CAACT,GAAW,CAACC,EAAQ,OAGzBI,EAAAA,EACA,MAAMK,EAAkBC,EAAAA,SAASN,EAAkB,GAAG,EAEtD,OAAO,iBAAiB,SAAUK,CAAe,EACjD,MAAME,EAAiB,IAAI,eAAeF,CAAe,EACzD,OAAAE,EAAe,QAAQZ,CAAO,EAEvB,IAAM,CACX,OAAO,oBAAoB,SAAUU,CAAe,EACpDE,EAAe,aACfF,EAAgB,OAAO,CACzB,CACF,EAAG,CAACL,EAAkBL,EAASC,CAAM,CAAC,CACxC"}

package/dist/cjs/hooks/useSplitProps.cjs

@@ -1,2 +1,2 @@
-"use strict";var s=require("react"),u=require("../utils/constants.cjs");const h=r=>{u.UNCONTROLLED_PROPS.forEach(t=>{const e=`default${t.charAt(0).toUpperCase()}${t.slice(1)}`;if(r[t]!==void 0&&r[e]!==void 0)throw new Error(`Cannot use both controlled '${t}' and uncontrolled '${e}' for the same property. Either use controlled mode with '${t}', or uncontrolled mode with '${e}', but not both.`)});const i=s.useMemo(()=>JSON.stringify(Object.fromEntries(Object.entries(r).filter(([t])=>!t.startsWith("on")&&!t.startsWith("default")))),[r]),n=s.useMemo(()=>{const t={};return Object.entries(r).forEach(([e,o])=>{e.startsWith("on")&&(t[e]=o)}),t},[r]),c=s.useMemo(()=>{const t={};return Object.entries(r).forEach(([e,o])=>{e.startsWith("default")&&(t[e]=o)}),t},[r]),a=s.useMemo(()=>{const t={};return Object.entries(r).forEach(([e,o])=>{!e.startsWith("on")&&!e.startsWith("default")&&(t[e]=o)}),t},[i]);return[n,a,c]};exports.useSplitProps=h;
+"use strict";var s=require("react"),a=require("../utils/constants.cjs");const h=r=>{a.UNCONTROLLED_PROPS.forEach(t=>{const e=`default${t.charAt(0).toUpperCase()}${t.slice(1)}`;if(r[t]!==void 0&&r[e]!==void 0)throw new Error(`Cannot use both controlled '${t}' and uncontrolled '${e}' for the same property. Either use controlled mode with '${t}', or uncontrolled mode with '${e}', but not both.`)});const i=s.useMemo(()=>JSON.stringify(Object.fromEntries(Object.entries(r).filter(([t])=>!t.startsWith("on")&&!t.startsWith("default")))),[r]),n=s.useMemo(()=>{const t={};return Object.entries(r).forEach(([e,o])=>{e.startsWith("on")&&(t[e]=o)}),t},[r]),c=s.useMemo(()=>{const t={};return Object.entries(r).forEach(([e,o])=>{e.startsWith("default")&&(t[e]=o)}),t},[r]),u=s.useMemo(()=>{const t={};return Object.entries(r).forEach(([e,o])=>{!e.startsWith("on")&&!e.startsWith("default")&&(t[e]=o)}),t},[i]);return[n,u,c]};exports.useSplitProps=h;
 //# sourceMappingURL=useSplitProps.cjs.map

package/dist/cjs/hooks/useStore.cjs

@@ -1,2 +1,2 @@
-"use strict";var e=require("react"),o=require("zustand/traditional"),u=require("../contexts/StoreContext.cjs");function s(t,n){const r=e.useContext(u.default);if(r===null)throw new Error("\u7F3A\u5931zustandProvider");return o.useStoreWithEqualityFn(r,t,n)}function i(){const t=e.useContext(u.default);if(t===null)throw new Error("\u7F3A\u5931zustandProvider");return e.useMemo(()=>({getState:t.getState,setState:t.setState,subscribe:t.subscribe}),[t])}exports.useStore=s,exports.useStoreApi=i;
+"use strict";var t=require("react"),n=require("zustand/traditional"),u=require("../contexts/StoreContext.cjs");function o(e,s){const r=t.useContext(u.default);if(r===null)throw new Error("useReactFabric \u9700\u8981\u642D\u914D zustandProvider");return n.useStoreWithEqualityFn(r,e,s)}function i(){const e=t.useContext(u.default);if(e===null)throw new Error("\u7F3A\u5931zustandProvider");return t.useMemo(()=>({getState:e.getState,setState:e.setState,subscribe:e.subscribe}),[e])}exports.useStore=o,exports.useStoreApi=i;
 //# sourceMappingURL=useStore.cjs.map

package/dist/cjs/hooks/useStore.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"useStore.cjs","sources":["../../../src/hooks/useStore.ts"],"sourcesContent":["import { useContext, useMemo } from 'react'\nimport type { StoreApi } from 'zustand'\nimport type { UseBoundStoreWithEqualityFn } from 'zustand/traditional'\nimport { useStoreWithEqualityFn as useZustandStore } from 'zustand/traditional'\nimport StoreContext from '../contexts/StoreContext'\nimport type { Node } from '../types/nodes'\nimport type { ReactFabricState } from '../types/store'\n\nfunction useStore<StateSlice = unknown>(\n  selector: (state: ReactFabricState) => StateSlice,\n  equalityFn?: (a: StateSlice, b: StateSlice) => boolean,\n) {\n  const store = useContext(StoreContext)\n\n  if (store === null) {\n    throw new Error('缺失zustandProvider')\n  }\n\n  return useZustandStore(store, selector, equalityFn)\n}\n\nfunction useStoreApi<NodeType extends Node = Node>() {\n  const store = useContext(StoreContext) as UseBoundStoreWithEqualityFn<StoreApi<ReactFabricState<NodeType>>> | null\n\n  if (store === null) {\n    throw new Error('缺失zustandProvider')\n  }\n\n  return useMemo(\n    () => ({\n      getState: store.getState,\n      setState: store.setState,\n      subscribe: store.subscribe,\n    }),\n    [store],\n  )\n}\n\nexport { useStore, useStoreApi }\n"],"names":["useStore","selector","equalityFn","store","useContext","StoreContext","useZustandStore","useStoreApi","useMemo"],"mappings":"+GAQA,SAASA,EACPC,EACAC,EACA,CACA,MAAMC,EAAQC,aAAWC,SAAY,EAErC,GAAIF,IAAU,KACZ,MAAM,IAAI,MAAM,6BAAmB,EAGrC,OAAOG,EAAAA,uBAAgBH,EAAOF,EAAUC,CAAU,CACpD,CAEA,SAASK,GAA4C,CACnD,MAAMJ,EAAQC,EAAWC,WAAAA,SAAY,EAErC,GAAIF,IAAU,KACZ,MAAM,IAAI,MAAM,6BAAmB,EAGrC,OAAOK,UACL,KAAO,CACL,SAAUL,EAAM,SAChB,SAAUA,EAAM,SAChB,UAAWA,EAAM,SACnB,GACA,CAACA,CAAK,CACR,CACF"}
+{"version":3,"file":"useStore.cjs","sources":["../../../src/hooks/useStore.ts"],"sourcesContent":["import { useContext, useMemo } from 'react'\nimport type { StoreApi } from 'zustand'\nimport type { UseBoundStoreWithEqualityFn } from 'zustand/traditional'\nimport { useStoreWithEqualityFn as useZustandStore } from 'zustand/traditional'\nimport StoreContext from '../contexts/StoreContext'\nimport type { Node } from '../types/nodes'\nimport type { ReactFabricState } from '../types/store'\n\nfunction useStore<StateSlice = unknown>(\n  selector: (state: ReactFabricState) => StateSlice,\n  equalityFn?: (a: StateSlice, b: StateSlice) => boolean,\n) {\n  const store = useContext(StoreContext)\n\n  if (store === null) {\n    throw new Error('useReactFabric 需要搭配 zustandProvider')\n  }\n\n  return useZustandStore(store, selector, equalityFn)\n}\n\nfunction useStoreApi<NodeType extends Node = Node>() {\n  const store = useContext(StoreContext) as UseBoundStoreWithEqualityFn<StoreApi<ReactFabricState<NodeType>>> | null\n\n  if (store === null) {\n    throw new Error('缺失zustandProvider')\n  }\n\n  return useMemo(\n    () => ({\n      getState: store.getState,\n      setState: store.setState,\n      subscribe: store.subscribe,\n    }),\n    [store],\n  )\n}\n\nexport { useStore, useStoreApi }\n"],"names":["useStore","selector","equalityFn","store","useContext","StoreContext","useZustandStore","useStoreApi","useMemo"],"mappings":"+GAQA,SAASA,EACPC,EACAC,EACA,CACA,MAAMC,EAAQC,aAAWC,SAAY,EAErC,GAAIF,IAAU,KACZ,MAAM,IAAI,MAAM,yDAAqC,EAGvD,OAAOG,EAAAA,uBAAgBH,EAAOF,EAAUC,CAAU,CACpD,CAEA,SAASK,GAA4C,CACnD,MAAMJ,EAAQC,EAAWC,WAAAA,SAAY,EAErC,GAAIF,IAAU,KACZ,MAAM,IAAI,MAAM,6BAAmB,EAGrC,OAAOK,UACL,KAAO,CACL,SAAUL,EAAM,SAChB,SAAUA,EAAM,SAChB,UAAWA,EAAM,SACnB,GACA,CAACA,CAAK,CACR,CACF"}

package/dist/cjs/index.cjs

@@ -1,2 +1,2 @@
-"use strict";var e=require("./container/ReactFabric/index.cjs"),r=require("./hooks/useReactFabric.cjs"),a=require("./hooks/useZoom.cjs"),i=require("./toolbar/Vertical/index.cjs"),u=require("./components/BackgroundImage/index.cjs"),d=require("./components/Canvas/index.cjs"),t=require("./components/Group/index.cjs"),l=require("./components/NodeToolbarPortal/index.cjs"),n=require("./components/ReactFabricProvider.cjs"),c=require("./components/Rect/index.cjs"),v=require("./components/Control/index.cjs"),o=require("./components/Text/index.cjs"),q=require("./components/Path/index.cjs"),f=require("./components/Line/index.cjs"),x=require("./components/Ellipse/index.cjs"),$=require("./components/Objects/index.cjs"),b=require("./plugins/FreeRect.cjs"),s=require("./plugins/GridLine.cjs"),P=require("./plugins/Pinch.cjs");exports.ReactFabric=e.default,exports.useReactFabric=r.useReactFabric,exports.useZoom=a.useZoom,exports.PluginToolbarVertical=i.default,exports.BackgroundImage=u.default,exports.Canvas=d.default,exports.Group=t.default,exports.NodeToolbarPortal=l.default,exports.ReactFabricProvider=n.ReactFabricProvider,exports.Rect=c.default,exports.Control=v.default,exports.Text=o.default,exports.Path=q.default,exports.Line=f.default,exports.Ellipse=x.default,exports.Objects=$.default,exports.PluginFreeRect=b.default,exports.PluginGridLine=s.default,exports.PluginPinch=P.default;
+"use strict";var e=require("./container/ReactFabric/index.cjs"),r=require("./hooks/useReactFabric.cjs"),a=require("./hooks/useZoom.cjs"),i=require("./components/BackgroundImage/index.cjs"),u=require("./components/Canvas/index.cjs"),d=require("./components/Group/index.cjs"),t=require("./components/NodeToolbarPortal/index.cjs"),l=require("./components/ReactFabricProvider.cjs"),n=require("./components/Rect/index.cjs"),v=require("./components/Control/index.cjs"),q=require("./components/Image/index.cjs"),c=require("./components/Control2/index.cjs"),f=require("./components/Text/index.cjs"),x=require("./components/Path/index.cjs"),o=require("./components/Line/index.cjs"),$=require("./components/Ellipse/index.cjs"),F=require("./components/IText/index.cjs"),P=require("./components/Textbox/index.cjs"),b=require("./components/WavyLine/index.cjs"),s=require("./components/Objects/index.cjs"),R=require("./plugins/FreeRect.cjs"),g=require("./plugins/GridLine.cjs"),T=require("./plugins/Pinch.cjs"),m=require("./plugins/FreeDraw.cjs"),h=require("./plugins/FreeText.cjs");exports.ReactFabric=e.default,exports.useReactFabric=r.useReactFabric,exports.useZoom=a.useZoom,exports.BackgroundImage=i.default,exports.Canvas=u.default,exports.Group=d.default,exports.NodeToolbarPortal=t.default,exports.ReactFabricProvider=l.ReactFabricProvider,exports.Rect=n.default,exports.Control=v.default,exports.Image=q.default,exports.Control2=c.default,exports.Text=f.default,exports.Path=x.default,exports.Line=o.default,exports.Ellipse=$.default,exports.IText=F.default,exports.Textbox=P.default,exports.WavyLine=b.default,exports.Objects=s.default,exports.PluginFreeRect=R.default,exports.PluginGrid=g.default,exports.PluginPinch=T.default,exports.PluginFreeDraw=m.default,exports.PluginFreeText=h.default;
 //# sourceMappingURL=index.cjs.map

package/dist/cjs/plugins/FreeDraw.cjs

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var o=require("fabric"),i=require("react"),c=require("../hooks/useStore.cjs");const f=({onComplete:a})=>{const t=c.useStoreApi();i.useEffect(()=>{const{canvas:e}=t.getState();if(e)return e.isDrawingMode=!0,e.freeDrawingBrush=new o.PencilBrush(e),e.freeDrawingBrush&&(e.freeDrawingBrush.color="red",e.freeDrawingBrush.width=2),e.on("path:created",n),()=>{e.isDrawingMode=!1,e.off("path:created",n)}},[t,a]);const n=e=>{const{path:s}=e,{canvas:r}=t.getState();if(!r)return;const u=()=>{r?.remove(s),r?.requestRenderAll()};Promise.resolve(a(s,{canvas:r})).finally(u)};return null};exports.default=f;
+//# sourceMappingURL=FreeDraw.cjs.map

package/dist/cjs/plugins/FreeDraw.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"FreeDraw.cjs","sources":["../../../src/plugins/FreeDraw.tsx"],"sourcesContent":["import type { Canvas, Path } from 'fabric'\nimport { PencilBrush } from 'fabric'\nimport { useEffect } from 'react'\nimport { useStoreApi } from '../hooks/useStore'\n\nexport type PluginFreeDrawProps = Partial<Path> & {\n    onComplete: (path: Path, { canvas }: { canvas: Canvas }) => void\n}\n\nconst PluginFreeDraw = ({ onComplete }: PluginFreeDrawProps) => {\n    const store = useStoreApi()\n\n    useEffect(() => {\n        const { canvas } = store.getState()\n        if (!canvas) return\n\n        canvas.isDrawingMode = true\n        canvas.freeDrawingBrush = new PencilBrush(canvas)\n        if (canvas.freeDrawingBrush) {\n            canvas.freeDrawingBrush.color = 'red'\n            canvas.freeDrawingBrush.width = 2\n        }\n\n        canvas.on('path:created', handlePathCreated)\n\n        return () => {\n            canvas.isDrawingMode = false\n            canvas.off('path:created', handlePathCreated)\n        }\n    }, [store, onComplete])\n\n    const handlePathCreated = (opt: { path: Path }) => {\n        const { path } = opt\n        const { canvas } = store.getState()\n        if (!canvas) return\n\n        const cleanup = () => {\n            canvas?.remove(path)\n            canvas?.requestRenderAll()\n        }\n\n        Promise.resolve(\n            onComplete(path, {\n                canvas: canvas,\n            }),\n        ).finally(cleanup)\n    }\n\n    return null\n}\n\nexport default PluginFreeDraw\n"],"names":["PluginFreeDraw","onComplete","store","useStoreApi","useEffect","canvas","PencilBrush","handlePathCreated","opt","path","cleanup"],"mappings":"kJASA,MAAMA,EAAiB,CAAC,CAAE,WAAAC,CAAW,IAA2B,CAC5D,MAAMC,EAAQC,EAAAA,YAAAA,EAEdC,EAAAA,UAAU,IAAM,CACZ,KAAM,CAAE,OAAAC,CAAO,EAAIH,EAAM,SACzB,EAAA,GAAKG,EAEL,OAAAA,EAAO,cAAgB,GACvBA,EAAO,iBAAmB,IAAIC,EAAAA,YAAYD,CAAM,EAC5CA,EAAO,mBACPA,EAAO,iBAAiB,MAAQ,MAChCA,EAAO,iBAAiB,MAAQ,GAGpCA,EAAO,GAAG,eAAgBE,CAAiB,EAEpC,IAAM,CACTF,EAAO,cAAgB,GACvBA,EAAO,IAAI,eAAgBE,CAAiB,CAChD,CACJ,EAAG,CAACL,EAAOD,CAAU,CAAC,EAEtB,MAAMM,EAAqBC,GAAwB,CAC/C,KAAM,CAAE,KAAAC,CAAK,EAAID,EACX,CAAE,OAAAH,CAAO,EAAIH,EAAM,WACzB,GAAI,CAACG,EAAQ,OAEb,MAAMK,EAAU,IAAM,CAClBL,GAAQ,OAAOI,CAAI,EACnBJ,GAAQ,iBAAA,CACZ,EAEA,QAAQ,QACJJ,EAAWQ,EAAM,CACb,OAAQJ,CACZ,CAAC,CACL,EAAE,QAAQK,CAAO,CACrB,EAEA,OAAO,IACX"}

package/dist/cjs/plugins/FreeRect.cjs

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var A=require("fabric"),o=require("react"),C=require("../hooks/useStore.cjs");const h={stroke:"#04aa65",strokeWidth:5,fill:"transparent"},R=({onComplete:f,disableWhenActive:d=!0,...s})=>{const m=C.useStoreApi(),u=o.useRef(null),t=o.useRef(null),c=o.useRef(!1),l=o.useRef(!1),a=o.useMemo(()=>s?.strokeWidth??h.strokeWidth,[s?.strokeWidth]);return o.useEffect(()=>{const{canvas:e}=m.getState();if(!e)return;const y=e.hoverCursor;e.hoverCursor="crosshair";const v=r=>{if(!u.current||!t.current)return;const{x:n,y:i}=e.getScenePoint(r.e);t.current.set({left:Math.min(u.current.x,n),top:Math.min(u.current.y,i),width:Math.abs(n-u.current.x)-a,height:Math.abs(i-u.current.y)-a}),t.current.setCoords(),e.requestRenderAll()},p=()=>{if(e.off("mouse:move",v),e.off("mouse:up",p),!t.current)return;const r=t.current,n=()=>{e.remove(r),u.current=null,t.current=null,c.current=!1,l.current=!1,e.requestRenderAll()};if(r.width<10||r.height<10)n();else{const i=r.getCoords();l.current=!0,Promise.resolve(f({...h,...s,left:r.left,top:r.top,width:r.width,height:r.height,pointsArray:i.reduce((M,w)=>[...M,Math.round(w.x),Math.round(w.y)],[])},{canvas:e})).finally(n)}},g=r=>{if(c.current||l.current)return;const n=e.getScenePoint(r.e);u.current=n,!(d&&e.getActiveObject())&&(c.current=!0,t.current=new A.Rect({...h,left:n.x,top:n.y,width:0,height:0,...s}),e.add(t.current),e.on("mouse:move",v),e.on("mouse:up",p))};return e.on("mouse:down",g),()=>{e.hoverCursor=y,e.off("mouse:down",g),t.current&&e.remove(t.current),c.current=!1,e.requestRenderAll()}},[m,f,s,a,d]),null};exports.default=R;
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var A=require("fabric"),o=require("react"),C=require("../hooks/useStore.cjs");const h={stroke:"#04aa65",strokeWidth:5,fill:"transparent"},R=({onComplete:f,disableWhenActive:d=!0,...s})=>{const v=C.useStoreApi(),u=o.useRef(null),t=o.useRef(null),c=o.useRef(!1),l=o.useRef(!1),a=o.useMemo(()=>s?.strokeWidth??h.strokeWidth,[s?.strokeWidth]);return o.useEffect(()=>{const{canvas:e}=v.getState();if(!e)return;const y=e.hoverCursor;e.hoverCursor="crosshair";const m=r=>{if(!u.current||!t.current)return;const{x:n,y:i}=e.getScenePoint(r.e);t.current.set({left:Math.min(u.current.x,n),top:Math.min(u.current.y,i),width:Math.abs(n-u.current.x)-a,height:Math.abs(i-u.current.y)-a}),t.current.setCoords(),e.requestRenderAll()},p=()=>{if(e.off("mouse:move",m),e.off("mouse:up",p),!t.current)return;const r=t.current,n=()=>{e.remove(r),u.current=null,t.current=null,c.current=!1,l.current=!1,e.requestRenderAll()};if(r.width<10||r.height<10)n();else{const i=r.getCoords();l.current=!0,Promise.resolve(f({...h,...s,left:r.left,top:r.top,width:r.width,height:r.height,pointsArray:i.reduce((M,w)=>[...M,Math.round(w.x),Math.round(w.y)],[])},{canvas:e})).finally(n)}},g=r=>{if(c.current||l.current)return;const n=e.getScenePoint(r.e);u.current=n,!(d&&e.getActiveObject())&&(c.current=!0,t.current=new A.Rect({...h,left:n.x,top:n.y,width:0,height:0,...s}),e.add(t.current),e.on("mouse:move",m),e.on("mouse:up",p))};return e.on("mouse:down",g),()=>{e.hoverCursor=y,e.off("mouse:down",g),t.current&&e.remove(t.current),c.current=!1,e.requestRenderAll()}},[v,f,s,a,d]),null};exports.default=R;
 //# sourceMappingURL=FreeRect.cjs.map

package/dist/cjs/plugins/FreeText.cjs

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var d=require("fabric"),u=require("react"),f=require("../hooks/useStore.cjs");const v=({options:c,onComplete:r})=>{const o=f.useStoreApi(),t=u.useRef(null);return u.useEffect(()=>{const{canvas:e}=o.getState();if(!e)return;const n=i=>{if(e.getActiveObject())return;const{x:s,y:l}=e.getScenePoint(i.e),a={fontSize:24,left:s,top:l,fill:"red",stroke:"red",borderColor:"#FFFF00",editingBorderColor:"#FFFF00",selectable:!0,editable:!0,_controlsVisibility:{mtr:!1,mr:!1,mt:!1,mb:!1,ml:!1}};t.current=new d.IText("\u8BF7\u8F93\u5165\u6587\u5B57",{...a,...c}),e.add(t.current),e.setActiveObject(t.current),e.remove(t.current),r(t.current,{canvas:e})};return e.on("mouse:down",n),()=>{e.off("mouse:down",n)}},[o,r]),null};exports.default=v;
+//# sourceMappingURL=FreeText.cjs.map

package/dist/cjs/plugins/FreeText.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"FreeText.cjs","sources":["../../../src/plugins/FreeText.tsx"],"sourcesContent":["import type { Canvas, ITextProps, TPointerEvent, TPointerEventInfo } from 'fabric'\nimport { IText } from 'fabric'\nimport { useEffect, useRef } from 'react'\nimport { useStoreApi } from '../hooks/useStore'\n\nexport type PluginFreeTextProps = Partial<IText> & {\n    options?: Partial<ITextProps>\n    onComplete: (text: IText, { canvas }: { canvas: Canvas }) => void\n}\n\nconst PluginFreeText = ({ options, onComplete }: PluginFreeTextProps) => {\n    const store = useStoreApi()\n    const textRef = useRef<IText | null>(null)\n\n    useEffect(() => {\n        const { canvas } = store.getState()\n        if (!canvas) return\n\n        const handleMouseDown = (opt: TPointerEventInfo<TPointerEvent>) => {\n            const activeObject = canvas.getActiveObject()\n            if (activeObject) {\n                return\n            }\n\n            const { x: currentX, y: currentY } = canvas.getScenePoint(opt.e)\n            const defaultOptions = {\n                fontSize: 24,\n                left: currentX,\n                top: currentY,\n                fill: 'red',\n                stroke: 'red',\n                borderColor: '#FFFF00',\n                editingBorderColor: '#FFFF00',\n                selectable: true,\n                editable: true,\n                _controlsVisibility: {\n                    mtr: false,\n                    mr: false,\n                    mt: false,\n                    mb: false,\n                    ml: false,\n                },\n            }\n            textRef.current = new IText('请输入文字', {\n                ...defaultOptions,\n                ...options,\n            })\n            canvas.add(textRef.current)\n            canvas.setActiveObject(textRef.current)\n            canvas.remove(textRef.current)\n            onComplete(textRef.current, {\n                canvas: canvas,\n            })\n            // textRef.current.on('editing:exited', () => {\n            //   console.log('textRef.current', textRef.current)\n            // })\n        }\n\n        canvas.on('mouse:down', handleMouseDown)\n\n        return () => {\n            canvas.off('mouse:down', handleMouseDown)\n        }\n    }, [store, onComplete])\n\n    return null\n}\n\nexport default PluginFreeText\n"],"names":["PluginFreeText","options","onComplete","store","useStoreApi","textRef","useRef","useEffect","canvas","handleMouseDown","opt","currentX","currentY","defaultOptions","IText"],"mappings":"kJAUMA,MAAAA,EAAiB,CAAC,CAAE,QAAAC,EAAS,WAAAC,CAAW,IAA2B,CACrE,MAAMC,EAAQC,EAAAA,YACRC,EAAAA,EAAUC,EAAqB,OAAA,IAAI,EAEzC,OAAAC,YAAU,IAAM,CACZ,KAAM,CAAE,OAAAC,CAAO,EAAIL,EAAM,WACzB,GAAI,CAACK,EAAQ,OAEb,MAAMC,EAAmBC,GAA0C,CAE/D,GADqBF,EAAO,kBAExB,OAGJ,KAAM,CAAE,EAAGG,EAAU,EAAGC,CAAS,EAAIJ,EAAO,cAAcE,EAAI,CAAC,EACzDG,EAAiB,CACnB,SAAU,GACV,KAAMF,EACN,IAAKC,EACL,KAAM,MACN,OAAQ,MACR,YAAa,UACb,mBAAoB,UACpB,WAAY,GACZ,SAAU,GACV,oBAAqB,CACjB,IAAK,GACL,GAAI,GACJ,GAAI,GACJ,GAAI,GACJ,GAAI,EACR,CACJ,EACAP,EAAQ,QAAU,IAAIS,EAAM,MAAA,iCAAS,CACjC,GAAGD,EACH,GAAGZ,CACP,CAAC,EACDO,EAAO,IAAIH,EAAQ,OAAO,EAC1BG,EAAO,gBAAgBH,EAAQ,OAAO,EACtCG,EAAO,OAAOH,EAAQ,OAAO,EAC7BH,EAAWG,EAAQ,QAAS,CACxB,OAAQG,CACZ,CAAC,CAIL,EAEA,OAAAA,EAAO,GAAG,aAAcC,CAAe,EAEhC,IAAM,CACTD,EAAO,IAAI,aAAcC,CAAe,CAC5C,CACJ,EAAG,CAACN,EAAOD,CAAU,CAAC,EAEf,IACX"}

package/dist/cjs/plugins/Mask.cjs

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var o=require("react/jsx-runtime"),f=require("fabric"),n=require("react"),b=require("../hooks/useStore.cjs");const m=d=>{const{defaultFill:s=!1,fullness:c=!1}=d,l=b.useStoreApi(),{canvas:e}=l.getState(),t=n.useRef(null),a=()=>new f.Rect({left:0,top:0,fill:"rgba(0,0,0,0.2)",selectable:!1,evented:!1,excludeFromExport:!0,isMask:!0}),i=()=>{e?.backgroundImage&&(t.current?(t.current.set({clipPath:null}),e.requestRenderAll()):(t.current=a(),t.current.set({width:e.backgroundImage?.width,height:e.backgroundImage?.height}),e.add(t.current),e.moveObjectTo(t.current,-999)))};return n.useEffect(()=>{c&&i()},[c]),n.useEffect(()=>{if(!e)return;s&&i();const u=g=>{const{selected:h}=g,r=h[0];!e||!r||r.get("showMark")&&(r.inverted=!0,r.absolutePositioned=!0,t.current?(t.current.set({width:e.backgroundImage?.width||t.current.width,height:e.backgroundImage?.height||t.current.height,clipPath:r}),e.requestRenderAll()):(t.current=a(),setTimeout(()=>{t.current&&(t.current.set({width:e.backgroundImage?.width,height:e.backgroundImage?.height,clipPath:r}),e.add(t.current),e.moveObjectTo(t.current,-999))},100)))};return e.on("selection:created",u),e.on("selection:updated",u),()=>{t.current&&(e.remove(t.current),t.current=null),e.off("selection:created",u),e.off("selection:updated",u),e.requestRenderAll()}},[e]),o.jsx(o.Fragment,{})};exports.default=m;
+//# sourceMappingURL=Mask.cjs.map

package/dist/cjs/plugins/Mask.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Mask.cjs","sources":["../../../src/plugins/Mask.tsx"],"sourcesContent":["import { Rect } from 'fabric'\nimport { useEffect, useRef } from 'react'\nimport { useStoreApi } from '../hooks/useStore'\n\nexport type PluginMaskProps = {\n    defaultFill?: boolean // 是否默认没有选择对象时，蒙层遮住整个图片\n    fullness?: boolean // 是否完全遮住\n}\n\n/** 聚焦对象时蒙层；边界是背景图片 */\nconst PluginMask = (props: PluginMaskProps) => {\n    const { defaultFill = false, fullness = false } = props\n    const store = useStoreApi()\n    const { canvas } = store.getState()\n    const maskRectRef = useRef<Rect | null>(null)\n\n    const initMaskRect = () => {\n        return new Rect({\n            left: 0,\n            top: 0,\n            fill: 'rgba(0,0,0,0.2)' /** 半透明灰色 */,\n            selectable: false,\n            evented: false,\n            excludeFromExport: true /** toJSON 不存在，getObjects 存在 */,\n            isMask: true,\n        })\n    }\n\n    const renderDefaultMask = () => {\n        if (!canvas?.backgroundImage) return\n\n        if (maskRectRef.current) {\n            maskRectRef.current.set({\n                clipPath: null,\n            })\n            canvas.requestRenderAll()\n        } else {\n            maskRectRef.current = initMaskRect()\n            maskRectRef.current.set({\n                width: canvas.backgroundImage?.width,\n                height: canvas.backgroundImage?.height,\n            })\n            canvas.add(maskRectRef.current)\n            canvas.moveObjectTo(maskRectRef.current, -999)\n        }\n    }\n\n    useEffect(() => {\n        if (fullness) renderDefaultMask()\n    }, [fullness])\n\n    useEffect(() => {\n        if (!canvas) return\n        if (defaultFill) renderDefaultMask()\n\n        const renderMask = (e: any) => {\n            const { selected } = e\n            const target = selected[0]\n            if (!canvas || !target) return\n            if (!target.get('showMark')) return\n\n            /** 必须加上以下参数，才能裁切成功 */\n            target.inverted = true\n            target.absolutePositioned = true\n            /** 从未触发过时，初始化蒙层 */\n            if (!maskRectRef.current) {\n                maskRectRef.current = initMaskRect()\n                setTimeout(() => {\n                    if (!maskRectRef.current) return\n                    maskRectRef.current.set({\n                        width: canvas.backgroundImage?.width,\n                        height: canvas.backgroundImage?.height,\n                        clipPath: target,\n                    })\n                    canvas.add(maskRectRef.current)\n                    canvas.moveObjectTo(maskRectRef.current, -999)\n                }, 100)\n            } else {\n                maskRectRef.current.set({\n                    width: canvas.backgroundImage?.width || maskRectRef.current.width,\n                    height: canvas.backgroundImage?.height || maskRectRef.current.height,\n                    clipPath: target,\n                })\n                canvas.requestRenderAll()\n            }\n        }\n\n        /** 第一次是点击触发 created，切换另一个框是触发 updated */\n        canvas.on('selection:created', renderMask)\n        canvas.on('selection:updated', renderMask)\n\n        return () => {\n            if (maskRectRef.current) {\n                canvas.remove(maskRectRef.current)\n                maskRectRef.current = null\n            }\n            canvas.off('selection:created', renderMask)\n            canvas.off('selection:updated', renderMask)\n            canvas.requestRenderAll()\n        }\n    }, [canvas])\n\n    return <></>\n}\n\nexport default PluginMask\n"],"names":["PluginMask","props","defaultFill","fullness","store","useStoreApi","canvas","maskRectRef","useRef","initMaskRect","Rect","renderDefaultMask","useEffect","renderMask","e","selected","target","jsx","Fragment"],"mappings":"iLAUA,MAAMA,EAAcC,GAA2B,CAC3C,KAAM,CAAE,YAAAC,EAAc,GAAO,SAAAC,EAAW,EAAM,EAAIF,EAC5CG,EAAQC,cAAY,EACpB,CAAE,OAAAC,CAAO,EAAIF,EAAM,SACnBG,EAAAA,EAAcC,EAAAA,OAAoB,IAAI,EAEtCC,EAAe,IACV,IAAIC,EAAAA,KAAK,CACZ,KAAM,EACN,IAAK,EACL,KAAM,kBACN,WAAY,GACZ,QAAS,GACT,kBAAmB,GACnB,OAAQ,EACZ,CAAC,EAGCC,EAAoB,IAAM,CACvBL,GAAQ,kBAETC,EAAY,SACZA,EAAY,QAAQ,IAAI,CACpB,SAAU,IACd,CAAC,EACDD,EAAO,iBAAiB,IAExBC,EAAY,QAAUE,EAAa,EACnCF,EAAY,QAAQ,IAAI,CACpB,MAAOD,EAAO,iBAAiB,MAC/B,OAAQA,EAAO,iBAAiB,MACpC,CAAC,EACDA,EAAO,IAAIC,EAAY,OAAO,EAC9BD,EAAO,aAAaC,EAAY,QAAS,IAAI,GAErD,EAEA,OAAAK,EAAAA,UAAU,IAAM,CACRT,GAAUQ,EAAAA,CAClB,EAAG,CAACR,CAAQ,CAAC,EAEbS,YAAU,IAAM,CACZ,GAAI,CAACN,EAAQ,OACTJ,GAAaS,IAEjB,MAAME,EAAcC,GAAW,CAC3B,KAAM,CAAE,SAAAC,CAAS,EAAID,EACfE,EAASD,EAAS,CAAC,EACrB,CAACT,GAAU,CAACU,GACXA,EAAO,IAAI,UAAU,IAG1BA,EAAO,SAAW,GAClBA,EAAO,mBAAqB,GAEvBT,EAAY,SAabA,EAAY,QAAQ,IAAI,CACpB,MAAOD,EAAO,iBAAiB,OAASC,EAAY,QAAQ,MAC5D,OAAQD,EAAO,iBAAiB,QAAUC,EAAY,QAAQ,OAC9D,SAAUS,CACd,CAAC,EACDV,EAAO,iBAAiB,IAjBxBC,EAAY,QAAUE,EAAa,EACnC,WAAW,IAAM,CACRF,EAAY,UACjBA,EAAY,QAAQ,IAAI,CACpB,MAAOD,EAAO,iBAAiB,MAC/B,OAAQA,EAAO,iBAAiB,OAChC,SAAUU,CACd,CAAC,EACDV,EAAO,IAAIC,EAAY,OAAO,EAC9BD,EAAO,aAAaC,EAAY,QAAS,IAAI,EACjD,EAAG,GAAG,GASd,EAGA,OAAAD,EAAO,GAAG,oBAAqBO,CAAU,EACzCP,EAAO,GAAG,oBAAqBO,CAAU,EAElC,IAAM,CACLN,EAAY,UACZD,EAAO,OAAOC,EAAY,OAAO,EACjCA,EAAY,QAAU,MAE1BD,EAAO,IAAI,oBAAqBO,CAAU,EAC1CP,EAAO,IAAI,oBAAqBO,CAAU,EAC1CP,EAAO,iBAAA,CACX,CACJ,EAAG,CAACA,CAAM,CAAC,EAEJW,EAAAA,IAAAC,EAAAA,SAAA,CAAA,CAAE,CACb"}

package/dist/cjs/plugins/Pinch.cjs

@@ -1,2 +1,2 @@
-"use strict";var w=Object.create;var f=Object.defineProperty;var S=Object.getOwnPropertyDescriptor;var g=Object.getOwnPropertyNames;var Z=Object.getPrototypeOf,b=Object.prototype.hasOwnProperty;var y=(e,t,c,s)=>{if(t&&typeof t=="object"||typeof t=="function")for(let a of g(t))!b.call(e,a)&&a!==c&&f(e,a,{get:()=>t[a],enumerable:!(s=S(t,a))||s.enumerable});return e};var P=(e,t,c)=>(c=e!=null?w(Z(e)):{},y(t||!e||!e.__esModule?f(c,"default",{value:e,enumerable:!0}):c,e));Object.defineProperty(exports,"__esModule",{value:!0});var m=require("react"),q=require("../hooks/useStore.cjs"),v=require("fabric");const M=()=>{const e=q.useStoreApi(),{canvas:t}=e.getState(),c=m.useRef(1);return m.useEffect(()=>{let s=()=>{};const a=n=>{const{canvas:o,manualZoom:h,fitZoom:d,minManualZoom:u,maxManualZoom:l}=e.getState();let r=n.scale*h;r<=u&&(r=u),r>=l&&(r=l);const p=r*d,E=n.srcEvent instanceof TouchEvent?new v.Point(n.srcEvent.touches[0].clientX,n.srcEvent.touches[0].clientY):new v.Point(n.srcEvent.offsetX,n.srcEvent.offsetY);o?.zoomToPoint(E,p),c.current=r},i=()=>{const{fitZoom:n}=e.getState(),o=c.current*n;e.setState({manualZoom:c.current,zoom:o})};if(t)return(async()=>{try{const n=(await import("hammerjs")).default,o=new n(t.getSelectionElement());o.get("pinch").set({enable:!0}),o.on("pinchmove",a),o.on("pinchend",i),s=()=>{o.off("pinchmove",a),o.off("pinchend",i),o.destroy()}}catch{console.warn("Failed to load Hammer.js. Touch gestures will not be available.")}})(),()=>s()},[t,e]),null};exports.default=M;
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var m=require("react"),v=require("../hooks/useStore.cjs"),p=require("fabric");const g=()=>{const r=v.useStoreApi(),{canvas:c}=r.getState(),s=m.useRef(1);return m.useEffect(()=>{let t=null;const i=e=>{const{canvas:n,manualZoom:a,fitZoom:h,minManualZoom:l,maxManualZoom:f}=r.getState();let o=e.scale*a;o<=l&&(o=l),o>=f&&(o=f);const d=o*h;n?.zoomToPoint(new p.Point(e.srcEvent.offsetX,e.srcEvent.offsetY),d),s.current=o},u=()=>{const{fitZoom:e}=r.getState(),n=s.current*e;r.setState({manualZoom:s.current,zoom:n})};return(async()=>{try{if(!c)return;const e=c.getSelectionElement();if(!e)return;let n;try{const a=require("hammerjs");n=a.default||a}catch{console.warn("Pinch plugin disabled: hammerjs not found. Install hammerjs to enable touch gestures.");return}t=new n(e),t.get("pinch").set({enable:!0}),t.on("pinchmove",i),t.on("pinchend",u)}catch(e){console.warn("Pinch plugin disabled: hammerjs initialization failed.",e)}})(),()=>{t&&(t.off("pinchmove",i),t.off("pinchend",u),t.destroy())}},[c,r]),null};exports.default=g;
 //# sourceMappingURL=Pinch.cjs.map

package/dist/cjs/plugins/Pinch.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Pinch.cjs","sources":["../../../src/plugins/Pinch.tsx"],"sourcesContent":["import { useEffect, useRef } from 'react'\nimport { useStoreApi } from '../hooks/useStore'\nimport Hammer from 'hammerjs'\nimport { Point } from 'fabric'\n\n/**\n * 双指缩放（捏）\n * @param fabric\n * @returns\n */\nconst Pinch = () => {\n  const store = useStoreApi()\n  const { canvas } = store.getState()\n  // 双指缩放记录\n  const newManualZoomRef = useRef(1)\n  /**\n   * 注册时间\n   */\n  useEffect(() => {\n    let cleanup = () => {}\n    /**\n     * 双指缩放\n     * @param e\n     */\n    const onPinchMove = (e: HammerInput) => {\n      const { canvas, manualZoom, fitZoom, minManualZoom, maxManualZoom } = store.getState()\n      let newManualZoom = e.scale * manualZoom\n      // 最小缩放限制\n      if (newManualZoom <= minManualZoom) {\n        newManualZoom = minManualZoom\n      }\n      // 最大缩放限制\n      if (newManualZoom >= maxManualZoom) {\n        newManualZoom = maxManualZoom\n      }\n      // 计算原图比例\n      const combinedZoom = newManualZoom * fitZoom\n      // 渲染更新\n      const point =\n        e.srcEvent instanceof TouchEvent\n          ? new Point(e.srcEvent.touches[0].clientX, e.srcEvent.touches[0].clientY)\n          : new Point(e.srcEvent.offsetX, e.srcEvent.offsetY)\n      canvas?.zoomToPoint(point, combinedZoom)\n      // 记录手动缩放比例，onPinchEnd使用\n      newManualZoomRef.current = newManualZoom\n    }\n    /**\n     * 缩放结束\n     */\n    const onPinchEnd = () => {\n      const { fitZoom } = store.getState()\n      const combinedZoom = newManualZoomRef.current * fitZoom\n      store.setState({\n        manualZoom: newManualZoomRef.current,\n        zoom: combinedZoom,\n      })\n    }\n    if (!canvas) return\n    ;(async () => {\n      try {\n        const Hammer = (await import('hammerjs')).default\n        const hammer = new Hammer(canvas.getSelectionElement())\n        // 启用 pinch 事件识别器\n        hammer.get('pinch').set({ enable: true })\n\n        hammer.on('pinchmove', onPinchMove)\n        hammer.on('pinchend', onPinchEnd)\n\n        cleanup = () => {\n          hammer.off('pinchmove', onPinchMove)\n          hammer.off('pinchend', onPinchEnd)\n          hammer.destroy()\n        }\n      } catch (err) {\n        console.warn('Failed to load Hammer.js. Touch gestures will not be available.')\n      }\n    })()\n\n    return () => cleanup()\n  }, [canvas, store])\n\n  return null\n}\n\nexport default Pinch\n"],"names":["Pinch","store","useStoreApi","canvas","newManualZoomRef","useRef","useEffect","cleanup","onPinchMove","e","manualZoom","fitZoom","minManualZoom","maxManualZoom","newManualZoom","combinedZoom","point","Point","onPinchEnd","Hammer","hammer"],"mappings":"6lBAUA,MAAMA,EAAQ,IAAM,CAClB,MAAMC,EAAQC,EAAAA,YAAY,EACpB,CAAE,OAAAC,CAAO,EAAIF,EAAM,SAAS,EAE5BG,EAAmBC,EAAAA,OAAO,CAAC,EAIjC,OAAAC,EAAU,UAAA,IAAM,CACd,IAAIC,EAAU,IAAM,GAKpB,MAAMC,EAAeC,GAAmB,CACtC,KAAM,CAAE,OAAAN,EAAQ,WAAAO,EAAY,QAAAC,EAAS,cAAAC,EAAe,cAAAC,CAAc,EAAIZ,EAAM,WAC5E,IAAIa,EAAgBL,EAAE,MAAQC,EAE1BI,GAAiBF,IACnBE,EAAgBF,GAGdE,GAAiBD,IACnBC,EAAgBD,GAGlB,MAAME,EAAeD,EAAgBH,EAE/BK,EACJP,EAAE,oBAAoB,WAClB,IAAIQ,EAAAA,MAAMR,EAAE,SAAS,QAAQ,CAAC,EAAE,QAASA,EAAE,SAAS,QAAQ,CAAC,EAAE,OAAO,EACtE,IAAIQ,QAAMR,EAAE,SAAS,QAASA,EAAE,SAAS,OAAO,EACtDN,GAAQ,YAAYa,EAAOD,CAAY,EAEvCX,EAAiB,QAAUU,CAC7B,EAIMI,EAAa,IAAM,CACvB,KAAM,CAAE,QAAAP,CAAQ,EAAIV,EAAM,SAAS,EAC7Bc,EAAeX,EAAiB,QAAUO,EAChDV,EAAM,SAAS,CACb,WAAYG,EAAiB,QAC7B,KAAMW,CACR,CAAC,CACH,EACA,GAAKZ,EACJ,OAAC,SAAY,CACZ,GAAI,CACF,MAAMgB,GAAU,aAAa,UAAU,GAAG,QACpCC,EAAS,IAAID,EAAOhB,EAAO,oBAAoB,CAAC,EAEtDiB,EAAO,IAAI,OAAO,EAAE,IAAI,CAAE,OAAQ,EAAK,CAAC,EAExCA,EAAO,GAAG,YAAaZ,CAAW,EAClCY,EAAO,GAAG,WAAYF,CAAU,EAEhCX,EAAU,IAAM,CACda,EAAO,IAAI,YAAaZ,CAAW,EACnCY,EAAO,IAAI,WAAYF,CAAU,EACjCE,EAAO,QAAQ,CACjB,CACF,MAAc,CACZ,QAAQ,KAAK,iEAAiE,CAChF,CACF,KAEO,IAAMb,EAAAA,CACf,EAAG,CAACJ,EAAQF,CAAK,CAAC,EAEX,IACT"}
+{"version":3,"file":"Pinch.cjs","sources":["../../../src/plugins/Pinch.tsx"],"sourcesContent":["import { useEffect, useRef } from 'react'\nimport { useStoreApi } from '../hooks/useStore'\n\nimport { Point } from 'fabric'\n\n/**\n * 双指缩放（捏）插件\n *\n * 此组件提供触摸设备上的双指缩放功能。\n *\n * **依赖要求**：\n * 需要安装 hammerjs 来实现触摸手势识别：\n * ```bash\n * npm install hammerjs\n * # 如果使用 TypeScript，还需要安装类型定义\n * npm install @types/hammerjs\n * ```\n *\n * 如果没有安装 hammerjs，此组件会静默跳过初始化，不会影响其他功能。\n *\n * @returns null - 这是一个逻辑组件，不渲染任何UI\n */\nconst Pinch = () => {\n  const store = useStoreApi()\n  const { canvas } = store.getState()\n  // 双指缩放记录\n  const newManualZoomRef = useRef(1)\n\n  /**\n   * 注册时间\n   */\n  useEffect(() => {\n    let hammer: any = null\n\n    /**\n     * 双指缩放\n     * @param e\n     */\n    const onPinchMove = (e: any) => {\n      const { canvas, manualZoom, fitZoom, minManualZoom, maxManualZoom } = store.getState()\n      let newManualZoom = e.scale * manualZoom\n      // 最小缩放限制\n      if (newManualZoom <= minManualZoom) {\n        newManualZoom = minManualZoom\n      }\n      // 最大缩放限制\n      if (newManualZoom >= maxManualZoom) {\n        newManualZoom = maxManualZoom\n      }\n      // 计算原图比例\n      const combinedZoom = newManualZoom * fitZoom\n      // 渲染更新\n      canvas?.zoomToPoint(new Point(e.srcEvent.offsetX, e.srcEvent.offsetY), combinedZoom)\n      // 记录手动缩放比例，onPinchEnd使用\n      newManualZoomRef.current = newManualZoom\n    }\n    /**\n     * 缩放结束\n     */\n    const onPinchEnd = () => {\n      const { fitZoom } = store.getState()\n      const combinedZoom = newManualZoomRef.current * fitZoom\n      store.setState({\n        manualZoom: newManualZoomRef.current,\n        zoom: combinedZoom,\n      })\n    }\n\n    // 初始化 Hammer.js\n    const initialize = async () => {\n      try {\n        if (!canvas) return\n\n        const selectionElement = canvas.getSelectionElement()\n        if (!selectionElement) return\n\n        // 使用条件导入，避免构建时的依赖解析问题\n        let Hammer: any\n        try {\n          // 尝试导入 hammerjs，如果不存在则跳过\n          // eslint-disable-next-line @typescript-eslint/no-require-imports\n          const hammerjs = require('hammerjs')\n          Hammer = hammerjs.default || hammerjs\n        } catch {\n          // hammerjs 未安装，静默跳过\n          console.warn('Pinch plugin disabled: hammerjs not found. Install hammerjs to enable touch gestures.')\n          return\n        }\n\n        hammer = new Hammer(selectionElement)\n        // 启用 pinch 事件识别器\n        hammer.get('pinch').set({ enable: true })\n        hammer.on('pinchmove', onPinchMove)\n        hammer.on('pinchend', onPinchEnd)\n      } catch (error) {\n        // hammerjs 初始化失败，静默跳过\n        console.warn('Pinch plugin disabled: hammerjs initialization failed.', error)\n      }\n    }\n\n    initialize()\n\n    return () => {\n      if (hammer) {\n        hammer.off('pinchmove', onPinchMove)\n        hammer.off('pinchend', onPinchEnd)\n        hammer.destroy()\n      }\n    }\n  }, [canvas, store])\n\n  return null\n}\n\nexport default Pinch\n"],"names":["Pinch","store","useStoreApi","canvas","newManualZoomRef","useRef","useEffect","hammer","onPinchMove","e","manualZoom","fitZoom","minManualZoom","maxManualZoom","newManualZoom","combinedZoom","Point","onPinchEnd","selectionElement","Hammer","hammerjs","error"],"mappings":"kJAsBA,MAAMA,EAAQ,IAAM,CAClB,MAAMC,EAAQC,EAAAA,YAAY,EACpB,CAAE,OAAAC,CAAO,EAAIF,EAAM,SAAS,EAE5BG,EAAmBC,EAAAA,OAAO,CAAC,EAKjC,OAAAC,EAAAA,UAAU,IAAM,CACd,IAAIC,EAAc,KAMlB,MAAMC,EAAeC,GAAW,CAC9B,KAAM,CAAE,OAAAN,EAAQ,WAAAO,EAAY,QAAAC,EAAS,cAAAC,EAAe,cAAAC,CAAc,EAAIZ,EAAM,SAC5E,EAAA,IAAIa,EAAgBL,EAAE,MAAQC,EAE1BI,GAAiBF,IACnBE,EAAgBF,GAGdE,GAAiBD,IACnBC,EAAgBD,GAGlB,MAAME,EAAeD,EAAgBH,EAErCR,GAAQ,YAAY,IAAIa,EAAAA,MAAMP,EAAE,SAAS,QAASA,EAAE,SAAS,OAAO,EAAGM,CAAY,EAEnFX,EAAiB,QAAUU,CAC7B,EAIMG,EAAa,IAAM,CACvB,KAAM,CAAE,QAAAN,CAAQ,EAAIV,EAAM,WACpBc,EAAeX,EAAiB,QAAUO,EAChDV,EAAM,SAAS,CACb,WAAYG,EAAiB,QAC7B,KAAMW,CACR,CAAC,CACH,EAkCA,OA/BmB,SAAY,CAC7B,GAAI,CACF,GAAI,CAACZ,EAAQ,OAEb,MAAMe,EAAmBf,EAAO,oBAAoB,EACpD,GAAI,CAACe,EAAkB,OAGvB,IAAIC,EACJ,GAAI,CAGF,MAAMC,EAAW,QAAQ,UAAU,EACnCD,EAASC,EAAS,SAAWA,CAC/B,MAAQ,CAEN,QAAQ,KAAK,uFAAuF,EACpG,MACF,CAEAb,EAAS,IAAIY,EAAOD,CAAgB,EAEpCX,EAAO,IAAI,OAAO,EAAE,IAAI,CAAE,OAAQ,EAAK,CAAC,EACxCA,EAAO,GAAG,YAAaC,CAAW,EAClCD,EAAO,GAAG,WAAYU,CAAU,CAClC,OAASI,EAAO,CAEd,QAAQ,KAAK,yDAA0DA,CAAK,CAC9E,CACF,GAAA,EAIO,IAAM,CACPd,IACFA,EAAO,IAAI,YAAaC,CAAW,EACnCD,EAAO,IAAI,WAAYU,CAAU,EACjCV,EAAO,UAEX,CACF,EAAG,CAACJ,EAAQF,CAAK,CAAC,EAEX,IACT"}

package/dist/cjs/plugins/index.cjs

@@ -0,0 +1,2 @@
+"use strict";var e=require("./FreeRect.cjs"),r=require("./GridLine.cjs"),i=require("./Pinch.cjs"),u=require("./FreeDraw.cjs"),a=require("./FreeText.cjs");exports.PluginFreeRect=e.default,exports.PluginGrid=r.default,exports.PluginPinch=i.default,exports.PluginFreeDraw=u.default,exports.PluginFreeText=a.default;
+//# sourceMappingURL=index.cjs.map

package/dist/cjs/plugins/index.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.cjs","sources":[],"sourcesContent":[],"names":[],"mappings":""}

package/dist/cjs/store/index.cjs

@@ -1,2 +1,2 @@
-"use strict";var c=require("zustand/traditional"),l=require("./initialState.cjs");const h=({nodes:n,defaultNodes:r,width:u,height:g})=>c.createWithEqualityFn((a,o)=>({...l.default({nodes:n,width:u,height:g,defaultNodes:r}),setDimensions:e=>{const{width:t,height:d}=e,s=o(),i={width:t??s.width,height:d??s.height};o().canvas?.setDimensions(i),a(i)},setLoading:e=>{a({loading:e})},setDraggable:e=>{a({draggable:e});const t=o().canvas;t&&(t.setCursor(e?"grab":"default"),t.hoverCursor=e?"grab":"default",t.requestRenderAll())},setZoomable:e=>{a({zoomable:e})},setIsDragging:e=>{a({isDragging:e})},setSelection:e=>{const t=o().canvas;t&&(a({selection:e}),t.set("selection",e),t.requestRenderAll())},setDefaultDraggable:e=>{if(e===void 0)return;const{setDraggable:t}=o();a({hasDefaultDraggable:!0}),t(e)},setDefaultSelection:e=>{if(e===void 0)return;const{setSelection:t}=o();a({hasDefaultSelection:!0}),t(e)},setFitZoom:e=>{a({fitZoom:e})},setManualZoom:e=>{a({manualZoom:e})},setMinManualZoom:e=>{a({minManualZoom:e})},setZoom:e=>{a({zoom:e})},setMaxManualZoom:e=>{a({maxManualZoom:e})},reset:()=>a({...l.default()})}),Object.is);exports.createStore=h;
+"use strict";var c=require("zustand/traditional"),l=require("./initialState.cjs");const h=({nodes:n,defaultNodes:r,width:u,height:g})=>c.createWithEqualityFn((a,t)=>({...l.default({nodes:n,width:u,height:g,defaultNodes:r}),setDimensions:e=>{const{width:o,height:d}=e,s=t(),i={width:o??s.width,height:d??s.height};t().canvas?.setDimensions(i),a(i)},setLoading:e=>{a({loading:e})},setDraggable:e=>{a({draggable:e});const o=t().canvas;o&&(o.setCursor(e?"grab":"default"),o.hoverCursor=e?"grab":"default",o.requestRenderAll())},setZoomable:e=>{a({zoomable:e})},setIsDragging:e=>{a({isDragging:e})},setSelection:e=>{const o=t().canvas;o&&(a({selection:e}),o.set("selection",e),o.requestRenderAll())},setDefaultDraggable:e=>{if(e===void 0)return;const{setDraggable:o}=t();a({hasDefaultDraggable:!0}),o(e)},setDefaultSelection:e=>{if(e===void 0)return;const{setSelection:o}=t();a({hasDefaultSelection:!0}),o(e)},setFitZoom:e=>{a({fitZoom:e})},setManualZoom:e=>{a({manualZoom:e})},setMinManualZoom:e=>{a({minManualZoom:e})},setZoom:e=>{a({zoom:e})},setMaxManualZoom:e=>{a({maxManualZoom:e})},setControls:e=>{a({controls:e})},reset:()=>a({...l.default()})}),Object.is);exports.createStore=h;
 //# sourceMappingURL=index.cjs.map