cnhis-design-vue 3.1.33-beta.2 → 3.1.33-beta.21

package/es/components/fabric-chart/src/BirthProcessChart.vue.d.ts

@@ -0,0 +1,181 @@
+import { PropType } from 'vue';
+import { IBirthProcessData } from './interface';
+import { AnyObject } from '../../../../es/shared/types';
+declare const _default: import("vue").DefineComponent<{
+    data: {
+        type: PropType<IBirthProcessData>;
+        required: true;
+    };
+}, {
+    props: Readonly<import("@vue/shared").LooseRequired<Readonly<import("vue").ExtractPropTypes<{
+        data: {
+            type: PropType<IBirthProcessData>;
+            required: true;
+        };
+    }>> & {
+        onChange?: ((...args: any[]) => any) | undefined;
+        onSelect?: ((...args: any[]) => any) | undefined;
+        onAdd?: ((...args: any[]) => any) | undefined;
+        onDelete?: ((...args: any[]) => any) | undefined;
+    }>>;
+    emits: (event: "delete" | "change" | "add" | "select", ...args: any[]) => void;
+    leftScales: import("vue").ComputedRef<AnyObject[]>;
+    rightScales: import("vue").ComputedRef<AnyObject[]>;
+    leftAddAreaWidth: number;
+    rightAddAreaWidth: import("vue").ComputedRef<0 | 30>;
+    originX: import("vue").ComputedRef<number>;
+    endX: import("vue").ComputedRef<number>;
+    gridXNumber: import("vue").ComputedRef<any>;
+    gridYNumber: import("vue").ComputedRef<any>;
+    xCellWidth: import("vue").ComputedRef<number>;
+    yCellHeight: import("vue").ComputedRef<number>;
+    originY: import("vue").ComputedRef<number>;
+    originYCervix: import("vue").ComputedRef<number>;
+    endY: import("vue").ComputedRef<number>;
+    startTime: import("vue").ComputedRef<number>;
+    timeXCell: import("vue").ComputedRef<number>;
+    cervixYCell: import("vue").ComputedRef<number>;
+    FHRYCell: import("vue").ComputedRef<number>;
+    fetalPresentationYCell: import("vue").ComputedRef<number>;
+    event: import("vue").ComputedRef<any>;
+    select: import("vue").Ref<any>;
+    canvasRef: any;
+    canvas: import("vue").Ref<any>;
+    propItems: any;
+    pointTipProps: {
+        show: boolean;
+        point: {
+            x: number;
+            y: number;
+        };
+        list: string[];
+    };
+    pointMenuProps: {
+        show: boolean;
+        point: {
+            x: number;
+            y: number;
+        };
+        list: any[];
+        target: any;
+    };
+    clickMenu: ({ item, target }: {
+        item: any;
+        target: any;
+    }) => void;
+    PopupTip: import("vue").DefineComponent<{
+        show: {
+            type: BooleanConstructor;
+            required: true;
+            default: boolean;
+        };
+        point: {
+            type: null;
+            required: true;
+        };
+        list: {
+            type: ArrayConstructor;
+            required: false;
+            default: () => never[];
+        };
+        propItems: {
+            type: null;
+            required: true;
+        };
+    }, {
+        props: {
+            show: boolean;
+            point: import("./interface").ICoordinateValue;
+            list: string[];
+            propItems: AnyObject;
+        };
+        pointStyle: import("vue").ComputedRef<{
+            top: string;
+            bottom: string;
+            left: string;
+            right: string;
+            'transform-origin': string;
+        }>;
+        Teleport: {
+            new (): {
+                $props: import("vue").VNodeProps & import("vue").TeleportProps;
+            };
+            __isTeleport: true;
+        };
+    }, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+        show: {
+            type: BooleanConstructor;
+            required: true;
+            default: boolean;
+        };
+        point: {
+            type: null;
+            required: true;
+        };
+        list: {
+            type: ArrayConstructor;
+            required: false;
+            default: () => never[];
+        };
+        propItems: {
+            type: null;
+            required: true;
+        };
+    }>>, {
+        list: unknown[];
+    }>;
+    PopupMenu: import("vue").DefineComponent<{
+        show: {
+            type: BooleanConstructor;
+            default: boolean;
+        };
+        list: {
+            type: ArrayConstructor;
+            default: () => never[];
+        };
+        point: {
+            type: PropType<import("./interface").ICoordinateValue>;
+        };
+        propItems: {
+            type: PropType<import("./interface").IPropItems>;
+        };
+        target: {
+            type: PropType<any>;
+        };
+    }, () => JSX.Element, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("update:show" | "clickMenu")[], "clickMenu" | "update:show", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+        show: {
+            type: BooleanConstructor;
+            default: boolean;
+        };
+        list: {
+            type: ArrayConstructor;
+            default: () => never[];
+        };
+        point: {
+            type: PropType<import("./interface").ICoordinateValue>;
+        };
+        propItems: {
+            type: PropType<import("./interface").IPropItems>;
+        };
+        target: {
+            type: PropType<any>;
+        };
+    }>> & {
+        "onUpdate:show"?: ((...args: any[]) => any) | undefined;
+        onClickMenu?: ((...args: any[]) => any) | undefined;
+    }, {
+        show: boolean;
+        list: unknown[];
+    }>;
+}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("delete" | "change" | "add" | "select")[], "delete" | "change" | "add" | "select", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+    data: {
+        type: PropType<IBirthProcessData>;
+        required: true;
+    };
+}>> & {
+    onChange?: ((...args: any[]) => any) | undefined;
+    onSelect?: ((...args: any[]) => any) | undefined;
+    onAdd?: ((...args: any[]) => any) | undefined;
+    onDelete?: ((...args: any[]) => any) | undefined;
+}, {}>;
+export default _default;

package/es/components/fabric-chart/src/BirthProcessChart.vue.js

@@ -0,0 +1,172 @@
+import { defineComponent, computed, ref, reactive, onMounted, onBeforeUnmount, openBlock, createElementBlock, Fragment, createElementVNode, unref, createBlock, mergeProps, createCommentVNode } from 'vue';
+import { fabric } from './utils/index.js';
+import { defaultBorderStyle } from './hooks/useDraw.js';
+import 'naive-ui';
+import './hooks/useShadow.js';
+import 'lodash-es';
+import { useEvent } from './hooks/useEvent.js';
+import { useBirthProcess } from './hooks/useBirthProcess.js';
+import PopupTip from './components/PopupTip.vue.js';
+import PopupMenu from './components/PopupMenu.js';
+import _export_sfc from '../../../_virtual/plugin-vue_export-helper.js';
+
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  __name: "BirthProcessChart",
+  props: {
+    data: { type: Object, required: true }
+  },
+  emits: [
+    "change",
+    "add",
+    "delete",
+    "select"
+  ],
+  setup(__props, { expose, emit: emits }) {
+    const props = __props;
+    const leftScales = computed(() => props.data.scaleValues.filter((item) => item.layout === "left"));
+    const rightScales = computed(() => props.data.scaleValues.filter((item) => item.layout === "right"));
+    const leftAddAreaWidth = 30;
+    const rightAddAreaWidth = computed(() => {
+      var _a;
+      return !((_a = rightScales.value) == null ? void 0 : _a.length) ? 0 : 30;
+    });
+    const originX = computed(() => {
+      var _a;
+      const leftScalesWidth = (_a = leftScales.value) == null ? void 0 : _a.reduce((width, item) => {
+        width += item.width;
+        return width;
+      }, 0);
+      return leftAddAreaWidth + leftScalesWidth;
+    });
+    const endX = computed(() => {
+      var _a;
+      const { width } = props.data;
+      const rightScalesWidth = (_a = rightScales.value) == null ? void 0 : _a.reduce((width2, item) => {
+        width2 += item.width;
+        return width2;
+      }, 0);
+      return width - rightAddAreaWidth.value - rightScalesWidth;
+    });
+    const gridXNumber = computed(() => props.data.grid.mainXCell);
+    const gridYNumber = computed(() => props.data.grid.mainYCell);
+    const xCellWidth = computed(() => {
+      return (endX.value - originX.value) / gridXNumber.value;
+    });
+    const yCellHeight = computed(() => {
+      const { xAxis, height } = props.data;
+      const xAxisNumber = Object.values(xAxis).reduce((num, item) => {
+        if (item.show)
+          num++;
+        return num;
+      }, 0);
+      return height / (gridYNumber.value + xAxisNumber);
+    });
+    const originY = computed(() => yCellHeight.value);
+    const originYCervix = computed(() => {
+      const { scaleValues } = props.data;
+      const cervixItem = scaleValues.find((item) => item.key === "cervix");
+      const [, max] = (cervixItem == null ? void 0 : cervixItem.range) || [0, 10];
+      const spaceValue = (cervixItem == null ? void 0 : cervixItem.spaceValue) || 1;
+      return endY.value - max * spaceValue * yCellHeight.value;
+    });
+    const endY = computed(() => {
+      const { height } = props.data;
+      return height - yCellHeight.value;
+    });
+    const startTime = computed(() => new Date(props.data.xAxis.time.startTime).getTime());
+    const timeXCell = computed(() => 1 * 60 * 60 * 1e3 / xCellWidth.value);
+    const cervixYCell = computed(() => {
+      const { scaleValues } = props.data;
+      const cervixItem = scaleValues.find((item) => item.key === "cervix");
+      return ((cervixItem == null ? void 0 : cervixItem.spaceValue) || 1) / yCellHeight.value;
+    });
+    const FHRYCell = computed(() => {
+      const { scaleValues } = props.data;
+      const cervixItem = scaleValues.find((item) => item.key === "FHR");
+      return ((cervixItem == null ? void 0 : cervixItem.spaceValue) || 10) / yCellHeight.value;
+    });
+    const fetalPresentationYCell = computed(() => {
+      const { scaleValues } = props.data;
+      const cervixItem = scaleValues.find((item) => item.key === "fetalPresentation");
+      return ((cervixItem == null ? void 0 : cervixItem.spaceValue) || 1) / yCellHeight.value;
+    });
+    const event = computed(() => {
+      var _a;
+      return ((_a = props.data.grid) == null ? void 0 : _a.event) || { selectable: true, evented: true, hovered: true };
+    });
+    let select = ref();
+    const canvasRef = ref(null);
+    let canvas = ref();
+    const propItems = reactive({
+      canvasWidth: props.data.width,
+      canvasHeight: props.data.height,
+      borderStyle: { ...defaultBorderStyle, ...props.data.borderStyle },
+      selectionStyle: props.data.selectionStyle || {},
+      grid: props.data.grid,
+      originX: originX.value,
+      endX: endX.value,
+      originY: originY.value,
+      endY: endY.value,
+      xCellWidth: xCellWidth.value,
+      yCellHeight: yCellHeight.value,
+      gridXNumber: gridXNumber.value,
+      gridYNumber: gridYNumber.value,
+      xAxis: props.data.xAxis,
+      leftScales: leftScales.value,
+      rightScales: rightScales.value,
+      leftAddAreaWidth,
+      rightAddAreaWidth: rightAddAreaWidth.value,
+      startTime: startTime.value,
+      timeXCell: timeXCell.value,
+      cervixYCell: cervixYCell.value,
+      FHRYCell: FHRYCell.value,
+      fetalPresentationYCell: fetalPresentationYCell.value,
+      scaleValues: props.data.scaleValues,
+      event: event.value,
+      originYCervix: originYCervix.value
+    });
+    const { pointTipProps, pointMenuProps, clickMenu } = useBirthProcess(canvas, propItems, emits);
+    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);
+    });
+    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 BirthProcessChart = /* @__PURE__ */ _export_sfc(_sfc_main, [["__file", "BirthProcessChart.vue"]]);
+
+export { BirthProcessChart as default };