@vectojs/three 0.1.2 → 0.1.4

package/dist/index.mjs

@@ -1,6 +1,10 @@
 // src/ThreeRenderer.ts
 import { parseColorToRGBA } from "@vectojs/core";
 import * as THREE from "three";
+function parseThreeColor(value) {
+  const [r, g, b, alpha] = parseColorToRGBA(value);
+  return { color: new THREE.Color(r, g, b), alpha };
+}
 var WebGLGradient = class {
   constructor(x0, y0, x1, y1, colorStops) {
     this.x0 = x0;
@@ -73,14 +77,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) {
@@ -92,26 +98,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());
@@ -148,16 +170,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() {
@@ -376,13 +415,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);
@@ -402,31 +443,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;
@@ -436,11 +481,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,
@@ -456,10 +526,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);
@@ -468,12 +540,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
@@ -490,8 +601,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 = {
@@ -503,7 +626,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;
@@ -599,34 +723,51 @@ var ThreeAdapter = class {
         a11yEl.focus();
       }
     } else {
-      const e = originalEvent instanceof MouseEvent ? originalEvent : void 0;
-      const vectoEvent = new VectoJSEvent(type, entity, e, type !== "pointerleave");
+      const vectoEvent = new 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;
@@ -649,6 +790,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)) {
@@ -661,8 +808,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;
+    }
   }
 };
 export {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vectojs/three",
-  "version": "0.1.2",
+  "version": "0.1.4",
   "publishConfig": {
     "access": "public"
   },
@@ -19,7 +19,7 @@
     "dist"
   ],
   "scripts": {
-    "build": "tsup src/index.ts --format cjs,esm --dts --clean",
+    "build": "(cd ../core && bun run build) && tsup src/index.ts --format cjs,esm --clean && tsc -p tsconfig.build.json",
     "test": "vitest run"
   },
   "peerDependencies": {

package/dist/index.d.mts

@@ -1,123 +0,0 @@
-import { IRenderer, Scene, SceneOptions } from '@vectojs/core';
-import * as THREE from 'three';
-
-declare class WebGLGradient {
-    x0: number;
-    y0: number;
-    x1: number;
-    y1: number;
-    colorStops: {
-        stop: number;
-        color: string;
-    }[];
-    type: string;
-    constructor(x0: number, y0: number, x1: number, y1: number, colorStops: {
-        stop: number;
-        color: string;
-    }[]);
-}
-/**
- * WebGL/Three.js implementation of {@link IRenderer}.
- *
- * Bridges VectoJS's 2D canvas API to Three.js for 3D hardware-accelerated rendering.
- */
-declare class ThreeRenderer implements IRenderer {
-    scene: THREE.Scene;
-    camera: THREE.OrthographicCamera;
-    renderer: THREE.WebGLRenderer;
-    private width;
-    private height;
-    private matrix;
-    private stack;
-    private globalAlpha;
-    private alphaStack;
-    private currentPath;
-    private activeObjects;
-    private scissorStack;
-    constructor(canvas: HTMLCanvasElement);
-    resize(width: number, height: number): void;
-    clear(): void;
-    save(): void;
-    restore(): void;
-    translate(x: number, y: number): void;
-    scale(x: number, y: number): void;
-    rotate(angle: number): void;
-    setGlobalAlpha(alpha: number): void;
-    clip(x: number, y: number, width: number, height: number): void;
-    beginPath(): void;
-    moveTo(x: number, y: number): void;
-    lineTo(x: number, y: number): void;
-    bezierCurveTo(cp1x: number, cp1y: number, cp2x: number, cp2y: number, x: number, y: number): void;
-    closePath(): void;
-    arc(x: number, y: number, radius: number, startAngle: number, endAngle: number, counterclockwise?: boolean): void;
-    roundRect(x: number, y: number, width: number, height: number, radii: number | number[]): void;
-    drawImage(source: CanvasImageSource, dx: number, dy: number, dw: number, dh: number): void;
-    fill(colorOrGradient: string | any): void;
-    private fillSolidShape;
-    stroke(colorOrGradient: string | any, lineWidth?: number): void;
-    fillText(text: string, x: number, y: number, font: string, color: string | any): void;
-    fillCircle(cx: number, cy: number, radius: number, color: string, alpha?: number): void;
-    flush(): void;
-    createLinearGradient(x0: number, y0: number, x1: number, y1: number, colorStops: {
-        stop: number;
-        color: string;
-    }[]): any;
-}
-
-interface ThreeAdapterOptions {
-    /** Physical layout width of the 2D UI canvas. */
-    width: number;
-    /** Physical layout height of the 2D UI canvas. */
-    height: number;
-    /** Optional pre-existing canvas element. If omitted, a new canvas is created. */
-    canvas?: HTMLCanvasElement;
-    /** Options passed to the VectoScene constructor. */
-    sceneOptions?: SceneOptions;
-}
-/**
- * Adapts a VectoJS Scene into a Three.js CanvasTexture, allowing VectoJS
- * components to be rendered in 3D space (e.g. on a plane, screen, or VR dashboard).
- */
-declare class ThreeAdapter {
-    /** The Three.js CanvasTexture wrapping the offscreen Vecto canvas. */
-    texture: THREE.CanvasTexture;
-    /** The active VectoJS Scene instance. */
-    vectoScene: Scene;
-    /** The offscreen HTMLCanvasElement on which Vecto draws. */
-    canvas: HTMLCanvasElement;
-    /** A pre-built THREE.Mesh with PlaneGeometry and this texture for immediate use. */
-    mesh: THREE.Mesh;
-    /** Track hover states independently per pointerId for WebXR / Multi-Touch. */
-    private activePointers;
-    constructor(options: ThreeAdapterOptions);
-    /**
-     * Processes 3D Raycasting intersections and forwards pointer/scroll events.
-     * Call this from window/document event listeners passing the raycaster.
-     *
-     * @param raycaster Three.js Raycaster instance.
-     * @param type Pointer event type: 'pointerdown' | 'pointerup' | 'pointermove' | 'wheel' | 'click'.
-     * @param originalEvent Optional original DOM Event to forward scroll deltas or button states.
-     * @returns true if the ray intersected the VectoJS mesh; false otherwise.
-     */
-    updateIntersection(raycaster: THREE.Raycaster, type: 'pointerdown' | 'pointerup' | 'pointermove' | 'wheel' | 'click', originalEvent?: Event): boolean;
-    /**
-     * Dispatches pointer events mapped from UV coordinates [0, 1] to VectoJS entities.
-     */
-    private dispatchAtUv;
-    /**
-     * Routes events to the associated A11y DOM element, or Vecto's own event dispatch system.
-     */
-    private dispatchEventToTarget;
-    private createDOMEvent;
-    private findEntityById;
-    /**
-     * Resizes the offscreen canvas and VectoScene dimensions.
-     */
-    resize(width: number, height: number): void;
-    /**
-     * Disposes of Three.js textures, geometries, and VectoJS scenes to prevent memory leaks.
-     */
-    dispose(): void;
-}
-
-export { ThreeAdapter, type ThreeAdapterOptions, ThreeRenderer, WebGLGradient };