feat: 添加可以focus节点的函数

src/View/container/main.ts

@@ -106,13 +106,15 @@ import { Container } from "./container";
     protected afterInitRenderer() {
         let g6Instance = this.getG6Instance(),
             marker = null,
-            markerX = null,
-            markerY = null,
-            dragStartX = null,
-            dragStartY = null;
+            markerX = 0,
+            markerY = 0,
+            dragStartX = 0,
+            dragStartY = 0,
+            element = null;
 
         g6Instance.on('node:dragstart', ev => {
             const model = ev.item.getModel();
+            element = ev.item.SVModel;
 
             if(model.SVModelType === 'marker') {
                 return;
@@ -128,22 +130,33 @@ import { Container } from "./container";
                 return;
             }
 
+            dragStartX = ev.canvasX;
+            dragStartY = ev.canvasY;
             marker = g6Instance.findById(model.markerId);
             
             if(marker) {
                 markerX = marker.getModel().x,
                 markerY = marker.getModel().y;
-                dragStartX = ev.canvasX;
-                dragStartY = ev.canvasY;
             }
         });
 
         g6Instance.on('node:dragend', ev => {
+            let distanceX = ev.canvasX - dragStartX,
+                distanceY = ev.canvasY - dragStartY,
+                elementX = element.get('x'),
+                elementY = element.get('y');
+
+            element.set({ 
+                x: elementX + distanceX,
+                y: elementY + distanceY 
+            });
+
             marker = null;
-            markerX = null,
-            markerY = null,
-            dragStartX = null,
-            dragStartY = null;
+            markerX = 0,
+            markerY = 0,
+            dragStartX = 0,
+            dragStartY = 0;
+            element = null;
         });
 
         g6Instance.on('node:drag', ev => {

src/View/renderer.ts

@@ -21,6 +21,7 @@ export class Renderer {
     private DOMContainer: HTMLElement; // 主可视化视图容器
     private g6Instance; // g6 实例
 
+    private prevRenderModelList: Model[] = null;
     private isFirstRender: boolean; // 是否为第一次渲染
 
     constructor(engine: Engine, DOMContainer: HTMLElement, g6Options: { [key: string]: any }) {
@@ -72,12 +73,8 @@ export class Renderer {
      * @param modelList
      */
     public render(modelList: Model[], removeModels: Model[]) {
-        let data: G6Data = Util.convertModelList2G6Data(modelList),
-            removeData: G6Data = Util.convertModelList2G6Data(removeModels),
-            renderData: G6Data = {
-                nodes: [...data.nodes, ...removeData.nodes],
-                edges: [...data.edges, ...removeData.edges]
-            };
+        const renderModelList = [...modelList, ...removeModels],
+              renderData: G6Data = Util.convertModelList2G6Data(renderModelList);
 
         if(this.isFirstRender) {
             this.g6Instance.read(renderData);
@@ -99,6 +96,13 @@ export class Renderer {
             }
         });
 
+        // 将上一次的model全部标记为已销毁
+        if(this.prevRenderModelList) {
+            this.prevRenderModelList.forEach(item => { item.isDestroy = true; });
+        }
+
+        this.prevRenderModelList = renderModelList;
+
         // 把所有连线置顶
         if(this.isFirstRender) {
             this.g6Instance.getEdges().forEach(item => item.toFront());

src/View/viewManager.ts

@@ -124,7 +124,15 @@ export class ViewManager {
         this.handleFreedLabel(freedElements, prevLayoutGroupTable.get(freedGroupName));
         this.prevFreedElements = freedElements;
 
-        return [...freedElements, ...freedMarkers];
+        const freedItems = [...freedElements, ...freedMarkers];
+        freedItems.forEach(item => {
+            item.set('style', {
+                fill: '#ccc'
+            });
+        });
+
+
+        return freedItems;
     }
 
     /**