zextra
Version:
***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
294 lines (282 loc) • 9.85 kB
JavaScript
/*
Project: zextra
Author:
Date : Sat Feb 15 2025 14:52:11 GMT+0100 (UTC+01:00)
*/
(function (global, factory) {
typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('ziko')) :
typeof define === 'function' && define.amd ? define(['exports', 'ziko'], factory) :
(global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global.Zextra = {}, global.Ziko));
})(this, (function (exports, ziko) { 'use strict';
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=ziko.matrix([X,Y]);
return this;
}
push(ptsX,ptsY){
this.pointsMatrix.hstack(ziko.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);
exports.canvasArc = canvasArc;
exports.canvasCircle = canvasCircle;
exports.canvasLine = canvasLine;
exports.canvasPoints = canvasPoints;
exports.canvasRect = canvasRect;
}));