cnhis-design-vue 3.1.13-beta.7 → 3.1.13

package/es/packages/fabric-chart/src/hooks/useCumputedPoint.js

@@ -1,13 +1,22 @@
 function useCumputedPoint(propItems) {
-  const { xScaleList, xScaleCell, originX, endY, xCellWidth, left, vitalSignsOriginY, painOriginY } = propItems;
+  const { xScaleList, originX, endY, xCellWidth, left, vitalSignsOriginY, painOriginY, canvasWidth } = propItems;
   function cumputedX(value) {
     const time = new Date(value).getTime();
-    const minScale = Math.min(...xScaleList.map((v) => +v));
-    const i = Math.floor((time - minScale) / xScaleCell);
-    if (xScaleList.includes(time)) {
-      return originX + xCellWidth * i;
+    const [minScale] = xScaleList;
+    const maxScale = xScaleList.at(-1);
+    if (time < minScale.start)
+      return 0;
+    if (time > maxScale.end)
+      return canvasWidth;
+    const index = xScaleList.findIndex((v) => v.end >= time);
+    if (index > -1) {
+      const item = xScaleList[index];
+      if (time === item.start) {
+        return item.left;
+      } else {
+        return item.center;
+      }
     }
-    return originX + xCellWidth * i + xCellWidth / 2;
   }
   function cumputedY(type, scaleValueList, value) {
     const yScaleCell = propItems[`${type}YCell`];
@@ -16,13 +25,18 @@ function useCumputedPoint(propItems) {
     return newEndY - yScaleCell * yCellUnit;
   }
   function getXValue(pointX) {
-    const minScale = Math.min(...xScaleList.map((v) => +v));
-    const time = minScale + (pointX - originX) / xCellWidth * xScaleCell;
-    let d = new Date(time);
-    const month = `00${d.getMonth() + 1}`.slice(-2);
-    const day = `00${d.getDate()}`.slice(-2);
-    const date = `${d.getFullYear()}-${month}-${day} ${d.getHours()}:00`;
-    return date;
+    const index = xScaleList.findIndex((v) => v.left + xCellWidth >= pointX);
+    if (index > -1) {
+      const item = xScaleList[index];
+      const residueX = pointX - item.left;
+      const residueTime = item.scaleCell * residueX;
+      const time = item.start + residueTime;
+      let d = new Date(time);
+      const month = `00${d.getMonth() + 1}`.slice(-2);
+      const day = `00${d.getDate()}`.slice(-2);
+      const date = `${d.getFullYear()}-${month}-${day} ${d.getHours()}:${d.getMinutes()}`;
+      return date;
+    }
   }
   function getYValue(type, pointY) {
     var _a;

package/es/packages/fabric-chart/src/hooks/useGrid.js

@@ -3,33 +3,38 @@ import { fabric } from '../utils/index.js';
 import { drawLine } from './useDraw.js';
 
 function useGrid(canvas, propItems) {
+  var _a, _b;
   const { gridYNumber, originY, grid, originX, endX, xCellWidth, yCellHeight, gridXNumber, endY } = propItems;
   const yList = [];
   const xList = [];
+  const mainList = /* @__PURE__ */ new Set();
   for (let i = 0; i <= gridYNumber; i++) {
     const y = originY + parseInt(String(yCellHeight * (gridYNumber - i)));
-    const style = i % grid.subYCell === 0 ? grid.mainLineStyle || {} : grid.subLineStyle || {};
-    yList.push(drawLine([originX, y, endX, y], {
-      id: i + "_" + new Date().getTime(),
-      ...style
-    }));
+    const style = i % grid.subYCell === 0 ? ((_a = grid.mainLineStyle) == null ? void 0 : _a.x) || {} : grid.subLineStyle || {};
+    const line = drawLine([originX, y, endX, y], style);
+    if (i % grid.subYCell === 0) {
+      mainList.add(line);
+    } else {
+      yList.push(line);
+    }
   }
   for (let i = 0; i <= gridXNumber; i++) {
     const x = originX + parseInt(String(xCellWidth * i));
-    let style;
-    style = i % grid.subXCell === 0 ? grid.mainLineStyle || {} : grid.subLineStyle || {};
+    let style = grid.subLineStyle || {};
     if (i % grid.subSecondXCell === 0) {
       style = grid.subSecondLineStyle || {};
     }
     if (i % grid.subXCell === 0) {
-      style = grid.mainLineStyle || {};
+      style = ((_b = grid.mainLineStyle) == null ? void 0 : _b.y) || {};
+    }
+    const line = drawLine([x, originY, x, endY], style);
+    if (i % grid.subXCell === 0) {
+      mainList.add(line);
+    } else {
+      xList.push(line);
     }
-    xList.push(drawLine([x, originY, x, endY], {
-      id: i + "_" + new Date().getTime(),
-      ...style
-    }));
   }
-  const group = new fabric.Group([...xList, ...yList], {
+  const group = new fabric.Group([...xList, ...yList, ...mainList], {
     evented: false,
     selectable: false
   });

package/es/packages/fabric-chart/src/hooks/useLeft.js

@@ -17,6 +17,36 @@ function useLeft(canvas, propItems, emits, setPopup, pointTipProps, getXValue, g
     iconsWidth,
     itemList
   } = propItems;
+  const mainScaleWidth = 9;
+  const subScaleWidth = 5;
+  function drawScaleNumber(text, item, left2, top) {
+    return new fabric.Text(String(text), {
+      ...defaultTextStyle,
+      originX: item.position || "center",
+      left: left2,
+      top,
+      ...item.style
+    });
+  }
+  function getScaleInfo(position = "center", x, width) {
+    let scaleLeft = x + width / 2;
+    let lineXMain = [scaleLeft - mainScaleWidth / 2, scaleLeft + mainScaleWidth / 2];
+    let lineXSub = [scaleLeft - subScaleWidth / 2, scaleLeft + subScaleWidth / 2];
+    let textLeft = scaleLeft;
+    if (position === "left") {
+      scaleLeft = x;
+      lineXMain = [scaleLeft, scaleLeft + mainScaleWidth];
+      lineXSub = [scaleLeft, scaleLeft + subScaleWidth];
+      textLeft = lineXMain[1];
+    }
+    if (position === "right") {
+      scaleLeft = x + width;
+      lineXMain = [scaleLeft - mainScaleWidth, scaleLeft];
+      lineXSub = [scaleLeft - subScaleWidth, scaleLeft];
+      textLeft = lineXMain[0];
+    }
+    return { lineXMain, lineXSub, textLeft };
+  }
   function drwaPainScaleValue(item) {
     const title = drawTextGroup({
       width: originX - iconsWidth,
@@ -32,18 +62,28 @@ ${item.title.slice(-2)}`,
       top: painOriginY.originY
     });
     const list = [];
-    item.list.forEach((v, i) => {
-      const top = painOriginY.endY - i * yCellHeight * item.spaceGridNumber;
-      const text = new fabric.Text(String(v), {
-        ...defaultTextStyle,
-        originX: "right",
-        left: originX - (item.marginRight || 3),
-        top: i === 0 ? endY - 5 : top,
-        ...item.style
+    if (item.showScale || item.showNumber) {
+      const { lineXMain, textLeft } = getScaleInfo(item.position, iconsWidth, originX - iconsWidth);
+      item.list.forEach((v, i) => {
+        let top = painOriginY.endY - i * yCellHeight * item.spaceGridNumber;
+        if (i === 0) {
+          top = endY - 5;
+        }
+        if (item.showNumber) {
+          list.push(drawScaleNumber(v, item, textLeft, top));
+        }
+        if (item.showScale && i !== 0) {
+          const [x1, x2] = lineXMain;
+          const line = new fabric.Line([x1, top, x2, top], {
+            ...defaultBorderStyle,
+            ...item.style
+          });
+          list.push(line);
+        }
       });
-      list.push(text);
-    });
+    }
     canvas.value.add(title, ...list);
+    title.sendToBack();
   }
   function drawScaleValue() {
     let groupList = [];
@@ -64,51 +104,34 @@ ${item.title.slice(-2)}`,
       }) : null;
       line && list.push(line);
       const centerX = rectLeft + rectWidth / 2;
-      let leftVal = centerX;
       const spaceGridNumber = item.spaceGridNumber || 5;
       if (item.showScale || item.showNumber) {
-        const mainScaleWidth = 9;
-        const subScaleWidth = 5;
         const spaceScale = spaceGridNumber * yCellHeight / 5;
         const position = item.position || "center";
-        let leftX = leftVal;
-        let lineXMain = [leftVal - mainScaleWidth / 2, leftVal + mainScaleWidth / 2];
-        let lineXSub = [leftVal - subScaleWidth / 2, leftVal + subScaleWidth / 2];
-        if (position === "left") {
-          leftVal = rectLeft;
-          lineXMain = [leftVal, leftVal + mainScaleWidth];
-          lineXSub = [leftVal, leftVal + subScaleWidth];
-          leftX = lineXMain[1];
-        }
-        if (position === "right") {
-          leftVal = rectLeft + rectWidth;
-          lineXMain = [leftVal - mainScaleWidth, leftVal];
-          lineXSub = [leftVal - subScaleWidth, leftVal];
-          leftX = lineXMain[0];
-        }
+        const { lineXMain, lineXSub, textLeft } = getScaleInfo(item.position, rectLeft, rectWidth);
         item.list.forEach((v, i) => {
           const top = vitalSignsOriginY.endY - i * yCellHeight * spaceGridNumber;
           if (item.showNumber) {
-            const text = new fabric.Text(String(v), {
-              ...defaultTextStyle,
-              originX: position,
-              left: leftX,
-              top: i === 0 ? top - 5 : top,
-              ...item.style
-            });
+            const text = drawScaleNumber(v, item, textLeft, i === 0 ? top - 5 : top);
             list.push(text);
           }
           if (item.showScale && i !== item.list.length - 1) {
             for (let j = 0; j < 5; j++) {
               if (j > 0 || !item.showNumber || position !== "center") {
+                let createLine = function(points) {
+                  const line2 = new fabric.Line(points, {
+                    ...defaultBorderStyle,
+                    ...item.style
+                  });
+                  list.push(line2);
+                };
                 const x1 = j == 0 ? lineXMain[0] : lineXSub[0];
                 const x2 = j == 0 ? lineXMain[1] : lineXSub[1];
                 const y = top - j * spaceScale;
-                const line2 = new fabric.Line([x1, y, x2, y], {
-                  ...defaultBorderStyle,
-                  ...item.style
-                });
-                list.push(line2);
+                createLine([x1, y, x2, y]);
+                if (i == item.list.length - 2 && j == 4) {
+                  createLine([lineXMain[0], y - spaceScale, lineXMain[1], y - spaceScale]);
+                }
               }
             }
           }

package/es/packages/fabric-chart/src/hooks/useRight.js

@@ -25,7 +25,7 @@ function useRight(canvas, propItems) {
     list.push(new fabric.Rect({
       ...defaultRectStyle,
       width: canvasWidth - endX - 1,
-      height: endY + breathingHeight,
+      height: endY + breathingHeight - 1,
       left: endX,
       top: 0,
       originX: "left",
@@ -76,8 +76,8 @@ function useRight(canvas, propItems) {
     }) : null;
     unit && list.push(unit);
     const group = list.length > 0 ? new fabric.Group([...list], { ...defaultStyle }) : null;
-    group && group.sendToBack();
     group && canvas.value.add(group);
+    group && group.sendToBack();
   }
   onMounted(() => {
     nextTick(() => {

package/es/packages/fabric-chart/src/interface.d.ts

@@ -4,13 +4,17 @@ interface IEvent {
     selectable: boolean;
     evented: boolean;
 }
+interface ImainLineStyle {
+    x: fabric.ILineOptions;
+    y: fabric.ILineOptions;
+}
 interface IGrid {
     mainXCell: number;
     subXCell: number;
     subSecondXCell: number;
     mainYCell: number;
     subYCell: number;
-    mainLineStyle?: fabric.ILineOptions;
+    mainLineStyle?: ImainLineStyle;
     subLineStyle?: fabric.ILineOptions;
     subSecondLineStyle?: fabric.ILineOptions;
     event?: Partial<IEvent>;
@@ -43,8 +47,7 @@ export interface IPropItems {
     endY: number;
     xCellWidth: number;
     yCellHeight: number;
-    xScaleList: Array<string | number>;
-    xScaleCell: number;
+    xScaleList: Array<any>;
     breatheYCell: number;
     pulseYCell: number;
     temperatureYCell: number;