ziko 0.0.1 → 0.0.4

package/package.json

@@ -1,8 +1,7 @@
 {
   "name": "ziko",
-  "version": "0.0.1",
+  "version": "0.0.4",
   "description": "a versatile JavaScript library offering a rich set of UI components, advanced mathematical utilities,Reactivity,animations,client side routing and graphics capabilities",
-  "main": "src/index.js",
   "keywords": [
     "Zikojs",
     "Math",
@@ -17,6 +16,8 @@
   ],
   "type": "module",
   "source": "src/index.js",
+  "main": "dist/ziko.cjs",
+  "module": "dist/ziko.mjs",
   "files": [
     "src",
     "dist",
@@ -30,7 +31,9 @@
   },
   "scripts": {
     "test": "node --watch test/index.js",
+    "test-link":"node _link/index.js",
     "lint": "eslint src/*/*/*",
+    "dev": "rollup -c rollup.config.js -w",
     "build": "rollup -c rollup.config.js"
   },
   "repository": {
@@ -50,6 +53,8 @@
     "@rollup/plugin-terser": "^0.4.4",
     "dir2tree": "^0.3.2",
     "eslint": "^8.52.0",
-    "rollup": "^4.1.5"
+    "rollup": "^4.1.5",
+    "rollup-plugin-livereload": "^2.0.5",
+    "rollup-plugin-serve": "^1.1.1"
   }
 }

package/src/App/Globals/__Target__.js

@@ -1,3 +1,3 @@
 var __Target__=null;
-if(document.body)__Target__=document.body;
+if(globalThis?.document?.body)__Target__=document.body;
 export { __Target__}

package/src/App/app.js

@@ -1,5 +1,6 @@
 import { ZikoUIFlex } from "../UI/CustomElement/Flex.js";
 import { Seo } from "./Seo/index.js";
+import { HashEvent } from "../Reactivity/index.js";
 class ZikoUIApp extends ZikoUIFlex{
     constructor(){
         super("main");
@@ -7,6 +8,9 @@ class ZikoUIApp extends ZikoUIFlex{
         this.head=null;
         this.#init();
         this.seo=Seo(this);
+        Object.assign(this.events,{
+            hash:null
+        })
         Object.assign(this.cache,{
             theme:null,
             isRoot:true
@@ -32,6 +36,11 @@ class ZikoUIApp extends ZikoUIFlex{
     description(){
 
     }
+    onHashChange(...callbacks){
+        if(!this.events.hash)this.events.hash = HashEvent(this);
+        this.events.hash.onChange(...callbacks);
+        return this;
+      }
 }
 const App=(...UIElement)=>new ZikoUIApp().append(...UIElement)
 export {App};

package/src/Graphics/Svg/svg.js

@@ -16,8 +16,8 @@ import svgGroupe from "./Elements/groupe.js";
       super();
       this.element=document.createElementNS("http://www.w3.org/2000/svg", "svg");
       //this.cache={};
-      this.setAttribute("width",w);
-      this.setAttribute("height",h);
+      this.setAttr("width",w);
+      this.setAttr("height",h);
       this.style({border:"1px black solid"});
       //this.view(-w/2,-h/2,w/2,h/2)
       //this.view(-10,-10,10,10);
@@ -27,7 +27,7 @@ import svgGroupe from "./Elements/groupe.js";
       let width=Math.abs(x2-x1);
       let height=Math.abs(y2-y1);
       //this.element.style.transform="scale("+Math.sign(x2-x1)+","+(-Math.sign(y2-y1))+")";
-      this.element.setAttribute("viewBox",[x1,y1,width,height].join(" "));
+      this.setAttr("viewBox",[x1,y1,width,height].join(" "));
       //console.log({width:width,height:height})
       return this;
   

package/src/Reactivity/Events/Global/CustomEvent.js

@@ -49,5 +49,5 @@ class ZikoCustomEvent extends ZikoEvent{
         return this;
     }
 }
-const CustomEvent=Target=>new ZikoCustomEvent(Target);
-export default CustomEvent;
+const customEvent=Target=>new customEvent(Target);
+export default customEvent;

package/src/Reactivity/Events/Global/Mouse.js

@@ -0,0 +1,230 @@
+import {ZikoEvent,EVENT_CONTROLLER} from "../ZikoEvent.js";
+class ZikoEventMouse extends ZikoEvent{
+    constructor(target){
+        super(target);
+        this.event=null;
+        this.dx=0;
+        this.dy=0;
+        this.dt=0;
+        this.mx=0;
+        this.my=0;
+        this.mt=0;
+        this.ux=0;
+        this.uy=0;      
+        this.ut=0;
+        this.swippe={
+            h:null,
+            v:null,
+            delta_x:0,
+            delta_y:0
+        }
+        this.isMoving=false;
+        this.isDown=false;
+        this.cache={
+            prefixe:"mouse",
+            preventDefault:{
+                down:false,
+                move:false,
+                up:false,
+                enter:false,
+                out:false,
+                leave:false,
+                over:false,
+            },
+            paused:{
+                down:false,
+                move:false,
+                up:false,
+                enter:false,
+                out:false,
+                leave:false, 
+                over:false,         
+            },
+            stream:{
+                enabled:{
+                    down:false,
+                    move:false,
+                    up:false,
+                    enter:false,
+                    out:false,
+                    leave:false,
+                    over:false,
+                },
+                clear:{
+                    down:false,
+                    move:false,
+                    up:false,
+                    enter:false,
+                    out:false,
+                    leave:false, 
+                    over:false,           
+                },
+                history:{
+                    down:[],
+                    move:[],
+                    up:[],
+                    enter:[],
+                    out:[],
+                    leave:[],
+                    over:[]
+                }
+            },
+            callbacks:{
+                down:[(self)=>console.log({dx:self.dx,dy:self.dy,down:self.down,move:self.move,t:self.dt})],
+                move:[(self)=>console.log({mx:self.mx,my:self.my,down:self.down,move:self.move,t:self.dt})],
+                up:[(self)=>console.log({ux:self.ux,uy:self.uy,down:self.down,move:self.move,t:self.dt})],
+                enter:[(self)=>console.log({dx:self.dx,dy:self.dy,down:self.down,move:self.move,t:self.dt})],
+                out:[(self)=>console.log({mx:self.mx,my:self.my,down:self.down,move:self.move,t:self.dt})],
+                leave:[(self)=>console.log({ux:self.ux,uy:self.uy,down:self.down,move:self.move,t:self.dt})],
+                over:[(self)=>console.log({ux:self.ux,uy:self.uy,down:self.down,move:self.move,t:self.dt})]
+            }
+        }
+        this.__controller={
+            down:mousedown_controller.bind(this),
+            move:mousemove_controller.bind(this),
+            up:mouseup_controller.bind(this),
+            enter:mouseenter_controller.bind(this),
+            out:mouseout_controller.bind(this),
+            leave:mouseleave_controller.bind(this),
+            over:mouseover_controller.bind(this),
+        }
+    }
+    onDown(...callbacks){
+        if(callbacks.length===0)callbacks=[()=>{}];
+        this.__onEvent("down",{down:true,move:false,up:false,enter:false,out:false,leave:false,over:false},...callbacks)
+        return this;
+    }
+    onMove(...callbacks){
+        if(callbacks.length===0)callbacks=[()=>{}];
+        this.__onEvent("move",{down:false,move:true,up:false,enter:false,out:false,leave:false,over:false},...callbacks)
+        return this;
+    }
+    onUp(...callbacks){
+        if(callbacks.length===0)callbacks=[()=>{}];
+        this.__onEvent("up",{down:false,move:false,up:true,enter:false,out:false,leave:false,over:false},...callbacks)
+        return this;
+    }
+    onEnter(...callbacks){
+        if(callbacks.length===0)callbacks=[()=>{}];
+        this.__onEvent("enter",{down:false,move:false,up:false,enter:true,out:false,leave:false,over:false},...callbacks)
+        return this;
+    }
+    onOut(...callbacks){
+        if(callbacks.length===0)callbacks=[()=>{}];
+        this.__onEvent("out",{down:false,move:false,up:false,enter:false,out:true,leave:false,over:false},...callbacks)
+        return this;
+    }
+    onLeave(...callbacks){
+        if(callbacks.length===0)callbacks=[()=>{}];
+        this.__onEvent("leave",{down:false,move:false,up:false,enter:false,out:false,leave:true,over:false},...callbacks)
+        return this;
+    }
+    onOver(...callbacks){
+        if(callbacks.length===0)callbacks=[()=>{}];
+        this.__onEvent("over",{down:false,move:false,up:false,enter:false,out:false,leave:false,over:true},...callbacks)
+        return this;
+    }
+}
+function mousedown_controller(e){
+    EVENT_CONTROLLER.call(
+        this,
+        e,
+        "down",
+        ()=>{
+            this.dx=parseInt(e.offsetX);
+            this.dy=parseInt(e.offsetY);
+            this.isDown=true;
+        },
+        {
+            x:this.dx,
+            y:this.dy,
+            t:Date.now()-this.cache.stream.t0
+        }  
+    )
+}
+function mousemove_controller(e){
+    EVENT_CONTROLLER.call(
+        this,
+        e,
+        "move",
+        ()=>{
+            this.mx=parseInt(e.offsetX);
+            this.my=parseInt(e.offsetY);
+            this.isMoving=true;
+        },
+        {
+            x:this.mx,
+            y:this.my,
+            t:Date.now()-this.cache.stream.t0
+        }    
+    )
+}
+function mouseup_controller(e){
+    EVENT_CONTROLLER.call(
+        this,
+        e,
+        "up",
+        ()=>{
+            this.ux=parseInt(e.offsetX);
+            this.uy=parseInt(e.offsetY);
+            this.isDown=false;
+            const dx=this.dx;
+            const dy=this.dy;
+            const ux=this.ux;
+            const uy=this.uy;
+            const delta_x=(ux-dx)/this.target.Width;
+            const delta_y=(dy-uy)/this.target.Height;
+            const HORIZONTAL_SWIPPE=(delta_x<0)?"left":(delta_x>0)?"right":"none";
+            const VERTICAL_SWIPPE=(delta_y<0)?"bottom":(delta_y>0)?"top":"none";
+            this.swippe={
+                h:HORIZONTAL_SWIPPE,
+                v:VERTICAL_SWIPPE,
+                delta_x,
+                delta_y
+            }
+        },
+        {
+            x:this.ux,
+            y:this.uy,
+            t:Date.now()-this.cache.stream.t0
+        }    
+    )
+}
+function mouseenter_controller(e){
+    EVENT_CONTROLLER.call(
+        this,
+        e,
+        "enter",
+        null,
+        null    
+    )
+}
+function mouseleave_controller(e){
+    EVENT_CONTROLLER.call(
+        this,
+        e,
+        "leave",
+        null,
+        null    
+    )
+}
+function mouseout_controller(e){
+    EVENT_CONTROLLER.call(
+        this,
+        e,
+        "out",
+        null,
+        null    
+    )
+}
+function mouseover_controller(e){
+    EVENT_CONTROLLER.call(
+        this,
+        e,
+        "out",
+        null,
+        null    
+    )
+}
+const Mouse=target=>new ZikoEventMouse(target);
+export default Mouse;

package/src/Reactivity/Events/Global/Wheel.js

@@ -0,0 +1,44 @@
+import { ZikoEvent , EVENT_CONTROLLER } from "../ZikoEvent.js";
+function wheel_controller(e){
+    EVENT_CONTROLLER.call(this,e,"wheel",null,null)
+}
+class ZikoEventWheel extends ZikoEvent{
+    constructor(target){
+        super(target);
+        this.event=null;
+        this.cache={
+            prefixe:"",
+            preventDefault:{
+                wheel:false,
+            },
+            paused:{
+                wheel:false,      
+            },
+            stream:{
+                enabled:{
+                    wheel:false,
+
+                },
+                clear:{
+                    wheel:false, 
+         
+                },
+                history:{
+                    wheel:[],
+                }
+            },
+            callbacks:{
+                click:[],
+            }
+        }
+        this.__controller={
+            wheel:wheel_controller.bind(this),
+        }
+    }
+    onWheel(...callbacks){
+        this.__onEvent("wheel",{},...callbacks)
+        return this;
+     }    
+}
+const Wheel=Target=>new ZikoEventWheel(Target);
+export default Wheel

package/src/Reactivity/Events/Partiel/Hash.js

@@ -0,0 +1,44 @@
+import { ZikoEvent , EVENT_CONTROLLER } from "../ZikoEvent.js";
+function hashchange_controller(e){
+    EVENT_CONTROLLER.call(this,e,"hashchange",null,null)
+}
+class ZikoEventHash extends ZikoEvent{
+    constructor(target){
+        super(target);
+        this.event=null;
+        this.cache={
+            prefixe:"",
+            preventDefault:{
+                hashchange:false,
+            },
+            paused:{
+                hashchange:false,      
+            },
+            stream:{
+                enabled:{
+                    hashchange:false,
+
+                },
+                clear:{
+                    hashchange:false, 
+         
+                },
+                history:{
+                    hashchange:[],
+                }
+            },
+            callbacks:{
+                hashchange:[],
+            }
+        }
+        this.__controller={
+            hashchange:hashchange_controller.bind(this),
+        }
+    }
+    onChange(...callbacks){
+        this.__onEvent("hashchange",{},...callbacks)
+        return this;
+     }    
+}
+const HashEvent=Target=>new ZikoEventHash(Target);
+export default HashEvent

package/src/Reactivity/Events/Partiel/MediaEvent.js

@@ -0,0 +1 @@
+// Timeupdate

package/src/Reactivity/Events/index.js

@@ -1,13 +1,18 @@
 import Pointer from "./Global/Pointer.js";
+import Mouse from "./Global/Mouse.js";
+import Wheel from "./Global/Wheel.js";
 import Key from "./Global/Key.js";
 import {Drag,Drop} from "./Global/Drag.js";
 import Click from "./Global/Click.js";
 import Clipboard from "./Global/Clipboard.js";
 import Focus from "./Global/Focus.js";
 import Input from "./Partiel/Input.js";
-import CustomEvent from "./Global/CustomEvent.js";
+import HashEvent from "./Partiel/Hash.js";
+import customEvent from "./Global/CustomEvent.js";
 const Events={
     Pointer,
+    Mouse,
+    Wheel,
     Key,
     Drag,
     Drop,
@@ -15,6 +20,7 @@ const Events={
     Clipboard,
     Focus,
     Input,
+    HashEvent,
     CustomEvent,
     ExtractAll: function () {
         const keys = Object.keys(this);
@@ -39,6 +45,8 @@ const Events={
 }
 export {
     Pointer,
+    Mouse,
+    Wheel,
     Key,
     Drag,
     Drop,
@@ -46,6 +54,7 @@ export {
     Clipboard,
     Focus,
     Input,
-    CustomEvent
+    HashEvent,
+    customEvent
 }
 export default Events

package/src/UI/CustomElement/Flex.js

@@ -1,27 +1,7 @@
 import ZikoUIElement from "../ZikoUIElement.js"
-function set_vertical(direction){
-    direction == 1
-      ? this.style({ flexDirection: "column" })
-      : direction == -1 && this.style({ flexDirection: "column-reverse" });
-    return this;
-  }
-function set_horizontal(direction){
-  direction == 1
-      ? this.style({ flexDirection: "row" })
-      : direction == -1 && this.style({ flexDirection: "row-reverse" });
-    return this;
-}
-function map_pos_x(align){
-  let pos = ["flex-start", "center", "flex-end"];
-  if (typeof align === "number") align = pos[align + 1];
-  return align;
-}
-function map_pos_y(align){
-  return map_pos_x(-align);
-}
 class ZikoUIFlex extends ZikoUIElement {
-  constructor(tag , w = "100%", h = "100%") {
-    super(tag,"Flex");
+  constructor(tag = "div", w = "100%", h = "100%") {
+    super(tag ,"Flex");
     this.direction = "cols";
     if (typeof w == "number") w += "%";
     if (typeof h == "number") h += "%";
@@ -94,4 +74,24 @@ const Flex = (...ZikoUIElement) =>{
   }
   return new ZikoUIFlex(tag).append(...ZikoUIElement);
 }
+function set_vertical(direction){
+  direction == 1
+    ? this.style({ flexDirection: "column" })
+    : direction == -1 && this.style({ flexDirection: "column-reverse" });
+  return this;
+}
+function set_horizontal(direction){
+direction == 1
+    ? this.style({ flexDirection: "row" })
+    : direction == -1 && this.style({ flexDirection: "row-reverse" });
+  return this;
+}
+function map_pos_x(align){
+let pos = ["flex-start", "center", "flex-end"];
+if (typeof align === "number") align = pos[align + 1];
+return align;
+}
+function map_pos_y(align){
+return map_pos_x(-align);
+}
 export{Flex,ZikoUIFlex}

package/src/UI/Media/Audio/index.js

@@ -4,7 +4,10 @@ class ZikoUIAudio extends ZikoUIElement {
       super("audio","audio");
       this.element.setAttribute("src", src);
       this.render();
-      this.controls();
+      this.useControls();
+    }
+    get t(){
+      return this.element.currentTime;  
     }
     useControls(enabled = true) {
       this.element.controls = enabled;
@@ -18,6 +21,16 @@ class ZikoUIAudio extends ZikoUIElement {
       this.element.pause();
       return this;
     }
+    seekTo(time) {
+      this.element.currentTime = time;
+      return this;
+    }
+    onPlay(){
+
+    }
+    onPause(){
+
+    }
   }
 const audio = (src) => new ZikoUIAudio(src);
 export {

package/src/UI/Media/Video/index.js

@@ -9,6 +9,9 @@ class ZikoUIVideo extends ZikoUIElement {
       this.style({ width: w, height: h });
       this.render();
     }
+    get t(){
+      return this.element.currentTime;  
+    }
     useControls(enabled = true) {
       this.element.controls = enabled;
       return this;
@@ -29,6 +32,16 @@ class ZikoUIVideo extends ZikoUIElement {
       this.element.requestPictureInPicture(e);
       return this;
     }
+    seekTo(time) {
+      this.element.currentTime = time;
+      return this;
+    }
+    onPlay(){
+
+    }
+    onPause(){
+
+    }
   }
 const video = (src, width, height) => new ZikoUIVideo(src, width, height);
 export {