Merge pull request #4 from xinxin93/master

feat(core): v0.2.0

1. Add draggable and editable value in custom node & edge
2. Some bugfix

Author: sunyongjian

packages/core/src/LogicFlow.tsx

@@ -39,7 +39,8 @@ import {
   EdgeFilter,
   NodeConfig,
   NodeAttribute,
-  ExtensionLike,
+  Extension,
+  ComponentRender,
   FocusOnArgs,
   RegisterElementFn,
   RegisterParam,
@@ -64,7 +65,7 @@ export default class LogicFlow {
   width: number;
   height: number;
   graphModel: GraphModel;
-  history: History = new History();
+  history: History;
   viewMap = new Map();
   tool: Tool;
   keyboard: Keyboard;
@@ -73,15 +74,16 @@ export default class LogicFlow {
   getSnapshot: () => void;
   eventCenter: EventEmitter;
   snaplineModel: SnaplineModel;
-  static extensions: ExtensionLike[] = [];
+  static extensions: Extension[] = [];
+  components: ComponentRender[] = [];
   adapterIn: (data: unknown) => GraphConfigData;
   adapterOut: (data: GraphConfigData) => unknown;
+  [propName: string]: any;
   constructor(options: Options.Definition) {
     const {
       container,
       width,
       height,
-      tool = {},
       dndOptions,
       keyboard,
       isSilentMode,
@@ -97,8 +99,9 @@ export default class LogicFlow {
     if (!this.height) {
       this.height = container.getBoundingClientRect().height;
     }
-    this.tool = new Tool(tool, this);
+    this.tool = new Tool(this);
     this.eventCenter = new EventEmitter();
+    this.history = new History(this.eventCenter);
     this.dnd = new Dnd({ options: dndOptions, lf: this });
     this.keyboard = new Keyboard({ lf: this, keyboard });
     // model 初始化
@@ -132,12 +135,16 @@ export default class LogicFlow {
    * 添加扩展, 待讨论，这里是不是静态方法好一些？
    * @param plugin 插件
    */
-  static use(extension: ExtensionLike) {
+  static use(extension: Extension) {
     this.extensions.push(extension);
   }
   installPlugins() {
     LogicFlow.extensions.forEach((extension) => {
-      extension.install(this);
+      const { install, render: renderComponent } = extension;
+      install.call(extension, this);
+      if (renderComponent) {
+        this.components.push(renderComponent.bind(extension));
+      }
     });
   }
 
@@ -260,6 +267,14 @@ export default class LogicFlow {
     const { transformMatrix } = this.graphModel;
     transformMatrix.translate(x, y);
   }
+  /**
+   * 还原图形为初始位置
+   */
+  resetTranslate(): void {
+    const { transformMatrix } = this.graphModel;
+    const { TRANSLATE_X, TRANSLATE_Y } = transformMatrix;
+    this.translate(-TRANSLATE_X, -TRANSLATE_Y);
+  }
   /**
    * 将图形定位到画布中心
    * @param focusOnArgs 支持用户传入图形当前的坐标或id，可以通过type来区分是节点还是连线的id，也可以不传（兜底）
@@ -297,8 +312,13 @@ export default class LogicFlow {
    * @param {string} nodeId 节点Id
    */
   deleteNode(nodeId: string): void {
-    // todo: 1) before after钩子； 2) 删除后的回调
-    this.graphModel.deleteNode(nodeId);
+    const Model = this.graphModel.getNodeModel(nodeId);
+    const data = Model.getData();
+    const { guards } = this.options;
+    const enabledDelete = guards && guards.beforeDelete ? guards.beforeDelete(data) : true;
+    if (enabledDelete) {
+      this.graphModel.deleteNode(nodeId);
+    }
   }
   /**
    * 添加节点
@@ -307,6 +327,14 @@ export default class LogicFlow {
   addNode(nodeConfig: NodeConfig): BaseNodeModel {
     return this.graphModel.addNode(nodeConfig);
   }
+
+  setProperties(id: string, properties: Object): void {
+    this.graphModel.getElement(id)?.setProperties(properties);
+  }
+
+  getProperties(id: string): Object {
+    return this.graphModel.getElement(id)?.getProperties();
+  }
   /**
    * 显示节点文本编辑框
    * @param nodeId 节点id
@@ -319,7 +347,13 @@ export default class LogicFlow {
    * @param nodeId 节点Id
    */
   cloneNode(nodeId: string): BaseNodeModel {
-    return this.graphModel.cloneNode(nodeId);
+    const Model = this.graphModel.getNodeModel(nodeId);
+    const data = Model.getData();
+    const { guards } = this.options;
+    const enabledClone = guards && guards.beforeClone ? guards.beforeClone(data) : true;
+    if (enabledClone) {
+      return this.graphModel.cloneNode(nodeId);
+    }
   }
   /**
    * 获取节点对象
@@ -351,14 +385,25 @@ export default class LogicFlow {
   createEdge(edgeConfig: EdgeConfig): void {
     this.graphModel.createEdge(edgeConfig);
   }
-  /* 删除边 */
-  removeEdge(config: EdgeFilter): void {
+  /**
+   * 删除边
+   * @param {string} edgeId 边Id
+   */
+  deleteEdge(edgeId: string): void {
+    // 待讨论，这种钩子在这里覆盖不到removeEdge, 是否需要在graphModel中实现
+    const { guards } = this.options;
+    const edgeData = this.graphModel.edgesMap[edgeId].model.getData();
+    const enabledDelete = guards && guards.beforeDelete
+      ? guards.beforeDelete(edgeData) : true;
+    if (enabledDelete) {
+      this.graphModel.removeEdgeById(edgeId);
+    }
+  }
+  /* 删除指定类型的边 */
+  removeEdge(config: { sourceNodeId: string, targetNodeId: string }): void {
     const {
-      id, sourceNodeId, targetNodeId,
+      sourceNodeId, targetNodeId,
     } = config;
-    if (id) {
-      this.graphModel.removeEdgeById(id);
-    }
     if (sourceNodeId && targetNodeId) {
       this.graphModel.removeEdge(sourceNodeId, targetNodeId);
     } else if (sourceNodeId) {
@@ -501,6 +546,7 @@ export default class LogicFlow {
           options={this.options}
           dnd={this.dnd}
           snaplineModel={this.snaplineModel}
+          components={this.components}
         />
       </Provider>
     ), this.container);

packages/core/src/constant/constant.ts

@@ -30,6 +30,7 @@ export enum ModelType {
 export enum ElementType {
   NODE = 'node',
   EDGE = 'edge',
+  GRAPH = 'graph',
 }
 
 export enum EventType {
@@ -57,6 +58,7 @@ export enum EventType {
   BLANK_CLICK = 'blank:click',
   BLANK_CONTEXTMENU = 'blank:contextmenu',
   CONNECTION_NOT_ALLOWED = 'connection:not-allowed',
+  HISTORY_CHANGE = 'history:change',
 }
 
 export enum InnerEventType {

packages/core/src/event/event.md

@@ -37,4 +37,8 @@ emit 的第二个参数。
 emit('namespace:eventName', {
   id, // 节点或连线的id 必传，blank非必需
   e, //  非必需，事件对象 e
+  position: { // 非必须，表示触发事件时，鼠标所处画布层的位置和dom层的位置
+    domOverlayPostion,
+    canvasOverlayPostion,
+  }
 })

packages/core/src/history/History.ts

@@ -1,9 +1,9 @@
 import { debounce, isEqual, last } from 'lodash-es';
 import { deepObserve } from 'mobx-utils';
 import EventEmitter from '../event/eventEmitter';
-import { InnerEventType } from '../constant/constant';
+import { EventType } from '../constant/constant';
 
-class History extends EventEmitter {
+class History {
   undos = [];
   redos = [];
   callbacks = [];
@@ -13,6 +13,11 @@ class History extends EventEmitter {
   // 发生数据变化后，最多再等500ms，把距离上次的数据变更存储起来。
   // 所以waitTime值越小，History对数据变化越敏感，存的undos就越细。
   waitTime = 100;
+  eventCenter: EventEmitter;
+
+  constructor(eventCenter) {
+    this.eventCenter = eventCenter;
+  }
 
   add(data) {
     if (isEqual(last(this.undos), data)) return;
@@ -23,7 +28,15 @@ class History extends EventEmitter {
     if (!isEqual(this.curData, data)) {
       this.redos = [];
     }
-    this.emit(InnerEventType.HISTORY_CHANGE, data);
+    this.eventCenter.emit(EventType.HISTORY_CHANGE,
+      {
+        data: {
+          undos: this.undos,
+          redos: this.redos,
+          undoAble: this.undos.length > 1,
+          redoAble: this.redos.length > 0,
+        },
+      });
     if (this.undos.length > this.maxSize) {
       this.undos.shift();
     }

packages/core/src/keyboard/shortcut.ts

@@ -1,5 +1,6 @@
 import LogicFlow from '../LogicFlow';
 import GraphModel from '../model/GraphModel';
+import { ElementType } from '../constant/constant';
 
 let selected = null;
 
@@ -11,16 +12,19 @@ export function initShortcut(lf: LogicFlow, graph: GraphModel) {
   keyboard.on(['cmd + c', 'ctrl + c'], () => {
     if (!keyboardOptions.enabled) return;
     if (graph.textEditElement) return;
-    const node = graph.getSelected();
-    selected = node;
+    const element = graph.selectElement;
+    if (element.BaseType === ElementType.NODE) {
+      selected = element;
+    }
     return false;
   });
   // 粘贴
   keyboard.on(['cmd + v', 'ctrl + v'], () => {
     if (!keyboardOptions.enabled) return;
     if (graph.textEditElement) return;
     if (selected) {
-      selected = graph.cloneNode(selected.id);
+      const cloned = lf.cloneNode(selected.id);
+      selected = cloned || selected;
     }
     return false;
   });
@@ -42,13 +46,12 @@ export function initShortcut(lf: LogicFlow, graph: GraphModel) {
   keyboard.on(['backspace'], () => {
     if (!keyboardOptions.enabled) return;
     if (graph.textEditElement) return;
-    const node = graph.getSelected();
-    if (node) {
-      lf.deleteNode(node.id);
+    const element = graph.selectElement;
+    if (element.BaseType === ElementType.NODE) {
+      lf.deleteNode(element.id);
     }
-    const edge = graph.getSelectedEdge();
-    if (edge) {
-      lf.removeEdge({ id: edge.id });
+    if (element.BaseType === ElementType.EDGE) {
+      lf.deleteEdge(element.id);
     }
     return false;
   });

packages/core/src/model/BaseModel.ts

@@ -16,12 +16,16 @@ interface IBaseModel {
   moveText(deltaX: number, deltaY: number): void;
   updateText(value: string): void;
   setSelected(flag: boolean): void;
+  setZIndex(zindex?: number): void;
   /**
    * 设置Node|Edge等model的状态
    * @param state 状态
    */
   setElementState(state: ElementState, additionStateData?: AdditionData): void;
-  // TODO: 补充model的通用函数
+
+  getProperties(): Object;
+
+  setProperties(properties: Object): void;
 }
 
 export {