sim1222/test1
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

enhance(client): Chartjsのツールチップを自前に

Browse Source
This commit is contained in:
syuilo
2022-01-31 21:07:33 +09:00
parent a2dcf2fc41
commit 8560e107bc
9 changed files with 138 additions and 29 deletions
Download Patch File Download Diff File Expand all files Collapse all files

42
packages/client/src/components/ui/tooltip.vue
View File

@ -12,9 +12,11 @@ import * as os from '@/os';
const props = withDefaults(defineProps<{
showing: boolean;
source: HTMLElement;
targetElement?: HTMLElement;
x?: number;
y?: number;
text?: string;
maxWidth?; number;
maxWidth?: number;
}>(), {
maxWidth: 250,
});
@ -29,13 +31,25 @@ const zIndex = os.claimZIndex('high');
const setPosition = () => {
if (el.value == null) return;
const rect = props.source.getBoundingClientRect();
const contentWidth = el.value.offsetWidth;
const contentHeight = el.value.offsetHeight;
let left = rect.left + window.pageXOffset + (props.source.offsetWidth / 2);
let top = rect.top + window.pageYOffset - contentHeight;
let left: number;
let top: number;
let rect: DOMRect;
if (props.targetElement) {
rect = props.targetElement.getBoundingClientRect();
left = rect.left + window.pageXOffset + (props.targetElement.offsetWidth / 2);
top = rect.top + window.pageYOffset - contentHeight;
el.value.style.transformOrigin = 'center bottom';
} else {
left = props.x;
top = props.y - contentHeight;
}
left -= (el.value.offsetWidth / 2);
@ -43,9 +57,14 @@ const setPosition = () => {
left = window.innerWidth - contentWidth + window.pageXOffset - 1;
}
// ツールチップを上に向かって表示するスペースがなければ下に向かって出す
if (top - window.pageYOffset < 0) {
top = rect.top + window.pageYOffset + props.source.offsetHeight;
el.value.style.transformOrigin = 'center top';
if (props.targetElement) {
top = rect.top + window.pageYOffset + props.targetElement.offsetHeight;
el.value.style.transformOrigin = 'center top';
} else {
top = props.y;
}
}
el.value.style.left = left + 'px';
@ -54,11 +73,6 @@ const setPosition = () => {
onMounted(() => {
nextTick(() => {
if (props.source == null) {
emit('closed');
return;
}
setPosition();
let loopHandler;
@ -101,6 +115,6 @@ onMounted(() => {
border-radius: 4px;
border: solid 0.5px var(--divider);
pointer-events: none;
transform-origin: center bottom;
transform-origin: center center;
}
</style>