src/utils.js

@@ -919,6 +919,48 @@ export const configureSvgSize = function (svgElem, height, width, useMaxWidth) {
   const attrs = calculateSvgSizeAttrs(height, width, useMaxWidth);
   d3Attrs(svgElem, attrs);
 };
+export const setupGraphViewbox = function (graph, svgElem, padding, useMaxWidth) {
+  const svgBounds = svgElem.node().getBBox();
+  const sWidth = svgBounds.width;
+  const sHeight = svgBounds.height;
+
+  let width = graph._label.width;
+  let height = graph._label.height;
+  let tx = 0;
+  let ty = 0;
+  if (sWidth > width) {
+    tx = (sWidth - width) / 2 + padding;
+    width = sWidth + padding * 2;
+  }
+  if (sHeight > height) {
+    ty = (sHeight - height) / 2 + padding;
+    height = sHeight + padding * 2;
+  }
+  configureSvgSize(svgElem, height, width, useMaxWidth);
+
+  // Ensure the viewBox includes the whole svgBounds area with extra space for padding
+  const vBox = `0 0 ${width} ${height}`;
+  log.debug(
+    'Grpah.label',
+    graph._label,
+    'swidth',
+    sWidth,
+    'sheight',
+    sHeight,
+    'width',
+    width,
+    'height',
+    height,
+    'tx',
+    tx,
+    'ty',
+    ty,
+    'vBox',
+    vBox
+  );
+  svgElem.attr('viewBox', vBox);
+  svgElem.select('g').attr('transform', `translate(${tx}, ${ty})`);
+};
 
 export const initIdGeneratior = class iterator {
   constructor(deterministic, seed) {
@@ -1018,6 +1060,7 @@ export default {
   calculateTextDimensions,
   calculateSvgSizeAttrs,
   configureSvgSize,
+  setupGraphViewbox,
   detectInit,
   detectDirective,
   detectType,