@logicflow/core 0.3.6 → 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.3.6",
+  "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",
@@ -59,8 +74,8 @@
     "ids": "^1.0.0",
     "less-loader": "^6.0.0",
     "lodash-es": "^4.17.15",
-    "mobx": "^5.15.7",
-    "mobx-react": "^6.3.0",
+    "mobx": "^4.15.7",
+    "mobx-react": "^5.4.4",
     "mobx-utils": "^5.6.1",
     "prettier": "^2.2.1",
     "rimraf": "^3.0.2",
@@ -81,5 +96,5 @@
     "last 2 versions",
     "not ie <= 11"
   ],
-  "gitHead": "01164c0eb64b11b65a30615c795c978c04ad0030"
+  "gitHead": "ab8cc6126e9dfa5c4fb18037538a374d3a0b0521"
 }

package/types/LogicFlow.d.ts

@@ -1,35 +1,17 @@
-import { h } from 'preact';
 import GraphModel from './model/GraphModel';
-import BaseNodeModel from './model/node/BaseNodeModel';
-import BaseNode from './view/node/BaseNode';
-import RectNodeModel from './model/node/RectNodeModel';
-import RectNode from './view/node/RectNode';
-import CircleNodeModel from './model/node/CircleNodeModel';
-import CircleNode from './view/node/CircleNode';
-import PolygonNodeModel from './model/node/PolygonNodeModel';
-import PolygonNode from './view/node/PolygonNode';
-import TextNodeModel from './model/node/TextNodeModel';
-import TextNode from './view/node/TextNode';
-import BaseEdgeModel from './model/edge/BaseEdgeModel';
-import BaseEdge from './view/edge/BaseEdge';
-import LineEdgeModel from './model/edge/LineEdgeModel';
-import LineEdge from './view/edge/LineEdge';
-import PolylineEdgeModel from './model/edge/PolylineEdgeModel';
-import PolylineEdge from './view/edge/PolylineEdge';
 import Dnd from './view/behavior/DnD';
-import EllipseNode from './view/node/EllipseNode';
-import EllipseNodeModel from './model/node/EllipseNodeModel';
 import * as Options from './options';
+import * as _Model from './model';
 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, RegisterElementFn, EdgeAttribute, EdgeData, GraphConfigData } 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 = {
-    nodes: BaseNodeModel[];
-    edges: BaseEdgeModel[];
+    nodes: _Model.BaseNodeModel[];
+    edges: _Model.BaseEdgeModel[];
 };
 export default class LogicFlow {
     container: HTMLElement;
@@ -53,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;
     /**
      * 添加扩展, 待讨论，这里是不是静态方法好一些？
      * 重复添加插件的时候，把上一次添加的插件的销毁。
@@ -62,16 +45,18 @@ export default class LogicFlow {
     static use(extension: Extension): void;
     installPlugins(disabledPlugins?: any[]): void;
     __installPlugin(extension: any): void;
-    register(type: string, fn: RegisterElementFn, isObserverView?: boolean): void;
+    register(type: string | RegisterConfig, fn?: RegisterElementFn, isObserverView?: boolean): void;
+    _registerElement(config: any): void;
     defaultRegister(): void;
     undo(): void;
     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;
     /**
      * 还原图形
      */
@@ -128,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
@@ -139,17 +129,17 @@ export default class LogicFlow {
      * @param nodeId 节点ID
      * @returns model数组
      */
-    getNodeEdges(nodeId: any): BaseEdgeModel[];
+    getNodeEdges(nodeId: any): _Model.BaseEdgeModel[];
     /**
      * 添加节点
      * @param nodeConfig 节点配置
      */
-    addNode(nodeConfig: NodeConfig): BaseNodeModel;
+    addNode(nodeConfig: NodeConfig): _Model.BaseNodeModel;
     /**
      * 删除节点
      * @param {string} nodeId 节点Id
      */
-    deleteNode(nodeId: string): void;
+    deleteNode(nodeId: string): boolean;
     /**
      * 显示节点文本编辑框
      * @param nodeId 节点id
@@ -159,26 +149,50 @@ export default class LogicFlow {
      * 克隆节点
      * @param nodeId 节点Id
      */
-    cloneNode(nodeId: string): BaseNodeModel;
+    cloneNode(nodeId: string): _Model.BaseNodeModel;
     createEdge(edgeConfig: EdgeConfig): void;
     /**
      * 删除边
      * @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): BaseEdgeModel[];
     /**
      * 获取节点对象
      * @param nodeId 节点Id
      */
-    getNodeModel(nodeId: string): BaseNodeModel;
+    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;
     /**
      * 获取流程绘图数据
@@ -188,10 +202,7 @@ export default class LogicFlow {
      * 获取流程绘图原始数据
      * 在存在adapter时，可以使用getGraphRawData获取图原始数据
      */
-    getGraphRawData(): {
-        nodes: import("./type").NodeData[];
-        edges: EdgeData[];
-    };
+    getGraphRawData(): GraphConfigData;
     /**
      * 设置元素的自定义属性
      * @param id 元素的id
@@ -204,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;
     /**
      * 更新流程图编辑相关设置
      */
@@ -211,7 +236,7 @@ export default class LogicFlow {
     /**
      * 获取流程图编辑相关设置
      */
-    getEditConfig(): Partial<import("./model/EditConfigModel").default>;
+    getEditConfig(): Partial<_Model.EditConfigModel>;
     /**
      * 获取事件位置相对于画布左上角的坐标
      * @param {number} x 事件x坐标
@@ -235,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;
     /**
      * 添加多个元素, 包括连线和节点。
      */
@@ -255,16 +288,10 @@ 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): BaseEdgeModel;
     setView(type: string, component: any): void;
     getView: (type: string) => any;
     render(graphData?: {}): void;
 }
-export { BaseEdge, BaseEdgeModel, BaseNode, BaseNodeModel, RectNode, RectNodeModel, CircleNode, CircleNodeModel, PolygonNode, PolygonNodeModel, TextNode, TextNodeModel, LineEdge, LineEdgeModel, PolylineEdge, PolylineEdgeModel, EllipseNode, EllipseNodeModel, h, };
+export {};

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/index.d.ts

@@ -1,7 +1,11 @@
+import { h } from 'preact';
 import LogicFlow from './LogicFlow';
+import * as LogicFlowUtil from './util';
 export declare function observer<P>(props: P): any;
-export { LogicFlow, };
+export { LogicFlow, h };
+export { LogicFlowUtil };
 export * from './type/index';
+export * from './view';
 export * from './model';
 export * from './keyboard';
 export * from './options';