Merge pull request #14 from openpatch/copilot/fix-welcome-message-visibility

Fix welcome message visibility when background or other settings are changed

Author: mikebarkmin

packages/learningmap/src/LearningMapEditor.tsx

@@ -54,7 +54,6 @@ export interface LearningMapEditorProps {
   language?: string;
   onChange?: (data: RoadmapData) => void;
   jsonStore?: string;
-  onLoadExternal?: (id: string) => void;
 }
 
 const getDefaultFilename = () => {
@@ -68,36 +67,33 @@ export function LearningMapEditor({
   language = "en",
   onChange,
   jsonStore = "https://json.openpatch.org",
-  onLoadExternal,
 }: LearningMapEditorProps) {
-  const { screenToFlowPosition, zoomIn, zoomOut, setCenter, fitView, getNodes, getEdges } = useReactFlow();
-  const [roadmapState, setRoadmapState, { undo, redo, canUndo, canRedo, reset, resetInitialState }] = useUndoable<RoadmapData>({
-    settings: {},
-    version: 1,
-  });
+
+  const parsedRoadmap = parseRoadmapData(roadmapData || "");
+  const { screenToFlowPosition, zoomIn, zoomOut, setCenter, fitView } = useReactFlow();
+  const [roadmapState, setRoadmapState, { undo, redo, canUndo, canRedo, reset, resetInitialState }] = useUndoable<RoadmapData>(parsedRoadmap);
 
   const [saved, setSaved] = useState(true);
   const [didUndoRedo, setDidUndoRedo] = useState(false);
   const [previewMode, setPreviewMode] = useState(false);
   const [debugMode, setDebugMode] = useState(false);
-  const [nodes, setNodes, onNodesChange] = useNodesState<NodeData>([]);
-  const [edges, setEdges, onEdgesChange] = useEdgesState<Edge>([]);
-  const [settings, setSettings] = useState<Settings>({ background: { color: "#ffffff" } });
-  const [showGrid, setShowGrid] = useState(true);
+  const [nodes, setNodes, onNodesChange] = useNodesState<NodeData>(parsedRoadmap.nodes);
+  const [edges, setEdges, onEdgesChange] = useEdgesState<Edge>(parsedRoadmap.edges);
+  const [settings, setSettings] = useState<Settings>(parsedRoadmap.settings);
+  const [showGrid, setShowGrid] = useState(false);
   const [clipboard, setClipboard] = useState<{ nodes: Node<NodeData>[]; edges: Edge[] } | null>(null);
 
   // Use language from settings if available, otherwise use prop
   const effectiveLanguage = settings?.language || language;
   const t = getTranslations(effectiveLanguage);
 
   const keyboardShortcuts = [
-    { action: t.shortcuts.save, shortcut: "Ctrl+S" },
     { action: t.shortcuts.undo, shortcut: "Ctrl+Z" },
     { action: t.shortcuts.redo, shortcut: "Ctrl+Y or Ctrl+Shift+Z" },
-    { action: t.shortcuts.addTaskNode, shortcut: "Ctrl+A" },
-    { action: t.shortcuts.addTopicNode, shortcut: "Ctrl+O" },
-    { action: t.shortcuts.addImageNode, shortcut: "Ctrl+I" },
-    { action: t.shortcuts.addTextNode, shortcut: "Ctrl+B" },
+    { action: t.shortcuts.addTaskNode, shortcut: "Ctrl+1" },
+    { action: t.shortcuts.addTopicNode, shortcut: "Ctrl+2" },
+    { action: t.shortcuts.addImageNode, shortcut: "Ctrl+3" },
+    { action: t.shortcuts.addTextNode, shortcut: "Ctrl+4" },
     { action: t.shortcuts.deleteNodeEdge, shortcut: "Delete" },
     { action: t.shortcuts.togglePreviewMode, shortcut: "Ctrl+P" },
     { action: t.shortcuts.toggleDebugMode, shortcut: "Ctrl+D" },
@@ -139,7 +135,6 @@ export function LearningMapEditor({
   const [edgeDrawerOpen, setEdgeDrawerOpen] = useState(false);
 
   useEffect(() => {
-    const parsedRoadmap = parseRoadmapData(roadmapData || "");
     loadRoadmapStateIntoReactFlowState(parsedRoadmap);
     resetInitialState(parsedRoadmap);
   }, [roadmapData])
@@ -414,11 +409,9 @@ export function LearningMapEditor({
   // Auto-save when changes are made
   useEffect(() => {
     if (!saved) {
-      const timeoutId = setTimeout(() => {
+      setTimeout(() => {
         handleSave();
-      }, 1000); // Auto-save after 1 second of inactivity
-
-      return () => clearTimeout(timeoutId);
+      }, 2000);
     }
   }, [saved, handleSave]);
 
@@ -711,22 +704,21 @@ export function LearningMapEditor({
         handleRedo();
       }
       // add task node shortcut
-      if ((e.ctrlKey || e.metaKey) && e.key.toLowerCase() === 'a' && !e.shiftKey) {
+      if ((e.ctrlKey || e.metaKey) && e.key === '1' && !e.shiftKey) {
         e.preventDefault();
         addNewNode("task");
       }
       // add topic node shortcut
-      if ((e.ctrlKey || e.metaKey) && e.key.toLowerCase() === 'o' && !e.shiftKey) {
+      if ((e.ctrlKey || e.metaKey) && e.key === '2' && !e.shiftKey) {
         e.preventDefault();
         addNewNode("topic");
       }
       // add image node shortcut
-      if ((e.ctrlKey || e.metaKey) && e.key.toLowerCase() === 'i' && !e.shiftKey) {
+      if ((e.ctrlKey || e.metaKey) && e.key === '3' && !e.shiftKey) {
         e.preventDefault();
         addNewNode("image");
       }
-      // add text node shortcut - changed to Ctrl+T
-      if ((e.ctrlKey || e.metaKey) && e.key.toLowerCase() === 'b' && !e.shiftKey) {
+      if ((e.ctrlKey || e.metaKey) && e.key === '4' && !e.shiftKey) {
         e.preventDefault();
         addNewNode("text");
       }
@@ -840,14 +832,12 @@ export function LearningMapEditor({
             backgroundColor: settings?.background?.color || "#ffffff",
           }}
         >
-          {nodes.length === 0 && edges.filter(e => !e.id.startsWith("debug-")).length === 0 && (
-            <WelcomeMessage
-              onOpenFile={handleOpen}
-              onAddTopic={() => addNewNode("topic")}
-              onShowHelp={() => setHelpOpen(true)}
-              language={effectiveLanguage}
-            />
-          )}
+          {nodes.length === 0 && edges.length === 0 && <WelcomeMessage
+            onOpenFile={handleOpen}
+            onAddTopic={() => addNewNode("topic")}
+            onShowHelp={() => setHelpOpen(true)}
+            language={effectiveLanguage}
+          />}
           <ReactFlow
             nodes={nodes}
             edges={edges}

packages/learningmap/src/SettingsDrawer.tsx

@@ -3,6 +3,7 @@ import { X, Save } from "lucide-react";
 import { Settings } from "./types";
 import { ColorSelector } from "./ColorSelector";
 import { getTranslations } from "./translations";
+import { useReactFlow } from "@xyflow/react";
 
 interface SettingsDrawerProps {
   isOpen: boolean;
@@ -21,6 +22,7 @@ export const SettingsDrawer: React.FC<SettingsDrawerProps> = ({
 }) => {
   const t = getTranslations(language);
   const [localSettings, setLocalSettings] = useState<Settings>(settings);
+  const { getViewport } = useReactFlow();
 
   useEffect(() => {
     setLocalSettings(settings);

packages/learningmap/src/helper.ts

@@ -71,15 +71,38 @@ export function getEdgeParams(source: Node, target: Node) {
   };
 }
 
+const defaultRoadmapData: RoadmapData = {
+  settings: { title: "New Roadmap", viewport: { x: 0, y: 0, zoom: 1 } },
+  version: 1,
+  nodes: [],
+  edges: [],
+};
+
 export const parseRoadmapData = (
   roadmapData: string | RoadmapData,
 ): RoadmapData => {
+  let userRoadmapData = {};
   if (typeof roadmapData !== "string") {
-    return roadmapData || {};
-  }
-  try {
-    return JSON.parse(roadmapData);
-  } catch (err) {
-    return { settings: { title: "New Roadmap" }, version: 1 };
+    userRoadmapData = roadmapData;
+  } else {
+    try {
+      userRoadmapData = JSON.parse(roadmapData);
+    } catch (err) {}
   }
+
+  // Merge userRoadmapData with defaultRoadmapData to ensure all fields are present
+  return {
+    ...defaultRoadmapData,
+    ...userRoadmapData,
+    settings: {
+      ...defaultRoadmapData.settings,
+      ...(userRoadmapData as any).settings,
+      viewport: {
+        ...defaultRoadmapData.settings.viewport,
+        ...((userRoadmapData as any).settings?.viewport || {}),
+      },
+    },
+    nodes: (userRoadmapData as any).nodes || defaultRoadmapData.nodes,
+    edges: (userRoadmapData as any).edges || defaultRoadmapData.edges,
+  };
 };

packages/learningmap/src/types.ts

@@ -50,6 +50,11 @@ export interface Settings {
   title?: string;
   background?: BackgroundConfig;
   language?: string;
+  viewport?: {
+    x: number;
+    y: number;
+    zoom: number;
+  };
 }
 
 export interface EdgeConfig {
@@ -60,8 +65,8 @@ export interface EdgeConfig {
 }
 
 export interface RoadmapData {
-  nodes?: Node<NodeData>[];
-  edges?: Edge[];
+  nodes: Node<NodeData>[];
+  edges: Edge[];
   settings: Settings;
   version: number;
 }