Standardize Diagram titles

[weedySeaDragon]

I'd like to standardize and implement diagram titles for all diagrams

@knsv (and any others that should be notified):

These issues are about diagram titles:

• Allow All Diagrams To Define A Title #3482
• Let style the title of Journey Diagram #3508

And titles (and footers) are fairly standard features.

Gantt, pie, sequence, and journey are using commonDb getDiagramTitle() but each render them their own way.

Proposed Conventions

1. parsing

   • all diagrams should call setDiagramTitle()in src\commonDb.js to set the diagram title from the parser.
   • all diagrams should call getDiagramTitle()in src\commonDb.jsto get the diagram title from the parser.
   • ensure all .jison files use the same code to parse the title keyword
     • later, if/when parsing is refactors into common terminal/non-terminal declarations and grammar rules sections, this could refactored out

2. rendering: A common method for rendering the diagram title and supporing methods. This could include setting the rect element behind the text with the appropriate padding (# of pixels wider and taller than the diagram text). Would likely also include methods for horiztonally aligning an element within another element.

   • use diagramTitle as the variable name in all ...Renderer.xs files to differentiate it from other uses of title (e.g. class title, entity title, etc.)
   • put all diagramTitle elements within a <g> element so they're grouped and can be used together

3. theming and styling: The diagram title would have the same set theme variables and CSS classes on all diagrams (not exactly sure which should be specified in the themeVariables vs. configurations):

   • theme variables:
     • # pixels down from the top of the diagram
     • horizontal alignment: left, center, top
     • how much bigger the rect box behind the diagramTitle text element should be ( horizontal and vertical "padding").
   • CSS classes:
     • diagram-title: for the <g> that contains all diagramTitle elements
     • diagram-title-text : for the SVG text element
     • diagram-title-text-rect : for the SVG rect that is behind the diagram title text element

Implementation

• could add a commonRendering.ts file and add methods that can be used

Later, a DiagramRenderer class could use the strategy pattern to insert diagram titles (if a tittle keyword is parsed) in a draw method.

Once this is accomplished, then we could also implement common diagram footers (and any other common diagram elements) by using the conventions/methods established with the diagram title.

Questions

• Of the diagrams that are currently rendering a diagram title, is there an implementation that is good and should be used?
• what does this line in the current commonDb.js do? (This is a limit of my js knowledge):

// in the "export default..." block
  getDiagramTitle: getDiagramTitle,

Thoughts?