sketch-json-parse
Version:
sketch-json解析
269 lines (268 loc) • 14.1 kB
JavaScript
;
var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
return new (P || (P = Promise))(function (resolve, reject) {
function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
step((generator = generator.apply(thisArg, _arguments || [])).next());
});
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.formateDslStyleStructure = exports.formateDslStyle = exports.generateColor = void 0;
const cssOrder_1 = require("./cssOrder");
const utils_1 = require("./utils");
const generateColor = ({ red = '', green = '', blue = '', alpha = 1, } = {}) => {
return `rgba(${red}, ${green}, ${blue}, ${alpha})`;
};
exports.generateColor = generateColor;
const addPx = (val) => {
if (typeof val == 'number')
return `${val}px`;
return val;
};
// TODO：此处已移到设计器组件解析时处理
const formateDslStyle = (data) => __awaiter(void 0, void 0, void 0, function* () {
//let formateDsl = JSON.parse(JSON.stringify(data))
for (let i = 0; i < data.length; i++) {
let style = {}; // 样式集合
const item = data[i];
// 处理 structure
if (item.structure && Object.keys(item.structure).length) {
for (var key in item.structure) {
let currValue = item.structure[key];
// sketch 设计稿解析过来的没有 margin 和 padding
switch (key) {
case 'border':
style = Object.assign(Object.assign({}, style), (0, utils_1.generateProperty)(currValue));
break;
case 'width':
style[key] = `${Math.round(currValue * 100) / 100}px`;
break;
case 'height':
style[key] = `${Math.round(currValue * 100) / 100}px`;
break;
case 'x':
case 'y':
if (style.position) {
style[key] = `${Math.round(currValue * 100) / 100}px`;
}
break;
case 'zIndex':
if (style.position) {
style[key] = currValue;
}
break;
default:
style[key] = (0, utils_1.generateMargin)(currValue);
break;
}
}
}
// 处理 style
if (item.style && Object.keys(item.style).length) {
for (var key in item.style) {
if (item.style.hasOwnProperty(key) &&
item.style[key] != undefined) {
let currValue = item.style[key];
switch (key) {
case 'textStyle': // text样式直接放在style里
for (let textKey of Object.keys(currValue)) {
let textVal = currValue[textKey];
// 颜色处理
if (textKey == 'color') {
textVal = (0, exports.generateColor)(textVal);
}
// px处理
if (textKey == 'lineHeight' || textKey == 'fontSize' || textKey == 'textIndent' || textKey == 'letterSpacing') {
textVal = `${Math.round(currValue[textKey] * 100) / 100}px`;
}
// 其他不处理
style[textKey] = textVal;
}
break;
case 'background': // background样式放到background里
let propertyVal;
for (let backgroundKey of Object.keys(currValue)) {
let backgroundVal = currValue[backgroundKey];
if (backgroundKey == 'linearGradient') {
let { gAngle, gList } = backgroundVal;
let list = gList.map((ref) => {
return `${(0, exports.generateColor)(ref.color)} ${ref.position * 100}%`;
});
list = [...new Set(list)];
style['background'] = `linear-gradient(${Math.round(gAngle * 100) / 100}deg, ${list.join(',')})`;
}
else if (backgroundKey == 'radialGradient') {
// background-image: radial-gradient(shape size at top left, start-color, ..., last-color);
// background-image: radial-gradient(4.47rem 2rem at 1rem 2rem, red 5%, green 15%, blue 60%)
let { backgroundVal: any, smallRadius, largeRadius, position, gList, } = backgroundVal;
let list = gList.map((ref) => {
return `${(0, exports.generateColor)(ref.color)} ${ref.position * 100}%`;
});
style['background'] = `radial-gradient(${Math.round(smallRadius * 100) / 100}px ${Math.round(largeRadius * 100) / 100}px at ${Math.round(position.left * 100) / 100}px ${Math.round(-position.top * 100) / 100}px, ${list.join(',')})`;
}
else if (typeof backgroundVal == 'object') {
if (backgroundKey == 'color') {
propertyVal = (0, exports.generateColor)(backgroundVal);
}
else if (backgroundKey == 'image' && item.componentName !== 'Image') {
propertyVal = `url(${backgroundVal.url})`;
}
else { // position、size
let valList = [];
for (let ref of Object.keys(backgroundVal)) {
valList.push(addPx(backgroundVal[ref]));
}
propertyVal = valList.join(' ');
}
style[`background${backgroundKey.replace(/^\S/, s => s.toUpperCase())}`] = propertyVal;
// 如果为图片，则背景色无效
if (item.componentName === 'Image') {
delete style['backgroundColor'];
}
}
else if (backgroundKey == 'repeat') {
// style[`background-${backgroundKey}`] = backgroundVal
}
}
break;
case 'textShadow':
case 'boxShadow':
let shodowList = [];
for (let item of currValue) {
let { offsetX, offsetY, spread, blurRadius, color, type, } = item;
shodowList.push(type
? `${offsetX}px ${offsetY}px ${blurRadius}px ${spread}px ${(0, exports.generateColor)(color)} ${type}`
: `${offsetX}px ${offsetY}px ${blurRadius}px ${spread}px ${(0, exports.generateColor)(color)}`);
}
if (shodowList.length) {
style[key] = shodowList.join(', ');
}
break;
case 'transform':
let { scale = {}, rotate, translate = {} } = currValue;
let transform = [];
if (scale.horizontal != undefined &&
scale.vertical != undefined) {
transform.push(`scale(${scale.horizontal},${scale.vertical})`);
}
if (rotate != undefined) {
transform.push(`rotate(${rotate}deg)`);
}
if (translate && (translate.x || translate.y)) {
transform.push(`translate(${translate.x || 0}px, ${translate.y || 0}px)`);
}
if (transform && transform.length) {
style['transform'] = transform.join(' ');
}
break;
case 'borderRadius':
let borderRadius = (0, utils_1.generateBorderRadius)(currValue);
if (borderRadius) {
style['borderRadius'] = borderRadius;
}
break;
case 'zIndex':
case 'fontWeight':
style[key] = currValue;
break;
case 'lineHeight':
style[key] = currValue;
break;
case 'width':
case 'height':
case 'marginTop':
case 'marginRight':
case 'marginLeft':
case 'marginBottom':
case 'paddingTop':
case 'paddingRight':
case 'paddingLeft':
case 'paddingBottom':
typeof currValue == 'string'
? (style[key] = currValue)
: (style[key] = `${currValue}px`);
break;
default:
typeof currValue == 'string'
? (style[key] = currValue)
: (style[key] = `${currValue}px`);
}
}
}
}
// fs.writeFileSync(`./test/style_${item.name}.json`, JSON.stringify(style, null,2));
// css 排序
if (!data[i].props) {
data[i].props = {};
}
data[i].props.style = (0, cssOrder_1.default)(style);
delete data[i].style;
delete data[i].panel;
delete data[i].structure;
delete data[i].groupBreadcrumb;
delete data[i].class;
delete data[i].symbolName;
if (data[i].componentName === 'Text') {
data[i].props.text = data[i].value;
delete data[i].value;
}
if (data[i].componentName === 'Svg') {
data[i].props.src = yield (0, utils_1.getImgFileUrl)(data[i].props.src);
data[i].props.alt = '#';
data[i].componentName = 'Image';
}
if (data[i].componentName === 'Image') {
data[i].props.src = `${'url'}/${data[i].image._ref}`;
data[i].props.alt = '#';
}
if (data[i].children && data[i].children.length) {
data[i].children = (0, exports.formateDslStyle)(data[i].children);
}
}
return data;
});
exports.formateDslStyle = formateDslStyle;
// 对Structure进行样式分解，便于后续文本类删除width等操作
const formateDslStyleStructure = (data) => {
for (let i = 0; i < data.length; i++) {
// 处理 structure
if (data[i].structure && Object.keys(data[i].structure).length) {
for (var key in data[i].structure) {
let currValue = data[i].structure[key];
// sketch 设计稿解析过来的没有 margin 和 padding
switch (key) {
case 'border':
data[i].style = Object.assign(Object.assign({}, data[i].style), (0, utils_1.generateProperty)(currValue));
break;
case 'width':
data[i].style[key] = `${Math.round(currValue * 100) / 100}px`;
break;
case 'height':
data[i].style[key] = `${Math.round(currValue * 100) / 100}px`;
break;
case 'x':
case 'y':
if (data[i].style.position) {
data[i].style[key] = `${Math.round(currValue * 100) / 100}px`;
}
break;
case 'zIndex':
if (data[i].style.position) {
data[i].style[key] = currValue;
}
break;
default:
data[i].style[key] = (0, utils_1.generateMargin)(currValue);
break;
}
}
}
if (data[i].children && data[i].children.length) {
data[i].children = (0, exports.formateDslStyleStructure)(data[i].children);
}
}
return data;
};
exports.formateDslStyleStructure = formateDslStyleStructure;