pixi-effects 0.41.0 → 0.42.0

package/dist/{chunk-RN5FWGGM.cjs → chunk-WVZLAIKK.cjs}

@@ -1732,6 +1732,23 @@ function inspectScene(root, frame, time, canvas, opts = {}) {
 }
 
 // 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++) {
@@ -1756,11 +1773,14 @@ var above = (a, b) => {
   }
   return b.length - a.length;
 };
-function pickScene(root, x, y, opts = {}) {
+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 && (opts.ignore.includes(path) || name !== void 0 && opts.ignore.includes(name))) return false;
-    if (opts.only && !(opts.only.includes(path) || name !== void 0 && opts.only.includes(name))) return false;
+    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;
@@ -1790,8 +1810,34 @@ function pickScene(root, x, y, opts = {}) {
         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) hit = { name, path, type: seq.spec.type, kind: "three", point, three };
-          else if (three === void 0 && (typeof d.containsPoint !== "function" || d.containsPoint(local))) hit = { name, path, type: seq.spec.type, kind: "flat", point, local: { x: local.x - lb.x, y: local.y - lb.y } };
+          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;
@@ -1805,6 +1851,82 @@ function pickScene(root, x, y, opts = {}) {
   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;
@@ -2859,6 +2981,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++;
@@ -3072,11 +3202,23 @@ var Movie = class {
   }
   /** Every layer under the canvas point, the one on top first (see `pick`). */
   pickAll(x, y, opts = {}) {
-    chunkTWZNOUM7_cjs.warnUnknownOptions("movie.pick()", opts, ["only", "ignore"]);
+    chunkTWZNOUM7_cjs.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 = {}) {
+    chunkTWZNOUM7_cjs.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");
@@ -4607,5 +4749,5 @@ exports.splitText = splitText;
 exports.stagger = stagger;
 exports.wiggle = wiggle;
 exports.withFade = withFade;
-//# sourceMappingURL=chunk-RN5FWGGM.cjs.map
-//# sourceMappingURL=chunk-RN5FWGGM.cjs.map
+//# sourceMappingURL=chunk-WVZLAIKK.cjs.map
+//# sourceMappingURL=chunk-WVZLAIKK.cjs.map