diff --git a/package.json b/package.json index a7d2f73df..81ec334e6 100644 --- a/package.json +++ b/package.json @@ -85,6 +85,7 @@ "typescript": "^4.7.4", "vite": "^3.2.3", "vite-plugin-css-injected-by-js": "^2.2.0", + "vite-svg-loader": "^4.0.0", "vitest": "^0.26.1" }, "eslintConfig": { diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index acbe3a549..223547a75 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -81,7 +81,7 @@ devDependencies: version: 4.14.191 '@types/node': specifier: latest - version: 20.5.1 + version: 20.6.2 '@typescript-eslint/eslint-plugin': specifier: ^5.46.1 version: 5.46.1(@typescript-eslint/parser@5.46.1)(eslint@8.30.0)(typescript@4.9.4) @@ -147,16 +147,19 @@ devDependencies: version: 3.1.0(webpack@5.85.0) ts-node: specifier: ^10.9.1 - version: 10.9.1(@types/node@20.5.1)(typescript@4.9.4) + version: 10.9.1(@types/node@20.6.2)(typescript@4.9.4) typescript: specifier: ^4.7.4 version: 4.9.4 vite: specifier: ^3.2.3 - version: 3.2.5(@types/node@20.5.1)(less@4.1.3)(sass@1.57.0) + version: 3.2.5(@types/node@20.6.2)(less@4.1.3)(sass@1.57.0) vite-plugin-css-injected-by-js: specifier: ^2.2.0 version: 2.2.0(vite@3.2.5) + vite-svg-loader: + specifier: ^4.0.0 + version: 4.0.0 vitest: specifier: ^0.26.1 version: 0.26.1(jsdom@20.0.3)(less@4.1.3)(sass@1.57.0) @@ -2268,6 +2271,11 @@ packages: engines: {node: '>= 10'} dev: true + /@trysound/sax@0.2.0: + resolution: {integrity: sha512-L7z9BgrNEcYyUYtF+HaEfiS5ebkh9jXqbszz7pC0hRBPaatV0XjSD3+eHrpqFemQfgwiFF0QPIarnIihIDn7OA==} + engines: {node: '>=10.13.0'} + dev: true + /@tsconfig/node10@1.0.9: resolution: {integrity: sha512-jNsYVVxU8v5g43Erja32laIDHXeoNvFEpX33OK4d6hljo3jDhCBDhx5dhCCTMWUojscpAagGiRkBKxpdl9fxqA==} @@ -2336,8 +2344,8 @@ packages: resolution: {integrity: sha512-hcU9AIQVHmPnmjRK+XUUYlILlr9pQrsqSrwov/JK1pnf3GTQowVBhx54FbvM0AU/VXGH4i3+vgXS5EguR7fysA==} dev: true - /@types/node@20.5.1: - resolution: {integrity: sha512-4tT2UrL5LBqDwoed9wZ6N3umC4Yhz3W3FloMmiiG4JwmUJWpie0c7lcnUNd4gtMKuDEO4wRVS8B6Xa0uMRsMKg==} + /@types/node@20.6.2: + resolution: {integrity: sha512-Y+/1vGBHV/cYk6OI1Na/LHzwnlNCAfU3ZNGrc1LdRe/LAIbdDPTTv/HU3M7yXN448aTVDq3eKRm2cg7iKLb8gw==} /@types/normalize-package-data@2.4.1: resolution: {integrity: sha512-Gj7cI7z+98M282Tqmp2K5EIsoouUEzbBJhQQzDE3jSIRk6r9gsz0oUokqIUR4u1R3dMHo0pDHM7sNOHyhulypw==} @@ -2365,7 +2373,7 @@ packages: resolution: {integrity: sha512-Cn6WYCm0tXv8p6k+A8PvbDG763EDpBoTzHdA+Q/MF6H3sapGjCm9NzoaJncJS9tUKSuCoDs9XHxYYsQDgxR6kw==} requiresBuild: true dependencies: - '@types/node': 20.5.1 + '@types/node': 20.6.2 dev: true optional: true @@ -2505,7 +2513,7 @@ packages: vite: ^4.0.0 vue: ^3.2.25 dependencies: - vite: 3.2.5(@types/node@20.5.1)(less@4.1.3)(sass@1.57.0) + vite: 3.2.5(@types/node@20.6.2)(less@4.1.3)(sass@1.57.0) vue: 3.2.45 dev: true @@ -3391,6 +3399,11 @@ packages: engines: {node: '>= 6'} dev: true + /commander@7.2.0: + resolution: {integrity: sha512-QrWXB+ZQSVPmIWIhtEO9H+gwHaMGYiF5ChvoJ+K9ZGHG/sVsa6yiesAD1GC/x46sET00Xlwo1u49RVVVzvcSkw==} + engines: {node: '>= 10'} + dev: true + /common-tags@1.8.2: resolution: {integrity: sha512-gk/Z852D2Wtb//0I+kRFNKKE9dIIVirjoqPoA1wJU+XePVXZfGeBpk45+A1rKO4Q43prqWBNY/MiIeRLbPWUaA==} engines: {node: '>=4.0.0'} @@ -3486,11 +3499,49 @@ packages: which: 2.0.2 dev: true + /css-select@5.1.0: + resolution: {integrity: sha512-nwoRF1rvRRnnCqqY7updORDsuqKzqYJ28+oSMaJMMgOauh3fvwHqMS7EZpIPqK8GL+g9mKxF1vP/ZjSeNjEVHg==} + dependencies: + boolbase: 1.0.0 + css-what: 6.1.0 + domhandler: 5.0.3 + domutils: 3.1.0 + nth-check: 2.1.1 + dev: true + + /css-tree@2.2.1: + resolution: {integrity: sha512-OA0mILzGc1kCOCSJerOeqDxDQ4HOh+G8NbOJFOTgOCzpw7fCBubk0fEyxp8AgOL/jvLgYA/uV0cMbe43ElF1JA==} + engines: {node: ^10 || ^12.20.0 || ^14.13.0 || >=15.0.0, npm: '>=7.0.0'} + dependencies: + mdn-data: 2.0.28 + source-map-js: 1.0.2 + dev: true + + /css-tree@2.3.1: + resolution: {integrity: sha512-6Fv1DV/TYw//QF5IzQdqsNDjx/wc8TrMBZsqjL9eW01tWb7R7k/mq+/VXfJCl7SoD5emsJop9cOByJZfs8hYIw==} + engines: {node: ^10 || ^12.20.0 || ^14.13.0 || >=15.0.0} + dependencies: + mdn-data: 2.0.30 + source-map-js: 1.0.2 + dev: true + + /css-what@6.1.0: + resolution: {integrity: sha512-HTUrgRJ7r4dsZKU6GjmpfRK1O76h97Z8MfS1G0FozR+oF2kG6Vfe8JE6zwrkbxigziPHinCJ+gCPjA9EaBDtRw==} + engines: {node: '>= 6'} + dev: true + /cssesc@3.0.0: resolution: {integrity: sha512-/Tb/JcjK111nNScGob5MNtsntNM1aCNUDipB/TkwZFhyDrrE47SOx/18wF2bbjgc3ZzCSKW1T5nt5EbFoAz/Vg==} engines: {node: '>=4'} hasBin: true + /csso@5.0.5: + resolution: {integrity: sha512-0LrrStPOdJj+SPCCrGhzryycLjwcgUSHBtxNA8aIDxf0GLsRh1cKYhB00Gd1lDOS4yGH69+SNn13+TWbVHETFQ==} + engines: {node: ^10 || ^12.20.0 || ^14.13.0 || >=15.0.0, npm: '>=7.0.0'} + dependencies: + css-tree: 2.2.1 + dev: true + /cssom@0.3.8: resolution: {integrity: sha512-b0tGHbfegbhPJpxpiBPU2sCkigAqtM9O121le6bbOlgyV+NyGyCmVfJ6QW9eRjz8CpNfWEOYBIMIGRYkLwsIYg==} dev: true @@ -3757,6 +3808,14 @@ packages: esutils: 2.0.3 dev: true + /dom-serializer@2.0.0: + resolution: {integrity: sha512-wIkAryiqt/nV5EQKqQpo3SToSOV9J0DnbJqwK7Wv/Trc92zIAYZ4FlMu+JPFW1DfGFt81ZTCGgDEabffXeLyJg==} + dependencies: + domelementtype: 2.3.0 + domhandler: 5.0.3 + entities: 4.4.0 + dev: true + /dom-to-image-more@2.13.0: resolution: {integrity: sha512-AgCc36rPQTVXI/qQoDf8xkIZ+InkJk4nCORUJBtEd1qxAPshTKYTrtjhO3aSY54HOk//KzFJ/XGwSmIK9rbaEQ==} dev: false @@ -3765,6 +3824,10 @@ packages: resolution: {integrity: sha512-6QvTW9mrGeIegrFXdtQi9pk7O/nSK6lSdXW2eqUspN5LWD7UTji2Fqw5V2YLjBpHEoU9Xl/eUWNpDeZvoyOv2w==} dev: true + /domelementtype@2.3.0: + resolution: {integrity: sha512-OLETBj6w0OsagBwdXnPdN0cnMfF9opN69co+7ZrbfPGrdpPVNBUj02spi6B1N7wChLQiPn4CSH/zJvXw56gmHw==} + dev: true + /domexception@4.0.0: resolution: {integrity: sha512-A2is4PLG+eeSfoTMA95/s4pvAoSo2mKtiM5jlHkAVewmiO8ISFTFKZjH7UAM1Atli/OT/7JHOrJRJiMKUZKYBw==} engines: {node: '>=12'} @@ -3772,6 +3835,21 @@ packages: webidl-conversions: 7.0.0 dev: true + /domhandler@5.0.3: + resolution: {integrity: sha512-cgwlv/1iFQiFnU96XXgROh8xTeetsnJiDsTc7TYCLFd9+/WNkIqPTxiM/8pSd8VIrhXGTf1Ny1q1hquVqDJB5w==} + engines: {node: '>= 4'} + dependencies: + domelementtype: 2.3.0 + dev: true + + /domutils@3.1.0: + resolution: {integrity: sha512-H78uMmQtI2AhgDJjWeQmHwJJ2bLPD3GMmO7Zja/ZZh84wkm+4ut+IUnUdRa8uCGX88DiVx1j6FRe1XfxEgjEZA==} + dependencies: + dom-serializer: 2.0.0 + domelementtype: 2.3.0 + domhandler: 5.0.3 + dev: true + /ecc-jsbn@0.1.2: resolution: {integrity: sha512-eh9O+hwRHNbG4BLTjEl3nw044CkGm5X6LoaCf7LPp7UU8Qrt47JYNi6nPX8xjW97TKGKm1ouctg0QSpZe9qrnw==} dependencies: @@ -5080,7 +5158,7 @@ packages: resolution: {integrity: sha512-KWYVV1c4i+jbMpaBC+U++4Va0cp8OisU185o73T1vo99hqi7w8tSJfUXYswwqqrjzwxa6KpRK54WhPvwf5w6PQ==} engines: {node: '>= 10.13.0'} dependencies: - '@types/node': 20.5.1 + '@types/node': 20.6.2 merge-stream: 2.0.0 supports-color: 7.2.0 dev: true @@ -5089,7 +5167,7 @@ packages: resolution: {integrity: sha512-7vuh85V5cdDofPyxn58nrPjBktZo0u9x1g8WtjQol+jZDaE+fhN+cIvTj11GndBnMnyfrUOG1sZQxCdjKh+DKg==} engines: {node: '>= 10.13.0'} dependencies: - '@types/node': 20.5.1 + '@types/node': 20.6.2 merge-stream: 2.0.0 supports-color: 8.1.1 dev: true @@ -5498,6 +5576,14 @@ packages: hasBin: true dev: false + /mdn-data@2.0.28: + resolution: {integrity: sha512-aylIc7Z9y4yzHYAJNuESG3hfhC+0Ibp/MAMiaOZgNv4pmEdFyfZhhhny4MNiAfWdBQ1RQ2mfDWmM1x8SvGyp8g==} + dev: true + + /mdn-data@2.0.30: + resolution: {integrity: sha512-GaqWWShW4kv/G9IEucWScBx9G1/vsFZZJUO+tD26M8J8z3Kw5RDQjaoZe03YAClgeS/SWPOcb4nkFBTEi5DUEA==} + dev: true + /meow@9.0.0: resolution: {integrity: sha512-+obSblOQmRhcyBt62furQqRAQpNyWXo8BuQ5bN7dG8wmwQ+vwHKp/rCFD4CrTP8CsDQD1sjoZ94K417XEUk8IQ==} engines: {node: '>=10'} @@ -6180,7 +6266,7 @@ packages: dependencies: lilconfig: 2.0.6 postcss: 8.4.20 - ts-node: 10.9.1(@types/node@20.5.1)(typescript@4.9.4) + ts-node: 10.9.1(@types/node@20.6.2)(typescript@4.9.4) yaml: 1.10.2 dev: false @@ -6986,6 +7072,19 @@ packages: webpack: 5.85.0 dev: true + /svgo@3.0.2: + resolution: {integrity: sha512-Z706C1U2pb1+JGP48fbazf3KxHrWOsLme6Rv7imFBn5EnuanDW1GPaA/P1/dvObE670JDePC3mnj0k0B7P0jjQ==} + engines: {node: '>=14.0.0'} + hasBin: true + dependencies: + '@trysound/sax': 0.2.0 + commander: 7.2.0 + css-select: 5.1.0 + css-tree: 2.3.1 + csso: 5.0.5 + picocolors: 1.0.0 + dev: true + /symbol-tree@3.2.4: resolution: {integrity: sha512-9QNk5KwDF+Bvz+PyObkmSYjI5ksVUYtjW7AU22r2NKcfLJcXp96hkDWU3+XndOsUb+AQ9QhfzfCT2O+CNWT5Tw==} dev: true @@ -7215,7 +7314,7 @@ packages: utf8-byte-length: 1.0.4 dev: true - /ts-node@10.9.1(@types/node@20.5.1)(typescript@4.9.4): + /ts-node@10.9.1(@types/node@20.6.2)(typescript@4.9.4): resolution: {integrity: sha512-NtVysVPkxxrwFGUUxGYhfux8k78pQB3JqYBXlLRZgdGUqTO5wU/UyHop5p70iEbGhB7q5KmiZiU0Y3KlJrScEw==} hasBin: true peerDependencies: @@ -7234,7 +7333,7 @@ packages: '@tsconfig/node12': 1.0.11 '@tsconfig/node14': 1.0.3 '@tsconfig/node16': 1.0.3 - '@types/node': 20.5.1 + '@types/node': 20.6.2 acorn: 8.8.1 acorn-walk: 8.2.0 arg: 4.1.3 @@ -7458,7 +7557,7 @@ packages: extsprintf: 1.3.0 dev: true - /vite-node@0.26.1(@types/node@20.5.1)(less@4.1.3)(sass@1.57.0): + /vite-node@0.26.1(@types/node@20.6.2)(less@4.1.3)(sass@1.57.0): resolution: {integrity: sha512-5FJSKZZJz48zFRKHE55WyevZe61hLMQEsqGn+ungfd60kxEztFybZ3yG9ToGFtOWNCCy7Vn5EVuXD8bdeHOSdw==} engines: {node: '>=v14.16.0'} hasBin: true @@ -7468,7 +7567,7 @@ packages: pathe: 0.2.0 source-map: 0.6.1 source-map-support: 0.5.21 - vite: 4.0.1(@types/node@20.5.1)(less@4.1.3)(sass@1.57.0) + vite: 4.0.1(@types/node@20.6.2)(less@4.1.3)(sass@1.57.0) transitivePeerDependencies: - '@types/node' - less @@ -7484,10 +7583,17 @@ packages: peerDependencies: vite: '>2.0.0-0' dependencies: - vite: 3.2.5(@types/node@20.5.1)(less@4.1.3)(sass@1.57.0) + vite: 3.2.5(@types/node@20.6.2)(less@4.1.3)(sass@1.57.0) + dev: true + + /vite-svg-loader@4.0.0: + resolution: {integrity: sha512-0MMf1yzzSYlV4MGePsLVAOqXsbF5IVxbn4EEzqRnWxTQl8BJg/cfwIzfQNmNQxZp5XXwd4kyRKF1LytuHZTnqA==} + dependencies: + '@vue/compiler-sfc': 3.2.45 + svgo: 3.0.2 dev: true - /vite@3.2.5(@types/node@20.5.1)(less@4.1.3)(sass@1.57.0): + /vite@3.2.5(@types/node@20.6.2)(less@4.1.3)(sass@1.57.0): resolution: {integrity: sha512-4mVEpXpSOgrssFZAOmGIr85wPHKvaDAcXqxVxVRZhljkJOMZi1ibLibzjLHzJvcok8BMguLc7g1W6W/GqZbLdQ==} engines: {node: ^14.18.0 || >=16.0.0} hasBin: true @@ -7512,7 +7618,7 @@ packages: terser: optional: true dependencies: - '@types/node': 20.5.1 + '@types/node': 20.6.2 esbuild: 0.15.18 less: 4.1.3 postcss: 8.4.20 @@ -7523,7 +7629,7 @@ packages: fsevents: 2.3.2 dev: true - /vite@4.0.1(@types/node@20.5.1)(less@4.1.3)(sass@1.57.0): + /vite@4.0.1(@types/node@20.6.2)(less@4.1.3)(sass@1.57.0): resolution: {integrity: sha512-kZQPzbDau35iWOhy3CpkrRC7It+HIHtulAzBhMqzGHKRf/4+vmh8rPDDdv98SWQrFWo6//3ozwsRmwQIPZsK9g==} engines: {node: ^14.18.0 || >=16.0.0} hasBin: true @@ -7548,7 +7654,7 @@ packages: terser: optional: true dependencies: - '@types/node': 20.5.1 + '@types/node': 20.6.2 esbuild: 0.16.8 less: 4.1.3 postcss: 8.4.20 @@ -7583,7 +7689,7 @@ packages: dependencies: '@types/chai': 4.3.4 '@types/chai-subset': 1.3.3 - '@types/node': 20.5.1 + '@types/node': 20.6.2 acorn: 8.8.1 acorn-walk: 8.2.0 chai: 4.3.7 @@ -7595,8 +7701,8 @@ packages: tinybench: 2.3.1 tinypool: 0.3.0 tinyspy: 1.0.2 - vite: 4.0.1(@types/node@20.5.1)(less@4.1.3)(sass@1.57.0) - vite-node: 0.26.1(@types/node@20.5.1)(less@4.1.3)(sass@1.57.0) + vite: 4.0.1(@types/node@20.6.2)(less@4.1.3)(sass@1.57.0) + vite-node: 0.26.1(@types/node@20.6.2)(less@4.1.3)(sass@1.57.0) transitivePeerDependencies: - less - sass diff --git a/src/components/DiagramFrame/Debug/Debug.vue b/src/components/DiagramFrame/Debug/Debug.vue index c900de2a3..955287700 100644 --- a/src/components/DiagramFrame/Debug/Debug.vue +++ b/src/components/DiagramFrame/Debug/Debug.vue @@ -4,20 +4,7 @@
- - - - - - + {{ gitBranch }}:{{ commitHash }}
@@ -25,10 +12,13 @@ @@ -37,9 +27,7 @@ export default { text-align: center; z-index: 10; } -.tooltip span { - border-bottom: 1px dotted; -} + .tooltip:after { display: none; content: attr(data-tooltip); diff --git a/src/components/DiagramFrame/SeqDiagram/MessageLayer/Block/Statement/Fragment/CollapseButton.vue b/src/components/DiagramFrame/SeqDiagram/MessageLayer/Block/Statement/Fragment/CollapseButton.vue index 47dde1369..1d5df0841 100644 --- a/src/components/DiagramFrame/SeqDiagram/MessageLayer/Block/Statement/Fragment/CollapseButton.vue +++ b/src/components/DiagramFrame/SeqDiagram/MessageLayer/Block/Statement/Fragment/CollapseButton.vue @@ -1,13 +1,19 @@ diff --git a/src/components/Icon/icons/close.svg b/src/components/Icon/icons/close.svg new file mode 100644 index 000000000..62072c9b2 --- /dev/null +++ b/src/components/Icon/icons/close.svg @@ -0,0 +1,14 @@ + diff --git a/src/components/Icon/icons/collapse-expanded.svg b/src/components/Icon/icons/collapse-expanded.svg new file mode 100644 index 000000000..18c70a167 --- /dev/null +++ b/src/components/Icon/icons/collapse-expanded.svg @@ -0,0 +1 @@ + diff --git a/src/components/Icon/icons/collapse-unexpanded.svg b/src/components/Icon/icons/collapse-unexpanded.svg new file mode 100644 index 000000000..1b926f760 --- /dev/null +++ b/src/components/Icon/icons/collapse-unexpanded.svg @@ -0,0 +1 @@ + diff --git a/src/components/Icon/icons/debug.svg b/src/components/Icon/icons/debug.svg new file mode 100644 index 000000000..de96e6536 --- /dev/null +++ b/src/components/Icon/icons/debug.svg @@ -0,0 +1,15 @@ + + + + + + diff --git a/src/components/Icon/icons/message-arrow.svg b/src/components/Icon/icons/message-arrow.svg new file mode 100644 index 000000000..a9c1bba04 --- /dev/null +++ b/src/components/Icon/icons/message-arrow.svg @@ -0,0 +1,10 @@ + + + + diff --git a/src/components/Icon/icons/non-selected-cycle.svg b/src/components/Icon/icons/non-selected-cycle.svg new file mode 100644 index 000000000..58b83e7a7 --- /dev/null +++ b/src/components/Icon/icons/non-selected-cycle.svg @@ -0,0 +1,9 @@ + + + diff --git a/src/components/Icon/icons/privacy.svg b/src/components/Icon/icons/privacy.svg new file mode 100644 index 000000000..2e71a0a80 --- /dev/null +++ b/src/components/Icon/icons/privacy.svg @@ -0,0 +1,10 @@ + + + + diff --git a/src/components/Icon/icons/selected-cycle.svg b/src/components/Icon/icons/selected-cycle.svg new file mode 100644 index 000000000..405eb005a --- /dev/null +++ b/src/components/Icon/icons/selected-cycle.svg @@ -0,0 +1,17 @@ + + + + diff --git a/src/components/Icon/icons/theme.svg b/src/components/Icon/icons/theme.svg new file mode 100644 index 000000000..56a2cd552 --- /dev/null +++ b/src/components/Icon/icons/theme.svg @@ -0,0 +1,5 @@ + + + diff --git a/src/components/Icon/icons/tip.svg b/src/components/Icon/icons/tip.svg new file mode 100644 index 000000000..bffd21f5d --- /dev/null +++ b/src/components/Icon/icons/tip.svg @@ -0,0 +1,5 @@ + + + diff --git a/src/components/Icon/icons/zoom-in.svg b/src/components/Icon/icons/zoom-in.svg new file mode 100644 index 000000000..02d58f03a --- /dev/null +++ b/src/components/Icon/icons/zoom-in.svg @@ -0,0 +1,8 @@ + + + + diff --git a/src/components/Icon/icons/zoom-out.svg b/src/components/Icon/icons/zoom-out.svg new file mode 100644 index 000000000..c90af1308 --- /dev/null +++ b/src/components/Icon/icons/zoom-out.svg @@ -0,0 +1,6 @@ + + + + diff --git a/vite.config.js b/vite.config.js index 5d1636f28..1743a1de1 100644 --- a/vite.config.js +++ b/vite.config.js @@ -2,6 +2,7 @@ import { resolve } from 'path'; import { defineConfig } from 'vite'; import createVuePlugin from '@vitejs/plugin-vue'; import { execSync } from 'child_process'; +import svgLoader from 'vite-svg-loader'; function getCypressHtmlFiles() { const cypressFolder = resolve(__dirname, 'cy'); @@ -35,6 +36,7 @@ export default defineConfig({ }, }, }), + svgLoader(), ], test: { environment: 'jsdom',