ziko 0.0.12 → 0.0.13

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

@@ -0,0 +1,84 @@
+import { ZikoEvent , EVENT_CONTROLLER } from "../ZikoEvent.js";
+function copy_controller(e){
+    EVENT_CONTROLLER.call(this,e,"copy",null,null)
+}
+function cut_controller(e){
+    EVENT_CONTROLLER.call(this,e,"cut",null,null)
+}
+function paste_controller(e){
+    EVENT_CONTROLLER.call(this,e,"paste",null,null)
+}
+function select_controller(e){
+    EVENT_CONTROLLER.call(this,e,"select",null,null)
+}
+class ZikoEventClipboard extends ZikoEvent{
+    constructor(target){
+        super(target);
+        this.event=null;
+        this.cache={
+            prefixe:"",
+            preventDefault:{
+                copy:false,
+                cut:false,
+                paste:false,
+                select:false
+            },
+            paused:{
+                copy:false,
+                cut:false,
+                paste:false,  
+                select:false  
+            },
+            stream:{
+                enabled:{
+                    copy:false,
+                    cut:false,
+                    paste:false,
+                    select:false,
+                },
+                clear:{
+                    copy:false,
+                    cut:false,
+                    paste:false, 
+                    select:false,      
+                },
+                history:{
+                    copy:[],
+                    cut:[],
+                    paste:[],
+                    select:[]
+                }
+            },
+            callbacks:{
+                copy:[],
+                cut:[],
+                paste:[],
+                select:[]
+            }
+        }
+        this.__controller={
+            copy:copy_controller.bind(this),
+            cut:cut_controller.bind(this),
+            paste:paste_controller.bind(this),
+            select:select_controller.bind(this)
+        }
+    }
+    onCopy(...callbacks){
+        this.__onEvent("copy",{},...callbacks)
+        return this;
+     } 
+    onCut(...callbacks){
+        this.__onEvent("cut",{},...callbacks)
+        return this;
+     } 
+    onPaste(...callbacks){
+        this.__onEvent("paste",{},...callbacks)
+        return this;
+     }   
+    onSelect(...callbacks){
+        this.__onEvent("select",{},...callbacks)
+        return this;
+     }   
+}
+const useClipboardEvent=target=>new ZikoEventClipboard(target);
+export default useClipboardEvent

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

@@ -0,0 +1,53 @@
+import { ZikoEvent , EVENT_CONTROLLER } from "../ZikoEvent.js";
+const custom_event_controller=event_name=>function(e){
+    EVENT_CONTROLLER.call(this,e,event_name,null,null)
+}
+class ZikoCustomEvent extends ZikoEvent{
+    constructor(target){
+        super(target);
+        this.event=null;
+        this.cache={
+            prefixe:"",
+            preventDefault:{
+            },
+            paused:{
+            },
+            stream:{
+                enabled:{
+                },
+                clear:{
+                },
+                history:{
+                }
+            },
+            callbacks:{
+            }
+        }
+        this.__controller={
+        }
+    }
+    #init(event_name){
+        this.cache.preventDefault[event_name]=false;
+        this.cache.paused[event_name]=false;
+        this.cache.stream.enabled=false;
+        this.cache.stream.clear=false;
+        this.cache.stream.history=[];
+        this.cache.callbacks[event_name]=[]
+        this.__controller[event_name]=custom_event_controller(event_name).bind(this);
+        return this;
+    }
+    on(event_name,...callbacks){
+        if(!(this.__controller[event_name]))this.#init(event_name);
+        this.__onEvent(event_name,{},...callbacks)
+        return this;
+     }  
+    emit(event_name,detail={}){
+        if(!(this.__controller[event_name]))this.#init(event_name);
+        this.detail=detail;
+        const event=new Event(event_name);
+        this.targetElement.dispatchEvent(event);
+        return this;
+    }
+}
+const useCustomEvent=target=>new ZikoCustomEvent(target);
+export default useCustomEvent;

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

@@ -0,0 +1,137 @@
+import { ZikoEvent , EVENT_CONTROLLER } from "../ZikoEvent.js";
+function dragstart_controller(e){
+    EVENT_CONTROLLER(this,e,"start",null,null)
+}
+function drag_controller(e){
+    EVENT_CONTROLLER.call(this,e,"drag",null,null)
+}
+function dragend_controller(e){
+    EVENT_CONTROLLER.call(this,e,"end",null,null)
+}
+function drop_controller(e){
+    EVENT_CONTROLLER.call(this,e,"drop",null,null)
+}
+
+class ZikoEventDrag extends ZikoEvent{
+    constructor(target){
+        super(target)
+        this.target.setAttribute("draggable",true);
+        this.cache={
+            prefixe:"drag",
+            preventDefault:{
+                drag:false,
+                start:false,
+                end:false,
+                enter:false,
+                leave:false,
+                over:false,
+            },
+            paused:{
+                drag:false,
+                start:false,
+                end:false,
+                enter:false,
+                leave:false,
+                over:false,
+            },
+            enabled:{
+                drag:false,
+                start:false,
+                end:false,
+                enter:false,
+                leave:false,
+                over:false,
+            },
+            callbacks:{
+                drag:[],
+                start:[],
+                end:[],
+                enter:[],
+                leave:[],
+                over:[]
+            },
+            stream:{
+                enabled:{
+                    drag:false,
+                    start:false,
+                    end:false,
+                    enter:false,
+                    leave:false,
+                    over:false,
+                },
+                clear:{
+                    drag:false,
+                    start:false,
+                    end:false,
+                    enter:false,
+                    leave:false,
+                    over:false,
+                },
+                history:{
+                    drag:[],
+                    start:[],
+                    end:[],
+                    enter:[],
+                    leave:[],
+                    over:[],
+                }
+            }
+        }
+        this.__controller={
+            start:dragstart_controller.bind(this),
+            drag:drag_controller.bind(this),
+            end:dragend_controller.bind(this)
+        }
+    }
+    onStart(...callbacks){
+        this.__onEvent("start",{},...callbacks);
+        return this;
+    }
+    onDrag(...callbacks){
+        this.__onEvent("drag",{},...callbacks);
+        return this;
+    }
+    onEnd(...callbacks){
+        this.__onEvent("end",{},...callbacks);
+        return this;
+    }
+}
+class ZikoEventDrop extends ZikoEvent{
+    constructor(target){
+        super(target);
+        this.event=null;
+        this.cache={
+            prefixe:"",
+            preventDefault:{
+                drop:false,
+            },
+            paused:{
+                drop:false,      
+            },
+            stream:{
+                enabled:{
+                    drop:false,
+                },
+                clear:{
+                    drop:false,          
+                },
+                history:{
+                    drop:[],
+                }
+            },
+            callbacks:{
+                drop:[(self)=>console.log({dx:self.dx,dy:self.dy,drop:self.drop,move:self.move,t:self.dt})],
+            }
+        }
+        this.__controller={
+            drop:drop_controller.bind(this),
+        }
+    }
+    onDrop(...callbacks){
+        this.__onEvent("drop",{},...callbacks);
+        return this;
+    } 
+}
+const useDragEvent=target=>new ZikoEventDrag(target);
+const useDropEvent=target=>new ZikoEventDrop(target);
+export {useDragEvent,useDropEvent}

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

@@ -0,0 +1,56 @@
+import { ZikoEvent , EVENT_CONTROLLER } from "../ZikoEvent.js";
+function focus_controller(e){
+    EVENT_CONTROLLER.call(this,e,"focus",null,null)
+}
+function blur_controller(e){
+    EVENT_CONTROLLER.call(this,e,"blur",null,null)
+}
+class ZikoEventFocus extends ZikoEvent{
+    constructor(target){
+        super(target);
+        this.event=null;
+        this.cache={
+            prefixe:"",
+            preventDefault:{
+                focus:false,
+                blur:false,
+            },
+            paused:{
+                focus:false,
+                blur:false,      
+            },
+            stream:{
+                enabled:{
+                    focus:false,
+                    blur:false,
+                },
+                clear:{
+                    focus:false, 
+                    blur:false,         
+                },
+                history:{
+                    focus:[],
+                    blur:[],
+                }
+            },
+            callbacks:{
+                focus:[],
+                blur:[],
+            }
+        }
+        this.__controller={
+            focus:focus_controller.bind(this),
+            blur:blur_controller.bind(this),
+        }
+    }
+    onFocus(...callbacks){
+        this.__onEvent("focus",{},...callbacks)
+        return this;
+     }
+    onBlur(...callbacks){
+        this.__onEvent("blur",{},...callbacks)
+        return this;
+     }     
+}
+const useFocusEvent=target=>new ZikoEventFocus(target);
+export default useFocusEvent

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

@@ -0,0 +1,104 @@
+import {ZikoEvent,EVENT_CONTROLLER} from "../ZikoEvent.js";
+function keydown_controller(e){
+    EVENT_CONTROLLER.call(
+        this,
+        e,
+        "down",
+        ()=>this.kd=e.key,
+        {key:e.key,t:10}
+        )
+}
+function keypress_controller(e){
+    EVENT_CONTROLLER.call(
+        this,
+        e,
+        "press",
+        ()=>this.kp=e.key,
+        {key:e.key,t:10}
+        )
+}
+function keyup_controller(e){
+    EVENT_CONTROLLER.call(
+        this,
+        e,
+        "up",
+        ()=>this.ku=e.key,
+        {key:e.key,t:10}
+        )
+}
+class ZikoEventKey extends ZikoEvent{
+    constructor(target){ 
+        super(target)
+        this.kp=null;
+        this.kd=null;
+        this.ku=null;
+        this.t=0;
+        this.cache={
+            prefixe:"key",
+            preventDefault:{
+                down:false,
+                press:false,
+                up:false,
+            },
+            paused:{
+                down:false,
+                press:false,
+                up:false,
+            },
+            stream:{
+                enabled:{
+                    down:false,
+                    press:false,
+                    up:false,
+                },
+                clear:{
+                    down:true,
+                    press:false,
+                    up:false,
+                },
+                history:{
+                    down:[],
+                    press:[],
+                    up:[],
+                }
+            },
+            callbacks:{
+                down:[(self)=>console.log({kd:self.kd})],
+                press:[(self)=>console.log({kp:self.kp})],
+                up:[(self)=>console.log({ku:self.ku})]
+            },
+            successifKeysCallback:{
+                down:[(self)=>console.log(1111)],
+                press:[(self)=>console.log(1112)],
+                kyup:[(self)=>console.log(1113)]
+            }
+        }
+        this.__controller={
+            down:keydown_controller.bind(this),
+            press:keypress_controller.bind(this),
+            up:keyup_controller.bind(this)
+        }
+    }
+    onDown(...callbacks){
+        this.__onEvent("down",{down:true},...callbacks)
+        return this;
+     }
+    onPress(...callbacks){
+        this.__onEvent("press",{press:true},...callbacks)
+        return this;
+     }
+    onUp(...callbacks){
+        this.__onEvent("up",{up:true},...callbacks)
+        return this;
+     }
+
+}
+
+var useKeyEvenent=target=>new ZikoEventKey(target)
+
+// handleDown(){
+//     this.dispose({down:true,press:false,up:false})
+//     this.target.addEventListener("keydown",this.#downController);
+//     return this;
+//  }
+export default useKeyEvenent

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