@theoremjs/studio 0.3.4-next.454.gaa3f549 → 0.3.4-next.456.gff60088

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]);