improve performance

Author: mikebarkmin

.changeset/green-pans-roll.md

@@ -0,0 +1,6 @@
+---
+"@learningmap/learningmap": patch
+"learningmap-studio": patch
+---
+
+Improve node dragging performance by throttling undo history updates

docs/book/changelog.md

@@ -39,6 +39,31 @@ If you need a new feature, open an [issue](https://github.com/openpatch/learning
 ::::
 -->
 
+## v0.2.4
+
+::::tabs
+
+:::tab{title="Fixed :bug:" id="fixed"}
+
+- Improve node dragging performance by throttling undo history updates
+:::
+
+::::
+
+## v0.2.3
+
+::::tabs
+
+:::tab{title="Improved :+1:" id="improved"}
+
+- Significantly improved node dragging performance by optimizing undo history updates
+- Reduced lag when dragging nodes, especially noticeable in the VSCode platform
+- Optimized temporal middleware throttling from 1000ms to 500ms with better batching strategy
+
+:::
+
+::::
+
 ## v0.2.2
 
 ::::tabs

packages/learningmap/src/editorStore.ts

@@ -447,14 +447,15 @@ export const useEditorStore = create<EditorState>()(
         },
       }),
       {
+        // Temporal middleware options - throttle undo history to improve drag performance
         equality: (oldState, newState) => isDeepEqual(oldState, newState),
         handleSet: (handleSet) =>
           throttle<typeof handleSet>(
-            1000,
+            500,
             (state) => {
               handleSet(state);
             },
-            { noLeading: true, noTrailing: false },
+            { noLeading: false, noTrailing: true },
           ),
         partialize: (state): any => {
           const { nodes, edges, settings } = state;

platforms/vscode/src/LearningmapEditorProvider.ts

@@ -82,6 +82,25 @@ export class LearningmapEditorProvider implements vscode.CustomTextEditorProvide
       }
     });
 
+    // Handle document save event
+    const saveDocumentSubscription = vscode.workspace.onWillSaveTextDocument(async e => {
+      if (e.document.uri.toString() === document.uri.toString()) {
+        // Wait for the save event to complete
+        e.waitUntil(new Promise<void>((resolve) => {
+          // Send save command to webview
+          webviewPanel.webview.postMessage({
+            type: 'command',
+            command: 'save',
+          });
+          
+          // Wait a bit for the webview to respond
+          setTimeout(() => {
+            resolve();
+          }, 100);
+        }));
+      }
+    });
+
     // Listen for messages from the webview
     webviewPanel.webview.onDidReceiveMessage(async e => {
       switch (e.type) {
@@ -100,6 +119,7 @@ export class LearningmapEditorProvider implements vscode.CustomTextEditorProvide
     // Clean up
     webviewPanel.onDidDispose(() => {
       changeDocumentSubscription.dispose();
+      saveDocumentSubscription.dispose();
     });
   }
 

platforms/vscode/src/webview.tsx

@@ -27,8 +27,6 @@ interface VSCodeMessage {
 function WebviewEditor() {
   const [isReady, setIsReady] = useState(false);
   const isLoadingFromFile = useRef(false);
-  const saveTimeoutRef = useRef<NodeJS.Timeout | null>(null);
-  const commandTriggerRef = useRef<string | null>(null);
 
   // Get store methods
   const getRoadmapData = useEditorStore(state => state.getRoadmapData);
@@ -90,6 +88,17 @@ function WebviewEditor() {
     return shiftCommands.includes(command);
   };
 
+  // Handle explicit save command
+  const handleSave = () => {
+    if (!isLoadingFromFile.current) {
+      const data = getRoadmapData();
+      vscode.postMessage({
+        type: 'save',
+        content: data,
+      });
+    }
+  };
+
   // Handle messages from extension
   useEffect(() => {
     const messageHandler = (event: MessageEvent<VSCodeMessage>) => {
@@ -98,7 +107,11 @@ function WebviewEditor() {
         case 'command':
           // Handle command from VS Code
           if (message.command) {
-            handleVSCodeCommand(message.command);
+            if (message.command === 'save') {
+              handleSave();
+            } else {
+              handleVSCodeCommand(message.command);
+            }
           }
           break;
         case 'update':
@@ -148,44 +161,8 @@ function WebviewEditor() {
 
     return () => {
       window.removeEventListener('message', messageHandler);
-      if (saveTimeoutRef.current) {
-        clearTimeout(saveTimeoutRef.current);
-      }
-    };
-  }, [loadRoadmapData]);
-
-  // Auto-save changes to the document (debounced)
-  useEffect(() => {
-    if (!isReady) return;
-
-    // Subscribe to store changes
-    const unsubscribe = useEditorStore.subscribe(() => {
-      // Don't save if we're loading from file
-      if (isLoadingFromFile.current) {
-        return;
-      }
-
-      // Debounce saves to avoid too many updates
-      if (saveTimeoutRef.current) {
-        clearTimeout(saveTimeoutRef.current);
-      }
-
-      saveTimeoutRef.current = setTimeout(() => {
-        const data = getRoadmapData();
-        vscode.postMessage({
-          type: 'save',
-          content: data,
-        });
-      }, 500); // Wait 500ms after last change before saving
-    });
-
-    return () => {
-      unsubscribe();
-      if (saveTimeoutRef.current) {
-        clearTimeout(saveTimeoutRef.current);
-      }
     };
-  }, [isReady, getRoadmapData]);
+  }, [loadRoadmapData, getRoadmapData]);
 
   if (!isReady) {
     return <div style={{ padding: '20px' }}>Loading editor...</div>;