@pibbl/core 0.0.1

package/dist/lib/render-layer/controller.js

@@ -0,0 +1,603 @@
+import { GLOBAL_STATE, getCurrentPibblInstance } from "../global-state.js";
+import { getCurrentWorldTransform } from "../render-target.js";
+import {
+  queueFrameCompletion,
+  requestInstanceRender
+} from "../scheduler/realm-scheduler.js";
+import {
+  PibblHitDisposition,
+  PibblPaintEntryKind
+} from "../events/paint-entry.js";
+import {
+  createTarget,
+  releaseTarget,
+  updateTarget
+} from "../events/registrations.js";
+import {
+  hasResolverPointerCapture,
+  releaseResolverInputWinner,
+  releaseResolverPointerCapture,
+  setResolverPointerCapture
+} from "../events/resolver-input.js";
+class SynchronousLifecycleError extends TypeError {
+}
+const MISS_SNAPSHOT = Object.freeze({
+  targets: Object.freeze([]),
+  hitTest: () => Object.freeze({ kind: "miss" })
+});
+const RESOLVER_INPUT_TYPES = Object.freeze([
+  "pointerdown",
+  "pointermove",
+  "pointerup",
+  "pointercancel",
+  "wheel",
+  "contextmenu",
+  "click"
+]);
+const RESOLVER_CAPTURE_INPUT_TYPES = Object.freeze([
+  "pointermove",
+  "pointerup",
+  "pointercancel"
+]);
+const STRUCTURAL_CLICK_ELIGIBILITY = () => {
+};
+function assertSynchronous(value, callback) {
+  if (value && typeof value.then === "function") {
+    throw new SynchronousLifecycleError(
+      `defineRenderLayer ${callback}() must be synchronous.`
+    );
+  }
+}
+class RenderLayerController {
+  constructor(definition, refs) {
+    this.definition = definition;
+    this.refs = refs;
+    this.layerTarget = createTarget(this.instance, refs, -1);
+    this.inputWinner = {
+      eventRoot: this.instance.eventRoot,
+      deliver: (type, point, originalEvent, state) => this.deliverInput(type, point, originalEvent, state),
+      onPointerCaptureChange: () => this.updateInputNativeOwnership(
+        Boolean(this.committedInteraction?.onInput)
+      )
+    };
+    this.resolverEntry = {
+      paintKind: PibblPaintEntryKind.Resolver,
+      instance: this.instance,
+      bounds: this.resolverBounds,
+      transform: this.resolverTransform,
+      clippingStack: [],
+      resolveLocal: (x, y, output) => this.resolveLocal(x, y, output)
+    };
+    assertCapability();
+    this.canvas = new OffscreenCanvas(1, 1);
+    const controller = this;
+    this.context = Object.freeze({
+      canvas: this.canvas,
+      get size() {
+        if (!controller.size) {
+          throw new Error("Render layer size is unavailable before mount.");
+        }
+        return controller.size;
+      },
+      invalidate() {
+        controller.invalidate(true);
+      }
+    });
+    refs.teardowns.add(() => this.dispose());
+  }
+  definition;
+  instance = getCurrentPibblInstance();
+  refs;
+  canvas;
+  context;
+  resources;
+  created = false;
+  disposed = false;
+  size;
+  props;
+  needsRender = true;
+  needsResize = true;
+  inputGated = true;
+  candidate;
+  committed;
+  committedInteraction;
+  committedTargetDescriptors = Object.freeze([]);
+  committedTargets = /* @__PURE__ */ new Map();
+  layerTarget;
+  committedPolicy = Object.freeze({
+    missBehavior: "pass-through",
+    pointerEvents: void 0,
+    keyboardFocusable: void 0,
+    keyboardNavigationBounds: void 0
+  });
+  resolverTransform = new DOMMatrix();
+  resolverInverseTransform = new DOMMatrix();
+  resolverBounds = new Path2D();
+  resolverSize;
+  resolutionErrorQueued = false;
+  inputNativeReleases = /* @__PURE__ */ new Map();
+  resolverEntry;
+  inputWinner;
+  lastTime;
+  render(props, size, ctx, policy = this.committedPolicy) {
+    if (this.disposed) return;
+    const initial = !this.created;
+    const propsChanged = !initial && !sameProps(this.props, props);
+    const sizeChanged = !sameSize(this.size, size);
+    const policyChanged = !samePolicy(this.committedPolicy, policy);
+    this.size = size;
+    this.publishResolver(size);
+    if (sizeChanged) {
+      this.canvas.width = size.backingWidth;
+      this.canvas.height = size.backingHeight;
+      this.needsResize = true;
+      this.needsRender = true;
+    }
+    if (initial) {
+      const resources = this.definition.create(this.context, props);
+      assertSynchronous(resources, "create");
+      this.resources = resources;
+      this.created = true;
+    } else {
+      try {
+        if (propsChanged && this.definition.update) {
+          assertSynchronous(
+            this.definition.update(this.resources, props, this.context),
+            "update"
+          );
+        }
+        if (this.needsResize && this.definition.resize) {
+          assertSynchronous(
+            this.definition.resize(this.resources, size, this.context),
+            "resize"
+          );
+          this.needsResize = false;
+        }
+      } catch (error) {
+        if (isSynchronousViolation(error)) throw error;
+        this.failCandidate(ctx, size, error);
+        return;
+      }
+    }
+    if (initial && this.needsResize && this.definition.resize) {
+      try {
+        assertSynchronous(
+          this.definition.resize(this.resources, size, this.context),
+          "resize"
+        );
+        this.needsResize = false;
+      } catch (error) {
+        if (isSynchronousViolation(error)) throw error;
+        this.failCandidate(ctx, size, error);
+        return;
+      }
+    }
+    if (!this.definition.resize) this.needsResize = false;
+    this.props = snapshotProps(props);
+    if (initial || propsChanged || sizeChanged || this.needsRender) {
+      const frame = this.createFrame();
+      this.needsRender = false;
+      try {
+        assertSynchronous(
+          this.definition.render(this.resources, frame, this.context),
+          "render"
+        );
+      } catch (error) {
+        if (isSynchronousViolation(error)) throw error;
+        this.failCandidate(ctx, size, error);
+        return;
+      }
+      let interaction;
+      try {
+        interaction = this.settleInteraction(props);
+      } catch (error) {
+        if (isSynchronousViolation(error)) throw error;
+        this.failCandidate(ctx, size, error);
+        return;
+      }
+      const stagedPolicy = snapshotPolicy(policy);
+      const candidate = this.canvas.transferToImageBitmap();
+      this.candidate?.bitmap.close();
+      const stagedCandidate = {
+        bitmap: candidate,
+        interaction,
+        policy: stagedPolicy
+      };
+      this.candidate = stagedCandidate;
+      const transaction2 = GLOBAL_STATE.renderTransaction;
+      transaction2?.onFinish(
+        (success) => this.finishCandidate(stagedCandidate, success)
+      );
+      if (!transaction2) this.finishCandidate(stagedCandidate, true);
+      ctx.drawImage(
+        candidate,
+        0,
+        0,
+        size.backingWidth,
+        size.backingHeight,
+        0,
+        0,
+        size.width,
+        size.height
+      );
+      return;
+    }
+    const transaction = GLOBAL_STATE.renderTransaction;
+    transaction?.onFinish((success) => {
+      if (success && !this.disposed) {
+        if (policyChanged && this.committedInteraction) {
+          this.commitInteraction(
+            {
+              snapshot: this.committedInteraction,
+              targets: this.committedTargetDescriptors,
+              transform: this.resolverTransform,
+              clippingStack: this.resolverEntry.clippingStack
+            },
+            snapshotPolicy(policy)
+          );
+        }
+        this.refreshCommittedTargetGeometry();
+      }
+    });
+    if (!transaction && policyChanged && this.committedInteraction) {
+      this.commitInteraction(
+        {
+          snapshot: this.committedInteraction,
+          targets: this.committedTargetDescriptors,
+          transform: this.resolverTransform,
+          clippingStack: this.resolverEntry.clippingStack
+        },
+        snapshotPolicy(policy)
+      );
+    }
+    this.drawCommitted(ctx, size);
+  }
+  publishResolver(size) {
+    if (!sameSize(this.resolverSize, size)) {
+      const bounds = new Path2D();
+      bounds.rect(0, 0, size.width, size.height);
+      this.resolverBounds = bounds;
+      this.resolverEntry.bounds = bounds;
+      this.resolverSize = size;
+    }
+    this.resolverTransform = getCurrentWorldTransform();
+    this.resolverInverseTransform = this.resolverTransform.inverse();
+    this.resolverEntry.transform = this.resolverTransform;
+    this.resolverEntry.clippingStack = Array.from(GLOBAL_STATE.clippingStack);
+    this.instance.paintEntries.delete(this.resolverEntry);
+    this.instance.paintEntries.add(this.resolverEntry);
+  }
+  drawCommitted(ctx, size) {
+    if (this.committed) {
+      ctx.drawImage(
+        this.committed,
+        0,
+        0,
+        size.backingWidth,
+        size.backingHeight,
+        0,
+        0,
+        size.width,
+        size.height
+      );
+    }
+  }
+  createFrame() {
+    const snapshot = GLOBAL_STATE.frameSnapshot;
+    const time = snapshot?.logicalTime ?? this.instance.renderTimestamp;
+    const delta = this.lastTime === void 0 ? 0 : time - this.lastTime;
+    this.lastTime = time;
+    return Object.freeze({
+      frameId: snapshot?.frameId ?? 0,
+      time,
+      delta,
+      deltaSeconds: delta / 1e3,
+      invalidate: () => this.invalidate(false)
+    });
+  }
+  invalidate(gateInput) {
+    if (this.disposed || this.refs.teardowns.closed || this.instance.mainTeardowns.closed)
+      return;
+    this.needsRender = true;
+    if (gateInput) this.inputGated = true;
+    requestInstanceRender(this.instance);
+  }
+  settleInteraction(props) {
+    const snapshot = this.definition.interaction?.settle(this.resources, props, this.size) ?? MISS_SNAPSHOT;
+    assertSynchronous(snapshot, "interaction.settle");
+    const targets = [];
+    const identities = /* @__PURE__ */ new Set();
+    for (const target of snapshot.targets) {
+      if (identities.has(target.target)) {
+        throw new Error(
+          "Render layer interaction contains a duplicate target identity."
+        );
+      }
+      identities.add(target.target);
+      targets.push(
+        Object.freeze({
+          ...target,
+          handlers: target.handlers ? Object.freeze({ ...target.handlers }) : void 0,
+          keyboardNavigationBounds: target.keyboardNavigationBounds ? Object.freeze({ ...target.keyboardNavigationBounds }) : void 0
+        })
+      );
+    }
+    return {
+      snapshot,
+      targets: Object.freeze(targets),
+      transform: this.resolverTransform,
+      clippingStack: this.resolverEntry.clippingStack
+    };
+  }
+  finishCandidate(candidate, success) {
+    if (this.candidate !== candidate) return;
+    this.candidate = void 0;
+    if (!success || this.disposed) {
+      candidate.bitmap.close();
+      return;
+    }
+    this.commitInteraction(candidate.interaction, candidate.policy);
+    this.committed?.close();
+    this.committed = candidate.bitmap;
+    this.resolutionErrorQueued = false;
+    this.inputGated = false;
+  }
+  /** Publishes one interaction snapshot only after its bitmap transaction wins. */
+  commitInteraction(interaction, policy) {
+    const retained = /* @__PURE__ */ new Set();
+    for (const descriptor of policy.pointerEvents === "none" ? [] : interaction.targets) {
+      if (descriptor.pointerEvents === "none") continue;
+      retained.add(descriptor.target);
+      let registration = this.committedTargets.get(descriptor.target);
+      if (!registration) {
+        registration = createTarget(
+          this.instance,
+          this.refs,
+          this.committedTargets.size + 1
+        );
+        this.committedTargets.set(descriptor.target, registration);
+      }
+      updateTarget(
+        registration,
+        descriptor.handlers ?? {},
+        {
+          path: new Path2D(),
+          cursor: descriptor.cursor,
+          keyboardFocusable: descriptor.keyboardFocusable,
+          keyboardNavigationBounds: descriptor.keyboardNavigationBounds
+        },
+        true
+      );
+      this.applyResolverGeometry(registration, interaction);
+      this.observeTransactionalFocusTarget(registration);
+    }
+    for (const [identity, registration] of this.committedTargets) {
+      if (retained.has(identity)) continue;
+      releaseTarget(registration);
+      this.committedTargets.delete(identity);
+    }
+    if (policy.pointerEvents !== "none" && policy.missBehavior === "target-layer") {
+      updateTarget(
+        this.layerTarget,
+        { onClick: STRUCTURAL_CLICK_ELIGIBILITY },
+        {
+          path: new Path2D(),
+          keyboardFocusable: policy.keyboardFocusable,
+          keyboardNavigationBounds: policy.keyboardNavigationBounds
+        },
+        true
+      );
+      this.applyResolverGeometry(this.layerTarget, interaction);
+      this.observeTransactionalFocusTarget(this.layerTarget);
+    } else {
+      releaseTarget(this.layerTarget);
+    }
+    this.committedInteraction = interaction.snapshot;
+    this.committedTargetDescriptors = interaction.targets;
+    this.committedPolicy = policy;
+    this.updateInputNativeOwnership(Boolean(interaction.snapshot.onInput));
+  }
+  applyResolverGeometry(target, interaction) {
+    if (!target.paintEntry) return;
+    target.paintEntry.transform = interaction.transform;
+    target.paintEntry.clippingStack = interaction.clippingStack;
+    target.owner.paintEntries.delete(target.paintEntry);
+  }
+  refreshCommittedTargetGeometry() {
+    const interaction = {
+      transform: this.resolverTransform,
+      clippingStack: this.resolverEntry.clippingStack
+    };
+    for (const target of this.committedTargets.values()) {
+      this.applyResolverGeometry(target, interaction);
+      this.instance.eventRoot.focusPolicy?.observeTarget(target);
+      this.observeTransactionalFocusTarget(target);
+    }
+    if (this.layerTarget.live) {
+      this.applyResolverGeometry(this.layerTarget, interaction);
+      this.instance.eventRoot.focusPolicy?.observeTarget(this.layerTarget);
+      this.observeTransactionalFocusTarget(this.layerTarget);
+    }
+  }
+  observeTransactionalFocusTarget(target) {
+    this.instance.eventRoot.focusPolicy?.observeTransactionalTarget?.(target);
+  }
+  resolveLocal(localX, localY, output) {
+    if (this.committedPolicy.pointerEvents === "none") {
+      output.disposition = PibblHitDisposition.Miss;
+      output.target = null;
+      return;
+    }
+    const state = this.resolveWinnerState(localX, localY);
+    output.winner = this.inputWinner;
+    output.winnerState = state;
+    switch (state.hit.kind) {
+      case "miss":
+        if (this.committedPolicy.missBehavior === "pass-through") {
+          output.disposition = PibblHitDisposition.Miss;
+          output.target = null;
+          delete output.winner;
+          delete output.winnerState;
+        } else if (this.committedPolicy.missBehavior === "block") {
+          output.disposition = PibblHitDisposition.Block;
+          output.target = null;
+        } else {
+          output.disposition = PibblHitDisposition.Target;
+          output.target = this.layerTarget.live ? this.layerTarget : null;
+        }
+        return;
+      case "block":
+        output.disposition = PibblHitDisposition.Block;
+        output.target = null;
+        return;
+      case "target": {
+        const target = this.committedTargets.get(state.hit.target);
+        if (!target?.live) {
+          output.disposition = PibblHitDisposition.Block;
+          output.target = null;
+          output.winnerState = {
+            point: state.point,
+            hit: Object.freeze({ kind: "block" })
+          };
+          this.reportUnknownTarget();
+          return;
+        }
+        output.disposition = PibblHitDisposition.Target;
+        output.target = target;
+      }
+    }
+  }
+  resolveWinnerState(localX, localY) {
+    const point = Object.freeze({ x: localX, y: localY });
+    if (this.inputGated || !this.committedInteraction) {
+      return { point, hit: Object.freeze({ kind: "block" }) };
+    }
+    const hit = this.committedInteraction.hitTest(point);
+    if (hit.kind === "target" && !this.committedTargets.has(hit.target)) {
+      this.reportUnknownTarget();
+      return { point, hit: Object.freeze({ kind: "block" }) };
+    }
+    return { point, hit };
+  }
+  reportUnknownTarget() {
+    if (this.resolutionErrorQueued) return;
+    this.resolutionErrorQueued = true;
+    queueFrameCompletion(() => {
+      throw new Error(
+        "Render layer hitTest() returned a target absent from its committed snapshot."
+      );
+    });
+  }
+  deliverInput(type, rootPoint, originalEvent, resolvedState) {
+    const snapshot = this.committedInteraction;
+    if (!snapshot?.onInput || this.disposed) return;
+    let state = resolvedState;
+    if (!state) {
+      const local = this.resolverInverseTransform.transformPoint(
+        new DOMPoint(rootPoint.x, rootPoint.y)
+      );
+      state = this.resolveWinnerState(local.x, local.y);
+    }
+    snapshot.onInput(
+      Object.freeze({
+        type,
+        point: state.point,
+        hit: state.hit,
+        originalEvent,
+        setPointerCapture: (pointerId) => setResolverPointerCapture(this.inputWinner, pointerId),
+        releasePointerCapture: (pointerId) => releaseResolverPointerCapture(this.inputWinner, pointerId)
+      })
+    );
+  }
+  updateInputNativeOwnership(enabled) {
+    const required = new Set(
+      enabled ? RESOLVER_INPUT_TYPES : hasResolverPointerCapture(this.inputWinner) ? RESOLVER_CAPTURE_INPUT_TYPES : []
+    );
+    for (const [type, release] of this.inputNativeReleases) {
+      if (required.has(type)) continue;
+      release();
+      this.inputNativeReleases.delete(type);
+    }
+    const hub = this.instance.eventRoot.nativeListeners;
+    if (!hub) return;
+    for (const type of required) {
+      if (!this.inputNativeReleases.has(type)) {
+        this.inputNativeReleases.set(type, hub.acquire(type));
+      }
+    }
+  }
+  failCandidate(ctx, size, error) {
+    this.inputGated = true;
+    this.drawCommitted(ctx, size);
+    queueFrameCompletion(() => {
+      throw error;
+    });
+  }
+  dispose() {
+    if (this.disposed) return;
+    this.disposed = true;
+    try {
+      if (this.created && this.definition.dispose) {
+        assertSynchronous(
+          this.definition.dispose(this.resources, this.context),
+          "dispose"
+        );
+      }
+    } finally {
+      this.canvas.width = this.canvas.height = 0;
+      this.candidate?.bitmap.close();
+      this.committed?.close();
+      for (const target of this.committedTargets.values())
+        releaseTarget(target);
+      this.committedTargets.clear();
+      releaseTarget(this.layerTarget);
+      releaseResolverInputWinner(this.inputWinner);
+      this.updateInputNativeOwnership(false);
+      this.candidate = void 0;
+      this.committed = void 0;
+      this.committedInteraction = void 0;
+    }
+  }
+}
+function assertCapability() {
+  if (typeof OffscreenCanvas !== "function" || typeof OffscreenCanvas.prototype.transferToImageBitmap !== "function") {
+    throw new Error(
+      "defineRenderLayer requires OffscreenCanvas with transferToImageBitmap()."
+    );
+  }
+}
+function sameSize(a, b) {
+  return !!a && a.width === b.width && a.height === b.height && a.backingWidth === b.backingWidth && a.backingHeight === b.backingHeight;
+}
+function isSynchronousViolation(error) {
+  return error instanceof SynchronousLifecycleError;
+}
+function snapshotProps(props) {
+  return Object.freeze({ ...props });
+}
+function sameProps(a, b) {
+  if (!a) return false;
+  const aKeys = Reflect.ownKeys(a);
+  const bKeys = Reflect.ownKeys(b);
+  return aKeys.length === bKeys.length && aKeys.every(
+    (key) => Object.prototype.hasOwnProperty.call(b, key) && Object.is(a[key], b[key])
+  );
+}
+function snapshotPolicy(policy) {
+  return Object.freeze({
+    missBehavior: policy.missBehavior,
+    pointerEvents: policy.pointerEvents,
+    keyboardFocusable: policy.keyboardFocusable,
+    keyboardNavigationBounds: policy.keyboardNavigationBounds ? Object.freeze({
+      ...policy.keyboardNavigationBounds
+    }) : void 0
+  });
+}
+function samePolicy(a, b) {
+  return a.missBehavior === b.missBehavior && a.pointerEvents === b.pointerEvents && a.keyboardFocusable === b.keyboardFocusable && a.keyboardNavigationBounds?.x === b.keyboardNavigationBounds?.x && a.keyboardNavigationBounds?.y === b.keyboardNavigationBounds?.y && a.keyboardNavigationBounds?.width === b.keyboardNavigationBounds?.width && a.keyboardNavigationBounds?.height === b.keyboardNavigationBounds?.height;
+}
+export {
+  RenderLayerController,
+  assertSynchronous
+};
+//# sourceMappingURL=controller.js.map