Function generateMergedSVG

src/tools/shape-magic/svgRenderers.js:225–266

(shapes, bridges, cornerRadii, style, globalRadius, smoothing = 0.6, opts = {})

};

export const generateMergedSVG = (shapes, bridges, cornerRadii, style, globalRadius, smoothing = 0.6, opts = {}) => {
  const basePad = 10;
  const userPad = opts.padding ?? 0;
  const fxPad = effectPadding(style);
  const padding = basePad + userPad + fxPad;

  const bb = computeShapesBBox(shapes);
  const width = bb.w + padding * 2;
  const height = bb.h + padding * 2;
  const offsetX = -bb.x + padding;
  const offsetY = -bb.y + padding;

  const drawnBBox = { x: padding, y: padding, w: bb.w, h: bb.h };
  const fillSpec = getFillSpec(style, drawnBBox, 'merged');
  const fxSpec = getFxSpec(style, 'merged');

  const shapePaths = shapes
    .map(s => {
      const corners = cornersFor(cornerRadii, s.id, globalRadius);
      return `<path d="${getRoundedRectPath(s.x + offsetX, s.y + offsetY, s.w, s.h, corners)}" />`;
    })
    .join('\n      ');

  const bridgePaths = bridges
    .map(b => {
      return `<path d="${getBridgePathAt(b.x + offsetX, b.y + offsetY, b.r, b.rotation, smoothing)}" />`;
    })
    .join('\n      ');

  const defs = `${fillDefsString(fillSpec)}${fxFilterString(fxSpec)}`;
  const bg =
    style.backgroundEnabled || opts.forceBackground
      ? `<rect x="0" y="0" width="${width}" height="${height}" fill="${style.backgroundColor}" />\n  `
      : '';

  return `<svg width="${width}" height="${height}" viewBox="0 0 ${width} ${height}" xmlns="http://www.w3.org/2000/svg">
  ${defs ? `<defs>${defs}</defs>\n  ` : ''}${bg}<g fill="${fillSpec.paint}" fill-opacity="${style.opacity ?? 1}"${fxSpec ? ` filter="url(#${fxSpec.id})"` : ''}>
      ${shapePaths}
      ${bridgePaths}
  </g>
</svg>`;
};

export const generateMergedClipPathSVG = (shapes, bridges, cornerRadii, style, globalRadius, smoothing = 0.6) => {
  const padding = 10;