@logicflow/core 1.2.0-next.4 → 1.2.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@logicflow/core",
-  "version": "1.2.0-next.4",
+  "version": "1.2.0",
   "description": "LogicFlow core, to quickly build flowchart editor",
   "main": "dist/entry.js",
   "module": "dist/logic-flow.js",

package/types/model/BaseModel.d.ts

@@ -3,13 +3,15 @@ import { TextConfig, AdditionData } from '../type';
 interface IBaseModel {
     /**
      * 节点或者边的id.
+     *
      * 默认情况下，使用uuidv4生成。
      * 如果想要自定义，可以重写createId生成。
      */
     id: string;
     /**
-     * 不可自定义
      * model对应的图形外观类型（eg: 圆形、矩形、多边形等）
+     *
+     * 不可自定义
      * 用于logicflow内部计算使用。
      */
     modelType: string;
@@ -29,6 +31,7 @@ interface IBaseModel {
     type: string;
     /**
      * 元素状态
+     *
      * 不同的状态对应着元素显示效果。
      * 请勿直接修改。
      * logicflow内部将元素状态分为5种：
@@ -42,6 +45,7 @@ interface IBaseModel {
     additionStateData: AdditionData;
     /**
      * 元素上的文本
+     *
      * logicflow中存在两种文本
      * 一种是脱离边和节点单独存在的文本
      * 一种是必须和边、节点关联的文本。
@@ -68,6 +72,7 @@ interface IBaseModel {
     zIndex: number;
     /**
      * 创建节点ID
+     *
      * 默认情况下，logicflow内部使用uuidv4生成id。
      * 在自定义节点的时候，可以重写此方法基于自己的规则生成id。
      * 注意，此方法必须是同步的。

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

@@ -2,7 +2,7 @@ import { IBaseModel } from '../BaseModel';
 import GraphModel from '../GraphModel';
 import { Point, AdditionData, EdgeData, MenuConfig, EdgeConfig, ShapeStyleAttribute } from '../../type/index';
 import { ModelType, ElementType } from '../../constant/constant';
-import { OutlineTheme } from '../../constant/DefaultTheme';
+import { ArrowTheme, OutlineTheme } from '../../constant/DefaultTheme';
 declare class BaseEdgeModel implements IBaseModel {
     id: string;
     type: string;
@@ -27,6 +27,7 @@ declare class BaseEdgeModel implements IBaseModel {
     visible: boolean;
     virtual: boolean;
     isAnimation: boolean;
+    isShowAdjustPoint: boolean;
     graphModel: GraphModel;
     zIndex: number;
     readonly BaseType = ElementType.EDGE;
@@ -37,7 +38,6 @@ declare class BaseEdgeModel implements IBaseModel {
     targetAnchorId: string;
     menu?: MenuConfig[];
     customTextPosition: boolean;
-    animationData: import("../../constant/DefaultAnimation").Animation;
     style: ShapeStyleAttribute;
     arrowConfig: {
         markerEnd: string;
@@ -46,63 +46,99 @@ declare class BaseEdgeModel implements IBaseModel {
     [propName: string]: any;
     constructor(data: EdgeConfig, graphModel: GraphModel);
     /**
-     * @overridable 支持重写
      * 初始化边数据
+     * @overridable 支持重写
      * initNodeData和setAttributes的区别在于
      * initNodeData只在节点初始化的时候调用，用于初始化节点的所有属性。
-     * setAttributes除了初始化调用外，还会在properties发生变化了调用。
+     * setAttributes除了初始化调用外，还会在properties发生变化后调用。
      */
     initEdgeData(data: any): void;
     /**
-     * 设置model属性，每次properties发生变化会触发
+     * 设置model属性
      * @overridable 支持重写
+     * 每次properties发生变化会触发
      */
     setAttributes(): void;
+    createId(): string;
     /**
-     * @overridable 支持重写，自定义此类型节点默认生成方式
-     * @returns string
+     * 自定义边样式
+     *
+     * @overridable 支持重写
+     * @returns 自定义边样式
      */
-    createId(): any;
+    getEdgeStyle(): ShapeStyleAttribute;
     /**
+     * 自定义边调整点样式
+     *
      * @overridable 支持重写
-     * 获取当前节点样式
-     * @returns 自定义边样式
+     * 在isShowAdjustPoint为true时会显示调整点。
      */
-    getEdgeStyle(): {
+    getAdjustPointStyle(): {
         [x: string]: any;
+        r?: number;
         fill?: string;
         stroke?: string;
         strokeWidth?: number;
     };
     /**
+     * 自定义边文本样式
+     *
      * @overridable 支持重写
-     * 获取当前节点文本样式
      */
     getTextStyle(): import("../../constant/DefaultTheme").EdgeTextTheme;
     /**
+     * 自定义边动画样式
+     *
      * @overridable 支持重写
-     * 获取当前边的动画样式
-     * @returns 自定义边动画样式
+     * @example
+     * getEdgeAnimationStyle() {
+     *   const style = super.getEdgeAnimationStyle();
+     *   style.stroke = 'blue'
+     *   style.animationDuration = '30s'
+     *   style.animationDirection = 'reverse'
+     *   return style
+     * }
      */
-    getAnimation(): import("../../constant/DefaultAnimation").Animation;
+    getEdgeAnimationStyle(): import("../../constant/DefaultTheme").EdgeAnimation;
     /**
+     * 自定义边箭头样式
+     *
      * @overridable 支持重写
-     * 获取当前边的动画样式
-     * @returns 自定义边动画样式
+     * @example
+     * getArrowStyle() {
+     *   const style = super.getArrowStyle();
+     *   style.stroke = 'green';
+     *   return style;
+     * }
      */
-    getEdgeAnimationStyle(): import("../../constant/DefaultTheme").EdgeAnimation;
+    getArrowStyle(): ArrowTheme;
     /**
+     * 自定义边被选中时展示其范围的矩形框样式
+     *
      * @overridable 支持重写
-     * 获取outline样式，重写可以定义此类型边outline样式， 默认使用主题样式
-     * @returns 自定义outline样式
+     * @example
+     * // 隐藏outline
+     * getOutlineStyle() {
+     *   const style = super.getOutlineStyle();
+     *   style.stroke = "none";
+     *   style.hover.stroke = "none";
+     *   return style;
+     * }
      */
     getOutlineStyle(): OutlineTheme;
     /**
-     * @overridable 支持重新，重新自定义文本位置
-     * @returns 文本位置
+     * 重新自定义文本位置
+     *
+     * @overridable 支持重写
      */
     getTextPosition(): Point;
+    /**
+     * 边的前一个节点
+     */
     get sourceNode(): import("..").BaseNodeModel;
+    /**
+     * 边的后一个节点
+     */
     get targetNode(): import("..").BaseNodeModel;
     get textPosition(): Point;
     /**
@@ -119,20 +155,54 @@ declare class BaseEdgeModel implements IBaseModel {
     getProperties(): Record<string, any>;
     /**
      * 获取被保存时返回的数据
+     *
+     * @overridable 支持重写
      */
     getData(): EdgeData;
     /**
-     * 用于在历史记录时获取节点数据，
+     * 获取边的数据
+     *
+     * @overridable 支持重写
+     * 用于在历史记录时获取节点数据。
      * 在某些情况下，如果希望某个属性变化不引起history的变化，
      * 可以重写此方法。
      */
     getHistoryData(): EdgeData;
+    /**
+     * 设置边的属性，会触发重新渲染
+     * @param key 属性名
+     * @param val 属性值
+     */
     setProperty(key: any, val: any): void;
+    /**
+     * 删除边的属性，会触发重新渲染
+     * @param key 属性名
+     */
     deleteProperty(key: string): void;
+    /**
+     * 设置边的属性，会触发重新渲染
+     * @param key 属性名
+     * @param val 属性值
+     */
     setProperties(properties: any): void;
+    /**
+     * 修改边的id
+     */
     changeEdgeId(id: string): void;
-    setStyle(key: any, val: any): void;
+    /**
+     * 设置边样式，用于插件开发时跳过自定义边的渲染。大多数情况下，不需要使用此方法。
+     * 如果需要设置边的样式，请使用 getEdgeStyle 方法自定义边样式。
+     */
+    setStyle(key: string, val: any): void;
+    /**
+     * 设置边样式，用于插件开发时跳过自定义边的渲染。大多数情况下，不需要使用此方法。
+     * 如果需要设置边的样式，请使用 getEdgeStyle 方法自定义边样式。
+     */
     setStyles(styles: any): void;
+    /**
+     * 设置边样式，用于插件开发时跳过自定义边的渲染。大多数情况下，不需要使用此方法。
+     * 如果需要设置边的样式，请使用 getEdgeStyle 方法自定义边样式。
+     */
     updateStyles(styles: any): void;
     /**
      * 内部方法，处理初始化文本格式

package/types/tool/TextEditTool.d.ts

@@ -21,7 +21,6 @@ export default class TextEdit extends Component<IProps, IState> {
         id: string;
     };
     constructor();
-    componentDidMount(): void;
     static getDerivedStateFromProps(props: any): {
         style: any;
     };

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

@@ -8,6 +8,7 @@ interface IProps {
     y: number;
     type: AdjustType;
     id?: string;
+    getAdjustPointShape: Function;
     graphModel: GraphModel;
     edgeModel: BaseEdgeModel;
 }

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

@@ -1,5 +1,4 @@
 import { h, Component } from 'preact';
-import { ArrowStyle } from './Arrow';
 import BaseEdgeModel from '../../model/edge/BaseEdgeModel';
 import GraphModel from '../../model/GraphModel';
 import { ArrowInfo } from '../../type/index';
@@ -12,26 +11,129 @@ export default class BaseEdge extends Component<IProps> {
     contextMenuTime: number;
     clickTimer: number;
     textRef: import("preact").RefObject<any>;
-    getShape(): void;
+    /**
+     * 不支持重写，请使用getEdge
+     */
+    getShape(): h.JSX.Element;
+    /**
+     * @deprecated 请使用model.getTextStyle
+     */
     getTextStyle(): void;
-    getText(): "" | h.JSX.Element;
+    /**
+     * @overridable 可重写，自定义边文本DOM
+     */
+    getText(): h.JSX.Element | null;
+    /**
+     * @deprecated
+     */
     getArrowInfo(): ArrowInfo;
-    getArrowStyle(): ArrowStyle;
-    getArrow(): h.JSX.Element | null;
+    /**
+     * @deprecated 请使用model.getArrowStyle
+     */
+    getArrowStyle(): any;
+    /**
+     * 定义边的箭头，不支持重写。请使用getStartArrow和getEndArrow
+     */
+    private getArrow;
+    /**
+     * @overridable 可重写，自定义边起点箭头形状。
+     * @example
+     * getStartArrow() {
+     *  const { model } = this.props;
+     *  const { stroke, strokeWidth, offset, verticalLength } = model.getArrowStyle();
+     *  return (
+     *    h('path', {
+     *      d: ''
+     *    })
+     *  )
+     * }
+     */
     getStartArrow(): h.JSX.Element | null;
+    /**
+     * @overridable 可重写，自定义边终点箭头形状。
+     * @example
+     * getEndArrow() {
+     *  const { model } = this.props;
+     *  const { stroke, strokeWidth, offset, verticalLength } = model.getArrowStyle();
+     *  return (
+     *    h('path', {
+     *      d: ''
+     *    })
+     *  )
+     * }
+     */
     getEndArrow(): h.JSX.Element | null;
-    getAdjustPoints(): h.JSX.Element;
+    /**
+     * @overridable 可重写，自定义调整边连接节点形状。在开启了adjustEdgeStartAndEnd的时候，会显示调整点。
+     * @param x 调整点x坐标
+     * @param y 调整点y坐标
+     * @example
+     * getAdjustPointShape(x, y) {
+     *  const { model } = this.props;
+     *  const style = model.getAdjustPointStyle();
+     *  return (
+     *    h('circle', {
+     *      ...style,
+     *     x,
+     *     y
+     *    })
+     *  )
+     * }
+     */
+    getAdjustPointShape: (x: any, y: any) => h.JSX.Element | null;
+    /**
+     * 不支持重写。请使用getAdjustPointShape
+     */
+    private getAdjustPoints;
+    /**
+     * @deprecated
+     */
     getAnimation(): void;
+    /**
+     * @overridable 可重写，在完全自定义边的时候，可以重写此方法，来自定义边的选区。
+     */
     getAppendWidth(): h.JSX.Element;
+    /**
+     * 不建议重写，此方法为扩大边选区，方便用户点击选中边。
+     * 如果需要自定义边选区，请使用getAppendWidth。
+     */
     getAppend(): h.JSX.Element;
+    /**
+     * 不支持重写，如果想要基于hover状态设置不同的样式，请在model中使用isHovered属性。
+     */
     handleHover: (hovered: any, ev: any) => void;
+    /**
+     * 不支持重写，如果想要基于hover状态设置不同的样式，请在model中使用isHovered属性。
+     */
     setHoverON: (ev: any) => void;
+    /**
+     * 不支持重写，如果想要基于hover状态设置不同的样式，请在model中使用isHovered属性。
+     */
     setHoverOFF: (ev: any) => void;
+    /**
+     * 不支持重写，如果想要基于contextmenu事件做处理，请监听edge:contextmenu事件。
+     */
     handleContextMenu: (ev: MouseEvent) => void;
+    /**
+     * 不支持重写
+     */
     handleMouseDown: (e: any) => void;
+    /**
+     * 不支持重写
+     */
     handleMouseUp: (e: MouseEvent) => void;
-    getIsDragging: () => boolean;
+    /**
+     * @overridable 支持重写, 此方法为获取边的形状，如果需要自定义边的形状，请重写此方法。
+     * @example https://docs.logic-flow.cn/docs/#/zh/guide/basic/edge?id=%e5%9f%ba%e4%ba%8e-react-%e7%bb%84%e4%bb%b6%e8%87%aa%e5%ae%9a%e4%b9%89%e8%be%b9
+     */
+    getEdge(): h.JSX.Element | null;
+    /**
+     * @overridable 支持重写, 此方法为边在被选中时将其置顶，如果不需要此功能，可以重写此方法。
+     */
     toFront(): void;
+    /**
+     * 不建议重写，如果要自定义边的形状，请重写getEdge方法。
+     */
     render(): h.JSX.Element;
 }
 export {};

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

@@ -2,9 +2,17 @@ import { h } from 'preact';
 import BaseEdge from './BaseEdge';
 import { ArrowInfo } from '../../type/index';
 export default class BezierEdge extends BaseEdge {
+    /**
+     * @overridable 支持重写, 此方法为获取边的形状，如果需要自定义边的形状，请重写此方法。
+     * @example https://docs.logic-flow.cn/docs/#/zh/guide/basic/edge?id=%e5%9f%ba%e4%ba%8e-react-%e7%bb%84%e4%bb%b6%e8%87%aa%e5%ae%9a%e4%b9%89%e8%be%b9
+     */
     getEdge(): h.JSX.Element;
-    getShape(): h.JSX.Element;
-    getAnimation(): h.JSX.Element;
+    /**
+     * @overridable 可重写，在完全自定义边的时候，可以重写此方法，来自定义边的选区。
+     */
     getAppendWidth(): h.JSX.Element;
+    /**
+     * @deprecated
+     */
     getArrowInfo(): ArrowInfo;
 }

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

@@ -1,8 +1,13 @@
 import { h } from 'preact';
 import BaseEdge from './BaseEdge';
 export default class LineEdge extends BaseEdge {
+    /**
+     * @overridable 支持重写, 此方法为获取边的形状，如果需要自定义边的形状，请重写此方法。
+     * @example https://docs.logic-flow.cn/docs/#/zh/guide/basic/edge?id=%e5%9f%ba%e4%ba%8e-react-%e7%bb%84%e4%bb%b6%e8%87%aa%e5%ae%9a%e4%b9%89%e8%be%b9
+     */
     getEdge(): h.JSX.Element;
-    getShape(): h.JSX.Element;
-    getAnimation(): h.JSX.Element;
+    /**
+     * @overridable 可重写，在完全自定义边的时候，可以重写此方法，来自定义边的选区。
+     */
     getAppendWidth(): h.JSX.Element;
 }

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

@@ -1,33 +1,44 @@
 import { h } from 'preact';
 import BaseEdge from './BaseEdge';
 import { AppendInfo, ArrowInfo } from '../../type/index';
-declare type AppendAttributesType = {
-    d: string;
-    fill: string;
-    stroke: string;
-    strokeWidth: number;
-    strokeDasharray: string;
-};
 export default class PolylineEdge extends BaseEdge {
     drag: any;
     isDragging: boolean;
+    isShowAdjustPointTemp: boolean;
     appendInfo: AppendInfo;
-    dragHandler: (ev: MouseEvent) => void;
     constructor();
+    /**
+     * 不支持重写
+     */
     onDragStart: () => void;
+    /**
+     * 不支持重写
+     */
     onDragging: ({ deltaX, deltaY }: {
         deltaX: any;
         deltaY: any;
     }) => void;
+    /**
+     * 不支持重写
+     */
     onDragEnd: () => void;
+    /**
+     * 不支持重写
+     */
     beforeDragStart: (e: any, appendInfo: any) => void;
-    getIsDragging: () => boolean;
+    /**
+     * @overridable 支持重写, 此方法为获取边的形状，如果需要自定义边的形状，请重写此方法。
+     * @example https://docs.logic-flow.cn/docs/#/zh/guide/basic/edge?id=%e5%9f%ba%e4%ba%8e-react-%e7%bb%84%e4%bb%b6%e8%87%aa%e5%ae%9a%e4%b9%89%e8%be%b9
+     */
     getEdge(): h.JSX.Element;
-    getShape(): h.JSX.Element;
-    getAnimation(): h.JSX.Element;
+    /**
+     * @deprecated
+     */
     getArrowInfo(): ArrowInfo;
-    getAppendAttributes(appendInfo: AppendInfo): AppendAttributesType;
-    getAppendShape(appendInfo: AppendInfo): h.JSX.Element;
+    private getAppendAttributes;
+    private getAppendShape;
+    /**
+     * @overridable 可重写，在完全自定义边的时候，可以重写此方法，来自定义边的选区。
+     */
     getAppendWidth(): h.JSX.Element;
 }
-export {};

package/types/view/overlay/ToolOverlay.d.ts

@@ -5,11 +5,13 @@ declare type IProps = {
     tool: any;
 };
 export default class ToolOverlay extends Component<IProps> {
-    setToolOverlayRef: (element: any) => void;
+    componentDidMount(): void;
+    componentDidUpdate(): void;
     /**
      * 外部传入的一般是HTMLElement
      */
     getTools(): any;
+    triggerToolRender(): void;
     render(): h.JSX.Element;
 }
 export {};