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

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,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,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 {};

package/types/util/theme.d.ts

@@ -1,173 +1,2 @@
-export declare const updateTheme: (style: any) => {
-    rect: {
-        width: number;
-        height: number;
-        radius: number;
-        fill: string;
-        stroke: string;
-        strokeWidth: number;
-        fillOpacity: number;
-        strokeOpacity: number;
-        opacity: number;
-        outlineColor: string;
-        outlineStrokeDashArray: string;
-        hoverOutlineColor: string;
-        hoverOutlineStrokeDashArray: string;
-    };
-    circle: {
-        r: number;
-        fill: string;
-        stroke: string;
-        strokeWidth: number;
-        fillOpacity: number;
-        strokeOpacity: number;
-        opacity: number;
-        outlineColor: string;
-        outlineStrokeDashArray: string;
-        hoverOutlineColor: string;
-        hoverOutlineStrokeDashArray: string;
-    };
-    diamond: {
-        rx: number;
-        ry: number;
-        fill: string;
-        stroke: string;
-        strokeWidth: number;
-        fillOpacity: number;
-        strokeOpacity: number;
-        opacity: number;
-        outlineColor: string;
-        outlineStrokeDashArray: string;
-        hoverOutlineColor: string;
-        hoverOutlineStrokeDashArray: string;
-    };
-    ellipse: {
-        rx: number;
-        ry: number;
-        fill: string;
-        stroke: string;
-        strokeWidth: number;
-        fillOpacity: number;
-        strokeOpacity: number;
-        opacity: number;
-        outlineColor: string;
-        outlineStrokeDashArray: string;
-        hoverOutlineColor: string;
-        hoverOutlineStrokeDashArray: string;
-    };
-    polygon: {
-        fill: string;
-        stroke: string;
-        strokeWidth: number;
-        fillOpacity: number;
-        strokeOpacity: number;
-        opacity: number;
-        outlineColor: string;
-        outlineStrokeDashArray: string;
-        hoverOutlineColor: string;
-        hoverOutlineStrokeDashArray: string;
-    };
-    anchor: {
-        stroke: string;
-        strokeWidth: number;
-        r: number;
-        fill: string;
-        fillOpacity: number;
-        strokeOpacity: number;
-        opacity: number;
-        outlineColor: string;
-        outlineStrokeDashArray: string;
-        hoverOutlineColor: string;
-        hoverOutlineStrokeDashArray: string;
-    };
-    text: {
-        color: string;
-        fontSize: number;
-        fontWeight: string;
-        fontFamily: string;
-    };
-    nodeText: {
-        autoWrap: boolean;
-        lineHeight: number;
-        wrapPadding: string;
-        color: string;
-        fontSize: number;
-        fontWeight: string;
-        fontFamily: string;
-    };
-    edgeText: {
-        color: string;
-        fontSize: number;
-        fontWeight: string;
-        fontFamily: string;
-        background: {
-            fill: string;
-            height: number;
-            stroke: string;
-            radius: number;
-        };
-        hoverBackground: any;
-        autoWrap: boolean;
-        lineHeight: number;
-        wrapPadding: string;
-    };
-    line: {
-        stroke: string;
-        strokeWidth: number;
-        hoverStroke: string;
-        selectedStroke: string;
-        strokeDashArray: string;
-        outlineColor: string;
-        outlineStrokeDashArray: string;
-    };
-    polyline: {
-        offset: number;
-        stroke: string;
-        strokeWidth: number;
-        hoverStroke: string;
-        selectedStroke: string;
-        strokeDashArray: string;
-        outlineColor: string;
-        outlineStrokeDashArray: string;
-    };
-    bezier: {
-        offset: number;
-        adjustLineColor: string;
-        adjustAnchorStroke: string;
-        adjustAnchorFill: string;
-        adjustAnchorFillOpacity: number;
-        stroke: string;
-        strokeWidth: number;
-        hoverStroke: string;
-        selectedStroke: string;
-        strokeDashArray: string;
-        outlineColor: string;
-        outlineStrokeDashArray: string;
-    };
-    arrow: {
-        offset: number;
-        verticalLength: number;
-    };
-    anchorLine: {
-        stroke: string;
-        strokeWidth: number;
-        strokeDasharray: string;
-    };
-    anchorHover: {
-        fill: string;
-        fillOpacity: number;
-        stroke: string;
-        strokeWidth: number;
-        r: number;
-    };
-    snapline: {
-        stroke: string;
-        strokeWidth: number;
-    };
-    edgeAdjust: {
-        r: number;
-        fill: string;
-        stroke: string;
-        strokeWidth: string;
-    };
-};
+import { Theme } from '../constant/DefaultTheme';
+export declare const updateTheme: (style: Theme) => Theme;

package/types/view/Anchor.d.ts

@@ -1,7 +1,6 @@
 import { h, Component } from 'preact';
 import BaseNodeModel, { ConnectRuleResult } from '../model/node/BaseNodeModel';
 import GraphModel from '../model/GraphModel';
-import EventEmitter from '../event/eventEmitter';
 import { AnchorConfig } from '../type';
 declare type TargetNodeId = string;
 interface IProps {
@@ -13,7 +12,6 @@ interface IProps {
     hoverStyle?: Record<string, any>;
     edgeStyle?: Record<string, any>;
     anchorIndex: number;
-    eventCenter: EventEmitter;
     graphModel: GraphModel;
     nodeModel: BaseNodeModel;
     nodeDraging: boolean;

package/types/view/Graph.d.ts

@@ -2,7 +2,6 @@ import { Component, h } from 'preact';
 import GraphModel from '../model/GraphModel';
 import Tool from '../tool';
 import * as Options from '../options';
-import EventEmitter from '../event/eventEmitter';
 import DnD from './behavior/DnD';
 import BaseEdgeModel from '../model/edge/BaseEdgeModel';
 import BaseNodeModel from '../model/node/BaseNodeModel';
@@ -11,13 +10,12 @@ declare type IProps = {
     getView: (type: string) => typeof Component;
     tool: Tool;
     options: Options.Definition;
-    eventCenter: EventEmitter;
     dnd: DnD;
     snaplineModel: SnaplineModel;
     graphModel: GraphModel;
 };
 declare class Graph extends Component<IProps> {
-    getComponent(model: BaseEdgeModel | BaseNodeModel, graphModel: GraphModel, eventCenter: EventEmitter, overlay?: string): h.JSX.Element;
+    getComponent(model: BaseEdgeModel | BaseNodeModel, graphModel: GraphModel, overlay?: string): h.JSX.Element;
     render(): h.JSX.Element;
 }
 export default Graph;

package/types/view/basic-shape/Path.d.ts

@@ -1,15 +1,7 @@
 import { h } from 'preact';
 declare type IProps = {
     d: string;
-    strokeWidth: number;
-    stroke: string;
-    fill: string;
-    strokeDasharray?: string;
+    [key: string]: any;
 };
 declare function Path(props: IProps): h.JSX.Element;
-declare namespace Path {
-    var defaultProps: {
-        strokeDasharray: string;
-    };
-}
 export default Path;

package/types/view/basic-shape/Rect.d.ts

@@ -3,16 +3,12 @@ import * as type from '../../type';
 declare type IProps = {
     className?: string;
     radius?: number;
-    stroke?: string;
-    strokeDasharray?: string;
 } & type.Point & type.Size;
 declare function Rect(props: IProps): h.JSX.Element;
 declare namespace Rect {
     var defaultProps: {
-        radius: number;
-        stroke: string;
-        strokeDasharray: string;
         className: string;
+        radius: string;
     };
 }
 export default Rect;

package/types/view/behavior/DnD.d.ts

@@ -1,9 +1,6 @@
 import LogicFlow from '../../LogicFlow';
 import { BaseNodeModel } from '../../model';
 import { TextConfig } from '../../type';
-export declare type DndOptions = {
-    validate: () => boolean;
-};
 export declare type NewNodeConfig = {
     type: string;
     text?: TextConfig | string;
@@ -12,7 +9,6 @@ export declare type NewNodeConfig = {
 export default class Dnd {
     nodeConfig: NewNodeConfig;
     lf: LogicFlow;
-    options: DndOptions;
     fakerNode: BaseNodeModel;
     constructor(params: any);
     clientToLocalPoint({ x, y }: {