diff --git a/copyDist2Anyview.js b/copyDist2Anyview.js
index 41bd22d..5550fb7 100644
--- a/copyDist2Anyview.js
+++ b/copyDist2Anyview.js
@@ -1,6 +1,6 @@
 const fs = require('fs');
-const sourcePath = 'D:\\个人项目\\StructV2\\dist\\sv.js';
-const targetPath = 'D:\\个人项目\\froend_student\\src\\pages\\student\\assets\\js\\sv.js'
+const sourcePath = 'E:\\研究生\\StructV2\\dist\\sv.js';
+const targetPath = 'E:\\研究生\\froend_student\\src\\pages\\student\\assets\\js\\sv.js'
 
 
 function COPY(from, to) {
diff --git a/demo/Layouter/AdjoinMatrixGraph.js b/demo/Layouter/AdjoinMatrixGraph.js
index 9cc79c6..7c09bb4 100644
--- a/demo/Layouter/AdjoinMatrixGraph.js
+++ b/demo/Layouter/AdjoinMatrixGraph.js
@@ -1,5 +1,4 @@
-
-const isNeighbor = function (itemA, itemB) {
+const isNeighbor = function(itemA, itemB) {
     let neighborA = itemA.neighbor,
         neighborB = itemB.neighbor;
 
@@ -21,33 +20,33 @@ const isNeighbor = function (itemA, itemB) {
 
 SV.registerLayout('AdjoinMatrixGraph', {
     sourcesPreprocess(sources) {
-        let dataLength = sources.length;
-        let matrixNodeLength = dataLength * dataLength;
-        let matrixNodes = [];
-        let i, j;
+        // 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 < 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];
+        // 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;
-                }
-            }
-        }
+        //         if (itemI.id !== itemJ.id && isNeighbor(itemI, itemJ)) {
+        //             matrixNodes[i * dataLength + j].data = 1;
+        //         }
+        //     }
+        // }
 
-        sources.push(...matrixNodes);
+        // sources.push(...matrixNodes);
 
         return sources;
     },
@@ -106,7 +105,7 @@ SV.registerLayout('AdjoinMatrixGraph', {
             i;
 
         const matrixY = -radius,
-              matrixX = interval;
+            matrixX = interval;
 
         for (i = 0; i < nodeLength; i++) {
             let [x, y] = Vector.rotation(-intervalAngle * i, [0, -radius]);
@@ -116,12 +115,9 @@ SV.registerLayout('AdjoinMatrixGraph', {
 
         for (i = 0; i < matrixNodeLength; i++) {
             let x = matrixX + (i % nodeLength) * matrixNodeSize;
-                y = matrixY + Math.floor(i / nodeLength) * matrixNodeSize;
+            y = matrixY + Math.floor(i / nodeLength) * matrixNodeSize;
 
             matrixNodes[i].set({ x, y });
         }
     }
-});
-
-
-
+});
\ No newline at end of file
diff --git a/demo/Layouter/AdjoinTableGraph.js b/demo/Layouter/AdjoinTableGraph.js
index af79bd0..8d3987e 100644
--- a/demo/Layouter/AdjoinTableGraph.js
+++ b/demo/Layouter/AdjoinTableGraph.js
@@ -1,95 +1,93 @@
-
-
-
 SV.registerLayout('AdjoinTableGraph', {
 
-    sourcesPreprocess(sources, options) {
-        let dataLength = sources.length;
-        let tableHeadNodes = [];
-        let nodeMap = {};
-        let i;
+    sourcesPreprocess(sources, options, group) {
         
+        // 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
-            });
+        // for (i = 0; i < dataLength; i++) {
+        //     let graphNode = sources[i];
 
-            nodeMap[graphNode.id] = {
-                node: graphNode,
-                order: i,
-                neighbor: []
-            };
-        }
+        //     tableHeadNodes.push({
+        //         id: `table-head-node-${i}`,
+        //         type: 'tableHeadNode',
+        //         data: graphNode.id
+        //     });
 
-        Object.keys(nodeMap).map(key => {
-            let nodeData = nodeMap[key],
-                neighbor = nodeData.node.neighbor;
+        //     nodeMap[graphNode.id] = {
+        //         node: graphNode,
+        //         order: i,
+        //         neighbor: []
+        //     };
+        // }
 
-            if (neighbor === undefined) {
-                return;
-            }
+        // Object.keys(nodeMap).map(key => {
+        //     let nodeData = nodeMap[key],
+        //         neighbor = nodeData.node.neighbor;
 
-            neighbor.forEach((item, index) => {
-                let targetNodeData = nodeMap[item];
+        //     if (neighbor === undefined) {
+        //         return;
+        //     }
 
-                nodeData.neighbor.push({
-                    id: `${key}-table-node-${item}`,
-                    type: 'tableNode',
-                    data: item.toString(),
-                    order: targetNodeData.order
-                });
+        //     neighbor.forEach((item, index) => {
+        //         let targetNodeData = nodeMap[item];
 
-                targetNodeData.neighbor.push({
-                    id: `${item}-table-node-${key}`,
-                    type: 'tableNode',
-                    data: key.toString(),
-                    order: nodeData.order
-                });
-            });
+        //         nodeData.neighbor.push({
+        //             id: `${key}-table-node-${item}`,
+        //             type: 'tableNode',
+        //             data: item.toString(),
+        //             order: targetNodeData.order
+        //         });
 
-            Object.keys(nodeMap).map(key => {
-                let nodeData = nodeMap[key],
-                    neighbor = nodeData.neighbor;
+        //         targetNodeData.neighbor.push({
+        //             id: `${item}-table-node-${key}`,
+        //             type: 'tableNode',
+        //             data: key.toString(),
+        //             order: nodeData.order
+        //         });
+        //     });
 
-                if (neighbor === undefined) {
-                    return;
-                }
+        //     Object.keys(nodeMap).map(key => {
+        //         let nodeData = nodeMap[key],
+        //             neighbor = nodeData.neighbor;
 
-                neighbor.sort((n1, n2) => {
-                    return n1.order - n2.order;
-                });
+        //         if (neighbor === undefined) {
+        //             return;
+        //         }
 
-                for(let i = 0; i < neighbor.length; i++) {
-                    if(neighbor[i + 1]) {
-                        neighbor[i].next = `tableNode#${neighbor[i + 1].id}`;
-                    }
-                }
-            });
+        //         neighbor.sort((n1, n2) => {
+        //             return n1.order - n2.order;
+        //         });
 
-            tableHeadNodes.forEach(item => {
-                let nodeData = nodeMap[item.data],
-                    neighbor = nodeData.neighbor;
+        //         for (let i = 0; i < neighbor.length; i++) {
+        //             if (neighbor[i + 1]) {
+        //                 neighbor[i].next = `tableNode#${neighbor[i + 1].id}`;
+        //             }
+        //         }
+        //     });
 
-                if(neighbor.length) {
-                    item.headNext = `tableNode#${neighbor[0].id}`;
-                }
-            });
-        });
+        //     tableHeadNodes.forEach(item => {
+        //         let nodeData = nodeMap[item.data],
+        //             neighbor = nodeData.neighbor;
 
-        sources.push(...tableHeadNodes);
-        Object.keys(nodeMap).map(key => {
-            let nodeData = nodeMap[key],
-                neighbor = nodeData.neighbor;
-            
-            sources.push(...neighbor);
-        });
+        //         if (neighbor.length) {
+        //             item.headNext = `tableNode#${neighbor[0].id}`;
+        //         }
+        //     });
+        // });
 
-        return sources;
+        // sources.push(...tableHeadNodes);
+        // Object.keys(nodeMap).map(key => {
+        //     let nodeData = nodeMap[key],
+        //         neighbor = nodeData.neighbor;
+
+        //     sources.push(...neighbor);
+        // });
+
+        // return sources;
     },
 
     defineOptions() {
@@ -129,17 +127,17 @@ SV.registerLayout('AdjoinTableGraph', {
                         stroke: '#333'
                     }
                 },
-                headNext: { 
+                headNext: {
                     sourceAnchor: 1,
                     targetAnchor: 6,
                     style: {
                         stroke: '#333',
                         endArrow: {
-                            path: G6.Arrow.triangle(8, 6, 0), 
+                            path: G6.Arrow.triangle(8, 6, 0),
                             fill: '#333'
                         },
                         startArrow: {
-                            path: G6.Arrow.circle(2, -1), 
+                            path: G6.Arrow.circle(2, -1),
                             fill: '#333'
                         }
                     }
@@ -150,11 +148,11 @@ SV.registerLayout('AdjoinTableGraph', {
                     style: {
                         stroke: '#333',
                         endArrow: {
-                            path: G6.Arrow.triangle(8, 6, 0), 
+                            path: G6.Arrow.triangle(8, 6, 0),
                             fill: '#333'
                         },
                         startArrow: {
-                            path: G6.Arrow.circle(2, -1), 
+                            path: G6.Arrow.circle(2, -1),
                             fill: '#333'
                         }
                     }
@@ -177,22 +175,22 @@ SV.registerLayout('AdjoinTableGraph', {
      * @param node 
      * @param parent 
      */
-     layoutItem(node, prev, layoutOptions) {
-        if(!node) {
+    layoutItem(node, prev, layoutOptions) {
+        if (!node) {
             return null;
         }
 
         let width = node.get('size')[0];
 
-        if(prev) {
+        if (prev) {
             node.set('y', prev.get('y'));
             node.set('x', prev.get('x') + layoutOptions.xInterval + width);
         }
 
-        if(node.next) {
+        if (node.next) {
             this.layoutItem(node.next, node, layoutOptions);
         }
-    },  
+    },
 
     layout(elements, layoutOptions) {
         let nodes = elements.filter(item => item.type === 'default'),
@@ -209,9 +207,9 @@ SV.registerLayout('AdjoinTableGraph', {
         }
 
         const tableY = -radius,
-              tableX = radius + 20;
+            tableX = radius + 20;
 
-        for(i = 0; i < tableHeadNode.length; i++) {
+        for (i = 0; i < tableHeadNode.length; i++) {
             let node = tableHeadNode[i],
                 height = node.get('size')[1];
 
@@ -220,7 +218,7 @@ SV.registerLayout('AdjoinTableGraph', {
                 y: tableY + node.get('y') + i * height
             });
 
-            if(node.headNext) {
+            if (node.headNext) {
                 let y = node.get('y') + height - node.headNext.get('size')[1],
                     x = tableX + layoutOptions.xInterval * 2.5;
 
@@ -230,7 +228,4 @@ SV.registerLayout('AdjoinTableGraph', {
         }
 
     }
-});
-
-
-
+});
\ No newline at end of file
diff --git a/demo/Layouter/DirectedAdjoinMatrixGraph.js b/demo/Layouter/DirectedAdjoinMatrixGraph.js
new file mode 100644
index 0000000..4f84411
--- /dev/null
+++ b/demo/Layouter/DirectedAdjoinMatrixGraph.js
@@ -0,0 +1,146 @@
+const isNeighborDAM = 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;
+    }
+
+    return false;
+}
+
+SV.registerLayout('DirectedAdjoinMatrixGraph', {
+    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].data : undefined,
+                indexLeft: i % dataLength === 0 ? sources[i / dataLength].data : 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 && isNeighborDAM(itemI, itemJ)) {
+                    matrixNodes[i * dataLength + j].data = 1;
+                }
+            }
+        }
+
+        sources.push(...matrixNodes);
+
+        return sources;
+    },
+
+    defineOptions() {
+        return {
+            node: {
+                default: {
+                    type: 'circle',
+                    size: 40,
+                    label: '[data]',
+                    style: {
+                        fill: '#95e1d3',
+                        stroke: '#333',
+                        cursor: 'pointer',
+                        backgroundFill: '#ddd'
+                    },
+                    labelOptions: {
+                        style: { fontSize: 16 }
+                    }
+                },
+                matrixNode: {
+                    type: 'array-node',
+                    size: [40, 40],
+                    label: '[data]',
+                    style: {
+                        fill: '#95e1d3',
+                        stroke: '#333',
+                        cursor: 'pointer',
+                        backgroundFill: '#ddd'
+                    },
+                    labelOptions: {
+                        style: { fontSize: 16 }
+                    }
+                }
+            },
+            link: {
+                neighbor: {
+                    type: 'line',
+                    style: {
+                        endArrow: 'default',
+                        lineAppendWidth: 10,
+                        lineWidth: 1.6,
+                        stroke: '#333',
+                    }
+                }
+            },
+            indexLabel: {
+                indexTop: {
+                    position: 'top',
+                    style: {
+                        fill: '#bbb'
+                    }
+                },
+                indexLeft: {
+                    position: 'left',
+                    style: {
+                        fill: '#bbb'
+                    }
+                }
+            },
+            addressLabel: {
+                style: {
+                    fill: '#999'
+                }
+            },
+            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 });
+        }
+    }
+});
\ No newline at end of file
diff --git a/src/Model/SVLink.ts b/src/Model/SVLink.ts
index 974075c..5ec776d 100644
--- a/src/Model/SVLink.ts
+++ b/src/Model/SVLink.ts
@@ -66,6 +66,7 @@ export class SVLink extends SVModel {
 			style: Util.objectClone<Style>(options.style),
 			labelCfg,
 			curveOffset: options.curveOffset,
+      loopCfg: options.loopCfg,
 		};
 	}
 
diff --git a/src/Model/modelConstructor.ts b/src/Model/modelConstructor.ts
index f996604..be73d4b 100644
--- a/src/Model/modelConstructor.ts
+++ b/src/Model/modelConstructor.ts
@@ -1,3 +1,4 @@
+import { Graph } from '@antv/g6';
 import { Group } from '../Common/group';
 import { Util } from '../Common/util';
 import { Engine } from '../engine';
@@ -67,13 +68,15 @@ export class ModelConstructor {
 				return;
 			}
 
+      
 			const options: LayoutGroupOptions = layoutCreator.defineOptions(sourceGroup.data),
-				sourceData = layoutCreator.sourcesPreprocess(sourceGroup.data, options),
+				sourceData = layoutCreator.sourcesPreprocess(sourceGroup.data, options, group),
 				nodeOptions = options.node || options['element'] || {},
 				markerOptions = options.marker || {},
 				indexLabelOptions = options.indexLabel || {},
 				addressLabelOption = options.addressLabel || {};
-
+        
+        
 			nodeList = this.constructNodes(group, layout, nodeOptions, sourceData);
 			appendageList.push(...this.constructMarkers(group, layout, markerOptions, nodeList));
 			appendageList.push(...this.constructIndexLabel(group, layout, indexLabelOptions, nodeList));
@@ -230,7 +233,7 @@ export class ModelConstructor {
 				// 若没有指针字段的结点则跳过
 				if (value === undefined || value === null) continue;
 
-				let id = `${group}[${name}(${value})]`,
+				let id = `${group}[${name}(${value}-${node.id})]`,
 					indexLabel = new SVIndexLabel(
 						id,
 						name,
@@ -378,7 +381,13 @@ export class ModelConstructor {
 		index: number,
 		options: LinkOption
 	): SVLink {
-		let id = `${linkName}{${node.id}-${target.id}}#${index}`;
+    let id;
+    // 如果数据结构是图，则不需要index来区分是哪条边
+    if (layout.indexOf('Graph') !== -1) {
+      id = `${linkName}{${node.id}-${target.id}}`;
+    } else {
+      id = `${linkName}{${node.id}-${target.id}}#${index}`;
+    }
 		return new SVLink(id, linkName, group, layout, node, target, index, options);
 	}
 
diff --git a/src/View/viewContainer.ts b/src/View/viewContainer.ts
index 540b30e..38cdbdd 100644
--- a/src/View/viewContainer.ts
+++ b/src/View/viewContainer.ts
@@ -28,6 +28,10 @@ export class ViewContainer {
 	private prevModelList: SVModel[];
 	private accumulateLeakModels: SVModel[];
 
+  private preIsFirstDebug: boolean[]; //存储以前的handleUpdate
+  private stackAddress: number //指向preHandleUpdate的栈地址
+  private preCount: number; //点击上一步的次数
+
 	public hasLeak: boolean;
 	public leakAreaY: number;
 	public lastLeakAreaTranslateY: number;
@@ -48,6 +52,9 @@ export class ViewContainer {
 		this.brushSelectedModels = [];
 		this.clickSelectNode = null;
 		this.lastLeakAreaTranslateY = 0;
+    this.preIsFirstDebug = [];
+    this.preCount = 0;
+    this.stackAddress = 0;
 
 		const g6Instance = this.renderer.getG6Instance(),
 			leakAreaHeight = this.engine.viewOptions.leakAreaHeight,
@@ -191,10 +198,21 @@ export class ViewContainer {
       this.setPrevUpdateId([])
 			return;
 		}
-
 		// 判断是否需要进行泄漏区的比较
 		let isDiffLeak = handleUpdate?.isEnterFunction || handleUpdate?.hasTriggerLastStep;
 
+
+    // if (!handleUpdate?.hasTriggerLastStep) {
+    //   this.preCount++;
+    // } else {
+    //   this.preCount--;
+    // }
+    // //preCount用来判断是否是第一次进入调试，因为刚开始调试后点击下一步再点上一步，后端给回的isFirstDebug = false，因改为true
+    // if (this.preCount === 1 || this.preCount === 2) {
+    //   console.log(this.preCount);
+      
+    //   handleUpdate.isFirstDebug = true;
+    // }  
 		const diffResult = this.reconcile.diff(
 				this.layoutGroupTable,
 				this.prevModelList,
diff --git a/src/engine.ts b/src/engine.ts
index 430b784..8b06ec4 100644
--- a/src/engine.ts
+++ b/src/engine.ts
@@ -87,6 +87,8 @@ export class Engine {
 			layoutGroupTable = this.modelConstructor.construct(source);
 		}
 
+  
+    
 		// 2 渲染（使用g6进行渲染）
 		this.viewContainer.render(layoutGroupTable, isSameSources, handleUpdate);
 	}
diff --git a/src/options.ts b/src/options.ts
index cf44663..f3108a8 100644
--- a/src/options.ts
+++ b/src/options.ts
@@ -65,6 +65,7 @@ export interface LinkOption extends ModelOption {
     label: string;
     curveOffset: number;
     labelOptions: LinkLabelOption;
+    loopCfg: Object;
 }
 
 
@@ -130,7 +131,7 @@ export interface EngineOptions {
 
 export interface LayoutCreator {
     defineOptions(sourceData: SourceNode[]): LayoutGroupOptions;
-    sourcesPreprocess?(sourceData: SourceNode[], options: LayoutGroupOptions): SourceNode[];
+    sourcesPreprocess?(sourceData: SourceNode[], options: LayoutGroupOptions, group: string): SourceNode[];
     defineLeakRule?(models: SVNode[]): SVNode[];
     layout(nodes: SVNode[], layoutOptions: LayoutOptions);
     [key: string]: any;