@vectojs/three 0.1.1 → 0.1.3

package/dist/ThreeAdapter.d.ts

@@ -0,0 +1,67 @@
+import * as THREE from 'three';
+import { Scene as VectoScene, SceneOptions } from '@vectojs/core';
+export 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).
+ */
+export declare class ThreeAdapter {
+    /** The Three.js CanvasTexture wrapping the offscreen Vecto canvas. */
+    texture: THREE.CanvasTexture;
+    /** The active VectoJS Scene instance. */
+    vectoScene: VectoScene;
+    /** 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;
+    /**
+     * 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"`.
+     */
+    private _originalRender;
+    /** Tracks whether this adapter owns the canvas it is rendering to. */
+    private _ownsCanvas;
+    private _disposed;
+    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;
+}

package/dist/ThreeRenderer.d.ts

@@ -0,0 +1,67 @@
+import { IRenderer } from '@vectojs/core';
+import * as THREE from 'three';
+export 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.
+ */
+export 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;
+    private disposeActiveObjects;
+    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;
+    private disposed;
+    dispose(): void;
+}

package/dist/index.d.ts

@@ -1,123 +1,2 @@
-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 };
+export * from './ThreeRenderer';
+export * from './ThreeAdapter';

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 && !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 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 = window.devicePixelRatio || 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);
@@ -443,10 +484,12 @@ var ThreeRenderer = class {
     const points = this.currentPath.getPoints();
     if (points.length === 0) return;
     const geometry = new THREE.BufferGeometry().setFromPoints(points);
+    const parsed = parseThreeColor(color);
+    const opacity = this.globalAlpha * parsed.alpha;
     const material = new THREE.LineBasicMaterial({
-      color: new THREE.Color(color),
-      transparent: this.globalAlpha < 1,
-      opacity: this.globalAlpha,
+      color: parsed.color,
+      transparent: opacity < 1,
+      opacity,
       linewidth: lineWidth
     });
     const line = new THREE.Line(geometry, material);
@@ -494,10 +537,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);
@@ -512,6 +557,18 @@ var ThreeRenderer = class {
   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();
+    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 +585,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 +610,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;
@@ -590,8 +660,8 @@ var ThreeAdapter = class {
    * Dispatches pointer events mapped from UV coordinates [0, 1] to VectoJS entities.
    */
   dispatchAtUv(type, uv, pointerId, originalEvent) {
-    const px = uv.x * this.canvas.width;
-    const py = (1 - uv.y) * this.canvas.height;
+    const px = uv.x * this.vectoScene.width;
+    const py = (1 - uv.y) * this.vectoScene.height;
     this.vectoScene.markDirty();
     const hitEntity = this.vectoScene.findEntityAt(px, py);
     const state = this.activePointers.get(pointerId);
@@ -637,34 +707,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 +774,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 +792,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:

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 && !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 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 = window.devicePixelRatio || 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);
@@ -405,10 +446,12 @@ var ThreeRenderer = class {
     const points = this.currentPath.getPoints();
     if (points.length === 0) return;
     const geometry = new THREE.BufferGeometry().setFromPoints(points);
+    const parsed = parseThreeColor(color);
+    const opacity = this.globalAlpha * parsed.alpha;
     const material = new THREE.LineBasicMaterial({
-      color: new THREE.Color(color),
-      transparent: this.globalAlpha < 1,
-      opacity: this.globalAlpha,
+      color: parsed.color,
+      transparent: opacity < 1,
+      opacity,
       linewidth: lineWidth
     });
     const line = new THREE.Line(geometry, material);
@@ -456,10 +499,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);
@@ -474,6 +519,18 @@ var ThreeRenderer = class {
   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();
+    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 +547,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 +572,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;
@@ -552,8 +622,8 @@ var ThreeAdapter = class {
    * Dispatches pointer events mapped from UV coordinates [0, 1] to VectoJS entities.
    */
   dispatchAtUv(type, uv, pointerId, originalEvent) {
-    const px = uv.x * this.canvas.width;
-    const py = (1 - uv.y) * this.canvas.height;
+    const px = uv.x * this.vectoScene.width;
+    const py = (1 - uv.y) * this.vectoScene.height;
     this.vectoScene.markDirty();
     const hitEntity = this.vectoScene.findEntityAt(px, py);
     const state = this.activePointers.get(pointerId);
@@ -599,34 +669,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 +736,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 +754,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.1",
+  "version": "0.1.3",
   "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 };