@zklogic/draw.io
Version:
Draw.IO - Graph Editor integration in Angular-cli
1 lines • 10.3 kB
JavaScript
function mxJsCanvas(t){mxAbstractCanvas2D.call(this),this.ctx=t.getContext("2d"),this.ctx.textBaseline="top",this.ctx.fillStyle="rgba(255,255,255,0)",this.ctx.strokeStyle="rgba(0, 0, 0, 0)",this.M_RAD_PER_DEG=Math.PI/180,this.images=null==this.images?[]:this.images,this.subCanvas=null==this.subCanvas?[]:this.subCanvas}mxUtils.extend(mxJsCanvas,mxAbstractCanvas2D),mxJsCanvas.prototype.ctx=null,mxJsCanvas.prototype.waitCounter=0,mxJsCanvas.prototype.onComplete=null,mxJsCanvas.prototype.images=null,mxJsCanvas.prototype.subCanvas=null,mxJsCanvas.prototype.canvasIndex=0,mxJsCanvas.prototype.hexToRgb=function(t){t=t.replace(/^#?([a-f\d])([a-f\d])([a-f\d])$/i,(function(t,s,o,a){return s+s+o+o+a+a}));var s=/^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(t);return s?{r:parseInt(s[1],16),g:parseInt(s[2],16),b:parseInt(s[3],16)}:null},mxJsCanvas.prototype.incWaitCounter=function(){this.waitCounter++},mxJsCanvas.prototype.decWaitCounter=function(){this.waitCounter--,0==this.waitCounter&&null!=this.onComplete&&(this.onComplete(),this.onComplete=null)},mxJsCanvas.prototype.updateFont=function(){var t="";(this.state.fontStyle&mxConstants.FONT_BOLD)==mxConstants.FONT_BOLD&&(t+="bold "),(this.state.fontStyle&mxConstants.FONT_ITALIC)==mxConstants.FONT_ITALIC&&(t+="italic "),this.ctx.font=t+this.state.fontSize+"px "+this.state.fontFamily},mxJsCanvas.prototype.save=function(){this.states.push(this.state),this.state=mxUtils.clone(this.state),this.ctx.save()},mxJsCanvas.prototype.restore=function(){this.state=this.states.pop(),this.ctx.restore()},mxJsCanvas.prototype.scale=function(t){this.state.scale*=t,this.state.strokeWidth*=t,this.ctx.scale(t,t)},mxJsCanvas.prototype.translate=function(t,s){this.state.dx+=t,this.state.dy+=s,this.ctx.translate(t,s)},mxJsCanvas.prototype.rotate=function(t,s,o,a,e){if(a-=this.state.dx,e-=this.state.dy,this.ctx.translate(a,e),s||o){var n=s?-1:1,i=o?-1:1;this.ctx.scale(n,i)}this.ctx.rotate(t*this.M_RAD_PER_DEG),this.ctx.translate(-a,-e)},mxJsCanvas.prototype.setAlpha=function(t){this.state.alpha=t,this.ctx.globalAlpha=t},mxJsCanvas.prototype.setFillColor=function(t){t==mxConstants.NONE&&(t=null),this.state.fillColor=t,this.state.gradientColor=null,this.ctx.fillStyle=t},mxJsCanvas.prototype.setGradient=function(t,s,o,a,e,n,i,h,r){var l=this.ctx.createLinearGradient(0,a,0,a+n),c=this.state;c.fillColor=t,c.fillAlpha=null!=h?h:1,c.gradientColor=s,c.gradientAlpha=null!=r?r:1,c.gradientDirection=i;var x=this.hexToRgb(t),p=this.hexToRgb(s);null!=x&&l.addColorStop(0,"rgba("+x.r+","+x.g+","+x.b+","+c.fillAlpha+")"),null!=p&&l.addColorStop(1,"rgba("+p.r+","+p.g+","+p.b+","+c.gradientAlpha+")"),this.ctx.fillStyle=l},mxJsCanvas.prototype.setStrokeColor=function(t){null==t||(t==mxConstants.NONE?(this.state.strokeColor=null,this.ctx.strokeStyle="rgba(0, 0, 0, 0)"):(this.ctx.strokeStyle=t,this.state.strokeColor=t))},mxJsCanvas.prototype.setStrokeWidth=function(t){this.ctx.lineWidth=t},mxJsCanvas.prototype.setDashed=function(t){if(this.state.dashed=t,t){for(var s=this.state.dashPattern.split(" "),o=0;o<s.length;o++)s[o]=parseInt(s[o],10);this.setLineDash(s)}else this.setLineDash([0])},mxJsCanvas.prototype.setLineDash=function(t){try{"function"==typeof this.ctx.setLineDash&&this.ctx.setLineDash(t)}catch(t){}},mxJsCanvas.prototype.setDashPattern=function(t){if(this.state.dashPattern=t,this.state.dashed){for(var s=t.split(" "),o=0;o<s.length;o++)s[o]=parseInt(s[o],10);this.ctx.setLineDash(s)}},mxJsCanvas.prototype.setLineCap=function(t){this.ctx.lineCap=t},mxJsCanvas.prototype.setLineJoin=function(t){this.ctx.lineJoin=t},mxJsCanvas.prototype.setMiterLimit=function(t){this.ctx.lineJoin=t},mxJsCanvas.prototype.setFontColor=function(t){this.ctx.fillStyle=t},mxJsCanvas.prototype.setFontBackgroundColor=function(t){t==mxConstants.NONE&&(t=null),this.state.fontBackgroundColor=t},mxJsCanvas.prototype.setFontBorderColor=function(t){t==mxConstants.NONE&&(t=null),this.state.fontBorderColor=t},mxJsCanvas.prototype.setFontSize=function(t){this.state.fontSize=t},mxJsCanvas.prototype.setFontFamily=function(t){this.state.fontFamily=t},mxJsCanvas.prototype.setFontStyle=function(t){this.state.fontStyle=t},mxJsCanvas.prototype.setShadow=function(t){this.state.shadow=t,t?(this.setShadowOffset(this.state.shadowDx,this.state.shadowDy),this.setShadowAlpha(this.state.shadowAlpha)):(this.ctx.shadowColor="transparent",this.ctx.shadowBlur=0,this.ctx.shadowOffsetX=0,this.ctx.shadowOffsetY=0)},mxJsCanvas.prototype.setShadowColor=function(t){if(null!=t&&t!=mxConstants.NONE||(t=null,this.ctx.shadowColor="transparent"),this.state.shadowColor=t,this.state.shadow&&null!=t){var s=null!=this.state.shadowAlpha?this.state.shadowAlpha:1,o=this.hexToRgb(t);this.ctx.shadowColor="rgba("+o.r+","+o.g+","+o.b+","+s+")"}},mxJsCanvas.prototype.setShadowAlpha=function(t){this.state.shadowAlpha=t,this.setShadowColor(this.state.shadowColor)},mxJsCanvas.prototype.setShadowOffset=function(t,s){this.state.shadowDx=t,this.state.shadowDy=s,this.state.shadow&&(this.ctx.shadowOffsetX=t,this.ctx.shadowOffsetY=s)},mxJsCanvas.prototype.moveTo=function(t,s){this.ctx.moveTo(t,s),this.lastMoveX=t,this.lastMoveY=s},mxJsCanvas.prototype.lineTo=function(t,s){this.ctx.lineTo(t,s),this.lastMoveX=t,this.lastMoveY=s},mxJsCanvas.prototype.quadTo=function(t,s,o,a){this.ctx.quadraticCurveTo(t,s,o,a),this.lastMoveX=o,this.lastMoveY=a},mxJsCanvas.prototype.arcTo=function(t,s,o,a,e,n,i){var h=mxUtils.arcToCurves(this.lastMoveX,this.lastMoveY,t,s,o,a,e,n,i);if(null!=h)for(var r=0;r<h.length;r+=6)this.curveTo(h[r],h[r+1],h[r+2],h[r+3],h[r+4],h[r+5])},mxJsCanvas.prototype.curveTo=function(t,s,o,a,e,n){this.ctx.bezierCurveTo(t,s,o,a,e,n),this.lastMoveX=e,this.lastMoveY=n},mxJsCanvas.prototype.rect=function(t,s,o,a){this.begin(),this.moveTo(t,s),this.lineTo(t+o,s),this.lineTo(t+o,s+a),this.lineTo(t,s+a),this.close()},mxJsCanvas.prototype.roundrect=function(t,s,o,a,e,n){this.begin(),this.moveTo(t+e,s),this.lineTo(t+o-e,s),this.quadTo(t+o,s,t+o,s+n),this.lineTo(t+o,s+a-n),this.quadTo(t+o,s+a,t+o-e,s+a),this.lineTo(t+e,s+a),this.quadTo(t,s+a,t,s+a-n),this.lineTo(t,s+n),this.quadTo(t,s,t+e,s)},mxJsCanvas.prototype.ellipse=function(t,s,o,a){this.ctx.save(),this.ctx.translate(t+o/2,s+a/2),this.ctx.scale(o/2,a/2),this.ctx.beginPath(),this.ctx.arc(0,0,1,0,2*Math.PI,!1),this.ctx.restore()},mxJsCanvas.prototype.rewriteImageSource=function(t){return"http://"!=t.substring(0,7)&&"https://"!=t.substring(0,8)||(t="/proxy?url="+encodeURIComponent(t)),t},mxJsCanvas.prototype.image=function(t,s,o,a,e,n,i,h){this.state.scale,e=this.rewriteImageSource(e);var r=this.images[e];null!=r&&r.height>0&&r.width>0&&function(t,s,o,a,e,r){if(t.save(),n){var l=s.width,c=s.height;o+=(e-l*(x=Math.min(e/l,r/c)))/2,a+=(r-c*x)/2,e=l*x,r=c*x}var x=this.state.scale;i&&(t.translate(2*o+e,0),t.scale(-1,1)),h&&(t.translate(0,2*a+r),t.scale(1,-1)),t.drawImage(s,o,a,e,r),t.restore()}.call(this,this.ctx,r,t,s,o,a)},mxJsCanvas.prototype.begin=function(){this.ctx.beginPath()},mxJsCanvas.prototype.close=function(){this.ctx.closePath()},mxJsCanvas.prototype.fill=function(){this.ctx.fill()},mxJsCanvas.prototype.stroke=function(){this.ctx.stroke()},mxJsCanvas.prototype.fillAndStroke=function(){if(this.state.shadow){this.ctx.stroke(),this.ctx.fill();var t=this.ctx.shadowColor,s=this.ctx.shadowOffsetX,o=this.ctx.shadowOffsetY;this.ctx.shadowColor="transparent",this.ctx.shadowOffsetX=0,this.ctx.shadowOffsetY=0,this.ctx.stroke(),this.ctx.shadowColor=t,this.ctx.shadowOffsetX=s,this.ctx.shadowOffsetY=o}else this.ctx.fill(),this.ctx.stroke()},mxJsCanvas.prototype.text=function(t,s,o,a,e,n,i,h,r,l,c,x){if(null!=e&&0!=e.length){var p=this.state.scale;if(0!=x&&(this.ctx.translate(Math.round(t),Math.round(s)),this.ctx.rotate(x*Math.PI/180),this.ctx.translate(Math.round(-t),Math.round(-s))),"html"==r){var f=this.subCanvas[this.canvasIndex++],u=f.height,C=f.width;switch(i){case mxConstants.ALIGN_MIDDLE:s-=u/2/p;break;case mxConstants.ALIGN_BOTTOM:s-=u/p}switch(n){case mxConstants.ALIGN_CENTER:t-=C/2/p;break;case mxConstants.ALIGN_RIGHT:t-=C/p}this.ctx.save(),null==this.state.fontBackgroundColor&&null==this.state.fontBorderColor||(null!=this.state.fontBackgroundColor&&(this.ctx.fillStyle=this.state.fontBackgroundColor,this.ctx.fillRect(Math.round(t)-.5,Math.round(s)-.5,Math.round(f.width/p),Math.round(f.height/p))),null!=this.state.fontBorderColor&&(this.ctx.strokeStyle=this.state.fontBorderColor,this.ctx.lineWidth=1,this.ctx.strokeRect(Math.round(t)-.5,Math.round(s)-.5,Math.round(f.width/p),Math.round(f.height/p)))),this.ctx.scale(1/p,1/p),this.ctx.drawImage(f,Math.round(t*p),Math.round(s*p)),this.ctx.restore()}else{this.ctx.save(),this.updateFont();var d=document.createElement("div");d.innerHTML=e,d.style.position="absolute",d.style.top="-9999px",d.style.left="-9999px",d.style.fontFamily=this.state.fontFamily,d.style.fontWeight="bold",d.style.fontSize=this.state.fontSize+"pt",document.body.appendChild(d);var m=[d.offsetWidth,d.offsetHeight];document.body.removeChild(d);var v=e.split("\n"),y=m[1];this.ctx.textBaseline="top";var g=s;switch(i){case mxConstants.ALIGN_MIDDLE:this.ctx.textBaseline="middle",g=(s-=(v.length-1)*y/2)-this.state.fontSize/2;break;case mxConstants.ALIGN_BOTTOM:this.ctx.textBaseline="alphabetic",g=(s-=y*(v.length-1))-this.state.fontSize}for(var J=[],w=[],T=0;T<v.length;T++)w[T]=t,J[T]=this.ctx.measureText(v[T]).width,null!=n&&n!=mxConstants.ALIGN_LEFT&&(w[T]-=J[T],n==mxConstants.ALIGN_CENTER&&(w[T]+=J[T]/2));if(null!=this.state.fontBackgroundColor||null!=this.state.fontBorderColor){var M=w[0],b=J[0];for(T=1;T<v.length;T++)M=Math.min(M,w[T]),b=Math.max(b,J[T]);this.ctx.save(),M=Math.round(M)-.5,g=Math.round(g)-.5,null!=this.state.fontBackgroundColor&&(this.ctx.fillStyle=this.state.fontBackgroundColor,this.ctx.fillRect(M,g,b,this.state.fontSize*mxConstants.LINE_HEIGHT*v.length)),null!=this.state.fontBorderColor&&(this.ctx.strokeStyle=this.state.fontBorderColor,this.ctx.lineWidth=1,this.ctx.strokeRect(M,g,b,this.state.fontSize*mxConstants.LINE_HEIGHT*v.length)),this.ctx.restore()}for(T=0;T<v.length;T++)this.ctx.fillText(v[T],w[T],s),s+=this.state.fontSize*mxConstants.LINE_HEIGHT;this.ctx.restore()}}},mxJsCanvas.prototype.getCanvas=function(){return canvas},mxJsCanvas.prototype.finish=function(t){0==this.waitCounter?t():this.onComplete=t};