@twick/2d 0.13.0 → 0.14.2

package/src/lib/partials/Gradient.ts

@@ -1,102 +1,102 @@
-import type {
-  PossibleColor,
-  PossibleVector2,
-  SignalValue,
-  SimpleSignal,
-  Vector2Signal,
-} from '@twick/core';
-import {Color, unwrap} from '@twick/core';
-import {computed} from '../decorators/computed';
-import {initial, initializeSignals, signal} from '../decorators/signal';
-import {vector2Signal} from '../decorators/vector2Signal';
-
-export type GradientType = 'linear' | 'conic' | 'radial';
-
-export interface GradientStop {
-  offset: SignalValue<number>;
-  color: SignalValue<PossibleColor>;
-}
-
-export interface GradientProps {
-  type?: SignalValue<GradientType>;
-  fromX?: SignalValue<number>;
-  fromY?: SignalValue<number>;
-  from?: SignalValue<PossibleVector2>;
-  toX?: SignalValue<number>;
-  toY?: SignalValue<number>;
-  to?: SignalValue<PossibleVector2>;
-  angle?: SignalValue<number>;
-  fromRadius?: SignalValue<number>;
-  toRadius?: SignalValue<number>;
-  stops?: GradientStop[];
-}
-
-export class Gradient {
-  @initial('linear')
-  @signal()
-  public declare readonly type: SimpleSignal<GradientType, this>;
-
-  @vector2Signal('from')
-  public declare readonly from: Vector2Signal<this>;
-
-  @vector2Signal('to')
-  public declare readonly to: Vector2Signal<this>;
-
-  @initial(0)
-  @signal()
-  public declare readonly angle: SimpleSignal<number, this>;
-  @initial(0)
-  @signal()
-  public declare readonly fromRadius: SimpleSignal<number, this>;
-  @initial(0)
-  @signal()
-  public declare readonly toRadius: SimpleSignal<number, this>;
-  @initial([])
-  @signal()
-  public declare readonly stops: SimpleSignal<GradientStop[], this>;
-
-  public constructor(props: GradientProps) {
-    initializeSignals(this, props);
-  }
-
-  @computed()
-  public canvasGradient(context: CanvasRenderingContext2D): CanvasGradient {
-    let gradient: CanvasGradient;
-    switch (this.type()) {
-      case 'linear':
-        gradient = context.createLinearGradient(
-          this.from.x(),
-          this.from.y(),
-          this.to.x(),
-          this.to.y(),
-        );
-        break;
-      case 'conic':
-        gradient = context.createConicGradient(
-          this.angle(),
-          this.from.x(),
-          this.from.y(),
-        );
-        break;
-      case 'radial':
-        gradient = context.createRadialGradient(
-          this.from.x(),
-          this.from.y(),
-          this.fromRadius(),
-          this.to.x(),
-          this.to.y(),
-          this.toRadius(),
-        );
-        break;
-    }
-
-    for (const {offset, color} of this.stops()) {
-      gradient.addColorStop(
-        unwrap(offset),
-        new Color(unwrap(color)).serialize(),
-      );
-    }
-
-    return gradient;
-  }
-}
+import type {
+  PossibleColor,
+  PossibleVector2,
+  SignalValue,
+  SimpleSignal,
+  Vector2Signal,
+} from '@twick/core';
+import {Color, unwrap} from '@twick/core';
+import {computed} from '../decorators/computed';
+import {initial, initializeSignals, signal} from '../decorators/signal';
+import {vector2Signal} from '../decorators/vector2Signal';
+
+export type GradientType = 'linear' | 'conic' | 'radial';
+
+export interface GradientStop {
+  offset: SignalValue<number>;
+  color: SignalValue<PossibleColor>;
+}
+
+export interface GradientProps {
+  type?: SignalValue<GradientType>;
+  fromX?: SignalValue<number>;
+  fromY?: SignalValue<number>;
+  from?: SignalValue<PossibleVector2>;
+  toX?: SignalValue<number>;
+  toY?: SignalValue<number>;
+  to?: SignalValue<PossibleVector2>;
+  angle?: SignalValue<number>;
+  fromRadius?: SignalValue<number>;
+  toRadius?: SignalValue<number>;
+  stops?: GradientStop[];
+}
+
+export class Gradient {
+  @initial('linear')
+  @signal()
+  public declare readonly type: SimpleSignal<GradientType, this>;
+
+  @vector2Signal('from')
+  public declare readonly from: Vector2Signal<this>;
+
+  @vector2Signal('to')
+  public declare readonly to: Vector2Signal<this>;
+
+  @initial(0)
+  @signal()
+  public declare readonly angle: SimpleSignal<number, this>;
+  @initial(0)
+  @signal()
+  public declare readonly fromRadius: SimpleSignal<number, this>;
+  @initial(0)
+  @signal()
+  public declare readonly toRadius: SimpleSignal<number, this>;
+  @initial([])
+  @signal()
+  public declare readonly stops: SimpleSignal<GradientStop[], this>;
+
+  public constructor(props: GradientProps) {
+    initializeSignals(this, props);
+  }
+
+  @computed()
+  public canvasGradient(context: CanvasRenderingContext2D): CanvasGradient {
+    let gradient: CanvasGradient;
+    switch (this.type()) {
+      case 'linear':
+        gradient = context.createLinearGradient(
+          this.from.x(),
+          this.from.y(),
+          this.to.x(),
+          this.to.y(),
+        );
+        break;
+      case 'conic':
+        gradient = context.createConicGradient(
+          this.angle(),
+          this.from.x(),
+          this.from.y(),
+        );
+        break;
+      case 'radial':
+        gradient = context.createRadialGradient(
+          this.from.x(),
+          this.from.y(),
+          this.fromRadius(),
+          this.to.x(),
+          this.to.y(),
+          this.toRadius(),
+        );
+        break;
+    }
+
+    for (const {offset, color} of this.stops()) {
+      gradient.addColorStop(
+        unwrap(offset),
+        new Color(unwrap(color)).serialize(),
+      );
+    }
+
+    return gradient;
+  }
+}

package/src/lib/partials/Pattern.ts

@@ -1,34 +1,34 @@
-import type {SimpleSignal} from '@twick/core';
-import {computed} from '../decorators/computed';
-import {initial, initializeSignals, signal} from '../decorators/signal';
-
-export type CanvasRepetition =
-  | null
-  | 'repeat'
-  | 'repeat-x'
-  | 'repeat-y'
-  | 'no-repeat';
-
-export interface PatternProps {
-  image: CanvasImageSource;
-  repetition?: CanvasRepetition;
-}
-
-export class Pattern {
-  @signal()
-  public declare readonly image: SimpleSignal<CanvasImageSource, this>;
-  @initial(null)
-  @signal()
-  public declare readonly repetition: SimpleSignal<CanvasRepetition, this>;
-
-  public constructor(props: PatternProps) {
-    initializeSignals(this, props);
-  }
-
-  @computed()
-  public canvasPattern(
-    context: CanvasRenderingContext2D,
-  ): CanvasPattern | null {
-    return context.createPattern(this.image(), this.repetition());
-  }
-}
+import type {SimpleSignal} from '@twick/core';
+import {computed} from '../decorators/computed';
+import {initial, initializeSignals, signal} from '../decorators/signal';
+
+export type CanvasRepetition =
+  | null
+  | 'repeat'
+  | 'repeat-x'
+  | 'repeat-y'
+  | 'no-repeat';
+
+export interface PatternProps {
+  image: CanvasImageSource;
+  repetition?: CanvasRepetition;
+}
+
+export class Pattern {
+  @signal()
+  public declare readonly image: SimpleSignal<CanvasImageSource, this>;
+  @initial(null)
+  @signal()
+  public declare readonly repetition: SimpleSignal<CanvasRepetition, this>;
+
+  public constructor(props: PatternProps) {
+    initializeSignals(this, props);
+  }
+
+  @computed()
+  public canvasPattern(
+    context: CanvasRenderingContext2D,
+  ): CanvasPattern | null {
+    return context.createPattern(this.image(), this.repetition());
+  }
+}

package/src/lib/partials/ShaderConfig.ts

@@ -1,117 +1,117 @@
-import type {SignalValue, WebGLConvertible} from '@twick/core';
-import {experimentalLog, useLogger, useScene} from '@twick/core';
-import type {Node} from '../components';
-
-/**
- * Describes a shader program used to apply effects to nodes.
- *
- * @experimental
- */
-export interface ShaderConfig {
-  /**
-   * The source code of the fragment shader.
-   *
-   * @example
-   * ```glsl
-   * #version 300 es
-   * precision highp float;
-   *
-   * #include "@twick/core/shaders/common.glsl"
-   *
-   * void main() {
-   *     out_color = texture(core_source_tx, source_uv);
-   * }
-   * ```
-   */
-  fragment: string;
-
-  /**
-   * Custom uniforms to be passed to the shader.
-   *
-   * @remarks
-   * The keys of this object will be used as the uniform names.
-   * The values can be either a number or an array of numbers.
-   * The following table shows how the values will be mapped to GLSL types.
-   *
-   * | TypeScript                         | GLSL    |
-   * | ---------------------------------- | ------- |
-   * | `number`                           | `float` |
-   * | `[number, number]`                 | `vec2`  |
-   * | `[number, number, number]`         | `vec3`  |
-   * | `[number, number, number, number]` | `vec4`  |
-   *
-   * @example
-   * ```ts
-   * const shader = {
-   *   // ...
-   *   uniforms: {
-   *     my_value: () => 1,
-   *     my_vector: [1, 2, 3],
-   *   },
-   * };
-   * ```
-   *
-   * ```glsl
-   * uniform float my_value;
-   * uniform vec3 my_vector;
-   * ```
-   */
-  uniforms?: Record<string, SignalValue<number | number[] | WebGLConvertible>>;
-
-  /**
-   * A custom hook run before the shader is used.
-   *
-   * @remarks
-   * Gives you low-level access to the WebGL context and the shader program.
-   *
-   * @param gl - WebGL context.
-   * @param program - The shader program.
-   */
-  setup?: (gl: WebGL2RenderingContext, program: WebGLProgram) => void;
-
-  /**
-   * A custom hook run after the shader is used.
-   *
-   * @remarks
-   * Gives you low-level access to the WebGL context and the shader program.
-   * Can be used to clean up resources created in the {@link setup} hook.
-   *
-   * @param gl - WebGL context.
-   * @param program - The shader program.
-   */
-  teardown?: (gl: WebGL2RenderingContext, program: WebGLProgram) => void;
-}
-
-export type PossibleShaderConfig =
-  | (ShaderConfig | string)[]
-  | ShaderConfig
-  | string
-  | null;
-
-export function parseShader(
-  this: Node,
-  value: PossibleShaderConfig,
-): ShaderConfig[] {
-  let result: ShaderConfig[];
-  if (!value) {
-    result = [];
-  } else if (typeof value === 'string') {
-    result = [{fragment: value}];
-  } else if (Array.isArray(value)) {
-    result = value.map(item =>
-      typeof item === 'string' ? {fragment: item} : item,
-    );
-  } else {
-    result = [value];
-  }
-
-  if (!useScene().experimentalFeatures && result.length > 0) {
-    result = [];
-    useLogger().log({
-      ...experimentalLog(`Node uses experimental shaders.`),
-      inspect: this.key,
-    });
-  }
-
-  return result;
-}
+import type {SignalValue, WebGLConvertible} from '@twick/core';
+import {experimentalLog, useLogger, useScene} from '@twick/core';
+import type {Node} from '../components';
+
+/**
+ * Describes a shader program used to apply effects to nodes.
+ *
+ * @experimental
+ */
+export interface ShaderConfig {
+  /**
+   * The source code of the fragment shader.
+   *
+   * @example
+   * ```glsl
+   * #version 300 es
+   * precision highp float;
+   *
+   * #include "@twick/core/shaders/common.glsl"
+   *
+   * void main() {
+   *     out_color = texture(core_source_tx, source_uv);
+   * }
+   * ```
+   */
+  fragment: string;
+
+  /**
+   * Custom uniforms to be passed to the shader.
+   *
+   * @remarks
+   * The keys of this object will be used as the uniform names.
+   * The values can be either a number or an array of numbers.
+   * The following table shows how the values will be mapped to GLSL types.
+   *
+   * | TypeScript                         | GLSL    |
+   * | ---------------------------------- | ------- |
+   * | `number`                           | `float` |
+   * | `[number, number]`                 | `vec2`  |
+   * | `[number, number, number]`         | `vec3`  |
+   * | `[number, number, number, number]` | `vec4`  |
+   *
+   * @example
+   * ```ts
+   * const shader = {
+   *   // ...
+   *   uniforms: {
+   *     my_value: () => 1,
+   *     my_vector: [1, 2, 3],
+   *   },
+   * };
+   * ```
+   *
+   * ```glsl
+   * uniform float my_value;
+   * uniform vec3 my_vector;
+   * ```
+   */
+  uniforms?: Record<string, SignalValue<number | number[] | WebGLConvertible>>;
+
+  /**
+   * A custom hook run before the shader is used.
+   *
+   * @remarks
+   * Gives you low-level access to the WebGL context and the shader program.
+   *
+   * @param gl - WebGL context.
+   * @param program - The shader program.
+   */
+  setup?: (gl: WebGL2RenderingContext, program: WebGLProgram) => void;
+
+  /**
+   * A custom hook run after the shader is used.
+   *
+   * @remarks
+   * Gives you low-level access to the WebGL context and the shader program.
+   * Can be used to clean up resources created in the {@link setup} hook.
+   *
+   * @param gl - WebGL context.
+   * @param program - The shader program.
+   */
+  teardown?: (gl: WebGL2RenderingContext, program: WebGLProgram) => void;
+}
+
+export type PossibleShaderConfig =
+  | (ShaderConfig | string)[]
+  | ShaderConfig
+  | string
+  | null;
+
+export function parseShader(
+  this: Node,
+  value: PossibleShaderConfig,
+): ShaderConfig[] {
+  let result: ShaderConfig[];
+  if (!value) {
+    result = [];
+  } else if (typeof value === 'string') {
+    result = [{fragment: value}];
+  } else if (Array.isArray(value)) {
+    result = value.map(item =>
+      typeof item === 'string' ? {fragment: item} : item,
+    );
+  } else {
+    result = [value];
+  }
+
+  if (!useScene().experimentalFeatures && result.length > 0) {
+    result = [];
+    useLogger().log({
+      ...experimentalLog(`Node uses experimental shaders.`),
+      inspect: this.key,
+    });
+  }
+
+  return result;
+}

package/src/lib/partials/index.ts

@@ -1,4 +1,4 @@
-export * from './Filter';
-export * from './Gradient';
-export * from './Pattern';
-export * from './types';
+export * from './Filter';
+export * from './Gradient';
+export * from './Pattern';
+export * from './types';

package/src/lib/partials/types.ts

@@ -1,58 +1,58 @@
-import type {Color, PossibleColor} from '@twick/core';
-import type {Gradient} from './Gradient';
-import type {Pattern} from './Pattern';
-
-export type FlexDirection = 'row' | 'row-reverse' | 'column' | 'column-reverse';
-
-export type FlexWrap = 'nowrap' | 'wrap' | 'wrap-reverse';
-
-export type FlexBasis =
-  | Length
-  | 'content'
-  | 'max-content'
-  | 'min-content'
-  | 'fit-content'
-  | null;
-
-export type FlexContent =
-  | 'center'
-  | 'start'
-  | 'end'
-  | 'space-between'
-  | 'space-around'
-  | 'space-evenly'
-  | 'stretch';
-
-export type FlexItems = 'center' | 'start' | 'end' | 'stretch' | 'baseline';
-
-export type TextWrap = boolean | 'pre' | 'balance';
-
-export type LayoutMode = boolean | null;
-
-/**
- * Represents a length used by most layout properties.
- *
- * @remarks
- * The value can be either:
- * - `number` - the desired length in pixels
- * - `${number}%` - a string with the desired length in percents, for example
- *                  `'50%'`
- */
-export type Length = number | `${number}%`;
-
-/**
- * Represents a desired length used internally by layout Nodes.
- *
- * @remarks
- * When the desired length is set to `null` it represents a default value for
- * whatever property it describes.
- */
-export type DesiredLength = Length | null;
-
-/**
- * Represents a length limit used by layout properties such as `max-width`.
- */
-export type LengthLimit = Length | null | 'max-content' | 'min-content';
-
-export type PossibleCanvasStyle = null | PossibleColor | Gradient | Pattern;
-export type CanvasStyle = null | Color | Gradient | Pattern;
+import type {Color, PossibleColor} from '@twick/core';
+import type {Gradient} from './Gradient';
+import type {Pattern} from './Pattern';
+
+export type FlexDirection = 'row' | 'row-reverse' | 'column' | 'column-reverse';
+
+export type FlexWrap = 'nowrap' | 'wrap' | 'wrap-reverse';
+
+export type FlexBasis =
+  | Length
+  | 'content'
+  | 'max-content'
+  | 'min-content'
+  | 'fit-content'
+  | null;
+
+export type FlexContent =
+  | 'center'
+  | 'start'
+  | 'end'
+  | 'space-between'
+  | 'space-around'
+  | 'space-evenly'
+  | 'stretch';
+
+export type FlexItems = 'center' | 'start' | 'end' | 'stretch' | 'baseline';
+
+export type TextWrap = boolean | 'pre' | 'balance';
+
+export type LayoutMode = boolean | null;
+
+/**
+ * Represents a length used by most layout properties.
+ *
+ * @remarks
+ * The value can be either:
+ * - `number` - the desired length in pixels
+ * - `${number}%` - a string with the desired length in percents, for example
+ *                  `'50%'`
+ */
+export type Length = number | `${number}%`;
+
+/**
+ * Represents a desired length used internally by layout Nodes.
+ *
+ * @remarks
+ * When the desired length is set to `null` it represents a default value for
+ * whatever property it describes.
+ */
+export type DesiredLength = Length | null;
+
+/**
+ * Represents a length limit used by layout properties such as `max-width`.
+ */
+export type LengthLimit = Length | null | 'max-content' | 'min-content';
+
+export type PossibleCanvasStyle = null | PossibleColor | Gradient | Pattern;
+export type CanvasStyle = null | Color | Gradient | Pattern;