mirror of
https://github.com/mermaid-js/mermaid.git
synced 2025-01-14 06:43:25 +08:00
Merge pull request #5730 from mermaid-js/sidv/cleanupLayoutElk
chore: Cleanup layoutelk
This commit is contained in:
Knut Sveidqvist
GitHub
commit
0b9554c675
@ -86,14 +86,20 @@
|
||||
---
|
||||
config:
|
||||
look: handDrawn
|
||||
flowchart:
|
||||
htmlLabels: false
|
||||
layout: elk
|
||||
elk:
|
||||
nodePlacementStrategy: BRANDES_KOEPF
|
||||
---
|
||||
flowchart
|
||||
A[I am a long text, where do I go??? handdrawn - false]
|
||||
flowchart TB
|
||||
%% A --> C
|
||||
B -- sdf sdf --> C{"Evaluate"}
|
||||
C --> n4["salkdfjh akljd lkasdjf lkashj lksjadf klasdh"]
|
||||
C --> F
|
||||
|
||||
|
||||
</pre
|
||||
>
|
||||
<pre id="diagram" class="mermaid">
|
||||
<pre id="diagram" class="mermaid2">
|
||||
---
|
||||
config:
|
||||
look: handdrawn
|
||||
@ -106,7 +112,7 @@ flowchart
|
||||
>
|
||||
</div>
|
||||
<div class="flex">
|
||||
<pre id="diagram" class="mermaid">
|
||||
<pre id="diagram" class="mermaid2">
|
||||
---
|
||||
config:
|
||||
flowchart:
|
||||
@ -116,7 +122,7 @@ flowchart
|
||||
A[I am a long text, where do I go??? classic - false]
|
||||
</pre
|
||||
>
|
||||
<pre id="diagram" class="mermaid">
|
||||
<pre id="diagram" class="mermaid2">
|
||||
---
|
||||
config:
|
||||
flowchart:
|
||||
@ -159,8 +165,8 @@ flowchart LR
|
||||
|
||||
<script type="module">
|
||||
import mermaid from './mermaid.esm.mjs';
|
||||
// import layouts from './mermaid-layout-elk.esm.mjs';
|
||||
// mermaid.registerLayoutLoaders(layouts);
|
||||
import layouts from './mermaid-layout-elk.esm.mjs';
|
||||
mermaid.registerLayoutLoaders(layouts);
|
||||
mermaid.parseError = function (err, hash) {
|
||||
console.error('Mermaid error: ', err);
|
||||
};
|
||||
|
||||
@ -16,7 +16,7 @@
|
||||
|
||||
#### Defined in
|
||||
|
||||
[packages/mermaid/src/rendering-util/render.ts:11](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/rendering-util/render.ts#L11)
|
||||
[packages/mermaid/src/rendering-util/render.ts:25](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/rendering-util/render.ts#L25)
|
||||
|
||||
---
|
||||
|
||||
@ -26,7 +26,7 @@
|
||||
|
||||
#### Defined in
|
||||
|
||||
[packages/mermaid/src/rendering-util/render.ts:10](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/rendering-util/render.ts#L10)
|
||||
[packages/mermaid/src/rendering-util/render.ts:24](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/rendering-util/render.ts#L24)
|
||||
|
||||
---
|
||||
|
||||
@ -36,4 +36,4 @@
|
||||
|
||||
#### Defined in
|
||||
|
||||
[packages/mermaid/src/rendering-util/render.ts:9](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/rendering-util/render.ts#L9)
|
||||
[packages/mermaid/src/rendering-util/render.ts:23](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/rendering-util/render.ts#L23)
|
||||
|
||||
@ -28,7 +28,7 @@ page.
|
||||
|
||||
#### Defined in
|
||||
|
||||
[packages/mermaid/src/mermaid.ts:432](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaid.ts#L432)
|
||||
[packages/mermaid/src/mermaid.ts:435](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaid.ts#L435)
|
||||
|
||||
---
|
||||
|
||||
@ -59,7 +59,7 @@ A graph definition key
|
||||
|
||||
#### Defined in
|
||||
|
||||
[packages/mermaid/src/mermaid.ts:434](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaid.ts#L434)
|
||||
[packages/mermaid/src/mermaid.ts:437](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaid.ts#L437)
|
||||
|
||||
---
|
||||
|
||||
@ -89,7 +89,7 @@ Use [initialize](mermaid.Mermaid.md#initialize) and [run](mermaid.Mermaid.md#run
|
||||
|
||||
#### Defined in
|
||||
|
||||
[packages/mermaid/src/mermaid.ts:427](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaid.ts#L427)
|
||||
[packages/mermaid/src/mermaid.ts:430](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaid.ts#L430)
|
||||
|
||||
---
|
||||
|
||||
@ -116,50 +116,7 @@ This function should be called before the run function.
|
||||
|
||||
#### Defined in
|
||||
|
||||
[packages/mermaid/src/mermaid.ts:431](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaid.ts#L431)
|
||||
|
||||
---
|
||||
|
||||
### internalHelpers
|
||||
|
||||
• **internalHelpers**: `Object`
|
||||
|
||||
Internal helpers for mermaid
|
||||
|
||||
**`Deprecated`**
|
||||
|
||||
- This should not be used by external packages, as the definitions will change without notice.
|
||||
|
||||
#### Type declaration
|
||||
|
||||
| Name | Type |
|
||||
| :--------------------------- | :-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
||||
| `common` | { `evaluate`: (`val?`: `string` \| `boolean`) => `boolean` ; `getMax`: (...`values`: `number`\[]) => `number` ; `getMin`: (...`values`: `number`\[]) => `number` ; `getRows`: (`s?`: `string`) => `string`\[] ; `getUrl`: (`useAbsolute`: `boolean`) => `string` ; `hasBreaks`: (`text`: `string`) => `boolean` ; `lineBreakRegex`: `RegExp` ; `removeScript`: (`txt`: `string`) => `string` ; `sanitizeText`: (`text`: `string`, `config`: [`MermaidConfig`](mermaid.MermaidConfig.md)) => `string` ; `sanitizeTextOrArray`: (`a`: `string` \| `string`\[] \| `string`\[]\[], `config`: [`MermaidConfig`](mermaid.MermaidConfig.md)) => `string` \| `string`\[] ; `splitBreaks`: (`text`: `string`) => `string`\[] } |
|
||||
| `common.evaluate` | (`val?`: `string` \| `boolean`) => `boolean` |
|
||||
| `common.getMax` | (...`values`: `number`\[]) => `number` |
|
||||
| `common.getMin` | (...`values`: `number`\[]) => `number` |
|
||||
| `common.getRows` | (`s?`: `string`) => `string`\[] |
|
||||
| `common.getUrl` | (`useAbsolute`: `boolean`) => `string` |
|
||||
| `common.hasBreaks` | (`text`: `string`) => `boolean` |
|
||||
| `common.lineBreakRegex` | `RegExp` |
|
||||
| `common.removeScript` | (`txt`: `string`) => `string` |
|
||||
| `common.sanitizeText` | (`text`: `string`, `config`: [`MermaidConfig`](mermaid.MermaidConfig.md)) => `string` |
|
||||
| `common.sanitizeTextOrArray` | (`a`: `string` \| `string`\[] \| `string`\[]\[], `config`: [`MermaidConfig`](mermaid.MermaidConfig.md)) => `string` \| `string`\[] |
|
||||
| `common.splitBreaks` | (`text`: `string`) => `string`\[] |
|
||||
| `getConfig` | () => [`MermaidConfig`](mermaid.MermaidConfig.md) |
|
||||
| `insertCluster` | (`elem`: `any`, `node`: `any`) => `Promise`<`any`> |
|
||||
| `insertEdge` | (`elem`: `any`, `edge`: `any`, `clusterDb`: `any`, `diagramType`: `any`, `startNode`: `any`, `endNode`: `any`, `id`: `any`) => { `originalPath`: `any` ; `updatedPath`: `any` } |
|
||||
| `insertEdgeLabel` | (`elem`: `any`, `edge`: `any`) => `Promise`<`any`> |
|
||||
| `insertMarkers` | (`elem`: `any`, `markerArray`: `any`, `type`: `any`, `id`: `any`) => `void` |
|
||||
| `insertNode` | (`elem`: `any`, `node`: `any`, `dir`: `any`) => `Promise`<`any`> |
|
||||
| `interpolateToCurve` | (`interpolate`: `undefined` \| `string`, `defaultCurve`: `CurveFactory`) => `CurveFactory` |
|
||||
| `labelHelper` | (`parent`: `any`, `node`: `any`, `_classes`: `any`) => `Promise`<{ `bbox`: `any` ; `halfPadding`: `number` ; `label`: `any` = labelEl; `shapeSvg`: `any` }> |
|
||||
| `log` | `Record`<`LogLevel`, (...`data`: `any`\[]) => `void`(`message?`: `any`, ...`optionalParams`: `any`\[]) => `void`> |
|
||||
| `positionEdgeLabel` | (`edge`: `any`, `paths`: `any`) => `void` |
|
||||
|
||||
#### Defined in
|
||||
|
||||
[packages/mermaid/src/mermaid.ts:439](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaid.ts#L439)
|
||||
[packages/mermaid/src/mermaid.ts:434](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaid.ts#L434)
|
||||
|
||||
---
|
||||
|
||||
@ -173,7 +130,7 @@ Use [parse](mermaid.Mermaid.md#parse) and [render](mermaid.Mermaid.md#render) in
|
||||
|
||||
#### Defined in
|
||||
|
||||
[packages/mermaid/src/mermaid.ts:421](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaid.ts#L421)
|
||||
[packages/mermaid/src/mermaid.ts:424](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaid.ts#L424)
|
||||
|
||||
---
|
||||
|
||||
@ -223,7 +180,7 @@ Error if the diagram is invalid and parseOptions.suppressErrors is false or not
|
||||
|
||||
#### Defined in
|
||||
|
||||
[packages/mermaid/src/mermaid.ts:422](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaid.ts#L422)
|
||||
[packages/mermaid/src/mermaid.ts:425](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaid.ts#L425)
|
||||
|
||||
---
|
||||
|
||||
@ -233,7 +190,7 @@ Error if the diagram is invalid and parseOptions.suppressErrors is false or not
|
||||
|
||||
#### Defined in
|
||||
|
||||
[packages/mermaid/src/mermaid.ts:416](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaid.ts#L416)
|
||||
[packages/mermaid/src/mermaid.ts:419](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaid.ts#L419)
|
||||
|
||||
---
|
||||
|
||||
@ -261,7 +218,7 @@ Used to register external diagram types.
|
||||
|
||||
#### Defined in
|
||||
|
||||
[packages/mermaid/src/mermaid.ts:430](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaid.ts#L430)
|
||||
[packages/mermaid/src/mermaid.ts:433](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaid.ts#L433)
|
||||
|
||||
---
|
||||
|
||||
@ -285,7 +242,7 @@ Used to register external diagram types.
|
||||
|
||||
#### Defined in
|
||||
|
||||
[packages/mermaid/src/mermaid.ts:429](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaid.ts#L429)
|
||||
[packages/mermaid/src/mermaid.ts:432](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaid.ts#L432)
|
||||
|
||||
---
|
||||
|
||||
@ -311,7 +268,7 @@ Used to register external diagram types.
|
||||
|
||||
#### Defined in
|
||||
|
||||
[packages/mermaid/src/mermaid.ts:423](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaid.ts#L423)
|
||||
[packages/mermaid/src/mermaid.ts:426](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaid.ts#L426)
|
||||
|
||||
---
|
||||
|
||||
@ -359,7 +316,7 @@ Renders the mermaid diagrams
|
||||
|
||||
#### Defined in
|
||||
|
||||
[packages/mermaid/src/mermaid.ts:428](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaid.ts#L428)
|
||||
[packages/mermaid/src/mermaid.ts:431](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaid.ts#L431)
|
||||
|
||||
---
|
||||
|
||||
@ -394,7 +351,7 @@ to it (eg. dart interop wrapper). (Initially there is no parseError member of me
|
||||
|
||||
#### Defined in
|
||||
|
||||
[packages/mermaid/src/mermaid.ts:433](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaid.ts#L433)
|
||||
[packages/mermaid/src/mermaid.ts:436](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaid.ts#L436)
|
||||
|
||||
---
|
||||
|
||||
@ -404,4 +361,4 @@ to it (eg. dart interop wrapper). (Initially there is no parseError member of me
|
||||
|
||||
#### Defined in
|
||||
|
||||
[packages/mermaid/src/mermaid.ts:415](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaid.ts#L415)
|
||||
[packages/mermaid/src/mermaid.ts:418](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaid.ts#L418)
|
||||
|
||||
19
docs/config/setup/interfaces/mermaid.RenderOptions.md
Normal file
19
docs/config/setup/interfaces/mermaid.RenderOptions.md
Normal file
@ -0,0 +1,19 @@
|
||||
> **Warning**
|
||||
>
|
||||
> ## THIS IS AN AUTOGENERATED FILE. DO NOT EDIT.
|
||||
>
|
||||
> ## Please edit the corresponding file in [/packages/mermaid/src/docs/config/setup/interfaces/mermaid.RenderOptions.md](../../../../packages/mermaid/src/docs/config/setup/interfaces/mermaid.RenderOptions.md).
|
||||
|
||||
# Interface: RenderOptions
|
||||
|
||||
[mermaid](../modules/mermaid.md).RenderOptions
|
||||
|
||||
## Properties
|
||||
|
||||
### algorithm
|
||||
|
||||
• `Optional` **algorithm**: `string`
|
||||
|
||||
#### Defined in
|
||||
|
||||
[packages/mermaid/src/rendering-util/render.ts:8](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/rendering-util/render.ts#L8)
|
||||
@ -18,7 +18,7 @@ The nodes to render. If this is set, `querySelector` will be ignored.
|
||||
|
||||
#### Defined in
|
||||
|
||||
[packages/mermaid/src/mermaid.ts:45](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaid.ts#L45)
|
||||
[packages/mermaid/src/mermaid.ts:48](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaid.ts#L48)
|
||||
|
||||
---
|
||||
|
||||
@ -44,7 +44,7 @@ A callback to call after each diagram is rendered.
|
||||
|
||||
#### Defined in
|
||||
|
||||
[packages/mermaid/src/mermaid.ts:49](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaid.ts#L49)
|
||||
[packages/mermaid/src/mermaid.ts:52](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaid.ts#L52)
|
||||
|
||||
---
|
||||
|
||||
@ -56,7 +56,7 @@ The query selector to use when finding elements to render. Default: `".mermaid"`
|
||||
|
||||
#### Defined in
|
||||
|
||||
[packages/mermaid/src/mermaid.ts:41](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaid.ts#L41)
|
||||
[packages/mermaid/src/mermaid.ts:44](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaid.ts#L44)
|
||||
|
||||
---
|
||||
|
||||
@ -68,4 +68,4 @@ If `true`, errors will be logged to the console, but not thrown. Default: `false
|
||||
|
||||
#### Defined in
|
||||
|
||||
[packages/mermaid/src/mermaid.ts:53](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaid.ts#L53)
|
||||
[packages/mermaid/src/mermaid.ts:56](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaid.ts#L56)
|
||||
|
||||
@ -20,11 +20,22 @@
|
||||
- [MermaidConfig](../interfaces/mermaid.MermaidConfig.md)
|
||||
- [ParseOptions](../interfaces/mermaid.ParseOptions.md)
|
||||
- [ParseResult](../interfaces/mermaid.ParseResult.md)
|
||||
- [RenderOptions](../interfaces/mermaid.RenderOptions.md)
|
||||
- [RenderResult](../interfaces/mermaid.RenderResult.md)
|
||||
- [RunOptions](../interfaces/mermaid.RunOptions.md)
|
||||
|
||||
## Type Aliases
|
||||
|
||||
### InternalHelpers
|
||||
|
||||
Ƭ **InternalHelpers**: typeof `internalHelpers`
|
||||
|
||||
#### Defined in
|
||||
|
||||
[packages/mermaid/src/internals.ts:33](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/internals.ts#L33)
|
||||
|
||||
---
|
||||
|
||||
### ParseErrorFunction
|
||||
|
||||
Ƭ **ParseErrorFunction**: (`err`: `string` | [`DetailedError`](../interfaces/mermaid.DetailedError.md) | `unknown`, `hash?`: `any`) => `void`
|
||||
@ -48,6 +59,26 @@
|
||||
|
||||
[packages/mermaid/src/Diagram.ts:10](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/Diagram.ts#L10)
|
||||
|
||||
---
|
||||
|
||||
### SVG
|
||||
|
||||
Ƭ **SVG**: `d3.Selection`<`SVGSVGElement`, `unknown`, `Element` | `null`, `unknown`>
|
||||
|
||||
#### Defined in
|
||||
|
||||
[packages/mermaid/src/diagram-api/types.ts:130](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/diagram-api/types.ts#L130)
|
||||
|
||||
---
|
||||
|
||||
### SVGGroup
|
||||
|
||||
Ƭ **SVGGroup**: `d3.Selection`<`SVGGElement`, `unknown`, `Element` | `null`, `unknown`>
|
||||
|
||||
#### Defined in
|
||||
|
||||
[packages/mermaid/src/diagram-api/types.ts:132](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/diagram-api/types.ts#L132)
|
||||
|
||||
## Variables
|
||||
|
||||
### default
|
||||
@ -56,4 +87,4 @@
|
||||
|
||||
#### Defined in
|
||||
|
||||
[packages/mermaid/src/mermaid.ts:442](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaid.ts#L442)
|
||||
[packages/mermaid/src/mermaid.ts:440](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaid.ts#L440)
|
||||
|
||||
@ -31,13 +31,16 @@
|
||||
],
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"elkjs": "^0.9.3",
|
||||
"d3": "^7.9.0"
|
||||
"d3": "^7.9.0",
|
||||
"elkjs": "^0.9.3"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"mermaid": "workspace:^"
|
||||
},
|
||||
"files": [
|
||||
"dist"
|
||||
]
|
||||
],
|
||||
"devDependencies": {
|
||||
"@types/d3": "^7.4.3"
|
||||
}
|
||||
}
|
||||
|
||||
File diff suppressed because it is too large
Load Diff
@ -129,6 +129,6 @@ export type HTML = d3.Selection<HTMLIFrameElement, unknown, Element | null, unkn
|
||||
|
||||
export type SVG = d3.Selection<SVGSVGElement, unknown, Element | null, unknown>;
|
||||
|
||||
export type Group = d3.Selection<SVGGElement, unknown, Element | null, unknown>;
|
||||
export type SVGGroup = d3.Selection<SVGGElement, unknown, Element | null, unknown>;
|
||||
|
||||
export type DiagramStylesProvider = (options?: any) => string;
|
||||
|
||||
@ -1,5 +1,6 @@
|
||||
import { sanitizeUrl } from '@braintree/sanitize-url';
|
||||
import type { Group, SVG } from '../../diagram-api/types.js';
|
||||
import type { SVG, SVGGroup } from '../../diagram-api/types.js';
|
||||
import { lineBreakRegex } from './common.js';
|
||||
import type {
|
||||
Bound,
|
||||
D3ImageElement,
|
||||
@ -11,9 +12,8 @@ import type {
|
||||
TextData,
|
||||
TextObject,
|
||||
} from './commonTypes.js';
|
||||
import { lineBreakRegex } from './common.js';
|
||||
|
||||
export const drawRect = (element: SVG | Group, rectData: RectData): D3RectElement => {
|
||||
export const drawRect = (element: SVG | SVGGroup, rectData: RectData): D3RectElement => {
|
||||
const rectElement: D3RectElement = element.append('rect');
|
||||
rectElement.attr('x', rectData.x);
|
||||
rectElement.attr('y', rectData.y);
|
||||
@ -50,7 +50,7 @@ export const drawRect = (element: SVG | Group, rectData: RectData): D3RectElemen
|
||||
* @param element - Diagram (reference for bounds)
|
||||
* @param bounds - Shape of the rectangle
|
||||
*/
|
||||
export const drawBackgroundRect = (element: SVG | Group, bounds: Bound): void => {
|
||||
export const drawBackgroundRect = (element: SVG | SVGGroup, bounds: Bound): void => {
|
||||
const rectData: RectData = {
|
||||
x: bounds.startx,
|
||||
y: bounds.starty,
|
||||
@ -64,7 +64,7 @@ export const drawBackgroundRect = (element: SVG | Group, bounds: Bound): void =>
|
||||
rectElement.lower();
|
||||
};
|
||||
|
||||
export const drawText = (element: SVG | Group, textData: TextData): D3TextElement => {
|
||||
export const drawText = (element: SVG | SVGGroup, textData: TextData): D3TextElement => {
|
||||
const nText: string = textData.text.replace(lineBreakRegex, ' ');
|
||||
|
||||
const textElem: D3TextElement = element.append('text');
|
||||
@ -84,7 +84,7 @@ export const drawText = (element: SVG | Group, textData: TextData): D3TextElemen
|
||||
return textElem;
|
||||
};
|
||||
|
||||
export const drawImage = (elem: SVG | Group, x: number, y: number, link: string): void => {
|
||||
export const drawImage = (elem: SVG | SVGGroup, x: number, y: number, link: string): void => {
|
||||
const imageElement: D3ImageElement = elem.append('image');
|
||||
imageElement.attr('x', x);
|
||||
imageElement.attr('y', y);
|
||||
@ -93,7 +93,7 @@ export const drawImage = (elem: SVG | Group, x: number, y: number, link: string)
|
||||
};
|
||||
|
||||
export const drawEmbeddedImage = (
|
||||
element: SVG | Group,
|
||||
element: SVG | SVGGroup,
|
||||
x: number,
|
||||
y: number,
|
||||
link: string
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
import type { SVG, SVGGroup } from '../../diagram-api/types.js';
|
||||
import { log } from '../../logger.js';
|
||||
import type { Group, SVG } from '../../diagram-api/types.js';
|
||||
import { selectSvgElement } from '../../rendering-util/selectSvgElement.js';
|
||||
import { configureSvgSize } from '../../setupGraphViewbox.js';
|
||||
|
||||
@ -13,7 +13,7 @@ import { configureSvgSize } from '../../setupGraphViewbox.js';
|
||||
export const draw = (_text: string, id: string, version: string) => {
|
||||
log.debug('rendering svg for syntax error\n');
|
||||
const svg: SVG = selectSvgElement(id);
|
||||
const g: Group = svg.append('g');
|
||||
const g: SVGGroup = svg.append('g');
|
||||
|
||||
svg.attr('viewBox', '0 0 2412 512');
|
||||
configureSvgSize(svg, 100, 512, true);
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
import type { DrawDefinition, SVG, SVGGroup } from '../../diagram-api/types.js';
|
||||
import { log } from '../../logger.js';
|
||||
import { configureSvgSize } from '../../setupGraphViewbox.js';
|
||||
import type { DrawDefinition, Group, SVG } from '../../diagram-api/types.js';
|
||||
import { selectSvgElement } from '../../rendering-util/selectSvgElement.js';
|
||||
import { configureSvgSize } from '../../setupGraphViewbox.js';
|
||||
|
||||
/**
|
||||
* Draws a an info picture in the tag with id: id based on the graph definition in text.
|
||||
@ -16,7 +16,7 @@ const draw: DrawDefinition = (text, id, version) => {
|
||||
const svg: SVG = selectSvgElement(id);
|
||||
configureSvgSize(svg, 100, 400, true);
|
||||
|
||||
const group: Group = svg.append('g');
|
||||
const group: SVGGroup = svg.append('g');
|
||||
group
|
||||
.append('text')
|
||||
.attr('x', 100)
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
import type { Diagram } from '../../Diagram.js';
|
||||
import type { PacketDiagramConfig } from '../../config.type.js';
|
||||
import type { DiagramRenderer, DrawDefinition, Group, SVG } from '../../diagram-api/types.js';
|
||||
import type { DiagramRenderer, DrawDefinition, SVG, SVGGroup } from '../../diagram-api/types.js';
|
||||
import { selectSvgElement } from '../../rendering-util/selectSvgElement.js';
|
||||
import { configureSvgSize } from '../../setupGraphViewbox.js';
|
||||
import type { PacketDB, PacketWord } from './types.js';
|
||||
@ -39,7 +39,7 @@ const drawWord = (
|
||||
rowNumber: number,
|
||||
{ rowHeight, paddingX, paddingY, bitWidth, bitsPerRow, showBits }: Required<PacketDiagramConfig>
|
||||
) => {
|
||||
const group: Group = svg.append('g');
|
||||
const group: SVGGroup = svg.append('g');
|
||||
const wordY = rowNumber * (rowHeight + paddingY) + paddingY;
|
||||
for (const block of word) {
|
||||
const blockX = (block.start % bitsPerRow) * bitWidth + 1;
|
||||
|
||||
@ -1,13 +1,13 @@
|
||||
import type d3 from 'd3';
|
||||
import { scaleOrdinal, pie as d3pie, arc } from 'd3';
|
||||
import { log } from '../../logger.js';
|
||||
import { configureSvgSize } from '../../setupGraphViewbox.js';
|
||||
import { getConfig } from '../../diagram-api/diagramAPI.js';
|
||||
import { cleanAndMerge, parseFontSize } from '../../utils.js';
|
||||
import type { DrawDefinition, Group, SVG } from '../../diagram-api/types.js';
|
||||
import type { D3Section, PieDB, Sections } from './pieTypes.js';
|
||||
import { arc, pie as d3pie, scaleOrdinal } from 'd3';
|
||||
import type { MermaidConfig, PieDiagramConfig } from '../../config.type.js';
|
||||
import { getConfig } from '../../diagram-api/diagramAPI.js';
|
||||
import type { DrawDefinition, SVG, SVGGroup } from '../../diagram-api/types.js';
|
||||
import { log } from '../../logger.js';
|
||||
import { selectSvgElement } from '../../rendering-util/selectSvgElement.js';
|
||||
import { configureSvgSize } from '../../setupGraphViewbox.js';
|
||||
import { cleanAndMerge, parseFontSize } from '../../utils.js';
|
||||
import type { D3Section, PieDB, Sections } from './pieTypes.js';
|
||||
|
||||
const createPieArcs = (sections: Sections): d3.PieArcDatum<D3Section>[] => {
|
||||
// Compute the position of each group on the pie:
|
||||
@ -46,7 +46,7 @@ export const draw: DrawDefinition = (text, id, _version, diagObj) => {
|
||||
const height = 450;
|
||||
const pieWidth: number = height;
|
||||
const svg: SVG = selectSvgElement(id);
|
||||
const group: Group = svg.append('g');
|
||||
const group: SVGGroup = svg.append('g');
|
||||
group.attr('transform', 'translate(' + pieWidth / 2 + ',' + height / 2 + ')');
|
||||
|
||||
const { themeVariables } = globalConfig;
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
import type { Group } from '../../../../../diagram-api/types.js';
|
||||
import type { SVGGroup } from '../../../../../diagram-api/types.js';
|
||||
import type {
|
||||
AxisDataType,
|
||||
ChartComponent,
|
||||
@ -25,7 +25,7 @@ export function getAxis(
|
||||
data: AxisDataType,
|
||||
axisConfig: XYChartAxisConfig,
|
||||
axisThemeConfig: XYChartAxisThemeConfig,
|
||||
tmpSVGGroup: Group
|
||||
tmpSVGGroup: SVGGroup
|
||||
): Axis {
|
||||
const textDimensionCalculator = new TextDimensionCalculatorWithFont(tmpSVGGroup);
|
||||
if (isBandAxisData(data)) {
|
||||
|
||||
@ -1,13 +1,13 @@
|
||||
import type { Group } from '../../../../diagram-api/types.js';
|
||||
import type { SVGGroup } from '../../../../diagram-api/types.js';
|
||||
import type {
|
||||
BoundingRect,
|
||||
ChartComponent,
|
||||
Dimension,
|
||||
DrawableElem,
|
||||
Point,
|
||||
XYChartConfig,
|
||||
XYChartData,
|
||||
XYChartThemeConfig,
|
||||
XYChartConfig,
|
||||
} from '../interfaces.js';
|
||||
import type { TextDimensionCalculator } from '../textDimensionCalculator.js';
|
||||
import { TextDimensionCalculatorWithFont } from '../textDimensionCalculator.js';
|
||||
@ -84,7 +84,7 @@ export function getChartTitleComponent(
|
||||
chartConfig: XYChartConfig,
|
||||
chartData: XYChartData,
|
||||
chartThemeConfig: XYChartThemeConfig,
|
||||
tmpSVGGroup: Group
|
||||
tmpSVGGroup: SVGGroup
|
||||
): ChartComponent {
|
||||
const textDimensionCalculator = new TextDimensionCalculatorWithFont(tmpSVGGroup);
|
||||
return new ChartTitle(textDimensionCalculator, chartConfig, chartData, chartThemeConfig);
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
import type { Group } from '../../../diagram-api/types.js';
|
||||
import type { SVGGroup } from '../../../diagram-api/types.js';
|
||||
import type { DrawableElem, XYChartConfig, XYChartData, XYChartThemeConfig } from './interfaces.js';
|
||||
import { Orchestrator } from './orchestrator.js';
|
||||
|
||||
@ -7,7 +7,7 @@ export class XYChartBuilder {
|
||||
config: XYChartConfig,
|
||||
chartData: XYChartData,
|
||||
chartThemeConfig: XYChartThemeConfig,
|
||||
tmpSVGGroup: Group
|
||||
tmpSVGGroup: SVGGroup
|
||||
): DrawableElem[] {
|
||||
const orchestrator = new Orchestrator(config, chartData, chartThemeConfig, tmpSVGGroup);
|
||||
return orchestrator.getDrawableElement();
|
||||
|
||||
@ -1,3 +1,9 @@
|
||||
import type { SVGGroup } from '../../../diagram-api/types.js';
|
||||
import type { Axis } from './components/axis/index.js';
|
||||
import { getAxis } from './components/axis/index.js';
|
||||
import { getChartTitleComponent } from './components/chartTitle.js';
|
||||
import type { Plot } from './components/plot/index.js';
|
||||
import { getPlotComponent } from './components/plot/index.js';
|
||||
import type {
|
||||
ChartComponent,
|
||||
DrawableElem,
|
||||
@ -6,12 +12,6 @@ import type {
|
||||
XYChartThemeConfig,
|
||||
} from './interfaces.js';
|
||||
import { isBarPlot } from './interfaces.js';
|
||||
import type { Axis } from './components/axis/index.js';
|
||||
import { getAxis } from './components/axis/index.js';
|
||||
import { getChartTitleComponent } from './components/chartTitle.js';
|
||||
import type { Plot } from './components/plot/index.js';
|
||||
import { getPlotComponent } from './components/plot/index.js';
|
||||
import type { Group } from '../../../diagram-api/types.js';
|
||||
|
||||
export class Orchestrator {
|
||||
private componentStore: {
|
||||
@ -24,7 +24,7 @@ export class Orchestrator {
|
||||
private chartConfig: XYChartConfig,
|
||||
private chartData: XYChartData,
|
||||
chartThemeConfig: XYChartThemeConfig,
|
||||
tmpSVGGroup: Group
|
||||
tmpSVGGroup: SVGGroup
|
||||
) {
|
||||
this.componentStore = {
|
||||
title: getChartTitleComponent(chartConfig, chartData, chartThemeConfig, tmpSVGGroup),
|
||||
|
||||
@ -1,13 +1,13 @@
|
||||
import type { Dimension } from './interfaces.js';
|
||||
import type { SVGGroup } from '../../../diagram-api/types.js';
|
||||
import { computeDimensionOfText } from '../../../rendering-util/createText.js';
|
||||
import type { Group } from '../../../diagram-api/types.js';
|
||||
import type { Dimension } from './interfaces.js';
|
||||
|
||||
export interface TextDimensionCalculator {
|
||||
getMaxDimension(texts: string[], fontSize: number): Dimension;
|
||||
}
|
||||
|
||||
export class TextDimensionCalculatorWithFont implements TextDimensionCalculator {
|
||||
constructor(private parentGroup: Group) {}
|
||||
constructor(private parentGroup: SVGGroup) {}
|
||||
getMaxDimension(texts: string[], fontSize: number): Dimension {
|
||||
if (!this.parentGroup) {
|
||||
return {
|
||||
|
||||
@ -1,3 +1,9 @@
|
||||
import * as configApi from '../../config.js';
|
||||
import defaultConfig from '../../defaultConfig.js';
|
||||
import type { SVGGroup } from '../../diagram-api/types.js';
|
||||
import { getThemeVariables } from '../../themes/theme-default.js';
|
||||
import { cleanAndMerge } from '../../utils.js';
|
||||
import { sanitizeText } from '../common/common.js';
|
||||
import {
|
||||
clear as commonClear,
|
||||
getAccDescription,
|
||||
@ -7,11 +13,6 @@ import {
|
||||
setAccTitle,
|
||||
setDiagramTitle,
|
||||
} from '../common/commonDb.js';
|
||||
import * as configApi from '../../config.js';
|
||||
import defaultConfig from '../../defaultConfig.js';
|
||||
import { getThemeVariables } from '../../themes/theme-default.js';
|
||||
import { cleanAndMerge } from '../../utils.js';
|
||||
import { sanitizeText } from '../common/common.js';
|
||||
import { XYChartBuilder } from './chartBuilder/index.js';
|
||||
import type {
|
||||
DrawableElem,
|
||||
@ -21,11 +22,10 @@ import type {
|
||||
XYChartThemeConfig,
|
||||
} from './chartBuilder/interfaces.js';
|
||||
import { isBandAxisData, isLinearAxisData } from './chartBuilder/interfaces.js';
|
||||
import type { Group } from '../../diagram-api/types.js';
|
||||
|
||||
let plotIndex = 0;
|
||||
|
||||
let tmpSVGGroup: Group;
|
||||
let tmpSVGGroup: SVGGroup;
|
||||
|
||||
let xyChartConfig: XYChartConfig = getChartDefaultConfig();
|
||||
let xyChartThemeConfig: XYChartThemeConfig = getChartDefaultThemeConfig();
|
||||
@ -75,7 +75,7 @@ function textSanitizer(text: string) {
|
||||
return sanitizeText(text.trim(), config);
|
||||
}
|
||||
|
||||
function setTmpSVGG(SVGG: Group) {
|
||||
function setTmpSVGG(SVGG: SVGGroup) {
|
||||
tmpSVGGroup = SVGG;
|
||||
}
|
||||
function setOrientation(orientation: string) {
|
||||
|
||||
@ -29,3 +29,5 @@ export const internalHelpers = {
|
||||
log,
|
||||
positionEdgeLabel,
|
||||
};
|
||||
|
||||
export type InternalHelpers = typeof internalHelpers;
|
||||
|
||||
@ -4,34 +4,37 @@
|
||||
*/
|
||||
import { dedent } from 'ts-dedent';
|
||||
import type { MermaidConfig } from './config.type.js';
|
||||
import { log } from './logger.js';
|
||||
import utils from './utils.js';
|
||||
import type { ParseOptions, ParseResult, RenderResult } from './types.js';
|
||||
import { mermaidAPI } from './mermaidAPI.js';
|
||||
import { registerLazyLoadedDiagrams, detectType } from './diagram-api/detectType.js';
|
||||
import { loadRegisteredDiagrams } from './diagram-api/loadDiagram.js';
|
||||
import type { ParseErrorFunction } from './Diagram.js';
|
||||
import { isDetailedError } from './utils.js';
|
||||
import type { DetailedError } from './utils.js';
|
||||
import type { ExternalDiagramDefinition } from './diagram-api/types.js';
|
||||
import type { UnknownDiagramError } from './errors.js';
|
||||
import { detectType, registerLazyLoadedDiagrams } from './diagram-api/detectType.js';
|
||||
import { addDiagrams } from './diagram-api/diagram-orchestration.js';
|
||||
import { loadRegisteredDiagrams } from './diagram-api/loadDiagram.js';
|
||||
import type { ExternalDiagramDefinition, SVG, SVGGroup } from './diagram-api/types.js';
|
||||
import type { ParseErrorFunction } from './Diagram.js';
|
||||
import type { UnknownDiagramError } from './errors.js';
|
||||
import type { InternalHelpers } from './internals.js';
|
||||
import { log } from './logger.js';
|
||||
import { mermaidAPI } from './mermaidAPI.js';
|
||||
import type { LayoutLoaderDefinition, RenderOptions } from './rendering-util/render.js';
|
||||
import { registerLayoutLoaders } from './rendering-util/render.js';
|
||||
import type { LayoutLoaderDefinition } from './rendering-util/render.js';
|
||||
import { internalHelpers } from './internals.js';
|
||||
import type { LayoutData } from './rendering-util/types.js';
|
||||
import type { ParseOptions, ParseResult, RenderResult } from './types.js';
|
||||
import type { DetailedError } from './utils.js';
|
||||
import utils, { isDetailedError } from './utils.js';
|
||||
|
||||
export type {
|
||||
MermaidConfig,
|
||||
DetailedError,
|
||||
ExternalDiagramDefinition,
|
||||
InternalHelpers,
|
||||
LayoutData,
|
||||
LayoutLoaderDefinition,
|
||||
MermaidConfig,
|
||||
ParseErrorFunction,
|
||||
RenderResult,
|
||||
ParseOptions,
|
||||
ParseResult,
|
||||
RenderOptions,
|
||||
RenderResult,
|
||||
SVG,
|
||||
SVGGroup,
|
||||
UnknownDiagramError,
|
||||
LayoutLoaderDefinition,
|
||||
LayoutData,
|
||||
};
|
||||
|
||||
export interface RunOptions {
|
||||
@ -432,11 +435,6 @@ export interface Mermaid {
|
||||
contentLoaded: typeof contentLoaded;
|
||||
setParseErrorHandler: typeof setParseErrorHandler;
|
||||
detectType: typeof detectType;
|
||||
/**
|
||||
* Internal helpers for mermaid
|
||||
* @deprecated - This should not be used by external packages, as the definitions will change without notice.
|
||||
*/
|
||||
internalHelpers: typeof internalHelpers;
|
||||
}
|
||||
|
||||
const mermaid: Mermaid = {
|
||||
@ -453,7 +451,6 @@ const mermaid: Mermaid = {
|
||||
contentLoaded,
|
||||
setParseErrorHandler,
|
||||
detectType,
|
||||
internalHelpers,
|
||||
};
|
||||
|
||||
export default mermaid;
|
||||
|
||||
@ -1,16 +1,16 @@
|
||||
/* eslint-disable @typescript-eslint/no-explicit-any */
|
||||
// @ts-nocheck TODO: Fix types
|
||||
import type { MermaidConfig } from '../config.type.js';
|
||||
import type { Group } from '../diagram-api/types.js';
|
||||
import { getConfig } from '$root/diagram-api/diagramAPI.js';
|
||||
import common, { hasKatex, renderKatex } from '$root/diagrams/common/common.js';
|
||||
import { select } from 'd3';
|
||||
import type { MermaidConfig } from '../config.type.js';
|
||||
import type { SVGGroup } from '../diagram-api/types.js';
|
||||
import type { D3TSpanElement, D3TextElement } from '../diagrams/common/commonTypes.js';
|
||||
import { log } from '../logger.js';
|
||||
import { markdownToHTML, markdownToLines } from '../rendering-util/handle-markdown-text.js';
|
||||
import { decodeEntities } from '../utils.js';
|
||||
import { splitLineToFitWidth } from './splitText.js';
|
||||
import type { MarkdownLine, MarkdownWord } from './types.js';
|
||||
import common, { hasKatex, renderKatex } from '$root/diagrams/common/common.js';
|
||||
import { getConfig } from '$root/diagram-api/diagramAPI.js';
|
||||
|
||||
function applyStyle(dom, styleFn) {
|
||||
if (styleFn) {
|
||||
@ -82,7 +82,7 @@ function computeWidthOfText(parentNode: any, lineHeight: number, line: MarkdownL
|
||||
}
|
||||
|
||||
export function computeDimensionOfText(
|
||||
parentNode: Group,
|
||||
parentNode: SVGGroup,
|
||||
lineHeight: number,
|
||||
text: string
|
||||
): DOMRect | undefined {
|
||||
|
||||
@ -1,7 +1,21 @@
|
||||
import type { SVG } from '$root/diagram-api/types.js';
|
||||
import type { InternalHelpers } from '$root/internals.js';
|
||||
import { internalHelpers } from '$root/internals.js';
|
||||
import { log } from '$root/logger.js';
|
||||
import type { LayoutData } from './types.js';
|
||||
|
||||
export interface RenderOptions {
|
||||
algorithm?: string;
|
||||
}
|
||||
|
||||
export interface LayoutAlgorithm {
|
||||
render(data4Layout: any, svg: any, element: any, algorithm?: string): any;
|
||||
render(
|
||||
layoutData: LayoutData,
|
||||
svg: SVG,
|
||||
element: any,
|
||||
helpers: InternalHelpers,
|
||||
options?: RenderOptions
|
||||
): Promise<void>;
|
||||
}
|
||||
|
||||
export type LayoutLoader = () => Promise<LayoutAlgorithm>;
|
||||
@ -31,14 +45,16 @@ const registerDefaultLayoutLoaders = () => {
|
||||
|
||||
registerDefaultLayoutLoaders();
|
||||
|
||||
export const render = async (data4Layout: any, svg: any, element: any) => {
|
||||
export const render = async (data4Layout: LayoutData, svg: SVG, element: any) => {
|
||||
if (!(data4Layout.layoutAlgorithm in layoutAlgorithms)) {
|
||||
throw new Error(`Unknown layout algorithm: ${data4Layout.layoutAlgorithm}`);
|
||||
}
|
||||
|
||||
const layoutDefinition = layoutAlgorithms[data4Layout.layoutAlgorithm];
|
||||
const layoutRenderer = await layoutDefinition.loader();
|
||||
return layoutRenderer.render(data4Layout, svg, element, layoutDefinition.algorithm);
|
||||
return layoutRenderer.render(data4Layout, svg, element, internalHelpers, {
|
||||
algorithm: layoutDefinition.algorithm,
|
||||
});
|
||||
};
|
||||
|
||||
/**
|
||||
|
||||
@ -538,6 +538,27 @@ export const insertEdge = function (elem, edge, clusterDb, diagramType, startNod
|
||||
.attr('style', edgeStyles ? edgeStyles.reduce((acc, style) => acc + ';' + style, '') : '');
|
||||
}
|
||||
|
||||
// DEBUG code, DO NOT REMOVE
|
||||
// adds a red circle at each edge coordinate
|
||||
// cornerPoints.forEach((point) => {
|
||||
// elem
|
||||
// .append('circle')
|
||||
// .style('stroke', 'blue')
|
||||
// .style('fill', 'blue')
|
||||
// .attr('r', 3)
|
||||
// .attr('cx', point.x)
|
||||
// .attr('cy', point.y);
|
||||
// });
|
||||
// lineData.forEach((point) => {
|
||||
// elem
|
||||
// .append('circle')
|
||||
// .style('stroke', 'blue')
|
||||
// .style('fill', 'blue')
|
||||
// .attr('r', 3)
|
||||
// .attr('cx', point.x)
|
||||
// .attr('cy', point.y);
|
||||
// });
|
||||
|
||||
let url = '';
|
||||
if (getConfig().flowchart.arrowMarkerAbsolute || getConfig().state.arrowMarkerAbsolute) {
|
||||
url =
|
||||
|
||||
@ -118,7 +118,7 @@ properties:
|
||||
- NETWORK_SIMPLEX
|
||||
- LINEAR_SEGMENTS
|
||||
- BRANDES_KOEPF
|
||||
default: SIMPLE
|
||||
default: BRANDES_KOEPF
|
||||
darkMode:
|
||||
type: boolean
|
||||
default: false
|
||||
|
||||
402
pnpm-lock.yaml
generated
402
pnpm-lock.yaml
generated
File diff suppressed because it is too large
Load Diff
Loading…
x
Reference in New Issue
Block a user