Rc-0.0.5 v2

package.json

@@ -2,7 +2,7 @@
   "name": "thothblueprint",
   "description": "Free visual database design tool with drag-and-move editing, multi-format export, and migration generation for popular frameworks.",
   "private": true,
-  "version": "0.0.4",
+  "version": "0.0.5",
   "type": "module",
   "scripts": {
     "dev": "vite",

src/components/DiagramEditor.tsx

@@ -31,6 +31,7 @@ import { useTheme } from "next-themes";
 import {
   forwardRef,
   useCallback,
+  useEffect,
   useImperativeHandle,
   useMemo,
   useRef,
@@ -150,6 +151,34 @@ const DiagramEditor = forwardRef(
     const edgeTypes = useMemo(() => ({ custom: CustomEdge }), []);
     const visibleNodes = useMemo(() => nodes.filter((n) => !n.data.isDeleted), [nodes]);
 
+    useEffect(() => {
+      if (selectedNodeId && rfInstanceRef.current && settings.focusTableDuringSelection) {
+        const node = rfInstanceRef.current.getNode(selectedNodeId);
+        if (node) {
+          rfInstanceRef.current.fitView({
+            nodes: [{ id: selectedNodeId }],
+            duration: 300, // smooth transition
+            maxZoom: 1.2,   // prevent zooming in too close
+          });
+        }
+      }
+    }, [selectedNodeId, settings.focusTableDuringSelection]);
+
+    useEffect(() => {
+      if (selectedEdgeId && rfInstanceRef.current && settings.focusRelDuringSelection) {
+        const edge = rfInstanceRef.current.getEdge(selectedEdgeId);
+        if (edge) {
+          const sourceNodeId = edge?.source || '';
+          const targetNodeId = edge?.target || '';
+          rfInstanceRef.current.fitView({
+            nodes: [{ id: sourceNodeId }, {id: targetNodeId}],
+            duration: 300, // smooth transition
+            maxZoom: 1.2,   // prevent zooming in too close
+          });
+        }
+      }
+    }, [selectedEdgeId, settings.focusRelDuringSelection]);
+
     const onSelectionChange = useCallback(({ nodes, edges }: OnSelectionChangeParams) => {
       if (nodes.length === 1 && edges.length === 0 && nodes[0]) {
         if (nodes[0].type === 'table') {

src/components/EditorMenubar.tsx

@@ -167,9 +167,18 @@ export default function EditorMenubar({
           <MenubarItem onClick={() => onSetSidebarState("hidden")}>
             Hide Sidebar
           </MenubarItem>
-          <MenubarItem onClick={onViewShortcuts}>
-            View Shortcuts
-          </MenubarItem>
+          <MenubarCheckboxItem
+            checked={settings.focusTableDuringSelection}
+            onCheckedChange={(checked) => updateSettings({ focusTableDuringSelection: checked })}
+          >
+            Focus During Table Selection
+          </MenubarCheckboxItem>
+          <MenubarCheckboxItem
+            checked={settings.focusRelDuringSelection}
+            onCheckedChange={(checked) => updateSettings({ focusRelDuringSelection: checked })}
+          >
+            Focus During Relationship Selection
+          </MenubarCheckboxItem>
           <MenubarSeparator />
           <MenubarCheckboxItem
             checked={settings.rememberLastPosition}

src/components/EditorSidebar.tsx

@@ -111,15 +111,15 @@ export default function EditorSidebar({
       {/* Tab Navigation */}
       <div className="flex-shrink-0 px-4 my-4">
         <div className="flex items-center gap-2">
-          <div className="inline-flex h-10 items-center justify-center rounded-md bg-muted p-1 text-muted-foreground flex-grow grid-cols-2">
+          <div className="flex h-10 items-center rounded-md bg-muted p-1 text-muted-foreground flex-grow">
             <Button
               variant="ghost"
               size="sm"
               onClick={() => handleTabChange("tables")}
               className={cn(
-                "relative h-8 rounded-sm px-3 py-1.5 text-sm font-medium transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50",
+                "flex-1 relative h-8 rounded-sm px-3 py-1.5 text-sm font-medium transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50",
                 currentTab === "tables"
-                  ? "bg-background text-foreground shadow-sm"
+                  ? "bg-background text-foreground shadow-sm hover:bg-background"
                   : "hover:bg-muted-foreground/10"
               )}
             >
@@ -133,9 +133,9 @@ export default function EditorSidebar({
               size="sm"
               onClick={() => handleTabChange("relationships")}
               className={cn(
-                "relative h-8 rounded-sm px-3 py-1.5 text-sm font-medium transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50",
+                "flex-1 relative h-8 rounded-sm px-3 py-1.5 text-sm font-medium transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50",
                 currentTab === "relationships"
-                  ? "bg-background text-foreground shadow-sm"
+                  ? "bg-background text-foreground shadow-sm hover:bg-background"
                   : "hover:bg-muted-foreground/10"
               )}
             >

src/components/RelationshipsTab.tsx

@@ -1,8 +1,9 @@
 import { DbRelationship } from "@/lib/constants";
 import { AppEdge, type AppNode } from "@/lib/types";
-import { useStore } from "@/store/store";
+import { type StoreState, useStore } from "@/store/store";
 import { ArrowLeft, GitCommitHorizontal, X } from "lucide-react";
 import { useEffect, useMemo, useState } from "react";
+import { useShallow } from "zustand/react/shallow";
 import EdgeInspectorPanel from "./EdgeInspectorPanel";
 import { Button } from "./ui/button";
 import { Input } from "./ui/input";
@@ -18,6 +19,14 @@ export default function RelationshipsTab({ nodes, edges }: RelationshipsTabProps
     const [inspectingEdgeId, setInspectingEdgeId] = useState<string | null>(selectedEdgeId);
     const [relationshipFilter, setRelationshipFilter] = useState<string>("");
 
+    const { setSelectedEdgeId, setSelectedNodeId } = useStore(
+        useShallow((state: StoreState) => ({
+            setSelectedEdgeId: state.setSelectedEdgeId,
+            setSelectedNodeId: state.setSelectedNodeId,
+
+        }))
+    );
+
     useEffect(() => {
         if (selectedEdgeId && edges.some((edge) => edge.id === selectedEdgeId)) {
             setInspectingEdgeId(selectedEdgeId)
@@ -45,6 +54,12 @@ export default function RelationshipsTab({ nodes, edges }: RelationshipsTabProps
 
     const inspectingEdge = edges.find((e) => e.id === inspectingEdgeId);
 
+    const handleRelSelect = (id:string) => {
+        setInspectingEdgeId(id);
+        setSelectedEdgeId(id);
+        setSelectedNodeId(null);
+    }
+
     if (inspectingEdge) {
         return (
             <div className="flex flex-col h-full p-4">
@@ -104,7 +119,7 @@ export default function RelationshipsTab({ nodes, edges }: RelationshipsTabProps
                                         key={edge.id}
                                         variant="ghost"
                                         className="w-full justify-start h-auto py-2"
-                                        onClick={() => setInspectingEdgeId(edge.id)}
+                                        onClick={() => handleRelSelect(edge.id)}
                                     >
                                         <GitCommitHorizontal className="h-4 w-4 mr-2 flex-shrink-0" />
                                         <div className="text-left text-sm">

src/components/TableNode.tsx

@@ -15,6 +15,7 @@ import {
 } from "@/components/ui/tooltip";
 import { colors } from "@/lib/constants";
 import { type TableNodeData } from "@/lib/types";
+import { useStore } from "@/store/store";
 import {
   Handle,
   Position,
@@ -43,6 +44,8 @@ function TableNode({
 }: TableNodeProps) {
   const updateNodeInternals = useUpdateNodeInternals();
   const prevColumnsRef = useRef(data.columns);
+  const selectedNodeId = useStore((state) => state.selectedNodeId);
+  const isSelected = selected || selectedNodeId === id;
 
   useEffect(() => {
     if (prevColumnsRef.current !== data.columns) {
@@ -52,16 +55,16 @@ function TableNode({
   }, [id, data.columns, updateNodeInternals]);
 
   const cardStyle = {
-    border: `1px solid ${selected ? data.color || colors.DEFAULT_TABLE_COLOR : "hsl(var(--border))"
+    border: `1px solid ${isSelected ? data.color || colors.DEFAULT_TABLE_COLOR : "hsl(var(--border))"
       }`,
-    boxShadow: selected
+    boxShadow: isSelected
       ? `0 0 8px ${data.color || colors.DEFAULT_TABLE_COLOR}40`
       : "var(--tw-shadow, 0 0 #0000)",
     width: 288,
   };
 
   const handleStyle = {
-    opacity: selected ? 1 : 0,
+    opacity: isSelected ? 1 : 0,
     transition: "opacity 0.15s ease-in-out",
   };