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;

37
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', {
}, },
/**
* 对子树进行递归布局
* @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) { layout(elements, layoutOptions) {
let root = elements[0]; for (let i = 0; i < elements.length; i++) {
this.layoutItem(root, null, layoutOptions); let node = elements[i],
prev = elements[1 - 1],
width = node.get('size')[0];
if (prev) {
node.set('y', prev.get('y'));
node.set('x', prev.get('x') + layoutOptions.xInterval + width);
}
}
} }
}); });

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);
} }

499
demoV2/demo2.html
View File

@ -1,360 +1,193 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en"> <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;
}
<head> .container {
<meta charset="UTF-8"> background-color: #fafafa;
<meta name="viewport" content="width=device-width, initial-scale=1.0"> border: 1px solid #ccc;
<title>DEMO</title> position: relative;
<style> }
* {
padding: 0;
margin: 0;
user-select: none;
}
.container { .down {
background-color: #fafafa; display: flex;
border: 1px solid #ccc; margin-top: 20px;
position: relative; }
}
.down { #container {
display: flex; width: 100%;
margin-top: 20px; height: 500px;
} position: relative;
overflow: hidden;
}
#container { #leak {
width: 100%; position: absolute;
height: 500px; left: 0;
position: relative; opacity: 0;
overflow: hidden; 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 { #leak > span {
position: absolute; color: #000;
left: 0; }
opacity: 0; </style>
top: 100px; </head>
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 { <body>
color: #000; <div class="container" id="container">
} <div id="leak">
</style> <span>泄漏区</span>
</head> </div>
</div>
<body> <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>
<div class="container" id="container"> <script src="./../dist/sv.js"></script>
<div id="leak"> <script>
<span>泄漏区</span> const Group = SV.Group,
</div> Bound = SV.Bound,
</div> 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>
<button id="btn-prev">prev</button> <script>
<button id="btn-next">next</button> let cur = SV(document.getElementById('container'), {
<button id="resize">resize</button> view: {
<button id="relayout">relayout</button> leakAreaHeight: 130,
<button id="switch-mode">switch mode</button> groupPadding: 40,
<button id="brush-select">brush-select</button> },
<span id="pos"></span> });
<script src="./../dist/sv.js"></script> let data = [
<script> {
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',
},
},
];
const Group = SV.Group, let dataIndex = 0,
Bound = SV.Bound, curData = data[dataIndex];
G6 = SV.G6,
Vector = SV.Vector;
</script> let enableBrushSelect = false;
<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> const container = document.getElementById('container'),
pos = document.getElementById('pos');
let cur = SV(document.getElementById('container'), { const leak = document.getElementById('leak');
view: {
leakAreaHeight: 130,
groupPadding: 40,
},
});
cur.render(curData);
let data = [ document.getElementById('btn-next').addEventListener('click', e => {
{ curData = data[++dataIndex];
pctree:{ cur.render(curData);
data:[ });
{
id: 1,
data: 'a',
type: 'PCTreeHead',
parent: '-1',
headNext: 'PCTreeNode#2',
index: 0,
root: true
}, document.getElementById('btn-prev').addEventListener('click', e => {
{ curData = data[--dataIndex];
id: 2, cur.render(curData);
type: 'PCTreeNode', });
data: 1,
next: 'PCTreeNode#3'
},
{
id: 3,
type: 'PCTreeNode',
data: 1,
},
{
id: 4,
data: 'b',
type: 'PCTreeHead',
parent: '0',
index: 1,
},
],
layouter: 'PCTree'
}
},
{
pctree:{
data:[
{
id: 1,
data: 'a',
type: 'PCTreeHead',
parent: '-1',
headNext: 'PCTreeNode#2',
index: 0,
root: true
}, document.getElementById('resize').addEventListener('click', e => {
{ container.style.height = 800 + 'px';
id: 2, cur.resize(container.offsetWidth, container.offsetHeight);
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'
}
},
{
"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"
}];
document.getElementById('relayout').addEventListener('click', e => {
cur.reLayout();
});
document.getElementById('switch-mode').addEventListener('click', e => {
cur.updateStyle('Array', newArrayOption);
});
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';
});
let dataIndex = 0, // -------------------------------------------------------------------------------------------------------
curData = data[dataIndex];
let enableBrushSelect = false;
const container = document.getElementById('container'),
pos = document.getElementById('pos');
const leak = document.getElementById('leak');
cur.render(curData);
document.getElementById('btn-next').addEventListener('click', e => {
curData = data[++dataIndex];
cur.render(curData);
});
document.getElementById('btn-prev').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('relayout').addEventListener('click', e => {
cur.reLayout();
});
document.getElementById('switch-mode').addEventListener('click', e => {
cur.updateStyle('Array', newArrayOption);
});
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>

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;
} }
} }

192
src/Model/SVNode.ts
View File

@ -1,101 +1,113 @@
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;
public sourceNode: SourceNode; public sourceNode: SourceNode;
public links: { public links: {
inDegree: SVLink[]; inDegree: SVLink[];
outDegree: SVLink[]; outDegree: SVLink[];
}; };
private label: string | string[]; private label: string | string[];
private disable: boolean; private disable: boolean;
public shadowG6Item: INode; public shadowG6Item: INode;
public G6Item: INode; public G6Item: INode;
public marker: SVMarker; public marker: SVMarker;
public freedLabel: SVFreedLabel; public freedLabel: SVFreedLabel;
public indexLabel: SVIndexLabel; public indexLabel: SVIndexLabel;
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;
super(id, type, group, layout, 'node');
this.group = group; constructor(
this.layout = layout; id: string,
type: string,
group: string,
layout: string,
sourceNode: SourceNode,
label: string | string[],
options: NodeOption
) {
super(id, type, group, layout, 'node');
Object.keys(sourceNode).map(prop => { this.group = group;
if (prop !== 'id') { this.layout = layout;
this[prop] = sourceNode[prop];
}
});
this.sourceNode = sourceNode; Object.keys(sourceNode).map(prop => {
this.sourceId = sourceNode.id.toString(); if (prop !== 'id') {
this[prop] = sourceNode[prop];
}
});
this.links = { inDegree: [], outDegree: [] }; this.sourceNode = sourceNode;
this.appendages = []; this.sourceId = sourceNode.id.toString();
this.sourceNode = sourceNode;
this.label = label; this.links = { inDegree: [], outDegree: [] };
this.G6ModelProps = this.generateG6ModelProps(options); this.appendages = [];
this.sourceNode = sourceNode;
this.label = label;
this.G6ModelProps = this.generateG6ModelProps(options);
}
generateG6ModelProps(options: NodeOption): NodeConfig {
const style = Util.objectClone<Style>(options.style);
return {
...this.sourceNode,
id: this.id,
x: 0,
y: 0,
rotation: options.rotation || 0,
type: options.type,
size: options.size || [60, 30],
anchorPoints: options.anchorPoints,
label: this.label as string,
style: {
...style,
fill: this.disable ? '#ccc' : style.fill,
},
labelCfg: Util.objectClone<NodeLabelOption>(options.labelOptions),
};
}
isNode(): boolean {
return true;
}
/**
* 设置是否被选中的状态
* @param isSelected
*/
setSelectedState(isSelected: boolean) {
if (this.G6Item === null) {
return;
}
this.G6Item.setState('selected', isSelected);
this.appendages.forEach(item => {
item.setSelectedState(isSelected);
});
}
getSourceId(): string {
return this.sourceId;
}
/**
* 判断这个节点是否来自相同group
* @param node
*/
isSameGroup(node: SVNode): boolean {
return this.modelConstructor.isSameGroup(this, node);
} }
}
generateG6ModelProps(options: NodeOption): NodeConfig {
const style = Util.objectClone<Style>(options.style);
return {
...this.sourceNode,
id: this.id,
x: 0,
y: 0,
rotation: options.rotation || 0,
type: options.type,
size: options.size || [60, 30],
anchorPoints: options.anchorPoints,
label: this.label as string,
style: {
...style,
fill: this.disable ? '#ccc' : style.fill
},
labelCfg: Util.objectClone<NodeLabelOption>(options.labelOptions)
};
}
isNode(): boolean {
return true;
}
/**
* 设置是否被选中的状态
* @param isSelected
*/
setSelectedState(isSelected: boolean) {
if (this.G6Item === null) {
return;
}
this.G6Item.setState('selected', isSelected);
this.appendages.forEach(item => {
item.setSelectedState(isSelected);
});
}
getSourceId(): string {
return this.sourceId;
}
};

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;
} }