zextra/dist/zextra-svg.js

***Zextra*** stands for "Ziko Extra" is an extension package that enhances [ZikoJS](https://github.com/zakarialaoui10/ziko.js) by providing additional utilities and UI elements. It expands ZikoJS with extra features, making it easier to work with custom U

/*
  Project: zextra
  Author: 
  Date : Sun Feb 09 2025 19:23:03 GMT+0100 (UTC+01:00)
*/

(function (global, factory) {
  typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('ziko')) :
  typeof define === 'function' && define.amd ? define(['exports', 'ziko'], factory) :
  (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global.Zextra = {}, global.Ziko));
})(this, (function (exports, ziko) { 'use strict';

  class ZikoSvgElement extends ziko.ZikoUIElement{
    constructor(type) {
      super();
      Object.assign(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;
    }
  }

  class ZikoSvgCircle extends ZikoSvgElement{
      constructor(cx,cy,r){
        super("circle");
        this.element=document.createElementNS(
          "http://www.w3.org/2000/svg",
          "circle",
        );
        this.pos(cx,cy).setR(r);
      }
      setR(r){
         this.element.r.baseVal.value=r;
         return this;
      }
      get r(){
        return this.element.baseVal.value;
      }
      get cx(){
        return this.element.baseVal.value;
      } 
      get cy(){
        return this.element.baseVal.value;
      }  
    } 
  const svgCircle=(x,y,r)=>new ZikoSvgCircle(x,y,r);

  class ZikoSvgEllipse extends ZikoSvgElement{
      constructor(cx,cy,rx,ry){
        super("ellipse");
        this.element=document?.createElementNS(
          "http://www.w3.org/2000/svg",
          "ellipse",
        );
        this.pos(cx,cy).setRx(rx).setRy(ry);
      }
      setRx(rx){
         this.element.rx.baseVal.value=rx;
         return this;
      } 
      setRy(ry){
         this.element.ry.baseVal.value=ry;
         return this;
      } 
    } 
  const svgEllipse=(x,y,rx,ry)=>new ZikoSvgEllipse(x,y,rx,ry);

  class ZikoSvgForeignObject extends ZikoSvgElement{
      constructor(x=0,y=0,w="100%",h="100%",...ZikoUIElement){
        super("foreignObject");
        this.items=[];
        this.element=document?.createElementNS(
          "http://www.w3.org/2000/svg",
          "foreignObject",
        );
        this.container=ziko.Flex().setTarget(this.element).vertical(0,0).size("auto","auto");
        this.container.st.scaleY(-1);
        this.posX(x).posY(y).width(w).height(h);
      } 
      width(w){
          this.element.etAttribute("width",w);
          return this;
      }
      height(h){
          this.element.etAttribute("height",h);
          return this;
      }
      add(...ZikoUIElement){
        this.container.append(...ZikoUIElement);
        return this;
        }
      remove(...ZikoUIElement){
        this.container.append(...ZikoUIElement);
        return this;   
        }
    } 
  const svgObject=(x, y, w, h)=>new ZikoSvgForeignObject(x, y, w, h);

  class ZikoSvgGroupe extends ZikoSvgElement{
      constructor(...svgElement){
        super();
        this.items=[];
        this.element=document?.createElementNS(
          "http://www.w3.org/2000/svg",
          "g",
        );
        this.add(...svgElement);
      }
      add(...svgElement){
        for(let i=0;i<svgElement.length;i++){
          this.element?.appendChild(svgElement[i].element);
          this.items.push(svgElement[i]);
        }
        if(svgElement.length===1)return svgElement[0]
        return svgElement;
      }
      remove(...svgElement){
        for(let i=0;i<svgElement.length;i++){
          this.element?.removeChild(svgElement[i].element);
          this.items=this.items.filter(n=>n!=svgElement);
        }
        return this;     
      }
  }
  const svgGroupe=(...svgElement)=>new ZikoSvgGroupe(...svgElement);

  class ZikoSvgImage extends ZikoSvgElement{
      constructor(src="",w="100%",h="100%",x=0,y=0){
        super();
        this.element=document?.createElementNS(
          "http://www.w3.org/2000/svg",
          "image",
        );
        this.setSrc(src).width(w).height(h).x(x).y(y);
      }
      x(x){
         this.element.x.baseVal.value=x;
         return this;
      }
      y(y){
         this.element.y.baseVal.value=y;
         return this;
      }
      width(w){
         this.element?.setAttribute("width",w);
         return this;
      }
      height(h){
         this.element?.setAttribute("height",h);
         return this;
      }
      setSrc(src=""){
        this.element?.setAttributeNS('http://www.w3.org/1999/xlink', 'xlink:href', src);
        return this;
      }
    } 
  const svgImage=(src,w,h,x,y)=>new ZikoSvgImage(src,w,h,x,y);

  class ZikoSvgLine extends ZikoSvgElement{
      constructor(x1,y1,x2,y2){
        super();
        this.element=document?.createElementNS(
          "http://www.w3.org/2000/svg",
          "line",
        );
        this.x1(x1).y1(y1).x2(x2).y2(y2).stroke("black");
      }
      x1(x1){
         this.element.x1.baseVal.value=x1;
         return this;
      }
      y1(y1){
         this.element.y1.baseVal.value=y1;
         return this;
      }
      x2(x2){
         this.element.x2.baseVal.value=x2;
         return this;
      } 
      y2(y2){
         this.element.y2.baseVal.value=y2;
         return this;
      } 
    } 
  const svgLine=(x1,y1,x2,y2)=>new ZikoSvgLine(x1,y1,x2,y2);

  class ZikoSvgLink extends ZikoSvgElement{
      constructor(href,...svgElement){
        super();
        this.items=[];
        this.element=document?.createElementNS(
          "http://www.w3.org/2000/svg",
          "a",
        );
        this.element.etAttribute("href",href);
        this.add(...svgElement);
      }
      add(...svgElement){
        for(let i=0;i<svgElement.length;i++){
          this.element.ppendChild(svgElement[i].element);
          this.items.push(svgElement[i]);
        }
        if(svgElement.length===1)return svgElement[0]
        return svgElement;
      }
      remove(...svgElement){
        for(let i=0;i<svgElement.length;i++){
          this.element.moveChild(svgElement[i].element);
          this.items=this.items.filter(n=>n!=svgElement);
        }
        return this;     
      }
  }
  const svgLink=(href,...svgElement)=>new ZikoSvgLink(href,...svgElement);

  class ZikoSvgPath extends ZikoSvgElement{
      constructor(){
      super();
        this.element=document?.createElementNS(
          "http://www.w3.org/2000/svg",
          "path",
        );
        this.path="";
        
      }
      setPath(){
          this.element.etAttribute("d",this.path);
          return this;
      }
      clear(){
          this.path="";
          this.setPath();
          return this;
      }
      moveTo(x,y){
          this.path+=`M${x} ${y} `;
          this.setPath();
          return this;
      }
      lineTo(x,y){
          this.path+=`L${x} ${y} `;
          this.setPath();
          return this;
      }
      hr(x){
          this.path+=`H${x} `;
          this.setPath();
          return this;
      }
      vr(y){
          this.path+=`V${y} `;
          this.setPath();
          return this;
      }
      bezier(x1,y1,x2,y2,x,y){
          this.path+=`C ${x1} ${y1},${x2} ${y2},${x} ${y} `;
          this.setPath();
          return this;      
      }
      quadratic(x1,y1,x,y){
          this.path+=`Q ${x1} ${y1} ${x} ${y} `;
          this.setPath();
          return this;      
      }
      close(){
          this.path+="Z";
          this.setPath();
          return this;
      }
  }

  const svgPath=()=>new ZikoSvgPath();

  class ZikoSvgPolygon extends ZikoSvgElement{
      constructor(X=[],Y=[]){
        super();
        this.X=X;
        this.Y=Y;
        this.element=document?.createElementNS(
          "http://www.w3.org/2000/svg",
          "polygon",
        );
        this.element?.setAttribute("points","");
        this.addPoints(X,Y);
      }
      addPoint(x,y){
        let p=this.element.parentElement.createSVGPoint();
        p.x=x;
        p.y=y;
        this.element.points.appendItem(p);
        return this;
      }
      addPoints(X,Y){
        for(let i=0;i<X.length;i++){
          let p=this.element.parentElement.createSVGPoint();
          p.x=X[i];
          p.y=Y[i];
          this.element.oints.appendItem(p);
        }
        return this;
      }
    } 
  const svgPolygon=(X,Y)=>new ZikoSvgPolygon(X,Y);

  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);

  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);

  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
  };

  exports.ZikoSvgCircle = ZikoSvgCircle;
  exports.ZikoSvgEllipse = ZikoSvgEllipse;
  exports.ZikoSvgForeignObject = ZikoSvgForeignObject;
  exports.ZikoSvgGroupe = ZikoSvgGroupe;
  exports.ZikoSvgImage = ZikoSvgImage;
  exports.ZikoSvgLine = ZikoSvgLine;
  exports.ZikoSvgLink = ZikoSvgLink;
  exports.ZikoSvgPath = ZikoSvgPath;
  exports.ZikoSvgRectangle = ZikoSvgRectangle;
  exports.ZikoSvgText = ZikoSvgText;
  exports.svgCircle = svgCircle;
  exports.svgEllipse = svgEllipse;
  exports.svgGrid = svgGrid;
  exports.svgGroupe = svgGroupe;
  exports.svgImage = svgImage;
  exports.svgLine = svgLine;
  exports.svgLink = svgLink;
  exports.svgObject = svgObject;
  exports.svgPath = svgPath;
  exports.svgPolygon = svgPolygon;
  exports.svgRect = svgRect;
  exports.svgText = svgText;

}));