squircle-view 0.0.0-stage → 0.2.0

package/android/src/main/java/com/squircleview/views/SquircleView.kt

@@ -0,0 +1,361 @@
+package com.squircleview.views
+
+import android.content.Context
+import android.graphics.Canvas
+import android.graphics.Color
+import android.graphics.DashPathEffect
+import android.graphics.Outline
+import android.graphics.Paint
+import android.graphics.Path
+import android.os.Build
+import android.view.View
+import android.view.ViewOutlineProvider
+import kotlin.math.abs
+import androidx.annotation.ColorInt
+import com.facebook.react.modules.i18nmanager.I18nUtil
+import com.facebook.react.uimanager.BackgroundStyleApplicator
+import com.facebook.react.uimanager.LengthPercentage
+import com.facebook.react.uimanager.style.BorderRadiusProp
+import com.facebook.react.uimanager.style.BorderStyle
+import com.facebook.react.uimanager.style.LogicalEdge
+import com.facebook.react.views.view.ReactViewGroup
+import com.squircleview.geometry.SquircleGeometry
+import com.squircleview.style.SquircleStyle
+
+public class SquircleView(context: Context) : ReactViewGroup(context) {
+  private val style = SquircleStyle()
+  private var borderSmoothing = 0f
+  private var isSquircle = false
+
+  private val radii = FloatArray(8)
+  private val borderWidths = FloatArray(4)
+  private val halfBorderWidths = FloatArray(4)
+  private val borderColors = IntArray(4)
+  private val noInsets = FloatArray(4)
+  private val geometryKey = FloatArray(15)
+  private val spokes = Array(4) { FloatArray(2) }
+  private var hasGeometry = false
+  private var hasStrokePath = false
+
+  private val outerPath = Path()
+  private val innerPath = Path()
+  private val borderPath = Path().apply { fillType = Path.FillType.EVEN_ODD }
+  private val strokePath = Path()
+  private val wedgePath = Path()
+
+  private val fillPaint = Paint(Paint.ANTI_ALIAS_FLAG).apply { style = Paint.Style.FILL }
+  private val strokePaint = Paint(Paint.ANTI_ALIAS_FLAG).apply { style = Paint.Style.STROKE }
+  private var dashKey = 0f
+
+  private val squircleOutlineProvider =
+      object : ViewOutlineProvider() {
+        override fun getOutline(view: View, outline: Outline) {
+          updateGeometry()
+          if (outerPath.isEmpty) {
+            outline.setRect(0, 0, view.width, view.height)
+          } else if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.R) {
+            outline.setPath(outerPath)
+          } else {
+            @Suppress("DEPRECATION") outline.setConvexPath(outerPath)
+          }
+        }
+      }
+
+  public fun setBorderSmoothing(smoothing: Float) {
+    borderSmoothing = SquircleGeometry.clampSmoothing(smoothing)
+    refresh()
+  }
+
+  public fun setSquircleBorderRadius(prop: BorderRadiusProp, radius: LengthPercentage?) {
+    style.radii[prop.ordinal] = radius
+    BackgroundStyleApplicator.setBorderRadius(this, prop, radius)
+    refresh()
+  }
+
+  public fun setSquircleBorderWidth(edge: LogicalEdge, width: Float?) {
+    style.borderWidths[edge.ordinal] = width
+    if (!isSquircle) {
+      BackgroundStyleApplicator.setBorderWidth(this, edge, width)
+    }
+    invalidateSquircle()
+  }
+
+  public fun setSquircleBorderColor(edge: LogicalEdge, @ColorInt color: Int?) {
+    style.borderColors[edge.ordinal] = color
+    if (!isSquircle) {
+      BackgroundStyleApplicator.setBorderColor(this, edge, color)
+    }
+    invalidateSquircle()
+  }
+
+  public fun setSquircleBorderStyle(borderStyle: BorderStyle?) {
+    style.borderStyle = borderStyle
+    if (!isSquircle) {
+      BackgroundStyleApplicator.setBorderStyle(this, borderStyle)
+    }
+    invalidateSquircle()
+  }
+
+  public fun setSquircleBackgroundColor(@ColorInt color: Int) {
+    style.backgroundColor = color
+    if (!isSquircle) {
+      BackgroundStyleApplicator.setBackgroundColor(this, color)
+    }
+    invalidateSquircle()
+  }
+
+  public fun resetSquircle() {
+    style.reset()
+    borderSmoothing = 0f
+    isSquircle = false
+    hasGeometry = false
+    hasStrokePath = false
+    setWillNotDraw(true)
+    outlineProvider = ViewOutlineProvider.BACKGROUND
+  }
+
+  override fun draw(canvas: Canvas) {
+    if (isSquircle) {
+      updateGeometry()
+      if (Color.alpha(style.backgroundColor) > 0) {
+        fillPaint.color = style.backgroundColor
+        canvas.drawPath(outerPath, fillPaint)
+      }
+    }
+    super.draw(canvas)
+  }
+
+  override fun onDraw(canvas: Canvas) {
+    super.onDraw(canvas)
+    if (isSquircle) {
+      drawBorder(canvas)
+    }
+  }
+
+  override fun dispatchDraw(canvas: Canvas) {
+    if (!isSquircle || overflow == null || overflow == OVERFLOW_VISIBLE) {
+      super.dispatchDraw(canvas)
+      return
+    }
+    updateGeometry()
+    val saveCount = canvas.save()
+    canvas.clipPath(innerPath)
+    super.dispatchDraw(canvas)
+    canvas.restoreToCount(saveCount)
+  }
+
+  override fun onRtlPropertiesChanged(layoutDirection: Int) {
+    super.onRtlPropertiesChanged(layoutDirection)
+    invalidateSquircle()
+  }
+
+  override fun onSizeChanged(w: Int, h: Int, oldw: Int, oldh: Int) {
+    super.onSizeChanged(w, h, oldw, oldh)
+    invalidateOutline()
+  }
+
+  private fun refresh() {
+    val squircle = borderSmoothing > 0f && style.hasRadius()
+    if (squircle != isSquircle) {
+      isSquircle = squircle
+      applyNativeStyle(enabled = !squircle)
+      setWillNotDraw(!squircle)
+      outlineProvider = if (squircle) squircleOutlineProvider else ViewOutlineProvider.BACKGROUND
+    }
+    invalidateSquircle()
+  }
+
+  private fun applyNativeStyle(enabled: Boolean) {
+    BackgroundStyleApplicator.setBackgroundColor(this, if (enabled) style.backgroundColor else null)
+    for (edge in LogicalEdge.entries) {
+      val width = style.borderWidths[edge.ordinal]
+      if (width != null) {
+        BackgroundStyleApplicator.setBorderWidth(this, edge, if (enabled) width else null)
+      }
+      val color = style.borderColors[edge.ordinal]
+      if (color != null) {
+        BackgroundStyleApplicator.setBorderColor(this, edge, if (enabled) color else null)
+      }
+    }
+    if (style.borderStyle != null) {
+      BackgroundStyleApplicator.setBorderStyle(this, if (enabled) style.borderStyle else null)
+    }
+  }
+
+  private fun invalidateSquircle() {
+    invalidate()
+    invalidateOutline()
+  }
+
+  private val isRtl: Boolean
+    get() = layoutDirection == View.LAYOUT_DIRECTION_RTL
+
+  private val swapLeftAndRight: Boolean
+    get() = I18nUtil.instance.doLeftAndRightSwapInRTL(context)
+
+  private fun updateGeometry() {
+    val width = width.toFloat()
+    val height = height.toFloat()
+    val isRtl = isRtl
+    val swapLeftAndRight = swapLeftAndRight
+    style.resolveRadii(isRtl, swapLeftAndRight, width, height, radii)
+    style.resolveBorderWidths(isRtl, swapLeftAndRight, borderWidths)
+
+    if (hasGeometry && keyMatches(width, height)) {
+      return
+    }
+    writeKey(width, height)
+    hasGeometry = true
+    hasStrokePath = false
+
+    outerPath.rewind()
+    innerPath.rewind()
+    borderPath.rewind()
+    SquircleGeometry.appendPath(outerPath, width, height, radii, noInsets, borderSmoothing)
+    SquircleGeometry.appendPath(innerPath, width, height, radii, borderWidths, borderSmoothing)
+    borderPath.addPath(outerPath)
+    borderPath.addPath(innerPath)
+  }
+
+  private fun keyMatches(width: Float, height: Float): Boolean {
+    if (geometryKey[0] != width || geometryKey[1] != height || geometryKey[2] != borderSmoothing) {
+      return false
+    }
+    for (index in radii.indices) {
+      if (geometryKey[3 + index] != radii[index]) return false
+    }
+    for (index in borderWidths.indices) {
+      if (geometryKey[11 + index] != borderWidths[index]) return false
+    }
+    return true
+  }
+
+  private fun writeKey(width: Float, height: Float) {
+    geometryKey[0] = width
+    geometryKey[1] = height
+    geometryKey[2] = borderSmoothing
+    radii.copyInto(geometryKey, 3)
+    borderWidths.copyInto(geometryKey, 11)
+  }
+
+  private fun strokePath(): Path {
+    if (!hasStrokePath) {
+      for (index in borderWidths.indices) {
+        halfBorderWidths[index] = borderWidths[index] / 2f
+      }
+      strokePath.rewind()
+      SquircleGeometry.appendPath(strokePath, width.toFloat(), height.toFloat(), radii, halfBorderWidths, borderSmoothing)
+      hasStrokePath = true
+    }
+    return strokePath
+  }
+
+  private fun drawBorder(canvas: Canvas) {
+    if (borderWidths.all { it <= 0f }) {
+      return
+    }
+    style.resolveBorderColors(isRtl, swapLeftAndRight, borderColors)
+    val color = borderColors[0]
+
+    if (borderColors.any { it != color }) {
+      drawMulticolorBorder(canvas)
+      return
+    }
+
+    val borderStyle = style.borderStyle
+    val strokeWidth = borderWidths[0]
+    if (borderStyle != null && borderStyle != BorderStyle.SOLID && borderWidths.all { it == strokeWidth }) {
+      val dotted = borderStyle == BorderStyle.DOTTED
+      strokePaint.color = color
+      strokePaint.strokeWidth = strokeWidth
+      strokePaint.strokeCap = if (dotted) Paint.Cap.ROUND else Paint.Cap.BUTT
+      val key = if (dotted) -strokeWidth else strokeWidth
+      if (dashKey != key) {
+        dashKey = key
+        strokePaint.pathEffect =
+            DashPathEffect(
+                if (dotted) floatArrayOf(0f, strokeWidth * 2) else floatArrayOf(strokeWidth * 3, strokeWidth * 3),
+                0f,
+            )
+      }
+      canvas.drawPath(strokePath(), strokePaint)
+      return
+    }
+
+    fillPaint.color = color
+    canvas.drawPath(borderPath, fillPaint)
+  }
+
+  private fun drawMulticolorBorder(canvas: Canvas) {
+    val width = width.toFloat()
+    val height = height.toFloat()
+    val centerX = width / 2f
+    val centerY = height / 2f
+    val top = borderWidths[0]
+    val right = borderWidths[1]
+    val bottom = borderWidths[2]
+    val left = borderWidths[3]
+
+    val topLeft = spoke(spokes[0], 0f, 0f, left, top, centerX, centerY)
+    val topRight = spoke(spokes[1], width, 0f, -right, top, centerX, centerY)
+    val bottomRight = spoke(spokes[2], width, height, -right, -bottom, centerX, centerY)
+    val bottomLeft = spoke(spokes[3], 0f, height, left, -bottom, centerX, centerY)
+
+    val saveCount = canvas.save()
+    canvas.clipPath(borderPath)
+    drawWedge(canvas, borderColors[0], 0f, 0f, width, 0f, topRight, topLeft, centerX, centerY)
+    drawWedge(canvas, borderColors[1], width, 0f, width, height, bottomRight, topRight, centerX, centerY)
+    drawWedge(canvas, borderColors[2], width, height, 0f, height, bottomLeft, bottomRight, centerX, centerY)
+    drawWedge(canvas, borderColors[3], 0f, height, 0f, 0f, topLeft, bottomLeft, centerX, centerY)
+    canvas.restoreToCount(saveCount)
+  }
+
+  private fun spoke(
+      out: FloatArray,
+      x: Float,
+      y: Float,
+      dx: Float,
+      dy: Float,
+      halfWidth: Float,
+      halfHeight: Float,
+  ): FloatArray {
+    var scale = Float.MAX_VALUE
+    if (dx != 0f) scale = minOf(scale, halfWidth / abs(dx))
+    if (dy != 0f) scale = minOf(scale, halfHeight / abs(dy))
+    if (scale == Float.MAX_VALUE) {
+      out[0] = x
+      out[1] = y
+    } else {
+      out[0] = x + dx * scale
+      out[1] = y + dy * scale
+    }
+    return out
+  }
+
+  private fun drawWedge(
+      canvas: Canvas,
+      @ColorInt color: Int,
+      startX: Float,
+      startY: Float,
+      endX: Float,
+      endY: Float,
+      endSpoke: FloatArray,
+      startSpoke: FloatArray,
+      centerX: Float,
+      centerY: Float,
+  ) {
+    wedgePath.rewind()
+    wedgePath.moveTo(startX, startY)
+    wedgePath.lineTo(endX, endY)
+    wedgePath.lineTo(endSpoke[0], endSpoke[1])
+    wedgePath.lineTo(centerX, centerY)
+    wedgePath.lineTo(startSpoke[0], startSpoke[1])
+    wedgePath.close()
+    fillPaint.color = color
+    canvas.drawPath(wedgePath, fillPaint)
+  }
+
+  private companion object {
+    const val OVERFLOW_VISIBLE = "visible"
+  }
+}

package/common/cpp/SquircleGeometry.cpp

@@ -0,0 +1,248 @@
+//
+//  SquircleGeometry.cpp
+//  Pods
+//
+//  Created by rit3zh CX on 10/7/26.
+//
+
+#include "SquircleGeometry.h"
+
+#include <algorithm>
+#include <cmath>
+#include <numbers>
+
+namespace squircle {
+
+namespace {
+
+constexpr double kHalfPi = std::numbers::pi / 2;
+
+struct AxisParams {
+  double radius = 0;
+  double a = 0;
+  double b = 0;
+  double c = 0;
+  double d = 0;
+  double arc = 0;
+  double p = 0;
+};
+
+struct CornerFrame {
+  Point origin;
+  Point in;
+  Point out;
+
+  Point map(double x, double y) const {
+    return {origin.x + x * in.x + y * out.x, origin.y + x * in.y + y * out.y};
+  }
+};
+
+struct Corner {
+  CornerFrame frame;
+  AxisParams in;
+  AxisParams out;
+};
+
+double shareOfSide(double radius, double adjacentRadius, double side) {
+  const double total = radius + adjacentRadius;
+  return total > 0 ? side * radius / total : 0;
+}
+
+AxisParams axisParams(double radius, double smoothing, double budget) {
+  radius = std::min(radius, budget);
+  if (radius <= 0) {
+    return {};
+  }
+
+  const double sweep = kHalfPi * (1 - smoothing);
+  const double angle = smoothing * kHalfPi / 2;
+  const double arc = std::sin(sweep / 2) * radius * std::numbers::sqrt2;
+  const double c = radius * std::tan(angle / 2) * std::cos(angle);
+  const double d = c * std::tan(angle);
+
+  double b = ((1 + smoothing) * radius - arc - c - d) / 3;
+  double a = 2 * b;
+
+  if ((1 + smoothing) * radius > budget) {
+    const double available = std::max(0.0, budget - arc - c - d);
+    b = std::min(b, available * 5 / 6);
+    a = available - b;
+  }
+
+  return {radius, a, b, c, d, arc, a + b + c + d + arc};
+}
+
+Point ellipsePoint(const AxisParams &in, const AxisParams &out, double theta) {
+  return {-in.radius + in.radius * std::cos(theta), out.radius + out.radius * std::sin(theta)};
+}
+
+Point ellipseTangent(const AxisParams &in, const AxisParams &out, double theta) {
+  return {-in.radius * std::sin(theta), out.radius * std::cos(theta)};
+}
+
+void appendCubic(Path &path, const CornerFrame &frame, Point c1, Point c2, Point end) {
+  path.push_back({Verb::Cubic, {frame.map(c1.x, c1.y), frame.map(c2.x, c2.y), frame.map(end.x, end.y)}});
+}
+
+void appendCorner(Path &path, const Corner &corner, double smoothing) {
+  const auto &frame = corner.frame;
+  const auto &in = corner.in;
+  const auto &out = corner.out;
+
+  path.push_back({Verb::Line, {frame.map(-in.p, 0)}});
+
+  if (in.radius <= 0) {
+    return;
+  }
+
+  if (smoothing > 0) {
+    appendCubic(
+        path,
+        frame,
+        {-in.p + in.a, 0},
+        {-in.p + in.a + in.b, 0},
+        {-(in.arc + in.d), out.d});
+  }
+
+  const double sweep = kHalfPi * (1 - smoothing);
+  if (sweep > 0) {
+    const double start = -kHalfPi + smoothing * kHalfPi / 2;
+    const double end = start + sweep;
+    const double k = 4.0 / 3.0 * std::tan(sweep / 4);
+    const Point from = ellipsePoint(in, out, start);
+    const Point to = ellipsePoint(in, out, end);
+    const Point fromTangent = ellipseTangent(in, out, start);
+    const Point toTangent = ellipseTangent(in, out, end);
+    appendCubic(
+        path,
+        frame,
+        {from.x + k * fromTangent.x, from.y + k * fromTangent.y},
+        {to.x - k * toTangent.x, to.y - k * toTangent.y},
+        to);
+  }
+
+  if (smoothing > 0) {
+    appendCubic(
+        path,
+        frame,
+        {0, out.arc + out.d + out.c},
+        {0, out.arc + out.d + out.c + out.b},
+        {0, out.p});
+  }
+}
+
+Corner makeCorner(
+    CornerFrame frame,
+    double inRadius,
+    double outRadius,
+    double inBudget,
+    double outBudget,
+    double smoothing) {
+  if (inRadius <= 0 || outRadius <= 0) {
+    return {frame, {}, {}};
+  }
+  return {frame, axisParams(inRadius, smoothing, inBudget), axisParams(outRadius, smoothing, outBudget)};
+}
+
+} // namespace
+
+double clampSmoothing(double smoothing) {
+  if (!(smoothing > 0)) {
+    return 0;
+  }
+  return std::min(smoothing, 1.0);
+}
+
+bool hasRoundedCorner(const CornerRadii &radii) {
+  for (const auto &corner : {radii.topLeft, radii.topRight, radii.bottomRight, radii.bottomLeft}) {
+    if (corner.horizontal > 0 && corner.vertical > 0) {
+      return true;
+    }
+  }
+  return false;
+}
+
+Path buildPath(const Rect &rect, const CornerRadii &radii, double smoothing) {
+  Path path;
+  if (!(rect.width > 0) || !(rect.height > 0)) {
+    return path;
+  }
+
+  smoothing = clampSmoothing(smoothing);
+
+  const double w = rect.width;
+  const double h = rect.height;
+  const double left = rect.x;
+  const double top = rect.y;
+  const double right = rect.x + w;
+  const double bottom = rect.y + h;
+
+  const auto &tl = radii.topLeft;
+  const auto &tr = radii.topRight;
+  const auto &br = radii.bottomRight;
+  const auto &bl = radii.bottomLeft;
+
+  const std::array<Corner, 4> corners = {
+      makeCorner(
+          {{right, top}, {1, 0}, {0, 1}},
+          tr.horizontal,
+          tr.vertical,
+          shareOfSide(tr.horizontal, tl.horizontal, w),
+          shareOfSide(tr.vertical, br.vertical, h),
+          smoothing),
+      makeCorner(
+          {{right, bottom}, {0, 1}, {-1, 0}},
+          br.vertical,
+          br.horizontal,
+          shareOfSide(br.vertical, tr.vertical, h),
+          shareOfSide(br.horizontal, bl.horizontal, w),
+          smoothing),
+      makeCorner(
+          {{left, bottom}, {-1, 0}, {0, -1}},
+          bl.horizontal,
+          bl.vertical,
+          shareOfSide(bl.horizontal, br.horizontal, w),
+          shareOfSide(bl.vertical, tl.vertical, h),
+          smoothing),
+      makeCorner(
+          {{left, top}, {0, -1}, {1, 0}},
+          tl.vertical,
+          tl.horizontal,
+          shareOfSide(tl.vertical, bl.vertical, h),
+          shareOfSide(tl.horizontal, tr.horizontal, w),
+          smoothing),
+  };
+
+  path.reserve(18);
+
+  const auto &last = corners.back();
+  path.push_back({Verb::Move, {last.frame.map(0, last.out.p)}});
+
+  for (const auto &corner : corners) {
+    appendCorner(path, corner, smoothing);
+  }
+
+  path.push_back({Verb::Close, {}});
+  return path;
+}
+
+Rect insetRect(const Rect &rect, const Insets &insets) {
+  return {
+      rect.x + insets.left,
+      rect.y + insets.top,
+      std::max(0.0, rect.width - insets.left - insets.right),
+      std::max(0.0, rect.height - insets.top - insets.bottom)};
+}
+
+CornerRadii insetRadii(const CornerRadii &radii, const Insets &insets) {
+  const auto inset = [](const CornerRadius &radius, double horizontal, double vertical) {
+    return CornerRadius{std::max(0.0, radius.horizontal - horizontal), std::max(0.0, radius.vertical - vertical)};
+  };
+  return {
+      inset(radii.topLeft, insets.left, insets.top),
+      inset(radii.topRight, insets.right, insets.top),
+      inset(radii.bottomRight, insets.right, insets.bottom),
+      inset(radii.bottomLeft, insets.left, insets.bottom)};
+}
+
+} // namespace squircle

package/common/cpp/SquircleGeometry.h

@@ -0,0 +1,75 @@
+//
+//  SquircleGeometry.h
+//  Pods
+//
+//  Created by rit3zh CX on 10/7/26.
+//
+
+#pragma once
+
+#include <array>
+#include <cstdint>
+#include <vector>
+
+namespace squircle {
+
+struct Point {
+  double x = 0;
+  double y = 0;
+
+  bool operator==(const Point &other) const = default;
+};
+
+struct Rect {
+  double x = 0;
+  double y = 0;
+  double width = 0;
+  double height = 0;
+
+  bool operator==(const Rect &other) const = default;
+};
+
+struct Insets {
+  double top = 0;
+  double right = 0;
+  double bottom = 0;
+  double left = 0;
+
+  bool operator==(const Insets &other) const = default;
+};
+
+struct CornerRadius {
+  double horizontal = 0;
+  double vertical = 0;
+
+  bool operator==(const CornerRadius &other) const = default;
+};
+
+struct CornerRadii {
+  CornerRadius topLeft;
+  CornerRadius topRight;
+  CornerRadius bottomRight;
+  CornerRadius bottomLeft;
+
+  bool operator==(const CornerRadii &other) const = default;
+};
+
+enum class Verb : uint8_t { Move, Line, Cubic, Close };
+
+struct PathElement {
+  Verb verb;
+  std::array<Point, 3> points;
+};
+
+using Path = std::vector<PathElement>;
+
+double clampSmoothing(double smoothing);
+bool hasRoundedCorner(const CornerRadii &radii);
+
+Path buildPath(const Rect &rect, const CornerRadii &radii, double smoothing);
+
+Rect insetRect(const Rect &rect, const Insets &insets);
+
+CornerRadii insetRadii(const CornerRadii &radii, const Insets &insets);
+
+} // namespace squircle

package/ios/Geometry/SquirclePath.h

@@ -0,0 +1,21 @@
+//
+//  SquirclePath.h
+//  Pods
+//
+//  Created by rit3zh CX on 10/7/26.
+//
+
+#import <CoreGraphics/CoreGraphics.h>
+
+#import "SquircleGeometry.h"
+
+CF_RETURNS_RETAINED CGPathRef _Nullable SquirclePathCreate(
+    const squircle::Rect &rect,
+    const squircle::CornerRadii &radii,
+    double smoothing);
+
+void SquirclePathAppend(
+    CGMutablePathRef _Nonnull path,
+    const squircle::Rect &rect,
+    const squircle::CornerRadii &radii,
+    double smoothing);