@cs-open/react-fabric 0.0.3 → 0.0.5

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"),a=require("react"),j=require("./Wrapper.cjs"),w=require("../../components/Canvas/index.cjs"),q=require("../../components/Loading/index.cjs"),y=require("../../components/StoreUpdater/index.cjs");const D={width:"100%",height:"100%",overflow:"hidden",position:"relative",zIndex:0},W=a.forwardRef(({minManualZoom:r,maxManualZoom:i,className:l,children:t,width:n,height:u,selection:d,style:s,onMouseWheel:c,onMouseDown:m,onMouseMove:h,onMouseUp:f,zoomable:M,defaultSelection:v,defaultCentered:x,defaultDraggable:p,...b},g)=>e.jsx("div",{style:{...s,...D},ref:g,className:`react-fabric ${l||""}`,children:e.jsxs(j.Wrapper,{width:n,height:u,children:[e.jsx(y.StoreUpdater,{minManualZoom:r,maxManualZoom:i,zoomable:M,defaultCentered:x,selection:d,defaultSelection:v,defaultDraggable:p}),e.jsx(w.default,{onMouseDown:m,onMouseMove:h,onMouseUp:f,onMouseWheel:c,...b,children:t}),e.jsx(q.default,{})]})})),o=a.memo(W);o.displayName="ReactFabric",exports.default=o;
+"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;
 //# 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 Loading from '../../components/Loading'\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          <Loading />\n        </Wrapper>\n      </div>\n    )\n  },\n)\n\ntype ReactFabricComponent = React.MemoExoticComponent<typeof ForwardReactFabric>\n\nconst ReactFabric: ReactFabricComponent = memo(ForwardReactFabric)\nReactFabric.displayName = 'ReactFabric'\n\nexport default ReactFabric\n"],"names":["wrapperStyle","ForwardReactFabric","forwardRef","minManualZoom","maxManualZoom","className","children","width","height","selection","style","onMouseWheel","onMouseDown","onMouseMove","onMouseUp","zoomable","defaultSelection","defaultCentered","defaultDraggable","rest","ref","jsx","jsxs","Wrapper","StoreUpdater","Canvas","Loading","ReactFabric","memo"],"mappings":"ySA6BMA,MAAAA,EAA8B,CAClC,MAAO,OACP,OAAQ,OACR,SAAU,SACV,SAAU,WACV,OAAQ,CACV,EA0BMC,EAAqBC,EAAAA,WACzB,CACE,CACE,cAAAC,EACA,cAAAC,EACA,UAAAC,EACA,SAAAC,EACA,MAAAC,EACA,OAAAC,EACA,UAAAC,EACA,MAAAC,EACA,aAAAC,EACA,YAAAC,EACA,YAAAC,EACA,UAAAC,EACA,SAAAC,EACA,iBAAAC,EACA,gBAAAC,EACA,iBAAAC,EACA,GAAGC,CACL,EACAC,IAGEC,EAAAA,IAAC,MAAI,CAAA,MAAO,CAAE,GAAGX,EAAO,GAAGV,CAAa,EAAG,IAAKoB,EAAK,UAAW,gBAAgBf,GAAa,EAAE,GAC7F,SAAAiB,EAAAA,KAACC,UAAA,CAAQ,MAAOhB,EAAO,OAAQC,EAC7B,SAAAa,CAAAA,MAACG,EAAAA,aAAA,CACC,cAAerB,EACf,cAAeC,EACf,SAAUW,EACV,gBAAiBE,EACjB,UAAWR,EACX,iBAAkBO,EAClB,iBAAkBE,CAAAA,CACpB,EAEAG,EAACI,IAAAA,EAAAA,QAAA,CACC,YAAab,EACb,YAAaC,EACb,UAAWC,EACX,aAAcH,EACb,GAAGQ,EAEH,SAAAb,EACH,EACAe,EAAAA,IAACK,EAAA,QAAA,CAAQ,CAAA,GACX,CACF,CAAA,CAGN,EAIMC,EAAoCC,OAAK3B,CAAkB,EACjE0B,EAAY,YAAc"}
+{"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"}

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"),v=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=v.useStoreApi(),{canvas:e,draggable:n}=v.useStore(b,g.shallow),o=u.useRef(0),l=u.useRef(0),a=u.useRef(!1);return u.useEffect(()=>{if(!n)return;const d=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),()=>{d(),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"),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;
 //# sourceMappingURL=useDraggable.cjs.map

package/dist/cjs/hooks/useDraggable.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"useDraggable.cjs","sources":["../../../src/hooks/useDraggable.ts"],"sourcesContent":["import type { Canvas, FabricObject, TPointerEvent, TPointerEventInfo } from 'fabric'\nimport { shallow } from 'zustand/shallow'\nimport { useEffect, useRef } from 'react'\nimport type { ReactFabricState } from '../types/store'\nimport { useStore, useStoreApi } from './useStore'\n\nconst selector = (s: ReactFabricState) => ({\n  canvas: s.canvas,\n  draggable: s.draggable,\n})\n\nconst stageObject = (object: FabricObject) => {\n  const raw = object.get('selectable')\n  object.set('selectable', false)\n\n  return () => {\n    object.set('selectable', raw)\n  }\n}\n\nconst stage = (canvas: Canvas | null) => {\n  if (!canvas) return () => {}\n  const objects = canvas.getObjects()\n\n  const unStagedList = objects.map(object => {\n    return stageObject(object)\n  })\n\n  return () => {\n    unStagedList.forEach(fn => fn())\n  }\n}\n\nconst useDraggable = () => {\n  const store = useStoreApi()\n  const { canvas, draggable } = useStore(selector, shallow)\n  const lastPosXRef = useRef(0)\n  const lastPosYRef = useRef(0)\n  const isDraggingRef = useRef(false)\n\n  useEffect(() => {\n    if (!draggable) return\n    const unStaged = stage(canvas)\n\n    const onMouseDown = ({ e }: TPointerEventInfo<MouseEvent>) => {\n      // @ts-expect-error 触摸屏拿不到clintX\n      const touch = e.changedTouches?.[0]\n      isDraggingRef.current = true\n      lastPosXRef.current = e.clientX ?? touch?.clientX\n      lastPosYRef.current = e.clientY ?? touch?.clientY\n    }\n\n    const onMouseMove = ({ e }: TPointerEventInfo<MouseEvent>) => {\n      if (isDraggingRef.current && canvas) {\n        var vpt = canvas.viewportTransform\n        // @ts-expect-error 触摸屏拿不到clintX\n        const touch = e.changedTouches?.[0]\n        vpt[4] += (e.clientX ?? touch?.clientX) - lastPosXRef.current!\n        vpt[5] += (e.clientY ?? touch?.clientY) - lastPosYRef.current!\n        canvas.requestRenderAll()\n        lastPosXRef.current = e.clientX ?? touch?.clientX\n        lastPosYRef.current = e.clientY ?? touch?.clientY\n      }\n    }\n\n    const onMouseUp = (_: TPointerEventInfo<TPointerEvent>) => {\n      if (canvas) {\n        canvas.setViewportTransform(canvas.viewportTransform)\n        isDraggingRef.current = false\n      }\n    }\n\n    canvas?.on('mouse:down', onMouseDown)\n    canvas?.on('mouse:move', onMouseMove)\n    canvas?.on('mouse:up', onMouseUp)\n\n    return () => {\n      unStaged()\n      canvas?.off('mouse:down', onMouseDown)\n      canvas?.off('mouse:move', onMouseMove)\n      canvas?.off('mouse:up', onMouseUp)\n    }\n  }, [canvas, draggable, store])\n\n  return null\n}\n\nexport default useDraggable\n"],"names":["selector","s","stageObject","object","raw","stage","canvas","unStagedList","fn","useDraggable","store","useStoreApi","draggable","useStore","shallow","lastPosXRef","useRef","lastPosYRef","isDraggingRef","useEffect","unStaged","onMouseDown","e","touch","onMouseMove","vpt","onMouseUp","_"],"mappings":"oJAMMA,MAAAA,EAAYC,IAAyB,CACzC,OAAQA,EAAE,OACV,UAAWA,EAAE,SACf,GAEMC,EAAeC,GAAyB,CAC5C,MAAMC,EAAMD,EAAO,IAAI,YAAY,EACnC,OAAAA,EAAO,IAAI,aAAc,EAAK,EAEvB,IAAM,CACXA,EAAO,IAAI,aAAcC,CAAG,CAC9B,CACF,EAEMC,EAASC,GAA0B,CACvC,GAAI,CAACA,EAAQ,MAAO,IAAM,CAAA,EAG1B,MAAMC,EAFUD,EAAO,aAEM,IAAIH,GACxBD,EAAYC,CAAM,CAC1B,EAED,MAAO,IAAM,CACXI,EAAa,QAAQC,GAAMA,EAAAA,CAAI,CACjC,CACF,EAEMC,EAAe,IAAM,CACzB,MAAMC,EAAQC,EAAY,YAAA,EACpB,CAAE,OAAAL,EAAQ,UAAAM,CAAU,EAAIC,EAASb,SAAAA,EAAUc,EAAO,OAAA,EAClDC,EAAcC,SAAO,CAAC,EACtBC,EAAcD,EAAAA,OAAO,CAAC,EACtBE,EAAgBF,EAAAA,OAAO,EAAK,EAElC,OAAAG,EAAAA,UAAU,IAAM,CACd,GAAI,CAACP,EAAW,OAChB,MAAMQ,EAAWf,EAAMC,CAAM,EAEvBe,EAAc,CAAC,CAAE,EAAAC,CAAE,IAAqC,CAE5D,MAAMC,EAAQD,EAAE,iBAAiB,CAAC,EAClCJ,EAAc,QAAU,GACxBH,EAAY,QAAUO,EAAE,SAAWC,GAAO,QAC1CN,EAAY,QAAUK,EAAE,SAAWC,GAAO,OAC5C,EAEMC,EAAc,CAAC,CAAE,EAAAF,CAAE,IAAqC,CAC5D,GAAIJ,EAAc,SAAWZ,EAAQ,CACnC,IAAImB,EAAMnB,EAAO,kBAEjB,MAAMiB,EAAQD,EAAE,iBAAiB,CAAC,EAClCG,EAAI,CAAC,IAAMH,EAAE,SAAWC,GAAO,SAAWR,EAAY,QACtDU,EAAI,CAAC,IAAMH,EAAE,SAAWC,GAAO,SAAWN,EAAY,QACtDX,EAAO,iBAAA,EACPS,EAAY,QAAUO,EAAE,SAAWC,GAAO,QAC1CN,EAAY,QAAUK,EAAE,SAAWC,GAAO,OAC5C,CACF,EAEMG,EAAaC,GAAwC,CACrDrB,IACFA,EAAO,qBAAqBA,EAAO,iBAAiB,EACpDY,EAAc,QAAU,GAE5B,EAEA,OAAAZ,GAAQ,GAAG,aAAce,CAAW,EACpCf,GAAQ,GAAG,aAAckB,CAAW,EACpClB,GAAQ,GAAG,WAAYoB,CAAS,EAEzB,IAAM,CACXN,EAAAA,EACAd,GAAQ,IAAI,aAAce,CAAW,EACrCf,GAAQ,IAAI,aAAckB,CAAW,EACrClB,GAAQ,IAAI,WAAYoB,CAAS,CACnC,CACF,EAAG,CAACpB,EAAQM,EAAWF,CAAK,CAAC,EAEtB,IACT"}
+{"version":3,"file":"useDraggable.cjs","sources":["../../../src/hooks/useDraggable.ts"],"sourcesContent":["import type { Canvas, FabricObject, TPointerEvent, TPointerEventInfo } from 'fabric'\nimport { shallow } from 'zustand/shallow'\nimport { useEffect, useRef } from 'react'\nimport type { ReactFabricState } from '../types/store'\nimport { useStore, useStoreApi } from './useStore'\n\nconst selector = (s: ReactFabricState) => ({\n  canvas: s.canvas,\n  draggable: s.draggable,\n})\n\nconst stageObject = (object: FabricObject) => {\n  const raw = object.get('selectable')\n  object.set('selectable', false)\n\n  return () => {\n    object.set('selectable', raw)\n  }\n}\n\nconst stage = (canvas: Canvas | null) => {\n  if (!canvas) return () => { }\n  const objects = canvas.getObjects()\n\n  const unStagedList = objects.map(object => {\n    return stageObject(object)\n  })\n\n  return () => {\n    unStagedList.forEach(fn => fn())\n  }\n}\n\nconst useDraggable = () => {\n  const store = useStoreApi()\n  const { canvas, draggable } = useStore(selector, shallow)\n  const lastPosXRef = useRef(0)\n  const lastPosYRef = useRef(0)\n  const isDraggingRef = useRef(false)\n\n  useEffect(() => {\n    if (!draggable) return\n    const unStaged = stage(canvas)\n\n    const onMouseDown = ({ e }: TPointerEventInfo<TPointerEvent>) => {\n      // @ts-expect-error 触摸屏拿不到clintX\n      const touch = e.changedTouches?.[0]\n      isDraggingRef.current = true\n      // @ts-expect-error 触摸屏拿不到clintX\n      lastPosXRef.current = e.clientX ?? touch?.clientX\n      // @ts-expect-error 触摸屏拿不到clintX\n      lastPosYRef.current = e.clientY ?? touch?.clientY\n    }\n\n    const onMouseMove = ({ e }: TPointerEventInfo<MouseEvent>) => {\n      if (isDraggingRef.current && canvas) {\n        var vpt = canvas.viewportTransform\n        // @ts-expect-error 触摸屏拿不到clintX\n        const touch = e.changedTouches?.[0]\n        vpt[4] += (e.clientX ?? touch?.clientX) - lastPosXRef.current!\n        vpt[5] += (e.clientY ?? touch?.clientY) - lastPosYRef.current!\n        canvas.requestRenderAll()\n        lastPosXRef.current = e.clientX ?? touch?.clientX\n        lastPosYRef.current = e.clientY ?? touch?.clientY\n      }\n    }\n\n    const onMouseUp = (_: TPointerEventInfo<TPointerEvent>) => {\n      if (canvas) {\n        canvas.setViewportTransform(canvas.viewportTransform)\n        isDraggingRef.current = false\n      }\n    }\n\n    canvas?.on('mouse:down', onMouseDown)\n    canvas?.on('mouse:move', onMouseMove)\n    canvas?.on('mouse:up', onMouseUp)\n\n    return () => {\n      unStaged()\n      canvas?.off('mouse:down', onMouseDown)\n      canvas?.off('mouse:move', onMouseMove)\n      canvas?.off('mouse:up', onMouseUp)\n    }\n  }, [canvas, draggable, store])\n\n  return null\n}\n\nexport default useDraggable\n"],"names":["selector","s","stageObject","object","raw","stage","canvas","unStagedList","fn","useDraggable","store","useStoreApi","draggable","useStore","shallow","lastPosXRef","useRef","lastPosYRef","isDraggingRef","useEffect","unStaged","onMouseDown","e","touch","onMouseMove","vpt","onMouseUp","_"],"mappings":"oJAMMA,MAAAA,EAAYC,IAAyB,CACzC,OAAQA,EAAE,OACV,UAAWA,EAAE,SACf,GAEMC,EAAeC,GAAyB,CAC5C,MAAMC,EAAMD,EAAO,IAAI,YAAY,EACnC,OAAAA,EAAO,IAAI,aAAc,EAAK,EAEvB,IAAM,CACXA,EAAO,IAAI,aAAcC,CAAG,CAC9B,CACF,EAEMC,EAASC,GAA0B,CACvC,GAAI,CAACA,EAAQ,MAAO,IAAM,CAAA,EAG1B,MAAMC,EAFUD,EAAO,aAEM,IAAIH,GACxBD,EAAYC,CAAM,CAC1B,EAED,MAAO,IAAM,CACXI,EAAa,QAAQC,GAAMA,EAAAA,CAAI,CACjC,CACF,EAEMC,EAAe,IAAM,CACzB,MAAMC,EAAQC,EAAY,YAAA,EACpB,CAAE,OAAAL,EAAQ,UAAAM,CAAU,EAAIC,EAASb,SAAAA,EAAUc,EAAO,OAAA,EAClDC,EAAcC,SAAO,CAAC,EACtBC,EAAcD,EAAAA,OAAO,CAAC,EACtBE,EAAgBF,EAAAA,OAAO,EAAK,EAElC,OAAAG,EAAAA,UAAU,IAAM,CACd,GAAI,CAACP,EAAW,OAChB,MAAMQ,EAAWf,EAAMC,CAAM,EAEvBe,EAAc,CAAC,CAAE,EAAAC,CAAE,IAAwC,CAE/D,MAAMC,EAAQD,EAAE,iBAAiB,CAAC,EAClCJ,EAAc,QAAU,GAExBH,EAAY,QAAUO,EAAE,SAAWC,GAAO,QAE1CN,EAAY,QAAUK,EAAE,SAAWC,GAAO,OAC5C,EAEMC,EAAc,CAAC,CAAE,EAAAF,CAAE,IAAqC,CAC5D,GAAIJ,EAAc,SAAWZ,EAAQ,CACnC,IAAImB,EAAMnB,EAAO,kBAEjB,MAAMiB,EAAQD,EAAE,iBAAiB,CAAC,EAClCG,EAAI,CAAC,IAAMH,EAAE,SAAWC,GAAO,SAAWR,EAAY,QACtDU,EAAI,CAAC,IAAMH,EAAE,SAAWC,GAAO,SAAWN,EAAY,QACtDX,EAAO,iBAAA,EACPS,EAAY,QAAUO,EAAE,SAAWC,GAAO,QAC1CN,EAAY,QAAUK,EAAE,SAAWC,GAAO,OAC5C,CACF,EAEMG,EAAaC,GAAwC,CACrDrB,IACFA,EAAO,qBAAqBA,EAAO,iBAAiB,EACpDY,EAAc,QAAU,GAE5B,EAEA,OAAAZ,GAAQ,GAAG,aAAce,CAAW,EACpCf,GAAQ,GAAG,aAAckB,CAAW,EACpClB,GAAQ,GAAG,WAAYoB,CAAS,EAEzB,IAAM,CACXN,EAAAA,EACAd,GAAQ,IAAI,aAAce,CAAW,EACrCf,GAAQ,IAAI,aAAckB,CAAW,EACrClB,GAAQ,IAAI,WAAYoB,CAAS,CACnC,CACF,EAAG,CAACpB,EAAQM,EAAWF,CAAK,CAAC,EAEtB,IACT"}

package/dist/cjs/plugins/Pinch.cjs

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var l=require("react"),S=require("../hooks/useStore.cjs"),d=require("hammerjs"),m=require("fabric");const g=()=>{const o=S.useStoreApi(),{canvas:r}=o.getState(),c=l.useRef(1);return l.useEffect(()=>{const a=e=>{const{canvas:s,manualZoom:v,fitZoom:h,minManualZoom:i,maxManualZoom:f}=o.getState();let n=e.scale*v;n<=i&&(n=i),n>=f&&(n=f);const p=n*h,E=e.srcEvent instanceof TouchEvent?new m.Point(e.srcEvent.touches[0].clientX,e.srcEvent.touches[0].clientY):new m.Point(e.srcEvent.offsetX,e.srcEvent.offsetY);s?.zoomToPoint(E,p),c.current=n},u=()=>{const{fitZoom:e}=o.getState(),s=c.current*e;o.setState({manualZoom:c.current,zoom:s})};if(!r)return;const t=new d(r.getSelectionElement());return t.get("pinch").set({enable:!0}),t.on("pinchmove",a),t.on("pinchend",u),()=>{t&&(t.off("pinchmove",a),t.off("pinchend",u),t.destroy())}},[r,o]),null};exports.default=g;
+"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;
 //# 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    /**\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\n    const hammer = new Hammer(canvas.getSelectionElement())\n    // 启用 pinch 事件识别器\n    hammer.get('pinch').set({ enable: true })\n    hammer.on('pinchmove', onPinchMove)\n    hammer.on('pinchend', onPinchEnd)\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","onPinchMove","e","manualZoom","fitZoom","minManualZoom","maxManualZoom","newManualZoom","combinedZoom","point","Point","onPinchEnd","hammer","Hammer"],"mappings":"8KAUMA,EAAQ,IAAM,CAClB,MAAMC,EAAQC,EAAAA,YAAAA,EACR,CAAE,OAAAC,CAAO,EAAIF,EAAM,WAEnBG,EAAmBC,SAAO,CAAC,EAIjC,OAAAC,EAAAA,UAAU,IAAM,CAKd,MAAMC,EAAeC,GAAmB,CACtC,KAAM,CAAE,OAAAL,EAAQ,WAAAM,EAAY,QAAAC,EAAS,cAAAC,EAAe,cAAAC,CAAc,EAAIX,EAAM,WAC5E,IAAIY,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,EACtDL,GAAQ,YAAYY,EAAOD,CAAY,EAEvCV,EAAiB,QAAUS,CAC7B,EAIMI,EAAa,IAAM,CACvB,KAAM,CAAE,QAAAP,CAAQ,EAAIT,EAAM,SAAA,EACpBa,EAAeV,EAAiB,QAAUM,EAChDT,EAAM,SAAS,CACb,WAAYG,EAAiB,QAC7B,KAAMU,CACR,CAAC,CACH,EACA,GAAI,CAACX,EAAQ,OAEb,MAAMe,EAAS,IAAIC,EAAOhB,EAAO,oBAAqB,CAAA,EAEtD,OAAAe,EAAO,IAAI,OAAO,EAAE,IAAI,CAAE,OAAQ,EAAK,CAAC,EACxCA,EAAO,GAAG,YAAaX,CAAW,EAClCW,EAAO,GAAG,WAAYD,CAAU,EAEzB,IAAM,CACPC,IACFA,EAAO,IAAI,YAAaX,CAAW,EACnCW,EAAO,IAAI,WAAYD,CAAU,EACjCC,EAAO,UAEX,CACF,EAAG,CAACf,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'\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"}

package/dist/esm/components/Canvas/index.mjs

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

package/dist/esm/container/ReactFabric/index.mjs

@@ -1,2 +1,2 @@
-"use client";import{jsx as e,jsxs as x}from"react/jsx-runtime";import{forwardRef as v,memo as D}from"react";import{Wrapper as Z}from"./Wrapper.mjs";import y from"../../components/Canvas/index.mjs";import z from"../../components/Loading/index.mjs";import{StoreUpdater as N}from"../../components/StoreUpdater/index.mjs";const S={width:"100%",height:"100%",overflow:"hidden",position:"relative",zIndex:0},U=v(({minManualZoom:a,maxManualZoom:t,className:l,children:r,width:i,height:n,selection:m,style:s,onMouseWheel:d,onMouseDown:u,onMouseMove:f,onMouseUp:c,zoomable:h,defaultSelection:p,defaultCentered:M,defaultDraggable:g,...w},b)=>e("div",{style:{...s,...S},ref:b,className:`react-fabric ${l||""}`,children:x(Z,{width:i,height:n,children:[e(N,{minManualZoom:a,maxManualZoom:t,zoomable:h,defaultCentered:M,selection:m,defaultSelection:p,defaultDraggable:g}),e(y,{onMouseDown:u,onMouseMove:f,onMouseUp:c,onMouseWheel:d,...w,children:r}),e(z,{})]})})),o=D(U);o.displayName="ReactFabric";export{o as default};
+"use client";import{jsx as e,jsxs as x}from"react/jsx-runtime";import{forwardRef as v,memo as D}from"react";import{Wrapper as S}from"./Wrapper.mjs";import Z from"../../components/Canvas/index.mjs";import{StoreUpdater as y}from"../../components/StoreUpdater/index.mjs";const z={width:"100%",height:"100%",overflow:"hidden",position:"relative",zIndex:0},N=v(({minManualZoom:a,maxManualZoom:t,className:l,children:n,width:r,height:i,selection:m,style:s,onMouseWheel:d,onMouseDown:u,onMouseMove:f,onMouseUp:c,zoomable:h,defaultSelection:M,defaultCentered:p,defaultDraggable:g,...w},b)=>e("div",{style:{...s,...z},ref:b,className:`react-fabric ${l||""}`,children:x(S,{width:r,height:i,children:[e(y,{minManualZoom:a,maxManualZoom:t,zoomable:h,defaultCentered:p,selection:m,defaultSelection:M,defaultDraggable:g}),e(Z,{onMouseDown:u,onMouseMove:f,onMouseUp:c,onMouseWheel:d,...w,children:n})]})})),o=D(N);o.displayName="ReactFabric";export{o as default};
 //# sourceMappingURL=index.mjs.map

package/dist/esm/container/ReactFabric/index.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.mjs","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 Loading from '../../components/Loading'\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          <Loading />\n        </Wrapper>\n      </div>\n    )\n  },\n)\n\ntype ReactFabricComponent = React.MemoExoticComponent<typeof ForwardReactFabric>\n\nconst ReactFabric: ReactFabricComponent = memo(ForwardReactFabric)\nReactFabric.displayName = 'ReactFabric'\n\nexport default ReactFabric\n"],"names":["wrapperStyle","ForwardReactFabric","forwardRef","minManualZoom","maxManualZoom","className","children","width","height","selection","style","onMouseWheel","onMouseDown","onMouseMove","onMouseUp","zoomable","defaultSelection","defaultCentered","defaultDraggable","rest","ref","jsx","jsxs","Wrapper","StoreUpdater","Canvas","Loading","ReactFabric","memo"],"mappings":"8TA6BMA,MAAAA,EAA8B,CAClC,MAAO,OACP,OAAQ,OACR,SAAU,SACV,SAAU,WACV,OAAQ,CACV,EA0BMC,EAAqBC,EACzB,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,MAAI,CAAA,MAAO,CAAE,GAAGX,EAAO,GAAGV,CAAa,EAAG,IAAKoB,EAAK,UAAW,gBAAgBf,GAAa,EAAE,GAC7F,SAAAiB,EAACC,EAAA,CAAQ,MAAOhB,EAAO,OAAQC,EAC7B,SAAAa,CAAAA,EAACG,EAAA,CACC,cAAerB,EACf,cAAeC,EACf,SAAUW,EACV,gBAAiBE,EACjB,UAAWR,EACX,iBAAkBO,EAClB,iBAAkBE,CAAAA,CACpB,EAEAG,EAACI,EAAA,CACC,YAAab,EACb,YAAaC,EACb,UAAWC,EACX,aAAcH,EACb,GAAGQ,EAEH,SAAAb,EACH,EACAe,EAACK,EAAA,CAAQ,CAAA,GACX,CACF,CAAA,CAGN,EAIMC,EAAoCC,EAAK3B,CAAkB,EACjE0B,EAAY,YAAc"}
+{"version":3,"file":"index.mjs","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":"kRA4BMA,EAA8B,CAClC,MAAO,OACP,OAAQ,OACR,SAAU,SACV,SAAU,WACV,OAAQ,CACV,EA0BMC,EAAqBC,EACzB,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,MAAA,CAAI,MAAO,CAAE,GAAGX,EAAO,GAAGV,CAAa,EAAG,IAAKoB,EAAK,UAAW,gBAAgBf,GAAa,EAAE,GAC7F,SAAAiB,EAACC,EAAA,CAAQ,MAAOhB,EAAO,OAAQC,EAC7B,SAAA,CAAAa,EAACG,EAAA,CACC,cAAerB,EACf,cAAeC,EACf,SAAUW,EACV,gBAAiBE,EACjB,UAAWR,EACX,iBAAkBO,EAClB,iBAAkBE,CAAAA,CACpB,EAEAG,EAACI,EAAA,CACC,YAAab,EACb,YAAaC,EACb,UAAWC,EACX,aAAcH,EACb,GAAGQ,EAEH,SAAAb,CAAAA,CACH,GACF,CACF,CAAA,CAGN,EAIMoB,EAAoCC,EAAK1B,CAAkB,EACjEyB,EAAY,YAAc"}

package/dist/esm/hooks/useDraggable.mjs

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

package/dist/esm/hooks/useDraggable.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"useDraggable.mjs","sources":["../../../src/hooks/useDraggable.ts"],"sourcesContent":["import type { Canvas, FabricObject, TPointerEvent, TPointerEventInfo } from 'fabric'\nimport { shallow } from 'zustand/shallow'\nimport { useEffect, useRef } from 'react'\nimport type { ReactFabricState } from '../types/store'\nimport { useStore, useStoreApi } from './useStore'\n\nconst selector = (s: ReactFabricState) => ({\n  canvas: s.canvas,\n  draggable: s.draggable,\n})\n\nconst stageObject = (object: FabricObject) => {\n  const raw = object.get('selectable')\n  object.set('selectable', false)\n\n  return () => {\n    object.set('selectable', raw)\n  }\n}\n\nconst stage = (canvas: Canvas | null) => {\n  if (!canvas) return () => {}\n  const objects = canvas.getObjects()\n\n  const unStagedList = objects.map(object => {\n    return stageObject(object)\n  })\n\n  return () => {\n    unStagedList.forEach(fn => fn())\n  }\n}\n\nconst useDraggable = () => {\n  const store = useStoreApi()\n  const { canvas, draggable } = useStore(selector, shallow)\n  const lastPosXRef = useRef(0)\n  const lastPosYRef = useRef(0)\n  const isDraggingRef = useRef(false)\n\n  useEffect(() => {\n    if (!draggable) return\n    const unStaged = stage(canvas)\n\n    const onMouseDown = ({ e }: TPointerEventInfo<MouseEvent>) => {\n      // @ts-expect-error 触摸屏拿不到clintX\n      const touch = e.changedTouches?.[0]\n      isDraggingRef.current = true\n      lastPosXRef.current = e.clientX ?? touch?.clientX\n      lastPosYRef.current = e.clientY ?? touch?.clientY\n    }\n\n    const onMouseMove = ({ e }: TPointerEventInfo<MouseEvent>) => {\n      if (isDraggingRef.current && canvas) {\n        var vpt = canvas.viewportTransform\n        // @ts-expect-error 触摸屏拿不到clintX\n        const touch = e.changedTouches?.[0]\n        vpt[4] += (e.clientX ?? touch?.clientX) - lastPosXRef.current!\n        vpt[5] += (e.clientY ?? touch?.clientY) - lastPosYRef.current!\n        canvas.requestRenderAll()\n        lastPosXRef.current = e.clientX ?? touch?.clientX\n        lastPosYRef.current = e.clientY ?? touch?.clientY\n      }\n    }\n\n    const onMouseUp = (_: TPointerEventInfo<TPointerEvent>) => {\n      if (canvas) {\n        canvas.setViewportTransform(canvas.viewportTransform)\n        isDraggingRef.current = false\n      }\n    }\n\n    canvas?.on('mouse:down', onMouseDown)\n    canvas?.on('mouse:move', onMouseMove)\n    canvas?.on('mouse:up', onMouseUp)\n\n    return () => {\n      unStaged()\n      canvas?.off('mouse:down', onMouseDown)\n      canvas?.off('mouse:move', onMouseMove)\n      canvas?.off('mouse:up', onMouseUp)\n    }\n  }, [canvas, draggable, store])\n\n  return null\n}\n\nexport default useDraggable\n"],"names":["selector","s","stageObject","object","raw","stage","canvas","unStagedList","fn","useDraggable","store","useStoreApi","draggable","useStore","shallow","lastPosXRef","useRef","lastPosYRef","isDraggingRef","useEffect","unStaged","onMouseDown","e","touch","onMouseMove","vpt","onMouseUp","_"],"mappings":"gKAMMA,MAAAA,EAAYC,IAAyB,CACzC,OAAQA,EAAE,OACV,UAAWA,EAAE,SACf,GAEMC,EAAeC,GAAyB,CAC5C,MAAMC,EAAMD,EAAO,IAAI,YAAY,EACnC,OAAAA,EAAO,IAAI,aAAc,EAAK,EAEvB,IAAM,CACXA,EAAO,IAAI,aAAcC,CAAG,CAC9B,CACF,EAEMC,EAASC,GAA0B,CACvC,GAAI,CAACA,EAAQ,MAAO,IAAM,CAAA,EAG1B,MAAMC,EAFUD,EAAO,aAEM,IAAIH,GACxBD,EAAYC,CAAM,CAC1B,EAED,MAAO,IAAM,CACXI,EAAa,QAAQC,GAAMA,EAAAA,CAAI,CACjC,CACF,EAEMC,EAAe,IAAM,CACzB,MAAMC,EAAQC,EAAY,EACpB,CAAE,OAAAL,EAAQ,UAAAM,CAAU,EAAIC,EAASb,EAAUc,CAAO,EAClDC,EAAcC,EAAO,CAAC,EACtBC,EAAcD,EAAO,CAAC,EACtBE,EAAgBF,EAAO,EAAK,EAElC,OAAAG,EAAU,IAAM,CACd,GAAI,CAACP,EAAW,OAChB,MAAMQ,EAAWf,EAAMC,CAAM,EAEvBe,EAAc,CAAC,CAAE,EAAAC,CAAE,IAAqC,CAE5D,MAAMC,EAAQD,EAAE,iBAAiB,CAAC,EAClCJ,EAAc,QAAU,GACxBH,EAAY,QAAUO,EAAE,SAAWC,GAAO,QAC1CN,EAAY,QAAUK,EAAE,SAAWC,GAAO,OAC5C,EAEMC,EAAc,CAAC,CAAE,EAAAF,CAAE,IAAqC,CAC5D,GAAIJ,EAAc,SAAWZ,EAAQ,CACnC,IAAImB,EAAMnB,EAAO,kBAEjB,MAAMiB,EAAQD,EAAE,iBAAiB,CAAC,EAClCG,EAAI,CAAC,IAAMH,EAAE,SAAWC,GAAO,SAAWR,EAAY,QACtDU,EAAI,CAAC,IAAMH,EAAE,SAAWC,GAAO,SAAWN,EAAY,QACtDX,EAAO,iBAAA,EACPS,EAAY,QAAUO,EAAE,SAAWC,GAAO,QAC1CN,EAAY,QAAUK,EAAE,SAAWC,GAAO,OAC5C,CACF,EAEMG,EAAaC,GAAwC,CACrDrB,IACFA,EAAO,qBAAqBA,EAAO,iBAAiB,EACpDY,EAAc,QAAU,GAE5B,EAEA,OAAAZ,GAAQ,GAAG,aAAce,CAAW,EACpCf,GAAQ,GAAG,aAAckB,CAAW,EACpClB,GAAQ,GAAG,WAAYoB,CAAS,EAEzB,IAAM,CACXN,EAAAA,EACAd,GAAQ,IAAI,aAAce,CAAW,EACrCf,GAAQ,IAAI,aAAckB,CAAW,EACrClB,GAAQ,IAAI,WAAYoB,CAAS,CACnC,CACF,EAAG,CAACpB,EAAQM,EAAWF,CAAK,CAAC,EAEtB,IACT"}
+{"version":3,"file":"useDraggable.mjs","sources":["../../../src/hooks/useDraggable.ts"],"sourcesContent":["import type { Canvas, FabricObject, TPointerEvent, TPointerEventInfo } from 'fabric'\nimport { shallow } from 'zustand/shallow'\nimport { useEffect, useRef } from 'react'\nimport type { ReactFabricState } from '../types/store'\nimport { useStore, useStoreApi } from './useStore'\n\nconst selector = (s: ReactFabricState) => ({\n  canvas: s.canvas,\n  draggable: s.draggable,\n})\n\nconst stageObject = (object: FabricObject) => {\n  const raw = object.get('selectable')\n  object.set('selectable', false)\n\n  return () => {\n    object.set('selectable', raw)\n  }\n}\n\nconst stage = (canvas: Canvas | null) => {\n  if (!canvas) return () => { }\n  const objects = canvas.getObjects()\n\n  const unStagedList = objects.map(object => {\n    return stageObject(object)\n  })\n\n  return () => {\n    unStagedList.forEach(fn => fn())\n  }\n}\n\nconst useDraggable = () => {\n  const store = useStoreApi()\n  const { canvas, draggable } = useStore(selector, shallow)\n  const lastPosXRef = useRef(0)\n  const lastPosYRef = useRef(0)\n  const isDraggingRef = useRef(false)\n\n  useEffect(() => {\n    if (!draggable) return\n    const unStaged = stage(canvas)\n\n    const onMouseDown = ({ e }: TPointerEventInfo<TPointerEvent>) => {\n      // @ts-expect-error 触摸屏拿不到clintX\n      const touch = e.changedTouches?.[0]\n      isDraggingRef.current = true\n      // @ts-expect-error 触摸屏拿不到clintX\n      lastPosXRef.current = e.clientX ?? touch?.clientX\n      // @ts-expect-error 触摸屏拿不到clintX\n      lastPosYRef.current = e.clientY ?? touch?.clientY\n    }\n\n    const onMouseMove = ({ e }: TPointerEventInfo<MouseEvent>) => {\n      if (isDraggingRef.current && canvas) {\n        var vpt = canvas.viewportTransform\n        // @ts-expect-error 触摸屏拿不到clintX\n        const touch = e.changedTouches?.[0]\n        vpt[4] += (e.clientX ?? touch?.clientX) - lastPosXRef.current!\n        vpt[5] += (e.clientY ?? touch?.clientY) - lastPosYRef.current!\n        canvas.requestRenderAll()\n        lastPosXRef.current = e.clientX ?? touch?.clientX\n        lastPosYRef.current = e.clientY ?? touch?.clientY\n      }\n    }\n\n    const onMouseUp = (_: TPointerEventInfo<TPointerEvent>) => {\n      if (canvas) {\n        canvas.setViewportTransform(canvas.viewportTransform)\n        isDraggingRef.current = false\n      }\n    }\n\n    canvas?.on('mouse:down', onMouseDown)\n    canvas?.on('mouse:move', onMouseMove)\n    canvas?.on('mouse:up', onMouseUp)\n\n    return () => {\n      unStaged()\n      canvas?.off('mouse:down', onMouseDown)\n      canvas?.off('mouse:move', onMouseMove)\n      canvas?.off('mouse:up', onMouseUp)\n    }\n  }, [canvas, draggable, store])\n\n  return null\n}\n\nexport default useDraggable\n"],"names":["selector","s","stageObject","object","raw","stage","canvas","unStagedList","fn","useDraggable","store","useStoreApi","draggable","useStore","shallow","lastPosXRef","useRef","lastPosYRef","isDraggingRef","useEffect","unStaged","onMouseDown","e","touch","onMouseMove","vpt","onMouseUp","_"],"mappings":"gKAMMA,MAAAA,EAAYC,IAAyB,CACzC,OAAQA,EAAE,OACV,UAAWA,EAAE,SACf,GAEMC,EAAeC,GAAyB,CAC5C,MAAMC,EAAMD,EAAO,IAAI,YAAY,EACnC,OAAAA,EAAO,IAAI,aAAc,EAAK,EAEvB,IAAM,CACXA,EAAO,IAAI,aAAcC,CAAG,CAC9B,CACF,EAEMC,EAASC,GAA0B,CACvC,GAAI,CAACA,EAAQ,MAAO,IAAM,CAAA,EAG1B,MAAMC,EAFUD,EAAO,aAEM,IAAIH,GACxBD,EAAYC,CAAM,CAC1B,EAED,MAAO,IAAM,CACXI,EAAa,QAAQC,GAAMA,EAAAA,CAAI,CACjC,CACF,EAEMC,EAAe,IAAM,CACzB,MAAMC,EAAQC,EAAY,EACpB,CAAE,OAAAL,EAAQ,UAAAM,CAAU,EAAIC,EAASb,EAAUc,CAAO,EAClDC,EAAcC,EAAO,CAAC,EACtBC,EAAcD,EAAO,CAAC,EACtBE,EAAgBF,EAAO,EAAK,EAElC,OAAAG,EAAU,IAAM,CACd,GAAI,CAACP,EAAW,OAChB,MAAMQ,EAAWf,EAAMC,CAAM,EAEvBe,EAAc,CAAC,CAAE,EAAAC,CAAE,IAAwC,CAE/D,MAAMC,EAAQD,EAAE,iBAAiB,CAAC,EAClCJ,EAAc,QAAU,GAExBH,EAAY,QAAUO,EAAE,SAAWC,GAAO,QAE1CN,EAAY,QAAUK,EAAE,SAAWC,GAAO,OAC5C,EAEMC,EAAc,CAAC,CAAE,EAAAF,CAAE,IAAqC,CAC5D,GAAIJ,EAAc,SAAWZ,EAAQ,CACnC,IAAImB,EAAMnB,EAAO,kBAEjB,MAAMiB,EAAQD,EAAE,iBAAiB,CAAC,EAClCG,EAAI,CAAC,IAAMH,EAAE,SAAWC,GAAO,SAAWR,EAAY,QACtDU,EAAI,CAAC,IAAMH,EAAE,SAAWC,GAAO,SAAWN,EAAY,QACtDX,EAAO,iBAAA,EACPS,EAAY,QAAUO,EAAE,SAAWC,GAAO,QAC1CN,EAAY,QAAUK,EAAE,SAAWC,GAAO,OAC5C,CACF,EAEMG,EAAaC,GAAwC,CACrDrB,IACFA,EAAO,qBAAqBA,EAAO,iBAAiB,EACpDY,EAAc,QAAU,GAE5B,EAEA,OAAAZ,GAAQ,GAAG,aAAce,CAAW,EACpCf,GAAQ,GAAG,aAAckB,CAAW,EACpClB,GAAQ,GAAG,WAAYoB,CAAS,EAEzB,IAAM,CACXN,EAAAA,EACAd,GAAQ,IAAI,aAAce,CAAW,EACrCf,GAAQ,IAAI,aAAckB,CAAW,EACrClB,GAAQ,IAAI,WAAYoB,CAAS,CACnC,CACF,EAAG,CAACpB,EAAQM,EAAWF,CAAK,CAAC,EAEtB,IACT"}

package/dist/esm/plugins/Pinch.mjs

@@ -1,2 +1,2 @@
-"use client";import{useRef as E,useEffect as S}from"react";import{useStoreApi as g}from"../hooks/useStore.mjs";import Z from"hammerjs";import{Point as u}from"fabric";const d=()=>{const o=g(),{canvas:c}=o.getState(),r=E(1);return S(()=>{const a=t=>{const{canvas:s,manualZoom:l,fitZoom:p,minManualZoom:i,maxManualZoom:f}=o.getState();let n=t.scale*l;n<=i&&(n=i),n>=f&&(n=f);const v=n*p,h=t.srcEvent instanceof TouchEvent?new u(t.srcEvent.touches[0].clientX,t.srcEvent.touches[0].clientY):new u(t.srcEvent.offsetX,t.srcEvent.offsetY);s?.zoomToPoint(h,v),r.current=n},m=()=>{const{fitZoom:t}=o.getState(),s=r.current*t;o.setState({manualZoom:r.current,zoom:s})};if(!c)return;const e=new Z(c.getSelectionElement());return e.get("pinch").set({enable:!0}),e.on("pinchmove",a),e.on("pinchend",m),()=>{e&&(e.off("pinchmove",a),e.off("pinchend",m),e.destroy())}},[c,o]),null};export{d as default};
+"use client";import{useRef as E,useEffect as d}from"react";import{useStoreApi as w}from"../hooks/useStore.mjs";import{Point as u}from"fabric";const g=()=>{const o=w(),{canvas:c}=o.getState(),a=E(1);return d(()=>{let s=()=>{};const r=t=>{const{canvas:e,manualZoom:f,fitZoom:p,minManualZoom:l,maxManualZoom:m}=o.getState();let n=t.scale*f;n<=l&&(n=l),n>=m&&(n=m);const v=n*p,h=t.srcEvent instanceof TouchEvent?new u(t.srcEvent.touches[0].clientX,t.srcEvent.touches[0].clientY):new u(t.srcEvent.offsetX,t.srcEvent.offsetY);e?.zoomToPoint(h,v),a.current=n},i=()=>{const{fitZoom:t}=o.getState(),e=a.current*t;o.setState({manualZoom:a.current,zoom:e})};if(c)return(async()=>{try{const t=(await import("hammerjs")).default,e=new t(c.getSelectionElement());e.get("pinch").set({enable:!0}),e.on("pinchmove",r),e.on("pinchend",i),s=()=>{e.off("pinchmove",r),e.off("pinchend",i),e.destroy()}}catch{console.warn("Failed to load Hammer.js. Touch gestures will not be available.")}})(),()=>s()},[c,o]),null};export{g as default};
 //# sourceMappingURL=Pinch.mjs.map

package/dist/esm/plugins/Pinch.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"Pinch.mjs","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    /**\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\n    const hammer = new Hammer(canvas.getSelectionElement())\n    // 启用 pinch 事件识别器\n    hammer.get('pinch').set({ enable: true })\n    hammer.on('pinchmove', onPinchMove)\n    hammer.on('pinchend', onPinchEnd)\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","onPinchMove","e","manualZoom","fitZoom","minManualZoom","maxManualZoom","newManualZoom","combinedZoom","point","Point","onPinchEnd","hammer","Hammer"],"mappings":"4KAUMA,EAAQ,IAAM,CAClB,MAAMC,EAAQC,EAAAA,EACR,CAAE,OAAAC,CAAO,EAAIF,EAAM,WAEnBG,EAAmBC,EAAO,CAAC,EAIjC,OAAAC,EAAU,IAAM,CAKd,MAAMC,EAAeC,GAAmB,CACtC,KAAM,CAAE,OAAAL,EAAQ,WAAAM,EAAY,QAAAC,EAAS,cAAAC,EAAe,cAAAC,CAAc,EAAIX,EAAM,WAC5E,IAAIY,EAAgBL,EAAE,MAAQC,EAE1BI,GAAiBF,IACnBE,EAAgBF,GAGdE,GAAiBD,IACnBC,EAAgBD,GAGlB,MAAME,EAAeD,EAAgBH,EAE/BK,EACJP,EAAE,oBAAoB,WAClB,IAAIQ,EAAMR,EAAE,SAAS,QAAQ,CAAC,EAAE,QAASA,EAAE,SAAS,QAAQ,CAAC,EAAE,OAAO,EACtE,IAAIQ,EAAMR,EAAE,SAAS,QAASA,EAAE,SAAS,OAAO,EACtDL,GAAQ,YAAYY,EAAOD,CAAY,EAEvCV,EAAiB,QAAUS,CAC7B,EAIMI,EAAa,IAAM,CACvB,KAAM,CAAE,QAAAP,CAAQ,EAAIT,EAAM,SAAA,EACpBa,EAAeV,EAAiB,QAAUM,EAChDT,EAAM,SAAS,CACb,WAAYG,EAAiB,QAC7B,KAAMU,CACR,CAAC,CACH,EACA,GAAI,CAACX,EAAQ,OAEb,MAAMe,EAAS,IAAIC,EAAOhB,EAAO,oBAAqB,CAAA,EAEtD,OAAAe,EAAO,IAAI,OAAO,EAAE,IAAI,CAAE,OAAQ,EAAK,CAAC,EACxCA,EAAO,GAAG,YAAaX,CAAW,EAClCW,EAAO,GAAG,WAAYD,CAAU,EAEzB,IAAM,CACPC,IACFA,EAAO,IAAI,YAAaX,CAAW,EACnCW,EAAO,IAAI,WAAYD,CAAU,EACjCC,EAAO,UAEX,CACF,EAAG,CAACf,EAAQF,CAAK,CAAC,EAEX,IACT"}
+{"version":3,"file":"Pinch.mjs","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":"8IAUA,MAAMA,EAAQ,IAAM,CAClB,MAAMC,EAAQC,EAAY,EACpB,CAAE,OAAAC,CAAO,EAAIF,EAAM,SAAS,EAE5BG,EAAmBC,EAAO,CAAC,EAIjC,OAAAC,EAAU,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,EAAMR,EAAE,SAAS,QAAQ,CAAC,EAAE,QAASA,EAAE,SAAS,QAAQ,CAAC,EAAE,OAAO,EACtE,IAAIQ,EAAMR,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"}

package/dist/types/container/ReactFabric/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/container/ReactFabric/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,OAAO,CAAA;AAI1C,KAAK,WAAW,GAAG;IACjB,CAAC,EAAE,KAAK,CAAA;IACR,OAAO,EAAE;QAAE,CAAC,EAAE,MAAM,CAAC;QAAC,CAAC,EAAE,MAAM,CAAA;KAAE,CAAA;IACjC,MAAM,CAAC,EAAE,OAAO,CAAA;IAChB,UAAU,CAAC,EAAE,OAAO,EAAE,CAAA;IACtB,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,SAAS,CAAC,EAAE,OAAO,CAAA;CACpB,CAAA;AAGD,KAAK,eAAe,GAAG;IACrB,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;CAE3B,CAAA;AAgBD,MAAM,MAAM,gBAAgB,GAAG,eAAe,GAAG;IAC/C,KAAK,CAAC,EAAE,aAAa,CAAA;IACrB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,aAAa,CAAC,EAAE,MAAM,CAAA;IACtB,aAAa,CAAC,EAAE,MAAM,CAAA;IACtB;;OAEG;IACH,eAAe,CAAC,EAAE,OAAO,CAAA;IACzB;;UAEM;IACN,gBAAgB,CAAC,EAAE,OAAO,CAAA;IAC1B;;OAEG;IACH,gBAAgB,CAAC,EAAE,OAAO,CAAA;IAC1B,WAAW,CAAC,EAAE,CAAC,CAAC,EAAE,WAAW,KAAK,IAAI,CAAA;IACtC,WAAW,CAAC,EAAE,CAAC,CAAC,EAAE,WAAW,KAAK,IAAI,CAAA;IACtC,SAAS,CAAC,EAAE,CAAC,CAAC,EAAE,WAAW,KAAK,IAAI,CAAA;IACpC,YAAY,CAAC,EAAE,CAAC,CAAC,EAAE,WAAW,KAAK,IAAI,CAAA;CACxC,CAAA;AAED,QAAA,MAAM,kBAAkB;YAvBd,aAAa;gBACT,MAAM;eACP,OAAO;oBACF,MAAM;oBACN,MAAM;IACtB;;OAEG;sBACe,OAAO;IACzB;;UAEM;uBACa,OAAO;IAC1B;;OAEG;uBACgB,OAAO;kBACZ,CAAC,CAAC,EAAE,WAAW,KAAK,IAAI;kBACxB,CAAC,CAAC,EAAE,WAAW,KAAK,IAAI;gBAC1B,CAAC,CAAC,EAAE,WAAW,KAAK,IAAI;mBACrB,CAAC,CAAC,EAAE,WAAW,KAAK,IAAI;kDAqDxC,CAAA;AAED,KAAK,oBAAoB,GAAG,KAAK,CAAC,mBAAmB,CAAC,OAAO,kBAAkB,CAAC,CAAA;AAEhF,QAAA,MAAM,WAAW,EAAE,oBAA+C,CAAA;AAGlE,eAAe,WAAW,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/container/ReactFabric/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,OAAO,CAAA;AAI1C,KAAK,WAAW,GAAG;IACjB,CAAC,EAAE,KAAK,CAAA;IACR,OAAO,EAAE;QAAE,CAAC,EAAE,MAAM,CAAC;QAAC,CAAC,EAAE,MAAM,CAAA;KAAE,CAAA;IACjC,MAAM,CAAC,EAAE,OAAO,CAAA;IAChB,UAAU,CAAC,EAAE,OAAO,EAAE,CAAA;IACtB,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,SAAS,CAAC,EAAE,OAAO,CAAA;CACpB,CAAA;AAGD,KAAK,eAAe,GAAG;IACrB,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;CAE3B,CAAA;AAeD,MAAM,MAAM,gBAAgB,GAAG,eAAe,GAAG;IAC/C,KAAK,CAAC,EAAE,aAAa,CAAA;IACrB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,aAAa,CAAC,EAAE,MAAM,CAAA;IACtB,aAAa,CAAC,EAAE,MAAM,CAAA;IACtB;;OAEG;IACH,eAAe,CAAC,EAAE,OAAO,CAAA;IACzB;;UAEM;IACN,gBAAgB,CAAC,EAAE,OAAO,CAAA;IAC1B;;OAEG;IACH,gBAAgB,CAAC,EAAE,OAAO,CAAA;IAC1B,WAAW,CAAC,EAAE,CAAC,CAAC,EAAE,WAAW,KAAK,IAAI,CAAA;IACtC,WAAW,CAAC,EAAE,CAAC,CAAC,EAAE,WAAW,KAAK,IAAI,CAAA;IACtC,SAAS,CAAC,EAAE,CAAC,CAAC,EAAE,WAAW,KAAK,IAAI,CAAA;IACpC,YAAY,CAAC,EAAE,CAAC,CAAC,EAAE,WAAW,KAAK,IAAI,CAAA;CACxC,CAAA;AAED,QAAA,MAAM,kBAAkB;YAvBd,aAAa;gBACT,MAAM;eACP,OAAO;oBACF,MAAM;oBACN,MAAM;IACtB;;OAEG;sBACe,OAAO;IACzB;;UAEM;uBACa,OAAO;IAC1B;;OAEG;uBACgB,OAAO;kBACZ,CAAC,CAAC,EAAE,WAAW,KAAK,IAAI;kBACxB,CAAC,CAAC,EAAE,WAAW,KAAK,IAAI;gBAC1B,CAAC,CAAC,EAAE,WAAW,KAAK,IAAI;mBACrB,CAAC,CAAC,EAAE,WAAW,KAAK,IAAI;kDAoDxC,CAAA;AAED,KAAK,oBAAoB,GAAG,KAAK,CAAC,mBAAmB,CAAC,OAAO,kBAAkB,CAAC,CAAA;AAEhF,QAAA,MAAM,WAAW,EAAE,oBAA+C,CAAA;AAGlE,eAAe,WAAW,CAAA"}

package/dist/types/hooks/useDraggable.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useDraggable.d.ts","sourceRoot":"","sources":["../../../src/hooks/useDraggable.ts"],"names":[],"mappings":"AAiCA,QAAA,MAAM,YAAY,YAoDjB,CAAA;AAED,eAAe,YAAY,CAAA"}
+{"version":3,"file":"useDraggable.d.ts","sourceRoot":"","sources":["../../../src/hooks/useDraggable.ts"],"names":[],"mappings":"AAiCA,QAAA,MAAM,YAAY,YAsDjB,CAAA;AAED,eAAe,YAAY,CAAA"}

package/dist/types/plugins/Pinch.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Pinch.d.ts","sourceRoot":"","sources":["../../../src/plugins/Pinch.tsx"],"names":[],"mappings":"AAKA;;;;GAIG;AACH,QAAA,MAAM,KAAK,YAgEV,CAAA;AAED,eAAe,KAAK,CAAA"}
+{"version":3,"file":"Pinch.d.ts","sourceRoot":"","sources":["../../../src/plugins/Pinch.tsx"],"names":[],"mappings":"AAKA;;;;GAIG;AACH,QAAA,MAAM,KAAK,YAwEV,CAAA;AAED,eAAe,KAAK,CAAA"}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@cs-open/react-fabric",
   "type": "module",
-  "version": "0.0.3",
+  "version": "0.0.5",
   "description": "React Fabric",
   "keywords": [
     "@cs-open/react-fabric",
@@ -43,6 +43,7 @@
     "access": "public"
   },
   "peerDependencies": {
+    "@floating-ui/core": "^1.6.9",
     "@types/hammerjs": "^2.0.46",
     "fabric": "^6.6.1",
     "hammerjs": "^2.0.8",
@@ -53,7 +54,13 @@
     "use-sync-external-store": "^1.4.0",
     "zustand": "^5.0.3"
   },
+  "peerDependenciesMeta": {
+    "hammerjs": {
+      "optional": true
+    }
+  },
   "devDependencies": {
+    "@floating-ui/core": "^1.6.9",
     "@types/fontfaceobserver": "^2.1.3",
     "@types/hammerjs": "^2.0.46",
     "@types/node": "^18.7.16",
@@ -61,7 +68,7 @@
     "@types/react-dom": "^18.3.1",
     "autoprefixer": "^10.4.15",
     "cssnano": "^6.0.1",
-    "fabric": "^6.6.1",
+    "fabric": "^6.6.4",
     "hammerjs": "^2.0.8",
     "lodash-es": "^4.17.21",
     "postcss": "^8.4.21",
@@ -77,13 +84,11 @@
     "tailwind-merge": "^3.0.2",
     "use-sync-external-store": "^1.4.0",
     "zustand": "^5.0.3",
-    "@cs-open/eslint-config": "0.0.0",
-    "@cs-open/rollup-config": "0.0.0",
-    "@cs-open/tsconfig": "0.0.0"
+    "@cs-open/rollup-config": "0.0.3",
+    "@cs-open/eslint-config": "0.0.3",
+    "@cs-open/tsconfig": "0.0.3"
   },
   "dependencies": {
-    "@ant-design/icons": "^5.5.2",
-    "@floating-ui/core": "^1.6.8",
     "@types/lodash-es": "^4.17.12",
     "fontfaceobserver": "^2.3.0"
   },

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

@@ -1,2 +0,0 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),r=require("@ant-design/icons"),s=require("../../hooks/useStore.cjs");const i=()=>s.useStore(t=>t.loading)?e.jsxs("div",{className:"absolute inset-0 z-[40] flex flex-col items-center justify-center overflow-hidden",children:[e.jsx("div",{className:"absolute bottom-0 left-0 right-0 top-0 ]"}),e.jsx(r.LoadingOutlined,{spin:!0,className:"text-lg text-[var(--color-primary)]"})]}):null;exports.default=i;
-//# sourceMappingURL=index.cjs.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"index.cjs","sources":["../../../../src/components/Loading/index.tsx"],"sourcesContent":["import { LoadingOutlined } from '@ant-design/icons'\nimport { useStore } from '../../hooks/useStore'\n\n// bg-[hsla(221,14%,4%,0.6)\nconst Loading = () => {\n  const loading = useStore(state => state.loading)\n\n  return loading ? (\n    <div className=\"absolute inset-0 z-[40] flex flex-col items-center justify-center overflow-hidden\">\n      <div className=\"absolute bottom-0 left-0 right-0 top-0 ]\"></div>\n      <LoadingOutlined spin className=\"text-lg text-[var(--color-primary)]\" />\n    </div>\n  ) : null\n}\n\nexport default Loading\n"],"names":["Loading","useStore","state","jsxs","jsx","LoadingOutlined"],"mappings":"4KAIA,MAAMA,EAAU,IACEC,EAAAA,SAASC,GAASA,EAAM,OAAO,EAG7CC,OAAC,OAAI,UAAU,oFACb,UAAAC,EAAC,IAAA,MAAA,CAAI,UAAU,0CAA2C,CAAA,EAC1DA,EAAAA,IAACC,EAAAA,gBAAA,CAAgB,KAAI,GAAC,UAAU,sCAAsC,CACxE,CAAA,CAAA,EACE"}

package/dist/esm/components/Loading/index.mjs

@@ -1,2 +0,0 @@
-"use client";import{jsxs as o,jsx as e}from"react/jsx-runtime";import{LoadingOutlined as s}from"@ant-design/icons";import{useStore as l}from"../../hooks/useStore.mjs";const i=()=>l(t=>t.loading)?o("div",{className:"absolute inset-0 z-[40] flex flex-col items-center justify-center overflow-hidden",children:[e("div",{className:"absolute bottom-0 left-0 right-0 top-0 ]"}),e(s,{spin:!0,className:"text-lg text-[var(--color-primary)]"})]}):null;export{i as default};
-//# sourceMappingURL=index.mjs.map

package/dist/esm/components/Loading/index.mjs.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.mjs","sources":["../../../../src/components/Loading/index.tsx"],"sourcesContent":["import { LoadingOutlined } from '@ant-design/icons'\nimport { useStore } from '../../hooks/useStore'\n\n// bg-[hsla(221,14%,4%,0.6)\nconst Loading = () => {\n  const loading = useStore(state => state.loading)\n\n  return loading ? (\n    <div className=\"absolute inset-0 z-[40] flex flex-col items-center justify-center overflow-hidden\">\n      <div className=\"absolute bottom-0 left-0 right-0 top-0 ]\"></div>\n      <LoadingOutlined spin className=\"text-lg text-[var(--color-primary)]\" />\n    </div>\n  ) : null\n}\n\nexport default Loading\n"],"names":["Loading","useStore","state","jsxs","jsx","LoadingOutlined"],"mappings":"uKAIA,MAAMA,EAAU,IACEC,EAASC,GAASA,EAAM,OAAO,EAG7CC,EAAC,OAAI,UAAU,oFACb,UAAAC,EAAC,MAAA,CAAI,UAAU,0CAA2C,CAAA,EAC1DA,EAACC,EAAA,CAAgB,KAAI,GAAC,UAAU,sCAAsC,CACxE,CAAA,CAAA,EACE"}

package/dist/types/components/Loading/index.d.ts

@@ -1,3 +0,0 @@
-declare const Loading: () => import("react/jsx-runtime").JSX.Element | null;
-export default Loading;
-//# sourceMappingURL=index.d.ts.map

package/dist/types/components/Loading/index.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/Loading/index.tsx"],"names":[],"mappings":"AAIA,QAAA,MAAM,OAAO,sDASZ,CAAA;AAED,eAAe,OAAO,CAAA"}