diff --git a/frontend/src/components/resourceMap/GraphRenderer.tsx b/frontend/src/components/resourceMap/GraphRenderer.tsx index 7226e705a5..48b6d00fd4 100644 --- a/frontend/src/components/resourceMap/GraphRenderer.tsx +++ b/frontend/src/components/resourceMap/GraphRenderer.tsx @@ -15,6 +15,7 @@ import React from 'react'; import { useTranslation } from 'react-i18next'; import { Loader } from '../common'; import { KubeRelationEdge } from './edges/KubeRelationEdge'; +import { maxZoom, minZoom } from './graphConstants'; import { GraphControls } from './GraphControls'; import { GroupNodeComponent } from './nodes/GroupNode'; import { KubeGroupNodeComponent } from './nodes/KubeGroupNode'; @@ -81,8 +82,8 @@ export function GraphRenderer({ onBackgroundClick?.(); } }} - minZoom={0.1} - maxZoom={2.0} + minZoom={minZoom} + maxZoom={maxZoom} connectionMode={ConnectionMode.Loose} > diff --git a/frontend/src/components/resourceMap/GraphView.tsx b/frontend/src/components/resourceMap/GraphView.tsx index 97dd08c15e..a34aba3060 100644 --- a/frontend/src/components/resourceMap/GraphView.tsx +++ b/frontend/src/components/resourceMap/GraphView.tsx @@ -38,6 +38,7 @@ import { } from './graph/graphGrouping'; import { applyGraphLayout } from './graph/graphLayout'; import { GraphNode, GraphSource, GroupNode, isGroup, KubeObjectNode } from './graph/graphModel'; +import { viewportPaddingPx } from './graphConstants'; import { GraphControlButton } from './GraphControls'; import { GraphRenderer } from './GraphRenderer'; import { NodeHighlight, useNodeHighlight } from './NodeHighlight'; @@ -162,16 +163,14 @@ function GraphViewContent({ (nodes: Node[]) => { const bounds = getNodesBounds(nodes); - const defaultViewportPaddingPx = 50; - - const topLeftOrigin = { x: defaultViewportPaddingPx, y: defaultViewportPaddingPx }; + const topLeftOrigin = { x: viewportPaddingPx, y: viewportPaddingPx }; const centerOrigin = { x: reactFlowWidth / 2 - bounds.width / 2, y: reactFlowHeight / 2 - bounds.height / 2, }; - const xFits = bounds.width + defaultViewportPaddingPx * 2 <= reactFlowWidth; - const yFits = bounds.height + defaultViewportPaddingPx * 2 <= reactFlowHeight; + const xFits = bounds.width + viewportPaddingPx * 2 <= reactFlowWidth; + const yFits = bounds.height + viewportPaddingPx * 2 <= reactFlowHeight; const defaultZoomViewport = { x: xFits ? centerOrigin.x : topLeftOrigin.x, diff --git a/frontend/src/components/resourceMap/graphConstants.ts b/frontend/src/components/resourceMap/graphConstants.ts new file mode 100644 index 0000000000..aa34867dd7 --- /dev/null +++ b/frontend/src/components/resourceMap/graphConstants.ts @@ -0,0 +1,3 @@ +export const minZoom = 0.1; +export const maxZoom = 2.0; +export const viewportPaddingPx = 50;