@hufe921/canvas-editor-plugin-diagram/dist/diagram.js

diagram plugin for canvas-editor

(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)}})();
var E = Object.defineProperty;
var O = (t, e, i) => e in t ? E(t, e, { enumerable: !0, configurable: !0, writable: !0, value: i }) : t[e] = i;
var s = (t, e, i) => (O(t, typeof e != "symbol" ? e + "" : e, i), i);
import { EDITOR_COMPONENT as p, EditorComponent as v } from "@hufe921/canvas-editor";
var l;
(function(t) {
  t.ZH = "zh", t.EN = "en";
})(l || (l = {}));
const C = "https://embed.diagrams.net", m = {
  ui: "atlas",
  proto: "json",
  libraries: 1,
  configure: 1,
  noSaveBtn: 1
}, x = "xmlsvg";
var a;
(function(t) {
  t.CONFIGURE = "configure", t.INIT = "init", t.SAVE = "save", t.EXIT = "exit", t.EXPORT = "export";
})(a || (a = {}));
var d;
(function(t) {
  t.CONFIGURE = "configure", t.STATUS = "status", t.EXPORT = "export", t.LOAD = "load";
})(d || (d = {}));
var h;
(function(t) {
  t.AllChangesSaved = "allChangesSaved";
})(h || (h = {}));
var g;
(function(t) {
  t.EXPORT = "export";
})(g || (g = {}));
var u;
(function(t) {
  t.UnSavedChanges = "unsavedChanges";
})(u || (u = {}));
class T {
  constructor(e) {
    s(this, "mask");
    s(this, "container");
    s(this, "mainContainer");
    s(this, "iframe");
    s(this, "options");
    s(this, "watchMessage");
    s(this, "xml");
    this.options = {
      lang: l.ZH,
      ...e
    };
    const { mask: i, container: n, mainContainer: r } = this.createDialog();
    this.mask = i, this.container = n, this.mainContainer = r;
    const c = this.createDiagramIframe();
    this.mainContainer.append(c), this.iframe = c, this.xml = null, this.watchMessage = (o) => {
      if (o.source === this.iframe.contentWindow && o.data.length > 0) {
        const f = JSON.parse(o.data);
        if (!f)
          return;
        this.receiveMessage(f);
      }
    }, 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(p, v.COMPONENT), document.body.append(e);
    const i = document.createElement("div");
    i.classList.add("diagram-dialog-container"), i.setAttribute(p, v.COMPONENT);
    const n = document.createElement("div");
    n.classList.add("diagram-dialog"), i.append(n);
    const r = document.createElement("div");
    r.classList.add("diagram-dialog-title");
    const c = document.createElement("i");
    c.onclick = () => {
      this.destroy();
    }, r.append(c), n.append(r);
    const o = document.createElement("div");
    return o.classList.add("diagram-dialog-main"), n.append(o), document.body.append(i), {
      mask: e,
      container: i,
      mainContainer: o
    };
  }
  createDiagramIframe() {
    const e = Object.keys(m).map((n) => `${n}=${m[n]}`).join("&"), i = document.createElement("iframe");
    return i.setAttribute("src", `${C}?${e}&lang=${this.options.lang}`), i;
  }
  receiveMessage(e) {
    e.event === a.CONFIGURE ? this.configure() : e.event === a.INIT ? this.init() : e.event === a.SAVE ? (this.xml = e.xml, e.exit ? e.event = a.EXIT : this.postMessage({
      action: d.STATUS,
      messageKey: h.AllChangesSaved,
      modified: !1
    })) : e.event === a.EXPORT && this.destroy(e), e.event === a.EXIT && (this.xml ? this.postMessage({
      action: d.EXPORT,
      format: x,
      xml: this.xml,
      spinKey: g.EXPORT
    }) : this.destroy());
  }
  configure() {
    this.postMessage({
      action: a.CONFIGURE,
      config: m.configure
    });
  }
  init() {
    this.postMessage({
      action: d.LOAD,
      autosave: 0,
      saveAndExit: "1",
      modified: u.UnSavedChanges,
      xml: this.options.data || ""
    });
  }
  postMessage(e) {
    this.iframe.contentWindow.postMessage(JSON.stringify(e), "*");
  }
  destroy(e) {
    var i, n;
    this.mask.remove(), this.container.remove(), this.removeEventBus(), (n = (i = this.options).onDestroy) == null || n.call(i, e);
  }
}
function N(t) {
  const e = t.command;
  e.executeLoadDiagram = (i = {}) => {
    new T(i);
  };
}
export {
  N as default
};
//# sourceMappingURL=diagram.js.map