From 069cfd6597ea3b636e045e87731fa90d62c69ca6 Mon Sep 17 00:00:00 2001
From: cjc <431909623@qq.com>
Date: Wed, 23 Feb 2022 19:59:43 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E5=A4=8D=E4=BA=8C=E5=8F=89=E6=A0=91?=
 =?UTF-8?q?=E6=8C=87=E9=92=88=E5=9B=9E=E6=8C=87=E4=B8=8A=E5=B1=82=E7=BB=93?=
 =?UTF-8?q?=E7=82=B9=E9=97=AE=E9=A2=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 demoV2/Layouter/BinaryTree.js |  63 ++---
 demoV2/demo2.html             | 436 +++++++++++++++++++++-------------
 2 files changed, 301 insertions(+), 198 deletions(-)

diff --git a/demoV2/Layouter/BinaryTree.js b/demoV2/Layouter/BinaryTree.js
index eff4013..6a1e602 100644
--- a/demoV2/Layouter/BinaryTree.js
+++ b/demoV2/Layouter/BinaryTree.js
@@ -1,9 +1,7 @@
-
-
 SV.registerLayout('BinaryTree', {
     defineOptions() {
         return {
-            element: { 
+            element: {
                 default: {
                     type: 'binary-tree-node',
                     size: [60, 30],
@@ -16,9 +14,9 @@ SV.registerLayout('BinaryTree', {
                 }
             },
             link: {
-                child: { 
+                child: {
                     type: 'line',
-                    sourceAnchor: index => index === 0? 3: 1,
+                    sourceAnchor: index => index === 0 ? 3 : 1,
                     targetAnchor: 0,
                     style: {
                         stroke: '#333',
@@ -26,7 +24,7 @@ SV.registerLayout('BinaryTree', {
                         cursor: 'pointer',
                         endArrow: 'default',
                         startArrow: {
-                            path: G6.Arrow.circle(2, -1), 
+                            path: G6.Arrow.circle(2, -1),
                             fill: '#333'
                         }
                     }
@@ -62,7 +60,7 @@ SV.registerLayout('BinaryTree', {
      */
     layoutItem(node, parent, index, layoutOptions) {
         // 次双亲不进行布局
-        if(!node) {
+        if (!node) {
             return null;
         }
 
@@ -71,49 +69,56 @@ SV.registerLayout('BinaryTree', {
             height = bound.height,
             group = new Group(node);
 
-        if(parent) {
+        if (node.visited) {
+            return;
+        }
+
+
+        if (parent) {
             node.set('y', parent.get('y') + layoutOptions.yInterval + height);
 
             // 左节点
-            if(index === 0) {
+            if (index === 0) {
                 node.set('x', parent.get('x') - layoutOptions.xInterval / 2 - width / 2);
             }
 
             // 右结点
-            if(index === 1) {
+            if (index === 1) {
                 node.set('x', parent.get('x') + layoutOptions.xInterval / 2 + width / 2);
             }
         }
 
-        if(node.child && (node.child[0] || node.child[1])) {
+        node.visited = true;
+
+        if (node.child && (node.child[0] || node.child[1])) {
             let leftChild = node.child[0],
                 rightChild = node.child[1],
                 leftGroup = this.layoutItem(leftChild, node, 0, layoutOptions),
                 rightGroup = this.layoutItem(rightChild, node, 1, layoutOptions),
                 intersection = null,
                 move = 0;
-            
+
             // 处理左右子树相交问题
-            if(leftGroup && rightGroup) {
+            if (leftGroup && rightGroup) {
                 intersection = Bound.intersect(leftGroup.getBound(), rightGroup.getBound());
                 move = 0;
 
-                if(intersection && intersection.width > 0) {
+                if (intersection && intersection.width > 0) {
                     move = (intersection.width + layoutOptions.xInterval) / 2;
                     leftGroup.translate(-move, 0);
                     rightGroup.translate(move, 0);
                 }
             }
 
-            if(leftGroup) {
+            if (leftGroup) {
                 group.add(leftGroup);
             }
 
-            if(rightGroup) {
+            if (rightGroup) {
                 group.add(rightGroup)
             }
         }
-       
+
         return group;
     },
 
@@ -124,6 +129,7 @@ SV.registerLayout('BinaryTree', {
      */
     layout(elements, layoutOptions) {
         let root = elements[0];
+        let visited = new Group();
         this.layoutItem(root, null, -1, layoutOptions);
     }
 });
@@ -132,16 +138,13 @@ SV.registerLayout('BinaryTree', {
 
 
 
-[
-    {
-        "id": 6385328,
-        "data": "",
-        "external": [
-            "L"
-        ],
-        "root": true,
-        "after": null,
-        "next": null
-    }
-]
-
+[{
+    "id": 6385328,
+    "data": "",
+    "external": [
+        "L"
+    ],
+    "root": true,
+    "after": null,
+    "next": null
+}]
\ No newline at end of file
diff --git a/demoV2/demo2.html b/demoV2/demo2.html
index ff7f464..789a4e0 100644
--- a/demoV2/demo2.html
+++ b/demoV2/demo2.html
@@ -1,193 +1,293 @@
 <!DOCTYPE html>
 <html lang="en">
-	<head>
-		<meta charset="UTF-8" />
-		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
-		<title>DEMO</title>
-		<style>
-			* {
-				padding: 0;
-				margin: 0;
-				user-select: none;
-			}
 
-			.container {
-				background-color: #fafafa;
-				border: 1px solid #ccc;
-				position: relative;
-			}
+<head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>DEMO</title>
+    <style>
+        * {
+            padding: 0;
+            margin: 0;
+            user-select: none;
+        }
+        
+        .container {
+            background-color: #fafafa;
+            border: 1px solid #ccc;
+            position: relative;
+        }
+        
+        .down {
+            display: flex;
+            margin-top: 20px;
+        }
+        
+        #container {
+            width: 100%;
+            height: 500px;
+            position: relative;
+            overflow: hidden;
+        }
+        
+        #leak {
+            position: absolute;
+            left: 0;
+            opacity: 0;
+            top: 100px;
+            width: 100%;
+            box-sizing: border-box;
+            padding: 4px;
+            border-top: 1px dashed #000;
+            pointer-events: none;
+            transition: opacity 0.75s ease-in-out;
+        }
+        
+        #leak>span {
+            color: #000;
+        }
+    </style>
+</head>
 
-			.down {
-				display: flex;
-				margin-top: 20px;
-			}
+<body>
+    <div class="container" id="container">
+        <div id="leak">
+            <span>泄漏区</span>
+        </div>
+    </div>
 
-			#container {
-				width: 100%;
-				height: 500px;
-				position: relative;
-				overflow: hidden;
-			}
+    <button id="btn-prev">prev</button>
+    <button id="btn-next">next</button>
+    <button id="resize">resize</button>
+    <button id="relayout">relayout</button>
+    <button id="switch-mode">switch mode</button>
+    <button id="brush-select">brush-select</button>
+    <span id="pos"></span>
 
-			#leak {
-				position: absolute;
-				left: 0;
-				opacity: 0;
-				top: 100px;
-				width: 100%;
-				box-sizing: border-box;
-				padding: 4px;
-				border-top: 1px dashed #000;
-				pointer-events: none;
-				transition: opacity 0.75s ease-in-out;
-			}
+    <script src="./../dist/sv.js"></script>
+    <script>
+        const Group = SV.Group,
+            Bound = SV.Bound,
+            G6 = SV.G6,
+            Vector = SV.Vector;
+    </script>
+    <script src="./Layouter/LinkList.js"></script>
+    <script src="./Layouter/BinaryTree.js"></script>
+    <script src="./Layouter/Stack.js"></script>
+    <script src="./Layouter/LinkQueue.js"></script>
+    <script src="./Layouter/GeneralizedList.js"></script>
+    <script src="./Layouter/ChainHashTable.js"></script>
+    <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 src="./Layouter/SqQueue.js"></script>
+    <script src="./Layouter/PTree.js"></script>
+    <script src="./Layouter/PCTree.js"></script>
 
-			#leak > span {
-				color: #000;
-			}
-		</style>
-	</head>
+    <script>
+        let cur = SV(document.getElementById('container'), {
+            view: {
+                leakAreaHeight: 130,
+                groupPadding: 40,
+            },
+        });
 
-	<body>
-		<div class="container" id="container">
-			<div id="leak">
-				<span>泄漏区</span>
-			</div>
-		</div>
+        let data = [{
+                "BinaryTree0": {
+                    "data": [{
+                        "external": [
+                            "T1"
+                        ],
+                        "child": [
+                            "0x617ee0",
+                            "0x617f10"
+                        ],
+                        "id": "0x617eb0",
+                        "name": "T1",
+                        "data": "Z",
+                        "root": true,
+                        "type": "default"
+                    }, {
+                        "child": [
+                            "0x0",
+                            "0x0"
+                        ],
+                        "id": "0x617ee0",
+                        "name": "T1->lchild",
+                        "data": "A",
+                        "type": "default"
+                    }, {
+                        "child": [
+                            "0x0",
+                            "0x0"
+                        ],
+                        "id": "0x617f10",
+                        "name": "T1->rchild",
+                        "data": "B",
+                        "type": "default",
+                        "external": [
+                            "r",
+                            "t"
+                        ]
+                    }],
+                    "layouter": "BinaryTree"
+                },
+                "BinaryTree3": {
+                    "data": [{
+                        "external": [
+                            "T2",
+                            "r2"
+                        ],
+                        "child": [
+                            "0x617f70",
+                            "0x0"
+                        ],
+                        "id": "0x617f40",
+                        "name": "T2",
+                        "data": "Z",
+                        "root": true,
+                        "type": "default"
+                    }, {
+                        "child": [
+                            "0x0",
+                            "0x0"
+                        ],
+                        "id": "0x617f70",
+                        "name": "T2->lchild",
+                        "data": "D",
+                        "type": "default",
+                        "external": [
+                            "t2"
+                        ]
+                    }],
+                    "layouter": "BinaryTree"
+                }
+            }, {
+                "BinaryTree0": {
+                    "data": [{
+                        "external": [
+                            "T1"
+                        ],
+                        "child": [
+                            "0x617ee0",
+                            "0x617f10"
+                        ],
+                        "id": "0x617eb0",
+                        "name": "T1",
+                        "data": "Z",
+                        "root": true,
+                        "type": "default"
+                    }, {
+                        "child": [
+                            "0x0",
+                            "0x0"
+                        ],
+                        "id": "0x617ee0",
+                        "name": "T1->lchild",
+                        "data": "A",
+                        "type": "default"
+                    }, {
+                        "child": [
+                            "0x0",
+                            "0x617eb0"
+                        ],
+                        "id": "0x617f10",
+                        "name": "T1->rchild",
+                        "data": "B",
+                        "type": "default"
+                    }],
+                    "layouter": "BinaryTree"
+                },
 
-		<button id="btn-prev">prev</button>
-		<button id="btn-next">next</button>
-		<button id="resize">resize</button>
-		<button id="relayout">relayout</button>
-		<button id="switch-mode">switch mode</button>
-		<button id="brush-select">brush-select</button>
-		<span id="pos"></span>
+                "BinaryTree3": {
+                    "data": [{
+                        "external": [
+                            "T2",
+                            "r2"
+                        ],
+                        "child": [
+                            "0x617f70",
+                            "0x0"
+                        ],
+                        "id": "0x617f40",
+                        "name": "T2",
+                        "data": "Z",
+                        "root": true,
+                        "type": "default"
+                    }, {
+                        "child": [
+                            "0x0",
+                            "0x0"
+                        ],
+                        "id": "0x617f70",
+                        "name": "T2->lchild",
+                        "data": "D",
+                        "type": "default",
+                        "external": [
+                            "t2"
+                        ]
+                    }],
+                    "layouter": "BinaryTree"
+                }
+            }
 
-		<script src="./../dist/sv.js"></script>
-		<script>
-			const Group = SV.Group,
-				Bound = SV.Bound,
-				G6 = SV.G6,
-				Vector = SV.Vector;
-		</script>
-		<script src="./Layouter/LinkList.js"></script>
-		<script src="./Layouter/BinaryTree.js"></script>
-		<script src="./Layouter/Stack.js"></script>
-		<script src="./Layouter/LinkQueue.js"></script>
-		<script src="./Layouter/GeneralizedList.js"></script>
-		<script src="./Layouter/ChainHashTable.js"></script>
-		<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 src="./Layouter/SqQueue.js"></script>
-		<script src="./Layouter/PTree.js"></script>
-		<script src="./Layouter/PCTree.js"></script>
+        ];
 
-		<script>
-			let cur = SV(document.getElementById('container'), {
-				view: {
-					leakAreaHeight: 130,
-					groupPadding: 40,
-				},
-			});
+        let dataIndex = 0,
+            curData = data[dataIndex];
 
-			let data = [
-				{
-					LinkStack0: {
-						data: [
-							{
-								id: '0x616eb0',
-								data: '',
-								next: '0x616ed0',
-								headExternal: ['ls'],
-								type: 'default',
-							},
-							{
-								id: '0x616ed0',
-								data: 'f',
-								external: ['p'],
-								next: '0x616ef0',
-								type: 'default',
-							},
-							{
-								id: '0x616ef0',
-								data: 'g',
-								external: ['p1'],
-								next: null,
-								type: 'default',
-							},
-						],
-						layouter: 'LinkStack',
-					},
-					LinkStack1: {
-						data: [
-							{
-								id: '0x616f10',
-								data: '',
-								next: 'LinkStack0#0x616ef0',
-								headExternal: ['ls1'],
-								type: 'default',
-							},
-						],
-						layouter: 'LinkStack',
-					},
-				},
-			];
+        let enableBrushSelect = false;
 
-			let dataIndex = 0,
-				curData = data[dataIndex];
+        const container = document.getElementById('container'),
+            pos = document.getElementById('pos');
 
-			let enableBrushSelect = false;
+        const leak = document.getElementById('leak');
 
-			const container = document.getElementById('container'),
-				pos = document.getElementById('pos');
+        cur.render(curData);
 
-			const leak = document.getElementById('leak');
+        document.getElementById('btn-next').addEventListener('click', e => {
+            curData = data[++dataIndex];
+            cur.render(curData);
+        });
 
-			cur.render(curData);
+        document.getElementById('btn-prev').addEventListener('click', e => {
+            curData = data[--dataIndex];
+            cur.render(curData);
+        });
 
-			document.getElementById('btn-next').addEventListener('click', e => {
-				curData = data[++dataIndex];
-				cur.render(curData);
-			});
+        document.getElementById('resize').addEventListener('click', e => {
+            container.style.height = 800 + 'px';
+            cur.resize(container.offsetWidth, container.offsetHeight);
+        });
 
-			document.getElementById('btn-prev').addEventListener('click', e => {
-				curData = data[--dataIndex];
-				cur.render(curData);
-			});
+        document.getElementById('relayout').addEventListener('click', e => {
+            cur.reLayout();
+        });
 
-			document.getElementById('resize').addEventListener('click', e => {
-				container.style.height = 800 + 'px';
-				cur.resize(container.offsetWidth, container.offsetHeight);
-			});
+        document.getElementById('switch-mode').addEventListener('click', e => {
+            cur.updateStyle('Array', newArrayOption);
+        });
 
-			document.getElementById('relayout').addEventListener('click', e => {
-				cur.reLayout();
-			});
+        document.getElementById('brush-select').addEventListener('click', e => {
+            enableBrushSelect = !enableBrushSelect;
+            cur.switchBrushSelect(enableBrushSelect);
+        });
 
-			document.getElementById('switch-mode').addEventListener('click', e => {
-				cur.updateStyle('Array', newArrayOption);
-			});
+        cur.on('onLeakAreaUpdate', payload => {
+            leak.style.opacity = payload.hasLeak ? 1 : 0;
+            leak.style.top = payload.leakAreaY - 40 + 'px';
+        });
 
-			document.getElementById('brush-select').addEventListener('click', e => {
-				enableBrushSelect = !enableBrushSelect;
-				cur.switchBrushSelect(enableBrushSelect);
-			});
+        // -------------------------------------------------------------------------------------------------------
 
-			cur.on('onLeakAreaUpdate', payload => {
-				leak.style.opacity = payload.hasLeak ? 1 : 0;
-				leak.style.top = payload.leakAreaY - 40 + 'px';
-			});
+        container.addEventListener('mousemove', e => {
+            let x = e.offsetX,
+                y = e.offsetY;
+            pos.innerHTML = `${x},${y}`;
+        });
+    </script>
+</body>
 
-			// -------------------------------------------------------------------------------------------------------
-
-			container.addEventListener('mousemove', e => {
-				let x = e.offsetX,
-					y = e.offsetY;
-				pos.innerHTML = `${x},${y}`;
-			});
-		</script>
-	</body>
-</html>
+</html>
\ No newline at end of file