Merge pull request #4911 from nocodb/feat/erd-fullscreen

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/dashboard/settings/Modal.vue

@@ -170,13 +170,11 @@ watch(
 
       <a-button
         type="text"
-        class="!rounded-md border-none -mt-1.5 -mr-1"
+        class="!rounded-md border-none !px-1.5"
         data-testid="settings-modal-close-button"
         @click="vModel = false"
       >
-        <template #icon>
-          <MdiClose class="cursor-pointer mt-1 nc-modal-close" />
-        </template>
+        <MdiClose class="cursor-pointer nc-modal-close w-4" />
       </a-button>
     </div>
 

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

@@ -0,0 +1,30 @@
+<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 emit = defineEmits(['toggleFullScreen'])
+
+const { config } = toRefs(props)
+
+const toggleFullScreen = () => {
+  emit('toggleFullScreen')
+}
+</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[]) => {
@@ -65,6 +66,10 @@ const populateTables = async () => {
   isLoading = false
 }
 
+const toggleFullScreen = () => {
+  config.isFullScreen = !config.isFullScreen
+}
+
 watch([metas, projectTables], populateTables, {
   flush: 'post',
   immediate: true,
@@ -86,7 +91,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,6 +108,7 @@ watch(
           </div>
         </GeneralOverlay>
 
+        <ErdFullScreenToggle :config="config" @toggle-full-screen="toggleFullScreen" />
         <ErdConfigPanel :config="config" />
         <ErdHistogramPanel v-if="!config.singleTableMode" />
       </LazyErdFlow>

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 {