@swiftbrowser/web 0.9.3 → 0.9.5

package/src/scrollAnchor.ts

@@ -0,0 +1,110 @@
+/**
+ * `.defaultScrollAnchor(_:)` on a `ScrollView` (docs/ops-protocol.md, "Default
+ * scroll anchor"): the scroll view carries `defaultScrollAnchor`, a unit
+ * point. The content starts there (`.bottom`: the end is in view, as a chat
+ * opens on its latest message), and when the content or the viewport changes
+ * size in a pass, the anchor is kept *if the viewer was at it* before the
+ * pass: new lines at the end of a chat keep the end in view, while a viewer
+ * who scrolled up to read stays where they are. The offset before the pass
+ * is the one scrollSync.ts read for it, so a pass's own writes do not count
+ * as the viewer's scrolling.
+ */
+
+import type { UnitPoint } from './protocol';
+import { scrollTopOf } from './scrollSync';
+
+/** The scroll offset on one axis that puts the anchor fraction of the content at the same fraction of the viewport. */
+export function anchoredOffset(content: number, viewport: number, anchor: number): number {
+  return Math.max(0, Math.round((content - viewport) * anchor));
+}
+
+/** Within a couple of pixels of the anchor: browsers round offsets, and a smooth scroll may stop short. */
+export const ANCHOR_TOLERANCE = 2;
+
+export function isAtAnchor(offset: number, content: number, viewport: number, anchor: number): boolean {
+  return Math.abs(offset - anchoredOffset(content, viewport, anchor)) <= ANCHOR_TOLERANCE;
+}
+
+/** What `keepAnchor` reads and writes on a scrolling element; `HTMLElement` fits. */
+export interface AnchoredScroller {
+  scrollTop: number;
+  scrollLeft: number;
+  scrollHeight: number;
+  scrollWidth: number;
+  clientHeight: number;
+  clientWidth: number;
+}
+
+/** The extents a scroller had after the last pass. */
+interface Extents {
+  content: { width: number; height: number };
+  viewport: { width: number; height: number };
+}
+
+/**
+ * After a pass laid the scroller out: on its first pass the content goes to
+ * the anchor; after that, an axis whose extents changed keeps the anchor
+ * when `offsetBefore` (the viewer's position before the pass) was at it.
+ * Returns the extents to remember for the next pass.
+ */
+export function keepAnchor(
+  el: AnchoredScroller,
+  anchor: UnitPoint,
+  axes: { horizontal: boolean; vertical: boolean },
+  before: Extents | undefined,
+  offsetBefore: { top: number; left: number },
+): Extents {
+  const now: Extents = { content: { width: el.scrollWidth, height: el.scrollHeight }, viewport: { width: el.clientWidth, height: el.clientHeight } };
+  if (axes.vertical) {
+    const changed = !before || before.content.height !== now.content.height || before.viewport.height !== now.viewport.height;
+    const wasAt = !before || isAtAnchor(offsetBefore.top, before.content.height, before.viewport.height, anchor.y);
+    if (changed && wasAt) el.scrollTop = anchoredOffset(now.content.height, now.viewport.height, anchor.y);
+  }
+  if (axes.horizontal) {
+    const changed = !before || before.content.width !== now.content.width || before.viewport.width !== now.viewport.width;
+    const wasAt = !before || isAtAnchor(offsetBefore.left, before.content.width, before.viewport.width, anchor.x);
+    if (changed && wasAt) el.scrollLeft = anchoredOffset(now.content.width, now.viewport.width, anchor.x);
+  }
+  return now;
+}
+
+const anchors = new WeakMap<HTMLElement, UnitPoint>();
+const extents = new WeakMap<HTMLElement, Extents>();
+const anchored = new Set<HTMLElement>();
+
+/** A scroll view's `defaultScrollAnchor` prop, kept for the passes to come (none: the view scrolls as any other). */
+export function applyDefaultScrollAnchor(el: HTMLElement, anchor: UnitPoint | undefined): void {
+  if (anchor && typeof anchor.x === 'number' && typeof anchor.y === 'number') {
+    anchors.set(el, { x: anchor.x, y: anchor.y });
+    anchored.add(el);
+  } else {
+    anchors.delete(el);
+    extents.delete(el);
+    anchored.delete(el);
+  }
+}
+
+/** The axes a `scrollview` element scrolls on, from its `data-sb-axes`. */
+function axesOf(el: HTMLElement): { horizontal: boolean; vertical: boolean } {
+  const axes = el.dataset['sbAxes'] ?? 'vertical';
+  return { horizontal: axes === 'horizontal' || axes === 'both', vertical: axes !== 'horizontal' };
+}
+
+/** Called by the renderer after each pass's frames are applied: every anchored scroll view keeps (or takes) its anchor. */
+export function keepScrollAnchors(): void {
+  for (const el of anchored) {
+    if (!el.isConnected) {
+      anchored.delete(el);
+      extents.delete(el);
+      continue;
+    }
+    const anchor = anchors.get(el);
+    if (!anchor) continue;
+    extents.set(el, keepAnchor(el, anchor, axesOf(el), extents.get(el), { top: scrollTopOf(el), left: el.scrollLeft }));
+  }
+}
+
+/** For tests: forget every anchored scroller. */
+export function resetScrollAnchors(): void {
+  anchored.clear();
+}

package/src/styles.css

@@ -396,6 +396,22 @@ html[data-sb-mode="device"] .device {
   box-shadow: none;
 }
 
+/* `?debug=viewport` (src/deviceMode.ts installViewportReadout): the viewport
+   numbers the keyboard measurement reads, over the app, under the status bar. */
+.sb-viewport-readout {
+  position: fixed;
+  top: calc(var(--sb-inset-top) + 4px);
+  left: 8px;
+  z-index: 1000;
+  margin: 0;
+  padding: 4px 6px;
+  font: 11px/1.3 ui-monospace, Menlo, monospace;
+  color: #fff;
+  background: rgba(0, 0, 0, 0.7);
+  border-radius: 6px;
+  pointer-events: none;
+}
+
 html[data-sb-mode="device"] .device::before,
 html[data-sb-mode="device"] .device::after,
 html[data-sb-mode="device"] .dynamic-island,
@@ -1162,12 +1178,12 @@ svg[data-sb-symbol="progress.indicator"] > line:nth-child(8) { animation-delay:
 
 .sb-navbar-title {
   /* Positioned at the engine's `title` rect (Phase 6), centered and truncated
-     to the room the back button and the toolbar items leave. Not a grid item:
-     an absolutely positioned grid child would be placed against its grid
-     area, not the bar's padding box. */
+     to the room the back button and the toolbar items leave; the rect is the
+     only limit on its width (a wide bar on an iPad gives a long title the
+     room). Not a grid item: an absolutely positioned grid child would be
+     placed against its grid area, not the bar's padding box. */
   position: absolute;
   display: block;
-  max-width: 220px;
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;