jsdk-offical/dist/js2d.min.js

JSDK is the most comprehensive TypeScript framework, like JDK.

//JSDK 2.7.0 MIT
var JS;(function(JS){let d2;(function(d2){class Display{constructor(cfg){this._dStyle={lineWidth:1,strokeStyle:"#000000",shadowStyle:{color:"#000000",blur:0,offsetX:0,offsetY:0}};this._cfg=Jsons.union({mode:"div",x:0,y:0,zIndex:0,width:0,height:0,drawStyle:this._dStyle},cfg);let c=this._cfg,D=$1(c.holder)||document.body,sty=`position:${D==document.body?"absolute":"relative"};overflow:hidden;left:${c.x}px;top:${c.y}px;z-index:${c.zIndex};${c.cssStyle||""}`;if(c.mode=="canvas"){D.append(`<canvas id="${c.id}" width="${c.width}" height="${c.height}" style="${sty}"></canvas>`);this._ctx=$1("#"+c.id).getContext("2d");this._applyDrawStyle(c.drawStyle)}else{D.append(`<div id="${c.id}" style="${sty};width:${c.width}px;height:${c.height}px;"></div>`);this._div=$1("#"+c.id);this._div.on("dragover",e=>{e.preventDefault();e.dataTransfer.dropEffect="move"})}}clear(rect){let c=this._cfg;if(c.mode=="canvas"){let a;if(rect){a=rect}else{let b=$1("#"+c.id).box();a=[0,0,b.w,b.h]}this._ctx.clearRect.apply(this._ctx,a)}else{$1("#"+c.id).empty()}}_check(m){if(this._cfg.mode!=m)throw new RefusedError(`The operation is only supported in "${m}" mode.`)}_canvasLG(d,size){let x1,y1,x2,y2;if(d.dir=="left"){x1=size.w;y1=x2=y2=0}else if(d.dir=="right"){x1=y1=y2=0;x2=size.w}else if(d.dir=="top"){x1=x2=y2=0;y1=size.h}else if(d.dir=="bottom"){x1=x2=y1=0;y2=size.h}let lg=this._ctx.createLinearGradient(x1,y1,x2,y2);if(d.colors)d.colors.forEach(it=>{lg.addColorStop(it.stop,it.color)});return lg}_applyDrawStyle(st){if(!st)return;let m=this,ctx=m._ctx;if(st.lineWidth!=void 0)ctx.lineWidth=st.lineWidth||1;let ss=st.strokeStyle;if(ss)ctx.strokeStyle=ss;let shs=st.shadowStyle;if(shs){if(shs.color!=void 0)ctx.shadowColor=shs.color;if(shs.blur!=void 0)ctx.shadowBlur=shs.blur;if(shs.offsetX!=void 0)ctx.shadowOffsetX=shs.offsetX;if(shs.offsetY!=void 0)ctx.shadowOffsetY=shs.offsetY}ctx.fillStyle="transparent"}_applyDrawingStyle(st){if(!st)return;let T=this,ctx=T._ctx;T._applyDrawStyle(st);if(st.translate)ctx.translate.apply(ctx,st.translate);if(st.scale)ctx.scale.apply(ctx,st.scale);if(st.rotate!=void 0)ctx.rotate(st.rotate);if(st.transform)ctx.transform.apply(ctx,st.transform)}_textDrawingStyle(st){if(!st)return"";let T=this,dStyle=T._dStyle,css=`word-wrap:break-word;text-overflow:ellipsis;`;if(st.fillStyle==void 0||Types.isString(st.fillStyle)){css+=`color:${st.fillStyle||"transparent"};`}else{let fs=st.fillStyle,s="";fs.colors.forEach(c=>{s+=`,${c.color} ${c.stop==void 0?"":`${c.stop*100}%`}`});css+=`linear-gradient(to ${fs.dir}${s};`}let shs=st.shadowStyle;if(shs){css+=`text-shadow:${shs.offsetX||dStyle.shadowStyle.offsetX} ${shs.offsetY||dStyle.shadowStyle.offsetY} ${shs.blur||dStyle.shadowStyle.blur} ${shs.color||dStyle.shadowStyle.color};`}let ts=st.textStyle;if(ts){if(ts.align!=void 0)css+=`text-align:${ts.align};`;if(ts.font!=void 0)css+=`font:${ts.font};`}if(st.strokeStyle)css+=`text-stroke:${st.lineWidth||1}px ${st.strokeStyle};\n                -webkit-text-stroke:${st.lineWidth||1}px ${st.strokeStyle};\n                -moz-text-stroke:${st.lineWidth||1}px ${st.strokeStyle};`;css+=this._transformStyle(st);return css}_transformStyle(st){if(!st)return"";let css="";let ts=st.translate;if(ts!=void 0)css=`translate(${ts[0]}px,${ts[1]}px);`;let sc=st.scale;if(sc!=void 0)css+=`scale(${sc[0]},${sc[1]});`;let ro=st.rotate;if(ro!=void 0)css+=`scale(${Radians.rad2deg(ro,true)}deg);`;let tf=st.transform;if(tf!=void 0)css+=`matrix(${tf[0]},${tf[1]},${tf[2]},${tf[3]},${tf[4]},${tf[5]});`;return css}config(cfg){if(!cfg)return this._cfg;this._cfg=Jsons.union(this._cfg,cfg);return this}setDrawStyle(style){this._cfg.drawStyle=style||this._dStyle;if(this._cfg.mode=="canvas")this._applyDrawStyle(this._cfg.drawStyle);return this}_drawLine(ctx,p1,p2){ctx.moveTo(p1[0],p1[1]);ctx.lineTo(p2[0],p2[1])}drawLine(line,style){this._check("canvas");let ctx=this._ctx,p1,p2;if(Types.isArray(line)){p1=line[0];p2=line[1]}else{p1=line.p1();p2=line.p2()}ctx.beginPath();this._applyDrawingStyle(style);this._drawLine(ctx,p1,p2);ctx.stroke();ctx.closePath()}drawCircle(arc,style){this._check("canvas");let ctx=this._ctx,a;if(arc instanceof Circle){a=[arc.x,arc.y,arc.r,0,2*Math.PI,false]}else{a=[arc[0][0],arc[0][1],arc[1],0,2*Math.PI,false]}ctx.beginPath();this._applyDrawingStyle(style);ctx.arc.apply(ctx,a);ctx.stroke();ctx.closePath()}drawArc(arc,style){this._check("canvas");let ctx=this._ctx,a;if(arc instanceof CirArc){a=[arc.x,arc.y,arc.r,arc.sAngle,arc.eAngle,arc.dir===0]}else{a=[arc[0][0],arc[0][1],arc[1],arc[2],arc[3],arc[4]]}ctx.beginPath();this._applyDrawingStyle(style);ctx.arc.apply(ctx,a);ctx.stroke();ctx.closePath()}_fillStyle(ctx,fs,size){if(Types.isString(fs)){ctx.fillStyle=fs}else if(Jsons.hasKey(fs,"image")){ctx.fillStyle=ctx.createPattern(fs.image,fs.repeat)}else{ctx.fillStyle=this._canvasLG(fs,size)}}drawRect(rect,style){this._check("canvas");let ctx=this._ctx,r=rect instanceof Rect?[rect.x,rect.y,rect.w,rect.h]:rect;this._applyDrawingStyle(style);ctx.strokeRect.apply(ctx,r);if(style&&style.fillStyle){this._fillStyle(ctx,style.fillStyle,{w:r[2],h:r[3]});ctx.fillRect.apply(ctx,r)}}drawTri(tri,style){this._check("canvas");let ctx=this._ctx,p1,p2,p3;if(tri instanceof Triangle){p1=tri.p1();p2=tri.p2();p3=tri.p3()}else{p1=tri[0];p2=tri[1];p3=tri[2]}ctx.beginPath();this._applyDrawingStyle(style);this._drawLine(ctx,p1,p2);this._drawLine(ctx,p2,p3);this._drawLine(ctx,p3,p1);ctx.stroke();ctx.closePath()}drawPath(p,style){this._check("canvas");let ctx=this._ctx,ps;ps=p instanceof Polygon?p.vertexes():p;ctx.beginPath();this._applyDrawingStyle(style);let size=ps.length;if(size<2)return;ps.forEach((pt,i)=>{if(i<size-1){this._drawLine(ctx,pt,ps[i+1])}});ctx.stroke();ctx.closePath()}_setAttrs(a){let el=$1("#"+a.id);if(el){el.on("dragstart",e=>{e.dataTransfer.effectAllowed="move"});el.on("dragend",e=>{e.preventDefault();let el=e.target,box=el.box(),ox=e.offsetX-box.w/2,oy=e.offsetY-box.h/2;el.css({left:ox>0?`+=${ox}`:`-=${Math.abs(ox)}`,top:oy>0?`+=${oy}`:`-=${Math.abs(oy)}`})})}}drawText(t,style,a){if(this._cfg.mode=="canvas"){let ctx=this._ctx,ta=[t[0],t[1][0],t[1][1]];if(t.length>2)ta.push(t[2]);this._applyDrawingStyle(style);let ts=style.textStyle;if(ts){if(ts.align!=void 0)ctx.textAlign=ts.align;if(ts.font!=void 0)ctx.font=ts.font}if(style&&style.fillStyle){let ms=ctx.measureText(ta[0]);this._fillStyle(ctx,style.fillStyle,{w:ms.width,h:ms.emHeightAscent});ctx.fillText.apply(ctx,ta)}ctx.strokeText.apply(ctx,ta)}else{let p=t[1],maxWidth=t.length>2?`max-width:${t[2]}px;`:"",css=this._textDrawingStyle(style);this._div.append(Strings.nodeHTML("div",{id:a&&a.id||"",draggable:a&&a.draggable?"true":"false",style:`position:absolute;left:${p[0]}px;top:${p[1]}px;${maxWidth}${css}${a&&a.opacity!=void 0?`opacity:${a.opacity};`:""}${a&&a.zIndex!=void 0?`z-index:${a.zIndex};`:""}${a&&a.style||""}`},t[0]));if(a)this._setAttrs(a)}}changeText(id,text){this._check("div");let el=$1("#"+id);if(el)el.textContent=text}drawImage(img,a){let pic,url,sx,sy,sw,sh,dx,dy,dw,dh;if(img instanceof HTMLImageElement){pic=img;sx=sy=0;sw=dw=pic.width;sh=dh=pic.height}else{url=img.src instanceof HTMLImageElement?img.src.src:img.src;sx=img.x;sy=img.y;sw=dw=img.w;sh=dh=img.h}dx=a&&a.x||0;dy=a&&a.y||0;if(this._cfg.mode=="canvas"){this._ctx.drawImage(pic,sx,sy,sw,sh,dx,dy,dw,dh)}else{this._div.append(Strings.nodeHTML("div",{id:a&&a.id||"",draggable:a&&a.draggable?"true":"false",style:`position:absolute;overflow:hidden;left:${dx}px;top:${dy}px;width:${sw}px;height:${sh}px;${a&&a.opacity!=void 0?`opacity:${a.opacity};`:""}background:url('${url}') -${sx}px -${sy}px no-repeat;${a&&a.zIndex!=void 0?`z-index:${a.zIndex};`:""}${a&&a.style||""}`}));if(a)this._setAttrs(a)}}changeImage(id,newImg){this._check("div");let img=$1("#"+id);if(img){if(newImg instanceof HTMLImageElement){img.style.backgroundImage=`url("${newImg.src}")`}else{if(newImg.src!=void 0)img.style.backgroundImage=`url("${newImg.src.src}")`;img.style.backgroundPosition=`-${newImg.x}px -${newImg.y}px`;if(newImg.w!=void 0)img.style.width=newImg.w+"px";if(newImg.h!=void 0)img.style.height=newImg.h+"px"}}}updateChild(id,a){this._check("div");let el=$1("#"+id);if(el){if(a.draggable!=void 0)el.draggable=a.draggable;el.css({left:a.x!=void 0?a.x+"px":null,top:a.y!=void 0?a.y+"px":null,opacity:a.opacity!=void 0?a.opacity+"":null,zIndex:a.zIndex!=void 0?a.zIndex+"":null,style:a.style||null})}}removeChild(id){this._check("div");let img=$1("#"+id);if(img)img.remove()}appendChild(node){this._check("div");this._div.append(node);return this}find(selector){return this._div.find(selector)}findAll(selector){return this._div.findAll(selector)}}d2.Display=Display})(d2=JS.d2||(JS.d2={}))})(JS||(JS={}));var Display=JS.d2.Display;