ziko 0.0.1

package/src/Data/index.js

@@ -0,0 +1,64 @@
+import { 
+    markdown2html,
+    csv2arr,
+    csv2matrix,
+    csv2object,
+    csv2json,
+    csv2sql,
+    json2arr,
+    json2csv,
+    json2csvFile,
+    json2yml,
+    json2ymlFile,
+    json2xml,
+    json2xmlFile,
+    svg2str,
+    svg2ascii,
+    svg2imgUrl,
+    svg2img
+ } from "./Converter";
+import parseXML from "./Parser/xml";
+import { preload } from "./Api";
+const Data={
+    parseXML,
+    preload,
+    markdown2html,
+    csv2arr,
+    csv2matrix,
+    csv2object,
+    csv2json,
+    csv2sql,
+    json2arr,
+    json2csv,
+    json2csvFile,
+    json2yml,
+    json2ymlFile,
+    json2xml,
+    json2xmlFile,
+    svg2str,
+    svg2ascii,
+    svg2imgUrl,
+    svg2img,
+    ExtractAll: function () {
+        const keys = Object.keys(this);
+        for (let i = 0; i < keys.length; i++) {
+            const key = keys[i];
+            if (key !== 'ExtractAll' && key !== 'RemoveAll') {
+                globalThis[key] = this[key];
+            }
+        }
+        return this;
+    },
+    RemoveAll: function () {
+        const keys = Object.keys(this);
+        for (let i = 0; i < keys.length; i++) {
+            const key = keys[i];
+            if (key !== 'RemoveAll') {
+                delete globalThis[key];
+            }
+        }
+        return this;
+    }
+}
+export * from "./Converter" 
+export default Data

package/src/Graphics/Canvas/Elements/Basic/arc.js

@@ -0,0 +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);
+export{canvasArc,canvasCircle}

package/src/Graphics/Canvas/Elements/Basic/line.js

@@ -0,0 +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)
+export{canvasLine}

package/src/Graphics/Canvas/Elements/Basic/points.js

@@ -0,0 +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);
+export{canvasPoints};

package/src/Graphics/Canvas/Elements/Basic/polygon.js

@@ -0,0 +1,7 @@
+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

@@ -0,0 +1,46 @@
+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

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

package/src/Graphics/Canvas/Elements/Element.js

@@ -0,0 +1,115 @@
+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

@@ -0,0 +1,13 @@
+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/Canvas/Utils/color.js

@@ -0,0 +1,8 @@
+const hex2rgba = (hex) => {
+    return {
+        r: parseInt(hex.slice(1, 3), 16),
+        g: parseInt(hex.slice(3, 5), 16),
+        b: parseInt(hex.slice(5, 7), 16),
+        a: 255,
+    };
+};

package/src/Graphics/Canvas/Utils/floodFill.js

@@ -0,0 +1,58 @@
+const floodFill=(parent, imageData, newColor, x, y)=>{
+    const { width, height, data } = imageData;
+    const stack = [];
+    const baseColor = parent.getColorAtPixel(imageData, x, y);
+    let operator = { x, y };
+
+    // Check if base color and new color are the same
+    if (parent.colorMatch(baseColor, newColor)) {
+        return;
+    }
+
+    // Add the clicked location to stack
+    stack.push({ x: operator.x, y: operator.y });
+
+    while (stack.length) {
+        operator = stack.pop();
+        let contiguousDown = true; // Vertical is assumed to be true
+        let contiguousUp = true; // Vertical is assumed to be true
+        let contiguousLeft = false;
+        let contiguousRight = false;
+
+        // Move to top most contiguousDown pixel
+        while (contiguousUp && operator.y >= 0) {
+            operator.y--;
+            contiguousUp = parent.colorMatch(parent.getColorAtPixel(imageData, operator.x, operator.y), baseColor);
+        }
+
+        // Move downward
+        while (contiguousDown && operator.y < height) {
+            parent.setColorAtPixel(imageData, newColor, operator.x, operator.y);
+
+            // Check left
+            if (operator.x - 1 >= 0 && parent.colorMatch(parent.getColorAtPixel(imageData, operator.x - 1, operator.y), baseColor)) {
+                if (!contiguousLeft) {
+                    contiguousLeft = true;
+                    stack.push({ x: operator.x - 1, y: operator.y });
+                }
+            } else {
+                contiguousLeft = false;
+            }
+
+            // Check right
+            if (operator.x + 1 < width && parent.colorMatch(parent.getColorAtPixel(imageData, operator.x + 1, operator.y), baseColor)) {
+                if (!contiguousRight) {
+                    stack.push({ x: operator.x + 1, y: operator.y });
+                    contiguousRight = true;
+                }
+            } else {
+                contiguousRight = false;
+            }
+
+            operator.y++;
+            contiguousDown = parent.colorMatch(parent.getColorAtPixel(imageData, operator.x, operator.y), baseColor);
+        }
+    }
+    return imageData;
+}
+export default floodFill;

package/src/Graphics/Canvas/canvas.js

@@ -0,0 +1,189 @@
+import ZikoUIElement from "../../UI/ZikoUIElement.js";
+import {Matrix} from "../../Math/Matrix/index.js"
+import { convolute } from "../../Math/Signal/conv.js";
+class ZikoUICanvas extends ZikoUIElement{
+    constructor(w,h){
+        super();
+        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();
+        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
+    }
+    ImageData(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(element.style.width,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;

package/src/Graphics/Canvas/index.js

@@ -0,0 +1,15 @@
+import Canvas  from "./canvas.js";
+import { 
+    ZikoUICanvas
+ } from "./canvas.js";
+export { 
+    canvasArc,
+    canvasCircle,  
+    canvasPoints,
+    canvasLine,
+    canvasRect,
+} from "./Elements/index.js";
+export {
+    ZikoUICanvas,
+    Canvas,
+}