two-dimensions-graphic/lib/tdg.min.js

Multi layers two dimensions graphic tool with canvas and SVG.

(()=>{"use strict";var t={d:(e,s)=>{for(var r in s)t.o(s,r)&&!t.o(e,r)&&Object.defineProperty(e,r,{enumerable:!0,get:s[r]})},o:(t,e)=>Object.prototype.hasOwnProperty.call(t,e),r:t=>{"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(t,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(t,"__esModule",{value:!0})}},e={};t.r(e),t.d(e,{Dimensions:()=>_,UTILS:()=>u});var s={};t.r(s),t.d(s,{CircleCommands:()=>p,EllipseCommands:()=>y,EllipseRadiuses:()=>w,PathCommands:()=>v,Point:()=>f,PointsCommands:()=>g});var r={};t.r(r),t.d(r,{CanvasCircle:()=>P,CanvasEllipse:()=>S,CanvasItem:()=>x,CanvasPath:()=>C,CanvasPathItem:()=>b,CanvasPolygon:()=>I,CanvasPolyline:()=>E,CanvasText:()=>A});var i={};t.r(i),t.d(i,{BaseLayer:()=>O});var a={};t.r(a),t.d(a,{CanvasLayer:()=>V,CanvasLayerWithBGFiller:()=>L,CanvasLayerWithBGImage:()=>F});var n={};t.r(n),t.d(n,{Screen:()=>k});var h={};t.r(h),t.d(h,{SVGAnimate:()=>Z,SVGAnimateMotion:()=>R,SVGAnimateTransform:()=>W,SVGAnimation:()=>B,SVGCircle:()=>U,SVGEllipse:()=>q,SVGGroup:()=>H,SVGItem:()=>D,SVGPath:()=>Q,SVGPolygon:()=>K,SVGPolyline:()=>J,SVGSet:()=>z,SVGText:()=>X});var o={};t.r(o),t.d(o,{SVGLayer:()=>Y});var d={};t.r(d),t.d(d,{canvas:()=>$,screen:()=>T,svg:()=>tt});var l={};t.r(l),t.d(l,{canvas:()=>r,svg:()=>h});var c={};t.r(c),t.d(c,{base:()=>i,canvas:()=>a,svg:()=>o});var m={};t.r(m),t.d(m,{base:()=>e,create:()=>d,items:()=>l,layers:()=>c,path_commands:()=>s,screens:()=>n});const u={createSvgElement:t=>document.createElementNS("http://www.w3.org/2000/svg",t)};class _{static validateInstanceof(t){if(!(t instanceof _))throw Error("Value has to be an instance of Dimensions.")}static validateDimension(t){if(!Number.isInteger(t))throw Error("Dimension value has to be an integer.")}constructor(t,e){_.validateDimension(t),_.validateDimension(e),this._width=t,this._height=e}get width(){return this._width}get height(){return this._height}}class v{static NONE="none";static validate(t){if("string"!=typeof t)throw Error("Path commands has to be an string.");if(t==v.NONE)return;let e=["(M((\\s+\\d+){2})+)","(m((\\s+\\-?\\d+){2})+)"].join("|"),s=["(\\s+[LT]((\\s+\\d+){2})+)","(\\s+[lt]((\\s+\\-?\\d+){2})+)","(\\s+[HV](\\s+\\d+)+)","(\\s+[hv](\\s+\\-?\\d+)+)","(\\s+[C](((\\s+\\d+){2}){3})+)","(\\s+[c](((\\s+\\-?\\d+){2}){3})+)","(\\s+[SQ](((\\s+\\d+){2}){2})+)","(\\s+[sq](((\\s+\\-?\\d+){2}){2})+)","(\\s+[A]((\\s+\\d+){2}\\s+\\-?\\d+(\\s+[01]){2}(\\s+\\d+){2})+)","(\\s+[a]((\\s+\\d+){2}\\s+\\-?\\d+(\\s+[01]){2}(\\s+\\-?\\d+){2})+)"].join("|"),r=new RegExp(`^\\s*(${e})(${s})((\\s+(${e}))?(${s}))*(\\s+[Zz])?\\s*$`);if(!t.match(r))throw Error("Wrond path commands string.")}constructor(t){this.value=t||v.NONE}get value(){return this._value}set value(t){v.validate(t),this._value=t}}class f{static validateCoordinate(t){if(!Number.isInteger(t))throw Error("Point coordinate has to be an integer.")}static getInstance(t){return t instanceof f?t:new f(...t)}constructor(t,e){this.x=t,this.y=e}[Symbol.toPrimitive](t){return"string"===t?`${this.x} ${this.y}`:null}get x(){return this._x}set x(t){f.validateCoordinate(t),this._x=t}get y(){return this._y}set y(t){f.validateCoordinate(t),this._y=t}}class g extends v{static validateItems(t){if(!Array.isArray(t))throw Error("Points items has to be an Array instance.");for(let e of t){if(!Array.isArray(e)||2!=e.length)throw Error("Point coordinates has to be array of two integers.");for(let t of e)f.validateCoordinate(t)}}constructor(t,e){super(),this._options=e||{},this.items=t}*[Symbol.iterator](){for(let t of this.items)yield t}get items(){return this._items}set items(t){g.validateItems(t),this._items=this._createItems(t),this._setValue()}_setValue(){if(!this.items)return;let t=this.items.map(((t,e)=>`${0===e?"M":"L"} ${t}`));this._options.isClose&&t.push("Z"),this.value=t.join(" ")}_createItems(t){return t.map((t=>new f(...t)))}}class w{static validateValue(t){if(!Number.isInteger(t))throw Error("Radius value has to be an integer.")}constructor(t,e){this.first=t,this.second=e}[Symbol.toPrimitive](t){return"string"===t?`${this.first} ${this.second}`:null}get first(){return this._first}set first(t){return w.validateValue(t),this._first=t}get second(){return this._second}set second(t){return w.validateValue(t),this._second=t}}class y extends v{constructor(t,e){super(),this.centre=t,this.radiuses=e}get centre(){return this._centre}set centre(t){this._centre=f.getInstance(t),this._setValue()}get radiuses(){return this._radiuses}set radiuses(t){this._radiuses=t instanceof w?t:new w(...t),this._setValue()}_setValue(){if(!this.centre||!this.radiuses)return;let t=new f(this.centre.x-this.radiuses.first,this.centre.y),e=new f(this.centre.x+this.radiuses.first,this.centre.y);this.value=[`M ${t}`,`A ${this.radiuses} 0 1 0 ${e} ${this.radiuses} 0 0 0 ${t}`,"Z"].join(" ")}}class p extends y{constructor(t,e){super(t,[e,e]),this._radius=e}get radius(){return this._radius}set radius(t){this.radiuses=[t,t],this._radius=t}}class x{constructor(t){t={stroke:!0,...t||{}},this.stroke=t.stroke,this.fill=t.fill,this.flatParams=t.flatParams,this.byMethodParams=t.byMethodParams}get stroke(){return this._stroke}set stroke(t){this._stroke=!!t,this._refresh()}get fill(){return this._fill}set fill(t){this._fill=!!t,this._refresh()}get flatParams(){return this._flatParams}set flatParams(t){this._flatParams={...t},this._refresh()}get byMethodParams(){return this._byMethodParams}set byMethodParams(t){this._byMethodParams={...t},this._refresh()}get layer(){return this._layer}set layer(t){this._layer=t}draw(){if(!this.layer)throw Error("Object has no layer to draw to.");this.layer.ctx.save(),this._setFlatParams(),this._setByMethodParams(),this.stroke&&this._drawStroke(),this.fill&&this._drawFill(),this.layer.ctx.restore()}_drawStroke(){throw Error("_drawStroke() method need to be overriden")}_drawFill(){throw Error("_drawFill() method need to be overriden")}setFlatParam(t,e){if("string"!=typeof t)throw Error("Name has to be a string.");this._flatParams={...this._flatParams||{},[t]:e},this._refresh()}setByMethodParam(t,e){if("string"!=typeof t)throw Error("Name has to be a string.");if(!Array.isArray(e))throw Error("Arguments have to be an array.");this._byMethodParams={...this._byMethodParams||{},[t]:e},this._refresh()}_setFlatParams(){if(this.flatParams)for(let[t,e]of Object.entries(this.flatParams))this.layer.ctx[t]=e}_setByMethodParams(){if(this.byMethodParams)for(let[t,e]of Object.entries(this.byMethodParams))this.layer.ctx[t](...e)}_refresh(){this.layer&&this.layer.refresh()}remove(){}}class b extends x{get commands(){return new v(null)}get path(){return this.commands.value}_drawStroke(){let t=new Path2D(this.path);this.layer.ctx.stroke(t)}_drawFill(){let t=new Path2D(this.path);this.layer.ctx.fill(t)}_refresh(){this._commands&&super._refresh()}}class P extends b{constructor(t,e,s){super(s),this.commands=new p(t,e),this._centre=t,this._radius=e}get centre(){return this._centre}set centre(t){this.commands.centre=t,this._centre=t,this._refresh()}get radius(){return this._radius}set radius(t){this.commands.radius=t,this._radius=t,this._refresh()}get commands(){return this._commands}set commands(t){if(!(t instanceof p))throw Error("Commands value has to be an CircleCommands instance.");this._commands=t,this._centre=t.centre,this._radius=t.radius,this._refresh()}}class S extends b{constructor(t,e,s){super(s),this.commands=new y(t,e),this._centre=t,this._radiuses=e}get centre(){return this._centre}set centre(t){this.commands.centre=t,this._centre=t,this._refresh()}get radiuses(){return this._radiuses}set radiuses(t){this.commands.radiuses=t,this._radiuses=t,this._refresh()}get commands(){return this._commands}set commands(t){if(!(t instanceof y))throw Error("Commands value has to be an EllipseCommands instance.");this._commands=t,this._centre=t.centre,this._radiuses=t.radiuses,this._refresh()}}class C extends b{constructor(t,e){super(e),this.value=t}get value(){return this._value}set value(t){this.commands=new v(t),this._value=t,this._refresh()}get commands(){return this._commands}set commands(t){if(!(t instanceof v))throw Error("Commands value has to be an PathCommands instance.");this._commands=t,this._value=t.value,this._refresh()}}class E extends b{static COMMANDS_OPTIONS={};constructor(t,e){super(e),this.points=t}get points(){return this._points}set points(t){this.commands=new g(t,this.constructor.COMMANDS_OPTIONS),this._points=t,this._refresh()}get commands(){return this._commands}set commands(t){if(!(t instanceof g))throw Error("Commands value has to be an PointsCommands instance.");this._commands=t,this._points=t.items,this._refresh()}}class I extends E{static COMMANDS_OPTIONS={isClose:!0}}class A extends x{constructor(t,e,s){super(s),this._value=t,this.centre=e}get value(){return this._value}set value(t){this._value=t,this._refresh()}get centre(){return this._centre}set centre(t){this._centre=f.getInstance(t),this._refresh()}_drawStroke(){this.layer.ctx.strokeText(this.value,this.centre.x,this.centre.y)}_drawFill(){this.layer.ctx.fillText(this.value,this.centre.x,this.centre.y)}}class O{constructor(){this.element=this.createElement(),this._zIndex=null,this._initialZIndex=null,this._isShowed=!0}get dimensions(){return this._dimensions}set dimensions(t){_.validateInstanceof(t),this._dimensions=t,this.element.setAttribute("width",t.width),this.element.setAttribute("height",t.height)}get isShowed(){return this._isShowed}get zIndex(){return this._zIndex}set zIndex(t){if(!Number.isInteger(t))throw Error("Z-index value has to be an integer.");null===this._initialZIndex&&(this._initialZIndex=t),this.element.style.zIndex=t,this._zIndex=t}resetZIndex(){null!==this._initialZIndex&&(this.zIndex=this._initialZIndex)}createElement(){let t=this._createElement();return t.style.position="absolute",t.style.top="0px",t.style.left="0px",t}_createElement(){}show(){this._isShowed=!0,this.element.style.display="block"}hide(){this._isShowed=!1,this.element.style.display="none"}}class M{constructor(t){this.data={},this._parent=t}get values(){return Object.values(this.data)}add(t,e){if(t in this.data)throw Error(`Item with name "${t}" already exists.`);this.data[t]=e}remove(t){if(!(t in this.data))throw Error(`Item with name "${t}" does not exist.`);this.data[t].remove(),delete this.data[t]}}class N extends M{add(t,e){super.add(t,e),e.layer=this._parent,e.draw()}remove(t){super.remove(t),this._parent.refresh()}}class G extends M{add(t,e){super.add(t,e),this._parent.element.appendChild(e.element)}}class V extends O{constructor(t){t=t||{},super(),this.ctx=this.element.getContext("2d"),this.items=new N(this),this._drawFunct=t.drawFunct}get dimensions(){return this._dimensions}set dimensions(t){super.dimensions=t,this.refresh()}refresh(){this.clear(),this._draw()}clear(){this.ctx.clearRect(0,0,this.dimensions.width,this.dimensions.height)}_draw(){this._drawFunct&&this._drawFunct(this.ctx);for(let t of this.items.values)t.draw()}_createElement(){return document.createElement("canvas")}}class L extends V{constructor(t,e){super(e),this.bgFiller=t}get bgFiller(){return this._bgFiller}set bgFiller(t){this._bgFiller=t,this.dimensions&&this.refresh()}_draw(){this._drawBGFiller(),super._draw()}_drawBGFiller(){this.ctx.save(),this.ctx.fillStyle=this.bgFiller,this.ctx.fillRect(0,0,this.dimensions.width,this.dimensions.height),this.ctx.restore()}}class F extends V{constructor(t,e){super(e=e||{}),this._repetition=e.repetition||"repeat",this._image=new Image,this._image.onload=()=>{this.refresh()},this.imageSrc=t}get imageSrc(){return this._imageUrl}set imageSrc(t){this._image.src=t}_draw(){this._drawBGImage(),super._draw()}_drawBGImage(){this.ctx.save(),this.ctx.fillStyle=this.ctx.createPattern(this._image,this._repetition),this.ctx.fillRect(0,0,this.dimensions.width,this.dimensions.height),this.ctx.restore()}}const $={layer:t=>new V(t),layerWithBGFiller:(t,e)=>new L(t,e),layerWithBGImage:(t,e)=>new F(t,e),circle:(t,e,s)=>new P(t,e,s),ellipse:(t,e,s)=>new S(t,e,s),path:(t,e)=>new C(t,e),polygon:(t,e)=>new I(t,e),polyline:(t,e)=>new E(t,e),text:(t,e,s)=>new A(t,e,s)};class k{constructor(t,e){this.element=document.getElementById(t),this.element.style.position="relative",e=e||{};let[s,r]=e.dimensions||[100,100];this.dimensions=new _(s,r),this.layers={},this._activeLayerName=null}get dimensions(){return this._dimensions}set dimensions(t){_.validateInstanceof(t),this._dimensions=t,this.element.style.width=`${t.width}px`,this.element.style.height=`${t.height}px`}addLayer(t,e){if(t in this.layers)throw Error(`Layer with name "${t}" already exists.`);e.zIndex=Object.keys(this.layers).length,e.dimensions=this.dimensions,this.layers[t]=e,this.element.appendChild(e.element),this._activeLayerName&&this.activateLayer(this._activeLayerName)}activateLayer(t){if(!(t in this.layers))throw Error(`Layer with name "${t}" does not exist.`);this.deactivateLayer(),this.layers[t].zIndex=Object.keys(this.layers).length,this._activeLayerName=t}deactivateLayer(){null!=this._activeLayerName&&(this.layers[this._activeLayerName].resetZIndex(),this._activeLayerName=null)}}function T(t,e){return new k(t,e)}class j{constructor(t,e){this.element=u.createSvgElement(t),e=e||{};for(let[t,s]of Object.entries(e))this.setAttr(t,s);this._items=new G(this)}get items(){return this._items}getAttr(t){return this.element.getAttribute(t)}setAttr(t,e){this.element.setAttribute(t,e)}rmAttr(t){this.element.removeAttribute(t)}remove(){for(let t of this.items.values)t.remove();this.element.remove(),this.element=null}}class D extends j{constructor(t,e){super(t,e={fill:"none",stroke:"#000000",...e||{}})}}class B extends j{constructor(t,e,s){super(t,e),s=s||{};for(let[t,e]of Object.entries(s))this.element.addEventListener(t,e)}}class Z extends B{constructor(t,e){(t=t||{}).end||t.max||t.repeatDur||t.repeatCount||(t.repeatCount="indefinite"),super("animate",t)}}class z extends B{constructor(t,e){super("set",t)}}class R extends B{constructor(t,e){super("animateMotion",t)}}class W extends B{constructor(t,e){super("animateTransform",t)}}class U extends D{constructor(t,e,s){super("path",s),this.commands=new p(t,e),this._centre=t,this._radius=e}get centre(){return this._centre}set centre(t){this.commands.centre=t,this._centre=t,this.setAttr("d",this.commands.value)}get radius(){return this._radius}set radius(t){this.commands.radius=t,this._radius=t,this.setAttr("d",this.commands.value)}get commands(){return this._commands}set commands(t){if(!(t instanceof p))throw Error("Commands value has to be an CircleCommands instance.");this._commands=t,this._centre=t.centre,this._radius=t.radius,this.setAttr("d",this.commands.value)}}class q extends D{constructor(t,e,s){super("path",s),this.commands=new y(t,e),this._centre=t,this._radiuses=e}get centre(){return this._centre}set centre(t){this.commands.centre=t,this._centre=t,this.setAttr("d",this.commands.value)}get radiuses(){return this._radiuses}set radiuses(t){this.commands.radiuses=t,this._radiuses=t,this.setAttr("d",this.commands.value)}get commands(){return this._commands}set commands(t){if(!(t instanceof y))throw Error("Commands value has to be an EllipseCommands instance.");this._commands=t,this._centre=t.centre,this._radiuses=t.radiuses,this.setAttr("d",this.commands.value)}}class H extends j{constructor(t){super("g",t)}}class Q extends D{constructor(t,e){super("path",e),this.value=t}get value(){return this._value}set value(t){this.commands=new v(t),this._value=t,this.setAttr("d",this.commands.value)}get commands(){return this._commands}set commands(t){if(!(t instanceof v))throw Error("Commands value has to be an PathCommands instance.");this._commands=t,this._value=t.value,this.setAttr("d",this.commands.value)}}class J extends D{static COMMANDS_OPTIONS={};constructor(t,e){super("path",e),this.points=t}get points(){return this._points}set points(t){this.commands=new g(t,this.constructor.COMMANDS_OPTIONS),this._points=t,this.setAttr("d",this.commands.value)}get commands(){return this._commands}set commands(t){if(!(t instanceof g))throw Error("Commands value has to be an PointsCommands instance.");this._commands=t,this._points=t.items,this.setAttr("d",this.commands.value)}}class K extends J{static COMMANDS_OPTIONS={isClose:!0}}class X extends D{constructor(t,e,s){super("text",s),this.value=t,this.centre=e}get value(){return this._value}set value(t){this._value=t,this.element.textContent=t}get centre(){return this._centre}set centre(t){this._centre=f.getInstance(t),this.setAttr("x",this._centre.x),this.setAttr("y",this._centre.y)}}class Y extends O{constructor(){super(),this._items=new G(this)}get items(){return this._items}_createElement(){return u.createSvgElement("svg")}}const tt={layer:t=>new Y,animation:(t,e,s)=>new B(t,e,s),animate:(t,e)=>new Z(t,e),set:(t,e)=>new z(t,e),animateMotion:(t,e)=>new R(t,e),animateTransform:(t,e)=>new W(t,e),item:(t,e)=>new D(t,e),circle:(t,e,s)=>new U(t,e,s),ellipse:(t,e,s)=>new q(t,e,s),path:(t,e)=>new Q(t,e),polygon:(t,e)=>new K(t,e),polyline:(t,e)=>new J(t,e),text:(t,e,s)=>new X(t,e,s),group:t=>new H(t)};window.TDG=m})();