feat(nc-gui): Added fullscreen support to ERD

packages/nc-gui/components/dashboard/settings/DataSources.vue

@@ -381,7 +381,7 @@ watch(
       <div v-else-if="vState === DataSourcesSubTab.UIAcl" class="max-h-600px overflow-y-auto">
         <UIAcl :base-id="activeBaseId" />
       </div>
-      <div v-else-if="vState === DataSourcesSubTab.ERD" class="max-h-600px overflow-y-auto">
+      <div v-else-if="vState === DataSourcesSubTab.ERD" class="h-full overflow-y-auto">
         <Erd :base-id="activeBaseId" />
       </div>
       <div v-else-if="vState === DataSourcesSubTab.Edit" class="max-h-600px overflow-y-auto">

packages/nc-gui/components/dashboard/settings/Erd.vue

@@ -5,7 +5,7 @@ const props = defineProps<{
 </script>
 
 <template>
-  <div class="w-full h-full !p-0 h-70vh">
+  <div class="w-full h-full !p-0">
     <ErdView :base-id="props.baseId" />
   </div>
 </template>

packages/nc-gui/components/erd/FullScreenToggle.vue

@@ -0,0 +1,28 @@
+<script lang="ts" setup>
+import { Panel, PanelPosition } from '@vue-flow/additional-components'
+import type { ERDConfig } from './utils'
+import MiFullscreen from '~icons/material-symbols/fullscreen'
+import MiFullscreenExit from '~icons/material-symbols/fullscreen-exit'
+
+const props = defineProps<{
+  config: ERDConfig
+}>()
+
+const config = useVModel(props, 'config')
+
+const toggleFullScreen = () => {
+  config.value.isFullScreen = !config.value.isFullScreen
+}
+</script>
+
+<template>
+  <Panel
+    class="text-xs bg-white border-1 rounded-md p-0.5 border-gray-50 z-50 nc-erd-histogram cursor-pointer hover:bg-gray-100"
+    :position="PanelPosition.TopLeft"
+  >
+    <div class="flex">
+      <MiFullscreenExit v-if="config.isFullScreen" class="h-5 w-5" @click="() => toggleFullScreen()" />
+      <MiFullscreen v-else class="h-5 w-5" @click="() => toggleFullScreen()" />
+    </div>
+  </Panel>
+</template>

packages/nc-gui/components/erd/View.vue

@@ -21,6 +21,7 @@ const config = reactive<ERDConfig>({
   singleTableMode: !!props.table,
   showMMTables: false,
   showJunctionTableNames: false,
+  isFullScreen: false,
 })
 
 const loadMetaOfTablesNotInMetas = async (localTables: TableType[]) => {
@@ -86,7 +87,15 @@ watch(
 </script>
 
 <template>
-  <div class="w-full" style="height: inherit" :class="[`nc-erd-vue-flow${config.singleTableMode ? '-single-table' : ''}`]">
+  <div
+    class="w-full bg-white"
+    :class="{
+      'z-100 h-screen w-screen fixed top-0 left-0 right-0 bottom-0': config.isFullScreen,
+      'nc-erd-vue-flow-single-table': config.singleTableMode,
+      'nc-erd-vue-flow': !config.singleTableMode,
+    }"
+    :style="!config.isFullScreen ? 'height: inherit' : ''"
+  >
     <div class="relative h-full">
       <LazyErdFlow :tables="filteredTables" :config="config">
         <GeneralOverlay v-model="isLoading" inline class="bg-gray-300/50">
@@ -95,7 +104,8 @@ watch(
           </div>
         </GeneralOverlay>
 
-        <ErdConfigPanel :config="config" />
+        <ErdFullScreenToggle :config="config" />
+        <ErdConfigPanel />
         <ErdHistogramPanel v-if="!config.singleTableMode" />
       </LazyErdFlow>
     </div>

packages/nc-gui/components/erd/utils.ts

@@ -15,6 +15,7 @@ export interface ERDConfig {
   singleTableMode: boolean
   showJunctionTableNames: boolean
   showMMTables: boolean
+  isFullScreen: boolean
 }
 
 export interface NodeData {