You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
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
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
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
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,
reacted with thumbs up emoji reacted with thumbs down emoji reacted with laugh emoji reacted with hooray emoji reacted with confused emoji reacted with heart emoji reacted with rocket emoji reacted with eyes emoji
-
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:
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
parsing
setDiagramTitle()
insrc\commonDb.js
to set the diagram title from the parser.getDiagramTitle()
insrc\commonDb.js
to get the diagram title from the parser..jison
files use the same code to parse thetitle
keywordrendering: 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.diagramTitle
as the variable name in all...Renderer.xs
files to differentiate it from other uses oftitle
(e.g. class title, entity title, etc.)<g>
element so they're grouped and can be used togethertheming 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):
rect
box behind the diagramTitletext
element should be ( horizontal and vertical "padding").<g>
that contains all diagramTitle elementstext
elementrect
that is behind the diagram titletext
elementImplementation
commonRendering.ts
file and add methods that can be usedLater, a
DiagramRenderer
class could use the strategy pattern to insert diagram titles (if a tittle keyword is parsed) in adraw
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
commonDb.js
do? (This is a limit of my js knowledge):Thoughts?
Beta Was this translation helpful? Give feedback.
All reactions