@logicflow/core 1.0.0-alpha.0 → 1.0.0-alpha.12

package/types/model/GraphModel.d.ts

@@ -3,42 +3,106 @@ import BaseEdgeModel from './edge/BaseEdgeModel';
 import EditConfigModel from './EditConfigModel';
 import TransfromModel from './TransformModel';
 import { IBaseModel } from './BaseModel';
-import { ElementState, ModelType, ElementType } from '../constant/constant';
-import { AdditionData, Point, NodeConfig, EdgeConfig, Style, NodeMoveRule } from '../type';
+import { OverlapMode } from '../constant/constant';
+import { AdditionData, Point, NodeConfig, EdgeConfig, PointTuple, NodeMoveRule, GraphConfigData } from '../type';
 import EventEmitter from '../event/eventEmitter';
+import { Theme } from '../constant/DefaultTheme';
+import { Definition } from '../options';
 declare type BaseNodeModelId = string;
 declare type ElementModeId = string;
 declare class GraphModel {
-    readonly BaseType = ElementType.GRAPH;
-    modelType: ModelType;
+    /**
+     * LogicFlow画布挂载元素
+     * 也就是初始化LogicFlow实例时传入的container
+     */
     rootEl: HTMLElement;
-    theme: any;
-    eventCenter: EventEmitter;
-    modelMap: Map<any, any>;
+    /**
+     * LogicFlow画布宽度
+     */
     width: number;
+    /**
+     * LogicFlow画布高度
+     */
     height: number;
+    /**
+     * 主题配置
+     * @see todo docs link
+     */
+    theme: Theme;
+    /**
+     * 事件中心
+     * @see todo docs link
+     */
+    eventCenter: EventEmitter;
+    /**
+     * 维护所有节点和边类型对应的model
+     */
+    modelMap: Map<any, any>;
+    /**
+     * 位于当前画布顶部的元素。
+     * 此元素只在堆叠模式为默认模式下存在。
+     * 用于在默认模式下将之前的顶部元素恢复初始高度。
+     */
     topElement: BaseNodeModel | BaseEdgeModel;
-    selectElement: BaseNodeModel | BaseEdgeModel;
-    idGenerator: (type?: string) => number | string;
+    /**
+     * 自定义全局id生成器
+     * @see todo docs link
+     */
+    idGenerator: (type?: string) => string;
+    /**
+     * 节点移动规则判断
+     * 在节点移动的时候，会出发此数组中的所有规则判断
+     */
     nodeMoveRules: NodeMoveRule[];
+    /**
+     * 在图上操作创建边时，默认使用的边类型.
+     */
     edgeType: string;
+    /**
+     * 当前图上所有节点的model
+     */
     nodes: BaseNodeModel[];
-    activeElement: IBaseModel;
-    activeElementState: ElementState;
-    state: ElementState;
-    additionStateData: AdditionData;
+    /**
+     * 当前图上所有边的model
+     */
     edges: BaseEdgeModel[];
-    isSlient: boolean;
-    overlapMode: number;
-    plugins: any[];
-    tools: any[];
+    /**
+     * 元素重合时堆叠模式
+     * 默认模式，节点和边被选中，会被显示在最上面。当取消选中后，元素会恢复之前的层级。
+     * 递增模式，节点和边被选中，会被显示在最上面。当取消选中后，元素会保持层级。
+     * @see todo link
+     */
+    overlapMode: OverlapMode;
+    /**
+     * 背景配置
+     * @see todo link
+     */
     background: any;
-    transformMatrix: TransfromModel;
-    editConfig: EditConfigModel;
+    /**
+     * 控制画布的缩放、平移
+     * @see todo link
+     */
+    transformModel: TransfromModel;
+    /**
+     * 控制流程图编辑相关配置
+     * @see todo link
+     */
+    editConfigModel: EditConfigModel;
+    /**
+     * 网格大小
+     * @see todo link
+     */
     gridSize: number;
+    /**
+     * 局部渲染
+     * @see todo logicflow性能
+     */
     partial: boolean;
+    /**
+     * 外部拖动节点进入画布的过程中，用fakerNode来和画布上正是的节点区分开
+     */
     fakerNode: BaseNodeModel;
-    constructor(config: any);
+    constructor(options: Definition);
     get nodesMap(): {
         [key: string]: {
             index: number;
@@ -51,18 +115,31 @@ declare class GraphModel {
             model: BaseEdgeModel;
         };
     };
+    /**
+     * 基于zIndex对元素进行排序。
+     * todo: 性能优化
+     */
     get sortElements(): any[];
     /**
-     * 当前编辑的元素，低频操作，先循环找吧。
+     * 当前编辑的元素，低频操作，先循环找。
      */
     get textEditElement(): BaseNodeModel | BaseEdgeModel;
+    /**
+     * 当前画布所有被选中的元素
+     */
     get selectElements(): Map<any, any>;
     /**
      * 获取指定区域内的所有元素
      */
-    getAreaElement(leftTopPoint: any, rightBottomPoint: any): any[];
+    getAreaElement(leftTopPoint: PointTuple, rightBottomPoint: PointTuple): any[];
+    /**
+     * 获取指定类型元素对应的Model
+     */
     getModel(type: string): any;
-    getNodeModel(nodeId: BaseNodeModelId): BaseNodeModel;
+    /**
+     * 基于Id获取节点的model
+     */
+    getNodeModelById(nodeId: BaseNodeModelId): BaseNodeModel;
     /**
      * 因为流程图所在的位置可以是页面任何地方
      * 当内部事件需要获取触发事件时，其相对于画布左上角的位置
@@ -80,41 +157,103 @@ declare class GraphModel {
     };
     /**
      * 判断一个元素是否在指定矩形区域内。
-     * @param element 节点或者连线
+     * @param element 节点或者边
      * @param lt 左上角点
      * @param rb 右下角点
      */
-    isElementInArea(element: any, lt: any, rb: any, wholeEdge?: boolean): boolean;
-    graphDataToModel(graphData: any): void;
-    modelToGraphData(): {
-        nodes: import("../type").NodeData[];
-        edges: import("../type").EdgeData[];
+    isElementInArea(element: any, lt: PointTuple, rb: PointTuple, wholeEdge?: boolean): boolean;
+    /**
+     * 使用新的数据重新设置整个画布的元素
+     * 注意：将会清除画布上所有已有的节点和边
+     * @param { object } graphData 图数据
+     */
+    graphDataToModel(graphData: GraphConfigData): void;
+    /**
+     * 获取画布数据
+     */
+    modelToGraphData(): GraphConfigData;
+    modelToHistoryData(): false | {
+        nodes: any[];
+        edges: any[];
     };
-    getEdgeModel(edgeId: string): BaseEdgeModel;
+    /**
+     * 获取边的model
+     */
+    getEdgeModelById(edgeId: string): BaseEdgeModel | undefined;
+    /**
+     * 获取节点或者边的model
+     */
     getElement(id: string): IBaseModel | undefined;
+    /**
+     * 所有节点上所有边的model
+     */
     getNodeEdges(nodeId: any): BaseEdgeModel[];
     /**
      * 获取选中的元素数据
-     * @param isIgnoreCheck 是否包括sourceNode和targetNode没有被选中的连线,默认包括。
-     * 复制的时候不能包括此类连线, 因为复制的时候不允许悬空的连线
+     * @param isIgnoreCheck 是否包括sourceNode和targetNode没有被选中的边,默认包括。
+     * 复制的时候不能包括此类边, 因为复制的时候不允许悬空的边
+     */
+    getSelectElements(isIgnoreCheck?: boolean): GraphConfigData;
+    /**
+     * 修改对应元素 model 中的属性
+     * 注意：此方法慎用，除非您对logicflow内部有足够的了解。
+     * 大多数情况下，请使用setProperties、updateText、changeNodeId等方法。
+     * 例如直接使用此方法修改节点的id,那么就是会导致连接到此节点的边的sourceNodeId出现找不到的情况。
+     * @param {string} id 元素id
+     * @param {object} attributes 需要更新的属性
      */
-    getSelectElements(isIgnoreCheck?: boolean): {
-        nodes: any[];
-        edges: any[];
-    };
     updateAttributes(id: string, attributes: object): void;
     /**
-     * 修改指定节点id
+     * 修改节点的id， 如果不传新的id，会内部自动创建一个。
+     * @param { string } oldId 将要被修改的id
+     * @param { string } newId 可选，修改后的id
+     * @returns 修改后的节点id, 如果传入的oldId不存在，返回空字符串
+     */
+    changeNodeId<T extends string>(oldId: any, newId?: T | string): T | string;
+    /**
+     * 修改边的id， 如果不传新的id，会内部自动创建一个。
+     * @param { string } oldId 将要被修改的id
+     * @param { string } newId 可选，修改后的id
+     * @returns 修改后的节点id, 如果传入的oldId不存在，返回空字符串
+     */
+    changeEdgeId<T extends string>(oldId: string, newId?: string): T | string;
+    /**
+     * 内部保留方法，请勿直接使用
      */
-    changeNodeId<T extends string>(oldId: any, newId?: T | string): false | T | string;
-    changeEdgeId<T extends string>(oldId: string, newId?: string): false | T | string;
     setFakerNode(nodeModel: BaseNodeModel): void;
+    /**
+     * 内部保留方法，请勿直接使用
+     */
     removeFakerNode(): void;
+    /**
+     * 设置指定类型的Model,请勿直接使用
+     */
     setModel(type: string, ModelClass: any): Map<any, any>;
-    updateEdgeByIndex(index: any, data: any): void;
+    /**
+     * 将某个元素放置到顶部。
+     * 如果堆叠模式为默认模式，则将原置顶元素重新恢复原有层级。
+     * 如果堆叠模式为递增模式，则将需指定元素zIndex设置为当前最大zIndex + 1。
+     * @see todo link 堆叠模式
+     * @param id 元素Id
+     */
     toFront(id: any): void;
-    setElementZIndex(id: any, zIndex: any): void;
+    /**
+     * 设置元素的zIndex.
+     * 注意：默认堆叠模式下，不建议使用此方法。
+     * @see todo link 堆叠模式
+     * @param id 元素id
+     * @param zIndex zIndex的值，可以传数字，也支持传入'top' 和 'bottom'
+     */
+    setElementZIndex(id: string, zIndex: number | 'top' | 'bottom'): void;
+    /**
+     * 删除节点
+     * @param {string} nodeId 节点Id
+     */
     deleteNode(id: any): void;
+    /**
+     * 添加节点
+     * @param nodeConfig 节点配置
+     */
     addNode(nodeConfig: NodeConfig): any;
     /**
     * 克隆节点
@@ -135,43 +274,123 @@ declare class GraphModel {
      * @param x X轴目标位置
      * @param y Y轴目标位置
      */
-    moveNode2Coordinate(nodeId: BaseNodeModelId, x: number, y: number): void;
-    setTextEditable(id: ElementModeId): void;
-    createEdge(edgeConfig: EdgeConfig): EdgeConfig;
+    moveNode2Coordinate(nodeId: BaseNodeModelId, x: number, y: number, isignoreRule?: boolean): void;
+    /**
+     * 显示节点、连线文本编辑框
+     * @param elementId 节点id
+     */
+    editText(id: ElementModeId): void;
+    /**
+     * 给两个节点之间添加一条边
+     * @param {object} edgeConfig
+     */
+    addEdge(edgeConfig: EdgeConfig): EdgeConfig;
+    /**
+     * 移动边，内部方法，请勿直接使用
+     */
     moveEdge(nodeId: BaseNodeModelId, deltaX: number, deltaY: number): void;
-    removeEdge(sourceNodeId: any, targetNodeId: any): void;
-    removeEdgeById(id: any): void;
-    removeEdgeBySource(sourceNodeId: any): void;
-    removeEdgeByTarget(targetNodeId: any): void;
-    setElementState(state: ElementState, additionStateData?: AdditionData): void;
-    setElementStateById(id: ElementModeId, state: ElementState, additionStateData?: AdditionData): void;
-    setElementTextById(id: ElementModeId, value: string): void;
-    resetElementState(): void;
+    /**
+     * 删除两节点之间的边
+     * @param sourceNodeId 边的起始节点
+     * @param targetNodeId 边的目的节点
+     */
+    deleteEdgeBySourceAndTarget(sourceNodeId: any, targetNodeId: any): void;
+    /**
+     * 基于边Id删除边
+     */
+    deleteEdgeById(id: any): void;
+    /**
+     * 删除以节点Id为起点的所有边
+     */
+    deleteEdgeBySource(sourceNodeId: any): void;
+    /**
+     * 删除以节点Id为终点的所有边
+     */
+    deleteEdgeByTarget(targetNodeId: any): void;
+    /**
+     * 设置元素的状态，在需要保证整个画布上所有的元素只有一个元素拥有此状态时可以调用此方法。
+     * 例如文本编辑、菜单显示等。
+     * additionStateData: 传递的额外值，如菜单显示的时候，需要传递期望菜单显示的位置。
+     */
+    setElementStateById(id: ElementModeId, state: number, additionStateData?: AdditionData): void;
+    /**
+     * 更新节点或边的文案
+     * @param id 节点或者边id
+     * @param value 文案内容
+     */
+    updateText(id: ElementModeId, value: string): void;
+    /**
+     * 选中节点
+     * @param id 节点Id
+     * @param multiple 是否为多选，如果为多选，则不去掉原有已选择节点的选中状态
+     */
     selectNodeById(id: string, multiple?: boolean): void;
+    /**
+     * 选中边
+     * @param id 边Id
+     * @param multiple 是否为多选，如果为多选，则不去掉原已选中边的状态
+     */
     selectEdgeById(id: string, multiple?: boolean): void;
+    /**
+     * 将图形选中
+     * @param id 选择元素ID
+     * @param multiple 是否允许多选，如果为true，不会将上一个选中的元素重置
+     */
     selectElementById(id: string, multiple?: boolean): void;
-    clearSelectElements(): void;
     /**
-     * 批量移动元素
+     * 将所有选中的元素设置为非选中
      */
-    moveElements(elements: {
-        nodes: NodeConfig[];
-    }, deltaX: number, deltaY: number): void;
+    clearSelectElements(): void;
     /**
-     * 批量移动节点，节点移动的时候，会动态计算所有节点与未移动节点的连线位置
-     * 移动的节点直接的连线会保持相对位置
+     * 批量移动节点，节点移动的时候，会动态计算所有节点与未移动节点的边位置
+     * 移动的节点之间的边会保持相对位置
      */
-    moveNodes(nodeIds: any, deltaX: any, deltaY: any, isignoreRule?: boolean): void;
+    moveNodes(nodeIds: string[], deltaX: number, deltaY: number, isignoreRule?: boolean): void;
     /**
      * 添加节点移动限制规则，在节点移动的时候触发。
      * 如果方法返回false, 则会阻止节点移动。
      * @param fn function
+     * @example
+     *
+     * graphModel.addNodeMoveRules((nodeModel, x, y) => {
+     *   if (nodeModel.properties.disabled) {
+     *     return false
+     *   }
+     *   return true
+     * })
+     *
      */
     addNodeMoveRules(fn: NodeMoveRule): void;
+    /**
+     * 设置默认的边类型
+     * 也就是设置在节点直接有用户手动绘制的连线类型。
+     * @param type Options.EdgeType
+     */
     setDefaultEdgeType(type: string): void;
+    /**
+    * 修改指定节点类型
+    * @param id 节点id
+    * @param type 节点类型
+    */
     changeNodeType(id: any, type: string): void;
+    /**
+     * 切换边的类型
+     * @param id 边Id
+     * @param type 边类型
+     */
     changeEdgeType(id: any, type: any): void;
-    setTheme(style: Style): void;
+    /**
+     * 设置主题
+     * todo docs link
+     */
+    setTheme(style: Theme): void;
+    /**
+     * 重新设置画布的宽高
+     */
+    resize(width: number, height: number): void;
+    /**
+     * 清空画布
+     */
     clearData(): void;
 }
 export { GraphModel };

package/types/model/SnaplineModel.d.ts

@@ -15,9 +15,13 @@ export default class SnaplineModel {
     isShowHorizontal: boolean;
     isShowVertical: boolean;
     position: SnaplinePosition;
-    get stroke(): string;
-    get strokeWidth(): number;
     constructor(graphModel: any);
+    getStyle(): {
+        [x: string]: any;
+        fill?: string;
+        stroke?: string;
+        strokeWidth?: number;
+    };
     private getCenterSnapLine;
     private getHorizontalSnapline;
     private getVerticalSnapline;

package/types/model/TransformModel.d.ts

@@ -10,7 +10,7 @@ export interface TransfromInterface {
     ZOOM_SIZE: number;
     MINI_SCALE_SIZE: number;
     MAX_SCALE_SIZE: number;
-    zoom: (isZoomout: ZoomParam) => boolean;
+    zoom: (isZoomout: ZoomParam) => string;
     HtmlPointToCanvasPoint: (point: PointTuple) => PointTuple;
     CanvasPointToHtmlPoint: (point: PointTuple) => PointTuple;
     moveCanvasPointByHtml: (point: PointTuple, x: number, y: number) => PointTuple;
@@ -62,7 +62,13 @@ export default class TransfromModel implements TransfromInterface {
     getTransformStyle(): {
         transform: string;
     };
-    zoom(zoomSize?: ZoomParam, point?: PointTuple): boolean;
+    /**
+     * 放大缩小图形
+     * @param zoomSize 放大缩小的值，支持传入0-n之间的数字。小于1表示缩小，大于1表示放大。也支持传入true和false按照内置的刻度放大缩小
+     * @param point 缩放的原点
+     * @returns {string} -放大缩小的比例
+     */
+    zoom(zoomSize?: ZoomParam, point?: PointTuple): string;
     private emitGraphTransform;
     resetZoom(): void;
     translate(x: number, y: number): void;

package/types/model/edge/BaseEdgeModel.d.ts

@@ -1,19 +1,15 @@
 import { IBaseModel } from '../BaseModel';
 import GraphModel from '../GraphModel';
-import { Point, AdditionData, EdgeAttribute, EdgeData, MenuConfig, EdgeConfig } from '../../type/index';
-import { ElementState, ModelType, ElementType } from '../../constant/constant';
+import { Point, AdditionData, EdgeData, MenuConfig, EdgeConfig } from '../../type/index';
+import { ModelType, ElementType } from '../../constant/constant';
+import { OutlineTheme } from '../../constant/DefaultTheme';
 declare class BaseEdgeModel implements IBaseModel {
     id: string;
-    readonly BaseType = ElementType.EDGE;
-    state: number;
-    modelType: ModelType;
-    additionStateData: AdditionData;
-    [propName: string]: any;
-    graphModel: GraphModel;
-    menu?: MenuConfig[];
-    sourceAnchorId: string;
-    targetAnchorId: string;
-    customTextPosition: boolean;
+    type: string;
+    sourceNodeId: string;
+    targetNodeId: string;
+    startPoint: any;
+    endPoint: any;
     text: {
         value: string;
         x: number;
@@ -21,63 +17,116 @@ declare class BaseEdgeModel implements IBaseModel {
         draggable: boolean;
         editable: boolean;
     };
-    type: string;
-    properties: {};
-    sourceNodeId: string;
-    targetNodeId: string;
-    startPoint: any;
-    endPoint: any;
-    strokeWidth: number;
-    stroke: string;
-    strokeDashArray: string;
-    outlineColor: string;
-    hideOutline: boolean;
-    outlineStrokeDashArray: string;
-    strokeOpacity: number;
-    zIndex: number;
+    properties: Record<string, any>;
+    points: string;
+    pointsList: any[];
     isSelected: boolean;
     isHovered: boolean;
     isHitable: boolean;
-    hoverStroke: string;
-    selectedStroke: string;
-    points: string;
-    pointsList: any[];
     draggable: boolean;
-    constructor(data: EdgeConfig, graphModel: GraphModel, type: any);
+    graphModel: GraphModel;
+    zIndex: number;
+    readonly BaseType = ElementType.EDGE;
+    modelType: ModelType;
+    state: number;
+    additionStateData: AdditionData;
+    sourceAnchorId: string;
+    targetAnchorId: string;
+    menu?: MenuConfig[];
+    customTextPosition: boolean;
+    [propName: string]: any;
+    constructor(data: EdgeConfig, graphModel: GraphModel);
+    /**
+     * @overridable 支持重写
+     * 初始化边数据
+     * initNodeData和setAttributes的区别在于
+     * initNodeData只在节点初始化的时候调用，用于初始化节点的所有属性。
+     * setAttributes除了初始化调用外，还会在properties发生变化了调用。
+     */
     initEdgeData(data: any): void;
-    createId(): any;
+    /**
+     * 设置model属性，每次properties发生变化会触发
+     * @overridable 支持重写
+     */
     setAttributes(): void;
+    /**
+     * @overridable 支持重写，自定义此类型节点默认生成方式
+     * @returns string
+     */
+    createId(): any;
+    /**
+     * @overridable 支持重写
+     * 获取当前节点样式
+     * @returns 自定义边样式
+     */
+    getEdgeStyle(): import("../../constant/DefaultTheme").CommonTheme;
+    /**
+     * @overridable 支持重写
+     * 获取当前节点文本样式
+     */
+    getTextStyle(): import("../../constant/DefaultTheme").EdgeTextTheme;
+    /**
+     * @overridable 支持重写
+     * 获取outline样式，重写可以定义此类型边outline样式， 默认使用主题样式
+     * @returns 自定义outline样式
+     */
+    getOutlineStyle(): OutlineTheme;
+    /**
+     * @overridable 支持重新，重新自定义文本位置
+     * @returns 文本位置
+     */
+    getTextPosition(): Point;
     get sourceNode(): import("..").BaseNodeModel;
     get targetNode(): import("..").BaseNodeModel;
     get textPosition(): Point;
     /**
-     * @override 重新自定义文本位置
-     * @returns 文本位置
+     * 内部方法，计算两个节点相连是起点位置
      */
-    getTextPosition(): Point;
-    move(): void;
     getBeginAnchor(sourceNode: any, targetNode: any): Point;
+    /**
+     * 内部方法，计算两个节点相连是终点位置
+     */
     getEndAnchor(targetNode: any): Point;
-    getProperties(): {};
+    /**
+     * 获取当前边的properties
+     */
+    getProperties(): Record<string, any>;
+    /**
+     * 获取被保存时返回的数据
+     */
     getData(): EdgeData;
     setProperty(key: any, val: any): void;
     setProperties(properties: any): void;
-    updateData(edgeAttribute: EdgeAttribute): void;
+    /**
+     * 内部方法，处理初始化文本格式
+     */
     formatText(data: any): void;
+    /**
+     * 重置文本位置
+     */
     resetTextPosition(): void;
+    /**
+     * 移动边上的文本
+     */
     moveText(deltaX: number, deltaY: number): void;
+    /**
+     * 设置文本位置和值
+     */
     setText(textConfig: any): void;
+    /**
+     * 更新文本的值
+     */
     updateText(value: string): void;
+    /**
+     * 内部方法，计算边的起点和终点
+     */
     setAnchors(): void;
     setSelected(flag?: boolean): void;
     setHovered(flag?: boolean): void;
     setHitable(flag?: boolean): void;
-    setElementState(state: ElementState, additionStateData?: AdditionData): void;
-    updateStroke(color: any): void;
-    updateStrokeWidth(width: any): void;
+    setElementState(state: number, additionStateData?: AdditionData): void;
     updateStartPoint(anchor: any): void;
     updateEndPoint(anchor: any): void;
-    setStyleFromTheme(type: any, graphModel: any): void;
     setZIndex(zindex?: number): void;
     initPoints(): void;
     updateAttributes(attributes: any): void;

package/types/model/edge/BezierEdgeModel.d.ts

@@ -4,9 +4,16 @@ import { ModelType } from '../../constant/constant';
 export { BezierEdgeModel };
 export default class BezierEdgeModel extends BaseEdgeModel {
     modelType: ModelType;
-    offset: number;
     path: string;
-    constructor(data: any, graphModel: any);
+    initEdgeData(data: any): void;
+    getEdgeStyle(): {
+        [x: string]: any;
+        adjustLine?: import("../../constant/DefaultTheme").CommonTheme;
+        adjustAnchor?: import("../../constant/DefaultTheme").CircleTheme;
+        fill?: string;
+        stroke?: string;
+        strokeWidth?: number;
+    };
     getTextPosition(): Point;
     getData(): {
         pointsList: {

package/types/model/edge/LineEdgeModel.d.ts

@@ -4,6 +4,11 @@ import { ModelType } from '../../constant/constant';
 export { LineEdgeModel };
 export default class LineEdgeModel extends BaseEdgeModel {
     modelType: ModelType;
-    constructor(data: any, graphModel: any);
+    getEdgeStyle(): {
+        [x: string]: any;
+        fill?: string;
+        stroke?: string;
+        strokeWidth?: number;
+    };
     getTextPosition(): Point;
 }