ziko 0.0.12 → 0.0.14

package/src/reactivity/observer/screen.js.txt

@@ -0,0 +1,84 @@
+import { useTimeLoop } from "../../Time";
+import { 
+    map,
+    complex,
+ } from "../../Math";
+class ZikoScreenObserver {
+    constructor(callback=e=>console.log({x:e.x,y:e.y})) {
+      this.previousX = globalThis?.screenX;
+      this.previousY = globalThis?.screenY;
+      this.view=[-1,-1,1,1];
+      this.start(callback);
+    }
+    get xMin(){
+        return this.view[0];
+    }
+    get yMin(){
+        return this.view[1];
+    }
+    get xMax(){
+        return this.view[2];
+    }
+    get yMax(){
+        return this.view[3];
+    }
+    get x(){
+        return globalThis?.screenX;
+    }
+    get y(){
+        return globalThis?.screenY;
+    }
+    get scx(){
+        return screen.availWidth/2;
+    }
+    get scy(){
+        return screen.availHeight/2;
+    }
+    get wcx(){
+        return screenX+globalThis?.innerWidth/2;
+    }
+    get wcx_v(){
+        return map(this.wcx,0,screen.availWidth,this.view[0],this.view[2]);
+    }
+    get wcy(){
+        return screenY+globalThis?.innerHeight/2;
+    }
+    get wcy_v(){
+        return -map(this.wcy,0,screen.availHeight,this.view[1],this.view[3]);
+    }
+    get dx(){
+        return map(this.x,0,screen.availWidth,this.xMin,this.xMax); 
+    }
+    get dy(){
+        return map(this.y,0,screen.availHeight,this.yMin,this.yMax); 
+    }
+    start(callback){
+        this.loop = useTimeLoop(()=>{
+            let currentX = globalThis?.screenX;
+            let currentY = globalThis?.screenY;
+            if (this.previousX !== currentX || this.previousY !== currentY) {
+                callback(this)
+                this.previousX = currentX;
+                this.previousY = currentY;
+            }
+        },1000/60,0,Infinity,true);
+        return this;
+    }
+}
+const watchScreen=(callback)=>new ZikoScreenObserver(callback);
+// globalThis.watchScreen=watchScreen;
+export{
+    watchScreen
+}
+
+/*
+a=ul("x","y","dx","dy","wcx","wxy")
+watchScreen(e=>{
+ a[0].setValue("x : "+e.x) 
+ a[1].setValue("y : "+e.y) 
+ a[2].setValue("dx : "+e.dx) 
+ a[3].setValue("dy : "+e.dy) 
+ a[4].setValue("wCx : "+e.wcx) 
+ a[5].setValue("wCy : "+e.wcy) 
+})
+ */

package/src/reactivity/observer/screen.txt

@@ -0,0 +1,13 @@
+screenXLeft = screenX
+screenXRight = screen.availWidth - screenX
+
+screenYTop = screenY
+screenYBottom = screen.availHeight - screenY - outerHeight
+
+screenCenterX = screen.availWidth/2;
+screenCenterX = screen.availHeight/2;
+
+windowCenterX = outerWidth/2+screenX;
+windowCenterX = outerHeight/2+0;
+
+deltaCenterX = screenCenterX-windowCenterX

package/src/time/animation.js

@@ -0,0 +1,76 @@
+import { Ease } from "./utils";
+import { map } from "../math/utils"
+class ZikoTimeAnimation{
+    constructor(callback,ease=Ease.Linear,step=50,{t=[0,null],start=true,duration=3000}={}){
+        this.cache={
+            isRunning:false,
+            AnimationId:null,
+            startTime:null,
+            ease,
+            step,
+            intervall:t,
+            started:start,
+            duration
+        }
+        this.t=0;
+        this.tx=0;
+        this.ty=0;
+        this.i=0;
+        this.callback=callback;
+    }
+    #animation_handler(){
+            this.t+=this.cache.step;
+            this.i++;
+            this.tx=map(this.t,0,this.cache.duration,0,1);
+            this.ty=this.cache.ease(this.tx);
+            this.callback(this)
+            if(this.t>=this.cache.duration){
+                clearInterval(this.cache.AnimationId);
+                this.cache.isRunning=false;
+            }
+    }
+    reset(restart=true){
+        this.t=0
+        this.tx=0;
+        this.ty=0;
+        this.i=0;
+        if(restart)this.start();
+        return this;
+    }
+    #animate(reset=true){
+        if(!this.cache.isRunning){
+            if(reset)this.reset(false);
+            this.cache.isRunning=true;
+            this.cache.startTime = Date.now();
+            this.cache.AnimationId=setInterval(this.#animation_handler.bind(this),this.cache.step);
+        }
+        return this;
+    }
+    start(){
+        this.#animate(true);
+        return this;
+    }
+    pause(){
+        if (this.cache.isRunning) {
+            clearTimeout(this.cache.AnimationId);
+            this.cache.isRunning = false;
+          }
+        return this;
+    }
+    resume(){
+        this.#animate(false);
+        return this;
+    }
+    stop(){
+        this.pause();
+        this.reset(false);
+        return this;
+    }
+    // clear(){
+    // }
+    // stream(){
+    // }
+}
+
+const useAnimation=(callback,ease=Ease.Linear,step=50,config)=>new ZikoTimeAnimation(callback,ease=Ease.Linear,step=50,config)
+export{useAnimation}

package/src/time/index.js

@@ -0,0 +1,54 @@
+import{
+    useTimeLoop
+} from "./loop.js"
+import{
+    useAnimation
+} from "./animation.js"
+import {
+    wait,
+    timeTaken,
+    useThrottle,
+    useDebounce,
+    Ease,
+    time_memory_Taken,
+    waitForUIElm,
+    waitForUIElmSync
+} from "./utils/index.js";
+const Time={
+    wait,
+    timeTaken,
+    useThrottle,
+    useDebounce,
+    Ease,
+    time_memory_Taken,
+    useTimeLoop,
+    useAnimation,
+    waitForUIElm,
+    waitForUIElmSync,
+    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 "./utils/index.js"
+export {
+    useTimeLoop,
+    useAnimation
+}
+export default Time;

package/src/time/loop.js

@@ -0,0 +1,87 @@
+class ZikoTimeLoop {
+  constructor(callback, step = 1000/30, startTime=0, endTime = Infinity, started = true) {
+    this.callback = callback;
+    this.cache = {
+      isRunning: false,
+      AnimationId : null,
+      t0 : null,
+      step,
+      // fps,
+      startTime,
+      endTime,
+      started
+    };
+    this.init();
+    this.i=0;
+  }
+  init(){
+    // if(this.cache.step && this.cache.fps){
+    //   console.warn(`Fps will be adjusted from ${this.cache.fps} to ${1000/this.cache.step} to ensure a smoother animation`);
+    //   this.cache.fps=1000/this.cache.step;
+    // }
+    if(this.cache.started){
+      this.cache.startTime?this.startAfter(this.cache.startTime):this.start();
+      if(this.cache.endTime&&this.cache.endTime!==Infinity)this.stopAfter(this.cache.endTime);
+    }
+    return this;
+  }
+  // get TIME_STEP() {
+  //   // return this.cache.step?this.cache.step:1000 / this.cache.fps;
+  //   return this.cache.step;
+  // }
+  start() {
+    if (!this.cache.isRunning) {
+      this.i=0;
+      this.cache.isRunning = true;
+      this.cache.t0 = Date.now();
+      this.animate();
+    }
+    return this;
+  }
+  pause() {
+    if (this.cache.isRunning) {
+      clearTimeout(this.cache.AnimationId);
+      this.cache.isRunning = false;
+    }
+    return this;
+  }
+  stop(){
+    this.pause();
+    this.i=0;
+    return this;
+  }
+  resume(){
+    this.cache.isRunning=true;
+    this.animate();
+    return this;
+  }
+  startAfter(t=1000){
+    setTimeout(this.start.bind(this),t);
+    return this;
+  }
+  stopAfter(t=1000){
+    setTimeout(this.stop.bind(this),t);
+    return this;   
+  }
+  animate = () => {
+    if (this.cache.isRunning) {
+      const now = Date.now();
+      const delta = now - this.cache.t0;
+      if (delta > this.cache.step) {
+        this.callback(this);
+        this.i++;
+        this.cache.t0 = now - (delta % this.cache.step);
+      }
+      this.cache.AnimationId = setTimeout(this.animate, 0);
+    };
+  }
+}
+const useFps = fps => 1000/fps;
+const useTimeLoop = (callback, step, startTime, endTime, started) => new ZikoTimeLoop(callback, step, startTime, endTime, started);
+
+
+//const a = useTimeLoop((e) => console.log(e.i), {step:100,fps:30,t:[500,4001],start:true});
+export {
+  useTimeLoop,
+  useFps
+}

package/src/time/utils/decorators.js

@@ -0,0 +1,17 @@
+const useDebounce=(fn,delay=1000)=>{
+    let id;
+    return(...args)=>id?clearTimeout(id):setTimeout(()=>fn(...args),delay)
+}
+const useThrottle=(fn,delay)=>{
+    let lastTime=0;
+    return (...args)=>{
+        const now=new Date().getTime()
+        if(now-lastTime<delay)return;
+        lastTime=now;
+        fn(...args); 
+    }
+}
+export{
+    useDebounce,
+    useThrottle
+}

package/src/time/utils/ease.js

@@ -0,0 +1,144 @@
+const Ease={
+    Linear:function(t){
+        return t;
+    },
+    InSin(t){
+        return 1 - Math.cos((t * Math.PI) / 2);
+    },
+    OutSin(t){
+        return Math.sin((t * Math.PI) / 2);
+    },
+    InOutSin(t){
+        return  -(Math.cos(Math.PI * t) - 1) / 2;
+    },
+    InQuad(t){
+        return t**2;
+    },
+    OutQuad(t){
+        return 1 - Math.pow((1 - t),2)
+    },
+    InOutQuad(t){
+        return t < 0.5 ? 2 * Math.pow(t,2) : 1 - Math.pow(-2 * t + 2, 2) / 2;
+    },
+    InCubic(t){
+        return t**3;    
+    },
+    OutCubic(t){
+        return 1 - Math.pow((1 - t),3)
+    },
+    InOutCubic(t){
+        return t < 0.5 ? 4 * Math.pow(t,3) : 1 - Math.pow(-2 * t + 2, 3) / 2;
+    },
+    InQuart(t){
+        return t**4;
+    },
+    OutQuart(t){
+        return 1 - Math.pow((1 - t),4);
+    },
+    InOutQuart(t){
+        return t < 0.5 ? 8 * Math.pow(t,4) : 1 - Math.pow(-2 * t + 2, 4) / 2;
+    },
+    InQuint(t){
+        return t**5;
+    },
+    OutQuint(t){
+        return 1 - Math.pow((1 - t),5);
+    },
+    InOutQuint(t){
+        return t < 0.5 ? 16 * Math.pow(t,5) : 1 - Math.pow(-2 * t + 2, 5) / 2;
+    },
+    InExpo(t){
+        return t === 0 ? 0 : Math.pow(2, 10 * t - 10);
+    },
+    OutExpo(t){
+        return t === 1 ? 1 : 1 - Math.pow(2, -10 * t);
+    },
+    InOutExpo(t){
+        return t === 0? 0: t === 1? 1: t < 0.5 ? Math.pow(2, 20 * t - 10) / 2: (2 - Math.pow(2, -20 * t + 10)) / 2;
+    },
+    InCirc(t){
+        return 1 - Math.sqrt(1 - Math.pow(t, 2));
+    },
+    OutCirc(t){
+        return Math.sqrt(1 - Math.pow(t - 1, 2));
+    },
+    InOutCic(t){
+        return t < 0.5? (1 - Math.sqrt(1 - Math.pow(2 * t, 2))) / 2: (Math.sqrt(1 - Math.pow(-2 * t + 2, 2)) + 1) / 2;
+    },
+    Arc(t){
+        return 1 - Math.sin(Math.acos(t));
+    },
+    Back(t){
+        // To Be Changed
+        let x=1
+        return Math.pow(t, 2) * ((x + 1) * t - x);  
+    },
+    Elastic(t){
+        return -2*Math.pow(2, 10 * (t - 1)) * Math.cos(20 * Math.PI * t / 3 * t);
+    },
+    InBack(t){
+        const c1 = 1.70158;
+        const c3 = c1 + 1;
+        return c3 *Math.pow(t,3)- c1 * (t**2);      
+    },
+    OutBack(t){
+        const c1 = 1.70158;
+        const c3 = c1 + 1;
+        return 1 + c3 * Math.pow(t - 1, 3) + c1 * Math.pow(t - 1, 2);     
+    },
+    InOutBack(t){
+        const c1 = 1.70158;
+        const c2 = c1 * 1.525;
+        return t < 0.5
+        ? (Math.pow(2 * t, 2) * ((c2 + 1) * 2 * t - c2)) / 2
+        : (Math.pow(2 * t - 2, 2) * ((c2 + 1) * (t * 2 - 2) + c2) + 2) / 2;        
+    },
+    InElastic(t){
+        const c4 = (2 * Math.PI) / 3;return t === 0
+        ? 0
+        : t === 1
+        ? 1
+        : -Math.pow(2, 10 * t - 10) * Math.sin((t * 10 - 10.75) * c4);
+    },
+    OutElastic(t){
+        const c4 = (2 * Math.PI) / 3;
+        return t === 0
+        ? 0
+        : t === 1
+        ? 1
+        : Math.pow(2, -10 * t) * Math.sin((t * 10 - 0.75) * c4) + 1;
+    },
+    InOutElastic(t){
+        const c5 = (2 * Math.PI) / 4.5;
+        return t === 0
+        ? 0
+        : t === 1
+        ? 1
+        : t < 0.5
+        ? -(Math.pow(2, 20 * t - 10) * Math.sin((20 * t - 11.125) * c5)) / 2
+        : (Math.pow(2, -20 * t + 10) * Math.sin((20 * t - 11.125) * c5)) / 2 + 1;
+    },
+    InBounce(t){
+        return 1 - Ease.OutBounce(1-t);
+    },
+    OutBounce(t){
+        const n1 = 7.5625;
+        const d1 = 2.75;
+        if (t < 1 / d1) {
+            return n1 * t * t;
+        } else if (t < 2 / d1) {
+            return n1 * (t -= 1.5 / d1) * t + 0.75;
+        } else if (t < 2.5 / d1) {
+            return n1 * (t -= 2.25 / d1) * t + 0.9375;
+        } else {
+            return n1 * (t -= 2.625 / d1) * t + 0.984375;
+        }
+
+    },
+    InOutBounce(t){
+        return t < 0.5
+        ? (1 - Ease.OutBounce(1 - 2 * t)) / 2
+        : (1 + Ease.OutBounce(2 * t - 1)) / 2;
+    }
+}
+export default Ease

package/src/time/utils/index.js

@@ -0,0 +1,18 @@
+import Ease from "./ease.js";
+const wait=(delayInMS)=>{
+    return new Promise((resolve) => setTimeout(resolve, delayInMS));
+}
+const timeTaken = callback => {
+    console.time('timeTaken');
+    const r = callback();
+    console.timeEnd('timeTaken');
+    return r;
+}
+export{
+    wait,
+    timeTaken,
+    Ease
+}
+export * from "./decorators.js";
+export * from "./performance.js";
+export * from "./ui.js"

package/src/time/utils/performance.js

@@ -0,0 +1,16 @@
+const time_memory_Taken = (callback) => {
+    const t0 = Date.now();
+    const m0 = performance.memory.usedJSHeapSize;
+    const result = callback();
+    const t1 = Date.now();
+    const m1 = performance.memory.usedJSHeapSize;
+    const elapsedTime = t1 - t0;
+    const usedMemory = m1 - m0;
+    return { 
+        elapsedTime,
+        usedMemory, 
+        result 
+    };
+  };
+export {time_memory_Taken}
+    

package/src/time/utils/ui.js

@@ -0,0 +1,26 @@
+const waitForUIElm=(UIElement)=>{
+    return new Promise(resolve => {
+        if (UIElement.element) {
+            return resolve(UIElement.element);
+        }
+  
+        const observer = new MutationObserver(() => {
+            if (UIElement.element) {
+                resolve(UIElement.element);
+                observer.disconnect();
+            }
+        });
+  
+        observer.observe(document?.body, {
+            childList: true,
+            subtree: true
+        });
+    });
+  }
+  const waitForUIElmSync=(UIElement,timeout=2000)=>{
+    const t0=Date.now();
+    while(Date.now()-t0<timeout){
+      if(UIElement.element)return UIElement.element
+    }
+  }
+  export {waitForUIElm,waitForUIElmSync}

package/src/types.js

@@ -0,0 +1,71 @@
+import ZikoUIElement from "./user-interface/elements/primitives/ZikoUIElement";
+import ZikoUIContainerElement from "./user-interface/elements/primitives/ZikoUIContainerElement";
+
+export {
+    ZikoUIElement,
+    ZikoUIContainerElement
+}
+export {
+    ZikoUIAbbrText,
+    ZikoUIAccordion,
+    ZikoUIArticle,
+    ZikoUIAside,
+    ZikoUIAudio,
+    ZikoUIBlockQuote,
+    ZikoUIBr,
+    ZikoUIBreadcrumbs,
+    ZikoUICodeNote,
+    ZikoUICodeText,
+    ZikoUIDefintion,
+    ZikoUIFigure,
+    ZikoUIFlex,
+    ZikoUIFooter,
+    ZikoUIForm,
+    ZikoUIGrid,
+    ZikoUIHeader,
+    ZikoUIHeading,
+    ZikoUIHorizontalSplitter,
+    ZikoUIHr,
+    ZikoUIHtmlTag,
+    ZikoUIImage,
+    ZikoUIInput,
+    ZikoUIInputCheckbox,
+    ZikoUIInputColor,
+    ZikoUIInputDatalist,
+    ZikoUIInputDate,
+    ZikoUIInputDateTime,
+    ZikoUIInputEmail,
+    ZikoUIInputImage,
+    ZikoUIInputNumber,
+    ZikoUIInputOption,
+    ZikoUIInputPassword,
+    ZikoUIInputRadio,
+    ZikoUIInputSearch,
+    ZikoUIInputSlider,
+    ZikoUIInputTime,
+    ZikoUILabel,
+    ZikoUILink,
+    ZikoUIMain,
+    ZikoUIMenu3d,
+    ZikoUIModal,
+    ZikoUINav,
+    ZikoUIParagraphe,
+    ZikoUIQuote,
+    ZikoUISection,
+    ZikoUISelect,
+    ZikoUISubText,
+    ZikoUISupText,
+    ZikoUIText,
+    ZikoUITextArea,
+    ZikoUIVerticalSplitter,
+    ZikoUIVideo,
+} from "./user-interface/index.js"
+
+export{
+    Matrix,
+    LinearSystem,
+    Complex,
+    Random,
+} from "./math/index.js"
+
+