GitHub/mermaid
1
0
Fork 0
mirror of https://github.com/mermaid-js/mermaid.git synced 2025-01-28 07:03:17 +08:00
Code Issues Projects Releases Wiki Activity

5237 Replaced useRough by look

Browse Source
This commit is contained in:
Per Brolin 2024-06-12 12:10:20 +02:00
parent 36e4fcfdfe
commit 1b5bd999e2
24 changed files with 49 additions and 60 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
packages/mermaid/src/diagrams/flowchart/flowDb.ts
View File

@ -793,7 +793,7 @@ const addNodeFromVertex = (
parentDB: Map<string, string>,
subGraphDB: Map<string, boolean>,
config: any,
useRough: boolean
look: string
) => {
let parentId = parentDB.get(vertex.id);
let isGroup = subGraphDB.get(vertex.id) || false;
@ -812,7 +812,7 @@ const addNodeFromVertex = (
dir: vertex.dir,
domId: vertex.domId,
isGroup,
useRough,
look,
});
}
};
@ -822,7 +822,6 @@ export const getData = () => {
const nodes: Node[] = [];
const edges: Edge[] = [];
const useRough = config.look === 'handdrawn';
const subGraphs = getSubGraphs();
log.info('Subgraphs - APA12', subGraphs);
const parentDB = new Map<string, string>();
@ -847,7 +846,7 @@ export const getData = () => {
shape: 'rect',
dir: subGraph.dir,
isGroup: true,
useRough,
look: config.look,
});
}
@ -873,7 +872,7 @@ export const getData = () => {
arrowTypeEnd,
arrowheadStyle: 'fill: #333',
pattern: rawEdge.stroke,
useRough,
look: config.look,
};
console.log('rawEdge SPLIT', rawEdge, index);
edges.push(edge);

18
packages/mermaid/src/diagrams/state/dataFetcher.js
View File

@ -54,16 +54,16 @@ export function stateDomId(itemId = '', counter = 0, type = '', typeSpacer = DOM
return `${DOMID_STATE}-${itemId}${typeStr}-${counter}`;
}
const setupDoc = (parentParsedItem, doc, diagramStates, nodes, edges, altFlag, useRough, look) => {
const setupDoc = (parentParsedItem, doc, diagramStates, nodes, edges, altFlag, look) => {
// graphItemCount = 0;
log.trace('items', doc);
doc.forEach((item) => {
switch (item.stmt) {
case STMT_STATE:
dataFetcher(parentParsedItem, item, diagramStates, nodes, edges, altFlag, useRough, look);
dataFetcher(parentParsedItem, item, diagramStates, nodes, edges, altFlag, look);
break;
case DEFAULT_STATE_TYPE:
dataFetcher(parentParsedItem, item, diagramStates, nodes, edges, altFlag, useRough, look);
dataFetcher(parentParsedItem, item, diagramStates, nodes, edges, altFlag, look);
break;
case STMT_RELATION:
{
@ -73,8 +73,7 @@ const setupDoc = (parentParsedItem, doc, diagramStates, nodes, edges, altFlag, u
diagramStates,
nodes,
edges,
altFlag,
useRough,
altFlag,,
look
);
dataFetcher(
@ -84,7 +83,6 @@ const setupDoc = (parentParsedItem, doc, diagramStates, nodes, edges, altFlag, u
nodes,
edges,
altFlag,
useRough,
look
);
const edgeData = {
@ -101,7 +99,6 @@ const setupDoc = (parentParsedItem, doc, diagramStates, nodes, edges, altFlag, u
labelType: G_EDGE_LABELTYPE,
thickness: G_EDGE_THICKNESS,
classes: CSS_EDGE,
useRough,
look,
};
edges.push(edgeData);
@ -232,7 +229,6 @@ export const dataFetcher = (
nodes,
edges,
altFlag,
useRough,
look
) => {
const itemId = parsedItem.id;
@ -324,7 +320,6 @@ export const dataFetcher = (
padding: 8,
rx: 10,
ry: 10,
useRough,
look,
};
@ -354,7 +349,6 @@ export const dataFetcher = (
type: newNode.type,
isGroup: newNode.type === 'group',
padding: 0, //getConfig().flowchart.padding
useRough,
look,
position: parsedItem.note.position,
};
@ -369,7 +363,6 @@ export const dataFetcher = (
type: 'group',
isGroup: true,
padding: 16, //getConfig().flowchart.padding
useRough,
look,
position: parsedItem.note.position,
};
@ -410,7 +403,6 @@ export const dataFetcher = (
labelpos: G_EDGE_LABELPOS,
labelType: G_EDGE_LABELTYPE,
thickness: G_EDGE_THICKNESS,
useRough,
look,
});
} else {
@ -419,7 +411,7 @@ export const dataFetcher = (
}
if (parsedItem.doc) {
log.trace('Adding nodes children ');
setupDoc(parsedItem, parsedItem.doc, diagramStates, nodes, edges, !altFlag, useRough, look);
setupDoc(parsedItem, parsedItem.doc, diagramStates, nodes, edges, !altFlag, look);
}
};

3
packages/mermaid/src/diagrams/state/stateDb.js
View File

@ -228,10 +228,9 @@ const extract = (_doc) => {
const diagramStates = getStates();
const config = getConfig();
const useRough = config.look === 'handdrawn';
const look = config.look;
resetDataFetching();
dataFetcher(undefined, getRootDocV2(), diagramStates, nodes, edges, true, useRough, look);
dataFetcher(undefined, getRootDocV2(), diagramStates, nodes, edges, true, look);
};
/**

7
packages/mermaid/src/rendering-util/rendering-elements/clusters.js
View File

@ -15,7 +15,6 @@ const rect = (parent, node) => {
const siteConfig = getConfig();
const { themeVariables, handdrawnSeed } = siteConfig;
const { clusterBkg, clusterBorder } = themeVariables;
let { useRough } = node;
// Add outer g element
const shapeSvg = parent.insert('g').attr('class', 'cluster').attr('id', node.id);
@ -60,7 +59,7 @@ const rect = (parent, node) => {
log.trace('Data ', node, JSON.stringify(node));
let rect;
if (useRough) {
if (node.look === 'handdrawn') {
// @ts-ignore TODO: Fix rough typings
const rc = rough.svg(shapeSvg);
const options = userNodeOverrides(node, {
@ -223,7 +222,7 @@ const roundedWithTitle = (parent, node) => {
// add the rect
let rect;
if (node.useRough) {
if (node.look === 'handdrawn') {
const isAlt = node.cssClasses.includes('statediagram-cluster-alt');
const rc = rough.svg(shapeSvg);
const roughOuterNode =
@ -305,7 +304,7 @@ const divider = (parent, node) => {
const y = node.y - node.height / 2;
const width = node.width + padding;
const height = node.height + padding;
if (node.useRough) {
if (node.look === 'handdrawn') {
const rc = rough.svg(shapeSvg);
const roughNode = rc.rectangle(x, y, width, height, {
fill: 'lightgrey',

3
packages/mermaid/src/rendering-util/rendering-elements/edges.js
View File

@ -592,11 +592,10 @@ export const insertEdge = function (elem, edge, clusterDb, diagramType, startNod
default:
strokeClasses += ' edge-pattern-solid';
}
let useRough = edge.useRough;
let svgPath;
let path = '';
let linePath = lineFunction(lineData);
if (useRough) {
if (edge.look === 'handdrawn') {
const rc = rough.svg(elem);
const ld = Object.assign([], lineData);
// const svgPathNode = rc.path(lineFunction(ld.splice(0, ld.length-1)), {

2
packages/mermaid/src/rendering-util/rendering-elements/shapes/choice.ts
View File

@ -22,7 +22,7 @@ export const choice = (parent: SVG, node: Node) => {
];
let choice;
if (node.useRough) {
if (node.look === 'handdrawn') {
// @ts-ignore TODO: Fix rough typings
const rc = rough.svg(shapeSvg);
const pointArr = points.map(function (d) {

4
packages/mermaid/src/rendering-util/rendering-elements/shapes/circle.ts
View File

@ -15,9 +15,9 @@ export const circle = async (parent: SVGAElement, node: Node): Promise<SVGAEleme
const radius = bbox.width / 2 + halfPadding;
let circleElem;
const { cssStyles, useRough } = node;
const { cssStyles } = node;
if (useRough) {
if (node.look === 'handdrawn') {
// @ts-ignore - rough is not typed
const rc = rough.svg(shapeSvg);
const options = userNodeOverrides(node, {});

4
packages/mermaid/src/rendering-util/rendering-elements/shapes/cylinder.ts
View File

@ -58,9 +58,9 @@ export const cylinder = async (parent: SVGAElement, node: Node) => {
const h = bbox.height + ry + node.padding;
let cylinder: d3.Selection<SVGPathElement | SVGGElement, unknown, null, undefined>;
const { cssStyles, useRough } = node;
const { cssStyles } = node;
if (useRough) {
if (node.look === 'handdrawn') {
// @ts-ignore - rough is not typed
const rc = rough.svg(shapeSvg);
const outerPathData = createOuterCylinderPathD(0, 0, w, h, rx, ry);

4
packages/mermaid/src/rendering-util/rendering-elements/shapes/doubleCircle.ts
View File

@ -18,9 +18,9 @@ export const doublecircle = async (parent: SVGAElement, node: Node): Promise<SVG
const innerRadius = bbox.width / 2 + halfPadding;
let circleGroup;
const { cssStyles, useRough } = node;
const { cssStyles } = node;
if (useRough) {
if (node.look === 'handdrawn') {
// @ts-ignore - rough is not typed
const rc = rough.svg(shapeSvg);
const outerOptions = userNodeOverrides(node, { roughness: 0.2, strokeWidth: 2.5 });

4
packages/mermaid/src/rendering-util/rendering-elements/shapes/drawRect.ts
View File

@ -21,7 +21,7 @@ export const drawRect = async (parent: SVGAElement, node: Node, options: RectOpt
let rect;
let { rx, ry } = node;
const { cssStyles, useRough } = node;
const { cssStyles } = node;
//use options rx, ry overrides if present
if (options && options.rx && options.ry) {
@ -29,7 +29,7 @@ export const drawRect = async (parent: SVGAElement, node: Node, options: RectOpt
ry = options.ry;
}
if (useRough) {
if (node.look === 'handdrawn') {
// @ts-ignore TODO: Fix rough typings
const rc = rough.svg(shapeSvg);
const options = userNodeOverrides(node, {});

2
packages/mermaid/src/rendering-util/rendering-elements/shapes/forkJoin.ts
View File

@ -25,7 +25,7 @@ export const forkJoin = (parent: SVG, node: Node, dir: string) => {
const y = (-1 * height) / 2;
let shape;
if (node.useRough) {
if (node.look === 'handdrawn') {
// @ts-ignore TODO: Fix rough typings
const rc = rough.svg(shapeSvg);
const roughNode = rc.rectangle(x, y, width, height, solidStateFill(lineColor));

4
packages/mermaid/src/rendering-util/rendering-elements/shapes/hexagon.ts
View File

@ -47,9 +47,9 @@ export const hexagon = async (parent: SVGAElement, node: Node): Promise<SVGAElem
];
let polygon: d3.Selection<SVGPolygonElement | SVGGElement, unknown, null, undefined>;
const { cssStyles, useRough } = node;
const { cssStyles } = node;
if (useRough) {
if (node.look === 'handdrawn') {
// @ts-ignore - rough is not typed
const rc = rough.svg(shapeSvg);
const options = userNodeOverrides(node, {});

4
packages/mermaid/src/rendering-util/rendering-elements/shapes/invertedTrapezoid.ts
View File

@ -35,9 +35,9 @@ export const inv_trapezoid = async (parent: SVGAElement, node: Node): Promise<SV
];
let polygon: d3.Selection<SVGPolygonElement | SVGGElement, unknown, null, undefined>;
const { cssStyles, useRough } = node;
const { cssStyles } = node;
if (useRough) {
if (node.look === 'handdrawn') {
// @ts-ignore - rough is not typed
const rc = rough.svg(shapeSvg);
const options = userNodeOverrides(node, {});

4
packages/mermaid/src/rendering-util/rendering-elements/shapes/leanLeft.ts
View File

@ -34,9 +34,9 @@ export const lean_left = async (parent: SVGAElement, node: Node): Promise<SVGAEl
];
let polygon: d3.Selection<SVGPolygonElement | SVGGElement, unknown, null, undefined>;
const { cssStyles, useRough } = node;
const { cssStyles } = node;
if (useRough) {
if (node.look === 'handdrawn') {
// @ts-ignore - rough is not typed
const rc = rough.svg(shapeSvg);
const options = userNodeOverrides(node, {});

4
packages/mermaid/src/rendering-util/rendering-elements/shapes/leanRight.ts
View File

@ -34,9 +34,9 @@ export const lean_right = async (parent: SVGAElement, node: Node): Promise<SVGAE
];
let polygon: d3.Selection<SVGPolygonElement | SVGGElement, unknown, null, undefined>;
const { cssStyles, useRough } = node;
const { cssStyles } = node;
if (useRough) {
if (node.look === 'handdrawn') {
// @ts-ignore - rough is not typed
const rc = rough.svg(shapeSvg);
const options = userNodeOverrides(node, {});

4
packages/mermaid/src/rendering-util/rendering-elements/shapes/note.ts
View File

@ -21,14 +21,14 @@ export const note = async (parent: SVGAElement, node: Node) => {
);
log.info('Classes = ', node.cssClasses);
const { cssStyles, useRough } = node;
const { cssStyles } = node;
let rect;
const totalWidth = bbox.width + node.padding;
const totalHeight = bbox.height + node.padding;
const x = -bbox.width / 2 - halfPadding;
const y = -bbox.height / 2 - halfPadding;
if (useRough) {
if (node.look === 'handdrawn') {
// add the rect
// @ts-ignore TODO: Fix rough typings
const rc = rough.svg(shapeSvg);

4
packages/mermaid/src/rendering-util/rendering-elements/shapes/question.ts
View File

@ -31,9 +31,9 @@ export const question = async (parent: SVGAElement, node: Node): Promise<SVGAEle
];
let polygon: d3.Selection<SVGPolygonElement | SVGGElement, unknown, null, undefined>;
const { cssStyles, useRough } = node;
const { cssStyles } = node;
if (useRough) {
if (node.look === 'handdrawn') {
// @ts-ignore - rough is not typed
const rc = rough.svg(shapeSvg);
const options = userNodeOverrides(node, {});

4
packages/mermaid/src/rendering-util/rendering-elements/shapes/rectLeftInvArrow.ts
View File

@ -34,9 +34,9 @@ export const rect_left_inv_arrow = async (
];
let polygon;
const { cssStyles, useRough } = node;
const { cssStyles } = node;
if (useRough) {
if (node.look === 'handdrawn') {
// @ts-ignore - rough is not typed
const rc = rough.svg(shapeSvg);
const options = userNodeOverrides(node, {});

4
packages/mermaid/src/rendering-util/rendering-elements/shapes/stadium.ts
View File

@ -58,8 +58,8 @@ export const stadium = async (parent: SVGAElement, node: Node) => {
const w = bbox.width + h / 4 + node.padding;
let rect;
const { cssStyles, useRough } = node;
if (useRough) {
const { cssStyles } = node;
if (node.look === 'handdrawn') {
// @ts-ignore - rough is not typed
const rc = rough.svg(shapeSvg);
const options = userNodeOverrides(node, {});

2
packages/mermaid/src/rendering-util/rendering-elements/shapes/stateEnd.ts
View File

@ -17,7 +17,7 @@ export const stateEnd = (parent: SVG, node: Node) => {
let circle;
let innerCircle;
if (node.useRough) {
if (node.look === 'handdrawn') {
// @ts-ignore TODO: Fix rough typings
const rc = rough.svg(shapeSvg);
const roughNode = rc.circle(0, 0, 14, { ...solidStateFill(lineColor), roughness: 0.5 });

2
packages/mermaid/src/rendering-util/rendering-elements/shapes/stateStart.ts
View File

@ -17,7 +17,7 @@ export const stateStart = (parent: SVG, node: Node) => {
.attr('id', node.domId || node.id);
let circle;
if (node.useRough) {
if (node.look === 'handdrawn') {
// @ts-ignore TODO: Fix rough typings
const rc = rough.svg(shapeSvg);
const roughNode = rc.circle(0, 0, 14, solidStateFill(lineColor));

4
packages/mermaid/src/rendering-util/rendering-elements/shapes/subroutine.ts
View File

@ -40,7 +40,7 @@ export const subroutine = async (parent: SVGAElement, node: Node) => {
const x = -bbox.width / 2 - halfPadding;
const y = -bbox.height / 2 - halfPadding;
let rect;
const { cssStyles, useRough } = node;
const { cssStyles } = node;
const points = [
{ x: 0, y: 0 },
{ x: w, y: 0 },
@ -54,7 +54,7 @@ export const subroutine = async (parent: SVGAElement, node: Node) => {
{ x: -8, y: 0 },
];
if (useRough) {
if (node.look === 'handdrawn') {
// @ts-ignore - rough is not typed
const rc = rough.svg(shapeSvg);
const options = userNodeOverrides(node, {});

4
packages/mermaid/src/rendering-util/rendering-elements/shapes/trapezoid.ts
View File

@ -34,9 +34,9 @@ export const trapezoid = async (parent: SVGAElement, node: Node): Promise<SVGAEl
];
let polygon: d3.Selection<SVGPolygonElement | SVGGElement, unknown, null, undefined>;
const { cssStyles, useRough } = node;
const { cssStyles } = node;
if (useRough) {
if (node.look === 'handdrawn') {
console.log('Trapezoid: Inside use useRough');
// @ts-ignore
const rc = rough.svg(shapeSvg);

5
packages/mermaid/src/rendering-util/types.d.ts vendored
View File

@ -47,7 +47,6 @@ interface Node {
rx?: number; // Used for rounded corners in Rect, Ellipse, etc.Maybe it to specialized RectNode, EllipseNode, etc.
ry?: number;
useRough?: boolean;
useHtmlLabels?: boolean;
centerLabel?: boolean; //keep for now.
//Candidate for removal, maybe rely on labelStyle or a specific property labelPosition: Top, Center, Bottom
@ -62,6 +61,8 @@ interface Node {
// Flowchart specific properties
x?: number;
y?: number;
look?: string;
}
// Common properties for any edge in the system
@ -92,7 +93,7 @@ interface Edge {
minlen?: number;
pattern?: string;
thickness?: 'normal' | 'thick' | 'invisible';
useRough?: boolean;
look?: string;
}
interface RectOptions {