this.toggleExpand(model, e)}/>
91 | {hasMask &&
111 | };
112 |
113 | render() {
114 | let {model, selectedLayer, hoveredLayer, onSelect, onMouseEnter, onMouseLeave, style, ...props} = this.props;
115 | this.idx = 0;
116 | return (
117 | ↳
}
92 | {model._class === 'group' && folder}
93 | {model._class === 'text' &&
94 | Aa
}
95 | {model._class === 'shapeGroup' &&
96 | S
}
97 | {(model._class === 'symbolInstance' || model._class === 'symbolMaster') && symbol}
98 | {model._class === 'bitmap' && bitmap}
99 | {model.name}
100 | {!model.isVisible && eye}
101 | {model.isVisible && model.isLocked && lock}
102 |
103 | { canExpanded && isExpanded &&
104 |
105 | {model.layers.slice(0).reverse().map((layer, i) =>
106 | this.treeview(layer, depth + 1, layerMaskFlag[i])
107 | )}
108 |
109 | }
110 |
124 |
);
143 | }
144 | }
--------------------------------------------------------------------------------
/src/components/Document/PageSelector.js:
--------------------------------------------------------------------------------
1 | import React from "react";
2 |
3 |
4 | export default class PageSelector extends React.PureComponent {
5 | render() {
6 | let {model, selectedPage, onSelect, style, ...props} = this.props;
7 | let {pagesAndArtboards} = model;
8 | return (
9 |
130 | {model.name}
131 |
132 |
136 | {
137 | model.layers.map((artboard) =>
138 | this.treeview(artboard)
139 | ).reverse()
140 | }
141 |
142 |
16 |
);
38 | }
39 | }
--------------------------------------------------------------------------------
/src/components/Document/PageSelector/__fixtures__/default.js:
--------------------------------------------------------------------------------
1 | export default {
2 | props: {
3 | selectedPage: "9B2D6A75-D2C0-40F3-88AB-AE4BD625E520",
4 | model: {
5 | "9B2D6A75-D2C0-40F3-88AB-AE4BD625E520": {
6 | "name": "Page 1",
7 | "artboards": {
8 | "A8E5EE18-1107-4A18-BC0C-BE7EAD0135DD": {
9 | "name": "Artboard"
10 | },
11 | "EE2328CD-533A-494C-B438-085002962A3B": {
12 | "name": "Menu"
13 | },
14 | "B8ECDD04-C5B6-496B-B640-7743425317F7": {
15 | "name": "Detail View"
16 | },
17 | "98555297-4575-40EC-AB67-B1C3918F163C": {
18 | "name": "History"
19 | },
20 | "0D7CFF39-0795-427A-A195-749BCFB97FA4": {
21 | "name": "Timeline"
22 | },
23 | "10E1A27E-C298-40A5-8547-A62A031514C6": {
24 | "name": "Friends"
25 | },
26 | "8FC9E048-A8C7-4D6D-9295-ABF623D28EF7": {
27 | "name": "Artboard 2"
28 | },
29 | "DDD74CEB-8B48-487D-92D8-4FD3BDB04411": {
30 | "name": "Profile"
31 | }
32 | }
33 | },
34 | "FE9FC96B-0BC2-4F9D-9103-291E81FFBC89": {
35 | "name": "Test",
36 | "artboards": {
37 | "67721912-B3C8-4E42-ADD7-6B1DAA198C25": {
38 | "name": "Artboard 2"
39 | },
40 | "15B11D08-4924-4C01-B238-D75146184310": {
41 | "name": "xx"
42 | },
43 | "F0A42559-1D43-4F22-8343-4281CB57F7C1": {
44 | "name": "Artboard"
45 | }
46 | }
47 | },
48 | "1C01EF08-06C2-469A-8EB7-0BF12367FF6E": {
49 | "name": "Symbols",
50 | "artboards": {
51 | "32FD6548-E53C-4615-88E6-117FBDACCF42": {
52 | "name": "Background"
53 | },
54 | "156E2FF8-7889-431D-82F1-9021CE955F5E": {
55 | "name": "123"
56 | },
57 | "94D9121A-2939-4CDA-8871-C4934FF48F23": {
58 | "name": "Settings + Settings"
59 | },
60 | "3D529B09-3AA9-41FF-9675-1C6895CC20A9": {
61 | "name": "Artboard"
62 | },
63 | "3C69524A-C8CD-4847-B6C1-62807F339A48": {
64 | "name": "Status Bar"
65 | },
66 | "72C43561-2764-4D7C-8C6A-5A4B3FED4727": {
67 | "name": "Time"
68 | }
69 | }
70 | }
71 | }
72 | }
73 | }
--------------------------------------------------------------------------------
/src/components/Document/__fixtures__/Fitness App.sketch:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/zjuasmn/sketch-react/8582552e8538cdf507f6899724d4a9124028d394/src/components/Document/__fixtures__/Fitness App.sketch
--------------------------------------------------------------------------------
/src/components/Document/__fixtures__/document.js:
--------------------------------------------------------------------------------
1 | // let fileUrl = require('./ui-video-simple-john-hansen.sketch');
2 | let fileUrl = require('./Fitness App.sketch');
3 |
4 | export default {props: {blob: fetch(fileUrl).then(response => response.blob())}}
--------------------------------------------------------------------------------
/src/components/Document/__fixtures__/ui-video-simple-john-hansen.sketch:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/zjuasmn/sketch-react/8582552e8538cdf507f6899724d4a9124028d394/src/components/Document/__fixtures__/ui-video-simple-john-hansen.sketch
--------------------------------------------------------------------------------
/src/components/Document/bg.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/zjuasmn/sketch-react/8582552e8538cdf507f6899724d4a9124028d394/src/components/Document/bg.png
--------------------------------------------------------------------------------
/src/components/Document/folder.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/zjuasmn/sketch-react/8582552e8538cdf507f6899724d4a9124028d394/src/components/Document/folder.png
--------------------------------------------------------------------------------
/src/components/Layer/Artboard.js:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import Group from './Group'
3 |
4 | export default class Artboard extends Group {
5 | render() {
6 | let {style, ...props} = this.props;
7 | return Pages
21 |
22 |
23 | {
24 | Object.keys(pagesAndArtboards).reverse().map((id, i) =>
25 |
37 | onSelect(id)}>{pagesAndArtboards[id].name}
34 | )
35 | }
36 |
39 | {children}
40 |
);
41 | }
42 | let mask = model.layers[0];
43 | let maskStyle = mask.style.toStyle(mask);
44 |
45 | return (
46 | {
55 | mask.frame.y || mask.frame.x ?
56 |
);
68 |
69 | }
70 | }
--------------------------------------------------------------------------------
/src/components/Layer/Layer.js:
--------------------------------------------------------------------------------
1 | import React from "react";
2 | import Page from "./Page";
3 | import Artboard from "./Artboard";
4 | import ShapeGroup from "./ShapeGroup";
5 | import Group from "./Group";
6 | import SymbolInstance from "./Symbol";
7 | import Text from "./Text";
8 | import Bitmap from "./Bitmap";
9 | import {getSymbolById} from "../../utils";
10 | import PropTypes from "prop-types";
11 |
12 | class PlaceHolder extends React.Component {
13 | render() {
14 | let {model} = this.props;
15 |
16 | let {frame} = model;
17 | if (!frame) {
18 | debugger
19 | }
20 | return
61 | {children}
62 |
63 | :
64 | children
65 | }
66 |
67 | {model._class}
;
29 | }
30 | }
31 | function getComp(_class) {
32 | switch (_class) {
33 | case 'mask':
34 | return Mask;
35 | case 'page':
36 | return Page;
37 | case 'artboard':
38 | case 'symbolMaster':
39 | return Artboard;
40 | case `shapeGroup`:
41 | return ShapeGroup;
42 | case `group`:
43 | return Group;
44 | case `text`:
45 | return Text;
46 | case `symbolInstance`:
47 | return SymbolInstance;
48 | case `bitmap`:
49 | return Bitmap;
50 | default:
51 | return PlaceHolder;
52 | }
53 | }
54 | class Mask extends React.Component {
55 | render() {
56 | let {model, children, ...props} = this.props;
57 | let {frame} = model;
58 |
59 | let style = {
60 | position: 'absolute',
61 | overflow: 'hidden',
62 | height: frame.height,
63 | width: frame.width,
64 | top: frame.y,
65 | left: frame.x,
66 | };
67 | return (
68 |
69 | {children}
70 |
);
71 | }
72 | }
73 | export default class Layer extends React.PureComponent {
74 | static contextTypes = {
75 | onClick: PropTypes.func,
76 | onMouseEnter: PropTypes.func,
77 | onMouseLeave: PropTypes.func,
78 | };
79 | onClick = (e) => {
80 | if (this.props.inSymbol) {
81 | return;
82 | }
83 | this.context.onClick(this.props.model.do_objectID);
84 | e.stopPropagation();
85 | };
86 | onMouseEnter = (e) => {
87 | if (this.props.inSymbol) {
88 | return;
89 | }
90 | this.context.onMouseEnter(this.props.model.do_objectID);
91 | // e.stopPropagation();
92 | };
93 | onMouseLeave = (e) => {
94 | if (this.props.inSymbol) {
95 | return;
96 | }
97 | this.context.onMouseLeave(this.props.model.do_objectID);
98 | // e.stopPropagation();
99 | };
100 |
101 | render() {
102 | let {model, inSymbol, ...props} = this.props;
103 | let {layers, _class} = model;
104 | let Comp = getComp(_class);
105 | if (Comp === SymbolInstance) {
106 | layers = getSymbolById(model['symbolID']).layers;
107 | }
108 | return
17 |
18 | {children}
19 |
20 | {model.layers.map(artboard =>
);
32 | }
33 | }
34 |
--------------------------------------------------------------------------------
/src/components/Layer/ShapeGroup.js:
--------------------------------------------------------------------------------
1 | import React from "react";
2 | import {BooleanOperation} from 'sketch-constants'
3 |
4 | export default class ShapeGroup extends React.Component {
5 |
6 | render() {
7 | let {model, children, style, ...props} = this.props;
8 | let {frame} = model;
9 | if (model.isSimple()) {
10 | style = {
11 | ...model.style.toStyle(model),
12 | ...style
13 | };
14 | return {artboard.name}
)}
30 |
31 | {
25 | !('background' in style) && model.style['fills'] && model.style['fills']
26 | .filter(fill => fill['isEnabled'])
27 | .map((fill, i) => )
38 | }
39 | } else {
40 | let ds = [];
41 | let d = '';
42 | for (let layer of model.layers) {
43 | if (layer['isVisible']) {
44 | if (layer['booleanOperation'] === BooleanOperation.Union) {
45 | ds.push(d);
46 | d = '';
47 | }
48 | d += layer.toD();
49 | }
50 | }
51 | ds.push(d);
52 | return ;
66 | }
67 |
68 | }
69 | }
--------------------------------------------------------------------------------
/src/components/Layer/Symbol.js:
--------------------------------------------------------------------------------
1 | import React from "react";
2 |
3 |
4 | export default class Symbol extends React.Component {
5 | render() {
6 | let {model: {frame}, style, ...props} = this.props;
7 | style = {
8 | position: 'absolute',
9 | height: frame.height,
10 | width: frame.width,
11 | top: frame.y,
12 | left: frame.x,
13 | ...style,
14 | };
15 | return ;
16 | }
17 | }
--------------------------------------------------------------------------------
/src/components/Layer/Text.js:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import classnames from 'classnames'
3 |
4 | export default class Text extends React.Component {
5 | render() {
6 | let {model, style, ...props} = this.props;
7 | let {frame} = model;
8 |
9 | return {model.attributedString.archivedAttributedString.NSString};
20 | }
21 | }
--------------------------------------------------------------------------------
/src/components/Layer/__fixtures__/layer.js:
--------------------------------------------------------------------------------
1 | // let json = require('../../../../playground/9B2D6A75-D2C0-40F3-88AB-AE4BD625E520.json');
2 | // import {parse} from '../../../utils'
3 | //
4 | // export default {props:{model:parse(json)}}
--------------------------------------------------------------------------------
/src/components/Site/App.js:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import Document from '../Document/Document'
3 | import "./index.css";
4 | import fetch from 'isomorphic-fetch'
5 | import Loading from './Loading'
6 | import qs from 'querystring'
7 |
8 | // https://github.com/github/fetch/issues/89#issuecomment-256610849
9 | function futch(url, opts = {}, onProgress) {
10 | return new Promise((res, rej) => {
11 | let xhr = new XMLHttpRequest();
12 | xhr.responseType = "blob";
13 | xhr.open(opts.method || 'get', url);
14 | for (let k in opts.headers || {})
15 | xhr.setRequestHeader(k, opts.headers[k]);
16 | xhr.onload = e => res(e.target);
17 | xhr.onerror = rej;
18 | // event.loaded / event.total * 100 ; //event.lengthComputable
19 | if (onProgress) {
20 | xhr.upload && xhr.upload.addEventListener('progress', onProgress);
21 | xhr.addEventListener('progress', onProgress);
22 | }
23 | xhr.send(opts.body);
24 | });
25 | }
26 |
27 | class Header extends React.PureComponent {
28 | onClickTitle = () => {
29 | this.fileInput && this.fileInput.click();
30 | };
31 | gao = (input) => {
32 | this.fileInput = input;
33 | };
34 |
35 | render() {
36 | let {file, filename = '', onSelectFile} = this.props;
37 | return
38 | Sketch React
39 |
40 | {
41 | file &&
42 | {filename.replace(/\.sketch$/, '')}
43 |
44 |
45 | }
46 | {!file && }
47 |
56 | }
57 | }
58 | const simpleFiles = [
59 | 'https://zjuasmn.github.io/sketch-react/images/ui-video-simple-john-hansen.sketch',
60 | 'https://zjuasmn.github.io/sketch-react/images/Fitness%20App.sketch',
61 | ];
62 | function getName(url) {
63 | return decodeURIComponent(url.substring(url.lastIndexOf('/') + 1));
64 | }
65 | export default class App extends React.Component {
66 | constructor(props) {
67 | super(props);
68 | this.state = {};
69 | }
70 |
71 | onSelectFile = (e) => {
72 | if (!e) {
73 | return this.setState({file: null, filename: ''});
74 | }
75 | e.preventDefault();
76 | let file;
77 | if (e.dataTransfer) {
78 | file = e.dataTransfer.files[0];
79 | } else if (e.target.files.length) {
80 | file = e.target.files[0];
81 | }
82 | if (file) {
83 |
84 | this.setState({file, filename: file.name});
85 | }
86 | };
87 | onClickButton = () => {
88 | this.fileInput && this.fileInput.click();
89 | };
90 | gao = (input) => {
91 | this.fileInput = input;
92 | };
93 | selectFileFromURL = (url) => {
94 | this.setState({file: fetch(url).then(r => r.blob()), filename: getName(url)})
95 | };
96 |
97 | componentWillMount() {
98 | console.log('mount', this.state);
99 | let url;
100 | if (this.props.__url) {// for test
101 | url = this.props.__url
102 | } else {
103 | let queryObj = qs.parse(location.search.substr(1));
104 | if ('url' in queryObj) {
105 | url = queryObj['url'];
106 | }
107 | }
108 | if (url) {
109 | this.setState({loading: true, filename: getName(url)});
110 | futch(url, {}, (progress) => {
111 | this.setState({progress})
112 | })
113 | .then(e => {
114 | if (200 <= e.status && e.status < 300) {
115 | this.setState({loading: false, file: e.response});
116 | } else {
117 | throw new Error('fail to fetch file from this url!');
118 |
119 | }
120 | })
121 | .catch(e => {
122 | this.setState({loading: false});
123 | if(e.message) {
124 | alert(e.message);
125 | }else{
126 | alert(`Fail to load from this url. Does it allow cross domain access?`);
127 | }
128 | location.search = '';
129 | });
130 | }
131 | }
132 |
133 | render() {
134 | let {file, filename, loading, progress} = this.state;
135 |
136 | return
48 |
49 |
53 |
54 |
55 |
137 |
138 | { loading &&
139 | location.search = ''}/>}
146 | {!loading && !file &&
203 | }
204 | }
--------------------------------------------------------------------------------
/src/components/Site/App/__fixtures__/default.js:
--------------------------------------------------------------------------------
1 | export default {
2 | props: {
3 | // __url: 'https://zjuasmn.github.io/sketch-react/images/Fitness%20App.sketch',
4 | }
5 | }
--------------------------------------------------------------------------------
/src/components/Site/Loading.js:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import prettyBytes from '../../utils/pretty-bytes'
3 |
4 | export default class Loading extends React.Component {
5 | render() {
6 | let {filename, progress = {total: 0, loaded: 0}, onCancel, style, ...props} = this.props;
7 | let ratio = progress.total ? progress.loaded / progress.total : 0;
8 | return (
9 |
147 |
}
201 | {!loading && file && From Local File
148 | {
150 | e.preventDefault();
151 | }}
152 | onDragLeave={(e) => {
153 | e.preventDefault();
154 | }}
155 | onDragOver={(e) => {
156 | e.preventDefault();
157 | }}
158 | onDrop={this.onSelectFile}
159 | // onDropCapture={(e) => {
160 | // e.preventDefault();
161 | // console.log(e);
162 | // debugger
163 | // }}
164 | >
165 |
169 | Drop .sketch(v43+) file here
166 | Or select from computer
168 |
170 |
181 | {/*From URL
171 | 178 | location.search = `?url=${encodeURIComponent(document.getElementById('url').value)}`}>Go 180 |*/}
182 | {/* {*/}
183 | {/*let url = prompt(`Enter the file's URL`);*/}
184 | {/*if (url) {*/}
185 | {/*this.selectFileFromURL(url);*/}
186 | {/*}*/}
187 | {/*}}>parse .sketch file on web*/}
188 | {/*
*/}
189 |
190 |
200 | Sample Files
191 |
192 | {simpleFiles.map(url =>
193 |
199 |
194 | location.search = `?url=${encodeURIComponent(url)}`}>{getName(url)}
195 | {' ('}raw)
196 |
197 | )}
198 |
15 |
76 | );
77 | }
78 | }
--------------------------------------------------------------------------------
/src/components/Site/Loading/__fixtures__/default.js:
--------------------------------------------------------------------------------
1 | export default {
2 | props: {
3 | progress: {
4 | total: 15461421,
5 | loaded: 2302000,
6 | },
7 | onCancel: () => alert('cancel click'),
8 | filename: 'sample.sketch',
9 | }
10 | }
--------------------------------------------------------------------------------
/src/components/Site/index.css:
--------------------------------------------------------------------------------
1 | html, body, #root {
2 | height: 100%;
3 | margin: 0;
4 | padding: 0;
5 | }
6 | body{
7 | font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
8 | }
9 | .header {
10 | height: 32px;
11 | display: flex;
12 | align-items: center;
13 | padding: 0 16px;
14 | box-shadow: 0 1px 0 0 #b2b2b2;
15 | }
16 |
17 | .header a {
18 | color: #666;
19 | text-decoration: none;
20 | /*cursor: pointer;*/
21 | }
22 |
23 | .header a:hover {
24 | color: #333;
25 | }
26 |
27 | .flex {
28 | flex: 1;
29 | }
30 |
31 | .title {
32 | text-decoration: none;
33 | font-size: 18px;
34 | color: #666;
35 | width: 120px;
36 | }
37 |
38 | .filename {
39 | flex: 1;
40 | text-align: center;
41 | color: #666;
42 | font-size: 16px;
43 |
44 | }
45 |
46 | .title:hover {
47 | color: #333;
48 | }
49 |
50 | .icon {
51 | fill: #999;
52 |
53 | }
54 |
55 | .actions {
56 | width: 120px;
57 | }
58 |
59 | .icon-link {
60 | display: block;
61 | float: right;
62 | height: 16px;
63 | }
64 |
65 | .icon-link:hover .icon {
66 | fill: #333;
67 | }
68 |
69 | .upload-area {
70 | margin: 64px auto 0;
71 | height: 180px;
72 | width: 320px;
73 | padding: 16px;
74 | border: 2px dashed #666;
75 | display: flex;
76 | flex-direction: column;
77 | }
78 | .upload-area .desc{
79 | flex: 1;
80 | text-align: center;
81 | padding-top: 32px;
82 | font-size: 16px;
83 | color: #666;
84 | }
85 | .upload-button {
86 | cursor: pointer;
87 | display: block;
88 | background: #3884ff;
89 | color: white;
90 | text-align: center;
91 | padding: 4px 16px;
92 | border-radius: 3px;
93 | font-size: 14px;
94 | line-height: 24px;
95 | }
96 |
97 | .sample {
98 | margin: 16px auto;
99 | text-align: center;
100 | }
101 | .sample-header{
102 | color: #666;
103 | }
104 | .sample-link{
105 | cursor: pointer;
106 |
107 | font-size: 16px;
108 | line-height: 24px;
109 | margin-top: 8px;
110 | }
111 | .sample-link a{
112 | color: #3884ff;
113 | text-decoration: underline;
114 | }
--------------------------------------------------------------------------------
/src/index.js:
--------------------------------------------------------------------------------
1 | import Document from './components/Document/Document'
2 |
3 | export default Document;
--------------------------------------------------------------------------------
/src/models/index.js:
--------------------------------------------------------------------------------
1 | import "babel-polyfill";
2 | import {BlendingMode, CurvePointMode, FillType} from "sketch-constants";
3 | import kebabCase from "lodash/kebabCase";
4 |
5 |
6 | export class Page {
7 | static _class = 'page';
8 | }
9 |
10 | export class Rect {
11 | static _class = 'rect';
12 |
13 | set x(_x) {
14 | this._x = _x;
15 | }
16 |
17 | get x() {
18 | return Math.round(this._x);
19 | }
20 |
21 | set y(_y) {
22 | this._y = _y;
23 | }
24 |
25 | get y() {
26 | return Math.round(this._y);
27 | }
28 |
29 | set width(_width) {
30 | this._width = _width;
31 | }
32 |
33 | get width() {
34 | return Math.round(this._width);
35 | }
36 |
37 | set height(_height) {
38 | this._height = _height;
39 | }
40 |
41 | get height() {
42 | return Math.round(this._height);
43 | }
44 | }
45 | export class ShapeGroup {
46 | static _class = 'shapeGroup';
47 |
48 | isSimple() {
49 | let {layers} = this;
50 | if (layers && layers.length === 1 && !layers[0]['edited']) {
51 | if (layers[0] instanceof Oval && this.frame.width === this.frame.height) {
52 | return true;
53 | }
54 | if (layers[0] instanceof Rectangle) {
55 | return true;
56 | }
57 | }
58 | return false;
59 | }
60 | }
61 | export class Group {
62 | static _class = 'group';
63 |
64 |
65 | wrapperFrame(layers) {
66 | let minX = Infinity, minY = Infinity, maxX = -Infinity, maxY = -Infinity;
67 | for (let layer of layers) {
68 | minX = Math.min(minX, layer.frame.x);
69 | minY = Math.min(minY, layer.frame.y);
70 | maxX = Math.max(maxX, layer.frame.x + layer.frame.width);
71 | maxY = Math.max(maxY, layer.frame.y + layer.frame.height);
72 | }
73 | minX = Math.max(minX, 0);
74 | maxX = Math.min(maxX, this.frame.width);
75 | minY = Math.max(minY, 0);
76 | maxY = Math.min(maxY, this.frame.height);
77 |
78 | return {x: minX, y: minY, width: maxX - minX, height: maxY - minY};
79 | }
80 |
81 | getLayoutStyles() {
82 | let {layers} = this;
83 |
84 | let visibleLayers = layers.filter(layer => layer.isVisible);
85 | if (!visibleLayers.length) {
86 | return {};
87 | }
88 | let styles = {[this['do_objectID']]: {}};
89 | visibleLayers.forEach(layer => {
90 | styles[layer['do_objectID']] = {};
91 | });
92 | // single layer
93 | if (visibleLayers.length === 1) {
94 | return {
95 | [visibleLayers[0]['do_objectID']]: {
96 | position: 'relative',
97 | left: undefined,
98 | top: undefined,
99 | height: '100%',
100 | width: undefined,
101 | }
102 | };
103 | }
104 | // check bg layer
105 | let {y, x, width, height} = visibleLayers[0].frame;
106 |
107 | let hasBgLayer = false;
108 | if (y === 0 && x === 0 && width === this.frame.width && height === this.frame.height) {
109 | hasBgLayer = true;
110 | }
111 | if (hasBgLayer) {
112 | styles[visibleLayers[0]['do_objectID']] = {
113 | position: 'absolute',
114 | left: 0,
115 | top: 0,
116 | height: '100%',
117 | width: '100%',
118 | };
119 | visibleLayers.splice(0, 1);
120 | }
121 | // for column layout
122 | // if (this['do_objectID'] === "9FFA94D8-633C-44A0-9DDA-F8B2A2EE970C") {
123 | // debugger
124 | // }
125 | let innerFrame = this.wrapperFrame(visibleLayers);
126 | if (innerFrame.x !== 0 || innerFrame.y !== 0 || innerFrame.width !== this.frame.width || innerFrame.height !== this.frame.height) {
127 | Object.assign(styles[this['do_objectID']], {
128 | boxSizing: 'border-box',
129 | padding: `${innerFrame.y}px ${this.frame.width - innerFrame.width - innerFrame.x}px ${this.frame.height - innerFrame.height - innerFrame.y}px ${innerFrame.x}px`,
130 | });
131 | }
132 | // visibleLayers.sort((a, b) => a.frame.y - b.frame.y);
133 |
134 | let isColumn = visibleLayers.every((layer, i) => i === 0 || visibleLayers[i - 1].frame.y + visibleLayers[i - 1].frame.height <= visibleLayers[i].frame.y);
135 | if (isColumn) {
136 | visibleLayers.forEach((layer, i) => {
137 | let style = styles[layer['do_objectID']];
138 | Object.assign(style, {
139 | position: 'relative',
140 | left: undefined,
141 | top: undefined,
142 | });
143 | let leftGap = layer.frame.x - innerFrame.x;
144 | let rightGap = innerFrame.x + innerFrame.width - layer.frame.x - layer.frame.width;
145 | if (leftGap === rightGap) {
146 | if (leftGap !== 0) {
147 | Object.assign(style, {
148 | marginLeft: 'auto',
149 | marginHeight: 'auto',
150 | });
151 | } else {
152 | Object.assign(style, {
153 | width: undefined,
154 | });
155 | }
156 | } else {
157 | if (leftGap) {
158 | Object.assign(style, {
159 | marginLeft: leftGap,
160 | });
161 | }
162 | }
163 | if (i >= 1) {
164 | let topGap = layer.frame.y - visibleLayers[i - 1].frame.y - visibleLayers[i - 1].frame.height;
165 | Object.assign(style, {
166 | marginTop: topGap ? topGap : undefined,
167 | });
168 | }
169 | });
170 | return {styles};
171 | }
172 |
173 | // TODO: row layout
174 | // TODO: grid layout
175 | return {styles};
176 | }
177 | }
178 | export class Artboard extends Group {
179 | static _class = 'artboard';
180 | }
181 | export class SymbolMaster extends Artboard {
182 | static _class = 'symbolMaster';
183 | }
184 | function f2i(f) {
185 | return Math.round(f * 255) || 0;
186 | }
187 |
188 | function f2x(f) {
189 | let s = (Math.round(f * 255) || 0).toString(16);
190 | if (s.length === 1) {
191 | s = '0' + s;
192 | }
193 | return s;
194 | }
195 |
196 | export class Color {
197 | static _class = 'color';
198 |
199 | toString(context) {
200 | let opacity = context && 'opacity' in context ? context['opacity'] : 1;
201 | let alpha = this.alpha === undefined ? 1 : this.alpha;
202 | if (alpha === 1) {
203 | return `#${f2x(this.red)}${f2x(this.green)}${f2x(this.blue)}`
204 | }
205 | return `rgba(${f2i(this.red)},${f2i(this.green)},${f2i(this.blue)},${alpha * opacity})`
206 | }
207 | }
208 |
209 | export class Gradient {
210 | static _class = 'gradient';
211 |
212 | toString(model) {
213 | switch (this.gradientType) {
214 | case 0: // linear-gradient
215 | let {x: x1, y: y1} = s2p(this.from);
216 | let {x: x2, y: y2} = s2p(this.to);
217 | x1 *= model.frame.width;
218 | x2 *= model.frame.width;
219 | y1 *= model.frame.height;
220 | y2 *= model.frame.height;
221 | let angle = 90 + Math.atan2(y2 - y1, x2 - x1) * 180 / Math.PI;
222 | return `linear-gradient(${angle}deg, ${this.stops.join(', ')})`;
223 | default:
224 | return `{filename}
21 |
27 |
34 |
35 | {prettyBytes(progress.total)}
46 | {`${(ratio * 100).toFixed(2)}%`}
56 |
73 | Cancel
74 |
75 |