jbxl-workflow/src/Port.class.js

流程图

// import { register } from '@antv/x6-vue-shape';
import {generateRandomId} from "@dang_8899/xl-ui";
class BasicPorts {
    #ports = []
    constructor(port) {
        this.type = port.type || 'middleNode'; // 节点类型，默认为中间节点
        this.portStyle = []
        this.inputPortId = generateRandomId()
        this.outputPortId = generateRandomId()
        this.create(port)
    }
    create ({dx, dy} = {}) {
        const inputPortOpt = {
            position: 'absolute',    // 链接桩位置
            ...this.setPortStyle({position: 'absolute', borderColor: '#7B52FE', backgroundColor: '#ffffff', borderWidth: 2, width: 16, dx: 0, dy: dy || 27.5}),
            markup: [{
                tagName: 'foreignObject',
                attrs: {
                    width: 16,  // 根据设计稿设置
                    height: 16,
                    x: -7,      // 居中偏移补偿
                    y: -7
                },
                selector: 'foContent' // 关键配置
            }],
            anchor: { name: 'center' },
            // 关键配置：连接点直接使用锚点位置（避免自动偏移）
            connectionPoint: 'anchor',
        }
        const outputPortOpt = {
            position: 'absolute',    // 链接桩位置
            ...this.setPortStyle({position: 'absolute', borderColor: '#7B52FE', backgroundColor: '#ffffff', borderWidth: 2, width: 16, dx, dy: dy || 27.5}),
            markup: [{
                tagName: 'foreignObject',
                attrs: {
                    width: 16,  // 根据设计稿设置
                    height: 16,
                    x: -7,      // 居中偏移补偿
                    y: -7
                },
                selector: 'foContent' // 关键配置
            }],
        }
        const groups = {
            circleInPort: inputPortOpt,
            circleOutPort: outputPortOpt
        }
        let items = []
        if (this.type === 'startNode') {
            // 起始节点，只有输出端口
            items.push({ group: 'circleOutPort', id: 'StartNodeOutputPort' + this.inputPortId })
            delete groups.circleInPort
        } else if (this.type === 'endNode') {
            // 结束节点，只有输入端口
            items.push({ group: 'circleInPort', id: 'EndNodeInputPort' + this.outputPortId })
            delete groups.circleOutPort
        } else {
            //中间节点，默认都有输入输出端口
            items = [{ group: 'circleInPort', id: 'InputPort' + this.inputPortId}, { group: 'circleOutPort', id: 'OutputPort' + this.outputPortId }]
        }
        this.setPortsList(
            {
                groups,
                items
            }
        )
    }
    setPortsList (ports) {
       this.#ports = ports;
    }
    getPortsList () {
        return this.#ports;
    }
    // 调整port的大小, 会得到一个port的样式
    setPortStyle ({position, borderColor, backgroundColor, borderWidth, shape = 'circle', width = 16, height = 16, dx, dy, magnet = true}) {
        return {
            position: {
                name: position,
                args: {
                    // dx,
                    // dy,
                    x: dx || 0,
                    // dx, // 偏移 10px，防止端口嵌入节点内部
                    y: dy || 27.5
                }
            },
            // position,
            attrs: {
                [shape]: {
                    magnet,
                    width: shape === 'rect' ? width : undefined,
                    height: shape === 'rect' ? height : undefined,
                    r: width / 2,
                    fill: backgroundColor,
                    stroke: borderColor,
                    strokeWidth: borderWidth,
                },
            },
        }
    }
}
export {
    BasicPorts
}