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', {
sourcesPreprocess(sources) {
let dataLength = sources.length;
let matrixNodeLength = dataLength * dataLength;

47
demoV2/Layouter/LinkList.js
View File

@ -1,11 +1,11 @@
SV.registerLayout('LinkList', {
sourcesPreprocess(sources) {
let root = sources[0];
if(root.external) {
if (root.external) {
root.rootExternal = root.external;
delete root.external;
}
@ -15,7 +15,7 @@ SV.registerLayout('LinkList', {
defineOptions() {
return {
node: {
node: {
default: {
type: 'link-list-node',
label: '[data]',
@ -28,7 +28,7 @@ SV.registerLayout('LinkList', {
}
},
link: {
next: {
next: {
type: 'line',
sourceAnchor: 2,
targetAnchor: 6,
@ -36,7 +36,7 @@ SV.registerLayout('LinkList', {
stroke: '#333',
endArrow: 'default',
startArrow: {
path: G6.Arrow.circle(2, -1),
path: G6.Arrow.circle(2, -1),
fill: '#333'
}
}
@ -50,7 +50,7 @@ SV.registerLayout('LinkList', {
stroke: '#333',
endArrow: 'default',
startArrow: {
path: G6.Arrow.circle(2, -1),
path: G6.Arrow.circle(2, -1),
fill: '#333'
}
}
@ -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) {
let root = elements[0];
this.layoutItem(root, null, layoutOptions);
for (let i = 0; i < elements.length; i++) {
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];
if(prev) {
if(prev && node.isSameGroup(prev)) {
node.set('x', prev.get('x'));
node.set('y', prev.get('y') - layoutOptions.yInterval - height);
}

501
demoV2/demo2.html
View File

@ -1,360 +1,193 @@
<!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;
}
<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;
}
.container {
background-color: #fafafa;
border: 1px solid #ccc;
position: relative;
}
.down {
display: flex;
margin-top: 20px;
}
.down {
display: flex;
margin-top: 20px;
}
#container {
width: 100%;
height: 500px;
position: relative;
overflow: hidden;
}
#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 {
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>
#leak>span {
color: #000;
}
</style>
</head>
<body>
<div class="container" id="container">
<div id="leak">
<span>泄漏区</span>
</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">
<div id="leak">
<span>泄漏区</span>
</div>
</div>
<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>
<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>
<script>
let cur = SV(document.getElementById('container'), {
view: {
leakAreaHeight: 130,
groupPadding: 40,
},
});
<script src="./../dist/sv.js"></script>
<script>
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',
},
},
];
const Group = SV.Group,
Bound = SV.Bound,
G6 = SV.G6,
Vector = SV.Vector;
let dataIndex = 0,
curData = data[dataIndex];
</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>
let enableBrushSelect = false;
<script>
const container = document.getElementById('container'),
pos = document.getElementById('pos');
let cur = SV(document.getElementById('container'), {
view: {
leakAreaHeight: 130,
groupPadding: 40,
},
});
const leak = document.getElementById('leak');
cur.render(curData);
let data = [
{
pctree:{
data:[
{
id: 1,
data: 'a',
type: 'PCTreeHead',
parent: '-1',
headNext: 'PCTreeNode#2',
index: 0,
root: true
},
{
id: 2,
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
},
{
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'
}
},
{
"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('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);
});
let dataIndex = 0,
curData = data[dataIndex];
document.getElementById('brush-select').addEventListener('click', e => {
enableBrushSelect = !enableBrushSelect;
cur.switchBrushSelect(enableBrushSelect);
});
let enableBrushSelect = false;
cur.on('onLeakAreaUpdate', payload => {
leak.style.opacity = payload.hasLeak ? 1 : 0;
leak.style.top = payload.leakAreaY - 40 + 'px';
});
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>
</html>
container.addEventListener('mousemove', e => {
let x = e.offsetX,
y = e.offsetY;
pos.innerHTML = `${x},${y}`;
});
</script>
</body>
</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 { Graph } from "@antv/g6-pc";
import merge from 'merge';
import { ModelConstructor } from "./modelConstructor";
@ -198,8 +199,6 @@ export class SVModel {
isNode(): boolean {
return false;
}
}

192
src/Model/SVNode.ts
View File

@ -1,101 +1,113 @@
import { INode, NodeConfig } from "@antv/g6-core";
import { Util } from "../Common/util";
import { NodeLabelOption, NodeOption, Style } from "../options";
import { SourceNode } from "../sources";
import { SVLink } from "./SVLink";
import { SVModel } from "./SVModel";
import { SVAddressLabel, SVFreedLabel, SVIndexLabel, SVMarker, SVNodeAppendage } from "./SVNodeAppendage";
import { INode, NodeConfig } from '@antv/g6-core';
import { Util } from '../Common/util';
import { NodeLabelOption, NodeOption, Style } from '../options';
import { SourceNode } from '../sources';
import { ModelConstructor } from './modelConstructor';
import { SVLink } from './SVLink';
import { SVModel } from './SVModel';
import { SVAddressLabel, SVFreedLabel, SVIndexLabel, SVMarker, SVNodeAppendage } from './SVNodeAppendage';
export class SVNode extends SVModel {
public sourceId: string;
public sourceNode: SourceNode;
public links: {
inDegree: SVLink[];
outDegree: SVLink[];
};
public sourceId: string;
public sourceNode: SourceNode;
public links: {
inDegree: SVLink[];
outDegree: SVLink[];
};
private label: string | string[];
private disable: boolean;
private label: string | string[];
private disable: boolean;
public shadowG6Item: INode;
public G6Item: INode;
public shadowG6Item: INode;
public G6Item: INode;
public marker: SVMarker;
public freedLabel: SVFreedLabel;
public indexLabel: SVIndexLabel;
public addressLabel: SVAddressLabel;
public appendages: SVNodeAppendage[];
public marker: SVMarker;
public freedLabel: SVFreedLabel;
public indexLabel: SVIndexLabel;
public addressLabel: SVAddressLabel;
public appendages: SVNodeAppendage[];
constructor(id: string, type: string, group: string, layout: string, sourceNode: SourceNode, label: string | string[], options: NodeOption) {
super(id, type, group, layout, 'node');
public modelConstructor: ModelConstructor;
this.group = group;
this.layout = layout;
constructor(
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 => {
if (prop !== 'id') {
this[prop] = sourceNode[prop];
}
});
this.group = group;
this.layout = layout;
this.sourceNode = sourceNode;
this.sourceId = sourceNode.id.toString();
Object.keys(sourceNode).map(prop => {
if (prop !== 'id') {
this[prop] = sourceNode[prop];
}
});
this.links = { inDegree: [], outDegree: [] };
this.appendages = [];
this.sourceNode = sourceNode;
this.label = label;
this.G6ModelProps = this.generateG6ModelProps(options);
this.sourceNode = sourceNode;
this.sourceId = sourceNode.id.toString();
this.links = { inDegree: [], outDegree: [] };
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.modelConstructor = this;
return node;
}
@ -430,10 +432,20 @@ export class ModelConstructor {
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.prevSourcesStringMap = null;
}