Merge pull request #25 from openpatch/copilot/update-node-positioning

Fix node positioning: keyboard shortcuts use mouse cursor, toolbar uses viewport center

Author: mikebarkmin

packages/learningmap/src/EditorCanvas.tsx

@@ -1,4 +1,4 @@
-import { useCallback, memo, useEffect } from "react";
+import { useCallback, memo, useEffect, useRef } from "react";
 import { ReactFlow, Controls, Background, ControlButton, OnSelectionChangeFunc, Node, Edge, useReactFlow } from "@xyflow/react";
 import { Info, Redo, Undo } from "lucide-react";
 import { useEditorStore, useTemporalStore } from "./editorStore";
@@ -44,8 +44,10 @@ export const EditorCanvas = memo(({ defaultLanguage = "en" }: EditorCanvasProps)
   const setDrawerOpen = useEditorStore(state => state.setDrawerOpen);
   const setEdgeDrawerOpen = useEditorStore(state => state.setEdgeDrawerOpen);
   const setHelpOpen = useEditorStore(state => state.setHelpOpen);
+  const setLastMousePosition = useEditorStore(state => state.setLastMousePosition);
 
-  const { setViewport } = useReactFlow();
+  const { setViewport, screenToFlowPosition } = useReactFlow();
+  const canvasRef = useRef<HTMLDivElement>(null);
 
   const language = settings?.language || defaultLanguage;
   const t = getTranslations(language);
@@ -90,6 +92,12 @@ export const EditorCanvas = memo(({ defaultLanguage = "en" }: EditorCanvasProps)
     [setSelectedNodeIds]
   );
 
+  // Track mouse position for keyboard shortcuts
+  const handleMouseMove = useCallback((event: React.MouseEvent) => {
+    const position = screenToFlowPosition({ x: event.clientX, y: event.clientY });
+    setLastMousePosition(position);
+  }, [screenToFlowPosition, setLastMousePosition]);
+
   const defaultEdgeOptions = {
     animated: false,
     style: {
@@ -101,10 +109,12 @@ export const EditorCanvas = memo(({ defaultLanguage = "en" }: EditorCanvasProps)
 
   return (
     <div
+      ref={canvasRef}
       className="editor-canvas"
       style={{
         backgroundColor: settings?.background?.color || "#ffffff",
       }}
+      onMouseMove={handleMouseMove}
     >
       <ReactFlow
         nodes={nodes}

packages/learningmap/src/EditorToolbar.tsx

@@ -5,7 +5,7 @@ import '@szhsin/react-menu/dist/transitions/zoom.css';
 import { Plus, Bug, Settings, Eye, Menu as MenuI, FolderOpen, Download, ImageDown, ExternalLink, Share2, RotateCcw } from "lucide-react";
 import { getTranslations } from "./translations";
 import { useEditorStore } from "./editorStore";
-import { Node } from "@xyflow/react";
+import { Node, useReactFlow } from "@xyflow/react";
 import { NodeData } from "./types";
 import { useJsonStore } from "./useJsonStore";
 import { useFileOperations } from "./useFileOperations";
@@ -17,6 +17,8 @@ interface EditorToolbarProps {
 export const EditorToolbar: React.FC<EditorToolbarProps> = ({
   defaultLanguage = "en",
 }) => {
+  const { screenToFlowPosition } = useReactFlow();
+
   // Get state directly from store
   const settings = useEditorStore(state => state.settings);
   const debugMode = useEditorStore(state => state.debugMode);
@@ -48,7 +50,8 @@ export const EditorToolbar: React.FC<EditorToolbarProps> = ({
   const onSetShowUnlockAfter = (checked: boolean) => setShowUnlockAfter(checked);
 
   const onAddNewNode = (type: "task" | "topic" | "image" | "text") => {
-    const position = { x: Math.random() * 500, y: Math.random() * 500 };
+    // Position new nodes at the center of the current viewport
+    const position = screenToFlowPosition({ x: window.innerWidth / 2, y: window.innerHeight / 2 });
     const newNode: Node<NodeData> = {
       id: `node-${Date.now()}`,
       type,