@cs-open/react-fabric 0.0.8 → 0.0.10
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/cjs/hooks/useReactFabric.cjs +1 -1
- package/dist/cjs/hooks/useReactFabric.cjs.map +1 -1
- package/dist/cjs/index.cjs +1 -1
- package/dist/cjs/plugins/index.cjs +1 -1
- package/dist/esm/hooks/useReactFabric.mjs +1 -1
- package/dist/esm/hooks/useReactFabric.mjs.map +1 -1
- package/dist/esm/index.mjs +1 -1
- package/dist/esm/plugins/Mask.mjs +2 -0
- package/dist/esm/plugins/Mask.mjs.map +1 -0
- package/dist/types/hooks/useReactFabric.d.ts +1 -0
- package/dist/types/hooks/useReactFabric.d.ts.map +1 -1
- package/dist/types/plugins/index.d.ts +1 -0
- package/dist/types/plugins/index.d.ts.map +1 -1
- package/package.json +5 -5
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";var
|
|
1
|
+
"use strict";var d=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,fitZoom:e.fitZoom,defaultCentered:e.defaultCentered,manualZoom:e.manualZoom,maxManualZoom:e.maxManualZoom,minManualZoom:e.minManualZoom,loading:e.loading});function f(){const e=u.useStoreApi(),i=u.useStore(S,d.shallow),l=r.useMemo(()=>({getCanvas:()=>e.getState().canvas,getNodes:()=>e.getState().nodes.map(o=>({...o})),getState:()=>e.getState,zoomIn:()=>{let{manualZoom:o,canvas:a,fitZoom:m}=e.getState();o+=.2;const n=e.getState().maxManualZoom,t=e.getState().minManualZoom;o>n&&(o=n),o<t&&(o=t);const s=o*m;if(a?.backgroundImage&&a){const g=a.getCenterPoint();a.zoomToPoint(g,s)}e.setState({manualZoom:o,zoom:s})},zoomOut:()=>{let{manualZoom:o,canvas:a,fitZoom:m}=e.getState();o-=.2;const n=e.getState().maxManualZoom,t=e.getState().minManualZoom;o>n&&(o=n),o<t&&(o=t);const s=o*m;if(a?.backgroundImage&&a){const g=a.getCenterPoint();a.zoomToPoint(g,s)}e.setState({manualZoom:o,zoom:s})},getZoom:()=>e.getState().zoom,resetViewport:(o=1)=>{const{canvas:a,fitZoom:m=1,defaultCentered:n}=e.getState(),t=o*m;if(a){if(n&&a.backgroundImage){const s=a.backgroundImage.width||0,g=a.backgroundImage.height||0,c=(a.width-s*t)/2,Z=(a.height-g*t)/2;a.setViewportTransform([t,0,0,t,c,Z])}else a.setViewportTransform([t,0,0,t,0,0]);a.requestRenderAll()}e.setState({manualZoom:o,zoom:t})}}),[e]);return r.useMemo(()=>({...l,...i}),[l,i])}exports.useReactFabric=f;
|
|
2
2
|
//# sourceMappingURL=useReactFabric.cjs.map
|
|
@@ -1 +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: (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,
|
|
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 fitZoom: s.fitZoom,\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,QAASA,EAAE,QACX,gBAAiBA,EAAE,gBACnB,WAAYA,EAAE,WACd,cAAeA,EAAE,cACjB,cAAeA,EAAE,cACjB,QAASA,EAAE,OACb,YAEgBC,GAAiB,CAC/B,MAAMC,EAAQC,EAAAA,YAAAA,EACRC,EAAQC,EAAAA,SAASN,EAAUO,SAAO,EAElCC,EAAgBC,EAAAA,QAAQ,KACrB,CACL,UAAW,IAAMN,EAAM,WAAW,OAClC,SAAU,IAAMA,EAAM,SAAA,EAAW,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,WAC5CQ,GAAc,GACd,MAAMG,EAAgBX,EAAM,SAAA,EAAW,cACjCY,EAAgBZ,EAAM,SAAS,EAAE,cACnCQ,EAAaG,IAAeH,EAAaG,GACzCH,EAAaI,IAAeJ,EAAaI,GAE7C,MAAMC,EAAeL,EAAaE,EAElC,GADgBD,GAAQ,iBACTA,EAAQ,CAErB,MAAMK,EAASL,EAAO,eAAe,EACrCA,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,WAC5CQ,GAAc,GACd,MAAMG,EAAgBX,EAAM,SAAA,EAAW,cACjCY,EAAgBZ,EAAM,SAAS,EAAE,cACnCQ,EAAaG,IAAeH,EAAaG,GACzCH,EAAaI,IAAeJ,EAAaI,GAE7C,MAAMC,EAAeL,EAAaE,EAElC,GADgBD,GAAQ,iBACTA,EAAQ,CAErB,MAAMK,EAASL,EAAO,eAAe,EACrCA,EAAO,YAAYK,EAAQD,CAAY,CACzC,CAEAb,EAAM,SAAS,CACb,WAAYQ,EACZ,KAAMK,CACR,CAAC,CACH,EACA,QAAS,IAAMb,EAAM,WAAW,KAKhC,cAAe,CAACQ,EAAa,IAAM,CACjC,KAAM,CAAE,OAAAC,EAAQ,QAAAC,EAAU,EAAG,gBAAAK,CAAgB,EAAIf,EAAM,SAAS,EAE1Da,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,kBACT,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/index.cjs
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"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"),
|
|
1
|
+
"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"),f=require("./components/Control2/index.cjs"),c=require("./components/Text/index.cjs"),x=require("./components/Path/index.cjs"),o=require("./components/Line/index.cjs"),$=require("./components/Ellipse/index.cjs"),s=require("./components/IText/index.cjs"),F=require("./components/Textbox/index.cjs"),P=require("./components/WavyLine/index.cjs"),b=require("./components/Objects/index.cjs"),g=require("./plugins/FreeRect.cjs"),R=require("./plugins/GridLine.cjs"),T=require("./plugins/Pinch.cjs"),m=require("./plugins/FreeDraw.cjs"),h=require("./plugins/FreeText.cjs"),k=require("./plugins/Mask.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=f.default,exports.Text=c.default,exports.Path=x.default,exports.Line=o.default,exports.Ellipse=$.default,exports.IText=s.default,exports.Textbox=F.default,exports.WavyLine=P.default,exports.Objects=b.default,exports.PluginFreeRect=g.default,exports.PluginGrid=R.default,exports.PluginPinch=T.default,exports.PluginFreeDraw=m.default,exports.PluginFreeText=h.default,exports.PluginMask=k.default;
|
|
2
2
|
//# sourceMappingURL=index.cjs.map
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";var e=require("./FreeRect.cjs"),r=require("./GridLine.cjs"),
|
|
1
|
+
"use strict";var e=require("./FreeRect.cjs"),r=require("./GridLine.cjs"),u=require("./Pinch.cjs"),i=require("./FreeDraw.cjs"),a=require("./FreeText.cjs"),l=require("./Mask.cjs");exports.PluginFreeRect=e.default,exports.PluginGrid=r.default,exports.PluginPinch=u.default,exports.PluginFreeDraw=i.default,exports.PluginFreeText=a.default,exports.PluginMask=l.default;
|
|
2
2
|
//# sourceMappingURL=index.cjs.map
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use client";import{shallow as
|
|
1
|
+
"use client";import{shallow as Z}from"zustand/vanilla/shallow";import{useMemo as r}from"react";import{useStoreApi as d,useStore as f}from"./useStore.mjs";const S=o=>({draggable:o.draggable,selection:o.selection,isDragging:o.isDragging,width:o.width,height:o.height,canvas:o.canvas,setDraggable:o.setDraggable,setIsDragging:o.setIsDragging,lastPosX:o.lastPosX,lastPosY:o.lastPosY,setSelection:o.setSelection,zoomable:o.zoomable,setZoomable:o.setZoomable,scale:o.scale,zoom:o.zoom,fitZoom:o.fitZoom,defaultCentered:o.defaultCentered,manualZoom:o.manualZoom,maxManualZoom:o.maxManualZoom,minManualZoom:o.minManualZoom,loading:o.loading});function b(){const o=d(),i=f(S,Z),l=r(()=>({getCanvas:()=>o.getState().canvas,getNodes:()=>o.getState().nodes.map(e=>({...e})),getState:()=>o.getState,zoomIn:()=>{let{manualZoom:e,canvas:a,fitZoom:s}=o.getState();e+=.2;const n=o.getState().maxManualZoom,t=o.getState().minManualZoom;e>n&&(e=n),e<t&&(e=t);const m=e*s;if(a?.backgroundImage&&a){const g=a.getCenterPoint();a.zoomToPoint(g,m)}o.setState({manualZoom:e,zoom:m})},zoomOut:()=>{let{manualZoom:e,canvas:a,fitZoom:s}=o.getState();e-=.2;const n=o.getState().maxManualZoom,t=o.getState().minManualZoom;e>n&&(e=n),e<t&&(e=t);const m=e*s;if(a?.backgroundImage&&a){const g=a.getCenterPoint();a.zoomToPoint(g,m)}o.setState({manualZoom:e,zoom:m})},getZoom:()=>o.getState().zoom,resetViewport:(e=1)=>{const{canvas:a,fitZoom:s=1,defaultCentered:n}=o.getState(),t=e*s;if(a){if(n&&a.backgroundImage){const m=a.backgroundImage.width||0,g=a.backgroundImage.height||0,u=(a.width-m*t)/2,c=(a.height-g*t)/2;a.setViewportTransform([t,0,0,t,u,c])}else a.setViewportTransform([t,0,0,t,0,0]);a.requestRenderAll()}o.setState({manualZoom:e,zoom:t})}}),[o]);return r(()=>({...l,...i}),[l,i])}export{b as useReactFabric};
|
|
2
2
|
//# sourceMappingURL=useReactFabric.mjs.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useReactFabric.mjs","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":"0JAKA,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,
|
|
1
|
+
{"version":3,"file":"useReactFabric.mjs","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 fitZoom: s.fitZoom,\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":"0JAKA,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,QAASA,EAAE,QACX,gBAAiBA,EAAE,gBACnB,WAAYA,EAAE,WACd,cAAeA,EAAE,cACjB,cAAeA,EAAE,cACjB,QAASA,EAAE,OACb,YAEgBC,GAAiB,CAC/B,MAAMC,EAAQC,EAAAA,EACRC,EAAQC,EAASN,EAAUO,CAAO,EAElCC,EAAgBC,EAAQ,KACrB,CACL,UAAW,IAAMN,EAAM,WAAW,OAClC,SAAU,IAAMA,EAAM,SAAA,EAAW,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,WAC5CQ,GAAc,GACd,MAAMG,EAAgBX,EAAM,SAAA,EAAW,cACjCY,EAAgBZ,EAAM,SAAS,EAAE,cACnCQ,EAAaG,IAAeH,EAAaG,GACzCH,EAAaI,IAAeJ,EAAaI,GAE7C,MAAMC,EAAeL,EAAaE,EAElC,GADgBD,GAAQ,iBACTA,EAAQ,CAErB,MAAMK,EAASL,EAAO,eAAe,EACrCA,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,WAC5CQ,GAAc,GACd,MAAMG,EAAgBX,EAAM,SAAA,EAAW,cACjCY,EAAgBZ,EAAM,SAAS,EAAE,cACnCQ,EAAaG,IAAeH,EAAaG,GACzCH,EAAaI,IAAeJ,EAAaI,GAE7C,MAAMC,EAAeL,EAAaE,EAElC,GADgBD,GAAQ,iBACTA,EAAQ,CAErB,MAAMK,EAASL,EAAO,eAAe,EACrCA,EAAO,YAAYK,EAAQD,CAAY,CACzC,CAEAb,EAAM,SAAS,CACb,WAAYQ,EACZ,KAAMK,CACR,CAAC,CACH,EACA,QAAS,IAAMb,EAAM,WAAW,KAKhC,cAAe,CAACQ,EAAa,IAAM,CACjC,KAAM,CAAE,OAAAC,EAAQ,QAAAC,EAAU,EAAG,gBAAAK,CAAgB,EAAIf,EAAM,SAAS,EAE1Da,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,kBACT,CAEAT,EAAM,SAAS,CACb,WAAYQ,EACZ,KAAMK,CACR,CAAC,CACH,CACF,GACC,CAACb,CAAK,CAAC,EAEV,OAAOM,EACL,KAAO,CACL,GAAGD,EACH,GAAGH,CACL,GACA,CAACG,EAAeH,CAAK,CACvB,CACF"}
|
package/dist/esm/index.mjs
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use client";import{default as o}from"./container/ReactFabric/index.mjs";import{useReactFabric as a}from"./hooks/useReactFabric.mjs";import{useZoom as l}from"./hooks/useZoom.mjs";import{default as x}from"./components/BackgroundImage/index.mjs";import{default as
|
|
1
|
+
"use client";import{default as o}from"./container/ReactFabric/index.mjs";import{useReactFabric as a}from"./hooks/useReactFabric.mjs";import{useZoom as l}from"./hooks/useZoom.mjs";import{default as x}from"./components/BackgroundImage/index.mjs";import{default as m}from"./components/Canvas/index.mjs";import{default as d}from"./components/Group/index.mjs";import{default as n}from"./components/NodeToolbarPortal/index.mjs";import{ReactFabricProvider as P}from"./components/ReactFabricProvider.mjs";import{default as b}from"./components/Rect/index.mjs";import{default as R}from"./components/Control/index.mjs";import{default as v}from"./components/Image/index.mjs";import{default as I}from"./components/Control2/index.mjs";import{default as k}from"./components/Text/index.mjs";import{default as L}from"./components/Path/index.mjs";import{default as w}from"./components/Line/index.mjs";import{default as B}from"./components/Ellipse/index.mjs";import{default as E}from"./components/IText/index.mjs";import{default as N}from"./components/Textbox/index.mjs";import{default as W}from"./components/WavyLine/index.mjs";import{default as q}from"./components/Objects/index.mjs";import{default as A}from"./plugins/FreeRect.mjs";import{default as J}from"./plugins/GridLine.mjs";import{default as Q}from"./plugins/Pinch.mjs";import{default as U}from"./plugins/FreeDraw.mjs";import{default as X}from"./plugins/FreeText.mjs";import{default as _}from"./plugins/Mask.mjs";export{x as BackgroundImage,m as Canvas,R as Control,I as Control2,B as Ellipse,d as Group,E as IText,v as Image,w as Line,n as NodeToolbarPortal,q as Objects,L as Path,U as PluginFreeDraw,A as PluginFreeRect,X as PluginFreeText,J as PluginGrid,_ as PluginMask,Q as PluginPinch,o as ReactFabric,P as ReactFabricProvider,b as Rect,k as Text,N as Textbox,W as WavyLine,a as useReactFabric,l as useZoom};
|
|
2
2
|
//# sourceMappingURL=index.mjs.map
|
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
"use client";import{jsx as h,Fragment as m}from"react/jsx-runtime";import{Rect as f}from"fabric";import{useRef as p,useEffect as a}from"react";import{useStoreApi as b}from"../hooks/useStore.mjs";const k=i=>{const{defaultFill:d=!1,fullness:c=!1}=i,l=b(),{canvas:e}=l.getState(),t=p(null),u=()=>new f({left:0,top:0,fill:"rgba(0,0,0,0.2)",selectable:!1,evented:!1,excludeFromExport:!0,isMask:!0}),o=()=>{e?.backgroundImage&&(t.current?(t.current.set({clipPath:null}),e.requestRenderAll()):(t.current=u(),t.current.set({width:e.backgroundImage?.width,height:e.backgroundImage?.height}),e.add(t.current),e.moveObjectTo(t.current,-999)))};return a(()=>{c&&o()},[c]),a(()=>{if(!e)return;d&&o();const n=s=>{const{selected:g}=s,r=g[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=u(),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",n),e.on("selection:updated",n),()=>{t.current&&(e.remove(t.current),t.current=null),e.off("selection:created",n),e.off("selection:updated",n),e.requestRenderAll()}},[e]),h(m,{})};export{k as default};
|
|
2
|
+
//# sourceMappingURL=Mask.mjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Mask.mjs","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":"mMAUA,MAAMA,EAAcC,GAA2B,CAC3C,KAAM,CAAE,YAAAC,EAAc,GAAO,SAAAC,EAAW,EAAM,EAAIF,EAC5CG,EAAQC,EAAY,EACpB,CAAE,OAAAC,CAAO,EAAIF,EAAM,SACnBG,EAAAA,EAAcC,EAAoB,IAAI,EAEtCC,EAAe,IACV,IAAIC,EAAK,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,EAAU,IAAM,CACRT,GAAUQ,EAAAA,CAClB,EAAG,CAACR,CAAQ,CAAC,EAEbS,EAAU,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,EAAAC,EAAA,CAAA,CAAE,CACb"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useReactFabric.d.ts","sourceRoot":"","sources":["../../../src/hooks/useReactFabric.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,gBAAgB,CAAA;
|
|
1
|
+
{"version":3,"file":"useReactFabric.d.ts","sourceRoot":"","sources":["../../../src/hooks/useReactFabric.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,gBAAgB,CAAA;AA2BtD,wBAAgB,cAAc;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;IAUxB;;OAEG;;IAuBH;;OAEG;;;IAwBH;;OAEG;;EAkCR"}
|
|
@@ -4,4 +4,5 @@ export type { FreeRectProps } from './FreeRect';
|
|
|
4
4
|
export { default as PluginPinch } from './Pinch';
|
|
5
5
|
export { default as PluginFreeDraw } from './FreeDraw';
|
|
6
6
|
export { default as PluginFreeText } from './FreeText';
|
|
7
|
+
export { default as PluginMask } from './Mask';
|
|
7
8
|
//# sourceMappingURL=index.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/plugins/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,cAAc,EAAE,MAAM,YAAY,CAAA;AACtD,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,MAAM,YAAY,CAAA;AAClD,YAAY,EAAE,aAAa,EAAE,MAAM,YAAY,CAAA;AAC/C,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,SAAS,CAAA;AAChD,OAAO,EAAE,OAAO,IAAI,cAAc,EAAE,MAAM,YAAY,CAAA;AACtD,OAAO,EAAE,OAAO,IAAI,cAAc,EAAE,MAAM,YAAY,CAAA"}
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/plugins/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,cAAc,EAAE,MAAM,YAAY,CAAA;AACtD,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,MAAM,YAAY,CAAA;AAClD,YAAY,EAAE,aAAa,EAAE,MAAM,YAAY,CAAA;AAC/C,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,SAAS,CAAA;AAChD,OAAO,EAAE,OAAO,IAAI,cAAc,EAAE,MAAM,YAAY,CAAA;AACtD,OAAO,EAAE,OAAO,IAAI,cAAc,EAAE,MAAM,YAAY,CAAA;AACtD,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,MAAM,QAAQ,CAAA"}
|
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@cs-open/react-fabric",
|
|
3
3
|
"type": "module",
|
|
4
|
-
"version": "0.0.
|
|
4
|
+
"version": "0.0.10",
|
|
5
5
|
"description": "React Fabric",
|
|
6
6
|
"keywords": [
|
|
7
7
|
"@cs-open/react-fabric",
|
|
@@ -73,7 +73,7 @@
|
|
|
73
73
|
"autoprefixer": "^10.4.15",
|
|
74
74
|
"cssnano": "^6.0.1",
|
|
75
75
|
"eslint": "^9.16.0",
|
|
76
|
-
"fabric": "
|
|
76
|
+
"fabric": "latest",
|
|
77
77
|
"hammerjs": "^2.0.0",
|
|
78
78
|
"postcss": "^8.4.21",
|
|
79
79
|
"postcss-cli": "^11.0.0",
|
|
@@ -88,9 +88,9 @@
|
|
|
88
88
|
"typescript-eslint": "^8.17.0",
|
|
89
89
|
"use-sync-external-store": "^1.4.0",
|
|
90
90
|
"zustand": "^4.0.0 || ^5.0.0",
|
|
91
|
-
"@cs-open/
|
|
92
|
-
"@cs-open/
|
|
93
|
-
"@cs-open/
|
|
91
|
+
"@cs-open/eslint-config": "0.0.7",
|
|
92
|
+
"@cs-open/tsconfig": "0.0.7",
|
|
93
|
+
"@cs-open/rollup-config": "0.0.7"
|
|
94
94
|
},
|
|
95
95
|
"dependencies": {
|
|
96
96
|
"es-toolkit": "^1.39.10",
|