Added layout changes and features

Author: mrgodhani

src/renderer/src/components/schema-designer/DesignerCanvas.vue

@@ -36,7 +36,7 @@ const defaultEdgeOptions = {
 
 const selectedNodeId = ref<string | null>(null)
 const expandedNodes = ref(new Set<string>())
-const { fitView } = useVueFlow()
+const { fitView, setNodes, setEdges } = useVueFlow()
 
 function toggleColumns(nodeId: string): void {
   const next = new Set(expandedNodes.value)
@@ -253,12 +253,22 @@ const layoutNodes = computed(() => {
 })
 
 watch(
-  () => layoutNodes.value.length,
-  (len) => {
-    if (len > 0) {
+  layoutNodes,
+  (newNodes) => {
+    setNodes(newNodes)
+    if (newNodes.length > 0) {
       setTimeout(() => fitView({ padding: 0.2 }), 50)
     }
-  }
+  },
+  { deep: true }
+)
+
+watch(
+  styledEdges,
+  (newEdges) => {
+    setEdges(newEdges as SchemaEdge[])
+  },
+  { deep: true }
 )
 
 function onNodeClick(event: NodeMouseEvent): void {
@@ -274,8 +284,6 @@ function onPaneClick(): void {
   <div class="h-full w-full relative">
     <VueFlow
       v-if="schema"
-      :nodes="layoutNodes"
-      :edges="styledEdges as any"
       :node-types="nodeTypes as any"
       :default-edge-options="defaultEdgeOptions"
       :fit-view-on-init="true"

src/renderer/src/components/ui/resizable/ResizableHandle.vue

@@ -0,0 +1,30 @@
+<script setup lang="ts">
+import type { SplitterResizeHandleEmits, SplitterResizeHandleProps } from "reka-ui"
+import type { HTMLAttributes } from "vue"
+import { reactiveOmit } from "@vueuse/core"
+import { DragHandleDots2Icon } from '@radix-icons/vue'
+import { SplitterResizeHandle, useForwardPropsEmits } from "reka-ui"
+import { cn } from "@/lib/utils"
+
+const props = defineProps<SplitterResizeHandleProps & { class?: HTMLAttributes["class"], withHandle?: boolean }>()
+const emits = defineEmits<SplitterResizeHandleEmits>()
+
+const delegatedProps = reactiveOmit(props, "class", "withHandle")
+const forwarded = useForwardPropsEmits(delegatedProps, emits)
+</script>
+
+<template>
+  <SplitterResizeHandle
+    data-slot="resizable-handle"
+    v-bind="forwarded"
+    :class="cn('bg-border focus-visible:ring-ring relative flex w-px items-center justify-center after:absolute after:inset-y-0 after:left-1/2 after:w-1 after:-translate-x-1/2 focus-visible:ring-1 focus-visible:ring-offset-1 focus-visible:outline-hidden data-[orientation=vertical]:h-px data-[orientation=vertical]:w-full data-[orientation=vertical]:after:left-0 data-[orientation=vertical]:after:h-1 data-[orientation=vertical]:after:w-full data-[orientation=vertical]:after:-translate-y-1/2 data-[orientation=vertical]:after:translate-x-0 [&[data-orientation=vertical]>div]:rotate-90', props.class)"
+  >
+    <template v-if="props.withHandle">
+      <div class="bg-border z-10 flex h-4 w-3 items-center justify-center rounded-xs border">
+        <slot>
+          <DragHandleDots2Icon class="size-2.5" />
+        </slot>
+      </div>
+    </template>
+  </SplitterResizeHandle>
+</template>

src/renderer/src/components/ui/resizable/ResizablePanel.vue

@@ -0,0 +1,21 @@
+<script setup lang="ts">
+import type { SplitterPanelEmits, SplitterPanelProps } from "reka-ui"
+import { SplitterPanel, useForwardExpose, useForwardPropsEmits } from "reka-ui"
+
+const props = defineProps<SplitterPanelProps>()
+const emits = defineEmits<SplitterPanelEmits>()
+
+const forwarded = useForwardPropsEmits(props, emits)
+const { forwardRef } = useForwardExpose()
+</script>
+
+<template>
+  <SplitterPanel
+    :ref="forwardRef"
+    v-slot="slotProps"
+    data-slot="resizable-panel"
+    v-bind="forwarded"
+  >
+    <slot v-bind="slotProps" />
+  </SplitterPanel>
+</template>

src/renderer/src/components/ui/resizable/ResizablePanelGroup.vue

@@ -0,0 +1,25 @@
+<script setup lang="ts">
+import type { SplitterGroupEmits, SplitterGroupProps } from "reka-ui"
+import type { HTMLAttributes } from "vue"
+import { reactiveOmit } from "@vueuse/core"
+import { SplitterGroup, useForwardPropsEmits } from "reka-ui"
+import { cn } from "@/lib/utils"
+
+const props = defineProps<SplitterGroupProps & { class?: HTMLAttributes["class"] }>()
+const emits = defineEmits<SplitterGroupEmits>()
+
+const delegatedProps = reactiveOmit(props, "class")
+
+const forwarded = useForwardPropsEmits(delegatedProps, emits)
+</script>
+
+<template>
+  <SplitterGroup
+    v-slot="slotProps"
+    data-slot="resizable-panel-group"
+    v-bind="forwarded"
+    :class="cn('flex h-full w-full data-[orientation=vertical]:flex-col', props.class)"
+  >
+    <slot v-bind="slotProps" />
+  </SplitterGroup>
+</template>

src/renderer/src/components/ui/resizable/index.ts

@@ -0,0 +1,3 @@
+export { default as ResizableHandle } from "./ResizableHandle.vue"
+export { default as ResizablePanel } from "./ResizablePanel.vue"
+export { default as ResizablePanelGroup } from "./ResizablePanelGroup.vue"

src/renderer/src/views/SchemaDesignerView.vue

@@ -5,6 +5,11 @@ import SessionStartDialog from '@renderer/components/schema-designer/SessionStar
 import DesignerToolbar from '@renderer/components/schema-designer/DesignerToolbar.vue'
 import DesignerChat from '@renderer/components/schema-designer/DesignerChat.vue'
 import DesignerCanvas from '@renderer/components/schema-designer/DesignerCanvas.vue'
+import {
+  ResizablePanelGroup,
+  ResizablePanel,
+  ResizableHandle
+} from '@renderer/components/ui/resizable'
 import type { DatabaseType } from '../../../shared/types'
 
 const store = useSchemaDesignerStore()
@@ -30,18 +35,19 @@ async function onStart(config: {
   <div class="flex h-full flex-col">
     <template v-if="store.hasSession">
       <DesignerToolbar />
-      <div class="flex flex-1 overflow-hidden">
-        <div class="w-[400px] min-w-[320px] max-w-[500px] border-r border-border flex flex-col">
+      <ResizablePanelGroup direction="horizontal" class="flex-1 overflow-hidden">
+        <ResizablePanel :default-size="30" :min-size="20" :max-size="50" class="flex flex-col">
           <DesignerChat />
-        </div>
-        <div class="flex-1">
+        </ResizablePanel>
+        <ResizableHandle with-handle />
+        <ResizablePanel :default-size="70" :min-size="40" class="flex flex-col">
           <DesignerCanvas
             :schema="store.schema"
             :previous-schema="store.previousSchema"
             :filtered-tables="store.filteredTables"
           />
-        </div>
-      </div>
+        </ResizablePanel>
+      </ResizablePanelGroup>
     </template>
     <SessionStartDialog v-else @start="onStart" />
   </div>