AiDOPWarehouse/Web/src/views/approvalFlow/component/LogicFlow/Register/Nodes/NodeSql.ts

import { HtmlNode, HtmlNodeModel, h } from '@logicflow/core';

class SqlNode extends HtmlNode {
    /**
     * 1.1.7版本后支持在view中重写锚点形状。
     * 重写锚点新增
     */
    getAnchorShape(anchorData) {
        const { x, y, type } = anchorData;
        return h('rect', {
            x: x - 5,
            y: y - 5,
            width: 10,
            height: 10,
            className: `custom-anchor ${type === 'left' ? 'incomming-anchor' : 'outgoing-anchor'
                }`,
        });
    }
    setHtml(rootEl) {
        rootEl.innerHTML = '';
        const {
            properties: { fields, tableName },
        } = this.props.model;
        rootEl.setAttribute('class', 'table-container');
        const container = document.createElement('div');
        container.className = `table-node table-color-${Math.ceil(
            Math.random() * 4,
        )}`;
        const tableNameElement = document.createElement('div');
        tableNameElement.innerText = tableName;
        tableNameElement.className = 'table-name';
        container.appendChild(tableNameElement);
        const fragment = document.createDocumentFragment();
        for (let i = 0; i < fields.length; i++) {
            const item = fields[i];
            const itemElement = document.createElement('div');
            itemElement.className = 'table-feild';
            const itemKey = document.createElement('span');
            itemKey.innerText = item.key;
            const itemType = document.createElement('span');
            itemType.innerText = item.type;
            itemType.className = 'feild-type';
            itemElement.appendChild(itemKey);
            itemElement.appendChild(itemType);
            fragment.appendChild(itemElement);
        }
        container.appendChild(fragment);
        rootEl.appendChild(container);
    }
}

class SqlNodeModel extends HtmlNodeModel {
    /**
     * 给model自定义添加字段方法
     */
    addField(item) {
        this.properties.fields.unshift(item);
        this.setAttributes();
        // 为了保持节点顶部位置不变，在节点变化后，对节点进行一个位移,位移距离为添加高度的一半。
        this.move(0, 24 / 2);
        // 更新节点连接边的path
        this.incoming.edges.forEach((egde) => {
            // 调用自定义的更新方案
            egde.updatePathByAnchor();
        });
        this.outgoing.edges.forEach((edge) => {
            // 调用自定义的更新方案
            edge.updatePathByAnchor();
        });
    }
    getOutlineStyle() {
        const style = super.getOutlineStyle();
        style.stroke = 'none';
        style.hover.stroke = 'none';
        return style;
    }
    // 如果不用修改锚地形状，可以重写颜色相关样式
    getAnchorStyle(anchorInfo) {
        const style = super.getAnchorStyle();
        if (anchorInfo.type === 'left') {
            style.fill = 'red';
            style.hover.fill = 'transparent';
            style.hover.stroke = 'transpanrent';
            style.className = 'lf-hide-default';
        } else {
            style.fill = 'green';
        }
        return style;
    }
    setAttributes() {
        this.width = 200;
        const {
            properties: { fields },
        } = this;
        this.height = 60 + fields.length * 24;
        const circleOnlyAsTarget = {
            message: '只允许从右边的锚点连出',
            validate: (sourceNode, targetNode, sourceAnchor) => {
                return sourceAnchor.type === 'right';
            },
        };
        this.sourceRules.push(circleOnlyAsTarget);
        this.targetRules.push({
            message: '只允许连接左边的锚点',
            validate: (sourceNode, targetNode, sourceAnchor, targetAnchor) => {
                return targetAnchor.type === 'left';
            },
        });
    }
    getDefaultAnchor() {
        const {
            id,
            x,
            y,
            width,
            height,
            isHovered,
            isSelected,
            properties: { fields, isConnection },
        } = this;
        const anchors = [];
        fields.forEach((feild, index) => {
            // 如果是连出，就不显示左边的锚点
            if (isConnection || !(isHovered || isSelected)) {
                anchors.push({
                    x: x - width / 2 + 10,
                    y: y - height / 2 + 60 + index * 24,
                    id: `${id}_${feild.key}_left`,
                    edgeAddable: false,
                    type: 'left',
                });
            }
            if (!isConnection) {
                anchors.push({
                    x: x + width / 2 - 10,
                    y: y - height / 2 + 60 + index * 24,
                    id: `${id}_${feild.key}_right`,
                    type: 'right',
                });
            }
        });
        return anchors;
    }
}

export default {
    type: 'sql-node',
    model: SqlNodeModel,
    view: SqlNode,
};