use js engine also from ngapp

Author: ChrLackner

webgpu/camera.py

@@ -21,10 +21,13 @@ class CameraUniforms(UniformBase):
         ("dpr", ct.c_float),
     ]
 
-    def update(self, transform, canvas):
+    def update(self, transform, canvas, write_buffer=True):
         """Recompute projection/model-view matrices from transform and canvas dimensions.
 
         Returns (model_view_proj, model_view) matrices, or (None, None) if canvas is unavailable.
+
+        With ``write_buffer`` False the matrices are computed but the GPU buffer
+        is not uploaded (JS-engine mode, where the browser owns the camera).
         """
         if canvas is None or canvas.height == 0:
             return None, None
@@ -82,7 +85,8 @@ def update(self, transform, canvas):
         self.width = canvas.width
         self.height = canvas.height
         self.dpr = float(getattr(canvas, 'dpr', 1.0))
-        self.update_buffer()
+        if write_buffer:
+            self.update_buffer()
 
         return model_view_proj, model_view
 
@@ -219,6 +223,7 @@ def __init__(self):
         self._is_moving = False
         self._is_rotating = False
         self._registered_handlers = {}
+        self._dblclick_handlers = {}
 
     def __setstate__(self, state):
         """Restore pickled camera state (only the transform)."""
@@ -228,6 +233,7 @@ def __setstate__(self, state):
         self._is_moving = False
         self._is_rotating = False
         self._registered_handlers = {}
+        self._dblclick_handlers = {}
 
     def __getstate__(self):
         """Return a minimal picklable representation of the camera."""
@@ -311,8 +317,30 @@ def on_dblclick(ev):
         input_handler.on_dblclick(handlers['dblclick'], ctrl=False, shift=False, alt=False)
         input_handler.on_wheel(handlers['wheel'], ctrl=False, shift=False, alt=False)
 
+    def register_dblclick_center(self, input_handler, get_position_fn):
+        """Register only the double-click-to-center handler (used in JS-engine
+        mode, where rotate/pan/zoom are handled in the browser)."""
+        self.unregister_dblclick_center(input_handler)
+
+        def on_dblclick(ev):
+            if get_position_fn:
+                p = get_position_fn(ev["canvasX"], ev["canvasY"])
+                if p is not None:
+                    self.transform.set_center(p)
+                    self._notify_observers()
+
+        self._dblclick_handlers[id(input_handler)] = on_dblclick
+        input_handler.on_dblclick(on_dblclick, ctrl=False, shift=False, alt=False)
+
+    def unregister_dblclick_center(self, input_handler):
+        """Remove a previously registered double-click-to-center handler."""
+        handler = self._dblclick_handlers.pop(id(input_handler), None)
+        if handler is not None:
+            input_handler.unregister("dblclick", handler)
+
     def unregister_callbacks(self, input_handler):
         """Remove previously registered handlers from the given input_handler."""
+        self.unregister_dblclick_center(input_handler)
         key = id(input_handler)
         handlers = self._registered_handlers.pop(key, None)
         if handlers is None:

webgpu/engine/engine.js

@@ -181,6 +181,12 @@ class RenderEngine {
       theme: descriptor.theme || {},
     };
 
+    // Live-mode host callbacks (optional).
+    this._onEvent = descriptor.on_event || null;
+    this._onCameraChanged = descriptor.on_camera_changed || null;
+    // Host clear color [r,g,b,a] overriding the built-in light/dark color.
+    this._clearColorOverride = descriptor.clear_color || null;
+
     this.buffers  = _toMap(descriptor.buffers);
     this.textures = _toMap(descriptor.textures);
     this.samplers = new Map();
@@ -260,22 +266,27 @@ class RenderEngine {
     this.renderPassObjects = [];
     await this._createRenderPipelines();
 
-    // --- Input ---
-    // Live mode: the host (Python) owns input handling and writes the camera
-    // uniform and calls notifyDirty() explicitly when buffers change.
-    if (this.mode !== 'live') {
-      this.camera.registerObserver(() => {
-        this._updateCameraBuffer();
-        // Only mark the camera buffer dirty — compute passes that actually
-        // depend on the camera (list it in their triggers) will re-run.
-        // Passes triggered by other buffers (e.g. clipping plane) are
-        // unaffected by camera movement.
-        if (this._cameraBufferId) {
-          this.computeDAG.markDirty(this._cameraBufferId);
-        }
-        this.render();
+    // --- Input + camera ---
+    // The JS engine owns the camera and input loop in both modes. In live mode
+    // it also forwards non-camera events to the host and syncs settled camera
+    // transforms back.
+    this.camera.registerObserver(() => {
+      this._updateCameraBuffer();
+      if (this._cameraBufferId) {
+        this.computeDAG.markDirty(this._cameraBufferId);
+      }
+      this.render();
+      this._notifyCameraChanged();
+    });
+    this.input = new InputHandler(canvas, this.camera, () => this.render());
+    if (this._onEvent) {
+      this.input.setEventSink((ev) => {
+        try { this._onEvent(ev); }
+        catch (e) { console.warn('[engine] on_event failed:', e && (e.message || e)); }
       });
-      this.input = new InputHandler(canvas, this.camera, () => this.render());
+    }
+    if (this._onCameraChanged) {
+      this.input.onGestureEnd = () => this._notifyCameraChanged(true);
     }
 
     // --- Interactions (lil-gui) ---
@@ -415,9 +426,56 @@ class RenderEngine {
     if (this.depthTexture) this.depthTexture.destroy();
     if (this.msaaTexture)  this.msaaTexture.destroy();
     this._createDepthAndMSAA();
+    // Refresh the camera uniform (aspect/width/height) for the new size.
+    this._updateCameraBuffer();
+    this.render();
+  }
+
+  /** Live-mode hook: host sets the camera transform (reset/view/bookmark). */
+  setCameraTransform(matrix, center) {
+    if (!this.camera) return;
+    this._suppressCameraNotify = true;
+    try {
+      if (matrix) this.camera.transform._mat = Float64Array.from(matrix);
+      if (center) this.camera.transform._center = Array.from(center);
+      this._updateCameraBuffer();
+      if (this._cameraBufferId) this.computeDAG.markDirty(this._cameraBufferId);
+      this.render();
+    } finally {
+      this._suppressCameraNotify = false;
+    }
+  }
+
+  /** Live-mode hook: host sets the background clear color [r,g,b,a] (0..1). */
+  setClearColor(rgba) {
+    this._clearColorOverride = rgba || null;
+    this._applyTheme();
     this.render();
   }
 
+  /** Report the current camera transform to the host (debounced). */
+  _notifyCameraChanged(immediate = false) {
+    if (!this._onCameraChanged || this._suppressCameraNotify) return;
+    const send = () => {
+      this._camNotifyTimer = null;
+      try {
+        this._onCameraChanged({
+          matrix: Array.from(this.camera.transform._mat),
+          center: Array.from(this.camera.transform._center),
+        });
+      } catch (e) {
+        console.warn('[engine] on_camera_changed failed:', e && (e.message || e));
+      }
+    };
+    if (immediate) {
+      if (this._camNotifyTimer) { clearTimeout(this._camNotifyTimer); }
+      send();
+      return;
+    }
+    if (this._camNotifyTimer) return;  // trailing-edge debounce already scheduled
+    this._camNotifyTimer = setTimeout(send, 100);
+  }
+
   /**
    * Live-mode hook: mark a buffer (or a list of them) as dirty so any
    * compute pass triggered by it re-runs on the next render. Pass no args
@@ -902,9 +960,14 @@ class RenderEngine {
 
   _applyTheme() {
     const dark = this._isDarkMode();
-    this.clearColor = dark ? DARK_CLEAR_COLOR : LIGHT_CLEAR_COLOR;
+    const ov = this._clearColorOverride;
+    this.clearColor = ov
+      ? { r: ov[0], g: ov[1], b: ov[2], a: ov.length > 3 ? ov[3] : 1.0 }
+      : (dark ? DARK_CLEAR_COLOR : LIGHT_CLEAR_COLOR);
     if (this.canvas && this.canvas.style) {
-      this.canvas.style.backgroundColor = dark ? DARK_CANVAS_BG : LIGHT_CANVAS_BG;
+      this.canvas.style.backgroundColor = ov
+        ? `rgb(${Math.round(ov[0] * 255)},${Math.round(ov[1] * 255)},${Math.round(ov[2] * 255)})`
+        : (dark ? DARK_CANVAS_BG : LIGHT_CANVAS_BG);
     }
     // Update colorbar background color to match theme
     if (this.scene && this.scene.theme && this.scene.theme.buffer_id) {
@@ -958,6 +1021,7 @@ class RenderEngine {
 
   dispose() {
     if (this._resizeObserver) this._resizeObserver.disconnect();
+    if (this._camNotifyTimer) { clearTimeout(this._camNotifyTimer); this._camNotifyTimer = null; }
     this._teardownThemeObserver();
     if (this.input) this.input.dispose();
     if (this.interactions) this.interactions.dispose();

webgpu/engine/input.js

@@ -14,6 +14,16 @@ class InputHandler {
     this.onRender = onRender;
     this.getPositionFn = getPositionFn;
 
+    // Live mode: sink for classified non-camera events forwarded to the host.
+    this._eventSink = null;
+    this.onGestureEnd = null;
+    this.rotateSensitivity = 0.5;
+
+    this._downButton = 0;
+    this._downX = 0;
+    this._downY = 0;
+    this._moved = false;
+
     this._isRotating = false;
     this._isPanning = false;
 
@@ -30,6 +40,7 @@ class InputHandler {
     this._onPointerDown = this._onPointerDown.bind(this);
     this._onPointerUp = this._onPointerUp.bind(this);
     this._onPointerMove = this._onPointerMove.bind(this);
+    this._onPointerLeave = this._onPointerLeave.bind(this);
     this._onWheel = this._onWheel.bind(this);
     this._onDblClick = this._onDblClick.bind(this);
     this._onContextMenu = (ev) => ev.preventDefault();
@@ -40,6 +51,7 @@ class InputHandler {
     canvas.addEventListener('pointerdown', this._onPointerDown);
     canvas.addEventListener('pointerup', this._onPointerUp);
     canvas.addEventListener('pointermove', this._onPointerMove);
+    canvas.addEventListener('pointerleave', this._onPointerLeave);
     canvas.addEventListener('wheel', this._onWheel, { passive: false });
     canvas.addEventListener('dblclick', this._onDblClick);
     canvas.addEventListener('contextmenu', this._onContextMenu);
@@ -49,21 +61,66 @@ class InputHandler {
     canvas.addEventListener('touchcancel', this._onTouchEnd);
   }
 
+  setEventSink(fn) {
+    this._eventSink = fn;
+  }
+
+  _forward(type, ev) {
+    if (!this._eventSink) return;
+    const rect = this.canvas.getBoundingClientRect();
+    const dpr = window.devicePixelRatio || 1;
+    const payload = {
+      type,
+      button: ev.button == null ? 0 : ev.button,
+      buttons: ev.buttons == null ? 0 : ev.buttons,
+      x: ev.clientX,
+      y: ev.clientY,
+      canvasX: Math.round((ev.clientX - rect.left) * dpr),
+      canvasY: Math.round((ev.clientY - rect.top) * dpr),
+      movementX: ev.movementX || 0,
+      movementY: ev.movementY || 0,
+      deltaX: ev.deltaX || 0,
+      deltaY: ev.deltaY || 0,
+      ctrlKey: !!ev.ctrlKey,
+      shiftKey: !!ev.shiftKey,
+      altKey: !!ev.altKey,
+    };
+    try {
+      this._eventSink(payload);
+    } catch (e) {
+      console.warn('[input] event sink failed:', e && (e.message || e));
+    }
+  }
+
   // --- Pointer events (mouse & single touch fallback) ---
 
   _onPointerDown(ev) {
     ev.preventDefault();
-    if (ev.button === 0 && !ev.shiftKey && !ev.ctrlKey && !ev.altKey) {
+    this._downButton = ev.button;
+    this._downX = ev.clientX;
+    this._downY = ev.clientY;
+    this._moved = false;
+    // ctrl/alt are reserved for the host and never start a camera gesture.
+    const hostModified = ev.ctrlKey || ev.altKey;
+    if (!hostModified && ev.button === 0 && !ev.shiftKey) {
       this._isRotating = true;
-    } else if (ev.button === 1 || (ev.button === 0 && ev.shiftKey)) {
+    } else if (!hostModified && (ev.button === 1 || (ev.button === 0 && ev.shiftKey))) {
       this._isPanning = true;
     }
     this.canvas.setPointerCapture(ev.pointerId);
   }
 
   _onPointerUp(ev) {
+    const wasGesture = this._isRotating || this._isPanning;
     this._isRotating = false;
     this._isPanning = false;
+    // A press with no movement is a click; camera gestures set _moved.
+    if (this._eventSink && !this._moved && ev.button === this._downButton) {
+      this._forward('click', ev);
+    }
+    if (wasGesture && this._moved && this.onGestureEnd) {
+      try { this.onGestureEnd(); } catch (e) { /* ignore */ }
+    }
   }
 
   _onPointerMove(ev) {
@@ -78,25 +135,48 @@ class InputHandler {
     const dpr = window.devicePixelRatio || 1;
     const t = this.camera.transform;
     if (this._isRotating) {
-      t.rotate(0.3 * dpr * ev.movementY, 0.3 * dpr * ev.movementX);
+      this._moved = true;
+      const s = this.rotateSensitivity * dpr;
+      t.rotate(s * ev.movementY, s * ev.movementX);
       this.camera._notify();
       this.onRender();
-    } else if (this._isPanning) {
+      return;
+    }
+    if (this._isPanning) {
+      this._moved = true;
       t.translate(0.01 * dpr * ev.movementX, -0.01 * dpr * ev.movementY);
       this.camera._notify();
       this.onRender();
+      return;
     }
+    // Not a camera gesture — forward to the host (hover, or a modified drag).
+    if (!this._eventSink) return;
+    if (ev.buttons !== 0) {
+      this._moved = true;
+      this._forward('drag', ev);
+    } else {
+      this._forward('mousemove', ev);
+    }
+  }
+
+  _onPointerLeave(ev) {
+    if (this._eventSink) this._forward('mouseout', ev);
   }
 
   _onWheel(ev) {
     ev.preventDefault();
+    if (this._eventSink && (ev.ctrlKey || ev.altKey)) {
+      this._forward('wheel', ev);
+      return;
+    }
     const t = this.camera.transform;
     t.scale(1 - ev.deltaY / 1000, t._center);
     this.camera._notify();
     this.onRender();
   }
 
   _onDblClick(ev) {
+    if (this._eventSink) this._forward('dblclick', ev);
     if (!this.getPositionFn) return;
     const rect = this.canvas.getBoundingClientRect();
     const x = ev.clientX - rect.left;
@@ -219,6 +299,7 @@ class InputHandler {
     c.removeEventListener('pointerdown', this._onPointerDown);
     c.removeEventListener('pointerup', this._onPointerUp);
     c.removeEventListener('pointermove', this._onPointerMove);
+    c.removeEventListener('pointerleave', this._onPointerLeave);
     c.removeEventListener('wheel', this._onWheel);
     c.removeEventListener('dblclick', this._onDblClick);
     c.removeEventListener('contextmenu', this._onContextMenu);