@cs-open/react-fabric/dist/esm/hooks/useReactFabric.mjs

React Fabric

"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};
//# sourceMappingURL=useReactFabric.mjs.map