@logicflow/core 1.0.0-alpha.5 → 1.0.0-alpha.6

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

@@ -1,5 +1,6 @@
-import { ElementState, ModelType, ElementType } from '../../constant/constant';
-import { AdditionData, NodeData, NodeAttribute, NodeConfig, NodeMoveRule, Bounds, Point, AnchorConfig } from '../../type';
+import { OutlineTheme } from '../../constant/DefaultTheme';
+import { ModelType, ElementType } from '../../constant/constant';
+import { AdditionData, NodeData, NodeConfig, NodeMoveRule, Bounds, AnchorConfig, PointAnchor, AnchorsOffsetItem, ShapeStyleAttribute } from '../../type';
 import GraphModel from '../GraphModel';
 import { IBaseModel } from '../BaseModel';
 export declare type ConnectRule = {
@@ -10,8 +11,14 @@ 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 {
+export default class BaseNodeModel implements IBaseNodeModel {
     id: string;
     readonly BaseType = ElementType.NODE;
     modelType: ModelType;
@@ -33,23 +40,11 @@ export default class BaseNodeModel implements IBaseModel {
     private _height;
     get height(): number;
     set height(value: number);
-    fill: string;
-    fillOpacity: number;
-    strokeWidth: number;
-    stroke: string;
-    strokeOpacity: number;
-    opacity: number;
-    outlineColor: string;
-    hideOutline: boolean;
-    hoverOutlineColor: string;
-    outlineStrokeDashArray: string;
-    hoverOutlineStrokeDashArray: string;
     isSelected: boolean;
     isHovered: boolean;
-    isDragging: boolean;
     isHitable: boolean;
     zIndex: number;
-    anchorsOffset: any[];
+    anchorsOffset: AnchorsOffsetItem[];
     state: number;
     text: {
         value: string;
@@ -59,18 +54,78 @@ export default class BaseNodeModel implements IBaseModel {
         editable: boolean;
     };
     draggable: boolean;
-    constructor(data: NodeConfig, graphModel: GraphModel, type: any);
-    initNodeData(data: any): void;
-    createId(): any;
-    formatText(data: any): void;
+    constructor(data: NodeConfig, graphModel: GraphModel);
+    /**
+     * 初始化节点数据，不建议重写
+     * 可以重写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(): Record<string, any>;
     /**
-     * 在连线的时候，是否允许这个节点为source节点，连线到target节点。
+     * @overridable 支持重写
+     * 获取当前节点样式
+     * @returns 自定义节点样式
+     */
+    getNodeStyle(): ShapeStyleAttribute;
+    getTextStyle(): {
+        [x: string]: any;
+        overflowMode?: string;
+        background?: import("../../constant/DefaultTheme").RectTheme;
+        color?: string;
+        fontSize?: number;
+        fill?: string;
+        stroke?: string;
+        strokeWidth?: number;
+    };
+    /**
+     * 获取节点锚点样式
+     * @returns 自定义样式
+     */
+    getAnchorStyle(): Record<string, any>;
+    getAnchorLineStyle(): {
+        [x: string]: any;
+        fill?: string;
+        stroke?: string;
+        strokeWidth?: number;
+    };
+    /**
+     * @overridable 支持重写
+     * 获取outline样式，重写可以定义此类型节点outline样式， 默认使用主题样式
+     * @returns 自定义outline样式
+     */
+    getOutlineStyle(): OutlineTheme;
+    /**
+     * 在边的时候，是否允许这个节点为source节点，边到target节点。
      */
     isAllowConnectedAsSource(target: BaseNodeModel, soureAnchor: AnchorConfig, targetAnchor: AnchorConfig): ConnectRuleResult | Boolean;
     /**
@@ -78,7 +133,7 @@ export default class BaseNodeModel implements IBaseModel {
      */
     getConnectedSourceRules(): ConnectRule[];
     /**
-     * 在连线的时候，是否允许这个节点未target节点
+     * 在边的时候，是否允许这个节点未target节点
      */
     isAllowConnectedAsTarget(source: BaseNodeModel, soureAnchor: AnchorConfig, targetAnchor: AnchorConfig): ConnectRuleResult | Boolean;
     /**
@@ -86,12 +141,20 @@ export default class BaseNodeModel implements IBaseModel {
      */
     isAllowMoveNode(deltaX: any, deltaY: any): boolean;
     getConnectedTargetRules(): ConnectRule[];
-    getAnchorsByOffset(): Point[];
     /**
-     * 获取节点区域
+     * @overridable 子类重写此方法设置锚点
+     * @returns Point[] 锚点坐标构成的数组
+     */
+    getAnchorsByOffset(): PointAnchor[];
+    /**
+     * 获取节点默认情况下的锚点
+     */
+    getDetaultAnchor(): PointAnchor[];
+    /**
+     * 获取节点BBox
      */
     getBounds(): Bounds;
-    get anchors(): Point[];
+    get anchors(): PointAnchor[];
     addNodeMoveRules(fn: NodeMoveRule): void;
     move(deltaX: any, deltaY: any, isignoreRule?: boolean): void;
     moveTo(x: any, y: any, isignoreRule?: boolean): void;
@@ -100,12 +163,10 @@ export default class BaseNodeModel implements IBaseModel {
     setSelected(flag?: boolean): void;
     setHovered(flag?: boolean): void;
     setHitable(flag?: boolean): void;
-    setElementState(state: ElementState, additionStateData?: AdditionData): void;
+    setElementState(state: number, additionStateData?: AdditionData): void;
     updateStroke(color: any): void;
-    updateData(nodeAttribute: NodeAttribute): void;
     setProperty(key: any, val: any): void;
     setProperties(properties: any): void;
-    setStyleFromTheme(type: any, graphModel: any): void;
     setZIndex(zindex?: number): void;
     updateAttributes(attributes: any): void;
 }

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

@@ -1,14 +1,22 @@
-import { Point } from '../../type';
 import BaseNodeModel from './BaseNodeModel';
 import { ModelType } from '../../constant/constant';
-import GraphModel from '../GraphModel';
 declare class CircleNodeModel extends BaseNodeModel {
     modelType: ModelType;
     r: number;
-    constructor(data: any, graphModel: GraphModel);
     get width(): number;
     get height(): number;
-    get anchors(): Point[];
+    getNodeStyle(): {
+        [x: string]: any;
+        r?: number;
+        fill?: string;
+        stroke?: string;
+        strokeWidth?: number;
+    };
+    getDetaultAnchor(): {
+        x: number;
+        y: number;
+        id: string;
+    }[];
 }
 export { CircleNodeModel };
 export default CircleNodeModel;

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

@@ -1,13 +1,16 @@
-import { NodeData, Point, PointTuple } from '../../type';
+import { Point, PointTuple } from '../../type';
 import BaseNodeModel from './BaseNodeModel';
 import { ModelType } from '../../constant/constant';
-import GraphModel from '../GraphModel';
 declare class DiamondNodeModel extends BaseNodeModel {
     modelType: ModelType;
     rx: number;
     ry: number;
-    constructor(data: any, graphModel: GraphModel);
-    getData(): NodeData;
+    getNodeStyle(): {
+        [x: string]: any;
+        fill?: string;
+        stroke?: string;
+        strokeWidth?: number;
+    };
     get points(): PointTuple[];
     get pointsPosition(): Point[];
     get width(): number;

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

@@ -1,12 +1,16 @@
 import { Point } from '../../type';
 import BaseNodeModel from './BaseNodeModel';
 import { ModelType } from '../../constant/constant';
-import GraphModel from '../GraphModel';
 declare class EllipseNodeModel extends BaseNodeModel {
     modelType: ModelType;
     rx: number;
     ry: number;
-    constructor(data: any, graphModel: GraphModel);
+    getNodeStyle(): {
+        [x: string]: any;
+        fill?: string;
+        stroke?: string;
+        strokeWidth?: number;
+    };
     get width(): number;
     get height(): number;
     get anchors(): Point[];

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

@@ -1,10 +1,8 @@
 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 };

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

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

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

@@ -1,12 +1,19 @@
 import { Point } from '../../type';
 import BaseNodeModel from './BaseNodeModel';
 import { ModelType } from '../../constant/constant';
-import GraphModel from '../GraphModel';
 declare class RectNodeModel extends BaseNodeModel {
     modelType: ModelType;
     radius: number;
-    constructor(data: any, graphModel: GraphModel);
     get anchors(): Point[];
+    getNodeStyle(): {
+        [x: string]: any;
+        width?: number;
+        height?: number;
+        radius?: number;
+        fill?: string;
+        stroke?: string;
+        strokeWidth?: number;
+    };
 }
 export { RectNodeModel };
 export default RectNodeModel;

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

@@ -1,12 +1,16 @@
 import BaseNodeModel from './BaseNodeModel';
 import { ModelType } from '../../constant/constant';
-import GraphModel from '../GraphModel';
 declare class TextNodeModel extends BaseNodeModel {
     modelType: ModelType;
     fontSize: number;
-    fontFamily: string;
-    fontWeight: string;
-    constructor(data: any, graphModel: GraphModel);
+    getNodeStyle(): {
+        [x: string]: any;
+        color?: string;
+        fontSize?: number;
+        fill?: string;
+        stroke?: string;
+        strokeWidth?: number;
+    };
     get width(): number;
     get height(): number;
 }

package/types/options.d.ts

@@ -1,21 +1,22 @@
-import { DndOptions } from './view/behavior/DnD';
 import { GridOptions } from './view/overlay/Grid';
 import { BackgroundConfig } from './view/overlay/BackgroundOverlay';
-import { Style, NodeData, EdgeData, GraphConfigData } from './type';
+import { NodeData, EdgeData, GraphConfigData } from './type';
 import { KeyboardDef } from './keyboard';
-import { EditConfigInterface } from './model/EditConfigModel';
+import { EditConfigInterface } from './model/editConfigModel';
+import { Theme } from './constant/DefaultTheme';
 export declare type EdgeType = 'line' | 'polyline' | 'bezier' | any;
 declare type DefaultOverlapMode = 0;
 declare type IncreaseOverlapMode = 1;
 /**
  * 元素重叠处理方式
- * 0：表示节点在上，连线在下，点击元素时选择元素显示在最顶部。
+ * 0：表示节点在上，边在下，点击元素时选择元素显示在最顶部。
  * 1：表示安装元素创建顺序排序，点击元素也不会将其置顶。要置顶需要调用置顶API。
  */
 export declare type OverlapMode = DefaultOverlapMode | IncreaseOverlapMode;
 export declare type Definition = {
     /**
      * 画布初始化容器
+     * 注意，在不传入width和height的情况下，container元素本身应该存在高度和高度。
      */
     container: HTMLElement;
     /**
@@ -34,18 +35,53 @@ export declare type Definition = {
      * 网格
      */
     grid?: boolean | GridOptions;
+    /**
+     * 键盘快捷操作
+     */
     keyboard?: KeyboardDef;
-    style?: Style;
-    dndOptions?: DndOptions;
+    /**
+     * 主题配置
+     */
+    style?: Theme;
+    /**
+     * 禁止初始化的插件名称
+     */
     disabledPlugins?: string[];
+    /**
+     * 默认边类型
+     */
     edgeType?: EdgeType;
+    /**
+     * 是否开启对齐线，默认开启
+     */
     snapline?: boolean;
+    /**
+     * 是否开启历史记录功能，默认开启
+     */
     history?: boolean;
+    /**
+     * 是否开启局部渲染，默认不开启
+     */
     partial?: boolean;
+    /**
+     * 删除和克隆之前的判断函数
+     * todo: 目前不完善，仅支持同步
+     */
     guards?: GuardsTypes;
+    /**
+     * 是否不启用outline显示选中和hover效果
+     */
     hideOutline?: boolean;
+    /**
+     * 表示节点在上，边在下，点击元素时选择元素显示在最顶部。
+     * 表示安装元素创建顺序排序，点击元素也不会将其置顶。要置顶需要调用置顶API。
+     */
     overlapMode?: OverlapMode;
-    idGenerator?: () => number | string;
+    /**
+     * 自定义创建节点、连线时生成id规则。
+     * @param type 节点、连线类型
+     */
+    idGenerator?: (type?: string) => string;
     /**
      * 禁止启用的内置工具
      * 有些场景下，需要自定义多选效果或者文本编辑效果，则需要禁用这些内置的工具
@@ -53,6 +89,7 @@ export declare type Definition = {
      * todo: 将multipleSelect放到插件中
      */
     disabledTools?: string[];
+    [key: string]: any;
 } & EditConfigInterface;
 export interface GuardsTypes {
     beforeClone?: (data: NodeData | GraphConfigData) => boolean;
@@ -64,8 +101,10 @@ export declare function get(options: Definition): {
     textEdit: boolean;
     disabledTools: any[];
 } & {
+    [key: string]: any;
     /**
      * 画布初始化容器
+     * 注意，在不传入width和height的情况下，container元素本身应该存在高度和高度。
      */
     container: HTMLElement;
     /**
@@ -84,18 +123,53 @@ export declare function get(options: Definition): {
      * 网格
      */
     grid?: boolean | GridOptions;
+    /**
+     * 键盘快捷操作
+     */
     keyboard?: KeyboardDef;
-    style?: Style;
-    dndOptions?: DndOptions;
+    /**
+     * 主题配置
+     */
+    style?: Theme;
+    /**
+     * 禁止初始化的插件名称
+     */
     disabledPlugins?: string[];
+    /**
+     * 默认边类型
+     */
     edgeType?: any;
+    /**
+     * 是否开启对齐线，默认开启
+     */
     snapline?: boolean;
+    /**
+     * 是否开启历史记录功能，默认开启
+     */
     history?: boolean;
+    /**
+     * 是否开启局部渲染，默认不开启
+     */
     partial?: boolean;
+    /**
+     * 删除和克隆之前的判断函数
+     * todo: 目前不完善，仅支持同步
+     */
     guards?: GuardsTypes;
+    /**
+     * 是否不启用outline显示选中和hover效果
+     */
     hideOutline?: boolean;
+    /**
+     * 表示节点在上，边在下，点击元素时选择元素显示在最顶部。
+     * 表示安装元素创建顺序排序，点击元素也不会将其置顶。要置顶需要调用置顶API。
+     */
     overlapMode?: OverlapMode;
-    idGenerator?: () => string | number;
+    /**
+     * 自定义创建节点、连线时生成id规则。
+     * @param type 节点、连线类型
+     */
+    idGenerator?: (type?: string) => string;
     /**
      * 禁止启用的内置工具
      * 有些场景下，需要自定义多选效果或者文本编辑效果，则需要禁用这些内置的工具

package/types/type/index.d.ts

@@ -23,12 +23,34 @@ import EllipseNodeModel from '../model/node/EllipseNodeModel';
 import HtmlNode from '../view/node/HtmlNode';
 import HtmlNodeModel from '../model/node/HtmlNodeModel';
 import * as Options from '../options';
+import { CommonTheme, EdgeTextTheme } from '../constant/DefaultTheme';
 export declare type PointTuple = [number, number];
 export declare type Point = {
     x: number;
     y: number;
     [key: string]: unknown;
 };
+/**
+ * 锚点坐标
+ * 为了方便计算
+ * 锚点的位置都是相对于节点中心点的偏移量。
+ */
+export declare type PointAnchor = {
+    /**
+     * 锚点x轴相对于中心点的偏移量
+     */
+    x: number;
+    /**
+     * 锚点y轴相对于中心点的偏移量
+     */
+    y: number;
+    /**
+     * 锚点Id
+     */
+    id?: string;
+    [key: string]: unknown;
+};
+export declare type AnchorsOffsetItem = PointTuple | PointAnchor;
 export declare type Size = {
     width: number;
     height: number;
@@ -103,7 +125,11 @@ export declare type EdgeFilter = {
 };
 export declare type EdgeConfig = {
     id?: string;
-    type: string;
+    /**
+     * 边的类型，不传默认为lf.setDefaultEdgeType(type)传入的类型。
+     * LogicFlow内部默认为polyline
+     */
+    type?: string;
     sourceNodeId: string;
     sourceAnchorId?: string;
     targetNodeId: string;
@@ -143,9 +169,7 @@ export declare type CommonStyle = {
     strokeOpacity?: number;
     opacity?: number;
     outlineColor?: string;
-    hoverOutlineColor?: string;
     outlineStrokeDashArray?: string;
-    hoverOutlineStrokeDashArray?: string;
 };
 export declare type RectStyle = CommonStyle & {
     width?: number;
@@ -205,25 +229,10 @@ export declare type TextStyle = {
     fontFamily?: string;
 };
 export declare type NodeTextStyle = TextStyle & {
-    autoWrap?: boolean;
-    lineHeight?: number;
-    wrapPadding?: string;
-};
-export declare type EdgeTextStyle = TextStyle & {
-    background?: {
-        fill?: string;
-        stroke?: string;
-        radius?: number;
-    };
-    hoverBackground?: {
-        fill?: string;
-        stroke?: string;
-        radius?: number;
-    };
-    autoWrap?: boolean;
     lineHeight?: number;
     wrapPadding?: string;
 };
+export declare type EdgeTextStyle = TextStyle & EdgeTextTheme;
 export declare type ArrowStyle = {
     offset?: number;
     verticalLength?: number;
@@ -233,24 +242,6 @@ export declare type EdgeAdjustStyle = {
     fill?: string;
     stroke?: string;
 };
-export declare type Style = {
-    rect?: RectStyle;
-    circle?: CircleStyle;
-    ellipse?: EllipseStyle;
-    diamond?: DiamondStyle;
-    polygon?: PolygonStyle;
-    anchor?: AnchorStyle;
-    text?: TextStyle;
-    nodeText?: NodeTextStyle;
-    edgeText?: EdgeTextStyle;
-    line?: LineStyle;
-    polyline?: PolylineStyle;
-    bezier?: BezierStyle;
-    arrow?: ArrowStyle;
-    anchorLine?: AnchorLineStyle;
-    anchorHover?: AnchorHoverStyle;
-    EdgeAdjustStyle?: EdgeAdjustStyle;
-};
 export declare type GraphTransform = {
     transform: string;
     transformOrigin: string;
@@ -353,4 +344,26 @@ export declare type AnchorConfig = {
  */
 export declare type NodeMoveRule = (model: BaseNodeModel, deltaX: number, deltaY: number) => Boolean;
 export declare type ZoomParam = boolean | number;
+export declare type NodeAttributes = {
+    id: string;
+    properties: Record<string, any>;
+    type: string;
+    x: number;
+    y: number;
+    isSelected: boolean;
+    isHovered: boolean;
+    width: number;
+    height: number;
+    text: {
+        x: number;
+        y: number;
+        value: string;
+        [key: string]: any;
+    };
+    [key: string]: any;
+};
+export declare type DiamondAttributes = {
+    points: PointTuple[];
+} & NodeAttributes;
+export declare type ShapeStyleAttribute = CommonTheme;
 export {};

package/types/util/edge.d.ts

@@ -88,9 +88,9 @@ export declare type IBezierPoints = {
 export declare const getBezierPoints: (path: string) => Point[];
 export declare const getEndTangent: (path: string) => Point[];
 /**
- * 获取移动连线后，文本位置距离连线上的最近的一点
- * @param point 连线上文本的位置
- * @param points 连线的各个拐点
+ * 获取移动边后，文本位置距离边上的最近的一点
+ * @param point 边上文本的位置
+ * @param points 边的各个拐点
  */
 export declare const getClosestPointOfPolyline: (point: Point, points: string) => Point;
 export declare const pickEdgeConfig: (data: any) => EdgeConfig;

package/types/util/graph.d.ts

@@ -9,4 +9,4 @@ export declare const isPointInArea: ([x, y]: [any, any], [leftTopX, leftTopY]: [
 /**
  * 判断鼠标点击选中元素的时候，是否为多选
  */
-export declare const isMultipleSelect: (e: MouseEvent, editConfig: any) => boolean;
+export declare const isMultipleSelect: (e: MouseEvent, editConfigModel: any) => boolean;

package/types/util/node.d.ts

@@ -58,7 +58,7 @@ export declare const getSvgTextWidthHeight: ({ rows, rowsLength, fontSize }: {
     height: number;
 };
 /**
- * @description 格式化连线校验信息
+ * @description 格式化边校验信息
  */
 export declare const formateAnchorConnectValidateData: (data: any) => any;
 export {};