@logicflow/core 1.0.0-alpha.1 → 1.0.0-alpha.10

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

@@ -1,14 +1,19 @@
 import { ModelType } from '../../constant/constant';
 import { Point } from '../../type';
 import BaseEdgeModel from './BaseEdgeModel';
-import GraphModel from '../GraphModel';
 export { PolylineEdgeModel };
 export default class PolylineEdgeModel extends BaseEdgeModel {
     modelType: ModelType;
-    offset: number;
+    offset: any;
     draginngPointList: any;
     dbClickPosition: Point;
-    constructor(data: any, graphModel: GraphModel);
+    initEdgeData(data: any): void;
+    getEdgeStyle(): {
+        [x: string]: any;
+        fill?: string;
+        stroke?: string;
+        strokeWidth?: number;
+    };
     getTextPosition(): {
         x: number;
         y: number;

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

@@ -1,10 +1,11 @@
-import { ElementState, ModelType, ElementType } from '../../constant/constant';
-import { AdditionData, NodeData, NodeAttribute, NodeConfig, NodeMoveRule, Bounds, AnchorConfig, PointAnchor, AnchorsOffsetItem } 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 = {
     message: string;
-    validate: (source: BaseNodeModel, target: BaseNodeModel, sourceAnchor: AnchorConfig, targetAnchor: AnchorConfig) => boolean;
+    validate: (source?: BaseNodeModel, target?: BaseNodeModel, sourceAnchor?: AnchorConfig, targetAnchor?: AnchorConfig) => boolean;
 };
 export declare type ConnectRuleResult = {
     isAllPass: boolean;
@@ -19,70 +20,52 @@ interface IBaseNodeModel extends IBaseModel {
 export { BaseNodeModel };
 export default class BaseNodeModel implements IBaseNodeModel {
     id: string;
-    readonly BaseType = ElementType.NODE;
-    modelType: ModelType;
-    additionStateData: AdditionData;
-    [propName: string]: any;
-    targetRules: ConnectRule[];
-    sourceRules: ConnectRule[];
-    moveRules: NodeMoveRule[];
-    hasSetTargetRules: boolean;
-    hasSetSourceRules: boolean;
-    properties: Record<string, any>;
     type: string;
     x: number;
     y: number;
+    text: {
+        value: string;
+        x: number;
+        y: number;
+        draggable: boolean;
+        editable: boolean;
+    };
+    properties: Record<string, any>;
     private _width;
-    graphModel: GraphModel;
     get width(): number;
     set width(value: number);
     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;
+    anchorsOffset: AnchorsOffsetItem[];
     isSelected: boolean;
     isHovered: boolean;
+    isDragging: boolean;
     isHitable: boolean;
+    draggable: boolean;
+    graphModel: GraphModel;
     zIndex: number;
-    anchorsOffset: AnchorsOffsetItem[];
     state: number;
-    text: {
-        value: string;
-        x: number;
-        y: number;
-        draggable: boolean;
-        editable: boolean;
-    };
-    draggable: boolean;
-    constructor(data: NodeConfig, graphModel: GraphModel, type: any);
+    readonly BaseType = ElementType.NODE;
+    modelType: ModelType;
+    additionStateData: AdditionData;
+    targetRules: ConnectRule[];
+    sourceRules: ConnectRule[];
+    moveRules: NodeMoveRule[];
+    hasSetTargetRules: boolean;
+    hasSetSourceRules: boolean;
+    [propName: string]: any;
+    constructor(data: NodeConfig, graphModel: GraphModel);
     /**
-     * 初始化节点数据，不建议重写
-     * 可以重写setAttributes来实现修改初始化功能
+     * @overridable 可以重写
+     * 初始化节点数据
      * initNodeData和setAttributes的区别在于
-     * initNodeData需要
-     */
-    protected initNodeData(data: any): void;
-    /**
-     * @overridable 支持重新
-     * @returns string
-     */
-    createId(): string;
-    /**
-     * 初始化文本属性，对
+     * initNodeData只在节点初始化的时候调用，用于初始化节点的所有属性。
+     * setAttributes除了初始化调用外，还会在properties发生变化了调用。
      */
-    private formatText;
+    initNodeData(data: any): void;
     /**
-     * 设置model初始化属性
+     * 设置model属性，每次properties发生变化会触发
      * 例如设置节点的宽度
      * @example
      *
@@ -94,15 +77,56 @@ export default class BaseNodeModel implements IBaseNodeModel {
      * @overridable 支持重写
      */
     setAttributes(): void;
+    /**
+     * @overridable 支持重写，自定义此类型节点默认生成方式
+     * @returns string
+     */
+    createId(): string;
+    /**
+     * 初始化文本属性
+     */
+    private formatText;
     /**
      * 获取被保存时返回的数据
      * @overridable 支持重写
-     * @returns NodeData
      */
     getData(): NodeData;
+    /**
+     * 获取当前节点的properties
+     */
     getProperties(): Record<string, any>;
     /**
-     * 在连线的时候，是否允许这个节点为source节点，连线到target节点。
+     * @overridable 支持重写
+     * 获取当前节点样式
+     * @returns 自定义节点样式
+     */
+    getNodeStyle(): ShapeStyleAttribute;
+    /**
+     * @overridable 支持重写
+     * 获取当前节点文本样式
+     */
+    getTextStyle(): import("../../constant/DefaultTheme").NodeTextTheme;
+    /**
+     * @overridable 支持重写
+     * 获取当前节点锚点样式
+     * @returns 自定义样式
+     */
+    getAnchorStyle(): Record<string, any>;
+    /**
+     * @overridable 支持重写
+     * 获取当前节点锚点拖出连线样式
+     * @returns 自定义锚点拖出样式
+     */
+    getAnchorLineStyle(): import("../../constant/DefaultTheme").CommonTheme;
+    /**
+     * @overridable 支持重写
+     * 获取outline样式，重写可以定义此类型节点outline样式， 默认使用主题样式
+     * @returns 自定义outline样式
+     */
+    getOutlineStyle(): OutlineTheme;
+    /**
+     * @over
+     * 在边的时候，是否允许这个节点为source节点，边到target节点。
      */
     isAllowConnectedAsSource(target: BaseNodeModel, soureAnchor: AnchorConfig, targetAnchor: AnchorConfig): ConnectRuleResult | Boolean;
     /**
@@ -110,13 +134,17 @@ export default class BaseNodeModel implements IBaseNodeModel {
      */
     getConnectedSourceRules(): ConnectRule[];
     /**
-     * 在连线的时候，是否允许这个节点未target节点
+     * 在连线的时候，是否允许这个节点为target节点
      */
     isAllowConnectedAsTarget(source: BaseNodeModel, soureAnchor: AnchorConfig, targetAnchor: AnchorConfig): ConnectRuleResult | Boolean;
     /**
+     * 内部方法
      * 是否允许移动节点到新的位置
      */
     isAllowMoveNode(deltaX: any, deltaY: any): boolean;
+    /**
+     * 获取作为连线终点时的所有规则。
+     */
     getConnectedTargetRules(): ConnectRule[];
     /**
      * @overridable 子类重写此方法设置锚点
@@ -140,12 +168,9 @@ export default class BaseNodeModel implements IBaseNodeModel {
     setSelected(flag?: boolean): void;
     setHovered(flag?: boolean): void;
     setHitable(flag?: boolean): void;
-    setElementState(state: ElementState, additionStateData?: AdditionData): void;
-    updateStroke(color: any): void;
-    updateData(nodeAttribute: NodeAttribute): void;
+    setElementState(state: number, additionStateData?: AdditionData): 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,12 +1,17 @@
 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;
+    getNodeStyle(): {
+        [x: string]: any;
+        r?: number;
+        fill?: string;
+        stroke?: string;
+        strokeWidth?: number;
+    };
     getDetaultAnchor(): {
         x: number;
         y: number;

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,15 @@
 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，

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,49 @@ 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;
-    hideOutline?: boolean;
+    /**
+     * 表示节点在上，边在下，点击元素时选择元素显示在最顶部。
+     * 表示安装元素创建顺序排序，点击元素也不会将其置顶。要置顶需要调用置顶API。
+     */
     overlapMode?: OverlapMode;
-    idGenerator?: () => number | string;
+    /**
+     * 自定义创建节点、连线时生成id规则。
+     * @param type 节点、连线类型
+     */
+    idGenerator?: (type?: string) => string;
     /**
      * 禁止启用的内置工具
      * 有些场景下，需要自定义多选效果或者文本编辑效果，则需要禁用这些内置的工具
@@ -53,6 +85,7 @@ export declare type Definition = {
      * todo: 将multipleSelect放到插件中
      */
     disabledTools?: string[];
+    [key: string]: any;
 } & EditConfigInterface;
 export interface GuardsTypes {
     beforeClone?: (data: NodeData | GraphConfigData) => boolean;
@@ -64,8 +97,10 @@ export declare function get(options: Definition): {
     textEdit: boolean;
     disabledTools: any[];
 } & {
+    [key: string]: any;
     /**
      * 画布初始化容器
+     * 注意，在不传入width和height的情况下，container元素本身应该存在高度和高度。
      */
     container: HTMLElement;
     /**
@@ -84,18 +119,49 @@ 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;
-    hideOutline?: boolean;
+    /**
+     * 表示节点在上，边在下，点击元素时选择元素显示在最顶部。
+     * 表示安装元素创建顺序排序，点击元素也不会将其置顶。要置顶需要调用置顶API。
+     */
     overlapMode?: OverlapMode;
-    idGenerator?: () => string | number;
+    /**
+     * 自定义创建节点、连线时生成id规则。
+     * @param type 节点、连线类型
+     */
+    idGenerator?: (type?: string) => string;
     /**
      * 禁止启用的内置工具
      * 有些场景下，需要自定义多选效果或者文本编辑效果，则需要禁用这些内置的工具

package/types/type/index.d.ts

@@ -23,6 +23,7 @@ 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;
@@ -124,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;
@@ -164,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;
@@ -226,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;
@@ -254,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;
@@ -374,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 {};