@neta-art/cohub 11.3.3 → 11.3.4

package/README.md

@@ -218,6 +218,12 @@ editor.addItem("acme.order", { at: editor.viewCenter(), props: { orderId: "o-1",
 // React: const selection = useSyncExternalStore((fn) => editor.subscribe("selection", fn), () => editor.selection);
 ```
 
+For draggable DOM item views, use `createBoardPointerGestures(element, { move, end })`
+from `board/stage`: call `start(event)` for accepted pointer downs and `cancel()`
+on unmount. It follows active pointers outside the element, preserves mouse gestures
+when capture is lost, and cancels on window blur or page hide. Forward events through
+`context.toPointerEvent` to the editor; keep hover handling separate from active gestures.
+
 Items of a type the client does not know still render as a placeholder, move
 and keep every field, so documents written by newer clients are never
 rewritten by older ones. For a canvas look instead of DOM, pass renderers to

package/dist/board/stage/index.d.ts

@@ -2,8 +2,9 @@ import { DEFAULT_LRU_BUDGET, LruBudget, LruEntry, selectLruEvictions } from "./l
 import { BoardImageTexturePool, boardImageTexturePool, createBoardImageTexturePool, loadBoardImageTexture, unloadBoardImageTexture } from "./texture-pool.js";
 import { BoardAssetManager, BoardAssetManagerOptions, BoardModelPreviewRequest, BoardModelPreviews, boardAssetKey, createBoardAssetManager } from "./assets.js";
 import { toBoardPointerEvent } from "./pointer.js";
+import { createBoardPointerGestures } from "./pointer-gestures.js";
 import { BoardLiveStroke, BoardScene, BoardSceneNode, SceneSyncInput, createBoardScene } from "./scene.js";
 import { BoardItemView, BoardItemViewContext, BoardItemViewInstance, BoardItemViewLayer, createBoardItemViewLayer } from "./views.js";
 import { BoardStage, BoardStageOptions, BoardStagePointerPhase, BoardStageTheme, mountBoardStage } from "./stage.js";
 import { BoardOverlayInput, drawBoardOverlay, expandFrame } from "./overlay.js";
-export { BoardAssetManager, BoardAssetManagerOptions, BoardImageTexturePool, BoardItemView, BoardItemViewContext, BoardItemViewInstance, BoardItemViewLayer, BoardLiveStroke, BoardModelPreviewRequest, BoardModelPreviews, BoardOverlayInput, BoardScene, BoardSceneNode, BoardStage, BoardStageOptions, BoardStagePointerPhase, BoardStageTheme, DEFAULT_LRU_BUDGET, LruBudget, LruEntry, SceneSyncInput, boardAssetKey, boardImageTexturePool, createBoardAssetManager, createBoardImageTexturePool, createBoardItemViewLayer, createBoardScene, drawBoardOverlay, expandFrame, loadBoardImageTexture, mountBoardStage, selectLruEvictions, toBoardPointerEvent, unloadBoardImageTexture };
+export { BoardAssetManager, BoardAssetManagerOptions, BoardImageTexturePool, BoardItemView, BoardItemViewContext, BoardItemViewInstance, BoardItemViewLayer, BoardLiveStroke, BoardModelPreviewRequest, BoardModelPreviews, BoardOverlayInput, BoardScene, BoardSceneNode, BoardStage, BoardStageOptions, BoardStagePointerPhase, BoardStageTheme, DEFAULT_LRU_BUDGET, LruBudget, LruEntry, SceneSyncInput, boardAssetKey, boardImageTexturePool, createBoardAssetManager, createBoardImageTexturePool, createBoardItemViewLayer, createBoardPointerGestures, createBoardScene, drawBoardOverlay, expandFrame, loadBoardImageTexture, mountBoardStage, selectLruEvictions, toBoardPointerEvent, unloadBoardImageTexture };

package/dist/board/stage/index.js

@@ -2,8 +2,9 @@ import { DEFAULT_LRU_BUDGET, selectLruEvictions } from "./lru.js";
 import { boardImageTexturePool, createBoardImageTexturePool, loadBoardImageTexture, unloadBoardImageTexture } from "./texture-pool.js";
 import { boardAssetKey, createBoardAssetManager } from "./assets.js";
 import { toBoardPointerEvent } from "./pointer.js";
+import { createBoardPointerGestures } from "./pointer-gestures.js";
 import { createBoardScene } from "./scene.js";
 import { drawBoardOverlay, expandFrame } from "./overlay.js";
 import { createBoardItemViewLayer } from "./views.js";
 import { mountBoardStage } from "./stage.js";
-export { DEFAULT_LRU_BUDGET, boardAssetKey, boardImageTexturePool, createBoardAssetManager, createBoardImageTexturePool, createBoardItemViewLayer, createBoardScene, drawBoardOverlay, expandFrame, loadBoardImageTexture, mountBoardStage, selectLruEvictions, toBoardPointerEvent, unloadBoardImageTexture };
+export { DEFAULT_LRU_BUDGET, boardAssetKey, boardImageTexturePool, createBoardAssetManager, createBoardImageTexturePool, createBoardItemViewLayer, createBoardPointerGestures, createBoardScene, drawBoardOverlay, expandFrame, loadBoardImageTexture, mountBoardStage, selectLruEvictions, toBoardPointerEvent, unloadBoardImageTexture };

package/dist/board/stage/pointer-gestures.d.ts

@@ -0,0 +1,12 @@
+//#region src/board/stage/pointer-gestures.d.ts
+type BoardPointerGestureHandlers = {
+  move(event: PointerEvent): void;
+  end(event: PointerEvent): void;
+};
+declare function createBoardPointerGestures(host: HTMLElement, handlers: BoardPointerGestureHandlers): {
+  has: (pointerId: number) => boolean;
+  start(event: PointerEvent): void;
+  cancel: () => void;
+};
+//#endregion
+export { createBoardPointerGestures };

package/dist/board/stage/pointer-gestures.js

@@ -0,0 +1,63 @@
+//#region src/board/stage/pointer-gestures.ts
+function createBoardPointerGestures(host, handlers) {
+	const document = host.ownerDocument;
+	const window = document.defaultView;
+	const pointers = /* @__PURE__ */ new Map();
+	function listen(active) {
+		const method = active ? "addEventListener" : "removeEventListener";
+		document[method]("pointermove", move, true);
+		document[method]("pointerup", end, true);
+		document[method]("pointercancel", end, true);
+		host[method]("lostpointercapture", lost);
+		window?.[method]("blur", cancel);
+		document[method]("visibilitychange", visibility);
+	}
+	function move(event) {
+		const previous = pointers.get(event.pointerId);
+		if (!previous) return;
+		if (event.pointerType === "mouse" && event.buttons === 0 && window) {
+			end(new window.PointerEvent("pointerup", {
+				pointerId: event.pointerId,
+				pointerType: event.pointerType,
+				clientX: previous.clientX,
+				clientY: previous.clientY,
+				button: 0,
+				buttons: 0,
+				shiftKey: event.shiftKey,
+				altKey: event.altKey,
+				ctrlKey: event.ctrlKey,
+				metaKey: event.metaKey
+			}));
+			return;
+		}
+		pointers.set(event.pointerId, event);
+		handlers.move(event);
+	}
+	function end(event) {
+		if (!pointers.delete(event.pointerId)) return;
+		if (pointers.size === 0) listen(false);
+		if (host.hasPointerCapture(event.pointerId)) host.releasePointerCapture(event.pointerId);
+		handlers.end(event);
+	}
+	function lost(event) {
+		if (event.target === host && event.pointerType !== "mouse") end(event);
+	}
+	function cancel() {
+		if (!window) return;
+		for (const event of [...pointers.values()]) end(new window.PointerEvent("pointercancel", event));
+	}
+	function visibility() {
+		if (document.hidden) cancel();
+	}
+	return {
+		has: (pointerId) => pointers.has(pointerId),
+		start(event) {
+			host.setPointerCapture(event.pointerId);
+			if (pointers.size === 0) listen(true);
+			pointers.set(event.pointerId, event);
+		},
+		cancel
+	};
+}
+//#endregion
+export { createBoardPointerGestures };

package/dist/board/stage/stage.js

@@ -18,6 +18,7 @@ import { defaultBoardRenderStyle } from "../render/style.js";
 import { createBoardPlayer } from "../player/index.js";
 import { createBoardScriptObservers } from "../model/script-observers.js";
 import { toBoardPointerEvent } from "./pointer.js";
+import { createBoardPointerGestures } from "./pointer-gestures.js";
 import { createBoardScene } from "./scene.js";
 import { scheduleBoardMaintenance } from "./maintenance.js";
 import { createBoardScriptPointerRouter } from "./script-pointer.js";
@@ -679,10 +680,7 @@ function mountBoardStage(host, options) {
 			x: event.clientX,
 			y: event.clientY
 		}, event.type !== "pointerup");
-		if (type === "down" && recipient) {
-			host.setPointerCapture(event.pointerId);
-			host.focus({ preventScroll: true });
-		}
+		if (type === "down" && recipient) host.focus({ preventScroll: true });
 		if (recipient && type !== "leave") sendScriptEvent(recipient, input.cancelled ? "pointercancel" : `pointer${type}`, event, input);
 		if (click) sendScriptEvent(click, "click", event, input);
 		return consumed || recipient !== null;
@@ -701,24 +699,33 @@ function mountBoardStage(host, options) {
 		scripts?.event(scriptHover.owner, input);
 		event.stopPropagation();
 	}
+	const pointers = createBoardPointerGestures(host, {
+		move: routePointerMove,
+		end: handlePointerUp
+	});
 	function handlePointerDown(event) {
-		if (inViews(event)) return;
+		if (!active || inViews(event)) return;
 		editor.takeCameraControl();
 		const input = toInput(event);
-		if (scriptPointer("down", event, input)) return;
+		if (scriptPointer("down", event, input)) {
+			pointers.start(event);
+			return;
+		}
 		if (options.onPointer?.("down", event, input) === false) return;
-		host.setPointerCapture(event.pointerId);
+		pointers.start(event);
 		editor.pointerDown(input);
 	}
 	function handlePointerMove(event) {
-		if (inViews(event)) return;
+		if (!active || pointers.has(event.pointerId) || inViews(event)) return;
+		routePointerMove(event);
+	}
+	function routePointerMove(event) {
 		const input = toInput(event);
 		if (scriptPointer("move", event, input)) return;
 		if (options.onPointer?.("move", event, input) === false) return;
 		editor.pointerMove(input);
 	}
 	function handlePointerUp(event) {
-		if (inViews(event)) return;
 		const input = toInput(event);
 		if (scriptPointer("up", event, input)) return;
 		if (options.onPointer?.("up", event, input) === false) return;
@@ -758,9 +765,6 @@ function mountBoardStage(host, options) {
 		["keyup", handleScriptKey],
 		["pointerdown", handlePointerDown],
 		["pointermove", handlePointerMove],
-		["pointerup", handlePointerUp],
-		["pointercancel", handlePointerUp],
-		["lostpointercapture", handlePointerUp],
 		["pointerleave", handlePointerLeave],
 		[
 			"wheel",
@@ -874,6 +878,7 @@ function mountBoardStage(host, options) {
 			if (active === next) return;
 			active = next;
 			if (!active) {
+				pointers.cancel();
 				stopMarch();
 				cancelScriptPointers();
 				cancelAnimationFrame(renderFrame);
@@ -902,6 +907,7 @@ function mountBoardStage(host, options) {
 		toWorld: (clientX, clientY) => screenToWorld(clientX, clientY, rectOf(), renderCamera()),
 		destroy() {
 			disposed = true;
+			pointers.cancel();
 			stopMarch();
 			scriptPointers.clear();
 			stopTransforms?.();

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@neta-art/cohub",
-  "version": "11.3.3",
+  "version": "11.3.4",
   "description": "Cohub SDK for spaces, sessions, boards, and realtime agent collaboration.",
   "license": "Apache-2.0",
   "private": false,