sketch-json-parse
Version:
sketch-json解析
193 lines (192 loc) • 9.13 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", { value: true });
const utils_1 = require("./utils");
const handleSpan = (data) => {
// 单层children中暂时不会存在决定定位的元素
let positionList = [];
let noPositionList = [];
data.forEach((item) => {
if (item.isPosition) {
positionList.push(item);
}
else {
noPositionList.push(item);
}
});
data = noPositionList;
// 让宽度最大的元素放在最前面，避免前两个小宽度元素行重叠列不重叠，后大宽度>2个小宽度，导致划分为不同的列容器
data = data.sort((a, b) => b.structure.width - a.structure.width);
//处理进行分列
//同列的元素外面加一个Span容器
// 结构调整data
//children本身全部在一行的不需要加Span容器
let assignSpanList = [];
for (let i = 0; i < data.length; i++) {
let flag = true;
for (let j = 0; j < assignSpanList.length; j++) {
//属于哪个容器就放到哪个容器中
for (let n = 0; n < assignSpanList[j].length; n++) {
if (flag &&
((assignSpanList[j][n].structure.x <= data[i].structure.x &&
data[i].structure.x <
+assignSpanList[j][n].structure.x +
assignSpanList[j][n].structure.width) ||
(+assignSpanList[j][n].structure.x <
+data[i].structure.x + data[i].structure.width &&
+data[i].structure.x + data[i].structure.width <=
+assignSpanList[j][n].structure.x +
assignSpanList[j][n].structure.width))) {
assignSpanList[j].push(data[i]);
flag = false;
}
}
}
//都不属于则新建容器，放入其中
if (flag) {
assignSpanList.push([data[i]]);
}
}
//children本身全部在一列的不需要加Span容器
if (data.length == assignSpanList[0].length) {
assignSpanList = assignSpanList[0].map((item) => [item]);
}
/**
* 分列完成后，给属于同一列的加容器
* 同时给容器赋值x,y,width,height
* 获取结构调整后的data
*/
let spanList = [];
for (let i = 0; i < assignSpanList.length; i++) {
if (assignSpanList[i].length == 1) {
spanList.push(assignSpanList[i][0]);
}
else {
const currDivX = Math.min(...assignSpanList[i].map((t) => t.structure.x));
const currDivY = Math.min(...assignSpanList[i].map((t) => t.structure.y));
const currMaxX = Math.max(...assignSpanList[i].map((t) => t.structure.x + t.structure.width));
const currMaxY = Math.max(...assignSpanList[i].map((t) => t.structure.y + t.structure.height));
// zIndex的处理，父元素zIndex取最小值
const zIndex = Math.min(...assignSpanList[i].map((t) => t.structure.zIndex));
assignSpanList[i].sort((a, b) => a.structure.y - b.structure.y);
const item = {
id: (0, utils_1.uniqueId)(),
name: "Span1",
componentName: "Container",
structure: {
zIndex,
x: currDivX,
y: currDivY,
width: currMaxX - currDivX,
height: currMaxY - currDivY,
},
children: assignSpanList[i],
style: {},
};
spanList.push(item);
}
}
// 对列进行一次排序
spanList.sort((a, b) => a.structure.x - b.structure.x);
data = [...spanList, ...positionList];
return data;
};
// 分行处理，同行的元素外面加一个Row容器，处理的都是同级元素-children
const handleRow = (data, notBranchNames, parent) => {
if (!data.find((t) => notBranchNames.find((key) => { var _a; return (_a = t.name) === null || _a === void 0 ? void 0 : _a.includes(key); }))) {
// 让高度最大的元素放在最前面，同children下所有元素，让高度最大的进行行划分
// 避免前两个小高度元素列重叠，行不重叠，前2小高度 < 后大高度，导致划分为不同的行容器
data.sort((a, b) => b.structure.height - a.structure.height);
data.sort((a, b) => a.structure.y - b.structure.y);
// 分行
let assignRowList = [];
for (let i = 0; i < data.length; i++) {
let flag = true;
// 循环分行，判断新元素是否和分行内的元素有y轴重叠关系-即同行
for (let j = 0; j < assignRowList.length; j++) {
//属于哪个行容器就放到哪个容器中，判断data是不是和容器同行
for (let n = 0; n < assignRowList[j].length; n++) {
if (flag &&
((assignRowList[j][n].structure.y <= data[i].structure.y &&
data[i].structure.y <
+assignRowList[j][n].structure.y +
assignRowList[j][n].structure.height) ||
(+assignRowList[j][n].structure.y <
+data[i].structure.y + data[i].structure.height &&
+data[i].structure.y + data[i].structure.height <=
+assignRowList[j][n].structure.y +
assignRowList[j][n].structure.height))) {
assignRowList[j].push(data[i]);
flag = false;
break;
}
}
}
// 都不属于则新建容器，放入其中
if (flag) {
assignRowList.push([data[i]]);
}
}
/**
* 分行完成后，给属于同一行的加容器
* 同时给容器赋值x,y,width,height
* 获取结构调整后的data
*/
let rowList = [];
// children本身全部在一行的不需要加Row容器 TODO: 这里有问题，需要处理，已有容器宽度设置
if (assignRowList.length && data.length == assignRowList[0].length) {
rowList = handleSpan(assignRowList[0]);
}
else {
for (let i = 0; i < assignRowList.length; i++) {
if (assignRowList[i].length == 1) {
rowList.push(assignRowList[i][0]);
}
else {
const currDivX = Math.min(...assignRowList[i].map((t) => t.structure.x));
const currDivY = Math.min(...assignRowList[i].map((t) => t.structure.y));
const currMaxX = Math.max(...assignRowList[i].map((t) => t.structure.x + t.structure.width));
const currMaxY = Math.max(...assignRowList[i].map((t) => t.structure.y + t.structure.height));
const zIndex = Math.max(...assignRowList[i].map((t) => t.structure.zIndex));
// assignRowList[i].sort(
// (a, b) => a.structure.x - b.structure.x
// );
let width = currMaxX - currDivX;
if (parent === null || parent === void 0 ? void 0 : parent.structure.width) {
const left = currDivX - parent.structure.x;
const right = parent.structure.x + parent.structure.width - currMaxX;
width = Math.max(width, parent.structure.width - Math.min(left, right) * 2);
}
// 创建同行容器
const item = {
id: (0, utils_1.uniqueId)(),
componentName: "Container",
name: "Row",
structure: {
zIndex,
x: currDivX,
y: currDivY,
width: width,
height: currMaxY - currDivY,
},
children: assignRowList[i],
style: {},
};
item.children = handleSpan(item.children);
rowList.push(item);
}
}
}
// 对行进行一次排序
rowList.sort((a, b) => a.structure.y - b.structure.y);
// 参考源码中有左右布局的处理，此处先删除
data = [...rowList];
}
//递归处理children 分行+分列后，再对新的列进行分行
for (let i = 0; i < data.length; i++) {
if (Array.isArray(data[i].children) && data[i].children.length > 0) {
data[i].children = handleRow(data[i].children, notBranchNames, data[i]);
}
}
return data;
};
exports.default = handleRow;