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

fix: 大量bug修复

Browse Source
This commit is contained in:
黎智洲 2021-12-11 16:10:12 +08:00
parent 0291c74523
commit f6ab581815
21 changed files with 1551 additions and 1289 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
README.md
View File

@ -4,10 +4,11 @@
```javascript
1. git clone
2. npm install
// 开发环境：
3. npm run dev
// 打包出生产环境产物
4. npm run build
```
### 源码里一些概念解释
1. `Model`里的`defineProps`方法是干什么的？
2. `ViewManager`里面的`shadowG6Instance`属性是干什么的？
3. `ModelConstructor`里面的`constructLinks`和`constructMarkers`具体做了什么工作？

12
copyDist2Anyview.js Normal file
View File

@ -0,0 +1,12 @@
const fs = require('fs');
const sourcePath = 'D:\\个人项目\\v\\StructV2\\dist\\sv.js';
const targetPath = 'D:\\个人项目\\anyview项目\\froend_student\\src\\pages\\student\\assets\\js\\sv.js'
function COPY(from, to) {
const file = fs.readFileSync(from);
fs.writeFileSync(to, file);
}
COPY(sourcePath, targetPath);

64
demoV2/Layouter/Array.js
View File

@ -66,3 +66,67 @@ SV.registerLayout('Array', {
}
});
SV.registerLayout('Array', {
sourcesPreprocess(sources) {
const firstElement = sources[0];
if(firstElement.external) {
firstElement.headExternal = firstElement.external;
delete firstElement.external;
}
return sources;
},
defineOptions() {
return {
element: {
default: {
type: 'indexed-node',
label: '[id]',
size: [60, 30],
style: {
stroke: '#333',
fill: '#355c7d'
},
indexOptions: {
index: { position: 'bottom' },
indexTop: { position: 'top' }
}
}
},
marker: {
headExternal: {
type: 'pointer',
anchor: 3,
style: {
fill: '#f08a5d'
}
},
external: {
type: 'pointer',
anchor: 0,
style: {
fill: '#f08a5d'
}
}
}
};
},
layout(elements) {
let arr = elements;
for(let i = 0; i < arr.length; i++) {
let width = arr[i].get('size')[0];
if(i > 0) {
arr[i].set('x', arr[i - 1].get('x') + width);
}
}
}
}, 'colorful');

120
demoV2/Layouter/SqQueue.js Normal file
View File

@ -0,0 +1,120 @@
SV.registerLayout('SqQueue', {
defineOptions() {
return {
node: {
head: {
type: 'rect',
anchorPoints: [
[0.5, 0],
[1, 0.5],
[0.5, 1],
[0, 0.5]
],
size: [60, 30],
label: '[data]',
style: {
fill: '#95e1d3',
stroke: "#333",
cursor: 'pointer'
},
},
node: {
type: 'indexed-node',
size: [60, 30],
label: '[data]',
style: {
fill: '#95e1d3',
stroke: "#333",
cursor: 'pointer'
}
}
},
link: {
front: {
type: 'polyline',
sourceAnchor: 1,
targetAnchor: 5,
style: {
stroke: '#333',
endArrow: 'default'
}
},
rear: {
type: 'polyline',
sourceAnchor: 1,
targetAnchor: 5,
style: {
stroke: '#333',
endArrow: 'default'
}
}
},
marker: {
external: {
type: 'pointer',
anchor: 0,
offset: 8,
labelOffset: 2,
style: {
fill: '#f08a5d'
}
},
cursor: {
type: 'cursor',
anchor: 0,
offset: 8,
labelOffset: 2,
style: {
fill: '#f08a5d'
}
}
}
};
},
layout(elements) {
let head = elements.filter(item => item.type === 'head'),
head1 = head[0],
head2 = head[1],
nodes = elements.filter(item => item.type !== 'head'),
headHeight = head1.get('size')[1],
headWidth = head1.get('size')[0],
nodeHeight = 0,
x = 0, y = 0;
if (nodes.length) {
let firstNode = nodes[0];
nodeHeight = firstNode.get('size')[1];
x = -50;
y = firstNode.get('y');
for (let i = 1; i < nodes.length; i++) {
let width = nodes[i].get('size')[0];
nodes[i].set('x', nodes[i - 1].get('x') + width);
if (nodes[i].empty) {
nodes[i].set('style', {
fill: null
});
}
}
}
head1.set({ x, y: y + nodeHeight * 3 });
if (nodes.length) {
head2.set({ x, y: head1.get('y') + headHeight });
}
else {
head2.set({ x: x + headWidth, y });
}
}
});

54
demoV2/demo2.html
View File

@ -61,6 +61,7 @@
<button id="btn-next">next</button>
<button id="resize">resize</button>
<button id="relayout">relayout</button>
<button id="switch-mode">switch mode</button>
<span id="pos"></span>
<script src="./../dist/sv.js"></script>
@ -83,6 +84,7 @@
<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>
const curSelectData = { element: null, style: null };
@ -96,42 +98,31 @@
let data = [{
"LinkList0": {
"data": [
{ id: 0, data: 'A', index: 1 },
{ id: 1, data: 'B', index: 2 },
{ id: 2, data: 'C' }
],
"layouter": "Array"
},
"LinkList1": {
"data": [
{ id: 10, data: 'A', next: 11 },
{ id: 11, data: 'B', next: 12 },
{ id: 12, data: 'C', next: 13 },
{ id: 13, data: 'D' }
],
"layouter": "LinkList"
Array: {
data: [{ id: 1, data: 1 }, { id: 2, data: 2 }, { id: 3, data: 3 }, { id: 4, data: 4 }],
layouter: 'Array'
}
}, {
"LinkList0": {
"data": [
{ id: 10, data: 'A', next: 11, external: 'true' },
{ id: 11, next: 12, freed: true }
],
"layouter": "LinkList"
Array: {
data: [{ id: 1, data: 1 }, { id: 2, data: 2 }, { id: 3, data: 3 }],
layouter: 'Array'
}
}, {
"LinkList0": {
"data": [
{ id: 0, data: 'A' }
],
"layouter": "LinkList"
Array: {
data: [{ id: 1, data: 1 }, { id: 2, data: 2 }],
layouter: 'Array'
}
}, {
Array: {
data: [{ id: 1, data: 1 }, { id: 5, data: 5 }],
layouter: 'Array'
}
}];
let dataIndex = 0,
curData = data[dataIndex];
@ -156,19 +147,22 @@
});
document.getElementById('resize').addEventListener('click', e => {
container.style.height = 400 + 'px';
container.style.height = 800 + 'px';
cur.resize(container.offsetWidth, container.offsetHeight);
});
document.getElementById('relayout').addEventListener('click', e => {
console.log();
cur.reLayout();
});
document.getElementById('switch-mode').addEventListener('click', e => {
cur.switchMode('Array', 'colorful');
});
const leak = document.getElementById('leak');
cur.on('onLeakAreaUpdate', payload => {
leak.style.opacity = payload.hasLeak? 1: 0;
leak.style.opacity = payload.hasLeak ? 1 : 0;
leak.style.top = payload.leakAreaY - 40 + 'px';
});

2396
dist/sv.js vendored
View File

File diff suppressed because one or more lines are too long

12
package.json
View File

@ -3,13 +3,15 @@
"@antv/g6": "^4.4.1"
},
"devDependencies": {
"webpack": "^4.46.0",
"webpack-cli": "^3.2.3",
"ts-loader": "^5.2.1",
"typescript": "^3.2.2"
"typescript": "^3.2.2",
"webpack": "^4.46.0",
"webpack-cli": "^3.2.3"
},
"scripts": {
"build": "tsc && webpack",
"dev": "webpack --w"
"build": "webpack --config webpack.config.product.js",
"dep": "webpack --config webpack.config.product.js && node copyDist2Anyview.js",
"dev": "webpack --w --config webpack.config.develop.js",
"copy": "node copyDist2Anyview.js"
}
}

2
src/Common/util.ts
View File

@ -25,7 +25,7 @@ export const Util = {
* @param obj
*/
objectClone<T extends Object>(obj: T): T {
return obj? JSON.parse(JSON.stringify(obj)): { };
return obj? JSON.parse(JSON.stringify(obj)): null;
},
/**

3
src/Model/SVModel.ts
View File

@ -102,7 +102,8 @@ export class SVModel {
// 更新G6Item
if (this.G6Item) {
if (this.preLayout) {
this.G6Item.getModel()[attr] = value;
const G6ItemModel = this.G6Item.getModel();
G6ItemModel[attr] = value;
}
else {
this.g6Instance.updateItem(this.G6Item, this.G6ModelProps);

2
src/Model/SVNode.ts
View File

@ -116,7 +116,7 @@ export class SVNode extends SVModel {
}
protected generateG6ModelProps(options: NodeOption): NodeConfig {
let indexOptions = Util.objectClone<NodeIndexOption>(options.indexOptions);
let indexOptions = Util.objectClone<NodeIndexOption>(options.indexOptions) || { index: { position: 'bottom' } };
if (indexOptions) {
Object.keys(indexOptions).map(key => {

9
src/Model/modelConstructor.ts
View File

@ -43,13 +43,13 @@ export class ModelConstructor {
*/
public construct(sources: Sources): LayoutGroupTable {
const layoutGroupTable = new Map<string, LayoutGroup>(),
layoutMap: { [key: string]: LayoutCreator } = SV.registeredLayout,
optionsTable = this.engine.optionsTable;
layoutMap: { [key: string]: { [key: string]: LayoutCreator } } = SV.registeredLayout;
Object.keys(sources).forEach(group => {
let sourceGroup = sources[group],
layout = sourceGroup.layouter,
layoutCreator: LayoutCreator = layoutMap[layout];
mode = sourceGroup.mode || 'default',
layoutCreator: LayoutCreator = layoutMap[layout][mode];
if (!layout || !layoutCreator) {
return;
@ -66,7 +66,7 @@ export class ModelConstructor {
return;
}
const options: LayoutGroupOptions = optionsTable[layout],
const options: LayoutGroupOptions = layoutCreator.defineOptions(sourceGroup.data),
sourceData = layoutCreator.sourcesPreprocess(sourceGroup.data, options),
nodeOptions = options.node || options['element'] || {},
markerOptions = options.marker || {};
@ -396,5 +396,6 @@ export class ModelConstructor {
*/
destroy() {
this.layoutGroupTable = null;
this.prevSourcesStringMap = null;
}
};

10
src/StructV.ts
View File

@ -26,7 +26,7 @@ export interface StructV {
registeredShape: any[];
registeredLayout: { [key: string]: LayoutCreator },
registeredLayout: { [key: string]: { [key: string]: LayoutCreator } },
registerShape: Function,
@ -61,7 +61,7 @@ SV.registeredShape = [
];
SV.registerShape = G6.registerNode;
SV.registerLayout = function(name: string, layoutCreator: LayoutCreator) {
SV.registerLayout = function(name: string, layoutCreator: LayoutCreator, mode: string = 'default') {
if(typeof layoutCreator.sourcesPreprocess !== 'function') {
layoutCreator.sourcesPreprocess = function(data: SourceNode[]): SourceNode[] {
@ -78,8 +78,12 @@ SV.registerLayout = function(name: string, layoutCreator: LayoutCreator) {
if(typeof layoutCreator.defineOptions !== 'function' || typeof layoutCreator.layout !== 'function') {
return;
}
if(SV.registeredLayout[name] === undefined) {
SV.registeredLayout[name] = {};
}
SV.registeredLayout[name] = layoutCreator;
SV.registeredLayout[name][mode] = layoutCreator;
};

1
src/View/layoutProvider.ts
View File

@ -265,6 +265,7 @@ export class LayoutProvider {
* @param layoutGroupTable
* @param leakModels
* @param hasLeak
* @param needFitCenter
*/
public layoutAll(layoutGroupTable: LayoutGroupTable, accumulateLeakModels: SVModel[], leakModels: SVModel[]) {
this.preLayoutProcess(layoutGroupTable);

15
src/View/reconcile.ts
View File

@ -25,11 +25,13 @@ export class Reconcile {
private engine: Engine;
private renderer: Renderer;
private prevChangeModels: SVModel[];
private isFirstPatch: boolean;
constructor(engine: Engine, renderer: Renderer) {
this.engine = engine;
this.renderer = renderer;
this.prevChangeModels = [];
this.isFirstPatch = true;
}
@ -316,6 +318,10 @@ export class Reconcile {
* @param models
*/
private handleChangeModels(models: SVModel[]) {
if(models.length === 0) {
models = this.prevChangeModels;
}
const changeHighlightColor: string = this.engine.viewOptions.updateHighlight;
if (!changeHighlightColor || typeof changeHighlightColor !== 'string') {
@ -338,6 +344,8 @@ export class Reconcile {
});
}
});
this.prevChangeModels = models;
}
@ -389,6 +397,8 @@ export class Reconcile {
ACCUMULATE_LEAK
} = diffResult;
this.handleAccumulateLeakModels(ACCUMULATE_LEAK);
// 第一次渲染的时候不高亮变化的元素
if (this.isFirstPatch === false) {
this.handleChangeModels(UPDATE);
@ -399,10 +409,13 @@ export class Reconcile {
this.handleAppendModels(APPEND);
this.handleLeakModels(LEAKED);
this.handleRemoveModels(REMOVE);
this.handleAccumulateLeakModels(ACCUMULATE_LEAK);
if(this.isFirstPatch) {
this.isFirstPatch = false;
}
}
public destroy() {
this.prevChangeModels.length = 0;
}
}

3
src/View/renderer.ts
View File

@ -115,6 +115,9 @@ export class Renderer {
item.G6Item = this.g6Instance.findById(item.id);
item.G6Item['SVModel'] = item;
});
this.g6Instance.getEdges().forEach(item => item.toFront());
this.g6Instance.paint();
}
/**

34
src/View/viewContainer.ts
View File

@ -61,8 +61,19 @@ export class ViewContainer {
* 对主视图进行重新布局
*/
reLayout() {
this.layoutProvider.layoutAll(this.prevLayoutGroupTable, [], this.accumulateLeakModels);
this.getG6Instance().refresh();
const g6Instance = this.getG6Instance(),
group = g6Instance.getGroup(),
matrix = group.getMatrix();
if (matrix) {
let dx = matrix[6],
dy = matrix[7];
g6Instance.translate(-dx, -dy);
}
this.layoutProvider.layoutAll(this.prevLayoutGroupTable, this.accumulateLeakModels, []);
g6Instance.refresh();
}
@ -156,6 +167,11 @@ export class ViewContainer {
*/
destroy() {
this.renderer.destroy();
this.reconcile.destroy();
this.layoutProvider = null;
this.prevLayoutGroupTable = null;
this.prevModelList.length = 0;
this.accumulateLeakModels.length = 0;
}
@ -163,15 +179,9 @@ export class ViewContainer {
/**
* 把渲染前要触发的逻辑放在这里
* 把渲染后要触发的逻辑放在这里
*/
private afterRender() {
const g6Instance = this.renderer.getG6Instance();
// 把所有连线置顶
g6Instance.getEdges().forEach(item => item.toFront());
g6Instance.paint();
this.prevModelList.forEach(item => {
if (item.leaked === false) {
item.discarded = true;
@ -180,11 +190,9 @@ export class ViewContainer {
}
/**
* 把渲染后要触发的逻辑放在这里
* 把渲染前要触发的逻辑放在这里
*/
private beforeRender() {
}
private beforeRender() { }
}

59
src/engine.ts
View File

@ -1,6 +1,6 @@
import { Sources } from "./sources";
import { ModelConstructor } from "./Model/modelConstructor";
import { AnimationOptions, EngineOptions, InteractionOptions, LayoutGroupOptions, ViewOptions } from "./options";
import { AnimationOptions, EngineOptions, InteractionOptions, ViewOptions } from "./options";
import { SV } from "./StructV";
import { EventBus } from "./Common/eventBus";
import { ViewContainer } from "./View/viewContainer";
@ -11,18 +11,16 @@ import { SVMarker } from "./Model/SVMarker";
export class Engine {
private modelConstructor: ModelConstructor;
private viewContainer: ViewContainer
private prevStringSourceData: string;
private viewContainer: ViewContainer;
private prevSource: Sources;
private prevStringSource: string;
public engineOptions: EngineOptions;
public viewOptions: ViewOptions;
public animationOptions: AnimationOptions;
public interactionOptions: InteractionOptions;
public optionsTable: { [key: string]: LayoutGroupOptions };
constructor(DOMContainer: HTMLElement, engineOptions: EngineOptions) {
this.optionsTable = {};
this.engineOptions = Object.assign({}, engineOptions);
this.viewOptions = Object.assign({
@ -46,40 +44,55 @@ export class Engine {
selectNode: true
}, engineOptions.interaction);
// 初始化布局器配置项
Object.keys(SV.registeredLayout).forEach(layout => {
if(this.optionsTable[layout] === undefined) {
const options: LayoutGroupOptions = SV.registeredLayout[layout].defineOptions();
this.optionsTable[layout] = options;
}
});
this.modelConstructor = new ModelConstructor(this);
this.viewContainer = new ViewContainer(this, DOMContainer);
}
/**
* 输入数据进行渲染
* @param sourcesData
* @param sources
*/
public render(sourceData: Sources) {
if(sourceData === undefined || sourceData === null) {
public render(source: Sources) {
if(source === undefined || source === null) {
return;
}
``
let stringSource = JSON.stringify(source);
if(this.prevStringSource === stringSource) {
return;
}
let stringSourceData = JSON.stringify(sourceData);
if(this.prevStringSourceData === stringSourceData) {
return;
}
this.prevStringSourceData = stringSourceData;
this.prevSource = source;
this.prevStringSource = stringSource;
// 1 转换模型（data => model）
const layoutGroupTable = this.modelConstructor.construct(sourceData);
const layoutGroupTable = this.modelConstructor.construct(source);
// 2 渲染（使用g6进行渲染）
this.viewContainer.render(layoutGroupTable);
}
/**
* 切换指定数据结构的 mode 主题
* @param mode
*/
public switchMode(layout: string, mode: string) {
if(this.prevSource === undefined || this.prevSource === null) {
return;
}
Object.keys(this.prevSource).map(group => {
let sourceGroup = this.prevSource[group];
if(sourceGroup.layouter === layout) {
sourceGroup.mode = mode;
}
});
this.render(this.prevSource);
}
/**
* 重新布局
*/

4
src/options.ts
View File

@ -118,8 +118,8 @@ export interface EngineOptions {
export interface LayoutCreator {
defineOptions(): LayoutGroupOptions;
sourcesPreprocess?(sources: SourceNode[], options: LayoutGroupOptions): SourceNode[];
defineOptions(sourceData: SourceNode[]): LayoutGroupOptions;
sourcesPreprocess?(sourceData: SourceNode[], options: LayoutGroupOptions): SourceNode[];
defineLeakRule?(nodes: SVNode[]): SVNode[];
layout(nodes: SVNode[], layoutOptions: LayoutOptions);
[key: string]: any;

6
src/sources.ts
View File

@ -16,7 +16,11 @@ export interface SourceNode {
export type Sources = {
[key: string]: { data: SourceNode[]; layouter: string; }
[key: string]: {
data: SourceNode[];
layouter: string;
mode?: string
}
};

4
webpack.config.js → webpack.config.develop.js
View File

@ -1,4 +1,4 @@
const path = require('path');
module.exports = {
@ -20,5 +20,5 @@ module.exports = {
}
]
},
// devtool: 'eval-source-map'
devtool: 'eval-source-map'
};

21
webpack.config.product.js Normal file
View File

@ -0,0 +1,21 @@
module.exports = {
entry: './src/StructV.ts',
output: {
filename: './sv.js',
libraryTarget: 'umd'
},
resolve: {
extensions: ['.ts', '.js']
},
module: {
rules: [
{
test: /\.ts$/,
exclude: /node_modules/,
loader: 'ts-loader'
}
]
}
};