cnhis-design-vue 3.1.12-beta.6 → 3.1.12-beta.7

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

@@ -1 +1,476 @@
+import { reactive, onMounted, nextTick } from 'vue';
+import { fabric } from '../utils/index.js';
+import { defaultStyle, drawLine, drawPoint, defaultTextStyle } from './useDraw.js';
+import useGrid from './useGrid.js';
+import { useShadow } from './useShadow.js';
+import { TEMPERATURE_MENU, PAIN_MENU } from './constant.js';
 
+function isEffectiveNode(node) {
+  return (node == null ? void 0 : node.time) && ((node == null ? void 0 : node.value) || (node == null ? void 0 : node.value) === 0);
+}
+function useCenter(canvas, propItems, emits, cumputedX, cumputedY, getXValue, getYValue, addRenderItem) {
+  useGrid(canvas, propItems);
+  const {
+    left,
+    xScaleList,
+    yCellHeight,
+    originX,
+    endX,
+    originY,
+    endY,
+    itemList,
+    painIndex,
+    painHeight,
+    vitalSignsOriginY,
+    painOriginY
+  } = propItems;
+  const pointTipProps = reactive({
+    show: false,
+    point: { x: 0, y: 0 },
+    list: []
+  });
+  const pointMenuProps = reactive({
+    show: false,
+    point: { x: 0, y: 0 },
+    list: [],
+    target: null
+  });
+  const shadowLinesCache = /* @__PURE__ */ new Set();
+  onMounted(() => {
+    nextTick(() => {
+      init();
+    });
+  });
+  function init() {
+    drawShaDow();
+    left.yScaleValue.forEach((scaleValue) => {
+      scaleValue.dataList.forEach((item, dataIndex) => {
+        drawPolyLine(item, dataIndex, scaleValue);
+      });
+    });
+    setCanvasEvent();
+  }
+  function drawShaDow(target) {
+    var _a, _b;
+    const pulseObj = left.yScaleValue.find((item) => item.type === "pulse");
+    if (!pulseObj || !((_a = pulseObj.dataList) == null ? void 0 : _a.length))
+      return;
+    if (shadowLinesCache.size)
+      canvas.value.remove(...shadowLinesCache);
+    shadowLinesCache.clear();
+    const data = [];
+    if (((_b = pulseObj.dataList) == null ? void 0 : _b.length) > 1) {
+      let points1 = [];
+      let points2 = [];
+      const copyDataList = JSON.parse(JSON.stringify(pulseObj.dataList));
+      if (target) {
+        const { type, dataIndex, index } = target.origin || {};
+        if (type === "pulse") {
+          Object.assign(copyDataList[dataIndex].list[index], {
+            x: target.left,
+            y: target.top
+          });
+        }
+      }
+      const [data1, data2] = copyDataList;
+      const getPoint = (item) => {
+        return item.x && item.y ? {
+          x: item.x,
+          y: item.y
+        } : {
+          x: cumputedX(item.time),
+          y: cumputedY(pulseObj.type, pulseObj.list, item.value)
+        };
+      };
+      data1.list.forEach((item, index) => {
+        const point1 = getPoint(item);
+        const item2 = data2.list[index];
+        const point2 = item2 ? getPoint(item2) : null;
+        if (point2 && point1.x === point2.x && point1.y !== point2.y) {
+          points1.push(point1);
+          points2.push(point2);
+          const itemPrev = data1.list[index - 1];
+          const itemNext = data1.list[index + 1];
+          const itemNext2 = data2.list[index + 1];
+          if (itemPrev && points1.length === 1) {
+            const point = getPoint(itemPrev);
+            points1.unshift(point);
+            points2.unshift(point);
+          }
+          const pointNext = getPoint(itemNext);
+          const pointNext2 = itemNext2 ? getPoint(itemNext2) : null;
+          if (itemNext && pointNext2 && pointNext.x === pointNext2.x && pointNext.y === pointNext2.y) {
+            points1.push(pointNext);
+            points2.push(pointNext);
+          }
+        } else {
+          if (points1.length && points2.length) {
+            data.push({ points1, points2 });
+            points1 = [];
+            points2 = [];
+          }
+        }
+      });
+    }
+    if (data.length) {
+      const newData = data.reduce((pre, cur) => {
+        const arr1 = cur.points1.map((v) => [v.x, v.y]);
+        const arr2 = cur.points2.map((v) => [v.x, v.y]);
+        const [, ...newArr2] = arr2;
+        return pre.concat([[...arr1, ...newArr2.reverse()]]);
+      }, []);
+      const { createShadowLines } = useShadow();
+      newData.forEach((item) => {
+        const shadowLines = createShadowLines(item, pulseObj.shadowStyle._angle, pulseObj.shadowStyle.space);
+        shadowLines.forEach((l) => {
+          Object.assign(l, {
+            ...defaultStyle,
+            ...pulseObj.shadowStyle || {}
+          });
+          shadowLinesCache.add(l);
+        });
+        canvas.value.add(...shadowLines);
+        canvas.value.renderAll();
+      });
+    }
+  }
+  function setCanvasEvent() {
+    canvas.value.on("mouse:up", (event) => {
+      var _a;
+      if (event.button === 3) {
+        const { x = 0, y = 0 } = event.pointer || {};
+        if (x >= originX && x <= endX && y >= originY && y <= endY) {
+          pointTipProps.show = false;
+          pointMenuProps.point = { x, y };
+          pointMenuProps.show = true;
+          const { type } = ((_a = event.target) == null ? void 0 : _a.origin) || {};
+          if (event.target && (type === "temperature" || type === "pain")) {
+            if (type === "temperature") {
+              pointMenuProps.list = [...TEMPERATURE_MENU];
+            }
+            if (type === "pain") {
+              pointMenuProps.list = [...PAIN_MENU];
+            }
+            pointMenuProps.target = event.target;
+          } else {
+            pointMenuProps.target = null;
+            pointMenuProps.list = ["\u65B0\u589E\u8282\u70B9"];
+            itemList.forEach((v) => {
+              if (!getEqualXTypes(x).includes(v.bigType)) {
+                pointMenuProps.list.push({
+                  renderItem: addRenderItem ? addRenderItem(v) : () => v.title,
+                  origin: {
+                    title: v.title,
+                    unit: v.unit,
+                    type: v.bigType,
+                    dataIndex: v.dataIndex
+                  },
+                  pointer: event.pointer
+                });
+              }
+            });
+            if (pointMenuProps.list.length === 1) {
+              pointMenuProps.show = false;
+              console.log("\u5F53\u524D\u65F6\u95F4\u6BB5\u5185\u65E0\u53EF\u65B0\u589E\u8282\u70B9");
+            }
+          }
+        }
+      }
+    });
+  }
+  function getEqualXTypes(pointX) {
+    const types = [];
+    canvas.value.forEachObject((obj) => {
+      if (obj.origin && cumputedX(getXValue(pointX)) === obj.left) {
+        types.push(obj.origin.type);
+      }
+    });
+    return [...new Set(types)];
+  }
+  function drawPolyLine(item, dataIndex, scaleValue) {
+    const {
+      pointAttr = {},
+      lineAttr = {},
+      noRiseStyle = {},
+      verifiedStyle = {},
+      coolingStyle = {},
+      type = "circle"
+    } = item;
+    const pointList = [];
+    const lineList = [];
+    const otherList = [];
+    item.list.forEach((v, index) => {
+      const newY = scaleValue.type === "pain" ? painOriginY : vitalSignsOriginY;
+      let points = null;
+      if (isEffectiveNode(v)) {
+        const x = cumputedX(v.time);
+        const y = cumputedY(scaleValue.type, scaleValue.list, v.value);
+        if (isLimit(v.time)) {
+          points = [x, y < newY.originY ? newY.originY : y > newY.endY ? newY.endY : y];
+        }
+      }
+      const nextV = item.list[index + 1];
+      let nextPoint = null;
+      if (isEffectiveNode(nextV)) {
+        const nextX = cumputedX(nextV.time);
+        const nextY = cumputedY(scaleValue.type, scaleValue.list, nextV.value);
+        if (isLimit(nextV.time)) {
+          nextPoint = [
+            nextX,
+            nextY < newY.originY ? newY.originY : nextY > newY.endY ? newY.endY : nextY
+          ];
+        }
+      }
+      let coolLine, coolPoint, noRiseText, arrowGroup, verifiedText;
+      if (points && scaleValue.type === "temperature") {
+        if (v.noRise) {
+          if (typeof v.noRise === "string") {
+            noRiseText = drawText([points[0], points[1] + 5], {
+              value: v.noRise.split("").join("\n"),
+              originY: "top",
+              ...noRiseStyle
+            });
+            otherList.push(noRiseText);
+          } else {
+            const top = points[1] + yCellHeight * 2;
+            const arrowLine = drawLine([...points, points[0], top], {
+              ...lineAttr,
+              stroke: noRiseStyle.fill
+            });
+            const arrow = drawText([points[0] + 0.5, top + 3], {
+              value: "v",
+              originX: "center",
+              originY: "bottom",
+              fontSize: 16,
+              ...noRiseStyle
+            });
+            arrowGroup = new fabric.Group([arrowLine, arrow], {
+              ...defaultStyle,
+              originX: "center",
+              originY: "top"
+            });
+            otherList.push(arrowGroup);
+          }
+        }
+        if (v.verified) {
+          verifiedText = drawText([points[0], points[1] - 5], {
+            value: "v",
+            originX: "center",
+            originY: "bottom",
+            ...verifiedStyle
+          });
+          otherList.push(verifiedText);
+        }
+        if (v.physicalCooling || v.drugCooling) {
+          const coolingLineStyle = {
+            ...lineAttr,
+            stroke: coolingStyle.stroke,
+            strokeDashArray: [3, 3]
+          };
+          const coolY = cumputedY(scaleValue.type, scaleValue.list, v.physicalCooling || v.drugCooling);
+          coolLine = drawLine([...points, points[0], coolY], {
+            ...coolingLineStyle
+          });
+          coolPoint = drawPoint("circle", {
+            left: points[0],
+            top: coolY,
+            ...coolingStyle,
+            ...defaultStyle
+          });
+          coolLine && otherList.push(coolLine);
+          coolPoint && otherList.push(coolPoint);
+        }
+      }
+      let line;
+      let point;
+      let previousLine;
+      line = points && nextPoint && !v.breakpoint ? drawLine([...points, ...nextPoint], {
+        ...lineAttr
+      }) : null;
+      previousLine = lineList[index - 1];
+      const pointAttrNew = {
+        origin: {
+          data: v,
+          title: item.title,
+          unit: scaleValue.unit,
+          type: scaleValue.type,
+          dataIndex,
+          index
+        },
+        noRiseText,
+        arrowGroup,
+        verifiedText,
+        leftLine: previousLine,
+        rightLine: line,
+        coolLine,
+        coolPoint,
+        lockMovementX: true,
+        ...pointAttr
+      };
+      if (previousLine) {
+        point = drawPoint(type, {
+          left: previousLine.get("x2"),
+          top: previousLine.get("y2"),
+          ...pointAttrNew
+        });
+      } else {
+        if (points) {
+          pointAttrNew.leftLine = null;
+          point = drawPoint(type, {
+            left: points[0],
+            top: points[1],
+            ...pointAttrNew
+          });
+        }
+      }
+      lineList.push(line);
+      if (point) {
+        setPointEvent(point);
+        pointList.push(point);
+      }
+    });
+    Promise.all(pointList).then((res) => {
+      const lineListFilter = lineList.filter((v) => v);
+      let prevPoint = null;
+      res = res.filter((v) => {
+        if (v && prevPoint) {
+          prevPoint.nextPoint = v;
+          v.prevPoint = prevPoint;
+        }
+        prevPoint = v || prevPoint;
+        v == null ? void 0 : v.bringToFront();
+        return v;
+      });
+      Promise.all(otherList).then((r) => {
+        canvas.value.add(...lineListFilter, ...res, ...r);
+        res.forEach((v) => {
+          v == null ? void 0 : v.bringToFront();
+        });
+        canvas.value.requestRenderAll();
+      });
+    });
+  }
+  function setPointEvent(point) {
+    point.on("mouseover", () => {
+      setPopup(point);
+    });
+    point.on("mouseout", () => {
+      pointTipProps.show = false;
+    });
+    point.on("moving", () => {
+      moveLimit(point);
+      updateLine(point);
+      canvas.value.renderAll();
+      setPopup(point);
+    });
+    point.on("mouseup:before", (event) => {
+      pointTipProps.show = false;
+      if (event.e.button === 0) {
+        const { type } = point.origin;
+        const value = getYValue(type, point.top);
+        emits("change", {
+          ...point.origin,
+          data: {
+            ...point.origin.data,
+            value
+          }
+        });
+      }
+    });
+  }
+  function setPopup(point) {
+    const { title, unit, type, data } = point.origin;
+    pointTipProps.point = {
+      x: point.left,
+      y: point.top
+    };
+    const yValue = getYValue(type, point.top);
+    pointTipProps.list = [
+      `${title} ${yValue}${unit || ""}`,
+      `\u65F6\u95F4 ${((data == null ? void 0 : data.time) || getXValue(point.left)).slice(-5)}`
+    ];
+    pointTipProps.show = true;
+  }
+  function moveLimit(point) {
+    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 updateLine(point) {
+    if (point.leftLine) {
+      point.leftLine.setCoords();
+      point.leftLine.set({ x2: point.left, y2: point.top });
+    }
+    if (point.rightLine) {
+      point.rightLine.setCoords();
+      point.rightLine.set({ x1: point.left, y1: point.top });
+    }
+    if (point.coolLine) {
+      point.coolLine.setCoords();
+      point.coolLine.set({ x1: point.left, y1: point.top });
+    }
+    if (point.noRiseText) {
+      point.noRiseText.setCoords();
+      point.noRiseText.set({ left: point.left, top: point.top + 5 });
+    }
+    if (point.arrowGroup) {
+      point.arrowGroup.setCoords();
+      point.arrowGroup.set({ left: point.left, top: point.top });
+    }
+    if (point.verifiedText) {
+      point.verifiedText.setCoords();
+      point.verifiedText.set({ left: point.left, top: point.top - 5 });
+    }
+    drawShaDow(point);
+  }
+  function drawText([x, y], style) {
+    const text = new fabric.Text(style.value, {
+      ...defaultTextStyle,
+      left: x,
+      top: y,
+      ...style
+    });
+    return text;
+  }
+  function isLimit(time) {
+    const minMinute = Math.min(...xScaleList.map((v) => +v));
+    const maxMinute = Math.max(...xScaleList.map((v) => +v));
+    const getTime = new Date(time).getTime();
+    return getTime >= minMinute && getTime <= maxMinute;
+  }
+  function clickMenu({ item, target }) {
+    if (!target) {
+      emits("add", {
+        data: {
+          time: getXValue(item.pointer.x),
+          value: getYValue(item.origin.type, item.pointer.y)
+        },
+        ...item.origin
+      });
+    } else {
+      const data = {
+        time: target.origin.data.time,
+        value: target.origin.data.value
+      };
+      data[`${item.type}`] = item.value;
+      emits("change", {
+        ...target.origin,
+        data
+      });
+    }
+  }
+  return {
+    pointTipProps,
+    pointMenuProps,
+    clickMenu,
+    setPopup,
+    getEqualXTypes
+  };
+}
+
+export { useCenter };

package/es/packages/fabric-chart/src/hooks/useCumputedPoint.d.ts

@@ -0,0 +1,7 @@
+import { IPropItems, IPointType } from '../interface';
+export declare function useCumputedPoint(propItems: IPropItems): {
+    cumputedX: (value: number | string) => number;
+    cumputedY: (type: IPointType, scaleValueList: number[], value: number | string) => number;
+    getXValue: (pointX: number) => string;
+    getYValue: (type: IPointType, pointY: number) => number;
+};

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

@@ -0,0 +1,53 @@
+function useCumputedPoint(propItems) {
+  const {
+    xScaleList,
+    xScaleCell,
+    originX,
+    endY,
+    xCellWidth,
+    left,
+    vitalSignsOriginY,
+    painOriginY
+  } = 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;
+    }
+    return originX + xCellWidth * i + xCellWidth / 2;
+  }
+  function cumputedY(type, scaleValueList, value) {
+    const yScaleCell = propItems[`${type}YCell`];
+    const yCellUnit = +value - Math.min(...scaleValueList);
+    const newEndY = type === "pain" ? painOriginY.endY : vitalSignsOriginY.endY;
+    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;
+  }
+  function getYValue(type, pointY) {
+    var _a;
+    const yScaleCell = propItems[`${type}YCell`];
+    const list = ((_a = left.yScaleValue.find((v) => v.type === type)) == null ? void 0 : _a.list) || [];
+    const minVal = list.length ? Math.min(...list) : 0;
+    const newEndY = type === "pain" ? painOriginY.endY : vitalSignsOriginY.endY;
+    const y = (newEndY - pointY) / yScaleCell + minVal;
+    return Math.floor(y * 100) / 100;
+  }
+  return {
+    cumputedX,
+    cumputedY,
+    getXValue,
+    getYValue
+  };
+}
+
+export { useCumputedPoint };

package/es/packages/fabric-chart/src/hooks/useDraw.d.ts

@@ -0,0 +1,42 @@
+import { fabric } from '../utils';
+import { ILineOptions, ITextOptions } from '../interface';
+export declare const defaultStyle: {
+    evented: boolean;
+    selectable: boolean;
+};
+export declare const defaultBorderStyle: {
+    evented: boolean;
+    selectable: boolean;
+    stroke: string;
+    strokeWidth: number;
+};
+export declare const defaultLineStyle: {
+    evented: boolean;
+    selectable: boolean;
+    stroke: string;
+    strokeWidth: number;
+    strokeDashArray: number[];
+};
+export declare const defaultRectStyle: {
+    evented: boolean;
+    selectable: boolean;
+    fill: string;
+    stroke: string;
+    strokeWidth: number;
+    originX: string;
+    originY: string;
+};
+export declare const defaultTextStyle: {
+    evented: boolean;
+    selectable: boolean;
+    fontFamily: string;
+    fontSize: number;
+    fill: string;
+    centeredRotation: boolean;
+    originX: string;
+    originY: string;
+    lineHeight: number;
+};
+export declare function drawLine(points: number[], style: Partial<ILineOptions>): fabric.Line;
+export declare function drawTextGroup(rectStyle: Partial<fabric.IRectOptions>, fontStyle: Partial<ITextOptions>, groupStyle: Partial<fabric.IGroupOptions>): fabric.Group;
+export declare function drawPoint(type: string | undefined, style: any): fabric.Circle | fabric.Triangle;

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

@@ -1 +1,87 @@
+import { fabric } from '../utils/index.js';
 
+const defaultStyle = {
+  evented: false,
+  selectable: false
+};
+const defaultBorderStyle = {
+  stroke: "#999",
+  strokeWidth: 1,
+  ...defaultStyle
+};
+const defaultLineStyle = {
+  stroke: "#000",
+  strokeWidth: 1,
+  strokeDashArray: [0, 0],
+  ...defaultStyle
+};
+const defaultRectStyle = {
+  fill: "transparent",
+  stroke: "#999",
+  strokeWidth: 1,
+  originX: "center",
+  originY: "center",
+  ...defaultStyle
+};
+const defaultTextStyle = {
+  fontFamily: "\u5FAE\u8F6F\u96C5\u9ED1",
+  fontSize: 12,
+  fill: "#000",
+  centeredRotation: true,
+  originX: "center",
+  originY: "center",
+  lineHeight: 1,
+  ...defaultStyle
+};
+function drawLine(points, style) {
+  return new fabric.Line(points, {
+    ...defaultLineStyle,
+    ...style
+  });
+}
+function drawTextGroup(rectStyle, fontStyle, groupStyle) {
+  const rect = new fabric.Rect({
+    ...defaultRectStyle,
+    ...rectStyle
+  });
+  const texts = new fabric.Text(String(fontStyle.value), {
+    ...defaultTextStyle,
+    ...fontStyle
+  });
+  return new fabric.Group([rect, texts], {
+    ...groupStyle
+  });
+}
+function drawPoint(type = "circle", style) {
+  let point = null;
+  const newStyle = {
+    originX: "center",
+    originY: "center",
+    hasControls: false,
+    hasBorders: false,
+    ...style
+  };
+  switch (type) {
+    case "triangle":
+      point = new fabric.Triangle({
+        width: 20,
+        height: 20,
+        strokeWidth: 1,
+        scale: 1,
+        ...newStyle
+      });
+      break;
+    case "circle":
+      point = new fabric.Circle({
+        objectCaching: false,
+        strokeWidth: 1,
+        radius: 5,
+        scale: 1,
+        ...newStyle
+      });
+      break;
+  }
+  return point;
+}
+
+export { defaultBorderStyle, defaultLineStyle, defaultRectStyle, defaultStyle, defaultTextStyle, drawLine, drawPoint, drawTextGroup };

package/es/packages/fabric-chart/src/hooks/useEvent.d.ts

@@ -0,0 +1 @@
+export declare function useEvent(element: HTMLCanvasElement | any): void;

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

@@ -0,0 +1,10 @@
+import { useEventListener } from '@vueuse/core';
+
+function useEvent(element) {
+  useEventListener(element.nextSibling, "contextmenu", (e) => {
+    e.preventDefault();
+    return false;
+  });
+}
+
+export { useEvent };

package/es/packages/fabric-chart/src/hooks/useGrid.d.ts

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