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

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

@@ -1,6 +1,5 @@
-import { OutlineTheme } from '../../constant/DefaultTheme';
-import { ModelType, ElementType } from '../../constant/constant';
-import { AdditionData, NodeData, NodeConfig, NodeMoveRule, Bounds, AnchorConfig, PointAnchor, AnchorsOffsetItem, ShapeStyleAttribute } from '../../type';
+import { ElementState, ModelType, ElementType } from '../../constant/constant';
+import { AdditionData, NodeData, NodeAttribute, NodeConfig, NodeMoveRule, Bounds, Point, AnchorConfig } from '../../type';
 import GraphModel from '../GraphModel';
 import { IBaseModel } from '../BaseModel';
 export declare type ConnectRule = {
@@ -11,14 +10,8 @@ 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 IBaseNodeModel {
+export default class BaseNodeModel implements IBaseModel {
     id: string;
     readonly BaseType = ElementType.NODE;
     modelType: ModelType;
@@ -40,11 +33,23 @@ export default class BaseNodeModel implements IBaseNodeModel {
     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: AnchorsOffsetItem[];
+    anchorsOffset: any[];
     state: number;
     text: {
         value: string;
@@ -54,78 +59,18 @@ export default class BaseNodeModel implements IBaseNodeModel {
         editable: boolean;
     };
     draggable: boolean;
-    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 支持重写
-     */
+    constructor(data: NodeConfig, graphModel: GraphModel, type: any);
+    initNodeData(data: any): void;
+    createId(): any;
+    formatText(data: any): void;
     setAttributes(): void;
     /**
-     * 获取被保存时返回的数据
-     * @overridable 支持重写
-     * @returns NodeData
+     * 保存时获取的数据
      */
     getData(): NodeData;
     getProperties(): Record<string, any>;
     /**
-     * @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节点。
+     * 在连线的时候，是否允许这个节点为source节点，连线到target节点。
      */
     isAllowConnectedAsSource(target: BaseNodeModel, soureAnchor: AnchorConfig, targetAnchor: AnchorConfig): ConnectRuleResult | Boolean;
     /**
@@ -133,7 +78,7 @@ export default class BaseNodeModel implements IBaseNodeModel {
      */
     getConnectedSourceRules(): ConnectRule[];
     /**
-     * 在边的时候，是否允许这个节点未target节点
+     * 在连线的时候，是否允许这个节点未target节点
      */
     isAllowConnectedAsTarget(source: BaseNodeModel, soureAnchor: AnchorConfig, targetAnchor: AnchorConfig): ConnectRuleResult | Boolean;
     /**
@@ -141,20 +86,12 @@ export default class BaseNodeModel implements IBaseNodeModel {
      */
     isAllowMoveNode(deltaX: any, deltaY: any): boolean;
     getConnectedTargetRules(): ConnectRule[];
+    getAnchorsByOffset(): Point[];
     /**
-     * @overridable 子类重写此方法设置锚点
-     * @returns Point[] 锚点坐标构成的数组
-     */
-    getAnchorsByOffset(): PointAnchor[];
-    /**
-     * 获取节点默认情况下的锚点
-     */
-    getDetaultAnchor(): PointAnchor[];
-    /**
-     * 获取节点BBox
+     * 获取节点区域
      */
     getBounds(): Bounds;
-    get anchors(): PointAnchor[];
+    get anchors(): Point[];
     addNodeMoveRules(fn: NodeMoveRule): void;
     move(deltaX: any, deltaY: any, isignoreRule?: boolean): void;
     moveTo(x: any, y: any, isignoreRule?: boolean): void;
@@ -163,10 +100,12 @@ export default class BaseNodeModel implements IBaseNodeModel {
     setSelected(flag?: boolean): void;
     setHovered(flag?: boolean): void;
     setHitable(flag?: boolean): void;
-    setElementState(state: number, additionStateData?: AdditionData): void;
+    setElementState(state: ElementState, 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,22 +1,14 @@
+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;
-    getNodeStyle(): {
-        [x: string]: any;
-        r?: number;
-        fill?: string;
-        stroke?: string;
-        strokeWidth?: number;
-    };
-    getDetaultAnchor(): {
-        x: number;
-        y: number;
-        id: string;
-    }[];
+    get anchors(): Point[];
 }
 export { CircleNodeModel };
 export default CircleNodeModel;

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

@@ -1,16 +1,13 @@
-import { Point, PointTuple } from '../../type';
+import { NodeData, 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;
-    getNodeStyle(): {
-        [x: string]: any;
-        fill?: string;
-        stroke?: string;
-        strokeWidth?: number;
-    };
+    constructor(data: any, graphModel: GraphModel);
+    getData(): NodeData;
     get points(): PointTuple[];
     get pointsPosition(): Point[];
     get width(): number;

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

@@ -1,16 +1,12 @@
 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;
-    getNodeStyle(): {
-        [x: string]: any;
-        fill?: string;
-        stroke?: string;
-        strokeWidth?: number;
-    };
+    constructor(data: any, graphModel: GraphModel);
     get width(): number;
     get height(): number;
     get anchors(): Point[];

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

@@ -1,8 +1,10 @@
 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,20 +1,11 @@
 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[];
-    getNodeStyle(): {
-        [x: string]: any;
-        fill?: string;
-        stroke?: string;
-        strokeWidth?: number;
-    };
-    /**
-     * 由于大多数情况下，我们初始化拿到的多边形坐标都是基于原点的（例如绘图工具到处的svg）。
-     * 在logicflow中对多边形进行移动，我们不需要去更新points，
-     * 而是去更新多边形中心点即可。
-     */
+    constructor(data: any, graphModel: GraphModel);
     get pointsPosition(): Point[];
     get width(): number;
     get height(): number;

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

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

package/types/options.d.ts

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

package/types/type/index.d.ts

@@ -23,34 +23,12 @@ 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;
@@ -125,11 +103,7 @@ export declare type EdgeFilter = {
 };
 export declare type EdgeConfig = {
     id?: string;
-    /**
-     * 边的类型，不传默认为lf.setDefaultEdgeType(type)传入的类型。
-     * LogicFlow内部默认为polyline
-     */
-    type?: string;
+    type: string;
     sourceNodeId: string;
     sourceAnchorId?: string;
     targetNodeId: string;
@@ -169,7 +143,9 @@ export declare type CommonStyle = {
     strokeOpacity?: number;
     opacity?: number;
     outlineColor?: string;
+    hoverOutlineColor?: string;
     outlineStrokeDashArray?: string;
+    hoverOutlineStrokeDashArray?: string;
 };
 export declare type RectStyle = CommonStyle & {
     width?: number;
@@ -229,10 +205,25 @@ 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;
@@ -242,6 +233,24 @@ 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;
@@ -344,26 +353,4 @@ 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, editConfigModel: any) => boolean;
+export declare const isMultipleSelect: (e: MouseEvent, editConfig: 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 {};