cnhis-design-vue 3.1.24-beta.7 → 3.1.24-beta.8

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

@@ -0,0 +1,331 @@
+import { onMounted, nextTick } from 'vue';
+import { fabric } from '../utils/index.js';
+import { defaultBorderStyle, defaultTextStyle, defaultStyle, defaultRectStyle, drawPoint, drawTextGroup } from './useDraw.js';
+
+function useLeft(canvas, propItems, emits, setPopup, pointTipProps, getXValue, getYValue, getEqualXTypes, isAddPoint) {
+  const {
+    originY,
+    endY,
+    originX,
+    endX,
+    yCellHeight,
+    left,
+    vitalSignsOriginY,
+    painOriginY,
+    painHeight,
+    iconsWidth,
+    itemList,
+    painIndex,
+    right,
+    canvasWidth,
+    canvasHeight,
+    getRightInfo,
+    hospitalizationDate
+  } = propItems;
+  const mainScaleWidth = 9;
+  const subScaleWidth = 5;
+  function drawScaleNumber(text, item, left2, top) {
+    const { position } = item;
+    return new fabric.Text(String(text), {
+      ...defaultTextStyle,
+      originX: position == "left" ? "right" : position == "right" ? "left" : "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 === "right") {
+      scaleLeft = x;
+      lineXMain = [scaleLeft, scaleLeft + mainScaleWidth];
+      lineXSub = [scaleLeft, scaleLeft + subScaleWidth];
+      textLeft = lineXMain[1];
+    }
+    if (position === "left") {
+      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,
+        height: painHeight,
+        ...defaultRectStyle
+      },
+      {
+        value: `${item.title}`,
+        ...defaultTextStyle,
+        ...item.style || {}
+      },
+      {
+        left: iconsWidth,
+        top: painOriginY.originY
+      }
+    );
+    const list = [];
+    if (item.showScale || item.showNumber) {
+      const { lineXMain, textLeft } = getScaleInfo(item.position, iconsWidth, originX - iconsWidth);
+      const listLen = item.list.length;
+      item.list.forEach((v, i) => {
+        let top = painOriginY.endY - i * yCellHeight * item.spaceGridNumber;
+        if (i === 0) {
+          top = endY - 5;
+        }
+        const isMaxMinNumber = i === 0 || i === listLen - 1;
+        if (item.showNumber && (isMaxMinNumber ? item.showMaxMinNumber : true)) {
+          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);
+        }
+      });
+    }
+    canvas.value.add(title, ...list);
+    title.sendToBack();
+  }
+  function drawScaleValue(yScaleValueList) {
+    var _a;
+    if (!(yScaleValueList == null ? void 0 : yScaleValueList.length))
+      return;
+    const { layout } = yScaleValueList[0];
+    let start = iconsWidth;
+    let end = originX;
+    if (layout === "right") {
+      start = endX;
+      end = endX + ((_a = right == null ? void 0 : right.width) != null ? _a : 0);
+    }
+    const groupList = [];
+    const column = !painHeight || layout === "right" ? yScaleValueList.length : yScaleValueList.length - 1;
+    const colWidth = (end - start) / column;
+    const residue = (end - start) % column;
+    const firstColWidth = colWidth + residue;
+    yScaleValueList.forEach((item, index) => {
+      if (item.type === "pain") {
+        drwaPainScaleValue(item);
+        return;
+      }
+      const list = [];
+      function createLine(points) {
+        const line2 = new fabric.Line(points, {
+          ...defaultBorderStyle,
+          ...item.style
+        });
+        list.push(line2);
+      }
+      const rectWidth = index === 0 ? firstColWidth : colWidth;
+      const rectLeft = index === 0 ? start : firstColWidth + start + (index - 1) * colWidth;
+      const line = index > 0 ? new fabric.Line([rectLeft, vitalSignsOriginY.originY, rectLeft, vitalSignsOriginY.endY], {
+        ...defaultBorderStyle
+      }) : null;
+      line && list.push(line);
+      const centerX = rectLeft + rectWidth / 2;
+      const spaceGridNumber = item.spaceGridNumber || 5;
+      if (item.showScale || item.showNumber) {
+        const spaceScale = spaceGridNumber * yCellHeight / 5;
+        const position = item.position || "center";
+        const { lineXMain, lineXSub, textLeft } = getScaleInfo(item.position, rectLeft, rectWidth);
+        const listLen = item.list.length;
+        item.list.forEach((v, i) => {
+          const top = vitalSignsOriginY.endY - i * yCellHeight * spaceGridNumber;
+          const isMaxMinNumber = i === 0 || i === listLen - 1;
+          if (item.showNumber && (isMaxMinNumber ? item.showMaxMinNumber : true)) {
+            const y = i == 0 ? top - 5 : top;
+            const scaleNumber = drawScaleNumber(v, item, textLeft, y);
+            const limitY = vitalSignsOriginY.originY + scaleNumber.height / 2;
+            if (y < limitY) {
+              scaleNumber.set({
+                top: limitY
+              });
+            }
+            list.push(scaleNumber);
+          }
+          if (item.showScale && i !== listLen - 1) {
+            for (let j = 0; j < 5; j++) {
+              if (j > 0 || !item.showNumber || position !== "center") {
+                const x1 = j == 0 ? lineXMain[0] : lineXSub[0];
+                const x2 = j == 0 ? lineXMain[1] : lineXSub[1];
+                const y = top - j * spaceScale;
+                if (y > vitalSignsOriginY.originY) {
+                  createLine([x1, y, x2, y]);
+                  if (i == listLen - 2 && j == 4) {
+                    createLine([lineXMain[0], y - spaceScale, lineXMain[1], y - spaceScale]);
+                  }
+                }
+              }
+            }
+          }
+        });
+      }
+      let title = item.title || "";
+      if (item.unit)
+        title += "\n" + item.unit;
+      title && list.push(
+        new fabric.Text(String(title), {
+          ...defaultTextStyle,
+          left: centerX,
+          top: vitalSignsOriginY.originY + yCellHeight * spaceGridNumber / 2,
+          textAlign: "center",
+          ...item.style
+        })
+      );
+      const group2 = new fabric.Group(list, defaultStyle);
+      groupList.push(group2);
+    });
+    groupList.push(
+      new fabric.Rect({
+        ...defaultRectStyle,
+        width: layout === "right" ? end - start - 1 : end - start,
+        height: layout === "right" ? endY - originY - 1 : endY - originY,
+        left: start,
+        top: originY,
+        originX: "left",
+        originY: "top"
+      })
+    );
+    const group = groupList.length > 0 ? new fabric.Group([...groupList], { ...defaultStyle }) : null;
+    group && canvas.value.add(group);
+    group && group.sendToBack();
+  }
+  function drawIcons() {
+    const list = JSON.parse(JSON.stringify(itemList));
+    let topY = endY;
+    const leftX = iconsWidth - left.icons.marginRight;
+    list.reverse().forEach((item) => {
+      topY -= 10;
+      let title = item.title.replace(/(.{2})/g, "$1\n");
+      if (title.endsWith("\n")) {
+        title = title.slice(0, title.length - 1);
+      }
+      const text = new fabric.Text(String(title), {
+        ...defaultStyle,
+        ...item.titleStyle || {},
+        originX: "right",
+        originY: "bottom",
+        left: leftX - (item.pointAttr.width || 10) - 5,
+        top: topY,
+        lineHeight: 1,
+        fontSize: 12
+      });
+      const icon = drawPoint(item.type, {
+        left: leftX,
+        top: topY - (text.height || 30) / 2 - 1,
+        ...item.pointAttr,
+        originY: "center",
+        originX: "right",
+        origin: {
+          title: item.title,
+          unit: item.unit,
+          type: item.bigType,
+          dataIndex: item.dataIndex,
+          key: item.key
+        },
+        originLeft: leftX,
+        originTop: topY - (text.height || 30) / 2 - 1,
+        ...propItems.event
+      });
+      topY -= text.height || 30;
+      setPointEvent(icon);
+      canvas.value.add(text, icon);
+    });
+  }
+  function isLimit(point) {
+    return point.left >= originX && point.left < endX && point.top >= originY && point.top <= endY;
+  }
+  function moveLimit(point) {
+    if (point.left >= originX && point.left <= endX) {
+      point.setCoords();
+      const newY = point.origin.type === "pain" ? painOriginY : vitalSignsOriginY;
+      if (point.top < newY.originY) {
+        point.set("top", newY.originY);
+      }
+      if (point.top > newY.endY) {
+        point.set("top", newY.endY);
+      }
+    }
+  }
+  function setPointEvent(point) {
+    point.on("moving", () => {
+      point.set("originX", "center");
+      moveLimit(point);
+      if (isLimit(point)) {
+        setPopup(point);
+      } else {
+        pointTipProps.show = false;
+      }
+    });
+    point.on("mouseup:before", (event) => {
+      pointTipProps.show = false;
+      if (event.e.button === 0) {
+        if (isLimit(point)) {
+          if (!getEqualXTypes(point.left).includes(point.origin.type) && isAddPoint(point.left)) {
+            emits("add", {
+              data: {
+                time: getXValue(point.left),
+                value: getYValue(point.origin.type, point.top),
+                ...point.origin.type !== "temperature" ? {} : { key: point.origin.key }
+              },
+              ...point.origin
+            });
+          } else {
+            console.log("\u5F53\u524D\u65F6\u95F4\u6BB5\u5185\u65E0\u53EF\u65B0\u589E\u8282\u70B9");
+            setRestore();
+          }
+        } else {
+          setRestore();
+        }
+      }
+      function setRestore() {
+        point.setCoords();
+        point.set({ originX: "right", left: point.originLeft, top: point.originTop });
+      }
+    });
+  }
+  function drawBorder() {
+    canvas.value.add(
+      new fabric.Rect({
+        left: iconsWidth,
+        top: 0,
+        width: canvasWidth - iconsWidth,
+        height: canvasHeight - 1,
+        fill: "transparent",
+        ...defaultBorderStyle
+      })
+    );
+  }
+  onMounted(() => {
+    nextTick(() => {
+      var _a, _b;
+      iconsWidth && drawIcons();
+      const yScaleValueList = left.yScaleValue.filter((v) => v.layout === "left" && v.type !== "pain" && v.show);
+      if ((right == null ? void 0 : right.width) && ((_a = right == null ? void 0 : right.yScaleValue) == null ? void 0 : _a.layout) === "left" && ((_b = right == null ? void 0 : right.yScaleValue) == null ? void 0 : _b.show)) {
+        yScaleValueList.push(getRightInfo);
+      }
+      if (painIndex > 0 && left.yScaleValue[painIndex].show) {
+        const painObj = left.yScaleValue[painIndex];
+        painIndex === 0 && left.yScaleValue.length > 1 && yScaleValueList.unshift(painObj);
+        painIndex == left.yScaleValue.length - 1 && yScaleValueList.push(painObj);
+      }
+      drawScaleValue(yScaleValueList);
+      drawBorder();
+      canvas.value.renderAll();
+    });
+  });
+  return {
+    drawScaleValue
+  };
+}
+
+export { useLeft };

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

@@ -0,0 +1,4 @@
+import { Ref } from 'vue';
+import { fabric } from '../utils';
+import { IPropItems } from '../interface';
+export declare function useOther(canvas: Ref<fabric.Canvas>, propItems: IPropItems, cumputedX: Function): void;

package/es/components/fabric-chart/src/hooks/useOther.js

@@ -0,0 +1,100 @@
+import { onMounted, nextTick } from 'vue';
+import { fabric } from '../utils/index.js';
+import { defaultStyle } from './useDraw.js';
+
+function useOther(canvas, propItems, cumputedX) {
+  const { other, vitalSignsOriginY, xCellWidth, yCellHeight } = propItems;
+  let textDiff = 0;
+  function drawOther() {
+    if (!(other == null ? void 0 : other.list))
+      return false;
+    const list = [];
+    const otherList = [];
+    other.list.forEach((item) => {
+      const align = item.align || "vertical";
+      const left = cumputedX(item.time, true);
+      const obj = otherList.find((v) => v.left == left);
+      if (obj) {
+        obj[align].push(item);
+      } else {
+        const initObj = {
+          left,
+          vertical: [],
+          horizontal: []
+        };
+        initObj[align].push(item);
+        otherList.push(initObj);
+      }
+    });
+    otherList.forEach((item) => {
+      let topY = vitalSignsOriginY.originY;
+      let leftX = item.left;
+      item.vertical.forEach((v, i) => {
+        var _a, _b;
+        const baseTop = (v.baseTop || 0) * yCellHeight;
+        const lastLeft = ((_a = list.at(-1)) == null ? void 0 : _a.left) || 0;
+        if (i === 0 && item.left <= lastLeft) {
+          leftX = lastLeft + xCellWidth;
+        }
+        const leftList = list.filter((v2) => v2.trueLeft === leftX);
+        if (leftList.length) {
+          const valueLenght = String(v.value).length;
+          const valueHeight = valueLenght * yCellHeight;
+          const lastHeight = ((_b = list.at(-1)) == null ? void 0 : _b.trueHeight) || 0;
+          topY += lastHeight;
+          if (topY + valueHeight + baseTop > vitalSignsOriginY.endY) {
+            topY = vitalSignsOriginY.originY;
+            leftX += xCellWidth;
+          }
+        }
+        topY += baseTop;
+        if (String(v.value).length) {
+          list.push(getText(v, leftX, topY));
+        }
+      });
+      item.horizontal.forEach((v, i) => {
+        var _a;
+        const topY2 = vitalSignsOriginY.originY + (v.baseTop || 0) * yCellHeight;
+        const lastLeft = ((_a = list.at(-1)) == null ? void 0 : _a.left) || 0;
+        if (item.left <= lastLeft) {
+          leftX = lastLeft + xCellWidth;
+        }
+        if (String(v.value).length) {
+          list.push(getText(v, leftX, topY2));
+        }
+      });
+    });
+    const group = list.length > 0 ? new fabric.Group([...list], { ...defaultStyle }) : null;
+    group && canvas.value.add(group);
+  }
+  function getText(v, x, y) {
+    const texts = [];
+    String(v.value).split("").forEach((value, index) => {
+      const text = new fabric.Text(value, {
+        left: 0,
+        top: yCellHeight * index,
+        originX: "center",
+        ...defaultStyle,
+        ...v.style || {}
+      });
+      textDiff = (yCellHeight - (text.height || 0)) / 2;
+      texts.push(text);
+    });
+    return new fabric.Group(texts, {
+      originX: "center",
+      left: x,
+      top: y + textDiff,
+      baseTop: (v.baseTop || 0) * yCellHeight,
+      trueLeft: x,
+      trueHeight: texts.length * yCellHeight
+    });
+  }
+  onMounted(() => {
+    nextTick(() => {
+      drawOther();
+      canvas.value.renderAll();
+    });
+  });
+}
+
+export { useOther };

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

@@ -0,0 +1,4 @@
+import { Ref } from 'vue';
+import { fabric } from '../utils';
+import { IPropItems } from '../interface';
+export declare function useRight(canvas: Ref<fabric.Canvas>, propItems: IPropItems, drawScaleValue: Function): void;

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

@@ -0,0 +1,27 @@
+import { onMounted, nextTick } from 'vue';
+import { fabric } from '../utils/index.js';
+import { defaultBorderStyle } from './useDraw.js';
+
+function useRight(canvas, propItems, drawScaleValue) {
+  const { left, right, getRightInfo, canvasWidth, endY, endX, originY } = propItems;
+  onMounted(() => {
+    nextTick(() => {
+      var _a, _b;
+      const yScaleValueList = left.yScaleValue.filter((v) => v.layout === "right" && v.show);
+      if ((right == null ? void 0 : right.width) && ((_a = right == null ? void 0 : right.yScaleValue) == null ? void 0 : _a.layout) === "right" && ((_b = right == null ? void 0 : right.yScaleValue) == null ? void 0 : _b.show)) {
+        yScaleValueList.push(getRightInfo);
+      }
+      if ((right == null ? void 0 : right.width) || yScaleValueList.length > 0) {
+        const rightBorderLine = new fabric.Line([canvasWidth - 1, 0, canvasWidth - 1, endY], defaultBorderStyle);
+        const rightBorderLine2 = new fabric.Line([endX + 1, originY, canvasWidth - 1, originY], {
+          ...defaultBorderStyle,
+          stroke: "#fff"
+        });
+        canvas.value.add(rightBorderLine, rightBorderLine2);
+      }
+      drawScaleValue(yScaleValueList);
+    });
+  });
+}
+
+export { useRight };

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

@@ -0,0 +1,6 @@
+import { fabric } from '../utils';
+declare type Point = [number, number];
+export declare function useShadow(): {
+    createShadowLines: (coordinates: Point[], angle?: number, space?: number) => fabric.Line[];
+};
+export {};

package/es/components/fabric-chart/src/hooks/useShadow.js

@@ -0,0 +1,132 @@
+import { useMemoize } from '@vueuse/core';
+import { fabric } from '../utils/index.js';
+
+const getTangent = useMemoize((angle) => {
+  return +Math.tan(angle * Math.PI / 180);
+});
+function useShadow() {
+  function createShadowLines(coordinates, angle = 45, space = 10) {
+    const result = [];
+    angle = normalizeAngle(angle);
+    if (angle === 0)
+      return result;
+    const minX = Math.min(...coordinates.map(([x]) => x));
+    const maxX = Math.max(...coordinates.map(([x]) => x));
+    const minY = Math.min(...coordinates.map(([, y]) => y));
+    const maxY = Math.max(...coordinates.map(([, y]) => y));
+    const offsetX = (maxY - minY) / getTangent(angle);
+    const isLeanRight = angle > 0 && angle < 90 || angle > 180 && angle < 270;
+    let start = minX;
+    let end = maxX;
+    if (isLeanRight) {
+      end += offsetX;
+    } else {
+      start += offsetX;
+    }
+    getLinePoints(start, end).forEach((linePoint) => {
+      let intersectionPoints = [];
+      getShapeLinePoints(coordinates).forEach((shapeLinePoint) => {
+        const intersectionPoint = getIntersectionPoint(
+          linePoint[0],
+          linePoint[1],
+          shapeLinePoint[0],
+          shapeLinePoint[1]
+        );
+        intersectionPoint && intersectionPoints.push(intersectionPoint);
+      });
+      intersectionPoints = sortPoints(uniquePoints(intersectionPoints));
+      if (intersectionPoints.length >= 2) {
+        for (let i = 0; i < intersectionPoints.length; i++) {
+          if (intersectionPoints[i + 1] && isInnerLine(intersectionPoints[i], intersectionPoints[i + 1])) {
+            result.push(createLine(intersectionPoints[i], intersectionPoints[i + 1]));
+          }
+        }
+      }
+    });
+    return result;
+    function isInnerLine(point1, point2) {
+      return isInPolygon([(point1[0] + point2[0]) / 2, (point1[1] + point2[1]) / 2], coordinates);
+    }
+    function normalizeAngle(angle2) {
+      angle2 = angle2 % 360;
+      angle2 = angle2 < 0 ? 180 - angle2 : angle2;
+      angle2 = angle2 >= 180 ? angle2 - 180 : angle2;
+      return angle2;
+    }
+    function getLinePoints(start2, end2) {
+      const result2 = [completePoint([start2, minY])];
+      while (start2 < end2) {
+        start2 += space;
+        result2.push(completePoint([start2, minY]));
+      }
+      return result2;
+    }
+    function completePoint(point) {
+      const otherPoint = [point[0] - offsetX, maxY];
+      return [point, otherPoint];
+    }
+    function getShapeLinePoints(coordinates2) {
+      return coordinates2.reduce((res, c, idx) => {
+        const next = coordinates2[idx + 1] || coordinates2[0];
+        res.push([c, next]);
+        return res;
+      }, []);
+    }
+    function createLine(startPoint, endPoint) {
+      return new fabric.Line([startPoint[0], startPoint[1], endPoint[0], endPoint[1]]);
+    }
+  }
+  return { createShadowLines };
+  function sortPoints(points) {
+    return points.sort((a, b) => a[1] - b[1]);
+  }
+  function getIntersectionPoint(a, b, c, d) {
+    const denominator = (b[1] - a[1]) * (d[0] - c[0]) - (a[0] - b[0]) * (c[1] - d[1]);
+    if (denominator === 0) {
+      return false;
+    }
+    const x = ((b[0] - a[0]) * (d[0] - c[0]) * (c[1] - a[1]) + (b[1] - a[1]) * (d[0] - c[0]) * a[0] - (d[1] - c[1]) * (b[0] - a[0]) * c[0]) / denominator;
+    const y = -((b[1] - a[1]) * (d[1] - c[1]) * (c[0] - a[0]) + (b[0] - a[0]) * (d[1] - c[1]) * a[1] - (d[0] - c[0]) * (b[1] - a[1]) * c[1]) / denominator;
+    if (((x - a[0]) * (x - b[0]) < 0 || nearlyEqual(x, a[0]) || nearlyEqual(x, b[0])) && ((y - a[1]) * (y - b[1]) < 0 || nearlyEqual(y, a[1]) || nearlyEqual(y, b[1])) && ((x - c[0]) * (x - d[0]) < 0 || nearlyEqual(x, c[0]) || nearlyEqual(x, d[0])) && ((y - c[1]) * (y - d[1]) < 0 || nearlyEqual(y, c[1]) || nearlyEqual(y, d[1]))) {
+      return [x, y];
+    }
+    return false;
+  }
+  function uniquePoints(points) {
+    return points.reduce((fin, point) => {
+      if (!hasPoint(fin, point))
+        fin.push(point);
+      return fin;
+    }, []);
+    function hasPoint(points2, point) {
+      return points2.some((p) => nearlyEqual(p[0], point[0]) && nearlyEqual(p[1], point[1]));
+    }
+  }
+  function isInPolygon(checkPoint, polygonPoints) {
+    let counter = 0;
+    let xinters;
+    let p1, p2;
+    const pointCount = polygonPoints.length;
+    p1 = polygonPoints[0];
+    for (let i = 1; i <= pointCount; i++) {
+      p2 = polygonPoints[i % pointCount];
+      if (checkPoint[0] > Math.min(p1[0], p2[0]) && checkPoint[0] <= Math.max(p1[0], p2[0])) {
+        if (checkPoint[1] <= Math.max(p1[1], p2[1])) {
+          if (p1[0] != p2[0]) {
+            xinters = (checkPoint[0] - p1[0]) * (p2[1] - p1[1]) / (p2[0] - p1[0]) + p1[1];
+            if (p1[1] == p2[1] || checkPoint[1] <= xinters) {
+              counter++;
+            }
+          }
+        }
+      }
+      p1 = p2;
+    }
+    return counter % 2 !== 0;
+  }
+  function nearlyEqual(v1, v2) {
+    return Math.abs(v1 - v2) <= 1e-4;
+  }
+}
+
+export { useShadow };

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

@@ -0,0 +1,4 @@
+import { Ref } from 'vue';
+import { fabric } from '../utils';
+import { IPropItems } from '../interface';
+export declare function useTop(canvas: Ref<fabric.Canvas>, propItems: IPropItems): void;