Merge branch 'develop' into 3056_Chrome_Compatibility
This commit is contained in:
commit
8f107026a9
|
@ -879,6 +879,31 @@ Enterprise_Boundary(b0, "BankBoundary0") {
|
|||
}
|
||||
</div>
|
||||
|
||||
<div class="mermaid">
|
||||
classDiagram
|
||||
Interface1 ()-- Interface1Impl
|
||||
</div>
|
||||
|
||||
<div class="mermaid">
|
||||
classDiagram
|
||||
direction LR
|
||||
Animal ()-- Dog
|
||||
Dog : bark()
|
||||
Dog : species()
|
||||
</div>
|
||||
|
||||
<div class="mermaid">
|
||||
classDiagram
|
||||
direction RL
|
||||
Fruit ()-- Apple
|
||||
Apple : color()
|
||||
Apple : -int leafCount()
|
||||
Fruit ()-- Pineapple
|
||||
Pineapple : color()
|
||||
Pineapple : -int leafCount()
|
||||
Pineapple : -int spikeCount()
|
||||
</div>
|
||||
|
||||
<div class="mermaid">
|
||||
stateDiagram
|
||||
accDescription This is a state diagram showing one state
|
||||
|
|
|
@ -510,6 +510,9 @@ export const insertEdge = function (elem, e, edge, clusterDb, diagramType, graph
|
|||
case 'dependency':
|
||||
svgPath.attr('marker-start', 'url(' + url + '#' + diagramType + '-dependencyStart' + ')');
|
||||
break;
|
||||
case 'lollipop':
|
||||
svgPath.attr('marker-start', 'url(' + url + '#' + diagramType + '-lollipopStart' + ')');
|
||||
break;
|
||||
default:
|
||||
}
|
||||
switch (edge.arrowTypeEnd) {
|
||||
|
@ -537,6 +540,9 @@ export const insertEdge = function (elem, e, edge, clusterDb, diagramType, graph
|
|||
case 'dependency':
|
||||
svgPath.attr('marker-end', 'url(' + url + '#' + diagramType + '-dependencyEnd' + ')');
|
||||
break;
|
||||
case 'lollipop':
|
||||
svgPath.attr('marker-end', 'url(' + url + '#' + diagramType + '-lollipopEnd' + ')');
|
||||
break;
|
||||
default:
|
||||
}
|
||||
let paths = {};
|
||||
|
|
|
@ -119,6 +119,24 @@ const dependency = (elem, type) => {
|
|||
.append('path')
|
||||
.attr('d', 'M 18,7 L9,13 L14,7 L9,1 Z');
|
||||
};
|
||||
const lollipop = (elem, type, id) => {
|
||||
elem
|
||||
.append('defs')
|
||||
.append('marker')
|
||||
.attr('id', type + '-lollipopStart')
|
||||
.attr('class', 'marker lollipop ' + type)
|
||||
.attr('refX', 0)
|
||||
.attr('refY', 7)
|
||||
.attr('markerWidth', 190)
|
||||
.attr('markerHeight', 240)
|
||||
.attr('orient', 'auto')
|
||||
.append('circle')
|
||||
.attr('stroke', 'black')
|
||||
.attr('fill', 'white')
|
||||
.attr('cx', 6)
|
||||
.attr('cy', 7)
|
||||
.attr('r', 6);
|
||||
};
|
||||
const point = (elem, type) => {
|
||||
elem
|
||||
.append('marker')
|
||||
|
@ -250,6 +268,7 @@ const markers = {
|
|||
composition,
|
||||
aggregation,
|
||||
dependency,
|
||||
lollipop,
|
||||
point,
|
||||
circle,
|
||||
cross,
|
||||
|
|
|
@ -313,6 +313,7 @@ export const relationType = {
|
|||
EXTENSION: 1,
|
||||
COMPOSITION: 2,
|
||||
DEPENDENCY: 3,
|
||||
LOLLIPOP: 4,
|
||||
};
|
||||
|
||||
const setupToolTips = function (element) {
|
||||
|
|
|
@ -341,7 +341,13 @@ export const draw = function (text, id, _version, diagObj) {
|
|||
|
||||
// Run the renderer. This is what draws the final graph.
|
||||
const element = root.select('#' + id + ' g');
|
||||
render(element, g, ['aggregation', 'extension', 'composition', 'dependency'], 'classDiagram', id);
|
||||
render(
|
||||
element,
|
||||
g,
|
||||
['aggregation', 'extension', 'composition', 'dependency', 'lollipop'],
|
||||
'classDiagram',
|
||||
id
|
||||
);
|
||||
|
||||
setupGraphViewbox(g, svg, conf.diagramPadding, conf.useMaxWidth);
|
||||
|
||||
|
@ -423,6 +429,9 @@ function getArrowMarker(type) {
|
|||
case 3:
|
||||
marker = 'dependency';
|
||||
break;
|
||||
case 4:
|
||||
marker = 'lollipop';
|
||||
break;
|
||||
default:
|
||||
marker = 'none';
|
||||
}
|
||||
|
|
|
@ -44,6 +44,7 @@ accDescr\s*"{"\s* { this.begin("acc_descr_multili
|
|||
"classDiagram-v2" return 'CLASS_DIAGRAM';
|
||||
"classDiagram" return 'CLASS_DIAGRAM';
|
||||
[{] { this.begin("struct"); /*console.log('Starting struct');*/ return 'STRUCT_START';}
|
||||
<INITIAL,struct>"[*]" { /*console.log('EDGE_STATE=',yytext);*/ return 'EDGE_STATE';}
|
||||
<struct><<EOF>> return "EOF_IN_STRUCT";
|
||||
<struct>[{] return "OPEN_IN_STRUCT";
|
||||
<struct>[}] { /*console.log('Ending struct');*/this.popState(); return 'STRUCT_STOP';}}
|
||||
|
@ -104,6 +105,7 @@ Function arguments are optional: 'call <callback_name>()' simply executes 'callb
|
|||
\s*\< return 'DEPENDENCY';
|
||||
\s*\* return 'COMPOSITION';
|
||||
\s*o return 'AGGREGATION';
|
||||
\s*\(\) return 'LOLLIPOP';
|
||||
\-\- return 'LINE';
|
||||
\.\. return 'DOTTED_LINE';
|
||||
":"{1}[^:\n;]+ return 'LABEL';
|
||||
|
@ -310,6 +312,7 @@ relationType
|
|||
| EXTENSION { $$=yy.relationType.EXTENSION;}
|
||||
| COMPOSITION { $$=yy.relationType.COMPOSITION;}
|
||||
| DEPENDENCY { $$=yy.relationType.DEPENDENCY;}
|
||||
| LOLLIPOP { $$=yy.relationType.LOLLIPOP;}
|
||||
;
|
||||
|
||||
lineType
|
||||
|
|
|
@ -128,6 +128,18 @@ g.classGroup line {
|
|||
stroke-width: 1;
|
||||
}
|
||||
|
||||
#lollipopStart, .lollipop {
|
||||
fill: ${options.mainBkg} !important;
|
||||
stroke: ${options.lineColor} !important;
|
||||
stroke-width: 1;
|
||||
}
|
||||
|
||||
#lollipopEnd, .lollipop {
|
||||
fill: ${options.mainBkg} !important;
|
||||
stroke: ${options.lineColor} !important;
|
||||
stroke-width: 1;
|
||||
}
|
||||
|
||||
.edgeTerminals {
|
||||
font-size: 11px;
|
||||
}
|
||||
|
|
|
@ -15,6 +15,8 @@ export const drawEdge = function (elem, path, relation, conf, diagObj) {
|
|||
return 'composition';
|
||||
case diagObj.db.DEPENDENCY:
|
||||
return 'dependency';
|
||||
case diagObj.db.LOLLIPOP:
|
||||
return 'lollipop';
|
||||
}
|
||||
};
|
||||
|
||||
|
|
Loading…
Reference in New Issue