@canvas-commons/2d 0.2.0

package/src/lib/components/Path.ts

@@ -0,0 +1,132 @@
+import {
+  BBox,
+  createSignal,
+  isReactive,
+  SignalValue,
+  SimpleSignal,
+  threadable,
+  TimingFunction,
+  tween,
+  Vector2,
+} from '@canvas-commons/core';
+import {CurveProfile} from '../curves';
+import {createCurveProfileLerp} from '../curves/createCurveProfileLerp';
+import {getPathProfile} from '../curves/getPathProfile';
+import {computed, signal} from '../decorators';
+import {drawLine, drawPivot} from '../utils';
+import {Curve, CurveProps} from './Curve';
+
+export interface PathProps extends CurveProps {
+  data: SignalValue<string>;
+}
+
+export class Path extends Curve {
+  private currentProfile = createSignal<CurveProfile | null>(null);
+  @signal()
+  declare public 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 offset = size.mul(this.anchor()).scale(0.5).transformAsPoint(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,266 @@
+import {
+  BBox,
+  SerializedVector2,
+  SignalValue,
+  SimpleSignal,
+  Vector2,
+} from '@canvas-commons/core';
+import {CurveProfile, getPolylineProfile} from '../curves';
+import {computed, initial, signal} from '../decorators';
+import {DesiredLength} from '../partials';
+import {PathDataBuilder, drawPolygon} from '../utils';
+import {Curve, CurveProps} 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 '@canvas-commons/2d';
+ * import {createRef} from '@canvas-commons/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 '@canvas-commons/2d';
+ *
+ * export default makeScene2D(function* (view) {
+ *   view.add(
+ *     <Polygon
+ *       sides={5}
+ *       size={160}
+ *       radius={30}
+ *       stroke={'lightblue'}
+ *       lineWidth={8}
+ *     />
+ *   );
+ * });
+ *
+ * // snippet Accessing vertex data
+ * import {Circle, Polygon, makeScene2D} from '@canvas-commons/2d';
+ * import {createRef, range} from '@canvas-commons/core';
+ *
+ * export default makeScene2D(function* (view) {
+ *   const polygon = createRef<Polygon>();
+ *   view.add(
+ *     <Polygon ref={polygon} sides={3} lineWidth={4} stroke={'white'} size={160}>
+ *       {range(6).map(index => (
+ *         <Circle
+ *           fill={'white'}
+ *           size={20}
+ *           position={() => polygon().vertex(index)}
+ *           opacity={() => polygon().vertexCompletion(index)}
+ *         />
+ *       ))}
+ *     </Polygon>,
+ *   );
+ *
+ *   yield* polygon().sides(6, 2).wait(0.5).back(2);
+ * });
+ * ```
+ */
+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()
+  declare public 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()
+  declare public readonly radius: SimpleSignal<number, this>;
+
+  public constructor(props: PolygonProps) {
+    super(props);
+  }
+
+  /**
+   * Get the position of the nth vertex in the local space of this polygon.
+   *
+   * @param index - The index of the vertex.
+   */
+  public vertex(index: number): Vector2 {
+    const size = this.computedSize().scale(0.5);
+    const theta = (index * 2 * Math.PI) / this.sides();
+    const direction = Vector2.fromRadians(theta).perpendicular;
+    return direction.mul(size);
+  }
+
+  /**
+   * Get the completion of the nth vertex.
+   *
+   * @remarks
+   * The completion is a value between `0` and `1` that describes how the given
+   * vertex partakes in the polygon.
+   *
+   * For integer values of {@link sides}, the completion is simply `1` for
+   * each index making up the polygon and `0` for any other index. If `sides`
+   * includes a fraction, the last index of the polygon will have a completion
+   * equal to said fraction.
+   *
+   * Check out the {@link Polygon | Accessing vertex data} example for a
+   * demonstration.
+   *
+   * @param index - The index of the vertex.
+   */
+  public vertexCompletion(index: number): number {
+    const sides = this.sides();
+    if (index < 0 || index > sides) {
+      return 0;
+    }
+
+    if (index < sides - 1) {
+      return 1;
+    }
+
+    return sides - index;
+  }
+
+  @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;
+  }
+
+  @computed()
+  protected override getPathData(): string {
+    const builder = new PathDataBuilder();
+    const sides = this.sides();
+    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;
+      const point = direction.mul(size);
+
+      if (i === 0) {
+        builder.moveTo(point.x, point.y);
+      } else {
+        builder.lineTo(point.x, point.y);
+      }
+    }
+
+    builder.closePath();
+    return builder.toString();
+  }
+
+  protected override getPath(): Path2D {
+    if (this.requiresProfile()) {
+      return this.curveDrawingInfo().path;
+    }
+
+    const pathData = this.getPathData();
+    if (pathData) {
+      return new Path2D(pathData);
+    }
+
+    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,103 @@
+import {
+  PossibleVector2,
+  SignalValue,
+  Vector2Signal,
+} from '@canvas-commons/core';
+import {QuadBezierSegment} from '../curves';
+import {PolynomialSegment} from '../curves/PolynomialSegment';
+import {computed, vector2Signal} from '../decorators';
+import {lineTo, moveTo, quadraticCurveTo} from '../utils';
+import {Bezier, BezierOverlayInfo} from './Bezier';
+import {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 '@canvas-commons/2d';
+ * import {createRef} from '@canvas-commons/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')
+  declare public readonly p0: Vector2Signal<this>;
+
+  /**
+   * The control point of the Bézier curve.
+   */
+  @vector2Signal('p1')
+  declare public readonly p1: Vector2Signal<this>;
+
+  /**
+   * The end point of the Bézier curve.
+   */
+  @vector2Signal('p2')
+  declare public 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,126 @@
+import {
+  BBox,
+  PossibleVector2,
+  SignalValue,
+  Vector2Signal,
+} from '@canvas-commons/core';
+import {CurveProfile, LineSegment} from '../curves';
+import {nodeName, vector2Signal} from '../decorators';
+import {arc, drawLine, drawPivot} from '../utils';
+import {Curve, CurveProps} 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 '@canvas-commons/2d';
+ * import {Ray} from '@canvas-commons/2d';
+ * import {createRef} from '@canvas-commons/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')
+  declare public readonly from: Vector2Signal<this>;
+
+  /**
+   * The ending point of the ray.
+   */
+  @vector2Signal('to')
+  declare public 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 offset = size.mul(this.anchor()).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();
+  }
+}