|
|
@ -44,6 +44,12 @@ interface Relation { |
|
|
|
type: 'mm' | 'hm' |
|
|
|
type: 'mm' | 'hm' |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
/** |
|
|
|
|
|
|
|
* This util is used to generate the ERD graph elements and layout them |
|
|
|
|
|
|
|
* |
|
|
|
|
|
|
|
* @param tables |
|
|
|
|
|
|
|
* @param props |
|
|
|
|
|
|
|
*/ |
|
|
|
export function useErdElements(tables: MaybeRef<TableType[]>, props: MaybeRef<ERDConfig>) { |
|
|
|
export function useErdElements(tables: MaybeRef<TableType[]>, props: MaybeRef<ERDConfig>) { |
|
|
|
const elements = ref<Elements<NodeData | EdgeData>>([]) |
|
|
|
const elements = ref<Elements<NodeData | EdgeData>>([]) |
|
|
|
|
|
|
|
|
|
|
@ -163,8 +169,8 @@ export function useErdElements(tables: MaybeRef<TableType[]>, props: MaybeRef<ER |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
function createNodes() { |
|
|
|
function createNodes() { |
|
|
|
return erdTables.value.flatMap<Node<NodeData>[]>((table) => { |
|
|
|
return erdTables.value.reduce<Node<NodeData>[]>((acc, table) => { |
|
|
|
if (!table.id) return [] |
|
|
|
if (!table.id) return acc |
|
|
|
|
|
|
|
|
|
|
|
const columns = |
|
|
|
const columns = |
|
|
|
metasWithIdAsKey.value[table.id].columns?.filter( |
|
|
|
metasWithIdAsKey.value[table.id].columns?.filter( |
|
|
@ -175,23 +181,23 @@ export function useErdElements(tables: MaybeRef<TableType[]>, props: MaybeRef<ER |
|
|
|
|
|
|
|
|
|
|
|
const nonPkColumns = columns.filter((col) => !col.pk && col.uidt !== UITypes.ForeignKey) |
|
|
|
const nonPkColumns = columns.filter((col) => !col.pk && col.uidt !== UITypes.ForeignKey) |
|
|
|
|
|
|
|
|
|
|
|
return [ |
|
|
|
acc.push({ |
|
|
|
{ |
|
|
|
id: table.id, |
|
|
|
id: table.id, |
|
|
|
data: { |
|
|
|
data: { |
|
|
|
table: metasWithIdAsKey.value[table.id], |
|
|
|
table: metasWithIdAsKey.value[table.id], |
|
|
|
pkAndFkColumns, |
|
|
|
pkAndFkColumns, |
|
|
|
nonPkColumns, |
|
|
|
nonPkColumns, |
|
|
|
showPkAndFk: config.showPkAndFk, |
|
|
|
showPkAndFk: config.showPkAndFk, |
|
|
|
showAllColumns: config.showAllColumns, |
|
|
|
showAllColumns: config.showAllColumns, |
|
|
|
columnLength: columns.length, |
|
|
|
columnLength: columns.length, |
|
|
|
color: '', |
|
|
|
color: '', |
|
|
|
}, |
|
|
|
}, |
|
|
|
type: 'custom', |
|
|
|
type: 'custom', |
|
|
|
position: { x: 0, y: 0 }, |
|
|
|
position: { x: 0, y: 0 }, |
|
|
|
}) |
|
|
|
} as Node<NodeData>, |
|
|
|
|
|
|
|
] |
|
|
|
return acc |
|
|
|
}) |
|
|
|
}, []) |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
function createEdges() { |
|
|
|
function createEdges() { |
|
|
|