sketch-json-parse
Version:
sketch-json解析
167 lines (166 loc) • 6.92 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", { value: true });
/**
* 判断是否有包含或者重叠
*
* @param {*} target
* @param {*} container
* @returns
*/
const isContain = (target, container) => {
if (!target.structure || !container.structure) {
return false;
}
target = target.structure;
container = container.structure;
var targetWidth = target.width, targetHeight = target.height, targetLeft = target.x, targetRight = target.x + target.width, targetTop = target.y, targetBottom = target.y + target.height, containerWidth = container.width, containerHeight = container.height, containerLeft = container.x, containerRight = container.x + container.width, containerTop = container.y, containerBottom = container.y + container.height;
if (targetLeft >= containerLeft &&
targetTop >= containerTop &&
targetRight <= containerRight &&
targetBottom <= containerBottom) {
return true;
}
return false;
};
/**
* 判断图层是否有半透明背景
*
* @param {Object} layer 图层
* @returns
*/
const isOpacityBackground = (layer) => {
let isHasBackground = false;
if (layer.style &&
Array.isArray(layer.style.fills) &&
layer.style.fills.length) {
layer.style.fills = layer.style.fills.filter((fillItem) => {
return fillItem.isEnabled;
});
}
if (layer.backgroundColor && layer.hasBackgroundColor) {
const { alpha } = layer.backgroundColor;
if (0 < alpha && alpha < 1) {
isHasBackground = true;
}
}
else if (layer.style &&
Array.isArray(layer.style.fills) &&
layer.style.fills.length &&
layer.style.fills[layer.style.fills.length - 1].isEnabled) {
// 处理填充 fills,fills是数组，只支持单个情况,处理成背景色
const fillStyle = layer.style.fills[layer.style.fills.length - 1];
let { alpha, red, green, blue } = fillStyle.color;
// 如果设置了 Opacity 属性，则 fills border 需要乘于这个数值
if (layer.style.contextSettings) {
alpha = layer.style.contextSettings.opacity * alpha;
}
if (0 < alpha && alpha < 1) {
isHasBackground = true;
}
}
return isHasBackground;
};
const isNotOpacityBackground = (layer) => {
let isHasBackground = false;
if (layer.style &&
Array.isArray(layer.style.fills) &&
layer.style.fills.length) {
layer.style.fills = layer.style.fills.filter((fillItem) => {
return fillItem.isEnabled;
});
}
if (layer.backgroundColor && layer.hasBackgroundColor) {
const { alpha, red, green, blue } = layer.backgroundColor;
if (alpha == 1) {
isHasBackground = true;
}
}
else if (layer.style &&
Array.isArray(layer.style.fills) &&
layer.style.fills.length &&
layer.style.fills[layer.style.fills.length - 1].isEnabled) {
// 处理填充 fills,fills是数组，只支持单个情况,处理成背景色
const fillStyle = layer.style.fills[layer.style.fills.length - 1];
let { alpha, red, green, blue } = fillStyle.color;
// 如果设置了 Opacity 属性，则 fills border 需要乘于这个数值
if (layer.style.contextSettings) {
alpha = layer.style.contextSettings.opacity * alpha;
}
if (alpha == 1) {
isHasBackground = true;
}
}
return isHasBackground;
};
// 判断是否为底栏
const isBottomBar = (layer, artLayer) => {
if (layer.structure &&
artLayer.structure &&
isNotOpacityBackground(layer) &&
layer.isVisible &&
layer.structure.x == artLayer.structure.x &&
layer.structure.width == artLayer.structure.width &&
layer.structure.y + layer.structure.height ==
artLayer.structure.y + artLayer.structure.height &&
layer.structure.height > 40 &&
layer.structure.height < 140) {
return true;
}
return false;
};
const handleCascading = (data, effectRuleNames) => {
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m;
if (!data.children) {
data.children = [];
}
if (data.children.length < 2) {
return {
baseJson: [Object.assign(Object.assign({}, data), { children: [] }), ...data.children],
cascadingJson: [],
};
}
let cascadingIndex = -1;
const dialogRecord = {};
// 完全层叠父图层的就是蒙层分割
for (let i = 0; i < data.children.length; i++) {
const layer = data.children[i];
if (effectRuleNames.dialog.filter((t) => layer.name.toLocaleLowerCase().includes(t.toLocaleLowerCase())).length > 0) {
dialogRecord[i] = layer;
continue;
}
if (layer.componentName !== "Text" &&
((_a = layer.structure) === null || _a === void 0 ? void 0 : _a.x) <= ((_b = data.structure) === null || _b === void 0 ? void 0 : _b.x) + 1 &&
((_c = layer.structure) === null || _c === void 0 ? void 0 : _c.y) <= ((_d = data.structure) === null || _d === void 0 ? void 0 : _d.y) + 1 &&
((_e = layer.structure) === null || _e === void 0 ? void 0 : _e.x) + ((_f = layer.structure) === null || _f === void 0 ? void 0 : _f.width) >=
((_g = data.structure) === null || _g === void 0 ? void 0 : _g.width) + ((_h = data.structure) === null || _h === void 0 ? void 0 : _h.x) - 1 &&
((_j = layer.structure) === null || _j === void 0 ? void 0 : _j.y) + ((_k = layer.structure) === null || _k === void 0 ? void 0 : _k.height) >=
((_l = data.structure) === null || _l === void 0 ? void 0 : _l.height) + ((_m = data.structure) === null || _m === void 0 ? void 0 : _m.y) - 1 &&
i > 0) {
cascadingIndex = i;
break;
}
}
Object.keys(dialogRecord).forEach((key) => {
data.children.splice(Number(key), 1);
});
cascadingIndex = cascadingIndex - Object.keys(dialogRecord).length;
if (cascadingIndex > 0) {
const result = handleCascading(Object.assign(Object.assign({}, data), { children: data.children.slice(cascadingIndex) }), effectRuleNames);
return {
baseJson: [
Object.assign(Object.assign({}, data), { children: [] }),
...data.children.slice(0, cascadingIndex),
],
cascadingJson: [
...Object.values(dialogRecord).map((t) => [t]),
result.baseJson.slice(1),
...result.cascadingJson,
],
};
}
return {
baseJson: [Object.assign(Object.assign({}, data), { children: [] }), ...data.children],
cascadingJson: [...Object.values(dialogRecord).map((t) => [t])],
};
};
exports.default = handleCascading;