Update after lint comments

This commit is contained in:
Knut Sveidqvist 2022-09-05 20:40:12 +02:00
parent 1ccd3183c4
commit 030cbb1acb
15 changed files with 322 additions and 129 deletions

View File

@ -17,7 +17,7 @@
- [Gantt](gantt.md) - [Gantt](gantt.md)
- [Pie Chart](pie.md) - [Pie Chart](pie.md)
- [Requirement Diagram](requirementDiagram.md) - [Requirement Diagram](requirementDiagram.md)
- [Gitgraph (Git) Diagram](gitgraph.md) - [Gitgraph (Git) Diagram 🔥](gitgraph.md)
- [C4C Diagram (Context) Diagram 🦺⚠️](c4c.md) - [C4C Diagram (Context) Diagram 🦺⚠️](c4c.md)
- [Mindmaps 🦺⚠️](mindmap.md) - [Mindmaps 🦺⚠️](mindmap.md)
- [Other Examples](examples.md) - [Other Examples](examples.md)

View File

@ -54,19 +54,6 @@
.markdown-section { .markdown-section {
max-width: 1200px; max-width: 1200px;
} }
.urgent rect,.urgent path, .urgent text {
fill: rgba(255, 63, 0, 1) !important;
stroke: white
color: white;
}
.urgent i, .urgent text {
fill: white !important;
color: white !important;
}
.large {
font-size: 20px !important;
font-weight: 900 !important;
}
</style> </style>
</head> </head>

View File

@ -1,3 +1,5 @@
# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT. Please edit corresponding file in src/docs.
# Mindmap # Mindmap
**Edit this Page** [![N|Solid](img/GitHub-Mark-32px.png)](https://github.com/mermaid-js/mermaid/blob/develop/docs/mindmap.md) **Edit this Page** [![N|Solid](img/GitHub-Mark-32px.png)](https://github.com/mermaid-js/mermaid/blob/develop/docs/mindmap.md)
@ -8,6 +10,27 @@
### An example of a mindmap. ### An example of a mindmap.
```mermaid-example
mindmap
root((mindmap))
Origins
Long history
::icon(fa fa-book)
Popularisation
British popular psychology author Tony Buzan
Research
On effectivness<br/>and eatures
On Automatic creation
Uses
Creative techniques
Strategic planning
Argument mapping
Tools
Pen and paper
Mermaid
```
```mermaid ```mermaid
mindmap mindmap
root((mindmap)) root((mindmap))
@ -35,16 +58,22 @@ The syntax for creating Mindmaps is simple and relies on indentation for setting
In the following example you can see how there are 3 dufferent levels. One with starting at the left of the text and another level with two rows starting at the same column, defining the node A. At the end there is one more level where the text is indented further then the prevoius lines defining the nodes B and C. In the following example you can see how there are 3 dufferent levels. One with starting at the left of the text and another level with two rows starting at the same column, defining the node A. At the end there is one more level where the text is indented further then the prevoius lines defining the nodes B and C.
``` mindmap
mindmap Root
Root A
A B
B C
C
```
In summary is is a simple text outline where there are one node at the root level called `Root` which has one child `A`. A in turn has two children `B`and `C`. In the diagram below we can see this rendered as a mindmap. In summary is is a simple text outline where there are one node at the root level called `Root` which has one child `A`. A in turn has two children `B`and `C`. In the diagram below we can see this rendered as a mindmap.
```mermaid-example
mindmap
Root
A
B
C
```
```mermaid ```mermaid
mindmap mindmap
Root Root
@ -68,6 +97,11 @@ mindmap
id[I am a square] id[I am a square]
``` ```
```mermaid
mindmap
id[I am a square]
```
### Rounded square ### Rounded square
```mermaid-example ```mermaid-example
@ -75,6 +109,11 @@ mindmap
id(I am a rounded square) id(I am a rounded square)
``` ```
```mermaid
mindmap
id(I am a rounded square)
```
### Circle ### Circle
```mermaid-example ```mermaid-example
@ -82,6 +121,11 @@ mindmap
id((I am a circle)) id((I am a circle))
``` ```
```mermaid
mindmap
id((I am a circle))
```
### Bang ### Bang
```mermaid-example ```mermaid-example
@ -89,6 +133,11 @@ mindmap
id))I am a bang(( id))I am a bang((
``` ```
```mermaid
mindmap
id))I am a bang((
```
### Cloud ### Cloud
```mermaid-example ```mermaid-example
@ -96,6 +145,11 @@ mindmap
id)I am a cloud( id)I am a cloud(
``` ```
```mermaid
mindmap
id)I am a cloud(
```
### Default ### Default
```mermaid-example ```mermaid-example
@ -103,6 +157,11 @@ mindmap
I am the default shape I am the default shape
``` ```
```mermaid
mindmap
I am the default shape
```
More shapes will be added, beginning with the shapes available in flowcharts. More shapes will be added, beginning with the shapes available in flowcharts.
# Icons and classes # Icons and classes
@ -120,6 +179,15 @@ mindmap
::icon(mdi mdi-skull-outline) ::icon(mdi mdi-skull-outline)
``` ```
```mermaid
mindmap
Root
A
::icon(fa fa-book)
B(B)
::icon(mdi mdi-skull-outline)
```
## Classes ## Classes
Again the syntax for adding classes is similar to flowcharts and you can add classes using a tripple colon following a numver of css classes separated by space. In the following example one of the nodes has two custom classes attached urgent turning the background red and the text whiet and large increasing the font size: Again the syntax for adding classes is similar to flowcharts and you can add classes using a tripple colon following a numver of css classes separated by space. In the following example one of the nodes has two custom classes attached urgent turning the background red and the text whiet and large increasing the font size:
@ -133,22 +201,37 @@ mindmap
C C
``` ```
```mermaid
mindmap
Root
A[A]
:::urgent large
B(B)
C
```
_These classes needs top be supplied by the site administrator._ _These classes needs top be supplied by the site administrator._
## Unclear indentation ## Unclear indentation
The actual indentation does not really matter only compared with the previous rows. If we take the previous example and disrupt it a little we can se how the calculations are performed. Let us start with placing C with a smaller indentation than `B`but larger then `A`. The actual indentation does not really matter only compared with the previous rows. If we take the previous example and disrupt it a little we can se how the calculations are performed. Let us start with placing C with a smaller indentation than `B`but larger then `A`.
``` mindmap
mindmap Root
Root A
A B
B C
C
```
This outline is unclear as `B` clearly is a child of `A` but when we move on to `C` the clarity is lost. `C` is not a child of `B` with a highter indentation nor does ot haver the same indentation as `B`. The only thing that is clear is that the first node with smaller indentation, indicating a parent, is A. Then Mermaid relies on this known truth and compensates for the unclear indentation and selects `A` as a parent of `C` leading till the same diagram with `B` and `C` as sieblings. This outline is unclear as `B` clearly is a child of `A` but when we move on to `C` the clarity is lost. `C` is not a child of `B` with a highter indentation nor does ot haver the same indentation as `B`. The only thing that is clear is that the first node with smaller indentation, indicating a parent, is A. Then Mermaid relies on this known truth and compensates for the unclear indentation and selects `A` as a parent of `C` leading till the same diagram with `B` and `C` as sieblings.
```mermaid-example
mindmap
Root
A
B
C
```
```mermaid ```mermaid
mindmap mindmap
Root Root

View File

@ -1,5 +1,5 @@
import { registerDiagram } from './diagramAPI'; import { registerDiagram } from './diagramAPI';
import mindmapDb from '../diagrams/mindmap/mindmapDb'; import * as mindmapDb from '../diagrams/mindmap/mindmapDb';
import mindmapRenderer from '../diagrams/mindmap/mindmapRenderer'; import mindmapRenderer from '../diagrams/mindmap/mindmapRenderer';
// @ts-ignore // @ts-ignore
import mindmapParser from '../diagrams/mindmap/parser/mindmap'; import mindmapParser from '../diagrams/mindmap/parser/mindmap';

View File

@ -1,7 +1,7 @@
import mindmapDB from './mindmapDb'; import * as mindmapDB from './mindmapDb';
describe('when parsing a mindmap ', function () { describe('when parsing a mindmap ', function () {
var mindmap; let mindmap;
beforeEach(function () { beforeEach(function () {
mindmap = require('./parser/mindmap').parser; mindmap = require('./parser/mindmap').parser;
mindmap.yy = require('./mindmapDb'); mindmap.yy = require('./mindmapDb');
@ -9,7 +9,7 @@ describe('when parsing a mindmap ', function () {
}); });
describe('hiearchy', function () { describe('hiearchy', function () {
it('should handle a simple root definition', function () { it('should handle a simple root definition', function () {
var str = `mindmap let str = `mindmap
root`; root`;
mindmap.parse(str); mindmap.parse(str);
@ -17,7 +17,7 @@ describe('when parsing a mindmap ', function () {
expect(mindmap.yy.getMindmap().descr).toEqual('root'); expect(mindmap.yy.getMindmap().descr).toEqual('root');
}); });
it('should handle a hierachial mindmap definition', function () { it('should handle a hierachial mindmap definition', function () {
var str = `mindmap let str = `mindmap
root root
child1 child1
child2 child2
@ -32,7 +32,7 @@ describe('when parsing a mindmap ', function () {
}); });
it('should handle a simple root definition with a shape and without an id abc123', function () { it('should handle a simple root definition with a shape and without an id abc123', function () {
var str = `mindmap let str = `mindmap
(root)`; (root)`;
mindmap.parse(str); mindmap.parse(str);
@ -41,7 +41,7 @@ describe('when parsing a mindmap ', function () {
}); });
it('should handle a deeper hierachial mindmap definition', function () { it('should handle a deeper hierachial mindmap definition', function () {
var str = `mindmap let str = `mindmap
root root
child1 child1
leaf1 leaf1
@ -56,7 +56,7 @@ describe('when parsing a mindmap ', function () {
expect(mm.children[1].descr).toEqual('child2'); expect(mm.children[1].descr).toEqual('child2');
}); });
it('Multiple roots are illegal', function () { it('Multiple roots are illegal', function () {
var str = `mindmap let str = `mindmap
root root
fakeRoot`; fakeRoot`;
@ -71,7 +71,7 @@ describe('when parsing a mindmap ', function () {
} }
}); });
it('real root in wrong place', function () { it('real root in wrong place', function () {
var str = `mindmap let str = `mindmap
root root
fakeRoot fakeRoot
realRootWrongPlace`; realRootWrongPlace`;
@ -89,7 +89,7 @@ describe('when parsing a mindmap ', function () {
}); });
describe('nodes', function () { describe('nodes', function () {
it('should handle an id and type for a node definition', function () { it('should handle an id and type for a node definition', function () {
var str = `mindmap let str = `mindmap
root[The root] root[The root]
`; `;
@ -100,7 +100,7 @@ describe('when parsing a mindmap ', function () {
expect(mm.type).toEqual(mindmap.yy.nodeType.RECT); expect(mm.type).toEqual(mindmap.yy.nodeType.RECT);
}); });
it('should handle an id and type for a node definition', function () { it('should handle an id and type for a node definition', function () {
var str = `mindmap let str = `mindmap
root root
theId(child1)`; theId(child1)`;
@ -114,7 +114,7 @@ describe('when parsing a mindmap ', function () {
expect(child.type).toEqual(mindmap.yy.nodeType.ROUNDED_RECT); expect(child.type).toEqual(mindmap.yy.nodeType.ROUNDED_RECT);
}); });
it('should handle an id and type for a node definition', function () { it('should handle an id and type for a node definition', function () {
var str = `mindmap let str = `mindmap
root root
theId(child1)`; theId(child1)`;
@ -128,7 +128,7 @@ root
expect(child.type).toEqual(mindmap.yy.nodeType.ROUNDED_RECT); expect(child.type).toEqual(mindmap.yy.nodeType.ROUNDED_RECT);
}); });
it('mutiple types (circle)', function () { it('mutiple types (circle)', function () {
var str = `mindmap let str = `mindmap
root((the root)) root((the root))
`; `;
@ -140,7 +140,7 @@ root
}); });
it('mutiple types (cloud)', function () { it('mutiple types (cloud)', function () {
var str = `mindmap let str = `mindmap
root)the root( root)the root(
`; `;
@ -151,7 +151,7 @@ root
expect(mm.type).toEqual(mindmap.yy.nodeType.CLOUD); expect(mm.type).toEqual(mindmap.yy.nodeType.CLOUD);
}); });
it('mutiple types (bang)', function () { it('mutiple types (bang)', function () {
var str = `mindmap let str = `mindmap
root))the root(( root))the root((
`; `;
@ -164,7 +164,7 @@ root
}); });
describe('decorations', function () { describe('decorations', function () {
it('should be possible to set an icon for the node', function () { it('should be possible to set an icon for the node', function () {
var str = `mindmap let str = `mindmap
root[The root] root[The root]
::icon(bomb) ::icon(bomb)
`; `;
@ -178,7 +178,7 @@ root
expect(mm.icon).toEqual('bomb'); expect(mm.icon).toEqual('bomb');
}); });
it('should be possible to set classes for the node', function () { it('should be possible to set classes for the node', function () {
var str = `mindmap let str = `mindmap
root[The root] root[The root]
:::m-4 p-8 :::m-4 p-8
`; `;
@ -192,7 +192,7 @@ root
expect(mm.class).toEqual('m-4 p-8'); expect(mm.class).toEqual('m-4 p-8');
}); });
it('should be possible to set both classes and icon for the node', function () { it('should be possible to set both classes and icon for the node', function () {
var str = `mindmap let str = `mindmap
root[The root] root[The root]
:::m-4 p-8 :::m-4 p-8
::icon(bomb) ::icon(bomb)
@ -208,7 +208,7 @@ root
expect(mm.icon).toEqual('bomb'); expect(mm.icon).toEqual('bomb');
}); });
it('should be possible to set both classes and icon for the node', function () { it('should be possible to set both classes and icon for the node', function () {
var str = `mindmap let str = `mindmap
root[The root] root[The root]
::icon(bomb) ::icon(bomb)
:::m-4 p-8 :::m-4 p-8
@ -226,7 +226,7 @@ root
}); });
describe('descriptions', function () { describe('descriptions', function () {
it('should be possible to use node syntax in the descriptions', function () { it('should be possible to use node syntax in the descriptions', function () {
var str = `mindmap let str = `mindmap
root["String containing []"] root["String containing []"]
`; `;
mindmap.parse(str); mindmap.parse(str);
@ -235,7 +235,7 @@ root
expect(mm.descr).toEqual('String containing []'); expect(mm.descr).toEqual('String containing []');
}); });
it('should be possible to use node syntax in the descriptions in children', function () { it('should be possible to use node syntax in the descriptions in children', function () {
var str = `mindmap let str = `mindmap
root["String containing []"] root["String containing []"]
child1["String containing ()"] child1["String containing ()"]
`; `;
@ -247,7 +247,7 @@ root
expect(mm.children[0].descr).toEqual('String containing ()'); expect(mm.children[0].descr).toEqual('String containing ()');
}); });
it('should be possible to have a child after a class assignment', function () { it('should be possible to have a child after a class assignment', function () {
var str = `mindmap let str = `mindmap
root(Root) root(Root)
Child(Child) Child(Child)
:::hot :::hot
@ -267,7 +267,7 @@ root
}); });
}); });
it('should be possible to have meaningless empty rows in a mindmap abc124', function () { it('should be possible to have meaningless empty rows in a mindmap abc124', function () {
var str = `mindmap let str = `mindmap
root(Root) root(Root)
Child(Child) Child(Child)
a(a) a(a)
@ -286,7 +286,7 @@ root
expect(child.children[1].nodeId).toEqual('b'); expect(child.children[1].nodeId).toEqual('b');
}); });
it('should be possible to have comments in a mindmap', function () { it('should be possible to have comments in a mindmap', function () {
var str = `mindmap let str = `mindmap
root(Root) root(Root)
Child(Child) Child(Child)
a(a) a(a)
@ -307,7 +307,7 @@ root
}); });
it('should be possible to have comments at the end of a line', function () { it('should be possible to have comments at the end of a line', function () {
var str = `mindmap let str = `mindmap
root(Root) root(Root)
Child(Child) Child(Child)
a(a) %% This is a comment a(a) %% This is a comment

View File

@ -2,9 +2,6 @@
import { sanitizeText, getConfig } from '../../diagram-api/diagramAPI'; import { sanitizeText, getConfig } from '../../diagram-api/diagramAPI';
import { log } from '../../logger'; import { log } from '../../logger';
var message = '';
var info = false;
const root = {};
let nodes = []; let nodes = [];
let cnt = 0; let cnt = 0;
let elements = {}; let elements = {};
@ -117,7 +114,7 @@ export const decorateNode = (decoration) => {
} }
}; };
const type2Str = (type) => { export const type2Str = (type) => {
switch (type) { switch (type) {
case nodeType.DEFAULT: case nodeType.DEFAULT:
return 'no-border'; return 'no-border';
@ -136,17 +133,19 @@ const type2Str = (type) => {
} }
}; };
export default { export const getNodeById = (id) => nodes[id];
getMindmap, export const getElementById = (id) => elements[id];
addNode, // export default {
clear, // // getMindmap,
nodeType, // // addNode,
getType, // // clear,
decorateNode, // // nodeType,
setElementForId, // // getType,
getElementById: (id) => elements[id], // // decorateNode,
// getNodeById: (id) => nodes.find((node) => node.id === id), // // setElementForId,
getNodeById: (id) => nodes[id], // getElementById: (id) => elements[id],
type2Str, // // getNodeById: (id) => nodes.find((node) => node.id === id),
// parseError // getNodeById: (id) => nodes[id],
}; // // type2Str,
// // parseError
// };

View File

@ -4,7 +4,7 @@ import { log, getConfig, setupGraphViewbox } from '../../diagram-api/diagramAPI'
import svgDraw from './svgDraw'; import svgDraw from './svgDraw';
import { BoundingBox, Layout, Tree } from 'non-layered-tidy-tree-layout'; import { BoundingBox, Layout, Tree } from 'non-layered-tidy-tree-layout';
import clone from 'fast-clone'; import clone from 'fast-clone';
import db from './mindmapDb'; import * as db from './mindmapDb';
/** /**
* @param {any} svg The svg element to draw the diagram onto * @param {any} svg The svg element to draw the diagram onto
@ -224,8 +224,6 @@ function positionNodes(node, conf) {
export const draw = (text, id, version, diagObj) => { export const draw = (text, id, version, diagObj) => {
const conf = getConfig(); const conf = getConfig();
try { try {
// const parser = infoParser.parser;
// parser.yy = db;
log.debug('Renering info diagram\n' + text); log.debug('Renering info diagram\n' + text);
const securityLevel = getConfig().securityLevel; const securityLevel = getConfig().securityLevel;

View File

@ -1,6 +1,6 @@
const lineBreakRegex = /<br\s*\/?>/gi; const lineBreakRegex = /<br\s*\/?>/gi;
import { select } from 'd3'; import { select } from 'd3';
import db from './mindmapDb'; import * as db from './mindmapDb';
/** /**
* @param {string} text The text to be wrapped * @param {string} text The text to be wrapped

View File

@ -17,6 +17,7 @@
- [Requirement Diagram](requirementDiagram.md) - [Requirement Diagram](requirementDiagram.md)
- [Gitgraph (Git) Diagram 🔥](gitgraph.md) - [Gitgraph (Git) Diagram 🔥](gitgraph.md)
- [C4C Diagram (Context) Diagram 🦺⚠️](c4c.md) - [C4C Diagram (Context) Diagram 🦺⚠️](c4c.md)
- [Mindmaps 🦺⚠️](mindmap.md)
- [Other Examples](examples.md) - [Other Examples](examples.md)
- ⚙️ Deployment and Configuration - ⚙️ Deployment and Configuration

158
src/docs/mindmap.md Normal file
View File

@ -0,0 +1,158 @@
# Mindmap
**Edit this Page** [![N|Solid](img/GitHub-Mark-32px.png)](https://github.com/mermaid-js/mermaid/blob/develop/docs/mindmap.md)
> Mindmap: This is an experimental diagram for now. The syntax and properties can change in future releases. The syntax is stabel except for the icon integration which is the experimental part.
"A mind map is a diagram used to visually organize information into a hierarchy, showing relationships among pieces of the whole. It is often created around a single concept, drawn as an image in the center of a blank page, to which associated representations of ideas such as images, words and parts of words are added. Major ideas are connected directly to the central concept, and other ideas branch out from those major ideas." Wikipedia
### An example of a mindmap.
```mermaid
mindmap
root((mindmap))
Origins
Long history
::icon(fa fa-book)
Popularisation
British popular psychology author Tony Buzan
Research
On effectivness<br/>and eatures
On Automatic creation
Uses
Creative techniques
Strategic planning
Argument mapping
Tools
Pen and paper
Mermaid
```
## Syntax
The syntax for creating Mindmaps is simple and relies on indentation for setting the levels in the hierarchy.
In the following example you can see how there are 3 dufferent levels. One with starting at the left of the text and another level with two rows starting at the same column, defining the node A. At the end there is one more level where the text is indented further then the prevoius lines defining the nodes B and C.
```
mindmap
Root
A
B
C
```
In summary is is a simple text outline where there are one node at the root level called `Root` which has one child `A`. A in turn has two children `B`and `C`. In the diagram below we can see this rendered as a mindmap.
```mermaid
mindmap
Root
A
B
C
```
In this way we can use a text outline to generate a hierarchical mindmap.
## Different shapes
Mermaids mindmaps can show node using different shapes. When specifying a shape for a node the syntax for the is similar to flowchart nodes, with an id followed by the shape definition and with the text within the shape delimiters. Where possible we try/will try to keep the same shapes as for flowcharts even though they are not all supported from the start.
Mindmap can show the following shapes:
### Square
```mermaid-example
mindmap
id[I am a square]
```
### Rounded square
```mermaid-example
mindmap
id(I am a rounded square)
```
### Circle
```mermaid-example
mindmap
id((I am a circle))
```
### Bang
```mermaid-example
mindmap
id))I am a bang((
```
### Cloud
```mermaid-example
mindmap
id)I am a cloud(
```
### Default
```mermaid-example
mindmap
I am the default shape
```
More shapes will be added, beginning with the shapes available in flowcharts.
# Icons and classes
## icons
As with flowcharts you can add icons to your nodes but with an updated syntax. The styling for the font based icons are added during the integration so that they are available for the web page. _This is not something a diagram author can do but has to be done with the site administrator or the integrator_. Once the icon fonts are in place you add them to the mind map nodes using the `::icon()` syntax. You place the classes for the icon within the parethesis like in the following example where icons for material design and fontwaresome 4. is displayed. The intention is that this approach should be used for all diagrams supporting icons. **Expermental feature:** This wider scope is also the reason Mindmaps are experimental as this syntax and approach could change.
```mermaid-example
mindmap
Root
A
::icon(fa fa-book)
B(B)
::icon(mdi mdi-skull-outline)
```
## Classes
Again the syntax for adding classes is similar to flowcharts and you can add classes using a tripple colon following a numver of css classes separated by space. In the following example one of the nodes has two custom classes attached urgent turning the background red and the text whiet and large increasing the font size:
```mermaid-example
mindmap
Root
A[A]
:::urgent large
B(B)
C
```
_These classes needs top be supplied by the site administrator._
## Unclear indentation
The actual indentation does not really matter only compared with the previous rows. If we take the previous example and disrupt it a little we can se how the calculations are performed. Let us start with placing C with a smaller indentation than `B`but larger then `A`.
```
mindmap
Root
A
B
C
```
This outline is unclear as `B` clearly is a child of `A` but when we move on to `C` the clarity is lost. `C` is not a child of `B` with a highter indentation nor does ot haver the same indentation as `B`. The only thing that is clear is that the first node with smaller indentation, indicating a parent, is A. Then Mermaid relies on this known truth and compensates for the unclear indentation and selects `A` as a parent of `C` leading till the same diagram with `B` and `C` as sieblings.
```mermaid
mindmap
Root
A
B
C
```

View File

@ -80,21 +80,6 @@ export const setupGraphViewbox = function (graph, svgElem, padding, useMaxWidth)
const vBox = `${svgBounds.x - padding} ${svgBounds.y - padding} ${ const vBox = `${svgBounds.x - padding} ${svgBounds.y - padding} ${
svgBounds.width + 2 * padding svgBounds.width + 2 * padding
} ${svgBounds.height + 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.attr('viewBox', vBox);
// svgElem.select('g').attr('transform', `translate(${tx}, ${ty})`);
}; };

View File

@ -0,0 +1,20 @@
import utils from './utils';
import assignWithDepth from './assignWithDepth';
import { detectType } from './diagram-api/detectType';
import { addDiagrams } from './diagram-api/diagram-orchestration';
import { calculateSvgSizeAttrs } from './setupGraphViewbox';
addDiagrams();
describe('when calculating SVG size', function () {
it('should return width 100% when useMaxWidth is true', function () {
const attrs = calculateSvgSizeAttrs(100, 200, true);
// 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 = calculateSvgSizeAttrs(100, 200, false);
// expect(attrs.get('height')).toEqual(100);
expect(attrs.get('width')).toEqual(200);
});
});

View File

@ -103,7 +103,7 @@ const getStyles = (
`; `;
}; };
export const addStylesForDiagram = (type: any, diagramTheme: any) => { export const addStylesForDiagram = (type: string, diagramTheme: any) => {
// @ts-ignore // @ts-ignore
themes[type] = diagramTheme; themes[type] = diagramTheme;
}; };

View File

@ -2,7 +2,6 @@ import utils from './utils';
import assignWithDepth from './assignWithDepth'; import assignWithDepth from './assignWithDepth';
import { detectType } from './diagram-api/detectType'; import { detectType } from './diagram-api/detectType';
import { addDiagrams } from './diagram-api/diagram-orchestration'; import { addDiagrams } from './diagram-api/diagram-orchestration';
import { configureSvgSize, calculateSvgSizeAttrs } from './setupGraphViewbox';
addDiagrams(); addDiagrams();
describe('when assignWithDepth: should merge objects within objects', function () { describe('when assignWithDepth: should merge objects within objects', function () {
@ -291,19 +290,6 @@ describe('when formatting urls', function () {
expect(result).toEqual('about:blank'); expect(result).toEqual('about:blank');
}); });
}); });
describe('when calculating SVG size', function () {
it('should return width 100% when useMaxWidth is true', function () {
const attrs = calculateSvgSizeAttrs(100, 200, true);
// 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 = calculateSvgSizeAttrs(100, 200, false);
// expect(attrs.get('height')).toEqual(100);
expect(attrs.get('width')).toEqual(200);
});
});
describe('when initializing the id generator', function () { describe('when initializing the id generator', function () {
it('should return a random number generator based on Date', function (done) { it('should return a random number generator based on Date', function (done) {

View File

@ -2055,18 +2055,6 @@
"@types/yargs" "^17.0.8" "@types/yargs" "^17.0.8"
chalk "^4.0.0" chalk "^4.0.0"
"@jest/types@^29.0.1", "@jest/types@^29.0.2":
version "29.0.2"
resolved "https://registry.yarnpkg.com/@jest/types/-/types-29.0.2.tgz#5a5391fa7f7f41bf4b201d6d2da30e874f95b6c1"
integrity sha512-5WNMesBLmlkt1+fVkoCjHa0X3i3q8zc4QLTDkdHgCa2gyPZc7rdlZBWgVLqwS1860ZW5xJuCDwAzqbGaXIr/ew==
dependencies:
"@jest/schemas" "^29.0.0"
"@types/istanbul-lib-coverage" "^2.0.0"
"@types/istanbul-reports" "^3.0.0"
"@types/node" "*"
"@types/yargs" "^17.0.8"
chalk "^4.0.0"
"@jest/types@^29.0.2": "@jest/types@^29.0.2":
version "29.0.2" version "29.0.2"
resolved "https://registry.yarnpkg.com/@jest/types/-/types-29.0.2.tgz#5a5391fa7f7f41bf4b201d6d2da30e874f95b6c1" resolved "https://registry.yarnpkg.com/@jest/types/-/types-29.0.2.tgz#5a5391fa7f7f41bf4b201d6d2da30e874f95b6c1"
@ -7942,18 +7930,6 @@ jest-util@^28.0.0, jest-util@^28.1.3:
graceful-fs "^4.2.9" graceful-fs "^4.2.9"
picomatch "^2.2.3" picomatch "^2.2.3"
jest-util@^29.0.1, jest-util@^29.0.2:
version "29.0.2"
resolved "https://registry.yarnpkg.com/jest-util/-/jest-util-29.0.2.tgz#c75c5cab7f3b410782f9570a60c5558b5dfb6e3a"
integrity sha512-ozk8ruEEEACxqpz0hN9UOgtPZS0aN+NffwQduR5dVlhN+eN47vxurtvgZkYZYMpYrsmlAEx1XabkB3BnN0GfKQ==
dependencies:
"@jest/types" "^29.0.2"
"@types/node" "*"
chalk "^4.0.0"
ci-info "^3.2.0"
graceful-fs "^4.2.9"
picomatch "^2.2.3"
jest-util@^29.0.2: jest-util@^29.0.2:
version "29.0.2" version "29.0.2"
resolved "https://registry.yarnpkg.com/jest-util/-/jest-util-29.0.2.tgz#c75c5cab7f3b410782f9570a60c5558b5dfb6e3a" resolved "https://registry.yarnpkg.com/jest-util/-/jest-util-29.0.2.tgz#c75c5cab7f3b410782f9570a60c5558b5dfb6e3a"