forked from alibaba/lowcode-materials
-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathmeta.ts
More file actions
92 lines (92 loc) · 2.94 KB
/
meta.ts
File metadata and controls
92 lines (92 loc) · 2.94 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
module.exports = {
group: '原子组件',
componentName: 'ResponsiveGrid.Cell',
title: '布局容器 Cell',
docUrl: '',
screenshot: '',
npm: {
package: '@alifd/next',
version: '{{version}}',
exportName: 'ResponsiveGrid',
main: '',
destructuring: true,
subName: 'Cell',
},
props: [
{
name: 'colSpan',
propType: 'number',
description: '横向,占据几列',
},
{
name: 'rowSpan',
propType: 'number',
description: '纵向,占据几行',
},
{
name: 'style',
propType: 'object',
},
],
configure: {
component: {
isContainer: true,
},
advanced: {
// 这个函数返回false会报错...
getResizingHandlers: (node) => {
const currentNodeIndex = node.index;
const parent = node.parent;
if (!parent) return [];
let layout = parent.getPropValue('layout');
if (!layout) return [];
layout = layout.split(':').map((item) => parseInt(item, 10));
// 最后一个节点不允许拖拽
if (currentNodeIndex >= layout.length - 1) {
return [];
}
return ['e'];
},
callbacks: {
onResizeStart: (e, currentNode) => {
const { trigger } = e;
let nodeIndex = currentNode.index;
let startLayout = currentNode.parent.getPropValue('layout');
startLayout = startLayout.split(':').map((item) => parseInt(item, 10));
let eachWidth = currentNode.getRect().width / startLayout[nodeIndex];
// 暴露到currentNode节点上供onResize回调使用
currentNode.nodeIndex = nodeIndex;
currentNode.startLayout = startLayout;
currentNode.eachWidth = eachWidth;
},
onResize: (e, currentNode) => {
const { trigger, deltaX, deltaY } = e;
const { nodeIndex, startLayout, eachWidth } = currentNode;
let moveColumn = Math.round(deltaX / eachWidth);
const layout = [...startLayout]; // 浅拷贝
if (moveColumn > 0) {
moveColumn = Math.min(moveColumn, layout[nodeIndex + 1] - 1);
} else {
moveColumn = -Math.min(-moveColumn, layout[nodeIndex] - 1);
}
layout[nodeIndex] += moveColumn;
layout[nodeIndex + 1] -= moveColumn;
// 获取下一个节点实例
let nextNode = currentNode.parent.children.filter((c, index) => {
return index === nodeIndex + 1;
});
// 为当前节点设置colSpan属性
currentNode.setPropValue('colSpan', layout[nodeIndex]);
// 为nextChild节点设置colSpan属性
if (nextNode && nextNode[0]) {
nextNode[0].setPropValue('colSpan', layout[nodeIndex + 1]);
}
// 为父容器设置layout属性
currentNode.parent.setPropValue('layout', layout.join(':'));
},
},
},
},
icon: '',
category: '布局容器类',
};