release: bump version to 0.25.2

frontend/public/earth/js/controls.js

@@ -31,6 +31,8 @@ const HUD_PANEL_IDS = [
   "coordinates-display",
   "earth-stats",
 ];
+const DRAGGABLE_PANEL_SELECTOR = ".hud-panel-draggable";
+const PANEL_LAYOUT_ANIMATION_MS = 420;
 
 function getFloatingGroups() {
   return [
@@ -159,7 +161,7 @@ function setupHudPanelControls() {
 
 function setupDraggableHudPanels() {
   const app = document.getElementById("container");
-  const draggablePanels = document.querySelectorAll(".hud-panel-draggable");
+  const draggablePanels = document.querySelectorAll(DRAGGABLE_PANEL_SELECTOR);
   if (!app || draggablePanels.length === 0) return;
 
   draggablePanels.forEach((panel) => {
@@ -196,6 +198,7 @@ function setupDraggableHudPanels() {
       panel.style.right = "auto";
       panel.style.bottom = "auto";
       panel.style.transform = "none";
+      panel.dataset.dragged = "true";
     };
 
     bindListener(handle, "pointerdown", (event) => {
@@ -212,6 +215,7 @@ function setupDraggableHudPanels() {
       panel.style.right = "auto";
       panel.style.bottom = "auto";
       panel.style.transform = "none";
+      panel.dataset.dragged = "true";
       panel.classList.add("is-dragging");
       document.body.style.userSelect = "none";
       handle.setPointerCapture?.(event.pointerId);
@@ -783,8 +787,74 @@ function updateLayoutUI(container) {
   }
 }
 
-function toggleLayoutExpanded(container) {
-  layoutExpanded = !layoutExpanded;
-  updateLayoutUI(container);
-  return layoutExpanded;
+function resetPanelInlineLayout(panel) {
+  panel.style.left = "";
+  panel.style.top = "";
+  panel.style.right = "";
+  panel.style.bottom = "";
+  panel.style.transform = "";
+  delete panel.dataset.dragged;
+}
+
+function isPanelVisible(panel) {
+  return !panel.classList.contains("hud-panel-hidden");
+}
+
+function animatePanelLayoutTransition(container, expand) {
+  const panels = Array.from(
+    container.querySelectorAll(DRAGGABLE_PANEL_SELECTOR),
+  );
+  if (panels.length === 0) {
+    layoutExpanded = expand;
+    updateLayoutUI(container);
+    return expand;
+  }
+
+  const visiblePanels = panels.filter(isPanelVisible);
+  const firstRects = new Map(
+    visiblePanels.map((panel) => [panel, panel.getBoundingClientRect()]),
+  );
+
+  panels.forEach((panel) => panel.classList.add("is-layout-animating"));
+  layoutExpanded = expand;
+  panels.forEach(resetPanelInlineLayout);
+  updateLayoutUI(container);
+
+  visiblePanels.forEach((panel) => {
+    const firstRect = firstRects.get(panel);
+    if (!firstRect) return;
+
+    const lastRect = panel.getBoundingClientRect();
+    const deltaX = firstRect.left - lastRect.left;
+    const deltaY = firstRect.top - lastRect.top;
+
+    if (Math.abs(deltaX) < 0.5 && Math.abs(deltaY) < 0.5) {
+      return;
+    }
+
+    panel.animate(
+      [
+        {
+          translate: `${deltaX}px ${deltaY}px`,
+        },
+        {
+          translate: "0 0",
+        },
+      ],
+      {
+        duration: PANEL_LAYOUT_ANIMATION_MS,
+        easing: "cubic-bezier(0.22, 1, 0.36, 1)",
+      },
+    );
+  });
+
+  window.setTimeout(() => {
+    panels.forEach((panel) => panel.classList.remove("is-layout-animating"));
+  }, PANEL_LAYOUT_ANIMATION_MS);
+
+  return expand;
+}
+
+function toggleLayoutExpanded(container) {
+  return animatePanelLayoutTransition(container, !layoutExpanded);
 }