@revideo/2d 0.2.6-alpha.904 → 0.2.6

package/lib/components/Ray.js

@@ -1,27 +1,14 @@
-var __decorate =
-  (this && this.__decorate) ||
-  function (decorators, target, key, desc) {
-    var c = arguments.length,
-      r =
-        c < 3
-          ? target
-          : desc === null
-            ? (desc = Object.getOwnPropertyDescriptor(target, key))
-            : desc,
-      d;
-    if (typeof Reflect === 'object' && typeof Reflect.decorate === 'function')
-      r = Reflect.decorate(decorators, target, key, desc);
-    else
-      for (var i = decorators.length - 1; i >= 0; i--)
-        if ((d = decorators[i]))
-          r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
     return c > 3 && r && Object.defineProperty(target, key, r), r;
-  };
-import {BBox} from '@revideo/core';
-import {LineSegment} from '../curves';
-import {nodeName, vector2Signal} from '../decorators';
-import {arc, drawLine, drawPivot} from '../utils';
-import {Curve} from './Curve';
+};
+import { BBox } from '@revideo/core';
+import { LineSegment } from '../curves';
+import { nodeName, vector2Signal } from '../decorators';
+import { arc, drawLine, drawPivot } from '../utils';
+import { Curve } from './Curve';
 /**
  * A node for drawing an individual line segment.
  *
@@ -51,52 +38,58 @@ import {Curve} from './Curve';
  * ```
  */
 let Ray = class Ray extends Curve {
-  constructor(props) {
-    super(props);
-  }
-  childrenBBox() {
-    return BBox.fromPoints(this.from(), this.to());
-  }
-  profile() {
-    const segment = new LineSegment(this.from(), this.to());
-    return {
-      arcLength: segment.arcLength,
-      minSin: 1,
-      segments: [segment],
-    };
-  }
-  drawOverlay(context, matrix) {
-    const box = this.childrenBBox().transformCorners(matrix);
-    const size = this.computedSize();
-    const offset = size.mul(this.offset()).scale(0.5).transformAsPoint(matrix);
-    const from = this.from().transformAsPoint(matrix);
-    const to = this.to().transformAsPoint(matrix);
-    context.fillStyle = 'white';
-    context.strokeStyle = 'black';
-    context.lineWidth = 1;
-    context.beginPath();
-    arc(context, from, 4);
-    context.fill();
-    context.stroke();
-    context.beginPath();
-    arc(context, to, 4);
-    context.fill();
-    context.stroke();
-    context.strokeStyle = 'white';
-    context.beginPath();
-    drawLine(context, [from, to]);
-    context.stroke();
-    context.beginPath();
-    drawPivot(context, offset);
-    context.stroke();
-    context.beginPath();
-    drawLine(context, box);
-    context.closePath();
-    context.stroke();
-  }
+    constructor(props) {
+        super(props);
+    }
+    childrenBBox() {
+        return BBox.fromPoints(this.from(), this.to());
+    }
+    profile() {
+        const segment = new LineSegment(this.from(), this.to());
+        return {
+            arcLength: segment.arcLength,
+            minSin: 1,
+            segments: [segment],
+        };
+    }
+    drawOverlay(context, matrix) {
+        const box = this.childrenBBox().transformCorners(matrix);
+        const size = this.computedSize();
+        const offset = size.mul(this.offset()).scale(0.5).transformAsPoint(matrix);
+        const from = this.from().transformAsPoint(matrix);
+        const to = this.to().transformAsPoint(matrix);
+        context.fillStyle = 'white';
+        context.strokeStyle = 'black';
+        context.lineWidth = 1;
+        context.beginPath();
+        arc(context, from, 4);
+        context.fill();
+        context.stroke();
+        context.beginPath();
+        arc(context, to, 4);
+        context.fill();
+        context.stroke();
+        context.strokeStyle = 'white';
+        context.beginPath();
+        drawLine(context, [from, to]);
+        context.stroke();
+        context.beginPath();
+        drawPivot(context, offset);
+        context.stroke();
+        context.beginPath();
+        drawLine(context, box);
+        context.closePath();
+        context.stroke();
+    }
 };
-__decorate([vector2Signal('from')], Ray.prototype, 'from', void 0);
-__decorate([vector2Signal('to')], Ray.prototype, 'to', void 0);
-Ray = __decorate([nodeName('Ray')], Ray);
-export {Ray};
-//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiUmF5LmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vc3JjL2xpYi9jb21wb25lbnRzL1JheS50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiOzs7Ozs7QUFBQSxPQUFPLEVBQUMsSUFBSSxFQUE4QyxNQUFNLGVBQWUsQ0FBQztBQUNoRixPQUFPLEVBQWUsV0FBVyxFQUFDLE1BQU0sV0FBVyxDQUFDO0FBQ3BELE9BQU8sRUFBQyxRQUFRLEVBQUUsYUFBYSxFQUFDLE1BQU0sZUFBZSxDQUFDO0FBQ3RELE9BQU8sRUFBQyxHQUFHLEVBQUUsUUFBUSxFQUFFLFNBQVMsRUFBQyxNQUFNLFVBQVUsQ0FBQztBQUNsRCxPQUFPLEVBQUMsS0FBSyxFQUFhLE1BQU0sU0FBUyxDQUFDO0FBa0IxQzs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7O0dBMkJHO0FBRUksSUFBTSxHQUFHLEdBQVQsTUFBTSxHQUFJLFNBQVEsS0FBSztJQWE1QixZQUFtQixLQUFlO1FBQ2hDLEtBQUssQ0FBQyxLQUFLLENBQUMsQ0FBQztJQUNmLENBQUM7SUFFa0IsWUFBWTtRQUM3QixPQUFPLElBQUksQ0FBQyxVQUFVLENBQUMsSUFBSSxDQUFDLElBQUksRUFBRSxFQUFFLElBQUksQ0FBQyxFQUFFLEVBQUUsQ0FBQyxDQUFDO0lBQ2pELENBQUM7SUFFZSxPQUFPO1FBQ3JCLE1BQU0sT0FBTyxHQUFHLElBQUksV0FBVyxDQUFDLElBQUksQ0FBQyxJQUFJLEVBQUUsRUFBRSxJQUFJLENBQUMsRUFBRSxFQUFFLENBQUMsQ0FBQztRQUV4RCxPQUFPO1lBQ0wsU0FBUyxFQUFFLE9BQU8sQ0FBQyxTQUFTO1lBQzVCLE1BQU0sRUFBRSxDQUFDO1lBQ1QsUUFBUSxFQUFFLENBQUMsT0FBTyxDQUFDO1NBQ3BCLENBQUM7SUFDSixDQUFDO0lBRWUsV0FBVyxDQUN6QixPQUFpQyxFQUNqQyxNQUFpQjtRQUVqQixNQUFNLEdBQUcsR0FBRyxJQUFJLENBQUMsWUFBWSxFQUFFLENBQUMsZ0JBQWdCLENBQUMsTUFBTSxDQUFDLENBQUM7UUFDekQsTUFBTSxJQUFJLEdBQUcsSUFBSSxDQUFDLFlBQVksRUFBRSxDQUFDO1FBQ2pDLE1BQU0sTUFBTSxHQUFHLElBQUksQ0FBQyxHQUFHLENBQUMsSUFBSSxDQUFDLE1BQU0sRUFBRSxDQUFDLENBQUMsS0FBSyxDQUFDLEdBQUcsQ0FBQyxDQUFDLGdCQUFnQixDQUFDLE1BQU0sQ0FBQyxDQUFDO1FBQzNFLE1BQU0sSUFBSSxHQUFHLElBQUksQ0FBQyxJQUFJLEVBQUUsQ0FBQyxnQkFBZ0IsQ0FBQyxNQUFNLENBQUMsQ0FBQztRQUNsRCxNQUFNLEVBQUUsR0FBRyxJQUFJLENBQUMsRUFBRSxFQUFFLENBQUMsZ0JBQWdCLENBQUMsTUFBTSxDQUFDLENBQUM7UUFFOUMsT0FBTyxDQUFDLFNBQVMsR0FBRyxPQUFPLENBQUM7UUFDNUIsT0FBTyxDQUFDLFdBQVcsR0FBRyxPQUFPLENBQUM7UUFDOUIsT0FBTyxDQUFDLFNBQVMsR0FBRyxDQUFDLENBQUM7UUFFdEIsT0FBTyxDQUFDLFNBQVMsRUFBRSxDQUFDO1FBQ3BCLEdBQUcsQ0FBQyxPQUFPLEVBQUUsSUFBSSxFQUFFLENBQUMsQ0FBQyxDQUFDO1FBQ3RCLE9BQU8sQ0FBQyxJQUFJLEVBQUUsQ0FBQztRQUNmLE9BQU8sQ0FBQyxNQUFNLEVBQUUsQ0FBQztRQUVqQixPQUFPLENBQUMsU0FBUyxFQUFFLENBQUM7UUFDcEIsR0FBRyxDQUFDLE9BQU8sRUFBRSxFQUFFLEVBQUUsQ0FBQyxDQUFDLENBQUM7UUFDcEIsT0FBTyxDQUFDLElBQUksRUFBRSxDQUFDO1FBQ2YsT0FBTyxDQUFDLE1BQU0sRUFBRSxDQUFDO1FBRWpCLE9BQU8sQ0FBQyxXQUFXLEdBQUcsT0FBTyxDQUFDO1FBQzlCLE9BQU8sQ0FBQyxTQUFTLEVBQUUsQ0FBQztRQUNwQixRQUFRLENBQUMsT0FBTyxFQUFFLENBQUMsSUFBSSxFQUFFLEVBQUUsQ0FBQyxDQUFDLENBQUM7UUFDOUIsT0FBTyxDQUFDLE1BQU0sRUFBRSxDQUFDO1FBRWpCLE9BQU8sQ0FBQyxTQUFTLEVBQUUsQ0FBQztRQUNwQixTQUFTLENBQUMsT0FBTyxFQUFFLE1BQU0sQ0FBQyxDQUFDO1FBQzNCLE9BQU8sQ0FBQyxNQUFNLEVBQUUsQ0FBQztRQUVqQixPQUFPLENBQUMsU0FBUyxFQUFFLENBQUM7UUFDcEIsUUFBUSxDQUFDLE9BQU8sRUFBRSxHQUFHLENBQUMsQ0FBQztRQUN2QixPQUFPLENBQUMsU0FBUyxFQUFFLENBQUM7UUFDcEIsT0FBTyxDQUFDLE1BQU0sRUFBRSxDQUFDO0lBQ25CLENBQUM7Q0FDRixDQUFBO0FBaEV5QjtJQUR2QixhQUFhLENBQUMsTUFBTSxDQUFDO2lDQUM0QjtBQU0xQjtJQUR2QixhQUFhLENBQUMsSUFBSSxDQUFDOytCQUM0QjtBQVhyQyxHQUFHO0lBRGYsUUFBUSxDQUFDLEtBQUssQ0FBQztHQUNILEdBQUcsQ0FxRWYifQ==
+__decorate([
+    vector2Signal('from')
+], Ray.prototype, "from", void 0);
+__decorate([
+    vector2Signal('to')
+], Ray.prototype, "to", void 0);
+Ray = __decorate([
+    nodeName('Ray')
+], Ray);
+export { Ray };
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiUmF5LmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vc3JjL2xpYi9jb21wb25lbnRzL1JheS50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiOzs7Ozs7QUFBQSxPQUFPLEVBQUMsSUFBSSxFQUE4QyxNQUFNLGVBQWUsQ0FBQztBQUNoRixPQUFPLEVBQWUsV0FBVyxFQUFDLE1BQU0sV0FBVyxDQUFDO0FBQ3BELE9BQU8sRUFBQyxRQUFRLEVBQUUsYUFBYSxFQUFDLE1BQU0sZUFBZSxDQUFDO0FBQ3RELE9BQU8sRUFBQyxHQUFHLEVBQUUsUUFBUSxFQUFFLFNBQVMsRUFBQyxNQUFNLFVBQVUsQ0FBQztBQUNsRCxPQUFPLEVBQUMsS0FBSyxFQUFhLE1BQU0sU0FBUyxDQUFDO0FBa0IxQzs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7O0dBMkJHO0FBRUksSUFBTSxHQUFHLEdBQVQsTUFBTSxHQUFJLFNBQVEsS0FBSztJQWE1QixZQUFtQixLQUFlO1FBQ2hDLEtBQUssQ0FBQyxLQUFLLENBQUMsQ0FBQztJQUNmLENBQUM7SUFFa0IsWUFBWTtRQUM3QixPQUFPLElBQUksQ0FBQyxVQUFVLENBQUMsSUFBSSxDQUFDLElBQUksRUFBRSxFQUFFLElBQUksQ0FBQyxFQUFFLEVBQUUsQ0FBQyxDQUFDO0lBQ2pELENBQUM7SUFFZSxPQUFPO1FBQ3JCLE1BQU0sT0FBTyxHQUFHLElBQUksV0FBVyxDQUFDLElBQUksQ0FBQyxJQUFJLEVBQUUsRUFBRSxJQUFJLENBQUMsRUFBRSxFQUFFLENBQUMsQ0FBQztRQUV4RCxPQUFPO1lBQ0wsU0FBUyxFQUFFLE9BQU8sQ0FBQyxTQUFTO1lBQzVCLE1BQU0sRUFBRSxDQUFDO1lBQ1QsUUFBUSxFQUFFLENBQUMsT0FBTyxDQUFDO1NBQ3BCLENBQUM7SUFDSixDQUFDO0lBRWUsV0FBVyxDQUN6QixPQUFpQyxFQUNqQyxNQUFpQjtRQUVqQixNQUFNLEdBQUcsR0FBRyxJQUFJLENBQUMsWUFBWSxFQUFFLENBQUMsZ0JBQWdCLENBQUMsTUFBTSxDQUFDLENBQUM7UUFDekQsTUFBTSxJQUFJLEdBQUcsSUFBSSxDQUFDLFlBQVksRUFBRSxDQUFDO1FBQ2pDLE1BQU0sTUFBTSxHQUFHLElBQUksQ0FBQyxHQUFHLENBQUMsSUFBSSxDQUFDLE1BQU0sRUFBRSxDQUFDLENBQUMsS0FBSyxDQUFDLEdBQUcsQ0FBQyxDQUFDLGdCQUFnQixDQUFDLE1BQU0sQ0FBQyxDQUFDO1FBQzNFLE1BQU0sSUFBSSxHQUFHLElBQUksQ0FBQyxJQUFJLEVBQUUsQ0FBQyxnQkFBZ0IsQ0FBQyxNQUFNLENBQUMsQ0FBQztRQUNsRCxNQUFNLEVBQUUsR0FBRyxJQUFJLENBQUMsRUFBRSxFQUFFLENBQUMsZ0JBQWdCLENBQUMsTUFBTSxDQUFDLENBQUM7UUFFOUMsT0FBTyxDQUFDLFNBQVMsR0FBRyxPQUFPLENBQUM7UUFDNUIsT0FBTyxDQUFDLFdBQVcsR0FBRyxPQUFPLENBQUM7UUFDOUIsT0FBTyxDQUFDLFNBQVMsR0FBRyxDQUFDLENBQUM7UUFFdEIsT0FBTyxDQUFDLFNBQVMsRUFBRSxDQUFDO1FBQ3BCLEdBQUcsQ0FBQyxPQUFPLEVBQUUsSUFBSSxFQUFFLENBQUMsQ0FBQyxDQUFDO1FBQ3RCLE9BQU8sQ0FBQyxJQUFJLEVBQUUsQ0FBQztRQUNmLE9BQU8sQ0FBQyxNQUFNLEVBQUUsQ0FBQztRQUVqQixPQUFPLENBQUMsU0FBUyxFQUFFLENBQUM7UUFDcEIsR0FBRyxDQUFDLE9BQU8sRUFBRSxFQUFFLEVBQUUsQ0FBQyxDQUFDLENBQUM7UUFDcEIsT0FBTyxDQUFDLElBQUksRUFBRSxDQUFDO1FBQ2YsT0FBTyxDQUFDLE1BQU0sRUFBRSxDQUFDO1FBRWpCLE9BQU8sQ0FBQyxXQUFXLEdBQUcsT0FBTyxDQUFDO1FBQzlCLE9BQU8sQ0FBQyxTQUFTLEVBQUUsQ0FBQztRQUNwQixRQUFRLENBQUMsT0FBTyxFQUFFLENBQUMsSUFBSSxFQUFFLEVBQUUsQ0FBQyxDQUFDLENBQUM7UUFDOUIsT0FBTyxDQUFDLE1BQU0sRUFBRSxDQUFDO1FBRWpCLE9BQU8sQ0FBQyxTQUFTLEVBQUUsQ0FBQztRQUNwQixTQUFTLENBQUMsT0FBTyxFQUFFLE1BQU0sQ0FBQyxDQUFDO1FBQzNCLE9BQU8sQ0FBQyxNQUFNLEVBQUUsQ0FBQztRQUVqQixPQUFPLENBQUMsU0FBUyxFQUFFLENBQUM7UUFDcEIsUUFBUSxDQUFDLE9BQU8sRUFBRSxHQUFHLENBQUMsQ0FBQztRQUN2QixPQUFPLENBQUMsU0FBUyxFQUFFLENBQUM7UUFDcEIsT0FBTyxDQUFDLE1BQU0sRUFBRSxDQUFDO0lBQ25CLENBQUM7Q0FDRixDQUFBO0FBaEV5QjtJQUR2QixhQUFhLENBQUMsTUFBTSxDQUFDO2lDQUM0QjtBQU0xQjtJQUR2QixhQUFhLENBQUMsSUFBSSxDQUFDOytCQUM0QjtBQVhyQyxHQUFHO0lBRGYsUUFBUSxDQUFDLEtBQUssQ0FBQztHQUNILEdBQUcsQ0FxRWYifQ==

package/lib/components/Rect.d.ts

@@ -1,119 +1,112 @@
-import {
-  BBox,
-  PossibleSpacing,
-  SerializedVector2,
-  SignalValue,
-  SimpleSignal,
-  SpacingSignal,
-} from '@revideo/core';
-import {DesiredLength} from '../partials';
-import {Curve, CurveProps} from './Curve';
+import { BBox, PossibleSpacing, SerializedVector2, SignalValue, SimpleSignal, SpacingSignal } from '@revideo/core';
+import { DesiredLength } from '../partials';
+import { Curve, CurveProps } from './Curve';
 export interface RectProps extends CurveProps {
-  /**
-   * {@inheritDoc Rect.radius}
-   */
-  radius?: SignalValue<PossibleSpacing>;
-  /**
-   * {@inheritDoc Rect.smoothCorners}
-   */
-  smoothCorners?: SignalValue<boolean>;
-  /**
-   * {@inheritDoc Rect.cornerSharpness}
-   */
-  cornerSharpness?: SignalValue<number>;
+    /**
+     * {@inheritDoc Rect.radius}
+     */
+    radius?: SignalValue<PossibleSpacing>;
+    /**
+     * {@inheritDoc Rect.smoothCorners}
+     */
+    smoothCorners?: SignalValue<boolean>;
+    /**
+     * {@inheritDoc Rect.cornerSharpness}
+     */
+    cornerSharpness?: SignalValue<number>;
 }
 export declare class Rect extends Curve {
-  /**
-   * Rounds the corners of this rectangle.
-   *
-   * @remarks
-   * The value represents the radius of the quarter circle that is used to round
-   * the corners. If the value is a number, the same radius is used for all
-   * corners. Passing an array of two to four numbers will set individual radii
-   * for each corner. Individual radii correspond to different corners depending
-   * on the number of values passed:
-   *
-   * ```ts
-   * // top-left-and-bottom-right | top-right-and-bottom-left
-   * [10, 30]
-   * // top-left | top-right-and-bottom-left | bottom-right
-   * [10, 20, 30]
-   * // top-left | top-right | bottom-right | bottom-left
-   * [10, 20, 30, 40]
-   * ```
-   *
-   * @example
-   * One uniform radius:
-   * ```tsx
-   * <Rect
-   *   size={320}
-   *   radius={40}
-   *   fill={'white'}
-   * />
-   * ```
-   * @example
-   * Individual radii for each corner:
-   * ```tsx
-   * <Rect
-   *   size={320}
-   *   radius={[10, 20, 30, 40]}
-   *   fill={'white'}
-   * />
-   * ```
-   */
-  readonly radius: SpacingSignal<this>;
-  /**
-   * Enables corner smoothing.
-   *
-   * @remarks
-   * This property only affects the way rounded corners are drawn. To control
-   * the corner radius use the {@link radius} property.
-   *
-   * When enabled, rounded corners are drawn continuously using Bézier curves
-   * rather than quarter circles. The sharpness of the curve can be controlled
-   * with {@link cornerSharpness}.
-   *
-   * You can read more about corner smoothing in
-   * [this article by Nick Lawrence](https://uxplanet.org/ui-ux-design-corner-smoothing-720509d1ae48).
-   *
-   * @example
-   * ```tsx
-   * <Rect
-   *   width={300}
-   *   height={300}
-   *   smoothCorners={true}
-   * />
-   * ```
-   */
-  readonly smoothCorners: SimpleSignal<boolean, this>;
-  /**
-   * Controls the sharpness of {@link smoothCorners}.
-   *
-   * @remarks
-   * This property only affects the way rounded corners are drawn. To control
-   * the corner radius use the {@link radius} property.
-   *
-   * Requires {@link smoothCorners} to be enabled to have any effect.
-   * By default, corner sharpness is set to `0.6` which represents a smooth,
-   * circle-like rounding. At `0` the edges are squared off.
-   *
-   * @example
-   * ```tsx
-   * <Rect
-   *   size={300}
-   *   smoothCorners={true}
-   *   cornerSharpness={0.7}
-   * />
-   * ```
-   */
-  readonly cornerSharpness: SimpleSignal<number, this>;
-  constructor(props: RectProps);
-  profile(): import('..').CurveProfile;
-  protected desiredSize(): SerializedVector2<DesiredLength>;
-  protected offsetComputedLayout(box: BBox): BBox;
-  protected childrenBBox(): BBox;
-  protected getPath(): Path2D;
-  protected getCacheBBox(): BBox;
-  protected getRipplePath(): Path2D;
+    /**
+     * Rounds the corners of this rectangle.
+     *
+     * @remarks
+     * The value represents the radius of the quarter circle that is used to round
+     * the corners. If the value is a number, the same radius is used for all
+     * corners. Passing an array of two to four numbers will set individual radii
+     * for each corner. Individual radii correspond to different corners depending
+     * on the number of values passed:
+     *
+     * ```ts
+     * // top-left-and-bottom-right | top-right-and-bottom-left
+     * [10, 30]
+     * // top-left | top-right-and-bottom-left | bottom-right
+     * [10, 20, 30]
+     * // top-left | top-right | bottom-right | bottom-left
+     * [10, 20, 30, 40]
+     * ```
+     *
+     * @example
+     * One uniform radius:
+     * ```tsx
+     * <Rect
+     *   size={320}
+     *   radius={40}
+     *   fill={'white'}
+     * />
+     * ```
+     * @example
+     * Individual radii for each corner:
+     * ```tsx
+     * <Rect
+     *   size={320}
+     *   radius={[10, 20, 30, 40]}
+     *   fill={'white'}
+     * />
+     * ```
+     */
+    readonly radius: SpacingSignal<this>;
+    /**
+     * Enables corner smoothing.
+     *
+     * @remarks
+     * This property only affects the way rounded corners are drawn. To control
+     * the corner radius use the {@link radius} property.
+     *
+     * When enabled, rounded corners are drawn continuously using Bézier curves
+     * rather than quarter circles. The sharpness of the curve can be controlled
+     * with {@link cornerSharpness}.
+     *
+     * You can read more about corner smoothing in
+     * [this article by Nick Lawrence](https://uxplanet.org/ui-ux-design-corner-smoothing-720509d1ae48).
+     *
+     * @example
+     * ```tsx
+     * <Rect
+     *   width={300}
+     *   height={300}
+     *   smoothCorners={true}
+     * />
+     * ```
+     */
+    readonly smoothCorners: SimpleSignal<boolean, this>;
+    /**
+     * Controls the sharpness of {@link smoothCorners}.
+     *
+     * @remarks
+     * This property only affects the way rounded corners are drawn. To control
+     * the corner radius use the {@link radius} property.
+     *
+     * Requires {@link smoothCorners} to be enabled to have any effect.
+     * By default, corner sharpness is set to `0.6` which represents a smooth,
+     * circle-like rounding. At `0` the edges are squared off.
+     *
+     * @example
+     * ```tsx
+     * <Rect
+     *   size={300}
+     *   smoothCorners={true}
+     *   cornerSharpness={0.7}
+     * />
+     * ```
+     */
+    readonly cornerSharpness: SimpleSignal<number, this>;
+    constructor(props: RectProps);
+    profile(): import("..").CurveProfile;
+    protected desiredSize(): SerializedVector2<DesiredLength>;
+    protected offsetComputedLayout(box: BBox): BBox;
+    protected childrenBBox(): BBox;
+    protected getPath(): Path2D;
+    protected getCacheBBox(): BBox;
+    protected getRipplePath(): Path2D;
 }
-//# sourceMappingURL=Rect.d.ts.map
+//# sourceMappingURL=Rect.d.ts.map

package/lib/components/Rect.js

@@ -1,82 +1,76 @@
-var __decorate =
-  (this && this.__decorate) ||
-  function (decorators, target, key, desc) {
-    var c = arguments.length,
-      r =
-        c < 3
-          ? target
-          : desc === null
-            ? (desc = Object.getOwnPropertyDescriptor(target, key))
-            : desc,
-      d;
-    if (typeof Reflect === 'object' && typeof Reflect.decorate === 'function')
-      r = Reflect.decorate(decorators, target, key, desc);
-    else
-      for (var i = decorators.length - 1; i >= 0; i--)
-        if ((d = decorators[i]))
-          r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
     return c > 3 && r && Object.defineProperty(target, key, r), r;
-  };
-import {BBox} from '@revideo/core';
-import {getRectProfile} from '../curves/getRectProfile';
-import {computed, initial, nodeName, signal} from '../decorators';
-import {spacingSignal} from '../decorators/spacingSignal';
-import {drawRoundRect} from '../utils';
-import {Curve} from './Curve';
+};
+import { BBox, } from '@revideo/core';
+import { getRectProfile } from '../curves/getRectProfile';
+import { computed, initial, nodeName, signal } from '../decorators';
+import { spacingSignal } from '../decorators/spacingSignal';
+import { drawRoundRect } from '../utils';
+import { Curve } from './Curve';
 let Rect = class Rect extends Curve {
-  constructor(props) {
-    super(props);
-  }
-  profile() {
-    return getRectProfile(
-      this.childrenBBox(),
-      this.radius(),
-      this.smoothCorners(),
-      this.cornerSharpness(),
-    );
-  }
-  desiredSize() {
-    return {
-      x: this.width.context.getter(),
-      y: this.height.context.getter(),
-    };
-  }
-  offsetComputedLayout(box) {
-    return box;
-  }
-  childrenBBox() {
-    return BBox.fromSizeCentered(this.computedSize());
-  }
-  getPath() {
-    if (this.requiresProfile()) {
-      return this.curveDrawingInfo().path;
+    constructor(props) {
+        super(props);
+    }
+    profile() {
+        return getRectProfile(this.childrenBBox(), this.radius(), this.smoothCorners(), this.cornerSharpness());
+    }
+    desiredSize() {
+        return {
+            x: this.width.context.getter(),
+            y: this.height.context.getter(),
+        };
+    }
+    offsetComputedLayout(box) {
+        return box;
+    }
+    childrenBBox() {
+        return BBox.fromSizeCentered(this.computedSize());
+    }
+    getPath() {
+        if (this.requiresProfile()) {
+            return this.curveDrawingInfo().path;
+        }
+        const path = new Path2D();
+        const radius = this.radius();
+        const smoothCorners = this.smoothCorners();
+        const cornerSharpness = this.cornerSharpness();
+        const box = BBox.fromSizeCentered(this.size());
+        drawRoundRect(path, box, radius, smoothCorners, cornerSharpness);
+        return path;
+    }
+    getCacheBBox() {
+        return super.getCacheBBox().expand(this.rippleSize());
+    }
+    getRipplePath() {
+        const path = new Path2D();
+        const rippleSize = this.rippleSize();
+        const radius = this.radius().addScalar(rippleSize);
+        const smoothCorners = this.smoothCorners();
+        const cornerSharpness = this.cornerSharpness();
+        const box = BBox.fromSizeCentered(this.size()).expand(rippleSize);
+        drawRoundRect(path, box, radius, smoothCorners, cornerSharpness);
+        return path;
     }
-    const path = new Path2D();
-    const radius = this.radius();
-    const smoothCorners = this.smoothCorners();
-    const cornerSharpness = this.cornerSharpness();
-    const box = BBox.fromSizeCentered(this.size());
-    drawRoundRect(path, box, radius, smoothCorners, cornerSharpness);
-    return path;
-  }
-  getCacheBBox() {
-    return super.getCacheBBox().expand(this.rippleSize());
-  }
-  getRipplePath() {
-    const path = new Path2D();
-    const rippleSize = this.rippleSize();
-    const radius = this.radius().addScalar(rippleSize);
-    const smoothCorners = this.smoothCorners();
-    const cornerSharpness = this.cornerSharpness();
-    const box = BBox.fromSizeCentered(this.size()).expand(rippleSize);
-    drawRoundRect(path, box, radius, smoothCorners, cornerSharpness);
-    return path;
-  }
 };
-__decorate([spacingSignal('radius')], Rect.prototype, 'radius', void 0);
-__decorate([initial(false), signal()], Rect.prototype, 'smoothCorners', void 0);
-__decorate([initial(0.6), signal()], Rect.prototype, 'cornerSharpness', void 0);
-__decorate([computed()], Rect.prototype, 'profile', null);
-Rect = __decorate([nodeName('Rect')], Rect);
-export {Rect};
-//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiUmVjdC5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uL3NyYy9saWIvY29tcG9uZW50cy9SZWN0LnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiI7Ozs7OztBQUFBLE9BQU8sRUFDTCxJQUFJLEdBTUwsTUFBTSxlQUFlLENBQUM7QUFDdkIsT0FBTyxFQUFDLGNBQWMsRUFBQyxNQUFNLDBCQUEwQixDQUFDO0FBQ3hELE9BQU8sRUFBQyxRQUFRLEVBQUUsT0FBTyxFQUFFLFFBQVEsRUFBRSxNQUFNLEVBQUMsTUFBTSxlQUFlLENBQUM7QUFDbEUsT0FBTyxFQUFDLGFBQWEsRUFBQyxNQUFNLDZCQUE2QixDQUFDO0FBRTFELE9BQU8sRUFBQyxhQUFhLEVBQUMsTUFBTSxVQUFVLENBQUM7QUFDdkMsT0FBTyxFQUFDLEtBQUssRUFBYSxNQUFNLFNBQVMsQ0FBQztBQW9CbkMsSUFBTSxJQUFJLEdBQVYsTUFBTSxJQUFLLFNBQVEsS0FBSztJQTZGN0IsWUFBbUIsS0FBZ0I7UUFDakMsS0FBSyxDQUFDLEtBQUssQ0FBQyxDQUFDO0lBQ2YsQ0FBQztJQUdNLE9BQU87UUFDWixPQUFPLGNBQWMsQ0FDbkIsSUFBSSxDQUFDLFlBQVksRUFBRSxFQUNuQixJQUFJLENBQUMsTUFBTSxFQUFFLEVBQ2IsSUFBSSxDQUFDLGFBQWEsRUFBRSxFQUNwQixJQUFJLENBQUMsZUFBZSxFQUFFLENBQ3ZCLENBQUM7SUFDSixDQUFDO0lBRWtCLFdBQVc7UUFDNUIsT0FBTztZQUNMLENBQUMsRUFBRSxJQUFJLENBQUMsS0FBSyxDQUFDLE9BQU8sQ0FBQyxNQUFNLEVBQUU7WUFDOUIsQ0FBQyxFQUFFLElBQUksQ0FBQyxNQUFNLENBQUMsT0FBTyxDQUFDLE1BQU0sRUFBRTtTQUNoQyxDQUFDO0lBQ0osQ0FBQztJQUVrQixvQkFBb0IsQ0FBQyxHQUFTO1FBQy9DLE9BQU8sR0FBRyxDQUFDO0lBQ2IsQ0FBQztJQUVrQixZQUFZO1FBQzdCLE9BQU8sSUFBSSxDQUFDLGdCQUFnQixDQUFDLElBQUksQ0FBQyxZQUFZLEVBQUUsQ0FBQyxDQUFDO0lBQ3BELENBQUM7SUFFa0IsT0FBTztRQUN4QixJQUFJLElBQUksQ0FBQyxlQUFlLEVBQUUsRUFBRSxDQUFDO1lBQzNCLE9BQU8sSUFBSSxDQUFDLGdCQUFnQixFQUFFLENBQUMsSUFBSSxDQUFDO1FBQ3RDLENBQUM7UUFFRCxNQUFNLElBQUksR0FBRyxJQUFJLE1BQU0sRUFBRSxDQUFDO1FBQzFCLE1BQU0sTUFBTSxHQUFHLElBQUksQ0FBQyxNQUFNLEVBQUUsQ0FBQztRQUM3QixNQUFNLGFBQWEsR0FBRyxJQUFJLENBQUMsYUFBYSxFQUFFLENBQUM7UUFDM0MsTUFBTSxlQUFlLEdBQUcsSUFBSSxDQUFDLGVBQWUsRUFBRSxDQUFDO1FBQy9DLE1BQU0sR0FBRyxHQUFHLElBQUksQ0FBQyxnQkFBZ0IsQ0FBQyxJQUFJLENBQUMsSUFBSSxFQUFFLENBQUMsQ0FBQztRQUMvQyxhQUFhLENBQUMsSUFBSSxFQUFFLEdBQUcsRUFBRSxNQUFNLEVBQUUsYUFBYSxFQUFFLGVBQWUsQ0FBQyxDQUFDO1FBRWpFLE9BQU8sSUFBSSxDQUFDO0lBQ2QsQ0FBQztJQUVrQixZQUFZO1FBQzdCLE9BQU8sS0FBSyxDQUFDLFlBQVksRUFBRSxDQUFDLE1BQU0sQ0FBQyxJQUFJLENBQUMsVUFBVSxFQUFFLENBQUMsQ0FBQztJQUN4RCxDQUFDO0lBRWtCLGFBQWE7UUFDOUIsTUFBTSxJQUFJLEdBQUcsSUFBSSxNQUFNLEVBQUUsQ0FBQztRQUMxQixNQUFNLFVBQVUsR0FBRyxJQUFJLENBQUMsVUFBVSxFQUFFLENBQUM7UUFDckMsTUFBTSxNQUFNLEdBQUcsSUFBSSxDQUFDLE1BQU0sRUFBRSxDQUFDLFNBQVMsQ0FBQyxVQUFVLENBQUMsQ0FBQztRQUNuRCxNQUFNLGFBQWEsR0FBRyxJQUFJLENBQUMsYUFBYSxFQUFFLENBQUM7UUFDM0MsTUFBTSxlQUFlLEdBQUcsSUFBSSxDQUFDLGVBQWUsRUFBRSxDQUFDO1FBQy9DLE1BQU0sR0FBRyxHQUFHLElBQUksQ0FBQyxnQkFBZ0IsQ0FBQyxJQUFJLENBQUMsSUFBSSxFQUFFLENBQUMsQ0FBQyxNQUFNLENBQUMsVUFBVSxDQUFDLENBQUM7UUFDbEUsYUFBYSxDQUFDLElBQUksRUFBRSxHQUFHLEVBQUUsTUFBTSxFQUFFLGFBQWEsRUFBRSxlQUFlLENBQUMsQ0FBQztRQUVqRSxPQUFPLElBQUksQ0FBQztJQUNkLENBQUM7Q0FDRixDQUFBO0FBaEh5QjtJQUR2QixhQUFhLENBQUMsUUFBUSxDQUFDO29DQUM0QjtBQTJCNUI7SUFGdkIsT0FBTyxDQUFDLEtBQUssQ0FBQztJQUNkLE1BQU0sRUFBRTsyQ0FDMEQ7QUF3QjNDO0lBRnZCLE9BQU8sQ0FBQyxHQUFHLENBQUM7SUFDWixNQUFNLEVBQUU7NkNBQzJEO0FBTzdEO0lBRE4sUUFBUSxFQUFFO21DQVFWO0FBekdVLElBQUk7SUFEaEIsUUFBUSxDQUFDLE1BQU0sQ0FBQztHQUNKLElBQUksQ0F3SmhCIn0=
+__decorate([
+    spacingSignal('radius')
+], Rect.prototype, "radius", void 0);
+__decorate([
+    initial(false),
+    signal()
+], Rect.prototype, "smoothCorners", void 0);
+__decorate([
+    initial(0.6),
+    signal()
+], Rect.prototype, "cornerSharpness", void 0);
+__decorate([
+    computed()
+], Rect.prototype, "profile", null);
+Rect = __decorate([
+    nodeName('Rect')
+], Rect);
+export { Rect };
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiUmVjdC5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uL3NyYy9saWIvY29tcG9uZW50cy9SZWN0LnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiI7Ozs7OztBQUFBLE9BQU8sRUFDTCxJQUFJLEdBTUwsTUFBTSxlQUFlLENBQUM7QUFDdkIsT0FBTyxFQUFDLGNBQWMsRUFBQyxNQUFNLDBCQUEwQixDQUFDO0FBQ3hELE9BQU8sRUFBQyxRQUFRLEVBQUUsT0FBTyxFQUFFLFFBQVEsRUFBRSxNQUFNLEVBQUMsTUFBTSxlQUFlLENBQUM7QUFDbEUsT0FBTyxFQUFDLGFBQWEsRUFBQyxNQUFNLDZCQUE2QixDQUFDO0FBRTFELE9BQU8sRUFBQyxhQUFhLEVBQUMsTUFBTSxVQUFVLENBQUM7QUFDdkMsT0FBTyxFQUFDLEtBQUssRUFBYSxNQUFNLFNBQVMsQ0FBQztBQW9CbkMsSUFBTSxJQUFJLEdBQVYsTUFBTSxJQUFLLFNBQVEsS0FBSztJQTZGN0IsWUFBbUIsS0FBZ0I7UUFDakMsS0FBSyxDQUFDLEtBQUssQ0FBQyxDQUFDO0lBQ2YsQ0FBQztJQUdNLE9BQU87UUFDWixPQUFPLGNBQWMsQ0FDbkIsSUFBSSxDQUFDLFlBQVksRUFBRSxFQUNuQixJQUFJLENBQUMsTUFBTSxFQUFFLEVBQ2IsSUFBSSxDQUFDLGFBQWEsRUFBRSxFQUNwQixJQUFJLENBQUMsZUFBZSxFQUFFLENBQ3ZCLENBQUM7SUFDSixDQUFDO0lBRWtCLFdBQVc7UUFDNUIsT0FBTztZQUNMLENBQUMsRUFBRSxJQUFJLENBQUMsS0FBSyxDQUFDLE9BQU8sQ0FBQyxNQUFNLEVBQUU7WUFDOUIsQ0FBQyxFQUFFLElBQUksQ0FBQyxNQUFNLENBQUMsT0FBTyxDQUFDLE1BQU0sRUFBRTtTQUNoQyxDQUFDO0lBQ0osQ0FBQztJQUVrQixvQkFBb0IsQ0FBQyxHQUFTO1FBQy9DLE9BQU8sR0FBRyxDQUFDO0lBQ2IsQ0FBQztJQUVrQixZQUFZO1FBQzdCLE9BQU8sSUFBSSxDQUFDLGdCQUFnQixDQUFDLElBQUksQ0FBQyxZQUFZLEVBQUUsQ0FBQyxDQUFDO0lBQ3BELENBQUM7SUFFa0IsT0FBTztRQUN4QixJQUFJLElBQUksQ0FBQyxlQUFlLEVBQUUsRUFBRSxDQUFDO1lBQzNCLE9BQU8sSUFBSSxDQUFDLGdCQUFnQixFQUFFLENBQUMsSUFBSSxDQUFDO1FBQ3RDLENBQUM7UUFFRCxNQUFNLElBQUksR0FBRyxJQUFJLE1BQU0sRUFBRSxDQUFDO1FBQzFCLE1BQU0sTUFBTSxHQUFHLElBQUksQ0FBQyxNQUFNLEVBQUUsQ0FBQztRQUM3QixNQUFNLGFBQWEsR0FBRyxJQUFJLENBQUMsYUFBYSxFQUFFLENBQUM7UUFDM0MsTUFBTSxlQUFlLEdBQUcsSUFBSSxDQUFDLGVBQWUsRUFBRSxDQUFDO1FBQy9DLE1BQU0sR0FBRyxHQUFHLElBQUksQ0FBQyxnQkFBZ0IsQ0FBQyxJQUFJLENBQUMsSUFBSSxFQUFFLENBQUMsQ0FBQztRQUMvQyxhQUFhLENBQUMsSUFBSSxFQUFFLEdBQUcsRUFBRSxNQUFNLEVBQUUsYUFBYSxFQUFFLGVBQWUsQ0FBQyxDQUFDO1FBRWpFLE9BQU8sSUFBSSxDQUFDO0lBQ2QsQ0FBQztJQUVrQixZQUFZO1FBQzdCLE9BQU8sS0FBSyxDQUFDLFlBQVksRUFBRSxDQUFDLE1BQU0sQ0FBQyxJQUFJLENBQUMsVUFBVSxFQUFFLENBQUMsQ0FBQztJQUN4RCxDQUFDO0lBRWtCLGFBQWE7UUFDOUIsTUFBTSxJQUFJLEdBQUcsSUFBSSxNQUFNLEVBQUUsQ0FBQztRQUMxQixNQUFNLFVBQVUsR0FBRyxJQUFJLENBQUMsVUFBVSxFQUFFLENBQUM7UUFDckMsTUFBTSxNQUFNLEdBQUcsSUFBSSxDQUFDLE1BQU0sRUFBRSxDQUFDLFNBQVMsQ0FBQyxVQUFVLENBQUMsQ0FBQztRQUNuRCxNQUFNLGFBQWEsR0FBRyxJQUFJLENBQUMsYUFBYSxFQUFFLENBQUM7UUFDM0MsTUFBTSxlQUFlLEdBQUcsSUFBSSxDQUFDLGVBQWUsRUFBRSxDQUFDO1FBQy9DLE1BQU0sR0FBRyxHQUFHLElBQUksQ0FBQyxnQkFBZ0IsQ0FBQyxJQUFJLENBQUMsSUFBSSxFQUFFLENBQUMsQ0FBQyxNQUFNLENBQUMsVUFBVSxDQUFDLENBQUM7UUFDbEUsYUFBYSxDQUFDLElBQUksRUFBRSxHQUFHLEVBQUUsTUFBTSxFQUFFLGFBQWEsRUFBRSxlQUFlLENBQUMsQ0FBQztRQUVqRSxPQUFPLElBQUksQ0FBQztJQUNkLENBQUM7Q0FDRixDQUFBO0FBaEh5QjtJQUR2QixhQUFhLENBQUMsUUFBUSxDQUFDO29DQUM0QjtBQTJCNUI7SUFGdkIsT0FBTyxDQUFDLEtBQUssQ0FBQztJQUNkLE1BQU0sRUFBRTsyQ0FDMEQ7QUF3QjNDO0lBRnZCLE9BQU8sQ0FBQyxHQUFHLENBQUM7SUFDWixNQUFNLEVBQUU7NkNBQzJEO0FBTzdEO0lBRE4sUUFBUSxFQUFFO21DQVFWO0FBekdVLElBQUk7SUFEaEIsUUFBUSxDQUFDLE1BQU0sQ0FBQztHQUNKLElBQUksQ0F3SmhCIn0=