@lobehub/ui/es/utils/smoothCorners.js

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

/**
 * Smooth Corners utility using Base64 SVG mask
 * A simpler alternative to CSS Houdini Paint API
 */

/**
 * Generate a smooth corners SVG path using superellipse formula
 * @param size - The size of the shape
 * @param n - The superellipse exponent (4 = squircle, 5 = iOS style)
 */
var generateSuperellipsePath = function generateSuperellipsePath(size) {
  var n = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 4;
  var r = size / 2;
  var points = [];

  // Generate points for the superellipse
  for (var i = 0; i <= 360; i += 2) {
    var angle = i * Math.PI / 180;
    var cosAngle = Math.cos(angle);
    var sinAngle = Math.sin(angle);

    // Superellipse formula
    var x = r * Math.sign(cosAngle) * Math.pow(Math.abs(cosAngle), 2 / n);
    var y = r * Math.sign(sinAngle) * Math.pow(Math.abs(sinAngle), 2 / n);
    points.push("".concat(r + x, ",").concat(r + y));
  }
  return "M".concat(points[0], "L").concat(points.slice(1).join('L'), "Z");
};

/**
 * Create a Base64 encoded SVG mask for smooth corners
 * @param options - Configuration options
 */
export var createSmoothCornersMask = function createSmoothCornersMask() {
  var options = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
  var _options$size = options.size,
    size = _options$size === void 0 ? 100 : _options$size,
    _options$cornerValue = options.cornerValue,
    cornerValue = _options$cornerValue === void 0 ? 4 : _options$cornerValue;
  var path = generateSuperellipsePath(size, cornerValue);
  var svg = "\n    <svg width=\"".concat(size, "\" height=\"").concat(size, "\" viewBox=\"0 0 ").concat(size, " ").concat(size, "\" xmlns=\"http://www.w3.org/2000/svg\">\n      <path d=\"").concat(path, "\" fill=\"white\"/>\n    </svg>\n  ").trim().replaceAll(/\s+/g, ' ');
  return "data:image/svg+xml;base64,".concat(btoa(svg));
};

/**
 * Create a Base64 encoded SVG mask for circle shape
 * @param options - Configuration options
 */
export var createCircleMask = function createCircleMask() {
  var options = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
  var _options$size2 = options.size,
    size = _options$size2 === void 0 ? 100 : _options$size2;
  var r = size / 2;
  var svg = "\n    <svg width=\"".concat(size, "\" height=\"").concat(size, "\" viewBox=\"0 0 ").concat(size, " ").concat(size, "\" xmlns=\"http://www.w3.org/2000/svg\">\n      <circle cx=\"").concat(r, "\" cy=\"").concat(r, "\" r=\"").concat(r, "\" fill=\"white\"/>\n    </svg>\n  ").trim().replaceAll(/\s+/g, ' ');
  return "data:image/svg+xml;base64,".concat(btoa(svg));
};

/**
 * Create a Base64 encoded SVG mask for rounded rectangle
 * @param options - Configuration options
 */
export var createRoundedRectMask = function createRoundedRectMask() {
  var options = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
  var _options$size3 = options.size,
    size = _options$size3 === void 0 ? 100 : _options$size3,
    _options$borderRadius = options.borderRadius,
    borderRadius = _options$borderRadius === void 0 ? 15 : _options$borderRadius;
  var svg = "\n    <svg width=\"".concat(size, "\" height=\"").concat(size, "\" viewBox=\"0 0 ").concat(size, " ").concat(size, "\" xmlns=\"http://www.w3.org/2000/svg\">\n      <rect x=\"0\" y=\"0\" width=\"").concat(size, "\" height=\"").concat(size, "\" rx=\"").concat(borderRadius, "\" ry=\"").concat(borderRadius, "\" fill=\"white\"/>\n    </svg>\n  ").trim().replaceAll(/\s+/g, ' ');
  return "data:image/svg+xml;base64,".concat(btoa(svg));
};

/**
 * Predefined smooth corners masks for common corner values
 */
export var SMOOTH_CORNER_MASKS = {
  // Basic shapes
  circle: createCircleMask(),
  // Superellipse shapes
  ios: createSmoothCornersMask({
    cornerValue: 5
  }),
  sharp: createSmoothCornersMask({
    cornerValue: 6
  }),
  smooth: createSmoothCornersMask({
    cornerValue: 3
  }),
  square: createRoundedRectMask({
    borderRadius: 15
  }),
  squircle: createSmoothCornersMask({
    cornerValue: 4
  })
};

/**
 * CSS helper to apply smooth corners mask
 */
export var getSmoothCornersMaskStyle = function getSmoothCornersMaskStyle() {
  var cornerType = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 'squircle';
  return {
    // WebKit prefix for better browser support
    WebkitMaskImage: "url(\"".concat(SMOOTH_CORNER_MASKS[cornerType], "\")"),
    WebkitMaskPosition: 'center',
    WebkitMaskRepeat: 'no-repeat',
    WebkitMaskSize: '100% 100%',
    maskImage: "url(\"".concat(SMOOTH_CORNER_MASKS[cornerType], "\")"),
    maskPosition: 'center',
    maskRepeat: 'no-repeat',
    maskSize: '100% 100%'
  };
};