Skip to content

Commit 99978da

Browse files
Yokozuna59Yokozuna59
authored
Merge pull request #4724 from Yokozuna59/chore/convert-svgDrawCommon-to-ts
convert `diagrams/common/svgDrawCommon.js` to ts
2 parents 085e8f7 + 50eb3cf commit 99978da

File tree

9 files changed

+201
-130
lines changed

9 files changed

+201
-130
lines changed

‎packages/mermaid/src/diagrams/c4/svgDraw.js

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import common from '../common/common.js';
2-
import * as svgDrawCommon from '../common/svgDrawCommon';
2+
import * as svgDrawCommon from '../common/svgDrawCommon.js';
33
import { sanitizeUrl } from '@braintree/sanitize-url';
44

55
export const drawRect = function (elem, rectData) {

‎packages/mermaid/src/diagrams/common/common.spec.js renamed to ‎packages/mermaid/src/diagrams/common/common.spec.ts

+12-12
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,15 @@
11
import { sanitizeText, removeScript, parseGenericTypes } from './common.js';
22

3-
describe('when securityLevel is antiscript, all script must be removed', function () {
3+
describe('when securityLevel is antiscript, all script must be removed', () => {
44
/**
5-
* @param {string} original The original text
6-
* @param {string} result The expected sanitized text
5+
* @param original - The original text
6+
* @param result - The expected sanitized text
77
*/
8-
function compareRemoveScript(original, result) {
8+
function compareRemoveScript(original: string, result: string) {
99
expect(removeScript(original).trim()).toEqual(result);
1010
}
1111

12-
it('should remove all script block, script inline.', function () {
12+
it('should remove all script block, script inline.', () => {
1313
const labelString = `1
1414
Act1: Hello 1<script src="http://abc.com/script1.js"></script>1
1515
<b>Act2</b>:
@@ -25,7 +25,7 @@ describe('when securityLevel is antiscript, all script must be removed', functio
2525
compareRemoveScript(labelString, exactlyString);
2626
});
2727

28-
it('should remove all javascript urls', function () {
28+
it('should remove all javascript urls', () => {
2929
compareRemoveScript(
3030
`This is a <a href="javascript:runHijackingScript();">clean link</a> + <a href="javascript:runHijackingScript();">clean link</a>
3131
and <a href="javascript&colon;bipassedMining();">me too</a>`,
@@ -34,11 +34,11 @@ describe('when securityLevel is antiscript, all script must be removed', functio
3434
);
3535
});
3636

37-
it('should detect malicious images', function () {
37+
it('should detect malicious images', () => {
3838
compareRemoveScript(`<img onerror="alert('hello');">`, `<img>`);
3939
});
4040

41-
it('should detect iframes', function () {
41+
it('should detect iframes', () => {
4242
compareRemoveScript(
4343
`<iframe src="http://abc.com/script1.js"></iframe>
4444
<iframe src="http://example.com/iframeexample"></iframe>`,
@@ -47,8 +47,8 @@ describe('when securityLevel is antiscript, all script must be removed', functio
4747
});
4848
});
4949

50-
describe('Sanitize text', function () {
51-
it('should remove script tag', function () {
50+
describe('Sanitize text', () => {
51+
it('should remove script tag', () => {
5252
const maliciousStr = 'javajavascript:script:alert(1)';
5353
const result = sanitizeText(maliciousStr, {
5454
securityLevel: 'strict',
@@ -58,8 +58,8 @@ describe('Sanitize text', function () {
5858
});
5959
});
6060

61-
describe('generic parser', function () {
62-
it('should parse generic types', function () {
61+
describe('generic parser', () => {
62+
it('should parse generic types', () => {
6363
expect(parseGenericTypes('test~T~')).toEqual('test<T>');
6464
expect(parseGenericTypes('test~Array~Array~string~~~')).toEqual('test<Array<Array<string>>>');
6565
expect(parseGenericTypes('test~Array~Array~string[]~~~')).toEqual(

‎packages/mermaid/src/diagrams/common/common.ts

+1
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
import DOMPurify from 'dompurify';
22
import { MermaidConfig } from '../../config.type.js';
33

4+
// Remove and ignore br:s
45
export const lineBreakRegex = /<br\s*\/?>/gi;
56

67
/**

‎packages/mermaid/src/diagrams/common/commonTypes.ts

+58
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,58 @@
1+
export interface RectData {
2+
x: number;
3+
y: number;
4+
fill: string;
5+
width: number;
6+
height: number;
7+
stroke: string;
8+
class?: string;
9+
color?: string;
10+
rx?: number;
11+
ry?: number;
12+
attrs?: Record<string, string | number>;
13+
anchor?: string;
14+
}
15+
16+
export interface Bound {
17+
startx: number;
18+
stopx: number;
19+
starty: number;
20+
stopy: number;
21+
fill: string;
22+
stroke: string;
23+
}
24+
25+
export interface TextData {
26+
x: number;
27+
y: number;
28+
anchor: string;
29+
text: string;
30+
textMargin: number;
31+
class?: string;
32+
}
33+
34+
export interface TextObject {
35+
x: number;
36+
y: number;
37+
width: number;
38+
height: number;
39+
fill?: string;
40+
anchor?: string;
41+
'text-anchor': string;
42+
style: string;
43+
textMargin: number;
44+
rx: number;
45+
ry: number;
46+
tspan: boolean;
47+
valign?: string;
48+
}
49+
50+
export type D3RectElement = d3.Selection<SVGRectElement, unknown, Element | null, unknown>;
51+
52+
export type D3UseElement = d3.Selection<SVGUseElement, unknown, Element | null, unknown>;
53+
54+
export type D3ImageElement = d3.Selection<SVGImageElement, unknown, Element | null, unknown>;
55+
56+
export type D3TextElement = d3.Selection<SVGTextElement, unknown, Element | null, unknown>;
57+
58+
export type D3TSpanElement = d3.Selection<SVGTSpanElement, unknown, Element | null, unknown>;

‎packages/mermaid/src/diagrams/common/svgDrawCommon.js

-114
This file was deleted.

‎packages/mermaid/src/diagrams/common/svgDrawCommon.ts

+126
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,126 @@
1+
import { sanitizeUrl } from '@braintree/sanitize-url';
2+
import type { Group, SVG } from '../../diagram-api/types.js';
3+
import type {
4+
Bound,
5+
D3ImageElement,
6+
D3RectElement,
7+
D3TSpanElement,
8+
D3TextElement,
9+
D3UseElement,
10+
RectData,
11+
TextData,
12+
TextObject,
13+
} from './commonTypes.js';
14+
import { lineBreakRegex } from './common.js';
15+
16+
export const drawRect = (element: SVG | Group, rectData: RectData): D3RectElement => {
17+
const rectElement: D3RectElement = element.append('rect');
18+
rectElement.attr('x', rectData.x);
19+
rectElement.attr('y', rectData.y);
20+
rectElement.attr('fill', rectData.fill);
21+
rectElement.attr('stroke', rectData.stroke);
22+
rectElement.attr('width', rectData.width);
23+
rectElement.attr('height', rectData.height);
24+
rectData.rx !== undefined && rectElement.attr('rx', rectData.rx);
25+
rectData.ry !== undefined && rectElement.attr('ry', rectData.ry);
26+
27+
if (rectData.attrs !== undefined) {
28+
for (const attrKey in rectData.attrs) {
29+
rectElement.attr(attrKey, rectData.attrs[attrKey]);
30+
}
31+
}
32+
33+
rectData.class !== undefined && rectElement.attr('class', rectData.class);
34+
35+
return rectElement;
36+
};
37+
38+
/**
39+
* Draws a background rectangle
40+
*
41+
* @param element - Diagram (reference for bounds)
42+
* @param bounds - Shape of the rectangle
43+
*/
44+
export const drawBackgroundRect = (element: SVG | Group, bounds: Bound): void => {
45+
const rectData: RectData = {
46+
x: bounds.startx,
47+
y: bounds.starty,
48+
width: bounds.stopx - bounds.startx,
49+
height: bounds.stopy - bounds.starty,
50+
fill: bounds.fill,
51+
stroke: bounds.stroke,
52+
class: 'rect',
53+
};
54+
const rectElement: D3RectElement = drawRect(element, rectData);
55+
rectElement.lower();
56+
};
57+
58+
export const drawText = (element: SVG | Group, textData: TextData): D3TextElement => {
59+
const nText: string = textData.text.replace(lineBreakRegex, ' ');
60+
61+
const textElem: D3TextElement = element.append('text');
62+
textElem.attr('x', textData.x);
63+
textElem.attr('y', textData.y);
64+
textElem.attr('class', 'legend');
65+
66+
textElem.style('text-anchor', textData.anchor);
67+
textData.class !== undefined && textElem.attr('class', textData.class);
68+
69+
const tspan: D3TSpanElement = textElem.append('tspan');
70+
tspan.attr('x', textData.x + textData.textMargin * 2);
71+
tspan.text(nText);
72+
73+
return textElem;
74+
};
75+
76+
export const drawImage = (elem: SVG | Group, x: number, y: number, link: string): void => {
77+
const imageElement: D3ImageElement = elem.append('image');
78+
imageElement.attr('x', x);
79+
imageElement.attr('y', y);
80+
const sanitizedLink: string = sanitizeUrl(link);
81+
imageElement.attr('xlink:href', sanitizedLink);
82+
};
83+
84+
export const drawEmbeddedImage = (
85+
element: SVG | Group,
86+
x: number,
87+
y: number,
88+
link: string
89+
): void => {
90+
const imageElement: D3UseElement = element.append('use');
91+
imageElement.attr('x', x);
92+
imageElement.attr('y', y);
93+
const sanitizedLink: string = sanitizeUrl(link);
94+
imageElement.attr('xlink:href', `#${sanitizedLink}`);
95+
};
96+
97+
export const getNoteRect = (): RectData => {
98+
const noteRectData: RectData = {
99+
x: 0,
100+
y: 0,
101+
width: 100,
102+
height: 100,
103+
fill: '#EDF2AE',
104+
stroke: '#666',
105+
anchor: 'start',
106+
rx: 0,
107+
ry: 0,
108+
};
109+
return noteRectData;
110+
};
111+
112+
export const getTextObj = (): TextObject => {
113+
const testObject: TextObject = {
114+
x: 0,
115+
y: 0,
116+
width: 100,
117+
height: 100,
118+
'text-anchor': 'start',
119+
style: '#666',
120+
textMargin: 0,
121+
rx: 0,
122+
ry: 0,
123+
tspan: true,
124+
};
125+
return testObject;
126+
};

‎packages/mermaid/src/diagrams/sequence/sequenceRenderer.ts

+1-1
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ import { select, selectAll } from 'd3';
33
import svgDraw, { ACTOR_TYPE_WIDTH, drawText, fixLifeLineHeights } from './svgDraw.js';
44
import { log } from '../../logger.js';
55
import common from '../common/common.js';
6-
import * as svgDrawCommon from '../common/svgDrawCommon';
6+
import * as svgDrawCommon from '../common/svgDrawCommon.js';
77
import * as configApi from '../../config.js';
88
import assignWithDepth from '../../assignWithDepth.js';
99
import utils from '../../utils.js';

‎packages/mermaid/src/diagrams/sequence/svgDraw.js

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import common from '../common/common.js';
2-
import * as svgDrawCommon from '../common/svgDrawCommon';
2+
import * as svgDrawCommon from '../common/svgDrawCommon.js';
33
import { addFunction } from '../../interactionDb.js';
44
import { ZERO_WIDTH_SPACE, parseFontSize } from '../../utils.js';
55
import { sanitizeUrl } from '@braintree/sanitize-url';

0 commit comments

Comments
 (0)