@twick/2d 0.14.21 → 0.15.0

package/src/lib/jsx-runtime.ts

@@ -1,46 +0,0 @@
-import type {
-  ComponentChildren,
-  FunctionComponent,
-  JSXProps,
-  Node,
-  NodeConstructor,
-} from './components';
-
-export namespace JSX {
-  export type Element = Node;
-  export type ElementClass = Node;
-  export interface ElementChildrenAttribute {
-    children: any;
-  }
-}
-
-function isClassComponent(
-  // eslint-disable-next-line @typescript-eslint/ban-types
-  fn: Function,
-): fn is new (...args: unknown[]) => unknown {
-  return !!fn.prototype?.isClass;
-}
-
-export const Fragment: FunctionComponent = ({children}) => children;
-
-export function jsx(
-  type: NodeConstructor | FunctionComponent | typeof Fragment,
-  config: JSXProps,
-  key?: any,
-): ComponentChildren {
-  const {ref, children, ...rest} = config;
-  const flatChildren = Array.isArray(children) ? children.flat() : children;
-
-  if (type === Fragment) {
-    return flatChildren;
-  }
-
-  if (isClassComponent(type)) {
-    const node = new type({...rest, children: flatChildren, key});
-    ref?.(node);
-    return node;
-  } else {
-    return type({...rest, ref, children: flatChildren, key});
-  }
-}
-export {jsx as jsxs};

package/src/lib/parse-svg-path.d.ts

@@ -1,14 +0,0 @@
-declare module 'parse-svg-path' {
-  export type PathCommand = [
-    string,
-    number,
-    number,
-    number,
-    number,
-    number,
-    number,
-    number,
-  ];
-  function parse(path: string): PathCommand[];
-  export default parse;
-}

package/src/lib/partials/Filter.ts

@@ -1,180 +0,0 @@
-import type {SignalValue, SimpleSignal} from '@twick/core';
-import {createSignal, map, transformScalar} from '@twick/core';
-
-/**
- * All possible CSS filter names.
- *
- * @internal
- */
-export type FilterName =
-  | 'invert'
-  | 'sepia'
-  | 'grayscale'
-  | 'brightness'
-  | 'contrast'
-  | 'saturate'
-  | 'hue'
-  | 'blur';
-
-/**
- * Definitions of all possible CSS filters.
- *
- * @internal
- */
-export const FILTERS: Record<string, Partial<FilterProps>> = {
-  invert: {
-    name: 'invert',
-  },
-  sepia: {
-    name: 'sepia',
-  },
-  grayscale: {
-    name: 'grayscale',
-  },
-  brightness: {
-    name: 'brightness',
-    default: 1,
-  },
-  contrast: {
-    name: 'contrast',
-    default: 1,
-  },
-  saturate: {
-    name: 'saturate',
-    default: 1,
-  },
-  hue: {
-    name: 'hue-rotate',
-    unit: 'deg',
-    scale: 1,
-  },
-  blur: {
-    name: 'blur',
-    transform: true,
-    unit: 'px',
-    scale: 1,
-  },
-};
-
-/**
- * A unified abstraction for all CSS filters.
- */
-export interface FilterProps {
-  name: string;
-  value: SignalValue<number>;
-  unit: string;
-  scale: number;
-  transform: boolean;
-  default: number;
-}
-
-export class Filter {
-  public get name() {
-    return this.props.name;
-  }
-
-  public get default() {
-    return this.props.default;
-  }
-
-  public readonly value: SimpleSignal<number, Filter>;
-  private readonly props: FilterProps;
-
-  public constructor(props: Partial<FilterProps>) {
-    this.props = {
-      name: 'invert',
-      default: 0,
-      unit: '%',
-      scale: 100,
-      transform: false,
-      ...props,
-      value: props.value ?? props.default ?? 0,
-    };
-    this.value = createSignal(this.props.value, map, this);
-  }
-
-  public isActive() {
-    return this.value() !== this.props.default;
-  }
-
-  public serialize(matrix: DOMMatrix): string {
-    let value = this.value();
-    if (this.props.transform) {
-      value = transformScalar(value, matrix);
-    }
-
-    return `${this.props.name}(${value * this.props.scale}${this.props.unit})`;
-  }
-}
-
-/**
- * Create an {@link https://developer.mozilla.org/en-US/docs/Web/CSS/filter-function/invert | invert} filter.
- *
- * @param value - The value of the filter.
- */
-export function invert(value?: SignalValue<number>) {
-  return new Filter({...FILTERS.invert, value});
-}
-
-/**
- * Create a {@link https://developer.mozilla.org/en-US/docs/Web/CSS/filter-function/sepia | sepia} filter.
- *
- * @param value - The value of the filter.
- */
-export function sepia(value?: SignalValue<number>) {
-  return new Filter({...FILTERS.sepia, value});
-}
-
-/**
- * Create a {@link https://developer.mozilla.org/en-US/docs/Web/CSS/filter-function/grayscale | grayscale} filter.
- *
- * @param value - The value of the filter.
- */
-export function grayscale(value?: SignalValue<number>) {
-  return new Filter({...FILTERS.grayscale, value});
-}
-
-/**
- * Create a {@link https://developer.mozilla.org/en-US/docs/Web/CSS/filter-function/brightness | brightness} filter.
- *
- * @param value - The value of the filter.
- */
-export function brightness(value?: SignalValue<number>) {
-  return new Filter({...FILTERS.brightness, value});
-}
-
-/**
- * Create a {@link https://developer.mozilla.org/en-US/docs/Web/CSS/filter-function/contrast | contrast} filter.
- *
- * @param value - The value of the filter.
- */
-export function contrast(value?: SignalValue<number>) {
-  return new Filter({...FILTERS.contrast, value});
-}
-
-/**
- * Create a {@link https://developer.mozilla.org/en-US/docs/Web/CSS/filter-function/saturate | saturate} filter.
- *
- * @param value - The value of the filter.
- */
-export function saturate(value?: SignalValue<number>) {
-  return new Filter({...FILTERS.saturate, value});
-}
-
-/**
- * Create a {@link https://developer.mozilla.org/en-US/docs/Web/CSS/filter-function/hue-rotate | hue} filter.
- *
- * @param value - The value of the filter in degrees.
- */
-export function hue(value?: SignalValue<number>) {
-  return new Filter({...FILTERS.hue, value});
-}
-
-/**
- * Create a {@link https://developer.mozilla.org/en-US/docs/Web/CSS/filter-function/blur | blur} filter.
- *
- * @param value - The value of the filter in pixels.
- */
-export function blur(value?: SignalValue<number>) {
-  return new Filter({...FILTERS.blur, value});
-}

package/src/lib/partials/Gradient.ts

@@ -1,102 +0,0 @@
-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 +0,0 @@
-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 +0,0 @@
-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 +0,0 @@
-export * from './Filter';
-export * from './Gradient';
-export * from './Pattern';
-export * from './types';

package/src/lib/partials/types.ts

@@ -1,58 +0,0 @@
-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;