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 s}from"../color/Color.min.mjs";import{iMatrix as r}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/svgParsing.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:s="linear",gradientUnits:r="pixels",coords:i={},colorStops:n=[],offsetX:a=0,offsetY:m=0,gradientTransform:p,id:d}=t||{};Object.assign(this,{type:s,gradientUnits:r,coords:o(o({},"radial"===s?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 r=new s(t[o]);this.colorStops.push({offset:parseFloat(o),color:r.toRgb(),opacity:r.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:s}=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{};const i=[],e=this.gradientTransform?this.gradientTransform.concat():r.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(s?s+" ":"").concat(a(e),'"'),""].join(" ");if("linear"===this.type){const{x1:t,y1:o,x2:s,y2:r}=this.coords;i.push("<linearGradient ",p,' x1="',t,'" y1="',o,'" x2="',s,'" y2="',r,'">\n')}else if("radial"===this.type){const{x1:t,y1:o,x2:s,y2:r,r1:e,r2:n}=this.coords,a=e>n;i.push("<radialGradient ",p,' cx="',a?t:s,'" cy="',a?o:r,'" r="',a?e:n,'" fx="',a?s:t,'" fy="',a?r: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:s,opacity:r}=t;i.push("<stop ",'offset="',100*s+"%",'" style="stop-color:',o,void 0!==r?";stop-opacity: "+r:";",'"/>\n')})),i.push("linear"===this.type?"</linearGradient>":"</radialGradient>","\n"),i.join("")}toLive(t){const{x1:o,y1:r,x2:i,y2:e,r1:n,r2:a}=this.coords,f="linear"===this.type?t.createLinearGradient(o,r,i,e):t.createRadialGradient(o,r,n,i,e,a);return this.colorStops.forEach((t=>{let{color:o,opacity:r,offset:i}=t;f.addColorStop(i,void 0!==r?new s(o).setAlpha(r).toRgba():o)})),f}static async fromObject(t){const{colorStops:s,gradientTransform:r}=t;return new this(o(o({},t),{},{colorStops:s?s.map((t=>o({},t))):void 0,gradientTransform:r?[...r]:void 0}))}static fromElement(t,s,r){const e=d(t),n=s._findCenterFromElement();return new this(o({id:t.getAttribute("id")||void 0,type:l(t),coords:p(t,{width:r.viewBoxWidth||r.width,height:r.viewBoxHeight||r.height}),colorStops:m(t,r.opacity),gradientUnits:e,gradientTransform:i(t.getAttribute("gradientTransform")||"")},"pixels"===e?{offsetX:s.width/2-n.x,offsetY:s.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