mirror of
https://github.com/mermaid-js/mermaid.git
synced 2025-01-28 07:03:17 +08:00
Add the directive state ment for change rendering direction in composite states
This commit is contained in:
Knut Sveidqvist
parent
e3164d8d44
commit
43f6ae7ba0
@ -29,9 +29,16 @@
|
||||
|
||||
<div class="mermaid" style="width: 100%; height: 20%;">
|
||||
stateDiagram
|
||||
MyState
|
||||
note left of MyState : I am a leftie
|
||||
note right of MyState : I am a rightie
|
||||
direction LR
|
||||
state A {
|
||||
direction BT
|
||||
a --> b
|
||||
}
|
||||
state C {
|
||||
direction RL
|
||||
c --> d
|
||||
}
|
||||
A --> C
|
||||
</div>
|
||||
<div class="mermaid2" style="width: 100%; height: 20%;">
|
||||
%%{int:{
|
||||
@ -70,7 +77,7 @@ sequenceDiagram
|
||||
theme: 'default',
|
||||
arrowMarkerAbsolute: true,
|
||||
// themeCSS: '.edgePath .path {stroke: red;} .arrowheadPath {fill: red;}',
|
||||
logLevel: 0,
|
||||
logLevel: 5,
|
||||
flowchart: { nodeSpacing: 10, curve: 'cardinal', htmlLabels: true },
|
||||
htmlLabels: true,
|
||||
// gantt: { axisFormat: '%m/%d/%Y' },
|
||||
|
||||
80
dist/mermaid.core.js
vendored
80
dist/mermaid.core.js
vendored
@ -3932,7 +3932,7 @@ var config = {
|
||||
* call to mermaidAPI.initialize. Calls to mermaidAPI.reinitialize cannot make changes to
|
||||
* the `secure` keys in the current currentConfig. This prevents malicious graph directives from
|
||||
* overriding a site's default security.
|
||||
* **Notes**:
|
||||
* **Notes**:
|
||||
*
|
||||
* Default value: ['secure', 'securityLevel', 'startOnLoad', 'maxTextSize']
|
||||
*/
|
||||
@ -16768,12 +16768,12 @@ var draw = function draw(txt, id) {
|
||||
width = 1200;
|
||||
}
|
||||
|
||||
if (typeof conf.useWidth !== 'undefined') {
|
||||
if (typeof conf.pie.useWidth !== 'undefined') {
|
||||
width = conf.useWidth;
|
||||
}
|
||||
|
||||
var diagram = Object(d3__WEBPACK_IMPORTED_MODULE_0__["select"])('#' + id);
|
||||
Object(_utils__WEBPACK_IMPORTED_MODULE_4__["configureSvgSize"])(diagram, height, width, conf.useMaxWidth); // Set viewBox
|
||||
Object(_utils__WEBPACK_IMPORTED_MODULE_4__["configureSvgSize"])(diagram, height, width, conf.pie.useMaxWidth); // Set viewBox
|
||||
|
||||
elem.setAttribute('viewBox', '0 0 ' + width + ' ' + height); // Fetch the default direction, use TD if none was found
|
||||
|
||||
@ -23081,7 +23081,7 @@ var renderDoc = function renderDoc(doc, diagram, parentId, altBkg) {
|
||||
"use strict";
|
||||
__webpack_require__.r(__webpack_exports__);
|
||||
var getStyles = function getStyles(options) {
|
||||
return "g.stateGroup text {\n fill: ".concat(options.nodeBorder, ";\n stroke: none;\n font-size: 10px;\n}\ng.stateGroup text {\n fill: ").concat(options.textColor, ";\n stroke: none;\n font-size: 10px;\n\n}\ng.stateGroup .state-title {\n font-weight: bolder;\n fill: ").concat(options.labelColor, ";\n}\n\ng.stateGroup rect {\n fill: ").concat(options.mainBkg, ";\n stroke: ").concat(options.nodeBorder, ";\n}\n\ng.stateGroup line {\n stroke: ").concat(options.lineColor, ";\n stroke-width: 1;\n}\n\n.transition {\n stroke: ").concat(options.lineColor, ";\n stroke-width: 1;\n fill: none;\n}\n\n.stateGroup .composit {\n fill: ").concat(options.background, ";\n border-bottom: 1px\n}\n\n.stateGroup .alt-composit {\n fill: #e0e0e0;\n border-bottom: 1px\n}\n\n.state-note {\n stroke: ").concat(options.noteBorderColor, ";\n fill: ").concat(options.noteBkgColor, ";\n\n text {\n fill: black;\n stroke: none;\n font-size: 10px;\n }\n}\n\n.stateLabel .box {\n stroke: none;\n stroke-width: 0;\n fill: ").concat(options.mainBkg, ";\n opacity: 0.5;\n}\n\n.edgeLabel .label rect {\n fill: ").concat(options.tertiaryColor, ";\n opacity: 0.5;\n}\n.edgeLabel .label text {\n fill: ").concat(options.tertiaryTextColor, ";\n}\n.label div .edgeLabel {\n color: ").concat(options.tertiaryTextColor, ";\n}\n\n.stateLabel text {\n fill: ").concat(options.labelColor, ";\n font-size: 10px;\n font-weight: bold;\n}\n\n.node circle.state-start {\n fill: ").concat(options.lineColor, ";\n stroke: black;\n}\n.node circle.state-end {\n fill: ").concat(options.primaryBorderColor, ";\n stroke: ").concat(options.background, ";\n stroke-width: 1.5\n}\n.end-state-inner {\n fill: ").concat(options.background, ";\n // stroke: ").concat(options.background, ";\n stroke-width: 1.5\n}\n\n.node rect {\n fill: ").concat(options.mainBkg, ";\n stroke: ").concat(options.nodeBorder, ";\n stroke-width: 1px;\n}\n.node polygon {\n fill: ").concat(options.mainBkg, ";\n stroke: ").concat(options.nodeBorder, ";\n stroke-width: 1px;\n}\n#statediagram-barbEnd {\n fill: ").concat(options.lineColor, ";\n}\n\n.statediagram-cluster rect {\n fill: ").concat(options.mainBkg, ";\n stroke: ").concat(options.nodeBorder, ";\n stroke-width: 1px;\n}\n\n.cluster-label, .nodeLabel {\n color: ").concat(options.textColor, ";\n}\n\n.statediagram-cluster rect.outer {\n rx: 5px;\n ry: 5px;\n}\n.statediagram-state .divider {\n stroke: ").concat(options.nodeBorder, ";\n}\n\n.statediagram-state .title-state {\n rx: 5px;\n ry: 5px;\n}\n.statediagram-cluster.statediagram-cluster .inner {\n fill: ").concat(options.background, ";\n}\n.statediagram-cluster.statediagram-cluster-alt .inner {\n fill: #e0e0e0;\n}\n\n.statediagram-cluster .inner {\n rx:0;\n ry:0;\n}\n\n.statediagram-state rect.basic {\n rx: 5px;\n ry: 5px;\n}\n.statediagram-state rect.divider {\n stroke-dasharray: 10,10;\n fill: ").concat(options.altBackground ? options.altBackground : '#efefef', ";\n}\n\n.note-edge {\n stroke-dasharray: 5;\n}\n\n.statediagram-note rect {\n fill: ").concat(options.noteBkgColor, ";\n stroke: ").concat(options.noteBorderColor, ";\n stroke-width: 1px;\n rx: 0;\n ry: 0;\n}\n.statediagram-note rect {\n fill: ").concat(options.noteBkgColor, ";\n stroke: ").concat(options.noteBorderColor, ";\n stroke-width: 1px;\n rx: 0;\n ry: 0;\n}\n\n.statediagram-note text {\n fill: ").concat(options.noteTextColor, ";\n}\n\n.statediagram-note .nodeLabel {\n color: ").concat(options.noteTextColor, ";\n}\n\n#dependencyStart, #dependencyEnd {\n fill: ").concat(options.lineColor, ";\n stroke: ").concat(options.lineColor, ";\n stroke-width: 1;\n}\n");
|
||||
return "\ndefs #statediagram-barbEnd {\n fill: ".concat(options.transitionColor, ";\n stroke: ").concat(options.transitionColor, ";\n }\ng.stateGroup text {\n fill: ").concat(options.nodeBorder, ";\n stroke: none;\n font-size: 10px;\n}\ng.stateGroup text {\n fill: ").concat(options.textColor, ";\n stroke: none;\n font-size: 10px;\n\n}\ng.stateGroup .state-title {\n font-weight: bolder;\n fill: ").concat(options.stateLabelColor, ";\n}\n\ng.stateGroup rect {\n fill: ").concat(options.mainBkg, ";\n stroke: ").concat(options.nodeBorder, ";\n}\n\ng.stateGroup line {\n stroke: ").concat(options.lineColor, ";\n stroke-width: 1;\n}\n\n.transition {\n stroke: ").concat(options.transitionColor, ";\n stroke-width: 1;\n fill: none;\n}\n\n.stateGroup .composit {\n fill: ").concat(options.background, ";\n border-bottom: 1px\n}\n\n.stateGroup .alt-composit {\n fill: #e0e0e0;\n border-bottom: 1px\n}\n\n.state-note {\n stroke: ").concat(options.noteBorderColor, ";\n fill: ").concat(options.noteBkgColor, ";\n\n text {\n fill: ").concat(options.noteTextColor, ";\n stroke: none;\n font-size: 10px;\n }\n}\n\n.stateLabel .box {\n stroke: none;\n stroke-width: 0;\n fill: ").concat(options.mainBkg, ";\n opacity: 0.5;\n}\n\n.edgeLabel .label rect {\n fill: ").concat(options.labelBackgroundColor, ";\n opacity: 0.5;\n}\n.edgeLabel .label text {\n fill: ").concat(options.transitionLabelColor || options.tertiaryTextColor, ";\n}\n.label div .edgeLabel {\n color: ").concat(options.transitionLabelColor || options.tertiaryTextColor, ";\n}\n\n.stateLabel text {\n fill: ").concat(options.stateLabelColor, ";\n font-size: 10px;\n font-weight: bold;\n}\n\n.node circle.state-start {\n fill: ").concat(options.lineColor, ";\n stroke: black;\n}\n.node circle.state-end {\n fill: ").concat(options.primaryBorderColor, ";\n stroke: ").concat(options.background, ";\n stroke-width: 1.5\n}\n.end-state-inner {\n fill: ").concat(options.compositeBackground || options.background, ";\n // stroke: ").concat(options.background, ";\n stroke-width: 1.5\n}\n\n.node rect {\n fill: ").concat(options.stateBkg || options.mainBkg, ";\n stroke: ").concat(options.stateBorder || options.nodeBorder, ";\n stroke-width: 1px;\n}\n.node polygon {\n fill: ").concat(options.mainBkg, ";\n stroke: ").concat(options.nodeBorder, ";\n stroke-width: 1px;\n}\n#statediagram-barbEnd {\n fill: ").concat(options.lineColor, ";\n}\n\n.statediagram-cluster rect {\n fill: ").concat(options.compositeTitleBackground, ";\n stroke: ").concat(options.stateBorder || options.nodeBorder, ";\n stroke-width: 1px;\n}\n\n.cluster-label, .nodeLabel {\n color: ").concat(options.stateLabelColor, ";\n}\n\n.statediagram-cluster rect.outer {\n rx: 5px;\n ry: 5px;\n}\n.statediagram-state .divider {\n stroke: ").concat(options.stateBorder || options.nodeBorder, ";\n}\n\n.statediagram-state .title-state {\n rx: 5px;\n ry: 5px;\n}\n.statediagram-cluster.statediagram-cluster .inner {\n fill: ").concat(options.compositeBackground || options.background, ";\n}\n.statediagram-cluster.statediagram-cluster-alt .inner {\n fill: ").concat(options.altBackground ? options.altBackground : '#efefef', ";\n}\n\n.statediagram-cluster .inner {\n rx:0;\n ry:0;\n}\n\n.statediagram-state rect.basic {\n rx: 5px;\n ry: 5px;\n}\n.statediagram-state rect.divider {\n stroke-dasharray: 10,10;\n fill: ").concat(options.altBackground ? options.altBackground : '#efefef', ";\n}\n\n.note-edge {\n stroke-dasharray: 5;\n}\n\n.statediagram-note rect {\n fill: ").concat(options.noteBkgColor, ";\n stroke: ").concat(options.noteBorderColor, ";\n stroke-width: 1px;\n rx: 0;\n ry: 0;\n}\n.statediagram-note rect {\n fill: ").concat(options.noteBkgColor, ";\n stroke: ").concat(options.noteBorderColor, ";\n stroke-width: 1px;\n rx: 0;\n ry: 0;\n}\n\n.statediagram-note text {\n fill: ").concat(options.noteTextColor, ";\n}\n\n.statediagram-note .nodeLabel {\n color: ").concat(options.noteTextColor, ";\n}\n.statediagram .edgeLabel {\n color: red; // ").concat(options.noteTextColor, ";\n}\n\n#dependencyStart, #dependencyEnd {\n fill: ").concat(options.lineColor, ";\n stroke: ").concat(options.lineColor, ";\n stroke-width: 1;\n}\n");
|
||||
};
|
||||
|
||||
/* harmony default export */ __webpack_exports__["default"] = (getStyles);
|
||||
@ -25817,6 +25817,8 @@ function () {
|
||||
this.secondaryBorderColor = this.secondaryBorderColor || Object(_theme_helpers__WEBPACK_IMPORTED_MODULE_1__["mkBorder"])(this.secondaryColor, this.darkMode);
|
||||
this.tertiaryBorderColor = this.tertiaryBorderColor || Object(_theme_helpers__WEBPACK_IMPORTED_MODULE_1__["mkBorder"])(this.tertiaryColor, this.darkMode);
|
||||
this.noteBorderColor = this.noteBorderColor || Object(_theme_helpers__WEBPACK_IMPORTED_MODULE_1__["mkBorder"])(this.noteBkgColor, this.darkMode);
|
||||
this.noteBkgColor = this.noteBkgColor || '#fff5ad';
|
||||
this.noteTextColor = this.noteTextColor || '#333';
|
||||
this.secondaryTextColor = this.secondaryTextColor || Object(khroma__WEBPACK_IMPORTED_MODULE_0__["invert"])(this.secondaryColor);
|
||||
this.tertiaryTextColor = this.tertiaryTextColor || Object(khroma__WEBPACK_IMPORTED_MODULE_0__["invert"])(this.tertiaryColor);
|
||||
this.lineColor = this.lineColor || Object(khroma__WEBPACK_IMPORTED_MODULE_0__["invert"])(this.background);
|
||||
@ -25872,10 +25874,20 @@ function () {
|
||||
this.taskTextClickableColor = this.taskTextClickableColor || '#003163';
|
||||
/* state colors */
|
||||
|
||||
this.labelColor = this.labelColor || this.primaryTextColor;
|
||||
this.transitionColor = this.transitionColor || this.lineColor;
|
||||
this.transitionLabelColor = this.transitionLabelColor || this.textColor;
|
||||
/* The color of the text tables of the tstates*/
|
||||
|
||||
this.stateLabelColor = this.stateLabelColor || this.stateBkg || this.primaryTextColor;
|
||||
this.stateBkg = this.stateBkg || this.mainBkg;
|
||||
this.labelBackgroundColor = this.labelBackgroundColor || this.stateBkg;
|
||||
this.compositeBackground = this.compositeBackground || this.background || this.tertiaryColor;
|
||||
this.altBackground = this.altBackground || this.tertiaryColor;
|
||||
this.compositeTitleBackground = this.compositeTitleBackground || this.mainBkg;
|
||||
this.compositeBorder = this.compositeBorder || this.nodeBorder;
|
||||
this.errorBkgColor = this.errorBkgColor || this.tertiaryColor;
|
||||
this.errorTextColor = this.errorTextColor || this.tertiaryTextColor;
|
||||
this.transitionColor = this.transitionColor || this.lineColor;
|
||||
/* class */
|
||||
|
||||
this.classText = this.classText || this.textColor;
|
||||
@ -26138,8 +26150,17 @@ function () {
|
||||
this.taskTextDarkColor = this.darkTextColor;
|
||||
/* state colors */
|
||||
|
||||
this.labelColor = this.textColor;
|
||||
this.altBackground = Object(khroma__WEBPACK_IMPORTED_MODULE_0__["lighten"])(this.background, 20);
|
||||
this.transitionColor = this.transitionColor || this.lineColor;
|
||||
this.transitionLabelColor = this.transitionLabelColor || this.textColor;
|
||||
this.stateLabelColor = this.stateLabelColor || this.stateBkg || this.primaryTextColor;
|
||||
this.stateBkg = this.stateBkg || this.mainBkg;
|
||||
this.labelBackgroundColor = this.labelBackgroundColor || this.stateBkg;
|
||||
this.compositeBackground = this.compositeBackground || this.background || this.tertiaryColor;
|
||||
this.altBackground = this.altBackground || '#555';
|
||||
this.compositeTitleBackground = this.compositeTitleBackground || this.mainBkg;
|
||||
this.compositeBorder = this.compositeBorder || this.nodeBorder;
|
||||
this.errorBkgColor = this.errorBkgColor || this.tertiaryColor;
|
||||
this.errorTextColor = this.errorTextColor || this.tertiaryTextColor;
|
||||
this.fillType0 = this.primaryColor;
|
||||
this.fillType1 = this.secondaryColor;
|
||||
this.fillType2 = Object(khroma__WEBPACK_IMPORTED_MODULE_0__["adjust"])(this.primaryColor, {
|
||||
@ -26399,6 +26420,18 @@ function () {
|
||||
this.taskTextOutsideColor = this.taskTextDarkColor;
|
||||
/* state colors */
|
||||
|
||||
this.transitionColor = this.transitionColor || this.lineColor;
|
||||
this.transitionLabelColor = this.transitionLabelColor || this.textColor;
|
||||
this.stateLabelColor = this.stateLabelColor || this.stateBkg || this.primaryTextColor;
|
||||
this.stateBkg = this.stateBkg || this.mainBkg;
|
||||
this.labelBackgroundColor = this.labelBackgroundColor || this.stateBkg;
|
||||
this.compositeBackground = this.compositeBackground || this.background || this.tertiaryColor;
|
||||
this.altBackground = this.altBackground || '#f0f0f0';
|
||||
this.compositeTitleBackground = this.compositeTitleBackground || this.mainBkg;
|
||||
this.compositeBorder = this.compositeBorder || this.nodeBorder;
|
||||
this.errorBkgColor = this.errorBkgColor || this.tertiaryColor;
|
||||
this.errorTextColor = this.errorTextColor || this.tertiaryTextColor;
|
||||
this.transitionColor = this.transitionColor || this.lineColor;
|
||||
/* class */
|
||||
|
||||
this.classText = this.primaryTextColor;
|
||||
@ -26643,6 +26676,18 @@ function () {
|
||||
this.activeTaskBkgColor = this.mainBkg;
|
||||
/* state colors */
|
||||
|
||||
this.transitionColor = this.transitionColor || this.lineColor;
|
||||
this.transitionLabelColor = this.transitionLabelColor || this.textColor;
|
||||
this.stateLabelColor = this.stateLabelColor || this.stateBkg || this.primaryTextColor;
|
||||
this.stateBkg = this.stateBkg || this.mainBkg;
|
||||
this.labelBackgroundColor = this.labelBackgroundColor || this.stateBkg;
|
||||
this.compositeBackground = this.compositeBackground || this.background || this.tertiaryColor;
|
||||
this.altBackground = this.altBackground || '#f0f0f0';
|
||||
this.compositeTitleBackground = this.compositeTitleBackground || this.mainBkg;
|
||||
this.compositeBorder = this.compositeBorder || this.nodeBorder;
|
||||
this.errorBkgColor = this.errorBkgColor || this.tertiaryColor;
|
||||
this.errorTextColor = this.errorTextColor || this.tertiaryTextColor;
|
||||
this.transitionColor = this.transitionColor || this.lineColor;
|
||||
/* class */
|
||||
|
||||
this.classText = this.primaryTextColor;
|
||||
@ -26825,8 +26870,8 @@ function () {
|
||||
this.secondaryTextColor = Object(khroma__WEBPACK_IMPORTED_MODULE_0__["invert"])(this.secondaryColor);
|
||||
this.tertiaryTextColor = Object(khroma__WEBPACK_IMPORTED_MODULE_0__["invert"])(this.tertiaryColor);
|
||||
this.lineColor = Object(khroma__WEBPACK_IMPORTED_MODULE_0__["invert"])(this.background);
|
||||
this.textColor = Object(khroma__WEBPACK_IMPORTED_MODULE_0__["invert"])(this.background);
|
||||
this.altBackground = Object(khroma__WEBPACK_IMPORTED_MODULE_0__["lighten"])(this.contrast, 55);
|
||||
this.textColor = Object(khroma__WEBPACK_IMPORTED_MODULE_0__["invert"])(this.background); // this.altBackground = lighten(this.contrast, 55);
|
||||
|
||||
this.mainBkg = '#eee';
|
||||
this.secondBkg = 'calculated';
|
||||
this.lineColor = '#666';
|
||||
@ -26918,9 +26963,9 @@ function () {
|
||||
this.labelBoxBorderColor = this.actorBorder;
|
||||
this.labelTextColor = this.text;
|
||||
this.loopTextColor = this.text;
|
||||
this.noteBorderColor = Object(khroma__WEBPACK_IMPORTED_MODULE_0__["darken"])(this.note, 60);
|
||||
this.noteBkgColor = this.note;
|
||||
this.noteTextColor = this.actorTextColor;
|
||||
this.noteBorderColor = '#999';
|
||||
this.noteBkgColor = '#666';
|
||||
this.noteTextColor = '#fff';
|
||||
/* Gantt chart variables */
|
||||
|
||||
this.sectionBkgColor = Object(khroma__WEBPACK_IMPORTED_MODULE_0__["lighten"])(this.contrast, 30);
|
||||
@ -26940,6 +26985,17 @@ function () {
|
||||
this.todayLineColor = this.critBkgColor;
|
||||
/* state colors */
|
||||
|
||||
this.transitionColor = this.transitionColor || '#000';
|
||||
this.transitionLabelColor = this.transitionLabelColor || this.textColor;
|
||||
this.stateLabelColor = this.stateLabelColor || this.stateBkg || this.primaryTextColor;
|
||||
this.stateBkg = this.stateBkg || this.mainBkg;
|
||||
this.labelBackgroundColor = this.labelBackgroundColor || this.stateBkg;
|
||||
this.compositeBackground = this.compositeBackground || this.background || this.tertiaryColor;
|
||||
this.altBackground = this.altBackground || '#f4f4f4';
|
||||
this.compositeTitleBackground = this.compositeTitleBackground || this.mainBkg;
|
||||
this.stateBorder = this.stateBorder || '#000';
|
||||
this.errorBkgColor = this.errorBkgColor || this.tertiaryColor;
|
||||
this.errorTextColor = this.errorTextColor || this.tertiaryTextColor;
|
||||
/* class */
|
||||
|
||||
this.classText = this.primaryTextColor;
|
||||
|
||||
2
dist/mermaid.core.js.map
vendored
2
dist/mermaid.core.js.map
vendored
File diff suppressed because one or more lines are too long
82
dist/mermaid.js
vendored
82
dist/mermaid.js
vendored
@ -30304,7 +30304,7 @@ function addHtmlLabel(root, node) {
|
||||
var client = div.node().getBoundingClientRect();
|
||||
fo
|
||||
.attr("width", client.width)
|
||||
.attr("height", client.height);
|
||||
.attr("height", client.height);
|
||||
|
||||
return fo;
|
||||
}
|
||||
@ -52306,7 +52306,7 @@ var config = {
|
||||
* call to mermaidAPI.initialize. Calls to mermaidAPI.reinitialize cannot make changes to
|
||||
* the `secure` keys in the current currentConfig. This prevents malicious graph directives from
|
||||
* overriding a site's default security.
|
||||
* **Notes**:
|
||||
* **Notes**:
|
||||
*
|
||||
* Default value: ['secure', 'securityLevel', 'startOnLoad', 'maxTextSize']
|
||||
*/
|
||||
@ -65130,12 +65130,12 @@ var draw = function draw(txt, id) {
|
||||
width = 1200;
|
||||
}
|
||||
|
||||
if (typeof conf.useWidth !== 'undefined') {
|
||||
if (typeof conf.pie.useWidth !== 'undefined') {
|
||||
width = conf.useWidth;
|
||||
}
|
||||
|
||||
var diagram = Object(d3__WEBPACK_IMPORTED_MODULE_0__["select"])('#' + id);
|
||||
Object(_utils__WEBPACK_IMPORTED_MODULE_4__["configureSvgSize"])(diagram, height, width, conf.useMaxWidth); // Set viewBox
|
||||
Object(_utils__WEBPACK_IMPORTED_MODULE_4__["configureSvgSize"])(diagram, height, width, conf.pie.useMaxWidth); // Set viewBox
|
||||
|
||||
elem.setAttribute('viewBox', '0 0 ' + width + ' ' + height); // Fetch the default direction, use TD if none was found
|
||||
|
||||
@ -71438,7 +71438,7 @@ var renderDoc = function renderDoc(doc, diagram, parentId, altBkg) {
|
||||
"use strict";
|
||||
__webpack_require__.r(__webpack_exports__);
|
||||
var getStyles = function getStyles(options) {
|
||||
return "g.stateGroup text {\n fill: ".concat(options.nodeBorder, ";\n stroke: none;\n font-size: 10px;\n}\ng.stateGroup text {\n fill: ").concat(options.textColor, ";\n stroke: none;\n font-size: 10px;\n\n}\ng.stateGroup .state-title {\n font-weight: bolder;\n fill: ").concat(options.labelColor, ";\n}\n\ng.stateGroup rect {\n fill: ").concat(options.mainBkg, ";\n stroke: ").concat(options.nodeBorder, ";\n}\n\ng.stateGroup line {\n stroke: ").concat(options.lineColor, ";\n stroke-width: 1;\n}\n\n.transition {\n stroke: ").concat(options.lineColor, ";\n stroke-width: 1;\n fill: none;\n}\n\n.stateGroup .composit {\n fill: ").concat(options.background, ";\n border-bottom: 1px\n}\n\n.stateGroup .alt-composit {\n fill: #e0e0e0;\n border-bottom: 1px\n}\n\n.state-note {\n stroke: ").concat(options.noteBorderColor, ";\n fill: ").concat(options.noteBkgColor, ";\n\n text {\n fill: black;\n stroke: none;\n font-size: 10px;\n }\n}\n\n.stateLabel .box {\n stroke: none;\n stroke-width: 0;\n fill: ").concat(options.mainBkg, ";\n opacity: 0.5;\n}\n\n.edgeLabel .label rect {\n fill: ").concat(options.tertiaryColor, ";\n opacity: 0.5;\n}\n.edgeLabel .label text {\n fill: ").concat(options.tertiaryTextColor, ";\n}\n.label div .edgeLabel {\n color: ").concat(options.tertiaryTextColor, ";\n}\n\n.stateLabel text {\n fill: ").concat(options.labelColor, ";\n font-size: 10px;\n font-weight: bold;\n}\n\n.node circle.state-start {\n fill: ").concat(options.lineColor, ";\n stroke: black;\n}\n.node circle.state-end {\n fill: ").concat(options.primaryBorderColor, ";\n stroke: ").concat(options.background, ";\n stroke-width: 1.5\n}\n.end-state-inner {\n fill: ").concat(options.background, ";\n // stroke: ").concat(options.background, ";\n stroke-width: 1.5\n}\n\n.node rect {\n fill: ").concat(options.mainBkg, ";\n stroke: ").concat(options.nodeBorder, ";\n stroke-width: 1px;\n}\n.node polygon {\n fill: ").concat(options.mainBkg, ";\n stroke: ").concat(options.nodeBorder, ";\n stroke-width: 1px;\n}\n#statediagram-barbEnd {\n fill: ").concat(options.lineColor, ";\n}\n\n.statediagram-cluster rect {\n fill: ").concat(options.mainBkg, ";\n stroke: ").concat(options.nodeBorder, ";\n stroke-width: 1px;\n}\n\n.cluster-label, .nodeLabel {\n color: ").concat(options.textColor, ";\n}\n\n.statediagram-cluster rect.outer {\n rx: 5px;\n ry: 5px;\n}\n.statediagram-state .divider {\n stroke: ").concat(options.nodeBorder, ";\n}\n\n.statediagram-state .title-state {\n rx: 5px;\n ry: 5px;\n}\n.statediagram-cluster.statediagram-cluster .inner {\n fill: ").concat(options.background, ";\n}\n.statediagram-cluster.statediagram-cluster-alt .inner {\n fill: #e0e0e0;\n}\n\n.statediagram-cluster .inner {\n rx:0;\n ry:0;\n}\n\n.statediagram-state rect.basic {\n rx: 5px;\n ry: 5px;\n}\n.statediagram-state rect.divider {\n stroke-dasharray: 10,10;\n fill: ").concat(options.altBackground ? options.altBackground : '#efefef', ";\n}\n\n.note-edge {\n stroke-dasharray: 5;\n}\n\n.statediagram-note rect {\n fill: ").concat(options.noteBkgColor, ";\n stroke: ").concat(options.noteBorderColor, ";\n stroke-width: 1px;\n rx: 0;\n ry: 0;\n}\n.statediagram-note rect {\n fill: ").concat(options.noteBkgColor, ";\n stroke: ").concat(options.noteBorderColor, ";\n stroke-width: 1px;\n rx: 0;\n ry: 0;\n}\n\n.statediagram-note text {\n fill: ").concat(options.noteTextColor, ";\n}\n\n.statediagram-note .nodeLabel {\n color: ").concat(options.noteTextColor, ";\n}\n\n#dependencyStart, #dependencyEnd {\n fill: ").concat(options.lineColor, ";\n stroke: ").concat(options.lineColor, ";\n stroke-width: 1;\n}\n");
|
||||
return "\ndefs #statediagram-barbEnd {\n fill: ".concat(options.transitionColor, ";\n stroke: ").concat(options.transitionColor, ";\n }\ng.stateGroup text {\n fill: ").concat(options.nodeBorder, ";\n stroke: none;\n font-size: 10px;\n}\ng.stateGroup text {\n fill: ").concat(options.textColor, ";\n stroke: none;\n font-size: 10px;\n\n}\ng.stateGroup .state-title {\n font-weight: bolder;\n fill: ").concat(options.stateLabelColor, ";\n}\n\ng.stateGroup rect {\n fill: ").concat(options.mainBkg, ";\n stroke: ").concat(options.nodeBorder, ";\n}\n\ng.stateGroup line {\n stroke: ").concat(options.lineColor, ";\n stroke-width: 1;\n}\n\n.transition {\n stroke: ").concat(options.transitionColor, ";\n stroke-width: 1;\n fill: none;\n}\n\n.stateGroup .composit {\n fill: ").concat(options.background, ";\n border-bottom: 1px\n}\n\n.stateGroup .alt-composit {\n fill: #e0e0e0;\n border-bottom: 1px\n}\n\n.state-note {\n stroke: ").concat(options.noteBorderColor, ";\n fill: ").concat(options.noteBkgColor, ";\n\n text {\n fill: ").concat(options.noteTextColor, ";\n stroke: none;\n font-size: 10px;\n }\n}\n\n.stateLabel .box {\n stroke: none;\n stroke-width: 0;\n fill: ").concat(options.mainBkg, ";\n opacity: 0.5;\n}\n\n.edgeLabel .label rect {\n fill: ").concat(options.labelBackgroundColor, ";\n opacity: 0.5;\n}\n.edgeLabel .label text {\n fill: ").concat(options.transitionLabelColor || options.tertiaryTextColor, ";\n}\n.label div .edgeLabel {\n color: ").concat(options.transitionLabelColor || options.tertiaryTextColor, ";\n}\n\n.stateLabel text {\n fill: ").concat(options.stateLabelColor, ";\n font-size: 10px;\n font-weight: bold;\n}\n\n.node circle.state-start {\n fill: ").concat(options.lineColor, ";\n stroke: black;\n}\n.node circle.state-end {\n fill: ").concat(options.primaryBorderColor, ";\n stroke: ").concat(options.background, ";\n stroke-width: 1.5\n}\n.end-state-inner {\n fill: ").concat(options.compositeBackground || options.background, ";\n // stroke: ").concat(options.background, ";\n stroke-width: 1.5\n}\n\n.node rect {\n fill: ").concat(options.stateBkg || options.mainBkg, ";\n stroke: ").concat(options.stateBorder || options.nodeBorder, ";\n stroke-width: 1px;\n}\n.node polygon {\n fill: ").concat(options.mainBkg, ";\n stroke: ").concat(options.nodeBorder, ";\n stroke-width: 1px;\n}\n#statediagram-barbEnd {\n fill: ").concat(options.lineColor, ";\n}\n\n.statediagram-cluster rect {\n fill: ").concat(options.compositeTitleBackground, ";\n stroke: ").concat(options.stateBorder || options.nodeBorder, ";\n stroke-width: 1px;\n}\n\n.cluster-label, .nodeLabel {\n color: ").concat(options.stateLabelColor, ";\n}\n\n.statediagram-cluster rect.outer {\n rx: 5px;\n ry: 5px;\n}\n.statediagram-state .divider {\n stroke: ").concat(options.stateBorder || options.nodeBorder, ";\n}\n\n.statediagram-state .title-state {\n rx: 5px;\n ry: 5px;\n}\n.statediagram-cluster.statediagram-cluster .inner {\n fill: ").concat(options.compositeBackground || options.background, ";\n}\n.statediagram-cluster.statediagram-cluster-alt .inner {\n fill: ").concat(options.altBackground ? options.altBackground : '#efefef', ";\n}\n\n.statediagram-cluster .inner {\n rx:0;\n ry:0;\n}\n\n.statediagram-state rect.basic {\n rx: 5px;\n ry: 5px;\n}\n.statediagram-state rect.divider {\n stroke-dasharray: 10,10;\n fill: ").concat(options.altBackground ? options.altBackground : '#efefef', ";\n}\n\n.note-edge {\n stroke-dasharray: 5;\n}\n\n.statediagram-note rect {\n fill: ").concat(options.noteBkgColor, ";\n stroke: ").concat(options.noteBorderColor, ";\n stroke-width: 1px;\n rx: 0;\n ry: 0;\n}\n.statediagram-note rect {\n fill: ").concat(options.noteBkgColor, ";\n stroke: ").concat(options.noteBorderColor, ";\n stroke-width: 1px;\n rx: 0;\n ry: 0;\n}\n\n.statediagram-note text {\n fill: ").concat(options.noteTextColor, ";\n}\n\n.statediagram-note .nodeLabel {\n color: ").concat(options.noteTextColor, ";\n}\n.statediagram .edgeLabel {\n color: red; // ").concat(options.noteTextColor, ";\n}\n\n#dependencyStart, #dependencyEnd {\n fill: ").concat(options.lineColor, ";\n stroke: ").concat(options.lineColor, ";\n stroke-width: 1;\n}\n");
|
||||
};
|
||||
|
||||
/* harmony default export */ __webpack_exports__["default"] = (getStyles);
|
||||
@ -74169,6 +74169,8 @@ function () {
|
||||
this.secondaryBorderColor = this.secondaryBorderColor || Object(_theme_helpers__WEBPACK_IMPORTED_MODULE_1__["mkBorder"])(this.secondaryColor, this.darkMode);
|
||||
this.tertiaryBorderColor = this.tertiaryBorderColor || Object(_theme_helpers__WEBPACK_IMPORTED_MODULE_1__["mkBorder"])(this.tertiaryColor, this.darkMode);
|
||||
this.noteBorderColor = this.noteBorderColor || Object(_theme_helpers__WEBPACK_IMPORTED_MODULE_1__["mkBorder"])(this.noteBkgColor, this.darkMode);
|
||||
this.noteBkgColor = this.noteBkgColor || '#fff5ad';
|
||||
this.noteTextColor = this.noteTextColor || '#333';
|
||||
this.secondaryTextColor = this.secondaryTextColor || Object(khroma__WEBPACK_IMPORTED_MODULE_0__["invert"])(this.secondaryColor);
|
||||
this.tertiaryTextColor = this.tertiaryTextColor || Object(khroma__WEBPACK_IMPORTED_MODULE_0__["invert"])(this.tertiaryColor);
|
||||
this.lineColor = this.lineColor || Object(khroma__WEBPACK_IMPORTED_MODULE_0__["invert"])(this.background);
|
||||
@ -74224,10 +74226,20 @@ function () {
|
||||
this.taskTextClickableColor = this.taskTextClickableColor || '#003163';
|
||||
/* state colors */
|
||||
|
||||
this.labelColor = this.labelColor || this.primaryTextColor;
|
||||
this.transitionColor = this.transitionColor || this.lineColor;
|
||||
this.transitionLabelColor = this.transitionLabelColor || this.textColor;
|
||||
/* The color of the text tables of the tstates*/
|
||||
|
||||
this.stateLabelColor = this.stateLabelColor || this.stateBkg || this.primaryTextColor;
|
||||
this.stateBkg = this.stateBkg || this.mainBkg;
|
||||
this.labelBackgroundColor = this.labelBackgroundColor || this.stateBkg;
|
||||
this.compositeBackground = this.compositeBackground || this.background || this.tertiaryColor;
|
||||
this.altBackground = this.altBackground || this.tertiaryColor;
|
||||
this.compositeTitleBackground = this.compositeTitleBackground || this.mainBkg;
|
||||
this.compositeBorder = this.compositeBorder || this.nodeBorder;
|
||||
this.errorBkgColor = this.errorBkgColor || this.tertiaryColor;
|
||||
this.errorTextColor = this.errorTextColor || this.tertiaryTextColor;
|
||||
this.transitionColor = this.transitionColor || this.lineColor;
|
||||
/* class */
|
||||
|
||||
this.classText = this.classText || this.textColor;
|
||||
@ -74490,8 +74502,17 @@ function () {
|
||||
this.taskTextDarkColor = this.darkTextColor;
|
||||
/* state colors */
|
||||
|
||||
this.labelColor = this.textColor;
|
||||
this.altBackground = Object(khroma__WEBPACK_IMPORTED_MODULE_0__["lighten"])(this.background, 20);
|
||||
this.transitionColor = this.transitionColor || this.lineColor;
|
||||
this.transitionLabelColor = this.transitionLabelColor || this.textColor;
|
||||
this.stateLabelColor = this.stateLabelColor || this.stateBkg || this.primaryTextColor;
|
||||
this.stateBkg = this.stateBkg || this.mainBkg;
|
||||
this.labelBackgroundColor = this.labelBackgroundColor || this.stateBkg;
|
||||
this.compositeBackground = this.compositeBackground || this.background || this.tertiaryColor;
|
||||
this.altBackground = this.altBackground || '#555';
|
||||
this.compositeTitleBackground = this.compositeTitleBackground || this.mainBkg;
|
||||
this.compositeBorder = this.compositeBorder || this.nodeBorder;
|
||||
this.errorBkgColor = this.errorBkgColor || this.tertiaryColor;
|
||||
this.errorTextColor = this.errorTextColor || this.tertiaryTextColor;
|
||||
this.fillType0 = this.primaryColor;
|
||||
this.fillType1 = this.secondaryColor;
|
||||
this.fillType2 = Object(khroma__WEBPACK_IMPORTED_MODULE_0__["adjust"])(this.primaryColor, {
|
||||
@ -74751,6 +74772,18 @@ function () {
|
||||
this.taskTextOutsideColor = this.taskTextDarkColor;
|
||||
/* state colors */
|
||||
|
||||
this.transitionColor = this.transitionColor || this.lineColor;
|
||||
this.transitionLabelColor = this.transitionLabelColor || this.textColor;
|
||||
this.stateLabelColor = this.stateLabelColor || this.stateBkg || this.primaryTextColor;
|
||||
this.stateBkg = this.stateBkg || this.mainBkg;
|
||||
this.labelBackgroundColor = this.labelBackgroundColor || this.stateBkg;
|
||||
this.compositeBackground = this.compositeBackground || this.background || this.tertiaryColor;
|
||||
this.altBackground = this.altBackground || '#f0f0f0';
|
||||
this.compositeTitleBackground = this.compositeTitleBackground || this.mainBkg;
|
||||
this.compositeBorder = this.compositeBorder || this.nodeBorder;
|
||||
this.errorBkgColor = this.errorBkgColor || this.tertiaryColor;
|
||||
this.errorTextColor = this.errorTextColor || this.tertiaryTextColor;
|
||||
this.transitionColor = this.transitionColor || this.lineColor;
|
||||
/* class */
|
||||
|
||||
this.classText = this.primaryTextColor;
|
||||
@ -74995,6 +75028,18 @@ function () {
|
||||
this.activeTaskBkgColor = this.mainBkg;
|
||||
/* state colors */
|
||||
|
||||
this.transitionColor = this.transitionColor || this.lineColor;
|
||||
this.transitionLabelColor = this.transitionLabelColor || this.textColor;
|
||||
this.stateLabelColor = this.stateLabelColor || this.stateBkg || this.primaryTextColor;
|
||||
this.stateBkg = this.stateBkg || this.mainBkg;
|
||||
this.labelBackgroundColor = this.labelBackgroundColor || this.stateBkg;
|
||||
this.compositeBackground = this.compositeBackground || this.background || this.tertiaryColor;
|
||||
this.altBackground = this.altBackground || '#f0f0f0';
|
||||
this.compositeTitleBackground = this.compositeTitleBackground || this.mainBkg;
|
||||
this.compositeBorder = this.compositeBorder || this.nodeBorder;
|
||||
this.errorBkgColor = this.errorBkgColor || this.tertiaryColor;
|
||||
this.errorTextColor = this.errorTextColor || this.tertiaryTextColor;
|
||||
this.transitionColor = this.transitionColor || this.lineColor;
|
||||
/* class */
|
||||
|
||||
this.classText = this.primaryTextColor;
|
||||
@ -75177,8 +75222,8 @@ function () {
|
||||
this.secondaryTextColor = Object(khroma__WEBPACK_IMPORTED_MODULE_0__["invert"])(this.secondaryColor);
|
||||
this.tertiaryTextColor = Object(khroma__WEBPACK_IMPORTED_MODULE_0__["invert"])(this.tertiaryColor);
|
||||
this.lineColor = Object(khroma__WEBPACK_IMPORTED_MODULE_0__["invert"])(this.background);
|
||||
this.textColor = Object(khroma__WEBPACK_IMPORTED_MODULE_0__["invert"])(this.background);
|
||||
this.altBackground = Object(khroma__WEBPACK_IMPORTED_MODULE_0__["lighten"])(this.contrast, 55);
|
||||
this.textColor = Object(khroma__WEBPACK_IMPORTED_MODULE_0__["invert"])(this.background); // this.altBackground = lighten(this.contrast, 55);
|
||||
|
||||
this.mainBkg = '#eee';
|
||||
this.secondBkg = 'calculated';
|
||||
this.lineColor = '#666';
|
||||
@ -75270,9 +75315,9 @@ function () {
|
||||
this.labelBoxBorderColor = this.actorBorder;
|
||||
this.labelTextColor = this.text;
|
||||
this.loopTextColor = this.text;
|
||||
this.noteBorderColor = Object(khroma__WEBPACK_IMPORTED_MODULE_0__["darken"])(this.note, 60);
|
||||
this.noteBkgColor = this.note;
|
||||
this.noteTextColor = this.actorTextColor;
|
||||
this.noteBorderColor = '#999';
|
||||
this.noteBkgColor = '#666';
|
||||
this.noteTextColor = '#fff';
|
||||
/* Gantt chart variables */
|
||||
|
||||
this.sectionBkgColor = Object(khroma__WEBPACK_IMPORTED_MODULE_0__["lighten"])(this.contrast, 30);
|
||||
@ -75292,6 +75337,17 @@ function () {
|
||||
this.todayLineColor = this.critBkgColor;
|
||||
/* state colors */
|
||||
|
||||
this.transitionColor = this.transitionColor || '#000';
|
||||
this.transitionLabelColor = this.transitionLabelColor || this.textColor;
|
||||
this.stateLabelColor = this.stateLabelColor || this.stateBkg || this.primaryTextColor;
|
||||
this.stateBkg = this.stateBkg || this.mainBkg;
|
||||
this.labelBackgroundColor = this.labelBackgroundColor || this.stateBkg;
|
||||
this.compositeBackground = this.compositeBackground || this.background || this.tertiaryColor;
|
||||
this.altBackground = this.altBackground || '#f4f4f4';
|
||||
this.compositeTitleBackground = this.compositeTitleBackground || this.mainBkg;
|
||||
this.stateBorder = this.stateBorder || '#000';
|
||||
this.errorBkgColor = this.errorBkgColor || this.tertiaryColor;
|
||||
this.errorTextColor = this.errorTextColor || this.tertiaryTextColor;
|
||||
/* class */
|
||||
|
||||
this.classText = this.primaryTextColor;
|
||||
|
||||
2
dist/mermaid.js.map
vendored
2
dist/mermaid.js.map
vendored
File diff suppressed because one or more lines are too long
4
dist/mermaid.min.js
vendored
4
dist/mermaid.min.js
vendored
File diff suppressed because one or more lines are too long
2
dist/mermaid.min.js.map
vendored
2
dist/mermaid.min.js.map
vendored
File diff suppressed because one or more lines are too long
@ -1,6 +1,6 @@
|
||||
/** mermaid
|
||||
* https://mermaidjs.github.io/
|
||||
* (c) 2014-2015 Knut Sveidqvist
|
||||
* (c) 2014-2021 Knut Sveidqvist
|
||||
* MIT license.
|
||||
*
|
||||
* Based on js sequence diagrams jison grammr
|
||||
@ -35,36 +35,46 @@
|
||||
%x LINE
|
||||
|
||||
%%
|
||||
|
||||
.*direction\s+TB[^\n]* return 'direction_tb';
|
||||
.*direction\s+BT[^\n]* return 'direction_bt';
|
||||
.*direction\s+RL[^\n]* return 'direction_rl';
|
||||
.*direction\s+LR[^\n]* return 'direction_lr';
|
||||
|
||||
\%\%\{ { this.begin('open_directive'); return 'open_directive'; }
|
||||
<open_directive>((?:(?!\}\%\%)[^:.])*) { this.begin('type_directive'); return 'type_directive'; }
|
||||
<type_directive>":" { this.popState(); this.begin('arg_directive'); return ':'; }
|
||||
<type_directive,arg_directive>\}\%\% { this.popState(); this.popState(); return 'close_directive'; }
|
||||
<arg_directive>((?:(?!\}\%\%).|\n)*) return 'arg_directive';
|
||||
\%\%(?!\{)[^\n]* /* skip comments */
|
||||
[^\}]\%\%[^\n]* /* skip comments */{ console.log('Crap after close'); }
|
||||
[^\}]\%\%[^\n]* /* skip comments */{ /*console.log('Crap after close');*/ }
|
||||
|
||||
[\n]+ return 'NL';
|
||||
[\s]+ /* skip all whitespace */
|
||||
<ID,STATE,struct,LINE,open_directive,type_directive,arg_directive,close_directive>((?!\n)\s)+ /* skip same-line whitespace */
|
||||
<INITIAL,ID,STATE,struct,LINE,open_directive,type_directive,arg_directive,close_directive>\#[^\n]* /* skip comments */
|
||||
\%%[^\n]* /* skip comments */
|
||||
|
||||
"scale"\s+ { this.pushState('SCALE'); /* console.log('Got scale', yytext);*/ return 'scale'; }
|
||||
<SCALE>\d+ return 'WIDTH';
|
||||
<SCALE>\s+"width" {this.popState();}
|
||||
|
||||
<INITIAL,struct>"state"\s+ { console.log('Starting STATE');this.pushState('STATE'); }
|
||||
<INITIAL,struct>"state"\s+ { /*console.log('Starting STATE zxzx'+yy.getDirection());*/this.pushState('STATE'); }
|
||||
<STATE>.*"<<fork>>" {this.popState();yytext=yytext.slice(0,-8).trim(); /*console.warn('Fork Fork: ',yytext);*/return 'FORK';}
|
||||
<STATE>.*"<<join>>" {this.popState();yytext=yytext.slice(0,-8).trim();/*console.warn('Fork Join: ',yytext);*/return 'JOIN';}
|
||||
<STATE>.*"<<choice>>" {this.popState();yytext=yytext.slice(0,-10).trim();/*console.warn('Fork Join: ',yytext);*/return 'CHOICE';}
|
||||
<STATE>.*"[[fork]]" {this.popState();yytext=yytext.slice(0,-8).trim();/*console.warn('Fork Fork: ',yytext);*/return 'FORK';}
|
||||
<STATE>.*"[[join]]" {this.popState();yytext=yytext.slice(0,-8).trim();/*console.warn('Fork Join: ',yytext);*/return 'JOIN';}
|
||||
<STATE>.*"[[choice]]" {this.popState();yytext=yytext.slice(0,-10).trim();/*console.warn('Fork Join: ',yytext);*/return 'CHOICE';}
|
||||
<STATE>["] { console.log('Starting STATE_STRING');this.begin("STATE_STRING");}
|
||||
<struct>.*direction\s+TB[^\n]* { return 'direction_tb';}
|
||||
<struct>.*direction\s+BT[^\n]* { return 'direction_bt';}
|
||||
<struct>.*direction\s+RL[^\n]* { return 'direction_rl';}
|
||||
<struct>.*direction\s+LR[^\n]* { return 'direction_lr';}
|
||||
|
||||
<STATE>["] { /*console.log('Starting STATE_STRING zxzx');*/this.begin("STATE_STRING");}
|
||||
<STATE>\s*"as"\s+ {this.popState();this.pushState('STATE_ID');return "AS";}
|
||||
<STATE_ID>[^\n\{]* {this.popState();/* console.log('STATE_ID', yytext);*/return "ID";}
|
||||
<STATE_STRING>["] this.popState();
|
||||
<STATE_STRING>[^"]* { console.log('Long description:', yytext);return "STATE_DESCR";}
|
||||
<STATE_STRING>[^"]* { /*console.log('Long description:', yytext);*/return "STATE_DESCR";}
|
||||
<STATE>[^\n\s\{]+ {/*console.log('COMPOSIT_STATE', yytext);*/return 'COMPOSIT_STATE';}
|
||||
<STATE>\n {this.popState();}
|
||||
<INITIAL,STATE>\{ {this.popState();this.pushState('struct'); /*console.log('begin struct', yytext);*/return 'STRUCT_START';}
|
||||
@ -144,7 +154,6 @@ statement
|
||||
| COMPOSIT_STATE
|
||||
| COMPOSIT_STATE STRUCT_START document STRUCT_STOP
|
||||
{
|
||||
|
||||
/* console.warn('Adding document for state without id ', $1);*/
|
||||
$$={ stmt: 'state', id: $1, type: 'default', description: '', doc: $3 }
|
||||
}
|
||||
@ -161,7 +170,7 @@ statement
|
||||
}
|
||||
| STATE_DESCR AS ID STRUCT_START document STRUCT_STOP
|
||||
{
|
||||
//console.warn('Adding document for state with id ', $3, $4); yy.addDocument($3);
|
||||
/*console.warn('Adding document for state with id zxzx', $3, $4, yy.getDirection());*/ yy.addDocument($3);
|
||||
$$={ stmt: 'state', id: $3, type: 'default', description: $1, doc: $5 }
|
||||
}
|
||||
| FORK {
|
||||
@ -183,12 +192,23 @@ statement
|
||||
}
|
||||
| note NOTE_TEXT AS ID
|
||||
| directive
|
||||
| direction
|
||||
;
|
||||
|
||||
directive
|
||||
: openDirective typeDirective closeDirective
|
||||
| openDirective typeDirective ':' argDirective closeDirective
|
||||
;
|
||||
direction
|
||||
: direction_tb
|
||||
{ yy.setDirection('TB');$$={stmt:'dir', value:'TB'};}
|
||||
| direction_bt
|
||||
{ yy.setDirection('BT');$$={stmt:'dir', value:'BT'};}
|
||||
| direction_rl
|
||||
{ yy.setDirection('RL'); $$={stmt:'dir', value:'RL'};}
|
||||
| direction_lr
|
||||
{ yy.setDirection('LR');$$={stmt:'dir', value:'LR'};}
|
||||
;
|
||||
|
||||
eol
|
||||
: NL
|
||||
|
||||
@ -67,6 +67,7 @@ const docTranslator = (parent, node, first) => {
|
||||
const getRootDocV2 = () => {
|
||||
docTranslator({ id: 'root' }, { id: 'root', doc: rootDoc }, true);
|
||||
return { id: 'root', doc: rootDoc };
|
||||
// Here
|
||||
};
|
||||
|
||||
const extract = _doc => {
|
||||
@ -230,7 +231,11 @@ let classes = [];
|
||||
|
||||
const getClasses = () => classes;
|
||||
|
||||
const getDirection = () => 'TB';
|
||||
let direction = 'TB';
|
||||
const getDirection = () => direction;
|
||||
const setDirection = dir => {
|
||||
direction = dir;
|
||||
};
|
||||
|
||||
export const relationType = {
|
||||
AGGREGATION: 0,
|
||||
@ -253,6 +258,7 @@ export default {
|
||||
getDirection,
|
||||
addRelation,
|
||||
getDividerId,
|
||||
setDirection,
|
||||
// addDescription,
|
||||
cleanupLabel,
|
||||
lineType,
|
||||
|
||||
@ -84,8 +84,10 @@ const setupNode = (g, parent, node, altFlag) => {
|
||||
|
||||
// group
|
||||
if (!nodeDb[node.id].type && node.doc) {
|
||||
log.info('Setting cluser for ', node.id);
|
||||
log.info('Setting cluster for ', node.id, getDir(node));
|
||||
console.info('Setting cluster for ', node.id, getDir(node));
|
||||
nodeDb[node.id].type = 'group';
|
||||
nodeDb[node.id].dir = getDir(node);
|
||||
nodeDb[node.id].shape = node.type === 'divider' ? 'divider' : 'roundedWithTitle';
|
||||
nodeDb[node.id].classes =
|
||||
nodeDb[node.id].classes +
|
||||
@ -103,7 +105,7 @@ const setupNode = (g, parent, node, altFlag) => {
|
||||
classes: nodeDb[node.id].classes, //classStr,
|
||||
style: '', //styles.style,
|
||||
id: node.id,
|
||||
dir: altFlag ? 'LR' : 'TB',
|
||||
dir: nodeDb[node.id].dir,
|
||||
domId: 'state-' + node.id + '-' + cnt,
|
||||
type: nodeDb[node.id].type,
|
||||
padding: 15 //getConfig().flowchart.padding
|
||||
@ -208,7 +210,21 @@ const setupDoc = (g, parent, doc, altFlag) => {
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
const getDir = (nodes, defaultDir) => {
|
||||
let dir = defaultDir || 'BT';
|
||||
if (nodes.doc) {
|
||||
for (let i = 0; i < nodes.doc.length; i++) {
|
||||
const node = nodes.doc[i];
|
||||
if (node.stmt === 'dir') {
|
||||
dir = node.value;
|
||||
}
|
||||
}
|
||||
}
|
||||
if(nodes.id==='A') {
|
||||
console.log('nodes.id',nodes.id, dir)
|
||||
}
|
||||
return dir;
|
||||
};
|
||||
/**
|
||||
* Draws a flowchart in the tag with id: id based on the graph definition in text.
|
||||
* @param text
|
||||
@ -216,6 +232,7 @@ const setupDoc = (g, parent, doc, altFlag) => {
|
||||
*/
|
||||
export const draw = function(text, id) {
|
||||
log.info('Drawing state diagram (v2)', id);
|
||||
console.info('Drawing state diagram (v2)', id);
|
||||
stateDb.clear();
|
||||
nodeDb = {};
|
||||
const parser = state.parser;
|
||||
@ -234,13 +251,18 @@ export const draw = function(text, id) {
|
||||
const nodeSpacing = conf.nodeSpacing || 50;
|
||||
const rankSpacing = conf.rankSpacing || 50;
|
||||
|
||||
log.info(stateDb.getRootDocV2());
|
||||
stateDb.extract(stateDb.getRootDocV2());
|
||||
log.info(stateDb.getRootDocV2());
|
||||
console.info(stateDb.getRootDocV2());
|
||||
|
||||
// Create the input mermaid.graph
|
||||
const g = new graphlib.Graph({
|
||||
multigraph: true,
|
||||
compound: true
|
||||
})
|
||||
.setGraph({
|
||||
rankdir: 'TB',
|
||||
rankdir: getDir(stateDb.getRootDocV2()),
|
||||
nodesep: nodeSpacing,
|
||||
ranksep: rankSpacing,
|
||||
marginx: 8,
|
||||
@ -250,10 +272,9 @@ export const draw = function(text, id) {
|
||||
return {};
|
||||
});
|
||||
|
||||
log.info(stateDb.getRootDocV2());
|
||||
stateDb.extract(stateDb.getRootDocV2());
|
||||
log.info(stateDb.getRootDocV2());
|
||||
console.info('Setup node')
|
||||
setupNode(g, undefined, stateDb.getRootDocV2(), true);
|
||||
console.info('Setup node done')
|
||||
|
||||
// Set up an SVG group so that we can translate the final graph.
|
||||
const svg = select(`[id="${id}"]`);
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user