@logicflow/core 0.4.1-alpha.1 → 0.4.1-alpha.2

package/dist/logic-flow.js.LICENSE.txt

@@ -0,0 +1,23 @@
+/*! *****************************************************************************
+Copyright (c) Microsoft Corporation. All rights reserved.
+Licensed under the Apache License, Version 2.0 (the "License"); you may not use
+this file except in compliance with the License. You may obtain a copy of the
+License at http://www.apache.org/licenses/LICENSE-2.0
+
+THIS CODE IS PROVIDED ON AN *AS IS* BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+KIND, EITHER EXPRESS OR IMPLIED, INCLUDING WITHOUT LIMITATION ANY IMPLIED
+WARRANTIES OR CONDITIONS OF TITLE, FITNESS FOR A PARTICULAR PURPOSE,
+MERCHANTABLITY OR NON-INFRINGEMENT.
+
+See the Apache Version 2.0 License for specific language governing permissions
+and limitations under the License.
+***************************************************************************** */
+
+/** @license mobx-react v5.4.4
+ * index.module.js
+ *
+ * Copyright (c) 2015 Michel Weststrate.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */

package/dist/style/index.css

@@ -1,13 +1,9 @@
-@import 'background.css';
-@import 'html-overlay.css';
-@import 'tool.css';
-
 .lf-graph {
   position: relative;
   width: 100%;
   height: 100%;
   z-index: 0;
-  background: #FFFFFF;
+  background: #ffffff;
   user-select: none;
 }
 .lf-element-text {
@@ -19,7 +15,7 @@
 .lf-node-anchor-hover {
   visibility: hidden;
 }
-.lf-anchor:hover > .lf-node-anchor-hover {
+.lf-anchor:hover .lf-node-anchor-hover {
   visibility: visible;
 }
 .lf-edge-append {
@@ -43,8 +39,128 @@
   cursor: grabbing;
 }
 .lf-drag-able {
-  cursor:default;
+  cursor: default;
 }
-.lf-bezier-adjust-anchor{
+.lf-bezier-adjust-anchor {
   cursor: pointer;
 }
+/* background */
+.lf-background,
+.lf-grid {
+  position: absolute;
+  left: 0px;
+  top: 0px;
+  right: 0;
+  bottom: 0;
+  z-index: -1;
+}
+.lf-background-area {
+  width: 100%;
+  height: 100%;
+}
+/* html-overlay */
+.lf-html-overlay {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  z-index: 1;
+  pointer-events: none;
+  overflow: hidden;
+  user-select: none;
+}
+.lf-html-overlay__transform > * {
+  pointer-events: all;
+}
+
+.lf-text-editable {
+  pointer-events: all;
+}
+.lf-text-input {
+  text-align: center;
+  outline: none;
+  position: absolute;
+  border: 1px solid #edefed;
+  box-sizing: border-box;
+  line-height: 1.2;
+  border-radius: 3px;
+  resize: none;
+  padding: 5px;
+  min-height: 20px;
+  min-width: 100px;
+  white-space: pre;
+  background: #fff;
+  transform: translate(-50%, -50%);
+}
+.lf-get-text-height {
+  display: inline-block;
+  word-break: break-all;
+  /* 为了跟输入效果保持一致，设置透明边框占位 */
+  border: 1px solid transparent;
+  box-sizing: border-box;
+}
+.lf-node-text-auto-wrap {
+  box-sizing: border-box;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  border: 1px solid transparent;
+}
+.lf-node-text-auto-wrap-content {
+  line-height: 1.2;
+  background: transparent;
+  text-align: center;
+  word-break: break-all;
+}
+/* tool-overlay */
+.lf-tool-overlay {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  z-index: 2;
+  pointer-events: none;
+  overflow: hidden;
+}
+.lf-tool-overlay > * {
+  pointer-events: all;
+}
+/* modification-overlay */
+
+.modification-overlay {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  z-index: 1;
+  pointer-events: none;
+  overflow: hidden;
+}
+.modification-overlay > * {
+  pointer-events: all;
+}
+.lf-outline,.lf-snapline {
+  pointer-events: none;
+}
+
+.lf-keyboard-tips {
+  float: right;
+}
+.lf-node-select-decorate {
+  transform: translate(-50%, -50%);
+  pointer-events: none;
+  border: 1px dashed #343435;
+  position: absolute;
+}
+.lf-multiple-select {
+  position: absolute;
+  border: 2px dashed rgba(24, 125, 255, 0.8);
+  box-shadow: 0px 0px 3px 0px rgba(24, 125, 255, 0.5);
+  cursor: move;
+}
+.lf-edge-adjust-point {
+  cursor: move;
+}

package/es/index.js

@@ -0,0 +1,69 @@
+
+import {
+  LogicFlow,
+  LogicFlowUtil,
+  h,
+  observer,
+  BaseNode,
+  RectNode,
+  CircleNode,
+  PolygonNode,
+  DiamondNode,
+  EllipseNode,
+  TextNode,
+  HtmlNode,
+  BaseEdge,
+  LineEdge,
+  PolylineEdge,
+  BezierEdge,
+  BaseEdgeModel,
+  BezierEdgeModel,
+  LineEdgeModel,
+  PolylineEdgeModel,
+  BaseNodeModel,
+  CircleNodeModel,
+  DiamondNodeModel,
+  EllipseNodeModel,
+  PolygonNodeModel,
+  RectNodeModel,
+  TextNodeModel,
+  HtmlNodeModel,
+  GraphModel,
+  Arrow,
+  Keyboard,
+} from '../dist/logic-flow';
+
+export {
+  LogicFlow,
+  LogicFlowUtil,
+  h,
+  observer,
+  BaseNode,
+  RectNode,
+  CircleNode,
+  PolygonNode,
+  DiamondNode,
+  EllipseNode,
+  TextNode,
+  HtmlNode,
+  BaseEdge,
+  LineEdge,
+  PolylineEdge,
+  BezierEdge,
+  BaseEdgeModel,
+  BezierEdgeModel,
+  LineEdgeModel,
+  PolylineEdgeModel,
+  BaseNodeModel,
+  CircleNodeModel,
+  DiamondNodeModel,
+  EllipseNodeModel,
+  PolygonNodeModel,
+  RectNodeModel,
+  TextNodeModel,
+  HtmlNodeModel,
+  GraphModel,
+  Arrow,
+  Keyboard,
+}
+export default LogicFlow;

package/package.json

@@ -1,12 +1,21 @@
 {
   "name": "@logicflow/core",
-  "version": "0.4.1-alpha.1",
+  "version": "0.4.1-alpha.2",
   "description": "LogicFlow core, to quickly build flowchart editor",
   "main": "dist/logic-flow.js",
-  "license": "Apache 2.0",
+  "unpkg": "dist/logic-flow.js",
+  "jsdelivr": "dist/logic-flow.js",
+  "module": "es/index.js",
+  "license": "Apache-2.0",
+  "homepage": "http://logic-flow.org/",
   "types": "types/index.d.ts",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/didi/LogicFlow",
+    "directory": "packages/core"
+  },
   "scripts": {
-    "dev": "cross-env NODE_ENV=development MOCK_TYPE=mock webpack-dev-server --client-log-level warning --config scripts/webpack.config.dev.js",
+    "dev": "cross-env NODE_ENV=development webpack-dev-server --client-log-level warning --config scripts/webpack.config.dev.js",
     "clean": "rimraf dist lib esm cjs",
     "build": "npm run build:umd",
     "build:umd": "cross-env NODE_ENV=production webpack --config scripts/webpack.config.build.js && cp -r src/style/ dist/style",
@@ -18,13 +27,19 @@
   },
   "files": [
     "dist",
-    "types"
+    "es",
+    "types",
+    "README.md"
   ],
   "dependencies": {
     "@types/mousetrap": "^1.6.4",
     "mousetrap": "^1.6.5",
     "preact": "^10.4.8"
   },
+  "keywords": [
+    "flowchart",
+    "diagram"
+  ],
   "devDependencies": {
     "@babel/core": "^7.9.0",
     "@babel/plugin-proposal-class-properties": "^7.8.3",
@@ -81,5 +96,5 @@
     "last 2 versions",
     "not ie <= 11"
   ],
-  "gitHead": "575e6152180ed1fc4acb270eaf8719a7a8dacc5b"
+  "gitHead": "ab8cc6126e9dfa5c4fb18037538a374d3a0b0521"
 }

package/types/LogicFlow.d.ts

@@ -6,7 +6,7 @@ import History from './history/History';
 import Tool from './tool';
 import EventEmitter, { CallbackType } from './event/eventEmitter';
 import Keyboard from './keyboard';
-import { EdgeConfig, EdgeFilter, NodeConfig, NodeAttribute, Extension, ComponentRender, FocusOnArgs, EdgeAttribute, EdgeData, GraphConfigData, RegisterElementFn, RegisterConfig } from './type';
+import { EdgeConfig, EdgeFilter, NodeConfig, NodeAttribute, Extension, ComponentRender, FocusOnArgs, EdgeAttribute, EdgeData, GraphConfigData, RegisterElementFn, RegisterConfig, ZoomParam, PointTuple } from './type';
 import SnaplineModel from './model/SnaplineModel';
 import { EditConfigInterface } from './model/EditConfigModel';
 declare type GraphConfigModel = {
@@ -35,7 +35,8 @@ export default class LogicFlow {
     constructor(options: Options.Definition);
     on(evt: string, callback: CallbackType): void;
     off(evt: string, callback: CallbackType): void;
-    emit(evt: string, arg: Record<string, string | number | object>): void;
+    once(evt: string, callback: CallbackType): void;
+    emit(evt: string, arg: any): void;
     /**
      * 添加扩展, 待讨论，这里是不是静态方法好一些？
      * 重复添加插件的时候，把上一次添加的插件的销毁。
@@ -51,10 +52,11 @@ export default class LogicFlow {
     redo(): void;
     /**
      * 放大缩小图形
-     * isZoomIn 是否放大，默认false, 表示缩小。
+     * @param zoomSize 放大缩小的值，支持传入0-n之间的数字。小于1表示缩小，大于1表示放大。也支持传入true和false按照内置的刻度放大缩小
+     * @param point 缩放的原点
      * @returns {string} -放大缩小的比例
      */
-    zoom(isZoomIn?: boolean): string;
+    zoom(zoomSize?: ZoomParam, point?: PointTuple): string;
     /**
      * 还原图形
      */
@@ -111,6 +113,11 @@ export default class LogicFlow {
      * @param value 文案内容
      */
     updateText(id: string, value: string): void;
+    /**
+     * 删除元素，在不确定当前id是节点还是连线时使用
+     * @param id 元素id
+     */
+    deleteElement(id: any): boolean;
     /**
      * 修改指定节点类型
      * @param id 节点id
@@ -132,7 +139,7 @@ export default class LogicFlow {
      * 删除节点
      * @param {string} nodeId 节点Id
      */
-    deleteNode(nodeId: string): void;
+    deleteNode(nodeId: string): boolean;
     /**
      * 显示节点文本编辑框
      * @param nodeId 节点id
@@ -148,20 +155,44 @@ export default class LogicFlow {
      * 删除边
      * @param {string} edgeId 边Id
      */
-    deleteEdge(edgeId: string): void;
+    deleteEdge(edgeId: string): boolean;
+    /**
+     * 删除指定类型的边
+     * todo: API一致
+     * @param config.sourceNodeId 边的起点节点ID
+     * @param config.targetNodeId 边的终点节点ID
+     */
     removeEdge(config: {
         sourceNodeId: string;
         targetNodeId: string;
     }): void;
-    getEdge(config: EdgeFilter): _Model.BaseEdgeModel[];
     /**
      * 获取节点对象
      * @param nodeId 节点Id
      */
     getNodeModel(nodeId: string): _Model.BaseNodeModel;
     getNodeData(nodeId: string): NodeAttribute;
+    /**
+     * 设置节点数据
+     * @deprecated 不建议直接设置节点数据，更新文本请用updateText, 修改数据请用setProperties
+     */
     setNodeData(nodeAttribute: NodeAttribute): void;
+    getEdgeModel(config: EdgeFilter): _Model.BaseEdgeModel[];
+    /**
+     * 获取边的model
+     * @param edgeId 边的Id
+     */
+    getEdgeModelById(edgeId: string): _Model.BaseEdgeModel;
+    /**
+     * 获取边Model
+     * @deprecated 不建议使用getEdge, 建议使用getEdgeModel
+     */
+    getEdge(config: EdgeFilter): _Model.BaseEdgeModel[];
     getEdgeData(edgeId: string): EdgeData;
+    /**
+     * 设置边数据
+     * @deprecated 不建议直接设置边数据，更新文本请用updateText, 修改数据请用setProperties
+     */
     setEdgeData(edgeAttribute: EdgeAttribute): void;
     /**
      * 获取流程绘图数据
@@ -171,10 +202,7 @@ export default class LogicFlow {
      * 获取流程绘图原始数据
      * 在存在adapter时，可以使用getGraphRawData获取图原始数据
      */
-    getGraphRawData(): {
-        nodes: import("./type").NodeData[];
-        edges: EdgeData[];
-    };
+    getGraphRawData(): GraphConfigData;
     /**
      * 设置元素的自定义属性
      * @param id 元素的id
@@ -187,6 +215,20 @@ export default class LogicFlow {
      * @returns 自定义属性
      */
     getProperties(id: string): Object;
+    /**
+     * 修改节点的id， 如果不传新的id，会内部自动创建一个。
+     * @param { string } oldId 将要被修改的id
+     * @param { string } newId 可选，修改后的id
+     * @returns 修改后的节点id
+     */
+    changeNodeId<T extends string>(oldId: string, newId?: T): false | T | string;
+    /**
+     * 修改连线的id， 如果不传新的id，会内部自动创建一个。
+     * @param { string } oldId 将要被修改的id
+     * @param { string } newId 可选，修改后的id
+     * @returns 修改后的节点id
+     */
+    changeEdgeId<T extends string>(oldId: string, newId?: T): false | T | string;
     /**
      * 更新流程图编辑相关设置
      */
@@ -218,13 +260,21 @@ export default class LogicFlow {
      * @param isIgnoreCheck 是否包括sourceNode和targetNode没有被选中的连线,默认包括。
      * 复制的时候不能包括此类连线, 因为复制的时候不允许悬空的连线。
      */
-    getSelectElements(isIgnoreCheck?: boolean): void;
+    getSelectElements(isIgnoreCheck?: boolean): GraphConfigData;
     /**
      * 动态修改 id 对应元素 model 中的属性
      * @param {string} id 元素id
      * @param {object} attributes 需要更新的属性
      */
     updateAttributes(id: string, attributes: object): void;
+    /**
+     * 清空画布
+     */
+    clearData(): void;
+    /**
+     * 设置元素的层级高度，在元素重叠的时候大的在前面
+     */
+    setElementZIndex(id: any, zIndex: number | 'top' | 'bottom'): void;
     /**
      * 添加多个元素, 包括连线和节点。
      */
@@ -238,14 +288,8 @@ export default class LogicFlow {
      * @param leftTopPoint 区域左上角坐标, dom层坐标
      * @param rightBottomPoint 区域右下角坐标，dom层坐标
      */
-    getAreaElement(leftTopPoint: any, rightBottomPoint: any): any[];
+    getAreaElement(leftTopPoint: PointTuple, rightBottomPoint: PointTuple): any[];
     removeNodeSnapLine(): void;
-    clearData(): void;
-    /**
-     * 获取边的model
-     * @param edgeId 边的Id
-     */
-    getEdgeModelById(edgeId: string): _Model.BaseEdgeModel;
     setView(type: string, component: any): void;
     getView: (type: string) => any;
     render(graphData?: {}): void;

package/types/constant/DefaultTheme.d.ts

@@ -87,6 +87,9 @@ export declare const defaultTheme: {
         fontFamily: string;
     };
     nodeText: {
+        autoWrap: boolean;
+        lineHeight: number;
+        wrapPadding: string;
         color: string;
         fontSize: number;
         fontWeight: string;
@@ -104,6 +107,9 @@ export declare const defaultTheme: {
             radius: number;
         };
         hoverBackground: any;
+        autoWrap: boolean;
+        lineHeight: number;
+        wrapPadding: string;
     };
     line: {
         stroke: string;
@@ -158,4 +164,10 @@ export declare const defaultTheme: {
         stroke: string;
         strokeWidth: number;
     };
+    edgeAdjust: {
+        r: number;
+        fill: string;
+        stroke: string;
+        strokeWidth: string;
+    };
 };

package/types/constant/constant.d.ts

@@ -18,6 +18,7 @@ export declare enum ModelType {
     TEXT_NODE = "text-node",
     ELLIPSE_NODE = "ellipse-node",
     DIAMOND_NODE = "diamond-node",
+    HTML_NODE = "html-node",
     EDGE = "edge",
     LINE_EDGE = "line-edge",
     POLYLINE_EDGE = "polyline-edge",
@@ -36,6 +37,7 @@ export declare enum EventType {
     NODE_DELETE = "node:delete",
     NODE_ADD = "node:add",
     NODE_DND_ADD = "node:dnd-add",
+    NODE_DND_DRAG = "node:dnd-drag",
     NODE_MOUSEDOWN = "node:mousedown",
     NODE_DRAGSTART = "node:dragstart",
     NODE_DRAG = "node:drag",
@@ -52,6 +54,9 @@ export declare enum EventType {
     EDGE_MOUSEENTER = "edge:mouseenter",
     EDGE_MOUSELEAVE = "edge:mouseleave",
     EDGE_CONTEXTMENU = "edge:contextmenu",
+    EDGE_ADJUST = "edge:adjust",
+    EDGE_EXCHANGE_NODE = "edge:exchange-node",
+    SELECTION_CONTEXTMENU = "selection:contextmenu",
     BLANK_MOUSEDOWN = "blank:mousedown",
     BLANK_DRAGSTART = "blank:dragstart",
     BLANK_DRAG = "blank:drag",
@@ -61,10 +66,16 @@ export declare enum EventType {
     BLANK_CLICK = "blank:click",
     BLANK_CONTEXTMENU = "blank:contextmenu",
     CONNECTION_NOT_ALLOWED = "connection:not-allowed",
-    HISTORY_CHANGE = "history:change"
+    HISTORY_CHANGE = "history:change",
+    TEXT_UPDATE = "text:update",
+    GRAPH_TRANSFORM = "graph:transform"
 }
 export declare enum SegmentDirection {
     HORIZONTAL = "horizontal",
     VERTICAL = "vertical"
 }
-export declare const ElementMaxzIndex = 999;
+export declare const ElementMaxzIndex = 9999;
+export declare enum OverlapMode {
+    DEFAULT = 0,
+    INCREASE = 1
+}

package/types/event/eventEmitter.d.ts

@@ -9,28 +9,28 @@ export default class EventEmitter {
     private _events;
     /**
        * 监听一个事件
-       * @param evt
+       * @param evt 事件名称
        * @param callback
        * @param once
        */
     on(evt: string, callback: CallbackType, once?: boolean): this;
     /**
-       * 监听一个事件一次
-       * @param evt
-       * @param callback
-       */
-    once(evt: string, callback: CallbackType): this;
+     * 监听一个事件一次
+     * @param evt
+     * @param callback
+     */
+    once(evt: string, callback: CallbackType): void;
     /**
        * 触发一个事件
        * @param evt
        * @param args
        */
-    emit(evt: string, eventArgs: EventArgs): void;
+    emit(evts: string, eventArgs: EventArgs): void;
     /**
        * 取消监听一个事件，或者一个channel
        * @param evt
        * @param callback
        */
-    off(evt?: string, callback?: CallbackType): this;
+    off(evts?: string, callback?: CallbackType): this;
     getEvents(): Record<string, EventType[]>;
 }

package/types/model/BaseModel.d.ts

@@ -1,14 +1,73 @@
 import { ElementState } from '../constant/constant';
 import { TextConfig, AdditionData } from '../type';
 interface IBaseModel {
-    readonly id: string;
+    /**
+     * 节点或者连线的id.
+     * 默认情况下，使用uuidv4生成。
+     * 如果想要自定义，可以重写createId生成。
+     */
+    id: string;
+    /**
+     * 不可自定义
+     * model对应的图形外观类型（eg: 圆形、矩形、多边形等）
+     * 用于logicflow内部计算使用。
+     */
     modelType: string;
+    /**
+     * 请勿直接修改属性，如果想要将一个节点类型修改为另一个类型。请使用
+     * `lf.graphModel.changeEdgeType`和`lf.graphModel.changeNodeType`
+     *
+     * 流程图元素类型，自定义元素时对应的标识。
+     * 在logicflow/core中对应着rect、circle、polyline这种。
+     * 在实际项目中，我们会基于业务类型进行自定义type.
+     * 例如BPMN应用场景，我们会定义开始节点的类型为bpmn:start-event
+     *
+     * 和modelType的区别是，type更多的是业务上的类型，而modelType则是外观上的类型。
+     * 例如bpmnjs的开始节点和结束节点type分别为'bpmn:start-event'和'bpmn:end-event'。
+     * 但是他们的modelType都是circle-node, 因为他们外观都是基于圆形自定义而来。
+     */
     type: string;
+    /**
+     * 元素状态
+     * 不同的状态对应着元素显示效果。
+     * 请勿直接修改。
+     * logicflow内部将元素状态分为5种：
+     * DEFAULT = 1 默认显示
+     * TEXT_EDIT = 2 此元素正在进行文本编辑
+     * SHOW_MENU = 3, 显示菜单，废弃请使用菜单插件
+     * ALLOW_CONNECT = 4, 此元素允许作为当前连线的目标节点
+     * NOT_ALLOW_CONNECT = 5, 此元素不允许作为当前连线的目标节点
+     */
     state: ElementState;
     additionStateData: AdditionData;
+    /**
+     * 元素上的文本
+     * logicflow中存在两种文本
+     * 一种是脱离连线和节点单独存在的文本
+     * 一种是必须和连线、节点关联的文本。
+     * 此属性控制的是第二种。
+     * 节点和连线删除、调整的时候，其关联的文本也会对应删除、调整。
+     */
     text: TextConfig;
+    /**
+     * 元素是否被选中
+     */
     isSelected: boolean;
+    /**
+     * 元素堆叠是层级，默认情况下节点zIndex值为1，连线zIndex为0。
+     * todo：写完善
+     */
     zIndex: number;
+    /**
+     * 创建节点ID
+     * 默认情况下，logicflow内部使用uuidv4生成id。
+     * 在自定义节点的时候，可以重写此方法基于自己的规则生成id。
+     * 注意，此方法必须是同步的。
+     * 如果想要异步修改Id，建议删除此节点后再同一位置创建一个新的节点。
+     * @overridable 可以重写
+     * @returns string
+     */
+    createId(): string;
     move(deltaX: number, deltaY: number): void;
     moveText(deltaX: number, deltaY: number): void;
     updateText(value: string): void;