ziko 0.0.17 → 0.0.19

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

@@ -1,46 +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)
+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 +1,2 @@
-// Scatter = Circle[]
-
+// Scatter = Circle[]
+

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

@@ -1,115 +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;       
-    }
-}
+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 +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"
+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

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

package/src/graphics/canvas/utils/color.js

@@ -1,8 +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,
-    };
+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

@@ -1,58 +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;
-}
+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

@@ -1,69 +1,10 @@
-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;
+export * from "./svg"
+export * from "./canvas"
+import * as SVG from "./svg"
+import * as CANVAS from "./canvas"
+
+const Graphics = {
+    ...SVG,
+    ...CANVAS
+}
+export default Graphics

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

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