cnhis-design-vue 3.1.14-beta.9 → 3.1.15-beta.1

package/es/packages/fabric-chart/src/FabricChart.js

@@ -1,4 +1,316 @@
-import script from './FabricChart.vue_vue_type_script_setup_true_lang.js';
-export { default } from './FabricChart.vue_vue_type_script_setup_true_lang.js';
+import { defineComponent, ref, computed, reactive, onMounted, onBeforeUnmount, openBlock, createElementBlock, Fragment, createElementVNode, unref, createBlock, mergeProps, createCommentVNode } from 'vue';
+import { fabric } from './utils/index.js';
+import PopupTip from './components/PopupTip.js';
+import PopupMenu from './components/PopupMenu.js';
+import _export_sfc from '../../../_virtual/plugin-vue_export-helper.js';
+import { defaultBorderStyle } from './hooks/useDraw.js';
+import { useTop } from './hooks/useTop.js';
+import { useCenter } from './hooks/useCenter.js';
+import { useLeft } from './hooks/useLeft.js';
+import { useRight } from './hooks/useRight.js';
+import { useBottom } from './hooks/useBottom.js';
+import { useOther } from './hooks/useOther.js';
+import { useEvent, useCanvasEvent } from './hooks/useEvent.js';
+import { useCumputedPoint } from './hooks/useCumputedPoint.js';
 
-script.__file = "packages/fabric-chart/src/FabricChart.vue";
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  __name: "FabricChart",
+  props: {
+    data: null,
+    addRenderItem: null
+  },
+  emits: ["change", "add", "select"],
+  setup(__props, { expose, emit: emits }) {
+    const props = __props;
+    const defaultHeight = 15;
+    let select = ref();
+    const canvasRef = ref(null);
+    let canvas = ref();
+    const dateHeight = computed(() => {
+      const { top } = props.data;
+      return top.date.show && (top.date.height || defaultHeight) || 0;
+    });
+    const hospitalDaysHeight = computed(() => {
+      var _a;
+      const { top } = props.data;
+      return ((_a = top.hospitalDays) == null ? void 0 : _a.show) && (top.hospitalDays.height || defaultHeight) || 0;
+    });
+    const operationDaysHeight = computed(() => {
+      var _a;
+      const { top } = props.data;
+      return ((_a = top.operationDays) == null ? void 0 : _a.show) && (top.operationDays.height || defaultHeight) || 0;
+    });
+    const xScalevalueHeight = computed(() => {
+      var _a, _b;
+      const { top } = props.data;
+      const height = ((_a = top.xScalevalue) == null ? void 0 : _a.show) && (top.xScalevalue.height || defaultHeight) || 0;
+      const dayHeight = ((_b = top.xScalevalue) == null ? void 0 : _b.show) ? top.dayHeight || 0 : 0;
+      return height + dayHeight;
+    });
+    const breathingHeight = computed(() => {
+      var _a;
+      const { bottom } = props.data;
+      return ((_a = bottom == null ? void 0 : bottom.breathing) == null ? void 0 : _a.show) && (bottom.breathing.height || defaultHeight * 2) || 0;
+    });
+    const gridXNumber = computed(() => {
+      const { grid } = props.data;
+      return grid.mainXCell * grid.subXCell + grid.surplusXCell;
+    });
+    const gridYNumber = computed(() => {
+      const { grid } = props.data;
+      return grid.mainYCell * grid.subYCell + grid.surplusYCell;
+    });
+    const endX = computed(() => {
+      const { width, right = null, top } = props.data;
+      if (!right)
+        return width;
+      const endWidth = right.width || 50;
+      return width - endWidth;
+    });
+    const endXLimit = computed(() => {
+      const { grid } = props.data;
+      return endX.value - grid.surplusXCell * xCellWidth.value;
+    });
+    const originX = computed(() => {
+      const { top, left } = props.data;
+      const originX2 = top.titleWidth + iconsWidth.value;
+      return originX2;
+    });
+    const endY = computed(() => {
+      const { bottom = null, height } = props.data;
+      if (!bottom)
+        return height;
+      const endHeight = bottom.height || 30;
+      return height - endHeight;
+    });
+    const originY = computed(() => {
+      const { top } = props.data;
+      const dayHeight = top.xScalevalue.show && (top.dayHeight || defaultHeight) || 0;
+      const xScaleHeight = top.xScalevalue.show && (top.xScalevalue.height || defaultHeight) || 0;
+      const topHeight = dateHeight.value + dayHeight + xScaleHeight + hospitalDaysHeight.value + operationDaysHeight.value;
+      return topHeight;
+    });
+    const originYLimit = computed(() => {
+      const { grid } = props.data;
+      return originY.value + grid.surplusYCell * yCellHeight.value;
+    });
+    const xCellWidth = computed(() => {
+      return (endX.value - originX.value) / gridXNumber.value;
+    });
+    const yCellHeight = computed(() => {
+      return (endY.value - originY.value) / gridYNumber.value;
+    });
+    const iconsWidth = computed(() => {
+      var _a, _b;
+      const { left } = props.data;
+      return ((_a = left.icons) == null ? void 0 : _a.show) && (((_b = left.icons) == null ? void 0 : _b.width) || 100) || 0;
+    });
+    const xScaleList = computed(() => {
+      const { top } = props.data;
+      const dateList = top.date.list;
+      const times = top.xScalevalue.times;
+      let left = originX.value - xCellWidth.value;
+      function getDate(date) {
+        return String(date).length < 9 ? `20${date}` : date;
+      }
+      const timeList = dateList.map((item) => {
+        return times.map((v) => {
+          left += xCellWidth.value;
+          const start = new Date(`${getDate(item)} ${v.start}`).getTime();
+          const end = new Date(`${getDate(item)} ${v.end}`).getTime();
+          return {
+            start,
+            end,
+            left,
+            center: left + xCellWidth.value / 2,
+            scaleCell: (end - start) / xCellWidth.value
+          };
+        });
+      });
+      return timeList.flat();
+    });
+    const breatheYCell = computed(() => {
+      var _a;
+      const { yScaleValue, spaceGridNumber = 5 } = props.data.left;
+      const list = (_a = yScaleValue.find((v) => v.type === "breathe")) == null ? void 0 : _a.list;
+      return list ? yCellHeight.value / ((parseInt(list[1]) - parseInt(list[0])) / spaceGridNumber) : 0;
+    });
+    const pulseYCell = computed(() => {
+      const { yScaleValue, spaceGridNumber = 5 } = props.data.left;
+      const list = yScaleValue.find((v) => v.type === "pulse").list;
+      return yCellHeight.value / ((parseInt(list[1]) - parseInt(list[0])) / spaceGridNumber);
+    });
+    const temperatureYCell = computed(() => {
+      const { yScaleValue, spaceGridNumber = 5 } = props.data.left;
+      const list = yScaleValue.find((v) => v.type === "temperature").list;
+      return yCellHeight.value / ((parseInt(list[1]) - parseInt(list[0])) / spaceGridNumber);
+    });
+    const painYCell = computed(() => {
+      const { yScaleValue, spaceGridNumber = 5 } = props.data.left;
+      const item = yScaleValue.find((v) => v.type === "pain");
+      const list = (item == null ? void 0 : item.list) || [];
+      if (!list.length)
+        return 0;
+      return yCellHeight.value / ((parseInt(list[1]) - parseInt(list[0])) / item.spaceGridNumber);
+    });
+    const event = computed(() => {
+      var _a;
+      return ((_a = props.data.grid) == null ? void 0 : _a.event) || { selectable: true, evented: true };
+    });
+    const itemList = computed(() => {
+      const { left } = props.data;
+      return left.yScaleValue.map((item) => {
+        return item.dataList.map((v, dataIndex) => {
+          return {
+            ...v,
+            bigType: item.type,
+            unit: item.unit,
+            dataIndex
+          };
+        });
+      }).flat();
+    });
+    const painIndex = computed(() => {
+      const { left } = props.data;
+      return left.yScaleValue.findIndex((v) => v.type === "pain");
+    });
+    const painHeight = computed(() => {
+      const { grid } = props.data;
+      return painIndex.value === -1 ? 0 : yCellHeight.value * grid.subYCell;
+    });
+    const painOriginY = computed(() => {
+      const { left } = props.data;
+      let obj = {
+        originY: endY.value,
+        endY: endY.value
+      };
+      if (painIndex.value === 0) {
+        obj.originY = originYLimit.value;
+        obj.endY = originYLimit.value + painHeight.value;
+      } else if (painIndex.value === left.yScaleValue.length - 1) {
+        obj.originY = endY.value - painHeight.value;
+        obj.endY = endY.value;
+      }
+      return obj;
+    });
+    const vitalSignsOriginY = computed(() => {
+      const { left } = props.data;
+      let obj = {
+        originY: originY.value,
+        endY: endY.value
+      };
+      if (painIndex.value === 0) {
+        obj.originY = originYLimit.value + painHeight.value;
+        obj.endY = endY.value;
+      } else if (painIndex.value === left.yScaleValue.length - 1) {
+        obj.originY = originYLimit.value;
+        obj.endY = endY.value - painHeight.value;
+      }
+      return obj;
+    });
+    const topList = computed(() => {
+      const { top } = props.data;
+      let topList2 = [];
+      for (let i in top) {
+        if (top[i].show) {
+          topList2.push({
+            ...top[i],
+            key: i
+          });
+        }
+      }
+      return topList2.sort((a, b) => a.seq - b.seq);
+    });
+    const propItems = reactive({
+      canvasWidth: props.data.width,
+      canvasHeight: props.data.height,
+      borderStyle: props.data.borderStyle || defaultBorderStyle,
+      selectionStyle: props.data.selectionStyle || {},
+      dateHeight: dateHeight.value,
+      hospitalDaysHeight: hospitalDaysHeight.value,
+      operationDaysHeight: operationDaysHeight.value,
+      xScalevalueHeight: xScalevalueHeight.value,
+      topList: topList.value,
+      breathingHeight: breathingHeight.value,
+      grid: props.data.grid,
+      top: props.data.top,
+      left: props.data.left,
+      right: props.data.right,
+      bottom: props.data.bottom,
+      other: props.data.other,
+      painIndex: painIndex.value,
+      painHeight: painHeight.value,
+      painOriginY: painOriginY.value,
+      vitalSignsOriginY: vitalSignsOriginY.value,
+      gridXNumber: gridXNumber.value,
+      gridYNumber: gridYNumber.value,
+      iconsWidth: iconsWidth.value,
+      originX: originX.value,
+      originY: originY.value,
+      originYLimit: originYLimit.value,
+      endX: endX.value,
+      endXLimit: endXLimit.value,
+      endY: endY.value,
+      xCellWidth: xCellWidth.value,
+      yCellHeight: yCellHeight.value,
+      xScaleList: xScaleList.value,
+      breatheYCell: breatheYCell.value,
+      pulseYCell: pulseYCell.value,
+      temperatureYCell: temperatureYCell.value,
+      painYCell: painYCell.value,
+      event: event.value,
+      itemList: itemList.value
+    });
+    const { cumputedX, cumputedY, getXValue, getYValue } = useCumputedPoint(propItems);
+    useTop(canvas, propItems);
+    const { pointTipProps, pointMenuProps, clickMenu, setPopup, getEqualXTypes } = useCenter(canvas, propItems, emits, cumputedX, cumputedY, getXValue, getYValue, props.addRenderItem);
+    useLeft(canvas, propItems, emits, setPopup, pointTipProps, getXValue, getYValue, getEqualXTypes);
+    useRight(canvas, propItems);
+    useBottom(canvas, propItems);
+    useOther(canvas, propItems, cumputedX);
+    onMounted(() => {
+      canvas.value = new fabric.Canvas(canvasRef.value, {
+        width: propItems.canvasWidth,
+        height: propItems.canvasHeight,
+        backgroundColor: "#fff",
+        selection: false,
+        containerClass: "c-fabric-chart",
+        fireRightClick: true
+      });
+      useEvent(canvasRef.value);
+      const { select: selectFunc } = useCanvasEvent(canvas, propItems, emits);
+      select.value = selectFunc;
+    });
+    onBeforeUnmount(() => {
+      canvas.value.clear();
+      canvas.value = null;
+    });
+    expose({
+      select,
+      canvas
+    });
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock(Fragment, null, [
+        createElementVNode("canvas", {
+          ref_key: "canvasRef",
+          ref: canvasRef
+        }, null, 512),
+        unref(canvas) ? (openBlock(), createBlock(PopupTip, mergeProps({
+          key: 0,
+          propItems
+        }, unref(pointTipProps)), null, 16, ["propItems"])) : createCommentVNode("v-if", true),
+        unref(canvas) ? (openBlock(), createBlock(unref(PopupMenu), mergeProps({
+          key: 1,
+          propItems
+        }, unref(pointMenuProps), {
+          show: unref(pointMenuProps).show,
+          "onUpdate:show": _cache[0] || (_cache[0] = ($event) => unref(pointMenuProps).show = $event),
+          onClickMenu: unref(clickMenu)
+        }), null, 16, ["propItems", "show", "onClickMenu"])) : createCommentVNode("v-if", true)
+      ], 64);
+    };
+  }
+});
+var script = /* @__PURE__ */ _export_sfc(_sfc_main, [["__file", "FabricChart.vue"]]);
+
+export { script as default };

package/es/packages/fabric-chart/src/components/PopupTip.js

@@ -1,4 +1,34 @@
-import script from './PopupTip.vue_vue_type_script_setup_true_lang.js';
-export { default } from './PopupTip.vue_vue_type_script_setup_true_lang.js';
+import { defineComponent, openBlock, createBlock, Teleport, withDirectives, createElementVNode, normalizeStyle, unref, createElementBlock, Fragment, renderList, toDisplayString, vShow } from 'vue';
+import useStyle from './useStyle.js';
+import _export_sfc from '../../../../_virtual/plugin-vue_export-helper.js';
 
-script.__file = "packages/fabric-chart/src/components/PopupTip.vue";
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  __name: "PopupTip",
+  props: {
+    show: { type: Boolean, default: false },
+    point: null,
+    list: { default: () => [] },
+    propItems: null
+  },
+  setup(__props) {
+    const props = __props;
+    const pointStyle = useStyle(props);
+    return (_ctx, _cache) => {
+      return openBlock(), createBlock(Teleport, { to: ".c-fabric-chart" }, [
+        withDirectives(createElementVNode("ul", {
+          class: "c-fabric-chart-popup-tip",
+          style: normalizeStyle(unref(pointStyle))
+        }, [
+          (openBlock(true), createElementBlock(Fragment, null, renderList(__props.list, (item) => {
+            return openBlock(), createElementBlock("li", null, toDisplayString(item), 1);
+          }), 256))
+        ], 4), [
+          [vShow, __props.show]
+        ])
+      ]);
+    };
+  }
+});
+var PopupTip = /* @__PURE__ */ _export_sfc(_sfc_main, [["__file", "PopupTip.vue"]]);
+
+export { PopupTip as default };

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

@@ -8,6 +8,18 @@ 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 getPointArr(arr) {
+  let _arr = [];
+  return arr.reduce((pre, cur, index) => {
+    var _a, _b;
+    _arr.push([cur.left, cur.top]);
+    if (((_b = (_a = cur.origin) == null ? void 0 : _a.data) == null ? void 0 : _b.breakpoint) || arr.length - 1 === index) {
+      pre.push(_arr);
+      _arr = [];
+    }
+    return pre;
+  }, []);
+}
 function useCenter(canvas, propItems, emits, cumputedX, cumputedY, getXValue, getYValue, addRenderItem) {
   useGrid(canvas, propItems);
   const {
@@ -36,23 +48,27 @@ function useCenter(canvas, propItems, emits, cumputedX, cumputedY, getXValue, ge
     target: null
   });
   const shadowLinesCache = /* @__PURE__ */ new Set();
+  let shadowPointCache = [];
   const maiboPoints = /* @__PURE__ */ new Set();
   const otherPoints = /* @__PURE__ */ new Set();
+  const prevLines = /* @__PURE__ */ new Set();
   onMounted(() => {
     nextTick(() => {
       init();
     });
   });
   function init() {
-    drawShaDow();
+    shadowPointCache = [];
     maiboPoints.clear();
     otherPoints.clear();
+    prevLines.clear();
     left.yScaleValue.forEach((scaleValue) => {
       drawPositionLine(scaleValue);
       scaleValue.dataList.forEach((item, dataIndex) => {
         drawPolyLine(item, dataIndex, scaleValue);
       });
     });
+    drawShaDow();
     drawOverlapPoint();
     setCanvasEvent();
   }
@@ -65,90 +81,34 @@ function useCenter(canvas, propItems, emits, cumputedX, cumputedY, getXValue, ge
     canvas.value.renderAll();
   }
   function drawShaDow(target) {
-    var _a, _b;
+    var _a;
     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 (shadowPointCache.length > 1) {
       if (target) {
         const { type, dataIndex, index } = target.origin || {};
         if (type === "pulse") {
-          Object.assign(copyDataList[dataIndex].list[index], {
-            x: target.left,
-            y: target.top
-          });
+          shadowPointCache[dataIndex].splice(index, 1, target);
         }
       }
-      const [data1, data2] = copyDataList;
-      const getPoint = (item) => {
-        if (item.x && item.y) {
-          return {
-            x: item.x,
-            y: item.y
-          };
-        }
-        if (isEffectiveNode(item) && isLimit(item.time)) {
-          let y = cumputedY(pulseObj.type, pulseObj.list, item.value);
-          y = y < vitalSignsOriginY.originY ? vitalSignsOriginY.originY : y > vitalSignsOriginY.endY ? vitalSignsOriginY.endY : y;
-          return {
-            x: cumputedX(item.time),
-            y
-          };
-        }
-      };
-      data1.list.forEach((item, index) => {
-        const point1 = getPoint(item);
-        const item2 = data2.list[index];
-        const point2 = item2 ? getPoint(item2) : null;
-        if (point1 && 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);
-            point && points1.unshift(point);
-          }
-          if (itemNext && itemNext2) {
-            const pointNext = getPoint(itemNext);
-            const pointNext2 = getPoint(itemNext2);
-            if (pointNext && pointNext2 && pointNext.x === pointNext2.x && pointNext.y === pointNext2.y) {
-              points1.push(pointNext);
-            }
-          } else {
-            data.push({ points1, points2 });
-          }
-        } 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]);
-        return pre.concat([[...arr1, ...arr2.reverse()]]);
-      }, []);
+      const [data1, data2] = shadowPointCache;
+      if (!data1.length || !data2.length)
+        return;
+      const points1 = getPointArr(data1);
+      const points2 = getPointArr(data2);
+      const data = points1.reduce((pre, cur, index) => pre.concat([[...cur, ...points2[index].reverse()]]), []);
       const { createShadowLines } = useShadow();
-      newData.forEach((item) => {
-        var _a2, _b2, _c, _d;
+      data.forEach((item) => {
+        var _a2, _b, _c, _d;
         if (((_a2 = pulseObj.shadow) == null ? void 0 : _a2.mode) == "color") {
           const points = item.map((v) => ({ x: v[0], y: v[1] }));
           const polygon = new fabric.Polygon(points, {
             ...defaultStyle,
-            ...((_b2 = pulseObj.shadow) == null ? void 0 : _b2.style) || {}
+            ...((_b = pulseObj.shadow) == null ? void 0 : _b.style) || {}
           });
           shadowLinesCache.add(polygon);
           canvas.value.add(polygon);
@@ -278,24 +238,10 @@ function useCenter(canvas, propItems, emits, cumputedX, cumputedY, getXValue, ge
     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];
-        }
-      }
+      var _a;
+      const points = getPointer(v, scaleValue);
       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];
-        }
-      }
+      const nextPoint = getPointer(nextV, scaleValue);
       let coolLine, coolPoint, noRiseText, arrowGroup, verifiedText;
       if (points && scaleValue.type === "temperature") {
         if (v.noRise) {
@@ -357,9 +303,22 @@ function useCenter(canvas, propItems, emits, cumputedX, cumputedY, getXValue, ge
         }
       }
       let point;
-      const line = points && nextPoint && !v.breakpoint ? drawLine([...points, ...nextPoint], {
-        ...lineAttr
-      }) : null;
+      let line;
+      if (points && nextPoint && !v.breakpoint) {
+        line = drawLine([...points, ...nextPoint], {
+          ...lineAttr
+        });
+      } else if (points && !nextPoint && !v.breakpoint && scaleValue.type === "temperature" && dataIndex < scaleValue.dataList.length - 1 && index === item.list.length - 1) {
+        const nextV2 = (_a = scaleValue.dataList[dataIndex + 1].list) == null ? void 0 : _a[0];
+        const nextLinePoint = getPointer(nextV2, scaleValue);
+        line = nextLinePoint ? drawLine([...points, ...nextLinePoint], {
+          ...lineAttr
+        }) : null;
+        nextLinePoint && prevLines.add({
+          dataIndex,
+          line
+        });
+      }
       const previousLine = lineList[index - 1];
       const pointAttrNew = {
         origin: {
@@ -390,6 +349,12 @@ function useCenter(canvas, propItems, emits, cumputedX, cumputedY, getXValue, ge
       } else {
         if (points) {
           pointAttrNew.leftLine = null;
+          if (scaleValue.type === "temperature" && index === 0) {
+            const objLine = [...prevLines].find((v2) => v2.dataIndex === dataIndex - 1);
+            if (objLine) {
+              pointAttrNew.leftLine = objLine.line;
+            }
+          }
           point = drawPoint(type, {
             left: points[0],
             top: points[1],
@@ -408,6 +373,7 @@ function useCenter(canvas, propItems, emits, cumputedX, cumputedY, getXValue, ge
         pointList.push(point);
       }
     });
+    scaleValue.type === "pulse" && shadowPointCache.push(pointList);
     Promise.all(pointList).then((res) => {
       const lineListFilter = lineList.filter((v) => v);
       let prevPoint = null;
@@ -521,6 +487,16 @@ function useCenter(canvas, propItems, emits, cumputedX, cumputedY, getXValue, ge
     const getTime = new Date(time).getTime();
     return getTime >= minMinute && getTime <= maxMinute;
   }
+  function getPointer(v, scaleValue) {
+    let points;
+    const objOriginY = scaleValue.type === "pain" ? painOriginY : vitalSignsOriginY;
+    if (isEffectiveNode(v) && isLimit(v.time)) {
+      const x = cumputedX(v.time);
+      const y = cumputedY(scaleValue.type, scaleValue.list, v.value);
+      points = [x, y < objOriginY.originY ? objOriginY.originY : y > objOriginY.endY ? objOriginY.endY : y];
+    }
+    return points;
+  }
   function clickMenu({ item, target }) {
     if (!target) {
       emits("add", {

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

@@ -23,6 +23,7 @@ function useCanvasEvent(canvas, propItems, emits) {
       lockMovementX: true,
       lockMovementY: true,
       transparentCorners: false,
+      hasControls: false,
       ...selectionStyle
     });
     canvas.value.add(rect);
@@ -37,9 +38,9 @@ function useCanvasEvent(canvas, propItems, emits) {
     const selections2 = [];
     selections2.push(drawRect({
       left: iconsWidth,
-      top: originY,
+      top: originY + 1,
       width: originX - iconsWidth,
-      height: endY
+      height: endY - originY - 3
     }, "left"));
     let topY = 0;
     topList.forEach((item, index) => {
@@ -48,16 +49,16 @@ function useCanvasEvent(canvas, propItems, emits) {
       }
       selections2.push(drawRect({
         left: iconsWidth,
-        top: topY,
+        top: topY + 1,
         width: endX - iconsWidth,
-        height: propItems[`${item.key}Height`]
+        height: propItems[`${item.key}Height`] - 1
       }, item.key));
     });
     selections2.push(drawRect({
       left: originX,
-      top: originY,
+      top: originY + 1,
       width: endX - originX,
-      height: endY - originY
+      height: endY - originY - 3
     }, "grid"));
     canvas.value.renderAll();
     return selections2;
@@ -65,8 +66,9 @@ function useCanvasEvent(canvas, propItems, emits) {
   const selections = initSelection();
   function select(key) {
     canvas.value.discardActiveObject();
+    canvas.value.renderAll();
     const obj = selections == null ? void 0 : selections.find((obj2) => obj2.key === key);
-    obj && obj.bringToFront();
+    obj == null ? void 0 : obj.bringToFront();
     obj && canvas.value.setActiveObject(obj);
   }
   return { select };