@vectojs/three 0.1.2 → 0.1.4

package/dist/index.js

@@ -39,6 +39,10 @@ module.exports = __toCommonJS(index_exports);
 // src/ThreeRenderer.ts
 var import_core = require("@vectojs/core");
 var THREE = __toESM(require("three"));
+function parseThreeColor(value) {
+  const [r, g, b, alpha] = (0, import_core.parseColorToRGBA)(value);
+  return { color: new THREE.Color(r, g, b), alpha };
+}
 var WebGLGradient = class {
   constructor(x0, y0, x1, y1, colorStops) {
     this.x0 = x0;
@@ -111,14 +115,16 @@ var ThreeRenderer = class {
   activeObjects = [];
   scissorStack = [];
   constructor(canvas) {
-    this.width = window.innerWidth;
-    this.height = window.innerHeight;
+    const cw = canvas.width > 0 ? canvas.width : typeof window !== "undefined" ? window.innerWidth : 1024;
+    const ch = canvas.height > 0 ? canvas.height : typeof window !== "undefined" ? window.innerHeight : 1024;
+    this.width = cw;
+    this.height = ch;
     this.scene = new THREE.Scene();
     this.camera = new THREE.OrthographicCamera(0, this.width, 0, this.height, 0.1, 1e3);
     this.camera.position.z = 1;
     this.renderer = new THREE.WebGLRenderer({ canvas, alpha: true, antialias: true });
     this.renderer.setSize(this.width, this.height);
-    this.renderer.setPixelRatio(window.devicePixelRatio || 1);
+    this.renderer.setPixelRatio(typeof window !== "undefined" ? window.devicePixelRatio || 1 : 1);
     this.matrix = new THREE.Matrix4().identity();
   }
   resize(width, height) {
@@ -130,26 +136,42 @@ var ThreeRenderer = class {
     this.camera.updateProjectionMatrix();
   }
   clear() {
-    for (const obj of this.activeObjects) {
-      this.scene.remove(obj);
-      if (obj instanceof THREE.Mesh || obj instanceof THREE.Line) {
-        obj.geometry.dispose();
-        if (Array.isArray(obj.material)) {
-          for (const mat of obj.material) {
-            mat.dispose();
-            if (mat.map) mat.map.dispose();
-          }
-        } else {
-          obj.material.dispose();
-          if (obj.material.map) {
-            obj.material.map.dispose();
-          }
+    this.disposeActiveObjects();
+    this.currentPath = null;
+    this.matrix.identity();
+    this.stack.length = 0;
+    this.globalAlpha = 1;
+    this.alphaStack.length = 0;
+    this.scissorStack.length = 0;
+    this.renderer.clear();
+    this.renderer.setScissorTest(false);
+  }
+  disposeActiveObjects() {
+    const disposedGeometries = /* @__PURE__ */ new Set();
+    const disposedMaterials = /* @__PURE__ */ new Set();
+    const disposedTextures = /* @__PURE__ */ new Set();
+    for (const object of this.activeObjects) {
+      this.scene.remove(object);
+      if (!(object instanceof THREE.Mesh || object instanceof THREE.Line)) continue;
+      const geometry = object.geometry;
+      if (!disposedGeometries.has(geometry)) {
+        disposedGeometries.add(geometry);
+        geometry.dispose();
+      }
+      const materials = Array.isArray(object.material) ? object.material : [object.material];
+      for (const material of materials) {
+        const map = material.map;
+        if (map && !map.userData.vectoCached && !disposedTextures.has(map)) {
+          disposedTextures.add(map);
+          map.dispose();
+        }
+        if (!disposedMaterials.has(material)) {
+          disposedMaterials.add(material);
+          material.dispose();
         }
       }
     }
-    this.activeObjects = [];
-    this.renderer.clear();
-    this.renderer.setScissorTest(false);
+    this.activeObjects.length = 0;
   }
   save() {
     this.stack.push(this.matrix.clone());
@@ -186,16 +208,33 @@ var ThreeRenderer = class {
     this.globalAlpha = alpha;
   }
   clip(x, y, width, height) {
-    const pos = new THREE.Vector3(x, y, 0).applyMatrix4(this.matrix);
-    const size = new THREE.Vector3(width, height, 0).applyMatrix4(this.matrix).sub(new THREE.Vector3(0, 0, 0).applyMatrix4(this.matrix));
-    const dpr = window.devicePixelRatio || 1;
+    const corners = [
+      new THREE.Vector3(x, y, 0),
+      new THREE.Vector3(x + width, y, 0),
+      new THREE.Vector3(x, y + height, 0),
+      new THREE.Vector3(x + width, y + height, 0)
+    ].map((point) => point.applyMatrix4(this.matrix));
+    const minX = Math.min(...corners.map((point) => point.x));
+    const minY = Math.min(...corners.map((point) => point.y));
+    const maxX = Math.max(...corners.map((point) => point.x));
+    const maxY = Math.max(...corners.map((point) => point.y));
+    const dpr = this.renderer.getPixelRatio() || 1;
     const canvasHeight = this.renderer.domElement.height / dpr;
-    this.renderer.setScissor(
-      pos.x * dpr,
-      (canvasHeight - (pos.y + size.y)) * dpr,
-      size.x * dpr,
-      size.y * dpr
-    );
+    let scissorX = minX * dpr;
+    let scissorY = (canvasHeight - maxY) * dpr;
+    let scissorWidth = (maxX - minX) * dpr;
+    let scissorHeight = (maxY - minY) * dpr;
+    if (this.renderer.getScissorTest()) {
+      const current = new THREE.Vector4();
+      this.renderer.getScissor(current);
+      const right = Math.min(scissorX + scissorWidth, current.x + current.z);
+      const top = Math.min(scissorY + scissorHeight, current.y + current.w);
+      scissorX = Math.max(scissorX, current.x);
+      scissorY = Math.max(scissorY, current.y);
+      scissorWidth = Math.max(0, right - scissorX);
+      scissorHeight = Math.max(0, top - scissorY);
+    }
+    this.renderer.setScissor(scissorX, scissorY, scissorWidth, scissorHeight);
     this.renderer.setScissorTest(true);
   }
   beginPath() {
@@ -414,13 +453,15 @@ var ThreeRenderer = class {
   fillSolidShape(colorOrGradient) {
     if (!this.currentPath) return;
     const color = typeof colorOrGradient === "string" ? colorOrGradient : "#ffffff";
+    const parsed = parseThreeColor(color);
     const shapes = this.currentPath.toShapes();
     for (const shape of shapes) {
       const geometry = new THREE.ShapeGeometry(shape);
+      const opacity = this.globalAlpha * parsed.alpha;
       const material = new THREE.MeshBasicMaterial({
-        color: new THREE.Color(color),
-        transparent: this.globalAlpha < 1,
-        opacity: this.globalAlpha,
+        color: parsed.color,
+        transparent: opacity < 1,
+        opacity,
         depthWrite: false
       });
       const mesh = new THREE.Mesh(geometry, material);
@@ -440,31 +481,35 @@ var ThreeRenderer = class {
         color = grad.colorStops[0].color;
       }
     }
-    const points = this.currentPath.getPoints();
-    if (points.length === 0) return;
-    const geometry = new THREE.BufferGeometry().setFromPoints(points);
-    const material = new THREE.LineBasicMaterial({
-      color: new THREE.Color(color),
-      transparent: this.globalAlpha < 1,
-      opacity: this.globalAlpha,
-      linewidth: lineWidth
-    });
-    const line = new THREE.Line(geometry, material);
-    line.applyMatrix4(this.matrix);
-    this.scene.add(line);
-    this.activeObjects.push(line);
+    const parsed = parseThreeColor(color);
+    const opacity = this.globalAlpha * parsed.alpha;
+    for (const shape of this.currentPath.toShapes()) {
+      const points = shape.getPoints();
+      if (points.length < 2) continue;
+      const geometry = new THREE.BufferGeometry().setFromPoints(points);
+      const material = new THREE.LineBasicMaterial({
+        color: parsed.color,
+        transparent: opacity < 1,
+        opacity,
+        linewidth: lineWidth
+      });
+      const line = new THREE.Line(geometry, material);
+      line.applyMatrix4(this.matrix);
+      this.scene.add(line);
+      this.activeObjects.push(line);
+    }
   }
+  /**
+   * Rasterized fillText textures keyed by `font|color|text`, LRU-evicted.
+   * HUD-style UIs redraw the same labels every frame; without the cache each
+   * call allocated a canvas, rasterized it, and uploaded a fresh GPU texture.
+   * Entries are skipped by {@link disposeActiveObjects} (flagged via
+   * `userData.vectoCached`) and released on eviction or {@link dispose}.
+   */
+  textTextureCache = /* @__PURE__ */ new Map();
+  textTextureCacheLimit = 256;
   fillText(text, x, y, font, color) {
     if (typeof document === "undefined") return;
-    const canvas = document.createElement("canvas");
-    const ctx = canvas.getContext("2d");
-    ctx.font = font;
-    const width = Math.max(1, Math.ceil(ctx.measureText(text).width));
-    const fontSize = parseInt(font) || 16;
-    const height = Math.max(1, Math.ceil(fontSize * 1.5));
-    canvas.width = width;
-    canvas.height = height;
-    ctx.font = font;
     let fillCol = "#ffffff";
     if (typeof color === "string") {
       fillCol = color;
@@ -474,11 +519,36 @@ var ThreeRenderer = class {
         fillCol = grad.colorStops[0].color;
       }
     }
-    ctx.fillStyle = fillCol;
-    ctx.textBaseline = "alphabetic";
-    ctx.fillText(text, 0, fontSize);
-    const texture = new THREE.CanvasTexture(canvas);
-    texture.minFilter = THREE.LinearFilter;
+    const cacheKey = `${font}|${fillCol}|${text}`;
+    let entry = this.textTextureCache.get(cacheKey);
+    if (entry) {
+      this.textTextureCache.delete(cacheKey);
+      this.textTextureCache.set(cacheKey, entry);
+    } else {
+      const canvas = document.createElement("canvas");
+      const ctx = canvas.getContext("2d");
+      ctx.font = font;
+      const width2 = Math.max(1, Math.ceil(ctx.measureText(text).width));
+      const fontSize2 = parseInt(font) || 16;
+      const height2 = Math.max(1, Math.ceil(fontSize2 * 1.5));
+      canvas.width = width2;
+      canvas.height = height2;
+      ctx.font = font;
+      ctx.fillStyle = fillCol;
+      ctx.textBaseline = "alphabetic";
+      ctx.fillText(text, 0, fontSize2);
+      const texture2 = new THREE.CanvasTexture(canvas);
+      texture2.minFilter = THREE.LinearFilter;
+      texture2.userData.vectoCached = true;
+      entry = { texture: texture2, width: width2, height: height2, fontSize: fontSize2 };
+      this.textTextureCache.set(cacheKey, entry);
+      while (this.textTextureCache.size > Math.max(1, this.textTextureCacheLimit)) {
+        const oldestKey = this.textTextureCache.keys().next().value;
+        this.textTextureCache.get(oldestKey).texture.dispose();
+        this.textTextureCache.delete(oldestKey);
+      }
+    }
+    const { texture, width, height, fontSize } = entry;
     const material = new THREE.MeshBasicMaterial({
       map: texture,
       transparent: true,
@@ -494,10 +564,12 @@ var ThreeRenderer = class {
   }
   fillCircle(cx, cy, radius, color, alpha = 1) {
     const geometry = new THREE.CircleGeometry(radius, 32);
+    const parsed = parseThreeColor(color);
+    const opacity = this.globalAlpha * alpha * parsed.alpha;
     const material = new THREE.MeshBasicMaterial({
-      color: new THREE.Color(color),
-      transparent: this.globalAlpha * alpha < 1,
-      opacity: this.globalAlpha * alpha,
+      color: parsed.color,
+      transparent: opacity < 1,
+      opacity,
       depthWrite: false
     });
     const mesh = new THREE.Mesh(geometry, material);
@@ -506,12 +578,51 @@ var ThreeRenderer = class {
     this.scene.add(mesh);
     this.activeObjects.push(mesh);
   }
+  frameDirty = false;
+  presentScheduled = false;
+  /**
+   * The Scene calls flush() around every non-batched node (it commits the
+   * Canvas2D circle batch there). Rendering the whole Three scene on each of
+   * those calls made a frame cost O(N²) in entity count, so flush() only marks
+   * the frame dirty; the actual GL render happens once, in {@link present}.
+   *
+   * A microtask fallback keeps older `@vectojs/core` Scenes (that never call
+   * `present()`) painting: the many same-tick flushes coalesce into one render.
+   */
   flush() {
+    this.frameDirty = true;
+    if (this.presentScheduled) return;
+    this.presentScheduled = true;
+    queueMicrotask(() => {
+      this.presentScheduled = false;
+      if (this.frameDirty && !this.disposed) this.present();
+    });
+  }
+  /** Render the accumulated frame once. Called by Scene at the end of each render pass. */
+  present() {
+    if (this.disposed) return;
+    this.frameDirty = false;
     this.renderer.render(this.scene, this.camera);
   }
   createLinearGradient(x0, y0, x1, y1, colorStops) {
     return new WebGLGradient(x0, y0, x1, y1, colorStops);
   }
+  disposed = false;
+  dispose() {
+    if (this.disposed) return;
+    this.disposed = true;
+    this.disposeActiveObjects();
+    for (const entry of this.textTextureCache.values()) {
+      entry.texture.dispose();
+    }
+    this.textTextureCache.clear();
+    this.currentPath = null;
+    this.stack.length = 0;
+    this.alphaStack.length = 0;
+    this.scissorStack.length = 0;
+    this.renderer.setScissorTest(false);
+    this.renderer.dispose();
+  }
 };
 
 // src/ThreeAdapter.ts
@@ -528,8 +639,20 @@ var ThreeAdapter = class {
   mesh;
   /** Track hover states independently per pointerId for WebXR / Multi-Touch. */
   activePointers = /* @__PURE__ */ new Map();
+  /**
+   * Holds the original `vectoScene.render` reference so {@link dispose} can
+   * restore it. Without restoring, a later render call would write
+   * `needsUpdate` on a disposed (deleted) `CanvasTexture`, which Three.js
+   * flags with `"THREE.Texture: trying to use deleted texture"`.
+   */
+  _originalRender = null;
+  /** Tracks whether this adapter owns the canvas it is rendering to. */
+  _ownsCanvas;
+  _disposed = false;
   constructor(options) {
-    this.canvas = options.canvas || (typeof document !== "undefined" ? document.createElement("canvas") : { width: options.width, height: options.height });
+    const optCanvas = options.canvas;
+    this._ownsCanvas = !optCanvas;
+    this.canvas = optCanvas || (typeof document !== "undefined" ? document.createElement("canvas") : { width: options.width, height: options.height });
     this.canvas.width = options.width;
     this.canvas.height = options.height;
     const sceneOptions = {
@@ -541,7 +664,8 @@ var ThreeAdapter = class {
     this.texture = new THREE2.CanvasTexture(this.canvas);
     this.texture.minFilter = THREE2.LinearFilter;
     this.texture.magFilter = THREE2.LinearFilter;
-    const originalRender = this.vectoScene.render;
+    this._originalRender = this.vectoScene.render;
+    const originalRender = this._originalRender;
     this.vectoScene.render = (renderer, dt, time) => {
       originalRender.call(this.vectoScene, renderer, dt, time);
       this.texture.needsUpdate = true;
@@ -637,34 +761,51 @@ var ThreeAdapter = class {
         a11yEl.focus();
       }
     } else {
-      const e = originalEvent instanceof MouseEvent ? originalEvent : void 0;
-      const vectoEvent = new import_core2.VectoJSEvent(type, entity, e, type !== "pointerleave");
+      const vectoEvent = new import_core2.VectoJSEvent(type, entity, originalEvent, type !== "pointerleave", {
+        x,
+        y
+      });
       entity.dispatchEvent(vectoEvent);
     }
   }
   createDOMEvent(type, x, y, pointerId, originalEvent) {
+    let event;
     if (type === "wheel") {
       const wheelE = originalEvent instanceof WheelEvent ? originalEvent : void 0;
-      return new WheelEvent("wheel", {
+      event = new WheelEvent("wheel", {
         clientX: x,
         clientY: y,
         deltaX: wheelE ? wheelE.deltaX : 0,
         deltaY: wheelE ? wheelE.deltaY : 0,
         deltaZ: wheelE ? wheelE.deltaZ : 0,
         deltaMode: wheelE ? wheelE.deltaMode : 0,
+        shiftKey: wheelE ? wheelE.shiftKey : false,
+        ctrlKey: wheelE ? wheelE.ctrlKey : false,
+        altKey: wheelE ? wheelE.altKey : false,
+        metaKey: wheelE ? wheelE.metaKey : false,
+        bubbles: true,
+        cancelable: true
+      });
+    } else {
+      event = new PointerEvent(type, {
+        clientX: x,
+        clientY: y,
+        button: originalEvent instanceof MouseEvent ? originalEvent.button : 0,
+        buttons: originalEvent instanceof MouseEvent ? originalEvent.buttons : 0,
+        pointerId,
+        shiftKey: originalEvent instanceof MouseEvent ? originalEvent.shiftKey : false,
+        ctrlKey: originalEvent instanceof MouseEvent ? originalEvent.ctrlKey : false,
+        altKey: originalEvent instanceof MouseEvent ? originalEvent.altKey : false,
+        metaKey: originalEvent instanceof MouseEvent ? originalEvent.metaKey : false,
         bubbles: true,
         cancelable: true
       });
     }
-    return new PointerEvent(type, {
-      clientX: x,
-      clientY: y,
-      button: originalEvent instanceof MouseEvent ? originalEvent.button : 0,
-      buttons: originalEvent instanceof MouseEvent ? originalEvent.buttons : 0,
-      pointerId,
-      bubbles: true,
-      cancelable: true
+    Object.defineProperties(event, {
+      vectoSceneX: { value: x },
+      vectoSceneY: { value: y }
     });
+    return event;
   }
   findEntityById(root, id) {
     if (root.id === id) return root;
@@ -687,6 +828,12 @@ var ThreeAdapter = class {
    * Disposes of Three.js textures, geometries, and VectoJS scenes to prevent memory leaks.
    */
   dispose() {
+    if (this._disposed) return;
+    this._disposed = true;
+    if (this._originalRender) {
+      this.vectoScene.render = this._originalRender;
+      this._originalRender = null;
+    }
     this.texture.dispose();
     this.mesh.geometry.dispose();
     if (Array.isArray(this.mesh.material)) {
@@ -699,8 +846,10 @@ var ThreeAdapter = class {
     }
     this.vectoScene.destroy();
     this.activePointers.clear();
-    this.canvas.width = 0;
-    this.canvas.height = 0;
+    if (this._ownsCanvas) {
+      this.canvas.width = 0;
+      this.canvas.height = 0;
+    }
   }
 };
 // Annotate the CommonJS export names for ESM import in node: