方法

导出流程图片

• 方法名称：downloadImageClick
• 作用：下载图片
• 类型：Function
• 默认值：() => {}

示例

<template>
  <dawnFlow ref="dawnFlowRef"></dawnFlow>
  <button @click="downloadImage">下载图片</button>
</template>
<script lang="ts" setup>
import { ref } from "vue";

const dawnFlowRef = ref(null);

const downloadImage = () => {
  dawnFlowRef.value.downloadImageClick();
};
</script>

获取流程数据

• 方法名称：getFlowJson
• 作用：获取流程数据，可用于获取当前流程图的 JSON 数据
• 类型：Function
• 默认值：() => {}

示例

<template>
  <dawnFlow ref="dawnFlowRef"></dawnFlow>
  <button @click="getFlowData">获取流程数据</button>
</template>
<script lang="ts" setup>
import { ref } from "vue";

const dawnFlowRef = ref(null);

const getFlowData = () => {
  dawnFlowRef.value.getFlowJson();
};
</script>

设置流程数据

• 方法名称：setFlowJson
• 作用：设置流程数据，可用于初始化流程图
• 类型：Function
• 默认值：() => {}

示例

<template>
  <dawnFlow ref="dawnFlowRef"></dawnFlow>
  <button @click="setFlowData">设置流程数据</button>
</template>
<script lang="ts" setup>
import { ref } from "vue";

const dawnFlowRef = ref(null);

const setFlowData = () => {
  dawnFlowRef.value.setFlowJson();
};
</script>

删除流程

• 方法名称：delFlowClick
• 作用：删除当前流程图，清空当前流程图数据
• 类型：Function
• 默认值：() => {}

示例

<template>
  <dawnFlow ref="dawnFlowRef"></dawnFlow>
  <button @click="delFlowData">删除流程</button>
</template>
<script lang="ts" setup>
import { ref } from "vue";

const dawnFlowRef = ref(null);

const delFlowData = () => {
  dawnFlowRef.value.delFlowClick();
};
</script>

删除选中节点

• 方法名称：delSelectNodeClick
• 作用：删除当前选中节点，按住 ctrl 可以多选节点
• 类型：Function
• 默认值：() => {}

示例

<template>
  <dawnFlow ref="dawnFlowRef"></dawnFlow>
  <button @click="delSelectNodeData">删除选中节点</button>
</template>
<script lang="ts" setup>
import { ref } from "vue";

const dawnFlowRef = ref(null);

const delSelectNodeData = () => {
  dawnFlowRef.value.delSelectNodeClick();
};
</script>

删除选中连线

• 方法名称：delSelectEdgesClick
• 作用：删除当前选中连线，按住 ctrl 可以多选连线
• 类型：Function
• 默认值：() => {}

示例

<template>
  <dawnFlow ref="dawnFlowRef"></dawnFlow>
  <button @click="delSelectEdgesData">删除选中连线</button>
</template>
<script lang="ts" setup>
import { ref } from "vue";

const dawnFlowRef = ref(null);

const delSelectEdgesData = () => {
  dawnFlowRef.value.delSelectEdgesClick();
};
</script>

返回画布中心位置

• 方法名称：backCenterClick
• 作用：返回画布中心位置
• 类型：Function
• 默认值：() => {}

示例

<template>
  <dawnFlow ref="dawnFlowRef"></dawnFlow>
  <button @click="backCenter">返回画布中心位置</button>
</template>
<script lang="ts" setup>
import { ref } from "vue";

const dawnFlowRef = ref(null);

const backCenter = () => {
  dawnFlowRef.value.backCenterClick();
};
</script>

撤销上一步操作

• 方法名称：revokeClick
• 作用：撤销上一步操作
• 类型：Function
• 默认值：() => {}

示例

<template>
  <dawnFlow ref="dawnFlowRef"></dawnFlow>
  <button @click="revoke">撤销上一步操作</button>
</template>
<script lang="ts" setup>
import { ref } from "vue";

const dawnFlowRef = ref(null);

const revoke = () => {
  dawnFlowRef.value.revokeClick();
};
</script>

模式切换

• 方法名称：setPreviewState
• 作用：切换模式，可切换为编辑模式和预览模式
• 类型：Function
• 默认值：(boolean) => {}

示例

<template>
  <dawnFlow ref="dawnFlowRef"></dawnFlow>
  <button @click="switchPreviewState">切换模式</button>
</template>
<script lang="ts" setup>
import { ref } from "vue";

const dawnFlowRef = ref(null);

const switchPreviewState = (isPreview) => {
  dawnFlowRef.value.setPreviewState(isPreview);
};
</script>