ziko 0.38.1 → 0.40.0

package/src/time/ease/index.js

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

package/src/time/index.js

@@ -1,11 +1,8 @@
-export * from './loop/index.js'
 export * from './animation/index.js'
-export * from './utils/index.js';
+export * from './clocks/index.js'
+export * from './converters/index.js'
 export * from './decorators/index.js';
-// import * as Utils from './utils'
-// const Time = {
-//     ...Loop,
-//     ...Animation,
-//     ...Utils
-// }
-// export default Time
+export * from './delay/index.js'
+export * from './ease/index.js'
+export * from './loop/index.js'
+export * from './utils/index.js';

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

@@ -0,0 +1,49 @@
+import { isStateGetter } from "../../hooks/use-state.js";
+import { 
+  is_camelcase,
+  camel2hyphencase
+ } from '../../data/string/index.js'
+
+// To Do add getter, watchAttr
+export const AttrsMethods = {
+  setAttr(name, value) {
+    if(name instanceof Object){
+      const [names,values]=[Object.keys(name),Object.values(name)];
+      for(let i=0;i<names.length;i++){
+        if(values[i] instanceof Array)value[i] = values[i].join(" ");
+        _set_attrs_.call(this, names[i], values[i])
+      }
+    }
+    else{
+      if(value instanceof Array) value = value.join(" ");
+      _set_attrs_.call(this, name, value)
+    }
+    return this;
+  },
+  removeAttr(...names) {
+    for(let i=0;i<names.length;i++)this.element?.removeAttribute(names[i]);
+    return this;
+  },
+  getAttr(name){
+    name = is_camelcase(name) ? camel2hyphencase(name) : name;
+    return this.element.attributes[name].value;
+  },
+  setContentEditable(bool = true) {
+    this.setAttr("contenteditable", bool);
+    return this;
+  }
+};
+
+function _set_attrs_(name, value){
+    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()
+        getter._subscribe(
+            (newValue) => this.element?.setAttribute(name, newValue),
+            this 
+        );
+    }
+    else this.element?.setAttribute(name, value)
+    Object.assign(this.cache.attributes, {[name]:value});   
+}

package/src/ui/__methods__/index.js

@@ -1,4 +1,5 @@
+export * from './attrs.js'
 export * from './dom.js'
 export * from './events.js'
 export * from './indexing.js'
-// export * from './style.js'
+export * from './style.js'

package/src/ui/__methods__/style.js

@@ -0,0 +1,34 @@
+import { isStateGetter } from '../../hooks/use-state.js'
+export const StyleMethods = {
+    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/__utils__/index.js

@@ -1,11 +1,11 @@
-import ZikoUIElement from "../constructors/ZikoUIElement.js";
+import UIElement from "../constructors/UIElement.js";
 const Id = (a) => document.getElementById(a);
 const Class = (a) => [...document.getElementsByClassName(a)];
 const $=(...selector)=>{
   var ele=[]
   for(let i=0;i<selector.length;i++){
     if(typeof selector[i]=="string")ele.push(...document.querySelectorAll(selector[i]));
-    if(selector[i] instanceof ZikoUIElement)ele.push(selector[i].element)
+    if(selector[i] instanceof UIElement)ele.push(selector[i].element)
   }
   return ele.length===1?ele[0]:ele;
 }

package/src/ui/constructors/{ZikoUIElement.js → UIElement.js}

@@ -1,12 +1,12 @@
-import ZikoUINode from "./ZikoUINode.js";
+import UINode from "./UINode.js";
 import { register } from "../../__helpers__/register/index.js";
 import { 
+  AttrsMethods,
   DomMethods,
   IndexingMethods,
-  EventsMethodes
+  EventsMethodes,
+  StyleMethods
 } from "../__methods__/index.js";
-import { ZikoUseStyle } from "../../reactivity/hooks/UI/useStyle.js";
-import { ZikoUIElementStyle } from "./style/index.js";
 
 import { 
   useCustomEvent,
@@ -17,11 +17,10 @@ import {
   watchChildren
 } from "../../reactivity/index.js"
 import { Random } from "../../math/index.js";
-import { Str } from "../../data/index.js";
 import {__init__global__} from '../../__ziko__/index.js';
 __init__global__()
-class ZikoUIElement extends ZikoUINode{
-  constructor(element, name="", {type="html", useDefaultStyle=false}={}){
+class UIElement extends UINode{
+  constructor({element, name ='', type="html", useDefaultStyle=false}={}){
     super()
     this.target = globalThis.__Ziko__.__Config__.default.target||globalThis?.document?.body;
     if(typeof element === "string") {
@@ -32,9 +31,16 @@ class ZikoUIElement extends ZikoUINode{
       }
     }
     else{
-      this.target = element.parentElement;
+      this.target = element?.parentElement;
     }
-    register(this, DomMethods, IndexingMethods, EventsMethodes);
+    register(
+      this, 
+      AttrsMethods, 
+      DomMethods, 
+      StyleMethods,
+      IndexingMethods, 
+      EventsMethodes
+    );
     Object.assign(this.cache, {
       name,
       isInteractive : [true, false][Math.floor(2*Math.random())],
@@ -44,7 +50,6 @@ class ZikoUIElement extends ZikoUINode{
       isHidden: false,
       isFrozzen:false,
       legacyParent : null,
-      style: new ZikoUIElementStyle({}),
       attributes: {},
       filters: {},
       temp:{}
@@ -69,7 +74,6 @@ class ZikoUIElement extends ZikoUINode{
     if(element)Object.assign(this.cache,{element});
     this.uuid = `${this.cache.name}-${Random.string(16)}`
     this.ui_index = globalThis.__Ziko__.__CACHE__.get_ui_index();
-    this.cache.style.linkTo(this);
     useDefaultStyle && this.style({ 
       position: "relative",
       boxSizing:"border-box",
@@ -151,25 +155,17 @@ class ZikoUIElement extends ZikoUINode{
     else UI.element=this.element.cloneNode(true);
     return UI.render(render);
   }
-  style(styles){
-    styles instanceof ZikoUseStyle ? this.st.style(styles.current): this.st.style(styles);
-    return this;
-  }
-  size(width,height){
-    this.st.size(width,height);
-    return this; 
-  }
   [Symbol.iterator]() {
     return this.items[Symbol.iterator]();
   }
   maintain() {
-  for (let i = 0; i < this.items.length; i++) {
-    Object.defineProperty(this, i, {
-      value: this.items[i],
-      writable: true,
-      configurable: true,
-      enumerable: false 
-      });
+    for (let i = 0; i < this.items.length; i++) {
+      Object.defineProperty(this, i, {
+        value: this.items[i],
+        writable: true,
+        configurable: true,
+        enumerable: false 
+        });
     }
   }
   freeze(freeze){
@@ -187,43 +183,6 @@ class ZikoUIElement extends ZikoUINode{
   describe(label){
     if(label)this.setAttr("aria-label",label)
   }
-  animate(keyframe, {duration=1000, iterations=1, easing="ease"}={}){
-    this.element?.animate(keyframe,{duration, iterations, easing});
-    return this;
-  }
-    // Attributes
-  #setAttr(name, value){
-    if(this.element?.tagName !== "svg") name = Str.isCamelCase(name) ? Str.camel2hyphencase(name) : name;
-    if(this?.attr[name] && this?.attr[name]===value) return;
-    this.element?.setAttribute(name, value)
-    Object.assign(this.cache.attributes, {[name]:value});
-  }
-  setAttr(name, value) {
-    if(name instanceof Object){
-      const [names,values]=[Object.keys(name),Object.values(name)];
-      for(let i=0;i<names.length;i++){
-        if(values[i] instanceof Array)value[i] = values[i].join(" ");
-        this.#setAttr(names[i], values[i])
-      }
-    }
-    else{
-      if(value instanceof Array)value = value.join(" ");
-      this.#setAttr(name, value)
-    }
-    return this;
-  }
-  removeAttr(...names) {
-    for(let i=0;i<names.length;i++)this.element?.removeAttribute(names[i]);
-    return this;
-  }
-  getAttr(name){
-    name = Str.isCamelCase(name) ? Str.camel2hyphencase(name) : name;
-    return this.element.attributes[name].value;
-  }
-  setContentEditable(bool = true) {
-    this.setAttr("contenteditable", bool);
-    return this;
-  }
   get children() {
     return [...this.element.children];
   }
@@ -295,4 +254,4 @@ class ZikoUIElement extends ZikoUINode{
   }
 
 }
-export default ZikoUIElement;
+export default UIElement;

package/src/ui/constructors/{ZikoUINode.js → UINode.js}

@@ -1,4 +1,4 @@
-export default class ZikoUINode {
+export default class UINode {
     constructor(node){
         this.cache = {
             node
@@ -12,4 +12,4 @@ export default class ZikoUINode {
     } 
 }
 
-globalThis.node = (node) => new ZikoUINode(node);
+globalThis.node = (node) => new UINode(node);

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/flex/index.js

@@ -1,7 +1,7 @@
-import ZikoUIElement from "../constructors/ZikoUIElement.js";
-class ZikoUIFlex extends ZikoUIElement {
+import UIElement from "../constructors/UIElement.js";
+class ZikoUIFlex extends UIElement {
   constructor(tag = "div", w = "100%", h = "100%") {
-    super(tag ,"Flex");
+    super({element : tag , name : "Flex"});
     this.direction = "cols";
     if (typeof w == "number") w += "%";
     if (typeof h == "number") h += "%";
@@ -69,13 +69,13 @@ class ZikoUIFlex extends ZikoUIElement {
   }
 }
 
-const Flex = (...ZikoUIElement) =>{
+const Flex = (...UIElement) =>{
   let tag="div";
-  if(typeof ZikoUIElement[0]==="string"){
-    tag=ZikoUIElement[0];
-    ZikoUIElement.pop();
+  if(typeof UIElement[0]==="string"){
+    tag=UIElement[0];
+    UIElement.pop();
   }
-  return new ZikoUIFlex(tag).append(...ZikoUIElement);
+  return new ZikoUIFlex(tag).append(...UIElement);
 }
 function set_vertical(direction){
   direction == 1

package/src/ui/graphics/canvas.js

@@ -1,6 +1,6 @@
-import  ZikoUIElement from "../constructors/ZikoUIElement.js";
+import  UIElement from "../constructors/UIElement.js";
 import {Matrix} from "../../math/matrix/Matrix.js"
-class ZikoUICanvas extends ZikoUIElement{
+class ZikoUICanvas extends UIElement{
     constructor(w,h){
         super("canvas","canvas");
         this.ctx = this.element?.getContext("2d");

package/src/ui/graphics/svg.js

@@ -1,5 +1,5 @@
-import ZikoUIElement  from "../constructors/ZikoUIElement.js";
-class ZikoUISvg extends ZikoUIElement {
+import UIElement  from "../constructors/UIElement.js";
+class ZikoUISvg extends UIElement {
     constructor(w=360,h=300) {
       super("svg","svg");
       //this.cache={};

package/src/ui/grid/index.js

@@ -1,7 +1,7 @@
-import ZikoUIElement from "../constructors/ZikoUIElement.js"
-class ZikoUIGrid extends ZikoUIElement {
+import UIElement from "../constructors/UIElement.js"
+class ZikoUIGrid extends UIElement {
     constructor(tag ="div", w = "50vw", h = "50vh") {
-      super(tag,"Grid");
+      super({element : tag, name : "Grid"});
       this.direction = "cols";
       if (typeof w == "number") w += "%";
       if (typeof h == "number") h += "%";
@@ -29,5 +29,5 @@ class ZikoUIGrid extends ZikoUIElement {
         return this;
     }
 }
-const Grid = (...ZikoUIElement) => new ZikoUIGrid("div").append(...ZikoUIElement);
+const Grid = (...UIElement) => new ZikoUIGrid("div").append(...UIElement);
 export {Grid,ZikoUIGrid};

package/src/ui/index.js

@@ -1,5 +1,5 @@
-export { default as ZikoUIElement } from "./constructors/ZikoUIElement.js"
-export { default as ZikoUINode } from "./constructors/ZikoUINode.js"
+export { default as UIElement } from "./constructors/UIElement.js"
+export { default as UINode } from "./constructors/UINode.js"
 export * from './tags/index.js';
 export * from './text/index.js';
 export * from './flex/index.js';

package/src/ui/suspense/index.js

@@ -1,7 +1,7 @@
-import ZikoUIElement from "../constructors/ZikoUIElement";
-class ZikoUISuspense extends ZikoUIElement{
+import UIElement from "../constructors/UIElement";
+class ZikoUISuspense extends UIElement{
     constructor(fallback_ui, callback){
-        super("div", "suspense")
+        super({element : "div", name : "suspense"})
         this.setAttr({
             dataTemp : "suspense"
         })