mirror of https://github.com/nocodb/nocodb
You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
66 lines
1.8 KiB
66 lines
1.8 KiB
<script setup lang="ts"> |
|
import { Background, Controls } from '@vue-flow/additional-components' |
|
import { VueFlow, useVueFlow } from '@vue-flow/core' |
|
import type { TableType } from 'nocodb-sdk' |
|
import type { ErdFlowConfig } from './utils' |
|
import { useErdElements } from './utils' |
|
import { onScopeDispose, toRefs, watch } from '#imports' |
|
|
|
interface Props { |
|
tables: TableType[] |
|
config: ErdFlowConfig |
|
} |
|
|
|
const props = defineProps<Props>() |
|
|
|
const { tables, config } = toRefs(props) |
|
|
|
const { $destroy, fitView, onPaneReady } = useVueFlow({ minZoom: 0.1, maxZoom: 2 }) |
|
|
|
const { layout, elements } = useErdElements(tables, config) |
|
|
|
function init() { |
|
layout() |
|
setTimeout(() => { |
|
fitView({ duration: 500 }) |
|
}, 100) |
|
} |
|
|
|
onPaneReady(init) |
|
|
|
watch([() => tables, () => config], init, { deep: true, flush: 'post' }) |
|
|
|
onScopeDispose($destroy) |
|
</script> |
|
|
|
<template> |
|
<VueFlow v-model="elements" elevate-edges-on-select> |
|
<Controls position="top-right" :show-fit-view="false" :show-interactive="false" /> |
|
|
|
<template #node-custom="{ data }"> |
|
<ErdTableNode :data="data" /> |
|
</template> |
|
|
|
<template #edge-custom="edgeProps"> |
|
<ErdRelationEdge v-bind="edgeProps" /> |
|
</template> |
|
|
|
<Background /> |
|
|
|
<div |
|
v-if="!config.singleTableMode" |
|
class="absolute bottom-0 right-0 flex flex-col text-xs bg-white px-2 py-1 border-1 rounded-md border-gray-200 z-50 nc-erd-histogram" |
|
style="font-size: 0.6rem" |
|
> |
|
<div class="flex flex-row items-center space-x-1 border-b-1 pb-1 border-gray-100"> |
|
<MdiTableLarge class="text-primary" /> |
|
<div>{{ $t('objects.table') }}</div> |
|
</div> |
|
|
|
<div class="flex flex-row items-center space-x-1 pt-1"> |
|
<MdiEyeCircleOutline class="text-primary" /> |
|
<div>{{ $t('objects.sqlVIew') }}</div> |
|
</div> |
|
</div> |
|
</VueFlow> |
|
</template>
|
|
|