zextra/dist/zextra-canvas.min.js

***Zextra*** stands for "Ziko Extra" is an extension package that enhances [ZikoJS](https://github.com/zakarialaoui10/ziko.js) by providing additional utilities and UI elements. It expands ZikoJS with extra features, making it easier to work with custom U

/*
  Project: zextra
  Author: 
  Date : Sat Feb 15 2025 14:52:11 GMT+0100 (UTC+01:00)
*/
!function(t,s){"object"==typeof exports&&"undefined"!=typeof module?s(exports,require("ziko")):"function"==typeof define&&define.amd?define(["exports","ziko"],s):s((t="undefined"!=typeof globalThis?globalThis:t||self).Zextra={},t.Ziko)}(this,(function(t,s){"use strict";class e{constructor(t,s){this.parent=null,this.position={x:t,y:s},this.cache={interact:null,config:{draggable:!1,selected:!1,highlighted:!1,rendered:!1},style:{normal:{strokeEnabled:!0,fillEnabled:!1,strokeColor:"#111111",fillColor:"#777777"},highlighted:{strokeEnabled:!0,fillEnabled:!1,strokeColor:null,fillColor:null}}},this.history={position:[],styles:[]},this.render()}get px(){return(this.position.x??0)+(this.parent?.position?.x??0)}get py(){return(this.position.y??0)+(this.parent?.position?.y??0)}isIntersectedWith(){}isInStroke(t,s){let e;return this.parent&&(this.parent.ctx.setTransform(1,0,0,1,0,0),e=this.parent.ctx.isPointInStroke(this.path,t,s),this.parent.applyTransformMatrix()),e}isInPath(t,s){let e;return this.parent&&(this.parent.ctx.setTransform(1,0,0,1,0,0),e=this.parent.ctx.isPointInPath(this.path,t,s),this.parent.applyTransformMatrix()),e}posX(t){return this.position.x=t,this.parent&&this.parent.draw(),this}posY(t){return this.position.y=t,this.parent&&this.parent.draw(),this}color({stroke:t=this.cache.style.normal.strokeColor,fill:s=this.cache.style.normal.fillColor}={stroke:t,fill:s}){return this.cache.style.normal.strokeColor=t,this.cache.style.normal.fillColor=s,this.parent&&this.parent.draw(),this}translate(t=0,s=0){this.position.x+=t,this.position.y+=s,this.parent&&this.parent.draw()}applyNormalStyle(t){return t.strokeStyle=this.cache.style.normal.strokeColor,t.fillStyle=this.cache.style.normal.fillColor,this}applyHighlightedStyle(t){return t.strokeStyle=this.cache.style.highlighted.strokeColor,t.fillStyle=this.cache.style.highlighted.fillColor,this}stroke(t=this.cache.style.normal.strokeColor,s=!0){return this.cache.style.normal.strokeEnabled=s,this.cache.style.normal.strokeColor=t,this.parent&&this.parent.draw(),this}fill(t=this.cache.style.normal.fillColor,s=!0){return this.cache.style.normal.fillEnabled=s,this.cache.style.normal.filleColor=t,this.parent&&this.parent.draw(),this}render(t=!0){return this.cache.config.rendered=t,this}}class i extends e{constructor(t,s,e,i){super(t,s),this.r=e,this.angle=i,this.path=null}draw(t){if(this.cache.config.rendered){t.save(),this.applyNormalStyle(t),t.beginPath(),this.path=new Path2D,this.path.arc(this.px,this.py,this.r,0,this.angle);const{strokeEnabled:s,fillEnabled:e}=this.cache.style.normal;s&&t.stroke(this.path),e&&t.fill(this.path),t.closePath(),t.restore()}return this}radius(t){return this.r=t,this.parent&&this.parent.draw(),this}}class r extends e{constructor(t,s){super(),this.pointsMatrix=null,this.path=new Path2D,this.fromXY(t,s)}get points(){return this.pointsMatrix.T.arr}draw(t){if(this.cache.config.rendered){t.save(),this.applyNormalStyle(t),t.beginPath(),this.path.moveTo(this.points[1][0]+this._x,this.points[1][1]+this._y);for(let t=1;t<this.points.length;t++)this.path.lineTo(this.points[t][0]+this._x,this.points[t][1]+this._y);t.stroke(this.path),t.restore()}return this}fromXY(t,e){return this.pointsMatrix=s.matrix([t,e]),this}push(t,e){return this.pointsMatrix.hstack(s.matrix([t,e])),this.parent&&this.parent.draw(),this}isIn(t,s){let e;return this.parent&&(this.parent.ctx.setTransform(1,0,0,1,0,0),e=this.parent.ctx.isPointInPath(this.path,t,s),this.parent.applyTransformMatrix()),e}}class h extends e{constructor(t,s,e,i){super(),this.x0=t,this.x1=e,this.y0=s,this.y1=i,delete this.fill}draw(t){return this.cache.config.rendered&&(t.save(),this.applyNormalStyle(t),t.beginPath(),t.moveTo(this.x0+this._x,this.y0+this._y_),t.lineTo(this.x1+this._x,this.y1+this._y),t.stroke(),this.cache.style.normal.strokeEnabled&&t.stroke(),t.restore()),this}}class a extends e{constructor(t,s,e,i){super(t,s),this.w=e,this.h=i,this.path=new Path2D}draw(t){if(this.cache.config.rendered){t.save(),this.applyNormalStyle(t),t.beginPath(),this.path.rect(this.px,this.py,this.w,this.h);const{strokeEnabled:s,fillEnabled:e}=this.cache.style.normal;s&&t.stroke(this.path),e&&t.fill(this.path),t.closePath(),t.restore()}return this}width(t){return this.w=t,this.parent&&this.parent.draw(),this}height(t){return this.h=t,this.parent&&this.parent.draw(),this}}t.canvasArc=(t,s,e,r)=>new i(t,s,e,r),t.canvasCircle=(t,s,e)=>new i(t,s,e,2*Math.PI),t.canvasLine=(t,s,e,i)=>new h(t,s,e,i),t.canvasPoints=(t=[],s=[])=>new r(t,s),t.canvasRect=(t,s,e,i)=>new a(t,s,e,i)}));