evui 3.4.2 → 3.4.3

package/package.json

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

package/src/common/utils.js

@@ -136,3 +136,17 @@ export function getPrecision(v) {
 export function checkNullAndUndefined(value) {
   return value === null || value === undefined;
 }
+
+/**
+ * Check if the device is mobile
+ * @returns {boolean}
+ */
+export function mobileCheck() {
+  return (
+    /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(
+      navigator.userAgent,
+    )
+    || 'ontouchstart' in window
+    || navigator.maxTouchPoints
+  );
+}

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

@@ -1,4 +1,5 @@
 import throttle from '@/common/utils.throttle';
+import { mobileCheck } from '@/common/utils';
 import Model from './model';
 import TimeScale from './scale/scale.time';
 import LinearScale from './scale/scale.linear';
@@ -40,6 +41,7 @@ class EvChart {
       Object.assign(this, GradientLegend);
     }
 
+    this.isMobile = mobileCheck();
     this.brushSeries = brushSeries;
     this.target = target;
     this.data = data;
@@ -939,6 +941,7 @@ class EvChart {
       this.overlayCanvas.removeEventListener('click', this.onClick);
       this.overlayCanvas.removeEventListener('mousedown', this.onMouseDown);
       this.overlayCanvas.removeEventListener('wheel', this.onWheel);
+      window.removeEventListener('click', this.dragTouchSelectionEvent);
     }
 
     if (this.options.tooltip.use) {

package/src/components/chart/helpers/helpers.constant.js

@@ -127,11 +127,6 @@ export const AXIS_OPTION = {
   },
 };
 
-export const PLOT_LINE_OPTION = {
-  color: '#FF0000',
-  lineWidth: 1,
-};
-
 export const PLOT_LINE_LABEL_OPTION = {
   show: false,
   fontSize: 12,
@@ -147,6 +142,12 @@ export const PLOT_LINE_LABEL_OPTION = {
   maxWidth: null,
 };
 
+export const PLOT_LINE_OPTION = {
+  color: '#FF0000',
+  lineWidth: 1,
+  label: PLOT_LINE_LABEL_OPTION,
+};
+
 export const PLOT_BAND_OPTION = {
   color: '#FAE59D',
 };

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

@@ -15,7 +15,7 @@ const modules = {
      * @returns {undefined}
      */
     this.onMouseMove = (e) => {
-      if (this.dragInfo?.isMove) {
+      if (this.dragInfo?.isMove || this.isMobile) {
         return;
       }
 
@@ -265,11 +265,53 @@ const modules = {
           break;
         }
 
-        case 'pie':
+        case 'pie': {
+          if (useSelectItem) {
+            setSelectedItemInfo();
+          }
+
+          break;
+        }
+
         case 'scatter': {
           if (useSelectItem) {
             setSelectedItemInfo();
           }
+
+          // 모바일용 dragSelection
+          if (this.options.dragSelection?.use && this.isMobile) {
+            let touchInfo = this.setTouchInfo(e);
+            this.overlayClear();
+
+            if (this.options.dragSelection.keepDisplay
+              && (e.layerX < touchInfo.range.x1
+              || e.layerY < touchInfo.range.y1
+              || e.layerX > touchInfo.range.x2
+              || e.layerY > touchInfo.range.y2)) {
+              this.isTouchOverlay = false;
+            } else {
+              touchInfo = this.setTouchBoxDimensions(touchInfo);
+              this.isTouchOverlay = true;
+              this.drawSelectionArea(touchInfo);
+            }
+
+            if (!this.options.dragSelection.keepDisplay) {
+              setTimeout(() => {
+                this.isTouchOverlay = false;
+                this.overlayClear();
+              }, 100);
+            }
+
+            args.e = e;
+            args.touchInfo = touchInfo;
+            args.data = this.findSelectedItems(touchInfo);
+            args.range = this.getSelectionRange(touchInfo);
+
+            if (typeof this.listeners['drag-select'] === 'function') {
+              this.listeners['drag-select'](args);
+            }
+          }
+
           break;
         }
       }
@@ -313,6 +355,9 @@ const modules = {
     this.overlayCanvas.addEventListener('dblclick', this.onDblClick);
     this.overlayCanvas.addEventListener('click', this.onClick);
     this.overlayCanvas.addEventListener('mousedown', this.onMouseDown);
+
+    this.dragTouchSelectionEvent = e => this.dragTouchSelectionDestroy(e);
+    window.addEventListener('click', this.dragTouchSelectionEvent);
   },
 
   /**
@@ -551,6 +596,99 @@ const modules = {
     return curMouseTargetVal;
   },
 
+  /**
+   * Processes touch event to determine touch position within the chart.
+   *
+   * @param {TouchEvent} event - the touch event to process
+   * @returns {object} - the processed touch information
+   */
+  setTouchInfo(event) {
+    let [offsetX, offsetY] = this.getMousePosition(event);
+    const chartRect = this.chartRect;
+    const labelOffset = this.labelOffset;
+    const range = {
+      x1: chartRect.x1 + labelOffset.left,
+      x2: chartRect.x2 - labelOffset.right,
+      y1: chartRect.y1 + labelOffset.top,
+      y2: chartRect.y2 - labelOffset.bottom,
+    };
+
+    offsetX = Math.max(range.x1, Math.min(offsetX, range.x2));
+    offsetY = Math.max(range.y1, Math.min(offsetY, range.y2));
+
+    return {
+      xcp: offsetX,
+      ycp: offsetY,
+      range,
+    };
+  },
+
+  /**
+   * Adjusts the touch box dimensions based on the provided touch information.
+   *
+   * @param {object} touchInfo - The touch information including touch position and plotting range
+   * @returns {object} - The adjusted touch information
+   */
+  setTouchBoxDimensions(touchInfo) {
+    const boxSize = this.options.dragSelection?.size || 50;
+    const halfBoxSize = boxSize / 2;
+    const { xcp, ycp, range } = touchInfo;
+    let xsp = xcp - halfBoxSize;
+    let ysp = ycp - halfBoxSize;
+    let width = boxSize;
+    let height = boxSize;
+
+    this.boxOverflow = {
+      x1: false,
+      x2: false,
+      y1: false,
+      y2: false,
+    };
+
+    if (xcp < range.x1 + halfBoxSize) {
+      xsp = range.x1;
+      width = halfBoxSize - (range.x1 - xcp);
+      this.boxOverflow.x1 = true;
+    }
+    if (xcp > range.x2 - halfBoxSize) {
+      width = halfBoxSize - (xcp - range.x2);
+      this.boxOverflow.x2 = true;
+    }
+    if (ycp < range.y1 + halfBoxSize) {
+      ysp = range.y1;
+      height = halfBoxSize - (range.y1 - ycp);
+      this.boxOverflow.y1 = true;
+    }
+    if (ycp > range.y2 - halfBoxSize) {
+      height = halfBoxSize - (ycp - range.y2);
+      this.boxOverflow.y2 = true;
+    }
+
+    touchInfo.xsp = xsp;
+    touchInfo.ysp = ysp;
+    touchInfo.width = width;
+    touchInfo.height = height;
+
+    return touchInfo;
+  },
+
+  /**
+   * Remove a touch selection.
+   *
+   * @param {TouchEvent} e - the touch event to process
+   * @returns {undefined}
+   */
+  dragTouchSelectionDestroy(e) {
+    if (
+      this.options.dragSelection?.use
+      && e.target !== this.overlayCanvas
+      && this.isTouchOverlay
+    ) {
+      this.isTouchOverlay = false;
+      this.overlayClear();
+    }
+  },
+
   /**
    * Find graph item on mouse position
    * @param {array} offset    return value from getMousePosition()
@@ -952,16 +1090,24 @@ const modules = {
     const yMinRatio = this.getRatioInRange(range.y1, range.y2, yep);
     const yMaxRatio = this.getRatioInRange(range.y1, range.y2, ysp);
 
-    const xMin = dataRangeX.graphMin + graphWidth * xMinRatio;
-    const xMax = dataRangeX.graphMin + graphWidth * xMaxRatio;
-    const yMin = dataRangeY.graphMin + graphHeight * (1 - yMinRatio);
-    const yMax = dataRangeY.graphMin + graphHeight * (1 - yMaxRatio);
+    const xMin = this.isMobile && this.boxOverflow?.x1
+      ? Math.min(this.minMax.x[0].min, dataRangeX.graphMin)
+      : Math.max(dataRangeX.graphMin + graphWidth * xMinRatio, dataRangeX.graphMin);
+    const xMax = this.isMobile && this.boxOverflow?.x2
+      ? Math.max(this.minMax.x[0].max, dataRangeX.graphMax)
+      : Math.min(dataRangeX.graphMin + graphWidth * xMaxRatio, dataRangeX.graphMax);
+    const yMin = this.isMobile && this.boxOverflow?.y2
+      ? Math.min(this.minMax.y[0].min, dataRangeY.graphMin)
+      : Math.max(dataRangeY.graphMin + graphHeight * (1 - yMinRatio), dataRangeY.graphMin);
+    const yMax = this.isMobile && this.boxOverflow?.y1
+      ? Math.max(this.minMax.y[0].max, dataRangeY.graphMax)
+      : Math.min(dataRangeY.graphMin + graphHeight * (1 - yMaxRatio), dataRangeY.graphMax);
 
     return {
-      xMin: Math.max(+parseFloat(xMin).toFixed(3), dataRangeX.graphMin),
-      xMax: Math.min(+parseFloat(xMax).toFixed(3), dataRangeX.graphMax),
-      yMin: Math.max(+parseFloat(yMin).toFixed(3), dataRangeY.graphMin),
-      yMax: Math.min(+parseFloat(yMax).toFixed(3), dataRangeY.graphMax),
+      xMin: +xMin.toFixed(3),
+      xMax: +xMax.toFixed(3),
+      yMin: +yMin.toFixed(3),
+      yMax: +yMax.toFixed(3),
     };
   },
 

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

@@ -527,7 +527,7 @@ class Scale {
 
   /**
    * Draw X Plot line
-   * @param {object} dataX         Data's X Position
+   * @param {number} dataX         Data's X Position
    * @param {number} minX          Min X Position
    * @param {number} maxX          Max X Position
    * @param {number} minY          Min Y Position
@@ -544,8 +544,11 @@ class Scale {
       return;
     }
 
-    ctx.moveTo(dataX, maxY);
-    ctx.lineTo(dataX, minY);
+    let dataXPos = dataX;
+    dataXPos += Util.aliasPixel(ctx.lineWidth);
+
+    ctx.moveTo(dataXPos, maxY);
+    ctx.lineTo(dataXPos, minY);
 
     ctx.stroke();
     ctx.restore();
@@ -554,7 +557,7 @@ class Scale {
 
   /**
    * Draw Y Plot line
-   * @param {object} dataY         Data's Y Position
+   * @param {number} dataY         Data's Y Position
    * @param {number} minX          Min X Position
    * @param {number} maxX          Max X Position
    * @param {number} minY          Min Y Position
@@ -571,8 +574,11 @@ class Scale {
       return;
     }
 
-    ctx.moveTo(minX, dataY);
-    ctx.lineTo(maxX, dataY);
+    let dataYPos = dataY;
+    dataYPos += Util.aliasPixel(ctx.lineWidth);
+
+    ctx.moveTo(minX, dataYPos);
+    ctx.lineTo(maxX, dataYPos);
 
     ctx.stroke();
     ctx.restore();

package/src/components/chart/uses.js

@@ -181,6 +181,7 @@ const DEFAULT_OPTIONS = {
   dragSelection: {
     use: false,
     keepDisplay: true,
+    size: 50,
     fillColor: '#38ACEC',
     opacity: 0.65,
   },

package/src/components/grid/Grid.vue

@@ -66,7 +66,10 @@
               'column': true,
               'non-border': !!borderStyle,
             }"
-            :style="`width: ${minWidth}px;`"
+            :style="{
+              width: `${minWidth}px`,
+              'border-right': '1px solid #CFCFCF'
+            }"
           >
             <ev-checkbox
               v-if="useCheckbox.use && useCheckbox.headerCheck && useCheckbox.mode !== 'single'"
@@ -91,8 +94,9 @@
               :style="{
                 width: `${column.width}px`,
                 'min-width': `${isRenderer(column) ? rendererMinWidth : minWidth}px`,
-                'margin-right': orderedColumns.length - 1 === index
-                && (hasVerticalScrollBar || hasHorizontalScrollBar) ? `${scrollWidth}px` : '0px',
+                'margin-right': orderedColumns.length - 1 === index && (hasVerticalScrollBar
+                  || hasHorizontalScrollBar) ? `${scrollWidth}px` : '0px',
+                'border-right': orderedColumns.length - 1 === index ? 'none' : '1px solid #CFCFCF',
               }"
             >
               <!-- Column Name -->
@@ -173,10 +177,8 @@
               'non-border': !!borderStyle,
             }"
             :style="{
-              position: 'sticky',
-              right: 0,
-              width: '40px',
-              'min-width': '40px',
+              width: '30px',
+              'min-width': '30px',
               'margin-right': (hasVerticalScrollBar || hasHorizontalScrollBar)
                 ? `${scrollWidth}px` : '0px',
             }"
@@ -226,7 +228,11 @@
                   'row-checkbox': true,
                   'non-border': !!borderStyle,
                 }"
-                :style="`width: ${minWidth}px; height: ${rowHeight}px;`"
+                :style="{
+                  width: `${minWidth}px`,
+                  height: `${rowHeight}px`,
+                  'border-right': '1px solid #CFCFCF',
+                }"
               >
                 <ev-checkbox
                   v-model="row[1]"
@@ -256,6 +262,8 @@
                     height: `${rowHeight}px`,
                     'line-height': `${rowHeight}px`,
                     'min-width': `${isRenderer(column) ? rendererMinWidth : minWidth}px`,
+                    'border-right': orderedColumns.length - 1 === column.index
+                      ? 'none' : '1px solid #CFCFCF',
                   }"
                 >
                   <!-- Cell Renderer -->
@@ -277,23 +285,35 @@
               <td
                 v-if="$props.option.customContextMenu?.length"
                 :class="{
-                  cell: true,
+                  'row-contextmenu': true,
                   'non-border': !!borderStyle,
                 }"
                 :style="{
                   position: 'sticky',
                   right: 0,
-                  width: '40px',
+                  width: '30px',
                   height: `${rowHeight}px`,
-                  'min-width': '40px',
+                  'min-width': '30px',
                   'line-height': `${rowHeight}px`,
                 }"
               >
-                <grid-option-button
-                  class="row-contextmenu__btn"
-                  @click="onContextMenu($event)"
-                  @click.prevent="menu.show"
-                />
+                <template v-if="$slots.contextmenuIcon">
+                  <span
+                    class="row-contextmenu__btn"
+                    @click="onContextMenu($event)"
+                    @click.prevent="menu.show"
+                  >
+                    <slot name="contextmenuIcon"></slot>
+                  </span>
+                </template>
+                <template v-else>
+                  <ev-icon
+                    icon="ev-icon-warning2"
+                    class="row-contextmenu__btn"
+                    @click="onContextMenu($event)"
+                    @click.prevent="menu.show"
+                  />
+                </template>
               </td>
             </tr>
             <tr v-if="!viewStore.length">
@@ -502,6 +522,7 @@ export default {
       hasHorizontalScrollBar: false,
     });
     const selectInfo = reactive({
+      contextmenuInfo: props.contextmenuInfo,
       selectedRow: props.selected,
       useSelect: computed(() => props.option?.useSelection?.use ?? true),
       multiple: computed(() => props.option?.useSelection?.multiple ?? false),
@@ -627,6 +648,7 @@ export default {
       isRenderer,
       updateVScroll,
       updateHScroll,
+      contextInfo,
     });
 
     const {

package/src/components/grid/style/grid.scss

@@ -32,6 +32,11 @@
       border-bottom: 2px solid #7F7F7F !important;
     }
   }
+  .row-contextmenu__btn {
+    display: none;
+    vertical-align: middle;
+    cursor: pointer;
+  }
 }
 
 .column-list {
@@ -54,16 +59,16 @@
   vertical-align: top;
   user-select: none;
 
-  @include evThemify() {
-    border-right: 1px solid evThemed('grid-bottom-border');
-    background: evThemed('background-base');
-  }
-  &:nth-last-child(1) {
-    border-right: 0;
-  }
+  //@include evThemify() {
+  //  border-right: 1px solid evThemed('grid-bottom-border');
+  //}
+  //&:nth-last-child(1) {
+  //  border-right: 0;
+  //}
   .column-sort__icon {
     position: absolute;
     top: 50%;
+    right: 0;
     width: 24px;
     height: 24px;
     background-size: contain;
@@ -141,7 +146,6 @@
     white-space: nowrap;
 
     @include evThemify() {
-      background: evThemed('background-base');
       border-bottom: 1px solid evThemed('grid-bottom-border');
     }
     &.selected {
@@ -157,7 +161,7 @@
     }
     &:hover {
       .row-contextmenu__btn {
-        visibility: visible;
+        display: grid;
       }
     }
   }
@@ -165,25 +169,19 @@
   .cell {
     display: inline-block;
     padding: 0 10px;
-    background: inherit;
     text-align: center;
     max-width: 100%;
     white-space: nowrap;
     text-overflow: ellipsis;
 
-    @include evThemify() {
-      border-right: 1px solid evThemed('grid-bottom-border');
-    }
+    //@include evThemify() {
+    //  border-right: 1px solid evThemed('grid-bottom-border');
+    //}
     div {
       white-space: nowrap;
       overflow: hidden;
       text-overflow: ellipsis;
     }
-    .row-contextmenu__btn {
-      visibility: hidden;
-      vertical-align: middle;
-      cursor: pointer;
-    }
     &.row-checkbox {
       display: inline-flex;
       justify-content: center;
@@ -215,9 +213,9 @@
         justify-content: flex-end;
       }
     }
-    &:last-child {
-      border-right: 0;
-    }
+    //&:last-child {
+    //  border-right: 0;
+    //}
   }
 }
 

package/src/components/grid/uses.js

@@ -165,6 +165,7 @@ export const resizeEvent = (params) => {
     isRenderer,
     updateVScroll,
     updateHScroll,
+    contextInfo,
   } = params;
   /**
    * 고정 너비, 스크롤 유무 등에 따른 컬럼 너비를 계산한다.
@@ -183,9 +184,6 @@ export const resizeEvent = (params) => {
         if (cur.hide) {
           return acc;
         }
-        if (cur.field === 'db-icon' || cur.field === 'user-icon') {
-          cur.width = resizeInfo.iconWidth;
-        }
         if (cur.width) {
           acc.totalWidth += cur.width;
         } else {
@@ -193,7 +191,7 @@ export const resizeEvent = (params) => {
         }
 
         return acc;
-      }, { totalWidth: 0, emptyCount: 0 });
+      }, { totalWidth: contextInfo.customContextMenu.length ? 30 : 0, emptyCount: 0 });
 
       if (rowHeight * props.rows.length > elHeight) {
         elWidth -= scrollWidth;
@@ -359,11 +357,11 @@ export const clickEvent = (params) => {
   let lastIndex = -1;
   const onRowClick = (event, row) => {
     if (event.target.parentElement.classList?.contains('row-checkbox-input')
-      || event.target.classList?.contains('row-contextmenu__btn')) {
+      || event.target.closest('td')?.classList?.contains('row-contextmenu')) {
       return false;
     }
     const onMultiSelectByKey = (keyType, selected, selectedRow) => {
-      if (keyType === 'shift') { // shift
+      if (keyType === 'shift') {
         const rowIndex = row[ROW_INDEX];
         if (lastIndex > -1) {
           for (
@@ -379,16 +377,19 @@ export const clickEvent = (params) => {
             } else {
               stores.originStore[i][ROW_SELECT_INDEX] = false;
               const deselectedIndex = selectInfo.selectedRow
-                .findIndex(
-                  sr => sr === stores.originStore[i][ROW_DATA_INDEX]);
-              selectInfo.selectedRow.splice(deselectedIndex, 1);
+                .indexOf(stores.originStore[i][ROW_DATA_INDEX]);
+              if (deselectedIndex > -1) {
+                selectInfo.selectedRow.splice(deselectedIndex, 1);
+              }
             }
           }
         }
-      } else if (selected) {
-        selectInfo.selectedRow.splice(selectInfo.selectedRow.indexOf(row[ROW_DATA_INDEX]), 1);
-      } else {
-        selectInfo.selectedRow.push(selectedRow);
+      } else if (keyType === 'ctrl') {
+        if (!selected) {
+          selectInfo.selectedRow.push(selectedRow);
+        } else {
+          selectInfo.selectedRow.splice(selectInfo.selectedRow.indexOf(row[ROW_DATA_INDEX]), 1);
+        }
       }
     };
 
@@ -405,7 +406,7 @@ export const clickEvent = (params) => {
           keyType = 'ctrl';
         }
 
-        if (selectInfo.multiple) { // multi select
+        if (selectInfo.multiple && keyType) { // multi select
           onMultiSelectByKey(keyType, selected, rowData);
         } else if (selected) { // single select
           selectInfo.selectedRow = [];
@@ -690,7 +691,6 @@ export const filterEvent = (params) => {
 };
 
 export const contextMenuEvent = (params) => {
-  const { emit } = getCurrentInstance();
   const {
     contextInfo,
     stores,
@@ -717,6 +717,7 @@ export const contextMenuEvent = (params) => {
           }
 
           menuItem.selectedRow = row ?? [];
+          menuItem.contextmenuInfo = [selectInfo.contextmenuInfo];
 
           return menuItem;
         });
@@ -759,23 +760,13 @@ export const contextMenuEvent = (params) => {
   const onContextMenu = (event) => {
     const target = event.target;
     const rowIndex = target.closest('.row')?.dataset?.index;
-    if (target.classList.contains('row-contextmenu__btn')) {
-      setContextMenu();
-      return;
-    }
-    let clickedRow;
+    let clickedRow = null;
     if (rowIndex) {
       clickedRow = stores.viewStore.find(row => row[ROW_INDEX] === +rowIndex)?.[ROW_DATA_INDEX];
     }
-
     if (clickedRow) {
-      selectInfo.selectedRow = clickedRow;
+      selectInfo.contextmenuInfo = clickedRow;
       setContextMenu();
-      emit('update:selected', [clickedRow]);
-    } else {
-      selectInfo.selectedRow = [];
-      setContextMenu(false);
-      emit('update:selected', []);
     }
   };
   return {