@aethervtt/shard-platform-web 0.0.1 → 0.1.0

package/dist/audio.js

@@ -177,6 +177,9 @@ function createWebAudioBackend(options = {}) {
       start(voice);
       return id;
     },
+    preload(clip) {
+      if (!clip.stream) decode(clip).catch((err) => backend.onError?.(err));
+    },
     update(id, params) {
       const v = voices.get(id);
       if (!v) return;

package/dist/index.d.ts

@@ -9,6 +9,7 @@ export interface WebPlatformOptions {
 }
 export declare function createWebPlatform(options?: WebPlatformOptions): Platform;
 export { createWebAudioBackend, type WebAudioBackend } from './audio.js';
-export { createDomInputSource } from './input.js';
+export { createDomInputSource, type DomInputOptions } from './input.js';
+export { createWebPerformance } from './performance.js';
 export { createIndexedDbStorage } from './storage.js';
 export { createWebWorkers } from './workers.js';

package/dist/index.js

@@ -1,5 +1,6 @@
 import { ShardError } from "@aethervtt/shard-core";
 import { createWebAudioBackend } from "./audio.js";
+import { createWebPerformance } from "./performance.js";
 import { createIndexedDbStorage } from "./storage.js";
 import { createWebWorkers } from "./workers.js";
 function createWebPlatform(options = {}) {
@@ -42,6 +43,7 @@ function createWebPlatform(options = {}) {
     },
     fs,
     storage: createIndexedDbStorage(options.storageName),
+    performance: createWebPerformance(),
     clock: { now: () => performance.now() },
     log: {
       log: (level, message, data) => console[level](`[shard] ${message}`, data ?? "")
@@ -50,12 +52,14 @@ function createWebPlatform(options = {}) {
 }
 import { createWebAudioBackend as createWebAudioBackend2 } from "./audio.js";
 import { createDomInputSource } from "./input.js";
+import { createWebPerformance as createWebPerformance2 } from "./performance.js";
 import { createIndexedDbStorage as createIndexedDbStorage2 } from "./storage.js";
 import { createWebWorkers as createWebWorkers2 } from "./workers.js";
 export {
   createDomInputSource,
   createIndexedDbStorage2 as createIndexedDbStorage,
   createWebAudioBackend2 as createWebAudioBackend,
+  createWebPerformance2 as createWebPerformance,
   createWebPlatform,
   createWebWorkers2 as createWebWorkers
 };

package/dist/input.d.ts

@@ -1,6 +1,19 @@
-import type { InputSource } from '@aethervtt/shard-platform';
+import { type InputSource } from '@aethervtt/shard-platform';
+export interface DomInputOptions {
+    /**
+     * The element's context menu. 'block' (default): never shown, for a game that owns its page.
+     * 'pass': shown unless a control drags with the right button, for a host with menus of its own
+     * (0060).
+     */
+    contextMenu?: 'block' | 'pass';
+}
 /**
- * DOM input: pointer and wheel events on `element` (positions in its backing pixels), keys and
- * focus on the window, gamepads polled on drain. Works in browsers and Tauri webviews alike.
+ * DOM input: pointer and wheel events on `element` (positions in its backing pixels, and in CSS
+ * pixels for `pointer` events), keys and focus on the window, gamepads polled on drain. Works in
+ * browsers and Tauri webviews alike.
+ *
+ * Events pass through to the page unless the scene takes them (0060): a press with a button an
+ * enabled control drags with, a claimed pointer's later events, and the wheel while a control
+ * zooms with it are `preventDefault`ed; so is the context menu, unless `contextMenu` is 'pass'.
  */
-export declare function createDomInputSource(element: HTMLElement): InputSource;
+export declare function createDomInputSource(element: HTMLElement, options?: DomInputOptions): InputSource;

package/dist/input.js

@@ -1,14 +1,57 @@
+import {
+  MODIFIERS
+} from "@aethervtt/shard-platform";
 const BUTTONS = ["left", "middle", "right", "back", "forward"];
-function createDomInputSource(element) {
-  const queue = [];
+function modifiersOf(e) {
+  return (e.shiftKey ? MODIFIERS.shift : 0) | (e.ctrlKey ? MODIFIERS.ctrl : 0) | (e.altKey ? MODIFIERS.alt : 0) | (e.metaKey ? MODIFIERS.meta : 0);
+}
+function kindOf(e) {
+  return e.pointerType === "touch" ? "touch" : e.pointerType === "pen" ? "pen" : "mouse";
+}
+function createDomInputSource(element, options = {}) {
+  const blockMenu = (options.contextMenu ?? "block") === "block";
+  const events = [];
+  const listeners = /* @__PURE__ */ new Set();
+  const queue = {
+    push(e) {
+      events.push(e);
+      for (const listener of listeners) listener();
+    }
+  };
   const target = globalThis.window;
   const toPixels = (e) => {
     const rect = element.getBoundingClientRect();
     const sx = element instanceof HTMLCanvasElement ? element.width / Math.max(1, rect.width) : 1;
     const sy = element instanceof HTMLCanvasElement ? element.height / Math.max(1, rect.height) : 1;
-    return { x: (e.clientX - rect.left) * sx, y: (e.clientY - rect.top) * sy, sx, sy };
+    const cx = e.clientX - rect.left;
+    const cy = e.clientY - rect.top;
+    return { x: cx * sx, y: cy * sy, cx, cy, sx, sy };
   };
   const knownPads = /* @__PURE__ */ new Set();
+  let policy = { buttons: [], wheel: false, touch: false };
+  const down = /* @__PURE__ */ new Map();
+  const claimed = /* @__PURE__ */ new Set();
+  const touchAction = element.style.touchAction;
+  const capture = (id) => {
+    try {
+      element.setPointerCapture?.(id);
+    } catch {
+    }
+  };
+  const pointer = (e, phase, cx, cy) => {
+    const button = phase === "move" ? down.get(e.pointerId) ?? "left" : BUTTONS[e.button] ?? "left";
+    queue.push({
+      type: "pointer",
+      id: e.pointerId,
+      phase,
+      pointer: kindOf(e),
+      button,
+      x: cx,
+      y: cy,
+      modifiers: modifiersOf(e)
+    });
+  };
+  const takes = (e) => e.pointerType === "touch" ? policy.touch : policy.buttons.includes(BUTTONS[e.button] ?? "left");
   const onKeyDown = (e) => {
     if (!e.ctrlKey && !e.metaKey) {
       if (e.key.length === 1) queue.push({ type: "text", text: e.key });
@@ -21,43 +64,76 @@ function createDomInputSource(element) {
     queue.push({ type: "key", code: e.code, pressed: false });
   };
   const onPointerDown = (e) => {
-    const { x, y } = toPixels(e);
+    const { x, y, cx, cy } = toPixels(e);
+    down.set(e.pointerId, BUTTONS[e.button] ?? "left");
+    if (takes(e)) {
+      e.preventDefault();
+      capture(e.pointerId);
+    }
     if (e.pointerType === "touch")
       queue.push({ type: "touch", id: e.pointerId, phase: "start", x, y });
     else queue.push({ type: "mouse-button", button: BUTTONS[e.button] ?? "left", pressed: true });
+    pointer(e, "down", cx, cy);
   };
   const onPointerUp = (e) => {
-    const { x, y } = toPixels(e);
+    const { x, y, cx, cy } = toPixels(e);
+    if (claimed.has(e.pointerId)) e.preventDefault();
     if (e.pointerType === "touch")
       queue.push({ type: "touch", id: e.pointerId, phase: "end", x, y });
     else queue.push({ type: "mouse-button", button: BUTTONS[e.button] ?? "left", pressed: false });
+    if (down.has(e.pointerId)) pointer(e, "up", cx, cy);
+    down.delete(e.pointerId);
+    claimed.delete(e.pointerId);
+  };
+  const onPointerCancel = (e) => {
+    if (!down.has(e.pointerId)) return;
+    const { x, y, cx, cy } = toPixels(e);
+    if (e.pointerType === "touch")
+      queue.push({ type: "touch", id: e.pointerId, phase: "end", x, y });
+    pointer(e, "cancel", cx, cy);
+    down.delete(e.pointerId);
+    claimed.delete(e.pointerId);
   };
   const onPointerMove = (e) => {
-    const { x, y, sx, sy } = toPixels(e);
+    const { x, y, cx, cy, sx, sy } = toPixels(e);
+    if (claimed.has(e.pointerId)) e.preventDefault();
     if (e.pointerType === "touch")
       queue.push({ type: "touch", id: e.pointerId, phase: "move", x, y });
     else queue.push({ type: "mouse-move", x, y, dx: e.movementX * sx, dy: e.movementY * sy });
+    pointer(e, "move", cx, cy);
   };
   const onWheel = (e) => {
+    if (policy.wheel) e.preventDefault();
     const scale = e.deltaMode === 1 ? 16 : e.deltaMode === 2 ? 400 : 1;
-    queue.push({ type: "wheel", dx: e.deltaX * scale, dy: e.deltaY * scale });
+    const { cx, cy } = toPixels(e);
+    queue.push({
+      type: "wheel",
+      dx: e.deltaX * scale,
+      dy: e.deltaY * scale,
+      x: cx,
+      y: cy,
+      modifiers: modifiersOf(e)
+    });
   };
   const onBlur = () => queue.push({ type: "focus", focused: false });
   const onFocus = () => queue.push({ type: "focus", focused: true });
-  const onContextMenu = (e) => e.preventDefault();
+  const onContextMenu = (e) => {
+    if (blockMenu || policy.buttons.includes("right")) e.preventDefault();
+  };
   target.addEventListener("keydown", onKeyDown);
   target.addEventListener("keyup", onKeyUp);
   target.addEventListener("blur", onBlur);
   target.addEventListener("focus", onFocus);
   element.addEventListener("pointerdown", onPointerDown);
   target.addEventListener("pointerup", onPointerUp);
+  element.addEventListener("pointercancel", onPointerCancel);
   element.addEventListener("pointermove", onPointerMove);
-  element.addEventListener("wheel", onWheel, { passive: true });
+  element.addEventListener("wheel", onWheel, { passive: false });
   element.addEventListener("contextmenu", onContextMenu);
   return {
     drain(out) {
-      for (const e of queue) out.push(e);
-      queue.length = 0;
+      for (const e of events) out.push(e);
+      events.length = 0;
       const pads = globalThis.navigator?.getGamepads?.() ?? [];
       for (let i = 0; i < pads.length; i++) {
         const pad = pads[i];
@@ -76,13 +152,29 @@ function createDomInputSource(element) {
         }
       }
     },
+    onInput(listener) {
+      listeners.add(listener);
+      return () => listeners.delete(listener);
+    },
+    claimPointer(id) {
+      if (!down.has(id) || claimed.has(id)) return;
+      claimed.add(id);
+      capture(id);
+    },
+    setPointerPolicy(next) {
+      policy = { buttons: [...next.buttons], wheel: next.wheel, touch: next.touch };
+      element.style.touchAction = next.touch ? "none" : touchAction;
+    },
     dispose() {
+      listeners.clear();
+      element.style.touchAction = touchAction;
       target.removeEventListener("keydown", onKeyDown);
       target.removeEventListener("keyup", onKeyUp);
       target.removeEventListener("blur", onBlur);
       target.removeEventListener("focus", onFocus);
       element.removeEventListener("pointerdown", onPointerDown);
       target.removeEventListener("pointerup", onPointerUp);
+      element.removeEventListener("pointercancel", onPointerCancel);
       element.removeEventListener("pointermove", onPointerMove);
       element.removeEventListener("wheel", onWheel);
       element.removeEventListener("contextmenu", onContextMenu);

package/dist/performance.d.ts

@@ -0,0 +1,7 @@
+import type { HostPerformance } from '@aethervtt/shard-platform';
+/**
+ * The page's own instruments (0062): a `longtask` observer, and resource timing for downloads.
+ * One per page: the observer starts on the first call and keeps every long task since, buffered
+ * ones from before it included. Three.js pages can use it too, so both renderers measure alike.
+ */
+export declare function createWebPerformance(): HostPerformance;

package/dist/performance.js

@@ -0,0 +1,51 @@
+const RESOURCE_BUFFER = 1e4;
+const TASK_HISTORY = 1e3;
+let shared;
+function createWebPerformance() {
+  if (shared) return shared;
+  const listeners = /* @__PURE__ */ new Set();
+  const tasks = [];
+  const observes = typeof PerformanceObserver !== "undefined" && PerformanceObserver.supportedEntryTypes?.includes("longtask");
+  if (observes) {
+    new PerformanceObserver((list) => {
+      for (const entry of list.getEntries()) {
+        tasks.push([entry.startTime, entry.duration]);
+        if (tasks.length > TASK_HISTORY) tasks.shift();
+        for (const listener of listeners) listener(entry.startTime, entry.duration);
+      }
+    }).observe({ type: "longtask", buffered: true });
+  }
+  const timing = typeof performance !== "undefined" && "getEntriesByType" in performance;
+  if (timing && performance.setResourceTimingBufferSize) {
+    performance.setResourceTimingBufferSize(RESOURCE_BUFFER);
+  }
+  shared = {
+    userAgent: typeof navigator === "undefined" ? "unknown" : navigator.userAgent,
+    ...observes && {
+      onLongTask(listener) {
+        for (const [start, duration] of tasks) listener(start, duration);
+        listeners.add(listener);
+        return () => void listeners.delete(listener);
+      }
+    },
+    ...timing && { downloads }
+  };
+  return shared;
+}
+function downloads() {
+  const result = { transferred: 0, decoded: 0 };
+  const add = (entry) => {
+    result.transferred += entry.transferSize;
+    result.decoded += entry.decodedBodySize;
+  };
+  for (const entry of performance.getEntriesByType("navigation")) {
+    add(entry);
+  }
+  for (const entry of performance.getEntriesByType("resource")) {
+    add(entry);
+  }
+  return result;
+}
+export {
+  createWebPerformance
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@aethervtt/shard-platform-web",
-  "version": "0.0.1",
+  "version": "0.1.0",
   "license": "MIT",
   "type": "module",
   "sideEffects": false,
@@ -16,8 +16,8 @@
     "README.md"
   ],
   "dependencies": {
-    "@aethervtt/shard-core": "0.0.1",
-    "@aethervtt/shard-platform": "0.0.1"
+    "@aethervtt/shard-core": "0.1.0",
+    "@aethervtt/shard-platform": "0.1.0"
   },
   "repository": {
     "type": "git",
@@ -29,6 +29,6 @@
     "provenance": true
   },
   "shard": {
-    "buildSha": "d6c5c6aef4675575c878b02cf2c8f738b4190229"
+    "buildSha": "8e14c9896f82a3554b156f1ffdd68f2cc3e7d78a"
   }
 }