feat: add corner rounding support

Author: timhaywood

src/index.ts

@@ -1,30 +1,31 @@
-import {
-  Layer,
-  PathProperty,
-  Vector2D,
-  Points,
-  PathValue,
-  SourceText,
-} from 'expression-globals-typescript';
+import { Layer, PathProperty } from 'expression-globals-typescript';
 
 // Creating layer and property mocks
 const thisLayer = new Layer();
-const thisProperty = new PathProperty<PathValue>([[0, 0]]);
+const thisProperty = new PathProperty([[0, 0]]);
 
 // eBox types
 type Anchor = 'topLeft' | 'topRight' | 'bottomRight' | 'bottomLeft' | 'center';
+type Rounding = [number, number, number, number];
+type Vector2D = [number, number];
+type Points = Array<Vector2D>;
+
 interface BoxProps {
   size: Vector2D;
   position: Vector2D;
   anchor: Anchor;
   isClosed: boolean;
+  rounding: Rounding;
+  tangentMult: number;
 }
 
 function createBox({
   size = [100, 100],
   position = [0, 0],
+  rounding = [0, 0, 0, 0],
   anchor = 'center',
   isClosed = true,
+  tangentMult = 0.5,
 }: BoxProps) {
   const pointOrder: Anchor[] = [
     'topLeft',
@@ -69,6 +70,7 @@ function createBox({
       [-size[0] / 2, size[1] / 2],
     ];
   }
+
   function movePoints(
     points: Points,
     oldPosition: Vector2D,
@@ -92,26 +94,91 @@ function createBox({
   function pointsToComp(points: Points): Points {
     return points.map((point): Vector2D => thisLayer.fromComp(point)) as Points;
   }
-  function pointsToPath(points: Points, isClosed: boolean) {
-    return thisProperty.createPath(points, [], [], isClosed);
+
+  function pointsToPath(points: Points, rounding: Rounding, isClosed: boolean) {
+    const [pTl, pTr, pBr, pBl] = points;
+
+    const width = pTr[0] - pTl[0];
+    const height = pBl[1] - pTl[1];
+
+    const [rTl, rTr, rBr, rBl] = rounding.map(radius => {
+      const minDimension = Math.min(width, height);
+      return Math.max(Math.min(minDimension / 2, radius), 0);
+    });
+
+    const cornerPoints = [
+      // Top left
+      thisLayer.add(pTl, [0, rTl]),
+      thisLayer.add(pTl, [rTl, 0]),
+      // Top right
+      thisLayer.add(pTr, [-rTr, 0]),
+      thisLayer.add(pTr, [0, rTr]),
+      // Bottom right
+      thisLayer.add(pBr, [0, -rBr]),
+      thisLayer.add(pBr, [-rBr, 0]),
+      // Bottom left
+      thisLayer.add(pBl, [rBl, 0]),
+      thisLayer.add(pBl, [0, -rBl]),
+    ];
+
+    const inTangents = [
+      // Top left
+      [0, 0],
+      [-rTl, 0],
+      // Top right
+      [0, 0],
+      [0, -rTr],
+      // Bottom right
+      [0, 0],
+      [rBr, 0],
+      // Bottom left
+      [0, 0],
+      [0, rBl],
+    ].map(p => thisLayer.mul(p, tangentMult));
+    const outTangents = [
+      // Top left
+      [0, -rTl],
+      [0, 0],
+      // Top right
+      [rTr, 0],
+      [0, 0],
+      // Bottom right
+      [0, rBr],
+      [0, 0],
+      // Bottom left
+      [-rBl, 0],
+      [0, 0],
+    ].map(p => thisLayer.mul(p, tangentMult));
+
+    return thisProperty.createPath(
+      cornerPoints,
+      inTangents,
+      outTangents,
+      isClosed
+    );
   }
 
   const centerPosition = positionToCenter(position, size, anchor);
   interface OutputBox extends BoxProps {
     centerPosition: Vector2D;
   }
+
   let boxPoints: Points = createPointsFromBoxProps({
     size,
     position,
     anchor,
     isClosed,
     centerPosition,
+    rounding,
   });
 
   function getBoxPath() {
-    return pointsToPath(boxPoints, isClosed);
+    return pointsToPath(boxPoints, rounding, isClosed);
   }
-  function createPointsFromBoxProps(boxProps: OutputBox): Points {
+
+  function createPointsFromBoxProps(
+    boxProps: Omit<OutputBox, 'tangentMult'>
+  ): Points {
     const points = sizeToPoints(boxProps.size);
     const centeredPoints = movePoints(points, [0, 0], boxProps.centerPosition);
     const compPositionPoints = pointsToComp(centeredPoints);