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

添加多种数据结构支持

Browse Source
This commit is contained in:
黎智洲 2021-04-24 20:48:54 +08:00
parent 579c72939c
commit 7e6789c8de
13 changed files with 171 additions and 72 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

80
demo/dataStruct/BinaryTree.js
View File

@ -43,6 +43,11 @@ class BinaryTree extends Engine {
offset: 14,
style: {
fill: '#f08a5d'
},
labelOptions: {
style: {
fill: '#000099'
}
}
}
},
@ -165,63 +170,26 @@ const BTree = function(container) {
return{
engine: new BinaryTree(container),
data: [
// [
// { id: 1, child: [2, 3], root: true, external: ['treeA', 'gear'] },
// { id: 2, child: [null, 6] },
// { id: 3, child: [5, 4] },
// { id: 4, external: 'foo' },
// { id: 5 },
// { id: 6, external: 'bar', child: [null, 7] },
// { id: 7 },
// { id: 8, child: [9, 10], root: true },
// { id: 9, child: [11, null] },
// { id: 10 },
// { id: 11 }
// ],
// [
// { id: 1, child: [2, 3], root: true, external: 'treeA' },
// { id: 2, external: 'gear' },
// { id: 3, child: [5, 4] },
// { id: 4, external: 'foo' },
// { id: 5, child: [12, 13] },
// { id: 12 }, { id: 13 }
// ]
[
{
"external": [
"r",
"T1"
],
"child": [
6385376,
6385424
],
"id": 6385328,
"name": "T1",
"data": "Z",
"root": true
},
{
"child": [
0,
0
],
"id": 6385376,
"name": "T1.lchild",
"data": "A"
},
{
"external": [
"t"
],
"child": [
0,
0
],
"id": 6385424,
"name": "T1.rchild",
"data": "B"
}
{ id: 1, child: [2, 3], root: true, external: ['treeA', 'gear'] },
{ id: 2, child: [null, 6] },
{ id: 3, child: [5, 4] },
{ id: 4, external: 'foo', child: [5, null] },
{ id: 5 },
{ id: 6, external: 'bar', child: [null, 7] },
{ id: 7 },
{ id: 8, child: [9, 10], root: true },
{ id: 9, child: [11, null] },
{ id: 10 },
{ id: 11 }
],
[
{ id: 1, child: [2, 3], root: true, external: 'treeA' },
{ id: 2, external: 'gear' },
{ id: 3, child: [5, 4] },
{ id: 4, external: 'foo' },
{ id: 5, child: [12, 13] },
{ id: 12 }, { id: 13 }
]
]
}

8
demo/dataStruct/Graph.js
View File

@ -41,11 +41,11 @@ class Graph extends Engine {
radius = layoutOptions.radius,
intervalAngle = 2 * Math.PI / nodes.length;
for (let i = 0; i < nodes.length; i++) {
let [x, y] = Vector.rotation(-intervalAngle * i, [0, -radius]);
for (let i = 0; i < nodes.length; i++) {
let [x, y] = Vector.rotation(-intervalAngle * i, [0, -radius]);
nodes[i].set({x, y});
}
nodes[i].set({x, y});
}
}
}

74
demo/dataStruct/RingArray.js Normal file
View File

@ -0,0 +1,74 @@
class RingArray extends Engine {
defineOptions() {
return {
element: {
default: {
type: 'rect',
label: '[id]',
size: [60, 30],
style: {
stroke: '#333',
fill: '#95e1d3'
}
}
},
pointer: {
external: {
offset: 8,
style: {
fill: '#f08a5d'
}
}
},
interaction: {
dragNode: false
}
};
}
layout(elements) {
let arr = elements.default,
width = arr[0].get('size')[0],
radius = width * 1.1 / (2 * Math.sin(Math.PI / arr.length)),
intervalAngle = 2 * Math.PI / arr.length;
for (let i = 0; i < arr.length; i++) {
let [x, y] = Vector.rotation(-intervalAngle * i, [0, radius]);
arr[i].set({x, y});
arr[i].set('rotation', intervalAngle * i);
}
}
}
const RA = function(container) {
return{
engine: new RingArray(container),
data: [[
{ id: 1 },
{ id: 2 },
{ id: 3 },
{ id: 4 },
{ id: 5 },
{ id: 6 },
{ id: 7 },
{ id: 8 },
{ id: 9 },
{ id: 10 }
],
[
{ id: 1 },
{ id: 2 },
{ id: 3 },
{ id: 6 },
{ id: 7 },
{ id: 8 }
]]
}
};

19
demo/dataStruct/linkList.js
View File

@ -33,6 +33,23 @@ class LinkList extends Engine {
fill: '#333'
}
}
},
loopNext: {
type: 'arc',
curveOffset: 50,
sourceAnchor: 1,
targetAnchor: 3,
style: {
stroke: '#333',
endArrow: {
path: G6.Arrow.triangle(6, 6, -2),
fill: '#333'
},
startArrow: {
path: G6.Arrow.circle(2, -1),
fill: '#333'
}
}
}
},
pointer: {
@ -107,7 +124,7 @@ const LList = function(container) {
{ id: 2, next: 3 },
{ id: 3, next: 4 },
{ id: 4, next: 5 },
{ id: 5 },
{ id: 5, loopNext: 6 },
{ id: 6, root: true, next: 7 },
{ id: 7, next: 8 },
{ id: 8, next: 4 },

5
demo/demo.html
View File

@ -48,11 +48,12 @@ const Engine = SV.Engine,
<script src="./dataStruct/LinkQueue.js"></script>
<script src="./dataStruct/Graph.js"></script>
<script src="./dataStruct/DirectedGraph.js"></script>
<script src="./dataStruct/RingArray.js"></script>
<script>
const engines = [BTree, LList, A, CHT, St, LStack, LQueue, G, DG];
const engines = [BTree, LList, A, CHT, St, LStack, LQueue, G, DG, RA];
let cur = engines[8](document.getElementById('container'));
let cur = engines[9](document.getElementById('container'));
cur.engine.render(cur.data[0]);

2
dist/sv.js vendored
View File

File diff suppressed because one or more lines are too long

3
src/Common/util.ts
View File

@ -1,7 +1,6 @@
import { Engine } from "../engine";
import { ConstructedData } from "../Model/modelConstructor";
import { SV } from "../StructV";
import { G6Data, Renderer } from "../View/renderer";
import { G6Data } from "../View/renderer";
/**

18
src/Model/modelData.ts
View File

@ -2,6 +2,7 @@ import { Util } from "../Common/util";
import { ElementLabelOption, ElementOption, LinkLabelOption, LinkOption, PointerOption, Style } from "../options";
import { SourceElement } from "../sources";
import { BoundingRect } from "../View/boundingRect";
import { SV } from './../StructV';
export interface G6NodeModel {
@ -26,6 +27,8 @@ export interface G6EdgeModel {
source: string | number;
target: string | number;
type: string;
controlPoints: { x: number, y: number }[];
curveOffset: number;
sourceAnchor: number | ((index: number) => number);
targetAnchor: number | ((index: number) => number);
label: string;
@ -105,6 +108,10 @@ export class Model {
return;
}
if(this.props[attr] === value) {
return;
}
if(attr === 'style' || attr === 'labelCfg') {
Object.assign(this.props[attr], value);
}
@ -143,7 +150,9 @@ export class Model {
*/
getMatrix(): number[] {
if(this.G6Item === null) return null;
return this.G6Item.getContainer().getMatrix();
// return this.G6Item.getContainer().getMatrix();
const Mat3 = SV.G6.Util.mat3;
return Mat3.create();
}
}
@ -152,6 +161,7 @@ export class Element extends Model {
modelType = 'element';
sourceElement: SourceElement;
sourceId: string;
free: boolean;
constructor(id: string, type: string, sourceElement: SourceElement) {
super(id, type);
@ -163,6 +173,7 @@ export class Element extends Model {
});
this.sourceId = this.id.split('.')[1];
this.free = false;
}
protected defineProps(option: ElementOption) {
@ -222,8 +233,11 @@ export class Link extends Model {
label: option.label,
style: Util.objectClone<Style>(option.style),
labelCfg: Util.objectClone<LinkLabelOption>(option.labelOptions),
controlPoints: option.controlPoints,
curveOffset: option.curveOffset,
modelType: this.modelType,
modelName: this.modelName
modelName: this.modelName,
zIndex: 20
};
}
};

2
src/RegisteredShape/binaryTreeNode.ts
View File

@ -16,7 +16,7 @@ export default G6.registerNode('binary-tree-node', {
height: height,
stroke: cfg.style.stroke,
cursor: cfg.style.cursor,
fill: 'transparent'
fill: '#eee'
},
name: 'wrapper'
});

2
src/RegisteredShape/linkListNode.ts
View File

@ -15,7 +15,7 @@ export default G6.registerNode('link-list-node', {
width: width,
height: height,
stroke: cfg.style.stroke,
fill: 'transparent'
fill: '#eee'
},
name: 'wrapper'
});

2
src/RegisteredShape/twoCellNode.ts
View File

@ -16,7 +16,7 @@ export default G6.registerNode('two-cell-node', {
width: width,
height: height,
stroke: cfg.style.stroke,
fill: 'transparent'
fill: '#eee'
},
name: 'wrapper'
});

26
src/View/renderer.ts
View File

@ -43,6 +43,7 @@ export class Renderer {
container: DOMContainer,
width: DOMContainer.offsetWidth,
height: DOMContainer.offsetHeight,
groupByTypes: false,
animate: enable,
animateCfg: {
duration: duration,
@ -133,6 +134,14 @@ export class Renderer {
};
}
/**
* 查找被释放的节点
* @param constructedData
*/
private findFreedItems(constructedData: ConstructedData): G6NodeModel[] {
return Util.converterList(constructedData.element).filter(item => item.free).map(item => item.G6Item);
}
/**
* 处理新增的 G6Item（主要是动画）
* @param appendData
@ -165,6 +174,12 @@ export class Renderer {
});
}
/**
* 处理被 free 的 G6Item
* @param freedItems
*/
private handleFreedItems(freedItems: G6NodeModel[]) { }
/**
* 构建 G6 元素
* @param constructedData
@ -197,6 +212,7 @@ export class Renderer {
*/
public render(constructedData: ConstructedData) {
let data: G6Data = Util.convertG6Data(constructedData),
freedItems = this.findFreedItems(constructedData),
renderData: G6Data = null,
appendData: G6Data = null,
removeData: G6Data = null;
@ -212,7 +228,6 @@ export class Renderer {
if(this.isFirstRender) {
this.graphInstance.read(renderData);
this.isFirstRender = false;
}
else {
this.graphInstance.changeData(renderData);
@ -229,6 +244,15 @@ export class Renderer {
item.renderG6Item = this.graphInstance.findById(item.id);
item.G6Item = item.renderG6Item;
});
if(this.isFirstRender) {
this.graphInstance.getEdges().forEach(item => item.toFront());
this.graphInstance.paint();
}
if(this.isFirstRender) {
this.isFirstRender = false;
}
}
/**

2
src/options.ts
View File

@ -46,6 +46,8 @@ export interface LinkOption {
sourceAnchor: number | ((index: number) => number);
targetAnchor: number | ((index: number) => number);
label: string;
controlPoints: { x: number, y: number }[];
curveOffset: number;
labelOptions: LinkLabelOption;
style: Style;
}