ziko 0.39.0 → 0.40.1

package/src/time/loop/index.js

@@ -1,87 +1,103 @@
-class ZikoTimeLoop {
-  constructor(callback, step = 1000/30, startTime=0, endTime = Infinity, started = true) {
+export class TimeLoop {
+  constructor(callback, { step = 1000, t0 = 0, t1 = Infinity, autoplay = true } = {}) {
     this.callback = callback;
     this.cache = {
       isRunning: false,
-      AnimationId : null,
-      t0 : null,
+      id: null,
+      last_tick: null,
       step,
-      // fps,
-      startTime,
-      endTime,
-      started
+      t0,
+      t1,
+      autoplay,
+      pauseTime: null,
+      frame : 0,
     };
-    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);
+
+    if (autoplay) {
+      t0 ? this.startAfter(t0) : this.start();
+      if (t1 !== Infinity) this.stopAfter(t1);
     }
-    return this;
   }
-  // get TIME_STEP() {
-  //   // return this.cache.step?this.cache.step:1000 / this.cache.fps;
-  //   return this.cache.step;
-  // }
+
+  get frame(){
+    return this.cache.frame;
+  }
+  get elapsed(){
+    return this.cache.elapsed;
+  }
+
   start() {
     if (!this.cache.isRunning) {
-      this.i=0;
+      this.cache.frame = 0;
       this.cache.isRunning = true;
-      this.cache.t0 = Date.now();
+      this.cache.last_tick = Date.now();
       this.animate();
     }
     return this;
   }
+
   pause() {
     if (this.cache.isRunning) {
-      clearTimeout(this.cache.AnimationId);
+      clearTimeout(this.cache.id);
       this.cache.isRunning = false;
+      this.cache.pauseTime = Date.now();
     }
     return this;
   }
-  stop(){
-    this.pause();
-    this.i=0;
+
+  resume() {
+    if (!this.cache.isRunning) {
+      this.cache.isRunning = true;
+      if (this.cache.pauseTime) {
+        // adjust start time so delta stays consistent
+        const pausedDuration = Date.now() - this.cache.pauseTime;
+        this.cache.last_tick += pausedDuration;
+      }
+      this.animate();
+    }
     return this;
   }
-  resume(){
-    this.cache.isRunning=true;
-    this.animate();
+
+  stop() {
+    this.pause();
+    this.cache.frame = 0;
     return this;
   }
-  startAfter(t=1000){
-    setTimeout(this.start.bind(this),t);
+
+  startAfter(t = 1000) {
+    setTimeout(() => this.start(), t);
     return this;
   }
-  stopAfter(t=1000){
-    setTimeout(this.stop.bind(this),t);
-    return this;   
+
+  stopAfter(t = 1000) {
+    setTimeout(() => this.stop(), t);
+    return this;
   }
+
   animate = () => {
     if (this.cache.isRunning) {
       const now = Date.now();
-      const delta = now - this.cache.t0;
-      if (delta > this.cache.step) {
+      const delta = now - this.cache.last_tick;
+
+      if (delta >= this.cache.step) {
+        this.cache.elapsed = now - (this.cache.t0 || 0);
         this.callback(this);
-        this.i++;
-        this.cache.t0 = now - (delta % this.cache.step);
+        this.cache.frame++;
+        this.cache.last_tick = now - (delta % this.cache.step);
       }
-      this.cache.AnimationId = setTimeout(this.animate, 0);
-    };
+
+      this.cache.id = setTimeout(this.animate, 0);
+    }
   }
 }
-const useFps = fps => 1000/fps;
-const useTimeLoop = (callback, step, startTime, endTime, started) => new ZikoTimeLoop(callback, step, startTime, endTime, started);
 
+export const loop = (callback, options = {}) => new TimeLoop(callback, options);
+
+
+// Helpers
+// const useFps = (fps) => 1000 / fps;
+
+// const _loop = loop( e => {
+//   console.log("Frame:", e.frame, " Elapsed: ", e.elapsed);
+// });
 
-//const a = useTimeLoop((e) => console.log(e.i), {step:100,fps:30,t:[500,4001],start:true});
-export {
-  useTimeLoop,
-  useFps
-}

package/src/time/utils/index.js

@@ -1,4 +1,4 @@
-import Ease from "./ease.js";
+// import Ease from "./ease.js";
 const wait=(delayInMS)=>{
     return new Promise((resolve) => setTimeout(resolve, delayInMS));
 }
@@ -11,7 +11,7 @@ const timeTaken = callback => {
 export{
     wait,
     timeTaken,
-    Ease
+    // Ease
 }
 export * from "./performance.js";
 export * from "./ui.js"

package/src/ui/__methods__/attrs.js

@@ -1,5 +1,8 @@
-import { Str } from "../../data";
 import { isStateGetter } from "../../hooks/use-state.js";
+import { 
+  is_camelcase,
+  camel2hyphencase
+ } from '../../data/string/index.js'
 
 // To Do add getter, watchAttr
 export const AttrsMethods = {
@@ -22,7 +25,7 @@ export const AttrsMethods = {
     return this;
   },
   getAttr(name){
-    name = Str.isCamelCase(name) ? Str.camel2hyphencase(name) : name;
+    name = is_camelcase(name) ? camel2hyphencase(name) : name;
     return this.element.attributes[name].value;
   },
   setContentEditable(bool = true) {
@@ -32,7 +35,7 @@ export const AttrsMethods = {
 };
 
 function _set_attrs_(name, value){
-    if(this.element?.tagName !== "svg") name = Str.isCamelCase(name) ? Str.camel2hyphencase(name) : name;
+    if(this.element?.tagName !== "svg") name = is_camelcase(name) ? camel2hyphencase(name) : name;
     if(this?.attr[name] && this?.attr[name]===value) return;
     if(isStateGetter(value)){
         const getter = value()

package/src/ui/__methods__/dom.js

@@ -68,7 +68,7 @@ export const DomMethods = {
 
 };
 
-function __addItem__(adder, pusher, ...ele) {
+async function __addItem__(adder, pusher, ...ele) {
   if (this.cache.isFrozzen) {
     console.warn("You can't append new item to frozzen element");
     return this;
@@ -94,6 +94,13 @@ function __addItem__(adder, pusher, ...ele) {
         ele[i].target = this.element;
         this.items[pusher](ele[i]);
     } 
+    else if(ele[i] instanceof Promise){
+      const UIEle = await ele[i]
+      UIEle.cache.parent = this;
+      this.element?.[adder](UIEle.element);
+      UIEle.target = this.element;
+      this.items[pusher](UIEle)
+    }
     else if (ele[i] instanceof Object) {
       if (ele[i]?.style) this.style(ele[i]?.style);
       if (ele[i]?.attr) {

package/src/ui/__methods__/style.js

@@ -1,14 +1,34 @@
-// Process width and height
+import { isStateGetter } from '../../hooks/use-state.js'
 export const StyleMethods = {
     style(styles){
-        Object.assign(this.element.style, styles)
+        for(let key in styles){
+            const value = styles[key];
+            if(isStateGetter(value)){
+                const getter = value()
+                Object.assign(this.element.style, {[key] : getter.value})
+                getter._subscribe(
+                    (newValue) => {
+                        console.log({newValue})
+                        Object.assign(this.element.style, {[key] : newValue})
+                    },
+                    // this 
+                );
+            }
+            else Object.assign(this.element.style, {[key] : value})
+        }
         return this;
     },
     size(width, height){
         return this.style({width, height})
+    },
+    hide(){
+
+    },
+    show(){
+
     },
     animate(keyframe, {duration=1000, iterations=1, easing="ease"}={}){
         this.element?.animate(keyframe,{duration, iterations, easing});
         return this;
-  }
+    }
 }

package/src/ui/constructors/style/index.js

@@ -1,6 +1,7 @@
 import { addSuffixeToNumber } from "../../__utils__/index.js";
 import { Matrix,cos,sin} from "../../../math/index.js";
 import { Str } from "../../../data/index.js";
+import { camel2hyphencase } from '../../../data/string/converters.js'
 class ZikoUIElementStyle{
     constructor(defaultStyle={}){
         this.target=null;
@@ -25,7 +26,7 @@ class ZikoUIElementStyle{
         for(const [key, value] of Object.entries(styles)){
             if(Str.isCamelCase(key)){
                 delete styles[key];
-                Object.assign(styles,{[Str.camel2hyphencase(key)]:value})
+                Object.assign(styles,{[camel2hyphencase(key)]:value})
             }
         }
         if(this?.target?.element?.style)Object.assign(this?.target?.element?.style, styles);

package/src/ui/tags/index.js

@@ -19,18 +19,14 @@ const tags = new Proxy({}, {
     let type ;
     if(HTMLTags.includes(tag)) type = 'html'
     if(SVGTags.includes(tag)) type = 'svg'
-    if(HTMLTags.includes(tag)) return (...args)=>{
+    return (...args)=>{
       console.log(isStateGetter(args[0]))
-    //  if(typeof args[0] === 'function') {
-    //   console.log(args[0], args[0]?.() instanceof StateGetter)
-    //   globalThis.a = args[0]
-    //   console.log({t : a.constructor})
-    //  }
       if(
         ['string', 'number'].includes(typeof args[0]) 
         || args[0] instanceof UIElement 
         || (typeof args[0] === 'function' && args[0]().isStateGetter())
-      ) return new UIElement({element :tag, name : tag, type}).append(...args);
+      ) return new UIElement({element : tag, name : tag, type}).append(...args);
+      // console.log(args[0])
       return new UIElement({element : tag}).setAttr(args.shift()).append(...args)
     }
     // if(SVGTags.includes(tag)) return (...args) => new UIElement(tag,"",{el_type : "svg"}).append(...args);

package/src/time/utils/ease.js

@@ -1,144 +0,0 @@
-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