From 68f8831a5fb262562bf8982b2ca08158b18fb6fb Mon Sep 17 00:00:00 2001 From: Javier Lopez de Ancos Date: Sat, 10 Dec 2022 21:00:43 +0100 Subject: [PATCH 1/4] fix: (Visualization): center initial node --- src/components/Visualization.tsx | 49 ++++++++++++++++++++++++++++---- 1 file changed, 43 insertions(+), 6 deletions(-) diff --git a/src/components/Visualization.tsx b/src/components/Visualization.tsx index 6f3a982fd..e025e7c72 100644 --- a/src/components/Visualization.tsx +++ b/src/components/Visualization.tsx @@ -15,6 +15,7 @@ import { findStepIdxWithUUID, getLayoutedElements, } from '@kaoto/services'; +import { containsAddStepPlaceholder } from '@kaoto/services'; import { useIntegrationJsonStore, useVisualizationStore } from '@kaoto/store'; import { IStepProps, IViewData, IVizStepPropsEdge, IVizStepNode } from '@kaoto/types'; import { useEffect, useMemo, useRef, useState } from 'react'; @@ -29,13 +30,14 @@ const Visualization = ({ toggleCatalog }: IVisualization) => { // `nodes` is an array of UI-specific objects that represent // the Integration.Steps model visually, while `edges` connect them const defaultViewport: Viewport = { - x: window.innerWidth / 2, - y: window.innerHeight / 2 - 160, + x: 0, + y: 0, zoom: 1.2, }; + const [isPanelExpanded, setIsPanelExpanded] = useState(false); const [, setReactFlowInstance] = useState(null); - const reactFlowWrapper = useRef(null); + const reactFlowWrapperRef = useRef(null); const [selectedStep, setSelectedStep] = useState({ maxBranches: 0, minBranches: 0, @@ -50,7 +52,42 @@ const Visualization = ({ toggleCatalog }: IVisualization) => { const { nodes, setNodes, onNodesChange, edges, setEdges, onEdgesChange, deleteNode } = useVisualizationStore(); - // initial loading of visualization steps + /** + * Center first node if it is the initial `add a step ` + * node into react flow viewport. + */ + useEffect(() => { + const isAddStepPlaceholder = containsAddStepPlaceholder(nodes); + + if (isAddStepPlaceholder) { + const reactFlowWrapper = reactFlowWrapperRef?.current as any; + + let reactFlowWrapperRect; + + if (reactFlowWrapper) { + reactFlowWrapperRect = reactFlowWrapper?.getBoundingClientRect(); + } + + if ( + nodes[0]?.width && + nodes[0]?.height && + reactFlowWrapperRect?.width && + reactFlowWrapperRect?.height + ) { + const firstNodeWidth = nodes[0].width; + const firstNodeHeight = nodes[0].height; + const reactFlowWrapperRectWidth = reactFlowWrapperRect.width; + const reactFlowWrapperRectHeight = reactFlowWrapperRect.height; + + nodes[0].position.x = (reactFlowWrapperRectWidth / 2 - firstNodeWidth / 2) * 0.8; + nodes[0].position.y = (reactFlowWrapperRectHeight / 2 - firstNodeHeight / 2) * 0.8; + } + } + }); + + /** + * Initial loading of visualization steps + */ useEffect(() => { const { stepNodes, stepEdges } = buildNodesAndEdges(integrationJson.steps); @@ -225,7 +262,7 @@ const Visualization = ({ toggleCatalog }: IVisualization) => {
{ Date: Sat, 10 Dec 2022 22:27:23 +0100 Subject: [PATCH 2/4] fix: (Visualization): fix remove condition is redundant with previously checked one --- src/components/Visualization.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/Visualization.tsx b/src/components/Visualization.tsx index e025e7c72..e29215c86 100644 --- a/src/components/Visualization.tsx +++ b/src/components/Visualization.tsx @@ -65,7 +65,7 @@ const Visualization = ({ toggleCatalog }: IVisualization) => { let reactFlowWrapperRect; if (reactFlowWrapper) { - reactFlowWrapperRect = reactFlowWrapper?.getBoundingClientRect(); + reactFlowWrapperRect = reactFlowWrapper.getBoundingClientRect(); } if ( From c26935b3f32eae06761f20d7fbaa3ddbf823d7a1 Mon Sep 17 00:00:00 2001 From: Javier Lopez de Ancos Date: Mon, 12 Dec 2022 10:39:11 +0100 Subject: [PATCH 3/4] fix: (Visualization): remove duplicated import path --- src/components/Visualization.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/Visualization.tsx b/src/components/Visualization.tsx index e29215c86..99fa7ff81 100644 --- a/src/components/Visualization.tsx +++ b/src/components/Visualization.tsx @@ -14,8 +14,8 @@ import { buildNodesFromSteps, findStepIdxWithUUID, getLayoutedElements, + containsAddStepPlaceholder, } from '@kaoto/services'; -import { containsAddStepPlaceholder } from '@kaoto/services'; import { useIntegrationJsonStore, useVisualizationStore } from '@kaoto/store'; import { IStepProps, IViewData, IVizStepPropsEdge, IVizStepNode } from '@kaoto/types'; import { useEffect, useMemo, useRef, useState } from 'react'; From 8944a4ab81093aeebcad69383b20a16c99c61fcb Mon Sep 17 00:00:00 2001 From: Javier Lopez de Ancos Date: Mon, 12 Dec 2022 10:44:59 +0100 Subject: [PATCH 4/4] fix: set ref with an element type defined --- src/components/Visualization.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/components/Visualization.tsx b/src/components/Visualization.tsx index 99fa7ff81..e82074d9c 100644 --- a/src/components/Visualization.tsx +++ b/src/components/Visualization.tsx @@ -37,7 +37,7 @@ const Visualization = ({ toggleCatalog }: IVisualization) => { const [isPanelExpanded, setIsPanelExpanded] = useState(false); const [, setReactFlowInstance] = useState(null); - const reactFlowWrapperRef = useRef(null); + const reactFlowWrapperRef = useRef(null); const [selectedStep, setSelectedStep] = useState({ maxBranches: 0, minBranches: 0, @@ -60,7 +60,7 @@ const Visualization = ({ toggleCatalog }: IVisualization) => { const isAddStepPlaceholder = containsAddStepPlaceholder(nodes); if (isAddStepPlaceholder) { - const reactFlowWrapper = reactFlowWrapperRef?.current as any; + const reactFlowWrapper = reactFlowWrapperRef.current; let reactFlowWrapperRect;