@twick/2d 0.14.0 → 1.14.3

package/src/lib/components/QuadBezier.ts

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