sketch-json-parse
Version:
sketch-json解析
171 lines (170 loc) • 7.45 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", { value: true });
exports.otherBlock = exports.isBlockItem = exports.isRowLeftItem = exports.calculateBlock = void 0;
const handleSortPosition_1 = require("./handleTypeLayout/handleSortPosition");
const row_1 = require("./row");
/**
* 全部为块元素的竖直方向布局
*
* @param {*} data
* @param {*} parent
* @returns
*/
const calculateBlock = (data, parent) => {
var _a, _b, _c, _d, _e, _f;
// 排序可以避免-值（前面分行分列已经有排序，后续再看是否需要排序 TODO）
data.sort((a, b) => a.structure.y - b.structure.y);
if (parent) {
if (!parent.style) {
parent.style = {};
}
parent.style = Object.assign(Object.assign({}, parent.style), { display: "flex", flexDirection: "column" });
// 垂直方向水平居中
// if (utils.isVerticalCenter(data, parent)) {
// if (!utils.isSameParentWidth(data, parent)) {
// parent.style = {
// ...parent.style,
// alignItems: "center",
// };
// }
// } else {
//边框处理
const leftBorderWidth = ((_c = (_b = (_a = parent.structure) === null || _a === void 0 ? void 0 : _a.border) === null || _b === void 0 ? void 0 : _b.left) === null || _c === void 0 ? void 0 : _c.width) || 0;
// 设置margin-left
for (let i = 0; i < data.length; i++) {
if (!data[i].style) {
data[i].style = {};
}
data[i].style = Object.assign(Object.assign({}, data[i].style), { marginLeft: data[i].structure.x - parent.structure.x + leftBorderWidth });
}
// }
//边框处理
const topBorderWidth = ((_f = (_e = (_d = parent.structure) === null || _d === void 0 ? void 0 : _d.border) === null || _e === void 0 ? void 0 : _e.top) === null || _f === void 0 ? void 0 : _f.width) || 0;
// 设置margin-top
for (let i = 0; i < data.length; i++) {
if (!data[i].style) {
data[i].style = {};
}
if (i == 0) {
// || !isHaveBlock([data[i - 1], data[i]])
// const topItem = isBlockItem(data, data[i], parent);
// 父元素先锁定parent TODO：需要优化，让y更小的元素在上面
const topItem = parent;
let paddingTop = data[i].structure.y -
(topItem.id === parent.id
? parent.structure.y + topBorderWidth
: topItem.structure.y + topItem.structure.height);
if (paddingTop) {
data[i].style = Object.assign(Object.assign({}, data[i].style), { marginTop: paddingTop });
// parent.style.paddingTop = 0.1; // bfc
}
}
else {
data[i].style = Object.assign(Object.assign({}, data[i].style), { marginTop: data[i].structure.y -
data[i - 1].structure.y -
data[i - 1].structure.height });
}
}
}
return data;
};
exports.calculateBlock = calculateBlock;
/**
* 找到最近的左侧同行元素
*/
const isRowLeftItem = (data, source, parent) => {
if (Array.isArray(data) && data.length > 1) {
let dataTemp = JSON.parse(JSON.stringify(data));
dataTemp.sort((a, b) => a.structure.x + a.structure.width - (b.structure.x + b.structure.width));
const i = dataTemp.findIndex((t) => t.id === source.id);
// 查找左侧同行元素
for (let j = i - 1; j >= 0; j--) {
const itemJ = dataTemp[j];
if ((source.structure.y <= itemJ.structure.y &&
itemJ.structure.y < source.structure.y + source.structure.height) ||
(itemJ.structure.y <= source.structure.y &&
source.structure.y < itemJ.structure.y + itemJ.structure.height)) {
return itemJ;
}
}
}
// 没有找到同行元素，返回父元素
return parent;
};
exports.isRowLeftItem = isRowLeftItem;
/**
* 找到最近的左侧同行元素
*/
const isBlockItem = (data, source, parent) => {
if (Array.isArray(data) && data.length > 1) {
let dataTemp = JSON.parse(JSON.stringify(data));
// 排序会导致top计算循序错误
// dataTemp = dataTemp.sort(
// (a, b) =>
// a.structure.y +
// a.structure.height -
// (b.structure.y + b.structure.height)
// );
const i = dataTemp.findIndex((t) => t.id === source.id);
return dataTemp[i - 1] || parent;
}
return parent;
};
exports.isBlockItem = isBlockItem;
// 普通布局，非完全同行/同列
const otherBlock = (data, parent) => {
var _a, _b, _c, _d, _e, _f;
// 控制布局元素生成顺序为从上到下，从左到右
(0, handleSortPosition_1.default)(data);
//边框处理
const topBorderWidth = ((_c = (_b = (_a = parent.structure) === null || _a === void 0 ? void 0 : _a.border) === null || _b === void 0 ? void 0 : _b.top) === null || _c === void 0 ? void 0 : _c.width) || 0;
const leftBorderWidth = ((_f = (_e = (_d = parent.structure) === null || _d === void 0 ? void 0 : _d.border) === null || _e === void 0 ? void 0 : _e.left) === null || _f === void 0 ? void 0 : _f.width) || 0;
for (let i = 0; i < data.length; i++) {
if (!data[i].style) {
data[i].style = {};
}
// TODO 不和任何一个元素同行则是parent，否则要找上一个元素，top也是一样
// 第一个元素，或者该元素与它上一个元素不同行，则说明左边left就是父元素
if (i == 0 || !(0, row_1.isRow)([data[i - 1], data[i]])) {
// const leftItem = isRowLeftItem(data, data[i], parent);
const leftItem = parent;
data[i].style = Object.assign(Object.assign({}, data[i].style), { marginLeft: data[i].structure.x -
(leftItem.id === parent.id
? leftItem.structure.x + leftBorderWidth
: leftItem.structure.x) });
}
else {
data[i].style = Object.assign(Object.assign({}, data[i].style), { marginLeft: data[i].structure.x -
data[i - 1].structure.x -
data[i - 1].structure.width });
}
// 计算相对的margin-top，第一个元素，或者该元素与它上一个元素不同列，说明它相对父元素布局
// || !isBlock([data[i - 1], data[i]])
if (i === 0) {
let paddingTop = data[i].structure.y - parent.structure.y - topBorderWidth;
if (paddingTop) {
data[i].style.marginTop = paddingTop;
// bfc
// parent.style.paddingTop = 0.1;
}
}
else {
let marginTop = data[i].structure.y -
(data[i - 1].structure.y + data[i - 1].structure.height);
if (marginTop) {
data[i].style.marginTop = marginTop;
}
}
}
return data;
};
exports.otherBlock = otherBlock;
function Single() {
this.name = 'single';
}
Single.prototype.getInstance = function () {
if (!this.instance) {
this.instance = new Single();
}
return this.instance;
};