cnhis-design-vue 3.1.17-beta.9 → 3.1.18-beta.3

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

@@ -0,0 +1,282 @@
+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) {
+  const {
+    originY,
+    endY,
+    originX,
+    endX,
+    yCellHeight,
+    left,
+    vitalSignsOriginY,
+    painOriginY,
+    painHeight,
+    iconsWidth,
+    itemList,
+    painIndex,
+    right,
+    getRightInfo
+  } = 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;
+            y > vitalSignsOriginY.originY && list.push(drawScaleNumber(v, item, textLeft, y));
+          }
+          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,
+        ...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,
+        ...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 setPointEvent(point) {
+    point.on("moving", () => {
+      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)) {
+            emits("add", {
+              data: {
+                time: getXValue(point.left),
+                value: getYValue(point.origin.type, point.top)
+              },
+              ...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({ left: point.originLeft, top: point.originTop });
+      }
+    });
+  }
+  onMounted(() => {
+    nextTick(() => {
+      var _a;
+      iconsWidth && drawIcons();
+      const yScaleValueList = left.yScaleValue.filter((v) => v.layout === "left" && v.type !== "pain");
+      if ((right == null ? void 0 : right.width) && ((_a = right == null ? void 0 : right.yScaleValue) == null ? void 0 : _a.layout) === "left") {
+        yScaleValueList.push(getRightInfo);
+      }
+      painIndex == 0 && yScaleValueList.unshift(left.yScaleValue[painIndex]);
+      painIndex == left.yScaleValue.length - 1 && yScaleValueList.push(left.yScaleValue[painIndex]);
+      drawScaleValue(yScaleValueList);
+      canvas.value.renderAll();
+    });
+  });
+  return {
+    drawScaleValue
+  };
+}
+
+export { useLeft };

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

@@ -0,0 +1,129 @@
+import { InjectionKey, Ref } from 'vue';
+import { fabric } from './utils';
+import { AnyObject } from '../../../../es/shared/types';
+interface IEvent {
+    selectable: boolean;
+    evented: boolean;
+    hovered: boolean;
+}
+interface ImainLineStyle {
+    x: fabric.ILineOptions;
+    y: fabric.ILineOptions;
+}
+interface IGrid {
+    mainXCell: number;
+    subXCell: number;
+    subSecondXCell: number;
+    mainYCell: number;
+    subYCell: number;
+    surplusXCell: number;
+    surplusYCell: number;
+    mainLineStyle?: ImainLineStyle;
+    subLineStyle?: fabric.ILineOptions;
+    subSecondLineStyle?: fabric.ILineOptions;
+    event?: Partial<IEvent>;
+}
+export interface IPropItems {
+    canvasWidth: number;
+    canvasHeight: number;
+    borderStyle: fabric.ILineOptions;
+    selectionStyle: any;
+    dateHeight: number;
+    hospitalDaysHeight: number;
+    operationDaysHeight: number;
+    xScalevalueHeight: number;
+    topList: IDate[];
+    breathingHeight: number;
+    grid: IGrid;
+    top: ITop;
+    left: ILeft;
+    right: IRight | undefined;
+    bottom: any;
+    other: IOther;
+    painIndex: number;
+    painHeight: number;
+    painOriginY: any;
+    vitalSignsOriginY: any;
+    gridXNumber: number;
+    gridYNumber: number;
+    iconsWidth: number;
+    originX: number;
+    originY: number;
+    originYLimit: number;
+    endX: number;
+    endXLimit: number;
+    endY: number;
+    xCellWidth: number;
+    yCellHeight: number;
+    xScaleList: Array<any>;
+    breatheYCell: number;
+    pulseYCell: number;
+    temperatureYCell: number;
+    painYCell: number;
+    event: Partial<IEvent>;
+    itemList: Array<any>;
+    getRightInfo: AnyObject;
+}
+export interface IPoint {
+    time: string;
+    value: string | number;
+    [key: string]: any;
+}
+interface IOther {
+    style?: fabric.ITextOptions;
+    list: Array<IPoint>;
+}
+export interface IDate {
+    seq: number;
+    show?: boolean;
+    title: string;
+    height?: number;
+    list: Array<string | number>;
+    style?: fabric.ITextOptions;
+    [key: string]: any;
+}
+export interface ITop {
+    dateStyle?: fabric.ITextOptions;
+    titleWidth: number;
+    date: IDate;
+    xScalevalue: IDate;
+    dayHeight?: number;
+    hospitalDays?: IDate;
+    operationDays?: IDate;
+}
+interface ILeft {
+    overlap?: any;
+    spaceGridNumber?: number;
+    yScaleValue: Array<any>;
+    icons?: any;
+}
+interface IRight {
+    width?: number;
+    yScaleValue: any;
+}
+export interface IData {
+    width: number;
+    height: number;
+    borderStyle?: fabric.ILineOptions;
+    selectionStyle?: any;
+    grid: IGrid;
+    other?: IOther;
+    top: ITop;
+    left: ILeft;
+    right?: IRight;
+    bottom: any;
+}
+export interface ICoordinateValue {
+    x: number;
+    y: number;
+}
+export declare type IPointType = 'breathe' | 'pulse' | 'temperature' | 'pain';
+export interface ILineOptions extends fabric.ILineOptions {
+    [key: string]: any;
+}
+export interface ITextOptions extends fabric.ITextOptions {
+    [key: string]: any;
+}
+export declare const InjectionCanvas: InjectionKey<Ref<fabric.Canvas>>;
+export declare const InjectionPropItems: InjectionKey<IPropItems>;
+export {};