forked from NextGraph/nextgraph-rs
You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
60 lines
1.7 KiB
60 lines
1.7 KiB
import type { Commit } from "../gitgraph-core";
|
|
|
|
import { createG, createPath, createText } from "./svg-elements";
|
|
|
|
export { createTooltip, PADDING };
|
|
|
|
const PADDING = 10;
|
|
const OFFSET = 10;
|
|
|
|
function createTooltip(commit: Commit): SVGElement {
|
|
const path = createPath({ d: "", fill: "#EEE" });
|
|
const text = createText({
|
|
translate: { x: OFFSET + PADDING, y: 0 },
|
|
content: `${commit.hashAbbrev} - ${commit.subject}`,
|
|
fill: "#333",
|
|
});
|
|
|
|
const commitSize = commit.style.dot.size * 2;
|
|
const tooltip = createG({
|
|
translate: { x: commitSize, y: commitSize / 2 },
|
|
children: [path],
|
|
});
|
|
|
|
const observer = new MutationObserver(() => {
|
|
const { width } = text.getBBox();
|
|
|
|
const radius = 5;
|
|
const boxHeight = 50;
|
|
const boxWidth = OFFSET + width + 2 * PADDING;
|
|
|
|
const pathD = [
|
|
"M 0,0",
|
|
`L ${OFFSET},${OFFSET}`,
|
|
`V ${boxHeight / 2 - radius}`,
|
|
`Q ${OFFSET},${boxHeight / 2} ${OFFSET + radius},${boxHeight / 2}`,
|
|
`H ${boxWidth - radius}`,
|
|
`Q ${boxWidth},${boxHeight / 2} ${boxWidth},${boxHeight / 2 - radius}`,
|
|
`V -${boxHeight / 2 - radius}`,
|
|
`Q ${boxWidth},-${boxHeight / 2} ${boxWidth - radius},-${boxHeight / 2}`,
|
|
`H ${OFFSET + radius}`,
|
|
`Q ${OFFSET},-${boxHeight / 2} ${OFFSET},-${boxHeight / 2 - radius}`,
|
|
`V -${OFFSET}`,
|
|
"z",
|
|
].join(" ");
|
|
|
|
// Ideally, it would be great to refactor these behavior into SVG elements.
|
|
// rect.setAttribute("width", boxWidth.toString());
|
|
path.setAttribute("d", pathD.toString());
|
|
});
|
|
|
|
observer.observe(tooltip, {
|
|
attributes: false,
|
|
subtree: false,
|
|
childList: true,
|
|
});
|
|
|
|
tooltip.appendChild(text);
|
|
|
|
return tooltip;
|
|
}
|
|
|