zextra/dist/zextra-svg.mjs

***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)
*/

import { ZikoUIElement, Flex } from 'ziko';

class ZikoSvgElement extends 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=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
};

export { ZikoSvgCircle, ZikoSvgEllipse, ZikoSvgForeignObject, ZikoSvgGroupe, ZikoSvgImage, ZikoSvgLine, ZikoSvgLink, ZikoSvgPath, ZikoSvgRectangle, ZikoSvgText, svgCircle, svgEllipse, svgGrid, svgGroupe, svgImage, svgLine, svgLink, svgObject, svgPath, svgPolygon, svgRect, svgText };