Motion-canvas: extending the `Line` class to implement a Polygon

hexagon.tsx

import {makeScene2D} from '@motion-canvas/2d/lib/scenes';;
import {createRef} from '@motion-canvas/core/lib/utils';
import {all} from '@motion-canvas/core/lib/flow';
import {createSignal} from '@motion-canvas/core/lib/signals';

import {Polygon} from '../components/Polygon';

export default makeScene2D(function* (view) {

  const myPoly = createRef<Polygon>();
  const radius = createSignal(50);

  view.add(
    <>
      <Polygon 
        ref={myPoly}
        x={0}
        y={30} 
        nSides={6} 
        rotation={0}
        polyradius={() => radius()} 
        closed
        stroke={'#ff0000'} 
        lineWidth={3} 
      />
    </>
  )

  yield * all (
    radius(50, 2) ,
    myPoly().position.x(800, 2),
    myPoly().polyradius(200, 3)
  );

});

polygon.tsx

import {Line, LineProps} from '@motion-canvas/2d/lib/components';
import {
    createSignal,
    SignalValue,
    SimpleSignal,
} from '@motion-canvas/core/lib/signals';
import {createRef} from '@motion-canvas/core/lib/utils';
import {initial, signal} from '@motion-canvas/2d/lib/decorators';
import {Vector2, PossibleVector2} from '@motion-canvas/core/lib/types';

export interface PolygonProps extends LineProps {
    x?: SignalValue<number>;
    y?: SignalValue<number>;
    polyradius?: SignalValue<number>;
    nSides?: SignalValue<number>;
    points?: SignalValue<SignalValue<PossibleVector2>[]>;
}

export class Polygon extends Line {
    @initial(0)
    @signal()
    public declare readonly x: SimpleSignal<number, this>;
    
    @initial(0)
    @signal()
    public declare readonly y: SimpleSignal<number, this>;
    
    @initial(25)
    @signal()
    public declare readonly radius: SimpleSignal<number, this>;
    
    @initial(25)
    @signal()
    public declare readonly polyradius: SimpleSignal<number, this>;
    
    @initial(6)
    @signal()    
    public declare readonly nSides: SimpleSignal<number, this>;
    
    @initial(true)
    @signal()
    public declare readonly closed: SimpleSignal<boolean, this>;

    @initial(null)
    @signal()
    public declare readonly points: SimpleSignal<
        SignalValue<PossibleVector2>[] | null,
        this
    >;
    
    public constructor(props?: PolygonProps) {
        super({
            points: null,
            ...props,
        });
        
        const points2d: Vector2[] = new Array<Vector2>();
        
        let polyradius = this.polyradius();
        let nSides = this.nSides()
        
        for (var i = 0; i < nSides; i += 1) {
            let x1 = polyradius * Math.sin(i * 2 * Math.PI / nSides);
            let y1 = -polyradius * Math.cos(i * 2 * Math.PI / nSides);
            points2d[i] = new Vector2(x1, y1);
        }
       
        this.radius = createSignal(0);
        this.points = createSignal(points2d);
        
    }
}