cnhis-design-vue 3.1.18-beta.0 → 3.1.18-beta.12

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

@@ -0,0 +1,85 @@
+import { onMounted, nextTick } from 'vue';
+import { fabric } from '../utils/index.js';
+import { defaultStyle } from './useDraw2.js';
+
+function useOther(canvas, propItems, cumputedX) {
+  const { other, vitalSignsOriginY } = propItems;
+  function drawOther() {
+    if (!(other == null ? void 0 : other.list))
+      return false;
+    const list = [];
+    const otherList = [];
+    other.list.forEach((item) => {
+      const align = item.align || "vertical";
+      const left = cumputedX(item.time);
+      const obj = otherList.find((v) => v.left == left);
+      if (obj) {
+        obj[align].push(item);
+      } else {
+        const initObj = {
+          left,
+          vertical: [],
+          horizontal: []
+        };
+        initObj[align].push(item);
+        otherList.push(initObj);
+      }
+    });
+    let textWidth = 0;
+    otherList.forEach((item) => {
+      let topY = vitalSignsOriginY.originY;
+      let leftX = item.left;
+      let textHeight = 0;
+      item.vertical.forEach((v) => {
+        const { commonOptions, value } = getTextData(v);
+        topY += (v.baseTop || 0) + textHeight;
+        const text = new fabric.Text(value, {
+          top: topY,
+          left: item.left,
+          ...commonOptions
+        });
+        textHeight = text.height || 0;
+        setTextWidth(text);
+      });
+      item.horizontal.forEach((v, i) => {
+        if (i > 0 || item.vertical.length) {
+          leftX += textWidth;
+        }
+        const { commonOptions, value } = getTextData(v);
+        const text = new fabric.Text(value, {
+          top: vitalSignsOriginY.originY,
+          left: leftX,
+          ...commonOptions
+        });
+        setTextWidth(text);
+      });
+    });
+    function setTextWidth(text) {
+      if (!textWidth) {
+        textWidth = text.width || 0;
+      }
+      list.push(text);
+    }
+    function getTextData(v) {
+      return {
+        commonOptions: {
+          originX: "center",
+          textAlign: "center",
+          ...defaultStyle,
+          ...v.style || {}
+        },
+        value: String(v.value.toString().split("").join("\n"))
+      };
+    }
+    const group = list.length > 0 ? new fabric.Group([...list], { ...defaultStyle }) : null;
+    group && canvas.value.add(group);
+  }
+  onMounted(() => {
+    nextTick(() => {
+      drawOther();
+      canvas.value.renderAll();
+    });
+  });
+}
+
+export { useOther };

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

@@ -1,27 +1 @@
-import { onMounted, nextTick } from 'vue';
-import { fabric } from '../utils/index.js';
-import { defaultBorderStyle } from './useDraw.js';
-
-function useRight(canvas, propItems, drawScaleValue) {
-  const { left, right, getRightInfo, canvasWidth, endY, endX, originY } = propItems;
-  onMounted(() => {
-    nextTick(() => {
-      var _a;
-      const yScaleValueList = left.yScaleValue.filter((v) => v.layout === "right");
-      if ((right == null ? void 0 : right.width) && ((_a = right == null ? void 0 : right.yScaleValue) == null ? void 0 : _a.layout) === "right") {
-        yScaleValueList.push(getRightInfo);
-      }
-      if ((right == null ? void 0 : right.width) || yScaleValueList.length > 0) {
-        const rightBorderLine = new fabric.Line([canvasWidth - 1, 0, canvasWidth - 1, endY], defaultBorderStyle);
-        const rightBorderLine2 = new fabric.Line([endX + 1, originY, canvasWidth - 1, originY], {
-          ...defaultBorderStyle,
-          stroke: "#fff"
-        });
-        canvas.value.add(rightBorderLine, rightBorderLine2);
-      }
-      drawScaleValue(yScaleValueList);
-    });
-  });
-}
-
-export { useRight };
+export { useRight } from './useRight2.js';

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

@@ -0,0 +1,27 @@
+import { onMounted, nextTick } from 'vue';
+import { fabric } from '../utils/index.js';
+import { defaultBorderStyle } from './useDraw2.js';
+
+function useRight(canvas, propItems, drawScaleValue) {
+  const { left, right, getRightInfo, canvasWidth, endY, endX, originY } = propItems;
+  onMounted(() => {
+    nextTick(() => {
+      var _a;
+      const yScaleValueList = left.yScaleValue.filter((v) => v.layout === "right");
+      if ((right == null ? void 0 : right.width) && ((_a = right == null ? void 0 : right.yScaleValue) == null ? void 0 : _a.layout) === "right") {
+        yScaleValueList.push(getRightInfo);
+      }
+      if ((right == null ? void 0 : right.width) || yScaleValueList.length > 0) {
+        const rightBorderLine = new fabric.Line([canvasWidth - 1, 0, canvasWidth - 1, endY], defaultBorderStyle);
+        const rightBorderLine2 = new fabric.Line([endX + 1, originY, canvasWidth - 1, originY], {
+          ...defaultBorderStyle,
+          stroke: "#fff"
+        });
+        canvas.value.add(rightBorderLine, rightBorderLine2);
+      }
+      drawScaleValue(yScaleValueList);
+    });
+  });
+}
+
+export { useRight };

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

@@ -1,127 +1 @@
-import { useMemoize } from '@vueuse/core';
-import { fabric } from '../utils/index.js';
-
-const getTangent = useMemoize((angle) => {
-  return +Math.tan(angle * Math.PI / 180);
-});
-function useShadow() {
-  function createShadowLines(coordinates, angle = 45, space = 10) {
-    const result = [];
-    angle = normalizeAngle(angle);
-    if (angle === 0)
-      return result;
-    const minX = Math.min(...coordinates.map(([x]) => x));
-    const maxX = Math.max(...coordinates.map(([x]) => x));
-    const minY = Math.min(...coordinates.map(([, y]) => y));
-    const maxY = Math.max(...coordinates.map(([, y]) => y));
-    const offsetX = (maxY - minY) / getTangent(angle);
-    const isLeanRight = angle > 0 && angle < 90 || angle > 180 && angle < 270;
-    let start = minX;
-    let end = maxX;
-    if (isLeanRight) {
-      end += offsetX;
-    } else {
-      start += offsetX;
-    }
-    getLinePoints(start, end).forEach((linePoint) => {
-      let intersectionPoints = [];
-      getShapeLinePoints(coordinates).forEach((shapeLinePoint) => {
-        const intersectionPoint = getIntersectionPoint(linePoint[0], linePoint[1], shapeLinePoint[0], shapeLinePoint[1]);
-        intersectionPoint && intersectionPoints.push(intersectionPoint);
-      });
-      intersectionPoints = sortPoints(uniquePoints(intersectionPoints));
-      if (intersectionPoints.length >= 2) {
-        for (let i = 0; i < intersectionPoints.length; i++) {
-          if (intersectionPoints[i + 1] && isInnerLine(intersectionPoints[i], intersectionPoints[i + 1])) {
-            result.push(createLine(intersectionPoints[i], intersectionPoints[i + 1]));
-          }
-        }
-      }
-    });
-    return result;
-    function isInnerLine(point1, point2) {
-      return isInPolygon([(point1[0] + point2[0]) / 2, (point1[1] + point2[1]) / 2], coordinates);
-    }
-    function normalizeAngle(angle2) {
-      angle2 = angle2 % 360;
-      angle2 = angle2 < 0 ? 180 - angle2 : angle2;
-      angle2 = angle2 >= 180 ? angle2 - 180 : angle2;
-      return angle2;
-    }
-    function getLinePoints(start2, end2) {
-      const result2 = [completePoint([start2, minY])];
-      while (start2 < end2) {
-        start2 += space;
-        result2.push(completePoint([start2, minY]));
-      }
-      return result2;
-    }
-    function completePoint(point) {
-      const otherPoint = [point[0] - offsetX, maxY];
-      return [point, otherPoint];
-    }
-    function getShapeLinePoints(coordinates2) {
-      return coordinates2.reduce((res, c, idx) => {
-        const next = coordinates2[idx + 1] || coordinates2[0];
-        res.push([c, next]);
-        return res;
-      }, []);
-    }
-    function createLine(startPoint, endPoint) {
-      return new fabric.Line([startPoint[0], startPoint[1], endPoint[0], endPoint[1]]);
-    }
-  }
-  return { createShadowLines };
-  function sortPoints(points) {
-    return points.sort((a, b) => a[1] - b[1]);
-  }
-  function getIntersectionPoint(a, b, c, d) {
-    const denominator = (b[1] - a[1]) * (d[0] - c[0]) - (a[0] - b[0]) * (c[1] - d[1]);
-    if (denominator === 0) {
-      return false;
-    }
-    const x = ((b[0] - a[0]) * (d[0] - c[0]) * (c[1] - a[1]) + (b[1] - a[1]) * (d[0] - c[0]) * a[0] - (d[1] - c[1]) * (b[0] - a[0]) * c[0]) / denominator;
-    const y = -((b[1] - a[1]) * (d[1] - c[1]) * (c[0] - a[0]) + (b[0] - a[0]) * (d[1] - c[1]) * a[1] - (d[0] - c[0]) * (b[1] - a[1]) * c[1]) / denominator;
-    if (((x - a[0]) * (x - b[0]) < 0 || nearlyEqual(x, a[0]) || nearlyEqual(x, b[0])) && ((y - a[1]) * (y - b[1]) < 0 || nearlyEqual(y, a[1]) || nearlyEqual(y, b[1])) && ((x - c[0]) * (x - d[0]) < 0 || nearlyEqual(x, c[0]) || nearlyEqual(x, d[0])) && ((y - c[1]) * (y - d[1]) < 0 || nearlyEqual(y, c[1]) || nearlyEqual(y, d[1]))) {
-      return [x, y];
-    }
-    return false;
-  }
-  function uniquePoints(points) {
-    return points.reduce((fin, point) => {
-      if (!hasPoint(fin, point))
-        fin.push(point);
-      return fin;
-    }, []);
-    function hasPoint(points2, point) {
-      return points2.some((p) => nearlyEqual(p[0], point[0]) && nearlyEqual(p[1], point[1]));
-    }
-  }
-  function isInPolygon(checkPoint, polygonPoints) {
-    let counter = 0;
-    let xinters;
-    let p1, p2;
-    const pointCount = polygonPoints.length;
-    p1 = polygonPoints[0];
-    for (let i = 1; i <= pointCount; i++) {
-      p2 = polygonPoints[i % pointCount];
-      if (checkPoint[0] > Math.min(p1[0], p2[0]) && checkPoint[0] <= Math.max(p1[0], p2[0])) {
-        if (checkPoint[1] <= Math.max(p1[1], p2[1])) {
-          if (p1[0] != p2[0]) {
-            xinters = (checkPoint[0] - p1[0]) * (p2[1] - p1[1]) / (p2[0] - p1[0]) + p1[1];
-            if (p1[1] == p2[1] || checkPoint[1] <= xinters) {
-              counter++;
-            }
-          }
-        }
-      }
-      p1 = p2;
-    }
-    return counter % 2 !== 0;
-  }
-  function nearlyEqual(v1, v2) {
-    return Math.abs(v1 - v2) <= 1e-4;
-  }
-}
-
-export { useShadow };
+export { useShadow } from './useShadow2.js';

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

@@ -0,0 +1,127 @@
+import { useMemoize } from '@vueuse/core';
+import { fabric } from '../utils/index.js';
+
+const getTangent = useMemoize((angle) => {
+  return +Math.tan(angle * Math.PI / 180);
+});
+function useShadow() {
+  function createShadowLines(coordinates, angle = 45, space = 10) {
+    const result = [];
+    angle = normalizeAngle(angle);
+    if (angle === 0)
+      return result;
+    const minX = Math.min(...coordinates.map(([x]) => x));
+    const maxX = Math.max(...coordinates.map(([x]) => x));
+    const minY = Math.min(...coordinates.map(([, y]) => y));
+    const maxY = Math.max(...coordinates.map(([, y]) => y));
+    const offsetX = (maxY - minY) / getTangent(angle);
+    const isLeanRight = angle > 0 && angle < 90 || angle > 180 && angle < 270;
+    let start = minX;
+    let end = maxX;
+    if (isLeanRight) {
+      end += offsetX;
+    } else {
+      start += offsetX;
+    }
+    getLinePoints(start, end).forEach((linePoint) => {
+      let intersectionPoints = [];
+      getShapeLinePoints(coordinates).forEach((shapeLinePoint) => {
+        const intersectionPoint = getIntersectionPoint(linePoint[0], linePoint[1], shapeLinePoint[0], shapeLinePoint[1]);
+        intersectionPoint && intersectionPoints.push(intersectionPoint);
+      });
+      intersectionPoints = sortPoints(uniquePoints(intersectionPoints));
+      if (intersectionPoints.length >= 2) {
+        for (let i = 0; i < intersectionPoints.length; i++) {
+          if (intersectionPoints[i + 1] && isInnerLine(intersectionPoints[i], intersectionPoints[i + 1])) {
+            result.push(createLine(intersectionPoints[i], intersectionPoints[i + 1]));
+          }
+        }
+      }
+    });
+    return result;
+    function isInnerLine(point1, point2) {
+      return isInPolygon([(point1[0] + point2[0]) / 2, (point1[1] + point2[1]) / 2], coordinates);
+    }
+    function normalizeAngle(angle2) {
+      angle2 = angle2 % 360;
+      angle2 = angle2 < 0 ? 180 - angle2 : angle2;
+      angle2 = angle2 >= 180 ? angle2 - 180 : angle2;
+      return angle2;
+    }
+    function getLinePoints(start2, end2) {
+      const result2 = [completePoint([start2, minY])];
+      while (start2 < end2) {
+        start2 += space;
+        result2.push(completePoint([start2, minY]));
+      }
+      return result2;
+    }
+    function completePoint(point) {
+      const otherPoint = [point[0] - offsetX, maxY];
+      return [point, otherPoint];
+    }
+    function getShapeLinePoints(coordinates2) {
+      return coordinates2.reduce((res, c, idx) => {
+        const next = coordinates2[idx + 1] || coordinates2[0];
+        res.push([c, next]);
+        return res;
+      }, []);
+    }
+    function createLine(startPoint, endPoint) {
+      return new fabric.Line([startPoint[0], startPoint[1], endPoint[0], endPoint[1]]);
+    }
+  }
+  return { createShadowLines };
+  function sortPoints(points) {
+    return points.sort((a, b) => a[1] - b[1]);
+  }
+  function getIntersectionPoint(a, b, c, d) {
+    const denominator = (b[1] - a[1]) * (d[0] - c[0]) - (a[0] - b[0]) * (c[1] - d[1]);
+    if (denominator === 0) {
+      return false;
+    }
+    const x = ((b[0] - a[0]) * (d[0] - c[0]) * (c[1] - a[1]) + (b[1] - a[1]) * (d[0] - c[0]) * a[0] - (d[1] - c[1]) * (b[0] - a[0]) * c[0]) / denominator;
+    const y = -((b[1] - a[1]) * (d[1] - c[1]) * (c[0] - a[0]) + (b[0] - a[0]) * (d[1] - c[1]) * a[1] - (d[0] - c[0]) * (b[1] - a[1]) * c[1]) / denominator;
+    if (((x - a[0]) * (x - b[0]) < 0 || nearlyEqual(x, a[0]) || nearlyEqual(x, b[0])) && ((y - a[1]) * (y - b[1]) < 0 || nearlyEqual(y, a[1]) || nearlyEqual(y, b[1])) && ((x - c[0]) * (x - d[0]) < 0 || nearlyEqual(x, c[0]) || nearlyEqual(x, d[0])) && ((y - c[1]) * (y - d[1]) < 0 || nearlyEqual(y, c[1]) || nearlyEqual(y, d[1]))) {
+      return [x, y];
+    }
+    return false;
+  }
+  function uniquePoints(points) {
+    return points.reduce((fin, point) => {
+      if (!hasPoint(fin, point))
+        fin.push(point);
+      return fin;
+    }, []);
+    function hasPoint(points2, point) {
+      return points2.some((p) => nearlyEqual(p[0], point[0]) && nearlyEqual(p[1], point[1]));
+    }
+  }
+  function isInPolygon(checkPoint, polygonPoints) {
+    let counter = 0;
+    let xinters;
+    let p1, p2;
+    const pointCount = polygonPoints.length;
+    p1 = polygonPoints[0];
+    for (let i = 1; i <= pointCount; i++) {
+      p2 = polygonPoints[i % pointCount];
+      if (checkPoint[0] > Math.min(p1[0], p2[0]) && checkPoint[0] <= Math.max(p1[0], p2[0])) {
+        if (checkPoint[1] <= Math.max(p1[1], p2[1])) {
+          if (p1[0] != p2[0]) {
+            xinters = (checkPoint[0] - p1[0]) * (p2[1] - p1[1]) / (p2[0] - p1[0]) + p1[1];
+            if (p1[1] == p2[1] || checkPoint[1] <= xinters) {
+              counter++;
+            }
+          }
+        }
+      }
+      p1 = p2;
+    }
+    return counter % 2 !== 0;
+  }
+  function nearlyEqual(v1, v2) {
+    return Math.abs(v1 - v2) <= 1e-4;
+  }
+}
+
+export { useShadow };

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

@@ -1,138 +1 @@
-import { onMounted, nextTick } from 'vue';
-import { fabric } from '../utils/index.js';
-import { defaultBorderStyle, defaultStyle, drawTextGroup, defaultTextStyle, defaultRectStyle } from './useDraw.js';
-
-function useTop(canvas, propItems) {
-  const {
-    grid,
-    originX,
-    xCellWidth,
-    gridXNumber,
-    top,
-    xScalevalueHeight,
-    iconsWidth,
-    topList,
-    endXLimit,
-    canvasWidth
-  } = propItems;
-  function drawTop() {
-    const list = [];
-    endXLimit && list.push(new fabric.Line([endXLimit, 0, canvasWidth, 0], defaultBorderStyle));
-    let topY = 0;
-    topList.forEach((item, index) => {
-      if (index > 0) {
-        topY += propItems[`${topList[index - 1].key}Height`];
-      }
-      if (item.key == "xScalevalue") {
-        drawDay(item, list, topY);
-        drawTime(item, list, topY);
-      } else {
-        propItems[`${item.key}Height`] && drawDate(item, list, topY);
-      }
-    });
-    const group = list.length > 0 ? new fabric.Group([...list], { ...defaultStyle }) : null;
-    group && group.sendToBack();
-    group && canvas.value.add(group);
-  }
-  function drawTime(item, list, topY) {
-    const dayHeight = top.xScalevalue.show ? top.dayHeight || 0 : 0;
-    const height = xScalevalueHeight - dayHeight;
-    const title = drawTextGroup({
-      width: originX - iconsWidth,
-      height: xScalevalueHeight,
-      ...defaultRectStyle
-    }, {
-      value: top.xScalevalue.title,
-      ...defaultTextStyle,
-      ...item.style || {},
-      ...item.titleStyle || {}
-    }, {
-      left: iconsWidth,
-      top: topY
-    });
-    list.push(title);
-    const timeList = [];
-    for (let j = 0; j < grid.mainXCell; j++) {
-      timeList.push(top.xScalevalue.list);
-    }
-    timeList.flat().forEach((v, i) => {
-      const left = originX + i * xCellWidth;
-      const textGroup = drawTextGroup({
-        width: xCellWidth,
-        height
-      }, {
-        value: v,
-        ...defaultTextStyle,
-        ...item.style || {}
-      }, {
-        left,
-        top: topY + dayHeight
-      });
-      list.push(textGroup);
-    });
-  }
-  function drawDay(item, list, topY) {
-    if (!top.dayHeight)
-      return false;
-    const height = top.dayHeight;
-    const width = xCellWidth * grid.subSecondXCell;
-    const dayList = (gridXNumber - grid.surplusXCell) / grid.subSecondXCell;
-    for (let i = 0; i < dayList; i++) {
-      const left = originX + i * width;
-      const value = i % 2 === 0 ? "\u4E0A\u5348" : "\u4E0B\u5348";
-      const textGroup = drawTextGroup({
-        width,
-        height
-      }, {
-        value,
-        ...defaultTextStyle,
-        ...item.style || {}
-      }, {
-        left,
-        top: topY
-      });
-      list.push(textGroup);
-    }
-  }
-  function drawDate(item, list, topY) {
-    const height = propItems[`${item.key}Height`];
-    const title = drawTextGroup({
-      width: originX - iconsWidth,
-      height,
-      ...defaultRectStyle
-    }, {
-      value: item.title,
-      ...defaultTextStyle,
-      ...(item == null ? void 0 : item.style) || {},
-      ...item.titleStyle || {}
-    }, {
-      left: iconsWidth,
-      top: topY
-    });
-    list.push(title);
-    const width = xCellWidth * grid.subXCell;
-    item.list.forEach((v, i) => {
-      const left = originX + i * width;
-      const textGroup = drawTextGroup({
-        width,
-        height
-      }, {
-        value: v,
-        ...defaultTextStyle,
-        ...(item == null ? void 0 : item.style) || {}
-      }, {
-        left,
-        top: topY
-      });
-      list.push(textGroup);
-    });
-  }
-  onMounted(() => {
-    nextTick(() => {
-      drawTop();
-      canvas.value.renderAll();
-    });
-  });
-}
-
-export { useTop };
+export { useTop } from './useTop2.js';

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

@@ -0,0 +1,138 @@
+import { onMounted, nextTick } from 'vue';
+import { fabric } from '../utils/index.js';
+import { defaultBorderStyle, defaultStyle, drawTextGroup, defaultTextStyle, defaultRectStyle } from './useDraw2.js';
+
+function useTop(canvas, propItems) {
+  const {
+    grid,
+    originX,
+    xCellWidth,
+    gridXNumber,
+    top,
+    xScalevalueHeight,
+    iconsWidth,
+    topList,
+    endXLimit,
+    canvasWidth
+  } = propItems;
+  function drawTop() {
+    const list = [];
+    endXLimit && list.push(new fabric.Line([endXLimit, 0, canvasWidth, 0], defaultBorderStyle));
+    let topY = 0;
+    topList.forEach((item, index) => {
+      if (index > 0) {
+        topY += propItems[`${topList[index - 1].key}Height`];
+      }
+      if (item.key == "xScalevalue") {
+        drawDay(item, list, topY);
+        drawTime(item, list, topY);
+      } else {
+        propItems[`${item.key}Height`] && drawDate(item, list, topY);
+      }
+    });
+    const group = list.length > 0 ? new fabric.Group([...list], { ...defaultStyle }) : null;
+    group && group.sendToBack();
+    group && canvas.value.add(group);
+  }
+  function drawTime(item, list, topY) {
+    const dayHeight = top.xScalevalue.show ? top.dayHeight || 0 : 0;
+    const height = xScalevalueHeight - dayHeight;
+    const title = drawTextGroup({
+      width: originX - iconsWidth,
+      height: xScalevalueHeight,
+      ...defaultRectStyle
+    }, {
+      value: top.xScalevalue.title,
+      ...defaultTextStyle,
+      ...item.style || {},
+      ...item.titleStyle || {}
+    }, {
+      left: iconsWidth,
+      top: topY
+    });
+    list.push(title);
+    const timeList = [];
+    for (let j = 0; j < grid.mainXCell; j++) {
+      timeList.push(top.xScalevalue.list);
+    }
+    timeList.flat().forEach((v, i) => {
+      const left = originX + i * xCellWidth;
+      const textGroup = drawTextGroup({
+        width: xCellWidth,
+        height
+      }, {
+        value: v,
+        ...defaultTextStyle,
+        ...item.style || {}
+      }, {
+        left,
+        top: topY + dayHeight
+      });
+      list.push(textGroup);
+    });
+  }
+  function drawDay(item, list, topY) {
+    if (!top.dayHeight)
+      return false;
+    const height = top.dayHeight;
+    const width = xCellWidth * grid.subSecondXCell;
+    const dayList = (gridXNumber - grid.surplusXCell) / grid.subSecondXCell;
+    for (let i = 0; i < dayList; i++) {
+      const left = originX + i * width;
+      const value = i % 2 === 0 ? "\u4E0A\u5348" : "\u4E0B\u5348";
+      const textGroup = drawTextGroup({
+        width,
+        height
+      }, {
+        value,
+        ...defaultTextStyle,
+        ...item.style || {}
+      }, {
+        left,
+        top: topY
+      });
+      list.push(textGroup);
+    }
+  }
+  function drawDate(item, list, topY) {
+    const height = propItems[`${item.key}Height`];
+    const title = drawTextGroup({
+      width: originX - iconsWidth,
+      height,
+      ...defaultRectStyle
+    }, {
+      value: item.title,
+      ...defaultTextStyle,
+      ...(item == null ? void 0 : item.style) || {},
+      ...item.titleStyle || {}
+    }, {
+      left: iconsWidth,
+      top: topY
+    });
+    list.push(title);
+    const width = xCellWidth * grid.subXCell;
+    item.list.forEach((v, i) => {
+      const left = originX + i * width;
+      const textGroup = drawTextGroup({
+        width,
+        height
+      }, {
+        value: v,
+        ...defaultTextStyle,
+        ...(item == null ? void 0 : item.style) || {}
+      }, {
+        left,
+        top: topY
+      });
+      list.push(textGroup);
+    });
+  }
+  onMounted(() => {
+    nextTick(() => {
+      drawTop();
+      canvas.value.renderAll();
+    });
+  });
+}
+
+export { useTop };

package/es/components/fabric-chart/src/interface.js

@@ -1,4 +1 @@
-const InjectionCanvas = Symbol("canvas");
-const InjectionPropItems = Symbol("propItems");
-
-export { InjectionCanvas, InjectionPropItems };
+export { InjectionCanvas, InjectionPropItems } from './interface2.js';

package/es/components/fabric-chart/src/interface2.js

@@ -0,0 +1,4 @@
+const InjectionCanvas = Symbol("canvas");
+const InjectionPropItems = Symbol("propItems");
+
+export { InjectionCanvas, InjectionPropItems };