@vectojs/core 0.2.2 → 0.2.4

package/dist/{chunk-LA3FJLP2.js → chunk-TQ4H357Q.js}

@@ -1,6 +1,6 @@
 "use strict";Object.defineProperty(exports, "__esModule", {value: true}); function _nullishCoalesce(lhs, rhsFn) { if (lhs != null) { return lhs; } else { return rhsFn(); } } function _optionalChain(ops) { let lastAccessLHS = undefined; let value = ops[0]; let i = 1; while (i < ops.length) { const op = ops[i]; const fn = ops[i + 1]; i += 2; if ((op === 'optionalAccess' || op === 'optionalCall') && value == null) { return undefined; } if (op === 'access' || op === 'optionalAccess') { lastAccessLHS = value; value = fn(value); } else if (op === 'call' || op === 'optionalCall') { value = fn((...args) => value.call(lastAccessLHS, ...args)); lastAccessLHS = undefined; } } return value; } var _class; var _class2; var _class3; var _class4; var _class5; var _class6; var _class7;
 
-var _chunkRW6NC4RBjs = require('./chunk-RW6NC4RB.js');
+var _chunk76NMTLYLjs = require('./chunk-76NMTLYL.js');
 
 // src/math/SpringPhysics.ts
 var SpringPhysics = (_class = class {
@@ -128,14 +128,16 @@ var VectoJSEvent = (_class3 = class {
   
   /** Whether the event bubbles past its target (capture always runs). */
   
+  
   __init8() {this.stopped = false}
   __init9() {this.stoppedImmediate = false}
-  constructor(type, target, nativeEvent, bubbles = true) {;_class3.prototype.__init8.call(this);_class3.prototype.__init9.call(this);
+  constructor(type, target, nativeEvent, bubbles = true, scenePoint) {;_class3.prototype.__init8.call(this);_class3.prototype.__init9.call(this);
     this.type = type;
     this.target = target;
     this.currentTarget = target;
     this.nativeEvent = nativeEvent;
     this.bubbles = bubbles;
+    this.explicitScenePoint = scenePoint;
   }
   /** Stop the event from reaching the next node in the propagation path. */
   stopPropagation() {
@@ -178,9 +180,54 @@ var VectoJSEvent = (_class3 = class {
   get clientY() {
     return _optionalChain([this, 'access', _12 => _12.nativeEvent, 'optionalAccess', _13 => _13.clientY]);
   }
+  get resolvedScenePoint() {
+    if (this.explicitScenePoint) return this.explicitScenePoint;
+    const native = this.nativeEvent;
+    if (_optionalChain([native, 'optionalAccess', _14 => _14.vectoSceneX]) !== void 0 && native.vectoSceneY !== void 0) {
+      return { x: native.vectoSceneX, y: native.vectoSceneY };
+    }
+    if (_optionalChain([native, 'optionalAccess', _15 => _15.clientX]) === void 0 || native.clientY === void 0) return void 0;
+    const scene = this.target.scene;
+    return _nullishCoalesce(_optionalChain([scene, 'optionalAccess', _16 => _16.clientToScene, 'optionalCall', _17 => _17(native.clientX, native.clientY)]), () => ( {
+      x: native.clientX,
+      y: native.clientY
+    }));
+  }
+  /** Pointer X in the Scene's logical coordinate space. */
+  get sceneX() {
+    return _optionalChain([this, 'access', _18 => _18.resolvedScenePoint, 'optionalAccess', _19 => _19.x]);
+  }
+  /** Pointer Y in the Scene's logical coordinate space. */
+  get sceneY() {
+    return _optionalChain([this, 'access', _20 => _20.resolvedScenePoint, 'optionalAccess', _21 => _21.y]);
+  }
+  /** Pointer X local to the entity whose listener is currently running. */
+  get localX() {
+    const point = this.resolvedScenePoint;
+    if (!point) return void 0;
+    return _optionalChain([this, 'access', _22 => _22.currentTarget, 'access', _23 => _23.worldToLocal, 'call', _24 => _24(point.x, point.y), 'optionalAccess', _25 => _25.x]);
+  }
+  /** Pointer Y local to the entity whose listener is currently running. */
+  get localY() {
+    const point = this.resolvedScenePoint;
+    if (!point) return void 0;
+    return _optionalChain([this, 'access', _26 => _26.currentTarget, 'access', _27 => _27.worldToLocal, 'call', _28 => _28(point.x, point.y), 'optionalAccess', _29 => _29.y]);
+  }
+  get shiftKey() {
+    return !!_optionalChain([this, 'access', _30 => _30.nativeEvent, 'optionalAccess', _31 => _31.shiftKey]);
+  }
+  get ctrlKey() {
+    return !!_optionalChain([this, 'access', _32 => _32.nativeEvent, 'optionalAccess', _33 => _33.ctrlKey]);
+  }
+  get altKey() {
+    return !!_optionalChain([this, 'access', _34 => _34.nativeEvent, 'optionalAccess', _35 => _35.altKey]);
+  }
+  get metaKey() {
+    return !!_optionalChain([this, 'access', _36 => _36.nativeEvent, 'optionalAccess', _37 => _37.metaKey]);
+  }
   /** Native key, if this wraps a keyboard event. */
   get key() {
-    return _optionalChain([this, 'access', _14 => _14.nativeEvent, 'optionalAccess', _15 => _15.key]);
+    return _optionalChain([this, 'access', _38 => _38.nativeEvent, 'optionalAccess', _39 => _39.key]);
   }
 }, _class3);
 var Entity = (_class4 = class {
@@ -412,28 +459,39 @@ var Entity = (_class4 = class {
    * that need to seed a starting state (e.g. the presence helper's enter `from`).
    */
   setImmediate(prop, v) {
+    const existing = this._drivers.get(prop);
+    if (existing) this._settleDriver(existing);
     this._drivers.delete(prop);
     this._applyAnimated(prop, v);
   }
+  _settleDriver(driver) {
+    const active = driver;
+    const onDone = active.onDone;
+    active.onDone = void 0;
+    _optionalChain([onDone, 'optionalCall', _40 => _40()]);
+  }
   _spawnDriver(prop, to, cfg) {
-    if (prop !== "opacity" && _optionalChain([this, 'access', _16 => _16.scene, 'optionalAccess', _17 => _17.prefersReducedMotion])) {
+    if (prop !== "opacity" && _optionalChain([this, 'access', _41 => _41.scene, 'optionalAccess', _42 => _42.prefersReducedMotion])) {
+      const existing2 = this._drivers.get(prop);
+      if (existing2) this._settleDriver(existing2);
       this._drivers.delete(prop);
       this._applyAnimated(prop, to);
       return;
     }
     const existing = this._drivers.get(prop);
     if (existing) {
+      this._settleDriver(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);
-    _optionalChain([this, 'access', _18 => _18.scene, 'optionalAccess', _19 => _19.markDirty, 'call', _20 => _20()]);
+    _optionalChain([this, 'access', _43 => _43.scene, 'optionalAccess', _44 => _44.markDirty, 'call', _45 => _45()]);
   }
   /** Assignment path when a declarative transition is configured for `prop`. */
   _animateProp(prop, to) {
-    const cfg = _optionalChain([this, 'access', _21 => _21._transitions, 'optionalAccess', _22 => _22.get, 'call', _23 => _23(prop)]);
+    const cfg = _optionalChain([this, 'access', _46 => _46._transitions, 'optionalAccess', _47 => _47.get, 'call', _48 => _48(prop)]);
     if (!cfg) {
       this._applyAnimated(prop, to);
       return;
@@ -477,13 +535,13 @@ var Entity = (_class4 = class {
       driver.tick(dt);
       if (driver.isDone()) {
         this._applyAnimated(prop, driver.target);
-        _optionalChain([driver, 'access', _24 => _24.onDone, 'optionalCall', _25 => _25()]);
+        this._settleDriver(driver);
         this._drivers.delete(prop);
       } else {
         this._applyAnimated(prop, driver.value);
       }
     }
-    _optionalChain([this, 'access', _26 => _26.scene, 'optionalAccess', _27 => _27.markDirty, 'call', _28 => _28()]);
+    _optionalChain([this, 'access', _49 => _49.scene, 'optionalAccess', _50 => _50.markDirty, 'call', _51 => _51()]);
   }
   /**
    * Advance the entity's internal state for one frame.
@@ -532,7 +590,7 @@ var Entity = (_class4 = class {
    * @example entity.on('click', (e) => console.log('clicked', e));
    */
   on(event, callback, options) {
-    const map = _optionalChain([options, 'optionalAccess', _29 => _29.capture]) ? this.captureListeners : this.listeners;
+    const map = _optionalChain([options, 'optionalAccess', _52 => _52.capture]) ? this.captureListeners : this.listeners;
     if (!map.has(event)) {
       map.set(event, []);
     }
@@ -548,7 +606,7 @@ var Entity = (_class4 = class {
    * @returns `this` for method chaining.
    */
   off(event, callback, options) {
-    const handlers = (_optionalChain([options, 'optionalAccess', _30 => _30.capture]) ? this.captureListeners : this.listeners).get(event);
+    const handlers = (_optionalChain([options, 'optionalAccess', _53 => _53.capture]) ? this.captureListeners : this.listeners).get(event);
     if (handlers) {
       const idx = handlers.indexOf(callback);
       if (idx !== -1) handlers.splice(idx, 1);
@@ -621,19 +679,95 @@ var Entity = (_class4 = class {
    * @returns World-space {@link Point} for this entity.
    */
   getGlobalPosition() {
-    let px = this.x;
-    let py = this.y;
-    let curr = this.parent;
-    while (curr && curr.id !== "root") {
-      const cos = Math.cos(curr.rotation);
-      const sin = Math.sin(curr.rotation);
-      const rotatedX = px * cos - py * sin;
-      const rotatedY = px * sin + py * cos;
-      px = curr.x + curr.scaleX * rotatedX;
-      py = curr.y + curr.scaleY * rotatedY;
-      curr = curr.parent;
+    return this.localToWorld(0, 0);
+  }
+  /**
+   * Return the exact accumulated Canvas `T * S * R` transform for this entity.
+   */
+  getWorldTransform() {
+    const path = this.id === "root" ? [] : [this];
+    let ancestor = this.parent;
+    while (ancestor && ancestor.id !== "root") {
+      path.push(ancestor);
+      ancestor = ancestor.parent;
     }
-    return { x: px, y: py };
+    let a = 1;
+    let b = 0;
+    let c = 0;
+    let d = 1;
+    let e = 0;
+    let f = 0;
+    for (let i = path.length - 1; i >= 0; i--) {
+      const node = path[i];
+      const cos = Math.cos(node.rotation);
+      const sin = Math.sin(node.rotation);
+      const la = node.scaleX * cos;
+      const lb = node.scaleY * sin;
+      const lc = -node.scaleX * sin;
+      const ld = node.scaleY * cos;
+      const le = node.x;
+      const lf = node.y;
+      const nextA = a * la + c * lb;
+      const nextB = b * la + d * lb;
+      const nextC = a * lc + c * ld;
+      const nextD = b * lc + d * ld;
+      const nextE = a * le + c * lf + e;
+      const nextF = b * le + d * lf + f;
+      a = nextA;
+      b = nextB;
+      c = nextC;
+      d = nextD;
+      e = nextE;
+      f = nextF;
+    }
+    return { a, b, c, d, e, f };
+  }
+  /** Convert a point from this entity's local space to Scene/world space. */
+  localToWorld(localX, localY) {
+    const { a, b, c, d, e, f } = this.getWorldTransform();
+    return {
+      x: a * localX + c * localY + e,
+      y: b * localX + d * localY + f
+    };
+  }
+  /**
+   * Convert a Scene/world point into this entity's local space.
+   * Returns `null` when the accumulated transform is singular.
+   */
+  worldToLocal(worldX, worldY) {
+    const { a, b, c, d, e, f } = this.getWorldTransform();
+    const determinant = a * d - b * c;
+    if (!Number.isFinite(determinant) || Math.abs(determinant) < 1e-12) return null;
+    const x = worldX - e;
+    const y = worldY - f;
+    return {
+      x: (d * x - c * y) / determinant,
+      y: (-b * x + a * y) / determinant
+    };
+  }
+  /**
+   * Return the entity's local bounds transformed into a world-space AABB.
+   * Falls back to the entity's `[0, 0, width, height]` box when `getBounds()`
+   * does not provide a render-specific box.
+   */
+  getWorldBounds() {
+    const bounds = _nullishCoalesce(this.getBounds(), () => ( { x: 0, y: 0, width: this.width, height: this.height }));
+    const { a, b, c, d, e, f } = this.getWorldTransform();
+    let minX = Infinity;
+    let minY = Infinity;
+    let maxX = -Infinity;
+    let maxY = -Infinity;
+    for (let i = 0; i < 4; i++) {
+      const localX = i & 1 ? bounds.x + bounds.width : bounds.x;
+      const localY = i & 2 ? bounds.y + bounds.height : bounds.y;
+      const worldX = a * localX + c * localY + e;
+      const worldY = b * localX + d * localY + f;
+      minX = Math.min(minX, worldX);
+      minY = Math.min(minY, worldY);
+      maxX = Math.max(maxX, worldX);
+      maxY = Math.max(maxY, worldY);
+    }
+    return { x: minX, y: minY, width: maxX - minX, height: maxY - minY };
   }
   /**
    * Accumulated world scale factors: this entity's own `scaleX`/`scaleY` times
@@ -705,12 +839,12 @@ var Entity = (_class4 = class {
    * Opt into the renderer's draw-call batching fast-path for point-cloud /
    * particle entities that draw as a single filled circle at their local origin.
    *
-   * When a leaf entity returns a {@link BatchCircle} and has uniform scale, the
-   * {@link Scene} skips its per-entity `save`/`translate`/`scale`/`rotate`/
-   * `restore` and {@link render}, emitting the circle through
-   * {@link IRenderer.fillCircle} so runs of same-color siblings coalesce into a
-   * single `fill()`. Returns `null` by default (normal render path). Read each
-   * frame, so an animated color/radius is honored.
+   * When a leaf entity returns a {@link BatchCircle} and its accumulated
+   * transform is representable by the selected batch backend, the {@link Scene}
+   * skips its per-entity `save`/`translate`/`scale`/`rotate`/`restore` and
+   * {@link render}. Canvas mode or an unsupported affine transform uses the
+   * normal render path, so implementations must keep {@link render} correct.
+   * Returns `null` by default. Read each frame, so animated color/radius works.
    *
    * @returns The circle to batch, or `null` to use the normal {@link render} path.
    */
@@ -874,7 +1008,7 @@ var MSDFTextEntity = (_class6 = class extends Entity {
   setText(text) {
     if (this.text === text && this.layoutResult) return;
     this.text = text;
-    _chunkRW6NC4RBjs.LayoutWorkerManager.getInstance().queueLayout(this.id, this.text, {
+    _chunk76NMTLYLjs.LayoutWorkerManager.getInstance().queueLayout(this.id, this.text, {
       fontId: this.font.id,
       fontSize: this.fontSize,
       maxWidth: 1e3,
@@ -887,28 +1021,27 @@ var MSDFTextEntity = (_class6 = class extends Entity {
         if (res.seqId < this.lastRenderedSeqId) return;
         this.lastRenderedSeqId = res.seqId;
         this.layoutResult = res;
-        _optionalChain([this, 'access', _31 => _31.scene, 'optionalAccess', _32 => _32.markDirty, 'call', _33 => _33()]);
+        _optionalChain([this, 'access', _54 => _54.scene, 'optionalAccess', _55 => _55.markDirty, 'call', _56 => _56()]);
       }
     });
   }
   isPointInside(globalX, globalY) {
     if (!this.layoutResult) return false;
-    const pos = this.getGlobalPosition();
-    const scale = this.getWorldScale();
-    const lx = (globalX - pos.x) / scale.x;
-    const ly = (globalY - pos.y) / scale.y;
-    return lx >= 0 && lx <= this.layoutResult.width && ly >= 0 && ly <= this.layoutResult.height;
+    const local = this.worldToLocal(globalX, globalY);
+    if (!local) return false;
+    return local.x >= 0 && local.x <= this.layoutResult.width && local.y >= 0 && local.y <= this.layoutResult.height;
   }
   render(renderer) {
     if (!this.layoutResult) return;
     const scene = this.scene;
-    if (scene && scene.pointRenderer && scene.glCanvas) {
+    const world = this.getWorldTransform();
+    const worldScaleX = Math.hypot(world.a, world.b);
+    const worldScaleY = Math.hypot(world.c, world.d);
+    const orthogonalTolerance = Math.max(1, worldScaleX * worldScaleY) * 1e-6;
+    const canUsePointGlyphs = Number.isFinite(worldScaleX) && Number.isFinite(worldScaleY) && world.a * world.d - world.b * world.c >= 0 && Math.abs(world.a * world.c + world.b * world.d) <= orthogonalTolerance;
+    if (scene && scene.pointRenderer && scene.glCanvas && canUsePointGlyphs) {
       scene.pointRenderer.setMSDFTexture(this.texture, this.font.distanceRange);
-      const globalPos = this.getGlobalPosition();
-      const scale = this.getWorldScale();
-      const worldRot = this.getWorldRotation();
-      const rCos = Math.cos(worldRot);
-      const rSin = Math.sin(worldRot);
+      const worldRot = Math.atan2(world.b, world.a);
       const len2 = this.layoutResult.codePoints.length;
       for (let i = 0; i < len2; i++) {
         const code = this.layoutResult.codePoints[i];
@@ -920,12 +1053,12 @@ var MSDFTextEntity = (_class6 = class extends Entity {
         const { atlasBounds: ab, planeBounds: pb } = def;
         const aw = this.font.atlasWidth;
         const ah = this.font.atlasHeight;
-        const lx = (nodeX + pb.left * this.fontSize) * scale.x;
-        const ly = (nodeY - pb.top * this.fontSize) * scale.y;
-        const glyphX = globalPos.x + lx * rCos - ly * rSin;
-        const glyphY = globalPos.y + lx * rSin + ly * rCos;
-        const glyphW = (pb.right - pb.left) * this.fontSize * scale.x;
-        const glyphH = (pb.top - pb.bottom) * this.fontSize * scale.y;
+        const lx = nodeX + pb.left * this.fontSize;
+        const ly = nodeY - pb.top * this.fontSize;
+        const glyphX = world.a * lx + world.c * ly + world.e;
+        const glyphY = world.b * lx + world.d * ly + world.f;
+        const glyphW = (pb.right - pb.left) * this.fontSize * worldScaleX;
+        const glyphH = (pb.top - pb.bottom) * this.fontSize * worldScaleY;
         const v0 = this.font.data.atlas.yOrigin === "bottom" ? 1 - ab.top / ah : ab.top / ah;
         const v1 = this.font.data.atlas.yOrigin === "bottom" ? 1 - ab.bottom / ah : ab.bottom / ah;
         const colorVal = packedStyle >>> 8;
@@ -979,12 +1112,42 @@ var MSDFTextEntity = (_class6 = class extends Entity {
     }
   }
   destroy() {
-    _chunkRW6NC4RBjs.LayoutWorkerManager.getInstance().cancelLayout(this.id);
+    _chunk76NMTLYLjs.LayoutWorkerManager.getInstance().cancelLayout(this.id);
     super.destroy();
   }
 }, _class6);
 
 // src/text/SVGEntity.ts
+function isSvgWhitespace(ch) {
+  return ch === " " || ch === "	" || ch === "\n" || ch === "\r";
+}
+function readSvgAttribute(source, name) {
+  const lowerSource = source.toLowerCase();
+  const svgStart = lowerSource.indexOf("<svg");
+  if (svgStart < 0) return null;
+  const tagEnd = source.indexOf(">", svgStart + 4);
+  if (tagEnd < 0) return null;
+  const tag = source.slice(svgStart + 4, tagEnd);
+  const lowerTag = tag.toLowerCase();
+  const lowerName = name.toLowerCase();
+  for (let i = 0; i < tag.length; i++) {
+    const before = i === 0 ? " " : tag[i - 1];
+    if (!isSvgWhitespace(before)) continue;
+    if (!lowerTag.startsWith(lowerName, i)) continue;
+    let cursor = i + lowerName.length;
+    while (cursor < tag.length && isSvgWhitespace(tag[cursor])) cursor++;
+    if (tag[cursor] !== "=") continue;
+    cursor++;
+    while (cursor < tag.length && isSvgWhitespace(tag[cursor])) cursor++;
+    const quote = tag[cursor];
+    if (quote !== '"' && quote !== "'") continue;
+    const valueStart = cursor + 1;
+    const valueEnd = tag.indexOf(quote, valueStart);
+    if (valueEnd < 0) return null;
+    return tag.slice(valueStart, valueEnd);
+  }
+  return null;
+}
 var SVGEntity = (_class7 = class extends Entity {
   __init40() {this.svgSource = ""}
   __init41() {this.imageBitmap = null}
@@ -1036,17 +1199,17 @@ var SVGEntity = (_class7 = class extends Entity {
           }
         }
       } catch (e) {
-        console.error("Failed parsing SVG via DOMParser, falling back to regex:", e);
+        console.error("Failed parsing SVG via DOMParser, falling back to attribute scan:", e);
       }
     } else {
-      const wMatch = /<svg[^>]*\bwidth\s*=\s*["']([^"']+)["']/i.exec(this.svgSource);
-      const hMatch = /<svg[^>]*\bheight\s*=\s*["']([^"']+)["']/i.exec(this.svgSource);
-      const vbMatch = /<svg[^>]*\bviewBox\s*=\s*["']([^"']+)["']/i.exec(this.svgSource);
-      if (wMatch && hMatch) {
-        width = parseFloat(wMatch[1]) || 100;
-        height = parseFloat(hMatch[1]) || 100;
-      } else if (vbMatch) {
-        const parts = vbMatch[1].split(/[\s,]+/).map(parseFloat);
+      const wAttr = readSvgAttribute(this.svgSource, "width");
+      const hAttr = readSvgAttribute(this.svgSource, "height");
+      const vbAttr = readSvgAttribute(this.svgSource, "viewBox");
+      if (wAttr && hAttr) {
+        width = parseFloat(wAttr) || 100;
+        height = parseFloat(hAttr) || 100;
+      } else if (vbAttr) {
+        const parts = vbAttr.split(/[\s,]+/).map(parseFloat);
         if (parts.length === 4) {
           width = parts[2];
           height = parts[3];
@@ -1138,22 +1301,14 @@ var SVGEntity = (_class7 = class extends Entity {
     img.src = this.blobURL;
   }
   isPointInside(globalX, globalY) {
-    const pos = this.getGlobalPosition();
-    const scale = this.getWorldScale();
-    const rot = this.getWorldRotation();
-    const dx = globalX - pos.x;
-    const dy = globalY - pos.y;
-    const cos = Math.cos(-rot);
-    const sin = Math.sin(-rot);
-    const lx = (dx * cos - dy * sin) / scale.x;
-    const ly = (dx * sin + dy * cos) / scale.y;
-    return lx >= 0 && lx <= this.width && ly >= 0 && ly <= this.height;
+    const local = this.worldToLocal(globalX, globalY);
+    if (!local) return false;
+    return local.x >= 0 && local.x <= this.width && local.y >= 0 && local.y <= this.height;
   }
   render(r) {
-    const isSVGExporter = typeof r.toXMLString === "function";
-    if (isSVGExporter) {
-      const dataUri = "data:image/svg+xml;charset=utf-8," + encodeURIComponent(this.svgSource);
-      r.drawImage({ src: dataUri }, 0, 0, this.width, this.height);
+    const svgRenderer = r;
+    if (typeof svgRenderer.drawSVG === "function") {
+      svgRenderer.drawSVG(this.svgSource, 0, 0, this.width, this.height);
       return;
     }
     const scale = this.getWorldScale();