sketch-json-parse/dist/packages/picasso-layout/src/row.js

sketch-json解析

"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.layoutRow = exports.isRow = exports.isRow1 = void 0;
const handleTypeLayout_1 = require("./handleTypeLayout");
// import * as fs from 'fs';
/**
 * 两个元素左右布局
 * 1.父元素width不为auto
 * @param {Array} data
 * @param {Object} parent
 */
const isTwoSpan = (data, parent) => {
    // if (data.length == 2 && parent.structure.width != "auto") {
    if (data.length == 2 && parent) {
        let firstItem = data[0];
        let secondItem = data[1];
        if (firstItem.structure.x + firstItem.structure.width / 2 <
            parent.structure.x + parent.structure.width / 2 &&
            secondItem.structure.x >=
                parent.structure.x + parent.structure.width / 2 &&
            (secondItem.structure.x -
                firstItem.structure.x -
                firstItem.structure.width) *
                0.2 >
                parent.structure.width +
                    parent.structure.x -
                    secondItem.structure.x -
                    secondItem.structure.width
        // && parent.structure.width > 750 * 0.7
        ) {
            return true;
        }
    }
    return false;
};
// parent flex space-between布局，设置top left/right或center
const layoutTwoSpan = (data, parent) => {
    let firstItem = data[0];
    let secondItem = data[1];
    parent.style = Object.assign(Object.assign({}, parent.style), { display: "flex", justifyContent: "space-between", flexDirection: "row" });
    // 判断是否y轴居中，居中不设置top
    if (handleTypeLayout_1.utils.isAlignMiddle(data, parent)) {
        if (!handleTypeLayout_1.utils.isSameParentHeight(data, parent)) {
            parent.style = Object.assign(Object.assign({}, parent.style), { alignItems: "center" });
        }
    }
    else {
        firstItem.style = Object.assign(Object.assign({}, firstItem.style), { marginTop: firstItem.structure.y - parent.structure.y });
        secondItem.style = Object.assign(Object.assign({}, secondItem.style), { marginTop: secondItem.structure.y - parent.structure.y });
    }
    firstItem.style = Object.assign(Object.assign({}, firstItem.style), { marginLeft: firstItem.structure.x - parent.structure.x });
    secondItem.style = Object.assign(Object.assign({}, secondItem.style), { marginRight: parent.structure.x +
            parent.structure.width -
            secondItem.structure.x -
            secondItem.structure.width });
    return data;
};
// 等间距
const isBetweenItemList = (data, parent) => {
    if (Array.isArray(data) && data.length > 2 && parent) {
        let firstBetween = data[1].structure.x - (data[0].structure.x + data[0].structure.width);
        for (let i = 2; i < data.length; i++) {
            if (Math.abs(data[i].structure.x -
                (data[i - 1].structure.x + data[i - 1].structure.width) -
                firstBetween) > 4) {
                return false;
            }
        }
        return true;
    }
    return false;
};
// 等间距布局识别 TODO：后续可应用到组件里去
const layoutBetweenItemList = (data, parent) => {
    parent.style = Object.assign(Object.assign({}, parent.style), { display: "flex", flexDirection: "row", justifyContent: "space-between" });
    for (let i = 0; i < data.length; i++) {
        if (!data[i].style) {
            data[i].style = {};
        }
    }
    if ((0, handleTypeLayout_1.isAlignCenter)(data, parent)) {
        if (!handleTypeLayout_1.utils.isSameParentHeight(data, parent)) {
            parent.style = Object.assign(Object.assign({}, parent.style), { alignItems: "center" });
        }
    }
    else {
        for (let i = 0; i < data.length; i++) {
            data[i].style = Object.assign(Object.assign({}, data[i].style), { marginTop: data[i].structure.y - parent.structure.y });
        }
    }
    //第一个元素
    if (data[0].structure.x != parent.structure.x) {
        parent.style = Object.assign(Object.assign({}, parent.style), { paddingLeft: data[0].structure.x - parent.structure.x });
    }
    //最后一个元素
    if (data[data.length - 1].structure.x + data[data.length - 1].structure.width !=
        parent.structure.x + parent.structure.width) {
        parent.style = Object.assign(Object.assign({}, parent.style), { paddingRight: parent.structure.x +
                parent.structure.width -
                data[data.length - 1].structure.x -
                data[data.length - 1].structure.width });
    }
    return data;
};
const isRow1 = (data) => {
    data = [...data].sort((a, b) => a.structure.y - b.structure.y);
    for (var i = 1; i < data.length; i++) {
        //计算的值误差范围，y轴没有交集就不符合横向排列
        if (+data[i].structure.y -
            data[i - 1].structure.height -
            data[i - 1].structure.y >
            0) {
            return false;
        }
    }
    return true;
};
exports.isRow1 = isRow1;
/**
 * 行布局，判断是否所有元素都同行，true同行
 */
const isRow = (data) => {
    let flag = false;
    if (Array.isArray(data) && data.length > 1) {
        let dataTemp = JSON.parse(JSON.stringify(data));
        dataTemp = dataTemp.sort((a, b) => a.structure.x - b.structure.x);
        for (let i = 0; i < dataTemp.length; i++) {
            const item = dataTemp[i];
            flag = false; // 除非其中有元素跟任何一个都不是一行，否则只要有能拍到一行的元素就都进行行处理
            for (let j = 0; j < dataTemp.length; j++) {
                if (i === j) {
                    continue;
                }
                const itemJ = dataTemp[j];
                if ((item.structure.y <= itemJ.structure.y &&
                    itemJ.structure.y < item.structure.y + item.structure.height) ||
                    (itemJ.structure.y <= item.structure.y &&
                        item.structure.y < itemJ.structure.y + itemJ.structure.height)) {
                    flag = true;
                }
            }
            if (!flag) {
                break;
            }
        }
    }
    return flag;
};
exports.isRow = isRow;
const layoutRow = (data, parent) => {
    var _a, _b, _c, _d, _e, _f;
    if (Array.isArray(data) && data.length > 1) {
        data.sort((a, b) => a.structure.x - b.structure.x);
        if (parent) {
            if (!parent.style) {
                parent.style = {};
            }
            // // 两列两边对齐样式 space-between
            // if (isTwoSpan(data, parent)) {
            //   return layoutTwoSpan(data, parent);
            // }
            // // 间距相同 横向等间距布局识别 space-between
            // if (isBetweenItemList(data, parent)) {
            //   return layoutBetweenItemList(data, parent);
            // }
            parent.style = Object.assign(Object.assign({}, parent.style), { display: "flex", flexDirection: "row" });
            // 垂直方向居中
            // if (utils.isAlignMiddle(data, parent)) {
            //   if (!utils.isSameParentHeight(data, parent)) {
            //     parent.style = {
            //       ...parent.style,
            //       alignItems: "center",
            //     };
            //   }
            // } else {
            //边框处理
            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;
            for (let i = 0; i < data.length; i++) {
                data[i].style = Object.assign(Object.assign({}, data[i].style), { marginTop: data[i].structure.y - parent.structure.y - topBorderWidth });
            }
            // }
            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 = {};
                }
                if (i == 0) {
                    data[i].style = Object.assign(Object.assign({}, data[i].style), { marginLeft: data[i].structure.x - parent.structure.x - leftBorderWidth });
                }
                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 });
                }
            }
        }
    }
    return data;
};
exports.layoutRow = layoutRow;