ziko 0.0.17 → 0.0.19

package/src/reactivity/observer/intersection.js

@@ -1,44 +1,44 @@
-class ZikoIntersectionObserver{
-    constructor(UIElement,callback,{threshold=0,margin=0}={}){
-        this.target=UIElement;
-        this.config={
-            threshold,
-            margin
-        }
-        if(!globalThis.IntersectionObserver){
-            console.log("IntersectionObserver Not Supported")
-            return;
-        }
-        this.observer=new IntersectionObserver((entries)=>{
-            this.entrie=entries[0];
-            callback(this)
-        },{
-            threshold:this.threshold,
-        })
-    }
-    get ratio(){
-        return this.entrie.intersectionRatio;
-    }
-    get isIntersecting(){
-        return this.entrie.isIntersecting;
-    }
-    setThreshould(threshold){
-        this.config.threshold=threshold;
-        return this;
-    }
-    setMargin(margin){
-        margin=(typeof margin === "number")?margin+"px":margin;
-        this.config.margin=margin;
-        return this;
-    }
-    start(){
-        this.observer.observe(this.target.element);
-        return this;
-    }
-    stop(){
-        return this;
-    }
-}
-
-const watchIntersection=(UI,callback,config)=>new ZikoIntersectionObserver(UI,callback,config);
+class ZikoIntersectionObserver{
+    constructor(UIElement,callback,{threshold=0,margin=0}={}){
+        this.target=UIElement;
+        this.config={
+            threshold,
+            margin
+        }
+        if(!globalThis.IntersectionObserver){
+            console.log("IntersectionObserver Not Supported")
+            return;
+        }
+        this.observer=new IntersectionObserver((entries)=>{
+            this.entrie=entries[0];
+            callback(this)
+        },{
+            threshold:this.threshold,
+        })
+    }
+    get ratio(){
+        return this.entrie.intersectionRatio;
+    }
+    get isIntersecting(){
+        return this.entrie.isIntersecting;
+    }
+    setThreshould(threshold){
+        this.config.threshold=threshold;
+        return this;
+    }
+    setMargin(margin){
+        margin=(typeof margin === "number")?margin+"px":margin;
+        this.config.margin=margin;
+        return this;
+    }
+    start(){
+        this.observer.observe(this.target.element);
+        return this;
+    }
+    stop(){
+        return this;
+    }
+}
+
+const watchIntersection=(UI,callback,config)=>new ZikoIntersectionObserver(UI,callback,config);
 export {watchIntersection}

package/src/reactivity/observer/mutation.js

@@ -1,113 +1,113 @@
-class ZikoMutationObserver {
-    constructor(targetUIElement, options) {
-      this.target = targetUIElement;
-      this.observer = null;
-      this.cache = {
-        options : options || { attributes: true, childList: true, subtree: true },
-        streamingEnabled : true,
-        lastMutation : null,
-        mutationHistory : {
-          // attributes: [],
-          // childList: [],
-          // subtree: [],
-        },
-      }
-  // children to Items : a.items.filter(n=>n.element === a[0].element)
-      this.observeCallback = (mutationsList, observer) => {
-        // if(this.cache.lastUpdatedAttr){
-        //   this.cache.lastUpdatedAttr = mutation.target.getAttribute(mutation.attributeName)
-        // }
-        if (this.cache.streamingEnabled) {
-          for (const mutation of mutationsList) {
-            switch(mutation.type){
-              case 'attributes':this.cache.mutationHistory.attributes.push(mutation.target.getAttribute(mutation.attributeName));break;
-              case 'childList':this.cache.mutationHistory.childList.push(mutation);break;
-              case 'subtree':this.cache.mutationHistory.subtree.push(mutation);break;
-            }
-          }
-        }
-        if (this.callback) {
-          this.callback(mutationsList, observer);
-        }
-      };
-    }
-  
-    observe(callback) {
-      if(!this.observer) {
-        if(!globalThis.MutationObserver) {
-          console.log("MutationObserver Nor Supported")
-          return;
-        }
-        this.observer = new MutationObserver(this.cache.observeCallback);
-        this.observer.observe(this.target.element, this.cache.options);
-        // this.callback = ([e]) => callback.call(e,this.target);
-        this.callback = ([e]) => callback.call(e, this);
-        this.cache.streamingEnabled = true;
-      }
-    }
-  
-    pause(options) {
-      if (this.observer) {
-        this.observer.disconnect();
-        if (options) {
-          this.observer.observe(this.target, options);
-        }
-      }
-    }
-  
-    reset(options) {
-      if (this.observer) {
-        this.observer.disconnect();
-        this.observer.observe(this.target, options || this.cache.options);
-      }
-    }
-  
-    clear() {
-      if (this.observer) {
-        this.observer.disconnect();
-        this.observer = null;
-        this.cache.mutationHistory = {
-          attributes: [],
-          childList: [],
-          subtree: [],
-        };
-      }
-      this.cache.streamingEnabled = false;
-      return this;
-    }
-  
-    getMutationHistory() {
-      return this.cache.mutationHistory;
-    }
-  
-    enableStreaming() {
-      this.cache.streamingEnabled = true;
-      return this;
-    }
-  
-    disableStreaming() {
-      this.cache.streamingEnabled = false;
-      return this;
-    }
-  }
-
-
-
-const watch=(targetUIElement,options={},callback=null)=>{
-    const Observer= new ZikoMutationObserver(targetUIElement,options);
-    if(callback)Observer.observe(callback);
-    return Observer
-}
-// const watchAttr = (targetUIElement, callback = null) => {
-//   const options = { attributes: true, childList: false, subtree: false };
-//   return watch(targetUIElement, options, ([e])=>callback.call(e,targetUIElement));
-// };
-// const watchAttr = (targetUIElement, callback = null) => {
-//   const options = { attributes: true, childList: false, subtree: false };
-//   return watch(targetUIElement, options, callback);
-// };
-
-export { 
-  ZikoMutationObserver,
-  watch,
+class ZikoMutationObserver {
+    constructor(targetUIElement, options) {
+      this.target = targetUIElement;
+      this.observer = null;
+      this.cache = {
+        options : options || { attributes: true, childList: true, subtree: true },
+        streamingEnabled : true,
+        lastMutation : null,
+        mutationHistory : {
+          // attributes: [],
+          // childList: [],
+          // subtree: [],
+        },
+      }
+  // children to Items : a.items.filter(n=>n.element === a[0].element)
+      this.observeCallback = (mutationsList, observer) => {
+        // if(this.cache.lastUpdatedAttr){
+        //   this.cache.lastUpdatedAttr = mutation.target.getAttribute(mutation.attributeName)
+        // }
+        if (this.cache.streamingEnabled) {
+          for (const mutation of mutationsList) {
+            switch(mutation.type){
+              case 'attributes':this.cache.mutationHistory.attributes.push(mutation.target.getAttribute(mutation.attributeName));break;
+              case 'childList':this.cache.mutationHistory.childList.push(mutation);break;
+              case 'subtree':this.cache.mutationHistory.subtree.push(mutation);break;
+            }
+          }
+        }
+        if (this.callback) {
+          this.callback(mutationsList, observer);
+        }
+      };
+    }
+  
+    observe(callback) {
+      if(!this.observer) {
+        if(!globalThis.MutationObserver) {
+          console.log("MutationObserver Nor Supported")
+          return;
+        }
+        this.observer = new MutationObserver(this.cache.observeCallback);
+        this.observer.observe(this.target.element, this.cache.options);
+        // this.callback = ([e]) => callback.call(e,this.target);
+        this.callback = ([e]) => callback.call(e, this);
+        this.cache.streamingEnabled = true;
+      }
+    }
+  
+    pause(options) {
+      if (this.observer) {
+        this.observer.disconnect();
+        if (options) {
+          this.observer.observe(this.target, options);
+        }
+      }
+    }
+  
+    reset(options) {
+      if (this.observer) {
+        this.observer.disconnect();
+        this.observer.observe(this.target, options || this.cache.options);
+      }
+    }
+  
+    clear() {
+      if (this.observer) {
+        this.observer.disconnect();
+        this.observer = null;
+        this.cache.mutationHistory = {
+          attributes: [],
+          childList: [],
+          subtree: [],
+        };
+      }
+      this.cache.streamingEnabled = false;
+      return this;
+    }
+  
+    getMutationHistory() {
+      return this.cache.mutationHistory;
+    }
+  
+    enableStreaming() {
+      this.cache.streamingEnabled = true;
+      return this;
+    }
+  
+    disableStreaming() {
+      this.cache.streamingEnabled = false;
+      return this;
+    }
+  }
+
+
+
+const watch=(targetUIElement,options={},callback=null)=>{
+    const Observer= new ZikoMutationObserver(targetUIElement,options);
+    if(callback)Observer.observe(callback);
+    return Observer
+}
+// const watchAttr = (targetUIElement, callback = null) => {
+//   const options = { attributes: true, childList: false, subtree: false };
+//   return watch(targetUIElement, options, ([e])=>callback.call(e,targetUIElement));
+// };
+// const watchAttr = (targetUIElement, callback = null) => {
+//   const options = { attributes: true, childList: false, subtree: false };
+//   return watch(targetUIElement, options, callback);
+// };
+
+export { 
+  ZikoMutationObserver,
+  watch,
  }; 

package/src/reactivity/observer/resize.js

@@ -1,47 +1,47 @@
-class ZikoResizeObserver{
-    constructor(UIElement,callback){
-        this.target=UIElement;
-        this.contentRect=null;
-        this.observer=new ResizeObserver(()=>{
-           callback(this)
-        })
-    }
-    get BoundingRect(){
-        return this.target.element.getBoundingClientRect();
-    }
-    get width(){
-        return this.BoundingRect.width;
-    }
-    get height(){
-        return this.BoundingRect.height;
-    }
-    get top(){
-        return this.BoundingRect.top;
-    }
-    get bottom(){
-        return this.BoundingRect.bottom;
-    }
-    get right(){
-        return this.BoundingRect.right;
-    }
-    get left(){
-        return this.BoundingRect.left;
-    }
-    get x(){
-        return this.BoundingRect.x;
-    }
-    get y(){
-        return this.BoundingRect.y;
-    }
-    start(){
-        this.observer.observe(this.target.element);
-        return this;
-    }
-    stop(){
-        this.observer.unobserve(this.target.element);
-        return this;
-    }
-}
-
-const watchSize=(UI,callback)=>new ZikoResizeObserver(UI,callback)
+class ZikoResizeObserver{
+    constructor(UIElement,callback){
+        this.target=UIElement;
+        this.contentRect=null;
+        this.observer=new ResizeObserver(()=>{
+           callback(this)
+        })
+    }
+    get BoundingRect(){
+        return this.target.element.getBoundingClientRect();
+    }
+    get width(){
+        return this.BoundingRect.width;
+    }
+    get height(){
+        return this.BoundingRect.height;
+    }
+    get top(){
+        return this.BoundingRect.top;
+    }
+    get bottom(){
+        return this.BoundingRect.bottom;
+    }
+    get right(){
+        return this.BoundingRect.right;
+    }
+    get left(){
+        return this.BoundingRect.left;
+    }
+    get x(){
+        return this.BoundingRect.x;
+    }
+    get y(){
+        return this.BoundingRect.y;
+    }
+    start(){
+        this.observer.observe(this.target.element);
+        return this;
+    }
+    stop(){
+        this.observer.unobserve(this.target.element);
+        return this;
+    }
+}
+
+const watchSize=(UI,callback)=>new ZikoResizeObserver(UI,callback)
 export {watchSize}

package/src/reactivity/observer/screen.js

@@ -1,45 +1,45 @@
-import { map } from "../../math/utils/index.js"
-class ZikoScreenObserver {
-    constructor(callback=e=>console.log({x:e.x,y:e.y})) {
-      this.cache={};
-      this.previousX = globalThis?.screenX;
-      this.previousY = globalThis?.screenY;
-    }
-    update(){
-        Object.assign(this.cache,{
-            screenXLeft : globalThis?.screenX, // CORRECT
-            screenXRight : globalThis?.screen.availWidth - globalThis?.screenX, // CORRECT
-            screenYTop : globalThis?.screenY, // CORRECT
-            screenYBottom : globalThis?.screen.availHeight - globalThis?.screenY - globalThis?.outerHeight, // TO TEST
-            screenCenterX : globalThis?.screen.availWidth/2, // CORRECT
-            screenCenterY : globalThis?.screen.availHeight/2,// CORRECT
-            windowCenterX : globalThis?.outerWidth/2+globalThis?.screenX, // CORRECT
-            windowCenterY : globalThis?.outerHeight/2+ globalThis?.screenY, // FALSE
-            deltaCenterX : globalThis?.screen.availWidth/2-globalThis?.outerWidth/2+globalThis?.screenX, // CORRECT
-            deltaCenterY : null //
-        })
-    }
-    get x0(){
-        return map(globalThis?.screenX, 0, globalThis.screen.availWidth, -1, 1);
-    }
-    get y0(){
-        return - map(globalThis?.screenY, 0, globalThis.screen.availHeight, -1, 1);
-    }
-    get x1(){
-        return map(globalThis?.screenX + globalThis?.outerWidth, 0, globalThis.screen.availWidth, -1, 1);
-    }
-    get y1(){
-        return - map(globalThis?.screenY + globalThis?.outerHeight, 0, globalThis.screen.availHeight, -1, 1);
-    }
-    get cx(){
-        return map(globalThis?.outerWidth/2+globalThis?.screenX, 0, globalThis.screen.availWidth, -1, 1);
-    }
-    get cy(){
-        return - map(globalThis?.outerHeight/2+ globalThis?.screenY, 0, globalThis.screen.availHeight, -1, 1);
-    }
-}
-
-const watchScreen=(callback)=>new ZikoScreenObserver(callback);
-export{
-    watchScreen
+import { map } from "../../math/utils/index.js"
+class ZikoScreenObserver {
+    constructor(callback=e=>console.log({x:e.x,y:e.y})) {
+      this.cache={};
+      this.previousX = globalThis?.screenX;
+      this.previousY = globalThis?.screenY;
+    }
+    update(){
+        Object.assign(this.cache,{
+            screenXLeft : globalThis?.screenX, // CORRECT
+            screenXRight : globalThis?.screen.availWidth - globalThis?.screenX, // CORRECT
+            screenYTop : globalThis?.screenY, // CORRECT
+            screenYBottom : globalThis?.screen.availHeight - globalThis?.screenY - globalThis?.outerHeight, // TO TEST
+            screenCenterX : globalThis?.screen.availWidth/2, // CORRECT
+            screenCenterY : globalThis?.screen.availHeight/2,// CORRECT
+            windowCenterX : globalThis?.outerWidth/2+globalThis?.screenX, // CORRECT
+            windowCenterY : globalThis?.outerHeight/2+ globalThis?.screenY, // FALSE
+            deltaCenterX : globalThis?.screen.availWidth/2-globalThis?.outerWidth/2+globalThis?.screenX, // CORRECT
+            deltaCenterY : null //
+        })
+    }
+    get x0(){
+        return map(globalThis?.screenX, 0, globalThis.screen.availWidth, -1, 1);
+    }
+    get y0(){
+        return - map(globalThis?.screenY, 0, globalThis.screen.availHeight, -1, 1);
+    }
+    get x1(){
+        return map(globalThis?.screenX + globalThis?.outerWidth, 0, globalThis.screen.availWidth, -1, 1);
+    }
+    get y1(){
+        return - map(globalThis?.screenY + globalThis?.outerHeight, 0, globalThis.screen.availHeight, -1, 1);
+    }
+    get cx(){
+        return map(globalThis?.outerWidth/2+globalThis?.screenX, 0, globalThis.screen.availWidth, -1, 1);
+    }
+    get cy(){
+        return - map(globalThis?.outerHeight/2+ globalThis?.screenY, 0, globalThis.screen.availHeight, -1, 1);
+    }
+}
+
+const watchScreen=(callback)=>new ZikoScreenObserver(callback);
+export{
+    watchScreen
 }

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

@@ -1,84 +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) 
-})
+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) 
+})
  */