@lobehub/ui/es/utils/smoothCorners.mjs.map

Lobe UI is an open-source UI component library for building AIGC web apps

{"version":3,"file":"smoothCorners.mjs","names":["points: string[]"],"sources":["../../src/utils/smoothCorners.ts"],"sourcesContent":["import type { CSSProperties } from 'react';\n\n/**\n * Smooth Corners utility using Base64 SVG mask\n * A simpler alternative to CSS Houdini Paint API\n */\n\n/**\n * Generate a smooth corners SVG path using superellipse formula\n * @param size - The size of the shape\n * @param n - The superellipse exponent (4 = squircle, 5 = iOS style)\n */\nconst generateSuperellipsePath = (size: number, n: number = 4): string => {\n  const r = size / 2;\n  const points: string[] = [];\n\n  // Generate points for the superellipse\n  for (let i = 0; i <= 360; i += 2) {\n    const angle = (i * Math.PI) / 180;\n    const cosAngle = Math.cos(angle);\n    const sinAngle = Math.sin(angle);\n\n    // Superellipse formula\n    const x = r * Math.sign(cosAngle) * Math.pow(Math.abs(cosAngle), 2 / n);\n    const y = r * Math.sign(sinAngle) * Math.pow(Math.abs(sinAngle), 2 / n);\n\n    points.push(`${r + x},${r + y}`);\n  }\n\n  return `M${points[0]}L${points.slice(1).join('L')}Z`;\n};\n\n/**\n * Create a Base64 encoded SVG mask for smooth corners\n * @param options - Configuration options\n */\nexport const createSmoothCornersMask = (\n  options: {\n    cornerValue?: number;\n    size?: number;\n  } = {},\n): string => {\n  const { size = 100, cornerValue = 4 } = options;\n\n  const path = generateSuperellipsePath(size, cornerValue);\n\n  const svg = `\n    <svg width=\"${size}\" height=\"${size}\" viewBox=\"0 0 ${size} ${size}\" xmlns=\"http://www.w3.org/2000/svg\">\n      <path d=\"${path}\" fill=\"white\"/>\n    </svg>\n  `\n    .trim()\n    .replaceAll(/\\s+/g, ' ');\n\n  return `data:image/svg+xml;base64,${btoa(svg)}`;\n};\n\n/**\n * Create a Base64 encoded SVG mask for circle shape\n * @param options - Configuration options\n */\nexport const createCircleMask = (\n  options: {\n    size?: number;\n  } = {},\n): string => {\n  const { size = 100 } = options;\n  const r = size / 2;\n\n  const svg = `\n    <svg width=\"${size}\" height=\"${size}\" viewBox=\"0 0 ${size} ${size}\" xmlns=\"http://www.w3.org/2000/svg\">\n      <circle cx=\"${r}\" cy=\"${r}\" r=\"${r}\" fill=\"white\"/>\n    </svg>\n  `\n    .trim()\n    .replaceAll(/\\s+/g, ' ');\n\n  return `data:image/svg+xml;base64,${btoa(svg)}`;\n};\n\n/**\n * Create a Base64 encoded SVG mask for rounded rectangle\n * @param options - Configuration options\n */\nexport const createRoundedRectMask = (\n  options: {\n    borderRadius?: number;\n    size?: number;\n  } = {},\n): string => {\n  const { size = 100, borderRadius = 15 } = options;\n\n  const svg = `\n    <svg width=\"${size}\" height=\"${size}\" viewBox=\"0 0 ${size} ${size}\" xmlns=\"http://www.w3.org/2000/svg\">\n      <rect x=\"0\" y=\"0\" width=\"${size}\" height=\"${size}\" rx=\"${borderRadius}\" ry=\"${borderRadius}\" fill=\"white\"/>\n    </svg>\n  `\n    .trim()\n    .replaceAll(/\\s+/g, ' ');\n\n  return `data:image/svg+xml;base64,${btoa(svg)}`;\n};\n\n/**\n * Predefined smooth corners masks for common corner values\n */\nexport const SMOOTH_CORNER_MASKS = {\n  // Basic shapes\n  circle: createCircleMask(),\n  // Superellipse shapes\n  ios: createSmoothCornersMask({ cornerValue: 5 }),\n\n  sharp: createSmoothCornersMask({ cornerValue: 6 }),\n  smooth: createSmoothCornersMask({ cornerValue: 3 }),\n  square: createRoundedRectMask({ borderRadius: 15 }),\n  squircle: createSmoothCornersMask({ cornerValue: 4 }),\n} as const;\n\n/**\n * CSS helper to apply smooth corners mask\n */\nexport const getSmoothCornersMaskStyle = (\n  cornerType: keyof typeof SMOOTH_CORNER_MASKS = 'squircle',\n): CSSProperties => {\n  return {\n    // WebKit prefix for better browser support\n    WebkitMaskImage: `url(\"${SMOOTH_CORNER_MASKS[cornerType]}\")`,\n\n    WebkitMaskPosition: 'center',\n\n    WebkitMaskRepeat: 'no-repeat',\n\n    WebkitMaskSize: '100% 100%',\n\n    maskImage: `url(\"${SMOOTH_CORNER_MASKS[cornerType]}\")`,\n    maskPosition: 'center',\n    maskRepeat: 'no-repeat',\n    maskSize: '100% 100%',\n  } as CSSProperties;\n};\n"],"mappings":";;;;;;;;;;AAYA,MAAM,4BAA4B,MAAc,IAAY,MAAc;CACxE,MAAM,IAAI,OAAO;CACjB,MAAMA,SAAmB,EAAE;AAG3B,MAAK,IAAI,IAAI,GAAG,KAAK,KAAK,KAAK,GAAG;EAChC,MAAM,QAAS,IAAI,KAAK,KAAM;EAC9B,MAAM,WAAW,KAAK,IAAI,MAAM;EAChC,MAAM,WAAW,KAAK,IAAI,MAAM;EAGhC,MAAM,IAAI,IAAI,KAAK,KAAK,SAAS,GAAG,KAAK,IAAI,KAAK,IAAI,SAAS,EAAE,IAAI,EAAE;EACvE,MAAM,IAAI,IAAI,KAAK,KAAK,SAAS,GAAG,KAAK,IAAI,KAAK,IAAI,SAAS,EAAE,IAAI,EAAE;AAEvE,SAAO,KAAK,GAAG,IAAI,EAAE,GAAG,IAAI,IAAI;;AAGlC,QAAO,IAAI,OAAO,GAAG,GAAG,OAAO,MAAM,EAAE,CAAC,KAAK,IAAI,CAAC;;;;;;AAOpD,MAAa,2BACX,UAGI,EAAE,KACK;CACX,MAAM,EAAE,OAAO,KAAK,cAAc,MAAM;CAIxC,MAAM,MAAM;kBACI,KAAK,YAAY,KAAK,iBAAiB,KAAK,GAAG,KAAK;iBAHvD,yBAAyB,MAAM,YAAY,CAIpC;;IAGjB,MAAM,CACN,WAAW,QAAQ,IAAI;AAE1B,QAAO,6BAA6B,KAAK,IAAI;;;;;;AAO/C,MAAa,oBACX,UAEI,EAAE,KACK;CACX,MAAM,EAAE,OAAO,QAAQ;CACvB,MAAM,IAAI,OAAO;CAEjB,MAAM,MAAM;kBACI,KAAK,YAAY,KAAK,iBAAiB,KAAK,GAAG,KAAK;oBAClD,EAAE,QAAQ,EAAE,OAAO,EAAE;;IAGpC,MAAM,CACN,WAAW,QAAQ,IAAI;AAE1B,QAAO,6BAA6B,KAAK,IAAI;;;;;;AAO/C,MAAa,yBACX,UAGI,EAAE,KACK;CACX,MAAM,EAAE,OAAO,KAAK,eAAe,OAAO;CAE1C,MAAM,MAAM;kBACI,KAAK,YAAY,KAAK,iBAAiB,KAAK,GAAG,KAAK;iCACrC,KAAK,YAAY,KAAK,QAAQ,aAAa,QAAQ,aAAa;;IAG5F,MAAM,CACN,WAAW,QAAQ,IAAI;AAE1B,QAAO,6BAA6B,KAAK,IAAI;;;;;AAM/C,MAAa,sBAAsB;CAEjC,QAAQ,kBAAkB;CAE1B,KAAK,wBAAwB,EAAE,aAAa,GAAG,CAAC;CAEhD,OAAO,wBAAwB,EAAE,aAAa,GAAG,CAAC;CAClD,QAAQ,wBAAwB,EAAE,aAAa,GAAG,CAAC;CACnD,QAAQ,sBAAsB,EAAE,cAAc,IAAI,CAAC;CACnD,UAAU,wBAAwB,EAAE,aAAa,GAAG,CAAC;CACtD"}