fix: 大量bug修复

demoV2/Layouter/BinaryTree.js

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

demoV2/demo2.html

@@ -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: 0, data: 'A', index: 1 },
-                    { id: 1, data: 'B' }
+                    { id: 1, data: 'B', index: 2 },
-                ],
-                "layouter": "LinkList"
-            }
-        }, {
-            "LinkList0": {
-                "data": [
-                    { id: 0, data: 'A', next: 1 },
-                    { id: 1, data: 'B', next: 2 },
                     { id: 2, data: 'C' }
                 ],
-                "layouter": "LinkList"
+                "layouter": "Array"
-            }
+            },
-        }, {
+            "LinkList1": {
-            "LinkList0": {
                 "data": [
-                    { id: 0, data: 'A', next: 1 },
+                    { id: 10, data: 'A', next: 11 },
-                    { id: 1, data: 'B', next: 2 },
+                    { id: 11, data: 'B', next: 12 },
-                    { id: 2, data: 'C', next: 3 },
+                    { id: 12, data: 'C', next: 13 },
-                    { id: 3, data: 'D' }
+                    { id: 13, data: 'D' }
                 ],
                 "layouter": "LinkList"
             }
         }, {
             "LinkList0": {
                 "data": [
-                    { id: 0, data: 'A', next: 1 },
+                    { id: 10, data: 'A', next: 11, external: 'true' },
-                    { id: 1, data: 'B', next: 2, freed: 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';
         });
 

package.json

@@ -1,12 +1,12 @@
 {
   "dependencies": {
-    "@antv/g6": "^4.4.1",
+    "@antv/g6": "^4.4.1"
-    "awesome-typescript-loader": "^5.2.1",
-    "typescript": "^3.2.2",
-    "webpack": "^4.28.2"
   },
   "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",

src/BehaviorHelper/dragCanvasWithLeak.ts

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

src/BehaviorHelper/fixNodeMarkerDrag.ts

@@ -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,
+        let node: SVNode = nodeData.node;
-            distanceY = event.canvasY - nodeData.startY,
-            nodeX = nodeData.node.get('x'),
-            nodeY = nodeData.node.get('y');
 
-        nodeData.node.set({
+        node.set({
-            x: nodeX + distanceX,
+            x: node.G6Item.getModel().x,
-            y: nodeY + distanceY
+            y: node.G6Item.getModel().y
         });
 
         nodeData.node = null;

src/BehaviorHelper/initViewBehaviors.ts

@@ -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

src/BehaviorHelper/zoomCanvasWithLeak.ts

@@ -1,7 +1,11 @@
-import { Graph, IGroup } from "@antv/g6-pc";
+import { EventBus } from "../Common/eventBus";
-import { ext } from '@antv/matrix-util';
+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) {
+export function InitZoomCanvasWithLeak(viewContainer: ViewContainer) {
-    g6Instance.on('wheel', event => {
+    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
+            });
+        }
     });
 }
 

src/Common/group.ts

@@ -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";
 
 
 

src/Common/util.ts

@@ -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;
     }

src/Model/SVModel.ts

@@ -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";
 
 
 
@@ -12,12 +13,15 @@ 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,6 +30,9 @@ export class SVModel {
     private transformMatrix: number[];
     private 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;
@@ -33,6 +40,7 @@ export class SVModel {
         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 (this.G6Item) {
-            if(attr === 'x' || attr === 'y') {
+            if (this.preLayout) {
-                this.G6Item.updatePosition({ [attr]: value } as Point);
+                this.G6Item.getModel()[attr] = value;
-                this.G6Item.refresh();
             }
             else {
-                this.G6Item.update(this.G6ModelProps);
+                this.g6Instance.updateItem(this.G6Item, this.G6ModelProps);
             }
         }
 
         // 更新shadowG6Item
-        if(this.shadowG6Item) {
+        if (this.shadowG6Item) {
-            if(attr === 'x' || attr === 'y') {
+            this.shadowG6Instance.updateItem(this.shadowG6Item, this.G6ModelProps);
-                this.shadowG6Item.updatePosition({ [attr]: value } as Point);
-                this.shadowG6Item.refresh();
-            }
-            else {
-                this.shadowG6Item.update(this.G6ModelProps);
-            }
         }
     }
 

src/Model/modelConstructor.ts

@@ -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, {

src/RegisteredShape/binaryTreeNode.ts

@@ -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;
 

src/RegisteredShape/clenQueuePointer.ts

@@ -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);
+        rotate(keyShape, angle, Util.transform);
-        translate(keyShape, 0, -75, G6.Util.transform);
+        translate(keyShape, 0, -75, Util.transform);
 
         return keyShape;
 

src/RegisteredShape/cursor.ts

@@ -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: {

src/RegisteredShape/indexedNode.ts

@@ -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];
 

src/RegisteredShape/linkListNode.ts

@@ -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];
 

src/RegisteredShape/pointer.ts

@@ -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: {

src/RegisteredShape/triTreeNode.ts

@@ -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;
 

src/RegisteredShape/twoCellNode.ts

@@ -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];
 

src/View/layoutProvider.ts

@@ -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 layoutGroupTable
-     * @param markers 
      */
-    private initLayoutValue(nodes: SVNode[], markers: SVMarker[]) {
+    private preLayoutProcess(layoutGroupTable: LayoutGroupTable) {
-        [...nodes, ...markers].forEach(item => {
+        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,
+            leakAreaHeight = this.engine.viewOptions.leakAreaHeight,
-            leakAreaY = containerHeight * (1 - leakAreaHeightRatio),
+            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;
-            dx = 0, dy = 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);
     }
 }

src/View/reconcile.ts

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

src/View/renderer.ts

@@ -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);
+    }
+
     /**
      * 销毁
      */

src/View/viewContainer.ts

@@ -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(),
+        globalGroup.add(...this.prevModelList, ...this.accumulateLeakModels);
-            leakAreaHeight = this.engine.viewOptions.leakAreaHeight,
+        this.renderer.changeSize(width, height);
-            targetY = containerHeight * (1 - leakAreaHeight);
 
-        const accumulateLeakGroup = new Group();
+        const containerHeight = g6Instance.getHeight(),
-        accumulateLeakGroup.add(...this.accumulateLeakModels);
+            dy = containerHeight - prevContainerHeight;
-        accumulateLeakGroup.translate(0, targetY - this.leakAreaY);
-        this.leakAreaY = targetY;
 
+        globalGroup.translate(0, dy);
+        this.renderer.refresh();
+
+        this.leakAreaY += dy;
         EventBus.emit('onLeakAreaUpdate', {
             leakAreaY: this.leakAreaY,
             hasLeak: this.hasLeak

src/engine.ts

@@ -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;
-        //     });
-        // });
     }
 
     /**

webpack.config.js

@@ -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'
 };