panelui-native 0.97.0 → 0.99.0

package/README.md

@@ -300,6 +300,7 @@ memory pressure the OS can end the process with nothing in the terminal to expla
 | `Spinner` | Indeterminate loading indicator |
 | `SplitView` | Two stacked panes whose seam settles on one of a few named heights |
 | `Splitter` | Panes that share a container, with a seam between them you can drag |
+| `StackCard` | A pile of cards, taken one at a time by throwing the top one off |
 | `Steps` | Stepper for multi-step flows |
 | `Surface` | Elevated container with a variant ladder |
 | `Swipe` | A row that slides aside to reveal the things you can do to it |

package/lib/module/components/image-viewer/image-viewer-geometry.js

@@ -0,0 +1,203 @@
+"use strict";
+
+/**
+ * The arithmetic behind the image viewer, kept apart from the component.
+ *
+ * Every function here runs on the UI thread inside a gesture or an animated
+ * style, so each is a worklet. None of them touches React Native, which is what
+ * lets the contract tests run them in Node.
+ */
+
+/** How much a rubber-banded overshoot gives. Lower is stiffer. */
+export const RUBBER_BAND = 0.55;
+export function clamp(value, min, max) {
+  'worklet';
+
+  return Math.min(Math.max(value, min), max);
+}
+export function lerp(from, to, t) {
+  'worklet';
+
+  return from + (to - from) * t;
+}
+export function lerpRect(from, to, t) {
+  'worklet';
+
+  return {
+    x: lerp(from.x, to.x, t),
+    y: lerp(from.y, to.y, t),
+    width: lerp(from.width, to.width, t),
+    height: lerp(from.height, to.height, t)
+  };
+}
+
+/**
+ * The largest rect with the image's proportions that fits inside the box,
+ * centred in it. An image with no known size fills the box.
+ */
+export function fitContain(image, box) {
+  'worklet';
+
+  if (image.width <= 0 || image.height <= 0) {
+    return {
+      x: 0,
+      y: 0,
+      width: box.width,
+      height: box.height
+    };
+  }
+  const scale = Math.min(box.width / image.width, box.height / image.height);
+  const width = image.width * scale;
+  const height = image.height * scale;
+  return {
+    x: (box.width - width) / 2,
+    y: (box.height - height) / 2,
+    width,
+    height
+  };
+}
+
+/** `fitContain` inside a rect that does not start at the origin. */
+export function fitWithin(image, box) {
+  'worklet';
+
+  const fitted = fitContain(image, box);
+  return {
+    ...fitted,
+    x: box.x + fitted.x,
+    y: box.y + fitted.y
+  };
+}
+
+/**
+ * The smallest size with the image's proportions that covers the frame.
+ *
+ * A thumbnail crops its picture to its box; the viewer shows the whole of it.
+ * Drawing the image at this size inside a frame that grows from one to the
+ * other is what makes the crop open out instead of the picture jumping.
+ */
+export function coverSize(image, frame) {
+  'worklet';
+
+  if (image.width <= 0 || image.height <= 0) {
+    return {
+      width: frame.width,
+      height: frame.height
+    };
+  }
+  const scale = Math.max(frame.width / image.width, frame.height / image.height);
+  return {
+    width: image.width * scale,
+    height: image.height * scale
+  };
+}
+
+/**
+ * How far past its limit a value is allowed to travel, given how far it was
+ * pushed. The resistance grows with the push and never quite reaches `dimension`.
+ */
+export function rubberBand(overshoot, dimension, coefficient) {
+  'worklet';
+
+  if (dimension <= 0) return 0;
+  const give = coefficient ?? RUBBER_BAND;
+  return (1 - 1 / (overshoot * give / dimension + 1)) * dimension;
+}
+
+/** Clamps to `[min, max]`, letting the value stretch past either end with resistance. */
+export function rubberBandClamp(value, min, max, dimension, coefficient) {
+  'worklet';
+
+  const clamped = clamp(value, min, max);
+  const overshoot = Math.abs(value - clamped);
+  if (overshoot === 0) return clamped;
+  const sign = value < clamped ? -1 : 1;
+  return clamped + sign * rubberBand(overshoot, dimension, coefficient);
+}
+
+/**
+ * How far a zoomed image may be moved along one axis before its edge comes away
+ * from the screen's. Zero while the scaled image is smaller than the screen,
+ * which keeps it centred on that axis.
+ */
+export function panBound(fitted, scale, viewport) {
+  'worklet';
+
+  return Math.max(0, (fitted * scale - viewport) / 2);
+}
+
+/**
+ * The translation that keeps a point under the fingers while the scale changes.
+ *
+ * `offset` is where that point sat relative to the image's centre when the
+ * pinch began, at `fromScale`; `focal` is the fingers' position now, relative
+ * to the screen's centre. The result is measured from the screen's centre too.
+ */
+export function focalTranslation(focal, offset, fromScale, toScale) {
+  'worklet';
+
+  if (fromScale === 0) return focal;
+  return focal - offset * (toScale / fromScale);
+}
+
+/**
+ * The page a released pager settles on. Where it would have coasted to decides
+ * it rather than where it was let go, so a short flick still turns the page —
+ * but never by more than one, which is what a flick means.
+ */
+export function snapPage(offset, velocity, current, count, pageWidth) {
+  'worklet';
+
+  if (count <= 1 || pageWidth <= 0) return 0;
+  const projected = -(offset + velocity * 0.25) / pageWidth;
+  const target = Math.round(projected);
+  return clamp(clamp(target, current - 1, current + 1), 0, count - 1);
+}
+
+/** How far a drag has to travel, counting where it was flung, to close the viewer. */
+export const DISMISS_DISTANCE = 110;
+
+/**
+ * Whether a released drag closes the viewer.
+ *
+ * Measured on where the image was heading rather than where it was dropped, so
+ * a quick flick closes it from a short distance and a slow drag that is let go
+ * of carefully does not. A throw back towards the centre cancels.
+ */
+export function shouldDismiss(translation, velocity) {
+  'worklet';
+
+  const projected = translation + velocity * 0.2;
+  if (Math.abs(projected) <= DISMISS_DISTANCE) return false;
+  return translation === 0 || Math.sign(projected) === Math.sign(translation);
+}
+
+/**
+ * How much of the backdrop is left while the image is dragged away from the
+ * centre. It is mostly gone by the time the drag would close the viewer, so the
+ * page coming back into focus is the warning that letting go will close it.
+ */
+export function dragFade(distance, viewport) {
+  'worklet';
+
+  if (viewport <= 0) return 1;
+  return 1 - clamp(Math.abs(distance) / (viewport * 0.4), 0, 1) * 0.85;
+}
+
+/** How small the image gets while it is dragged. Never below 0.8 of its size. */
+export function dragScale(distance, viewport) {
+  'worklet';
+
+  if (viewport <= 0) return 1;
+  return 1 - clamp(Math.abs(distance) / viewport, 0, 1) * 0.2;
+}
+
+/** Whether a point lands on a rect that has been scaled about its centre and moved. */
+export function hitsRect(px, py, rect, scale, tx, ty) {
+  'worklet';
+
+  const cx = rect.x + rect.width / 2 + tx;
+  const cy = rect.y + rect.height / 2 + ty;
+  return Math.abs(px - cx) <= rect.width * scale / 2 && Math.abs(py - cy) <= rect.height * scale / 2;
+}
+//# sourceMappingURL=image-viewer-geometry.js.map

package/lib/module/components/image-viewer/image-viewer-geometry.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["RUBBER_BAND","clamp","value","min","max","Math","lerp","from","to","t","lerpRect","x","y","width","height","fitContain","image","box","scale","fitWithin","fitted","coverSize","frame","rubberBand","overshoot","dimension","coefficient","give","rubberBandClamp","clamped","abs","sign","panBound","viewport","focalTranslation","focal","offset","fromScale","toScale","snapPage","velocity","current","count","pageWidth","projected","target","round","DISMISS_DISTANCE","shouldDismiss","translation","dragFade","distance","dragScale","hitsRect","px","py","rect","tx","ty","cx","cy"],"sourceRoot":"../../../../src","sources":["components/image-viewer/image-viewer-geometry.ts"],"mappings":"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","ignoreList":[]}