diff --git a/.gitignore b/.gitignore new file mode 100644 index 0000000..3642500 --- /dev/null +++ b/.gitignore @@ -0,0 +1,6 @@ +# emacs +*~ +.#* + +# ignore public directory +site/public/* \ No newline at end of file diff --git a/assets/burble-dn42-180.png b/assets/burble-dn42-180.png new file mode 100644 index 0000000..60cb723 Binary files /dev/null and b/assets/burble-dn42-180.png differ diff --git a/assets/burble-dn42-64-white.png b/assets/burble-dn42-64-white.png new file mode 100644 index 0000000..da1c086 Binary files /dev/null and b/assets/burble-dn42-64-white.png differ diff --git a/assets/burble-dn42-64.png b/assets/burble-dn42-64.png new file mode 100644 index 0000000..6e1d54a Binary files /dev/null and b/assets/burble-dn42-64.png differ diff --git a/assets/burble-dn42-map.png b/assets/burble-dn42-map.png new file mode 100644 index 0000000..556662a Binary files /dev/null and b/assets/burble-dn42-map.png differ diff --git a/assets/burble-dn42.psd b/assets/burble-dn42.psd new file mode 100644 index 0000000..b09e124 Binary files /dev/null and b/assets/burble-dn42.psd differ diff --git a/pages/01.home/blog.md b/pages/01.home/blog.md deleted file mode 100755 index 140333f..0000000 --- a/pages/01.home/blog.md +++ /dev/null @@ -1,18 +0,0 @@ ---- -title: home -body_classes: 'title-center title-h1h2' -hero_classes: 'overlay-light hero-large' -content: - items: - - '@self.children' - limit: 5 - order: - by: date - dir: desc - pagination: true - url_taxonomy_filters: true ---- - -
experimental global networking
-\ No newline at end of file diff --git a/pages/01.home/burble-dn42-services/default.md b/pages/01.home/burble-dn42-services/default.md deleted file mode 100755 index 2576da9..0000000 --- a/pages/01.home/burble-dn42-services/default.md +++ /dev/null @@ -1,265 +0,0 @@ ---- -title: Services -visible: true ---- - -List of public services provided by the burble.dn42 network. - -=== - -#Services - -## Public Website - -[burble.dn42](https://burble.dn42/) (dn42 link) -[dn42.burble.com](https://dn42.burble.com/) (public internet link) - -This website is built using [GRAV](https://getgrav.org/) and currently -hosted on de-fra1. The public internet version is protected by -[CloudFlare](https://www.cloudflare.com). -Longer term, regional replicas of the DN42 site may be provided however -this is not currently configured. - - -## PrivateBin Instance - -[paste.burble.dn42](https://paste.burble.dn42) (dn42 link) -[paste.burble.com](https://paste.burble.com) (public internet link) - -burble.dn42 PrivateBin instance. - - -## Looking Glass - -[lg.burble.com](https://lg.burble.com) (public internet link) -[lg.burble.dn42](https://lg.burble.dn42) (dn42 link) - -The burble.dn42 looking glass is based on [bird-lg](https://github.com/sileht/bird-lg) with patches by -[Zhaofeng](https://github.com/zhaofengli/bird-lg), [tds](https://github.com/TimStallard/bird-lg) and -[myself](https://github.com/sesa-me/bird-lg) to fix formating, bird2 compatibility and other tweaks. - -A fork of sileht/bird-lg that includes all of our fixes is available on [GitHub](https://github.com/sesa-me/bird-lg). - -DN42 registry data in the BGP Map part of the looking glass uses [lgregmapper](https://git.dn42.us/burble/lgregmapper) -to interface with [dn42regsrv](https://git.dn42.us/burble/dn42regsrv). - -The looking glass is hosted on de-fra1 behind [CloudFlare](https://www.cloudflare.com). - - -## Issue Log - -A public issue log is maintained on the [DN42 Registry](https://git.dn42.dev). - -- [Issue Log](https://git.dn42.dev/burble/burble.dn42/issues) - -Users are welcome to raise issues or enhancements via the log. - - -## DNS - -|Authoritative Service|| -|:--|:--| -|ns1.burble.dn42
- -All peerings will be configured as a full transit session. - -#### Residential ISPs and Dynamic IP addresses - -A 24/7 connection, with static IP addresses are the norm for DN42. If you are connecting from a -residential ISP or otherwise have a dynamic IP please let me know so that I can configure my side -appropriately. If you don't do tell me, the peering will stop working when your IP address changes. - -#### Supported Tunnel Types - -I prefer to use [wireguard](https://wireguard.io/), it's simple to set up and just works. -I also support OpenVPN tunnels. - -* **[Wireguard](https://wireguard.io/)** - - I use a random port number and unique key for each Wireguard peer, so mail me to confirm - the port number and public key. - Endpoint names and IP addresses are detailed below. - - My wireguard AllowedIPs are: - ``` -AllowedIPs=fe80::/64 -AllowedIPs=fd00::/8 -AllowedIPs=0.0.0.0/0 - ``` - - Note that wg-quick does not support adding a peer address. If you want to use wg-quick you will - need to delete and re-add the wireguard interface IP address and configure it as a point to point - address or you will run in to next-hop problems when using BGP. See the - [DN42 Wiki](https://dn42.dev/howto/wireguard) on how to use iproute2 to configure a point to point - address. - -* **[OpenVPN](https://openvpn.net/)** - - By default I will configure the following OpenVPN parameters, with a random OpenVPN port number - and shared key. - - ``` -comp-lzo -cipher aes-256-cbc -auth sha256 - ``` - -####Allowed Traffic - -Only the network ranges will be forwarded through the DN42 network, all other traffic will be dropped. - -**IPv4** -``` -172.16.0.0/12 -10.0.0.0/8 -``` - -**IPv6** -``` -fd00::/8 -``` - -BGP peer addresses are more permissive to allow for link local or non-DN42 IP addresses within the -tunnel, but these will not be forwarded through the DN42 network. - -##### Flow Control and BGP Rate Limiting - -A typical BGP session in DN42 will use a trivial amount of traffic. However, for large networks like -burble.dn42 some transient events, such as BGP flapping, can generate multi MB/sec traffic flows that -damange the network and create instability across DN42. - -To protect the network from misconfigurations and prevent excessive updates from being propagated to the -rest of DN42, the burble.dn42 network implements rate limiting on direct BGP sessions. The rate limiting -activates when a large amount of BGP traffic is seen (typically 10's or 100's of thousands of -updates a second) over a sustained period and will typically reset automatically within an hour. - -There are no other controls applied to transit or non-BGP traffic. - -#### BGP Configuration - -||| -|---|---| -|**Network Name** |BURBLE| -|**BURBLE-MNT**|dn42@burble.com| -|**ASN**|AS4242422601| - - -The burble.dn42 network uses a custom build of -[bird 2](https://bird.network.cz/?get_doc&f=bird.html&v=20), and the -following features are supported: - -* Multiprotocol BGP [RFC 4760](https://www.rfc-editor.org/info/rfc4760) -* BGP Large Communities [RFC 8092](http://www.rfc-editor.org/info/rfc8092) -* BGP Confederations [RFC 5065](https://www.rfc-editor.org/info/rfc5065) -* DN42 Route Origin Authorisation (ROA - see below section on Route Filtering) -* DN42 [BGP communities](https://wiki.dn42.us/howto/Bird-communities) -* burble.dn42 custom [large communities](/home/bgp-communities) -* burble.dn42 [Routing Policy](/home/routing-policy) - -The source code for the custom bird used on the network is available on -[git.burble.dn42](https://git.burble.dn42/burble.dn42/bird) - -**Route Filtering** - -The network applies strict Route Origin Authorisation (ROA) filtering to all -received and exported routes. This means any advertised route that does -not have a corresponding route{,6} object in the DN42 registry will be dropped. - -ROA is implemented with updates through RPKI, using -[dn42regsrv](https://git.dn42.us/burble/dn42regsrv) and -[gortr](https://github.com/cloudflare/gortr). - -The DN42 ROA data is provided as a public service, see the [Services](/home/burble-dn42-services) page. - -Generic Allowed Prefixes: - -IPv4 -``` -172.20.0.0/14+ -10.0.0.0/8+ -``` - -IPv6 -``` -fd00::/8{44,64} -``` - -**Peering with Multiple Nodes** - -Users are welcome to peer with more than one node in the burble.dn42 network to provide -additional redundancy and route choice. It's highly recommended to peer with multiple users DN42 -users though, it's lots of fun and you should never rely on just one user for your connectivity. - -#### Testing - -Within the tunnel, hosts respond to ping and traceroute, but also have the echo (port 7) and -daytime (port 13) services enabled. These can be used to check the tunnel is up and configured -correctly. - -``` -$ ping fe80::42:2601:32:1%wg0 -PING fe80::42:2601:32:1%wg0(fe80::42:2601:32:1%wg0) 56 data bytes -64 bytes from fe80::42:2601:32:1%wg0: icmp_seq=1 ttl=64 time=4.44 ms -64 bytes from fe80::42:2601:32:1%wg0: icmp_seq=2 ttl=64 time=4.52 ms -64 bytes from fe80::42:2601:32:1%wg0: icmp_seq=3 ttl=64 time=4.96 ms -^C ---- fe80::42:2601:32:1%wg0 ping statistics --- -3 packets transmitted, 3 received, 0% packet loss, time 2003ms -rtt min/avg/max/mdev = 4.445/4.643/4.961/0.233 ms -$ netcat fe80::42:2601:32:1%wg0 13 -Sun Sep 23 09:57:26 2018 -^C -$ -``` - -Once peering is established I have a BGP looking glass [here](https://lg.burble.com/) (public -internet link) and global route [collector](https://grc.burble.com) which can be used to -check routing. The looking glass is a key resource for you to use when understanding how your -routes are propogating around the DN42 network. - -#### Automated reachability and latency testing - -pingable.burble.dn42 (172.20.129.5 / fd42:4242:2601:ac05::1) is a dedicated address -that responds to ping and traceroute and may be used for automated reachability or -link quality testing. - -Please be considerate when configuring automated tests and set a reasonable test frequency. -In all cases, the frequency must not be more than once a second. Please consider this if your -router automatically pings its tunnel endpoint for stats purposes. - ---- -#### Network Information - -The burble.dn42 is fully meshed between nodes using wireguard tunnels. - -||| -|---|---| -|**IPv4 Prefix (Services)** |172.20.129.0/27| -|**IPv4 Prefix (Nodes)** |172.20.129.160/27| -|**IPv6 Prefix** |fd42:4242:2601::/48| - -### Europe - -####dn42-fr-rbx1 -||| -|---|---| -|**Location**|OVH, Roubaix, France| -|**Public Hostname**|dn42-fr-rbx1.burble.com| -|**Public IPv4 Address**|176.31.240.39| -|**Public IPv6 Address**|2001:41d0:8:127::1| -|**Tunnel IPv4 Peer Address**|172.20.129.188/32| -|**Tunnel IPv6 Link Local**|fe80::42:2601:36:1/64| -|**Tunnel IPv6 ULA**|fd42:4242:2601:36::1/128| - -####dn42-uk-lon1 -||| -|---|---| -|**Location**|Clouvider, London, UK| -|**Public Hostname**|dn42-uk-lon1.burble.com| -|**Public IPv4 Address**|185.42.222.153| -|**Public IPv6 Address**|2a04:92c5:2::1| -|**Tunnel IPv4 Peer Address**|172.20.129.187/32| -|**Tunnel IPv6 Link Local**|fe80::42:2601:35:1/64| -|**Tunnel IPv6 ULA**|fd42:4242:2601:35::1/128| - -####dn42-de-fra1 -||| -|---|---| -|**Location**|PHP Friends, Frankfurt, Germany| -|**Public Hostname**|dn42-de-fra1.burble.com| -|**Public IPv4 Address**|193.41.237.149| -|**Public IPv6 Address**|2a0d:5941:1:17c::4e2a| -|**Tunnel IPv4 Peer Address**|172.20.129.169/32| -|**Tunnel IPv6 Link Local**|fe80::42:2601:31:1/64| -|**Tunnel IPv6 ULA**|fd42:4242:2601:31::1/128| - -####dn42-ch-zur1 -||| -|---|---| -|**Location**|HostHatch, Zurich, Switzerland| -|**Public Hostname**|dn42-ch-zur1.burble.com| -|**Public IPv4 Address**|45.91.92.111| -|**Public IPv6 Address**|2a0e:dc0:6:8::1| -|**Tunnel IPv4 Peer Address**|172.20.129.174/32| -|**Tunnel IPv6 Link Local**|fe80::42:2601:28:1/64| -|**Tunnel IPv6 ULA**|fd42:4242:2601:28::1/128| - -####dn42-no-trd1 -||| -|---|---| -|**Location**|Trondheim, Norway| -|**Public Hostname**|dn42-no-trd1.burble.com| -|**Public IPv4 Address**|217.168.87.226| -|**Public IPv6 Address**|2001:678:dd0:ffff::25| -|**Tunnel IPv4 Peer Address**|172.20.129.185/32| -|**Tunnel IPv6 Link Local**|fe80::42:2601:39:1/64| -|**Tunnel IPv6 ULA**|fd42:4242:2601:39::1/128| - -### North America - -####dn42-ca-bhs2 -||| -|---|---| -|**Location**|OVH, Beauharnois, Canada| -|**Public Hostname**|dn42-ca-bhs2.burble.com| -|**Public IPv4 Address**|192.99.6.65| -|**Public IPv6 Address**|2607:5300:60:3741::1| -|**Tunnel IPv4 Peer Address**|172.20.129.167/32| -|**Tunnel IPv6 Link Local**|fe80::42:2601:2d:1/64| -|**Tunnel IPv6 ULA**|fd42:4242:2601:2d::1/128| - -####dn42-us-dal3 -||| -|---|---| -|**Location**|drserver, Dallas, United States| -|**Public Hostname**|dn42-us-dal3.burble.com| -|**Public IPv4 Address**|144.172.126.201| -|**Public IPv6 Address**|2602:fe64:8::4| -|**Tunnel IPv4 Peer Address**|172.20.129.172/32| -|**Tunnel IPv6 Link Local**|fe80::42:2601:2a:1/64| -|**Tunnel IPv6 ULA**|fd42:4242:2601:2a::1/128| - -####dn42-us-lax1 -||| -|---|---| -|**Location**|LetBox, Los Angeles, United States| -|**Public Hostname**|dn42-us-lax1.burble.com| -|**Public IPv4 Address**|185.215.224.214| -|**Public IPv6 Address**|2a0b:ae40:1:4a0a::5a| -|**Tunnel IPv4 Peer Address**|172.20.129.165/32| -|**Tunnel IPv6 Link Local**|fe80::42:2601:3a:1/64| -|**Tunnel IPv6 ULA**|fd42:4242:2601:3a::1/128| - -### Asia and Oceania - -####dn42-sg-sin2 -||| -|---|---| -|**Location**|OVH, Singapore| -|**Public Hostname**|dn42-sg-sin2.burble.com| -|**Public IPv4 Address**|139.99.89.157| -|**Public IPv6 Address**|2402:1f00:8000:800::3bc| -|**Tunnel IPv4 Peer Address**|172.20.129.181/32| -|**Tunnel IPv6 Link Local**|fe80::42:2601:37:1/64| -|**Tunnel IPv6 ULA**|fd42:4242:2601:37::1/128| - - - -`The following nodes are being decommissioned and are no longer open for new peerings.` - -####dn42-au-syd1 -||| -|---|---| -|**Location**|OVH, Sydney, Australia| -|**Public Hostname**|dn42-au-syd1.burble.com| -|**Public IPv4 Address**|139.99.237.85| -|**Public IPv6 Address**|2402:1f00:8100:400::279| -|**Tunnel IPv4 Peer Address**|172.20.129.180/32| -|**Tunnel IPv6 Link Local**|fe80::42:2601:38:1/64| -|**Tunnel IPv6 ULA**|fd42:4242:2601:38::1/128| - -####dn42-us-chi1 -||| -|---|---| -|**Location**|HostHatch, Chicago, United States| -|**Public Hostname**|dn42-us-chi1.burble.com| -|**Public IPv4 Address**|193.29.63.150| -|**Public IPv6 Address**|2605:4840:3:10::ab2d| -|**Tunnel IPv4 Peer Address**|172.20.129.166/32| -|**Tunnel IPv6 Link Local**|fe80::42:2601:2e:1/64| -|**Tunnel IPv6 ULA**|fd42:4242:2601:2e::1/128| - -####dn42-us-nyc1 -||| -|---|---| -|**Location**|HostHatch, New York, United States| -|**Public Hostname**|dn42-us-nyc1.burble.com| -|**Public IPv4 Address**|185.213.26.143| -|**Public IPv6 Address**|2a0d:5600:33:b::1| -|**Tunnel IPv4 Peer Address**|172.20.129.168/32| -|**Tunnel IPv6 Link Local**|fe80::42:2601:34:1/64| -|**Tunnel IPv6 ULA**|fd42:4242:2601:34::1/128| - diff --git a/pages/03.about/DN42 Map 191026.png b/pages/03.about/DN42 Map 191026.png deleted file mode 100644 index ad2e2da..0000000 Binary files a/pages/03.about/DN42 Map 191026.png and /dev/null differ diff --git a/pages/03.about/burble.dn42.200110.png b/pages/03.about/burble.dn42.200110.png deleted file mode 100644 index 6768da9..0000000 Binary files a/pages/03.about/burble.dn42.200110.png and /dev/null differ diff --git a/pages/03.about/default.md b/pages/03.about/default.md deleted file mode 100755 index f3fa9be..0000000 --- a/pages/03.about/default.md +++ /dev/null @@ -1,33 +0,0 @@ ---- -title: about -media_order: 'DN42 Map 181224.2.png' ---- - -#burble.dn42 - -burble.dn42 is an experimental global network, and is currently the largest network wthin -[dn42](https://dn42.us/). - -#####Background - -I manage a number of virtual and dedicated servers that provide high quality time services for the [NTP Pool Project](https://www.ntppool.org/). -burble.dn42 is a project to integrate these servers with dn42, creating a globally connected set of POPs that are well connected to the dn42 network. - -My [NTP Pool Profile Page](https://www.ntppool.org/user/buovss4oiceotdj2o3mb) shows the status of each of my servers in the pool. - -#####Topology - -All nodes in the burble.dn42 network are fully meshed with wireguard tunnels. iBGP together with -[BGP Confederations](https://en.wikipedia.org/wiki/BGP_confederation) are used as the routing protocol -between nodes. iBGP is also fully meshed, and the configuration for both iBGP and wireguard tunnels -is built using a number of [Ansible](https://www.ansible.com/) scripts. - -The current network design was introduced in December 2019; previous designs for the network have included a -VXLAN overlay over the wireguard mesh to create a single layer 2 network, together with the use of OSPF as the -IGP. Other variations have included using BABEL, and tinc. - - - -####Network Status - -[Status Page](https://dn42.status.burble.com/) provided by [UptimeRobot](https://uptimerobot.com/) diff --git a/push.sh b/push.sh index d1eecce..71220dd 100755 --- a/push.sh +++ b/push.sh @@ -3,9 +3,17 @@ # hosts to push hosts=( + 'rsync.tier2.uk-lon1.burble.dn42' + 'rsync.tier2.fr-rbx1.burble.dn42' 'rsync.tier2.de-fra1.burble.dn42' + 'rsync.tier2.ca-bhs2.burble.dn42' + 'rsync.tier2.us-dal3.burble.dn42' + 'rsync.tier2.sg-sin2.burble.dn42' + 'rsync.tier2.us-lax1.burble.dn42' ) +dst="apps/nginx/burble.dn42" + ######################################################################## # where am I ? @@ -45,13 +53,21 @@ vault write \ chmod 0600 .tmp/* ######################################################################## +# generate the site + +pushd site +hugo +popd + +######################################################################## +# and push to hosts for host in ${hosts[@]} do echo "Syncing host: $host" rsync -avogp --delete -e "ssh -i '${key}'" \ - --chown 81001:81001 --chmod=D2750,F640 \ - pages/ "root@${host}:apps/php-apps/burble.dn42/user/pages/" + --chown 81001:81001 --chmod=D2755,F644 \ + site/public/ "root@${host}:${dst}/" done diff --git a/site/archetypes/default.md b/site/archetypes/default.md new file mode 100644 index 0000000..00e77bd --- /dev/null +++ b/site/archetypes/default.md @@ -0,0 +1,6 @@ +--- +title: "{{ replace .Name "-" " " | title }}" +date: {{ .Date }} +draft: true +--- + diff --git a/site/config.toml b/site/config.toml new file mode 100644 index 0000000..4eab0e4 --- /dev/null +++ b/site/config.toml @@ -0,0 +1,72 @@ +baseURL = "https://dn42.burble.com/" +languageCode = "en-gb" +title = "burble.dn42" +theme = "geekdoc" + +# Geekdoc required configuration +pygmentsUseClasses = true +pygmentsCodeFences = true +disablePathToLower = true + +# Needed for mermaid shortcodes +[markup] + [markup.goldmark.renderer] + # Needed for mermaid shortcode + unsafe = true + [markup.tableOfContents] + startLevel = 1 + endLevel = 9 + +[params] + # (Optional, default 6) Set how many table of contents levels to be showed on page. + # Use false to hide ToC, note that 0 will default to 6 (https://gohugo.io/functions/default/) + # You can also specify this parameter per page in front matter. + geekdocToC = 3 + + # (Optional, default static/brand.svg) Set the path to a logo for the Geekdoc + # relative to your 'static/' folder. + geekdocLogo = "burble-dn42-64.png" + + # (Optional, default false) Render menu from data file im 'data/menu/main.yaml'. + # geekdocMenuBundle = true + + # (Optional, default true) Show page navigation links at the bottom of each + # docs page (bundle menu only). + geekdocNextPrev = true + + # (Optional, default true) Show a breadcrumb navigation bar at the top of each docs page. + # You can also specify this parameter per page in front matter. + geekdocBreadcrumb = true + + # (Optional, default none) Set source repository location + # Used for 'Edit this page' links + # You can also specify this parameter per page in front matter. + geekdocRepo = "https://github.com/thegeeklab/hugo" + + # (Optional, default none) Enable 'Edit this page' links. Requires 'GeekdocRepo' param + # and path must point to 'content' directory of repo. + # You can also specify this parameter per page in front matter. + # geekdocEditPath = "edit/master/exampleSite/content" + + # (Optional, default true) Enables search function with flexsearch. + # Index is built on the fly and might slowdown your website. + geekdocSearch = true + + # (Optional, default false) Display search results with the parent folder as prefix. This + # option allows you to distinguish between files with the same name in different folders. + # NOTE: This parameter only applies when 'geekdocSearch = true'. + geekdocSearchShowParent = true + + # (Optional, default none) Add a link to your Legal Notice page to the site footer. + # It can be either a remote url or a local file path relative to your content directory. + # geekdocLegalNotice = "https://blog.example.com/legal" + + # (Optional, default none) Add a link to your Privacy Policy page to the site footer. + # It can be either a remote url or a local file path relative to your content directory. + geekdocPrivacyPolicy = "/privacy" + + # (Optional, default true) Add an anchor link to headlines. + geekdocAnchor = true + + # (Optional, default true) Copy anchor url to clipboard on click. + geekdocAnchorCopy = true diff --git a/site/content/_index.md b/site/content/_index.md new file mode 100644 index 0000000..e5292ed --- /dev/null +++ b/site/content/_index.md @@ -0,0 +1,6 @@ +--- +title: "burble.dn42" +geekdocDescription: "Home Page" +--- +An experiment in global networking. + diff --git a/site/content/additional/_index.md b/site/content/additional/_index.md new file mode 100644 index 0000000..2393e0b --- /dev/null +++ b/site/content/additional/_index.md @@ -0,0 +1,5 @@ +--- +title: Additional Info +weight: 30 +--- +{{
+ +All peerings will be configured as a full transit session. + +{{
h&&(l=0),l=l||0,g=l+c,g >1)+f+t+w+C.slice(T);break;default:t=C+f+t+w}return s(t)}return y=void 0===y?6:/[gprs]/.test(m)?Math.max(1,Math.min(21,y)):Math.max(0,Math.min(20,y)),w.toString=function(){return t+""},w}return{format:h,formatPrefix:function(t,e){var n=h(((t=Vs(t)).type="f",t)),r=3*Math.max(-8,Math.min(8,Math.floor($s(e)/3))),i=Math.pow(10,-r),a=ec[8+r/3];return function(t){return n(i*t)+a}}}};function rc(t){return qs=nc(t),Xs=qs.format,Zs=qs.formatPrefix,qs}rc({decimal:".",thousands:",",grouping:[3],currency:["$",""],minus:"-"});var ic=function(t){return Math.max(0,-$s(Math.abs(t)))},ac=function(t,e){return Math.max(0,3*Math.max(-8,Math.min(8,Math.floor($s(e)/3)))-$s(Math.abs(t)))},oc=function(t,e){return t=Math.abs(t),e=Math.abs(e)-t,Math.max(0,$s(e)-$s(t))+1},sc=function(){return new cc};function cc(){this.reset()}cc.prototype={constructor:cc,reset:function(){this.s=this.t=0},add:function(t){lc(uc,t,this.t),lc(this,uc.s,this.s),this.s?this.t+=uc.t:this.s=uc.t},valueOf:function(){return this.s}};var uc=new cc;function lc(t,e,n){var r=t.s=e+n,i=r-e,a=r-i;t.t=e-a+(n-i)}var hc=Math.PI,fc=hc/2,dc=hc/4,pc=2*hc,gc=180/hc,yc=hc/180,vc=Math.abs,mc=Math.atan,bc=Math.atan2,xc=Math.cos,_c=Math.ceil,kc=Math.exp,wc=(Math.floor,Math.log),Ec=Math.pow,Tc=Math.sin,Cc=Math.sign||function(t){return t>0?1:t<0?-1:0},Sc=Math.sqrt,Ac=Math.tan;function Mc(t){return t>1?0:t<-1?hc:Math.acos(t)}function Oc(t){return t>1?fc:t<-1?-fc:Math.asin(t)}function Dc(t){return(t=Tc(t/2))*t}function Nc(){}function Bc(t,e){t&&Fc.hasOwnProperty(t.type)&&Fc[t.type](t,e)}var Lc={Feature:function(t,e){Bc(t.geometry,e)},FeatureCollection:function(t,e){for(var n=t.features,r=-1,i=n.length;++r=0?1:-1,i=r*n,a=xc(e=(e*=yc)/2+dc),o=Tc(e),s=Uc*o,c=zc*a+s*xc(i),u=s*r*Tc(i);Wc.add(bc(u,c)),Yc=t,zc=a,Uc=o}var Jc=function(t){return Vc.reset(),$c(t,Hc),2*Vc};function Qc(t){return[bc(t[1],t[0]),Oc(t[2])]}function Kc(t){var e=t[0],n=t[1],r=xc(n);return[r*xc(e),r*Tc(e),Tc(n)]}function tu(t,e){return t[0]*e[0]+t[1]*e[1]+t[2]*e[2]}function eu(t,e){return[t[1]*e[2]-t[2]*e[1],t[2]*e[0]-t[0]*e[2],t[0]*e[1]-t[1]*e[0]]}function nu(t,e){t[0]+=e[0],t[1]+=e[1],t[2]+=e[2]}function ru(t,e){return[t[0]*e,t[1]*e,t[2]*e]}function iu(t){var e=Sc(t[0]*t[0]+t[1]*t[1]+t[2]*t[2]);t[0]/=e,t[1]/=e,t[2]/=e}var au,ou,su,cu,uu,lu,hu,fu,du,pu,gu=sc(),yu={point:vu,lineStart:bu,lineEnd:xu,polygonStart:function(){yu.point=_u,yu.lineStart=ku,yu.lineEnd=wu,gu.reset(),Hc.polygonStart()},polygonEnd:function(){Hc.polygonEnd(),yu.point=vu,yu.lineStart=bu,yu.lineEnd=xu,Wc<0?(au=-(su=180),ou=-(cu=90)):gu>1e-6?cu=90:gu<-1e-6&&(ou=-90),pu[0]=au,pu[1]=su},sphere:function(){au=-(su=180),ou=-(cu=90)}};function vu(t,e){du.push(pu=[au=t,su=t]),e >>1;u[g] \n * Additionally, dissimilar types will not clobber unless the config.clobber parameter === true. Example:\n * ```\n * let config_0 = { foo: { bar: 'bar' }, bar: 'foo' };\n * let config_1 = { foo: 'foo', bar: 'bar' };\n * let result = assignWithDepth(config_0, config_1);\n * console.log(result);\n * //-> result: { foo: { bar: 'bar' }, bar: 'bar' }\n * ```\n * \n * Traditional Object.assign would have clobbered foo in config_0 with foo in config_1.\n * \n * If src is a destructured array of objects and dst is not an array, assignWithDepth will apply each element of src to dst\n * in order.\n * @param dst:any - the destination of the merge\n * @param src:any - the source object(s) to merge into destination\n * @param config:{ depth: number, clobber: boolean } - depth: depth to traverse within src and dst for merging -\n * clobber: should dissimilar types clobber (default: { depth: 2, clobber: false })\n * @returns {*}\n */\nexport const assignWithDepth = function(dst, src, config) {\n const { depth, clobber } = Object.assign({ depth: 2, clobber: false }, config);\n if (Array.isArray(src) && !Array.isArray(dst)) {\n src.forEach(s => assignWithDepth(dst, s, config));\n return dst;\n } else if (Array.isArray(src) && Array.isArray(dst)) {\n src.forEach(s => {\n if (dst.indexOf(s) === -1) {\n dst.push(s);\n }\n });\n return dst;\n }\n if (typeof dst === 'undefined' || depth <= 0) {\n if (dst !== undefined && dst !== null && typeof dst === 'object' && typeof src === 'object') {\n return Object.assign(dst, src);\n } else {\n return src;\n }\n }\n if (typeof src !== 'undefined' && typeof dst === 'object' && typeof src === 'object') {\n Object.keys(src).forEach(key => {\n if (\n typeof src[key] === 'object' &&\n (dst[key] === undefined || typeof dst[key] === 'object')\n ) {\n if (dst[key] === undefined) {\n dst[key] = Array.isArray(src[key]) ? [] : {};\n }\n dst[key] = assignWithDepth(dst[key], src[key], { depth: depth - 1, clobber });\n } else if (clobber || (typeof dst[key] !== 'object' && typeof src[key] !== 'object')) {\n dst[key] = src[key];\n }\n });\n }\n return dst;\n};\n\nexport const getTextObj = function() {\n return {\n x: 0,\n y: 0,\n fill: undefined,\n anchor: 'start',\n style: '#666',\n width: 100,\n height: 100,\n textMargin: 0,\n rx: 0,\n ry: 0,\n valign: undefined\n };\n};\n\nexport const drawSimpleText = function(elem, textData) {\n // Remove and ignore br:s\n const nText = textData.text.replace(common.lineBreakRegex, ' ');\n\n const textElem = elem.append('text');\n textElem.attr('x', textData.x);\n textElem.attr('y', textData.y);\n textElem.style('text-anchor', textData.anchor);\n textElem.style('font-family', textData.fontFamily);\n textElem.style('font-size', textData.fontSize);\n textElem.style('font-weight', textData.fontWeight);\n textElem.attr('fill', textData.fill);\n if (typeof textData.class !== 'undefined') {\n textElem.attr('class', textData.class);\n }\n\n const span = textElem.append('tspan');\n span.attr('x', textData.x + textData.textMargin * 2);\n span.attr('fill', textData.fill);\n span.text(nText);\n\n return textElem;\n};\n\nexport const wrapLabel = memoize(\n (label, maxWidth, config) => {\n if (!label) {\n return label;\n }\n config = Object.assign(\n { fontSize: 12, fontWeight: 400, fontFamily: 'Arial', joinWith: ' h&&(l=0),l=l||0,g=l+c,g >1)+f+t+w+C.slice(T);break;default:t=C+f+t+w}return s(t)}return y=void 0===y?6:/[gprs]/.test(m)?Math.max(1,Math.min(21,y)):Math.max(0,Math.min(20,y)),w.toString=function(){return t+""},w}return{format:h,formatPrefix:function(t,e){var n=h(((t=Vs(t)).type="f",t)),r=3*Math.max(-8,Math.min(8,Math.floor($s(e)/3))),i=Math.pow(10,-r),a=ec[8+r/3];return function(t){return n(i*t)+a}}}};function rc(t){return qs=nc(t),Xs=qs.format,Zs=qs.formatPrefix,qs}rc({decimal:".",thousands:",",grouping:[3],currency:["$",""],minus:"-"});var ic=function(t){return Math.max(0,-$s(Math.abs(t)))},ac=function(t,e){return Math.max(0,3*Math.max(-8,Math.min(8,Math.floor($s(e)/3)))-$s(Math.abs(t)))},oc=function(t,e){return t=Math.abs(t),e=Math.abs(e)-t,Math.max(0,$s(e)-$s(t))+1},sc=function(){return new cc};function cc(){this.reset()}cc.prototype={constructor:cc,reset:function(){this.s=this.t=0},add:function(t){lc(uc,t,this.t),lc(this,uc.s,this.s),this.s?this.t+=uc.t:this.s=uc.t},valueOf:function(){return this.s}};var uc=new cc;function lc(t,e,n){var r=t.s=e+n,i=r-e,a=r-i;t.t=e-a+(n-i)}var hc=Math.PI,fc=hc/2,dc=hc/4,pc=2*hc,gc=180/hc,yc=hc/180,vc=Math.abs,mc=Math.atan,bc=Math.atan2,xc=Math.cos,_c=Math.ceil,kc=Math.exp,wc=(Math.floor,Math.log),Ec=Math.pow,Tc=Math.sin,Cc=Math.sign||function(t){return t>0?1:t<0?-1:0},Sc=Math.sqrt,Ac=Math.tan;function Mc(t){return t>1?0:t<-1?hc:Math.acos(t)}function Oc(t){return t>1?fc:t<-1?-fc:Math.asin(t)}function Dc(t){return(t=Tc(t/2))*t}function Nc(){}function Bc(t,e){t&&Fc.hasOwnProperty(t.type)&&Fc[t.type](t,e)}var Lc={Feature:function(t,e){Bc(t.geometry,e)},FeatureCollection:function(t,e){for(var n=t.features,r=-1,i=n.length;++r=0?1:-1,i=r*n,a=xc(e=(e*=yc)/2+dc),o=Tc(e),s=Uc*o,c=zc*a+s*xc(i),u=s*r*Tc(i);Wc.add(bc(u,c)),Yc=t,zc=a,Uc=o}var Jc=function(t){return Vc.reset(),$c(t,Hc),2*Vc};function Qc(t){return[bc(t[1],t[0]),Oc(t[2])]}function Kc(t){var e=t[0],n=t[1],r=xc(n);return[r*xc(e),r*Tc(e),Tc(n)]}function tu(t,e){return t[0]*e[0]+t[1]*e[1]+t[2]*e[2]}function eu(t,e){return[t[1]*e[2]-t[2]*e[1],t[2]*e[0]-t[0]*e[2],t[0]*e[1]-t[1]*e[0]]}function nu(t,e){t[0]+=e[0],t[1]+=e[1],t[2]+=e[2]}function ru(t,e){return[t[0]*e,t[1]*e,t[2]*e]}function iu(t){var e=Sc(t[0]*t[0]+t[1]*t[1]+t[2]*t[2]);t[0]/=e,t[1]/=e,t[2]/=e}var au,ou,su,cu,uu,lu,hu,fu,du,pu,gu=sc(),yu={point:vu,lineStart:bu,lineEnd:xu,polygonStart:function(){yu.point=_u,yu.lineStart=ku,yu.lineEnd=wu,gu.reset(),Hc.polygonStart()},polygonEnd:function(){Hc.polygonEnd(),yu.point=vu,yu.lineStart=bu,yu.lineEnd=xu,Wc<0?(au=-(su=180),ou=-(cu=90)):gu>1e-6?cu=90:gu<-1e-6&&(ou=-90),pu[0]=au,pu[1]=su},sphere:function(){au=-(su=180),ou=-(cu=90)}};function vu(t,e){du.push(pu=[au=t,su=t]),e >>1;u[g]cu&&(cu=e)),u?t0?r=S(s=Math.floor(s/r)*r,c=Math.ceil(c/r)*r,n):r<0&&(r=S(s=Math.ceil(s*r)/r,c=Math.floor(c*r)/r,n)),r>0?(i[a]=Math.floor(s/r)*r,i[o]=Math.ceil(c/r)*r,e(i)):r<0&&(i[a]=Math.ceil(s*r)/r,i[o]=Math.floor(c*r)/r,e(i)),t},t}function sg(){var t=ig(Jp,Jp);return t.copy=function(){return ng(t,sg())},Rp.apply(t,arguments),og(t)}function cg(t){var e;function n(t){return isNaN(t=+t)?e:t}return n.invert=n,n.domain=n.range=function(e){return arguments.length?(t=Up.call(e,Xp),n):t.slice()},n.unknown=function(t){return arguments.length?(e=t,n):e},n.copy=function(){return cg(t).unknown(e)},t=arguments.length?Up.call(t,Xp):[0,1],og(n)}var ug=function(t,e){var n,r=0,i=(t=t.slice()).length-1,a=t[r],o=t[i];return o0){for(;fc)break;g.push(h)}}else g=C(f,d,Math.min(d-f,p)).map(n);return r?g.reverse():g},r.tickFormat=function(t,i){if(null==i&&(i=10===a?".0e":","),"function"!=typeof i&&(i=Xs(i)),t===1/0)return i;null==t&&(t=10);var o=Math.max(1,a*t/r.ticks().length);return function(t){var r=t/n(Math.round(e(t)));return r*a=c)return-1;if(37===(i=e.charCodeAt(o++))){if(i=e.charAt(o++),!(a=_[i in Hy?e.charAt(o++):i])||(r=a(t,n,r))<0)return-1}else if(i!=n.charCodeAt(r++))return-1}return r}return(b.x=k(n,b),b.X=k(r,b),b.c=k(e,b),x.x=k(n,x),x.X=k(r,x),x.c=k(e,x),{format:function(t){var e=k(t+="",b);return e.toString=function(){return t},e},parse:function(t){var e=w(t+="",!1);return e.toString=function(){return t},e},utcFormat:function(t){var e=k(t+="",x);return e.toString=function(){return t},e},utcParse:function(t){var e=w(t+="",!0);return e.toString=function(){return t},e}})}var zy,Uy,$y,Wy,Vy,Hy={"-":"",_:" ",0:"0"},Gy=/^\s*\d+/,qy=/^%/,Xy=/[\\^$*+?|[\]().{}]/g;function Zy(t,e,n){var r=t<0?"-":"",i=(r?-t:t)+"",a=i.length;return r+(ah&&A.push("'"+this.terminals_[T]+"'");O=p.showPosition?"Parse error on line "+(c+1)+":\n"+p.showPosition()+"\nExpecting "+A.join(", ")+", got '"+(this.terminals_[x]||x)+"'":"Parse error on line "+(c+1)+": Unexpected "+(x==f?"end of input":"'"+(this.terminals_[x]||x)+"'"),this.parseError(O,{text:p.match,token:this.terminals_[x]||x,line:p.yylineno,loc:v,expected:A})}if(w[0]instanceof Array&&w.length>1)throw new Error("Parse Error: multiple actions possible at state: "+k+", token: "+x);switch(w[0]){case 1:n.push(x),i.push(p.yytext),a.push(p.yylloc),n.push(w[1]),x=null,_?(x=_,_=null):(u=p.yyleng,s=p.yytext,c=p.yylineno,v=p.yylloc,l>0&&l--);break;case 2:if(C=this.productions_[w[1]][1],M.$=i[i.length-C],M._$={first_line:a[a.length-(C||1)].first_line,last_line:a[a.length-1].last_line,first_column:a[a.length-(C||1)].first_column,last_column:a[a.length-1].last_column},m&&(M._$.range=[a[a.length-(C||1)].range[0],a[a.length-1].range[1]]),void 0!==(E=this.performAction.apply(M,[s,u,c,g.yy,w[1],i,a].concat(d))))return E;C&&(n=n.slice(0,-1*C*2),i=i.slice(0,-1*C),a=a.slice(0,-1*C)),n.push(this.productions_[w[1]][0]),i.push(M.$),a.push(M._$),S=o[n[n.length-2]][n[n.length-1]],n.push(S);break;case 3:return!0}}return!0}},M={EOF:1,parseError:function(t,e){if(!this.yy.parser)throw new Error(t);this.yy.parser.parseError(t,e)},setInput:function(t,e){return this.yy=e||this.yy||{},this._input=t,this._more=this._backtrack=this.done=!1,this.yylineno=this.yyleng=0,this.yytext=this.matched=this.match="",this.conditionStack=["INITIAL"],this.yylloc={first_line:1,first_column:0,last_line:1,last_column:0},this.options.ranges&&(this.yylloc.range=[0,0]),this.offset=0,this},input:function(){var t=this._input[0];return this.yytext+=t,this.yyleng++,this.offset++,this.match+=t,this.matched+=t,t.match(/(?:\r\n?|\n).*/g)?(this.yylineno++,this.yylloc.last_line++):this.yylloc.last_column++,this.options.ranges&&this.yylloc.range[1]++,this._input=this._input.slice(1),t},unput:function(t){var e=t.length,n=t.split(/(?:\r\n?|\n)/g);this._input=t+this._input,this.yytext=this.yytext.substr(0,this.yytext.length-e),this.offset-=e;var r=this.match.split(/(?:\r\n?|\n)/g);this.match=this.match.substr(0,this.match.length-1),this.matched=this.matched.substr(0,this.matched.length-1),n.length-1&&(this.yylineno-=n.length-1);var i=this.yylloc.range;return this.yylloc={first_line:this.yylloc.first_line,last_line:this.yylineno+1,first_column:this.yylloc.first_column,last_column:n?(n.length===r.length?this.yylloc.first_column:0)+r[r.length-n.length].length-n[0].length:this.yylloc.first_column-e},this.options.ranges&&(this.yylloc.range=[i[0],i[0]+this.yyleng-e]),this.yyleng=this.yytext.length,this},more:function(){return this._more=!0,this},reject:function(){return this.options.backtrack_lexer?(this._backtrack=!0,this):this.parseError("Lexical error on line "+(this.yylineno+1)+". You can only invoke reject() in the lexer when the lexer is of the backtracking persuasion (options.backtrack_lexer = true).\n"+this.showPosition(),{text:"",token:null,line:this.yylineno})},less:function(t){this.unput(this.match.slice(t))},pastInput:function(){var t=this.matched.substr(0,this.matched.length-this.match.length);return(t.length>20?"...":"")+t.substr(-20).replace(/\n/g,"")},upcomingInput:function(){var t=this.match;return t.length<20&&(t+=this._input.substr(0,20-t.length)),(t.substr(0,20)+(t.length>20?"...":"")).replace(/\n/g,"")},showPosition:function(){var t=this.pastInput(),e=new Array(t.length+1).join("-");return t+this.upcomingInput()+"\n"+e+"^"},test_match:function(t,e){var n,r,i;if(this.options.backtrack_lexer&&(i={yylineno:this.yylineno,yylloc:{first_line:this.yylloc.first_line,last_line:this.last_line,first_column:this.yylloc.first_column,last_column:this.yylloc.last_column},yytext:this.yytext,match:this.match,matches:this.matches,matched:this.matched,yyleng:this.yyleng,offset:this.offset,_more:this._more,_input:this._input,yy:this.yy,conditionStack:this.conditionStack.slice(0),done:this.done},this.options.ranges&&(i.yylloc.range=this.yylloc.range.slice(0))),(r=t[0].match(/(?:\r\n?|\n).*/g))&&(this.yylineno+=r.length),this.yylloc={first_line:this.yylloc.last_line,last_line:this.yylineno+1,first_column:this.yylloc.last_column,last_column:r?r[r.length-1].length-r[r.length-1].match(/\r?\n?/)[0].length:this.yylloc.last_column+t[0].length},this.yytext+=t[0],this.match+=t[0],this.matches=t,this.yyleng=this.yytext.length,this.options.ranges&&(this.yylloc.range=[this.offset,this.offset+=this.yyleng]),this._more=!1,this._backtrack=!1,this._input=this._input.slice(t[0].length),this.matched+=t[0],n=this.performAction.call(this,this.yy,this,e,this.conditionStack[this.conditionStack.length-1]),this.done&&this._input&&(this.done=!1),n)return n;if(this._backtrack){for(var a in i)this[a]=i[a];return!1}return!1},next:function(){if(this.done)return this.EOF;var t,e,n,r;this._input||(this.done=!0),this._more||(this.yytext="",this.match="");for(var i=this._currentRules(),a=0;a0&&(ot=ot.replace(r,"")),ot.trim().length>0)){switch(b){case 32:case 9:case 59:case 13:case 10:break;default:ot+=i.charAt(O)}b=59}if(1===j)switch(b){case 123:case 125:case 59:case 34:case 39:case 40:case 41:case 44:j=0;case 9:case 13:case 10:case 32:break;default:for(j=0,W=O,v=b,O--,b=59;W
0&&(++O,b=v);case 123:W=Q}}switch(b){case 123:for(v=(ot=ot.trim()).charCodeAt(0),T=1,W=++O;O
0&&(ot=ot.replace(r,"")),m=ot.charCodeAt(1)){case 100:case 109:case 115:case 45:s=e;break;default:s=z}if(W=(st=Z(e,s,st,m,o+1)).length,Y>0&&0===W&&(W=ot.length),$>0&&(c=nt(3,st,s=J(z,ot,U),e,B,N,W,m,o,a),ot=s.join(""),void 0!==c&&0===(W=(st=c.trim()).length)&&(m=0,st="")),W>0)switch(m){case 115:ot=ot.replace(w,et);case 100:case 109:case 45:st=ot+"{"+st+"}";break;case 107:st=(ot=ot.replace(p,"$1 $2"+(H>0?G:"")))+"{"+st+"}",st=1===P||2===P&&tt("@"+st,3)?"@"+M+st+"@"+st:"@"+st;break;default:st=ot+st,112===a&&(ct+=st,st="")}else st="";break;default:st=Z(e,J(e,ot,U),st,a,o+1)}ut+=st,C=0,j=0,A=0,D=0,U=0,S=0,ot="",st="",b=i.charCodeAt(++O);break;case 125:case 59:if((W=(ot=(D>0?ot.replace(r,""):ot).trim()).length)>1)switch(0===A&&(45===(v=ot.charCodeAt(0))||v>96&&v<123)&&(W=(ot=ot.replace(" ",":")).length),$>0&&void 0!==(c=nt(1,ot,e,t,B,N,ct.length,a,o,a))&&0===(W=(ot=c.trim()).length)&&(ot="\0\0"),v=ot.charCodeAt(0),m=ot.charCodeAt(1),v){case 0:break;case 64:if(105===m||99===m){lt+=ot+i.charAt(O);break}default:if(58===ot.charCodeAt(W-1))break;ct+=K(ot,v,m,ot.charCodeAt(2))}C=0,j=0,A=0,D=0,U=0,ot="",b=i.charCodeAt(++O)}}switch(b){case 13:case 10:if(h+d+f+l+R===0)switch(E){case 41:case 39:case 34:case 64:case 126:case 62:case 42:case 43:case 47:case 45:case 58:case 44:case 59:case 123:case 125:break;default:A>0&&(j=1)}47===h?h=0:F+C===0&&107!==a&&ot.length>0&&(D=1,ot+="\0"),$*V>0&&nt(0,ot,e,t,B,N,ct.length,a,o,a),N=1,B++;break;case 59:case 125:if(h+d+f+l===0){N++;break}default:switch(N++,at=i.charAt(O),b){case 9:case 32:if(d+l+h===0)switch(x){case 44:case 58:case 9:case 32:at="";break;default:32!==b&&(at=" ")}break;case 0:at="\\0";break;case 12:at="\\f";break;case 11:at="\\v";break;case 38:d+h+l===0&&F>0&&(U=1,D=1,at="\f"+at);break;case 108:if(d+h+l+L===0&&A>0)switch(O-A){case 2:112===x&&58===i.charCodeAt(O-3)&&(L=x);case 8:111===k&&(L=k)}break;case 58:d+h+l===0&&(A=O);break;case 44:h+f+d+l===0&&(D=1,at+="\r");break;case 34:case 39:0===h&&(d=d===b?0:0===d?b:d);break;case 91:d+h+f===0&&l++;break;case 93:d+h+f===0&&l--;break;case 41:d+h+l===0&&f--;break;case 40:if(d+h+l===0){if(0===C)switch(2*x+3*k){case 533:break;default:T=0,C=1}f++}break;case 64:h+f+d+l+A+S===0&&(S=1);break;case 42:case 47:if(d+l+f>0)break;switch(h){case 0:switch(2*b+3*i.charCodeAt(O+1)){case 235:h=47;break;case 220:W=O,h=42}break;case 42:47===b&&42===x&&W+2!==O&&(33===i.charCodeAt(W+2)&&(ct+=i.substring(W,O+1)),at="",h=0)}}if(0===h){if(F+d+l+S===0&&107!==a&&59!==b)switch(b){case 44:case 126:case 62:case 43:case 41:case 40:if(0===C){switch(x){case 9:case 32:case 10:case 13:at+="\0";break;default:at="\0"+at+(44===b?"":"\0")}D=1}else switch(b){case 40:A+7===O&&108===x&&(A=0),C=++T;break;case 41:0==(C=--T)&&(D=1,at+="\0")}break;case 9:case 32:switch(x){case 0:case 123:case 125:case 59:case 44:case 12:case 9:case 32:case 10:case 13:break;default:0===C&&(D=1,at+="\0")}}ot+=at,32!==b&&9!==b&&(E=b)}}k=x,x=b,O++}if(W=ct.length,Y>0&&0===W&&0===ut.length&&0===e[0].length==0&&(109!==a||1===e.length&&(F>0?q:X)===e[0])&&(W=e.join(",").length+2),W>0){if(s=0===F&&107!==a?function(t){for(var e,n,i=0,a=t.length,o=Array(a);i1)){if(f=c.charCodeAt(c.length-1),d=n.charCodeAt(0),e="",0!==l)switch(f){case 42:case 126:case 62:case 43:case 32:case 40:break;default:e=" "}switch(d){case 38:n=e+q;case 126:case 62:case 43:case 32:case 41:case 40:break;case 91:n=e+n+q;break;case 58:switch(2*n.charCodeAt(1)+3*n.charCodeAt(2)){case 530:if(I>0){n=e+n.substring(8,h-1);break}default:(l<1||s[l-1].length<1)&&(n=e+q+n)}break;case 44:e="";default:n=h>1&&n.indexOf(":")>0?e+n.replace(_,"$1"+q+"$2"):e+n+q}c+=n}o[i]=c.replace(r,"").trim()}return o}(e):e,$>0&&void 0!==(c=nt(2,ct,s,t,B,N,W,a,o,a))&&0===(ct=c).length)return lt+ct+ut;if(ct=s.join(",")+"{"+ct+"}",P*L!=0){switch(2!==P||tt(ct,2)||(L=0),L){case 111:ct=ct.replace(y,":-moz-$1")+ct;break;case 112:ct=ct.replace(g,"::-webkit-input-$1")+ct.replace(g,"::-moz-$1")+ct.replace(g,":-ms-input-$1")+ct}L=0}}return lt+ct+ut}function J(t,e,n){var r=e.trim().split(l),i=r,a=r.length,o=t.length;switch(o){case 0:case 1:for(var s=0,c=0===o?"":t[0]+" ";s0&&F>0)return i.replace(f,"$1").replace(h,"$1"+X);break;default:return t.trim()+i.replace(h,"$1"+t.trim())}default:if(n*F>0&&i.indexOf("\f")>0)return i.replace(h,(58===t.charCodeAt(0)?"":"$1")+t.trim())}return t+i}function K(t,e,n,r){var u,l=0,h=t+";",f=2*e+3*n+4*r;if(944===f)return function(t){var e=t.length,n=t.indexOf(":",9)+1,r=t.substring(0,n).trim(),i=t.substring(n,e-1).trim();switch(t.charCodeAt(9)*H){case 0:break;case 45:if(110!==t.charCodeAt(10))break;default:var a=i.split((i="",s)),o=0;for(n=0,e=a.length;o
=c?u:u*("desc"==n[i]?-1:1)}return t.index-e.index}},function(t,e,n){var r=n(42);t.exports=function(t,e){if(t!==e){var n=void 0!==t,i=null===t,a=t==t,o=r(t),s=void 0!==e,c=null===e,u=e==e,l=r(e);if(!c&&!l&&!o&&t>e||o&&s&&u&&!c&&!l||i&&s&&u||!n&&u||!a)return 1;if(!i&&!o&&!l&&t0}t.exports=function(t,e,r,i){var a,o,s,c,u,l,h,f,d,p,g,y,v;if(a=e.y-t.y,s=t.x-e.x,u=e.x*t.y-t.x*e.y,d=a*r.x+s*r.y+u,p=a*i.x+s*i.y+u,0!==d&&0!==p&&n(d,p))return;if(o=i.y-r.y,c=r.x-i.x,l=i.x*r.y-r.x*i.y,h=o*t.x+c*t.y+l,f=o*e.x+c*e.y+l,0!==h&&0!==f&&n(h,f))return;if(0===(g=a*c-o*s))return;return y=Math.abs(g/2),{x:(v=s*l-c*u)<0?(v-y)/g:(v+y)/g,y:(v=o*u-a*l)<0?(v-y)/g:(v+y)/g}}},function(t,e,n){var r=n(43),i=n(31),a=n(153).layout;t.exports=function(){var t=n(371),e=n(374),i=n(375),u=n(376),l=n(377),h=n(378),f=n(379),d=n(380),p=n(381),g=function(n,g){!function(t){t.nodes().forEach((function(e){var n=t.node(e);r.has(n,"label")||t.children(e).length||(n.label=e),r.has(n,"paddingX")&&r.defaults(n,{paddingLeft:n.paddingX,paddingRight:n.paddingX}),r.has(n,"paddingY")&&r.defaults(n,{paddingTop:n.paddingY,paddingBottom:n.paddingY}),r.has(n,"padding")&&r.defaults(n,{paddingLeft:n.padding,paddingRight:n.padding,paddingTop:n.padding,paddingBottom:n.padding}),r.defaults(n,o),r.each(["paddingLeft","paddingRight","paddingTop","paddingBottom"],(function(t){n[t]=Number(n[t])})),r.has(n,"width")&&(n._prevWidth=n.width),r.has(n,"height")&&(n._prevHeight=n.height)})),t.edges().forEach((function(e){var n=t.edge(e);r.has(n,"label")||(n.label=""),r.defaults(n,s)}))}(g);var y=c(n,"output"),v=c(y,"clusters"),m=c(y,"edgePaths"),b=i(c(y,"edgeLabels"),g),x=t(c(y,"nodes"),g,d);a(g),l(x,g),h(b,g),u(m,g,p);var _=e(v,g);f(_,g),function(t){r.each(t.nodes(),(function(e){var n=t.node(e);r.has(n,"_prevWidth")?n.width=n._prevWidth:delete n.width,r.has(n,"_prevHeight")?n.height=n._prevHeight:delete n.height,delete n._prevWidth,delete n._prevHeight}))}(g)};return g.createNodes=function(e){return arguments.length?(t=e,g):t},g.createClusters=function(t){return arguments.length?(e=t,g):e},g.createEdgeLabels=function(t){return arguments.length?(i=t,g):i},g.createEdgePaths=function(t){return arguments.length?(u=t,g):u},g.shapes=function(t){return arguments.length?(d=t,g):d},g.arrows=function(t){return arguments.length?(p=t,g):p},g};var o={paddingLeft:10,paddingRight:10,paddingTop:10,paddingBottom:10,rx:0,ry:0,shape:"rect"},s={arrowhead:"normal",curve:i.curveLinear};function c(t,e){var n=t.select("g."+e);return n.empty()&&(n=t.append("g").attr("class",e)),n}},function(t,e,n){"use strict";var r=n(43),i=n(97),a=n(12),o=n(31);t.exports=function(t,e,n){var s,c=e.nodes().filter((function(t){return!a.isSubgraph(e,t)})),u=t.selectAll("g.node").data(c,(function(t){return t})).classed("update",!0);u.exit().remove(),u.enter().append("g").attr("class","node").style("opacity",0),(u=t.selectAll("g.node")).each((function(t){var s=e.node(t),c=o.select(this);a.applyClass(c,s.class,(c.classed("update")?"update ":"")+"node"),c.select("g.label").remove();var u=c.append("g").attr("class","label"),l=i(u,s),h=n[s.shape],f=r.pick(l.node().getBBox(),"width","height");s.elem=this,s.id&&c.attr("id",s.id),s.labelId&&u.attr("id",s.labelId),r.has(s,"width")&&(f.width=s.width),r.has(s,"height")&&(f.height=s.height),f.width+=s.paddingLeft+s.paddingRight,f.height+=s.paddingTop+s.paddingBottom,u.attr("transform","translate("+(s.paddingLeft-s.paddingRight)/2+","+(s.paddingTop-s.paddingBottom)/2+")");var d=o.select(this);d.select(".label-container").remove();var p=h(d,f,s).classed("label-container",!0);a.applyStyle(p,s.style);var g=p.node().getBBox();s.width=g.width,s.height=g.height})),s=u.exit?u.exit():u.selectAll(null);return a.applyTransition(s,e).style("opacity",0).remove(),u}},function(t,e,n){var r=n(12);t.exports=function(t,e){for(var n=t.append("text"),i=function(t){for(var e,n="",r=!1,i=0;i
/gi;\n\nexport const hasBreaks = text => {\n return /
/gi.test(text);\n};\n\nexport const splitBreaks = text => {\n return text.split(/
/gi);\n};\n\nconst breakToPlaceholder = s => {\n return s.replace(lineBreakRegex, '#br#');\n};\n\nconst placeholderToBreak = s => {\n return s.replace(/#br#/g, '
');\n};\n\nexport default {\n getRows,\n sanitizeText,\n hasBreaks,\n splitBreaks,\n lineBreakRegex,\n removeScript\n};\n","import {\n curveBasis,\n curveBasisClosed,\n curveBasisOpen,\n curveLinear,\n curveLinearClosed,\n curveMonotoneX,\n curveMonotoneY,\n curveNatural,\n curveStep,\n curveStepAfter,\n curveStepBefore,\n select\n} from 'd3';\nimport { logger } from './logger';\nimport { sanitizeUrl } from '@braintree/sanitize-url';\nimport common from './diagrams/common/common';\n// import cryptoRandomString from 'crypto-random-string';\n\n// Effectively an enum of the supported curve types, accessible by name\nconst d3CurveTypes = {\n curveBasis: curveBasis,\n curveBasisClosed: curveBasisClosed,\n curveBasisOpen: curveBasisOpen,\n curveLinear: curveLinear,\n curveLinearClosed: curveLinearClosed,\n curveMonotoneX: curveMonotoneX,\n curveMonotoneY: curveMonotoneY,\n curveNatural: curveNatural,\n curveStep: curveStep,\n curveStepAfter: curveStepAfter,\n curveStepBefore: curveStepBefore\n};\nconst directive = /[%]{2}[{]\\s*(?:(?:(\\w+)\\s*:|(\\w+))\\s*(?:(?:(\\w+))|((?:(?![}][%]{2}).|\\r?\\n)*))?\\s*)(?:[}][%]{2})?/gi;\nconst directiveWithoutOpen = /\\s*(?:(?:(\\w+)(?=:):|(\\w+))\\s*(?:(?:(\\w+))|((?:(?![}][%]{2}).|\\r?\\n)*))?\\s*)(?:[}][%]{2})?/gi;\nconst anyComment = /\\s*%%.*\\n/gm;\n\n/**\n * @function detectInit\n * Detects the init config object from the text\n * ```mermaid\n * %%{init: {\"theme\": \"debug\", \"logLevel\": 1 }}%%\n * graph LR\n * a-->b\n * b-->c\n * c-->d\n * d-->e\n * e-->f\n * f-->g\n * g-->h\n * ```\n * or\n * ```mermaid\n * %%{initialize: {\"theme\": \"dark\", logLevel: \"debug\" }}%%\n * graph LR\n * a-->b\n * b-->c\n * c-->d\n * d-->e\n * e-->f\n * f-->g\n * g-->h\n * ```\n *\n * @param {string} text The text defining the graph\n * @returns {object} the json object representing the init passed to mermaid.initialize()\n */\nexport const detectInit = function(text) {\n let inits = detectDirective(text, /(?:init\\b)|(?:initialize\\b)/);\n let results = {};\n if (Array.isArray(inits)) {\n let args = inits.map(init => init.args);\n results = assignWithDepth(results, [...args]);\n } else {\n results = inits.args;\n }\n if (results) {\n let type = detectType(text);\n ['config'].forEach(prop => {\n if (typeof results[prop] !== 'undefined') {\n if (type === 'flowchart-v2') {\n type = 'flowchart';\n }\n results[type] = results[prop];\n delete results[prop];\n }\n });\n }\n return results;\n};\n\n/**\n * @function detectDirective\n * Detects the directive from the text. Text can be single line or multiline. If type is null or omitted\n * the first directive encountered in text will be returned\n * ```mermaid\n * graph LR\n * %%{somedirective}%%\n * a-->b\n * b-->c\n * c-->d\n * d-->e\n * e-->f\n * f-->g\n * g-->h\n * ```\n *\n * @param {string} text The text defining the graph\n * @param {string|RegExp} type The directive to return (default: null)\n * @returns {object | Array} An object or Array representing the directive(s): { type: string, args: object|null } matched by the input type\n * if a single directive was found, that directive object will be returned.\n */\nexport const detectDirective = function(text, type = null) {\n try {\n const commentWithoutDirectives = new RegExp(\n `[%]{2}(?![{]${directiveWithoutOpen.source})(?=[}][%]{2}).*\\n`,\n 'ig'\n );\n text = text\n .trim()\n .replace(commentWithoutDirectives, '')\n .replace(/'/gm, '\"');\n logger.debug(\n `Detecting diagram directive${type !== null ? ' type:' + type : ''} based on the text:${text}`\n );\n let match,\n result = [];\n while ((match = directive.exec(text)) !== null) {\n // This is necessary to avoid infinite loops with zero-width matches\n if (match.index === directive.lastIndex) {\n directive.lastIndex++;\n }\n if (\n (match && !type) ||\n (type && match[1] && match[1].match(type)) ||\n (type && match[2] && match[2].match(type))\n ) {\n let type = match[1] ? match[1] : match[2];\n let args = match[3] ? match[3].trim() : match[4] ? JSON.parse(match[4].trim()) : null;\n result.push({ type, args });\n }\n }\n if (result.length === 0) {\n result.push({ type: text, args: null });\n }\n\n return result.length === 1 ? result[0] : result;\n } catch (error) {\n logger.error(\n `ERROR: ${error.message} - Unable to parse directive${\n type !== null ? ' type:' + type : ''\n } based on the text:${text}`\n );\n return { type: null, args: null };\n }\n};\n\n/**\n * @function detectType\n * Detects the type of the graph text. Takes into consideration the possible existence of an %%init\n * directive\n * ```mermaid\n * %%{initialize: {\"startOnLoad\": true, logLevel: \"fatal\" }}%%\n * graph LR\n * a-->b\n * b-->c\n * c-->d\n * d-->e\n * e-->f\n * f-->g\n * g-->h\n * ```\n *\n * @param {string} text The text defining the graph\n * @returns {string} A graph definition key\n */\nexport const detectType = function(text) {\n text = text.replace(directive, '').replace(anyComment, '\\n');\n logger.debug('Detecting diagram type based on the text ' + text);\n if (text.match(/^\\s*sequenceDiagram/)) {\n return 'sequence';\n }\n\n if (text.match(/^\\s*gantt/)) {\n return 'gantt';\n }\n if (text.match(/^\\s*classDiagram-v2/)) {\n return 'classDiagram';\n }\n if (text.match(/^\\s*classDiagram/)) {\n return 'class';\n }\n\n if (text.match(/^\\s*stateDiagram-v2/)) {\n return 'stateDiagram';\n }\n\n if (text.match(/^\\s*stateDiagram/)) {\n return 'state';\n }\n\n if (text.match(/^\\s*gitGraph/)) {\n return 'git';\n }\n if (text.match(/^\\s*flowchart/)) {\n return 'flowchart-v2';\n }\n\n if (text.match(/^\\s*info/)) {\n return 'info';\n }\n if (text.match(/^\\s*pie/)) {\n return 'pie';\n }\n\n if (text.match(/^\\s*erDiagram/)) {\n return 'er';\n }\n\n if (text.match(/^\\s*journey/)) {\n return 'journey';\n }\n\n return 'flowchart';\n};\n\nconst memoize = (fn, resolver) => {\n let cache = {};\n return (...args) => {\n let n = resolver ? resolver.apply(this, args) : args[0];\n if (n in cache) {\n return cache[n];\n } else {\n let result = fn(...args);\n cache[n] = result;\n return result;\n }\n };\n};\n\n/**\n * @function isSubstringInArray\n * Detects whether a substring in present in a given array\n * @param {string} str The substring to detect\n * @param {array} arr The array to search\n * @returns {number} the array index containing the substring or -1 if not present\n **/\nexport const isSubstringInArray = function(str, arr) {\n for (let i = 0; i < arr.length; i++) {\n if (arr[i].match(str)) return i;\n }\n return -1;\n};\n\nexport const interpolateToCurve = (interpolate, defaultCurve) => {\n if (!interpolate) {\n return defaultCurve;\n }\n const curveName = `curve${interpolate.charAt(0).toUpperCase() + interpolate.slice(1)}`;\n return d3CurveTypes[curveName] || defaultCurve;\n};\n\nexport const formatUrl = (linkStr, config) => {\n let url = linkStr.trim();\n\n if (url) {\n if (config.securityLevel !== 'loose') {\n return sanitizeUrl(url);\n }\n\n return url;\n }\n};\n\nexport const runFunc = (functionName, ...params) => {\n const arrPaths = functionName.split('.');\n\n const len = arrPaths.length - 1;\n const fnName = arrPaths[len];\n\n let obj = window;\n for (let i = 0; i < len; i++) {\n obj = obj[arrPaths[i]];\n if (!obj) return;\n }\n\n obj[fnName](...params);\n};\n\nconst distance = (p1, p2) =>\n p1 && p2 ? Math.sqrt(Math.pow(p2.x - p1.x, 2) + Math.pow(p2.y - p1.y, 2)) : 0;\n\nconst traverseEdge = points => {\n let prevPoint;\n let totalDistance = 0;\n\n points.forEach(point => {\n totalDistance += distance(point, prevPoint);\n prevPoint = point;\n });\n\n // Traverse half of total distance along points\n let remainingDistance = totalDistance / 2;\n let center = undefined;\n prevPoint = undefined;\n points.forEach(point => {\n if (prevPoint && !center) {\n const vectorDistance = distance(point, prevPoint);\n if (vectorDistance < remainingDistance) {\n remainingDistance -= vectorDistance;\n } else {\n // The point is remainingDistance from prevPoint in the vector between prevPoint and point\n // Calculate the coordinates\n const distanceRatio = remainingDistance / vectorDistance;\n if (distanceRatio <= 0) center = prevPoint;\n if (distanceRatio >= 1) center = { x: point.x, y: point.y };\n if (distanceRatio > 0 && distanceRatio < 1) {\n center = {\n x: (1 - distanceRatio) * prevPoint.x + distanceRatio * point.x,\n y: (1 - distanceRatio) * prevPoint.y + distanceRatio * point.y\n };\n }\n }\n }\n prevPoint = point;\n });\n return center;\n};\n\nconst calcLabelPosition = points => {\n return traverseEdge(points);\n};\n\nconst calcCardinalityPosition = (isRelationTypePresent, points, initialPosition) => {\n let prevPoint;\n let totalDistance = 0; // eslint-disable-line\n logger.info('our points', points);\n if (points[0] !== initialPosition) {\n points = points.reverse();\n }\n points.forEach(point => {\n totalDistance += distance(point, prevPoint);\n prevPoint = point;\n });\n\n // Traverse only 25 total distance along points to find cardinality point\n const distanceToCardinalityPoint = 25;\n\n let remainingDistance = distanceToCardinalityPoint;\n let center;\n prevPoint = undefined;\n points.forEach(point => {\n if (prevPoint && !center) {\n const vectorDistance = distance(point, prevPoint);\n if (vectorDistance < remainingDistance) {\n remainingDistance -= vectorDistance;\n } else {\n // The point is remainingDistance from prevPoint in the vector between prevPoint and point\n // Calculate the coordinates\n const distanceRatio = remainingDistance / vectorDistance;\n if (distanceRatio <= 0) center = prevPoint;\n if (distanceRatio >= 1) center = { x: point.x, y: point.y };\n if (distanceRatio > 0 && distanceRatio < 1) {\n center = {\n x: (1 - distanceRatio) * prevPoint.x + distanceRatio * point.x,\n y: (1 - distanceRatio) * prevPoint.y + distanceRatio * point.y\n };\n }\n }\n }\n prevPoint = point;\n });\n // if relation is present (Arrows will be added), change cardinality point off-set distance (d)\n let d = isRelationTypePresent ? 10 : 5;\n //Calculate Angle for x and y axis\n let angle = Math.atan2(points[0].y - center.y, points[0].x - center.x);\n let cardinalityPosition = { x: 0, y: 0 };\n //Calculation cardinality position using angle, center point on the line/curve but pendicular and with offset-distance\n cardinalityPosition.x = Math.sin(angle) * d + (points[0].x + center.x) / 2;\n cardinalityPosition.y = -Math.cos(angle) * d + (points[0].y + center.y) / 2;\n return cardinalityPosition;\n};\n\n/**\n * position ['start_left', 'start_right', 'end_left', 'end_right']\n */\nconst calcTerminalLabelPosition = (terminalMarkerSize, position, _points) => {\n // Todo looking to faster cloning method\n let points = JSON.parse(JSON.stringify(_points));\n let prevPoint;\n let totalDistance = 0; // eslint-disable-line\n logger.info('our points', points);\n if (position !== 'start_left' && position !== 'start_right') {\n points = points.reverse();\n }\n\n points.forEach(point => {\n totalDistance += distance(point, prevPoint);\n prevPoint = point;\n });\n\n // Traverse only 25 total distance along points to find cardinality point\n const distanceToCardinalityPoint = 25;\n\n let remainingDistance = distanceToCardinalityPoint;\n let center;\n prevPoint = undefined;\n points.forEach(point => {\n if (prevPoint && !center) {\n const vectorDistance = distance(point, prevPoint);\n if (vectorDistance < remainingDistance) {\n remainingDistance -= vectorDistance;\n } else {\n // The point is remainingDistance from prevPoint in the vector between prevPoint and point\n // Calculate the coordinates\n const distanceRatio = remainingDistance / vectorDistance;\n if (distanceRatio <= 0) center = prevPoint;\n if (distanceRatio >= 1) center = { x: point.x, y: point.y };\n if (distanceRatio > 0 && distanceRatio < 1) {\n center = {\n x: (1 - distanceRatio) * prevPoint.x + distanceRatio * point.x,\n y: (1 - distanceRatio) * prevPoint.y + distanceRatio * point.y\n };\n }\n }\n }\n prevPoint = point;\n });\n // if relation is present (Arrows will be added), change cardinality point off-set distance (d)\n let d = 10;\n //Calculate Angle for x and y axis\n let angle = Math.atan2(points[0].y - center.y, points[0].x - center.x);\n\n let cardinalityPosition = { x: 0, y: 0 };\n\n //Calculation cardinality position using angle, center point on the line/curve but pendicular and with offset-distance\n\n cardinalityPosition.x = Math.sin(angle) * d + (points[0].x + center.x) / 2;\n cardinalityPosition.y = -Math.cos(angle) * d + (points[0].y + center.y) / 2;\n if (position === 'start_left') {\n cardinalityPosition.x = Math.sin(angle + Math.PI) * d + (points[0].x + center.x) / 2;\n cardinalityPosition.y = -Math.cos(angle + Math.PI) * d + (points[0].y + center.y) / 2;\n }\n if (position === 'end_right') {\n cardinalityPosition.x = Math.sin(angle - Math.PI) * d + (points[0].x + center.x) / 2 - 5;\n cardinalityPosition.y = -Math.cos(angle - Math.PI) * d + (points[0].y + center.y) / 2 - 5;\n }\n if (position === 'end_left') {\n cardinalityPosition.x = Math.sin(angle) * d + (points[0].x + center.x) / 2 - 5;\n cardinalityPosition.y = -Math.cos(angle) * d + (points[0].y + center.y) / 2 - 5;\n }\n return cardinalityPosition;\n};\n\nexport const getStylesFromArray = arr => {\n let style = '';\n let labelStyle = '';\n\n for (let i = 0; i < arr.length; i++) {\n if (typeof arr[i] !== 'undefined') {\n // add text properties to label style definition\n if (arr[i].startsWith('color:') || arr[i].startsWith('text-align:')) {\n labelStyle = labelStyle + arr[i] + ';';\n } else {\n style = style + arr[i] + ';';\n }\n }\n }\n\n return { style: style, labelStyle: labelStyle };\n};\n\nlet cnt = 0;\nexport const generateId = () => {\n cnt++;\n return (\n 'id-' +\n Math.random()\n .toString(36)\n .substr(2, 12) +\n '-' +\n cnt\n );\n};\n\nfunction makeid(length) {\n var result = '';\n var characters = '0123456789abcdef';\n var charactersLength = characters.length;\n for (var i = 0; i < length; i++) {\n result += characters.charAt(Math.floor(Math.random() * charactersLength));\n }\n return result;\n}\n\nexport const random = options => {\n return makeid(options.length);\n};\n\n/**\n * @function assignWithDepth\n * Extends the functionality of {@link ObjectConstructor.assign} with the ability to merge arbitrary-depth objects\n * For each key in src with path `k` (recursively) performs an Object.assign(dst[`k`], src[`k`]) with\n * a slight change from the typical handling of undefined for dst[`k`]: instead of raising an error,\n * dst[`k`] is auto-initialized to {} and effectively merged with src[`k`]\n *
' },\n config\n );\n if (common.lineBreakRegex.test(label)) {\n return label;\n }\n const words = label.split(' ');\n const completedLines = [];\n let nextLine = '';\n words.forEach((word, index) => {\n const wordLength = calculateTextWidth(`${word} `, config);\n const nextLineLength = calculateTextWidth(nextLine, config);\n if (wordLength > maxWidth) {\n const { hyphenatedStrings, remainingWord } = breakString(word, maxWidth, '-', config);\n completedLines.push(nextLine, ...hyphenatedStrings);\n nextLine = remainingWord;\n } else if (nextLineLength + wordLength >= maxWidth) {\n completedLines.push(nextLine);\n nextLine = word;\n } else {\n nextLine = [nextLine, word].filter(Boolean).join(' ');\n }\n const currentWord = index + 1;\n const isLastWord = currentWord === words.length;\n if (isLastWord) {\n completedLines.push(nextLine);\n }\n });\n return completedLines.filter(line => line !== '').join(config.joinWith);\n },\n (label, maxWidth, config) =>\n `${label}-${maxWidth}-${config.fontSize}-${config.fontWeight}-${config.fontFamily}-${config.joinWith}`\n);\n\nconst breakString = memoize(\n (word, maxWidth, hyphenCharacter = '-', config) => {\n config = Object.assign(\n { fontSize: 12, fontWeight: 400, fontFamily: 'Arial', margin: 0 },\n config\n );\n const characters = word.split('');\n const lines = [];\n let currentLine = '';\n characters.forEach((character, index) => {\n const nextLine = `${currentLine}${character}`;\n const lineWidth = calculateTextWidth(nextLine, config);\n if (lineWidth >= maxWidth) {\n const currentCharacter = index + 1;\n const isLastLine = characters.length === currentCharacter;\n const hyphenatedNextLine = `${nextLine}${hyphenCharacter}`;\n lines.push(isLastLine ? nextLine : hyphenatedNextLine);\n currentLine = '';\n } else {\n currentLine = nextLine;\n }\n });\n return { hyphenatedStrings: lines, remainingWord: currentLine };\n },\n (word, maxWidth, hyphenCharacter = '-', config) =>\n `${word}-${maxWidth}-${hyphenCharacter}-${config.fontSize}-${config.fontWeight}-${config.fontFamily}`\n);\n\n/**\n * This calculates the text's height, taking into account the wrap breaks and\n * both the statically configured height, width, and the length of the text (in pixels).\n *\n * If the wrapped text text has greater height, we extend the height, so it's\n * value won't overflow.\n *\n * @return - The height for the given text\n * @param text the text to measure\n * @param config - the config for fontSize, fontFamily, and fontWeight all impacting the resulting size\n */\nexport const calculateTextHeight = function(text, config) {\n config = Object.assign(\n { fontSize: 12, fontWeight: 400, fontFamily: 'Arial', margin: 15 },\n config\n );\n return calculateTextDimensions(text, config).height;\n};\n\n/**\n * This calculates the width of the given text, font size and family.\n *\n * @return - The width for the given text\n * @param text - The text to calculate the width of\n * @param config - the config for fontSize, fontFamily, and fontWeight all impacting the resulting size\n */\nexport const calculateTextWidth = function(text, config) {\n config = Object.assign({ fontSize: 12, fontWeight: 400, fontFamily: 'Arial' }, config);\n return calculateTextDimensions(text, config).width;\n};\n\n/**\n * This calculates the dimensions of the given text, font size, font family, font weight, and margins.\n *\n * @return - The width for the given text\n * @param text - The text to calculate the width of\n * @param config - the config for fontSize, fontFamily, fontWeight, and margin all impacting the resulting size\n */\nexport const calculateTextDimensions = memoize(\n function(text, config) {\n config = Object.assign({ fontSize: 12, fontWeight: 400, fontFamily: 'Arial' }, config);\n const { fontSize, fontFamily, fontWeight } = config;\n if (!text) {\n return { width: 0, height: 0 };\n }\n\n // We can't really know if the user supplied font family will render on the user agent;\n // thus, we'll take the max width between the user supplied font family, and a default\n // of sans-serif.\n const fontFamilies = ['sans-serif', fontFamily];\n const lines = text.split(common.lineBreakRegex);\n let dims = [];\n\n const body = select('body');\n // We don't want to leak DOM elements - if a removal operation isn't available\n // for any reason, do not continue.\n if (!body.remove) {\n return { width: 0, height: 0, lineHeight: 0 };\n }\n\n const g = body.append('svg');\n\n for (let fontFamily of fontFamilies) {\n let cheight = 0;\n let dim = { width: 0, height: 0, lineHeight: 0 };\n for (let line of lines) {\n const textObj = getTextObj();\n textObj.text = line;\n const textElem = drawSimpleText(g, textObj)\n .style('font-size', fontSize)\n .style('font-weight', fontWeight)\n .style('font-family', fontFamily);\n\n let bBox = (textElem._groups || textElem)[0][0].getBBox();\n dim.width = Math.round(Math.max(dim.width, bBox.width));\n cheight = Math.round(bBox.height);\n dim.height += cheight;\n dim.lineHeight = Math.round(Math.max(dim.lineHeight, cheight));\n }\n dims.push(dim);\n }\n\n g.remove();\n\n let index =\n isNaN(dims[1].height) ||\n isNaN(dims[1].width) ||\n isNaN(dims[1].lineHeight) ||\n (dims[0].height > dims[1].height &&\n dims[0].width > dims[1].width &&\n dims[0].lineHeight > dims[1].lineHeight)\n ? 0\n : 1;\n return dims[index];\n },\n (text, config) => `${text}-${config.fontSize}-${config.fontWeight}-${config.fontFamily}`\n);\n\nconst d3Attrs = function(d3Elem, attrs) {\n for (let attr of attrs) {\n d3Elem.attr(attr[0], attr[1]);\n }\n};\n\nexport const calculateSvgSizeAttrs = function(height, width, useMaxWidth) {\n let attrs = new Map();\n attrs.set('height', height);\n if (useMaxWidth) {\n attrs.set('width', '100%');\n attrs.set('style', `max-width: ${width}px;`);\n } else {\n attrs.set('width', width);\n }\n return attrs;\n};\n\nexport const configureSvgSize = function(svgElem, height, width, useMaxWidth) {\n const attrs = calculateSvgSizeAttrs(height, width, useMaxWidth);\n d3Attrs(svgElem, attrs);\n};\n\nexport default {\n assignWithDepth,\n wrapLabel,\n calculateTextHeight,\n calculateTextWidth,\n calculateTextDimensions,\n calculateSvgSizeAttrs,\n configureSvgSize,\n detectInit,\n detectDirective,\n detectType,\n isSubstringInArray,\n interpolateToCurve,\n calcLabelPosition,\n calcCardinalityPosition,\n calcTerminalLabelPosition,\n formatUrl,\n getStylesFromArray,\n generateId,\n random,\n memoize,\n runFunc\n};\n","import { adjust } from 'khroma';\n\nexport const mkBorder = (col, darkMode) =>\n darkMode ? adjust(col, { s: -40, l: 10 }) : adjust(col, { s: -40, l: -10 });\n","import { darken, lighten, adjust, invert } from 'khroma';\nimport { mkBorder } from './theme-helpers';\nclass Theme {\n constructor() {\n /** # Base variables */\n /** * background - used to know what the background color is of the diagram. This is used for deducing colors for istance line color. Defaulr value is #f4f4f4. */\n this.background = '#f4f4f4';\n this.darkMode = false;\n\n // this.background = '#0c0c0c';\n // this.darkMode = true;\n this.primaryColor = '#fff4dd';\n // this.background = '#0c0c0c';\n // this.primaryColor = '#1f1f00';\n\n this.noteBkgColor = '#fff5ad';\n this.noteTextColor = '#333';\n\n // dark\n\n // this.primaryColor = '#034694';\n // this.primaryColor = '#f2ee7e';\n // this.primaryColor = '#9f33be';\n // this.primaryColor = '#f0fff0';\n // this.primaryColor = '#fa255e';\n // this.primaryColor = '#ECECFF';\n\n // this.secondaryColor = '#c39ea0';\n // this.tertiaryColor = '#f8e5e5';\n\n // this.secondaryColor = '#dfdfde';\n // this.tertiaryColor = '#CCCCFF';\n\n this.fontFamily = '\"trebuchet ms\", verdana, arial';\n this.fontSize = '16px';\n // this.updateColors();\n }\n updateColors() {\n // The || is to make sure that if the variable has been defiend by a user override that value is to be used\n\n /* Main */\n this.primaryTextColor = this.primaryTextColor || (this.darkMode ? '#ddd' : '#333'); // invert(this.primaryColor);\n this.secondaryColor = this.secondaryColor || adjust(this.primaryColor, { h: -120 });\n this.tertiaryColor = this.tertiaryColor || adjust(this.primaryColor, { h: 180, l: 5 });\n\n this.primaryBorderColor = this.primaryBorderColor || mkBorder(this.primaryColor, this.darkMode);\n this.secondaryBorderColor =\n this.secondaryBorderColor || mkBorder(this.secondaryColor, this.darkMode);\n this.tertiaryBorderColor =\n this.tertiaryBorderColor || mkBorder(this.tertiaryColor, this.darkMode);\n this.noteBorderColor = this.noteBorderColor || mkBorder(this.noteBkgColor, this.darkMode);\n\n this.secondaryTextColor = this.secondaryTextColor || invert(this.secondaryColor);\n this.tertiaryTextColor = this.tertiaryTextColor || invert(this.tertiaryColor);\n this.lineColor = this.lineColor || invert(this.background);\n this.textColor = this.textColor || this.primaryTextColor;\n\n /* Flowchart variables */\n this.nodeBkg = this.nodeBkg || this.primaryColor;\n this.mainBkg = this.mainBkg || this.primaryColor;\n this.nodeBorder = this.nodeBorder || this.primaryBorderColor;\n this.clusterBkg = this.clusterBkg || this.tertiaryColor;\n this.clusterBorder = this.clusterBorder || this.tertiaryBorderColor;\n this.defaultLinkColor = this.defaultLinkColor || this.lineColor;\n this.titleColor = this.titleColor || this.tertiaryTextColor;\n this.edgeLabelBackground =\n this.edgeLabelBackground ||\n (this.darkMode ? darken(this.secondaryColor, 30) : this.secondaryColor);\n this.nodeTextColor = this.nodeTextColor || this.primaryTextColor;\n /* Sequence Diagram variables */\n\n // this.actorBorder = lighten(this.border1, 0.5);\n this.actorBorder = this.actorBorder || this.primaryBorderColor;\n this.actorBkg = this.actorBkg || this.mainBkg;\n this.actorTextColor = this.actorTextColor || this.primaryTextColor;\n this.actorLineColor = this.actorLineColor || 'grey';\n this.labelBoxBkgColor = this.labelBoxBkgColor || this.actorBkg;\n this.signalColor = this.signalColor || this.textColor;\n this.signalTextColor = this.signalTextColor || this.textColor;\n this.labelBoxBorderColor = this.labelBoxBorderColor || this.actorBorder;\n this.labelTextColor = this.labelTextColor || this.actorTextColor;\n this.loopTextColor = this.loopTextColor || this.actorTextColor;\n this.activationBorderColor = this.activationBorderColor || darken(this.secondaryColor, 10);\n this.activationBkgColor = this.activationBkgColor || this.secondaryColor;\n this.sequenceNumberColor = this.sequenceNumberColor || invert(this.lineColor);\n\n /* Gantt chart variables */\n\n this.sectionBkgColor = this.sectionBkgColor || this.tertiaryColor;\n this.altSectionBkgColor = this.altSectionBkgColor || 'white';\n this.sectionBkgColor = this.sectionBkgColor || this.secondaryColor;\n this.sectionBkgColor2 = this.sectionBkgColor2 || this.primaryColor;\n this.taskBorderColor = this.taskBorderColor || this.primaryBorderColor;\n this.taskBkgColor = this.taskBkgColor || this.primaryColor;\n this.activeTaskBorderColor = this.activeTaskBorderColor || this.primaryColor;\n this.activeTaskBkgColor = this.activeTaskBkgColor || lighten(this.primaryColor, 23);\n this.gridColor = this.gridColor || 'lightgrey';\n this.doneTaskBkgColor = this.doneTaskBkgColor || 'lightgrey';\n this.doneTaskBorderColor = this.doneTaskBorderColor || 'grey';\n this.critBorderColor = this.critBorderColor || '#ff8888';\n this.critBkgColor = this.critBkgColor || 'red';\n this.todayLineColor = this.todayLineColor || 'red';\n this.taskTextColor = this.taskTextColor || this.textColor;\n this.taskTextOutsideColor = this.taskTextOutsideColor || this.textColor;\n this.taskTextLightColor = this.taskTextLightColor || this.textColor;\n this.taskTextColor = this.taskTextColor || this.primaryTextColor;\n this.taskTextDarkColor = this.taskTextDarkColor || this.textColor;\n this.taskTextClickableColor = this.taskTextClickableColor || '#003163';\n\n /* state colors */\n this.labelColor = this.labelColor || this.primaryTextColor;\n this.altBackground = this.altBackground || this.tertiaryColor;\n this.errorBkgColor = this.errorBkgColor || this.tertiaryColor;\n this.errorTextColor = this.errorTextColor || this.tertiaryTextColor;\n\n /* class */\n this.classText = this.classText || this.textColor;\n\n /* user-journey */\n this.fillType0 = this.fillType0 || this.primaryColor;\n this.fillType1 = this.fillType1 || this.secondaryColor;\n this.fillType2 = this.fillType2 || adjust(this.primaryColor, { h: 64 });\n this.fillType3 = this.fillType3 || adjust(this.secondaryColor, { h: 64 });\n this.fillType4 = this.fillType4 || adjust(this.primaryColor, { h: -64 });\n this.fillType5 = this.fillType5 || adjust(this.secondaryColor, { h: -64 });\n this.fillType6 = this.fillType6 || adjust(this.primaryColor, { h: 128 });\n this.fillType7 = this.fillType7 || adjust(this.secondaryColor, { h: 128 });\n }\n calculate(overrides) {\n if (typeof overrides !== 'object') {\n // Calculate colors form base colors\n this.updateColors();\n return;\n }\n\n const keys = Object.keys(overrides);\n\n // Copy values from overrides, this is mainly for base colors\n keys.forEach(k => {\n this[k] = overrides[k];\n });\n\n // Calculate colors form base colors\n this.updateColors();\n // Copy values from overrides again in case of an override of derived value\n keys.forEach(k => {\n this[k] = overrides[k];\n });\n }\n}\n\nexport const getThemeVariables = userOverrides => {\n const theme = new Theme();\n theme.calculate(userOverrides);\n return theme;\n};\n","import { invert, lighten, darken, rgba, adjust } from 'khroma';\nimport { mkBorder } from './theme-helpers';\nclass Theme {\n constructor() {\n this.background = '#333';\n this.primaryColor = '#1f2020';\n this.secondaryColor = lighten(this.primaryColor, 16);\n\n this.tertiaryColor = adjust(this.primaryColor, { h: -160 });\n this.primaryBorderColor = mkBorder(this.primaryColor, this.darkMode);\n this.secondaryBorderColor = mkBorder(this.secondaryColor, this.darkMode);\n this.tertiaryBorderColor = mkBorder(this.tertiaryColor, this.darkMode);\n this.primaryTextColor = invert(this.primaryColor);\n this.secondaryTextColor = invert(this.secondaryColor);\n this.tertiaryTextColor = invert(this.tertiaryColor);\n this.lineColor = invert(this.background);\n this.textColor = invert(this.background);\n\n this.mainBkg = '#1f2020';\n this.secondBkg = 'calculated';\n this.mainContrastColor = 'lightgrey';\n this.darkTextColor = lighten(invert('#323D47'), 10);\n this.lineColor = 'calculated';\n this.border1 = '#81B1DB';\n this.border2 = rgba(255, 255, 255, 0.25);\n this.arrowheadColor = 'calculated';\n this.fontFamily = '\"trebuchet ms\", verdana, arial';\n this.fontSize = '16px';\n this.labelBackground = '#181818';\n this.textColor = '#ccc';\n /* Flowchart variables */\n\n this.nodeBkg = 'calculated';\n this.nodeBorder = 'calculated';\n this.clusterBkg = 'calculated';\n this.clusterBorder = 'calculated';\n this.defaultLinkColor = 'calculated';\n this.titleColor = '#F9FFFE';\n this.edgeLabelBackground = 'calculated';\n\n /* Sequence Diagram variables */\n\n this.actorBorder = 'calculated';\n this.actorBkg = 'calculated';\n this.actorTextColor = 'calculated';\n this.actorLineColor = 'calculated';\n this.signalColor = 'calculated';\n this.signalTextColor = 'calculated';\n this.labelBoxBkgColor = 'calculated';\n this.labelBoxBorderColor = 'calculated';\n this.labelTextColor = 'calculated';\n this.loopTextColor = 'calculated';\n this.noteBorderColor = 'calculated';\n this.noteBkgColor = '#fff5ad';\n this.noteTextColor = 'calculated';\n this.activationBorderColor = 'calculated';\n this.activationBkgColor = 'calculated';\n this.sequenceNumberColor = 'black';\n\n /* Gantt chart variables */\n\n this.sectionBkgColor = darken('#EAE8D9', 30);\n this.altSectionBkgColor = 'calculated';\n this.sectionBkgColor2 = '#EAE8D9';\n this.taskBorderColor = rgba(255, 255, 255, 70);\n this.taskBkgColor = 'calculated';\n this.taskTextColor = 'calculated';\n this.taskTextLightColor = 'calculated';\n this.taskTextOutsideColor = 'calculated';\n this.taskTextClickableColor = '#003163';\n this.activeTaskBorderColor = rgba(255, 255, 255, 50);\n this.activeTaskBkgColor = '#81B1DB';\n this.gridColor = 'calculated';\n this.doneTaskBkgColor = 'calculated';\n this.doneTaskBorderColor = 'grey';\n this.critBorderColor = '#E83737';\n this.critBkgColor = '#E83737';\n this.taskTextDarkColor = 'calculated';\n this.todayLineColor = '#DB5757';\n\n /* state colors */\n this.labelColor = 'calculated';\n\n this.errorBkgColor = '#a44141';\n this.errorTextColor = '#ddd';\n }\n updateColors() {\n this.secondBkg = lighten(this.mainBkg, 16);\n this.lineColor = this.mainContrastColor;\n this.arrowheadColor = this.mainContrastColor;\n /* Flowchart variables */\n\n this.nodeBkg = this.mainBkg;\n this.nodeBorder = this.border1;\n this.clusterBkg = this.secondBkg;\n this.clusterBorder = this.border2;\n this.defaultLinkColor = this.lineColor;\n this.edgeLabelBackground = lighten(this.labelBackground, 25);\n\n /* Sequence Diagram variables */\n\n this.actorBorder = this.border1;\n this.actorBkg = this.mainBkg;\n this.actorTextColor = this.mainContrastColor;\n this.actorLineColor = this.mainContrastColor;\n this.signalColor = this.mainContrastColor;\n this.signalTextColor = this.mainContrastColor;\n this.labelBoxBkgColor = this.actorBkg;\n this.labelBoxBorderColor = this.actorBorder;\n this.labelTextColor = this.mainContrastColor;\n this.loopTextColor = this.mainContrastColor;\n this.noteBorderColor = this.border2;\n this.noteTextColor = this.mainBkg;\n this.activationBorderColor = this.border1;\n this.activationBkgColor = this.secondBkg;\n\n /* Gantt chart variables */\n\n this.altSectionBkgColor = this.background;\n this.taskBkgColor = lighten(this.mainBkg, 23);\n this.taskTextColor = this.darkTextColor;\n this.taskTextLightColor = this.mainContrastColor;\n this.taskTextOutsideColor = this.taskTextLightColor;\n this.gridColor = this.mainContrastColor;\n this.doneTaskBkgColor = this.mainContrastColor;\n this.taskTextDarkColor = this.darkTextColor;\n\n /* state colors */\n this.labelColor = this.textColor;\n this.altBackground = lighten(this.background, 20);\n\n this.fillType0 = this.primaryColor;\n this.fillType1 = this.secondaryColor;\n this.fillType2 = adjust(this.primaryColor, { h: 64 });\n this.fillType3 = adjust(this.secondaryColor, { h: 64 });\n this.fillType4 = adjust(this.primaryColor, { h: -64 });\n this.fillType5 = adjust(this.secondaryColor, { h: -64 });\n this.fillType6 = adjust(this.primaryColor, { h: 128 });\n this.fillType7 = adjust(this.secondaryColor, { h: 128 });\n /* class */\n this.classText = this.primaryTextColor;\n }\n calculate(overrides) {\n if (typeof overrides !== 'object') {\n // Calculate colors form base colors\n this.updateColors();\n return;\n }\n\n const keys = Object.keys(overrides);\n\n // Copy values from overrides, this is mainly for base colors\n keys.forEach(k => {\n this[k] = overrides[k];\n });\n\n // Calculate colors form base colors\n this.updateColors();\n // Copy values from overrides again in case of an override of derived value\n keys.forEach(k => {\n this[k] = overrides[k];\n });\n }\n}\n\nexport const getThemeVariables = userOverrides => {\n const theme = new Theme();\n theme.calculate(userOverrides);\n return theme;\n};\n","import { invert, lighten, rgba, adjust } from 'khroma';\nimport { mkBorder } from './theme-helpers';\n\nclass Theme {\n constructor() {\n /* Base variables */\n this.background = '#f4f4f4';\n this.primaryColor = '#ECECFF';\n\n this.secondaryColor = adjust(this.primaryColor, { h: 120 });\n this.secondaryColor = '#ffffde';\n this.tertiaryColor = adjust(this.primaryColor, { h: -160 });\n this.primaryBorderColor = mkBorder(this.primaryColor, this.darkMode);\n this.secondaryBorderColor = mkBorder(this.secondaryColor, this.darkMode);\n this.tertiaryBorderColor = mkBorder(this.tertiaryColor, this.darkMode);\n // this.noteBorderColor = mkBorder(this.noteBkgColor, this.darkMode);\n\n this.primaryTextColor = invert(this.primaryColor);\n this.secondaryTextColor = invert(this.secondaryColor);\n this.tertiaryTextColor = invert(this.tertiaryColor);\n this.lineColor = invert(this.background);\n this.textColor = invert(this.background);\n\n this.background = 'white';\n this.mainBkg = '#ECECFF';\n this.secondBkg = '#ffffde';\n this.lineColor = '#333333';\n this.border1 = '#9370DB';\n this.border2 = '#aaaa33';\n this.arrowheadColor = '#333333';\n this.fontFamily = '\"trebuchet ms\", verdana, arial';\n this.fontSize = '16px';\n this.labelBackground = '#e8e8e8';\n this.textColor = '#333';\n\n /* Flowchart variables */\n\n this.nodeBkg = 'calculated';\n this.nodeBorder = 'calculated';\n this.clusterBkg = 'calculated';\n this.clusterBorder = 'calculated';\n this.defaultLinkColor = 'calculated';\n this.titleColor = 'calculated';\n this.edgeLabelBackground = 'calculated';\n\n /* Sequence Diagram variables */\n\n this.actorBorder = 'calculated';\n this.actorBkg = 'calculated';\n this.actorTextColor = 'black';\n this.actorLineColor = 'grey';\n this.signalColor = 'calculated';\n this.signalTextColor = 'calculated';\n this.labelBoxBkgColor = 'calculated';\n this.labelBoxBorderColor = 'calculated';\n this.labelTextColor = 'calculated';\n this.loopTextColor = 'calculated';\n this.noteBorderColor = 'calculated';\n this.noteBkgColor = '#fff5ad';\n this.noteTextColor = 'calculated';\n this.activationBorderColor = '#666';\n this.activationBkgColor = '#f4f4f4';\n this.sequenceNumberColor = 'white';\n\n /* Gantt chart variables */\n\n this.sectionBkgColor = 'calculated';\n this.altSectionBkgColor = 'calculated';\n this.sectionBkgColor2 = 'calculated';\n this.taskBorderColor = 'calculated';\n this.taskBkgColor = 'calculated';\n this.taskTextLightColor = 'calculated';\n this.taskTextColor = this.taskTextLightColor;\n this.taskTextDarkColor = 'calculated';\n this.taskTextOutsideColor = this.taskTextDarkColor;\n this.taskTextClickableColor = 'calculated';\n this.activeTaskBorderColor = 'calculated';\n this.activeTaskBkgColor = 'calculated';\n this.gridColor = 'calculated';\n this.doneTaskBkgColor = 'calculated';\n this.doneTaskBorderColor = 'calculated';\n this.critBorderColor = 'calculated';\n this.critBkgColor = 'calculated';\n this.todayLineColor = 'calculated';\n\n this.sectionBkgColor = rgba(102, 102, 255, 0.49);\n this.altSectionBkgColor = 'white';\n this.sectionBkgColor2 = '#fff400';\n this.taskBorderColor = '#534fbc';\n this.taskBkgColor = '#8a90dd';\n this.taskTextLightColor = 'white';\n this.taskTextColor = 'calculated';\n this.taskTextDarkColor = 'black';\n this.taskTextOutsideColor = 'calculated';\n this.taskTextClickableColor = '#003163';\n this.activeTaskBorderColor = '#534fbc';\n this.activeTaskBkgColor = '#bfc7ff';\n this.gridColor = 'lightgrey';\n this.doneTaskBkgColor = 'lightgrey';\n this.doneTaskBorderColor = 'grey';\n this.critBorderColor = '#ff8888';\n this.critBkgColor = 'red';\n this.todayLineColor = 'red';\n\n /* state colors */\n this.labelColor = 'black';\n this.errorBkgColor = '#552222';\n this.errorTextColor = '#552222';\n this.updateColors();\n }\n updateColors() {\n /* Flowchart variables */\n\n this.nodeBkg = this.mainBkg;\n this.nodeBorder = this.border1; // border 1\n this.clusterBkg = this.secondBkg;\n this.clusterBorder = this.border2;\n this.defaultLinkColor = this.lineColor;\n this.titleColor = this.textColor;\n this.edgeLabelBackground = this.labelBackground;\n\n /* Sequence Diagram variables */\n\n // this.actorBorder = lighten(this.border1, 0.5);\n this.actorBorder = lighten(this.border1, 23);\n this.actorBkg = this.mainBkg;\n this.labelBoxBkgColor = this.actorBkg;\n this.signalColor = this.textColor;\n this.signalTextColor = this.textColor;\n this.labelBoxBorderColor = this.actorBorder;\n this.labelTextColor = this.actorTextColor;\n this.loopTextColor = this.actorTextColor;\n this.noteBorderColor = this.border2;\n this.noteTextColor = this.actorTextColor;\n\n /* Gantt chart variables */\n\n this.taskTextColor = this.taskTextLightColor;\n this.taskTextOutsideColor = this.taskTextDarkColor;\n\n /* state colors */\n /* class */\n this.classText = this.primaryTextColor;\n /* journey */\n this.fillType0 = this.primaryColor;\n this.fillType1 = this.secondaryColor;\n this.fillType2 = adjust(this.primaryColor, { h: 64 });\n this.fillType3 = adjust(this.secondaryColor, { h: 64 });\n this.fillType4 = adjust(this.primaryColor, { h: -64 });\n this.fillType5 = adjust(this.secondaryColor, { h: -64 });\n this.fillType6 = adjust(this.primaryColor, { h: 128 });\n this.fillType7 = adjust(this.secondaryColor, { h: 128 });\n }\n calculate(overrides) {\n if (typeof overrides !== 'object') {\n // Calculate colors form base colors\n this.updateColors();\n return;\n }\n\n const keys = Object.keys(overrides);\n\n // Copy values from overrides, this is mainly for base colors\n keys.forEach(k => {\n this[k] = overrides[k];\n });\n\n // Calculate colors form base colors\n this.updateColors();\n // Copy values from overrides again in case of an override of derived value\n keys.forEach(k => {\n this[k] = overrides[k];\n });\n }\n}\n\nexport const getThemeVariables = userOverrides => {\n const theme = new Theme();\n theme.calculate(userOverrides);\n return theme;\n};\n","import { darken, lighten, adjust, invert } from 'khroma';\nimport { mkBorder } from './theme-helpers';\nclass Theme {\n constructor() {\n /* Base vales */\n this.background = '#f4f4f4';\n this.primaryColor = '#cde498';\n this.secondaryColor = '#cdffb2';\n this.background = 'white';\n this.mainBkg = '#cde498';\n this.secondBkg = '#cdffb2';\n this.lineColor = 'green';\n this.border1 = '#13540c';\n this.border2 = '#6eaa49';\n this.arrowheadColor = 'green';\n this.fontFamily = '\"trebuchet ms\", verdana, arial';\n this.fontSize = '16px';\n\n this.tertiaryColor = lighten('#cde498', 10);\n this.primaryBorderColor = mkBorder(this.primaryColor, this.darkMode);\n this.secondaryBorderColor = mkBorder(this.secondaryColor, this.darkMode);\n this.tertiaryBorderColor = mkBorder(this.tertiaryColor, this.darkMode);\n this.primaryTextColor = invert(this.primaryColor);\n this.secondaryTextColor = invert(this.secondaryColor);\n this.tertiaryTextColor = invert(this.primaryColor);\n this.lineColor = invert(this.background);\n this.textColor = invert(this.background);\n\n /* Flowchart variables */\n this.nodeBkg = 'calculated';\n this.nodeBorder = 'calculated';\n this.clusterBkg = 'calculated';\n this.clusterBorder = 'calculated';\n this.defaultLinkColor = 'calculated';\n this.titleColor = '#333';\n this.edgeLabelBackground = '#e8e8e8';\n\n /* Sequence Diagram variables */\n\n this.actorBorder = 'calculated';\n this.actorBkg = 'calculated';\n this.actorTextColor = 'black';\n this.actorLineColor = 'grey';\n this.signalColor = '#333';\n this.signalTextColor = '#333';\n this.labelBoxBkgColor = 'calculated';\n this.labelBoxBorderColor = '#326932';\n this.labelTextColor = 'calculated';\n this.loopTextColor = 'calculated';\n this.noteBorderColor = 'calculated';\n this.noteBkgColor = '#fff5ad';\n this.noteTextColor = 'calculated';\n this.activationBorderColor = '#666';\n this.activationBkgColor = '#f4f4f4';\n this.sequenceNumberColor = 'white';\n\n /* Gantt chart variables */\n\n this.sectionBkgColor = '#6eaa49';\n this.altSectionBkgColor = 'white';\n this.sectionBkgColor2 = '#6eaa49';\n this.taskBorderColor = 'calculated';\n this.taskBkgColor = '#487e3a';\n this.taskTextLightColor = 'white';\n this.taskTextColor = 'calculated';\n this.taskTextDarkColor = 'black';\n this.taskTextOutsideColor = 'calculated';\n this.taskTextClickableColor = '#003163';\n this.activeTaskBorderColor = 'calculated';\n this.activeTaskBkgColor = 'calculated';\n this.gridColor = 'lightgrey';\n this.doneTaskBkgColor = 'lightgrey';\n this.doneTaskBorderColor = 'grey';\n this.critBorderColor = '#ff8888';\n this.critBkgColor = 'red';\n this.todayLineColor = 'red';\n\n /* state colors */\n this.labelColor = 'black';\n\n this.errorBkgColor = '#552222';\n this.errorTextColor = '#552222';\n }\n updateColors() {\n /* Flowchart variables */\n\n this.nodeBkg = this.mainBkg;\n this.nodeBorder = this.border1;\n this.clusterBkg = this.secondBkg;\n this.clusterBorder = this.border2;\n this.defaultLinkColor = this.lineColor;\n\n /* Sequence Diagram variables */\n\n this.actorBorder = darken(this.mainBkg, 20);\n this.actorBkg = this.mainBkg;\n this.labelBoxBkgColor = this.actorBkg;\n this.labelTextColor = this.actorTextColor;\n this.loopTextColor = this.actorTextColor;\n this.noteBorderColor = this.border2;\n this.noteTextColor = this.actorTextColor;\n\n /* Gantt chart variables */\n\n this.taskBorderColor = this.border1;\n this.taskTextColor = this.taskTextLightColor;\n this.taskTextOutsideColor = this.taskTextDarkColor;\n this.activeTaskBorderColor = this.taskBorderColor;\n this.activeTaskBkgColor = this.mainBkg;\n\n /* state colors */\n /* class */\n this.classText = this.primaryTextColor;\n /* journey */\n this.fillType0 = this.primaryColor;\n this.fillType1 = this.secondaryColor;\n this.fillType2 = adjust(this.primaryColor, { h: 64 });\n this.fillType3 = adjust(this.secondaryColor, { h: 64 });\n this.fillType4 = adjust(this.primaryColor, { h: -64 });\n this.fillType5 = adjust(this.secondaryColor, { h: -64 });\n this.fillType6 = adjust(this.primaryColor, { h: 128 });\n this.fillType7 = adjust(this.secondaryColor, { h: 128 });\n }\n calculate(overrides) {\n if (typeof overrides !== 'object') {\n // Calculate colors form base colors\n this.updateColors();\n return;\n }\n\n const keys = Object.keys(overrides);\n\n // Copy values from overrides, this is mainly for base colors\n keys.forEach(k => {\n this[k] = overrides[k];\n });\n\n // Calculate colors form base colors\n this.updateColors();\n // Copy values from overrides again in case of an override of derived value\n keys.forEach(k => {\n this[k] = overrides[k];\n });\n }\n}\n\nexport const getThemeVariables = userOverrides => {\n const theme = new Theme();\n theme.calculate(userOverrides);\n return theme;\n};\n","import { invert, darken, lighten, adjust } from 'khroma';\nimport { mkBorder } from './theme-helpers';\n\n// const Color = require ( 'khroma/dist/color' ).default\n// Color.format.hex.stringify(Color.parse('hsl(210, 66.6666666667%, 95%)')); // => \"#EAF2FB\"\n\nclass Theme {\n constructor() {\n this.primaryColor = '#eee';\n this.contrast = '#26a';\n this.secondaryColor = lighten(this.contrast, 55);\n this.background = '#ffffff';\n\n // this.secondaryColor = adjust(this.primaryColor, { h: 120 });\n this.tertiaryColor = adjust(this.primaryColor, { h: -160 });\n this.primaryBorderColor = mkBorder(this.primaryColor, this.darkMode);\n this.secondaryBorderColor = mkBorder(this.secondaryColor, this.darkMode);\n this.tertiaryBorderColor = mkBorder(this.tertiaryColor, this.darkMode);\n // this.noteBorderColor = mkBorder(this.noteBkgColor, this.darkMode);\n\n this.primaryTextColor = invert(this.primaryColor);\n this.secondaryTextColor = invert(this.secondaryColor);\n this.tertiaryTextColor = invert(this.tertiaryColor);\n this.lineColor = invert(this.background);\n this.textColor = invert(this.background);\n\n this.altBackground = lighten(this.contrast, 55);\n this.mainBkg = '#eee';\n this.secondBkg = 'calculated';\n this.lineColor = '#666';\n this.border1 = '#999';\n this.border2 = 'calculated';\n this.note = '#ffa';\n this.text = '#333';\n this.critical = '#d42';\n this.done = '#bbb';\n this.arrowheadColor = '#333333';\n this.fontFamily = '\"trebuchet ms\", verdana, arial';\n this.fontSize = '16px';\n\n /* Flowchart variables */\n\n this.nodeBkg = 'calculated';\n this.nodeBorder = 'calculated';\n this.clusterBkg = 'calculated';\n this.clusterBorder = 'calculated';\n this.defaultLinkColor = 'calculated';\n this.titleColor = 'calculated';\n this.edgeLabelBackground = 'white';\n\n /* Sequence Diagram variables */\n\n this.actorBorder = 'calculated';\n this.actorBkg = 'calculated';\n this.actorTextColor = 'calculated';\n this.actorLineColor = 'calculated';\n this.signalColor = 'calculated';\n this.signalTextColor = 'calculated';\n this.labelBoxBkgColor = 'calculated';\n this.labelBoxBorderColor = 'calculated';\n this.labelTextColor = 'calculated';\n this.loopTextColor = 'calculated';\n this.noteBorderColor = 'calculated';\n this.noteBkgColor = 'calculated';\n this.noteTextColor = 'calculated';\n this.activationBorderColor = '#666';\n this.activationBkgColor = '#f4f4f4';\n this.sequenceNumberColor = 'white';\n\n /* Gantt chart variables */\n\n this.sectionBkgColor = 'calculated';\n this.altSectionBkgColor = 'white';\n this.sectionBkgColor2 = 'calculated';\n this.taskBorderColor = 'calculated';\n this.taskBkgColor = 'calculated';\n this.taskTextLightColor = 'white';\n this.taskTextColor = 'calculated';\n this.taskTextDarkColor = 'calculated';\n this.taskTextOutsideColor = 'calculated';\n this.taskTextClickableColor = '#003163';\n this.activeTaskBorderColor = 'calculated';\n this.activeTaskBkgColor = 'calculated';\n this.gridColor = 'calculated';\n this.doneTaskBkgColor = 'calculated';\n this.doneTaskBorderColor = 'calculated';\n this.critBkgColor = 'calculated';\n this.critBorderColor = 'calculated';\n this.todayLineColor = 'calculated';\n\n /* state colors */\n this.labelColor = 'black';\n\n this.errorBkgColor = '#552222';\n this.errorTextColor = '#552222';\n }\n updateColors() {\n this.secondBkg = lighten(this.contrast, 55);\n this.border2 = this.contrast;\n\n /* Flowchart variables */\n\n this.nodeBkg = this.mainBkg;\n this.nodeBorder = this.border1;\n this.clusterBkg = this.secondBkg;\n this.clusterBorder = this.border2;\n this.defaultLinkColor = this.lineColor;\n this.titleColor = this.text;\n\n /* Sequence Diagram variables */\n\n this.actorBorder = lighten(this.border1, 23);\n this.actorBkg = this.mainBkg;\n this.actorTextColor = this.text;\n this.actorLineColor = this.lineColor;\n this.signalColor = this.text;\n this.signalTextColor = this.text;\n this.labelBoxBkgColor = this.actorBkg;\n this.labelBoxBorderColor = this.actorBorder;\n this.labelTextColor = this.text;\n this.loopTextColor = this.text;\n this.noteBorderColor = darken(this.note, 60);\n this.noteBkgColor = this.note;\n this.noteTextColor = this.actorTextColor;\n\n /* Gantt chart variables */\n\n this.sectionBkgColor = lighten(this.contrast, 30);\n this.sectionBkgColor2 = lighten(this.contrast, 30);\n\n this.taskBorderColor = darken(this.contrast, 10);\n\n this.taskBkgColor = this.contrast;\n this.taskTextColor = this.taskTextLightColor;\n this.taskTextDarkColor = this.text;\n this.taskTextOutsideColor = this.taskTextDarkColor;\n this.activeTaskBorderColor = this.taskBorderColor;\n this.activeTaskBkgColor = this.mainBkg;\n this.gridColor = lighten(this.border1, 30);\n\n this.doneTaskBkgColor = this.done;\n this.doneTaskBorderColor = this.lineColor;\n this.critBkgColor = this.critical;\n this.critBorderColor = darken(this.critBkgColor, 10);\n\n this.todayLineColor = this.critBkgColor;\n\n /* state colors */\n /* class */\n this.classText = this.primaryTextColor;\n /* journey */\n this.fillType0 = this.primaryColor;\n this.fillType1 = this.secondaryColor;\n this.fillType2 = adjust(this.primaryColor, { h: 64 });\n this.fillType3 = adjust(this.secondaryColor, { h: 64 });\n this.fillType4 = adjust(this.primaryColor, { h: -64 });\n this.fillType5 = adjust(this.secondaryColor, { h: -64 });\n this.fillType6 = adjust(this.primaryColor, { h: 128 });\n this.fillType7 = adjust(this.secondaryColor, { h: 128 });\n }\n calculate(overrides) {\n if (typeof overrides !== 'object') {\n // Calculate colors form base colors\n this.updateColors();\n return;\n }\n\n const keys = Object.keys(overrides);\n\n // Copy values from overrides, this is mainly for base colors\n keys.forEach(k => {\n this[k] = overrides[k];\n });\n\n // Calculate colors form base colors\n this.updateColors();\n // Copy values from overrides again in case of an override of derived value\n keys.forEach(k => {\n this[k] = overrides[k];\n });\n }\n}\n\nexport const getThemeVariables = userOverrides => {\n const theme = new Theme();\n theme.calculate(userOverrides);\n return theme;\n};\n","import { getThemeVariables as baseThemeVariables } from './theme-base';\nimport { getThemeVariables as darkThemeVariables } from './theme-dark';\nimport { getThemeVariables as defaultThemeVariables } from './theme-default';\nimport { getThemeVariables as forestThemeVariables } from './theme-forest';\nimport { getThemeVariables as neutralThemeVariables } from './theme-neutral';\n\nexport default {\n base: {\n getThemeVariables: baseThemeVariables\n },\n dark: {\n getThemeVariables: darkThemeVariables\n },\n default: {\n getThemeVariables: defaultThemeVariables\n },\n forest: {\n getThemeVariables: forestThemeVariables\n },\n neutral: {\n getThemeVariables: neutralThemeVariables\n }\n};\n","import theme from './themes';\n/**\n * **Configuration methods in Mermaid version 8.6.0 have been updated, to learn more[[click here](8.6.0_docs.md)].**\n *\n * ## **What follows are config instructions for older versions**\n * These are the default options which can be overridden with the initialization call like so:\n * **Example 1:**\n * \n * mermaid.initialize({\n * flowchart:{\n * htmlLabels: false\n * }\n * });\n *
\n *\n * **Example 2:**\n * \n * <script>\n * var config = {\n * startOnLoad:true,\n * flowchart:{\n * useMaxWidth:true,\n * htmlLabels:true,\n * curve:'cardinal',\n * },\n *\n * securityLevel:'loose',\n * };\n * mermaid.initialize(config);\n * </script>\n *
\n * A summary of all options and their defaults is found [here](#mermaidapi-configuration-defaults). A description of each option follows below.\n *\n * @name Configuration\n */\nconst config = {\n /** theme , the CSS style sheet\n *\n * theme , the CSS style sheet\n *\n *| Parameter | Description |Type | Required | Values|\n *| --- | --- | --- | --- | --- |\n *| Theme |Built in Themes| String | Optional | Values include, default, forest, dark, neutral, null|\n *\n ***Notes:**To disable any pre-defined mermaid theme, use \"null\".\n * \n * \"theme\": \"forest\",\n * \"themeCSS\": \".node rect { fill: red; }\"\n *
\n */\n theme: 'default',\n themeVariables: theme['default'].getThemeVariables(),\n themeCSS: undefined,\n /* **maxTextSize** - The maximum allowed size of the users text diamgram */\n maxTextSize: 50000,\n\n /**\n *| Parameter | Description |Type | Required | Values|\n *| --- | --- | --- | --- | --- |\n *|fontFamily | specifies the font to be used in the rendered diagrams| String | Required | Verdana, Arial, Trebuchet MS,|\n *\n ***notes: Default value is \\\\\"trebuchet ms\\\\\".\n */\n fontFamily: '\"trebuchet ms\", verdana, arial;',\n\n /**\n *| Parameter | Description |Type | Required | Values|\n *| --- | --- | --- | --- | --- |\n *| logLevel |This option decides the amount of logging to be used.| String | Required | 1, 2, 3, 4, 5 |\n *\n *\n ***Notes:**\n *- debug: 1.\n *- info: 2.\n *- warn: 3.\n *- error: 4.\n *- fatal: 5(default).\n */\n logLevel: 5,\n\n /**\n *| Parameter | Description |Type | Required | Values|\n *| --- | --- | --- | --- | --- |\n *| securitylevel | Level of trust for parsed diagram|String | Required | Strict, Loose, antiscript |\n *\n ***Notes:\n *- **strict**: (**default**) tags in text are encoded, click functionality is disabeled\n *- **loose**: tags in text are allowed, click functionality is enabled\n *- **antiscript**: html tags in text are allowed, (only script element is removed), click functionality is enabled\n */\n securityLevel: 'strict',\n\n /**\n *| Parameter | Description |Type | Required | Values|\n *| --- | --- | --- | --- | --- |\n *| startOnLoad| Dictates whether mermaind starts on Page load | Boolean | Required | True, False |\n *\n ***Notes:**\n ***Default value: true**\n */\n startOnLoad: true,\n\n /**\n *| Parameter | Description |Type | Required |Values|\n *| --- | --- | --- | --- | --- |\n *| arrowMarkerAbsolute | Controls whether or arrow markers in html code are absolute paths or anchors | Boolean | Required | True, False |\n *\n *\n *## Notes**: This matters if you are using base tag settings.\n ***Default value: false**.\n */\n arrowMarkerAbsolute: false,\n\n /**\n * This option controls which currentConfig keys are considered _secure_ and can only be changed via\n * call to mermaidAPI.initialize. Calls to mermaidAPI.reinitialize cannot make changes to\n * the `secure` keys in the current currentConfig. This prevents malicious graph directives from\n * overriding a site's default security.\n */\n secure: ['secure', 'securityLevel', 'startOnLoad', 'maxTextSize'],\n\n /**\n * The object containing configurations specific for flowcharts\n */\n flowchart: {\n /**\n *| Parameter | Description |Type | Required | Values|\n *| --- | --- | --- | --- | --- |\n *| diagramPadding | amount of padding around the diagram as a whole | Integer | Required | Any Positive Value |\n *\n ***Notes:**The amount of padding around the diagram as a whole so that embedded diagrams have margins, expressed in pixels\n ***Default value: 8**.\n */\n diagramPadding: 8,\n\n /**\n *| Parameter | Description |Type | Required | Values|\n *| --- | --- | --- | --- | --- |\n *| htmlLabels | Flag for setting whether or not a html tag should be used for rendering labels on the edges. | Boolean| Required | True, False|\n *\n ***Notes: Default value: true**.\n */\n htmlLabels: true,\n\n /**\n *| Parameter | Description |Type | Required | Values|\n *| --- | --- | --- | --- | --- |\n *| nodeSpacing | Defines the spacing between nodes on the same level | Integer| Required | Any positive Numbers |\n *\n ***Notes:\n *Pertains to horizontal spacing for TB (top to bottom) or BT (bottom to top) graphs, and the vertical spacing for LR as well as RL graphs.**\n ***Default value 50**.\n */\n nodeSpacing: 50,\n\n /**\n *| Parameter | Description |Type | Required | Values|\n *| --- | --- | --- | --- | --- |\n *| rankSpacing | Defines the spacing between nodes on different levels | Integer | Required| Any Positive Numbers |\n *\n ***Notes: pertains to vertical spacing for TB (top to bottom) or BT (bottom to top), and the horizontal spacing for LR as well as RL graphs.\n ***Default value 50**.\n */\n rankSpacing: 50,\n\n /**\n *| Parameter | Description |Type | Required | Values|\n *| --- | --- | --- | --- | --- |\n *| curve | Defines how mermaid renders curves for flowcharts. | String | Required | Basis, Linear, Cardinal|\n *\n ***Notes:\n *Default Vaue: Linear**\n */\n curve: 'linear',\n // Only used in new experimental rendering\n // represents the padding between the labels and the shape\n padding: 15,\n\n /**\n *| Parameter | Description |Type | Required | Values|\n *| --- | --- | --- | --- | --- |\n *| useMaxWidth | See notes | Boolean | 4 | True, False |\n *\n ***Notes:**when this flag is set the height and width is set to 100% and is then scaling with the\n *available space if not the absolute space required is used.\n *\n ***Default value true**.\n */\n useMaxWidth: true\n },\n\n /**\n * The object containing configurations specific for sequence diagrams\n */\n sequence: {\n /**\n * widt of the activation rect\n * **Default value 10**.\n */\n activationWidth: 10,\n\n /**\n *| Parameter | Description |Type | Required | Values|\n *| --- | --- | --- | --- | --- |\n *| diagramMarginX | margin to the right and left of the sequence diagram | Integer | Required | Any Positive Values |\n *\n ***Notes:**\n ***Default value 50**.\n */\n diagramMarginX: 50,\n\n /**\n *| Parameter | Description |Type | Required | Values|\n *| --- | --- | --- | --- | --- |\n *| diagramMarginY | Margin to the over and under the sequence diagram | Integer | Required | Any Positive Values|\n *\n ***Notes:**\n ***Default value 10**.\n */\n diagramMarginY: 10,\n\n /**\n *| Parameter | Description |Type | Required | Values|\n *| --- | --- | --- | --- | --- |\n *| actorMargin | Margin between actors. | Integer | Required | Any Positive Value |\n *\n ***Notes:**\n ***Default value 50**.\n */\n actorMargin: 50,\n\n /**\n *| Parameter | Description |Type | Required | Values|\n *| --- | --- | --- | --- | --- |\n *| width | Width of actor boxes | Integer | Required | Any Positive Value |\n *\n ***Notes:**\n ***Default value 150**.\n */\n width: 150,\n\n /**\n *| Parameter | Description |Type | Required | Values|\n *| --- | --- | --- | --- | --- |\n *| height | Height of actor boxes | Integer | Required | Any Positive Value|\n *\n ***Notes:**\n ***Default value 65**..\n */\n height: 65,\n\n /**\n *| Parameter | Description |Type | Required | Values|\n *| --- | --- | --- | --- | --- |\n *| boxMargin | Margin around loop boxes | Integer | Required | Any Positive Value |\n *\n ***Notes:**\n *\n ***Default value 10**.\n */\n boxMargin: 10,\n\n /**\n *| Parameter | Description |Type | Required | Values|\n *| --- | --- | --- | --- | --- |\n *| boxTextMargin| margin around the text in loop/alt/opt boxes | Integer | Required| Any Positive Value|\n *\n ***Notes:**\n *\n ***Default value 5**.\n */\n boxTextMargin: 5,\n\n /**\n *| Parameter | Description |Type | Required | Values|\n *| --- | --- | --- | --- | --- |\n *| noteMargin | margin around notes. | Integer | Required | Any Positive Value |\n *\n ***Notes:**\n *\n ***Default value 10**.\n */\n noteMargin: 10,\n\n /**\n *| Parameter | Description |Type | Required | Values|\n *| --- | --- | --- | --- | --- |\n *| messageMargin | Space between messages. | Integer | Required | Any Positive Value |\n *\n ***Notes:**\n *\n *Space between messages.\n ***Default value 35**.\n */\n messageMargin: 35,\n\n /**\n *| Parameter | Description |Type | Required | Values|\n *| --- | --- | --- | --- | --- |\n *| messageAlign | Multiline message alignment | Integer | Required | left, center, right |\n *\n ***Notes:**center **default**\n */\n messageAlign: 'center',\n\n /**\n *| Parameter | Description |Type | Required | Values|\n *| --- | --- | --- | --- | --- |\n *| mirrorActors | mirror actors under diagram. | Boolean| Required | True, False |\n *\n ***Notes:**\n *\n ***Default value true**.\n */\n mirrorActors: true,\n\n /**\n *| Parameter | Description |Type | Required | Values|\n *| --- | --- | --- | --- | --- |\n *| bottomMarginAdj | Prolongs the edge of the diagram downwards. | Integer | Required | Any Positive Value |\n *\n ***Notes:**Depending on css styling this might need adjustment.\n ***Default value 1**.\n */\n bottomMarginAdj: 1,\n\n /**\n *| Parameter | Description |Type | Required | Values|\n *| --- | --- | --- | --- | --- |\n *| useMaxWidth | See Notes | Boolean | Required | True, False |\n *\n ***Notes:**\n *when this flag is set to true, the height and width is set to 100% and is then scaling with the\n *available space. If set to false, the absolute space required is used.\n ***Default value: True**.\n */\n useMaxWidth: true,\n\n /**\n *| Parameter | Description |Type | Required | Values|\n *| --- | --- | --- | --- | --- |\n *| rightAngles | display curve arrows as right angles| Boolean | Required | True, False |\n *\n ***Notes:**\n *\n *This will display arrows that start and begin at the same node as right angles, rather than a curve\n ***Default value false**.\n */\n rightAngles: false,\n /**\n *| Parameter | Description |Type | Required | Values|\n *| --- | --- | --- | --- | --- |\n *| showSequenceNumbers | This will show the node numbers | Boolean | Required | True, False |\n *\n ***Notes:**\n ***Default value false**.\n */\n showSequenceNumbers: false,\n /**\n *| Parameter | Description |Type | Required | Values|\n *| --- | --- | --- | --- | --- |\n *| actorFontSize| This sets the font size of the actor's description | Integer | Require | Any Positive Value |\n *\n ***Notes:**\n ***Default value 14**..\n */\n actorFontSize: 14,\n /**\n *| Parameter | Description |Type | Required | Values|\n *| --- | --- | --- | --- | --- |\n *| actorFontFamily |This sets the font family of the actor's description | 3 | 4 | Open-Sans, Sans-Serif |\n *\n ***Notes:**\n ***Default value \"Open-Sans\", \"sans-serif\"**.\n */\n actorFontFamily: '\"Open-Sans\", \"sans-serif\"',\n /**\n * This sets the font weight of the actor's description\n * **Default value 400.\n */\n actorFontWeight: 400,\n /**\n *| Parameter | Description |Type | Required | Values|\n *| --- | --- | --- | --- | --- |\n *| noteFontSize |This sets the font size of actor-attached notes. | Integer | Required | Any Positive Value |\n *\n ***Notes:**\n ***Default value 14**..\n */\n noteFontSize: 14,\n /**\n *| Parameter | Description |Type | Required | Values|\n *| --- | --- | --- | --- | --- |\n *| noteFontFamily| This sets the font family of actor-attached notes. | String | Required | trebuchet ms, verdana, arial |\n *\n ***Notes:**\n ***Default value: trebuchet ms **.\n */\n noteFontFamily: '\"trebuchet ms\", verdana, arial',\n /**\n * This sets the font weight of the note's description\n * **Default value 400.\n */\n noteFontWeight: 400,\n /**\n *| Parameter | Description |Type | Required | Values|\n *| --- | --- | --- | --- | --- |\n *| noteAlign | This sets the text alignment of actor-attached notes. | string | required | left, center, right|\n *\n ***Notes:**\n ***Default value center**.\n */\n noteAlign: 'center',\n /**\n *| Parameter | Description |Type | Required | Values|\n *| --- | --- | --- | --- | --- |\n *| messageFontSize | This sets the font size of actor messages. | Integer | Required | Any Positive Number |\n *\n ***Notes:**\n ***Default value 16**.\n */\n messageFontSize: 16,\n /**\n *| Parameter | Description |Type | Required | Values|\n *| --- | --- | --- | --- | --- |\n *| messageFontFamily | This sets the font family of actor messages. | String| Required | trebuchet ms\", verdana, aria |\n *\n ***Notes:**\n ***Default value:\"trebuchet ms**.\n */\n messageFontFamily: '\"trebuchet ms\", verdana, arial',\n /**\n * This sets the font weight of the message's description\n * **Default value 400.\n */\n messageFontWeight: 400,\n /**\n * This sets the auto-wrap state for the diagram\n * **Default value false.\n */\n wrap: false,\n /**\n * This sets the auto-wrap padding for the diagram (sides only)\n * **Default value 10.\n */\n wrapPadding: 10,\n /**\n * This sets the width of the loop-box (loop, alt, opt, par)\n * **Default value 50.\n */\n labelBoxWidth: 50,\n /**\n * This sets the height of the loop-box (loop, alt, opt, par)\n * **Default value 20.\n */\n labelBoxHeight: 20,\n messageFont: function() {\n return {\n fontFamily: this.messageFontFamily,\n fontSize: this.messageFontSize,\n fontWeight: this.messageFontWeight\n };\n },\n noteFont: function() {\n return {\n fontFamily: this.noteFontFamily,\n fontSize: this.noteFontSize,\n fontWeight: this.noteFontWeight\n };\n },\n actorFont: function() {\n return {\n fontFamily: this.actorFontFamily,\n fontSize: this.actorFontSize,\n fontWeight: this.actorFontWeight\n };\n }\n },\n\n /**\n * The object containing configurations specific for gantt diagrams*\n */\n gantt: {\n /**\n *### titleTopMargin\n *\n *| Parameter | Description |Type | Required | Values|\n *| --- | --- | --- | --- | --- |\n *| titleTopMargin | Margin top for the text over the gantt diagram | Integer | Required | Any Positive Value |\n *\n ***Notes:**\n ***Default value 25**.\n */\n titleTopMargin: 25,\n\n /**\n *| Parameter | Description |Type | Required | Values|\n *| --- | --- | --- | --- | --- |\n *| barHeight | The height of the bars in the graph | Integer | Required | Any Positive Value |\n *\n ***Notes:**\n ***Default value 20**.\n */\n barHeight: 20,\n\n /**\n *| Parameter | Description |Type | Required | Values|\n *| --- | --- | --- | --- | --- |\n *| barGap | The margin between the different activities in the gantt diagram. | Integer | Optional |Any Positive Value |\n *\n ***Notes:**\n ***Default value 4**.\n */\n barGap: 4,\n\n /**\n *| Parameter | Description |Type | Required | Values|\n *| --- | --- | --- | --- | --- |\n *| topPadding | Margin between title and gantt diagram and between axis and gantt diagram. | Integer | Required | Any Positive Value |\n *\n ***Notes:**\n ***Default value 50**.\n */\n topPadding: 50,\n\n /**\n *| Parameter | Description |Type | Required | Values|\n *| --- | --- | --- | --- | --- |\n *| leftPadding | The space allocated for the section name to the left of the activities. | Integer| Required | Any Positive Value |\n *\n ***Notes:**\n ***Default value 75**.\n */\n leftPadding: 75,\n\n /**\n *| Parameter | Description |Type | Required | Values|\n *| --- | --- | --- | --- | --- |\n *| gridLineStartPadding | Vertical starting position of the grid lines. | Integer | Required | Any Positive Value |\n *\n ***Notes:**\n ***Default value 35**.\n */\n gridLineStartPadding: 35,\n\n /**\n *| Parameter | Description |Type | Required | Values|\n *| --- | --- | --- | --- | --- |\n *| fontSize | Font size| Integer | Required | Any Positive Value |\n *\n ***Notes:**\n ***Default value 11**.\n */\n fontSize: 11,\n\n /**\n *| Parameter | Description |Type | Required | Values|\n *| --- | --- | --- | --- | --- |\n *| fontFamily | font Family | string | required |\"Open-Sans\", \"sans-serif\" |\n *\n ***Notes:**\n *\n ***Default value '\"Open-Sans\", \"sans-serif\"'**.\n */\n fontFamily: '\"Open-Sans\", \"sans-serif\"',\n\n /**\n *| Parameter | Description |Type | Required | Values|\n *| --- | --- | --- | --- | --- |\n *| numberSectionStyles | The number of alternating section styles | Integer | 4 | Any Positive Value |\n *\n ***Notes:**\n ***Default value 4**.\n */\n numberSectionStyles: 4,\n\n /**\n *| Parameter | Description |Type | Required | Values|\n *| --- | --- | --- | --- | --- |\n *| axisFormat | Datetime format of the axis. | 3 | Required | Date in yy-mm-dd |\n *\n ***Notes:**\n *\n * This might need adjustment to match your locale and preferences\n ***Default value '%Y-%m-%d'**.\n */\n axisFormat: '%Y-%m-%d',\n\n /**\n *| Parameter | Description |Type | Required | Values|\n *| --- | --- | --- | --- | --- |\n *| useMaxWidth | See notes | Boolean | 4 | True, False |\n *\n ***Notes:**when this flag is set the height and width is set to 100% and is then scaling with the\n *available space if not the absolute space required is used.\n *\n ***Default value true**.\n */\n useMaxWidth: true,\n\n useWidth: undefined\n },\n\n /**\n * The object containing configurations specific for journey diagrams\n */\n journey: {\n /**\n *| Parameter | Description |Type | Required | Values|\n *| --- | --- | --- | --- | --- |\n *| diagramMarginX | margin to the right and left of the sequence diagram | Integer | Required | Any Positive Value |\n *\n ***Notes:**\n ***Default value 50**.\n */\n diagramMarginX: 50,\n\n /**\n *| Parameter | Description |Type | Required | Values|\n *| --- | --- | --- | --- | --- |\n *| diagramMarginY | margin to the over and under the sequence diagram. | Integer | Required | Any Positive Value|\n *\n ***Notes:**\n ***Default value 10**..\n */\n diagramMarginY: 10,\n\n /**\n *| Parameter | Description |Type | Required | Values|\n *| --- | --- | --- | --- | --- |\n *| actorMargin | Margin between actors. | Integer | Required | Any Positive Value|\n *\n ***Notes:**\n ***Default value 50**.\n */\n actorMargin: 50,\n\n /**\n *| Parameter | Description |Type | Required | Values|\n *| --- | --- | --- | --- | --- |\n *| width | Width of actor boxes | Integer | Required | Any Positive Value |\n *\n ***Notes:**\n ***Default value 150**.\n */\n width: 150,\n\n /**\n *| Parameter | Description |Type | Required | Values|\n *| --- | --- | --- | --- | --- |\n *| height | Height of actor boxes | Integer | Required | Any Positive Value |\n *\n ***Notes:**\n ***Default value 65**.\n */\n height: 65,\n\n /**\n *| Parameter | Description |Type | Required | Values|\n *| --- | --- | --- | --- | --- |\n *| boxMargin | Margin around loop boxes | Integer | Required | Any Positive Value |\n *\n ***Notes:**\n ***Default value 10**.\n */\n boxMargin: 10,\n\n /**\n *| Parameter | Description |Type | Required | Values|\n *| --- | --- | --- | --- | --- |\n *| boxTextMargin | margin around the text in loop/alt/opt boxes | Integer | Required | Any Positive Value |\n *\n ***Notes:**\n */\n boxTextMargin: 5,\n\n /**\n *| Parameter | Description |Type | Required | Values|\n *| --- | --- | --- | --- | --- |\n *| noteMargin | margin around notes. | Integer | Required | Any Positive Value |\n *\n ***Notes:**\n ***Default value 10**.\n */\n noteMargin: 10,\n\n /**\n *| Parameter | Description |Type | Required | Values|\n *| --- | --- | --- | --- | --- |\n *| messageMargin |Space between messages. | Integer | Required | Any Positive Value |\n *\n ***Notes:**\n *\n *Space between messages.\n ***Default value 35**.\n */\n messageMargin: 35,\n\n /**\n *| Parameter | Description |Type | Required | Values|\n *| --- | --- | --- | --- | --- |\n *| messageAlign |Multiline message alignment | 3 | 4 | left, center, right |\n *\n ***Notes:**default:center**\n */\n messageAlign: 'center',\n\n /**\n *| Parameter | Description |Type | Required | Values|\n *| --- | --- | --- | --- | --- |\n *| bottomMarginAdj | Prolongs the edge of the diagram downwards. | Integer | 4 | Any Positive Value |\n *\n ***Notes:**Depending on css styling this might need adjustment.\n ***Default value 1**.\n */\n bottomMarginAdj: 1,\n\n /**\n *| Parameter | Description |Type | Required | Values|\n *| --- | --- | --- | --- | --- |\n *| useMaxWidth | See notes | Boolean | 4 | True, False |\n *\n ***Notes:**when this flag is set the height and width is set to 100% and is then scaling with the\n *available space if not the absolute space required is used.\n *\n ***Default value true**.\n */\n useMaxWidth: true,\n\n /**\n *| Parameter | Description |Type | Required | Values|\n *| --- | --- | --- | --- | --- |\n *| rightAngles | Curved Arrows become Right Angles, | 3 | 4 | True, False |\n *\n ***Notes:**This will display arrows that start and begin at the same node as right angles, rather than a curves\n ***Default value false**.\n */\n rightAngles: false\n },\n class: {\n arrowMarkerAbsolute: false,\n /**\n *| Parameter | Description |Type | Required | Values|\n *| --- | --- | --- | --- | --- |\n *| useMaxWidth | See notes | Boolean | 4 | True, False |\n *\n ***Notes:**when this flag is set the height and width is set to 100% and is then scaling with the\n *available space if not the absolute space required is used.\n *\n ***Default value true**.\n */\n useMaxWidth: true\n },\n git: {\n arrowMarkerAbsolute: false,\n\n useWidth: undefined,\n\n /**\n *| Parameter | Description |Type | Required | Values|\n *| --- | --- | --- | --- | --- |\n *| useMaxWidth | See notes | Boolean | 4 | True, False |\n *\n ***Notes:**when this flag is set the height and width is set to 100% and is then scaling with the\n *available space if not the absolute space required is used.\n *\n ***Default value true**.\n */\n useMaxWidth: true\n },\n state: {\n dividerMargin: 10,\n sizeUnit: 5,\n padding: 8,\n textHeight: 10,\n titleShift: -15,\n noteMargin: 10,\n forkWidth: 70,\n forkHeight: 7,\n // Used\n miniPadding: 2,\n // Font size factor, this is used to guess the width of the edges labels before rendering by dagre\n // layout. This might need updating if/when switching font\n fontSizeFactor: 5.02,\n fontSize: 24,\n labelHeight: 16,\n edgeLengthFactor: '20',\n compositTitleSize: 35,\n radius: 5,\n /**\n *| Parameter | Description |Type | Required | Values|\n *| --- | --- | --- | --- | --- |\n *| useMaxWidth | See notes | Boolean | 4 | True, False |\n *\n ***Notes:**when this flag is set the height and width is set to 100% and is then scaling with the\n *available space if not the absolute space required is used.\n *\n ***Default value true**.\n */\n useMaxWidth: true\n },\n\n /**\n * The object containing configurations specific for entity relationship diagrams\n */\n er: {\n /**\n *| Parameter | Description |Type | Required | Values|\n *| --- | --- | --- | --- | --- |\n *| diagramPadding | amount of padding around the diagram as a whole | Integer | Required | Any Positive Value |\n *\n ***Notes:**The amount of padding around the diagram as a whole so that embedded diagrams have margins, expressed in pixels\n ***Default value: 20**.\n */\n diagramPadding: 20,\n\n /**\n *| Parameter | Description |Type | Required | Values|\n *| --- | --- | --- | --- | --- |\n *| layoutDirection | Directional bias for layout of entities. | String | Required | \"TB\", \"BT\",\"LR\",\"RL\" |\n *\n ***Notes:**\n *'TB' for Top-Bottom, 'BT'for Bottom-Top, 'LR' for Left-Right, or 'RL' for Right to Left.\n * T = top, B = bottom, L = left, and R = right.\n ***Default value: TB **.\n */\n layoutDirection: 'TB',\n\n /**\n *| Parameter | Description |Type | Required | Values|\n *| --- | --- | --- | --- | --- |\n *| minEntityWidth | The mimimum width of an entity box, | Integer | Required| Any Positive Value |\n *\n ***Notes:**expressed in pixels\n ***Default value: 100**.\n */\n minEntityWidth: 100,\n\n /**\n *| Parameter | Description |Type | Required | Values|\n *| --- | --- | --- | --- | --- |\n *| minEntityHeight| The minimum height of an entity box, | Integer | 4 | Any Positive Value |\n *\n ***Notes:**expressed in pixels\n ***Default value: 75 **\n */\n minEntityHeight: 75,\n\n /**\n *| Parameter | Description |Type | Required | Values|\n *| --- | --- | --- | --- | --- |\n *| entityPadding|minimum internal padding betweentext in box and box borders| Integer | 4 | Any Positive Value |\n *\n ***Notes:**The minimum internal padding betweentext in an entity box and the enclosing box borders, expressed in pixels.\n ***Default value: 15 **\n */\n entityPadding: 15,\n\n /**\n *| Parameter | Description |Type | Required | Values|\n *| --- | --- | --- | --- | --- |\n *| stroke | Stroke color of box edges and lines | String | 4 | Any recognized color |\n ***Default value: gray **\n */\n stroke: 'gray',\n\n /**\n *| Parameter | Description |Type | Required | Values|\n *| --- | --- | --- | --- | --- |\n *| fill | Fill color of entity boxes | String | 4 | Any recognized color |\n *\n ***Notes:**\n ***Default value:'honeydew'**\n */\n fill: 'honeydew',\n\n /**\n *| Parameter | Description |Type | Required | Values|\n *| --- | --- | --- | --- | --- |\n *| fontSize| Font Size in pixels| Integer | | Any Positive Value |\n *\n ***Notes:**Font size (expressed as an integer representing a number of pixels)\n ***Default value: 12 **\n */\n fontSize: 12,\n\n /**\n *| Parameter | Description |Type | Required | Values|\n *| --- | --- | --- | --- | --- |\n *| useMaxWidth | See Notes | Boolean | Required | true, false |\n *\n ***Notes:**\n *When this flag is set to true, the diagram width is locked to 100% and\n *scaled based on available space. If set to false, the diagram reserves its\n *absolute width.\n ***Default value: true**.\n */\n useMaxWidth: true\n },\n\n /**\n * The object containing configurations specific for pie diagrams\n */\n pie: {\n useWidth: undefined,\n\n /**\n *| Parameter | Description |Type | Required | Values|\n *| --- | --- | --- | --- | --- |\n *| useMaxWidth | See Notes | Boolean | Required | true, false |\n *\n ***Notes:**\n *When this flag is set to true, the diagram width is locked to 100% and\n *scaled based on available space. If set to false, the diagram reserves its\n *absolute width.\n ***Default value: true**.\n */\n useMaxWidth: true\n }\n};\n\nconfig.class.arrowMarkerAbsolute = config.arrowMarkerAbsolute;\nconfig.git.arrowMarkerAbsolute = config.arrowMarkerAbsolute;\n\nexport default config;\n","import { assignWithDepth } from './utils';\nimport { logger } from './logger';\nimport theme from './themes';\nimport config from './defaultConfig';\n\n// debugger;\n\nexport const defaultConfig = Object.freeze(config);\n\nlet siteConfig = assignWithDepth({}, defaultConfig);\nlet siteConfigDelta;\nlet directives = [];\nlet currentConfig = assignWithDepth({}, defaultConfig);\n\nexport const updateCurrentConfig = (siteCfg, _directives) => {\n // start with config beeing the siteConfig\n let cfg = assignWithDepth({}, siteCfg);\n // let sCfg = assignWithDepth(defaultConfig, siteConfigDelta);\n\n // Join directives\n let sumOfDirectives = {};\n for (let i = 0; i < _directives.length; i++) {\n const d = _directives[i];\n sanitize(d);\n\n // Apply the data from the directive where the the overrides the themeVaraibles\n sumOfDirectives = assignWithDepth(sumOfDirectives, d);\n }\n\n cfg = assignWithDepth(cfg, sumOfDirectives);\n\n if (sumOfDirectives.theme) {\n const themeVariables = assignWithDepth(\n siteConfigDelta.themeVariables || {},\n sumOfDirectives.themeVariables\n );\n cfg.themeVariables = theme[cfg.theme].getThemeVariables(themeVariables);\n }\n\n // if (cfg.theme && theme[cfg.theme]) {\n // let tVars = assignWithDepth({}, cfg.themeVariables);\n // tVars = assignWithDepth(tVars, themeVariables);\n // const variables = theme[cfg.theme].getThemeVariables(tVars);\n // cfg.themeVariables = variables;\n // }\n\n currentConfig = cfg;\n return cfg;\n};\n/**\n *## setSiteConfig\n *| Function | Description | Type | Values |\n *| --------- | ------------------- | ------- | ------------------ |\n *| setSiteConfig|Sets the siteConfig to desired values | Put Request | Any Values, except ones in secure array|\n ***Notes:**\n *Sets the siteConfig. The siteConfig is a protected configuration for repeat use. Calls to reset() will reset\n *the currentConfig to siteConfig. Calls to reset(configApi.defaultConfig) will reset siteConfig and currentConfig\n *to the defaultConfig\n *Note: currentConfig is set in this function\n **Default value: At default, will mirror Global Config**\n * @param conf - the base currentConfig to use as siteConfig\n * @returns {*} - the siteConfig\n */\nexport const setSiteConfig = conf => {\n siteConfig = assignWithDepth({}, defaultConfig);\n siteConfig = assignWithDepth(siteConfig, conf);\n\n if (conf.theme) {\n siteConfig.themeVariables = theme[conf.theme].getThemeVariables(conf.themeVariables);\n }\n\n currentConfig = updateCurrentConfig(siteConfig, directives);\n return siteConfig;\n};\n\nexport const setSiteConfigDelta = conf => {\n siteConfigDelta = assignWithDepth({}, conf);\n};\nexport const updateSiteConfig = conf => {\n siteConfig = assignWithDepth(siteConfig, conf);\n updateCurrentConfig(siteConfig, directives);\n\n return siteConfig;\n};\n/**\n *## getSiteConfig\n *| Function | Description | Type | Values |\n *| --------- | ------------------- | ------- | ------------------ |\n *| setSiteConfig|Returns the current siteConfig base configuration | Get Request | Returns Any Values in siteConfig|\n ***Notes**:\n *Returns **any** values in siteConfig.\n * @returns {*}\n */\nexport const getSiteConfig = () => {\n return assignWithDepth({}, siteConfig);\n};\n/**\n *## setConfig\n *| Function | Description | Type | Values |\n *| --------- | ------------------- | ------- | ------------------ |\n *| setSiteConfig|Sets the siteConfig to desired values | Put Request| Any Values, except ones in secure array|\n ***Notes**:\n *Sets the currentConfig. The parameter conf is sanitized based on the siteConfig.secure keys. Any\n *values found in conf with key found in siteConfig.secure will be replaced with the corresponding\n *siteConfig value.\n * @param conf - the potential currentConfig\n * @returns {*} - the currentConfig merged with the sanitized conf\n */\nexport const setConfig = conf => {\n // sanitize(conf);\n // Object.keys(conf).forEach(key => {\n // const manipulator = manipulators[key];\n // conf[key] = manipulator ? manipulator(conf[key]) : conf[key];\n // });\n\n assignWithDepth(currentConfig, conf);\n\n return getConfig();\n};\n\n/**\n * ## getConfig\n *| Function | Description | Type | Return Values |\n *| --------- | ------------------- | ------- | ------------------ |\n *| getConfig |Obtains the currentConfig | Get Request | Any Values from currentConfig|\n ***Notes**:\n *Returns **any** the currentConfig\n * @returns {*} - the currentConfig\n */\nexport const getConfig = () => {\n return assignWithDepth({}, currentConfig);\n};\n/**\n *## sanitize\n *| Function | Description | Type | Values |\n *| --------- | ------------------- | ------- | ------------------ |\n *| sanitize |Sets the siteConfig to desired values. | Put Request |None|\n *Ensures options parameter does not attempt to override siteConfig secure keys\n *Note: modifies options in-place\n * @param options - the potential setConfig parameter\n */\nexport const sanitize = options => {\n Object.keys(siteConfig.secure).forEach(key => {\n if (typeof options[siteConfig.secure[key]] !== 'undefined') {\n // DO NOT attempt to print options[siteConfig.secure[key]] within `${}` as a malicious script\n // can exploit the logger's attempt to stringify the value and execute arbitrary code\n logger.debug(\n `Denied attempt to modify a secure key ${siteConfig.secure[key]}`,\n options[siteConfig.secure[key]]\n );\n delete options[siteConfig.secure[key]];\n }\n });\n};\n\nexport const addDirective = directive => {\n if (directive.fontFamily) {\n if (!directive.themeVariables) {\n directive.themeVariables = { fontFamily: directive.fontFamily };\n } else {\n if (!directive.themeVariables.fontFamily) {\n directive.themeVariables = { fontFamily: directive.fontFamily };\n }\n }\n }\n directives.push(directive);\n updateCurrentConfig(siteConfig, directives);\n};\n\n/**\n *## reset\n *| Function | Description | Type | Required | Values |\n *| --------- | ------------------- | ------- | -------- | ------------------ |\n *| reset|Resets currentConfig to conf| Put Request | Required | None|\n *\n *| Parameter | Description |Type | Required | Values|\n *| --- | --- | --- | --- | --- |\n *| conf| base set of values, which currentConfig coul be **reset** to.| Dictionary | Required | Any Values, with respect to the secure Array|\n *\n **Notes :\n (default: current siteConfig ) (optional, default `getSiteConfig()`)\n * @param conf the base currentConfig to reset to (default: current siteConfig ) (optional, default `getSiteConfig()`)\n */\nexport const reset = () => {\n // Replace current config with siteConfig\n directives = [];\n updateCurrentConfig(siteConfig, directives);\n};\n","import { select } from 'd3';\nimport utils from '../../utils';\nimport * as configApi from '../../config';\nimport common from '../common/common';\nimport mermaidAPI from '../../mermaidAPI';\nimport { logger } from '../../logger';\n\nconst MERMAID_DOM_ID_PREFIX = 'flowchart-';\nlet vertexCounter = 0;\nlet config = configApi.getConfig();\nlet vertices = {};\nlet edges = [];\nlet classes = [];\nlet subGraphs = [];\nlet subGraphLookup = {};\nlet tooltips = {};\nlet subCount = 0;\nlet firstGraphFlag = true;\nlet direction;\n\nlet version; // As in graph\n\n// Functions to be run after graph rendering\nlet funs = [];\n\nexport const parseDirective = function(statement, context, type) {\n mermaidAPI.parseDirective(this, statement, context, type);\n};\n\n/**\n * Function to lookup domId from id in the graph definition.\n * @param id\n * @public\n */\nexport const lookUpDomId = function(id) {\n const veritceKeys = Object.keys(vertices);\n for (let i = 0; i < veritceKeys.length; i++) {\n if (vertices[veritceKeys[i]].id === id) {\n return vertices[veritceKeys[i]].domId;\n }\n }\n return id;\n};\n\n/**\n * Function called by parser when a node definition has been found\n * @param id\n * @param text\n * @param type\n * @param style\n * @param classes\n */\nexport const addVertex = function(_id, text, type, style, classes) {\n let txt;\n let id = _id;\n if (typeof id === 'undefined') {\n return;\n }\n if (id.trim().length === 0) {\n return;\n }\n\n // if (id[0].match(/\\d/)) id = MERMAID_DOM_ID_PREFIX + id;\n\n if (typeof vertices[id] === 'undefined') {\n vertices[id] = {\n id: id,\n domId: MERMAID_DOM_ID_PREFIX + id + '-' + vertexCounter,\n styles: [],\n classes: []\n };\n }\n vertexCounter++;\n if (typeof text !== 'undefined') {\n config = configApi.getConfig();\n txt = common.sanitizeText(text.trim(), config);\n\n // strip quotes if string starts and ends with a quote\n if (txt[0] === '\"' && txt[txt.length - 1] === '\"') {\n txt = txt.substring(1, txt.length - 1);\n }\n\n vertices[id].text = txt;\n } else {\n if (typeof vertices[id].text === 'undefined') {\n vertices[id].text = _id;\n }\n }\n if (typeof type !== 'undefined') {\n vertices[id].type = type;\n }\n if (typeof style !== 'undefined') {\n if (style !== null) {\n style.forEach(function(s) {\n vertices[id].styles.push(s);\n });\n }\n }\n if (typeof classes !== 'undefined') {\n if (classes !== null) {\n classes.forEach(function(s) {\n vertices[id].classes.push(s);\n });\n }\n }\n};\n\n/**\n * Function called by parser when a link/edge definition has been found\n * @param start\n * @param end\n * @param type\n * @param linktext\n */\nexport const addSingleLink = function(_start, _end, type, linktext) {\n let start = _start;\n let end = _end;\n // if (start[0].match(/\\d/)) start = MERMAID_DOM_ID_PREFIX + start;\n // if (end[0].match(/\\d/)) end = MERMAID_DOM_ID_PREFIX + end;\n // logger.info('Got edge...', start, end);\n\n const edge = { start: start, end: end, type: undefined, text: '' };\n linktext = type.text;\n\n if (typeof linktext !== 'undefined') {\n edge.text = common.sanitizeText(linktext.trim(), config);\n\n // strip quotes if string starts and exnds with a quote\n if (edge.text[0] === '\"' && edge.text[edge.text.length - 1] === '\"') {\n edge.text = edge.text.substring(1, edge.text.length - 1);\n }\n }\n\n if (typeof type !== 'undefined') {\n edge.type = type.type;\n edge.stroke = type.stroke;\n edge.length = type.length;\n }\n edges.push(edge);\n};\nexport const addLink = function(_start, _end, type, linktext) {\n let i, j;\n for (i = 0; i < _start.length; i++) {\n for (j = 0; j < _end.length; j++) {\n addSingleLink(_start[i], _end[j], type, linktext);\n }\n }\n};\n\n/**\n * Updates a link's line interpolation algorithm\n * @param pos\n * @param interpolate\n */\nexport const updateLinkInterpolate = function(positions, interp) {\n positions.forEach(function(pos) {\n if (pos === 'default') {\n edges.defaultInterpolate = interp;\n } else {\n edges[pos].interpolate = interp;\n }\n });\n};\n\n/**\n * Updates a link with a style\n * @param pos\n * @param style\n */\nexport const updateLink = function(positions, style) {\n positions.forEach(function(pos) {\n if (pos === 'default') {\n edges.defaultStyle = style;\n } else {\n if (utils.isSubstringInArray('fill', style) === -1) {\n style.push('fill:none');\n }\n edges[pos].style = style;\n }\n });\n};\n\nexport const addClass = function(id, style) {\n if (typeof classes[id] === 'undefined') {\n classes[id] = { id: id, styles: [], textStyles: [] };\n }\n\n if (typeof style !== 'undefined') {\n if (style !== null) {\n style.forEach(function(s) {\n if (s.match('color')) {\n const newStyle1 = s.replace('fill', 'bgFill');\n const newStyle2 = newStyle1.replace('color', 'fill');\n classes[id].textStyles.push(newStyle2);\n }\n classes[id].styles.push(s);\n });\n }\n }\n};\n\n/**\n * Called by parser when a graph definition is found, stores the direction of the chart.\n * @param dir\n */\nexport const setDirection = function(dir) {\n direction = dir;\n if (direction.match(/.*)) {\n direction = 'RL';\n }\n if (direction.match(/.*\\^/)) {\n direction = 'BT';\n }\n if (direction.match(/.*>/)) {\n direction = 'LR';\n }\n if (direction.match(/.*v/)) {\n direction = 'TB';\n }\n};\n\n/**\n * Called by parser when a special node is found, e.g. a clickable element.\n * @param ids Comma separated list of ids\n * @param className Class to add\n */\nexport const setClass = function(ids, className) {\n ids.split(',').forEach(function(_id) {\n // let id = version === 'gen-2' ? lookUpDomId(_id) : _id;\n let id = _id;\n // if (_id[0].match(/\\d/)) id = MERMAID_DOM_ID_PREFIX + id;\n if (typeof vertices[id] !== 'undefined') {\n vertices[id].classes.push(className);\n }\n\n if (typeof subGraphLookup[id] !== 'undefined') {\n subGraphLookup[id].classes.push(className);\n }\n });\n};\n\nconst setTooltip = function(ids, tooltip) {\n ids.split(',').forEach(function(id) {\n if (typeof tooltip !== 'undefined') {\n tooltips[version === 'gen-1' ? lookUpDomId(id) : id] = common.sanitizeText(tooltip, config);\n }\n });\n};\n\nconst setClickFun = function(id, functionName) {\n let domId = lookUpDomId(id);\n // if (_id[0].match(/\\d/)) id = MERMAID_DOM_ID_PREFIX + id;\n if (configApi.getConfig().securityLevel !== 'loose') {\n return;\n }\n if (typeof functionName === 'undefined') {\n return;\n }\n if (typeof vertices[id] !== 'undefined') {\n vertices[id].haveCallback = true;\n funs.push(function() {\n const elem = document.querySelector(`[id=\"${domId}\"]`);\n if (elem !== null) {\n elem.addEventListener(\n 'click',\n function() {\n utils.runFunc(functionName, id);\n },\n false\n );\n }\n });\n }\n};\n\n/**\n * Called by parser when a link is found. Adds the URL to the vertex data.\n * @param ids Comma separated list of ids\n * @param linkStr URL to create a link for\n * @param tooltip Tooltip for the clickable element\n */\nexport const setLink = function(ids, linkStr, tooltip, target) {\n ids.split(',').forEach(function(id) {\n if (typeof vertices[id] !== 'undefined') {\n vertices[id].link = utils.formatUrl(linkStr, config);\n vertices[id].linkTarget = target;\n }\n });\n setTooltip(ids, tooltip);\n setClass(ids, 'clickable');\n};\nexport const getTooltip = function(id) {\n return tooltips[id];\n};\n\n/**\n * Called by parser when a click definition is found. Registers an event handler.\n * @param ids Comma separated list of ids\n * @param functionName Function to be called on click\n * @param tooltip Tooltip for the clickable element\n */\nexport const setClickEvent = function(ids, functionName, tooltip) {\n ids.split(',').forEach(function(id) {\n setClickFun(id, functionName);\n });\n setTooltip(ids, tooltip);\n setClass(ids, 'clickable');\n};\n\nexport const bindFunctions = function(element) {\n funs.forEach(function(fun) {\n fun(element);\n });\n};\nexport const getDirection = function() {\n return direction.trim();\n};\n/**\n * Retrieval function for fetching the found nodes after parsing has completed.\n * @returns {{}|*|vertices}\n */\nexport const getVertices = function() {\n return vertices;\n};\n\n/**\n * Retrieval function for fetching the found links after parsing has completed.\n * @returns {{}|*|edges}\n */\nexport const getEdges = function() {\n return edges;\n};\n\n/**\n * Retrieval function for fetching the found class definitions after parsing has completed.\n * @returns {{}|*|classes}\n */\nexport const getClasses = function() {\n return classes;\n};\n\nconst setupToolTips = function(element) {\n let tooltipElem = select('.mermaidTooltip');\n if ((tooltipElem._groups || tooltipElem)[0][0] === null) {\n tooltipElem = select('body')\n .append('div')\n .attr('class', 'mermaidTooltip')\n .style('opacity', 0);\n }\n\n const svg = select(element).select('svg');\n\n const nodes = svg.selectAll('g.node');\n nodes\n .on('mouseover', function() {\n const el = select(this);\n const title = el.attr('title');\n\n // Dont try to draw a tooltip if no data is provided\n if (title === null) {\n return;\n }\n const rect = this.getBoundingClientRect();\n\n tooltipElem\n .transition()\n .duration(200)\n .style('opacity', '.9');\n tooltipElem\n .html(el.attr('title'))\n .style('left', window.scrollX + rect.left + (rect.right - rect.left) / 2 + 'px')\n .style('top', window.scrollY + rect.top - 14 + document.body.scrollTop + 'px');\n el.classed('hover', true);\n })\n .on('mouseout', function() {\n tooltipElem\n .transition()\n .duration(500)\n .style('opacity', 0);\n const el = select(this);\n el.classed('hover', false);\n });\n};\nfuns.push(setupToolTips);\n\n/**\n * Clears the internal graph db so that a new graph can be parsed.\n */\nexport const clear = function(ver) {\n vertices = {};\n classes = {};\n edges = [];\n funs = [];\n funs.push(setupToolTips);\n subGraphs = [];\n subGraphLookup = {};\n subCount = 0;\n tooltips = [];\n firstGraphFlag = true;\n version = ver || 'gen-1';\n};\nexport const setGen = ver => {\n version = ver || 'gen-1';\n};\n/**\n *\n * @returns {string}\n */\nexport const defaultStyle = function() {\n return 'fill:#ffa;stroke: #f66; stroke-width: 3px; stroke-dasharray: 5, 5;fill:#ffa;stroke: #666;';\n};\n\n/**\n * Clears the internal graph db so that a new graph can be parsed.\n */\nexport const addSubGraph = function(_id, list, _title) {\n let id = _id.trim();\n let title = _title;\n if (_id === _title && _title.match(/\\s/)) {\n id = undefined;\n }\n function uniq(a) {\n const prims = { boolean: {}, number: {}, string: {} };\n const objs = [];\n\n return a.filter(function(item) {\n const type = typeof item;\n if (item.trim() === '') {\n return false;\n }\n if (type in prims) {\n return prims[type].hasOwnProperty(item) ? false : (prims[type][item] = true); // eslint-disable-line\n } else {\n return objs.indexOf(item) >= 0 ? false : objs.push(item);\n }\n });\n }\n\n let nodeList = [];\n\n nodeList = uniq(nodeList.concat.apply(nodeList, list));\n if (version === 'gen-1') {\n logger.warn('LOOKING UP');\n for (let i = 0; i < nodeList.length; i++) {\n nodeList[i] = lookUpDomId(nodeList[i]);\n }\n }\n\n id = id || 'subGraph' + subCount;\n // if (id[0].match(/\\d/)) id = lookUpDomId(id);\n title = title || '';\n title = common.sanitizeText(title, config);\n subCount = subCount + 1;\n const subGraph = { id: id, nodes: nodeList, title: title.trim(), classes: [] };\n\n console.log('Adding', subGraph.id, subGraph.nodes);\n\n /**\n * Deletes an id from all subgraphs\n */\n // const del = _id => {\n // subGraphs.forEach(sg => {\n // const pos = sg.nodes.indexOf(_id);\n // if (pos >= 0) {\n // sg.nodes.splice(pos, 1);\n // }\n // });\n // };\n\n // // Removes the members of this subgraph from any other subgraphs, a node only belong to one subgraph\n // subGraph.nodes.forEach(_id => del(_id));\n\n // Remove the members in the new subgraph if they already belong to another subgraph\n subGraph.nodes = makeUniq(subGraph, subGraphs).nodes;\n subGraphs.push(subGraph);\n subGraphLookup[id] = subGraph;\n return id;\n};\n\nconst getPosForId = function(id) {\n for (let i = 0; i < subGraphs.length; i++) {\n if (subGraphs[i].id === id) {\n return i;\n }\n }\n return -1;\n};\nlet secCount = -1;\nconst posCrossRef = [];\nconst indexNodes2 = function(id, pos) {\n const nodes = subGraphs[pos].nodes;\n secCount = secCount + 1;\n if (secCount > 2000) {\n return;\n }\n posCrossRef[secCount] = pos;\n // Check if match\n if (subGraphs[pos].id === id) {\n return {\n result: true,\n count: 0\n };\n }\n\n let count = 0;\n let posCount = 1;\n while (count < nodes.length) {\n const childPos = getPosForId(nodes[count]);\n // Ignore regular nodes (pos will be -1)\n if (childPos >= 0) {\n const res = indexNodes2(id, childPos);\n if (res.result) {\n return {\n result: true,\n count: posCount + res.count\n };\n } else {\n posCount = posCount + res.count;\n }\n }\n count = count + 1;\n }\n\n return {\n result: false,\n count: posCount\n };\n};\n\nexport const getDepthFirstPos = function(pos) {\n return posCrossRef[pos];\n};\nexport const indexNodes = function() {\n secCount = -1;\n if (subGraphs.length > 0) {\n indexNodes2('none', subGraphs.length - 1, 0);\n }\n};\n\nexport const getSubGraphs = function() {\n return subGraphs;\n};\n\nexport const firstGraph = () => {\n if (firstGraphFlag) {\n firstGraphFlag = false;\n return true;\n }\n return false;\n};\n\nconst destructStartLink = _str => {\n let str = _str.trim();\n let type = 'arrow_open';\n\n switch (str[0]) {\n case '<':\n type = 'arrow_point';\n str = str.slice(1);\n break;\n case 'x':\n type = 'arrow_cross';\n str = str.slice(1);\n break;\n case 'o':\n type = 'arrow_circle';\n str = str.slice(1);\n break;\n }\n\n let stroke = 'normal';\n\n if (str.indexOf('=') !== -1) {\n stroke = 'thick';\n }\n\n if (str.indexOf('.') !== -1) {\n stroke = 'dotted';\n }\n\n return { type, stroke };\n};\n\nconst countChar = (char, str) => {\n const length = str.length;\n let count = 0;\n for (let i = 0; i < length; ++i) {\n if (str[i] === char) {\n ++count;\n }\n }\n return count;\n};\n\nconst destructEndLink = _str => {\n const str = _str.trim();\n let line = str.slice(0, -1);\n let type = 'arrow_open';\n\n switch (str.slice(-1)) {\n case 'x':\n type = 'arrow_cross';\n if (str[0] === 'x') {\n type = 'double_' + type;\n line = line.slice(1);\n }\n break;\n case '>':\n type = 'arrow_point';\n if (str[0] === '<') {\n type = 'double_' + type;\n line = line.slice(1);\n }\n break;\n case 'o':\n type = 'arrow_circle';\n if (str[0] === 'o') {\n type = 'double_' + type;\n line = line.slice(1);\n }\n break;\n }\n\n let stroke = 'normal';\n let length = line.length - 1;\n\n if (line[0] === '=') {\n stroke = 'thick';\n }\n\n let dots = countChar('.', line);\n\n if (dots) {\n stroke = 'dotted';\n length = dots;\n }\n\n return { type, stroke, length };\n};\n\nconst destructLink = (_str, _startStr) => {\n const info = destructEndLink(_str);\n let startInfo;\n if (_startStr) {\n startInfo = destructStartLink(_startStr);\n\n if (startInfo.stroke !== info.stroke) {\n return { type: 'INVALID', stroke: 'INVALID' };\n }\n\n if (startInfo.type === 'arrow_open') {\n // -- xyz --> - take arrow type from ending\n startInfo.type = info.type;\n } else {\n // x-- xyz --> - not supported\n if (startInfo.type !== info.type) return { type: 'INVALID', stroke: 'INVALID' };\n\n startInfo.type = 'double_' + startInfo.type;\n }\n\n if (startInfo.type === 'double_arrow') {\n startInfo.type = 'double_arrow_point';\n }\n\n startInfo.length = info.length;\n return startInfo;\n }\n\n return info;\n};\n\n// Todo optimizer this by caching existing nodes\nconst exists = (allSgs, _id) => {\n let res = false;\n allSgs.forEach(sg => {\n const pos = sg.nodes.indexOf(_id);\n if (pos >= 0) {\n res = true;\n }\n });\n return res;\n};\n/**\n * Deletes an id from all subgraphs\n */\nconst makeUniq = (sg, allSubgraphs) => {\n const res = [];\n sg.nodes.forEach((_id, pos) => {\n if (!exists(allSubgraphs, _id)) {\n res.push(sg.nodes[pos]);\n }\n });\n return { nodes: res };\n};\n\nexport default {\n parseDirective,\n defaultConfig: () => configApi.defaultConfig.flowchart,\n addVertex,\n lookUpDomId,\n addLink,\n updateLinkInterpolate,\n updateLink,\n addClass,\n setDirection,\n setClass,\n getTooltip,\n setClickEvent,\n setLink,\n bindFunctions,\n getDirection,\n getVertices,\n getEdges,\n getClasses,\n clear,\n setGen,\n defaultStyle,\n addSubGraph,\n getDepthFirstPos,\n indexNodes,\n getSubGraphs,\n destructLink,\n lex: {\n firstGraph\n },\n exists,\n makeUniq\n};\n","import dagreD3 from 'dagre-d3';\n\nfunction question(parent, bbox, node) {\n const w = bbox.width;\n const h = bbox.height;\n const s = (w + h) * 0.9;\n const points = [\n { x: s / 2, y: 0 },\n { x: s, y: -s / 2 },\n { x: s / 2, y: -s },\n { x: 0, y: -s / 2 }\n ];\n const shapeSvg = insertPolygonShape(parent, s, s, points);\n node.intersect = function(point) {\n return dagreD3.intersect.polygon(node, points, point);\n };\n return shapeSvg;\n}\n\nfunction hexagon(parent, bbox, node) {\n const f = 4;\n const h = bbox.height;\n const m = h / f;\n const w = bbox.width + 2 * m;\n const points = [\n { x: m, y: 0 },\n { x: w - m, y: 0 },\n { x: w, y: -h / 2 },\n { x: w - m, y: -h },\n { x: m, y: -h },\n { x: 0, y: -h / 2 }\n ];\n const shapeSvg = insertPolygonShape(parent, w, h, points);\n node.intersect = function(point) {\n return dagreD3.intersect.polygon(node, points, point);\n };\n return shapeSvg;\n}\n\nfunction rect_left_inv_arrow(parent, bbox, node) {\n const w = bbox.width;\n const h = bbox.height;\n const points = [\n { x: -h / 2, y: 0 },\n { x: w, y: 0 },\n { x: w, y: -h },\n { x: -h / 2, y: -h },\n { x: 0, y: -h / 2 }\n ];\n const shapeSvg = insertPolygonShape(parent, w, h, points);\n node.intersect = function(point) {\n return dagreD3.intersect.polygon(node, points, point);\n };\n return shapeSvg;\n}\n\nfunction lean_right(parent, bbox, node) {\n const w = bbox.width;\n const h = bbox.height;\n const points = [\n { x: (-2 * h) / 6, y: 0 },\n { x: w - h / 6, y: 0 },\n { x: w + (2 * h) / 6, y: -h },\n { x: h / 6, y: -h }\n ];\n const shapeSvg = insertPolygonShape(parent, w, h, points);\n node.intersect = function(point) {\n return dagreD3.intersect.polygon(node, points, point);\n };\n return shapeSvg;\n}\n\nfunction lean_left(parent, bbox, node) {\n const w = bbox.width;\n const h = bbox.height;\n const points = [\n { x: (2 * h) / 6, y: 0 },\n { x: w + h / 6, y: 0 },\n { x: w - (2 * h) / 6, y: -h },\n { x: -h / 6, y: -h }\n ];\n const shapeSvg = insertPolygonShape(parent, w, h, points);\n node.intersect = function(point) {\n return dagreD3.intersect.polygon(node, points, point);\n };\n return shapeSvg;\n}\n\nfunction trapezoid(parent, bbox, node) {\n const w = bbox.width;\n const h = bbox.height;\n const points = [\n { x: (-2 * h) / 6, y: 0 },\n { x: w + (2 * h) / 6, y: 0 },\n { x: w - h / 6, y: -h },\n { x: h / 6, y: -h }\n ];\n const shapeSvg = insertPolygonShape(parent, w, h, points);\n node.intersect = function(point) {\n return dagreD3.intersect.polygon(node, points, point);\n };\n return shapeSvg;\n}\n\nfunction inv_trapezoid(parent, bbox, node) {\n const w = bbox.width;\n const h = bbox.height;\n const points = [\n { x: h / 6, y: 0 },\n { x: w - h / 6, y: 0 },\n { x: w + (2 * h) / 6, y: -h },\n { x: (-2 * h) / 6, y: -h }\n ];\n const shapeSvg = insertPolygonShape(parent, w, h, points);\n node.intersect = function(point) {\n return dagreD3.intersect.polygon(node, points, point);\n };\n return shapeSvg;\n}\n\nfunction rect_right_inv_arrow(parent, bbox, node) {\n const w = bbox.width;\n const h = bbox.height;\n const points = [\n { x: 0, y: 0 },\n { x: w + h / 2, y: 0 },\n { x: w, y: -h / 2 },\n { x: w + h / 2, y: -h },\n { x: 0, y: -h }\n ];\n const shapeSvg = insertPolygonShape(parent, w, h, points);\n node.intersect = function(point) {\n return dagreD3.intersect.polygon(node, points, point);\n };\n return shapeSvg;\n}\n\nfunction stadium(parent, bbox, node) {\n const h = bbox.height;\n const w = bbox.width + h / 4;\n\n const shapeSvg = parent\n .insert('rect', ':first-child')\n .attr('rx', h / 2)\n .attr('ry', h / 2)\n .attr('x', -w / 2)\n .attr('y', -h / 2)\n .attr('width', w)\n .attr('height', h);\n\n node.intersect = function(point) {\n return dagreD3.intersect.rect(node, point);\n };\n return shapeSvg;\n}\n\nfunction subroutine(parent, bbox, node) {\n const w = bbox.width;\n const h = bbox.height;\n const points = [\n { x: 0, y: 0 },\n { x: w, y: 0 },\n { x: w, y: -h },\n { x: 0, y: -h },\n { x: 0, y: 0 },\n { x: -8, y: 0 },\n { x: w + 8, y: 0 },\n { x: w + 8, y: -h },\n { x: -8, y: -h },\n { x: -8, y: 0 }\n ];\n const shapeSvg = insertPolygonShape(parent, w, h, points);\n node.intersect = function(point) {\n return dagreD3.intersect.polygon(node, points, point);\n };\n return shapeSvg;\n}\n\nfunction cylinder(parent, bbox, node) {\n const w = bbox.width;\n const rx = w / 2;\n const ry = rx / (2.5 + w / 50);\n const h = bbox.height + ry;\n\n const shape =\n 'M 0,' +\n ry +\n ' a ' +\n rx +\n ',' +\n ry +\n ' 0,0,0 ' +\n w +\n ' 0 a ' +\n rx +\n ',' +\n ry +\n ' 0,0,0 ' +\n -w +\n ' 0 l 0,' +\n h +\n ' a ' +\n rx +\n ',' +\n ry +\n ' 0,0,0 ' +\n w +\n ' 0 l 0,' +\n -h;\n\n const shapeSvg = parent\n .attr('label-offset-y', ry)\n .insert('path', ':first-child')\n .attr('d', shape)\n .attr('transform', 'translate(' + -w / 2 + ',' + -(h / 2 + ry) + ')');\n\n node.intersect = function(point) {\n const pos = dagreD3.intersect.rect(node, point);\n const x = pos.x - node.x;\n\n if (\n rx != 0 &&\n (Math.abs(x) < node.width / 2 ||\n (Math.abs(x) == node.width / 2 && Math.abs(pos.y - node.y) > node.height / 2 - ry))\n ) {\n // ellipsis equation: x*x / a*a + y*y / b*b = 1\n // solve for y to get adjustion value for pos.y\n let y = ry * ry * (1 - (x * x) / (rx * rx));\n if (y != 0) y = Math.sqrt(y);\n y = ry - y;\n if (point.y - node.y > 0) y = -y;\n\n pos.y += y;\n }\n\n return pos;\n };\n\n return shapeSvg;\n}\n\nexport function addToRender(render) {\n render.shapes().question = question;\n render.shapes().hexagon = hexagon;\n render.shapes().stadium = stadium;\n render.shapes().subroutine = subroutine;\n render.shapes().cylinder = cylinder;\n\n // Add custom shape for box with inverted arrow on left side\n render.shapes().rect_left_inv_arrow = rect_left_inv_arrow;\n\n // Add custom shape for box with inverted arrow on left side\n render.shapes().lean_right = lean_right;\n\n // Add custom shape for box with inverted arrow on left side\n render.shapes().lean_left = lean_left;\n\n // Add custom shape for box with inverted arrow on left side\n render.shapes().trapezoid = trapezoid;\n\n // Add custom shape for box with inverted arrow on left side\n render.shapes().inv_trapezoid = inv_trapezoid;\n\n // Add custom shape for box with inverted arrow on right side\n render.shapes().rect_right_inv_arrow = rect_right_inv_arrow;\n}\n\nexport function addToRenderV2(addShape) {\n addShape({ question });\n addShape({ hexagon });\n addShape({ stadium });\n addShape({ subroutine });\n addShape({ cylinder });\n\n // Add custom shape for box with inverted arrow on left side\n addShape({ rect_left_inv_arrow });\n\n // Add custom shape for box with inverted arrow on left side\n addShape({ lean_right });\n\n // Add custom shape for box with inverted arrow on left side\n addShape({ lean_left });\n\n // Add custom shape for box with inverted arrow on left side\n addShape({ trapezoid });\n\n // Add custom shape for box with inverted arrow on left side\n addShape({ inv_trapezoid });\n\n // Add custom shape for box with inverted arrow on right side\n addShape({ rect_right_inv_arrow });\n}\n\nfunction insertPolygonShape(parent, w, h, points) {\n return parent\n .insert('polygon', ':first-child')\n .attr(\n 'points',\n points\n .map(function(d) {\n return d.x + ',' + d.y;\n })\n .join(' ')\n )\n .attr('transform', 'translate(' + -w / 2 + ',' + h / 2 + ')');\n}\n\nexport default {\n addToRender,\n addToRenderV2\n};\n","import graphlib from 'graphlib';\nimport { select, curveLinear, selectAll } from 'd3';\n\nimport flowDb from './flowDb';\nimport flow from './parser/flow';\nimport { getConfig } from '../../config';\n\nimport dagreD3 from 'dagre-d3';\nimport addHtmlLabel from 'dagre-d3/lib/label/add-html-label.js';\nimport { logger } from '../../logger';\nimport common from '../common/common';\nimport { interpolateToCurve, getStylesFromArray, configureSvgSize } from '../../utils';\nimport flowChartShapes from './flowChartShapes';\n\nconst conf = {};\nexport const setConf = function(cnf) {\n const keys = Object.keys(cnf);\n for (let i = 0; i < keys.length; i++) {\n conf[keys[i]] = cnf[keys[i]];\n }\n};\n\n/**\n * Function that adds the vertices found in the graph definition to the graph to be rendered.\n * @param vert Object containing the vertices.\n * @param g The graph that is to be drawn.\n */\nexport const addVertices = function(vert, g, svgId) {\n const svg = select(`[id=\"${svgId}\"]`);\n const keys = Object.keys(vert);\n\n // Iterate through each item in the vertex object (containing all the vertices found) in the graph definition\n keys.forEach(function(id) {\n const vertex = vert[id];\n\n /**\n * Variable for storing the classes for the vertex\n * @type {string}\n */\n let classStr = 'default';\n if (vertex.classes.length > 0) {\n classStr = vertex.classes.join(' ');\n }\n\n const styles = getStylesFromArray(vertex.styles);\n\n // Use vertex id as text in the box if no text is provided by the graph definition\n let vertexText = vertex.text !== undefined ? vertex.text : vertex.id;\n\n // We create a SVG label, either by delegating to addHtmlLabel or manually\n let vertexNode;\n if (getConfig().flowchart.htmlLabels) {\n // TODO: addHtmlLabel accepts a labelStyle. Do we possibly have that?\n const node = {\n label: vertexText.replace(\n /fa[lrsb]?:fa-[\\w-]+/g,\n s => ``\n )\n };\n vertexNode = addHtmlLabel(svg, node).node();\n vertexNode.parentNode.removeChild(vertexNode);\n } else {\n const svgLabel = document.createElementNS('http://www.w3.org/2000/svg', 'text');\n svgLabel.setAttribute('style', styles.labelStyle.replace('color:', 'fill:'));\n\n const rows = vertexText.split(common.lineBreakRegex);\n\n for (let j = 0; j < rows.length; j++) {\n const tspan = document.createElementNS('http://www.w3.org/2000/svg', 'tspan');\n tspan.setAttributeNS('http://www.w3.org/XML/1998/namespace', 'xml:space', 'preserve');\n tspan.setAttribute('dy', '1em');\n tspan.setAttribute('x', '1');\n tspan.textContent = rows[j];\n svgLabel.appendChild(tspan);\n }\n vertexNode = svgLabel;\n }\n\n let radious = 0;\n let _shape = '';\n // Set the shape based parameters\n switch (vertex.type) {\n case 'round':\n radious = 5;\n _shape = 'rect';\n break;\n case 'square':\n _shape = 'rect';\n break;\n case 'diamond':\n _shape = 'question';\n break;\n case 'hexagon':\n _shape = 'hexagon';\n break;\n case 'odd':\n _shape = 'rect_left_inv_arrow';\n break;\n case 'lean_right':\n _shape = 'lean_right';\n break;\n case 'lean_left':\n _shape = 'lean_left';\n break;\n case 'trapezoid':\n _shape = 'trapezoid';\n break;\n case 'inv_trapezoid':\n _shape = 'inv_trapezoid';\n break;\n case 'odd_right':\n _shape = 'rect_left_inv_arrow';\n break;\n case 'circle':\n _shape = 'circle';\n break;\n case 'ellipse':\n _shape = 'ellipse';\n break;\n case 'stadium':\n _shape = 'stadium';\n break;\n case 'subroutine':\n _shape = 'subroutine';\n break;\n case 'cylinder':\n _shape = 'cylinder';\n break;\n case 'group':\n _shape = 'rect';\n break;\n default:\n _shape = 'rect';\n }\n // Add the node\n logger.warn('Adding node', vertex.id, vertex.domId);\n g.setNode(flowDb.lookUpDomId(vertex.id), {\n labelType: 'svg',\n labelStyle: styles.labelStyle,\n shape: _shape,\n label: vertexNode,\n rx: radious,\n ry: radious,\n class: classStr,\n style: styles.style,\n id: flowDb.lookUpDomId(vertex.id)\n });\n });\n};\n\n/**\n * Add edges to graph based on parsed graph defninition\n * @param {Object} edges The edges to add to the graph\n * @param {Object} g The graph object\n */\nexport const addEdges = function(edges, g) {\n let cnt = 0;\n\n let defaultStyle;\n let defaultLabelStyle;\n\n if (typeof edges.defaultStyle !== 'undefined') {\n const defaultStyles = getStylesFromArray(edges.defaultStyle);\n defaultStyle = defaultStyles.style;\n defaultLabelStyle = defaultStyles.labelStyle;\n }\n\n edges.forEach(function(edge) {\n cnt++;\n\n // Identify Link\n var linkId = 'L-' + edge.start + '-' + edge.end;\n var linkNameStart = 'LS-' + edge.start;\n var linkNameEnd = 'LE-' + edge.end;\n\n const edgeData = {};\n\n // Set link type for rendering\n if (edge.type === 'arrow_open') {\n edgeData.arrowhead = 'none';\n } else {\n edgeData.arrowhead = 'normal';\n }\n\n let style = '';\n let labelStyle = '';\n\n if (typeof edge.style !== 'undefined') {\n const styles = getStylesFromArray(edge.style);\n style = styles.style;\n labelStyle = styles.labelStyle;\n } else {\n switch (edge.stroke) {\n case 'normal':\n style = 'fill:none';\n if (typeof defaultStyle !== 'undefined') {\n style = defaultStyle;\n }\n if (typeof defaultLabelStyle !== 'undefined') {\n labelStyle = defaultLabelStyle;\n }\n break;\n case 'dotted':\n style = 'fill:none;stroke-width:2px;stroke-dasharray:3;';\n break;\n case 'thick':\n style = ' stroke-width: 3.5px;fill:none';\n break;\n }\n }\n\n edgeData.style = style;\n edgeData.labelStyle = labelStyle;\n\n if (typeof edge.interpolate !== 'undefined') {\n edgeData.curve = interpolateToCurve(edge.interpolate, curveLinear);\n } else if (typeof edges.defaultInterpolate !== 'undefined') {\n edgeData.curve = interpolateToCurve(edges.defaultInterpolate, curveLinear);\n } else {\n edgeData.curve = interpolateToCurve(conf.curve, curveLinear);\n }\n\n if (typeof edge.text === 'undefined') {\n if (typeof edge.style !== 'undefined') {\n edgeData.arrowheadStyle = 'fill: #333';\n }\n } else {\n edgeData.arrowheadStyle = 'fill: #333';\n edgeData.labelpos = 'c';\n\n if (getConfig().flowchart.htmlLabels) {\n edgeData.labelType = 'html';\n edgeData.label = `${edge.text.replace(\n /fa[lrsb]?:fa-[\\w-]+/g,\n s => ``\n )}`;\n } else {\n edgeData.labelType = 'text';\n edgeData.label = edge.text.replace(common.lineBreakRegex, '\\n');\n\n if (typeof edge.style === 'undefined') {\n edgeData.style = edgeData.style || 'stroke: #333; stroke-width: 1.5px;fill:none';\n }\n\n edgeData.labelStyle = edgeData.labelStyle.replace('color:', 'fill:');\n }\n }\n\n edgeData.id = linkId;\n edgeData.class = linkNameStart + ' ' + linkNameEnd;\n edgeData.minlen = edge.length || 1;\n\n // Add the edge to the graph\n g.setEdge(flowDb.lookUpDomId(edge.start), flowDb.lookUpDomId(edge.end), edgeData, cnt);\n });\n};\n\n/**\n * Returns the all the styles from classDef statements in the graph definition.\n * @returns {object} classDef styles\n */\nexport const getClasses = function(text) {\n logger.info('Extracting classes');\n flowDb.clear();\n try {\n const parser = flow.parser;\n parser.yy = flowDb;\n\n // Parse the graph definition\n parser.parse(text);\n return flowDb.getClasses();\n } catch (e) {\n return;\n }\n};\n\n/**\n * Draws a flowchart in the tag with id: id based on the graph definition in text.\n * @param text\n * @param id\n */\nexport const draw = function(text, id) {\n logger.info('Drawing flowchart');\n flowDb.clear();\n flowDb.setGen('gen-1');\n const parser = flow.parser;\n parser.yy = flowDb;\n\n // Parse the graph definition\n // try {\n parser.parse(text);\n // } catch (err) {\n // logger.debug('Parsing failed');\n // }\n\n // Fetch the default direction, use TD if none was found\n let dir = flowDb.getDirection();\n if (typeof dir === 'undefined') {\n dir = 'TD';\n }\n\n const conf = getConfig().flowchart;\n const nodeSpacing = conf.nodeSpacing || 50;\n const rankSpacing = conf.rankSpacing || 50;\n\n // Create the input mermaid.graph\n const g = new graphlib.Graph({\n multigraph: true,\n compound: true\n })\n .setGraph({\n rankdir: dir,\n nodesep: nodeSpacing,\n ranksep: rankSpacing,\n marginx: 8,\n marginy: 8\n })\n .setDefaultEdgeLabel(function() {\n return {};\n });\n\n let subG;\n const subGraphs = flowDb.getSubGraphs();\n for (let i = subGraphs.length - 1; i >= 0; i--) {\n subG = subGraphs[i];\n flowDb.addVertex(subG.id, subG.title, 'group', undefined, subG.classes);\n }\n\n // Fetch the verices/nodes and edges/links from the parsed graph definition\n const vert = flowDb.getVertices();\n logger.warn('Get vertices', vert);\n\n const edges = flowDb.getEdges();\n\n let i = 0;\n for (i = subGraphs.length - 1; i >= 0; i--) {\n subG = subGraphs[i];\n\n selectAll('cluster').append('text');\n\n for (let j = 0; j < subG.nodes.length; j++) {\n logger.warn(\n 'Setting subgraph',\n subG.nodes[j],\n flowDb.lookUpDomId(subG.nodes[j]),\n flowDb.lookUpDomId(subG.id)\n );\n g.setParent(flowDb.lookUpDomId(subG.nodes[j]), flowDb.lookUpDomId(subG.id));\n }\n }\n addVertices(vert, g, id);\n addEdges(edges, g);\n\n // Create the renderer\n const Render = dagreD3.render;\n const render = new Render();\n\n // Add custom shapes\n flowChartShapes.addToRender(render);\n\n // Add our custom arrow - an empty arrowhead\n render.arrows().none = function normal(parent, id, edge, type) {\n const marker = parent\n .append('marker')\n .attr('id', id)\n .attr('viewBox', '0 0 10 10')\n .attr('refX', 9)\n .attr('refY', 5)\n .attr('markerUnits', 'strokeWidth')\n .attr('markerWidth', 8)\n .attr('markerHeight', 6)\n .attr('orient', 'auto');\n\n const path = marker.append('path').attr('d', 'M 0 0 L 0 0 L 0 0 z');\n dagreD3.util.applyStyle(path, edge[type + 'Style']);\n };\n\n // Override normal arrowhead defined in d3. Remove style & add class to allow css styling.\n render.arrows().normal = function normal(parent, id) {\n const marker = parent\n .append('marker')\n .attr('id', id)\n .attr('viewBox', '0 0 10 10')\n .attr('refX', 9)\n .attr('refY', 5)\n .attr('markerUnits', 'strokeWidth')\n .attr('markerWidth', 8)\n .attr('markerHeight', 6)\n .attr('orient', 'auto');\n\n marker\n .append('path')\n .attr('d', 'M 0 0 L 10 5 L 0 10 z')\n .attr('class', 'arrowheadPath')\n .style('stroke-width', 1)\n .style('stroke-dasharray', '1,0');\n };\n\n // Set up an SVG group so that we can translate the final graph.\n const svg = select(`[id=\"${id}\"]`);\n svg.attr('xmlns:xlink', 'http://www.w3.org/1999/xlink');\n\n logger.warn(g);\n\n // Run the renderer. This is what draws the final graph.\n const element = select('#' + id + ' g');\n render(element, g);\n\n element.selectAll('g.node').attr('title', function() {\n return flowDb.getTooltip(this.id);\n });\n\n const padding = conf.diagramPadding;\n const svgBounds = svg.node().getBBox();\n const width = svgBounds.width + padding * 2;\n const height = svgBounds.height + padding * 2;\n\n configureSvgSize(svg, height, width, conf.useMaxWidth);\n\n // Ensure the viewBox includes the whole svgBounds area with extra space for padding\n const vBox = `${svgBounds.x - padding} ${svgBounds.y - padding} ${width} ${height}`;\n logger.debug(`viewBox ${vBox}`);\n svg.attr('viewBox', vBox);\n\n // Index nodes\n flowDb.indexNodes('subGraph' + i);\n\n // reposition labels\n for (i = 0; i < subGraphs.length; i++) {\n subG = subGraphs[i];\n if (subG.title !== 'undefined') {\n const clusterRects = document.querySelectorAll(\n '#' + id + ' [id=\"' + flowDb.lookUpDomId(subG.id) + '\"] rect'\n );\n const clusterEl = document.querySelectorAll(\n '#' + id + ' [id=\"' + flowDb.lookUpDomId(subG.id) + '\"]'\n );\n\n const xPos = clusterRects[0].x.baseVal.value;\n const yPos = clusterRects[0].y.baseVal.value;\n const width = clusterRects[0].width.baseVal.value;\n const cluster = select(clusterEl[0]);\n const te = cluster.select('.label');\n te.attr('transform', `translate(${xPos + width / 2}, ${yPos + 14})`);\n te.attr('id', id + 'Text');\n\n for (let j = 0; j < subG.classes.length; j++) {\n clusterEl[0].classList.add(subG.classes[j]);\n }\n }\n }\n\n // Add label rects for non html labels\n if (!conf.htmlLabels || true) { // eslint-disable-line\n const labels = document.querySelectorAll('[id=\"' + id + '\"] .edgeLabel .label');\n for (let k = 0; k < labels.length; k++) {\n const label = labels[k];\n\n // Get dimensions of label\n const dim = label.getBBox();\n\n const rect = document.createElementNS('http://www.w3.org/2000/svg', 'rect');\n rect.setAttribute('rx', 0);\n rect.setAttribute('ry', 0);\n rect.setAttribute('width', dim.width);\n rect.setAttribute('height', dim.height);\n // rect.setAttribute('style', 'fill:#e8e8e8;');\n\n label.insertBefore(rect, label.firstChild);\n }\n }\n\n // If node has a link, wrap it in an anchor SVG object.\n const keys = Object.keys(vert);\n keys.forEach(function(key) {\n const vertex = vert[key];\n\n if (vertex.link) {\n const node = select('#' + id + ' [id=\"' + flowDb.lookUpDomId(key) + '\"]');\n if (node) {\n const link = document.createElementNS('http://www.w3.org/2000/svg', 'a');\n link.setAttributeNS('http://www.w3.org/2000/svg', 'class', vertex.classes.join(' '));\n link.setAttributeNS('http://www.w3.org/2000/svg', 'href', vertex.link);\n link.setAttributeNS('http://www.w3.org/2000/svg', 'rel', 'noopener');\n if (vertex.linkTarget) {\n link.setAttributeNS('http://www.w3.org/2000/svg', 'target', vertex.linkTarget);\n }\n\n const linkNode = node.insert(function() {\n return link;\n }, ':first-child');\n\n const shape = node.select('.label-container');\n if (shape) {\n linkNode.append(function() {\n return shape.node();\n });\n }\n\n const label = node.select('.label');\n if (label) {\n linkNode.append(function() {\n return label.node();\n });\n }\n }\n }\n });\n};\n\nexport default {\n setConf,\n addVertices,\n addEdges,\n getClasses,\n draw\n};\n","/**\n * Setup arrow head and define the marker. The result is appended to the svg.\n */\n\nimport { logger } from '../logger';\n\n// Only add the number of markers that the diagram needs\nconst insertMarkers = (elem, markerArray, type, id) => {\n markerArray.forEach(markerName => {\n markers[markerName](elem, type, id);\n });\n};\n\nconst extension = (elem, type, id) => {\n logger.trace('Making markers for ', id);\n elem\n .append('defs')\n .append('marker')\n .attr('id', type + '-extensionStart')\n .attr('class', 'marker extension ' + type)\n .attr('refX', 0)\n .attr('refY', 7)\n .attr('markerWidth', 190)\n .attr('markerHeight', 240)\n .attr('orient', 'auto')\n .append('path')\n .attr('d', 'M 1,7 L18,13 V 1 Z');\n\n elem\n .append('defs')\n .append('marker')\n .attr('id', type + '-extensionEnd')\n .attr('class', 'marker extension ' + type)\n .attr('refX', 19)\n .attr('refY', 7)\n .attr('markerWidth', 20)\n .attr('markerHeight', 28)\n .attr('orient', 'auto')\n .append('path')\n .attr('d', 'M 1,1 V 13 L18,7 Z'); // this is actual shape for arrowhead\n};\n\nconst composition = (elem, type) => {\n elem\n .append('defs')\n .append('marker')\n .attr('id', type + '-compositionStart')\n .attr('class', 'marker composition ' + type)\n .attr('refX', 0)\n .attr('refY', 7)\n .attr('markerWidth', 190)\n .attr('markerHeight', 240)\n .attr('orient', 'auto')\n .append('path')\n .attr('d', 'M 18,7 L9,13 L1,7 L9,1 Z');\n\n elem\n .append('defs')\n .append('marker')\n .attr('id', type + '-compositionEnd')\n .attr('class', 'marker composition ' + type)\n .attr('refX', 19)\n .attr('refY', 7)\n .attr('markerWidth', 20)\n .attr('markerHeight', 28)\n .attr('orient', 'auto')\n .append('path')\n .attr('d', 'M 18,7 L9,13 L1,7 L9,1 Z');\n};\nconst aggregation = (elem, type) => {\n elem\n .append('defs')\n .append('marker')\n .attr('id', type + '-aggregationStart')\n .attr('class', 'marker aggregation ' + type)\n .attr('refX', 0)\n .attr('refY', 7)\n .attr('markerWidth', 190)\n .attr('markerHeight', 240)\n .attr('orient', 'auto')\n .append('path')\n .attr('d', 'M 18,7 L9,13 L1,7 L9,1 Z');\n\n elem\n .append('defs')\n .append('marker')\n .attr('id', type + '-aggregationEnd')\n .attr('class', 'marker aggregation ' + type)\n .attr('refX', 19)\n .attr('refY', 7)\n .attr('markerWidth', 20)\n .attr('markerHeight', 28)\n .attr('orient', 'auto')\n .append('path')\n .attr('d', 'M 18,7 L9,13 L1,7 L9,1 Z');\n};\nconst dependency = (elem, type) => {\n elem\n .append('defs')\n .append('marker')\n .attr('id', type + '-dependencyStart')\n .attr('class', 'marker dependency ' + type)\n .attr('refX', 0)\n .attr('refY', 7)\n .attr('markerWidth', 190)\n .attr('markerHeight', 240)\n .attr('orient', 'auto')\n .append('path')\n .attr('d', 'M 5,7 L9,13 L1,7 L9,1 Z');\n\n elem\n .append('defs')\n .append('marker')\n .attr('id', type + '-dependencyEnd')\n .attr('class', 'marker dependency ' + type)\n .attr('refX', 19)\n .attr('refY', 7)\n .attr('markerWidth', 20)\n .attr('markerHeight', 28)\n .attr('orient', 'auto')\n .append('path')\n .attr('d', 'M 18,7 L9,13 L14,7 L9,1 Z');\n};\nconst point = (elem, type) => {\n elem\n .append('marker')\n .attr('id', type + '-pointEnd')\n .attr('class', 'marker ' + type)\n .attr('viewBox', '0 0 10 10')\n .attr('refX', 9)\n .attr('refY', 5)\n .attr('markerUnits', 'userSpaceOnUse')\n .attr('markerWidth', 12)\n .attr('markerHeight', 12)\n .attr('orient', 'auto')\n .append('path')\n .attr('d', 'M 0 0 L 10 5 L 0 10 z')\n .attr('class', 'arrowMarkerPath')\n .style('stroke-width', 1)\n .style('stroke-dasharray', '1,0');\n elem\n .append('marker')\n .attr('id', type + '-pointStart')\n .attr('class', 'marker ' + type)\n .attr('viewBox', '0 0 10 10')\n .attr('refX', 0)\n .attr('refY', 5)\n .attr('markerUnits', 'userSpaceOnUse')\n .attr('markerWidth', 12)\n .attr('markerHeight', 12)\n .attr('orient', 'auto')\n .append('path')\n .attr('d', 'M 0 5 L 10 10 L 10 0 z')\n .attr('class', 'arrowMarkerPath')\n .style('stroke-width', 1)\n .style('stroke-dasharray', '1,0');\n};\nconst circle = (elem, type) => {\n elem\n .append('marker')\n .attr('id', type + '-circleEnd')\n .attr('class', 'marker ' + type)\n .attr('viewBox', '0 0 10 10')\n .attr('refX', 11)\n .attr('refY', 5)\n .attr('markerUnits', 'userSpaceOnUse')\n .attr('markerWidth', 11)\n .attr('markerHeight', 11)\n .attr('orient', 'auto')\n .append('circle')\n .attr('cx', '5')\n .attr('cy', '5')\n .attr('r', '5')\n .attr('class', 'arrowMarkerPath')\n .style('stroke-width', 1)\n .style('stroke-dasharray', '1,0');\n\n elem\n .append('marker')\n .attr('id', type + '-circleStart')\n .attr('class', 'marker ' + type)\n .attr('viewBox', '0 0 10 10')\n .attr('refX', -1)\n .attr('refY', 5)\n .attr('markerUnits', 'userSpaceOnUse')\n .attr('markerWidth', 11)\n .attr('markerHeight', 11)\n .attr('orient', 'auto')\n .append('circle')\n .attr('cx', '5')\n .attr('cy', '5')\n .attr('r', '5')\n .attr('class', 'arrowMarkerPath')\n .style('stroke-width', 1)\n .style('stroke-dasharray', '1,0');\n};\nconst cross = (elem, type) => {\n elem\n .append('marker')\n .attr('id', type + '-crossEnd')\n .attr('class', 'marker cross ' + type)\n .attr('viewBox', '0 0 11 11')\n .attr('refX', 12)\n .attr('refY', 5.2)\n .attr('markerUnits', 'userSpaceOnUse')\n .attr('markerWidth', 11)\n .attr('markerHeight', 11)\n .attr('orient', 'auto')\n .append('path')\n // .attr('stroke', 'black')\n .attr('d', 'M 1,1 l 9,9 M 10,1 l -9,9')\n .attr('class', 'arrowMarkerPath')\n .style('stroke-width', 2)\n .style('stroke-dasharray', '1,0');\n\n elem\n .append('marker')\n .attr('id', type + '-crossStart')\n .attr('class', 'marker cross ' + type)\n .attr('viewBox', '0 0 11 11')\n .attr('refX', -1)\n .attr('refY', 5.2)\n .attr('markerUnits', 'userSpaceOnUse')\n .attr('markerWidth', 11)\n .attr('markerHeight', 11)\n .attr('orient', 'auto')\n .append('path')\n // .attr('stroke', 'black')\n .attr('d', 'M 1,1 l 9,9 M 10,1 l -9,9')\n .attr('class', 'arrowMarkerPath')\n .style('stroke-width', 2)\n .style('stroke-dasharray', '1,0');\n};\nconst barb = (elem, type) => {\n elem\n .append('defs')\n .append('marker')\n .attr('id', type + '-barbEnd')\n .attr('refX', 19)\n .attr('refY', 7)\n .attr('markerWidth', 20)\n .attr('markerHeight', 14)\n .attr('markerUnits', 'strokeWidth')\n .attr('orient', 'auto')\n .append('path')\n .attr('d', 'M 19,7 L9,13 L14,7 L9,1 Z');\n};\n\n// TODO rename the class diagram markers to something shape descriptive and semanitc free\nconst markers = {\n extension,\n composition,\n aggregation,\n dependency,\n point,\n circle,\n cross,\n barb\n};\nexport default insertMarkers;\n","import { select } from 'd3';\nimport { logger } from '../logger'; // eslint-disable-line\n// let vertexNode;\n// if (getConfig().flowchart.htmlLabels) {\n// // TODO: addHtmlLabel accepts a labelStyle. Do we possibly have that?\n// const node = {\n// label: vertexText.replace(/fa[lrsb]?:fa-[\\w-]+/g, s => ``)\n// };\n// vertexNode = addHtmlLabel(svg, node).node();\n// vertexNode.parentNode.removeChild(vertexNode);\n// } else {\n// const svgLabel = document.createElementNS('http://www.w3.org/2000/svg', 'text');\n// svgLabel.setAttribute('style', styles.labelStyle.replace('color:', 'fill:'));\n\n// const rows = vertexText.split(common.lineBreakRegex);\n\n// for (let j = 0; j < rows.length; j++) {\n// const tspan = document.createElementNS('http://www.w3.org/2000/svg', 'tspan');\n// tspan.setAttributeNS('http://www.w3.org/XML/1998/namespace', 'xml:space', 'preserve');\n// tspan.setAttribute('dy', '1em');\n// tspan.setAttribute('x', '1');\n// tspan.textContent = rows[j];\n// svgLabel.appendChild(tspan);\n// }\n// vertexNode = svgLabel;\n// }\nimport { getConfig } from '../config';\n\nfunction applyStyle(dom, styleFn) {\n if (styleFn) {\n dom.attr('style', styleFn);\n }\n}\n\nfunction addHtmlLabel(node) {\n // var fo = root.append('foreignObject').attr('width', '100000');\n\n // var div = fo.append('xhtml:div');\n // div.attr('xmlns', 'http://www.w3.org/1999/xhtml');\n\n // var label = node.label;\n // switch (typeof label) {\n // case 'function':\n // div.insert(label);\n // break;\n // case 'object':\n // // Currently we assume this is a DOM object.\n // div.insert(function() {\n // return label;\n // });\n // break;\n // default:\n // div.html(label);\n // }\n\n // applyStyle(div, node.labelStyle);\n // div.style('display', 'inline-block');\n // // Fix for firefox\n // div.style('white-space', 'nowrap');\n\n // var client = div.node().getBoundingClientRect();\n // fo.attr('width', client.width).attr('height', client.height);\n const fo = select(document.createElementNS('http://www.w3.org/2000/svg', 'foreignObject'));\n const div = fo.append('xhtml:div');\n\n const label = node.label;\n const labelClass = node.isNode ? 'nodeLabel' : 'edgeLabel';\n div.html('' + label + '');\n\n applyStyle(div, node.labelStyle);\n div.style('display', 'inline-block');\n // Fix for firefox\n div.style('white-space', 'nowrap');\n div.attr('xmlns', 'http://www.w3.org/1999/xhtml');\n return fo.node();\n}\n\nconst createLabel = (_vertexText, style, isTitle, isNode) => {\n let vertexText = _vertexText || '';\n if (getConfig().flowchart.htmlLabels) {\n // TODO: addHtmlLabel accepts a labelStyle. Do we possibly have that?\n vertexText = vertexText.replace(/\\\\n|\\n/g, '
');\n logger.info('vertexText' + vertexText);\n const node = {\n isNode,\n label: vertexText.replace(\n /fa[lrsb]?:fa-[\\w-]+/g,\n s => ``\n ),\n labelStyle: style.replace('fill:', 'color:')\n };\n let vertexNode = addHtmlLabel(node);\n // vertexNode.parentNode.removeChild(vertexNode);\n return vertexNode;\n } else {\n const svgLabel = document.createElementNS('http://www.w3.org/2000/svg', 'text');\n svgLabel.setAttribute('style', style.replace('color:', 'fill:'));\n let rows = [];\n if (typeof vertexText === 'string') {\n rows = vertexText.split(/\\\\n|\\n|
/gi);\n } else if (Array.isArray(vertexText)) {\n rows = vertexText;\n } else {\n rows = [];\n }\n\n for (let j = 0; j < rows.length; j++) {\n const tspan = document.createElementNS('http://www.w3.org/2000/svg', 'tspan');\n tspan.setAttributeNS('http://www.w3.org/XML/1998/namespace', 'xml:space', 'preserve');\n tspan.setAttribute('dy', '1em');\n tspan.setAttribute('x', '0');\n if (isTitle) {\n tspan.setAttribute('class', 'title-row');\n } else {\n tspan.setAttribute('class', 'row');\n }\n tspan.textContent = rows[j].trim();\n svgLabel.appendChild(tspan);\n }\n return svgLabel;\n }\n};\n\nexport default createLabel;\n","import createLabel from '../createLabel';\nimport { getConfig } from '../../config';\nimport { select } from 'd3';\nexport const labelHelper = (parent, node, _classes, isNode) => {\n let classes;\n if (!_classes) {\n classes = 'node default';\n } else {\n classes = _classes;\n }\n // Add outer g element\n const shapeSvg = parent\n .insert('g')\n .attr('class', classes)\n .attr('id', node.domId || node.id);\n\n // Create the label and insert it after the rect\n const label = shapeSvg\n .insert('g')\n .attr('class', 'label')\n .attr('style', node.labelStyle);\n\n const text = label\n .node()\n .appendChild(createLabel(node.labelText, node.labelStyle, false, isNode));\n\n // Get the size of the label\n let bbox = text.getBBox();\n\n if (getConfig().flowchart.htmlLabels) {\n const div = text.children[0];\n const dv = select(text);\n bbox = div.getBoundingClientRect();\n dv.attr('width', bbox.width);\n dv.attr('height', bbox.height);\n }\n\n const halfPadding = node.padding / 2;\n\n // Center the label\n label.attr('transform', 'translate(' + -bbox.width / 2 + ', ' + -bbox.height / 2 + ')');\n\n return { shapeSvg, bbox, halfPadding, label };\n};\n\nexport const updateNodeBounds = (node, element) => {\n const bbox = element.node().getBBox();\n node.width = bbox.width;\n node.height = bbox.height;\n};\n\nexport function insertPolygonShape(parent, w, h, points) {\n return parent\n .insert('polygon', ':first-child')\n .attr(\n 'points',\n points\n .map(function(d) {\n return d.x + ',' + d.y;\n })\n .join(' ')\n )\n .attr('class', 'label-container')\n .attr('transform', 'translate(' + -w / 2 + ',' + h / 2 + ')');\n}\n","/**\n * Decorates with functions required by mermaids dagre-wrapper.\n */\nimport { logger as log } from '../logger';\nimport graphlib from 'graphlib';\n\nexport let clusterDb = {};\nlet decendants = {};\nlet parents = {};\n\nexport const clear = () => {\n decendants = {};\n parents = {};\n clusterDb = {};\n};\n\nconst isDecendant = (id, ancenstorId) => {\n // if (id === ancenstorId) return true;\n\n log.debug(\n 'In isDecendant',\n ancenstorId,\n ' ',\n id,\n ' = ',\n decendants[ancenstorId].indexOf(id) >= 0\n );\n if (decendants[ancenstorId].indexOf(id) >= 0) return true;\n\n return false;\n};\n\nconst edgeInCluster = (edge, clusterId) => {\n log.info('Decendants of ', clusterId, ' is ', decendants[clusterId]);\n log.info('Edge is ', edge);\n // Edges to/from the cluster is not in the cluster, they are in the parent\n if (edge.v === clusterId) return false;\n if (edge.w === clusterId) return false;\n\n if (!decendants[clusterId]) {\n log.debug('Tilt, ', clusterId, ',not in decendants');\n return false;\n }\n log.info('Here ');\n\n if (decendants[clusterId].indexOf(edge.v) >= 0) return true;\n if (isDecendant(edge.v, clusterId)) return true;\n if (isDecendant(edge.w, clusterId)) return true;\n if (decendants[clusterId].indexOf(edge.w) >= 0) return true;\n\n return false;\n};\n\nconst copy = (clusterId, graph, newGraph, rootId) => {\n log.warn(\n 'Copying children of ',\n clusterId,\n 'root',\n rootId,\n 'data',\n graph.node(clusterId),\n rootId\n );\n const nodes = graph.children(clusterId) || [];\n\n // Include cluster node if it is not the root\n if (clusterId !== rootId) {\n nodes.push(clusterId);\n }\n\n log.warn('Copying (nodes) clusterId', clusterId, 'nodes', nodes);\n\n nodes.forEach(node => {\n if (graph.children(node).length > 0) {\n copy(node, graph, newGraph, rootId);\n } else {\n const data = graph.node(node);\n log.info('cp ', node, ' to ', rootId, ' with parent ', clusterId); //,node, data, ' parent is ', clusterId);\n newGraph.setNode(node, data);\n if (rootId !== graph.parent(node)) {\n log.warn('Setting parent', node, graph.parent(node));\n newGraph.setParent(node, graph.parent(node));\n }\n\n if (clusterId !== rootId && node !== clusterId) {\n log.debug('Setting parent', node, clusterId);\n newGraph.setParent(node, clusterId);\n } else {\n log.info('In copy ', clusterId, 'root', rootId, 'data', graph.node(clusterId), rootId);\n log.debug(\n 'Not Setting parent for node=',\n node,\n 'cluster!==rootId',\n clusterId !== rootId,\n 'node!==clusterId',\n node !== clusterId\n );\n }\n const edges = graph.edges(node);\n log.debug('Copying Edges', edges);\n edges.forEach(edge => {\n log.info('Edge', edge);\n const data = graph.edge(edge.v, edge.w, edge.name);\n log.info('Edge data', data, rootId);\n try {\n // Do not copy edges in and out of the root cluster, they belong to the parent graph\n if (edgeInCluster(edge, rootId)) {\n log.info('Copying as ', edge.v, edge.w, data, edge.name);\n newGraph.setEdge(edge.v, edge.w, data, edge.name);\n log.info('newGraph edges ', newGraph.edges(), newGraph.edge(newGraph.edges()[0]));\n } else {\n log.info(\n 'Skipping copy of edge ',\n edge.v,\n '-->',\n edge.w,\n ' rootId: ',\n rootId,\n ' clusterId:',\n clusterId\n );\n }\n } catch (e) {\n log.error(e);\n }\n });\n }\n log.debug('Removing node', node);\n graph.removeNode(node);\n });\n};\nexport const extractDecendants = (id, graph) => {\n // log.debug('Extracting ', id);\n const children = graph.children(id);\n let res = [].concat(children);\n\n for (let i = 0; i < children.length; i++) {\n parents[children[i]] = id;\n res = res.concat(extractDecendants(children[i], graph));\n }\n\n return res;\n};\n\n/**\n * Validates the graph, checking that all parent child relation points to existing nodes and that\n * edges between nodes also ia correct. When not correct the function logs the discrepancies.\n * @param {graphlib graph} g\n */\nexport const validate = graph => {\n const edges = graph.edges();\n log.trace('Edges: ', edges);\n for (let i = 0; i < edges.length; i++) {\n if (graph.children(edges[i].v).length > 0) {\n log.trace('The node ', edges[i].v, ' is part of and edge even though it has children');\n return false;\n }\n if (graph.children(edges[i].w).length > 0) {\n log.trace('The node ', edges[i].w, ' is part of and edge even though it has children');\n return false;\n }\n }\n return true;\n};\n\n/**\n * Finds a child that is not a cluster. When faking a edge between a node and a cluster.\n * @param {Finds a } id\n * @param {*} graph\n */\nexport const findNonClusterChild = (id, graph) => {\n // const node = graph.node(id);\n log.trace('Searching', id);\n // const children = graph.children(id).reverse();\n const children = graph.children(id); //.reverse();\n log.trace('Searching children of id ', id, children);\n if (children.length < 1) {\n log.trace('This is a valid node', id);\n return id;\n }\n for (let i = 0; i < children.length; i++) {\n const _id = findNonClusterChild(children[i], graph);\n if (_id) {\n log.trace('Found replacement for', id, ' => ', _id);\n return _id;\n }\n }\n};\n\nconst getAnchorId = id => {\n if (!clusterDb[id]) {\n return id;\n }\n // If the cluster has no external connections\n if (!clusterDb[id].externalConnections) {\n return id;\n }\n\n // Return the replacement node\n if (clusterDb[id]) {\n return clusterDb[id].id;\n }\n return id;\n};\n\nexport const adjustClustersAndEdges = (graph, depth) => {\n if (!graph || depth > 10) {\n log.debug('Opting out, no graph ');\n return;\n } else {\n log.debug('Opting in, graph ');\n }\n // Go through the nodes and for each cluster found, save a replacment node, this can be used when\n // faking a link to a cluster\n graph.nodes().forEach(function(id) {\n const children = graph.children(id);\n if (children.length > 0) {\n log.warn(\n 'Cluster identified',\n id,\n ' Replacement id in edges: ',\n findNonClusterChild(id, graph)\n );\n decendants[id] = extractDecendants(id, graph);\n clusterDb[id] = { id: findNonClusterChild(id, graph), clusterData: graph.node(id) };\n }\n });\n\n // Check incoming and outgoing edges for each cluster\n graph.nodes().forEach(function(id) {\n const children = graph.children(id);\n const edges = graph.edges();\n if (children.length > 0) {\n log.debug('Cluster identified', id, decendants);\n edges.forEach(edge => {\n // log.debug('Edge, decendants: ', edge, decendants[id]);\n\n // Check if any edge leaves the cluster (not the actual cluster, thats a link from the box)\n if (edge.v !== id && edge.w !== id) {\n // Any edge where either the one of the nodes is decending to the cluster but not the other\n // if (decendants[id].indexOf(edge.v) < 0 && decendants[id].indexOf(edge.w) < 0) {\n\n const d1 = isDecendant(edge.v, id);\n const d2 = isDecendant(edge.w, id);\n\n // d1 xor d2 - if either d1 is true and d2 is false or the other way around\n if (d1 ^ d2) {\n log.warn('Edge: ', edge, ' leaves cluster ', id);\n log.warn('Decendants of XXX ', id, ': ', decendants[id]);\n clusterDb[id].externalConnections = true;\n }\n }\n });\n } else {\n log.debug('Not a cluster ', id, decendants);\n }\n });\n\n // For clusters with incoming and/or outgoing edges translate those edges to a real node\n // in the cluster inorder to fake the edge\n graph.edges().forEach(function(e) {\n const edge = graph.edge(e);\n log.warn('Edge ' + e.v + ' -> ' + e.w + ': ' + JSON.stringify(e));\n log.warn('Edge ' + e.v + ' -> ' + e.w + ': ' + JSON.stringify(graph.edge(e)));\n\n let v = e.v;\n let w = e.w;\n // Check if link is either from or to a cluster\n log.warn(\n 'Fix XXX',\n clusterDb,\n 'ids:',\n e.v,\n e.w,\n 'Translateing: ',\n clusterDb[e.v],\n ' --- ',\n clusterDb[e.w]\n );\n if (clusterDb[e.v] || clusterDb[e.w]) {\n log.warn('Fixing and trixing - removing XXX', e.v, e.w, e.name);\n v = getAnchorId(e.v);\n w = getAnchorId(e.w);\n graph.removeEdge(e.v, e.w, e.name);\n if (v !== e.v) edge.fromCluster = e.v;\n if (w !== e.w) edge.toCluster = e.w;\n log.warn('Fix Replacing with XXX', v, w, e.name);\n graph.setEdge(v, w, edge, e.name);\n }\n });\n log.warn('Adjusted Graph', graphlib.json.write(graph));\n extractor(graph, 0);\n\n log.trace(clusterDb);\n\n // Remove references to extracted cluster\n // graph.edges().forEach(edge => {\n // if (isDecendant(edge.v, clusterId) || isDecendant(edge.w, clusterId)) {\n // graph.removeEdge(edge);\n // }\n // });\n};\n\nexport const extractor = (graph, depth) => {\n log.warn('extractor - ', depth, graphlib.json.write(graph), graph.children('D'));\n if (depth > 10) {\n log.error('Bailing out');\n return;\n }\n // For clusters without incoming and/or outgoing edges, create a new cluster-node\n // containing the nodes and edges in the custer in a new graph\n // for (let i = 0;)\n let nodes = graph.nodes();\n let hasChildren = false;\n for (let i = 0; i < nodes.length; i++) {\n const node = nodes[i];\n const children = graph.children(node);\n hasChildren = hasChildren || children.length > 0;\n }\n\n if (!hasChildren) {\n log.debug('Done, no node has children', graph.nodes());\n return;\n }\n // const clusters = Object.keys(clusterDb);\n // clusters.forEach(clusterId => {\n log.debug('Nodes = ', nodes, depth);\n for (let i = 0; i < nodes.length; i++) {\n const node = nodes[i];\n\n log.debug(\n 'Extracting node',\n node,\n clusterDb,\n clusterDb[node] && !clusterDb[node].externalConnections,\n !graph.parent(node),\n graph.node(node),\n graph.children('D'),\n ' Depth ',\n depth\n );\n // Note that the node might have been removed after the Object.keys call so better check\n // that it still is in the game\n if (!clusterDb[node]) {\n // Skip if the node is not a cluster\n log.debug('Not a cluster', node, depth);\n // break;\n } else if (\n !clusterDb[node].externalConnections &&\n // !graph.parent(node) &&\n graph.children(node) &&\n graph.children(node).length > 0\n ) {\n log.warn(\n 'Cluster without external connections, without a parent and with children',\n node,\n depth\n );\n\n const graphSettings = graph.graph();\n\n const clusterGraph = new graphlib.Graph({\n multigraph: true,\n compound: true\n })\n .setGraph({\n rankdir: graphSettings.rankdir === 'TB' ? 'LR' : 'TB',\n // Todo: set proper spacing\n nodesep: 50,\n ranksep: 50,\n marginx: 8,\n marginy: 8\n })\n .setDefaultEdgeLabel(function() {\n return {};\n });\n\n log.warn('Old graph before copy', graphlib.json.write(graph));\n copy(node, graph, clusterGraph, node);\n graph.setNode(node, {\n clusterNode: true,\n id: node,\n clusterData: clusterDb[node].clusterData,\n labelText: clusterDb[node].labelText,\n graph: clusterGraph\n });\n log.warn('New graph after copy node: (', node, ')', graphlib.json.write(clusterGraph));\n log.debug('Old graph after copy', graphlib.json.write(graph));\n } else {\n log.warn(\n 'Cluster ** ',\n node,\n ' **not meeting the criteria !externalConnections:',\n !clusterDb[node].externalConnections,\n ' no parent: ',\n !graph.parent(node),\n ' children ',\n graph.children(node) && graph.children(node).length > 0,\n graph.children('D'),\n depth\n );\n log.debug(clusterDb);\n }\n }\n\n nodes = graph.nodes();\n log.warn('New list of nodes', nodes);\n for (let i = 0; i < nodes.length; i++) {\n const node = nodes[i];\n const data = graph.node(node);\n log.warn(' Now next level', node, data);\n if (data.clusterNode) {\n extractor(data.graph, depth + 1);\n }\n }\n};\n\nconst sorter = (graph, nodes) => {\n if (nodes.length === 0) return [];\n let result = Object.assign(nodes);\n nodes.forEach(node => {\n const children = graph.children(node);\n const sorted = sorter(graph, children);\n result = result.concat(sorted);\n });\n\n return result;\n};\n\nexport const sortNodesByHierarchy = graph => sorter(graph, graph.children());\n","function intersectEllipse(node, rx, ry, point) {\n // Formulae from: http://mathworld.wolfram.com/Ellipse-LineIntersection.html\n\n var cx = node.x;\n var cy = node.y;\n\n var px = cx - point.x;\n var py = cy - point.y;\n\n var det = Math.sqrt(rx * rx * py * py + ry * ry * px * px);\n\n var dx = Math.abs((rx * ry * px) / det);\n if (point.x < cx) {\n dx = -dx;\n }\n var dy = Math.abs((rx * ry * py) / det);\n if (point.y < cy) {\n dy = -dy;\n }\n\n return { x: cx + dx, y: cy + dy };\n}\n\nexport default intersectEllipse;\n","import intersectEllipse from './intersect-ellipse';\n\nfunction intersectCircle(node, rx, point) {\n return intersectEllipse(node, rx, rx, point);\n}\n\nexport default intersectCircle;\n","/*\n * Returns the point at which two lines, p and q, intersect or returns\n * undefined if they do not intersect.\n */\nfunction intersectLine(p1, p2, q1, q2) {\n // Algorithm from J. Avro, (ed.) Graphics Gems, No 2, Morgan Kaufmann, 1994,\n // p7 and p473.\n\n var a1, a2, b1, b2, c1, c2;\n var r1, r2, r3, r4;\n var denom, offset, num;\n var x, y;\n\n // Compute a1, b1, c1, where line joining points 1 and 2 is F(x,y) = a1 x +\n // b1 y + c1 = 0.\n a1 = p2.y - p1.y;\n b1 = p1.x - p2.x;\n c1 = p2.x * p1.y - p1.x * p2.y;\n\n // Compute r3 and r4.\n r3 = a1 * q1.x + b1 * q1.y + c1;\n r4 = a1 * q2.x + b1 * q2.y + c1;\n\n // Check signs of r3 and r4. If both point 3 and point 4 lie on\n // same side of line 1, the line segments do not intersect.\n if (r3 !== 0 && r4 !== 0 && sameSign(r3, r4)) {\n return /*DONT_INTERSECT*/;\n }\n\n // Compute a2, b2, c2 where line joining points 3 and 4 is G(x,y) = a2 x + b2 y + c2 = 0\n a2 = q2.y - q1.y;\n b2 = q1.x - q2.x;\n c2 = q2.x * q1.y - q1.x * q2.y;\n\n // Compute r1 and r2\n r1 = a2 * p1.x + b2 * p1.y + c2;\n r2 = a2 * p2.x + b2 * p2.y + c2;\n\n // Check signs of r1 and r2. If both point 1 and point 2 lie\n // on same side of second line segment, the line segments do\n // not intersect.\n if (r1 !== 0 && r2 !== 0 && sameSign(r1, r2)) {\n return /*DONT_INTERSECT*/;\n }\n\n // Line segments intersect: compute intersection point.\n denom = a1 * b2 - a2 * b1;\n if (denom === 0) {\n return /*COLLINEAR*/;\n }\n\n offset = Math.abs(denom / 2);\n\n // The denom/2 is to get rounding instead of truncating. It\n // is added or subtracted to the numerator, depending upon the\n // sign of the numerator.\n num = b1 * c2 - b2 * c1;\n x = num < 0 ? (num - offset) / denom : (num + offset) / denom;\n\n num = a2 * c1 - a1 * c2;\n y = num < 0 ? (num - offset) / denom : (num + offset) / denom;\n\n return { x: x, y: y };\n}\n\nfunction sameSign(r1, r2) {\n return r1 * r2 > 0;\n}\n\nexport default intersectLine;\n","/* eslint \"no-console\": off */\n\nimport intersectLine from './intersect-line';\n\nexport default intersectPolygon;\n\n/*\n * Returns the point ({x, y}) at which the point argument intersects with the\n * node argument assuming that it has the shape specified by polygon.\n */\nfunction intersectPolygon(node, polyPoints, point) {\n var x1 = node.x;\n var y1 = node.y;\n\n var intersections = [];\n\n var minX = Number.POSITIVE_INFINITY;\n var minY = Number.POSITIVE_INFINITY;\n if (typeof polyPoints.forEach === 'function') {\n polyPoints.forEach(function(entry) {\n minX = Math.min(minX, entry.x);\n minY = Math.min(minY, entry.y);\n });\n } else {\n minX = Math.min(minX, polyPoints.x);\n minY = Math.min(minY, polyPoints.y);\n }\n\n var left = x1 - node.width / 2 - minX;\n var top = y1 - node.height / 2 - minY;\n\n for (var i = 0; i < polyPoints.length; i++) {\n var p1 = polyPoints[i];\n var p2 = polyPoints[i < polyPoints.length - 1 ? i + 1 : 0];\n var intersect = intersectLine(\n node,\n point,\n { x: left + p1.x, y: top + p1.y },\n { x: left + p2.x, y: top + p2.y }\n );\n if (intersect) {\n intersections.push(intersect);\n }\n }\n\n if (!intersections.length) {\n // console.log('NO INTERSECTION FOUND, RETURN NODE CENTER', node);\n return node;\n }\n\n if (intersections.length > 1) {\n // More intersections, find the one nearest to edge end point\n intersections.sort(function(p, q) {\n var pdx = p.x - point.x;\n var pdy = p.y - point.y;\n var distp = Math.sqrt(pdx * pdx + pdy * pdy);\n\n var qdx = q.x - point.x;\n var qdy = q.y - point.y;\n var distq = Math.sqrt(qdx * qdx + qdy * qdy);\n\n return distp < distq ? -1 : distp === distq ? 0 : 1;\n });\n }\n return intersections[0];\n}\n","const intersectRect = (node, point) => {\n var x = node.x;\n var y = node.y;\n\n // Rectangle intersection algorithm from:\n // http://math.stackexchange.com/questions/108113/find-edge-between-two-boxes\n var dx = point.x - x;\n var dy = point.y - y;\n var w = node.width / 2;\n var h = node.height / 2;\n\n var sx, sy;\n if (Math.abs(dy) * w > Math.abs(dx) * h) {\n // Intersection is top or bottom of rect.\n if (dy < 0) {\n h = -h;\n }\n sx = dy === 0 ? 0 : (h * dx) / dy;\n sy = h;\n } else {\n // Intersection is left or right of rect.\n if (dx < 0) {\n w = -w;\n }\n sx = w;\n sy = dx === 0 ? 0 : (w * dy) / dx;\n }\n\n return { x: x + sx, y: y + sy };\n};\n\nexport default intersectRect;\n","/*\n * Borrowed with love from from dagrge-d3. Many thanks to cpettitt!\n */\n\nimport node from './intersect-node.js';\nimport circle from './intersect-circle.js';\nimport ellipse from './intersect-ellipse.js';\nimport polygon from './intersect-polygon.js';\nimport rect from './intersect-rect.js';\n\nexport default {\n node,\n circle,\n ellipse,\n polygon,\n rect\n};\n","import { updateNodeBounds, labelHelper } from './util';\nimport { logger } from '../../logger'; // eslint-disable-line\nimport intersect from '../intersect/index.js';\n\nconst note = (parent, node) => {\n const { shapeSvg, bbox, halfPadding } = labelHelper(parent, node, 'node ' + node.classes, true);\n\n logger.info('Classes = ', node.classes);\n // add the rect\n const rect = shapeSvg.insert('rect', ':first-child');\n\n rect\n .attr('rx', node.rx)\n .attr('ry', node.ry)\n .attr('x', -bbox.width / 2 - halfPadding)\n .attr('y', -bbox.height / 2 - halfPadding)\n .attr('width', bbox.width + node.padding)\n .attr('height', bbox.height + node.padding);\n\n updateNodeBounds(node, rect);\n\n node.intersect = function(point) {\n return intersect.rect(node, point);\n };\n\n return shapeSvg;\n};\n\nexport default note;\n","import { select } from 'd3';\nimport { logger } from '../../logger';\nimport * as configApi from '../../config';\nimport common from '../common/common';\nimport utils from '../../utils';\nimport mermaidAPI from '../../mermaidAPI';\n\nconst MERMAID_DOM_ID_PREFIX = 'classid-';\n\nlet relations = [];\nlet classes = {};\nlet classCounter = 0;\n\nlet funs = [];\n\nexport const parseDirective = function(statement, context, type) {\n mermaidAPI.parseDirective(this, statement, context, type);\n};\n\nconst splitClassNameAndType = function(id) {\n let genericType = '';\n let className = id;\n\n if (id.indexOf('~') > 0) {\n let split = id.split('~');\n className = split[0];\n\n genericType = split[1];\n }\n\n return { className: className, type: genericType };\n};\n\n/**\n * Function called by parser when a node definition has been found.\n * @param id\n * @public\n */\nexport const addClass = function(id) {\n let classId = splitClassNameAndType(id);\n // Only add class if not exists\n if (typeof classes[classId.className] !== 'undefined') return;\n\n classes[classId.className] = {\n id: classId.className,\n type: classId.type,\n cssClasses: [],\n methods: [],\n members: [],\n annotations: [],\n domId: MERMAID_DOM_ID_PREFIX + classId.className + '-' + classCounter\n };\n\n classCounter++;\n};\n\n/**\n * Function to lookup domId from id in the graph definition.\n * @param id\n * @public\n */\nexport const lookUpDomId = function(id) {\n const classKeys = Object.keys(classes);\n for (let i = 0; i < classKeys.length; i++) {\n if (classes[classKeys[i]].id === id) {\n return classes[classKeys[i]].domId;\n }\n }\n};\n\nexport const clear = function() {\n relations = [];\n classes = {};\n funs = [];\n funs.push(setupToolTips);\n};\n\nexport const getClass = function(id) {\n return classes[id];\n};\nexport const getClasses = function() {\n return classes;\n};\n\nexport const getRelations = function() {\n return relations;\n};\n\nexport const addRelation = function(relation) {\n logger.debug('Adding relation: ' + JSON.stringify(relation));\n addClass(relation.id1);\n addClass(relation.id2);\n\n relation.id1 = splitClassNameAndType(relation.id1).className;\n relation.id2 = splitClassNameAndType(relation.id2).className;\n\n relations.push(relation);\n};\n\n/**\n * Adds an annotation to the specified class\n * Annotations mark special properties of the given type (like 'interface' or 'service')\n * @param className The class name\n * @param annotation The name of the annotation without any brackets\n * @public\n */\nexport const addAnnotation = function(className, annotation) {\n const validatedClassName = splitClassNameAndType(className).className;\n classes[validatedClassName].annotations.push(annotation);\n};\n\n/**\n * Adds a member to the specified class\n * @param className The class name\n * @param member The full name of the member.\n * If the member is enclosed in <
'), node.labelStyle, true, true));\n\n if (getConfig().flowchart.htmlLabels) {\n const div = descr.children[0];\n const dv = select(descr);\n bbox = div.getBoundingClientRect();\n dv.attr('width', bbox.width);\n dv.attr('height', bbox.height);\n }\n // bbox = label.getBBox();\n // logger.info(descr);\n const halfPadding = node.padding / 2;\n select(descr).attr(\n 'transform',\n 'translate( ' +\n // (titleBox.width - bbox.width) / 2 +\n (bbox.width > titleBox.width ? 0 : (titleBox.width - bbox.width) / 2) +\n ', ' +\n (titleBox.height + halfPadding + 5) +\n ')'\n );\n select(text).attr(\n 'transform',\n 'translate( ' +\n // (titleBox.width - bbox.width) / 2 +\n (bbox.width < titleBox.width ? 0 : -(titleBox.width - bbox.width) / 2) +\n ', ' +\n 0 +\n ')'\n );\n // Get the size of the label\n\n // Bounding box for title and text\n bbox = label.node().getBBox();\n\n // Center the label\n label.attr(\n 'transform',\n 'translate(' + -bbox.width / 2 + ', ' + (-bbox.height / 2 - halfPadding + 3) + ')'\n );\n\n rect\n .attr('class', 'outer title-state')\n .attr('x', -bbox.width / 2 - halfPadding)\n .attr('y', -bbox.height / 2 - halfPadding)\n .attr('width', bbox.width + node.padding)\n .attr('height', bbox.height + node.padding);\n\n innerLine\n .attr('class', 'divider')\n .attr('x1', -bbox.width / 2 - halfPadding)\n .attr('x2', bbox.width / 2 + halfPadding)\n .attr('y1', -bbox.height / 2 - halfPadding + titleBox.height + halfPadding)\n .attr('y2', -bbox.height / 2 - halfPadding + titleBox.height + halfPadding);\n\n updateNodeBounds(node, rect);\n\n node.intersect = function(point) {\n return intersect.rect(node, point);\n };\n\n return shapeSvg;\n};\n\nconst stadium = (parent, node) => {\n const { shapeSvg, bbox } = labelHelper(parent, node, undefined, true);\n\n const h = bbox.height + node.padding;\n const w = bbox.width + h / 4 + node.padding;\n\n // add the rect\n const rect = shapeSvg\n .insert('rect', ':first-child')\n .attr('rx', h / 2)\n .attr('ry', h / 2)\n .attr('x', -w / 2)\n .attr('y', -h / 2)\n .attr('width', w)\n .attr('height', h);\n\n updateNodeBounds(node, rect);\n\n node.intersect = function(point) {\n return intersect.rect(node, point);\n };\n\n return shapeSvg;\n};\nconst circle = (parent, node) => {\n const { shapeSvg, bbox, halfPadding } = labelHelper(parent, node, undefined, true);\n const circle = shapeSvg.insert('circle', ':first-child');\n\n // center the circle around its coordinate\n circle\n .attr('rx', node.rx)\n .attr('ry', node.ry)\n .attr('r', bbox.width / 2 + halfPadding)\n .attr('width', bbox.width + node.padding)\n .attr('height', bbox.height + node.padding);\n\n logger.info('Circle main');\n\n updateNodeBounds(node, circle);\n\n node.intersect = function(point) {\n logger.info('Circle intersect', node, bbox.width / 2 + halfPadding, point);\n return intersect.circle(node, bbox.width / 2 + halfPadding, point);\n };\n\n return shapeSvg;\n};\n\nconst subroutine = (parent, node) => {\n const { shapeSvg, bbox } = labelHelper(parent, node, undefined, true);\n\n const w = bbox.width + node.padding;\n const h = bbox.height + node.padding;\n const points = [\n { x: 0, y: 0 },\n { x: w, y: 0 },\n { x: w, y: -h },\n { x: 0, y: -h },\n { x: 0, y: 0 },\n { x: -8, y: 0 },\n { x: w + 8, y: 0 },\n { x: w + 8, y: -h },\n { x: -8, y: -h },\n { x: -8, y: 0 }\n ];\n const el = insertPolygonShape(shapeSvg, w, h, points);\n updateNodeBounds(node, el);\n\n node.intersect = function(point) {\n return intersect.polygon(node, point);\n };\n\n return shapeSvg;\n};\n\nconst start = (parent, node) => {\n const shapeSvg = parent\n .insert('g')\n .attr('class', 'node default')\n .attr('id', node.domId || node.id);\n const circle = shapeSvg.insert('circle', ':first-child');\n\n // center the circle around its coordinate\n circle\n .attr('class', 'state-start')\n .attr('r', 7)\n .attr('width', 14)\n .attr('height', 14);\n\n updateNodeBounds(node, circle);\n\n node.intersect = function(point) {\n return intersect.circle(node, 7, point);\n };\n\n return shapeSvg;\n};\n\nconst forkJoin = (parent, node, dir) => {\n const shapeSvg = parent\n .insert('g')\n .attr('class', 'node default')\n .attr('id', node.domId || node.id);\n\n let width = 70;\n let height = 10;\n\n if (dir === 'LR') {\n width = 10;\n height = 70;\n }\n\n const shape = shapeSvg\n .append('rect')\n .style('stroke', 'black')\n .style('fill', 'black')\n .attr('x', (-1 * width) / 2)\n .attr('y', (-1 * height) / 2)\n .attr('width', width)\n .attr('height', height)\n .attr('class', 'fork-join');\n\n updateNodeBounds(node, shape);\n node.height = node.height + node.padding / 2;\n node.width = node.width + node.padding / 2;\n node.intersect = function(point) {\n return intersect.rect(node, point);\n };\n\n return shapeSvg;\n};\n\nconst end = (parent, node) => {\n const shapeSvg = parent\n .insert('g')\n .attr('class', 'node default')\n .attr('id', node.domId || node.id);\n const innerCircle = shapeSvg.insert('circle', ':first-child');\n const circle = shapeSvg.insert('circle', ':first-child');\n\n circle\n .attr('class', 'state-start')\n .attr('r', 7)\n .attr('width', 14)\n .attr('height', 14);\n\n innerCircle\n .attr('class', 'state-end')\n .attr('r', 5)\n .attr('width', 10)\n .attr('height', 10);\n\n updateNodeBounds(node, circle);\n\n node.intersect = function(point) {\n return intersect.circle(node, 7, point);\n };\n\n return shapeSvg;\n};\n\nconst class_box = (parent, node) => {\n const halfPadding = node.padding / 2;\n const rowPadding = 4;\n const lineHeight = 8;\n\n let classes;\n if (!node.classes) {\n classes = 'node default';\n } else {\n classes = 'node ' + node.classes;\n }\n // Add outer g element\n const shapeSvg = parent\n .insert('g')\n .attr('class', classes)\n .attr('id', node.domId || node.id);\n\n // Create the title label and insert it after the rect\n const rect = shapeSvg.insert('rect', ':first-child');\n const topLine = shapeSvg.insert('line');\n const bottomLine = shapeSvg.insert('line');\n let maxWidth = 0;\n let maxHeight = rowPadding;\n\n const labelContainer = shapeSvg.insert('g').attr('class', 'label');\n let verticalPos = 0;\n const hasInterface = node.classData.annotations && node.classData.annotations[0];\n\n // 1. Create the labels\n const interfaceLabelText = node.classData.annotations[0]\n ? '«' + node.classData.annotations[0] + '»'\n : '';\n const interfaceLabel = labelContainer\n .node()\n .appendChild(createLabel(interfaceLabelText, node.labelStyle, true, true));\n let interfaceBBox = interfaceLabel.getBBox();\n if (getConfig().flowchart.htmlLabels) {\n const div = interfaceLabel.children[0];\n const dv = select(interfaceLabel);\n interfaceBBox = div.getBoundingClientRect();\n dv.attr('width', interfaceBBox.width);\n dv.attr('height', interfaceBBox.height);\n }\n if (node.classData.annotations[0]) {\n maxHeight += interfaceBBox.height + rowPadding;\n maxWidth += interfaceBBox.width;\n }\n\n let classTitleString = node.classData.id;\n\n if (node.classData.type !== undefined && node.classData.type !== '') {\n classTitleString += '<' + node.classData.type + '>';\n }\n const classTitleLabel = labelContainer\n .node()\n .appendChild(createLabel(classTitleString, node.labelStyle, true, true));\n select(classTitleLabel).attr('class', 'classTitle');\n let classTitleBBox = classTitleLabel.getBBox();\n if (getConfig().flowchart.htmlLabels) {\n const div = classTitleLabel.children[0];\n const dv = select(classTitleLabel);\n classTitleBBox = div.getBoundingClientRect();\n dv.attr('width', classTitleBBox.width);\n dv.attr('height', classTitleBBox.height);\n }\n maxHeight += classTitleBBox.height + rowPadding;\n if (classTitleBBox.width > maxWidth) {\n maxWidth = classTitleBBox.width;\n }\n const classAttributes = [];\n node.classData.members.forEach(str => {\n const parsedText = parseMember(str).displayText;\n const lbl = labelContainer\n .node()\n .appendChild(createLabel(parsedText, node.labelStyle, true, true));\n let bbox = lbl.getBBox();\n if (getConfig().flowchart.htmlLabels) {\n const div = lbl.children[0];\n const dv = select(lbl);\n bbox = div.getBoundingClientRect();\n dv.attr('width', bbox.width);\n dv.attr('height', bbox.height);\n }\n if (bbox.width > maxWidth) {\n maxWidth = bbox.width;\n }\n maxHeight += bbox.height + rowPadding;\n classAttributes.push(lbl);\n });\n\n maxHeight += lineHeight;\n\n const classMethods = [];\n node.classData.methods.forEach(str => {\n const parsedText = parseMember(str).displayText;\n const lbl = labelContainer\n .node()\n .appendChild(createLabel(parsedText, node.labelStyle, true, true));\n let bbox = lbl.getBBox();\n if (getConfig().flowchart.htmlLabels) {\n const div = lbl.children[0];\n const dv = select(lbl);\n bbox = div.getBoundingClientRect();\n dv.attr('width', bbox.width);\n dv.attr('height', bbox.height);\n }\n if (bbox.width > maxWidth) {\n maxWidth = bbox.width;\n }\n maxHeight += bbox.height + rowPadding;\n\n classMethods.push(lbl);\n });\n\n maxHeight += lineHeight;\n\n // 2. Position the labels\n\n // position the interface label\n if (hasInterface) {\n let diffX = (maxWidth - interfaceBBox.width) / 2;\n select(interfaceLabel).attr(\n 'transform',\n 'translate( ' + ((-1 * maxWidth) / 2 + diffX) + ', ' + (-1 * maxHeight) / 2 + ')'\n );\n verticalPos = interfaceBBox.height + rowPadding;\n }\n // Positin the class title label\n let diffX = (maxWidth - classTitleBBox.width) / 2;\n select(classTitleLabel).attr(\n 'transform',\n 'translate( ' +\n ((-1 * maxWidth) / 2 + diffX) +\n ', ' +\n ((-1 * maxHeight) / 2 + verticalPos) +\n ')'\n );\n verticalPos += classTitleBBox.height + rowPadding;\n\n topLine\n .attr('class', 'divider')\n .attr('x1', -maxWidth / 2 - halfPadding)\n .attr('x2', maxWidth / 2 + halfPadding)\n .attr('y1', -maxHeight / 2 - halfPadding + lineHeight + verticalPos)\n .attr('y2', -maxHeight / 2 - halfPadding + lineHeight + verticalPos);\n\n verticalPos += lineHeight;\n\n classAttributes.forEach(lbl => {\n select(lbl).attr(\n 'transform',\n 'translate( ' +\n -maxWidth / 2 +\n ', ' +\n ((-1 * maxHeight) / 2 + verticalPos + lineHeight / 2) +\n ')'\n );\n verticalPos += classTitleBBox.height + rowPadding;\n });\n\n verticalPos += lineHeight;\n bottomLine\n .attr('class', 'divider')\n .attr('x1', -maxWidth / 2 - halfPadding)\n .attr('x2', maxWidth / 2 + halfPadding)\n .attr('y1', -maxHeight / 2 - halfPadding + lineHeight + verticalPos)\n .attr('y2', -maxHeight / 2 - halfPadding + lineHeight + verticalPos);\n\n verticalPos += lineHeight;\n\n classMethods.forEach(lbl => {\n select(lbl).attr(\n 'transform',\n 'translate( ' + -maxWidth / 2 + ', ' + ((-1 * maxHeight) / 2 + verticalPos) + ')'\n );\n verticalPos += classTitleBBox.height + rowPadding;\n });\n //\n // let bbox;\n // if (getConfig().flowchart.htmlLabels) {\n // const div = interfaceLabel.children[0];\n // const dv = select(interfaceLabel);\n // bbox = div.getBoundingClientRect();\n // dv.attr('width', bbox.width);\n // dv.attr('height', bbox.height);\n // }\n // bbox = labelContainer.getBBox();\n\n // logger.info('Text 2', text2);\n // const textRows = text2.slice(1, text2.length);\n // let titleBox = text.getBBox();\n // const descr = label\n // .node()\n // .appendChild(createLabel(textRows.join('
'), node.labelStyle, true, true));\n\n // if (getConfig().flowchart.htmlLabels) {\n // const div = descr.children[0];\n // const dv = select(descr);\n // bbox = div.getBoundingClientRect();\n // dv.attr('width', bbox.width);\n // dv.attr('height', bbox.height);\n // }\n // // bbox = label.getBBox();\n // // logger.info(descr);\n // select(descr).attr(\n // 'transform',\n // 'translate( ' +\n // // (titleBox.width - bbox.width) / 2 +\n // (bbox.width > titleBox.width ? 0 : (titleBox.width - bbox.width) / 2) +\n // ', ' +\n // (titleBox.height + halfPadding + 5) +\n // ')'\n // );\n // select(text).attr(\n // 'transform',\n // 'translate( ' +\n // // (titleBox.width - bbox.width) / 2 +\n // (bbox.width < titleBox.width ? 0 : -(titleBox.width - bbox.width) / 2) +\n // ', ' +\n // 0 +\n // ')'\n // );\n // // Get the size of the label\n\n // // Bounding box for title and text\n // bbox = label.node().getBBox();\n\n // // Center the label\n // label.attr(\n // 'transform',\n // 'translate(' + -bbox.width / 2 + ', ' + (-bbox.height / 2 - halfPadding + 3) + ')'\n // );\n\n rect\n .attr('class', 'outer title-state')\n .attr('x', -maxWidth / 2 - halfPadding)\n .attr('y', -(maxHeight / 2) - halfPadding)\n .attr('width', maxWidth + node.padding)\n .attr('height', maxHeight + node.padding);\n\n // innerLine\n // .attr('class', 'divider')\n // .attr('x1', -bbox.width / 2 - halfPadding)\n // .attr('x2', bbox.width / 2 + halfPadding)\n // .attr('y1', -bbox.height / 2 - halfPadding + titleBox.height + halfPadding)\n // .attr('y2', -bbox.height / 2 - halfPadding + titleBox.height + halfPadding);\n\n updateNodeBounds(node, rect);\n\n node.intersect = function(point) {\n return intersect.rect(node, point);\n };\n\n return shapeSvg;\n};\n\nconst shapes = {\n question,\n rect,\n rectWithTitle,\n circle,\n stadium,\n hexagon,\n rect_left_inv_arrow,\n lean_right,\n lean_left,\n trapezoid,\n inv_trapezoid,\n rect_right_inv_arrow,\n cylinder,\n start,\n end,\n note,\n subroutine,\n fork: forkJoin,\n join: forkJoin,\n class_box\n};\n\nlet nodeElems = {};\n\nexport const insertNode = (elem, node, dir) => {\n let newEl;\n let el;\n\n // Add link when appropriate\n if (node.link) {\n newEl = elem\n .insert('svg:a')\n .attr('xlink:href', node.link)\n .attr('target', node.linkTarget || '_blank');\n el = shapes[node.shape](newEl, node, dir);\n } else {\n el = shapes[node.shape](elem, node, dir);\n newEl = el;\n }\n if (node.tooltip) {\n el.attr('title', node.tooltip);\n }\n if (node.class) {\n el.attr('class', 'node default ' + node.class);\n }\n\n nodeElems[node.id] = newEl;\n\n if (node.haveCallback) {\n nodeElems[node.id].attr('class', nodeElems[node.id].attr('class') + ' clickable');\n }\n};\nexport const setNodeElem = (elem, node) => {\n nodeElems[node.id] = elem;\n};\nexport const clear = () => {\n nodeElems = {};\n};\n\nexport const positionNode = node => {\n const el = nodeElems[node.id];\n logger.trace(\n 'Transforming node',\n node,\n 'translate(' + (node.x - node.width / 2 - 5) + ', ' + (node.y - node.height / 2 - 5) + ')'\n );\n const padding = 8;\n if (node.clusterNode) {\n el.attr(\n 'transform',\n 'translate(' +\n (node.x - node.width / 2 - padding) +\n ', ' +\n (node.y - node.height / 2 - padding) +\n ')'\n );\n } else {\n el.attr('transform', 'translate(' + node.x + ', ' + node.y + ')');\n }\n};\n","import intersectRect from './intersect/intersect-rect';\nimport { logger as log } from '../logger'; // eslint-disable-line\nimport createLabel from './createLabel';\nimport { select } from 'd3';\nimport { getConfig } from '../config';\n\nconst rect = (parent, node) => {\n log.trace('Creating subgraph rect for ', node.id, node);\n\n // Add outer g element\n const shapeSvg = parent\n .insert('g')\n .attr('class', 'cluster' + (node.class ? ' ' + node.class : ''))\n .attr('id', node.id);\n\n // add the rect\n const rect = shapeSvg.insert('rect', ':first-child');\n\n // Create the label and insert it after the rect\n const label = shapeSvg.insert('g').attr('class', 'cluster-label');\n\n const text = label\n .node()\n .appendChild(createLabel(node.labelText, node.labelStyle, undefined, true));\n\n // Get the size of the label\n let bbox = text.getBBox();\n\n if (getConfig().flowchart.htmlLabels) {\n const div = text.children[0];\n const dv = select(text);\n bbox = div.getBoundingClientRect();\n dv.attr('width', bbox.width);\n dv.attr('height', bbox.height);\n }\n\n const padding = 0 * node.padding;\n const halfPadding = padding / 2;\n\n log.trace('Data ', node, JSON.stringify(node));\n // center the rect around its coordinate\n rect\n .attr('rx', node.rx)\n .attr('ry', node.ry)\n .attr('x', node.x - node.width / 2 - halfPadding)\n .attr('y', node.y - node.height / 2 - halfPadding)\n .attr('width', node.width + padding)\n .attr('height', node.height + padding);\n\n // Center the label\n label.attr(\n 'transform',\n 'translate(' +\n (node.x - bbox.width / 2) +\n ', ' +\n (node.y - node.height / 2 - node.padding / 3 + 3) +\n ')'\n );\n\n const rectBox = rect.node().getBBox();\n node.width = rectBox.width;\n node.height = rectBox.height;\n\n node.intersect = function(point) {\n return intersectRect(node, point);\n };\n\n return shapeSvg;\n};\n\n/**\n * Non visiable cluster where the note is group with its\n */\nconst noteGroup = (parent, node) => {\n // Add outer g element\n const shapeSvg = parent\n .insert('g')\n .attr('class', 'note-cluster')\n .attr('id', node.id);\n\n // add the rect\n const rect = shapeSvg.insert('rect', ':first-child');\n\n const padding = 0 * node.padding;\n const halfPadding = padding / 2;\n\n // center the rect around its coordinate\n rect\n .attr('rx', node.rx)\n .attr('ry', node.ry)\n .attr('x', node.x - node.width / 2 - halfPadding)\n .attr('y', node.y - node.height / 2 - halfPadding)\n .attr('width', node.width + padding)\n .attr('height', node.height + padding)\n .attr('fill', 'none');\n\n const rectBox = rect.node().getBBox();\n node.width = rectBox.width;\n node.height = rectBox.height;\n\n node.intersect = function(point) {\n return intersectRect(node, point);\n };\n\n return shapeSvg;\n};\nconst roundedWithTitle = (parent, node) => {\n // Add outer g element\n const shapeSvg = parent\n .insert('g')\n .attr('class', node.classes)\n .attr('id', node.id);\n\n // add the rect\n const rect = shapeSvg.insert('rect', ':first-child');\n\n // Create the label and insert it after the rect\n const label = shapeSvg.insert('g').attr('class', 'cluster-label');\n const innerRect = shapeSvg.append('rect');\n\n const text = label\n .node()\n .appendChild(createLabel(node.labelText, node.labelStyle, undefined, true));\n\n // Get the size of the label\n let bbox = text.getBBox();\n if (getConfig().flowchart.htmlLabels) {\n const div = text.children[0];\n const dv = select(text);\n bbox = div.getBoundingClientRect();\n dv.attr('width', bbox.width);\n dv.attr('height', bbox.height);\n }\n bbox = text.getBBox();\n const padding = 0 * node.padding;\n const halfPadding = padding / 2;\n\n // center the rect around its coordinate\n rect\n .attr('class', 'outer')\n .attr('x', node.x - node.width / 2 - halfPadding)\n .attr('y', node.y - node.height / 2 - halfPadding)\n .attr('width', node.width + padding)\n .attr('height', node.height + padding);\n innerRect\n .attr('class', 'inner')\n .attr('x', node.x - node.width / 2 - halfPadding)\n .attr('y', node.y - node.height / 2 - halfPadding + bbox.height - 1)\n .attr('width', node.width + padding)\n .attr('height', node.height + padding - bbox.height - 3);\n\n // Center the label\n label.attr(\n 'transform',\n 'translate(' +\n (node.x - bbox.width / 2) +\n ', ' +\n (node.y - node.height / 2 - node.padding / 3 + (getConfig().flowchart.htmlLabels ? 5 : 3)) +\n ')'\n );\n\n const rectBox = rect.node().getBBox();\n node.width = rectBox.width;\n node.height = rectBox.height;\n\n node.intersect = function(point) {\n return intersectRect(node, point);\n };\n\n return shapeSvg;\n};\n\nconst divider = (parent, node) => {\n // Add outer g element\n const shapeSvg = parent\n .insert('g')\n .attr('class', node.classes)\n .attr('id', node.id);\n\n // add the rect\n const rect = shapeSvg.insert('rect', ':first-child');\n\n const padding = 0 * node.padding;\n const halfPadding = padding / 2;\n\n // center the rect around its coordinate\n rect\n .attr('class', 'divider')\n .attr('x', node.x - node.width / 2 - halfPadding)\n .attr('y', node.y - node.height / 2)\n .attr('width', node.width + padding)\n .attr('height', node.height + padding);\n\n const rectBox = rect.node().getBBox();\n node.width = rectBox.width;\n node.height = rectBox.height;\n\n node.intersect = function(point) {\n return intersectRect(node, point);\n };\n\n return shapeSvg;\n};\n\nconst shapes = { rect, roundedWithTitle, noteGroup, divider };\n\nlet clusterElems = {};\n\nexport const insertCluster = (elem, node) => {\n log.trace('Inserting cluster');\n const shape = node.shape || 'rect';\n clusterElems[node.id] = shapes[shape](elem, node);\n};\nexport const getClusterTitleWidth = (elem, node) => {\n const label = createLabel(node.labelText, node.labelStyle, undefined, true);\n elem.node().appendChild(label);\n const width = label.getBBox().width;\n elem.node().removeChild(label);\n return width;\n};\n\nexport const clear = () => {\n clusterElems = {};\n};\n\nexport const positionCluster = node => {\n log.info('Position cluster');\n const el = clusterElems[node.id];\n\n el.attr('transform', 'translate(' + node.x + ', ' + node.y + ')');\n};\n","import { logger } from '../logger'; // eslint-disable-line\nimport createLabel from './createLabel';\nimport { line, curveBasis, select } from 'd3';\nimport { getConfig } from '../config';\nimport utils from '../utils';\n// import { calcLabelPosition } from '../utils';\n\nlet edgeLabels = {};\nlet terminalLabels = {};\n\nexport const clear = () => {\n edgeLabels = {};\n terminalLabels = {};\n};\n\nexport const insertEdgeLabel = (elem, edge) => {\n // Create the actual text element\n const labelElement = createLabel(edge.label, edge.labelStyle);\n\n // Create outer g, edgeLabel, this will be positioned after graph layout\n const edgeLabel = elem.insert('g').attr('class', 'edgeLabel');\n\n // Create inner g, label, this will be positioned now for centering the text\n const label = edgeLabel.insert('g').attr('class', 'label');\n label.node().appendChild(labelElement);\n\n // Center the label\n let bbox = labelElement.getBBox();\n if (getConfig().flowchart.htmlLabels) {\n const div = labelElement.children[0];\n const dv = select(labelElement);\n bbox = div.getBoundingClientRect();\n dv.attr('width', bbox.width);\n dv.attr('height', bbox.height);\n }\n label.attr('transform', 'translate(' + -bbox.width / 2 + ', ' + -bbox.height / 2 + ')');\n\n // Make element accessible by id for positioning\n edgeLabels[edge.id] = edgeLabel;\n\n // Update the abstract data of the edge with the new information about its width and height\n edge.width = bbox.width;\n edge.height = bbox.height;\n\n if (edge.startLabelLeft) {\n // Create the actual text element\n const startLabelElement = createLabel(edge.startLabelLeft, edge.labelStyle);\n const startEdgeLabelLeft = elem.insert('g').attr('class', 'edgeTerminals');\n const inner = startEdgeLabelLeft.insert('g').attr('class', 'inner');\n inner.node().appendChild(startLabelElement);\n const slBox = startLabelElement.getBBox();\n inner.attr('transform', 'translate(' + -slBox.width / 2 + ', ' + -slBox.height / 2 + ')');\n if (!terminalLabels[edge.id]) {\n terminalLabels[edge.id] = {};\n }\n terminalLabels[edge.id].startLeft = startEdgeLabelLeft;\n }\n if (edge.startLabelRight) {\n // Create the actual text element\n const startLabelElement = createLabel(edge.startLabelRight, edge.labelStyle);\n const startEdgeLabelRight = elem.insert('g').attr('class', 'edgeTerminals');\n const inner = startEdgeLabelRight.insert('g').attr('class', 'inner');\n startEdgeLabelRight.node().appendChild(startLabelElement);\n inner.node().appendChild(startLabelElement);\n const slBox = startLabelElement.getBBox();\n inner.attr('transform', 'translate(' + -slBox.width / 2 + ', ' + -slBox.height / 2 + ')');\n\n if (!terminalLabels[edge.id]) {\n terminalLabels[edge.id] = {};\n }\n terminalLabels[edge.id].startRight = startEdgeLabelRight;\n }\n if (edge.endLabelLeft) {\n // Create the actual text element\n const endLabelElement = createLabel(edge.endLabelLeft, edge.labelStyle);\n const endEdgeLabelLeft = elem.insert('g').attr('class', 'edgeTerminals');\n const inner = endEdgeLabelLeft.insert('g').attr('class', 'inner');\n inner.node().appendChild(endLabelElement);\n const slBox = endLabelElement.getBBox();\n inner.attr('transform', 'translate(' + -slBox.width / 2 + ', ' + -slBox.height / 2 + ')');\n\n endEdgeLabelLeft.node().appendChild(endLabelElement);\n if (!terminalLabels[edge.id]) {\n terminalLabels[edge.id] = {};\n }\n terminalLabels[edge.id].endLeft = endEdgeLabelLeft;\n }\n if (edge.endLabelRight) {\n // Create the actual text element\n const endLabelElement = createLabel(edge.endLabelRight, edge.labelStyle);\n const endEdgeLabelRight = elem.insert('g').attr('class', 'edgeTerminals');\n const inner = endEdgeLabelRight.insert('g').attr('class', 'inner');\n\n inner.node().appendChild(endLabelElement);\n const slBox = endLabelElement.getBBox();\n inner.attr('transform', 'translate(' + -slBox.width / 2 + ', ' + -slBox.height / 2 + ')');\n\n endEdgeLabelRight.node().appendChild(endLabelElement);\n if (!terminalLabels[edge.id]) {\n terminalLabels[edge.id] = {};\n }\n terminalLabels[edge.id].endRight = endEdgeLabelRight;\n }\n};\n\nexport const positionEdgeLabel = (edge, paths) => {\n logger.info('Moving label', edge.id, edge.label, edgeLabels[edge.id]);\n let path = paths.updatedPath ? paths.updatedPath : paths.originalPath;\n if (edge.label) {\n const el = edgeLabels[edge.id];\n let x = edge.x;\n let y = edge.y;\n if (path) {\n // // debugger;\n const pos = utils.calcLabelPosition(path);\n logger.info('Moving label from (', x, ',', y, ') to (', pos.x, ',', pos.y, ')');\n // x = pos.x;\n // y = pos.y;\n }\n el.attr('transform', 'translate(' + x + ', ' + y + ')');\n }\n\n //let path = paths.updatedPath ? paths.updatedPath : paths.originalPath;\n if (edge.startLabelLeft) {\n const el = terminalLabels[edge.id].startLeft;\n let x = edge.x;\n let y = edge.y;\n if (path) {\n // debugger;\n const pos = utils.calcTerminalLabelPosition(0, 'start_left', path);\n x = pos.x;\n y = pos.y;\n }\n el.attr('transform', 'translate(' + x + ', ' + y + ')');\n }\n if (edge.startLabelRight) {\n const el = terminalLabels[edge.id].startRight;\n let x = edge.x;\n let y = edge.y;\n if (path) {\n // debugger;\n const pos = utils.calcTerminalLabelPosition(0, 'start_right', path);\n x = pos.x;\n y = pos.y;\n }\n el.attr('transform', 'translate(' + x + ', ' + y + ')');\n }\n if (edge.endLabelLeft) {\n const el = terminalLabels[edge.id].endLeft;\n let x = edge.x;\n let y = edge.y;\n if (path) {\n // debugger;\n const pos = utils.calcTerminalLabelPosition(0, 'end_left', path);\n x = pos.x;\n y = pos.y;\n }\n el.attr('transform', 'translate(' + x + ', ' + y + ')');\n }\n if (edge.endLabelRight) {\n const el = terminalLabels[edge.id].endRight;\n let x = edge.x;\n let y = edge.y;\n if (path) {\n // debugger;\n const pos = utils.calcTerminalLabelPosition(0, 'end_right', path);\n x = pos.x;\n y = pos.y;\n }\n el.attr('transform', 'translate(' + x + ', ' + y + ')');\n }\n};\n\n// const getRelationType = function(type) {\n// switch (type) {\n// case stateDb.relationType.AGGREGATION:\n// return 'aggregation';\n// case stateDb.relationType.EXTENSION:\n// return 'extension';\n// case stateDb.relationType.COMPOSITION:\n// return 'composition';\n// case stateDb.relationType.DEPENDENCY:\n// return 'dependency';\n// }\n// };\n\nconst outsideNode = (node, point) => {\n // logger.warn('Checking bounds ', node, point);\n const x = node.x;\n const y = node.y;\n const dx = Math.abs(point.x - x);\n const dy = Math.abs(point.y - y);\n const w = node.width / 2;\n const h = node.height / 2;\n if (dx >= w || dy >= h) {\n return true;\n }\n return false;\n};\n\nexport const intersection = (node, outsidePoint, insidePoint) => {\n logger.warn('intersection calc o:', outsidePoint, ' i:', insidePoint, node);\n const x = node.x;\n const y = node.y;\n\n const dx = Math.abs(x - insidePoint.x);\n const w = node.width / 2;\n let r = insidePoint.x < outsidePoint.x ? w - dx : w + dx;\n const h = node.height / 2;\n\n const edges = {\n x1: x - w,\n x2: x + w,\n y1: y - h,\n y2: y + h\n };\n\n if (\n outsidePoint.x === edges.x1 ||\n outsidePoint.x === edges.x2 ||\n outsidePoint.y === edges.y1 ||\n outsidePoint.y === edges.y2\n ) {\n logger.warn('calc equals on edge');\n return outsidePoint;\n }\n\n const Q = Math.abs(outsidePoint.y - insidePoint.y);\n const R = Math.abs(outsidePoint.x - insidePoint.x);\n // log.warn();\n if (Math.abs(y - outsidePoint.y) * w > Math.abs(x - outsidePoint.x) * h) { // eslint-disable-line\n // Intersection is top or bottom of rect.\n // let q = insidePoint.y < outsidePoint.y ? outsidePoint.y - h - y : y - h - outsidePoint.y;\n let q = insidePoint.y < outsidePoint.y ? outsidePoint.y - h - y : y - h - outsidePoint.y;\n r = (R * q) / Q;\n const res = {\n x: insidePoint.x < outsidePoint.x ? insidePoint.x + R - r : insidePoint.x - r,\n y: insidePoint.y < outsidePoint.y ? insidePoint.y + Q - q : insidePoint.y - q\n };\n logger.warn(`topp/bott calc, Q ${Q}, q ${q}, R ${R}, r ${r}`, res);\n\n return res;\n } else {\n // Intersection onn sides of rect\n // q = (Q * r) / R;\n // q = 2;\n // r = (R * q) / Q;\n if (insidePoint.x < outsidePoint.x) {\n r = outsidePoint.x - w - x;\n } else {\n // r = outsidePoint.x - w - x;\n r = x - w - outsidePoint.x;\n }\n let q = (q = (Q * r) / R);\n logger.warn(`sides calc, Q ${Q}, q ${q}, R ${R}, r ${r}`, {\n x: insidePoint.x < outsidePoint.x ? insidePoint.x + R - r : insidePoint.x + dx - w,\n y: insidePoint.y < outsidePoint.y ? insidePoint.y + q : insidePoint.y - q\n });\n\n return {\n x: insidePoint.x < outsidePoint.x ? insidePoint.x + R - r : insidePoint.x + dx - w,\n y: insidePoint.y < outsidePoint.y ? insidePoint.y + q : insidePoint.y - q\n };\n }\n};\n\n//(edgePaths, e, edge, clusterDb, diagramtype, graph)\nexport const insertEdge = function(elem, e, edge, clusterDb, diagramType, graph) {\n let points = edge.points;\n let pointsHasChanged = false;\n const tail = graph.node(e.v);\n var head = graph.node(e.w);\n\n if (head.intersect && tail.intersect) {\n points = points.slice(1, edge.points.length - 1);\n points.unshift(tail.intersect(points[0]));\n logger.info(\n 'Last point',\n points[points.length - 1],\n head,\n head.intersect(points[points.length - 1])\n );\n points.push(head.intersect(points[points.length - 1]));\n }\n if (edge.toCluster) {\n logger.trace('edge', edge);\n logger.trace('to cluster', clusterDb[edge.toCluster]);\n points = [];\n let lastPointOutside;\n let isInside = false;\n edge.points.forEach(point => {\n const node = clusterDb[edge.toCluster].node;\n\n if (!outsideNode(node, point) && !isInside) {\n logger.trace('inside', edge.toCluster, point, lastPointOutside);\n\n // First point inside the rect\n const inter = intersection(node, lastPointOutside, point);\n\n let pointPresent = false;\n points.forEach(p => {\n pointPresent = pointPresent || (p.x === inter.x && p.y === inter.y);\n });\n // if (!pointPresent) {\n if (!points.find(e => e.x === inter.x && e.y === inter.y)) {\n points.push(inter);\n } else {\n logger.warn('no intersect', inter, points);\n }\n isInside = true;\n } else {\n if (!isInside) points.push(point);\n }\n lastPointOutside = point;\n });\n pointsHasChanged = true;\n }\n\n if (edge.fromCluster) {\n logger.trace('edge', edge);\n logger.warn('from cluster', clusterDb[edge.fromCluster]);\n const updatedPoints = [];\n let lastPointOutside;\n let isInside = false;\n for (let i = points.length - 1; i >= 0; i--) {\n const point = points[i];\n const node = clusterDb[edge.fromCluster].node;\n\n if (!outsideNode(node, point) && !isInside) {\n logger.warn('inside', edge.fromCluster, point, node);\n\n // First point inside the rect\n const insterection = intersection(node, lastPointOutside, point);\n // logger.trace('intersect', intersection(node, lastPointOutside, point));\n updatedPoints.unshift(insterection);\n // points.push(insterection);\n isInside = true;\n } else {\n // at the outside\n logger.trace('Outside point', point);\n if (!isInside) updatedPoints.unshift(point);\n }\n lastPointOutside = point;\n }\n points = updatedPoints;\n pointsHasChanged = true;\n }\n\n // The data for our line\n const lineData = points.filter(p => !Number.isNaN(p.y));\n\n // This is the accessor function we talked about above\n const lineFunction = line()\n .x(function(d) {\n return d.x;\n })\n .y(function(d) {\n return d.y;\n })\n .curve(curveBasis);\n\n // Contruct stroke classes based on properties\n let strokeClasses;\n switch (edge.thickness) {\n case 'normal':\n strokeClasses = 'edge-thickness-normal';\n break;\n case 'thick':\n strokeClasses = 'edge-thickness-thick';\n break;\n default:\n strokeClasses = '';\n }\n switch (edge.pattern) {\n case 'solid':\n strokeClasses += ' edge-pattern-solid';\n break;\n case 'dotted':\n strokeClasses += ' edge-pattern-dotted';\n break;\n case 'dashed':\n strokeClasses += ' edge-pattern-dashed';\n break;\n }\n\n const svgPath = elem\n .append('path')\n .attr('d', lineFunction(lineData))\n .attr('id', edge.id)\n .attr('class', ' ' + strokeClasses + (edge.classes ? ' ' + edge.classes : ''))\n .attr('style', edge.style);\n\n // DEBUG code, adds a red circle at each edge coordinate\n // edge.points.forEach(point => {\n // elem\n // .append('circle')\n // .style('stroke', 'red')\n // .style('fill', 'red')\n // .attr('r', 1)\n // .attr('cx', point.x)\n // .attr('cy', point.y);\n // });\n\n let url = '';\n if (getConfig().state.arrowMarkerAbsolute) {\n url =\n window.location.protocol +\n '//' +\n window.location.host +\n window.location.pathname +\n window.location.search;\n url = url.replace(/\\(/g, '\\\\(');\n url = url.replace(/\\)/g, '\\\\)');\n }\n logger.info('arrowTypeStart', edge.arrowTypeStart);\n logger.info('arrowTypeEnd', edge.arrowTypeEnd);\n\n switch (edge.arrowTypeStart) {\n case 'arrow_cross':\n svgPath.attr('marker-start', 'url(' + url + '#' + diagramType + '-crossStart' + ')');\n break;\n case 'arrow_point':\n svgPath.attr('marker-start', 'url(' + url + '#' + diagramType + '-pointStart' + ')');\n break;\n case 'arrow_barb':\n svgPath.attr('marker-start', 'url(' + url + '#' + diagramType + '-barbStart' + ')');\n break;\n case 'arrow_circle':\n svgPath.attr('marker-start', 'url(' + url + '#' + diagramType + '-circleStart' + ')');\n break;\n case 'aggregation':\n svgPath.attr('marker-start', 'url(' + url + '#' + diagramType + '-aggregationStart' + ')');\n break;\n case 'extension':\n svgPath.attr('marker-start', 'url(' + url + '#' + diagramType + '-extensionStart' + ')');\n break;\n case 'composition':\n svgPath.attr('marker-start', 'url(' + url + '#' + diagramType + '-compositionStart' + ')');\n break;\n case 'dependency':\n svgPath.attr('marker-start', 'url(' + url + '#' + diagramType + '-dependencyStart' + ')');\n break;\n default:\n }\n switch (edge.arrowTypeEnd) {\n case 'arrow_cross':\n svgPath.attr('marker-end', 'url(' + url + '#' + diagramType + '-crossEnd' + ')');\n break;\n case 'arrow_point':\n svgPath.attr('marker-end', 'url(' + url + '#' + diagramType + '-pointEnd' + ')');\n break;\n case 'arrow_barb':\n svgPath.attr('marker-end', 'url(' + url + '#' + diagramType + '-barbEnd' + ')');\n break;\n case 'arrow_circle':\n svgPath.attr('marker-end', 'url(' + url + '#' + diagramType + '-circleEnd' + ')');\n break;\n case 'aggregation':\n svgPath.attr('marker-end', 'url(' + url + '#' + diagramType + '-aggregationEnd' + ')');\n break;\n case 'extension':\n svgPath.attr('marker-end', 'url(' + url + '#' + diagramType + '-extensionEnd' + ')');\n break;\n case 'composition':\n svgPath.attr('marker-end', 'url(' + url + '#' + diagramType + '-compositionEnd' + ')');\n break;\n case 'dependency':\n svgPath.attr('marker-end', 'url(' + url + '#' + diagramType + '-dependencyEnd' + ')');\n break;\n default:\n }\n let paths = {};\n if (pointsHasChanged) {\n paths.updatedPath = points;\n }\n paths.originalPath = edge.points;\n return paths;\n};\n","import dagre from 'dagre';\nimport graphlib from 'graphlib';\nimport insertMarkers from './markers';\nimport { updateNodeBounds } from './shapes/util';\nimport {\n clear as clearGraphlib,\n clusterDb,\n adjustClustersAndEdges,\n findNonClusterChild,\n sortNodesByHierarchy\n} from './mermaid-graphlib';\nimport { insertNode, positionNode, clear as clearNodes, setNodeElem } from './nodes';\nimport { insertCluster, clear as clearClusters } from './clusters';\nimport { insertEdgeLabel, positionEdgeLabel, insertEdge, clear as clearEdges } from './edges';\nimport { logger as log } from '../logger';\n\nconst recursiveRender = (_elem, graph, diagramtype, parentCluster) => {\n log.info('Graph in recursive render: XXX', graphlib.json.write(graph), parentCluster);\n const dir = graph.graph().rankdir;\n log.warn('Dir in recursive render - dir:', dir);\n\n const elem = _elem.insert('g').attr('class', 'root'); // eslint-disable-line\n if (!graph.nodes()) {\n log.info('No nodes found for', graph);\n } else {\n log.info('Recursive render XXX', graph.nodes());\n }\n if (graph.edges().length > 0) {\n log.info('Recursive edges', graph.edge(graph.edges()[0]));\n }\n const clusters = elem.insert('g').attr('class', 'clusters'); // eslint-disable-line\n const edgePaths = elem.insert('g').attr('class', 'edgePaths');\n const edgeLabels = elem.insert('g').attr('class', 'edgeLabels');\n const nodes = elem.insert('g').attr('class', 'nodes');\n\n // Insert nodes, this will insert them into the dom and each node will get a size. The size is updated\n // to the abstract node and is later used by dagre for the layout\n graph.nodes().forEach(function(v) {\n const node = graph.node(v);\n if (typeof parentCluster !== 'undefined') {\n const data = JSON.parse(JSON.stringify(parentCluster.clusterData));\n // data.clusterPositioning = true;\n log.info('Setting data for cluster XXX (', v, ') ', data, parentCluster);\n graph.setNode(parentCluster.id, data);\n if (!graph.parent(v)) {\n log.warn('Setting parent', v, parentCluster.id);\n graph.setParent(v, parentCluster.id, data);\n }\n }\n log.info('(Insert) Node XXX' + v + ': ' + JSON.stringify(graph.node(v)));\n if (node && node.clusterNode) {\n // const children = graph.children(v);\n log.info('Cluster identified', v, node, graph.node(v));\n const newEl = recursiveRender(nodes, node.graph, diagramtype, graph.node(v));\n updateNodeBounds(node, newEl);\n setNodeElem(newEl, node);\n\n log.warn('Recursive render complete', newEl, node);\n } else {\n if (graph.children(v).length > 0) {\n // This is a cluster but not to be rendered recusively\n // Render as before\n log.info('Cluster - the non recursive path XXX', v, node.id, node, graph);\n log.info(findNonClusterChild(node.id, graph));\n clusterDb[node.id] = { id: findNonClusterChild(node.id, graph), node };\n // insertCluster(clusters, graph.node(v));\n } else {\n log.info('Node - the non recursive path', v, node.id, node);\n insertNode(nodes, graph.node(v), dir);\n }\n }\n });\n\n // Insert labels, this will insert them into the dom so that the width can be calculated\n // Also figure out which edges point to/from clusters and adjust them accordingly\n // Edges from/to clusters really points to the first child in the cluster.\n // TODO: pick optimal child in the cluster to us as link anchor\n graph.edges().forEach(function(e) {\n const edge = graph.edge(e.v, e.w, e.name);\n log.info('Edge ' + e.v + ' -> ' + e.w + ': ' + JSON.stringify(e));\n log.info('Edge ' + e.v + ' -> ' + e.w + ': ', e, ' ', JSON.stringify(graph.edge(e)));\n\n // Check if link is either from or to a cluster\n log.info('Fix', clusterDb, 'ids:', e.v, e.w, 'Translateing: ', clusterDb[e.v], clusterDb[e.w]);\n insertEdgeLabel(edgeLabels, edge);\n });\n\n graph.edges().forEach(function(e) {\n log.info('Edge ' + e.v + ' -> ' + e.w + ': ' + JSON.stringify(e));\n });\n log.info('#############################################');\n log.info('### Layout ###');\n log.info('#############################################');\n log.info(graph);\n dagre.layout(graph);\n log.info('Graph after layout:', graphlib.json.write(graph));\n // Move the nodes to the correct place\n sortNodesByHierarchy(graph).forEach(function(v) {\n const node = graph.node(v);\n log.info('Position ' + v + ': ' + JSON.stringify(graph.node(v)));\n log.info(\n 'Position ' + v + ': (' + node.x,\n ',' + node.y,\n ') width: ',\n node.width,\n ' height: ',\n node.height\n );\n if (node && node.clusterNode) {\n // clusterDb[node.id].node = node;\n\n positionNode(node);\n } else {\n // Non cluster node\n if (graph.children(v).length > 0) {\n // A cluster in the non-recurive way\n // positionCluster(node);\n insertCluster(clusters, node);\n clusterDb[node.id].node = node;\n } else {\n positionNode(node);\n }\n }\n });\n\n // Move the edge labels to the correct place after layout\n graph.edges().forEach(function(e) {\n const edge = graph.edge(e);\n log.info('Edge ' + e.v + ' -> ' + e.w + ': ' + JSON.stringify(edge), edge);\n\n const paths = insertEdge(edgePaths, e, edge, clusterDb, diagramtype, graph);\n positionEdgeLabel(edge, paths);\n });\n\n return elem;\n};\n\nexport const render = (elem, graph, markers, diagramtype, id) => {\n insertMarkers(elem, markers, diagramtype, id);\n clearNodes();\n clearEdges();\n clearClusters();\n clearGraphlib();\n\n log.warn('Graph at first:', graphlib.json.write(graph));\n adjustClustersAndEdges(graph);\n log.warn('Graph after:', graphlib.json.write(graph));\n // log.warn('Graph ever after:', graphlib.json.write(graph.node('A').graph));\n recursiveRender(elem, graph, diagramtype);\n};\n\n// const shapeDefinitions = {};\n// export const addShape = ({ shapeType: fun }) => {\n// shapeDefinitions[shapeType] = fun;\n// };\n\n// const arrowDefinitions = {};\n// export const addArrow = ({ arrowType: fun }) => {\n// arrowDefinitions[arrowType] = fun;\n// };\n","import graphlib from 'graphlib';\nimport { select, curveLinear, selectAll } from 'd3';\n\nimport flowDb from './flowDb';\nimport flow from './parser/flow';\nimport { getConfig } from '../../config';\n\nimport { render } from '../../dagre-wrapper/index.js';\nimport addHtmlLabel from 'dagre-d3/lib/label/add-html-label.js';\nimport { logger } from '../../logger';\nimport common from '../common/common';\nimport { interpolateToCurve, getStylesFromArray, configureSvgSize } from '../../utils';\n\nconst conf = {};\nexport const setConf = function(cnf) {\n const keys = Object.keys(cnf);\n for (let i = 0; i < keys.length; i++) {\n conf[keys[i]] = cnf[keys[i]];\n }\n};\n\n/**\n * Function that adds the vertices found during parsing to the graph to be rendered.\n * @param vert Object containing the vertices.\n * @param g The graph that is to be drawn.\n */\nexport const addVertices = function(vert, g, svgId) {\n const svg = select(`[id=\"${svgId}\"]`);\n const keys = Object.keys(vert);\n\n // Iterate through each item in the vertex object (containing all the vertices found) in the graph definition\n keys.forEach(function(id) {\n const vertex = vert[id];\n\n /**\n * Variable for storing the classes for the vertex\n * @type {string}\n */\n let classStr = 'default';\n if (vertex.classes.length > 0) {\n classStr = vertex.classes.join(' ');\n }\n\n const styles = getStylesFromArray(vertex.styles);\n\n // Use vertex id as text in the box if no text is provided by the graph definition\n let vertexText = vertex.text !== undefined ? vertex.text : vertex.id;\n\n // We create a SVG label, either by delegating to addHtmlLabel or manually\n let vertexNode;\n if (getConfig().flowchart.htmlLabels) {\n // TODO: addHtmlLabel accepts a labelStyle. Do we possibly have that?\n const node = {\n label: vertexText.replace(\n /fa[lrsb]?:fa-[\\w-]+/g,\n s => ``\n )\n };\n vertexNode = addHtmlLabel(svg, node).node();\n vertexNode.parentNode.removeChild(vertexNode);\n } else {\n const svgLabel = document.createElementNS('http://www.w3.org/2000/svg', 'text');\n svgLabel.setAttribute('style', styles.labelStyle.replace('color:', 'fill:'));\n\n const rows = vertexText.split(common.lineBreakRegex);\n\n for (let j = 0; j < rows.length; j++) {\n const tspan = document.createElementNS('http://www.w3.org/2000/svg', 'tspan');\n tspan.setAttributeNS('http://www.w3.org/XML/1998/namespace', 'xml:space', 'preserve');\n tspan.setAttribute('dy', '1em');\n tspan.setAttribute('x', '1');\n tspan.textContent = rows[j];\n svgLabel.appendChild(tspan);\n }\n vertexNode = svgLabel;\n }\n\n let radious = 0;\n let _shape = '';\n // Set the shape based parameters\n switch (vertex.type) {\n case 'round':\n radious = 5;\n _shape = 'rect';\n break;\n case 'square':\n _shape = 'rect';\n break;\n case 'diamond':\n _shape = 'question';\n break;\n case 'hexagon':\n _shape = 'hexagon';\n break;\n case 'odd':\n _shape = 'rect_left_inv_arrow';\n break;\n case 'lean_right':\n _shape = 'lean_right';\n break;\n case 'lean_left':\n _shape = 'lean_left';\n break;\n case 'trapezoid':\n _shape = 'trapezoid';\n break;\n case 'inv_trapezoid':\n _shape = 'inv_trapezoid';\n break;\n case 'odd_right':\n _shape = 'rect_left_inv_arrow';\n break;\n case 'circle':\n _shape = 'circle';\n break;\n case 'ellipse':\n _shape = 'ellipse';\n break;\n case 'stadium':\n _shape = 'stadium';\n break;\n case 'subroutine':\n _shape = 'subroutine';\n break;\n case 'cylinder':\n _shape = 'cylinder';\n break;\n case 'group':\n _shape = 'rect';\n break;\n default:\n _shape = 'rect';\n }\n // Add the node\n g.setNode(vertex.id, {\n labelStyle: styles.labelStyle,\n shape: _shape,\n labelText: vertexText,\n rx: radious,\n ry: radious,\n class: classStr,\n style: styles.style,\n id: vertex.id,\n link: vertex.link,\n linkTarget: vertex.linkTarget,\n tooltip: flowDb.getTooltip(vertex.id) || '',\n domId: flowDb.lookUpDomId(vertex.id),\n haveCallback: vertex.haveCallback,\n width: vertex.type === 'group' ? 500 : undefined,\n type: vertex.type,\n padding: getConfig().flowchart.padding\n });\n\n logger.info('setNode', {\n labelStyle: styles.labelStyle,\n shape: _shape,\n labelText: vertexText,\n rx: radious,\n ry: radious,\n class: classStr,\n style: styles.style,\n id: vertex.id,\n domId: flowDb.lookUpDomId(vertex.id),\n width: vertex.type === 'group' ? 500 : undefined,\n type: vertex.type,\n padding: getConfig().flowchart.padding\n });\n });\n};\n\n/**\n * Add edges to graph based on parsed graph defninition\n * @param {Object} edges The edges to add to the graph\n * @param {Object} g The graph object\n */\nexport const addEdges = function(edges, g) {\n let cnt = 0;\n\n let defaultStyle;\n let defaultLabelStyle;\n\n if (typeof edges.defaultStyle !== 'undefined') {\n const defaultStyles = getStylesFromArray(edges.defaultStyle);\n defaultStyle = defaultStyles.style;\n defaultLabelStyle = defaultStyles.labelStyle;\n }\n\n edges.forEach(function(edge) {\n cnt++;\n\n // Identify Link\n var linkId = 'L-' + edge.start + '-' + edge.end;\n var linkNameStart = 'LS-' + edge.start;\n var linkNameEnd = 'LE-' + edge.end;\n\n const edgeData = { style: '', labelStyle: '' };\n edgeData.minlen = edge.length || 1;\n //edgeData.id = 'id' + cnt;\n\n // Set link type for rendering\n if (edge.type === 'arrow_open') {\n edgeData.arrowhead = 'none';\n } else {\n edgeData.arrowhead = 'normal';\n }\n\n // Check of arrow types, placed here in order not to break old rendering\n edgeData.arrowTypeStart = 'arrow_open';\n edgeData.arrowTypeEnd = 'arrow_open';\n\n /* eslint-disable no-fallthrough */\n switch (edge.type) {\n case 'double_arrow_cross':\n edgeData.arrowTypeStart = 'arrow_cross';\n case 'arrow_cross':\n edgeData.arrowTypeEnd = 'arrow_cross';\n break;\n case 'double_arrow_point':\n edgeData.arrowTypeStart = 'arrow_point';\n case 'arrow_point':\n edgeData.arrowTypeEnd = 'arrow_point';\n break;\n case 'double_arrow_circle':\n edgeData.arrowTypeStart = 'arrow_circle';\n case 'arrow_circle':\n edgeData.arrowTypeEnd = 'arrow_circle';\n break;\n }\n\n let style = '';\n let labelStyle = '';\n\n switch (edge.stroke) {\n case 'normal':\n style = 'fill:none;';\n if (typeof defaultStyle !== 'undefined') {\n style = defaultStyle;\n }\n if (typeof defaultLabelStyle !== 'undefined') {\n labelStyle = defaultLabelStyle;\n }\n edgeData.thickness = 'normal';\n edgeData.pattern = 'solid';\n break;\n case 'dotted':\n edgeData.thickness = 'normal';\n edgeData.pattern = 'dotted';\n edgeData.style = 'fill:none;stroke-width:2px;stroke-dasharray:3;';\n break;\n case 'thick':\n edgeData.thickness = 'thick';\n edgeData.pattern = 'solid';\n edgeData.style = 'stroke-width: 3.5px;fill:none;';\n break;\n }\n if (typeof edge.style !== 'undefined') {\n const styles = getStylesFromArray(edge.style);\n style = styles.style;\n labelStyle = styles.labelStyle;\n }\n\n edgeData.style = edgeData.style += style;\n edgeData.labelStyle = edgeData.labelStyle += labelStyle;\n\n if (typeof edge.interpolate !== 'undefined') {\n edgeData.curve = interpolateToCurve(edge.interpolate, curveLinear);\n } else if (typeof edges.defaultInterpolate !== 'undefined') {\n edgeData.curve = interpolateToCurve(edges.defaultInterpolate, curveLinear);\n } else {\n edgeData.curve = interpolateToCurve(conf.curve, curveLinear);\n }\n\n if (typeof edge.text === 'undefined') {\n if (typeof edge.style !== 'undefined') {\n edgeData.arrowheadStyle = 'fill: #333';\n }\n } else {\n edgeData.arrowheadStyle = 'fill: #333';\n edgeData.labelpos = 'c';\n }\n // if (getConfig().flowchart.htmlLabels && false) {\n // // eslint-disable-line\n // edgeData.labelType = 'html';\n // edgeData.label = `${edge.text}`;\n // } else {\n edgeData.labelType = 'text';\n edgeData.label = edge.text.replace(common.lineBreakRegex, '\\n');\n\n if (typeof edge.style === 'undefined') {\n edgeData.style = edgeData.style || 'stroke: #333; stroke-width: 1.5px;fill:none;';\n }\n\n edgeData.labelStyle = edgeData.labelStyle.replace('color:', 'fill:');\n // }\n\n edgeData.id = linkId;\n edgeData.classes = 'flowchart-link ' + linkNameStart + ' ' + linkNameEnd;\n\n // Add the edge to the graph\n g.setEdge(edge.start, edge.end, edgeData, cnt);\n });\n};\n\n/**\n * Returns the all the styles from classDef statements in the graph definition.\n * @returns {object} classDef styles\n */\nexport const getClasses = function(text) {\n logger.info('Extracting classes');\n flowDb.clear();\n const parser = flow.parser;\n parser.yy = flowDb;\n\n try {\n // Parse the graph definition\n parser.parse(text);\n } catch (e) {\n return;\n }\n\n return flowDb.getClasses();\n};\n\n/**\n * Draws a flowchart in the tag with id: id based on the graph definition in text.\n * @param text\n * @param id\n */\n\nexport const draw = function(text, id) {\n logger.info('Drawing flowchart');\n flowDb.clear();\n flowDb.setGen('gen-2');\n const parser = flow.parser;\n parser.yy = flowDb;\n\n // Parse the graph definition\n // try {\n parser.parse(text);\n // } catch (err) {\n // logger.debug('Parsing failed');\n // }\n\n // Fetch the default direction, use TD if none was found\n let dir = flowDb.getDirection();\n if (typeof dir === 'undefined') {\n dir = 'TD';\n }\n\n const conf = getConfig().flowchart;\n const nodeSpacing = conf.nodeSpacing || 50;\n const rankSpacing = conf.rankSpacing || 50;\n\n // Create the input mermaid.graph\n const g = new graphlib.Graph({\n multigraph: true,\n compound: true\n })\n .setGraph({\n rankdir: dir,\n nodesep: nodeSpacing,\n ranksep: rankSpacing,\n marginx: 8,\n marginy: 8\n })\n .setDefaultEdgeLabel(function() {\n return {};\n });\n\n let subG;\n const subGraphs = flowDb.getSubGraphs();\n logger.info('Subgraphs - ', subGraphs);\n for (let i = subGraphs.length - 1; i >= 0; i--) {\n subG = subGraphs[i];\n logger.info('Subgraph - ', subG);\n flowDb.addVertex(subG.id, subG.title, 'group', undefined, subG.classes);\n }\n\n // Fetch the verices/nodes and edges/links from the parsed graph definition\n const vert = flowDb.getVertices();\n\n const edges = flowDb.getEdges();\n\n logger.info(edges);\n let i = 0;\n for (i = subGraphs.length - 1; i >= 0; i--) {\n // for (let i = 0; i < subGraphs.length; i++) {\n subG = subGraphs[i];\n\n selectAll('cluster').append('text');\n\n for (let j = 0; j < subG.nodes.length; j++) {\n logger.info('Setting up subgraphs', subG.nodes[j], subG.id);\n g.setParent(subG.nodes[j], subG.id);\n }\n }\n addVertices(vert, g, id);\n addEdges(edges, g);\n\n // Add custom shapes\n // flowChartShapes.addToRenderV2(addShape);\n\n // Set up an SVG group so that we can translate the final graph.\n const svg = select(`[id=\"${id}\"]`);\n svg.attr('xmlns:xlink', 'http://www.w3.org/1999/xlink');\n\n // Run the renderer. This is what draws the final graph.\n const element = select('#' + id + ' g');\n render(element, g, ['point', 'circle', 'cross'], 'flowchart', id);\n\n const padding = conf.diagramPadding;\n const svgBounds = svg.node().getBBox();\n const width = svgBounds.width + padding * 2;\n const height = svgBounds.height + padding * 2;\n logger.debug(\n `new ViewBox 0 0 ${width} ${height}`,\n `translate(${padding - g._label.marginx}, ${padding - g._label.marginy})`\n );\n\n configureSvgSize(svg, height, width, conf.useMaxWidth);\n\n svg.attr('viewBox', `0 0 ${width} ${height}`);\n svg\n .select('g')\n .attr('transform', `translate(${padding - g._label.marginx}, ${padding - svgBounds.y})`);\n\n // Index nodes\n flowDb.indexNodes('subGraph' + i);\n\n // Add label rects for non html labels\n if (!conf.htmlLabels) {\n const labels = document.querySelectorAll('[id=\"' + id + '\"] .edgeLabel .label');\n for (let k = 0; k < labels.length; k++) {\n const label = labels[k];\n\n // Get dimensions of label\n const dim = label.getBBox();\n\n const rect = document.createElementNS('http://www.w3.org/2000/svg', 'rect');\n rect.setAttribute('rx', 0);\n rect.setAttribute('ry', 0);\n rect.setAttribute('width', dim.width);\n rect.setAttribute('height', dim.height);\n // rect.setAttribute('style', 'fill:#e8e8e8;');\n\n label.insertBefore(rect, label.firstChild);\n }\n }\n\n // If node has a link, wrap it in an anchor SVG object.\n const keys = Object.keys(vert);\n keys.forEach(function(key) {\n const vertex = vert[key];\n\n if (vertex.link) {\n const node = select('#' + id + ' [id=\"' + key + '\"]');\n if (node) {\n const link = document.createElementNS('http://www.w3.org/2000/svg', 'a');\n link.setAttributeNS('http://www.w3.org/2000/svg', 'class', vertex.classes.join(' '));\n link.setAttributeNS('http://www.w3.org/2000/svg', 'href', vertex.link);\n link.setAttributeNS('http://www.w3.org/2000/svg', 'rel', 'noopener');\n if (vertex.linkTarget) {\n link.setAttributeNS('http://www.w3.org/2000/svg', 'target', vertex.linkTarget);\n }\n\n const linkNode = node.insert(function() {\n return link;\n }, ':first-child');\n\n const shape = node.select('.label-container');\n if (shape) {\n linkNode.append(function() {\n return shape.node();\n });\n }\n\n const label = node.select('.label');\n if (label) {\n linkNode.append(function() {\n return label.node();\n });\n }\n }\n }\n });\n};\n\nexport default {\n setConf,\n addVertices,\n addEdges,\n getClasses,\n draw\n};\n","import common from '../common/common';\n\nexport const drawRect = function(elem, rectData) {\n const rectElem = elem.append('rect');\n rectElem.attr('x', rectData.x);\n rectElem.attr('y', rectData.y);\n rectElem.attr('fill', rectData.fill);\n rectElem.attr('stroke', rectData.stroke);\n rectElem.attr('width', rectData.width);\n rectElem.attr('height', rectData.height);\n rectElem.attr('rx', rectData.rx);\n rectElem.attr('ry', rectData.ry);\n\n if (typeof rectData.class !== 'undefined') {\n rectElem.attr('class', rectData.class);\n }\n\n return rectElem;\n};\n\nexport const drawText = function(elem, textData) {\n let prevTextHeight = 0,\n textHeight = 0;\n const lines = textData.wrap\n ? textData.text.split(common.lineBreakRegex)\n : [textData.text.replace(common.lineBreakRegex, ' ')];\n\n let textElems = [];\n let dy = 0;\n let yfunc = () => textData.y;\n if (\n typeof textData.valign !== 'undefined' &&\n typeof textData.textMargin !== 'undefined' &&\n textData.textMargin > 0\n ) {\n switch (textData.valign) {\n case 'top':\n case 'start':\n yfunc = () => Math.round(textData.y + textData.textMargin);\n break;\n case 'middle':\n case 'center':\n yfunc = () =>\n Math.round(textData.y + (prevTextHeight + textHeight + textData.textMargin) / 2);\n break;\n case 'bottom':\n case 'end':\n yfunc = () =>\n Math.round(\n textData.y +\n (prevTextHeight + textHeight + 2 * textData.textMargin) -\n textData.textMargin\n );\n break;\n }\n }\n if (\n typeof textData.anchor !== 'undefined' &&\n typeof textData.textMargin !== 'undefined' &&\n typeof textData.width !== 'undefined'\n ) {\n switch (textData.anchor) {\n case 'left':\n case 'start':\n textData.x = Math.round(textData.x + textData.textMargin);\n textData.anchor = 'start';\n textData.dominantBaseline = 'text-after-edge';\n textData.alignmentBaseline = 'middle';\n break;\n case 'middle':\n case 'center':\n textData.x = Math.round(textData.x + textData.width / 2);\n textData.anchor = 'middle';\n textData.dominantBaseline = 'middle';\n textData.alignmentBaseline = 'middle';\n break;\n case 'right':\n case 'end':\n textData.x = Math.round(textData.x + textData.width - textData.textMargin);\n textData.anchor = 'end';\n textData.dominantBaseline = 'text-before-edge';\n textData.alignmentBaseline = 'middle';\n break;\n }\n }\n for (let i = 0; i < lines.length; i++) {\n let line = lines[i];\n if (\n typeof textData.textMargin !== 'undefined' &&\n textData.textMargin === 0 &&\n typeof textData.fontSize !== 'undefined'\n ) {\n dy = i * textData.fontSize;\n }\n\n const textElem = elem.append('text');\n textElem.attr('x', textData.x);\n textElem.attr('y', yfunc());\n if (typeof textData.anchor !== 'undefined') {\n textElem\n .attr('text-anchor', textData.anchor)\n .attr('dominant-baseline', textData.dominantBaseline)\n .attr('alignment-baseline', textData.alignmentBaseline);\n }\n if (typeof textData.fontFamily !== 'undefined') {\n textElem.style('font-family', textData.fontFamily);\n }\n if (typeof textData.fontSize !== 'undefined') {\n textElem.style('font-size', textData.fontSize);\n }\n if (typeof textData.fontWeight !== 'undefined') {\n textElem.style('font-weight', textData.fontWeight);\n }\n if (typeof textData.fill !== 'undefined') {\n textElem.attr('fill', textData.fill);\n }\n if (typeof textData.class !== 'undefined') {\n textElem.attr('class', textData.class);\n }\n if (typeof textData.dy !== 'undefined') {\n textElem.attr('dy', textData.dy);\n } else if (dy !== 0) {\n textElem.attr('dy', dy);\n }\n\n if (textData.tspan) {\n const span = textElem.append('tspan');\n span.attr('x', textData.x);\n if (typeof textData.fill !== 'undefined') {\n span.attr('fill', textData.fill);\n }\n span.text(line);\n } else {\n textElem.text(line);\n }\n if (\n typeof textData.valign !== 'undefined' &&\n typeof textData.textMargin !== 'undefined' &&\n textData.textMargin > 0\n ) {\n textHeight += (textElem._groups || textElem)[0][0].getBBox().height;\n prevTextHeight = textHeight;\n }\n\n textElems.push(textElem);\n }\n\n return textElems;\n};\n\nexport const drawLabel = function(elem, txtObject) {\n function genPoints(x, y, width, height, cut) {\n return (\n x +\n ',' +\n y +\n ' ' +\n (x + width) +\n ',' +\n y +\n ' ' +\n (x + width) +\n ',' +\n (y + height - cut) +\n ' ' +\n (x + width - cut * 1.2) +\n ',' +\n (y + height) +\n ' ' +\n x +\n ',' +\n (y + height)\n );\n }\n const polygon = elem.append('polygon');\n polygon.attr('points', genPoints(txtObject.x, txtObject.y, txtObject.width, txtObject.height, 7));\n polygon.attr('class', 'labelBox');\n\n txtObject.y = txtObject.y + txtObject.height / 2;\n\n drawText(elem, txtObject);\n return polygon;\n};\n\nlet actorCnt = -1;\n/**\n * Draws an actor in the diagram with the attached line\n * @param elem - The diagram we'll draw to.\n * @param actor - The actor to draw.\n * @param conf - drawText implementation discriminator object\n */\nexport const drawActor = function(elem, actor, conf) {\n const center = actor.x + actor.width / 2;\n\n const g = elem.append('g');\n if (actor.y === 0) {\n actorCnt++;\n g.append('line')\n .attr('id', 'actor' + actorCnt)\n .attr('x1', center)\n .attr('y1', 5)\n .attr('x2', center)\n .attr('y2', 2000)\n .attr('class', 'actor-line')\n .attr('stroke-width', '0.5px')\n .attr('stroke', '#999');\n }\n\n const rect = getNoteRect();\n rect.x = actor.x;\n rect.y = actor.y;\n rect.fill = '#eaeaea';\n rect.width = actor.width;\n rect.height = actor.height;\n rect.class = 'actor';\n rect.rx = 3;\n rect.ry = 3;\n drawRect(g, rect);\n\n _drawTextCandidateFunc(conf)(\n actor.description,\n g,\n rect.x,\n rect.y,\n rect.width,\n rect.height,\n { class: 'actor' },\n conf\n );\n};\n\nexport const anchorElement = function(elem) {\n return elem.append('g');\n};\n/**\n * Draws an activation in the diagram\n * @param elem - element to append activation rect.\n * @param bounds - activation box bounds.\n * @param verticalPos - precise y cooridnate of bottom activation box edge.\n * @param conf - sequence diagram config object.\n * @param actorActivations - number of activations on the actor.\n */\nexport const drawActivation = function(elem, bounds, verticalPos, conf, actorActivations) {\n const rect = getNoteRect();\n const g = bounds.anchored;\n rect.x = bounds.startx;\n rect.y = bounds.starty;\n rect.class = 'activation' + (actorActivations % 3); // Will evaluate to 0, 1 or 2\n rect.width = bounds.stopx - bounds.startx;\n rect.height = verticalPos - bounds.starty;\n drawRect(g, rect);\n};\n\n/**\n * Draws a loop in the diagram\n * @param elem - elemenet to append the loop to.\n * @param loopModel - loopModel of the given loop.\n * @param labelText - Text within the loop.\n * @param conf - diagrom configuration\n */\nexport const drawLoop = function(elem, loopModel, labelText, conf) {\n const {\n boxMargin,\n boxTextMargin,\n labelBoxHeight,\n labelBoxWidth,\n messageFontFamily: fontFamily,\n messageFontSize: fontSize,\n messageFontWeight: fontWeight\n } = conf;\n const g = elem.append('g');\n const drawLoopLine = function(startx, starty, stopx, stopy) {\n return g\n .append('line')\n .attr('x1', startx)\n .attr('y1', starty)\n .attr('x2', stopx)\n .attr('y2', stopy)\n .attr('class', 'loopLine');\n };\n drawLoopLine(loopModel.startx, loopModel.starty, loopModel.stopx, loopModel.starty);\n drawLoopLine(loopModel.stopx, loopModel.starty, loopModel.stopx, loopModel.stopy);\n drawLoopLine(loopModel.startx, loopModel.stopy, loopModel.stopx, loopModel.stopy);\n drawLoopLine(loopModel.startx, loopModel.starty, loopModel.startx, loopModel.stopy);\n if (typeof loopModel.sections !== 'undefined') {\n loopModel.sections.forEach(function(item) {\n drawLoopLine(loopModel.startx, item.y, loopModel.stopx, item.y).style(\n 'stroke-dasharray',\n '3, 3'\n );\n });\n }\n\n let txt = getTextObj();\n txt.text = labelText;\n txt.x = loopModel.startx;\n txt.y = loopModel.starty;\n txt.fontFamily = fontFamily;\n txt.fontSize = fontSize;\n txt.fontWeight = fontWeight;\n txt.anchor = 'middle';\n txt.valign = 'middle';\n txt.tspan = false;\n txt.width = labelBoxWidth || 50;\n txt.height = labelBoxHeight || 20;\n txt.textMargin = boxTextMargin;\n txt.class = 'labelText';\n\n drawLabel(g, txt);\n txt = getTextObj();\n txt.text = loopModel.title;\n txt.x = loopModel.startx + labelBoxWidth / 2 + (loopModel.stopx - loopModel.startx) / 2;\n txt.y = loopModel.starty + boxMargin + boxTextMargin;\n txt.anchor = 'middle';\n txt.valign = 'middle';\n txt.textMargin = boxTextMargin;\n txt.class = 'loopText';\n txt.fontFamily = fontFamily;\n txt.fontSize = fontSize;\n txt.fontWeight = fontWeight;\n txt.wrap = true;\n\n let textElem = drawText(g, txt);\n\n if (typeof loopModel.sectionTitles !== 'undefined') {\n loopModel.sectionTitles.forEach(function(item, idx) {\n if (item.message) {\n txt.text = item.message;\n txt.x = loopModel.startx + (loopModel.stopx - loopModel.startx) / 2;\n txt.y = loopModel.sections[idx].y + boxMargin + boxTextMargin;\n txt.class = 'loopText';\n txt.anchor = 'middle';\n txt.valign = 'middle';\n txt.tspan = false;\n txt.fontFamily = fontFamily;\n txt.fontSize = fontSize;\n txt.fontWeight = fontWeight;\n txt.wrap = loopModel.wrap;\n textElem = drawText(g, txt);\n let sectionHeight = Math.round(\n textElem\n .map(te => (te._groups || te)[0][0].getBBox().height)\n .reduce((acc, curr) => acc + curr)\n );\n loopModel.sections[idx].height += sectionHeight - (boxMargin + boxTextMargin);\n }\n });\n }\n\n loopModel.height = Math.round(loopModel.stopy - loopModel.starty);\n return g;\n};\n\n/**\n * Draws a background rectangle\n * @param elem diagram (reference for bounds)\n * @param bounds shape of the rectangle\n */\nexport const drawBackgroundRect = function(elem, bounds) {\n const rectElem = drawRect(elem, {\n x: bounds.startx,\n y: bounds.starty,\n width: bounds.stopx - bounds.startx,\n height: bounds.stopy - bounds.starty,\n fill: bounds.fill,\n class: 'rect'\n });\n rectElem.lower();\n};\n/**\n * Setup arrow head and define the marker. The result is appended to the svg.\n */\nexport const insertArrowHead = function(elem) {\n elem\n .append('defs')\n .append('marker')\n .attr('id', 'arrowhead')\n .attr('refX', 5)\n .attr('refY', 2)\n .attr('markerWidth', 6)\n .attr('markerHeight', 4)\n .attr('orient', 'auto')\n .append('path')\n .attr('d', 'M 0,0 V 4 L6,2 Z'); // this is actual shape for arrowhead\n};\n/**\n * Setup node number. The result is appended to the svg.\n */\nexport const insertSequenceNumber = function(elem) {\n elem\n .append('defs')\n .append('marker')\n .attr('id', 'sequencenumber')\n .attr('refX', 15)\n .attr('refY', 15)\n .attr('markerWidth', 60)\n .attr('markerHeight', 40)\n .attr('orient', 'auto')\n .append('circle')\n .attr('cx', 15)\n .attr('cy', 15)\n .attr('r', 6);\n // .style(\"fill\", '#f00');\n};\n/**\n * Setup arrow head and define the marker. The result is appended to the svg.\n */\nexport const insertArrowCrossHead = function(elem) {\n const defs = elem.append('defs');\n const marker = defs\n .append('marker')\n .attr('id', 'crosshead')\n .attr('markerWidth', 15)\n .attr('markerHeight', 8)\n .attr('orient', 'auto')\n .attr('refX', 16)\n .attr('refY', 4);\n\n // The arrow\n marker\n .append('path')\n .attr('fill', 'black')\n .attr('stroke', '#000000')\n .style('stroke-dasharray', '0, 0')\n .attr('stroke-width', '1px')\n .attr('d', 'M 9,2 V 6 L16,4 Z');\n\n // The cross\n marker\n .append('path')\n .attr('fill', 'none')\n .attr('stroke', '#000000')\n .style('stroke-dasharray', '0, 0')\n .attr('stroke-width', '1px')\n .attr('d', 'M 0,1 L 6,7 M 6,1 L 0,7');\n // this is actual shape for arrowhead\n};\n\nexport const getTextObj = function() {\n return {\n x: 0,\n y: 0,\n fill: undefined,\n anchor: undefined,\n style: '#666',\n width: undefined,\n height: undefined,\n textMargin: 0,\n rx: 0,\n ry: 0,\n tspan: true,\n valign: undefined\n };\n};\n\nexport const getNoteRect = function() {\n return {\n x: 0,\n y: 0,\n fill: '#EDF2AE',\n stroke: '#666',\n width: 100,\n anchor: 'start',\n height: 100,\n rx: 0,\n ry: 0\n };\n};\n\nconst _drawTextCandidateFunc = (function() {\n function byText(content, g, x, y, width, height, textAttrs) {\n const text = g\n .append('text')\n .attr('x', x + width / 2)\n .attr('y', y + height / 2 + 5)\n .style('text-anchor', 'middle')\n .text(content);\n _setTextAttrs(text, textAttrs);\n }\n\n function byTspan(content, g, x, y, width, height, textAttrs, conf) {\n const { actorFontSize, actorFontFamily, actorFontWeight } = conf;\n\n const lines = content.split(common.lineBreakRegex);\n for (let i = 0; i < lines.length; i++) {\n const dy = i * actorFontSize - (actorFontSize * (lines.length - 1)) / 2;\n const text = g\n .append('text')\n .attr('x', x + width / 2)\n .attr('y', y)\n .style('text-anchor', 'middle')\n .style('font-size', actorFontSize)\n .style('font-weight', actorFontWeight)\n .style('font-family', actorFontFamily);\n text\n .append('tspan')\n .attr('x', x + width / 2)\n .attr('dy', dy)\n .text(lines[i]);\n\n text\n .attr('y', y + height / 2.0)\n .attr('dominant-baseline', 'central')\n .attr('alignment-baseline', 'central');\n\n _setTextAttrs(text, textAttrs);\n }\n }\n\n function byFo(content, g, x, y, width, height, textAttrs, conf) {\n const s = g.append('switch');\n const f = s\n .append('foreignObject')\n .attr('x', x)\n .attr('y', y)\n .attr('width', width)\n .attr('height', height);\n\n const text = f\n .append('div')\n .style('display', 'table')\n .style('height', '100%')\n .style('width', '100%');\n\n text\n .append('div')\n .style('display', 'table-cell')\n .style('text-align', 'center')\n .style('vertical-align', 'middle')\n .text(content);\n\n byTspan(content, s, x, y, width, height, textAttrs, conf);\n _setTextAttrs(text, textAttrs);\n }\n\n function _setTextAttrs(toText, fromTextAttrsDict) {\n for (const key in fromTextAttrsDict) {\n if (fromTextAttrsDict.hasOwnProperty(key)) { // eslint-disable-line\n toText.attr(key, fromTextAttrsDict[key]);\n }\n }\n }\n\n return function(conf) {\n return conf.textPlacement === 'fo' ? byFo : conf.textPlacement === 'old' ? byText : byTspan;\n };\n})();\n\nexport default {\n drawRect,\n drawText,\n drawLabel,\n drawActor,\n anchorElement,\n drawActivation,\n drawLoop,\n drawBackgroundRect,\n insertArrowHead,\n insertSequenceNumber,\n insertArrowCrossHead,\n getTextObj,\n getNoteRect\n};\n","import mermaidAPI from '../../mermaidAPI';\nimport * as configApi from '../../config';\nimport common from '../common/common';\nimport { logger } from '../../logger';\n\nlet prevActor = undefined;\nlet actors = {};\nlet messages = [];\nconst notes = [];\nlet title = '';\nlet titleWrapped = false;\nlet sequenceNumbersEnabled = false;\nlet wrapEnabled = false;\n\nexport const parseDirective = function(statement, context, type) {\n mermaidAPI.parseDirective(this, statement, context, type);\n};\n\nexport const addActor = function(id, name, description) {\n // Don't allow description nulling\n const old = actors[id];\n if (old && name === old.name && description == null) return;\n\n // Don't allow null descriptions, either\n if (description == null || description.text == null) {\n description = { text: name, wrap: null };\n }\n\n actors[id] = {\n name: name,\n description: description.text,\n wrap: (description.wrap === undefined && autoWrap()) || !!description.wrap,\n prevActor: prevActor\n };\n if (prevActor && actors[prevActor]) {\n actors[prevActor].nextActor = id;\n }\n\n prevActor = id;\n};\n\nconst activationCount = part => {\n let i;\n let count = 0;\n for (i = 0; i < messages.length; i++) {\n if (messages[i].type === LINETYPE.ACTIVE_START) {\n if (messages[i].from.actor === part) {\n count++;\n }\n }\n if (messages[i].type === LINETYPE.ACTIVE_END) {\n if (messages[i].from.actor === part) {\n count--;\n }\n }\n }\n return count;\n};\n\nexport const addMessage = function(idFrom, idTo, message, answer) {\n messages.push({\n from: idFrom,\n to: idTo,\n message: message.text,\n wrap: (message.wrap === undefined && autoWrap()) || !!message.wrap,\n answer: answer\n });\n};\n\nexport const addSignal = function(\n idFrom,\n idTo,\n message = { text: undefined, wrap: undefined },\n messageType\n) {\n if (messageType === LINETYPE.ACTIVE_END) {\n const cnt = activationCount(idFrom.actor);\n if (cnt < 1) {\n // Bail out as there is an activation signal from an inactive participant\n let error = new Error('Trying to inactivate an inactive participant (' + idFrom.actor + ')');\n error.hash = {\n text: '->>-',\n token: '->>-',\n line: '1',\n loc: { first_line: 1, last_line: 1, first_column: 1, last_column: 1 },\n expected: [\"'ACTIVE_PARTICIPANT'\"]\n };\n throw error;\n }\n }\n messages.push({\n from: idFrom,\n to: idTo,\n message: message.text,\n wrap: (message.wrap === undefined && autoWrap()) || !!message.wrap,\n type: messageType\n });\n return true;\n};\n\nexport const getMessages = function() {\n return messages;\n};\n\nexport const getActors = function() {\n return actors;\n};\nexport const getActor = function(id) {\n return actors[id];\n};\nexport const getActorKeys = function() {\n return Object.keys(actors);\n};\nexport const getTitle = function() {\n return title;\n};\nexport const getTitleWrapped = function() {\n return titleWrapped;\n};\nexport const enableSequenceNumbers = function() {\n sequenceNumbersEnabled = true;\n};\nexport const showSequenceNumbers = () => sequenceNumbersEnabled;\n\nexport const setWrap = function(wrapSetting) {\n wrapEnabled = wrapSetting;\n};\n\nexport const autoWrap = () => wrapEnabled;\n\nexport const clear = function() {\n actors = {};\n messages = [];\n};\n\nexport const parseMessage = function(str) {\n const _str = str.trim();\n const message = {\n text: _str.replace(/^[:]?(?:no)?wrap:/, '').trim(),\n wrap:\n _str.match(/^[:]?(?:no)?wrap:/) === null\n ? common.hasBreaks(_str) || undefined\n : _str.match(/^[:]?wrap:/) !== null\n ? true\n : _str.match(/^[:]?nowrap:/) !== null\n ? false\n : undefined\n };\n logger.debug('parseMessage:', message);\n return message;\n};\n\nexport const LINETYPE = {\n SOLID: 0,\n DOTTED: 1,\n NOTE: 2,\n SOLID_CROSS: 3,\n DOTTED_CROSS: 4,\n SOLID_OPEN: 5,\n DOTTED_OPEN: 6,\n LOOP_START: 10,\n LOOP_END: 11,\n ALT_START: 12,\n ALT_ELSE: 13,\n ALT_END: 14,\n OPT_START: 15,\n OPT_END: 16,\n ACTIVE_START: 17,\n ACTIVE_END: 18,\n PAR_START: 19,\n PAR_AND: 20,\n PAR_END: 21,\n RECT_START: 22,\n RECT_END: 23\n};\n\nexport const ARROWTYPE = {\n FILLED: 0,\n OPEN: 1\n};\n\nexport const PLACEMENT = {\n LEFTOF: 0,\n RIGHTOF: 1,\n OVER: 2\n};\n\nexport const addNote = function(actor, placement, message) {\n const note = {\n actor: actor,\n placement: placement,\n message: message.text,\n wrap: (message.wrap === undefined && autoWrap()) || !!message.wrap\n };\n\n // Coerce actor into a [to, from, ...] array\n const actors = [].concat(actor, actor);\n\n notes.push(note);\n messages.push({\n from: actors[0],\n to: actors[1],\n message: message.text,\n wrap: (message.wrap === undefined && autoWrap()) || !!message.wrap,\n type: LINETYPE.NOTE,\n placement: placement\n });\n};\n\nexport const setTitle = function(titleWrap) {\n title = titleWrap.text;\n titleWrapped = (titleWrap.wrap === undefined && autoWrap()) || !!titleWrap.wrap;\n};\n\nexport const apply = function(param) {\n if (param instanceof Array) {\n param.forEach(function(item) {\n apply(item);\n });\n } else {\n switch (param.type) {\n case 'addActor':\n addActor(param.actor, param.actor, param.description);\n break;\n case 'activeStart':\n addSignal(param.actor, undefined, undefined, param.signalType);\n break;\n case 'activeEnd':\n addSignal(param.actor, undefined, undefined, param.signalType);\n break;\n case 'addNote':\n addNote(param.actor, param.placement, param.text);\n break;\n case 'addMessage':\n addSignal(param.from, param.to, param.msg, param.signalType);\n break;\n case 'loopStart':\n addSignal(undefined, undefined, param.loopText, param.signalType);\n break;\n case 'loopEnd':\n addSignal(undefined, undefined, undefined, param.signalType);\n break;\n case 'rectStart':\n addSignal(undefined, undefined, param.color, param.signalType);\n break;\n case 'rectEnd':\n addSignal(undefined, undefined, undefined, param.signalType);\n break;\n case 'optStart':\n addSignal(undefined, undefined, param.optText, param.signalType);\n break;\n case 'optEnd':\n addSignal(undefined, undefined, undefined, param.signalType);\n break;\n case 'altStart':\n addSignal(undefined, undefined, param.altText, param.signalType);\n break;\n case 'else':\n addSignal(undefined, undefined, param.altText, param.signalType);\n break;\n case 'altEnd':\n addSignal(undefined, undefined, undefined, param.signalType);\n break;\n case 'setTitle':\n setTitle(param.text);\n break;\n case 'parStart':\n addSignal(undefined, undefined, param.parText, param.signalType);\n break;\n case 'and':\n addSignal(undefined, undefined, param.parText, param.signalType);\n break;\n case 'parEnd':\n addSignal(undefined, undefined, undefined, param.signalType);\n break;\n }\n }\n};\n\nexport default {\n addActor,\n addMessage,\n addSignal,\n autoWrap,\n setWrap,\n enableSequenceNumbers,\n showSequenceNumbers,\n getMessages,\n getActors,\n getActor,\n getActorKeys,\n getTitle,\n parseDirective,\n getConfig: () => configApi.getConfig().sequence,\n getTitleWrapped,\n clear,\n parseMessage,\n LINETYPE,\n ARROWTYPE,\n PLACEMENT,\n addNote,\n setTitle,\n apply\n};\n","import { select, selectAll } from 'd3';\nimport svgDraw, { drawText } from './svgDraw';\nimport { logger } from '../../logger';\nimport { parser } from './parser/sequenceDiagram';\nimport common from '../common/common';\nimport sequenceDb from './sequenceDb';\nimport * as configApi from '../../config';\nimport utils, { assignWithDepth, configureSvgSize } from '../../utils';\n\nparser.yy = sequenceDb;\n\nlet conf = {};\n\nexport const bounds = {\n data: {\n startx: undefined,\n stopx: undefined,\n starty: undefined,\n stopy: undefined\n },\n verticalPos: 0,\n sequenceItems: [],\n activations: [],\n models: {\n getHeight: function() {\n return (\n Math.max.apply(\n null,\n this.actors.length === 0 ? [0] : this.actors.map(actor => actor.height || 0)\n ) +\n (this.loops.length === 0\n ? 0\n : this.loops.map(it => it.height || 0).reduce((acc, h) => acc + h)) +\n (this.messages.length === 0\n ? 0\n : this.messages.map(it => it.height || 0).reduce((acc, h) => acc + h)) +\n (this.notes.length === 0\n ? 0\n : this.notes.map(it => it.height || 0).reduce((acc, h) => acc + h))\n );\n },\n clear: function() {\n this.actors = [];\n this.loops = [];\n this.messages = [];\n this.notes = [];\n },\n addActor: function(actorModel) {\n this.actors.push(actorModel);\n },\n addLoop: function(loopModel) {\n this.loops.push(loopModel);\n },\n addMessage: function(msgModel) {\n this.messages.push(msgModel);\n },\n addNote: function(noteModel) {\n this.notes.push(noteModel);\n },\n lastActor: function() {\n return this.actors[this.actors.length - 1];\n },\n lastLoop: function() {\n return this.loops[this.loops.length - 1];\n },\n lastMessage: function() {\n return this.messages[this.messages.length - 1];\n },\n lastNote: function() {\n return this.notes[this.notes.length - 1];\n },\n actors: [],\n loops: [],\n messages: [],\n notes: []\n },\n init: function() {\n this.sequenceItems = [];\n this.activations = [];\n this.models.clear();\n this.data = {\n startx: undefined,\n stopx: undefined,\n starty: undefined,\n stopy: undefined\n };\n this.verticalPos = 0;\n setConf(parser.yy.getConfig());\n },\n updateVal: function(obj, key, val, fun) {\n if (typeof obj[key] === 'undefined') {\n obj[key] = val;\n } else {\n obj[key] = fun(val, obj[key]);\n }\n },\n updateBounds: function(startx, starty, stopx, stopy) {\n const _self = this;\n let cnt = 0;\n function updateFn(type) {\n return function updateItemBounds(item) {\n cnt++;\n // The loop sequenceItems is a stack so the biggest margins in the beginning of the sequenceItems\n const n = _self.sequenceItems.length - cnt + 1;\n\n _self.updateVal(item, 'starty', starty - n * conf.boxMargin, Math.min);\n _self.updateVal(item, 'stopy', stopy + n * conf.boxMargin, Math.max);\n\n _self.updateVal(bounds.data, 'startx', startx - n * conf.boxMargin, Math.min);\n _self.updateVal(bounds.data, 'stopx', stopx + n * conf.boxMargin, Math.max);\n\n if (!(type === 'activation')) {\n _self.updateVal(item, 'startx', startx - n * conf.boxMargin, Math.min);\n _self.updateVal(item, 'stopx', stopx + n * conf.boxMargin, Math.max);\n\n _self.updateVal(bounds.data, 'starty', starty - n * conf.boxMargin, Math.min);\n _self.updateVal(bounds.data, 'stopy', stopy + n * conf.boxMargin, Math.max);\n }\n };\n }\n\n this.sequenceItems.forEach(updateFn());\n this.activations.forEach(updateFn('activation'));\n },\n insert: function(startx, starty, stopx, stopy) {\n const _startx = Math.min(startx, stopx);\n const _stopx = Math.max(startx, stopx);\n const _starty = Math.min(starty, stopy);\n const _stopy = Math.max(starty, stopy);\n\n this.updateVal(bounds.data, 'startx', _startx, Math.min);\n this.updateVal(bounds.data, 'starty', _starty, Math.min);\n this.updateVal(bounds.data, 'stopx', _stopx, Math.max);\n this.updateVal(bounds.data, 'stopy', _stopy, Math.max);\n\n this.updateBounds(_startx, _starty, _stopx, _stopy);\n },\n newActivation: function(message, diagram, actors) {\n const actorRect = actors[message.from.actor];\n const stackedSize = actorActivations(message.from.actor).length || 0;\n const x = actorRect.x + actorRect.width / 2 + ((stackedSize - 1) * conf.activationWidth) / 2;\n this.activations.push({\n startx: x,\n starty: this.verticalPos + 2,\n stopx: x + conf.activationWidth,\n stopy: undefined,\n actor: message.from.actor,\n anchored: svgDraw.anchorElement(diagram)\n });\n },\n endActivation: function(message) {\n // find most recent activation for given actor\n const lastActorActivationIdx = this.activations\n .map(function(activation) {\n return activation.actor;\n })\n .lastIndexOf(message.from.actor);\n return this.activations.splice(lastActorActivationIdx, 1)[0];\n },\n createLoop: function(title = { message: undefined, wrap: false, width: undefined }, fill) {\n return {\n startx: undefined,\n starty: this.verticalPos,\n stopx: undefined,\n stopy: undefined,\n title: title.message,\n wrap: title.wrap,\n width: title.width,\n height: 0,\n fill: fill\n };\n },\n newLoop: function(title = { message: undefined, wrap: false, width: undefined }, fill) {\n this.sequenceItems.push(this.createLoop(title, fill));\n },\n endLoop: function() {\n return this.sequenceItems.pop();\n },\n addSectionToLoop: function(message) {\n const loop = this.sequenceItems.pop();\n loop.sections = loop.sections || [];\n loop.sectionTitles = loop.sectionTitles || [];\n loop.sections.push({ y: bounds.getVerticalPos(), height: 0 });\n loop.sectionTitles.push(message);\n this.sequenceItems.push(loop);\n },\n bumpVerticalPos: function(bump) {\n this.verticalPos = this.verticalPos + bump;\n this.data.stopy = this.verticalPos;\n },\n getVerticalPos: function() {\n return this.verticalPos;\n },\n getBounds: function() {\n return { bounds: this.data, models: this.models };\n }\n};\n\n/**\n * Draws an note in the diagram with the attached line\n * @param elem - The diagram to draw to.\n * @param noteModel:{x: number, y: number, message: string, width: number} - startx: x axis start position, verticalPos: y axis position, messsage: the message to be shown, width: Set this with a custom width to override the default configured width.\n */\nconst drawNote = function(elem, noteModel) {\n bounds.bumpVerticalPos(conf.boxMargin);\n noteModel.height = conf.boxMargin;\n noteModel.starty = bounds.getVerticalPos();\n const rect = svgDraw.getNoteRect();\n rect.x = noteModel.startx;\n rect.y = noteModel.starty;\n rect.width = noteModel.width || conf.width;\n rect.class = 'note';\n\n let g = elem.append('g');\n const rectElem = svgDraw.drawRect(g, rect);\n const textObj = svgDraw.getTextObj();\n textObj.x = noteModel.startx;\n textObj.y = noteModel.starty;\n textObj.width = rect.width;\n textObj.dy = '1em';\n textObj.text = noteModel.message;\n textObj.class = 'noteText';\n textObj.fontFamily = conf.noteFontFamily;\n textObj.fontSize = conf.noteFontSize;\n textObj.fontWeight = conf.noteFontWeight;\n textObj.anchor = conf.noteAlign;\n textObj.textMargin = conf.noteMargin;\n textObj.valign = conf.noteAlign;\n textObj.wrap = true;\n\n let textElem = drawText(g, textObj);\n\n let textHeight = Math.round(\n textElem.map(te => (te._groups || te)[0][0].getBBox().height).reduce((acc, curr) => acc + curr)\n );\n\n rectElem.attr('height', textHeight + 2 * conf.noteMargin);\n noteModel.height += textHeight + 2 * conf.noteMargin;\n bounds.bumpVerticalPos(textHeight + 2 * conf.noteMargin);\n noteModel.stopy = noteModel.starty + textHeight + 2 * conf.noteMargin;\n noteModel.stopx = noteModel.startx + rect.width;\n bounds.insert(noteModel.startx, noteModel.starty, noteModel.stopx, noteModel.stopy);\n bounds.models.addNote(noteModel);\n};\n\nconst messageFont = cnf => {\n return {\n fontFamily: cnf.messageFontFamily,\n fontSize: cnf.messageFontSize,\n fontWeight: cnf.messageFontWeight\n };\n};\nconst noteFont = cnf => {\n return {\n fontFamily: cnf.noteFontFamily,\n fontSize: cnf.noteFontSize,\n fontWeight: cnf.noteFontWeight\n };\n};\nconst actorFont = cnf => {\n return {\n fontFamily: cnf.actorFontFamily,\n fontSize: cnf.actorFontSize,\n fontWeight: cnf.actorFontWeight\n };\n};\n\n/**\n * Draws a message\n * @param g - the parent of the message element\n * @param msgModel - the model containing fields describing a message\n */\nconst drawMessage = function(g, msgModel) {\n bounds.bumpVerticalPos(10);\n const { startx, stopx, starty, message, type, sequenceIndex, wrap } = msgModel;\n const lines = common.splitBreaks(message).length;\n let textDims = utils.calculateTextDimensions(message, messageFont(conf));\n const lineHeight = textDims.height / lines;\n msgModel.height += lineHeight;\n\n bounds.bumpVerticalPos(lineHeight);\n const textObj = svgDraw.getTextObj();\n textObj.x = startx;\n textObj.y = starty + 10;\n textObj.width = stopx - startx;\n textObj.class = 'messageText';\n textObj.dy = '1em';\n textObj.text = message;\n textObj.fontFamily = conf.messageFontFamily;\n textObj.fontSize = conf.messageFontSize;\n textObj.fontWeight = conf.messageFontWeight;\n textObj.anchor = conf.messageAlign;\n textObj.valign = conf.messageAlign;\n textObj.textMargin = conf.wrapPadding;\n textObj.tspan = false;\n textObj.wrap = wrap;\n\n drawText(g, textObj);\n\n let totalOffset = textDims.height - 10;\n\n let textWidth = textDims.width;\n\n let line, lineStarty;\n if (startx === stopx) {\n lineStarty = bounds.getVerticalPos() + totalOffset;\n if (conf.rightAngles) {\n line = g\n .append('path')\n .attr(\n 'd',\n `M ${startx},${lineStarty} H ${startx +\n Math.max(conf.width / 2, textWidth / 2)} V ${lineStarty + 25} H ${startx}`\n );\n } else {\n totalOffset += conf.boxMargin;\n\n lineStarty = bounds.getVerticalPos() + totalOffset;\n line = g\n .append('path')\n .attr(\n 'd',\n 'M ' +\n startx +\n ',' +\n lineStarty +\n ' C ' +\n (startx + 60) +\n ',' +\n (lineStarty - 10) +\n ' ' +\n (startx + 60) +\n ',' +\n (lineStarty + 30) +\n ' ' +\n startx +\n ',' +\n (lineStarty + 20)\n );\n }\n\n totalOffset += 30;\n const dx = Math.max(textWidth / 2, conf.width / 2);\n bounds.insert(\n startx - dx,\n bounds.getVerticalPos() - 10 + totalOffset,\n stopx + dx,\n bounds.getVerticalPos() + 30 + totalOffset\n );\n } else {\n totalOffset += conf.boxMargin;\n lineStarty = bounds.getVerticalPos() + totalOffset;\n line = g.append('line');\n line.attr('x1', startx);\n line.attr('y1', lineStarty);\n line.attr('x2', stopx);\n line.attr('y2', lineStarty);\n bounds.insert(startx, lineStarty - 10, stopx, lineStarty);\n }\n // Make an SVG Container\n // Draw the line\n if (\n type === parser.yy.LINETYPE.DOTTED ||\n type === parser.yy.LINETYPE.DOTTED_CROSS ||\n type === parser.yy.LINETYPE.DOTTED_OPEN\n ) {\n line.style('stroke-dasharray', '3, 3');\n line.attr('class', 'messageLine1');\n } else {\n line.attr('class', 'messageLine0');\n }\n\n let url = '';\n if (conf.arrowMarkerAbsolute) {\n url =\n window.location.protocol +\n '//' +\n window.location.host +\n window.location.pathname +\n window.location.search;\n url = url.replace(/\\(/g, '\\\\(');\n url = url.replace(/\\)/g, '\\\\)');\n }\n\n line.attr('stroke-width', 2);\n line.attr('stroke', 'none'); // handled by theme/css anyway\n line.style('fill', 'none'); // remove any fill colour\n if (type === parser.yy.LINETYPE.SOLID || type === parser.yy.LINETYPE.DOTTED) {\n line.attr('marker-end', 'url(' + url + '#arrowhead)');\n }\n\n if (type === parser.yy.LINETYPE.SOLID_CROSS || type === parser.yy.LINETYPE.DOTTED_CROSS) {\n line.attr('marker-end', 'url(' + url + '#crosshead)');\n }\n\n // add node number\n if (sequenceDb.showSequenceNumbers() || conf.showSequenceNumbers) {\n line.attr('marker-start', 'url(' + url + '#sequencenumber)');\n g.append('text')\n .attr('x', startx)\n .attr('y', lineStarty + 4)\n .attr('font-family', 'sans-serif')\n .attr('font-size', '12px')\n .attr('text-anchor', 'middle')\n .attr('textLength', '16px')\n .attr('class', 'sequenceNumber')\n .text(sequenceIndex);\n }\n bounds.bumpVerticalPos(totalOffset);\n msgModel.height += totalOffset;\n msgModel.stopy = msgModel.starty + msgModel.height;\n bounds.insert(msgModel.fromBounds, msgModel.starty, msgModel.toBounds, msgModel.stopy);\n};\n\nexport const drawActors = function(diagram, actors, actorKeys, verticalPos) {\n // Draw the actors\n let prevWidth = 0;\n let prevMargin = 0;\n\n for (let i = 0; i < actorKeys.length; i++) {\n const actor = actors[actorKeys[i]];\n\n // Add some rendering data to the object\n actor.width = actor.width || conf.width;\n actor.height = Math.max(actor.height || conf.height, conf.height);\n actor.margin = actor.margin || conf.actorMargin;\n\n actor.x = prevWidth + prevMargin;\n actor.y = verticalPos;\n\n // Draw the box with the attached line\n svgDraw.drawActor(diagram, actor, conf);\n bounds.insert(actor.x, verticalPos, actor.x + actor.width, actor.height);\n\n prevWidth += actor.width;\n prevMargin += actor.margin;\n bounds.models.addActor(actor);\n }\n\n // Add a margin between the actor boxes and the first arrow\n bounds.bumpVerticalPos(conf.height);\n};\n\nexport const setConf = function(cnf) {\n assignWithDepth(conf, cnf);\n\n if (cnf.fontFamily) {\n conf.actorFontFamily = conf.noteFontFamily = conf.messageFontFamily = cnf.fontFamily;\n }\n if (cnf.fontSize) {\n conf.actorFontSize = conf.noteFontSize = conf.messageFontSize = cnf.fontSize;\n }\n if (cnf.fontWeight) {\n conf.actorFontWeight = conf.noteFontWeight = conf.messageFontWeight = cnf.fontWeight;\n }\n};\n\nconst actorActivations = function(actor) {\n return bounds.activations.filter(function(activation) {\n return activation.actor === actor;\n });\n};\n\nconst activationBounds = function(actor, actors) {\n // handle multiple stacked activations for same actor\n const actorObj = actors[actor];\n const activations = actorActivations(actor);\n\n const left = activations.reduce(function(acc, activation) {\n return Math.min(acc, activation.startx);\n }, actorObj.x + actorObj.width / 2);\n const right = activations.reduce(function(acc, activation) {\n return Math.max(acc, activation.stopx);\n }, actorObj.x + actorObj.width / 2);\n return [left, right];\n};\n\nfunction adjustLoopHeightForWrap(loopWidths, msg, preMargin, postMargin, addLoopFn) {\n bounds.bumpVerticalPos(preMargin);\n let heightAdjust = postMargin;\n if (msg.id && msg.message && loopWidths[msg.id]) {\n let loopWidth = loopWidths[msg.id].width;\n let textConf = messageFont(conf);\n msg.message = utils.wrapLabel(`[${msg.message}]`, loopWidth - 2 * conf.wrapPadding, textConf);\n msg.width = loopWidth;\n msg.wrap = true;\n\n // const lines = common.splitBreaks(msg.message).length;\n const textDims = utils.calculateTextDimensions(msg.message, textConf);\n const totalOffset = Math.max(textDims.height, conf.labelBoxHeight);\n heightAdjust = postMargin + totalOffset;\n logger.debug(`${totalOffset} - ${msg.message}`);\n }\n addLoopFn(msg);\n bounds.bumpVerticalPos(heightAdjust);\n}\n\n/**\n * Draws a sequenceDiagram in the tag with id: id based on the graph definition in text.\n * @param text\n * @param id\n */\nexport const draw = function(text, id) {\n conf = configApi.getConfig().sequence;\n parser.yy.clear();\n parser.yy.setWrap(conf.wrap);\n parser.parse(text + '\\n');\n bounds.init();\n logger.debug(`C:${JSON.stringify(conf, null, 2)}`);\n\n const diagram = select(`[id=\"${id}\"]`);\n\n // Fetch data from the parsing\n const actors = parser.yy.getActors();\n const actorKeys = parser.yy.getActorKeys();\n const messages = parser.yy.getMessages();\n const title = parser.yy.getTitle();\n\n const maxMessageWidthPerActor = getMaxMessageWidthPerActor(actors, messages);\n conf.height = calculateActorMargins(actors, maxMessageWidthPerActor);\n\n drawActors(diagram, actors, actorKeys, 0);\n const loopWidths = calculateLoopBounds(messages, actors, maxMessageWidthPerActor);\n\n // The arrow head definition is attached to the svg once\n svgDraw.insertArrowHead(diagram);\n svgDraw.insertArrowCrossHead(diagram);\n svgDraw.insertSequenceNumber(diagram);\n\n function activeEnd(msg, verticalPos) {\n const activationData = bounds.endActivation(msg);\n if (activationData.starty + 18 > verticalPos) {\n activationData.starty = verticalPos - 6;\n verticalPos += 12;\n }\n svgDraw.drawActivation(\n diagram,\n activationData,\n verticalPos,\n conf,\n actorActivations(msg.from.actor).length\n );\n\n bounds.insert(activationData.startx, verticalPos - 10, activationData.stopx, verticalPos);\n }\n\n // Draw the messages/signals\n let sequenceIndex = 1;\n messages.forEach(function(msg) {\n let loopModel, noteModel, msgModel;\n\n switch (msg.type) {\n case parser.yy.LINETYPE.NOTE:\n noteModel = msg.noteModel;\n drawNote(diagram, noteModel);\n break;\n case parser.yy.LINETYPE.ACTIVE_START:\n bounds.newActivation(msg, diagram, actors);\n break;\n case parser.yy.LINETYPE.ACTIVE_END:\n activeEnd(msg, bounds.getVerticalPos());\n break;\n case parser.yy.LINETYPE.LOOP_START:\n adjustLoopHeightForWrap(\n loopWidths,\n msg,\n conf.boxMargin,\n conf.boxMargin + conf.boxTextMargin,\n message => bounds.newLoop(message)\n );\n break;\n case parser.yy.LINETYPE.LOOP_END:\n loopModel = bounds.endLoop();\n svgDraw.drawLoop(diagram, loopModel, 'loop', conf);\n bounds.bumpVerticalPos(loopModel.stopy - bounds.getVerticalPos());\n bounds.models.addLoop(loopModel);\n break;\n case parser.yy.LINETYPE.RECT_START:\n adjustLoopHeightForWrap(loopWidths, msg, conf.boxMargin, conf.boxMargin, message =>\n bounds.newLoop(undefined, message.message)\n );\n break;\n case parser.yy.LINETYPE.RECT_END:\n loopModel = bounds.endLoop();\n svgDraw.drawBackgroundRect(diagram, loopModel);\n bounds.models.addLoop(loopModel);\n bounds.bumpVerticalPos(loopModel.stopy - bounds.getVerticalPos());\n break;\n case parser.yy.LINETYPE.OPT_START:\n adjustLoopHeightForWrap(\n loopWidths,\n msg,\n conf.boxMargin,\n conf.boxMargin + conf.boxTextMargin,\n message => bounds.newLoop(message)\n );\n break;\n case parser.yy.LINETYPE.OPT_END:\n loopModel = bounds.endLoop();\n svgDraw.drawLoop(diagram, loopModel, 'opt', conf);\n bounds.bumpVerticalPos(loopModel.stopy - bounds.getVerticalPos());\n bounds.models.addLoop(loopModel);\n break;\n case parser.yy.LINETYPE.ALT_START:\n adjustLoopHeightForWrap(\n loopWidths,\n msg,\n conf.boxMargin,\n conf.boxMargin + conf.boxTextMargin,\n message => bounds.newLoop(message)\n );\n break;\n case parser.yy.LINETYPE.ALT_ELSE:\n adjustLoopHeightForWrap(\n loopWidths,\n msg,\n conf.boxMargin + conf.boxTextMargin,\n conf.boxMargin,\n message => bounds.addSectionToLoop(message)\n );\n break;\n case parser.yy.LINETYPE.ALT_END:\n loopModel = bounds.endLoop();\n svgDraw.drawLoop(diagram, loopModel, 'alt', conf);\n bounds.bumpVerticalPos(loopModel.stopy - bounds.getVerticalPos());\n bounds.models.addLoop(loopModel);\n break;\n case parser.yy.LINETYPE.PAR_START:\n adjustLoopHeightForWrap(\n loopWidths,\n msg,\n conf.boxMargin,\n conf.boxMargin + conf.boxTextMargin,\n message => bounds.newLoop(message)\n );\n break;\n case parser.yy.LINETYPE.PAR_AND:\n adjustLoopHeightForWrap(\n loopWidths,\n msg,\n conf.boxMargin + conf.boxTextMargin,\n conf.boxMargin,\n message => bounds.addSectionToLoop(message)\n );\n break;\n case parser.yy.LINETYPE.PAR_END:\n loopModel = bounds.endLoop();\n svgDraw.drawLoop(diagram, loopModel, 'par', conf);\n bounds.bumpVerticalPos(loopModel.stopy - bounds.getVerticalPos());\n bounds.models.addLoop(loopModel);\n break;\n default:\n try {\n // lastMsg = msg\n msgModel = msg.msgModel;\n msgModel.starty = bounds.getVerticalPos();\n msgModel.sequenceIndex = sequenceIndex;\n drawMessage(diagram, msgModel);\n bounds.models.addMessage(msgModel);\n } catch (e) {\n logger.error('error while drawing message', e);\n }\n }\n // Increment sequence counter if msg.type is a line (and not another event like activation or note, etc)\n if (\n [\n parser.yy.LINETYPE.SOLID_OPEN,\n parser.yy.LINETYPE.DOTTED_OPEN,\n parser.yy.LINETYPE.SOLID,\n parser.yy.LINETYPE.DOTTED,\n parser.yy.LINETYPE.SOLID_CROSS,\n parser.yy.LINETYPE.DOTTED_CROSS\n ].includes(msg.type)\n ) {\n sequenceIndex++;\n }\n });\n\n if (conf.mirrorActors) {\n // Draw actors below diagram\n bounds.bumpVerticalPos(conf.boxMargin * 2);\n drawActors(diagram, actors, actorKeys, bounds.getVerticalPos());\n }\n\n const { bounds: box } = bounds.getBounds();\n\n // Adjust line height of actor lines now that the height of the diagram is known\n logger.debug('For line height fix Querying: #' + id + ' .actor-line');\n const actorLines = selectAll('#' + id + ' .actor-line');\n actorLines.attr('y2', box.stopy);\n\n let height = box.stopy - box.starty + 2 * conf.diagramMarginY;\n if (conf.mirrorActors) {\n height = height - conf.boxMargin + conf.bottomMarginAdj;\n }\n\n const width = box.stopx - box.startx + 2 * conf.diagramMarginX;\n\n if (title) {\n diagram\n .append('text')\n .text(title)\n .attr('x', (box.stopx - box.startx) / 2 - 2 * conf.diagramMarginX)\n .attr('y', -25);\n }\n\n configureSvgSize(diagram, height, width, conf.useMaxWidth);\n\n const extraVertForTitle = title ? 40 : 0;\n diagram.attr(\n 'viewBox',\n box.startx -\n conf.diagramMarginX +\n ' -' +\n (conf.diagramMarginY + extraVertForTitle) +\n ' ' +\n width +\n ' ' +\n (height + extraVertForTitle)\n );\n logger.debug(`models:`, bounds.models);\n};\n\n/**\n * Retrieves the max message width of each actor, supports signals (messages, loops)\n * and notes.\n *\n * It will enumerate each given message, and will determine its text width, in relation\n * to the actor it originates from, and destined to.\n *\n * @param actors - The actors map\n * @param messages - A list of message objects to iterate\n */\nconst getMaxMessageWidthPerActor = function(actors, messages) {\n const maxMessageWidthPerActor = {};\n\n messages.forEach(function(msg) {\n if (actors[msg.to] && actors[msg.from]) {\n const actor = actors[msg.to];\n\n // If this is the first actor, and the message is left of it, no need to calculate the margin\n if (msg.placement === parser.yy.PLACEMENT.LEFTOF && !actor.prevActor) {\n return;\n }\n\n // If this is the last actor, and the message is right of it, no need to calculate the margin\n if (msg.placement === parser.yy.PLACEMENT.RIGHTOF && !actor.nextActor) {\n return;\n }\n\n const isNote = msg.placement !== undefined;\n const isMessage = !isNote;\n\n const textFont = isNote ? noteFont(conf) : messageFont(conf);\n let wrappedMessage = msg.wrap\n ? utils.wrapLabel(msg.message, conf.width - 2 * conf.wrapPadding, textFont)\n : msg.message;\n const messageDimensions = utils.calculateTextDimensions(wrappedMessage, textFont);\n const messageWidth = messageDimensions.width + 2 * conf.wrapPadding;\n\n /*\n * The following scenarios should be supported:\n *\n * - There's a message (non-note) between fromActor and toActor\n * - If fromActor is on the right and toActor is on the left, we should\n * define the toActor's margin\n * - If fromActor is on the left and toActor is on the right, we should\n * define the fromActor's margin\n * - There's a note, in which case fromActor == toActor\n * - If the note is to the left of the actor, we should define the previous actor\n * margin\n * - If the note is on the actor, we should define both the previous and next actor\n * margins, each being the half of the note size\n * - If the note is on the right of the actor, we should define the current actor\n * margin\n */\n if (isMessage && msg.from === actor.nextActor) {\n maxMessageWidthPerActor[msg.to] = Math.max(\n maxMessageWidthPerActor[msg.to] || 0,\n messageWidth\n );\n } else if (isMessage && msg.from === actor.prevActor) {\n maxMessageWidthPerActor[msg.from] = Math.max(\n maxMessageWidthPerActor[msg.from] || 0,\n messageWidth\n );\n } else if (isMessage && msg.from === msg.to) {\n maxMessageWidthPerActor[msg.from] = Math.max(\n maxMessageWidthPerActor[msg.from] || 0,\n messageWidth / 2\n );\n\n maxMessageWidthPerActor[msg.to] = Math.max(\n maxMessageWidthPerActor[msg.to] || 0,\n messageWidth / 2\n );\n } else if (msg.placement === parser.yy.PLACEMENT.RIGHTOF) {\n maxMessageWidthPerActor[msg.from] = Math.max(\n maxMessageWidthPerActor[msg.from] || 0,\n messageWidth\n );\n } else if (msg.placement === parser.yy.PLACEMENT.LEFTOF) {\n maxMessageWidthPerActor[actor.prevActor] = Math.max(\n maxMessageWidthPerActor[actor.prevActor] || 0,\n messageWidth\n );\n } else if (msg.placement === parser.yy.PLACEMENT.OVER) {\n if (actor.prevActor) {\n maxMessageWidthPerActor[actor.prevActor] = Math.max(\n maxMessageWidthPerActor[actor.prevActor] || 0,\n messageWidth / 2\n );\n }\n\n if (actor.nextActor) {\n maxMessageWidthPerActor[msg.from] = Math.max(\n maxMessageWidthPerActor[msg.from] || 0,\n messageWidth / 2\n );\n }\n }\n }\n });\n\n logger.debug('maxMessageWidthPerActor:', maxMessageWidthPerActor);\n return maxMessageWidthPerActor;\n};\n\n/**\n * This will calculate the optimal margin for each given actor, for a given\n * actor->messageWidth map.\n *\n * An actor's margin is determined by the width of the actor, the width of the\n * largest message that originates from it, and the configured conf.actorMargin.\n *\n * @param actors - The actors map to calculate margins for\n * @param actorToMessageWidth - A map of actor key -> max message width it holds\n */\nconst calculateActorMargins = function(actors, actorToMessageWidth) {\n let maxHeight = 0;\n Object.keys(actors).forEach(prop => {\n const actor = actors[prop];\n if (actor.wrap) {\n actor.description = utils.wrapLabel(\n actor.description,\n conf.width - 2 * conf.wrapPadding,\n actorFont(conf)\n );\n }\n const actDims = utils.calculateTextDimensions(actor.description, actorFont(conf));\n actor.width = actor.wrap\n ? conf.width\n : Math.max(conf.width, actDims.width + 2 * conf.wrapPadding);\n\n actor.height = actor.wrap ? Math.max(actDims.height, conf.height) : conf.height;\n maxHeight = Math.max(maxHeight, actor.height);\n });\n\n for (let actorKey in actorToMessageWidth) {\n const actor = actors[actorKey];\n\n if (!actor) {\n continue;\n }\n\n const nextActor = actors[actor.nextActor];\n\n // No need to space out an actor that doesn't have a next link\n if (!nextActor) {\n continue;\n }\n\n const messageWidth = actorToMessageWidth[actorKey];\n const actorWidth = messageWidth + conf.actorMargin - actor.width / 2 - nextActor.width / 2;\n\n actor.margin = Math.max(actorWidth, conf.actorMargin);\n }\n\n return Math.max(maxHeight, conf.height);\n};\n\nconst buildNoteModel = function(msg, actors) {\n let startx = actors[msg.from].x;\n let stopx = actors[msg.to].x;\n let shouldWrap = msg.wrap && msg.message;\n\n let textDimensions = utils.calculateTextDimensions(\n shouldWrap ? utils.wrapLabel(msg.message, conf.width, noteFont(conf)) : msg.message,\n noteFont(conf)\n );\n let noteModel = {\n width: shouldWrap\n ? conf.width\n : Math.max(conf.width, textDimensions.width + 2 * conf.noteMargin),\n height: 0,\n startx: actors[msg.from].x,\n stopx: 0,\n starty: 0,\n stopy: 0,\n message: msg.message\n };\n if (msg.placement === parser.yy.PLACEMENT.RIGHTOF) {\n noteModel.width = shouldWrap\n ? Math.max(conf.width, textDimensions.width)\n : Math.max(\n actors[msg.from].width / 2 + actors[msg.to].width / 2,\n textDimensions.width + 2 * conf.noteMargin\n );\n noteModel.startx = startx + (actors[msg.from].width + conf.actorMargin) / 2;\n } else if (msg.placement === parser.yy.PLACEMENT.LEFTOF) {\n noteModel.width = shouldWrap\n ? Math.max(conf.width, textDimensions.width + 2 * conf.noteMargin)\n : Math.max(\n actors[msg.from].width / 2 + actors[msg.to].width / 2,\n textDimensions.width + 2 * conf.noteMargin\n );\n noteModel.startx = startx - noteModel.width + (actors[msg.from].width - conf.actorMargin) / 2;\n } else if (msg.to === msg.from) {\n textDimensions = utils.calculateTextDimensions(\n shouldWrap\n ? utils.wrapLabel(msg.message, Math.max(conf.width, actors[msg.from].width), noteFont(conf))\n : msg.message,\n noteFont(conf)\n );\n noteModel.width = shouldWrap\n ? Math.max(conf.width, actors[msg.from].width)\n : Math.max(actors[msg.from].width, conf.width, textDimensions.width + 2 * conf.noteMargin);\n noteModel.startx = startx + (actors[msg.from].width - noteModel.width) / 2;\n } else {\n noteModel.width =\n Math.abs(startx + actors[msg.from].width / 2 - (stopx + actors[msg.to].width / 2)) +\n conf.actorMargin;\n noteModel.startx =\n startx < stopx\n ? startx + actors[msg.from].width / 2 - conf.actorMargin / 2\n : stopx + actors[msg.to].width / 2 - conf.actorMargin / 2;\n }\n if (shouldWrap) {\n noteModel.message = utils.wrapLabel(\n msg.message,\n noteModel.width - 2 * conf.wrapPadding,\n noteFont(conf)\n );\n }\n logger.debug(\n `NM:[${noteModel.startx},${noteModel.stopx},${noteModel.starty},${noteModel.stopy}:${noteModel.width},${noteModel.height}=${msg.message}]`\n );\n return noteModel;\n};\n\nconst buildMessageModel = function(msg, actors) {\n let process = false;\n if (\n [\n parser.yy.LINETYPE.SOLID_OPEN,\n parser.yy.LINETYPE.DOTTED_OPEN,\n parser.yy.LINETYPE.SOLID,\n parser.yy.LINETYPE.DOTTED,\n parser.yy.LINETYPE.SOLID_CROSS,\n parser.yy.LINETYPE.DOTTED_CROSS\n ].includes(msg.type)\n ) {\n process = true;\n }\n if (!process) {\n return {};\n }\n const fromBounds = activationBounds(msg.from, actors);\n const toBounds = activationBounds(msg.to, actors);\n const fromIdx = fromBounds[0] <= toBounds[0] ? 1 : 0;\n const toIdx = fromBounds[0] < toBounds[0] ? 0 : 1;\n const allBounds = fromBounds.concat(toBounds);\n const boundedWidth = Math.abs(toBounds[toIdx] - fromBounds[fromIdx]);\n const msgDims = utils.calculateTextDimensions(msg.message, messageFont(conf));\n if (msg.wrap && msg.message) {\n msg.message = utils.wrapLabel(\n msg.message,\n Math.max(boundedWidth + 2 * conf.wrapPadding, conf.width),\n messageFont(conf)\n );\n }\n return {\n width: Math.max(\n msg.wrap ? 0 : msgDims.width + 2 * conf.wrapPadding,\n boundedWidth + 2 * conf.wrapPadding,\n conf.width\n ),\n height: 0,\n startx: fromBounds[fromIdx],\n stopx: toBounds[toIdx],\n starty: 0,\n stopy: 0,\n message: msg.message,\n type: msg.type,\n wrap: msg.wrap,\n fromBounds: Math.min.apply(null, allBounds),\n toBounds: Math.max.apply(null, allBounds)\n };\n};\n\nconst calculateLoopBounds = function(messages, actors) {\n const loops = {};\n const stack = [];\n let current, noteModel, msgModel;\n\n messages.forEach(function(msg) {\n msg.id = utils.random({ length: 10 });\n switch (msg.type) {\n case parser.yy.LINETYPE.LOOP_START:\n case parser.yy.LINETYPE.ALT_START:\n case parser.yy.LINETYPE.OPT_START:\n case parser.yy.LINETYPE.PAR_START:\n stack.push({\n id: msg.id,\n msg: msg.message,\n from: Number.MAX_SAFE_INTEGER,\n to: Number.MIN_SAFE_INTEGER,\n width: 0\n });\n break;\n case parser.yy.LINETYPE.ALT_ELSE:\n case parser.yy.LINETYPE.PAR_AND:\n if (msg.message) {\n current = stack.pop();\n loops[current.id] = current;\n loops[msg.id] = current;\n stack.push(current);\n }\n break;\n case parser.yy.LINETYPE.LOOP_END:\n case parser.yy.LINETYPE.ALT_END:\n case parser.yy.LINETYPE.OPT_END:\n case parser.yy.LINETYPE.PAR_END:\n current = stack.pop();\n loops[current.id] = current;\n break;\n case parser.yy.LINETYPE.ACTIVE_START:\n {\n const actorRect = actors[msg.from ? msg.from.actor : msg.to.actor];\n const stackedSize = actorActivations(msg.from ? msg.from.actor : msg.to.actor).length;\n const x =\n actorRect.x + actorRect.width / 2 + ((stackedSize - 1) * conf.activationWidth) / 2;\n const toAdd = {\n startx: x,\n stopx: x + conf.activationWidth,\n actor: msg.from.actor,\n enabled: true\n };\n bounds.activations.push(toAdd);\n }\n break;\n case parser.yy.LINETYPE.ACTIVE_END:\n {\n const lastActorActivationIdx = bounds.activations\n .map(a => a.actor)\n .lastIndexOf(msg.from.actor);\n delete bounds.activations.splice(lastActorActivationIdx, 1)[0];\n }\n break;\n }\n const isNote = msg.placement !== undefined;\n if (isNote) {\n noteModel = buildNoteModel(msg, actors);\n msg.noteModel = noteModel;\n stack.forEach(stk => {\n current = stk;\n current.from = Math.min(current.from, noteModel.startx);\n current.to = Math.max(current.to, noteModel.startx + noteModel.width);\n current.width =\n Math.max(current.width, Math.abs(current.from - current.to)) - conf.labelBoxWidth;\n });\n } else {\n msgModel = buildMessageModel(msg, actors);\n msg.msgModel = msgModel;\n if (msgModel.startx && msgModel.stopx && stack.length > 0) {\n stack.forEach(stk => {\n current = stk;\n if (msgModel.startx === msgModel.stopx) {\n let from = actors[msg.from];\n let to = actors[msg.to];\n current.from = Math.min(\n from.x - msgModel.width / 2,\n from.x - from.width / 2,\n current.from\n );\n current.to = Math.max(to.x + msgModel.width / 2, to.x + from.width / 2, current.to);\n current.width =\n Math.max(current.width, Math.abs(current.to - current.from)) - conf.labelBoxWidth;\n } else {\n current.from = Math.min(msgModel.startx, current.from);\n current.to = Math.max(msgModel.stopx, current.to);\n current.width = Math.max(current.width, msgModel.width) - conf.labelBoxWidth;\n }\n });\n }\n }\n });\n bounds.activations = [];\n logger.debug('Loop type widths:', loops);\n return loops;\n};\n\nexport default {\n bounds,\n drawActors,\n setConf,\n draw\n};\n","import moment from 'moment-mini';\nimport { sanitizeUrl } from '@braintree/sanitize-url';\nimport { logger } from '../../logger';\nimport * as configApi from '../../config';\nimport utils from '../../utils';\nimport mermaidAPI from '../../mermaidAPI';\n\nlet dateFormat = '';\nlet axisFormat = '';\nlet todayMarker = '';\nlet excludes = [];\nlet title = '';\nlet sections = [];\nlet tasks = [];\nlet currentSection = '';\nconst tags = ['active', 'done', 'crit', 'milestone'];\nlet funs = [];\nlet inclusiveEndDates = false;\n\n// The serial order of the task in the script\nlet lastOrder = 0;\n\nexport const parseDirective = function(statement, context, type) {\n mermaidAPI.parseDirective(this, statement, context, type);\n};\n\nexport const clear = function() {\n sections = [];\n tasks = [];\n currentSection = '';\n funs = [];\n title = '';\n taskCnt = 0;\n lastTask = undefined;\n lastTaskID = undefined;\n rawTasks = [];\n dateFormat = '';\n axisFormat = '';\n todayMarker = '';\n excludes = [];\n inclusiveEndDates = false;\n lastOrder = 0;\n};\n\nexport const setAxisFormat = function(txt) {\n axisFormat = txt;\n};\n\nexport const getAxisFormat = function() {\n return axisFormat;\n};\n\nexport const setTodayMarker = function(txt) {\n todayMarker = txt;\n};\n\nexport const getTodayMarker = function() {\n return todayMarker;\n};\n\nexport const setDateFormat = function(txt) {\n dateFormat = txt;\n};\n\nexport const enableInclusiveEndDates = function() {\n inclusiveEndDates = true;\n};\n\nexport const endDatesAreInclusive = function() {\n return inclusiveEndDates;\n};\n\nexport const getDateFormat = function() {\n return dateFormat;\n};\n\nexport const setExcludes = function(txt) {\n excludes = txt.toLowerCase().split(/[\\s,]+/);\n};\n\nexport const getExcludes = function() {\n return excludes;\n};\n\nexport const setTitle = function(txt) {\n title = txt;\n};\n\nexport const getTitle = function() {\n return title;\n};\n\nexport const addSection = function(txt) {\n currentSection = txt;\n sections.push(txt);\n};\n\nexport const getSections = function() {\n return sections;\n};\n\nexport const getTasks = function() {\n let allItemsPricessed = compileTasks();\n const maxDepth = 10;\n let iterationCount = 0;\n while (!allItemsPricessed && iterationCount < maxDepth) {\n allItemsPricessed = compileTasks();\n iterationCount++;\n }\n\n tasks = rawTasks;\n\n return tasks;\n};\n\nconst isInvalidDate = function(date, dateFormat, excludes) {\n if (date.isoWeekday() >= 6 && excludes.indexOf('weekends') >= 0) {\n return true;\n }\n if (excludes.indexOf(date.format('dddd').toLowerCase()) >= 0) {\n return true;\n }\n return excludes.indexOf(date.format(dateFormat.trim())) >= 0;\n};\n\nconst checkTaskDates = function(task, dateFormat, excludes) {\n if (!excludes.length || task.manualEndTime) return;\n let startTime = moment(task.startTime, dateFormat, true);\n startTime.add(1, 'd');\n let endTime = moment(task.endTime, dateFormat, true);\n let renderEndTime = fixTaskDates(startTime, endTime, dateFormat, excludes);\n task.endTime = endTime.toDate();\n task.renderEndTime = renderEndTime;\n};\n\nconst fixTaskDates = function(startTime, endTime, dateFormat, excludes) {\n let invalid = false;\n let renderEndTime = null;\n while (startTime <= endTime) {\n if (!invalid) {\n renderEndTime = endTime.toDate();\n }\n invalid = isInvalidDate(startTime, dateFormat, excludes);\n if (invalid) {\n endTime.add(1, 'd');\n }\n startTime.add(1, 'd');\n }\n return renderEndTime;\n};\n\nconst getStartDate = function(prevTime, dateFormat, str) {\n str = str.trim();\n\n // Test for after\n const re = /^after\\s+([\\d\\w- ]+)/;\n const afterStatement = re.exec(str.trim());\n\n if (afterStatement !== null) {\n // check all after ids and take the latest\n let latestEndingTask = null;\n afterStatement[1].split(' ').forEach(function(id) {\n let task = findTaskById(id);\n if (typeof task !== 'undefined') {\n if (!latestEndingTask) {\n latestEndingTask = task;\n } else {\n if (task.endTime > latestEndingTask.endTime) {\n latestEndingTask = task;\n }\n }\n }\n });\n\n if (!latestEndingTask) {\n const dt = new Date();\n dt.setHours(0, 0, 0, 0);\n return dt;\n } else {\n return latestEndingTask.endTime;\n }\n }\n\n // Check for actual date set\n let mDate = moment(str, dateFormat.trim(), true);\n if (mDate.isValid()) {\n return mDate.toDate();\n } else {\n logger.debug('Invalid date:' + str);\n logger.debug('With date format:' + dateFormat.trim());\n }\n\n // Default date - now\n return new Date();\n};\n\nconst durationToDate = function(durationStatement, relativeTime) {\n if (durationStatement !== null) {\n switch (durationStatement[2]) {\n case 's':\n relativeTime.add(durationStatement[1], 'seconds');\n break;\n case 'm':\n relativeTime.add(durationStatement[1], 'minutes');\n break;\n case 'h':\n relativeTime.add(durationStatement[1], 'hours');\n break;\n case 'd':\n relativeTime.add(durationStatement[1], 'days');\n break;\n case 'w':\n relativeTime.add(durationStatement[1], 'weeks');\n break;\n }\n }\n // Default date - now\n return relativeTime.toDate();\n};\n\nconst getEndDate = function(prevTime, dateFormat, str, inclusive) {\n inclusive = inclusive || false;\n str = str.trim();\n\n // Check for actual date\n let mDate = moment(str, dateFormat.trim(), true);\n if (mDate.isValid()) {\n if (inclusive) {\n mDate.add(1, 'd');\n }\n return mDate.toDate();\n }\n\n return durationToDate(/^([\\d]+)([wdhms])/.exec(str.trim()), moment(prevTime));\n};\n\nlet taskCnt = 0;\nconst parseId = function(idStr) {\n if (typeof idStr === 'undefined') {\n taskCnt = taskCnt + 1;\n return 'task' + taskCnt;\n }\n return idStr;\n};\n// id, startDate, endDate\n// id, startDate, length\n// id, after x, endDate\n// id, after x, length\n// startDate, endDate\n// startDate, length\n// after x, endDate\n// after x, length\n// endDate\n// length\n\nconst compileData = function(prevTask, dataStr) {\n let ds;\n\n if (dataStr.substr(0, 1) === ':') {\n ds = dataStr.substr(1, dataStr.length);\n } else {\n ds = dataStr;\n }\n\n const data = ds.split(',');\n\n const task = {};\n\n // Get tags like active, done, crit and milestone\n getTaskTags(data, task, tags);\n\n for (let i = 0; i < data.length; i++) {\n data[i] = data[i].trim();\n }\n\n let endTimeData = '';\n switch (data.length) {\n case 1:\n task.id = parseId();\n task.startTime = prevTask.endTime;\n endTimeData = data[0];\n break;\n case 2:\n task.id = parseId();\n task.startTime = getStartDate(undefined, dateFormat, data[0]);\n endTimeData = data[1];\n break;\n case 3:\n task.id = parseId(data[0]);\n task.startTime = getStartDate(undefined, dateFormat, data[1]);\n endTimeData = data[2];\n break;\n default:\n }\n\n if (endTimeData) {\n task.endTime = getEndDate(task.startTime, dateFormat, endTimeData, inclusiveEndDates);\n task.manualEndTime = moment(endTimeData, 'YYYY-MM-DD', true).isValid();\n checkTaskDates(task, dateFormat, excludes);\n }\n\n return task;\n};\n\nconst parseData = function(prevTaskId, dataStr) {\n let ds;\n if (dataStr.substr(0, 1) === ':') {\n ds = dataStr.substr(1, dataStr.length);\n } else {\n ds = dataStr;\n }\n\n const data = ds.split(',');\n\n const task = {};\n\n // Get tags like active, done, crit and milestone\n getTaskTags(data, task, tags);\n\n for (let i = 0; i < data.length; i++) {\n data[i] = data[i].trim();\n }\n\n switch (data.length) {\n case 1:\n task.id = parseId();\n task.startTime = {\n type: 'prevTaskEnd',\n id: prevTaskId\n };\n task.endTime = {\n data: data[0]\n };\n break;\n case 2:\n task.id = parseId();\n task.startTime = {\n type: 'getStartDate',\n startData: data[0]\n };\n task.endTime = {\n data: data[1]\n };\n break;\n case 3:\n task.id = parseId(data[0]);\n task.startTime = {\n type: 'getStartDate',\n startData: data[1]\n };\n task.endTime = {\n data: data[2]\n };\n break;\n default:\n }\n\n return task;\n};\n\nlet lastTask;\nlet lastTaskID;\nlet rawTasks = [];\nconst taskDb = {};\nexport const addTask = function(descr, data) {\n const rawTask = {\n section: currentSection,\n type: currentSection,\n processed: false,\n manualEndTime: false,\n renderEndTime: null,\n raw: { data: data },\n task: descr,\n classes: []\n };\n const taskInfo = parseData(lastTaskID, data);\n rawTask.raw.startTime = taskInfo.startTime;\n rawTask.raw.endTime = taskInfo.endTime;\n rawTask.id = taskInfo.id;\n rawTask.prevTaskId = lastTaskID;\n rawTask.active = taskInfo.active;\n rawTask.done = taskInfo.done;\n rawTask.crit = taskInfo.crit;\n rawTask.milestone = taskInfo.milestone;\n rawTask.order = lastOrder;\n\n lastOrder++;\n\n const pos = rawTasks.push(rawTask);\n\n lastTaskID = rawTask.id;\n // Store cross ref\n taskDb[rawTask.id] = pos - 1;\n};\n\nexport const findTaskById = function(id) {\n const pos = taskDb[id];\n return rawTasks[pos];\n};\n\nexport const addTaskOrg = function(descr, data) {\n const newTask = {\n section: currentSection,\n type: currentSection,\n description: descr,\n task: descr,\n classes: []\n };\n const taskInfo = compileData(lastTask, data);\n newTask.startTime = taskInfo.startTime;\n newTask.endTime = taskInfo.endTime;\n newTask.id = taskInfo.id;\n newTask.active = taskInfo.active;\n newTask.done = taskInfo.done;\n newTask.crit = taskInfo.crit;\n newTask.milestone = taskInfo.milestone;\n lastTask = newTask;\n tasks.push(newTask);\n};\n\nconst compileTasks = function() {\n const compileTask = function(pos) {\n const task = rawTasks[pos];\n let startTime = '';\n switch (rawTasks[pos].raw.startTime.type) {\n case 'prevTaskEnd': {\n const prevTask = findTaskById(task.prevTaskId);\n task.startTime = prevTask.endTime;\n break;\n }\n case 'getStartDate':\n startTime = getStartDate(undefined, dateFormat, rawTasks[pos].raw.startTime.startData);\n if (startTime) {\n rawTasks[pos].startTime = startTime;\n }\n break;\n }\n\n if (rawTasks[pos].startTime) {\n rawTasks[pos].endTime = getEndDate(\n rawTasks[pos].startTime,\n dateFormat,\n rawTasks[pos].raw.endTime.data,\n inclusiveEndDates\n );\n if (rawTasks[pos].endTime) {\n rawTasks[pos].processed = true;\n rawTasks[pos].manualEndTime = moment(\n rawTasks[pos].raw.endTime.data,\n 'YYYY-MM-DD',\n true\n ).isValid();\n checkTaskDates(rawTasks[pos], dateFormat, excludes);\n }\n }\n\n return rawTasks[pos].processed;\n };\n\n let allProcessed = true;\n for (let i = 0; i < rawTasks.length; i++) {\n compileTask(i);\n\n allProcessed = allProcessed && rawTasks[i].processed;\n }\n return allProcessed;\n};\n\n/**\n * Called by parser when a link is found. Adds the URL to the vertex data.\n * @param ids Comma separated list of ids\n * @param linkStr URL to create a link for\n */\nexport const setLink = function(ids, _linkStr) {\n let linkStr = _linkStr;\n if (configApi.getConfig().securityLevel !== 'loose') {\n linkStr = sanitizeUrl(_linkStr);\n }\n ids.split(',').forEach(function(id) {\n let rawTask = findTaskById(id);\n if (typeof rawTask !== 'undefined') {\n pushFun(id, () => {\n window.open(linkStr, '_self');\n });\n }\n });\n setClass(ids, 'clickable');\n};\n\n/**\n * Called by parser when a special node is found, e.g. a clickable element.\n * @param ids Comma separated list of ids\n * @param className Class to add\n */\nexport const setClass = function(ids, className) {\n ids.split(',').forEach(function(id) {\n let rawTask = findTaskById(id);\n if (typeof rawTask !== 'undefined') {\n rawTask.classes.push(className);\n }\n });\n};\n\nconst setClickFun = function(id, functionName, functionArgs) {\n if (configApi.getConfig().securityLevel !== 'loose') {\n return;\n }\n if (typeof functionName === 'undefined') {\n return;\n }\n\n let argList = [];\n if (typeof functionArgs === 'string') {\n /* Splits functionArgs by ',', ignoring all ',' in double quoted strings */\n argList = functionArgs.split(/,(?=(?:(?:[^\"]*\"){2})*[^\"]*$)/);\n for (let i = 0; i < argList.length; i++) {\n let item = argList[i].trim();\n /* Removes all double quotes at the start and end of an argument */\n /* This preserves all starting and ending whitespace inside */\n if (item.charAt(0) === '\"' && item.charAt(item.length - 1) === '\"') {\n item = item.substr(1, item.length - 2);\n }\n argList[i] = item;\n }\n }\n\n /* if no arguments passed into callback, default to passing in id */\n if (argList.length === 0) {\n argList.push(id);\n }\n\n let rawTask = findTaskById(id);\n if (typeof rawTask !== 'undefined') {\n pushFun(id, () => {\n utils.runFunc(functionName, ...argList);\n });\n }\n};\n\n/**\n * The callbackFunction is executed in a click event bound to the task with the specified id or the task's assigned text\n * @param id The task's id\n * @param callbackFunction A function to be executed when clicked on the task or the task's text\n */\nconst pushFun = function(id, callbackFunction) {\n funs.push(function() {\n // const elem = d3.select(element).select(`[id=\"${id}\"]`)\n const elem = document.querySelector(`[id=\"${id}\"]`);\n if (elem !== null) {\n elem.addEventListener('click', function() {\n callbackFunction();\n });\n }\n });\n funs.push(function() {\n // const elem = d3.select(element).select(`[id=\"${id}-text\"]`)\n const elem = document.querySelector(`[id=\"${id}-text\"]`);\n if (elem !== null) {\n elem.addEventListener('click', function() {\n callbackFunction();\n });\n }\n });\n};\n\n/**\n * Called by parser when a click definition is found. Registers an event handler.\n * @param ids Comma separated list of ids\n * @param functionName Function to be called on click\n * @param functionArgs Function args the function should be called with\n */\nexport const setClickEvent = function(ids, functionName, functionArgs) {\n ids.split(',').forEach(function(id) {\n setClickFun(id, functionName, functionArgs);\n });\n setClass(ids, 'clickable');\n};\n\n/**\n * Binds all functions previously added to fun (specified through click) to the element\n * @param element\n */\nexport const bindFunctions = function(element) {\n funs.forEach(function(fun) {\n fun(element);\n });\n};\n\nexport default {\n parseDirective,\n getConfig: () => configApi.getConfig().gantt,\n clear,\n setDateFormat,\n getDateFormat,\n enableInclusiveEndDates,\n endDatesAreInclusive,\n setAxisFormat,\n getAxisFormat,\n setTodayMarker,\n getTodayMarker,\n setTitle,\n getTitle,\n addSection,\n getSections,\n getTasks,\n addTask,\n findTaskById,\n addTaskOrg,\n setExcludes,\n getExcludes,\n setClickEvent,\n setLink,\n bindFunctions,\n durationToDate\n};\n\nfunction getTaskTags(data, task, tags) {\n let matchFound = true;\n while (matchFound) {\n matchFound = false;\n tags.forEach(function(t) {\n const pattern = '^\\\\s*' + t + '\\\\s*$';\n const regex = new RegExp(pattern);\n if (data[0].match(regex)) {\n task[t] = true;\n data.shift(1);\n matchFound = true;\n }\n });\n }\n}\n","import {\n select,\n scaleTime,\n min,\n max,\n scaleLinear,\n interpolateHcl,\n axisBottom,\n timeFormat\n} from 'd3';\nimport { parser } from './parser/gantt';\nimport common from '../common/common';\nimport ganttDb from './ganttDb';\nimport { configureSvgSize } from '../../utils';\n\nparser.yy = ganttDb;\n\nconst conf = {\n titleTopMargin: 25,\n barHeight: 20,\n barGap: 4,\n topPadding: 50,\n rightPadding: 75,\n leftPadding: 75,\n gridLineStartPadding: 35,\n fontSize: 11,\n fontFamily: '\"Open-Sans\", \"sans-serif\"'\n};\nexport const setConf = function(cnf) {\n const keys = Object.keys(cnf);\n\n keys.forEach(function(key) {\n conf[key] = cnf[key];\n });\n};\nlet w;\nexport const draw = function(text, id) {\n parser.yy.clear();\n parser.parse(text);\n\n const elem = document.getElementById(id);\n w = elem.parentElement.offsetWidth;\n\n if (typeof w === 'undefined') {\n w = 1200;\n }\n\n if (typeof conf.useWidth !== 'undefined') {\n w = conf.useWidth;\n }\n\n const taskArray = parser.yy.getTasks();\n\n // Set height based on number of tasks\n const h = taskArray.length * (conf.barHeight + conf.barGap) + 2 * conf.topPadding;\n\n // Set viewBox\n elem.setAttribute('viewBox', '0 0 ' + w + ' ' + h);\n const svg = select(`[id=\"${id}\"]`);\n\n // Set timescale\n const timeScale = scaleTime()\n .domain([\n min(taskArray, function(d) {\n return d.startTime;\n }),\n max(taskArray, function(d) {\n return d.endTime;\n })\n ])\n .rangeRound([0, w - conf.leftPadding - conf.rightPadding]);\n\n let categories = [];\n\n for (let i = 0; i < taskArray.length; i++) {\n categories.push(taskArray[i].type);\n }\n\n const catsUnfiltered = categories; // for vert labels\n\n categories = checkUnique(categories);\n\n function taskCompare(a, b) {\n const taskA = a.startTime;\n const taskB = b.startTime;\n let result = 0;\n if (taskA > taskB) {\n result = 1;\n } else if (taskA < taskB) {\n result = -1;\n }\n return result;\n }\n\n // Sort the task array using the above taskCompare() so that\n // tasks are created based on their order of startTime\n taskArray.sort(taskCompare);\n\n makeGant(taskArray, w, h);\n\n configureSvgSize(svg, h, w, conf.useMaxWidth);\n\n svg\n .append('text')\n .text(parser.yy.getTitle())\n .attr('x', w / 2)\n .attr('y', conf.titleTopMargin)\n .attr('class', 'titleText');\n\n function makeGant(tasks, pageWidth, pageHeight) {\n const barHeight = conf.barHeight;\n const gap = barHeight + conf.barGap;\n const topPadding = conf.topPadding;\n const leftPadding = conf.leftPadding;\n\n const colorScale = scaleLinear()\n .domain([0, categories.length])\n .range(['#00B9FA', '#F95002'])\n .interpolate(interpolateHcl);\n\n makeGrid(leftPadding, topPadding, pageWidth, pageHeight);\n drawRects(tasks, gap, topPadding, leftPadding, barHeight, colorScale, pageWidth, pageHeight);\n vertLabels(gap, topPadding, leftPadding, barHeight, colorScale);\n drawToday(leftPadding, topPadding, pageWidth, pageHeight);\n }\n\n function drawRects(theArray, theGap, theTopPad, theSidePad, theBarHeight, theColorScale, w) {\n // Draw background rects covering the entire width of the graph, these form the section rows.\n svg\n .append('g')\n .selectAll('rect')\n .data(theArray)\n .enter()\n .append('rect')\n .attr('x', 0)\n .attr('y', function(d, i) {\n // Ignore the incoming i value and use our order instead\n i = d.order;\n return i * theGap + theTopPad - 2;\n })\n .attr('width', function() {\n return w - conf.rightPadding / 2;\n })\n .attr('height', theGap)\n .attr('class', function(d) {\n for (let i = 0; i < categories.length; i++) {\n if (d.type === categories[i]) {\n return 'section section' + (i % conf.numberSectionStyles);\n }\n }\n return 'section section0';\n });\n\n // Draw the rects representing the tasks\n const rectangles = svg\n .append('g')\n .selectAll('rect')\n .data(theArray)\n .enter();\n\n rectangles\n .append('rect')\n .attr('id', function(d) {\n return d.id;\n })\n .attr('rx', 3)\n .attr('ry', 3)\n .attr('x', function(d) {\n if (d.milestone) {\n return (\n timeScale(d.startTime) +\n theSidePad +\n 0.5 * (timeScale(d.endTime) - timeScale(d.startTime)) -\n 0.5 * theBarHeight\n );\n }\n return timeScale(d.startTime) + theSidePad;\n })\n .attr('y', function(d, i) {\n // Ignore the incoming i value and use our order instead\n i = d.order;\n return i * theGap + theTopPad;\n })\n .attr('width', function(d) {\n if (d.milestone) {\n return theBarHeight;\n }\n return timeScale(d.renderEndTime || d.endTime) - timeScale(d.startTime);\n })\n .attr('height', theBarHeight)\n .attr('transform-origin', function(d, i) {\n return (\n (\n timeScale(d.startTime) +\n theSidePad +\n 0.5 * (timeScale(d.endTime) - timeScale(d.startTime))\n ).toString() +\n 'px ' +\n (i * theGap + theTopPad + 0.5 * theBarHeight).toString() +\n 'px'\n );\n })\n .attr('class', function(d) {\n const res = 'task';\n\n let classStr = '';\n if (d.classes.length > 0) {\n classStr = d.classes.join(' ');\n }\n\n let secNum = 0;\n for (let i = 0; i < categories.length; i++) {\n if (d.type === categories[i]) {\n secNum = i % conf.numberSectionStyles;\n }\n }\n\n let taskClass = '';\n if (d.active) {\n if (d.crit) {\n taskClass += ' activeCrit';\n } else {\n taskClass = ' active';\n }\n } else if (d.done) {\n if (d.crit) {\n taskClass = ' doneCrit';\n } else {\n taskClass = ' done';\n }\n } else {\n if (d.crit) {\n taskClass += ' crit';\n }\n }\n\n if (taskClass.length === 0) {\n taskClass = ' task';\n }\n\n if (d.milestone) {\n taskClass = ' milestone ' + taskClass;\n }\n\n taskClass += secNum;\n\n taskClass += ' ' + classStr;\n\n return res + taskClass;\n });\n\n // Append task labels\n rectangles\n .append('text')\n .attr('id', function(d) {\n return d.id + '-text';\n })\n .text(function(d) {\n return d.task;\n })\n .attr('font-size', conf.fontSize)\n .attr('x', function(d) {\n let startX = timeScale(d.startTime);\n let endX = timeScale(d.renderEndTime || d.endTime);\n if (d.milestone) {\n startX += 0.5 * (timeScale(d.endTime) - timeScale(d.startTime)) - 0.5 * theBarHeight;\n }\n if (d.milestone) {\n endX = startX + theBarHeight;\n }\n const textWidth = this.getBBox().width;\n\n // Check id text width > width of rectangle\n if (textWidth > endX - startX) {\n if (endX + textWidth + 1.5 * conf.leftPadding > w) {\n return startX + theSidePad - 5;\n } else {\n return endX + theSidePad + 5;\n }\n } else {\n return (endX - startX) / 2 + startX + theSidePad;\n }\n })\n .attr('y', function(d, i) {\n // Ignore the incoming i value and use our order instead\n i = d.order;\n return i * theGap + conf.barHeight / 2 + (conf.fontSize / 2 - 2) + theTopPad;\n })\n .attr('text-height', theBarHeight)\n .attr('class', function(d) {\n const startX = timeScale(d.startTime);\n let endX = timeScale(d.endTime);\n if (d.milestone) {\n endX = startX + theBarHeight;\n }\n const textWidth = this.getBBox().width;\n\n let classStr = '';\n if (d.classes.length > 0) {\n classStr = d.classes.join(' ');\n }\n\n let secNum = 0;\n for (let i = 0; i < categories.length; i++) {\n if (d.type === categories[i]) {\n secNum = i % conf.numberSectionStyles;\n }\n }\n\n let taskType = '';\n if (d.active) {\n if (d.crit) {\n taskType = 'activeCritText' + secNum;\n } else {\n taskType = 'activeText' + secNum;\n }\n }\n\n if (d.done) {\n if (d.crit) {\n taskType = taskType + ' doneCritText' + secNum;\n } else {\n taskType = taskType + ' doneText' + secNum;\n }\n } else {\n if (d.crit) {\n taskType = taskType + ' critText' + secNum;\n }\n }\n\n if (d.milestone) {\n taskType += ' milestoneText';\n }\n\n // Check id text width > width of rectangle\n if (textWidth > endX - startX) {\n if (endX + textWidth + 1.5 * conf.leftPadding > w) {\n return classStr + ' taskTextOutsideLeft taskTextOutside' + secNum + ' ' + taskType;\n } else {\n return (\n classStr +\n ' taskTextOutsideRight taskTextOutside' +\n secNum +\n ' ' +\n taskType +\n ' width-' +\n textWidth\n );\n }\n } else {\n return classStr + ' taskText taskText' + secNum + ' ' + taskType + ' width-' + textWidth;\n }\n });\n }\n\n function makeGrid(theSidePad, theTopPad, w, h) {\n let xAxis = axisBottom(timeScale)\n .tickSize(-h + theTopPad + conf.gridLineStartPadding)\n .tickFormat(timeFormat(parser.yy.getAxisFormat() || conf.axisFormat || '%Y-%m-%d'));\n\n svg\n .append('g')\n .attr('class', 'grid')\n .attr('transform', 'translate(' + theSidePad + ', ' + (h - 50) + ')')\n .call(xAxis)\n .selectAll('text')\n .style('text-anchor', 'middle')\n .attr('fill', '#000')\n .attr('stroke', 'none')\n .attr('font-size', 10)\n .attr('dy', '1em');\n }\n\n function vertLabels(theGap, theTopPad) {\n const numOccurances = [];\n let prevGap = 0;\n\n for (let i = 0; i < categories.length; i++) {\n numOccurances[i] = [categories[i], getCount(categories[i], catsUnfiltered)];\n }\n\n svg\n .append('g') // without doing this, impossible to put grid lines behind text\n .selectAll('text')\n .data(numOccurances)\n .enter()\n .append(function(d) {\n const rows = d[0].split(common.lineBreakRegex);\n const dy = -(rows.length - 1) / 2;\n\n const svgLabel = document.createElementNS('http://www.w3.org/2000/svg', 'text');\n svgLabel.setAttribute('dy', dy + 'em');\n\n for (let j = 0; j < rows.length; j++) {\n const tspan = document.createElementNS('http://www.w3.org/2000/svg', 'tspan');\n tspan.setAttribute('alignment-baseline', 'central');\n tspan.setAttribute('x', '10');\n if (j > 0) tspan.setAttribute('dy', '1em');\n tspan.textContent = rows[j];\n svgLabel.appendChild(tspan);\n }\n return svgLabel;\n })\n .attr('x', 10)\n .attr('y', function(d, i) {\n if (i > 0) {\n for (let j = 0; j < i; j++) {\n prevGap += numOccurances[i - 1][1];\n return (d[1] * theGap) / 2 + prevGap * theGap + theTopPad;\n }\n } else {\n return (d[1] * theGap) / 2 + theTopPad;\n }\n })\n .attr('class', function(d) {\n for (let i = 0; i < categories.length; i++) {\n if (d[0] === categories[i]) {\n return 'sectionTitle sectionTitle' + (i % conf.numberSectionStyles);\n }\n }\n return 'sectionTitle';\n });\n }\n\n function drawToday(theSidePad, theTopPad, w, h) {\n const todayMarker = ganttDb.getTodayMarker();\n if (todayMarker === 'off') {\n return;\n }\n\n const todayG = svg.append('g').attr('class', 'today');\n const today = new Date();\n const todayLine = todayG.append('line');\n\n todayLine\n .attr('x1', timeScale(today) + theSidePad)\n .attr('x2', timeScale(today) + theSidePad)\n .attr('y1', conf.titleTopMargin)\n .attr('y2', h - conf.titleTopMargin)\n .attr('class', 'today');\n\n if (todayMarker !== '') {\n todayLine.attr('style', todayMarker.replace(/,/g, ';'));\n }\n }\n\n // from this stackexchange question: http://stackoverflow.com/questions/1890203/unique-for-arrays-in-javascript\n function checkUnique(arr) {\n const hash = {};\n const result = [];\n for (let i = 0, l = arr.length; i < l; ++i) {\n if (!hash.hasOwnProperty(arr[i])) { // eslint-disable-line\n // it works with objects! in FF, at least\n hash[arr[i]] = true;\n result.push(arr[i]);\n }\n }\n return result;\n }\n\n // from this stackexchange question: http://stackoverflow.com/questions/14227981/count-how-many-strings-in-an-array-have-duplicates-in-the-same-array\n function getCounts(arr) {\n let i = arr.length; // const to loop over\n const obj = {}; // obj to store results\n while (i) {\n obj[arr[--i]] = (obj[arr[i]] || 0) + 1; // count occurrences\n }\n return obj;\n }\n\n // get specific from everything\n function getCount(word, arr) {\n return getCounts(arr)[word] || 0;\n }\n};\n\nexport default {\n setConf,\n draw\n};\n","import { select } from 'd3';\nimport dagre from 'dagre';\nimport graphlib from 'graphlib';\nimport { logger } from '../../logger';\nimport classDb, { lookUpDomId } from './classDb';\nimport { parser } from './parser/classDiagram';\nimport svgDraw from './svgDraw';\nimport { configureSvgSize } from '../../utils';\n\nparser.yy = classDb;\n\nlet idCache = {};\nconst padding = 20;\n\nconst conf = {\n dividerMargin: 10,\n padding: 5,\n textHeight: 10\n};\n\n// Todo optimize\nconst getGraphId = function(label) {\n const keys = Object.keys(idCache);\n\n for (let i = 0; i < keys.length; i++) {\n if (idCache[keys[i]].label === label) {\n return keys[i];\n }\n }\n\n return undefined;\n};\n\n/**\n * Setup arrow head and define the marker. The result is appended to the svg.\n */\nconst insertMarkers = function(elem) {\n elem\n .append('defs')\n .append('marker')\n .attr('id', 'extensionStart')\n .attr('class', 'extension')\n .attr('refX', 0)\n .attr('refY', 7)\n .attr('markerWidth', 190)\n .attr('markerHeight', 240)\n .attr('orient', 'auto')\n .append('path')\n .attr('d', 'M 1,7 L18,13 V 1 Z');\n\n elem\n .append('defs')\n .append('marker')\n .attr('id', 'extensionEnd')\n .attr('refX', 19)\n .attr('refY', 7)\n .attr('markerWidth', 20)\n .attr('markerHeight', 28)\n .attr('orient', 'auto')\n .append('path')\n .attr('d', 'M 1,1 V 13 L18,7 Z'); // this is actual shape for arrowhead\n\n elem\n .append('defs')\n .append('marker')\n .attr('id', 'compositionStart')\n .attr('class', 'extension')\n .attr('refX', 0)\n .attr('refY', 7)\n .attr('markerWidth', 190)\n .attr('markerHeight', 240)\n .attr('orient', 'auto')\n .append('path')\n .attr('d', 'M 18,7 L9,13 L1,7 L9,1 Z');\n\n elem\n .append('defs')\n .append('marker')\n .attr('id', 'compositionEnd')\n .attr('refX', 19)\n .attr('refY', 7)\n .attr('markerWidth', 20)\n .attr('markerHeight', 28)\n .attr('orient', 'auto')\n .append('path')\n .attr('d', 'M 18,7 L9,13 L1,7 L9,1 Z');\n\n elem\n .append('defs')\n .append('marker')\n .attr('id', 'aggregationStart')\n .attr('class', 'extension')\n .attr('refX', 0)\n .attr('refY', 7)\n .attr('markerWidth', 190)\n .attr('markerHeight', 240)\n .attr('orient', 'auto')\n .append('path')\n .attr('d', 'M 18,7 L9,13 L1,7 L9,1 Z');\n\n elem\n .append('defs')\n .append('marker')\n .attr('id', 'aggregationEnd')\n .attr('refX', 19)\n .attr('refY', 7)\n .attr('markerWidth', 20)\n .attr('markerHeight', 28)\n .attr('orient', 'auto')\n .append('path')\n .attr('d', 'M 18,7 L9,13 L1,7 L9,1 Z');\n\n elem\n .append('defs')\n .append('marker')\n .attr('id', 'dependencyStart')\n .attr('class', 'extension')\n .attr('refX', 0)\n .attr('refY', 7)\n .attr('markerWidth', 190)\n .attr('markerHeight', 240)\n .attr('orient', 'auto')\n .append('path')\n .attr('d', 'M 5,7 L9,13 L1,7 L9,1 Z');\n\n elem\n .append('defs')\n .append('marker')\n .attr('id', 'dependencyEnd')\n .attr('refX', 19)\n .attr('refY', 7)\n .attr('markerWidth', 20)\n .attr('markerHeight', 28)\n .attr('orient', 'auto')\n .append('path')\n .attr('d', 'M 18,7 L9,13 L14,7 L9,1 Z');\n};\n\nexport const setConf = function(cnf) {\n const keys = Object.keys(cnf);\n\n keys.forEach(function(key) {\n conf[key] = cnf[key];\n });\n};\n\n/**\n * Draws a flowchart in the tag with id: id based on the graph definition in text.\n * @param text\n * @param id\n */\nexport const draw = function(text, id) {\n idCache = {};\n parser.yy.clear();\n parser.parse(text);\n\n logger.info('Rendering diagram ' + text);\n\n // Fetch the default direction, use TD if none was found\n const diagram = select(`[id='${id}']`);\n diagram.attr('xmlns:xlink', 'http://www.w3.org/1999/xlink');\n insertMarkers(diagram);\n\n // Layout graph, Create a new directed graph\n const g = new graphlib.Graph({\n multigraph: true\n });\n\n // Set an object for the graph label\n g.setGraph({\n isMultiGraph: true\n });\n\n // Default to assigning a new object as a label for each new edge.\n g.setDefaultEdgeLabel(function() {\n return {};\n });\n\n const classes = classDb.getClasses();\n const keys = Object.keys(classes);\n\n for (let i = 0; i < keys.length; i++) {\n const classDef = classes[keys[i]];\n const node = svgDraw.drawClass(diagram, classDef, conf);\n idCache[node.id] = node;\n\n // Add nodes to the graph. The first argument is the node id. The second is\n // metadata about the node. In this case we're going to add labels to each of\n // our nodes.\n g.setNode(node.id, node);\n\n logger.info('Org height: ' + node.height);\n }\n\n const relations = classDb.getRelations();\n relations.forEach(function(relation) {\n logger.info(\n 'tjoho' + getGraphId(relation.id1) + getGraphId(relation.id2) + JSON.stringify(relation)\n );\n g.setEdge(\n getGraphId(relation.id1),\n getGraphId(relation.id2),\n {\n relation: relation\n },\n relation.title || 'DEFAULT'\n );\n });\n\n dagre.layout(g);\n g.nodes().forEach(function(v) {\n if (typeof v !== 'undefined' && typeof g.node(v) !== 'undefined') {\n logger.debug('Node ' + v + ': ' + JSON.stringify(g.node(v)));\n select('#' + lookUpDomId(v)).attr(\n 'transform',\n 'translate(' +\n (g.node(v).x - g.node(v).width / 2) +\n ',' +\n (g.node(v).y - g.node(v).height / 2) +\n ' )'\n );\n }\n });\n\n g.edges().forEach(function(e) {\n if (typeof e !== 'undefined' && typeof g.edge(e) !== 'undefined') {\n logger.debug('Edge ' + e.v + ' -> ' + e.w + ': ' + JSON.stringify(g.edge(e)));\n svgDraw.drawEdge(diagram, g.edge(e), g.edge(e).relation, conf);\n }\n });\n\n const svgBounds = diagram.node().getBBox();\n const width = svgBounds.width + padding * 2;\n const height = svgBounds.height + padding * 2;\n\n configureSvgSize(diagram, height, width, conf.useMaxWidth);\n\n // Ensure the viewBox includes the whole svgBounds area with extra space for padding\n const vBox = `${svgBounds.x - padding} ${svgBounds.y - padding} ${width} ${height}`;\n logger.debug(`viewBox ${vBox}`);\n diagram.attr('viewBox', vBox);\n};\n\nexport default {\n setConf,\n draw\n};\n","import { select } from 'd3';\nimport dagre from 'dagre';\nimport graphlib from 'graphlib';\nimport { logger } from '../../logger';\nimport classDb, { lookUpDomId } from './classDb';\nimport { parser } from './parser/classDiagram';\nimport svgDraw from './svgDraw';\nimport { getConfig } from '../../config';\nimport { render } from '../../dagre-wrapper/index.js';\n// import addHtmlLabel from 'dagre-d3/lib/label/add-html-label.js';\nimport { curveLinear } from 'd3';\nimport { interpolateToCurve, getStylesFromArray, configureSvgSize } from '../../utils';\nimport common from '../common/common';\n\nparser.yy = classDb;\n\nlet idCache = {};\nconst padding = 20;\n\nconst conf = {\n dividerMargin: 10,\n padding: 5,\n textHeight: 10\n};\n\n/**\n * Function that adds the vertices found during parsing to the graph to be rendered.\n * @param vert Object containing the vertices.\n * @param g The graph that is to be drawn.\n */\nexport const addClasses = function(classes, g) {\n // const svg = select(`[id=\"${svgId}\"]`);\n const keys = Object.keys(classes);\n logger.info('keys:', keys);\n logger.info(classes);\n\n // Iterate through each item in the vertex object (containing all the vertices found) in the graph definition\n keys.forEach(function(id) {\n const vertex = classes[id];\n\n /**\n * Variable for storing the classes for the vertex\n * @type {string}\n */\n let cssClassStr = '';\n if (vertex.cssClasses.length > 0) {\n cssClassStr = cssClassStr + ' ' + vertex.cssClasses.join(' ');\n }\n // if (vertex.classes.length > 0) {\n // classStr = vertex.classes.join(' ');\n // }\n\n const styles = { labelStyle: '' }; //getStylesFromArray(vertex.styles);\n\n // Use vertex id as text in the box if no text is provided by the graph definition\n let vertexText = vertex.text !== undefined ? vertex.text : vertex.id;\n\n // We create a SVG label, either by delegating to addHtmlLabel or manually\n // let vertexNode;\n // if (getConfig().flowchart.htmlLabels) {\n // const node = {\n // label: vertexText.replace(\n // /fa[lrsb]?:fa-[\\w-]+/g,\n // s => ``\n // )\n // };\n // vertexNode = addHtmlLabel(svg, node).node();\n // vertexNode.parentNode.removeChild(vertexNode);\n // } else {\n // const svgLabel = document.createElementNS('http://www.w3.org/2000/svg', 'text');\n // svgLabel.setAttribute('style', styles.labelStyle.replace('color:', 'fill:'));\n\n // const rows = vertexText.split(common.lineBreakRegex);\n\n // for (let j = 0; j < rows.length; j++) {\n // const tspan = document.createElementNS('http://www.w3.org/2000/svg', 'tspan');\n // tspan.setAttributeNS('http://www.w3.org/XML/1998/namespace', 'xml:space', 'preserve');\n // tspan.setAttribute('dy', '1em');\n // tspan.setAttribute('x', '1');\n // tspan.textContent = rows[j];\n // svgLabel.appendChild(tspan);\n // }\n // vertexNode = svgLabel;\n // }\n\n let radious = 0;\n let _shape = '';\n // Set the shape based parameters\n switch (vertex.type) {\n case 'class':\n _shape = 'class_box';\n break;\n default:\n _shape = 'class_box';\n }\n // Add the node\n g.setNode(vertex.id, {\n labelStyle: styles.labelStyle,\n shape: _shape,\n labelText: vertexText,\n classData: vertex,\n rx: radious,\n ry: radious,\n class: cssClassStr,\n style: styles.style,\n id: vertex.id,\n domId: vertex.domId,\n haveCallback: vertex.haveCallback,\n link: vertex.link,\n width: vertex.type === 'group' ? 500 : undefined,\n type: vertex.type,\n padding: getConfig().flowchart.padding\n });\n\n logger.info('setNode', {\n labelStyle: styles.labelStyle,\n shape: _shape,\n labelText: vertexText,\n rx: radious,\n ry: radious,\n class: cssClassStr,\n style: styles.style,\n id: vertex.id,\n width: vertex.type === 'group' ? 500 : undefined,\n type: vertex.type,\n padding: getConfig().flowchart.padding\n });\n });\n};\n\n/**\n * Add edges to graph based on parsed graph defninition\n * @param {Object} edges The edges to add to the graph\n * @param {Object} g The graph object\n */\nexport const addRelations = function(relations, g) {\n let cnt = 0;\n\n let defaultStyle;\n let defaultLabelStyle;\n\n // if (typeof relations.defaultStyle !== 'undefined') {\n // const defaultStyles = getStylesFromArray(relations.defaultStyle);\n // defaultStyle = defaultStyles.style;\n // defaultLabelStyle = defaultStyles.labelStyle;\n // }\n\n relations.forEach(function(edge) {\n cnt++;\n const edgeData = {};\n //Set relationship style and line type\n edgeData.classes = 'relation';\n edgeData.pattern = edge.relation.lineType == 1 ? 'dashed' : 'solid';\n\n edgeData.id = 'id' + cnt;\n // Set link type for rendering\n if (edge.type === 'arrow_open') {\n edgeData.arrowhead = 'none';\n } else {\n edgeData.arrowhead = 'normal';\n }\n\n logger.info(edgeData, edge);\n //Set edge extra labels\n //edgeData.startLabelLeft = edge.relationTitle1;\n edgeData.startLabelRight = edge.relationTitle1 === 'none' ? '' : edge.relationTitle1;\n edgeData.endLabelLeft = edge.relationTitle2 === 'none' ? '' : edge.relationTitle2;\n //edgeData.endLabelRight = edge.relationTitle2;\n\n //Set relation arrow types\n edgeData.arrowTypeStart = getArrowMarker(edge.relation.type1);\n edgeData.arrowTypeEnd = getArrowMarker(edge.relation.type2);\n let style = '';\n let labelStyle = '';\n\n if (typeof edge.style !== 'undefined') {\n const styles = getStylesFromArray(edge.style);\n style = styles.style;\n labelStyle = styles.labelStyle;\n } else {\n style = 'fill:none';\n if (typeof defaultStyle !== 'undefined') {\n style = defaultStyle;\n }\n if (typeof defaultLabelStyle !== 'undefined') {\n labelStyle = defaultLabelStyle;\n }\n }\n\n edgeData.style = style;\n edgeData.labelStyle = labelStyle;\n\n if (typeof edge.interpolate !== 'undefined') {\n edgeData.curve = interpolateToCurve(edge.interpolate, curveLinear);\n } else if (typeof relations.defaultInterpolate !== 'undefined') {\n edgeData.curve = interpolateToCurve(relations.defaultInterpolate, curveLinear);\n } else {\n edgeData.curve = interpolateToCurve(conf.curve, curveLinear);\n }\n\n edge.text = edge.title;\n if (typeof edge.text === 'undefined') {\n if (typeof edge.style !== 'undefined') {\n edgeData.arrowheadStyle = 'fill: #333';\n }\n } else {\n edgeData.arrowheadStyle = 'fill: #333';\n edgeData.labelpos = 'c';\n\n if (getConfig().flowchart.htmlLabels && false) { // eslint-disable-line\n edgeData.labelType = 'html';\n edgeData.label = '' + edge.text + '';\n } else {\n edgeData.labelType = 'text';\n edgeData.label = edge.text.replace(common.lineBreakRegex, '\\n');\n\n if (typeof edge.style === 'undefined') {\n edgeData.style = edgeData.style || 'stroke: #333; stroke-width: 1.5px;fill:none';\n }\n\n edgeData.labelStyle = edgeData.labelStyle.replace('color:', 'fill:');\n }\n }\n // Add the edge to the graph\n g.setEdge(edge.id1, edge.id2, edgeData, cnt);\n });\n};\n\n// Todo optimize\nconst getGraphId = function(label) {\n const keys = Object.keys(idCache);\n\n for (let i = 0; i < keys.length; i++) {\n if (idCache[keys[i]].label === label) {\n return keys[i];\n }\n }\n\n return undefined;\n};\n\nexport const setConf = function(cnf) {\n const keys = Object.keys(cnf);\n\n keys.forEach(function(key) {\n conf[key] = cnf[key];\n });\n};\n\n/**\n * Draws a flowchart in the tag with id: id based on the graph definition in text.\n * @param text\n * @param id\n */\nexport const drawOld = function(text, id) {\n idCache = {};\n parser.yy.clear();\n parser.parse(text);\n\n logger.info('Rendering diagram ' + text);\n\n // Fetch the default direction, use TD if none was found\n const diagram = select(`[id='${id}']`);\n // insertMarkers(diagram);\n\n // Layout graph, Create a new directed graph\n const g = new graphlib.Graph({\n multigraph: true\n });\n\n // Set an object for the graph label\n g.setGraph({\n isMultiGraph: true\n });\n\n // Default to assigning a new object as a label for each new edge.\n g.setDefaultEdgeLabel(function() {\n return {};\n });\n\n const classes = classDb.getClasses();\n logger.info('classes:');\n logger.info(classes);\n const keys = Object.keys(classes);\n for (let i = 0; i < keys.length; i++) {\n const classDef = classes[keys[i]];\n const node = svgDraw.drawClass(diagram, classDef, conf);\n idCache[node.id] = node;\n\n // Add nodes to the graph. The first argument is the node id. The second is\n // metadata about the node. In this case we're going to add labels to each of\n // our nodes.\n g.setNode(node.id, node);\n\n logger.info('Org height: ' + node.height);\n }\n\n const relations = classDb.getRelations();\n logger.info('relations:', relations);\n relations.forEach(function(relation) {\n logger.info(\n 'tjoho' + getGraphId(relation.id1) + getGraphId(relation.id2) + JSON.stringify(relation)\n );\n g.setEdge(\n getGraphId(relation.id1),\n getGraphId(relation.id2),\n {\n relation: relation\n },\n relation.title || 'DEFAULT'\n );\n });\n\n dagre.layout(g);\n g.nodes().forEach(function(v) {\n if (typeof v !== 'undefined' && typeof g.node(v) !== 'undefined') {\n logger.debug('Node ' + v + ': ' + JSON.stringify(g.node(v)));\n select('#' + lookUpDomId(v)).attr(\n 'transform',\n 'translate(' +\n (g.node(v).x - g.node(v).width / 2) +\n ',' +\n (g.node(v).y - g.node(v).height / 2) +\n ' )'\n );\n }\n });\n\n g.edges().forEach(function(e) {\n if (typeof e !== 'undefined' && typeof g.edge(e) !== 'undefined') {\n logger.debug('Edge ' + e.v + ' -> ' + e.w + ': ' + JSON.stringify(g.edge(e)));\n svgDraw.drawEdge(diagram, g.edge(e), g.edge(e).relation, conf);\n }\n });\n\n const svgBounds = diagram.node().getBBox();\n const width = svgBounds.width + padding * 2;\n const height = svgBounds.height + padding * 2;\n\n configureSvgSize(diagram, height, width, conf.useMaxWidth);\n\n // Ensure the viewBox includes the whole svgBounds area with extra space for padding\n const vBox = `${svgBounds.x - padding} ${svgBounds.y - padding} ${width} ${height}`;\n logger.debug(`viewBox ${vBox}`);\n diagram.attr('viewBox', vBox);\n};\n\nexport const draw = function(text, id) {\n logger.info('Drawing class');\n classDb.clear();\n // const parser = classDb.parser;\n // parser.yy = classDb;\n\n // Parse the graph definition\n // try {\n parser.parse(text);\n // } catch (err) {\n // logger.debug('Parsing failed');\n // }\n\n // Fetch the default direction, use TD if none was found\n let dir = 'TD';\n\n const conf = getConfig().flowchart;\n logger.info('config:', conf);\n const nodeSpacing = conf.nodeSpacing || 50;\n const rankSpacing = conf.rankSpacing || 50;\n\n // Create the input mermaid.graph\n const g = new graphlib.Graph({\n multigraph: true,\n compound: true\n })\n .setGraph({\n rankdir: dir,\n nodesep: nodeSpacing,\n ranksep: rankSpacing,\n marginx: 8,\n marginy: 8\n })\n .setDefaultEdgeLabel(function() {\n return {};\n });\n\n // let subG;\n // const subGraphs = flowDb.getSubGraphs();\n // logger.info('Subgraphs - ', subGraphs);\n // for (let i = subGraphs.length - 1; i >= 0; i--) {\n // subG = subGraphs[i];\n // logger.info('Subgraph - ', subG);\n // flowDb.addVertex(subG.id, subG.title, 'group', undefined, subG.classes);\n // }\n\n // Fetch the verices/nodes and edges/links from the parsed graph definition\n const classes = classDb.getClasses();\n const relations = classDb.getRelations();\n\n logger.info(relations);\n // let i = 0;\n // for (i = subGraphs.length - 1; i >= 0; i--) {\n // subG = subGraphs[i];\n\n // selectAll('cluster').append('text');\n\n // for (let j = 0; j < subG.nodes.length; j++) {\n // g.setParent(subG.nodes[j], subG.id);\n // }\n // }\n addClasses(classes, g, id);\n addRelations(relations, g);\n\n // Add custom shapes\n // flowChartShapes.addToRenderV2(addShape);\n\n // Set up an SVG group so that we can translate the final graph.\n const svg = select(`[id=\"${id}\"]`);\n svg.attr('xmlns:xlink', 'http://www.w3.org/1999/xlink');\n\n // Run the renderer. This is what draws the final graph.\n const element = select('#' + id + ' g');\n render(element, g, ['aggregation', 'extension', 'composition', 'dependency'], 'classDiagram', id);\n\n // element.selectAll('g.node').attr('title', function() {\n // return flowDb.getTooltip(this.id);\n // });\n\n const padding = 8;\n const svgBounds = svg.node().getBBox();\n const width = svgBounds.width + padding * 2;\n const height = svgBounds.height + padding * 2;\n logger.debug(\n `new ViewBox 0 0 ${width} ${height}`,\n `translate(${padding - g._label.marginx}, ${padding - g._label.marginy})`\n );\n\n configureSvgSize(svg, height, width, conf.useMaxWidth);\n\n svg.attr('viewBox', `0 0 ${width} ${height}`);\n svg\n .select('g')\n .attr('transform', `translate(${padding - g._label.marginx}, ${padding - svgBounds.y})`);\n\n // Index nodes\n // flowDb.indexNodes('subGraph' + i);\n\n // Add label rects for non html labels\n if (!conf.htmlLabels) {\n const labels = document.querySelectorAll('[id=\"' + id + '\"] .edgeLabel .label');\n for (let k = 0; k < labels.length; k++) {\n const label = labels[k];\n\n // Get dimensions of label\n const dim = label.getBBox();\n\n const rect = document.createElementNS('http://www.w3.org/2000/svg', 'rect');\n rect.setAttribute('rx', 0);\n rect.setAttribute('ry', 0);\n rect.setAttribute('width', dim.width);\n rect.setAttribute('height', dim.height);\n rect.setAttribute('style', 'fill:#e8e8e8;');\n\n label.insertBefore(rect, label.firstChild);\n }\n }\n\n // If node has a link, wrap it in an anchor SVG object.\n // const keys = Object.keys(classes);\n // keys.forEach(function(key) {\n // const vertex = classes[key];\n\n // if (vertex.link) {\n // const node = select('#' + id + ' [id=\"' + key + '\"]');\n // if (node) {\n // const link = document.createElementNS('http://www.w3.org/2000/svg', 'a');\n // link.setAttributeNS('http://www.w3.org/2000/svg', 'class', vertex.classes.join(' '));\n // link.setAttributeNS('http://www.w3.org/2000/svg', 'href', vertex.link);\n // link.setAttributeNS('http://www.w3.org/2000/svg', 'rel', 'noopener');\n\n // const linkNode = node.insert(function() {\n // return link;\n // }, ':first-child');\n\n // const shape = node.select('.label-container');\n // if (shape) {\n // linkNode.append(function() {\n // return shape.node();\n // });\n // }\n\n // const label = node.select('.label');\n // if (label) {\n // linkNode.append(function() {\n // return label.node();\n // });\n // }\n // }\n // }\n // });\n};\n\nexport default {\n setConf,\n draw\n};\nfunction getArrowMarker(type) {\n let marker;\n switch (type) {\n case 0:\n marker = 'aggregation';\n break;\n case 1:\n marker = 'extension';\n break;\n case 2:\n marker = 'composition';\n break;\n case 3:\n marker = 'dependency';\n break;\n default:\n marker = 'none';\n }\n return marker;\n}\n","import { logger } from '../../logger';\nimport { generateId } from '../../utils';\nimport mermaidAPI from '../../mermaidAPI';\nimport * as configApi from '../../config';\n\nconst clone = o => JSON.parse(JSON.stringify(o));\n\nlet rootDoc = [];\n\nexport const parseDirective = function(statement, context, type) {\n mermaidAPI.parseDirective(this, statement, context, type);\n};\n\nconst setRootDoc = o => {\n logger.info('Setting root doc', o);\n // rootDoc = { id: 'root', doc: o };\n rootDoc = o;\n};\n\nconst getRootDoc = () => rootDoc;\n\nconst docTranslator = (parent, node, first) => {\n if (node.stmt === 'relation') {\n docTranslator(parent, node.state1, true);\n docTranslator(parent, node.state2, false);\n } else {\n if (node.stmt === 'state') {\n if (node.id === '[*]') {\n node.id = first ? parent.id + '_start' : parent.id + '_end';\n node.start = first;\n }\n }\n\n if (node.doc) {\n const doc = [];\n // Check for concurrency\n let i = 0;\n let currentDoc = [];\n for (i = 0; i < node.doc.length; i++) {\n if (node.doc[i].type === 'divider') {\n // debugger;\n const newNode = clone(node.doc[i]);\n newNode.doc = clone(currentDoc);\n doc.push(newNode);\n currentDoc = [];\n } else {\n currentDoc.push(node.doc[i]);\n }\n }\n\n // If any divider was encountered\n if (doc.length > 0 && currentDoc.length > 0) {\n const newNode = {\n stmt: 'state',\n id: generateId(),\n type: 'divider',\n doc: clone(currentDoc)\n };\n doc.push(clone(newNode));\n node.doc = doc;\n }\n\n node.doc.forEach(docNode => docTranslator(node, docNode, true));\n }\n }\n};\nconst getRootDocV2 = () => {\n docTranslator({ id: 'root' }, { id: 'root', doc: rootDoc }, true);\n return { id: 'root', doc: rootDoc };\n};\n\nconst extract = _doc => {\n // const res = { states: [], relations: [] };\n let doc;\n if (_doc.doc) {\n doc = _doc.doc;\n } else {\n doc = _doc;\n }\n // let doc = root.doc;\n // if (!doc) {\n // doc = root;\n // }\n logger.info(doc);\n clear();\n\n logger.info('Extract', doc);\n\n doc.forEach(item => {\n if (item.stmt === 'state') {\n addState(item.id, item.type, item.doc, item.description, item.note);\n }\n if (item.stmt === 'relation') {\n addRelation(item.state1.id, item.state2.id, item.description);\n }\n });\n};\n\nconst newDoc = () => {\n return {\n relations: [],\n states: {},\n documents: {}\n };\n};\n\nlet documents = {\n root: newDoc()\n};\n\nlet currentDocument = documents.root;\n\nlet startCnt = 0;\nlet endCnt = 0; // eslint-disable-line\n// let stateCnt = 0;\n\n/**\n * Function called by parser when a node definition has been found.\n * @param id\n * @param text\n * @param type\n * @param style\n */\nexport const addState = function(id, type, doc, descr, note) {\n if (typeof currentDocument.states[id] === 'undefined') {\n currentDocument.states[id] = {\n id: id,\n descriptions: [],\n type,\n doc,\n note\n };\n } else {\n if (!currentDocument.states[id].doc) {\n currentDocument.states[id].doc = doc;\n }\n if (!currentDocument.states[id].type) {\n currentDocument.states[id].type = type;\n }\n }\n if (descr) {\n logger.info('Adding state ', id, descr);\n if (typeof descr === 'string') addDescription(id, descr.trim());\n\n if (typeof descr === 'object') {\n descr.forEach(des => addDescription(id, des.trim()));\n }\n }\n\n if (note) currentDocument.states[id].note = note;\n};\n\nexport const clear = function() {\n documents = {\n root: newDoc()\n };\n currentDocument = documents.root;\n\n currentDocument = documents.root;\n\n startCnt = 0;\n endCnt = 0; // eslint-disable-line\n classes = [];\n};\n\nexport const getState = function(id) {\n return currentDocument.states[id];\n};\n\nexport const getStates = function() {\n return currentDocument.states;\n};\nexport const logDocuments = function() {\n logger.info('Documents = ', documents);\n};\nexport const getRelations = function() {\n return currentDocument.relations;\n};\n\nexport const addRelation = function(_id1, _id2, title) {\n let id1 = _id1;\n let id2 = _id2;\n let type1 = 'default';\n let type2 = 'default';\n if (_id1 === '[*]') {\n startCnt++;\n id1 = 'start' + startCnt;\n type1 = 'start';\n }\n if (_id2 === '[*]') {\n endCnt++;\n id2 = 'end' + startCnt;\n type2 = 'end';\n }\n addState(id1, type1);\n addState(id2, type2);\n currentDocument.relations.push({ id1, id2, title });\n};\n\nconst addDescription = function(id, _descr) {\n const theState = currentDocument.states[id];\n let descr = _descr;\n if (descr[0] === ':') {\n descr = descr.substr(1).trim();\n }\n\n theState.descriptions.push(descr);\n};\n\nexport const cleanupLabel = function(label) {\n if (label.substring(0, 1) === ':') {\n return label.substr(2).trim();\n } else {\n return label.trim();\n }\n};\n\nexport const lineType = {\n LINE: 0,\n DOTTED_LINE: 1\n};\n\nlet dividerCnt = 0;\nconst getDividerId = () => {\n dividerCnt++;\n return 'divider-id-' + dividerCnt;\n};\n\nlet classes = [];\n\nconst getClasses = () => classes;\n\nconst getDirection = () => 'TB';\n\nexport const relationType = {\n AGGREGATION: 0,\n EXTENSION: 1,\n COMPOSITION: 2,\n DEPENDENCY: 3\n};\n\nconst trimColon = str => (str && str[0] === ':' ? str.substr(1).trim() : str.trim());\n\nexport default {\n parseDirective,\n getConfig: () => configApi.getConfig().state,\n addState,\n clear,\n getState,\n getStates,\n getRelations,\n getClasses,\n getDirection,\n addRelation,\n getDividerId,\n // addDescription,\n cleanupLabel,\n lineType,\n relationType,\n logDocuments,\n getRootDoc,\n setRootDoc,\n getRootDocV2,\n extract,\n trimColon\n};\n","import { select } from 'd3';\nimport dagre from 'dagre';\nimport graphlib from 'graphlib';\nimport { logger } from '../../logger';\nimport stateDb from './stateDb';\nimport common from '../common/common';\nimport { parser } from './parser/stateDiagram';\n// import idCache from './id-cache';\nimport { drawState, addTitleAndBox, drawEdge } from './shapes';\nimport { getConfig } from '../../config';\nimport { configureSvgSize } from '../../utils';\n\nparser.yy = stateDb;\n\n// TODO Move conf object to main conf in mermaidAPI\nlet conf;\n\nconst transformationLog = {};\n\nexport const setConf = function() {};\n\n// Todo optimize\n\n/**\n * Setup arrow head and define the marker. The result is appended to the svg.\n */\nconst insertMarkers = function(elem) {\n elem\n .append('defs')\n .append('marker')\n .attr('id', 'dependencyEnd')\n .attr('refX', 19)\n .attr('refY', 7)\n .attr('markerWidth', 20)\n .attr('markerHeight', 28)\n .attr('orient', 'auto')\n .append('path')\n .attr('d', 'M 19,7 L9,13 L14,7 L9,1 Z');\n};\n\n/**\n * Draws a flowchart in the tag with id: id based on the graph definition in text.\n * @param text\n * @param id\n */\nexport const draw = function(text, id) {\n conf = getConfig().state;\n parser.yy.clear();\n parser.parse(text);\n logger.debug('Rendering diagram ' + text);\n\n // Fetch the default direction, use TD if none was found\n const diagram = select(`[id='${id}']`);\n insertMarkers(diagram);\n\n // Layout graph, Create a new directed graph\n const graph = new graphlib.Graph({\n multigraph: true,\n compound: true,\n // acyclicer: 'greedy',\n rankdir: 'RL'\n // ranksep: '20'\n });\n\n // Default to assigning a new object as a label for each new edge.\n graph.setDefaultEdgeLabel(function() {\n return {};\n });\n\n const rootDoc = stateDb.getRootDoc();\n renderDoc(rootDoc, diagram, undefined, false);\n\n const padding = conf.padding;\n const bounds = diagram.node().getBBox();\n\n const width = bounds.width + padding * 2;\n const height = bounds.height + padding * 2;\n\n // zoom in a bit\n const svgWidth = width * 1.75;\n configureSvgSize(diagram, height, svgWidth, conf.useMaxWidth);\n\n diagram.attr(\n 'viewBox',\n `${bounds.x - conf.padding} ${bounds.y - conf.padding} ` + width + ' ' + height\n );\n};\nconst getLabelWidth = text => {\n return text ? text.length * conf.fontSizeFactor : 1;\n};\n\nconst renderDoc = (doc, diagram, parentId, altBkg) => {\n // // Layout graph, Create a new directed graph\n const graph = new graphlib.Graph({\n compound: true,\n multigraph: true\n });\n\n let i;\n let edgeFreeDoc = true;\n for (i = 0; i < doc.length; i++) {\n if (doc[i].stmt === 'relation') {\n edgeFreeDoc = false;\n break;\n }\n }\n\n // Set an object for the graph label\n if (parentId)\n graph.setGraph({\n rankdir: 'LR',\n multigraph: true,\n compound: true,\n // acyclicer: 'greedy',\n ranker: 'tight-tree',\n ranksep: edgeFreeDoc ? 1 : conf.edgeLengthFactor,\n nodeSep: edgeFreeDoc ? 1 : 50,\n isMultiGraph: true\n // ranksep: 5,\n // nodesep: 1\n });\n else {\n graph.setGraph({\n rankdir: 'TB',\n multigraph: true,\n compound: true,\n // isCompound: true,\n // acyclicer: 'greedy',\n // ranker: 'longest-path'\n ranksep: edgeFreeDoc ? 1 : conf.edgeLengthFactor,\n nodeSep: edgeFreeDoc ? 1 : 50,\n ranker: 'tight-tree',\n // ranker: 'network-simplex'\n isMultiGraph: true\n });\n }\n\n // Default to assigning a new object as a label for each new edge.\n graph.setDefaultEdgeLabel(function() {\n return {};\n });\n\n stateDb.extract(doc);\n const states = stateDb.getStates();\n const relations = stateDb.getRelations();\n\n const keys = Object.keys(states);\n\n let first = true;\n\n for (let i = 0; i < keys.length; i++) {\n const stateDef = states[keys[i]];\n\n if (parentId) {\n stateDef.parentId = parentId;\n }\n\n let node;\n if (stateDef.doc) {\n let sub = diagram\n .append('g')\n .attr('id', stateDef.id)\n .attr('class', 'stateGroup');\n node = renderDoc(stateDef.doc, sub, stateDef.id, !altBkg);\n\n if (first) {\n // first = false;\n sub = addTitleAndBox(sub, stateDef, altBkg);\n let boxBounds = sub.node().getBBox();\n node.width = boxBounds.width;\n node.height = boxBounds.height + conf.padding / 2;\n transformationLog[stateDef.id] = { y: conf.compositTitleSize };\n } else {\n // sub = addIdAndBox(sub, stateDef);\n let boxBounds = sub.node().getBBox();\n node.width = boxBounds.width;\n node.height = boxBounds.height;\n // transformationLog[stateDef.id] = { y: conf.compositTitleSize };\n }\n } else {\n node = drawState(diagram, stateDef, graph);\n }\n\n if (stateDef.note) {\n // Draw note note\n const noteDef = {\n descriptions: [],\n id: stateDef.id + '-note',\n note: stateDef.note,\n type: 'note'\n };\n const note = drawState(diagram, noteDef, graph);\n\n // graph.setNode(node.id, node);\n if (stateDef.note.position === 'left of') {\n graph.setNode(node.id + '-note', note);\n graph.setNode(node.id, node);\n } else {\n graph.setNode(node.id, node);\n graph.setNode(node.id + '-note', note);\n }\n // graph.setNode(node.id);\n graph.setParent(node.id, node.id + '-group');\n graph.setParent(node.id + '-note', node.id + '-group');\n } else {\n // Add nodes to the graph. The first argument is the node id. The second is\n // metadata about the node. In this case we're going to add labels to each of\n // our nodes.\n graph.setNode(node.id, node);\n }\n }\n\n logger.debug('Count=', graph.nodeCount(), graph);\n let cnt = 0;\n relations.forEach(function(relation) {\n cnt++;\n logger.debug('Setting edge', relation);\n graph.setEdge(\n relation.id1,\n relation.id2,\n {\n relation: relation,\n width: getLabelWidth(relation.title),\n height: conf.labelHeight * common.getRows(relation.title).length,\n labelpos: 'c'\n },\n 'id' + cnt\n );\n });\n\n dagre.layout(graph);\n\n logger.debug('Graph after layout', graph.nodes());\n const svgElem = diagram.node();\n\n graph.nodes().forEach(function(v) {\n if (typeof v !== 'undefined' && typeof graph.node(v) !== 'undefined') {\n logger.warn('Node ' + v + ': ' + JSON.stringify(graph.node(v)));\n select('#' + svgElem.id + ' #' + v).attr(\n 'transform',\n 'translate(' +\n (graph.node(v).x - graph.node(v).width / 2) +\n ',' +\n (graph.node(v).y +\n (transformationLog[v] ? transformationLog[v].y : 0) -\n graph.node(v).height / 2) +\n ' )'\n );\n select('#' + svgElem.id + ' #' + v).attr(\n 'data-x-shift',\n graph.node(v).x - graph.node(v).width / 2\n );\n const dividers = document.querySelectorAll('#' + svgElem.id + ' #' + v + ' .divider');\n dividers.forEach(divider => {\n const parent = divider.parentElement;\n let pWidth = 0;\n let pShift = 0;\n if (parent) {\n if (parent.parentElement) pWidth = parent.parentElement.getBBox().width;\n pShift = parseInt(parent.getAttribute('data-x-shift'), 10);\n if (Number.isNaN(pShift)) {\n pShift = 0;\n }\n }\n divider.setAttribute('x1', 0 - pShift + 8);\n divider.setAttribute('x2', pWidth - pShift - 8);\n });\n } else {\n logger.debug('No Node ' + v + ': ' + JSON.stringify(graph.node(v)));\n }\n });\n\n let stateBox = svgElem.getBBox();\n\n graph.edges().forEach(function(e) {\n if (typeof e !== 'undefined' && typeof graph.edge(e) !== 'undefined') {\n logger.debug('Edge ' + e.v + ' -> ' + e.w + ': ' + JSON.stringify(graph.edge(e)));\n drawEdge(diagram, graph.edge(e), graph.edge(e).relation);\n }\n });\n\n stateBox = svgElem.getBBox();\n\n const stateInfo = {\n id: parentId ? parentId : 'root',\n label: parentId ? parentId : 'root',\n width: 0,\n height: 0\n };\n\n stateInfo.width = stateBox.width + 2 * conf.padding;\n stateInfo.height = stateBox.height + 2 * conf.padding;\n\n logger.debug('Doc rendered', stateInfo, graph);\n return stateInfo;\n};\n\nexport default {\n setConf,\n draw\n};\n","const idCache = {};\n\nexport const set = (key, val) => {\n idCache[key] = val;\n};\n\nexport const get = k => idCache[k];\nexport const keys = () => Object.keys(idCache);\nexport const size = () => keys().length;\n\nexport default {\n get,\n set,\n keys,\n size\n};\n","import { line, curveBasis } from 'd3';\nimport idCache from './id-cache.js';\nimport stateDb from './stateDb';\nimport utils from '../../utils';\nimport common from '../common/common';\nimport { getConfig } from '../../config';\nimport { logger } from '../../logger';\n\n// let conf;\n\n/**\n * Draws a start state as a black circle\n */\nexport const drawStartState = g =>\n g\n .append('circle')\n // .style('stroke', 'black')\n // .style('fill', 'black')\n .attr('class', 'start-state')\n .attr('r', getConfig().state.sizeUnit)\n .attr('cx', getConfig().state.padding + getConfig().state.sizeUnit)\n .attr('cy', getConfig().state.padding + getConfig().state.sizeUnit);\n\n/**\n * Draws a start state as a black circle\n */\nexport const drawDivider = g =>\n g\n .append('line')\n .style('stroke', 'grey')\n .style('stroke-dasharray', '3')\n .attr('x1', getConfig().state.textHeight)\n .attr('class', 'divider')\n .attr('x2', getConfig().state.textHeight * 2)\n .attr('y1', 0)\n .attr('y2', 0);\n\n/**\n * Draws a an end state as a black circle\n */\nexport const drawSimpleState = (g, stateDef) => {\n const state = g\n .append('text')\n .attr('x', 2 * getConfig().state.padding)\n .attr('y', getConfig().state.textHeight + 2 * getConfig().state.padding)\n .attr('font-size', getConfig().state.fontSize)\n .attr('class', 'state-title')\n .text(stateDef.id);\n\n const classBox = state.node().getBBox();\n g.insert('rect', ':first-child')\n .attr('x', getConfig().state.padding)\n .attr('y', getConfig().state.padding)\n .attr('width', classBox.width + 2 * getConfig().state.padding)\n .attr('height', classBox.height + 2 * getConfig().state.padding)\n .attr('rx', getConfig().state.radius);\n\n return state;\n};\n\n/**\n * Draws a state with descriptions\n * @param {*} g\n * @param {*} stateDef\n */\nexport const drawDescrState = (g, stateDef) => {\n const addTspan = function(textEl, txt, isFirst) {\n const tSpan = textEl\n .append('tspan')\n .attr('x', 2 * getConfig().state.padding)\n .text(txt);\n if (!isFirst) {\n tSpan.attr('dy', getConfig().state.textHeight);\n }\n };\n const title = g\n .append('text')\n .attr('x', 2 * getConfig().state.padding)\n .attr('y', getConfig().state.textHeight + 1.3 * getConfig().state.padding)\n .attr('font-size', getConfig().state.fontSize)\n .attr('class', 'state-title')\n .text(stateDef.descriptions[0]);\n\n const titleBox = title.node().getBBox();\n const titleHeight = titleBox.height;\n\n const description = g\n .append('text') // text label for the x axis\n .attr('x', getConfig().state.padding)\n .attr(\n 'y',\n titleHeight +\n getConfig().state.padding * 0.4 +\n getConfig().state.dividerMargin +\n getConfig().state.textHeight\n )\n .attr('class', 'state-description');\n\n let isFirst = true;\n let isSecond = true;\n stateDef.descriptions.forEach(function(descr) {\n if (!isFirst) {\n addTspan(description, descr, isSecond);\n isSecond = false;\n }\n isFirst = false;\n });\n\n const descrLine = g\n .append('line') // text label for the x axis\n .attr('x1', getConfig().state.padding)\n .attr('y1', getConfig().state.padding + titleHeight + getConfig().state.dividerMargin / 2)\n .attr('y2', getConfig().state.padding + titleHeight + getConfig().state.dividerMargin / 2)\n .attr('class', 'descr-divider');\n const descrBox = description.node().getBBox();\n const width = Math.max(descrBox.width, titleBox.width);\n\n descrLine.attr('x2', width + 3 * getConfig().state.padding);\n // const classBox = title.node().getBBox();\n\n g.insert('rect', ':first-child')\n .attr('x', getConfig().state.padding)\n .attr('y', getConfig().state.padding)\n .attr('width', width + 2 * getConfig().state.padding)\n .attr('height', descrBox.height + titleHeight + 2 * getConfig().state.padding)\n .attr('rx', getConfig().state.radius);\n\n return g;\n};\n\n/**\n * Adds the creates a box around the existing content and adds a\n * panel for the id on top of the content.\n */\n/**\n * Function that creates an title row and a frame around a substate for a composit state diagram.\n * The function returns a new d3 svg object with updated width and height properties;\n * @param {*} g The d3 svg object for the substate to framed\n * @param {*} stateDef The info about the\n */\nexport const addTitleAndBox = (g, stateDef, altBkg) => {\n const pad = getConfig().state.padding;\n const dblPad = 2 * getConfig().state.padding;\n const orgBox = g.node().getBBox();\n const orgWidth = orgBox.width;\n const orgX = orgBox.x;\n\n const title = g\n .append('text')\n .attr('x', 0)\n .attr('y', getConfig().state.titleShift)\n .attr('font-size', getConfig().state.fontSize)\n .attr('class', 'state-title')\n .text(stateDef.id);\n\n const titleBox = title.node().getBBox();\n const titleWidth = titleBox.width + dblPad;\n let width = Math.max(titleWidth, orgWidth); // + dblPad;\n if (width === orgWidth) {\n width = width + dblPad;\n }\n let startX;\n // const lineY = 1 - getConfig().state.textHeight;\n // const descrLine = g\n // .append('line') // text label for the x axis\n // .attr('x1', 0)\n // .attr('y1', lineY)\n // .attr('y2', lineY)\n // .attr('class', 'descr-divider');\n\n const graphBox = g.node().getBBox();\n // descrLine.attr('x2', graphBox.width + getConfig().state.padding);\n\n if (stateDef.doc) {\n // cnsole.warn(\n // stateDef.id,\n // 'orgX: ',\n // orgX,\n // 'width: ',\n // width,\n // 'titleWidth: ',\n // titleWidth,\n // 'orgWidth: ',\n // orgWidth,\n // 'width',\n // width\n // );\n }\n\n startX = orgX - pad;\n if (titleWidth > orgWidth) {\n startX = (orgWidth - width) / 2 + pad;\n }\n if (Math.abs(orgX - graphBox.x) < pad) {\n if (titleWidth > orgWidth) {\n startX = orgX - (titleWidth - orgWidth) / 2;\n }\n }\n\n const lineY = 1 - getConfig().state.textHeight;\n // White color\n g.insert('rect', ':first-child')\n .attr('x', startX)\n .attr('y', lineY)\n .attr('class', altBkg ? 'alt-composit' : 'composit')\n .attr('width', width)\n .attr(\n 'height',\n graphBox.height + getConfig().state.textHeight + getConfig().state.titleShift + 1\n )\n .attr('rx', '0');\n\n title.attr('x', startX + pad);\n if (titleWidth <= orgWidth) title.attr('x', orgX + (width - dblPad) / 2 - titleWidth / 2 + pad);\n\n // Title background\n g.insert('rect', ':first-child')\n .attr('x', startX)\n .attr(\n 'y',\n getConfig().state.titleShift - getConfig().state.textHeight - getConfig().state.padding\n )\n .attr('width', width)\n // Just needs to be higher then the descr line, will be clipped by the white color box\n .attr('height', getConfig().state.textHeight * 3)\n .attr('rx', getConfig().state.radius);\n\n // Full background\n g.insert('rect', ':first-child')\n .attr('x', startX)\n .attr(\n 'y',\n getConfig().state.titleShift - getConfig().state.textHeight - getConfig().state.padding\n )\n .attr('width', width)\n .attr('height', graphBox.height + 3 + 2 * getConfig().state.textHeight)\n .attr('rx', getConfig().state.radius);\n\n return g;\n};\n\nconst drawEndState = g => {\n g.append('circle')\n // .style('stroke', 'black')\n // .style('fill', 'white')\n .attr('class', 'end-state-outer')\n .attr('r', getConfig().state.sizeUnit + getConfig().state.miniPadding)\n .attr(\n 'cx',\n getConfig().state.padding + getConfig().state.sizeUnit + getConfig().state.miniPadding\n )\n .attr(\n 'cy',\n getConfig().state.padding + getConfig().state.sizeUnit + getConfig().state.miniPadding\n );\n\n return (\n g\n .append('circle')\n // .style('stroke', 'black')\n // .style('fill', 'black')\n .attr('class', 'end-state-inner')\n .attr('r', getConfig().state.sizeUnit)\n .attr('cx', getConfig().state.padding + getConfig().state.sizeUnit + 2)\n .attr('cy', getConfig().state.padding + getConfig().state.sizeUnit + 2)\n );\n};\nconst drawForkJoinState = (g, stateDef) => {\n let width = getConfig().state.forkWidth;\n let height = getConfig().state.forkHeight;\n\n if (stateDef.parentId) {\n let tmp = width;\n width = height;\n height = tmp;\n }\n return g\n .append('rect')\n .style('stroke', 'black')\n .style('fill', 'black')\n .attr('width', width)\n .attr('height', height)\n .attr('x', getConfig().state.padding)\n .attr('y', getConfig().state.padding);\n};\n\nexport const drawText = function(elem, textData) {\n // Remove and ignore br:s\n const nText = textData.text.replace(common.lineBreakRegex, ' ');\n\n const textElem = elem.append('text');\n textElem.attr('x', textData.x);\n textElem.attr('y', textData.y);\n textElem.style('text-anchor', textData.anchor);\n textElem.attr('fill', textData.fill);\n if (typeof textData.class !== 'undefined') {\n textElem.attr('class', textData.class);\n }\n\n const span = textElem.append('tspan');\n span.attr('x', textData.x + textData.textMargin * 2);\n span.attr('fill', textData.fill);\n span.text(nText);\n\n return textElem;\n};\n\nconst _drawLongText = (_text, x, y, g) => {\n let textHeight = 0;\n\n const textElem = g.append('text');\n textElem.style('text-anchor', 'start');\n textElem.attr('class', 'noteText');\n\n let text = _text.replace(/\\r\\n/g, '
');\n text = text.replace(/\\n/g, '
');\n const lines = text.split(common.lineBreakRegex);\n\n let tHeight = 1.25 * getConfig().state.noteMargin;\n for (const line of lines) {\n const txt = line.trim();\n\n if (txt.length > 0) {\n const span = textElem.append('tspan');\n span.text(txt);\n if (tHeight === 0) {\n const textBounds = span.node().getBBox();\n tHeight += textBounds.height;\n }\n textHeight += tHeight;\n span.attr('x', x + getConfig().state.noteMargin);\n span.attr('y', y + textHeight + 1.25 * getConfig().state.noteMargin);\n }\n }\n return { textWidth: textElem.node().getBBox().width, textHeight };\n};\n\n/**\n * Draws a note to the diagram\n * @param text - The text of the given note.\n * @param g - The element the note is attached to.\n */\n\nexport const drawNote = (text, g) => {\n g.attr('class', 'state-note');\n const note = g\n .append('rect')\n .attr('x', 0)\n .attr('y', getConfig().state.padding);\n const rectElem = g.append('g');\n\n const { textWidth, textHeight } = _drawLongText(text, 0, 0, rectElem);\n note.attr('height', textHeight + 2 * getConfig().state.noteMargin);\n note.attr('width', textWidth + getConfig().state.noteMargin * 2);\n\n return note;\n};\n\n/**\n * Starting point for drawing a state. The function finds out the specifics\n * about the state and renders with approprtiate function.\n * @param {*} elem\n * @param {*} stateDef\n */\n\nexport const drawState = function(elem, stateDef) {\n const id = stateDef.id;\n const stateInfo = {\n id: id,\n label: stateDef.id,\n width: 0,\n height: 0\n };\n\n const g = elem\n .append('g')\n .attr('id', id)\n .attr('class', 'stateGroup');\n\n if (stateDef.type === 'start') drawStartState(g);\n if (stateDef.type === 'end') drawEndState(g);\n if (stateDef.type === 'fork' || stateDef.type === 'join') drawForkJoinState(g, stateDef);\n if (stateDef.type === 'note') drawNote(stateDef.note.text, g);\n if (stateDef.type === 'divider') drawDivider(g);\n if (stateDef.type === 'default' && stateDef.descriptions.length === 0)\n drawSimpleState(g, stateDef);\n if (stateDef.type === 'default' && stateDef.descriptions.length > 0) drawDescrState(g, stateDef);\n\n const stateBox = g.node().getBBox();\n stateInfo.width = stateBox.width + 2 * getConfig().state.padding;\n stateInfo.height = stateBox.height + 2 * getConfig().state.padding;\n\n idCache.set(id, stateInfo);\n // stateCnt++;\n return stateInfo;\n};\n\nlet edgeCount = 0;\nexport const drawEdge = function(elem, path, relation) {\n const getRelationType = function(type) {\n switch (type) {\n case stateDb.relationType.AGGREGATION:\n return 'aggregation';\n case stateDb.relationType.EXTENSION:\n return 'extension';\n case stateDb.relationType.COMPOSITION:\n return 'composition';\n case stateDb.relationType.DEPENDENCY:\n return 'dependency';\n }\n };\n\n path.points = path.points.filter(p => !Number.isNaN(p.y));\n\n // The data for our line\n const lineData = path.points;\n\n // This is the accessor function we talked about above\n const lineFunction = line()\n .x(function(d) {\n return d.x;\n })\n .y(function(d) {\n return d.y;\n })\n .curve(curveBasis);\n\n const svgPath = elem\n .append('path')\n .attr('d', lineFunction(lineData))\n .attr('id', 'edge' + edgeCount)\n .attr('class', 'transition');\n let url = '';\n if (getConfig().state.arrowMarkerAbsolute) {\n url =\n window.location.protocol +\n '//' +\n window.location.host +\n window.location.pathname +\n window.location.search;\n url = url.replace(/\\(/g, '\\\\(');\n url = url.replace(/\\)/g, '\\\\)');\n }\n\n svgPath.attr(\n 'marker-end',\n 'url(' + url + '#' + getRelationType(stateDb.relationType.DEPENDENCY) + 'End' + ')'\n );\n\n if (typeof relation.title !== 'undefined') {\n const label = elem.append('g').attr('class', 'stateLabel');\n\n const { x, y } = utils.calcLabelPosition(path.points);\n\n const rows = common.getRows(relation.title);\n\n let titleHeight = 0;\n const titleRows = [];\n let maxWidth = 0;\n let minX = 0;\n\n for (let i = 0; i <= rows.length; i++) {\n const title = label\n .append('text')\n .attr('text-anchor', 'middle')\n .text(rows[i])\n .attr('x', x)\n .attr('y', y + titleHeight);\n\n const boundstmp = title.node().getBBox();\n maxWidth = Math.max(maxWidth, boundstmp.width);\n minX = Math.min(minX, boundstmp.x);\n\n logger.info(boundstmp.x, x, y + titleHeight);\n\n if (titleHeight === 0) {\n const titleBox = title.node().getBBox();\n titleHeight = titleBox.height;\n logger.info('Title height', titleHeight, y);\n }\n titleRows.push(title);\n }\n\n let boxHeight = titleHeight * rows.length;\n if (rows.length > 1) {\n const heightAdj = (rows.length - 1) * titleHeight * 0.5;\n\n titleRows.forEach((title, i) => title.attr('y', y + i * titleHeight - heightAdj));\n boxHeight = titleHeight * rows.length;\n }\n\n const bounds = label.node().getBBox();\n\n label\n .insert('rect', ':first-child')\n .attr('class', 'box')\n .attr('x', x - maxWidth / 2 - getConfig().state.padding / 2)\n .attr('y', y - boxHeight / 2 - getConfig().state.padding / 2 - 3.5)\n .attr('width', maxWidth + getConfig().state.padding)\n .attr('height', boxHeight + getConfig().state.padding);\n\n logger.info(bounds);\n\n //label.attr('transform', '0 -' + (bounds.y / 2));\n\n // Debug points\n // path.points.forEach(point => {\n // g.append('circle')\n // .style('stroke', 'red')\n // .style('fill', 'red')\n // .attr('r', 1)\n // .attr('cx', point.x)\n // .attr('cy', point.y);\n // });\n // g.append('circle')\n // .style('stroke', 'blue')\n // .style('fill', 'blue')\n // .attr('r', 1)\n // .attr('cx', x)\n // .attr('cy', y);\n }\n\n edgeCount++;\n};\n","import graphlib from 'graphlib';\nimport { select } from 'd3';\nimport stateDb from './stateDb';\nimport state from './parser/stateDiagram';\nimport { getConfig } from '../../config';\n\nimport { render } from '../../dagre-wrapper/index.js';\nimport { logger } from '../../logger';\nimport { configureSvgSize } from '../../utils';\n\nconst conf = {};\nexport const setConf = function(cnf) {\n const keys = Object.keys(cnf);\n for (let i = 0; i < keys.length; i++) {\n conf[keys[i]] = cnf[keys[i]];\n }\n};\n\nlet nodeDb = {};\n\n/**\n * Returns the all the styles from classDef statements in the graph definition.\n * @returns {object} classDef styles\n */\nexport const getClasses = function(text) {\n logger.trace('Extracting classes');\n stateDb.clear();\n const parser = state.parser;\n parser.yy = stateDb;\n\n // Parse the graph definition\n parser.parse(text);\n return stateDb.getClasses();\n};\n\nconst setupNode = (g, parent, node, altFlag) => {\n // Add the node\n if (node.id !== 'root') {\n let shape = 'rect';\n if (node.start === true) {\n shape = 'start';\n }\n if (node.start === false) {\n shape = 'end';\n }\n if (node.type !== 'default') {\n shape = node.type;\n }\n\n if (!nodeDb[node.id]) {\n nodeDb[node.id] = {\n id: node.id,\n shape,\n description: node.id,\n classes: 'statediagram-state'\n };\n }\n\n // Build of the array of description strings accordinging\n if (node.description) {\n if (Array.isArray(nodeDb[node.id].description)) {\n // There already is an array of strings,add to it\n nodeDb[node.id].shape = 'rectWithTitle';\n nodeDb[node.id].description.push(node.description);\n } else {\n if (nodeDb[node.id].description.length > 0) {\n // if there is a description already transformit to an array\n nodeDb[node.id].shape = 'rectWithTitle';\n if (nodeDb[node.id].description === node.id) {\n // If the previous description was the is, remove it\n nodeDb[node.id].description = [node.description];\n } else {\n nodeDb[node.id].description = [nodeDb[node.id].description, node.description];\n }\n } else {\n nodeDb[node.id].shape = 'rect';\n nodeDb[node.id].description = node.description;\n }\n }\n }\n\n // Save data for description and group so that for instance a statement without description overwrites\n // one with description\n\n // group\n if (!nodeDb[node.id].type && node.doc) {\n logger.info('Setting cluser for ', node.id);\n nodeDb[node.id].type = 'group';\n nodeDb[node.id].shape = node.type === 'divider' ? 'divider' : 'roundedWithTitle';\n nodeDb[node.id].classes =\n nodeDb[node.id].classes +\n ' ' +\n (altFlag ? 'statediagram-cluster statediagram-cluster-alt' : 'statediagram-cluster');\n }\n\n const nodeData = {\n labelStyle: '',\n shape: nodeDb[node.id].shape,\n labelText: nodeDb[node.id].description,\n classes: nodeDb[node.id].classes, //classStr,\n style: '', //styles.style,\n id: node.id,\n domId: 'state-' + node.id + '-' + cnt,\n type: nodeDb[node.id].type,\n padding: 15 //getConfig().flowchart.padding\n };\n\n if (node.note) {\n // Todo: set random id\n const noteData = {\n labelStyle: '',\n shape: 'note',\n labelText: node.note.text,\n classes: 'statediagram-note', //classStr,\n style: '', //styles.style,\n id: node.id + '----note',\n domId: 'state-' + node.id + '----note-' + cnt,\n type: nodeDb[node.id].type,\n padding: 15 //getConfig().flowchart.padding\n };\n const groupData = {\n labelStyle: '',\n shape: 'noteGroup',\n labelText: node.note.text,\n classes: nodeDb[node.id].classes, //classStr,\n style: '', //styles.style,\n id: node.id + '----parent',\n domId: 'state-' + node.id + '----parent-' + cnt,\n type: 'group',\n padding: 0 //getConfig().flowchart.padding\n };\n cnt++;\n\n g.setNode(node.id + '----parent', groupData);\n\n g.setNode(noteData.id, noteData);\n g.setNode(node.id, nodeData);\n\n g.setParent(node.id, node.id + '----parent');\n g.setParent(noteData.id, node.id + '----parent');\n\n let from = node.id;\n let to = noteData.id;\n\n if (node.note.position === 'left of') {\n from = noteData.id;\n to = node.id;\n }\n g.setEdge(from, to, {\n arrowhead: 'none',\n arrowType: '',\n style: 'fill:none',\n labelStyle: '',\n classes: 'transition note-edge',\n arrowheadStyle: 'fill: #333',\n labelpos: 'c',\n labelType: 'text',\n thickness: 'normal'\n });\n } else {\n g.setNode(node.id, nodeData);\n }\n }\n\n if (parent) {\n if (parent.id !== 'root') {\n logger.info('Setting node ', node.id, ' to be child of its parent ', parent.id);\n g.setParent(node.id, parent.id);\n }\n }\n if (node.doc) {\n logger.info('Adding nodes children ');\n setupDoc(g, node, node.doc, !altFlag);\n }\n};\nlet cnt = 0;\nconst setupDoc = (g, parent, doc, altFlag) => {\n cnt = 0;\n logger.trace('items', doc);\n doc.forEach(item => {\n if (item.stmt === 'state' || item.stmt === 'default') {\n setupNode(g, parent, item, altFlag);\n } else if (item.stmt === 'relation') {\n setupNode(g, parent, item.state1, altFlag);\n setupNode(g, parent, item.state2, altFlag);\n const edgeData = {\n id: 'edge' + cnt,\n arrowhead: 'normal',\n arrowTypeEnd: 'arrow_barb',\n style: 'fill:none',\n labelStyle: '',\n label: item.description,\n arrowheadStyle: 'fill: #333',\n labelpos: 'c',\n labelType: 'text',\n thickness: 'normal',\n classes: 'transition'\n };\n let startId = item.state1.id;\n let endId = item.state2.id;\n\n g.setEdge(startId, endId, edgeData, cnt);\n cnt++;\n }\n });\n};\n\n/**\n * Draws a flowchart in the tag with id: id based on the graph definition in text.\n * @param text\n * @param id\n */\nexport const draw = function(text, id) {\n logger.info('Drawing state diagram (v2)', id);\n stateDb.clear();\n nodeDb = {};\n const parser = state.parser;\n parser.yy = stateDb;\n\n // Parse the graph definition\n parser.parse(text);\n\n // Fetch the default direction, use TD if none was found\n let dir = stateDb.getDirection();\n if (typeof dir === 'undefined') {\n dir = 'LR';\n }\n\n const conf = getConfig().state;\n const nodeSpacing = conf.nodeSpacing || 50;\n const rankSpacing = conf.rankSpacing || 50;\n\n // Create the input mermaid.graph\n const g = new graphlib.Graph({\n multigraph: true,\n compound: true\n })\n .setGraph({\n rankdir: 'TB',\n nodesep: nodeSpacing,\n ranksep: rankSpacing,\n marginx: 8,\n marginy: 8\n })\n .setDefaultEdgeLabel(function() {\n return {};\n });\n\n logger.info(stateDb.getRootDocV2());\n stateDb.extract(stateDb.getRootDocV2());\n logger.info(stateDb.getRootDocV2());\n setupNode(g, undefined, stateDb.getRootDocV2(), true);\n\n // Set up an SVG group so that we can translate the final graph.\n const svg = select(`[id=\"${id}\"]`);\n\n // Run the renderer. This is what draws the final graph.\n const element = select('#' + id + ' g');\n render(element, g, ['barb'], 'statediagram', id);\n\n const padding = 8;\n\n const bounds = svg.node().getBBox();\n\n const width = bounds.width + padding * 2;\n const height = bounds.height + padding * 2;\n\n // Zoom in a bit\n svg.attr('class', 'statediagram');\n\n const svgBounds = svg.node().getBBox();\n\n configureSvgSize(svg, height, width * 1.75, conf.useMaxWidth);\n\n // Ensure the viewBox includes the whole svgBounds area with extra space for padding\n const vBox = `${svgBounds.x - padding} ${svgBounds.y - padding} ${width} ${height}`;\n logger.debug(`viewBox ${vBox}`);\n svg.attr('viewBox', vBox);\n\n // Add label rects for non html labels\n if (!conf.htmlLabels) {\n const labels = document.querySelectorAll('[id=\"' + id + '\"] .edgeLabel .label');\n for (let k = 0; k < labels.length; k++) {\n const label = labels[k];\n\n // Get dimensions of label\n const dim = label.getBBox();\n\n const rect = document.createElementNS('http://www.w3.org/2000/svg', 'rect');\n rect.setAttribute('rx', 0);\n rect.setAttribute('ry', 0);\n rect.setAttribute('width', dim.width);\n rect.setAttribute('height', dim.height);\n\n label.insertBefore(rect, label.firstChild);\n }\n }\n};\n\nexport default {\n setConf,\n getClasses,\n draw\n};\n","import { logger } from '../../logger';\nimport { random } from '../../utils';\nlet commits = {};\nlet head = null;\nlet branches = { master: head };\nlet curBranch = 'master';\nlet direction = 'LR';\nlet seq = 0;\n\nfunction getId() {\n return random({ length: 7 });\n}\n\nfunction isfastforwardable(currentCommit, otherCommit) {\n logger.debug('Entering isfastforwardable:', currentCommit.id, otherCommit.id);\n while (currentCommit.seq <= otherCommit.seq && currentCommit !== otherCommit) {\n // only if other branch has more commits\n if (otherCommit.parent == null) break;\n if (Array.isArray(otherCommit.parent)) {\n logger.debug('In merge commit:', otherCommit.parent);\n return (\n isfastforwardable(currentCommit, commits[otherCommit.parent[0]]) ||\n isfastforwardable(currentCommit, commits[otherCommit.parent[1]])\n );\n } else {\n otherCommit = commits[otherCommit.parent];\n }\n }\n logger.debug(currentCommit.id, otherCommit.id);\n return currentCommit.id === otherCommit.id;\n}\n\nfunction isReachableFrom(currentCommit, otherCommit) {\n const currentSeq = currentCommit.seq;\n const otherSeq = otherCommit.seq;\n if (currentSeq > otherSeq) return isfastforwardable(otherCommit, currentCommit);\n return false;\n}\n\nfunction uniqBy(list, fn) {\n const recordMap = Object.create(null);\n return list.reduce((out, item) => {\n const key = fn(item);\n if (!recordMap[key]) {\n recordMap[key] = true;\n out.push(item);\n }\n return out;\n }, []);\n}\n\nexport const setDirection = function(dir) {\n direction = dir;\n};\nlet options = {};\nexport const setOptions = function(rawOptString) {\n logger.debug('options str', rawOptString);\n rawOptString = rawOptString && rawOptString.trim();\n rawOptString = rawOptString || '{}';\n try {\n options = JSON.parse(rawOptString);\n } catch (e) {\n logger.error('error while parsing gitGraph options', e.message);\n }\n};\n\nexport const getOptions = function() {\n return options;\n};\n\nexport const commit = function(msg) {\n const commit = {\n id: getId(),\n message: msg,\n seq: seq++,\n parent: head == null ? null : head.id\n };\n head = commit;\n commits[commit.id] = commit;\n branches[curBranch] = commit.id;\n logger.debug('in pushCommit ' + commit.id);\n};\n\nexport const branch = function(name) {\n branches[name] = head != null ? head.id : null;\n logger.debug('in createBranch');\n};\n\nexport const merge = function(otherBranch) {\n const currentCommit = commits[branches[curBranch]];\n const otherCommit = commits[branches[otherBranch]];\n if (isReachableFrom(currentCommit, otherCommit)) {\n logger.debug('Already merged');\n return;\n }\n if (isfastforwardable(currentCommit, otherCommit)) {\n branches[curBranch] = branches[otherBranch];\n head = commits[branches[curBranch]];\n } else {\n // create merge commit\n const commit = {\n id: getId(),\n message: 'merged branch ' + otherBranch + ' into ' + curBranch,\n seq: seq++,\n parent: [head == null ? null : head.id, branches[otherBranch]]\n };\n head = commit;\n commits[commit.id] = commit;\n branches[curBranch] = commit.id;\n }\n logger.debug(branches);\n logger.debug('in mergeBranch');\n};\n\nexport const checkout = function(branch) {\n logger.debug('in checkout');\n curBranch = branch;\n const id = branches[curBranch];\n head = commits[id];\n};\n\nexport const reset = function(commitRef) {\n logger.debug('in reset', commitRef);\n const ref = commitRef.split(':')[0];\n let parentCount = parseInt(commitRef.split(':')[1]);\n let commit = ref === 'HEAD' ? head : commits[branches[ref]];\n logger.debug(commit, parentCount);\n while (parentCount > 0) {\n commit = commits[commit.parent];\n parentCount--;\n if (!commit) {\n const err = 'Critical error - unique parent commit not found during reset';\n logger.error(err);\n throw err;\n }\n }\n head = commit;\n branches[curBranch] = commit.id;\n};\n\nfunction upsert(arr, key, newval) {\n const index = arr.indexOf(key);\n if (index === -1) {\n arr.push(newval);\n } else {\n arr.splice(index, 1, newval);\n }\n}\n\nfunction prettyPrintCommitHistory(commitArr) {\n const commit = commitArr.reduce((out, commit) => {\n if (out.seq > commit.seq) return out;\n return commit;\n }, commitArr[0]);\n let line = '';\n commitArr.forEach(function(c) {\n if (c === commit) {\n line += '\\t*';\n } else {\n line += '\\t|';\n }\n });\n const label = [line, commit.id, commit.seq];\n for (let branch in branches) {\n if (branches[branch] === commit.id) label.push(branch);\n }\n logger.debug(label.join(' '));\n if (Array.isArray(commit.parent)) {\n const newCommit = commits[commit.parent[0]];\n upsert(commitArr, commit, newCommit);\n commitArr.push(commits[commit.parent[1]]);\n } else if (commit.parent == null) {\n return;\n } else {\n const nextCommit = commits[commit.parent];\n upsert(commitArr, commit, nextCommit);\n }\n commitArr = uniqBy(commitArr, c => c.id);\n prettyPrintCommitHistory(commitArr);\n}\n\nexport const prettyPrint = function() {\n logger.debug(commits);\n const node = getCommitsArray()[0];\n prettyPrintCommitHistory([node]);\n};\n\nexport const clear = function() {\n commits = {};\n head = null;\n branches = { master: head };\n curBranch = 'master';\n seq = 0;\n};\n\nexport const getBranchesAsObjArray = function() {\n const branchArr = [];\n for (let branch in branches) {\n branchArr.push({ name: branch, commit: commits[branches[branch]] });\n }\n return branchArr;\n};\n\nexport const getBranches = function() {\n return branches;\n};\nexport const getCommits = function() {\n return commits;\n};\nexport const getCommitsArray = function() {\n const commitArr = Object.keys(commits).map(function(key) {\n return commits[key];\n });\n commitArr.forEach(function(o) {\n logger.debug(o.id);\n });\n commitArr.sort((a, b) => b.seq - a.seq);\n return commitArr;\n};\nexport const getCurrentBranch = function() {\n return curBranch;\n};\nexport const getDirection = function() {\n return direction;\n};\nexport const getHead = function() {\n return head;\n};\n\nexport default {\n setDirection,\n setOptions,\n getOptions,\n commit,\n branch,\n merge,\n checkout,\n reset,\n prettyPrint,\n clear,\n getBranchesAsObjArray,\n getBranches,\n getCommits,\n getCommitsArray,\n getCurrentBranch,\n getDirection,\n getHead\n};\n","import { curveBasis, line, select } from 'd3';\n\nimport db from './gitGraphAst';\nimport gitGraphParser from './parser/gitGraph';\nimport { logger } from '../../logger';\nimport { interpolateToCurve } from '../../utils';\n\nlet allCommitsDict = {};\nlet branchNum;\nlet config = {\n nodeSpacing: 150,\n nodeFillColor: 'yellow',\n nodeStrokeWidth: 2,\n nodeStrokeColor: 'grey',\n lineStrokeWidth: 4,\n branchOffset: 50,\n lineColor: 'grey',\n leftMargin: 50,\n branchColors: ['#442f74', '#983351', '#609732', '#AA9A39'],\n nodeRadius: 10,\n nodeLabel: {\n width: 75,\n height: 100,\n x: -25,\n y: 0\n }\n};\nlet apiConfig = {};\nexport const setConf = function(c) {\n apiConfig = c;\n};\n\nfunction svgCreateDefs(svg) {\n svg\n .append('defs')\n .append('g')\n .attr('id', 'def-commit')\n .append('circle')\n .attr('r', config.nodeRadius)\n .attr('cx', 0)\n .attr('cy', 0);\n svg\n .select('#def-commit')\n .append('foreignObject')\n .attr('width', config.nodeLabel.width)\n .attr('height', config.nodeLabel.height)\n .attr('x', config.nodeLabel.x)\n .attr('y', config.nodeLabel.y)\n .attr('class', 'node-label')\n .attr('requiredFeatures', 'http://www.w3.org/TR/SVG11/feature#Extensibility')\n .append('p')\n .html('');\n}\n\nfunction svgDrawLine(svg, points, colorIdx, interpolate) {\n const curve = interpolateToCurve(interpolate, curveBasis);\n const color = config.branchColors[colorIdx % config.branchColors.length];\n const lineGen = line()\n .x(function(d) {\n return Math.round(d.x);\n })\n .y(function(d) {\n return Math.round(d.y);\n })\n .curve(curve);\n\n svg\n .append('svg:path')\n .attr('d', lineGen(points))\n .style('stroke', color)\n .style('stroke-width', config.lineStrokeWidth)\n .style('fill', 'none');\n}\n\n// Pass in the element and its pre-transform coords\nfunction getElementCoords(element, coords) {\n coords = coords || element.node().getBBox();\n const ctm = element.node().getCTM();\n const xn = ctm.e + coords.x * ctm.a;\n const yn = ctm.f + coords.y * ctm.d;\n return {\n left: xn,\n top: yn,\n width: coords.width,\n height: coords.height\n };\n}\n\nfunction svgDrawLineForCommits(svg, fromId, toId, direction, color) {\n logger.debug('svgDrawLineForCommits: ', fromId, toId);\n const fromBbox = getElementCoords(svg.select('#node-' + fromId + ' circle'));\n const toBbox = getElementCoords(svg.select('#node-' + toId + ' circle'));\n switch (direction) {\n case 'LR':\n // (toBbox)\n // +--------\n // + (fromBbox)\n if (fromBbox.left - toBbox.left > config.nodeSpacing) {\n const lineStart = {\n x: fromBbox.left - config.nodeSpacing,\n y: toBbox.top + toBbox.height / 2\n };\n const lineEnd = { x: toBbox.left + toBbox.width, y: toBbox.top + toBbox.height / 2 };\n svgDrawLine(svg, [lineStart, lineEnd], color, 'linear');\n svgDrawLine(\n svg,\n [\n { x: fromBbox.left, y: fromBbox.top + fromBbox.height / 2 },\n { x: fromBbox.left - config.nodeSpacing / 2, y: fromBbox.top + fromBbox.height / 2 },\n { x: fromBbox.left - config.nodeSpacing / 2, y: lineStart.y },\n lineStart\n ],\n color\n );\n } else {\n svgDrawLine(\n svg,\n [\n {\n x: fromBbox.left,\n y: fromBbox.top + fromBbox.height / 2\n },\n {\n x: fromBbox.left - config.nodeSpacing / 2,\n y: fromBbox.top + fromBbox.height / 2\n },\n {\n x: fromBbox.left - config.nodeSpacing / 2,\n y: toBbox.top + toBbox.height / 2\n },\n {\n x: toBbox.left + toBbox.width,\n y: toBbox.top + toBbox.height / 2\n }\n ],\n color\n );\n }\n break;\n case 'BT':\n // + (fromBbox)\n // |\n // |\n // + (toBbox)\n if (toBbox.top - fromBbox.top > config.nodeSpacing) {\n const lineStart = {\n x: toBbox.left + toBbox.width / 2,\n y: fromBbox.top + fromBbox.height + config.nodeSpacing\n };\n const lineEnd = { x: toBbox.left + toBbox.width / 2, y: toBbox.top };\n svgDrawLine(svg, [lineStart, lineEnd], color, 'linear');\n svgDrawLine(\n svg,\n [\n { x: fromBbox.left + fromBbox.width / 2, y: fromBbox.top + fromBbox.height },\n {\n x: fromBbox.left + fromBbox.width / 2,\n y: fromBbox.top + fromBbox.height + config.nodeSpacing / 2\n },\n { x: toBbox.left + toBbox.width / 2, y: lineStart.y - config.nodeSpacing / 2 },\n lineStart\n ],\n color\n );\n } else {\n svgDrawLine(\n svg,\n [\n {\n x: fromBbox.left + fromBbox.width / 2,\n y: fromBbox.top + fromBbox.height\n },\n {\n x: fromBbox.left + fromBbox.width / 2,\n y: fromBbox.top + config.nodeSpacing / 2\n },\n {\n x: toBbox.left + toBbox.width / 2,\n y: toBbox.top - config.nodeSpacing / 2\n },\n {\n x: toBbox.left + toBbox.width / 2,\n y: toBbox.top\n }\n ],\n color\n );\n }\n break;\n }\n}\n\nfunction cloneNode(svg, selector) {\n return svg\n .select(selector)\n .node()\n .cloneNode(true);\n}\n\nfunction renderCommitHistory(svg, commitid, branches, direction) {\n let commit;\n const numCommits = Object.keys(allCommitsDict).length;\n if (typeof commitid === 'string') {\n do {\n commit = allCommitsDict[commitid];\n logger.debug('in renderCommitHistory', commit.id, commit.seq);\n if (svg.select('#node-' + commitid).size() > 0) {\n return;\n }\n svg\n .append(function() {\n return cloneNode(svg, '#def-commit');\n })\n .attr('class', 'commit')\n .attr('id', function() {\n return 'node-' + commit.id;\n })\n .attr('transform', function() {\n switch (direction) {\n case 'LR':\n return (\n 'translate(' +\n (commit.seq * config.nodeSpacing + config.leftMargin) +\n ', ' +\n branchNum * config.branchOffset +\n ')'\n );\n case 'BT':\n return (\n 'translate(' +\n (branchNum * config.branchOffset + config.leftMargin) +\n ', ' +\n (numCommits - commit.seq) * config.nodeSpacing +\n ')'\n );\n }\n })\n .attr('fill', config.nodeFillColor)\n .attr('stroke', config.nodeStrokeColor)\n .attr('stroke-width', config.nodeStrokeWidth);\n\n let branch;\n for (let branchName in branches) {\n if (branches[branchName].commit === commit) {\n branch = branches[branchName];\n break;\n }\n }\n if (branch) {\n logger.debug('found branch ', branch.name);\n svg\n .select('#node-' + commit.id + ' p')\n .append('xhtml:span')\n .attr('class', 'branch-label')\n .text(branch.name + ', ');\n }\n svg\n .select('#node-' + commit.id + ' p')\n .append('xhtml:span')\n .attr('class', 'commit-id')\n .text(commit.id);\n if (commit.message !== '' && direction === 'BT') {\n svg\n .select('#node-' + commit.id + ' p')\n .append('xhtml:span')\n .attr('class', 'commit-msg')\n .text(', ' + commit.message);\n }\n commitid = commit.parent;\n } while (commitid && allCommitsDict[commitid]);\n }\n\n if (Array.isArray(commitid)) {\n logger.debug('found merge commmit', commitid);\n renderCommitHistory(svg, commitid[0], branches, direction);\n branchNum++;\n renderCommitHistory(svg, commitid[1], branches, direction);\n branchNum--;\n }\n}\n\nfunction renderLines(svg, commit, direction, branchColor) {\n branchColor = branchColor || 0;\n while (commit.seq > 0 && !commit.lineDrawn) {\n if (typeof commit.parent === 'string') {\n svgDrawLineForCommits(svg, commit.id, commit.parent, direction, branchColor);\n commit.lineDrawn = true;\n commit = allCommitsDict[commit.parent];\n } else if (Array.isArray(commit.parent)) {\n svgDrawLineForCommits(svg, commit.id, commit.parent[0], direction, branchColor);\n svgDrawLineForCommits(svg, commit.id, commit.parent[1], direction, branchColor + 1);\n renderLines(svg, allCommitsDict[commit.parent[1]], direction, branchColor + 1);\n commit.lineDrawn = true;\n commit = allCommitsDict[commit.parent[0]];\n }\n }\n}\n\nexport const draw = function(txt, id, ver) {\n try {\n const parser = gitGraphParser.parser;\n parser.yy = db;\n parser.yy.clear();\n\n logger.debug('in gitgraph renderer', txt + '\\n', 'id:', id, ver);\n // Parse the graph definition\n parser.parse(txt + '\\n');\n\n config = Object.assign(config, apiConfig, db.getOptions());\n logger.debug('effective options', config);\n const direction = db.getDirection();\n allCommitsDict = db.getCommits();\n const branches = db.getBranchesAsObjArray();\n if (direction === 'BT') {\n config.nodeLabel.x = branches.length * config.branchOffset;\n config.nodeLabel.width = '100%';\n config.nodeLabel.y = -1 * 2 * config.nodeRadius;\n }\n const svg = select(`[id=\"${id}\"]`);\n svgCreateDefs(svg);\n branchNum = 1;\n for (let branch in branches) {\n const v = branches[branch];\n renderCommitHistory(svg, v.commit.id, branches, direction);\n renderLines(svg, v.commit, direction);\n branchNum++;\n }\n svg.attr('height', function() {\n if (direction === 'BT') return Object.keys(allCommitsDict).length * config.nodeSpacing;\n return (branches.length + 1) * config.branchOffset;\n });\n } catch (e) {\n logger.error('Error while rendering gitgraph');\n logger.error(e.message);\n }\n};\n\nexport default {\n setConf,\n draw\n};\n","/**\n * Created by AshishJ on 11-09-2019.\n */\nimport { select, scaleOrdinal, schemeSet2, pie as d3pie, entries, arc } from 'd3';\nimport pieData from './pieDb';\nimport pieParser from './parser/pie';\nimport { logger } from '../../logger';\nimport { configureSvgSize } from '../../utils';\n\nconst conf = {};\nexport const setConf = function(cnf) {\n const keys = Object.keys(cnf);\n\n keys.forEach(function(key) {\n conf[key] = cnf[key];\n });\n};\n\n/**\n * Draws a Pie Chart with the data given in text.\n * @param text\n * @param id\n */\nlet width;\nconst height = 450;\nexport const draw = (txt, id) => {\n try {\n const parser = pieParser.parser;\n parser.yy = pieData;\n logger.debug('Rendering info diagram\\n' + txt);\n // Parse the Pie Chart definition\n parser.yy.clear();\n parser.parse(txt);\n logger.debug('Parsed info diagram');\n const elem = document.getElementById(id);\n width = elem.parentElement.offsetWidth;\n\n if (typeof width === 'undefined') {\n width = 1200;\n }\n\n if (typeof conf.useWidth !== 'undefined') {\n width = conf.useWidth;\n }\n\n const diagram = select('#' + id);\n configureSvgSize(diagram, height, width, conf.useMaxWidth);\n\n // Set viewBox\n elem.setAttribute('viewBox', '0 0 ' + width + ' ' + height);\n\n // Fetch the default direction, use TD if none was found\n var margin = 40;\n var legendRectSize = 18;\n var legendSpacing = 4;\n\n var radius = Math.min(width, height) / 2 - margin;\n\n var svg = diagram\n .append('g')\n .attr('transform', 'translate(' + width / 2 + ',' + height / 2 + ')');\n\n var data = pieData.getSections();\n var sum = 0;\n Object.keys(data).forEach(function(key) {\n sum += data[key];\n });\n\n // Set the color scale\n var color = scaleOrdinal()\n .domain(data)\n .range(schemeSet2);\n\n // Compute the position of each group on the pie:\n var pie = d3pie().value(function(d) {\n return d.value;\n });\n var dataReady = pie(entries(data));\n\n // Shape helper to build arcs:\n var arcGenerator = arc()\n .innerRadius(0)\n .outerRadius(radius);\n\n // Build the pie chart: each part of the pie is a path that we build using the arc function.\n svg\n .selectAll('mySlices')\n .data(dataReady)\n .enter()\n .append('path')\n .attr('d', arcGenerator)\n .attr('fill', function(d) {\n return color(d.data.key);\n })\n .attr('stroke', 'black')\n .style('stroke-width', '2px')\n .style('opacity', 0.7);\n\n // Now add the percentage.\n // Use the centroid method to get the best coordinates.\n svg\n .selectAll('mySlices')\n .data(dataReady)\n .enter()\n .append('text')\n .text(function(d) {\n return ((d.data.value / sum) * 100).toFixed(0) + '%';\n })\n .attr('transform', function(d) {\n return 'translate(' + arcGenerator.centroid(d) + ')';\n })\n .style('text-anchor', 'middle')\n .attr('class', 'slice')\n .style('font-size', 17);\n\n svg\n .append('text')\n .text(parser.yy.getTitle())\n .attr('x', 0)\n .attr('y', -(height - 50) / 2)\n .attr('class', 'pieTitleText');\n\n // Add the legends/annotations for each section\n var legend = svg\n .selectAll('.legend')\n .data(color.domain())\n .enter()\n .append('g')\n .attr('class', 'legend')\n .attr('transform', function(d, i) {\n var height = legendRectSize + legendSpacing;\n var offset = (height * color.domain().length) / 2;\n var horz = 12 * legendRectSize;\n var vert = i * height - offset;\n return 'translate(' + horz + ',' + vert + ')';\n });\n\n legend\n .append('rect')\n .attr('width', legendRectSize)\n .attr('height', legendRectSize)\n .style('fill', color)\n .style('stroke', color);\n\n legend\n .append('text')\n .attr('x', legendRectSize + legendSpacing)\n .attr('y', legendRectSize - legendSpacing)\n .text(function(d) {\n return d;\n });\n } catch (e) {\n logger.error('Error while rendering info diagram');\n logger.error(e);\n }\n};\n\nexport default {\n setConf,\n draw\n};\n","/**\n * Created by knut on 15-01-14.\n */\nimport { logger } from '../../logger';\n\nvar message = '';\nvar info = false;\n\nexport const setMessage = txt => {\n logger.debug('Setting message to: ' + txt);\n message = txt;\n};\n\nexport const getMessage = () => {\n return message;\n};\n\nexport const setInfo = inf => {\n info = inf;\n};\n\nexport const getInfo = () => {\n return info;\n};\n\n// export const parseError = (err, hash) => {\n// global.mermaidAPI.parseError(err, hash)\n// }\n\nexport default {\n setMessage,\n getMessage,\n setInfo,\n getInfo\n // parseError\n};\n","/**\n * Created by knut on 14-12-11.\n */\nimport { select } from 'd3';\nimport db from './infoDb';\nimport infoParser from './parser/info';\nimport { logger } from '../../logger';\n\nconst conf = {};\nexport const setConf = function(cnf) {\n const keys = Object.keys(cnf);\n\n keys.forEach(function(key) {\n conf[key] = cnf[key];\n });\n};\n\n/**\n * Draws a an info picture in the tag with id: id based on the graph definition in text.\n * @param text\n * @param id\n */\nexport const draw = (txt, id, ver) => {\n try {\n const parser = infoParser.parser;\n parser.yy = db;\n logger.debug('Renering info diagram\\n' + txt);\n // Parse the graph definition\n parser.parse(txt);\n logger.debug('Parsed info diagram');\n // Fetch the default direction, use TD if none was found\n const svg = select('#' + id);\n\n const g = svg.append('g');\n\n g.append('text') // text label for the x axis\n .attr('x', 100)\n .attr('y', 40)\n .attr('class', 'version')\n .attr('font-size', '32px')\n .style('text-anchor', 'middle')\n .text('v ' + ver);\n\n svg.attr('height', 100);\n svg.attr('width', 400);\n // svg.attr('viewBox', '0 0 300 150');\n } catch (e) {\n logger.error('Error while rendering info diagram');\n logger.error(e.message);\n }\n};\n\nexport default {\n setConf,\n draw\n};\n","/**\n * Created by knut on 14-12-11.\n */\nimport { select } from 'd3';\nimport { logger } from './logger';\n\nconst conf = {};\nexport const setConf = function(cnf) {\n const keys = Object.keys(cnf);\n\n keys.forEach(function(key) {\n conf[key] = cnf[key];\n });\n};\n\n/**\n * Draws a an info picture in the tag with id: id based on the graph definition in text.\n * @param text\n * @param id\n */\nexport const draw = (id, ver) => {\n try {\n logger.debug('Renering svg for syntax error\\n');\n\n const svg = select('#' + id);\n\n const g = svg.append('g');\n\n g.append('path')\n .attr('class', 'error-icon')\n .attr(\n 'd',\n 'm411.313,123.313c6.25-6.25 6.25-16.375 0-22.625s-16.375-6.25-22.625,0l-32,32-9.375,9.375-20.688-20.688c-12.484-12.5-32.766-12.5-45.25,0l-16,16c-1.261,1.261-2.304,2.648-3.31,4.051-21.739-8.561-45.324-13.426-70.065-13.426-105.867,0-192,86.133-192,192s86.133,192 192,192 192-86.133 192-192c0-24.741-4.864-48.327-13.426-70.065 1.402-1.007 2.79-2.049 4.051-3.31l16-16c12.5-12.492 12.5-32.758 0-45.25l-20.688-20.688 9.375-9.375 32.001-31.999zm-219.313,100.687c-52.938,0-96,43.063-96,96 0,8.836-7.164,16-16,16s-16-7.164-16-16c0-70.578 57.422-128 128-128 8.836,0 16,7.164 16,16s-7.164,16-16,16z'\n );\n\n g.append('path')\n .attr('class', 'error-icon')\n .attr(\n 'd',\n 'm459.02,148.98c-6.25-6.25-16.375-6.25-22.625,0s-6.25,16.375 0,22.625l16,16c3.125,3.125 7.219,4.688 11.313,4.688 4.094,0 8.188-1.563 11.313-4.688 6.25-6.25 6.25-16.375 0-22.625l-16.001-16z'\n );\n\n g.append('path')\n .attr('class', 'error-icon')\n .attr(\n 'd',\n 'm340.395,75.605c3.125,3.125 7.219,4.688 11.313,4.688 4.094,0 8.188-1.563 11.313-4.688 6.25-6.25 6.25-16.375 0-22.625l-16-16c-6.25-6.25-16.375-6.25-22.625,0s-6.25,16.375 0,22.625l15.999,16z'\n );\n\n g.append('path')\n .attr('class', 'error-icon')\n .attr(\n 'd',\n 'm400,64c8.844,0 16-7.164 16-16v-32c0-8.836-7.156-16-16-16-8.844,0-16,7.164-16,16v32c0,8.836 7.156,16 16,16z'\n );\n\n g.append('path')\n .attr('class', 'error-icon')\n .attr(\n 'd',\n 'm496,96.586h-32c-8.844,0-16,7.164-16,16 0,8.836 7.156,16 16,16h32c8.844,0 16-7.164 16-16 0-8.836-7.156-16-16-16z'\n );\n\n g.append('path')\n .attr('class', 'error-icon')\n .attr(\n 'd',\n 'm436.98,75.605c3.125,3.125 7.219,4.688 11.313,4.688 4.094,0 8.188-1.563 11.313-4.688l32-32c6.25-6.25 6.25-16.375 0-22.625s-16.375-6.25-22.625,0l-32,32c-6.251,6.25-6.251,16.375-0.001,22.625z'\n );\n\n g.append('text') // text label for the x axis\n .attr('class', 'error-text')\n .attr('x', 1240)\n .attr('y', 250)\n .attr('font-size', '150px')\n .style('text-anchor', 'middle')\n .text('Syntax error in graph');\n g.append('text') // text label for the x axis\n .attr('class', 'error-text')\n .attr('x', 1050)\n .attr('y', 400)\n .attr('font-size', '100px')\n .style('text-anchor', 'middle')\n .text('mermaid version ' + ver);\n\n svg.attr('height', 100);\n svg.attr('width', 400);\n svg.attr('viewBox', '768 0 512 512');\n } catch (e) {\n logger.error('Error while rendering info diagram');\n logger.error(e.message);\n }\n};\n\nexport default {\n setConf,\n draw\n};\n","/**\n *\n */\nimport { logger } from '../../logger';\nimport mermaidAPI from '../../mermaidAPI';\nimport * as configApi from '../../config';\n\nlet sections = {};\nlet title = '';\n\nexport const parseDirective = function(statement, context, type) {\n mermaidAPI.parseDirective(this, statement, context, type);\n};\n\nconst addSection = function(id, value) {\n if (typeof sections[id] === 'undefined') {\n sections[id] = value;\n logger.debug('Added new section :', id);\n }\n};\nconst getSections = () => sections;\n\nconst setTitle = function(txt) {\n title = txt;\n};\n\nconst getTitle = function() {\n return title;\n};\nconst cleanupValue = function(value) {\n if (value.substring(0, 1) === ':') {\n value = value.substring(1).trim();\n return Number(value.trim());\n } else {\n return Number(value.trim());\n }\n};\n\nconst clear = function() {\n sections = {};\n title = '';\n};\n// export const parseError = (err, hash) => {\n// global.mermaidAPI.parseError(err, hash)\n// }\n\nexport default {\n parseDirective,\n getConfig: () => configApi.getConfig().pie,\n addSection,\n getSections,\n cleanupValue,\n clear,\n setTitle,\n getTitle\n // parseError\n};\n","/**\n *\n */\nimport { logger } from '../../logger';\nimport mermaidAPI from '../../mermaidAPI';\nimport * as configApi from '../../config';\n\nlet entities = {};\nlet relationships = [];\nlet title = '';\n\nconst Cardinality = {\n ZERO_OR_ONE: 'ZERO_OR_ONE',\n ZERO_OR_MORE: 'ZERO_OR_MORE',\n ONE_OR_MORE: 'ONE_OR_MORE',\n ONLY_ONE: 'ONLY_ONE'\n};\n\nconst Identification = {\n NON_IDENTIFYING: 'NON_IDENTIFYING',\n IDENTIFYING: 'IDENTIFYING'\n};\n\nexport const parseDirective = function(statement, context, type) {\n mermaidAPI.parseDirective(this, statement, context, type);\n};\n\nconst addEntity = function(name) {\n if (typeof entities[name] === 'undefined') {\n entities[name] = name;\n logger.debug('Added new entity :', name);\n }\n};\n\nconst getEntities = () => entities;\n\n/**\n * Add a relationship\n * @param entA The first entity in the relationship\n * @param rolA The role played by the first entity in relation to the second\n * @param entB The second entity in the relationship\n * @param rSpec The details of the relationship between the two entities\n */\nconst addRelationship = function(entA, rolA, entB, rSpec) {\n let rel = {\n entityA: entA,\n roleA: rolA,\n entityB: entB,\n relSpec: rSpec\n };\n\n relationships.push(rel);\n logger.debug('Added new relationship :', rel);\n};\n\nconst getRelationships = () => relationships;\n\n// Keep this - TODO: revisit...allow the diagram to have a title\nconst setTitle = function(txt) {\n title = txt;\n};\n\nconst getTitle = function() {\n return title;\n};\n\nconst clear = function() {\n entities = {};\n relationships = [];\n title = '';\n};\n\nexport default {\n Cardinality,\n Identification,\n parseDirective,\n getConfig: () => configApi.getConfig().er,\n addEntity,\n getEntities,\n addRelationship,\n getRelationships,\n clear,\n setTitle,\n getTitle\n};\n","const ERMarkers = {\n ONLY_ONE_START: 'ONLY_ONE_START',\n ONLY_ONE_END: 'ONLY_ONE_END',\n ZERO_OR_ONE_START: 'ZERO_OR_ONE_START',\n ZERO_OR_ONE_END: 'ZERO_OR_ONE_END',\n ONE_OR_MORE_START: 'ONE_OR_MORE_START',\n ONE_OR_MORE_END: 'ONE_OR_MORE_END',\n ZERO_OR_MORE_START: 'ZERO_OR_MORE_START',\n ZERO_OR_MORE_END: 'ZERO_OR_MORE_END'\n};\n\n/**\n * Put the markers into the svg DOM for later use with edge paths\n */\nconst insertMarkers = function(elem, conf) {\n let marker;\n\n elem\n .append('defs')\n .append('marker')\n .attr('id', ERMarkers.ONLY_ONE_START)\n .attr('refX', 0)\n .attr('refY', 9)\n .attr('markerWidth', 18)\n .attr('markerHeight', 18)\n .attr('orient', 'auto')\n .append('path')\n .attr('stroke', conf.stroke)\n .attr('fill', 'none')\n .attr('d', 'M9,0 L9,18 M15,0 L15,18');\n\n elem\n .append('defs')\n .append('marker')\n .attr('id', ERMarkers.ONLY_ONE_END)\n .attr('refX', 18)\n .attr('refY', 9)\n .attr('markerWidth', 18)\n .attr('markerHeight', 18)\n .attr('orient', 'auto')\n .append('path')\n .attr('stroke', conf.stroke)\n .attr('fill', 'none')\n .attr('d', 'M3,0 L3,18 M9,0 L9,18');\n\n marker = elem\n .append('defs')\n .append('marker')\n .attr('id', ERMarkers.ZERO_OR_ONE_START)\n .attr('refX', 0)\n .attr('refY', 9)\n .attr('markerWidth', 30)\n .attr('markerHeight', 18)\n .attr('orient', 'auto');\n marker\n .append('circle')\n .attr('stroke', conf.stroke)\n .attr('fill', 'white')\n .attr('cx', 21)\n .attr('cy', 9)\n .attr('r', 6);\n marker\n .append('path')\n .attr('stroke', conf.stroke)\n .attr('fill', 'none')\n .attr('d', 'M9,0 L9,18');\n\n marker = elem\n .append('defs')\n .append('marker')\n .attr('id', ERMarkers.ZERO_OR_ONE_END)\n .attr('refX', 30)\n .attr('refY', 9)\n .attr('markerWidth', 30)\n .attr('markerHeight', 18)\n .attr('orient', 'auto');\n marker\n .append('circle')\n .attr('stroke', conf.stroke)\n .attr('fill', 'white')\n .attr('cx', 9)\n .attr('cy', 9)\n .attr('r', 6);\n marker\n .append('path')\n .attr('stroke', conf.stroke)\n .attr('fill', 'none')\n .attr('d', 'M21,0 L21,18');\n\n elem\n .append('defs')\n .append('marker')\n .attr('id', ERMarkers.ONE_OR_MORE_START)\n .attr('refX', 18)\n .attr('refY', 18)\n .attr('markerWidth', 45)\n .attr('markerHeight', 36)\n .attr('orient', 'auto')\n .append('path')\n .attr('stroke', conf.stroke)\n .attr('fill', 'none')\n .attr('d', 'M0,18 Q 18,0 36,18 Q 18,36 0,18 M42,9 L42,27');\n\n elem\n .append('defs')\n .append('marker')\n .attr('id', ERMarkers.ONE_OR_MORE_END)\n .attr('refX', 27)\n .attr('refY', 18)\n .attr('markerWidth', 45)\n .attr('markerHeight', 36)\n .attr('orient', 'auto')\n .append('path')\n .attr('stroke', conf.stroke)\n .attr('fill', 'none')\n .attr('d', 'M3,9 L3,27 M9,18 Q27,0 45,18 Q27,36 9,18');\n\n marker = elem\n .append('defs')\n .append('marker')\n .attr('id', ERMarkers.ZERO_OR_MORE_START)\n .attr('refX', 18)\n .attr('refY', 18)\n .attr('markerWidth', 57)\n .attr('markerHeight', 36)\n .attr('orient', 'auto');\n marker\n .append('circle')\n .attr('stroke', conf.stroke)\n .attr('fill', 'white')\n .attr('cx', 48)\n .attr('cy', 18)\n .attr('r', 6);\n marker\n .append('path')\n .attr('stroke', conf.stroke)\n .attr('fill', 'none')\n .attr('d', 'M0,18 Q18,0 36,18 Q18,36 0,18');\n\n marker = elem\n .append('defs')\n .append('marker')\n .attr('id', ERMarkers.ZERO_OR_MORE_END)\n .attr('refX', 39)\n .attr('refY', 18)\n .attr('markerWidth', 57)\n .attr('markerHeight', 36)\n .attr('orient', 'auto');\n marker\n .append('circle')\n .attr('stroke', conf.stroke)\n .attr('fill', 'white')\n .attr('cx', 9)\n .attr('cy', 18)\n .attr('r', 6);\n marker\n .append('path')\n .attr('stroke', conf.stroke)\n .attr('fill', 'none')\n .attr('d', 'M21,18 Q39,0 57,18 Q39,36 21,18');\n\n return;\n};\n\nexport default {\n ERMarkers,\n insertMarkers\n};\n","import graphlib from 'graphlib';\nimport { line, curveBasis, select } from 'd3';\nimport erDb from './erDb';\nimport erParser from './parser/erDiagram';\nimport dagre from 'dagre';\nimport { getConfig } from '../../config';\nimport { logger } from '../../logger';\nimport erMarkers from './erMarkers';\nimport { configureSvgSize } from '../../utils';\n\nconst conf = {};\n\n/**\n * Allows the top-level API module to inject config specific to this renderer,\n * storing it in the local conf object. Note that generic config still needs to be\n * retrieved using getConfig() imported from the config module\n */\nexport const setConf = function(cnf) {\n const keys = Object.keys(cnf);\n for (let i = 0; i < keys.length; i++) {\n conf[keys[i]] = cnf[keys[i]];\n }\n};\n\n/**\n * Use D3 to construct the svg elements for the entities\n * @param svgNode the svg node that contains the diagram\n * @param entities The entities to be drawn\n * @param graph The graph that contains the vertex and edge definitions post-layout\n * @return The first entity that was inserted\n */\nconst drawEntities = function(svgNode, entities, graph) {\n const keys = Object.keys(entities);\n let firstOne;\n\n keys.forEach(function(id) {\n // Create a group for each entity\n const groupNode = svgNode.append('g').attr('id', id);\n\n firstOne = firstOne === undefined ? id : firstOne;\n\n // Label the entity - this is done first so that we can get the bounding box\n // which then determines the size of the rectangle\n const textId = 'entity-' + id;\n const textNode = groupNode\n .append('text')\n .attr('class', 'er entityLabel')\n .attr('id', textId)\n .attr('x', 0)\n .attr('y', 0)\n .attr('dominant-baseline', 'middle')\n .attr('text-anchor', 'middle')\n .attr(\n 'style',\n 'font-family: ' + getConfig().fontFamily + '; font-size: ' + conf.fontSize + 'px'\n )\n .text(id);\n\n // Calculate the width and height of the entity\n const textBBox = textNode.node().getBBox();\n const entityWidth = Math.max(conf.minEntityWidth, textBBox.width + conf.entityPadding * 2);\n const entityHeight = Math.max(conf.minEntityHeight, textBBox.height + conf.entityPadding * 2);\n\n // Make sure the text gets centred relative to the entity box\n textNode.attr('transform', 'translate(' + entityWidth / 2 + ',' + entityHeight / 2 + ')');\n\n // Draw the rectangle - insert it before the text so that the text is not obscured\n const rectNode = groupNode\n .insert('rect', '#' + textId)\n .attr('class', 'er entityBox')\n .attr('fill', conf.fill)\n .attr('fill-opacity', '100%')\n .attr('stroke', conf.stroke)\n .attr('x', 0)\n .attr('y', 0)\n .attr('width', entityWidth)\n .attr('height', entityHeight);\n\n const rectBBox = rectNode.node().getBBox();\n\n // Add the entity to the graph\n graph.setNode(id, {\n width: rectBBox.width,\n height: rectBBox.height,\n shape: 'rect',\n id: id\n });\n });\n return firstOne;\n}; // drawEntities\n\nconst adjustEntities = function(svgNode, graph) {\n graph.nodes().forEach(function(v) {\n if (typeof v !== 'undefined' && typeof graph.node(v) !== 'undefined') {\n svgNode\n .select('#' + v)\n .attr(\n 'transform',\n 'translate(' +\n (graph.node(v).x - graph.node(v).width / 2) +\n ',' +\n (graph.node(v).y - graph.node(v).height / 2) +\n ' )'\n );\n }\n });\n return;\n};\n\nconst getEdgeName = function(rel) {\n return (rel.entityA + rel.roleA + rel.entityB).replace(/\\s/g, '');\n};\n\n/**\n * Add each relationship to the graph\n * @param relationships the relationships to be added\n * @param g the graph\n * @return {Array} The array of relationships\n */\nconst addRelationships = function(relationships, g) {\n relationships.forEach(function(r) {\n g.setEdge(r.entityA, r.entityB, { relationship: r }, getEdgeName(r));\n });\n return relationships;\n}; // addRelationships\n\nlet relCnt = 0;\n/**\n * Draw a relationship using edge information from the graph\n * @param svg the svg node\n * @param rel the relationship to draw in the svg\n * @param g the graph containing the edge information\n * @param insert the insertion point in the svg DOM (because relationships have markers that need to sit 'behind' opaque entity boxes)\n */\nconst drawRelationshipFromLayout = function(svg, rel, g, insert) {\n relCnt++;\n\n // Find the edge relating to this relationship\n const edge = g.edge(rel.entityA, rel.entityB, getEdgeName(rel));\n\n // Get a function that will generate the line path\n const lineFunction = line()\n .x(function(d) {\n return d.x;\n })\n .y(function(d) {\n return d.y;\n })\n .curve(curveBasis);\n\n // Insert the line at the right place\n const svgPath = svg\n .insert('path', '#' + insert)\n .attr('class', 'er relationshipLine')\n .attr('d', lineFunction(edge.points))\n .attr('stroke', conf.stroke)\n .attr('fill', 'none');\n\n // ...and with dashes if necessary\n if (rel.relSpec.relType === erDb.Identification.NON_IDENTIFYING) {\n svgPath.attr('stroke-dasharray', '8,8');\n }\n\n // TODO: Understand this better\n let url = '';\n if (conf.arrowMarkerAbsolute) {\n url =\n window.location.protocol +\n '//' +\n window.location.host +\n window.location.pathname +\n window.location.search;\n url = url.replace(/\\(/g, '\\\\(');\n url = url.replace(/\\)/g, '\\\\)');\n }\n\n // Decide which start and end markers it needs. It may be possible to be more concise here\n // by reversing a start marker to make an end marker...but this will do for now\n\n // Note that the 'A' entity's marker is at the end of the relationship and the 'B' entity's marker is at the start\n switch (rel.relSpec.cardA) {\n case erDb.Cardinality.ZERO_OR_ONE:\n svgPath.attr('marker-end', 'url(' + url + '#' + erMarkers.ERMarkers.ZERO_OR_ONE_END + ')');\n break;\n case erDb.Cardinality.ZERO_OR_MORE:\n svgPath.attr('marker-end', 'url(' + url + '#' + erMarkers.ERMarkers.ZERO_OR_MORE_END + ')');\n break;\n case erDb.Cardinality.ONE_OR_MORE:\n svgPath.attr('marker-end', 'url(' + url + '#' + erMarkers.ERMarkers.ONE_OR_MORE_END + ')');\n break;\n case erDb.Cardinality.ONLY_ONE:\n svgPath.attr('marker-end', 'url(' + url + '#' + erMarkers.ERMarkers.ONLY_ONE_END + ')');\n break;\n }\n\n switch (rel.relSpec.cardB) {\n case erDb.Cardinality.ZERO_OR_ONE:\n svgPath.attr(\n 'marker-start',\n 'url(' + url + '#' + erMarkers.ERMarkers.ZERO_OR_ONE_START + ')'\n );\n break;\n case erDb.Cardinality.ZERO_OR_MORE:\n svgPath.attr(\n 'marker-start',\n 'url(' + url + '#' + erMarkers.ERMarkers.ZERO_OR_MORE_START + ')'\n );\n break;\n case erDb.Cardinality.ONE_OR_MORE:\n svgPath.attr(\n 'marker-start',\n 'url(' + url + '#' + erMarkers.ERMarkers.ONE_OR_MORE_START + ')'\n );\n break;\n case erDb.Cardinality.ONLY_ONE:\n svgPath.attr('marker-start', 'url(' + url + '#' + erMarkers.ERMarkers.ONLY_ONE_START + ')');\n break;\n }\n\n // Now label the relationship\n\n // Find the half-way point\n const len = svgPath.node().getTotalLength();\n const labelPoint = svgPath.node().getPointAtLength(len * 0.5);\n\n // Append a text node containing the label\n const labelId = 'rel' + relCnt;\n\n const labelNode = svg\n .append('text')\n .attr('class', 'er relationshipLabel')\n .attr('id', labelId)\n .attr('x', labelPoint.x)\n .attr('y', labelPoint.y)\n .attr('text-anchor', 'middle')\n .attr('dominant-baseline', 'middle')\n .attr(\n 'style',\n 'font-family: ' + getConfig().fontFamily + '; font-size: ' + conf.fontSize + 'px'\n )\n .text(rel.roleA);\n\n // Figure out how big the opaque 'container' rectangle needs to be\n const labelBBox = labelNode.node().getBBox();\n\n // Insert the opaque rectangle before the text label\n svg\n .insert('rect', '#' + labelId)\n .attr('class', 'er relationshipLabelBox')\n .attr('x', labelPoint.x - labelBBox.width / 2)\n .attr('y', labelPoint.y - labelBBox.height / 2)\n .attr('width', labelBBox.width)\n .attr('height', labelBBox.height)\n .attr('fill', 'white')\n .attr('fill-opacity', '85%');\n\n return;\n};\n\n/**\n * Draw en E-R diagram in the tag with id: id based on the text definition of the diagram\n * @param text the text of the diagram\n * @param id the unique id of the DOM node that contains the diagram\n */\nexport const draw = function(text, id) {\n logger.info('Drawing ER diagram');\n erDb.clear();\n const parser = erParser.parser;\n parser.yy = erDb;\n\n // Parse the text to populate erDb\n try {\n parser.parse(text);\n } catch (err) {\n logger.debug('Parsing failed');\n }\n\n // Get a reference to the svg node that contains the text\n const svg = select(`[id='${id}']`);\n\n // Add cardinality marker definitions to the svg\n erMarkers.insertMarkers(svg, conf);\n\n // Now we have to construct the diagram in a specific way:\n // ---\n // 1. Create all the entities in the svg node at 0,0, but with the correct dimensions (allowing for text content)\n // 2. Make sure they are all added to the graph\n // 3. Add all the edges (relationships) to the graph aswell\n // 4. Let dagre do its magic to layout the graph. This assigns:\n // - the centre co-ordinates for each node, bearing in mind the dimensions and edge relationships\n // - the path co-ordinates for each edge\n // But it has no impact on the svg child nodes - the diagram remains with every entity rooted at 0,0\n // 5. Now assign a transform to each entity in the svg node so that it gets drawn in the correct place, as determined by\n // its centre point, which is obtained from the graph, and it's width and height\n // 6. And finally, create all the edges in the svg node using information from the graph\n // ---\n\n // Create the graph\n let g;\n\n // TODO: Explore directed vs undirected graphs, and how the layout is affected\n // An E-R diagram could be said to be undirected, but there is merit in setting\n // the direction from parent to child in a one-to-many as this influences graphlib to\n // put the parent above the child (does it?), which is intuitive. Most relationships\n // in ER diagrams are one-to-many.\n g = new graphlib.Graph({\n multigraph: true,\n directed: true,\n compound: false\n })\n .setGraph({\n rankdir: conf.layoutDirection,\n marginx: 20,\n marginy: 20,\n nodesep: 100,\n edgesep: 100,\n ranksep: 100\n })\n .setDefaultEdgeLabel(function() {\n return {};\n });\n\n // Draw the entities (at 0,0), returning the first svg node that got\n // inserted - this represents the insertion point for relationship paths\n const firstEntity = drawEntities(svg, erDb.getEntities(), g);\n\n // TODO: externalise the addition of entities to the graph - it's a bit 'buried' in the above\n\n // Add all the relationships to the graph\n const relationships = addRelationships(erDb.getRelationships(), g);\n\n dagre.layout(g); // Node and edge positions will be updated\n\n // Adjust the positions of the entities so that they adhere to the layout\n adjustEntities(svg, g);\n\n // Draw the relationships\n relationships.forEach(function(rel) {\n drawRelationshipFromLayout(svg, rel, g, firstEntity);\n });\n\n const padding = conf.diagramPadding;\n\n const svgBounds = svg.node().getBBox();\n const width = svgBounds.width + padding * 2;\n const height = svgBounds.height + padding * 2;\n\n configureSvgSize(svg, height, width, conf.useMaxWidth);\n\n svg.attr('viewBox', `${svgBounds.x - padding} ${svgBounds.y - padding} ${width} ${height}`);\n}; // draw\n\nexport default {\n setConf,\n draw\n};\n","import mermaidAPI from '../../mermaidAPI';\nimport * as configApi from '../../config';\n\nlet title = '';\nlet currentSection = '';\n\nconst sections = [];\nconst tasks = [];\nconst rawTasks = [];\n\nexport const parseDirective = function(statement, context, type) {\n mermaidAPI.parseDirective(this, statement, context, type);\n};\n\nexport const clear = function() {\n sections.length = 0;\n tasks.length = 0;\n currentSection = '';\n title = '';\n rawTasks.length = 0;\n};\n\nexport const setTitle = function(txt) {\n title = txt;\n};\n\nexport const getTitle = function() {\n return title;\n};\n\nexport const addSection = function(txt) {\n currentSection = txt;\n sections.push(txt);\n};\n\nexport const getSections = function() {\n return sections;\n};\n\nexport const getTasks = function() {\n let allItemsProcessed = compileTasks();\n const maxDepth = 100;\n let iterationCount = 0;\n while (!allItemsProcessed && iterationCount < maxDepth) {\n allItemsProcessed = compileTasks();\n iterationCount++;\n }\n\n tasks.push(...rawTasks);\n\n return tasks;\n};\n\nconst updateActors = function() {\n const tempActors = [];\n tasks.forEach(task => {\n if (task.people) {\n tempActors.push(...task.people);\n }\n });\n\n const unique = new Set(tempActors);\n return [...unique].sort();\n};\n\nexport const addTask = function(descr, taskData) {\n const pieces = taskData.substr(1).split(':');\n\n let score = 0;\n let peeps = [];\n if (pieces.length === 1) {\n score = Number(pieces[0]);\n peeps = [];\n } else {\n score = Number(pieces[0]);\n peeps = pieces[1].split(',');\n }\n const peopleList = peeps.map(s => s.trim());\n\n const rawTask = {\n section: currentSection,\n type: currentSection,\n people: peopleList,\n task: descr,\n score\n };\n\n rawTasks.push(rawTask);\n};\n\nexport const addTaskOrg = function(descr) {\n const newTask = {\n section: currentSection,\n type: currentSection,\n description: descr,\n task: descr,\n classes: []\n };\n tasks.push(newTask);\n};\n\nconst compileTasks = function() {\n const compileTask = function(pos) {\n return rawTasks[pos].processed;\n };\n\n let allProcessed = true;\n for (let i = 0; i < rawTasks.length; i++) {\n compileTask(i);\n\n allProcessed = allProcessed && rawTasks[i].processed;\n }\n return allProcessed;\n};\n\nconst getActors = function() {\n return updateActors();\n};\n\nexport default {\n parseDirective,\n getConfig: () => configApi.getConfig().journey,\n clear,\n setTitle,\n getTitle,\n addSection,\n getSections,\n getTasks,\n addTask,\n addTaskOrg,\n getActors\n};\n","import { arc as d3arc } from 'd3';\n\nexport const drawRect = function(elem, rectData) {\n const rectElem = elem.append('rect');\n rectElem.attr('x', rectData.x);\n rectElem.attr('y', rectData.y);\n rectElem.attr('fill', rectData.fill);\n rectElem.attr('stroke', rectData.stroke);\n rectElem.attr('width', rectData.width);\n rectElem.attr('height', rectData.height);\n rectElem.attr('rx', rectData.rx);\n rectElem.attr('ry', rectData.ry);\n\n if (typeof rectData.class !== 'undefined') {\n rectElem.attr('class', rectData.class);\n }\n\n return rectElem;\n};\n\nexport const drawFace = function(element, faceData) {\n const radius = 15;\n const circleElement = element\n .append('circle')\n .attr('cx', faceData.cx)\n .attr('cy', faceData.cy)\n .attr('class', 'face')\n .attr('r', radius)\n .attr('stroke-width', 2)\n .attr('overflow', 'visible');\n\n const face = element.append('g');\n\n //left eye\n face\n .append('circle')\n .attr('cx', faceData.cx - radius / 3)\n .attr('cy', faceData.cy - radius / 3)\n .attr('r', 1.5)\n .attr('stroke-width', 2)\n .attr('fill', '#666')\n .attr('stroke', '#666');\n\n //right eye\n face\n .append('circle')\n .attr('cx', faceData.cx + radius / 3)\n .attr('cy', faceData.cy - radius / 3)\n .attr('r', 1.5)\n .attr('stroke-width', 2)\n .attr('fill', '#666')\n .attr('stroke', '#666');\n\n function smile(face) {\n const arc = d3arc()\n .startAngle(Math.PI / 2)\n .endAngle(3 * (Math.PI / 2))\n .innerRadius(radius / 2)\n .outerRadius(radius / 2.2);\n //mouth\n face\n .append('path')\n .attr('class', 'mouth')\n .attr('d', arc)\n .attr('transform', 'translate(' + faceData.cx + ',' + (faceData.cy + 2) + ')');\n }\n\n function sad(face) {\n const arc = d3arc()\n .startAngle((3 * Math.PI) / 2)\n .endAngle(5 * (Math.PI / 2))\n .innerRadius(radius / 2)\n .outerRadius(radius / 2.2);\n //mouth\n face\n .append('path')\n .attr('class', 'mouth')\n .attr('d', arc)\n .attr('transform', 'translate(' + faceData.cx + ',' + (faceData.cy + 7) + ')');\n }\n\n function ambivalent(face) {\n face\n .append('line')\n .attr('class', 'mouth')\n .attr('stroke', 2)\n .attr('x1', faceData.cx - 5)\n .attr('y1', faceData.cy + 7)\n .attr('x2', faceData.cx + 5)\n .attr('y2', faceData.cy + 7)\n .attr('class', 'mouth')\n .attr('stroke-width', '1px')\n .attr('stroke', '#666');\n }\n\n if (faceData.score > 3) {\n smile(face);\n } else if (faceData.score < 3) {\n sad(face);\n } else {\n ambivalent(face);\n }\n\n return circleElement;\n};\n\nexport const drawCircle = function(element, circleData) {\n const circleElement = element.append('circle');\n circleElement.attr('cx', circleData.cx);\n circleElement.attr('cy', circleData.cy);\n circleElement.attr('fill', circleData.fill);\n circleElement.attr('stroke', circleData.stroke);\n circleElement.attr('r', circleData.r);\n\n if (typeof circleElement.class !== 'undefined') {\n circleElement.attr('class', circleElement.class);\n }\n\n if (typeof circleData.title !== 'undefined') {\n circleElement.append('title').text(circleData.title);\n }\n\n return circleElement;\n};\n\nexport const drawText = function(elem, textData) {\n // Remove and ignore br:s\n const nText = textData.text.replace(/
/gi, ' ');\n\n const textElem = elem.append('text');\n textElem.attr('x', textData.x);\n textElem.attr('y', textData.y);\n textElem.attr('class', 'legend');\n\n textElem.style('text-anchor', textData.anchor);\n\n if (typeof textData.class !== 'undefined') {\n textElem.attr('class', textData.class);\n }\n\n const span = textElem.append('tspan');\n span.attr('x', textData.x + textData.textMargin * 2);\n span.text(nText);\n\n return textElem;\n};\n\nexport const drawLabel = function(elem, txtObject) {\n function genPoints(x, y, width, height, cut) {\n return (\n x +\n ',' +\n y +\n ' ' +\n (x + width) +\n ',' +\n y +\n ' ' +\n (x + width) +\n ',' +\n (y + height - cut) +\n ' ' +\n (x + width - cut * 1.2) +\n ',' +\n (y + height) +\n ' ' +\n x +\n ',' +\n (y + height)\n );\n }\n const polygon = elem.append('polygon');\n polygon.attr('points', genPoints(txtObject.x, txtObject.y, 50, 20, 7));\n polygon.attr('class', 'labelBox');\n\n txtObject.y = txtObject.y + txtObject.labelMargin;\n txtObject.x = txtObject.x + 0.5 * txtObject.labelMargin;\n drawText(elem, txtObject);\n};\n\nexport const drawSection = function(elem, section, conf) {\n const g = elem.append('g');\n\n const rect = getNoteRect();\n rect.x = section.x;\n rect.y = section.y;\n rect.fill = section.fill;\n rect.width = conf.width;\n rect.height = conf.height;\n rect.class = 'journey-section section-type-' + section.num;\n rect.rx = 3;\n rect.ry = 3;\n drawRect(g, rect);\n\n _drawTextCandidateFunc(conf)(\n section.text,\n g,\n rect.x,\n rect.y,\n rect.width,\n rect.height,\n { class: 'journey-section section-type-' + section.num },\n conf,\n section.colour\n );\n};\n\nlet taskCount = -1;\n/**\n * Draws an actor in the diagram with the attaced line\n * @param elem The HTML element\n * @param task The task to render\n * @param conf The global configuration\n */\nexport const drawTask = function(elem, task, conf) {\n const center = task.x + conf.width / 2;\n const g = elem.append('g');\n taskCount++;\n const maxHeight = 300 + 5 * 30;\n g.append('line')\n .attr('id', 'task' + taskCount)\n .attr('x1', center)\n .attr('y1', task.y)\n .attr('x2', center)\n .attr('y2', maxHeight)\n .attr('class', 'task-line')\n .attr('stroke-width', '1px')\n .attr('stroke-dasharray', '4 2')\n .attr('stroke', '#666');\n\n drawFace(g, {\n cx: center,\n cy: 300 + (5 - task.score) * 30,\n score: task.score\n });\n\n const rect = getNoteRect();\n rect.x = task.x;\n rect.y = task.y;\n rect.fill = task.fill;\n rect.width = conf.width;\n rect.height = conf.height;\n rect.class = 'task task-type-' + task.num;\n rect.rx = 3;\n rect.ry = 3;\n drawRect(g, rect);\n\n let xPos = task.x + 14;\n task.people.forEach(person => {\n const colour = task.actors[person];\n\n const circle = {\n cx: xPos,\n cy: task.y,\n r: 7,\n fill: colour,\n stroke: '#000',\n title: person\n };\n\n drawCircle(g, circle);\n xPos += 10;\n });\n\n _drawTextCandidateFunc(conf)(\n task.task,\n g,\n rect.x,\n rect.y,\n rect.width,\n rect.height,\n { class: 'task' },\n conf,\n task.colour\n );\n};\n\n/**\n * Draws a background rectangle\n * @param elem The html element\n * @param bounds The bounds of the drawing\n */\nexport const drawBackgroundRect = function(elem, bounds) {\n const rectElem = drawRect(elem, {\n x: bounds.startx,\n y: bounds.starty,\n width: bounds.stopx - bounds.startx,\n height: bounds.stopy - bounds.starty,\n fill: bounds.fill,\n class: 'rect'\n });\n rectElem.lower();\n};\n\nexport const getTextObj = function() {\n return {\n x: 0,\n y: 0,\n fill: undefined,\n 'text-anchor': 'start',\n width: 100,\n height: 100,\n textMargin: 0,\n rx: 0,\n ry: 0\n };\n};\n\nexport const getNoteRect = function() {\n return {\n x: 0,\n y: 0,\n width: 100,\n anchor: 'start',\n height: 100,\n rx: 0,\n ry: 0\n };\n};\n\nconst _drawTextCandidateFunc = (function() {\n function byText(content, g, x, y, width, height, textAttrs, colour) {\n const text = g\n .append('text')\n .attr('x', x + width / 2)\n .attr('y', y + height / 2 + 5)\n .style('font-color', colour)\n .style('text-anchor', 'middle')\n .text(content);\n _setTextAttrs(text, textAttrs);\n }\n\n function byTspan(content, g, x, y, width, height, textAttrs, conf, colour) {\n const { taskFontSize, taskFontFamily } = conf;\n\n const lines = content.split(/
/gi);\n for (let i = 0; i < lines.length; i++) {\n const dy = i * taskFontSize - (taskFontSize * (lines.length - 1)) / 2;\n const text = g\n .append('text')\n .attr('x', x + width / 2)\n .attr('y', y)\n .attr('fill', colour)\n .style('text-anchor', 'middle')\n .style('font-size', taskFontSize)\n .style('font-family', taskFontFamily);\n text\n .append('tspan')\n .attr('x', x + width / 2)\n .attr('dy', dy)\n .text(lines[i]);\n\n text\n .attr('y', y + height / 2.0)\n .attr('dominant-baseline', 'central')\n .attr('alignment-baseline', 'central');\n\n _setTextAttrs(text, textAttrs);\n }\n }\n\n function byFo(content, g, x, y, width, height, textAttrs, conf) {\n const body = g.append('switch');\n const f = body\n .append('foreignObject')\n .attr('x', x)\n .attr('y', y)\n .attr('width', width)\n .attr('height', height)\n .attr('position', 'fixed');\n\n const text = f\n .append('div')\n .style('display', 'table')\n .style('height', '100%')\n .style('width', '100%');\n\n text\n .append('div')\n .attr('class', 'label')\n .style('display', 'table-cell')\n .style('text-align', 'center')\n .style('vertical-align', 'middle')\n // .style('color', colour)\n .text(content);\n\n byTspan(content, body, x, y, width, height, textAttrs, conf);\n _setTextAttrs(text, textAttrs);\n }\n\n function _setTextAttrs(toText, fromTextAttrsDict) {\n for (const key in fromTextAttrsDict) {\n if (key in fromTextAttrsDict) {\n // eslint-disable-line\n // noinspection JSUnfilteredForInLoop\n toText.attr(key, fromTextAttrsDict[key]);\n }\n }\n }\n\n return function(conf) {\n return conf.textPlacement === 'fo' ? byFo : conf.textPlacement === 'old' ? byText : byTspan;\n };\n})();\n\nconst initGraphics = function(graphics) {\n graphics\n .append('defs')\n .append('marker')\n .attr('id', 'arrowhead')\n .attr('refX', 5)\n .attr('refY', 2)\n .attr('markerWidth', 6)\n .attr('markerHeight', 4)\n .attr('orient', 'auto')\n .append('path')\n .attr('d', 'M 0,0 V 4 L6,2 Z'); // this is actual shape for arrowhead\n};\n\nexport default {\n drawRect,\n drawCircle,\n drawSection,\n drawText,\n drawLabel,\n drawTask,\n drawBackgroundRect,\n getTextObj,\n getNoteRect,\n initGraphics\n};\n","import { select } from 'd3';\nimport { parser } from './parser/journey';\nimport journeyDb from './journeyDb';\nimport svgDraw from './svgDraw';\nimport { configureSvgSize } from '../../utils';\n\nparser.yy = journeyDb;\n\nconst conf = {\n leftMargin: 150,\n diagramMarginX: 50,\n diagramMarginY: 20,\n // Margin between tasks\n taskMargin: 50,\n // Width of task boxes\n width: 150,\n // Height of task boxes\n height: 50,\n taskFontSize: 14,\n taskFontFamily: '\"Open-Sans\", \"sans-serif\"',\n // Margin around loop boxes\n boxMargin: 10,\n boxTextMargin: 5,\n noteMargin: 10,\n // Space between messages\n messageMargin: 35,\n // Multiline message alignment\n messageAlign: 'center',\n // Depending on css styling this might need adjustment\n // Projects the edge of the diagram downwards\n bottomMarginAdj: 1,\n\n // width of activation box\n activationWidth: 10,\n\n // text placement as: tspan | fo | old only text as before\n textPlacement: 'fo',\n\n actorColours: ['#8FBC8F', '#7CFC00', '#00FFFF', '#20B2AA', '#B0E0E6', '#FFFFE0'],\n\n sectionFills: ['#191970', '#8B008B', '#4B0082', '#2F4F4F', '#800000', '#8B4513', '#00008B'],\n sectionColours: ['#fff']\n};\n\nexport const setConf = function(cnf) {\n const keys = Object.keys(cnf);\n\n keys.forEach(function(key) {\n conf[key] = cnf[key];\n });\n};\n\nconst actors = {};\n\nfunction drawActorLegend(diagram) {\n // Draw the actors\n let yPos = 60;\n Object.keys(actors).forEach(person => {\n const colour = actors[person];\n\n const circleData = {\n cx: 20,\n cy: yPos,\n r: 7,\n fill: colour,\n stroke: '#000'\n };\n svgDraw.drawCircle(diagram, circleData);\n\n const labelData = {\n x: 40,\n y: yPos + 7,\n fill: '#666',\n text: person,\n textMargin: conf.boxTextMargin | 5\n };\n svgDraw.drawText(diagram, labelData);\n\n yPos += 20;\n });\n}\n\nconst LEFT_MARGIN = conf.leftMargin;\nexport const draw = function(text, id) {\n parser.yy.clear();\n parser.parse(text + '\\n');\n\n bounds.init();\n const diagram = select('#' + id);\n diagram.attr('xmlns:xlink', 'http://www.w3.org/1999/xlink');\n\n svgDraw.initGraphics(diagram);\n\n const tasks = parser.yy.getTasks();\n const title = parser.yy.getTitle();\n\n const actorNames = parser.yy.getActors();\n for (let member in actors) delete actors[member];\n let actorPos = 0;\n actorNames.forEach(actorName => {\n actors[actorName] = conf.actorColours[actorPos % conf.actorColours.length];\n actorPos++;\n });\n\n drawActorLegend(diagram);\n bounds.insert(0, 0, LEFT_MARGIN, Object.keys(actors).length * 50);\n\n drawTasks(diagram, tasks, 0);\n\n const box = bounds.getBounds();\n if (title) {\n diagram\n .append('text')\n .text(title)\n .attr('x', LEFT_MARGIN)\n .attr('font-size', '4ex')\n .attr('font-weight', 'bold')\n .attr('y', 25);\n }\n const height = box.stopy - box.starty + 2 * conf.diagramMarginY;\n const width = LEFT_MARGIN + box.stopx + 2 * conf.diagramMarginX;\n\n configureSvgSize(diagram, height, width, conf.useMaxWidth);\n\n // Draw activity line\n diagram\n .append('line')\n .attr('x1', LEFT_MARGIN)\n .attr('y1', conf.height * 4) // One section head + one task + margins\n .attr('x2', width - LEFT_MARGIN - 4) // Subtract stroke width so arrow point is retained\n .attr('y2', conf.height * 4)\n .attr('stroke-width', 4)\n .attr('stroke', 'black')\n .attr('marker-end', 'url(#arrowhead)');\n\n const extraVertForTitle = title ? 70 : 0;\n diagram.attr('viewBox', `${box.startx} -25 ${width} ${height + extraVertForTitle}`);\n diagram.attr('preserveAspectRatio', 'xMinYMin meet');\n};\n\nexport const bounds = {\n data: {\n startx: undefined,\n stopx: undefined,\n starty: undefined,\n stopy: undefined\n },\n verticalPos: 0,\n\n sequenceItems: [],\n init: function() {\n this.sequenceItems = [];\n this.data = {\n startx: undefined,\n stopx: undefined,\n starty: undefined,\n stopy: undefined\n };\n this.verticalPos = 0;\n },\n updateVal: function(obj, key, val, fun) {\n if (typeof obj[key] === 'undefined') {\n obj[key] = val;\n } else {\n obj[key] = fun(val, obj[key]);\n }\n },\n updateBounds: function(startx, starty, stopx, stopy) {\n const _self = this;\n let cnt = 0;\n function updateFn(type) {\n return function updateItemBounds(item) {\n cnt++;\n // The loop sequenceItems is a stack so the biggest margins in the beginning of the sequenceItems\n const n = _self.sequenceItems.length - cnt + 1;\n\n _self.updateVal(item, 'starty', starty - n * conf.boxMargin, Math.min);\n _self.updateVal(item, 'stopy', stopy + n * conf.boxMargin, Math.max);\n\n _self.updateVal(bounds.data, 'startx', startx - n * conf.boxMargin, Math.min);\n _self.updateVal(bounds.data, 'stopx', stopx + n * conf.boxMargin, Math.max);\n\n if (!(type === 'activation')) {\n _self.updateVal(item, 'startx', startx - n * conf.boxMargin, Math.min);\n _self.updateVal(item, 'stopx', stopx + n * conf.boxMargin, Math.max);\n\n _self.updateVal(bounds.data, 'starty', starty - n * conf.boxMargin, Math.min);\n _self.updateVal(bounds.data, 'stopy', stopy + n * conf.boxMargin, Math.max);\n }\n };\n }\n\n this.sequenceItems.forEach(updateFn());\n },\n insert: function(startx, starty, stopx, stopy) {\n const _startx = Math.min(startx, stopx);\n const _stopx = Math.max(startx, stopx);\n const _starty = Math.min(starty, stopy);\n const _stopy = Math.max(starty, stopy);\n\n this.updateVal(bounds.data, 'startx', _startx, Math.min);\n this.updateVal(bounds.data, 'starty', _starty, Math.min);\n this.updateVal(bounds.data, 'stopx', _stopx, Math.max);\n this.updateVal(bounds.data, 'stopy', _stopy, Math.max);\n\n this.updateBounds(_startx, _starty, _stopx, _stopy);\n },\n bumpVerticalPos: function(bump) {\n this.verticalPos = this.verticalPos + bump;\n this.data.stopy = this.verticalPos;\n },\n getVerticalPos: function() {\n return this.verticalPos;\n },\n getBounds: function() {\n return this.data;\n }\n};\n\nconst fills = conf.sectionFills;\nconst textColours = conf.sectionColours;\n\nexport const drawTasks = function(diagram, tasks, verticalPos) {\n let lastSection = '';\n const sectionVHeight = conf.height * 2 + conf.diagramMarginY;\n const taskPos = verticalPos + sectionVHeight;\n\n let sectionNumber = 0;\n let fill = '#CCC';\n let colour = 'black';\n let num = 0;\n\n // Draw the tasks\n for (let i = 0; i < tasks.length; i++) {\n let task = tasks[i];\n if (lastSection !== task.section) {\n fill = fills[sectionNumber % fills.length];\n num = sectionNumber % fills.length;\n colour = textColours[sectionNumber % textColours.length];\n\n const section = {\n x: i * conf.taskMargin + i * conf.width + LEFT_MARGIN,\n y: 50,\n text: task.section,\n fill,\n num,\n colour\n };\n\n svgDraw.drawSection(diagram, section, conf);\n lastSection = task.section;\n sectionNumber++;\n }\n\n // Collect the actors involved in the task\n const taskActors = task.people.reduce((acc, actorName) => {\n if (actors[actorName]) {\n acc[actorName] = actors[actorName];\n }\n\n return acc;\n }, {});\n\n // Add some rendering data to the object\n task.x = i * conf.taskMargin + i * conf.width + LEFT_MARGIN;\n task.y = taskPos;\n task.width = conf.diagramMarginX;\n task.height = conf.diagramMarginY;\n task.colour = colour;\n task.fill = fill;\n task.num = num;\n task.actors = taskActors;\n\n // Draw the box with the attached line\n svgDraw.drawTask(diagram, task, conf);\n bounds.insert(task.x, task.y, task.x + task.width + conf.taskMargin, 300 + 5 * 30); // stopy is the length of the descenders.\n }\n};\n\nexport default {\n setConf,\n draw\n};\n","const getStyles = options =>\n `g.classGroup text {\n fill: ${options.nodeBorder};\n fill: ${options.classText};\n stroke: none;\n font-family: ${options.fontFamily};\n font-size: 10px;\n\n .title {\n font-weight: bolder;\n }\n\n}\n\n.classTitle {\n font-weight: bolder;\n}\n.node rect,\n .node circle,\n .node ellipse,\n .node polygon,\n .node path {\n fill: ${options.mainBkg};\n stroke: ${options.nodeBorder};\n stroke-width: 1px;\n }\n\n\n.divider {\n stroke: ${options.nodeBorder};\n stroke: 1;\n}\n\ng.clickable {\n cursor: pointer;\n}\n\ng.classGroup rect {\n fill: ${options.mainBkg};\n stroke: ${options.nodeBorder};\n}\n\ng.classGroup line {\n stroke: ${options.nodeBorder};\n stroke-width: 1;\n}\n\n.classLabel .box {\n stroke: none;\n stroke-width: 0;\n fill: ${options.mainBkg};\n opacity: 0.5;\n}\n\n.classLabel .label {\n fill: ${options.nodeBorder};\n font-size: 10px;\n}\n\n.relation {\n stroke: ${options.lineColor};\n stroke-width: 1;\n fill: none;\n}\n\n.dashed-line{\n stroke-dasharray: 3;\n}\n\n#compositionStart, .composition {\n fill: ${options.lineColor} !important;\n stroke: ${options.lineColor} !important;\n stroke-width: 1;\n}\n\n#compositionEnd, .composition {\n fill: ${options.lineColor} !important;\n stroke: ${options.lineColor} !important;\n stroke-width: 1;\n}\n\n#dependencyStart, .dependency {\n fill: ${options.lineColor} !important;\n stroke: ${options.lineColor} !important;\n stroke-width: 1;\n}\n\n#dependencyStart, .dependency {\n fill: ${options.lineColor} !important;\n stroke: ${options.lineColor} !important;\n stroke-width: 1;\n}\n\n#extensionStart, .extension {\n fill: ${options.lineColor} !important;\n stroke: ${options.lineColor} !important;\n stroke-width: 1;\n}\n\n#extensionEnd, .extension {\n fill: ${options.lineColor} !important;\n stroke: ${options.lineColor} !important;\n stroke-width: 1;\n}\n\n#aggregationStart, .aggregation {\n fill: ${options.mainBkg} !important;\n stroke: ${options.lineColor} !important;\n stroke-width: 1;\n}\n\n#aggregationEnd, .aggregation {\n fill: ${options.mainBkg} !important;\n stroke: ${options.lineColor} !important;\n stroke-width: 1;\n}\n\n.edgeTerminals {\n font-size: 11px;\n}\n\n`;\n\nexport default getStyles;\n","const getStyles = options =>\n `.label {\n font-family: ${options.fontFamily};\n color: ${options.nodeTextColor || options.textColor};\n }\n\n .label text {\n fill: ${options.nodeTextColor || options.textColor};\n }\n\n .node rect,\n .node circle,\n .node ellipse,\n .node polygon,\n .node path {\n fill: ${options.mainBkg};\n stroke: ${options.nodeBorder};\n stroke-width: 1px;\n }\n\n .node .label {\n text-align: center;\n }\n .node.clickable {\n cursor: pointer;\n }\n\n .arrowheadPath {\n fill: ${options.arrowheadColor};\n }\n\n .edgePath .path {\n stroke: ${options.lineColor};\n stroke-width: 1.5px;\n }\n\n .flowchart-link {\n stroke: ${options.lineColor};\n fill: none;\n }\n\n .edgeLabel {\n background-color: ${options.edgeLabelBackground};\n rect {\n opacity: 0.5;\n background-color: ${options.edgeLabelBackground};\n fill: ${options.edgeLabelBackground};\n }\n text-align: center;\n }\n\n .cluster rect {\n fill: ${options.clusterBkg};\n stroke: ${options.clusterBorder};\n stroke-width: 1px;\n }\n\n .cluster text {\n fill: ${options.titleColor};\n }\n\n div.mermaidTooltip {\n position: absolute;\n text-align: center;\n max-width: 200px;\n padding: 2px;\n font-family: ${options.fontFamily};\n font-size: 12px;\n background: ${options.tertiaryColor};\n border: 1px solid ${options.border2};\n border-radius: 2px;\n pointer-events: none;\n z-index: 100;\n }\n`;\n\nexport default getStyles;\n","const getStyles = options =>\n `g.stateGroup text {\n fill: ${options.nodeBorder};\n stroke: none;\n font-size: 10px;\n}\ng.stateGroup text {\n fill: ${options.textColor};\n stroke: none;\n font-size: 10px;\n\n}\ng.stateGroup .state-title {\n font-weight: bolder;\n fill: ${options.labelColor};\n}\n\ng.stateGroup rect {\n fill: ${options.mainBkg};\n stroke: ${options.nodeBorder};\n}\n\ng.stateGroup line {\n stroke: ${options.lineColor};\n stroke-width: 1;\n}\n\n.transition {\n stroke: ${options.lineColor};\n stroke-width: 1;\n fill: none;\n}\n\n.stateGroup .composit {\n fill: ${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: ${options.noteBorderColor};\n fill: ${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: ${options.mainBkg};\n opacity: 0.5;\n}\n\n.edgeLabel .label rect {\n fill: ${options.tertiaryColor};\n opacity: 0.5;\n}\n.edgeLabel .label text {\n fill: ${options.tertiaryTextColor};\n}\n.label div .edgeLabel {\n color: ${options.tertiaryTextColor};\n}\n\n.stateLabel text {\n fill: ${options.labelColor};\n font-size: 10px;\n font-weight: bold;\n}\n\n.node circle.state-start {\n fill: ${options.lineColor};\n stroke: black;\n}\n.node circle.state-end {\n fill: ${options.primaryBorderColor};\n stroke: ${options.background};\n stroke-width: 1.5\n}\n.end-state-inner {\n fill: ${options.background};\n // stroke: ${options.background};\n stroke-width: 1.5\n}\n\n.node rect {\n fill: ${options.mainBkg};\n stroke: ${options.nodeBorder};\n stroke-width: 1px;\n}\n#statediagram-barbEnd {\n fill: ${options.lineColor};\n}\n\n.statediagram-cluster rect {\n fill: ${options.mainBkg};\n stroke: ${options.nodeBorder};\n stroke-width: 1px;\n}\n\n.cluster-label, .nodeLabel {\n color: ${options.textColor};\n}\n\n.statediagram-cluster rect.outer {\n rx: 5px;\n ry: 5px;\n}\n.statediagram-state .divider {\n stroke: ${options.nodeBorder};\n}\n\n.statediagram-state .title-state {\n rx: 5px;\n ry: 5px;\n}\n.statediagram-cluster.statediagram-cluster .inner {\n fill: ${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: ${options.altBackground ? options.altBackground : '#efefef'};\n}\n\n.note-edge {\n stroke-dasharray: 5;\n}\n\n.statediagram-note rect {\n fill: ${options.noteBkgColor};\n stroke: ${options.noteBorderColor};\n stroke-width: 1px;\n rx: 0;\n ry: 0;\n}\n.statediagram-note rect {\n fill: ${options.noteBkgColor};\n stroke: ${options.noteBorderColor};\n stroke-width: 1px;\n rx: 0;\n ry: 0;\n}\n\n.statediagram-note text {\n fill: ${options.noteTextColor};\n}\n\n.statediagram-note .nodeLabel {\n color: ${options.noteTextColor};\n}\n\n#dependencyStart, #dependencyEnd {\n fill: ${options.lineColor};\n stroke: ${options.lineColor};\n stroke-width: 1;\n}\n`;\n\nexport default getStyles;\n","import classDiagram from './diagrams/class/styles';\nimport er from './diagrams/er/styles';\nimport flowchart from './diagrams/flowchart/styles';\nimport gantt from './diagrams/gantt/styles';\nimport git from './diagrams/git/styles';\nimport info from './diagrams/info/styles';\nimport pie from './diagrams/pie/styles';\nimport sequence from './diagrams/sequence/styles';\nimport stateDiagram from './diagrams/state/styles';\nimport journey from './diagrams/user-journey/styles';\n\nconst themes = {\n flowchart,\n 'flowchart-v2': flowchart,\n sequence,\n gantt,\n classDiagram,\n 'classDiagram-v2': classDiagram,\n class: classDiagram,\n stateDiagram,\n state: stateDiagram,\n git,\n info,\n pie,\n er,\n journey\n};\n\nexport const calcThemeVariables = (theme, userOverRides) => theme.calcColors(userOverRides);\n\nconst getStyles = (type, userStyles, options) => {\n //console.warn('options in styles: ', options);\n return ` {\n font-family: ${options.fontFamily};\n font-size: ${options.fontSize};\n fill: ${options.textColor}\n }\n\n /* Classes common for multiple diagrams */\n\n .error-icon {\n fill: ${options.errorBkgColor};\n }\n .error-text {\n fill: ${options.errorTextColor};\n stroke: ${options.errorTextColor};\n }\n\n .edge-thickness-normal {\n stroke-width: 2px;\n }\n .edge-thickness-thick {\n stroke-width: 3.5px\n }\n .edge-pattern-solid {\n stroke-dasharray: 0;\n }\n\n .edge-pattern-dashed{\n stroke-dasharray: 3;\n }\n .edge-pattern-dotted {\n stroke-dasharray: 2;\n }\n\n .marker {\n fill: ${options.lineColor};\n }\n .marker.cross {\n stroke: ${options.lineColor};\n }\n\n svg {\n font-family: ${options.fontFamily};\n font-size: ${options.fontSize};\n }\n\n ${themes[type](options)}\n\n ${userStyles}\n\n ${type} { fill: apa;}\n`;\n};\n\nexport default getStyles;\n","const getStyles = options =>\n `.actor {\n stroke: ${options.actorBorder};\n fill: ${options.actorBkg};\n }\n\n text.actor > tspan {\n fill: ${options.actorTextColor};\n stroke: none;\n }\n\n .actor-line {\n stroke: ${options.actorLineColor};\n }\n\n .messageLine0 {\n stroke-width: 1.5;\n stroke-dasharray: none;\n stroke: ${options.signalColor};\n }\n\n .messageLine1 {\n stroke-width: 1.5;\n stroke-dasharray: 2, 2;\n stroke: ${options.signalColor};\n }\n\n #arrowhead path {\n fill: ${options.signalColor};\n stroke: ${options.signalColor};\n }\n\n .sequenceNumber {\n fill: ${options.sequenceNumberColor};\n }\n\n #sequencenumber {\n fill: ${options.signalColor};\n }\n\n #crosshead path {\n fill: ${options.signalColor};\n stroke: ${options.signalColor};\n }\n\n .messageText {\n fill: ${options.signalTextColor};\n stroke: ${options.signalTextColor};\n }\n\n .labelBox {\n stroke: ${options.labelBoxBorderColor};\n fill: ${options.labelBoxBkgColor};\n }\n\n .labelText, .labelText > tspan {\n fill: ${options.labelTextColor};\n stroke: none;\n }\n\n .loopText, .loopText > tspan {\n fill: ${options.loopTextColor};\n stroke: none;\n }\n\n .loopLine {\n stroke-width: 2px;\n stroke-dasharray: 2, 2;\n stroke: ${options.labelBoxBorderColor};\n fill: ${options.labelBoxBorderColor};\n }\n\n .note {\n //stroke: #decc93;\n stroke: ${options.noteBorderColor};\n fill: ${options.noteBkgColor};\n }\n\n .noteText, .noteText > tspan {\n fill: ${options.noteTextColor};\n stroke: none;\n }\n\n .activation0 {\n fill: ${options.activationBkgColor};\n stroke: ${options.activationBorderColor};\n }\n\n .activation1 {\n fill: ${options.activationBkgColor};\n stroke: ${options.activationBorderColor};\n }\n\n .activation2 {\n fill: ${options.activationBkgColor};\n stroke: ${options.activationBorderColor};\n }\n`;\n\nexport default getStyles;\n","const getStyles = options =>\n `\n .mermaid-main-font {\n font-family: \"trebuchet ms\", verdana, arial;\n font-family: var(--mermaid-font-family);\n }\n\n .section {\n stroke: none;\n opacity: 0.2;\n }\n\n .section0 {\n fill: ${options.sectionBkgColor};\n }\n\n .section2 {\n fill: ${options.sectionBkgColor2};\n }\n\n .section1,\n .section3 {\n fill: ${options.altSectionBkgColor};\n opacity: 0.2;\n }\n\n .sectionTitle0 {\n fill: ${options.titleColor};\n }\n\n .sectionTitle1 {\n fill: ${options.titleColor};\n }\n\n .sectionTitle2 {\n fill: ${options.titleColor};\n }\n\n .sectionTitle3 {\n fill: ${options.titleColor};\n }\n\n .sectionTitle {\n text-anchor: start;\n font-size: 11px;\n text-height: 14px;\n font-family: 'trebuchet ms', verdana, arial;\n font-family: var(--mermaid-font-family);\n\n }\n\n\n /* Grid and axis */\n\n .grid .tick {\n stroke: ${options.gridColor};\n opacity: 0.8;\n shape-rendering: crispEdges;\n text {\n font-family: ${options.fontFamily};\n fill: ${options.textColor};\n }\n }\n\n .grid path {\n stroke-width: 0;\n }\n\n\n /* Today line */\n\n .today {\n fill: none;\n stroke: ${options.todayLineColor};\n stroke-width: 2px;\n }\n\n\n /* Task styling */\n\n /* Default task */\n\n .task {\n stroke-width: 2;\n }\n\n .taskText {\n text-anchor: middle;\n font-family: 'trebuchet ms', verdana, arial;\n font-family: var(--mermaid-font-family);\n }\n\n .taskText:not([font-size]) {\n font-size: 11px;\n }\n\n .taskTextOutsideRight {\n fill: ${options.taskTextDarkColor};\n text-anchor: start;\n font-size: 11px;\n font-family: 'trebuchet ms', verdana, arial;\n font-family: var(--mermaid-font-family);\n\n }\n\n .taskTextOutsideLeft {\n fill: ${options.taskTextDarkColor};\n text-anchor: end;\n font-size: 11px;\n }\n\n /* Special case clickable */\n .task.clickable {\n cursor: pointer;\n }\n .taskText.clickable {\n cursor: pointer;\n fill: ${options.taskTextClickableColor} !important;\n font-weight: bold;\n }\n\n .taskTextOutsideLeft.clickable {\n cursor: pointer;\n fill: ${options.taskTextClickableColor} !important;\n font-weight: bold;\n }\n\n .taskTextOutsideRight.clickable {\n cursor: pointer;\n fill: ${options.taskTextClickableColor} !important;\n font-weight: bold;\n }\n\n /* Specific task settings for the sections*/\n\n .taskText0,\n .taskText1,\n .taskText2,\n .taskText3 {\n fill: ${options.taskTextColor};\n }\n\n .task0,\n .task1,\n .task2,\n .task3 {\n fill: ${options.taskBkgColor};\n stroke: ${options.taskBorderColor};\n }\n\n .taskTextOutside0,\n .taskTextOutside2\n {\n fill: ${options.taskTextOutsideColor};\n }\n\n .taskTextOutside1,\n .taskTextOutside3 {\n fill: ${options.taskTextOutsideColor};\n }\n\n\n /* Active task */\n\n .active0,\n .active1,\n .active2,\n .active3 {\n fill: ${options.activeTaskBkgColor};\n stroke: ${options.activeTaskBorderColor};\n }\n\n .activeText0,\n .activeText1,\n .activeText2,\n .activeText3 {\n fill: ${options.taskTextDarkColor} !important;\n }\n\n\n /* Completed task */\n\n .done0,\n .done1,\n .done2,\n .done3 {\n stroke: ${options.doneTaskBorderColor};\n fill: ${options.doneTaskBkgColor};\n stroke-width: 2;\n }\n\n .doneText0,\n .doneText1,\n .doneText2,\n .doneText3 {\n fill: ${options.taskTextDarkColor} !important;\n }\n\n\n /* Tasks on the critical line */\n\n .crit0,\n .crit1,\n .crit2,\n .crit3 {\n stroke: ${options.critBorderColor};\n fill: ${options.critBkgColor};\n stroke-width: 2;\n }\n\n .activeCrit0,\n .activeCrit1,\n .activeCrit2,\n .activeCrit3 {\n stroke: ${options.critBorderColor};\n fill: ${options.activeTaskBkgColor};\n stroke-width: 2;\n }\n\n .doneCrit0,\n .doneCrit1,\n .doneCrit2,\n .doneCrit3 {\n stroke: ${options.critBorderColor};\n fill: ${options.doneTaskBkgColor};\n stroke-width: 2;\n cursor: pointer;\n shape-rendering: crispEdges;\n }\n\n .milestone {\n transform: rotate(45deg) scale(0.8,0.8);\n }\n\n .milestoneText {\n font-style: italic;\n }\n .doneCritText0,\n .doneCritText1,\n .doneCritText2,\n .doneCritText3 {\n fill: ${options.taskTextDarkColor} !important;\n }\n\n .activeCritText0,\n .activeCritText1,\n .activeCritText2,\n .activeCritText3 {\n fill: ${options.taskTextDarkColor} !important;\n }\n\n .titleText {\n text-anchor: middle;\n font-size: 18px;\n fill: ${options.textColor} ;\n font-family: 'trebuchet ms', verdana, arial;\n font-family: var(--mermaid-font-family);\n }\n`;\n\nexport default getStyles;\n","const getStyles = () =>\n `\n .commit-id,\n .commit-msg,\n .branch-label {\n fill: lightgrey;\n color: lightgrey;\n font-family: 'trebuchet ms', verdana, arial;\n font-family: var(--mermaid-font-family);\n }\n`;\n\nexport default getStyles;\n","const getStyles = () => ``;\n\nexport default getStyles;\n","const getStyles = options =>\n `.pieTitleText {\n text-anchor: middle;\n font-size: 25px;\n fill: ${options.taskTextDarkColor};\n font-family: ${options.fontFamily};\n }\n .slice {\n font-family: ${options.fontFamily};\n fill: ${options.textColor};\n // fill: white;\n }\n .legend text {\n fill: ${options.taskTextDarkColor};\n font-family: ${options.fontFamily};\n font-size: 17px;\n }\n`;\n\nexport default getStyles;\n","const getStyles = options =>\n `\n .entityBox {\n fill: ${options.mainBkg};\n stroke: ${options.nodeBorder};\n }\n\n .relationshipLabelBox {\n fill: ${options.tertiaryColor};\n opacity: 0.7;\n background-color: ${options.tertiaryColor};\n rect {\n opacity: 0.5;\n }\n }\n\n .relationshipLine {\n stroke: ${options.lineColor};\n }\n`;\n\nexport default getStyles;\n","const getStyles = options =>\n `.label {\n font-family: 'trebuchet ms', verdana, arial;\n font-family: var(--mermaid-font-family);\n color: ${options.textColor};\n }\n .mouth {\n stroke: #666;\n }\n\n line {\n stroke: ${options.textColor}\n }\n\n .legend {\n fill: ${options.textColor};\n }\n\n .label text {\n fill: #333;\n }\n .label {\n color: ${options.textColor}\n }\n\n .face {\n fill: #FFF8DC;\n stroke: #999;\n }\n\n .node rect,\n .node circle,\n .node ellipse,\n .node polygon,\n .node path {\n fill: ${options.mainBkg};\n stroke: ${options.nodeBorder};\n stroke-width: 1px;\n }\n\n .node .label {\n text-align: center;\n }\n .node.clickable {\n cursor: pointer;\n }\n\n .arrowheadPath {\n fill: ${options.arrowheadColor};\n }\n\n .edgePath .path {\n stroke: ${options.lineColor};\n stroke-width: 1.5px;\n }\n\n .flowchart-link {\n stroke: ${options.lineColor};\n fill: none;\n }\n\n .edgeLabel {\n background-color: ${options.edgeLabelBackground};\n rect {\n opacity: 0.5;\n }\n text-align: center;\n }\n\n .cluster rect {\n }\n\n .cluster text {\n fill: ${options.titleColor};\n }\n\n div.mermaidTooltip {\n position: absolute;\n text-align: center;\n max-width: 200px;\n padding: 2px;\n font-family: 'trebuchet ms', verdana, arial;\n font-family: var(--mermaid-font-family);\n font-size: 12px;\n background: ${options.tertiaryColor};\n border: 1px solid ${options.border2};\n border-radius: 2px;\n pointer-events: none;\n z-index: 100;\n }\n\n .task-type-0, .section-type-0 {\n ${options.fillType0 ? `fill: ${options.fillType0}` : ''};\n }\n .task-type-1, .section-type-1 {\n ${options.fillType0 ? `fill: ${options.fillType1}` : ''};\n }\n .task-type-2, .section-type-2 {\n ${options.fillType0 ? `fill: ${options.fillType2}` : ''};\n }\n .task-type-3, .section-type-3 {\n ${options.fillType0 ? `fill: ${options.fillType3}` : ''};\n }\n .task-type-4, .section-type-4 {\n ${options.fillType0 ? `fill: ${options.fillType4}` : ''};\n }\n .task-type-5, .section-type-5 {\n ${options.fillType0 ? `fill: ${options.fillType5}` : ''};\n }\n .task-type-6, .section-type-6 {\n ${options.fillType0 ? `fill: ${options.fillType6}` : ''};\n }\n .task-type-7, .section-type-7 {\n ${options.fillType0 ? `fill: ${options.fillType7}` : ''};\n }\n`;\n\nexport default getStyles;\n","/**\n * This is the api to be used when optionally handling the integration with the web page, instead of using the default integration provided by mermaid.js.\n *\n * The core of this api is the [**render**](Setup.md?id=render) function which, given a graph\n * definition as text, renders the graph/diagram and returns an svg element for the graph.\n *\n * It is is then up to the user of the API to make use of the svg, either insert it somewhere in the page or do something completely different.\n *\n * In addition to the render function, a number of behavioral configuration options are available.\n *\n * @name mermaidAPI\n */\nimport Stylis from 'stylis';\nimport { select } from 'd3';\nimport pkg from '../package.json';\n// import * as configApi from './config';\n// // , {\n// // setConfig,\n// // configApi.getConfig,\n// // configApi.updateSiteConfig,\n// // configApi.setSiteConfig,\n// // configApi.getSiteConfig,\n// // configApi.defaultConfig\n// // }\nimport { logger, setLogLevel } from './logger';\nimport utils, { assignWithDepth } from './utils';\nimport flowRenderer from './diagrams/flowchart/flowRenderer';\nimport flowRendererV2 from './diagrams/flowchart/flowRenderer-v2';\nimport flowParser from './diagrams/flowchart/parser/flow';\nimport flowDb from './diagrams/flowchart/flowDb';\nimport sequenceRenderer from './diagrams/sequence/sequenceRenderer';\nimport sequenceParser from './diagrams/sequence/parser/sequenceDiagram';\nimport sequenceDb from './diagrams/sequence/sequenceDb';\nimport ganttRenderer from './diagrams/gantt/ganttRenderer';\nimport ganttParser from './diagrams/gantt/parser/gantt';\nimport ganttDb from './diagrams/gantt/ganttDb';\nimport classRenderer from './diagrams/class/classRenderer';\nimport classRendererV2 from './diagrams/class/classRenderer-v2';\nimport classParser from './diagrams/class/parser/classDiagram';\nimport classDb from './diagrams/class/classDb';\nimport stateRenderer from './diagrams/state/stateRenderer';\nimport stateRendererV2 from './diagrams/state/stateRenderer-v2';\nimport stateParser from './diagrams/state/parser/stateDiagram';\nimport stateDb from './diagrams/state/stateDb';\nimport gitGraphRenderer from './diagrams/git/gitGraphRenderer';\nimport gitGraphParser from './diagrams/git/parser/gitGraph';\nimport gitGraphAst from './diagrams/git/gitGraphAst';\nimport infoRenderer from './diagrams/info/infoRenderer';\nimport errorRenderer from './errorRenderer';\nimport infoParser from './diagrams/info/parser/info';\nimport infoDb from './diagrams/info/infoDb';\nimport pieRenderer from './diagrams/pie/pieRenderer';\nimport pieParser from './diagrams/pie/parser/pie';\nimport pieDb from './diagrams/pie/pieDb';\nimport erDb from './diagrams/er/erDb';\nimport erParser from './diagrams/er/parser/erDiagram';\nimport erRenderer from './diagrams/er/erRenderer';\nimport journeyParser from './diagrams/user-journey/parser/journey';\nimport journeyDb from './diagrams/user-journey/journeyDb';\nimport journeyRenderer from './diagrams/user-journey/journeyRenderer';\nimport * as configApi from './config';\nimport getStyles from './styles';\nimport theme from './themes';\n\nfunction parse(text) {\n const graphInit = utils.detectInit(text);\n if (graphInit) {\n reinitialize(graphInit);\n logger.debug('reinit ', graphInit);\n }\n const graphType = utils.detectType(text);\n let parser;\n\n logger.debug('Type ' + graphType);\n switch (graphType) {\n case 'git':\n parser = gitGraphParser;\n parser.parser.yy = gitGraphAst;\n break;\n case 'flowchart':\n flowDb.clear();\n parser = flowParser;\n parser.parser.yy = flowDb;\n break;\n case 'flowchart-v2':\n flowDb.clear();\n parser = flowParser;\n parser.parser.yy = flowDb;\n break;\n case 'sequence':\n parser = sequenceParser;\n parser.parser.yy = sequenceDb;\n break;\n case 'gantt':\n parser = ganttParser;\n parser.parser.yy = ganttDb;\n break;\n case 'class':\n parser = classParser;\n parser.parser.yy = classDb;\n break;\n case 'classDiagram':\n parser = classParser;\n parser.parser.yy = classDb;\n break;\n case 'state':\n parser = stateParser;\n parser.parser.yy = stateDb;\n break;\n case 'stateDiagram':\n parser = stateParser;\n parser.parser.yy = stateDb;\n break;\n case 'info':\n logger.debug('info info info');\n parser = infoParser;\n parser.parser.yy = infoDb;\n break;\n case 'pie':\n logger.debug('pie');\n parser = pieParser;\n parser.parser.yy = pieDb;\n break;\n case 'er':\n logger.debug('er');\n parser = erParser;\n parser.parser.yy = erDb;\n break;\n case 'journey':\n logger.debug('Journey');\n parser = journeyParser;\n parser.parser.yy = journeyDb;\n break;\n }\n parser.parser.yy.graphType = graphType;\n parser.parser.yy.parseError = (str, hash) => {\n const error = { str, hash };\n throw error;\n };\n\n parser.parse(text);\n return parser;\n}\n\nexport const encodeEntities = function(text) {\n let txt = text;\n\n txt = txt.replace(/style.*:\\S*#.*;/g, function(s) {\n const innerTxt = s.substring(0, s.length - 1);\n return innerTxt;\n });\n txt = txt.replace(/classDef.*:\\S*#.*;/g, function(s) {\n const innerTxt = s.substring(0, s.length - 1);\n return innerTxt;\n });\n\n txt = txt.replace(/#\\w+;/g, function(s) {\n const innerTxt = s.substring(1, s.length - 1);\n\n const isInt = /^\\+?\\d+$/.test(innerTxt);\n if (isInt) {\n return 'fl°°' + innerTxt + '¶ß';\n } else {\n return 'fl°' + innerTxt + '¶ß';\n }\n });\n\n return txt;\n};\n\nexport const decodeEntities = function(text) {\n let txt = text;\n\n txt = txt.replace(/fl°°/g, function() {\n return '';\n });\n txt = txt.replace(/fl°/g, function() {\n return '&';\n });\n txt = txt.replace(/¶ß/g, function() {\n return ';';\n });\n\n return txt;\n};\n/**\n * Function that renders an svg with a graph from a chart definition. Usage example below.\n *\n * ```js\n * mermaidAPI.initialize({\n * startOnLoad:true\n * });\n * $(function(){\n * const graphDefinition = 'graph TB\\na-->b';\n * const cb = function(svgGraph){\n * console.log(svgGraph);\n * };\n * mermaidAPI.render('id1',graphDefinition,cb);\n * });\n *```\n * @param id the id of the element to be rendered\n * @param _txt the graph definition\n * @param cb callback which is called after rendering is finished with the svg code as inparam.\n * @param container selector to element in which a div with the graph temporarily will be inserted. In one is\n * provided a hidden div will be inserted in the body of the page instead. The element will be removed when rendering is\n * completed.\n */\nconst render = function(id, _txt, cb, container) {\n configApi.reset();\n let txt = _txt;\n const graphInit = utils.detectInit(txt);\n if (graphInit) {\n configApi.addDirective(graphInit);\n }\n // else {\n // configApi.reset();\n // const siteConfig = configApi.getSiteConfig();\n // configApi.addDirective(siteConfig);\n // }\n // console.warn('Render fetching config');\n\n const cnf = configApi.getConfig();\n // console.warn('Render with config after adding new directives', cnf.sequence);\n // console.warn(\n // 'Render with config after adding new directives',\n // cnf.fontFamily,\n // cnf.themeVariables.fontFamily\n // );\n // Check the maximum allowed text size\n if (_txt.length > cnf.maxTextSize) {\n txt = 'graph TB;a[Maximum text size in diagram exceeded];style a fill:#faa';\n }\n\n if (typeof container !== 'undefined') {\n container.innerHTML = '';\n\n select(container)\n .append('div')\n .attr('id', 'd' + id)\n .attr('style', 'font-family: ' + cnf.fontFamily)\n .append('svg')\n .attr('id', id)\n .attr('width', '100%')\n .attr('xmlns', 'http://www.w3.org/2000/svg')\n .append('g');\n } else {\n const existingSvg = document.getElementById(id);\n if (existingSvg) {\n existingSvg.remove();\n }\n const element = document.querySelector('#' + 'd' + id);\n if (element) {\n element.remove();\n }\n\n select('body')\n .append('div')\n .attr('id', 'd' + id)\n .append('svg')\n .attr('id', id)\n .attr('width', '100%')\n .attr('xmlns', 'http://www.w3.org/2000/svg')\n .append('g');\n }\n\n window.txt = txt;\n txt = encodeEntities(txt);\n\n const element = select('#d' + id).node();\n const graphType = utils.detectType(txt);\n\n // insert inline style into svg\n const svg = element.firstChild;\n const firstChild = svg.firstChild;\n\n let userStyles = '';\n // user provided theme CSS\n if (cnf.themeCSS !== undefined) {\n userStyles += `\\n${cnf.themeCSS}`;\n }\n // user provided theme CSS\n if (cnf.fontFamily !== undefined) {\n userStyles += `\\n:root { --mermaid-font-family: ${cnf.fontFamily}}`;\n }\n // user provided theme CSS\n if (cnf.altFontFamily !== undefined) {\n userStyles += `\\n:root { --mermaid-alt-font-family: ${cnf.altFontFamily}}`;\n }\n\n // classDef\n if (graphType === 'flowchart' || graphType === 'flowchart-v2' || graphType === 'graph') {\n const classes = flowRenderer.getClasses(txt);\n for (const className in classes) {\n userStyles += `\\n.${className} > * { ${classes[className].styles.join(\n ' !important; '\n )} !important; }`;\n if (classes[className].textStyles) {\n userStyles += `\\n.${className} tspan { ${classes[className].textStyles.join(\n ' !important; '\n )} !important; }`;\n }\n }\n }\n\n // logger.warn(cnf.themeVariables);\n\n const stylis = new Stylis();\n const rules = stylis(`#${id}`, getStyles(graphType, userStyles, cnf.themeVariables));\n\n const style1 = document.createElement('style');\n style1.innerHTML = rules;\n svg.insertBefore(style1, firstChild);\n\n // Verify that the generated svgs are ok before removing this\n\n // const style2 = document.createElement('style');\n // const cs = window.getComputedStyle(svg);\n // style2.innerHTML = `#d${id} * {\n // color: ${cs.color};\n // // font: ${cs.font};\n // // font-family: Arial;\n // // font-size: 24px;\n // }`;\n // svg.insertBefore(style2, firstChild);\n\n try {\n switch (graphType) {\n case 'git':\n cnf.flowchart.arrowMarkerAbsolute = cnf.arrowMarkerAbsolute;\n gitGraphRenderer.setConf(cnf.git);\n gitGraphRenderer.draw(txt, id, false);\n break;\n case 'flowchart':\n cnf.flowchart.arrowMarkerAbsolute = cnf.arrowMarkerAbsolute;\n flowRenderer.setConf(cnf.flowchart);\n flowRenderer.draw(txt, id, false);\n break;\n case 'flowchart-v2':\n cnf.flowchart.arrowMarkerAbsolute = cnf.arrowMarkerAbsolute;\n flowRendererV2.setConf(cnf.flowchart);\n flowRendererV2.draw(txt, id, false);\n break;\n case 'sequence':\n cnf.sequence.arrowMarkerAbsolute = cnf.arrowMarkerAbsolute;\n if (cnf.sequenceDiagram) {\n // backwards compatibility\n sequenceRenderer.setConf(Object.assign(cnf.sequence, cnf.sequenceDiagram));\n console.error(\n '`mermaid config.sequenceDiagram` has been renamed to `config.sequence`. Please update your mermaid config.'\n );\n } else {\n sequenceRenderer.setConf(cnf.sequence);\n }\n sequenceRenderer.draw(txt, id);\n break;\n case 'gantt':\n cnf.gantt.arrowMarkerAbsolute = cnf.arrowMarkerAbsolute;\n ganttRenderer.setConf(cnf.gantt);\n ganttRenderer.draw(txt, id);\n break;\n case 'class':\n cnf.class.arrowMarkerAbsolute = cnf.arrowMarkerAbsolute;\n classRenderer.setConf(cnf.class);\n classRenderer.draw(txt, id);\n break;\n case 'classDiagram':\n cnf.class.arrowMarkerAbsolute = cnf.arrowMarkerAbsolute;\n classRendererV2.setConf(cnf.class);\n classRendererV2.draw(txt, id);\n break;\n case 'state':\n cnf.class.arrowMarkerAbsolute = cnf.arrowMarkerAbsolute;\n stateRenderer.setConf(cnf.state);\n stateRenderer.draw(txt, id);\n break;\n case 'stateDiagram':\n cnf.class.arrowMarkerAbsolute = cnf.arrowMarkerAbsolute;\n stateRendererV2.setConf(cnf.state);\n stateRendererV2.draw(txt, id);\n break;\n case 'info':\n cnf.class.arrowMarkerAbsolute = cnf.arrowMarkerAbsolute;\n infoRenderer.setConf(cnf.class);\n infoRenderer.draw(txt, id, pkg.version);\n break;\n case 'pie':\n cnf.class.arrowMarkerAbsolute = cnf.arrowMarkerAbsolute;\n pieRenderer.setConf(cnf.pie);\n pieRenderer.draw(txt, id, pkg.version);\n break;\n case 'er':\n erRenderer.setConf(cnf.er);\n erRenderer.draw(txt, id, pkg.version);\n break;\n case 'journey':\n journeyRenderer.setConf(cnf.journey);\n journeyRenderer.draw(txt, id, pkg.version);\n break;\n }\n } catch (e) {\n // errorRenderer.setConf(cnf.class);\n errorRenderer.draw(id, pkg.version);\n throw e;\n }\n\n select(`[id=\"${id}\"]`)\n .selectAll('foreignobject > *')\n .attr('xmlns', 'http://www.w3.org/1999/xhtml');\n\n // if (cnf.arrowMarkerAbsolute) {\n // url =\n // window.location.protocol +\n // '//' +\n // window.location.host +\n // window.location.pathname +\n // window.location.search;\n // url = url.replace(/\\(/g, '\\\\(');\n // url = url.replace(/\\)/g, '\\\\)');\n // }\n\n // Fix for when the base tag is used\n let svgCode = select('#d' + id).node().innerHTML;\n logger.debug('cnf.arrowMarkerAbsolute', cnf.arrowMarkerAbsolute);\n if (!cnf.arrowMarkerAbsolute || cnf.arrowMarkerAbsolute === 'false') {\n svgCode = svgCode.replace(/marker-end=\"url\\(.*?#/g, 'marker-end=\"url(#', 'g');\n }\n\n svgCode = decodeEntities(svgCode);\n\n if (typeof cb !== 'undefined') {\n switch (graphType) {\n case 'flowchart':\n case 'flowchart-v2':\n cb(svgCode, flowDb.bindFunctions);\n break;\n case 'gantt':\n cb(svgCode, ganttDb.bindFunctions);\n break;\n case 'class':\n case 'classDiagram':\n cb(svgCode, classDb.bindFunctions);\n break;\n default:\n cb(svgCode);\n }\n } else {\n logger.debug('CB = undefined!');\n }\n\n const node = select('#d' + id).node();\n if (node !== null && typeof node.remove === 'function') {\n select('#d' + id)\n .node()\n .remove();\n }\n\n return svgCode;\n};\n\nlet currentDirective = {};\n\nconst parseDirective = function(p, statement, context, type) {\n try {\n if (statement !== undefined) {\n statement = statement.trim();\n switch (context) {\n case 'open_directive':\n currentDirective = {};\n break;\n case 'type_directive':\n currentDirective.type = statement.toLowerCase();\n break;\n case 'arg_directive':\n currentDirective.args = JSON.parse(statement);\n break;\n case 'close_directive':\n handleDirective(p, currentDirective, type);\n currentDirective = null;\n break;\n }\n }\n } catch (error) {\n logger.error(\n `Error while rendering sequenceDiagram directive: ${statement} jison context: ${context}`\n );\n logger.error(error.message);\n }\n};\n\nconst handleDirective = function(p, directive, type) {\n logger.debug(`Directive type=${directive.type} with args:`, directive.args);\n switch (directive.type) {\n case 'init':\n case 'initialize': {\n ['config'].forEach(prop => {\n if (typeof directive.args[prop] !== 'undefined') {\n if (type === 'flowchart-v2') {\n type = 'flowchart';\n }\n directive.args[type] = directive.args[prop];\n delete directive.args[prop];\n }\n });\n\n reinitialize(directive.args);\n configApi.addDirective(directive.args);\n break;\n }\n case 'wrap':\n case 'nowrap':\n if (p && p['setWrap']) {\n p.setWrap(directive.type === 'wrap');\n }\n break;\n default:\n logger.warn(\n `Unhandled directive: source: '%%{${directive.type}: ${JSON.stringify(\n directive.args ? directive.args : {}\n )}}%%`,\n directive\n );\n break;\n }\n};\n\nfunction updateRendererConfigs(conf) {\n gitGraphRenderer.setConf(conf.git);\n flowRenderer.setConf(conf.flowchart);\n flowRendererV2.setConf(conf.flowchart);\n if (typeof conf['sequenceDiagram'] !== 'undefined') {\n sequenceRenderer.setConf(assignWithDepth(conf.sequence, conf['sequenceDiagram']));\n }\n sequenceRenderer.setConf(conf.sequence);\n ganttRenderer.setConf(conf.gantt);\n classRenderer.setConf(conf.class);\n stateRenderer.setConf(conf.state);\n stateRendererV2.setConf(conf.state);\n infoRenderer.setConf(conf.class);\n pieRenderer.setConf(conf.class);\n erRenderer.setConf(conf.er);\n journeyRenderer.setConf(conf.journey);\n errorRenderer.setConf(conf.class);\n}\n\nfunction reinitialize() {\n // `mermaidAPI.reinitialize: v${pkg.version}`,\n // JSON.stringify(options),\n // options.themeVariables.primaryColor;\n // // if (options.theme && theme[options.theme]) {\n // // options.themeVariables = theme[options.theme].getThemeVariables(options.themeVariables);\n // // }\n // // Set default options\n // const config =\n // typeof options === 'object' ? configApi.setConfig(options) : configApi.getSiteConfig();\n // updateRendererConfigs(config);\n // setLogLevel(config.logLevel);\n // logger.debug('mermaidAPI.reinitialize: ', config);\n}\n\nfunction initialize(options) {\n // console.warn(`mermaidAPI.initialize: v${pkg.version} `, options);\n\n // Handle legacy location of font-family configuration\n if (options && options.fontFamily) {\n if (!options.themeVariables) {\n options.themeVariables = { fontFamily: options.fontFamily };\n } else {\n if (!options.themeVariables.fontFamily) {\n options.themeVariables = { fontFamily: options.fontFamily };\n }\n }\n }\n // Set default options\n configApi.setSiteConfigDelta(options);\n\n if (options && options.theme && theme[options.theme]) {\n // Todo merge with user options\n options.themeVariables = theme[options.theme].getThemeVariables(options.themeVariables);\n } else {\n if (options) options.themeVariables = theme.default.getThemeVariables(options.themeVariables);\n }\n\n const config =\n typeof options === 'object' ? configApi.setSiteConfig(options) : configApi.getSiteConfig();\n\n updateRendererConfigs(config);\n setLogLevel(config.logLevel);\n // logger.debug('mermaidAPI.initialize: ', config);\n}\n\nconst mermaidAPI = Object.freeze({\n render,\n parse,\n parseDirective,\n initialize,\n reinitialize,\n getConfig: configApi.getConfig,\n setConfig: configApi.setConfig,\n getSiteConfig: configApi.getSiteConfig,\n updateSiteConfig: configApi.updateSiteConfig,\n reset: () => {\n // console.warn('reset');\n configApi.reset();\n // const siteConfig = configApi.getSiteConfig();\n // updateRendererConfigs(siteConfig);\n },\n globalReset: () => {\n configApi.reset(configApi.defaultConfig);\n updateRendererConfigs(configApi.getConfig());\n },\n defaultConfig: configApi.defaultConfig\n});\n\nsetLogLevel(configApi.getConfig().logLevel);\nconfigApi.reset(configApi.getConfig());\n\nexport default mermaidAPI;\n/**\n * ## mermaidAPI configuration defaults\n *\n * ```html\n * \n * ```\n */\n","/**\n * Web page integration module for the mermaid framework. It uses the mermaidAPI for mermaid functionality and to render\n * the diagrams to svg code.\n */\n// import { decode } from 'he';\nimport decode from 'entity-decode/browser';\nimport mermaidAPI from './mermaidAPI';\nimport { logger } from './logger';\nimport utils from './utils';\n\n/**\n * ## init\n * Function that goes through the document to find the chart definitions in there and render them.\n *\n * The function tags the processed attributes with the attribute data-processed and ignores found elements with the\n * attribute already set. This way the init function can be triggered several times.\n *\n * Optionally, `init` can accept in the second argument one of the following:\n * - a DOM Node\n * - an array of DOM nodes (as would come from a jQuery selector)\n * - a W3C selector, a la `.mermaid`\n *\n * ```mermaid\n * graph LR;\n * a(Find elements)-->b{Processed}\n * b-->|Yes|c(Leave element)\n * b-->|No |d(Transform)\n * ```\n * Renders the mermaid diagrams\n * @param nodes a css selector or an array of nodes\n */\nconst init = function() {\n const conf = mermaidAPI.getConfig();\n // console.log('Starting rendering diagrams (init) - mermaid.init', conf);\n let nodes;\n if (arguments.length >= 2) {\n /*! sequence config was passed as #1 */\n if (typeof arguments[0] !== 'undefined') {\n mermaid.sequenceConfig = arguments[0];\n }\n\n nodes = arguments[1];\n } else {\n nodes = arguments[0];\n }\n\n // if last argument is a function this is the callback function\n let callback;\n if (typeof arguments[arguments.length - 1] === 'function') {\n callback = arguments[arguments.length - 1];\n logger.debug('Callback function found');\n } else {\n if (typeof conf.mermaid !== 'undefined') {\n if (typeof conf.mermaid.callback === 'function') {\n callback = conf.mermaid.callback;\n logger.debug('Callback function found');\n } else {\n logger.debug('No Callback function found');\n }\n }\n }\n nodes =\n nodes === undefined\n ? document.querySelectorAll('.mermaid')\n : typeof nodes === 'string'\n ? document.querySelectorAll(nodes)\n : nodes instanceof window.Node\n ? [nodes]\n : nodes; // Last case - sequence config was passed pick next\n\n logger.debug('Start On Load before: ' + mermaid.startOnLoad);\n if (typeof mermaid.startOnLoad !== 'undefined') {\n logger.debug('Start On Load inner: ' + mermaid.startOnLoad);\n mermaidAPI.updateSiteConfig({ startOnLoad: mermaid.startOnLoad });\n }\n\n if (typeof mermaid.ganttConfig !== 'undefined') {\n mermaidAPI.updateSiteConfig({ gantt: mermaid.ganttConfig });\n }\n\n let txt;\n\n for (let i = 0; i < nodes.length; i++) {\n const element = nodes[i];\n\n /*! Check if previously processed */\n if (!element.getAttribute('data-processed')) {\n element.setAttribute('data-processed', true);\n } else {\n continue;\n }\n\n const id = `mermaid-${Date.now()}`;\n\n // Fetch the graph definition including tags\n txt = element.innerHTML;\n\n // transforms the html to pure text\n txt = decode(txt)\n .trim()\n .replace(/
/gi, '
');\n\n const init = utils.detectInit(txt);\n if (init) {\n logger.debug('Detected early reinit: ', init);\n }\n\n try {\n mermaidAPI.render(\n id,\n txt,\n (svgCode, bindFunctions) => {\n element.innerHTML = svgCode;\n if (typeof callback !== 'undefined') {\n callback(id);\n }\n if (bindFunctions) bindFunctions(element);\n },\n element\n );\n } catch (e) {\n logger.warn('Syntax Error rendering');\n logger.warn(e);\n if (this.parseError) {\n this.parseError(e);\n }\n }\n }\n};\n\nconst initialize = function(config) {\n // mermaidAPI.reset();\n if (typeof config.mermaid !== 'undefined') {\n if (typeof config.mermaid.startOnLoad !== 'undefined') {\n mermaid.startOnLoad = config.mermaid.startOnLoad;\n }\n if (typeof config.mermaid.htmlLabels !== 'undefined') {\n mermaid.htmlLabels = config.mermaid.htmlLabels;\n }\n }\n mermaidAPI.initialize(config);\n // mermaidAPI.reset();\n};\n\n/**\n * ##contentLoaded\n * Callback function that is called when page is loaded. This functions fetches configuration for mermaid rendering and\n * calls init for rendering the mermaid diagrams on the page.\n */\nconst contentLoaded = function() {\n let config;\n\n if (mermaid.startOnLoad) {\n // No config found, do check API config\n config = mermaidAPI.getConfig();\n if (config.startOnLoad) {\n mermaid.init();\n }\n } else {\n if (typeof mermaid.startOnLoad === 'undefined') {\n logger.debug('In start, no config');\n config = mermaidAPI.getConfig();\n if (config.startOnLoad) {\n mermaid.init();\n }\n }\n }\n};\n\nif (typeof document !== 'undefined') {\n /*!\n * Wait for document loaded before starting the execution\n */\n window.addEventListener(\n 'load',\n function() {\n contentLoaded();\n },\n false\n );\n}\n\nconst mermaid = {\n startOnLoad: true,\n htmlLabels: true,\n\n mermaidAPI,\n parse: mermaidAPI.parse,\n render: mermaidAPI.render,\n\n init,\n initialize,\n\n contentLoaded\n};\n\nexport default mermaid;\n"],"sourceRoot":""}
\ No newline at end of file
diff --git a/site/themes/geekdoc/assets/js/search-data.js b/site/themes/geekdoc/assets/js/search-data.js
new file mode 100644
index 0000000..7ce2cd8
--- /dev/null
+++ b/site/themes/geekdoc/assets/js/search-data.js
@@ -0,0 +1,28 @@
+'use strict';
+
+(function() {
+ const indexCfg = {{ with .Scratch.Get "geekdocSearchConfig" }}
+ {{ . | jsonify}};
+ {{ else }}
+ {};
+ {{ end }}
+
+ indexCfg.doc = {
+ id: 'id',
+ field: ['title', 'content'],
+ store: ['title', 'href', 'parent'],
+ };
+
+ const index = FlexSearch.create(indexCfg);
+ window.geekdocSearchIndex = index;
+
+ {{ range $index, $page := .Site.Pages }}
+ index.add({
+ 'id': {{ $index }},
+ 'href': '{{ $page.RelPermalink }}',
+ 'title': {{ (partial "title" $page) | jsonify }},
+ 'parent': {{ with $page.Parent }}{{ (partial "title" .) | jsonify }}{{ else }}''{{ end }},
+ 'content': {{ $page.Plain | jsonify }}
+ });
+ {{- end -}}
+})();
diff --git a/site/themes/geekdoc/assets/js/search.js b/site/themes/geekdoc/assets/js/search.js
new file mode 100644
index 0000000..afd434d
--- /dev/null
+++ b/site/themes/geekdoc/assets/js/search.js
@@ -0,0 +1,71 @@
+'use strict';
+
+{{ $searchDataFile := printf "js/%s.search-data.js" .Language.Lang }}
+{{ $searchData := resources.Get "js/search-data.js" | resources.ExecuteAsTemplate $searchDataFile . | resources.Minify | resources.Fingerprint }}
+
+(function() {
+ const input = document.querySelector('#gdoc-search-input');
+ const results = document.querySelector('#gdoc-search-results');
+
+ input.addEventListener('focus', init);
+ input.addEventListener('keyup', search);
+
+ function init() {
+ input.removeEventListener('focus', init); // init once
+ input.required = true;
+
+ loadScript('{{ index .Site.Data.assets "js/flexsearch.min.js" | relURL }}');
+ loadScript('{{ $searchData.RelPermalink }}', function() {
+ input.required = false;
+ search();
+ });
+ }
+
+ function search() {
+ while (results.firstChild) {
+ results.removeChild(results.firstChild);
+ }
+
+ if (!input.value) {
+ console.log("empty")
+ results.classList.remove("has-hits");
+ return;
+ }
+
+ const searchHits = window.geekdocSearchIndex.search(input.value, 10);
+
+ console.log(searchHits.length);
+ if (searchHits.length > 0) {
+ results.classList.add("has-hits");
+ } else {
+ results.classList.remove("has-hits");
+ }
+
+ searchHits.forEach(function(page) {
+ const li = document.createElement('li'),
+ a = li.appendChild(document.createElement('a'));
+
+ a.href = page.href;
+
+ {{ if .Site.Params.GeekdocSearchShowParent }}
+ a.textContent = page.parent ? page.parent + ' / ' + page.title : page.title;
+ {{ else }}
+ a.textContent = page.title;
+ {{ end }}
+
+ results.appendChild(li);
+ results.classList.add("DUMMY");
+ });
+
+ }
+
+ function loadScript(src, callback) {
+ const script = document.createElement('script');
+ script.defer = true;
+ script.async = false;
+ script.src = src;
+ script.onload = callback;
+
+ document.head.appendChild(script);
+ }
+})();
diff --git a/site/themes/geekdoc/assets/main.css b/site/themes/geekdoc/assets/main.css
new file mode 100644
index 0000000..07f86ac
--- /dev/null
+++ b/site/themes/geekdoc/assets/main.css
@@ -0,0 +1,1190 @@
+/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */
+html {
+ line-height: 1.15;
+ -webkit-text-size-adjust: 100%
+}
+body {
+ margin: 0
+}
+main {
+ display: block
+}
+h1 {
+ font-size: 2em;
+ margin: .67em 0
+}
+hr {
+ box-sizing: content-box;
+ height: 0;
+ overflow: visible
+}
+pre {
+ font-family: monospace,monospace;
+ font-size: 1em
+}
+a {
+ background-color: transparent
+}
+abbr[title] {
+ border-bottom: none;
+ text-decoration: underline;
+ -webkit-text-decoration: underline dotted;
+ text-decoration: underline dotted
+}
+b,
+strong {
+ font-weight: bolder
+}
+code,
+kbd,
+samp {
+ font-family: monospace,monospace;
+ font-size: 1em
+}
+small {
+ font-size: 80%
+}
+sub,
+sup {
+ font-size: 75%;
+ line-height: 0;
+ position: relative;
+ vertical-align: baseline
+}
+sub {
+ bottom: -.25em
+}
+sup {
+ top: -.5em
+}
+img {
+ border-style: none
+}
+button,
+input,
+optgroup,
+select,
+textarea {
+ font-family: inherit;
+ font-size: 100%;
+ line-height: 1.15;
+ margin: 0
+}
+button,
+input {
+ overflow: visible
+}
+button,
+select {
+ text-transform: none
+}
+[type=button],
+[type=reset],
+[type=submit],
+button {
+ -webkit-appearance: button
+}
+[type=button]::-moz-focus-inner,
+[type=reset]::-moz-focus-inner,
+[type=submit]::-moz-focus-inner,
+button::-moz-focus-inner {
+ border-style: none;
+ padding: 0
+}
+[type=button]:-moz-focusring,
+[type=reset]:-moz-focusring,
+[type=submit]:-moz-focusring,
+button:-moz-focusring {
+ outline: 1px dotted ButtonText
+}
+fieldset {
+ padding: .35em .75em .625em
+}
+legend {
+ box-sizing: border-box;
+ color: inherit;
+ display: table;
+ max-width: 100%;
+ padding: 0;
+ white-space: normal
+}
+progress {
+ vertical-align: baseline
+}
+textarea {
+ overflow: auto
+}
+[type=checkbox],
+[type=radio] {
+ box-sizing: border-box;
+ padding: 0
+}
+[type=number]::-webkit-inner-spin-button,
+[type=number]::-webkit-outer-spin-button {
+ height: auto
+}
+[type=search] {
+ -webkit-appearance: textfield;
+ outline-offset: -2px
+}
+[type=search]::-webkit-search-decoration {
+ -webkit-appearance: none
+}
+::-webkit-file-upload-button {
+ -webkit-appearance: button;
+ font: inherit
+}
+details {
+ display: block
+}
+summary {
+ display: list-item
+}
+template {
+ display: none
+}
+[hidden] {
+ display: none
+}
+.flex {
+ display: flex
+}
+.flex-auto {
+ flex: 1 1 auto
+}
+.flex-inline {
+ display: inline-flex
+}
+.flex-even {
+ flex: 1 1
+}
+.flex-wrap {
+ flex-wrap: wrap
+}
+.justify-start {
+ justify-content: flex-start
+}
+.justify-end {
+ justify-content: flex-end
+}
+.justify-center {
+ justify-content: center
+}
+.justify-between {
+ justify-content: space-between
+}
+.align-center {
+ align-items: center
+}
+.mx-auto {
+ margin: 0 auto
+}
+.text-center {
+ text-align: center
+}
+.hidden {
+ display: none
+}
+.badge-placeholder {
+ display: inline-block;
+ min-width: 4rem
+}
+@font-face {
+ font-family: "Liberation Sans";
+ src: url(fonts/LiberationSans-Bold.woff2) format("woff2"),url(fonts/LiberationSans-Bold.woff) format("woff");
+ font-weight: 700;
+ font-style: normal;
+ font-display: swap
+}
+@font-face {
+ font-family: "Liberation Sans";
+ src: url(fonts/LiberationSans-BoldItalic.woff2) format("woff2"),url(fonts/LiberationSans-BoldItalic.woff) format("woff");
+ font-weight: 700;
+ font-style: italic;
+ font-display: swap
+}
+@font-face {
+ font-family: "Liberation Sans";
+ src: url(fonts/LiberationSans-Italic.woff2) format("woff2"),url(fonts/LiberationSans-Italic.woff) format("woff");
+ font-weight: 400;
+ font-style: italic;
+ font-display: swap
+}
+@font-face {
+ font-family: "Liberation Sans";
+ src: url(fonts/LiberationSans.woff2) format("woff2"),url(fonts/LiberationSans.woff) format("woff");
+ font-weight: 400;
+ font-style: normal;
+ font-display: swap
+}
+@font-face {
+ font-family: "Liberation Mono";
+ src: url(fonts/LiberationMono.woff2) format("woff2"),url(fonts/LiberationMono.woff) format("woff");
+ font-weight: 400;
+ font-style: normal;
+ font-display: swap
+}
+@font-face {
+ font-family: "Droid Sans";
+ src: url(fonts/DroidSans.woff2) format("woff2"),url(fonts/DroidSans.woff) format("woff");
+ font-weight: 400;
+ font-style: normal;
+ font-display: swap
+}
+@font-face {
+ font-family: Metropolis;
+ src: url(fonts/Metropolis.woff2) format("woff2"),url(fonts/Metropolis.woff) format("woff");
+ font-weight: 400;
+ font-style: normal;
+ font-display: swap
+}
+@font-face {
+ font-family: GeekdocIcons;
+ src: url(fonts/GeekdocIcons.woff2) format("woff2"),url(fonts/GeekdocIcons.woff) format("woff");
+ font-weight: 400;
+ font-style: normal;
+ font-display: swap
+}
+body {
+ font-family: "Liberation Sans",sans-serif
+}
+.gdoc-error__title,
+code {
+ font-family: "Liberation Mono",monospace
+}
+.gdoc-header {
+ font-family: Metropolis,sans-serif
+}
+html {
+ font-size: 16px;
+ letter-spacing: .33px;
+ scroll-behavior: smooth
+}
+body,
+html {
+ min-width: 20rem;
+ overflow-x: hidden
+}
+body {
+ color: #343a40;
+ background: #fff;
+ font-weight: 400;
+ text-rendering: optimizeLegibility;
+ -webkit-font-smoothing: antialiased;
+ -moz-osx-font-smoothing: grayscale;
+ box-sizing: border-box
+}
+body * {
+ box-sizing: inherit
+}
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+ font-weight: 400;
+ display: flex;
+ align-items: center
+}
+h4,
+h5,
+h6 {
+ font-size: 1rem!important
+}
+a {
+ text-decoration: none;
+ color: #0a539a
+}
+a:hover {
+ text-decoration: underline
+}
+a:visited {
+ color: #7749bf
+}
+img {
+ vertical-align: middle
+}
+.fake-link:hover {
+ background-image: linear-gradient(#0a539a,#0a539a);
+ background-position: 0 100%;
+ background-size: 100% 1px;
+ background-repeat: no-repeat;
+ text-decoration: none
+}
+.wrapper {
+ display: flex;
+ flex-direction: column;
+ min-height: 100vh
+}
+.container {
+ width: 100%;
+ max-width: 80rem;
+ margin: 0 auto;
+ padding: 1rem
+}
+.icon {
+ display: inline-block;
+ width: 1em;
+ height: 1em;
+ top: .125em;
+ stroke-width: 0;
+ stroke: currentColor;
+ fill: currentColor;
+ position: relative
+}
+.gdoc-header {
+ background: #4186c9;
+ color: #fff;
+ border-bottom: .3em solid #2f333e
+}
+.gdoc-header__link,
+.gdoc-header__link:visited {
+ color: inherit
+}
+.gdoc-header__link:hover {
+ text-decoration: none
+}
+.gdoc-header .icon {
+ width: 2rem;
+ height: 2rem
+}
+.gdoc-brand {
+ font-size: 2rem
+}
+.gdoc-brand__img {
+ margin-right: 1rem
+}
+.gdoc-nav {
+ flex: 0 0 16rem;
+ font-size: .875rem
+}
+.gdoc-nav nav {
+ width: 16rem;
+ padding: 1rem 2rem 1rem 0
+}
+.gdoc-nav nav > ul > li > * {
+ font-weight: 400
+}
+.gdoc-nav nav > :first-child {
+ margin-top: 0
+}
+.gdoc-nav__control {
+ display: none;
+ margin: 0;
+ padding: 0
+}
+.gdoc-nav__control .icon.menu {
+ display: inline-block
+}
+.gdoc-nav__control .icon.arrow-back {
+ display: none
+}
+.gdoc-nav__list {
+ padding-left: 1em;
+ margin: 0;
+ padding: 0;
+ list-style: none;
+ -webkit-user-select: none;
+ -moz-user-select: none;
+ -ms-user-select: none;
+ user-select: none
+}
+.gdoc-nav__list ul {
+ padding-left: 1rem
+}
+.gdoc-nav__list li {
+ margin: .5rem 0
+}
+.gdoc-nav__list .icon {
+ margin-right: .25rem
+}
+.gdoc-nav__toggle {
+ display: none
+}
+.gdoc-nav__toggle ~ label {
+ cursor: pointer
+}
+.gdoc-nav__toggle ~ label .icon {
+ font-size: .7rem
+}
+.gdoc-nav__toggle:not(:checked) ~ label .icon.keyborad_arrow_down,
+.gdoc-nav__toggle:not(:checked) ~ ul {
+ display: none
+}
+.gdoc-nav__toggle:not(:checked) ~ label .icon.keyborad_arrow_left {
+ display: block
+}
+.gdoc-nav__toggle:checked ~ label .icon.keyborad_arrow_down,
+.gdoc-nav__toggle:checked ~ ul {
+ display: block
+}
+.gdoc-nav__toggle:checked ~ label .icon.keyborad_arrow_left {
+ display: none
+}
+.gdoc-nav__entry {
+ flex: 1;
+ color: #343a40
+}
+.gdoc-nav__entry.is-active,
+.gdoc-nav__entry:hover {
+ text-decoration: underline;
+ -webkit-text-decoration-style: dashed!important;
+ text-decoration-style: dashed!important
+}
+.gdoc-nav__entry:visited {
+ color: #343a40
+}
+.gdoc-nav--main > ul > li > label,
+.gdoc-nav--main > ul > li > label > a,
+.gdoc-nav--main > ul > li > span,
+.gdoc-nav--main > ul > li > span > a {
+ font-weight: 700
+}
+.gdoc-nav--more {
+ padding-top: .5rem
+}
+.gdoc-page {
+ min-width: 20rem;
+ flex-grow: 1;
+ padding: 1rem 0
+}
+.gdoc-page__footer,
+.gdoc-page__header {
+ margin-bottom: 1.2rem
+}
+.gdoc-page__footer .icon,
+.gdoc-page__header .icon {
+ color: #868e96
+}
+.gdoc-page__footer a,
+.gdoc-page__footer a:visited,
+.gdoc-page__header a,
+.gdoc-page__header a:visited {
+ color: #0a539a
+}
+.gdoc-page__header {
+ background: #f8f9fa;
+ padding: .5rem 1rem;
+ border-radius: .15rem
+}
+.gdoc-page__footer {
+ margin-top: 2rem
+}
+.gdoc-page__footer a:hover {
+ text-decoration: none
+}
+.gdoc-page__nav:hover {
+ background-image: linear-gradient(#0a539a,#0a539a);
+ background-position: 0 100%;
+ background-size: 100% 1px;
+ background-repeat: no-repeat
+}
+.gdoc-page__nav--prev:before {
+ font-family: GeekdocIcons;
+ content: "\ea13"
+}
+.gdoc-page__nav--next:after {
+ font-family: GeekdocIcons;
+ content: "\ea02"
+}
+.gdoc-page__anchorwrap:hover .gdoc-page__anchor .icon {
+ color: #adb5bd
+}
+.gdoc-page__anchor {
+ min-width: 30px
+}
+.gdoc-page__anchor--left {
+ position: absolute;
+ margin-left: -25px;
+ text-align: left
+}
+.gdoc-page__anchor--right {
+ text-align: right
+}
+.gdoc-page__anchor .icon {
+ width: 1.4rem;
+ height: 1.4rem;
+ color: transparent
+}
+.gdoc-post {
+ word-wrap: break-word;
+ border-top: 1px dashed #868e96;
+ padding: 2rem 0;
+ line-height: 1.5
+}
+.gdoc-post:first-of-type {
+ padding-top: 0
+}
+.gdoc-post__header h1 {
+ margin-top: 0
+}
+.gdoc-post__header a,
+.gdoc-post__header a:visited {
+ color: #343a40;
+ text-decoration: none
+}
+.gdoc-post__header a:hover {
+ background: 0 0;
+ text-decoration: underline;
+ color: #343a40
+}
+.gdoc-post__date {
+ margin: 1em 0
+}
+.gdoc-post__date .icon {
+ font-size: 1.2em
+}
+.gdoc-post:first-child {
+ border-top: 0
+}
+.gdoc-post:first-child h1 {
+ margin-top: 0
+}
+.gdoc-post__readmore {
+ margin: 1.5rem 0 2rem 0
+}
+.gdoc-post__readmore a:after {
+ font-family: GeekdocIcons;
+ content: "\ea02"
+}
+.gdoc-post__readmore a,
+.gdoc-post__readmore a:hover,
+.gdoc-post__readmore a:visited {
+ color: #0a539a;
+ text-decoration: none!important
+}
+.gdoc-footer {
+ background: #2f333e;
+ color: #fff
+}
+.gdoc-footer__item {
+ margin-right: 1em;
+ line-height: 2em
+}
+.gdoc-footer__link {
+ color: #ffa31e
+}
+.gdoc-footer__link:visited {
+ color: #ffa31e
+}
+.gdoc-search {
+ position: relative
+}
+.gdoc-search .icon {
+ position: absolute;
+ top: .625em;
+ left: .5rem;
+ color: #868e96;
+ width: 1rem;
+ height: 1rem
+}
+.gdoc-search .has-hits {
+ border-bottom: 1px dashed #868e96
+}
+.gdoc-search::after {
+ display: block;
+ content: "";
+ clear: both
+}
+.gdoc-search__input {
+ width: 100%;
+ padding: .5rem;
+ padding-left: 2rem;
+ border: 1px solid #e9ecef;
+ border-radius: .15rem;
+ background: #f8f9fa;
+ color: #343a40
+}
+.gdoc-search__input:required + .gdoc-search__input__spinner {
+ display: block
+}
+.gdoc-search__spinner {
+ position: absolute;
+ margin: .5rem;
+ right: 0;
+ top: 0;
+ width: 1rem;
+ height: 1rem;
+ border: 1px solid transparent;
+ border-top-color: #343a40;
+ border-radius: 50%;
+ -webkit-animation: spin 1s ease infinite;
+ animation: spin 1s ease infinite
+}
+@-webkit-keyframes spin {
+ 100% {
+ transform: rotate(360deg)
+ }
+}
+@keyframes spin {
+ 100% {
+ transform: rotate(360deg)
+ }
+}
+.gdoc-search__list {
+ padding-left: 1em;
+ margin: 0;
+ padding: .5rem 0;
+ list-style: none
+}
+.gdoc-search__list ul {
+ padding-left: 1rem
+}
+.gdoc-search__list li {
+ margin: .25rem 0
+}
+.gdoc-search__list .icon {
+ margin-right: .25rem
+}
+.gdoc-error {
+ padding: 6rem 1rem;
+ margin: 0 auto;
+ max-width: 45em
+}
+.gdoc-error .icon {
+ width: 6rem;
+ height: 6rem;
+ color: #495057
+}
+.gdoc-error__link,
+.gdoc-error__link:visited {
+ color: #0a539a
+}
+.gdoc-error__message {
+ padding-left: 4rem
+}
+.gdoc-error__line {
+ padding: .5rem 0
+}
+.gdoc-error__title {
+ font-size: 4rem
+}
+.gdoc-error__code {
+ font-weight: bolder
+}
+.gdoc-toc__level--1 ul ul,
+.gdoc-toc__level--2 ul ul ul,
+.gdoc-toc__level--3 ul ul ul ul,
+.gdoc-toc__level--4 ul ul ul ul ul,
+.gdoc-toc__level--5 ul ul ul ul ul ul,
+.gdoc-toc__level--6 ul ul ul ul ul ul ul {
+ display: none
+}
+.gdoc-toc a,
+.gdoc-toc a:visited {
+ color: #0a539a
+}
+.gdoc-nav nav,
+.gdoc-page,
+.markdown {
+ transition: .2s ease-in-out;
+ transition-property: transform,margin-left,opacity;
+ will-change: transform,margin-left
+}
+.gdoc-markdown {
+ line-height: 1.6em
+}
+.gdoc-markdown > :first-child {
+ margin-top: 0
+}
+.gdoc-markdown--nested :first-child {
+ margin-top: 0
+}
+.gdoc-markdown--nested > :last-child {
+ margin-bottom: 0
+}
+.gdoc-markdown h1,
+.gdoc-markdown h2,
+.gdoc-markdown h3,
+.gdoc-markdown h4,
+.gdoc-markdown h5,
+.gdoc-markdown h6 {
+ font-weight: 600
+}
+.gdoc-markdown h1 > code,
+.gdoc-markdown h2 > code,
+.gdoc-markdown h3 > code,
+.gdoc-markdown h4 > code,
+.gdoc-markdown h5 > code,
+.gdoc-markdown h6 > code {
+ border-top: 3px solid #dee2e6;
+ font-size: .75em!important
+}
+.gdoc-markdown h4 > code,
+.gdoc-markdown h5 > code,
+.gdoc-markdown h6 > code {
+ font-size: .8rem!important
+}
+.gdoc-markdown b,
+.gdoc-markdown optgroup,
+.gdoc-markdown strong {
+ font-weight: bolder
+}
+.gdoc-markdown a {
+ text-decoration: none;
+ border-bottom: 1px solid transparent;
+ line-height: 1em
+}
+.gdoc-markdown a:hover {
+ text-decoration: underline
+}
+.gdoc-markdown img {
+ max-width: 100%
+}
+.gdoc-markdown blockquote {
+ margin: 1rem 0;
+ padding: .5rem 1rem .5rem .75rem;
+ border-left: .25rem solid #e9ecef;
+ border-radius: .15rem
+}
+.gdoc-markdown blockquote :first-child {
+ margin-top: 0
+}
+.gdoc-markdown blockquote :last-child {
+ margin-bottom: 0
+}
+.gdoc-markdown table {
+ overflow: auto;
+ display: block;
+ border-spacing: 0;
+ border-collapse: collapse;
+ margin-top: 1rem;
+ margin-bottom: 1rem
+}
+.gdoc-markdown table tr td,
+.gdoc-markdown table tr th {
+ padding: .5rem 1rem;
+ border: 1px solid #e9ecef
+}
+.gdoc-markdown table tr:nth-child(2n) {
+ background: #f8f9fa
+}
+.gdoc-markdown hr {
+ height: 1px;
+ border: none;
+ background: #e9ecef
+}
+.gdoc-markdown ol,
+.gdoc-markdown ul {
+ padding-left: 2rem
+}
+.gdoc-markdown dl dt {
+ font-weight: bolder;
+ margin-top: 1rem
+}
+.gdoc-markdown dl dd {
+ margin-left: 2rem
+}
+.gdoc-markdown pre {
+ margin: 1rem 0
+}
+.gdoc-markdown code {
+ background-color: rgba(233,236,239,.5);
+ font-size: .85em;
+ line-height: 1.45;
+ padding: .2em .4em
+}
+.gdoc-markdown > pre code {
+ display: block;
+ padding: 1rem;
+ width: 100%;
+ overflow: auto
+}
+.chroma {
+ background-color: #fff;
+ color: #555;
+ margin: 1rem 0
+}
+.chroma code {
+ background-color: rgba(233,236,239,.5);
+ display: block;
+ line-height: 1.45;
+ font-size: .85em;
+ border-radius: .15rem
+}
+.chroma .lntable td:first-child code {
+ border-radius: 0;
+ border-top-left-radius: .15rem;
+ border-bottom-left-radius: .15rem
+}
+.chroma .lntable td:nth-child(2) code {
+ border-radius: 0;
+ border-top-right-radius: .15rem;
+ border-bottom-right-radius: .15rem;
+ padding-left: .5em
+}
+.chroma .lntable td:nth-child(2) code .hl {
+ width: auto;
+ margin-left: -.5em;
+ padding: 0 .5em
+}
+.highlight pre.chroma {
+ margin: 0
+}
+.highlight > pre.chroma code {
+ padding: 1rem;
+ width: 100%;
+ overflow: auto
+}
+.chroma .err {
+ color: #a61717;
+ background-color: #e3d2d2
+}
+.chroma .lntd {
+ vertical-align: top;
+ padding: 0;
+ margin: 0;
+ border: 0
+}
+.chroma .lntable {
+ border-spacing: 0;
+ padding: 0;
+ margin: 0;
+ border: 0;
+ width: 100%;
+ overflow: auto;
+ display: block
+}
+.chroma .lntable td:first-child code {
+ background-color: #e9ecef;
+ border-right: 1px solid #dcdfe3;
+ padding: .5em 0
+}
+.chroma .lntable td code {
+ padding: .5em 0
+}
+.chroma .lntable td:nth-child(2) {
+ width: 100%;
+ margin-left: 2em
+}
+.chroma .hl {
+ display: block;
+ width: 100%;
+ background-color: #ffc
+}
+.chroma .lnt {
+ padding: 0 .8em
+}
+.chroma .ln {
+ margin-right: .4em;
+ padding: 0 .4em 0 .4em
+}
+.chroma .k {
+ color: #000;
+ font-weight: 700
+}
+.chroma .kc {
+ color: #000;
+ font-weight: 700
+}
+.chroma .kd {
+ color: #000;
+ font-weight: 700
+}
+.chroma .kn {
+ color: #000;
+ font-weight: 700
+}
+.chroma .kp {
+ color: #000;
+ font-weight: 700
+}
+.chroma .kr {
+ color: #000;
+ font-weight: 700
+}
+.chroma .kt {
+ color: #458;
+ font-weight: 700
+}
+.chroma .na {
+ color: teal
+}
+.chroma .nb {
+ color: #0086b3
+}
+.chroma .bp {
+ color: #999
+}
+.chroma .nc {
+ color: #458;
+ font-weight: 700
+}
+.chroma .no {
+ color: teal
+}
+.chroma .nd {
+ color: #3c5d5d;
+ font-weight: 700
+}
+.chroma .ni {
+ color: purple
+}
+.chroma .ne {
+ color: #900;
+ font-weight: 700
+}
+.chroma .nf {
+ color: #900;
+ font-weight: 700
+}
+.chroma .nl {
+ color: #900;
+ font-weight: 700
+}
+.chroma .nn {
+ color: #555
+}
+.chroma .nt {
+ color: navy
+}
+.chroma .nv {
+ color: teal
+}
+.chroma .vc {
+ color: teal
+}
+.chroma .vg {
+ color: teal
+}
+.chroma .vi {
+ color: teal
+}
+.chroma .s {
+ color: #d14
+}
+.chroma .sa {
+ color: #d14
+}
+.chroma .sb {
+ color: #d14
+}
+.chroma .sc {
+ color: #d14
+}
+.chroma .dl {
+ color: #d14
+}
+.chroma .sd {
+ color: #d14
+}
+.chroma .s2 {
+ color: #d14
+}
+.chroma .se {
+ color: #d14
+}
+.chroma .sh {
+ color: #d14
+}
+.chroma .si {
+ color: #d14
+}
+.chroma .sx {
+ color: #d14
+}
+.chroma .sr {
+ color: #009926
+}
+.chroma .s1 {
+ color: #d14
+}
+.chroma .ss {
+ color: #990073
+}
+.chroma .m {
+ color: #099
+}
+.chroma .mb {
+ color: #099
+}
+.chroma .mf {
+ color: #099
+}
+.chroma .mh {
+ color: #099
+}
+.chroma .mi {
+ color: #099
+}
+.chroma .il {
+ color: #099
+}
+.chroma .mo {
+ color: #099
+}
+.chroma .o {
+ color: #000;
+ font-weight: 700
+}
+.chroma .ow {
+ color: #000;
+ font-weight: 700
+}
+.chroma .c {
+ color: #998;
+ font-style: italic
+}
+.chroma .ch {
+ color: #998;
+ font-style: italic
+}
+.chroma .cm {
+ color: #998;
+ font-style: italic
+}
+.chroma .c1 {
+ color: #998;
+ font-style: italic
+}
+.chroma .cs {
+ color: #999;
+ font-weight: 700;
+ font-style: italic
+}
+.chroma .cp {
+ color: #999;
+ font-weight: 700;
+ font-style: italic
+}
+.chroma .cpf {
+ color: #999;
+ font-weight: 700;
+ font-style: italic
+}
+.chroma .gd {
+ color: #000;
+ background-color: #fdd
+}
+.chroma .ge {
+ color: #000;
+ font-style: italic
+}
+.chroma .gr {
+ color: #a00
+}
+.chroma .gh {
+ color: #999
+}
+.chroma .gi {
+ color: #000;
+ background-color: #dfd
+}
+.chroma .go {
+ color: #888
+}
+.chroma .gp {
+ color: #555
+}
+.chroma .gs {
+ font-weight: 700
+}
+.chroma .gu {
+ color: #aaa
+}
+.chroma .gt {
+ color: #a00
+}
+.chroma .gl {
+ text-decoration: underline
+}
+.chroma .w {
+ color: #bbb
+}
+.gdoc-expand {
+ margin-top: 1rem;
+ margin-bottom: 1rem;
+ border: 1px solid #e9ecef;
+ border-radius: .15rem;
+ overflow: hidden
+}
+.gdoc-expand__head {
+ background: #f8f9fa;
+ padding: .5rem 1rem;
+ cursor: pointer
+}
+.gdoc-expand__content {
+ display: none;
+ padding: 1rem
+}
+.gdoc-expand__control:checked + .gdoc-expand__content {
+ display: block
+}
+.gdoc-expand .gdoc-page__anchor {
+ display: none
+}
+.gdoc-tabs {
+ margin-top: 1rem;
+ margin-bottom: 1rem;
+ border: 1px solid #e9ecef;
+ border-radius: .15rem;
+ overflow: hidden;
+ display: flex;
+ flex-wrap: wrap
+}
+.gdoc-tabs__label {
+ display: inline-block;
+ padding: .5rem 1rem;
+ border-bottom: 1px transparent;
+ cursor: pointer
+}
+.gdoc-tabs__content {
+ order: 999;
+ width: 100%;
+ border-top: 1px solid #f8f9fa;
+ padding: 1rem;
+ display: none
+}
+.gdoc-tabs__control:checked + .gdoc-tabs__label {
+ border-bottom: 1px solid #0a539a
+}
+.gdoc-tabs__control:checked + .gdoc-tabs__label + .gdoc-tabs__content {
+ display: block
+}
+.gdoc-columns {
+ margin-left: -1rem;
+ margin-right: -1rem
+}
+.gdoc-columns__content {
+ margin: 1rem 0;
+ min-width: 13.2rem;
+ padding: 0 1rem
+}
+.gdoc-columns .gdoc-page__anchor {
+ display: none
+}
+.gdoc-button {
+ display: inline-block;
+ color: #495057;
+ border: 1px solid #adb5bd;
+ border-radius: .15rem;
+ margin: .5rem 0;
+ cursor: pointer
+}
+.gdoc-button__link {
+ display: inline-block;
+ color: inherit!important;
+ text-decoration: none!important;
+ padding: .25rem 1rem
+}
+.gdoc-button:hover {
+ background: rgba(65,134,201,.9);
+ border-color: #4186c9;
+ color: #f8f9fa
+}
+.gdoc-hint.info {
+ border-left-color: #6bf;
+ background-color: rgba(102,187,255,.1)
+}
+.gdoc-hint.warning {
+ border-left-color: #fd6;
+ background-color: rgba(255,221,102,.1)
+}
+.gdoc-hint.danger {
+ border-left-color: #f66;
+ background-color: rgba(255,102,102,.1)
+}
+.gdoc-mermaid {
+ font-family: "Liberation Sans",sans-serif
+}
\ No newline at end of file
diff --git a/site/themes/geekdoc/assets/main.min.css b/site/themes/geekdoc/assets/main.min.css
new file mode 100644
index 0000000..93ca6f2
--- /dev/null
+++ b/site/themes/geekdoc/assets/main.min.css
@@ -0,0 +1 @@
+/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */html{line-height:1.15;-webkit-text-size-adjust:100%}body{margin:0}main{display:block}h1{font-size:2em;margin:.67em 0}hr{box-sizing:content-box;height:0;overflow:visible}pre{font-family:monospace,monospace;font-size:1em}a{background-color:transparent}abbr[title]{border-bottom:none;text-decoration:underline;-webkit-text-decoration:underline dotted;text-decoration:underline dotted}b,strong{font-weight:bolder}code,kbd,samp{font-family:monospace,monospace;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}img{border-style:none}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0}button,input{overflow:visible}button,select{text-transform:none}[type=button],[type=reset],[type=submit],button{-webkit-appearance:button}[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner,button::-moz-focus-inner{border-style:none;padding:0}[type=button]:-moz-focusring,[type=reset]:-moz-focusring,[type=submit]:-moz-focusring,button:-moz-focusring{outline:1px dotted ButtonText}fieldset{padding:.35em .75em .625em}legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal}progress{vertical-align:baseline}textarea{overflow:auto}[type=checkbox],[type=radio]{box-sizing:border-box;padding:0}[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}[type=search]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}details{display:block}summary{display:list-item}template{display:none}[hidden]{display:none}.flex{display:flex}.flex-auto{flex:1 1 auto}.flex-inline{display:inline-flex}.flex-even{flex:1 1}.flex-wrap{flex-wrap:wrap}.justify-start{justify-content:flex-start}.justify-end{justify-content:flex-end}.justify-center{justify-content:center}.justify-between{justify-content:space-between}.align-center{align-items:center}.mx-auto{margin:0 auto}.text-center{text-align:center}.hidden{display:none}.badge-placeholder{display:inline-block;min-width:4rem}@font-face{font-family:"Liberation Sans";src:url(fonts/LiberationSans-Bold.woff2) format("woff2"),url(fonts/LiberationSans-Bold.woff) format("woff");font-weight:700;font-style:normal;font-display:swap}@font-face{font-family:"Liberation Sans";src:url(fonts/LiberationSans-BoldItalic.woff2) format("woff2"),url(fonts/LiberationSans-BoldItalic.woff) format("woff");font-weight:700;font-style:italic;font-display:swap}@font-face{font-family:"Liberation Sans";src:url(fonts/LiberationSans-Italic.woff2) format("woff2"),url(fonts/LiberationSans-Italic.woff) format("woff");font-weight:400;font-style:italic;font-display:swap}@font-face{font-family:"Liberation Sans";src:url(fonts/LiberationSans.woff2) format("woff2"),url(fonts/LiberationSans.woff) format("woff");font-weight:400;font-style:normal;font-display:swap}@font-face{font-family:"Liberation Mono";src:url(fonts/LiberationMono.woff2) format("woff2"),url(fonts/LiberationMono.woff) format("woff");font-weight:400;font-style:normal;font-display:swap}@font-face{font-family:"Droid Sans";src:url(fonts/DroidSans.woff2) format("woff2"),url(fonts/DroidSans.woff) format("woff");font-weight:400;font-style:normal;font-display:swap}@font-face{font-family:Metropolis;src:url(fonts/Metropolis.woff2) format("woff2"),url(fonts/Metropolis.woff) format("woff");font-weight:400;font-style:normal;font-display:swap}@font-face{font-family:GeekdocIcons;src:url(fonts/GeekdocIcons.woff2) format("woff2"),url(fonts/GeekdocIcons.woff) format("woff");font-weight:400;font-style:normal;font-display:swap}body{font-family:"Liberation Sans",sans-serif}.gdoc-error__title,code{font-family:"Liberation Mono",monospace}.gdoc-header{font-family:Metropolis,sans-serif}html{font-size:16px;letter-spacing:.33px;scroll-behavior:smooth}body,html{min-width:20rem;overflow-x:hidden}body{color:#343a40;background:#fff;font-weight:400;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;box-sizing:border-box}body *{box-sizing:inherit}h1,h2,h3,h4,h5,h6{font-weight:400;display:flex;align-items:center}h4,h5,h6{font-size:1rem!important}a{text-decoration:none;color:#0a539a}a:hover{text-decoration:underline}a:visited{color:#7749bf}img{vertical-align:middle}.fake-link:hover{background-image:linear-gradient(#0a539a,#0a539a);background-position:0 100%;background-size:100% 1px;background-repeat:no-repeat;text-decoration:none}.wrapper{display:flex;flex-direction:column;min-height:100vh}.container{width:100%;max-width:80rem;margin:0 auto;padding:1rem}.icon{display:inline-block;width:1em;height:1em;top:.125em;stroke-width:0;stroke:currentColor;fill:currentColor;position:relative}.gdoc-header{background:#4186c9;color:#fff;border-bottom:.3em solid #2f333e}.gdoc-header__link,.gdoc-header__link:visited{color:inherit}.gdoc-header__link:hover{text-decoration:none}.gdoc-header .icon{width:2rem;height:2rem}.gdoc-brand{font-size:2rem}.gdoc-brand__img{margin-right:1rem}.gdoc-nav{flex:0 0 16rem;font-size:.875rem}.gdoc-nav nav{width:16rem;padding:1rem 2rem 1rem 0}.gdoc-nav nav>ul>li>*{font-weight:400}.gdoc-nav nav>:first-child{margin-top:0}.gdoc-nav__control{display:none;margin:0;padding:0}.gdoc-nav__control .icon.menu{display:inline-block}.gdoc-nav__control .icon.arrow-back{display:none}.gdoc-nav__list{padding-left:1em;margin:0;padding:0;list-style:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.gdoc-nav__list ul{padding-left:1rem}.gdoc-nav__list li{margin:.5rem 0}.gdoc-nav__list .icon{margin-right:.25rem}.gdoc-nav__toggle{display:none}.gdoc-nav__toggle~label{cursor:pointer}.gdoc-nav__toggle~label .icon{font-size:.7rem}.gdoc-nav__toggle:not(:checked)~label .icon.keyborad_arrow_down,.gdoc-nav__toggle:not(:checked)~ul{display:none}.gdoc-nav__toggle:not(:checked)~label .icon.keyborad_arrow_left{display:block}.gdoc-nav__toggle:checked~label .icon.keyborad_arrow_down,.gdoc-nav__toggle:checked~ul{display:block}.gdoc-nav__toggle:checked~label .icon.keyborad_arrow_left{display:none}.gdoc-nav__entry{flex:1;color:#343a40}.gdoc-nav__entry.is-active,.gdoc-nav__entry:hover{text-decoration:underline;-webkit-text-decoration-style:dashed!important;text-decoration-style:dashed!important}.gdoc-nav__entry:visited{color:#343a40}.gdoc-nav--main>ul>li>label,.gdoc-nav--main>ul>li>label>a,.gdoc-nav--main>ul>li>span,.gdoc-nav--main>ul>li>span>a{font-weight:700}.gdoc-nav--more{padding-top:.5rem}.gdoc-page{min-width:20rem;flex-grow:1;padding:1rem 0}.gdoc-page__footer,.gdoc-page__header{margin-bottom:1.2rem}.gdoc-page__footer .icon,.gdoc-page__header .icon{color:#868e96}.gdoc-page__footer a,.gdoc-page__footer a:visited,.gdoc-page__header a,.gdoc-page__header a:visited{color:#0a539a}.gdoc-page__header{background:#f8f9fa;padding:.5rem 1rem;border-radius:.15rem}.gdoc-page__footer{margin-top:2rem}.gdoc-page__footer a:hover{text-decoration:none}.gdoc-page__nav:hover{background-image:linear-gradient(#0a539a,#0a539a);background-position:0 100%;background-size:100% 1px;background-repeat:no-repeat}.gdoc-page__nav--prev:before{font-family:GeekdocIcons;content:"\ea13"}.gdoc-page__nav--next:after{font-family:GeekdocIcons;content:"\ea02"}.gdoc-page__anchorwrap:hover .gdoc-page__anchor .icon{color:#adb5bd}.gdoc-page__anchor{min-width:30px}.gdoc-page__anchor--left{position:absolute;margin-left:-25px;text-align:left}.gdoc-page__anchor--right{text-align:right}.gdoc-page__anchor .icon{width:1.4rem;height:1.4rem;color:transparent}.gdoc-post{word-wrap:break-word;border-top:1px dashed #868e96;padding:2rem 0;line-height:1.5}.gdoc-post:first-of-type{padding-top:0}.gdoc-post__header h1{margin-top:0}.gdoc-post__header a,.gdoc-post__header a:visited{color:#343a40;text-decoration:none}.gdoc-post__header a:hover{background:0 0;text-decoration:underline;color:#343a40}.gdoc-post__date{margin:1em 0}.gdoc-post__date .icon{font-size:1.2em}.gdoc-post:first-child{border-top:0}.gdoc-post:first-child h1{margin-top:0}.gdoc-post__readmore{margin:1.5rem 0 2rem 0}.gdoc-post__readmore a:after{font-family:GeekdocIcons;content:"\ea02"}.gdoc-post__readmore a,.gdoc-post__readmore a:hover,.gdoc-post__readmore a:visited{color:#0a539a;text-decoration:none!important}.gdoc-footer{background:#2f333e;color:#fff}.gdoc-footer__item{margin-right:1em;line-height:2em}.gdoc-footer__link{color:#ffa31e}.gdoc-footer__link:visited{color:#ffa31e}.gdoc-search{position:relative}.gdoc-search .icon{position:absolute;top:.625em;left:.5rem;color:#868e96;width:1rem;height:1rem}.gdoc-search .has-hits{border-bottom:1px dashed #868e96}.gdoc-search::after{display:block;content:"";clear:both}.gdoc-search__input{width:100%;padding:.5rem;padding-left:2rem;border:1px solid #e9ecef;border-radius:.15rem;background:#f8f9fa;color:#343a40}.gdoc-search__input:required+.gdoc-search__input__spinner{display:block}.gdoc-search__spinner{position:absolute;margin:.5rem;right:0;top:0;width:1rem;height:1rem;border:1px solid transparent;border-top-color:#343a40;border-radius:50%;-webkit-animation:spin 1s ease infinite;animation:spin 1s ease infinite}@-webkit-keyframes spin{100%{transform:rotate(360deg)}}@keyframes spin{100%{transform:rotate(360deg)}}.gdoc-search__list{padding-left:1em;margin:0;padding:.5rem 0;list-style:none}.gdoc-search__list ul{padding-left:1rem}.gdoc-search__list li{margin:.25rem 0}.gdoc-search__list .icon{margin-right:.25rem}.gdoc-error{padding:6rem 1rem;margin:0 auto;max-width:45em}.gdoc-error .icon{width:6rem;height:6rem;color:#495057}.gdoc-error__link,.gdoc-error__link:visited{color:#0a539a}.gdoc-error__message{padding-left:4rem}.gdoc-error__line{padding:.5rem 0}.gdoc-error__title{font-size:4rem}.gdoc-error__code{font-weight:bolder}.gdoc-toc__level--1 ul ul,.gdoc-toc__level--2 ul ul ul,.gdoc-toc__level--3 ul ul ul ul,.gdoc-toc__level--4 ul ul ul ul ul,.gdoc-toc__level--5 ul ul ul ul ul ul,.gdoc-toc__level--6 ul ul ul ul ul ul ul{display:none}.gdoc-toc a,.gdoc-toc a:visited{color:#0a539a}.gdoc-nav nav,.gdoc-page,.markdown{transition:.2s ease-in-out;transition-property:transform,margin-left,opacity;will-change:transform,margin-left}.gdoc-markdown{line-height:1.6em}.gdoc-markdown>:first-child{margin-top:0}.gdoc-markdown--nested :first-child{margin-top:0}.gdoc-markdown--nested>:last-child{margin-bottom:0}.gdoc-markdown h1,.gdoc-markdown h2,.gdoc-markdown h3,.gdoc-markdown h4,.gdoc-markdown h5,.gdoc-markdown h6{font-weight:600}.gdoc-markdown h1>code,.gdoc-markdown h2>code,.gdoc-markdown h3>code,.gdoc-markdown h4>code,.gdoc-markdown h5>code,.gdoc-markdown h6>code{border-top:3px solid #dee2e6;font-size:.75em!important}.gdoc-markdown h4>code,.gdoc-markdown h5>code,.gdoc-markdown h6>code{font-size:.8rem!important}.gdoc-markdown b,.gdoc-markdown optgroup,.gdoc-markdown strong{font-weight:bolder}.gdoc-markdown a{text-decoration:none;border-bottom:1px solid transparent;line-height:1em}.gdoc-markdown a:hover{text-decoration:underline}.gdoc-markdown img{max-width:100%}.gdoc-markdown blockquote{margin:1rem 0;padding:.5rem 1rem .5rem .75rem;border-left:.25rem solid #e9ecef;border-radius:.15rem}.gdoc-markdown blockquote :first-child{margin-top:0}.gdoc-markdown blockquote :last-child{margin-bottom:0}.gdoc-markdown table{overflow:auto;display:block;border-spacing:0;border-collapse:collapse;margin-top:1rem;margin-bottom:1rem}.gdoc-markdown table tr td,.gdoc-markdown table tr th{padding:.5rem 1rem;border:1px solid #e9ecef}.gdoc-markdown table tr:nth-child(2n){background:#f8f9fa}.gdoc-markdown hr{height:1px;border:none;background:#e9ecef}.gdoc-markdown ol,.gdoc-markdown ul{padding-left:2rem}.gdoc-markdown dl dt{font-weight:bolder;margin-top:1rem}.gdoc-markdown dl dd{margin-left:2rem}.gdoc-markdown pre{margin:1rem 0}.gdoc-markdown code{background-color:rgba(233,236,239,.5);font-size:.85em;line-height:1.45;padding:.2em .4em}.gdoc-markdown>pre code{display:block;padding:1rem;width:100%;overflow:auto}.chroma{background-color:#fff;color:#555;margin:1rem 0}.chroma code{background-color:rgba(233,236,239,.5);display:block;line-height:1.45;font-size:.85em;border-radius:.15rem}.chroma .lntable td:first-child code{border-radius:0;border-top-left-radius:.15rem;border-bottom-left-radius:.15rem}.chroma .lntable td:nth-child(2) code{border-radius:0;border-top-right-radius:.15rem;border-bottom-right-radius:.15rem;padding-left:.5em}.chroma .lntable td:nth-child(2) code .hl{width:auto;margin-left:-.5em;padding:0 .5em}.highlight pre.chroma{margin:0}.highlight>pre.chroma code{padding:1rem;width:100%;overflow:auto}.chroma .err{color:#a61717;background-color:#e3d2d2}.chroma .lntd{vertical-align:top;padding:0;margin:0;border:0}.chroma .lntable{border-spacing:0;padding:0;margin:0;border:0;width:100%;overflow:auto;display:block}.chroma .lntable td:first-child code{background-color:#e9ecef;border-right:1px solid #dcdfe3;padding:.5em 0}.chroma .lntable td code{padding:.5em 0}.chroma .lntable td:nth-child(2){width:100%;margin-left:2em}.chroma .hl{display:block;width:100%;background-color:#ffc}.chroma .lnt{padding:0 .8em}.chroma .ln{margin-right:.4em;padding:0 .4em 0 .4em}.chroma .k{color:#000;font-weight:700}.chroma .kc{color:#000;font-weight:700}.chroma .kd{color:#000;font-weight:700}.chroma .kn{color:#000;font-weight:700}.chroma .kp{color:#000;font-weight:700}.chroma .kr{color:#000;font-weight:700}.chroma .kt{color:#458;font-weight:700}.chroma .na{color:teal}.chroma .nb{color:#0086b3}.chroma .bp{color:#999}.chroma .nc{color:#458;font-weight:700}.chroma .no{color:teal}.chroma .nd{color:#3c5d5d;font-weight:700}.chroma .ni{color:purple}.chroma .ne{color:#900;font-weight:700}.chroma .nf{color:#900;font-weight:700}.chroma .nl{color:#900;font-weight:700}.chroma .nn{color:#555}.chroma .nt{color:navy}.chroma .nv{color:teal}.chroma .vc{color:teal}.chroma .vg{color:teal}.chroma .vi{color:teal}.chroma .s{color:#d14}.chroma .sa{color:#d14}.chroma .sb{color:#d14}.chroma .sc{color:#d14}.chroma .dl{color:#d14}.chroma .sd{color:#d14}.chroma .s2{color:#d14}.chroma .se{color:#d14}.chroma .sh{color:#d14}.chroma .si{color:#d14}.chroma .sx{color:#d14}.chroma .sr{color:#009926}.chroma .s1{color:#d14}.chroma .ss{color:#990073}.chroma .m{color:#099}.chroma .mb{color:#099}.chroma .mf{color:#099}.chroma .mh{color:#099}.chroma .mi{color:#099}.chroma .il{color:#099}.chroma .mo{color:#099}.chroma .o{color:#000;font-weight:700}.chroma .ow{color:#000;font-weight:700}.chroma .c{color:#998;font-style:italic}.chroma .ch{color:#998;font-style:italic}.chroma .cm{color:#998;font-style:italic}.chroma .c1{color:#998;font-style:italic}.chroma .cs{color:#999;font-weight:700;font-style:italic}.chroma .cp{color:#999;font-weight:700;font-style:italic}.chroma .cpf{color:#999;font-weight:700;font-style:italic}.chroma .gd{color:#000;background-color:#fdd}.chroma .ge{color:#000;font-style:italic}.chroma .gr{color:#a00}.chroma .gh{color:#999}.chroma .gi{color:#000;background-color:#dfd}.chroma .go{color:#888}.chroma .gp{color:#555}.chroma .gs{font-weight:700}.chroma .gu{color:#aaa}.chroma .gt{color:#a00}.chroma .gl{text-decoration:underline}.chroma .w{color:#bbb}.gdoc-expand{margin-top:1rem;margin-bottom:1rem;border:1px solid #e9ecef;border-radius:.15rem;overflow:hidden}.gdoc-expand__head{background:#f8f9fa;padding:.5rem 1rem;cursor:pointer}.gdoc-expand__content{display:none;padding:1rem}.gdoc-expand__control:checked+.gdoc-expand__content{display:block}.gdoc-expand .gdoc-page__anchor{display:none}.gdoc-tabs{margin-top:1rem;margin-bottom:1rem;border:1px solid #e9ecef;border-radius:.15rem;overflow:hidden;display:flex;flex-wrap:wrap}.gdoc-tabs__label{display:inline-block;padding:.5rem 1rem;border-bottom:1px transparent;cursor:pointer}.gdoc-tabs__content{order:999;width:100%;border-top:1px solid #f8f9fa;padding:1rem;display:none}.gdoc-tabs__control:checked+.gdoc-tabs__label{border-bottom:1px solid #0a539a}.gdoc-tabs__control:checked+.gdoc-tabs__label+.gdoc-tabs__content{display:block}.gdoc-columns{margin-left:-1rem;margin-right:-1rem}.gdoc-columns__content{margin:1rem 0;min-width:13.2rem;padding:0 1rem}.gdoc-columns .gdoc-page__anchor{display:none}.gdoc-button{display:inline-block;color:#495057;border:1px solid #adb5bd;border-radius:.15rem;margin:.5rem 0;cursor:pointer}.gdoc-button__link{display:inline-block;color:inherit!important;text-decoration:none!important;padding:.25rem 1rem}.gdoc-button:hover{background:rgba(65,134,201,.9);border-color:#4186c9;color:#f8f9fa}.gdoc-hint.info{border-left-color:#6bf;background-color:rgba(102,187,255,.1)}.gdoc-hint.warning{border-left-color:#fd6;background-color:rgba(255,221,102,.1)}.gdoc-hint.danger{border-left-color:#f66;background-color:rgba(255,102,102,.1)}.gdoc-mermaid{font-family:"Liberation Sans",sans-serif}
\ No newline at end of file
diff --git a/site/themes/geekdoc/assets/mobile.css b/site/themes/geekdoc/assets/mobile.css
new file mode 100644
index 0000000..c0b05c6
--- /dev/null
+++ b/site/themes/geekdoc/assets/mobile.css
@@ -0,0 +1,55 @@
+@media screen and (max-width:39rem) {
+ .gdoc-nav {
+ margin-left: -16rem;
+ font-size: 16px
+ }
+ .gdoc-nav__control {
+ display: inline-block
+ }
+ .gdoc-header .icon {
+ width: 1.5rem;
+ height: 1.5rem
+ }
+ .gdoc-brand {
+ font-size: 1.5rem
+ }
+ .gdoc-brand__img {
+ display: none
+ }
+ .gdoc-error {
+ padding: 6rem 1rem
+ }
+ .gdoc-error .icon {
+ width: 4rem;
+ height: 4rem
+ }
+ .gdoc-error__message {
+ padding-left: 2rem
+ }
+ .gdoc-error__line {
+ padding: .25rem 0
+ }
+ .gdoc-error__title {
+ font-size: 2rem
+ }
+ .gdoc-page__header .breadcrumb,
+ .hidden-mobile {
+ display: none
+ }
+ .gdoc-footer__item {
+ width: 100%
+ }
+ #menu-control:checked ~ main .gdoc-nav nav,
+ #menu-control:checked ~ main .gdoc-page {
+ transform: translateX(16rem)
+ }
+ #menu-control:checked ~ main .gdoc-page {
+ opacity: .25
+ }
+ #menu-control:checked ~ .gdoc-header .gdoc-nav__control .icon.menu {
+ display: none
+ }
+ #menu-control:checked ~ .gdoc-header .gdoc-nav__control .icon.arrow-back {
+ display: inline-block
+ }
+}
\ No newline at end of file
diff --git a/site/themes/geekdoc/assets/mobile.min.css b/site/themes/geekdoc/assets/mobile.min.css
new file mode 100644
index 0000000..484bcad
--- /dev/null
+++ b/site/themes/geekdoc/assets/mobile.min.css
@@ -0,0 +1 @@
+@media screen and (max-width:39rem){.gdoc-nav{margin-left:-16rem;font-size:16px}.gdoc-nav__control{display:inline-block}.gdoc-header .icon{width:1.5rem;height:1.5rem}.gdoc-brand{font-size:1.5rem}.gdoc-brand__img{display:none}.gdoc-error{padding:6rem 1rem}.gdoc-error .icon{width:4rem;height:4rem}.gdoc-error__message{padding-left:2rem}.gdoc-error__line{padding:.25rem 0}.gdoc-error__title{font-size:2rem}.gdoc-page__header .breadcrumb,.hidden-mobile{display:none}.gdoc-footer__item{width:100%}#menu-control:checked~main .gdoc-nav nav,#menu-control:checked~main .gdoc-page{transform:translateX(16rem)}#menu-control:checked~main .gdoc-page{opacity:.25}#menu-control:checked~.gdoc-header .gdoc-nav__control .icon.menu{display:none}#menu-control:checked~.gdoc-header .gdoc-nav__control .icon.arrow-back{display:inline-block}}
\ No newline at end of file
diff --git a/site/themes/geekdoc/assets/print.css b/site/themes/geekdoc/assets/print.css
new file mode 100644
index 0000000..c5da2e6
--- /dev/null
+++ b/site/themes/geekdoc/assets/print.css
@@ -0,0 +1,37 @@
+@media print {
+ .editpage,
+ .gdoc-footer .container span:not(:first-child),
+ .gdoc-nav {
+ display: none
+ }
+ .gdoc-footer {
+ border-top: 1px solid #dee2e6
+ }
+ .gdoc-markdown pre {
+ white-space: pre-wrap;
+ overflow-wrap: break-word
+ }
+ .chroma code {
+ border: 1px solid #dee2e6;
+ padding: .5rem!important;
+ font-weight: 400!important
+ }
+ .gdoc-markdown code {
+ font-weight: 700
+ }
+ a,
+ a:visited {
+ color: inherit!important;
+ text-decoration: none!important
+ }
+ main {
+ flex-direction: column-reverse
+ }
+ .gdoc-toc {
+ flex: none
+ }
+ .gdoc-toc nav {
+ position: relative;
+ width: auto
+ }
+}
\ No newline at end of file
diff --git a/site/themes/geekdoc/assets/print.min.css b/site/themes/geekdoc/assets/print.min.css
new file mode 100644
index 0000000..8ef0676
--- /dev/null
+++ b/site/themes/geekdoc/assets/print.min.css
@@ -0,0 +1 @@
+@media print{.editpage,.gdoc-footer .container span:not(:first-child),.gdoc-nav{display:none}.gdoc-footer{border-top:1px solid #dee2e6}.gdoc-markdown pre{white-space:pre-wrap;overflow-wrap:break-word}.chroma code{border:1px solid #dee2e6;padding:.5rem!important;font-weight:400!important}.gdoc-markdown code{font-weight:700}a,a:visited{color:inherit!important;text-decoration:none!important}main{flex-direction:column-reverse}.gdoc-toc{flex:none}.gdoc-toc nav{position:relative;width:auto}}
\ No newline at end of file
diff --git a/site/themes/geekdoc/data/assets-static.json b/site/themes/geekdoc/data/assets-static.json
new file mode 100644
index 0000000..9f6cf5d
--- /dev/null
+++ b/site/themes/geekdoc/data/assets-static.json
@@ -0,0 +1,3 @@
+{
+ "custom.css": "custom.css"
+}
diff --git a/site/themes/geekdoc/data/assets.json b/site/themes/geekdoc/data/assets.json
new file mode 100644
index 0000000..7432050
--- /dev/null
+++ b/site/themes/geekdoc/data/assets.json
@@ -0,0 +1,9 @@
+{
+ "custom.css": "custom.css",
+ "js/clipboard.min.js": "js/clipboard-af8ab36589.min.js",
+ "js/flexsearch.min.js": "js/flexsearch-ad47a5e1ee.min.js",
+ "js/mermaid.min.js": "js/mermaid-71505ed73e.min.js",
+ "main.min.css": "main-7a8a8dd1df.min.css",
+ "mobile.min.css": "mobile-2eb10ce87d.min.css",
+ "print.min.css": "print-16259ad7b8.min.css"
+}
\ No newline at end of file
diff --git a/site/themes/geekdoc/images/readme.png b/site/themes/geekdoc/images/readme.png
new file mode 100644
index 0000000..9142bab
Binary files /dev/null and b/site/themes/geekdoc/images/readme.png differ
diff --git a/site/themes/geekdoc/images/screenshot-plain.png b/site/themes/geekdoc/images/screenshot-plain.png
new file mode 100644
index 0000000..2fb085f
Binary files /dev/null and b/site/themes/geekdoc/images/screenshot-plain.png differ
diff --git a/site/themes/geekdoc/images/screenshot.png b/site/themes/geekdoc/images/screenshot.png
new file mode 100644
index 0000000..f2b625f
Binary files /dev/null and b/site/themes/geekdoc/images/screenshot.png differ
diff --git a/site/themes/geekdoc/images/tn.png b/site/themes/geekdoc/images/tn.png
new file mode 100644
index 0000000..4745ca3
Binary files /dev/null and b/site/themes/geekdoc/images/tn.png differ
diff --git a/site/themes/geekdoc/layouts/404.html b/site/themes/geekdoc/layouts/404.html
new file mode 100644
index 0000000..a0bf01c
--- /dev/null
+++ b/site/themes/geekdoc/layouts/404.html
@@ -0,0 +1,35 @@
+
+
+
+
+ {{ partial "head" . }}
+
+
+
+ {{ partial "svg-icon-symbols" . }}
+
+ {{ partial "title" . }}
+ {{ partial "content" . }}
+ {{ partial "title" . }}
+ {{ partial "content" . }}
+
+{{ range sort (default (seq 0) .sect) "weight" }}
+ {{ $current.Scratch.Set "current" $current }}
+ {{ $current.Scratch.Set "site" $site }}
+
+
+{{ end }}
diff --git a/site/themes/geekdoc/layouts/partials/menu-filetree.html b/site/themes/geekdoc/layouts/partials/menu-filetree.html
new file mode 100644
index 0000000..10ec7ae
--- /dev/null
+++ b/site/themes/geekdoc/layouts/partials/menu-filetree.html
@@ -0,0 +1,47 @@
+{{ $current := . }}
+{{ template "tree-nav" dict "sect" .Site.Home.Sections "current" $current }}
+
+
+{{ define "tree-nav" }}
+ {{ $current := .current }}
+
+
+ {{ range .sect.GroupBy "Weight" }}
+ {{ range .ByTitle }}
+ {{ if not .Params.GeekdocHidden }}
+
+ {{ $numberOfPages := (add (len .Pages) (len .Sections)) }}
+ {{ $isParent := and (ne $numberOfPages 0) (not .Params.GeekdocFlatSection) }}
+ {{ $isCurrent := eq $current . }}
+ {{ $isAncestor := .IsAncestor $current }}
+ {{ $id := substr (sha1 .Permalink) 0 8 }}
+
+
+{{ end }}
diff --git a/site/themes/geekdoc/layouts/partials/menu.html b/site/themes/geekdoc/layouts/partials/menu.html
new file mode 100644
index 0000000..ce21dbc
--- /dev/null
+++ b/site/themes/geekdoc/layouts/partials/menu.html
@@ -0,0 +1,19 @@
+Navigation
+ {{ if .Site.Params.GeekdocMenuBundle }}
+ {{ partial "menu-bundle" (dict "current" . "source" .Site.Data.menu.main.main) }}
+ {{ else }}
+ {{ partial "menu-filetree" . }}
+ {{ end }}
+ More
+ {{ partial "menu-bundle" (dict "current" . "source" .Site.Data.menu.more.more) }}
+ {{ end }}
+
+
+ {{ .Root.Site.Title }}
+
+
+
{{ .Title }}
+ {{ .Title }}
+
+ {{ .Inner | markdownify }}
+
diff --git a/site/themes/geekdoc/layouts/shortcodes/include.html b/site/themes/geekdoc/layouts/shortcodes/include.html
new file mode 100644
index 0000000..17540da
--- /dev/null
+++ b/site/themes/geekdoc/layouts/shortcodes/include.html
@@ -0,0 +1,10 @@
+{{$file := .Get "file"}}
+
+ {{- .Inner -}}
+
diff --git a/site/themes/geekdoc/layouts/shortcodes/tab.html b/site/themes/geekdoc/layouts/shortcodes/tab.html
new file mode 100644
index 0000000..e2a207c
--- /dev/null
+++ b/site/themes/geekdoc/layouts/shortcodes/tab.html
@@ -0,0 +1,12 @@
+{{ if .Parent }}
+ {{ $name := .Get 0 }}
+ {{ $group := printf "tabs-%s" (.Parent.Get 0) }}
+
+ {{ if not (.Parent.Scratch.Get $group) }}
+ {{ .Parent.Scratch.Set $group slice }}
+ {{ end }}
+
+ {{ .Parent.Scratch.Add $group (dict "Name" $name "Content" .Inner) }}
+{{ else }}
+ {{ errorf "%q: 'tab' shortcode must be inside 'tabs' shortcode" .Page.Path }}
+{{ end}}
diff --git a/site/themes/geekdoc/layouts/shortcodes/tabs.html b/site/themes/geekdoc/layouts/shortcodes/tabs.html
new file mode 100644
index 0000000..fb9965a
--- /dev/null
+++ b/site/themes/geekdoc/layouts/shortcodes/tabs.html
@@ -0,0 +1,16 @@
+{{ if .Inner }}{{ end }}
+{{ $id := .Get 0 }}
+{{ $group := printf "tabs-%s" $id }}
+
+
+ {{ range .sect.GroupBy "Weight" }}
+ {{ range .ByTitle }}
+ {{ if or (not .Params.GeekdocHidden) (not (default true .Params.GeekdocHiddenTocTree)) }}
+
cu&&(cu=e)),u?t0?r=S(s=Math.floor(s/r)*r,c=Math.ceil(c/r)*r,n):r<0&&(r=S(s=Math.ceil(s*r)/r,c=Math.floor(c*r)/r,n)),r>0?(i[a]=Math.floor(s/r)*r,i[o]=Math.ceil(c/r)*r,e(i)):r<0&&(i[a]=Math.ceil(s*r)/r,i[o]=Math.floor(c*r)/r,e(i)),t},t}function sg(){var t=ig(Jp,Jp);return t.copy=function(){return ng(t,sg())},Rp.apply(t,arguments),og(t)}function cg(t){var e;function n(t){return isNaN(t=+t)?e:t}return n.invert=n,n.domain=n.range=function(e){return arguments.length?(t=Up.call(e,Xp),n):t.slice()},n.unknown=function(t){return arguments.length?(e=t,n):e},n.copy=function(){return cg(t).unknown(e)},t=arguments.length?Up.call(t,Xp):[0,1],og(n)}var ug=function(t,e){var n,r=0,i=(t=t.slice()).length-1,a=t[r],o=t[i];return o0){for(;fc)break;g.push(h)}}else g=C(f,d,Math.min(d-f,p)).map(n);return r?g.reverse():g},r.tickFormat=function(t,i){if(null==i&&(i=10===a?".0e":","),"function"!=typeof i&&(i=Xs(i)),t===1/0)return i;null==t&&(t=10);var o=Math.max(1,a*t/r.ticks().length);return function(t){var r=t/n(Math.round(e(t)));return r*a=c)return-1;if(37===(i=e.charCodeAt(o++))){if(i=e.charAt(o++),!(a=_[i in Hy?e.charAt(o++):i])||(r=a(t,n,r))<0)return-1}else if(i!=n.charCodeAt(r++))return-1}return r}return(b.x=k(n,b),b.X=k(r,b),b.c=k(e,b),x.x=k(n,x),x.X=k(r,x),x.c=k(e,x),{format:function(t){var e=k(t+="",b);return e.toString=function(){return t},e},parse:function(t){var e=w(t+="",!1);return e.toString=function(){return t},e},utcFormat:function(t){var e=k(t+="",x);return e.toString=function(){return t},e},utcParse:function(t){var e=w(t+="",!0);return e.toString=function(){return t},e}})}var zy,Uy,$y,Wy,Vy,Hy={"-":"",_:" ",0:"0"},Gy=/^\s*\d+/,qy=/^%/,Xy=/[\\^$*+?|[\]().{}]/g;function Zy(t,e,n){var r=t<0?"-":"",i=(r?-t:t)+"",a=i.length;return r+(ah&&A.push("'"+this.terminals_[T]+"'");O=p.showPosition?"Parse error on line "+(c+1)+":\n"+p.showPosition()+"\nExpecting "+A.join(", ")+", got '"+(this.terminals_[x]||x)+"'":"Parse error on line "+(c+1)+": Unexpected "+(x==f?"end of input":"'"+(this.terminals_[x]||x)+"'"),this.parseError(O,{text:p.match,token:this.terminals_[x]||x,line:p.yylineno,loc:v,expected:A})}if(w[0]instanceof Array&&w.length>1)throw new Error("Parse Error: multiple actions possible at state: "+k+", token: "+x);switch(w[0]){case 1:n.push(x),i.push(p.yytext),a.push(p.yylloc),n.push(w[1]),x=null,_?(x=_,_=null):(u=p.yyleng,s=p.yytext,c=p.yylineno,v=p.yylloc,l>0&&l--);break;case 2:if(C=this.productions_[w[1]][1],M.$=i[i.length-C],M._$={first_line:a[a.length-(C||1)].first_line,last_line:a[a.length-1].last_line,first_column:a[a.length-(C||1)].first_column,last_column:a[a.length-1].last_column},m&&(M._$.range=[a[a.length-(C||1)].range[0],a[a.length-1].range[1]]),void 0!==(E=this.performAction.apply(M,[s,u,c,g.yy,w[1],i,a].concat(d))))return E;C&&(n=n.slice(0,-1*C*2),i=i.slice(0,-1*C),a=a.slice(0,-1*C)),n.push(this.productions_[w[1]][0]),i.push(M.$),a.push(M._$),S=o[n[n.length-2]][n[n.length-1]],n.push(S);break;case 3:return!0}}return!0}},M={EOF:1,parseError:function(t,e){if(!this.yy.parser)throw new Error(t);this.yy.parser.parseError(t,e)},setInput:function(t,e){return this.yy=e||this.yy||{},this._input=t,this._more=this._backtrack=this.done=!1,this.yylineno=this.yyleng=0,this.yytext=this.matched=this.match="",this.conditionStack=["INITIAL"],this.yylloc={first_line:1,first_column:0,last_line:1,last_column:0},this.options.ranges&&(this.yylloc.range=[0,0]),this.offset=0,this},input:function(){var t=this._input[0];return this.yytext+=t,this.yyleng++,this.offset++,this.match+=t,this.matched+=t,t.match(/(?:\r\n?|\n).*/g)?(this.yylineno++,this.yylloc.last_line++):this.yylloc.last_column++,this.options.ranges&&this.yylloc.range[1]++,this._input=this._input.slice(1),t},unput:function(t){var e=t.length,n=t.split(/(?:\r\n?|\n)/g);this._input=t+this._input,this.yytext=this.yytext.substr(0,this.yytext.length-e),this.offset-=e;var r=this.match.split(/(?:\r\n?|\n)/g);this.match=this.match.substr(0,this.match.length-1),this.matched=this.matched.substr(0,this.matched.length-1),n.length-1&&(this.yylineno-=n.length-1);var i=this.yylloc.range;return this.yylloc={first_line:this.yylloc.first_line,last_line:this.yylineno+1,first_column:this.yylloc.first_column,last_column:n?(n.length===r.length?this.yylloc.first_column:0)+r[r.length-n.length].length-n[0].length:this.yylloc.first_column-e},this.options.ranges&&(this.yylloc.range=[i[0],i[0]+this.yyleng-e]),this.yyleng=this.yytext.length,this},more:function(){return this._more=!0,this},reject:function(){return this.options.backtrack_lexer?(this._backtrack=!0,this):this.parseError("Lexical error on line "+(this.yylineno+1)+". You can only invoke reject() in the lexer when the lexer is of the backtracking persuasion (options.backtrack_lexer = true).\n"+this.showPosition(),{text:"",token:null,line:this.yylineno})},less:function(t){this.unput(this.match.slice(t))},pastInput:function(){var t=this.matched.substr(0,this.matched.length-this.match.length);return(t.length>20?"...":"")+t.substr(-20).replace(/\n/g,"")},upcomingInput:function(){var t=this.match;return t.length<20&&(t+=this._input.substr(0,20-t.length)),(t.substr(0,20)+(t.length>20?"...":"")).replace(/\n/g,"")},showPosition:function(){var t=this.pastInput(),e=new Array(t.length+1).join("-");return t+this.upcomingInput()+"\n"+e+"^"},test_match:function(t,e){var n,r,i;if(this.options.backtrack_lexer&&(i={yylineno:this.yylineno,yylloc:{first_line:this.yylloc.first_line,last_line:this.last_line,first_column:this.yylloc.first_column,last_column:this.yylloc.last_column},yytext:this.yytext,match:this.match,matches:this.matches,matched:this.matched,yyleng:this.yyleng,offset:this.offset,_more:this._more,_input:this._input,yy:this.yy,conditionStack:this.conditionStack.slice(0),done:this.done},this.options.ranges&&(i.yylloc.range=this.yylloc.range.slice(0))),(r=t[0].match(/(?:\r\n?|\n).*/g))&&(this.yylineno+=r.length),this.yylloc={first_line:this.yylloc.last_line,last_line:this.yylineno+1,first_column:this.yylloc.last_column,last_column:r?r[r.length-1].length-r[r.length-1].match(/\r?\n?/)[0].length:this.yylloc.last_column+t[0].length},this.yytext+=t[0],this.match+=t[0],this.matches=t,this.yyleng=this.yytext.length,this.options.ranges&&(this.yylloc.range=[this.offset,this.offset+=this.yyleng]),this._more=!1,this._backtrack=!1,this._input=this._input.slice(t[0].length),this.matched+=t[0],n=this.performAction.call(this,this.yy,this,e,this.conditionStack[this.conditionStack.length-1]),this.done&&this._input&&(this.done=!1),n)return n;if(this._backtrack){for(var a in i)this[a]=i[a];return!1}return!1},next:function(){if(this.done)return this.EOF;var t,e,n,r;this._input||(this.done=!0),this._more||(this.yytext="",this.match="");for(var i=this._currentRules(),a=0;a0&&(ot=ot.replace(r,"")),ot.trim().length>0)){switch(b){case 32:case 9:case 59:case 13:case 10:break;default:ot+=i.charAt(O)}b=59}if(1===j)switch(b){case 123:case 125:case 59:case 34:case 39:case 40:case 41:case 44:j=0;case 9:case 13:case 10:case 32:break;default:for(j=0,W=O,v=b,O--,b=59;W
0&&(++O,b=v);case 123:W=Q}}switch(b){case 123:for(v=(ot=ot.trim()).charCodeAt(0),T=1,W=++O;O
0&&(ot=ot.replace(r,"")),m=ot.charCodeAt(1)){case 100:case 109:case 115:case 45:s=e;break;default:s=z}if(W=(st=Z(e,s,st,m,o+1)).length,Y>0&&0===W&&(W=ot.length),$>0&&(c=nt(3,st,s=J(z,ot,U),e,B,N,W,m,o,a),ot=s.join(""),void 0!==c&&0===(W=(st=c.trim()).length)&&(m=0,st="")),W>0)switch(m){case 115:ot=ot.replace(w,et);case 100:case 109:case 45:st=ot+"{"+st+"}";break;case 107:st=(ot=ot.replace(p,"$1 $2"+(H>0?G:"")))+"{"+st+"}",st=1===P||2===P&&tt("@"+st,3)?"@"+M+st+"@"+st:"@"+st;break;default:st=ot+st,112===a&&(ct+=st,st="")}else st="";break;default:st=Z(e,J(e,ot,U),st,a,o+1)}ut+=st,C=0,j=0,A=0,D=0,U=0,S=0,ot="",st="",b=i.charCodeAt(++O);break;case 125:case 59:if((W=(ot=(D>0?ot.replace(r,""):ot).trim()).length)>1)switch(0===A&&(45===(v=ot.charCodeAt(0))||v>96&&v<123)&&(W=(ot=ot.replace(" ",":")).length),$>0&&void 0!==(c=nt(1,ot,e,t,B,N,ct.length,a,o,a))&&0===(W=(ot=c.trim()).length)&&(ot="\0\0"),v=ot.charCodeAt(0),m=ot.charCodeAt(1),v){case 0:break;case 64:if(105===m||99===m){lt+=ot+i.charAt(O);break}default:if(58===ot.charCodeAt(W-1))break;ct+=K(ot,v,m,ot.charCodeAt(2))}C=0,j=0,A=0,D=0,U=0,ot="",b=i.charCodeAt(++O)}}switch(b){case 13:case 10:if(h+d+f+l+R===0)switch(E){case 41:case 39:case 34:case 64:case 126:case 62:case 42:case 43:case 47:case 45:case 58:case 44:case 59:case 123:case 125:break;default:A>0&&(j=1)}47===h?h=0:F+C===0&&107!==a&&ot.length>0&&(D=1,ot+="\0"),$*V>0&&nt(0,ot,e,t,B,N,ct.length,a,o,a),N=1,B++;break;case 59:case 125:if(h+d+f+l===0){N++;break}default:switch(N++,at=i.charAt(O),b){case 9:case 32:if(d+l+h===0)switch(x){case 44:case 58:case 9:case 32:at="";break;default:32!==b&&(at=" ")}break;case 0:at="\\0";break;case 12:at="\\f";break;case 11:at="\\v";break;case 38:d+h+l===0&&F>0&&(U=1,D=1,at="\f"+at);break;case 108:if(d+h+l+L===0&&A>0)switch(O-A){case 2:112===x&&58===i.charCodeAt(O-3)&&(L=x);case 8:111===k&&(L=k)}break;case 58:d+h+l===0&&(A=O);break;case 44:h+f+d+l===0&&(D=1,at+="\r");break;case 34:case 39:0===h&&(d=d===b?0:0===d?b:d);break;case 91:d+h+f===0&&l++;break;case 93:d+h+f===0&&l--;break;case 41:d+h+l===0&&f--;break;case 40:if(d+h+l===0){if(0===C)switch(2*x+3*k){case 533:break;default:T=0,C=1}f++}break;case 64:h+f+d+l+A+S===0&&(S=1);break;case 42:case 47:if(d+l+f>0)break;switch(h){case 0:switch(2*b+3*i.charCodeAt(O+1)){case 235:h=47;break;case 220:W=O,h=42}break;case 42:47===b&&42===x&&W+2!==O&&(33===i.charCodeAt(W+2)&&(ct+=i.substring(W,O+1)),at="",h=0)}}if(0===h){if(F+d+l+S===0&&107!==a&&59!==b)switch(b){case 44:case 126:case 62:case 43:case 41:case 40:if(0===C){switch(x){case 9:case 32:case 10:case 13:at+="\0";break;default:at="\0"+at+(44===b?"":"\0")}D=1}else switch(b){case 40:A+7===O&&108===x&&(A=0),C=++T;break;case 41:0==(C=--T)&&(D=1,at+="\0")}break;case 9:case 32:switch(x){case 0:case 123:case 125:case 59:case 44:case 12:case 9:case 32:case 10:case 13:break;default:0===C&&(D=1,at+="\0")}}ot+=at,32!==b&&9!==b&&(E=b)}}k=x,x=b,O++}if(W=ct.length,Y>0&&0===W&&0===ut.length&&0===e[0].length==0&&(109!==a||1===e.length&&(F>0?q:X)===e[0])&&(W=e.join(",").length+2),W>0){if(s=0===F&&107!==a?function(t){for(var e,n,i=0,a=t.length,o=Array(a);i1)){if(f=c.charCodeAt(c.length-1),d=n.charCodeAt(0),e="",0!==l)switch(f){case 42:case 126:case 62:case 43:case 32:case 40:break;default:e=" "}switch(d){case 38:n=e+q;case 126:case 62:case 43:case 32:case 41:case 40:break;case 91:n=e+n+q;break;case 58:switch(2*n.charCodeAt(1)+3*n.charCodeAt(2)){case 530:if(I>0){n=e+n.substring(8,h-1);break}default:(l<1||s[l-1].length<1)&&(n=e+q+n)}break;case 44:e="";default:n=h>1&&n.indexOf(":")>0?e+n.replace(_,"$1"+q+"$2"):e+n+q}c+=n}o[i]=c.replace(r,"").trim()}return o}(e):e,$>0&&void 0!==(c=nt(2,ct,s,t,B,N,W,a,o,a))&&0===(ct=c).length)return lt+ct+ut;if(ct=s.join(",")+"{"+ct+"}",P*L!=0){switch(2!==P||tt(ct,2)||(L=0),L){case 111:ct=ct.replace(y,":-moz-$1")+ct;break;case 112:ct=ct.replace(g,"::-webkit-input-$1")+ct.replace(g,"::-moz-$1")+ct.replace(g,":-ms-input-$1")+ct}L=0}}return lt+ct+ut}function J(t,e,n){var r=e.trim().split(l),i=r,a=r.length,o=t.length;switch(o){case 0:case 1:for(var s=0,c=0===o?"":t[0]+" ";s0&&F>0)return i.replace(f,"$1").replace(h,"$1"+X);break;default:return t.trim()+i.replace(h,"$1"+t.trim())}default:if(n*F>0&&i.indexOf("\f")>0)return i.replace(h,(58===t.charCodeAt(0)?"":"$1")+t.trim())}return t+i}function K(t,e,n,r){var u,l=0,h=t+";",f=2*e+3*n+4*r;if(944===f)return function(t){var e=t.length,n=t.indexOf(":",9)+1,r=t.substring(0,n).trim(),i=t.substring(n,e-1).trim();switch(t.charCodeAt(9)*H){case 0:break;case 45:if(110!==t.charCodeAt(10))break;default:var a=i.split((i="",s)),o=0;for(n=0,e=a.length;o