@vectojs/core 0.1.0 → 0.2.0

package/dist/{chunk-M2IZPGOL.mjs → chunk-Y2N7TGEH.mjs}

@@ -2,6 +2,120 @@ import {
   LayoutWorkerManager
 } from "./chunk-YA2J5ZH7.mjs";
 
+// src/math/SpringPhysics.ts
+var SpringPhysics = class {
+  value;
+  target;
+  velocity = 0;
+  stiffness = 180;
+  damping = 12;
+  mass = 1;
+  valEpsilon = 5e-3;
+  velEpsilon = 5e-3;
+  constructor(initial) {
+    this.value = initial;
+    this.target = initial;
+  }
+  update(dt) {
+    if (this.isAtRest()) {
+      this.value = this.target;
+      this.velocity = 0;
+      return;
+    }
+    const forceSpring = -this.stiffness * (this.value - this.target);
+    const forceDamping = -this.damping * this.velocity;
+    const acceleration = (forceSpring + forceDamping) / this.mass;
+    this.velocity += acceleration * dt;
+    this.value += this.velocity * dt;
+  }
+  isAtRest() {
+    return Math.abs(this.value - this.target) < this.valEpsilon && Math.abs(this.velocity) < this.velEpsilon;
+  }
+};
+
+// src/animation/easing.ts
+var c1 = 1.70158;
+var c3 = c1 + 1;
+var Easing = {
+  linear: (t) => t,
+  easeInQuad: (t) => t * t,
+  easeOutQuad: (t) => t * (2 - t),
+  easeInOutQuad: (t) => t < 0.5 ? 2 * t * t : 1 - Math.pow(-2 * t + 2, 2) / 2,
+  easeInCubic: (t) => t * t * t,
+  easeOutCubic: (t) => 1 - Math.pow(1 - t, 3),
+  easeInOutCubic: (t) => t < 0.5 ? 4 * t * t * t : 1 - Math.pow(-2 * t + 2, 3) / 2,
+  easeOutBack: (t) => 1 + c3 * Math.pow(t - 1, 3) + c1 * Math.pow(t - 1, 2),
+  easeInOutBack: (t) => {
+    const c2 = c1 * 1.525;
+    return t < 0.5 ? Math.pow(2 * t, 2) * ((c2 + 1) * 2 * t - c2) / 2 : (Math.pow(2 * t - 2, 2) * ((c2 + 1) * (t * 2 - 2) + c2) + 2) / 2;
+  }
+};
+
+// src/animation/drivers.ts
+function isTweenConfig(c) {
+  return typeof c === "object" && "duration" in c;
+}
+var TweenDriver = class {
+  value;
+  from;
+  to;
+  elapsed = 0;
+  duration;
+  delay;
+  ease;
+  constructor(from, to, cfg) {
+    this.value = from;
+    this.from = from;
+    this.to = to;
+    this.duration = Math.max(1, cfg.duration);
+    this.delay = cfg.delay ?? 0;
+    this.ease = typeof cfg.easing === "function" ? cfg.easing : Easing[cfg.easing ?? "easeOutQuad"];
+  }
+  get target() {
+    return this.to;
+  }
+  retarget(to) {
+    this.from = this.value;
+    this.to = to;
+    this.elapsed = 0;
+  }
+  tick(dtMs) {
+    this.elapsed += dtMs;
+    const active = this.elapsed - this.delay;
+    if (active <= 0) return;
+    const p = Math.min(active / this.duration, 1);
+    this.value = this.from + (this.to - this.from) * this.ease(p);
+  }
+  isDone() {
+    return this.elapsed - this.delay >= this.duration;
+  }
+};
+var SpringDriver = class {
+  spring;
+  constructor(from, to, cfg) {
+    this.spring = new SpringPhysics(from);
+    if (cfg.stiffness !== void 0) this.spring.stiffness = cfg.stiffness;
+    if (cfg.damping !== void 0) this.spring.damping = cfg.damping;
+    if (cfg.mass !== void 0) this.spring.mass = cfg.mass;
+    this.spring.target = to;
+  }
+  get value() {
+    return this.spring.value;
+  }
+  get target() {
+    return this.spring.target;
+  }
+  retarget(to) {
+    this.spring.target = to;
+  }
+  tick(dtMs) {
+    this.spring.update(dtMs / 1e3);
+  }
+  isDone() {
+    return this.spring.isAtRest();
+  }
+};
+
 // src/tree/Entity.ts
 var VectoJSEvent = class {
   /** The event name. */
@@ -80,12 +194,60 @@ var Entity = class {
     if (this._scene) return this._scene;
     return this.parent ? this.parent.scene : null;
   }
-  x = 0;
-  y = 0;
-  scaleX = 1;
-  scaleY = 1;
-  rotation = 0;
-  opacity = 1;
+  _x = 0;
+  _y = 0;
+  _scaleX = 1;
+  _scaleY = 1;
+  _rotation = 0;
+  _opacity = 1;
+  // Fast-path flag: false for the overwhelming majority of entities (incl. the
+  // Danmaku hot loop), so a bare `entity.x = v` is one boolean check + field write.
+  _hasTransitions = false;
+  _transitions = null;
+  _drivers = /* @__PURE__ */ new Map();
+  _mounted = false;
+  get x() {
+    return this._x;
+  }
+  set x(v) {
+    if (this._hasTransitions) this._animateProp("x", v);
+    else this._x = v;
+  }
+  get y() {
+    return this._y;
+  }
+  set y(v) {
+    if (this._hasTransitions) this._animateProp("y", v);
+    else this._y = v;
+  }
+  get scaleX() {
+    return this._scaleX;
+  }
+  set scaleX(v) {
+    if (this._hasTransitions) this._animateProp("scaleX", v);
+    else this._scaleX = v;
+  }
+  get scaleY() {
+    return this._scaleY;
+  }
+  set scaleY(v) {
+    if (this._hasTransitions) this._animateProp("scaleY", v);
+    else this._scaleY = v;
+  }
+  get rotation() {
+    return this._rotation;
+  }
+  set rotation(v) {
+    if (this._hasTransitions) this._animateProp("rotation", v);
+    else this._rotation = v;
+  }
+  get opacity() {
+    return this._opacity;
+  }
+  set opacity(v) {
+    if (this._hasTransitions) this._animateProp("opacity", v);
+    else this._opacity = v;
+  }
   isDOMPortal = false;
   _interactive = false;
   get interactive() {
@@ -140,9 +302,20 @@ var Entity = class {
     if (s) {
       s.a11yNeedsReorder = true;
       s.markDirty();
+      child._notifyMounted();
     }
     return this;
   }
+  /** Called once when this entity becomes attached to a live Scene. Override to react. */
+  onMounted() {
+  }
+  /** Fire onMounted for this node and its descendants, guarded against double-fire. */
+  _notifyMounted() {
+    if (this._mounted) return;
+    this._mounted = true;
+    this.onMounted();
+    for (const c of this.children) c._notifyMounted();
+  }
   /**
    * Remove a child entity from this node.
    *
@@ -195,6 +368,123 @@ var Entity = class {
     });
     return this;
   }
+  /** Write a driver-computed value to a backing field without re-triggering the setter. */
+  _applyAnimated(prop, v) {
+    switch (prop) {
+      case "x":
+        this._x = v;
+        break;
+      case "y":
+        this._y = v;
+        break;
+      case "scaleX":
+        this._scaleX = v;
+        break;
+      case "scaleY":
+        this._scaleY = v;
+        break;
+      case "rotation":
+        this._rotation = v;
+        break;
+      case "opacity":
+        this._opacity = v;
+        break;
+    }
+  }
+  _currentOf(prop) {
+    switch (prop) {
+      case "x":
+        return this._x;
+      case "y":
+        return this._y;
+      case "scaleX":
+        return this._scaleX;
+      case "scaleY":
+        return this._scaleY;
+      case "rotation":
+        return this._rotation;
+      case "opacity":
+        return this._opacity;
+    }
+  }
+  /**
+   * Write a value immediately, bypassing any configured transition. For subclasses
+   * that need to seed a starting state (e.g. the presence helper's enter `from`).
+   */
+  setImmediate(prop, v) {
+    this._drivers.delete(prop);
+    this._applyAnimated(prop, v);
+  }
+  _spawnDriver(prop, to, cfg) {
+    if (prop !== "opacity" && this.scene?.prefersReducedMotion) {
+      this._drivers.delete(prop);
+      this._applyAnimated(prop, to);
+      return;
+    }
+    const existing = this._drivers.get(prop);
+    if (existing) {
+      existing.retarget(to);
+      return;
+    }
+    const from = this._currentOf(prop);
+    const driver = isTweenConfig(cfg) ? new TweenDriver(from, to, cfg) : new SpringDriver(from, to, cfg === "spring" ? {} : cfg);
+    this._drivers.set(prop, driver);
+    this.scene?.markDirty();
+  }
+  /** Assignment path when a declarative transition is configured for `prop`. */
+  _animateProp(prop, to) {
+    const cfg = this._transitions?.get(prop);
+    if (!cfg) {
+      this._applyAnimated(prop, to);
+      return;
+    }
+    this._spawnDriver(prop, to, cfg);
+  }
+  /** Declare which properties animate, and how. Subsequent assignment animates them. */
+  setTransition(config) {
+    this._transitions ??= /* @__PURE__ */ new Map();
+    for (const [k, v] of Object.entries(config))
+      this._transitions.set(k, v);
+    this._hasTransitions = this._transitions.size > 0;
+    return this;
+  }
+  /** Imperative tween toward targets; resolves when all reach their end. */
+  animateTo(props, cfg) {
+    return this._driveTo(props, cfg);
+  }
+  /** Imperative spring toward targets; resolves when all reach rest. */
+  springTo(props, cfg = {}) {
+    return this._driveTo(props, cfg);
+  }
+  _driveTo(props, cfg) {
+    const entries = Object.entries(props);
+    return Promise.all(
+      entries.map(
+        (e) => new Promise((resolve) => {
+          this._spawnDriver(e[0], e[1], cfg);
+          const d = this._drivers.get(e[0]);
+          if (!d)
+            resolve();
+          else d.onDone = resolve;
+        })
+      )
+    ).then(() => void 0);
+  }
+  /** Advance active property drivers one frame. Call from update(). */
+  tickDrivers(dt) {
+    if (this._drivers.size === 0) return;
+    for (const [prop, driver] of this._drivers) {
+      driver.tick(dt);
+      if (driver.isDone()) {
+        this._applyAnimated(prop, driver.target);
+        driver.onDone?.();
+        this._drivers.delete(prop);
+      } else {
+        this._applyAnimated(prop, driver.value);
+      }
+    }
+    this.scene?.markDirty();
+  }
   /**
    * Advance the entity's internal state for one frame.
    *
@@ -204,7 +494,8 @@ var Entity = class {
    * @param dt - Elapsed time since the last frame in milliseconds.
    * @param time - Absolute timestamp from `performance.now()`.
    */
-  update(_dt, time) {
+  update(dt, time) {
+    this.tickDrivers(dt);
     if (this.animations.length > 0) {
       const anim = this.animations[0];
       if (anim.startTime === -1) {
@@ -899,6 +1190,11 @@ var SVGEntity = class extends Entity {
 };
 
 export {
+  SpringPhysics,
+  Easing,
+  isTweenConfig,
+  TweenDriver,
+  SpringDriver,
   VectoJSEvent,
   Entity,
   MSDFFont,

package/dist/components/GridTextEntity.d.ts

@@ -0,0 +1,15 @@
+import { Entity } from '../tree/Entity';
+import { IRenderer } from '../renderer/IRenderer';
+export declare class GridTextEntity extends Entity {
+    fontSize: number;
+    fillStyle: string;
+    grid: string[];
+    cols: number;
+    rows: number;
+    charWidth: number;
+    charHeight: number;
+    constructor(_atlas: any, fontSize?: number);
+    updateGrid(ascii: string[]): void;
+    isPointInside(_globalX: number, _globalY: number): boolean;
+    render(renderer: IRenderer): void;
+}

package/dist/components/SplineEntity.d.ts

@@ -0,0 +1,144 @@
+import { Bounds, Entity } from '../tree/Entity';
+import { IRenderer } from '../renderer/IRenderer';
+/** One piecewise-cubic segment: x(t) and y(t) as `[a,b,c,d]` polynomial coefficients. */
+export interface SplineSegment {
+    start_t: number;
+    end_t: number;
+    x_poly: number[];
+    y_poly: number[];
+}
+/**
+ * Color of a spline equation: an `[r,g,b]` triple in `0..1`, a linear-gradient
+ * descriptor, or `null` (use the entity's default color).
+ */
+export type SplineColor = [number, number, number] | {
+    stops: [number, [number, number, number]][];
+    start_pos: [number, number];
+    end_pos: [number, number];
+} | null;
+/** A single curve (one stroke color) made of consecutive {@link SplineSegment}s. */
+export interface SplineEquation {
+    color_rgb: SplineColor;
+    data: SplineSegment[];
+}
+/** The native vectomancy `Spline` document. */
+export interface SplineDocument {
+    type: 'Spline' | 'Polyline';
+    equations?: SplineEquation[];
+    paths?: {
+        color_rgb: SplineColor;
+        data: {
+            x: number;
+            y: number;
+        }[];
+    }[];
+    bounding_box?: [number, number, number, number];
+}
+/** Construction options for {@link SplineEntity}. */
+export interface SplineOptions {
+    /** Stroke width in local units. Default `2`. */
+    lineWidth?: number;
+    /** Bake to an OffscreenCanvas once and `drawImage` each frame. Default `true`. */
+    cache?: boolean;
+    /** Color used when an equation's `color_rgb` is `null`. Default `#e2e8f0`. */
+    defaultColor?: string;
+    /**
+     * Hit-test strategy:
+     * - `'curve'` (default): precise — a point hits only within `lineWidth/2 +
+     *   hitTolerance` of an actual curve.
+     * - `'aabb'`: coarse — anywhere in the bounding box hits.
+     */
+    hitTest?: 'curve' | 'aabb';
+    /** Extra pick padding (local units) added to `lineWidth/2` in `'curve'` mode. Default `0`. */
+    hitTolerance?: number;
+}
+/** Cubic Bézier control points produced from a {@link SplineSegment}. */
+export interface BezierControlPoints {
+    x0: number;
+    y0: number;
+    cp1x: number;
+    cp1y: number;
+    cp2x: number;
+    cp2y: number;
+    x3: number;
+    y3: number;
+}
+/**
+ * Convert one cubic-polynomial segment to Bézier control points.
+ *
+ * For a coefficient vector `[a,b,c,d]` describing `f(t)=a+bt+ct²+dt³` on `t∈[0,1]`,
+ * the equivalent Bézier control values are `a`, `a+b/3`, `a+2b/3+c/3`, `a+b+c+d`.
+ * Applied independently to the x and y polynomials.
+ *
+ * @param seg - The polynomial segment.
+ * @returns The cubic Bézier control points.
+ */
+export declare function polySegmentToBezier(seg: SplineSegment): BezierControlPoints;
+/**
+ * Renders a native vectomancy `Spline` document (piecewise-cubic curves) to canvas.
+ *
+ * Bounds come from the document's `bounding_box` (or are computed from segment
+ * endpoints), so the entity participates in {@link Scene} viewport culling. By
+ * default the curves are baked once into an `OffscreenCanvas` and blitted each
+ * frame; without `OffscreenCanvas` it strokes the Bézier paths per frame.
+ *
+ * @example
+ * const doc = await loadSpline('/ast/logo.json');
+ * scene.add(new SplineEntity(doc).setPosition(100, 100));
+ */
+export declare class SplineEntity extends Entity {
+    doc: SplineDocument;
+    lineWidth: number;
+    defaultColor: string;
+    hitTolerance: number;
+    private cache;
+    private hitMode;
+    private bounds;
+    private offscreen;
+    private baked;
+    /** Lazily-flattened polylines (one Float32Array of [x,y,...] per segment) for hit-testing. */
+    private polylines;
+    /**
+     * When `true`, the renderer draws a rounded-rect outline of the entity's
+     * local bounds after painting the curves. Useful for drag feedback and
+     * debugging hit areas. Defaults to `false`.
+     */
+    showBounds: boolean;
+    constructor(doc: SplineDocument, opts?: SplineOptions);
+    private computeBounds;
+    /** @inheritdoc */
+    getBounds(): Bounds;
+    /**
+     * AABB hit-test against the document bounds in world space.
+     *
+     * Curve-accurate hit-testing can be layered on later via {@link hitTestCurve};
+     * this method already calls it as a refinement when it is overridden.
+     */
+    isPointInside(globalX: number, globalY: number): boolean;
+    /**
+     * Curve-accurate refinement of {@link isPointInside}: hit only when the local
+     * point lies within `lineWidth/2 + hitTolerance` of an actual curve.
+     *
+     * Returns `null` in `hitTest: 'aabb'` mode (keep the bounding-box result).
+     * Curves are flattened to polylines once and cached. Override for custom logic.
+     *
+     * @param localX - X in the entity's local space.
+     * @param localY - Y in the entity's local space.
+     * @returns `true`/`false`, or `null` to keep the AABB result.
+     */
+    protected hitTestCurve(localX: number, localY: number): boolean | null;
+    /** Flatten every Bézier segment into a sampled polyline once, then cache. */
+    private getPolylines;
+    private resolveColor;
+    private strokeEquations;
+    /** Bake all equations into an OffscreenCanvas once (when available). */
+    private bake;
+    render(r: IRenderer): void;
+}
+/**
+ * Fetch and parse a vectomancy `Spline` JSON document (browser only).
+ *
+ * @param url - URL of the `.json` spline document.
+ * @returns The parsed {@link SplineDocument}.
+ */
+export declare function loadSpline(url: string): Promise<SplineDocument>;

package/dist/components/TextEntity.d.ts

@@ -0,0 +1,35 @@
+import { Entity } from '../tree/Entity';
+import { IRenderer } from '../renderer/IRenderer';
+export declare class TextEntity extends Entity {
+    text: string;
+    private atlas;
+    private layout;
+    private prepared;
+    private nodes;
+    fontSize: number;
+    fillStyle: string | any;
+    strokeStyle: string | any;
+    hoveredFillStyle: string | any;
+    lineWidth: number;
+    private isHovered;
+    constructor(text: string, atlas: any, maxWidth: number, fontSize?: number);
+    /**
+     * Replace the text content. Runs the **cold** measurement pass (re-segment +
+     * re-measure) since the glyphs changed, then re-lays out.
+     *
+     * @returns `this` for chaining.
+     */
+    setText(text: string): this;
+    /**
+     * Change the wrap width and reflow. Cheap **hot** path only — reuses the
+     * cached {@link PreparedText}, doing no re-segmentation or re-measurement.
+     * Ideal for responsive resize.
+     *
+     * @returns `this` for chaining.
+     */
+    setMaxWidth(maxWidth: number): this;
+    /** Hot pass: place the cached {@link PreparedText} and refresh the a11y box. */
+    private applyLayout;
+    isPointInside(globalX: number, globalY: number): boolean;
+    render(renderer: IRenderer): void;
+}