Compare commits
5 Commits
7ecb772c6c
...
f5fefc0499
Author | SHA1 | Date |
---|---|---|
Knut Sveidqvist | f5fefc0499 | |
Knut Sveidqvist | ab077992f5 | |
Ashish Jain | 2f80c3a2c4 | |
Knut Sveidqvist | 4c0b8f6f40 | |
Knut Sveidqvist | ce6f2739b5 |
|
@ -9,6 +9,7 @@ elems
|
||||||
gantt
|
gantt
|
||||||
gitgraph
|
gitgraph
|
||||||
gzipped
|
gzipped
|
||||||
|
handdrawn
|
||||||
knsv
|
knsv
|
||||||
Knut
|
Knut
|
||||||
marginx
|
marginx
|
||||||
|
|
|
@ -1 +1,2 @@
|
||||||
|
handdrawnSeed
|
||||||
newbranch
|
newbranch
|
||||||
|
|
|
@ -32,7 +32,7 @@
|
||||||
<style>
|
<style>
|
||||||
body {
|
body {
|
||||||
/* background: rgb(221, 208, 208); */
|
/* background: rgb(221, 208, 208); */
|
||||||
/* background:#333; */
|
background: #333;
|
||||||
font-family: 'Arial';
|
font-family: 'Arial';
|
||||||
/* font-size: 18px !important; */
|
/* font-size: 18px !important; */
|
||||||
}
|
}
|
||||||
|
@ -45,12 +45,14 @@
|
||||||
.mermaid svg {
|
.mermaid svg {
|
||||||
/* font-size: 18px !important; */
|
/* font-size: 18px !important; */
|
||||||
|
|
||||||
background-color: #efefef;
|
/* background-color: #efefef;
|
||||||
background-image: radial-gradient(#fff 51%, transparent 91%),
|
background-image: radial-gradient(#fff 51%, transparent 91%),
|
||||||
radial-gradient(#fff 51%, transparent 91%);
|
radial-gradient(#fff 51%, transparent 91%);
|
||||||
background-size: 20px 20px;
|
background-size: 20px 20px;
|
||||||
background-position: 0 0, 10px 10px;
|
background-position:
|
||||||
background-repeat: repeat;
|
0 0,
|
||||||
|
10px 10px;
|
||||||
|
background-repeat: repeat; */
|
||||||
}
|
}
|
||||||
.malware {
|
.malware {
|
||||||
position: fixed;
|
position: fixed;
|
||||||
|
@ -107,19 +109,28 @@ stateDiagram-v2
|
||||||
</pre
|
</pre
|
||||||
>
|
>
|
||||||
<pre id="diagram" class="mermaid">
|
<pre id="diagram" class="mermaid">
|
||||||
stateDiagram-v2
|
stateDiagram-v2
|
||||||
state ProActive {
|
TN1: The state with a note
|
||||||
state Active {
|
note right of TN1
|
||||||
Chimp --> A:One
|
Important information! You can write
|
||||||
Chimp --> B:Two
|
notes.
|
||||||
Chimp --> C:Three
|
end note
|
||||||
state InActive {
|
TN1 --> TN2
|
||||||
D
|
note left of TN2 : This is the note to the left.
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</pre
|
</pre
|
||||||
>
|
>
|
||||||
|
<pre id="diagram" class="mermaid">
|
||||||
|
%%{init: {"look": "classic"} }%%
|
||||||
|
stateDiagram-v2
|
||||||
|
TN3: The state with a note
|
||||||
|
note right of TN3
|
||||||
|
Important information! You can write
|
||||||
|
notes.
|
||||||
|
end note
|
||||||
|
TN3 --> TN4
|
||||||
|
note left of TN4 : This is the note to the left.
|
||||||
|
</pre
|
||||||
|
>
|
||||||
<pre id="diagram" class="mermaid2">
|
<pre id="diagram" class="mermaid2">
|
||||||
block-beta
|
block-beta
|
||||||
A["square"]
|
A["square"]
|
||||||
|
@ -511,7 +522,9 @@ mindmap
|
||||||
// useMaxWidth: false,
|
// useMaxWidth: false,
|
||||||
// });
|
// });
|
||||||
mermaid.initialize({
|
mermaid.initialize({
|
||||||
handdrawn: true,
|
theme: 'dark',
|
||||||
|
handdrawnSeed: 12,
|
||||||
|
look: 'handdrawn',
|
||||||
// layout: 'dagre',
|
// layout: 'dagre',
|
||||||
layout: 'elk',
|
layout: 'elk',
|
||||||
flowchart: { titleTopMargin: 10 },
|
flowchart: { titleTopMargin: 10 },
|
||||||
|
|
|
@ -114,7 +114,7 @@ stateDiagram-v2
|
||||||
</td>
|
</td>
|
||||||
<td>
|
<td>
|
||||||
<pre id="diagram2" class="mermaid">
|
<pre id="diagram2" class="mermaid">
|
||||||
%%{init: {"handdrawn": true} }%%
|
%%{init: {"look": "handdrawn"} }%%
|
||||||
stateDiagram-v2
|
stateDiagram-v2
|
||||||
stateId
|
stateId
|
||||||
|
|
||||||
|
@ -130,7 +130,7 @@ stateDiagram-v2
|
||||||
</td>
|
</td>
|
||||||
<td>
|
<td>
|
||||||
<pre id="diagram4" class="mermaid">
|
<pre id="diagram4" class="mermaid">
|
||||||
%%{init: {"handdrawn": true, "layout": "elk"} }%%
|
%%{init: {"look": "handdrawn", "layout": "elk"} }%%
|
||||||
stateDiagram-v2
|
stateDiagram-v2
|
||||||
stateId
|
stateId
|
||||||
|
|
||||||
|
@ -161,7 +161,7 @@ stateDiagram-v2
|
||||||
</td>
|
</td>
|
||||||
<td>
|
<td>
|
||||||
<pre id="diagram2" class="mermaid">
|
<pre id="diagram2" class="mermaid">
|
||||||
%%{init: {"handdrawn": true} }%%
|
%%{init: {"look": "handdrawn"} }%%
|
||||||
stateDiagram-v2
|
stateDiagram-v2
|
||||||
state "This is a state description" as s3
|
state "This is a state description" as s3
|
||||||
</pre>
|
</pre>
|
||||||
|
@ -175,7 +175,7 @@ stateDiagram-v2
|
||||||
</td>
|
</td>
|
||||||
<td>
|
<td>
|
||||||
<pre id="diagram4" class="mermaid">
|
<pre id="diagram4" class="mermaid">
|
||||||
%%{init: {"handdrawn": true, "layout": "elk"} }%%
|
%%{init: {"look": "handdrawn", "layout": "elk"} }%%
|
||||||
stateDiagram-v2
|
stateDiagram-v2
|
||||||
state "This is a state description" as s5
|
state "This is a state description" as s5
|
||||||
</pre>
|
</pre>
|
||||||
|
@ -205,7 +205,7 @@ stateDiagram-v2
|
||||||
</td>
|
</td>
|
||||||
<td>
|
<td>
|
||||||
<pre id="diagram2" class="mermaid">
|
<pre id="diagram2" class="mermaid">
|
||||||
%%{init: {"handdrawn": true} }%%
|
%%{init: {"look": "handdrawn"} }%%
|
||||||
stateDiagram-v2
|
stateDiagram-v2
|
||||||
s22 : This is a state description
|
s22 : This is a state description
|
||||||
|
|
||||||
|
@ -221,7 +221,7 @@ stateDiagram-v2
|
||||||
</td>
|
</td>
|
||||||
<td>
|
<td>
|
||||||
<pre id="diagram4" class="mermaid">
|
<pre id="diagram4" class="mermaid">
|
||||||
%%{init: {"handdrawn": true, "layout": "elk"} }%%
|
%%{init: {"look": "handdrawn", "layout": "elk"} }%%
|
||||||
stateDiagram-v2
|
stateDiagram-v2
|
||||||
s24 : This is a state description
|
s24 : This is a state description
|
||||||
|
|
||||||
|
@ -257,7 +257,7 @@ stateDiagram-v2
|
||||||
</td>
|
</td>
|
||||||
<td>
|
<td>
|
||||||
<pre id="diagram2" class="mermaid">
|
<pre id="diagram2" class="mermaid">
|
||||||
%%{init: {"handdrawn": true} }%%
|
%%{init: {"look": "handdrawn"} }%%
|
||||||
|
|
||||||
stateDiagram-v2
|
stateDiagram-v2
|
||||||
s41 --> s42
|
s41 --> s42
|
||||||
|
@ -276,7 +276,7 @@ stateDiagram-v2
|
||||||
</td>
|
</td>
|
||||||
<td>
|
<td>
|
||||||
<pre id="diagram4" class="mermaid">
|
<pre id="diagram4" class="mermaid">
|
||||||
%%{init: {"handdrawn": true, "layout": "elk"} }%%
|
%%{init: {"look": "handdrawn", "layout": "elk"} }%%
|
||||||
stateDiagram-v2
|
stateDiagram-v2
|
||||||
s61 --> s62
|
s61 --> s62
|
||||||
|
|
||||||
|
@ -315,7 +315,7 @@ stateDiagram-v2
|
||||||
</td>
|
</td>
|
||||||
<td>
|
<td>
|
||||||
<pre id="diagram2" class="mermaid">
|
<pre id="diagram2" class="mermaid">
|
||||||
%%{init: {"handdrawn": true} }%%
|
%%{init: {"look": "handdrawn"} }%%
|
||||||
|
|
||||||
stateDiagram-v2
|
stateDiagram-v2
|
||||||
a3 --> a4: A transition
|
a3 --> a4: A transition
|
||||||
|
@ -334,7 +334,7 @@ stateDiagram-v2
|
||||||
</td>
|
</td>
|
||||||
<td>
|
<td>
|
||||||
<pre id="diagram4" class="mermaid">
|
<pre id="diagram4" class="mermaid">
|
||||||
%%{init: {"handdrawn": true, "layout": "elk"} }%%
|
%%{init: {"look": "handdrawn", "layout": "elk"} }%%
|
||||||
stateDiagram-v2
|
stateDiagram-v2
|
||||||
a7 --> a8: A transition
|
a7 --> a8: A transition
|
||||||
|
|
||||||
|
@ -375,7 +375,7 @@ stateDiagram-v2
|
||||||
</td>
|
</td>
|
||||||
<td>
|
<td>
|
||||||
<pre id="diagram2" class="mermaid">
|
<pre id="diagram2" class="mermaid">
|
||||||
%%{init: {"handdrawn": true} }%%
|
%%{init: {"look": "handdrawn"} }%%
|
||||||
|
|
||||||
stateDiagram-v2
|
stateDiagram-v2
|
||||||
[*] --> test
|
[*] --> test
|
||||||
|
@ -396,7 +396,7 @@ stateDiagram-v2
|
||||||
</td>
|
</td>
|
||||||
<td>
|
<td>
|
||||||
<pre id="diagram4" class="mermaid">
|
<pre id="diagram4" class="mermaid">
|
||||||
%%{init: {"handdrawn": true, "layout": "elk"} }%%
|
%%{init: {"look": "handdrawn", "layout": "elk"} }%%
|
||||||
stateDiagram-v2
|
stateDiagram-v2
|
||||||
[*] --> test
|
[*] --> test
|
||||||
test --> [*]
|
test --> [*]
|
||||||
|
@ -444,7 +444,7 @@ stateDiagram-v2
|
||||||
</td>
|
</td>
|
||||||
<td>
|
<td>
|
||||||
<pre id="diagram2" class="mermaid">
|
<pre id="diagram2" class="mermaid">
|
||||||
%%{init: {"handdrawn": true} }%%
|
%%{init: {"look": "handdrawn"} }%%
|
||||||
|
|
||||||
stateDiagram-v2
|
stateDiagram-v2
|
||||||
[*] --> First
|
[*] --> First
|
||||||
|
@ -471,7 +471,7 @@ stateDiagram-v2
|
||||||
</td>
|
</td>
|
||||||
<td>
|
<td>
|
||||||
<pre id="diagram4" class="mermaid">
|
<pre id="diagram4" class="mermaid">
|
||||||
%%{init: {"handdrawn": true, "layout": "elk"} }%%
|
%%{init: {"look": "handdrawn", "layout": "elk"} }%%
|
||||||
stateDiagram-v2
|
stateDiagram-v2
|
||||||
[*] --> First
|
[*] --> First
|
||||||
state First {
|
state First {
|
||||||
|
@ -540,13 +540,13 @@ stateDiagram-v2
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
</pre>
|
</pre>
|
||||||
</td>
|
</td>
|
||||||
<td>
|
<td>
|
||||||
<pre id="diagram2" class="mermaid">
|
<pre id="diagram2" class="mermaid">
|
||||||
%%{init: {"handdrawn": true} }%%
|
%%{init: {"look": "handdrawn"} }%%
|
||||||
|
|
||||||
stateDiagram-v2
|
stateDiagram-v2
|
||||||
[*] --> Level1
|
[*] --> Level1
|
||||||
|
@ -564,7 +564,7 @@ stateDiagram-v2
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
</pre>
|
</pre>
|
||||||
|
@ -588,13 +588,13 @@ stateDiagram-v2
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
</pre>
|
</pre>
|
||||||
</td>
|
</td>
|
||||||
<td>
|
<td>
|
||||||
<pre id="diagram4" class="mermaid">
|
<pre id="diagram4" class="mermaid">
|
||||||
%%{init: {"handdrawn": true, "layout": "elk"} }%%
|
%%{init: {"look": "handdrawn", "layout": "elk"} }%%
|
||||||
stateDiagram-v2
|
stateDiagram-v2
|
||||||
[*] --> Level1
|
[*] --> Level1
|
||||||
|
|
||||||
|
@ -611,7 +611,7 @@ stateDiagram-v2
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
</pre>
|
</pre>
|
||||||
</td>
|
</td>
|
||||||
</tr>
|
</tr>
|
||||||
|
@ -675,7 +675,7 @@ stateDiagram-v2
|
||||||
</td>
|
</td>
|
||||||
<td>
|
<td>
|
||||||
<pre id="diagram2" class="mermaid">
|
<pre id="diagram2" class="mermaid">
|
||||||
%%{init: {"handdrawn": true} }%%
|
%%{init: {"look": "handdrawn"} }%%
|
||||||
|
|
||||||
stateDiagram-v2
|
stateDiagram-v2
|
||||||
[*] --> B1
|
[*] --> B1
|
||||||
|
@ -721,7 +721,7 @@ stateDiagram-v2
|
||||||
</td>
|
</td>
|
||||||
<td>
|
<td>
|
||||||
<pre id="diagram4" class="mermaid">
|
<pre id="diagram4" class="mermaid">
|
||||||
%%{init: {"handdrawn": true, "layout": "elk"} }%%
|
%%{init: {"look": "handdrawn", "layout": "elk"} }%%
|
||||||
stateDiagram-v2
|
stateDiagram-v2
|
||||||
[*] --> B1
|
[*] --> B1
|
||||||
B1 --> B2
|
B1 --> B2
|
||||||
|
@ -783,7 +783,7 @@ stateDiagram-v2
|
||||||
</td>
|
</td>
|
||||||
<td>
|
<td>
|
||||||
<pre id="diagram2" class="mermaid">
|
<pre id="diagram2" class="mermaid">
|
||||||
%%{init: {"handdrawn": true} }%%
|
%%{init: {"look": "handdrawn"} }%%
|
||||||
|
|
||||||
stateDiagram-v2
|
stateDiagram-v2
|
||||||
state if_state <<choice>>
|
state if_state <<choice>>
|
||||||
|
@ -806,7 +806,7 @@ stateDiagram-v2
|
||||||
</td>
|
</td>
|
||||||
<td>
|
<td>
|
||||||
<pre id="diagram4" class="mermaid">
|
<pre id="diagram4" class="mermaid">
|
||||||
%%{init: {"handdrawn": true, "layout": "elk"} }%%
|
%%{init: {"look": "handdrawn", "layout": "elk"} }%%
|
||||||
stateDiagram-v2
|
stateDiagram-v2
|
||||||
state if_state <<choice>>
|
state if_state <<choice>>
|
||||||
[*] --> IsPositive
|
[*] --> IsPositive
|
||||||
|
@ -864,7 +864,7 @@ stateDiagram-v2
|
||||||
</td>
|
</td>
|
||||||
<td>
|
<td>
|
||||||
<pre id="diagram2" class="mermaid">
|
<pre id="diagram2" class="mermaid">
|
||||||
%%{init: {"handdrawn": true} }%%
|
%%{init: {"look": "handdrawn"} }%%
|
||||||
stateDiagram-v2
|
stateDiagram-v2
|
||||||
state fork_state <<fork>>
|
state fork_state <<fork>>
|
||||||
[*] --> fork_state
|
[*] --> fork_state
|
||||||
|
@ -898,7 +898,7 @@ stateDiagram-v2
|
||||||
</td>
|
</td>
|
||||||
<td>
|
<td>
|
||||||
<pre id="diagram4" class="mermaid">
|
<pre id="diagram4" class="mermaid">
|
||||||
%%{init: {"handdrawn": true, "layout": "elk"} }%%
|
%%{init: {"look": "handdrawn", "layout": "elk"} }%%
|
||||||
stateDiagram-v2
|
stateDiagram-v2
|
||||||
state fork_state <<fork>>
|
state fork_state <<fork>>
|
||||||
[*] --> fork_state
|
[*] --> fork_state
|
||||||
|
@ -954,7 +954,7 @@ stateDiagram-v2
|
||||||
</td>
|
</td>
|
||||||
<td>
|
<td>
|
||||||
<pre id="diagram2" class="mermaid">
|
<pre id="diagram2" class="mermaid">
|
||||||
%%{init: {"handdrawn": true} }%%
|
%%{init: {"look": "handdrawn"} }%%
|
||||||
stateDiagram-v2
|
stateDiagram-v2
|
||||||
TN3: The state with a note
|
TN3: The state with a note
|
||||||
note right of TN3
|
note right of TN3
|
||||||
|
@ -981,7 +981,7 @@ stateDiagram-v2
|
||||||
</td>
|
</td>
|
||||||
<td>
|
<td>
|
||||||
<pre id="diagram4" class="mermaid">
|
<pre id="diagram4" class="mermaid">
|
||||||
%%{init: {"handdrawn": true, "layout": "elk"} }%%
|
%%{init: {"look": "handdrawn", "layout": "elk"} }%%
|
||||||
stateDiagram-v2
|
stateDiagram-v2
|
||||||
TN7: The state with a note
|
TN7: The state with a note
|
||||||
note right of TN7
|
note right of TN7
|
||||||
|
@ -1051,7 +1051,7 @@ state Active {
|
||||||
</td>
|
</td>
|
||||||
<td>
|
<td>
|
||||||
<pre id="diagram2" class="mermaid">
|
<pre id="diagram2" class="mermaid">
|
||||||
%%{init: {"handdrawn": true} }%%
|
%%{init: {"look": "handdrawn"} }%%
|
||||||
stateDiagram-v2
|
stateDiagram-v2
|
||||||
[*] --> Active
|
[*] --> Active
|
||||||
|
|
||||||
|
@ -1094,7 +1094,7 @@ state Active {
|
||||||
</td>
|
</td>
|
||||||
<td>
|
<td>
|
||||||
<pre id="diagram4" class="mermaid">
|
<pre id="diagram4" class="mermaid">
|
||||||
%%{init: {"handdrawn": true, "layout": "elk"} }%%
|
%%{init: {"look": "handdrawn", "layout": "elk"} }%%
|
||||||
stateDiagram-v2
|
stateDiagram-v2
|
||||||
[*] --> Active
|
[*] --> Active
|
||||||
|
|
||||||
|
@ -1158,7 +1158,7 @@ direction LR
|
||||||
</td>
|
</td>
|
||||||
<td>
|
<td>
|
||||||
<pre id="diagram2" class="mermaid">
|
<pre id="diagram2" class="mermaid">
|
||||||
%%{init: {"handdrawn": true} }%%
|
%%{init: {"look": "handdrawn"} }%%
|
||||||
stateDiagram-v2
|
stateDiagram-v2
|
||||||
direction LR
|
direction LR
|
||||||
[*] --> D1
|
[*] --> D1
|
||||||
|
@ -1188,7 +1188,7 @@ direction LR
|
||||||
</td>
|
</td>
|
||||||
<td>
|
<td>
|
||||||
<pre id="diagram4" class="mermaid">
|
<pre id="diagram4" class="mermaid">
|
||||||
%%{init: {"handdrawn": true, "layout": "elk"} }%%
|
%%{init: {"look": "handdrawn", "layout": "elk"} }%%
|
||||||
stateDiagram-v2
|
stateDiagram-v2
|
||||||
direction LR
|
direction LR
|
||||||
[*] --> D1
|
[*] --> D1
|
||||||
|
@ -1248,11 +1248,11 @@ direction LR
|
||||||
};
|
};
|
||||||
|
|
||||||
|
|
||||||
var coll = document.getElementsByClassName("collapsible");
|
let coll = document.getElementsByClassName("collapsible");
|
||||||
for (var i = 0; i < coll.length; i++) {
|
for (let i = 0; i < coll.length; i++) {
|
||||||
coll[i].addEventListener("click", function () {
|
coll[i].addEventListener("click", function () {
|
||||||
this.classList.toggle("active");
|
this.classList.toggle("active");
|
||||||
var content = this.nextElementSibling;
|
let content = this.nextElementSibling;
|
||||||
if (content.style.maxHeight) {
|
if (content.style.maxHeight) {
|
||||||
content.style.maxHeight = null;
|
content.style.maxHeight = null;
|
||||||
} else {
|
} else {
|
||||||
|
|
|
@ -686,6 +686,7 @@ const dataFetcher = (parent, parsedItem, diagramStates, nodes, edges, altFlag, u
|
||||||
domId: stateDomId(itemId, graphItemCount, NOTE),
|
domId: stateDomId(itemId, graphItemCount, NOTE),
|
||||||
type: newNode.type,
|
type: newNode.type,
|
||||||
padding: 15, //getConfig().flowchart.padding
|
padding: 15, //getConfig().flowchart.padding
|
||||||
|
useRough,
|
||||||
};
|
};
|
||||||
const groupData = {
|
const groupData = {
|
||||||
labelStyle: '',
|
labelStyle: '',
|
||||||
|
@ -697,6 +698,7 @@ const dataFetcher = (parent, parsedItem, diagramStates, nodes, edges, altFlag, u
|
||||||
domId: stateDomId(itemId, graphItemCount, PARENT),
|
domId: stateDomId(itemId, graphItemCount, PARENT),
|
||||||
type: 'group',
|
type: 'group',
|
||||||
padding: 0, //getConfig().flowchart.padding
|
padding: 0, //getConfig().flowchart.padding
|
||||||
|
useRough,
|
||||||
};
|
};
|
||||||
graphItemCount++;
|
graphItemCount++;
|
||||||
|
|
||||||
|
@ -850,7 +852,7 @@ export const getData = () => {
|
||||||
extract(getRootDocV2());
|
extract(getRootDocV2());
|
||||||
const diagramStates = getStates();
|
const diagramStates = getStates();
|
||||||
|
|
||||||
const useRough = getConfig().handdrawn;
|
const useRough = getConfig().look === 'handdrawn';
|
||||||
dataFetcher(undefined, getRootDocV2(), diagramStates, nodes, edges, true, useRough);
|
dataFetcher(undefined, getRootDocV2(), diagramStates, nodes, edges, true, useRough);
|
||||||
|
|
||||||
return { nodes, edges, other: {} };
|
return { nodes, edges, other: {} };
|
||||||
|
|
|
@ -1,17 +1,8 @@
|
||||||
import insertMarkers from '../../rendering-elements/markers.js';
|
import insertMarkers from '../../rendering-elements/markers.js';
|
||||||
import { findCommonAncestor } from './find-common-ancestor.js';
|
import { findCommonAncestor } from './find-common-ancestor.js';
|
||||||
import { getConfig } from '$root/diagram-api/diagramAPI.js';
|
import { getConfig } from '$root/diagram-api/diagramAPI.js';
|
||||||
import {
|
import { insertNode, clear as clearNodes } from '../../rendering-elements/nodes.js';
|
||||||
insertNode,
|
import { insertCluster, clear as clearClusters } from '../../rendering-elements/clusters.js';
|
||||||
positionNode,
|
|
||||||
clear as clearNodes,
|
|
||||||
setNodeElem,
|
|
||||||
} from '../../rendering-elements/nodes.js';
|
|
||||||
import {
|
|
||||||
insertCluster,
|
|
||||||
clear as clearClusters,
|
|
||||||
positionCluster,
|
|
||||||
} from '../../rendering-elements/clusters.js';
|
|
||||||
import {
|
import {
|
||||||
insertEdgeLabel,
|
insertEdgeLabel,
|
||||||
positionEdgeLabel,
|
positionEdgeLabel,
|
||||||
|
@ -116,14 +107,12 @@ const drawNodes = (relX, relY, nodeArray, svg, subgraphsEl, depth) => {
|
||||||
if (node.type === 'group') {
|
if (node.type === 'group') {
|
||||||
log.debug('Id abc88 subgraph = ', node.id, node.x, node.y, node.labelData);
|
log.debug('Id abc88 subgraph = ', node.id, node.x, node.y, node.labelData);
|
||||||
const subgraphEl = subgraphsEl.insert('g').attr('class', 'subgraph');
|
const subgraphEl = subgraphsEl.insert('g').attr('class', 'subgraph');
|
||||||
|
// TODO use faster way of cloning
|
||||||
const clusterNode = JSON.parse(JSON.stringify(node));
|
const clusterNode = JSON.parse(JSON.stringify(node));
|
||||||
clusterNode.x = node.offset.posX + node.width / 2;
|
clusterNode.x = node.offset.posX + node.width / 2;
|
||||||
clusterNode.y = node.offset.posY + node.height / 2;
|
clusterNode.y = node.offset.posY + node.height / 2;
|
||||||
// clusterNode.y = node.y + node.height / 2;
|
|
||||||
const cluster = insertCluster(subgraphEl, clusterNode);
|
const cluster = insertCluster(subgraphEl, clusterNode);
|
||||||
// const bbox = cluster.node().getBBox();
|
|
||||||
// node.x -= bbox.width / 2 - 2; // Magic number 2... why??? WHY???
|
|
||||||
// node.y -= bbox.height / 2;
|
|
||||||
log.info('Id (UGH)= ', node.shape, node.labels);
|
log.info('Id (UGH)= ', node.shape, node.labels);
|
||||||
} else {
|
} else {
|
||||||
log.info(
|
log.info(
|
||||||
|
@ -524,6 +513,7 @@ export const render = async (data4Layout, svg, element) => {
|
||||||
height: node?.labelData?.height || 100,
|
height: node?.labelData?.height || 100,
|
||||||
},
|
},
|
||||||
];
|
];
|
||||||
|
node['elk.direction'] = 'RIGHT';
|
||||||
delete node.x;
|
delete node.x;
|
||||||
delete node.y;
|
delete node.y;
|
||||||
delete node.width;
|
delete node.width;
|
||||||
|
@ -533,7 +523,7 @@ export const render = async (data4Layout, svg, element) => {
|
||||||
|
|
||||||
log.info('before layout', JSON.stringify(elkGraph, null, 2));
|
log.info('before layout', JSON.stringify(elkGraph, null, 2));
|
||||||
const g = await elk.layout(elkGraph);
|
const g = await elk.layout(elkGraph);
|
||||||
log.info('after layout DAGA', g);
|
log.info('after layout DAGA', JSON.stringify(g));
|
||||||
|
|
||||||
// debugger;
|
// debugger;
|
||||||
drawNodes(0, 0, g.children, svg, subGraphsEl, 0);
|
drawNodes(0, 0, g.children, svg, subGraphsEl, 0);
|
||||||
|
|
|
@ -102,6 +102,21 @@ const rect = (parent, node) => {
|
||||||
* @returns {any} ShapeSvg
|
* @returns {any} ShapeSvg
|
||||||
*/
|
*/
|
||||||
const noteGroup = (parent, node) => {
|
const noteGroup = (parent, node) => {
|
||||||
|
const { themeVariables } = getConfig();
|
||||||
|
const {
|
||||||
|
textColor,
|
||||||
|
clusterTextColor,
|
||||||
|
altBackground,
|
||||||
|
compositeBackground,
|
||||||
|
compositeTitleBackground,
|
||||||
|
compositeBorder,
|
||||||
|
noteBorderColor,
|
||||||
|
noteBkgColor,
|
||||||
|
nodeBorder,
|
||||||
|
mainBkg,
|
||||||
|
stateBorder,
|
||||||
|
} = themeVariables;
|
||||||
|
|
||||||
// Add outer g element
|
// Add outer g element
|
||||||
const shapeSvg = parent.insert('g').attr('class', 'note-cluster').attr('id', node.id);
|
const shapeSvg = parent.insert('g').attr('class', 'note-cluster').attr('id', node.id);
|
||||||
|
|
||||||
|
@ -134,6 +149,10 @@ const noteGroup = (parent, node) => {
|
||||||
const roundedWithTitle = (parent, node) => {
|
const roundedWithTitle = (parent, node) => {
|
||||||
const siteConfig = getConfig();
|
const siteConfig = getConfig();
|
||||||
|
|
||||||
|
const { themeVariables, handdrawnSeed } = siteConfig;
|
||||||
|
const { altBackground, compositeBackground, compositeTitleBackground, nodeBorder } =
|
||||||
|
themeVariables;
|
||||||
|
|
||||||
// Add outer g element
|
// Add outer g element
|
||||||
const shapeSvg = parent.insert('g').attr('class', node.classes).attr('id', node.id);
|
const shapeSvg = parent.insert('g').attr('class', node.classes).attr('id', node.id);
|
||||||
|
|
||||||
|
@ -178,28 +197,28 @@ const roundedWithTitle = (parent, node) => {
|
||||||
// add the rect
|
// add the rect
|
||||||
let rect;
|
let rect;
|
||||||
if (node.useRough) {
|
if (node.useRough) {
|
||||||
const isAlt = node.classes.indexOf('statediagram-cluster-alt') >= 0;
|
const isAlt = node.classes.includes('statediagram-cluster-alt');
|
||||||
console.log(
|
|
||||||
'DAGA node in roundedWithTitle',
|
|
||||||
node.classes,
|
|
||||||
node.classes.indexOf('statediagram-cluster-alt'),
|
|
||||||
isAlt
|
|
||||||
);
|
|
||||||
const rc = rough.svg(shapeSvg);
|
const rc = rough.svg(shapeSvg);
|
||||||
const roughOuterNode =
|
const roughOuterNode =
|
||||||
node.rx || node.ry
|
node.rx || node.ry
|
||||||
? rc.path(createRoundedRectPathD(x, y, width, height, 10), {
|
? rc.path(createRoundedRectPathD(x, y, width, height, 10), {
|
||||||
roughness: 0.7,
|
roughness: 0.7,
|
||||||
|
fill: compositeTitleBackground,
|
||||||
|
fillStyle: 'solid',
|
||||||
|
stroke: nodeBorder,
|
||||||
|
seed: handdrawnSeed,
|
||||||
})
|
})
|
||||||
: rc.rectangle(x, y, width, height);
|
: rc.rectangle(x, y, width, height, { seed: handdrawnSeed });
|
||||||
|
|
||||||
rect = shapeSvg.insert(() => roughOuterNode);
|
rect = shapeSvg.insert(() => roughOuterNode, ':first-child');
|
||||||
const roughInnerNode = rc.rectangle(x, innerY, width, innerHeight, {
|
const roughInnerNode = rc.rectangle(x, innerY, width, innerHeight, {
|
||||||
fill: isAlt ? 'lightgrey' : 'white',
|
fill: isAlt ? altBackground : compositeBackground,
|
||||||
fillStyle: isAlt ? 'hachure' : 'solid',
|
fillStyle: isAlt ? 'hachure' : 'solid',
|
||||||
|
stroke: nodeBorder,
|
||||||
|
seed: handdrawnSeed,
|
||||||
});
|
});
|
||||||
|
|
||||||
rect = shapeSvg.insert(() => roughOuterNode);
|
rect = shapeSvg.insert(() => roughOuterNode, ':first-child');
|
||||||
innerRect = shapeSvg.insert(() => roughInnerNode);
|
innerRect = shapeSvg.insert(() => roughInnerNode);
|
||||||
} else {
|
} else {
|
||||||
rect = outerRectG.insert('rect', ':first-child');
|
rect = outerRectG.insert('rect', ':first-child');
|
||||||
|
@ -242,6 +261,7 @@ const roundedWithTitle = (parent, node) => {
|
||||||
};
|
};
|
||||||
|
|
||||||
const divider = (parent, node) => {
|
const divider = (parent, node) => {
|
||||||
|
const { handdrawnSeed } = getConfig();
|
||||||
// Add outer g element
|
// Add outer g element
|
||||||
const shapeSvg = parent.insert('g').attr('class', node.classes).attr('id', node.id);
|
const shapeSvg = parent.insert('g').attr('class', node.classes).attr('id', node.id);
|
||||||
|
|
||||||
|
@ -261,6 +281,7 @@ const divider = (parent, node) => {
|
||||||
fill: 'lightgrey',
|
fill: 'lightgrey',
|
||||||
roughness: 0.5,
|
roughness: 0.5,
|
||||||
strokeLineDash: [5],
|
strokeLineDash: [5],
|
||||||
|
seed: handdrawnSeed,
|
||||||
});
|
});
|
||||||
|
|
||||||
rect = shapeSvg.insert(() => roughNode);
|
rect = shapeSvg.insert(() => roughNode);
|
||||||
|
|
|
@ -386,6 +386,7 @@ const calcOffset = function (src, dest, parentLookupDb) {
|
||||||
};
|
};
|
||||||
|
|
||||||
export const insertEdge = function (elem, edge, clusterDb, diagramType, graph, id) {
|
export const insertEdge = function (elem, edge, clusterDb, diagramType, graph, id) {
|
||||||
|
const { handdrawnSeed } = getConfig();
|
||||||
console.log('abc88 InsertEdge - edge: ', edge);
|
console.log('abc88 InsertEdge - edge: ', edge);
|
||||||
let points = edge.points;
|
let points = edge.points;
|
||||||
let pointsHasChanged = false;
|
let pointsHasChanged = false;
|
||||||
|
@ -478,17 +479,9 @@ export const insertEdge = function (elem, edge, clusterDb, diagramType, graph, i
|
||||||
|
|
||||||
if (useRough) {
|
if (useRough) {
|
||||||
const rc = rough.svg(elem);
|
const rc = rough.svg(elem);
|
||||||
const svgPathNode = rc.curve(pointArr, { roughness: 0.5, stroke: 'green' });
|
const svgPathNode = rc.curve(pointArr, { roughness: 0.5, seed: handdrawnSeed });
|
||||||
console.log('svgPathNode abc88', svgPathNode);
|
|
||||||
strokeClasses += ' transition';
|
strokeClasses += ' transition';
|
||||||
// const svgPath2 = elem
|
|
||||||
// .append('path')
|
|
||||||
// .attr('d', lineFunction(lineData))
|
|
||||||
// .attr('id', edge.id)
|
|
||||||
// .attr('class', ' ' + strokeClasses + (edge.classes ? ' ' + edge.classes : ''))
|
|
||||||
// .attr('style', edge.style);
|
|
||||||
|
|
||||||
console.log('svgPath2 abc88', strokeClasses + (edge.classes ? ' ' + edge.classes : ''));
|
|
||||||
svgPath = select(svgPathNode)
|
svgPath = select(svgPathNode)
|
||||||
.select('path')
|
.select('path')
|
||||||
.attr('id', edge.id)
|
.attr('id', edge.id)
|
||||||
|
|
|
@ -4,7 +4,7 @@ import { stateStart } from './shapes/stateStart.ts';
|
||||||
import { stateEnd } from './shapes/stateEnd.ts';
|
import { stateEnd } from './shapes/stateEnd.ts';
|
||||||
import { forkJoin } from './shapes/forkJoin.ts';
|
import { forkJoin } from './shapes/forkJoin.ts';
|
||||||
import { choice } from './shapes/choice.ts';
|
import { choice } from './shapes/choice.ts';
|
||||||
import {note} from './shapes/note.ts';
|
import { note } from './shapes/note.ts';
|
||||||
import { getConfig } from '$root/diagram-api/diagramAPI.js';
|
import { getConfig } from '$root/diagram-api/diagramAPI.js';
|
||||||
|
|
||||||
const formatClass = (str) => {
|
const formatClass = (str) => {
|
||||||
|
@ -32,7 +32,6 @@ export const insertNode = async (elem, node, dir) => {
|
||||||
|
|
||||||
// debugger;
|
// debugger;
|
||||||
// Add link when appropriate
|
// Add link when appropriate
|
||||||
console.log('node.link', node.link);
|
|
||||||
if (node.link) {
|
if (node.link) {
|
||||||
let target;
|
let target;
|
||||||
if (getConfig().securityLevel === 'sandbox') {
|
if (getConfig().securityLevel === 'sandbox') {
|
||||||
|
|
|
@ -2,7 +2,8 @@ import intersect from '../intersect/index.js';
|
||||||
import type { Node } from '$root/rendering-util/types.d.ts';
|
import type { Node } from '$root/rendering-util/types.d.ts';
|
||||||
import type { SVG } from '$root/diagram-api/types.js';
|
import type { SVG } from '$root/diagram-api/types.js';
|
||||||
import rough from 'roughjs';
|
import rough from 'roughjs';
|
||||||
import solidFillOptions from './solidFillOptions.js';
|
import { solidStateFill } from './handdrawnStyles.js';
|
||||||
|
|
||||||
export const choice = (parent: SVG, node: Node) => {
|
export const choice = (parent: SVG, node: Node) => {
|
||||||
const shapeSvg = parent
|
const shapeSvg = parent
|
||||||
.insert('g')
|
.insert('g')
|
||||||
|
@ -23,7 +24,7 @@ export const choice = (parent: SVG, node: Node) => {
|
||||||
const pointArr = points.map(function (d) {
|
const pointArr = points.map(function (d) {
|
||||||
return [d.x, d.y];
|
return [d.x, d.y];
|
||||||
});
|
});
|
||||||
const roughNode = rc.polygon(pointArr, solidFillOptions);
|
const roughNode = rc.polygon(pointArr, solidStateFill('black'));
|
||||||
choice = shapeSvg.insert(() => roughNode);
|
choice = shapeSvg.insert(() => roughNode);
|
||||||
} else {
|
} else {
|
||||||
choice = shapeSvg.insert('polygon', ':first-child').attr(
|
choice = shapeSvg.insert('polygon', ':first-child').attr(
|
||||||
|
|
|
@ -4,7 +4,7 @@ import intersect from '../intersect/index.js';
|
||||||
import type { Node } from '$root/rendering-util/types.d.ts';
|
import type { Node } from '$root/rendering-util/types.d.ts';
|
||||||
import type { SVG } from '$root/diagram-api/types.js';
|
import type { SVG } from '$root/diagram-api/types.js';
|
||||||
import rough from 'roughjs';
|
import rough from 'roughjs';
|
||||||
import solidFillOptions from './solidFillOptions.js';
|
import { solidStateFill } from './handdrawnStyles.js';
|
||||||
|
|
||||||
export const forkJoin = (parent: SVG, node: Node, dir: string) => {
|
export const forkJoin = (parent: SVG, node: Node, dir: string) => {
|
||||||
const shapeSvg = parent
|
const shapeSvg = parent
|
||||||
|
@ -25,7 +25,7 @@ export const forkJoin = (parent: SVG, node: Node, dir: string) => {
|
||||||
let shape;
|
let shape;
|
||||||
if (node.useRough) {
|
if (node.useRough) {
|
||||||
const rc = rough.svg(shapeSvg);
|
const rc = rough.svg(shapeSvg);
|
||||||
const roughNode = rc.rectangle(x, y, width, height, solidFillOptions);
|
const roughNode = rc.rectangle(x, y, width, height, solidStateFill('black'));
|
||||||
shape = shapeSvg.insert(() => roughNode);
|
shape = shapeSvg.insert(() => roughNode);
|
||||||
} else {
|
} else {
|
||||||
shape = shapeSvg
|
shape = shapeSvg
|
||||||
|
|
|
@ -0,0 +1,24 @@
|
||||||
|
import { getConfig } from '$root/diagram-api/diagramAPI.js';
|
||||||
|
import type { Node } from '$root/rendering-util/types.d.ts';
|
||||||
|
|
||||||
|
// Striped fill like start or fork nodes in state diagrams
|
||||||
|
export const solidStateFill = (color: string) => {
|
||||||
|
const { handdrawnSeed } = getConfig();
|
||||||
|
return {
|
||||||
|
fill: color,
|
||||||
|
hachureAngle: 120, // angle of hachure,
|
||||||
|
hachureGap: 4,
|
||||||
|
fillWeight: 2,
|
||||||
|
roughness: 0.7,
|
||||||
|
seed: handdrawnSeed,
|
||||||
|
};
|
||||||
|
};
|
||||||
|
|
||||||
|
// Striped fill like start or fork nodes in state diagrams
|
||||||
|
// TODO remove any
|
||||||
|
export const userNodeOverrides = (node: Node, options: any) => {
|
||||||
|
const result = Object.assign({}, options);
|
||||||
|
result.fill = node.backgroundColor || options.fill;
|
||||||
|
result.stroke = node.borderColor || options.stroke;
|
||||||
|
return result;
|
||||||
|
};
|
|
@ -1,10 +1,15 @@
|
||||||
import { log } from '$root/logger.js';
|
import { log } from '$root/logger.js';
|
||||||
import { labelHelper, updateNodeBounds } from './util.js';
|
import { labelHelper, updateNodeBounds } from './util.js';
|
||||||
import intersect from '../intersect/index.js';
|
import intersect from '../intersect/index.js';
|
||||||
|
import { getConfig } from '$root/diagram-api/diagramAPI.js';
|
||||||
import type { Node } from '$root/rendering-util/types.d.ts';
|
import type { Node } from '$root/rendering-util/types.d.ts';
|
||||||
|
import rough from 'roughjs';
|
||||||
|
|
||||||
export const note = async (parent: SVGAElement, node: Node) => {
|
export const note = async (parent: SVGAElement, node: Node) => {
|
||||||
const useHtmlLabels = node.useHtmlLabels ;
|
const { themeVariables, handdrawnSeed } = getConfig();
|
||||||
|
const { noteBorderColor, noteBkgColor } = themeVariables;
|
||||||
|
|
||||||
|
const useHtmlLabels = node.useHtmlLabels;
|
||||||
if (!useHtmlLabels) {
|
if (!useHtmlLabels) {
|
||||||
node.centerLabel = true;
|
node.centerLabel = true;
|
||||||
}
|
}
|
||||||
|
@ -16,16 +21,37 @@ export const note = async (parent: SVGAElement, node: Node) => {
|
||||||
);
|
);
|
||||||
|
|
||||||
log.info('Classes = ', node.classes);
|
log.info('Classes = ', node.classes);
|
||||||
// add the rect
|
const { style, useRough } = node;
|
||||||
const rect = shapeSvg.insert('rect', ':first-child');
|
let rect;
|
||||||
|
const totalWidth = bbox.width + node.padding;
|
||||||
|
const totalHeight = bbox.height + node.padding;
|
||||||
|
const x = -bbox.width / 2 - halfPadding;
|
||||||
|
const y = -bbox.height / 2 - halfPadding;
|
||||||
|
|
||||||
rect
|
if (useRough) {
|
||||||
.attr('rx', node.rx)
|
// add the rect
|
||||||
.attr('ry', node.ry)
|
const rc = rough.svg(shapeSvg);
|
||||||
.attr('x', -bbox.width / 2 - halfPadding)
|
const roughNode = rc.rectangle(x, y, totalWidth, totalHeight, {
|
||||||
.attr('y', -bbox.height / 2 - halfPadding)
|
roughness: 0.7,
|
||||||
.attr('width', bbox.width + node.padding)
|
fill: noteBkgColor,
|
||||||
.attr('height', bbox.height + node.padding);
|
fillWeight: 3,
|
||||||
|
seed: handdrawnSeed,
|
||||||
|
// fillStyle: 'solid', // solid fill'
|
||||||
|
stroke: noteBorderColor,
|
||||||
|
});
|
||||||
|
|
||||||
|
rect = shapeSvg.insert(() => roughNode, ':first-child');
|
||||||
|
rect.attr('class', 'basic label-container').attr('style', style);
|
||||||
|
} else {
|
||||||
|
rect = shapeSvg.insert('rect', ':first-child');
|
||||||
|
rect
|
||||||
|
.attr('rx', node.rx)
|
||||||
|
.attr('ry', node.ry)
|
||||||
|
.attr('x', x)
|
||||||
|
.attr('y', y)
|
||||||
|
.attr('width', totalWidth)
|
||||||
|
.attr('height', totalHeight);
|
||||||
|
}
|
||||||
|
|
||||||
updateNodeBounds(node, rect);
|
updateNodeBounds(node, rect);
|
||||||
|
|
||||||
|
|
|
@ -3,6 +3,8 @@ import { labelHelper, updateNodeBounds } from './util.js';
|
||||||
import intersect from '../intersect/index.js';
|
import intersect from '../intersect/index.js';
|
||||||
import type { Node } from '$root/rendering-util/types.d.ts';
|
import type { Node } from '$root/rendering-util/types.d.ts';
|
||||||
import { createRoundedRectPathD } from './roundedRectPath.js';
|
import { createRoundedRectPathD } from './roundedRectPath.js';
|
||||||
|
import { getConfig } from '$root/diagram-api/diagramAPI.js';
|
||||||
|
import { userNodeOverrides } from '$root/rendering-util/rendering-elements/shapes/handdrawnStyles.js';
|
||||||
import rough from 'roughjs';
|
import rough from 'roughjs';
|
||||||
|
|
||||||
/**
|
/**
|
||||||
|
@ -57,6 +59,9 @@ function applyNodePropertyBorders(
|
||||||
}
|
}
|
||||||
|
|
||||||
export const rect = async (parent: SVGAElement, node: Node) => {
|
export const rect = async (parent: SVGAElement, node: Node) => {
|
||||||
|
const { themeVariables, handdrawnSeed } = getConfig();
|
||||||
|
const { nodeBorder, mainBkg } = themeVariables;
|
||||||
|
|
||||||
const { shapeSvg, bbox, halfPadding } = await labelHelper(
|
const { shapeSvg, bbox, halfPadding } = await labelHelper(
|
||||||
parent,
|
parent,
|
||||||
node,
|
node,
|
||||||
|
@ -73,19 +78,20 @@ export const rect = async (parent: SVGAElement, node: Node) => {
|
||||||
const { rx, ry, style, useRough } = node;
|
const { rx, ry, style, useRough } = node;
|
||||||
if (useRough) {
|
if (useRough) {
|
||||||
const rc = rough.svg(shapeSvg);
|
const rc = rough.svg(shapeSvg);
|
||||||
|
const options = userNodeOverrides(node, {
|
||||||
|
roughness: 0.7,
|
||||||
|
fill: mainBkg,
|
||||||
|
fillStyle: 'solid', // solid fill'
|
||||||
|
stroke: nodeBorder,
|
||||||
|
seed: handdrawnSeed,
|
||||||
|
});
|
||||||
const roughNode =
|
const roughNode =
|
||||||
rx || ry
|
rx || ry
|
||||||
? rc.path(createRoundedRectPathD(x, y, totalWidth, totalHeight, rx || 0), {
|
? rc.path(createRoundedRectPathD(x, y, totalWidth, totalHeight, rx || 0), options)
|
||||||
roughness: 0.7,
|
: rc.rectangle(x, y, totalWidth, totalHeight, options);
|
||||||
fill:'white',
|
|
||||||
fillStyle: 'solid' // solid fill'
|
|
||||||
})
|
|
||||||
: rc.rectangle(x, y, totalWidth, totalHeight);
|
|
||||||
|
|
||||||
rect = shapeSvg.insert(() => roughNode, ':first-child');
|
rect = shapeSvg.insert(() => roughNode, ':first-child');
|
||||||
rect
|
rect.attr('class', 'basic label-container').attr('style', style);
|
||||||
.attr('class', 'basic label-container')
|
|
||||||
.attr('style', style)
|
|
||||||
} else {
|
} else {
|
||||||
rect = shapeSvg.insert('rect', ':first-child');
|
rect = shapeSvg.insert('rect', ':first-child');
|
||||||
|
|
||||||
|
|
|
@ -1,10 +0,0 @@
|
||||||
const options = {
|
|
||||||
fill: 'black',
|
|
||||||
// fillStyle: 'solid',
|
|
||||||
hachureAngle: 120, // angle of hachure,
|
|
||||||
hachureGap: 4,
|
|
||||||
fillWeight: 2,
|
|
||||||
roughness: 0.7,
|
|
||||||
};
|
|
||||||
|
|
||||||
export default options;
|
|
|
@ -4,7 +4,7 @@ import intersect from '../intersect/index.js';
|
||||||
import type { Node } from '$root/rendering-util/types.d.ts';
|
import type { Node } from '$root/rendering-util/types.d.ts';
|
||||||
import type { SVG } from '$root/diagram-api/types.js';
|
import type { SVG } from '$root/diagram-api/types.js';
|
||||||
import rough from 'roughjs';
|
import rough from 'roughjs';
|
||||||
import solidFillOptions from './solidFillOptions.js';
|
import { solidStateFill } from './handdrawnStyles.js';
|
||||||
|
|
||||||
export const stateEnd = (parent: SVG, node: Node) => {
|
export const stateEnd = (parent: SVG, node: Node) => {
|
||||||
const shapeSvg = parent
|
const shapeSvg = parent
|
||||||
|
@ -25,8 +25,8 @@ export const stateEnd = (parent: SVG, node: Node) => {
|
||||||
let innerCircle;
|
let innerCircle;
|
||||||
if (node.useRough) {
|
if (node.useRough) {
|
||||||
const rc = rough.svg(shapeSvg);
|
const rc = rough.svg(shapeSvg);
|
||||||
const roughNode = rc.circle(0, 0, 14, { roughness: 0.5 });
|
const roughNode = rc.circle(0, 0, 14, { ...solidStateFill('black'), roughness: 0.5 });
|
||||||
const roughInnerNode = rc.circle(0, 0, 5, { ...solidFillOptions, fillStyle: 'solid' });
|
const roughInnerNode = rc.circle(0, 0, 5, { ...solidStateFill('black'), fillStyle: 'solid' });
|
||||||
circle = shapeSvg.insert(() => roughNode);
|
circle = shapeSvg.insert(() => roughNode);
|
||||||
innerCircle = shapeSvg.insert(() => roughInnerNode);
|
innerCircle = shapeSvg.insert(() => roughInnerNode);
|
||||||
} else {
|
} else {
|
||||||
|
|
|
@ -4,7 +4,7 @@ import intersect from '../intersect/index.js';
|
||||||
import type { Node } from '$root/rendering-util/types.d.ts';
|
import type { Node } from '$root/rendering-util/types.d.ts';
|
||||||
import type { SVG } from '$root/diagram-api/types.js';
|
import type { SVG } from '$root/diagram-api/types.js';
|
||||||
import rough from 'roughjs';
|
import rough from 'roughjs';
|
||||||
import solidFillOptions from './solidFillOptions.js';
|
import { solidStateFill } from './handdrawnStyles.js';
|
||||||
|
|
||||||
export const stateStart = (parent: SVG, node: Node) => {
|
export const stateStart = (parent: SVG, node: Node) => {
|
||||||
const shapeSvg = parent
|
const shapeSvg = parent
|
||||||
|
@ -15,7 +15,7 @@ export const stateStart = (parent: SVG, node: Node) => {
|
||||||
let circle;
|
let circle;
|
||||||
if (node.useRough) {
|
if (node.useRough) {
|
||||||
const rc = rough.svg(shapeSvg);
|
const rc = rough.svg(shapeSvg);
|
||||||
const roughNode = rc.circle(0, 0, 14, solidFillOptions);
|
const roughNode = rc.circle(0, 0, 14, solidStateFill('black'));
|
||||||
circle = shapeSvg.insert(() => roughNode);
|
circle = shapeSvg.insert(() => roughNode);
|
||||||
} else {
|
} else {
|
||||||
circle = shapeSvg.insert('circle', ':first-child');
|
circle = shapeSvg.insert('circle', ':first-child');
|
||||||
|
|
|
@ -71,11 +71,20 @@ properties:
|
||||||
tsType: any
|
tsType: any
|
||||||
themeCSS:
|
themeCSS:
|
||||||
type: string
|
type: string
|
||||||
handdrawn:
|
look:
|
||||||
description: |
|
description: |
|
||||||
Defines whether or not to use the handdrawn effect in the diagram.
|
Defines which main look to use for the diagram.
|
||||||
type: boolean
|
type: string
|
||||||
default: false
|
enum:
|
||||||
|
- classic
|
||||||
|
- handdrawn
|
||||||
|
- slick
|
||||||
|
default: 'classic'
|
||||||
|
handdrawnSeed:
|
||||||
|
description: |
|
||||||
|
Defines the seed to be used when using handdrawn look. This is important for the automated tests as they will always find differentces without the seed. The default value is 0 which gives a random seed.
|
||||||
|
type: number
|
||||||
|
default: 0
|
||||||
layout:
|
layout:
|
||||||
description: |
|
description: |
|
||||||
Defines which layout algorithm to use for rendering the diagram.
|
Defines which layout algorithm to use for rendering the diagram.
|
||||||
|
|
|
@ -6,7 +6,6 @@ class Theme {
|
||||||
this.background = '#333';
|
this.background = '#333';
|
||||||
this.primaryColor = '#1f2020';
|
this.primaryColor = '#1f2020';
|
||||||
this.secondaryColor = lighten(this.primaryColor, 16);
|
this.secondaryColor = lighten(this.primaryColor, 16);
|
||||||
|
|
||||||
this.tertiaryColor = adjust(this.primaryColor, { h: -160 });
|
this.tertiaryColor = adjust(this.primaryColor, { h: -160 });
|
||||||
this.primaryBorderColor = invert(this.background);
|
this.primaryBorderColor = invert(this.background);
|
||||||
this.secondaryBorderColor = mkBorder(this.secondaryColor, this.darkMode);
|
this.secondaryBorderColor = mkBorder(this.secondaryColor, this.darkMode);
|
||||||
|
@ -22,7 +21,7 @@ class Theme {
|
||||||
this.mainContrastColor = 'lightgrey';
|
this.mainContrastColor = 'lightgrey';
|
||||||
this.darkTextColor = lighten(invert('#323D47'), 10);
|
this.darkTextColor = lighten(invert('#323D47'), 10);
|
||||||
this.lineColor = 'calculated';
|
this.lineColor = 'calculated';
|
||||||
this.border1 = '#81B1DB';
|
this.border1 = '#ccc';
|
||||||
this.border2 = rgba(255, 255, 255, 0.25);
|
this.border2 = rgba(255, 255, 255, 0.25);
|
||||||
this.arrowheadColor = 'calculated';
|
this.arrowheadColor = 'calculated';
|
||||||
this.fontFamily = '"trebuchet ms", verdana, arial, sans-serif';
|
this.fontFamily = '"trebuchet ms", verdana, arial, sans-serif';
|
||||||
|
@ -333,6 +332,8 @@ class Theme {
|
||||||
this.attributeBackgroundColorEven =
|
this.attributeBackgroundColorEven =
|
||||||
this.attributeBackgroundColorEven || lighten(this.background, 2);
|
this.attributeBackgroundColorEven || lighten(this.background, 2);
|
||||||
/* -------------------------------------------------- */
|
/* -------------------------------------------------- */
|
||||||
|
|
||||||
|
this.nodeBorder = this.nodeBorder || '#999';
|
||||||
}
|
}
|
||||||
calculate(overrides) {
|
calculate(overrides) {
|
||||||
if (typeof overrides !== 'object') {
|
if (typeof overrides !== 'object') {
|
||||||
|
|
Loading…
Reference in New Issue