cnhis-design-vue 3.1.10 → 3.1.11-beta.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/.versionrc.json +32 -0
- package/es/packages/big-table/src/BigTable.vue.d.ts +16 -1
- package/es/packages/big-table/src/BigTable.vue_vue_type_script_setup_true_lang.js +2 -4
- package/es/packages/big-table/src/components/edit-form/edit-select.js +3 -1
- package/es/packages/fabric-chart/index.d.ts +1 -32
- package/es/packages/fabric-chart/src/FabricChart.vue.d.ts +1 -33
- package/es/packages/fabric-chart/src/FabricChart.vue_vue_type_script_setup_true_lang.js +2 -131
- package/es/packages/fabric-chart/src/hooks/useCenter.d.ts +0 -4
- package/es/packages/fabric-chart/src/hooks/useCenter.js +0 -6
- package/es/packages/fabric-chart/src/hooks/useDraw.d.ts +0 -42
- package/es/packages/fabric-chart/src/hooks/useDraw.js +0 -75
- package/es/packages/fabric-chart/src/hooks/useGrid.d.ts +0 -4
- package/es/packages/fabric-chart/src/hooks/useGrid.js +0 -44
- package/es/packages/fabric-chart/src/hooks/useLeft.d.ts +0 -4
- package/es/packages/fabric-chart/src/hooks/useLeft.js +0 -65
- package/es/packages/fabric-chart/src/hooks/useRight.d.ts +0 -0
- package/es/packages/fabric-chart/src/hooks/useRight.js +1 -0
- package/es/packages/fabric-chart/src/hooks/useTop.d.ts +0 -4
- package/es/packages/fabric-chart/src/hooks/useTop.js +0 -123
- package/es/packages/fabric-chart/src/interface.d.ts +0 -88
- package/es/packages/fabric-chart/src/interface.js +0 -3
- package/es/packages/form-render/index.d.ts +724 -3
- package/es/packages/form-render/index.js +2 -0
- package/es/packages/form-render/src/FormRender.vue.d.ts +724 -3
- package/es/packages/form-render/src/FormRender.vue_vue_type_script_setup_true_lang.js +90 -58
- package/es/packages/form-render/src/components/index.d.ts +0 -16
- package/es/packages/form-render/src/components/index.js +1 -16
- package/es/packages/form-render/src/components/{cascader.d.ts → renderer/cascader.d.ts} +2 -2
- package/es/packages/form-render/src/components/{cascader.js → renderer/cascader.js} +3 -3
- package/es/packages/form-render/src/components/{checkbox.d.ts → renderer/checkbox.d.ts} +1 -1
- package/es/packages/form-render/src/components/{checkbox.js → renderer/checkbox.js} +1 -1
- package/es/packages/form-render/src/components/{combination.d.ts → renderer/combination.d.ts} +1 -1
- package/es/packages/form-render/src/components/{combination.js → renderer/combination.js} +3 -3
- package/es/packages/form-render/src/components/{complex.d.ts → renderer/complex.d.ts} +0 -0
- package/es/packages/form-render/src/components/{complex.js → renderer/complex.js} +1 -1
- package/es/packages/form-render/src/components/{date.d.ts → renderer/date.d.ts} +0 -0
- package/es/packages/form-render/src/components/{date.js → renderer/date.js} +0 -0
- package/es/packages/form-render/src/components/{formItem.d.ts → renderer/formItem.d.ts} +0 -0
- package/es/packages/form-render/src/components/{formItem.js → renderer/formItem.js} +0 -0
- package/es/packages/form-render/src/components/renderer/index.d.ts +16 -0
- package/es/packages/form-render/src/components/renderer/index.js +16 -0
- package/es/packages/form-render/src/components/{input.d.ts → renderer/input.d.ts} +0 -0
- package/es/packages/form-render/src/components/{input.js → renderer/input.js} +1 -1
- package/es/packages/form-render/src/components/{inputGroup.d.ts → renderer/inputGroup.d.ts} +0 -0
- package/es/packages/form-render/src/components/{inputGroup.js → renderer/inputGroup.js} +0 -0
- package/es/packages/form-render/src/components/{inputNumber.d.ts → renderer/inputNumber.d.ts} +0 -0
- package/es/packages/form-render/src/components/{inputNumber.js → renderer/inputNumber.js} +1 -1
- package/es/packages/form-render/src/components/{labelSelect.d.ts → renderer/labelSelect.d.ts} +0 -0
- package/es/packages/form-render/src/components/{labelSelect.js → renderer/labelSelect.js} +0 -0
- package/es/packages/form-render/src/components/{collapse.d.ts → renderer/linebar.d.ts} +1 -1
- package/es/packages/form-render/src/components/{collapse.js → renderer/linebar.js} +17 -8
- package/es/packages/form-render/src/components/{radio.d.ts → renderer/radio.d.ts} +1 -1
- package/es/packages/form-render/src/components/{radio.js → renderer/radio.js} +1 -1
- package/es/packages/form-render/src/components/{select.d.ts → renderer/select.d.ts} +2 -2
- package/es/packages/form-render/src/components/{select.js → renderer/select.js} +3 -3
- package/es/packages/form-render/src/components/{slider.d.ts → renderer/slider.d.ts} +0 -0
- package/es/packages/form-render/src/components/{slider.js → renderer/slider.js} +1 -1
- package/es/packages/form-render/src/components/{switch.d.ts → renderer/switch.d.ts} +0 -0
- package/es/packages/form-render/src/components/{switch.js → renderer/switch.js} +1 -1
- package/es/packages/form-render/src/components/{textarea.d.ts → renderer/textarea.d.ts} +0 -0
- package/es/packages/form-render/src/components/{textarea.js → renderer/textarea.js} +1 -1
- package/es/packages/form-render/src/constants/index.d.ts +1 -0
- package/es/packages/form-render/src/constants/index.js +2 -1
- package/es/packages/form-render/src/hooks/index.d.ts +2 -0
- package/es/packages/form-render/src/hooks/index.js +2 -0
- package/es/packages/form-render/src/hooks/useAnchor.d.ts +16 -0
- package/es/packages/form-render/src/hooks/useAnchor.js +81 -0
- package/es/packages/form-render/src/hooks/useAsyncQueue.js +1 -2
- package/es/packages/form-render/src/hooks/useChangeContext.d.ts +1 -1
- package/es/packages/form-render/src/hooks/useFieldList2Schema.d.ts +1 -1
- package/es/packages/form-render/src/hooks/useFieldList2Schema.js +11 -11
- package/es/packages/form-render/src/hooks/useFormContext.d.ts +8 -0
- package/es/packages/form-render/src/hooks/useFormContext.js +26 -0
- package/es/packages/form-render/src/hooks/useFormItemDeps.d.ts +1 -1
- package/es/packages/form-render/src/hooks/useFormItemDeps.js +2 -2
- package/es/packages/form-render/src/hooks/useInitialData.d.ts +1 -1
- package/es/packages/form-render/src/types/index.d.ts +1 -0
- package/es/packages/form-render/src/utils/index.d.ts +2 -0
- package/es/packages/form-render/src/utils/index.js +10 -1
- package/es/packages/form-render/style/index.css +6 -3
- package/es/packages/index.css +6 -3
- package/es/packages/index.js +2 -0
- package/es/packages/scale-view/src/ScaleView.vue_vue_type_script_setup_true_lang.js +8 -3
- package/es/packages/scale-view/src/hooks/scaleview-init.js +1 -3
- package/es/packages/scale-view/src/hooks/scaleview-validate.js +2 -2
- package/es/packages/select-person/index.d.ts +1 -1
- package/es/packages/select-person/src/SelectPerson.vue.d.ts +6 -6
- package/es/packages/select-person/src/SelectPerson.vue_vue_type_script_setup_true_lang.js +14 -3
- package/es/src/utils/anime.d.ts +1 -1
- package/es/src/utils/anime.js +4 -1
- package/package.json +1 -1
- package/es/packages/fabric-chart/src/utils/index.d.ts +0 -2
- package/es/packages/fabric-chart/src/utils/index.js +0 -15334
package/.versionrc.json
ADDED
|
@@ -0,0 +1,32 @@
|
|
|
1
|
+
{
|
|
2
|
+
"infile": "examples/views/0-log/index.md",
|
|
3
|
+
"changelogHeader": "Cnhis design 业务组件库更新日志",
|
|
4
|
+
"types": [
|
|
5
|
+
{
|
|
6
|
+
"type": "feat",
|
|
7
|
+
"section": "✨Features | 新功能"
|
|
8
|
+
},
|
|
9
|
+
{
|
|
10
|
+
"type": "fix",
|
|
11
|
+
"section": "🐞Bug Fixes | Bug修复"
|
|
12
|
+
},
|
|
13
|
+
{
|
|
14
|
+
"type": "docs",
|
|
15
|
+
"section": "✏️ Documentation | 文档"
|
|
16
|
+
},
|
|
17
|
+
{
|
|
18
|
+
"type": "style",
|
|
19
|
+
"section": "💄 Styles | 样式"
|
|
20
|
+
},
|
|
21
|
+
{
|
|
22
|
+
"type": "perf",
|
|
23
|
+
"section": "⚡️ Performance Improvements | 性能优化"
|
|
24
|
+
},
|
|
25
|
+
{
|
|
26
|
+
"type": "test",
|
|
27
|
+
"section": "✅ Tests | 测试"
|
|
28
|
+
}
|
|
29
|
+
]
|
|
30
|
+
}
|
|
31
|
+
|
|
32
|
+
|
|
@@ -1385,7 +1385,22 @@ declare const _default: import("vue").DefineComponent<{
|
|
|
1385
1385
|
arrow: {
|
|
1386
1386
|
type: import("vue").PropType<boolean | undefined>;
|
|
1387
1387
|
default: undefined;
|
|
1388
|
-
};
|
|
1388
|
+
}; /**
|
|
1389
|
+
* 针对 bigTable 的设置列
|
|
1390
|
+
* type: 列的类型
|
|
1391
|
+
* field: 列字段名(注:属性层级越深,渲染性能将直线下降)
|
|
1392
|
+
* title: 列标题(支持开启国际化)
|
|
1393
|
+
* width: 列宽度(如果为空则均匀分配剩余宽度,如果全部列固定了,可能会存在宽屏下不会铺满,可以配合 "%" 或者 "min-width" 布局)
|
|
1394
|
+
* minWidth: 最小列宽度;会自动将剩余空间按比例分配
|
|
1395
|
+
* resizable: 列是否允许拖动列宽调整大小
|
|
1396
|
+
* visible: 列是否显示
|
|
1397
|
+
* fixed: 将列固定在左侧或者右侧(注意:固定列应该放在左右两侧的位置)
|
|
1398
|
+
* align: 列对齐方式
|
|
1399
|
+
* headerAlign: 表头列的对齐方式
|
|
1400
|
+
* footerAlign: 表尾列的对齐方式
|
|
1401
|
+
* formatter: 格式化显示内容 Function({cellValue, row, column})
|
|
1402
|
+
* sortable: 是否允许列排序
|
|
1403
|
+
*/
|
|
1389
1404
|
minWidth: NumberConstructor;
|
|
1390
1405
|
maxWidth: NumberConstructor;
|
|
1391
1406
|
}, {
|
|
@@ -2225,6 +2225,7 @@ var script = /* @__PURE__ */ defineComponent({
|
|
|
2225
2225
|
"tree-config": unref(treeConfig),
|
|
2226
2226
|
"row-id": unref(handleRowId),
|
|
2227
2227
|
"row-class-name": getRowClassName,
|
|
2228
|
+
"cell-class-name": _ctx.columnConfig.cellClassName || null,
|
|
2228
2229
|
"row-config": state.rowConfig,
|
|
2229
2230
|
"show-footer": _ctx.showFooter && !props.isInlineOperating,
|
|
2230
2231
|
"footer-method": footerMethod,
|
|
@@ -2251,9 +2252,6 @@ var script = /* @__PURE__ */ defineComponent({
|
|
|
2251
2252
|
reserve: true,
|
|
2252
2253
|
highlight: true
|
|
2253
2254
|
},
|
|
2254
|
-
"scroll-x": {
|
|
2255
|
-
enabled: false
|
|
2256
|
-
},
|
|
2257
2255
|
"scroll-y": {
|
|
2258
2256
|
gt: 50
|
|
2259
2257
|
},
|
|
@@ -2330,7 +2328,7 @@ var script = /* @__PURE__ */ defineComponent({
|
|
|
2330
2328
|
}
|
|
2331
2329
|
})]),
|
|
2332
2330
|
_: 3
|
|
2333
|
-
}, 16, ["seq-config", "tree-config", "row-id", "row-config", "show-footer", "checkbox-config", "row-style", "edit-config", "expand-config", "keyboard-config", "edit-rules", "onScroll", "onKeydown"]), createCommentVNode(" `${refreshRow}\u6761\u66F4\u65B0` "), withDirectives(createElementVNode("div", {
|
|
2331
|
+
}, 16, ["seq-config", "tree-config", "row-id", "cell-class-name", "row-config", "show-footer", "checkbox-config", "row-style", "edit-config", "expand-config", "keyboard-config", "edit-rules", "onScroll", "onKeydown"]), createCommentVNode(" `${refreshRow}\u6761\u66F4\u65B0` "), withDirectives(createElementVNode("div", {
|
|
2334
2332
|
class: "refresh",
|
|
2335
2333
|
onClick: hanldeClickRefresh
|
|
2336
2334
|
}, [createVNode(unref(NIcon), {
|
|
@@ -1,34 +1,3 @@
|
|
|
1
1
|
import { SFCWithInstall } from '../../../es/src/types';
|
|
2
|
-
declare const FabricChart: SFCWithInstall<import("vue").DefineComponent<{
|
|
3
|
-
data: {
|
|
4
|
-
type: null;
|
|
5
|
-
required: true;
|
|
6
|
-
};
|
|
7
|
-
}, {
|
|
8
|
-
props: {
|
|
9
|
-
data: import("./src/interface").IData;
|
|
10
|
-
};
|
|
11
|
-
canvasRef: any;
|
|
12
|
-
canvas: import("vue").Ref<any>;
|
|
13
|
-
gridXNumber: import("vue").ComputedRef<number>;
|
|
14
|
-
gridYNumber: import("vue").ComputedRef<number>;
|
|
15
|
-
endX: import("vue").ComputedRef<number>;
|
|
16
|
-
originX: import("vue").ComputedRef<number>;
|
|
17
|
-
endY: import("vue").ComputedRef<number>;
|
|
18
|
-
originY: import("vue").ComputedRef<number>;
|
|
19
|
-
xCellWidth: import("vue").ComputedRef<number>;
|
|
20
|
-
yCellHeight: import("vue").ComputedRef<number>;
|
|
21
|
-
xScaleList: import("vue").ComputedRef<number[]>;
|
|
22
|
-
xScaleCell: import("vue").ComputedRef<number>;
|
|
23
|
-
breatheYCell: import("vue").ComputedRef<number>;
|
|
24
|
-
pulseYCell: import("vue").ComputedRef<number>;
|
|
25
|
-
centigradeYCell: import("vue").ComputedRef<number>;
|
|
26
|
-
event: import("vue").ComputedRef<any>;
|
|
27
|
-
propItems: any;
|
|
28
|
-
}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, Record<string, any>, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
|
|
29
|
-
data: {
|
|
30
|
-
type: null;
|
|
31
|
-
required: true;
|
|
32
|
-
};
|
|
33
|
-
}>>, {}>>;
|
|
2
|
+
declare const FabricChart: SFCWithInstall<import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, import("vue").EmitsOptions, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{}>>, {}>>;
|
|
34
3
|
export default FabricChart;
|
|
@@ -1,34 +1,2 @@
|
|
|
1
|
-
import {
|
|
2
|
-
declare const _default: import("vue").DefineComponent<{
|
|
3
|
-
data: {
|
|
4
|
-
type: null;
|
|
5
|
-
required: true;
|
|
6
|
-
};
|
|
7
|
-
}, {
|
|
8
|
-
props: {
|
|
9
|
-
data: IData;
|
|
10
|
-
};
|
|
11
|
-
canvasRef: any;
|
|
12
|
-
canvas: import("vue").Ref<any>;
|
|
13
|
-
gridXNumber: import("vue").ComputedRef<number>;
|
|
14
|
-
gridYNumber: import("vue").ComputedRef<number>;
|
|
15
|
-
endX: import("vue").ComputedRef<number>;
|
|
16
|
-
originX: import("vue").ComputedRef<number>;
|
|
17
|
-
endY: import("vue").ComputedRef<number>;
|
|
18
|
-
originY: import("vue").ComputedRef<number>;
|
|
19
|
-
xCellWidth: import("vue").ComputedRef<number>;
|
|
20
|
-
yCellHeight: import("vue").ComputedRef<number>;
|
|
21
|
-
xScaleList: import("vue").ComputedRef<number[]>;
|
|
22
|
-
xScaleCell: import("vue").ComputedRef<number>;
|
|
23
|
-
breatheYCell: import("vue").ComputedRef<number>;
|
|
24
|
-
pulseYCell: import("vue").ComputedRef<number>;
|
|
25
|
-
centigradeYCell: import("vue").ComputedRef<number>;
|
|
26
|
-
event: import("vue").ComputedRef<any>;
|
|
27
|
-
propItems: any;
|
|
28
|
-
}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, Record<string, any>, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
|
|
29
|
-
data: {
|
|
30
|
-
type: null;
|
|
31
|
-
required: true;
|
|
32
|
-
};
|
|
33
|
-
}>>, {}>;
|
|
1
|
+
declare const _default: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, import("vue").EmitsOptions, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{}>>, {}>;
|
|
34
2
|
export default _default;
|
|
@@ -1,141 +1,12 @@
|
|
|
1
|
-
import { defineComponent,
|
|
2
|
-
import { fabric } from './utils/index.js';
|
|
3
|
-
import { InjectionCanvas, InjectionPropItems } from './interface.js';
|
|
4
|
-
import { defaultBorderStyle } from './hooks/useDraw.js';
|
|
5
|
-
import useTop from './hooks/useTop.js';
|
|
6
|
-
import useCenter from './hooks/useCenter.js';
|
|
7
|
-
import useLeft from './hooks/useLeft.js';
|
|
1
|
+
import { defineComponent, openBlock, createElementBlock, createCommentVNode } from 'vue';
|
|
8
2
|
|
|
9
3
|
const _hoisted_1 = { class: "c-fabric-chart" };
|
|
10
4
|
var script = /* @__PURE__ */ defineComponent({
|
|
11
5
|
__name: "FabricChart",
|
|
12
|
-
props: {
|
|
13
|
-
data: { type: null, required: true }
|
|
14
|
-
},
|
|
15
6
|
setup(__props) {
|
|
16
|
-
const props = __props;
|
|
17
|
-
const canvasRef = ref(null);
|
|
18
|
-
let canvas = ref();
|
|
19
|
-
const gridXNumber = computed(() => {
|
|
20
|
-
const { grid } = props.data;
|
|
21
|
-
return grid.mainXCell * grid.subXCell;
|
|
22
|
-
});
|
|
23
|
-
const gridYNumber = computed(() => {
|
|
24
|
-
const { grid } = props.data;
|
|
25
|
-
return grid.mainYCell * grid.subYCell;
|
|
26
|
-
});
|
|
27
|
-
const endX = computed(() => {
|
|
28
|
-
const { width, right = null } = props.data;
|
|
29
|
-
if (!right)
|
|
30
|
-
return width;
|
|
31
|
-
const endWidth = right.width || 50;
|
|
32
|
-
return width - endWidth;
|
|
33
|
-
});
|
|
34
|
-
const originX = computed(() => {
|
|
35
|
-
const { top } = props.data;
|
|
36
|
-
const originX2 = top.titleWidth;
|
|
37
|
-
const residue = (endX.value - originX2) % gridXNumber.value;
|
|
38
|
-
return originX2 + residue;
|
|
39
|
-
});
|
|
40
|
-
const endY = computed(() => {
|
|
41
|
-
const { bottom = null, height } = props.data;
|
|
42
|
-
if (!bottom)
|
|
43
|
-
return height;
|
|
44
|
-
const endHeight = height || 30;
|
|
45
|
-
return height - endHeight;
|
|
46
|
-
});
|
|
47
|
-
const originY = computed(() => {
|
|
48
|
-
var _a;
|
|
49
|
-
const { top } = props.data;
|
|
50
|
-
const dateHeight = ((_a = top.date) == null ? void 0 : _a.height) || 0;
|
|
51
|
-
const dayHeight = top.dayHeight || 0;
|
|
52
|
-
const xScaleHeight = top.xScalevalue.height || 15;
|
|
53
|
-
const topHeight = dateHeight + dayHeight + xScaleHeight;
|
|
54
|
-
const residue = (endY.value - topHeight) % gridYNumber.value;
|
|
55
|
-
return topHeight + residue;
|
|
56
|
-
});
|
|
57
|
-
const xCellWidth = computed(() => {
|
|
58
|
-
return (endX.value - originX.value) / gridXNumber.value;
|
|
59
|
-
});
|
|
60
|
-
const yCellHeight = computed(() => {
|
|
61
|
-
return (endY.value - originY.value) / gridYNumber.value;
|
|
62
|
-
});
|
|
63
|
-
const xScaleList = computed(() => {
|
|
64
|
-
const { top } = props.data;
|
|
65
|
-
const dateList = top.date.list;
|
|
66
|
-
const dayList = top.xScalevalue.list;
|
|
67
|
-
const timeList = dateList.map((item) => {
|
|
68
|
-
return dayList.map((v) => {
|
|
69
|
-
return new Date(`${item} ${v}:00`).getTime();
|
|
70
|
-
});
|
|
71
|
-
});
|
|
72
|
-
return timeList.flat();
|
|
73
|
-
});
|
|
74
|
-
const xScaleCell = computed(() => {
|
|
75
|
-
return xScaleList.value[1] - xScaleList.value[0];
|
|
76
|
-
});
|
|
77
|
-
const breatheYCell = computed(() => {
|
|
78
|
-
const { yScaleValue, spaceGridNumber = 5 } = props.data.left;
|
|
79
|
-
const list = yScaleValue.find((v) => v.type === "breathe").list;
|
|
80
|
-
return list ? yCellHeight.value / ((parseInt(list[1]) - parseInt(list[0])) / spaceGridNumber) : 0;
|
|
81
|
-
});
|
|
82
|
-
const pulseYCell = computed(() => {
|
|
83
|
-
const { yScaleValue, spaceGridNumber = 5 } = props.data.left;
|
|
84
|
-
const list = yScaleValue.find((v) => v.type === "pulse").list;
|
|
85
|
-
return yCellHeight.value / ((parseInt(list[1]) - parseInt(list[0])) / spaceGridNumber);
|
|
86
|
-
});
|
|
87
|
-
const centigradeYCell = computed(() => {
|
|
88
|
-
const { yScaleValue, spaceGridNumber = 5 } = props.data.left;
|
|
89
|
-
const list = yScaleValue.find((v) => v.type === "centigrade").list;
|
|
90
|
-
return yCellHeight.value / ((parseInt(list[1]) - parseInt(list[0])) / spaceGridNumber);
|
|
91
|
-
});
|
|
92
|
-
const event = computed(() => {
|
|
93
|
-
var _a;
|
|
94
|
-
return ((_a = props.data.grid) == null ? void 0 : _a.event) || { selectable: true, evented: true };
|
|
95
|
-
});
|
|
96
|
-
const propItems = reactive({
|
|
97
|
-
canvasWidth: props.data.width,
|
|
98
|
-
canvasHeight: props.data.height,
|
|
99
|
-
borderStyle: props.data.borderStyle || defaultBorderStyle,
|
|
100
|
-
grid: props.data.grid,
|
|
101
|
-
top: props.data.top,
|
|
102
|
-
left: props.data.left,
|
|
103
|
-
gridXNumber: gridXNumber.value,
|
|
104
|
-
gridYNumber: gridYNumber.value,
|
|
105
|
-
originX: originX.value,
|
|
106
|
-
originY: originY.value,
|
|
107
|
-
endX: endX.value,
|
|
108
|
-
endY: endY.value,
|
|
109
|
-
xCellWidth: xCellWidth.value,
|
|
110
|
-
yCellHeight: yCellHeight.value,
|
|
111
|
-
xScaleList: xScaleList.value,
|
|
112
|
-
xScaleCell: xScaleCell.value,
|
|
113
|
-
breatheYCell: breatheYCell.value,
|
|
114
|
-
pulseYCell: pulseYCell.value,
|
|
115
|
-
centigradeYCell: centigradeYCell.value,
|
|
116
|
-
event: event.value
|
|
117
|
-
});
|
|
118
|
-
provide(InjectionCanvas, canvas);
|
|
119
|
-
provide(InjectionPropItems, propItems);
|
|
120
|
-
useTop(canvas, propItems);
|
|
121
|
-
useCenter(canvas, propItems);
|
|
122
|
-
useLeft(canvas, propItems);
|
|
123
|
-
onMounted(() => {
|
|
124
|
-
canvas.value = new fabric.Canvas(canvasRef.value, {
|
|
125
|
-
width: propItems.canvasWidth,
|
|
126
|
-
height: propItems.canvasHeight,
|
|
127
|
-
backgroundColor: "#fff",
|
|
128
|
-
selection: false,
|
|
129
|
-
containerClass: "c-fabric-canvas-container",
|
|
130
|
-
fireRightClick: true
|
|
131
|
-
});
|
|
132
|
-
});
|
|
133
7
|
return (_ctx, _cache) => {
|
|
134
8
|
return openBlock(), createElementBlock("div", _hoisted_1, [
|
|
135
|
-
|
|
136
|
-
ref_key: "canvasRef",
|
|
137
|
-
ref: canvasRef
|
|
138
|
-
}, null, 512)
|
|
9
|
+
createCommentVNode(' <canvas ref="canvasRef"></canvas> ')
|
|
139
10
|
]);
|
|
140
11
|
};
|
|
141
12
|
}
|
|
@@ -1,42 +0,0 @@
|
|
|
1
|
-
import { fabric } from '../utils';
|
|
2
|
-
import { ILineOptions, ITextOptions } from '../interface';
|
|
3
|
-
export declare const defaultStyle: {
|
|
4
|
-
evented: boolean;
|
|
5
|
-
selectable: boolean;
|
|
6
|
-
};
|
|
7
|
-
export declare const defaultBorderStyle: {
|
|
8
|
-
evented: boolean;
|
|
9
|
-
selectable: boolean;
|
|
10
|
-
stroke: string;
|
|
11
|
-
strokeWidth: number;
|
|
12
|
-
};
|
|
13
|
-
export declare const defaultLineStyle: {
|
|
14
|
-
evented: boolean;
|
|
15
|
-
selectable: boolean;
|
|
16
|
-
stroke: string;
|
|
17
|
-
strokeWidth: number;
|
|
18
|
-
strokeDashArray: number[];
|
|
19
|
-
};
|
|
20
|
-
export declare const defaultRectStyle: {
|
|
21
|
-
evented: boolean;
|
|
22
|
-
selectable: boolean;
|
|
23
|
-
fill: string;
|
|
24
|
-
stroke: string;
|
|
25
|
-
strokeWidth: number;
|
|
26
|
-
originX: string;
|
|
27
|
-
originY: string;
|
|
28
|
-
};
|
|
29
|
-
export declare const defaultTextStyle: {
|
|
30
|
-
evented: boolean;
|
|
31
|
-
selectable: boolean;
|
|
32
|
-
fontFamily: string;
|
|
33
|
-
fontSize: number;
|
|
34
|
-
fill: string;
|
|
35
|
-
centeredRotation: boolean;
|
|
36
|
-
originX: string;
|
|
37
|
-
originY: string;
|
|
38
|
-
lineHeight: number;
|
|
39
|
-
};
|
|
40
|
-
export declare function drawLine(points: number[], style: Partial<ILineOptions>): fabric.Line;
|
|
41
|
-
export declare function drawTextGroup(rectStyle: Partial<fabric.IRectOptions>, fontStyle: Partial<ITextOptions>, groupStyle: Partial<fabric.IGroupOptions>): fabric.Group;
|
|
42
|
-
export declare function drawPoint(type: string, style: any): fabric.Triangle | fabric.Circle | undefined;
|
|
@@ -1,76 +1 @@
|
|
|
1
|
-
import { fabric } from '../utils/index.js';
|
|
2
1
|
|
|
3
|
-
const defaultStyle = {
|
|
4
|
-
evented: false,
|
|
5
|
-
selectable: false
|
|
6
|
-
};
|
|
7
|
-
const defaultBorderStyle = {
|
|
8
|
-
stroke: "#999",
|
|
9
|
-
strokeWidth: 1,
|
|
10
|
-
...defaultStyle
|
|
11
|
-
};
|
|
12
|
-
const defaultLineStyle = {
|
|
13
|
-
stroke: "#000",
|
|
14
|
-
strokeWidth: 1,
|
|
15
|
-
strokeDashArray: [0, 0],
|
|
16
|
-
...defaultStyle
|
|
17
|
-
};
|
|
18
|
-
const defaultRectStyle = {
|
|
19
|
-
fill: "transparent",
|
|
20
|
-
stroke: "#999",
|
|
21
|
-
strokeWidth: 1,
|
|
22
|
-
originX: "center",
|
|
23
|
-
originY: "center",
|
|
24
|
-
...defaultStyle
|
|
25
|
-
};
|
|
26
|
-
const defaultTextStyle = {
|
|
27
|
-
fontFamily: "\u5FAE\u8F6F\u96C5\u9ED1",
|
|
28
|
-
fontSize: 12,
|
|
29
|
-
fill: "#000",
|
|
30
|
-
centeredRotation: true,
|
|
31
|
-
originX: "center",
|
|
32
|
-
originY: "center",
|
|
33
|
-
lineHeight: 1,
|
|
34
|
-
...defaultStyle
|
|
35
|
-
};
|
|
36
|
-
function drawLine(points, style) {
|
|
37
|
-
return new fabric.Line(points, {
|
|
38
|
-
...defaultLineStyle,
|
|
39
|
-
...style
|
|
40
|
-
});
|
|
41
|
-
}
|
|
42
|
-
function drawTextGroup(rectStyle, fontStyle, groupStyle) {
|
|
43
|
-
const rect = new fabric.Rect({
|
|
44
|
-
...defaultRectStyle,
|
|
45
|
-
...rectStyle
|
|
46
|
-
});
|
|
47
|
-
const texts = new fabric.Text(String(fontStyle.value), {
|
|
48
|
-
...defaultTextStyle,
|
|
49
|
-
...fontStyle
|
|
50
|
-
});
|
|
51
|
-
return new fabric.Group([rect, texts], {
|
|
52
|
-
...groupStyle
|
|
53
|
-
});
|
|
54
|
-
}
|
|
55
|
-
function drawPoint(type, style) {
|
|
56
|
-
switch (type) {
|
|
57
|
-
case "triangle":
|
|
58
|
-
return new fabric.Triangle({
|
|
59
|
-
width: 20,
|
|
60
|
-
height: 20,
|
|
61
|
-
strokeWidth: 1,
|
|
62
|
-
scale: 1,
|
|
63
|
-
...style
|
|
64
|
-
});
|
|
65
|
-
case "circle":
|
|
66
|
-
return new fabric.Circle({
|
|
67
|
-
objectCaching: false,
|
|
68
|
-
strokeWidth: 1,
|
|
69
|
-
radius: 5,
|
|
70
|
-
scale: 1,
|
|
71
|
-
...style
|
|
72
|
-
});
|
|
73
|
-
}
|
|
74
|
-
}
|
|
75
|
-
|
|
76
|
-
export { defaultBorderStyle, defaultLineStyle, defaultRectStyle, defaultStyle, defaultTextStyle, drawLine, drawPoint, drawTextGroup };
|
|
@@ -1,45 +1 @@
|
|
|
1
|
-
import { onMounted, nextTick } from 'vue';
|
|
2
|
-
import { fabric } from '../utils/index.js';
|
|
3
|
-
import { drawLine } from './useDraw.js';
|
|
4
1
|
|
|
5
|
-
function useGrid(canvas, propItems) {
|
|
6
|
-
const { gridYNumber, originY, grid, originX, endX, xCellWidth, yCellHeight, gridXNumber, endY } = propItems;
|
|
7
|
-
const yList = [];
|
|
8
|
-
const xList = [];
|
|
9
|
-
for (let i = 0; i <= gridYNumber; i++) {
|
|
10
|
-
const y = originY + parseInt(String(yCellHeight * (gridYNumber - i)));
|
|
11
|
-
const style = i % grid.subYCell === 0 ? grid.mainLineStyle || {} : grid.subLineStyle || {};
|
|
12
|
-
yList.push(drawLine([originX, y, endX, y], {
|
|
13
|
-
id: i + "_" + new Date().getTime(),
|
|
14
|
-
...style
|
|
15
|
-
}));
|
|
16
|
-
}
|
|
17
|
-
for (let i = 0; i <= gridXNumber; i++) {
|
|
18
|
-
const x = originX + parseInt(String(xCellWidth * i));
|
|
19
|
-
let style;
|
|
20
|
-
style = i % grid.subXCell === 0 ? grid.mainLineStyle || {} : grid.subLineStyle || {};
|
|
21
|
-
if (i % grid.subSecondXCell === 0) {
|
|
22
|
-
style = grid.subSecondLineStyle || {};
|
|
23
|
-
}
|
|
24
|
-
if (i % grid.subXCell === 0) {
|
|
25
|
-
style = grid.mainLineStyle || {};
|
|
26
|
-
}
|
|
27
|
-
xList.push(drawLine([x, originY, x, endY], {
|
|
28
|
-
id: i + "_" + new Date().getTime(),
|
|
29
|
-
...style
|
|
30
|
-
}));
|
|
31
|
-
}
|
|
32
|
-
const group = new fabric.Group([...xList, ...yList], {
|
|
33
|
-
evented: false,
|
|
34
|
-
selectable: false
|
|
35
|
-
});
|
|
36
|
-
onMounted(() => {
|
|
37
|
-
nextTick(() => {
|
|
38
|
-
canvas.value.add(group);
|
|
39
|
-
canvas.value.sendToBack(group);
|
|
40
|
-
canvas.value.renderAll();
|
|
41
|
-
});
|
|
42
|
-
});
|
|
43
|
-
}
|
|
44
|
-
|
|
45
|
-
export { useGrid as default };
|
|
@@ -1,66 +1 @@
|
|
|
1
|
-
import { onMounted, nextTick } from 'vue';
|
|
2
|
-
import { fabric } from '../utils/index.js';
|
|
3
|
-
import { defaultTextStyle, defaultStyle, defaultRectStyle } from './useDraw.js';
|
|
4
1
|
|
|
5
|
-
function useLeft(canvas, propItems) {
|
|
6
|
-
const { originY, endY, originX, yCellHeight, borderStyle, left } = propItems;
|
|
7
|
-
function drawScaleValue() {
|
|
8
|
-
let groupList = [];
|
|
9
|
-
const column = left.yScaleValue.length;
|
|
10
|
-
const colWidth = originX / column;
|
|
11
|
-
const residue = originX % column;
|
|
12
|
-
const firstColWidth = colWidth + residue;
|
|
13
|
-
left.yScaleValue.forEach((item, index) => {
|
|
14
|
-
let list = [];
|
|
15
|
-
const rectWidth = index === 0 ? firstColWidth : colWidth;
|
|
16
|
-
const rectLeft = index === 0 ? 0 : firstColWidth + (index - 1) * colWidth;
|
|
17
|
-
const line = index > 0 ? new fabric.Line([rectLeft, originY, rectLeft, endY], {
|
|
18
|
-
...borderStyle
|
|
19
|
-
}) : null;
|
|
20
|
-
line && list.push(line);
|
|
21
|
-
const leftVal = rectLeft + rectWidth / 2;
|
|
22
|
-
const spaceGridNumber = left.spaceGridNumber || 5;
|
|
23
|
-
item.list.forEach((v, i) => {
|
|
24
|
-
const top = endY - i * yCellHeight * spaceGridNumber;
|
|
25
|
-
const text = new fabric.Text(String(v), {
|
|
26
|
-
...defaultTextStyle,
|
|
27
|
-
left: leftVal,
|
|
28
|
-
top: i === 0 ? top - 5 : top,
|
|
29
|
-
...item.style
|
|
30
|
-
});
|
|
31
|
-
list.push(text);
|
|
32
|
-
});
|
|
33
|
-
let title = item.name || "";
|
|
34
|
-
if (item.unit)
|
|
35
|
-
title += "\n" + item.unit;
|
|
36
|
-
title && list.push(new fabric.Text(String(title), {
|
|
37
|
-
...defaultTextStyle,
|
|
38
|
-
left: leftVal,
|
|
39
|
-
top: originY + yCellHeight * spaceGridNumber / 2,
|
|
40
|
-
textAlign: "center",
|
|
41
|
-
...item.style
|
|
42
|
-
}));
|
|
43
|
-
const group2 = new fabric.Group(list, defaultStyle);
|
|
44
|
-
groupList.push(group2);
|
|
45
|
-
});
|
|
46
|
-
groupList.push(new fabric.Rect({
|
|
47
|
-
...defaultStyle,
|
|
48
|
-
...defaultRectStyle,
|
|
49
|
-
width: originX,
|
|
50
|
-
height: endY - originY,
|
|
51
|
-
left: 0,
|
|
52
|
-
top: originY
|
|
53
|
-
}));
|
|
54
|
-
const group = groupList.length > 0 ? new fabric.Group([...groupList], { ...defaultStyle }) : null;
|
|
55
|
-
group && group.sendToBack();
|
|
56
|
-
group && canvas.value.add(group);
|
|
57
|
-
}
|
|
58
|
-
onMounted(() => {
|
|
59
|
-
nextTick(() => {
|
|
60
|
-
drawScaleValue();
|
|
61
|
-
canvas.value.renderAll();
|
|
62
|
-
});
|
|
63
|
-
});
|
|
64
|
-
}
|
|
65
|
-
|
|
66
|
-
export { useLeft as default };
|
|
File without changes
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
|