LogicFlow官方API相关

grid

https://site.logic-flow.cn/docs/#/zh/guide/basic/grid?id=%e7%bd%91%e6%a0%bc-grid

const lf = new LogicFlow({
  grid: true,
});

// 等同于默认属性如下
const lf = new LogicFlow({
  grid: {
    size: 20,
    visible: true,
    type: "dot",
    config: {
      color: "#ababab",
      thickness: 1,
    },
  },
});

export type GridOptions = {
  size?: number  // 设置网格大小
  visible?: boolean,  // 设置是否可见，若设置为false则不显示网格线但是仍然保留size栅格的效果
  type?: 'dot' | 'mesh', // 设置网格类型，目前支持 dot 点状和 mesh 线状两种
  config?: {
    color: string,  // 设置网格的颜色
    thickness?: number,  // 设置网格线的宽度
  }
};

批量注册节点

• https://github.com/didi/LogicFlow/issues/605

// this.lf.register(UserTask);
// this.lf.register(ButtonNode);
this.lf.batchRegister([ButtonNode, UserTask]);

批量 - SelectionSelect

• https://site.logic-flow.cn/docs/#/zh/guide/extension/component-selection?id=%e6%a1%86%e9%80%89-selectionselect

外框

• https://site.logic-flow.cn/docs/#/zh/api/editConfigModelApi?id=editconfigmodel

属性名	类型	默认值	说明
isSilentMode	boolean	false	是否为静默模式
stopZoomGraph	boolean	false	禁止缩放画布
stopScrollGraph	boolean	false	禁止鼠标滚动移动画布
stopMoveGraph	boolean	false	禁止拖动画布
adjustEdge	boolean	true	允许调整边
adjustEdgeMiddle	boolean	false	只对折线生效，只允许调整边的中间线段，不允许调整与起点终点相连的线段
adjustEdgeStartAndEnd	boolean	false	允许调整边起点/终点
adjustNodePosition	boolean	true	允许拖动节点
hideAnchors	boolean	false	隐藏节点所有锚点
hoverOutline	boolean	true	显示节点悬浮时的外框
nodeTextEdit	boolean	true	允许节点文本可以编辑
edgeTextEdit	boolean	true	允许边文本可以编辑
nodeTextDraggable	boolean	false	允许节点文本可以拖拽
edgeTextDraggable	boolean	false	允许边文本可以拖拽
metaKeyMultipleSelected	boolean	false	允许按照 meta 键多选元素
autoExpand	boolean	true	节点/边超出画布后自动扩展画布

控制页面编辑状态 - editconfigmodel

• https://site.logic-flow.cn/docs/#/zh/api/editConfigModelApi?id=editconfigmodel

节点实例操作以及事件 - constructor

流程图上所有的节点实例操作以及事件，行为监听都在 LogicFlow 实例上进行。

自定义节点的锚点

• https://site.logic-flow.cn/docs/#/zh/guide/basic/node?id=%e8%87%aa%e5%ae%9a%e4%b9%89%e8%8a%82%e7%82%b9%e7%9a%84%e9%94%9a%e7%82%b9

重置默认锚点 - getDefaultAnchor

• https://beta.logic-flow.cn/api/node-model-api#getanchorstyle

class cNode extend RectNodeModel {
  // 定义节点只有左右两个锚点. 锚点位置通过中心点和宽度算出来。
  getDefaultAnchor() {
    const { width, height, x, y, id } = this;
    return [
      {
        x: x - width / 2,
        y,
        name: 'left',
        id: `${id}_0`
      },
      {
        x: x + width / 2,
        y,
        name: 'right',
        id: `${id}_1`,
        edgeAddable: false
      },
    ]
  }
}