ziko 0.0.11 → 0.0.13

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/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,
+}

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/index.js

@@ -0,0 +1,69 @@
+import{
+    Svg,
+    ZikoUISvg,
+    svgCircle,
+    svgEllipse,
+    svgImage,
+    svgLine,
+    svgPolygon,
+    svgRect,
+    svgText,
+    svgGroupe,
+    svgLink,
+    svgGrid,
+    svgObject,
+    svgPath
+} from "./svg/index.js";
+import {
+    Canvas,
+    canvasArc,
+    canvasCircle,
+    canvasPoints,
+    canvasLine,
+    canvasRect
+} from "./canvas/index.js";
+const Graphics={
+    Svg,
+    ZikoUISvg,
+    svgCircle,
+    svgEllipse,
+    svgImage,
+    svgLine,
+    svgPolygon,
+    svgRect,
+    svgText,
+    svgGroupe,
+    svgLink,
+    svgGrid,
+    svgObject,
+    svgPath,
+    Canvas, 
+    canvasArc,
+    canvasCircle,
+    canvasPoints,
+    canvasLine,
+    canvasRect,
+    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 "./svg/index.js"
+export * from "./canvas/index.js"
+export default Graphics;

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

@@ -0,0 +1,26 @@
+import ZikoSvgElement from "../ZikoSvgElement.js";
+class ZikoSvgCircle extends ZikoSvgElement{
+    constructor(cx,cy,r){
+      super("circle")
+      this.element=document?.createElementttNS(
+        "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 }

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

@@ -0,0 +1,21 @@
+import ZikoSvgElement from "../ZikoSvgElement.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 }

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

@@ -0,0 +1,33 @@
+import ZikoSvgElement from "../ZikoSvgElement.js";
+import { Flex } from "../../../../user-interface/elements/derived/Flex.js"
+class ZikoSvgForeignObject extends ZikoSvgElement{
+    constructor(x=0,y=0,w="100%",h="100%",...ZikoUIElement){
+      super("foreignObject")
+      this.items=[];
+      this.element=document?.createElementtNS(
+        "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,r)=>new ZikoSvgForeignObject(x,y,r);
+export { svgObject }

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

@@ -0,0 +1,29 @@
+import ZikoSvgElement from "../ZikoSvgElement.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 }

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

@@ -0,0 +1,33 @@
+import ZikoSvgElement from "../ZikoSvgElement.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 }

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

@@ -0,0 +1,29 @@
+import ZikoSvgElement from "../ZikoSvgElement.js";
+class ZikoSvgLine extends ZikoSvgElement{
+    constructor(x1,y1,x2,y2){
+      super()
+      this.element=document?.createElementtNS(
+        "http://www.w3.org/2000/svg",
+        "line",
+      );
+      this.x1(x1).y1(y1).x2(x2).y2(y2).stroke("black");
+    }
+    x1(x1){
+       this.element.x1.baseVal.value=x1;
+       return this;
+    }
+    y1(y1){
+       this.element.y1.baseVal.value=y1;
+       return this;
+    }
+    x2(x2){
+       this.element.x2.baseVal.value=x2;
+       return this;
+    } 
+    y2(y2){
+       this.element.y2.baseVal.value=y2;
+       return this;
+    } 
+  } 
+const svgLine=(x1,y1,x2,y2)=>new ZikoSvgLine(x1,y1,x2,y2);
+export{ svgLine }