@floegence/redevplugin-ui 3.0.21 → 3.0.22

package/dist/plugin.d.ts

@@ -2,5 +2,5 @@ export { PluginBridgeClient } from "./surface.js";
 export { PluginBridgeError } from "./errors.js";
 export { pluginAPIMajor } from "./contracts.gen.js";
 export { callCapabilityOperation, callCapabilityStream, callCapabilitySync, isCapabilityBusinessError, } from "./capability-client.js";
-export type { BridgeLifecycleEvent, MessagePortLike, PluginBridgeClientOptions, PluginBridgeRequestOptions, PluginCanvasAccessibilityState, PluginCanvasInputEvent, PluginCanvasKeyEvent, PluginCanvasPointerEvent, PluginCanvasResizeEvent, PluginCanvasSurface, PluginJSONObject, PluginJSONValue, PluginMethodResult, PluginExecutionFailureCode, PluginExecutionSnapshot, PluginExecutionProgress, PluginExecutionEvent, PluginExecutionEventList, PluginSurfaceContext, PluginUIActionEvent, PluginUIAttributeValue, PluginUIElementVNode, PluginUIPatchOperation, PluginUIVNode, } from "./surface.js";
+export type { BridgeLifecycleEvent, MessagePortLike, PluginBridgeClientOptions, PluginBridgeRequestOptions, PluginCanvasAccessibilityState, PluginCanvasInputEvent, PluginCanvasKeyEvent, PluginCanvasPointerEvent, PluginCanvasWheelEvent, PluginCanvasResizeEvent, PluginCanvasSurface, PluginJSONObject, PluginJSONValue, PluginMethodResult, PluginExecutionFailureCode, PluginExecutionSnapshot, PluginExecutionProgress, PluginExecutionEvent, PluginExecutionEventList, PluginSurfaceContext, PluginUIActionEvent, PluginUIAttributeValue, PluginUIElementVNode, PluginUIPatchOperation, PluginUIVNode, } from "./surface.js";
 export type { PluginCapabilitySchema, PluginCapabilityEffect, PluginCapabilityOperationContract, PluginCapabilityStreamContract, PluginCapabilitySyncContract, PluginCapabilityStreamEvent, PluginCapabilityStreamReadResult, PluginExecution, PluginExecutionTerminalStatus, PluginExecutionWaitOptions, PluginStream, } from "./capability-client.js";

package/dist/surface.d.ts

@@ -136,7 +136,19 @@ export type PluginCanvasPointerEvent = {
     y: number;
     pressure: number;
 };
-export type PluginCanvasInputEvent = PluginCanvasFocusEvent | PluginCanvasResizeEvent | PluginCanvasKeyEvent | PluginCanvasPointerEvent;
+export type PluginCanvasWheelEvent = {
+    type: "wheel";
+    x: number;
+    y: number;
+    deltaX: number;
+    deltaY: number;
+    deltaMode: 0 | 1 | 2;
+    altKey: boolean;
+    ctrlKey: boolean;
+    metaKey: boolean;
+    shiftKey: boolean;
+};
+export type PluginCanvasInputEvent = PluginCanvasFocusEvent | PluginCanvasResizeEvent | PluginCanvasKeyEvent | PluginCanvasPointerEvent | PluginCanvasWheelEvent;
 export type PluginMethodResult<T = unknown> = {
     data: T;
     execution_id?: string;

package/dist/surface.js

@@ -937,7 +937,12 @@ export function createOpaquePluginBootstrapHTML(options = {}) {
   };
   document.addEventListener("pointerdown", (event) => sendInteraction("activation", event.target), true);
   document.addEventListener("focusin", (event) => sendInteraction("focus", event.target), true);
-  document.addEventListener("wheel", (event) => sendInteraction("wheel", event.target, { localScroll: ownsLocalScroll(event) }), { capture: true, passive: true });
+  const ownsCanvasWheel = (target) => {
+    const element = target instanceof Element ? target.closest("canvas[data-redevplugin-canvas]") : null;
+    const canvasID = element?.getAttribute("data-redevplugin-canvas");
+    return validResourceIdentifier(canvasID) && canvasRuntimes.has(canvasID);
+  };
+  document.addEventListener("wheel", (event) => sendInteraction("wheel", event.target, { localScroll: ownsCanvasWheel(event.target) || ownsLocalScroll(event) }), { capture: true, passive: true });
   document.addEventListener("selectionchange", () => {
     const selection = document.getSelection();
     const target = selection?.anchorNode instanceof Element ? selection.anchorNode : selection?.anchorNode?.parentElement;
@@ -2159,8 +2164,25 @@ export function createOpaquePluginBootstrapHTML(options = {}) {
         shift_key: Boolean(event.shiftKey),
       });
     };
+    const handleWheel = (event) => {
+      event.preventDefault();
+      const rect = canvas.getBoundingClientRect();
+      sendInput({
+        type: "wheel",
+        x: Math.min(32768, Math.max(-16384, event.clientX - rect.left)),
+        y: Math.min(32768, Math.max(-16384, event.clientY - rect.top)),
+        delta_x: Math.min(32768, Math.max(-32768, Number.isFinite(event.deltaX) ? event.deltaX : 0)),
+        delta_y: Math.min(32768, Math.max(-32768, Number.isFinite(event.deltaY) ? event.deltaY : 0)),
+        delta_mode: [0, 1, 2].includes(event.deltaMode) ? event.deltaMode : 0,
+        alt_key: Boolean(event.altKey),
+        ctrl_key: Boolean(event.ctrlKey),
+        meta_key: Boolean(event.metaKey),
+        shift_key: Boolean(event.shiftKey),
+      });
+    };
     for (const type of ["pointerdown", "pointermove", "pointerup", "pointercancel"]) listen(type, handlePointer);
     for (const type of ["keydown", "keyup"]) listen(type, handleKey);
+    listen("wheel", handleWheel);
     listen("focus", () => sendInput({ type: "focus" }));
     listen("blur", () => sendInput({ type: "blur" }));
     const observer = new ResizeObserver(() => {
@@ -4298,6 +4320,28 @@ function publicCanvasInputMessage(value) {
             },
         };
     }
+    if (hasExactKeys(event, ["type", "x", "y", "delta_x", "delta_y", "delta_mode", "alt_key", "ctrl_key", "meta_key", "shift_key"]) &&
+        event.type === "wheel" && validCanvasCoordinate(event.x) && validCanvasCoordinate(event.y) &&
+        validCanvasWheelDelta(event.delta_x) && validCanvasWheelDelta(event.delta_y) &&
+        (event.delta_mode === 0 || event.delta_mode === 1 || event.delta_mode === 2) &&
+        typeof event.alt_key === "boolean" && typeof event.ctrl_key === "boolean" &&
+        typeof event.meta_key === "boolean" && typeof event.shift_key === "boolean") {
+        return {
+            canvasId: value.canvas_id,
+            event: {
+                type: "wheel",
+                x: event.x,
+                y: event.y,
+                deltaX: event.delta_x,
+                deltaY: event.delta_y,
+                deltaMode: event.delta_mode,
+                altKey: event.alt_key,
+                ctrlKey: event.ctrl_key,
+                metaKey: event.meta_key,
+                shiftKey: event.shift_key,
+            },
+        };
+    }
     return undefined;
 }
 function isOffscreenCanvasLike(value) {
@@ -4317,6 +4361,9 @@ function validDevicePixelRatio(value) {
 function validCanvasCoordinate(value) {
     return typeof value === "number" && Number.isFinite(value) && value >= -16384 && value <= 32768;
 }
+function validCanvasWheelDelta(value) {
+    return typeof value === "number" && Number.isFinite(value) && value >= -32768 && value <= 32768;
+}
 function isMessagePortLike(value) {
     return isRecord(value) &&
         typeof value.postMessage === "function" &&

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@floegence/redevplugin-ui",
-  "version": "3.0.21",
+  "version": "3.0.22",
   "license": "MIT",
   "type": "module",
   "repository": {
@@ -40,7 +40,7 @@
     "dist"
   ],
   "dependencies": {
-    "@floegence/redevplugin-contracts": "3.0.21"
+    "@floegence/redevplugin-contracts": "3.0.22"
   },
   "publishConfig": {
     "access": "public"