chenxiaopei/StructV2
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat: 增加判断节点是否同组的方法

Browse Source
This commit is contained in:
黎智洲 2022-02-20 00:29:26 +08:00
parent 998844b6e0
commit ee9a5202b1
8 changed files with 303 additions and 463 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
demoV2/Layouter/AdjoinMatrixGraph.js
View File

@ -20,7 +20,6 @@ const isNeighbor = function (itemA, itemB) {
SV.registerLayout('AdjoinMatrixGraph', { SV.registerLayout('AdjoinMatrixGraph', {
sourcesPreprocess(sources) { sourcesPreprocess(sources) {
let dataLength = sources.length; let dataLength = sources.length;
let matrixNodeLength = dataLength * dataLength; let matrixNodeLength = dataLength * dataLength;

29
demoV2/Layouter/LinkList.js
View File

@ -5,7 +5,7 @@ SV.registerLayout('LinkList', {
sourcesPreprocess(sources) { sourcesPreprocess(sources) {
let root = sources[0]; let root = sources[0];
if(root.external) { if (root.external) {
root.rootExternal = root.external; root.rootExternal = root.external;
delete root.external; delete root.external;
} }
@ -85,32 +85,17 @@ SV.registerLayout('LinkList', {
}, },
/** layout(elements, layoutOptions) {
* 对子树进行递归布局 for (let i = 0; i < elements.length; i++) {
* @param node let node = elements[i],
* @param parent prev = elements[1 - 1],
*/ width = node.get('size')[0];
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('y', prev.get('y'));
node.set('x', prev.get('x') + layoutOptions.xInterval + width); node.set('x', prev.get('x') + layoutOptions.xInterval + width);
} }
if(node.next) {
this.layoutItem(node.next, node, layoutOptions);
} }
},
layout(elements, layoutOptions) {
let root = elements[0];
this.layoutItem(root, null, layoutOptions);
} }
}); });

2
demoV2/Layouter/LinkStack.js
View File

@ -83,7 +83,7 @@
let height = node.get('size')[1]; let height = node.get('size')[1];
if(prev) { if(prev && node.isSameGroup(prev)) {
node.set('x', prev.get('x')); node.set('x', prev.get('x'));
node.set('y', prev.get('y') - layoutOptions.yInterval - height); node.set('y', prev.get('y') - layoutOptions.yInterval - height);
} }

239
demoV2/demo2.html
View File

@ -1,9 +1,8 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en"> <html lang="en">
<head>
<head> <meta charset="UTF-8" />
<meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>DEMO</title> <title>DEMO</title>
<style> <style>
* { * {
@ -43,14 +42,13 @@
transition: opacity 0.75s ease-in-out; transition: opacity 0.75s ease-in-out;
} }
#leak>span { #leak > span {
color: #000; color: #000;
} }
</style> </style>
</head> </head>
<body>
<body>
<div class="container" id="container"> <div class="container" id="container">
<div id="leak"> <div id="leak">
<span>泄漏区</span> <span>泄漏区</span>
@ -67,12 +65,10 @@
<script src="./../dist/sv.js"></script> <script src="./../dist/sv.js"></script>
<script> <script>
const Group = SV.Group, const Group = SV.Group,
Bound = SV.Bound, Bound = SV.Bound,
G6 = SV.G6, G6 = SV.G6,
Vector = SV.Vector; Vector = SV.Vector;
</script> </script>
<script src="./Layouter/LinkList.js"></script> <script src="./Layouter/LinkList.js"></script>
<script src="./Layouter/BinaryTree.js"></script> <script src="./Layouter/BinaryTree.js"></script>
@ -90,7 +86,6 @@
<script src="./Layouter/PCTree.js"></script> <script src="./Layouter/PCTree.js"></script>
<script> <script>
let cur = SV(document.getElementById('container'), { let cur = SV(document.getElementById('container'), {
view: { view: {
leakAreaHeight: 130, leakAreaHeight: 130,
@ -98,207 +93,48 @@
}, },
}); });
let data = [ let data = [
{ {
pctree:{ LinkStack0: {
data:[ data: [
{ {
id: 1, id: '0x616eb0',
data: 'a', data: '',
type: 'PCTreeHead', next: '0x616ed0',
parent: '-1', headExternal: ['ls'],
headNext: 'PCTreeNode#2', type: 'default',
index: 0,
root: true
}, },
{ {
id: 2, id: '0x616ed0',
type: 'PCTreeNode', data: 'f',
data: 1, external: ['p'],
next: 'PCTreeNode#3' next: '0x616ef0',
type: 'default',
}, },
{ {
id: 3, id: '0x616ef0',
type: 'PCTreeNode', data: 'g',
data: 1, external: ['p1'],
}, next: null,
{ type: 'default',
id: 4,
data: 'b',
type: 'PCTreeHead',
parent: '0',
index: 1,
}, },
], ],
layouter: 'PCTree' layouter: 'LinkStack',
}
}, },
LinkStack1: {
data: [
{ {
pctree:{ id: '0x616f10',
data:[ data: '',
{ next: 'LinkStack0#0x616ef0',
id: 1, headExternal: ['ls1'],
data: 'a', type: 'default',
type: 'PCTreeHead',
parent: '-1',
headNext: 'PCTreeNode#2',
index: 0,
root: true
}, },
{
id: 2,
type: 'PCTreeNode',
data: 1,
},
{
id: 4,
data: 'b',
type: 'PCTreeHead',
parent: '0',
headNext: 'PCTreeNode#5',
index: 1,
},
{
id: 5,
type: 'PCTreeNode',
next: 'PCTreeNode#6',
data: 2,
},
{
id: 6,
data: 3,
type: 'PCTreeNode'
}
], ],
layouter: 'PCTree' layouter: 'LinkStack',
}
}, },
{
"sqStack0": {
"data": [
{
"id": "0x617eb5",
"data": "",
"index": 5,
"cursor": "top"
}, },
{ ];
"id": "0x617eb4",
"data": "2",
"index": 4
},
{
"id": "0x617eb3",
"data": "6",
"index": 3
},
{
"id": "0x617eb2",
"data": "7",
"index": 2
},
{
"id": "0x617eb1",
"data": "9",
"index": 1
},
{
"id": "0x617eb0",
"data": "1",
"index": 0,
"external": "S"
}
],
"layouter": "Stack"
}
}, {
"sqStack0": {
"data": [
{
"id": "0x617eb4",
"data": "2",
"index": 4,
"cursor": "top",
"type": "default"
},
{
"id": "0x617eb3",
"data": "6",
"index": 3,
"type": "default"
},
{
"id": "0x617eb2",
"data": "7",
"index": 2,
"type": "default"
},
{
"id": "0x617eb1",
"data": "9",
"index": 1,
"type": "default"
},
{
"id": "0x617eb0",
"data": "1",
"index": 0,
"bottomExternal": "S",
"type": "default"
}
],
"layouter": "Stack"
}
}, {
"data": [
{
"id": "0x617eb5",
"data": "",
"index": 5,
"cursor": "top",
"type": "default"
},
{
"id": "0x617eb4",
"data": "2",
"index": 4,
"type": "default"
},
{
"id": "0x617eb3",
"data": "6",
"index": 3,
"type": "default"
},
{
"id": "0x617eb2",
"data": "7",
"index": 2,
"type": "default"
},
{
"id": "0x617eb1",
"data": "9",
"index": 1,
"type": "default"
},
{
"id": "0x617eb0",
"data": "1",
"index": 0,
"bottomExternal": "S",
"type": "default"
}
],
"layouter": "Stack"
}];
let dataIndex = 0, let dataIndex = 0,
curData = data[dataIndex]; curData = data[dataIndex];
@ -348,13 +184,10 @@
// ------------------------------------------------------------------------------------------------------- // -------------------------------------------------------------------------------------------------------
container.addEventListener('mousemove', e => { container.addEventListener('mousemove', e => {
let x = e.offsetX, y = e.offsetY; let x = e.offsetX,
y = e.offsetY;
pos.innerHTML = `${x},${y}`; pos.innerHTML = `${x},${y}`;
}); });
</script> </script>
</body> </body>
</html> </html>

6
dist/sv.js vendored
View File

File diff suppressed because one or more lines are too long

3
src/Model/SVModel.ts
View File

@ -4,6 +4,7 @@ import { BoundingRect } from "../Common/boundingRect";
import { EdgeConfig, Item, NodeConfig } from "@antv/g6-core"; import { EdgeConfig, Item, NodeConfig } from "@antv/g6-core";
import { Graph } from "@antv/g6-pc"; import { Graph } from "@antv/g6-pc";
import merge from 'merge'; import merge from 'merge';
import { ModelConstructor } from "./modelConstructor";
@ -198,8 +199,6 @@ export class SVModel {
isNode(): boolean { isNode(): boolean {
return false; return false;
} }
} }

46
src/Model/SVNode.ts
View File

@ -1,13 +1,11 @@
import { INode, NodeConfig } from "@antv/g6-core"; import { INode, NodeConfig } from '@antv/g6-core';
import { Util } from "../Common/util"; import { Util } from '../Common/util';
import { NodeLabelOption, NodeOption, Style } from "../options"; import { NodeLabelOption, NodeOption, Style } from '../options';
import { SourceNode } from "../sources"; import { SourceNode } from '../sources';
import { SVLink } from "./SVLink"; import { ModelConstructor } from './modelConstructor';
import { SVModel } from "./SVModel"; import { SVLink } from './SVLink';
import { SVAddressLabel, SVFreedLabel, SVIndexLabel, SVMarker, SVNodeAppendage } from "./SVNodeAppendage"; import { SVModel } from './SVModel';
import { SVAddressLabel, SVFreedLabel, SVIndexLabel, SVMarker, SVNodeAppendage } from './SVNodeAppendage';
export class SVNode extends SVModel { export class SVNode extends SVModel {
public sourceId: string; public sourceId: string;
@ -29,7 +27,17 @@ export class SVNode extends SVModel {
public addressLabel: SVAddressLabel; public addressLabel: SVAddressLabel;
public appendages: SVNodeAppendage[]; public appendages: SVNodeAppendage[];
constructor(id: string, type: string, group: string, layout: string, sourceNode: SourceNode, label: string | string[], options: NodeOption) { public modelConstructor: ModelConstructor;
constructor(
id: string,
type: string,
group: string,
layout: string,
sourceNode: SourceNode,
label: string | string[],
options: NodeOption
) {
super(id, type, group, layout, 'node'); super(id, type, group, layout, 'node');
this.group = group; this.group = group;
@ -66,9 +74,9 @@ export class SVNode extends SVModel {
label: this.label as string, label: this.label as string,
style: { style: {
...style, ...style,
fill: this.disable ? '#ccc' : style.fill fill: this.disable ? '#ccc' : style.fill,
}, },
labelCfg: Util.objectClone<NodeLabelOption>(options.labelOptions) labelCfg: Util.objectClone<NodeLabelOption>(options.labelOptions),
}; };
} }
@ -94,8 +102,12 @@ export class SVNode extends SVModel {
getSourceId(): string { getSourceId(): string {
return this.sourceId; return this.sourceId;
} }
};
/**
* 判断这个节点是否来自相同group
* @param node
*/
isSameGroup(node: SVNode): boolean {
return this.modelConstructor.isSameGroup(this, node);
}
}

14
src/Model/modelConstructor.ts
View File

@ -314,6 +314,8 @@ export class ModelConstructor {
node.freedLabel = new SVFreedLabel(`${id}-freed-label`, sourceNodeType, group, layout, node); node.freedLabel = new SVFreedLabel(`${id}-freed-label`, sourceNodeType, group, layout, node);
} }
node.modelConstructor = this;
return node; return node;
} }
@ -430,10 +432,20 @@ export class ModelConstructor {
return this.layoutGroupTable; return this.layoutGroupTable;
} }
/**
* 判断这个节点是否来自相同group
* @param node1
* @param node2
*/
public isSameGroup(node1: SVNode, node2: SVNode): boolean {
const layoutGroup = this.layoutGroupTable.get(node1.group);
return layoutGroup.node.find(item => item.id === node2.id) !== undefined;
}
/** /**
* 销毁 * 销毁
*/ */
destroy() { public destroy() {
this.layoutGroupTable = null; this.layoutGroupTable = null;
this.prevSourcesStringMap = null; this.prevSourcesStringMap = null;
} }