ziko 0.0.24 → 0.0.26

package/dist/ziko.mjs

@@ -2,7 +2,7 @@
 /*
   Project: ziko.js
   Author: Zakaria Elalaoui
-  Date : Fri Jan 24 2025 23:58:20 GMT+0100 (UTC+01:00)
+  Date : Sat Mar 08 2025 13:43:10 GMT+0000 (UTC)
   Git-Repo : https://github.com/zakarialaoui10/ziko.js
   Git-Wiki : https://github.com/zakarialaoui10/ziko.js/wiki
   Released under MIT License
@@ -1943,7 +1943,49 @@ class ZikoEventClick extends ZikoEvent{
         return this;
      }     
 }
-const useClickEvent=target=>new ZikoEventClick(target);
+const useClickEvent=target=>new ZikoEventClick(target);
+
+
+// 
+
+
+// import { ZikoEvent, EVENT_CONTROLLER } from "./ZikoEvent.js";
+
+// class ZikoEventClick extends ZikoEvent {
+//     constructor(target) {
+//         super(target);
+//         this.event = null;
+//         this.cache = {
+//             prefixe: "",
+//             preventDefault: { click: false, dbclick: false },
+//             paused: { click: false, dbclick: false },
+//             stream: {
+//                 enabled: { click: false, dbclick: false },
+//                 clear: { click: false, dbclick: false },
+//                 history: { click: [], dbclick: [] }
+//             },
+//             callbacks: { click: [], dbclick: [] }
+//         };
+        
+//         this.__controller = {};
+//         ["click", "dbclick"].forEach(evt => {
+//             this.__controller[evt] = (e) => EVENT_CONTROLLER.call(this, e, evt, null, null);
+//         });
+//     }
+
+//     onClick(...callbacks) {
+//         return this.__onEvent("click", {}, ...callbacks);
+//     }
+
+//     onDbClick(...callbacks) {
+//         return this.__onEvent("dbclick", {}, ...callbacks);
+//     }
+// }
+
+// const useClickEvent = (target) => new ZikoEventClick(target);
+
+// export default useClickEvent;
+// export { useClickEvent, ZikoEventClick };
 
 function pointerdown_controller(e){
     EVENT_CONTROLLER.call(
@@ -4707,7 +4749,7 @@ class ZikoUIElement {
     }
     for (let i = 0; i < ele.length; i++) {
       if (["number", "string"].includes(typeof ele[i])) ele[i] = text(ele[i]);
-      if (ele[i] instanceof ZikoUIElement) {
+      if (ele[i]?.isZikoUIElement) {
         ele[i].cache.parent = this;
         this.element[adder](ele[i].element);
         ele[i].target = this.element;
@@ -4745,7 +4787,7 @@ class ZikoUIElement {
   remove(...ele) {
     const remove = (ele) => {
       if (typeof ele === "number") ele = this.items[ele];
-      if (ele instanceof ZikoUIElement) this.element?.removeChild(ele.element);
+      if (ele?.isZikoUIElement) this.element?.removeChild(ele.element);
       this.items = this.items.filter((n) => n !== ele);
     };
     for (let i = 0; i < ele.length; i++) remove(ele[i]);
@@ -4846,7 +4888,7 @@ class ZikoUIElement {
   }
   setTarget(tg) {
     if(this.isBody) return ;
-    if (tg instanceof ZikoUIElement) tg = tg.element;
+    if (tg?.isZikoUIElement) tg = tg.element;
     this.unrender();
     this.target = tg;
     this.render();
@@ -4862,7 +4904,7 @@ class ZikoUIElement {
   }
   render(target = this.target) {
     if(this.isBody)return ;
-    if(target instanceof ZikoUIElement)target=target.element;
+    if(target?.isZikoUIElement)target=target.element;
     this.target=target;
     this.target?.appendChild(this.element);
     return this;
@@ -4881,12 +4923,12 @@ class ZikoUIElement {
     return this;
   }
   after(ui){
-    if(ui instanceof ZikoUIElement) ui=ui.element;
+    if(ui?.isZikoUIElement) ui=ui.element;
     this.element?.after(ui);
     return this;
   }
   before(ui){
-    if(ui instanceof ZikoUIElement) ui=ui.element;
+    if(ui?.isZikoUIElement) ui=ui.element;
     this.element?.before(ui);
     return this;
   }
@@ -5191,9 +5233,9 @@ class __ZikoUIText__ extends ZikoUIElement {
         
         if(this.cache.lineBreak)this.element?.appendChild(globalThis.document?.createElement("br"));
       });
-      if(this.element?.innerHTML){
-        this.element.innerHTML = this.element.innerHTML.replace(/\n/g, '<br>').replace(/(?<!<[^>]+) /g, '&nbsp;');
-      }
+      // if(this.element?.innerHTML){
+      //   this.element.innerHTML = this.element.innerHTML.replace(/\n/g, '<br>').replace(/(?<!<[^>]+) /g, '&nbsp;');
+      // }
       return this
     }
     setValue(...value) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ziko",
-  "version": "0.0.24",
+  "version": "0.0.26",
   "description": "a versatile javaScript framework offering a rich set of UI components, advanced mathematical utilities, reactivity, animations, client side routing and graphics capabilities",
   "keywords": [
     "front-end",

package/src/data/parser/index.js

@@ -1 +1 @@
-export * from "./markdown"
+export * from "./xml"

package/src/reactivity/events/click.js

@@ -57,4 +57,46 @@ export default useClickEvent;
 export {
     useClickEvent,
     ZikoEventClick
-}
+}
+
+
+// 
+
+
+// import { ZikoEvent, EVENT_CONTROLLER } from "./ZikoEvent.js";
+
+// class ZikoEventClick extends ZikoEvent {
+//     constructor(target) {
+//         super(target);
+//         this.event = null;
+//         this.cache = {
+//             prefixe: "",
+//             preventDefault: { click: false, dbclick: false },
+//             paused: { click: false, dbclick: false },
+//             stream: {
+//                 enabled: { click: false, dbclick: false },
+//                 clear: { click: false, dbclick: false },
+//                 history: { click: [], dbclick: [] }
+//             },
+//             callbacks: { click: [], dbclick: [] }
+//         };
+        
+//         this.__controller = {};
+//         ["click", "dbclick"].forEach(evt => {
+//             this.__controller[evt] = (e) => EVENT_CONTROLLER.call(this, e, evt, null, null);
+//         });
+//     }
+
+//     onClick(...callbacks) {
+//         return this.__onEvent("click", {}, ...callbacks);
+//     }
+
+//     onDbClick(...callbacks) {
+//         return this.__onEvent("dbclick", {}, ...callbacks);
+//     }
+// }
+
+// const useClickEvent = (target) => new ZikoEventClick(target);
+
+// export default useClickEvent;
+// export { useClickEvent, ZikoEventClick };

package/src/ui/elements/ZikoUIElement.js

@@ -161,7 +161,7 @@ class ZikoUIElement {
     }
     for (let i = 0; i < ele.length; i++) {
       if (["number", "string"].includes(typeof ele[i])) ele[i] = text(ele[i]);
-      if (ele[i] instanceof ZikoUIElement) {
+      if (ele[i]?.isZikoUIElement) {
         ele[i].cache.parent = this;
         this.element[adder](ele[i].element);
         ele[i].target = this.element;
@@ -199,7 +199,7 @@ class ZikoUIElement {
   remove(...ele) {
     const remove = (ele) => {
       if (typeof ele === "number") ele = this.items[ele];
-      if (ele instanceof ZikoUIElement) this.element?.removeChild(ele.element);
+      if (ele?.isZikoUIElement) this.element?.removeChild(ele.element);
       this.items = this.items.filter((n) => n !== ele);
     };
     for (let i = 0; i < ele.length; i++) remove(ele[i]);
@@ -300,7 +300,7 @@ class ZikoUIElement {
   }
   setTarget(tg) {
     if(this.isBody) return ;
-    if (tg instanceof ZikoUIElement) tg = tg.element;
+    if (tg?.isZikoUIElement) tg = tg.element;
     this.unrender();
     this.target = tg;
     this.render();
@@ -316,7 +316,7 @@ class ZikoUIElement {
   }
   render(target = this.target) {
     if(this.isBody)return ;
-    if(target instanceof ZikoUIElement)target=target.element;
+    if(target?.isZikoUIElement)target=target.element;
     this.target=target;
     this.target?.appendChild(this.element);
     return this;
@@ -335,12 +335,12 @@ class ZikoUIElement {
     return this;
   }
   after(ui){
-    if(ui instanceof ZikoUIElement) ui=ui.element;
+    if(ui?.isZikoUIElement) ui=ui.element;
     this.element?.after(ui)
     return this;
   }
   before(ui){
-    if(ui instanceof ZikoUIElement) ui=ui.element;
+    if(ui?.isZikoUIElement) ui=ui.element;
     this.element?.before(ui)
     return this;
   }

package/src/ui/elements/text/__ZikoUIText__.js

@@ -47,9 +47,9 @@ class __ZikoUIText__ extends ZikoUIElement {
         
         if(this.cache.lineBreak)this.element?.appendChild(globalThis.document?.createElement("br"));
       });
-      if(this.element?.innerHTML){
-        this.element.innerHTML = this.element.innerHTML.replace(/\n/g, '<br>').replace(/(?<!<[^>]+) /g, '&nbsp;');
-      }
+      // if(this.element?.innerHTML){
+      //   this.element.innerHTML = this.element.innerHTML.replace(/\n/g, '<br>').replace(/(?<!<[^>]+) /g, '&nbsp;');
+      // }
       return this
     }
     setValue(...value) {

package/src/graphics/canvas/elements ( To Be Moved )/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 ( To Be Moved )/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 ( To Be Moved )/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 ( To Be Moved )/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 ( To Be Moved )/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 ( To Be Moved )/Chart/scatter.js

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

package/src/graphics/canvas/elements ( To Be Moved )/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 ( To Be Moved )/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 ( To Be Moved )/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 ( To Be Moved )/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 ( To Be Moved )/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
-}