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

package/types/options.d.ts

@@ -3,30 +3,57 @@ import { GridOptions } from './view/overlay/Grid';
 import { BackgroundConfig } from './view/overlay/BackgroundOverlay';
 import { Style, NodeData, EdgeData, GraphConfigData } from './type';
 import { KeyboardDef } from './keyboard';
+import { EditConfigInterface } from './model/EditConfigModel';
 export declare type EdgeType = 'line' | 'polyline' | 'bezier' | any;
+declare type DefaultOverlapMode = 0;
+declare type IncreaseOverlapMode = 1;
+/**
+ * 元素重叠处理方式
+ * 0：表示节点在上，连线在下，点击元素时选择元素显示在最顶部。
+ * 1：表示安装元素创建顺序排序，点击元素也不会将其置顶。要置顶需要调用置顶API。
+ */
+export declare type OverlapMode = DefaultOverlapMode | IncreaseOverlapMode;
 export declare type Definition = {
+    /**
+     * 画布初始化容器
+     */
     container: HTMLElement;
+    /**
+     * 画布宽度，不传则默认100%
+     */
     width?: number;
+    /**
+     * 画布高度，不传则默认100%
+     */
     height?: number;
+    /**
+     * 背景图
+     */
     background?: false | BackgroundConfig;
+    /**
+     * 网格
+     */
     grid?: boolean | GridOptions;
-    textEdit?: boolean;
     keyboard?: KeyboardDef;
     style?: Style;
     dndOptions?: DndOptions;
-    isSilentMode?: boolean;
     disabledPlugins?: string[];
     edgeType?: EdgeType;
     snapline?: boolean;
     history?: boolean;
     partial?: boolean;
-    stopScrollGraph?: boolean;
-    stopZoomGraph?: boolean;
-    stopMoveGraph?: boolean;
     guards?: GuardsTypes;
-    hideAnchors?: boolean;
-    hoverOutline?: boolean;
-};
+    hideOutline?: boolean;
+    overlapMode?: OverlapMode;
+    idGenerator?: () => number | string;
+    /**
+     * 禁止启用的内置工具
+     * 有些场景下，需要自定义多选效果或者文本编辑效果，则需要禁用这些内置的工具
+     * multipleSelect和textEdit
+     * todo: 将multipleSelect放到插件中
+     */
+    disabledTools?: string[];
+} & EditConfigInterface;
 export interface GuardsTypes {
     beforeClone?: (data: NodeData | GraphConfigData) => boolean;
     beforeDelete?: (data: NodeData | EdgeData) => boolean;
@@ -35,9 +62,52 @@ export declare function get(options: Definition): {
     background: boolean;
     grid: boolean;
     textEdit: boolean;
-} & Definition;
+    disabledTools: any[];
+} & {
+    /**
+     * 画布初始化容器
+     */
+    container: HTMLElement;
+    /**
+     * 画布宽度，不传则默认100%
+     */
+    width?: number;
+    /**
+     * 画布高度，不传则默认100%
+     */
+    height?: number;
+    /**
+     * 背景图
+     */
+    background?: false | BackgroundConfig;
+    /**
+     * 网格
+     */
+    grid?: boolean | GridOptions;
+    keyboard?: KeyboardDef;
+    style?: Style;
+    dndOptions?: DndOptions;
+    disabledPlugins?: string[];
+    edgeType?: any;
+    snapline?: boolean;
+    history?: boolean;
+    partial?: boolean;
+    guards?: GuardsTypes;
+    hideOutline?: boolean;
+    overlapMode?: OverlapMode;
+    idGenerator?: () => string | number;
+    /**
+     * 禁止启用的内置工具
+     * 有些场景下，需要自定义多选效果或者文本编辑效果，则需要禁用这些内置的工具
+     * multipleSelect和textEdit
+     * todo: 将multipleSelect放到插件中
+     */
+    disabledTools?: string[];
+} & EditConfigInterface;
 export declare const defaults: {
     background: boolean;
     grid: boolean;
     textEdit: boolean;
+    disabledTools: any[];
 };
+export {};

package/types/tool/MultipleSelectTool.d.ts

@@ -6,15 +6,15 @@ declare type IProps = {
     logicFlow: LogicFlow;
 };
 export default class MultipleSelect extends Component<IProps> {
+    static toolName: string;
     stepDrag: any;
     constructor(props: any);
     handleMouseDown: (ev: MouseEvent) => void;
-    onDragStart: () => void;
     onDraging: ({ deltaX, deltaY }: {
         deltaX: any;
         deltaY: any;
     }) => void;
-    onDragEnd: () => void;
+    handleContextMenu: (ev: MouseEvent) => void;
     render(): h.JSX.Element;
 }
 export {};

package/types/tool/TextEditTool.d.ts

@@ -13,18 +13,17 @@ declare type IState = {
     style: Style;
 };
 export default class TextEdit extends Component<IProps, IState> {
+    static toolName: string;
     ref: import("preact").RefObject<any>;
     __prevText: {
+        type: string;
         text: string;
         id: string;
     };
     constructor();
     componentDidMount(): void;
     static getDerivedStateFromProps(props: any): {
-        style: {
-            left: any;
-            top: any;
-        };
+        style: any;
     };
     componentDidUpdate(): void;
     keyupHandler: (ev: KeyboardEvent) => void;

package/types/tool/index.d.ts

@@ -6,6 +6,7 @@ export default class Tool {
     toolMap: Map<any, any>;
     instance: LogicFlow;
     constructor(instance: LogicFlow);
+    private isDisabledTool;
     registerTool(name: any, component: any): void;
     getTools(): any[];
     getInstance(): LogicFlow;

package/types/type/index.d.ts

@@ -20,6 +20,8 @@ import PolylineEdge from '../view/edge/PolylineEdge';
 import PolylineEdgeModel from '../model/edge/PolylineEdgeModel';
 import EllipseNode from '../view/node/EllipseNode';
 import EllipseNodeModel from '../model/node/EllipseNodeModel';
+import HtmlNode from '../view/node/HtmlNode';
+import HtmlNodeModel from '../model/node/HtmlNodeModel';
 import * as Options from '../options';
 export declare type PointTuple = [number, number];
 export declare type Point = {
@@ -27,6 +29,27 @@ export declare type Point = {
     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;
@@ -44,6 +67,7 @@ export declare type NodeConfig = {
     x: number;
     y: number;
     text?: TextConfig | string;
+    zIndex?: number;
     properties?: Record<string, unknown>;
 };
 export declare type NodeData = {
@@ -51,10 +75,10 @@ export declare type NodeData = {
     type: string;
     x: number;
     y: number;
-    rx?: number;
-    ry?: number;
     text?: TextConfig;
     properties: Record<string, unknown>;
+    zIndex?: number;
+    [key: string]: any;
 };
 export declare type NodeAttribute = {
     id: string;
@@ -80,6 +104,7 @@ export declare type EdgeData = {
     endPoint: Point;
     text?: TextConfig;
     properties: Record<string, unknown>;
+    zIndex?: number;
     pointsList?: Point[];
 };
 export declare type EdgeAttribute = {
@@ -101,7 +126,9 @@ export declare type EdgeConfig = {
     id?: string;
     type: string;
     sourceNodeId: string;
+    sourceAnchorId?: string;
     targetNodeId: string;
+    targetAnchorId?: string;
     startPoint?: {
         x: number;
         y: number;
@@ -114,10 +141,21 @@ export declare type EdgeConfig = {
         x: number;
         y: number;
         value: string;
-    };
+    } | string;
     pointsList?: Point[];
+    zIndex?: number;
     properties?: Record<string, unknown>;
 };
+declare type LeftTopX = number;
+declare type LeftTopY = number;
+declare type RightBottomX = number;
+declare type RightBottomY = number;
+export declare type Bounds = {
+    x1: LeftTopX;
+    y1: LeftTopY;
+    x2: RightBottomX;
+    y2: RightBottomY;
+};
 export declare type CommonStyle = {
     fill?: string;
     stroke?: string;
@@ -187,7 +225,11 @@ export declare type TextStyle = {
     fontWeight?: string;
     fontFamily?: string;
 };
-export declare type NodeTextStyle = TextStyle;
+export declare type NodeTextStyle = TextStyle & {
+    autoWrap?: boolean;
+    lineHeight?: number;
+    wrapPadding?: string;
+};
 export declare type EdgeTextStyle = TextStyle & {
     background?: {
         fill?: string;
@@ -199,11 +241,19 @@ export declare type EdgeTextStyle = TextStyle & {
         stroke?: string;
         radius?: number;
     };
+    autoWrap?: boolean;
+    lineHeight?: number;
+    wrapPadding?: string;
 };
 export declare type ArrowStyle = {
     offset?: number;
     verticalLength?: number;
 };
+export declare type EdgeAdjustStyle = {
+    r: number;
+    fill?: string;
+    stroke?: string;
+};
 export declare type Style = {
     rect?: RectStyle;
     circle?: CircleStyle;
@@ -220,6 +270,7 @@ export declare type Style = {
     arrow?: ArrowStyle;
     anchorLine?: AnchorLineStyle;
     anchorHover?: AnchorHoverStyle;
+    EdgeAdjustStyle?: EdgeAdjustStyle;
 };
 export declare type GraphTransform = {
     transform: string;
@@ -235,7 +286,7 @@ export declare type FocusOnArgs = {
 };
 export declare type ComponentRender = (lf: LogicFlow, container: HTMLElement) => void;
 export interface Extension {
-    name: string;
+    pluginName: string;
     install?: (lf: LogicFlow, LogicFlow: LogicFlowContractor) => void;
     render?: ComponentRender;
     destroy?: () => void;
@@ -248,6 +299,7 @@ export declare type AppendInfo = {
     startIndex?: number;
     endIndex?: number;
     direction?: string;
+    dragAble?: boolean;
 };
 export declare type ArrowInfo = {
     start: Point;
@@ -297,6 +349,8 @@ export interface RegisterParam {
     PolylineEdgeModel: typeof PolylineEdgeModel;
     EllipseNode: typeof EllipseNode;
     EllipseNodeModel: typeof EllipseNodeModel;
+    HtmlNode: typeof HtmlNode;
+    HtmlNodeModel: typeof HtmlNodeModel;
     [key: string]: unknown;
 }
 export declare type RegisterElementFn = (params: RegisterParam) => RegisterBack;
@@ -306,3 +360,18 @@ export declare type RegisterConfig = {
     model: any;
     isObserverView?: boolean;
 };
+export declare type AnchorConfig = {
+    id?: string;
+    x: number;
+    y: number;
+    [key: string]: any;
+};
+/**
+ * 限制节点移动规则
+ * model: 移动节点的model
+ * deltaX: 移动的x轴距离
+ * deltaY: 移动的y轴距离
+ */
+export declare type NodeMoveRule = (model: BaseNodeModel, deltaX: number, deltaY: number) => Boolean;
+export declare type ZoomParam = boolean | number;
+export {};

package/types/util/drag.d.ts

@@ -15,6 +15,7 @@ declare class StepDrag {
     step: number;
     isStopPropagation: boolean;
     isDraging: boolean;
+    isStartDraging: boolean;
     startX: number;
     startY: number;
     sumDeltaX: number;
@@ -23,6 +24,7 @@ declare class StepDrag {
     eventCenter: EventEmitter | null;
     model?: BaseNodeModel | BaseEdgeModel;
     startTime?: number;
+    isGrag: boolean;
     constructor({ onDragStart, onDraging, onDragEnd, eventType, eventCenter, step, isStopPropagation, model, }: {
         onDragStart?: (...args: any[]) => void;
         onDraging?: (...args: any[]) => void;

package/types/util/edge.d.ts

@@ -59,6 +59,7 @@ export declare const segmentDirection: (start: Point, end: Point) => Direction;
 export declare const poins2PointsList: (points: string) => PolyPoint[];
 export declare const getSimplePoints: (start: any, end: any, sPoint: any, tPoint: any) => Point[];
 export declare const getBytesLength: (word: string) => number;
+export declare const getTextWidth: (text: any, font: any) => any;
 declare type AppendAttributesType = {
     d: string;
     fill: string;
@@ -97,5 +98,5 @@ declare type Position = {
     x: number;
     y: number;
 };
-export declare const twoPointDistance: (p1: Position, p2: Position) => number;
+export declare const twoPointDistance: (source: Position, target: Position) => number;
 export {};

package/types/util/graph.d.ts

@@ -6,3 +6,7 @@ export declare const getById: (id: any, data: any) => any;
  * @param rightBottomPoint 区域的右下角点
  */
 export declare const isPointInArea: ([x, y]: [any, any], [leftTopX, leftTopY]: [any, any], [rightBottomX, rightBottomY]: [any, any]) => boolean;
+/**
+ * 判断鼠标点击选中元素的时候，是否为多选
+ */
+export declare const isMultipleSelect: (e: MouseEvent, editConfig: any) => boolean;

package/types/util/node.d.ts

@@ -1,10 +1,10 @@
 import BaseNode from '../model/node/BaseNodeModel';
-import { Point, Direction, NodeConfig } from '../type';
+import { Point, Direction, NodeConfig, AnchorConfig } from '../type';
 export declare const getAnchors: (data: any) => Point[];
 declare type NodeContaint = {
     node: BaseNode;
     anchorIndex: number;
-    anchorPosition: Point;
+    anchor: AnchorConfig;
 };
 export declare const targetNodeInfo: (position: Point, nodes: BaseNode[]) => NodeContaint;
 export declare const distance: (x1: number, y1: number, x2: number, y2: number) => number;
@@ -43,4 +43,22 @@ export declare const getNodeAnchorPosition: (center: any, point: any, width: any
     x: any;
     y: any;
 };
+export declare const getHtmlTextHeight: ({ rows, style, rowsLength, className }: {
+    rows: any;
+    style: any;
+    rowsLength: any;
+    className: any;
+}) => number;
+export declare const getSvgTextWidthHeight: ({ rows, rowsLength, fontSize }: {
+    rows: any;
+    rowsLength: any;
+    fontSize: any;
+}) => {
+    width: number;
+    height: number;
+};
+/**
+ * @description 格式化连线校验信息
+ */
+export declare const formateAnchorConnectValidateData: (data: any) => any;
 export {};

package/types/util/theme.d.ts

@@ -87,6 +87,9 @@ export declare const updateTheme: (style: any) => {
         fontFamily: string;
     };
     nodeText: {
+        autoWrap: boolean;
+        lineHeight: number;
+        wrapPadding: string;
         color: string;
         fontSize: number;
         fontWeight: string;
@@ -104,6 +107,9 @@ export declare const updateTheme: (style: any) => {
             radius: number;
         };
         hoverBackground: any;
+        autoWrap: boolean;
+        lineHeight: number;
+        wrapPadding: string;
     };
     line: {
         stroke: string;
@@ -158,4 +164,10 @@ export declare const updateTheme: (style: any) => {
         stroke: string;
         strokeWidth: number;
     };
+    edgeAdjust: {
+        r: number;
+        fill: string;
+        stroke: string;
+        strokeWidth: string;
+    };
 };

package/types/util/uuid.d.ts

@@ -1 +1,6 @@
+import { GraphConfigData } from '..';
 export declare const createUuid: () => string;
+/**
+ * 重新刷新流程图的所有id
+ */
+export declare const refreshGraphId: (graphData: GraphConfigData, prefix?: string) => GraphConfigData;

package/types/util/zIndex.d.ts

@@ -0,0 +1,2 @@
+export declare const getZIndex: () => number;
+export declare const getMinIndex: () => number;

package/types/view/Anchor.d.ts

@@ -2,13 +2,16 @@ 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 {
     x: number;
     y: number;
-    style?: CSSStyleDeclaration;
-    hoverStyle?: CSSStyleDeclaration;
-    edgeStyle?: CSSStyleDeclaration;
+    id?: string;
+    anchorData: AnchorConfig;
+    style?: Record<string, any>;
+    hoverStyle?: Record<string, any>;
+    edgeStyle?: Record<string, any>;
     anchorIndex: number;
     eventCenter: EventEmitter;
     graphModel: GraphModel;
@@ -35,7 +38,6 @@ declare class Anchor extends Component<IProps, IState> {
         deltaY: any;
     }) => void;
     onDragEnd: () => void;
-    onDblClick: () => void;
     checkEnd: () => void;
     isShowLine(): boolean;
     render(): h.JSX.Element;

package/types/view/Graph.d.ts

@@ -14,13 +14,9 @@ declare type IProps = {
     eventCenter: EventEmitter;
     dnd: DnD;
     snaplineModel: SnaplineModel;
-    components: any;
-};
-declare type InjectedProps = IProps & {
     graphModel: GraphModel;
 };
 declare class Graph extends Component<IProps> {
-    get InjectedProps(): InjectedProps;
     getComponent(model: BaseEdgeModel | BaseNodeModel, graphModel: GraphModel, eventCenter: EventEmitter, overlay?: string): h.JSX.Element;
     render(): h.JSX.Element;
 }

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

@@ -0,0 +1 @@
+export default function Rect(props: any): void;

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

@@ -1,10 +1,2 @@
 import { h } from 'preact';
-export default function Polygon({ fillOpacity, strokeWidth, strokeOpacity, fill, stroke, points, className, }: {
-    fillOpacity?: number;
-    strokeWidth?: number;
-    strokeOpacity?: number;
-    fill?: string;
-    stroke?: string;
-    points: any;
-    className?: string;
-}): h.JSX.Element;
+export default function Polygon(props: any): h.JSX.Element;

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

@@ -1,6 +1,6 @@
 import LogicFlow from '../../LogicFlow';
+import { BaseNodeModel } from '../../model';
 import { TextConfig } from '../../type';
-import { BaseNodeModel } from '../..';
 export declare type DndOptions = {
     validate: () => boolean;
 };

package/types/view/edge/AdjustPoint.d.ts

@@ -0,0 +1,43 @@
+import { h, Component } from 'preact';
+import EventEmitter from '../../event/eventEmitter';
+import { BaseEdgeModel } from '../../model/edge';
+import GraphModel from '../../model/GraphModel';
+import { Point } from '../../type';
+interface IProps {
+    x: number;
+    y: number;
+    type: AdjustType;
+    id?: string;
+    eventCenter: EventEmitter;
+    graphModel: GraphModel;
+    edgeModel: BaseEdgeModel;
+}
+interface IState {
+    draging: boolean;
+    endX: number;
+    endY: number;
+}
+interface OldEdge {
+    startPoint: Point;
+    endPoint: Point;
+    pointsList: Point[];
+}
+declare enum AdjustType {
+    SOURCE = "SOURCE",
+    TARGET = "TARGET"
+}
+export default class AdjustPoint extends Component<IProps, IState> {
+    dragHandler: Function;
+    oldEdge: OldEdge;
+    constructor();
+    onDragStart: () => void;
+    onDraging: ({ deltaX, deltaY }: {
+        deltaX: any;
+        deltaY: any;
+    }) => void;
+    onDragEnd: () => void;
+    recoveryEdge: () => void;
+    getAdjustPointStyle: () => any;
+    render(): h.JSX.Element;
+}
+export {};

package/types/view/edge/BaseEdge.d.ts

@@ -10,7 +10,6 @@ declare type IProps = {
 };
 export default class BaseEdge extends Component<IProps> {
     startTime: number;
-    preStartTime: number;
     contextMenuTime: number;
     clickTimer: number;
     getAttributes(): {
@@ -36,6 +35,7 @@ export default class BaseEdge extends Component<IProps> {
         verticalLength: any;
     };
     getArrow(): h.JSX.Element;
+    getAdjustPoints(): h.JSX.Element;
     getAppendWidth(): h.JSX.Element;
     getAppend(): h.JSX.Element;
     handleHover: (hovered: any, ev: any) => void;
@@ -44,6 +44,8 @@ export default class BaseEdge extends Component<IProps> {
     handleContextMenu: (ev: MouseEvent) => void;
     handleMouseDown: (e: any) => void;
     handleMouseUp: (e: MouseEvent) => void;
+    getIsDraging: () => boolean;
+    toFront(): void;
     render(): h.JSX.Element;
 }
 export {};

package/types/view/edge/PolylineEdge.d.ts

@@ -21,6 +21,7 @@ export default class PolylineEdge extends BaseEdge {
     }) => void;
     onDragEnd: () => void;
     beforeDragStart: (e: any, appendInfo: any) => void;
+    getIsDraging: () => boolean;
     getAttributes(): {
         points: string;
         stroke: string;

package/types/view/node/BaseNode.d.ts

@@ -15,9 +15,8 @@ declare type Istate = {
 export default abstract class BaseNode extends Component<IProps, Istate> {
     static getModel(defaultModel: any): any;
     stepDrag: StepDrag;
-    startTime: number;
-    preStartTime: number;
     contextMenuTime: number;
+    startTime: number;
     clickTimer: number;
     constructor(props: any);
     abstract getShape(): any;
@@ -43,7 +42,9 @@ export default abstract class BaseNode extends Component<IProps, Istate> {
         opacity: number;
         outlineColor: string;
         id: string;
-        properties: {};
+        properties: {
+            [x: string]: any;
+        };
         type: string;
         x: number;
         y: number;
@@ -58,14 +59,13 @@ export default abstract class BaseNode extends Component<IProps, Istate> {
         };
     };
     getProperties(): Record<string, any>;
-    getAnchorStyle(): CSSStyleDeclaration;
-    getAnchorHoverStyle(): CSSStyleDeclaration;
-    getNewEdgeStyle(): CSSStyleDeclaration;
+    getAnchorStyle(): Record<string, any>;
+    getAnchorHoverStyle(): Record<string, any>;
+    getNewEdgeStyle(): Record<string, any>;
     getAnchors(): h.JSX.Element[];
     getTextStyle(): any;
     getText(): "" | h.JSX.Element;
     getStateClassName(): string;
-    onDragStart: () => void;
     onDraging: ({ deltaX, deltaY }: {
         deltaX: any;
         deltaY: any;
@@ -77,6 +77,10 @@ export default abstract class BaseNode extends Component<IProps, Istate> {
     setHoverON: (ev: any) => void;
     setHoverOFF: (ev: any) => void;
     onMouseOut: (ev: any) => void;
+    /**
+     * 节点置顶，可以被某些不需要置顶的节点重写，如group节点。
+     */
+    toFront(): void;
     render(): any;
 }
 export {};

package/types/view/node/CircleNode.d.ts

@@ -25,7 +25,9 @@ export default class CircleNode extends BaseNode {
         opacity: number;
         outlineColor: string;
         id: string;
-        properties: {};
+        properties: {
+            [x: string]: any;
+        };
         type: string;
         x: number;
         y: number;