Function getFillSpec

src/tools/shape-magic/svgRenderers.js:125–170

(style, bbox, idSuffix = '')

// `bbox` must be in the same coordinate space as the drawn paths so a gradient
// spans the whole merged silhouette seamlessly (gradientUnits=userSpaceOnUse).
export const getFillSpec = (style, bbox, idSuffix = '') => {
  const id = `sm-fill-${idSuffix}`;
  const type = style.fillType || 'solid';
  if (type === 'solid') {
    return { type: 'solid', id, paint: style.fill };
  }

  const c1 = style.fill;
  const c2 = style.fillColor2 || style.fill;
  const cx = bbox.x + bbox.w / 2;
  const cy = bbox.y + bbox.h / 2;

  if (type === 'linear') {
    const angle = (((style.gradientAngle ?? 135) - 90) * Math.PI) / 180;
    const half = (Math.abs(Math.cos(angle)) * bbox.w + Math.abs(Math.sin(angle)) * bbox.h) / 2;
    const dx = Math.cos(angle) * half;
    const dy = Math.sin(angle) * half;
    return {
      type: 'linear',
      id,
      paint: `url(#${id})`,
      x1: cx - dx,
      y1: cy - dy,
      x2: cx + dx,
      y2: cy + dy,
      stops: [
        { offset: 0, color: c1 },
        { offset: 1, color: c2 }
      ]
    };
  }

  // radial
  return {
    type: 'radial',
    id,
    paint: `url(#${id})`,
    cx,
    cy,
    r: Math.max(bbox.w, bbox.h) / 2,
    stops: [
      { offset: 0, color: c1 },
      { offset: 1, color: c2 }
    ]
  };
};

// Description of the shadow + outer-stroke filter applied to the merged group.
export const getFxSpec = (style, idSuffix = '') => {