ziko 0.0.17 → 0.0.19

package/src/graphics/canvas/canvas.js

@@ -1,189 +1,176 @@
-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.element=document?.createElement("canvas");
-        this.ctx = this.element?.getContext("2d");
-        this.style({
-            border:"1px red solid",
-            //width:"300px",
-            //height:"300px"
-        })
-        this.transformMatrix=new Matrix([
-            [1,0,0],
-            [0,1,0],
-            [0,0,1]
-        ])
-        this.axisMatrix=new Matrix([
-            [-10,-10],
-            [10,10]
-        ])
-        // this.render(globalThis.__Ziko__.__Config__.default.render);
-        setTimeout(()=>this.resize(w,h),0);
-        this.on("sizeupdated",()=>this.adjust())
-    }
-    get Width(){
-        return this.element?.width;
-    }
-    get Height(){
-        return this.element?.height;
-    }
-    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.style({
-        //     width:w,
-        //     height: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
-}
-export default Canvas;
+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 +1,43 @@
-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);
+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 +1,26 @@
-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)
+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 +1,48 @@
-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);
+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 +1,7 @@
-import ZikoCanvasElement from "../_element.js";
-import { matrix } from "../../../../Math/Matrix/index.js";
-class ZikoCanvasPolygon extends ZikoCanvasElement{
-    constructor(ptsX,ptsY){
-        super()   
-    }
+import ZikoCanvasElement from "../_element.js";
+import { matrix } from "../../../../Math/Matrix/index.js";
+class ZikoCanvasPolygon extends ZikoCanvasElement{
+    constructor(ptsX,ptsY){
+        super()   
+    }
 }