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

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

@@ -1,3 +1,4 @@
+import { onBeforeUnmount } from 'vue';
 import { fabric } from '../../../../../shared/utils/fabricjs/index.js';
 import { drawTextGroup, defaultRectStyle, drawTextAndIconGroup, drawText, defaultTextStyle, defaultStyle } from '../useDraw.js';
 import { useBirthProcessCumputedPoint } from '../useCumputedPoint.js';
@@ -5,7 +6,6 @@ import '../useEvent.js';
 import '../useShadow.js';
 import { drawScaleNumber } from '../useScaleColumn.js';
 import { useCommon } from '../useCommon.js';
-import 'vue';
 import { isEffectiveNode, getScaleNumberList } from '../../utils/index.js';
 import { cloneDeep, omit, last } from 'lodash-es';
 import 'date-fns';
@@ -16,6 +16,7 @@ import './useTop.js';
 import '@vueuse/core';
 import './useOther.js';
 import '../../../../../shared/utils/index.js';
+import { singlePointAddEventBus } from '../../utils/eventBus.js';
 
 function useLeft(canvas, propItems, emits, pointTipProps, moveLimit, setPopup, updateData, getGridPoints) {
   const { getYValue, getXValue, computedX } = useBirthProcessCumputedPoint(propItems);
@@ -36,6 +37,7 @@ function useLeft(canvas, propItems, emits, pointTipProps, moveLimit, setPopup, u
     canvasHeight,
     xCellWidth
   } = propItems;
+  const icons = /* @__PURE__ */ new Set();
   function drawTitle() {
     if (!left)
       return;
@@ -74,7 +76,7 @@ function useLeft(canvas, propItems, emits, pointTipProps, moveLimit, setPopup, u
     list.forEach((item) => {
       var _a;
       const targetList = !item.linkKey ? item.list : (_a = list.find((_item) => _item.key === item.linkKey)) == null ? void 0 : _a.list;
-      let firstPointLeft = originX;
+      let firstPointLeft = 0;
       targetList.find((k) => {
         let con = false;
         if (isEffectiveNode(k)) {
@@ -85,18 +87,18 @@ function useLeft(canvas, propItems, emits, pointTipProps, moveLimit, setPopup, u
         }
         return con;
       });
-      item.limitRight = firstPointLeft - xCellWidth;
+      item.limitRight = firstPointLeft ? firstPointLeft - xCellWidth : endX;
     });
     const externalIconList = cloneDeep(left.externalIconList || []).map((item) => ({
       ...item,
       isExternal: true
     }));
-    const { projectNameMargin = [5, 30], titleWidth = 20 } = left;
+    const { projectNameMargin = [5, 30], titleWidth = 20, projectNameLineHeight = 10 } = left;
     let topY = endY + markHeight + extracorporealCirculationHeight - projectNameMargin[0];
     const leftX = titleWidth + projectNameMargin[1];
     const iconList = [];
     externalIconList.concat(list.reverse()).forEach((item) => {
-      topY -= 10;
+      topY -= projectNameLineHeight;
       const title = item.title;
       const { text, icon } = drawTextAndIconGroup(title, item, {
         text: {
@@ -107,7 +109,7 @@ function useLeft(canvas, propItems, emits, pointTipProps, moveLimit, setPopup, u
           leftX,
           topY,
           originX: "center",
-          ...item.isExternal ? { evented: false, selectable: false } : {},
+          ...item.isExternal && { evented: false, selectable: false },
           origin: {
             linkKey: item.linkKey,
             limitRight: item.limitRight
@@ -130,8 +132,15 @@ function useLeft(canvas, propItems, emits, pointTipProps, moveLimit, setPopup, u
         }
       });
       icon.linkPoints = linkPoints;
+      icons.add(icon);
     });
   }
+  function listener(params) {
+    const { limitRight, key } = params;
+    const icon = Array.from(icons).find((_icon) => _icon.origin.key === key);
+    icon && setLimitRight(icon, limitRight);
+  }
+  singlePointAddEventBus.on(listener);
   function setPointEvent(point) {
     point.on("moving", () => {
       point.set("originX", "center");
@@ -153,17 +162,17 @@ function useLeft(canvas, propItems, emits, pointTipProps, moveLimit, setPopup, u
             handleAddPrevent("repeat");
           } else {
             const params = {
-              data: {
-                time: getXValue(point.left),
-                value: getYValue(point.origin.type, point.top),
-                ...point.origin.linkKey ? { key: point.origin.key } : {}
-              },
+              data: [
+                {
+                  time: getXValue(point.left),
+                  value: getYValue(point.origin.type, point.top),
+                  ...point.origin.linkKey && { key: point.origin.key }
+                }
+              ],
               ...point.origin
             };
             const limitRight = point.left - xCellWidth;
-            point.linkPoints.forEach((_point) => {
-              _point.origin.limitRight = limitRight;
-            });
+            setLimitRight(point, limitRight);
             emits("add", omit(params, ["limitRight"]));
             updateData({ ...params, key });
           }
@@ -172,6 +181,11 @@ function useLeft(canvas, propItems, emits, pointTipProps, moveLimit, setPopup, u
       setRestore(point);
     });
   }
+  function setLimitRight(point, limitRight) {
+    point.linkPoints.forEach((_point) => {
+      _point.origin.limitRight = limitRight;
+    });
+  }
   function setRestore(point) {
     point.setCoords().set({ originX: "left", left: point.originLeft, top: point.originTop });
   }
@@ -244,6 +258,9 @@ function useLeft(canvas, propItems, emits, pointTipProps, moveLimit, setPopup, u
   drawYScale();
   drawIcons();
   drawBorder();
+  onBeforeUnmount(() => {
+    singlePointAddEventBus.off(listener);
+  });
 }
 
 export { useLeft };

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

@@ -1,11 +1,12 @@
 import { Ref } from 'vue';
 import { fabric } from '../../../../../shared/utils/fabricjs';
-import { IPointTipProps, IPointMenuProps } from '../../../../../components/fabric-chart/src/interface';
+import { IPointTipProps, IPointMenuProps, PopupMenuItem, ICoordinateValue } from '../../../../../components/fabric-chart/src/interface';
 import { AnyObject } from '../../../../../shared/types';
 export declare function useOther(canvas: Ref<fabric.Canvas>, propItems: AnyObject, emits: Function, pointTipProps: IPointTipProps, pointMenuProps: IPointMenuProps, moveLimit: Function, getContainPoints: Function, showDialog: Function, removeCurrentSelection: Function): {
-    clickMenu: ({ item, target }: {
-        item: AnyObject;
+    clickMenu: ({ item, target, pointer }: {
+        item: PopupMenuItem;
         target: any;
+        pointer: ICoordinateValue;
     }) => void;
     handleKeydown: (evt: KeyboardEvent) => void;
 };

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

@@ -15,7 +15,7 @@ import './useTop.js';
 import '@vueuse/core';
 import '../../../../../shared/utils/index.js';
 
-const NEW_OTHER_MENU = filter(OTHER_MENU, (o) => o.type !== "add");
+const NEW_OTHER_MENU = filter(OTHER_MENU, (o) => o.key !== "add");
 function useOther(canvas, propItems, emits, pointTipProps, pointMenuProps, moveLimit, getContainPoints, showDialog, removeCurrentSelection) {
   const { computedX, getXValue } = useBirthProcessCumputedPoint(propItems);
   const { getEqualXTypes, handleAddPrevent, isGridLimit, getPointEventProps } = useCommon(canvas, emits, propItems);
@@ -216,14 +216,14 @@ function useOther(canvas, propItems, emits, pointTipProps, pointMenuProps, moveL
     });
     canvas.value.add(...gridPointsMap.get(key));
   }
-  function clickMenu({ item, target }) {
+  function clickMenu({ item, target, pointer }) {
     if (!target)
       return;
-    const { type, _type } = item;
+    const { key, _type } = item;
     const params = { ...target.origin, type: _type };
-    emits(type, params);
-    if (type === "remove") {
-      updateData(params, type);
+    emits(key, params);
+    if (key === "remove") {
+      updateData(params, key);
     }
   }
   function updateData(params, mode = "add") {
@@ -295,11 +295,14 @@ function useOther(canvas, propItems, emits, pointTipProps, pointMenuProps, moveL
     const _endY = endY + extracorporealCirculationHeight;
     let prevLeft = 0;
     const pointerObj = {};
+    const xList = [];
     dataList.forEach((markItem, dataIndex) => {
       const { time, list = [] } = markItem;
       const x = computedX(time);
       if (!isLimitX(x))
         return;
+      pointerObj[`x_${x}`] = [];
+      pointerObj[`originx_${x}`] = [];
       let startTop = _endY + 1;
       list.forEach((item, index) => {
         var _a;
@@ -327,8 +330,12 @@ function useOther(canvas, propItems, emits, pointTipProps, pointMenuProps, moveL
         }
         const { topObj, startTop: _startTop, oldStartTop } = computedTop(startTop, pointHeight);
         startTop = _startTop;
-        if (!pointerObj[`x_${x}`])
-          pointerObj[`x_${x}`] = [];
+        xList.forEach((_x) => {
+          if (x - _x < xCellWidth) {
+            pointerObj[`x_${x}`].push(...pointerObj[`originx_${_x}`]);
+          }
+        });
+        pointerObj[`originx_${x}`].push([oldStartTop, startTop]);
         pointerObj[`x_${x}`].push([oldStartTop, startTop]);
         point.set("top", topObj.y2);
         gridPointsMap.get(key).push(point);
@@ -336,6 +343,7 @@ function useOther(canvas, propItems, emits, pointTipProps, pointMenuProps, moveL
         canvas.value.add(point);
       });
       prevLeft = x;
+      xList.push(x);
     });
     function computedTop(startTop, lineHeight) {
       const topObj = {};
@@ -368,7 +376,7 @@ function useOther(canvas, propItems, emits, pointTipProps, pointMenuProps, moveL
       return (_b = (_a = point.origin) == null ? void 0 : _a.data) == null ? void 0 : _b.isStart;
     };
     const startPoint = __arr.find((point) => isStart(point));
-    const firstPoint = __arr.find((point) => !isStart(point) && point.left > startPoint.left);
+    const firstPoint = __arr.find((point) => !isStart(point) && point.left > (startPoint == null ? void 0 : startPoint.left));
     const otherPoints = __arr.filter((point) => !isStart(point));
     __arr.forEach((point) => {
       const limitX = {
@@ -376,10 +384,10 @@ function useOther(canvas, propItems, emits, pointTipProps, pointMenuProps, moveL
         x2: endX
       };
       if (isStart(point)) {
-        limitX.x2 = firstPoint.left;
+        limitX.x2 = firstPoint == null ? void 0 : firstPoint.left;
         point.otherPoints = otherPoints;
       } else {
-        limitX.x1 = startPoint.left;
+        limitX.x1 = startPoint == null ? void 0 : startPoint.left;
         point.startPoint = startPoint;
       }
       point.limitX = limitX;
@@ -439,7 +447,6 @@ function useOther(canvas, propItems, emits, pointTipProps, pointMenuProps, moveL
         pointMenuProps.list = NEW_OTHER_MENU.map((item) => {
           return {
             ...item,
-            renderItem: () => item.label,
             _type: "other"
           };
         });
@@ -541,8 +548,8 @@ function useOther(canvas, propItems, emits, pointTipProps, pointMenuProps, moveL
         point.otherPoints.forEach((_point) => {
           _point.limitX.x1 = point.left;
         });
-      } else {
-        const otherPointsLeft = point.startPoint.otherPoints.map((_point) => _point.left);
+      } else if (point.startPoint) {
+        const otherPointsLeft = point.startPoint.otherPoints.map((_point) => _point.left) || [];
         const minLeft = Math.min(...otherPointsLeft);
         point.startPoint.limitX.x2 = minLeft;
       }

package/es/components/fabric-chart/src/hooks/surgicalAnesthesia/useSurgicalAnesthesiaChart.js

@@ -1,10 +1,10 @@
-import { reactive, ref, computed, unref, onMounted, nextTick, onBeforeUnmount, watch, toRefs } from 'vue';
+import { reactive, ref, onMounted, nextTick, onBeforeUnmount, watch, toRefs } from 'vue';
 import { useDialog } from 'naive-ui';
 import { defaultBorderStyle } from '../useDraw.js';
 import '../../../../../shared/utils/fabricjs/index.js';
 import { format } from 'date-fns';
 import { getChildrenSize } from '../../utils/index.js';
-import { cloneDeep, range, flatten, isFunction } from 'lodash-es';
+import { isFunction, cloneDeep, range, flatten } from 'lodash-es';
 import '../useEvent.js';
 import '../useShadow.js';
 import '../useCommon.js';
@@ -29,229 +29,173 @@ function useSurgicalAnesthesiaChart(canvas, props, emits, canvasRef, pointTipPro
   const pauseFlickerPoint = ref();
   let timeout = null;
   const oldChildrenSize = getChildrenSize(((_a = props.data.top) == null ? void 0 : _a.treeData) || []);
-  const layout = computed(
-    () => props.data.layout || {
+  function buildDerived() {
+    var _a2, _b, _c, _d, _e, _f;
+    const layout = props.data.layout || {
       top: "drug",
       center: "xAxis",
       bottom: "intraoperatively"
-    }
-  );
-  const originX = computed(() => {
-    var _a2;
-    return (_a2 = props.data.left.width) != null ? _a2 : 0;
-  });
-  const gridXNumber = computed(() => {
-    const { grid } = props.data;
-    return grid.mainXCell * grid.subXCell;
-  });
-  const gridYNumber = computed(() => {
+    };
+    const originX = (_a2 = props.data.left.width) != null ? _a2 : 0;
     const { grid } = props.data;
-    return grid.mainYCell * grid.subYCell;
-  });
-  const topGridYNumber = computed(() => {
+    const gridXNumber = grid.mainXCell * grid.subXCell;
+    const gridYNumber = grid.mainYCell * grid.subYCell;
     const { show = true, tree = {} } = props.data.top;
-    if (!show)
-      return 0;
     const { rowNumber = oldChildrenSize } = tree;
-    if (oldChildrenSize < rowNumber) {
-      return rowNumber;
-    }
-    return oldChildrenSize;
-  });
-  const topGridYCellHeight = computed(() => props.data.top.tree.cellHeight);
-  const topGridHeight = computed(() => topGridYCellHeight.value * topGridYNumber.value);
-  const topGridOriginY = computed(() => {
-    const currentLayout = getLayout("drug") || "top";
-    return getOriginTop(currentLayout);
-  });
-  const topGridEndY = computed(() => topGridOriginY.value + topGridHeight.value);
-  const startTime = computed(
-    () => {
-      var _a2;
-      return Date.parse(((_a2 = props.data.xAxis) == null ? void 0 : _a2.startTime) || format(new Date(), "yyyy-MM-dd HH:mm:ss"));
-    }
-  );
-  const xAxis = computed(() => {
+    const topGridYNumber = !show ? 0 : oldChildrenSize < rowNumber ? rowNumber : oldChildrenSize;
+    const topGridYCellHeight = props.data.top.tree.cellHeight;
+    const topGridHeight = topGridYCellHeight * topGridYNumber;
+    const startTime = Date.parse(((_b = props.data.xAxis) == null ? void 0 : _b.startTime) || format(new Date(), "yyyy-MM-dd HH:mm:ss"));
     const cloneXAxis = cloneDeep(props.data.xAxis);
     const { spaceValue, spaceTimeStamp } = cloneXAxis;
-    const list = range(gridXNumber.value / spaceValue + 1).map(
-      (n) => n === 0 ? cloneXAxis.startTime : format(new Date(startTime.value + n * spaceValue * spaceTimeStamp), "yyyy-MM-dd HH:mm:ss")
+    const list = range(gridXNumber / spaceValue + 1).map(
+      (n) => n === 0 ? cloneXAxis.startTime : format(new Date(startTime + n * spaceValue * spaceTimeStamp), "yyyy-MM-dd HH:mm:ss")
     );
-    return {
+    const xAxis = {
       ...cloneXAxis,
       list,
-      left: originX.value
+      left: originX
     };
-  });
-  const treeData = getTreeData();
-  const originYXAxis = computed(() => {
-    const currentLayout = getLayout("xAxis") || "center";
-    return getOriginTop(currentLayout);
-  });
-  const endX = computed(() => {
-    var _a2;
-    const { width, right } = props.data;
-    if (!right)
-      return width;
-    const endWidth = (_a2 = right.width) != null ? _a2 : 0;
-    return width - endWidth;
-  });
-  const originY = computed(() => {
-    const currentLayout = getLayout("intraoperatively") || "bottom";
-    return getOriginTop(currentLayout);
-  });
-  const extracorporealCirculationHeight = computed(() => {
-    var _a2;
-    const { show, height } = ((_a2 = props.data.other) == null ? void 0 : _a2.extracorporealCirculation) || {};
-    if (!show || !height)
-      return 0;
-    return height;
-  });
-  const markHeight = computed(() => {
-    var _a2;
-    const { show, height } = ((_a2 = props.data.other) == null ? void 0 : _a2.mark) || {};
-    if (!show || !height)
-      return 0;
-    return height;
-  });
-  const endY = computed(
-    () => originY.value + (props.data.height - topGridHeight.value - xAxis.value.height - markHeight.value - extracorporealCirculationHeight.value)
-  );
-  const xCellWidth = computed(() => (endX.value - originX.value) / gridXNumber.value);
-  const yCellHeight = computed(() => (endY.value - originY.value) / gridYNumber.value);
-  const timeXCell = computed(() => xAxis.value.spaceTimeStamp / xCellWidth.value);
-  const itemList = computed(() => {
-    const { scaleValues } = props.data;
-    return flatten(
-      scaleValues.map((item) => {
-        return item.dataList.filter((v) => v.show).map((v, dataIndex) => {
-          return {
-            ...v,
-            bigType: item.type,
-            unit: item.unit,
-            dataIndex
-          };
-        });
-      })
-    );
-  });
-  const pulseYCell = computed(() => computedYCell("pulse"));
-  const temperatureYCell = computed(() => computedYCell("temperature"));
-  const event = computed(() => {
-    var _a2;
-    return ((_a2 = props.data.grid) == null ? void 0 : _a2.event) || { selectable: true, evented: true, hovered: true };
-  });
-  const propItems = reactive({
-    canvasWidth: props.data.width,
-    canvasHeight: props.data.height,
-    borderStyle: { ...defaultBorderStyle, ...props.data.borderStyle },
-    pointSelectionStyle: props.data.pointSelectionStyle || {},
-    grid: props.data.grid,
-    top: props.data.top,
-    left: props.data.left,
-    other: props.data.other,
-    topGridYNumber: unref(topGridYNumber),
-    topGridYCellHeight: unref(topGridYCellHeight),
-    topGridOriginY: unref(topGridOriginY),
-    topGridEndY: unref(topGridEndY),
-    treeData,
-    getTreeData,
-    xAxis: unref(xAxis),
-    originYXAxis: unref(originYXAxis),
-    startTime: unref(startTime),
-    timeXCell: unref(timeXCell),
-    gridXNumber: unref(gridXNumber),
-    gridYNumber: unref(gridYNumber),
-    xCellWidth: unref(xCellWidth),
-    yCellHeight: unref(yCellHeight),
-    originX: unref(originX),
-    endX: unref(endX),
-    originY: unref(originY),
-    endY: unref(endY),
-    markHeight: unref(markHeight),
-    extracorporealCirculationHeight: unref(extracorporealCirculationHeight),
-    itemList: unref(itemList),
-    scaleValues: props.data.scaleValues,
-    pulseYCell: unref(pulseYCell),
-    temperatureYCell: unref(temperatureYCell),
-    event: unref(event),
-    dialog,
-    extraMenuConfig: props.data.extraMenuConfig || {}
-  });
-  function getLayout(moduleName) {
-    let layoutName = "";
-    Object.entries(layout.value).some(([key, value]) => {
-      if (value === moduleName) {
-        layoutName = key;
-        return true;
-      }
-      return;
-    });
-    return layoutName;
-  }
-  function getLayoutHeight(layoutName) {
-    const moduleName = layout.value[layoutName];
-    const xAxisHeight = xAxis.value.height;
-    switch (moduleName) {
-      case "drug":
-        return topGridHeight.value;
-      case "xAxis":
-        return xAxisHeight;
-      default:
-        return props.data.height - topGridHeight.value - xAxisHeight;
+    function getLayout(moduleName) {
+      let layoutName = "";
+      Object.entries(layout).some(([key, value]) => {
+        if (value === moduleName) {
+          layoutName = key;
+          return true;
+        }
+        return false;
+      });
+      return layoutName;
     }
-  }
-  function getOriginTop(layoutName) {
-    switch (layoutName) {
-      case "top":
-        return 0;
-      case "center":
-        return getLayoutHeight("top");
-      default:
-        return getLayoutHeight("top") + getLayoutHeight("center");
+    function getLayoutHeight(layoutName) {
+      const moduleName = layout[layoutName];
+      const xAxisHeight = xAxis.height;
+      switch (moduleName) {
+        case "drug":
+          return topGridHeight;
+        case "xAxis":
+          return xAxisHeight;
+        default:
+          return props.data.height - topGridHeight - xAxisHeight;
+      }
     }
-  }
-  function getTreeData() {
-    const { show = true, tree = {} } = props.data.top;
-    if (!show)
-      return [];
-    const cloneData = cloneDeep(props.data.top.treeData);
-    let levelRow = 0;
-    const { cellWidth, cellHeight } = props.data.top.tree;
-    const { rowNumber = oldChildrenSize } = tree;
-    if (oldChildrenSize < rowNumber) {
-      cloneData.push(...range(rowNumber - oldChildrenSize).map(() => ({})));
+    function getOriginTop(layoutName) {
+      switch (layoutName) {
+        case "top":
+          return 0;
+        case "center":
+          return getLayoutHeight("top");
+        default:
+          return getLayoutHeight("top") + getLayoutHeight("center");
+      }
     }
-    transferTree(cloneData);
-    function transferTree(treeData2, deep = 0) {
-      treeData2.forEach((item) => {
-        var _a2;
-        const other = {
-          top: levelRow * cellHeight + topGridOriginY.value,
-          left: deep * cellWidth,
-          width: cellWidth,
-          height: cellHeight,
-          uuid: uuidGenerator()
-        };
-        levelRow++;
-        if ((_a2 = item.children) == null ? void 0 : _a2.length) {
-          levelRow--;
-          const childrenSize = getChildrenSize(item.children);
-          other.height = childrenSize * cellHeight;
-          transferTree(item.children, deep + 1);
-        } else {
-          other.width = originX.value - other.left;
-        }
-        Object.assign(item, other);
-      });
+    const topGridOriginY = getOriginTop(getLayout("drug") || "top");
+    const topGridEndY = topGridOriginY + topGridHeight;
+    const originYXAxis = getOriginTop(getLayout("xAxis") || "center");
+    const { width, right } = props.data;
+    const endX = !right ? width : width - ((_c = right.width) != null ? _c : 0);
+    const originY = getOriginTop(getLayout("intraoperatively") || "bottom");
+    const { show: ecShow, height: ecHeight } = ((_d = props.data.other) == null ? void 0 : _d.extracorporealCirculation) || {};
+    const extracorporealCirculationHeight = !ecShow || !ecHeight ? 0 : ecHeight;
+    const { show: markShow, height: markH } = ((_e = props.data.other) == null ? void 0 : _e.mark) || {};
+    const markHeight = !markShow || !markH ? 0 : markH;
+    const endY = originY + (props.data.height - topGridHeight - xAxis.height - markHeight - extracorporealCirculationHeight);
+    const xCellWidth = (endX - originX) / gridXNumber;
+    const yCellHeight = (endY - originY) / gridYNumber;
+    const timeXCell = xAxis.spaceTimeStamp / xCellWidth;
+    const itemList = flatten(
+      props.data.scaleValues.map((item) => {
+        return item.dataList.filter((v) => v.show).map((v, dataIndex) => ({
+          ...v,
+          bigType: item.type,
+          unit: item.unit,
+          dataIndex
+        }));
+      })
+    );
+    function computedYCell(type) {
+      const { scaleValues } = props.data;
+      const item = scaleValues.find((v) => v.type === type);
+      return yCellHeight * (item.spaceGridNumber || 1) / (item.spaceValue || 1);
     }
-    return cloneData;
-  }
-  function computedYCell(type) {
-    const { scaleValues } = props.data;
-    const item = scaleValues.find((v) => v.type === type);
-    return yCellHeight.value * (item.spaceGridNumber || 1) / (item.spaceValue || 1);
+    const pulseYCell = computedYCell("pulse");
+    const temperatureYCell = computedYCell("temperature");
+    const event = ((_f = props.data.grid) == null ? void 0 : _f.event) || { selectable: true, evented: true, hovered: true };
+    const getTreeData = () => {
+      const { show: show2 = true, tree: tree2 = {} } = props.data.top;
+      if (!show2)
+        return [];
+      const cloneData = cloneDeep(props.data.top.treeData);
+      let levelRow = 0;
+      const { cellWidth, cellHeight } = props.data.top.tree;
+      const { rowNumber: rowNumber2 = oldChildrenSize } = tree2;
+      if (oldChildrenSize < rowNumber2) {
+        cloneData.push(...range(rowNumber2 - oldChildrenSize).map(() => ({})));
+      }
+      transferTree(cloneData);
+      function transferTree(treeData, deep = 0) {
+        treeData.forEach((item) => {
+          var _a3;
+          const other = {
+            top: levelRow * cellHeight + topGridOriginY,
+            left: deep * cellWidth,
+            width: cellWidth,
+            height: cellHeight,
+            uuid: uuidGenerator()
+          };
+          levelRow++;
+          if ((_a3 = item.children) == null ? void 0 : _a3.length) {
+            levelRow--;
+            const childrenSize = getChildrenSize(item.children);
+            other.height = childrenSize * cellHeight;
+            transferTree(item.children, deep + 1);
+          } else {
+            other.width = originX - other.left;
+          }
+          Object.assign(item, other);
+        });
+      }
+      return cloneData;
+    };
+    return {
+      canvasWidth: props.data.width,
+      canvasHeight: props.data.height,
+      borderStyle: { ...defaultBorderStyle, ...props.data.borderStyle },
+      pointSelectionStyle: props.data.pointSelectionStyle || {},
+      grid: props.data.grid,
+      top: props.data.top,
+      left: props.data.left,
+      other: props.data.other,
+      topGridYNumber,
+      topGridYCellHeight,
+      topGridOriginY,
+      topGridEndY,
+      treeData: getTreeData(),
+      getTreeData,
+      xAxis,
+      originYXAxis,
+      startTime,
+      timeXCell,
+      gridXNumber,
+      gridYNumber,
+      xCellWidth,
+      yCellHeight,
+      originX,
+      endX,
+      originY,
+      endY,
+      markHeight,
+      extracorporealCirculationHeight,
+      itemList,
+      scaleValues: props.data.scaleValues,
+      pulseYCell,
+      temperatureYCell,
+      event,
+      dialog,
+      extraMenuConfig: props.data.extraMenuConfig || {}
+    };
   }
+  const propItems = reactive(buildDerived());
   onMounted(async () => {
     await nextTick();
     const { redrawLinePoints: _redrawLinePoints, clickMenu: _clickTopMenu } = useTop(

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

@@ -1,11 +1,12 @@
 import { type Ref } from 'vue';
 import { fabric } from '../../../../../shared/utils/fabricjs';
 import { AnyObject } from '../../../../../shared/types';
-import { IPointTipProps, IPointMenuProps } from '../../../../../components/fabric-chart/src/interface';
+import { IPointTipProps, IPointMenuProps, ICoordinateValue, PopupMenuItem } from '../../../../../components/fabric-chart/src/interface';
 export declare function useTop(canvas: Ref<fabric.Canvas>, propItems: AnyObject, emits: Function, pointTipProps: IPointTipProps, pointMenuProps: IPointMenuProps): {
     redrawLinePoints: () => void;
-    clickMenu: ({ item, target }: {
-        item: AnyObject;
+    clickMenu: ({ item, target, pointer }: {
+        item: PopupMenuItem;
         target: any;
+        pointer: ICoordinateValue;
     }) => void;
 };