WorkflowEditor.vue 6.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241
  1. <template>
  2. <vue-flow
  3. :id="props.id"
  4. :class="{ disabled: isDisabled }"
  5. :default-edge-options="{
  6. updatable: true,
  7. selectable: true,
  8. type: settings.lineType,
  9. markerEnd: settings.arrow ? MarkerType.ArrowClosed : '',
  10. }"
  11. >
  12. <Background />
  13. <MiniMap v-if="minimap" :node-class-name="minimapNodeClassName" />
  14. <div
  15. v-if="editorControls"
  16. class="flex items-end absolute p-4 left-0 bottom-0 z-10"
  17. >
  18. <slot name="controls-prepend" />
  19. <button
  20. v-tooltip.group="t('workflow.editor.resetZoom')"
  21. class="control-button mr-2"
  22. @click="editor.fitView()"
  23. >
  24. <v-remixicon name="riFullscreenLine" />
  25. </button>
  26. <div class="rounded-lg bg-white dark:bg-gray-800 inline-block">
  27. <button
  28. v-tooltip.group="t('workflow.editor.zoomOut')"
  29. class="p-2 rounded-lg relative z-10"
  30. @click="editor.zoomOut()"
  31. >
  32. <v-remixicon name="riSubtractLine" />
  33. </button>
  34. <hr class="h-6 border-r inline-block" />
  35. <button
  36. v-tooltip.group="t('workflow.editor.zoomIn')"
  37. class="p-2 rounded-lg"
  38. @click="editor.zoomIn()"
  39. >
  40. <v-remixicon name="riAddLine" />
  41. </button>
  42. </div>
  43. <editor-search-blocks :editor="editor" />
  44. <slot name="controls-append" />
  45. </div>
  46. <template v-for="(node, name) in nodeTypes" :key="name" #[name]="nodeProps">
  47. <component
  48. :is="node"
  49. v-bind="nodeProps"
  50. @delete="deleteBlock"
  51. @edit="editBlock(nodeProps, $event)"
  52. @update="updateBlockData(nodeProps.id, $event)"
  53. />
  54. </template>
  55. </vue-flow>
  56. </template>
  57. <script setup>
  58. import { onMounted, onBeforeUnmount, watch, computed } from 'vue';
  59. import { useI18n } from 'vue-i18n';
  60. import {
  61. VueFlow,
  62. MiniMap,
  63. Background,
  64. useVueFlow,
  65. MarkerType,
  66. } from '@braks/vue-flow';
  67. import cloneDeep from 'lodash.clonedeep';
  68. import { useStore } from '@/stores/main';
  69. import { tasks, categories } from '@/utils/shared';
  70. import EditorSearchBlocks from './editor/EditorSearchBlocks.vue';
  71. const props = defineProps({
  72. id: {
  73. type: String,
  74. default: 'editor',
  75. },
  76. data: {
  77. type: Object,
  78. default: () => ({
  79. x: 0,
  80. y: 0,
  81. zoom: 0,
  82. nodes: [],
  83. edges: [],
  84. }),
  85. },
  86. options: {
  87. type: Object,
  88. default: () => ({}),
  89. },
  90. editorControls: {
  91. type: Boolean,
  92. default: true,
  93. },
  94. minimap: {
  95. type: Boolean,
  96. default: true,
  97. },
  98. disabled: Boolean,
  99. });
  100. const emit = defineEmits(['edit', 'init', 'update:node', 'delete:node']);
  101. const fallbackBlocks = {
  102. BlockBasic: ['BlockExportData'],
  103. BlockBasicWithFallback: ['BlockWebhook'],
  104. };
  105. const isMac = navigator.appVersion.indexOf('Mac') !== -1;
  106. const blockComponents = require.context('@/components/block', false, /\.vue$/);
  107. const nodeTypes = blockComponents.keys().reduce((acc, key) => {
  108. const name = key.replace(/(.\/)|\.vue$/g, '');
  109. const component = blockComponents(key).default;
  110. if (fallbackBlocks[name]) {
  111. fallbackBlocks[name].forEach((fallbackBlock) => {
  112. acc[`node-${fallbackBlock}`] = component;
  113. });
  114. }
  115. acc[`node-${name}`] = component;
  116. return acc;
  117. }, {});
  118. const getPosition = (position) => (Array.isArray(position) ? position : [0, 0]);
  119. const { t } = useI18n();
  120. const store = useStore();
  121. const editor = useVueFlow({
  122. id: props.id,
  123. edgeUpdaterRadius: 20,
  124. deleteKeyCode: 'Delete',
  125. elevateEdgesOnSelect: true,
  126. defaultZoom: props.data?.zoom ?? 1,
  127. minZoom: store.settings.editor.minZoom,
  128. maxZoom: store.settings.editor.maxZoom,
  129. multiSelectionKeyCode: isMac ? 'Meta' : 'Control',
  130. defaultPosition: getPosition(props.data?.position),
  131. ...props.options,
  132. });
  133. editor.onConnect((params) => {
  134. params.class = `source-${params.sourceHandle} target-${params.targetHandle}`;
  135. params.updatable = true;
  136. editor.addEdges([params]);
  137. });
  138. editor.onEdgeUpdate(({ edge, connection }) => {
  139. const isBothOutput =
  140. connection.sourceHandle.includes('output') &&
  141. connection.targetHandle.includes('output');
  142. if (isBothOutput) return;
  143. Object.assign(edge, connection);
  144. });
  145. const settings = store.settings.editor;
  146. const isDisabled = computed(() => props.options.disabled ?? props.disabled);
  147. function minimapNodeClassName({ label }) {
  148. const { category } = tasks[label];
  149. const { color } = categories[category];
  150. return color;
  151. }
  152. function updateBlockData(nodeId, data = {}) {
  153. if (isDisabled.value) return;
  154. const node = editor.getNode.value(nodeId);
  155. node.data = { ...node.data, ...data };
  156. emit('update:node', node);
  157. }
  158. function editBlock({ id, label, data }, additionalData = {}) {
  159. if (isDisabled.value) return;
  160. emit('edit', {
  161. id: label,
  162. blockId: id,
  163. data: cloneDeep(data),
  164. ...additionalData,
  165. });
  166. }
  167. function deleteBlock(nodeId) {
  168. if (isDisabled.value) return;
  169. editor.removeNodes([nodeId]);
  170. emit('delete:node', nodeId);
  171. }
  172. function onMousedown(event) {
  173. if (isDisabled.value && event.shiftKey) {
  174. event.stopPropagation();
  175. event.preventDefault();
  176. }
  177. }
  178. function applyFlowData() {
  179. if (settings.snapToGrid) {
  180. editor.snapToGrid.value = true;
  181. editor.snapGrid.value = Object.values(settings.snapGrid);
  182. }
  183. editor.setNodes(props.data?.nodes || []);
  184. editor.setEdges(props.data?.edges || []);
  185. editor.setTransform({
  186. x: props.data?.x || 0,
  187. y: props.data?.y || 0,
  188. zoom: props.data?.zoom || 1,
  189. });
  190. }
  191. watch(
  192. () => props.disabled,
  193. (value) => {
  194. const keys = [
  195. 'nodesDraggable',
  196. 'edgesUpdatable',
  197. 'nodesConnectable',
  198. 'elementsSelectable',
  199. ];
  200. keys.forEach((key) => {
  201. editor[key].value = !value;
  202. });
  203. },
  204. { immediate: true }
  205. );
  206. onMounted(() => {
  207. applyFlowData();
  208. window.addEventListener('mousedown', onMousedown, true);
  209. emit('init', editor);
  210. });
  211. onBeforeUnmount(() => {
  212. window.removeEventListener('mousedown', onMousedown, true);
  213. });
  214. </script>
  215. <style>
  216. @import '@braks/vue-flow/dist/style.css';
  217. @import '@braks/vue-flow/dist/theme-default.css';
  218. .control-button {
  219. @apply p-2 rounded-lg bg-white dark:bg-gray-800 transition-colors;
  220. }
  221. </style>