@behindthemusictree/genre-tree-view 6.4.0 → 6.5.1

package/dist/index.cjs

@@ -803,6 +803,18 @@ function computeFitScale(contentWidth, contentHeight, viewportWidth, viewportHei
   );
 }
 
+// src/info-panel-geometry.ts
+function resolveInfoPanelSide() {
+  return "left";
+}
+function resolveInfoPanelObscuredArea(element, viewport, panelWidth) {
+  if (!element || !viewport) return null;
+  if (viewport.clientWidth > 0 && viewport.clientWidth <= INFO_PANEL_SHEET_MAX_WIDTH) {
+    return { side: "bottom", height: viewport.clientHeight * INFO_PANEL_SHEET_PEEK_FRACTION };
+  }
+  return { width: panelWidth, side: resolveInfoPanelSide() };
+}
+
 // src/use-pan-zoom.ts
 function usePanZoom(viewportRef, wheelZoom = "always", stageRef, options = {}) {
   const [panX, setPanX] = (0, import_react.useState)(0);
@@ -813,6 +825,17 @@ function usePanZoom(viewportRef, wheelZoom = "always", stageRef, options = {}) {
   const settleTimerRef = (0, import_react.useRef)(null);
   const stageAnimationRef = (0, import_react.useRef)(null);
   const defaultViewportRef = (0, import_react.useRef)(options.defaultViewport);
+  const operationRef = (0, import_react.useRef)(0);
+  const restoredSelectionRef = (0, import_react.useRef)(void 0);
+  const restoredRevisionRef = (0, import_react.useRef)(void 0);
+  const restoredFrameRef = (0, import_react.useRef)(void 0);
+  const pendingRestoreRef = (0, import_react.useRef)(null);
+  const measuredFrameRef = (0, import_react.useRef)(void 0);
+  const fittedFrameRef = (0, import_react.useRef)(null);
+  const frameElementsRef = (0, import_react.useRef)([]);
+  const retryFrameRef = (0, import_react.useRef)(() => {
+  });
+  const pendingCenterRef = (0, import_react.useRef)(null);
   const centerGuardUntilRef = (0, import_react.useRef)(0);
   const onViewportChangeRef = (0, import_react.useRef)(options.onViewportChange);
   (0, import_react.useEffect)(() => {
@@ -886,6 +909,7 @@ function usePanZoom(viewportRef, wheelZoom = "always", stageRef, options = {}) {
   }, [viewportRef]);
   const zoomAtPoint = (0, import_react.useCallback)(
     (computeNewScale, clientX, clientY) => {
+      operationRef.current += 1;
       const viewport = viewportRef.current;
       if (!viewport) {
         return;
@@ -969,19 +993,26 @@ function usePanZoom(viewportRef, wheelZoom = "always", stageRef, options = {}) {
     const viewport = viewportRef.current;
     if (!viewport) return;
     const observer = new ResizeObserver((entries) => {
-      const entry = entries[0];
-      if (!entry) return;
+      const entry = entries?.[0];
+      if (!entry) {
+        retryFrameRef.current();
+        return;
+      }
       const { width, height } = entry.contentRect;
       const previous = viewportSizeRef.current;
       viewportSizeRef.current = { width, height };
-      if (!previous) return;
+      if (!previous || previous.width <= 0 || previous.height <= 0) {
+        retryFrameRef.current();
+        return;
+      }
       const dx = (width - previous.width) / 2;
       const dy = (height - previous.height) / 2;
       if (dx === 0 && dy === 0) return;
       const view = viewRef.current;
       view.x = clampPanAxis(view.x + dx, view.k, "x");
       view.y = clampPanAxis(view.y + dy, view.k, "y");
-      commitView();
+      commitView(false);
+      retryFrameRef.current();
     });
     observer.observe(viewport);
     return () => observer.disconnect();
@@ -992,6 +1023,7 @@ function usePanZoom(viewportRef, wheelZoom = "always", stageRef, options = {}) {
       return;
     }
     const handleWheel = (event) => {
+      operationRef.current += 1;
       if (event.target.closest(".gtv-info-panel") !== null) {
         return;
       }
@@ -1030,6 +1062,7 @@ function usePanZoom(viewportRef, wheelZoom = "always", stageRef, options = {}) {
   }, [viewportRef, wheelZoom]);
   const zoomByButton = (0, import_react.useCallback)(
     (direction) => {
+      operationRef.current += 1;
       const viewport = viewportRef.current;
       if (!viewport) return;
       const rect = viewport.getBoundingClientRect();
@@ -1044,13 +1077,14 @@ function usePanZoom(viewportRef, wheelZoom = "always", stageRef, options = {}) {
   );
   const fitToFrame = (0, import_react.useCallback)(
     (elements, { silent = false } = {}) => {
+      if (!silent) operationRef.current += 1;
+      frameElementsRef.current = elements;
       const viewport = viewportRef.current;
       const present = elements.filter((el) => Boolean(el));
-      if (!viewport || present.length === 0) return;
+      if (!viewport || present.length === 0) return false;
       const viewportRect = viewport.getBoundingClientRect();
-      if (viewportRect.width <= 0 || viewportRect.height <= 0) return;
-      centerAnimationRef.current = null;
-      if (viewportRect.width <= ZOOM_FIT_PADDING * 2 || viewportRect.height <= ZOOM_FIT_PADDING * 2) return;
+      if (viewportRect.width <= 0 || viewportRect.height <= 0) return false;
+      if (viewportRect.width <= ZOOM_FIT_PADDING * 2 || viewportRect.height <= ZOOM_FIT_PADDING * 2) return false;
       const rects = present.map((el) => el.getBoundingClientRect());
       const contentLeft = Math.min(...rects.map((r) => r.left));
       const contentTop = Math.min(...rects.map((r) => r.top));
@@ -1059,7 +1093,7 @@ function usePanZoom(viewportRef, wheelZoom = "always", stageRef, options = {}) {
       const view = viewRef.current;
       const contentWidth = (contentRight - contentLeft) / view.k;
       const contentHeight = (contentBottom - contentTop) / view.k;
-      if (contentWidth <= 0 || contentHeight <= 0) return;
+      if (contentWidth <= 0 || contentHeight <= 0) return false;
       const contentOriginX = (contentLeft - viewportRect.left - view.x) / view.k;
       const contentOriginY = (contentTop - viewportRect.top - view.y) / view.k;
       contentBoundsRef.current = {
@@ -1078,6 +1112,41 @@ function usePanZoom(viewportRef, wheelZoom = "always", stageRef, options = {}) {
       const newMinScale = Math.min(ZOOM_MIN_SCALE, fitScale);
       minScaleRef.current = newMinScale;
       setMinScale(newMinScale);
+      measuredFrameRef.current = options.frameKey;
+      const pending = pendingRestoreRef.current;
+      if (pending && pending.operation !== operationRef.current) {
+        pendingRestoreRef.current = null;
+        pendingCenterRef.current = null;
+        fittedFrameRef.current = { frame: options.frameKey };
+        return true;
+      }
+      if (pending && pending.frame === options.frameKey && pending.operation === operationRef.current) {
+        pendingRestoreRef.current = null;
+        restoredRevisionRef.current = pending.revision;
+        restoredFrameRef.current = pending.frame;
+        restoredSelectionRef.current = options.selectedNodeId;
+        defaultViewportRef.current = void 0;
+        viewRef.current = viewportToView({ ...pending.viewport, zoom: clampZoomScale(pending.viewport.zoom, newMinScale) }, viewportRect.width, viewportRect.height);
+        fittedFrameRef.current = { frame: options.frameKey };
+        pendingCenterRef.current = null;
+        commitView(false);
+        return true;
+      }
+      if (silent && fittedFrameRef.current && fittedFrameRef.current.frame === options.frameKey) {
+        const center2 = pendingCenterRef.current;
+        pendingCenterRef.current = null;
+        center2?.();
+        return true;
+      }
+      fittedFrameRef.current = { frame: options.frameKey };
+      const center = pendingCenterRef.current;
+      pendingCenterRef.current = null;
+      if (silent && center && !defaultViewportRef.current) {
+        center();
+        return true;
+      }
+      zoomAnimationRef.current = null;
+      centerAnimationRef.current = null;
       const seed = defaultViewportRef.current;
       if (seed) {
         defaultViewportRef.current = void 0;
@@ -1091,14 +1160,15 @@ function usePanZoom(viewportRef, wheelZoom = "always", stageRef, options = {}) {
         view.y = seeded.y;
         centerGuardUntilRef.current = performance.now() + DEFAULT_VIEWPORT_CENTER_GUARD_MS;
         commitView(false);
-        return;
+        return true;
       }
       view.k = fitScale;
       view.x = viewportRect.width / 2 - (contentOriginX + contentWidth / 2) * fitScale;
       view.y = viewportRect.height / 2 - (contentOriginY + contentHeight / 2) * fitScale;
       commitView(!silent);
+      return true;
     },
-    [viewportRef, commitView]
+    [viewportRef, commitView, options.frameKey, options.selectedNodeId]
   );
   const centerAnimationRef = (0, import_react.useRef)(null);
   const centerAnimationFrameIdRef = (0, import_react.useRef)(null);
@@ -1132,7 +1202,19 @@ function usePanZoom(viewportRef, wheelZoom = "always", stageRef, options = {}) {
     stepCenterAnimationRef.current = stepCenterAnimation;
   }, [stepCenterAnimation]);
   const centerOnElement = (0, import_react.useCallback)(
-    (element, targetScale, obscured) => {
+    (element, targetScale, obscured, automatic = false) => {
+      if (automatic && restoredRevisionRef.current !== void 0 && restoredFrameRef.current === options.frameKey && restoredSelectionRef.current === options.selectedNodeId) return;
+      if (!automatic) operationRef.current += 1;
+      const viewportSize = viewportRef.current?.getBoundingClientRect();
+      if (automatic && (measuredFrameRef.current !== options.frameKey || fittedFrameRef.current === null || !viewportSize?.width || !viewportSize.height)) {
+        const operation = operationRef.current;
+        pendingCenterRef.current = () => {
+          if (operation !== operationRef.current) return;
+          const currentElement = element?.id ? viewportRef.current?.querySelector(`#${CSS.escape(element.id)}`) : element;
+          centerLatestRef.current(currentElement, targetScale, obscured ? resolveInfoPanelObscuredArea(currentElement, viewportRef.current, INFO_PANEL_WIDTH) : obscured, true);
+        };
+        return;
+      }
       const viewport = viewportRef.current;
       if (!viewport || !element || performance.now() < centerGuardUntilRef.current) return;
       const viewportRect = viewport.getBoundingClientRect();
@@ -1165,8 +1247,17 @@ function usePanZoom(viewportRef, wheelZoom = "always", stageRef, options = {}) {
         centerAnimationFrameIdRef.current = requestAnimationFrame(() => stepCenterAnimationRef.current());
       }
     },
-    [viewportRef]
+    [viewportRef, options.frameKey, options.selectedNodeId]
   );
+  const centerLatestRef = (0, import_react.useRef)(centerOnElement);
+  (0, import_react.useEffect)(() => {
+    centerLatestRef.current = centerOnElement;
+  }, [centerOnElement]);
+  (0, import_react.useEffect)(() => {
+    retryFrameRef.current = () => {
+      fitToFrame(frameElementsRef.current, { silent: true });
+    };
+  }, [fitToFrame]);
   const lastPointRef = (0, import_react.useRef)({ x: 0, y: 0 });
   const minScaleRef = (0, import_react.useRef)(minScale);
   const suppressedPointersRef = (0, import_react.useRef)(/* @__PURE__ */ new Set());
@@ -1241,6 +1332,7 @@ function usePanZoom(viewportRef, wheelZoom = "always", stageRef, options = {}) {
   }, [handlePointerUp]);
   const handlePointerDown = (0, import_react.useCallback)((event) => {
     if (event.button !== 0) return;
+    operationRef.current += 1;
     const isInteractive = event.target.closest("g.node, foreignObject, .gtv-zoom-controls, .gtv-wheel-chip, .gtv-info-panel") !== null;
     const isPageScrollTouch = wheelZoom === "modifier" && event.pointerType === "touch";
     const pointers = activePointersRef.current;
@@ -1259,6 +1351,42 @@ function usePanZoom(viewportRef, wheelZoom = "always", stageRef, options = {}) {
       window.addEventListener("pointercancel", stablePointerUp);
     }
   }, [stablePointerMove, stablePointerUp, wheelZoom]);
+  const restore = options.viewportRestore;
+  const restoreRevision = restore?.revision;
+  const restoreX = restore?.viewport.x;
+  const restoreY = restore?.viewport.y;
+  const restoreZoom = restore?.viewport.zoom;
+  (0, import_react.useEffect)(() => {
+    if (restoreRevision === restoredRevisionRef.current || restoreRevision === void 0 || restoreX === void 0 || restoreY === void 0 || restoreZoom === void 0) return;
+    if (!Number.isFinite(restoreX) || !Number.isFinite(restoreY) || !Number.isFinite(restoreZoom) || restoreZoom <= 0) return;
+    const viewportElement = viewportRef.current;
+    if (!viewportElement) return;
+    restoredRevisionRef.current = restoreRevision;
+    const operation = ++operationRef.current;
+    zoomAnimationRef.current = null;
+    centerAnimationRef.current = null;
+    if (animationFrameIdRef.current !== null) cancelAnimationFrame(animationFrameIdRef.current);
+    if (centerAnimationFrameIdRef.current !== null) cancelAnimationFrame(centerAnimationFrameIdRef.current);
+    if (frameIdRef.current !== null) cancelAnimationFrame(frameIdRef.current);
+    if (settleTimerRef.current !== null) clearTimeout(settleTimerRef.current);
+    animationFrameIdRef.current = null;
+    centerAnimationFrameIdRef.current = null;
+    frameIdRef.current = null;
+    settleTimerRef.current = null;
+    activePointersRef.current.clear();
+    suppressedPointersRef.current.clear();
+    pinchStartRef.current = null;
+    window.removeEventListener("pointermove", stablePointerMove);
+    window.removeEventListener("pointerup", stablePointerUp);
+    window.removeEventListener("pointercancel", stablePointerUp);
+    pendingRestoreRef.current = {
+      viewport: { x: restoreX, y: restoreY, zoom: restoreZoom },
+      revision: restoreRevision,
+      frame: options.frameKey,
+      operation
+    };
+    if (measuredFrameRef.current === options.frameKey) retryFrameRef.current();
+  }, [restoreRevision, restoreX, restoreY, restoreZoom, options.frameKey, options.selectedNodeId, viewportRef, commitView, stablePointerMove, stablePointerUp]);
   (0, import_react.useEffect)(() => {
     const pointers = activePointersRef.current;
     const suppressed = suppressedPointersRef.current;
@@ -1293,20 +1421,6 @@ function usePanZoom(viewportRef, wheelZoom = "always", stageRef, options = {}) {
 
 // src/use-node-info-panel.ts
 var import_react2 = require("react");
-
-// src/info-panel-geometry.ts
-function resolveInfoPanelSide() {
-  return "left";
-}
-function resolveInfoPanelObscuredArea(element, viewport, panelWidth) {
-  if (!element || !viewport) return null;
-  if (viewport.clientWidth > 0 && viewport.clientWidth <= INFO_PANEL_SHEET_MAX_WIDTH) {
-    return { side: "bottom", height: viewport.clientHeight * INFO_PANEL_SHEET_PEEK_FRACTION };
-  }
-  return { width: panelWidth, side: resolveInfoPanelSide() };
-}
-
-// src/use-node-info-panel.ts
 function useNodeInfoPanel({
   selectedNodeId,
   onSelectedNodeChange
@@ -1315,7 +1429,7 @@ function useNodeInfoPanel({
   const [prevSelectedNodeId, setPrevSelectedNodeId] = (0, import_react2.useState)(selectedNodeId);
   if (selectedNodeId !== prevSelectedNodeId) {
     setPrevSelectedNodeId(selectedNodeId);
-    if (prevSelectedNodeId != null && selectedNodeId == null) setPanel(null);
+    if (prevSelectedNodeId !== void 0) setPanel(null);
   }
   const shownNodeIdRef = (0, import_react2.useRef)(null);
   const onSelectedNodeChangeRef = (0, import_react2.useRef)(onSelectedNodeChange);
@@ -1325,20 +1439,32 @@ function useNodeInfoPanel({
   });
   const showNodeInfo = (0, import_react2.useCallback)(
     (node, element, viewport, { notify = true } = {}) => {
+      if (notify && selectedNodeId !== void 0) {
+        if (node.id !== selectedNodeId) onSelectedNodeChangeRef.current?.(node);
+        return;
+      }
       if (!element || !viewport) return;
       setPanel({ node, side: resolveInfoPanelSide() });
       const changed = node.id !== shownNodeIdRef.current;
       shownNodeIdRef.current = node.id;
       if (changed && notify) onSelectedNodeChangeRef.current?.(node);
     },
-    []
+    [selectedNodeId]
   );
   const closeNodeInfo = (0, import_react2.useCallback)(() => {
+    if (selectedNodeId !== void 0) {
+      if (selectedNodeId !== null) onSelectedNodeChangeRef.current?.(null);
+      return;
+    }
     setPanel(null);
     shownNodeIdRef.current = null;
     onSelectedNodeChangeRef.current?.(null);
-  }, []);
-  return { panel, showNodeInfo, closeNodeInfo };
+  }, [selectedNodeId]);
+  return {
+    panel: selectedNodeId !== void 0 && panel?.node.id !== selectedNodeId ? null : panel,
+    showNodeInfo,
+    closeNodeInfo
+  };
 }
 
 // src/use-tree-index.ts
@@ -1924,6 +2050,7 @@ function GenreTree({
   overlayPanel,
   wheelZoom,
   defaultViewport,
+  viewportRestore,
   onViewportChange,
   controlsOrientation = "vertical",
   showZoomControls = "auto",
@@ -1934,7 +2061,8 @@ function GenreTree({
   const svgRef = (0, import_react8.useRef)(null);
   const viewportRef = (0, import_react8.useRef)(null);
   const stageRef = (0, import_react8.useRef)(null);
-  const panZoom = usePanZoom(viewportRef, wheelZoom, stageRef, { defaultViewport, onViewportChange });
+  const viewportFrame = (0, import_react8.useMemo)(() => JSON.stringify([orientation, nodes.map(({ id, parentId, side }) => [id, parentId, side])]), [nodes, orientation]);
+  const panZoom = usePanZoom(viewportRef, wheelZoom, stageRef, { defaultViewport, viewportRestore, selectedNodeId: selectedNodeIdProp, onViewportChange, frameKey: viewportFrame });
   const { panel, showNodeInfo, closeNodeInfo } = useNodeInfoPanel({ selectedNodeId: selectedNodeIdProp, onSelectedNodeChange });
   const itemCountRange = (0, import_react8.useMemo)(
     () => getItemCountRange(nodes, { itemCountScaleMax, nodeCountForSizing: nodeCountForSizing ?? nodes.length }),
@@ -2073,7 +2201,8 @@ function GenreTree({
     centerOnElementRef.current(
       element,
       ZOOM_FOCUS_SCALE,
-      resolveInfoPanelObscuredArea(element, viewportRef.current, INFO_PANEL_WIDTH)
+      resolveInfoPanelObscuredArea(element, viewportRef.current, INFO_PANEL_WIDTH),
+      true
     );
     showNodeInfoRef.current(targetNode, element, viewportRef.current, { notify: false });
   }, [interactive, selectedNodeIdProp, index, panel]);
@@ -2085,12 +2214,10 @@ function GenreTree({
       }
     };
   }, []);
-  const hasInitialFitRef = (0, import_react8.useRef)(false);
   (0, import_react8.useEffect)(() => {
-    if (hasInitialFitRef.current || !interactive) return;
+    if (!interactive) return;
     const elements = queryTreeContentElements(svgRef.current);
     if (elements.length === 0) return;
-    hasInitialFitRef.current = true;
     panZoom.fitToFrame(elements, { silent: true });
   });
   const svg = /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
@@ -2345,6 +2472,7 @@ function WheelCore({
   overlayPanel,
   wheelZoom,
   defaultViewport,
+  viewportRestore,
   onViewportChange,
   controlsOrientation = "vertical",
   showZoomControls = "auto",
@@ -2386,7 +2514,8 @@ function WheelCore({
   );
   const viewportRef = (0, import_react9.useRef)(null);
   const stageRef = (0, import_react9.useRef)(null);
-  const panZoom = usePanZoom(viewportRef, wheelZoom, stageRef, { defaultViewport, onViewportChange });
+  const viewportFrame = (0, import_react9.useMemo)(() => JSON.stringify(nodes.map(({ id, parentId, side }) => [id, parentId, side])), [nodes]);
+  const panZoom = usePanZoom(viewportRef, wheelZoom, stageRef, { defaultViewport, viewportRestore, selectedNodeId, onViewportChange, frameKey: viewportFrame });
   const { panel, showNodeInfo, closeNodeInfo } = useNodeInfoPanel({ selectedNodeId, onSelectedNodeChange });
   const wheelCircleRef = (0, import_react9.useRef)(null);
   const treeAnchorRef = (0, import_react9.useRef)(null);
@@ -2400,15 +2529,12 @@ function WheelCore({
   (0, import_react9.useEffect)(() => {
     if (effectiveRootId) onRootSelectRef.current?.(effectiveRootId);
   }, [effectiveRootId]);
-  const hasInitialFitRef = (0, import_react9.useRef)(false);
   (0, import_react9.useEffect)(() => {
-    if (hasInitialFitRef.current) return;
     const elements = [
       wheelCircleRef.current,
       ...queryTreeContentElements(treeAnchorRef.current)
     ];
     if (!elements.some(Boolean)) return;
-    hasInitialFitRef.current = true;
     panZoom.fitToFrame(elements, { silent: true });
   });
   const selectedGroup = groups.find((group) => group.root.id === effectiveRootId) ?? null;
@@ -2468,7 +2594,8 @@ function WheelCore({
     panZoom.centerOnElement(
       element,
       ZOOM_FOCUS_SCALE,
-      resolveInfoPanelObscuredArea(element, viewportRef.current, INFO_PANEL_WIDTH)
+      resolveInfoPanelObscuredArea(element, viewportRef.current, INFO_PANEL_WIDTH),
+      true
     );
     showNodeInfo(targetNode, element, viewportRef.current, { notify: false });
   }, [selectedNodeId, effectiveRootId, nodes, panel, showNodeInfo]);
@@ -3461,6 +3588,7 @@ function WheelRadialCore({
   overlayPanel,
   wheelZoom,
   defaultViewport,
+  viewportRestore,
   onViewportChange,
   controlsOrientation = "vertical",
   showZoomControls = "auto",
@@ -3477,7 +3605,8 @@ function WheelRadialCore({
   );
   const viewportRef = (0, import_react10.useRef)(null);
   const stageRef = (0, import_react10.useRef)(null);
-  const panZoom = usePanZoom(viewportRef, wheelZoom, stageRef, { defaultViewport, onViewportChange });
+  const viewportFrame = (0, import_react10.useMemo)(() => JSON.stringify(nodes.map(({ id, parentId, side }) => [id, parentId, side])), [nodes]);
+  const panZoom = usePanZoom(viewportRef, wheelZoom, stageRef, { defaultViewport, viewportRestore, selectedNodeId, onViewportChange, frameKey: viewportFrame });
   const { panel, showNodeInfo, closeNodeInfo } = useNodeInfoPanel({ selectedNodeId, onSelectedNodeChange });
   const centerOnElementRef = (0, import_react10.useRef)(panZoom.centerOnElement);
   (0, import_react10.useEffect)(() => {
@@ -3696,12 +3825,9 @@ function WheelRadialCore({
     wheelItemCountRange,
     panel?.node.id
   ]);
-  const hasInitialFitRef = (0, import_react10.useRef)(false);
   (0, import_react10.useEffect)(() => {
-    if (hasInitialFitRef.current) return;
     const elements = [wheelCircleRef.current, coreSvgRef.current];
     if (!elements.some(Boolean)) return;
-    hasInitialFitRef.current = true;
     panZoom.fitToFrame(elements, { silent: true });
   });
   const handleChipClick = (rootId) => {
@@ -3717,7 +3843,8 @@ function WheelRadialCore({
     panZoom.centerOnElement(
       element,
       ZOOM_FOCUS_SCALE,
-      resolveInfoPanelObscuredArea(element, viewportRef.current, INFO_PANEL_WIDTH)
+      resolveInfoPanelObscuredArea(element, viewportRef.current, INFO_PANEL_WIDTH),
+      true
     );
     showNodeInfo(targetNode, element, viewportRef.current, { notify: false });
   }, [selectedNodeId, index, panel, showNodeInfo]);
@@ -4147,6 +4274,7 @@ function WheelRadialPopCoreCore({
   overlayPanel,
   wheelZoom,
   defaultViewport,
+  viewportRestore,
   onViewportChange,
   controlsOrientation = "vertical",
   showZoomControls = "auto",
@@ -4226,7 +4354,8 @@ function WheelRadialPopCoreCore({
   const viewportRef = (0, import_react13.useRef)(null);
   const stageRef = (0, import_react13.useRef)(null);
   const dotRadiusMemoryRef = (0, import_react13.useRef)(/* @__PURE__ */ new Map());
-  const panZoom = usePanZoom(viewportRef, wheelZoom, stageRef, { defaultViewport, onViewportChange });
+  const viewportFrame = (0, import_react13.useMemo)(() => JSON.stringify([focusNodeId, nodes.map(({ id, parentId, side }) => [id, parentId, side])]), [nodes, focusNodeId]);
+  const panZoom = usePanZoom(viewportRef, wheelZoom, stageRef, { defaultViewport, viewportRestore, selectedNodeId, onViewportChange, frameKey: viewportFrame });
   const { panel: openPanel, showNodeInfo, closeNodeInfo } = useNodeInfoPanel({ selectedNodeId, onSelectedNodeChange });
   const isInFrame = (id) => id === focusNodeId || centerSubtreeNodeIds.has(id) || ringRootById.has(id);
   const panel = openPanel && isInFrame(openPanel.node.id) ? openPanel : null;
@@ -4830,18 +4959,12 @@ function WheelRadialPopCoreCore({
     index,
     regionLabel
   ]);
-  const hasInitialFitRef = (0, import_react13.useRef)(false);
   (0, import_react13.useEffect)(() => {
-    hasInitialFitRef.current = false;
-  }, [focusNodeId]);
-  (0, import_react13.useEffect)(() => {
-    if (hasInitialFitRef.current) return;
     const elements = [
       wheelCircleRef.current,
       ...queryTreeContentElements(popSvgRef.current)
     ];
     if (!elements.some(Boolean)) return;
-    hasInitialFitRef.current = true;
     panZoom.fitToFrame(elements, { silent: true });
   });
   const handleChipClick = (rootId) => {
@@ -4863,7 +4986,8 @@ function WheelRadialPopCoreCore({
     panZoom.centerOnElement(
       element,
       ZOOM_FOCUS_SCALE,
-      resolveInfoPanelObscuredArea(element, viewportRef.current, INFO_PANEL_WIDTH)
+      resolveInfoPanelObscuredArea(element, viewportRef.current, INFO_PANEL_WIDTH),
+      true
     );
     showNodeInfo(targetNode, element, viewportRef.current, { notify: false });
   }, [selectedNodeId, index, openPanel, showNodeInfo, centerSubtreeNodeIds, ringRootById]);
@@ -5361,7 +5485,7 @@ function GenreTreeOutline(props) {
           return;
         }
         const changed = store.get().selectedId !== node.id;
-        store.set({ selectedId: node.id });
+        if (latestProps.current.selectedNodeId === void 0) store.set({ selectedId: node.id });
         if (changed) latestProps.current.onSelectedNodeChange?.(node);
         onNodeClick?.(node, event.nativeEvent);
       },
@@ -5393,7 +5517,7 @@ function GenreTreeOutline(props) {
     }
     const changed = store.get().selectedId !== nodeId;
     if (changed) pendingScrollIdRef.current = nodeId;
-    store.set({ openIds, selectedId: nodeId });
+    store.set({ openIds, ...notify && latestProps.current.selectedNodeId !== void 0 ? {} : { selectedId: nodeId } });
     if (changed && notify) latestProps.current.onSelectedNodeChange?.(index.byId.get(nodeId));
   };
   const selectNodeRef = (0, import_react14.useRef)(selectNode);
@@ -5434,7 +5558,7 @@ function GenreTreeOutline(props) {
         ancestorNodes: index.ancestorsOf(selectedNode.id).map((n) => ({ node: n, ...model.styleOf(n) })),
         side: "left",
         onClose: () => {
-          store.set({ selectedId: null });
+          if (latestProps.current.selectedNodeId === void 0) store.set({ selectedId: null });
           latestProps.current.onSelectedNodeChange?.(null);
         },
         onSelectNode: (id) => selectNodeRef.current(id),