@zklogic/draw.io

Version:
Draw.IO - Graph Editor integration in Angular-cli
1 lines • 38.7 kB
JavaScript
GraphViewer=function(t,e,i){this.init(t,e,i)},mxUtils.extend(GraphViewer,mxEventSource),GraphViewer.prototype.editBlankUrl="https://app.diagrams.net/",GraphViewer.prototype.imageBaseUrl="https://viewer.diagrams.net/",GraphViewer.prototype.toolbarHeight="BackCompat"==document.compatMode?24:26,GraphViewer.prototype.lightboxChrome=!0,GraphViewer.prototype.lightboxZIndex=999,GraphViewer.prototype.toolbarZIndex=999,GraphViewer.prototype.autoFit=!1,GraphViewer.prototype.autoCrop=!1,GraphViewer.prototype.autoOrigin=!0,GraphViewer.prototype.center=!1,GraphViewer.prototype.forceCenter=!1,GraphViewer.prototype.allowZoomIn=!1,GraphViewer.prototype.allowZoomOut=!0,GraphViewer.prototype.showTitleAsTooltip=!1,GraphViewer.prototype.checkVisibleState=!0,GraphViewer.prototype.minHeight=28,GraphViewer.prototype.minWidth=100,GraphViewer.prototype.responsive=!1,GraphViewer.prototype.init=function(t,e,i){if(this.graphConfig=null!=i?i:{},this.autoFit=null!=this.graphConfig["auto-fit"]?this.graphConfig["auto-fit"]:this.autoFit,this.autoCrop=null!=this.graphConfig["auto-crop"]?this.graphConfig["auto-crop"]:this.autoCrop,this.autoOrigin=null!=this.graphConfig["auto-origin"]?this.graphConfig["auto-origin"]:this.autoOrigin,this.allowZoomOut=null!=this.graphConfig["allow-zoom-out"]?this.graphConfig["allow-zoom-out"]:this.allowZoomOut,this.allowZoomIn=null!=this.graphConfig["allow-zoom-in"]?this.graphConfig["allow-zoom-in"]:this.allowZoomIn,this.forceCenter=null!=this.graphConfig.forceCenter?this.graphConfig.forceCenter:this.forceCenter,this.center=null!=this.graphConfig.center?this.graphConfig.center:this.center||this.forceCenter,this.checkVisibleState=null!=this.graphConfig["check-visible-state"]?this.graphConfig["check-visible-state"]:this.checkVisibleState,this.toolbarItems=null!=this.graphConfig.toolbar?this.graphConfig.toolbar.split(" "):[],this.zoomEnabled=mxUtils.indexOf(this.toolbarItems,"zoom")>=0,this.layersEnabled=mxUtils.indexOf(this.toolbarItems,"layers")>=0,this.tagsEnabled=mxUtils.indexOf(this.toolbarItems,"tags")>=0,this.lightboxEnabled=mxUtils.indexOf(this.toolbarItems,"lightbox")>=0,this.lightboxClickEnabled=0!=this.graphConfig.lightbox,this.initialWidth=null!=t?t.style.width:null,this.widthIsEmpty=null==this.initialWidth||""==this.initialWidth,this.currentPage=parseInt(this.graphConfig.page)||0,this.responsive=(null!=this.graphConfig.responsive?this.graphConfig.responsive:this.responsive)&&!this.zoomEnabled&&!mxClient.NO_FO&&!mxClient.IS_SF,this.pageId=this.graphConfig.pageId,this.editor=null,"inline"==this.graphConfig["toolbar-position"]&&(this.minHeight+=this.toolbarHeight),null!=e&&(this.xmlDocument=e.ownerDocument,this.xmlNode=e,this.xml=mxUtils.getXml(e),null!=t)){var o=mxUtils.bind(this,(function(){if(this.graph=new Graph(t),this.graph.enableFlowAnimation=!0,this.graph.defaultPageBackgroundColor="transparent",this.graph.transparentBackground=!1,this.responsive&&this.graph.dialect==mxConstants.DIALECT_SVG){var i=this.graph.view.getDrawPane().ownerSVGElement;this.graph.view.getCanvas(),null!=this.graphConfig.border?i.style.padding=this.graphConfig.border+"px":""==t.style.padding&&(i.style.padding="8px"),i.style.boxSizing="border-box",i.style.overflow="visible",this.graph.fit=function(){},this.graph.sizeDidChange=function(){var t=this.view.graphBounds,e=this.view.translate;i.setAttribute("viewBox",t.x+e.x-this.panDx+" "+(t.y+e.y-this.panDy)+" "+(t.width+1)+" "+(t.height+1)),this.container.style.backgroundColor=i.style.backgroundColor,this.fireEvent(new mxEventObject(mxEvent.SIZE,"bounds",t))}}this.graphConfig.move&&(this.graph.isMoveCellsEvent=function(t){return!0}),this.lightboxClickEnabled&&(t.style.cursor="pointer"),this.editor=new Editor(!0,null,null,this.graph),this.editor.editBlankUrl=this.editBlankUrl,this.graph.lightbox=!0,this.graph.centerZoom=!1,this.graph.autoExtend=!1,this.graph.autoScroll=!1,this.graph.setEnabled(!1),1==this.graphConfig["toolbar-nohide"]&&(this.editor.defaultGraphOverflow="visible"),this.xmlNode=this.editor.extractGraphModel(this.xmlNode,!0),this.xmlNode!=e&&(this.xml=mxUtils.getXml(this.xmlNode),this.xmlDocument=this.xmlNode.ownerDocument);var o=this;if(this.graph.getImageFromBundles=function(t){return o.getImageUrl(t)},mxClient.IS_SVG&&this.graph.addSvgShadow(this.graph.view.canvas.ownerSVGElement,null,!0),"mxfile"==this.xmlNode.nodeName){var n=this.xmlNode.getElementsByTagName("diagram");if(n.length>0){if(null!=this.pageId)for(var r=0;r<n.length;r++)if(this.pageId==n[r].getAttribute("id")){this.currentPage=r;break}var s=this.graph.getGlobalVariable;o=this,this.graph.getGlobalVariable=function(t){var e=n[o.currentPage];return"page"==t?e.getAttribute("name")||"Page-"+(o.currentPage+1):"pagenumber"==t?o.currentPage+1:"pagecount"==t?n.length:s.apply(this,arguments)}}}this.diagrams=[];var a=null;this.selectPage=function(t){this.handlingResize||(this.currentPage=mxUtils.mod(t,this.diagrams.length),this.updateGraphXml(Editor.parseDiagramNode(this.diagrams[this.currentPage])))},this.selectPageById=function(t){var e=this.getIndexById(t),i=e>=0;return i&&this.selectPage(e),i};var l=mxUtils.bind(this,(function(){null!=this.xmlNode&&"mxfile"==this.xmlNode.nodeName||(this.diagrams=[]),this.xmlNode!=a&&(this.diagrams=this.xmlNode.getElementsByTagName("diagram"),a=this.xmlNode)})),h=this.graph.setBackgroundImage;this.graph.setBackgroundImage=function(t){if(null!=t&&Graph.isPageLink(t.src)){var e=t.src,i=e.indexOf(",");if(i>0){var n=o.getIndexById(e.substring(i+1));n>=0&&((t=o.getImageForGraphModel(Editor.parseDiagramNode(o.diagrams[n]))).originalSrc=e)}}h.apply(this,arguments)};var d=this.graph.getGraphBounds;this.graph.getGraphBounds=function(t){var e=d.apply(this,arguments);if(null!=(t=this.backgroundImage)){var i=this.view.translate,o=this.view.scale;(e=mxRectangle.fromRectangle(e)).add(new mxRectangle((i.x+t.x)*o,(i.y+t.y)*o,t.width*o,t.height*o))}return e},this.addListener("xmlNodeChanged",l),l(),urlParams.page=o.currentPage;var p=null;this.graph.getModel().beginUpdate();try{urlParams.nav=0!=this.graphConfig.nav?"1":"0",this.editor.setGraphXml(this.xmlNode),this.graph.view.scale=this.graphConfig.zoom||1,p=this.setLayersVisible(),this.responsive||(this.graph.border=null!=this.graphConfig.border?this.graphConfig.border:8)}finally{this.graph.getModel().endUpdate()}this.responsive||(this.graph.panningHandler.isForcePanningEvent=function(t){return!mxEvent.isPopupTrigger(t.getEvent())&&"auto"==this.graph.container.style.overflow},this.graph.panningHandler.useLeftButtonForPanning=!0,this.graph.panningHandler.ignoreCell=!0,this.graph.panningHandler.usePopupTrigger=!1,this.graph.panningHandler.pinchEnabled=!1),this.graph.setPanning(!1),null!=this.graphConfig.toolbar?this.addToolbar():null!=this.graphConfig.title&&this.showTitleAsTooltip&&t.setAttribute("title",this.graphConfig.title),this.responsive||this.addSizeHandler(),!this.showLayers(this.graph)||this.forceCenter||this.layersEnabled&&!this.autoCrop||this.crop(),this.addClickHandler(this.graph),this.graph.setTooltips(0!=this.graphConfig.tooltips),this.graph.initialViewState={translate:this.graph.view.translate.clone(),scale:this.graph.view.scale},null!=p&&this.setLayersVisible(p),this.graph.customLinkClicked=function(t){if(Graph.isPageLink(t)){var e=t.indexOf(",");o.selectPageById(t.substring(e+1))||alert(mxResources.get("pageNotFound")||"Page not found")}else this.handleCustomLink(t);return!0};var g=this.graph.foldTreeCell;this.graph.foldTreeCell=mxUtils.bind(this,(function(){return this.treeCellFolded=!0,g.apply(this.graph,arguments)})),this.fireEvent(new mxEventObject("render"))})),n=window.MutationObserver||window.WebKitMutationObserver||window.MozMutationObserver;if(this.checkVisibleState&&0==t.offsetWidth&&void 0!==n){var r=this.getObservableParent(t),s=new n(mxUtils.bind(this,(function(e){t.offsetWidth>0&&(s.disconnect(),o())})));s.observe(r,{attributes:!0})}else o()}},GraphViewer.prototype.getObservableParent=function(t){for(var e=t.parentNode;e!=document.body&&null!=e.parentNode&&"none"!==mxUtils.getCurrentStyle(e).display;)e=e.parentNode;return e},GraphViewer.prototype.getImageUrl=function(t){return null!=t&&"http://"!=t.substring(0,7)&&"https://"!=t.substring(0,8)&&"data:image"!=t.substring(0,10)&&("/"==t.charAt(0)&&(t=t.substring(1,t.length)),t=this.imageBaseUrl+t),t},GraphViewer.prototype.getImageForGraphModel=function(t){var e=Graph.createOffscreenGraph(this.graph.getStylesheet());e.getGlobalVariable=this.graph.getGlobalVariable,document.body.appendChild(e.container);var i=new mxCodec(t.ownerDocument).decode(t).root;e.model.setRoot(i);var o=e.getSvg(),n=e.getGraphBounds();return document.body.removeChild(e.container),new mxImage(Editor.createSvgDataUri(mxUtils.getXml(o)),n.width,n.height,n.x,n.y)},GraphViewer.prototype.getIndexById=function(t){if(null!=this.diagrams)for(var e=0;e<this.diagrams.length;e++)if(this.diagrams[e].getAttribute("id")==t)return e;return-1},GraphViewer.prototype.setXmlNode=function(t){t=this.editor.extractGraphModel(t,!0),this.xmlDocument=t.ownerDocument,this.xml=mxUtils.getXml(t),this.xmlNode=t,this.updateGraphXml(t),this.fireEvent(new mxEventObject("xmlNodeChanged"))},GraphViewer.prototype.setFileNode=function(t){null==this.xmlNode&&(this.xmlDocument=t.ownerDocument,this.xml=mxUtils.getXml(t),this.xmlNode=t),this.setGraphXml(t)},GraphViewer.prototype.updateGraphXml=function(t){this.setGraphXml(t),this.fireEvent(new mxEventObject("graphChanged"))},GraphViewer.prototype.setLayersVisible=function(t){var e=!0;if(!this.autoOrigin){var i=[],o=this.graph.getModel();o.beginUpdate();try{for(var n=0;n<o.getChildCount(o.root);n++){var r=o.getChildAt(o.root,n);e=e&&o.isVisible(r),i.push(o.isVisible(r)),o.setVisible(r,null==t||t[n])}}finally{o.endUpdate()}}return e?null:i},GraphViewer.prototype.setGraphXml=function(t){if(null!=this.graph){this.graph.view.translate=new mxPoint,this.graph.view.scale=1;var e=null;this.graph.getModel().beginUpdate();try{this.graph.getModel().clear(),this.editor.setGraphXml(t),e=this.setLayersVisible(!0)}finally{this.graph.getModel().endUpdate()}this.responsive||(this.widthIsEmpty?(this.graph.container.style.width="",this.graph.container.style.height=""):this.graph.container.style.width=this.initialWidth,this.positionGraph()),this.graph.initialViewState={translate:this.graph.view.translate.clone(),scale:this.graph.view.scale},e&&this.setLayersVisible(e)}},GraphViewer.prototype.addSizeHandler=function(){var t=this.graph.container,e=this.graph.getGraphBounds(),i=!1;1!=this.graphConfig["toolbar-nohide"]?t.style.overflow="hidden":t.style.overflow="visible";var o=mxUtils.bind(this,(function(){if(!i){i=!0;var e=this.graph.getGraphBounds();if(1!=this.graphConfig["toolbar-nohide"]?e.width+2*this.graph.border>t.offsetWidth-2?t.style.overflow="auto":t.style.overflow="hidden":t.style.overflow="visible",null!=this.toolbar&&1!=this.graphConfig["toolbar-nohide"]){var o=t.getBoundingClientRect(),n=mxUtils.getScrollOrigin(document.body),r="relative"===document.body.style.position?document.body.getBoundingClientRect():{left:-n.x,top:-n.y};o={left:o.left-r.left,top:o.top-r.top,bottom:o.bottom-r.top,right:o.right-r.left},this.toolbar.style.left=o.left+"px","bottom"==this.graphConfig["toolbar-position"]?this.toolbar.style.top=o.bottom-1+"px":"inline"!=this.graphConfig["toolbar-position"]?(this.toolbar.style.width=Math.max(this.minToolbarWidth,t.offsetWidth)+"px",this.toolbar.style.top=o.top+1+"px"):this.toolbar.style.top=o.top+"px"}else null!=this.toolbar&&(this.toolbar.style.width=Math.max(this.minToolbarWidth,t.offsetWidth)+"px");this.treeCellFolded&&(this.treeCellFolded=!1,this.positionGraph(this.graph.view.translate),this.graph.initialViewState.translate=this.graph.view.translate.clone()),i=!1}})),n=null;if(this.handlingResize=!1,this.fitGraph=mxUtils.bind(this,(function(e){var i=t.offsetWidth;i==n||this.handlingResize||(this.handlingResize=!0,"auto"==t.style.overflow&&(t.style.overflow="hidden"),this.graph.maxFitScale=null!=e?e:this.graphConfig.zoom||(this.allowZoomIn?null:1),this.graph.fit(null,null,null,null,null,!0),(this.center||0==this.graphConfig.resize&&""!=t.style.height)&&this.graph.center(),this.graph.maxFitScale=null,0==this.graphConfig.resize&&""!=t.style.height||this.updateContainerHeight(t,Math.max(this.minHeight,this.graph.getGraphBounds().height+2*this.graph.border+1)),this.graph.initialViewState={translate:this.graph.view.translate.clone(),scale:this.graph.view.scale},n=i,window.setTimeout(mxUtils.bind(this,(function(){this.handlingResize=!1})),0))})),GraphViewer.useResizeSensor&&(document.documentMode<=9?(mxEvent.addListener(window,"resize",o),this.graph.addListener("size",o)):new ResizeSensor(this.graph.container,o)),this.graphConfig.resize||(this.zoomEnabled||!this.autoFit)&&0!=this.graphConfig.resize)this.graph.minimumContainerSize=new mxRectangle(0,0,this.minWidth,this.minHeight),this.graph.resizeContainer=!0;else if(!this.widthIsEmpty||""!=t.style.height&&this.autoFit||this.updateContainerWidth(t,e.width+2*this.graph.border),0==this.graphConfig.resize&&""!=t.style.height||this.updateContainerHeight(t,Math.max(this.minHeight,e.height+2*this.graph.border+1)),!this.zoomEnabled&&this.autoFit){n=null;var r=null,s=mxUtils.bind(this,(function(){window.clearTimeout(r),this.handlingResize||(r=window.setTimeout(mxUtils.bind(this,this.fitGraph),100))}));GraphViewer.useResizeSensor&&(document.documentMode<=9?mxEvent.addListener(window,"resize",s):new ResizeSensor(this.graph.container,s))}else document.documentMode<=9||this.graph.addListener("size",o);var a=mxUtils.bind(this,(function(i){var o=t.style.minWidth;this.widthIsEmpty&&(t.style.minWidth="100%");var r=null!=this.graphConfig["max-height"]?this.graphConfig["max-height"]:""!=t.style.height&&this.autoFit?t.offsetHeight:void 0;if(t.offsetWidth>0&&null==i&&this.allowZoomOut&&(this.allowZoomIn||e.width+2*this.graph.border>t.offsetWidth||e.height+2*this.graph.border>r)){var s=null;null!=r&&e.height+2*this.graph.border>r-2&&(s=(r-2*this.graph.border-2)/e.height),this.fitGraph(s)}else this.widthIsEmpty||null!=i||0!=this.graphConfig.resize||""==t.style.height?(i=null!=i?i:new mxPoint,this.graph.view.setTranslate(Math.floor(this.graph.border-e.x/this.graph.view.scale)+i.x,Math.floor(this.graph.border-e.y/this.graph.view.scale)+i.y),n=t.offsetWidth):this.graph.center((!this.widthIsEmpty||e.width<this.minWidth)&&1!=this.graphConfig.resize);t.style.minWidth=o}));8==document.documentMode?window.setTimeout(a,0):a(),this.positionGraph=function(t){e=this.graph.getGraphBounds(),n=null,a(t)}},GraphViewer.prototype.crop=function(){var t=this.graph,e=t.getGraphBounds(),i=t.border,o=t.view.scale,n=null!=e.x?Math.floor(t.view.translate.x-e.x/o+i):i,r=null!=e.y?Math.floor(t.view.translate.y-e.y/o+i):i;t.view.setTranslate(n,r)},GraphViewer.prototype.updateContainerWidth=function(t,e){t.style.width=e+"px"},GraphViewer.prototype.updateContainerHeight=function(t,e){(this.forceCenter||this.zoomEnabled||!this.autoFit||"BackCompat"==document.compatMode||8==document.documentMode)&&(t.style.height=e+"px")},GraphViewer.prototype.showLayers=function(t,e){var i=this.graphConfig.layers,o=null!=i&&i.length>0?i.split(" "):[],n=this.graphConfig.layerIds,r=null!=n&&n.length>0,s=!1;if(o.length>0||r||null!=e){var a=null!=e?e.getModel():null,l=t.getModel();l.beginUpdate();try{var h=l.getChildCount(l.root);if(null==a){var d=!1,p={};if(r)for(var g=0;g<n.length;g++)null!=(u=l.getCell(n[g]))&&(d=!0,p[u.id]=!0);else for(g=0;g<o.length;g++)null!=(u=l.getChildAt(l.root,parseInt(o[g])))&&(d=!0,p[u.id]=!0);for(g=0;d&&g<h;g++){var u=l.getChildAt(l.root,g);l.setVisible(u,p[u.id]||!1)}}else for(g=0;g<h;g++)l.setVisible(l.getChildAt(l.root,g),a.isVisible(a.getChildAt(a.root,g)))}finally{l.endUpdate()}s=!0}return s},GraphViewer.prototype.addToolbar=function(){var t=this.graph.container;this.graph.container.style.cursor,"bottom"==this.graphConfig["toolbar-position"]?t.style.marginBottom=this.toolbarHeight+"px":"inline"!=this.graphConfig["toolbar-position"]&&(t.style.marginTop=this.toolbarHeight+"px");var e=t.ownerDocument.createElement("div");if(e.style.position="absolute",e.style.overflow="hidden",e.style.boxSizing="border-box",e.style.whiteSpace="nowrap",e.style.textAlign="left",e.style.zIndex=this.toolbarZIndex,e.style.backgroundColor="#eee",e.style.height=this.toolbarHeight+"px",this.toolbar=e,"inline"==this.graphConfig["toolbar-position"]){mxUtils.setPrefixedStyle(e.style,"transition","opacity 100ms ease-in-out"),mxUtils.setOpacity(e,30);var i=null,o=null,n=mxUtils.bind(this,(function(t){null!=i&&(window.clearTimeout(i),fadeThead=null),null!=o&&(window.clearTimeout(o),fadeThead2=null),i=window.setTimeout(mxUtils.bind(this,(function(){mxUtils.setOpacity(e,0),i=null,o=window.setTimeout(mxUtils.bind(this,(function(){e.style.display="none",o=null})),100)})),t||200)})),r=mxUtils.bind(this,(function(t){null!=i&&(window.clearTimeout(i),fadeThead=null),null!=o&&(window.clearTimeout(o),fadeThead2=null),e.style.display="",mxUtils.setOpacity(e,t||30)}));mxEvent.addListener(this.graph.container,mxClient.IS_POINTER?"pointermove":"mousemove",mxUtils.bind(this,(function(t){mxEvent.isTouchEvent(t)||(r(30),n())}))),mxEvent.addListener(e,mxClient.IS_POINTER?"pointermove":"mousemove",(function(t){mxEvent.consume(t)})),mxEvent.addListener(e,"mouseenter",mxUtils.bind(this,(function(t){r(100)}))),mxEvent.addListener(e,"mousemove",mxUtils.bind(this,(function(t){r(100),mxEvent.consume(t)}))),mxEvent.addListener(e,"mouseleave",mxUtils.bind(this,(function(t){mxEvent.isTouchEvent(t)||r(30)})));var s=this.graph,a=s.getTolerance();s.addMouseListener({startX:0,startY:0,scrollLeft:0,scrollTop:0,mouseDown:function(t,e){this.startX=e.getGraphX(),this.startY=e.getGraphY(),this.scrollLeft=s.container.scrollLeft,this.scrollTop=s.container.scrollTop},mouseMove:function(t,e){},mouseUp:function(t,i){mxEvent.isTouchEvent(i.getEvent())&&Math.abs(this.scrollLeft-s.container.scrollLeft)<a&&Math.abs(this.scrollTop-s.container.scrollTop)<a&&Math.abs(this.startX-i.getGraphX())<a&&Math.abs(this.startY-i.getGraphY())<a&&(parseFloat(e.style.opacity||0)>0?n():r(30))}})}var l=this.toolbarItems,h=0;function d(t,i,o,n){var r=document.createElement("div");r.style.borderRight="1px solid #d0d0d0",r.style.padding="3px 6px 3px 6px",mxEvent.addListener(r,"click",t),null!=o&&r.setAttribute("title",o),r.style.display="inline-block";var s=document.createElement("img");return s.setAttribute("border","0"),s.setAttribute("src",i),s.style.width="18px",null==n||n?(mxEvent.addListener(r,"mouseenter",(function(){r.style.backgroundColor="#ddd"})),mxEvent.addListener(r,"mouseleave",(function(){r.style.backgroundColor="#eee"})),mxUtils.setOpacity(s,60),r.style.cursor="pointer"):mxUtils.setOpacity(r,30),r.appendChild(s),e.appendChild(r),h++,r}for(var p=null,g=null,u=null,c=null,m=0;m<l.length;m++){var f=l[m];if("pages"==f){(c=t.ownerDocument.createElement("div")).style.cssText="display:inline-block;position:relative;top:5px;padding:0 4px 0 4px;vertical-align:top;font-family:Helvetica,Arial;font-size:12px;;cursor:default;",mxUtils.setOpacity(c,70);var x=d(mxUtils.bind(this,(function(){this.selectPage(this.currentPage-1)})),Editor.previousImage,mxResources.get("previousPage")||"Previous Page");x.style.borderRightStyle="none",x.style.paddingLeft="0px",x.style.paddingRight="0px",e.appendChild(c);var b=d(mxUtils.bind(this,(function(){this.selectPage(this.currentPage+1)})),Editor.nextImage,mxResources.get("nextPage")||"Next Page");b.style.paddingLeft="0px",b.style.paddingRight="0px";var y=mxUtils.bind(this,(function(){c.innerHTML="",mxUtils.write(c,this.currentPage+1+" / "+this.diagrams.length),c.style.display=this.diagrams.length>1?"inline-block":"none",x.style.display=c.style.display,b.style.display=c.style.display}));this.addListener("graphChanged",y),y()}else if("zoom"==f)this.zoomEnabled&&(d(mxUtils.bind(this,(function(){this.graph.zoomOut()})),Editor.zoomOutImage,mxResources.get("zoomOut")||"Zoom Out"),d(mxUtils.bind(this,(function(){this.graph.zoomIn()})),Editor.zoomInImage,mxResources.get("zoomIn")||"Zoom In"),d(mxUtils.bind(this,(function(){this.graph.view.scaleAndTranslate(this.graph.initialViewState.scale,this.graph.initialViewState.translate.x,this.graph.initialViewState.translate.y)})),Editor.zoomFitImage,mxResources.get("fit")||"Fit"));else if("layers"==f){if(this.layersEnabled){var v=this.graph.getModel(),w=d(mxUtils.bind(this,(function(t){if(null!=p)p.parentNode.removeChild(p),p=null;else{p=this.graph.createLayersDialog(mxUtils.bind(this,(function(){if(this.autoCrop)this.crop();else if(this.autoOrigin){var t=this.graph.getGraphBounds(),e=this.graph.view;t.x<0||t.y<0?(this.crop(),this.graph.originalViewState=this.graph.initialViewState,this.graph.initialViewState={translate:e.translate.clone(),scale:e.scale}):null!=this.graph.originalViewState&&t.x/e.scale+this.graph.originalViewState.translate.x-e.translate.x>0&&t.y/e.scale+this.graph.originalViewState.translate.y-e.translate.y>0&&(e.setTranslate(this.graph.originalViewState.translate.x,this.graph.originalViewState.translate.y),this.graph.originalViewState=null,this.graph.initialViewState={translate:e.translate.clone(),scale:e.scale})}}))),mxEvent.addListener(p,"mouseleave",(function(){p.parentNode.removeChild(p),p=null}));var e=w.getBoundingClientRect();p.style.width="140px",p.style.padding="2px 0px 2px 0px",p.style.border="1px solid #d0d0d0",p.style.backgroundColor="#eee",p.style.fontFamily=Editor.defaultHtmlFont,p.style.fontSize="11px",p.style.overflowY="auto",p.style.maxHeight=this.graph.container.clientHeight-this.toolbarHeight-10+"px",p.style.zIndex=this.toolbarZIndex+1,mxUtils.setOpacity(p,80);var i=mxUtils.getDocumentScrollOrigin(document);p.style.left=i.x+e.left-1+"px",p.style.top=i.y+e.bottom-2+"px",document.body.appendChild(p)}})),Editor.layersImage,mxResources.get("layers")||"Layers");v.addListener(mxEvent.CHANGE,(function(){w.style.display=v.getChildCount(v.root)>1?"inline-block":"none"})),w.style.display=v.getChildCount(v.root)>1?"inline-block":"none"}}else if("tags"==f){if(this.tagsEnabled){var C=d(mxUtils.bind(this,(function(t){if(null==g&&((g=this.graph.createTagsDialog(mxUtils.bind(this,(function(){return!0})))).div.getElementsByTagName("div")[0].style.position="",g.div.style.maxHeight="160px",g.div.style.maxWidth="120px",g.div.style.padding="2px",g.div.style.overflow="auto",g.div.style.height="auto",g.div.style.position="fixed",g.div.style.fontFamily=Editor.defaultHtmlFont,g.div.style.fontSize="11px",g.div.style.backgroundColor="#eee",g.div.style.color="#000",g.div.style.border="1px solid #d0d0d0",g.div.style.zIndex=this.toolbarZIndex+1,mxUtils.setOpacity(g.div,80)),null!=u)u.parentNode.removeChild(u),u=null;else{u=g.div,mxEvent.addListener(u,"mouseleave",(function(){u.parentNode.removeChild(u),u=null}));var e=C.getBoundingClientRect(),i=mxUtils.getDocumentScrollOrigin(document);u.style.left=i.x+e.left-1+"px",u.style.top=i.y+e.bottom-2+"px",document.body.appendChild(u),g.refresh()}})),Editor.tagsImage,mxResources.get("tags")||"Tags");v.addListener(mxEvent.CHANGE,mxUtils.bind(this,(function(){C.style.display=this.graph.getAllTags().length>0?"inline-block":"none"}))),C.style.display=this.graph.getAllTags().length>0?"inline-block":"none"}}else if("lightbox"==f)this.lightboxEnabled&&d(mxUtils.bind(this,(function(){this.showLightbox()})),Editor.fullscreenImage,mxResources.get("fullscreen")||"Fullscreen");else if(null!=this.graphConfig["toolbar-buttons"]){var E=this.graphConfig["toolbar-buttons"][f];null!=E&&(E.elem=d(null==E.enabled||E.enabled?E.handler:function(){},E.image,E.title,E.enabled))}}if(null!=this.graph.minimumContainerSize&&(this.graph.minimumContainerSize.width=34*h),null!=this.graphConfig.title){var G=t.ownerDocument.createElement("div");G.style.cssText="display:inline-block;position:relative;padding:3px 6px 0 6px;vertical-align:top;font-family:Helvetica,Arial;font-size:12px;top:4px;cursor:default;",G.setAttribute("title",this.graphConfig.title),mxUtils.write(G,this.graphConfig.title),mxUtils.setOpacity(G,70),e.appendChild(G),this.filename=G}this.minToolbarWidth=34*h;var U=t.style.border,z=mxUtils.bind(this,(function(){if(e.style.width="inline"==this.graphConfig["toolbar-position"]?"auto":Math.max(this.minToolbarWidth,t.offsetWidth)+"px",e.style.border="1px solid #d0d0d0",1!=this.graphConfig["toolbar-nohide"]){var i=t.getBoundingClientRect(),o=mxUtils.getScrollOrigin(document.body),n="relative"===document.body.style.position?document.body.getBoundingClientRect():{left:-o.x,top:-o.y};i={left:i.left-n.left,top:i.top-n.top,bottom:i.bottom-n.top,right:i.right-n.left},e.style.left=i.left+"px","bottom"==this.graphConfig["toolbar-position"]?e.style.top=i.bottom-1+"px":"inline"!=this.graphConfig["toolbar-position"]?(e.style.marginTop=-this.toolbarHeight+"px",e.style.top=i.top+1+"px"):e.style.top=i.top+"px","1px solid transparent"==U&&(t.style.border="1px solid #d0d0d0"),document.body.appendChild(e);var r=mxUtils.bind(this,(function(){null!=e.parentNode&&e.parentNode.removeChild(e),null!=p&&(p.parentNode.removeChild(p),p=null),t.style.border=U}));mxEvent.addListener(document,"mousemove",(function(i){for(var o=mxEvent.getSource(i);null!=o;){if(o==t||o==e||o==p)return;o=o.parentNode}r()})),mxEvent.addListener(document.body,"mouseleave",(function(t){r()}))}else e.style.top=-this.toolbarHeight+"px",t.appendChild(e)}));1!=this.graphConfig["toolbar-nohide"]?mxEvent.addListener(t,"mouseenter",z):z(),this.responsive&&"undefined"!=typeof ResizeObserver&&new ResizeObserver((function(){null!=e.parentNode&&z()})).observe(t)},GraphViewer.prototype.disableButton=function(t){var e=this.graphConfig["toolbar-buttons"][t];null!=e&&(mxUtils.setOpacity(e.elem,30),mxEvent.removeListener(e.elem,"click",e.handler),mxEvent.addListener(e.elem,"mouseenter",(function(){e.elem.style.backgroundColor="#eee"})))},GraphViewer.prototype.addClickHandler=function(t,e){t.linkPolicy=this.graphConfig.target||t.linkPolicy,t.addClickHandler(this.graphConfig.highlight,mxUtils.bind(this,(function(i,o){if(null==o)for(var n=mxEvent.getSource(i);n!=t.container&&null!=n&&null==o;)"a"==n.nodeName.toLowerCase()&&(o=n.getAttribute("href")),n=n.parentNode;null!=e?null==o||t.isCustomLink(o)?mxEvent.consume(i):t.isExternalProtocol(o)||t.isBlankLink(o)||window.setTimeout((function(){e.destroy()}),0):null!=o&&null==e&&t.isCustomLink(o)&&(mxEvent.isTouchEvent(i)||!mxEvent.isPopupTrigger(i))&&t.customLinkClicked(o)&&(mxUtils.clearSelection(),mxEvent.consume(i))})),mxUtils.bind(this,(function(t){null!=e||!this.lightboxClickEnabled||mxEvent.isTouchEvent(t)&&0!=this.toolbarItems.length||this.showLightbox()})))},GraphViewer.prototype.showLightbox=function(t,e,i){if("open"==this.graphConfig.lightbox||window.self!==window.top)if(null==this.lightboxWindow||this.lightboxWindow.closed){e=null==e||e;var o={client:1,target:i=null!=i?i:"blank"};(t=null!=t?t:null==this.graphConfig.editable||this.graphConfig.editable)&&(o.edit=this.graphConfig.edit||"_blank"),e&&(o.close=1),this.layersEnabled&&(o.layers=1),this.tagsEnabled&&(o.tags={}),null!=this.graphConfig&&0!=this.graphConfig.nav&&(o.nav=1),null!=this.graphConfig&&null!=this.graphConfig.highlight&&(o.highlight=this.graphConfig.highlight.substring(1)),null!=this.currentPage&&this.currentPage>0&&(o.page=this.currentPage),void 0!==window.postMessage&&(null==document.documentMode||document.documentMode>=10)?null==this.lightboxWindow&&mxEvent.addListener(window,"message",mxUtils.bind(this,(function(t){"ready"==t.data&&t.source==this.lightboxWindow&&this.lightboxWindow.postMessage(this.xml,"*")}))):o.data=encodeURIComponent(this.xml),"1"==urlParams.dev&&(o.dev="1"),this.lightboxWindow=window.open(("1"!=urlParams.dev?EditorUi.lightboxHost:"https://test.draw.io")+"/#P"+encodeURIComponent(JSON.stringify(o)))}else this.lightboxWindow.focus();else this.showLocalLightbox()},GraphViewer.prototype.showLocalLightbox=function(){mxUtils.getDocumentScrollOrigin(document);var t=document.createElement("div");t.style.cssText="position:fixed;top:0;left:0;bottom:0;right:0;",t.style.zIndex=this.lightboxZIndex,t.style.backgroundColor="#000000",mxUtils.setOpacity(t,70),document.body.appendChild(t);var e=document.createElement("img");e.setAttribute("border","0"),e.setAttribute("src",Editor.closeBlackImage),e.style.cssText="position:fixed;top:32px;right:32px;",e.style.cursor="pointer",mxEvent.addListener(e,"click",(function(){o.destroy()})),urlParams.pages="1",urlParams.page=this.currentPage,urlParams["page-id"]=this.graphConfig.pageId,urlParams["layer-ids"]=null!=this.graphConfig.layerIds&&this.graphConfig.layerIds.length>0?this.graphConfig.layerIds.join(" "):null,urlParams.nav=0!=this.graphConfig.nav?"1":"0",urlParams.layers=this.layersEnabled?"1":"0",this.tagsEnabled&&(urlParams.tags="{}"),(null==document.documentMode||document.documentMode>=10)&&(Editor.prototype.editButtonLink=this.graphConfig.edit,Editor.prototype.editButtonFunc=this.graphConfig.editFunc),EditorUi.prototype.updateActionStates=function(){},EditorUi.prototype.addBeforeUnloadListener=function(){},EditorUi.prototype.addChromelessClickHandler=function(){};var i=Graph.prototype.shadowId;Graph.prototype.shadowId="lightboxDropShadow";var o=new EditorUi(new Editor(!0),document.createElement("div"),!0);o.editor.editBlankUrl=this.editBlankUrl,o.editor.graph.shadowId="lightboxDropShadow",Graph.prototype.shadowId=i,o.refresh=function(){};var n=mxUtils.bind(this,(function(t){27==t.keyCode&&o.destroy()})),r=o.destroy;o.destroy=function(){mxEvent.removeListener(document.documentElement,"keydown",n),document.body.removeChild(t),document.body.removeChild(e),document.body.style.overflow="auto",GraphViewer.resizeSensorEnabled=!0,r.apply(this,arguments)};var s=o.editor.graph,a=s.container;a.style.overflow="hidden",this.lightboxChrome?(a.style.border="1px solid #c0c0c0",a.style.margin="40px",mxEvent.addListener(document.documentElement,"keydown",n)):(t.style.display="none",e.style.display="none");var l=this;s.getImageFromBundles=function(t){return l.getImageUrl(t)};var h=o.createTemporaryGraph;return o.createTemporaryGraph=function(){var t=h.apply(this,arguments);return t.getImageFromBundles=function(t){return l.getImageUrl(t)},t},this.graphConfig.move&&(s.isMoveCellsEvent=function(t){return!0}),mxUtils.setPrefixedStyle(a.style,"border-radius","4px"),a.style.position="fixed",GraphViewer.resizeSensorEnabled=!1,document.body.style.overflow="hidden",mxClient.IS_SF||mxClient.IS_EDGE||(mxUtils.setPrefixedStyle(a.style,"transform","rotateY(90deg)"),mxUtils.setPrefixedStyle(a.style,"transition","all .25s ease-in-out")),this.addClickHandler(s,o),window.setTimeout(mxUtils.bind(this,(function(){a.style.outline="none",a.style.zIndex=this.lightboxZIndex,e.style.zIndex=this.lightboxZIndex,document.body.appendChild(a),document.body.appendChild(e),o.setFileData(this.xml),mxUtils.setPrefixedStyle(a.style,"transform","rotateY(0deg)"),o.chromelessToolbar.style.bottom="60px",o.chromelessToolbar.style.zIndex=this.lightboxZIndex,document.body.appendChild(o.chromelessToolbar),o.getEditBlankXml=mxUtils.bind(this,(function(){return this.xml})),o.lightboxFit(),o.chromelessResize(),this.showLayers(s,this.graph),mxEvent.addListener(t,"click",(function(){o.destroy()}))})),0),o},GraphViewer.prototype.updateTitle=function(t){t=t||"",this.showTitleAsTooltip&&null!=this.graph&&null!=this.graph.container&&this.graph.container.setAttribute("title",t),null!=this.filename&&(this.filename.innerHTML="",mxUtils.write(this.filename,t),this.filename.setAttribute("title",t))},GraphViewer.processElements=function(t){mxUtils.forEach(GraphViewer.getElementsByClassName(t||"mxgraph"),(function(t){try{t.innerHTML="",GraphViewer.createViewerForElement(t)}catch(e){t.innerHTML=e.message,null!=window.console&&console.error(e)}}))},GraphViewer.getElementsByClassName=function(t){if(document.getElementsByClassName){for(var e=document.getElementsByClassName(t),i=[],o=0;o<e.length;o++)i.push(e[o]);return i}var n=document.getElementsByTagName("*");for(e=[],o=0;o<n.length;o++){var r=n[o].className;if(null!=r&&r.length>0){var s=r.split(" ");mxUtils.indexOf(s,t)>=0&&e.push(n[o])}}return e},GraphViewer.createViewerForElement=function(t,e){var i=t.getAttribute("data-mxgraph");if(null!=i){var o=JSON.parse(i),n=function(i){var n=mxUtils.parseXml(i),r=new GraphViewer(t,n.documentElement,o);null!=e&&e(r)};null!=o.url?GraphViewer.getUrl(o.url,(function(t){n(t)})):n(o.xml)}},GraphViewer.initCss=function(){try{var t=document.createElement("style");t.type="text/css",t.innerHTML=["div.mxTooltip {","-webkit-box-shadow: 3px 3px 12px #C0C0C0;","-moz-box-shadow: 3px 3px 12px #C0C0C0;","box-shadow: 3px 3px 12px #C0C0C0;","background: #FFFFCC;","border-style: solid;","border-width: 1px;","border-color: black;","font-family: Arial;","font-size: 8pt;","position: absolute;","cursor: default;","padding: 4px;","color: black;}","td.mxPopupMenuIcon div {","width:16px;","height:16px;}","html div.mxPopupMenu {","-webkit-box-shadow:2px 2px 3px #d5d5d5;","-moz-box-shadow:2px 2px 3px #d5d5d5;","box-shadow:2px 2px 3px #d5d5d5;","_filter:progid:DXImageTransform.Microsoft.DropShadow(OffX=2, OffY=2, Color='#d0d0d0',Positive='true');","background:white;","position:absolute;","border:3px solid #e7e7e7;","padding:3px;}","html table.mxPopupMenu {","border-collapse:collapse;","margin:0px;}","html td.mxPopupMenuItem {","padding:7px 30px 7px 30px;","font-family:Helvetica Neue,Helvetica,Arial Unicode MS,Arial;","font-size:10pt;}","html td.mxPopupMenuIcon {","background-color:white;","padding:0px;}","td.mxPopupMenuIcon .geIcon {","padding:2px;","padding-bottom:4px;","margin:2px;","border:1px solid transparent;","opacity:0.5;","_width:26px;","_height:26px;}","td.mxPopupMenuIcon .geIcon:hover {","border:1px solid gray;","border-radius:2px;","opacity:1;}","html tr.mxPopupMenuItemHover {","background-color: #eeeeee;","color: black;}","table.mxPopupMenu hr {","color:#cccccc;","background-color:#cccccc;","border:none;","height:1px;}","table.mxPopupMenu tr {\tfont-size:4pt;}",".geDialog { font-family:Helvetica Neue,Helvetica,Arial Unicode MS,Arial;","font-size:10pt;","border:none;","margin:0px;}",".geDialog {\tposition:absolute;\tbackground:white;\toverflow:hidden;\tpadding:30px;\tborder:1px solid #acacac;\t-webkit-box-shadow:0px 0px 2px 2px #d5d5d5;\t-moz-box-shadow:0px 0px 2px 2px #d5d5d5;\tbox-shadow:0px 0px 2px 2px #d5d5d5;\t_filter:progid:DXImageTransform.Microsoft.DropShadow(OffX=2, OffY=2, Color='#d5d5d5', Positive='true');\tz-index: 2;}.geDialogClose {\tposition:absolute;\twidth:9px;\theight:9px;\topacity:0.5;\tcursor:pointer;\t_filter:alpha(opacity=50);}.geDialogClose:hover {\topacity:1;}.geDialogTitle {\tbox-sizing:border-box;\twhite-space:nowrap;\tbackground:rgb(229, 229, 229);\tborder-bottom:1px solid rgb(192, 192, 192);\tfont-size:15px;\tfont-weight:bold;\ttext-align:center;\tcolor:rgb(35, 86, 149);}.geDialogFooter {\tbackground:whiteSmoke;\twhite-space:nowrap;\ttext-align:right;\tbox-sizing:border-box;\tborder-top:1px solid #e5e5e5;\tcolor:darkGray;}",".geBtn {\tbackground-color: #f5f5f5;\tborder-radius: 2px;\tborder: 1px solid #d8d8d8;\tcolor: #333;\tcursor: default;\tfont-size: 11px;\tfont-weight: bold;\theight: 29px;\tline-height: 27px;\tmargin: 0 0 0 8px;\tmin-width: 72px;\toutline: 0;\tpadding: 0 8px;\tcursor: pointer;}.geBtn:hover, .geBtn:focus {\t-webkit-box-shadow: 0px 1px 1px rgba(0,0,0,0.1);\t-moz-box-shadow: 0px 1px 1px rgba(0,0,0,0.1);\tbox-shadow: 0px 1px 1px rgba(0,0,0,0.1);\tborder: 1px solid #c6c6c6;\tbackground-color: #f8f8f8;\tbackground-image: linear-gradient(#f8f8f8 0px,#f1f1f1 100%);\tcolor: #111;}.geBtn:disabled {\topacity: .5;}.gePrimaryBtn {\tbackground-color: #4d90fe;\tbackground-image: linear-gradient(#4d90fe 0px,#4787ed 100%);\tborder: 1px solid #3079ed;\tcolor: #fff;}.gePrimaryBtn:hover, .gePrimaryBtn:focus {\tbackground-color: #357ae8;\tbackground-image: linear-gradient(#4d90fe 0px,#357ae8 100%);\tborder: 1px solid #2f5bb7;\tcolor: #fff;}.gePrimaryBtn:disabled {\topacity: .5;}"].join("\n"),document.getElementsByTagName("head")[0].appendChild(t)}catch(t){}},GraphViewer.cachedUrls={},GraphViewer.getUrl=function(t,e,i){if(null!=GraphViewer.cachedUrls[t])e(GraphViewer.cachedUrls[t]);else{var o=null!=navigator.userAgent&&navigator.userAgent.indexOf("MSIE 9")>0?new XDomainRequest:new XMLHttpRequest;o.open("GET",t),o.onload=function(){e(null!=o.getText?o.getText():o.responseText)},o.onerror=i,o.send()}},GraphViewer.resizeSensorEnabled=!0,GraphViewer.useResizeSensor=!0,function(){var t=window.requestAnimationFrame||window.mozRequestAnimationFrame||window.webkitRequestAnimationFrame||function(t){return window.setTimeout(t,20)},e=function(i,o){var n=function(){GraphViewer.resizeSensorEnabled&&o()};function r(){var t,e;this.q=[],this.add=function(t){this.q.push(t)},this.call=function(){for(t=0,e=this.q.length;t<e;t++)this.q[t].call()}}function s(e,i){if(e.resizedAttached){if(e.resizedAttached)return void e.resizedAttached.add(i)}else e.resizedAttached=new r,e.resizedAttached.add(i);e.resizeSensor=document.createElement("div"),e.resizeSensor.className="resize-sensor";var o="position: absolute; left: 0; top: 0; right: 0; bottom: 0; overflow: hidden; z-index: -1; visibility: hidden;",n="position: absolute; left: 0; top: 0; transition: 0s;";e.resizeSensor.style.cssText=o,e.resizeSensor.innerHTML='<div class="resize-sensor-expand" style="'+o+'"><div style="'+n+'"></div></div><div class="resize-sensor-shrink" style="'+o+'"><div style="'+n+' width: 200%; height: 200%"></div></div>',e.appendChild(e.resizeSensor),"static"==function(t,e){return t.currentStyle?t.currentStyle[e]:window.getComputedStyle?window.getComputedStyle(t,null).getPropertyValue(e):t.style[e]}(e,"position")&&(e.style.position="relative");var s=e.resizeSensor.childNodes[0],a=s.childNodes[0],l=e.resizeSensor.childNodes[1],h=function(){a.style.width="100000px",a.style.height="100000px",s.scrollLeft=1e5,s.scrollTop=1e5,l.scrollLeft=1e5,l.scrollTop=1e5};h();var d,p,g,u,c=!1,m=function(){e.resizedAttached&&(c&&(e.resizedAttached.call(),c=!1),t(m))};t(m);var f=function(){(g=e.offsetWidth)==d&&(u=e.offsetHeight)==p||(c=!0,d=g,p=u),h()},x=function(t,e,i){t.attachEvent?t.attachEvent("on"+e,i):t.addEventListener(e,i)};x(s,"scroll",f),x(l,"scroll",f)}var a=Object.prototype.toString.call(i),l="[object Array]"===a||"[object NodeList]"===a||"[object HTMLCollection]"===a||"undefined"!=typeof jQuery&&i instanceof jQuery||"undefined"!=typeof Elements&&i instanceof Elements;if(l)for(var h=0,d=i.length;h<d;h++)s(i[h],n);else s(i,n);this.detach=function(){if(l)for(var t=0,o=i.length;t<o;t++)e.detach(i[t]);else e.detach(i)}};e.detach=function(t){t.resizeSensor&&(t.removeChild(t.resizeSensor),delete t.resizeSensor,delete t.resizedAttached)},window.ResizeSensor=e}();