#1110 Cleanup and removal of loggings
This commit is contained in:
parent
0fb91d6bcc
commit
94e768dd01
|
@ -26,6 +26,9 @@
|
|||
state P {
|
||||
state GPar {
|
||||
state Parent {
|
||||
state "Long state description" as TheLongChild
|
||||
TheLongChild : New line
|
||||
TheLongChild : Another line
|
||||
TheLongChild
|
||||
}
|
||||
}
|
||||
|
|
|
@ -73,7 +73,7 @@ export const drawDescrState = (g, stateDef) => {
|
|||
const title = g
|
||||
.append('text')
|
||||
.attr('x', 2 * getConfig().state.padding)
|
||||
.attr('y', getConfig().state.textHeight + 1.5 * getConfig().state.padding)
|
||||
.attr('y', getConfig().state.textHeight + 1.3 * getConfig().state.padding)
|
||||
.attr('font-size', getConfig().state.fontSize)
|
||||
.attr('class', 'state-title')
|
||||
.text(stateDef.descriptions[0]);
|
||||
|
@ -87,7 +87,7 @@ export const drawDescrState = (g, stateDef) => {
|
|||
.attr(
|
||||
'y',
|
||||
titleHeight +
|
||||
getConfig().state.padding * 0.2 +
|
||||
getConfig().state.padding * 0.4 +
|
||||
getConfig().state.dividerMargin +
|
||||
getConfig().state.textHeight
|
||||
)
|
||||
|
@ -135,7 +135,7 @@ export const drawDescrState = (g, stateDef) => {
|
|||
* @param {*} g The d3 svg object for the substate to framed
|
||||
* @param {*} stateDef The info about the
|
||||
*/
|
||||
export const addTitleAndBox = (g, stateDef) => {
|
||||
export const addTitleAndBox = (g, stateDef, altBkg) => {
|
||||
const pad = getConfig().state.padding;
|
||||
const dblPad = 2 * getConfig().state.padding;
|
||||
const orgBox = g.node().getBBox();
|
||||
|
@ -170,30 +170,19 @@ export const addTitleAndBox = (g, stateDef) => {
|
|||
// descrLine.attr('x2', graphBox.width + getConfig().state.padding);
|
||||
|
||||
if (stateDef.doc) {
|
||||
// console.warn(
|
||||
// cnsole.warn(
|
||||
// stateDef.id,
|
||||
// ' orgWidth: ',
|
||||
// orgWidth,
|
||||
// ' adjusted orgWidth: ',
|
||||
// orgWidth - dblPad,
|
||||
// 'orgX: ',
|
||||
// orgX,
|
||||
// 'width: ',
|
||||
// width,
|
||||
// 'titleWidth: ',
|
||||
// titleWidth,
|
||||
// stateDef.doc
|
||||
// 'orgWidth: ',
|
||||
// orgWidth,
|
||||
// 'width',
|
||||
// width
|
||||
// );
|
||||
// startX = orgX - (orgWidth - width) / 2 - pad;
|
||||
// console.warn(' orgX: ', orgX, graphBox.x);
|
||||
console.warn(
|
||||
stateDef.id,
|
||||
'orgX: ',
|
||||
orgX,
|
||||
'width: ',
|
||||
width,
|
||||
'titleWidth: ',
|
||||
titleWidth,
|
||||
'orgWidth: ',
|
||||
orgWidth,
|
||||
'width',
|
||||
width
|
||||
);
|
||||
}
|
||||
|
||||
startX = orgX - pad;
|
||||
|
@ -202,23 +191,23 @@ export const addTitleAndBox = (g, stateDef) => {
|
|||
// startX = orgX + (orgWidth - titleWidth) / 2;
|
||||
}
|
||||
if (Math.abs(orgX - graphBox.x) < pad) {
|
||||
console.warn('resetting startX', startX);
|
||||
if (titleWidth > orgWidth) {
|
||||
startX = orgX - (titleWidth - orgWidth) / 2;
|
||||
}
|
||||
}
|
||||
console.warn('startX', startX);
|
||||
|
||||
const lineY = 1 - getConfig().state.textHeight;
|
||||
// // White color
|
||||
// g.insert('rect', ':first-child')
|
||||
// .attr('x', graphBox.x)
|
||||
// .attr('y', lineY)
|
||||
// .attr('class', 'composit')
|
||||
// .attr('width', graphBox.width + getConfig().state.padding)
|
||||
// .attr(
|
||||
// 'height',
|
||||
// graphBox.height + getConfig().state.textHeight + getConfig().state.titleShift + 1
|
||||
// )
|
||||
// .attr('rx', '0');
|
||||
g.insert('rect', ':first-child')
|
||||
.attr('x', startX)
|
||||
.attr('y', lineY)
|
||||
.attr('class', altBkg ? 'alt-composit' : 'composit')
|
||||
.attr('width', width)
|
||||
.attr(
|
||||
'height',
|
||||
graphBox.height + getConfig().state.textHeight + getConfig().state.titleShift + 1
|
||||
)
|
||||
.attr('rx', '0');
|
||||
|
||||
title.attr('x', startX + pad);
|
||||
// if (titleWidth <= orgWidth) title.attr('x', startX + width / 2 - pad / 2);
|
||||
|
|
|
@ -12,33 +12,12 @@ parser.yy = stateDb;
|
|||
|
||||
// TODO Move conf object to main conf in mermaidAPI
|
||||
let conf;
|
||||
// {
|
||||
// // Used
|
||||
// padding: 5,
|
||||
// // Font size factor, this is used to guess the width of the edges labels before rendering by dagre
|
||||
// // layout. This might need updating if/when switching font
|
||||
// fontSizeFactor: 5.02,
|
||||
// labelHeight: 16,
|
||||
// edgeLengthFactor: '20',
|
||||
// compositTitleSize: 35
|
||||
// };
|
||||
|
||||
const transformationLog = {};
|
||||
|
||||
export const setConf = function() {};
|
||||
|
||||
// Todo optimize
|
||||
// const getGraphId = function(label) {
|
||||
// const keys = idCache.keys();
|
||||
|
||||
// for (let i = 0; i < keys.length; i++) {
|
||||
// if (idCache.get(keys[i]).label === label) {
|
||||
// return keys[i];
|
||||
// }
|
||||
// }
|
||||
|
||||
// return undefined;
|
||||
// };
|
||||
|
||||
/**
|
||||
* Setup arrow head and define the marker. The result is appended to the svg.
|
||||
|
@ -68,11 +47,11 @@ export const draw = function(text, id) {
|
|||
parser.parse(text);
|
||||
logger.debug('Rendering diagram ' + text);
|
||||
|
||||
// /// / Fetch the default direction, use TD if none was found
|
||||
// Fetch the default direction, use TD if none was found
|
||||
const diagram = d3.select(`[id='${id}']`);
|
||||
insertMarkers(diagram);
|
||||
|
||||
// // Layout graph, Create a new directed graph
|
||||
// Layout graph, Create a new directed graph
|
||||
const graph = new graphlib.Graph({
|
||||
multigraph: false,
|
||||
compound: true,
|
||||
|
@ -81,13 +60,13 @@ export const draw = function(text, id) {
|
|||
// ranksep: '20'
|
||||
});
|
||||
|
||||
// // Default to assigning a new object as a label for each new edge.
|
||||
// Default to assigning a new object as a label for each new edge.
|
||||
graph.setDefaultEdgeLabel(function() {
|
||||
return {};
|
||||
});
|
||||
|
||||
const rootDoc = stateDb.getRootDoc();
|
||||
renderDoc(rootDoc, diagram);
|
||||
renderDoc(rootDoc, diagram, undefined, false);
|
||||
|
||||
const padding = conf.padding;
|
||||
const bounds = diagram.node().getBBox();
|
||||
|
@ -100,7 +79,7 @@ export const draw = function(text, id) {
|
|||
// diagram.attr('height', height);
|
||||
|
||||
// Zoom in a bit
|
||||
diagram.attr('width', width * 2);
|
||||
diagram.attr('width', width * 1.75);
|
||||
// diagram.attr('height', bounds.height * 3 + conf.padding * 2);
|
||||
diagram.attr(
|
||||
'viewBox',
|
||||
|
@ -128,7 +107,7 @@ const getRows = s => {
|
|||
return str.split('#br#');
|
||||
};
|
||||
|
||||
const renderDoc = (doc, diagram, parentId) => {
|
||||
const renderDoc = (doc, diagram, parentId, altBkg) => {
|
||||
// // Layout graph, Create a new directed graph
|
||||
const graph = new graphlib.Graph({
|
||||
compound: true
|
||||
|
@ -142,7 +121,7 @@ const renderDoc = (doc, diagram, parentId) => {
|
|||
break;
|
||||
}
|
||||
}
|
||||
console.warn('doc', doc, edgeFreeDoc);
|
||||
|
||||
// Set an object for the graph label
|
||||
if (parentId)
|
||||
graph.setGraph({
|
||||
|
@ -198,11 +177,11 @@ const renderDoc = (doc, diagram, parentId) => {
|
|||
.append('g')
|
||||
.attr('id', stateDef.id)
|
||||
.attr('class', 'stateGroup');
|
||||
node = renderDoc(stateDef.doc, sub, stateDef.id);
|
||||
node = renderDoc(stateDef.doc, sub, stateDef.id, !altBkg);
|
||||
|
||||
if (first) {
|
||||
// first = false;
|
||||
sub = addTitleAndBox(sub, stateDef);
|
||||
sub = addTitleAndBox(sub, stateDef, altBkg);
|
||||
let boxBounds = sub.node().getBBox();
|
||||
node.width = boxBounds.width;
|
||||
node.height = boxBounds.height + conf.padding / 2;
|
||||
|
|
|
@ -37,6 +37,11 @@ g.stateGroup line {
|
|||
border-bottom: 1px
|
||||
}
|
||||
|
||||
.stateGroup .alt-composit {
|
||||
fill: #e0e0e0;
|
||||
border-bottom: 1px
|
||||
}
|
||||
|
||||
.state-note {
|
||||
stroke: $noteBorderColor;
|
||||
fill: $noteBkgColor;
|
||||
|
|
Loading…
Reference in New Issue