Function generateCSSClipPath

src/tools/shape-magic/svgRenderers.js:309–336

(shapes, bridges, cornerRadii, globalRadius, smoothing = 0.6)

};

export const generateCSSClipPath = (shapes, bridges, cornerRadii, globalRadius, smoothing = 0.6) => {
  const padding = 10;
  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 allPaths = [];

  shapes.forEach(s => {
    const corners = cornersFor(cornerRadii, s.id, globalRadius);
    allPaths.push(getRoundedRectPath(s.x + offsetX, s.y + offsetY, s.w, s.h, corners));
  });

  bridges.forEach(b => {
    allPaths.push(getBridgePathAt(b.x + offsetX, b.y + offsetY, b.r, b.rotation, smoothing));
  });

  const combinedPath = allPaths.join(' ').replace(/\s+/g, ' ').trim();

  return `/* Container dimensions: ${Math.round(width)}px × ${Math.round(height)}px */
.clipped-element {
  clip-path: path('${combinedPath}');
  width: ${Math.round(width)}px;
  height: ${Math.round(height)}px;
}`;
};

const computeNegativeSpaces = (shapes, bridges, globalRadius, minX, minY, maxX, maxY) => {
  const negativeSpaces = [];