Function generateReactComponent

src/tools/shape-magic/svgRenderers.js:480–614

(
  shapes,
  bridges,
  cornerRadii,
  style,
  globalRadius,
  smoothing = 0.6,
  name = 'MergedShape'
)

};

export const generateReactComponent = (
  shapes,
  bridges,
  cornerRadii,
  style,
  globalRadius,
  smoothing = 0.6,
  name = 'MergedShape'
) => {
  let minX = Infinity,
    minY = Infinity,
    maxX = -Infinity,
    maxY = -Infinity;
  shapes.forEach(s => {
    minX = Math.min(minX, s.x);
    minY = Math.min(minY, s.y);
    maxX = Math.max(maxX, s.x + s.w);
    maxY = Math.max(maxY, s.y + s.h);
  });

  const width = maxX - minX;
  const height = maxY - minY;

  const negativeSpaces = computeNegativeSpaces(shapes, bridges, globalRadius, minX, minY, maxX, maxY);

  const shapeElements = shapes
    .map((s, i) => {
      const corners = cornersFor(cornerRadii, s.id, globalRadius);
      const left = s.x - minX;
      const top = s.y - minY;

      return `      {/* Shape ${i + 1} */}
      <div
        style={{
          position: 'absolute',
          left: ${left},
          top: ${top},
          width: ${s.w},
          height: ${s.h},
          backgroundColor: fill,
          borderRadius: '${corners.tl}px ${corners.tr}px ${corners.br}px ${corners.bl}px',
        }}
      >
        {/* Add content here */}
      </div>`;
    })
    .join('\n');

  const negativeSpaceElements = negativeSpaces
    .map((ns, i) => {
      const left = ns.x - minX;
      const top = ns.y - minY;

      return `      {/* Negative Space ${i + 1} - Content container for empty region */}
      <div
        style={{
          position: 'absolute',
          left: ${left},