@twick/2d 0.14.21 → 0.15.0

package/src/lib/components/Path.ts

@@ -1,137 +0,0 @@
-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 +0,0 @@
-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

@@ -1,100 +0,0 @@
-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

@@ -1,125 +0,0 @@
-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

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