marcel/mermaid
1
0
Fork 0
mirror of https://github.com/mermaid-js/mermaid.git synced 2025-10-08 16:49:38 +02:00
Code Issues Packages Projects Releases Wiki Activity

add types to svgDrawCommon.ts

Browse Source
This commit is contained in:
Reda Al Sulais
2023-08-11 20:56:00 +03:00
parent 92098e23eb
commit 22b172d873
2 changed files with 121 additions and 47 deletions
Download Patch File Download Diff File Expand all files Collapse all files

58
packages/mermaid/src/diagrams/common/commonTypes.ts Normal file
View File

@@ -0,0 +1,58 @@
export interface RectData {
x?: number;
y?: number;
fill?: string;
width?: number;
height?: number;
stroke?: string;
class?: string;
color?: string | number;
rx?: number;
ry?: number;
attrs?: Record<string, string | number>;
anchor?: string;
}
export interface Bound {
startx: number;
stopx: number;
starty: number;
stopy: number;
fill: string;
stroke: string;
}
export interface TextData {
x: number;
y: number;
anchor: string;
text: string;
textMargin: number;
class?: string;
}
export interface TextObject {
x: number;
y: number;
width: number;
height: number;
fill?: string;
anchor?: string;
'text-anchor': string;
style: string;
textMargin: number;
rx: number;
ry: number;
tspan: boolean;
valign: unknown;
}
export type D3RectElement = d3.Selection<SVGRectElement, unknown, Element | null, unknown>;
export type D3UseElement = d3.Selection<SVGUseElement, unknown, Element | null, unknown>;
export type D3ImageElement = d3.Selection<SVGImageElement, unknown, Element | null, unknown>;
export type D3TextElement = d3.Selection<SVGTextElement, unknown, Element | null, unknown>;
export type D3TSpanElement = d3.Selection<SVGTSpanElement, unknown, Element | null, unknown>;

110
packages/mermaid/src/diagrams/common/svgDrawCommon.ts
View File

@@ -1,38 +1,49 @@
// @ts-nocheck - ignore to convert to TS
import { sanitizeUrl } from '@braintree/sanitize-url'; import { sanitizeUrl } from '@braintree/sanitize-url';
import type { Group, SVG } from '../../diagram-api/types.js';
import type {
Bound,
D3ImageElement,
D3RectElement,
D3TSpanElement,
D3TextElement,
D3UseElement,
RectData,
TextData,
TextObject,
} from './commonTypes.js';
export const drawRect = function (elem, rectData) { export const drawRect = (element: SVG | Group, rectData: RectData): D3RectElement => {
const rectElem = elem.append('rect'); const rectElement: D3RectElement = element.append('rect');
rectElem.attr('x', rectData.x); rectData.x !== undefined && rectElement.attr('x', rectData.x);
rectElem.attr('y', rectData.y); rectData.y !== undefined && rectElement.attr('y', rectData.y);
rectElem.attr('fill', rectData.fill); rectData.fill !== undefined && rectElement.attr('fill', rectData.fill);
rectElem.attr('stroke', rectData.stroke); rectData.stroke !== undefined && rectElement.attr('stroke', rectData.stroke);
rectElem.attr('width', rectData.width); rectData.width !== undefined && rectElement.attr('width', rectData.width);
rectElem.attr('height', rectData.height); rectData.height !== undefined && rectElement.attr('height', rectData.height);
rectElem.attr('rx', rectData.rx); rectData.rx !== undefined && rectElement.attr('rx', rectData.rx);
rectElem.attr('ry', rectData.ry); rectData.ry !== undefined && rectElement.attr('ry', rectData.ry);
if (rectData.attrs !== 'undefined' && rectData.attrs !== null) { if (rectData.attrs !== undefined && rectData.attrs !== null) {
for (const attrKey in rectData.attrs) { for (const attrKey in rectData.attrs) {
rectElem.attr(attrKey, rectData.attrs[attrKey]); rectElement.attr(attrKey, rectData.attrs[attrKey]);
} }
} }
if (rectData.class !== 'undefined') { if (rectData.class !== undefined) {
rectElem.attr('class', rectData.class); rectElement.attr('class', rectData.class);
} }
return rectElem; return rectElement;
}; };
/** /**
* Draws a background rectangle * Draws a background rectangle
* *
* @param elem - Diagram (reference for bounds) * @param element - Diagram (reference for bounds)
* @param bounds - Shape of the rectangle * @param bounds - Shape of the rectangle
*/ */
export const drawBackgroundRect = function (elem, bounds) { export const drawBackgroundRect = (element: SVG | Group, bounds: Bound): void => {
const rectElem = drawRect(elem, { const rectData: RectData = {
x: bounds.startx, x: bounds.startx,
y: bounds.starty, y: bounds.starty,
width: bounds.stopx - bounds.startx, width: bounds.stopx - bounds.startx,
@@ -40,50 +51,53 @@ export const drawBackgroundRect = function (elem, bounds) {
fill: bounds.fill, fill: bounds.fill,
stroke: bounds.stroke, stroke: bounds.stroke,
class: 'rect', class: 'rect',
}); };
rectElem.lower(); const rectElement: D3RectElement = drawRect(element, rectData);
rectElement.lower();
}; };
export const drawText = function (elem, textData) { export const drawText = (element: SVG | Group, textData: TextData): D3TextElement => {
// Remove and ignore br:s // Remove and ignore br:s
const nText = textData.text.replace(/<br\s*\/?>/gi, ' '); const nText: string = textData.text.replace(/<br\s*\/?>/gi, ' ');
const textElem = elem.append('text'); const textElem: D3TextElement = element.append('text');
textElem.attr('x', textData.x); textElem.attr('x', textData.x);
textElem.attr('y', textData.y); textElem.attr('y', textData.y);
textElem.attr('class', 'legend'); textElem.attr('class', 'legend');
textElem.style('text-anchor', textData.anchor); textElem.style('text-anchor', textData.anchor);
textData.class !== undefined && textElem.attr('class', textData.class);
if (textData.class !== undefined) { const tspan: D3TSpanElement = textElem.append('tspan');
textElem.attr('class', textData.class); tspan.attr('x', textData.x + textData.textMargin * 2);
} tspan.text(nText);
const span = textElem.append('tspan');
span.attr('x', textData.x + textData.textMargin * 2);
span.text(nText);
return textElem; return textElem;
}; };
export const drawImage = function (elem, x, y, link) { export const drawImage = (elem: SVG | Group, x: number, y: number, link: string): void => {
const imageElem = elem.append('image'); const imageElement: D3ImageElement = elem.append('image');
imageElem.attr('x', x); imageElement.attr('x', x);
imageElem.attr('y', y); imageElement.attr('y', y);
const sanitizedLink = sanitizeUrl(link); const sanitizedLink: string = sanitizeUrl(link);
imageElem.attr('xlink:href', sanitizedLink); imageElement.attr('xlink:href', sanitizedLink);
}; };
export const drawEmbeddedImage = function (elem, x, y, link) { export const drawEmbeddedImage = (
const imageElem = elem.append('use'); element: SVG | Group,
imageElem.attr('x', x); x: number,
imageElem.attr('y', y); y: number,
const sanitizedLink = sanitizeUrl(link); link: string
imageElem.attr('xlink:href', '#' + sanitizedLink); ): void => {
const imageElement: D3UseElement = element.append('use');
imageElement.attr('x', x);
imageElement.attr('y', y);
const sanitizedLink: string = sanitizeUrl(link);
imageElement.attr('xlink:href', `#${sanitizedLink}`);
}; };
export const getNoteRect = function () { export const getNoteRect = (): RectData => {
return { const noteRectData: RectData = {
x: 0, x: 0,
y: 0, y: 0,
width: 100, width: 100,
@@ -94,10 +108,11 @@ export const getNoteRect = function () {
rx: 0, rx: 0,
ry: 0, ry: 0,
}; };
return noteRectData;
}; };
export const getTextObj = function () { export const getTextObj = (): TextObject => {
return { const testObject: TextObject = {
x: 0, x: 0,
y: 0, y: 0,
width: 100, width: 100,
@@ -112,4 +127,5 @@ export const getTextObj = function () {
tspan: true, tspan: true,
valign: undefined, valign: undefined,
}; };
return testObject;
}; };