StructV2/demo/Layouter/PCTree.js

 
SV.registerLayout('PCTree', {

    sourcesPreprocess(sources) {

        let headNodes = sources.filter(item => item.type === 'PCTreeHead');

        for(let i = 0; i < headNodes.length; i++){

            let dataNode = {
                type: 'PCTreePreHead',
                id: headNodes[i].id + '_0',
                data: headNodes[i].preData,
                indexLeft: headNodes[i].index,
                root: headNodes[i].root
            }
            
            if(dataNode.root){
                dataNode.indexTop = 'data';
                headNodes[i].indexTop = ' parent  firstChild'
            }
            sources.push(dataNode)
        }

        return sources;
    },

    defineOptions() {
        return {
            node: {
                PCTreePreHead: {
                    type: 'rect',
                    label: '[data]',
                    size: [60, 34],
                    labelOptions: {
                        style: { fontSize: 16 }
                    },
                    style: {
                        stroke: '#333',
                        fill: '#95e1d3',
                        offset: 25
                    }
                },
                PCTreeHead: {
                    type: 'two-cell-node',
                    label: '[data]',
                    size: [120, 34],
                    style: {
                        stroke: '#333', 
                        fill: '#95e1d3'
                    }
                },
                PCTreeNode: {
                    type: 'link-list-node',
                    label: '[data]',
                    size: [60, 27],
                    style: {
                        stroke: '#333',
                        fill: '#00AF92'
                    }
                }
            },
            indexLabel: {
                indexTop: { position: 'top' },
                indexLeft: { position: 'left' }
            },
            link: {
                headNext: { 
                    sourceAnchor: 1,
                    targetAnchor: 6,
                    style: {
                        stroke: '#333',
                        endArrow: {
                            path: G6.Arrow.triangle(8, 6, 0), 
                            fill: '#333'
                        },
                        startArrow: {
                            path: G6.Arrow.circle(2, -1), 
                            fill: '#333'
                        }
                    }
                },
                next: {
                    sourceAnchor: 2,
                    targetAnchor: 6,
                    style: {
                        stroke: '#333',
                        endArrow: {
                            path: G6.Arrow.triangle(8, 6, 0), 
                            fill: '#333'
                        },
                        startArrow: {
                            path: G6.Arrow.circle(2, -1), 
                            fill: '#333'
                        }
                    }
                }
            },
            marker: {
                external: {
                    type: 'pointer',
                    anchor: 0,
                    offset: 8,
                    style: {
                        fill: '#f08a5d'
                    }
                }
            },
            layout: {
                xInterval: 50,
                yInterval: 86
            },
            behavior: {
                dragNode: ['PCTreeNode']
            }
        };
    },

    //判断node节点是否之前布局过
    isUnique(value, allNodeIdValue){
        let re = new RegExp("" + value);
        return !re.test(allNodeIdValue);
    },
    
    /**
     * 对子树进行递归布局
     * @param node 
     * @param parent 
     */
    layoutItem(node, prev, layoutOptions, allNodeId) {
        if(!node) {
            return null;
        }
        let width = node.get('size')[0],
            idValue = node.id.split('(')[1].slice(0, -1);
        
        //有y型链表的情况不用再布局
        if(this.isUnique(idValue, allNodeId.value)){
            if(prev) {
                node.set('y', prev.get('y'));
                node.set('x', prev.get('x') + layoutOptions.xInterval + width);
            }
    
            allNodeId.value += idValue;
    
            if(node.next) {
                this.layoutItem(node.next, node, layoutOptions, allNodeId);
            }
        }
    },  

    layout(elements, layoutOptions) {
        let headNode = elements.filter(item => item.type === 'PCTreeHead'),
            preHeadNode =  elements.filter(item => item.type === 'PCTreePreHead'),
            roots = elements.filter(item => item.type === 'PCTreeNode' && item.root),
            height = headNode[0].get('size')[1],
            width = headNode[0].get('size')[0],
            i,
            allNodeId = { value: ''};  //引用类型用于传参
    
        for(i = 0; i < headNode.length; i++) {
            let node = headNode[i],
                preNode = preHeadNode[i];

            node.set({
                x:  0,
                y: i * height
            });

            preNode.set({
                x:  width  / 4,
                y:  (i + 1) * height
            })

            if(node.headNext) {
                let y = node.get('y') + height - node.headNext.get('size')[1],
                    x = width + layoutOptions.xInterval * 2;

                node.headNext.set({ x, y });
                this.layoutItem(node.headNext, null, layoutOptions, allNodeId);
            }
        }

        for(i = 0; i < roots.length; i++) {
            let nodeWidth = roots[0].get('size')[0],
                nodeInternalSum = i * (nodeWidth + layoutOptions.xInterval);

            roots[i].set({
                x: headNode[0].get('x') + width + layoutOptions.xInterval * 2 + nodeInternalSum, 
                y: headNode[0].get('y') - layoutOptions.yInterval 
            })
        }
    }
});