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

package/types/constant/DefaultTheme.d.ts

@@ -1,173 +1,273 @@
-export declare const defaultTheme: {
-    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: {
+/**
+ * 颜色
+ * CSS属性用颜色
+ * 如#000000，reg(0,0,0,0)
+ * 如果是透明，可以传'none'
+ */
+export declare type Color = string;
+/**
+ * svg虚线
+ * 格式为逗号分割字符串，如
+ * @see https://developer.mozilla.org/zh-CN/docs/Web/SVG/Attribute/stroke-dasharray
+ */
+export declare type DashArray = string;
+export declare type CommonTheme = {
+    /**
+     * 填充颜色
+     */
+    fill?: Color;
+    /**
+     * 边框颜色
+     */
+    stroke?: Color;
+    /**
+     * 边框宽度
+     */
+    strokeWidth?: number;
+    /**
+     * 其他属性
+     * 我们会把你定义的所有属性最终传递到DOM上
+     * 详情请参考svg属性规范
+     * https://developer.mozilla.org/zh-CN/docs/Web/SVG/Attribute
+     */
+    [key: string]: any;
+};
+/**
+ * rect主题样式
+ * svg基础图形-矩形
+ * https://developer.mozilla.org/zh-CN/docs/Web/SVG/Element/rect
+ */
+export declare type RectTheme = {
+    /**
+     * 矩形的默认宽度
+     */
+    width?: number;
+    /**
+     * 矩形的默认高度
+     */
+    height?: number;
+    /**
+     * 圆角
+     * 注意，矩形圆角请使用radius
+     * 不要使用rx和ry
+     */
+    radius?: number;
+} & CommonTheme;
+/**
+ * circle主题样式
+ * svg基础图形-圆形
+ * https://developer.mozilla.org/zh-CN/docs/Web/SVG/Element/circle
+ */
+export declare type CircleTheme = {
+    /**
+     * 默认半径
+     */
+    r?: number;
+} & CommonTheme;
+/**
+ * polygon主题样式
+ * svg基础图形-多边形
+ * https://developer.mozilla.org/zh-CN/docs/Web/SVG/Element/polygon
+ */
+export declare type PolygonTheme = CommonTheme;
+/**
+ * ellipse主题样式
+ * svg基础图形-椭圆
+ * https://developer.mozilla.org/zh-CN/docs/Web/SVG/Element/ellipse
+ */
+export declare type EllipseTheme = CommonTheme;
+/**
+ * 锚点样式
+ * svg基础图形-圆
+ */
+export declare type AnchorTheme = {
+    r?: number;
+    hover?: {
         r: number;
-        fill: string;
-        stroke: string;
-        strokeWidth: string;
-    };
+    } & CommonTheme;
+} & CommonTheme;
+/**
+ * 文本样式
+ * svg文本
+ * https://developer.mozilla.org/zh-CN/docs/Web/SVG/Element/text
+ */
+export declare type TextTheme = {
+    /**
+     * 文本颜色
+     */
+    color?: Color;
+    /**
+     * 文本大小
+     */
+    fontSize?: number;
+} & CommonTheme;
+/**
+ * 文本节点样式
+ */
+export declare type TextNodeTheme = {
+    background?: RectTheme;
+} & TextTheme;
+/**
+ * 节点上文本样式
+ */
+export declare type NodeTextTheme = {
+    /**
+     * 文本超出指定宽度处理方式
+     * default: 不特殊处理，允许超出
+     * autoWrap: 超出自动换行
+     * ellipsis: 超出省略
+     */
+    overflowMode?: string;
+    background?: RectTheme;
+} & TextTheme;
+/**
+ * 边上文本样式
+ */
+export declare type EdgeTextTheme = {
+    /**
+     * 文本超出指定宽度处理方式
+     * default: 不特殊处理，允许超出
+     * autoWrap: 超出自动换行
+     * ellipsis: 超出省略
+     */
+    overflowMode?: string;
+    /**
+     * 文本一行最大宽度
+     */
+    textWidth?: number;
+    /**
+     * 文本背景样式
+     */
+    background?: {
+        wrapPadding?: string;
+    } & RectTheme;
+    /**
+     * hover状态下文本样式
+     */
+    hover?: EdgeTextTheme;
+} & TextTheme;
+export declare type EdgeTheme = CommonTheme;
+export declare type EdgePolylineTheme = {
+    /**
+     * 为了避免折线贴着节点导致折线和节点边重合
+     * 设置折线与节点产生垂线的距离。
+     * 详情见http://logic-flow.org/article/article03.html#%E7%9B%B4%E8%A7%92%E6%8A%98%E7%BA%BF
+     */
+    offset?: number;
+} & EdgeTheme;
+export declare type EdgeBezierTheme = {
+    /**
+     * 贝塞尔曲线控制点与锚点的距离
+     */
+    offset?: number;
+    /**
+     * 贝塞尔调整线主题
+     */
+    adjustLine?: EdgeTheme;
+    /**
+     * 贝塞尔调整锚点主题
+     */
+    adjustAnchor?: CircleTheme;
+} & EdgeTheme;
+/**
+ * 箭头主题
+ */
+export declare type ArrowTheme = {
+    /**
+     * 箭头长度.
+     * 以符号"->"为例, offset表示箭头大于号的宽度。
+     */
+    offset?: number;
+    /**
+     * 箭头垂直于边的距离
+     * 以符号"->"为例, verticalLength表示箭头大于号的高度
+     */
+    verticalLength?: number;
+} & CommonTheme;
+export declare type OutlineTheme = {
+    /**
+     * hover状态下样式
+     */
+    hover?: CommonTheme;
+} & CommonTheme;
+export declare type Theme = {
+    /**
+     * 所有节点的通用主题设置
+     */
+    baseNode?: CommonTheme;
+    /**
+     * 基础图形-矩形样式
+     */
+    rect?: RectTheme;
+    /**
+     * 基础图形-圆形样式
+     */
+    circle?: CircleTheme;
+    /**
+     * 基础图形-菱形样式
+     */
+    diamond?: PolygonTheme;
+    /**
+     * 基础图形-椭圆样式
+     */
+    ellipse?: EllipseTheme;
+    /**
+     * 基础图形-多边形样式
+     */
+    polygon?: PolygonTheme;
+    /**
+     * 所有边的通用主题设置
+     */
+    baseEdge?: EdgeTheme;
+    /**
+     * 基础图形-直线样式
+     */
+    line?: EdgeTheme;
+    /**
+    * 基础图形-折现样式
+    */
+    polyline?: EdgePolylineTheme;
+    /**
+    * 基础图形-贝塞尔曲线样式
+    */
+    bezier?: EdgeBezierTheme;
+    /**
+     * 锚点样式
+     */
+    anchor?: AnchorTheme;
+    /**
+     * 文本节点样式
+     */
+    text?: TextTheme;
+    /**
+     * 节点文本样式
+     */
+    nodeText?: NodeTextTheme;
+    /**
+     * 边文本样式
+     */
+    edgeText?: EdgeTextTheme;
+    /**
+     * 边上箭头的样式
+     */
+    arrow?: ArrowTheme;
+    /**
+     * 从锚点拉出的边的样式
+     */
+    anchorLine?: EdgeTheme;
+    /**
+     * 对齐线样式
+     */
+    snapline?: EdgeTheme;
+    /**
+     * 当开启了跳转边的起点和终点(adjustEdgeStartAndEnd:true)后
+     * 边的两端会出现调整按钮
+     * 边连段的调整点样式
+     */
+    edgeAdjust?: CircleTheme;
+    /**
+     * 节点选择状态下外侧的选框样式
+     */
+    outline?: OutlineTheme;
 };
+export declare const defaultTheme: Theme;

package/types/constant/constant.d.ts

@@ -56,7 +56,6 @@ export declare enum EventType {
     EDGE_CONTEXTMENU = "edge:contextmenu",
     EDGE_ADJUST = "edge:adjust",
     EDGE_EXCHANGE_NODE = "edge:exchange-node",
-    SELECTION_CONTEXTMENU = "selection:contextmenu",
     BLANK_MOUSEDOWN = "blank:mousedown",
     BLANK_DRAGSTART = "blank:dragstart",
     BLANK_DRAG = "blank:drag",
@@ -65,6 +64,13 @@ export declare enum EventType {
     BLANK_MOUSEUP = "blank:mouseup",
     BLANK_CLICK = "blank:click",
     BLANK_CONTEXTMENU = "blank:contextmenu",
+    SELECTION_MOUSEDOWN = "selection:mousedown",
+    SELECTION_DRAGSTART = "selection:dragstart",
+    SELECTION_DRAG = "selection:drag",
+    SELECTION_DROP = "selection:drop",
+    SELECTION_MOUSEMOVE = "selection:mousemove",
+    SELECTION_MOUSEUP = "selection:mouseup",
+    SELECTION_CONTEXTMENU = "selection:contextmenu",
     CONNECTION_NOT_ALLOWED = "connection:not-allowed",
     HISTORY_CHANGE = "history:change",
     TEXT_UPDATE = "text:update",

package/types/keyboard/index.d.ts

@@ -8,11 +8,7 @@ export interface KeyboardDef {
         keys: string | string[];
         callback: Handler;
         action?: Action;
-    }> | {
-        keys: string | string[];
-        callback: Handler;
-        action?: Action;
-    };
+    }>;
 }
 export interface Options {
     lf: LogicFlow;

package/types/model/BaseModel.d.ts

@@ -1,14 +1,73 @@
 import { ElementState } from '../constant/constant';
 import { TextConfig, AdditionData } from '../type';
 interface IBaseModel {
+    /**
+     * 节点或者边的id.
+     * 默认情况下，使用uuidv4生成。
+     * 如果想要自定义，可以重写createId生成。
+     */
     id: string;
+    /**
+     * 不可自定义
+     * model对应的图形外观类型（eg: 圆形、矩形、多边形等）
+     * 用于logicflow内部计算使用。
+     */
     modelType: string;
+    /**
+     * 请勿直接修改属性，如果想要将一个节点类型修改为另一个类型。请使用
+     * `lf.graphModel.changeEdgeType`和`lf.graphModel.changeNodeType`
+     *
+     * 流程图元素类型，自定义元素时对应的标识。
+     * 在logicflow/core中对应着rect、circle、polyline这种。
+     * 在实际项目中，我们会基于业务类型进行自定义type.
+     * 例如BPMN应用场景，我们会定义开始节点的类型为bpmn:start-event
+     *
+     * 和modelType的区别是，type更多的是业务上的类型，而modelType则是外观上的类型。
+     * 例如bpmnjs的开始节点和结束节点type分别为'bpmn:start-event'和'bpmn:end-event'。
+     * 但是他们的modelType都是circle-node, 因为他们外观都是基于圆形自定义而来。
+     */
     type: string;
+    /**
+     * 元素状态
+     * 不同的状态对应着元素显示效果。
+     * 请勿直接修改。
+     * logicflow内部将元素状态分为5种：
+     * DEFAULT = 1 默认显示
+     * TEXT_EDIT = 2 此元素正在进行文本编辑
+     * SHOW_MENU = 3, 显示菜单，废弃请使用菜单插件
+     * ALLOW_CONNECT = 4, 此元素允许作为当前边的目标节点
+     * NOT_ALLOW_CONNECT = 5, 此元素不允许作为当前边的目标节点
+     */
     state: ElementState;
     additionStateData: AdditionData;
+    /**
+     * 元素上的文本
+     * logicflow中存在两种文本
+     * 一种是脱离边和节点单独存在的文本
+     * 一种是必须和边、节点关联的文本。
+     * 此属性控制的是第二种。
+     * 节点和边删除、调整的时候，其关联的文本也会对应删除、调整。
+     */
     text: TextConfig;
+    /**
+     * 元素是否被选中
+     */
     isSelected: boolean;
+    /**
+     * 元素堆叠是层级，默认情况下节点zIndex值为1，边zIndex为0。
+     * todo：写完善
+     */
     zIndex: number;
+    /**
+     * 创建节点ID
+     * 默认情况下，logicflow内部使用uuidv4生成id。
+     * 在自定义节点的时候，可以重写此方法基于自己的规则生成id。
+     * 注意，此方法必须是同步的。
+     * 如果想要异步修改Id，建议删除此节点后再同一位置创建一个新的节点。
+     * @overridable 可以重写
+     * @returns string
+     */
+    createId(): string;
     move(deltaX: number, deltaY: number): void;
     moveText(deltaX: number, deltaY: number): void;
     updateText(value: string): void;

package/types/model/EditConfigModel.d.ts

@@ -16,11 +16,11 @@ export interface EditConfigInterface {
      */
     stopMoveGraph?: boolean;
     /**
-     * 允许调整连线
+     * 允许调整边
      */
     adjustEdge?: boolean;
     /**
-     * 允许调整连线起点和终点
+     * 允许调整边起点和终点
      */
     adjustEdgeStartAndEnd?: boolean;
     /**
@@ -40,7 +40,7 @@ export interface EditConfigInterface {
      */
     nodeSelectedOutline?: boolean;
     /**
-     * 连线被选中时是否显示outline
+     * 边被选中时是否显示outline
      */
     edgeSelectedOutline?: boolean;
     /**
@@ -48,7 +48,7 @@ export interface EditConfigInterface {
      */
     nodeTextEdit?: boolean;
     /**
-     * 允许连线文本可以编辑
+     * 允许边文本可以编辑
      */
     edgeTextEdit?: boolean;
     /**
@@ -60,22 +60,14 @@ export interface EditConfigInterface {
      */
     nodeTextDraggable?: boolean;
     /**
-     * 允许连线文本可以拖拽
+     * 允许边文本可以拖拽
      */
     edgeTextDraggable?: boolean;
-    /**
-     * 允许meta多选元素
-     */
-    metaKeyMultipleSelected?: boolean;
     /**
      * 多选按键, 支持meta(cmd)、shift、alt
-     * 不支持ctrl，ctrl会出发contextmenu
+     * 不支持ctrl，ctrl会触发contextmenu
      */
     multipleSelectKey?: string;
-    /**
-     * 外部传入的额外配置, 待优化，这里不够易用。
-     */
-    extraConf?: Record<string, string | number | object | boolean>;
 }
 /**
  * 页面编辑配置
@@ -96,9 +88,7 @@ export default class EditConfigModel {
     edgeTextEdit: boolean;
     nodeTextDraggable: boolean;
     edgeTextDraggable: boolean;
-    metaKeyMultipleSelected: boolean;
     multipleSelectKey: string;
-    extraConf: {};
     defaultConfig: {};
     constructor(config: EditConfigInterface);
     updateEditConfig(config: any): void;