vue LogicFlow更多配置选项示例详解

const styleConfig = {} // 主题配置项
lf.value = new LogicFlow({
  container: container.value,
  grid: true,
  // 实例化LF时配置主题
  style: styleConfig,
})

const styleConfig = {} // 主题配置项
lf.value.setTheme(styleConfig);

const gridConfig = {
  size: 20,
  visible: true,
  type: 'mesh',
  config: {
    color: '#ababab',
    thickness: 1,
  },
}
lf.value = new LogicFlow({
  container: container.value,
  grid: gridConfig,
})

const styleConfig = {
  snapline: {
    stroke: '#1E90FF', // 对齐线颜色
    strokeWidth: 1, // 对齐线宽度
  },
}
lf.value.setTheme(styleConfig);

lf.value = new LogicFlow({
  container: container.value,
  // grid: true, // 关闭网格
  background: {
    backgroundImage: "url(../grid.svg)",
    backgroundRepeat: "repeat"
  }
})

lf.value = new LogicFlow({
  container: container.value,
  keyboard: {
    enabled: true
  },
})

lf.value = new LogicFlow({
  container: container.value,
  keyboard: {
    enabled: true,
    shortcuts: [
      {
        keys: ["backspace"],
        callback: () => {
          const r = window.confirm("确定要删除吗？");
          if (r) {
            const elements = lf.value!.getSelectElements(true);
            lf.value?.clearSelectElements();
            elements.edges.forEach((edge: EdgeConfig) => lf.value!.deleteEdge(edge.id || ''));
            elements.nodes.forEach((node: NodeConfig) => lf.value!.deleteNode(node.id || ''));
          }
        }
      }
    ]
  },
})

lf.value = new LogicFlow({
  container: container.value,
  isSilentMode: true, // 静默模式
  stopZoomGraph: true, // 禁止缩放
  stopScrollGraph: true, // 禁止鼠标滚动移动画布
  stopMoveGraph: true, // 禁止拖动画布
})

lf.value.updateEditConfig({
	isSilentMode: false
});