ziko 0.0.12 → 0.0.13

package/src/reactivity/events/Global/Pointer.js

@@ -0,0 +1,234 @@
+import {ZikoEvent,EVENT_CONTROLLER} from "../ZikoEvent.js";
+function pointerdown_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 pointermove_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 pointerup_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 pointerenter_controller(e){
+    EVENT_CONTROLLER.call(
+        this,
+        e,
+        "enter",
+        null,
+        null    
+    )
+}
+function pointerleave_controller(e){
+    EVENT_CONTROLLER.call(
+        this,
+        e,
+        "leave",
+        null,
+        null    
+    )
+}
+function pointerout_controller(e){
+    EVENT_CONTROLLER.call(
+        this,
+        e,
+        "out",
+        null,
+        null    
+    )
+}
+function pointercancel_controller(e){
+    EVENT_CONTROLLER.call(
+        this,
+        e,
+        "cancel",
+        null,
+        null    
+    )
+}
+class ZikoEventPointer 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:"pointer",
+            preventDefault:{
+                down:false,
+                move:false,
+                up:false,
+                enter:false,
+                out:false,
+                leave:false,
+                cancel:false
+            },
+            paused:{
+                down:false,
+                move:false,
+                up:false,
+                enter:false,
+                out:false,
+                leave:false,
+                cancel:false          
+            },
+            stream:{
+                enabled:{
+                    down:false,
+                    move:false,
+                    up:false,
+                    enter:false,
+                    out:false,
+                    leave:false,
+                    cancel:false
+                },
+                clear:{
+                    down:false,
+                    move:false,
+                    up:false,
+                    enter:false,
+                    out:false,
+                    leave:false,
+                    cancel:false            
+                },
+                history:{
+                    down:[],
+                    move:[],
+                    up:[],
+                    enter:[],
+                    out:[],
+                    leave:[]
+                }
+            },
+            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})],
+                cancel:[(self)=>console.log({ux:self.ux,uy:self.uy,down:self.down,move:self.move,t:self.dt})]
+            }
+        }
+        this.__controller={
+            down:pointerdown_controller.bind(this),
+            move:pointermove_controller.bind(this),
+            up:pointerup_controller.bind(this),
+            enter:pointerenter_controller.bind(this),
+            out:pointerout_controller.bind(this),
+            leave:pointerleave_controller.bind(this),
+            cancel:pointercancel_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,cancel: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,cancel: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,cancel: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,cancel: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,cancel: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,cancel:false},...callbacks)
+        return this;
+    }
+    onCancel(...callbacks){
+        if(callbacks.length===0)callbacks=[()=>{}];
+        this.__onEvent("cancel",{down:false,move:false,up:false,enter:false,out:false,leave:false,cancel:true},...callbacks)
+        return this;
+    }
+    // handle({down=false,move=false,up=false}={}){
+    //     if(down)this.handleDown();
+    //     if(move)this.handleMove();
+    //     if(up)this.handleUp()
+    // }
+}
+var usePointerEvent=target=>new ZikoEventPointer(target)
+export default usePointerEvent;

package/src/reactivity/events/Global/Swipe.js

@@ -0,0 +1,147 @@
+import { ZikoEvent, EVENT_CONTROLLER } from "../ZikoEvent.js";
+import { norm, lerp, abs, sign } from "../../../math/index.js";
+class ZikoEventSwipe extends ZikoEvent {
+  constructor(target, width_threshold = 0.3, height_threshold = 0.3) {
+    super(target);
+    const { removeListener, setWidthThreshold, setHeightThreshold } = init_swipe_event_handler(
+      this.target?.element,
+      width_threshold,
+      height_threshold,
+      this.target.width,
+      this.target.height,
+    );
+    this.cache = {
+      width_threshold,
+      height_threshold,
+      removeListener,
+      setWidthThreshold,
+      setHeightThreshold,
+      legacyTouchAction : globalThis?.document?.body?.style?.touchAction,
+      prefixe: "",
+      preventDefault: {
+        swipe: false,
+      },
+      paused: {
+        swipe: false,
+      },
+      stream: {
+        enabled: {
+          swipe: false,
+        },
+        clear: {
+          swipe: false,
+        },
+        history: {
+          swipe: [],
+        },
+      },
+      callbacks: {
+        swipe: [],
+      },
+    };
+    this.__controller = {
+      swipe: swipe_controller.bind(this),
+    };
+  }
+  onSwipe(...callbacks) {
+    Object.assign(globalThis?.document?.body?.style,{touchAction:"none"})
+    this.__onEvent("swipe", {}, ...callbacks);
+    return this;
+  }
+  updateThresholds(width_threshold = this.cache.width_threshold, height_threshold = this.cache.height_threshold) {
+    if (width_threshold !== undefined) {
+      this.cache.setWidthThreshold(width_threshold);
+    }
+    if (height_threshold !== undefined) {
+      this.cache.setHeightThreshold(height_threshold);
+    }
+    return this;
+  }
+  destroy() {
+    this.cache.removeListener();
+    Object.assign(globalThis?.document?.body?.style,{touchAction:this.cache.legacyTouchAction})
+    return this;
+  }
+}
+function init_swipe_event_handler(element, width_threshold = 0.50, height_threshold = 0.5, width, height) {
+  let Interpolated_width_threshold = lerp(width_threshold, 0, width);
+  let Interpolated_height_threshold = lerp(height_threshold, 0, height);
+  let startX = 0, startY = 0, endX = 0, endY = 0;
+  const pointerDownHandler = (event) => {
+    startX = event.clientX;
+    startY = event.clientY;
+  };
+  const pointerUpHandler = (event) => {
+    endX = event.clientX;
+    endY = event.clientY;
+    handleSwipe();
+  };
+  element?.addEventListener('pointerdown', pointerDownHandler);
+  element?.addEventListener('pointerup', pointerUpHandler);
+  function handleSwipe() {
+    const deltaX = endX - startX;
+    const deltaY = endY - startY;
+    if (Math.abs(deltaX) > Interpolated_width_threshold || Math.abs(deltaY) > Interpolated_height_threshold) {
+      dispatchSwipeEvent(deltaX, deltaY);
+    }
+  }
+  function dispatchSwipeEvent(deltaX, deltaY) {
+    const event = globalThis?.CustomEvent ? new CustomEvent('swipe', {
+      detail: {
+        deltaX: abs(deltaX) < Interpolated_width_threshold ? 0 : sign(deltaX) * norm(abs(deltaX), 0, width),
+        deltaY: abs(deltaY) < Interpolated_height_threshold ? 0 : sign(deltaY) * norm(abs(deltaY), 0, height),
+        direction: {
+          x : abs(deltaX) < Interpolated_width_threshold ? "none" : deltaX > 0 ? "right" : "left",
+          y : abs(deltaY) < Interpolated_height_threshold ? "none" : deltaY > 0 ? 'down' : 'up',
+        },
+      },
+    }) : null;
+    element?.dispatchEvent(event);
+  }
+  function setWidthThreshold(new_width_threshold) {
+    Interpolated_width_threshold = lerp(new_width_threshold, 0, width);
+  }
+  function setHeightThreshold(new_height_threshold) {
+    Interpolated_height_threshold = lerp(new_height_threshold, 0, height);
+  }
+  return {
+    removeListener() {
+      element?.removeEventListener('pointerdown', pointerDownHandler);
+      element?.removeEventListener('pointerup', pointerUpHandler);
+      console.log('Swipe event listeners removed');
+    },
+    setWidthThreshold,
+    setHeightThreshold,
+  };
+}
+function swipe_controller(e) {
+  EVENT_CONTROLLER.call(this, e, "swipe", null, null);
+}
+const useSwipeEvent = (target, width_threshold, height_threshold) => new ZikoEventSwipe(target, width_threshold, height_threshold);
+export default useSwipeEvent;
+
+/*
+a=p("ALLL").size("300px","300px").style({background:"red",userSelect:"none"})
+t=text("")
+ev=useSwipeEvent(a, .1, .3)
+ev.onSwipe(e=>{
+// t.setValue(`
+//  vertical direction : ${e.event.detail.direction.y}
+//  horizontal direction : ${e.event.detail.direction.x}
+//  deltaX : ${e.event.detail.deltaX}
+//  deltaY : ${e.event.detail.deltaY}
+// `)
+e.target.st.translate(e.event.detail.deltaX * 200, e.event.detail.deltaY * 200,0, 500)
+})
+*/
+/*
+a=p("ALLL")
+.size("300px","300px")
+.style({background:"red",userSelect:"none"})
+.onSwipe(
+.3,
+.3,
+e=>{
+  e.target.st.translate(e.event.detail.deltaX * 200, e.event.detail.deltaY * 200,0, 500)
+})
+*/

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 useWheelEventnent=target=>new ZikoEventWheel(target);
+export default useWheelEventnent

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 useHashEvent=target=>new ZikoEventHash(target);
+export default useHashEvent

package/src/reactivity/events/Partiel/Input.js

@@ -0,0 +1,59 @@
+import { ZikoEvent , EVENT_CONTROLLER } from "../ZikoEvent.js";
+function input_controller(e){
+    EVENT_CONTROLLER.call(this,e,"input",null,null)
+}
+function change_controller(e){
+    EVENT_CONTROLLER.call(this,e,"change",null,null)
+}
+class ZikoEventInput extends ZikoEvent{
+    constructor(target){
+        super(target);
+        this.event=null;
+        this.cache={
+            prefixe:"",
+            preventDefault:{
+                input:false,
+                change:false,
+            },
+            paused:{
+                input:false,
+                change:false,      
+            },
+            stream:{
+                enabled:{
+                    input:false,
+                    change:false,
+                },
+                clear:{
+                    input:false, 
+                    change:false,         
+                },
+                history:{
+                    input:[],
+                    change:[],
+                }
+            },
+            callbacks:{
+                input:[],
+                change:[],
+            }
+        }
+        this.__controller={
+            input:input_controller.bind(this),
+            change:change_controller.bind(this),
+        }
+    }
+    get value(){
+        return this.target.value;
+    }
+    onInput(...callbacks){
+        this.__onEvent("input",{},...callbacks)
+        return this;
+     }
+    onChange(...callbacks){
+        this.__onEvent("change",{},...callbacks)
+        return this;
+     }     
+}
+const useInputEvent=target=>new ZikoEventInput(target);
+export default useInputEvent

package/src/reactivity/events/Partiel/Media.js

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

package/src/reactivity/events/ZikoEvent.js

@@ -0,0 +1,91 @@
+function EVENT_CONTROLLER(e,EVENT,setter,push_object){
+    this.event=e
+    if(this.cache.preventDefault[EVENT])e.preventDefault();
+    if(setter)setter();
+    if(this.cache.stream.enabled[EVENT]&&push_object)this.cache.stream.history[EVENT].push(push_object);
+    this.cache.callbacks[EVENT].map(n=>n(this));
+    return this;
+}
+class ZikoEvent{
+    constructor(target){
+        this.target=null;
+        this.setTarget(target);
+        this.__dispose=this.dispose.bind(this);
+        // this.EventIndex=Garbage.Pointer.data.length;
+        // Garbage.Pointer.data.push({event:this,index:this.EventIndex});
+    }
+    get targetElement(){
+        return this.target.element
+    }
+    setTarget(UI){
+        this.target=UI;
+        return this;
+    }
+    __handle(event,handler,dispose){
+        const EVENT=(event==="drag")?event:`${this.cache.prefixe}${event}`
+        this.dispose(dispose);
+        this.targetElement?.addEventListener(EVENT,handler);
+        return this;   
+    }
+    __onEvent(event,dispose,...callbacks){
+        if(callbacks.length===0){
+            if(this.cache.callbacks.length>1){
+                this.cache.callbacks.map(n=>e=>n.call(this,e));
+            }   
+            else {
+                return this;
+            }
+        }
+        else this.cache.callbacks[event]=callbacks.map(n=>e=>n.call(this,e));
+        this.__handle(event,this.__controller[event],dispose)
+        return this;  
+    }
+    preventDefault(config={}){
+        Object.assign(this.cache.preventDefault,config);
+        return this;
+    }
+    pause(config={}){
+        const all=Object.fromEntries(Object.keys(this.cache.stream.enabled).map(n=>[n,true]))
+        config={...all,...config}
+        for(let key in config){
+            if(config[key]){
+                this.targetElement?.removeEventListener(`${this.cache.prefixe}${key}`,this.__controller[`${this.cache.prefixe}${key}`]);
+                this.cache.paused[`${this.cache.prefixe}${key}`]=true;
+            }
+        }
+        return this;
+     }
+    resume(config={}){
+        const all=Object.fromEntries(Object.keys(this.cache.stream.enabled).map(n=>[n,true]))
+        config={...all,...config}
+        for(let key in config){
+            if(config[key]){
+                this.targetElement?.addEventListener(`${this.cache.prefixe}${key}`,this.__controller[`${this.cache.prefixe}${key}`]);
+                this.cache.paused[`${this.cache.prefixe}${key}`]=false;
+            }
+        }
+        return this;
+     }
+    dispose(config={}){
+        this.pause(config);
+        return this;
+     }
+    stream(config={}){
+        this.cache.stream.t0=Date.now();
+        const all=Object.fromEntries(Object.keys(this.cache.stream.enabled).map(n=>[n,true]))
+        config={...all,...config}
+        Object.assign(this.cache.stream.enabled,config);
+        return this;
+     }
+    clear(config={}){
+        const all=Object.fromEntries(Object.keys(this.cache.stream.clear).map(n=>[n,true]))
+        config={...all,...config}
+        for(let key in config){
+            if(config[key]){
+                this.cache.stream.history[key]=[]
+            }
+        }
+        return this;
+    }
+}
+export {ZikoEvent,EVENT_CONTROLLER}

package/src/reactivity/events/index.js

@@ -0,0 +1,63 @@
+import usePointerEvent from "./Global/Pointer.js";
+import useMouseEvent from "./Global/Mouse.js";
+import useWheelEvent from "./Global/Wheel.js";
+import useKeyEvent from "./Global/Key.js";
+import {useDragEvent,useDropEvent} from "./Global/Drag.js";
+import useClickEvent from "./Global/Click.js";
+import useClipboardEvent from "./Global/Clipboard.js";
+import useFocusEvent from "./Global/Focus.js";
+import useInputEvent from "./Partiel/Input.js";
+import useHashEvent from "./Partiel/Hash.js";
+import useCustomEvent from "./Global/CustomEvent.js";
+import useSwipeEvent from "./Global/Swipe.js"
+const Events={
+    usePointerEvent,
+    useMouseEvent,
+    useWheelEvent,
+    useKeyEvent,
+    useDragEvent,
+    useDropEvent,
+    useClickEvent,
+    useClipboardEvent,
+    useFocusEvent,
+    useInputEvent,
+    useHashEvent,
+    useCustomEvent,
+    useSwipeEvent,
+    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 {
+    usePointerEvent,
+    useMouseEvent,
+    useWheelEvent,
+    useKeyEvent,
+    useDragEvent,
+    useDropEvent,
+    useClickEvent,
+    useClipboardEvent,
+    useFocusEvent,
+    useInputEvent,
+    useHashEvent,
+    useCustomEvent,
+    useSwipeEvent
+}
+export default Events

package/src/reactivity/hooks/Contexte/index.js

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