feat(2d): make Polygon extend Curve (#961)

packages/2d/src/lib/components/Polygon.ts

@@ -1,13 +1,25 @@
-import {BBox, SignalValue, SimpleSignal} from '@motion-canvas/core';
-import {initial, signal} from '../decorators';
+import {
+  BBox,
+  SerializedVector2,
+  SignalValue,
+  SimpleSignal,
+  Vector2,
+} from '@motion-canvas/core';
+import {CurveProfile, getPolylineProfile} from '../curves';
+import {computed, initial, signal} from '../decorators';
+import {DesiredLength} from '../partials';
 import {drawPolygon} from '../utils';
-import {Shape, ShapeProps} from './Shape';
+import {Curve, CurveProps} from './Curve';
 
-export interface PolygonProps extends ShapeProps {
+export interface PolygonProps extends CurveProps {
   /**
    * {@inheritDoc Polygon.sides}
    */
   sides?: SignalValue<number>;
+  /**
+   * {@inheritDoc Polygon.radius}
+   */
+  radius?: SignalValue<number>;
 }
 
 /**
@@ -54,21 +66,21 @@ export interface PolygonProps extends ShapeProps {
  *     <Polygon
  *       sides={5}
  *       size={160}
+ *       radius={30}
  *       stroke={'lightblue'}
  *       lineWidth={8}
  *     />
  *   );
  * });
  * ```
  */
-export class Polygon extends Shape {
+export class Polygon extends Curve {
   /**
-   * Sets the number of sides of the polygon.
+   * The number of sides of the polygon.
    *
    * @remarks
    * For example, a value of 6 creates a hexagon.
    *
-   *
    * @example
    * ```tsx
    * <Polygon
@@ -84,27 +96,79 @@ export class Polygon extends Shape {
   @signal()
   public declare readonly sides: SimpleSignal<number, this>;
 
+  /**
+   * The radius of the polygon's corners.
+   *
+   * @example
+   * ```tsx
+   * <Polygon
+   *   radius={30}
+   *   size={320}
+   *   sides={3}
+   *   stroke={'#fff'}
+   *   lineWidth={8}
+   * />
+   * ```
+   */
+  @initial(0)
+  @signal()
+  public declare readonly radius: SimpleSignal<number, this>;
+
   public constructor(props: PolygonProps) {
     super(props);
   }
 
-  protected override getPath(): Path2D {
-    const path = new Path2D();
+  @computed()
+  public override profile(): CurveProfile {
     const sides = this.sides();
+    const radius = this.radius();
 
-    const box = BBox.fromSizeCentered(this.size());
-    drawPolygon(path, box, sides);
+    const points = [];
+    const size = this.computedSize().scale(0.5);
+    for (let i = 0; i < sides; i++) {
+      const theta = (i * 2 * Math.PI) / sides;
+      const direction = Vector2.fromRadians(theta).perpendicular;
+      points.push(direction.mul(size));
+    }
 
-    return path;
+    return getPolylineProfile(points, radius, true);
+  }
+
+  protected override desiredSize(): SerializedVector2<DesiredLength> {
+    return {
+      x: this.width.context.getter(),
+      y: this.height.context.getter(),
+    };
+  }
+
+  protected override offsetComputedLayout(box: BBox): BBox {
+    return box;
+  }
+
+  protected override childrenBBox(): BBox {
+    return BBox.fromSizeCentered(this.computedSize());
+  }
+
+  protected override requiresProfile(): boolean {
+    return super.requiresProfile() || this.radius() > 0;
+  }
+
+  protected override getPath(): Path2D {
+    if (this.requiresProfile()) {
+      return this.curveDrawingInfo().path;
+    }
+
+    return this.createPath();
   }
   protected override getRipplePath(): Path2D {
+    return this.createPath(this.rippleSize());
+  }
+
+  protected createPath(expand = 0) {
     const path = new Path2D();
     const sides = this.sides();
-    const rippleSize = this.rippleSize();
-
-    const box = BBox.fromSizeCentered(this.size()).expand(rippleSize);
+    const box = BBox.fromSizeCentered(this.size()).expand(expand);
     drawPolygon(path, box, sides);
-
     return path;
   }
 }