@twick/2d 0.13.0 → 0.14.2

package/src/lib/components/Knot.ts

@@ -1,157 +1,157 @@
-import type {
-  PossibleVector2,
-  Signal,
-  SignalValue,
-  Vector2Signal,
-} from '@twick/core';
-import {transformVectorAsPoint, Vector2} from '@twick/core';
-import type {KnotInfo} from '../curves';
-import {
-  cloneable,
-  compound,
-  computed,
-  initial,
-  parser,
-  signal,
-  wrapper,
-} from '../decorators';
-import type {NodeProps} from './Node';
-import {Node} from './Node';
-
-export interface KnotProps extends NodeProps {
-  /**
-   * {@inheritDoc Knot.startHandle}
-   */
-  startHandle?: SignalValue<PossibleVector2>;
-  /**
-   * {@inheritDoc Knot.endHandle}
-   */
-  endHandle?: SignalValue<PossibleVector2>;
-  /**
-   * {@inheritDoc Knot.auto}
-   */
-  auto?: SignalValue<PossibleKnotAuto>;
-  startHandleAuto?: SignalValue<number>;
-  endHandleAuto?: SignalValue<number>;
-}
-
-export type KnotAuto = {startHandle: number; endHandle: number};
-export type PossibleKnotAuto = KnotAuto | number | [number, number];
-export type KnotAutoSignal<TOwner> = Signal<
-  PossibleKnotAuto,
-  KnotAuto,
-  TOwner
-> & {
-  endHandle: Signal<number, number, TOwner>;
-  startHandle: Signal<number, number, TOwner>;
-};
-
-/**
- * A node representing a knot of a {@link Spline}.
- */
-export class Knot extends Node {
-  /**
-   * The position of the knot's start handle. The position is provided relative
-   * to the knot's position.
-   *
-   * @remarks
-   * By default, the position of the start handle will be the mirrored position
-   * of the {@link endHandle}.
-   *
-   * If neither an end handle nor a start handle is provided, the positions of
-   * the handles gets calculated automatically to create smooth curve through
-   * the knot. The smoothness of the resulting curve can be controlled via the
-   * {@link Spline.smoothness} property.
-   *
-   * It is also possible to blend between a user-defined position and the
-   * auto-calculated position by using the {@link auto} property.
-   *
-   * @defaultValue Mirrored position of the endHandle.
-   */
-  @wrapper(Vector2)
-  @signal()
-  public declare readonly startHandle: Vector2Signal<this>;
-
-  /**
-   * The position of the knot's end handle. The position is provided relative
-   * to the knot's position.
-   *
-   * @remarks
-   * By default, the position of the end handle will be the mirrored position
-   * of the {@link startHandle}.
-   *
-   * If neither an end handle nor a start handle is provided, the positions of
-   * the handles gets calculated automatically to create smooth curve through
-   * the knot. The smoothness of the resulting curve can be controlled via the
-   * {@link Spline.smoothness} property.
-   *
-   * It is also possible to blend between a user-defined position and the
-   * auto-calculated position by using the {@link auto} property.
-   *
-   * @defaultValue Mirrored position of the startHandle.
-   */
-  @wrapper(Vector2)
-  @signal()
-  public declare readonly endHandle: Vector2Signal<this>;
-
-  /**
-   * How much to blend between the user-provided handles and the auto-calculated
-   * handles.
-   *
-   * @remarks
-   * This property has no effect if no explicit handles are provided for the
-   * knot.
-   *
-   * @defaultValue 0
-   */
-  @cloneable(false)
-  @initial(() => ({startHandle: 0, endHandle: 0}))
-  @parser((value: PossibleKnotAuto) => {
-    if (typeof value === 'object' && !Array.isArray(value)) {
-      return value;
-    }
-    if (typeof value === 'number') {
-      value = [value, value];
-    }
-    return {startHandle: value[0], endHandle: value[1]};
-  })
-  @compound({startHandle: 'startHandleAuto', endHandle: 'endHandleAuto'})
-  public declare readonly auto: KnotAutoSignal<this>;
-  public get startHandleAuto() {
-    return this.auto.startHandle;
-  }
-  public get endHandleAuto() {
-    return this.auto.endHandle;
-  }
-
-  public constructor(props: KnotProps) {
-    super(
-      props.startHandle === undefined && props.endHandle === undefined
-        ? {auto: 1, ...props}
-        : props,
-    );
-  }
-
-  @computed()
-  public points(): KnotInfo {
-    const hasExplicitHandles =
-      !this.startHandle.isInitial() || !this.endHandle.isInitial();
-    const startHandle = hasExplicitHandles ? this.startHandle() : Vector2.zero;
-    const endHandle = hasExplicitHandles ? this.endHandle() : Vector2.zero;
-
-    return {
-      position: this.position(),
-      startHandle: transformVectorAsPoint(startHandle, this.localToParent()),
-      endHandle: transformVectorAsPoint(endHandle, this.localToParent()),
-      auto: {start: this.startHandleAuto(), end: this.endHandleAuto()},
-    };
-  }
-
-  private getDefaultEndHandle() {
-    return this.startHandle().flipped;
-  }
-
-  private getDefaultStartHandle() {
-    return this.endHandle().flipped;
-  }
-}
+import type {
+  PossibleVector2,
+  Signal,
+  SignalValue,
+  Vector2Signal,
+} from '@twick/core';
+import {transformVectorAsPoint, Vector2} from '@twick/core';
+import type {KnotInfo} from '../curves';
+import {
+  cloneable,
+  compound,
+  computed,
+  initial,
+  parser,
+  signal,
+  wrapper,
+} from '../decorators';
+import type {NodeProps} from './Node';
+import {Node} from './Node';
+
+export interface KnotProps extends NodeProps {
+  /**
+   * {@inheritDoc Knot.startHandle}
+   */
+  startHandle?: SignalValue<PossibleVector2>;
+  /**
+   * {@inheritDoc Knot.endHandle}
+   */
+  endHandle?: SignalValue<PossibleVector2>;
+  /**
+   * {@inheritDoc Knot.auto}
+   */
+  auto?: SignalValue<PossibleKnotAuto>;
+  startHandleAuto?: SignalValue<number>;
+  endHandleAuto?: SignalValue<number>;
+}
+
+export type KnotAuto = {startHandle: number; endHandle: number};
+export type PossibleKnotAuto = KnotAuto | number | [number, number];
+export type KnotAutoSignal<TOwner> = Signal<
+  PossibleKnotAuto,
+  KnotAuto,
+  TOwner
+> & {
+  endHandle: Signal<number, number, TOwner>;
+  startHandle: Signal<number, number, TOwner>;
+};
+
+/**
+ * A node representing a knot of a {@link Spline}.
+ */
+export class Knot extends Node {
+  /**
+   * The position of the knot's start handle. The position is provided relative
+   * to the knot's position.
+   *
+   * @remarks
+   * By default, the position of the start handle will be the mirrored position
+   * of the {@link endHandle}.
+   *
+   * If neither an end handle nor a start handle is provided, the positions of
+   * the handles gets calculated automatically to create smooth curve through
+   * the knot. The smoothness of the resulting curve can be controlled via the
+   * {@link Spline.smoothness} property.
+   *
+   * It is also possible to blend between a user-defined position and the
+   * auto-calculated position by using the {@link auto} property.
+   *
+   * @defaultValue Mirrored position of the endHandle.
+   */
+  @wrapper(Vector2)
+  @signal()
+  public declare readonly startHandle: Vector2Signal<this>;
+
+  /**
+   * The position of the knot's end handle. The position is provided relative
+   * to the knot's position.
+   *
+   * @remarks
+   * By default, the position of the end handle will be the mirrored position
+   * of the {@link startHandle}.
+   *
+   * If neither an end handle nor a start handle is provided, the positions of
+   * the handles gets calculated automatically to create smooth curve through
+   * the knot. The smoothness of the resulting curve can be controlled via the
+   * {@link Spline.smoothness} property.
+   *
+   * It is also possible to blend between a user-defined position and the
+   * auto-calculated position by using the {@link auto} property.
+   *
+   * @defaultValue Mirrored position of the startHandle.
+   */
+  @wrapper(Vector2)
+  @signal()
+  public declare readonly endHandle: Vector2Signal<this>;
+
+  /**
+   * How much to blend between the user-provided handles and the auto-calculated
+   * handles.
+   *
+   * @remarks
+   * This property has no effect if no explicit handles are provided for the
+   * knot.
+   *
+   * @defaultValue 0
+   */
+  @cloneable(false)
+  @initial(() => ({startHandle: 0, endHandle: 0}))
+  @parser((value: PossibleKnotAuto) => {
+    if (typeof value === 'object' && !Array.isArray(value)) {
+      return value;
+    }
+    if (typeof value === 'number') {
+      value = [value, value];
+    }
+    return {startHandle: value[0], endHandle: value[1]};
+  })
+  @compound({startHandle: 'startHandleAuto', endHandle: 'endHandleAuto'})
+  public declare readonly auto: KnotAutoSignal<this>;
+  public get startHandleAuto() {
+    return this.auto.startHandle;
+  }
+  public get endHandleAuto() {
+    return this.auto.endHandle;
+  }
+
+  public constructor(props: KnotProps) {
+    super(
+      props.startHandle === undefined && props.endHandle === undefined
+        ? {auto: 1, ...props}
+        : props,
+    );
+  }
+
+  @computed()
+  public points(): KnotInfo {
+    const hasExplicitHandles =
+      !this.startHandle.isInitial() || !this.endHandle.isInitial();
+    const startHandle = hasExplicitHandles ? this.startHandle() : Vector2.zero;
+    const endHandle = hasExplicitHandles ? this.endHandle() : Vector2.zero;
+
+    return {
+      position: this.position(),
+      startHandle: transformVectorAsPoint(startHandle, this.localToParent()),
+      endHandle: transformVectorAsPoint(endHandle, this.localToParent()),
+      auto: {start: this.startHandleAuto(), end: this.endHandleAuto()},
+    };
+  }
+
+  private getDefaultEndHandle() {
+    return this.startHandle().flipped;
+  }
+
+  private getDefaultStartHandle() {
+    return this.endHandle().flipped;
+  }
+}

package/src/lib/components/Latex.ts

@@ -1,122 +1,122 @@
-import type {SignalValue, SimpleSignal} from '@twick/core';
-import {DependencyContext, useLogger} from '@twick/core';
-import type {LiteAdaptor} from 'mathjax-full/js/adaptors/liteAdaptor';
-import {liteAdaptor} from 'mathjax-full/js/adaptors/liteAdaptor';
-import type {MathDocument} from 'mathjax-full/js/core/MathDocument';
-import {RegisterHTMLHandler} from 'mathjax-full/js/handlers/html';
-import {TeX} from 'mathjax-full/js/input/tex';
-import {AllPackages} from 'mathjax-full/js/input/tex/AllPackages';
-import {mathjax} from 'mathjax-full/js/mathjax';
-import {SVG} from 'mathjax-full/js/output/svg';
-import type {OptionList} from 'mathjax-full/js/util/Options';
-import {initial, signal} from '../decorators';
-import type {ImgProps} from './Img';
-import {Img} from './Img';
-
-export interface LatexProps extends ImgProps {
-  tex?: SignalValue<string>;
-  renderProps?: SignalValue<OptionList>;
-}
-
-/**
- * A node for rendering equations with LaTeX.
- *
- * @preview
- * ```tsx editor
- * import {Latex, makeScene2D} from '@twick/2d';
- *
- * export default makeScene2D(function* (view) {
- *   view.add(
- *     <Latex
- *       // Note how this uses \color to set the color.
- *       tex="{\color{white} ax^2+bx+c=0 \implies x=\frac{-b \pm \sqrt{b^2-4ac}}{2a}}"
- *       width={600} // height and width can calculate based on each other
- *     />,
- *   );
- * });
- * ```
- */
-export class Latex extends Img {
-  private static svgContentsPool: Record<string, string> = {};
-  private static mathJaxInitialized = false;
-  private static adaptor: LiteAdaptor;
-  private static jaxDocument: MathDocument<unknown, unknown, unknown>;
-
-  private static initializeMathJax() {
-    if (this.mathJaxInitialized) {
-      return;
-    }
-    this.adaptor = liteAdaptor();
-    RegisterHTMLHandler(this.adaptor);
-    this.jaxDocument = mathjax.document('', {
-      // eslint-disable-next-line @typescript-eslint/naming-convention
-      InputJax: new TeX({packages: AllPackages}),
-      // eslint-disable-next-line @typescript-eslint/naming-convention
-      OutputJax: new SVG({fontCache: 'local'}),
-    });
-    this.mathJaxInitialized = true;
-  }
-
-  private readonly imageElement = document.createElement('img');
-
-  @initial({})
-  @signal()
-  public declare readonly options: SimpleSignal<OptionList, this>;
-
-  @signal()
-  public declare readonly tex: SimpleSignal<string, this>;
-
-  public constructor(props: LatexProps) {
-    super({...props, src: null});
-    Latex.initializeMathJax();
-  }
-
-  protected override image(): HTMLImageElement {
-    // Render props may change the look of the TeX, so we need to cache both
-    // source and render props together.
-    const src = `${this.tex()}::${JSON.stringify(this.options())}`;
-    if (Latex.svgContentsPool[src]) {
-      this.imageElement.src = Latex.svgContentsPool[src];
-      if (!this.imageElement.complete) {
-        DependencyContext.collectPromise(
-          new Promise((resolve, reject) => {
-            this.imageElement.addEventListener('load', resolve);
-            this.imageElement.addEventListener('error', reject);
-          }),
-        );
-      }
-      return this.imageElement;
-    }
-
-    // Convert to TeX, look for any errors
-    const tex = this.tex();
-    const svg = Latex.adaptor.innerHTML(
-      Latex.jaxDocument.convert(tex, this.options()) as any,
-    );
-    if (svg.includes('data-mjx-error')) {
-      const errors = svg.match(/data-mjx-error="(.*?)"/);
-      if (errors && errors.length > 0) {
-        useLogger().error(`Invalid MathJax: ${errors[1]}`);
-      }
-    }
-
-    // Encode to raw base64 image format
-    const text = `data:image/svg+xml;base64,${btoa(
-      `<?xml version="1.0" encoding="UTF-8" standalone="no" ?>\n${svg}`,
-    )}`;
-    Latex.svgContentsPool[src] = text;
-    const image = document.createElement('img');
-    image.src = text;
-    image.src = text;
-    if (!image.complete) {
-      DependencyContext.collectPromise(
-        new Promise((resolve, reject) => {
-          image.addEventListener('load', resolve);
-          image.addEventListener('error', reject);
-        }),
-      );
-    }
-
-    return image;
-  }
-}
+import type {SignalValue, SimpleSignal} from '@twick/core';
+import {DependencyContext, useLogger} from '@twick/core';
+import type {LiteAdaptor} from 'mathjax-full/js/adaptors/liteAdaptor';
+import {liteAdaptor} from 'mathjax-full/js/adaptors/liteAdaptor';
+import type {MathDocument} from 'mathjax-full/js/core/MathDocument';
+import {RegisterHTMLHandler} from 'mathjax-full/js/handlers/html';
+import {TeX} from 'mathjax-full/js/input/tex';
+import {AllPackages} from 'mathjax-full/js/input/tex/AllPackages';
+import {mathjax} from 'mathjax-full/js/mathjax';
+import {SVG} from 'mathjax-full/js/output/svg';
+import type {OptionList} from 'mathjax-full/js/util/Options';
+import {initial, signal} from '../decorators';
+import type {ImgProps} from './Img';
+import {Img} from './Img';
+
+export interface LatexProps extends ImgProps {
+  tex?: SignalValue<string>;
+  renderProps?: SignalValue<OptionList>;
+}
+
+/**
+ * A node for rendering equations with LaTeX.
+ *
+ * @preview
+ * ```tsx editor
+ * import {Latex, makeScene2D} from '@twick/2d';
+ *
+ * export default makeScene2D(function* (view) {
+ *   view.add(
+ *     <Latex
+ *       // Note how this uses \color to set the color.
+ *       tex="{\color{white} ax^2+bx+c=0 \implies x=\frac{-b \pm \sqrt{b^2-4ac}}{2a}}"
+ *       width={600} // height and width can calculate based on each other
+ *     />,
+ *   );
+ * });
+ * ```
+ */
+export class Latex extends Img {
+  private static svgContentsPool: Record<string, string> = {};
+  private static mathJaxInitialized = false;
+  private static adaptor: LiteAdaptor;
+  private static jaxDocument: MathDocument<unknown, unknown, unknown>;
+
+  private static initializeMathJax() {
+    if (this.mathJaxInitialized) {
+      return;
+    }
+    this.adaptor = liteAdaptor();
+    RegisterHTMLHandler(this.adaptor);
+    this.jaxDocument = mathjax.document('', {
+      // eslint-disable-next-line @typescript-eslint/naming-convention
+      InputJax: new TeX({packages: AllPackages}),
+      // eslint-disable-next-line @typescript-eslint/naming-convention
+      OutputJax: new SVG({fontCache: 'local'}),
+    });
+    this.mathJaxInitialized = true;
+  }
+
+  private readonly imageElement = document.createElement('img');
+
+  @initial({})
+  @signal()
+  public declare readonly options: SimpleSignal<OptionList, this>;
+
+  @signal()
+  public declare readonly tex: SimpleSignal<string, this>;
+
+  public constructor(props: LatexProps) {
+    super({...props, src: null});
+    Latex.initializeMathJax();
+  }
+
+  protected override image(): HTMLImageElement {
+    // Render props may change the look of the TeX, so we need to cache both
+    // source and render props together.
+    const src = `${this.tex()}::${JSON.stringify(this.options())}`;
+    if (Latex.svgContentsPool[src]) {
+      this.imageElement.src = Latex.svgContentsPool[src];
+      if (!this.imageElement.complete) {
+        DependencyContext.collectPromise(
+          new Promise((resolve, reject) => {
+            this.imageElement.addEventListener('load', resolve);
+            this.imageElement.addEventListener('error', reject);
+          }),
+        );
+      }
+      return this.imageElement;
+    }
+
+    // Convert to TeX, look for any errors
+    const tex = this.tex();
+    const svg = Latex.adaptor.innerHTML(
+      Latex.jaxDocument.convert(tex, this.options()) as any,
+    );
+    if (svg.includes('data-mjx-error')) {
+      const errors = svg.match(/data-mjx-error="(.*?)"/);
+      if (errors && errors.length > 0) {
+        useLogger().error(`Invalid MathJax: ${errors[1]}`);
+      }
+    }
+
+    // Encode to raw base64 image format
+    const text = `data:image/svg+xml;base64,${btoa(
+      `<?xml version="1.0" encoding="UTF-8" standalone="no" ?>\n${svg}`,
+    )}`;
+    Latex.svgContentsPool[src] = text;
+    const image = document.createElement('img');
+    image.src = text;
+    image.src = text;
+    if (!image.complete) {
+      DependencyContext.collectPromise(
+        new Promise((resolve, reject) => {
+          image.addEventListener('load', resolve);
+          image.addEventListener('error', reject);
+        }),
+      );
+    }
+
+    return image;
+  }
+}