cnhis-design-vue 3.1.9-beta.10 → 3.1.9-beta.13

package/es/packages/fabric-chart/index.d.ts

@@ -1,66 +1,15 @@
 import { SFCWithInstall } from '../../../es/src/types';
 declare const FabricChart: SFCWithInstall<import("vue").DefineComponent<{
     data: {
-        type: ObjectConstructor;
+        type: null;
         required: true;
     };
 }, {
     props: {
-        data: {
-            width: number;
-            height: number;
-            borderStyle?: import("fabric/fabric-impl").ILineOptions | undefined;
-            grid: {
-                mainXCell: number;
-                subXCell: number;
-                subSecondXCell: number;
-                mainYCell: number;
-                subYCell: number;
-                mainLineStyle?: import("fabric/fabric-impl").ILineOptions | undefined;
-                subLineStyle?: import("fabric/fabric-impl").ILineOptions | undefined;
-                subSecondLineStyle?: import("fabric/fabric-impl").ILineOptions | undefined;
-                event?: Partial<{
-                    selectable: boolean;
-                    evented: boolean;
-                }> | undefined;
-            };
-            other?: {
-                style?: import("fabric/fabric-impl").ITextOptions | undefined;
-                list: {
-                    time: string;
-                    value: string | number;
-                }[];
-            } | undefined;
-            top: {
-                dateStyle?: import("fabric/fabric-impl").ITextOptions | undefined;
-                titleWidth: number;
-                date: {
-                    title: string;
-                    height?: number | undefined;
-                    list: string[];
-                    style?: import("fabric/fabric-impl").ITextOptions | undefined;
-                };
-                xScalevalue: {
-                    title: string;
-                    height?: number | undefined;
-                    list: string[];
-                    style?: import("fabric/fabric-impl").ITextOptions | undefined;
-                };
-                dayHeight?: number | undefined;
-            };
-            left: {
-                spaceGridNumber?: number | undefined;
-                yScaleValue: any[];
-            };
-            right?: {
-                width?: number | undefined;
-                yScaleValue: any;
-            } | undefined;
-            bottom?: any;
-        };
+        data: import("./src/interface").IData;
     };
-    canvasRef: import("vue").Ref<HTMLCanvasElement | null>;
-    canvas: import("vue").Ref<import("fabric/fabric-impl").Canvas | undefined>;
+    canvasRef: any;
+    canvas: import("vue").Ref<any>;
     gridXNumber: import("vue").ComputedRef<number>;
     gridYNumber: import("vue").ComputedRef<number>;
     endX: import("vue").ComputedRef<number>;
@@ -74,34 +23,11 @@ declare const FabricChart: SFCWithInstall<import("vue").DefineComponent<{
     breatheYCell: import("vue").ComputedRef<number>;
     pulseYCell: import("vue").ComputedRef<number>;
     centigradeYCell: import("vue").ComputedRef<number>;
-    event: import("vue").ComputedRef<Partial<{
-        selectable: boolean;
-        evented: boolean;
-    }>>;
-    propItems: {
-        canvasWidth: number;
-        canvasHeight: number;
-        gridXNumber: number;
-        gridYNumber: number;
-        originX: number;
-        originY: number;
-        endX: number;
-        endY: number;
-        xCellWidth: number;
-        yCellHeight: number;
-        xScaleList: number[];
-        xScaleCell: number;
-        breatheYCell: number;
-        pulseYCell: number;
-        centigradeYCell: number;
-        event: {
-            selectable?: boolean | undefined;
-            evented?: boolean | undefined;
-        };
-    };
+    event: import("vue").ComputedRef<any>;
+    propItems: any;
 }, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, Record<string, any>, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
     data: {
-        type: ObjectConstructor;
+        type: null;
         required: true;
     };
 }>>, {}>>;

package/es/packages/fabric-chart/src/FabricChart.vue.d.ts

@@ -1,70 +1,15 @@
-import { fabric } from 'fabric';
-declare type IEvent = {
-    selectable: boolean;
-    evented: boolean;
-};
-declare type IPoint = {
-    time: string;
-    value: string | number;
-};
-declare type IGrid = {
-    mainXCell: number;
-    subXCell: number;
-    subSecondXCell: number;
-    mainYCell: number;
-    subYCell: number;
-    mainLineStyle?: fabric.ILineOptions;
-    subLineStyle?: fabric.ILineOptions;
-    subSecondLineStyle?: fabric.ILineOptions;
-    event?: Partial<IEvent>;
-};
-declare type IOther = {
-    style?: fabric.ITextOptions;
-    list: Array<IPoint>;
-};
-declare type IDate = {
-    title: string;
-    height?: number;
-    list: Array<string>;
-    style?: fabric.ITextOptions;
-};
-declare type ITop = {
-    dateStyle?: fabric.ITextOptions;
-    titleWidth: number;
-    date: IDate;
-    xScalevalue: IDate;
-    dayHeight?: number;
-};
-declare type ILeft = {
-    spaceGridNumber?: number;
-    yScaleValue: Array<any>;
-};
-declare type IRight = {
-    width?: number;
-    yScaleValue: any;
-};
-declare type IData = {
-    width: number;
-    height: number;
-    borderStyle?: fabric.ILineOptions;
-    grid: IGrid;
-    other?: IOther;
-    top: ITop;
-    left: ILeft;
-    right?: IRight;
-    bottom?: any;
-};
+import { IData } from './interface';
 declare const _default: import("vue").DefineComponent<{
     data: {
-        type: ObjectConstructor;
+        type: null;
         required: true;
     };
 }, {
     props: {
         data: IData;
     };
-    canvasRef: import("vue").Ref<HTMLCanvasElement | null>;
-    canvas: import("vue").Ref<fabric.Canvas | undefined>;
+    canvasRef: any;
+    canvas: import("vue").Ref<any>;
     gridXNumber: import("vue").ComputedRef<number>;
     gridYNumber: import("vue").ComputedRef<number>;
     endX: import("vue").ComputedRef<number>;
@@ -78,31 +23,11 @@ declare const _default: import("vue").DefineComponent<{
     breatheYCell: import("vue").ComputedRef<number>;
     pulseYCell: import("vue").ComputedRef<number>;
     centigradeYCell: import("vue").ComputedRef<number>;
-    event: import("vue").ComputedRef<Partial<IEvent>>;
-    propItems: {
-        canvasWidth: number;
-        canvasHeight: number;
-        gridXNumber: number;
-        gridYNumber: number;
-        originX: number;
-        originY: number;
-        endX: number;
-        endY: number;
-        xCellWidth: number;
-        yCellHeight: number;
-        xScaleList: number[];
-        xScaleCell: number;
-        breatheYCell: number;
-        pulseYCell: number;
-        centigradeYCell: number;
-        event: {
-            selectable?: boolean | undefined;
-            evented?: boolean | undefined;
-        };
-    };
+    event: import("vue").ComputedRef<any>;
+    propItems: any;
 }, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, Record<string, any>, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
     data: {
-        type: ObjectConstructor;
+        type: null;
         required: true;
     };
 }>>, {}>;

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

@@ -1,11 +1,16 @@
 import { defineComponent, ref, computed, reactive, provide, onMounted, openBlock, createElementBlock, createElementVNode } from 'vue';
-import { fabric } from 'fabric';
+import { fabric } from './utils/index.js';
+import { InjectionCanvas, InjectionPropItems } from './interface.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';
 
 const _hoisted_1 = { class: "c-fabric-chart" };
 var script = /* @__PURE__ */ defineComponent({
   __name: "FabricChart",
   props: {
-    data: { type: Object, required: true }
+    data: { type: null, required: true }
   },
   setup(__props) {
     const props = __props;
@@ -91,6 +96,10 @@ var script = /* @__PURE__ */ defineComponent({
     const propItems = reactive({
       canvasWidth: props.data.width,
       canvasHeight: props.data.height,
+      borderStyle: props.data.borderStyle || defaultBorderStyle,
+      grid: props.data.grid,
+      top: props.data.top,
+      left: props.data.left,
       gridXNumber: gridXNumber.value,
       gridYNumber: gridYNumber.value,
       originX: originX.value,
@@ -106,8 +115,11 @@ var script = /* @__PURE__ */ defineComponent({
       centigradeYCell: centigradeYCell.value,
       event: event.value
     });
-    provide("canvas", canvas);
-    provide("propItems", propItems);
+    provide(InjectionCanvas, canvas);
+    provide(InjectionPropItems, propItems);
+    useTop(canvas, propItems);
+    useCenter(canvas, propItems);
+    useLeft(canvas, propItems);
     onMounted(() => {
       canvas.value = new fabric.Canvas(canvasRef.value, {
         width: propItems.canvasWidth,

package/es/packages/fabric-chart/src/hooks/useCenter.d.ts

@@ -0,0 +1,4 @@
+import { Ref } from 'vue';
+import { fabric } from '../utils';
+import { IPropItems } from '../interface';
+export default function useCenter(canvas: Ref<fabric.Canvas>, propItems: IPropItems): void;

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

@@ -0,0 +1,7 @@
+import useGrid from './useGrid.js';
+
+function useCenter(canvas, propItems) {
+  useGrid(canvas, propItems);
+}
+
+export { useCenter as default };

package/es/packages/fabric-chart/src/hooks/useDraw.d.ts

@@ -0,0 +1,42 @@
+import { fabric } from '../utils';
+import { ILineOptions, ITextOptions } from '../interface';
+export declare const defaultStyle: {
+    evented: boolean;
+    selectable: boolean;
+};
+export declare const defaultBorderStyle: {
+    evented: boolean;
+    selectable: boolean;
+    stroke: string;
+    strokeWidth: number;
+};
+export declare const defaultLineStyle: {
+    evented: boolean;
+    selectable: boolean;
+    stroke: string;
+    strokeWidth: number;
+    strokeDashArray: number[];
+};
+export declare const defaultRectStyle: {
+    evented: boolean;
+    selectable: boolean;
+    fill: string;
+    stroke: string;
+    strokeWidth: number;
+    originX: string;
+    originY: string;
+};
+export declare const defaultTextStyle: {
+    evented: boolean;
+    selectable: boolean;
+    fontFamily: string;
+    fontSize: number;
+    fill: string;
+    centeredRotation: boolean;
+    originX: string;
+    originY: string;
+    lineHeight: number;
+};
+export declare function drawLine(points: number[], style: Partial<ILineOptions>): fabric.Line;
+export declare function drawTextGroup(rectStyle: Partial<fabric.IRectOptions>, fontStyle: Partial<ITextOptions>, groupStyle: Partial<fabric.IGroupOptions>): fabric.Group;
+export declare function drawPoint(type: string, style: any): fabric.Triangle | fabric.Circle | undefined;

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

@@ -0,0 +1,76 @@
+import { fabric } from '../utils/index.js';
+
+const defaultStyle = {
+  evented: false,
+  selectable: false
+};
+const defaultBorderStyle = {
+  stroke: "#999",
+  strokeWidth: 1,
+  ...defaultStyle
+};
+const defaultLineStyle = {
+  stroke: "#000",
+  strokeWidth: 1,
+  strokeDashArray: [0, 0],
+  ...defaultStyle
+};
+const defaultRectStyle = {
+  fill: "transparent",
+  stroke: "#999",
+  strokeWidth: 1,
+  originX: "center",
+  originY: "center",
+  ...defaultStyle
+};
+const defaultTextStyle = {
+  fontFamily: "\u5FAE\u8F6F\u96C5\u9ED1",
+  fontSize: 12,
+  fill: "#000",
+  centeredRotation: true,
+  originX: "center",
+  originY: "center",
+  lineHeight: 1,
+  ...defaultStyle
+};
+function drawLine(points, style) {
+  return new fabric.Line(points, {
+    ...defaultLineStyle,
+    ...style
+  });
+}
+function drawTextGroup(rectStyle, fontStyle, groupStyle) {
+  const rect = new fabric.Rect({
+    ...defaultRectStyle,
+    ...rectStyle
+  });
+  const texts = new fabric.Text(String(fontStyle.value), {
+    ...defaultTextStyle,
+    ...fontStyle
+  });
+  return new fabric.Group([rect, texts], {
+    ...groupStyle
+  });
+}
+function drawPoint(type, style) {
+  switch (type) {
+    case "triangle":
+      return new fabric.Triangle({
+        width: 20,
+        height: 20,
+        strokeWidth: 1,
+        scale: 1,
+        ...style
+      });
+    case "circle":
+      return new fabric.Circle({
+        objectCaching: false,
+        strokeWidth: 1,
+        radius: 5,
+        scale: 1,
+        ...style
+      });
+  }
+}
+
+export { defaultBorderStyle, defaultLineStyle, defaultRectStyle, defaultStyle, defaultTextStyle, drawLine, drawPoint, drawTextGroup };

package/es/packages/fabric-chart/src/hooks/useGrid.d.ts

@@ -0,0 +1,4 @@
+import { Ref } from 'vue';
+import { fabric } from '../utils';
+import { IPropItems } from '../interface';
+export default function useGrid(canvas: Ref<fabric.Canvas>, propItems: IPropItems): void;

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

@@ -0,0 +1,45 @@
+import { onMounted, nextTick } from 'vue';
+import { fabric } from '../utils/index.js';
+import { drawLine } from './useDraw.js';
+
+function useGrid(canvas, propItems) {
+  const { gridYNumber, originY, grid, originX, endX, xCellWidth, yCellHeight, gridXNumber, endY } = propItems;
+  const yList = [];
+  const xList = [];
+  for (let i = 0; i <= gridYNumber; i++) {
+    const y = originY + parseInt(String(yCellHeight * (gridYNumber - i)));
+    const style = i % grid.subYCell === 0 ? grid.mainLineStyle || {} : grid.subLineStyle || {};
+    yList.push(drawLine([originX, y, endX, y], {
+      id: i + "_" + new Date().getTime(),
+      ...style
+    }));
+  }
+  for (let i = 0; i <= gridXNumber; i++) {
+    const x = originX + parseInt(String(xCellWidth * i));
+    let style;
+    style = i % grid.subXCell === 0 ? grid.mainLineStyle || {} : grid.subLineStyle || {};
+    if (i % grid.subSecondXCell === 0) {
+      style = grid.subSecondLineStyle || {};
+    }
+    if (i % grid.subXCell === 0) {
+      style = grid.mainLineStyle || {};
+    }
+    xList.push(drawLine([x, originY, x, endY], {
+      id: i + "_" + new Date().getTime(),
+      ...style
+    }));
+  }
+  const group = new fabric.Group([...xList, ...yList], {
+    evented: false,
+    selectable: false
+  });
+  onMounted(() => {
+    nextTick(() => {
+      canvas.value.add(group);
+      canvas.value.sendToBack(group);
+      canvas.value.renderAll();
+    });
+  });
+}
+
+export { useGrid as default };

package/es/packages/fabric-chart/src/hooks/useLeft.d.ts

@@ -0,0 +1,4 @@
+import { Ref } from 'vue';
+import { fabric } from '../utils';
+import { IPropItems } from '../interface';
+export default function useLeft(canvas: Ref<fabric.Canvas>, propItems: IPropItems): void;

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

@@ -0,0 +1,66 @@
+import { onMounted, nextTick } from 'vue';
+import { fabric } from '../utils/index.js';
+import { defaultTextStyle, defaultStyle, defaultRectStyle } from './useDraw.js';
+
+function useLeft(canvas, propItems) {
+  const { originY, endY, originX, yCellHeight, borderStyle, left } = propItems;
+  function drawScaleValue() {
+    let groupList = [];
+    const column = left.yScaleValue.length;
+    const colWidth = originX / column;
+    const residue = originX % column;
+    const firstColWidth = colWidth + residue;
+    left.yScaleValue.forEach((item, index) => {
+      let list = [];
+      const rectWidth = index === 0 ? firstColWidth : colWidth;
+      const rectLeft = index === 0 ? 0 : firstColWidth + (index - 1) * colWidth;
+      const line = index > 0 ? new fabric.Line([rectLeft, originY, rectLeft, endY], {
+        ...borderStyle
+      }) : null;
+      line && list.push(line);
+      const leftVal = rectLeft + rectWidth / 2;
+      const spaceGridNumber = left.spaceGridNumber || 5;
+      item.list.forEach((v, i) => {
+        const top = endY - i * yCellHeight * spaceGridNumber;
+        const text = new fabric.Text(String(v), {
+          ...defaultTextStyle,
+          left: leftVal,
+          top: i === 0 ? top - 5 : top,
+          ...item.style
+        });
+        list.push(text);
+      });
+      let title = item.name || "";
+      if (item.unit)
+        title += "\n" + item.unit;
+      title && list.push(new fabric.Text(String(title), {
+        ...defaultTextStyle,
+        left: leftVal,
+        top: originY + yCellHeight * spaceGridNumber / 2,
+        textAlign: "center",
+        ...item.style
+      }));
+      const group2 = new fabric.Group(list, defaultStyle);
+      groupList.push(group2);
+    });
+    groupList.push(new fabric.Rect({
+      ...defaultStyle,
+      ...defaultRectStyle,
+      width: originX,
+      height: endY - originY,
+      left: 0,
+      top: originY
+    }));
+    const group = groupList.length > 0 ? new fabric.Group([...groupList], { ...defaultStyle }) : null;
+    group && group.sendToBack();
+    group && canvas.value.add(group);
+  }
+  onMounted(() => {
+    nextTick(() => {
+      drawScaleValue();
+      canvas.value.renderAll();
+    });
+  });
+}
+
+export { useLeft as default };

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

@@ -0,0 +1,4 @@
+import { Ref } from 'vue';
+import { fabric } from '../utils';
+import { IPropItems } from '../interface';
+export default function useTop(canvas: Ref<fabric.Canvas>, propItems: IPropItems): void;

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

@@ -0,0 +1,124 @@
+import { onMounted, nextTick } from 'vue';
+import { fabric } from '../utils/index.js';
+import { defaultStyle, drawTextGroup, defaultTextStyle, defaultRectStyle } from './useDraw.js';
+
+function useTop(canvas, propItems) {
+  const { originY, grid, originX, xCellWidth, gridXNumber, top } = propItems;
+  function drawTop() {
+    let list = [];
+    drawTopDate(list);
+    drawTopDay(list);
+    drawTopTime(list);
+    const group = list.length > 0 ? new fabric.Group([...list], { ...defaultStyle }) : null;
+    group && group.sendToBack();
+    group && canvas.value.add(group);
+  }
+  function drawTopTime(list) {
+    var _a, _b;
+    const dateHeight = ((_a = top.date) == null ? void 0 : _a.height) || 0;
+    const dayHeight = top.dayHeight || 0;
+    const height = originY - dateHeight - dayHeight;
+    const titleHeight = dayHeight + height;
+    const title = drawTextGroup({
+      width: originX,
+      height: titleHeight,
+      ...defaultRectStyle
+    }, {
+      value: top.xScalevalue.title,
+      ...defaultTextStyle,
+      ...((_b = top.date) == null ? void 0 : _b.style) || {}
+    }, {
+      left: 0,
+      top: dateHeight
+    });
+    list.push(title);
+    let timeList = [];
+    for (let j = 0; j < grid.mainXCell; j++) {
+      timeList.push(top.xScalevalue.list);
+    }
+    timeList.flat().forEach((v, i) => {
+      var _a2;
+      const left = originX + i * xCellWidth;
+      const textGroup = drawTextGroup({
+        width: xCellWidth,
+        height
+      }, {
+        value: v,
+        ...defaultTextStyle,
+        ...((_a2 = top.date) == null ? void 0 : _a2.style) || {}
+      }, {
+        left,
+        top: dateHeight + dayHeight
+      });
+      list.push(textGroup);
+    });
+  }
+  function drawTopDay(list) {
+    var _a;
+    if (!top.dayHeight)
+      return false;
+    const height = top.dayHeight;
+    const width = xCellWidth * grid.subSecondXCell;
+    const dayList = gridXNumber / 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,
+        ...((_a = top.date) == null ? void 0 : _a.style) || {}
+      }, {
+        left,
+        top: top.date.height || 0
+      });
+      list.push(textGroup);
+    }
+  }
+  function drawTopDate(list) {
+    var _a;
+    if (!top.date.height)
+      return false;
+    const height = top.date.height;
+    const title = drawTextGroup({
+      width: originX,
+      height,
+      ...defaultRectStyle
+    }, {
+      value: top.date.title,
+      ...defaultTextStyle,
+      ...((_a = top.date) == null ? void 0 : _a.style) || {}
+    }, {
+      left: 0,
+      top: 0
+    });
+    list.push(title);
+    const width = xCellWidth * grid.subXCell;
+    top.date.list.forEach((v, i) => {
+      var _a2;
+      const left = originX + i * width;
+      const textGroup = drawTextGroup({
+        width,
+        height
+      }, {
+        value: v,
+        ...defaultTextStyle,
+        ...((_a2 = top.date) == null ? void 0 : _a2.style) || {}
+      }, {
+        left,
+        top: 0
+      });
+      list.push(textGroup);
+    });
+  }
+  onMounted(() => {
+    nextTick(() => {
+      drawTop();
+      canvas.value.renderAll();
+    });
+  });
+}
+
+export { useTop as default };