Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

2824 cut edges #3364

Merged
merged 3 commits into from
Aug 28, 2022
Merged

2824 cut edges #3364

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
0779c39
Border
knsv Aug 27, 2022
2968b40
Updated viewBox settings
knsv Aug 27, 2022
3b93c39
Adjusting size and test
knsv Aug 27, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
15 changes: 13 additions & 2 deletions cypress/integration/rendering/flowchart-v2.spec.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -42,7 +42,7 @@ describe('Flowchart v2', () => {
P3 --> P6
P1.5 --> P5
`,
{ flowchart: { diagramPadding: 0 } }
{}
);
});

Expand All @@ -60,7 +60,7 @@ describe('Flowchart v2', () => {
C <-...-> E4
C ======> E5
`,
{ flowchart: { diagramPadding: 0 } }
{}
);
});
it('5: should render escaped without html labels', () => {
Expand Down Expand Up @@ -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' }
);
});
});
69 changes: 48 additions & 21 deletions cypress/platform/knsv.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -21,9 +21,14 @@
h1 { color: grey;}
.mermaid2,.mermaid3 {
display: none;
}
.mermaid {

}
.mermaid svg {
border: 1px solid purple;
/* font-size: 18px !important; */
fontFamily: 'courier'
}
</style>
</head>
Expand All @@ -32,7 +37,7 @@



<div class="mermaid2" style="width: 50%;">
<div class="mermaid" style="width: 50%;">
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;
Expand All @@ -51,24 +56,44 @@
O0 -- has type -->O2["Bug"]
click O0 function "Lots of great info about Joe<br>Lots of great info about Joe<br>burt<br>fred";
</div>
<div class="mermaid2" style="width: 50%;">
flowchart TD
subgraph test
direction TB
subgraph test2
direction LR
F --> D
end
subgraph test3
direction TB
G --> H
end
end

</div>
<div class="mermaid" style="width: 50%;">
classDiagram-v2
class Shape
link Shape "https://www.github.com" "This is a<br/>tooltip<br>for a link"
class Shape2
click Shape2 href "https://www.github.com" "This is a tooltip for a link"
flowchart LR
a["<strong>Haiya</strong>"]===>b
</div>
<div class="mermaid2" style="width: 50%;">
gitGraph
commit
commit
branch develop
commit
commit
commit
checkout main
commit
commit
<div class="mermaid" style="width: 50%;">
flowchart TD
A --> B
A --> C
B --> C
</div>
<div class="mermaid" style="width: 50%;">
flowchart TD
A([stadium shape test])
A -->|Get money| B([Go shopping])
B --> C([Let me think...<br />Do I want something for work,<br />something to spend every free second with,<br />or something to get around?])
C -->|One| D([Laptop])
C -->|Two| E([iPhone])
C -->|Three| F([Car<br/>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;
</div>
<div class="mermaid2" style="width: 50%;">
sequenceDiagram
Expand Down Expand Up @@ -258,7 +283,7 @@
C -->|One| D[Laptop]
C -->|Two| E[iPhone]
C -->|Three| F[fa:fa-car Car]
</div> <div class="mermaid2" style="width: 100%;">
</div> <div class="mermaid" style="width: 100%;">
classDiagram
Animal "1" <|-- Duck
Animal <|-- Fish
Expand Down Expand Up @@ -307,10 +332,12 @@
startOnLoad: true,
securityLevel: 'loose',
logLevel: 0,
fontFamily: 'courier',
flowchart: {
curve: 'basis',
useMaxWidth: false,
htmlLabels: true,
// curve: 'curveLinear',
useMaxWidth: true,
htmlLabels: false,
fontFamily: 'courier',
},
});
function callback() {
Expand Down
4 changes: 2 additions & 2 deletions src/diagrams/flowchart/flowRenderer-v2.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 {};
Expand Down
19 changes: 14 additions & 5 deletions src/utils.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -742,7 +742,7 @@ 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;`);
Expand All @@ -761,16 +761,20 @@ export const calculateSvgSizeAttrs = function (height, width, useMaxWidth) {
* @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, width, useMaxWidth);
const attrs = calculateSvgSizeAttrs(height, 1.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) {
Expand All @@ -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',
Expand All @@ -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 {
Expand Down
4 changes: 2 additions & 2 deletions src/utils.spec.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -294,13 +294,13 @@ describe('when formatting urls', function () {
describe('when calculating SVG size', function () {
it('should return width 100% when useMaxWidth is true', function () {
const attrs = utils.calculateSvgSizeAttrs(100, 200, true);
expect(attrs.get('height')).toEqual(100);
// expect(attrs.get('height')).toEqual(100);
expect(attrs.get('style')).toEqual('max-width: 200px;');
expect(attrs.get('width')).toEqual('100%');
});
it('should return absolute width when useMaxWidth is false', function () {
const attrs = utils.calculateSvgSizeAttrs(100, 200, false);
expect(attrs.get('height')).toEqual(100);
// expect(attrs.get('height')).toEqual(100);
expect(attrs.get('width')).toEqual(200);
});
});
Expand Down