refactor(nc-gui): use panel for erd config options

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

@@ -65,7 +65,7 @@ onScopeDispose($destroy)
 
 <template>
   <VueFlow v-model="elements">
-    <Controls class="rounded" position="top-right" :show-fit-view="false" :show-interactive="false" />
+    <Controls class="rounded" position="bottom-left" :show-fit-view="false" :show-interactive="false" />
 
     <template #node-custom="{ data }">
       <ErdTableNode :data="data" :show-skeleton="showSkeleton" />
@@ -104,6 +104,8 @@ onScopeDispose($destroy)
         Zoom in to view columns
       </div>
     </Transition>
+
+    <slot />
   </VueFlow>
 </template>
 

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

@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import { Panel } from '@vue-flow/additional-components'
 import type { LinkToAnotherRecordType, TableType } from 'nocodb-sdk'
 import { UITypes } from 'nocodb-sdk'
 import type { ErdFlowConfig } from './utils'
@@ -104,57 +105,58 @@ watch(
     </GeneralOverlay>
 
     <div class="relative h-full">
-      <LazyErdFlow :tables="tables" :config="config" />
-
-      <div
-        class="absolute top-3.5 right-12 flex-col bg-white shadow-sm px-3 py-0.75 border-1 border-gray-100 rounded z-50 space-y-1 nc-erd-context-menu z-50"
-      >
-        <div class="flex flex-row items-center">
-          <a-checkbox
-            v-model:checked="config.showAllColumns"
-            v-e="['c:erd:showAllColumns']"
-            class="nc-erd-showColumns-checkbox"
-          />
-          <span
-            class="ml-2 select-none nc-erd-showColumns-label"
-            style="font-size: 0.65rem"
-            @dblclick="showAdvancedOptions = true"
-          >
-            {{ $t('activity.erd.showColumns') }}
-          </span>
-        </div>
-        <div class="flex flex-row items-center">
-          <a-checkbox
-            v-model:checked="config.showPkAndFk"
-            v-e="['c:erd:showPkAndFk']"
-            class="nc-erd-showPkAndFk-checkbox"
-            :class="{
-              'nc-erd-showPkAndFk-checkbox-enabled': config.showAllColumns,
-              'nc-erd-showPkAndFk-checkbox-disabled': !config.showAllColumns,
-              'nc-erd-showPkAndFk-checkbox-checked': config.showPkAndFk,
-              'nc-erd-showPkAndFk-checkbox-unchecked': !config.showPkAndFk,
-            }"
-            :disabled="!config.showAllColumns"
-          />
-          <span class="ml-2 select-none text-[0.65rem]">{{ $t('activity.erd.showPkAndFk') }}</span>
-        </div>
-        <div v-if="!table" class="flex flex-row items-center">
-          <a-checkbox v-model:checked="config.showViews" v-e="['c:erd:showViews']" class="nc-erd-showViews-checkbox" />
-          <span class="ml-2 select-none text-[0.65rem]">{{ $t('activity.erd.showSqlViews') }}</span>
-        </div>
-        <div v-if="!table && showAdvancedOptions && includeM2M" class="flex flex-row items-center">
-          <a-checkbox v-model:checked="config.showMMTables" v-e="['c:erd:showMMTables']" class="nc-erd-showMMTables-checkbox" />
-          <span class="ml-2 select-none text-[0.65rem]">{{ $t('activity.erd.showMMTables') }}</span>
-        </div>
-        <div v-if="showAdvancedOptions && includeM2M" class="flex flex-row items-center">
-          <a-checkbox
-            v-model:checked="config.showJunctionTableNames"
-            v-e="['c:erd:showJunctionTableNames']"
-            class="nc-erd-showJunctionTableNames-checkbox"
-          />
-          <span class="ml-2 select-none text-[0.65rem]">{{ $t('activity.erd.showJunctionTableNames') }}</span>
-        </div>
-      </div>
+      <LazyErdFlow :tables="tables" :config="config">
+        <Panel
+          class="flex flex-col bg-white border-1 rounded border-gray-200 z-50 px-3 py-1 nc-erd-context-menu"
+          position="top-right"
+        >
+          <div class="flex items-center gap-2">
+            <a-checkbox
+              v-model:checked="config.showAllColumns"
+              v-e="['c:erd:showAllColumns']"
+              class="nc-erd-showColumns-checkbox"
+            />
+            <span class="select-none nc-erd-showColumns-label" style="font-size: 0.65rem" @dblclick="showAdvancedOptions = true">
+              {{ $t('activity.erd.showColumns') }}
+            </span>
+          </div>
+
+          <div class="flex items-center gap-2">
+            <a-checkbox
+              v-model:checked="config.showPkAndFk"
+              v-e="['c:erd:showPkAndFk']"
+              class="nc-erd-showPkAndFk-checkbox"
+              :class="{
+                'nc-erd-showPkAndFk-checkbox-enabled': config.showAllColumns,
+                'nc-erd-showPkAndFk-checkbox-disabled': !config.showAllColumns,
+                'nc-erd-showPkAndFk-checkbox-checked': config.showPkAndFk,
+                'nc-erd-showPkAndFk-checkbox-unchecked': !config.showPkAndFk,
+              }"
+              :disabled="!config.showAllColumns"
+            />
+            <span class="select-none text-[0.65rem]">{{ $t('activity.erd.showPkAndFk') }}</span>
+          </div>
+
+          <div v-if="!table" class="flex items-center gap-2">
+            <a-checkbox v-model:checked="config.showViews" v-e="['c:erd:showViews']" class="nc-erd-showViews-checkbox" />
+            <span class="select-none text-[0.65rem]">{{ $t('activity.erd.showSqlViews') }}</span>
+          </div>
+
+          <div v-if="!table && showAdvancedOptions && includeM2M" class="flex flex-row items-center">
+            <a-checkbox v-model:checked="config.showMMTables" v-e="['c:erd:showMMTables']" class="nc-erd-showMMTables-checkbox" />
+            <span class="ml-2 select-none text-[0.65rem]">{{ $t('activity.erd.showMMTables') }}</span>
+          </div>
+
+          <div v-if="showAdvancedOptions && includeM2M" class="flex items-center gap-2">
+            <a-checkbox
+              v-model:checked="config.showJunctionTableNames"
+              v-e="['c:erd:showJunctionTableNames']"
+              class="nc-erd-showJunctionTableNames-checkbox"
+            />
+            <span class="select-none text-[0.65rem]">{{ $t('activity.erd.showJunctionTableNames') }}</span>
+          </div>
+        </Panel>
+      </LazyErdFlow>
     </div>
   </div>
 </template>