fix: get chart el top, left position after rendering (#578)

* fix: get chart el top, left position after rendering * fix: calculate position when click
nhn · Feb 18, 2021 · d434d5c · d434d5c
1 parent 5007db9
commit d434d5c
Show file tree

Hide file tree

Showing 4 changed files with 31 additions and 14 deletions.
diff --git 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<ExportMenuTheme>;
     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
@@ -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
@@ -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
@@ -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,
+  };
+}