zextra/dist/zextra-canvas.mjs

***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)
*/

import { matrix } from 'ziko';

class ZikoCanvasElement{
    constructor(x,y){
        this.parent=null;
        this.position={
            x,
            y
        };
        this.cache={
            interact:null/*avoid redraw*/,
            config:{
                draggable:false,
                selected:false,
                highlighted:false,
                rendered:false
            },
            style:{
                normal:{
                    strokeEnabled:true,
                    fillEnabled:false,
                    strokeColor:"#111111",
                    fillColor:"#777777",
                },
                highlighted:{
                    strokeEnabled:true,
                    fillEnabled:false,
                    strokeColor:null,
                    fillColor:null,
                }
            },
        };
        this.history={
            position:[],
            styles:[]
        };
        this.render();
    }
    get px(){
        //_x=====>px
        return (this.position.x??0)+(this.parent?.position?.x??0);
    }
    get py(){
        //_y=====>py
        return (this.position.y??0)+(this.parent?.position?.y??0);
    }
    isIntersectedWith(){

    }
    isInStroke(x,y){
        let is;
        if(this.parent){
            this.parent.ctx.setTransform(1,0,0,1,0,0);
            is=this.parent.ctx.isPointInStroke(this.path,x,y);
            this.parent.applyTransformMatrix();
        }
        return is;
    }
    isInPath(x,y){
        let is;
        if(this.parent){
            this.parent.ctx.setTransform(1,0,0,1,0,0);
            is=this.parent.ctx.isPointInPath(this.path,x,y);
            this.parent.applyTransformMatrix();
        }
        return is;
    }
    posX(x){
        this.position.x=x;
        if(this.parent)this.parent.draw();
        return this;
    }
    posY(y){
        this.position.y=y;
        if(this.parent)this.parent.draw();
        return this;
    }
    color({stroke=this.cache.style.normal.strokeColor,fill=this.cache.style.normal.fillColor}={stroke,fill}){
        this.cache.style.normal.strokeColor=stroke;
        this.cache.style.normal.fillColor=fill;
        if(this.parent)this.parent.draw();
        return this;
    }
    translate(dx=0,dy=0){
        this.position.x+=dx;
        this.position.y+=dy;
        if(this.parent)this.parent.draw();
        return;
    }
    applyNormalStyle(ctx){
        ctx.strokeStyle=this.cache.style.normal.strokeColor;
        ctx.fillStyle=this.cache.style.normal.fillColor;
        return this;   
    }
    applyHighlightedStyle(ctx){
        ctx.strokeStyle=this.cache.style.highlighted.strokeColor;
        ctx.fillStyle=this.cache.style.highlighted.fillColor;
        return this;
    }
    stroke(color=this.cache.style.normal.strokeColor,enabled=true){
        this.cache.style.normal.strokeEnabled=enabled;
        this.cache.style.normal.strokeColor=color;
        if(this.parent)this.parent.draw();
        return this  
    }
    fill(color=this.cache.style.normal.fillColor,enabled=true){
        this.cache.style.normal.fillEnabled=enabled;
        this.cache.style.normal.filleColor=color;
        if(this.parent)this.parent.draw();
        return this;      
    }
    render(render=true){
       this.cache.config.rendered=render;
       return this;       
    }
}

class CanvasArc extends ZikoCanvasElement{
    constructor(x,y,r,angle){
        super(x,y);
        this.r=r;
        this.angle=angle;
        this.path=null;
    }
    draw(ctx){
        if(this.cache.config.rendered){
            ctx.save();
            this.applyNormalStyle(ctx);
            ctx.beginPath();
            this.path=new Path2D();
            this.path.arc(this.px, this.py, this.r, 0, this.angle);
            const{strokeEnabled,fillEnabled}=this.cache.style.normal;
            if(strokeEnabled)ctx.stroke(this.path);
            if(fillEnabled)ctx.fill(this.path);
            ctx.closePath(); 
            ctx.restore();
        }
        return this;   
    }
    radius(r){
        this.r=r;
        if(this.parent)this.parent.draw();
        return this;
    }
    // distanceFromCenter(x,y){
    //     return Math.sqrt(
    //         (this._x-x)**2-(this._y-y)**2
    //     )
    // }
    // isIn(x,y,strict=false){
    //     return strict?this.distanceFromCenter(x,y)<this.r:this.distanceFromCenter(x,y)<=this.r;
    // }
    // isInEdges(x,y){
    //     return this.distanceFromCenter(x,y)===this.r;
    // }
}
const canvasArc=(x,y,r,phi)=>new CanvasArc(x,y,r,phi);
const canvasCircle=(x,y,r)=>new CanvasArc(x,y,r,2*Math.PI);

class CanvasPoints extends ZikoCanvasElement{
    constructor(ptsX,ptsY){
        super();
        this.pointsMatrix=null;
        this.path=new Path2D();
        this.fromXY(ptsX,ptsY);
    }
    get points(){
        return this.pointsMatrix.T.arr;
    }
    draw(ctx){
        if(this.cache.config.rendered){
            ctx.save();
            this.applyNormalStyle(ctx);
            ctx.beginPath();
            this.path.moveTo(this.points[1][0]+this._x,this.points[1][1]+this._y);
            for(let i=1;i<this.points.length;i++){
                this.path.lineTo(this.points[i][0]+this._x,this.points[i][1]+this._y);
            }
            ctx.stroke(this.path);
            ctx.restore();
        }
        return this;
    }
    fromXY(X,Y){
        this.pointsMatrix=matrix([X,Y]);
        return this;
    }
    push(ptsX,ptsY){
        this.pointsMatrix.hstack(matrix([ptsX,ptsY]));
        if(this.parent)this.parent.draw();
        return this;
    }
    isIn(x,y){
        let is;
        if(this.parent){
            this.parent.ctx.setTransform(1,0,0,1,0,0);
            is=this.parent.ctx.isPointInPath(this.path,x,y);
            this.parent.applyTransformMatrix();
        }
        return is;
    }
}

const canvasPoints=(ptsX=[],ptsY=[])=>new CanvasPoints(ptsX,ptsY);

class CanvasLine extends ZikoCanvasElement{
    constructor(x0,y0,x1,y1){
        super();
        this.x0=x0;
        this.x1=x1;
        this.y0=y0;
        this.y1=y1;
        delete this.fill;
    }
    draw(ctx){
        if(this.cache.config.rendered){
            ctx.save();
            this.applyNormalStyle(ctx);
            ctx.beginPath();
            ctx.moveTo(this.x0+this._x,this.y0+this._y_);
            ctx.lineTo(this.x1+this._x,this.y1+this._y);
            ctx.stroke();
            if(this.cache.style.normal.strokeEnabled)ctx.stroke();
            ctx.restore();
        }
        return this;   
    }
}
const canvasLine=(x0,y0,x1,y1)=>new CanvasLine(x0,y0,x1,y1);

class CanvasRect extends ZikoCanvasElement{
    constructor(x,y,w,h){
        super(x,y);
        this.w=w;
        this.h=h;
        this.path=new Path2D();
    }
    draw(ctx){
        if(this.cache.config.rendered){
            ctx.save();
            this.applyNormalStyle(ctx);
            ctx.beginPath();
            this.path.rect(this.px, this.py,this.w,this.h);
            const{strokeEnabled,fillEnabled}=this.cache.style.normal;
            if(strokeEnabled)ctx.stroke(this.path);
            if(fillEnabled)ctx.fill(this.path);
            ctx.closePath(); 
            ctx.restore();
        }
        return this;   
    }
    width(w){
        this.w=w;
        if(this.parent)this.parent.draw();
        return this;
    }
    height(h){
        this.h=h;
        if(this.parent)this.parent.draw();
        return this;
    }
    // distanceFromCenter(x,y){
    //     return Math.sqrt(
    //         (this.position.x-x)**2-(this.position.y-y)**2
    //     )
    // }
    // isIn(x,y,strict=false){
    //     return strict?this.distanceFromCenter(x,y)<this.r:this.distanceFromCenter(x,y)<=this.r;
    // }
    // isInEdges(x,y){
    //     return this.distanceFromCenter(x,y)===this.r;
    // }
}
const canvasRect=(x,y,w,h)=>new CanvasRect(x,y,w,h);

export { canvasArc, canvasCircle, canvasLine, canvasPoints, canvasRect };