refactor(studio): simplify hooks, split contexts, remove dead code (#1416)

* fix(studio): guard Zustand no-op setters and fix useConsoleErrorCapture memory leak - Guard setIsPlaying to skip set() when value unchanged (eliminates 60 notifications/sec during reverse playback) - Guard caption store selectGroup to bail before set() when group missing (prevents empty Zustand notifications) - Guard clearSelection to skip when already empty - Fix useConsoleErrorCapture: restore original console.error, remove error event listener, and delete __hfErrorCapture flag on cleanup * fix(studio): delete dead files and unused exports Remove 7 dead files (audioBeatDetection, keyframeSnapping, timelineInspector, DopesheetStrip, StaggerControls, TimelineLayerPanel, TimelineEditorNotice) and their test companions. Delete unused computeFitToChildrenSize export from propertyPanelHelpers. Fix re-export indirection: useDomEditCommits and studioMotionOps.test now import patch builders directly from manualEditsDomPatches instead of the re-export passthrough in manualEditsDom. * fix(studio): eliminate effect-chain state mirroring for lint findings, hover, and GSAP fetch Move lint findingsByElement sync from App.tsx into useLintModal where the value is produced, removing the mirroring useEffect. Consolidate 4 hover-clearing effects in useDomSelection into 2 (one unconditional on context change, one conditional combining caption mode, selection match, and disconnected element checks). Fold the GSAP retry effect into the fetch effect in useGsapTweenCache, scheduling a single retry via setTimeout when the initial fetch returns 0 animations. Eliminates 3 unnecessary render cycles from effect chains. * fix(studio): memoize renderQueue, toolbar, and canvas rect to prevent re-render cascade - Wrap renderQueue object in useMemo so StudioContext consumers don't re-render on every App render - Memoize timelineToolbar JSX so NLELayout memo isn't defeated - Move canvasRect getBoundingClientRect() from render-time IIFE to a useLayoutEffect-backed ref, eliminating layout thrashing - Track and clear setTimeout handles in refreshPreviewDocumentVersion to prevent stale timer accumulation on rapid calls and unmount * refactor(studio): consolidate GSAP shared primitives — defaults, iframe access, keyframe parsing Extract duplicated PROPERTY_DEFAULTS, IframeGsap interface, iframe accessors (getIframeGsap, queryIframeElement), percentage keyframe parsing, and toAbsoluteTime into a single gsapShared.ts module. Removes ~120 lines of copy-pasted logic across 8 hook files, reducing drift risk between the duplicate implementations. * fix(studio): remove dead store fields, dead file, duplicate helper, and unsafe assertions * refactor(studio): deduplicate selector helpers, rounding utils, percentage computation, and iframe access * fix(studio): split StudioContext into Shell + Playback to prevent cascade re-renders * refactor(studio): decompose useGsapScriptCommits into focused mutation hooks * refactor(studio): decompose useFileManager into focused file operation hooks Extract useFileTree (tree loading, refresh, derived assets/compositions) and useEditorSave (debounced save with history tracking) from the 508-LOC useFileManager. The parent hook composes both and retains file I/O, click-to-source, upload/import, and CRUD — preserving the same public interface so no consumers change. * refactor(studio): decompose useDomEditCommits into focused commit hooks Extract geometry (path offset, box size, rotation) and element lifecycle (delete, z-index reorder) into useDomGeometryCommits and useElementLifecycleOps. Parent keeps persistDomEditOperations as core and composes all sub-hooks — public interface unchanged. * refactor(studio): simplify useAppHotkeys with declarative command table * refactor(studio): simplify useAppHotkeys with declarative command table Replace 15 individual useRef callback refs with a single cbRef object. Extract keydown dispatch into pure dispatchModifierKey/dispatchPlainKey functions. Merge duplicate undo/redo logic into shared applyHistory. Extract cross-origin listener boilerplate into safeAddListener/safeRemoveListener. Hook body: 204 LOC (down from 445). Public API unchanged. * fix(studio): remove unused getDomEditTargetKey import * refactor(studio): decompose useDomEditSession into focused editing hooks Extract GSAP-aware geometry intercepts (move/resize/rotation) and animated property commit into useGsapAwareEditing, and selection wiring, GSAP cache management, preview sync, and selection handlers into useDomEditWiring. The parent remains a pure composition shell. * style(studio): fix formatting in 5 files * fix(studio): trim App.tsx to 598 lines (under 600 limit) --------- Co-authored-by: Miguel Ángel <miguel07alm@protonmail.com>
2026-09-10 22:20:14 +00:00 · 2026-06-13 18:25:11 -04:00
parent 6f677292ae
commit 7bff49ecf0
77 changed files with 3165 additions and 3572 deletions
@@ -0,0 +1,122 @@
+import { useCallback } from "react";
+import type { DomEditSelection } from "../components/editor/domEditingTypes";
+import { roundTo3 } from "../utils/rounding";
+import {
+  assignGsapTargetAutoIdIfNeeded,
+  ensureElementAddressable,
+} from "./gsapScriptCommitHelpers";
+import type { CommitMutation, SafeGsapCommitMutation } from "./gsapScriptCommitTypes";
+
+interface GsapAnimationOpsParams {
+  projectIdRef: React.MutableRefObject<string | null>;
+  activeCompPath: string | null;
+  commitMutation: CommitMutation;
+  commitMutationSafely: SafeGsapCommitMutation;
+  showToast: (message: string, tone?: "error" | "info") => void;
+}
+
+export function useGsapAnimationOps({
+  projectIdRef,
+  activeCompPath,
+  commitMutation,
+  commitMutationSafely,
+  showToast,
+}: GsapAnimationOpsParams) {
+  const updateGsapMeta = useCallback(
+    (
+      selection: DomEditSelection,
+      animationId: string,
+      updates: { duration?: number; ease?: string; position?: number },
+    ) => {
+      commitMutationSafely(
+        selection,
+        { type: "update-meta", animationId, updates },
+        {
+          label: "Edit GSAP animation",
+          coalesceKey: `gsap:${animationId}:meta`,
+        },
+      );
+    },
+    [commitMutationSafely],
+  );
+
+  const deleteGsapAnimation = useCallback(
+    (selection: DomEditSelection, animationId: string) => {
+      commitMutationSafely(
+        selection,
+        { type: "delete", animationId, stripStudioEdits: true },
+        { label: "Delete GSAP animation" },
+      );
+    },
+    [commitMutationSafely],
+  );
+
+  const deleteAllForSelector = useCallback(
+    (selection: DomEditSelection, targetSelector: string) => {
+      void commitMutation(
+        selection,
+        { type: "delete-all-for-selector", targetSelector },
+        { label: "Delete all animations for element" },
+      );
+    },
+    [commitMutation],
+  );
+
+  const addGsapAnimation = useCallback(
+    async (
+      selection: DomEditSelection,
+      method: "to" | "from" | "set" | "fromTo",
+      _currentTime?: number,
+    ) => {
+      const { selector, autoId } = ensureElementAddressable(selection);
+
+      if (autoId) {
+        const pid = projectIdRef.current;
+        const targetPath = selection.sourceFile || activeCompPath || "index.html";
+        if (!pid) return;
+        const assigned = await assignGsapTargetAutoIdIfNeeded({
+          projectId: pid,
+          targetPath,
+          selection,
+          autoId,
+          showToast,
+        });
+        if (!assigned) return;
+      }
+
+      const elStart = Number.parseFloat(selection.dataAttributes?.start ?? "0") || 0;
+      const elDuration = Number.parseFloat(selection.dataAttributes?.duration ?? "1") || 1;
+      const position = roundTo3(elStart);
+      const duration = roundTo3(elDuration);
+      const toDefaults: Record<string, Record<string, number>> = {
+        from: { opacity: 0 },
+        to: { x: 0, y: 0, opacity: 1 },
+        set: { opacity: 1 },
+        fromTo: { x: 0, y: 0, opacity: 1 },
+      };
+
+      await commitMutation(
+        selection,
+        {
+          type: "add",
+          targetSelector: selector,
+          method,
+          position,
+          duration: method === "set" ? undefined : duration,
+          ease: method === "set" ? undefined : "power2.out",
+          properties: toDefaults[method] ?? { opacity: 1 },
+          fromProperties: method === "fromTo" ? { opacity: 0 } : undefined,
+        },
+        { label: `Add GSAP ${method} animation` },
+      );
+    },
+    [activeCompPath, commitMutation, projectIdRef, showToast],
+  );
+
+  return {
+    updateGsapMeta,
+    deleteGsapAnimation,
+    deleteAllForSelector,
+    addGsapAnimation,
+  };
+}