UNPKG

drawio-embed

Version:

automatically integrates drawio by iframe

2 lines (1 loc) 6.48 kB
!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?module.exports=t():"function"==typeof define&&define.amd?define(t):(e=e||self).drawioEmbed=t()}(this,function(){"use strict";function e(t){return(e="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e})(t)}function t(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}function n(e,t){for(var n=0;t.length>n;n++){var i=t[n];i.enumerable=i.enumerable||!1,i.configurable=!0,"value"in i&&(i.writable=!0),Object.defineProperty(e,i.key,i)}}function i(e,t,i){return t&&n(e.prototype,t),i&&n(e,i),e}function o(e){return(o=Object.setPrototypeOf?Object.getPrototypeOf:function(e){return e.__proto__||Object.getPrototypeOf(e)})(e)}function r(e,t){return(r=Object.setPrototypeOf||function(e,t){return e.__proto__=t,e})(e,t)}function a(e,t){return!t||"object"!=typeof t&&"function"!=typeof t?function(e){if(void 0===e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return e}(e):t}function s(e){var t=function(){if("undefined"==typeof Reflect||!Reflect.construct)return!1;if(Reflect.construct.sham)return!1;if("function"==typeof Proxy)return!0;try{return Date.prototype.toString.call(Reflect.construct(Date,[],function(){})),!0}catch(e){return!1}}();return function(){var n,i=o(e);if(t){var r=o(this).constructor;n=Reflect.construct(i,arguments,r)}else n=i.apply(this,arguments);return a(this,n)}}function c(e,t,n){var i=function(e){var t=document.createElement("div");null!=t.textContent?t.textContent=e:t.innerText=e;var n=t.innerHTML;return t=null,n}(e);t=t.split(",")[1],t=atob(t);for(var o=new Uint8Array(t.length),r=0;t.length>r;r++)o[r]=t.charCodeAt(r);var a=new Blob([o],{type:"image/svg+xml"}),s=new FileReader;s.readAsText(a),s.onload=function(){"function"==typeof n&&n(s.result.replace("<svg ","<svg content='".concat(i,"' ")))}}function u(e,t){return function(e){var t={};return(e||"").replace(/([^?&=/]+)=([^?&=/]*)/g,function(e,n,i){return t[decodeURIComponent(n)]=decodeURIComponent(i)}),t}(e.split("?")[1])[t]}var d="embed=1&ui=atlas&spin=1&proto=json&lang=zh",f=function(){function e(){t(this,e),this.savingSto=null,this.isSaving=!1}return i(e,[{key:"setSavingFlag",value:function(){var e=this;this.clearSavingFlag(),this.isSaving=!0,this.savingSto=setTimeout(function(){e.isSaving=!1},5e3)}},{key:"clearSavingFlag",value:function(){this.isSaving=!1,clearTimeout(this.savingSto)}},{key:"checkReady",value:function(e){var t=this,n=0,i=setInterval(function(){100>=++n&&t.isSaving||(clearInterval(i),e())},50)}}]),e}();return(new(function(n){!function(e,t){if("function"!=typeof t&&null!==t)throw new TypeError("Super expression must either be null or a function");e.prototype=Object.create(t&&t.prototype,{constructor:{value:e,writable:!0,configurable:!0}}),t&&r(e,t)}(a,f);var o=s(a);function a(){var e;t(this,a);for(var n=arguments.length,i=[],r=0;n>r;r++)i[r]=arguments[r];return(e=o.call.apply(o,[this].concat(i))).drawioIframe=null,e.isIframeVisible=!1,e.closeHolding=!1,e.initialized=!1,e.drawioFrameLoaded=!1,e.eventListenerBound=!1,e.iframeInserted=!1,e.drawioUrl="",e.closeIframe=function(){var t=new Event("drawioClosed");window.dispatchEvent(t),e.hideIframe()},e.isOpen=function(){return e.isIframeVisible},e.isLoaded=function(){return e.initialized},e.editImage=function(t){return e.drawioFrameLoaded?t?0===t.indexOf("<svg")?(e.sendMsgToDrawio({action:"load",xml:t}),void e.showIframe()):(e.showIframe(),e.sendMsgToDrawio({action:"spinner",message:"加载中...",show:!0,enabled:!1}),void fetch(t).then(function(e){return e.text()}).then(function(t){e.sendMsgToDrawio({action:"spinner",message:"",show:!1,enabled:!0}),setTimeout(function(){e.sendMsgToDrawio({action:"load",xml:t})},50)}).catch(function(){e.sendMsgToDrawio({action:"spinner",message:"流程图加载失败",show:!0,enabled:!1})})):(e.sendMsgToDrawio({action:"load"}),void e.showIframe()):Promise.reject()},e.init=function(t){return e.editImage.close=e.closeIframe,e.editImage.isOpen=e.isOpen,e.editImage.isLoaded=e.isLoaded,e.iframeInserted?e.editImage:(e.iframeInserted=!0,t||(t="https://www.draw.io/"),e.initCommunication(t),e.editImage)},e}return i(a,[{key:"sendMsgToDrawio",value:function(e){this.getFrame().contentWindow.postMessage(JSON.stringify(e),"*")}},{key:"showIframe",value:function(){this.getFrame().setAttribute("style","position:fixed;height:100%;width:100%;top:0;left:0;z-index:99990;background:white;"),this.isIframeVisible=!0}},{key:"hideIframe",value:function(){var e=this;this.getFrame().setAttribute("style","position:fixed;height:100%;width:100%;top:-10240px;left:0;z-index:99990;background:white;"),this.isIframeVisible=!1,setTimeout(function(){e.sendMsgToDrawio({action:"load"})},500),setTimeout(function(){e.sendMsgToDrawio({action:"spinner",message:"",show:!1,enabled:!0})},300)}},{key:"getFrame",value:function(){return this.drawioIframe||(this.drawioIframe=document.createElement("iframe"),this.drawioIframe.id="drawio-iframe"),this.drawioIframe}},{key:"initCommunication",value:function(e){if(this.drawioUrl=e,this.closeHolding=!!u(e,"hold"),!this.initialized){this.initialized=!0,-1!==e.indexOf("?")?e+="&".concat(d):e+="?".concat(d);var t=this.getFrame();t.src=e,this.hideIframe(),document.documentElement.appendChild(t),this.bindEventListener()}}},{key:"bindEventListener",value:function(){var t=this;this.eventListenerBound||(this.eventListenerBound=!0,window.addEventListener("message",function(n){if(n.data){var i=null;try{i=JSON.parse(n.data)}catch(e){}if(i&&"object"===e(i))switch(i.event){case"init":t.drawioFrameLoaded=!0,window.dispatchEvent(new Event("drawioLoaded"));break;case"save":t.sendMsgToDrawio({action:"export",format:"png",spinKey:"saving"}),t.setSavingFlag(),t.checkReady(function(){t.sendMsgToDrawio({action:"export",format:"svg",spinKey:"saving"})}),t.closeHolding?t.sendMsgToDrawio({action:"spinner",message:"保存中...",show:!0,enabled:!1}):t.hideIframe();break;case"export":if(!i.data)return;if(t.clearSavingFlag(),-1!==i.data.indexOf("data:image/png")){var o=new Event("drawioImageCreated");o.imageType="png",o.imageContent=i.data,window.dispatchEvent(o)}else c(i.xml,i.data,function(e){var t=new Event("drawioImageCreated");t.imageType="svg",t.imageContent=e,t.xml=i.xml,window.dispatchEvent(t)});break;case"exit":t.closeIframe()}}}))}}]),a}())).init});