fabric
Version:
Object model for HTML5 canvas, and SVG-to-canvas parser. Backed by jsdom and node-canvas.
3 lines (2 loc) • 4.01 kB
JavaScript
import{defineProperty as t,objectSpread2 as o}from"../../_virtual/_rollupPluginBabelHelpers.min.mjs";import{Color as r}from"../color/Color.min.mjs";import{iMatrix as s}from"../constants.min.mjs";import{parseTransformAttribute as i}from"../parser/parseTransformAttribute.min.mjs";import{uid as e}from"../util/internals/uid.min.mjs";import{pick as n}from"../util/misc/pick.min.mjs";import{matrixToSVG as a}from"../util/misc/svgExport.min.mjs";import{radialDefaultCoords as f,linearDefaultCoords as c}from"./constants.min.mjs";import{parseColorStops as m}from"./parser/parseColorStops.min.mjs";import{parseCoords as p}from"./parser/parseCoords.min.mjs";import{parseGradientUnits as d,parseType as l}from"./parser/misc.min.mjs";import{classRegistry as h}from"../ClassRegistry.min.mjs";import{isPath as g}from"../util/typeAssertions.min.mjs";class y{constructor(t){const{type:r="linear",gradientUnits:s="pixels",coords:i={},colorStops:n=[],offsetX:a=0,offsetY:m=0,gradientTransform:p,id:d}=t||{};Object.assign(this,{type:r,gradientUnits:s,coords:o(o({},"radial"===r?f:c),i),colorStops:n,offsetX:a,offsetY:m,gradientTransform:p,id:d?"".concat(d,"_").concat(e()):e()})}addColorStop(t){for(const o in t){const s=new r(t[o]);this.colorStops.push({offset:parseFloat(o),color:s.toRgb(),opacity:s.getAlpha()})}return this}toObject(t){return o(o({},n(this,t)),{},{type:this.type,coords:o({},this.coords),colorStops:this.colorStops.map((t=>o({},t))),offsetX:this.offsetX,offsetY:this.offsetY,gradientUnits:this.gradientUnits,gradientTransform:this.gradientTransform?[...this.gradientTransform]:void 0})}toSVG(t){let{additionalTransform:r}=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{};const i=[],e=this.gradientTransform?this.gradientTransform.concat():s.concat(),n="pixels"===this.gradientUnits?"userSpaceOnUse":"objectBoundingBox",f=this.colorStops.map((t=>o({},t))).sort(((t,o)=>t.offset-o.offset));let c=-this.offsetX,m=-this.offsetY;"objectBoundingBox"===n?(c/=t.width,m/=t.height):(c+=t.width/2,m+=t.height/2),g(t)&&"percentage"!==this.gradientUnits&&(c-=t.pathOffset.x,m-=t.pathOffset.y),e[4]-=c,e[5]-=m;const p=['id="SVGID_'.concat(this.id,'"'),'gradientUnits="'.concat(n,'"'),'gradientTransform="'.concat(r?r+" ":"").concat(a(e),'"'),""].join(" ");if("linear"===this.type){const{x1:t,y1:o,x2:r,y2:s}=this.coords;i.push("<linearGradient ",p,' x1="',t,'" y1="',o,'" x2="',r,'" y2="',s,'">\n')}else if("radial"===this.type){const{x1:t,y1:o,x2:r,y2:s,r1:e,r2:n}=this.coords,a=e>n;i.push("<radialGradient ",p,' cx="',a?t:r,'" cy="',a?o:s,'" r="',a?e:n,'" fx="',a?r:t,'" fy="',a?s:o,'">\n'),a&&(f.reverse(),f.forEach((t=>{t.offset=1-t.offset})));const c=Math.min(e,n);if(c>0){const t=c/Math.max(e,n);f.forEach((o=>{o.offset+=t*(1-o.offset)}))}}return f.forEach((t=>{let{color:o,offset:r,opacity:s}=t;i.push("<stop ",'offset="',100*r+"%",'" style="stop-color:',o,void 0!==s?";stop-opacity: "+s:";",'"/>\n')})),i.push("linear"===this.type?"</linearGradient>":"</radialGradient>","\n"),i.join("")}toLive(t){const{x1:o,y1:s,x2:i,y2:e,r1:n,r2:a}=this.coords,f="linear"===this.type?t.createLinearGradient(o,s,i,e):t.createRadialGradient(o,s,n,i,e,a);return this.colorStops.forEach((t=>{let{color:o,opacity:s,offset:i}=t;f.addColorStop(i,void 0!==s?new r(o).setAlpha(s).toRgba():o)})),f}static async fromObject(t){const{colorStops:r,gradientTransform:s}=t;return new this(o(o({},t),{},{colorStops:r?r.map((t=>o({},t))):void 0,gradientTransform:s?[...s]:void 0}))}static fromElement(t,r,s){const e=d(t),n=r._findCenterFromElement();return new this(o({id:t.getAttribute("id")||void 0,type:l(t),coords:p(t,{width:s.viewBoxWidth||s.width,height:s.viewBoxHeight||s.height}),colorStops:m(t,s.opacity),gradientUnits:e,gradientTransform:i(t.getAttribute("gradientTransform")||"")},"pixels"===e?{offsetX:r.width/2-n.x,offsetY:r.height/2-n.y}:{offsetX:0,offsetY:0}))}}t(y,"type","Gradient"),h.setClass(y,"gradient"),h.setClass(y,"linear"),h.setClass(y,"radial");export{y as Gradient};
//# sourceMappingURL=Gradient.min.mjs.map