@cainiaofe/cn-ui-layout
Version:
- 安装 cone-cli ｜ [Cone-CLI 使用指引](https://alidocs.dingtalk.com/i/nodes/xdqZp24KneBJzvGM6XezJvyb7RA0Nr1E) - `tnpm i -g @alife/cone-cli@latest` - 安装依赖包 - `cone install` - 启动研发 - `cone start`
240 lines (233 loc) • 9.32 kB
JavaScript
import { BLOCK, SECTION } from "../../../../common/util/const";
import BLOCK_RESIZE_MAP from "./block-resize-map";
import { createBlockSnippet } from "../../../../common/manager/setter-snippet";
var parseFlaten2Tree = function parseFlaten2Tree(flaten, tree) {
if (flaten === void 0) {
flaten = [];
}
flaten.forEach(function (item) {
if (!tree[item.groupIndex]) {
tree[item.groupIndex] = [];
}
tree[item.groupIndex].push(item);
});
};
/**
* 一组（ span加和小于等于12 ）块，在遇到 resize 时候的处理行为
* @param {*} groupArr 在原数组上进行修改
* @param {*} blockNode 触发resize的节点
* @param {*} offset 偏移量，-2表示左2格，1表示右1格
* @returns
*/
var handleResize = function handleResize(groupArr, blockNode, offset) {
var changeIndex = groupArr.findIndex(function (item) {
return item.id === blockNode.schema.id;
});
var key = groupArr.map(function (item) {
return item.span;
}).join(',');
if (changeIndex < 0) {
return;
}
var spans = key.split(',').map(Number);
var afterGroupList = spans.map(function (numSpan, order) {
if (order === changeIndex) {
return numSpan + offset;
}
if (order === changeIndex + 1) {
return numSpan - offset;
}
return numSpan;
});
if (afterGroupList) {
afterGroupList.forEach(function (col, i) {
groupArr[i].span = +col;
});
}
};
/**
* 一组（ span加和小于等于12 ）块，在遇到切割时候的处理行为
* @param {*} groupArr 在原数组上进行修改
* @param {*} blockNode 触发 分割 的节点
* @param {*} groupIndex 当前所处理的数组，他们有共同的组序列号
* @returns
*/
var handleSplit = function handleSplit(groupArr, blockNode, groupIndex) {
var _BLOCK_RESIZE_MAP$key;
var changeIndex = groupArr.findIndex(function (item) {
return item.id === blockNode.schema.id;
});
var key = groupArr.map(function (item) {
return item.span;
}).join(',');
if (changeIndex < 0) {
return;
}
var subKey = changeIndex + "s";
var targetMap = BLOCK_RESIZE_MAP === null || BLOCK_RESIZE_MAP === void 0 ? void 0 : (_BLOCK_RESIZE_MAP$key = BLOCK_RESIZE_MAP[key]) === null || _BLOCK_RESIZE_MAP$key === void 0 ? void 0 : _BLOCK_RESIZE_MAP$key[subKey];
if (targetMap) {
var _blockNode$document, _blockNode$parent;
var originProps = blockNode.schema.props;
var blockSnippet = createBlockSnippet({
blockProps: originProps
});
var newNode = blockNode === null || blockNode === void 0 ? void 0 : (_blockNode$document = blockNode.document) === null || _blockNode$document === void 0 ? void 0 : _blockNode$document.createNode(blockSnippet);
newNode && ((_blockNode$parent = blockNode.parent) === null || _blockNode$parent === void 0 ? void 0 : _blockNode$parent.insertAfter(newNode, blockNode, false));
var newNodeSchema = [blockNode, newNode].map(function (item) {
return {
id: item === null || item === void 0 ? void 0 : item.id,
groupIndex: groupIndex
};
});
groupArr.splice(changeIndex, 1, newNodeSchema[0], newNodeSchema[1]);
targetMap.split(',').forEach(function (col, i) {
groupArr[i].span = +col;
});
}
};
/**
* 一组（ span加和小于等于12 ）块，在遇到删除时候的处理行为
* @param {*} afterTreeGroup 由于事件监听的是onNodeRemove, 所以对 delete 来说，这里已经是after的group了
* @param {*} afterFlatenGroup 在原数组上进行修改
* @param {*} blockNode 触发 删除 的节点
* @param {*} sectionNode 触发 删除 的节点属的Block
* @returns
*/
var handleDelete = function handleDelete(afterTreeGroup, afterFlatenGroup, blockNode, sectionNode) {
var treeMap = [];
parseFlaten2Tree(sectionNode.lastFlatenMap, treeMap);
treeMap.forEach(function (group) {
var _BLOCK_RESIZE_MAP$key2, _afterTreeGroup$group;
var groupIndex = group[0].groupIndex;
var changeIndex = group.findIndex(function (item) {
return item.id === blockNode.schema.id;
});
var key = group.map(function (item) {
return item.span;
}).join(',');
if (!(afterTreeGroup !== null && afterTreeGroup !== void 0 && afterTreeGroup[groupIndex])) {
return;
}
if (changeIndex < 0) {
afterFlatenGroup.push.apply(afterFlatenGroup, afterTreeGroup[groupIndex]);
return;
}
var subKey = changeIndex + "d";
var targetMap = BLOCK_RESIZE_MAP === null || BLOCK_RESIZE_MAP === void 0 ? void 0 : (_BLOCK_RESIZE_MAP$key2 = BLOCK_RESIZE_MAP[key]) === null || _BLOCK_RESIZE_MAP$key2 === void 0 ? void 0 : _BLOCK_RESIZE_MAP$key2[subKey];
var targetArray = targetMap === null || targetMap === void 0 ? void 0 : targetMap.split(',');
if (targetMap && ((_afterTreeGroup$group = afterTreeGroup[groupIndex]) === null || _afterTreeGroup$group === void 0 ? void 0 : _afterTreeGroup$group.length) >= targetArray.length) {
targetArray.forEach(function (col, i) {
afterTreeGroup[groupIndex][i].span = +col;
});
afterFlatenGroup.push.apply(afterFlatenGroup, afterTreeGroup[groupIndex]);
}
});
};
// currentBlock.lastFlatenMap
var findGroupIndex = function findGroupIndex(id, map) {
if (map === void 0) {
map = [];
}
var groupIndex = -1;
map.forEach(function (m) {
if (m.id === id) {
groupIndex = m.groupIndex;
}
});
return groupIndex;
};
/**
*
* @param {*} currentSection parent refresh 的模式下，只要求有parent
* @param {*} currentBlock child
* @param {Enum} type 'split' | 'delete' | 'resize' | 'refresh'
* @param {*} object 若是resize， offset表示移动的距离; node1, node2 表示新增之后的节点
*/
export var updateSpan = function updateSpan(_ref) {
var currentSection = _ref.parent,
currentBlock = _ref.child,
type = _ref.type,
_ref$offset = _ref.offset,
offset = _ref$offset === void 0 ? 0 : _ref$offset;
if (!(currentSection && currentSection.componentName === SECTION && (type === 'refresh' || currentBlock && currentBlock.componentName === BLOCK))) {
return;
}
var beforeFlatenGroup = [];
var children = currentSection.schema.children || [];
var childrenListSchema = Array.isArray(children) ? children : [children];
if (!childrenListSchema) {
// 把 SECTION 中的最后一个元素 BLOCK 删掉，意味着删掉 SECTION
currentSection.remove();
return;
}
var total = 0;
var groupIndex = 0;
childrenListSchema.forEach(function (c) {
var _c$props;
var item = {
id: c.id,
span: ((_c$props = c.props) === null || _c$props === void 0 ? void 0 : _c$props.span) || 12,
groupIndex: groupIndex
};
var inheritIndex = findGroupIndex(c.id, currentBlock === null || currentBlock === void 0 ? void 0 : currentBlock.lastFlatenMap);
if (inheritIndex > -1 && type === 'delete') {
item.groupIndex = inheritIndex;
} else {
var _c$props2;
total += ((_c$props2 = c.props) === null || _c$props2 === void 0 ? void 0 : _c$props2.span) || 0;
if (total > 12) {
var _c$props3;
groupIndex++;
total = (_c$props3 = c.props) === null || _c$props3 === void 0 ? void 0 : _c$props3.span;
}
item.groupIndex = groupIndex;
}
beforeFlatenGroup.push(item);
});
// console.log(beforeFlatenGroup, '====== before group =====');
var beforeTreeGroup = [];
parseFlaten2Tree(beforeFlatenGroup, beforeTreeGroup);
var afterFlatenGroup = [];
if (type === 'resize' && offset !== 0) {
beforeTreeGroup.forEach(function (group) {
handleResize(group, currentBlock, offset);
afterFlatenGroup.push.apply(afterFlatenGroup, group);
});
} else if (type === 'split') {
beforeTreeGroup.forEach(function (group, idx) {
handleSplit(group, currentBlock, idx);
afterFlatenGroup.push.apply(afterFlatenGroup, group);
});
} else if (type === 'delete') {
// 由于事件监听的是onNodeRemove, 所以对 delete 来说，这里已经是after的group了
handleDelete(beforeTreeGroup, afterFlatenGroup, currentBlock, currentSection);
} else {
beforeTreeGroup.forEach(function (group) {
afterFlatenGroup.push.apply(afterFlatenGroup, group);
});
}
afterFlatenGroup.forEach(function (data) {
var currentGroupIndex = data.groupIndex;
var groupList = [];
var num = 0;
afterFlatenGroup.forEach(function (item) {
if (item.groupIndex === currentGroupIndex) {
item.groupInnerIndex = num;
item.span && groupList.push(item.span);
num++;
}
});
data.groupLength = groupList.length;
data.groupList = groupList.join(',');
});
// console.log(afterFlatenGroup, '====== after group =====');
var adjustColSpan = function adjustColSpan(afterFlaten) {
afterFlaten.forEach(function (item) {
var _currentSection$docum, _currentSection$docum2;
item.id && ((_currentSection$docum = currentSection.document) === null || _currentSection$docum === void 0 ? void 0 : (_currentSection$docum2 = _currentSection$docum.getNodeById(item.id)) === null || _currentSection$docum2 === void 0 ? void 0 : _currentSection$docum2.setPropValue('span', item.span));
});
};
adjustColSpan(afterFlatenGroup);
currentSection.lastFlatenMap = afterFlatenGroup;
// for delete
};