#448 Size calculations

src/diagrams/c4/c4Renderer.js

@@ -6,7 +6,8 @@ import common from '../common/common';
 import c4Db from './c4Db';
 import * as configApi from '../../config';
 import assignWithDepth from '../../assignWithDepth';
-import { wrapLabel, calculateTextWidth, calculateTextHeight, configureSvgSize } from '../../utils';
+import { wrapLabel, calculateTextWidth, calculateTextHeight } from '../../utils';
+import { configureSvgSize } from '../../setupGraphViewbox';
 import addSVGAccessibilityFields from '../../accessibility';
 
 let globalBoundaryMaxX = 0,

src/diagrams/class/classRenderer-v2.js

@@ -5,7 +5,8 @@ import { getConfig } from '../../config';
 import { render } from '../../dagre-wrapper/index.js';
 // import addHtmlLabel from 'dagre-d3/lib/label/add-html-label.js';
 import { curveLinear } from 'd3';
-import { interpolateToCurve, getStylesFromArray, setupGraphViewbox } from '../../utils';
+import { interpolateToCurve, getStylesFromArray } from '../../utils';
+import { setupGraphViewbox } from '../../setupGraphViewbox';
 import common from '../common/common';
 import addSVGAccessibilityFields from '../../accessibility';
 

src/diagrams/class/classRenderer.js

@@ -3,7 +3,7 @@ import dagre from 'dagre';
 import graphlib from 'graphlib';
 import { log } from '../../logger';
 import svgDraw from './svgDraw';
-import { configureSvgSize } from '../../utils';
+import { configureSvgSize } from '../../setupGraphViewbox';
 import { getConfig } from '../../config';
 import addSVGAccessibilityFields from '../../accessibility';
 

src/diagrams/er/erRenderer.js

@@ -6,7 +6,7 @@ import dagre from 'dagre';
 import { getConfig } from '../../config';
 import { log } from '../../logger';
 import erMarkers from './erMarkers';
-import { configureSvgSize } from '../../utils';
+import { configureSvgSize } from '../../setupGraphViewbox';
 import addSVGAccessibilityFields from '../../accessibility';
 import { parseGenericTypes } from '../common/common';
 

src/diagrams/flowchart/flowRenderer-v2.js

@@ -9,7 +9,8 @@ import { render } from '../../dagre-wrapper/index.js';
 import addHtmlLabel from 'dagre-d3/lib/label/add-html-label.js';
 import { log } from '../../logger';
 import common, { evaluate } from '../common/common';
-import { interpolateToCurve, getStylesFromArray, setupGraphViewbox } from '../../utils';
+import { interpolateToCurve, getStylesFromArray } from '../../utils';
+import { setupGraphViewbox } from '../../setupGraphViewbox';
 import addSVGAccessibilityFields from '../../accessibility';
 
 const conf = {};

src/diagrams/flowchart/flowRenderer.js

@@ -5,7 +5,8 @@ import dagreD3 from 'dagre-d3';
 import addHtmlLabel from 'dagre-d3/lib/label/add-html-label.js';
 import { log } from '../../logger';
 import common, { evaluate } from '../common/common';
-import { interpolateToCurve, getStylesFromArray, setupGraphViewbox } from '../../utils';
+import { interpolateToCurve, getStylesFromArray } from '../../utils';
+import { setupGraphViewbox } from '../../setupGraphViewbox';
 import flowChartShapes from './flowChartShapes';
 import addSVGAccessibilityFields from '../../accessibility';
 

src/diagrams/gantt/ganttRenderer.js

@@ -13,7 +13,7 @@ import {
 } from 'd3';
 import common from '../common/common';
 import { getConfig } from '../../config';
-import { configureSvgSize } from '../../utils';
+import { configureSvgSize } from '../../setupGraphViewbox';
 import addSVGAccessibilityFields from '../../accessibility';
 
 export const setConf = function () {

src/diagrams/git/gitGraphRenderer.js

@@ -1,5 +1,5 @@
 import { select } from 'd3';
-import { configureSvgSize } from '../../utils';
+import { configureSvgSize } from '../../setupGraphViewbox';
 import { log } from '../../logger';
 import { getConfig } from '../../config';
 import addSVGAccessibilityFields from '../../accessibility';

src/diagrams/mindmap/mindmapRenderer.js

@@ -5,6 +5,7 @@ import svgDraw from './svgDraw';
 import { BoundingBox, Layout, Tree } from 'non-layered-tidy-tree-layout';
 import clone from 'fast-clone';
 import db from './mindmapDb';
+
 /**
  * @param {any} svg The svg element to draw the diagram onto
  * @param {object} mindmap The maindmap data and hierarchy

src/diagrams/pie/pieRenderer.js

@@ -1,7 +1,7 @@
 /** Created by AshishJ on 11-09-2019. */
 import { select, scaleOrdinal, pie as d3pie, arc } from 'd3';
 import { log } from '../../logger';
-import { configureSvgSize } from '../../utils';
+import { configureSvgSize } from '../../setupGraphViewbox';
 import * as configApi from '../../config';
 import addSVGAccessibilityFields from '../../accessibility';
 

src/diagrams/requirement/requirementRenderer.js

@@ -2,7 +2,7 @@ import { line, select } from 'd3';
 import dagre from 'dagre';
 import graphlib from 'graphlib';
 import { log } from '../../logger';
-import { configureSvgSize } from '../../utils';
+import { configureSvgSize } from '../../setupGraphViewbox';
 import common from '../common/common';
 import markers from './requirementMarkers';
 import { getConfig } from '../../config';

src/diagrams/sequence/sequenceRenderer.js

@@ -6,7 +6,8 @@ import common from '../common/common';
 // import sequenceDb from './sequenceDb';
 import * as configApi from '../../config';
 import assignWithDepth from '../../assignWithDepth';
-import utils, { configureSvgSize } from '../../utils';
+import utils from '../../utils';
+import { configureSvgSize } from '../../setupGraphViewbox';
 import addSVGAccessibilityFields from '../../accessibility';
 
 let conf = {};

src/diagrams/state/stateRenderer-v2.js

@@ -3,7 +3,7 @@ import { select } from 'd3';
 import { getConfig } from '../../config';
 import { render } from '../../dagre-wrapper/index.js';
 import { log } from '../../logger';
-import { configureSvgSize } from '../../utils';
+import { configureSvgSize } from '../../setupGraphViewbox';
 import common from '../common/common';
 import addSVGAccessibilityFields from '../../accessibility';
 

src/diagrams/state/stateRenderer.js

@@ -5,7 +5,7 @@ import { log } from '../../logger';
 import common from '../common/common';
 import { drawState, addTitleAndBox, drawEdge } from './shapes';
 import { getConfig } from '../../config';
-import { configureSvgSize } from '../../utils';
+import { configureSvgSize } from '../../setupGraphViewbox';
 import addSVGAccessibilityFields from '../../accessibility';
 
 // TODO Move conf object to main conf in mermaidAPI

src/diagrams/user-journey/journeyRenderer.js

@@ -1,7 +1,7 @@
 import { select } from 'd3';
 import svgDraw from './svgDraw';
 import { getConfig } from '../../config';
-import { configureSvgSize } from '../../utils';
+import { configureSvgSize } from '../../setupGraphViewbox';
 import addSVGAccessibilityFields from '../../accessibility';
 
 export const setConf = function (cnf) {

src/setupGraphViewbox.js

@@ -22,7 +22,6 @@ const d3Attrs = function (d3Elem, attrs) {
  */
 export const calculateSvgSizeAttrs = function (height, width, useMaxWidth) {
   let attrs = new Map();
-  attrs.set('height', height);
   if (useMaxWidth) {
     attrs.set('width', '100%');
     attrs.set('style', `max-width: ${width}px;`);

src/utils.js

@@ -732,92 +732,6 @@ const d3Attrs = function (d3Elem, attrs) {
   }
 };
 
-/**
- * Gives attributes for an SVG's size given arguments
- *
- * @param {number} height The height of the SVG
- * @param {number} width The width of the SVG
- * @param {boolean} useMaxWidth Whether or not to use max-width and set width to 100%
- * @returns {Map<'height' | 'width' | 'style', string>} Attributes for the SVG
- */
-export const calculateSvgSizeAttrs = function (height, width, useMaxWidth) {
-  let attrs = new Map();
-  // attrs.set('height', height);
-  if (useMaxWidth) {
-    attrs.set('width', '100%');
-    attrs.set('style', `max-width: ${width}px;`);
-  } else {
-    attrs.set('width', width);
-  }
-  return attrs;
-};
-
-/**
- * Applies attributes from `calculateSvgSizeAttrs`
- *
- * @param {SVGSVGElement} svgElem The SVG Element to configure
- * @param {number} height The height of the SVG
- * @param {number} width The width of the SVG
- * @param {boolean} useMaxWidth Whether or not to use max-width and set width to 100%
- */
-export const configureSvgSize = function (svgElem, height, width, useMaxWidth) {
-  const attrs = calculateSvgSizeAttrs(height, 1 * 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;
-
-  log.info(`SVG bounds: ${sWidth}x${sHeight}`, svgBounds);
-
-  let width = graph._label.width;
-  let height = graph._label.height;
-  log.info(`Graph bounds: ${width}x${height}`, graph);
-
-  // let tx = 0;
-  // let ty = 0;
-  // if (sWidth > width) {
-  //   tx = (sWidth - width) / 2 + padding;
-  width = sWidth + padding * 2;
-  // } else {
-  //   if (Math.abs(sWidth - width) >= 2 * padding + 1) {
-  //     width = width - padding;
-  //   }
-  // }
-  // if (sHeight > height) {
-  //   ty = (sHeight - height) / 2 + padding;
-  height = sHeight + padding * 2;
-  // }
-
-  // width =
-  log.info(`Calculated bounds: ${width}x${height}`);
-  configureSvgSize(svgElem, height, width, useMaxWidth);
-
-  // Ensure the viewBox includes the whole svgBounds area with extra space for padding
-  // const vBox = `0 0 ${width} ${height}`;
-  const vBox = `${svgBounds.x - padding} ${svgBounds.y - padding} ${
-    svgBounds.width + 2 * padding
-  } ${svgBounds.height + 2 * padding}`;
-  log.info(
-    'Graph.label',
-    graph._label,
-    'swidth',
-    sWidth,
-    'sheight',
-    sHeight,
-    'width',
-    width,
-    'height',
-    height,
-
-    'vBox',
-    vBox
-  );
-  svgElem.attr('viewBox', vBox);
-  // svgElem.select('g').attr('transform', `translate(${tx}, ${ty})`);
-};
-
 export const initIdGenerator = class iterator {
   constructor(deterministic, seed) {
     this.deterministic = deterministic;
@@ -943,9 +857,6 @@ export default {
   calculateTextHeight,
   calculateTextWidth,
   calculateTextDimensions,
-  calculateSvgSizeAttrs,
-  configureSvgSize,
-  setupGraphViewbox,
   detectInit,
   detectDirective,
   isSubstringInArray,

yarn.lock

@@ -5036,10 +5036,10 @@ domhandler@^5.0.1, domhandler@^5.0.2:
   dependencies:
     domelementtype "^2.3.0"
 
-dompurify@2.4.0:
-  version "2.4.0"
-  resolved "https://registry.yarnpkg.com/dompurify/-/dompurify-2.4.0.tgz#c9c88390f024c2823332615c9e20a453cf3825dd"
-  integrity sha512-Be9tbQMZds4a3C6xTmz68NlMfeONA//4dOavl/1rNw50E+/QO0KVpbcU0PcaW0nsQxurXls9ZocqFxk8R2mWEA==
+dompurify@2.3.10:
+  version "2.3.10"
+  resolved "https://registry.yarnpkg.com/dompurify/-/dompurify-2.3.10.tgz#901f7390ffe16a91a5a556b94043314cd4850385"
+  integrity sha512-o7Fg/AgC7p/XpKjf/+RC3Ok6k4St5F7Q6q6+Nnm3p2zGWioAY6dh0CbbuwOhH2UcSzKsdniE/YnE2/92JcsA+g==
 
 domutils@^3.0.1:
   version "3.0.1"