From cc309a48bafd065feb35aab658775890a48f4267 Mon Sep 17 00:00:00 2001
From: Muhammed Mustafa <mustafa@nocodb.com>
Date: Mon, 23 Jan 2023 14:31:41 +0530
Subject: [PATCH] feat(nc-gui): Added fullscreen support to ERD

---
 .../dashboard/settings/DataSources.vue        |  2 +-
 .../components/dashboard/settings/Erd.vue     |  2 +-
 .../components/erd/FullScreenToggle.vue       | 28 +++++++++++++++++++
 packages/nc-gui/components/erd/View.vue       | 14 ++++++++--
 packages/nc-gui/components/erd/utils.ts       |  1 +
 5 files changed, 43 insertions(+), 4 deletions(-)
 create mode 100644 packages/nc-gui/components/erd/FullScreenToggle.vue

diff --git a/packages/nc-gui/components/dashboard/settings/DataSources.vue b/packages/nc-gui/components/dashboard/settings/DataSources.vue
index 8416dc186a..5bb4f89287 100644
--- a/packages/nc-gui/components/dashboard/settings/DataSources.vue
+++ b/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">
diff --git a/packages/nc-gui/components/dashboard/settings/Erd.vue b/packages/nc-gui/components/dashboard/settings/Erd.vue
index 73025e8eef..0bdc501409 100644
--- a/packages/nc-gui/components/dashboard/settings/Erd.vue
+++ b/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>
diff --git a/packages/nc-gui/components/erd/FullScreenToggle.vue b/packages/nc-gui/components/erd/FullScreenToggle.vue
new file mode 100644
index 0000000000..4162801e33
--- /dev/null
+++ b/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>
diff --git a/packages/nc-gui/components/erd/View.vue b/packages/nc-gui/components/erd/View.vue
index 6d5be40fdb..f6dc6cd06e 100644
--- a/packages/nc-gui/components/erd/View.vue
+++ b/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>
diff --git a/packages/nc-gui/components/erd/utils.ts b/packages/nc-gui/components/erd/utils.ts
index 0b5ad04703..a7cdb2ab2b 100644
--- a/packages/nc-gui/components/erd/utils.ts
+++ b/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 {