feat(view): add viewport activity island

view/useViewportActivityIsland.ts

@@ -0,0 +1,31 @@
+import { useEffect, useRef, useState } from "react";
+import type { ViewportState } from "@editor/state";
+import type { BottomControlsAction } from "./BottomControlsIsland";
+
+export type ViewportActivityIslandState = {
+  visible: boolean;
+  action: BottomControlsAction;
+};
+
+export function useViewportActivityIsland(viewport: ViewportState): ViewportActivityIslandState {
+  const [visible, setVisible] = useState(false);
+  const [action, setAction] = useState<BottomControlsAction>("zoom");
+  const previousViewport = useRef({ zoom: viewport.zoom, center: viewport.center });
+
+  useEffect(() => {
+    const previous = previousViewport.current;
+    const zoomChanged = previous.zoom !== viewport.zoom;
+    const centerChanged = previous.center.x !== viewport.center.x || previous.center.y !== viewport.center.y;
+
+    if (!zoomChanged && !centerChanged) return;
+
+    previousViewport.current = { zoom: viewport.zoom, center: viewport.center };
+    setAction(zoomChanged ? "zoom" : "pan");
+    setVisible(true);
+
+    const timeout = window.setTimeout(() => setVisible(false), 1200);
+    return () => window.clearTimeout(timeout);
+  }, [viewport.center, viewport.zoom]);
+
+  return { visible, action };
+}