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

src/Model/modelData.ts

@@ -44,6 +44,8 @@ export class Model {
     id: string;
     type: string;
     isLeak: boolean;
+    isDestroy: boolean;
+    modelType: string;
     
     props: G6NodeModel | G6EdgeModel;
     shadowG6Item;
@@ -58,6 +60,7 @@ export class Model {
         this.G6Item = null;
         this.props = <G6NodeModel | G6EdgeModel>{ };
         this.isLeak = false;
+        this.isDestroy = false;
     }
 
     /**
@@ -100,6 +103,10 @@ export class Model {
      * @returns 
      */
     set(attr: string | object, value?: any) {
+        if(this.isDestroy) {
+            return;
+        }
+
         if(typeof attr === 'object') {
             Object.keys(attr).map(item => {
                 this.set(item, attr[item]);
@@ -158,6 +165,10 @@ export class Model {
         return this.type;
     }
 
+    getModelType(): string {
+        return this.modelType;
+    }
+
     getId(): string {
         return this.id;
     }
@@ -178,6 +189,7 @@ export class Element extends Model {
 
     constructor(id: string, type: string, group: string, layouter: string, sourceElement: SourceElement) {
         super(id, type);
+        this.modelType = 'element';
 
         if(type === null) {
             return;
@@ -219,6 +231,10 @@ export class Element extends Model {
             SVModelName: this.type
         };
     }
+
+    getSourceId(): string {
+        return this.sourceId;
+    }
 };
 
 
@@ -230,6 +246,8 @@ export class Link extends Model {
 
     constructor(id: string, type: string, element: Element, target: Element, index: number) { 
         super(id, type);
+        this.modelType = 'link';
+
         this.element = element;
         this.target = target;
         this.index = index;
@@ -277,6 +295,8 @@ export class Marker extends Model {
 
     constructor(id: string, type: string, label: string | string[], target: Element) {
         super(id, type);
+        this.modelType = 'marker';
+
         this.target = target;
         this.label = label;
 

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

src/engine.ts

@@ -200,18 +200,15 @@ export class Engine {
     }
 
     /**
-     * 使用id选中某个节点
+     * 使用id查找某个节点
      * @param id 
-     * @param callback 
      */
-    public selectElement(id: string, callback?: (element: Element) => void) {
+    public findElement(id: string) {
         const elements = this.getElements();
         const stringId = id.toString();
         const targetElement = elements.find(item => item.sourceId === stringId);
 
-        if(targetElement) {
-            callback && callback(targetElement);
-        }
+        return targetElement;
     }
 
     /**
@@ -239,7 +236,9 @@ export class Engine {
             return;
         }
 
-        this.viewManager.getG6Instance().on(eventName, callback);
+        this.viewManager.getG6Instance().on(eventName, event => {
+            callback(event.item.SVModel);
+        });
     }
 
     /**