sketch-json-parse/dist/packages/picasso-group/src/recombine/index.js

sketch-json解析

"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
const handleOver_1 = require("./handleOver");
const handleDelete_1 = require("./handleDelete");
const utils_1 = require("../utils");
const rotation_1 = require("./rotation");
// import * as fs from 'fs';
const errorRange = 2;
// 重组树结构数据，将原来的group删掉，同层无重叠关系的图层都当作同级图层（同一添加到父图层），有重叠关系的图层，父图层包含子图层
const recombineTreeDataNew = (data) => {
    // // 从上到下+层级排序，保证嵌套容器顺序，TODO：嵌套顺序应按照sketch文件中的顺序，暂时不处理
    // data.sort((a, b) => a.structure.y - b.structure.y);
    // data.sort((a, b) => a.structure.zIndex - b.structure.zIndex);
    // 每次处理一个图层元素currRecord，找到currRecord的父级为止（由于扁平化，最后一个元素应该是子图层）
    // 前面图层排序时，同级图层如果存在蒙版或大背景图，出现的顺序覆盖显示问题，需要注意，比如画板的背景图把所有内容挡在下面，所以排序只对没有重叠关系的图层进行x,y增序，蒙版x,y应该比较小
    let currRecord = data[data.length - 1];
    if (data.length > 1) {
        let preLength = data.length;
        for (let i = 0; i < data.length - 1; i++) {
            let record = data[data.length - 2 - i];
            // 父元素被指定的情况 蒙版识别中使用，如果有parentId，则说明有蒙版归类
            if (currRecord.parentId) {
                if (currRecord.parentId === record.id) {
                    if (!record.children) {
                        record.children = [];
                    }
                    record.children.unshift(JSON.parse(JSON.stringify(currRecord)));
                    data.length = data.length - 1;
                    break;
                }
                // 包含关系的情况
            }
            else if (isContain(currRecord, record, data[0])) {
                // 处理重叠父子关系
                if (!record.children) {
                    record.children = [];
                }
                if (record.rotation && record.zIndex === currRecord.zIndex) {
                    // 创建容器
                    const item = {
                        id: (0, utils_1.uniqueId)(),
                        componentName: "Container",
                        name: "rotateContainer",
                        structure: Object.assign({ zIndex: record.structure.zIndex }, (0, rotation_1.getRotatedRectangleBounds)({
                            x: record.structure.x,
                            y: record.structure.y,
                            width: record.structure.width,
                            height: record.structure.height,
                            rotation: record.rotation,
                        })),
                        children: [record, JSON.parse(JSON.stringify(currRecord))],
                        style: {},
                    };
                    data[data.length - 2 - i] = item;
                }
                else {
                    // 子图层添加到children中，unshift，保证子图层原来的顺序
                    record.children.unshift(JSON.parse(JSON.stringify(currRecord)));
                }
                // 属于父子关系，继续向前处理
                data.length = data.length - 1;
                break;
            }
        }
        if (preLength > data.length) {
            recombineTreeDataNew(data);
        }
    }
    return data;
};
// 判断container是否算包含target，target是被判断图层
const isContain = (target, container, artboard) => {
    if (!target || !container) {
        return false;
    }
    // 如果容器是画板，所有元素都被画板包含
    if (container.id === artboard.id) {
        return true;
    }
    // 如果是旋转
    if (container.istransformContain) {
        return false;
    }
    // target包含container，排除完全重叠的情况，完全重叠，代表target需要被删掉
    if (target.structure.x <= (container.structure.x + errorRange) &&
        target.structure.y <= (container.structure.y + errorRange) &&
        (target.structure.x + target.structure.width + errorRange) >=
            container.structure.x + container.structure.width &&
        (target.structure.y + target.structure.height + errorRange) >=
            container.structure.y + container.structure.height &&
        !(target.structure.x == container.structure.x &&
            target.structure.y == container.structure.y &&
            target.structure.x + target.structure.width ==
                container.structure.x + container.structure.width &&
            target.structure.y + target.structure.height ==
                container.structure.y + container.structure.height)) {
        return false;
    }
    if (container.structure.x <= (target.structure.x + errorRange) &&
        container.structure.y <= (target.structure.y + errorRange) &&
        (container.structure.x + container.structure.width + errorRange) >=
            target.structure.x + target.structure.width &&
        (container.structure.y + container.structure.height + errorRange) >=
            target.structure.y + target.structure.height) {
        return true;
    }
    return false;
    if (container.hasClippingMask) {
        let currTarget = JSON.parse(JSON.stringify(target));
        // 获取target和container的重叠交集的面积
        let curr = (0, handleOver_1.default)(currTarget, container);
        return curr > 0;
        let targetH = target.structure.height;
        // target的高度超出画板，把超出部分去掉
        if (artboard.structure.y + artboard.structure.height - target.structure.y <
            targetH) {
            targetH =
                artboard.structure.y + artboard.structure.height - target.structure.y;
            targetH = targetH < 0 ? 0 : targetH;
        }
        // 如果重叠交集大于target容器面积的30%，则认为是包含关系
        if (curr > target.structure.width * targetH * 0.3) {
            return true;
        }
    }
    return false;
};
exports.default = (data, currIndex = { num: 0 }) => {
    // 记录层级标识，根据扁平化列表，递增设置zIndex，扁平化数据按照父容器在前
    data = data.map((item) => {
        currIndex.num = currIndex.num + 1;
        item.structure.zIndex = currIndex.num;
        return item;
    });
    data = recombineTreeDataNew(data);
    // 删除重叠的图层
    const { data: dataNew } = (0, handleDelete_1.default)(data);
    data = dataNew;
    return data;
};