mirror of
https://github.com/mermaid-js/mermaid.git
synced 2025-09-18 14:59:53 +02:00
Removed useRough in favor of node.look
This commit is contained in:
@@ -775,12 +775,12 @@ const addNodeFromVertex = (
|
||||
parentDB: Map<string, string>,
|
||||
subGraphDB: Map<string, boolean>,
|
||||
config: any,
|
||||
useRough: boolean
|
||||
look: string
|
||||
): Node => {
|
||||
let parentId = parentDB.get(vertex.id);
|
||||
let isGroup = subGraphDB.get(vertex.id) || false;
|
||||
const parentId = parentDB.get(vertex.id);
|
||||
const isGroup = subGraphDB.get(vertex.id) || false;
|
||||
|
||||
let node = findNode(nodes, vertex.id);
|
||||
const node = findNode(nodes, vertex.id);
|
||||
if (!node) {
|
||||
nodes.push({
|
||||
id: vertex.id,
|
||||
@@ -795,7 +795,7 @@ const addNodeFromVertex = (
|
||||
domId: vertex.domId,
|
||||
type: isGroup ? 'group' : undefined,
|
||||
isGroup,
|
||||
useRough,
|
||||
look,
|
||||
});
|
||||
}
|
||||
};
|
||||
@@ -807,7 +807,6 @@ export const getData = () => {
|
||||
|
||||
// extract(getRootDocV2());
|
||||
// const diagramStates = getStates();
|
||||
const useRough = config.look === 'handdrawn';
|
||||
const subGraphs = getSubGraphs();
|
||||
log.info('Subgraphs - APA12', subGraphs);
|
||||
const parentDB = new Map<string, string>();
|
||||
@@ -834,14 +833,14 @@ export const getData = () => {
|
||||
domId: subGraph.domId,
|
||||
type: 'group',
|
||||
isGroup: true,
|
||||
useRough,
|
||||
look: config.look,
|
||||
});
|
||||
}
|
||||
console.log('APA12 nodes - 1', nodes.length);
|
||||
|
||||
const n = getVertices();
|
||||
n.forEach((vertex) => {
|
||||
const node = addNodeFromVertex(vertex, nodes, parentDB, subGraphDB, config, useRough);
|
||||
const node = addNodeFromVertex(vertex, nodes, parentDB, subGraphDB, config, config.look);
|
||||
if (node) {
|
||||
nodes.push(node);
|
||||
}
|
||||
@@ -874,14 +873,12 @@ export const getData = () => {
|
||||
// domId: verawEdgertex.domId,
|
||||
// rawEdge: undefined,
|
||||
// isGroup: false,
|
||||
useRough,
|
||||
look: config.look,
|
||||
};
|
||||
// console.log('rawEdge SPLIT', rawEdge, index);
|
||||
edges.push(edge);
|
||||
});
|
||||
|
||||
//const useRough = config.look === 'handdrawn';
|
||||
|
||||
return { nodes, edges, other: {}, config };
|
||||
};
|
||||
|
||||
|
@@ -54,39 +54,23 @@ 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:
|
||||
{
|
||||
dataFetcher(
|
||||
parentParsedItem,
|
||||
item.state1,
|
||||
diagramStates,
|
||||
nodes,
|
||||
edges,
|
||||
altFlag,
|
||||
useRough,
|
||||
look
|
||||
);
|
||||
dataFetcher(
|
||||
parentParsedItem,
|
||||
item.state2,
|
||||
diagramStates,
|
||||
nodes,
|
||||
edges,
|
||||
altFlag,
|
||||
useRough,
|
||||
look
|
||||
);
|
||||
dataFetcher(parentParsedItem, item.state1, diagramStates, nodes, edges, altFlag, look);
|
||||
dataFetcher(parentParsedItem, item.state2, diagramStates, nodes, edges, altFlag, look);
|
||||
const edgeData = {
|
||||
id: 'edge' + graphItemCount,
|
||||
start: item.state1.id,
|
||||
@@ -101,7 +85,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);
|
||||
@@ -225,16 +208,7 @@ function getClassesFromDbInfo(dbInfoItem) {
|
||||
}
|
||||
}
|
||||
}
|
||||
export const dataFetcher = (
|
||||
parent,
|
||||
parsedItem,
|
||||
diagramStates,
|
||||
nodes,
|
||||
edges,
|
||||
altFlag,
|
||||
useRough,
|
||||
look
|
||||
) => {
|
||||
export const dataFetcher = (parent, parsedItem, diagramStates, nodes, edges, altFlag, look) => {
|
||||
const itemId = parsedItem.id;
|
||||
const classStr = getClassesFromDbInfo(diagramStates.get(itemId));
|
||||
|
||||
@@ -324,7 +298,6 @@ export const dataFetcher = (
|
||||
padding: 8,
|
||||
rx: 10,
|
||||
ry: 10,
|
||||
useRough,
|
||||
look,
|
||||
};
|
||||
|
||||
@@ -354,7 +327,6 @@ export const dataFetcher = (
|
||||
type: newNode.type,
|
||||
isGroup: newNode.type === 'group',
|
||||
padding: 0, //getConfig().flowchart.padding
|
||||
useRough,
|
||||
look,
|
||||
position: parsedItem.note.position,
|
||||
};
|
||||
@@ -369,7 +341,6 @@ export const dataFetcher = (
|
||||
type: 'group',
|
||||
isGroup: true,
|
||||
padding: 16, //getConfig().flowchart.padding
|
||||
useRough,
|
||||
look,
|
||||
position: parsedItem.note.position,
|
||||
};
|
||||
@@ -410,7 +381,6 @@ export const dataFetcher = (
|
||||
labelpos: G_EDGE_LABELPOS,
|
||||
labelType: G_EDGE_LABELTYPE,
|
||||
thickness: G_EDGE_THICKNESS,
|
||||
useRough,
|
||||
look,
|
||||
});
|
||||
} else {
|
||||
@@ -419,7 +389,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);
|
||||
}
|
||||
};
|
||||
|
||||
|
@@ -581,10 +581,10 @@ export const getData = () => {
|
||||
// }
|
||||
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);
|
||||
|
||||
return { nodes, edges, other: {}, config };
|
||||
};
|
||||
|
||||
|
@@ -20,7 +20,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);
|
||||
@@ -65,7 +64,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) => {
|
||||
const look = siteConfig.look;
|
||||
// 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 =
|
||||
@@ -308,7 +307,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',
|
||||
|
@@ -594,11 +594,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)), {
|
||||
|
@@ -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) {
|
||||
|
@@ -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
|
||||
const rc = rough.svg(shapeSvg);
|
||||
const options = userNodeOverrides(node, {});
|
||||
|
@@ -68,9 +68,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
|
||||
const rc = rough.svg(shapeSvg);
|
||||
const outerPathData = createOuterCylinderPathD(0, 0, w, h, rx, ry);
|
||||
|
@@ -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
|
||||
const rc = rough.svg(shapeSvg);
|
||||
const outerOptions = userNodeOverrides(node, { roughness: 0.2, strokeWidth: 2.5 });
|
||||
|
@@ -25,14 +25,14 @@ export const drawRect = async (parent: SVGAElement, node: Node, options: RectOpt
|
||||
let rect;
|
||||
node.look = look;
|
||||
let { rx, ry } = node;
|
||||
const { cssStyles, useRough } = node;
|
||||
const { cssStyles } = node;
|
||||
|
||||
//use options rx, ry overrides if present
|
||||
if (options && options.rx && options.ry) {
|
||||
rx = options.rx;
|
||||
ry = options.ry;
|
||||
}
|
||||
if (useRough) {
|
||||
if (node.look === 'handdrawn') {
|
||||
// @ts-ignore TODO: Fix rough typings
|
||||
const rc = rough.svg(shapeSvg);
|
||||
const options = userNodeOverrides(node, {});
|
||||
|
@@ -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));
|
||||
|
@@ -56,9 +56,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
|
||||
const rc = rough.svg(shapeSvg);
|
||||
const options = userNodeOverrides(node, {});
|
||||
|
@@ -43,9 +43,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
|
||||
const rc = rough.svg(shapeSvg);
|
||||
const options = userNodeOverrides(node, {});
|
||||
|
@@ -42,9 +42,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
|
||||
const rc = rough.svg(shapeSvg);
|
||||
const options = userNodeOverrides(node, {});
|
||||
|
@@ -42,9 +42,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
|
||||
const rc = rough.svg(shapeSvg);
|
||||
const options = userNodeOverrides(node, {});
|
||||
|
@@ -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);
|
||||
|
@@ -38,9 +38,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
|
||||
const rc = rough.svg(shapeSvg);
|
||||
const options = userNodeOverrides(node, {});
|
||||
|
@@ -42,9 +42,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
|
||||
const rc = rough.svg(shapeSvg);
|
||||
const options = userNodeOverrides(node, {});
|
||||
|
@@ -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
|
||||
const rc = rough.svg(shapeSvg);
|
||||
const options = userNodeOverrides(node, {});
|
||||
|
@@ -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 });
|
||||
|
@@ -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));
|
||||
|
@@ -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
|
||||
const rc = rough.svg(shapeSvg);
|
||||
const options = userNodeOverrides(node, {});
|
||||
|
@@ -42,10 +42,10 @@ 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) {
|
||||
console.log('Trapezoid: Inside use useRough');
|
||||
if (node.look === 'handdrawn') {
|
||||
console.log('Trapezoid: Inside use handdrawn');
|
||||
// @ts-ignore
|
||||
const rc = rough.svg(shapeSvg);
|
||||
const options = userNodeOverrides(node, {});
|
||||
|
@@ -46,7 +46,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
|
||||
@@ -94,7 +93,8 @@ interface Edge {
|
||||
minlen?: number;
|
||||
pattern?: string;
|
||||
thickness?: 'normal' | 'thick' | 'invisible';
|
||||
useRough?: boolean;
|
||||
|
||||
look?: string;
|
||||
}
|
||||
|
||||
interface RectOptions {
|
||||
|
Reference in New Issue
Block a user