cnhis-design-vue 3.4.0-beta.7 → 3.4.0-beta.70

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

@@ -17,6 +17,7 @@ import './useTop.js';
 import './useOther.js';
 import '../../../../../shared/utils/index.js';
 import { useIntervalFn } from '@vueuse/core';
+import { singlePointAddEventBus } from '../../utils/eventBus.js';
 
 function useCenter(canvas, propItems, emits, pointTipProps, pointMenuProps, isPopupTipRender) {
   const {
@@ -248,6 +249,21 @@ function useCenter(canvas, propItems, emits, pointTipProps, pointMenuProps, isPo
     currentSelection && canvas.value.remove(currentSelection);
     currentSelection = null;
   }
+  function createChildrenMenuList(itemList2) {
+    return itemList2.map((item) => ({
+      key: item.key,
+      label: item.title,
+      mode: "add",
+      origin: {
+        title: item.title,
+        unit: item.unit,
+        type: item.bigType,
+        dataIndex: item.dataIndex,
+        key: item.key,
+        linkKey: item.linkKey
+      }
+    }));
+  }
   function handleRightClick(event2) {
     pointTipProps.show = false;
     const {
@@ -260,14 +276,8 @@ function useCenter(canvas, propItems, emits, pointTipProps, pointMenuProps, isPo
         const {
           menuList = []
         } = extraMenuConfig;
-        pointMenuProps.list = filter(OTHER_MENU, (o) => o.type === "add").concat(menuList).map((item) => {
-          return {
-            ...item,
-            renderItem: () => item.label,
-            type: item.key || item.type,
-            pointer: event2.pointer
-          };
-        });
+        pointMenuProps.list = filter(OTHER_MENU, (o) => o.key === "add").concat(menuList);
+        pointMenuProps.list[0].children = createChildrenMenuList(itemList);
       } else {
         if (event2.target.__type !== "main")
           return;
@@ -276,22 +286,21 @@ function useCenter(canvas, propItems, emits, pointTipProps, pointMenuProps, isPo
           x: point.left,
           y: point.top
         }, event2.target, []);
-        pointMenuProps.list = filter(OTHER_MENU, (o) => o.type !== "edit").map((item) => {
+        pointMenuProps.list = filter(OTHER_MENU, (o) => o.key !== "edit").map((item) => {
           return {
             ...item,
-            renderItem: () => item.label,
-            type: item.key || item.type,
-            pointer: {
-              x: point.left,
-              y: point.top
-            },
-            ...item.type === "add" ? {} : {
+            ...item.key !== "add" && {
               origin: {
                 ...point.origin
               }
             }
           };
         });
+        const newChildren = itemList.filter((item) => {
+          const key = item.linkKey || item.key;
+          return !getEqualXTypes(getGridPoints(), point.left, "key", xCellWidth).includes(key);
+        });
+        pointMenuProps.list[0].children = createChildrenMenuList(newChildren);
       }
     }
     function setPointMenuProps(point, target, list) {
@@ -305,32 +314,46 @@ function useCenter(canvas, propItems, emits, pointTipProps, pointMenuProps, isPo
   }
   function clickMenu({
     item,
-    target
+    target,
+    pointer
   }) {
-    var _a;
+    var _a, _b, _c;
     const {
-      type,
+      key,
       origin,
-      pointer
+      mode
     } = item;
     const params = {
       ...origin
     };
-    if (!origin) {
-      Object.assign(params, {
-        data: {
-          time: getXValue(pointer.x)
-        },
-        type: null
-      });
-    }
-    if (filter(OTHER_MENU, (o) => o.type !== "edit").map((item2) => item2.type).includes(type)) {
-      if (type === "remove") {
+    if (key === "remove" || mode === "add") {
+      const eventName = key === "remove" ? "remove" : "add";
+      if (key === "remove") {
         updateData(params, "remove");
+      } else {
+        const pointKey = origin.linkKey || origin.key;
+        params.data = [{
+          time: getXValue(pointer.x),
+          value: getYValue(origin.type, pointer.y),
+          ...origin.linkKey && {
+            key: origin.key
+          }
+        }];
+        updateData({
+          ...params,
+          key: pointKey
+        }, "add");
+        const firstLeft = pointKey ? (_b = (_a = gridPointsMap.get(pointKey)) == null ? void 0 : _a[0]) == null ? void 0 : _b.left : void 0;
+        const minLeft = firstLeft != null ? firstLeft : pointer.x;
+        const limitRight = minLeft - xCellWidth;
+        singlePointAddEventBus.emit({
+          ...origin,
+          limitRight
+        });
       }
-      emits(type, params);
+      emits(eventName, params);
     } else {
-      (_a = extraMenuConfig.click) == null ? void 0 : _a.call(extraMenuConfig, type, params);
+      (_c = extraMenuConfig.click) == null ? void 0 : _c.call(extraMenuConfig, key, params);
     }
   }
   function drawCordonLine(item, scaleValue) {
@@ -524,7 +547,8 @@ function useCenter(canvas, propItems, emits, pointTipProps, pointMenuProps, isPo
         const {
           type,
           selfKey,
-          dataIndex
+          dataIndex,
+          data: oldData
         } = point.origin;
         const params = {
           ...point.origin,
@@ -575,7 +599,8 @@ function useCenter(canvas, propItems, emits, pointTipProps, pointMenuProps, isPo
         } else {
           emits("change", {
             ...omit(params, ["selfKey", "lineAttr"]),
-            key: selfKey
+            key: selfKey,
+            oldData
           });
           updateData(params, "change");
         }
@@ -813,7 +838,7 @@ function useCenter(canvas, propItems, emits, pointTipProps, pointMenuProps, isPo
     });
   }
   function redrawPoints(ItemObj) {
-    var _a, _b, _c;
+    var _a, _b, _c, _d;
     batchAddPoints.size && ((_a = canvas.value) == null ? void 0 : _a.remove(...doRemovePoints([...batchAddPoints])));
     batchAddPoints.clear();
     batchAddDatas = [];
@@ -823,12 +848,13 @@ function useCenter(canvas, propItems, emits, pointTipProps, pointMenuProps, isPo
         scaleValue
       } = ItemObj;
       const item = scaleValue.dataList[dataIndex];
-      (_b = canvas.value) == null ? void 0 : _b.remove(...doRemovePoints(gridPointsMap.get(item.key)));
+      const points = (_b = gridPointsMap.get(item.key)) != null ? _b : [];
+      (_c = canvas.value) == null ? void 0 : _c.remove(...doRemovePoints(points));
       gridPointsMap.delete(item.key);
       drawPolyLine(item, dataIndex, scaleValue);
     } else {
       yScaleValue = cloneDeep(scaleValues);
-      gridPointsMap.size && ((_c = canvas.value) == null ? void 0 : _c.remove(...doRemovePoints(getGridPoints())));
+      gridPointsMap.size && ((_d = canvas.value) == null ? void 0 : _d.remove(...doRemovePoints(getGridPoints())));
       gridPointsMap.clear();
       init();
     }

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.d.ts

@@ -3,14 +3,14 @@ import { fabric } from '../../../../../shared/utils/fabricjs';
 import { AnyObject } from '../../../../../shared/types';
 import { IPointTipProps, IPointMenuProps } from '../../../../../components/fabric-chart/src/interface';
 export declare function useSurgicalAnesthesiaChart(canvas: Ref<fabric.Canvas>, props: AnyObject, emits: Function, canvasRef: Ref<HTMLCanvasElement | null>, pointTipProps: IPointTipProps, pointMenuProps: IPointMenuProps, isPopupTipRender: boolean): {
-    select?: Ref<import("../../../../../shared/types").AnyFn | null | undefined> | undefined;
-    redrawPoints?: Ref<import("../../../../../shared/types").AnyFn | null | undefined> | undefined;
-    clickMenu?: Ref<import("../../../../../shared/types").AnyFn | null | undefined> | undefined;
-    updatePolyline?: Ref<import("../../../../../shared/types").AnyFn | null | undefined> | undefined;
-    useMeasureRuler?: Ref<import("../../../../../shared/types").AnyFn | null | undefined> | undefined;
-    useCaliper?: Ref<import("../../../../../shared/types").AnyFn | null | undefined> | undefined;
-    useCaliperRuler?: Ref<import("../../../../../shared/types").AnyFn | null | undefined> | undefined;
-    useRectRuler?: Ref<import("../../../../../shared/types").AnyFn | null | undefined> | undefined;
-    redrawLinePoints?: Ref<import("../../../../../shared/types").AnyFn | null | undefined> | undefined;
+    select?: Ref<import("../../../../../shared/types").AnyFn | null | undefined, import("../../../../../shared/types").AnyFn | null | undefined> | undefined;
+    redrawPoints?: Ref<import("../../../../../shared/types").AnyFn | null | undefined, import("../../../../../shared/types").AnyFn | null | undefined> | undefined;
+    clickMenu?: Ref<import("../../../../../shared/types").AnyFn | null | undefined, import("../../../../../shared/types").AnyFn | null | undefined> | undefined;
+    updatePolyline?: Ref<import("../../../../../shared/types").AnyFn | null | undefined, import("../../../../../shared/types").AnyFn | null | undefined> | undefined;
+    useMeasureRuler?: Ref<import("../../../../../shared/types").AnyFn | null | undefined, import("../../../../../shared/types").AnyFn | null | undefined> | undefined;
+    useCaliper?: Ref<import("../../../../../shared/types").AnyFn | null | undefined, import("../../../../../shared/types").AnyFn | null | undefined> | undefined;
+    useCaliperRuler?: Ref<import("../../../../../shared/types").AnyFn | null | undefined, import("../../../../../shared/types").AnyFn | null | undefined> | undefined;
+    useRectRuler?: Ref<import("../../../../../shared/types").AnyFn | null | undefined, import("../../../../../shared/types").AnyFn | null | undefined> | undefined;
+    redrawLinePoints?: Ref<import("../../../../../shared/types").AnyFn | null | undefined, import("../../../../../shared/types").AnyFn | null | undefined> | undefined;
     propItems: any;
 };