zextra/dist/zextra-svg.min.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(t,e){"object"==typeof exports&&"undefined"!=typeof module?e(exports,require("ziko")):"function"==typeof define&&define.amd?define(["exports","ziko"],e):e((t="undefined"!=typeof globalThis?globalThis:t||self).Zextra={},t.Ziko)}(this,(function(t,e){"use strict";class s extends e.ZikoUIElement{constructor(t){super(),Object.assign(this.cache,{type:t})}pos(t,e){return this.posX(t).posY(e)}posX(t){return["circle","ellipse"].includes(this.cache.type)?this.element.cx.baseVal.value=t:this.element.x.baseVal.value=t,this}posY(t){return["circle","ellipse"].includes(this.cache.type)?this.element.cy.baseVal.value=t:this.element.y.baseVal.value=t,this}translate(t,e){return this}color({stroke:t,fill:e}){return this.element?.setAttribute("stroke",t),this.element?.setAttribute("fill",e),this}fill(t="none"){return this.element?.setAttribute("fill",t),this}stroke(t="none",e){return this.element?.setAttribute("stroke",t),e&&this.strokeWidth(e),this}strokeWidth(t=1){return this.element?.setAttribute("stroke-width",t),this}opacity(t=1){return this.element?.setAttribute("opacity",t),this}}class i extends s{constructor(t,e,s){super("circle"),this.element=document.createElementNS("http://www.w3.org/2000/svg","circle"),this.pos(t,e).setR(s)}setR(t){return this.element.r.baseVal.value=t,this}get r(){return this.element.baseVal.value}get cx(){return this.element.baseVal.value}get cy(){return this.element.baseVal.value}}class h extends s{constructor(t,e,s,i){super("ellipse"),this.element=document?.createElementNS("http://www.w3.org/2000/svg","ellipse"),this.pos(t,e).setRx(s).setRy(i)}setRx(t){return this.element.rx.baseVal.value=t,this}setRy(t){return this.element.ry.baseVal.value=t,this}}class r extends s{constructor(t=0,s=0,i="100%",h="100%",...r){super("foreignObject"),this.items=[],this.element=document?.createElementNS("http://www.w3.org/2000/svg","foreignObject"),this.container=e.Flex().setTarget(this.element).vertical(0,0).size("auto","auto"),this.container.st.scaleY(-1),this.posX(t).posY(s).width(i).height(h)}width(t){return this.element.etAttribute("width",t),this}height(t){return this.element.etAttribute("height",t),this}add(...t){return this.container.append(...t),this}remove(...t){return this.container.append(...t),this}}class n extends s{constructor(...t){super(),this.items=[],this.element=document?.createElementNS("http://www.w3.org/2000/svg","g"),this.add(...t)}add(...t){for(let e=0;e<t.length;e++)this.element?.appendChild(t[e].element),this.items.push(t[e]);return 1===t.length?t[0]:t}remove(...t){for(let e=0;e<t.length;e++)this.element?.removeChild(t[e].element),this.items=this.items.filter((e=>e!=t));return this}}class l extends s{constructor(t="",e="100%",s="100%",i=0,h=0){super(),this.element=document?.createElementNS("http://www.w3.org/2000/svg","image"),this.setSrc(t).width(e).height(s).x(i).y(h)}x(t){return this.element.x.baseVal.value=t,this}y(t){return this.element.y.baseVal.value=t,this}width(t){return this.element?.setAttribute("width",t),this}height(t){return this.element?.setAttribute("height",t),this}setSrc(t=""){return this.element?.setAttributeNS("http://www.w3.org/1999/xlink","xlink:href",t),this}}class a extends s{constructor(t,e,s,i){super(),this.element=document?.createElementNS("http://www.w3.org/2000/svg","line"),this.x1(t).y1(e).x2(s).y2(i).stroke("black")}x1(t){return this.element.x1.baseVal.value=t,this}y1(t){return this.element.y1.baseVal.value=t,this}x2(t){return this.element.x2.baseVal.value=t,this}y2(t){return this.element.y2.baseVal.value=t,this}}class o extends s{constructor(t,...e){super(),this.items=[],this.element=document?.createElementNS("http://www.w3.org/2000/svg","a"),this.element.etAttribute("href",t),this.add(...e)}add(...t){for(let e=0;e<t.length;e++)this.element.ppendChild(t[e].element),this.items.push(t[e]);return 1===t.length?t[0]:t}remove(...t){for(let e=0;e<t.length;e++)this.element.moveChild(t[e].element),this.items=this.items.filter((e=>e!=t));return this}}class u extends s{constructor(){super(),this.element=document?.createElementNS("http://www.w3.org/2000/svg","path"),this.path=""}setPath(){return this.element.etAttribute("d",this.path),this}clear(){return this.path="",this.setPath(),this}moveTo(t,e){return this.path+=`M${t} ${e} `,this.setPath(),this}lineTo(t,e){return this.path+=`L${t} ${e} `,this.setPath(),this}hr(t){return this.path+=`H${t} `,this.setPath(),this}vr(t){return this.path+=`V${t} `,this.setPath(),this}bezier(t,e,s,i,h,r){return this.path+=`C ${t} ${e},${s} ${i},${h} ${r} `,this.setPath(),this}quadratic(t,e,s,i){return this.path+=`Q ${t} ${e} ${s} ${i} `,this.setPath(),this}close(){return this.path+="Z",this.setPath(),this}}const c=()=>new u;class m extends s{constructor(t=[],e=[]){super(),this.X=t,this.Y=e,this.element=document?.createElementNS("http://www.w3.org/2000/svg","polygon"),this.element?.setAttribute("points",""),this.addPoints(t,e)}addPoint(t,e){let s=this.element.parentElement.createSVGPoint();return s.x=t,s.y=e,this.element.points.appendItem(s),this}addPoints(t,e){for(let s=0;s<t.length;s++){let i=this.element.parentElement.createSVGPoint();i.x=t[s],i.y=e[s],this.element.oints.appendItem(i)}return this}}class p extends s{constructor(t,e,s,i,h=!0){super(),this.element=document?.createElementNS("http://www.w3.org/2000/svg","rect"),this.setX(t).setY(e).width(s).height(i),this.rx=this.x+this.w/2,this.ty=this.y+this.h/2}setX(t){return this.element.x.baseVal.value=t,this.x=t,this}setY(t){return this.element.y.baseVal.value=t,this.y=t,this}r(t,e){return this.rx=t,this.ry=e,this.setX(this.rx-this.w/2),this.setY(this.ry-this.h/2),this}width(t){return this.element.width.baseVal.value=t,this.w=t,this}height(t){return this.element.height.baseVal.value=t,this.h=t,this}}class g extends s{constructor(t,e,s){super(),this.element=document?.createElementNS("http://www.w3.org/2000/svg","text"),this.setText(t),this.x(e).y(s)}x(t){return this.element?.setAttribute("x",t),this}y(t){return this.element?.setAttribute("y",t),this}setText(t=""){return this.element.textContent=t,this}}t.ZikoSvgCircle=i,t.ZikoSvgEllipse=h,t.ZikoSvgForeignObject=r,t.ZikoSvgGroupe=n,t.ZikoSvgImage=l,t.ZikoSvgLine=a,t.ZikoSvgLink=o,t.ZikoSvgPath=u,t.ZikoSvgRectangle=p,t.ZikoSvgText=g,t.svgCircle=(t,e,s)=>new i(t,e,s),t.svgEllipse=(t,e,s,i)=>new h(t,e,s,i),t.svgGrid=(t,e,s=10,i=10)=>{let h=c().fill("none").stroke("coral").strokeWidth(.6);console.log({x:t/s,y:e/i});for(let e=0;e<t;e++)h.moveTo(0,e*t/s).hr(t);for(let t=0;t<e;t++)h.moveTo(t*e/i,0).vr(e);return h},t.svgGroupe=(...t)=>new n(...t),t.svgImage=(t,e,s,i,h)=>new l(t,e,s,i,h),t.svgLine=(t,e,s,i)=>new a(t,e,s,i),t.svgLink=(t,...e)=>new o(t,...e),t.svgObject=(t,e,s,i)=>new r(t,e,s,i),t.svgPath=c,t.svgPolygon=(t,e)=>new m(t,e),t.svgRect=(t,e,s,i,h)=>new p(t,e,s,i,h),t.svgText=(t,e,s)=>new g(t,e,s)}));