@armniko/canvas - npm Package Compare versions

Comparing version 1.2.0 to 2.0.0

dist/interfaces/crop-area.interface.d.ts

+import { Size } from './size.interface';
+import { Position } from './position.interface';
+export interface CropArea {
+    size?: Size;
+    position?: Position;
+}

dist/interfaces/extracted-value.interface.d.ts

+export interface ExtractedValue {
+    value: number;
+    unit: 'px' | '%';
+}

dist/interfaces/relative-props.interface.d.ts

+import { Position } from './position.interface';
+import { Scale } from './scale.interface';
+import { Rotation } from './rotation.interface';
+export interface RelativeProps {
+    position?: Position;
+    scale?: Scale;
+    opacity?: number;
+    rotations?: Rotation[];
+}

dist/interfaces/rotation.interface.d.ts

+import { Position } from './position.interface';
+export interface Rotation {
+    degrees: number;
+    pivot?: Position;
+}

dist/interfaces/scale.interface.d.ts

+export interface Scale {
+    x: number;
+    y: number;
+}

dist/interfaces/text-box.interface.d.ts

+import { Size } from './size.interface';
+import { Position } from './position.interface';
+import { TextLine } from './text-line.interface';
+export interface TextBox {
+    text: string;
+    lines: TextLine[];
+    size: Size;
+    position: Position;
+}

dist/interfaces/text-line.interface.d.ts

+import { Size } from './size.interface';
+import { Position } from './position.interface';
+export interface TextLine {
+    text: string;
+    size: Size;
+    position: Position;
+}

dist/index.d.ts

@@ -1,21 +0,31 @@
-export * from './libraries/canvas';
-export * from './libraries/colors/gradient-color';
-export * from './libraries/colors/solid-color';
-export * from './libraries/colors/linear-gradient';
-export * from './libraries/colors/radial-gradient';
-export * from './libraries/elements/element';
-export * from './libraries/elements/rectangle-element';
-export * from './libraries/elements/ellipse-element';
-export * from './libraries/elements/polygon-element';
-export * from './libraries/elements/line-element';
-export * from './libraries/elements/text-element';
-export * from './libraries/elements/image-element';
-export * from './libraries/shapes/shape';
-export * from './enums/font-weight';
-export * from './enums/horizontal-align';
-export * from './enums/image-fit';
-export * from './enums/line-cap';
-export * from './enums/position-point';
-export * from './enums/vertical-align';
-export * from './interfaces/position.interface';
-export * from './interfaces/size.interface';
+export { Canvas } from './libraries/canvas';
+export type { Color } from './libraries/colors/color';
+export type { Gradient } from './libraries/colors/gradient';
+export { GradientColor } from './libraries/colors/gradient-color';
+export { SolidColor } from './libraries/colors/solid-color';
+export { LinearGradient } from './libraries/colors/linear-gradient';
+export { RadialGradient } from './libraries/colors/radial-gradient';
+export type { Element } from './libraries/elements/element';
+export { RectangleElement } from './libraries/elements/rectangle-element';
+export { EllipseElement } from './libraries/elements/ellipse-element';
+export { PolygonElement } from './libraries/elements/polygon-element';
+export { LineElement } from './libraries/elements/line-element';
+export { TextElement } from './libraries/elements/text-element';
+export { ImageElement } from './libraries/elements/image-element';
+export { Shape } from './libraries/shapes/shape';
+export { ColorType } from './enums/color-type';
+export { FontWeight } from './enums/font-weight';
+export { HorizontalAlign } from './enums/horizontal-align';
+export { ImageFit } from './enums/image-fit';
+export { LineCap } from './enums/line-cap';
+export { PositionPoint } from './enums/position-point';
+export { VerticalAlign } from './enums/vertical-align';
+export type { Position } from './interfaces/position.interface';
+export type { Size } from './interfaces/size.interface';
+export type { Scale } from './interfaces/scale.interface';
+export type { Rotation } from './interfaces/rotation.interface';
+export type { CropArea } from './interfaces/crop-area.interface';
+export type { TextBox } from './interfaces/text-box.interface';
+export type { TextLine } from './interfaces/text-line.interface';
+export type { RelativeProps } from './interfaces/relative-props.interface';
+export type { ResolvableAttribute, ImageSource } from './types';

dist/index.esm.js

@@ -1,1 +0,1 @@
-var t={d:(i,e)=>{for(var s in e)t.o(e,s)&&!t.o(i,s)&&Object.defineProperty(i,s,{enumerable:!0,get:e[s]})},o:(t,i)=>Object.prototype.hasOwnProperty.call(t,i)},i={};t.d(i,{Hl:()=>z,Hg:()=>k,JH:()=>L,IT:()=>D,An:()=>P,wq:()=>c,C$:()=>F,N_:()=>g,$3:()=>W,No:()=>M,W4:()=>R,X4:()=>B,Se:()=>s,Ey:()=>C,e9:()=>v,yp:()=>w,DE:()=>S,SP:()=>E,G4:()=>p});let e=function(t){return t.Rectangle="rectangle",t.Ellipse="ellipse",t.Polygon="polygon",t.Line="line",t.Text="text",t.Image="image",t}({}),s=function(t){return t.LeftTop="left-top",t.RightTop="right-top",t.LeftBottom="left-bottom",t.RightBottom="right-bottom",t.Center="center",t}({});class h{static valueInRange(t,i){return t<i.min&&(t=i.min),t>i.max&&(t=i.max),t}static valueNotGreaterThan(t,i){return t>i&&(t=i),t}static valueNotLessThan(t,i){return t<i&&(t=i),t}static degreesToRadians(t){return t/180*Math.PI}static distance(t,i){return Math.sqrt(Math.pow(Math.abs(i.x-t.x),2)+Math.pow(Math.abs(i.y-t.y),2))}static positionBetweenPoints(t,i,e){const s=e/h.distance(t,i);return{x:t.x+s*(i.x-t.x),y:t.y+s*(i.y-t.y)}}static shapeSize(t){const i=Math.min(...t.map((t=>t.x))),e=Math.min(...t.map((t=>t.y))),s=Math.max(...t.map((t=>t.x))),h=Math.max(...t.map((t=>t.y)));return{width:Math.floor(s-i),height:Math.floor(h-e)}}static positionLeftTop(t,i,e){const h={x:t.x,y:t.y};switch(i){case s.RightTop:h.x-=e.width;break;case s.RightBottom:h.x-=e.width,h.y-=e.height;break;case s.LeftBottom:h.y-=e.height;break;case s.Center:h.x-=e.width/2,h.y-=e.height/2}return h}static positionCenter(t,i,e){const s=h.positionLeftTop(t,i,e);return s.x+=e.width/2,s.y+=e.height/2,s}static resizedSize(t,i,e){const s={width:i.width,height:i.height};if(e){const e=[{width:t.width*(i.height/t.height),height:i.height},{width:i.width,height:t.height*(i.width/t.width)}].find((t=>t.width<=i.width&&t.height<=i.height));e&&(s.width=e.width,s.height=e.height)}return s}}class o{defaultBorderColor="#000000";constructor(t,i){this.ctx=t,this.element=i}startDrawing(){this.ctx.save();const t=this.element.opacity(),i=this.element.degrees(),e=this.element.shadow();if(t<1&&(this.ctx.globalAlpha=t),0!==i){const t=this.position(),e=this.anchor();e.x+=t.x,e.y+=t.y,this.ctx.translate(e.x,e.y),this.ctx.rotate(h.degreesToRadians(i)),this.ctx.translate(-e.x,-e.y)}e&&e.blur>0&&(this.ctx.shadowColor=e.color,this.ctx.shadowBlur=e.blur,this.ctx.shadowOffsetX=e.x,this.ctx.shadowOffsetY=e.y)}endDrawing(){this.ctx.restore()}}class n{constructor(t,i){this.ctx=t,this.shape=i}draw(){this.prepare(),this.ctx.save(),this.rotateContext(),this.shape.isCloseShape()?this.makeClosedShape():this.makeOpenedShape(),this.ctx.restore()}prepare(){this._originalSize=h.shapeSize(this.shape.points()),this._sizeRatio=this.sizeRatio(),this._shapePosition=this.shapePosition()}rotateContext(){const t=this.shape.degrees();if(0!==t){const i=this.shapePosition(),e=this.anchor();e.x+=i.x,e.y+=i.y,this.ctx.translate(e.x,e.y),this.ctx.rotate(h.degreesToRadians(t)),this.ctx.translate(-e.x,-e.y)}}makeClosedShape(){const t=this.shape.points();t.length>2&&t.forEach(((i,e)=>{const s=0===e,o=e===t.length-1,n=t[e+1]||t[0],r=h.distance(i,n),a=this.radius(r),l=h.positionBetweenPoints(i,n,a),d=h.positionBetweenPoints(i,n,r-a);if(s&&this.moveToPoint(l),this.lineToPoint(d),a>0){const i=t[e+2]||(o?t[1]:t[0]);this.quadraticCurveToPoint(n,i)}}))}makeOpenedShape(){const t=this.shape.points();t.length>1&&t.forEach(((i,e)=>{const s=0===e,o=e===t.length-1,n=e===t.length-2;if(!o){const o=t[e+1],r=o?h.distance(i,o):0,a=this.radius(r),l=s?i:h.positionBetweenPoints(i,o,a),d=n?o:h.positionBetweenPoints(i,o,r-a);s&&this.moveToPoint(l),this.lineToPoint(d),!n&&a>0&&this.quadraticCurveToPoint(o,t[e+2])}}))}radius(t){const i=Math.min(this._sizeRatio.width,this._sizeRatio.height),e=Math.floor(this.shape.jointsRadius()/i),s=Math.floor(.55*t);return e>s?s:e}moveToPoint(t){this.ctx.moveTo(this._shapePosition.x+t.x*this._sizeRatio.width,this._shapePosition.y+t.y*this._sizeRatio.height)}lineToPoint(t){this.ctx.lineTo(this._shapePosition.x+t.x*this._sizeRatio.width,this._shapePosition.y+t.y*this._sizeRatio.height)}quadraticCurveToPoint(t,i){const e=h.distance(t,i),s=this.radius(e),o=h.positionBetweenPoints(t,i,s);this.ctx.quadraticCurveTo(this._shapePosition.x+t.x*this._sizeRatio.width,this._shapePosition.y+t.y*this._sizeRatio.height,this._shapePosition.x+o.x*this._sizeRatio.width,this._shapePosition.y+o.y*this._sizeRatio.height)}shapePosition(){return h.positionLeftTop(this.shape.position(),this.shape.positionPoint(),this.shapeSize())}shapeSize(){return this.shape.size()||this._originalSize}sizeRatio(){const t=this.shapeSize();return{width:t.width/h.valueNotLessThan(this._originalSize.width,1),height:t.height/h.valueNotLessThan(this._originalSize.height,1)}}anchor(){const t=this.shapeSize();return this.shape.anchor()||{x:t.width/2,y:t.height/2}}}let r=function(t){return t.SolidColor="solid-color",t.LinearGradient="linear-gradient",t.RadialGradient="radial-gradient",t}({});class a{constructor(t,i,e){this.ctx=t,this.elementPosition=i,this.elementSize=e}mixed(t){let i="";if("string"==typeof t)i=t;else switch(t.type()){case r.SolidColor:i=t.color();break;case r.LinearGradient:i=this.linearGradient(t);break;case r.RadialGradient:i=this.radialGradient(t)}return i}linearGradient(t){const i=h.degreesToRadians(t.degrees()),e={x:this.elementPosition.x,y:this.elementPosition.y},s={x:e.x+Math.cos(i)*this.elementSize.width,y:e.y+Math.sin(i)*this.elementSize.height},o=this.ctx.createLinearGradient(e.x,e.y,s.x,s.y);return this.appendGradientColors(o,t.colors()),o}radialGradient(t){const i=t.position()||{x:this.elementSize.width/2,y:this.elementSize.height/2},e=this.ctx.createRadialGradient(this.elementPosition.x+i.x,this.elementPosition.y+i.y,0,this.elementPosition.x+i.x,this.elementPosition.y+i.y,.8*Math.max(this.elementSize.width,this.elementSize.height));return this.appendGradientColors(e,t.colors()),e}appendGradientColors(t,i){i.forEach((i=>t.addColorStop(i.offset(),i.color())))}}class l extends o{draw(){this.startDrawing(),this.makeShape(),this.drawFill(),this.drawBorder(),this.endDrawing()}makeShape(){const t=this.element.borderWidth(),i=this.position(),e=this.element.size(),s=this.element.cutOutShapes(),h={x:i.x+t/2,y:i.y+t/2},o={width:e.width-t,height:e.height-t};this.ctx.beginPath(),s.length>0&&(this.ctx.translate(h.x,h.y),s.forEach((t=>{new n(this.ctx,t).draw()})),this.ctx.translate(-h.x,-h.y),h.x+=o.width,o.width*=-1),this.ctx.rect(h.x,h.y,o.width,o.height),this.ctx.closePath()}drawFill(){const t=this.element.fillColor();t&&(this.ctx.fillStyle=new a(this.ctx,this.position(),this.element.size()).mixed(t),this.ctx.fill())}drawBorder(){const t=this.element.borderWidth();t>0&&(this.ctx.strokeStyle=new a(this.ctx,this.position(),this.element.size()).mixed(this.element.borderColor()||this.defaultBorderColor),this.ctx.lineWidth=t,this.ctx.stroke())}position(){return h.positionLeftTop(this.element.position(),this.element.positionPoint(),this.element.size())}anchor(){const t=this.element.size();return this.element.anchor()||{x:t.width/2,y:t.height/2}}}class d extends o{draw(){this.startDrawing(),this.drawFill(),this.drawBorder(),this.endDrawing()}drawFill(){const t=this.element.fillColor();if(t){const i=this.element.borderWidth(),e=this.position(),s=this.element.size();this.ctx.beginPath(),this.ctx.ellipse(e.x,e.y,h.valueNotLessThan(s.width/2-i,1),h.valueNotLessThan(s.height/2-i,1),0,0,2*Math.PI),this.ctx.closePath(),this.ctx.fillStyle=new a(this.ctx,h.positionLeftTop(this.element.position(),this.element.positionPoint(),this.element.size()),this.element.size()).mixed(t),this.ctx.fill()}}drawBorder(){const t=this.element.borderWidth();if(t>0){const i=this.position(),e=this.element.size();this.ctx.beginPath(),this.ctx.ellipse(i.x,i.y,h.valueNotLessThan(e.width/2-t/2,1),h.valueNotLessThan(e.height/2-t/2,1),0,0,2*Math.PI),this.ctx.closePath(),this.ctx.strokeStyle=new a(this.ctx,h.positionLeftTop(this.element.position(),this.element.positionPoint(),this.element.size()),this.element.size()).mixed(this.element.borderColor()||this.defaultBorderColor),this.ctx.lineWidth=t,this.ctx.stroke()}}position(){return h.positionCenter(this.element.position(),this.element.positionPoint(),this.element.size())}anchor(){return this.element.anchor()||{x:0,y:0}}}let c=function(t){return t.Left="left",t.Center="center",t.Right="right",t}({}),p=function(t){return t.Top="top",t.Center="center",t.Bottom="bottom",t}({});class x{constructor(t){this.element=t,this.canvas=document.createElement("canvas");const i=this.canvas.getContext("2d");this.ctx=i}textBox(){const t={text:this.element.text(),lines:[],size:{width:1,height:1},position:{x:0,y:0}};return t.lines=this.textLines(),t.size=this.textBoxSize(t.lines),t.position=this.textBoxPosition(t.lines),t}textLines(){const t=this.element.bounds()||{width:99999,height:99999},i=this.element.horizontalAlign(),e=this.element.verticalAlign(),s=this.element.padding(),h=this.splitText(),o=h.length*this.element.lineHeight();return h.map(((h,n)=>{const r={width:this.textWidth(h),height:this.element.lineHeight()},a={x:0,y:Math.round(r.height*n)};return i===c.Left&&(a.x+=s.left),i===c.Center&&(a.x+=Math.round((t.width-r.width)/2)),i===c.Right&&(a.x+=t.width-r.width-s.right),e===p.Top&&(a.y+=s.top),e===p.Center&&(a.y+=Math.round((t.height-o)/2)),e===p.Bottom&&(a.y+=t.height-r.height-s.bottom),{text:h,size:r,position:a}}))}textBoxSize(t){const i=this.element.padding(),e=this.element.bounds()||{width:1,height:1},s=Math.max(...t.map((t=>t.size.width)));return{width:Math.max(s+i.left+i.right,e.width),height:Math.max(this.element.lineHeight()*t.length+i.top+i.bottom,e.height)}}textBoxPosition(t){const i=this.element.padding(),e=Math.min(...t.map((t=>t.position.x))),s=Math.min(...t.map((t=>t.position.y)));return{x:e-i.left,y:s-i.top}}splitText(){const t=this.element.text().replaceAll("<BR>","<br>").split("<br>"),i=this.element.padding(),e=(this.element.bounds()||{width:99999,height:99999}).width-(i.left+i.right);let s=[];return t.forEach((t=>{t=t.trim();const i=this.textWidth(t);if(i>e){const h=Math.floor(e/(i/t.length))-3,o=t.split(" ");let n="";o.forEach(((t,i)=>{n.length+t.length>h&&(s.push(n.trim()),n=""),n+=t+" ",i===o.length-1&&s.push(n.trim())})),s=s.map((t=>t.trim()))}else s.push(t)})),s}textWidth(t){return this.ctx.font=this.element.font(),Math.ceil(this.ctx.measureText(t).width+this.element.strokeWidth())}}class u extends o{draw(){this.prepare(),this.startDrawing(),this.drawStroke(),this.drawFill(),this.endDrawing()}prepare(){this.ctx.font=this.element.font(),this.ctx.textBaseline="alphabetic",this.textBox=new x(this.element).textBox()}drawFill(){const t=this.element.fillColor();if(t){const i=this.position();this.ctx.fillStyle=new a(this.ctx,this.position(),this.textBox.size).mixed(t),this.textBox.lines.forEach((t=>{this.ctx.fillText(t.text,i.x+t.position.x,Math.round(i.y+t.position.y+.75*t.size.height))}))}}drawStroke(){const t=this.element.strokeWidth();if(t>0){const i=this.position(),e=this.element.fillColor();this.ctx.strokeStyle=new a(this.ctx,this.position(),this.textBox.size).mixed(this.element.strokeColor()||this.defaultBorderColor),this.ctx.lineWidth=e?2*t:t,this.textBox.lines.forEach((t=>{this.ctx.strokeText(t.text,i.x+t.position.x,Math.round(i.y+t.position.y+.75*t.size.height))}))}}position(){return h.positionLeftTop(this.element.position(),this.element.positionPoint(),this.textBox.size)}anchor(){return this.element.anchor()||{x:this.textBox.size.width/2,y:this.textBox.size.height/2}}}let g=function(t){return t.Fill="fill",t.Cover="cover",t}({});class m extends o{draw(){this.startDrawing(),this.drawBorder(),this.drawImage(),this.endDrawing()}drawImage(){const t=this.element.image();if(t){const i=this.sourceDimensions(),e=this.flippedDimensions(this.elementDimensions());this.ctx.drawImage(t,i.position.x,i.position.y,i.size.width,i.size.height,e.position.x,e.position.y,e.size.width,e.size.height)}}drawBorder(){const t=this.element.borderWidth(),i=new a(this.ctx,this.position(),this.element.size()).mixed(this.element.borderColor()||this.defaultBorderColor),e=this.elementDimensions();this.ctx.strokeStyle=i,this.ctx.lineWidth=2*t,this.isRadiusSet()?(this.makeShape(e),this.ctx.lineJoin="round",this.ctx.fillStyle="#ffffff",this.ctx.fill(),t>0&&(this.ctx.strokeStyle=i,this.ctx.lineWidth=2*t,this.ctx.stroke()),this.ctx.clip()):t>0&&(this.ctx.strokeStyle=i,this.ctx.lineWidth=2*t,this.ctx.strokeRect(e.position.x,e.position.y,e.size.width,e.size.height))}sourceDimensions(){const t=this.element.image(),i=this.element.fit(),e={position:{x:0,y:0},size:{width:t.width,height:t.height}};if(i===g.Cover){const{size:i}=this.elementDimensions();i.width/i.height<e.size.width/e.size.height?(e.size.width=e.size.height/(i.height/i.width),e.position.x=(t.width-e.size.width)/2):(e.size.height=e.size.width/(i.width/i.height),e.position.y=(t.height-e.size.height)/2)}return e}elementDimensions(){const t=this.element.borderWidth(),i=this.position(),e=this.element.size();return{position:{x:i.x+t,y:i.y+t},size:{width:e.width-2*t,height:e.height-2*t}}}flippedDimensions(t){const i=this.element.flipX(),e=this.element.flipY();if(i||e){let s=1,h=1;i&&(s=-1,t.position.x=-(+t.position.x+t.size.width)),e&&(h=-1,t.position.y=-(+t.position.y+t.size.height)),this.ctx.scale(s,h)}return t}makeShape(t){const i=this.borderRadius();this.ctx.lineJoin="round",this.ctx.beginPath(),this.ctx.moveTo(t.position.x+i.topLeft,t.position.y),this.ctx.lineTo(t.position.x+t.size.width-i.topRight,t.position.y),this.ctx.quadraticCurveTo(t.position.x+t.size.width,t.position.y,t.position.x+t.size.width,t.position.y+i.topRight),this.ctx.lineTo(t.position.x+t.size.width,t.position.y+t.size.height-i.bottomRight),this.ctx.quadraticCurveTo(t.position.x+t.size.width,t.position.y+t.size.height,t.position.x+t.size.width-i.bottomRight,t.position.y+t.size.height),this.ctx.lineTo(t.position.x+i.bottomLeft,t.position.y+t.size.height),this.ctx.quadraticCurveTo(t.position.x,t.position.y+t.size.height,t.position.x,t.position.y+t.size.height-i.bottomLeft),this.ctx.lineTo(t.position.x,t.position.y+i.topLeft),this.ctx.quadraticCurveTo(t.position.x,t.position.y,t.position.x+i.topLeft,t.position.y),this.ctx.closePath()}borderRadius(){const t=this.element.borderRadius();if(this.isRadiusSet()){const{size:i}=this.elementDimensions();Object.keys(t).forEach((e=>{t[e]>i.width/2&&(t[e]=Math.floor(i.width/2)),t[e]>i.height/2&&(t[e]=Math.floor(i.height/2))}))}return t}isRadiusSet(){const t=this.element.borderRadius();return t.topLeft>0||t.topRight>0||t.bottomLeft>0||t.bottomRight>0}position(){return h.positionLeftTop(this.element.position(),this.element.positionPoint(),this.element.size())}anchor(){const t=this.element.size();return this.element.anchor()||{x:t.width/2,y:t.height/2}}}class w{_points=[];_position={x:0,y:0};_positionPoint=s.LeftTop;_jointsRadius=0;_degrees=0;constructor(t,i=!0){this._points=t,this._isCloseShape=i}points(){return this._points}isCloseShape(){return this._isCloseShape}position(){return this._position}positionPoint(){return this._positionPoint}size(){return this._size}jointsRadius(){return this._jointsRadius}degrees(){return this._degrees}anchor(){return this._anchor}setPosition(t,i){return this._position=t,i&&(this._positionPoint=i),this}setSize(t){return this._size=t,this}setJointsRadius(t){return this._jointsRadius=t,this}setDegrees(t,i){return this._degrees=t,this._anchor=i,this}}class _ extends o{draw(){this.startDrawing(),this.makeShape(),this.drawBorder(),this.drawFill(),this.endDrawing()}makeShape(){const t=this.element.shapePoints();if(t.length>2){const i=new w(t).setSize(this.shapeSize()).setPosition(this.shapePosition()).setJointsRadius(this.element.borderRadius());this.ctx.beginPath(),new n(this.ctx,i).draw(),this.ctx.closePath()}}drawFill(){const t=this.element.fillColor();t&&(this.ctx.fillStyle=new a(this.ctx,this.position(),this.shapeSize()).mixed(t),this.ctx.fill())}drawBorder(){const t=this.element.borderWidth();if(t>0){const i=new a(this.ctx,this.position(),this.element.size()).mixed(this.element.borderColor()||this.defaultBorderColor),e=this.element.fillColor();this.element.borderRadius()>0&&(this.ctx.lineJoin="round"),this.ctx.strokeStyle=i,this.ctx.lineWidth=e?2*t:t,this.ctx.stroke()}}shapePosition(){const t=this.position(),i=this.element.borderWidth();return{x:t.x+i,y:t.y+i}}shapeSize(){const t=this.element.size(),i=this.element.borderWidth();return{width:t.width-2*i,height:t.height-2*i}}position(){return h.positionLeftTop(this.element.position(),this.element.positionPoint(),this.element.size())}anchor(){const t=this.element.size();return this.element.anchor()||{x:t.width/2,y:t.height/2}}}class f extends o{draw(){this.startDrawing(),this.makeShape(),this.drawStroke(),this.endDrawing()}makeShape(){this.ctx.beginPath();const t=new w(this.element.shapePoints(),!1).setSize(this.shapeSize()).setPosition(this.shapePosition()).setJointsRadius(this.element.jointsRadius());new n(this.ctx,t).draw()}drawStroke(){const t=new a(this.ctx,this.position(),this.size()).mixed(this.element.color()||this.defaultBorderColor);this.ctx.lineCap=this.element.lineCap(),this.ctx.strokeStyle=t,this.ctx.lineWidth=this.thickness(),this.ctx.stroke()}thickness(){const t=this.element.size();let i=this.element.thickness();if(t){const e=h.shapeSize(this.element.shapePoints()),s=h.resizedSize(e,t,this.element.keepRatio()),o=s.width/h.valueNotLessThan(e.width,1),n=s.height/h.valueNotLessThan(e.height,1);i=h.valueNotLessThan(i*Math.min(o,n),1)}return i}shapeSize(){const t=this.size(),i=this.thickness();return{width:t.width-i,height:t.height-i/2}}shapePosition(){const t=this.position(),i=this.thickness();return{x:t.x+i/2,y:t.y}}size(){let t=this.element.size();const i=this.thickness(),e=h.shapeSize(this.element.shapePoints());if(t){const s=h.resizedSize(e,t,this.element.keepRatio());t={width:s.width,height:s.height+i/2}}else t={width:e.width,height:h.valueNotLessThan(e.height+i/2,0)};return t}position(){return h.positionLeftTop(this.element.position(),this.element.positionPoint(),this.size())}anchor(){const t=this.shapeSize();return this.element.anchor()||{x:t.width/2,y:t.height/2}}}class z{constructor(t){this._canvas=t||document.createElement("canvas"),this._ctx=this._canvas.getContext("2d")}nativeElement(){return this._canvas}size(){return{width:this._canvas.width,height:this._canvas.height}}setSize(t){this._canvas.width=t.width,this._canvas.height=t.height}draw(t){switch(t.type()){case e.Rectangle:new l(this._ctx,t).draw();break;case e.Ellipse:new d(this._ctx,t).draw();break;case e.Polygon:new _(this._ctx,t).draw();break;case e.Line:new f(this._ctx,t).draw();break;case e.Text:new u(this._ctx,t).draw();break;case e.Image:new m(this._ctx,t).draw();break;default:throw new Error("Unknown element "+t.type())}}clear(){this._ctx.clearRect(0,0,this._canvas.width,this._canvas.height)}}class y{}class S extends y{constructor(t,i=1){super(),this._color=t+this.alphaToHex(i)}type(){return r.SolidColor}color(){return this._color}alphaToHex(t){let i=Math.round(255*t).toString(16);return 1===i.length&&(i="0"+i),i}}class P extends S{constructor(t,i,e=1){super(i,e),this._offset=h.valueInRange(t,{min:0,max:1})}offset(){return this._offset}}class b extends y{constructor(t){super(),this._colors=t}colors(){return this._colors}}class R extends b{_degrees=0;type(){return r.LinearGradient}degrees(){return this._degrees}setDegrees(t){return this._degrees=t,this}}class C extends b{type(){return r.RadialGradient}position(){return this._position}setPosition(t){return this._position=t,this}}class k{_position={x:0,y:0};_positionPoint=s.LeftTop;_opacity=1;_degrees=0;position(){return this._position}positionPoint(){return this._positionPoint}opacity(){return this._opacity}degrees(){return this._degrees}anchor(){return this._anchor}shadow(){return this._shadow}setPosition(t,i){return this._position=t,i&&(this._positionPoint=i),this}setOpacity(t){return this._opacity=t,this}setDegrees(t,i){return this._degrees=t,this._anchor=i,this}setShadow(t,i,e=0,s=0){return this._shadow={color:t,blur:i,x:e,y:s},this}}class T extends k{_size={width:1,height:1};_borderWidth=0;size(){return this._size}borderColor(){return this._borderColor}borderWidth(){return this._borderWidth}setSize(t){return this._size=t,this}setBorder(t,i){return this._borderWidth=t,this._borderColor=i,this}}class v extends T{_cutOutShapes=[];type(){return e.Rectangle}fillColor(){return this._fillColor}cutOutShapes(){return this._cutOutShapes}setFillColor(t){return this._fillColor=t,this}setCutOutShapes(t){return this._cutOutShapes=t,this}}class L extends T{type(){return e.Ellipse}fillColor(){return this._fillColor}setFillColor(t){return this._fillColor=t,this}}class B extends T{_shapePoints=[];_borderRadius=0;type(){return e.Polygon}shapePoints(){return this._shapePoints}borderRadius(){return this._borderRadius}fillColor(){return this._fillColor}setShapePoints(t){return this._shapePoints=t,this}setBorderRadius(t){return this._borderRadius=t,this}setFillColor(t){return this._fillColor=t,this}}let W=function(t){return t.Round="round",t.Square="square",t}({});class M extends k{_shapePoints=[];_keepRatio=!1;_thickness=1;_jointsRadius=0;_lineCap=W.Square;type(){return e.Line}shapePoints(){return this._shapePoints}size(){return this._size}keepRatio(){return this._keepRatio}thickness(){return this._thickness}jointsRadius(){return this._jointsRadius}lineCap(){return this._lineCap}color(){return this._color}setShapePoints(t){return this._shapePoints=t,this}setSize(t,i){return this._size=t,i&&(this._keepRatio=i),this}setThickness(t){return this._thickness=t,this}setJointsRadius(t){return this._jointsRadius=t,this}setLineCap(t){return this._lineCap=t,this}setColor(t){return this._color=t,this}}let D=function(t){return t.Normal="normal",t.Bold="bold",t}({});class E extends k{_text="";_fontSize=12;_fontFamily="Tahoma";_fontWeight=D.Normal;_strokeWidth=0;_horizontalAlign=c.Left;_verticalAlign=p.Top;_padding={left:0,right:0,top:0,bottom:0};type(){return e.Text}text(){return this._text}bounds(){return this._bounds}fontSize(){return this._fontSize}fontFamily(){return this._fontFamily}fontWeight(){return this._fontWeight}lineHeight(){return this._lineHeight||Math.round(1.2*this.fontSize())}fillColor(){return this._fillColor}strokeColor(){return this._strokeColor}strokeWidth(){return this._strokeWidth}horizontalAlign(){return this._horizontalAlign}verticalAlign(){return this._verticalAlign}padding(){return this._padding}font(){const t=[this.fontSize()+"px",this.fontFamily()],i=this.fontWeight();return i&&t.unshift(i),t.join(" ")}setText(t){return this._text=t,this}setBounds(t){return this._bounds=t,this}setFontSize(t){return this._fontSize=t,this}setFontFamily(t){return this._fontFamily=t,this}setFontWeight(t){return this._fontWeight=t,this}setLineHeight(t){return this._lineHeight=t,this}setFillColor(t){return this._fillColor=t,this}setStroke(t,i){return this._strokeWidth=t,this._strokeColor=i,this}setHorizontalAlign(t){return this._horizontalAlign=t,this}setVerticalAlign(t){return this._verticalAlign=t,this}setPadding(t,i,e,s){const h=t;return void 0===i?(this._padding.top=h,this._padding.right=h,this._padding.bottom=h,this._padding.left=h):void 0===e&&void 0===s?(this._padding.top=t,this._padding.right=i,this._padding.bottom=t,this._padding.left=i):(this._padding.top=t,this._padding.right=i,this._padding.bottom=e||0,this._padding.left=s||0),this}}class F extends T{_fit=g.Fill;_borderRadius={topLeft:0,topRight:0,bottomLeft:0,bottomRight:0};_flipX=!1;_flipY=!1;type(){return e.Image}image(){return this._image}fit(){return this._fit}borderRadius(){return this._borderRadius}flipX(){return this._flipX}flipY(){return this._flipY}setImage(t){return this._image=t,this}setFit(t){return this._fit=t,this}setBorderRadius(t,i,e,s){const h=t;return void 0===i&&void 0===e&&void 0===s?(this._borderRadius.topLeft=h,this._borderRadius.topRight=h,this._borderRadius.bottomRight=h,this._borderRadius.bottomLeft=h):(this._borderRadius.topLeft=t,this._borderRadius.topRight=i||0,this._borderRadius.bottomRight=e||0,this._borderRadius.bottomLeft=s||0),this}setFlip(t){return this._flipX=!!t.horizontal,this._flipY=!!t.vertical,this}}var G=i.Hl,A=i.Hg,N=i.JH,H=i.IT,I=i.An,O=i.wq,j=i.C$,q=i.N_,J=i.$3,X=i.No,Y=i.W4,$=i.X4,V=i.Se,U=i.Ey,K=i.e9,Q=i.yp,Z=i.DE,tt=i.SP,it=i.G4;export{G as Canvas,A as Element,N as EllipseElement,H as FontWeight,I as GradientColor,O as HorizontalAlign,j as ImageElement,q as ImageFit,J as LineCap,X as LineElement,Y as LinearGradient,$ as PolygonElement,V as PositionPoint,U as RadialGradient,K as RectangleElement,Q as Shape,Z as SolidColor,tt as TextElement,it as VerticalAlign};
+var t=/* @__PURE__ */function(t){return t.Rectangle="rectangle",t.Ellipse="ellipse",t.Polygon="polygon",t.Line="line",t.Text="text",t.Image="image",t}({}),i=/* @__PURE__ */function(t){return t.LeftTop="left-top",t.RightTop="right-top",t.LeftBottom="left-bottom",t.RightBottom="right-bottom",t.Center="center",t}({}),e=class t{static valueInRange(t,i){return t<i.min&&(t=i.min),t>i.max&&(t=i.max),t}static valueNotGreaterThan(t,i){return t>i&&(t=i),t}static valueNotLessThan(t,i){return t<i&&(t=i),t}static relativePositionValue(i,e,s){const o=t.extractedValue(i);let h;if("%"===o.unit)h=(s-e)/100*o.value;else h=Number(i);return h}static extractedValue(t){let i;if("string"==typeof t){const e=t.match(/^(\d+)(\D+)$/)??[];i=e.length>2?{value:parseFloat(e[1]??"0"),unit:e[2]??"px"}:{value:Number(t),unit:"px"}}else i={value:t,unit:"px"};return i}static degreesToRadians(t){return t/180*Math.PI}static distance(t,i){return Math.sqrt(Math.pow(Math.abs(i.x-t.x),2)+Math.pow(Math.abs(i.y-t.y),2))}static positionBetweenPoints(i,e,s){const o=s/t.distance(i,e);return{x:i.x+o*(e.x-i.x),y:i.y+o*(e.y-i.y)}}static shapeSize(t){const i=Math.min(...t.map(t=>t.x)),e=Math.min(...t.map(t=>t.y)),s=Math.max(...t.map(t=>t.x)),o=Math.max(...t.map(t=>t.y));return{width:Math.floor(s-i),height:Math.floor(o-e)}}static positionLeftTop(t,e,s){const o={x:t.x,y:t.y};switch(e){case i.RightTop:o.x-=s.width;break;case i.RightBottom:o.x-=s.width,o.y-=s.height;break;case i.LeftBottom:o.y-=s.height;break;case i.Center:o.x-=s.width/2,o.y-=s.height/2}return o}static positionCenter(i,e,s){const o=t.positionLeftTop(i,e,s);return o.x+=s.width/2,o.y+=s.height/2,o}static resizedSize(t,i,e){const s={width:i.width,height:i.height};if(e){const e=[{width:t.width*(i.height/t.height),height:i.height},{width:i.width,height:t.height*(i.width/t.width)}].find(t=>t.width<=i.width&&t.height<=i.height);e&&(s.width=e.width,s.height=e.height)}return s}static resolvedValue(t){let i;return i=t&&"function"==typeof t?t():t,i}static isObject(t){return"object"==typeof t&&t.constructor===Object&&!Array.isArray(t)}static hasMethod(t,i){return!!t[i]&&"function"==typeof t[i]}static hash(i){return i.map(i=>{let e;return e=null==i?"undefined":t.isObject(i)?JSON.stringify(i):Array.isArray(i)?"["+t.hash(i)+"]":t.hasMethod(i,"hash")?i.hash():i.toString(),e}).join("|")}},s=class{ctx;element;relativeProps;defaultBorderColor="#000000";constructor(t,i,e){this.ctx=t,this.element=i,this.relativeProps=e??{}}relativePosition(){return this.relativeProps.position??{x:0,y:0}}relativeScale(){return this.relativeProps.scale??{x:1,y:1}}rotations(){return[...this.relativeProps.rotations??[],...this.element.rotations()]}relativeOpacity(){return this.relativeProps.opacity??1}scale(){const t=this.element.scale(),i=this.relativeScale();return{x:t.x*i.x,y:t.y*i.y}}degrees(){return this.element.degrees()??0}anchor(){return this.element.anchor()??this.defaultAnchor()}opacity(){return this.element.opacity()*this.relativeOpacity()}startDrawing(){this.ctx.save();const t=this.scale(),i=this.opacity(),e=this.degrees(),s=this.rotations(),o=this.element.shadow();1===t.x&&1===t.y||this.ctx.scale(t.x,t.y),i<1&&(this.ctx.globalAlpha=i),0!==e&&this.rotate({degrees:e,pivot:this.anchor()}),s.length>0&&s.forEach(t=>{0!==t.degrees&&this.rotate(t)}),o&&o.blur>0&&(this.ctx.shadowColor=o.color,this.ctx.shadowBlur=o.blur,this.ctx.shadowOffsetX=o.x,this.ctx.shadowOffsetY=o.y)}endDrawing(){this.ctx.restore()}rotate(t){const i=this.position(),s=t.pivot??this.defaultAnchor(),o={x:s.x+i.x,y:s.y+i.y};this.ctx.translate(o.x,o.y),this.ctx.rotate(e.degreesToRadians(t.degrees)),this.ctx.translate(-o.x,-o.y)}},o=class{_originalSize;_sizeRatio;_shapePosition;constructor(t,i){this.ctx=t,this.shape=i}draw(){this.prepare(),this.ctx.save(),this.rotateContext(),this.shape.isCloseShape()?this.makeClosedShape():this.makeOpenedShape(),this.ctx.restore()}prepare(){this._originalSize=e.shapeSize(this.shape.points()),this._sizeRatio=this.sizeRatio(),this._shapePosition=this.shapePosition()}rotateContext(){const t=this.shape.degrees();0!==t&&this.rotate({degrees:t}),this.shape.rotations().forEach(t=>{this.rotate(t)})}makeClosedShape(){const t=this.shape.points();t.length>2&&t.forEach((i,s)=>{const o=0===s,h=s===t.length-1,n=t[s+1]??t[0],r=e.distance(i,n),a=this.radius(r),l=e.positionBetweenPoints(i,n,a),d=e.positionBetweenPoints(i,n,r-a);if(o&&this.moveToPoint(l),this.lineToPoint(d),a>0){const i=t[s+2]??(h?t[1]:t[0]);this.quadraticCurveToPoint(n,i)}})}makeOpenedShape(){const t=this.shape.points();t.length>1&&t.forEach((i,s)=>{const o=0===s,h=s===t.length-1,n=s===t.length-2;if(!h){const h=t[s+1],r=h?e.distance(i,h):0,a=this.radius(r),l=o?i:e.positionBetweenPoints(i,h,a),d=n?h:e.positionBetweenPoints(i,h,r-a);o&&this.moveToPoint(l),this.lineToPoint(d),!n&&a>0&&this.quadraticCurveToPoint(h,t[s+2])}})}radius(t){const i=Math.min(this._sizeRatio.width,this._sizeRatio.height),e=Math.floor(this.shape.jointsRadius()/i),s=Math.floor(.55*t);return e>s?s:e}moveToPoint(t){this.ctx.moveTo(this._shapePosition.x+t.x*this._sizeRatio.width,this._shapePosition.y+t.y*this._sizeRatio.height)}lineToPoint(t){this.ctx.lineTo(this._shapePosition.x+t.x*this._sizeRatio.width,this._shapePosition.y+t.y*this._sizeRatio.height)}quadraticCurveToPoint(t,i){const s=e.distance(t,i),o=this.radius(s),h=e.positionBetweenPoints(t,i,o);this.ctx.quadraticCurveTo(this._shapePosition.x+t.x*this._sizeRatio.width,this._shapePosition.y+t.y*this._sizeRatio.height,this._shapePosition.x+h.x*this._sizeRatio.width,this._shapePosition.y+h.y*this._sizeRatio.height)}shapePosition(){return e.positionLeftTop(this.shape.position(),this.shape.positionPoint(),this.shapeSize())}shapeSize(){return this.shape.size()??this._originalSize}sizeRatio(){const t=this.shapeSize();return{width:t.width/e.valueNotLessThan(this._originalSize.width,1),height:t.height/e.valueNotLessThan(this._originalSize.height,1)}}rotate(t){const i=this.shapePosition(),s=t.pivot??this.defaultAnchor();s.x+=i.x,s.y+=i.y,this.ctx.translate(s.x,s.y),this.ctx.rotate(e.degreesToRadians(t.degrees)),this.ctx.translate(-s.x,-s.y)}defaultAnchor(){const t=this.shapeSize();return{x:t.width/2,y:t.height/2}}},h=/* @__PURE__ */function(t){return t.SolidColor="solid-color",t.LinearGradient="linear-gradient",t.RadialGradient="radial-gradient",t}({}),n=class{constructor(t,i,e){this.ctx=t,this.elementPosition=i,this.elementSize=e}mixed(t){let i="";if("string"==typeof t)i=t;else switch(t.type()){case h.SolidColor:i=t.color();break;case h.LinearGradient:i=this.linearGradient(t);break;case h.RadialGradient:i=this.radialGradient(t)}return i}linearGradient(t){const i=e.degreesToRadians(t.degrees()),s=this.elementPosition.x+this.elementSize.width/2,o=this.elementPosition.y+this.elementSize.height/2,h=Math.sqrt(this.elementSize.width**2+this.elementSize.height**2)/2,n=Math.cos(i)*h,r=Math.sin(i)*h,a={x:s-n,y:o-r},l={x:s+n,y:o+r},d=this.ctx.createLinearGradient(a.x,a.y,l.x,l.y);return this.appendGradientColors(d,t.colors()),d}radialGradient(t){const i=t.position()??{x:this.elementSize.width/2,y:this.elementSize.height/2},e={x:this.elementPosition.x+i.x,y:this.elementPosition.y+i.y},s=Math.sqrt(this.elementSize.width*this.elementSize.width+this.elementSize.height*this.elementSize.height)/2,o=this.ctx.createRadialGradient(e.x,e.y,0,e.x,e.y,s*t.radiusScale());return this.appendGradientColors(o,t.colors()),o}appendGradientColors(t,i){i.forEach(i=>t.addColorStop(i.offset(),i.color()))}},r=class extends s{draw(){this.startDrawing(),this.makeShape(),this.drawFill(),this.drawBorder(),this.endDrawing()}makeShape(){const t=this.element.borderWidth(),i=this.position(),e=this.element.size(),s=this.element.cutOutShapes(),h={x:i.x+t/2,y:i.y+t/2},n={width:e.width-t,height:e.height-t};this.ctx.beginPath(),s.length>0&&(this.ctx.translate(h.x,h.y),s.forEach(t=>{new o(this.ctx,t).draw()}),this.ctx.translate(-h.x,-h.y),h.x+=n.width,n.width*=-1),this.ctx.rect(h.x,h.y,n.width,n.height),this.ctx.closePath()}drawFill(){const t=this.element.fillColor();t&&(this.ctx.fillStyle=new n(this.ctx,this.position(),this.element.size()).mixed(t),this.ctx.fill())}drawBorder(){const t=this.element.borderWidth();t>0&&(this.ctx.strokeStyle=new n(this.ctx,this.position(),this.element.size()).mixed(this.element.borderColor()??this.defaultBorderColor),this.ctx.lineWidth=t,this.ctx.stroke())}position(){const t=this.element.positionLeftTop(),i=this.relativePosition();return{x:t.x+i.x,y:t.y+i.y}}defaultAnchor(){const t=this.element.size();return{x:t.width/2,y:t.height/2}}},a=class extends s{draw(){this.startDrawing(),this.drawFill(),this.drawBorder(),this.endDrawing()}drawFill(){const t=this.element.fillColor();if(t){const i=this.element.borderWidth(),s=this.position(),o=this.element.size();this.ctx.beginPath(),this.ctx.ellipse(s.x,s.y,e.valueNotLessThan(o.width/2-i,1),e.valueNotLessThan(o.height/2-i,1),0,0,2*Math.PI),this.ctx.closePath(),this.ctx.fillStyle=new n(this.ctx,this.element.positionLeftTop(),this.element.size()).mixed(t),this.ctx.fill()}}drawBorder(){const t=this.element.borderWidth();if(t>0){const i=this.position(),s=this.element.size();this.ctx.beginPath(),this.ctx.ellipse(i.x,i.y,e.valueNotLessThan(s.width/2-t/2,1),e.valueNotLessThan(s.height/2-t/2,1),0,0,2*Math.PI),this.ctx.closePath(),this.ctx.strokeStyle=new n(this.ctx,this.element.positionLeftTop(),this.element.size()).mixed(this.element.borderColor()??this.defaultBorderColor),this.ctx.lineWidth=t,this.ctx.stroke()}}position(){const t=e.positionCenter(this.element.position(),this.element.positionPoint(),this.element.boundingClientSize()),i=this.relativePosition();return{x:t.x+i.x,y:t.y+i.y}}defaultAnchor(){return{x:0,y:0}}},l=class extends s{draw(){this.prepare(),this.startDrawing(),this.drawStroke(),this.drawFill(),this.endDrawing()}prepare(){this.ctx.font=this.element.font(),this.ctx.textBaseline="alphabetic"}drawFill(){const t=this.element.fillColor();if(t){const i=this.element.textBox(),e=this.position();this.ctx.fillStyle=new n(this.ctx,this.position(),i.size).mixed(t),i.lines.forEach(t=>{this.ctx.fillText(t.text,e.x+t.position.x,Math.round(e.y+t.position.y+.75*t.size.height))})}}drawStroke(){const t=this.element.strokeWidth();if(t>0){const i=this.element.textBox(),e=this.position(),s=this.element.fillColor();this.ctx.strokeStyle=new n(this.ctx,this.position(),i.size).mixed(this.element.strokeColor()??this.defaultBorderColor),this.ctx.lineWidth=s?2*t:t,i.lines.forEach(t=>{this.ctx.strokeText(t.text,e.x+t.position.x,Math.round(e.y+t.position.y+.75*t.size.height))})}}position(){const t=this.element.positionLeftTop(),i=this.relativePosition();return{x:t.x+i.x,y:t.y+i.y}}defaultAnchor(){const t=this.element.textBox();return{x:t.size.width/2,y:t.size.height/2}}},d=/* @__PURE__ */function(t){return t.Fill="fill",t.Cover="cover",t}({}),c=class extends s{draw(){this.startDrawing(),this.drawBorder(),this.drawImage(),this.endDrawing()}drawImage(){const t=this.element.image();if(t){const i=this.sourceDimensions(),e=this.flippedDimensions(this.elementDimensions());this.ctx.drawImage(t,i.position.x,i.position.y,i.size.width,i.size.height,e.position.x,e.position.y,e.size.width,e.size.height)}}drawBorder(){const t=this.element.borderWidth(),i=new n(this.ctx,this.position(),this.element.size()).mixed(this.element.borderColor()??this.defaultBorderColor),e=this.elementDimensions();this.ctx.strokeStyle=i,this.ctx.lineWidth=2*t,this.isRadiusSet()?(this.makeShape(e),this.ctx.lineJoin="round",this.ctx.fillStyle="#ffffff",this.ctx.fill(),t>0&&(this.ctx.strokeStyle=i,this.ctx.lineWidth=2*t,this.ctx.stroke()),this.ctx.clip()):t>0&&(this.ctx.strokeStyle=i,this.ctx.lineWidth=2*t,this.ctx.strokeRect(e.position.x,e.position.y,e.size.width,e.size.height))}sourceDimensions(){const t=this.element.image(),i=this.element.cropArea(),s={position:{x:0,y:0},size:i.size??{width:t.width,height:t.height}};switch(this.element.fit()){case d.Fill:i.position&&(s.position.x=i.position.x,s.position.y=i.position.y);break;case d.Cover:{const{size:o}=this.elementDimensions();o.width/o.height<s.size.width/s.size.height?s.size.width=s.size.height/(o.height/o.width):s.size.height=s.size.width/(o.width/o.height),i.position?(s.position.x=i.position.x,s.position.y=i.position.y):(s.position.x=e.relativePositionValue("50%",s.size.width,t.width),s.position.y=e.relativePositionValue("50%",s.size.height,t.height));break}}return s}elementDimensions(){const t=this.element.borderWidth(),i=this.position(),e=this.element.size();return{position:{x:i.x+t,y:i.y+t},size:{width:e.width-2*t,height:e.height-2*t}}}flippedDimensions(t){const i=this.element.flipX(),e=this.element.flipY();if(i||e){let s=1,o=1;i&&(s=-1,t.position.x=-(+t.position.x+t.size.width)),e&&(o=-1,t.position.y=-(+t.position.y+t.size.height)),this.ctx.scale(s,o)}return t}makeShape(t){const i=this.borderRadius();this.ctx.lineJoin="round",this.ctx.beginPath(),this.ctx.moveTo(t.position.x+i.topLeft,t.position.y),this.ctx.lineTo(t.position.x+t.size.width-i.topRight,t.position.y),this.ctx.quadraticCurveTo(t.position.x+t.size.width,t.position.y,t.position.x+t.size.width,t.position.y+i.topRight),this.ctx.lineTo(t.position.x+t.size.width,t.position.y+t.size.height-i.bottomRight),this.ctx.quadraticCurveTo(t.position.x+t.size.width,t.position.y+t.size.height,t.position.x+t.size.width-i.bottomRight,t.position.y+t.size.height),this.ctx.lineTo(t.position.x+i.bottomLeft,t.position.y+t.size.height),this.ctx.quadraticCurveTo(t.position.x,t.position.y+t.size.height,t.position.x,t.position.y+t.size.height-i.bottomLeft),this.ctx.lineTo(t.position.x,t.position.y+i.topLeft),this.ctx.quadraticCurveTo(t.position.x,t.position.y,t.position.x+i.topLeft,t.position.y),this.ctx.closePath()}borderRadius(){const t=this.element.borderRadius();if(this.isRadiusSet()){const{size:i}=this.elementDimensions();Object.keys(t).forEach(e=>{t[e]>i.width/2&&(t[e]=Math.floor(i.width/2)),t[e]>i.height/2&&(t[e]=Math.floor(i.height/2))})}return t}isRadiusSet(){const t=this.element.borderRadius();return t.topLeft>0||t.topRight>0||t.bottomLeft>0||t.bottomRight>0}position(){const t=this.element.positionLeftTop(),i=this.relativePosition();return{x:t.x+i.x,y:t.y+i.y}}defaultAnchor(){const t=this.element.size();return{x:t.width/2,y:t.height/2}}},u=class{_points=[];_isCloseShape;_position={x:0,y:0};_positionPoint=i.LeftTop;_size;_jointsRadius=0;_degrees=0;_anchor;_rotations=[];constructor(t,i=!0){this._points=t,this._isCloseShape=i}hash(){return e.hash([this.points(),this.isCloseShape(),this.position(),this.positionPoint(),this.size(),this.jointsRadius(),this.rotations(),this.degrees(),this.anchor()])}points(){return this._points}isCloseShape(){return this._isCloseShape}position(){return this._position}positionPoint(){return this._positionPoint}size(){return this._size}jointsRadius(){return this._jointsRadius}degrees(){return this._degrees}anchor(){return this._anchor}rotations(){return this._rotations}setPosition(t,i){return this._position=t,i&&(this._positionPoint=i),this}setSize(t){return this._size=t,this}setJointsRadius(t){return this._jointsRadius=t,this}setDegrees(t,i){return this._degrees=t,this._anchor=i,this}setRotations(t){return this._rotations=t,this}},p=class extends s{draw(){this.startDrawing(),this.makeShape(),this.drawBorder(),this.drawFill(),this.endDrawing()}makeShape(){const t=this.element.shapePoints();if(t.length>2){const i=new u(t).setSize(this.shapeSize()).setPosition(this.shapePosition()).setJointsRadius(this.element.borderRadius());this.ctx.beginPath(),new o(this.ctx,i).draw(),this.ctx.closePath()}}drawFill(){const t=this.element.fillColor();t&&(this.ctx.fillStyle=new n(this.ctx,this.position(),this.shapeSize()).mixed(t),this.ctx.fill())}drawBorder(){const t=this.element.borderWidth();if(t>0){const i=new n(this.ctx,this.position(),this.element.size()).mixed(this.element.borderColor()??this.defaultBorderColor),e=this.element.fillColor();this.element.borderRadius()>0&&(this.ctx.lineJoin="round"),this.ctx.strokeStyle=i,this.ctx.lineWidth=e?2*t:t,this.ctx.stroke()}}shapePosition(){const t=this.position(),i=this.element.borderWidth();return{x:t.x+i,y:t.y+i}}shapeSize(){const t=this.element.size(),i=this.element.borderWidth();return{width:t.width-2*i,height:t.height-2*i}}position(){const t=this.element.positionLeftTop(),i=this.relativePosition();return{x:t.x+i.x,y:t.y+i.y}}defaultAnchor(){const t=this.element.size();return{x:t.width/2,y:t.height/2}}},x=class extends s{draw(){this.startDrawing(),this.makeShape(),this.drawStroke(),this.endDrawing()}makeShape(){this.ctx.beginPath();const t=new u(this.element.shapePoints(),!1).setSize(this.shapeSize()).setPosition(this.shapePosition()).setJointsRadius(this.element.jointsRadius());new o(this.ctx,t).draw()}drawStroke(){const t=new n(this.ctx,this.position(),this.element.boundingClientSize()).mixed(this.element.color()??this.defaultBorderColor);this.ctx.lineCap=this.element.lineCap(),this.ctx.strokeStyle=t,this.ctx.lineWidth=this.element.calculatedThickness(),this.ctx.stroke()}shapeSize(){const t=this.element.boundingClientSize(),i=this.element.calculatedThickness();return{width:t.width-i,height:t.height-i/2}}shapePosition(){const t=this.position(),i=this.element.calculatedThickness();return{x:t.x+i/2,y:t.y}}position(){const t=this.element.positionLeftTop(),i=this.relativePosition();return{x:t.x+i.x,y:t.y+i.y}}defaultAnchor(){const t=this.shapeSize();return{x:t.width/2,y:t.height/2}}},g=class{_canvas;_ctx;constructor(t){this._canvas=t??document.createElement("canvas"),this._ctx=this._canvas.getContext("2d")}nativeElement(){return this._canvas}ctx(){return this._ctx}size(){return{width:this._canvas.width,height:this._canvas.height}}setSize(t){this._canvas.width=t.width,this._canvas.height=t.height}draw(i,e){switch(i.type()){case t.Rectangle:new r(this.ctx(),i,e).draw();break;case t.Ellipse:new a(this.ctx(),i,e).draw();break;case t.Polygon:new p(this.ctx(),i,e).draw();break;case t.Line:new x(this.ctx(),i,e).draw();break;case t.Text:new l(this.ctx(),i,e).draw();break;case t.Image:new c(this.ctx(),i,e).draw()}}clear(){this.ctx().clearRect(0,0,this._canvas.width,this._canvas.height)}},m=class{},f=class extends m{_color;constructor(t,i){super(),this.setColor(t,i)}type(){return h.SolidColor}color(){return this._color}hash(){return e.hash([this.color()])}setColor(t,i){const e=9===t.length?t.slice(-2):void 0,s=void 0!==i?this.alphaToHex(i):e??"ff";return this._color=t.slice(0,7)+s,this}alphaToHex(t){let i=Math.round(255*t).toString(16);return 1===i.length&&(i="0"+i),i}},_=class extends f{_offset;constructor(t,i,e=1){super(i,e),this.setOffset(t)}offset(){return this._offset}hash(){return e.hash([super.hash(),this.offset()])}setOffset(t){return this._offset=e.valueInRange(t,{min:0,max:1}),this}},w=class extends m{_colors;constructor(t){super(),this._colors=t}colors(){return this._colors}hash(){return e.hash([this.colors()])}},y=class extends w{_degrees=0;type(){return h.LinearGradient}degrees(){return this._degrees}setDegrees(t){return this._degrees=t,this}hash(){return e.hash([super.hash(),this.degrees()])}},z=class extends w{_position;_radiusScale;type(){return h.RadialGradient}position(){return this._position}radiusScale(){return this._radiusScale??1}setPosition(t){return this._position=t,this}setRadiusScale(t){return this._radiusScale=t,this}hash(){return e.hash([super.hash(),this.position(),this.radiusScale()])}},v=class{_position={x:0,y:0};_positionPoint;_scale={x:1,y:1};_opacity=1;_rotations=[];_degrees=0;_anchor;_shadow;hash(){return e.hash([this.position(),this.positionPoint(),this.scale(),this.opacity(),this.rotations(),this.degrees(),this.anchor(),this.shadow()])}position(){return e.resolvedValue(this._position)}positionLeftTop(){return e.positionLeftTop(this.position(),this.positionPoint(),this.boundingClientSize())}positionPoint(){return e.resolvedValue(this._positionPoint)??i.LeftTop}scale(){return e.resolvedValue(this._scale)}opacity(){return e.resolvedValue(this._opacity)}rotations(){return e.resolvedValue(this._rotations)}degrees(){return e.resolvedValue(this._degrees)}anchor(){return this._anchor?e.resolvedValue(this._anchor):void 0}shadow(){return this._shadow?e.resolvedValue(this._shadow):void 0}setPosition(t,i){return this._position=t,i&&(this._positionPoint=i),this}setScale(t){return this._scale=t,this}setOpacity(t){return this._opacity=t,this}setDegrees(t,i){return this._degrees=t,this._anchor=i,this}setRotations(t){return this._rotations=t,this}setShadow(t){return this._shadow=t,this}},S=class extends v{_size={width:1,height:1};_borderColor;_borderWidth=0;hash(){return e.hash([super.hash(),this.size(),this.borderColor(),this.borderWidth()])}size(){return e.resolvedValue(this._size)}borderColor(){return this._borderColor?e.resolvedValue(this._borderColor):void 0}borderWidth(){return e.resolvedValue(this._borderWidth)}setSize(t){return this._size=t,this}setBorder(t,i){return this._borderWidth=t,this._borderColor=i,this}},b=class extends S{_fillColor;_cutOutShapes=[];type(){return t.Rectangle}hash(){return e.hash([super.hash(),this.fillColor(),this.cutOutShapes()])}fillColor(){return this._fillColor?e.resolvedValue(this._fillColor):void 0}cutOutShapes(){return e.resolvedValue(this._cutOutShapes)}boundingClientSize(){return this.size()}setFillColor(t){return this._fillColor=t,this}setCutOutShapes(t){return this._cutOutShapes=t,this}},C=class extends S{_fillColor;type(){return t.Ellipse}hash(){return e.hash([super.hash(),this.fillColor()])}fillColor(){return this._fillColor?e.resolvedValue(this._fillColor):void 0}boundingClientSize(){return this.size()}setFillColor(t){return this._fillColor=t,this}},P=class extends S{_shapePoints=[];_borderRadius=0;_fillColor;type(){return t.Polygon}hash(){return e.hash([super.hash(),this.shapePoints(),this.borderRadius(),this.fillColor()])}shapePoints(){return e.resolvedValue(this._shapePoints)}borderRadius(){return e.resolvedValue(this._borderRadius)}fillColor(){return this._fillColor?e.resolvedValue(this._fillColor):void 0}boundingClientSize(){return this.size()}setShapePoints(t){return this._shapePoints=t,this}setBorderRadius(t){return this._borderRadius=t,this}setFillColor(t){return this._fillColor=t,this}},R=/* @__PURE__ */function(t){return t.Round="round",t.Square="square",t}({}),T=class extends v{_shapePoints=[];_size;_keepRatio;_thickness=1;_jointsRadius=0;_lineCap=R.Square;_color;type(){return t.Line}hash(){return e.hash([super.hash(),this.shapePoints(),this.size(),this.keepRatio(),this.thickness(),this.jointsRadius(),this.lineCap(),this.color()])}shapePoints(){return e.resolvedValue(this._shapePoints)}size(){return this._size?e.resolvedValue(this._size):void 0}keepRatio(){return e.resolvedValue(this._keepRatio)??!1}thickness(){return e.resolvedValue(this._thickness)}calculatedThickness(){const t=this.size();let i=this.thickness();if(t){const s=e.shapeSize(this.shapePoints()),o=e.resizedSize(s,t,this.keepRatio()),h=o.width/e.valueNotLessThan(s.width,1),n=o.height/e.valueNotLessThan(s.height,1);i=e.valueNotLessThan(i*Math.min(h,n),1)}return i}jointsRadius(){return e.resolvedValue(this._jointsRadius)}lineCap(){return e.resolvedValue(this._lineCap)}color(){return this._color?e.resolvedValue(this._color):void 0}boundingClientSize(){let t=this.size();const i=this.calculatedThickness(),s=e.shapeSize(this.shapePoints());if(t){const o=e.resizedSize(s,t,this.keepRatio());t={width:o.width,height:o.height+i/2}}else t={width:s.width,height:e.valueNotLessThan(s.height+i/2,0)};return t}setShapePoints(t){return this._shapePoints=t,this}setSize(t,i){return this._size=t,i&&(this._keepRatio=i),this}setThickness(t){return this._thickness=t,this}setJointsRadius(t){return this._jointsRadius=t,this}setLineCap(t){return this._lineCap=t,this}setColor(t){return this._color=t,this}},k=/* @__PURE__ */function(t){return t.Normal="normal",t.Bold="bold",t}({}),L=/* @__PURE__ */function(t){return t.Left="left",t.Center="center",t.Right="right",t}({}),V=/* @__PURE__ */function(t){return t.Top="top",t.Center="center",t.Bottom="bottom",t}({}),B=class{element;canvas;ctx;lastTextBox;lastTextBoxHash="";constructor(t){this.element=t,this.canvas=document.createElement("canvas"),this.ctx=this.canvas.getContext("2d")}textBox(){return this.elementChanged()&&(this.lastTextBox=void 0),this.lastTextBox||(this.lastTextBox=this.createTextBox()),this.lastTextBox}createTextBox(){const t={text:this.element.text(),lines:[],size:{width:1,height:1},position:{x:0,y:0}};return t.lines=this.textLines(),t.size=this.textBoxSize(t.lines),t.position=this.textBoxPosition(t.lines),t}textLines(){const t=this.element.bounds(),i=this.element.padding(),e=t?{width:t.width-i.left-i.right,height:t.height-i.top-i.bottom}:void 0,s=this.splitText().map(t=>({text:t,size:{width:this.textWidth(t),height:this.element.lineHeight()},position:{x:0,y:0}})).map((t,i,e)=>{const s=e[i-1];return t.position={x:0,y:s?s.position.y+s.size.height:0},t});return(void 0!==e?this.alignedLines(s,e):s).map(t=>(t.position.x+=i.left,t.position.y+=i.top,t))}alignedLines(t,i){const e=this.element.horizontalAlign(),s=this.element.verticalAlign(),o=t.reduce((t,i)=>t+i.size.height,0);return t.map(t=>(e===L.Center&&(t.position.x+=Math.round((i.width-t.size.width)/2)),e===L.Right&&(t.position.x+=i.width-t.size.width),s===V.Center&&(t.position.y+=Math.round((i.height-o)/2)),s===V.Bottom&&(t.position.y+=i.height-o),t))}textBoxSize(t){const i=this.element.padding(),e=this.element.bounds()??{width:1,height:1},s=Math.max(...t.map(t=>t.size.width));return{width:Math.max(s+i.left+i.right,e.width),height:Math.max(this.element.lineHeight()*t.length+i.top+i.bottom,e.height)}}textBoxPosition(t){const i=this.element.padding(),e=Math.min(...t.map(t=>t.position.x)),s=Math.min(...t.map(t=>t.position.y));return{x:e-i.left,y:s-i.top}}splitText(){const t=this.element.text().replaceAll("<BR>","<br>").split("<br>"),i=this.element.padding(),e=(this.element.bounds()??{width:999999,height:999999}).width-(i.left+i.right);let s=[];return t.forEach(t=>{t=t.trim();const i=this.textWidth(t);if(i>e){const o=Math.floor(e/(i/t.length))-3,h=t.split(" ");let n="";h.forEach((t,i)=>{n.length+t.length>o&&(s.push(n.trim()),n=""),n+=t+" ",i===h.length-1&&s.push(n.trim())}),s=s.map(t=>t.trim())}else s.push(t)}),s}textWidth(t){return this.ctx.font=this.element.font(),Math.ceil(this.ctx.measureText(t).width+this.element.strokeWidth())}elementChanged(){const t=[this.element.text(),this.element.bounds(),this.element.horizontalAlign(),this.element.verticalAlign(),this.element.padding(),this.element.lineHeight(),this.element.font(),this.element.strokeWidth()].join("|"),i=this.lastTextBoxHash!==t;return this.lastTextBoxHash=t,i}},A=class extends v{_text="";_bounds;_fontSize=12;_fontFamily="Tahoma";_fontWeight=k.Normal;_lineHeight;_fillColor;_strokeColor;_strokeWidth=0;_horizontalAlign=L.Left;_verticalAlign=V.Top;_padding={topOrVerticalOrDefault:0};_textSplitter=new B(this);type(){return t.Text}hash(){return e.hash([super.hash(),this.text(),this.bounds(),this.font(),this.lineHeight(),this.fillColor(),this.strokeColor(),this.strokeWidth(),this.horizontalAlign(),this.verticalAlign(),this.padding()])}text(){return e.resolvedValue(this._text).toString()}bounds(){return this._bounds?e.resolvedValue(this._bounds):void 0}fontSize(){return e.resolvedValue(this._fontSize)}fontFamily(){return e.resolvedValue(this._fontFamily)}fontWeight(){return e.resolvedValue(this._fontWeight)}lineHeight(){return e.resolvedValue(this._lineHeight??Math.round(1.2*this.fontSize()))}fillColor(){return this._fillColor?e.resolvedValue(this._fillColor):void 0}strokeColor(){return this._strokeColor?e.resolvedValue(this._strokeColor):void 0}strokeWidth(){return e.resolvedValue(this._strokeWidth)}horizontalAlign(){return e.resolvedValue(this._horizontalAlign)}verticalAlign(){return e.resolvedValue(this._verticalAlign)}padding(){let t;const i=e.resolvedValue(this._padding.topOrVerticalOrDefault),s=this._padding.rightOrHorizontal?e.resolvedValue(this._padding.rightOrHorizontal):void 0,o=this._padding.bottom?e.resolvedValue(this._padding.bottom):void 0,h=this._padding.left?e.resolvedValue(this._padding.left):void 0;return t=void 0===s?{top:i,right:i,bottom:i,left:i}:void 0===o&&void 0===h?{top:i,right:s,bottom:i,left:s}:{top:i,right:s,bottom:o??0,left:h??0},t}font(){const t=[this.fontSize()+"px",this.fontFamily()],i=this.fontWeight();return i&&t.unshift(i),t.join(" ")}textBox(){return this._textSplitter.textBox()}boundingClientSize(){return this.textBox().size}setText(t){return this._text=t,this}setBounds(t){return this._bounds=t,this}setFontSize(t){return this._fontSize=t,this}setFontFamily(t){return this._fontFamily=t,this}setFontWeight(t){return this._fontWeight=t,this}setLineHeight(t){return this._lineHeight=t,this}setFillColor(t){return this._fillColor=t,this}setStroke(t,i){return this._strokeWidth=t,this._strokeColor=i,this}setHorizontalAlign(t){return this._horizontalAlign=t,this}setVerticalAlign(t){return this._verticalAlign=t,this}setPadding(t,i,e,s){return this._padding={topOrVerticalOrDefault:t,rightOrHorizontal:i,bottom:e,left:s},this}},M=class extends S{_image;_fit=d.Fill;_borderRadius={topLeftOrDefault:0};_flipX;_flipY;_cropArea;type(){return t.Image}hash(){return e.hash([super.hash(),this.image()?.id,this.fit(),this.borderRadius(),this.flipX(),this.flipY(),this.cropArea()])}image(){return this._image?e.resolvedValue(this._image):void 0}fit(){return e.resolvedValue(this._fit)}borderRadius(){let t;const i=e.resolvedValue(this._borderRadius.topLeftOrDefault),s=this._borderRadius.topRight?e.resolvedValue(this._borderRadius.topRight):void 0,o=this._borderRadius.bottomRight?e.resolvedValue(this._borderRadius.bottomRight):void 0,h=this._borderRadius.bottomLeft?e.resolvedValue(this._borderRadius.bottomLeft):void 0;return t=void 0===s&&void 0===o&&void 0===h?{topLeft:i,topRight:i,bottomRight:i,bottomLeft:i}:{topLeft:i,topRight:s??0,bottomRight:o??0,bottomLeft:h??0},t}flipX(){return e.resolvedValue(this._flipX)??!1}flipY(){return e.resolvedValue(this._flipY)??!1}cropArea(){return e.resolvedValue(this._cropArea)??{}}boundingClientSize(){return this.size()}setImage(t){return this._image=t,this}setFit(t){return this._fit=t,this}setBorderRadius(t,i,e,s){return this._borderRadius={topLeftOrDefault:t,topRight:i,bottomRight:e,bottomLeft:s},this}setFlip(t){return this._flipX=t.horizontal??!1,this._flipY=t.vertical??!1,this}setCropArea(t){return this._cropArea=t,this}};export{g as Canvas,h as ColorType,C as EllipseElement,k as FontWeight,_ as GradientColor,L as HorizontalAlign,M as ImageElement,d as ImageFit,R as LineCap,T as LineElement,y as LinearGradient,P as PolygonElement,i as PositionPoint,z as RadialGradient,b as RectangleElement,u as Shape,f as SolidColor,A as TextElement,V as VerticalAlign};

dist/index.umd.js

@@ -1,1 +0,1 @@
-!function(t,i){"object"==typeof exports&&"object"==typeof module?module.exports=i():"function"==typeof define&&define.amd?define("Canvas",[],i):"object"==typeof exports?exports.Canvas=i():t.Canvas=i()}(self,(()=>(()=>{"use strict";var t={d:(i,e)=>{for(var s in e)t.o(e,s)&&!t.o(i,s)&&Object.defineProperty(i,s,{enumerable:!0,get:e[s]})},o:(t,i)=>Object.prototype.hasOwnProperty.call(t,i),r:t=>{"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(t,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(t,"__esModule",{value:!0})}},i={};t.r(i),t.d(i,{Canvas:()=>y,Element:()=>k,EllipseElement:()=>L,FontWeight:()=>F,GradientColor:()=>S,HorizontalAlign:()=>c,ImageElement:()=>E,ImageFit:()=>m,LineCap:()=>M,LineElement:()=>W,LinearGradient:()=>R,PolygonElement:()=>B,PositionPoint:()=>s,RadialGradient:()=>C,RectangleElement:()=>v,Shape:()=>f,SolidColor:()=>b,TextElement:()=>D,VerticalAlign:()=>p});let e=function(t){return t.Rectangle="rectangle",t.Ellipse="ellipse",t.Polygon="polygon",t.Line="line",t.Text="text",t.Image="image",t}({}),s=function(t){return t.LeftTop="left-top",t.RightTop="right-top",t.LeftBottom="left-bottom",t.RightBottom="right-bottom",t.Center="center",t}({});class h{static valueInRange(t,i){return t<i.min&&(t=i.min),t>i.max&&(t=i.max),t}static valueNotGreaterThan(t,i){return t>i&&(t=i),t}static valueNotLessThan(t,i){return t<i&&(t=i),t}static degreesToRadians(t){return t/180*Math.PI}static distance(t,i){return Math.sqrt(Math.pow(Math.abs(i.x-t.x),2)+Math.pow(Math.abs(i.y-t.y),2))}static positionBetweenPoints(t,i,e){const s=e/h.distance(t,i);return{x:t.x+s*(i.x-t.x),y:t.y+s*(i.y-t.y)}}static shapeSize(t){const i=Math.min(...t.map((t=>t.x))),e=Math.min(...t.map((t=>t.y))),s=Math.max(...t.map((t=>t.x))),h=Math.max(...t.map((t=>t.y)));return{width:Math.floor(s-i),height:Math.floor(h-e)}}static positionLeftTop(t,i,e){const h={x:t.x,y:t.y};switch(i){case s.RightTop:h.x-=e.width;break;case s.RightBottom:h.x-=e.width,h.y-=e.height;break;case s.LeftBottom:h.y-=e.height;break;case s.Center:h.x-=e.width/2,h.y-=e.height/2}return h}static positionCenter(t,i,e){const s=h.positionLeftTop(t,i,e);return s.x+=e.width/2,s.y+=e.height/2,s}static resizedSize(t,i,e){const s={width:i.width,height:i.height};if(e){const e=[{width:t.width*(i.height/t.height),height:i.height},{width:i.width,height:t.height*(i.width/t.width)}].find((t=>t.width<=i.width&&t.height<=i.height));e&&(s.width=e.width,s.height=e.height)}return s}}class o{defaultBorderColor="#000000";constructor(t,i){this.ctx=t,this.element=i}startDrawing(){this.ctx.save();const t=this.element.opacity(),i=this.element.degrees(),e=this.element.shadow();if(t<1&&(this.ctx.globalAlpha=t),0!==i){const t=this.position(),e=this.anchor();e.x+=t.x,e.y+=t.y,this.ctx.translate(e.x,e.y),this.ctx.rotate(h.degreesToRadians(i)),this.ctx.translate(-e.x,-e.y)}e&&e.blur>0&&(this.ctx.shadowColor=e.color,this.ctx.shadowBlur=e.blur,this.ctx.shadowOffsetX=e.x,this.ctx.shadowOffsetY=e.y)}endDrawing(){this.ctx.restore()}}class n{constructor(t,i){this.ctx=t,this.shape=i}draw(){this.prepare(),this.ctx.save(),this.rotateContext(),this.shape.isCloseShape()?this.makeClosedShape():this.makeOpenedShape(),this.ctx.restore()}prepare(){this._originalSize=h.shapeSize(this.shape.points()),this._sizeRatio=this.sizeRatio(),this._shapePosition=this.shapePosition()}rotateContext(){const t=this.shape.degrees();if(0!==t){const i=this.shapePosition(),e=this.anchor();e.x+=i.x,e.y+=i.y,this.ctx.translate(e.x,e.y),this.ctx.rotate(h.degreesToRadians(t)),this.ctx.translate(-e.x,-e.y)}}makeClosedShape(){const t=this.shape.points();t.length>2&&t.forEach(((i,e)=>{const s=0===e,o=e===t.length-1,n=t[e+1]||t[0],r=h.distance(i,n),a=this.radius(r),l=h.positionBetweenPoints(i,n,a),d=h.positionBetweenPoints(i,n,r-a);if(s&&this.moveToPoint(l),this.lineToPoint(d),a>0){const i=t[e+2]||(o?t[1]:t[0]);this.quadraticCurveToPoint(n,i)}}))}makeOpenedShape(){const t=this.shape.points();t.length>1&&t.forEach(((i,e)=>{const s=0===e,o=e===t.length-1,n=e===t.length-2;if(!o){const o=t[e+1],r=o?h.distance(i,o):0,a=this.radius(r),l=s?i:h.positionBetweenPoints(i,o,a),d=n?o:h.positionBetweenPoints(i,o,r-a);s&&this.moveToPoint(l),this.lineToPoint(d),!n&&a>0&&this.quadraticCurveToPoint(o,t[e+2])}}))}radius(t){const i=Math.min(this._sizeRatio.width,this._sizeRatio.height),e=Math.floor(this.shape.jointsRadius()/i),s=Math.floor(.55*t);return e>s?s:e}moveToPoint(t){this.ctx.moveTo(this._shapePosition.x+t.x*this._sizeRatio.width,this._shapePosition.y+t.y*this._sizeRatio.height)}lineToPoint(t){this.ctx.lineTo(this._shapePosition.x+t.x*this._sizeRatio.width,this._shapePosition.y+t.y*this._sizeRatio.height)}quadraticCurveToPoint(t,i){const e=h.distance(t,i),s=this.radius(e),o=h.positionBetweenPoints(t,i,s);this.ctx.quadraticCurveTo(this._shapePosition.x+t.x*this._sizeRatio.width,this._shapePosition.y+t.y*this._sizeRatio.height,this._shapePosition.x+o.x*this._sizeRatio.width,this._shapePosition.y+o.y*this._sizeRatio.height)}shapePosition(){return h.positionLeftTop(this.shape.position(),this.shape.positionPoint(),this.shapeSize())}shapeSize(){return this.shape.size()||this._originalSize}sizeRatio(){const t=this.shapeSize();return{width:t.width/h.valueNotLessThan(this._originalSize.width,1),height:t.height/h.valueNotLessThan(this._originalSize.height,1)}}anchor(){const t=this.shapeSize();return this.shape.anchor()||{x:t.width/2,y:t.height/2}}}let r=function(t){return t.SolidColor="solid-color",t.LinearGradient="linear-gradient",t.RadialGradient="radial-gradient",t}({});class a{constructor(t,i,e){this.ctx=t,this.elementPosition=i,this.elementSize=e}mixed(t){let i="";if("string"==typeof t)i=t;else switch(t.type()){case r.SolidColor:i=t.color();break;case r.LinearGradient:i=this.linearGradient(t);break;case r.RadialGradient:i=this.radialGradient(t)}return i}linearGradient(t){const i=h.degreesToRadians(t.degrees()),e={x:this.elementPosition.x,y:this.elementPosition.y},s={x:e.x+Math.cos(i)*this.elementSize.width,y:e.y+Math.sin(i)*this.elementSize.height},o=this.ctx.createLinearGradient(e.x,e.y,s.x,s.y);return this.appendGradientColors(o,t.colors()),o}radialGradient(t){const i=t.position()||{x:this.elementSize.width/2,y:this.elementSize.height/2},e=this.ctx.createRadialGradient(this.elementPosition.x+i.x,this.elementPosition.y+i.y,0,this.elementPosition.x+i.x,this.elementPosition.y+i.y,.8*Math.max(this.elementSize.width,this.elementSize.height));return this.appendGradientColors(e,t.colors()),e}appendGradientColors(t,i){i.forEach((i=>t.addColorStop(i.offset(),i.color())))}}class l extends o{draw(){this.startDrawing(),this.makeShape(),this.drawFill(),this.drawBorder(),this.endDrawing()}makeShape(){const t=this.element.borderWidth(),i=this.position(),e=this.element.size(),s=this.element.cutOutShapes(),h={x:i.x+t/2,y:i.y+t/2},o={width:e.width-t,height:e.height-t};this.ctx.beginPath(),s.length>0&&(this.ctx.translate(h.x,h.y),s.forEach((t=>{new n(this.ctx,t).draw()})),this.ctx.translate(-h.x,-h.y),h.x+=o.width,o.width*=-1),this.ctx.rect(h.x,h.y,o.width,o.height),this.ctx.closePath()}drawFill(){const t=this.element.fillColor();t&&(this.ctx.fillStyle=new a(this.ctx,this.position(),this.element.size()).mixed(t),this.ctx.fill())}drawBorder(){const t=this.element.borderWidth();t>0&&(this.ctx.strokeStyle=new a(this.ctx,this.position(),this.element.size()).mixed(this.element.borderColor()||this.defaultBorderColor),this.ctx.lineWidth=t,this.ctx.stroke())}position(){return h.positionLeftTop(this.element.position(),this.element.positionPoint(),this.element.size())}anchor(){const t=this.element.size();return this.element.anchor()||{x:t.width/2,y:t.height/2}}}class d extends o{draw(){this.startDrawing(),this.drawFill(),this.drawBorder(),this.endDrawing()}drawFill(){const t=this.element.fillColor();if(t){const i=this.element.borderWidth(),e=this.position(),s=this.element.size();this.ctx.beginPath(),this.ctx.ellipse(e.x,e.y,h.valueNotLessThan(s.width/2-i,1),h.valueNotLessThan(s.height/2-i,1),0,0,2*Math.PI),this.ctx.closePath(),this.ctx.fillStyle=new a(this.ctx,h.positionLeftTop(this.element.position(),this.element.positionPoint(),this.element.size()),this.element.size()).mixed(t),this.ctx.fill()}}drawBorder(){const t=this.element.borderWidth();if(t>0){const i=this.position(),e=this.element.size();this.ctx.beginPath(),this.ctx.ellipse(i.x,i.y,h.valueNotLessThan(e.width/2-t/2,1),h.valueNotLessThan(e.height/2-t/2,1),0,0,2*Math.PI),this.ctx.closePath(),this.ctx.strokeStyle=new a(this.ctx,h.positionLeftTop(this.element.position(),this.element.positionPoint(),this.element.size()),this.element.size()).mixed(this.element.borderColor()||this.defaultBorderColor),this.ctx.lineWidth=t,this.ctx.stroke()}}position(){return h.positionCenter(this.element.position(),this.element.positionPoint(),this.element.size())}anchor(){return this.element.anchor()||{x:0,y:0}}}let c=function(t){return t.Left="left",t.Center="center",t.Right="right",t}({}),p=function(t){return t.Top="top",t.Center="center",t.Bottom="bottom",t}({});class u{constructor(t){this.element=t,this.canvas=document.createElement("canvas");const i=this.canvas.getContext("2d");this.ctx=i}textBox(){const t={text:this.element.text(),lines:[],size:{width:1,height:1},position:{x:0,y:0}};return t.lines=this.textLines(),t.size=this.textBoxSize(t.lines),t.position=this.textBoxPosition(t.lines),t}textLines(){const t=this.element.bounds()||{width:99999,height:99999},i=this.element.horizontalAlign(),e=this.element.verticalAlign(),s=this.element.padding(),h=this.splitText(),o=h.length*this.element.lineHeight();return h.map(((h,n)=>{const r={width:this.textWidth(h),height:this.element.lineHeight()},a={x:0,y:Math.round(r.height*n)};return i===c.Left&&(a.x+=s.left),i===c.Center&&(a.x+=Math.round((t.width-r.width)/2)),i===c.Right&&(a.x+=t.width-r.width-s.right),e===p.Top&&(a.y+=s.top),e===p.Center&&(a.y+=Math.round((t.height-o)/2)),e===p.Bottom&&(a.y+=t.height-r.height-s.bottom),{text:h,size:r,position:a}}))}textBoxSize(t){const i=this.element.padding(),e=this.element.bounds()||{width:1,height:1},s=Math.max(...t.map((t=>t.size.width)));return{width:Math.max(s+i.left+i.right,e.width),height:Math.max(this.element.lineHeight()*t.length+i.top+i.bottom,e.height)}}textBoxPosition(t){const i=this.element.padding(),e=Math.min(...t.map((t=>t.position.x))),s=Math.min(...t.map((t=>t.position.y)));return{x:e-i.left,y:s-i.top}}splitText(){const t=this.element.text().replaceAll("<BR>","<br>").split("<br>"),i=this.element.padding(),e=(this.element.bounds()||{width:99999,height:99999}).width-(i.left+i.right);let s=[];return t.forEach((t=>{t=t.trim();const i=this.textWidth(t);if(i>e){const h=Math.floor(e/(i/t.length))-3,o=t.split(" ");let n="";o.forEach(((t,i)=>{n.length+t.length>h&&(s.push(n.trim()),n=""),n+=t+" ",i===o.length-1&&s.push(n.trim())})),s=s.map((t=>t.trim()))}else s.push(t)})),s}textWidth(t){return this.ctx.font=this.element.font(),Math.ceil(this.ctx.measureText(t).width+this.element.strokeWidth())}}class x extends o{draw(){this.prepare(),this.startDrawing(),this.drawStroke(),this.drawFill(),this.endDrawing()}prepare(){this.ctx.font=this.element.font(),this.ctx.textBaseline="alphabetic",this.textBox=new u(this.element).textBox()}drawFill(){const t=this.element.fillColor();if(t){const i=this.position();this.ctx.fillStyle=new a(this.ctx,this.position(),this.textBox.size).mixed(t),this.textBox.lines.forEach((t=>{this.ctx.fillText(t.text,i.x+t.position.x,Math.round(i.y+t.position.y+.75*t.size.height))}))}}drawStroke(){const t=this.element.strokeWidth();if(t>0){const i=this.position(),e=this.element.fillColor();this.ctx.strokeStyle=new a(this.ctx,this.position(),this.textBox.size).mixed(this.element.strokeColor()||this.defaultBorderColor),this.ctx.lineWidth=e?2*t:t,this.textBox.lines.forEach((t=>{this.ctx.strokeText(t.text,i.x+t.position.x,Math.round(i.y+t.position.y+.75*t.size.height))}))}}position(){return h.positionLeftTop(this.element.position(),this.element.positionPoint(),this.textBox.size)}anchor(){return this.element.anchor()||{x:this.textBox.size.width/2,y:this.textBox.size.height/2}}}let m=function(t){return t.Fill="fill",t.Cover="cover",t}({});class g extends o{draw(){this.startDrawing(),this.drawBorder(),this.drawImage(),this.endDrawing()}drawImage(){const t=this.element.image();if(t){const i=this.sourceDimensions(),e=this.flippedDimensions(this.elementDimensions());this.ctx.drawImage(t,i.position.x,i.position.y,i.size.width,i.size.height,e.position.x,e.position.y,e.size.width,e.size.height)}}drawBorder(){const t=this.element.borderWidth(),i=new a(this.ctx,this.position(),this.element.size()).mixed(this.element.borderColor()||this.defaultBorderColor),e=this.elementDimensions();this.ctx.strokeStyle=i,this.ctx.lineWidth=2*t,this.isRadiusSet()?(this.makeShape(e),this.ctx.lineJoin="round",this.ctx.fillStyle="#ffffff",this.ctx.fill(),t>0&&(this.ctx.strokeStyle=i,this.ctx.lineWidth=2*t,this.ctx.stroke()),this.ctx.clip()):t>0&&(this.ctx.strokeStyle=i,this.ctx.lineWidth=2*t,this.ctx.strokeRect(e.position.x,e.position.y,e.size.width,e.size.height))}sourceDimensions(){const t=this.element.image(),i=this.element.fit(),e={position:{x:0,y:0},size:{width:t.width,height:t.height}};if(i===m.Cover){const{size:i}=this.elementDimensions();i.width/i.height<e.size.width/e.size.height?(e.size.width=e.size.height/(i.height/i.width),e.position.x=(t.width-e.size.width)/2):(e.size.height=e.size.width/(i.width/i.height),e.position.y=(t.height-e.size.height)/2)}return e}elementDimensions(){const t=this.element.borderWidth(),i=this.position(),e=this.element.size();return{position:{x:i.x+t,y:i.y+t},size:{width:e.width-2*t,height:e.height-2*t}}}flippedDimensions(t){const i=this.element.flipX(),e=this.element.flipY();if(i||e){let s=1,h=1;i&&(s=-1,t.position.x=-(+t.position.x+t.size.width)),e&&(h=-1,t.position.y=-(+t.position.y+t.size.height)),this.ctx.scale(s,h)}return t}makeShape(t){const i=this.borderRadius();this.ctx.lineJoin="round",this.ctx.beginPath(),this.ctx.moveTo(t.position.x+i.topLeft,t.position.y),this.ctx.lineTo(t.position.x+t.size.width-i.topRight,t.position.y),this.ctx.quadraticCurveTo(t.position.x+t.size.width,t.position.y,t.position.x+t.size.width,t.position.y+i.topRight),this.ctx.lineTo(t.position.x+t.size.width,t.position.y+t.size.height-i.bottomRight),this.ctx.quadraticCurveTo(t.position.x+t.size.width,t.position.y+t.size.height,t.position.x+t.size.width-i.bottomRight,t.position.y+t.size.height),this.ctx.lineTo(t.position.x+i.bottomLeft,t.position.y+t.size.height),this.ctx.quadraticCurveTo(t.position.x,t.position.y+t.size.height,t.position.x,t.position.y+t.size.height-i.bottomLeft),this.ctx.lineTo(t.position.x,t.position.y+i.topLeft),this.ctx.quadraticCurveTo(t.position.x,t.position.y,t.position.x+i.topLeft,t.position.y),this.ctx.closePath()}borderRadius(){const t=this.element.borderRadius();if(this.isRadiusSet()){const{size:i}=this.elementDimensions();Object.keys(t).forEach((e=>{t[e]>i.width/2&&(t[e]=Math.floor(i.width/2)),t[e]>i.height/2&&(t[e]=Math.floor(i.height/2))}))}return t}isRadiusSet(){const t=this.element.borderRadius();return t.topLeft>0||t.topRight>0||t.bottomLeft>0||t.bottomRight>0}position(){return h.positionLeftTop(this.element.position(),this.element.positionPoint(),this.element.size())}anchor(){const t=this.element.size();return this.element.anchor()||{x:t.width/2,y:t.height/2}}}class f{_points=[];_position={x:0,y:0};_positionPoint=s.LeftTop;_jointsRadius=0;_degrees=0;constructor(t,i=!0){this._points=t,this._isCloseShape=i}points(){return this._points}isCloseShape(){return this._isCloseShape}position(){return this._position}positionPoint(){return this._positionPoint}size(){return this._size}jointsRadius(){return this._jointsRadius}degrees(){return this._degrees}anchor(){return this._anchor}setPosition(t,i){return this._position=t,i&&(this._positionPoint=i),this}setSize(t){return this._size=t,this}setJointsRadius(t){return this._jointsRadius=t,this}setDegrees(t,i){return this._degrees=t,this._anchor=i,this}}class _ extends o{draw(){this.startDrawing(),this.makeShape(),this.drawBorder(),this.drawFill(),this.endDrawing()}makeShape(){const t=this.element.shapePoints();if(t.length>2){const i=new f(t).setSize(this.shapeSize()).setPosition(this.shapePosition()).setJointsRadius(this.element.borderRadius());this.ctx.beginPath(),new n(this.ctx,i).draw(),this.ctx.closePath()}}drawFill(){const t=this.element.fillColor();t&&(this.ctx.fillStyle=new a(this.ctx,this.position(),this.shapeSize()).mixed(t),this.ctx.fill())}drawBorder(){const t=this.element.borderWidth();if(t>0){const i=new a(this.ctx,this.position(),this.element.size()).mixed(this.element.borderColor()||this.defaultBorderColor),e=this.element.fillColor();this.element.borderRadius()>0&&(this.ctx.lineJoin="round"),this.ctx.strokeStyle=i,this.ctx.lineWidth=e?2*t:t,this.ctx.stroke()}}shapePosition(){const t=this.position(),i=this.element.borderWidth();return{x:t.x+i,y:t.y+i}}shapeSize(){const t=this.element.size(),i=this.element.borderWidth();return{width:t.width-2*i,height:t.height-2*i}}position(){return h.positionLeftTop(this.element.position(),this.element.positionPoint(),this.element.size())}anchor(){const t=this.element.size();return this.element.anchor()||{x:t.width/2,y:t.height/2}}}class w extends o{draw(){this.startDrawing(),this.makeShape(),this.drawStroke(),this.endDrawing()}makeShape(){this.ctx.beginPath();const t=new f(this.element.shapePoints(),!1).setSize(this.shapeSize()).setPosition(this.shapePosition()).setJointsRadius(this.element.jointsRadius());new n(this.ctx,t).draw()}drawStroke(){const t=new a(this.ctx,this.position(),this.size()).mixed(this.element.color()||this.defaultBorderColor);this.ctx.lineCap=this.element.lineCap(),this.ctx.strokeStyle=t,this.ctx.lineWidth=this.thickness(),this.ctx.stroke()}thickness(){const t=this.element.size();let i=this.element.thickness();if(t){const e=h.shapeSize(this.element.shapePoints()),s=h.resizedSize(e,t,this.element.keepRatio()),o=s.width/h.valueNotLessThan(e.width,1),n=s.height/h.valueNotLessThan(e.height,1);i=h.valueNotLessThan(i*Math.min(o,n),1)}return i}shapeSize(){const t=this.size(),i=this.thickness();return{width:t.width-i,height:t.height-i/2}}shapePosition(){const t=this.position(),i=this.thickness();return{x:t.x+i/2,y:t.y}}size(){let t=this.element.size();const i=this.thickness(),e=h.shapeSize(this.element.shapePoints());if(t){const s=h.resizedSize(e,t,this.element.keepRatio());t={width:s.width,height:s.height+i/2}}else t={width:e.width,height:h.valueNotLessThan(e.height+i/2,0)};return t}position(){return h.positionLeftTop(this.element.position(),this.element.positionPoint(),this.size())}anchor(){const t=this.shapeSize();return this.element.anchor()||{x:t.width/2,y:t.height/2}}}class y{constructor(t){this._canvas=t||document.createElement("canvas"),this._ctx=this._canvas.getContext("2d")}nativeElement(){return this._canvas}size(){return{width:this._canvas.width,height:this._canvas.height}}setSize(t){this._canvas.width=t.width,this._canvas.height=t.height}draw(t){switch(t.type()){case e.Rectangle:new l(this._ctx,t).draw();break;case e.Ellipse:new d(this._ctx,t).draw();break;case e.Polygon:new _(this._ctx,t).draw();break;case e.Line:new w(this._ctx,t).draw();break;case e.Text:new x(this._ctx,t).draw();break;case e.Image:new g(this._ctx,t).draw();break;default:throw new Error("Unknown element "+t.type())}}clear(){this._ctx.clearRect(0,0,this._canvas.width,this._canvas.height)}}class z{}class b extends z{constructor(t,i=1){super(),this._color=t+this.alphaToHex(i)}type(){return r.SolidColor}color(){return this._color}alphaToHex(t){let i=Math.round(255*t).toString(16);return 1===i.length&&(i="0"+i),i}}class S extends b{constructor(t,i,e=1){super(i,e),this._offset=h.valueInRange(t,{min:0,max:1})}offset(){return this._offset}}class P extends z{constructor(t){super(),this._colors=t}colors(){return this._colors}}class R extends P{_degrees=0;type(){return r.LinearGradient}degrees(){return this._degrees}setDegrees(t){return this._degrees=t,this}}class C extends P{type(){return r.RadialGradient}position(){return this._position}setPosition(t){return this._position=t,this}}class k{_position={x:0,y:0};_positionPoint=s.LeftTop;_opacity=1;_degrees=0;position(){return this._position}positionPoint(){return this._positionPoint}opacity(){return this._opacity}degrees(){return this._degrees}anchor(){return this._anchor}shadow(){return this._shadow}setPosition(t,i){return this._position=t,i&&(this._positionPoint=i),this}setOpacity(t){return this._opacity=t,this}setDegrees(t,i){return this._degrees=t,this._anchor=i,this}setShadow(t,i,e=0,s=0){return this._shadow={color:t,blur:i,x:e,y:s},this}}class T extends k{_size={width:1,height:1};_borderWidth=0;size(){return this._size}borderColor(){return this._borderColor}borderWidth(){return this._borderWidth}setSize(t){return this._size=t,this}setBorder(t,i){return this._borderWidth=t,this._borderColor=i,this}}class v extends T{_cutOutShapes=[];type(){return e.Rectangle}fillColor(){return this._fillColor}cutOutShapes(){return this._cutOutShapes}setFillColor(t){return this._fillColor=t,this}setCutOutShapes(t){return this._cutOutShapes=t,this}}class L extends T{type(){return e.Ellipse}fillColor(){return this._fillColor}setFillColor(t){return this._fillColor=t,this}}class B extends T{_shapePoints=[];_borderRadius=0;type(){return e.Polygon}shapePoints(){return this._shapePoints}borderRadius(){return this._borderRadius}fillColor(){return this._fillColor}setShapePoints(t){return this._shapePoints=t,this}setBorderRadius(t){return this._borderRadius=t,this}setFillColor(t){return this._fillColor=t,this}}let M=function(t){return t.Round="round",t.Square="square",t}({});class W extends k{_shapePoints=[];_keepRatio=!1;_thickness=1;_jointsRadius=0;_lineCap=M.Square;type(){return e.Line}shapePoints(){return this._shapePoints}size(){return this._size}keepRatio(){return this._keepRatio}thickness(){return this._thickness}jointsRadius(){return this._jointsRadius}lineCap(){return this._lineCap}color(){return this._color}setShapePoints(t){return this._shapePoints=t,this}setSize(t,i){return this._size=t,i&&(this._keepRatio=i),this}setThickness(t){return this._thickness=t,this}setJointsRadius(t){return this._jointsRadius=t,this}setLineCap(t){return this._lineCap=t,this}setColor(t){return this._color=t,this}}let F=function(t){return t.Normal="normal",t.Bold="bold",t}({});class D extends k{_text="";_fontSize=12;_fontFamily="Tahoma";_fontWeight=F.Normal;_strokeWidth=0;_horizontalAlign=c.Left;_verticalAlign=p.Top;_padding={left:0,right:0,top:0,bottom:0};type(){return e.Text}text(){return this._text}bounds(){return this._bounds}fontSize(){return this._fontSize}fontFamily(){return this._fontFamily}fontWeight(){return this._fontWeight}lineHeight(){return this._lineHeight||Math.round(1.2*this.fontSize())}fillColor(){return this._fillColor}strokeColor(){return this._strokeColor}strokeWidth(){return this._strokeWidth}horizontalAlign(){return this._horizontalAlign}verticalAlign(){return this._verticalAlign}padding(){return this._padding}font(){const t=[this.fontSize()+"px",this.fontFamily()],i=this.fontWeight();return i&&t.unshift(i),t.join(" ")}setText(t){return this._text=t,this}setBounds(t){return this._bounds=t,this}setFontSize(t){return this._fontSize=t,this}setFontFamily(t){return this._fontFamily=t,this}setFontWeight(t){return this._fontWeight=t,this}setLineHeight(t){return this._lineHeight=t,this}setFillColor(t){return this._fillColor=t,this}setStroke(t,i){return this._strokeWidth=t,this._strokeColor=i,this}setHorizontalAlign(t){return this._horizontalAlign=t,this}setVerticalAlign(t){return this._verticalAlign=t,this}setPadding(t,i,e,s){const h=t;return void 0===i?(this._padding.top=h,this._padding.right=h,this._padding.bottom=h,this._padding.left=h):void 0===e&&void 0===s?(this._padding.top=t,this._padding.right=i,this._padding.bottom=t,this._padding.left=i):(this._padding.top=t,this._padding.right=i,this._padding.bottom=e||0,this._padding.left=s||0),this}}class E extends T{_fit=m.Fill;_borderRadius={topLeft:0,topRight:0,bottomLeft:0,bottomRight:0};_flipX=!1;_flipY=!1;type(){return e.Image}image(){return this._image}fit(){return this._fit}borderRadius(){return this._borderRadius}flipX(){return this._flipX}flipY(){return this._flipY}setImage(t){return this._image=t,this}setFit(t){return this._fit=t,this}setBorderRadius(t,i,e,s){const h=t;return void 0===i&&void 0===e&&void 0===s?(this._borderRadius.topLeft=h,this._borderRadius.topRight=h,this._borderRadius.bottomRight=h,this._borderRadius.bottomLeft=h):(this._borderRadius.topLeft=t,this._borderRadius.topRight=i||0,this._borderRadius.bottomRight=e||0,this._borderRadius.bottomLeft=s||0),this}setFlip(t){return this._flipX=!!t.horizontal,this._flipY=!!t.vertical,this}}return i})()));
+!function(t,e){"object"==typeof exports&&"undefined"!=typeof module?e(exports):"function"==typeof define&&define.amd?define(["exports"],e):e((t="undefined"!=typeof globalThis?globalThis:t||self).Canvas={})}(this,function(t){Object.defineProperty(t,Symbol.toStringTag,{value:"Module"});var e=function(t){return t.Rectangle="rectangle",t.Ellipse="ellipse",t.Polygon="polygon",t.Line="line",t.Text="text",t.Image="image",t}({}),i=function(t){return t.LeftTop="left-top",t.RightTop="right-top",t.LeftBottom="left-bottom",t.RightBottom="right-bottom",t.Center="center",t}({}),s=class t{static valueInRange(t,e){return t<e.min&&(t=e.min),t>e.max&&(t=e.max),t}static valueNotGreaterThan(t,e){return t>e&&(t=e),t}static valueNotLessThan(t,e){return t<e&&(t=e),t}static relativePositionValue(e,i,s){const o=t.extractedValue(e);let h;if("%"===o.unit)h=(s-i)/100*o.value;else h=Number(e);return h}static extractedValue(t){let e;if("string"==typeof t){const i=t.match(/^(\d+)(\D+)$/)??[];e=i.length>2?{value:parseFloat(i[1]??"0"),unit:i[2]??"px"}:{value:Number(t),unit:"px"}}else e={value:t,unit:"px"};return e}static degreesToRadians(t){return t/180*Math.PI}static distance(t,e){return Math.sqrt(Math.pow(Math.abs(e.x-t.x),2)+Math.pow(Math.abs(e.y-t.y),2))}static positionBetweenPoints(e,i,s){const o=s/t.distance(e,i);return{x:e.x+o*(i.x-e.x),y:e.y+o*(i.y-e.y)}}static shapeSize(t){const e=Math.min(...t.map(t=>t.x)),i=Math.min(...t.map(t=>t.y)),s=Math.max(...t.map(t=>t.x)),o=Math.max(...t.map(t=>t.y));return{width:Math.floor(s-e),height:Math.floor(o-i)}}static positionLeftTop(t,e,s){const o={x:t.x,y:t.y};switch(e){case i.RightTop:o.x-=s.width;break;case i.RightBottom:o.x-=s.width,o.y-=s.height;break;case i.LeftBottom:o.y-=s.height;break;case i.Center:o.x-=s.width/2,o.y-=s.height/2}return o}static positionCenter(e,i,s){const o=t.positionLeftTop(e,i,s);return o.x+=s.width/2,o.y+=s.height/2,o}static resizedSize(t,e,i){const s={width:e.width,height:e.height};if(i){const i=[{width:t.width*(e.height/t.height),height:e.height},{width:e.width,height:t.height*(e.width/t.width)}].find(t=>t.width<=e.width&&t.height<=e.height);i&&(s.width=i.width,s.height=i.height)}return s}static resolvedValue(t){let e;return e=t&&"function"==typeof t?t():t,e}static isObject(t){return"object"==typeof t&&t.constructor===Object&&!Array.isArray(t)}static hasMethod(t,e){return!!t[e]&&"function"==typeof t[e]}static hash(e){return e.map(e=>{let i;return i=null==e?"undefined":t.isObject(e)?JSON.stringify(e):Array.isArray(e)?"["+t.hash(e)+"]":t.hasMethod(e,"hash")?e.hash():e.toString(),i}).join("|")}},o=class{ctx;element;relativeProps;defaultBorderColor="#000000";constructor(t,e,i){this.ctx=t,this.element=e,this.relativeProps=i??{}}relativePosition(){return this.relativeProps.position??{x:0,y:0}}relativeScale(){return this.relativeProps.scale??{x:1,y:1}}rotations(){return[...this.relativeProps.rotations??[],...this.element.rotations()]}relativeOpacity(){return this.relativeProps.opacity??1}scale(){const t=this.element.scale(),e=this.relativeScale();return{x:t.x*e.x,y:t.y*e.y}}degrees(){return this.element.degrees()??0}anchor(){return this.element.anchor()??this.defaultAnchor()}opacity(){return this.element.opacity()*this.relativeOpacity()}startDrawing(){this.ctx.save();const t=this.scale(),e=this.opacity(),i=this.degrees(),s=this.rotations(),o=this.element.shadow();1===t.x&&1===t.y||this.ctx.scale(t.x,t.y),e<1&&(this.ctx.globalAlpha=e),0!==i&&this.rotate({degrees:i,pivot:this.anchor()}),s.length>0&&s.forEach(t=>{0!==t.degrees&&this.rotate(t)}),o&&o.blur>0&&(this.ctx.shadowColor=o.color,this.ctx.shadowBlur=o.blur,this.ctx.shadowOffsetX=o.x,this.ctx.shadowOffsetY=o.y)}endDrawing(){this.ctx.restore()}rotate(t){const e=this.position(),i=t.pivot??this.defaultAnchor(),o={x:i.x+e.x,y:i.y+e.y};this.ctx.translate(o.x,o.y),this.ctx.rotate(s.degreesToRadians(t.degrees)),this.ctx.translate(-o.x,-o.y)}},h=class{_originalSize;_sizeRatio;_shapePosition;constructor(t,e){this.ctx=t,this.shape=e}draw(){this.prepare(),this.ctx.save(),this.rotateContext(),this.shape.isCloseShape()?this.makeClosedShape():this.makeOpenedShape(),this.ctx.restore()}prepare(){this._originalSize=s.shapeSize(this.shape.points()),this._sizeRatio=this.sizeRatio(),this._shapePosition=this.shapePosition()}rotateContext(){const t=this.shape.degrees();0!==t&&this.rotate({degrees:t}),this.shape.rotations().forEach(t=>{this.rotate(t)})}makeClosedShape(){const t=this.shape.points();t.length>2&&t.forEach((e,i)=>{const o=0===i,h=i===t.length-1,n=t[i+1]??t[0],r=s.distance(e,n),a=this.radius(r),l=s.positionBetweenPoints(e,n,a),d=s.positionBetweenPoints(e,n,r-a);if(o&&this.moveToPoint(l),this.lineToPoint(d),a>0){const e=t[i+2]??(h?t[1]:t[0]);this.quadraticCurveToPoint(n,e)}})}makeOpenedShape(){const t=this.shape.points();t.length>1&&t.forEach((e,i)=>{const o=0===i,h=i===t.length-1,n=i===t.length-2;if(!h){const h=t[i+1],r=h?s.distance(e,h):0,a=this.radius(r),l=o?e:s.positionBetweenPoints(e,h,a),d=n?h:s.positionBetweenPoints(e,h,r-a);o&&this.moveToPoint(l),this.lineToPoint(d),!n&&a>0&&this.quadraticCurveToPoint(h,t[i+2])}})}radius(t){const e=Math.min(this._sizeRatio.width,this._sizeRatio.height),i=Math.floor(this.shape.jointsRadius()/e),s=Math.floor(.55*t);return i>s?s:i}moveToPoint(t){this.ctx.moveTo(this._shapePosition.x+t.x*this._sizeRatio.width,this._shapePosition.y+t.y*this._sizeRatio.height)}lineToPoint(t){this.ctx.lineTo(this._shapePosition.x+t.x*this._sizeRatio.width,this._shapePosition.y+t.y*this._sizeRatio.height)}quadraticCurveToPoint(t,e){const i=s.distance(t,e),o=this.radius(i),h=s.positionBetweenPoints(t,e,o);this.ctx.quadraticCurveTo(this._shapePosition.x+t.x*this._sizeRatio.width,this._shapePosition.y+t.y*this._sizeRatio.height,this._shapePosition.x+h.x*this._sizeRatio.width,this._shapePosition.y+h.y*this._sizeRatio.height)}shapePosition(){return s.positionLeftTop(this.shape.position(),this.shape.positionPoint(),this.shapeSize())}shapeSize(){return this.shape.size()??this._originalSize}sizeRatio(){const t=this.shapeSize();return{width:t.width/s.valueNotLessThan(this._originalSize.width,1),height:t.height/s.valueNotLessThan(this._originalSize.height,1)}}rotate(t){const e=this.shapePosition(),i=t.pivot??this.defaultAnchor();i.x+=e.x,i.y+=e.y,this.ctx.translate(i.x,i.y),this.ctx.rotate(s.degreesToRadians(t.degrees)),this.ctx.translate(-i.x,-i.y)}defaultAnchor(){const t=this.shapeSize();return{x:t.width/2,y:t.height/2}}},n=function(t){return t.SolidColor="solid-color",t.LinearGradient="linear-gradient",t.RadialGradient="radial-gradient",t}({}),r=class{constructor(t,e,i){this.ctx=t,this.elementPosition=e,this.elementSize=i}mixed(t){let e="";if("string"==typeof t)e=t;else switch(t.type()){case n.SolidColor:e=t.color();break;case n.LinearGradient:e=this.linearGradient(t);break;case n.RadialGradient:e=this.radialGradient(t)}return e}linearGradient(t){const e=s.degreesToRadians(t.degrees()),i=this.elementPosition.x+this.elementSize.width/2,o=this.elementPosition.y+this.elementSize.height/2,h=Math.sqrt(this.elementSize.width**2+this.elementSize.height**2)/2,n=Math.cos(e)*h,r=Math.sin(e)*h,a={x:i-n,y:o-r},l={x:i+n,y:o+r},d=this.ctx.createLinearGradient(a.x,a.y,l.x,l.y);return this.appendGradientColors(d,t.colors()),d}radialGradient(t){const e=t.position()??{x:this.elementSize.width/2,y:this.elementSize.height/2},i={x:this.elementPosition.x+e.x,y:this.elementPosition.y+e.y},s=Math.sqrt(this.elementSize.width*this.elementSize.width+this.elementSize.height*this.elementSize.height)/2,o=this.ctx.createRadialGradient(i.x,i.y,0,i.x,i.y,s*t.radiusScale());return this.appendGradientColors(o,t.colors()),o}appendGradientColors(t,e){e.forEach(e=>t.addColorStop(e.offset(),e.color()))}},a=class extends o{draw(){this.startDrawing(),this.makeShape(),this.drawFill(),this.drawBorder(),this.endDrawing()}makeShape(){const t=this.element.borderWidth(),e=this.position(),i=this.element.size(),s=this.element.cutOutShapes(),o={x:e.x+t/2,y:e.y+t/2},n={width:i.width-t,height:i.height-t};this.ctx.beginPath(),s.length>0&&(this.ctx.translate(o.x,o.y),s.forEach(t=>{new h(this.ctx,t).draw()}),this.ctx.translate(-o.x,-o.y),o.x+=n.width,n.width*=-1),this.ctx.rect(o.x,o.y,n.width,n.height),this.ctx.closePath()}drawFill(){const t=this.element.fillColor();t&&(this.ctx.fillStyle=new r(this.ctx,this.position(),this.element.size()).mixed(t),this.ctx.fill())}drawBorder(){const t=this.element.borderWidth();t>0&&(this.ctx.strokeStyle=new r(this.ctx,this.position(),this.element.size()).mixed(this.element.borderColor()??this.defaultBorderColor),this.ctx.lineWidth=t,this.ctx.stroke())}position(){const t=this.element.positionLeftTop(),e=this.relativePosition();return{x:t.x+e.x,y:t.y+e.y}}defaultAnchor(){const t=this.element.size();return{x:t.width/2,y:t.height/2}}},l=class extends o{draw(){this.startDrawing(),this.drawFill(),this.drawBorder(),this.endDrawing()}drawFill(){const t=this.element.fillColor();if(t){const e=this.element.borderWidth(),i=this.position(),o=this.element.size();this.ctx.beginPath(),this.ctx.ellipse(i.x,i.y,s.valueNotLessThan(o.width/2-e,1),s.valueNotLessThan(o.height/2-e,1),0,0,2*Math.PI),this.ctx.closePath(),this.ctx.fillStyle=new r(this.ctx,this.element.positionLeftTop(),this.element.size()).mixed(t),this.ctx.fill()}}drawBorder(){const t=this.element.borderWidth();if(t>0){const e=this.position(),i=this.element.size();this.ctx.beginPath(),this.ctx.ellipse(e.x,e.y,s.valueNotLessThan(i.width/2-t/2,1),s.valueNotLessThan(i.height/2-t/2,1),0,0,2*Math.PI),this.ctx.closePath(),this.ctx.strokeStyle=new r(this.ctx,this.element.positionLeftTop(),this.element.size()).mixed(this.element.borderColor()??this.defaultBorderColor),this.ctx.lineWidth=t,this.ctx.stroke()}}position(){const t=s.positionCenter(this.element.position(),this.element.positionPoint(),this.element.boundingClientSize()),e=this.relativePosition();return{x:t.x+e.x,y:t.y+e.y}}defaultAnchor(){return{x:0,y:0}}},d=class extends o{draw(){this.prepare(),this.startDrawing(),this.drawStroke(),this.drawFill(),this.endDrawing()}prepare(){this.ctx.font=this.element.font(),this.ctx.textBaseline="alphabetic"}drawFill(){const t=this.element.fillColor();if(t){const e=this.element.textBox(),i=this.position();this.ctx.fillStyle=new r(this.ctx,this.position(),e.size).mixed(t),e.lines.forEach(t=>{this.ctx.fillText(t.text,i.x+t.position.x,Math.round(i.y+t.position.y+.75*t.size.height))})}}drawStroke(){const t=this.element.strokeWidth();if(t>0){const e=this.element.textBox(),i=this.position(),s=this.element.fillColor();this.ctx.strokeStyle=new r(this.ctx,this.position(),e.size).mixed(this.element.strokeColor()??this.defaultBorderColor),this.ctx.lineWidth=s?2*t:t,e.lines.forEach(t=>{this.ctx.strokeText(t.text,i.x+t.position.x,Math.round(i.y+t.position.y+.75*t.size.height))})}}position(){const t=this.element.positionLeftTop(),e=this.relativePosition();return{x:t.x+e.x,y:t.y+e.y}}defaultAnchor(){const t=this.element.textBox();return{x:t.size.width/2,y:t.size.height/2}}},c=function(t){return t.Fill="fill",t.Cover="cover",t}({}),u=class extends o{draw(){this.startDrawing(),this.drawBorder(),this.drawImage(),this.endDrawing()}drawImage(){const t=this.element.image();if(t){const e=this.sourceDimensions(),i=this.flippedDimensions(this.elementDimensions());this.ctx.drawImage(t,e.position.x,e.position.y,e.size.width,e.size.height,i.position.x,i.position.y,i.size.width,i.size.height)}}drawBorder(){const t=this.element.borderWidth(),e=new r(this.ctx,this.position(),this.element.size()).mixed(this.element.borderColor()??this.defaultBorderColor),i=this.elementDimensions();this.ctx.strokeStyle=e,this.ctx.lineWidth=2*t,this.isRadiusSet()?(this.makeShape(i),this.ctx.lineJoin="round",this.ctx.fillStyle="#ffffff",this.ctx.fill(),t>0&&(this.ctx.strokeStyle=e,this.ctx.lineWidth=2*t,this.ctx.stroke()),this.ctx.clip()):t>0&&(this.ctx.strokeStyle=e,this.ctx.lineWidth=2*t,this.ctx.strokeRect(i.position.x,i.position.y,i.size.width,i.size.height))}sourceDimensions(){const t=this.element.image(),e=this.element.cropArea(),i={position:{x:0,y:0},size:e.size??{width:t.width,height:t.height}};switch(this.element.fit()){case c.Fill:e.position&&(i.position.x=e.position.x,i.position.y=e.position.y);break;case c.Cover:{const{size:o}=this.elementDimensions();o.width/o.height<i.size.width/i.size.height?i.size.width=i.size.height/(o.height/o.width):i.size.height=i.size.width/(o.width/o.height),e.position?(i.position.x=e.position.x,i.position.y=e.position.y):(i.position.x=s.relativePositionValue("50%",i.size.width,t.width),i.position.y=s.relativePositionValue("50%",i.size.height,t.height));break}}return i}elementDimensions(){const t=this.element.borderWidth(),e=this.position(),i=this.element.size();return{position:{x:e.x+t,y:e.y+t},size:{width:i.width-2*t,height:i.height-2*t}}}flippedDimensions(t){const e=this.element.flipX(),i=this.element.flipY();if(e||i){let s=1,o=1;e&&(s=-1,t.position.x=-(+t.position.x+t.size.width)),i&&(o=-1,t.position.y=-(+t.position.y+t.size.height)),this.ctx.scale(s,o)}return t}makeShape(t){const e=this.borderRadius();this.ctx.lineJoin="round",this.ctx.beginPath(),this.ctx.moveTo(t.position.x+e.topLeft,t.position.y),this.ctx.lineTo(t.position.x+t.size.width-e.topRight,t.position.y),this.ctx.quadraticCurveTo(t.position.x+t.size.width,t.position.y,t.position.x+t.size.width,t.position.y+e.topRight),this.ctx.lineTo(t.position.x+t.size.width,t.position.y+t.size.height-e.bottomRight),this.ctx.quadraticCurveTo(t.position.x+t.size.width,t.position.y+t.size.height,t.position.x+t.size.width-e.bottomRight,t.position.y+t.size.height),this.ctx.lineTo(t.position.x+e.bottomLeft,t.position.y+t.size.height),this.ctx.quadraticCurveTo(t.position.x,t.position.y+t.size.height,t.position.x,t.position.y+t.size.height-e.bottomLeft),this.ctx.lineTo(t.position.x,t.position.y+e.topLeft),this.ctx.quadraticCurveTo(t.position.x,t.position.y,t.position.x+e.topLeft,t.position.y),this.ctx.closePath()}borderRadius(){const t=this.element.borderRadius();if(this.isRadiusSet()){const{size:e}=this.elementDimensions();Object.keys(t).forEach(i=>{t[i]>e.width/2&&(t[i]=Math.floor(e.width/2)),t[i]>e.height/2&&(t[i]=Math.floor(e.height/2))})}return t}isRadiusSet(){const t=this.element.borderRadius();return t.topLeft>0||t.topRight>0||t.bottomLeft>0||t.bottomRight>0}position(){const t=this.element.positionLeftTop(),e=this.relativePosition();return{x:t.x+e.x,y:t.y+e.y}}defaultAnchor(){const t=this.element.size();return{x:t.width/2,y:t.height/2}}},p=class{_points=[];_isCloseShape;_position={x:0,y:0};_positionPoint=i.LeftTop;_size;_jointsRadius=0;_degrees=0;_anchor;_rotations=[];constructor(t,e=!0){this._points=t,this._isCloseShape=e}hash(){return s.hash([this.points(),this.isCloseShape(),this.position(),this.positionPoint(),this.size(),this.jointsRadius(),this.rotations(),this.degrees(),this.anchor()])}points(){return this._points}isCloseShape(){return this._isCloseShape}position(){return this._position}positionPoint(){return this._positionPoint}size(){return this._size}jointsRadius(){return this._jointsRadius}degrees(){return this._degrees}anchor(){return this._anchor}rotations(){return this._rotations}setPosition(t,e){return this._position=t,e&&(this._positionPoint=e),this}setSize(t){return this._size=t,this}setJointsRadius(t){return this._jointsRadius=t,this}setDegrees(t,e){return this._degrees=t,this._anchor=e,this}setRotations(t){return this._rotations=t,this}},x=class extends o{draw(){this.startDrawing(),this.makeShape(),this.drawBorder(),this.drawFill(),this.endDrawing()}makeShape(){const t=this.element.shapePoints();if(t.length>2){const e=new p(t).setSize(this.shapeSize()).setPosition(this.shapePosition()).setJointsRadius(this.element.borderRadius());this.ctx.beginPath(),new h(this.ctx,e).draw(),this.ctx.closePath()}}drawFill(){const t=this.element.fillColor();t&&(this.ctx.fillStyle=new r(this.ctx,this.position(),this.shapeSize()).mixed(t),this.ctx.fill())}drawBorder(){const t=this.element.borderWidth();if(t>0){const e=new r(this.ctx,this.position(),this.element.size()).mixed(this.element.borderColor()??this.defaultBorderColor),i=this.element.fillColor();this.element.borderRadius()>0&&(this.ctx.lineJoin="round"),this.ctx.strokeStyle=e,this.ctx.lineWidth=i?2*t:t,this.ctx.stroke()}}shapePosition(){const t=this.position(),e=this.element.borderWidth();return{x:t.x+e,y:t.y+e}}shapeSize(){const t=this.element.size(),e=this.element.borderWidth();return{width:t.width-2*e,height:t.height-2*e}}position(){const t=this.element.positionLeftTop(),e=this.relativePosition();return{x:t.x+e.x,y:t.y+e.y}}defaultAnchor(){const t=this.element.size();return{x:t.width/2,y:t.height/2}}},g=class extends o{draw(){this.startDrawing(),this.makeShape(),this.drawStroke(),this.endDrawing()}makeShape(){this.ctx.beginPath();const t=new p(this.element.shapePoints(),!1).setSize(this.shapeSize()).setPosition(this.shapePosition()).setJointsRadius(this.element.jointsRadius());new h(this.ctx,t).draw()}drawStroke(){const t=new r(this.ctx,this.position(),this.element.boundingClientSize()).mixed(this.element.color()??this.defaultBorderColor);this.ctx.lineCap=this.element.lineCap(),this.ctx.strokeStyle=t,this.ctx.lineWidth=this.element.calculatedThickness(),this.ctx.stroke()}shapeSize(){const t=this.element.boundingClientSize(),e=this.element.calculatedThickness();return{width:t.width-e,height:t.height-e/2}}shapePosition(){const t=this.position(),e=this.element.calculatedThickness();return{x:t.x+e/2,y:t.y}}position(){const t=this.element.positionLeftTop(),e=this.relativePosition();return{x:t.x+e.x,y:t.y+e.y}}defaultAnchor(){const t=this.shapeSize();return{x:t.width/2,y:t.height/2}}},m=class{},f=class extends m{_color;constructor(t,e){super(),this.setColor(t,e)}type(){return n.SolidColor}color(){return this._color}hash(){return s.hash([this.color()])}setColor(t,e){const i=9===t.length?t.slice(-2):void 0,s=void 0!==e?this.alphaToHex(e):i??"ff";return this._color=t.slice(0,7)+s,this}alphaToHex(t){let e=Math.round(255*t).toString(16);return 1===e.length&&(e="0"+e),e}},_=class extends m{_colors;constructor(t){super(),this._colors=t}colors(){return this._colors}hash(){return s.hash([this.colors()])}},w=class{_position={x:0,y:0};_positionPoint;_scale={x:1,y:1};_opacity=1;_rotations=[];_degrees=0;_anchor;_shadow;hash(){return s.hash([this.position(),this.positionPoint(),this.scale(),this.opacity(),this.rotations(),this.degrees(),this.anchor(),this.shadow()])}position(){return s.resolvedValue(this._position)}positionLeftTop(){return s.positionLeftTop(this.position(),this.positionPoint(),this.boundingClientSize())}positionPoint(){return s.resolvedValue(this._positionPoint)??i.LeftTop}scale(){return s.resolvedValue(this._scale)}opacity(){return s.resolvedValue(this._opacity)}rotations(){return s.resolvedValue(this._rotations)}degrees(){return s.resolvedValue(this._degrees)}anchor(){return this._anchor?s.resolvedValue(this._anchor):void 0}shadow(){return this._shadow?s.resolvedValue(this._shadow):void 0}setPosition(t,e){return this._position=t,e&&(this._positionPoint=e),this}setScale(t){return this._scale=t,this}setOpacity(t){return this._opacity=t,this}setDegrees(t,e){return this._degrees=t,this._anchor=e,this}setRotations(t){return this._rotations=t,this}setShadow(t){return this._shadow=t,this}},y=class extends w{_size={width:1,height:1};_borderColor;_borderWidth=0;hash(){return s.hash([super.hash(),this.size(),this.borderColor(),this.borderWidth()])}size(){return s.resolvedValue(this._size)}borderColor(){return this._borderColor?s.resolvedValue(this._borderColor):void 0}borderWidth(){return s.resolvedValue(this._borderWidth)}setSize(t){return this._size=t,this}setBorder(t,e){return this._borderWidth=t,this._borderColor=e,this}},z=function(t){return t.Round="round",t.Square="square",t}({}),v=function(t){return t.Normal="normal",t.Bold="bold",t}({}),S=function(t){return t.Left="left",t.Center="center",t.Right="right",t}({}),b=function(t){return t.Top="top",t.Center="center",t.Bottom="bottom",t}({}),C=class{element;canvas;ctx;lastTextBox;lastTextBoxHash="";constructor(t){this.element=t,this.canvas=document.createElement("canvas"),this.ctx=this.canvas.getContext("2d")}textBox(){return this.elementChanged()&&(this.lastTextBox=void 0),this.lastTextBox||(this.lastTextBox=this.createTextBox()),this.lastTextBox}createTextBox(){const t={text:this.element.text(),lines:[],size:{width:1,height:1},position:{x:0,y:0}};return t.lines=this.textLines(),t.size=this.textBoxSize(t.lines),t.position=this.textBoxPosition(t.lines),t}textLines(){const t=this.element.bounds(),e=this.element.padding(),i=t?{width:t.width-e.left-e.right,height:t.height-e.top-e.bottom}:void 0,s=this.splitText().map(t=>({text:t,size:{width:this.textWidth(t),height:this.element.lineHeight()},position:{x:0,y:0}})).map((t,e,i)=>{const s=i[e-1];return t.position={x:0,y:s?s.position.y+s.size.height:0},t});return(void 0!==i?this.alignedLines(s,i):s).map(t=>(t.position.x+=e.left,t.position.y+=e.top,t))}alignedLines(t,e){const i=this.element.horizontalAlign(),s=this.element.verticalAlign(),o=t.reduce((t,e)=>t+e.size.height,0);return t.map(t=>(i===S.Center&&(t.position.x+=Math.round((e.width-t.size.width)/2)),i===S.Right&&(t.position.x+=e.width-t.size.width),s===b.Center&&(t.position.y+=Math.round((e.height-o)/2)),s===b.Bottom&&(t.position.y+=e.height-o),t))}textBoxSize(t){const e=this.element.padding(),i=this.element.bounds()??{width:1,height:1},s=Math.max(...t.map(t=>t.size.width));return{width:Math.max(s+e.left+e.right,i.width),height:Math.max(this.element.lineHeight()*t.length+e.top+e.bottom,i.height)}}textBoxPosition(t){const e=this.element.padding(),i=Math.min(...t.map(t=>t.position.x)),s=Math.min(...t.map(t=>t.position.y));return{x:i-e.left,y:s-e.top}}splitText(){const t=this.element.text().replaceAll("<BR>","<br>").split("<br>"),e=this.element.padding(),i=(this.element.bounds()??{width:999999,height:999999}).width-(e.left+e.right);let s=[];return t.forEach(t=>{t=t.trim();const e=this.textWidth(t);if(e>i){const o=Math.floor(i/(e/t.length))-3,h=t.split(" ");let n="";h.forEach((t,e)=>{n.length+t.length>o&&(s.push(n.trim()),n=""),n+=t+" ",e===h.length-1&&s.push(n.trim())}),s=s.map(t=>t.trim())}else s.push(t)}),s}textWidth(t){return this.ctx.font=this.element.font(),Math.ceil(this.ctx.measureText(t).width+this.element.strokeWidth())}elementChanged(){const t=[this.element.text(),this.element.bounds(),this.element.horizontalAlign(),this.element.verticalAlign(),this.element.padding(),this.element.lineHeight(),this.element.font(),this.element.strokeWidth()].join("|"),e=this.lastTextBoxHash!==t;return this.lastTextBoxHash=t,e}};t.Canvas=class{_canvas;_ctx;constructor(t){this._canvas=t??document.createElement("canvas"),this._ctx=this._canvas.getContext("2d")}nativeElement(){return this._canvas}ctx(){return this._ctx}size(){return{width:this._canvas.width,height:this._canvas.height}}setSize(t){this._canvas.width=t.width,this._canvas.height=t.height}draw(t,i){switch(t.type()){case e.Rectangle:new a(this.ctx(),t,i).draw();break;case e.Ellipse:new l(this.ctx(),t,i).draw();break;case e.Polygon:new x(this.ctx(),t,i).draw();break;case e.Line:new g(this.ctx(),t,i).draw();break;case e.Text:new d(this.ctx(),t,i).draw();break;case e.Image:new u(this.ctx(),t,i).draw()}}clear(){this.ctx().clearRect(0,0,this._canvas.width,this._canvas.height)}},t.ColorType=n,t.EllipseElement=class extends y{_fillColor;type(){return e.Ellipse}hash(){return s.hash([super.hash(),this.fillColor()])}fillColor(){return this._fillColor?s.resolvedValue(this._fillColor):void 0}boundingClientSize(){return this.size()}setFillColor(t){return this._fillColor=t,this}},t.FontWeight=v,t.GradientColor=class extends f{_offset;constructor(t,e,i=1){super(e,i),this.setOffset(t)}offset(){return this._offset}hash(){return s.hash([super.hash(),this.offset()])}setOffset(t){return this._offset=s.valueInRange(t,{min:0,max:1}),this}},t.HorizontalAlign=S,t.ImageElement=class extends y{_image;_fit=c.Fill;_borderRadius={topLeftOrDefault:0};_flipX;_flipY;_cropArea;type(){return e.Image}hash(){return s.hash([super.hash(),this.image()?.id,this.fit(),this.borderRadius(),this.flipX(),this.flipY(),this.cropArea()])}image(){return this._image?s.resolvedValue(this._image):void 0}fit(){return s.resolvedValue(this._fit)}borderRadius(){let t;const e=s.resolvedValue(this._borderRadius.topLeftOrDefault),i=this._borderRadius.topRight?s.resolvedValue(this._borderRadius.topRight):void 0,o=this._borderRadius.bottomRight?s.resolvedValue(this._borderRadius.bottomRight):void 0,h=this._borderRadius.bottomLeft?s.resolvedValue(this._borderRadius.bottomLeft):void 0;return t=void 0===i&&void 0===o&&void 0===h?{topLeft:e,topRight:e,bottomRight:e,bottomLeft:e}:{topLeft:e,topRight:i??0,bottomRight:o??0,bottomLeft:h??0},t}flipX(){return s.resolvedValue(this._flipX)??!1}flipY(){return s.resolvedValue(this._flipY)??!1}cropArea(){return s.resolvedValue(this._cropArea)??{}}boundingClientSize(){return this.size()}setImage(t){return this._image=t,this}setFit(t){return this._fit=t,this}setBorderRadius(t,e,i,s){return this._borderRadius={topLeftOrDefault:t,topRight:e,bottomRight:i,bottomLeft:s},this}setFlip(t){return this._flipX=t.horizontal??!1,this._flipY=t.vertical??!1,this}setCropArea(t){return this._cropArea=t,this}},t.ImageFit=c,t.LineCap=z,t.LineElement=class extends w{_shapePoints=[];_size;_keepRatio;_thickness=1;_jointsRadius=0;_lineCap=z.Square;_color;type(){return e.Line}hash(){return s.hash([super.hash(),this.shapePoints(),this.size(),this.keepRatio(),this.thickness(),this.jointsRadius(),this.lineCap(),this.color()])}shapePoints(){return s.resolvedValue(this._shapePoints)}size(){return this._size?s.resolvedValue(this._size):void 0}keepRatio(){return s.resolvedValue(this._keepRatio)??!1}thickness(){return s.resolvedValue(this._thickness)}calculatedThickness(){const t=this.size();let e=this.thickness();if(t){const i=s.shapeSize(this.shapePoints()),o=s.resizedSize(i,t,this.keepRatio()),h=o.width/s.valueNotLessThan(i.width,1),n=o.height/s.valueNotLessThan(i.height,1);e=s.valueNotLessThan(e*Math.min(h,n),1)}return e}jointsRadius(){return s.resolvedValue(this._jointsRadius)}lineCap(){return s.resolvedValue(this._lineCap)}color(){return this._color?s.resolvedValue(this._color):void 0}boundingClientSize(){let t=this.size();const e=this.calculatedThickness(),i=s.shapeSize(this.shapePoints());if(t){const o=s.resizedSize(i,t,this.keepRatio());t={width:o.width,height:o.height+e/2}}else t={width:i.width,height:s.valueNotLessThan(i.height+e/2,0)};return t}setShapePoints(t){return this._shapePoints=t,this}setSize(t,e){return this._size=t,e&&(this._keepRatio=e),this}setThickness(t){return this._thickness=t,this}setJointsRadius(t){return this._jointsRadius=t,this}setLineCap(t){return this._lineCap=t,this}setColor(t){return this._color=t,this}},t.LinearGradient=class extends _{_degrees=0;type(){return n.LinearGradient}degrees(){return this._degrees}setDegrees(t){return this._degrees=t,this}hash(){return s.hash([super.hash(),this.degrees()])}},t.PolygonElement=class extends y{_shapePoints=[];_borderRadius=0;_fillColor;type(){return e.Polygon}hash(){return s.hash([super.hash(),this.shapePoints(),this.borderRadius(),this.fillColor()])}shapePoints(){return s.resolvedValue(this._shapePoints)}borderRadius(){return s.resolvedValue(this._borderRadius)}fillColor(){return this._fillColor?s.resolvedValue(this._fillColor):void 0}boundingClientSize(){return this.size()}setShapePoints(t){return this._shapePoints=t,this}setBorderRadius(t){return this._borderRadius=t,this}setFillColor(t){return this._fillColor=t,this}},t.PositionPoint=i,t.RadialGradient=class extends _{_position;_radiusScale;type(){return n.RadialGradient}position(){return this._position}radiusScale(){return this._radiusScale??1}setPosition(t){return this._position=t,this}setRadiusScale(t){return this._radiusScale=t,this}hash(){return s.hash([super.hash(),this.position(),this.radiusScale()])}},t.RectangleElement=class extends y{_fillColor;_cutOutShapes=[];type(){return e.Rectangle}hash(){return s.hash([super.hash(),this.fillColor(),this.cutOutShapes()])}fillColor(){return this._fillColor?s.resolvedValue(this._fillColor):void 0}cutOutShapes(){return s.resolvedValue(this._cutOutShapes)}boundingClientSize(){return this.size()}setFillColor(t){return this._fillColor=t,this}setCutOutShapes(t){return this._cutOutShapes=t,this}},t.Shape=p,t.SolidColor=f,t.TextElement=class extends w{_text="";_bounds;_fontSize=12;_fontFamily="Tahoma";_fontWeight=v.Normal;_lineHeight;_fillColor;_strokeColor;_strokeWidth=0;_horizontalAlign=S.Left;_verticalAlign=b.Top;_padding={topOrVerticalOrDefault:0};_textSplitter=new C(this);type(){return e.Text}hash(){return s.hash([super.hash(),this.text(),this.bounds(),this.font(),this.lineHeight(),this.fillColor(),this.strokeColor(),this.strokeWidth(),this.horizontalAlign(),this.verticalAlign(),this.padding()])}text(){return s.resolvedValue(this._text).toString()}bounds(){return this._bounds?s.resolvedValue(this._bounds):void 0}fontSize(){return s.resolvedValue(this._fontSize)}fontFamily(){return s.resolvedValue(this._fontFamily)}fontWeight(){return s.resolvedValue(this._fontWeight)}lineHeight(){return s.resolvedValue(this._lineHeight??Math.round(1.2*this.fontSize()))}fillColor(){return this._fillColor?s.resolvedValue(this._fillColor):void 0}strokeColor(){return this._strokeColor?s.resolvedValue(this._strokeColor):void 0}strokeWidth(){return s.resolvedValue(this._strokeWidth)}horizontalAlign(){return s.resolvedValue(this._horizontalAlign)}verticalAlign(){return s.resolvedValue(this._verticalAlign)}padding(){let t;const e=s.resolvedValue(this._padding.topOrVerticalOrDefault),i=this._padding.rightOrHorizontal?s.resolvedValue(this._padding.rightOrHorizontal):void 0,o=this._padding.bottom?s.resolvedValue(this._padding.bottom):void 0,h=this._padding.left?s.resolvedValue(this._padding.left):void 0;return t=void 0===i?{top:e,right:e,bottom:e,left:e}:void 0===o&&void 0===h?{top:e,right:i,bottom:e,left:i}:{top:e,right:i,bottom:o??0,left:h??0},t}font(){const t=[this.fontSize()+"px",this.fontFamily()],e=this.fontWeight();return e&&t.unshift(e),t.join(" ")}textBox(){return this._textSplitter.textBox()}boundingClientSize(){return this.textBox().size}setText(t){return this._text=t,this}setBounds(t){return this._bounds=t,this}setFontSize(t){return this._fontSize=t,this}setFontFamily(t){return this._fontFamily=t,this}setFontWeight(t){return this._fontWeight=t,this}setLineHeight(t){return this._lineHeight=t,this}setFillColor(t){return this._fillColor=t,this}setStroke(t,e){return this._strokeWidth=t,this._strokeColor=e,this}setHorizontalAlign(t){return this._horizontalAlign=t,this}setVerticalAlign(t){return this._verticalAlign=t,this}setPadding(t,e,i,s){return this._padding={topOrVerticalOrDefault:t,rightOrHorizontal:e,bottom:i,left:s},this}},t.VerticalAlign=b});

dist/interfaces/border-radius.interface.d.ts

@@ -1,2 +0,2 @@
-export interface BorderRadiusInterface {
+export interface BorderRadius {
     topRight: number;
@@ -3,0 +3,0 @@ topLeft: number;

dist/interfaces/dimensions.interface.d.ts

@@ -1,6 +0,6 @@
-import { SizeInterface } from './size.interface';
-import { PositionInterface } from './position.interface';
-export interface DimensionsInterface {
-    position: PositionInterface;
-    size: SizeInterface;
+import { Size } from './size.interface';
+import { Position } from './position.interface';
+export interface Dimensions {
+    position: Position;
+    size: Size;
 }

dist/interfaces/padding.interface.d.ts

@@ -1,2 +0,2 @@
-export interface PaddingInterface {
+export interface Padding {
     top: number;
@@ -3,0 +3,0 @@ right: number;

dist/interfaces/position.interface.d.ts

@@ -1,4 +0,8 @@
-export interface PositionInterface {
+export interface Position {
     x: number;
     y: number;
 }
+/**
+ * @deprecated This interface is deprecated. Use `Position` instead.
+ */
+export type PositionInterface = Position;

dist/interfaces/shadow.interface.d.ts

@@ -1,2 +0,2 @@
-export interface ShadowInterface {
+export interface Shadow {
     color: string;
@@ -3,0 +3,0 @@ blur: number;

dist/interfaces/size.interface.d.ts

@@ -1,4 +0,8 @@
-export interface SizeInterface {
+export interface Size {
     width: number;
     height: number;
 }
+/**
+ * @deprecated This interface is deprecated. Use `Size` instead.
+ */
+export type SizeInterface = Size;

dist/libraries/artists/element-artist.d.ts

 import { Element } from '../elements/element';
-import { PositionInterface } from '../../interfaces/position.interface';
+import { Position } from '../../interfaces/position.interface';
+import { RelativeProps } from '../../interfaces/relative-props.interface';
+import { Scale } from '../../interfaces/scale.interface';
+import { Rotation } from '../../interfaces/rotation.interface';
 export declare abstract class ElementArtist<AnyCanvasElement extends Element> {
     protected readonly ctx: CanvasRenderingContext2D;
     protected readonly element: AnyCanvasElement;
+    protected readonly relativeProps: RelativeProps;
     protected readonly defaultBorderColor: string;
-    constructor(ctx: CanvasRenderingContext2D, element: AnyCanvasElement);
+    constructor(ctx: CanvasRenderingContext2D, element: AnyCanvasElement, relativeProps?: RelativeProps);
     abstract draw(): void;
-    protected abstract anchor(): PositionInterface;
-    protected abstract position(): PositionInterface;
+    protected abstract defaultAnchor(): Position;
+    protected abstract position(): Position;
+    protected relativePosition(): Position;
+    protected relativeScale(): Scale;
+    protected rotations(): Rotation[];
+    protected relativeOpacity(): number;
+    protected scale(): Scale;
+    /** @deprecated Use Rotations instead */
+    protected degrees(): number;
+    /** @deprecated Use Rotations instead */
+    protected anchor(): Position;
+    protected opacity(): number;
     protected startDrawing(): void;
     protected endDrawing(): void;
+    private rotate;
 }

dist/libraries/artists/ellipse-artist.d.ts

 import { ElementArtist } from './element-artist';
-import { PositionInterface } from '../../interfaces/position.interface';
+import { Position } from '../../interfaces/position.interface';
 import { EllipseElement } from '../elements/ellipse-element';
@@ -8,4 +8,4 @@ export declare class EllipseArtist extends ElementArtist<EllipseElement> {
     private drawBorder;
-    protected position(): PositionInterface;
-    protected anchor(): PositionInterface;
+    protected position(): Position;
+    protected defaultAnchor(): Position;
 }

dist/libraries/artists/image-artist.d.ts

 import { ElementArtist } from './element-artist';
-import { PositionInterface } from '../../interfaces/position.interface';
+import { Position } from '../../interfaces/position.interface';
 import { ImageElement } from '../elements/image-element';
@@ -14,4 +14,4 @@ export declare class ImageArtist extends ElementArtist<ImageElement> {
     private isRadiusSet;
-    protected position(): PositionInterface;
-    protected anchor(): PositionInterface;
+    protected position(): Position;
+    protected defaultAnchor(): Position;
 }

dist/libraries/artists/line-artist.d.ts

 import { ElementArtist } from './element-artist';
-import { PositionInterface } from '../../interfaces/position.interface';
+import { Position } from '../../interfaces/position.interface';
 import { LineElement } from '../elements/line-element';
@@ -8,8 +8,6 @@ export declare class LineArtist extends ElementArtist<LineElement> {
     private drawStroke;
-    private thickness;
     private shapeSize;
     private shapePosition;
-    private size;
-    protected position(): PositionInterface;
-    protected anchor(): PositionInterface;
+    protected position(): Position;
+    protected defaultAnchor(): Position;
 }

dist/libraries/artists/polygon-artist.d.ts

 import { ElementArtist } from './element-artist';
-import { PositionInterface } from '../../interfaces/position.interface';
+import { Position } from '../../interfaces/position.interface';
 import { PolygonElement } from '../elements/polygon-element';
@@ -11,4 +11,4 @@ export declare class PolygonArtist extends ElementArtist<PolygonElement> {
     private shapeSize;
-    protected position(): PositionInterface;
-    protected anchor(): PositionInterface;
+    protected position(): Position;
+    protected defaultAnchor(): Position;
 }

dist/libraries/artists/rectangle-artist.d.ts

 import { ElementArtist } from './element-artist';
-import { PositionInterface } from '../../interfaces/position.interface';
+import { Position } from '../../interfaces/position.interface';
 import { RectangleElement } from '../elements/rectangle-element';
@@ -9,4 +9,4 @@ export declare class RectangleArtist extends ElementArtist<RectangleElement> {
     private drawBorder;
-    protected position(): PositionInterface;
-    protected anchor(): PositionInterface;
+    protected position(): Position;
+    protected defaultAnchor(): Position;
 }

dist/libraries/artists/text-artist.d.ts

 import { ElementArtist } from './element-artist';
 import { TextElement } from '../elements/text-element';
-import { PositionInterface } from '../../interfaces/position.interface';
+import { Position } from '../../interfaces/position.interface';
 export declare class TextArtist extends ElementArtist<TextElement> {
-    private textBox;
     draw(): void;
@@ -10,4 +9,4 @@ private prepare;
     private drawStroke;
-    protected position(): PositionInterface;
-    protected anchor(): PositionInterface;
+    protected position(): Position;
+    protected defaultAnchor(): Position;
 }

dist/libraries/canvas.d.ts

@@ -1,3 +0,4 @@
-import { SizeInterface } from '../interfaces/size.interface';
+import { Size } from '../interfaces/size.interface';
 import { Element } from './elements/element';
+import { RelativeProps } from '../interfaces/relative-props.interface';
 export declare class Canvas {
@@ -8,6 +9,7 @@ private readonly _canvas;
     nativeElement(): HTMLCanvasElement;
-    size(): SizeInterface;
-    setSize(size: SizeInterface): void;
-    draw(element: Element): void;
+    ctx(): CanvasRenderingContext2D;
+    size(): Size;
+    setSize(size: Size): void;
+    draw(element: Element, relativeProps?: RelativeProps): void;
     clear(): void;
 }

dist/libraries/colors/color-mixer.d.ts

 import { Color } from './color';
-import { SizeInterface } from '../../interfaces/size.interface';
-import { PositionInterface } from '../../interfaces/position.interface';
+import { Size } from '../../interfaces/size.interface';
+import { Position } from '../../interfaces/position.interface';
 export declare class ColorMixer {
@@ -8,3 +8,3 @@ private ctx;
     private elementSize;
-    constructor(ctx: CanvasRenderingContext2D, elementPosition: PositionInterface, elementSize: SizeInterface);
+    constructor(ctx: CanvasRenderingContext2D, elementPosition: Position, elementSize: Size);
     mixed(color: string | Color): string | CanvasGradient;
@@ -11,0 +11,0 @@ private linearGradient;

dist/libraries/colors/color.d.ts

 import { ColorType } from '../../enums/color-type';
 export declare abstract class Color {
     abstract type(): ColorType;
+    abstract hash(): string;
 }

dist/libraries/colors/gradient-color.d.ts

 import { SolidColor } from './solid-color';
 export declare class GradientColor extends SolidColor {
-    private readonly _offset;
+    private _offset;
     constructor(offset: number, hexColor: string, opacity?: number);
     offset(): number;
+    hash(): string;
+    setOffset(offset: number): this;
 }

dist/libraries/colors/gradient.d.ts

@@ -7,2 +7,3 @@ import { Color } from './color';
     colors(): GradientColor[];
+    hash(): string;
 }

dist/libraries/colors/linear-gradient.d.ts

@@ -8,2 +8,3 @@ import { ColorType } from '../../enums/color-type';
     setDegrees(value: number): this;
+    hash(): string;
 }

dist/libraries/colors/radial-gradient.d.ts

 import { ColorType } from '../../enums/color-type';
 import { Gradient } from './gradient';
-import { PositionInterface } from '../../interfaces/position.interface';
+import { Position } from '../../interfaces/position.interface';
 export declare class RadialGradient extends Gradient {
     private _position;
+    private _radiusScale;
     type(): ColorType;
-    position(): PositionInterface | undefined;
-    setPosition(value: PositionInterface): this;
+    position(): Position | undefined;
+    radiusScale(): number;
+    setPosition(value: Position): this;
+    setRadiusScale(value: number): this;
+    hash(): string;
 }

dist/libraries/colors/solid-color.d.ts

 import { ColorType } from '../../enums/color-type';
 import { Color } from './color';
 export declare class SolidColor extends Color {
-    private readonly _color;
+    private _color;
     constructor(hexColor: string, opacity?: number);
     type(): ColorType;
     color(): string;
+    hash(): string;
+    setColor(hexColor: string, opacity?: number): this;
     private alphaToHex;
 }

dist/libraries/elements/element.d.ts

@@ -1,9 +0,15 @@
-import { PositionInterface } from '../../interfaces/position.interface';
+import { Position } from '../../interfaces/position.interface';
 import { ElementType } from '../../enums/element-type';
-import { ShadowInterface } from '../../interfaces/shadow.interface';
+import { Shadow } from '../../interfaces/shadow.interface';
 import { PositionPoint } from '../../enums/position-point';
+import { Size } from '../../interfaces/size.interface';
+import { ResolvableAttribute } from '../../types';
+import { Scale } from '../../interfaces/scale.interface';
+import { Rotation } from '../../interfaces/rotation.interface';
 export declare abstract class Element {
     private _position;
     private _positionPoint;
+    private _scale;
     private _opacity;
+    private _rotations;
     private _degrees;
@@ -13,12 +19,22 @@ private _anchor?;
     abstract type(): ElementType;
-    position(): PositionInterface;
+    hash(): string;
+    abstract boundingClientSize(): Size;
+    position(): Position;
+    positionLeftTop(): Position;
     positionPoint(): PositionPoint;
+    scale(): Scale;
     opacity(): number;
+    rotations(): Rotation[];
+    /** @deprecated Use Rotations instead */
     degrees(): number;
-    anchor(): PositionInterface | undefined;
-    shadow(): ShadowInterface | undefined;
-    setPosition(position: PositionInterface, point?: PositionPoint): this;
-    setOpacity(value: number): this;
-    setDegrees(degrees: number, anchor?: PositionInterface): this;
-    setShadow(color: string, blur: number, x?: number, y?: number): this;
+    /** @deprecated Use Rotations instead */
+    anchor(): Position | undefined;
+    shadow(): Shadow | undefined;
+    setPosition(position: ResolvableAttribute<Position>, point?: ResolvableAttribute<PositionPoint | undefined>): this;
+    setScale(value: ResolvableAttribute<Scale>): this;
+    setOpacity(value: ResolvableAttribute<number>): this;
+    /** @deprecated Use Rotations instead */
+    setDegrees(degrees: ResolvableAttribute<number>, anchor?: ResolvableAttribute<Position | undefined>): this;
+    setRotations(rotations: ResolvableAttribute<Rotation[]>): this;
+    setShadow(shadow: ResolvableAttribute<Shadow>): this;
 }

dist/libraries/elements/ellipse-element.d.ts

 import { ElementType } from '../../enums/element-type';
 import { GeometricElement } from './geometric-element';
 import { Color } from '../colors/color';
+import { Size } from '../../interfaces/size.interface';
+import { ResolvableAttribute } from '../../types';
 export declare class EllipseElement extends GeometricElement {
     private _fillColor?;
     type(): ElementType;
+    hash(): string;
     fillColor(): string | Color | undefined;
-    setFillColor(value: string | Color): this;
+    boundingClientSize(): Size;
+    setFillColor(value: ResolvableAttribute<string | Color>): this;
 }

dist/libraries/elements/geometric-element.d.ts

 import { Element } from './element';
-import { SizeInterface } from '../../interfaces/size.interface';
+import { Size } from '../../interfaces/size.interface';
 import { Color } from '../colors/color';
+import { ResolvableAttribute } from '../../types';
 export declare abstract class GeometricElement extends Element {
@@ -8,7 +9,8 @@ private _size;
     private _borderWidth;
-    size(): SizeInterface;
+    hash(): string;
+    size(): Size;
     borderColor(): string | Color | undefined;
     borderWidth(): number;
-    setSize(value: SizeInterface): this;
-    setBorder(width: number, color?: string | Color): this;
+    setSize(value: ResolvableAttribute<Size>): this;
+    setBorder(width: ResolvableAttribute<number>, color?: ResolvableAttribute<string | Color | undefined>): this;
 }

dist/libraries/elements/image-element.d.ts

 import { ElementType } from '../../enums/element-type';
 import { ImageFit } from '../../enums/image-fit';
-import { BorderRadiusInterface } from '../../interfaces/border-radius.interface';
+import { BorderRadius } from '../../interfaces/border-radius.interface';
 import { GeometricElement } from './geometric-element';
-import { ImageSource } from '../../types';
+import { ImageSource, ResolvableAttribute } from '../../types';
+import { CropArea } from '../../interfaces/crop-area.interface';
+import { Size } from '../../interfaces/size.interface';
 export declare class ImageElement extends GeometricElement {
@@ -12,15 +14,20 @@ private _image?;
     private _flipY;
+    private _cropArea?;
     type(): ElementType;
+    hash(): string;
     image(): ImageSource | undefined;
     fit(): ImageFit;
-    borderRadius(): BorderRadiusInterface;
+    borderRadius(): BorderRadius;
     flipX(): boolean;
     flipY(): boolean;
-    setImage(value: ImageSource): this;
-    setFit(value: ImageFit): this;
-    setBorderRadius(topLeftOrDefault: number, topRight?: number, bottomRight?: number, bottomLeft?: number): this;
+    cropArea(): CropArea;
+    boundingClientSize(): Size;
+    setImage(value: ResolvableAttribute<ImageSource>): this;
+    setFit(value: ResolvableAttribute<ImageFit>): this;
+    setBorderRadius(topLeftOrDefault: ResolvableAttribute<number>, topRight?: ResolvableAttribute<number | undefined>, bottomRight?: ResolvableAttribute<number | undefined>, bottomLeft?: ResolvableAttribute<number | undefined>): this;
     setFlip(value: {
-        horizontal?: boolean;
-        vertical?: boolean;
+        horizontal?: ResolvableAttribute<boolean | undefined>;
+        vertical?: ResolvableAttribute<boolean | undefined>;
     }): this;
+    setCropArea(value: ResolvableAttribute<CropArea>): this;
 }

dist/libraries/elements/line-element.d.ts

 import { ElementType } from '../../enums/element-type';
-import { PositionInterface } from '../../interfaces/position.interface';
+import { Position } from '../../interfaces/position.interface';
 import { Element } from './element';
-import { SizeInterface } from '../../interfaces/size.interface';
+import { Size } from '../../interfaces/size.interface';
 import { LineCap } from '../../enums/line-cap';
 import { Color } from '../colors/color';
+import { ResolvableAttribute } from '../../types';
 export declare class LineElement extends Element {
@@ -16,15 +17,18 @@ private _shapePoints;
     type(): ElementType;
-    shapePoints(): PositionInterface[];
-    size(): SizeInterface | undefined;
+    hash(): string;
+    shapePoints(): Position[];
+    size(): Size | undefined;
     keepRatio(): boolean;
     thickness(): number;
+    calculatedThickness(): number;
     jointsRadius(): number;
     lineCap(): LineCap;
     color(): string | Color | undefined;
-    setShapePoints(value: PositionInterface[]): this;
-    setSize(value: SizeInterface, keepRatio?: boolean): this;
-    setThickness(value: number): this;
-    setJointsRadius(value: number): this;
-    setLineCap(value: LineCap): this;
-    setColor(value: string | Color): this;
+    boundingClientSize(): Size;
+    setShapePoints(value: ResolvableAttribute<Position[]>): this;
+    setSize(value: ResolvableAttribute<Size>, keepRatio?: ResolvableAttribute<boolean | undefined>): this;
+    setThickness(value: ResolvableAttribute<number>): this;
+    setJointsRadius(value: ResolvableAttribute<number>): this;
+    setLineCap(value: ResolvableAttribute<LineCap>): this;
+    setColor(value: ResolvableAttribute<string | Color>): this;
 }

dist/libraries/elements/polygon-element.d.ts

 import { ElementType } from '../../enums/element-type';
-import { PositionInterface } from '../../interfaces/position.interface';
+import { Position } from '../../interfaces/position.interface';
 import { GeometricElement } from './geometric-element';
 import { Color } from '../colors/color';
+import { Size } from '../../interfaces/size.interface';
+import { ResolvableAttribute } from '../../types';
 export declare class PolygonElement extends GeometricElement {
@@ -10,8 +12,10 @@ private _shapePoints;
     type(): ElementType;
-    shapePoints(): PositionInterface[];
+    hash(): string;
+    shapePoints(): Position[];
     borderRadius(): number;
     fillColor(): string | Color | undefined;
-    setShapePoints(value: PositionInterface[]): this;
-    setBorderRadius(value: number): this;
-    setFillColor(value: string | Color): this;
+    boundingClientSize(): Size;
+    setShapePoints(value: ResolvableAttribute<Position[]>): this;
+    setBorderRadius(value: ResolvableAttribute<number>): this;
+    setFillColor(value: ResolvableAttribute<string | Color>): this;
 }

dist/libraries/elements/rectangle-element.d.ts

@@ -5,2 +5,4 @@ import { ElementType } from '../../enums/element-type';
 import { Color } from '../colors/color';
+import { Size } from '../../interfaces/size.interface';
+import { ResolvableAttribute } from '../../types';
 export declare class RectangleElement extends GeometricElement {
@@ -10,6 +12,8 @@ private _fillColor?;
     type(): ElementType;
+    hash(): string;
     fillColor(): string | Color | undefined;
     cutOutShapes(): Shape[];
-    setFillColor(value: string | Color): this;
-    setCutOutShapes(value: Shape[]): this;
+    boundingClientSize(): Size;
+    setFillColor(value: ResolvableAttribute<string | Color>): this;
+    setCutOutShapes(value: ResolvableAttribute<Shape[]>): this;
 }

dist/libraries/elements/text-element.d.ts

 import { Element } from './element';
-import { SizeInterface } from '../../interfaces/size.interface';
+import { Size } from '../../interfaces/size.interface';
 import { ElementType } from '../../enums/element-type';
 import { FontWeight } from '../../enums/font-weight';
 import { HorizontalAlign } from '../../enums/horizontal-align';
-import { PaddingInterface } from '../../interfaces/padding.interface';
+import { Padding } from '../../interfaces/padding.interface';
 import { VerticalAlign } from '../../enums/vertical-align';
 import { Color } from '../colors/color';
+import { TextBox } from '../../interfaces/text-box.interface';
+import { ResolvableAttribute } from '../../types';
 export declare class TextElement extends Element {
@@ -22,5 +24,7 @@ private _text;
     private _padding;
+    private _textSplitter;
     type(): ElementType;
+    hash(): string;
     text(): string;
-    bounds(): SizeInterface | undefined;
+    bounds(): Size | undefined;
     fontSize(): number;
@@ -35,15 +39,17 @@ fontFamily(): string;
     verticalAlign(): VerticalAlign;
-    padding(): PaddingInterface;
+    padding(): Padding;
     font(): string;
-    setText(value: string): this;
-    setBounds(value: SizeInterface): this;
-    setFontSize(value: number): this;
-    setFontFamily(value: string): this;
-    setFontWeight(value: FontWeight): this;
-    setLineHeight(value: number): this;
-    setFillColor(value: string | Color): this;
-    setStroke(width: number, color?: string | Color): this;
-    setHorizontalAlign(value: HorizontalAlign): this;
-    setVerticalAlign(value: VerticalAlign): this;
-    setPadding(topOrVerticalOrDefault: number, rightOrHorizontal?: number, bottom?: number, left?: number): this;
+    textBox(): TextBox;
+    boundingClientSize(): Size;
+    setText(value: ResolvableAttribute<string | number>): this;
+    setBounds(value: ResolvableAttribute<Size>): this;
+    setFontSize(value: ResolvableAttribute<number>): this;
+    setFontFamily(value: ResolvableAttribute<string>): this;
+    setFontWeight(value: ResolvableAttribute<FontWeight>): this;
+    setLineHeight(value: ResolvableAttribute<number>): this;
+    setFillColor(value: ResolvableAttribute<string | Color>): this;
+    setStroke(width: ResolvableAttribute<number>, color?: ResolvableAttribute<string | Color | undefined>): this;
+    setHorizontalAlign(value: ResolvableAttribute<HorizontalAlign>): this;
+    setVerticalAlign(value: ResolvableAttribute<VerticalAlign>): this;
+    setPadding(topOrVerticalOrDefault: ResolvableAttribute<number>, rightOrHorizontal?: ResolvableAttribute<number | undefined>, bottom?: ResolvableAttribute<number | undefined>, left?: ResolvableAttribute<number | undefined>): this;
 }

dist/libraries/helper/helper.d.ts

@@ -1,4 +0,6 @@
-import { PositionInterface } from '../../interfaces/position.interface';
-import { SizeInterface } from '../../interfaces/size.interface';
+import { Position } from '../../interfaces/position.interface';
+import { Size } from '../../interfaces/size.interface';
 import { PositionPoint } from '../../enums/position-point';
+import { ExtractedValue } from '../../interfaces/extracted-value.interface';
+import { ResolvableAttribute } from '../../types';
 export declare class Helper {
@@ -11,9 +13,15 @@ static valueInRange(value: number, range: {
     static valueNotLessThan(value: number, min: number): number;
+    static relativePositionValue(value: number | string, size: number, maxValue: number): number;
+    static extractedValue(value: number | string): ExtractedValue;
     static degreesToRadians(degrees: number): number;
-    static distance(firstPoint: PositionInterface, secondPoint: PositionInterface): number;
-    static positionBetweenPoints(firstPoint: PositionInterface, secondPoint: PositionInterface, moveBy: number): PositionInterface;
-    static shapeSize(points: PositionInterface[]): SizeInterface;
-    static positionLeftTop(position: PositionInterface, point: PositionPoint, size: SizeInterface): PositionInterface;
-    static positionCenter(position: PositionInterface, point: PositionPoint, size: SizeInterface): PositionInterface;
-    static resizedSize(originalSize: SizeInterface, desiredSize: SizeInterface, keepRatio: boolean): SizeInterface;
+    static distance(firstPoint: Position, secondPoint: Position): number;
+    static positionBetweenPoints(firstPoint: Position, secondPoint: Position, moveBy: number): Position;
+    static shapeSize(points: Position[]): Size;
+    static positionLeftTop(position: Position, point: PositionPoint, size: Size): Position;
+    static positionCenter(position: Position, point: PositionPoint, size: Size): Position;
+    static resizedSize(originalSize: Size, desiredSize: Size, keepRatio: boolean): Size;
+    static resolvedValue<T>(attribute: ResolvableAttribute<T>): T;
+    static isObject(value: any): boolean;
+    static hasMethod(object: any, methodName: string): boolean;
+    static hash(attributes: any[]): string;
 }

dist/libraries/shapes/shape.d.ts

@@ -1,4 +0,5 @@
-import { PositionInterface } from '../../interfaces/position.interface';
-import { SizeInterface } from '../../interfaces/size.interface';
+import { Position } from '../../interfaces/position.interface';
+import { Size } from '../../interfaces/size.interface';
 import { PositionPoint } from '../../enums/position-point';
+import { Rotation } from '../../interfaces/rotation.interface';
 export declare class Shape {
@@ -13,15 +14,22 @@ private readonly _points;
     private _anchor?;
-    constructor(points: PositionInterface[], isCloseShape?: boolean);
-    points(): PositionInterface[];
+    private _rotations;
+    constructor(points: Position[], isCloseShape?: boolean);
+    hash(): string;
+    points(): Position[];
     isCloseShape(): boolean;
-    position(): PositionInterface;
+    position(): Position;
     positionPoint(): PositionPoint;
-    size(): SizeInterface | undefined;
+    size(): Size | undefined;
     jointsRadius(): number;
+    /** @deprecated Use Rotations instead */
     degrees(): number;
-    anchor(): PositionInterface | undefined;
-    setPosition(position: PositionInterface, point?: PositionPoint): this;
-    setSize(value: SizeInterface): this;
+    /** @deprecated Use Rotations instead */
+    anchor(): Position | undefined;
+    rotations(): Rotation[];
+    setPosition(position: Position, point?: PositionPoint): this;
+    setSize(value: Size): this;
     setJointsRadius(value: number): this;
-    setDegrees(degrees: number, anchor?: PositionInterface): this;
+    /** @deprecated Use Rotations instead */
+    setDegrees(degrees: number, anchor?: Position): this;
+    setRotations(rotations: Rotation[]): this;
 }

dist/libraries/shapes/shaper.d.ts

@@ -21,3 +21,4 @@ import { Shape } from './shape';
     private sizeRatio;
-    private anchor;
+    private rotate;
+    private defaultAnchor;
 }

dist/libraries/texts/text-splitter.d.ts

@@ -1,15 +0,3 @@
-import { PositionInterface } from '../../interfaces/position.interface';
-import { SizeInterface } from '../../interfaces/size.interface';
 import { TextElement } from '../elements/text-element';
-export interface TextBox {
-    text: string;
-    lines: TextLine[];
-    size: SizeInterface;
-    position: PositionInterface;
-}
-export interface TextLine {
-    text: string;
-    size: SizeInterface;
-    position: PositionInterface;
-}
+import { TextBox } from '../../interfaces/text-box.interface';
 export declare class TextSplitter {
@@ -19,5 +7,9 @@ private element;
     private ctx;
+    private lastTextBox?;
+    private lastTextBoxHash;
     constructor(element: TextElement);
     textBox(): TextBox;
+    private createTextBox;
     private textLines;
+    private alignedLines;
     private textBoxSize;
@@ -27,2 +19,3 @@ private textBoxPosition;
     private textWidth;
+    private elementChanged;
 }

dist/types.d.ts

@@ -1,1 +0,5 @@
-export type ImageSource = HTMLCanvasElement | HTMLImageElement;
+export type ImageSource = HTMLCanvasElement | HTMLImageElement | HTMLVideoElement;
+export type ResolvableAttribute<T> = T | (() => T);
+export type PublicPart<T> = {
+    [K in keyof T]: T[K];
+};

package.json

 {
-  "name": "@armniko/canvas",
-  "version": "1.2.0",
-  "description": "Simplified and object-based drawing on HTML canvas!",
-  "author": "Armīns Nikolajevs <[e-mail]>",
-  "license": "MIT",
-  "bugs": {
-    "email": "[e-mail]"
-  },
-  "keywords": [
-    "canvas",
-    "drawing",
-    "html canvas",
-    "object-based"
-  ],
-  "main": "./dist/index.umd.js",
-  "module": "./dist/index.esm.js",
-  "typings": "./dist/index.d.ts",
-  "type": "module",
-  "files": [
-    "dist"
-  ],
-  "scripts": {
-    "build": "rimraf dist && webpack && tsc --project tsconfig.build.json",
-    "dev": "node test/server/main.js & webpack --watch",
-    "lint": "tsc --noEmit && eslint src --max-warnings=0",
-    "lint:fix": "npm run lint -- --fix",
-    "test": "npm run build && jest --runInBand",
-    "test:coverage": "JEST_COVERAGE=true npm run test -- --collect-coverage"
-  },
-  "devDependencies": {
-    "@babel/preset-typescript": "^7.23.3",
-    "@types/jest": "^29.5.12",
-    "@types/jest-image-snapshot": "^6.4.0",
-    "@typescript-eslint/eslint-plugin": "^7.2.0",
-    "@typescript-eslint/parser": "^7.2.0",
-    "babel-loader": "^9.1.3",
-    "babel-plugin-istanbul": "^6.1.1",
-    "eslint": "^8.57.0",
-    "eslint-config-prettier": "^9.1.0",
-    "eslint-plugin-prettier": "^5.1.3",
-    "find-process": "^1.4.7",
-    "jest": "^29.7.0",
-    "jest-environment-puppeteer": "^10.0.1",
-    "jest-image-snapshot": "^6.4.0",
-    "jest-puppeteer": "^10.0.1",
-    "jest-puppeteer-istanbul": "^0.5.3",
-    "prettier": "^3.2.5",
-    "puppeteer": "^22.5.0",
-    "ts-jest": "^29.1.2",
-    "typescript": "^5.3.3",
-    "webpack": "^5.91.0",
-    "webpack-cli": "^5.1.4"
-  }
+    "name": "@armniko/canvas",
+    "version": "2.0.0",
+    "description": "Simplified and object-based drawing on HTML canvas!",
+    "author": "Armīns Nikolajevs <[e-mail]>",
+    "license": "MIT",
+    "bugs": {
+        "email": "[e-mail]"
+    },
+    "keywords": [
+        "canvas",
+        "drawing",
+        "html canvas",
+        "object-based"
+    ],
+    "main": "./dist/index.umd.js",
+    "module": "./dist/index.esm.js",
+    "typings": "./dist/index.d.ts",
+    "type": "module",
+    "files": [
+        "dist"
+    ],
+    "scripts": {
+        "build": "vite build",
+        "dev": "vite build --watch",
+        "lint": "tsc --noEmit && eslint ./src ./test --max-warnings=0",
+        "lint:fix": "npm run lint -- --fix",
+        "test": "vitest run",
+        "test:e2e": "vitest run --config vitest.e2e.config.ts",
+        "test:all": "npm run test && npm run test:e2e",
+        "test:coverage": "vitest run --coverage",
+        "test:e2e:coverage": "VITE_COVERAGE=true vitest run --config vitest.e2e.config.ts && nyc report"
+    },
+    "devDependencies": {
+        "@eslint/js": "^10.0.1",
+        "@types/jest-image-snapshot": "^6.4.1",
+        "@types/node": "^24.12.2",
+        "@typescript-eslint/eslint-plugin": "^8.58.2",
+        "@typescript-eslint/parser": "^8.58.2",
+        "@vitest/coverage-v8": "^4.1.4",
+        "eslint": "^10.2.1",
+        "eslint-config-prettier": "^10.1.8",
+        "eslint-plugin-prettier": "^5.5.5",
+        "jest-image-snapshot": "^6.5.2",
+        "nyc": "^18.0.0",
+        "prettier": "^3.8.3",
+        "puppeteer": "^24.41.0",
+        "terser": "^5.46.1",
+        "typescript": "^6.0.3",
+        "typescript-eslint": "^8.58.2",
+        "vite": "^8.0.8",
+        "vite-plugin-dts": "^4.5.4",
+        "vitest": "^4.1.4"
+    }
 }

README.md

@@ -1,13 +0,12 @@
-<h1 align="center">Canvas</h1>
-<p align="center">
-<a href="https://gitlab.com/Armniko/game-core/canvas/-/releases"><img alt="Latest Release" src="https://gitlab.com/Armniko/game-core/canvas/-/badges/release.svg" /></a>
-<a href="https://gitlab.com/Armniko/game-core/canvas/-/commits/prod"><img alt="pipeline status" src="https://gitlab.com/Armniko/game-core/canvas/badges/prod/pipeline.svg" /></a>
-<a href="https://gitlab.com/Armniko/game-core/canvas/-/commits/prod"><img alt="coverage report" src="https://gitlab.com/Armniko/game-core/canvas/badges/prod/coverage.svg" /></a>
-</p>
-<p align="center">
+# Canvas
+
+[![npm](https://img.shields.io/npm/v/@armniko/canvas)](https://www.npmjs.com/package/@armniko/canvas)
+![last published](https://img.shields.io/npm/last-update/@armniko/canvas)
+![zero dependencies](https://img.shields.io/badge/zero-dependencies-brightgreen)
+[![types](https://img.shields.io/npm/types/@armniko/canvas)](https://www.npmjs.com/package/@armniko/canvas)
+
 Simplified and object-based drawing on HTML canvas!
-</p>
 <hr>
 
-## Installation
+### Installation
 
@@ -18,5 +17,5 @@ ```
 
-## Usage
+### Usage
 
-Create canvas with existing HTMLCanvasElement:
+Create a canvas with existing HTMLCanvasElement:
 
@@ -56,9 +55,29 @@ ```typescript
 
-## Changelog
+### Changelog
 
 <table>
 <tr>
+    <td>v2.0.0</td>
+    <td>
+        <b>Features:</b><br>
+        - pass callable attributes to element set methods<br>
+        - method to get hash for each element<br>
+        - option to set multiple rotations for all elements with `setRotations()` method which replaces `setDegrees()`<br>
+        - option to set scale for all elements<br>
+        - option to set crop area for an image element<br>
+        - option to set radius scale for radial gradient<br>
+        - option to pass position, scale, opacity and rotations into draw method<br>
+        - removed interface suffix from interfaces<br><br>
+         <b>Bugfixes:</b><br>
+        - incorrect linear gradient position when rotating<br><br>
+         <b>Technical:</b><br>
+        - migrated from webpack to vite<br>
+        - update all dependencies
+    </td>
+</tr>
+<tr>
     <td>v1.2.0</td>
     <td>
-        Precompile UMD and ESM<br>
+        <b>Technical:</b><br>
+        - precompile UMD and ESM
     </td>
@@ -69,5 +88,5 @@ </tr>
     <td>
-        Bugfixes:<br>
+        <b>Bugfixes:</b><br>
         - missing ImageSource type<br>
-        - no shadow for image element with border radius<br>
+        - no shadow for an image element with border radius
     </td>
@@ -78,3 +97,3 @@ </tr>
     <td>
-        Features:<br>
+        <b>Features:</b><br>
         - added line element<br>
@@ -87,5 +106,5 @@ - added gradient colors for usage as fill and border color for all elements<br>
     <td>
-        - Initial version
+        Initial version
     </td>
 </tr>
 </table>

New alerts

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

No bug tracker

Maintenance

Package does not have a linked bug tracker in package.json.

Fixed alerts

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

No bug tracker

Maintenance

Package does not have a linked bug tracker in package.json.

Improved metrics

Total package byte prevSize

92207

26.22%

Dev dependency count

19

-13.64%

Number of package files

55

14.58%

Lines of code

668

28.46%

Number of lines in readme file

106

21.84%

No dependency changes