fix: wrong position of context menu with browser scroll (fix #34) (#44)

* fix: wrong position of context menu with browser scroll

* chore: change the method to get the mouse position to the utility function

chore: use pageX,Y of mouse event to get mouse position

* docs: add comment for location of wrapper element

docs/getting-started.md

@@ -20,6 +20,7 @@ When you select each menu, or click outside of the area where the menu closes.
 ## Write wrapper elements
 
 ```html
+<!-- Notice: The wrapper element must be located below the body. -->
 <!-- Tag to create the context menu -->
 <div id="tui-context-menu-container"></div>
 

src/js/contextmenu.js

@@ -6,7 +6,6 @@
 import forEachArray from 'tui-code-snippet/collection/forEachArray';
 import off from 'tui-code-snippet/domEvent/off';
 import on from 'tui-code-snippet/domEvent/on';
-import getMousePosition from 'tui-code-snippet/domEvent/getMousePosition';
 import preventDefault from 'tui-code-snippet/domEvent/preventDefault';
 import addClass from 'tui-code-snippet/domUtil/addClass';
 import closest from 'tui-code-snippet/domUtil/closest';
@@ -19,7 +18,7 @@ import debounce from 'tui-code-snippet/tricks/debounce';
 
 import FloatingLayer from './floatingLayer';
 import Map from './Map';
-import {sendHostName} from './util';
+import {sendHostName, getMousePosition} from './util';
 import tmpl from '../template/contextmenu';
 
 const DEFAULT_ZINDEX = 999;
@@ -420,10 +419,8 @@ class ContextMenu {
 
     this.activeLayer = relatedLayer;
 
-    const position = getMousePosition(clickEvent, this.activeLayer.container);
+    const {left, top} = getMousePosition(clickEvent, this.activeLayer.container);
 
-    /* clickEvent's clientX, clientY */
-    const [left, top] = position;
     const debouncedMouseMove = debounce(mouseMoveEvent => this._onMouseMove(mouseMoveEvent), opt.delay);
 
     this.cloneMouseMoveEvent = function(mouseMoveEvent) {

src/js/util.js

@@ -12,3 +12,15 @@ import sendHostname from 'tui-code-snippet/request/sendHostname';
 export const sendHostName = () => {
   sendHostname('context-menu', 'UA-129987462-1');
 };
+
+/**
+   * Get mouse postion
+   * @param {MouseEvent} clickEvent - mouse event object
+   * @returns {Object} object of mouse position contains left and top
+   * @private
+   */
+export const getMousePosition = clickEvent => {
+  const {pageX: left, pageY: top} = clickEvent;
+
+  return {left, top};
+};