From a623ae74452611e831e2ade8f9ea4e959f1b71bd Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E9=BB=8E=E6=99=BA=E6=B4=B2?= <1543046129@qq.com>
Date: Tue, 20 Apr 2021 19:12:41 +0800
Subject: [PATCH] =?UTF-8?q?bug=E4=BF=AE=E5=A4=8D?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
demo/dataStruct/Array.js | 12 +-
demo/dataStruct/BinaryTree.js | 81 ++++++---
demo/dataStruct/ChainHashTable.js | 162 ++++++++++++++++++
.../{HashLinkList.js => LinkStack.js} | 41 ++---
demo/dataStruct/Stack.js | 71 ++++++++
demo/dataStruct/linkList.js | 2 +-
demo/demo.html | 9 +-
dist/sv.js | 2 +-
src/Model/modelConstructor.ts | 15 +-
src/Model/modelData.ts | 30 ++--
src/RegisteredShape/linkListNode.ts | 4 +-
src/RegisteredShape/twoCell | 0
src/RegisteredShape/twoCellNode.ts | 63 +++++++
src/StructV.ts | 3 +-
src/View/behavior.ts | 20 ++-
src/View/layouter.ts | 3 +-
src/View/renderer.ts | 73 +++++---
src/engine.ts | 2 +-
src/options.ts | 4 +-
webpack.config.js | 2 -
20 files changed, 492 insertions(+), 107 deletions(-)
create mode 100644 demo/dataStruct/ChainHashTable.js
rename demo/dataStruct/{HashLinkList.js => LinkStack.js} (72%)
create mode 100644 demo/dataStruct/Stack.js
delete mode 100644 src/RegisteredShape/twoCell
create mode 100644 src/RegisteredShape/twoCellNode.ts
diff --git a/demo/dataStruct/Array.js b/demo/dataStruct/Array.js
index 01458af..f85760d 100644
--- a/demo/dataStruct/Array.js
+++ b/demo/dataStruct/Array.js
@@ -17,6 +17,14 @@ class Arrays extends Engine {
}
}
},
+ pointer: {
+ external: {
+ offset: 8,
+ style: {
+ fill: '#f08a5d'
+ }
+ }
+ },
interaction: {
dragNode: false
}
@@ -41,7 +49,7 @@ const A = function(container) {
return{
engine: new Arrays(container),
data: [[
- { id: 1 },
+ { id: 1, external: 'A' },
{ id: 2 },
{ id: 3 },
{ id: 4 },
@@ -56,7 +64,7 @@ const A = function(container) {
{ id: 1 },
{ id: 2 },
{ id: 3 },
- { id: 6 },
+ { id: 6, external: 'A' },
{ id: 7 },
{ id: 8 }
]]
diff --git a/demo/dataStruct/BinaryTree.js b/demo/dataStruct/BinaryTree.js
index a7d72d0..3404d22 100644
--- a/demo/dataStruct/BinaryTree.js
+++ b/demo/dataStruct/BinaryTree.js
@@ -164,27 +164,66 @@ class BinaryTree extends Engine {
const BTree = function(container) {
return{
engine: new BinaryTree(container),
- data: [[
- { id: 1, child: [2, 3], root: true, external: ['treeA', 'gear'] },
- { id: 2, child: [null, 6] },
- { id: 3, child: [5, 4] },
- { id: 4, external: 'foo' },
- { id: 5 },
- { id: 6, external: 'bar', child: [null, 7] },
- { id: 7 },
- { id: 8, child: [9, 10], root: true },
- { id: 9, child: [11, null] },
- { id: 10 },
- { id: 11 }
- ],
- [
- { id: 1, child: [2, 3], root: true, external: 'treeA' },
- { id: 2, external: 'gear' },
- { id: 3, child: [5, 4] },
- { id: 4, external: 'foo' },
- { id: 5, child: [12, 13] },
- { id: 12 }, { id: 13 }
- ]]
+ data: [
+ // [
+ // { id: 1, child: [2, 3], root: true, external: ['treeA', 'gear'] },
+ // { id: 2, child: [null, 6] },
+ // { id: 3, child: [5, 4] },
+ // { id: 4, external: 'foo' },
+ // { id: 5 },
+ // { id: 6, external: 'bar', child: [null, 7] },
+ // { id: 7 },
+ // { id: 8, child: [9, 10], root: true },
+ // { id: 9, child: [11, null] },
+ // { id: 10 },
+ // { id: 11 }
+ // ],
+ // [
+ // { id: 1, child: [2, 3], root: true, external: 'treeA' },
+ // { id: 2, external: 'gear' },
+ // { id: 3, child: [5, 4] },
+ // { id: 4, external: 'foo' },
+ // { id: 5, child: [12, 13] },
+ // { id: 12 }, { id: 13 }
+ // ]
+ [
+ {
+ "external": [
+ "r",
+ "T1"
+ ],
+ "child": [
+ 6385376,
+ 6385424
+ ],
+ "id": 6385328,
+ "name": "T1",
+ "data": "Z",
+ "root": true
+ },
+ {
+ "child": [
+ 0,
+ 0
+ ],
+ "id": 6385376,
+ "name": "T1.lchild",
+ "data": "A"
+ },
+ {
+ "external": [
+ "t"
+ ],
+ "child": [
+ 0,
+ 0
+ ],
+ "id": 6385424,
+ "name": "T1.rchild",
+ "data": "B"
+ }
+ ]
+ ]
}
};
diff --git a/demo/dataStruct/ChainHashTable.js b/demo/dataStruct/ChainHashTable.js
new file mode 100644
index 0000000..3638998
--- /dev/null
+++ b/demo/dataStruct/ChainHashTable.js
@@ -0,0 +1,162 @@
+
+
+
+
+
+/**
+ * 连地址哈希表
+ */
+ class ChainHashTable extends Engine {
+
+ defineOptions() {
+ return {
+ element: {
+ head: {
+ type: 'two-cell-node',
+ label: '[id]',
+ size: [70, 40],
+ style: {
+ stroke: '#333',
+ fill: '#b83b5e'
+ }
+ },
+ node: {
+ type: 'link-list-node',
+ label: '[id]',
+ size: [60, 30],
+ style: {
+ stroke: '#333',
+ fill: '#b83b5e'
+ }
+ }
+ },
+ link: {
+ start: {
+ type: 'line',
+ sourceAnchor: 1,
+ targetAnchor: 0,
+ style: {
+ stroke: '#333',
+ endArrow: {
+ path: G6.Arrow.triangle(8, 6, 0),
+ fill: '#333'
+ },
+ startArrow: {
+ path: G6.Arrow.circle(2, -1),
+ fill: '#333'
+ }
+ }
+ },
+ next: {
+ type: 'line',
+ sourceAnchor: 1,
+ targetAnchor: 0,
+ style: {
+ stroke: '#333',
+ endArrow: {
+ path: G6.Arrow.triangle(8, 6, 0),
+ fill: '#333'
+ },
+ startArrow: {
+ path: G6.Arrow.circle(2, -1),
+ fill: '#333'
+ }
+ }
+ }
+ },
+ pointer: {
+ external: {
+ offset: 8,
+ style: {
+ fill: '#f08a5d'
+ }
+ }
+ },
+ layout: {
+ xInterval: 50,
+ yInterval: 50
+ },
+ interaction: {
+ dragNode: ['node']
+ }
+ };
+ }
+
+
+ /**
+ * 对子树进行递归布局
+ * @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 headNode = elements.head;
+
+ for(let i = 0; i < headNode.length; i++) {
+ let node = headNode[i],
+ height = node.get('size')[1];
+
+ node.set('y', node.get('y') + i * height);
+
+ if(node.start) {
+ let y = node.get('y') + height - node.start.get('size')[1],
+ x = layoutOptions.xInterval * 2.5;
+
+ node.start.set({ x, y });
+ this.layoutItem(node.start, null, layoutOptions);
+ }
+ }
+ }
+
+}
+
+
+const CHT = function(container) {
+ return{
+ engine: new ChainHashTable(container),
+ data: [
+ {
+ head: [{
+ id: 0,
+ start: 'node#0'
+ }, {
+ id: 2,
+ start: 'node#2'
+ }],
+ node: [{
+ id: 0,
+ next: 1
+ }, {
+ id: 1
+ },{
+ id: 2,
+ next: 3
+ }, {
+ id: 3
+ }]
+ },
+ {
+
+ }
+ ]
+ }
+};
+
+
diff --git a/demo/dataStruct/HashLinkList.js b/demo/dataStruct/LinkStack.js
similarity index 72%
rename from demo/dataStruct/HashLinkList.js
rename to demo/dataStruct/LinkStack.js
index 5f08b41..368be19 100644
--- a/demo/dataStruct/HashLinkList.js
+++ b/demo/dataStruct/LinkStack.js
@@ -1,26 +1,13 @@
-
-
-
/**
* 单链表
*/
- class HashLinkList extends Engine {
-
+ class LinkStack extends Engine {
defineOptions() {
return {
element: {
- headNode: {
- type: 'link-list-node',
- label: '[id]',
- size: [60, 30],
- style: {
- stroke: '#333',
- fill: '#b83b5e'
- }
- },
- node: {
+ default: {
type: 'link-list-node',
label: '[id]',
size: [60, 30],
@@ -34,7 +21,7 @@
next: {
type: 'line',
sourceAnchor: 1,
- targetAnchor: 0,
+ targetAnchor: 2,
style: {
stroke: '#333',
endArrow: {
@@ -50,7 +37,7 @@
},
pointer: {
external: {
- offset: 14,
+ offset: 8,
style: {
fill: '#f08a5d'
}
@@ -58,7 +45,7 @@
},
layout: {
xInterval: 50,
- yInterval: 50
+ yInterval: 30
}
};
}
@@ -74,11 +61,11 @@
return null;
}
- let width = node.get('size')[0];
+ let height = node.get('size')[1];
if(prev) {
- node.set('y', prev.get('y'));
- node.set('x', prev.get('x') + layoutOptions.xInterval + width);
+ node.set('x', prev.get('x'));
+ node.set('y', prev.get('y') + layoutOptions.yInterval + height);
}
if(node.next) {
@@ -103,20 +90,20 @@
for(i = 0; i < rootNodes.length; i++) {
let root = rootNodes[i],
- height = root.get('size')[1];
+ width = root.get('size')[0];
- root.set('y', root.get('y') + i * (layoutOptions.yInterval + height));
+ root.set('x', root.get('x') + i * (layoutOptions.xInterval + width));
this.layoutItem(root, null, layoutOptions);
}
}
}
-const LList = function(container) {
+const LStack = function(container) {
return{
- engine: new LinkList(container),
+ engine: new LinkStack(container),
data: [[
- { id: 1, root: true, next: 2, external: ['gg'] },
+ { id: 1, root: true, next: 2 },
{ id: 2, next: 3 },
{ id: 3, next: 4 },
{ id: 4, next: 5 },
@@ -128,7 +115,7 @@ const LList = function(container) {
{ id: 10 }
],
[
- { id: 1, root: true, next: 2, external: ['gg'] },
+ { id: 1, root: true, next: 2 },
{ id: 2, next: 3 },
{ id: 3, next: 6 },
{ id: 6, next: 7 },
diff --git a/demo/dataStruct/Stack.js b/demo/dataStruct/Stack.js
new file mode 100644
index 0000000..b8ddfa9
--- /dev/null
+++ b/demo/dataStruct/Stack.js
@@ -0,0 +1,71 @@
+
+
+class Stack extends Engine {
+ defineOptions() {
+ return {
+ element: {
+ default: {
+ type: 'rect',
+ label: '[id]',
+ size: [60, 30],
+ style: {
+ stroke: '#333',
+ fill: '#95e1d3'
+ }
+ }
+ },
+ pointer: {
+ external: {
+ offset: 8,
+ style: {
+ fill: '#f08a5d'
+ }
+ }
+ },
+ interaction: {
+ dragNode: false
+ }
+ };
+ }
+
+ layout(elements, layoutOptions) {
+ let blocks = elements.default;
+
+ for(let i = 1; i < blocks.length; i++) {
+ let item = blocks[i],
+ prev = blocks[i - 1],
+ height = item.get('size')[1];
+
+ item.set('y', prev.get('y') + height);
+ }
+ }
+}
+
+
+
+
+const St = function(container) {
+ return{
+ engine: new Stack(container),
+ data: [[
+ { id: 1 },
+ { id: 2 },
+ { id: 3 },
+ { id: 4 },
+ { id: 5 },
+ { id: 6 },
+ { id: 7 },
+ { id: 8 },
+ { id: 9 },
+ { id: 10 }
+ ],
+ [
+ { id: 1 },
+ { id: 2 },
+ { id: 3 },
+ { id: 6 },
+ { id: 7 },
+ { id: 8 }
+ ]]
+ }
+};
\ No newline at end of file
diff --git a/demo/dataStruct/linkList.js b/demo/dataStruct/linkList.js
index 391abe3..cbe0656 100644
--- a/demo/dataStruct/linkList.js
+++ b/demo/dataStruct/linkList.js
@@ -37,7 +37,7 @@ class LinkList extends Engine {
},
pointer: {
external: {
- offset: 14,
+ offset: 8,
style: {
fill: '#f08a5d'
}
diff --git a/demo/demo.html b/demo/demo.html
index 380196e..25383bb 100644
--- a/demo/demo.html
+++ b/demo/demo.html
@@ -39,13 +39,16 @@ const Engine = SV.Engine,
-
+
+
+
+