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-09 16:59:44 +08:00
parent 0809d1fd53
commit 0291c74523
26 changed files with 14338 additions and 176 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
demoV2/Layouter/BinaryTree.js
View File

@ -32,8 +32,9 @@ SV.registerLayout('BinaryTree', {
}
}
},
pointer: {
marker: {
external: {
type: 'pointer',
anchor: 0,
offset: 14,
style: {

43
demoV2/demo2.html
View File

@ -33,8 +33,8 @@
#leak {
position: absolute;
left: 0;
top: 100px;
opacity: 0;
top: 100px;
width: 100%;
box-sizing: border-box;
padding: 4px;
@ -60,6 +60,7 @@
<button id="btn-prev">prev</button>
<button id="btn-next">next</button>
<button id="resize">resize</button>
<button id="relayout">relayout</button>
<span id="pos"></span>
<script src="./../dist/sv.js"></script>
@ -88,7 +89,7 @@
let cur = SV(document.getElementById('container'), {
view: {
leakAreaHeight: 0.25,
leakAreaHeight: 130,
groupPadding: 40,
},
});
@ -97,35 +98,26 @@
let data = [{
"LinkList0": {
"data": [
{ id: 0, data: 'A', next: 1 },
{ id: 1, data: 'B' }
],
"layouter": "LinkList"
}
}, {
"LinkList0": {
"data": [
{ id: 0, data: 'A', next: 1 },
{ id: 1, data: 'B', next: 2 },
{ id: 0, data: 'A', index: 1 },
{ id: 1, data: 'B', index: 2 },
{ id: 2, data: 'C' }
],
"layouter": "LinkList"
}
}, {
"LinkList0": {
"layouter": "Array"
},
"LinkList1": {
"data": [
{ id: 0, data: 'A', next: 1 },
{ id: 1, data: 'B', next: 2 },
{ id: 2, data: 'C', next: 3 },
{ id: 3, data: 'D' }
{ id: 10, data: 'A', next: 11 },
{ id: 11, data: 'B', next: 12 },
{ id: 12, data: 'C', next: 13 },
{ id: 13, data: 'D' }
],
"layouter": "LinkList"
}
}, {
"LinkList0": {
"data": [
{ id: 0, data: 'A', next: 1 },
{ id: 1, data: 'B', next: 2, freed: true }
{ id: 10, data: 'A', next: 11, external: 'true' },
{ id: 11, next: 12, freed: true }
],
"layouter": "LinkList"
}
@ -168,10 +160,15 @@
cur.resize(container.offsetWidth, container.offsetHeight);
});
document.getElementById('relayout').addEventListener('click', e => {
console.log();
cur.reLayout();
});
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';
});

14105
dist/sv.js vendored
View File

File diff suppressed because one or more lines are too long

10
package.json
View File

@ -1,12 +1,12 @@
{
"dependencies": {
"@antv/g6": "^4.4.1",
"awesome-typescript-loader": "^5.2.1",
"typescript": "^3.2.2",
"webpack": "^4.28.2"
"@antv/g6": "^4.4.1"
},
"devDependencies": {
"webpack-cli": "^3.2.3"
"webpack": "^4.46.0",
"webpack-cli": "^3.2.3",
"ts-loader": "^5.2.1",
"typescript": "^3.2.2"
},
"scripts": {
"build": "tsc && webpack",

36
src/BehaviorHelper/dragCanvasWithLeak.ts
View File

@ -11,38 +11,26 @@ import { ViewContainer } from "../View/viewContainer";
*/
export function InitDragCanvasWithLeak(viewContainer: ViewContainer) {
let g6Instance = viewContainer.getG6Instance(),
isDragStart = false,
startPositionY = 0,
currentLeakAreaY = 0;
prevDy = 0;
g6Instance.on('canvas:dragstart', event => {
isDragStart = true;
startPositionY = event.canvasY;
currentLeakAreaY = viewContainer.leakAreaY;
});
g6Instance.on('canvas:drag', event => {
if(!isDragStart) {
g6Instance.on('viewportchange', event => {
if(event.action !== 'translate') {
return false;
}
let zoom = g6Instance.getZoom(),
dy = (event.canvasY - startPositionY) / zoom,
leakAreaY = currentLeakAreaY + dy;
let translateX = event.matrix[7],
dy = translateX- prevDy;
prevDy = translateX;
viewContainer.leakAreaY = leakAreaY;
if(viewContainer.hasLeak) {
EventBus.emit('onLeakAreaUpdate', {
leakAreaY: viewContainer.leakAreaY,
hasLeak: viewContainer.hasLeak
viewContainer.leakAreaY = viewContainer.leakAreaY + dy;
if (viewContainer.hasLeak) {
EventBus.emit('onLeakAreaUpdate', {
leakAreaY: viewContainer.leakAreaY,
hasLeak: viewContainer.hasLeak
});
}
});
g6Instance.on('canvas:dragend', event => {
isDragStart = false;
startPositionY = 0;
})
}

14
src/BehaviorHelper/fixNodeMarkerDrag.ts
View File

@ -1,6 +1,5 @@
import { Graph } from "@antv/g6-pc";
import { Graph } from "@antv/g6";
import { SVNode } from "../Model/SVNode";
import { LayoutGroupOptions } from "../options";
/**
@ -58,14 +57,11 @@ export function FixNodeMarkerDrag(g6Instance: Graph) {
return false;
}
let distanceX = event.canvasX - nodeData.startX,
distanceY = event.canvasY - nodeData.startY,
nodeX = nodeData.node.get('x'),
nodeY = nodeData.node.get('y');
let node: SVNode = nodeData.node;
nodeData.node.set({
x: nodeX + distanceX,
y: nodeY + distanceY
node.set({
x: node.G6Item.getModel().x,
y: node.G6Item.getModel().y
});
nodeData.node = null;

8
src/BehaviorHelper/initViewBehaviors.ts
View File

@ -18,7 +18,7 @@ export function InitViewBehaviors() {
return false;
}
return false;
return true;
}
const selectNodeFilter = event => {
@ -29,7 +29,7 @@ export function InitViewBehaviors() {
return false;
}
return false;
return true;
}
defaultModes.push({
@ -41,6 +41,10 @@ export function InitViewBehaviors() {
type: 'drag-canvas'
});
// defaultModes.push({
// type: 'zoom-canvas'
// });
defaultModes.push({
type: 'click-select',
shouldBegin: selectNodeFilter

48
src/BehaviorHelper/zoomCanvasWithLeak.ts
View File

@ -1,7 +1,11 @@
import { Graph, IGroup } from "@antv/g6-pc";
import { ext } from '@antv/matrix-util';
import { EventBus } from "../Common/eventBus";
import { ViewContainer } from "../View/viewContainer";
/**
* 缩放这里搞不出来，尽力了
*/
const transform = ext.transform;
/**
@ -9,9 +13,41 @@ const transform = ext.transform;
* @param g6Instance
* @param generalModelsGroup
*/
export function InitZoomCanvasWithLeak(g6Instance: Graph) {
g6Instance.on('wheel', event => {
export function InitZoomCanvasWithLeak(viewContainer: ViewContainer) {
let g6Instance = viewContainer.getG6Instance(),
prevDy = 0;
let prevZoom = 1;
// g6Instance.on('viewportchange', event => {
// if(event.action !== 'zoom') {
// return false;
// }
// console.log(event.matrix);
// viewContainer.leakAreaY = event.matrix[4] * viewContainer.leakAreaY + event.matrix[7];
// if (viewContainer.hasLeak) {
// EventBus.emit('onLeakAreaUpdate', {
// leakAreaY: viewContainer.leakAreaY,
// hasLeak: viewContainer.hasLeak
// });
// }
// });
g6Instance.on('wheelzoom', event => {
let dy = event.y - viewContainer.leakAreaY,
dZoom = prevZoom - g6Instance.getZoom();
prevZoom = g6Instance.getZoom();
viewContainer.leakAreaY = viewContainer.leakAreaY + dy * dZoom;
if (viewContainer.hasLeak) {
EventBus.emit('onLeakAreaUpdate', {
leakAreaY: viewContainer.leakAreaY,
hasLeak: viewContainer.hasLeak
});
}
});
}

1
src/Common/group.ts
View File

@ -2,6 +2,7 @@ import { Util } from "./util";
import { BoundingRect, Bound } from "./boundingRect";
import { SVModel } from "../Model/SVModel";
import { ext } from '@antv/matrix-util';
import { SVLink } from "../Model/SVLink";

4
src/Common/util.ts
View File

@ -2,7 +2,7 @@ import { EdgeConfig, GraphData, NodeConfig } from "@antv/g6-core";
import { LayoutGroup, LayoutGroupTable } from "../Model/modelConstructor";
import { SVLink } from "../Model/SVLink";
import { SVModel } from "../Model/SVModel";
import { SV } from "../StructV";
import { Util as G6Util } from '@antv/g6';
/**
@ -132,7 +132,7 @@ export const Util = {
* @param rotation
*/
calcRotateMatrix(matrix: number[], rotation: number): number[] {
const Mat3 = SV.G6.Util.mat3;
const Mat3 = G6Util.mat3;
Mat3.rotate(matrix, matrix, rotation);
return matrix;
}

43
src/Model/SVModel.ts
View File

@ -3,6 +3,7 @@ import { ModelOption, Style } from "../options";
import { BoundingRect } from "../Common/boundingRect";
import { EdgeConfig, Item, NodeConfig } from "@antv/g6-core";
import { Point } from "@antv/g-base";
import { Graph } from "_@antv_g6-pc@0.5.0@@antv/g6-pc";
@ -11,13 +12,16 @@ import { Point } from "@antv/g-base";
export class SVModel {
public id: string;
public sourceType: string;
public g6Instance: Graph;
public shadowG6Instance: Graph;
public group: string;
public layout: string;
public G6ModelProps: NodeConfig | EdgeConfig;
public shadowG6Item: Item;
public G6Item: Item;
public preLayout: boolean; // 是否进入预备布局阶段
public discarded: boolean;
public freed: boolean;
public leaked: boolean;
@ -26,13 +30,17 @@ export class SVModel {
private transformMatrix: number[];
private modelType: string;
constructor(id: string, type: string, group: string, layout: string, modelType: string) {
public layoutX: number;
public layoutY: number;
constructor(id: string, type: string, group: string, layout: string, modelType: string) {
this.id = id;
this.sourceType = type;
this.group = group;
this.layout = layout;
this.shadowG6Item = null;
this.G6Item = null;
this.preLayout = false;
this.discarded = false;
this.freed = false;
this.leaked = false;
@ -64,53 +72,46 @@ export class SVModel {
* @returns
*/
set(attr: string | object, value?: any) {
if(this.discarded) {
if (this.discarded) {
return;
}
if(typeof attr === 'object') {
if (typeof attr === 'object') {
Object.keys(attr).map(item => {
this.set(item, attr[item]);
});
return;
}
if(this.G6ModelProps[attr] === value) {
if (this.G6ModelProps[attr] === value) {
return;
}
if(attr === 'style' || attr === 'labelCfg') {
if (attr === 'style' || attr === 'labelCfg') {
Object.assign(this.G6ModelProps[attr], value);
}
else {
this.G6ModelProps[attr] = value;
}
if(attr === 'rotation') {
if (attr === 'rotation') {
const matrix = Util.calcRotateMatrix(this.getMatrix(), value);
this.setMatrix(matrix);
}
// 更新G6Item
if(this.G6Item) {
if(attr === 'x' || attr === 'y') {
this.G6Item.updatePosition({ [attr]: value } as Point);
this.G6Item.refresh();
if (this.G6Item) {
if (this.preLayout) {
this.G6Item.getModel()[attr] = value;
}
else {
this.G6Item.update(this.G6ModelProps);
this.g6Instance.updateItem(this.G6Item, this.G6ModelProps);
}
}
// 更新shadowG6Item
if(this.shadowG6Item) {
if(attr === 'x' || attr === 'y') {
this.shadowG6Item.updatePosition({ [attr]: value } as Point);
this.shadowG6Item.refresh();
}
else {
this.shadowG6Item.update(this.G6ModelProps);
}
if (this.shadowG6Item) {
this.shadowG6Instance.updateItem(this.shadowG6Item, this.G6ModelProps);
}
}
@ -128,7 +129,7 @@ export class SVModel {
getMatrix(): number[] {
return [...this.transformMatrix];
}
/**
* 设置变换矩阵
* @param matrix

5
src/Model/modelConstructor.ts
View File

@ -72,12 +72,15 @@ export class ModelConstructor {
markerOptions = options.marker || {};
nodeList = this.constructNodes(nodeOptions, group, sourceData, layout);
leakAddress = nodeList.map(item => item.leakAddress);
markerList = this.constructMarkers(group, layout, markerOptions, nodeList);
nodeList.forEach(item => {
if(item.freedLabel) {
freedLabelList.push(item.freedLabel);
}
if(item.leakAddress) {
leakAddress.push(item.leakAddress);
}
});
layoutGroupTable.set(group, {

4
src/RegisteredShape/binaryTreeNode.ts
View File

@ -1,7 +1,7 @@
import G6 from '@antv/g6';
import { registerNode } from '@antv/g6';
export default G6.registerNode('binary-tree-node', {
export default registerNode('binary-tree-node', {
draw(cfg, group) {
cfg.size = cfg.size;

10
src/RegisteredShape/clenQueuePointer.ts
View File

@ -1,7 +1,7 @@
import G6 from '@antv/g6';
import { registerNode, Util } from '@antv/g6';
export default G6.registerNode('clen-queue-pointer', {
export default registerNode('clen-queue-pointer', {
draw(cfg, group) {
let id = cfg.id as string;
@ -55,10 +55,10 @@ export default G6.registerNode('clen-queue-pointer', {
});
// rotate(text, angle, G6.Util.transform);
translate(text, 0, -75, G6.Util.transform);
translate(text, 0, -75, Util.transform);
}
rotate(keyShape, angle, G6.Util.transform);
translate(keyShape, 0, -75, G6.Util.transform);
rotate(keyShape, angle, Util.transform);
translate(keyShape, 0, -75, Util.transform);
return keyShape;

4
src/RegisteredShape/cursor.ts
View File

@ -1,7 +1,7 @@
import G6 from '@antv/g6';
import { registerNode } from '@antv/g6';
export default G6.registerNode('cursor', {
export default registerNode('cursor', {
draw(cfg, group) {
const keyShape = group.addShape('path', {
attrs: {

4
src/RegisteredShape/indexedNode.ts
View File

@ -1,7 +1,7 @@
import G6 from '@antv/g6';
import { registerNode } from '@antv/g6';
export default G6.registerNode('indexed-node', {
export default registerNode('indexed-node', {
draw(cfg, group) {
cfg.size = cfg.size || [30, 10];

4
src/RegisteredShape/linkListNode.ts
View File

@ -1,7 +1,7 @@
import G6 from '@antv/g6';
import { registerNode } from '@antv/g6';
export default G6.registerNode('link-list-node', {
export default registerNode('link-list-node', {
draw(cfg, group) {
cfg.size = cfg.size || [30, 10];

4
src/RegisteredShape/pointer.ts
View File

@ -1,7 +1,7 @@
import G6 from '@antv/g6';
import { registerNode } from '@antv/g6';
export default G6.registerNode('pointer', {
export default registerNode('pointer', {
draw(cfg, group) {
const keyShape = group.addShape('path', {
attrs: {

4
src/RegisteredShape/triTreeNode.ts
View File

@ -1,7 +1,7 @@
import G6 from '@antv/g6';
import { registerNode } from '@antv/g6';
export default G6.registerNode('tri-tree-node', {
export default registerNode('tri-tree-node', {
draw(cfg, group) {
cfg.size = cfg.size;

4
src/RegisteredShape/twoCellNode.ts
View File

@ -1,8 +1,8 @@
import G6 from '@antv/g6';
import { registerNode } from '@antv/g6';
export default G6.registerNode('two-cell-node', {
export default registerNode('two-cell-node', {
draw(cfg, group) {
cfg.size = cfg.size || [30, 10];

74
src/View/layoutProvider.ts
View File

@ -1,9 +1,11 @@
import { IPoint } from '@antv/g6-core';
import { Bound, BoundingRect } from '../Common/boundingRect';
import { Group } from '../Common/group';
import { Util } from '../Common/util';
import { Vector } from '../Common/vector';
import { Engine } from '../engine';
import { LayoutGroupTable } from '../Model/modelConstructor';
import { SVLink } from '../Model/SVLink';
import { SVMarker } from '../Model/SVMarker';
import { SVModel } from '../Model/SVModel';
import { SVFreedLabel, SVLeakAddress, SVNode } from '../Model/SVNode';
@ -24,17 +26,37 @@ export class LayoutProvider {
/**
* 初始化布局参数
* @param nodes
* @param markers
* 布局前处理
* @param layoutGroupTable
*/
private initLayoutValue(nodes: SVNode[], markers: SVMarker[]) {
[...nodes, ...markers].forEach(item => {
private preLayoutProcess(layoutGroupTable: LayoutGroupTable) {
const modelList = Util.convertGroupTable2ModelList(layoutGroupTable);
modelList.forEach(item => {
item.preLayout = true;
item.set('rotation', item.get('rotation'));
item.set({ x: 0, y: 0 });
});
}
/**
* 布局后处理
* @param layoutGroupTable
*/
private postLayoutProcess(layoutGroupTable: LayoutGroupTable) {
const modelList = Util.convertGroupTable2ModelList(layoutGroupTable);
modelList.forEach(item => {
item.preLayout = false;
// 用两个变量保存节点布局完成后的坐标，因为拖拽节点会改变节点的x，y坐标
// 然后当节点移动到泄漏区的时候，不应该保持节点被拖拽后的状态，应该恢复到布局完成后的状态，不然就会很奇怪
item.layoutX = item.get('x');
item.layoutY = item.get('y');
});
}
/**
* 布局外部指针
* @param marker
@ -132,7 +154,6 @@ export class LayoutProvider {
modelGroup.add(item);
});
this.initLayoutValue(group.node, group.marker); // 初始化布局参数
group.layoutCreator.layout(group.node, options); // 布局节点
modelGroupList.push(modelGroup);
});
@ -154,10 +175,17 @@ export class LayoutProvider {
private layoutLeakModels(leakModels: SVModel[], accumulateLeakModels: SVModel[]) {
const group: Group = new Group(),
containerHeight = this.viewContainer.getG6Instance().getHeight(),
leakAreaHeightRatio = this.engine.viewOptions.leakAreaHeight,
leakAreaY = containerHeight * (1 - leakAreaHeightRatio),
leakAreaHeight = this.engine.viewOptions.leakAreaHeight,
leakAreaY = containerHeight - leakAreaHeight,
xOffset = 50;
leakModels.forEach(item => {
item.set({
x: item.layoutX,
y: item.layoutY
});
});
group.add(...leakModels);
const currentLeakGroupBound: BoundingRect = group.getBound(),
globalLeakGroupBound: BoundingRect = accumulateLeakModels.length ?
@ -181,8 +209,7 @@ export class LayoutProvider {
prevBound: BoundingRect,
bound: BoundingRect,
boundList: BoundingRect[] = [],
maxHeight: number = -Infinity,
dx = 0, dy = 0;
dx = 0;
// 左往右布局
for (let i = 0; i < modelGroupList.length; i++) {
@ -196,10 +223,6 @@ export class LayoutProvider {
dx = bound.x;
}
if (bound.height > maxHeight) {
maxHeight = bound.height;
}
group.translate(dx, 0);
Bound.translate(bound, dx, 0);
boundList.push(bound);
@ -207,16 +230,6 @@ export class LayoutProvider {
prevBound = bound;
}
// 居中对齐布局
for (let i = 0; i < modelGroupList.length; i++) {
group = modelGroupList[i];
bound = boundList[i];
dy = maxHeight / 2 - bound.height / 2;
group.translate(0, dy);
Bound.translate(bound, 0, dy);
}
return wrapperGroup;
}
@ -229,10 +242,10 @@ export class LayoutProvider {
private fitCenter(group: Group) {
let width = this.viewContainer.getG6Instance().getWidth(),
height = this.viewContainer.getG6Instance().getHeight(),
leakAreaHeightRatio = this.engine.viewOptions.leakAreaHeight;
leakAreaHeight = this.engine.viewOptions.leakAreaHeight;
if (this.viewContainer.hasLeak) {
height = height * (1 - leakAreaHeightRatio);
height = height - leakAreaHeight;
}
const viewBound: BoundingRect = group.getBound(),
@ -245,6 +258,8 @@ export class LayoutProvider {
group.translate(dx, dy);
}
/**
* 布局
* @param layoutGroupTable
@ -252,13 +267,16 @@ export class LayoutProvider {
* @param hasLeak
*/
public layoutAll(layoutGroupTable: LayoutGroupTable, accumulateLeakModels: SVModel[], leakModels: SVModel[]) {
this.preLayoutProcess(layoutGroupTable);
const modelGroupList: Group[] = this.layoutModels(layoutGroupTable);
const globalGroup: Group = this.layoutGroups(modelGroupList);
const generalGroup: Group = this.layoutGroups(modelGroupList);
if (leakModels.length) {
this.layoutLeakModels(leakModels, accumulateLeakModels);
}
this.fitCenter(globalGroup);
this.fitCenter(generalGroup);
this.postLayoutProcess(layoutGroupTable);
}
}

6
src/View/reconcile.ts
View File

@ -91,8 +91,10 @@ export class Reconcile {
leakModels.push(item.freedLabel);
}
item.leakAddress.leaked = true;
leakModels.push(item.leakAddress);
if(item.leakAddress) {
item.leakAddress.leaked = true;
leakModels.push(item.leakAddress);
}
}
});

29
src/View/renderer.ts
View File

@ -1,9 +1,8 @@
import { Engine } from '../engine';
import { SVModel } from '../Model/SVModel';
import { Util } from '../Common/util';
import G6 from '@antv/g6';
import { Tooltip, Graph, GraphData } from '@antv/g6';
import { InitViewBehaviors } from '../BehaviorHelper/initViewBehaviors';
import { Graph, GraphData, IGroup } from '@antv/g6-pc';
@ -28,7 +27,7 @@ export class Renderer {
duration: number = this.engine.animationOptions.duration,
timingFunction: string = this.engine.animationOptions.timingFunction;
const tooltip = new G6.Tooltip({
const tooltip = new Tooltip({
offsetX: 10,
offsetY: 20,
shouldBegin(event) {
@ -38,12 +37,12 @@ export class Renderer {
itemTypes: ['node']
});
this.shadowG6Instance = new G6.Graph({
this.shadowG6Instance = new Graph({
container: DOMContainer.cloneNode() as HTMLElement
});
// 初始化g6实例
this.g6Instance = new G6.Graph({
this.g6Instance = new Graph({
container: DOMContainer,
width: DOMContainer.offsetWidth,
height: DOMContainer.offsetHeight,
@ -97,6 +96,7 @@ export class Renderer {
this.shadowG6Instance.read(g6Data);
renderModelList.forEach(item => {
item.shadowG6Item = this.shadowG6Instance.findById(item.id);
item.shadowG6Instance = this.shadowG6Instance;
});
}
@ -111,6 +111,7 @@ export class Renderer {
this.g6Instance.changeData(renderData);
renderModelList.forEach(item => {
item.g6Instance = this.g6Instance;
item.G6Item = this.g6Instance.findById(item.id);
item.G6Item['SVModel'] = item;
});
@ -132,6 +133,24 @@ export class Renderer {
return this.g6Instance;
}
/**
*
*/
public refresh() {
this.g6Instance.refresh();
this.shadowG6Instance.refresh();
}
/**
*
* @param width
* @param height
*/
public changeSize(width: number, height: number) {
this.g6Instance.changeSize(width, height);
this.shadowG6Instance.changeSize(width, height);
}
/**
* 销毁
*/

27
src/View/viewContainer.ts
View File

@ -8,6 +8,7 @@ import { Reconcile } from "./reconcile";
import { FixNodeMarkerDrag } from "../BehaviorHelper/fixNodeMarkerDrag";
import { InitDragCanvasWithLeak } from "../BehaviorHelper/dragCanvasWithLeak";
import { EventBus } from "../Common/eventBus";
import { InitZoomCanvasWithLeak } from "../BehaviorHelper/zoomCanvasWithLeak";
import { Group } from "../Common/group";
@ -40,14 +41,14 @@ export class ViewContainer {
height = this.getG6Instance().getHeight(),
{ drag, zoom } = this.engine.interactionOptions;
this.leakAreaY = height * (1 - leakAreaHeight);
this.leakAreaY = height - leakAreaHeight;
if (drag) {
InitDragCanvasWithLeak(this);
}
if (zoom) {
// InitZoomCanvas(g6Instance, g6GeneralGroup);
// InitZoomCanvasWithLeak(this);
}
FixNodeMarkerDrag(g6Instance);
@ -61,6 +62,7 @@ export class ViewContainer {
*/
reLayout() {
this.layoutProvider.layoutAll(this.prevLayoutGroupTable, [], this.accumulateLeakModels);
this.getG6Instance().refresh();
}
@ -84,17 +86,20 @@ export class ViewContainer {
* @param height
*/
resize(width: number, height: number) {
this.renderer.getG6Instance().changeSize(width, height);
const g6Instance = this.getG6Instance(),
prevContainerHeight = g6Instance.getHeight(),
globalGroup: Group = new Group();
const containerHeight = this.getG6Instance().getHeight(),
leakAreaHeight = this.engine.viewOptions.leakAreaHeight,
targetY = containerHeight * (1 - leakAreaHeight);
globalGroup.add(...this.prevModelList, ...this.accumulateLeakModels);
this.renderer.changeSize(width, height);
const accumulateLeakGroup = new Group();
accumulateLeakGroup.add(...this.accumulateLeakModels);
accumulateLeakGroup.translate(0, targetY - this.leakAreaY);
this.leakAreaY = targetY;
const containerHeight = g6Instance.getHeight(),
dy = containerHeight - prevContainerHeight;
globalGroup.translate(0, dy);
this.renderer.refresh();
this.leakAreaY += dy;
EventBus.emit('onLeakAreaUpdate', {
leakAreaY: this.leakAreaY,
hasLeak: this.hasLeak
@ -131,7 +136,7 @@ export class ViewContainer {
hasLeak: this.hasLeak
});
}
this.renderer.build(renderModelList); // 首先在离屏canvas渲染先
this.layoutProvider.layoutAll(layoutGroupTable, this.accumulateLeakModels, diffResult.LEAKED); // 进行布局（设置model的x，y，样式等）

15
src/engine.ts
View File

@ -29,7 +29,7 @@ export class Engine {
fitCenter: true,
fitView: false,
groupPadding: 20,
leakAreaHeight: 0.3,
leakAreaHeight: 150,
updateHighlight: '#fc5185'
}, engineOptions.view);
@ -85,19 +85,6 @@ export class Engine {
*/
public reLayout() {
this.viewContainer.reLayout();
// layoutGroupTable.forEach(group => {
// group.modelList.forEach(item => {
// if(item instanceof SVLink) return;
// let model = item.G6Item.getModel(),
// x = item.get('x'),
// y = item.get('y');
// model.x = x;
// model.y = y;
// });
// });
}
/**

5
webpack.config.js
View File

@ -2,6 +2,7 @@ const path = require('path');
module.exports = {
mode: 'development',
entry: './src/StructV.ts',
output: {
filename: './sv.js',
@ -15,9 +16,9 @@ module.exports = {
{
test: /\.ts$/,
exclude: /node_modules/,
loader: 'awesome-typescript-loader'
loader: 'ts-loader'
}
]
},
devtool: 'eval-source-map'
// devtool: 'eval-source-map'
};