ziko 0.0.23 → 0.0.24

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ziko",
-  "version": "0.0.23",
+  "version": "0.0.24",
   "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/app/globals.js

@@ -1,5 +1,5 @@
 const __UI__={}
-const __HYDRATION_MAP__ = []
+const __HYDRATION_MAP__ = new Map()
 const __Config__={
     default:{
         target:null,
@@ -13,7 +13,9 @@ const __Config__={
         const values=Object.values(pairs);
         for(let i=0;i<keys.length;i++)this.default[keys[i]]=values[i];
     },
-    init:()=>document.documentElement.setAttribute("data-engine","zikojs")
+    init:()=>document.documentElement.setAttribute("data-engine","zikojs"),
+    renderingMode :"spa",
+    isSSC : false,
 }
 export {
     __UI__,

package/src/data/converter/index.js

@@ -1,9 +1,5 @@
-export { 
-    markdown2html
- } from "./markdown.js";
-export { 
-  adoc2html
-} from "./adoc.js";
+// export { markdown2html } from "./markdown.js";
+// export { adoc2html } from "./adoc.js";
  export { 
     csv2arr,
     csv2matrix,

package/src/graphics/canvas/index.js

@@ -1,2 +1,176 @@
-export * from "./canvas";
-export * from "./elements"
+import { ZikoUIElement } from "../../ui/index.js";
+import {Matrix} from "../../math/matrix/index.js"
+// import { convolute } from "../../math/signal/conv.js";
+class ZikoUICanvas extends ZikoUIElement{
+    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/utils/floodFill.js

@@ -4,7 +4,6 @@ const floodFill=(parent, imageData, newColor, x, y)=>{
     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;
     }

package/src/graphics/svg/index.js

@@ -1,2 +1,69 @@
-export * from "./svg.js"
-export * from "./elements/index.js"
+import { ZikoUIElement } from "../../ui/index.js";
+class ZikoUISvg extends ZikoUIElement {
+    constructor(w=360,h=300) {
+      super("svg","svg");
+      //this.cache={};
+      // this.setAttr("width",w);
+      // this.setAttr("height",h);
+      // this.setAttr({
+      //   width : w,
+      //   height : h
+      // })
+      this.style({border:"1px black solid"});
+      //this.view(-w/2,-h/2,w/2,h/2);
+      this.size(w, h)
+      this.view(-10,-10,10,10);
+    }
+    size(w, h){
+      this.setAttr({
+        width : w,
+        height : h
+      });
+      return this
+    }
+    view(x1,y1,x2,y2){
+      let width=Math.abs(x2-x1);
+      let height=Math.abs(y2-y1);
+      this.setAttr("viewBox",[x1,y1,width,height].join(" "));
+      this.st.scaleY(-1);
+      return this;
+    }
+    add(...svgElement){
+      for(let i=0;i<svgElement.length;i++){
+        this.element.append(svgElement[i].element);
+        this.items.push(svgElement[i])
+      }
+      this.maintain()
+      return this;
+    }
+    remove(...svgElement){
+      for(let i=0;i<svgElement.length;i++){
+        this.element?.removeChild(svgElement[i].element);
+        this.items=this.items.filter(n=>!svgElement)
+      }
+      this.maintain();
+      return this;     
+    }
+    mask(){
+  
+    }
+    toString(){
+      return  (new XMLSerializer()).serializeToString(this.element);
+    }
+    btoa(){
+      return btoa(this.toString())
+    }
+    toImg(){
+      return 'data:image/svg+xml;base64,'+this.btoa()
+    }
+    toImg2(){
+      return "data:image/svg+xml;charset=utf8,"+this.toString().replaceAll("<","%3C").replaceAll(">","%3E").replaceAll("#","%23").replaceAll('"',"'");
+    }
+    
+  }
+
+  const Svg =(w,h)=>new ZikoUISvg(w,h);
+  export{
+    Svg,
+    ZikoUISvg,
+}

package/src/reactivity/hooks/index.js

@@ -2,7 +2,7 @@ export * from "./contexte"
 export * from "./decorators"
 export * from "./head"
 export * from "./interactions"
-export * from "./sensors"
+// export * from "./sensors"
 export * from "./storage"
 export * from "./ui"
 // export * from "./window"

package/src/ui/elements/{primitives/ZikoUIElement.js → ZikoUIElement.js}

@@ -1,5 +1,5 @@
-import { ZikoUseStyle } from "../../../reactivity/hooks/UI/useStyle.js";
-import { ZikoUIElementStyle } from "../../style/index.js";
+import { ZikoUseStyle } from "../../reactivity/hooks/UI/useStyle.js";
+import { ZikoUIElementStyle } from "../style/index.js";
 import { 
   usePointerEvent,
   useMouseEvent, 
@@ -16,9 +16,9 @@ import {
   watchSize,
   watchAttr,
   watchChildren
-} from "../../../reactivity/index.js"
-import { Random } from "../../../math/index.js";
-import { Str } from "../../../data/index.js";
+} from "../../reactivity/index.js"
+import { Random } from "../../math/index.js";
+import { Str } from "../../data/index.js";
 import { text } from "./text/text.js";
 class ZikoUIElement {
   constructor(element, name="", {el_type="html", useDefaultStyle=false}={}){
@@ -78,10 +78,9 @@ class ZikoUIElement {
     globalThis.__Ziko__.__UI__[this.cache.name]?globalThis.__Ziko__.__UI__[this.cache.name]?.push(this):globalThis.__Ziko__.__UI__[this.cache.name]=[this];
     element && globalThis.__Ziko__.__Config__.default.render && this.render()
     this.setAttr("data-ref", this.uuid);
-    globalThis.__Ziko__.__HYDRATION_MAP__.push({
-      ref : this.uuid,
-      comp : ()=>this
-    })
+    if(globalThis.__Ziko__.__Config__.renderingMode !== "spa" && !globalThis.__Ziko__.__Config__.isSSC) {
+      globalThis.__Ziko__.__HYDRATION_MAP__.set(this.uuid, ()=>this)
+  }
   }
   get element(){
     return this.__ele__;

package/src/ui/elements/derived ( To Be Moved)/index.js

@@ -0,0 +1,12 @@
+export * from "./flex";
+export * from "./grid";
+// export * from "./accordion";
+// export * from "./carousel";
+// export * from "./code-note";
+// export * from "./tabs";
+// export * from "./alert";
+// export * from "./splitter";
+// export * from "./pagination";
+// export * from "./menu";
+// export * from "./modal"
+// export * from "./slider"

package/src/ui/elements/{derived/flex → flex}/index.js

@@ -1,5 +1,5 @@
-import ZikoUIContainerElement from "../../primitives/ZikoUIContainerElement.js";
-class ZikoUIFlex extends ZikoUIContainerElement {
+import ZikoUIElement from "../ZikoUIElement.js";
+class ZikoUIFlex extends ZikoUIElement {
   constructor(tag = "div", w = "100%", h = "100%") {
     super(tag ,"Flex");
     this.direction = "cols";

package/src/ui/elements/{derived/grid → grid}/index.js

@@ -1,5 +1,5 @@
-import ZikoUIContainerElement from "../../primitives/ZikoUIContainerElement"
-class ZikoUIGrid extends ZikoUIContainerElement {
+import ZikoUIElement from "../ZikoUIElement"
+class ZikoUIGrid extends ZikoUIElement {
     constructor(tag ="div", w = "50vw", h = "50vh") {
       super(tag,"Grid");
       this.direction = "cols";

package/src/ui/elements/{primitives/index.js → index.js}

@@ -5,4 +5,6 @@ export * from "./semantic/index.js";
 export * from "./embaded/index.js";
 export * from "./table/index.js";
 export * from "./media/index.js";
-export * from "./misc/index.js";
+export * from "./misc/index.js";
+export * from "./flex/index.js"
+export * from "./grid/index.js"

package/src/ui/elements/{primitives/io → io}/Form/index.js

@@ -1,4 +1,4 @@
-import { ZikoUIFlex } from "../../../derived/flex";
+import { ZikoUIFlex } from "../../flex/index.js";
 class ZikoUIForm extends ZikoUIFlex{
     constructor(...items){
         super("form", "Form");

package/src/ui/elements/{primitives/io → io}/Inputs/__helpers__.js

@@ -1,5 +1,5 @@
 import ZikoUIElement from "../../ZikoUIElement.js";
-import { Random } from "../../../../../math/index.js";
+import { Random } from "../../../../math/index.js";
 class ZikoUILabel extends ZikoUIElement{
     constructor(){
       super();

package/src/ui/elements/{primitives/io → io}/Inputs/input/index.js

@@ -1,5 +1,5 @@
 import ZikoUIElement from "../../../ZikoUIElement.js";
-import { useInputEvent } from "../../../../../../reactivity/index.js";
+import { useInputEvent } from "../../../../../reactivity/index.js";
 class ZikoUIInput extends ZikoUIElement {
   constructor(type, name , value = "", datalist) {
     super("input", "input");

package/src/ui/elements/{primitives/list → list}/index.js

@@ -1,7 +1,6 @@
 import ZikoUIElement from "../ZikoUIElement.js";
-import ZikoUIContainerElement from "../ZikoUIContainerElement.js";
 import {text} from "../text/index.js";
-class ZikoUILI extends ZikoUIContainerElement{
+class ZikoUILI extends ZikoUIElement{
   constructor(UI){
     super("li","li");
     this.append(UI);
@@ -10,7 +9,7 @@ class ZikoUILI extends ZikoUIContainerElement{
     return true;
   }
 }
-class ZikoUIList extends ZikoUIContainerElement {
+class ZikoUIList extends ZikoUIElement {
     constructor(element,name) {
       super(element,name);
       delete this.append;

package/src/ui/elements/{primitives/misc → misc}/index.js

@@ -1,6 +1,5 @@
 import ZikoUIElement from "../ZikoUIElement.js";
-import ZikoUIContainerElement from "../ZikoUIContainerElement.js";
-class ZikoUIHtmlTag extends ZikoUIContainerElement {
+class ZikoUIHtmlTag extends ZikoUIElement {
   constructor(element) {
     super(element,"html");
   }
@@ -53,7 +52,7 @@ class ZikoUIBr extends ZikoUIElement {
       return true
     }
   }
-  class ZikoUILink extends ZikoUIContainerElement{
+  class ZikoUILink extends ZikoUIElement{
     constructor(href){
       super("a","link");
       Object.assign(this.cache,{

package/src/ui/elements/{primitives/semantic → semantic}/index.js

@@ -1,5 +1,5 @@
-import ZikoUIContainerElement from "../ZikoUIContainerElement.js";
-class ZikoUIMain extends ZikoUIContainerElement{
+import ZikoUIElement from "../ZikoUIElement";
+class ZikoUIMain extends ZikoUIElement{
     constructor(){
       super("main","Main");
     }
@@ -7,7 +7,7 @@ class ZikoUIMain extends ZikoUIContainerElement{
       return true
     }
   }
-  class ZikoUIHeader extends ZikoUIContainerElement{
+  class ZikoUIHeader extends ZikoUIElement{
     constructor(){
       super("header","Header");
     }
@@ -15,7 +15,7 @@ class ZikoUIMain extends ZikoUIContainerElement{
       return true
     }
   }
-  class ZikoUINav extends ZikoUIContainerElement{
+  class ZikoUINav extends ZikoUIElement{
     constructor(){
       super("nav","Nav");
     }
@@ -23,7 +23,7 @@ class ZikoUIMain extends ZikoUIContainerElement{
       return true
     }
   }
-  class ZikoUISection extends ZikoUIContainerElement{
+  class ZikoUISection extends ZikoUIElement{
     constructor(){
       super("section","Section");
       this.style({position:"relative"})
@@ -32,7 +32,7 @@ class ZikoUIMain extends ZikoUIContainerElement{
       return true
     }
   }
-  class ZikoUIArticle extends ZikoUIContainerElement{
+  class ZikoUIArticle extends ZikoUIElement{
     constructor(){
       super("article","Article");
     }
@@ -40,7 +40,7 @@ class ZikoUIMain extends ZikoUIContainerElement{
       return true
     }
   }
-  class ZikoUIAside extends ZikoUIContainerElement{
+  class ZikoUIAside extends ZikoUIElement{
     constructor(){
       super("aside","Aside");
     }
@@ -48,7 +48,7 @@ class ZikoUIMain extends ZikoUIContainerElement{
       return true
     }
   }
-  class ZikoUIFooter extends ZikoUIContainerElement{
+  class ZikoUIFooter extends ZikoUIElement{
     constructor(){
       super("footer","Footer");
       this.element=document?.createElement("footer");

package/src/ui/elements/{primitives/table → table}/table.js

@@ -1,6 +1,6 @@
 import ZikoUIElement from "../ZikoUIElement.js"
 import { tbody,caption,ZikoUICaption,thead} from "./elements.js";
-import { matrix } from "../../../../math/matrix/index.js";
+import { matrix } from "../../../math/matrix/index.js";
 import { MatrixToTableUI } from "./utils.js";
 class ZikoUITable extends ZikoUIElement {
     constructor(body,{caption=null,head=null,foot=null}={}){

package/src/ui/elements/{primitives/text → text}/__ZikoUIText__.js

@@ -1,5 +1,4 @@
 import ZikoUIElement from "../ZikoUIElement.js";
-import ZikoContainerElement from "../ZikoUIContainerElement.js";
 import { 
   ZikoUISubText,
   ZikoUISupText
@@ -7,12 +6,12 @@ import {
 import { 
   Complex,
   Matrix
- } from "../../../../math/index.js";
+ } from "../../../math/index.js";
 import { 
   arr2str,
   obj2str
-} from "../../../../data/index.js";
-class __ZikoUIText__ extends ZikoContainerElement {
+} from "../../../data/index.js";
+class __ZikoUIText__ extends ZikoUIElement {
     constructor(tag, name, lineBreak,...value) {
       super(tag, name);
       this.addValue(...value);

package/src/ui/index.js

@@ -1,26 +1,26 @@
-export * from "./elements/primitives/text";
-export * from "./elements/primitives/list";
-export * from "./elements/primitives/io";
-export * from "./elements/primitives/media";
-export * from "./elements/primitives/table";
-export * from "./elements/primitives/semantic";
-export * from "./elements/primitives/misc";
-export * from "./elements/derived";
+export * from "./elements/text";
+export * from "./elements/list";
+export * from "./elements/io";
+export * from "./elements/media";
+export * from "./elements/table";
+export * from "./elements/semantic";
+export * from "./elements/misc";
+export * from "./elements/flex";
+export * from "./elements/grid";
 
-import * as Text from "./elements/primitives/text";
-import * as List from "./elements/primitives/list";
-import * as Io from "./elements/primitives/io";
-import * as Media from "./elements/primitives/media";
-import * as Table from "./elements/primitives/table";
-import * as Semantic from "./elements/primitives/semantic";
-import * as Misc from "./elements/primitives/misc";
-import * as Derived from "./elements/derived";
+import * as Text from "./elements/text";
+import * as List from "./elements/list";
+import * as Io from "./elements/io";
+import * as Media from "./elements/media";
+import * as Table from "./elements/table";
+import * as Semantic from "./elements/semantic";
+import * as Misc from "./elements/misc";
+import * as Flex from "./elements/flex";
+import * as Grid from "./elements/grid";
 
-import ZikoUIElement from "./elements/primitives/ZikoUIElement";
-import ZikoUIContainerElement from "./elements/primitives/ZikoUIContainerElement";
+import ZikoUIElement from "./elements/ZikoUIElement";
 
 export{
-    ZikoUIContainerElement,
     ZikoUIElement
 }
 const UI = {
@@ -31,8 +31,8 @@ const UI = {
     ...Table,
     ...Semantic,
     ...Misc,
-    ...Derived,
+    ...Flex,
+    ...Grid,
     ZikoUIElement,
-    ZikoUIContainerElement
 }
 export default UI;

package/src/ui/utils/index.js

@@ -1,4 +1,4 @@
-import ZikoUIElement from "../elements/primitives/ZikoUIElement.js";
+import ZikoUIElement from "../elements/ZikoUIElement.js";
 const Id = (a) => document.getElementById(a);
 const Class = (a) => [...document.getElementsByClassName(a)];
 const $=(...selector)=>{