evui 3.4.9 → 3.4.10

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "evui",
-  "version": "3.4.9",
+  "version": "3.4.10",
   "description": "A EXEM Library project",
   "author": "exem <dev_client@ex-em.com>",
   "license": "MIT",

package/src/components/chart/chart.core.js

@@ -1,4 +1,3 @@
-import throttle from '@/common/utils.throttle';
 import { mobileCheck } from '@/common/utils';
 import Model from './model';
 import TimeScale from './scale/scale.time';
@@ -134,10 +133,6 @@ class EvChart {
 
     if (tooltip.use) {
       this.createTooltipDOM();
-
-      if (tooltip.throttledMove) {
-        this.onMouseMove = throttle(this.onMouseMove, 30);
-      }
     }
 
     this.createEventFunctions?.();

package/src/components/chart/plugins/plugins.interaction.js

@@ -1,4 +1,5 @@
 import { numberWithComma } from '@/common/utils';
+import throttle from '@/common/utils.throttle';
 import { cloneDeep, defaultsDeep, inRange } from 'lodash-es';
 import dayjs from 'dayjs';
 
@@ -33,11 +34,9 @@ const modules = {
       this.overlayClear();
 
       if (Object.keys(hitInfo.items).length) {
-        if ((type !== 'scatter' && type !== 'heatMap') || tooltip.use) {
+        if (tooltip.use) {
           this.drawItemsHighlight(hitInfo, ctx);
-        }
 
-        if (tooltip.use) {
           if (tooltip?.formatter?.html) {
             this.drawCustomTooltip(hitInfo?.items);
             this.setCustomTooltipLayoutPosition(hitInfo, e);
@@ -349,6 +348,9 @@ const modules = {
     if (this.options?.tooltip?.useScrollbar) {
       this.overlayCanvas.addEventListener('wheel', this.onWheel, { passive: false });
     }
+    if (this.options?.tooltip?.throttledMove) {
+      this.onMouseMove = throttle(this.onMouseMove, 30);
+    }
 
     this.overlayCanvas.addEventListener('mousemove', this.onMouseMove);
     this.overlayCanvas.addEventListener('mouseleave', this.onMouseLeave);

package/src/components/chart/plugins/plugins.scrollbar.js

@@ -33,6 +33,7 @@ const module = {
       scrollbarOpt.type = axisOpt?.[0]?.type;
       scrollbarOpt.range = axisOpt?.[0]?.range || null;
 
+      this.initScrollbarRange(dir);
       this.createScrollbarLayout(dir);
       this.createScrollbar(dir);
       this.createScrollEvent(dir);
@@ -40,31 +41,29 @@ const module = {
     }
   },
 
-  checkValidRange(dir) {
+  initScrollbarRange(dir) {
     const scrollbarOpt = this.scrollbar[dir];
     const axesType = scrollbarOpt.type;
 
     if (scrollbarOpt.range?.length) {
       const [min, max] = scrollbarOpt.range;
-
-      if (!(truthyNumber(min) && truthyNumber(max))) {
-        return true;
-      }
-
-      if (axesType === 'step') {
-        const labels = this.options.type === 'heatMap' ? this.data.labels[dir] : this.data.labels;
-        if (min < 0 || max > labels.length - 1) {
-          return true;
-        }
-      } else {
-        const minMax = this.minMax[dir]?.[0];
-        if (+min < +minMax.min || +max > +minMax.max) {
-          return true;
+      let limitMin;
+      let limitMax;
+
+      if ((truthyNumber(min) && truthyNumber(max))) {
+        if (axesType === 'step') {
+          const labels = this.options.type === 'heatMap' ? this.data.labels[dir] : this.data.labels;
+          limitMin = 0;
+          limitMax = labels.length - 1;
+        } else {
+          const minMax = this.minMax[dir]?.[0];
+          limitMin = +minMax.min;
+          limitMax = +minMax.max;
         }
+        scrollbarOpt.range[0] = +min < limitMin ? limitMin : +min;
+        scrollbarOpt.range[1] = +max > limitMax ? limitMax : +max;
       }
     }
-
-    return false;
   },
 
   /**
@@ -95,6 +94,7 @@ const module = {
     const isUpdateAxesRange = !isEqual(newOpt?.[0]?.range, axisOpt?.[0]?.range);
     if (isUpdateAxesRange || updateData) {
       this.scrollbar[dir].range = newOpt?.[0]?.range || null;
+      this.initScrollbarRange(dir);
     }
     this.scrollbar[dir].use = !!newOpt?.[0].scrollbar?.use;
   },
@@ -104,16 +104,10 @@ const module = {
    */
   updateScrollbarPosition() {
     if (this.scrollbar.x?.use && this.scrollbar.x?.isInit) {
-      if (this.checkValidRange('x')) {
-        return;
-      }
       this.setScrollbarPosition('x');
     }
 
     if (this.scrollbar.y?.use && this.scrollbar.y?.isInit) {
-      if (this.checkValidRange('y')) {
-        return;
-      }
       this.setScrollbarPosition('y');
     }
   },

package/src/components/chart/scale/scale.js

@@ -74,8 +74,13 @@ class Scale {
 
     const range = scrollbarOpt?.use ? scrollbarOpt?.range : this.range;
     if (range?.length === 2) {
-      maxValue = range[1] > +minMax.max ? +minMax.max : range[1];
-      minValue = range[0] < +minMax.min ? +minMax.min : range[0];
+      if (this.options.type === 'heatMap') {
+        maxValue = range[1] > +minMax.max ? +minMax.max : range[1];
+        minValue = range[0] < +minMax.min ? +minMax.min : range[0];
+      } else {
+        maxValue = range[1];
+        minValue = range[0];
+      }
     } else {
       maxValue = minMax.max;
       minValue = minMax.min;

package/src/components/grid/Grid.vue

@@ -54,21 +54,24 @@
             />
             <div
               class="filtering-items__item"
-              @click="onClickFilteringItem(
-                filteringItemsByColumn[field]?.[0].caption,
-                filteringItemsByColumn[field]
+              @click.stop="onClickFilteringItem(
+                {
+                  caption: filteringItemsByColumn[field]?.[idx].caption,
+                  field: field,
+                },
+                filteringItemsByColumn[field],
                 )"
             >
               <span class="filtering-items__item--title">
-                {{ filteringItemsByColumn[field]?.[0].caption }}
+                {{ filteringItemsByColumn[field]?.[idx].caption }}
               </span>
               <span
                 v-if="filteringItemsByColumn[field].length < 2"
                 class="filtering-items__item--value"
-                :title="`${filteringItemsByColumn[field][0].value}`"
+                :title="`${filteringItemsByColumn[field][idx].value}`"
               >
-                {{ filteringItemsByColumn[field]?.[0].comparison }}
-                {{ filteringItemsByColumn[field]?.[0].value }}
+                {{ filteringItemsByColumn[field]?.[idx].comparison }}
+                {{ filteringItemsByColumn[field]?.[idx].value }}
               </span>
               <span
                 v-else
@@ -108,7 +111,7 @@
                 />
                 <div class="filtering-items__item">
                   <span class="filtering-items__item--title">
-                    {{ selectedFilteringFiled }}
+                    {{ selectedFilteringColumn.caption }}
                   </span>
                   <span class="filtering-items__item--value">
                     {{ field.comparison }}
@@ -117,7 +120,11 @@
                   <ev-icon
                     class="filtering-items__item--remove"
                     icon="ev-icon-s-close"
-                    @click="removeFiltering({field: selectedFilteringFiled, idx})"
+                    @click="removeFiltering(
+                      {
+                        field: selectedFilteringColumn.field,
+                        idx,
+                      })"
                   />
                 </div>
               </template>
@@ -318,7 +325,6 @@
         }"
         @scroll="onScroll"
         @contextmenu="onContextMenu($event)"
-        @contextmenu.prevent="menu.show"
       >
         <!-- vScroll Top -->
         <div
@@ -423,7 +429,6 @@
                   <span
                     class="row-contextmenu__btn"
                     @click="onContextMenu($event)"
-                    @click.prevent="menu.show"
                   >
                     <slot name="contextmenuIcon"></slot>
                   </span>
@@ -433,7 +438,6 @@
                     icon="ev-icon-warning2"
                     class="row-contextmenu__btn"
                     @click="onContextMenu($event)"
-                    @click.prevent="menu.show"
                   />
                 </template>
               </td>
@@ -697,6 +701,7 @@ export default {
       isSorting: false,
       sortField: '',
       sortOrder: '',
+      sortColumn: {},
     });
     const contextInfo = reactive({
       menu: null,
@@ -767,7 +772,7 @@ export default {
     const {
       onSort,
       setSort,
-    } = sortEvent({ sortInfo, stores, getColumnIndex, updatePagingInfo });
+    } = sortEvent({ sortInfo, stores, updatePagingInfo });
 
     const {
       onSearch,
@@ -845,7 +850,7 @@ export default {
     const {
       onRowClick,
       onRowDblClick,
-    } = clickEvent({ selectInfo, stores, setContextMenu });
+    } = clickEvent({ selectInfo, stores });
 
     const {
       onDragStart,
@@ -1049,7 +1054,10 @@ export default {
     const filteringItemsRef = ref(null);
     const isShowFilteringItemsBox = ref(false);
     const isShowColumnFilteringItems = ref(false);
-    const selectedFilteringFiled = ref('');
+    const selectedFilteringColumn = reactive({
+      caption: '',
+      field: '',
+    });
     const selectedFilteringItems = ref([]);
     const operatorItems = [
       { name: 'AND', value: 'and' },
@@ -1057,13 +1065,14 @@ export default {
     ];
     const isExpandColumnFilteringItems = ref(false);
 
-    const onClickFilteringItem = (field, filters) => {
-      selectedFilteringFiled.value = field;
+    const onClickFilteringItem = ({ caption, field }, filters) => {
+      selectedFilteringColumn.caption = caption;
+      selectedFilteringColumn.field = field;
       selectedFilteringItems.value = filters;
       if (filters?.length > 1) { // open filtering items box
         isShowFilteringItemsBox.value = true;
         const x = filteringItemsRef.value.getBoundingClientRect().left;
-        const y = filteringItemsRef.value.getBoundingClientRect().top
+        const y = window.pageYOffset + filteringItemsRef.value.getBoundingClientRect().top
           + filteringItemsRef.value.getBoundingClientRect().height;
         filteringItemsBoxPosition.boxTop = `${y}px`;
         filteringItemsBoxPosition.boxLeft = `${x}px`;
@@ -1120,7 +1129,7 @@ export default {
       setStore([], false);
     };
     const removeFiltering = ({ field, idx }) => {
-      filterInfo.filteringItemsByColumn[field].splice(idx, 1);
+      filterInfo.filteringItemsByColumn[field]?.splice(idx, 1);
       if (!filterInfo.filteringItemsByColumn[field].length) {
         delete filterInfo.filteringItemsByColumn[field];
       }
@@ -1199,7 +1208,7 @@ export default {
       isShowColumnFilteringItems,
       operatorItems,
       selectedFilteringItems,
-      selectedFilteringFiled,
+      selectedFilteringColumn,
       filteringItemsRef,
       isShowFilteringItemsBox,
       ...toRefs(filteringItemsBoxPosition),

package/src/components/grid/grid.filterSetting.vue

@@ -47,6 +47,7 @@
               v-model="item.value"
               class="ev-grid-filter-setting__row--value"
               :disabled="item.comparison === 'isEmpty' || item.comparison === 'isNotEmpty'"
+              @input="validateValue($props.column.type, item)"
             />
             <div
               class="ev-grid-filter-setting__row--button"
@@ -80,6 +81,7 @@
 <script>
 import { clickoutside } from '@/directives/clickoutside';
 import { computed, onBeforeMount, ref, watch } from 'vue';
+import { cloneDeep } from 'lodash-es';
 
 export default {
   name: 'EVGridFilterSetting',
@@ -169,6 +171,7 @@ export default {
         comparison: '=',
         operator,
         value: '',
+        caption: filteringColumn.value.caption,
       });
     };
     const removeRow = (idx) => {
@@ -199,8 +202,9 @@ export default {
       () => props.isShow,
       (isShow) => {
         const rowList = [];
+        const items = cloneDeep(props.items);
         if (isShow && filteringColumn.value.field) {
-          if (!props.items[filteringColumn.value.field]?.length) {
+          if (!items[filteringColumn.value.field]?.length) {
             rowList.push({
               comparison: '=',
               operator: 'and',
@@ -208,7 +212,7 @@ export default {
               caption: filteringColumn.value.caption,
             });
           } else {
-            props.items[filteringColumn.value.field].forEach((row) => {
+            items[filteringColumn.value.field].forEach((row) => {
               rowList.push(row);
             });
           }
@@ -232,6 +236,12 @@ export default {
     onBeforeMount(() => {
       initWrapperDiv();
     });
+
+    const validateValue = (type, item) => {
+      if (type === 'number' || type === 'float') {
+        item.value = item.value.trim();
+      }
+    };
     return {
       filteringItems,
       isShowFilterSetting,
@@ -244,6 +254,7 @@ export default {
       applyFiltering,
       changeComparison,
       getSelectTitle,
+      validateValue,
     };
   },
 };

package/src/components/grid/uses.js

@@ -332,7 +332,7 @@ export const resizeEvent = (params) => {
 
 export const clickEvent = (params) => {
   const { emit } = getCurrentInstance();
-  const { selectInfo, stores, setContextMenu } = params;
+  const { selectInfo, stores } = params;
   const getClickedRowData = (event, row) => {
     const tagName = event.target.tagName.toLowerCase();
     let cellInfo = {};
@@ -355,7 +355,7 @@ export const clickEvent = (params) => {
    * @param {object} event - 이벤트 객체
    * @param {array} row - row 데이터
    */
-  let timer = null;
+  let clickTimer = null;
   let lastIndex = -1;
   const onRowClick = (event, row, isRight) => {
     if (event.target.parentElement.classList?.contains('row-checkbox-input')) {
@@ -395,8 +395,10 @@ export const clickEvent = (params) => {
       }
     };
 
-    clearTimeout(timer);
-    timer = setTimeout(() => {
+    if (clickTimer) {
+      clearTimeout(clickTimer);
+    }
+    clickTimer = setTimeout(() => {
       if (selectInfo.useSelect) {
         const rowData = row[ROW_DATA_INDEX];
         const selected = row[ROW_SELECT_INDEX];
@@ -423,7 +425,6 @@ export const clickEvent = (params) => {
         lastIndex = row[ROW_INDEX];
         emit('update:selected', selectInfo.selectedRow);
         emit('click-row', getClickedRowData(event, row));
-        setContextMenu();
       }
     }, 100);
     return true;
@@ -435,7 +436,9 @@ export const clickEvent = (params) => {
    * @param {array} row - row 데이터
    */
   const onRowDblClick = (event, row) => {
-    clearTimeout(timer);
+    if (clickTimer) {
+      clearTimeout(clickTimer);
+    }
     emit('dblclick-row', getClickedRowData(event, row));
   };
   return { onRowClick, onRowDblClick };
@@ -523,7 +526,7 @@ export const checkEvent = (params) => {
 };
 
 export const sortEvent = (params) => {
-  const { sortInfo, stores, getColumnIndex, updatePagingInfo } = params;
+  const { sortInfo, stores, updatePagingInfo } = params;
   function OrderQueue() {
     this.orders = ['asc', 'desc', 'init'];
     this.dequeue = () => this.orders.shift();
@@ -539,6 +542,7 @@ export const sortEvent = (params) => {
   const onSort = (column, sortOrder) => {
     const sortable = column.sortable === undefined ? true : column.sortable;
     if (sortable) {
+      sortInfo.sortColumn = column;
       if (sortInfo.sortField !== column?.field) {
         order.orders = ['asc', 'desc', 'init'];
         sortInfo.sortField = column?.field;
@@ -574,8 +578,8 @@ export const sortEvent = (params) => {
       });
       return;
     }
-    const index = getColumnIndex(sortInfo.sortField);
-    const type = stores.originColumns[index]?.type || 'string';
+    const index = sortInfo.sortColumn.index;
+    const type = sortInfo.sortColumn.type || 'string';
     const sortFn = sortInfo.sortOrder === 'desc' ? setDesc : setAsc;
     const numberSortFn = sortInfo.sortOrder === 'desc' ? numberSetDesc : numberSetAsc;
     const getColumnValue = (a, b) => {
@@ -641,25 +645,26 @@ export const filterEvent = (params) => {
   /**
    * 전달받은 문자열 내 해당 키워드가 존재하는지 확인한다.
    *
-   * @param {string} search - 검색 키워드
-   * @param {string} origin - 기준 문자열
+   * @param {string} conditionValue - 검색 키워드
+   * @param {string} value - 기준 문자열
+   * @param {string} pos - 시작, 끝나는 문자열
    * @returns {boolean} 문자열 내 키워드 존재 유무
    */
-  const findLike = (search, origin, pos) => {
-    if (typeof search !== 'string' || origin === null) {
+  const findLike = (conditionValue, value, pos) => {
+    if (typeof conditionValue !== 'string' || value === null) {
       return false;
     }
-    let regx = search.replace(new RegExp('([\\.\\\\\\+\\*\\?\\[\\^\\]\\$\\(\\)\\{\\}\\=\\!\\<\\>\\|\\:\\-])', 'g'), '\\$1');
-    regx = regx.replace(/%/g, '.*').replace(/_/g, '.');
-    let regValue = `^${regx}$`;
+    const baseValueLower = value.toLowerCase();
+    const conditionValueLower = conditionValue.toLowerCase();
+    let result = baseValueLower.includes(conditionValueLower);
     if (pos) {
       if (pos === 'start') {
-        regValue = `^${regx}`;
+        result = baseValueLower.startsWith(conditionValueLower);
       } else if (pos === 'end') {
-        regValue = `${regx}$`;
+        result = baseValueLower.endsWith(conditionValueLower);
       }
     }
-    return RegExp(regValue, 'gi').test(origin);
+    return result;
   };
   /**
    * 필터 조건에 따라 문자열을 확인한다.
@@ -681,13 +686,13 @@ export const filterEvent = (params) => {
     } else if (comparison === '!=') {
       result = conditionValue.toLowerCase() !== value.toLowerCase();
     } else if (comparison === '%s%') {
-      result = findLike(`%${conditionValue}%`, value);
+      result = findLike(conditionValue, value);
     } else if (comparison === 'notLike') {
-      result = !findLike(`%${conditionValue}%`, value);
+      result = !findLike(conditionValue, value);
     } else if (comparison === 's%') {
-      result = findLike(`${conditionValue}`, value, 'start');
+      result = findLike(conditionValue, value, 'start');
     } else if (comparison === '%s') {
-      result = findLike(`${conditionValue}`, value, 'end');
+      result = findLike(conditionValue, value, 'end');
     } else if (comparison === 'isEmpty') {
       result = value === undefined || value === null || value === '';
     } else if (comparison === 'isNotEmpty') {
@@ -765,33 +770,36 @@ export const filterEvent = (params) => {
    * 전체 데이터에서 설정된 필터 적용 후 결과를 filterStore 에 저장한다.
    */
   const setFilter = () => {
-    let filterStore = [];
-    let isApply = false;
-
     const filteringItemsByColumn = filterInfo.filteringItemsByColumn;
     const fields = Object.keys(filteringItemsByColumn);
     const originStore = stores.originStore;
+    let filterStore = [];
     let filteredOnce = false;
+
     fields.forEach((field) => {
       const filters = filteringItemsByColumn[field];
       const index = getColumnIndex(field);
       const columnType = props.columns[index].type;
 
-      filters.forEach((filterItem) => {
-        isApply = true;
+      filters.forEach((item, ix) => {
         if (!filterStore.length && !filteredOnce) {
           filterStore = getFilteringData(originStore, columnType, {
-            ...filterItem,
+            ...item,
             index,
           });
-        } else if (filterItem.operator === 'or' || filterInfo.columnOperator === 'or') {
+        } else if (ix === 0 && filterInfo.columnOperator === 'or') {
           filterStore.push(...getFilteringData(originStore, columnType, {
-            ...filterItem,
+            ...item,
+            index,
+          }));
+        } else if (item.operator === 'or') {
+          filterStore.push(...getFilteringData(originStore, columnType, {
+            ...item,
             index,
           }));
         } else {
           filterStore = getFilteringData(filterStore, columnType, {
-            ...filterItem,
+            ...item,
             index,
           });
         }
@@ -799,19 +807,19 @@ export const filterEvent = (params) => {
       });
     });
 
-    if (!isApply) {
+    if (!filteredOnce) {
       stores.filterStore = originStore;
     } else {
       stores.filterStore = uniqBy(filterStore, JSON.stringify);
     }
   };
 
-  let timer = null;
+  let searchTimer = null;
   const onSearch = (searchWord) => {
-    if (timer) {
-      clearTimeout(timer);
+    if (searchTimer) {
+      clearTimeout(searchTimer);
     }
-    timer = setTimeout(() => {
+    searchTimer = setTimeout(() => {
       filterInfo.isSearch = false;
       filterInfo.searchWord = searchWord;
       if (searchWord) {
@@ -880,35 +888,65 @@ export const contextMenuEvent = (params) => {
   /**
    * 컨텍스트 메뉴를 설정한다.
    *
-   * @param {boolean} useCustom - 사용자 지정 메뉴 사용 유무
+   * @param {object} event - 이벤트 객체
    */
-  const setContextMenu = (useCustom = true) => {
+  let contextmenuTimer = null;
+  const setContextMenu = (e) => {
+    if (contextmenuTimer) {
+      clearTimeout(contextmenuTimer);
+    }
     const menuItems = [];
+    contextmenuTimer = setTimeout(() => {
+      if (contextInfo.customContextMenu.length) {
+        const customItems = contextInfo.customContextMenu.map(
+          (item) => {
+            const menuItem = item;
+            if (menuItem.validate) {
+              menuItem.disabled = !menuItem.validate(menuItem.itemId, selectInfo.selectedRow);
+            }
 
-    if (useCustom && contextInfo.customContextMenu.length) {
-      const customItems = contextInfo.customContextMenu.map(
-        (item) => {
-          const menuItem = item;
-          if (menuItem.validate) {
-            menuItem.disabled = !menuItem.validate(menuItem.itemId, selectInfo.selectedRow);
-          }
+            menuItem.selectedRow = selectInfo.selectedRow ?? [];
+            menuItem.contextmenuInfo = selectInfo.contextmenuInfo ?? [];
 
-          menuItem.selectedRow = selectInfo.selectedRow ?? [];
-          menuItem.contextmenuInfo = selectInfo.contextmenuInfo ?? [];
+            return menuItem;
+          });
 
-          return menuItem;
-        });
+        menuItems.push(...customItems);
+      }
 
-      menuItems.push(...customItems);
+      contextInfo.contextMenuItems = menuItems;
+      contextInfo.menu.show(e);
+    }, 200);
+  };
+  /**
+   * 마우스 우클릭 이벤트를 처리한다.
+   *
+   * @param {object} event - 이벤트 객체
+   */
+  const onContextMenu = (e) => {
+    e.preventDefault();
+    const target = e.target;
+    const rowIndex = target.closest('.row')?.dataset?.index;
+    let clickedRow = null;
+    if (rowIndex) {
+      clickedRow = stores.viewStore.find(row => row[ROW_INDEX] === +rowIndex)?.[ROW_DATA_INDEX];
+    }
+    if (clickedRow) {
+      selectInfo.contextmenuInfo = [clickedRow];
+      setContextMenu(e);
     }
-
-    contextInfo.contextMenuItems = menuItems;
   };
+  /**
+   * 컬럼 기능을 수행하는 Contextmenu 를 생성한다.
+   *
+   * @param {object} event - 이벤트 객체
+   * @param {object} column - 컬럼 정보
+   */
   const onColumnContextMenu = (event, column) => {
     if (event.target.className === 'column-name') {
       const sortable = column.sortable === undefined ? true : column.sortable;
       const filterable = filterInfo.isFiltering
-        && column.filterable === undefined ? true : column.filterable;
+      && column.filterable === undefined ? true : column.filterable;
       contextInfo.columnMenuItems = [
         {
           text: 'Ascending',
@@ -952,23 +990,6 @@ export const contextMenuEvent = (params) => {
       ];
     }
   };
-  /**
-   * 마우스 우클릭 이벤트를 처리한다.
-   *
-   * @param {object} event - 이벤트 객체
-   */
-  const onContextMenu = (event) => {
-    const target = event.target;
-    const rowIndex = target.closest('.row')?.dataset?.index;
-    let clickedRow = null;
-    if (rowIndex) {
-      clickedRow = stores.viewStore.find(row => row[ROW_INDEX] === +rowIndex)?.[ROW_DATA_INDEX];
-    }
-    if (clickedRow) {
-      selectInfo.contextmenuInfo = [clickedRow];
-      // setContextMenu();
-    }
-  };
   return {
     setContextMenu,
     onContextMenu,