Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fix uml and remove hard-coded styles #725

Closed
wants to merge 1 commit into from
Closed

fix uml and remove hard-coded styles #725

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
7 changes: 6 additions & 1 deletion .gitignore
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,3 +1,4 @@
# ignore this file on macOS
.DS_Store

node_modules/
Expand All @@ -6,4 +7,8 @@ coverage/
dist/*.js
dist/*.map

yarn-error.log
# ignore all log files
*.log

# ignore IDE files
.idea
137 changes: 69 additions & 68 deletions src/diagrams/class/classDiagram.spec.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
/* eslint-env jasmine */
import { parser } from './parser/classDiagram'
import {parser} from './parser/classDiagram'
import classDb from './classDb'

describe('class diagram, ', function () {
Expand All @@ -10,95 +10,95 @@ describe('class diagram, ', function () {

it('should handle relation definitions', function () {
const str = 'classDiagram\n' +
'Class01 <|-- Class02\n' +
'Class03 *-- Class04\n' +
'Class05 o-- Class06\n' +
'Class07 .. Class08\n' +
'Class09 -- Class1'
'Class01 <|-- Class02\n' +
'Class03 *-- Class04\n' +
'Class05 o-- Class06\n' +
'Class07 .. Class08\n' +
'Class09 -- Class1'

parser.parse(str)
})
it('should handle relation definition of different types and directions', function () {
const str = 'classDiagram\n' +
'Class11 <|.. Class12\n' +
'Class13 --> Class14\n' +
'Class15 ..> Class16\n' +
'Class17 ..|> Class18\n' +
'Class19 <--* Class20'
'Class11 <|.. Class12\n' +
'Class13 --> Class14\n' +
'Class15 ..> Class16\n' +
'Class17 ..|> Class18\n' +
'Class19 <--* Class20'

parser.parse(str)
})

it('should handle cardinality and labels', function () {
const str = 'classDiagram\n' +
'Class01 "1" *-- "many" Class02 : contains\n' +
'Class03 o-- Class04 : aggregation\n' +
'Class05 --> "1" Class06'
'Class01 "1" *-- "many" Class02 : contains\n' +
'Class03 o-- Class04 : aggregation\n' +
'Class05 --> "1" Class06'

parser.parse(str)
})
it('should handle class definitions', function () {
const str = 'classDiagram\n' +
'class Car\n' +
'Driver -- Car : drives >\n' +
'Car *-- Wheel : have 4 >\n' +
'Car -- Person : < owns'
'class Car\n' +
'Driver -- Car : drives >\n' +
'Car *-- Wheel : have 4 >\n' +
'Car -- Person : < owns'

parser.parse(str)
})

it('should handle method statements', function () {
const str = 'classDiagram\n' +
'Object <|-- ArrayList\n' +
'Object : equals()\n' +
'ArrayList : Object[] elementData\n' +
'ArrayList : size()'
'Object <|-- ArrayList\n' +
'Object : equals()\n' +
'ArrayList : Object[] elementData\n' +
'ArrayList : size()'

parser.parse(str)
})
it('should handle parsing of method statements grouped by brackets', function () {
const str = 'classDiagram\n' +
'class Dummy {\n' +
'String data\n' +
' void methods()\n' +
'}\n' +
'\n' +
'class Flight {\n' +
' flightNumber : Integer\n' +
' departureTime : Date\n' +
'}'
'class Dummy {\n' +
'String data\n' +
' void methods()\n' +
'}\n' +
'\n' +
'class Flight {\n' +
' flightNumber : Integer\n' +
' departureTime : Date\n' +
'}'

parser.parse(str)
})

it('should handle parsing of separators', function () {
const str = 'classDiagram\n' +
'class Foo1 {\n' +
' You can use\n' +
' several lines\n' +
'..\n' +
'as you want\n' +
'and group\n' +
'==\n' +
'things together.\n' +
'__\n' +
'You can have as many groups\n' +
'as you want\n' +
'--\n' +
'End of class\n' +
'}\n' +
'\n' +
'class User {\n' +
'.. Simple Getter ..\n' +
'+ getName()\n' +
'+ getAddress()\n' +
'.. Some setter ..\n' +
'+ setName()\n' +
'__ private data __\n' +
'int age\n' +
'-- encrypted --\n' +
'String password\n' +
'}'
'class Foo1 {\n' +
' You can use\n' +
' several lines\n' +
'..\n' +
'as you want\n' +
'and group\n' +
'==\n' +
'things together.\n' +
'__\n' +
'You can have as many groups\n' +
'as you want\n' +
'--\n' +
'End of class\n' +
'}\n' +
'\n' +
'class User {\n' +
'.. Simple Getter ..\n' +
'+ getName()\n' +
'+ getAddress()\n' +
'.. Some setter ..\n' +
'+ setName()\n' +
'__ private data __\n' +
'int age\n' +
'-- encrypted --\n' +
'String password\n' +
'}'

parser.parse(str)
})
Expand All @@ -109,9 +109,9 @@ describe('class diagram, ', function () {
parser.yy = classDb
parser.yy.clear()
})
it('should handle relation definitions EXTENSION', function () {
it('should handle relation definitions EXTENSION (right to left)', function () {
const str = 'classDiagram\n' +
'Class01 <|-- Class02'
'Class01 <|-- Class02'

parser.parse(str)

Expand All @@ -122,10 +122,11 @@ describe('class diagram, ', function () {
expect(relations[0].relation.type1).toBe(classDb.relationType.EXTENSION)
expect(relations[0].relation.type2).toBe('none')
expect(relations[0].relation.lineType).toBe(classDb.lineType.LINE)
console.log(relations)
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This should be removed.

})
it('should handle relation definitions AGGREGATION and dotted line', function () {
const str = 'classDiagram\n' +
'Class01 o.. Class02'
'Class01 o.. Class02'

parser.parse(str)

Expand All @@ -139,7 +140,7 @@ describe('class diagram, ', function () {
})
it('should handle relation definitions COMPOSITION on both sides', function () {
const str = 'classDiagram\n' +
'Class01 *--* Class02'
'Class01 *--* Class02'

parser.parse(str)

Expand All @@ -153,7 +154,7 @@ describe('class diagram, ', function () {
})
it('should handle relation definitions no types', function () {
const str = 'classDiagram\n' +
'Class01 -- Class02'
'Class01 -- Class02'

parser.parse(str)

Expand All @@ -167,7 +168,7 @@ describe('class diagram, ', function () {
})
it('should handle relation definitions with type only on right side', function () {
const str = 'classDiagram\n' +
'Class01 --|> Class02'
'Class01 --|> Class02'

parser.parse(str)

Expand All @@ -182,11 +183,11 @@ describe('class diagram, ', function () {

it('should handle multiple classes and relation definitions', function () {
const str = 'classDiagram\n' +
'Class01 <|-- Class02\n' +
'Class03 *-- Class04\n' +
'Class05 o-- Class06\n' +
'Class07 .. Class08\n' +
'Class09 -- Class10'
'Class01 <|-- Class02\n' +
'Class03 *-- Class04\n' +
'Class05 o-- Class06\n' +
'Class07 .. Class08\n' +
'Class09 -- Class10'

parser.parse(str)

Expand Down
38 changes: 27 additions & 11 deletions src/diagrams/class/classRenderer.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -30,6 +30,18 @@ const getGraphId = function (label) {
return undefined
}

/**
* List of basic shapes used for paths
* @namespace
*/
const shapes = {
diamond: 'M 18,7 L9,13 L1,7 L9,1 Z',
thinArrowLeft: 'M 5,7 L9,13 L1,7 L9,1 Z',
thinArrowRight: 'M 18,7 L9,13 L14,7 L9,1 Z',
triangleLeft: 'M 1,7 L18,13 V 1 Z',
triangleRight: 'M 1,1 V 13 L18,7 Z'
}

/**
* Setup arrow head and define the marker. The result is appended to the svg.
*/
Expand All @@ -43,80 +55,84 @@ const insertMarkers = function (elem) {
.attr('markerHeight', 240)
.attr('orient', 'auto')
.append('path')
.attr('d', 'M 1,7 L18,13 V 1 Z')
.attr('d', shapes.triangleLeft)

elem.append('defs').append('marker')
.attr('id', 'extensionEnd')
.attr('class', 'extension')
.attr('refX', 19)
.attr('refY', 7)
.attr('markerWidth', 20)
.attr('markerHeight', 28)
.attr('orient', 'auto')
.append('path')
.attr('d', 'M 1,1 V 13 L18,7 Z') // this is actual shape for arrowhead
.attr('d', shapes.triangleRight) // this is actual shape for arrowhead

elem.append('defs').append('marker')
.attr('id', 'compositionStart')
.attr('class', 'extension')
.attr('class', 'composition')
.attr('refX', 0)
.attr('refY', 7)
.attr('markerWidth', 190)
.attr('markerHeight', 240)
.attr('orient', 'auto')
.append('path')
.attr('d', 'M 18,7 L9,13 L1,7 L9,1 Z')
.attr('d', shapes.diamond)

elem.append('defs').append('marker')
.attr('id', 'compositionEnd')
.attr('class', 'composition')
.attr('refX', 19)
.attr('refY', 7)
.attr('markerWidth', 20)
.attr('markerHeight', 28)
.attr('orient', 'auto')
.append('path')
.attr('d', 'M 18,7 L9,13 L1,7 L9,1 Z')
.attr('d', shapes.diamond)

elem.append('defs').append('marker')
.attr('id', 'aggregationStart')
.attr('class', 'extension')
.attr('class', 'aggregation')
.attr('refX', 0)
.attr('refY', 7)
.attr('markerWidth', 190)
.attr('markerHeight', 240)
.attr('orient', 'auto')
.append('path')
.attr('d', 'M 18,7 L9,13 L1,7 L9,1 Z')
.attr('d', shapes.diamond)

elem.append('defs').append('marker')
.attr('id', 'aggregationEnd')
.attr('class', 'aggregation')
.attr('refX', 19)
.attr('refY', 7)
.attr('markerWidth', 20)
.attr('markerHeight', 28)
.attr('orient', 'auto')
.append('path')
.attr('d', 'M 18,7 L9,13 L1,7 L9,1 Z')
.attr('d', shapes.diamond)

elem.append('defs').append('marker')
.attr('id', 'dependencyStart')
.attr('class', 'extension')
.attr('class', 'dependency')
.attr('refX', 0)
.attr('refY', 7)
.attr('markerWidth', 190)
.attr('markerHeight', 240)
.attr('orient', 'auto')
.append('path')
.attr('d', 'M 5,7 L9,13 L1,7 L9,1 Z')
.attr('d', shapes.thinArrowLeft)

elem.append('defs').append('marker')
.attr('id', 'dependencyEnd')
.attr('class', 'dependency')
.attr('refX', 19)
.attr('refY', 7)
.attr('markerWidth', 20)
.attr('markerHeight', 28)
.attr('orient', 'auto')
.append('path')
.attr('d', 'M 18,7 L9,13 L14,7 L9,1 Z')
.attr('d', shapes.thinArrowRight)
}

let edgeCount = 0
Expand Down
8 changes: 0 additions & 8 deletions src/mermaidAPI.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -374,14 +374,6 @@ const render = function (id, txt, cb, container) {
style1.innerHTML = scope(style, `#${id}`)
svg.insertBefore(style1, firstChild)

const style2 = document.createElement('style')
const cs = window.getComputedStyle(svg)
style2.innerHTML = `#${id} {
color: ${cs.color};
font: ${cs.font};
}`
svg.insertBefore(style2, firstChild)

switch (graphType) {
case 'git':
config.flowchart.arrowMarkerAbsolute = config.arrowMarkerAbsolute
Expand Down