mirror of https://github.com/nocodb/nocodb
Muhammed Mustafa
2 years ago
8 changed files with 693 additions and 1 deletions
@ -0,0 +1,140 @@
|
||||
<script setup lang="ts"> |
||||
import { useI18n } from 'vue-i18n' |
||||
import type { Edge, Node } from '@braks/vue-flow' |
||||
import { Background, MarkerType, VueFlow, isNode, useVueFlow } from '@braks/vue-flow' |
||||
import { ref } from 'vue' |
||||
import { ColumnType, UITypes } from 'nocodb-sdk' |
||||
import dagre from 'dagre' |
||||
import TableNode from './erd/TableNode.vue' |
||||
import RelationEdge from './erd/RelationEdge.vue' |
||||
import { useNuxtApp, useProject } from '#imports' |
||||
|
||||
const dagreGraph = new dagre.graphlib.Graph() |
||||
dagreGraph.setDefaultEdgeLabel(() => ({})) |
||||
|
||||
const { updateNodeInternals } = useVueFlow() |
||||
|
||||
const { $api } = useNuxtApp() |
||||
const { project, tables } = useProject() |
||||
const { t } = useI18n() |
||||
|
||||
const { metas, getMeta, metasWithId } = useMetas() |
||||
|
||||
const nodes = ref<Node[]>([]) |
||||
const edges = ref<Edge[]>([]) |
||||
|
||||
let isLoading = $ref(true) |
||||
|
||||
const loadMetasOfTablesNotInMetas = async () => { |
||||
await Promise.all( |
||||
tables.value |
||||
.filter((table) => !metas.value[table.id!]) |
||||
.map(async (table) => { |
||||
await getMeta(table.id!) |
||||
}), |
||||
) |
||||
} |
||||
|
||||
const populateTables = () => { |
||||
Object.keys(metasWithId.value).forEach((tableId) => { |
||||
nodes.value.push({ |
||||
id: tableId, |
||||
data: metasWithId.value[tableId], |
||||
type: 'custom', |
||||
}) |
||||
dagreGraph.setNode(tableId, { width: 250, height: 30 * metasWithId.value[tableId].columns.length }) |
||||
}) |
||||
|
||||
dagreGraph.setGraph({ rankdir: 'LR' }) |
||||
} |
||||
|
||||
const populateRelations = () => { |
||||
const ltarColumns = Object.keys(metasWithId.value).reduce((acc, tableId) => { |
||||
const table = metasWithId.value[tableId] |
||||
const ltarColumns = table.columns.filter((column) => column.uidt === UITypes.LinkToAnotherRecord) |
||||
|
||||
ltarColumns.forEach((column) => { |
||||
if (column.colOptions.type === 'hm') { |
||||
acc.push(column) |
||||
} |
||||
|
||||
if (column.colOptions.type === 'mm') { |
||||
// Remove duplicate relations |
||||
const relatedColumnId = column.colOptions.fk_child_column_id |
||||
if (!acc.find((col) => col.id === relatedColumnId)) { |
||||
acc.push(column) |
||||
} |
||||
} |
||||
}) |
||||
|
||||
return acc |
||||
}, []) |
||||
|
||||
edges.value = ltarColumns.map((column: any) => { |
||||
const source = column.fk_model_id |
||||
const target = column.colOptions.fk_related_model_id |
||||
|
||||
dagreGraph.setEdge(source, target) |
||||
|
||||
return { |
||||
id: `e${source}-${target}`, |
||||
source: `${source}`, |
||||
target: `${target}`, |
||||
sourceHandle: `s-${column.id}-${source}`, |
||||
targetHandle: `d-${column.id}-${target}`, |
||||
type: 'custom', |
||||
data: { column, table: metasWithId.value[source], relatedTable: metasWithId.value[target] }, |
||||
markerEnd: MarkerType.ArrowClosed, |
||||
} |
||||
}) |
||||
|
||||
// console.log('json:elements', JSON.parse(JSON.stringify(elements))) |
||||
// console.log('elements', elements) |
||||
} |
||||
|
||||
const layoutNodes = () => { |
||||
dagre.layout(dagreGraph) |
||||
|
||||
nodes.value = nodes.value.map((node) => { |
||||
const nodeWithPosition = dagreGraph.node(node.id) |
||||
if (!nodeWithPosition) return node |
||||
|
||||
return { ...node, position: { x: nodeWithPosition.x, y: nodeWithPosition.y } } |
||||
}) |
||||
} |
||||
|
||||
const populateElements = () => { |
||||
populateTables() |
||||
} |
||||
|
||||
onMounted(async () => { |
||||
if (isLoading) { |
||||
await loadMetasOfTablesNotInMetas() |
||||
|
||||
populateElements() |
||||
populateRelations() |
||||
layoutNodes() |
||||
|
||||
console.log('nodes', nodes.value) |
||||
console.log('edges', edges.value) |
||||
|
||||
updateNodeInternals(nodes.value as any) |
||||
isLoading = false |
||||
} |
||||
}) |
||||
</script> |
||||
|
||||
<template> |
||||
<div style="height: 650px"> |
||||
<div v-if="isLoading"></div> |
||||
<VueFlow v-else :nodes="nodes" :edges="edges" :fit-view-on-init="true" :default-edge-options="{ type: 'step' }"> |
||||
<template #node-custom="props"> |
||||
<TableNode :data="props.data" /> |
||||
</template> |
||||
<template #edge-custom="props"> |
||||
<RelationEdge v-bind="props" /> |
||||
</template> |
||||
<Background /> |
||||
</VueFlow> |
||||
</div> |
||||
</template> |
||||
@ -0,0 +1,120 @@
|
||||
<script setup> |
||||
import { EdgeText, getBezierCenter, getBezierPath, getEdgeCenter } from '@braks/vue-flow' |
||||
import { computed } from 'vue' |
||||
|
||||
const props = defineProps({ |
||||
id: { |
||||
type: String, |
||||
required: true, |
||||
}, |
||||
sourceX: { |
||||
type: Number, |
||||
required: true, |
||||
}, |
||||
sourceY: { |
||||
type: Number, |
||||
required: true, |
||||
}, |
||||
targetX: { |
||||
type: Number, |
||||
required: true, |
||||
}, |
||||
targetY: { |
||||
type: Number, |
||||
required: true, |
||||
}, |
||||
sourcePosition: { |
||||
type: String, |
||||
required: true, |
||||
}, |
||||
targetPosition: { |
||||
type: String, |
||||
required: true, |
||||
}, |
||||
data: { |
||||
type: Object, |
||||
required: false, |
||||
}, |
||||
markerEnd: { |
||||
type: String, |
||||
required: false, |
||||
}, |
||||
style: { |
||||
type: Object, |
||||
required: false, |
||||
}, |
||||
sourceHandleId: { |
||||
type: String, |
||||
required: false, |
||||
}, |
||||
targetHandleId: { |
||||
type: String, |
||||
required: false, |
||||
}, |
||||
}) |
||||
|
||||
const isHovered = ref(false) |
||||
const { column, relatedTable, table } = props.data |
||||
|
||||
const edgePath = computed(() => |
||||
getBezierPath({ |
||||
sourceX: props.sourceX, |
||||
sourceY: props.sourceY, |
||||
sourcePosition: props.sourcePosition, |
||||
targetX: props.targetX, |
||||
targetY: props.targetY, |
||||
targetPosition: props.targetPosition, |
||||
}), |
||||
) |
||||
|
||||
const center = computed(() => |
||||
getEdgeCenter({ |
||||
sourceX: props.sourceX, |
||||
sourceY: props.sourceY, |
||||
sourcePosition: props.sourcePosition, |
||||
targetX: props.targetX, |
||||
targetY: props.targetY, |
||||
targetPosition: props.targetPosition, |
||||
}), |
||||
) |
||||
|
||||
watch( |
||||
() => isHovered.value, |
||||
(val) => { |
||||
console.log(val) |
||||
}, |
||||
) |
||||
</script> |
||||
|
||||
<script> |
||||
export default { |
||||
inheritAttrs: false, |
||||
} |
||||
</script> |
||||
|
||||
<template> |
||||
<circle :cx="sourceX" :cy="sourceY" fill="#fff" :r="5" stroke="#6F3381" :stroke-width="1.5" /> |
||||
<path |
||||
:id="id" |
||||
:style="style" |
||||
class="stroke-gray-500 p-4 hover:stroke-green-500 hover:cursor-pointer" |
||||
:class="{ 'stroke-green-500': isHovered }" |
||||
:stroke-width="2.5" |
||||
fill="none" |
||||
:d="edgePath" |
||||
:marker-end="markerEnd" |
||||
onmouseover="isHovered = true" |
||||
onmouseout="isHovered = false" |
||||
/> |
||||
<EdgeText |
||||
:x="center[0]" |
||||
:y="center[1]" |
||||
label="Text" |
||||
:label-style="{ fill: 'white' }" |
||||
:label-show-bg="true" |
||||
:label-bg-style="{ fill: '#10b981' }" |
||||
:label-bg-padding="[2, 4]" |
||||
:label-bg-border-radius="2" |
||||
/> |
||||
<circle :cx="targetX" :cy="targetY" fill="#fff" :r="5" stroke="#6F3381" :stroke-width="1.5" /> |
||||
</template> |
||||
@ -0,0 +1,54 @@
|
||||
<script setup> |
||||
import { Handle, Position } from '@braks/vue-flow' |
||||
import { UITypes, isVirtualCol } from 'nocodb-sdk' |
||||
|
||||
const props = defineProps({ |
||||
data: { |
||||
type: Object, |
||||
required: true, |
||||
}, |
||||
}) |
||||
|
||||
const { data: table } = props |
||||
const columns = table.columns |
||||
// console.log(table) |
||||
|
||||
const pkColumn = computed(() => { |
||||
return columns.find((col) => col.pk) |
||||
}) |
||||
|
||||
const nonPkColumns = computed(() => { |
||||
return columns.filter((col) => !col.pk && col.uidt !== UITypes.ForeignKey) |
||||
}) |
||||
</script> |
||||
|
||||
<template> |
||||
<div class="h-full flex flex-col min-w-16 bg-gray-50 rounded-lg border-1"> |
||||
<div class="text-gray-600 text-md py-2 border-b-2 border-gray-100 w-full pl-3 bg-gray-100 font-semibold"> |
||||
{{ table.title }} |
||||
</div> |
||||
<div class="mx-1"> |
||||
<div class="w-full border-b-1 py-2 border-gray-100"> |
||||
<SmartsheetHeaderCell v-if="pkColumn" :column="pkColumn" :hide-menu="true" /> |
||||
</div> |
||||
<div v-for="col in nonPkColumns" :key="col.title"> |
||||
<div class="w-full h-full flex items-center min-w-32 border-b-1 border-gray-100 py-2"> |
||||
<div v-if="col.uidt === UITypes.LinkToAnotherRecord" class="flex relative w-full"> |
||||
<Handle :id="`s-${col.id}-${table.id}`" class="-right-4" type="source" :position="Position.Right" :hidden="false" /> |
||||
<Handle |
||||
:id="`d-${col.id}-${table.id}`" |
||||
class="-left-1" |
||||
type="destination" |
||||
:position="Position.Left" |
||||
:hidden="false" |
||||
/> |
||||
<SmartsheetHeaderVirtualCell :column="col" :hide-menu="true" /> |
||||
</div> |
||||
<SmartsheetHeaderVirtualCell v-else-if="isVirtualCol(col)" :column="col" :hide-menu="true" /> |
||||
|
||||
<SmartsheetHeaderCell v-else :column="col" :hide-menu="true" /> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
</template> |
||||
Loading…
Reference in new issue