ziko 0.0.16 → 0.0.18

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ziko",
-  "version": "0.0.16",
+  "version": "0.0.18",
   "description": "a versatile JavaScript library offering a rich set of UI components, advanced mathematical utilities,Reactivity,animations,client side routing and graphics capabilities",
   "keywords": [
     "Zikojs",

package/readme.md

@@ -0,0 +1,137 @@
+<img src="docs/assets/zikojs.png" width="200" align="right" alt="zikojs logo">
+
+*💡 **Zikojs** a versatile JavaScript library offering a rich set of UI components, advanced mathematical utilities,Reactivity,animations,client side routing and graphics capabilities* 
+
+## Install 
+```bash
+npm install ziko
+```
+## 🎬 Demos 
+- ### [  Windows entanglement using zikojs and ziko-three ](https://www.linkedin.com/feed/update/urn:li:activity:7144023650394918913/) 
+
+## Features :
+
+### 🔰 Seamlessly operates in both browser and Node.js environments
+
+### 🔰 Mathematical Utilities & Tips
+
+- ***Flexible Math Functions*** : 
+
+ZikoJS offers flexible math utilities, such as the `mapfun` function, which allows mapping standard mathematical operations to complex and nested data structures. 
+For example, the `cos` function in ZikoJS is built on top of mapfun, enabling it to handle multiple arguments with diverse types (numbers, arrays, objects).
+
+```js
+import { cos, PI } from "ziko";
+const result = cos(PI, PI / 2, PI / 4, [PI / 6, PI / 3], {
+  x: PI / 2,
+  y: PI / 4,
+  z: [0, PI / 12],
+}
+);
+/*
+result =>
+[
+  -1,
+  0,
+  0.707106781186548,
+  [0.866025403784439, 0.5],
+  {
+    x: 0,
+    y: 0.707106781186548,
+    z: [1, 0.965925826289068],
+  },
+];
+*/
+// console.log(result)
+
+```
+You can also built your own flexible Math function using this mapfun util : 
+```js
+import { mapfun } from "ziko";
+const parabolic_func = (a, b, c, x) => a * x ** 2 + b * x + c;
+const map_parabolic_func =
+  (a, b, c) =>
+  (...X) =>
+    mapfun((n) => parabolic_func(a, b, c, n), ...X);
+const a = -1.5,
+  b = 2,
+  c = 3;
+const X = [0, 1, 2, 3];
+console.log(parabolic_func(a, b, c)(X));
+// [3,3,1,3]
+
+```
+
+- Built in Matrix, Complex, Random ... classes 
+
+### 🔰 No Template Engines :
+zikojs UI module adopts a distinctive approach to building and updating user interfaces. It doesn't rely on predefined markup templates. Instead, it leverages a hyperscript-like syntax to dynamically create and update user interfaces.
+
+### 🔰 Built in File-Based Routing with Single Page Application
+
+ZikoJS provides an intuitive file-based routing mechanism that simplifies the development of single-page applications. By organizing your page components into a directory structure, you can automatically generate routes based on the file paths. This approach enhances the maintainability of your code by allowing you to easily manage and navigate between different views in your application.
+
+To implement file-based routing, simply use the following code:
+
+```js
+import { FileBasedRouting } from "ziko";
+FileBasedRouting(import.meta.glob("./src/pages/**/*.js"))
+```
+In this example, the import.meta.glob function dynamically imports all JavaScript files from the specified directory (./src/pages/**). Each file represents a separate route in your application, allowing you to create a clean and organized routing structure without the need for manual route configuration.
+
+### 🔰 Flexible Integration with Popular Frameworks/Libraries
+
+**ZikoJS** is designed to seamlessly integrate into other frameworks and libraries. By installing the [ziko-wrapper](https://github.com/zakarialaoui10/ziko-wrapper) package, you can easily use ZikoJS within your favorite frontend ecosystems.
+
+Currently supported frameworks: 
+ - ***REACT***
+ - ***Solid***
+ - ***Preact***
+ - ***Svelte***
+ - ***Vue***
+
+### 🔰 Custom Markdown Parser 
+
+[Mdzjs](https://github.com/zakarialaoui10/mdzjs) allowing you to write markdown content alongside Zikojs Elements 
+
+```md
+---
+ module : 
+  - import InteractiveBlock from "./InteractiveBlock"
+ title : Article 1
+---
+
+# Hello World this is markdown heading 
+
+<InteractiveBlock data = "Hello" />
+```
+
+### 🔰 Growing Add-On Ecosystem
+
+|Addon|Purpose|Dependencies|Repository|
+|-|-|-|-|
+|ziko-gl||`threejs`|
+|ziko-code||`codeMirror`||
+|ziko-chart||`chartjs`||
+|ziko-pdf||`jsPdf.js`||
+|ziko-xls||`xls.js`||
+|ziko-lottie||`Lottie-web`|
+|ziko-rough||`rough.js`|
+|ziko-icons||`fontawesome`|
+|ziko-tippy||`tippy.js`|
+
+
+### 🔰 Rich UI elements
+
+### 🔰 Reactivity 
+
+### 🔰 Time loop and animations support
+
+## ⭐️ Show your support <a name="support"></a>
+
+If you appreciate the library, kindly demonstrate your support by giving it a star!<br>
+[![Star](https://img.shields.io/github/stars/zakarialaoui10/ziko.js?style=social)](https://github.com/zakarialaoui10/ziko.js)
+<!--## Financial support-->
+# License 
+This projet is licensed under the terms of MIT License 
+<img src="https://img.shields.io/github/license/zakarialaoui10/zikojs?color=rgb%2820%2C21%2C169%29" width="100" align="right">

package/src/app/spa-file-based-routing.js

@@ -4,7 +4,6 @@ import { Section } from "../ui";
 async function FileBasedRouting(pages /* use import.meta.glob */){
    const routes = Object.keys(pages)
    const root = findCommonPath(routes)
-   // console.log({root})
    const pairs = {}
    for(let i=0; i<routes.length; i++){
       const module = await pages[routes[i]]()

package/src/data/datatypes/color.js

@@ -0,0 +1,11 @@
+class Color {
+    constructor(){
+        
+    }
+    static rgb(){
+
+    }
+    static rgba(){
+
+    }
+}

package/src/graphics/canvas/canvas.js

@@ -1,15 +1,12 @@
 import ZikoUIContainerElement from "../../ui/elements/primitives/ZikoUIContainerElement.js";
 import {Matrix} from "../../math/matrix/index.js"
-import { convolute } from "../../math/signal/conv.js";
+// import { convolute } from "../../math/signal/conv.js";
 class ZikoUICanvas extends ZikoUIContainerElement{
     constructor(w,h){
         super("canvas","canvas");
-        //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],
@@ -20,16 +17,10 @@ class ZikoUICanvas extends ZikoUIContainerElement{
             [-10,-10],
             [10,10]
         ])
-        // this.render(globalThis.__Ziko__.__Config__.default.render);
-        setTimeout(()=>this.resize(w,h),0);
+        // setTimeout(()=>this.resize(w,h),0);
+        requestAnimationFrame(()=>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];
     }
@@ -72,10 +63,6 @@ class ZikoUICanvas extends ZikoUIContainerElement{
         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]);
@@ -89,10 +76,10 @@ class ZikoUICanvas extends ZikoUIContainerElement{
         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.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]
@@ -116,7 +103,7 @@ class ZikoUICanvas extends ZikoUIContainerElement{
     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.ctx.fillRect(0, 0, this.width, this.height);
         this.applyTransformMatrix();
         this.draw();
     }
@@ -124,17 +111,17 @@ class ZikoUICanvas extends ZikoUIContainerElement{
         this.ctx.lineWidth=w/this.transformMatrix[0][0];
         return this
     }
-    getImageData(x=0,y=0,w=this.Width,h=this.Height){
+    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.ctx.clearRect(0, 0, this.width, this.height);
         this.applyTransformMatrix(); 
         return this;
     }
     clone(){
-        console.log(this.Width)
+        console.log(this.width)
         const canvas=new ZikoUICanvas();
         canvas.items=this.items;
         canvas.transformMatrix=this.transformMatrix;
@@ -184,6 +171,6 @@ class ZikoUICanvas extends ZikoUIContainerElement{
 
 const Canvas=(w,h)=>new ZikoUICanvas(w,h);
 export{
-    ZikoUICanvas
+    ZikoUICanvas,
+    Canvas
 }
-export default Canvas;

package/src/graphics/canvas/elements/{Basic → basic}/arc.js

@@ -1,4 +1,4 @@
-import ZikoCanvasElement from "../Element.js";
+import ZikoCanvasElement from "../element.js";
 class CanvasArc extends ZikoCanvasElement{
     constructor(x,y,r,angle){
         super(x,y);

package/src/graphics/canvas/elements/{Basic → basic}/line.js

@@ -1,4 +1,4 @@
-import ZikoCanvasElement from "../Element.js";
+import ZikoCanvasElement from "../element.js";
 class CanvasLine extends ZikoCanvasElement{
     constructor(x0,y0,x1,y1){
         super();

package/src/graphics/canvas/elements/{Basic → basic}/points.js

@@ -1,4 +1,4 @@
-import ZikoCanvasElement from "../Element.js";
+import ZikoCanvasElement from "../element.js";
 import { matrix } from "../../../../math/matrix/index.js";
 class CanvasPoints extends ZikoCanvasElement{
     constructor(ptsX,ptsY){

package/src/graphics/canvas/elements/{Basic → basic}/rect.js

@@ -1,4 +1,4 @@
-import ZikoCanvasElement from "../Element.js";
+import ZikoCanvasElement from "../element.js";
 class CanvasRect extends ZikoCanvasElement{
     constructor(x,y,w,h){
         super(x,y);

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

@@ -1,13 +1,13 @@
 export {
     canvasArc,
     canvasCircle
-} from "./Basic/arc.js";
+} from "./basic/arc.js";
 export {
     canvasPoints
-} from "./Basic/points.js";
+} from "./basic/points.js";
 export {
     canvasLine
-}from "./Basic/line.js"
+}from "./basic/line.js"
 export {
     canvasRect
-} from "./Basic/rect.js"
+} 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/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"
+export * from "./canvas"
+import * as SVG from "./svg"
+import * as CANVAS from "./canvas"
+
+const Graphics = {
+    ...SVG,
+    ...CANVAS
 }
-export * from "./svg/index.js"
-export * from "./canvas/index.js"
-export default Graphics;
+export default Graphics

package/src/graphics/svg/{Elements/Basic → elements/basic}/circle.js

@@ -1,4 +1,4 @@
-import ZikoSvgElement from "../ZikoSvgElement.js";
+import ZikoSvgElement from "../ziko-svg-element.js";
 class ZikoSvgCircle extends ZikoSvgElement{
     constructor(cx,cy,r){
       super("circle")
@@ -23,4 +23,7 @@ class ZikoSvgCircle extends ZikoSvgElement{
     }  
   } 
 const svgCircle=(x,y,r)=>new ZikoSvgCircle(x,y,r);
-export { svgCircle }
+export { 
+  svgCircle,
+  ZikoSvgCircle
+ }

package/src/graphics/svg/{Elements/Basic → elements/basic}/ellipse.js

@@ -1,4 +1,4 @@
-import ZikoSvgElement from "../ZikoSvgElement.js";
+import ZikoSvgElement from "../ziko-svg-element.js";
 class ZikoSvgEllipse extends ZikoSvgElement{
     constructor(cx,cy,rx,ry){
       super("ellipse")
@@ -18,4 +18,7 @@ class ZikoSvgEllipse extends ZikoSvgElement{
     } 
   } 
 const svgEllipse=(x,y,rx,ry)=>new ZikoSvgEllipse(x,y,rx,ry);
-export{ svgEllipse }
+export{ 
+  svgEllipse,
+  ZikoSvgEllipse
+ }

package/src/graphics/svg/{Elements/Basic/foreignObject.js → elements/basic/foreign-object.js}

@@ -1,5 +1,5 @@
-import ZikoSvgElement from "../ZikoSvgElement.js";
-import { Flex } from "../../../../ui/elements/derived/flex"
+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")
@@ -29,5 +29,8 @@ class ZikoSvgForeignObject extends ZikoSvgElement{
       return this;   
       }
   } 
-const svgObject=(x,y,r)=>new ZikoSvgForeignObject(x,y,r);
-export { svgObject }
+const svgObject=(x, y, w, h)=>new ZikoSvgForeignObject(x, y, w, h);
+export { 
+  svgObject,
+  ZikoSvgForeignObject
+}

package/src/graphics/svg/{Elements/Basic → elements/basic}/groupe.js

@@ -1,4 +1,4 @@
-import ZikoSvgElement from "../ZikoSvgElement.js";
+import ZikoSvgElement from "../ziko-svg-element.js";
 class ZikoSvgGroupe extends ZikoSvgElement{
     constructor(...svgElement){
       super();
@@ -26,4 +26,7 @@ class ZikoSvgGroupe extends ZikoSvgElement{
     }
 }
 const svgGroupe=(...svgElement)=>new ZikoSvgGroupe(...svgElement)
-export { svgGroupe }
+export { 
+  svgGroupe,
+  ZikoSvgGroupe
+ }

package/src/graphics/svg/{Elements/Basic → elements/basic}/image.js

@@ -1,4 +1,4 @@
-import ZikoSvgElement from "../ZikoSvgElement.js";
+import ZikoSvgElement from "../ziko-svg-element.js";
 class ZikoSvgImage extends ZikoSvgElement{
     constructor(src="",w="100%",h="100%",x=0,y=0){
       super()
@@ -30,4 +30,7 @@ class ZikoSvgImage extends ZikoSvgElement{
     }
   } 
 const svgImage=(src,w,h,x,y)=>new ZikoSvgImage(src,w,h,x,y);
-export { svgImage }
+export { 
+  svgImage,
+  ZikoSvgImage
+ }

package/src/graphics/svg/elements/basic/index.js

@@ -0,0 +1,11 @@
+export * from "./circle.js";
+export * from "./ellipse.js";
+export * from "./foreign-object.js";
+export * from "./groupe.js";
+export * from "./image.js";
+export * from "./line.js";
+export * from "./link.js";
+export * from "./path.js";
+export * from "./polygon.js";
+export * from "./rect.js";
+export * from "./text.js";

package/src/graphics/svg/{Elements/Basic → elements/basic}/line.js

@@ -1,4 +1,4 @@
-import ZikoSvgElement from "../ZikoSvgElement.js";
+import ZikoSvgElement from "../ziko-svg-element.js";
 class ZikoSvgLine extends ZikoSvgElement{
     constructor(x1,y1,x2,y2){
       super()
@@ -26,4 +26,7 @@ class ZikoSvgLine extends ZikoSvgElement{
     } 
   } 
 const svgLine=(x1,y1,x2,y2)=>new ZikoSvgLine(x1,y1,x2,y2);
-export{ svgLine }
+export{ 
+   svgLine,
+   ZikoSvgLine
+ }

package/src/graphics/svg/{Elements/Basic → elements/basic}/link.js

@@ -1,4 +1,4 @@
-import ZikoSvgElement from "../ZikoSvgElement.js";
+import ZikoSvgElement from "../ziko-svg-element.js";
 class ZikoSvgLink extends ZikoSvgElement{
     constructor(href,...svgElement){
       super();
@@ -27,4 +27,7 @@ class ZikoSvgLink extends ZikoSvgElement{
     }
 }
 const svgLink=(href,...svgElement)=>new ZikoSvgLink(href,...svgElement)
-export{ svgLink }
+export{ 
+  svgLink,
+  ZikoSvgLink
+ }

package/src/graphics/svg/{Elements/Basic → elements/basic}/path.js

@@ -1,4 +1,4 @@
-import ZikoSvgElement from "../ZikoSvgElement.js";
+import ZikoSvgElement from "../ziko-svg-element.js";
 class ZikoSvgPath extends ZikoSvgElement{
     constructor(){
     super()
@@ -56,4 +56,7 @@ class ZikoSvgPath extends ZikoSvgElement{
 }
 
 const svgPath=()=>new ZikoSvgPath();
-export{ svgPath }
+export{ 
+    svgPath,
+    ZikoSvgPath
+ }

package/src/graphics/svg/{Elements/Basic → elements/basic}/polygon.js

@@ -1,4 +1,4 @@
-import ZikoSvgElement from "../ZikoSvgElement.js";
+import ZikoSvgElement from "../ziko-svg-element.js";
 class ZikoSvgPolygon extends ZikoSvgElement{
     constructor(X=[],Y=[]){
       super()

package/src/graphics/svg/{Elements/Basic → elements/basic}/polyline.js

@@ -1,4 +1,7 @@
 import ZikoSvgElement from "../ZikoSvgElement.js";
 class ZikoSvgPolyLine extends ZikoSvgElement{}
 const svgPolyLine=(X,Y)=>new ZikoSvgPolyLine(X,Y);
-export { svgPolyLine }
+export { 
+    svgPolyLine,
+    ZikoSvgPolyLine
+ }

package/src/graphics/svg/{Elements/Basic → elements/basic}/rect.js

@@ -1,5 +1,5 @@
 
-import ZikoSvgELement from "../ZikoSvgElement.js";
+import ZikoSvgELement from "../ziko-svg-element.js";
 class ZikoSvgRectangle extends ZikoSvgELement{
     constructor(x,y,w,h,center=true){
       super()
@@ -40,4 +40,7 @@ class ZikoSvgRectangle extends ZikoSvgELement{
     } 
   } 
   const svgRect=(x,y,w,h,center)=>new ZikoSvgRectangle(x,y,w,h,center);
-  export{ svgRect }
+  export{ 
+   svgRect,
+   ZikoSvgRectangle
+ }

package/src/graphics/svg/{Elements/Basic → elements/basic}/text.js

@@ -1,4 +1,4 @@
-import ZikoSvgElement from "../ZikoSvgElement.js";
+import ZikoSvgElement from "../ziko-svg-element.js";
 class ZikoSvgText extends ZikoSvgElement{
     constructor(text,x,y){
       super()
@@ -23,4 +23,7 @@ class ZikoSvgText extends ZikoSvgElement{
     }
   } 
 const svgText=(text,x,y)=>new ZikoSvgText(text,x,y);
-export{ svgText }
+export{ 
+  svgText,
+  ZikoSvgText
+ }

package/src/graphics/svg/{Elements/Derived → elements/derived}/grid.js

@@ -1,4 +1,4 @@
-import { svgPath } from "../Basic/path"
+import { svgPath } from "../basic/path"
 const svgGrid=(w,h,r=10,c=10)=>{
     let path=svgPath().fill("none").stroke("coral").strokeWidth(0.6)
     console.log({x:w/r,y:h/c})

package/src/graphics/svg/elements/derived/index.js

@@ -0,0 +1 @@
+export * from "./grid.js"

package/src/graphics/svg/elements/index.js

@@ -0,0 +1,2 @@
+export * from "./basic/index.js"
+export { svgGrid } from "./derived/grid.js";

package/src/graphics/svg/{Elements/ZikoSvgElement.js → elements/ziko-svg-element.js}

@@ -1,8 +1,10 @@
-class ZikoSvgElement {
+import { ZikoUIElement } from "../../../ui";
+class ZikoSvgElement extends ZikoUIElement{
   constructor(type) {
-    this.cache = {
+    super()
+    Object.assign(this.cache,{
       type
-    };
+    })
   }
   pos(x,y){
     return this.posX(x).posY(y);

package/src/graphics/svg/index.js

@@ -1,2 +1,2 @@
 export * from "./svg.js"
-export * from "./Elements/index.js"
+export * from "./elements/index.js"