|
|
|
@ -115,13 +115,47 @@ function initG6(){ |
|
|
|
collapsed: true, |
|
|
|
size: [300, 50], |
|
|
|
}); |
|
|
|
setTimeout(() => graph.layout(), 100); |
|
|
|
// setTimeout(() => graph.layout(), 100); |
|
|
|
} else if (shape.get("name") === "expand") { |
|
|
|
graph.updateItem(item, { |
|
|
|
collapsed: false, |
|
|
|
size: [300, 80], |
|
|
|
}); |
|
|
|
setTimeout(() => graph.layout(), 100); |
|
|
|
// setTimeout(() => graph.layout(), 100); |
|
|
|
}else if (shape.get("name") && shape.get("name").startsWith("item")) { |
|
|
|
let edges = graph.getEdges() |
|
|
|
let columnName = '' |
|
|
|
g6data.value.forEach(data =>{ |
|
|
|
if(data.id === item.getModel().id){ |
|
|
|
columnName = data.attrs[shape.get("name").split("-")[1]].key |
|
|
|
} |
|
|
|
}) |
|
|
|
edges.forEach(edg =>{ |
|
|
|
if((edg.getModel().sourceKey === columnName && edg.getModel().source === item.getModel().id) |
|
|
|
|| (edg.getModel().targetKey === columnName && edg.getModel().target === item.getModel().id)){ |
|
|
|
edg.show() |
|
|
|
}else{ |
|
|
|
edg.hide() |
|
|
|
} |
|
|
|
}) |
|
|
|
let nodes = graph.getNodes() |
|
|
|
let index = Number(shape.get("name").split("-")[1]) |
|
|
|
nodes.forEach(node=>{ |
|
|
|
let model = node.getModel() |
|
|
|
model.selectedIndex = NaN |
|
|
|
graph.updateItem(node,model) |
|
|
|
}) |
|
|
|
this.graph.updateItem(item, { |
|
|
|
selectedIndex: index, |
|
|
|
}); |
|
|
|
} else { |
|
|
|
graph.updateItem(item, { |
|
|
|
selectedIndex: NaN, |
|
|
|
}); |
|
|
|
let edges = graph.getEdges() |
|
|
|
edges.forEach(edg =>{ |
|
|
|
edg.show() |
|
|
|
}) |
|
|
|
} |
|
|
|
}, |
|
|
|
mousedown(e) { |
|
|
|
@ -132,18 +166,18 @@ function initG6(){ |
|
|
|
}, |
|
|
|
move(e) { |
|
|
|
if (this.isMousedown) return; |
|
|
|
const name = e.shape.get("name"); |
|
|
|
const item = e.item; |
|
|
|
|
|
|
|
if (name && name.startsWith("item")) { |
|
|
|
this.graph.updateItem(item, { |
|
|
|
selectedIndex: Number(name.split("-")[1]), |
|
|
|
}); |
|
|
|
} else { |
|
|
|
this.graph.updateItem(item, { |
|
|
|
selectedIndex: NaN, |
|
|
|
}); |
|
|
|
} |
|
|
|
// const name = e.shape.get("name"); |
|
|
|
// const item = e.item; |
|
|
|
// |
|
|
|
// if (name && name.startsWith("item")) { |
|
|
|
// this.graph.updateItem(item, { |
|
|
|
// selectedIndex: Number(name.split("-")[1]), |
|
|
|
// }); |
|
|
|
// } else { |
|
|
|
// this.graph.updateItem(item, { |
|
|
|
// selectedIndex: NaN, |
|
|
|
// }); |
|
|
|
// } |
|
|
|
}, |
|
|
|
}); |
|
|
|
|
|
|
|
@ -163,7 +197,6 @@ function initG6(){ |
|
|
|
|
|
|
|
if (!sourceNode.collapsed && sourceIndex > sourceStartIndex - 1) { |
|
|
|
sourceY = 30 + (sourceIndex - sourceStartIndex + 0.5) * itemHeight; |
|
|
|
sourceY = Math.min(sourceY, 80); |
|
|
|
} |
|
|
|
|
|
|
|
const targetIndex = targetNode.attrs.findIndex( |
|
|
|
@ -206,7 +239,7 @@ function initG6(){ |
|
|
|
endPoint.y, |
|
|
|
], |
|
|
|
], |
|
|
|
endArrow: true, |
|
|
|
endArrow: cfg.endArrow, |
|
|
|
}, |
|
|
|
// must be assigned in G6 3.3 and later versions. it can be any string you want, but should be unique in a custom item type |
|
|
|
name: "path-shape", |
|
|
|
@ -231,7 +264,7 @@ function initG6(){ |
|
|
|
endPoint.y, |
|
|
|
], |
|
|
|
], |
|
|
|
endArrow: true, |
|
|
|
endArrow: cfg.endArrow, |
|
|
|
}, |
|
|
|
// must be assigned in G6 3.3 and later versions. it can be any string you want, but should be unique in a custom item type |
|
|
|
name: "path-shape", |
|
|
|
@ -278,7 +311,7 @@ function initG6(){ |
|
|
|
icon, |
|
|
|
} = cfg; |
|
|
|
const list = attrs; |
|
|
|
const itemCount = list.length; |
|
|
|
const itemCount = list.length + 1; |
|
|
|
const boxStyle = { |
|
|
|
stroke: "#096DD9", |
|
|
|
radius: 4, |
|
|
|
@ -288,7 +321,7 @@ function initG6(){ |
|
|
|
Math.floor(startIndex + itemCount - 1) |
|
|
|
); |
|
|
|
const offsetY = (0.5 - (startIndex % 1)) * itemHeight + 30; |
|
|
|
|
|
|
|
//表头盒子 |
|
|
|
group.addShape("rect", { |
|
|
|
attrs: { |
|
|
|
fill: boxStyle.stroke, |
|
|
|
@ -300,7 +333,7 @@ function initG6(){ |
|
|
|
}); |
|
|
|
|
|
|
|
let fontLeft = 12; |
|
|
|
|
|
|
|
//图标 |
|
|
|
if (icon && icon.show !== false) { |
|
|
|
group.addShape("image", { |
|
|
|
attrs: { |
|
|
|
@ -313,7 +346,7 @@ function initG6(){ |
|
|
|
}); |
|
|
|
fontLeft += 18; |
|
|
|
} |
|
|
|
|
|
|
|
//表名 |
|
|
|
group.addShape("text", { |
|
|
|
attrs: { |
|
|
|
y: 22, |
|
|
|
@ -325,10 +358,11 @@ function initG6(){ |
|
|
|
}, |
|
|
|
}); |
|
|
|
|
|
|
|
//展开div |
|
|
|
group.addShape("rect", { |
|
|
|
attrs: { |
|
|
|
x: 0, |
|
|
|
y: collapsed ? 30 : (list.length ) * itemHeight+15, |
|
|
|
y: collapsed ? 30 : (list.length +1) * itemHeight+15, |
|
|
|
height: 15, |
|
|
|
width, |
|
|
|
fill: "#eee", |
|
|
|
@ -339,10 +373,11 @@ function initG6(){ |
|
|
|
name: collapsed ? "expand" : "collapse", |
|
|
|
}); |
|
|
|
|
|
|
|
//展开图标 |
|
|
|
group.addShape("text", { |
|
|
|
attrs: { |
|
|
|
x: width / 2 - 6, |
|
|
|
y: (collapsed ? 30 : (list.length ) * itemHeight+15) + 12, |
|
|
|
y: (collapsed ? 30 : (list.length +1) * itemHeight+15) + 12, |
|
|
|
text: collapsed ? "+" : "-", |
|
|
|
width, |
|
|
|
fill: "#000", |
|
|
|
@ -352,13 +387,13 @@ function initG6(){ |
|
|
|
// must be assigned in G6 3.3 and later versions. it can be any string you want, but should be unique in a custom item type |
|
|
|
name: collapsed ? "expand" : "collapse", |
|
|
|
}); |
|
|
|
|
|
|
|
//表格外框 |
|
|
|
const keyshape = group.addShape("rect", { |
|
|
|
attrs: { |
|
|
|
x: 0, |
|
|
|
y: 0, |
|
|
|
width, |
|
|
|
height: collapsed ? 45 : (list.length ) * itemHeight+15 + 15, |
|
|
|
height: collapsed ? 45 : (list.length +1) * itemHeight+15 + 15, |
|
|
|
...boxStyle, |
|
|
|
}, |
|
|
|
draggable: true, |
|
|
|
@ -369,28 +404,30 @@ function initG6(){ |
|
|
|
} |
|
|
|
|
|
|
|
const listContainer = group.addGroup({}); |
|
|
|
//字段内容 |
|
|
|
listContainer.setClip({ |
|
|
|
type: "rect", |
|
|
|
attrs: { |
|
|
|
x: -8, |
|
|
|
y: 30, |
|
|
|
width: width + 16, |
|
|
|
height: (list.length ) * itemHeight+15 - 30, |
|
|
|
height: (list.length +1) * itemHeight+15 - 30, |
|
|
|
}, |
|
|
|
}); |
|
|
|
//字段背景框 |
|
|
|
listContainer.addShape({ |
|
|
|
type: "rect", |
|
|
|
attrs: { |
|
|
|
x: 1, |
|
|
|
y: 30, |
|
|
|
width: width - 2, |
|
|
|
height: (list.length ) * itemHeight+15 - 30, |
|
|
|
height: (list.length +1 ) * itemHeight+15 - 30, |
|
|
|
fill: "#fff", |
|
|
|
}, |
|
|
|
draggable: true, |
|
|
|
}); |
|
|
|
|
|
|
|
if (list.length > itemCount) { |
|
|
|
if (list.length +1 > itemCount) { |
|
|
|
const barStyle = { |
|
|
|
width: 4, |
|
|
|
padding: 0, |
|
|
|
@ -401,30 +438,30 @@ function initG6(){ |
|
|
|
fill: "#00000022", |
|
|
|
}, |
|
|
|
}; |
|
|
|
|
|
|
|
//滚动轴 |
|
|
|
listContainer.addShape("rect", { |
|
|
|
attrs: { |
|
|
|
y: 30, |
|
|
|
x: width - barStyle.padding - barStyle.width, |
|
|
|
width: barStyle.width, |
|
|
|
height: (list.length ) * itemHeight- 30, |
|
|
|
height: (list.length +1 ) * itemHeight- 30, |
|
|
|
...barStyle.boxStyle, |
|
|
|
}, |
|
|
|
}); |
|
|
|
|
|
|
|
const indexHeight = |
|
|
|
afterList.length > itemCount ? |
|
|
|
(afterList.length / list.length) * (list.length ) * itemHeight : |
|
|
|
(afterList.length / list.length+1) * (list.length +1) * itemHeight : |
|
|
|
10; |
|
|
|
|
|
|
|
//滚动轴框 |
|
|
|
listContainer.addShape("rect", { |
|
|
|
attrs: { |
|
|
|
y: 30 + |
|
|
|
barStyle.padding + |
|
|
|
(startIndex / list.length) * ( (list.length ) * itemHeight - 30), |
|
|
|
(startIndex / list.length+1) * ( (list.length+1 ) * itemHeight - 30), |
|
|
|
x: width - barStyle.padding - barStyle.width, |
|
|
|
width: barStyle.width, |
|
|
|
height: Math.min( (list.length ) * itemHeight, indexHeight), |
|
|
|
height: Math.min( (list.length +1) * itemHeight, indexHeight), |
|
|
|
...barStyle.innerStyle, |
|
|
|
}, |
|
|
|
}); |
|
|
|
@ -440,7 +477,7 @@ function initG6(){ |
|
|
|
key += " - " + type; |
|
|
|
} |
|
|
|
const label = key; |
|
|
|
|
|
|
|
//字段框 |
|
|
|
listContainer.addShape("rect", { |
|
|
|
attrs: { |
|
|
|
x: 1, |
|
|
|
@ -457,6 +494,7 @@ function initG6(){ |
|
|
|
}); |
|
|
|
|
|
|
|
if (!cfg.hideDot) { |
|
|
|
//左边连接桩 |
|
|
|
listContainer.addShape("circle", { |
|
|
|
attrs: { |
|
|
|
x: 0, |
|
|
|
@ -469,6 +507,7 @@ function initG6(){ |
|
|
|
cursor: "pointer", |
|
|
|
}, |
|
|
|
}); |
|
|
|
//右边连接桩 |
|
|
|
listContainer.addShape("circle", { |
|
|
|
attrs: { |
|
|
|
x: width, |
|
|
|
@ -482,7 +521,7 @@ function initG6(){ |
|
|
|
}, |
|
|
|
}); |
|
|
|
} |
|
|
|
|
|
|
|
//字段文字 |
|
|
|
listContainer.addShape("text", { |
|
|
|
attrs: { |
|
|
|
x: 12, |
|
|
|
@ -529,6 +568,7 @@ function initG6(){ |
|
|
|
source: node.id, |
|
|
|
target: relation.nodeId, |
|
|
|
sourceKey: attr.key, |
|
|
|
endArrow: relation.endArrow, |
|
|
|
targetKey: relation.key, |
|
|
|
label: relation.label, |
|
|
|
}); |
|
|
|
@ -597,7 +637,6 @@ function initG6(){ |
|
|
|
animate: true, |
|
|
|
// fitView: true |
|
|
|
}) |
|
|
|
console.log(g6data.value) |
|
|
|
graph.data(dataTransform(g6data.value)) |
|
|
|
graph.render(); |
|
|
|
} |
|
|
|
@ -606,8 +645,6 @@ function initG6(){ |
|
|
|
watch( |
|
|
|
() => props.data, |
|
|
|
(val) => { |
|
|
|
console.log(props.data) |
|
|
|
console.log(val) |
|
|
|
g6data.value = [] |
|
|
|
if (props.data.tableList && props.data.tableList.length>0){ |
|
|
|
for (let i = 0; i < props.data.tableList.length; i++) { |
|
|
|
@ -632,6 +669,7 @@ watch( |
|
|
|
let key = relation.target.fld_eng_name |
|
|
|
let tableKey = relation.source.ssys_cd+"-"+relation.source.mdl_name+"-"+relation.source.tab_eng_name |
|
|
|
let nodeId = relation.target.ssys_cd+"-"+relation.target.mdl_name+"-"+relation.target.tab_eng_name |
|
|
|
let endArrow = relation.endArrow; |
|
|
|
if (g6data.value.length > 0){ |
|
|
|
for (let j = 0; j < g6data.value.length; j++) { |
|
|
|
if (g6data.value[j].id === tableKey){ |
|
|
|
@ -647,13 +685,15 @@ watch( |
|
|
|
if (!hasRelation){ |
|
|
|
g6data.value[j].attrs[k].relation.push({ |
|
|
|
key: key, |
|
|
|
nodeId: nodeId |
|
|
|
nodeId: nodeId, |
|
|
|
endArrow: endArrow |
|
|
|
}) |
|
|
|
} |
|
|
|
}else { |
|
|
|
g6data.value[j].attrs[k].relation = [{ |
|
|
|
key: key, |
|
|
|
nodeId: nodeId |
|
|
|
nodeId: nodeId, |
|
|
|
endArrow: endArrow |
|
|
|
}] |
|
|
|
} |
|
|
|
} |
|
|
|
|
