feat: 优化了index文本配置方式

demoV2/Layouter/AdjoinMatrixGraph.js

@@ -0,0 +1,128 @@
+
+const isNeighbor = function (itemA, itemB) {
+    let neighborA = itemA.neighbor,
+        neighborB = itemB.neighbor;
+
+    if (neighborA === undefined && neighborB === undefined) {
+        return false;
+    }
+
+    if (neighborA && neighborA.includes(itemB.id)) {
+        return true;
+    }
+
+    if (neighborB && neighborB.includes(itemA.id)) {
+        return true;
+    }
+
+    return false;
+}
+
+
+SV.registerLayouter('AdjoinMatrixGraph', {
+
+    sourcesPreprocess(sources) {
+        let dataLength = sources.length;
+        let matrixNodeLength = dataLength * dataLength;
+        let matrixNodes = [];
+        let i, j;
+
+        for (i = 0; i < matrixNodeLength; i++) {
+            matrixNodes.push({
+                id: `mn-${i}`,
+                type: 'matrixNode',
+                indexTop: i < dataLength ? sources[i].id : undefined,
+                indexLeft: i % dataLength === 0?  sources[i / dataLength].id : undefined,
+                data: 0
+            });
+        }
+
+        for (i = 0; i < dataLength; i++) {
+            for (j = 0; j < dataLength; j++) {
+                let itemI = sources[i],
+                    itemJ = sources[j];
+
+                if (itemI.id !== itemJ.id && isNeighbor(itemI, itemJ)) {
+                    matrixNodes[i * dataLength + j].data = 1;
+                }
+            }
+        }
+
+        sources.push(...matrixNodes);
+
+        return sources;
+    },
+
+    defineOptions() {
+        return {
+            element: {
+                default: {
+                    type: 'circle',
+                    label: '[id]',
+                    size: 40,
+                    style: {
+                        stroke: '#333',
+                        fill: '#95e1d3'
+                    }
+                },
+                matrixNode: {
+                    type: 'indexed-node',
+                    label: '[data]',
+                    size: [40, 40],
+                    style: {
+                        stroke: '#333',
+                        fill: '#95e1d3'
+                    },
+                    indexOptions: {
+                        indexTop: { position: 'top' },
+                        indexLeft: { position: 'left' }
+                    }
+                }
+            },
+            link: {
+                neighbor: {
+                    style: {
+                        stroke: '#333'
+                    }
+                }
+            },
+            layout: {
+                radius: 150,
+                interval: 250
+            },
+            behavior: {
+                dragNode: ['default']
+            }
+        };
+    },
+
+    layout(elements, layoutOptions) {
+        let nodes = elements.filter(item => item.type === 'default'),
+            matrixNodes = elements.filter(item => item.type === 'matrixNode'),
+            nodeLength = nodes.length,
+            matrixNodeLength = matrixNodes.length,
+            { interval, radius } = layoutOptions,
+            intervalAngle = 2 * Math.PI / nodes.length,
+            matrixNodeSize = matrixNodes[0].get('size')[0],
+            i;
+
+        const matrixY = -radius,
+              matrixX = interval;
+
+        for (i = 0; i < nodeLength; i++) {
+            let [x, y] = Vector.rotation(-intervalAngle * i, [0, -radius]);
+
+            nodes[i].set({ x, y });
+        }
+
+        for (i = 0; i < matrixNodeLength; i++) {
+            let x = matrixX + (i % nodeLength) * matrixNodeSize;
+                y = matrixY + Math.floor(i / nodeLength) * matrixNodeSize;
+
+            matrixNodes[i].set({ x, y });
+        }
+    }
+});
+
+
+

demoV2/Layouter/AdjoinTableGraph.js

@@ -0,0 +1,236 @@
+
+
+
+SV.registerLayouter('AdjoinTableGraph', {
+
+    sourcesPreprocess(sources, options) {
+        let dataLength = sources.length;
+        let tableHeadNodes = [];
+        let nodeMap = {};
+        let i;
+        
+
+        for (i = 0; i < dataLength; i++) {
+            let graphNode = sources[i];
+
+            tableHeadNodes.push({
+                id: `table-head-node-${i}`,
+                type: 'tableHeadNode',
+                data: graphNode.id
+            });
+
+            nodeMap[graphNode.id] = {
+                node: graphNode,
+                order: i,
+                neighbor: []
+            };
+        }
+
+        Object.keys(nodeMap).map(key => {
+            let nodeData = nodeMap[key],
+                neighbor = nodeData.node.neighbor;
+
+            if (neighbor === undefined) {
+                return;
+            }
+
+            neighbor.forEach((item, index) => {
+                let targetNodeData = nodeMap[item];
+
+                nodeData.neighbor.push({
+                    id: `${key}-table-node-${item}`,
+                    type: 'tableNode',
+                    data: item.toString(),
+                    order: targetNodeData.order
+                });
+
+                targetNodeData.neighbor.push({
+                    id: `${item}-table-node-${key}`,
+                    type: 'tableNode',
+                    data: key.toString(),
+                    order: nodeData.order
+                });
+            });
+
+            Object.keys(nodeMap).map(key => {
+                let nodeData = nodeMap[key],
+                    neighbor = nodeData.neighbor;
+
+                if (neighbor === undefined) {
+                    return;
+                }
+
+                neighbor.sort((n1, n2) => {
+                    return n1.order - n2.order;
+                });
+
+                for(let i = 0; i < neighbor.length; i++) {
+                    if(neighbor[i + 1]) {
+                        neighbor[i].next = `tableNode#${neighbor[i + 1].id}`;
+                    }
+                }
+            });
+
+            tableHeadNodes.forEach(item => {
+                let nodeData = nodeMap[item.data],
+                    neighbor = nodeData.neighbor;
+
+                if(neighbor.length) {
+                    item.headNext = `tableNode#${neighbor[0].id}`;
+                }
+            });
+        });
+
+        sources.push(...tableHeadNodes);
+        Object.keys(nodeMap).map(key => {
+            let nodeData = nodeMap[key],
+                neighbor = nodeData.neighbor;
+            
+            sources.push(...neighbor);
+        });
+
+        return sources;
+    },
+
+    defineOptions() {
+        return {
+            element: {
+                default: {
+                    type: 'circle',
+                    label: '[id]',
+                    size: 40,
+                    style: {
+                        stroke: '#333',
+                        fill: '#95e1d3'
+                    }
+                },
+                tableHeadNode: {
+                    type: 'two-cell-node',
+                    label: '[data]',
+                    size: [70, 40],
+                    style: {
+                        stroke: '#333',
+                        fill: '#95e1d3'
+                    }
+                },
+                tableNode: {
+                    type: 'link-list-node',
+                    label: '[data]',
+                    size: [60, 30],
+                    style: {
+                        stroke: '#333',
+                        fill: '#95e1d3'
+                    }
+                }
+            },
+            link: {
+                neighbor: {
+                    style: {
+                        stroke: '#333'
+                    }
+                },
+                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'
+                        }
+                    }
+                }
+            },
+            layout: {
+                radius: 150,
+                interval: 250,
+                xInterval: 50,
+                yInterval: 50
+            },
+            behavior: {
+                dragNode: ['default', 'tableNode']
+            }
+        };
+    },
+
+    /**
+     * 对子树进行递归布局
+     * @param node 
+     * @param parent 
+     */
+     layoutItem(node, prev, layoutOptions) {
+        if(!node) {
+            return null;
+        }
+
+        let width = node.get('size')[0];
+
+        if(prev) {
+            node.set('y', prev.get('y'));
+            node.set('x', prev.get('x') + layoutOptions.xInterval + width);
+        }
+
+        if(node.next) {
+            this.layoutItem(node.next, node, layoutOptions);
+        }
+    },  
+
+    layout(elements, layoutOptions) {
+        let nodes = elements.filter(item => item.type === 'default'),
+            tableHeadNode = elements.filter(item => item.type === 'tableHeadNode'),
+            nodeLength = nodes.length,
+            { radius } = layoutOptions,
+            intervalAngle = 2 * Math.PI / nodes.length,
+            i;
+
+        for (i = 0; i < nodeLength; i++) {
+            let [x, y] = Vector.rotation(-intervalAngle * i, [0, -radius]);
+
+            nodes[i].set({ x, y });
+        }
+
+        const tableY = -radius,
+              tableX = radius + 20;
+
+        for(i = 0; i < tableHeadNode.length; i++) {
+            let node = tableHeadNode[i],
+                height = node.get('size')[1];
+
+            node.set({
+                x: tableX,
+                y: tableY + node.get('y') + i * height
+            });
+
+            if(node.headNext) {
+                let y = node.get('y') + height - node.headNext.get('size')[1],
+                    x = tableX + layoutOptions.xInterval * 2.5;
+
+                node.headNext.set({ x, y });
+                this.layoutItem(node.headNext, null, layoutOptions);
+            }
+        }
+
+    }
+});
+
+
+

demoV2/Layouter/Array.js

@@ -19,11 +19,15 @@ SV.registerLayouter('Array', {
             element: { 
                 default: {
                     type: 'indexed-node',
-                    label: '[data]',
+                    label: '[id]',
                     size: [60, 30],
                     style: {
                         stroke: '#333',
                         fill: '#95e1d3'
+                    },
+                    indexOptions: {
+                        index: { position: 'bottom' },
+                        indexTop: { position: 'top' }
                     }
                 }
             },

demoV2/Layouter/ChainHashTable.js

@@ -130,4 +130,3 @@ SV.registerLayouter('ChainHashTable', {
 
 
 
-

demoV2/Layouter/Stack.js

@@ -10,12 +10,6 @@ SV.registerLayouter('Stack', {
             delete stackBottomNode.external;
         }
 
-        if(options.layout.indexPosition) {
-            sources.forEach(item => {
-                item.indexPosition = options.layout.indexPosition;
-            });
-        }
-
         return sources;
     },
 
@@ -55,9 +49,6 @@ SV.registerLayouter('Stack', {
                     }
                 }
             },
-            layout: {
-                indexPosition: 'left'
-            },
             behavior: {
                 dragNode: false
             }

demoV2/demo2.html

@@ -75,6 +75,8 @@
     <script src="./Layouter/Array.js"></script>
     <script src="./Layouter/HashTable.js"></script>
     <script src="./Layouter/LinkStack.js"></script>
+    <script src="./Layouter/AdjoinMatrixGraph.js"></script>
+    <script src="./Layouter/AdjoinTableGraph.js"></script>
     <script>
 
 
@@ -88,35 +90,20 @@
 
 
         let data = [{
-            "LinkStack1": {
+            "g1": {
                 "data": [
-                    {
+                    { id: 0, neighbor: [4, 3] }, { id: 1, neighbor: [0, 3] }, { id: 2, neighbor: [4, 0] },
-                        "id": 0,
+                    { id: 3, neighbor: [5, 2] }, { id: 4 },
-                        external: 'gg'
+                    { id: 5, neighbor: [0, 1] }
-                    }
                 ],
-                "layouter": "LinkStack"
+                // "layouter": "AdjoinTableGraph"
-            }
+                "layouter": "AdjoinMatrixGraph"
-        }, {
-            "LinkStack1": {
-                "data": [
-                    {
-                        "id": 0
-                    },
-                    {
-                        "id": 1,
-                        "freed": true,
-                    },
-                    {
-                        "freed": true,
-                        "id": 2
-                    }
-                ],
-                "layouter": "LinkStack"
             }
         }];
 
         
+
+
         let dataIndex = 0,
             curData = data[dataIndex];
 

src/Model/modelConstructor.ts

@@ -1,6 +1,6 @@
 import { Util } from "../Common/util";
 import { Engine } from "../engine";
-import { ElementOption, Layouter, LayoutGroupOptions, LinkOption, MarkerOption } from "../options";
+import { ElementIndexOption, ElementOption, Layouter, LayoutGroupOptions, LinkOption, MarkerOption } from "../options";
 import { sourceLinkData, SourceElement, LinkTarget, Sources } from "../sources";
 import { SV } from "../StructV";
 import { Element, Link, Marker, Model } from "./modelData";
@@ -210,6 +210,44 @@ export class ModelConstructor {
         return markerList;
     }
 
+    /**
+     * 求解label文本
+     * @param label 
+     * @param sourceElement 
+     */
+    private resolveElementLabel(label: string | string[], sourceElement: SourceElement): string {
+        let targetLabel: any = '';
+
+        if (Array.isArray(label)) {
+            targetLabel = label.map(item => this.parserElementContent(sourceElement, item) ?? '');
+        }
+        else {
+            targetLabel = this.parserElementContent(sourceElement, label);
+        }
+
+        if(targetLabel === 'undefined') {
+            targetLabel = '';
+        }
+
+        return targetLabel ?? '';
+    }
+
+    /**
+     * 求解index文本
+     * @param indexOptions 
+     * @param sourceElement 
+     */
+    private resolveElementIndex(indexOptions: ElementIndexOption, sourceElement: SourceElement) {
+        if(indexOptions === undefined || indexOptions === null) {
+            return;
+        }
+
+        Object.keys(indexOptions).map(key => {
+            let indexOptionItem = indexOptions[key];
+            indexOptionItem.value = sourceElement[key] ?? '';
+        });
+    }
+
     /**
      * 元素工厂，创建Element
      * @param sourceElement
@@ -220,34 +258,17 @@ export class ModelConstructor {
      */
     private createElement(sourceElement: SourceElement, elementName: string, groupName: string, layouterName: string, options: ElementOption): Element {
         let element: Element = undefined,
-            label: string | string[] = '',
+            label: string | string[] = this.resolveElementLabel(options.label, sourceElement),
             id = elementName + '.' + sourceElement.id.toString();
 
-        if(options.label) {
-            if(Array.isArray(options.label)) {
-                label = options.label.map(item => {
-                    let res = this.parserElementContent(sourceElement, item);
-
-                    if(res === null || label === 'undefined') {
-                        return '';
-                    }
-
-                    return res;
-                });
-            }
-            else {
-                label = this.parserElementContent(sourceElement, options.label);
-
-                if(label === null || label === 'undefined') {
-                    label = '';
-                }
-            }
-        }
 
         element = new Element(id, elementName, groupName, layouterName, sourceElement);
         element.initProps(options);
         element.set('label', label);
         element.sourceElement = sourceElement;
+        // 处理element的index文本
+        this.resolveElementIndex(element.get('indexCfg'), sourceElement);
+        console.log(element.get('indexCfg'));
 
         return element;
     }

src/Model/modelData.ts

@@ -1,5 +1,5 @@
 import { Util } from "../Common/util";
-import { ElementLabelOption, ElementOption, LinkLabelOption, LinkOption, MarkerOption, Style } from "../options";
+import { ElementIndexOption, ElementLabelOption, ElementOption, LinkLabelOption, LinkOption, MarkerOption, Style } from "../options";
 import { SourceElement } from "../sources";
 import { BoundingRect } from "../Common/boundingRect";
 import { SV } from './../StructV';
@@ -16,6 +16,7 @@ export interface G6NodeModel {
     label: string | string[];
     style: Style;
     labelCfg: ElementLabelOption;
+    indexCfg?: ElementIndexOption;
     markerId: string; 
     SVLayouter: string;
     SVModelType: string;
@@ -211,6 +212,7 @@ export class Element extends Model {
             label: option.label,
             style: Util.objectClone<Style>(option.style),
             labelCfg: Util.objectClone<ElementLabelOption>(option.labelOptions),
+            indexCfg: Util.objectClone<ElementIndexOption>(option.indexOptions),
             markerId: null,
             SVLayouter: this.layouterName,
             SVModelType: 'element',

src/RegisteredShape/indexedNode.ts

@@ -38,18 +38,20 @@ export default G6.registerNode('indexed-node', {
             });
         }
 
-        if(cfg.index !== undefined) {
+        const indexCfg = cfg.indexCfg;
-            const offset = 20,
+        const offset = 20;
-                  indexPosition = cfg.indexPosition || 'bottom',
+        const indexPositionMap: { [key: string]: (width: number, height: number) => { x: number, y: number } } = {
-                  indexPositionMap: { [key: string]: (width: number, height: number) => { x: number, y: number } } = {
             top: (width: number, height: number) => ({ x: width, y: height / 2 - offset }),
             right: (width: number, height: number) => ({ x: width * 1.5 + offset, y: height }),
             bottom: (width: number, height: number) => ({ x: width, y: height * 1.5 + offset }),
             left: (width: number, height: number) => ({ x: width / 2 - offset, y: height })
         };
 
-            const { x: indexX, y: indexY } = indexPositionMap[indexPosition](width, height);
+        if (indexCfg !== undefined) {
-
+            Object.keys(indexCfg).map(key => {
+                let indexCfgItem = indexCfg[key];
+                let position = indexCfgItem.position || 'bottom';
+                let { x: indexX, y: indexY } = indexPositionMap[position](width, height);
 
                 group.addShape('text', {
                     attrs: {
@@ -57,13 +59,15 @@ export default G6.registerNode('indexed-node', {
                         y: indexY,
                         textAlign: 'center',
                         textBaseline: 'middle',
-                    text: cfg.index.toString(),
+                        text: indexCfgItem.value.toString(),
                         fill: '#bbb',
                         fontSize: 14,
-                    fontStyle: 'italic'
+                        fontStyle: 'italic',
+                        ...indexCfgItem.style
                     },
                     name: 'index-text'
                 });
+            });
         }
 
         return rect;

src/options.ts

@@ -22,6 +22,13 @@ export interface ElementLabelOption {
 };
 
 
+export interface ElementIndexOption extends ElementLabelOption {
+    position: 'top' | 'right' | 'bottom' | 'left';
+    value: string;
+    style: Style;
+}
+
+
 export interface LinkLabelOption {
     refX: number;
     refY: number;
@@ -39,6 +46,7 @@ export interface ElementOption {
     anchorPoints: [number, number];
     label: string | string[];
     labelOptions: ElementLabelOption;
+    indexOptions: ElementIndexOption;
     style: Style;
 }