From b8080754b3f270bdf125310ef5fe06dd014428b8 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E8=B0=A8=E6=AC=A3?= Date: Tue, 27 Aug 2024 23:50:03 +0800 Subject: [PATCH 1/3] chore: Update .gitignore to exclude /web/yarn.lock --- .gitignore | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/.gitignore b/.gitignore index 0d92d4515..a3714cf8e 100644 --- a/.gitignore +++ b/.gitignore @@ -158,6 +158,7 @@ thirdparty #web # dependencies /web/node_modules +/web/yarn.lock .idea # next.js @@ -171,7 +172,6 @@ thirdparty /web/npm-debug.log* /web/yarn-debug.log* /web/yarn-error.log* -/web/yarn.lock # local env files /web/.env.prod From 32d611be852c6c657d5a6443b4befa0b365a50fa Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E8=B0=A8=E6=AC=A3?= Date: Wed, 28 Aug 2024 00:24:05 +0800 Subject: [PATCH 2/3] fix: Fix position offset while drag node on canvas --- web/components/flow/add-nodes-sider.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/web/components/flow/add-nodes-sider.tsx b/web/components/flow/add-nodes-sider.tsx index 803f1bf90..cfb0c6350 100644 --- a/web/components/flow/add-nodes-sider.tsx +++ b/web/components/flow/add-nodes-sider.tsx @@ -183,7 +183,7 @@ const AddNodesSider: React.FC = () => { return ( Date: Wed, 28 Aug 2024 00:24:18 +0800 Subject: [PATCH 3/3] fix: Fix position offset while dragging nodes on canvas --- web/pages/construct/flow/canvas/index.tsx | 131 +++++++++++----------- 1 file changed, 66 insertions(+), 65 deletions(-) diff --git a/web/pages/construct/flow/canvas/index.tsx b/web/pages/construct/flow/canvas/index.tsx index 577626070..6a50a12f5 100644 --- a/web/pages/construct/flow/canvas/index.tsx +++ b/web/pages/construct/flow/canvas/index.tsx @@ -1,31 +1,31 @@ -import { apiInterceptors, getFlowById } from "@/client/api"; -import MuiLoading from "@/components/common/loading"; -import AddNodes from "@/components/flow/add-nodes"; -import AddNodesSider from "@/components/flow/add-nodes-sider"; -import ButtonEdge from "@/components/flow/button-edge"; -import CanvasNode from "@/components/flow/canvas-node"; -import { IFlowData, IFlowUpdateParam } from "@/types/flow"; +import { apiInterceptors, getFlowById } from '@/client/api'; +import MuiLoading from '@/components/common/loading'; +import AddNodes from '@/components/flow/add-nodes'; +import AddNodesSider from '@/components/flow/add-nodes-sider'; +import ButtonEdge from '@/components/flow/button-edge'; +import CanvasNode from '@/components/flow/canvas-node'; +import { IFlowData, IFlowUpdateParam } from '@/types/flow'; import { checkFlowDataRequied, getUniqueNodeId, mapUnderlineToHump, -} from "@/utils/flow"; +} from '@/utils/flow'; import { ExportOutlined, FrownOutlined, ImportOutlined, SaveOutlined, -} from "@ant-design/icons"; -import { Divider, Space, Tooltip, message, notification } from "antd"; -import { useSearchParams } from "next/navigation"; +} from '@ant-design/icons'; +import { Divider, Space, Tooltip, message, notification } from 'antd'; +import { useSearchParams } from 'next/navigation'; import React, { DragEvent, useCallback, useEffect, useRef, useState, -} from "react"; -import { useTranslation } from "react-i18next"; +} from 'react'; +import { useTranslation } from 'react-i18next'; import ReactFlow, { Background, Connection, @@ -36,13 +36,13 @@ import ReactFlow, { useNodesState, useReactFlow, Node, -} from "reactflow"; -import "reactflow/dist/style.css"; +} from 'reactflow'; +import 'reactflow/dist/style.css'; import { SaveFlowModal, ExportFlowModal, ImportFlowModal, -} from "@/components/flow/canvas-modal"; +} from '@/components/flow/canvas-modal'; interface Props { // Define your component props here @@ -54,7 +54,7 @@ const Canvas: React.FC = () => { const { t } = useTranslation(); const searchParams = useSearchParams(); - const id = searchParams?.get("id") || ""; + const id = searchParams?.get('id') || ''; const reactFlow = useReactFlow(); const [loading, setLoading] = useState(false); @@ -87,10 +87,10 @@ const Canvas: React.FC = () => { event.returnValue = message; }; - window.addEventListener("beforeunload", handleBeforeUnload); + window.addEventListener('beforeunload', handleBeforeUnload); return () => { - window.removeEventListener("beforeunload", handleBeforeUnload); + window.removeEventListener('beforeunload', handleBeforeUnload); }; }, []); @@ -116,7 +116,7 @@ const Canvas: React.FC = () => { function onConnect(connection: Connection) { const newEdge = { ...connection, - type: "buttonedge", + type: 'buttonedge', id: `${connection.source}|${connection.target}`, }; setEdges((eds) => addEdge(newEdge, eds)); @@ -126,13 +126,18 @@ const Canvas: React.FC = () => { (event: DragEvent) => { event.preventDefault(); const reactFlowBounds = reactFlowWrapper.current!.getBoundingClientRect(); - let nodeStr = event.dataTransfer.getData("application/reactflow"); - if (!nodeStr || typeof nodeStr === "undefined") { + const sidebarWidth = ( + document.getElementsByClassName('ant-layout-sider')?.[0] as HTMLElement + )?.offsetWidth; // get sidebar width + + let nodeStr = event.dataTransfer.getData('application/reactflow'); + if (!nodeStr || typeof nodeStr === 'undefined') { return; } + const nodeData = JSON.parse(nodeStr); const position = reactFlow.screenToFlowPosition({ - x: event.clientX - reactFlowBounds.left, + x: event.clientX - reactFlowBounds.left + sidebarWidth, y: event.clientY - reactFlowBounds.top, }); const nodeId = getUniqueNodeId(nodeData, reactFlow.getNodes()); @@ -140,7 +145,7 @@ const Canvas: React.FC = () => { const newNode = { id: nodeId, position, - type: "customNode", + type: 'customNode', data: nodeData, }; setNodes((nds) => @@ -165,7 +170,7 @@ const Canvas: React.FC = () => { const onDragOver = useCallback((event: DragEvent) => { event.preventDefault(); - event.dataTransfer.dropEffect = "move"; + event.dataTransfer.dropEffect = 'move'; }, []); function onSave() { @@ -189,9 +194,9 @@ const Canvas: React.FC = () => { }) ); return notification.error({ - message: "Error", + message: 'Error', description: message, - icon: , + icon: , }); } setIsSaveFlowModalOpen(true); @@ -205,53 +210,49 @@ const Canvas: React.FC = () => { setIsImportFlowModalOpen(true); } + const getButtonList = () => { + const buttonList = [ + { + title: t('Import'), + icon: , + }, + { + title: t('save'), + icon: , + }, + ]; + + if (id !== '') { + buttonList.unshift({ + title: t('Export'), + icon: , + }); + } + + return buttonList; + }; + return ( <> -
+
-
- - {[ - { - title: t("Import"), - icon: ( - - ), - }, - (id !== '' && { - title: t("Export"), - icon: ( - - ) - } - ), - { - title: t("save"), - icon: ( - - ), - }, - ].map(({ title, icon }) => ( +
+ + {getButtonList().map(({ title, icon }) => ( {icon} ))} - + -
+
= () => { onDragOver={onDragOver} minZoom={0.1} fitView - deleteKeyCode={["Backspace", "Delete"]} + deleteKeyCode={['Backspace', 'Delete']} > - + {/* */}
@@ -310,4 +311,4 @@ export default function CanvasWrapper() { ); -} \ No newline at end of file +}