@zklogic/draw.io
Version:
Draw.IO - Graph Editor integration in Angular-cli
1 lines • 9.12 kB
JavaScript
function mxRuler(t,e,i,r){var n=window.requestAnimationFrame||window.mozRequestAnimationFrame||window.webkitRequestAnimationFrame||window.msRequestAnimationFrame,a=window.cancelAnimationFrame||window.mozCancelAnimationFrame,o=this.RULER_THICKNESS,s=this;this.unit=e;var l=Editor.isDarkMode()?{bkgClr:"#202020",outBkgClr:Editor.darkColor,cornerClr:Editor.darkColor,strokeClr:"#505759",fontClr:"#BBBBBB",guideClr:"#0088cf"}:{bkgClr:"#ffffff",outBkgClr:"#e8e9ed",cornerClr:"#fbfbfb",strokeClr:"#dadce0",fontClr:"#BBBBBB",guideClr:"#0000BB"},u=document.createElement("div");function h(){var e=t.diagramContainer;u.style.top=e.offsetTop-o+"px",u.style.left=e.offsetLeft-o+"px",u.style.width=(i?0:e.offsetWidth)+o+"px",u.style.height=(i?e.offsetHeight:0)+o+"px"}u.style.position="absolute",this.updateStyle=mxUtils.bind(this,(function(){l=Editor.isDarkMode()?{bkgClr:"#202020",outBkgClr:Editor.darkColor,cornerClr:Editor.darkColor,strokeClr:"#505759",fontClr:"#BBBBBB",guideClr:"#0088cf"}:{bkgClr:"#ffffff",outBkgClr:"#e8e9ed",cornerClr:"#fbfbfb",strokeClr:"#dadce0",fontClr:"#BBBBBB",guideClr:"#0000BB"},u.style.background=l.bkgClr,u.style[i?"borderRight":"borderBottom"]="0.5px solid "+l.strokeClr,u.style.borderLeft="0.5px solid "+l.strokeClr})),this.updateStyle(),t.container.appendChild(u)||document.body.appendChild(u),mxEvent.disableContextMenu(u),this.editorUiRefresh=t.refresh,t.refresh=function(e){s.editorUiRefresh.apply(t,arguments),h()},h();var d=document.createElement("canvas");d.width=u.offsetWidth,d.height=u.offsetHeight,u.style.overflow="hidden",d.style.position="relative",u.appendChild(d);var g=d.getContext("2d");this.ui=t;var m=t.editor.graph;this.graph=m,this.container=u,this.canvas=d;var p=function(t,e,r,n,a){t=Math.round(t),e=Math.round(e),r=Math.round(r),n=Math.round(n),g.beginPath(),g.moveTo(t+.5,e+.5),g.lineTo(r+.5,n+.5),g.stroke(),a&&(i?(g.save(),g.translate(t,e),g.rotate(-Math.PI/2),g.fillText(a,0,0),g.restore()):g.fillText(a,t,e))},f=function(){g.clearRect(0,0,d.width,d.height),g.beginPath(),g.lineWidth=.7,g.strokeStyle=l.strokeClr,g.setLineDash([]),g.font="9px Arial",g.textAlign="center";var t,e,r,n=m.view.scale,a=m.view.getBackgroundPageBounds(),u=m.view.translate,h=m.pageVisible,f=h?o+(i?a.y-m.container.scrollTop:a.x-m.container.scrollLeft):o+(i?u.y*n-m.container.scrollTop:u.x*n-m.container.scrollLeft),c=0;if(h){var x=m.getPageLayout();c=i?x.y*m.pageFormat.height:x.x*m.pageFormat.width}switch(s.unit){case mxConstants.POINTS:r=10,t=10,e=[3,5,5,5,5,10,5,5,5,5];break;case mxConstants.MILLIMETERS:r=10,t=mxConstants.PIXELS_PER_MM,e=[5,3,3,3,3,6,3,3,3,3];break;case mxConstants.METERS:r=20,t=mxConstants.PIXELS_PER_MM,e=[5,3,3,3,3,6,3,3,3,3,10,3,3,3,3,6,3,3,3,3];break;case mxConstants.INCHES:r=n<=.5||n>=4?8:16,t=mxConstants.PIXELS_PER_INCH/r,e=[5,3,5,3,7,3,5,3,7,3,5,3,7,3,5,3]}var y=t;n>=2?y=t/(2*Math.floor(n/2)):n<=.5&&(y=t*(Math.floor(1/n/2)*(s.unit==mxConstants.MILLIMETERS?2:1)));var C=null,v=h?Math.min(f+(i?a.height:a.width),i?d.height:d.width):i?d.height:d.width;if(h)if(g.fillStyle=l.outBkgClr,i){var R=f-o;R>0&&g.fillRect(0,o,o,R),v<d.height&&g.fillRect(0,v,o,d.height)}else{var E=f-o;E>0&&g.fillRect(o,0,E,o),v<d.width&&g.fillRect(v,0,d.width,o)}g.fillStyle=l.fontClr;for(var L=h?f:f%(y*n);L<=v;L+=y*n){var M=Math.round((L-f)/n/y);if(!(L<o||M==C)){C=M;var w=null;M%r==0&&(w=s.formatText(c+M*y)+""),i?p(o-e[Math.abs(M)%r],L,o,L,w):p(L,o-e[Math.abs(M)%r],L,o,w)}}g.lineWidth=1,p(i?0:o,i?o:0,o,o),g.fillStyle=l.cornerClr,g.fillRect(0,0,o,o)},c=-1,x=function(){null!=n?(null!=a&&a(c),c=n(f)):f()};this.drawRuler=x;var y=v((function(){var t=m.container;if(i){var e=t.offsetHeight+o;d.height!=e&&(d.height=e,u.style.height=e+"px",x())}else{var r=t.offsetWidth+o;d.width!=r&&(d.width=r,u.style.width=r+"px",x())}}),10);this.sizeListener=y,this.pageListener=function(){x()};var C=v((function(){var t=i?m.container.scrollTop:m.container.scrollLeft;s.lastScroll!=t&&(s.lastScroll=t,x())}),10);function v(t,e,i){return null!=n?t:function(){var n=this,a=arguments,o=function(){r=null,i||t.apply(n,a)},s=i&&!r;clearTimeout(r),r=setTimeout(o,e),s&&t.apply(n,a)};var r}this.scrollListener=C,this.unitListener=function(t,e){s.setUnit(e.getProperty("unit"))},m.addListener(mxEvent.SIZE,y),m.container.addEventListener("scroll",C),m.view.addListener("unitChanged",this.unitListener),t.addListener("pageViewChanged",this.pageListener),t.addListener("pageScaleChanged",this.pageListener),t.addListener("pageFormatChanged",this.pageListener),this.setStyle=function(t){l=t,u.style.background=l.bkgClr,f()},this.origGuideMove=mxGuide.prototype.move,mxGuide.prototype.move=function(t,e,r,n){var a=null;if(i&&t.height>4||!i&&t.width>4){if(null!=s.guidePart)try{g.putImageData(s.guidePart.imgData1,s.guidePart.x1,s.guidePart.y1),g.putImageData(s.guidePart.imgData2,s.guidePart.x2,s.guidePart.y2),g.putImageData(s.guidePart.imgData3,s.guidePart.x3,s.guidePart.y3)}catch(t){}a=s.origGuideMove.apply(this,arguments);try{var u,h,d,m,f,c,x,y,C;g.lineWidth=.5,g.strokeStyle=l.guideClr,g.setLineDash([2]),i?(h=t.y+a.y+o-this.graph.container.scrollTop,u=0,f=h+t.height/2,m=o/2,y=h+t.height,x=0,d=g.getImageData(u,h-1,o,3),p(u,h,o,h),h--,c=g.getImageData(m,f-1,o,3),p(m,f,o,f),f--,C=g.getImageData(x,y-1,o,3),p(x,y,o,y),y--):(h=0,u=t.x+a.x+o-this.graph.container.scrollLeft,f=o/2,m=u+t.width/2,y=0,x=u+t.width,d=g.getImageData(u-1,h,3,o),p(u,h,u,o),u--,c=g.getImageData(m-1,f,3,o),p(m,f,m,o),m--,C=g.getImageData(x-1,y,3,o),p(x,y,x,o),x--),null!=s.guidePart&&s.guidePart.x1==u&&s.guidePart.y1==h||(s.guidePart={imgData1:d,x1:u,y1:h,imgData2:c,x2:m,y2:f,imgData3:C,x3:x,y3:y})}catch(t){}}else a=s.origGuideMove.apply(this,arguments);return a},this.origGuideDestroy=mxGuide.prototype.destroy,mxGuide.prototype.destroy=function(){var t=s.origGuideDestroy.apply(this,arguments);if(null!=s.guidePart)try{g.putImageData(s.guidePart.imgData1,s.guidePart.x1,s.guidePart.y1),g.putImageData(s.guidePart.imgData2,s.guidePart.x2,s.guidePart.y2),g.putImageData(s.guidePart.imgData3,s.guidePart.x3,s.guidePart.y3),s.guidePart=null}catch(t){}return t}}function mxDualRuler(t,e){var i=new mxPoint(mxRuler.prototype.RULER_THICKNESS,mxRuler.prototype.RULER_THICKNESS);this.editorUiGetDiagContOffset=t.getDiagramContainerOffset,t.getDiagramContainerOffset=function(){return i},this.editorUiRefresh=t.refresh,this.ui=t,this.origGuideMove=mxGuide.prototype.move,this.origGuideDestroy=mxGuide.prototype.destroy,this.vRuler=new mxRuler(t,e,!0),this.hRuler=new mxRuler(t,e,!1,!0);var r=mxUtils.bind(this,(function(e){var i=!1;mxEvent.addGestureListeners(e,mxUtils.bind(this,(function(e){i=null!=t.currentMenu,mxEvent.consume(e)})),null,mxUtils.bind(this,(function(r){if(t.editor.graph.isEnabled()&&!t.editor.graph.isMouseDown&&(mxEvent.isTouchEvent(r)||mxEvent.isPopupTrigger(r))){if(t.editor.graph.popupMenuHandler.hideMenu(),t.hideCurrentMenu(),!mxEvent.isTouchEvent(r)||!i){var n=new mxPopupMenu(mxUtils.bind(this,(function(e,i){t.menus.addMenuItems(e,["points","inches","millimeters","meters"],i)})));n.div.className+=" geMenubarMenu",n.smartSeparators=!0,n.showDisabled=!0,n.autoExpand=!0,n.hideMenu=mxUtils.bind(this,(function(){mxPopupMenu.prototype.hideMenu.apply(n,arguments),t.resetCurrentMenu(),n.destroy()}));var a=mxEvent.getClientX(r),o=mxEvent.getClientY(r);n.popup(a,o,null,r),t.setCurrentMenu(n,e)}mxEvent.consume(r)}})))}));r(this.hRuler.container),r(this.vRuler.container),this.vRuler.drawRuler(),this.hRuler.drawRuler()}mxRuler.prototype.RULER_THICKNESS=14,mxRuler.prototype.unit=mxConstants.POINTS,mxRuler.prototype.setUnit=function(t){this.unit=t,this.drawRuler()},mxRuler.prototype.formatText=function(t){switch(this.unit){case mxConstants.POINTS:return Math.round(t);case mxConstants.MILLIMETERS:return(t/mxConstants.PIXELS_PER_MM).toFixed(1);case mxConstants.METERS:return(t/(1e3*mxConstants.PIXELS_PER_MM)).toFixed(4);case mxConstants.INCHES:return(t/mxConstants.PIXELS_PER_INCH).toFixed(2)}},mxRuler.prototype.destroy=function(){this.ui.refresh=this.editorUiRefresh,mxGuide.prototype.move=this.origGuideMove,mxGuide.prototype.destroy=this.origGuideDestroy,this.graph.removeListener(this.sizeListener),this.graph.container.removeEventListener("scroll",this.scrollListener),this.graph.view.removeListener("unitChanged",this.unitListener),this.ui.removeListener("pageViewChanged",this.pageListener),this.ui.removeListener("pageScaleChanged",this.pageListener),this.ui.removeListener("pageFormatChanged",this.pageListener),null!=this.container&&this.container.parentNode.removeChild(this.container)},mxDualRuler.prototype.updateStyle=function(){this.vRuler.updateStyle(),this.hRuler.updateStyle(),this.vRuler.drawRuler(),this.hRuler.drawRuler()},mxDualRuler.prototype.setUnit=function(t){this.vRuler.setUnit(t),this.hRuler.setUnit(t)},mxDualRuler.prototype.setStyle=function(t){this.vRuler.setStyle(t),this.hRuler.setStyle(t)},mxDualRuler.prototype.destroy=function(){this.vRuler.destroy(),this.hRuler.destroy(),this.ui.refresh=this.editorUiRefresh,mxGuide.prototype.move=this.origGuideMove,mxGuide.prototype.destroy=this.origGuideDestroy,this.ui.getDiagramContainerOffset=this.editorUiGetDiagContOffset};