Function getRoundedRectPath

src/tools/shape-magic/svgRenderers.js:65–88

(x, y, w, h, corners)

};

export const getRoundedRectPath = (x, y, w, h, corners) => {
  const { tl, tr, br, bl } = corners;

  const maxR = Math.min(w / 2, h / 2);
  const rtl = Math.min(tl, maxR);
  const rtr = Math.min(tr, maxR);
  const rbr = Math.min(br, maxR);
  const rbl = Math.min(bl, maxR);

  return `
    M ${x + rtl} ${y}
    L ${x + w - rtr} ${y}
    ${rtr > 0 ? `A ${rtr} ${rtr} 0 0 1 ${x + w} ${y + rtr}` : `L ${x + w} ${y}`}
    L ${x + w} ${y + h - rbr}
    ${rbr > 0 ? `A ${rbr} ${rbr} 0 0 1 ${x + w - rbr} ${y + h}` : `L ${x + w} ${y + h}`}
    L ${x + bl} ${y + h}
    ${rbl > 0 ? `A ${rbl} ${rbl} 0 0 1 ${x} ${y + h - rbl}` : `L ${x} ${y + h}`}
    L ${x} ${y + rtl}
    ${rtl > 0 ? `A ${rtl} ${rtl} 0 0 1 ${x + rtl} ${y}` : `L ${x} ${y}`}
    Z
  `
    .trim()
    .replace(/\s+/g, ' ');
};

const cornersFor = (cornerRadii, id, globalRadius) =>
  cornerRadii[id] || { tl: globalRadius, tr: globalRadius, br: globalRadius, bl: globalRadius };