diff --git a/.changeset/real-trains-visit.md b/.changeset/real-trains-visit.md new file mode 100644 index 0000000000..c229562ec4 --- /dev/null +++ b/.changeset/real-trains-visit.md @@ -0,0 +1,7 @@ +--- +'@backstage/core-components': patch +'@backstage/plugin-catalog-graph': patch +--- + +- Revert `viewbox` back to old values. +- Added `fullScreen` prop to `EntityCatalogGraphCard` diff --git a/packages/core-components/src/components/DependencyGraph/DependencyGraph.tsx b/packages/core-components/src/components/DependencyGraph/DependencyGraph.tsx index a4ef0ac682..476c458e60 100644 --- a/packages/core-components/src/components/DependencyGraph/DependencyGraph.tsx +++ b/packages/core-components/src/components/DependencyGraph/DependencyGraph.tsx @@ -533,7 +533,7 @@ export function DependencyGraph( height={graphHeight} y={maxHeight / 2 - graphHeight / 2} x={maxWidth / 2 - graphWidth / 2} - viewBox={`-25 -25 ${graphWidth + 50} ${graphHeight + 50}`} + viewBox={`0 0 ${graphWidth} ${graphHeight}`} > {graphEdges.map(e => { const edge = graph.current.edge(e) as GraphEdge; diff --git a/plugins/catalog-graph/report.api.md b/plugins/catalog-graph/report.api.md index dca431e588..d9342dbf36 100644 --- a/plugins/catalog-graph/report.api.md +++ b/plugins/catalog-graph/report.api.md @@ -197,6 +197,7 @@ export type EntityRelationsGraphProps = { renderEdge?: DependencyGraphTypes.RenderEdgeFunction; curve?: 'curveStepBefore' | 'curveMonotoneX'; showArrowHeads?: boolean; + allowFullscreen?: boolean; }; // @public diff --git a/plugins/catalog-graph/src/components/EntityRelationsGraph/EntityRelationsGraph.tsx b/plugins/catalog-graph/src/components/EntityRelationsGraph/EntityRelationsGraph.tsx index e71f928c15..b1443e8292 100644 --- a/plugins/catalog-graph/src/components/EntityRelationsGraph/EntityRelationsGraph.tsx +++ b/plugins/catalog-graph/src/components/EntityRelationsGraph/EntityRelationsGraph.tsx @@ -92,6 +92,7 @@ export type EntityRelationsGraphProps = { renderEdge?: DependencyGraphTypes.RenderEdgeFunction; curve?: 'curveStepBefore' | 'curveMonotoneX'; showArrowHeads?: boolean; + allowFullscreen?: boolean; }; /** @@ -118,6 +119,7 @@ export const EntityRelationsGraph = (props: EntityRelationsGraphProps) => { renderEdge, curve, showArrowHeads, + allowFullscreen, } = props; const theme = useTheme(); @@ -169,6 +171,7 @@ export const EntityRelationsGraph = (props: EntityRelationsGraphProps) => { zoom={zoom} curve={curve} showArrowHeads={showArrowHeads} + allowFullscreen={allowFullscreen} /> )}