cnhis-design-vue 3.4.0-beta.9 → 3.4.0-release.7

package/es/components/fabric-chart/src/hooks/birthProcess/useBirthProcessChart.js

@@ -1,4 +1,4 @@
-import { reactive, computed, watch, toRefs } from 'vue';
+import { reactive, watch, toRefs } from 'vue';
 import { defaultBorderStyle } from '../useDraw.js';
 import '../../../../../shared/utils/fabricjs/index.js';
 import 'date-fns';
@@ -22,101 +22,83 @@ function useBirthProcessChart(canvas, props, emits, canvasRef, pointTipProps, po
     redrawPoints: null,
     clickMenu: null
   });
-  const leftScales = computed(
-    () => props.data.scaleValues.map((item) => {
-      var _a;
-      return { ...item, width: (_a = item.width) != null ? _a : 60 };
-    }).filter(({ layout = "left", show = true }) => layout === "left" && show)
-  );
-  const rightScales = computed(
-    () => props.data.scaleValues.map((item) => {
-      var _a;
-      return { ...item, width: (_a = item.width) != null ? _a : 60 };
-    }).filter(({ layout = "left", show = true }) => layout === "right" && show)
-  );
   const leftAddAreaWidth = 30;
-  const rightAddAreaWidth = computed(() => {
-    var _a;
-    return !((_a = rightScales.value) == null ? void 0 : _a.length) ? 0 : 30;
-  });
-  const originX = computed(() => {
-    var _a;
-    const leftScalesWidth = (_a = leftScales.value) == null ? void 0 : _a.reduce((width, item) => {
-      width += item.width;
-      return width;
-    }, 0);
-    return leftAddAreaWidth + leftScalesWidth;
-  });
-  const endX = computed(() => {
-    var _a;
+  function buildDerived() {
+    var _a, _b;
+    const leftScales = props.data.scaleValues.map((item) => {
+      var _a2;
+      return { ...item, width: (_a2 = item.width) != null ? _a2 : 60 };
+    }).filter(({ layout = "left", show = true }) => layout === "left" && show);
+    const rightScales = props.data.scaleValues.map((item) => {
+      var _a2;
+      return { ...item, width: (_a2 = item.width) != null ? _a2 : 60 };
+    }).filter(({ layout = "left", show = true }) => layout === "right" && show);
+    const rightAddAreaWidth = !(rightScales == null ? void 0 : rightScales.length) ? 0 : 30;
+    const leftScalesWidth = leftScales == null ? void 0 : leftScales.reduce((width2, item) => width2 + item.width, 0);
+    const originX = leftAddAreaWidth + leftScalesWidth;
     const { width } = props.data;
-    const rightScalesWidth = (_a = rightScales.value) == null ? void 0 : _a.reduce((width2, item) => {
-      width2 += item.width;
-      return width2;
-    }, 0);
-    return width - rightAddAreaWidth.value - rightScalesWidth;
-  });
-  const gridXNumber = computed(() => props.data.grid.mainXCell);
-  const gridYNumber = computed(() => {
+    const rightScalesWidth = rightScales == null ? void 0 : rightScales.reduce((w, item) => w + item.width, 0);
+    const endX = width - rightAddAreaWidth - rightScalesWidth;
+    const gridXNumber = props.data.grid.mainXCell;
     const mainYCell = props.data.grid.mainYCell || 14;
-    const fhrItem = props.data.scaleValues.find((item) => item.show && item.key === "FHR");
-    return !fhrItem && mainYCell === 14 ? 10 : mainYCell;
-  });
-  const xCellWidth = computed(() => {
-    return (endX.value - originX.value) / gridXNumber.value;
-  });
-  const padding = computed(() => {
-    const p = props.data.padding || [5, 5];
+    const fhrItemShow = props.data.scaleValues.find((item) => item.show && item.key === "FHR");
+    const gridYNumber = !fhrItemShow && mainYCell === 14 ? 10 : mainYCell;
+    const xCellWidth = (endX - originX) / gridXNumber;
+    const defaultPadding = props.data.padding || [5, 5];
     const xAxisNumberTop = getxAxisNumber("top");
     const xAxisNumberBottom = getxAxisNumber("bottom");
-    return [xAxisNumberTop ? 0 : p[0], xAxisNumberBottom ? 0 : p[1]];
-  });
-  const yCellHeight = computed(() => {
+    const padding = [xAxisNumberTop ? 0 : defaultPadding[0], xAxisNumberBottom ? 0 : defaultPadding[1]];
     const { height } = props.data;
-    const xAxisNumber = getxAxisNumber();
-    return (height - padding.value.reduce((p1, p2) => p1 + p2, 0)) / (gridYNumber.value + xAxisNumber);
-  });
-  const originY = computed(() => {
-    const xAxisNumber = getxAxisNumber("top");
-    return yCellHeight.value * xAxisNumber + padding.value[0];
-  });
-  const originYCervix = computed(() => {
-    var _a;
-    const { scaleValues } = props.data;
+    const xAxisNumberAll = getxAxisNumber();
+    const yCellHeight = (height - padding.reduce((p1, p2) => p1 + p2, 0)) / (gridYNumber + xAxisNumberAll);
+    const originY = yCellHeight * xAxisNumberTop + padding[0];
+    const endY = height - yCellHeight * xAxisNumberBottom - padding[1];
+    const scaleValues = props.data.scaleValues;
     const FHRisShow = (_a = scaleValues.find((item) => item.key === "FHR")) == null ? void 0 : _a.show;
-    if (!FHRisShow && !originY.value)
-      return originY.value;
     const cervixItem = scaleValues.find((item) => item.key === "cervix");
     const [, max] = (cervixItem == null ? void 0 : cervixItem.range) || [0, 10];
     const spaceValue = (cervixItem == null ? void 0 : cervixItem.spaceValue) || 1;
-    return endY.value - padding.value[0] - max * spaceValue * yCellHeight.value;
-  });
-  const endY = computed(() => {
-    const { height } = props.data;
-    const xAxisNumber = getxAxisNumber("bottom");
-    return height - yCellHeight.value * xAxisNumber - padding.value[1];
-  });
-  const startTime = computed(() => getTime(props.data.xAxis.time.startTime));
-  const timeXCell = computed(() => 1 * 60 * 60 * 1e3 / xCellWidth.value);
-  const cervixYCell = computed(() => {
-    const { scaleValues } = props.data;
-    const cervixItem = scaleValues.find((item) => item.key === "cervix");
-    return yCellHeight.value / ((cervixItem == null ? void 0 : cervixItem.spaceValue) || 1);
-  });
-  const FHRYCell = computed(() => {
-    const { scaleValues } = props.data;
-    const cervixItem = scaleValues.find((item) => item.key === "FHR");
-    return yCellHeight.value / ((cervixItem == null ? void 0 : cervixItem.spaceValue) || 10);
-  });
-  const fetalPresentationYCell = computed(() => {
-    const { scaleValues } = props.data;
-    const cervixItem = scaleValues.find((item) => item.key === "fetalPresentation");
-    return yCellHeight.value / ((cervixItem == null ? void 0 : cervixItem.spaceValue) || 1);
-  });
-  const event = computed(() => {
-    var _a;
-    return ((_a = props.data.grid) == null ? void 0 : _a.event) || { selectable: true, evented: true, hovered: true };
-  });
+    const originYCervix = !FHRisShow && !originY ? originY : endY - padding[0] - max * spaceValue * yCellHeight;
+    const startTime = getTime(props.data.xAxis.time.startTime);
+    const timeXCell = 1 * 60 * 60 * 1e3 / xCellWidth;
+    const cervixYCell = yCellHeight / ((cervixItem == null ? void 0 : cervixItem.spaceValue) || 1);
+    const FHRItem = scaleValues.find((item) => item.key === "FHR");
+    const FHRYCell = yCellHeight / ((FHRItem == null ? void 0 : FHRItem.spaceValue) || 10);
+    const fetalPresentationItem = scaleValues.find((item) => item.key === "fetalPresentation");
+    const fetalPresentationYCell = yCellHeight / ((fetalPresentationItem == null ? void 0 : fetalPresentationItem.spaceValue) || 1);
+    const event = ((_b = props.data.grid) == null ? void 0 : _b.event) || { selectable: true, evented: true, hovered: true };
+    return {
+      canvasWidth: props.data.width,
+      canvasHeight: props.data.height,
+      borderStyle: { ...defaultBorderStyle, ...props.data.borderStyle },
+      selectionStyle: props.data.selectionStyle || {},
+      grid: props.data.grid,
+      other: props.data.other,
+      originX,
+      endX,
+      originY,
+      endY,
+      xCellWidth,
+      yCellHeight,
+      gridXNumber,
+      gridYNumber,
+      xAxis: props.data.xAxis,
+      leftScales,
+      rightScales,
+      leftAddAreaWidth,
+      rightAddAreaWidth,
+      startTime,
+      timeXCell,
+      cervixYCell,
+      FHRYCell,
+      fetalPresentationYCell,
+      scaleValues: props.data.scaleValues,
+      event,
+      originYCervix,
+      scalebarBorder: Reflect.has(props.data, "scalebarBorder") ? props.data.scalebarBorder : true,
+      padding
+    };
+  }
   function getxAxisNumber(position) {
     const { xAxis } = props.data;
     return Object.values(xAxis).reduce((num, item) => {
@@ -125,37 +107,7 @@ function useBirthProcessChart(canvas, props, emits, canvasRef, pointTipProps, po
       return num;
     }, 0);
   }
-  const propItems = reactive({
-    canvasWidth: props.data.width,
-    canvasHeight: props.data.height,
-    borderStyle: { ...defaultBorderStyle, ...props.data.borderStyle || {} },
-    selectionStyle: props.data.selectionStyle || {},
-    grid: props.data.grid,
-    other: props.data.other,
-    originX: originX.value,
-    endX: endX.value,
-    originY: originY.value,
-    endY: endY.value,
-    xCellWidth: xCellWidth.value,
-    yCellHeight: yCellHeight.value,
-    gridXNumber: gridXNumber.value,
-    gridYNumber: gridYNumber.value,
-    xAxis: props.data.xAxis,
-    leftScales: leftScales.value,
-    rightScales: rightScales.value,
-    leftAddAreaWidth,
-    rightAddAreaWidth: rightAddAreaWidth.value,
-    startTime: startTime.value,
-    timeXCell: timeXCell.value,
-    cervixYCell: cervixYCell.value,
-    FHRYCell: FHRYCell.value,
-    fetalPresentationYCell: fetalPresentationYCell.value,
-    scaleValues: props.data.scaleValues,
-    event: event.value,
-    originYCervix: originYCervix.value,
-    scalebarBorder: Reflect.has(props.data, "scalebarBorder") ? props.data.scalebarBorder : true,
-    padding: padding.value
-  });
+  const propItems = reactive(buildDerived());
   watch(
     () => canvas.value,
     (value) => {

package/es/components/fabric-chart/src/hooks/electrocardiogram/hooks/useDetailEvent.js

@@ -6,6 +6,7 @@ import '../../useEvent.js';
 import '../../useShadow.js';
 import '../../useCommon.js';
 import 'vue';
+import '../../../utils/eventBus.js';
 import 'date-fns';
 import '../../../constants/index.js';
 import '@vueuse/shared';
@@ -48,6 +49,7 @@ function useDetailEvent(polyline, options) {
   function calcPointData(y) {
     return getYValue(y / scale);
   }
+  const detailCellWidth = xCellWidth * scale;
   const detailCellHeight = yCellHeight * scale;
   function clearDetailGroup() {
     var _a;
@@ -62,6 +64,7 @@ function useDetailEvent(polyline, options) {
     const target = event.target;
     if (!target.points)
       return;
+    const mainXLineOffsetX = event.pointer.x % xCellWidth;
     const { x: pointerX, y: pointerY } = event.pointer;
     const currentIdx = Math.floor((pointerX - target.left) / target.width * target.points.length) + lineStartIndex;
     let startIdx = currentIdx - detailRadius;
@@ -127,10 +130,11 @@ function useDetailEvent(polyline, options) {
     }
     function createGrid(points2, targetIdx2) {
       const subLineOptions = (idx) => idx % GRID_SUBLINE_NUMBER ? gridOptions.subLineStyle : null;
-      const subLineSpace = detailCellHeight / GRID_SUBLINE_NUMBER;
+      const subLineSpaceY = detailCellHeight / GRID_SUBLINE_NUMBER;
+      const subLineSpaceX = detailCellWidth / GRID_SUBLINE_NUMBER;
       const zeroPointY = EMPTY_TOP_SPACE + points2[maxIdx].y / Math.abs(points2[maxIdx].y - points2[minIdx].y) * polylineHeight;
-      const yTopCellNumber = Math.ceil(zeroPointY / subLineSpace);
-      const yBottomCellNumber = Math.ceil((renderHeight - zeroPointY) / subLineSpace);
+      const yTopCellNumber = Math.ceil(zeroPointY / subLineSpaceY);
+      const yBottomCellNumber = Math.ceil((renderHeight - zeroPointY) / subLineSpaceY);
       function createRowLine(y, idx) {
         return new fabric.Line([offset.x, offset.y + y, offset.x + renderWidth, offset.y + y], {
           ...gridOptions.mainLineStyle.x,
@@ -138,21 +142,21 @@ function useDetailEvent(polyline, options) {
         });
       }
       const rowLineGroup = new fabric.Group([
-        ...range(yBottomCellNumber).map((idx) => createRowLine(idx * subLineSpace + zeroPointY, idx)),
-        ...range(yTopCellNumber).map((idx) => createRowLine(-(idx * subLineSpace) + zeroPointY, idx))
+        ...range(yBottomCellNumber).map((idx) => createRowLine(idx * subLineSpaceY + zeroPointY, idx)),
+        ...range(yTopCellNumber).map((idx) => createRowLine(-(idx * subLineSpaceY) + zeroPointY, idx))
       ]);
-      const currentPointX = targetIdx2 / points2.length * renderWidth;
-      const xLeftCellNumber = Math.ceil(currentPointX / subLineSpace);
-      const xRightCellNumber = Math.ceil((renderWidth - currentPointX) / subLineSpace);
+      const currentPointX = targetIdx2 / points2.length * renderWidth - mainXLineOffsetX * scale;
+      const xLeftCellNumber = Math.ceil(currentPointX / subLineSpaceX);
+      const xRightCellNumber = Math.ceil((renderWidth - currentPointX) / subLineSpaceX);
       function createColumnLine(x, idx) {
         return new fabric.Line([offset.x + x, offset.y, offset.x + x, offset.y + renderHeight], {
           ...gridOptions.mainLineStyle.y,
-          ...idx === 0 ? gridOptions.subLineStyle : subLineOptions(idx)
+          ...subLineOptions(idx)
         });
       }
       const columnLineGroup = new fabric.Group([
-        ...range(xRightCellNumber).map((idx) => createColumnLine(idx * subLineSpace + currentPointX, idx)),
-        ...range(xLeftCellNumber).map((idx) => createColumnLine(-(idx * subLineSpace) + currentPointX, idx))
+        ...range(xRightCellNumber).map((idx) => createColumnLine(idx * subLineSpaceX + currentPointX, idx)),
+        ...range(xLeftCellNumber).map((idx) => createColumnLine(-(idx * subLineSpaceX) + currentPointX, idx))
       ]);
       return new fabric.Group([columnLineGroup, rowLineGroup]);
     }
@@ -210,6 +214,7 @@ function useDetailEvent(polyline, options) {
     function createScaleText() {
       return new fabric.Text(`x${scale}`, {
         ...defaultStyle,
+        objectCaching: false,
         fill: "black",
         fontSize: 20,
         left: offset.x + 10,
@@ -218,6 +223,7 @@ function useDetailEvent(polyline, options) {
     }
     function createNumberText(points2, targetIdx2) {
       const defaultTextOptions = {
+        objectCaching: false,
         fontSize: 16,
         left: offset.x + renderWidth / 2 + 10
       };
@@ -240,7 +246,7 @@ function useDetailEvent(polyline, options) {
         fill: CURRENT_COLOR,
         top: offset.y + renderHeight - SPACE * 3
       });
-      return new fabric.Group([maxText, minText, currentText]);
+      return new fabric.Group([maxText, minText, currentText], { objectCaching: false });
     }
   });
   polyline.on("mouseup", async (event) => {

package/es/components/fabric-chart/src/hooks/electrocardiogram/useElectrocardiogram.d.ts

@@ -2,5 +2,5 @@ import { AnyObject } from '../../../../../shared/types';
 import { fabric } from '../../../../../shared/utils/fabricjs';
 import { type Ref } from 'vue';
 export declare function useElectrocardiogram(canvas: Ref<fabric.Canvas>, propItems: AnyObject, flag: Ref<boolean>): {
-    updatePolyline: (value: number) => void;
+    updatePolyline: (percent: number) => void;
 };

package/es/components/fabric-chart/src/hooks/electrocardiogram/useElectrocardiogram.js

@@ -1,5 +1,5 @@
 import { fabric } from '../../../../../shared/utils/fabricjs/index.js';
-import { useThrottleFn } from '@vueuse/core';
+import { useDebounceFn, useThrottleFn } from '@vueuse/core';
 import { range } from 'lodash-es';
 import { useDetailEvent } from './hooks/useDetailEvent.js';
 import { defaultStyle, drawLine } from '../useDraw.js';
@@ -9,6 +9,7 @@ import '../useEvent.js';
 import '../useShadow.js';
 import '../useCommon.js';
 import 'vue';
+import '../../utils/eventBus.js';
 import 'date-fns';
 import { ECG } from '../../constants/index.js';
 import '@vueuse/shared';
@@ -34,8 +35,10 @@ function useElectrocardiogram(canvas, propItems, flag) {
     rowNumber,
     lineStyle,
     titleStyle,
+    titleOffset,
     config,
-    calibrationLineHeight
+    calibrationLineHeight,
+    maxLineNumber
   } = propItems;
   const gridPoints = /* @__PURE__ */ new Set();
   const fixedPointsCache = /* @__PURE__ */ new Set();
@@ -58,30 +61,40 @@ function useElectrocardiogram(canvas, propItems, flag) {
     drawPolyLine();
   }
   function getShowLength(list = []) {
-    const showLength = ~~(list.length / columnNumber);
+    const overflowIsScroll = config.overflow === "scroll";
+    const showLength = ~~(list.length / columnNumber / (overflowIsScroll ? 2 : 1));
     return showLength * (config.mainXCellValue / ECG.DEFAULTMAINXCELLVALUE);
   }
   function drawPolyLine(startIdx = 0) {
+    const overflowIsScroll = config.overflow === "scroll";
     dataList.forEach((lineItem, idx) => {
-      if (idx === dataList.length - 1 && arguments.length)
+      if (idx === maxLineNumber - 1 && arguments.length && !overflowIsScroll)
         return;
-      const { x, y, rowIdx } = lineItem.origin;
-      const showLength = getShowLength(lineItem.data);
-      const points = lineItem.data.reduce((res, value, _idx) => {
-        const _res = idx < ECG.MAXLINENUMBER - 1 && _idx >= startIdx && _idx <= startIdx + showLength || idx === ECG.MAXLINENUMBER - 1 ? [{ x: computedX(res.length + 1), y: computedY(-+value) + y }] : [];
-        return res.concat(_res);
-      }, []);
+      const { x, y, rowIdx, limitX } = lineItem.origin;
+      const lineLength = lineItem.data.length;
+      const showLength = idx < maxLineNumber - 1 ? getShowLength(lineItem.data) : lineLength;
+      const points = [];
+      let pointIndex = 0;
+      for (let _idx = startIdx; _idx <= startIdx + showLength && _idx < lineLength; _idx++) {
+        const value = lineItem.data[_idx];
+        const point = { x: computedX(pointIndex + 1), y: computedY(-+value) + y };
+        if (idx < maxLineNumber - 1 && point.x > limitX) {
+          break;
+        }
+        points.push(point);
+        pointIndex++;
+      }
       const polyline = new fabric.Polyline(points, {
+        strokeWidth: 1,
         ...lineStyle,
         fill: "transparent",
-        strokeWidth: 1,
         left: x,
         hasControls: false,
         hasBorders: false,
         hoverCursor: "default",
         lockMovementX: true,
         lockMovementY: true,
-        objectCaching: true,
+        objectCaching: false,
         evented: true,
         selectable: true
       });
@@ -96,8 +109,7 @@ function useElectrocardiogram(canvas, propItems, flag) {
         detailRadius: 370,
         beforeEvent: () => flag.value && Promise.reject()
       });
-      polyline.startIdx = startIdx;
-      if (idx < dataList.length - 1) {
+      if (idx < maxLineNumber - 1 || overflowIsScroll) {
         gridPoints.add(polyline);
       } else {
         fixedPointsCache.add(polyline);
@@ -105,18 +117,28 @@ function useElectrocardiogram(canvas, propItems, flag) {
       if (arguments.length)
         return;
       drawCalibrationLine({ x, y }, lineStyle);
-      const title = new fabric.Text(String(lineItem.title), {
-        ...titleStyle,
-        left: x + (columnNumber === 4 ? xCellWidth : xCellWidth / 2),
-        top: y,
-        originX: "left",
-        originY: "bottom"
-      });
-      fixedPointsCache.add(title);
+      drawTitle(lineItem, x, y);
     });
     const renderObjects = arguments.length ? [...gridPoints] : [...gridPoints, ...fixedPointsCache];
     canvas.value.add(...renderObjects);
   }
+  function drawTitle(lineItem, x, y) {
+    var _a, _b;
+    if (!lineItem.title)
+      return;
+    const titleOriginX = x + (columnNumber === 4 ? xCellWidth : xCellWidth / 2);
+    const titleX = titleOriginX + ((_a = titleOffset == null ? void 0 : titleOffset.x) != null ? _a : 0);
+    const titleY = y + ((_b = titleOffset == null ? void 0 : titleOffset.y) != null ? _b : 0);
+    const title = new fabric.Text(String(lineItem.title), {
+      ...titleStyle,
+      left: titleX,
+      top: titleY,
+      originX: "left",
+      originY: "bottom",
+      objectCaching: false
+    });
+    fixedPointsCache.add(title);
+  }
   function bindPointEvent(polyline, options) {
     useDetailEvent(polyline, options);
   }
@@ -168,24 +190,30 @@ function useElectrocardiogram(canvas, propItems, flag) {
     });
     canvas.value.add(...lines);
   }
-  const updatePolyline = useThrottleFn((value) => {
-    const showLength = getShowLength(dataList[dataList.length - 1].data);
-    if (showLength === dataList[0].data.length)
+  let currentStartIdx = -1;
+  let isUpdating = false;
+  const debouncedUpdate = useDebounceFn((startIdx) => {
+    if (isUpdating || currentStartIdx === startIdx)
       return;
-    const totalLength = dataList[dataList.length - 1].data.length;
-    const centerIdx = value / 100 * totalLength;
-    const _startIdx = centerIdx - showLength / 2;
-    const startIdx = _startIdx + showLength > totalLength ? totalLength - showLength : Math.max(0, _startIdx);
+    isUpdating = true;
+    currentStartIdx = startIdx;
     fabric.util.requestAnimFrame(() => {
       if (gridPoints.size) {
-        const [firstPoint] = [...gridPoints];
-        if (firstPoint.startIdx === startIdx)
-          return;
-        [...gridPoints].forEach((point) => canvas.value.remove(point));
+        const pointsArray = [...gridPoints];
+        canvas.value.remove(...pointsArray);
         gridPoints.clear();
       }
       drawPolyLine(startIdx);
+      isUpdating = false;
     });
+  }, 100);
+  const updatePolyline = useThrottleFn((percent) => {
+    const showLength = getShowLength(dataList[dataList.length - 1].data);
+    if (showLength === dataList[0].data.length)
+      return;
+    const totalLength = dataList[dataList.length - 1].data.length;
+    const startIdx = ~~(percent * totalLength);
+    debouncedUpdate(startIdx);
   }, 150);
   function drawBorder() {
     const { strokeWidth } = borderStyle;

package/es/components/fabric-chart/src/hooks/electrocardiogram/useElectrocardiogramChart.d.ts

@@ -5,8 +5,8 @@ import { IPointTipProps, IPointMenuProps } from '../../../../../components/fabri
 import { ECG } from '../../../../../components/fabric-chart/src/constants';
 export declare function useElectrocardiogramChart(canvas: Ref<fabric.Canvas>, props: AnyObject, emits: Function, canvasRef: Ref<HTMLCanvasElement | null>, pointTipProps: IPointTipProps, pointMenuProps: IPointMenuProps): {
     getGridInfo: () => {
-        cellWidth: number;
-        cellHeight: number;
+        cellWidth: any;
+        cellHeight: any;
         smallCellNumber: ECG;
     };
     select?: Ref<import("../../../../../shared/types").AnyFn | null | undefined, import("../../../../../shared/types").AnyFn | null | undefined> | undefined;