@twick/2d 0.13.0 → 0.14.2

package/src/lib/components/Path.ts

@@ -1,137 +1,137 @@
-import type {
-  SignalValue,
-  SimpleSignal,
-  TimingFunction,
-  Vector2,
-} from '@twick/core';
-import {
-  BBox,
-  createSignal,
-  isReactive,
-  threadable,
-  transformVectorAsPoint,
-  tween,
-} from '@twick/core';
-import type {CurveProfile} from '../curves';
-import {createCurveProfileLerp} from '../curves/createCurveProfileLerp';
-import {getPathProfile} from '../curves/getPathProfile';
-import {computed, signal} from '../decorators';
-import {drawLine, drawPivot} from '../utils';
-import type {CurveProps} from './Curve';
-import {Curve} from './Curve';
-
-export interface PathProps extends CurveProps {
-  data: SignalValue<string>;
-}
-
-export class Path extends Curve {
-  private currentProfile = createSignal<CurveProfile | null>(null);
-  @signal()
-  public declare readonly data: SimpleSignal<string, this>;
-
-  public constructor(props: PathProps) {
-    super(props);
-    this.canHaveSubpath = true;
-  }
-
-  @computed()
-  public override profile(): CurveProfile {
-    return this.currentProfile() ?? getPathProfile(this.data());
-  }
-
-  protected override childrenBBox() {
-    const points = this.profile().segments.flatMap(segment => segment.points);
-    return BBox.fromPoints(...points);
-  }
-
-  protected override lineWidthCoefficient(): number {
-    const join = this.lineJoin();
-
-    let coefficient = super.lineWidthCoefficient();
-
-    if (join === 'miter') {
-      const {minSin} = this.profile();
-      if (minSin > 0) {
-        coefficient = Math.max(coefficient, 0.5 / minSin);
-      }
-    }
-
-    return coefficient;
-  }
-
-  protected override processSubpath(
-    path: Path2D,
-    startPoint: Vector2 | null,
-    endPoint: Vector2 | null,
-  ): void {
-    if (startPoint && endPoint && startPoint.equals(endPoint)) {
-      path.closePath();
-    }
-  }
-
-  @threadable()
-  protected *tweenData(
-    newPath: SignalValue<string>,
-    time: number,
-    timingFunction: TimingFunction,
-  ) {
-    const fromProfile = this.profile();
-    const toProfile = getPathProfile(isReactive(newPath) ? newPath() : newPath);
-
-    const interpolator = createCurveProfileLerp(fromProfile, toProfile);
-
-    this.currentProfile(fromProfile);
-    yield* tween(
-      time,
-      value => {
-        const progress = timingFunction(value);
-        this.currentProfile(interpolator(progress));
-      },
-      () => {
-        this.currentProfile(null);
-        this.data(newPath);
-      },
-    );
-  }
-
-  public override drawOverlay(
-    context: CanvasRenderingContext2D,
-    matrix: DOMMatrix,
-  ): void {
-    const box = this.childrenBBox().transformCorners(matrix);
-    const size = this.computedSize();
-    const offsetVector = size.mul(this.offset()).scale(0.5);
-    const offset = transformVectorAsPoint(offsetVector, matrix);
-    const segments = this.profile().segments;
-
-    context.lineWidth = 1;
-    context.strokeStyle = 'white';
-    context.fillStyle = 'white';
-
-    context.save();
-    context.setTransform(matrix);
-    let endPoint: Vector2 | null = null;
-    let path = new Path2D();
-
-    for (const segment of segments) {
-      if (endPoint && !segment.getPoint(0).position.equals(endPoint)) {
-        context.stroke(path);
-        path = new Path2D();
-        endPoint = null;
-      }
-      const [, end] = segment.draw(path, 0, 1, endPoint == null);
-      endPoint = end.position;
-    }
-    context.stroke(path);
-    context.restore();
-
-    context.beginPath();
-    drawPivot(context, offset);
-    context.stroke();
-
-    context.beginPath();
-    drawLine(context, box);
-    context.closePath();
-    context.stroke();
-  }
-}
+import type {
+  SignalValue,
+  SimpleSignal,
+  TimingFunction,
+  Vector2,
+} from '@twick/core';
+import {
+  BBox,
+  createSignal,
+  isReactive,
+  threadable,
+  transformVectorAsPoint,
+  tween,
+} from '@twick/core';
+import type {CurveProfile} from '../curves';
+import {createCurveProfileLerp} from '../curves/createCurveProfileLerp';
+import {getPathProfile} from '../curves/getPathProfile';
+import {computed, signal} from '../decorators';
+import {drawLine, drawPivot} from '../utils';
+import type {CurveProps} from './Curve';
+import {Curve} from './Curve';
+
+export interface PathProps extends CurveProps {
+  data: SignalValue<string>;
+}
+
+export class Path extends Curve {
+  private currentProfile = createSignal<CurveProfile | null>(null);
+  @signal()
+  public declare readonly data: SimpleSignal<string, this>;
+
+  public constructor(props: PathProps) {
+    super(props);
+    this.canHaveSubpath = true;
+  }
+
+  @computed()
+  public override profile(): CurveProfile {
+    return this.currentProfile() ?? getPathProfile(this.data());
+  }
+
+  protected override childrenBBox() {
+    const points = this.profile().segments.flatMap(segment => segment.points);
+    return BBox.fromPoints(...points);
+  }
+
+  protected override lineWidthCoefficient(): number {
+    const join = this.lineJoin();
+
+    let coefficient = super.lineWidthCoefficient();
+
+    if (join === 'miter') {
+      const {minSin} = this.profile();
+      if (minSin > 0) {
+        coefficient = Math.max(coefficient, 0.5 / minSin);
+      }
+    }
+
+    return coefficient;
+  }
+
+  protected override processSubpath(
+    path: Path2D,
+    startPoint: Vector2 | null,
+    endPoint: Vector2 | null,
+  ): void {
+    if (startPoint && endPoint && startPoint.equals(endPoint)) {
+      path.closePath();
+    }
+  }
+
+  @threadable()
+  protected *tweenData(
+    newPath: SignalValue<string>,
+    time: number,
+    timingFunction: TimingFunction,
+  ) {
+    const fromProfile = this.profile();
+    const toProfile = getPathProfile(isReactive(newPath) ? newPath() : newPath);
+
+    const interpolator = createCurveProfileLerp(fromProfile, toProfile);
+
+    this.currentProfile(fromProfile);
+    yield* tween(
+      time,
+      value => {
+        const progress = timingFunction(value);
+        this.currentProfile(interpolator(progress));
+      },
+      () => {
+        this.currentProfile(null);
+        this.data(newPath);
+      },
+    );
+  }
+
+  public override drawOverlay(
+    context: CanvasRenderingContext2D,
+    matrix: DOMMatrix,
+  ): void {
+    const box = this.childrenBBox().transformCorners(matrix);
+    const size = this.computedSize();
+    const offsetVector = size.mul(this.offset()).scale(0.5);
+    const offset = transformVectorAsPoint(offsetVector, matrix);
+    const segments = this.profile().segments;
+
+    context.lineWidth = 1;
+    context.strokeStyle = 'white';
+    context.fillStyle = 'white';
+
+    context.save();
+    context.setTransform(matrix);
+    let endPoint: Vector2 | null = null;
+    let path = new Path2D();
+
+    for (const segment of segments) {
+      if (endPoint && !segment.getPoint(0).position.equals(endPoint)) {
+        context.stroke(path);
+        path = new Path2D();
+        endPoint = null;
+      }
+      const [, end] = segment.draw(path, 0, 1, endPoint == null);
+      endPoint = end.position;
+    }
+    context.stroke(path);
+    context.restore();
+
+    context.beginPath();
+    drawPivot(context, offset);
+    context.stroke();
+
+    context.beginPath();
+    drawLine(context, box);
+    context.closePath();
+    context.stroke();
+  }
+}

package/src/lib/components/Polygon.ts

@@ -1,171 +1,171 @@
-import type {SerializedVector2, SignalValue, SimpleSignal} from '@twick/core';
-import {BBox, Vector2} from '@twick/core';
-import type {CurveProfile} from '../curves';
-import {getPolylineProfile} from '../curves';
-import {computed, initial, signal} from '../decorators';
-import type {DesiredLength} from '../partials';
-import {drawPolygon} from '../utils';
-import type {CurveProps} from './Curve';
-import {Curve} from './Curve';
-
-export interface PolygonProps extends CurveProps {
-  /**
-   * {@inheritDoc Polygon.sides}
-   */
-  sides?: SignalValue<number>;
-  /**
-   * {@inheritDoc Polygon.radius}
-   */
-  radius?: SignalValue<number>;
-}
-
-/**
- * A node for drawing regular polygons.
- *
- * @remarks
- * This node can be used to render shapes such as: triangle, pentagon,
- * hexagon and more.
- *
- * Note that the polygon is inscribed in a circle defined by the height
- * and width. If height and width are unequal, the polygon is inscribed
- * in the resulting ellipse.
- *
- * Since the polygon is inscribed in the circle, the actual displayed
- * height and width may differ somewhat from the bounding rectangle. This
- * will be particularly noticeable if the number of sides is low, e.g. for a
- * triangle.
- *
- * @preview
- * ```tsx editor
- * // snippet Polygon
- * import {makeScene2D, Polygon} from '@twick/2d';
- * import {createRef} from '@twick/core';
- *
- * export default makeScene2D(function* (view) {
- *   const ref = createRef<Polygon>();
- *   view.add(
- *     <Polygon
- *       ref={ref}
- *       sides={6}
- *       size={160}
- *       fill={'lightseagreen'}
- *     />
- *   );
- *
- *   yield* ref().sides(3, 2).to(6, 2);
- * });
- *
- * // snippet Pentagon outline
- * import {makeScene2D, Polygon} from '@twick/2d';
- *
- * export default makeScene2D(function* (view) {
- *   view.add(
- *     <Polygon
- *       sides={5}
- *       size={160}
- *       radius={30}
- *       stroke={'lightblue'}
- *       lineWidth={8}
- *     />
- *   );
- * });
- * ```
- */
-export class Polygon extends Curve {
-  /**
-   * The number of sides of the polygon.
-   *
-   * @remarks
-   * For example, a value of 6 creates a hexagon.
-   *
-   * @example
-   * ```tsx
-   * <Polygon
-   *   size={320}
-   *   sides={7}
-   *   stroke={'#fff'}
-   *   lineWidth={8}
-   *   fill={'lightseagreen'}
-   * />
-   * ```
-   */
-  @initial(6)
-  @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);
-  }
-
-  @computed()
-  public override profile(): CurveProfile {
-    const sides = this.sides();
-    const radius = this.radius();
-
-    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 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 box = BBox.fromSizeCentered(this.size()).expand(expand);
-    drawPolygon(path, box, sides);
-    return path;
-  }
-}
+import type {SerializedVector2, SignalValue, SimpleSignal} from '@twick/core';
+import {BBox, Vector2} from '@twick/core';
+import type {CurveProfile} from '../curves';
+import {getPolylineProfile} from '../curves';
+import {computed, initial, signal} from '../decorators';
+import type {DesiredLength} from '../partials';
+import {drawPolygon} from '../utils';
+import type {CurveProps} from './Curve';
+import {Curve} from './Curve';
+
+export interface PolygonProps extends CurveProps {
+  /**
+   * {@inheritDoc Polygon.sides}
+   */
+  sides?: SignalValue<number>;
+  /**
+   * {@inheritDoc Polygon.radius}
+   */
+  radius?: SignalValue<number>;
+}
+
+/**
+ * A node for drawing regular polygons.
+ *
+ * @remarks
+ * This node can be used to render shapes such as: triangle, pentagon,
+ * hexagon and more.
+ *
+ * Note that the polygon is inscribed in a circle defined by the height
+ * and width. If height and width are unequal, the polygon is inscribed
+ * in the resulting ellipse.
+ *
+ * Since the polygon is inscribed in the circle, the actual displayed
+ * height and width may differ somewhat from the bounding rectangle. This
+ * will be particularly noticeable if the number of sides is low, e.g. for a
+ * triangle.
+ *
+ * @preview
+ * ```tsx editor
+ * // snippet Polygon
+ * import {makeScene2D, Polygon} from '@twick/2d';
+ * import {createRef} from '@twick/core';
+ *
+ * export default makeScene2D(function* (view) {
+ *   const ref = createRef<Polygon>();
+ *   view.add(
+ *     <Polygon
+ *       ref={ref}
+ *       sides={6}
+ *       size={160}
+ *       fill={'lightseagreen'}
+ *     />
+ *   );
+ *
+ *   yield* ref().sides(3, 2).to(6, 2);
+ * });
+ *
+ * // snippet Pentagon outline
+ * import {makeScene2D, Polygon} from '@twick/2d';
+ *
+ * export default makeScene2D(function* (view) {
+ *   view.add(
+ *     <Polygon
+ *       sides={5}
+ *       size={160}
+ *       radius={30}
+ *       stroke={'lightblue'}
+ *       lineWidth={8}
+ *     />
+ *   );
+ * });
+ * ```
+ */
+export class Polygon extends Curve {
+  /**
+   * The number of sides of the polygon.
+   *
+   * @remarks
+   * For example, a value of 6 creates a hexagon.
+   *
+   * @example
+   * ```tsx
+   * <Polygon
+   *   size={320}
+   *   sides={7}
+   *   stroke={'#fff'}
+   *   lineWidth={8}
+   *   fill={'lightseagreen'}
+   * />
+   * ```
+   */
+  @initial(6)
+  @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);
+  }
+
+  @computed()
+  public override profile(): CurveProfile {
+    const sides = this.sides();
+    const radius = this.radius();
+
+    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 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 box = BBox.fromSizeCentered(this.size()).expand(expand);
+    drawPolygon(path, box, sides);
+    return path;
+  }
+}