<template> <VueFlow :nodes="nodes" :edges="edges" :default-viewport="{ zoom: 0.75, position: { x: 0, y: 0 } }" :min-zoom="0.2" :max-zoom="4" :default-edge-options="{ type: 'smoothstep' }" @connect="nodeConnect" @node-drag-stop="fnMoveNode" @edge-double-click="fnDeleteEdge" @node-double-click="fnViewDiagramData"> <template #node-custom="node"> <CustomNode :node="node" @openSetup="fnOpenSetupModal" @removeNode="fnDeleteNode" /> </template> <MiniMap /> <Controls /> <Background pattern-color="#aaa" :gap="8" /> </VueFlow> <!-- 노드 셋업 모달 --> <DatabaseConnection v-if="selectNode.node_type === 'DB_READ'" :openPopup="isSetupModalOpen" :jobItem="selectNode" @closePopup="fnCloseSetupModal" @saveNodeData="fnUpdateSetup" /> <apiConnection v-if="selectNode.node_type === 'API_READ'" :openPopup="isSetupModalOpen" :jobItem="selectNode" @fnCloseModal="fnCloseSetupModal" @fnSaveSetup="fnUpdateSetup" /> <fileSelectDiagram v-if="selectNode.node_type === 'FILE_READ'" :openPopup="isSetupModalOpen" :jobItem="selectNode" :mode="'fileRead'" @closePopup="fnCloseSetupModal" @saveNodeData="fnUpdateSetup" /> <datasetSelecter v-if="selectNode.node_type === 'DATASET_READ'" :openPopup="isSetupModalOpen" :jobItem="selectNode" @closePopup="fnCloseSetupModal" @saveNodeData="fnUpdateSetup" /> <DataFilter v-if="selectNode.node_type === 'DATA_FILTER'" :openPopup="isSetupModalOpen" :jobItem="selectNode" :nodes="nodes" :edges="edges" @fnCloseModal="fnCloseSetupModal" @fnSaveSetup="fnUpdateSetup" /> <datasetUpdate v-if="selectNode.node_type === 'DATASET_UPDATE'" :openPopup="isSetupModalOpen" :jobItem="selectNode" :nodes="nodes" :edges="edges" @fnCloseModal="fnCloseSetupModal" @fnSaveSetup="fnUpdateSetup" /> <EhojoConnection v-if="selectNode.node_type === 'EHOJO_READ'" :openPopup="isSetupModalOpen" :jobItem="selectNode" :nodes="nodes" :edges="edges" @fnCloseModal="fnCloseSetupModal" @fnSaveSetup="fnUpdateSetup" /> </template> <script> import CustomNode from "./CustomNode.vue"; // vue-flow api (삭제시 동작 안함) import { Background } from "@vue-flow/background"; import { Panel, VueFlow } from "@vue-flow/core"; import { MiniMap } from "@vue-flow/minimap"; import { Controls } from "@vue-flow/controls"; // import DatabaseConnection from "../../component/connection/itm/databaseConnection.vue"; import apiConnection from "../../component/connection/itm/apiConnection.vue"; import datasetSelecter from "../../component/connection/itm/datasetSelecter.vue"; import datasetUpdate from "../../component/connection/itm/datasetUpdate.vue"; import fileSelectDiagram from "../../component/connection/itm/fileSelectDiagram.vue"; import DataFilter from "../../component/connection/itm/dataFilter.vue"; import EhojoConnection from "../../component/connection/EhojoConnection.vue"; export default { components: { CustomNode, // vue-flow api (삭제시 동작 안함) Background, Panel, VueFlow, MiniMap, Controls, // DatabaseConnection, apiConnection, datasetSelecter, datasetUpdate, fileSelectDiagram, DataFilter, EhojoConnection }, props: { nodes: Array, edges: Array, }, data() { return { // 다이어그램 로그 화면 여부(true:열림/false:닫힘) isLogListView: false, // 노드 추가 isAddModalOpen: false, // 노드 추가 모달 열림 여부(true:열림/false:닫힘) originalNodeTypeList: [], nodeTypeList: [], selectItem: "DB_READ", // 노드 추가값 (기본:DB_READ) // 노드 수정 isSetupModalOpen: false, // 노드 설정 모달 열림 여부(true:열림/false:닫힘) selectNode: {}, // 선택된 노드 }; }, methods: { // 노드 위치 변경 fnMoveNode(moveNode) { let nodeId = moveNode.node.id; for (let node of this.nodes) { if (node.id == nodeId) { node.position.x = moveNode.node.position.x; node.center_x = moveNode.node.position.x; node.position.y = moveNode.node.position.y; node.center_y = moveNode.node.position.y; } } }, // 선을 연결하면 뜨는 이벤트 nodeConnect(event) { let edge = {}; edge.id = Date.now().toString(); edge.edge_id = edge.id; edge.source = event.source; // 시작노드 edge.target = event.target; // 끝 노드 this.edges.push(edge); }, // 엣지 삭제 fnDeleteEdge(event) { let edgeId = event.edge.id; let edges = this.edges.filter((edge) => edge.id !== edgeId); this.$emit("changeDiagram", this.nodes, edges); }, // 노드 설정 모달 열기 fnOpenSetupModal(nodeId) { for (let node of this.nodes) { if (node.id == nodeId) { this.selectNode = node; } } this.isSetupModalOpen = true; }, // 노드 설정 저장 후 닫기 fnUpdateSetup(jobItem) { for (let node of this.nodes) { if (node.id == jobItem.id) { node = jobItem; } } this.fnCloseSetupModal(); }, // 노드 설정 모달 닫기 fnCloseSetupModal() { this.selectNode = {}; // 초기화 this.isSetupModalOpen = false; }, // 노드 삭제 fnDeleteNode(nodeId) { let nodes = this.nodes.filter((node) => node.id !== nodeId); let edges = this.edges.filter( (edge) => edge.source !== nodeId && edge.target !== nodeId ); this.$emit("changeDiagram", nodes, edges); }, }, }; </script>