| 6dd74de | | | 1 | import externalExample from './mermaid-example-diagram.esm.mjs'; |
| 6dd74de | | | 2 | import layouts from './mermaid-layout-elk.esm.mjs'; |
| 6dd74de | | | 3 | import tidyTree from './mermaid-layout-tidy-tree.esm.mjs'; |
| 6dd74de | | | 4 | import zenUml from './mermaid-zenuml.esm.mjs'; |
| 6dd74de | | | 5 | import mermaid from './mermaid.esm.mjs'; |
| 6dd74de | | | 6 | |
| 6dd74de | | | 7 | function b64ToUtf8(str) { |
| 6dd74de | | | 8 | return decodeURIComponent(escape(window.atob(str))); |
| 6dd74de | | | 9 | } |
| 6dd74de | | | 10 | |
| 6dd74de | | | 11 | // Adds a rendered flag to window when rendering is done, so cypress can wait for it. |
| 6dd74de | | | 12 | function markRendered() { |
| 6dd74de | | | 13 | if (window.Cypress) { |
| 6dd74de | | | 14 | window.rendered = true; |
| 6dd74de | | | 15 | } |
| 6dd74de | | | 16 | } |
| 6dd74de | | | 17 | |
| 6dd74de | | | 18 | function loadFontAwesomeCSS() { |
| 6dd74de | | | 19 | const link = document.createElement('link'); |
| 6dd74de | | | 20 | link.rel = 'stylesheet'; |
| 6dd74de | | | 21 | link.href = 'https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/all.min.css'; |
| 6dd74de | | | 22 | |
| 6dd74de | | | 23 | document.head.appendChild(link); |
| 6dd74de | | | 24 | |
| 6dd74de | | | 25 | return new Promise((resolve, reject) => { |
| 6dd74de | | | 26 | link.onload = resolve; |
| 6dd74de | | | 27 | link.onerror = () => reject(new Error('Failed to load FontAwesome')); |
| 6dd74de | | | 28 | }); |
| 6dd74de | | | 29 | } |
| 6dd74de | | | 30 | |
| 6dd74de | | | 31 | /** |
| 6dd74de | | | 32 | * ##contentLoaded Callback function that is called when page is loaded. This functions fetches |
| 6dd74de | | | 33 | * configuration for mermaid rendering and calls init for rendering the mermaid diagrams on the |
| 6dd74de | | | 34 | * page. |
| 6dd74de | | | 35 | */ |
| 6dd74de | | | 36 | const contentLoaded = async function () { |
| 6dd74de | | | 37 | await loadFontAwesomeCSS(); |
| 6dd74de | | | 38 | await Promise.all(Array.from(document.fonts, (font) => font.load())); |
| 6dd74de | | | 39 | |
| 6dd74de | | | 40 | let pos = document.location.href.indexOf('?graph='); |
| 6dd74de | | | 41 | if (pos > 0) { |
| 6dd74de | | | 42 | pos = pos + 7; |
| 6dd74de | | | 43 | const graphBase64 = document.location.href.substr(pos); |
| 6dd74de | | | 44 | const graphObj = JSON.parse(b64ToUtf8(graphBase64)); |
| 6dd74de | | | 45 | if (graphObj.mermaid && graphObj.mermaid.theme === 'dark') { |
| 6dd74de | | | 46 | document.body.style.background = '#3f3f3f'; |
| 6dd74de | | | 47 | } |
| 6dd74de | | | 48 | console.log(graphObj); |
| 6dd74de | | | 49 | if (Array.isArray(graphObj.code)) { |
| 6dd74de | | | 50 | const numCodes = graphObj.code.length; |
| 6dd74de | | | 51 | for (let i = 0; i < numCodes; i++) { |
| 6dd74de | | | 52 | const div = document.createElement('div'); |
| 6dd74de | | | 53 | div.id = 'block' + i; |
| 6dd74de | | | 54 | div.className = 'mermaid'; |
| 6dd74de | | | 55 | div.innerHTML = graphObj.code[i]; |
| 6dd74de | | | 56 | document.getElementsByTagName('body')[0].appendChild(div); |
| 6dd74de | | | 57 | } |
| 6dd74de | | | 58 | } else { |
| 6dd74de | | | 59 | const div = document.createElement('div'); |
| 6dd74de | | | 60 | div.id = 'block'; |
| 6dd74de | | | 61 | div.className = 'mermaid'; |
| 6dd74de | | | 62 | div.innerHTML = graphObj.code; |
| 6dd74de | | | 63 | document.getElementsByTagName('body')[0].appendChild(div); |
| 6dd74de | | | 64 | } |
| 6dd74de | | | 65 | |
| 6dd74de | | | 66 | await mermaid.registerExternalDiagrams([externalExample, zenUml]); |
| 6dd74de | | | 67 | |
| 6dd74de | | | 68 | mermaid.registerLayoutLoaders(layouts); |
| 6dd74de | | | 69 | mermaid.registerLayoutLoaders(tidyTree); |
| 6dd74de | | | 70 | mermaid.initialize(graphObj.mermaid); |
| 6dd74de | | | 71 | /** |
| 6dd74de | | | 72 | * CC-BY-4.0 |
| 6dd74de | | | 73 | * Copyright (c) Fonticons, Inc. - https://fontawesome.com/license/free |
| 6dd74de | | | 74 | * https://fontawesome.com/icons/bell?f=classic&s=regular |
| 6dd74de | | | 75 | */ |
| 6dd74de | | | 76 | const staticBellIconPack = { |
| 6dd74de | | | 77 | prefix: 'fa', |
| 6dd74de | | | 78 | icons: { |
| 6dd74de | | | 79 | bell: { |
| 6dd74de | | | 80 | body: '<path fill="currentColor" d="M224 0c-17.7 0-32 14.3-32 32v19.2C119 66 64 130.6 64 208v25.4c0 45.4-15.5 89.5-43.8 124.9L5.3 377c-5.8 7.2-6.9 17.1-2.9 25.4S14.8 416 24 416h400c9.2 0 17.6-5.3 21.6-13.6s2.9-18.2-2.9-25.4l-14.9-18.6c-28.3-35.5-43.8-79.6-43.8-125V208c0-77.4-55-142-128-156.8V32c0-17.7-14.3-32-32-32m0 96c61.9 0 112 50.1 112 112v25.4c0 47.9 13.9 94.6 39.7 134.6H72.3c25.8-40 39.7-86.7 39.7-134.6V208c0-61.9 50.1-112 112-112m64 352H160c0 17 6.7 33.3 18.7 45.3S207 512 224 512s33.3-6.7 45.3-18.7S288 465 288 448"/>', |
| 6dd74de | | | 81 | width: 448, |
| 6dd74de | | | 82 | }, |
| 6dd74de | | | 83 | }, |
| 6dd74de | | | 84 | width: 512, |
| 6dd74de | | | 85 | height: 512, |
| 6dd74de | | | 86 | }; |
| 6dd74de | | | 87 | /* MIT License |
| 6dd74de | | | 88 | |
| 6dd74de | | | 89 | Copyright (c) Microsoft Corporation. |
| 6dd74de | | | 90 | |
| 6dd74de | | | 91 | Permission is hereby granted, free of charge, to any person obtaining a copy |
| 6dd74de | | | 92 | of this software and associated documentation files (the "Software"), to deal |
| 6dd74de | | | 93 | in the Software without restriction, including without limitation the rights |
| 6dd74de | | | 94 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell |
| 6dd74de | | | 95 | copies of the Software, and to permit persons to whom the Software is |
| 6dd74de | | | 96 | furnished to do so, subject to the following conditions: |
| 6dd74de | | | 97 | |
| 6dd74de | | | 98 | The above copyright notice and this permission notice shall be included in all |
| 6dd74de | | | 99 | copies or substantial portions of the Software. |
| 6dd74de | | | 100 | |
| 6dd74de | | | 101 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR |
| 6dd74de | | | 102 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, |
| 6dd74de | | | 103 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE |
| 6dd74de | | | 104 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER |
| 6dd74de | | | 105 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, |
| 6dd74de | | | 106 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE |
| 6dd74de | | | 107 | SOFTWARE */ |
| 6dd74de | | | 108 | const staticAwsLogoIconPack = { |
| 6dd74de | | | 109 | prefix: 'fluent-emoji', |
| 6dd74de | | | 110 | icons: { |
| 6dd74de | | | 111 | 'tropical-fish': { |
| 6dd74de | | | 112 | width: 32, |
| 6dd74de | | | 113 | height: 32, |
| 6dd74de | | | 114 | body: '<g fill="none"><circle cx="3.055" cy="19.945" r="1.055" fill="url(#f2515id0)" /><circle cx="3.055" cy="19.945" r="1.055" fill="url(#f2515id1)" /><circle cx="3.055" cy="17.945" r="1.055" fill="url(#f2515id2)" /><path fill="url(#f2515idj)" d="M14.375 7H23a3 3 0 0 1 3 3v17a3 3 0 0 1-3 3h-8.625z" /><path fill="url(#f2515id3)" d="M14.375 7H23a3 3 0 0 1 3 3v17a3 3 0 0 1-3 3h-8.625z" /><path fill="url(#f2515id4)" d="M14.375 7H23a3 3 0 0 1 3 3v17a3 3 0 0 1-3 3h-8.625z" /><path fill="url(#f2515idk)" d="M14.375 7H23a3 3 0 0 1 3 3v17a3 3 0 0 1-3 3h-8.625z" /><path fill="url(#f2515id5)" d="M14.375 7H23a3 3 0 0 1 3 3v17a3 3 0 0 1-3 3h-8.625z" /><path fill="url(#f2515id6)" d="M14.375 7H23a3 3 0 0 1 3 3v17a3 3 0 0 1-3 3h-8.625z" /><path fill="url(#f2515id7)" d="M14.375 7H23a3 3 0 0 1 3 3v17a3 3 0 0 1-3 3h-8.625z" /><path fill="url(#f2515idl)" d="M14.375 7H23a3 3 0 0 1 3 3v17a3 3 0 0 1-3 3h-8.625z" /><circle cx="14.5" cy="18.5" r="11.5" fill="url(#f2515id8)" /><circle cx="14.5" cy="18.5" r="11.5" fill="url(#f2515id9)" /><circle cx="14.5" cy="18.5" r="11.5" fill="url(#f2515ida)" /><circle cx="14.5" cy="18.5" r="11.5" fill="url(#f2515idb)" /><path fill="url(#f2515idc)" d="M6.7 10.05a10.8 10.8 0 0 1 3.988 8.388c0 3.417-1.586 6.464-4.06 8.445A11.47 11.47 0 0 1 3 18.5a11.47 11.47 0 0 1 3.7-8.45" /><g filter="url(#f2515idp)"><path fill="#4d82fd" d="M17.61 21.717v-5.873a.7.7 0 0 0-1.174-.516l-2.998 2.753a1 1 0 0 0 .01 1.483l2.995 2.675a.7.7 0 0 0 1.166-.522" /></g><path fill="url(#f2515idm)" d="M18 21.452v-5.874a.7.7 0 0 0-1.174-.516l-2.997 2.754a1 1 0 0 0 .01 1.482l2.995 2.676A.7.7 0 0 0 18 21.452" /><path fill="url(#f2515idn)" d="M18 21.452v-5.874a.7.7 0 0 0-1.174-.516l-2.997 2.754a1 1 0 0 0 .01 1.482l2.995 2.676A.7.7 0 0 0 18 21.452" /><path fill="url(#f2515idd)" d="M18 21.452v-5.874a.7.7 0 0 0-1.174-.516l-2.997 2.754a1 1 0 0 0 .01 1.482l2.995 2.676A.7.7 0 0 0 18 21.452" /><circle cx="7.422" cy="16.391" r=".5" fill="url(#f2515ide)" /><circle cx="7.422" cy="16.391" r=".5" fill="url(#f2515idf)" /><circle cx="7.422" cy="16.391" r=".5" fill="url(#f2515ido)" /><path fill="url(#f2515idg)" d="M30.063 15.955c0-.672-.766-1.476-1.82-.956A4.5 4.5 0 0 0 26 18.893c0 1.662.901 3.114 2.242 3.893c.759.441 1.82-.073 1.82-.83z" /><path fill="url(#f2515idh)" d="M30.063 15.955c0-.672-.766-1.476-1.82-.956A4.5 4.5 0 0 0 26 18.893c0 1.662.901 3.114 2.242 3.893c.759.441 1.82-.073 1.82-.83z" /><path fill="url(#f2515idi)" d="M30.063 15.955c0-.672-.766-1.476-1.82-.956A4.5 4.5 0 0 0 26 18.893c0 1.662.901 3.114 2.242 3.893c.759.441 1.82-.073 1.82-.83z" /><defs><radialGradient id="f2515id0" cx="0" cy="0" r="1" gradientTransform="matrix(1.3125 -.53906 .83075 2.02268 2 20.484)" gradientUnits="userSpaceOnUse"><stop stop-color="#6d5a93" /><stop offset="1" stop-color="#5f498c" /></radialGradient><radialGradient id="f2515id1" cx="0" cy="0" r="1" gradientTransform="rotate(98.219 -6.59 10.698)scale(.71042 .794)" gradientUnits="userSpaceOnUse"><stop stop-color="#442e79" /><stop offset="1" stop-color="#442e79" stop-opacity="0" /></radialGradient><radialGradient id="f2515id2" cx="0" cy="0" r="1" gradientTransform="matrix(1.625 0 0 2.50428 1.875 17.945)" gradientUnits="userSpaceOnUse"><stop stop-color="#6d5a93" /><stop offset="1" stop-color="#5f498c" /></radialGradient><radialGradient id="f2515id3" cx="0" cy="0" r="1" gradientTransform="matrix(8.0625 -3.625 5.13835 11.4284 17.188 31.625)" gradientUnits="userSpaceOnUse"><stop stop-color="#ff835d" /><stop offset="1" stop-color="#ff835d" stop-opacity="0" /></radialGradient><radialGradient id="f2515id4" cx="0" cy="0" r="1" gradientTransform="rotate(46.65 -12.942 36.264)scale(5.37182 7.61442)" gradientUnits="userSpaceOnUse"><stop stop-color="#ff835d" /><stop offset="1" stop-color="#ff835d" stop-opacity="0" /></radialGradient><radialGradient id="f2515id5" cx="0" cy="0" r="1" gradientTransform="matrix(16.7498 18.68764 -12.28497 11.01107 9.25 10.625)" gradientUnits="userSpaceOnUse"><stop offset=".943" stop-color="#ff835d" stop-opacity="0" /><stop offset="1" stop-color="#ff835d" /></radialGradient><radialGradient id="f2515id6" cx="0" cy="0" r="1" gradientTransform="rotate(143.673 11.127 8.392)scale(3.95643 5.87059)" gradientUnits="userSpaceOnUse"><stop stop-color="#ffe65e" /><stop offset=".654" stop-color="#ffe65e" stop-opacity="0" /></radialGradient><radialGradient id="f2515id7" cx="0" cy="0" r="1" gradientTransform="matrix(0 -6.0625 11.8125 0 27.125 14.938)" gradientUnits="userSpaceOnUse"><stop stop-color="#ffe65e" /><stop offset="1" stop-color="#ffe65e" stop-opacity="0" /></radialGradient><radialGradient id="f2515id8" cx="0" cy="0" r="1" gradientTransform="matrix(-10.49993 18.125 -19.41091 -11.24487 22.813 9.75)" gradientUnits="userSpaceOnUse"><stop stop-color="#76cdff" /><stop offset="1" stop-color="#5181ff" /></radialGradient><radialGradient id="f2515id9" cx="0" cy="0" r="1" gradientTransform="matrix(0 23.0625 -17.9752 0 14.5 9.063)" gradientUnits="userSpaceOnUse"><stop offset=".786" stop-color="#5a67ff" stop-opacity="0" /><stop offset=".929" stop-color="#5a67ff" /></radialGradient><radialGradient id="f2515ida" cx="0" cy="0" r="1" gradientTransform="matrix(-3.6875 0 0 -6.17092 28.5 18.813)" gradientUnits="userSpaceOnUse"><stop offset=".017" stop-color="#5a67ff" /><stop offset="1" stop-color="#5a67ff" stop-opacity="0" /></radialGradient><radialGradient id="f2515idb" cx="0" cy="0" r="1" gradientTransform="matrix(2.37499 2.81251 -7.52137 6.35133 7.875 8.125)" gradientUnits="userSpaceOnUse"><stop stop-color="#65afe3" /><stop offset="1" stop-color="#65afe3" stop-opacity="0" /></radialGradient><radialGradient id="f2515idc" cx="0" cy="0" r="1" gradientTransform="matrix(23.875 0 0 34.7797 .625 18.467)" gradientUnits="userSpaceOnUse"><stop offset=".065" stop-color="#80739f" /><stop offset=".262" stop-color="#6f53a3" /></radialGradient><radialGradient id="f2515idd" cx="0" cy="0" r="1" gradientTransform="matrix(0 4.5 -.71873 0 18 15.844)" gradientUnits="userSpaceOnUse"><stop stop-color="#ffd65c" /><stop offset="1" stop-color="#ffd65c" stop-opacity="0" /></radialGradient><radialGradient id="f2515ide" cx="0" cy="0" r="1" gradientTransform="matrix(-.40625 .5625 -.5015 -.3622 7.57 16.23)" gradientUnits="userSpaceOnUse"><stop offset=".006" stop-color="#433437" /><stop offset="1" stop-color="#3b2838" /></radialGradient><radialGradient id="f2515idf" cx="0" cy="0" r="1" gradientTransform="rotate(137.643 .653 9.607)scale(.35946 .31624)" gradientUnits="userSpaceOnUse"><stop stop-color="#5c5051" /><stop offset="1" stop-color="#5c5051" stop-opacity="0" /></radialGradient><radialGradient id="f2515idg" cx="0" cy="0" r="1" gradientTransform="matrix(-4.375 0 0 -8.85937 30.375 18.89)" gradientUnits="userSpaceOnUse"><stop offset=".329" stop-color="#ffc256" /><stop offset="1" stop-color="#ff8646" /></radialGradient><radialGradient id="f2515idh" cx="0" cy="0" r="1" gradientTransform="matrix(0 4.59375 -1.28023 0 30.063 17.094)" gradientUnits="userSpaceOnUse"><stop stop-color="#ffd661" /><stop offset="1" stop-color="#ffd661" stop-opacity="0" /></radialGradient><radialGradient id="f2515idi" cx="0" cy="0" r="1" gradientTransform="matrix(-5.375 0 0 -5.125 31.188 18.89)" gradientUnits="userSpaceOnUse"><stop offset=".892" stop-color="#f37539" stop-opacity="0" /><stop offset="1" stop-color="#f37539" /></radialGradient><linearGradient id="f2515idj" x1="30.813" x2="20.5" y1="17.375" y2="17.375" gradientUnits="userSpaceOnUse"><stop stop-color="#ffe359" /><stop offset="1" stop-color="#ffbe3e" /></linearGradient><linearGradient id="f2515idk" x1="26" x2="26" y1="30.656" y2="29.438" gradientUnits="userSpaceOnUse"><stop offset=".118" stop-color="#ff835d" /><stop offset="1" stop-color="#ff835d" stop-opacity="0" /></linearGradient><linearGradient id="f2515idl" x1="19.094" x2="19.219" y1="6.313" y2="7.625" gradientUnits="userSpaceOnUse"><stop stop-color="#ffb941" /><stop offset="1" stop-color="#ffb941" stop-opacity="0" /></linearGradient><linearGradient id="f2515idm" x1="18" x2="13.813" y1="17.875" y2="17.875" gradientUnits="userSpaceOnUse"><stop stop-color="#ffd65c" /><stop offset="1" stop-color="#ff8c42" /></linearGradient><linearGradient id="f2515idn" x1="15.752" x2="14.281" y1="19.594" y2="20.625" gradientUnits="userSpaceOnUse"><stop stop-color="#ff8c42" stop-opacity="0" /><stop offset="1" stop-color="#ff8c42" /></linearGradient><linearGradient id="f2515ido" x1="7.324" x2="6.98" y1="15.998" y2="15.779" gradientUnits="userSpaceOnUse"><stop stop-color="#5c5051" stop-opacity="0" /><stop offset="1" stop-color="#5c5051" /></linearGradient><filter id="f2515idp" width="5.995" height="8.777" x="12.364" y="14.392" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix" /><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape" /><feGaussianBlur result="effect1_foregroundBlur_28327_5989" stdDeviation=".375" /></filter></defs></g>', |
| 6dd74de | | | 115 | }, |
| 6dd74de | | | 116 | }, |
| 6dd74de | | | 117 | width: 256, |
| 6dd74de | | | 118 | height: 256, |
| 6dd74de | | | 119 | }; |
| 6dd74de | | | 120 | // Simplified AWS icons with rect elements for testing issue #7185 |
| 6dd74de | | | 121 | const staticAwsIconPack = { |
| 6dd74de | | | 122 | prefix: 'aws', |
| 6dd74de | | | 123 | icons: { |
| 6dd74de | | | 124 | 'arch-amazon-cloudwatch': { |
| 6dd74de | | | 125 | width: 80, |
| 6dd74de | | | 126 | height: 80, |
| 6dd74de | | | 127 | body: '<g><rect x="0" y="0" width="80" height="80" fill="#FF4F8B" rx="4"/><path fill="#FFFFFF" d="M20 25h40v5H20zm0 10h40v5H20zm0 10h40v5H20z"/></g>', |
| 6dd74de | | | 128 | }, |
| 6dd74de | | | 129 | 'arch-amazon-route-53': { |
| 6dd74de | | | 130 | width: 80, |
| 6dd74de | | | 131 | height: 80, |
| 6dd74de | | | 132 | body: '<g><rect x="0" y="0" width="80" height="80" fill="#8C4FFF" rx="4"/><circle cx="40" cy="40" r="15" fill="#FFFFFF"/><circle cx="40" cy="40" r="8" fill="#8C4FFF"/></g>', |
| 6dd74de | | | 133 | }, |
| 6dd74de | | | 134 | 'arch-amazon-eks-cloud': { |
| 6dd74de | | | 135 | width: 80, |
| 6dd74de | | | 136 | height: 80, |
| 6dd74de | | | 137 | body: '<g><rect x="0" y="0" width="80" height="80" fill="#FF9900" rx="4"/><path fill="#FFFFFF" d="M40 20l15 10v20l-15 10-15-10V30z"/></g>', |
| 6dd74de | | | 138 | }, |
| 6dd74de | | | 139 | }, |
| 6dd74de | | | 140 | width: 80, |
| 6dd74de | | | 141 | height: 80, |
| 6dd74de | | | 142 | }; |
| 6dd74de | | | 143 | mermaid.registerIconPacks([ |
| 6dd74de | | | 144 | { |
| 6dd74de | | | 145 | name: 'fa', |
| 6dd74de | | | 146 | loader: () => staticBellIconPack, |
| 6dd74de | | | 147 | }, |
| 6dd74de | | | 148 | { |
| 6dd74de | | | 149 | name: 'fluent-emoji', |
| 6dd74de | | | 150 | loader: () => staticAwsLogoIconPack, |
| 6dd74de | | | 151 | }, |
| 6dd74de | | | 152 | { |
| 6dd74de | | | 153 | name: 'aws', |
| 6dd74de | | | 154 | loader: () => staticAwsIconPack, |
| 6dd74de | | | 155 | }, |
| 6dd74de | | | 156 | ]); |
| 6dd74de | | | 157 | await mermaid.run(); |
| 6dd74de | | | 158 | } |
| 6dd74de | | | 159 | }; |
| 6dd74de | | | 160 | |
| 6dd74de | | | 161 | /** |
| 6dd74de | | | 162 | * @param current |
| 6dd74de | | | 163 | * @param update |
| 6dd74de | | | 164 | */ |
| 6dd74de | | | 165 | function merge(current, update) { |
| 6dd74de | | | 166 | Object.keys(update).forEach(function (key) { |
| 6dd74de | | | 167 | // if update[key] exist, and it's not a string or array, |
| 6dd74de | | | 168 | // we go in one level deeper |
| 6dd74de | | | 169 | if ( |
| 6dd74de | | | 170 | current.hasOwnProperty(key) && |
| 6dd74de | | | 171 | typeof current[key] === 'object' && |
| 6dd74de | | | 172 | !Array.isArray(current[key]) |
| 6dd74de | | | 173 | ) { |
| 6dd74de | | | 174 | merge(current[key], update[key]); |
| 6dd74de | | | 175 | |
| 6dd74de | | | 176 | // if update[key] doesn't exist in current, or it's a string |
| 6dd74de | | | 177 | // or array, then assign/overwrite current[key] to update[key] |
| 6dd74de | | | 178 | } else { |
| 6dd74de | | | 179 | current[key] = update[key]; |
| 6dd74de | | | 180 | } |
| 6dd74de | | | 181 | }); |
| 6dd74de | | | 182 | return current; |
| 6dd74de | | | 183 | } |
| 6dd74de | | | 184 | |
| 6dd74de | | | 185 | const contentLoadedApi = async function () { |
| 6dd74de | | | 186 | let pos = document.location.href.indexOf('?graph='); |
| 6dd74de | | | 187 | if (pos > 0) { |
| 6dd74de | | | 188 | pos = pos + 7; |
| 6dd74de | | | 189 | const graphBase64 = document.location.href.substr(pos); |
| 6dd74de | | | 190 | const graphObj = JSON.parse(b64ToUtf8(graphBase64)); |
| 6dd74de | | | 191 | // const graph = 'hello' |
| 6dd74de | | | 192 | if (Array.isArray(graphObj.code)) { |
| 6dd74de | | | 193 | const numCodes = graphObj.code.length; |
| 6dd74de | | | 194 | const divs = []; |
| 6dd74de | | | 195 | let div; |
| 6dd74de | | | 196 | for (let i = 0; i < numCodes; i++) { |
| 6dd74de | | | 197 | div = document.createElement('div'); |
| 6dd74de | | | 198 | div.id = 'block' + i; |
| 6dd74de | | | 199 | div.className = 'mermaid'; |
| 6dd74de | | | 200 | // div.innerHTML = graphObj.code |
| 6dd74de | | | 201 | document.getElementsByTagName('body')[0].appendChild(div); |
| 6dd74de | | | 202 | divs[i] = div; |
| 6dd74de | | | 203 | } |
| 6dd74de | | | 204 | |
| 6dd74de | | | 205 | const defaultE2eCnf = { theme: 'forest', startOnLoad: false }; |
| 6dd74de | | | 206 | |
| 6dd74de | | | 207 | const cnf = merge(defaultE2eCnf, graphObj.mermaid); |
| 6dd74de | | | 208 | |
| 6dd74de | | | 209 | mermaid.initialize(cnf); |
| 6dd74de | | | 210 | |
| 6dd74de | | | 211 | for (let i = 0; i < numCodes; i++) { |
| 6dd74de | | | 212 | const { svg, bindFunctions } = await mermaid.render('newid' + i, graphObj.code[i], divs[i]); |
| 6dd74de | | | 213 | div.innerHTML = svg; |
| 6dd74de | | | 214 | bindFunctions?.(div); |
| 6dd74de | | | 215 | } |
| 6dd74de | | | 216 | } else { |
| 6dd74de | | | 217 | const div = document.createElement('div'); |
| 6dd74de | | | 218 | div.id = 'block'; |
| 6dd74de | | | 219 | div.className = 'mermaid'; |
| 6dd74de | | | 220 | console.warn('graphObj', graphObj); |
| 6dd74de | | | 221 | document.getElementsByTagName('body')[0].appendChild(div); |
| 6dd74de | | | 222 | mermaid.initialize(graphObj.mermaid); |
| 6dd74de | | | 223 | const { svg, bindFunctions } = await mermaid.render('newid', graphObj.code, div); |
| 6dd74de | | | 224 | div.innerHTML = svg; |
| 6dd74de | | | 225 | console.log(div.innerHTML); |
| 6dd74de | | | 226 | bindFunctions?.(div); |
| 6dd74de | | | 227 | } |
| 6dd74de | | | 228 | } |
| 6dd74de | | | 229 | }; |
| 6dd74de | | | 230 | |
| 6dd74de | | | 231 | if (typeof document !== 'undefined') { |
| 6dd74de | | | 232 | mermaid.initialize({ |
| 6dd74de | | | 233 | startOnLoad: false, |
| 6dd74de | | | 234 | }); |
| 6dd74de | | | 235 | /*! |
| 6dd74de | | | 236 | * Wait for document loaded before starting the execution |
| 6dd74de | | | 237 | */ |
| 6dd74de | | | 238 | window.addEventListener( |
| 6dd74de | | | 239 | 'load', |
| 6dd74de | | | 240 | function () { |
| 6dd74de | | | 241 | if (/xss.html/.exec(this.location.href)) { |
| 6dd74de | | | 242 | this.console.log('Using api'); |
| 6dd74de | | | 243 | void contentLoadedApi().finally(markRendered); |
| 6dd74de | | | 244 | } else { |
| 6dd74de | | | 245 | this.console.log('Not using api'); |
| 6dd74de | | | 246 | void contentLoaded().finally(markRendered); |
| 6dd74de | | | 247 | } |
| 6dd74de | | | 248 | }, |
| 6dd74de | | | 249 | false |
| 6dd74de | | | 250 | ); |
| 6dd74de | | | 251 | } |