diagram-v2: store results of stateDb.extract(), apply class to state; code cleanup

This commit is contained in:
Ashley Engelund (weedySeaDragon @ github) 2022-10-11 10:19:28 -07:00
parent 3c0727c744
commit ba71afcce5

View File

@ -7,7 +7,23 @@ import { configureSvgSize } from '../../setupGraphViewbox';
import common from '../common/common';
import addSVGAccessibilityFields from '../../accessibility';
const DEFAULT_DIR = 'TD';
// When information is parsed and processed (extracted) by stateDb.extract()
// These are globals so the information can be accessed as needed (e.g. in setUpNode, etc.)
let diagramStates = [];
let diagramClasses = [];
// List of nodes created from the parsed diagram statement items
let nodeDb = {};
let graphItemCount = 0; // used to construct ids, etc.
// Configuration
const conf = {};
// -----------------------------------------------------------------------
export const setConf = function (cnf) {
const keys = Object.keys(cnf);
for (let i = 0; i < keys.length; i++) {
@ -15,150 +31,187 @@ export const setConf = function (cnf) {
}
};
let nodeDb = {};
/**
* Returns the all the styles from classDef statements in the graph definition.
*
* @param {any} text
* @param diag
* @param {string} text - the diagram text to be parsed
* @param {Diagram} diagramObj
* @returns {object} ClassDef styles
*/
export const getClasses = function (text, diag) {
export const getClasses = function (text, diagramObj) {
log.trace('Extracting classes');
diag.sb.clear();
if (diagramClasses.length > 0) return diagramClasses; // we have already extracted the classes
diagramObj.db.clear();
try {
// Parse the graph definition
diag.parser.parse(text);
return diag.sb.getClasses();
diagramObj.parser.parse(text);
// must run extract() to turn the parsed statements into states, relationships, classes, etc.
diagramObj.db.extract(diagramObj.db.getRootDocV2());
return diagramObj.db.getClasses();
} catch (e) {
return e;
}
};
const setupNode = (g, parent, node, altFlag) => {
// Add the node
if (node.id !== 'root') {
/**
* Get classes from the db info item.
* If there aren't any or if dbInfoItem isn't defined, return an empty string.
* Else create 1 string from the list of classes found
*
* @param {undefined | null | object} dbInfoItem
* @returns {string}
*/
function getClassesFromDbInfo(dbInfoItem) {
if (typeof dbInfoItem === 'undefined' || dbInfoItem === null) return '';
else {
if (dbInfoItem.classes) {
return dbInfoItem.classes.join(' ');
} else return '';
}
}
/**
* Create a graph node based on the statement information
*
* @param g - graph
* @param {object} parent
* @param {object} parsedItem - parsed statement item
* @param {object} diagramDb
* @param {boolean} altFlag - for clusters, add the "statediagram-cluster-alt" CSS class
* @todo This duplicates some of what is done in stateDb.js extract method
*/
const setupNode = (g, parent, parsedItem, diagramDb, altFlag) => {
const itemId = parsedItem.id;
const classStr = getClassesFromDbInfo(diagramStates[itemId]);
if (itemId !== 'root') {
let shape = 'rect';
if (node.start === true) {
if (parsedItem.start === true) {
shape = 'start';
}
if (node.start === false) {
if (parsedItem.start === false) {
shape = 'end';
}
if (node.type !== 'default') {
shape = node.type;
if (parsedItem.type !== 'default') {
shape = parsedItem.type;
}
if (!nodeDb[node.id]) {
nodeDb[node.id] = {
id: node.id,
// Add the node to our list (nodeDb)
if (!nodeDb[itemId]) {
nodeDb[itemId] = {
id: itemId,
shape,
description: common.sanitizeText(node.id, getConfig()),
classes: 'statediagram-state',
description: common.sanitizeText(itemId, getConfig()),
classes: classStr + ' statediagram-state',
};
}
// Build of the array of description strings accordinging
if (node.description) {
if (Array.isArray(nodeDb[node.id].description)) {
const newNode = nodeDb[itemId];
// Build of the array of description strings
if (parsedItem.description) {
if (Array.isArray(newNode.description)) {
// There already is an array of strings,add to it
nodeDb[node.id].shape = 'rectWithTitle';
nodeDb[node.id].description.push(node.description);
newNode.shape = 'rectWithTitle';
newNode.description.push(parsedItem.description);
} else {
if (nodeDb[node.id].description.length > 0) {
// if there is a description already transformit to an array
nodeDb[node.id].shape = 'rectWithTitle';
if (nodeDb[node.id].description === node.id) {
if (newNode.description.length > 0) {
// if there is a description already transform it to an array
newNode.shape = 'rectWithTitle';
if (newNode.description === itemId) {
// If the previous description was the is, remove it
nodeDb[node.id].description = [node.description];
newNode.description = [parsedItem.description];
} else {
nodeDb[node.id].description = [nodeDb[node.id].description, node.description];
newNode.description = [newNode.description, parsedItem.description];
}
} else {
nodeDb[node.id].shape = 'rect';
nodeDb[node.id].description = node.description;
newNode.shape = 'rect';
newNode.description = parsedItem.description;
}
}
nodeDb[node.id].description = common.sanitizeTextOrArray(
nodeDb[node.id].description,
getConfig()
);
newNode.description = common.sanitizeTextOrArray(newNode.description, getConfig());
}
//
if (nodeDb[node.id].description.length === 1 && nodeDb[node.id].shape === 'rectWithTitle') {
nodeDb[node.id].shape = 'rect';
// update the node shape
if (newNode.description.length === 1 && newNode.shape === 'rectWithTitle') {
newNode.shape = 'rect';
}
// Save data for description and group so that for instance a statement without description overwrites
// one with description
// group
if (!nodeDb[node.id].type && node.doc) {
log.info('Setting cluster for ', node.id, getDir(node));
nodeDb[node.id].type = 'group';
nodeDb[node.id].dir = getDir(node);
nodeDb[node.id].shape = node.type === 'divider' ? 'divider' : 'roundedWithTitle';
nodeDb[node.id].classes =
nodeDb[node.id].classes +
if (!newNode.type && parsedItem.doc) {
log.info('Setting cluster for ', itemId, getDir(parsedItem));
newNode.type = 'group';
newNode.dir = getDir(parsedItem);
newNode.shape = parsedItem.type === 'divider' ? 'divider' : 'roundedWithTitle';
newNode.classes =
newNode.classes +
' ' +
(altFlag ? 'statediagram-cluster statediagram-cluster-alt' : 'statediagram-cluster');
}
// This is what will be added to the graph
const nodeData = {
labelStyle: '',
shape: nodeDb[node.id].shape,
labelText: nodeDb[node.id].description,
// typeof nodeDb[node.id].description === 'object'
// ? nodeDb[node.id].description[0]
// : nodeDb[node.id].description,
classes: nodeDb[node.id].classes, //classStr,
shape: newNode.shape,
labelText: newNode.description,
// typeof newNode.description === 'object'
// ? newNode.description[0]
// : newNode.description,
classes: newNode.classes,
style: '', //styles.style,
id: node.id,
dir: nodeDb[node.id].dir,
domId: 'state-' + node.id + '-' + cnt,
type: nodeDb[node.id].type,
id: itemId,
dir: newNode.dir,
domId: 'state-' + itemId + '-' + graphItemCount,
type: newNode.type,
padding: 15, //getConfig().flowchart.padding
};
if (node.note) {
if (parsedItem.note) {
// Todo: set random id
const noteData = {
labelStyle: '',
shape: 'note',
labelText: node.note.text,
labelText: parsedItem.note.text,
classes: 'statediagram-note', //classStr,
style: '', //styles.style,
id: node.id + '----note-' + cnt,
domId: 'state-' + node.id + '----note-' + cnt,
type: nodeDb[node.id].type,
style: '', // styles.style,
id: itemId + '----note-' + graphItemCount,
domId: 'state-' + itemId + '----note-' + graphItemCount,
type: newNode.type,
padding: 15, //getConfig().flowchart.padding
};
const groupData = {
labelStyle: '',
shape: 'noteGroup',
labelText: node.note.text,
classes: nodeDb[node.id].classes, //classStr,
style: '', //styles.style,
id: node.id + '----parent',
domId: 'state-' + node.id + '----parent-' + cnt,
labelText: parsedItem.note.text,
classes: newNode.classes, //classStr,
style: '', // styles.style,
id: itemId + '----parent',
domId: 'state-' + itemId + '----parent-' + graphItemCount,
type: 'group',
padding: 0, //getConfig().flowchart.padding
};
cnt++;
graphItemCount++;
g.setNode(node.id + '----parent', groupData);
g.setNode(itemId + '----parent', groupData);
g.setNode(noteData.id, noteData);
g.setNode(node.id, nodeData);
g.setNode(itemId, nodeData);
g.setParent(node.id, node.id + '----parent');
g.setParent(noteData.id, node.id + '----parent');
g.setParent(itemId, itemId + '----parent');
g.setParent(noteData.id, itemId + '----parent');
let from = node.id;
let from = itemId;
let to = noteData.id;
if (node.note.position === 'left of') {
if (parsedItem.note.position === 'left of') {
from = noteData.id;
to = node.id;
to = itemId;
}
g.setEdge(from, to, {
arrowhead: 'none',
@ -172,33 +225,50 @@ const setupNode = (g, parent, node, altFlag) => {
thickness: 'normal',
});
} else {
g.setNode(node.id, nodeData);
g.setNode(itemId, nodeData);
}
}
if (parent) {
if (parent.id !== 'root') {
log.trace('Setting node ', node.id, ' to be child of its parent ', parent.id);
g.setParent(node.id, parent.id);
log.trace('Setting node ', itemId, ' to be child of its parent ', parent.id);
g.setParent(itemId, parent.id);
}
}
if (node.doc) {
if (parsedItem.doc) {
log.trace('Adding nodes children ');
setupDoc(g, node, node.doc, !altFlag);
setupDoc(g, parsedItem, parsedItem.doc, diagramDb, !altFlag);
}
};
let cnt = 0;
const setupDoc = (g, parent, doc, altFlag) => {
// cnt = 0;
/**
* Turn parsed statements (item.stmt) into nodes, relationships, etc. for a document.
* (A document may be nested within others.)
*
* @param g
* @param parentParsedItem - parsed Item that is the parent of this document (doc)
* @param doc - the document to set up
* @param diagramDb
* @param altFlag
* @todo This duplicates some of what is done in stateDb.js extract method
*/
const setupDoc = (g, parentParsedItem, doc, diagramDb, altFlag) => {
// graphItemCount = 0;
log.trace('items', doc);
doc.forEach((item) => {
if (item.stmt === 'state' || item.stmt === 'default') {
setupNode(g, parent, item, altFlag);
} else if (item.stmt === 'relation') {
setupNode(g, parent, item.state1, altFlag);
setupNode(g, parent, item.state2, altFlag);
switch (item.stmt) {
case 'state':
setupNode(g, parentParsedItem, item, diagramDb, altFlag);
break;
case 'default':
setupNode(g, parentParsedItem, item, diagramDb, altFlag);
break;
case 'relation':
{
setupNode(g, parentParsedItem, item.state1, diagramDb, altFlag);
setupNode(g, parentParsedItem, item.state2, diagramDb, altFlag);
const edgeData = {
id: 'edge' + cnt,
id: 'edge' + graphItemCount,
arrowhead: 'normal',
arrowTypeEnd: 'arrow_barb',
style: 'fill:none',
@ -210,28 +280,37 @@ const setupDoc = (g, parent, doc, altFlag) => {
thickness: 'normal',
classes: 'transition',
};
let startId = item.state1.id;
let endId = item.state2.id;
g.setEdge(startId, endId, edgeData, cnt);
cnt++;
g.setEdge(item.state1.id, item.state2.id, edgeData, graphItemCount);
graphItemCount++;
}
break;
}
});
};
const getDir = (nodes, defaultDir) => {
let dir = defaultDir || 'TB';
if (nodes.doc) {
for (let i = 0; i < nodes.doc.length; i++) {
const node = nodes.doc[i];
if (node.stmt === 'dir') {
dir = node.value;
/**
* Get the direction from the statement items. Default is TB (top to bottom).
* Look through all of the documents (docs) in the parsedItems
*
* @param {object[]} parsedItem - the parsed statement item to look through
* @param [defaultDir='TB'] - the direction to use if none is found
* @returns {string}
*/
const getDir = (parsedItem, defaultDir = DEFAULT_DIR) => {
let dir = defaultDir;
if (parsedItem.doc) {
for (let i = 0; i < parsedItem.doc.length; i++) {
const parsedItemDoc = parsedItem.doc[i];
if (parsedItemDoc.stmt === 'dir') {
dir = parsedItemDoc.value;
}
}
}
return dir;
};
/**
* Draws a flowchart in the tag with id: id based on the graph definition in text.
* Draws a state diagram in the tag with id: id based on the graph definition in text.
*
* @param {any} text
* @param {any} id
@ -244,18 +323,21 @@ export const draw = function (text, id, _version, diag) {
nodeDb = {};
// Fetch the default direction, use TD if none was found
let dir = diag.db.getDirection();
if (typeof dir === 'undefined') {
dir = 'LR';
}
if (typeof dir === 'undefined') dir = DEFAULT_DIR;
const { securityLevel, state: conf } = getConfig();
const nodeSpacing = conf.nodeSpacing || 50;
const rankSpacing = conf.rankSpacing || 50;
log.info(diag.db.getRootDocV2());
// This parses the diagram text and sets the classes, relations, styles, classDefs, etc.
diag.db.extract(diag.db.getRootDocV2());
log.info(diag.db.getRootDocV2());
diagramStates = diag.db.getStates();
diagramClasses = diag.db.getClasses();
// Create the input mermaid.graph
const g = new graphlib.Graph({
multigraph: true,
@ -272,7 +354,7 @@ export const draw = function (text, id, _version, diag) {
return {};
});
setupNode(g, undefined, diag.db.getRootDocV2(), true);
setupNode(g, undefined, diag.db.getRootDocV2(), diag.db, true);
// Set up an SVG group so that we can translate the final graph.
let sandboxElement;