@twick/2d 0.13.0 → 0.14.2

package/src/lib/components/__tests__/state.test.tsx

@@ -1,60 +1,60 @@
-import {createSignal, join, waitFor} from '@twick/core';
-import {describe, expect, it} from 'vitest';
-import {Circle} from '../Circle';
-import {generatorTest} from './generatorTest';
-import {mockScene2D} from './mockScene2D';
-
-describe('state', () => {
-  mockScene2D();
-
-  it('Restoring state', () => {
-    const signal = createSignal(45);
-    const circle = (
-      <Circle lineWidth={8} startAngle={signal} end={0.5} />
-    ) as Circle;
-    circle.save();
-
-    circle.lineWidth(16);
-    circle.startAngle(90);
-    circle.end(0.25);
-
-    circle.restore();
-
-    expect(circle.lineWidth()).toBe(8);
-    expect(circle.startAngle()).toBe(45);
-    expect(circle.end()).toBe(0.5);
-
-    signal(180);
-
-    expect(circle.startAngle()).toBe(45);
-    expect(circle.startArrow.context.isInitial()).toBe(true);
-  });
-
-  it(
-    'Tweening state',
-    generatorTest(function* () {
-      const signal = createSignal(20);
-      const circle = (
-        <Circle lineWidth={8} startAngle={signal} end={0.5} />
-      ) as Circle;
-      circle.save();
-
-      circle.lineWidth(16);
-      circle.startAngle(40);
-      circle.end(0.3);
-
-      const task = yield circle.restore(2);
-      yield* waitFor(1);
-
-      expect(circle.lineWidth()).closeTo(12, 0.0001);
-      expect(circle.startAngle()).closeTo(30, 0.0001);
-      expect(circle.end()).closeTo(0.4, 0.0001);
-
-      yield* join(task);
-
-      expect(circle.lineWidth()).toBe(8);
-      expect(circle.startAngle()).toBe(20);
-      expect(circle.end()).toBe(0.5);
-    }),
-  );
-});
+import {createSignal, join, waitFor} from '@twick/core';
+import {describe, expect, it} from 'vitest';
+import {Circle} from '../Circle';
+import {generatorTest} from './generatorTest';
+import {mockScene2D} from './mockScene2D';
+
+describe('state', () => {
+  mockScene2D();
+
+  it('Restoring state', () => {
+    const signal = createSignal(45);
+    const circle = (
+      <Circle lineWidth={8} startAngle={signal} end={0.5} />
+    ) as Circle;
+    circle.save();
+
+    circle.lineWidth(16);
+    circle.startAngle(90);
+    circle.end(0.25);
+
+    circle.restore();
+
+    expect(circle.lineWidth()).toBe(8);
+    expect(circle.startAngle()).toBe(45);
+    expect(circle.end()).toBe(0.5);
+
+    signal(180);
+
+    expect(circle.startAngle()).toBe(45);
+    expect(circle.startArrow.context.isInitial()).toBe(true);
+  });
+
+  it(
+    'Tweening state',
+    generatorTest(function* () {
+      const signal = createSignal(20);
+      const circle = (
+        <Circle lineWidth={8} startAngle={signal} end={0.5} />
+      ) as Circle;
+      circle.save();
+
+      circle.lineWidth(16);
+      circle.startAngle(40);
+      circle.end(0.3);
+
+      const task = yield circle.restore(2);
+      yield* waitFor(1);
+
+      expect(circle.lineWidth()).closeTo(12, 0.0001);
+      expect(circle.startAngle()).closeTo(30, 0.0001);
+      expect(circle.end()).closeTo(0.4, 0.0001);
+
+      yield* join(task);
+
+      expect(circle.lineWidth()).toBe(8);
+      expect(circle.startAngle()).toBe(20);
+      expect(circle.end()).toBe(0.5);
+    }),
+  );
+});

package/src/lib/components/index.ts

@@ -1,28 +1,28 @@
-export * from './Audio';
-export * from './Bezier';
-export * from './Circle';
-export * from './Code';
-export * from './CubicBezier';
-export * from './Curve';
-export * from './Grid';
-export * from './Icon';
-export * from './Img';
-export * from './Knot';
-export * from './Latex';
-export * from './Layout';
-export * from './Line';
-export * from './Media';
-export * from './Node';
-export * from './Path';
-export * from './Polygon';
-export * from './QuadBezier';
-export * from './Ray';
-export * from './Rect';
-export * from './Rive';
-export * from './Shape';
-export * from './Spline';
-export * from './SVG';
-export * from './Txt';
-export * from './types';
-export * from './Video';
-export * from './View2D';
+export * from './Audio';
+export * from './Bezier';
+export * from './Circle';
+export * from './Code';
+export * from './CubicBezier';
+export * from './Curve';
+export * from './Grid';
+export * from './Icon';
+export * from './Img';
+export * from './Knot';
+export * from './Latex';
+export * from './Layout';
+export * from './Line';
+export * from './Media';
+export * from './Node';
+export * from './Path';
+export * from './Polygon';
+export * from './QuadBezier';
+export * from './Ray';
+export * from './Rect';
+export * from './Rive';
+export * from './Shape';
+export * from './Spline';
+export * from './SVG';
+export * from './Txt';
+export * from './types';
+export * from './Video';
+export * from './View2D';

package/src/lib/components/types.ts

@@ -1,35 +1,35 @@
-import type {ReferenceReceiver} from '@twick/core';
-import type {Node} from './Node';
-
-export type ComponentChild =
-  | Node
-  | object
-  | string
-  | number
-  | bigint
-  | boolean
-  | null
-  | undefined;
-
-export type ComponentChildren = ComponentChild | ComponentChild[];
-export type NodeChildren = Node | Node[];
-
-export type PropsOf<T> =
-  T extends NodeConstructor<infer P>
-    ? P
-    : T extends FunctionComponent<infer P>
-      ? P
-      : never;
-
-export interface JSXProps {
-  children?: ComponentChildren;
-  ref?: ReferenceReceiver<Node>;
-}
-
-export interface FunctionComponent<T = any> {
-  (props: T): Node | null;
-}
-
-export interface NodeConstructor<TProps = any, TNode = Node> {
-  new (props: TProps): TNode;
-}
+import type {ReferenceReceiver} from '@twick/core';
+import type {Node} from './Node';
+
+export type ComponentChild =
+  | Node
+  | object
+  | string
+  | number
+  | bigint
+  | boolean
+  | null
+  | undefined;
+
+export type ComponentChildren = ComponentChild | ComponentChild[];
+export type NodeChildren = Node | Node[];
+
+export type PropsOf<T> =
+  T extends NodeConstructor<infer P>
+    ? P
+    : T extends FunctionComponent<infer P>
+      ? P
+      : never;
+
+export interface JSXProps {
+  children?: ComponentChildren;
+  ref?: ReferenceReceiver<Node>;
+}
+
+export interface FunctionComponent<T = any> {
+  (props: T): Node | null;
+}
+
+export interface NodeConstructor<TProps = any, TNode = Node> {
+  new (props: TProps): TNode;
+}

package/src/lib/curves/ArcSegment.ts

@@ -1,159 +1,159 @@
-import {
-  BBox,
-  DEG2RAD,
-  Matrix2D,
-  Vector2,
-  lazy,
-  transformVector,
-} from '@twick/core';
-import {View2D} from '../components/View2D';
-import type {CurvePoint} from './CurvePoint';
-import {Segment} from './Segment';
-
-export class ArcSegment extends Segment {
-  @lazy(() => {
-    const root = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
-    const el = document.createElementNS('http://www.w3.org/2000/svg', 'path');
-    root.appendChild(el);
-    View2D.shadowRoot.appendChild(root);
-    return el;
-  })
-  private static el: SVGPathElement;
-  public readonly center: Vector2;
-  // angle in radian
-  public readonly startAngle: number;
-  public readonly deltaAngle: number;
-  public readonly xAxisRotation: number;
-  private xAxisRotationMatrix: DOMMatrix;
-  public override readonly points: Vector2[];
-  private length: number;
-
-  public constructor(
-    public readonly startPoint: Vector2,
-    public readonly radius: Vector2,
-    public readonly xAxisRotationDegree: number,
-    public readonly largeArcFlag: number,
-    public readonly sweepFlag: number,
-    public readonly endPoint: Vector2,
-  ) {
-    super();
-
-    this.xAxisRotation = this.xAxisRotationDegree * DEG2RAD;
-    this.radius = new Vector2(Math.abs(radius.x), Math.abs(radius.y));
-
-    const rotationMatrix =
-      Matrix2D.fromRotation(-xAxisRotationDegree).domMatrix;
-    const pAccent = transformVector(
-      startPoint.sub(endPoint).div(2),
-      rotationMatrix,
-    );
-
-    const L =
-      (pAccent.x * pAccent.x) / (radius.x * radius.x) +
-      (pAccent.y * pAccent.y) / (radius.y * radius.y);
-
-    if (L > 1) {
-      const Lsqrt = Math.sqrt(L);
-      radius.x = Lsqrt * radius.x;
-      radius.y = Lsqrt * radius.y;
-    }
-
-    const cAccent = new Vector2(
-      radius.ctg * pAccent.y,
-      radius.perpendicular.ctg * pAccent.x,
-    ).scale(
-      Math.sqrt(
-        1 /
-          ((pAccent.x * pAccent.x) / (radius.x * radius.x) +
-            (pAccent.y * pAccent.y) / (radius.y * radius.y)) -
-          1,
-      ) * (largeArcFlag === sweepFlag ? -1 : 1),
-    );
-
-    this.xAxisRotationMatrix =
-      Matrix2D.fromRotation(xAxisRotationDegree).domMatrix;
-    const rotatedCAccent = transformVector(cAccent, this.xAxisRotationMatrix);
-    this.center = rotatedCAccent.add(startPoint.add(endPoint).div(2));
-
-    const q = pAccent.sub(cAccent).div(radius);
-    const s = pAccent.scale(-1).sub(cAccent).div(radius);
-    this.startAngle = q.radians;
-    this.deltaAngle = Vector2.angleBetween(q, s) % (Math.PI * 2);
-    if (this.sweepFlag === 0 && this.deltaAngle > 0) {
-      this.deltaAngle -= Math.PI * 2;
-    }
-    if (this.sweepFlag === 1 && this.deltaAngle < 0) {
-      this.deltaAngle += Math.PI * 2;
-    }
-
-    ArcSegment.el.setAttribute(
-      'd',
-      `M ${this.startPoint.x} ${this.startPoint.y} A ${this.radius.x} ${this.radius.y} ${this.xAxisRotationDegree} ${this.largeArcFlag} ${this.sweepFlag} ${this.endPoint.x} ${this.endPoint.y}`,
-    );
-    this.length = ArcSegment.el.getTotalLength();
-
-    const bbox = new BBox(ArcSegment.el.getBBox());
-    this.points = [bbox.topLeft, bbox.bottomRight];
-  }
-
-  public getAnglePosition(angle: number) {
-    const rotatedVector = transformVector(
-      this.radius.mul(Vector2.fromRadians(angle)),
-      this.xAxisRotationMatrix,
-    );
-    return rotatedVector.add(this.center);
-  }
-
-  public getAngleDerivative(angle: number) {
-    const derivative = new Vector2(
-      -this.radius.x * Math.sin(angle),
-      this.radius.y * Math.cos(angle),
-    );
-    return transformVector(derivative, this.xAxisRotationMatrix);
-  }
-
-  public draw(
-    context: CanvasRenderingContext2D | Path2D,
-    start: number,
-    end: number,
-    move: boolean,
-  ): [CurvePoint, CurvePoint] {
-    const startAngle = this.startAngle + this.deltaAngle * start;
-    const endAngle = this.startAngle + this.deltaAngle * end;
-    const startPos = this.getPoint(start);
-    const endPos = this.getPoint(end);
-
-    if (move) context.moveTo(startPos.position.x, startPos.position.y);
-
-    context.ellipse(
-      this.center.x,
-      this.center.y,
-      this.radius.x,
-      this.radius.y,
-      this.xAxisRotation,
-      startAngle,
-      endAngle,
-      this.sweepFlag === 0,
-    );
-
-    return [startPos, endPos];
-  }
-
-  public getPoint(distance: number): CurvePoint {
-    const angle = this.startAngle + distance * this.deltaAngle;
-    const tangent = this.getAngleDerivative(angle).normalized;
-    return {
-      position:
-        distance === 0
-          ? this.startPoint
-          : distance === 1
-            ? this.endPoint
-            : this.getAnglePosition(angle),
-      tangent,
-      normal: tangent.perpendicular,
-    };
-  }
-  public get arcLength(): number {
-    return this.length;
-  }
-}
+import {
+  BBox,
+  DEG2RAD,
+  Matrix2D,
+  Vector2,
+  lazy,
+  transformVector,
+} from '@twick/core';
+import {View2D} from '../components/View2D';
+import type {CurvePoint} from './CurvePoint';
+import {Segment} from './Segment';
+
+export class ArcSegment extends Segment {
+  @lazy(() => {
+    const root = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
+    const el = document.createElementNS('http://www.w3.org/2000/svg', 'path');
+    root.appendChild(el);
+    View2D.shadowRoot.appendChild(root);
+    return el;
+  })
+  private static el: SVGPathElement;
+  public readonly center: Vector2;
+  // angle in radian
+  public readonly startAngle: number;
+  public readonly deltaAngle: number;
+  public readonly xAxisRotation: number;
+  private xAxisRotationMatrix: DOMMatrix;
+  public override readonly points: Vector2[];
+  private length: number;
+
+  public constructor(
+    public readonly startPoint: Vector2,
+    public readonly radius: Vector2,
+    public readonly xAxisRotationDegree: number,
+    public readonly largeArcFlag: number,
+    public readonly sweepFlag: number,
+    public readonly endPoint: Vector2,
+  ) {
+    super();
+
+    this.xAxisRotation = this.xAxisRotationDegree * DEG2RAD;
+    this.radius = new Vector2(Math.abs(radius.x), Math.abs(radius.y));
+
+    const rotationMatrix =
+      Matrix2D.fromRotation(-xAxisRotationDegree).domMatrix;
+    const pAccent = transformVector(
+      startPoint.sub(endPoint).div(2),
+      rotationMatrix,
+    );
+
+    const L =
+      (pAccent.x * pAccent.x) / (radius.x * radius.x) +
+      (pAccent.y * pAccent.y) / (radius.y * radius.y);
+
+    if (L > 1) {
+      const Lsqrt = Math.sqrt(L);
+      radius.x = Lsqrt * radius.x;
+      radius.y = Lsqrt * radius.y;
+    }
+
+    const cAccent = new Vector2(
+      radius.ctg * pAccent.y,
+      radius.perpendicular.ctg * pAccent.x,
+    ).scale(
+      Math.sqrt(
+        1 /
+          ((pAccent.x * pAccent.x) / (radius.x * radius.x) +
+            (pAccent.y * pAccent.y) / (radius.y * radius.y)) -
+          1,
+      ) * (largeArcFlag === sweepFlag ? -1 : 1),
+    );
+
+    this.xAxisRotationMatrix =
+      Matrix2D.fromRotation(xAxisRotationDegree).domMatrix;
+    const rotatedCAccent = transformVector(cAccent, this.xAxisRotationMatrix);
+    this.center = rotatedCAccent.add(startPoint.add(endPoint).div(2));
+
+    const q = pAccent.sub(cAccent).div(radius);
+    const s = pAccent.scale(-1).sub(cAccent).div(radius);
+    this.startAngle = q.radians;
+    this.deltaAngle = Vector2.angleBetween(q, s) % (Math.PI * 2);
+    if (this.sweepFlag === 0 && this.deltaAngle > 0) {
+      this.deltaAngle -= Math.PI * 2;
+    }
+    if (this.sweepFlag === 1 && this.deltaAngle < 0) {
+      this.deltaAngle += Math.PI * 2;
+    }
+
+    ArcSegment.el.setAttribute(
+      'd',
+      `M ${this.startPoint.x} ${this.startPoint.y} A ${this.radius.x} ${this.radius.y} ${this.xAxisRotationDegree} ${this.largeArcFlag} ${this.sweepFlag} ${this.endPoint.x} ${this.endPoint.y}`,
+    );
+    this.length = ArcSegment.el.getTotalLength();
+
+    const bbox = new BBox(ArcSegment.el.getBBox());
+    this.points = [bbox.topLeft, bbox.bottomRight];
+  }
+
+  public getAnglePosition(angle: number) {
+    const rotatedVector = transformVector(
+      this.radius.mul(Vector2.fromRadians(angle)),
+      this.xAxisRotationMatrix,
+    );
+    return rotatedVector.add(this.center);
+  }
+
+  public getAngleDerivative(angle: number) {
+    const derivative = new Vector2(
+      -this.radius.x * Math.sin(angle),
+      this.radius.y * Math.cos(angle),
+    );
+    return transformVector(derivative, this.xAxisRotationMatrix);
+  }
+
+  public draw(
+    context: CanvasRenderingContext2D | Path2D,
+    start: number,
+    end: number,
+    move: boolean,
+  ): [CurvePoint, CurvePoint] {
+    const startAngle = this.startAngle + this.deltaAngle * start;
+    const endAngle = this.startAngle + this.deltaAngle * end;
+    const startPos = this.getPoint(start);
+    const endPos = this.getPoint(end);
+
+    if (move) context.moveTo(startPos.position.x, startPos.position.y);
+
+    context.ellipse(
+      this.center.x,
+      this.center.y,
+      this.radius.x,
+      this.radius.y,
+      this.xAxisRotation,
+      startAngle,
+      endAngle,
+      this.sweepFlag === 0,
+    );
+
+    return [startPos, endPos];
+  }
+
+  public getPoint(distance: number): CurvePoint {
+    const angle = this.startAngle + distance * this.deltaAngle;
+    const tangent = this.getAngleDerivative(angle).normalized;
+    return {
+      position:
+        distance === 0
+          ? this.startPoint
+          : distance === 1
+            ? this.endPoint
+            : this.getAnglePosition(angle),
+      tangent,
+      normal: tangent.perpendicular,
+    };
+  }
+  public get arcLength(): number {
+    return this.length;
+  }
+}