diff --git a/apps/chart/src/component/exportMenu.ts b/apps/chart/src/component/exportMenu.ts index 6b5381600..8e5a60ced 100644 --- a/apps/chart/src/component/exportMenu.ts +++ b/apps/chart/src/component/exportMenu.ts @@ -7,7 +7,8 @@ import { execDownload, downloadSpreadSheet } from '@src/helpers/downloader'; import { isString } from '@src/helpers/utils'; import { RectResponderModel } from '@t/components/series'; import { ExportMenuTheme, ExportMenuButtonTheme, FontTheme, ExportMenuPanelTheme } from '@t/theme'; -import { getFontStyleString } from '@src/helpers/style'; +import { getFontStyleString, getTranslateString } from '@src/helpers/style'; +import { getScrollPosition } from '@src/helpers/tooltip'; const EXPORT_MENU_WIDTH = 140; export const BUTTON_RECT_SIZE = 24; @@ -41,6 +42,7 @@ export default class ExportMenu extends Component { this.eventBus.emit('needDraw'); if (this.opened) { + this.applyPanelWrapperStyle(); this.chartEl.appendChild(this.exportMenuEl); } else { this.chartEl.removeChild(this.exportMenuEl); @@ -73,14 +75,12 @@ export default class ExportMenu extends Component { this.toggleExportMenu(); }; - applyExportButtonPanelStyle(chartWidth: number) { - const exportMenu = this.exportMenuEl.querySelector('.toastui-chart-export-menu')!; + applyExportButtonPanelStyle() { const exportMenuTitle = this.exportMenuEl.querySelector('.toastui-chart-export-menu-title')!; const menuBtnWrapper = this.exportMenuEl.querySelector( '.toastui-chart-export-menu-btn-wrapper' )!; - exportMenu.setAttribute('style', this.makePanelWrapperStyle(chartWidth)); exportMenuTitle.setAttribute('style', this.makePanelStyle('header')); menuBtnWrapper.setAttribute('style', this.makePanelStyle('body')); } @@ -131,7 +131,7 @@ export default class ExportMenu extends Component { this.theme = theme.exportMenu as Required; this.data = { series, categories: rawCategories }; this.fileName = this.getFileName(options?.exportMenu?.filename || chart.title); - this.applyExportButtonPanelStyle(chart.width); + this.applyExportButtonPanelStyle(); this.rect = layout.exportMenu; this.models.exportMenuButton = [ { @@ -154,13 +154,20 @@ export default class ExportMenu extends Component { ]; } - makePanelWrapperStyle(chartWidth: number) { - const { top, left } = this.chartEl.getBoundingClientRect(); - const topPosition = top + padding.Y + BUTTON_RECT_SIZE + 5; - const leftPosition = left + chartWidth - EXPORT_MENU_WIDTH - padding.X; + applyPanelWrapperStyle() { + const exportMenu = this.exportMenuEl.querySelector('.toastui-chart-export-menu')!; + const { top, left, width } = this.chartEl.getBoundingClientRect(); + const { scrollX, scrollY } = getScrollPosition(); + const x = left + width - EXPORT_MENU_WIDTH - padding.X + scrollX; + const y = top + padding.Y + BUTTON_RECT_SIZE + 5 + scrollY; const { borderRadius, borderWidth, borderColor } = this.theme.panel; - return `top: ${topPosition}px; left: ${leftPosition}px; border: ${borderWidth}px solid ${borderColor}; border-radius: ${borderRadius}px;`; + const style = ` + transform: ${getTranslateString(x, y)}; + border: ${borderWidth}px solid ${borderColor}; + border-radius: ${borderRadius}px;`; + + exportMenu.setAttribute('style', style); } makePanelStyle(type: 'header' | 'body') { diff --git a/apps/chart/src/component/tooltip.ts b/apps/chart/src/component/tooltip.ts index ffca92a95..82576604f 100644 --- a/apps/chart/src/component/tooltip.ts +++ b/apps/chart/src/component/tooltip.ts @@ -8,7 +8,7 @@ import { TooltipModelName, TooltipData, } from '@t/components/tooltip'; -import { getValueString } from '@src/helpers/tooltip'; +import { getScrollPosition, getValueString } from '@src/helpers/tooltip'; import { getBodyTemplate, tooltipTemplates } from '@src/helpers/tooltipTemplate'; import { isBoolean, isNumber, isString, isUndefined } from '@src/helpers/utils'; import { SeriesDataType, TooltipTemplateFunc, TooltipFormatter } from '@t/options'; @@ -81,9 +81,10 @@ export default class Tooltip extends Component { : y; } - // pageXOffset, pageYOffset for IE - x += window.scrollX || window.pageXOffset; - y += window.scrollY || window.pageYOffset; + const { scrollX, scrollY } = getScrollPosition(); + + x += scrollX; + y += scrollY; return { x, y }; } diff --git a/apps/chart/src/css/chart.css b/apps/chart/src/css/chart.css index 0ea7a6958..1b2272739 100644 --- a/apps/chart/src/css/chart.css +++ b/apps/chart/src/css/chart.css @@ -3,6 +3,8 @@ .toastui-chart-export-menu { font-family: Arial, sans-serif; position: absolute; + top: 0; + left: 0; background: #fff; user-select: none; box-sizing: border-box; diff --git a/apps/chart/src/helpers/tooltip.ts b/apps/chart/src/helpers/tooltip.ts index ba5794167..4ba898fc8 100644 --- a/apps/chart/src/helpers/tooltip.ts +++ b/apps/chart/src/helpers/tooltip.ts @@ -20,3 +20,10 @@ export function getValueString(value: TooltipDataValue) { return result; } + +export function getScrollPosition() { + return { + scrollX: window.scrollX ?? window.pageXOffset, + scrollY: window.scrollY ?? window.pageYOffset, + }; +}