mirror of
https://github.com/mermaid-js/mermaid.git
synced 2025-10-11 01:59:41 +02:00
Compare commits
3 Commits
tooltip-po
...
renovate/p
Author | SHA1 | Date | |
---|---|---|---|
![]() |
b229d94bb3 | ||
![]() |
c728d864c8 | ||
![]() |
99f17bea3a |
@@ -1,5 +0,0 @@
|
||||
---
|
||||
'mermaid': patch
|
||||
---
|
||||
|
||||
fix: Correct tooltip placement to appear near hovered element
|
2
.github/workflows/e2e-timings.yml
vendored
2
.github/workflows/e2e-timings.yml
vendored
@@ -58,7 +58,7 @@ jobs:
|
||||
echo "EOF" >> $GITHUB_OUTPUT
|
||||
|
||||
- name: Commit and create pull request
|
||||
uses: peter-evans/create-pull-request@915d841dae6a4f191bb78faf61a257411d7be4d2
|
||||
uses: peter-evans/create-pull-request@46cdba753c74545733b821043d64bd6925fc4da9
|
||||
with:
|
||||
add-paths: |
|
||||
cypress/timings.json
|
||||
|
@@ -64,7 +64,7 @@
|
||||
},
|
||||
"devDependencies": {
|
||||
"@applitools/eyes-cypress": "^3.55.2",
|
||||
"@argos-ci/cypress": "^6.1.1",
|
||||
"@argos-ci/cypress": "^6.1.3",
|
||||
"@changesets/changelog-github": "^0.5.1",
|
||||
"@changesets/cli": "^2.29.7",
|
||||
"@cspell/eslint-plugin": "^8.19.4",
|
||||
|
@@ -1,4 +1,4 @@
|
||||
import { select } from 'd3';
|
||||
import { select, type Selection } from 'd3';
|
||||
import { log } from '../../logger.js';
|
||||
import { getConfig } from '../../diagram-api/diagramAPI.js';
|
||||
import common from '../common/common.js';
|
||||
@@ -473,61 +473,43 @@ export class ClassDB implements DiagramDB {
|
||||
LOLLIPOP: 4,
|
||||
};
|
||||
|
||||
// Utility function to escape HTML meta-characters
|
||||
private escapeHtml(str: string): string {
|
||||
return str
|
||||
.replace(/&/g, '&')
|
||||
.replace(/</g, '<')
|
||||
.replace(/>/g, '>')
|
||||
.replace(/"/g, '"')
|
||||
.replace(/'/g, ''');
|
||||
}
|
||||
|
||||
private readonly setupToolTips = (element: Element) => {
|
||||
let tooltipElem = select<HTMLDivElement, unknown>('.mermaidTooltip');
|
||||
if (tooltipElem.empty()) {
|
||||
let tooltipElem: Selection<HTMLDivElement, unknown, HTMLElement, unknown> =
|
||||
select('.mermaidTooltip');
|
||||
// @ts-expect-error - Incorrect types
|
||||
if ((tooltipElem._groups || tooltipElem)[0][0] === null) {
|
||||
tooltipElem = select('body')
|
||||
.append('div')
|
||||
.attr('class', 'mermaidTooltip')
|
||||
.style('opacity', 0)
|
||||
.style('position', 'absolute')
|
||||
.style('text-align', 'center')
|
||||
.style('max-width', '200px')
|
||||
.style('padding', '2px')
|
||||
.style('font-size', '12px')
|
||||
.style('background', '#ffffde')
|
||||
.style('border', '1px solid #333')
|
||||
.style('border-radius', '2px')
|
||||
.style('pointer-events', 'none')
|
||||
.style('z-index', '100');
|
||||
.style('opacity', 0);
|
||||
}
|
||||
|
||||
const svg = select(element).select('svg');
|
||||
|
||||
const nodes = svg.selectAll('g').filter(function () {
|
||||
return select(this).attr('title') !== null;
|
||||
});
|
||||
|
||||
const nodes = svg.selectAll('g.node');
|
||||
nodes
|
||||
.on('mouseover', (event: MouseEvent) => {
|
||||
const el = select(event.currentTarget as HTMLElement);
|
||||
const title = el.attr('title');
|
||||
if (!title) {
|
||||
// Don't try to draw a tooltip if no data is provided
|
||||
if (title === null) {
|
||||
return;
|
||||
}
|
||||
// @ts-ignore - getBoundingClientRect is not part of the d3 type definition
|
||||
const rect = this.getBoundingClientRect();
|
||||
|
||||
const rect = (event.currentTarget as Element).getBoundingClientRect();
|
||||
tooltipElem.transition().duration(200).style('opacity', '.9');
|
||||
tooltipElem
|
||||
.html(this.escapeHtml(title).replace(/<br\/>/g, '<br/>'))
|
||||
.style('left', `${window.scrollX + rect.left + rect.width / 2}px`)
|
||||
.style('top', `${window.scrollY + rect.bottom + 4}px`);
|
||||
|
||||
.text(el.attr('title'))
|
||||
.style('left', window.scrollX + rect.left + (rect.right - rect.left) / 2 + 'px')
|
||||
.style('top', window.scrollY + rect.top - 14 + document.body.scrollTop + 'px');
|
||||
tooltipElem.html(tooltipElem.html().replace(/<br\/>/g, '<br/>'));
|
||||
el.classed('hover', true);
|
||||
})
|
||||
.on('mouseout', (event: MouseEvent) => {
|
||||
tooltipElem.transition().duration(500).style('opacity', 0);
|
||||
select(event.currentTarget as HTMLElement).classed('hover', false);
|
||||
const el = select(event.currentTarget as HTMLElement);
|
||||
el.classed('hover', false);
|
||||
});
|
||||
};
|
||||
|
||||
|
@@ -611,21 +611,6 @@ You have to call mermaid.initialize.`
|
||||
const el = select(e.currentTarget as Element);
|
||||
el.classed('hover', false);
|
||||
});
|
||||
// @ts-ignore TODO: fix this
|
||||
tooltipElem = select('body')
|
||||
.append('div')
|
||||
.attr('class', 'mermaidTooltip')
|
||||
.style('opacity', 0)
|
||||
.style('position', 'absolute')
|
||||
.style('text-align', 'center')
|
||||
.style('max-width', '200px')
|
||||
.style('padding', '2px')
|
||||
.style('font-size', '12px')
|
||||
.style('background', '#ffffde')
|
||||
.style('border', '1px solid #333')
|
||||
.style('border-radius', '2px')
|
||||
.style('pointer-events', 'none')
|
||||
.style('z-index', '100');
|
||||
}
|
||||
|
||||
/**
|
||||
|
44
pnpm-lock.yaml
generated
44
pnpm-lock.yaml
generated
@@ -17,8 +17,8 @@ importers:
|
||||
specifier: ^3.55.2
|
||||
version: 3.55.2(encoding@0.1.13)(typescript@5.7.3)
|
||||
'@argos-ci/cypress':
|
||||
specifier: ^6.1.1
|
||||
version: 6.1.1(cypress@14.5.4)
|
||||
specifier: ^6.1.3
|
||||
version: 6.1.3(cypress@14.5.4)
|
||||
'@changesets/changelog-github':
|
||||
specifier: ^0.5.1
|
||||
version: 0.5.1(encoding@0.1.13)
|
||||
@@ -793,26 +793,26 @@ packages:
|
||||
resolution: {integrity: sha512-8mBaNNJ0zUBlb09ycc8aFTKajoqEu+E7M7kdV1IENIwuVOI3ecM6x9vr4ptWQz0LTnel7M+L3NPqAGJqoQ3AKA==}
|
||||
engines: {node: '>=12.13.0'}
|
||||
|
||||
'@argos-ci/api-client@0.11.0':
|
||||
resolution: {integrity: sha512-mv7LWrJfEDjjs+CmAJaM1GIexpb3A8TwuyTUCTKgDp/SHdbU0uF8uC6lV4P/mfeGIvBYZzIRKq/frd+IETlC2g==}
|
||||
'@argos-ci/api-client@0.12.0':
|
||||
resolution: {integrity: sha512-WfhI+StLJKIKERWQaIm7Kv1/k+YO/CYIp3djDVhZIU6mv/8yalyNXHnkRC6ofq1kPpmRvoag1KW79/C2WsB4Ag==}
|
||||
engines: {node: '>=20.0.0'}
|
||||
|
||||
'@argos-ci/browser@5.0.0':
|
||||
resolution: {integrity: sha512-SKAD7EXoLX4u50dzTIT/ABnpD284+DnBfoJM0ZrTIav2eiiVJyknNKSznF5w118lYGnYvugTXbKMnukGPzJeOA==}
|
||||
engines: {node: '>=20.0.0'}
|
||||
|
||||
'@argos-ci/core@4.1.5':
|
||||
resolution: {integrity: sha512-tPsbnSuHEClkdGLUU/qHTNsMe3kAPBvz0DK0nkv6Z18N0imEbzVg+ggmcTmc2x2yEm7i1V456Z2MLhFvTqXnlw==}
|
||||
'@argos-ci/core@4.2.0':
|
||||
resolution: {integrity: sha512-3RNyBZ84pYfQ8dn/Ivv5ls2x2rgqFuh8wA8e4ugggA5lx2dE7a6yghJw8cPzud+zbHrpOntl/HBM3akh2SXLkw==}
|
||||
engines: {node: '>=20.0.0'}
|
||||
|
||||
'@argos-ci/cypress@6.1.1':
|
||||
resolution: {integrity: sha512-fs6K2o7vEiAjBtQhrB6cp7YG6beYBRI9WyVbAHRVYyhdEic36agAqQ7/q3tx8d+uf7nXjjtZuW7KGUxjBmC9MA==}
|
||||
'@argos-ci/cypress@6.1.3':
|
||||
resolution: {integrity: sha512-JlBabUsksKXH7QT2M47dhBNHRxNwW+GQ1lvBT/mgGaFJX8P/GqLkEEmKolf1YBn28MFemQmjuK4G+z5Pjs3rLg==}
|
||||
engines: {node: '>=20.0.0'}
|
||||
peerDependencies:
|
||||
cypress: ^12.0.0 || ^13.0.0 || ^14.0.0
|
||||
|
||||
'@argos-ci/util@3.1.0':
|
||||
resolution: {integrity: sha512-QM0IwJGm9YsRdsvTAskQab9iXpQOTOOLb+h9Yev76L2TzoLZ2tM9QO+pYNNlX9YLK5dYr/H/pBNQ1lWr130Jjw==}
|
||||
'@argos-ci/util@3.1.1':
|
||||
resolution: {integrity: sha512-sGb9PS7yqdVVtxpxRD1Nfter3kaioC4nPPTknVmMSqo2GQKO1gdmjMJtwHY+Nf9FgiMfwpTCnk8Rrf0pjS3Sug==}
|
||||
engines: {node: '>=20.0.0'}
|
||||
|
||||
'@asamuzakjp/css-color@3.2.0':
|
||||
@@ -7603,8 +7603,8 @@ packages:
|
||||
resolution: {integrity: sha512-7x81NCL719oNbsq/3mh+hVrAWmFuEYUqrq/Iw3kUzH8ReypT9QQ0BLoJS7/G9k6N81XjW4qHWtjWwe/9eLy1EQ==}
|
||||
engines: {node: '>=12'}
|
||||
|
||||
openapi-fetch@0.14.0:
|
||||
resolution: {integrity: sha512-PshIdm1NgdLvb05zp8LqRQMNSKzIlPkyMxYFxwyHR+UlKD4t2nUjkDhNxeRbhRSEd3x5EUNh2w5sJYwkhOH4fg==}
|
||||
openapi-fetch@0.14.1:
|
||||
resolution: {integrity: sha512-l7RarRHxlEZYjMLd/PR0slfMVse2/vvIAGm75/F7J6MlQ8/b9uUQmUF2kCPrQhJqMXSxmYWObVgeYXbFYzZR+A==}
|
||||
|
||||
openapi-typescript-helpers@0.0.15:
|
||||
resolution: {integrity: sha512-opyTPaunsklCBpTK8JGef6mfPhLSnyy5a0IN9vKtx3+4aExf+KxEqYwIy3hqkedXIB97u357uLMJsOnm3GVjsw==}
|
||||
@@ -10298,19 +10298,19 @@ snapshots:
|
||||
|
||||
'@applitools/utils@1.12.0': {}
|
||||
|
||||
'@argos-ci/api-client@0.11.0':
|
||||
'@argos-ci/api-client@0.12.0':
|
||||
dependencies:
|
||||
debug: 4.4.3(supports-color@8.1.1)
|
||||
openapi-fetch: 0.14.0
|
||||
openapi-fetch: 0.14.1
|
||||
transitivePeerDependencies:
|
||||
- supports-color
|
||||
|
||||
'@argos-ci/browser@5.0.0': {}
|
||||
|
||||
'@argos-ci/core@4.1.5':
|
||||
'@argos-ci/core@4.2.0':
|
||||
dependencies:
|
||||
'@argos-ci/api-client': 0.11.0
|
||||
'@argos-ci/util': 3.1.0
|
||||
'@argos-ci/api-client': 0.12.0
|
||||
'@argos-ci/util': 3.1.1
|
||||
convict: 6.2.4
|
||||
debug: 4.4.3(supports-color@8.1.1)
|
||||
fast-glob: 3.3.3
|
||||
@@ -10319,17 +10319,17 @@ snapshots:
|
||||
transitivePeerDependencies:
|
||||
- supports-color
|
||||
|
||||
'@argos-ci/cypress@6.1.1(cypress@14.5.4)':
|
||||
'@argos-ci/cypress@6.1.3(cypress@14.5.4)':
|
||||
dependencies:
|
||||
'@argos-ci/browser': 5.0.0
|
||||
'@argos-ci/core': 4.1.5
|
||||
'@argos-ci/util': 3.1.0
|
||||
'@argos-ci/core': 4.2.0
|
||||
'@argos-ci/util': 3.1.1
|
||||
cypress: 14.5.4
|
||||
cypress-wait-until: 3.0.2
|
||||
transitivePeerDependencies:
|
||||
- supports-color
|
||||
|
||||
'@argos-ci/util@3.1.0': {}
|
||||
'@argos-ci/util@3.1.1': {}
|
||||
|
||||
'@asamuzakjp/css-color@3.2.0':
|
||||
dependencies:
|
||||
@@ -18528,7 +18528,7 @@ snapshots:
|
||||
is-docker: 2.2.1
|
||||
is-wsl: 2.2.0
|
||||
|
||||
openapi-fetch@0.14.0:
|
||||
openapi-fetch@0.14.1:
|
||||
dependencies:
|
||||
openapi-typescript-helpers: 0.0.15
|
||||
|
||||
|
Reference in New Issue
Block a user