addTitleAndBox = function addTitleAndBox(g, stateDef, altBkg) {
  var pad = Object(_config__WEBPACK_IMPORTED_MODULE_4__["getConfig"])().state.padding;
  var dblPad = 2 * Object(_config__WEBPACK_IMPORTED_MODULE_4__["getConfig"])().state.padding;
  var orgBox = g.node().getBBox();
  var orgWidth = orgBox.width;
  var orgX = orgBox.x;
  var title = g.append('text').attr('x', 0).attr('y', Object(_config__WEBPACK_IMPORTED_MODULE_4__["getConfig"])().state.titleShift).attr('font-size', Object(_config__WEBPACK_IMPORTED_MODULE_4__["getConfig"])().state.fontSize).attr('class', 'state-title').text(stateDef.id);
  var titleBox = title.node().getBBox();
  var titleWidth = titleBox.width + dblPad;
  var width = Math.max(titleWidth, orgWidth); // + dblPad;

  if (width === orgWidth) {
    width = width + dblPad;
  }

  var startX; // const lineY = 1 - getConfig().state.textHeight;
  // const descrLine = g
  //   .append('line') // text label for the x axis
  //   .attr('x1', 0)
  //   .attr('y1', lineY)
  //   .attr('y2', lineY)
  //   .attr('class', 'descr-divider');

  var graphBox = g.node().getBBox(); // console.warn(width / 2, titleWidth / 2, getConfig().state.padding, orgBox);
  // descrLine.attr('x2', graphBox.width + getConfig().state.padding);

  if (stateDef.doc) {// cnsole.warn(
    //   stateDef.id,
    //   'orgX: ',
    //   orgX,
    //   'width: ',
    //   width,
    //   'titleWidth: ',
    //   titleWidth,
    //   'orgWidth: ',
    //   orgWidth,
    //   'width',
    //   width
    // );
  }

  startX = orgX - pad;

  if (titleWidth > orgWidth) {
    startX = (orgWidth - width) / 2 + pad;
  }

  if (Math.abs(orgX - graphBox.x) < pad) {
    if (titleWidth > orgWidth) {
      startX = orgX - (titleWidth - orgWidth) / 2;
    }
  }

  var lineY = 1 - Object(_config__WEBPACK_IMPORTED_MODULE_4__["getConfig"])().state.textHeight; // White color

  g.insert('rect', ':first-child').attr('x', startX).attr('y', lineY).attr('class', altBkg ? 'alt-composit' : 'composit').attr('width', width).attr('height', graphBox.height + Object(_config__WEBPACK_IMPORTED_MODULE_4__["getConfig"])().state.textHeight + Object(_config__WEBPACK_IMPORTED_MODULE_4__["getConfig"])().state.titleShift + 1).attr('rx', '0');
  title.attr('x', startX + pad);
  if (titleWidth <= orgWidth) title.attr('x', orgX + (width - dblPad) / 2 - titleWidth / 2 + pad); // Title background

  g.insert('rect', ':first-child').attr('x', startX).attr('y', Object(_config__WEBPACK_IMPORTED_MODULE_4__["getConfig"])().state.titleShift - Object(_config__WEBPACK_IMPORTED_MODULE_4__["getConfig"])().state.textHeight - Object(_config__WEBPACK_IMPORTED_MODULE_4__["getConfig"])().state.padding).attr('width', width) // Just needs to be higher then the descr line, will be clipped by the white color box
  .attr('height', Object(_config__WEBPACK_IMPORTED_MODULE_4__["getConfig"])().state.textHeight * 3).attr('rx', Object(_config__WEBPACK_IMPORTED_MODULE_4__["getConfig"])().state.radius); // Full background

  g.insert('rect', ':first-child').attr('x', startX).attr('y', Object(_config__WEBPACK_IMPORTED_MODULE_4__["getConfig"])().state.titleShift - Object(_config__WEBPACK_IMPORTED_MODULE_4__["getConfig"])().state.textHeight - Object(_config__WEBPACK_IMPORTED_MODULE_4__["getConfig"])().state.padding).attr('width', width).attr('height', graphBox.height + 3 + 2 * Object(_config__WEBPACK_IMPORTED_MODULE_4__["getConfig"])().state.textHeight).attr('rx', Object(_config__WEBPACK_IMPORTED_MODULE_4__["getConfig"])().state.radius);
  return g;
}
Function that creates an title row and a frame around a substate for a composit state diagram.
The function returns a new d3 svg object with updated width and height properties;
@param {*} g The d3 svg object for the substate to framed
@param {*} stateDef The info about the