@twick/2d 0.13.0 → 0.14.2

package/src/lib/components/Rect.ts

@@ -1,187 +1,187 @@
-import type {
-  PossibleSpacing,
-  SerializedVector2,
-  SignalValue,
-  SimpleSignal,
-  SpacingSignal,
-} from '@twick/core';
-import {BBox} from '@twick/core';
-import {getRectProfile} from '../curves/getRectProfile';
-import {computed, initial, nodeName, signal} from '../decorators';
-import {spacingSignal} from '../decorators/spacingSignal';
-import type {DesiredLength} from '../partials';
-import {drawRoundRect} from '../utils';
-import type {CurveProps} from './Curve';
-import {Curve} 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>;
-}
-
-@nodeName('Rect')
-export 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'}
-   * />
-   * ```
-   */
-  @spacingSignal('radius')
-  public declare 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}
-   * />
-   * ```
-   */
-  @initial(false)
-  @signal()
-  public declare 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}
-   * />
-   * ```
-   */
-  @initial(0.6)
-  @signal()
-  public declare readonly cornerSharpness: SimpleSignal<number, this>;
-
-  public constructor(props: RectProps) {
-    super(props);
-  }
-
-  @computed()
-  public profile() {
-    return getRectProfile(
-      this.childrenBBox(),
-      this.radius(),
-      this.smoothCorners(),
-      this.cornerSharpness(),
-    );
-  }
-
-  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 getPath(): Path2D {
-    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;
-  }
-
-  protected override getCacheBBox(): BBox {
-    return super.getCacheBBox().expand(this.rippleSize());
-  }
-
-  protected override getRipplePath(): Path2D {
-    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;
-  }
-}
+import type {
+  PossibleSpacing,
+  SerializedVector2,
+  SignalValue,
+  SimpleSignal,
+  SpacingSignal,
+} from '@twick/core';
+import {BBox} from '@twick/core';
+import {getRectProfile} from '../curves/getRectProfile';
+import {computed, initial, nodeName, signal} from '../decorators';
+import {spacingSignal} from '../decorators/spacingSignal';
+import type {DesiredLength} from '../partials';
+import {drawRoundRect} from '../utils';
+import type {CurveProps} from './Curve';
+import {Curve} 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>;
+}
+
+@nodeName('Rect')
+export 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'}
+   * />
+   * ```
+   */
+  @spacingSignal('radius')
+  public declare 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}
+   * />
+   * ```
+   */
+  @initial(false)
+  @signal()
+  public declare 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}
+   * />
+   * ```
+   */
+  @initial(0.6)
+  @signal()
+  public declare readonly cornerSharpness: SimpleSignal<number, this>;
+
+  public constructor(props: RectProps) {
+    super(props);
+  }
+
+  @computed()
+  public profile() {
+    return getRectProfile(
+      this.childrenBBox(),
+      this.radius(),
+      this.smoothCorners(),
+      this.cornerSharpness(),
+    );
+  }
+
+  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 getPath(): Path2D {
+    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;
+  }
+
+  protected override getCacheBBox(): BBox {
+    return super.getCacheBBox().expand(this.rippleSize());
+  }
+
+  protected override getRipplePath(): Path2D {
+    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;
+  }
+}

package/src/lib/components/Rive.ts

@@ -1,156 +1,156 @@
-import type {SignalValue, SimpleSignal} from '@twick/core';
-import {BBox, useThread} from '@twick/core';
-import type {
-  Artboard,
-  File,
-  LinearAnimationInstance,
-  Renderer,
-  RiveCanvas,
-} from '@rive-app/canvas-advanced';
-import RiveInitializer from '@rive-app/canvas-advanced';
-import {computed, initial, nodeName, signal} from '../decorators';
-import type {RectProps} from './Rect';
-import {Rect} from './Rect';
-
-export interface RiveProps extends RectProps {
-  src?: SignalValue<string>;
-  artboardId?: SignalValue<string | number>;
-  animationId?: SignalValue<string | number>;
-}
-
-interface RiveInstance {
-  rive: RiveCanvas;
-  renderer: Renderer;
-  artboard: Artboard;
-  animation: LinearAnimationInstance;
-  canvas: HTMLCanvasElement;
-}
-
-@nodeName('Rive')
-export class Rive extends Rect {
-  @signal()
-  public declare readonly src: SimpleSignal<string, this>;
-
-  @initial(0)
-  @signal()
-  public declare readonly artboardId: SimpleSignal<number | string, this>;
-
-  @initial(0)
-  @signal()
-  public declare readonly animationId: SimpleSignal<number | string, this>;
-
-  @initial(0)
-  @signal()
-  protected declare readonly time: SimpleSignal<number, this>;
-
-  protected currentTime: number = 0;
-  protected lastTime: number = 0;
-
-  public constructor(props: RiveProps) {
-    super(props);
-
-    const time = useThread().time;
-    const start = time();
-    this.time(() => time() - start);
-  }
-
-  @computed()
-  private async rive(): Promise<RiveInstance> {
-    const src = this.src();
-    const rive = await RiveInitializer({
-      locateFile: () => {
-        return '/@rive-wasm';
-      },
-    });
-    const canvas = document.createElement('canvas');
-    canvas.width = this.width();
-    canvas.height = this.height();
-
-    const renderer = rive.makeRenderer(canvas);
-    const bytes = await (await fetch(new Request(src))).arrayBuffer();
-    const file = (await rive.load(new Uint8Array(bytes))) as File;
-
-    const artboardId = this.artboardId();
-    const artboard = this.getArtboard(artboardId, file);
-
-    const animationId = this.animationId();
-    const animation = this.getAnimation(animationId, artboard, rive);
-
-    return {rive, renderer, artboard, animation, canvas};
-  }
-
-  protected override async draw(context: CanvasRenderingContext2D) {
-    this.drawShape(context);
-
-    this.currentTime = this.time();
-    const timeToAdvance = this.currentTime - this.lastTime;
-    this.lastTime = this.currentTime;
-
-    const {rive, renderer, canvas, artboard, animation} = await this.rive();
-    const box = BBox.fromSizeCentered(this.computedSize());
-
-    const renderPromise = new Promise<void>(resolve => {
-      function renderLoop() {
-        renderer.clear();
-        animation.advance(timeToAdvance);
-        animation.apply(1);
-
-        artboard.advance(timeToAdvance);
-
-        renderer.save();
-        renderer.align(
-          rive.Fit.fill,
-          rive.Alignment.center,
-          {
-            minX: 0,
-            minY: 0,
-            maxX: canvas.width,
-            maxY: canvas.height,
-          },
-          artboard.bounds,
-        );
-
-        artboard.draw(renderer);
-        renderer.restore();
-        resolve();
-      }
-
-      rive.requestAnimationFrame(renderLoop);
-    });
-
-    await renderPromise;
-
-    context.drawImage(canvas, box.x, box.y, box.width, box.height);
-    if (this.clip()) {
-      context.clip(this.getPath());
-    }
-
-    await this.drawChildren(context);
-  }
-
-  private getArtboard(artboardId: string | number, file: File): Artboard {
-    if (typeof artboardId === 'string') {
-      return file.artboardByName(artboardId);
-    }
-    if (typeof artboardId === 'number') {
-      return file.artboardByIndex(artboardId);
-    }
-    return file.defaultArtboard();
-  }
-
-  private getAnimation(
-    animationId: string | number,
-    artboard: Artboard,
-    rive: RiveCanvas,
-  ): LinearAnimationInstance {
-    let animation;
-    if (typeof animationId === 'number') {
-      animation = artboard.animationByIndex(animationId);
-    } else if (typeof animationId === 'string') {
-      animation = artboard.animationByName(animationId);
-    } else {
-      animation = artboard.animationByIndex(0);
-    }
-    return new rive.LinearAnimationInstance(animation, artboard);
-  }
-}
+import type {SignalValue, SimpleSignal} from '@twick/core';
+import {BBox, useThread} from '@twick/core';
+import type {
+  Artboard,
+  File,
+  LinearAnimationInstance,
+  Renderer,
+  RiveCanvas,
+} from '@rive-app/canvas-advanced';
+import RiveInitializer from '@rive-app/canvas-advanced';
+import {computed, initial, nodeName, signal} from '../decorators';
+import type {RectProps} from './Rect';
+import {Rect} from './Rect';
+
+export interface RiveProps extends RectProps {
+  src?: SignalValue<string>;
+  artboardId?: SignalValue<string | number>;
+  animationId?: SignalValue<string | number>;
+}
+
+interface RiveInstance {
+  rive: RiveCanvas;
+  renderer: Renderer;
+  artboard: Artboard;
+  animation: LinearAnimationInstance;
+  canvas: HTMLCanvasElement;
+}
+
+@nodeName('Rive')
+export class Rive extends Rect {
+  @signal()
+  public declare readonly src: SimpleSignal<string, this>;
+
+  @initial(0)
+  @signal()
+  public declare readonly artboardId: SimpleSignal<number | string, this>;
+
+  @initial(0)
+  @signal()
+  public declare readonly animationId: SimpleSignal<number | string, this>;
+
+  @initial(0)
+  @signal()
+  protected declare readonly time: SimpleSignal<number, this>;
+
+  protected currentTime: number = 0;
+  protected lastTime: number = 0;
+
+  public constructor(props: RiveProps) {
+    super(props);
+
+    const time = useThread().time;
+    const start = time();
+    this.time(() => time() - start);
+  }
+
+  @computed()
+  private async rive(): Promise<RiveInstance> {
+    const src = this.src();
+    const rive = await RiveInitializer({
+      locateFile: () => {
+        return '/@rive-wasm';
+      },
+    });
+    const canvas = document.createElement('canvas');
+    canvas.width = this.width();
+    canvas.height = this.height();
+
+    const renderer = rive.makeRenderer(canvas);
+    const bytes = await (await fetch(new Request(src))).arrayBuffer();
+    const file = (await rive.load(new Uint8Array(bytes))) as File;
+
+    const artboardId = this.artboardId();
+    const artboard = this.getArtboard(artboardId, file);
+
+    const animationId = this.animationId();
+    const animation = this.getAnimation(animationId, artboard, rive);
+
+    return {rive, renderer, artboard, animation, canvas};
+  }
+
+  protected override async draw(context: CanvasRenderingContext2D) {
+    this.drawShape(context);
+
+    this.currentTime = this.time();
+    const timeToAdvance = this.currentTime - this.lastTime;
+    this.lastTime = this.currentTime;
+
+    const {rive, renderer, canvas, artboard, animation} = await this.rive();
+    const box = BBox.fromSizeCentered(this.computedSize());
+
+    const renderPromise = new Promise<void>(resolve => {
+      function renderLoop() {
+        renderer.clear();
+        animation.advance(timeToAdvance);
+        animation.apply(1);
+
+        artboard.advance(timeToAdvance);
+
+        renderer.save();
+        renderer.align(
+          rive.Fit.fill,
+          rive.Alignment.center,
+          {
+            minX: 0,
+            minY: 0,
+            maxX: canvas.width,
+            maxY: canvas.height,
+          },
+          artboard.bounds,
+        );
+
+        artboard.draw(renderer);
+        renderer.restore();
+        resolve();
+      }
+
+      rive.requestAnimationFrame(renderLoop);
+    });
+
+    await renderPromise;
+
+    context.drawImage(canvas, box.x, box.y, box.width, box.height);
+    if (this.clip()) {
+      context.clip(this.getPath());
+    }
+
+    await this.drawChildren(context);
+  }
+
+  private getArtboard(artboardId: string | number, file: File): Artboard {
+    if (typeof artboardId === 'string') {
+      return file.artboardByName(artboardId);
+    }
+    if (typeof artboardId === 'number') {
+      return file.artboardByIndex(artboardId);
+    }
+    return file.defaultArtboard();
+  }
+
+  private getAnimation(
+    animationId: string | number,
+    artboard: Artboard,
+    rive: RiveCanvas,
+  ): LinearAnimationInstance {
+    let animation;
+    if (typeof animationId === 'number') {
+      animation = artboard.animationByIndex(animationId);
+    } else if (typeof animationId === 'string') {
+      animation = artboard.animationByName(animationId);
+    } else {
+      animation = artboard.animationByIndex(0);
+    }
+    return new rive.LinearAnimationInstance(animation, artboard);
+  }
+}