| 123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151 |
- /**
- * @desc : 自定义节点群组
- * @author : 张潇木
- * @date : 2023/1/6 16:38
- */
- import { Graph,Node } from '@antv/x6'
- export class NodeGroup extends Node {
- // region 属性
- collapsed = true //群组的状态,默认为收起
- expandSize = undefined //群组展开时的大小
- // endregion
- // region 构造方法
- postprocess() {
- // 特殊处理,否则会出现群组内部节点位置改变时,群组自动收起的bug
- // 如果存在子节点,那么不调用收起/展开方法
- if(!this.children){
- this.toggleCollapse(true)
- }
- }
- // endregion
- // region 获取当前节点展开状态
- isCollapsed() {
- return this.collapsed
- }
- // endregion
- // region 获取、设置当前节点展开大小
- getExpandSize() {
- return this.expandSize
- }
- setExpandSize(expandSize) {
- this.expandSize=expandSize
- }
- // endregion
- // region 收起/展开群组事件
- toggleCollapse(collapsed) {
- const target = collapsed == null ? !this.collapsed : collapsed
- if (target) {
- //收起
- this.attr('buttonSign', { d: 'M 1 5 9 5 M 5 1 5 9' })
- this.expandSize=this.getSize()
- this.resize(100, 40)
- } else {
- //展开
- this.attr('buttonSign', { d: 'M 2 5 8 5' })
- if (this.expandSize) {
- //有实际值以实际值为准
- this.resize(this.expandSize.width, this.expandSize.height)
- }else{
- //展开的默认值
- this.resize(240, 240)
- }
- }
- this.collapsed = target
- }
- // endregion
- }
- // region 群组配置
- NodeGroup.config({
- shape: 'rect',
- markup: [
- {
- tagName: 'rect',
- selector: 'body',
- },
- {
- tagName: 'image',
- selector: 'image',
- },
- {
- tagName: 'text',
- selector: 'text',
- },
- {
- tagName: 'g',
- selector: 'buttonGroup',
- children: [
- {
- tagName: 'rect',
- selector: 'button',
- attrs: {
- 'pointer-events': 'visiblePainted',
- },
- },
- {
- tagName: 'path',
- selector: 'buttonSign',
- attrs: {
- fill: 'none',
- 'pointer-events': 'none',
- },
- },
- ],
- },
- ],
- attrs: {
- body: {
- refWidth: '100%',
- refHeight: '100%',
- strokeWidth: 1,
- fill: 'rgba(95,149,255,0.05)',
- stroke: '#5F95FF',
- },
- image: {
- 'xlink:href': 'https://gw.alipayobjects.com/mdn/rms_0b51a4/afts/img/A*X4e0TrDsEiIAAAAAAAAAAAAAARQnAQ',
- width: 16,
- height: 16,
- x: 8,
- y: 12,
- },
- text: {
- fontSize: 12,
- fill: 'rgba(0,0,0,0.85)',
- refX: 30,
- refY: 15,
- },
- buttonGroup: {
- refX: '100%',
- refX2: -25,
- refY: 13,
- },
- button: {
- height: 14,
- width: 16,
- rx: 2,
- ry: 2,
- fill: '#f5f5f5',
- stroke: '#ccc',
- cursor: 'pointer',
- event: 'node:collapse',
- },
- buttonSign: {
- refX: 3,
- refY: 2,
- stroke: '#808080',
- },
- },
- tools:['node-editor'],
- })
- // endregion
- // region 注册群组节点
- Graph.registerNode('groupNode', NodeGroup)
- // endregion
|