From 0dcad0f117a872bcc9f1463fc34d97eca0e8fe02 Mon Sep 17 00:00:00 2001
From: Phenom <1543046129@qq.com>
Date: Fri, 16 Apr 2021 15:38:52 +0800
Subject: [PATCH] =?UTF-8?q?fix=EF=BC=9A=E4=BF=AE=E5=A4=8D=E5=B0=91?=
=?UTF-8?q?=E9=87=8Fbug?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
demo/dataStruct/Array.js | 64 ++++++++++++
demo/dataStruct/BinaryTree.js | 13 ++-
demo/dataStruct/HashLinkList.js | 141 ++++++++++++++++++++++++++
demo/dataStruct/linkList.js | 128 +++++++++++++++++++++++
demo/demo.html | 38 ++++++-
demo/demo.js | 10 --
dist/sv.js | 2 +-
src/Common/util.ts | 4 +-
src/Model/modelConstructor.ts | 66 +++++++++---
src/Model/modelData.ts | 92 ++++++++++-------
src/RegisteredShape/binaryTreeNode.ts | 10 +-
src/RegisteredShape/linkListNode.ts | 25 +++--
src/RegisteredShape/twoCell | 0
src/View/behavior.ts | 123 ++++++++++++++++++++++
src/View/layouter.ts | 52 ++++++----
src/View/renderer.ts | 103 ++++++++++---------
src/engine.ts | 117 ++++++++++++++++-----
src/options.ts | 9 ++
18 files changed, 824 insertions(+), 173 deletions(-)
create mode 100644 demo/dataStruct/Array.js
create mode 100644 demo/dataStruct/HashLinkList.js
create mode 100644 demo/dataStruct/linkList.js
delete mode 100644 demo/demo.js
create mode 100644 src/RegisteredShape/twoCell
create mode 100644 src/View/behavior.ts
diff --git a/demo/dataStruct/Array.js b/demo/dataStruct/Array.js
new file mode 100644
index 0000000..01458af
--- /dev/null
+++ b/demo/dataStruct/Array.js
@@ -0,0 +1,64 @@
+
+
+
+
+
+class Arrays extends Engine {
+ defineOptions() {
+ return {
+ element: {
+ default: {
+ type: 'rect',
+ label: '[id]',
+ size: [60, 30],
+ style: {
+ stroke: '#333',
+ fill: '#95e1d3'
+ }
+ }
+ },
+ interaction: {
+ dragNode: false
+ }
+ };
+ }
+
+ layout(elements, layoutOptions) {
+ let arr = elements.default;
+
+ for(let i = 0; i < arr.length; i++) {
+ let width = arr[i].get('size')[0];
+
+ if(i > 0) {
+ arr[i].set('x', arr[i - 1].get('x') + width);
+ }
+ }
+ }
+}
+
+
+const A = function(container) {
+ return{
+ engine: new Arrays(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/BinaryTree.js b/demo/dataStruct/BinaryTree.js
index 6c69d36..a7d72d0 100644
--- a/demo/dataStruct/BinaryTree.js
+++ b/demo/dataStruct/BinaryTree.js
@@ -1,9 +1,8 @@
-const Engine = SV.Engine,
- Group = SV.Group,
- Bound = SV.Bound,
- G6 = SV.G6;
+/**
+ * 二叉树
+ */
class BinaryTree extends Engine {
defineOptions() {
return {
@@ -13,7 +12,9 @@ class BinaryTree extends Engine {
size: [60, 30],
label: '[id]',
style: {
- fill: '#b83b5e'
+ fill: '#b83b5e',
+ stroke: "#333",
+ cursor: 'pointer'
}
}
},
@@ -24,6 +25,8 @@ class BinaryTree extends Engine {
targetAnchor: 0,
style: {
stroke: '#333',
+ lineAppendWidth: 6,
+ cursor: 'pointer',
endArrow: {
path: G6.Arrow.triangle(8, 6, 0),
fill: '#333'
diff --git a/demo/dataStruct/HashLinkList.js b/demo/dataStruct/HashLinkList.js
new file mode 100644
index 0000000..5f08b41
--- /dev/null
+++ b/demo/dataStruct/HashLinkList.js
@@ -0,0 +1,141 @@
+
+
+
+
+
+/**
+ * 单链表
+ */
+ class HashLinkList extends Engine {
+
+ defineOptions() {
+ return {
+ element: {
+ headNode: {
+ type: 'link-list-node',
+ label: '[id]',
+ size: [60, 30],
+ style: {
+ stroke: '#333',
+ fill: '#b83b5e'
+ }
+ },
+ node: {
+ type: 'link-list-node',
+ label: '[id]',
+ size: [60, 30],
+ style: {
+ stroke: '#333',
+ fill: '#b83b5e'
+ }
+ }
+ },
+ link: {
+ 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: 14,
+ style: {
+ fill: '#f08a5d'
+ }
+ }
+ },
+ layout: {
+ xInterval: 50,
+ yInterval: 50
+ }
+ };
+ }
+
+
+ /**
+ * 对子树进行递归布局
+ * @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.default,
+ rootNodes = [],
+ node,
+ i;
+
+ for(i = 0; i < nodes.length; i++) {
+ node = nodes[i];
+
+ if(node.root) {
+ rootNodes.push(node);
+ }
+ }
+
+ for(i = 0; i < rootNodes.length; i++) {
+ let root = rootNodes[i],
+ height = root.get('size')[1];
+
+ root.set('y', root.get('y') + i * (layoutOptions.yInterval + height));
+ this.layoutItem(root, null, layoutOptions);
+ }
+ }
+}
+
+
+const LList = function(container) {
+ return{
+ engine: new LinkList(container),
+ data: [[
+ { id: 1, root: true, next: 2, external: ['gg'] },
+ { id: 2, next: 3 },
+ { id: 3, next: 4 },
+ { id: 4, next: 5 },
+ { id: 5 },
+ { id: 6, root: true, next: 7 },
+ { id: 7, next: 8 },
+ { id: 8, next: 4 },
+ { id: 9, root: true, next: 10 },
+ { id: 10 }
+ ],
+ [
+ { id: 1, root: true, next: 2, external: ['gg'] },
+ { id: 2, next: 3 },
+ { id: 3, next: 6 },
+ { id: 6, next: 7 },
+ { id: 7, next: 8 },
+ { id: 8 }
+ ]]
+ }
+};
+
+
diff --git a/demo/dataStruct/linkList.js b/demo/dataStruct/linkList.js
new file mode 100644
index 0000000..391abe3
--- /dev/null
+++ b/demo/dataStruct/linkList.js
@@ -0,0 +1,128 @@
+
+
+/**
+ * 单链表
+ */
+class LinkList extends Engine {
+ defineOptions() {
+ return {
+ element: {
+ default: {
+ type: 'link-list-node',
+ label: '[id]',
+ size: [60, 30],
+ style: {
+ stroke: '#333',
+ fill: '#b83b5e'
+ }
+ }
+ },
+ link: {
+ 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: 14,
+ style: {
+ fill: '#f08a5d'
+ }
+ }
+ },
+ layout: {
+ xInterval: 50,
+ yInterval: 50
+ }
+ };
+ }
+
+
+ /**
+ * 对子树进行递归布局
+ * @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.default,
+ rootNodes = [],
+ node,
+ i;
+
+ for(i = 0; i < nodes.length; i++) {
+ node = nodes[i];
+
+ if(node.root) {
+ rootNodes.push(node);
+ }
+ }
+
+ for(i = 0; i < rootNodes.length; i++) {
+ let root = rootNodes[i],
+ height = root.get('size')[1];
+
+ root.set('y', root.get('y') + i * (layoutOptions.yInterval + height));
+ this.layoutItem(root, null, layoutOptions);
+ }
+ }
+}
+
+
+const LList = function(container) {
+ return{
+ engine: new LinkList(container),
+ data: [[
+ { id: 1, root: true, next: 2, external: ['gg'] },
+ { id: 2, next: 3 },
+ { id: 3, next: 4 },
+ { id: 4, next: 5 },
+ { id: 5 },
+ { id: 6, root: true, next: 7 },
+ { id: 7, next: 8 },
+ { id: 8, next: 4 },
+ { id: 9, root: true, next: 10 },
+ { id: 10 }
+ ],
+ [
+ { id: 1, root: true, next: 2, external: ['gg'] },
+ { id: 2, next: 3 },
+ { id: 3, next: 6 },
+ { id: 6, next: 7 },
+ { id: 7, next: 8 },
+ { id: 8 }
+ ]]
+ }
+};
+
+
diff --git a/demo/demo.html b/demo/demo.html
index d482f15..380196e 100644
--- a/demo/demo.html
+++ b/demo/demo.html
@@ -24,14 +24,48 @@
+
+
-
-
+
+
+
+