ziko 0.0.13 → 0.0.15

package/src/graphics/svg/Elements/Basic/rect.js

@@ -1,43 +1,43 @@
-
-import ZikoSvgELement from "../ZikoSvgElement.js";
-class ZikoSvgRectangle extends ZikoSvgELement{
-    constructor(x,y,w,h,center=true){
-      super()
-      this.element=document?.createElementNS(
-        "http://www.w3.org/2000/svg",
-        "rect",
-      );
-      this.setX(x).setY(y).width(w).height(h);
-      this.rx=this.x+this.w/2;
-      this.ty=this.y+this.h/2;
-    }
-    setX(x){
-       this.element.x.baseVal.value=x;
-       this.x=x;
-       return this;
-    }
-    setY(y){
-       this.element.y.baseVal.value=y;
-       this.y=y;
-       return this;
-    }
-    r(rx,ry){
-      this.rx=rx;
-      this.ry=ry;
-      this.setX(this.rx-this.w/2);
-      this.setY(this.ry-this.h/2);
-      return this;
-    } 
-    width(w){
-       this.element.width.baseVal.value=w;
-       this.w=w;
-       return this;
-    } 
-    height(h){
-       this.element.height.baseVal.value=h;
-       this.h=h;
-       return this;
-    } 
-  } 
-  const svgRect=(x,y,w,h,center)=>new ZikoSvgRectangle(x,y,w,h,center);
+
+import ZikoSvgELement from "../ZikoSvgElement.js";
+class ZikoSvgRectangle extends ZikoSvgELement{
+    constructor(x,y,w,h,center=true){
+      super()
+      this.element=document?.createElementNS(
+        "http://www.w3.org/2000/svg",
+        "rect",
+      );
+      this.setX(x).setY(y).width(w).height(h);
+      this.rx=this.x+this.w/2;
+      this.ty=this.y+this.h/2;
+    }
+    setX(x){
+       this.element.x.baseVal.value=x;
+       this.x=x;
+       return this;
+    }
+    setY(y){
+       this.element.y.baseVal.value=y;
+       this.y=y;
+       return this;
+    }
+    r(rx,ry){
+      this.rx=rx;
+      this.ry=ry;
+      this.setX(this.rx-this.w/2);
+      this.setY(this.ry-this.h/2);
+      return this;
+    } 
+    width(w){
+       this.element.width.baseVal.value=w;
+       this.w=w;
+       return this;
+    } 
+    height(h){
+       this.element.height.baseVal.value=h;
+       this.h=h;
+       return this;
+    } 
+  } 
+  const svgRect=(x,y,w,h,center)=>new ZikoSvgRectangle(x,y,w,h,center);
   export{ svgRect }

package/src/graphics/svg/Elements/Basic/text.js

@@ -1,26 +1,26 @@
-import ZikoSvgElement from "../ZikoSvgElement.js";
-class ZikoSvgText extends ZikoSvgElement{
-    constructor(text,x,y){
-      super()
-      this.element=document?.createElementNS(
-        "http://www.w3.org/2000/svg",
-        "text",
-      );
-      this.setText(text)
-      this.x(x).y(y);
-    }
-    x(x){
-       this.element?.setAttribute("x",x);
-       return this;
-    }
-    y(y){
-       this.element?.setAttribute("y",y);
-       return this;
-    }
-    setText(text=""){
-      this.element.textContent=text;
-      return this;
-    }
-  } 
-const svgText=(text,x,y)=>new ZikoSvgText(text,x,y);
+import ZikoSvgElement from "../ZikoSvgElement.js";
+class ZikoSvgText extends ZikoSvgElement{
+    constructor(text,x,y){
+      super()
+      this.element=document?.createElementNS(
+        "http://www.w3.org/2000/svg",
+        "text",
+      );
+      this.setText(text)
+      this.x(x).y(y);
+    }
+    x(x){
+       this.element?.setAttribute("x",x);
+       return this;
+    }
+    y(y){
+       this.element?.setAttribute("y",y);
+       return this;
+    }
+    setText(text=""){
+      this.element.textContent=text;
+      return this;
+    }
+  } 
+const svgText=(text,x,y)=>new ZikoSvgText(text,x,y);
 export{ svgText }

package/src/graphics/svg/Elements/Derived/grid.js

@@ -1,9 +1,9 @@
-import { svgPath } from "../Basic/path"
-const svgGrid=(w,h,r=10,c=10)=>{
-    let path=svgPath().fill("none").stroke("coral").strokeWidth(0.6)
-    console.log({x:w/r,y:h/c})
-    for(let i=0;i<w;i++) path.moveTo(0,i*w/r).hr(w)
-    for(let j=0;j<h;j++) path.moveTo(j*h/c,0).vr(h)
-    return path
-}
+import { svgPath } from "../Basic/path"
+const svgGrid=(w,h,r=10,c=10)=>{
+    let path=svgPath().fill("none").stroke("coral").strokeWidth(0.6)
+    console.log({x:w/r,y:h/c})
+    for(let i=0;i<w;i++) path.moveTo(0,i*w/r).hr(w)
+    for(let j=0;j<h;j++) path.moveTo(j*h/c,0).vr(h)
+    return path
+}
 export{ svgGrid };

package/src/graphics/svg/Elements/ZikoSvgElement.js

@@ -1,46 +1,46 @@
-class ZikoSvgElement {
-  constructor(type) {
-    this.cache = {
-      type
-    };
-  }
-  pos(x,y){
-    return this.posX(x).posY(y);
-  }
-  posX(x){
-    if(["circle","ellipse"].includes(this.cache.type))this.element.cx.baseVal.value=x;
-    else this.element.x.baseVal.value=x;
-    return this;
-  }
-  posY(y){
-    if(["circle","ellipse"].includes(this.cache.type))this.element.cy.baseVal.value=y;
-    else this.element.y.baseVal.value=y;
-    return this;
-  }
-  translate(x,y){
-    return this;
-  }
-  color({ stroke, fill }) {
-    this.element?.setAttribute("stroke", stroke);
-    this.element?.setAttribute("fill", fill);
-    return this;
-  }
-  fill(color = "none") {
-    this.element?.setAttribute("fill", color);
-    return this;
-  }
-  stroke(color = "none", width) {
-    this.element?.setAttribute("stroke", color);
-    width && this.strokeWidth(width);
-    return this;
-  }
-  strokeWidth(width = 1) {
-    this.element?.setAttribute("stroke-width", width);
-    return this;
-  }
-  opacity(value = 1) {
-    this.element?.setAttribute("opacity", value);
-    return this;
-  }
-}
-export default ZikoSvgElement;
+class ZikoSvgElement {
+  constructor(type) {
+    this.cache = {
+      type
+    };
+  }
+  pos(x,y){
+    return this.posX(x).posY(y);
+  }
+  posX(x){
+    if(["circle","ellipse"].includes(this.cache.type))this.element.cx.baseVal.value=x;
+    else this.element.x.baseVal.value=x;
+    return this;
+  }
+  posY(y){
+    if(["circle","ellipse"].includes(this.cache.type))this.element.cy.baseVal.value=y;
+    else this.element.y.baseVal.value=y;
+    return this;
+  }
+  translate(x,y){
+    return this;
+  }
+  color({ stroke, fill }) {
+    this.element?.setAttribute("stroke", stroke);
+    this.element?.setAttribute("fill", fill);
+    return this;
+  }
+  fill(color = "none") {
+    this.element?.setAttribute("fill", color);
+    return this;
+  }
+  stroke(color = "none", width) {
+    this.element?.setAttribute("stroke", color);
+    width && this.strokeWidth(width);
+    return this;
+  }
+  strokeWidth(width = 1) {
+    this.element?.setAttribute("stroke-width", width);
+    return this;
+  }
+  opacity(value = 1) {
+    this.element?.setAttribute("opacity", value);
+    return this;
+  }
+}
+export default ZikoSvgElement;

package/src/graphics/svg/Elements/index.js

@@ -1,14 +1,14 @@
-export { svgRect } from "./Basic/rect.js";
-export { svgCircle } from "./Basic/circle.js";
-export { svgEllipse } from "./Basic/ellipse.js";
-export { svgLine } from "./Basic/line.js";
-export { svgPolyLine } from "./Basic/polyline.js";
-export { svgPath } from "./Basic/path.js";
-export { svgPolygon } from "./Basic/polygon.js";
-export { svgText } from "./Basic/text.js";
-export { svgImage } from "./Basic/image.js";
-export { svgObject } from "./Basic/foreignObject.js";
-export { svgGroupe } from "./Basic/groupe.js";
-export { svgLink } from "./Basic/link.js";
-
-export { svgGrid } from "./Derived/grid.js";
+export { svgRect } from "./Basic/rect.js";
+export { svgCircle } from "./Basic/circle.js";
+export { svgEllipse } from "./Basic/ellipse.js";
+export { svgLine } from "./Basic/line.js";
+export { svgPolyLine } from "./Basic/polyline.js";
+export { svgPath } from "./Basic/path.js";
+export { svgPolygon } from "./Basic/polygon.js";
+export { svgText } from "./Basic/text.js";
+export { svgImage } from "./Basic/image.js";
+export { svgObject } from "./Basic/foreignObject.js";
+export { svgGroupe } from "./Basic/groupe.js";
+export { svgLink } from "./Basic/link.js";
+
+export { svgGrid } from "./Derived/grid.js";

package/src/graphics/svg/index.js

@@ -1,2 +1,2 @@
-export * from "./svg.js"
+export * from "./svg.js"
 export * from "./Elements/index.js"

package/src/graphics/svg/svg.js

@@ -1,115 +1,115 @@
-import ZikoUIElement from "../../user-interface/elements/primitives/ZikoUIElement.js";
-// import svgRect from "./Elements/rect.js";
-// import svgCircle from "./Elements/circle.js";
-// import svgEllipse from "./Elements/ellipse.js";
-// import svgLine from "./Elements/line.js";
-// //import svgPath from "./Elements/path.js";
-// import svgPolygon from "./Elements/polygon.js";
-// import svgImage from "./Elements/image.js";
-// import svgText from "./Elements/text.js";
-// import svgGroupe from "./Elements/groupe.js";
-// import svgLink from "./Elements/link.js";
-// //import svgObject from "./Elements/foreignObject.js";
-// //import svgGrid from "./Elements/grid.js";
-
-  class ZikoUISvg extends ZikoUIElement {
-    constructor(w=360,h=300) {
-      super("svg","svg");
-      //this.cache={};
-      this.setAttr("width",w);
-      this.setAttr("height",h);
-      this.style({border:"1px black solid"});
-      //this.view(-w/2,-h/2,w/2,h/2)
-      this.view(-10,-10,10,10);
-    }
-    view(x1,y1,x2,y2){
-      let width=Math.abs(x2-x1);
-      let height=Math.abs(y2-y1);
-      this.setAttr("viewBox",[x1,y1,width,height].join(" "));
-      this.st.scaleY(-1);
-      return this;
-    }
-    add(...svgElement){
-      for(let i=0;i<svgElement.length;i++){
-        this.element?.appendChildddddddd(svgElement[i].element);
-        this.items.push(svgElement[i])
-      }
-      this.maintain()
-      return this;
-    }
-    remove(...svgElement){
-      for(let i=0;i<svgElement.length;i++){
-        this.element?.removeChild(svgElement[i].element);
-        this.items=this.items.filter(n=>!svgElement)
-      }
-      this.maintain();
-      return this;     
-    }
-    // text(text,x,y){
-    //   let item=svgText(text,x,y);
-    //   this.element?.appendChildd(item.element);
-    //   item.x(x-item.element.getComputedTextLength()/2);
-    //   return item;
-    // }
-    // rect(x,y,w,h){
-    //   let item=svgRect(x,y,w,h);
-    //   this.add(item);
-    //   return item;
-    // }
-    // line(x1,y1,x2,y2){
-    //   let item=svgLine(x1,y1,x2,y2);
-    //   this.element?.appendChildd(item.element);
-    //   return item;
-    // }
-    // circle(cx,cy,r){
-    //   let item=svgCircle(cx,cy,r);
-    //   this.element?.appendChildd(item.element);
-    //   return item;
-    // }
-    // ellipse(cx,cy,rx,ry){
-    //   let item=svgEllipse(cx,cy,rx,ry);
-    //   this.element?.appendChildd(item.element);
-    //   return item;
-    // }
-    // polygon(X,Y){
-    //   let item=svgPolygon(X,Y);
-    //   this.element?.appendChildd(item.element);
-    //   item.addPoints(X,Y)
-    //   return item;
-    // }
-    // image(src,w,h,x,y){
-    //   let item=svgImage(src,w,h,x,y);
-    //   this.element?.appendddChild(item.element);
-    //   return item;
-    // }
-    mask(){
-  
-    }
-    toString(){
-      return  (new XMLSerializer()).serializeToString(this.element);
-    }
-    btoa(){
-      return btoa(this.toString())
-    }
-    toImg(){
-      return 'data:image/svg+xml;base64,'+this.btoa()
-    }
-    toImg2(){
-      return "data:image/svg+xml;charset=utf8,"+this.toString().replaceAll("<","%3C").replaceAll(">","%3E").replaceAll("#","%23").replaceAll('"',"'");
-    }
-  }
-
-  const Svg =(w,h)=>new ZikoUISvg(w,h);
-  export{
-    Svg,
-    ZikoUISvg,
-    // svgLink,
-    // svgCircle,
-    // svgEllipse,
-    // svgImage,
-    // svgLine,
-    // svgPolygon,
-    // svgRect,
-    // svgText,
-    // svgGroupe
+import ZikoUIElement from "../../UI/elements/primitives/ZikoUIElement.js";
+// import svgRect from "./Elements/rect.js";
+// import svgCircle from "./Elements/circle.js";
+// import svgEllipse from "./Elements/ellipse.js";
+// import svgLine from "./Elements/line.js";
+// //import svgPath from "./Elements/path.js";
+// import svgPolygon from "./Elements/polygon.js";
+// import svgImage from "./Elements/image.js";
+// import svgText from "./Elements/text.js";
+// import svgGroupe from "./Elements/groupe.js";
+// import svgLink from "./Elements/link.js";
+// //import svgObject from "./Elements/foreignObject.js";
+// //import svgGrid from "./Elements/grid.js";
+
+  class ZikoUISvg extends ZikoUIElement {
+    constructor(w=360,h=300) {
+      super("svg","svg");
+      //this.cache={};
+      this.setAttr("width",w);
+      this.setAttr("height",h);
+      this.style({border:"1px black solid"});
+      //this.view(-w/2,-h/2,w/2,h/2)
+      this.view(-10,-10,10,10);
+    }
+    view(x1,y1,x2,y2){
+      let width=Math.abs(x2-x1);
+      let height=Math.abs(y2-y1);
+      this.setAttr("viewBox",[x1,y1,width,height].join(" "));
+      this.st.scaleY(-1);
+      return this;
+    }
+    add(...svgElement){
+      for(let i=0;i<svgElement.length;i++){
+        this.element?.appendChildddddddd(svgElement[i].element);
+        this.items.push(svgElement[i])
+      }
+      this.maintain()
+      return this;
+    }
+    remove(...svgElement){
+      for(let i=0;i<svgElement.length;i++){
+        this.element?.removeChild(svgElement[i].element);
+        this.items=this.items.filter(n=>!svgElement)
+      }
+      this.maintain();
+      return this;     
+    }
+    // text(text,x,y){
+    //   let item=svgText(text,x,y);
+    //   this.element?.appendChildd(item.element);
+    //   item.x(x-item.element.getComputedTextLength()/2);
+    //   return item;
+    // }
+    // rect(x,y,w,h){
+    //   let item=svgRect(x,y,w,h);
+    //   this.add(item);
+    //   return item;
+    // }
+    // line(x1,y1,x2,y2){
+    //   let item=svgLine(x1,y1,x2,y2);
+    //   this.element?.appendChildd(item.element);
+    //   return item;
+    // }
+    // circle(cx,cy,r){
+    //   let item=svgCircle(cx,cy,r);
+    //   this.element?.appendChildd(item.element);
+    //   return item;
+    // }
+    // ellipse(cx,cy,rx,ry){
+    //   let item=svgEllipse(cx,cy,rx,ry);
+    //   this.element?.appendChildd(item.element);
+    //   return item;
+    // }
+    // polygon(X,Y){
+    //   let item=svgPolygon(X,Y);
+    //   this.element?.appendChildd(item.element);
+    //   item.addPoints(X,Y)
+    //   return item;
+    // }
+    // image(src,w,h,x,y){
+    //   let item=svgImage(src,w,h,x,y);
+    //   this.element?.appendddChild(item.element);
+    //   return item;
+    // }
+    mask(){
+  
+    }
+    toString(){
+      return  (new XMLSerializer()).serializeToString(this.element);
+    }
+    btoa(){
+      return btoa(this.toString())
+    }
+    toImg(){
+      return 'data:image/svg+xml;base64,'+this.btoa()
+    }
+    toImg2(){
+      return "data:image/svg+xml;charset=utf8,"+this.toString().replaceAll("<","%3C").replaceAll(">","%3E").replaceAll("#","%23").replaceAll('"',"'");
+    }
+  }
+
+  const Svg =(w,h)=>new ZikoUISvg(w,h);
+  export{
+    Svg,
+    ZikoUISvg,
+    // svgLink,
+    // svgCircle,
+    // svgEllipse,
+    // svgImage,
+    // svgLine,
+    // svgPolygon,
+    // svgRect,
+    // svgText,
+    // svgGroupe
 }