From 2968b400c49f66983e6d206959504e72aa6ae0ef Mon Sep 17 00:00:00 2001 From: Knut Sveidqvist Date: Sat, 27 Aug 2022 15:03:29 +0200 Subject: [PATCH] Updated viewBox settings --- .../rendering/flowchart-v2.spec.js | 15 +++++- cypress/platform/knsv.html | 48 ++++++++++++------- src/diagrams/flowchart/flowRenderer-v2.js | 4 +- src/utils.js | 21 +++++--- 4 files changed, 60 insertions(+), 28 deletions(-) diff --git a/cypress/integration/rendering/flowchart-v2.spec.js b/cypress/integration/rendering/flowchart-v2.spec.js index 10731de05..cc0362dd0 100644 --- a/cypress/integration/rendering/flowchart-v2.spec.js +++ b/cypress/integration/rendering/flowchart-v2.spec.js @@ -42,7 +42,7 @@ describe('Flowchart v2', () => { P3 --> P6 P1.5 --> P5 `, - { flowchart: { diagramPadding: 0 } } + {} ); }); @@ -60,7 +60,7 @@ describe('Flowchart v2', () => { C <-...-> E4 C ======> E5 `, - { flowchart: { diagramPadding: 0 } } + {} ); }); it('5: should render escaped without html labels', () => { @@ -652,4 +652,15 @@ flowchart RL { htmlLabels: true, flowchart: { htmlLabels: true }, securityLevel: 'loose' } ); }); + it('2824: Clipping of edges', () => { + imgSnapshotTest( + ` + flowchart TD + A --> B + A --> C + B --> C + `, + { htmlLabels: true, flowchart: { htmlLabels: true }, securityLevel: 'loose' } + ); + }); }); diff --git a/cypress/platform/knsv.html b/cypress/platform/knsv.html index f1420e93a..29c83ff1a 100644 --- a/cypress/platform/knsv.html +++ b/cypress/platform/knsv.html @@ -23,10 +23,12 @@ display: none; } .mermaid { - border: 1px solid purple; + } .mermaid svg { + border: 1px solid purple; /* font-size: 18px !important; */ + fontFamily: 'courier' } @@ -35,7 +37,7 @@ -
+
flowchart LR classDef aPID stroke:#4e4403,fill:#fdde29,color:#4e4403,rx:5px,ry:5px; classDef crm stroke:#333333,fill:#DCDCDC,color:#333333,rx:5px,ry:5px; @@ -54,7 +56,7 @@ flowchart LR O0 -- has type -->O2["Bug"] click O0 function "Lots of great info about Joe
Lots of great info about Joe
burt
fred";
-
+
flowchart TD subgraph test direction TB @@ -68,22 +70,30 @@ flowchart TD end end +
+
+flowchart LR + a["Haiya"]===>b +
+
+flowchart TD A --> B A --> C B --> C -
-
- gitGraph - commit - commit - branch develop - commit - commit - commit - checkout main - commit - commit +
+flowchart TD + A([stadium shape test]) + A -->|Get money| B([Go shopping]) + B --> C([Let me think...
Do I want something for work,
something to spend every free second with,
or something to get around?]) + C -->|One| D([Laptop]) + C -->|Two| E([iPhone]) + C -->|Three| F([Car
wroom wroom]) + click A "index.html#link-clicked" "link test" + click B testClick "click test" + classDef someclass fill:#f96; + class A someclass; + class C someclass;
sequenceDiagram @@ -273,7 +283,7 @@ flowchart TD C -->|One| D[Laptop] C -->|Two| E[iPhone] C -->|Three| F[fa:fa-car Car] -
+
classDiagram Animal "1" <|-- Duck Animal <|-- Fish @@ -322,10 +332,12 @@ flowchart TD startOnLoad: true, securityLevel: 'loose', logLevel: 0, + fontFamily: 'courier', flowchart: { - curve: 'curveLinear', + // curve: 'curveLinear', useMaxWidth: true, - htmlLabels: true, + htmlLabels: false, + fontFamily: 'courier', }, }); function callback() { diff --git a/src/diagrams/flowchart/flowRenderer-v2.js b/src/diagrams/flowchart/flowRenderer-v2.js index 9fc28f266..103addbfc 100644 --- a/src/diagrams/flowchart/flowRenderer-v2.js +++ b/src/diagrams/flowchart/flowRenderer-v2.js @@ -388,8 +388,8 @@ export const draw = function (text, id, _version, diagObj) { rankdir: dir, nodesep: nodeSpacing, ranksep: rankSpacing, - marginx: 8, - marginy: 8, + marginx: 0, + marginy: 0, }) .setDefaultEdgeLabel(function () { return {}; diff --git a/src/utils.js b/src/utils.js index db45ab9f6..7e5c9a0da 100644 --- a/src/utils.js +++ b/src/utils.js @@ -742,12 +742,12 @@ const d3Attrs = function (d3Elem, attrs) { */ export const calculateSvgSizeAttrs = function (height, width, useMaxWidth) { let attrs = new Map(); - attrs.set('height', height); + // attrs.set('height', height); if (useMaxWidth) { attrs.set('width', '100%'); - attrs.set('style', `max-width: ${width}px;`); + attrs.set('style', `max-width: ${width * 1.2}px;`); } else { - attrs.set('width', width); + attrs.set('width', width * 1.2); } return attrs; }; @@ -769,8 +769,12 @@ export const setupGraphViewbox = function (graph, svgElem, padding, useMaxWidth) 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) { @@ -785,11 +789,16 @@ export const setupGraphViewbox = function (graph, svgElem, padding, useMaxWidth) ty = (sHeight - height) / 2 + padding; height = sHeight + padding * 2; } + + 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}`; - log.debug( + // 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', @@ -808,7 +817,7 @@ export const setupGraphViewbox = function (graph, svgElem, padding, useMaxWidth) vBox ); svgElem.attr('viewBox', vBox); - svgElem.select('g').attr('transform', `translate(${tx}, ${ty})`); + // svgElem.select('g').attr('transform', `translate(${tx}, ${ty})`); }; export const initIdGenerator = class iterator {