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

package/types/model/EditConfigModel.d.ts

@@ -1,14 +1,80 @@
 export interface EditConfigInterface {
+    /**
+     * 是否为静默模式
+     */
+    isSilentMode?: boolean;
+    /**
+     * 禁止缩放画布
+     */
     stopZoomGraph?: boolean;
+    /**
+     * 禁止鼠标滚动移动画布
+     */
     stopScrollGraph?: boolean;
+    /**
+     * 禁止拖动画布
+     */
     stopMoveGraph?: boolean;
+    /**
+     * 允许调整连线
+     */
     adjustEdge?: boolean;
+    /**
+     * 允许调整连线起点和终点
+     */
+    adjustEdgeStartAndEnd?: boolean;
+    /**
+     * 允许拖动节点
+     */
     adjustNodePosition?: boolean;
+    /**
+     * 隐藏节点所有锚点
+     */
     hideAnchors?: boolean;
+    /**
+     * 显示节点悬浮时的外框
+     */
+    hoverOutline?: boolean;
+    /**
+     * 节点被选中时是否显示outline
+     */
+    nodeSelectedOutline?: boolean;
+    /**
+     * 连线被选中时是否显示outline
+     */
+    edgeSelectedOutline?: boolean;
+    /**
+     * 允许节点文本可以编辑
+     */
     nodeTextEdit?: boolean;
+    /**
+     * 允许连线文本可以编辑
+     */
     edgeTextEdit?: boolean;
+    /**
+     * 允许文本编辑
+     */
+    textEdit?: boolean;
+    /**
+     * 允许节点文本可以拖拽
+     */
     nodeTextDraggable?: boolean;
+    /**
+     * 允许连线文本可以拖拽
+     */
     edgeTextDraggable?: boolean;
+    /**
+     * 允许meta多选元素
+     */
+    metaKeyMultipleSelected?: boolean;
+    /**
+     * 多选按键, 支持meta(cmd)、shift、alt
+     * 不支持ctrl，ctrl会出发contextmenu
+     */
+    multipleSelectKey?: string;
+    /**
+     * 外部传入的额外配置, 待优化，这里不够易用。
+     */
     extraConf?: Record<string, string | number | object | boolean>;
 }
 /**
@@ -19,18 +85,24 @@ export default class EditConfigModel {
     stopScrollGraph: boolean;
     stopMoveGraph: boolean;
     adjustEdge: boolean;
+    adjustEdgeMiddle: boolean;
+    adjustEdgeStartAndEnd: boolean;
     adjustNodePosition: boolean;
     hideAnchors: boolean;
     hoverOutline: boolean;
+    nodeSelectedOutline: boolean;
+    edgeSelectedOutline: boolean;
     nodeTextEdit: boolean;
     edgeTextEdit: boolean;
     nodeTextDraggable: boolean;
     edgeTextDraggable: boolean;
     metaKeyMultipleSelected: boolean;
+    multipleSelectKey: string;
     extraConf: {};
-    keys: string[];
-    constructor(data: any);
+    defaultConfig: {};
+    constructor(config: EditConfigInterface);
     updateEditConfig(config: any): void;
+    getConfigDetail(config: any): Pick<any, string>;
     getConfig(): Partial<this>;
 }
 export { EditConfigModel };

package/types/model/GraphModel.d.ts

@@ -4,7 +4,7 @@ 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 } from '../type';
+import { AdditionData, Point, NodeConfig, EdgeConfig, Style, NodeMoveRule } from '../type';
 import EventEmitter from '../event/eventEmitter';
 declare type BaseNodeModelId = string;
 declare type ElementModeId = string;
@@ -19,8 +19,8 @@ declare class GraphModel {
     height: number;
     topElement: BaseNodeModel | BaseEdgeModel;
     selectElement: BaseNodeModel | BaseEdgeModel;
-    selectElements: Map<string, BaseNodeModel | BaseEdgeModel>;
-    selectElementSize: number;
+    idGenerator: (type?: string) => number | string;
+    nodeMoveRules: NodeMoveRule[];
     edgeType: string;
     nodes: BaseNodeModel[];
     activeElement: IBaseModel;
@@ -29,6 +29,7 @@ declare class GraphModel {
     additionStateData: AdditionData;
     edges: BaseEdgeModel[];
     isSlient: boolean;
+    overlapMode: number;
     plugins: any[];
     tools: any[];
     background: any;
@@ -55,6 +56,7 @@ declare class GraphModel {
      * 当前编辑的元素，低频操作，先循环找吧。
      */
     get textEditElement(): BaseNodeModel | BaseEdgeModel;
+    get selectElements(): Map<any, any>;
     /**
      * 获取指定区域内的所有元素
      */
@@ -101,11 +103,17 @@ declare class GraphModel {
         edges: any[];
     };
     updateAttributes(id: string, attributes: object): void;
+    /**
+     * 修改指定节点id
+     */
+    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;
     setModel(type: string, ModelClass: any): Map<any, any>;
     updateEdgeByIndex(index: any, data: any): void;
     toFront(id: any): void;
+    setElementZIndex(id: any, zIndex: any): void;
     deleteNode(id: any): void;
     addNode(nodeConfig: NodeConfig): any;
     /**
@@ -114,12 +122,20 @@ declare class GraphModel {
     */
     cloneNode(nodeId: string): BaseNodeModel;
     /**
-     * 移动节点
+     * 移动节点-相对位置
      * @param nodeModel 节点Id
      * @param deltaX X轴移动距离
      * @param deltaY Y轴移动距离
+     * @param isignoreRule 是否忽略移动规则限制
+     */
+    moveNode(nodeId: BaseNodeModelId, deltaX: number, deltaY: number, isignoreRule?: boolean): void;
+    /**
+     * 移动节点-绝对位置
+     * @param nodeModel 节点Id
+     * @param x X轴目标位置
+     * @param y Y轴目标位置
      */
-    moveNode(nodeId: BaseNodeModelId, deltaX: number, deltaY: number): void;
+    moveNode2Coordinate(nodeId: BaseNodeModelId, x: number, y: number): void;
     setTextEditable(id: ElementModeId): void;
     createEdge(edgeConfig: EdgeConfig): EdgeConfig;
     moveEdge(nodeId: BaseNodeModelId, deltaX: number, deltaY: number): void;
@@ -141,8 +157,20 @@ declare class GraphModel {
     moveElements(elements: {
         nodes: NodeConfig[];
     }, deltaX: number, deltaY: number): void;
-    changeEdgeType(type: string): void;
+    /**
+     * 批量移动节点，节点移动的时候，会动态计算所有节点与未移动节点的连线位置
+     * 移动的节点直接的连线会保持相对位置
+     */
+    moveNodes(nodeIds: any, deltaX: any, deltaY: any, isignoreRule?: boolean): void;
+    /**
+     * 添加节点移动限制规则，在节点移动的时候触发。
+     * 如果方法返回false, 则会阻止节点移动。
+     * @param fn function
+     */
+    addNodeMoveRules(fn: NodeMoveRule): void;
+    setDefaultEdgeType(type: string): void;
     changeNodeType(id: any, type: string): void;
+    changeEdgeType(id: any, type: any): void;
     setTheme(style: Style): void;
     clearData(): void;
 }

package/types/model/TransformModel.d.ts

@@ -1,4 +1,5 @@
-import { PointTuple } from '../type';
+import EventEmitter from '../event/eventEmitter';
+import { PointTuple, ZoomParam } from '../type';
 export interface TransfromInterface {
     SCALE_X: number;
     SKEW_Y: number;
@@ -9,10 +10,13 @@ export interface TransfromInterface {
     ZOOM_SIZE: number;
     MINI_SCALE_SIZE: number;
     MAX_SCALE_SIZE: number;
-    zoom: (isZoomout: boolean) => boolean;
+    zoom: (isZoomout: ZoomParam) => boolean;
     HtmlPointToCanvasPoint: (point: PointTuple) => PointTuple;
     CanvasPointToHtmlPoint: (point: PointTuple) => PointTuple;
     moveCanvasPointByHtml: (point: PointTuple, x: number, y: number) => PointTuple;
+    getTransformStyle: () => {
+        transform: string;
+    };
 }
 export default class TransfromModel implements TransfromInterface {
     MINI_SCALE_SIZE: number;
@@ -24,6 +28,8 @@ export default class TransfromModel implements TransfromInterface {
     TRANSLATE_X: number;
     TRANSLATE_Y: number;
     ZOOM_SIZE: number;
+    eventCenter: EventEmitter;
+    constructor(eventCenter: any);
     setZoomMiniSize(size: number): void;
     setZoomMaxSize(size: number): void;
     /**
@@ -50,7 +56,14 @@ export default class TransfromModel implements TransfromInterface {
      * @param deltaY y轴距离变化
      */
     fixDeltaXY(deltaX: number, deltaY: number): PointTuple;
-    zoom(isZoomIn?: boolean, point?: PointTuple): boolean;
+    /**
+     * 基于当前的缩放，获取画布渲染样式transform值
+     */
+    getTransformStyle(): {
+        transform: string;
+    };
+    zoom(zoomSize?: ZoomParam, point?: PointTuple): boolean;
+    private emitGraphTransform;
     resetZoom(): void;
     translate(x: number, y: number): void;
     /**

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

@@ -3,13 +3,17 @@ import GraphModel from '../GraphModel';
 import { Point, AdditionData, EdgeAttribute, EdgeData, MenuConfig, EdgeConfig } from '../../type/index';
 import { ElementState, ModelType, ElementType } from '../../constant/constant';
 declare class BaseEdgeModel implements IBaseModel {
-    readonly id: string;
+    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;
     text: {
         value: string;
         x: number;
@@ -27,6 +31,7 @@ declare class BaseEdgeModel implements IBaseModel {
     stroke: string;
     strokeDashArray: string;
     outlineColor: string;
+    hideOutline: boolean;
     outlineStrokeDashArray: string;
     strokeOpacity: number;
     zIndex: number;
@@ -40,10 +45,16 @@ declare class BaseEdgeModel implements IBaseModel {
     draggable: boolean;
     constructor(data: EdgeConfig, graphModel: GraphModel, type: any);
     initEdgeData(data: any): void;
+    createId(): any;
     setAttributes(): void;
     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;
@@ -53,6 +64,7 @@ declare class BaseEdgeModel implements IBaseModel {
     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;
@@ -69,6 +81,12 @@ declare class BaseEdgeModel implements IBaseModel {
     setZIndex(zindex?: number): void;
     initPoints(): void;
     updateAttributes(attributes: any): void;
+    getAdjustStart(): any;
+    getAdjustEnd(): any;
+    updateAfterAdjustStartAndEnd({ startPoint, endPoint }: {
+        startPoint: any;
+        endPoint: any;
+    }): void;
 }
 export { BaseEdgeModel };
 export default BaseEdgeModel;

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

@@ -7,7 +7,7 @@ export default class BezierEdgeModel extends BaseEdgeModel {
     offset: number;
     path: string;
     constructor(data: any, graphModel: any);
-    get textPosition(): Point;
+    getTextPosition(): Point;
     getData(): {
         pointsList: {
             x: any;
@@ -21,12 +21,22 @@ export default class BezierEdgeModel extends BaseEdgeModel {
         endPoint: Point;
         text?: import("../../type").TextConfig;
         properties: Record<string, unknown>;
+        zIndex?: number;
     };
     private getControls;
     private getPath;
     initPoints(): void;
     updatePoints(): void;
+    updatePath(): void;
     updateStartPoint(anchor: any): void;
     updateEndPoint(anchor: any): void;
     updateAdjustAnchor(anchor: Point, type: string): void;
+    getAdjustStart(): any;
+    getAdjustEnd(): any;
+    updateAfterAdjustStartAndEnd({ startPoint, endPoint, sourceNode, targetNode }: {
+        startPoint: any;
+        endPoint: any;
+        sourceNode: any;
+        targetNode: any;
+    }): void;
 }

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

@@ -5,5 +5,5 @@ export { LineEdgeModel };
 export default class LineEdgeModel extends BaseEdgeModel {
     modelType: ModelType;
     constructor(data: any, graphModel: any);
-    get textPosition(): Point;
+    getTextPosition(): Point;
 }

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

@@ -9,7 +9,10 @@ export default class PolylineEdgeModel extends BaseEdgeModel {
     draginngPointList: any;
     dbClickPosition: Point;
     constructor(data: any, graphModel: GraphModel);
-    get textPosition(): Point;
+    getTextPosition(): {
+        x: number;
+        y: number;
+    };
     getAfterAnchor(direction: any, position: any, anchorList: any): any;
     getCorssPoint(direction: any, start: any, end: any): any;
     removeCrossPoints(startIndex: any, endIndex: any, pointList: any): any;
@@ -26,6 +29,13 @@ export default class PolylineEdgeModel extends BaseEdgeModel {
     updateStartPoint(anchor: any): void;
     updateEndPoint(anchor: any): void;
     dragAppendStart(): void;
+    dragAppendSimple(appendInfo: any, dragInfo: any): {
+        start: any;
+        end: any;
+        startIndex: any;
+        endIndex: any;
+        direction: any;
+    };
     dragAppend(appendInfo: any, dragInfo: any): {
         start: any;
         end: any;
@@ -35,4 +45,12 @@ export default class PolylineEdgeModel extends BaseEdgeModel {
     };
     dragAppendEnd(): void;
     updatePointsAfterDrage(pointsList: any): void;
+    getAdjustStart(): any;
+    getAdjustEnd(): any;
+    updateAfterAdjustStartAndEnd({ startPoint, endPoint, sourceNode, targetNode }: {
+        startPoint: any;
+        endPoint: any;
+        sourceNode: any;
+        targetNode: any;
+    }): void;
 }

package/types/model/node/BaseNodeModel.d.ts

@@ -1,31 +1,39 @@
 import { ElementState, ModelType, ElementType } from '../../constant/constant';
-import { AdditionData, NodeData, MenuConfig, NodeAttribute, NodeConfig } from '../../type';
+import { AdditionData, NodeData, NodeAttribute, NodeConfig, NodeMoveRule, Bounds, AnchorConfig, PointAnchor, AnchorsOffsetItem } from '../../type';
 import GraphModel from '../GraphModel';
 import { IBaseModel } from '../BaseModel';
 export declare type ConnectRule = {
     message: string;
-    validate: (source: BaseNodeModel, target: BaseNodeModel) => boolean;
+    validate: (source: BaseNodeModel, target: BaseNodeModel, sourceAnchor: AnchorConfig, targetAnchor: AnchorConfig) => boolean;
 };
 export declare type ConnectRuleResult = {
     isAllPass: boolean;
     msg?: string;
 };
+interface IBaseNodeModel extends IBaseModel {
+    /**
+     * model基础类型，固定为node
+     */
+    readonly BaseType: ElementType.NODE;
+}
 export { BaseNodeModel };
-export default class BaseNodeModel implements IBaseModel {
-    readonly id: string;
+export default class BaseNodeModel implements IBaseNodeModel {
+    id: string;
     readonly BaseType = ElementType.NODE;
     modelType: ModelType;
     additionStateData: AdditionData;
-    menu?: MenuConfig[];
+    [propName: string]: any;
     targetRules: ConnectRule[];
     sourceRules: ConnectRule[];
+    moveRules: NodeMoveRule[];
     hasSetTargetRules: boolean;
     hasSetSourceRules: boolean;
-    properties: {};
+    properties: Record<string, any>;
     type: string;
     x: number;
     y: number;
     private _width;
+    graphModel: GraphModel;
     get width(): number;
     set width(value: number);
     private _height;
@@ -38,6 +46,7 @@ export default class BaseNodeModel implements IBaseModel {
     strokeOpacity: number;
     opacity: number;
     outlineColor: string;
+    hideOutline: boolean;
     hoverOutlineColor: string;
     outlineStrokeDashArray: string;
     hoverOutlineStrokeDashArray: string;
@@ -45,7 +54,7 @@ export default class BaseNodeModel implements IBaseModel {
     isHovered: boolean;
     isHitable: boolean;
     zIndex: number;
-    anchorsOffset: any[];
+    anchorsOffset: AnchorsOffsetItem[];
     state: number;
     text: {
         value: string;
@@ -56,18 +65,46 @@ export default class BaseNodeModel implements IBaseModel {
     };
     draggable: boolean;
     constructor(data: NodeConfig, graphModel: GraphModel, type: any);
-    initNodeData(data: any): void;
-    formatText(data: any): void;
+    /**
+     * 初始化节点数据，不建议重写
+     * 可以重写setAttributes来实现修改初始化功能
+     * initNodeData和setAttributes的区别在于
+     * initNodeData需要
+     */
+    protected initNodeData(data: any): void;
+    /**
+     * @overridable 支持重新
+     * @returns string
+     */
+    createId(): string;
+    /**
+     * 初始化文本属性，对
+     */
+    private formatText;
+    /**
+     * 设置model初始化属性
+     * 例如设置节点的宽度
+     * @example
+     *
+     * setAttributes () {
+     *   this.width = 300
+     *   this.height = 200
+     * }
+     *
+     * @overridable 支持重写
+     */
     setAttributes(): void;
     /**
-     * 保存时获取的数据
+     * 获取被保存时返回的数据
+     * @overridable 支持重写
+     * @returns NodeData
      */
     getData(): NodeData;
-    getProperties(): {};
+    getProperties(): Record<string, any>;
     /**
      * 在连线的时候，是否允许这个节点为source节点，连线到target节点。
      */
-    isAllowConnectedAsSource(target: BaseNodeModel): ConnectRuleResult;
+    isAllowConnectedAsSource(target: BaseNodeModel, soureAnchor: AnchorConfig, targetAnchor: AnchorConfig): ConnectRuleResult | Boolean;
     /**
      * 获取当前节点作为连接的起始节点规则。
      */
@@ -75,18 +112,29 @@ export default class BaseNodeModel implements IBaseModel {
     /**
      * 在连线的时候，是否允许这个节点未target节点
      */
-    isAllowConnectedAsTarget(source: BaseNodeModel): ConnectRuleResult;
+    isAllowConnectedAsTarget(source: BaseNodeModel, soureAnchor: AnchorConfig, targetAnchor: AnchorConfig): ConnectRuleResult | Boolean;
+    /**
+     * 是否允许移动节点到新的位置
+     */
+    isAllowMoveNode(deltaX: any, deltaY: any): boolean;
     getConnectedTargetRules(): ConnectRule[];
-    getAnchorsByOffset(): {
-        x: any;
-        y: any;
-    }[];
-    get anchors(): {
-        x: any;
-        y: any;
-    }[];
-    move(deltaX: any, deltaY: any): void;
-    moveTo(x: any, y: any): void;
+    /**
+     * @overridable 子类重写此方法设置锚点
+     * @returns Point[] 锚点坐标构成的数组
+     */
+    getAnchorsByOffset(): PointAnchor[];
+    /**
+     * 获取节点默认情况下的锚点
+     */
+    getDetaultAnchor(): PointAnchor[];
+    /**
+     * 获取节点BBox
+     */
+    getBounds(): Bounds;
+    get anchors(): PointAnchor[];
+    addNodeMoveRules(fn: NodeMoveRule): void;
+    move(deltaX: any, deltaY: any, isignoreRule?: boolean): void;
+    moveTo(x: any, y: any, isignoreRule?: boolean): void;
     moveText(deltaX: any, deltaY: any): void;
     updateText(value: string): void;
     setSelected(flag?: boolean): void;

package/types/model/node/CircleNodeModel.d.ts

@@ -1,4 +1,3 @@
-import { Point } from '../../type';
 import BaseNodeModel from './BaseNodeModel';
 import { ModelType } from '../../constant/constant';
 import GraphModel from '../GraphModel';
@@ -8,7 +7,11 @@ declare class CircleNodeModel extends BaseNodeModel {
     constructor(data: any, graphModel: GraphModel);
     get width(): number;
     get height(): number;
-    get anchors(): Point[];
+    getDetaultAnchor(): {
+        x: number;
+        y: number;
+        id: string;
+    }[];
 }
 export { CircleNodeModel };
 export default CircleNodeModel;

package/types/model/node/HtmlNodeModel.d.ts

@@ -0,0 +1,11 @@
+import { Point } from '../../type';
+import BaseNodeModel from './BaseNodeModel';
+import { ModelType } from '../../constant/constant';
+import GraphModel from '../GraphModel';
+declare class HtmlNodeModel extends BaseNodeModel {
+    modelType: ModelType;
+    constructor(data: any, graphModel: GraphModel);
+    get anchors(): Point[];
+}
+export { HtmlNodeModel };
+export default HtmlNodeModel;

package/types/model/node/PolygonNodeModel.d.ts

@@ -6,6 +6,11 @@ declare class PolygonNodeModel extends BaseNodeModel {
     modelType: ModelType;
     points: PointTuple[];
     constructor(data: any, graphModel: GraphModel);
+    /**
+     * 由于大多数情况下，我们初始化拿到的多边形坐标都是基于原点的（例如绘图工具到处的svg）。
+     * 在logicflow中对多边形进行移动，我们不需要去更新points，
+     * 而是去更新多边形中心点即可。
+     */
     get pointsPosition(): Point[];
     get width(): number;
     get height(): number;

package/types/model/node/index.d.ts

@@ -5,3 +5,4 @@ export * from './EllipseNodeModel';
 export * from './PolygonNodeModel';
 export * from './RectNodeModel';
 export * from './TextNodeModel';
+export * from './HtmlNodeModel';