#1110 Cleanup and removal of loggings

cypress/platform/current.html

@@ -26,6 +26,9 @@
         state P {
           state  GPar {
             state Parent {
+              state "Long state description" as TheLongChild
+              TheLongChild : New line
+              TheLongChild : Another line
               TheLongChild
             }
           }

src/diagrams/state/shapes.js

@@ -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);

src/diagrams/state/stateRenderer.js

@@ -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;

src/themes/state.scss

@@ -37,6 +37,11 @@ g.stateGroup line {
   border-bottom: 1px
 }
 
+.stateGroup .alt-composit {
+  fill: #e0e0e0;
+  border-bottom: 1px
+}
+
 .state-note {
   stroke: $noteBorderColor;
   fill: $noteBkgColor;