Skip to content

P
psd-parse-web
Commit 81d83998 authored by 任建锋's avatar 任建锋
Browse files
Options

--

parent 53d8e362
Expand all Show whitespace changes
Inline Side-by-side
Showing with 157 additions and 87 deletions
dist/index.es.js
View file @ 81d83998
...@@ -86,7 +86,7 @@ async function execute(psdFile, options) { ...@@ -86,7 +86,7 @@ async function execute(psdFile, options) {
let viewRoot = { let viewRoot = {
name: path.basename(psdFile.name, '.psd'), name: path.basename(psdFile.name, '.psd'),
type: 'node', componentName : 'Div',
uuid: generateUUID(), uuid: generateUUID(),
}; };
...@@ -99,10 +99,16 @@ async function execute(psdFile, options) { ...@@ -99,10 +99,16 @@ async function execute(psdFile, options) {
await walkNode(tree, async function (node, parent) { await walkNode(tree, async function (node, parent) {
let {name} = node; let {name} = node;
const {x, y, width, height, alpha, visible, origin: {layer, layer: {typeTool, solidColor}}} = node; const {x, y, width, height, opacity, display, origin: {layer, layer: {typeTool, solidColor}}} = node;
//console.log('walk node:', name); //console.log('walk node:', name);
let properties = { let properties = {
width, height, alpha, visible, style:{
width, height, opacity,display ,
},
attrs:{
},
className:""
}; };
const isSecondLayer = !parent.origin.parent; const isSecondLayer = !parent.origin.parent;
...@@ -171,7 +177,7 @@ async function execute(psdFile, options) { ...@@ -171,7 +177,7 @@ async function execute(psdFile, options) {
value = 0; value = 0;
} }
} }
properties[field] = value; properties.style[field] = value;
} }
} }
} }
...@@ -187,24 +193,33 @@ async function execute(psdFile, options) { ...@@ -187,24 +193,33 @@ async function execute(psdFile, options) {
}; };
let dealLater = true; let dealLater = true;
if (x !== 0) { if (x !== 0) {
properties.x = x - (isSecondLayer ? offset.x : 0); properties.style.left = x - (isSecondLayer ? offset.x : 0);
} }
if (y !== 0) { if (y !== 0) {
properties.y = y - (isSecondLayer ? offset.y : 0); properties.style.top = y - (isSecondLayer ? offset.y : 0);
} }
properties.style.position="absolute";
viewNode.rect={
x: properties.style.left?properties.style.left:0,
y: properties.style.top?properties.style.top:0,
width: properties.style.width,
height: properties.style.height
};
if (typeTool) { if (typeTool) {
let fontInfo = typeTool(); let fontInfo = typeTool();
properties.text = fontInfo.textValue; properties.attrs.text = fontInfo.textValue;
const sizes = fontInfo.sizes(); const sizes = fontInfo.sizes();
const colors = fontInfo.colors(); const colors = fontInfo.colors();
properties.size = sizes ? sizes[0] || 20 : 20; properties.style.fontSize = sizes ? sizes[0] || 20 : 20;
let [r, g, b, a] = colors[0]; let [r, g, b, a] = colors[0];
properties.fillColor = `rgba(${r}, ${g}, ${b}, ${a / 255})`; console.log("color",[r, g, b, a]);
viewNode.type = 'label'; properties.style.color = `rgba(${r}, ${g}, ${b}, ${a / 255})`;
viewNode.componentName = 'Label';
dealLater = false; dealLater = false;
} else if (solidColor && layer.vectorMask) { } else if (solidColor && layer.vectorMask) {
let paths = layer.vectorMask().paths; let paths = layer.vectorMask().paths;
if (paths[2].numPoints === 4) { if (paths[2].numPoints === 4) {
let isRect = true; let isRect = true;
...@@ -215,9 +230,9 @@ async function execute(psdFile, options) { ...@@ -215,9 +230,9 @@ async function execute(psdFile, options) {
} }
} }
if (isRect) { if (isRect) {
viewNode.type = 'rect'; viewNode.componentName = 'Div';
const {r, g, b} = solidColor(); const {r, g, b} = solidColor();
properties.fillColor = `rgba(${r}, ${g}, ${b}, 1)`; properties.style.backgroundColor = `rgba(${r}, ${g}, ${b}, 1)`;
dealLater = false; dealLater = false;
} }
} }
...@@ -225,9 +240,9 @@ async function execute(psdFile, options) { ...@@ -225,9 +240,9 @@ async function execute(psdFile, options) {
if (dealLater) { if (dealLater) {
if (node.hasOwnProperty('children')) { if (node.hasOwnProperty('children')) {
viewNode.type = 'node'; viewNode.componentName = 'Div';
} else { } else {
viewNode.type = 'image'; viewNode.componentName = 'Image';
let uuid = generateUUID(); let uuid = generateUUID();
const ext = '.png'; const ext = '.png';
...@@ -257,7 +272,7 @@ async function execute(psdFile, options) { ...@@ -257,7 +272,7 @@ async function execute(psdFile, options) {
}); });
} }
properties.source = 'asset://' + uuid; properties.attrs.source = 'asset://' + uuid;
} }
} }
} }
...@@ -270,10 +285,13 @@ async function execute(psdFile, options) { ...@@ -270,10 +285,13 @@ async function execute(psdFile, options) {
node.view = viewNode; node.view = viewNode;
}); });
console.log(psdFile);
let data = { let data = {
view: viewRoot, pluginVersion:"0.0.1",
reference:"psd",
fileName:psdFile.name,
assets, assets,
view: viewRoot,
}; };
let dataString = JSON.stringify(data); let dataString = JSON.stringify(data);
......
dist/index.es.js.map
View file @ 81d83998
This diff is collapsed.
dist/index.js
View file @ 81d83998
...@@ -92,7 +92,7 @@ async function execute(psdFile, options) { ...@@ -92,7 +92,7 @@ async function execute(psdFile, options) {
let viewRoot = { let viewRoot = {
name: path.basename(psdFile.name, '.psd'), name: path.basename(psdFile.name, '.psd'),
type: 'node', componentName : 'Div',
uuid: generateUUID(), uuid: generateUUID(),
}; };
...@@ -105,10 +105,16 @@ async function execute(psdFile, options) { ...@@ -105,10 +105,16 @@ async function execute(psdFile, options) {
await walkNode(tree, async function (node, parent) { await walkNode(tree, async function (node, parent) {
let {name} = node; let {name} = node;
const {x, y, width, height, alpha, visible, origin: {layer, layer: {typeTool, solidColor}}} = node; const {x, y, width, height, opacity, display, origin: {layer, layer: {typeTool, solidColor}}} = node;
//console.log('walk node:', name); //console.log('walk node:', name);
let properties = { let properties = {
width, height, alpha, visible, style:{
width, height, opacity,display ,
},
attrs:{
},
className:""
}; };
const isSecondLayer = !parent.origin.parent; const isSecondLayer = !parent.origin.parent;
...@@ -177,7 +183,7 @@ async function execute(psdFile, options) { ...@@ -177,7 +183,7 @@ async function execute(psdFile, options) {
value = 0; value = 0;
} }
} }
properties[field] = value; properties.style[field] = value;
} }
} }
} }
...@@ -193,24 +199,33 @@ async function execute(psdFile, options) { ...@@ -193,24 +199,33 @@ async function execute(psdFile, options) {
}; };
let dealLater = true; let dealLater = true;
if (x !== 0) { if (x !== 0) {
properties.x = x - (isSecondLayer ? offset.x : 0); properties.style.left = x - (isSecondLayer ? offset.x : 0);
} }
if (y !== 0) { if (y !== 0) {
properties.y = y - (isSecondLayer ? offset.y : 0); properties.style.top = y - (isSecondLayer ? offset.y : 0);
} }
properties.style.position="absolute";
viewNode.rect={
x: properties.style.left?properties.style.left:0,
y: properties.style.top?properties.style.top:0,
width: properties.style.width,
height: properties.style.height
};
if (typeTool) { if (typeTool) {
let fontInfo = typeTool(); let fontInfo = typeTool();
properties.text = fontInfo.textValue; properties.attrs.text = fontInfo.textValue;
const sizes = fontInfo.sizes(); const sizes = fontInfo.sizes();
const colors = fontInfo.colors(); const colors = fontInfo.colors();
properties.size = sizes ? sizes[0] || 20 : 20; properties.style.fontSize = sizes ? sizes[0] || 20 : 20;
let [r, g, b, a] = colors[0]; let [r, g, b, a] = colors[0];
properties.fillColor = `rgba(${r}, ${g}, ${b}, ${a / 255})`; console.log("color",[r, g, b, a]);
viewNode.type = 'label'; properties.style.color = `rgba(${r}, ${g}, ${b}, ${a / 255})`;
viewNode.componentName = 'Label';
dealLater = false; dealLater = false;
} else if (solidColor && layer.vectorMask) { } else if (solidColor && layer.vectorMask) {
let paths = layer.vectorMask().paths; let paths = layer.vectorMask().paths;
if (paths[2].numPoints === 4) { if (paths[2].numPoints === 4) {
let isRect = true; let isRect = true;
...@@ -221,9 +236,9 @@ async function execute(psdFile, options) { ...@@ -221,9 +236,9 @@ async function execute(psdFile, options) {
} }
} }
if (isRect) { if (isRect) {
viewNode.type = 'rect'; viewNode.componentName = 'Div';
const {r, g, b} = solidColor(); const {r, g, b} = solidColor();
properties.fillColor = `rgba(${r}, ${g}, ${b}, 1)`; properties.style.backgroundColor = `rgba(${r}, ${g}, ${b}, 1)`;
dealLater = false; dealLater = false;
} }
} }
...@@ -231,9 +246,9 @@ async function execute(psdFile, options) { ...@@ -231,9 +246,9 @@ async function execute(psdFile, options) {
if (dealLater) { if (dealLater) {
if (node.hasOwnProperty('children')) { if (node.hasOwnProperty('children')) {
viewNode.type = 'node'; viewNode.componentName = 'Div';
} else { } else {
viewNode.type = 'image'; viewNode.componentName = 'Image';
let uuid = generateUUID(); let uuid = generateUUID();
const ext = '.png'; const ext = '.png';
...@@ -263,7 +278,7 @@ async function execute(psdFile, options) { ...@@ -263,7 +278,7 @@ async function execute(psdFile, options) {
}); });
} }
properties.source = 'asset://' + uuid; properties.attrs.source = 'asset://' + uuid;
} }
} }
} }
...@@ -276,10 +291,13 @@ async function execute(psdFile, options) { ...@@ -276,10 +291,13 @@ async function execute(psdFile, options) {
node.view = viewNode; node.view = viewNode;
}); });
console.log(psdFile);
let data = { let data = {
view: viewRoot, pluginVersion:"0.0.1",
reference:"psd",
fileName:psdFile.name,
assets, assets,
view: viewRoot,
}; };
let dataString = JSON.stringify(data); let dataString = JSON.stringify(data);
......
dist/index.js.map
View file @ 81d83998
This diff is collapsed.
dist/index.umd.js
View file @ 81d83998
...@@ -2,13 +2,13 @@ ...@@ -2,13 +2,13 @@
typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('path'), require('color'), require('uuid/v4'), require('object-hash'), require('zlib')) : typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('path'), require('color'), require('uuid/v4'), require('object-hash'), require('zlib')) :
typeof define === 'function' && define.amd ? define(['exports', 'path', 'color', 'uuid/v4', 'object-hash', 'zlib'], factory) : typeof define === 'function' && define.amd ? define(['exports', 'path', 'color', 'uuid/v4', 'object-hash', 'zlib'], factory) :
(global = global || self, factory(global['psd-parse-web'] = {}, global.path, global.color, global.generateUUID, global.hash, global.zlib)); (global = global || self, factory(global['psd-parse-web'] = {}, global.path, global.color, global.generateUUID, global.hash, global.zlib));
}(this, function (exports, path, color, generateUUID, hash, zlib) { 'use strict'; }(this, (function (exports, path, color, generateUUID, hash, zlib) { 'use strict';
path = path && path.hasOwnProperty('default') ? path['default'] : path; path = path && Object.prototype.hasOwnProperty.call(path, 'default') ? path['default'] : path;
color = color && color.hasOwnProperty('default') ? color['default'] : color; color = color && Object.prototype.hasOwnProperty.call(color, 'default') ? color['default'] : color;
generateUUID = generateUUID && generateUUID.hasOwnProperty('default') ? generateUUID['default'] : generateUUID; generateUUID = generateUUID && Object.prototype.hasOwnProperty.call(generateUUID, 'default') ? generateUUID['default'] : generateUUID;
hash = hash && hash.hasOwnProperty('default') ? hash['default'] : hash; hash = hash && Object.prototype.hasOwnProperty.call(hash, 'default') ? hash['default'] : hash;
zlib = zlib && zlib.hasOwnProperty('default') ? zlib['default'] : zlib; zlib = zlib && Object.prototype.hasOwnProperty.call(zlib, 'default') ? zlib['default'] : zlib;
/** /**
* Created by rockyl on 2019-08-09. * Created by rockyl on 2019-08-09.
...@@ -92,7 +92,7 @@ ...@@ -92,7 +92,7 @@
let viewRoot = { let viewRoot = {
name: path.basename(psdFile.name, '.psd'), name: path.basename(psdFile.name, '.psd'),
type: 'node', componentName : 'Div',
uuid: generateUUID(), uuid: generateUUID(),
}; };
...@@ -105,10 +105,16 @@ ...@@ -105,10 +105,16 @@
await walkNode(tree, async function (node, parent) { await walkNode(tree, async function (node, parent) {
let {name} = node; let {name} = node;
const {x, y, width, height, alpha, visible, origin: {layer, layer: {typeTool, solidColor}}} = node; const {x, y, width, height, opacity, display, origin: {layer, layer: {typeTool, solidColor}}} = node;
//console.log('walk node:', name); //console.log('walk node:', name);
let properties = { let properties = {
width, height, alpha, visible, style:{
width, height, opacity,display ,
},
attrs:{
},
className:""
}; };
const isSecondLayer = !parent.origin.parent; const isSecondLayer = !parent.origin.parent;
...@@ -177,7 +183,7 @@ ...@@ -177,7 +183,7 @@
value = 0; value = 0;
} }
} }
properties[field] = value; properties.style[field] = value;
} }
} }
} }
...@@ -193,24 +199,33 @@ ...@@ -193,24 +199,33 @@
}; };
let dealLater = true; let dealLater = true;
if (x !== 0) { if (x !== 0) {
properties.x = x - (isSecondLayer ? offset.x : 0); properties.style.left = x - (isSecondLayer ? offset.x : 0);
} }
if (y !== 0) { if (y !== 0) {
properties.y = y - (isSecondLayer ? offset.y : 0); properties.style.top = y - (isSecondLayer ? offset.y : 0);
} }
properties.style.position="absolute";
viewNode.rect={
x: properties.style.left?properties.style.left:0,
y: properties.style.top?properties.style.top:0,
width: properties.style.width,
height: properties.style.height
};
if (typeTool) { if (typeTool) {
let fontInfo = typeTool(); let fontInfo = typeTool();
properties.text = fontInfo.textValue; properties.attrs.text = fontInfo.textValue;
const sizes = fontInfo.sizes(); const sizes = fontInfo.sizes();
const colors = fontInfo.colors(); const colors = fontInfo.colors();
properties.size = sizes ? sizes[0] || 20 : 20; properties.style.fontSize = sizes ? sizes[0] || 20 : 20;
let [r, g, b, a] = colors[0]; let [r, g, b, a] = colors[0];
properties.fillColor = `rgba(${r}, ${g}, ${b}, ${a / 255})`; console.log("color",[r, g, b, a]);
viewNode.type = 'label'; properties.style.color = `rgba(${r}, ${g}, ${b}, ${a / 255})`;
viewNode.componentName = 'Label';
dealLater = false; dealLater = false;
} else if (solidColor && layer.vectorMask) { } else if (solidColor && layer.vectorMask) {
let paths = layer.vectorMask().paths; let paths = layer.vectorMask().paths;
if (paths[2].numPoints === 4) { if (paths[2].numPoints === 4) {
let isRect = true; let isRect = true;
...@@ -221,9 +236,9 @@ ...@@ -221,9 +236,9 @@
} }
} }
if (isRect) { if (isRect) {
viewNode.type = 'rect'; viewNode.componentName = 'Div';
const {r, g, b} = solidColor(); const {r, g, b} = solidColor();
properties.fillColor = `rgba(${r}, ${g}, ${b}, 1)`; properties.style.backgroundColor = `rgba(${r}, ${g}, ${b}, 1)`;
dealLater = false; dealLater = false;
} }
} }
...@@ -231,9 +246,9 @@ ...@@ -231,9 +246,9 @@
if (dealLater) { if (dealLater) {
if (node.hasOwnProperty('children')) { if (node.hasOwnProperty('children')) {
viewNode.type = 'node'; viewNode.componentName = 'Div';
} else { } else {
viewNode.type = 'image'; viewNode.componentName = 'Image';
let uuid = generateUUID(); let uuid = generateUUID();
const ext = '.png'; const ext = '.png';
...@@ -263,7 +278,7 @@ ...@@ -263,7 +278,7 @@
}); });
} }
properties.source = 'asset://' + uuid; properties.attrs.source = 'asset://' + uuid;
} }
} }
} }
...@@ -276,10 +291,13 @@ ...@@ -276,10 +291,13 @@
node.view = viewNode; node.view = viewNode;
}); });
console.log(psdFile);
let data = { let data = {
view: viewRoot, pluginVersion:"0.0.1",
reference:"psd",
fileName:psdFile.name,
assets, assets,
view: viewRoot,
}; };
let dataString = JSON.stringify(data); let dataString = JSON.stringify(data);
...@@ -302,5 +320,5 @@ ...@@ -302,5 +320,5 @@
Object.defineProperty(exports, '__esModule', { value: true }); Object.defineProperty(exports, '__esModule', { value: true });
})); })));
//# sourceMappingURL=index.umd.js.map //# sourceMappingURL=index.umd.js.map
dist/index.umd.js.map
View file @ 81d83998
This diff is collapsed.
src/zeroing.js
View file @ 81d83998
/** /**
* Created by rockyl on 2019-09-26. * Created by renjianfeng on 2020-06-11.
* *
* 导出zeroing的视图 * 导出spark的视图
*/ */
import {getTree} from "./psd-tree"; import {getTree} from "./psd-tree";
...@@ -33,7 +33,7 @@ export async function execute(psdFile, options) { ...@@ -33,7 +33,7 @@ export async function execute(psdFile, options) {
let viewRoot = { let viewRoot = {
name: path.basename(psdFile.name, '.psd'), name: path.basename(psdFile.name, '.psd'),
type: 'node', componentName : 'Div',
uuid: generateUUID(), uuid: generateUUID(),
}; };
...@@ -46,15 +46,19 @@ export async function execute(psdFile, options) { ...@@ -46,15 +46,19 @@ export async function execute(psdFile, options) {
await walkNode(tree, async function (node, parent) { await walkNode(tree, async function (node, parent) {
let {name} = node; let {name} = node;
const {x, y, width, height, alpha, visible, origin: {layer, layer: {typeTool, solidColor}}} = node; const {x, y, width, height, opacity, display, origin: {layer, layer: {typeTool, solidColor}}} = node;
//console.log('walk node:', name); //console.log('walk node:', name);
let properties = { let properties = {
width, height, alpha, visible, style:{
width, height, opacity,display ,
},
attrs:{
},
className:""
}; };
const isSecondLayer = !parent.origin.parent; const isSecondLayer = !parent.origin.parent;
const {width: parentWidth, height: parentHeight} = parent;
if (name.includes('|')) { if (name.includes('|')) {
try { try {
let arr = name.split('|'); let arr = name.split('|');
...@@ -120,7 +124,7 @@ export async function execute(psdFile, options) { ...@@ -120,7 +124,7 @@ export async function execute(psdFile, options) {
value = 0; value = 0;
} }
} }
properties[field] = value; properties.style[field] = value;
} }
} }
} }
...@@ -136,24 +140,33 @@ export async function execute(psdFile, options) { ...@@ -136,24 +140,33 @@ export async function execute(psdFile, options) {
}; };
let dealLater = true; let dealLater = true;
if (x !== 0) { if (x !== 0) {
properties.x = x - (isSecondLayer ? offset.x : 0); properties.style.left = x - (isSecondLayer ? offset.x : 0);
} }
if (y !== 0) { if (y !== 0) {
properties.y = y - (isSecondLayer ? offset.y : 0); properties.style.top = y - (isSecondLayer ? offset.y : 0);
}
properties.style.position="absolute"
viewNode.rect={
x: properties.style.left?properties.style.left:0,
y: properties.style.top?properties.style.top:0,
width: properties.style.width,
height: properties.style.height
} }
if (typeTool) { if (typeTool) {
let fontInfo = typeTool(); let fontInfo = typeTool();
properties.text = fontInfo.textValue; properties.attrs.text = fontInfo.textValue;
const sizes = fontInfo.sizes(); const sizes = fontInfo.sizes();
const colors = fontInfo.colors(); const colors = fontInfo.colors();
properties.size = sizes ? sizes[0] || 20 : 20; properties.style.fontSize = sizes ? sizes[0] || 20 : 20;
let [r, g, b, a] = colors[0]; let [r, g, b, a] = colors[0];
properties.fillColor = `rgba(${r}, ${g}, ${b}, ${a / 255})`; console.log("color",[r, g, b, a])
viewNode.type = 'label'; properties.style.color = `rgba(${r}, ${g}, ${b}, ${a / 255})`;
viewNode.componentName = 'Label';
dealLater = false; dealLater = false;
} else if (solidColor && layer.vectorMask) { } else if (solidColor && layer.vectorMask) {
let paths = layer.vectorMask().paths; let paths = layer.vectorMask().paths;
if (paths[2].numPoints === 4) { if (paths[2].numPoints === 4) {
let isRect = true; let isRect = true;
...@@ -164,9 +177,9 @@ export async function execute(psdFile, options) { ...@@ -164,9 +177,9 @@ export async function execute(psdFile, options) {
} }
} }
if (isRect) { if (isRect) {
viewNode.type = 'rect'; viewNode.componentName = 'Div';
const {r, g, b} = solidColor(); const {r, g, b} = solidColor();
properties.fillColor = `rgba(${r}, ${g}, ${b}, 1)`; properties.style.backgroundColor = `rgba(${r}, ${g}, ${b}, 1)`;
dealLater = false; dealLater = false;
} }
} }
...@@ -174,9 +187,9 @@ export async function execute(psdFile, options) { ...@@ -174,9 +187,9 @@ export async function execute(psdFile, options) {
if (dealLater) { if (dealLater) {
if (node.hasOwnProperty('children')) { if (node.hasOwnProperty('children')) {
viewNode.type = 'node'; viewNode.componentName = 'Div';
} else { } else {
viewNode.type = 'image'; viewNode.componentName = 'Image';
let uuid = generateUUID(); let uuid = generateUUID();
const ext = '.png'; const ext = '.png';
...@@ -206,7 +219,7 @@ export async function execute(psdFile, options) { ...@@ -206,7 +219,7 @@ export async function execute(psdFile, options) {
}); });
} }
properties.source = 'asset://' + uuid; properties.attrs.source = 'asset://' + uuid;
} }
} }
} }
...@@ -219,10 +232,13 @@ export async function execute(psdFile, options) { ...@@ -219,10 +232,13 @@ export async function execute(psdFile, options) {
node.view = viewNode; node.view = viewNode;
}); });
console.log(psdFile)
let data = { let data = {
view: viewRoot, pluginVersion:"0.0.1",
reference:"psd",
fileName:psdFile.name,
assets, assets,
view: viewRoot,
}; };
let dataString = JSON.stringify(data); let dataString = JSON.stringify(data);
...@@ -236,6 +252,6 @@ export async function execute(psdFile, options) { ...@@ -236,6 +252,6 @@ export async function execute(psdFile, options) {
console.log(res.length); console.log(res.length);
resolve(res); resolve(res);
} }
}) });
}) })
} }
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment