@cs-open/react-fabric/dist/cjs/plugins/Mask.cjs

React Fabric

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