通过拖动边来进行调整泳道图的大小

[liujinwang223]

目前在创建一个编辑流程图的组件,其中有一个泳道图的功能目前想实现拖动它的边来进行调整大小,但是不知道为啥( resizable: true, // 允许调整大小
resizeHandles: {
// 添加可拖动的调整手柄
n: true, // 北
s: true, // 南
e: true, // 东
w: true, // 西
nw: true, // 西北
ne: true, // 东北
sw: true, // 西南
se: true, // 东南
},)已经进行设置但是选中后还是无法调节大小,
代码如下

<script> import { Graph, Shape } from '@antv/x6'; import { Clipboard } from '@antv/x6-plugin-clipboard'; import { Selection } from '@antv/x6-plugin-selection'; import { Stencil } from '@antv/x6-plugin-stencil'; import { Keyboard } from '@antv/x6-plugin-keyboard'; import { History } from '@antv/x6-plugin-history'; import { Transform } from '@antv/x6-plugin-transform'; // import { Export } from '@antv/x6-plugin-export' import '@antv/x6-vue-shape' import NodeConfigContainer from '@/views/makeProcessChat/component/NodeConfigContainer.vue' import GraphConfigContainer from '@/views/makeProcessChat/component/toolsFlow.vue' export default { name: 'CreateFlow', components: { GraphConfigContainer, NodeConfigContainer, }, data () { return { visible: false, graph: {}, stencil: {}, ports: {}, curNode: {}, nodeData:{}, curEdge: {}, configVisibe: true, isNode: true, infoList:[], } }, methods: { // 是否全屏 handleFull (value) { this.visible = value }, // 初始化画布 initGraph () { // 初始化画布 this.graph = new Graph({ container: document.getElementById('graph-container'), height:600, grid: true, mousewheel: { enabled: true, zoomAtMousePosition: true, modifiers: 'ctrl', minScale: 0.5, maxScale: 3 }, connecting: { router: { name: 'manhattan', args: { padding: 1 } }, connector: { name: 'rounded', args: { radius: 8 } }, anchor: 'center', connectionPoint: 'anchor', allowBlank: false, snap: { radius: 20 }, createEdge () { return new Shape.Edge({ attrs: { line: { stroke: '#A2B1C3', strokeWidth: 2, targetMarker: { name: 'block', width: 12, height: 8 } } }, zIndex: 0 }) }, validateConnection ({ targetMagnet }) { return !!targetMagnet } }, highlighting: { magnetAdsorbed: { name: 'stroke', args: { attrs: { fill: '#5F95FF', stroke: '#5F95FF' } } } }, resizing: true, rotating: true, enabled: true, selecting: { enabled: true, showNodeSelectionBox: true }, orthogonal: false, restrict: false, preserveAspectRatio: false, keyboard: true, clipboard: true, history: true }); this.graph.use( new Clipboard({ enabled: true, }), ) this.graph.use( new Selection({ enabled: true, showNodeSelectionBox: true, }), ) this.graph.use( new Keyboard({ enabled: true, global: true, }), ) this.graph.use( new History({ enabled: true, }), ) this.graph.use( new Transform({ enabled: true, }), ) // this.graph.use(new Export()) }, // 画布绑定监听事件 graphOnEvent () { // 控制连接桩显示/隐藏 const showPorts = (ports, show) => { for (let i = 0, len = ports.length; i < len; i = i + 1) { ports[i].style.visibility = show ? 'visible' : 'hidden' } } this.graph.on('node:mouseenter', () => { const container = document.getElementById('graph-container') const ports = container.querySelectorAll('.x6-port-body') showPorts(ports, true) }) this.graph.on('node:mouseleave', () => { const container = document.getElementById('graph-container') const ports = container.querySelectorAll('.x6-port-body') showPorts(ports, false) }) // 监听点击画布的节点 this.graph.on('node:click', ({ node }) => { let data={ flowId:'', nodeId:'', title:'', type:'', content:'', }; for(let i=0;i { console.log(index,options) console.log('1111',node); let data={ flowId:node.id, nodeId:'', title:node.label, type:node.shape, content:'', }; this.curNode = data; this.infoList.push(data) this.isNode = true this.graph.createTransformWidget(node); // todo 监听到画布添加了node之后，调后端接口创建一个接口 // console.log('node:added') // console.log(node) // console.log(node.attrs.text.fontSize) // node.setLabel('xwtest') // 修改label的值 // console.log('监听到拖入一个控件id：' + node.id) // console.log(this.graph.getNodes()) }) // 监听画布移除节点动作 this.graph.on('node:removed', ({ node, index, options }) => { console.log(index,options) for(let i=0;i { console.log('node:resize event:', cell); }); // 监听节点之间连接动作 this.graph.on('edge:added', ({ edge, index, options }) => { console.log(index,options) this.isNode = false this.curEdge = edge }) // 监听点击节点之间连接动作 this.graph.on('edge:click', ({ edge }) => { this.isNode = false this.curEdge = edge // console.log('edge:click') }) // 监听节点之间移除连接动作 this.graph.on('edge:removed', ({ edge, index, options }) => { console.log(edge,index,options); // todo 监听到连接线动作之后，调后端接口绑定关系 // console.log('edge:removed') // console.log(edge) }) }, // 绑定画布快捷键 graphBindKey () { this.graph.bindKey(['meta+c', 'ctrl+c'], () => { const cells = this.graph.getSelectedCells() if (cells.length) { this.graph.copy(cells) } return false }) this.graph.bindKey(['meta+x', 'ctrl+x'], () => { const cells = this.graph.getSelectedCells() if (cells.length) { this.graph.cut(cells) } return false }) this.graph.bindKey(['meta+v', 'ctrl+v'], () => { if (!this.graph.isClipboardEmpty()) { const cells = this.graph.paste({ offset: 32 }) this.graph.cleanSelection() this.graph.select(cells) } return false }) // undo redo this.graph.bindKey(['meta+z', 'ctrl+z'], () => { this.graph.undo() return false }) this.graph.bindKey(['meta+shift+z', 'ctrl+shift+z'], () => { this.graph.redo() return false }) // select all this.graph.bindKey(['meta+a', 'ctrl+a'], () => { const nodes = this.graph.getNodes() if (nodes) { this.graph.select(nodes) } }) // delete this.graph.bindKey('backspace', () => { const cells = this.graph.getSelectedCells() if (cells.length) { this.graph.removeCells(cells) } }) // zoom this.graph.bindKey(['ctrl+1', 'meta+1'], () => { const zoom = this.graph.zoom() if (zoom < 1.5) { this.graph.zoom(0.1) } }) this.graph.bindKey(['ctrl+2', 'meta+2'], () => { const zoom = this.graph.zoom() if (zoom > 0.5) { this.graph.zoom(-0.1) } }) }, // 初始化左侧流程控件面板 initStencil () { this.stencil = new Stencil({ title: '流程图', target: this.graph, stencilGraphWidth: 250, stencilGraphHeight: 320, collapsable: true, notFoundText: '暂未匹配到结果', search: (cell, keyword, groupName, stencil) => { console.log(groupName,stencil) if (keyword) { return cell.label.includes(keyword) } return true }, groups: [ { title: '基础节点', name: 'group1' }, { title: '泳道图', name: 'group2', graphHeight: 250, layoutOptions: { rowHeight: 70 } } ], layoutOptions: { columns: 2, columnWidth: 110, rowHeight: 60 } }) document.getElementById('stencil').appendChild(this.stencil.container) }, // 初始化链接桩 initPorts () { this.ports = { groups: { top: { position: 'top', attrs: { circle: { r: 4, magnet: true, stroke: '#5F95FF', strokeWidth: 1, fill: '#fff', style: { visibility: 'hidden' } } } }, right: { position: 'right', attrs: { circle: { r: 4, magnet: true, stroke: '#5F95FF', strokeWidth: 1, fill: '#fff', style: { visibility: 'hidden' } } } }, bottom: { position: 'bottom', attrs: { circle: { r: 4, magnet: true, stroke: '#5F95FF', strokeWidth: 1, fill: '#fff', style: { visibility: 'hidden' } } } }, left: { position: 'left', attrs: { circle: { r: 4, magnet: true, stroke: '#5F95FF', strokeWidth: 1, fill: '#fff', style: { visibility: 'hidden' } } } } }, items: [ { group: 'top' }, { group: 'right' }, { group: 'bottom' }, { group: 'left' } ] } }, // 渲染所有左侧控件图形 loadStencil () { Graph.registerNode( 'custom-rect', { inherit: 'rect', width: 80, height: 36, attrs: { body: { strokeWidth: 1, stroke: '#5F95FF', fill: '#EFF4FF' }, text: { fontSize: 12, fill: '#262626' } }, resizable: true, resizeHandles: { n: true, s: true, e: true, w: true, nw: true, ne: true, sw: true, se: true, }, ports: { ...this.ports } }, true ) // 注册自定义泳道节点 Graph.registerNode( 'lane', { inherit: 'rect', markup: [ { tagName: 'rect', selector: 'body', }, { tagName: 'rect', selector: 'name-rect', }, { tagName: 'text', selector: 'name-text', }, ], attrs: { body: { fill: '#333', stroke: '#fff', strokeWidth: 1, }, 'name-rect': { width: 100, height: 30, fill: '#fff', stroke: '#333', strokeWidth: 1, x: -1, }, 'name-text': { ref: 'name-rect', refY: 0.5, refX: 0.5, textAnchor: 'middle', fontWeight: 'bold', fill: '#fff', fontSize: 12, }, }, resizable: true, // 允许调整大小 resizeHandles: { // 添加可拖动的调整手柄 n: true, // 北 s: true, // 南 e: true, // 东 w: true, // 西 nw: true, // 西北 ne: true, // 东北 sw: true, // 西南 se: true, // 东南 }, resizeLimit: { minWidth: 100, minHeight: 800, }, }, true, ) Graph.registerNode( 'custom-polygon', { inherit: 'polygon', width: 80, height: 38, attrs: { body: { strokeWidth: 1, stroke: '#5F95FF', fill: '#EFF4FF' }, text: { fontSize: 12, fill: '#262626' } }, resizable: true, resizeHandles: { n: true, s: true, e: true, w: true, nw: true, ne: true, sw: true, se: true, }, ports: {...this.ports} }, true ) Graph.registerNode( 'custom-circle', { inherit: 'circle', width: 48, height: 48, attrs: { body: { strokeWidth: 1, stroke: '#5F95FF', fill: '#EFF4FF' }, text: { fontSize: 12, fill: '#262626' } }, resizable: true, resizeHandles: { n: true, s: true, e: true, w: true, nw: true, ne: true, sw: true, se: true, }, ports: { ...this.ports } }, true ) Graph.registerNode( 'custom-text', { inherit: 'text-block', width: 60, height: 36, resizable: true, resizeHandles: { n: true, s: true, e: true, w: true, nw: true, ne: true, sw: true, se: true, }, attrs: { body: { // strokeWidth: 0, rx: 4, ry: 4, fill: '#fff', stroke: '#fff' }, text: { fontSize: 12, fill: '#000' } }, ports: { ...this.ports } }, true ) Graph.registerNode('horizontal-lane', { inherit: 'rect', // 继承自矩形节点 width: 200, // 泳道的默认宽度 height: 800, // 泳道的默认高度 attrs: { body: { stroke: '#5F95FF', // 泳道边框颜色 fill: '#E6F7FF', // 泳道填充颜色 strokeWidth: 1, // 边框宽度 }, }, // 允许节点调整大小 resizable: true, // 定义resize handles的位置和大小 resizeHandles: { n: true, s: true, e: true, w: true, nw: true, ne: true, sw: true, se: true, }, // 设置最小尺寸限制 resizeLimit: { minWidth: 100, minHeight: 50, }, }, true); Graph.registerNode( 'custom-path', { inherit: 'path', width: 60, height: 36, resizable: true, resizeHandles: { n: true, s: true, e: true, w: true, nw: true, ne: true, sw: true, se: true, }, attrs: { body: { strokeWidth: 1, stroke: '#5F95FF', fill: '#EFF4FF' }, text: { fontSize: 12, fill: '#262626' } }, ports: { ...this.ports } }, true ) Graph.registerNode( 'custom-image', { inherit: 'rect', width: 52, height: 52, resizable: true, resizeHandles: { n: true, s: true, e: true, w: true, nw: true, ne: true, sw: true, se: true, }, markup: [ { tagName: 'rect', selector: 'body' }, { tagName: 'image' }, { tagName: 'text', selector: 'label' } ], attrs: { body: { strokeWidth: 1, stroke: '#00A4FF', fill: '#00A4FF' }, image: { width: 26, height: 26, refX: 13, refY: 16 }, label: { refX: 3, refY: 2, textAnchor: 'left', textVerticalAnchor: 'top', fontSize: 12, fill: '#fff' } }, ports: { ...this.ports } }, true ) const r1 = this.graph.createNode({ shape: 'custom-rect', label: '开始', attrs: { body: { rx: 18, ry: 26 } } }) const r2 = this.graph.createNode({ shape: 'custom-rect', label: '过程' }) const r3 = this.graph.createNode({ shape: 'custom-rect', attrs: { body: { rx: 6, ry: 6 } }, label: '可选过程' }) const r4 = this.graph.createNode({ shape: 'custom-polygon', attrs: { body: { refPoints: '0,10 10,0 20,10 10,20' } }, label: '决策' }) const r5 = this.graph.createNode({ shape: 'custom-polygon', attrs: { body: { refPoints: '10,0 40,0 30,20 0,20' } }, label: '数据' }) const r6 = this.graph.createNode({ shape: 'custom-circle', label: '连接' }) const r7 = this.graph.createNode({ shape: 'custom-rect', label: '数据库' }) const r8 = this.graph.createNode({ shape: 'custom-path', label: '文档', attrs: { body: { refD: 'M 0 0 0 4 C 10 8 15 2 25 5 L 25 0 Z' } } }) const r9 = this.graph.createNode({ shape: 'custom-path', label: '手动输入', attrs: { body: { refD: 'M 0 7 0 15 15 15 15 5 Z' } } }) const r10 = this.graph.createNode({ shape: 'custom-text', text: '文本' }) this.stencil.load([r1, r2, r3, r4, r5, r6, r7, r8, r9, r10,], 'group1') const L1= this.graph.createNode({ shape: 'lane', label: '横向泳道', width: 150, height: 300, attrs: { body: { fill: '#FFF', stroke: '#333', strokeWidth: 1, }, 'name-rect': { width: 150, height: 30, fill: '#333', stroke: '#fff', strokeWidth: 1, x: -1, }, 'name-text': { ref: 'name-rect', refY: 0.5, refX: 0.5, textAnchor: 'middle', fontWeight: 'bold', fill: '#fff', fontSize: 12, }, }, }) const L2= this.graph.createNode({ shape: 'horizontal-lane', label: '横向泳道', width: 150, height: 500, attrs: { body: { fill: '#FFF', stroke: '#333', strokeWidth: 1, }, 'name-rect': { width: 150, height: 30, fill: '#333', stroke: '#fff', strokeWidth: 1, x: -1, }, 'name-text': { ref: 'name-rect', refY: 0.5, refX: 0.5, textAnchor: 'middle', fontWeight: 'bold', fill: '#fff', fontSize: 12, }, }, }) this.stencil.load([L1,L2], 'group2') }, // 更新node的数据 handleNode (data) { console.log(data) const cell = this.graph.getCellById(data.flowId); if (cell) { cell.attr('text', { text: data.title }); // 更新文本标签 // 或者，如果文本标签有特定的属性，如填充色(fill)，可以这样更新： // cell.attr('text/text', '新标签内容'); } for(let i=0; i <style scoped> .full-screen { position: fixed; overflow: auto; top: 0; right: 0; bottom: 0; left: 0; background-color: #fff; border: 0; border-radius: 0px; padding:0; margin:0; height: 100%; } #container { display: flex; border: 1px solid #dfe3e8; height: 100%; width: 100%; } #stencil { width: 250px; height: 600px; position: absolute; border-right: 1px solid #dfe3e8; z-index: 1000; /* 确保工具栏在页面其他内容之上 */ } #graph-container { width: calc(100% - 500px); /*width: 100%;*/ height: 100%; /*background-color: #fffbe6*/ } #config-container { position: relative; width: 250px; height: 100%; border-left: 1px solid #dfe3e8; } .x6-widget-transform > div { border: 1px solid #239edd; } .x6-widget-transform > div:hover { background-color: #3dafe4; } </style>

[Yeti-xxx]

可以尝试transform插件