@layers-app/editor 0.3.11 → 0.4.1

package/dist/layers.CQ_KfkMs.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("react/jsx-runtime"),l=require("react"),e=require("./layers.CebNnxUV.js"),T=require("react-i18next"),c=require("@mantine/core"),D=require("./layers.B5VQ5ysd.js"),B=require("@tabler/icons-react"),F=({isCloseModal:s,setCloseModalOpen:a,confirmClose:d})=>{const{t:r}=T.useTranslation();return t.jsx(c.Modal,{opened:s,onClose:()=>{a(!1)},centered:!0,title:r("editor.unsavedChanges.title"),closeOnClickOutside:!0,closeOnEscape:!0,size:"500",zIndex:999,children:t.jsxs("div",{children:[t.jsx(c.Text,{mb:"md",children:r("editor.unsavedChanges.message")}),t.jsxs(c.Flex,{justify:"flex-end",gap:"sm",children:[t.jsx(c.Button,{variant:"default",onClick:()=>{a(!1)},fullWidth:!0,children:r("editor.unsavedChanges.cancel")}),t.jsx(c.Button,{color:"red",onClick:d,fullWidth:!0,children:r("editor.unsavedChanges.closeWithoutSaving")})]})]})})},H=s=>{var r;const a=(r=s==null?void 0:s.firstElementChild)==null?void 0:r.firstElementChild,d=s.getAttribute("viewBox");if(d!=null){const u=d.split(" ");s.setAttribute("width",u[2]),s.setAttribute("height",u[3])}a&&a.tagName==="style"&&a.remove()};function W({elements:s,files:a,imageContainerRef:d,appState:r,editor:u,rootClassName:i=null,width:v="inherit",height:I="inherit",nodeKey:f,alignment:O,setModalOpen:p}){const[j,k]=l.useState(null),[b,h]=l.useState(!1);c.useMantineTheme();const{t:g}=T.useTranslation();l.useEffect(()=>{(async()=>{const o=await D.r9({appState:r,elements:s,files:a});H(o),o.setAttribute("width","100%"),o.setAttribute("height","100%"),o.setAttribute("display","block"),o.classList.add("excalidraw-svg"),k(o)})()},[s,a,r]);const S=(x,o)=>{u.update(()=>{e.ms(null);const A=e.us(f);return e.$isExcalidrawNode(A)&&A.setWidthAndHeight(x,o),!0})},w=x=>{e.deleteNode(u,f)};return t.jsx(e.ResizableContainer,{editor:u,isIcon:!1,isEmbed:!0,width:e.parseContainerSize(v),height:e.parseContainerSize(I),onResizeEnd:S,alignment:O,children:t.jsxs(c.Box,{className:"media-wrapper excaildraw",children:[t.jsxs("div",{className:"media-actions",children:[t.jsx(c.Tooltip,{label:g("editor.link.edit"),children:t.jsx(c.ActionIcon,{color:"gray","aria-label":"Settings",className:"media-action",variant:"default",size:24,onClick:()=>{p(!0)},children:t.jsx(B.IconEdit,{size:14})})}),t.jsx(e.AlignmentImage,{opened:b,setOpened:h,t:g,editor:u,nodeKey:f}),t.jsx(c.Tooltip,{label:g("editor.actions.delete"),children:t.jsx(c.ActionIcon,{color:"gray","aria-label":"Settings",className:"media-action",variant:"default",size:24,onClick:w,children:t.jsx(e.Icon,{name:"trash",size:"14"})})})]}),t.jsx(c.Box,{w:"100%",ref:x=>{x&&d&&(d.current=x)},className:i??"",dangerouslySetInnerHTML:{__html:(j==null?void 0:j.outerHTML)??""}})]})})}function $({nodeKey:s,data:a,width:d,height:r,alignment:u}){const[i]=e.o(),v=e.a(),[I,f]=l.useState(a==="[]"&&i.isEditable()),[O,p]=l.useState(!1),j=l.useRef(null),k=l.useRef(null),b=l.useRef(null),[h,g,S]=e.u(s),[w,x]=l.useState(!1),o=l.useCallback(n=>(h&&(n.preventDefault(),i.update(()=>{const m=e.us(s);m&&m.remove()})),!1),[i,h,s]);l.useEffect(()=>{if(!v){h&&S();return}return e.j(i.registerCommand(e.ae,n=>{const m=k.current,C=n.target;return w?!0:m!==null&&m.contains(C)?(n.shiftKey||S(),g(!h),n.detail>1&&f(!0),!0):!1},e.Ii),i.registerCommand(e.De,o,e.Ii),i.registerCommand(e.Ae,o,e.Ii))},[S,i,h,w,o,g,v]);const A=l.useCallback(()=>(f(!1),i.update(()=>{const n=e.us(s);n&&n.remove()})),[i,s]),q=(n,m,C)=>i.update(()=>{const M=e.us(s);e.$isExcalidrawNode(M)&&(n&&n.length>0||Object.keys(C).length>0?M.setData(JSON.stringify({appState:m,elements:n,files:C})):M.remove())}),{elements:E=[],files:N={},appState:z={}}=l.useMemo(()=>JSON.parse(a),[a]),R=l.useCallback(()=>{f(!1),p(!1),b.current=!1,E.length===0&&i.update(()=>{const n=e.us(s);n&&n.remove()})},[i,s,E.length]),y=l.useCallback(()=>{b.current?p(!0):R()},[]);return t.jsxs(t.Fragment,{children:[t.jsx(F,{isCloseModal:O,confirmClose:R,setCloseModalOpen:p}),t.jsx(D.ExcalidrawModal,{initialElements:E,isEdited:b,initialFiles:N,initialAppState:z,isShown:I,onDelete:A,onClose:y,onSave:(n,m,C)=>{q(n,m,C),f(!1)},closeOnClickOutside:!1}),E.length>0&&t.jsx("div",{style:{display:"flex",justifyContent:u},children:t.jsx(W,{imageContainerRef:j,className:"image",elements:E,files:N,appState:z,width:d,height:r,editor:i,nodeKey:s,alignment:u,setModalOpen:f})})]})}exports.default=$;