ziko 0.0.23 → 0.0.25

package/src/graphics/canvas/canvas.js

@@ -1,176 +0,0 @@
-import ZikoUIContainerElement from "../../ui/elements/primitives/ZikoUIContainerElement.js";
-import {Matrix} from "../../math/matrix/index.js"
-// import { convolute } from "../../math/signal/conv.js";
-class ZikoUICanvas extends ZikoUIContainerElement{
-    constructor(w,h){
-        super("canvas","canvas");
-        this.ctx = this.element?.getContext("2d");
-        this.style({
-            border:"1px red solid",
-        })
-        this.transformMatrix=new Matrix([
-            [1,0,0],
-            [0,1,0],
-            [0,0,1]
-        ])
-        this.axisMatrix=new Matrix([
-            [-10,-10],
-            [10,10]
-        ])
-        // setTimeout(()=>this.resize(w,h),0);
-        requestAnimationFrame(()=>this.resize(w,h),0);
-        this.on("sizeupdated",()=>this.adjust())
-    }
-    get Xmin(){
-        return this.axisMatrix[0][0];
-    }
-    get Ymin(){
-        return this.axisMatrix[0][1];
-    }
-    get Xmax(){
-        return this.axisMatrix[1][0];
-    }
-    get Ymax(){
-        return this.axisMatrix[1][1];
-    }
-    get ImageData(){
-        return this.ctx.getImageData(0,0,c.Width,c.Height);
-    }
-    draw(all=true){
-        if(all){
-            this.clear();  
-            this.items.forEach(element => {
-                element.parent=this;
-                element.draw(this.ctx)
-            });
-        }
-        else {
-            this.items.at(-1).parent=this;
-            this.items.at(-1).draw(this.ctx);
-        }
-        this.maintain();
-        return this;
-    }
-    applyTransformMatrix(){
-        this.ctx.setTransform(
-            this.transformMatrix[0][0],
-            this.transformMatrix[1][0],
-            this.transformMatrix[0][1],
-            this.transformMatrix[1][1],
-            this.transformMatrix[0][2],
-            this.transformMatrix[1][2],
-        );
-        return this;
-    }
-    resize(w,h){
-        this.size(w,h)
-        this.lineWidth();
-        this.view(this.axisMatrix[0][0], this.axisMatrix[0][1], this.axisMatrix[1][0], this.axisMatrix[1][1]);
-        this.emit("sizeupdated");
-        return this;
-    }
-    adjust(){
-        this.element.width =this.element?.getBoundingClientRect().width;
-        this.element.height =this.element?.getBoundingClientRect().height;
-        this.view(this.axisMatrix[0][0], this.axisMatrix[0][1], this.axisMatrix[1][0], this.axisMatrix[1][1]);
-        return this;
-    }
-    view(xMin,yMin,xMax,yMax){
-        this.transformMatrix[0][0]=this.width/(xMax-xMin); // scaleX
-        this.transformMatrix[1][1]=-this.height/(yMax-yMin); // scaleY
-        this.transformMatrix[0][2]=this.width/2;
-        this.transformMatrix[1][2]=this.height/2;
-        this.axisMatrix=new Matrix([
-            [xMin,yMin],
-            [xMax,yMax]
-        ])
-        
-        this.applyTransformMatrix(); 
-        this.clear();
-        this.lineWidth(1);
-        this.draw();
-        return this;
-    }
-    reset(){
-        this.ctx.setTransform(1,0,0,0,0,0);
-        return this;
-    }
-    append(element){
-        this.items.push(element);
-        this.draw(false);
-        return this;
-    }
-    background(color){
-        this.ctx.fillStyle = color;
-        this.ctx.setTransform(1, 0, 0, 1, 0, 0);
-        this.ctx.fillRect(0, 0, this.width, this.height);
-        this.applyTransformMatrix();
-        this.draw();
-    }
-    lineWidth(w){
-        this.ctx.lineWidth=w/this.transformMatrix[0][0];
-        return this
-    }
-    getImageData(x=0,y=0,w=this.width,h=this.height){
-        return this.ctx.getImageData(x,y,w,h);
-    }
-    clear(){
-        this.ctx.setTransform(1, 0, 0, 1, 0, 0);
-        this.ctx.clearRect(0, 0, this.width, this.height);
-        this.applyTransformMatrix(); 
-        return this;
-    }
-    clone(){
-        console.log(this.width)
-        const canvas=new ZikoUICanvas();
-        canvas.items=this.items;
-        canvas.transformMatrix=this.transformMatrix;
-        canvas.axisMatrix=this.axisMatrix;
-        Object.assign(canvas.cache,{...this.cache});
-        //waitForUIElm(this)
-        //console.log(element)
-        this.size(this.element.style.width,this.element.style.width);
-        this.applyTransformMatrix();
-        this.draw();
-        this.adjust();
-        return canvas;
-    }
-    toImage() {
-        this.img = document?.createElement("img");
-        this.img.src = this.element?.toDataURL("image/png");
-        return this;
-    }
-    toBlob() {
-        var canvas = this.element;
-        canvas.toBlob(function (blob) {
-            var newImg = document?.createElement("img"),
-                url = URL.createObjectURL(blob);
-            newImg.onload = function () {
-                URL.revokeObjectURL(url);
-            };
-            newImg.src = url;
-            console.log(newImg);
-        });
-    }
-    zoomIn(){
-
-    }
-    zoomOut(){
-        
-    }
-    undo(n){
-
-    }
-    redo(n){
-
-    }
-    stream(){
-
-    }
-}
-
-const Canvas=(w,h)=>new ZikoUICanvas(w,h);
-export{
-    ZikoUICanvas,
-    Canvas
-}

package/src/graphics/canvas/elements/Basic/arc.js

@@ -1,43 +0,0 @@
-import ZikoCanvasElement from "../element.js";
-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);
-export{canvasArc,canvasCircle}

package/src/graphics/canvas/elements/Basic/line.js

@@ -1,26 +0,0 @@
-import ZikoCanvasElement from "../element.js";
-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)
-export{canvasLine}

package/src/graphics/canvas/elements/Basic/points.js

@@ -1,48 +0,0 @@
-import ZikoCanvasElement from "../element.js";
-import { matrix } from "../../../../math/matrix/index.js";
-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);
-export{canvasPoints};

package/src/graphics/canvas/elements/Basic/polygon.js

@@ -1,7 +0,0 @@
-import ZikoCanvasElement from "../_element.js";
-import { matrix } from "../../../../Math/Matrix/index.js";
-class ZikoCanvasPolygon extends ZikoCanvasElement{
-    constructor(ptsX,ptsY){
-        super()   
-    }
-}

package/src/graphics/canvas/elements/Basic/rect.js

@@ -1,46 +0,0 @@
-import ZikoCanvasElement from "../element.js";
-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{canvasRect}

package/src/graphics/canvas/elements/Chart/scatter.js

@@ -1,2 +0,0 @@
-// Scatter = Circle[]
-

package/src/graphics/canvas/elements/Element.js

@@ -1,115 +0,0 @@
-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;       
-    }
-}
-export default ZikoCanvasElement;

package/src/graphics/canvas/elements/index.js

@@ -1,13 +0,0 @@
-export {
-    canvasArc,
-    canvasCircle
-} from "./basic/arc.js";
-export {
-    canvasPoints
-} from "./basic/points.js";
-export {
-    canvasLine
-}from "./basic/line.js"
-export {
-    canvasRect
-} from "./basic/rect.js"

package/src/graphics/svg/Elements/Basic/circle.js

@@ -1,29 +0,0 @@
-import ZikoSvgElement from "../ziko-svg-element.js";
-class ZikoSvgCircle extends ZikoSvgElement{
-    constructor(cx,cy,r){
-      super("circle")
-      this.element=document.createElementNS(
-        "http://www.w3.org/2000/svg",
-        "circle",
-      );
-      this.pos(cx,cy).setR(r);
-    }
-    setR(r){
-       this.element.r.baseVal.value=r;
-       return this;
-    }
-    get r(){
-      return this.element.baseVal.value;
-    }
-    get cx(){
-      return this.element.baseVal.value;
-    } 
-    get cy(){
-      return this.element.baseVal.value;
-    }  
-  } 
-const svgCircle=(x,y,r)=>new ZikoSvgCircle(x,y,r);
-export { 
-  svgCircle,
-  ZikoSvgCircle
- }

package/src/graphics/svg/Elements/Basic/ellipse.js

@@ -1,24 +0,0 @@
-import ZikoSvgElement from "../ziko-svg-element.js";
-class ZikoSvgEllipse extends ZikoSvgElement{
-    constructor(cx,cy,rx,ry){
-      super("ellipse")
-      this.element=document?.createElementNS(
-        "http://www.w3.org/2000/svg",
-        "ellipse",
-      );
-      this.pos(cx,cy).setRx(rx).setRy(ry);
-    }
-    setRx(rx){
-       this.element.rx.baseVal.value=rx;
-       return this;
-    } 
-    setRy(ry){
-       this.element.ry.baseVal.value=ry;
-       return this;
-    } 
-  } 
-const svgEllipse=(x,y,rx,ry)=>new ZikoSvgEllipse(x,y,rx,ry);
-export{ 
-  svgEllipse,
-  ZikoSvgEllipse
- }

package/src/graphics/svg/Elements/Basic/foreign-object.js

@@ -1,36 +0,0 @@
-import ZikoSvgElement from "../ziko-svg-element.js";
-import { Flex } from "../../../../ui/index.js"
-class ZikoSvgForeignObject extends ZikoSvgElement{
-    constructor(x=0,y=0,w="100%",h="100%",...ZikoUIElement){
-      super("foreignObject")
-      this.items=[];
-      this.element=document?.createElementNS(
-        "http://www.w3.org/2000/svg",
-        "foreignObject",
-      );
-      this.container=Flex().setTarget(this.element).vertical(0,0).size("auto","auto");
-      this.container.st.scaleY(-1);
-      this.posX(x).posY(y).width(w).height(h);
-    } 
-    width(w){
-        this.element.etAttribute("width",w)
-        return this;
-    }
-    height(h){
-        this.element.etAttribute("height",h)
-        return this;
-    }
-    add(...ZikoUIElement){
-      this.container.append(...ZikoUIElement);
-      return this;
-      }
-    remove(...ZikoUIElement){
-      this.container.append(...ZikoUIElement);
-      return this;   
-      }
-  } 
-const svgObject=(x, y, w, h)=>new ZikoSvgForeignObject(x, y, w, h);
-export { 
-  svgObject,
-  ZikoSvgForeignObject
-}

package/src/graphics/svg/Elements/Basic/groupe.js

@@ -1,32 +0,0 @@
-import ZikoSvgElement from "../ziko-svg-element.js";
-class ZikoSvgGroupe extends ZikoSvgElement{
-    constructor(...svgElement){
-      super();
-      this.items=[];
-      this.element=document?.createElementNS(
-        "http://www.w3.org/2000/svg",
-        "g",
-      );
-      this.add(...svgElement)
-    }
-    add(...svgElement){
-      for(let i=0;i<svgElement.length;i++){
-        this.element?.appendChild(svgElement[i].element);
-        this.items.push(svgElement[i])
-      }
-      if(svgElement.length===1)return svgElement[0]
-      return svgElement;
-    }
-    remove(...svgElement){
-      for(let i=0;i<svgElement.length;i++){
-        this.element?.removeChild(svgElement[i].element);
-        this.items=this.items.filter(n=>n!=svgElement)
-      }
-      return this;     
-    }
-}
-const svgGroupe=(...svgElement)=>new ZikoSvgGroupe(...svgElement)
-export { 
-  svgGroupe,
-  ZikoSvgGroupe
- }

package/src/graphics/svg/Elements/Basic/image.js

@@ -1,36 +0,0 @@
-import ZikoSvgElement from "../ziko-svg-element.js";
-class ZikoSvgImage extends ZikoSvgElement{
-    constructor(src="",w="100%",h="100%",x=0,y=0){
-      super()
-      this.element=document?.createElementNS(
-        "http://www.w3.org/2000/svg",
-        "image",
-      );
-      this.setSrc(src).width(w).height(h).x(x).y(y);
-    }
-    x(x){
-       this.element.x.baseVal.value=x;
-       return this;
-    }
-    y(y){
-       this.element.y.baseVal.value=y;
-       return this;
-    }
-    width(w){
-       this.element?.setAttribute("width",w);
-       return this;
-    }
-    height(h){
-       this.element?.setAttribute("height",h);
-       return this;
-    }
-    setSrc(src=""){
-      this.element?.setAttributeNS('http://www.w3.org/1999/xlink', 'xlink:href', src)
-      return this;
-    }
-  } 
-const svgImage=(src,w,h,x,y)=>new ZikoSvgImage(src,w,h,x,y);
-export { 
-  svgImage,
-  ZikoSvgImage
- }

package/src/graphics/svg/Elements/Basic/index.js

@@ -1,11 +0,0 @@
-export * from "./circle.js";
-export * from "./ellipse.js";
-export * from "./foreign-object.js";
-export * from "./groupe.js";
-export * from "./image.js";
-export * from "./line.js";
-export * from "./link.js";
-export * from "./path.js";
-export * from "./polygon.js";
-export * from "./rect.js";
-export * from "./text.js";