|
|
@@ -123,6 +123,11 @@
|
|
|
</div>
|
|
|
</div>
|
|
|
</el-popover>
|
|
|
+<!-- <el-tooltip content="自动布局" effect="light" placement="top" :show-arrow="false">-->
|
|
|
+<!-- <div class="__hover-bg" @click="onLayoutAuto">-->
|
|
|
+<!-- <SvgIcon name="zoom+"/>-->
|
|
|
+<!-- </div>-->
|
|
|
+<!-- </el-tooltip>-->
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
@@ -146,7 +151,7 @@ import { History } from '@antv/x6-plugin-history'
|
|
|
import {v4} from "uuid";
|
|
|
import { Dnd } from '@antv/x6-plugin-dnd'
|
|
|
import nodeAdd from './node-add.vue'
|
|
|
-import {delay} from "@/utils/czr-util";
|
|
|
+import dagre from 'dagre';
|
|
|
|
|
|
register({
|
|
|
shape: 'workflow-node',
|
|
|
@@ -574,6 +579,71 @@ const onAddNode = ({type, e}) => {
|
|
|
const node = state.graph.createNode(handleNode(getNodeDefault(type)))
|
|
|
state.dnd.start(node, e)
|
|
|
}
|
|
|
+const onLayoutAuto = () => {
|
|
|
+ // 布局方向
|
|
|
+ const dir = 'LR' // LR RL TB BT
|
|
|
+ const nodes = state.graph.getNodes()
|
|
|
+ const edges = state.graph.getEdges()
|
|
|
+ const g = new dagre.graphlib.Graph()
|
|
|
+ g.setGraph({ rankdir: dir, nodesep: 100, ranksep: 16 })
|
|
|
+ g.setDefaultEdgeLabel(() => ({}))
|
|
|
+
|
|
|
+ nodes.forEach((node) => {
|
|
|
+ g.setNode(node.id, node.size())
|
|
|
+ })
|
|
|
+
|
|
|
+ edges.forEach((edge) => {
|
|
|
+ const source = edge.getSource()
|
|
|
+ const target = edge.getTarget()
|
|
|
+ g.setEdge(source.cell, target.cell)
|
|
|
+ })
|
|
|
+
|
|
|
+ dagre.layout(g)
|
|
|
+
|
|
|
+ g.nodes().forEach((id) => {
|
|
|
+ const node = state.graph.getCellById(id) as Node
|
|
|
+ if (node) {
|
|
|
+ const pos = g.node(id)
|
|
|
+ node.position(pos.x, pos.y)
|
|
|
+ }
|
|
|
+ })
|
|
|
+
|
|
|
+ // edges.forEach((edge) => {
|
|
|
+ // const source = edge.getSourceNode()!
|
|
|
+ // const target = edge.getTargetNode()!
|
|
|
+ // const sourceBBox = source.getBBox()
|
|
|
+ // const targetBBox = target.getBBox()
|
|
|
+ //
|
|
|
+ // if ((dir === 'LR' || dir === 'RL') && sourceBBox.y !== targetBBox.y) {
|
|
|
+ // const gap =
|
|
|
+ // dir === 'LR'
|
|
|
+ // ? targetBBox.x - sourceBBox.x - sourceBBox.width
|
|
|
+ // : -sourceBBox.x + targetBBox.x + targetBBox.width
|
|
|
+ // const fix = dir === 'LR' ? sourceBBox.width : 0
|
|
|
+ // const x = sourceBBox.x + fix + gap / 2
|
|
|
+ // edge.setVertices([
|
|
|
+ // { x, y: sourceBBox.center.y },
|
|
|
+ // { x, y: targetBBox.center.y },
|
|
|
+ // ])
|
|
|
+ // } else if (
|
|
|
+ // (dir === 'TB' || dir === 'BT') &&
|
|
|
+ // sourceBBox.x !== targetBBox.x
|
|
|
+ // ) {
|
|
|
+ // const gap =
|
|
|
+ // dir === 'TB'
|
|
|
+ // ? targetBBox.y - sourceBBox.y - sourceBBox.height
|
|
|
+ // : -sourceBBox.y + targetBBox.y + targetBBox.height
|
|
|
+ // const fix = dir === 'TB' ? sourceBBox.height : 0
|
|
|
+ // const y = sourceBBox.y + fix + gap / 2
|
|
|
+ // edge.setVertices([
|
|
|
+ // { x: sourceBBox.center.x, y },
|
|
|
+ // { x: targetBBox.center.x, y },
|
|
|
+ // ])
|
|
|
+ // } else {
|
|
|
+ // edge.setVertices([])
|
|
|
+ // }
|
|
|
+ // })
|
|
|
+}
|
|
|
watch(() => props.data, (n) => {
|
|
|
if (n) {
|
|
|
initChart()
|
CzRger