@vectojs/core 0.2.5 → 0.2.7

package/dist/{chunk-P6MDWIEX.mjs → chunk-YVN3PJRC.mjs}

@@ -1,8 +1,10 @@
 import {
   LayoutWorkerManager
-} from "./chunk-B3Z3JEJH.mjs";
+} from "./chunk-STWPTWO4.mjs";
 
 // src/math/SpringPhysics.ts
+var MAX_FRAME_DT = 0.25;
+var MAX_STEP_DT = 1 / 120;
 var SpringPhysics = class {
   value;
   target;
@@ -22,11 +24,22 @@ var SpringPhysics = class {
       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;
+    if (!(dt > 0)) return;
+    let remaining = dt < MAX_FRAME_DT ? dt : MAX_FRAME_DT;
+    while (remaining > 0) {
+      const step = remaining < MAX_STEP_DT ? remaining : MAX_STEP_DT;
+      const forceSpring = -this.stiffness * (this.value - this.target);
+      const forceDamping = -this.damping * this.velocity;
+      const acceleration = (forceSpring + forceDamping) / this.mass;
+      this.velocity += acceleration * step;
+      this.value += this.velocity * step;
+      remaining -= step;
+      if (this.isAtRest()) {
+        this.value = this.target;
+        this.velocity = 0;
+        return;
+      }
+    }
   }
   isAtRest() {
     return Math.abs(this.value - this.target) < this.valEpsilon && Math.abs(this.velocity) < this.velEpsilon;
@@ -117,6 +130,14 @@ var SpringDriver = class {
 };
 
 // src/tree/Entity.ts
+var ANIMATABLE_PROPS = /* @__PURE__ */ new Set([
+  "x",
+  "y",
+  "scaleX",
+  "scaleY",
+  "rotation",
+  "opacity"
+]);
 var VectoJSEvent = class {
   /** The event name. */
   type;
@@ -568,7 +589,12 @@ var Entity = class {
         const end = anim.target[key];
         if (typeof start === "number" && typeof end === "number") {
           const easeOut = progress * (2 - progress);
-          this[key] = start + (end - start) * easeOut;
+          const value = start + (end - start) * easeOut;
+          if (ANIMATABLE_PROPS.has(key)) {
+            this._applyAnimated(key, value);
+          } else {
+            this[key] = value;
+          }
         }
       }
       if (progress >= 1) {
@@ -619,6 +645,10 @@ var Entity = class {
    */
   destroy() {
     this.animations = [];
+    for (const driver of this._drivers.values()) {
+      this._settleDriver(driver);
+    }
+    this._drivers.clear();
     this.listeners.clear();
     this.captureListeners.clear();
     if (this.parent) {
@@ -862,6 +892,19 @@ var Entity = class {
   getBatchRect() {
     return null;
   }
+  /**
+   * Opt into DOM content projection for entities that render static text.
+   * The {@link Scene} mirrors the returned text as a transparent DOM node
+   * positioned over the drawn glyphs, making canvas text findable (Ctrl+F),
+   * readable by screen readers and crawlers, translatable, and — when
+   * `selectable` is set — natively selectable. Returns `null` by default.
+   * Read on the a11y sync cadence, so text changes propagate automatically.
+   *
+   * @returns The projection descriptor, or `null` to project nothing.
+   */
+  getContentProjection() {
+    return null;
+  }
   /**
    * Whether this entity still has a queued/running tween animation, or an
    * active {@link setTransition}/{@link animateTo}/{@link springTo} property
@@ -989,6 +1032,8 @@ var MSDFTextEntity = class extends Entity {
   color;
   letterSpacing;
   lineHeight;
+  maxWidth;
+  maxHeight;
   text = "";
   lastRenderedSeqId = 0;
   rgbColorCache = /* @__PURE__ */ new Map();
@@ -1003,17 +1048,27 @@ var MSDFTextEntity = class extends Entity {
     this.color = options.color ?? "#ffffff";
     this.letterSpacing = options.letterSpacing ?? 0;
     this.lineHeight = options.lineHeight;
+    this.maxWidth = options.maxWidth ?? 1e3;
+    this.maxHeight = options.maxHeight ?? 1e3;
     this.setText(text);
   }
+  /** Change the wrap boundary and re-run layout for the current text. */
+  setMaxWidth(maxWidth) {
+    if (this.maxWidth === maxWidth) return;
+    this.maxWidth = maxWidth;
+    this.queueLayout();
+  }
   setText(text) {
     if (this.text === text && this.layoutResult) return;
     this.text = text;
+    this.queueLayout();
+  }
+  queueLayout() {
     LayoutWorkerManager.getInstance().queueLayout(this.id, this.text, {
       fontId: this.font.id,
       fontSize: this.fontSize,
-      maxWidth: 1e3,
-      // standard wrap boundary
-      maxHeight: 1e3,
+      maxWidth: this.maxWidth,
+      maxHeight: this.maxHeight,
       fontData: this.font.data,
       letterSpacing: this.letterSpacing,
       lineHeight: this.lineHeight,
@@ -1025,6 +1080,18 @@ var MSDFTextEntity = class extends Entity {
       }
     });
   }
+  /**
+   * Mirror the rendered text into the DOM content layer: find-in-page, screen
+   * readers, crawlers, and translation see the same string the canvas draws.
+   */
+  getContentProjection() {
+    if (!this.text) return null;
+    return {
+      text: this.text,
+      font: `${this.fontSize}px ${this.fallbackFont}`,
+      lineHeight: this.lineHeight
+    };
+  }
   isPointInside(globalX, globalY) {
     if (!this.layoutResult) return false;
     const local = this.worldToLocal(globalX, globalY);
@@ -1042,6 +1109,8 @@ var MSDFTextEntity = class extends Entity {
     if (scene && scene.pointRenderer && scene.glCanvas && canUsePointGlyphs) {
       scene.pointRenderer.setMSDFTexture(this.texture, this.font.distanceRange);
       const worldRot = Math.atan2(world.b, world.a);
+      let worldOpacity = this.opacity;
+      for (let p = this.parent; p; p = p.parent) worldOpacity *= p.opacity;
       const len2 = this.layoutResult.codePoints.length;
       for (let i = 0; i < len2; i++) {
         const code = this.layoutResult.codePoints[i];
@@ -1080,7 +1149,7 @@ var MSDFTextEntity = class extends Entity {
           ab.right / aw,
           v1,
           runColor,
-          this.opacity,
+          worldOpacity,
           worldRot
         );
       }

package/dist/components/SplineEntity.d.ts

@@ -96,6 +96,11 @@ export declare class SplineEntity extends Entity {
     private bounds;
     private offscreen;
     private baked;
+    /** Logical (CSS-pixel) size of the baked bitmap — the blit destination size. */
+    private bakedWidth;
+    private bakedHeight;
+    /** Gradient strokes can't be baked to a solid-color bitmap; they render per-frame. */
+    private readonly containsGradient;
     /** Lazily-flattened polylines (one Float32Array of [x,y,...] per segment) for hit-testing. */
     private polylines;
     /**

package/dist/components/TextEntity.d.ts

@@ -1,4 +1,4 @@
-import { Entity } from '../tree/Entity';
+import { Entity, type ContentProjection } from '../tree/Entity';
 import { IRenderer } from '../renderer/IRenderer';
 export declare class TextEntity extends Entity {
     text: string;
@@ -13,6 +13,11 @@ export declare class TextEntity extends Entity {
     lineWidth: number;
     private isHovered;
     constructor(text: string, atlas: any, maxWidth: number, fontSize?: number);
+    /**
+     * Mirror the rendered text into the DOM content layer: find-in-page, screen
+     * readers, crawlers, and translation see the same string the canvas draws.
+     */
+    getContentProjection(): ContentProjection | null;
     /**
      * Replace the text content. Runs the **cold** measurement pass (re-segment +
      * re-measure) since the glyphs changed, then re-lays out.