UNPKG

g2o-gradient

Version:

g2o LinearGradient and RadialGradient

3 lines (2 loc) 4.9 kB
import{ElementBase as t,variable as s,vector_from_like as e,G20 as i}from"g2o";import{state as r,effect as o}from"g2o-reactive";let n=0;const h="g2o-gradient-",a=function(){return n++};class p extends t{#t=r(0);#s=r(1);#e=r("#fff");#i=s(this);change$=this.#i.asObservable();constructor(t,s,e){super(h+a()),this.offset="number"==typeof t?t:p.Index<=0?0:1,this.opacity="number"==typeof e?e:1,this.color="string"==typeof s?s:p.Index<=0?"#fff":"#000",p.Index=(p.Index+1)%2}static Index=0;get color(){return this.#e.get()}set color(t){this.#e.set(t),this.parent&&this.parent instanceof c&&(this.parent._flagStops=!0),this.#i.set(this)}get offset(){return this.#t.get()}set offset(t){this.#t.set(t),this.parent&&this.parent instanceof c&&(this.parent._flagStops=!0),this.#i.set(this)}get opacity(){return this.#s.get()}set opacity(t){this.#s.set(t),this.parent&&this.parent instanceof c&&(this.parent._flagStops=!0),this.#i.set(this)}}class c extends t{#r=0;_flagStops=!1;#o=r("pad");#n=r("userSpaceOnUse");#h=r([]);_change=s(this);change$=this._change.asObservable();constructor(t=[],s={}){var e;super("string"==typeof(e=s).id?e.id:`${h}${a()}`),"string"==typeof s.spreadMethod&&(this.spreadMethod=s.spreadMethod),"string"==typeof s.units&&(this.units=s.units),this.#h=r(function(t){const s=[],e=t.length;for(let i=0;i<e;i++){const e=t[i];if(e instanceof p)s.push(e);else{if(!Array.isArray(e))throw new Error;s.push(new p(e[0],e[1],e[2]))}}return s}(t))}dispose(){super.dispose()}serialize(){return`url(#${this.id})`}render(t,s){this.zzz.disposables.push(o((()=>{for(;t.getLastChild(this.zzz.viewee);)t.removeChild(this.zzz.viewee,t.getLastChild(this.zzz.viewee));const s=this.stops,e=s.length;for(let i=0;i<e;i++){const e=s[i];{const s={id:e.id},i=t.createSVGElement("stop",s);e.zzz.viewee=i,t.appendChild(this.zzz.viewee,i),e.zzz.disposables.push(o((()=>{t.setAttribute(i,"offset",100*e.offset+"%")}))),e.zzz.disposables.push(o((()=>{t.setAttribute(i,"stop-color",e.color)}))),e.zzz.disposables.push(o((()=>{t.setAttribute(i,"stop-opacity",`${e.opacity}`)})))}}})))}incrementUse(t,s){this.#r++,1===this.#r&&this.render(t,s)}decrementUse(t,s){this.#r--,0===this.#r&&(t.removeChild(s,t.downcast(this.zzz.viewee)),this.zzz.viewee=null)}update(){return this._flagStops&&this._change.set(this),this}flagReset(t=!1){return this._flagStops=t,this}get spreadMethod(){return this.#o.get()}set spreadMethod(t){this.#o.set(t)}get stops(){return this.#h.get()}set stops(t){this.#h.set(t)}get units(){return this.#n.get()}set units(t){this.#n.set(t)}}class u extends c{#a;#p;constructor(t,s,i,r={}){super(i,r),this.#a=e(t),this.#p=e(s)}render(t,s){if(this.zzz.viewee);else{const e={};e.id=this.id;const i=t.createSVGElement("linearGradient",e);this.zzz.viewee=i,null===t.getParentNode(i)&&t.appendChild(s,i),this.zzz.disposables.push(o((()=>{const s={};s.x1=`${this.point1.x}`,s.y1=`${this.point1.y}`,t.setAttributes(i,s)}))),this.zzz.disposables.push(o((()=>{const s={};s.x2=`${this.point2.x}`,s.y2=`${this.point2.y}`,t.setAttributes(i,s)}))),this.zzz.disposables.push(o((()=>{const s={};s.gradientUnits=this.units,t.setAttributes(i,s)}))),this.zzz.disposables.push(o((()=>{const s={};s.spreadMethod=this.spreadMethod,t.setAttributes(i,s)}))),super.render(t,s)}return this.flagReset()}update(){return this._flagStops&&this._change.set(this),this}flagReset(t=!1){return super.flagReset(t),this}get point1(){return this.#a}set point1(t){t instanceof i&&this.#a.copyVector(t)}get point2(){return this.#p}set point2(t){t instanceof i&&this.#p.copyVector(t)}}class d extends c{#c;#u=r(1);#d;constructor(t,s=[],i={}){super(s,i),this.#c=e(t),"number"==typeof i.radius&&this.#u.set(i.radius),this.#d=this.center.clone(),"number"==typeof i.fx&&(this.focal.x=i.fx),"number"==typeof i.fy&&(this.focal.y=i.fy)}render(t,s){if(this.zzz.viewee);else{const e={};e.id=this.id;const i=t.createSVGElement("radialGradient",e);this.zzz.viewee=i,t.appendChild(s,i),super.render(t,s),this.zzz.disposables.push(o((()=>{const s={};s.cx=`${this.center.x}`,s.cy=`${this.center.y}`,t.setAttributes(i,s)}))),this.zzz.disposables.push(o((()=>{const s={};s.fx=`${this.focal.x}`,s.fy=`${this.focal.y}`,t.setAttributes(i,s)}))),this.zzz.disposables.push(o((()=>{const s={};s.gradientUnits=this.units,t.setAttributes(i,s)}))),this.zzz.disposables.push(o((()=>{const s={};s.r=`${this.radius}`,t.setAttributes(i,s)}))),this.zzz.disposables.push(o((()=>{const s={};s.spreadMethod=this.spreadMethod,t.setAttributes(i,s)})))}return this.flagReset()}update(){return this._flagStops&&this._change.set(this),this}flagReset(t=!1){return super.flagReset(t),this}get center(){return this.#c}set center(t){this.#c.copyVector(t)}get focal(){return this.#d}set focal(t){this.#d.copyVector(t)}get radius(){return this.#u.get()}set radius(t){this.#u.set(t)}}export{c as Gradient,u as LinearGradient,d as RadialGradient,p as Stop}; //# sourceMappingURL=index.min.js.map