pixi-effects 0.40.0 → 0.42.0

package/dist/{chunk-CT5CZVT5.js → chunk-NFJKBWYO.js}

@@ -1,5 +1,5 @@
-import { CompositionSequence, maskSourceOf } from './chunk-26Z544SH.js';
-import { EXPRESSION_NAMES, createTimeline, lengthen, ensureFilterLibrary, checkEase, parseEase, homeDistance, DEFAULT_FOV, random, noise, flattenSvgPath, trimPolylines, rand, DEG, timeRemapOf, contentLength, resolveAt, parseSpring, springDuration, spansMeta } from './chunk-LMWXR5OC.js';
+import { CompositionSequence, maskSourceOf } from './chunk-ICI6ACHY.js';
+import { EXPRESSION_NAMES, createTimeline, lengthen, ensureFilterLibrary, checkEase, parseEase, homeDistance, DEFAULT_FOV, random, noise, flattenSvgPath, trimPolylines, rand, DEG, timeRemapOf, contentLength, resolveAt, parseSpring, springDuration, spansMeta } from './chunk-4QVQ5UJJ.js';
 import { analyzeAudio, fft, resampleThrough, playSpan } from './chunk-UHNSL2KJ.js';
 import { usesAdvancedBlend, enableAdvancedBlend } from './chunk-VNP7QCJE.js';
 import { describeLayer } from './chunk-32MMNDDN.js';
@@ -1729,6 +1729,202 @@ function inspectScene(root, frame, time, canvas, opts = {}) {
   return { frame, time, canvas, summary: { layers: layers.length, visible: layers.filter((l) => l.visible).length }, issues, layers: listed };
 }
 
+// src/core/pick.ts
+var scratch;
+var saidBlind = /* @__PURE__ */ new Set();
+var readResourceAlpha = (resource, x, y) => {
+  try {
+    if (scratch === void 0) {
+      const c = document.createElement("canvas");
+      c.width = c.height = 1;
+      scratch = c.getContext("2d", { willReadFrequently: true });
+    }
+    if (!scratch) return null;
+    scratch.clearRect(0, 0, 1, 1);
+    scratch.drawImage(resource, x, y, 1, 1, 0, 0, 1, 1);
+    return scratch.getImageData(0, 0, 1, 1).data[3] / 255;
+  } catch {
+    return null;
+  }
+};
+function pointInQuad(q, x, y) {
+  let pos = 0, neg = 0;
+  for (let i = 0; i < 4; i++) {
+    const ax = q[i * 2], ay = q[i * 2 + 1], bx = q[(i + 1) % 4 * 2], by = q[(i + 1) % 4 * 2 + 1];
+    const cross = (bx - ax) * (y - ay) - (by - ay) * (x - ax);
+    if (cross > 0) pos++;
+    else if (cross < 0) neg++;
+  }
+  return pos === 0 || neg === 0;
+}
+function orderOf(node) {
+  const key = [];
+  for (let n = node; n && n.parent; n = n.parent) {
+    key.unshift([n.zIndex ?? 0, Math.max(0, n.parent.children?.indexOf(n) ?? 0)]);
+  }
+  return key;
+}
+var above = (a, b) => {
+  for (let i = 0; i < Math.min(a.length, b.length); i++) {
+    if (a[i][0] !== b[i][0]) return b[i][0] - a[i][0];
+    if (a[i][1] !== b[i][1]) return b[i][1] - a[i][1];
+  }
+  return b.length - a.length;
+};
+function pickScene(root, x, y, opts = {}, deps = {}) {
+  if (opts.alpha !== void 0 && !(opts.alpha >= 0 && opts.alpha <= 1)) throw new Error(`pixi-effects: pick: alpha must be a number from 0 to 1 (a pixel at or below it is not a hit), got ${opts.alpha}`);
+  const readAlpha = deps.readAlpha ?? readResourceAlpha;
+  const found = [];
+  const names = (list, name, path) => list.some((e) => e === path || name !== void 0 && e === name || path.startsWith(e + "/") || path.split("/").slice(0, -1).includes(e));
+  const wanted = (name, path) => {
+    if (opts.ignore && names(opts.ignore, name, path)) return false;
+    if (opts.only && !names(opts.only, name, path)) return false;
+    return true;
+  };
+  const inside = (b, p) => p.x >= b.x && p.x <= b.x + b.width && p.y >= b.y && p.y <= b.y + b.height;
+  const walk2 = (comp, prefix, parentVisible) => {
+    comp.layers().forEach(({ seq, display, threeD, carriers, quad }, i) => {
+      const d = display;
+      if (!d) return;
+      const t = seq.target;
+      const name = seq.spec.name;
+      const path = prefix + (name ?? `${seq.spec.type}#${i}`);
+      const alpha = (t?.alpha ?? 1) * carriers.reduce((a, c) => a * (c.target?.alpha ?? 1), 1);
+      const alive = (threeD ? d.visible : t?.renderable ?? true) && carriers.every((c) => c.target?.renderable ?? true);
+      const visible = parentVisible && alive && alpha > 0;
+      if (!visible) return;
+      const isComposition = seq instanceof CompositionSequence;
+      if (isComposition && !threeD) {
+        walk2(seq, path + "/", visible);
+        return;
+      }
+      if (!wanted(name, path)) return;
+      const point = { x, y };
+      let hit = null;
+      if (threeD) {
+        if (quad && pointInQuad(quad, d.toLocal(point).x, d.toLocal(point).y)) hit = { name, path, type: seq.spec.type, kind: "card", point };
+      } else {
+        const local = d.toLocal(point);
+        const lb = d.getLocalBounds();
+        if (inside(lb, local)) {
+          const three = typeof seq.pickAt === "function" ? seq.pickAt((local.x - lb.x) / lb.width, (local.y - lb.y) / lb.height) : void 0;
+          if (three) {
+            const planeOf = seq.dragPlane;
+            if (planeOf) {
+              three.grab = (plane = "screen") => {
+                const along = planeOf.call(seq, three.point, plane);
+                return { move: (cx, cy) => {
+                  const lp = d.toLocal({ x: cx, y: cy });
+                  const b = d.getLocalBounds();
+                  return along((lp.x - b.x) / b.width, (lp.y - b.y) / b.height);
+                } };
+              };
+            }
+            hit = { name, path, type: seq.spec.type, kind: "three", point, three };
+          } else if (three === void 0 && (typeof d.containsPoint !== "function" || d.containsPoint(local))) {
+            let opaque = true;
+            const tex = opts.alpha !== void 0 && seq.spec.type !== "shader" ? d.texture : void 0;
+            if (tex?.source?.resource) {
+              const res = tex.source.resolution ?? 1;
+              const a = readAlpha(tex.source.resource, (tex.frame.x + (local.x - lb.x) / lb.width * tex.frame.width) * res, (tex.frame.y + (local.y - lb.y) / lb.height * tex.frame.height) * res);
+              if (a === null) {
+                if (!saidBlind.has(path)) {
+                  saidBlind.add(path);
+                  console.warn(`pixi-effects: pick: the picture of layer "${path}" cannot be read for { alpha } (a picture from another origin: load it with crossorigin="anonymous" or from the same site), so the box counts as the picture`);
+                }
+              } else opaque = a > opts.alpha;
+            }
+            if (opaque) hit = { name, path, type: seq.spec.type, kind: "flat", point, local: { x: local.x - lb.x, y: local.y - lb.y } };
+          }
+        }
+      }
+      if (!hit) return;
+      const maskTarget = seq.maskSequence?.target;
+      const maskSrc = maskSourceOf(seq.spec.mask);
+      if (maskTarget && !(maskSrc.kind === "inline" && maskSrc.invert) && !inside(maskTarget.getBounds(), point)) return;
+      found.push({ hit, order: orderOf(d) });
+    });
+  };
+  walk2(root, "", true);
+  return found.sort((a, b) => above(a.order, b.order)).map((f) => f.hit);
+}
+
+// src/core/hover.ts
+var keyOf = (h) => h ? `${h.path}${h.three ? `#${h.three.object}` : ""}` : null;
+function startHover(host, opts = {}) {
+  const { canvas } = host;
+  const request = host.requestFrame ?? ((fn) => requestAnimationFrame(fn));
+  const cancel = host.cancelFrame ?? ((id) => cancelAnimationFrame(id));
+  const cursor = opts.cursor === true ? "pointer" : opts.cursor || "";
+  const pickOpts = {};
+  if (opts.only) pickOpts.only = opts.only;
+  if (opts.ignore) pickOpts.ignore = opts.ignore;
+  let current = null;
+  let last = null;
+  let loop = null;
+  let said = false;
+  const call = (fn, hit) => {
+    if (!fn) return;
+    try {
+      fn(hit);
+    } catch (err) {
+      if (!said) {
+        said = true;
+        console.warn("pixi-effects: movie.hover: a handler threw (said once) \u2014", err);
+      }
+    }
+  };
+  const setCursor = (on) => {
+    if (cursor) canvas.style.cursor = on ? cursor : "";
+  };
+  const evaluate = () => {
+    if (!last) return;
+    const [x, y] = host.point(last);
+    const hit = host.pick(x, y, pickOpts);
+    if (keyOf(hit) === keyOf(current)) {
+      current = hit ?? current;
+      return;
+    }
+    const was = current;
+    current = hit;
+    if (was) call(opts.onLeave, was);
+    if (hit) call(opts.onEnter, hit);
+    setCursor(!!hit);
+  };
+  const tick = () => {
+    loop = null;
+    if (last) {
+      evaluate();
+      loop = request(tick);
+    }
+  };
+  const onMove = (event) => {
+    last = event;
+    evaluate();
+    if (loop === null) loop = request(tick);
+  };
+  const onLeave = () => {
+    last = null;
+    if (loop !== null) {
+      cancel(loop);
+      loop = null;
+    }
+    const was = current;
+    current = null;
+    if (was) call(opts.onLeave, was);
+    setCursor(false);
+  };
+  canvas.addEventListener("pointermove", onMove);
+  canvas.addEventListener("pointerdown", onMove);
+  canvas.addEventListener("pointerleave", onLeave);
+  return () => {
+    canvas.removeEventListener("pointermove", onMove);
+    canvas.removeEventListener("pointerdown", onMove);
+    canvas.removeEventListener("pointerleave", onLeave);
+    onLeave();
+  };
+}
+
 // src/core/timelineChart.ts
 var GROUP_MIN = 4;
 var MAX_KEYS = 200;
@@ -2783,6 +2979,14 @@ var Movie = class {
     await this._goto(frame);
     this.emit("seeked", { frame: this.currentFrame, totalFrames: this.totalFrames });
   }
+  /**
+   * Draw the frame on screen again, quietly (no `seeking` / `seeked`). For a paused movie when something outside it that a layer reads has changed: a `three` layer whose `update` reads the page's own
+   * state (a dragged object's place) shows it after `await movie.redraw()`. A playing movie needs no call: the next frame draws it.
+   */
+  async redraw() {
+    this._requireReady("redraw");
+    await this._quietly(() => this.gotoFrame(this.currentFrame, true));
+  }
   /** Run `fn` with `seeking` / `seeked` silenced: the movie is moving its own playhead, not answering a seek. */
   async _quietly(fn) {
     this._quiet++;
@@ -2986,6 +3190,41 @@ var Movie = class {
    * Where every layer is drawn at `frame` (canvas pixels, visibility) plus `issues` — text that is off
    * the canvas, cut by an edge, empty, or overlapping other text. Seeks there and stays there.
    */
+  /**
+   * What is under the canvas point (x, y) (canvas pixels: the movie's own `width` x `height`; `canvasPoint(event)` makes them from a pointer event) at the frame on screen: the layer on
+   * top, or null. A flat layer is hit by its own shape, a `threeD` card by its projected quad, a `three` layer by a ray through its camera (`hit.three` has the object). It reads the
+   * frame as the last draw left it, so after `await movie.snapshot(frame)` or any seek it answers for that frame. `opts.only` / `opts.ignore`: layer names or paths.
+   */
+  pick(x, y, opts = {}) {
+    return this.pickAll(x, y, opts)[0] ?? null;
+  }
+  /** Every layer under the canvas point, the one on top first (see `pick`). */
+  pickAll(x, y, opts = {}) {
+    warnUnknownOptions("movie.pick()", opts, ["only", "ignore", "alpha"]);
+    this._requireReady("pick");
+    if (!Number.isFinite(x) || !Number.isFinite(y)) throw new Error(`pixi-effects: movie.pick(x, y) needs two numbers (canvas pixels), got ${x}, ${y}. For a pointer event: movie.pick(...movie.canvasPoint(event))`);
+    return pickScene(this._rootSequence, x, y, opts);
+  }
+  /**
+   * Which layer the pointer is over, as callbacks: `onEnter(hit)` when the layer (or, in a `three` layer, the object) under the pointer changes to another, `onLeave(hit)` for the one it
+   * left (also when the pointer leaves the picture). While the pointer rests inside, it is asked again on every frame, so a picture that moves under a still pointer is followed.
+   * `{ only, ignore }` as for `pick`; `cursor: true` (or a CSS cursor) shows it while something is hovered. Returns the function that stops it. A page-side tool: an exported video has no pointer.
+   */
+  hover(opts = {}) {
+    warnUnknownOptions("movie.hover()", opts, ["onEnter", "onLeave", "cursor", "only", "ignore"]);
+    this._requireReady("hover");
+    const canvas = this.app?.canvas;
+    if (!canvas) throw new Error("pixi-effects: movie.hover needs the movie's canvas");
+    return startHover({ canvas, pick: (x, y, o) => this.pick(x, y, o), point: (e) => this.canvasPoint(e) }, opts);
+  }
+  /** A pointer event's place in canvas pixels (the canvas may be shown larger or smaller than its own size): `movie.pick(...movie.canvasPoint(event))`. */
+  canvasPoint(event) {
+    this._requireReady("canvasPoint");
+    const canvas = this.app?.canvas;
+    if (!canvas) throw new Error("pixi-effects: movie.canvasPoint needs the movie's canvas");
+    const r = canvas.getBoundingClientRect();
+    return [(event.clientX - r.left) * this.width / (r.width || this.width), (event.clientY - r.top) * this.height / (r.height || this.height)];
+  }
   async inspect(frame = this.currentFrame, opts = { layers: "visible" }) {
     warnUnknownOptions("movie.inspect()", opts, ["layers"]);
     this._requireReady("inspect");
@@ -4485,5 +4724,5 @@ function withFade(spec, opts) {
 }
 
 export { Movie, animateText, audioEnvelope, bpmEnvelope, cameraPath, computeEnvelope, dismissLoader, failLoader, followPath, kenBurns, measureText, musicBuffer, musicEnvelope, musicEvents, orbit, parseEase2 as parseEase, particles, react, resolveLoader, samplePath, splitText, stagger, wiggle, withFade };
-//# sourceMappingURL=chunk-CT5CZVT5.js.map
-//# sourceMappingURL=chunk-CT5CZVT5.js.map
+//# sourceMappingURL=chunk-NFJKBWYO.js.map
+//# sourceMappingURL=chunk-NFJKBWYO.js.map