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

修改PCTree结构

Browse Source
This commit is contained in:
zhenggengtong 2022-01-26 02:09:13 +08:00
parent 24527ea913
commit db67f5c64c
8 changed files with 405 additions and 13999 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

124
demoV2/Layouter/PCTree.js Normal file
View File

@ -0,0 +1,124 @@
SV.registerLayout('PCTree', {
sourcesPreprocess(sources) {
sources[0].rootLabel = ['data', 'parent', 'fistChild'];
return sources;
},
defineOptions() {
return {
node: {
PCTreeHead: {
type: 'three-cell',
label: ['[data]','[parent]'],
size: [210, 33],
style: {
stroke: '#333',
fill: '#95e1d3'
}
},
PCTreeNode: {
type: 'link-list-node',
label: '[data]',
size: [60, 27],
style: {
stroke: '#333',
fill: '#95e1d3'
}
}
},
link: {
headNext: {
sourceAnchor: 1,
targetAnchor: 6,
style: {
stroke: '#333',
endArrow: {
path: G6.Arrow.triangle(8, 6, 0),
fill: '#333'
},
startArrow: {
path: G6.Arrow.circle(2, -1),
fill: '#333'
}
}
},
next: {
sourceAnchor: 2,
targetAnchor: 6,
style: {
stroke: '#333',
endArrow: {
path: G6.Arrow.triangle(8, 6, 0),
fill: '#333'
},
startArrow: {
path: G6.Arrow.circle(2, -1),
fill: '#333'
}
}
}
},
layout: {
xInterval: 50
},
behavior: {
dragNode: false
}
};
},
/**
* 对子树进行递归布局
* @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 headNode = elements.filter(item => item.type === 'PCTreeHead'),
i;
for(i = 0; i < headNode.length; i++) {
let node = headNode[i],
height = node.get('size')[1],
width = node.get('size')[0];
node.set({
x: 0,
y: i * height
});
if(node.headNext) {
let y = node.get('y') + height - node.headNext.get('size')[1],
x = width + layoutOptions.xInterval * 3;
node.headNext.set({ x, y });
this.layoutItem(node.headNext, null, layoutOptions);
}
}
}
});

45
demoV2/demo2.html
View File

@ -87,6 +87,7 @@
<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>
@ -98,7 +99,49 @@
});
let data = [{
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',
headNext: 'PCTreeNode#5',
index: 1,
},
{
id: 5,
type: 'PCTreeNode',
data: 2,
},
],
layouter: 'PCTree'
}
},
{
"sqStack0": {
"data": [
{

14027
dist/sv.js vendored
View File

File diff suppressed because one or more lines are too long

2
src/Model/SVModel.ts
View File

@ -2,7 +2,7 @@ import { Util } from "../Common/util";
import { Style } from "../options";
import { BoundingRect } from "../Common/boundingRect";
import { EdgeConfig, Item, NodeConfig } from "@antv/g6-core";
import { Graph } from "_@antv_g6-pc@0.5.0@@antv/g6-pc";
import { Graph } from "@antv/g6-pc";
import merge from 'merge';

188
src/RegisteredShape/threeCellNode.ts Normal file
View File

@ -0,0 +1,188 @@
/*
* @Author: your name
* @Date: 2022-01-18 20:42:31
* @LastEditTime: 2022-01-26 01:59:47
* @LastEditors: Please set LastEditors
* @Description: 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
* @FilePath: \测试数据c:\Users\13127\Desktop\最近的前端文件\可视化源码-new\StructV2\src\RegisteredShape\treeCellNode.ts
*/
import { registerNode } from '@antv/g6';
export default registerNode('three-cell', {
draw(cfg, group) {
cfg.size = cfg.size || [30, 10];
const width = cfg.size[0],
height = cfg.size[1];
const wrapperRect = group.addShape('rect', {
attrs: {
x: width / 2,
y: height / 2,
width: width,
height: height,
stroke: cfg.style.stroke,
fill: cfg.style.backgroundFill || '#eee'
},
name: 'wrapper'
});
group.addShape('rect', {
attrs: {
x: width / 2,
y: height / 2,
width: width / 3,
height: height,
fill: cfg.style.fill,
stroke: cfg.style.stroke
},
name: 'left-rect',
draggable: true
});
group.addShape('rect', {
attrs: {
x: width * (5 / 6),
y: height / 2,
width: width / 3,
height: height,
fill: cfg.style.fill,
stroke: cfg.style.stroke
},
name: 'middle-rect',
draggable: true
});
const style = (cfg.labelCfg && cfg.labelCfg.style) || {};
//节点上方文字
if(cfg.root && cfg.rootLabel){
group.addShape('text', {
attrs: {
x: width * (2 / 3),
y: 0,
textAlign: 'center',
textBaseline: 'middle',
text: cfg.rootLabel[0],
fill: style.fill || '#000',
fontSize: style.fontSize || 16,
cursor: cfg.style.cursor,
},
name: 'text',
draggable: true
});
group.addShape('text', {
attrs: {
x: width,
y: 0,
textAlign: 'center',
textBaseline: 'middle',
text: cfg.rootLabel[1],
fill: style.fill || '#000',
fontSize: style.fontSize || 16,
cursor: cfg.style.cursor,
},
name: 'text',
draggable: true
});
group.addShape('text', {
attrs: {
x: width * (4 / 3),
y: 0,
textAlign: 'center',
textBaseline: 'middle',
text: cfg.rootLabel[2],
fill: style.fill || '#000',
fontSize: style.fontSize || 16,
cursor: cfg.style.cursor,
},
name: 'text',
draggable: true
});
}
//节点左边文字
if(cfg.index !== null){
group.addShape('text', {
attrs: {
x: width * (2 / 5),
y: height,
textAlign: 'center',
textBaseline: 'middle',
text: cfg.index,
fill: style.fill || '#000',
fontSize: style.fontSize || 16,
cursor: cfg.style.cursor,
},
name: 'text',
draggable: true
});
}
//节点文字（数组形式）
if(cfg.label) {
group.addShape('text', {
attrs: {
x: width * (2 / 3),
y: height,
textAlign: 'center',
textBaseline: 'middle',
text: cfg.label[0],
fill: style.fill || '#000',
fontSize: style.fontSize || 16,
cursor: cfg.style.cursor,
},
name: 'text',
draggable: true
});
group.addShape('text', {
attrs: {
x: width,
y: height,
textAlign: 'center',
textBaseline: 'middle',
text: cfg.label[1],
fill: style.fill || '#000',
fontSize: style.fontSize || 16,
cursor: cfg.style.cursor,
},
name: 'text',
draggable: true
});
}
//节点没有后续指针时
if(!cfg.headNext){
group.addShape('text', {
attrs: {
x: width * (4 / 3),
y: height * ( 6 / 5),
textAlign: 'center',
textBaseline: 'middle',
text: '^',
fill: style.fill || '#000',
fontSize: 25,
cursor: cfg.style.cursor,
},
name: 'text',
draggable: true
});
}
return wrapperRect;
},
getAnchorPoints() {
return [
[0.5, 0],
[5 / 6, 0.5],
[0.5, 1],
[0, 0.5]
];
}
});

10
src/StructV.ts
View File

@ -1,3 +1,11 @@
/*
* @Author: your name
* @Date: 2022-01-26 01:58:25
* @LastEditTime: 2022-01-26 02:06:16
* @LastEditors: your name
* @Description: 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
* @FilePath: \测试数据c:\Users\13127\Desktop\最近的前端文件\可视化0126\StructV2\src\StructV.ts
*/
import { Engine } from "./engine";
import { Bound } from "./Common/boundingRect";
import { Group } from "./Common/group";
@ -7,6 +15,7 @@ import LinkListNode from "./RegisteredShape/linkListNode";
import BinaryTreeNode from "./RegisteredShape/binaryTreeNode";
import CLenQueuePointer from "./RegisteredShape/clenQueuePointer";
import TwoCellNode from "./RegisteredShape/twoCellNode";
import ThreeCellNode from "./RegisteredShape/threeCellNode";
import ArrayNode from "./RegisteredShape/arrayNode";
import Cursor from "./RegisteredShape/cursor";
import { Vector } from "./Common/vector";
@ -58,6 +67,7 @@ SV.registeredShape = [
LinkListNode,
BinaryTreeNode,
TwoCellNode,
ThreeCellNode,
Cursor,
ArrayNode,
CLenQueuePointer,

3
tsconfig.json
View File

@ -2,7 +2,8 @@
"compilerOptions": {
"target": "ES2015",
"module": "commonJS",
"removeComments": true
"removeComments": true,
"lib": ["DOM", "ES2015", "ES2016"]
},
"exclude": [
"node_modules"

5
yarn.lock
View File

@ -1970,6 +1970,11 @@ memory-fs@^0.5.0:
errno "^0.1.3"
readable-stream "^2.0.1"
merge@^2.1.1:
version "2.1.1"
resolved "https://registry.yarnpkg.com/merge/-/merge-2.1.1.tgz#59ef4bf7e0b3e879186436e8481c06a6c162ca98"
integrity sha512-jz+Cfrg9GWOZbQAnDQ4hlVnQky+341Yk5ru8bZSe6sIDTCIg8n9i/u7hSQGSVOF3C7lH6mGtqjkiT9G4wFLL0w==
micromatch@^3.0.4, micromatch@^3.1.10, micromatch@^3.1.4:
version "3.1.10"
resolved "https://registry.yarnpkg.com/micromatch/-/micromatch-3.1.10.tgz#70859bc95c9840952f359a068a3fc49f9ecfac23"