@twick/2d 0.14.0 → 1.14.3

package/src/lib/components/Grid.ts

@@ -1,135 +1,135 @@
-import type {
-  PossibleVector2,
-  SignalValue,
-  SimpleSignal,
-  Vector2Signal,
-} from '@twick/core';
-import {map} from '@twick/core';
-import {initial, nodeName, signal, vector2Signal} from '../decorators';
-import type {ShapeProps} from './Shape';
-import {Shape} from './Shape';
-
-export interface GridProps extends ShapeProps {
-  /**
-   * {@inheritDoc Grid.spacing}
-   */
-  spacing?: SignalValue<PossibleVector2>;
-  /**
-   * {@inheritDoc Grid.start}
-   */
-  start?: SignalValue<number>;
-  /**
-   * {@inheritDoc Grid.end}
-   */
-  end?: SignalValue<number>;
-}
-
-/**
- * A node for drawing a two-dimensional grid.
- *
- * @preview
- * ```tsx editor
- * import {Grid, makeScene2D} from '@twick/2d';
- * import {all, createRef} from '@twick/core';
- *
- * export default makeScene2D(function* (view) {
- *   const grid = createRef<Grid>();
- *
- *   view.add(
- *     <Grid
- *       ref={grid}
- *       width={'100%'}
- *       height={'100%'}
- *       stroke={'#666'}
- *       start={0}
- *       end={1}
- *     />,
- *   );
- *
- *   yield* all(
- *     grid().end(0.5, 1).to(1, 1).wait(1),
- *     grid().start(0.5, 1).to(0, 1).wait(1),
- *   );
- * });
- * ```
- */
-@nodeName('Grid')
-export class Grid extends Shape {
-  /**
-   * The spacing between the grid lines.
-   */
-  @initial(80)
-  @vector2Signal('spacing')
-  public declare readonly spacing: Vector2Signal<this>;
-
-  /**
-   * The percentage that should be clipped from the beginning of each grid line.
-   *
-   * @remarks
-   * The portion of each grid line that comes before the given percentage will
-   * be made invisible.
-   *
-   * This property is useful for animating the grid appearing on-screen.
-   */
-  @initial(0)
-  @signal()
-  public declare readonly start: SimpleSignal<number, this>;
-
-  /**
-   * The percentage that should be clipped from the end of each grid line.
-   *
-   * @remarks
-   * The portion of each grid line that comes after the given percentage will
-   * be made invisible.
-   *
-   * This property is useful for animating the grid appearing on-screen.
-   */
-  @initial(1)
-  @signal()
-  public declare readonly end: SimpleSignal<number, this>;
-
-  public constructor(props: GridProps) {
-    super(props);
-  }
-
-  protected override drawShape(context: CanvasRenderingContext2D) {
-    context.save();
-    this.applyStyle(context);
-    this.drawRipple(context);
-
-    const spacing = this.spacing();
-    const size = this.computedSize().scale(0.5);
-    const steps = size.div(spacing).floored;
-
-    for (let x = -steps.x; x <= steps.x; x++) {
-      const [from, to] = this.mapPoints(-size.height, size.height);
-
-      context.beginPath();
-      context.moveTo(spacing.x * x, from);
-      context.lineTo(spacing.x * x, to);
-      context.stroke();
-    }
-
-    for (let y = -steps.y; y <= steps.y; y++) {
-      const [from, to] = this.mapPoints(-size.width, size.width);
-
-      context.beginPath();
-      context.moveTo(from, spacing.y * y);
-      context.lineTo(to, spacing.y * y);
-      context.stroke();
-    }
-
-    context.restore();
-  }
-
-  private mapPoints(start: number, end: number): [number, number] {
-    let from = map(start, end, this.start());
-    let to = map(start, end, this.end());
-
-    if (to < from) {
-      [from, to] = [to, from];
-    }
-
-    return [from, to];
-  }
-}
+import type {
+  PossibleVector2,
+  SignalValue,
+  SimpleSignal,
+  Vector2Signal,
+} from '@twick/core';
+import {map} from '@twick/core';
+import {initial, nodeName, signal, vector2Signal} from '../decorators';
+import type {ShapeProps} from './Shape';
+import {Shape} from './Shape';
+
+export interface GridProps extends ShapeProps {
+  /**
+   * {@inheritDoc Grid.spacing}
+   */
+  spacing?: SignalValue<PossibleVector2>;
+  /**
+   * {@inheritDoc Grid.start}
+   */
+  start?: SignalValue<number>;
+  /**
+   * {@inheritDoc Grid.end}
+   */
+  end?: SignalValue<number>;
+}
+
+/**
+ * A node for drawing a two-dimensional grid.
+ *
+ * @preview
+ * ```tsx editor
+ * import {Grid, makeScene2D} from '@twick/2d';
+ * import {all, createRef} from '@twick/core';
+ *
+ * export default makeScene2D(function* (view) {
+ *   const grid = createRef<Grid>();
+ *
+ *   view.add(
+ *     <Grid
+ *       ref={grid}
+ *       width={'100%'}
+ *       height={'100%'}
+ *       stroke={'#666'}
+ *       start={0}
+ *       end={1}
+ *     />,
+ *   );
+ *
+ *   yield* all(
+ *     grid().end(0.5, 1).to(1, 1).wait(1),
+ *     grid().start(0.5, 1).to(0, 1).wait(1),
+ *   );
+ * });
+ * ```
+ */
+@nodeName('Grid')
+export class Grid extends Shape {
+  /**
+   * The spacing between the grid lines.
+   */
+  @initial(80)
+  @vector2Signal('spacing')
+  public declare readonly spacing: Vector2Signal<this>;
+
+  /**
+   * The percentage that should be clipped from the beginning of each grid line.
+   *
+   * @remarks
+   * The portion of each grid line that comes before the given percentage will
+   * be made invisible.
+   *
+   * This property is useful for animating the grid appearing on-screen.
+   */
+  @initial(0)
+  @signal()
+  public declare readonly start: SimpleSignal<number, this>;
+
+  /**
+   * The percentage that should be clipped from the end of each grid line.
+   *
+   * @remarks
+   * The portion of each grid line that comes after the given percentage will
+   * be made invisible.
+   *
+   * This property is useful for animating the grid appearing on-screen.
+   */
+  @initial(1)
+  @signal()
+  public declare readonly end: SimpleSignal<number, this>;
+
+  public constructor(props: GridProps) {
+    super(props);
+  }
+
+  protected override drawShape(context: CanvasRenderingContext2D) {
+    context.save();
+    this.applyStyle(context);
+    this.drawRipple(context);
+
+    const spacing = this.spacing();
+    const size = this.computedSize().scale(0.5);
+    const steps = size.div(spacing).floored;
+
+    for (let x = -steps.x; x <= steps.x; x++) {
+      const [from, to] = this.mapPoints(-size.height, size.height);
+
+      context.beginPath();
+      context.moveTo(spacing.x * x, from);
+      context.lineTo(spacing.x * x, to);
+      context.stroke();
+    }
+
+    for (let y = -steps.y; y <= steps.y; y++) {
+      const [from, to] = this.mapPoints(-size.width, size.width);
+
+      context.beginPath();
+      context.moveTo(from, spacing.y * y);
+      context.lineTo(to, spacing.y * y);
+      context.stroke();
+    }
+
+    context.restore();
+  }
+
+  private mapPoints(start: number, end: number): [number, number] {
+    let from = map(start, end, this.start());
+    let to = map(start, end, this.end());
+
+    if (to < from) {
+      [from, to] = [to, from];
+    }
+
+    return [from, to];
+  }
+}

package/src/lib/components/Icon.ts

@@ -1,96 +1,96 @@
-import type {
-  ColorSignal,
-  PossibleColor,
-  SignalValue,
-  SimpleSignal,
-} from '@twick/core';
-import {useLogger} from '@twick/core';
-import {colorSignal, computed, initial, signal} from '../decorators';
-import type {ImgProps} from './Img';
-import {Img} from './Img';
-
-export interface IconProps extends ImgProps {
-  /**
-   * {@inheritDoc Icon.icon}
-   */
-  icon: SignalValue<string>;
-
-  /**
-   * {@inheritDoc Icon.color}
-   */
-  color?: SignalValue<PossibleColor>;
-}
-
-/**
- * An Icon Component that provides easy access to over 150k icons.
- * See https://icones.js.org/collection/all for all available Icons.
- */
-export class Icon extends Img {
-  /**
-   * The identifier of the icon.
-   *
-   * @remarks
-   * You can find identifiers on [Icônes](https://icones.js.org).
-   * They can look like this:
-   * * `mdi:language-typescript`
-   * * `ph:anchor-simple-bold`
-   * * `ph:activity-bold`
-   */
-  @signal()
-  public declare icon: SimpleSignal<string, this>;
-
-  /**
-   * The color of the icon
-   *
-   * @remarks
-   * Provide the color in one of the following formats:
-   * * named color like `red`, `darkgray`, …
-   * * hexadecimal string with # like `#bada55`, `#141414`
-   *   Value can be either RGB or RGBA: `#bada55`, `#bada55aa` (latter is partially transparent)
-   *   The shorthand version (e.g. `#abc` for `#aabbcc` is also possible.)
-   *
-   * @defaultValue 'white'
-   */
-  @initial('white')
-  @colorSignal()
-  public declare color: ColorSignal<this>;
-
-  public constructor(props: IconProps) {
-    super({
-      ...props,
-      src: null,
-    });
-  }
-
-  /**
-   * Create the URL that will be used as the Image source
-   * @returns Address to Iconify API for the requested Icon.
-   */
-  @computed()
-  protected svgUrl(): string {
-    const iconPathSegment = this.icon().replace(':', '/');
-    const encodedColorValue = encodeURIComponent(this.color().hex());
-    // Iconify API is documented here: https://docs.iconify.design/api/svg.html#color
-    return `https://api.iconify.design/${iconPathSegment}.svg?color=${encodedColorValue}`;
-  }
-
-  /**
-   * overrides `Image.src` getter
-   */
-  protected getSrc(): string {
-    return this.svgUrl();
-  }
-
-  /**
-   * overrides `Image.src` setter to warn the user that the value
-   * is not used
-   */
-  protected setSrc(src: string | null) {
-    if (src === null) {
-      return;
-    }
-    useLogger().warn(
-      "The Icon Component does not accept setting the `src`. If you need access to `src`, use '<Img/>` instead.",
-    );
-  }
-}
+import type {
+  ColorSignal,
+  PossibleColor,
+  SignalValue,
+  SimpleSignal,
+} from '@twick/core';
+import {useLogger} from '@twick/core';
+import {colorSignal, computed, initial, signal} from '../decorators';
+import type {ImgProps} from './Img';
+import {Img} from './Img';
+
+export interface IconProps extends ImgProps {
+  /**
+   * {@inheritDoc Icon.icon}
+   */
+  icon: SignalValue<string>;
+
+  /**
+   * {@inheritDoc Icon.color}
+   */
+  color?: SignalValue<PossibleColor>;
+}
+
+/**
+ * An Icon Component that provides easy access to over 150k icons.
+ * See https://icones.js.org/collection/all for all available Icons.
+ */
+export class Icon extends Img {
+  /**
+   * The identifier of the icon.
+   *
+   * @remarks
+   * You can find identifiers on [Icônes](https://icones.js.org).
+   * They can look like this:
+   * * `mdi:language-typescript`
+   * * `ph:anchor-simple-bold`
+   * * `ph:activity-bold`
+   */
+  @signal()
+  public declare icon: SimpleSignal<string, this>;
+
+  /**
+   * The color of the icon
+   *
+   * @remarks
+   * Provide the color in one of the following formats:
+   * * named color like `red`, `darkgray`, …
+   * * hexadecimal string with # like `#bada55`, `#141414`
+   *   Value can be either RGB or RGBA: `#bada55`, `#bada55aa` (latter is partially transparent)
+   *   The shorthand version (e.g. `#abc` for `#aabbcc` is also possible.)
+   *
+   * @defaultValue 'white'
+   */
+  @initial('white')
+  @colorSignal()
+  public declare color: ColorSignal<this>;
+
+  public constructor(props: IconProps) {
+    super({
+      ...props,
+      src: null,
+    });
+  }
+
+  /**
+   * Create the URL that will be used as the Image source
+   * @returns Address to Iconify API for the requested Icon.
+   */
+  @computed()
+  protected svgUrl(): string {
+    const iconPathSegment = this.icon().replace(':', '/');
+    const encodedColorValue = encodeURIComponent(this.color().hex());
+    // Iconify API is documented here: https://docs.iconify.design/api/svg.html#color
+    return `https://api.iconify.design/${iconPathSegment}.svg?color=${encodedColorValue}`;
+  }
+
+  /**
+   * overrides `Image.src` getter
+   */
+  protected getSrc(): string {
+    return this.svgUrl();
+  }
+
+  /**
+   * overrides `Image.src` setter to warn the user that the value
+   * is not used
+   */
+  protected setSrc(src: string | null) {
+    if (src === null) {
+      return;
+    }
+    useLogger().warn(
+      "The Icon Component does not accept setting the `src`. If you need access to `src`, use '<Img/>` instead.",
+    );
+  }
+}