UNPKG

@hufe921/canvas-editor-plugin-diagram

Version:
4 lines (3 loc) 5.02 kB
(function(){"use strict";try{if(typeof document<"u"){var i=document.createElement("style");i.id="diagram-style",i.appendChild(document.createTextNode(".diagram-dialog-mask{position:fixed;left:0;top:0;width:100%;height:100%;opacity:.5;background:#000000;z-index:99}.diagram-dialog-container{width:90%;position:fixed;top:0;right:0;bottom:0;left:5%;overflow:hidden;z-index:999;margin:0;display:flex;justify-content:center;align-items:center}.diagram-dialog{width:100%;height:90%;position:absolute;background:#ffffff;box-shadow:0 2px 12px #38383833;border:1px solid #e2e6ed;border-radius:2px}.diagram-dialog-title{position:relative;height:40px;padding:0 15px;display:flex;align-items:center;justify-content:flex-end;border-bottom:1px solid #e2e6ed}.diagram-dialog-title i{width:16px;height:16px;cursor:pointer;display:inline-block;background:url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBkPSJNOC45IDguMTkybDQuMjQyIDQuMjQzLS43MDcuNzA3TDguMTkyIDguOSAzLjk1IDEzLjE0MmwtLjcwNy0uNzA3IDQuMjQyLTQuMjQzTDMuMjQzIDMuOTVsLjcwNy0uNzA3IDQuMjQyIDQuMjQyIDQuMjQzLTQuMjQyLjcwNy43MDdMOC45IDguMTkyeiIgZmlsbD0iIzZBNkE2QSIgZmlsbC1ydWxlPSJldmVub2RkIi8+PC9zdmc+)}.diagram-dialog-main{height:calc(100% - 40px);overflow:hidden}.diagram-dialog-main iframe{width:100%;height:100%;border:none}")),document.head.appendChild(i)}}catch(e){console.error("vite-plugin-css-injected-by-js",e)}})(); (function(i,a){typeof exports=="object"&&typeof module<"u"?module.exports=a(require("@hufe921/canvas-editor")):typeof define=="function"&&define.amd?define(["@hufe921/canvas-editor"],a):(i=typeof globalThis<"u"?globalThis:i||self,i.diagram=a(i.canvasEditor))})(this,function(i){"use strict";var x=Object.defineProperty;var N=(i,a,o)=>a in i?x(i,a,{enumerable:!0,configurable:!0,writable:!0,value:o}):i[a]=o;var d=(i,a,o)=>(N(i,typeof a!="symbol"?a+"":a,o),o);const a="";var o;(function(t){t.ZH="zh",t.EN="en"})(o||(o={}));const E="https://embed.diagrams.net",h={ui:"atlas",proto:"json",libraries:1,configure:1,noSaveBtn:1},O="xmlsvg";var r;(function(t){t.CONFIGURE="configure",t.INIT="init",t.SAVE="save",t.EXIT="exit",t.EXPORT="export"})(r||(r={}));var m;(function(t){t.CONFIGURE="configure",t.STATUS="status",t.EXPORT="export",t.LOAD="load"})(m||(m={}));var f;(function(t){t.AllChangesSaved="allChangesSaved"})(f||(f={}));var g;(function(t){t.EXPORT="export"})(g||(g={}));var p;(function(t){t.UnSavedChanges="unsavedChanges"})(p||(p={}));class C{constructor(e){d(this,"mask");d(this,"container");d(this,"mainContainer");d(this,"iframe");d(this,"options");d(this,"watchMessage");d(this,"xml");this.options={lang:o.ZH,...e};const{mask:n,container:s,mainContainer:l}=this.createDialog();this.mask=n,this.container=s,this.mainContainer=l;const u=this.createDiagramIframe();this.mainContainer.append(u),this.iframe=u,this.xml=null,this.watchMessage=c=>{if(c.source===this.iframe.contentWindow&&c.data.length>0){const v=JSON.parse(c.data);if(!v)return;this.receiveMessage(v)}},this.registerEventBus()}registerEventBus(){window.addEventListener("message",this.watchMessage)}removeEventBus(){window.removeEventListener("message",this.watchMessage)}createDialog(){const e=document.createElement("div");e.classList.add("diagram-dialog-mask"),e.setAttribute(i.EDITOR_COMPONENT,i.EditorComponent.COMPONENT),document.body.append(e);const n=document.createElement("div");n.classList.add("diagram-dialog-container"),n.setAttribute(i.EDITOR_COMPONENT,i.EditorComponent.COMPONENT);const s=document.createElement("div");s.classList.add("diagram-dialog"),n.append(s);const l=document.createElement("div");l.classList.add("diagram-dialog-title");const u=document.createElement("i");u.onclick=()=>{this.destroy()},l.append(u),s.append(l);const c=document.createElement("div");return c.classList.add("diagram-dialog-main"),s.append(c),document.body.append(n),{mask:e,container:n,mainContainer:c}}createDiagramIframe(){const e=Object.keys(h).map(s=>`${s}=${h[s]}`).join("&"),n=document.createElement("iframe");return n.setAttribute("src",`${E}?${e}&lang=${this.options.lang}`),n}receiveMessage(e){e.event===r.CONFIGURE?this.configure():e.event===r.INIT?this.init():e.event===r.SAVE?(this.xml=e.xml,e.exit?e.event=r.EXIT:this.postMessage({action:m.STATUS,messageKey:f.AllChangesSaved,modified:!1})):e.event===r.EXPORT&&this.destroy(e),e.event===r.EXIT&&(this.xml?this.postMessage({action:m.EXPORT,format:O,xml:this.xml,spinKey:g.EXPORT}):this.destroy())}configure(){this.postMessage({action:r.CONFIGURE,config:h.configure})}init(){this.postMessage({action:m.LOAD,autosave:0,saveAndExit:"1",modified:p.UnSavedChanges,xml:this.options.data||""})}postMessage(e){this.iframe.contentWindow.postMessage(JSON.stringify(e),"*")}destroy(e){var n,s;this.mask.remove(),this.container.remove(),this.removeEventBus(),(s=(n=this.options).onDestroy)==null||s.call(n,e)}}function T(t){const e=t.command;e.executeLoadDiagram=(n={})=>{new C(n)}}return T}); //# sourceMappingURL=diagram.umd.cjs.map