@twick/2d 0.11.0

package/src/lib/components/Path.ts

@@ -0,0 +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();
+  }
+}

package/src/lib/components/Polygon.ts

@@ -0,0 +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;
+  }
+}

package/src/lib/components/QuadBezier.ts

@@ -0,0 +1,100 @@
+import type {PossibleVector2, SignalValue, Vector2Signal} from '@twick/core';
+import {QuadBezierSegment} from '../curves';
+import type {PolynomialSegment} from '../curves/PolynomialSegment';
+import {computed, vector2Signal} from '../decorators';
+import {lineTo, moveTo, quadraticCurveTo} from '../utils';
+import type {BezierOverlayInfo} from './Bezier';
+import {Bezier} from './Bezier';
+import type {CurveProps} from './Curve';
+
+export interface QuadBezierProps extends CurveProps {
+  p0?: SignalValue<PossibleVector2>;
+  p0X?: SignalValue<number>;
+  p0Y?: SignalValue<number>;
+
+  p1?: SignalValue<PossibleVector2>;
+  p1X?: SignalValue<number>;
+  p1Y?: SignalValue<number>;
+
+  p2?: SignalValue<PossibleVector2>;
+  p2X?: SignalValue<number>;
+  p2Y?: SignalValue<number>;
+}
+
+/**
+ * A node for drawing a quadratic Bézier curve.
+ *
+ * @preview
+ * ```tsx editor
+ * import {makeScene2D, QuadBezier} from '@twick/2d';
+ * import {createRef} from '@twick/core';
+ *
+ * export default makeScene2D(function* (view) {
+ *   const bezier = createRef<QuadBezier>();
+ *
+ *   view.add(
+ *     <QuadBezier
+ *       ref={bezier}
+ *       lineWidth={4}
+ *       stroke={'lightseagreen'}
+ *       p0={[-200, 0]}
+ *       p1={[0, -200]}
+ *       p2={[200, 0]}
+ *       end={0}
+ *     />
+ *   );
+ *
+ *   yield* bezier().end(1, 1);
+ *   yield* bezier().start(1, 1).to(0, 1);
+ * });
+ * ```
+ */
+export class QuadBezier extends Bezier {
+  /**
+   * The start point of the Bézier curve.
+   */
+  @vector2Signal('p0')
+  public declare readonly p0: Vector2Signal<this>;
+
+  /**
+   * The control point of the Bézier curve.
+   */
+  @vector2Signal('p1')
+  public declare readonly p1: Vector2Signal<this>;
+
+  /**
+   * The end point of the Bézier curve.
+   */
+  @vector2Signal('p2')
+  public declare readonly p2: Vector2Signal<this>;
+
+  public constructor(props: QuadBezierProps) {
+    super(props);
+  }
+
+  @computed()
+  protected segment(): PolynomialSegment {
+    return new QuadBezierSegment(this.p0(), this.p1(), this.p2());
+  }
+
+  protected overlayInfo(matrix: DOMMatrix): BezierOverlayInfo {
+    const [p0, p1, p2] = this.segment().transformPoints(matrix);
+
+    const curvePath = new Path2D();
+    moveTo(curvePath, p0);
+    quadraticCurveTo(curvePath, p1, p2);
+
+    const handleLinesPath = new Path2D();
+    moveTo(handleLinesPath, p0);
+    lineTo(handleLinesPath, p1);
+    lineTo(handleLinesPath, p2);
+
+    return {
+      curve: curvePath,
+      startPoint: p0,
+      endPoint: p2,
+      controlPoints: [p1],
+      handleLines: handleLinesPath,
+    };
+  }
+}

package/src/lib/components/Ray.ts

@@ -0,0 +1,125 @@
+import type {PossibleVector2, SignalValue, Vector2Signal} from '@twick/core';
+import {BBox, transformVectorAsPoint} from '@twick/core';
+import type {CurveProfile} from '../curves';
+import {LineSegment} from '../curves';
+import {nodeName, vector2Signal} from '../decorators';
+import {arc, drawLine, drawPivot} from '../utils';
+import type {CurveProps} from './Curve';
+import {Curve} from './Curve';
+
+export interface RayProps extends CurveProps {
+  /**
+   * {@inheritDoc Ray.from}
+   */
+  from?: SignalValue<PossibleVector2>;
+  fromX?: SignalValue<number>;
+  fromY?: SignalValue<number>;
+
+  /**
+   * {@inheritDoc Ray.to}
+   */
+  to?: SignalValue<PossibleVector2>;
+  toX?: SignalValue<number>;
+  toY?: SignalValue<number>;
+}
+
+/**
+ * A node for drawing an individual line segment.
+ *
+ * @preview
+ * ```tsx editor
+ * import {makeScene2D} from '@twick/2d';
+ * import {Ray} from '@twick/2d';
+ * import {createRef} from '@twick/core';
+ *
+ * export default makeScene2D(function* (view) {
+ *   const ray = createRef<Ray>();
+ *
+ *   view.add(
+ *     <Ray
+ *       ref={ray}
+ *       lineWidth={8}
+ *       endArrow
+ *       stroke={'lightseagreen'}
+ *       fromX={-200}
+ *       toX={200}
+ *     />,
+ *   );
+ *
+ *   yield* ray().start(1, 1);
+ *   yield* ray().start(0).end(0).start(1, 1);
+ * });
+ * ```
+ */
+@nodeName('Ray')
+export class Ray extends Curve {
+  /**
+   * The starting point of the ray.
+   */
+  @vector2Signal('from')
+  public declare readonly from: Vector2Signal<this>;
+
+  /**
+   * The ending point of the ray.
+   */
+  @vector2Signal('to')
+  public declare readonly to: Vector2Signal<this>;
+
+  public constructor(props: RayProps) {
+    super(props);
+  }
+
+  protected override childrenBBox() {
+    return BBox.fromPoints(this.from(), this.to());
+  }
+
+  public override profile(): CurveProfile {
+    const segment = new LineSegment(this.from(), this.to());
+
+    return {
+      arcLength: segment.arcLength,
+      minSin: 1,
+      segments: [segment],
+    };
+  }
+
+  public override drawOverlay(
+    context: CanvasRenderingContext2D,
+    matrix: DOMMatrix,
+  ) {
+    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 from = transformVectorAsPoint(this.from(), matrix);
+    const to = transformVectorAsPoint(this.to(), 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();
+  }
+}

package/src/lib/components/Rect.ts

@@ -0,0 +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;
+  }
+}