@theoremjs/studio 0.3.4-next.454.gaa3f549 → 0.3.4-next.458.gbf7b487

package/ui/pan.js

@@ -21,6 +21,7 @@ export function fieldStart(field, scroller) {
         top: box.top - port.top + scroller.scrollTop,
     };
 }
+const clamp = (value, most) => Math.min(Math.max(value, 0), Math.max(most, 0));
 /**
  * Scroll the box around `field` to `at`, once it can: a field that is still opening has no box that
  * scrolls yet, so it tries again each frame until the scroll lands. Returns what stops the tries.
@@ -32,7 +33,10 @@ export function scrollOnce(field, at) {
         tries -= 1;
         const scroller = scrollerOf(field);
         if (scroller && scroller.scrollWidth > scroller.clientWidth) {
-            const { left, top } = at(scroller);
+            const wanted = at(scroller);
+            // A place past either end lands at that end.
+            const left = clamp(wanted.left, scroller.scrollWidth - scroller.clientWidth);
+            const top = clamp(wanted.top, scroller.scrollHeight - scroller.clientHeight);
             scroller.scrollTo({ left, top, behavior: 'instant' });
             if (Math.abs(scroller.scrollLeft - left) < 1 && Math.abs(scroller.scrollTop - top) < 1)
                 return;

package/ui/studio-map.js

@@ -212,14 +212,15 @@ function useLit(layout) {
     return { lit, on, onLines, lights };
 }
 /**
- * A family, and the map with or without detail, each start from the top left, or as near it as
- * shows the node that is open.
+ * A family starts from the top left. The map, opened or turned to or from detail, centres the node
+ * that is open, or starts from the top left when none is.
  */
 function useStart(field, family, open) {
     const latest = useRef(open.place);
     latest.current = open.place;
     // invariant: the sizes are one of two constants, so they change exactly when the detail does.
     const { sizes } = open;
+    // why: Not on a click: the node clicked is already in view, and the map stays where the reader put it.
     useEffect(() => {
         const node = field.current;
         if (!node)
@@ -228,13 +229,12 @@ function useStart(field, family, open) {
         const at = family === undefined ? place : undefined;
         // The field starts past the room around it.
         return scrollOnce(node, (scroller) => {
-            const hidden = at !== undefined &&
-                (at.x + sizes.node.width > scroller.clientWidth ||
-                    at.y + at.height > scroller.clientHeight);
             const { left, top } = fieldStart(node, scroller);
+            if (at === undefined)
+                return { left, top };
             return {
-                left: left + (hidden ? at.x - sizes.padding : 0),
-                top: top + (hidden ? at.y - sizes.padding - sizes.heading : 0),
+                left: left + at.x + sizes.node.width / 2 - scroller.clientWidth / 2,
+                top: top + at.y + at.height / 2 - scroller.clientHeight / 2,
             };
         });
     }, [field, family, sizes]);

package/ui/tree-map.css

@@ -13,3 +13,46 @@
 .studio-tree-map-lines .map-line {
   stroke: color-mix(in srgb, var(--color-border-emphasized) 60%, var(--color-background-surface));
 }
+
+/*
+ * Feeds draw in as the loader's map draws (read-map.css), one after another: the line from the
+ * tree, then the token at its end. Hidden, they leave in the reverse order.
+ * invariant: Transitions, not keyframes, so drawing and leaving both ease, and a turn mid-draw
+ * goes back from where it is.
+ */
+.studio-tree-map {
+  --feed-step: 70ms;
+}
+
+.studio-tree-map-lines [data-feed] {
+  stroke-dasharray: 1;
+  stroke-dashoffset: 0;
+  transition: stroke-dashoffset var(--duration-medium, 240ms) var(--ease-standard, ease-out)
+    calc(var(--feed-i) * var(--feed-step));
+}
+
+.studio-tree-map > [data-feed] {
+  transition: opacity var(--duration-medium, 240ms) var(--ease-standard, ease-out)
+    calc(var(--feed-i) * var(--feed-step) + var(--duration-medium, 240ms));
+}
+
+.studio-tree-map[data-feeds="hidden"] > [data-feed] {
+  opacity: 0;
+  transition-delay: calc((var(--feed-n) - var(--feed-i)) * var(--feed-step));
+}
+
+.studio-tree-map[data-feeds="hidden"] .studio-tree-map-lines [data-feed] {
+  stroke-dashoffset: var(--feed-from);
+  transition-delay: calc(
+    (var(--feed-n) - var(--feed-i)) *
+    var(--feed-step) +
+    var(--duration-medium, 240ms)
+  );
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .studio-tree-map-lines [data-feed],
+  .studio-tree-map > [data-feed] {
+    transition: none;
+  }
+}

package/ui/tree-map.d.ts

@@ -3,5 +3,11 @@ export interface StudioTreeMapProps {
     workspace: StudioWorkspace;
     /** The keys of the agents to draw, in the workspace's order; every agent when unset. */
     agents?: readonly string[] | undefined;
+    /**
+     * Whether what feeds the tree is drawn beside it. Turned on, each feed draws in after the one
+     * before, its line from the tree first, as the loader's map draws; turned off, they leave in the
+     * reverse order. Shown when unset.
+     */
+    feeds?: 'shown' | 'hidden' | undefined;
 }
-export declare function StudioTreeMap({ workspace, agents }: StudioTreeMapProps): import("react").JSX.Element;
+export declare function StudioTreeMap({ workspace, agents, feeds: shown }: StudioTreeMapProps): import("react").JSX.Element;

package/ui/tree-map.js

@@ -142,7 +142,9 @@ function linePath(from, to) {
     const x = from.x + TRUNK;
     return `M ${x} ${from.y + HALF} V ${to.y - TURN} Q ${x} ${to.y} ${x + TURN} ${to.y} H ${to.x - LINE_GAP}`;
 }
-export function StudioTreeMap({ workspace, agents }) {
+/** The order a feed draws in, and which end its line starts from: 1 the path's start, -1 its end. */
+const feedStyle = (index, from = 1) => ({ '--feed-i': index, '--feed-from': from });
+export function StudioTreeMap({ workspace, agents, feeds: shown = 'shown' }) {
     const root = useRef(null);
     const rows = rowsOf(workspace, agents);
     const feeds = feedsOf(workspace, rows);
@@ -166,12 +168,14 @@ export function StudioTreeMap({ workspace, agents }) {
         return above && feed.depth <= above.depth ? [railFor(feed, above)] : [];
     });
     const width = Math.max(GUESS, ...feeds.map(feedRight), ...rails) + PAD;
-    return (_jsxs("div", { ref: root, className: "studio-tree-map", style: { width, height }, children: [_jsxs("svg", { className: "studio-tree-map-lines", width: width, height: height, "aria-hidden": "true", children: [rows.map((row) => row.parent && (_jsx("path", { className: "map-line", d: linePath(row.parent, row) }, rowId(row)))), feeds.flatMap((feed) => feed.into.map((id) => {
+    const order = new Map(feeds.map((feed, index) => [feed.id, index]));
+    return (_jsxs("div", { ref: root, className: "studio-tree-map", "data-feeds": shown, style: { width, height, '--feed-n': feeds.length }, children: [_jsxs("svg", { className: "studio-tree-map-lines", width: width, height: height, "aria-hidden": "true", children: [rows.map((row) => row.parent && (_jsx("path", { className: "map-line", d: linePath(row.parent, row) }, rowId(row)))), feeds.flatMap((feed) => feed.into.map((id) => {
                         const row = byId.get(id);
                         if (!row)
                             return null;
                         const { d } = mapCurve({ x: feedX - LINE_GAP, y: feed.y }, { x: right(row) + LINE_GAP, y: row.y });
-                        return _jsx("path", { className: "map-line", d: d }, `${feed.id}>${id}`);
+                        // The line runs from the feed to the row; it draws from the row.
+                        return (_jsx("path", { className: "map-line", d: d, pathLength: 1, "data-feed": "", style: feedStyle(order.get(feed.id) ?? 0, -1) }, `${feed.id}>${id}`));
                     })), feeds.map((feed) => {
                         const above = feed.under === undefined ? undefined : feedById.get(feed.under);
                         if (above === undefined)
@@ -182,9 +186,10 @@ export function StudioTreeMap({ workspace, agents }) {
                         const d = feed.depth > above.depth
                             ? linePath(from, { x: feedLeft(feed), y: feed.y })
                             : sidePath({ x: feedRight(feed) + LINE_GAP, y: feed.y }, { x: feedRight(above) + LINE_GAP, y: above.y }, railFor(feed, above));
-                        return _jsx("path", { className: "map-line", d: d }, `${feed.id}^`);
+                        // A turn in runs from the feed above; a line round the side runs from this one.
+                        return (_jsx("path", { className: "map-line", d: d, pathLength: 1, "data-feed": "", style: feedStyle(order.get(feed.id) ?? 0, feed.depth > above.depth ? 1 : -1) }, `${feed.id}^`));
                     })] }), rows.map((row) => {
                 const draft = drafts.get(row.agent) ?? createBlankDraft();
                 return (_jsx(MapToken, { id: rowId(row), label: row.node.label, icon: nodeIcon(draft, row.node.ref), x: row.x, y: row.y }, rowId(row)));
-            }), feeds.map((feed) => (_jsx(MapToken, { id: feed.id, label: feed.label, icon: feed.icon, x: feedLeft(feed), y: feed.y }, feed.id)))] }));
+            }), feeds.map((feed) => (_jsx(MapToken, { id: feed.id, label: feed.label, icon: feed.icon, x: feedLeft(feed), y: feed.y, "data-feed": "", style: feedStyle(order.get(feed.id) ?? 0) }, feed.id)))] }));
 }