evui 3.3.40 → 3.3.42

package/package.json

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

package/src/components/chart/Chart.vue

@@ -78,7 +78,7 @@
       const injectIsChartGroup = inject('isChartGroup', false);
       const injectBrushSeries = inject('brushSeries', { list: [], chartIdx: null });
       const injectGroupSelectedLabel = inject('groupSelectedLabel', null);
-      const injectBrushIdx = inject('brushIdx', { start: 0, end: 0 });
+      const injectBrushIdx = inject('brushIdx', { start: 0, end: -1 });
 
       const {
         eventListeners,

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

@@ -707,6 +707,8 @@ class EvChart {
     if (options.title.show) {
       if (!this.isInitTitle) {
         this.initTitle();
+      } else {
+        this.updateTitle();
       }
 
       this.showTitle();

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

@@ -438,7 +438,7 @@ export default class EvChartZoom {
       }
     };
 
-    if (isUseZoomMode) {
+    if (isUseZoomMode && this.dragZoomIcon.classList.contains('active')) {
       const { previous, latest } = this.zoomAreaMemory;
 
       toggleIconStyle(this.previousIcon, previous.length);

package/src/components/chart/element/element.line.js

@@ -246,12 +246,14 @@ class Line {
     let s = 0;
     let e = gdata.length - 1;
 
+    const xpInterval = gdata[1].xp - gdata[0].xp < 6 ? 1.5 : 6;
+
     while (s <= e) {
       const m = Math.floor((s + e) / 2);
       const x = gdata[m].xp;
       const y = gdata[m].yp;
 
-      if ((x - 6 <= xp) && (xp <= x + 6)) {
+      if ((x - xpInterval < xp) && (xp < x + xpInterval)) {
         item.data = gdata[m];
         item.index = m;
 
@@ -259,10 +261,10 @@ class Line {
           item.hit = true;
         }
         return item;
-      } else if (x + 6 < xp) {
-        s = m + 1;
-      } else {
+      } else if (x + xpInterval > xp) {
         e = m - 1;
+      } else {
+        s = m + 1;
       }
     }
 

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

@@ -20,14 +20,7 @@ const modules = {
       this.createTitle();
     }
 
-    const opt = this.options.title;
-    Object.keys(opt.style).forEach((key) => {
-      this.titleDOM.style[key] = opt.style[key];
-    });
-
-    this.titleDOM.textContent = opt.text;
-    this.titleDOM.style.height = `${opt.height}px`;
-    this.titleDOM.style.lineHeight = `${opt.height}px`;
+    this.updateTitle();
 
     this.isInitTitle = true;
   },
@@ -51,6 +44,18 @@ const modules = {
     this.titleDOM.style.display = 'none';
     this.wrapperDOM.style.paddingTop = '0px';
   },
+
+  updateTitle() {
+    const opt = this.options.title;
+
+    Object.keys(opt.style).forEach((key) => {
+      this.titleDOM.style[key] = opt.style[key];
+    });
+
+    this.titleDOM.textContent = opt.text;
+    this.titleDOM.style.height = `${opt.height}px`;
+    this.titleDOM.style.lineHeight = `${opt.height}px`;
+  },
 };
 
 export default modules;

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

@@ -311,7 +311,7 @@ class Scale {
 
         if (this.type === 'x') {
           labelPoint = this.position === 'top' ? offsetPoint - 10 : offsetPoint + 10;
-          if (options?.brush?.showLabel || !options.brush) {
+          if (options?.brush?.showLabel || !options?.brush) {
             ctx.fillText(labelText, labelCenter, labelPoint);
           }
 
@@ -344,7 +344,7 @@ class Scale {
           }
         } else {
           labelPoint = this.position === 'left' ? offsetPoint - 10 : offsetPoint + 10;
-          if (options?.brush?.showLabel || !options.brush) {
+          if (options?.brush?.showLabel || !options?.brush) {
             ctx.fillText(labelText, labelPoint, labelCenter);
           }
 

package/src/components/chart/uses.js

@@ -232,7 +232,7 @@ export const useModel = (selectedLabel) => {
         left: 2,
         bottom: 4,
       };
-}
+    }
 
     return normalizedOptions;
   };
@@ -308,7 +308,6 @@ export const useWrapper = (options) => {
   };
 };
 
-
 export const useZoomModel = (
   evChartNormalizedOptions,
   { wrapper: evChartWrapper, evChartGroupRef },
@@ -323,7 +322,7 @@ export const useZoomModel = (
   const evChartZoomOptions = reactive({ zoom: evChartNormalizedOptions.zoom });
   const brushIdx = reactive({
     start: 0,
-    end: 0,
+    end: -1,
     isUseButton: false,
     isUseScroll: false,
   });
@@ -337,6 +336,7 @@ export const useZoomModel = (
     },
   });
   const evChartClone = reactive({ data: null, options: null });
+  const brushChartIdx = ref([]);
 
   const getRangeInfo = (zoomInfo) => {
     if (zoomInfo.data.length && zoomInfo.range && isUseZoomMode.value) {
@@ -387,6 +387,8 @@ export const useZoomModel = (
 
             evChartInfo.props.data.push(data);
             evChartInfo.props.options.push(options);
+          } else if (type?.name === 'EvChartBrush') {
+            brushChartIdx.value.push(evChartProps?.options?.chartIdx ?? 0);
           }
         });
       }
@@ -490,8 +492,15 @@ export const useZoomModel = (
 
       setEvChartOptions();
 
-      brushIdx.start = 0;
-      brushIdx.end = evChartClone.data[0].labels.length - 1;
+      brushIdx.end = -1;
+      for (let i = 0; i < brushChartIdx.value.length; i++) {
+        const data = evChartClone.data[brushChartIdx.value[i]];
+
+        if (data.labels.length) {
+          brushIdx.start = 0;
+          brushIdx.end = data.labels.length - 1;
+        }
+      }
 
       if (evChartZoom) {
         evChartZoom.updateEvChartCloneData(evChartClone, isUseZoomMode.value);

package/src/components/chartBrush/ChartBrush.vue

@@ -32,7 +32,7 @@ export default {
     const injectEvChartInfo = inject('evChartInfo', { props: { options: [] } });
     const injectBrushIdx = inject('brushIdx', {
       start: 0,
-      end: 0,
+      end: -1,
       isUseButton: false,
       isUseScroll: false,
     });

package/src/components/chartBrush/chartBrush.core.js

@@ -15,6 +15,8 @@ export default class EvChartBrush {
 
   init(isResize) {
     if (this.brushIdx.start > this.brushIdx.end) {
+      this.initEventState();
+      this.removeBrushCanvas();
       return;
     }
 
@@ -72,52 +74,55 @@ export default class EvChartBrush {
     const brushIdx = this.debounceBrushIdx ?? this.brushIdx;
 
     const labelEndIdx = this.evChartData.value.labels.length - 1;
-    this.labelEndIdx = labelEndIdx;
-    const axesXInterval = (evChartRange.x2 - evChartRange.x1) / labelEndIdx;
-    const brushRectX = brushIdx.start * axesXInterval * pixelRatio;
-    const brushRectWidth = (
-      brushCanvasWidth - (
-        labelEndIdx - (brushIdx.end - brushIdx.start)
-      ) * axesXInterval
-    ) * pixelRatio;
-    const brushRectHeight = this.evChartBrushOptions.value.height - evChartRange.y1;
-    const brushButtonLeftXPos = brushRectX;
-    const brushButtonRightXPos = brushRectX + brushRectWidth;
-
-    if (!brushCanvas.style.position) {
-      brushCanvas.style.position = 'absolute';
-      brushCanvas.style.top = `${evChartRange.y1}px`;
-      brushCanvas.style.left = `${evChartRange.x1 - (brushButtonWidth / 2)}px`;
-    }
 
-    if (!isEqualWidth) {
-      brushCanvas.width = (brushCanvasWidth * pixelRatio);
-      brushCanvas.style.width = `${brushCanvasWidth}px`;
-      brushCanvas.height = brushCanvasHeight * pixelRatio;
-      brushCanvas.style.height = `${brushCanvasHeight}px`;
-    }
+    if (labelEndIdx >= 0) {
+      this.labelEndIdx = labelEndIdx;
+      const axesXInterval = (evChartRange.x2 - evChartRange.x1) / labelEndIdx;
+      const brushRectX = brushIdx.start * axesXInterval * pixelRatio;
+      const brushRectWidth = (
+        brushCanvasWidth - (
+          labelEndIdx - (brushIdx.end - brushIdx.start)
+        ) * axesXInterval
+      ) * pixelRatio;
+      const brushRectHeight = this.evChartBrushOptions.value.height - evChartRange.y1;
+      const brushButtonLeftXPos = brushRectX;
+      const brushButtonRightXPos = brushRectX + brushRectWidth;
+
+      if (!brushCanvas.style.position) {
+        brushCanvas.style.position = 'absolute';
+        brushCanvas.style.top = `${evChartRange.y1}px`;
+        brushCanvas.style.left = `${evChartRange.x1 - (brushButtonWidth / 2)}px`;
+      }
 
-    const ctx = brushCanvas.getContext('2d');
-
-    ctx.clearRect(
-      0,
-      0,
-      brushCanvasWidth * pixelRatio,
-      brushCanvasHeight * pixelRatio,
-    );
-
-    ctx.fillStyle = this.evChartBrushOptions.value.selection.fillColor;
-    ctx.globalAlpha = this.evChartBrushOptions.value.selection.opacity;
-    ctx.fillRect(brushRectX, 0, brushRectWidth, brushRectHeight);
-    ctx.fillRect(brushButtonLeftXPos, 0, brushButtonWidth, brushRectHeight);
-    ctx.fillRect(brushButtonRightXPos - brushButtonWidth, 0, brushButtonWidth, brushRectHeight);
-
-    this.evChartBrushPos = {
-      leftX: brushButtonLeftXPos / pixelRatio,
-      rightX: brushButtonRightXPos / pixelRatio,
-      buttonWidth: brushButtonWidth,
-      axesXInterval,
-    };
+      if (!isEqualWidth) {
+        brushCanvas.width = (brushCanvasWidth * pixelRatio);
+        brushCanvas.style.width = `${brushCanvasWidth}px`;
+        brushCanvas.height = brushCanvasHeight * pixelRatio;
+        brushCanvas.style.height = `${brushCanvasHeight}px`;
+      }
+
+      const ctx = brushCanvas.getContext('2d');
+
+      ctx.clearRect(
+        0,
+        0,
+        brushCanvasWidth * pixelRatio,
+        brushCanvasHeight * pixelRatio,
+      );
+
+      ctx.fillStyle = this.evChartBrushOptions.value.selection.fillColor;
+      ctx.globalAlpha = this.evChartBrushOptions.value.selection.opacity;
+      ctx.fillRect(brushRectX, 0, brushRectWidth, brushRectHeight);
+      ctx.fillRect(brushButtonLeftXPos, 0, brushButtonWidth, brushRectHeight);
+      ctx.fillRect(brushButtonRightXPos - brushButtonWidth, 0, brushButtonWidth, brushRectHeight);
+
+      this.evChartBrushPos = {
+        leftX: brushButtonLeftXPos / pixelRatio,
+        rightX: brushButtonRightXPos / pixelRatio,
+        buttonWidth: brushButtonWidth,
+        axesXInterval,
+      };
+    }
   }
 
   addEvent() {

package/src/components/chartGroup/ChartGroup.vue

@@ -47,10 +47,11 @@ export default {
     },
   },
   emits: [
+    'update:groupSelectedLabel',
     'update:zoomStartIdx',
     'update:zoomEndIdx',
   ],
-  setup(props) {
+  setup(props, { emit }) {
     const {
       getNormalizedOptions,
       isExecuteZoom,
@@ -62,8 +63,10 @@ export default {
     provide('isExecuteZoom', isExecuteZoom);
     provide('isChartGroup', true);
     provide('brushSeries', brushSeries);
-
-    const groupSelectedLabel = computed(() => props.groupSelectedLabel);
+    const groupSelectedLabel = computed({
+      get: () => props.groupSelectedLabel,
+      set: val => emit('update:groupSelectedLabel', val),
+    });
     provide('groupSelectedLabel', groupSelectedLabel);
 
     const {