feat: 增加判断节点是否同组的方法
This commit is contained in:
黎智洲
parent
998844b6e0
commit
ee9a5202b1
@ -20,7 +20,6 @@ const isNeighbor = function (itemA, itemB) {
|
||||
|
||||
|
||||
SV.registerLayout('AdjoinMatrixGraph', {
|
||||
|
||||
sourcesPreprocess(sources) {
|
||||
let dataLength = sources.length;
|
||||
let matrixNodeLength = dataLength * dataLength;
|
||||
|
||||
@ -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];
|
||||
layout(elements, 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);
|
||||
}
|
||||
|
||||
if(node.next) {
|
||||
this.layoutItem(node.next, node, layoutOptions);
|
||||
}
|
||||
},
|
||||
|
||||
|
||||
layout(elements, layoutOptions) {
|
||||
let root = elements[0];
|
||||
this.layoutItem(root, null, layoutOptions);
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
@ -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);
|
||||
}
|
||||
|
||||
@ -1,9 +1,8 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>DEMO</title>
|
||||
<style>
|
||||
* {
|
||||
@ -50,7 +49,6 @@
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<div class="container" id="container">
|
||||
<div id="leak">
|
||||
<span>泄漏区</span>
|
||||
@ -67,12 +65,10 @@
|
||||
|
||||
<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>
|
||||
@ -90,7 +86,6 @@
|
||||
<script src="./Layouter/PCTree.js"></script>
|
||||
|
||||
<script>
|
||||
|
||||
let cur = SV(document.getElementById('container'), {
|
||||
view: {
|
||||
leakAreaHeight: 130,
|
||||
@ -98,207 +93,48 @@
|
||||
},
|
||||
});
|
||||
|
||||
|
||||
let data = [
|
||||
{
|
||||
pctree:{
|
||||
LinkStack0: {
|
||||
data: [
|
||||
{
|
||||
id: 1,
|
||||
data: 'a',
|
||||
type: 'PCTreeHead',
|
||||
parent: '-1',
|
||||
headNext: 'PCTreeNode#2',
|
||||
index: 0,
|
||||
root: true
|
||||
|
||||
id: '0x616eb0',
|
||||
data: '',
|
||||
next: '0x616ed0',
|
||||
headExternal: ['ls'],
|
||||
type: 'default',
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
type: 'PCTreeNode',
|
||||
data: 1,
|
||||
next: 'PCTreeNode#3'
|
||||
id: '0x616ed0',
|
||||
data: 'f',
|
||||
external: ['p'],
|
||||
next: '0x616ef0',
|
||||
type: 'default',
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
type: 'PCTreeNode',
|
||||
data: 1,
|
||||
},
|
||||
{
|
||||
id: 4,
|
||||
data: 'b',
|
||||
type: 'PCTreeHead',
|
||||
parent: '0',
|
||||
index: 1,
|
||||
id: '0x616ef0',
|
||||
data: 'g',
|
||||
external: ['p1'],
|
||||
next: null,
|
||||
type: 'default',
|
||||
},
|
||||
],
|
||||
layouter: 'PCTree'
|
||||
}
|
||||
layouter: 'LinkStack',
|
||||
},
|
||||
{
|
||||
pctree:{
|
||||
LinkStack1: {
|
||||
data: [
|
||||
{
|
||||
id: 1,
|
||||
data: 'a',
|
||||
type: 'PCTreeHead',
|
||||
parent: '-1',
|
||||
headNext: 'PCTreeNode#2',
|
||||
index: 0,
|
||||
root: true
|
||||
|
||||
id: '0x616f10',
|
||||
data: '',
|
||||
next: 'LinkStack0#0x616ef0',
|
||||
headExternal: ['ls1'],
|
||||
type: 'default',
|
||||
},
|
||||
{
|
||||
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,
|
||||
curData = data[dataIndex];
|
||||
@ -348,13 +184,10 @@
|
||||
// -------------------------------------------------------------------------------------------------------
|
||||
|
||||
container.addEventListener('mousemove', e => {
|
||||
let x = e.offsetX, y = e.offsetY;
|
||||
let x = e.offsetX,
|
||||
y = e.offsetY;
|
||||
pos.innerHTML = `${x},${y}`;
|
||||
});
|
||||
|
||||
|
||||
|
||||
</script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
6
dist/sv.js
vendored
6
dist/sv.js
vendored
File diff suppressed because one or more lines are too long
@ -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;
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
@ -1,13 +1,11 @@
|
||||
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;
|
||||
@ -29,7 +27,17 @@ export class SVNode extends SVModel {
|
||||
public addressLabel: SVAddressLabel;
|
||||
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');
|
||||
|
||||
this.group = group;
|
||||
@ -66,9 +74,9 @@ export class SVNode extends SVModel {
|
||||
label: this.label as string,
|
||||
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 {
|
||||
return this.sourceId;
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
|
||||
|
||||
/**
|
||||
* 判断这个节点是否来自相同group
|
||||
* @param node
|
||||
*/
|
||||
isSameGroup(node: SVNode): boolean {
|
||||
return this.modelConstructor.isSameGroup(this, node);
|
||||
}
|
||||
}
|
||||
|
||||
@ -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;
|
||||
}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user