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/1871 line color spill #3546

Closed
wants to merge 52 commits into from
Closed

Fix/1871 line color spill #3546

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
52 commits
Select commit Hold shift + click to select a range
449fd3d
add test demo page
dwhelan Sep 15, 2022
d3903f5
add theme name to marker ids
dwhelan Sep 16, 2022
6f53c60
use viewport id to make markers unique on the page
dwhelan Sep 17, 2022
0fe8ec3
cleanup demo files
dwhelan Sep 17, 2022
3ff22b0
examples of theme variables for #1871
dwhelan Sep 17, 2022
4fed445
add demo pages for each diagram (test 1871)
dwhelan Sep 19, 2022
5e418c8
get marker ids working
dwhelan Sep 19, 2022
15280be
add all class markers to demo
dwhelan Sep 19, 2022
100be18
cleanup
dwhelan Sep 20, 2022
58a838d
move svgNode() to utils.ts
dwhelan Sep 20, 2022
e9cd3a4
fix marker styling on journey diagram
dwhelan Sep 20, 2022
10189fe
fix marker styling on journey diagram
dwhelan Sep 20, 2022
51bbac0
extracted appendMarker()
dwhelan Sep 20, 2022
7083367
Merge branch 'develop' into fix/1871_lineColor_spill
dwhelan Sep 20, 2022
1ff3876
extract markers.ts
dwhelan Sep 20, 2022
cc094cb
fix typescript issues
dwhelan Sep 20, 2022
72b88e4
use insertMarkers()
dwhelan Sep 20, 2022
10c4f39
Merge branch 'develop' into fix/1871_lineColor_spill
dwhelan Sep 20, 2022
d98b010
update diagrams to use new markers
dwhelan Sep 20, 2022
f5caccd
clean up demos
dwhelan Sep 20, 2022
e0312a2
clean up demos
dwhelan Sep 20, 2022
676a40e
fix markers on state diagrams
dwhelan Sep 20, 2022
afe8d43
fix markers on state diagrams
dwhelan Sep 20, 2022
fc99086
start marker unit tests
dwhelan Sep 20, 2022
cccfd9f
extract absoluteUrl
dwhelan Sep 21, 2022
7829ee7
use setSiteConfig
dwhelan Sep 21, 2022
8bf17ea
extract isAbsoluteUrl
dwhelan Sep 21, 2022
8eafcf9
cleanup
dwhelan Sep 21, 2022
291c994
get dom tests working!
dwhelan Sep 22, 2022
3d338ed
cleanup
dwhelan Sep 22, 2022
4f247b6
cleanup
dwhelan Sep 22, 2022
d394219
add scripts to toggle ESM module loading
dwhelan Sep 22, 2022
c25ab18
test appendMarker() via DOM
dwhelan Sep 23, 2022
8fe71df
cleanup
dwhelan Sep 23, 2022
2e86bd3
cleanup
dwhelan Sep 23, 2022
f94e481
finish testing appendMarker()
dwhelan Sep 23, 2022
b928b49
remove old url logic
dwhelan Sep 23, 2022
9f80526
test git
dwhelan Sep 23, 2022
0e57754
cleanup
dwhelan Sep 23, 2022
c3a859c
Merge branch 'develop' into fix/1871_lineColor_spill
dwhelan Sep 27, 2022
14f8615
mock d3 element select()
dwhelan Sep 27, 2022
0087d0d
use actual d3 for market tests
dwhelan Sep 28, 2022
3658189
fix sequence diagram tests
dwhelan Sep 28, 2022
19d4289
remove d3 mock
dwhelan Sep 28, 2022
ac78775
remove d3 mock
dwhelan Sep 28, 2022
7deb26e
remove d3 mock
dwhelan Sep 28, 2022
1c346f3
enable unit test access to the dom
dwhelan Oct 1, 2022
79a4cff
Merge branch 'develop' into fix/1871_lineColor_spill
dwhelan Oct 1, 2022
7d14073
remove mermaidAPI mock
dwhelan Oct 2, 2022
a3e9d04
add demo for #1732
dwhelan Oct 3, 2022
bef55d0
reduce ts warnings
dwhelan Oct 3, 2022
924d265
reduce ts warnings
dwhelan Oct 3, 2022
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
67 changes: 0 additions & 67 deletions __mocks__/d3.ts
View file
Open in desktop

This file was deleted.

3 changes: 0 additions & 3 deletions __mocks__/dagre-d3.ts
View file
Open in desktop

This file was deleted.

3 changes: 0 additions & 3 deletions __mocks__/entity-decode/browser.ts
View file
Open in desktop

This file was deleted.

26 changes: 26 additions & 0 deletions demos/1871-1732.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,26 @@
<html>
<head>
<title>Issue #1732</title>
<link rel="icon" type="image/png" href="data:image/png;base64,iVBORw0KGgo=" />
</head>

<body>
<h2>graph</h2>
<pre class="mermaid">
graph LR
A>Test];
A <--> B;

C[Test];
C <--> D;
</pre>

<script src="./mermaid.js"></script>
<!-- <script src="//cdn.jsdelivr.net/npm/mermaid/dist/mermaid.js"></script> -->
<script>
mermaid.initialize({
logLevel: 1,
});
</script>
</body>
</html>
28 changes: 28 additions & 0 deletions demos/1871-c4.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,28 @@
<html>
<head>
<title>C4</title>
<link rel="icon" type="image/png" href="data:image/png;base64,iVBORw0KGgo=" />
</head>

<body>
<svg id="first">
<circle id="circle" stroke="black" cx="20" cy="20" r="10"></circle>
</svg>

<h2>C4 Diagrams</h2>
Regression should be same as dist
<pre class="mermaid">
%%{init:{"theme":"base", "themeVariables": {"personBorder":"red"}}}%%
C4Context
Person(A, "A", "")
System(B, "B", "")
Rel(A, B, "Uses")
</pre>

<script src="./mermaid.js"></script>
<!-- <script src="//cdn.jsdelivr.net/npm/mermaid@9.1.6/dist/mermaid.js"></script> -->
<script>
mermaid.initialize({ logLevel: 1 });
</script>
</body>
</html>
30 changes: 30 additions & 0 deletions demos/1871-class-v2.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,30 @@
<html>
<head>
<title>classDiagram-v2</title>
<link rel="icon" type="image/png" href="data:image/png;base64,iVBORw0KGgo=" />
</head>

<body>
<h2>classDiagram-v2</h2>
<pre class="mermaid">
%%{init:{"theme":"base", "themeVariables": {"lineColor":"red"}}}%%
classDiagram-v2
Animal <|-- Duck
</pre
>

Marker should be blue:
<pre class="mermaid">
%%{init:{"theme":"base", "themeVariables": {"lineColor":"blue"}}}%%
classDiagram-v2
Animal <|-- Duck
</pre
>

<script src="./mermaid.js"></script>
<!-- <script src="//cdn.jsdelivr.net/npm/mermaid@9.1.6/dist/mermaid.js"></script> -->
<script>
mermaid.initialize({ logLevel: 1 });
</script>
</body>
</html>
34 changes: 34 additions & 0 deletions demos/1871-class.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,34 @@
<html>
<head>
<title>classDiagram</title>
<link rel="icon" type="image/png" href="data:image/png;base64,iVBORw0KGgo=" />
</head>

<body>
<h2>classDiagram</h2>
<pre class="mermaid">
%%{init:{"theme":"base", "themeVariables": {"lineColor":"red"}}}%%
classDiagram
A <|--|> B
C <--> D
E *--* F
G o--o H
</pre>
Marker should be blue:

<pre class="mermaid">
%%{init:{"theme":"base", "themeVariables": {"lineColor":"blue"}}}%%
classDiagram
A <|--|> B
C <--> D
E *--* F
G o--o H
</pre>

<script src="./mermaid.js"></script>
<!-- <script src="//cdn.jsdelivr.net/npm/mermaid@9.1.6/dist/mermaid.js"></script> -->
<script>
mermaid.initialize({ logLevel: 1 });
</script>
</body>
</html>
21 changes: 21 additions & 0 deletions demos/1871-er.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,21 @@
<!DOCTYPE html>
<html>
<head>
<title>erDiagram</title>
<link rel="icon" type="image/png" href="data:image/png;base64,iVBORw0KGgo=" />
</head>

<body>
Regression should be same as dist
<pre class="mermaid">
%%{init:{"theme":"base"}}%%
erDiagram
A ||--o{ B : label
</pre>

<script src="./mermaid.js"></script>
<script>
mermaid.initialize({ logLevel: 0 });
</script>
</body>
</html>
27 changes: 27 additions & 0 deletions demos/1871-flowchart.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,27 @@
<html>
<head>
<title>flowchart</title>
<link rel="icon" type="image/png" href="data:image/png;base64,iVBORw0KGgo=" />
</head>

<body>
<h2>flowchart</h2>
<pre class="mermaid">
%%{init:{"theme":"base", "themeVariables": {"lineColor":"red"}}}%%
flowchart LR
A <--> B x--x C o--o D
</pre>
Markers should be blue:
<pre class="mermaid">
%%{init:{"theme":"base", "themeVariables": {"lineColor":"blue"}}}%%
flowchart LR
A <--> B x--x C o--o D
</pre>

<script src="./mermaid.js"></script>
<!-- <script src="//cdn.jsdelivr.net/npm/mermaid@9.1.6/dist/mermaid.js"></script> -->
<script>
mermaid.initialize({ logLevel: 1 });
</script>
</body>
</html>
29 changes: 29 additions & 0 deletions demos/1871-gantt.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,29 @@
<html>
<head>
<title>gantt</title>
<link rel="icon" type="image/png" href="data:image/png;base64,iVBORw0KGgo=" />
</head>

<body>
<h2>gantt</h2>
Regression should be same as dist
<pre class="mermaid">
%%{init:{"theme":"base", "themeVariables": {"lineColor":"red"}}}%%
gantt
title A Gantt Diagram
dateFormat YYYY-MM-DD
section Section
A task :a1, 2014-01-01, 30d
Another task :after a1 , 20d
section Another
Task in sec :2014-01-12 , 12d
another task : 24d >
</pre>

<script src="./mermaid.js"></script>
<!-- <script src="//cdn.jsdelivr.net/npm/mermaid@9.1.6/dist/mermaid.js"></script> -->
<script>
mermaid.initialize({ logLevel: 1 });
</script>
</body>
</html>
25 changes: 25 additions & 0 deletions demos/1871-git.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,25 @@
<html>
<head>
<title>git</title>
<link rel="icon" type="image/png" href="data:image/png;base64,iVBORw0KGgo=" />
</head>

<body>
<h2>git</h2>
<pre class="mermaid">
%% {init:{"theme":"base", "themeVariables": {"lineColor":"red"}}}%%
gitGraph
commit
branch A
checkout A
commit
</pre
>

<script src="./mermaid.js"></script>
<!-- <script src="//cdn.jsdelivr.net/npm/mermaid@9.1.6/dist/mermaid.js"></script> -->
<script>
mermaid.initialize({ logLevel: 1 });
</script>
</body>
</html>
37 changes: 37 additions & 0 deletions demos/1871-graph.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,37 @@
<html>
<head>
<title>graph</title>
<link rel="icon" type="image/png" href="data:image/png;base64,iVBORw0KGgo=" />
</head>

<body>
<h2>graph</h2>
<pre class="mermaid">
graph LR
A>Test];
A <--> B;

C[Test];
C <--> D;
</pre>
<pre class="mermaid">
%%{init:{"theme":"base", "themeVariables": {"lineColor":"red"}}}%%
graph LR
A <--> B x--x C o--o D
</pre>
Markers should be blue:
<pre class="mermaid">
%%{init:{"theme":"base", "themeVariables": {"lineColor":"blue"}}}%%
graph LR
A <--> B x--x C o--o D
</pre>

<script src="./mermaid.js"></script>
<!-- <script src="//cdn.jsdelivr.net/npm/mermaid/dist/mermaid.js"></script> -->
<script>
mermaid.initialize({
logLevel: 1,
});
</script>
</body>
</html>
36 changes: 36 additions & 0 deletions demos/1871-journey.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,36 @@
<!DOCTYPE html>
<html>
<head>
<title>journey</title>
<link rel="icon" type="image/png" href="data:image/png;base64,iVBORw0KGgo=" />
</head>

<body>
<pre class="mermaid">
%%{init:{"theme":"base", "themeVariables": {"textColor":"red"}}}%%
journey
A: B
</pre>

Marker should be blue:
<pre class="mermaid">
%%{init:{"theme":"base", "themeVariables": {"textColor":"blue"}}}%%
journey
A: B
</pre>

<script src="./mermaid.js"></script>
<!-- <script src="//cdn.jsdelivr.net/npm/mermaid/dist/mermaid.js"></script> -->

<script>
mermaid.initialize({
// theme: 'forest',
logLevel: 3,
// securityLevel: 'loose',
// flowchart: { curve: 'basis' },
// gantt: { axisFormat: '%m/%d/%Y' },
// sequence: { actorMargin: 50 },
});
</script>
</body>
</html>
Loading