11 |
12 |
13 |
14 |
15 |
16 |
17 |
18 |
19 |
10 |
20 |
21 |
22 |
--------------------------------------------------------------------------------
/resources/export_assets.js:
--------------------------------------------------------------------------------
1 | const main = document.getElementById('main');
2 | const preview = document.getElementById('preview');
3 | const selectButton = document.getElementById('select');
4 | const exportButton = document.getElementById('export');
5 | const cancelButton = document.getElementById('cancel');
6 | let allCount;
7 | let selectedCount = 0;
8 |
9 | // disable the context menu (eg. the right click menu) to have a more native feel
10 | document.addEventListener('contextmenu', (e) => {
11 | e.preventDefault();
12 | });
13 |
14 | // call the plugin from the webview
15 | exportButton.addEventListener('click', () => {
16 | const assetIds = [];
17 | const checkboxs = document.querySelectorAll('input[type="checkbox"]');
18 | checkboxs.forEach(checkbox => {
19 | if (checkbox.checked) {
20 | assetIds.push(checkbox.value);
21 | }
22 | });
23 | window.postMessage('export', assetIds);
24 | });
25 |
26 | cancelButton.addEventListener('click', () => {
27 | window.postMessage('cancel');
28 | });
29 |
30 | selectButton.addEventListener('click', () => {
31 | const checkboxs = document.querySelectorAll('input[type="checkbox"]');
32 | if (selectedCount !== allCount) {
33 | checkboxs.forEach(checkbox => checkbox.checked = true);
34 | selectedCount = allCount;
35 | } else {
36 | checkboxs.forEach(checkbox => checkbox.checked = false);
37 | selectedCount = 0;
38 | }
39 | });
40 |
41 | main.style.opacity = '0';
42 |
43 | window.main = (assetsJson, langsJson) => {
44 | const assets = JSON.parse(assetsJson);
45 | allCount = assets.length;
46 | selectedCount = assets.length;
47 | assets.forEach(asset => {
48 | const item = document.createElement('label');
49 | item.className = 'item';
50 | const img = document.createElement('img');
51 | img.srcset = `data:image/png;base64,${asset.data}, data:image/png;base64,${asset.data} 2x`;
52 | const name = document.createElement('div');
53 | name.className = 'name';
54 | const text = document.createElement('span');
55 | text.textContent = asset.name;
56 | const checkbox = document.createElement('input');
57 | checkbox.type = 'checkbox';
58 | checkbox.value = asset.id;
59 | checkbox.checked = true;
60 | name.appendChild(text);
61 | item.appendChild(checkbox);
62 | item.appendChild(img);
63 | item.appendChild(name);
64 | preview.appendChild(item);
65 | checkbox.addEventListener('input', (event) => {
66 | if (event.target.checked === false) {
67 | selectedCount --;
68 | } else {
69 | selectedCount ++;
70 | }
71 | })
72 | });
73 |
74 | // i18n
75 | const langs = JSON.parse(langsJson);
76 | selectButton.textContent = langs.select_all;
77 | exportButton.textContent = langs.export;
78 | cancelButton.textContent = langs.cancel;
79 |
80 | main.style.opacity = '1';
81 | }
82 |
--------------------------------------------------------------------------------
/resources/export_vector_assets.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
10 |
20 |
21 |
22 |
--------------------------------------------------------------------------------
/resources/export_vector_assets.js:
--------------------------------------------------------------------------------
1 | const svg2vectordrawable = require('svg2vectordrawable/src/main.browser');
2 |
3 | const main = document.getElementById('main');
4 | const preview = document.getElementById('preview');
5 | const selectButton = document.getElementById('select');
6 | const exportButton = document.getElementById('export');
7 | const cancelButton = document.getElementById('cancel');
8 | let allCount;
9 | let selectedCount = 0;
10 |
11 | // disable the context menu (eg. the right click menu) to have a more native feel
12 | document.addEventListener('contextmenu', (e) => {
13 | e.preventDefault();
14 | });
15 |
16 | // call the plugin from the webview
17 | exportButton.addEventListener('click', async () => {
18 | const assets = [];
19 | const checkboxs = document.querySelectorAll('input[type="checkbox"]');
20 | for (let i = 0; i < checkboxs.length; i++) {
21 | if (checkboxs[i].checked) {
22 | const svg = checkboxs[i].parentNode.querySelector('input[type="hidden"]').value;
23 | const name = checkboxs[i].parentNode.querySelector('.name').textContent;
24 | const xml = await svg2vectordrawable(svg);
25 | assets.push({ name, xml });
26 | }
27 | }
28 | window.postMessage('export', assets);
29 | });
30 |
31 | cancelButton.addEventListener('click', () => {
32 | window.postMessage('cancel');
33 | });
34 |
35 | selectButton.addEventListener('click', () => {
36 | const checkboxs = document.querySelectorAll('input[type="checkbox"]');
37 | if (selectedCount !== allCount) {
38 | checkboxs.forEach(checkbox => checkbox.checked = true);
39 | selectedCount = allCount;
40 | } else {
41 | checkboxs.forEach(checkbox => checkbox.checked = false);
42 | selectedCount = 0;
43 | }
44 | });
45 |
46 | main.style.opacity = '0';
47 |
48 | window.main = (assetsJson, langsJson) => {
49 | const assets = JSON.parse(assetsJson);
50 | allCount = assets.length;
51 | selectedCount = assets.length;
52 | assets.forEach(asset => {
53 | const item = document.createElement('label');
54 | item.className = 'item';
55 | const img = document.createElement('img');
56 | img.srcset = `data:image/png;base64,${asset.data}, data:image/png;base64,${asset.data} 2x`;
57 | const name = document.createElement('div');
58 | name.className = 'name';
59 | const text = document.createElement('span');
60 | text.textContent = asset.name;
61 | const checkbox = document.createElement('input');
62 | checkbox.type = 'checkbox';
63 | checkbox.checked = true;
64 | const hideSvg = document.createElement('input');
65 | hideSvg.type = 'hidden';
66 | hideSvg.value = decodeURIComponent(asset.svg);
67 | name.appendChild(text);
68 | item.appendChild(checkbox);
69 | item.appendChild(img);
70 | item.appendChild(name);
71 | item.appendChild(hideSvg);
72 | preview.appendChild(item);
73 | checkbox.addEventListener('input', (event) => {
74 | if (event.target.checked === false) {
75 | selectedCount --;
76 | } else {
77 | selectedCount ++;
78 | }
79 | })
80 | });
81 |
82 | // i18n
83 | const langs = JSON.parse(langsJson);
84 | selectButton.textContent = langs.select_all;
85 | exportButton.textContent = langs.export;
86 | cancelButton.textContent = langs.cancel;
87 |
88 | main.style.opacity = '1';
89 | }
90 |
91 | window.exportSelection = async (assetsJson) => {
92 | const assets = JSON.parse(assetsJson);
93 | const result = [];
94 | for (let i = 0; i < assets.length; i++) {
95 | const name = assets[i].name;
96 | const svg = decodeURIComponent(assets[i].svg);
97 | const xml = await svg2vectordrawable(svg);
98 | result.push({ name, xml });
99 | }
100 | window.postMessage('export', result);
101 | }
--------------------------------------------------------------------------------
/resources/icon.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Ashung/Android_Res_Export/f21788ca05b93228aecd8a7fbc6c1acf1245e5cb/resources/icon.png
--------------------------------------------------------------------------------
/resources/preferences.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
11 |
12 |
13 |
14 |
15 |
16 |
17 |
18 |
19 |
10 |
60 |
61 |
62 |
--------------------------------------------------------------------------------
/resources/preferences.js:
--------------------------------------------------------------------------------
1 | const main = document.getElementById('main');
2 | const okButton = document.getElementById('ok');
3 | const cancelButton = document.getElementById('cancel');
4 | const nameTypeNode = document.getElementById('name-type');
5 | const vectorDrawableFolderNode = document.getElementById('folder');
6 | const webpQualityRangeNode = document.getElementById('webp-quality-range');
7 | const webpQualityValueNode = document.getElementById('webp-quality-value');
8 | const revealInFinderNode = document.getElementById('reveal-in-finder');
9 | const exportDpiNodes = document.querySelectorAll('#export-dpis input');
10 |
11 | // disable the context menu (eg. the right click menu) to have a more native feel
12 | document.addEventListener('contextmenu', (e) => {
13 | e.preventDefault();
14 | });
15 |
16 | // call the plugin from the webview
17 | okButton.addEventListener('click', () => {
18 | const preferences = {
19 | 'export_dpi': [],
20 | 'asset_name_type': nameTypeNode.selectedIndex,
21 | 'vector_drawable_folder': vectorDrawableFolderNode.selectedIndex,
22 | 'reveal_in_finder_after_export': revealInFinderNode.checked,
23 | 'webp_quality': webpQualityRangeNode.value / 100
24 | };
25 | exportDpiNodes.forEach(input => {
26 | if (input.checked) {
27 | preferences.export_dpi.push(input.value);
28 | }
29 | });
30 | window.postMessage('save', `${JSON.stringify(preferences)}`);
31 | });
32 |
33 | cancelButton.addEventListener('click', () => {
34 | window.postMessage('cancel');
35 | });
36 |
37 | main.style.opacity = '0';
38 |
39 | exportDpiNodes.forEach(input => {
40 | input.addEventListener('click', event => {
41 | let count = Array.from(exportDpiNodes).filter(node => node.checked).length;
42 | if (count === 0) {
43 | event.target.checked = true;
44 | }
45 | });
46 | });
47 |
48 | window.main = (json) => {
49 | const preferences = JSON.parse(json);
50 |
51 | // Init
52 | preferences.export_dpi.forEach(dpi => {
53 | let node = document.querySelector(`input[value="${dpi}"]`);
54 | node.checked = true;
55 | });
56 |
57 | preferences.available_asset_name_type.forEach((type, idx) => {
58 | let option = document.createElement('option');
59 | option.textContent = type;
60 | if (preferences.asset_name_type === idx) {
61 | option.selected = true;
62 | }
63 | nameTypeNode.appendChild(option);
64 | });
65 |
66 | preferences.available_folders.forEach((folder, idx) => {
67 | let option = document.createElement('option');
68 | option.textContent = folder;
69 | if (preferences.vector_drawable_folder === idx) {
70 | option.selected = true;
71 | }
72 | vectorDrawableFolderNode.appendChild(option);
73 | });
74 |
75 | const quality = Math.round(preferences.webp_quality * 100);
76 | webpQualityRangeNode.setAttribute('value', quality);
77 | webpQualityValueNode.setAttribute('value', quality);
78 | webpQualityRangeNode.addEventListener('input', () => {
79 | webpQualityValueNode.setAttribute('value', webpQualityRangeNode.value);
80 | });
81 |
82 | revealInFinderNode.checked = preferences.reveal_in_finder_after_export;
83 |
84 | // i18n
85 | document.getElementById('version').textContent = preferences.version;
86 | document.getElementById('label-export-dpi').textContent = preferences.i18n.export_dpis;
87 | document.getElementById('label-asset-name-type').textContent = preferences.i18n.asset_name_type;
88 | document.getElementById('label-vector-drawable-folder').textContent = preferences.i18n.vector_drawable_folder;
89 | document.getElementById('label-webp-quality').textContent = preferences.i18n.webp_quality;
90 | document.getElementById('label-others').textContent = preferences.i18n.others;
91 | document.getElementById('label-reveal-in-finder').textContent = preferences.i18n.reveal_in_finder_after_export;
92 | okButton.textContent = preferences.i18n.ok;
93 | cancelButton.textContent = preferences.i18n.cancel;
94 |
95 | main.style.opacity = '1';
96 | }
97 |
--------------------------------------------------------------------------------
/resources/style.css:
--------------------------------------------------------------------------------
1 | :root {
2 | --accent: #3F51B5;
3 | --text-1: #000;
4 | --text-2: #666;
5 | --text-3: #999;
6 | --border: #DDD;
7 | --background: #F8F8F8;
8 | --preview-background: #FFF;
9 | --input-range-line: #B9B9B9;
10 | --input-background: #FFF;
11 | --input-border: rgba(0, 0, 0, .1);
12 | --input-background-disabled: rgba(0, 0, 0, .1);
13 | --checkbox-background: rgba(0, 0, 0, .15);
14 | --select-background: rgba(0, 0, 0, .15);
15 | --switch-background: #B9B9B9;
16 | --switch-thumb: #FFF;
17 | }
18 |
19 | @media (prefers-color-scheme: dark) {
20 | :root {
21 | --text-1: #FFF;
22 | --text-2: #999;
23 | --text-3: #666;
24 | --border: #333;
25 | --background: #212121;
26 | --preview-background: #121212;
27 | --input-range-line: #454545;
28 | --input-background: #121212;
29 | --input-border: rgba(255, 255, 255, .1);
30 | --input-background-disabled: rgba(255, 255, 255, .1);
31 | --checkbox-background: rgba(255, 255, 255, .15);
32 | --select-background: rgba(255, 255, 255, .15);
33 | --switch-background: #454545;
34 | --switch-thumb: #FFF;
35 | }
36 | }
37 |
38 | html {
39 | box-sizing: border-box;
40 | background: transparent;
41 | overflow: hidden;
42 | cursor: default;
43 | }
44 | *, *:before, *:after {
45 | box-sizing: inherit;
46 | margin: 0;
47 | padding: 0;
48 | position: relative;
49 | -webkit-user-select: none;
50 | user-select: none;
51 | }
52 | input, textarea, code, pre code * {
53 | -webkit-user-select: auto;
54 | user-select: auto;
55 | }
56 |
57 | html, body {
58 | height: 100%;
59 | color: var(--text-1);
60 | background: var(--background);
61 | }
62 | body {
63 | font: medium Roboto, Helvetica, Arial, sans-serif;
64 | }
65 | pre code {
66 | display: block;
67 | font: 12px/1.6 Monaco, Consolas, monospace;
68 | padding: 16px;
69 | }
70 |
71 | pre *::selection {
72 | background-color: rgba(60, 80, 180, .2);
73 | }
74 |
75 | button {
76 | display: inline-block;
77 | font: inherit;
78 | font-size: 14px;
79 | font-weight: 500;
80 | text-transform: uppercase;
81 | border: 0;
82 | border-radius: 4px;
83 | height: 36px;
84 | line-height: 36px;
85 | margin: 0;
86 | padding: 0 16px;
87 | vertical-align: middle;
88 | outline: none;
89 | cursor: pointer;
90 | color: var(--text-1);
91 | background: none;
92 | transition: background-color .2s cubic-bezier(.4,0,.2,1);
93 | }
94 | button:hover {
95 | background: rgba(158, 158, 158, 0.2);
96 | }
97 | button:active{
98 | background: rgba(158, 158, 158, 0.4);
99 | }
100 | button.button-blue {
101 | background: var(--accent);
102 | color: #FFF;
103 | }
104 | button.button-blue:hover {
105 | background: #3949AB;
106 | }
107 | button.button-blue:active {
108 | background: #283593;
109 | }
110 |
111 | input[type="range"] {
112 | width: 160px;
113 | height: 2px;
114 | padding: 0;
115 | border: 0;
116 | -webkit-appearance: none;
117 | background-color: var(--input-range-line);
118 | background-image: linear-gradient(var(--accent), var(--accent));
119 | background-repeat: no-repeat;
120 | background-size: 0 100%;
121 | }
122 | input[type=range]::-webkit-slider-thumb {
123 | -webkit-appearance: none;
124 | height: 12px;
125 | width: 12px;
126 | border-radius: 12px;
127 | background: var(--accent);
128 | transition: all .1s cubic-bezier(.4,0,.2,1);
129 | }
130 | input[type=range]:active::-webkit-slider-thumb {
131 | transform: scale(1.333);
132 | }
133 | input[type=range]:focus {
134 | outline: none;
135 | }
136 |
137 | input[type=checkbox] {
138 | -webkit-appearance: none;
139 | background: var(--checkbox-background);
140 | height: 16px;
141 | width: 16px;
142 | border-radius: 4px;
143 | vertical-align: -2px;
144 | margin-right: 4px;
145 | box-shadow: 0 0 1px #FFF;
146 | }
147 | input[type=checkbox]:checked {
148 | background-color: var(--accent);
149 | background-position: 50% 50%;
150 | background-repeat: no-repeat;
151 | background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16px' height='16px' viewBox='0 0 16 16'%3E%3Cpath stroke='%23FFF' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' fill='none' d='M4 8 7 11 12 5'/%3E%3C/svg%3E");
152 | }
153 | input[type=text], input[type="number"] {
154 | background-color: var(--input-background);
155 | outline: none;
156 | padding: 0 8px;
157 | height: 24px;
158 | border-radius: 4px;
159 | border: 1px solid var(--input-border);
160 | }
161 | input[type=text]:disabled, input[type="number"]:disabled {
162 | background: var(--input-background-disabled);
163 | }
164 | input[type=text]:focus, input[type="number"]:focus {
165 | border-color: var(--accent);
166 | }
167 | input[type="number"]::-webkit-outer-spin-button, input[type="number"]::-webkit-inner-spin-button {
168 | -webkit-appearance: none;
169 | margin: 0;
170 | }
171 |
172 | .text-input {
173 | position: relative;
174 | }
175 | .text-input-prefix input[type="text"], .text-input-prefix input[type="number"] {
176 | padding-left: 16px;
177 | }
178 | .text-input-prefix:before {
179 | content: "#";
180 | position: absolute;
181 | top: 50%;
182 | left: 8px;
183 | z-index: 1;
184 | font-size: 12px;
185 | color: var(--text-3);
186 | transform: translateY(-50%);
187 | }
188 | .text-input-suffix input[type="text"], .text-input-suffix input[type="number"] {
189 | padding-right: 16px;
190 | }
191 | .text-input-suffix:after {
192 | content: "%";
193 | position: absolute;
194 | top: 50%;
195 | right: 8px;
196 | z-index: 1;
197 | font-size: 12px;
198 | color: var(--text-3);
199 | transform: translateY(-50%);
200 | }
201 |
202 | input[type="text"]:invalid {
203 | border-color: #DD1144;
204 | }
205 |
206 | select {
207 | -webkit-appearance: none;
208 | font-size: 14px;
209 | padding: 0 24px 0 8px;
210 | height: 24px;
211 | outline: none;
212 | border: 0;
213 | border-radius: 5px;
214 | color: inherit;
215 | background-color: var(--select-background);
216 | background-position: calc(100% - 3px) 50%;
217 | background-repeat: no-repeat;
218 | background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18px' height='18px' viewBox='0 0 18 18'%3E%3Crect width='18' height='18' rx='3' fill='%233F51B5'/%3E%3Cpath stroke='%23FFF' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' fill='none' d='M6 6.5 9 4 12 6.5 M6 11.5 9 14 12 11.5'/%3E%3C/svg%3E");
219 | }
220 |
221 | .switch {
222 | position: relative;
223 | display: inline-block;
224 | width: 28px;
225 | height: 16px;
226 | vertical-align: -4px;
227 | }
228 | .switch input {
229 | display: none;
230 | }
231 | .switch .slider {
232 | position: absolute;
233 | cursor: pointer;
234 | top: 0;
235 | left: 0;
236 | width: 28px;
237 | height: 16px;
238 | border-radius: 8px;
239 | background-color: var(--switch-background);
240 | transition: .4s;
241 | }
242 | .switch .slider:before {
243 | position: absolute;
244 | content: "";
245 | height: 12px;
246 | width: 12px;
247 | top: 2px;
248 | left: 2px;
249 | border-radius: 10px;
250 | background-color: var(--switch-thumb);
251 | transition: .4s;
252 | }
253 | .switch input:checked + .slider {
254 | background-color: #9DA6D8;
255 | }
256 | .switch input:checked + .slider:before {
257 | background-color: var(--accent);
258 | transform: translateX(12px);
259 | }
260 |
261 | #main {
262 | height: 100%;
263 | }
264 | #main, #preview, #preview pre {
265 | display: flex;
266 | flex-direction: column;
267 | }
268 | #preview, #preview pre {
269 | flex: auto;
270 | background: var(--preview-background);
271 | white-space: break-spaces;
272 | word-break: break-all;
273 | }
274 | #foot-actions {
275 | padding: 8px;
276 | align-items: center;
277 | display: flex;
278 | border-top: 1px solid var(--border);
279 | flex-shrink: 0;
280 | }
281 |
282 | .gap {
283 | display: block;
284 | width: 8px;
285 | }
286 | .gap-flex {
287 | flex: auto;
288 | }
289 |
290 | #preview {
291 | position: relative;
292 | overflow: auto;
293 | transition: background .2s;
294 | }
295 | #background_toggle {
296 | position: fixed;
297 | top: 16px;
298 | right: 16px;
299 | z-index: 100;
300 | }
301 | #background_toggle li {
302 | float: left;
303 | margin-left: 12px;
304 | list-style: none;
305 | }
306 | #background_toggle a {
307 | display: block;
308 | width: 20px;
309 | height: 20px;
310 | border-radius: 12px;
311 | border: 2px solid #FFF;
312 | overflow: hidden;
313 | background: var(--background);
314 | box-shadow: 0 2px 3px rgba(0,0,0,.3), inset 0 2px 3px rgba(0,0,0,.3);
315 | }
316 | #background_toggle #bg_toggle_light, #preview.bg_light {
317 | background: #FFF url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPHN2ZyB3aWR0aD0iMTBweCIgaGVpZ2h0PSIxMHB4IiB2aWV3Qm94PSIwIDAgMTAgMTAiIHZlcnNpb249IjEuMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayI+CiAgICA8IS0tIEdlbmVyYXRvcjogU2tldGNoIDQ2LjEgKDQ0NDYzKSAtIGh0dHA6Ly93d3cuYm9oZW1pYW5jb2RpbmcuY29tL3NrZXRjaCAtLT4KICAgIDx0aXRsZT5Hcm91cDwvdGl0bGU+CiAgICA8ZGVzYz5DcmVhdGVkIHdpdGggU2tldGNoLjwvZGVzYz4KICAgIDxkZWZzPjwvZGVmcz4KICAgIDxnIHN0cm9rZT0ibm9uZSIgc3Ryb2tlLXdpZHRoPSIxIiBmaWxsPSJub25lIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiPgogICAgICAgIDxnIGZpbGw9IiNFM0UzRTMiPgogICAgICAgICAgICA8cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iNSIgaGVpZ2h0PSI1Ij48L3JlY3Q+CiAgICAgICAgICAgIDxyZWN0IHg9IjUiIHk9IjUiIHdpZHRoPSI1IiBoZWlnaHQ9IjUiPjwvcmVjdD4KICAgICAgICA8L2c+CiAgICA8L2c+Cjwvc3ZnPg==") repeat;
318 | }
319 | #background_toggle #bg_toggle_dark, #preview.bg_dark {
320 | background: #2B2B2B url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPHN2ZyB3aWR0aD0iMTBweCIgaGVpZ2h0PSIxMHB4IiB2aWV3Qm94PSIwIDAgMTAgMTAiIHZlcnNpb249IjEuMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayI+CiAgICA8IS0tIEdlbmVyYXRvcjogU2tldGNoIDQ2LjEgKDQ0NDYzKSAtIGh0dHA6Ly93d3cuYm9oZW1pYW5jb2RpbmcuY29tL3NrZXRjaCAtLT4KICAgIDx0aXRsZT5Hcm91cDwvdGl0bGU+CiAgICA8ZGVzYz5DcmVhdGVkIHdpdGggU2tldGNoLjwvZGVzYz4KICAgIDxkZWZzPjwvZGVmcz4KICAgIDxnIHN0cm9rZT0ibm9uZSIgc3Ryb2tlLXdpZHRoPSIxIiBmaWxsPSJub25lIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiPgogICAgICAgIDxnIGZpbGw9IiMwMDAwMDAiPgogICAgICAgICAgICA8cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iNSIgaGVpZ2h0PSI1Ij48L3JlY3Q+CiAgICAgICAgICAgIDxyZWN0IHg9IjUiIHk9IjUiIHdpZHRoPSI1IiBoZWlnaHQ9IjUiPjwvcmVjdD4KICAgICAgICA8L2c+CiAgICA8L2c+Cjwvc3ZnPg==") repeat;
321 | }
322 |
323 | #nine_patch_preview {
324 | position: absolute;
325 | width: 100px;
326 | height: 100px;
327 | top: 50%;
328 | left: 50%;
329 | box-sizing: border-box;
330 | }
331 | #controller {
332 | font-size: 14px;
333 | box-sizing: border-box;
334 | padding: 8px 16px;
335 | align-items: center;
336 | display: flex;
337 | border-top: 1px solid var(--border);
338 | }
339 | #controller label {
340 | margin-right: 8px;
341 | }
342 | #controller input[type="range"] {
343 | margin-right: 16px;
344 | }
345 | #controller + #foot-actions {
346 | border: 0;
347 | }
348 |
349 | #preferences {
350 | flex-grow: 1;
351 | padding: 16px;
352 | font-size: 14px;
353 | overflow: auto;
354 | }
355 | .from-row {
356 | margin-bottom: 24px;
357 | }
358 | .from-row .from-label {
359 | display: block;
360 | color: var(--text-2);
361 | margin-bottom: 8px;
362 | font-size: 12px;
363 | text-transform: uppercase;
364 | }
365 | .grid-list {
366 | display: grid;
367 | grid-gap: 8px;
368 | grid-template-columns: 1fr 1fr 1fr;
369 | }
370 | .flex-from {
371 | display: flex;
372 | gap: 8px;
373 | align-items: center;
374 | }
375 | .logo {
376 | display: flex;
377 | flex-direction: column;
378 | justify-content: center;
379 | align-items: center;
380 | padding: 16px 0 32px 0;
381 | color: var(--text-3);
382 | }
383 | .logo img {
384 | display: block;
385 | margin-bottom: 8px;
386 | }
387 |
388 | .asset-thumbs {
389 | padding: 16px;
390 | flex-wrap: wrap;
391 | flex-direction: row !important;
392 | align-items: flex-start;
393 | gap: 8px;
394 | }
395 | .asset-thumbs .item {
396 | position: relative;
397 | width: 88px;
398 | }
399 | .asset-thumbs img {
400 | display: block;
401 | width: 88px;
402 | height: 88px;
403 | margin-bottom: 6px;
404 | border-radius: 4px;
405 | background: var(--background);
406 | object-fit: scale-down;
407 | }
408 | .asset-thumbs .name {
409 | font-size: 12px;
410 | }
411 | .asset-thumbs .name span {
412 | display: inline-block;
413 | padding: 2px 4px;
414 | max-width: 100%;
415 | overflow: hidden;
416 | white-space: nowrap;
417 | text-overflow: ellipsis;
418 | border-radius: 4px;
419 | }
420 | .asset-thumbs input[type="checkbox"] {
421 | position: absolute;
422 | z-index: 1;
423 | top: 4px;
424 | left: 4px;
425 | }
426 | .asset-thumbs input:checked + img {
427 | background: rgba(63, 81, 181, 0.1);
428 | }
429 | .asset-thumbs input:checked + img + .name span {
430 | background: var(--accent);
431 | color: #FFFFFF;
432 | }
433 |
434 | .code-tab {
435 | position: absolute;
436 | z-index: 1;
437 | top: 8px;
438 | right: 8px;
439 | font-size: 12px;
440 | display: flex;
441 | border-radius: 8px;
442 | border: 1px solid var(--border);
443 | background: var(--background);
444 | }
445 | .code-tab label {
446 | padding: 4px 8px;
447 | }
448 | .code-tab label + label {
449 | border-left: 1px solid var(--border);
450 | }
451 | .code-tab input {
452 | display: none;
453 | }
454 | .code-tab input:checked + span {
455 | color: var(--accent);
456 | }
457 |
458 | /* github.com style (c) Vasily Polovnyov
11 |
53 |
12 | 
13 |
15 |
13 | Version: 0.0.0
14 |
16 |
52 |
17 |
18 |
26 |
19 |
20 |
21 |
22 |
23 |
24 |
25 |
27 |
28 |
32 |
29 |
30 |
31 |
33 |
34 |
38 |
35 |
36 |
37 |
39 |
40 |
45 |
41 |
42 |
43 |
44 |
46 |
47 |
51 |
48 |
49 |
50 |
54 |
55 |
56 |
57 |
58 |
59 |
10 |
21 |
22 |
23 |
24 |
--------------------------------------------------------------------------------
/resources/view_code.js:
--------------------------------------------------------------------------------
1 | const highlight = require('highlight.js/lib/core');
2 | const xml = require('highlight.js/lib/languages/xml');
3 | highlight.registerLanguage('xml', xml);
4 |
5 | const main = document.getElementById('main');
6 | const tempXMLElement = document.getElementById('tempXML');
7 | const codeElement = document.getElementById("code");
8 | const copyButton = document.getElementById('copy');
9 | const saveButton = document.getElementById('save');
10 | const cancelButton = document.getElementById('cancel');
11 |
12 | // disable the context menu (eg. the right click menu) to have a more native feel
13 | document.addEventListener('contextmenu', (e) => {
14 | e.preventDefault();
15 | });
16 |
17 | // call the plugin from the webview
18 | copyButton.addEventListener('click', () => {
19 | window.postMessage('copy', tempXMLElement.value);
20 | });
21 |
22 | saveButton.addEventListener('click', () => {
23 | window.postMessage('save', tempXMLElement.value);
24 | });
25 |
26 | cancelButton.addEventListener('click', () => {
27 | window.postMessage('cancel');
28 | });
29 |
30 | main.style.opacity = '0';
31 |
32 | window.main = (code, json) => {
33 | codeElement.innerHTML = highlight.highlight(code, {language: 'xml'}).value;
34 | tempXMLElement.value = code;
35 |
36 | // i18n
37 | if (json) {
38 | const langs = JSON.parse(json);
39 | saveButton.textContent = langs.save;
40 | cancelButton.textContent = langs.cancel;
41 | copyButton.textContent = langs.copy;
42 | }
43 |
44 | main.style.opacity = '1';
45 | }
46 |
--------------------------------------------------------------------------------
/resources/view_nine_patch.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
11 |
13 |
14 |
15 |
16 |
17 |
18 |
19 |
20 |
10 |
15 |
37 |
38 |
39 |
--------------------------------------------------------------------------------
/resources/view_nine_patch.js:
--------------------------------------------------------------------------------
1 | const main = document.getElementById('main');
2 | const ninePatchPreview = document.getElementById('nine_patch_preview');
3 | const previewBackground = document.getElementById('preview');
4 | const stretchWidth = document.getElementById('stretch_width');
5 | const stretchHeight = document.getElementById('stretch_height');
6 | const showContent = document.getElementById('show_content');
7 | const bgToggleLight = document.getElementById('bg_toggle_light');
8 | const bgToggleDark = document.getElementById('bg_toggle_dark');
9 | const bgToggleWhite = document.getElementById('bg_toggle_white');
10 | const labelStretchWidth = document.getElementById('label_stretch_width');
11 | const labelStretchHeight = document.getElementById('label_stretch_height');
12 | const labelStretchContext = document.getElementById('label_stretch_content');
13 | const cancelButton = document.getElementById('cancel');
14 | const exportButton = document.getElementById('export');
15 | let originalWidth = ninePatchPreview.offsetWidth;
16 | let originalHeight = ninePatchPreview.offsetHeight;
17 |
18 | bgToggleLight.onclick = function() {
19 | previewBackground.setAttribute("class", "bg_light");
20 | }
21 |
22 | bgToggleDark.onclick = function() {
23 | previewBackground.setAttribute("class", "bg_dark");
24 | }
25 |
26 | bgToggleWhite.onclick = function() {
27 | previewBackground.setAttribute("class", "bg_white");
28 | }
29 |
30 | function redrawNinePatch(base64) {
31 | var ninePatchWidth = originalWidth + originalWidth * stretchWidth.value/50,
32 | ninePatchHeight = originalHeight + originalHeight * stretchHeight.value/50;
33 | ninePatchPreview.style.transition = ".2s"; //width .2s, height
34 | stretchHeight.style.backgroundSize = stretchHeight.value + "% 100%";
35 | stretchWidth.style.backgroundSize = stretchWidth.value + "% 100%";
36 | drawNinePatch(base64, ninePatchWidth, ninePatchHeight, showContent.checked);
37 | }
38 |
39 | function drawNinePatch(base64, width, height, showContent) {
40 |
41 | var scale = 2;
42 | var _canvas = document.createElement("canvas");
43 | var _ctx = _canvas.getContext("2d");
44 | var img = new Image();
45 | img.onload = function() {
46 | _canvas.width = img.width;
47 | _canvas.height = img.height;
48 | _ctx.drawImage(img, 0, 0);
49 |
50 | // Patch data
51 | var horizontalData = _ctx.getImageData(0, 0, img.width - 1 * scale, 1).data;
52 | var verticalData = _ctx.getImageData(0, 0, 1, img.height - 1 * scale).data;
53 | var patchTop = [[scale,0,0]];
54 | var patchLeft = [[scale,0,0]];
55 | for (var i = 1; i < horizontalData.length/4; i ++) {
56 | var a = horizontalData[i*4+3],
57 | _a = horizontalData[(i-1)*4+3];
58 | if (a != _a) {
59 | patchTop[patchTop.length - 1][1] = i - patchTop[patchTop.length - 1][0];
60 | if (a == 255) {
61 | patchTop[patchTop.length - 1][2] = 0;
62 | } else {
63 | patchTop[patchTop.length - 1][2] = 1;
64 | }
65 | patchTop.push([i, horizontalData.length/4-i, 0])
66 | }
67 | if (i == horizontalData.length/4 - 1 && a == 255) {
68 | patchTop[patchTop.length - 1][2] = 1;
69 | }
70 | }
71 | for (var i = 1; i < verticalData.length/4; i ++) {
72 | var a = verticalData[i*4+3],
73 | _a = verticalData[(i-1)*4+3];
74 | if (a != _a) {
75 | patchLeft[patchLeft.length - 1][1] = i - patchLeft[patchLeft.length - 1][0];
76 | if (a == 255) {
77 | patchLeft[patchLeft.length - 1][2] = 0;
78 | } else {
79 | patchLeft[patchLeft.length - 1][2] = 1;
80 | }
81 | patchLeft.push([i, verticalData.length/4-i, 0])
82 | }
83 | if (i == verticalData.length/4 - 1 && a == 255) {
84 | patchLeft[patchLeft.length - 1][2] = 1;
85 | }
86 | }
87 |
88 | // Get padding
89 | var paddingTop = 0,
90 | paddingBottom = 0,
91 | paddingLeft = 0,
92 | paddingRight = 0;
93 | var paddingTopBottomData = _ctx.getImageData(img.width-1, 1*scale, 1, img.height-2*scale).data;
94 | var paddingLeftRightData = _ctx.getImageData(1*scale, img.height-1, img.width-2*scale, 1).data;
95 | for (var i = 0; i < paddingTopBottomData.length/4; i ++) {
96 | if (
97 | paddingTopBottomData[i*4] == 0 &&
98 | paddingTopBottomData[i*4+1] == 0 &&
99 | paddingTopBottomData[i*4+2] == 0 &&
100 | paddingTopBottomData[i*4+3] == 255
101 | ) {
102 | paddingTop = i;
103 | break;
104 | }
105 | }
106 | for (var i = paddingTopBottomData.length/4; i > -1; i --) {
107 | if (
108 | paddingTopBottomData[i*4] == 0 &&
109 | paddingTopBottomData[i*4+1] == 0 &&
110 | paddingTopBottomData[i*4+2] == 0 &&
111 | paddingTopBottomData[i*4+3] == 255
112 | ) {
113 | paddingBottom = paddingTopBottomData.length/4-i-1;
114 | break;
115 | }
116 | }
117 | for (var i = 0; i < paddingLeftRightData.length/4; i ++) {
118 | if (
119 | paddingLeftRightData[i*4] == 0 &&
120 | paddingLeftRightData[i*4+1] == 0 &&
121 | paddingLeftRightData[i*4+2] == 0 &&
122 | paddingLeftRightData[i*4+3] == 255
123 | ) {
124 | paddingLeft = i;
125 | break;
126 | }
127 | }
128 | for (var i = paddingLeftRightData.length/4; i > -1; i --) {
129 | if (
130 | paddingLeftRightData[i*4] == 0 &&
131 | paddingLeftRightData[i*4+1] == 0 &&
132 | paddingLeftRightData[i*4+2] == 0 &&
133 | paddingLeftRightData[i*4+3] == 255
134 | ) {
135 | paddingRight = paddingLeftRightData.length/4-i-1;
136 | break;
137 | }
138 | }
139 |
140 | var canvas = document.createElement("canvas");
141 | var ctx = canvas.getContext("2d");
142 | canvas.width = width;
143 | canvas.height = height;
144 | canvas.style.width = width + "px";
145 | canvas.style.height = height + "px";
146 |
147 | ctx.imageSmoothingEnabled = false;
148 |
149 | // Draw start
150 | var dx = 0,
151 | dy = 0,
152 | dw = 0,
153 | dh = 0;
154 | for (var i = 0; i < patchLeft.length; i++) {
155 | dy += dh;
156 | if (patchLeft[i][2] == 0) {
157 | dh = patchLeft[i][1];
158 | } else {
159 | dh = getLength(patchLeft, height);
160 | }
161 | for (var j = 0; j < patchTop.length; j++) {
162 | var sx = patchTop[j][0],
163 | sy = patchLeft[i][0],
164 | sw = patchTop[j][1],
165 | sh = patchLeft[i][1];
166 | dx += dw;
167 | if (patchTop[j][2] == 0) {
168 | dw = patchTop[j][1];
169 | } else {
170 | dw = getLength(patchTop, width);
171 | }
172 | ctx.drawImage(img, sx, sy, sw, sh, dx, dy, dw, dh);
173 | }
174 | dx = 0;
175 | dw = 0;
176 | }
177 |
178 | // Draw padding
179 | if (showContent) {
180 | ctx.fillStyle = "rgba(233, 32, 99, 0.3)";
181 | ctx.fillRect(
182 | paddingLeft,
183 | paddingTop,
184 | width-paddingLeft-paddingRight,
185 | height-paddingTop-paddingBottom
186 | );
187 | }
188 |
189 | ninePatchPreview.style.width = (width / scale) + "px";
190 | ninePatchPreview.style.height = (height / scale) + "px";
191 | ninePatchPreview.style.marginLeft = (width / scale) * -0.5 + "px";
192 | ninePatchPreview.style.marginTop = (height / scale) * -0.5 + "px";
193 | ninePatchPreview.style.background = "url(" + canvas.toDataURL("image/png") + ") no-repeat";
194 | ninePatchPreview.style.backgroundSize = "cover";
195 |
196 | }
197 |
198 | img.src = "data:image/png;base64," + base64;
199 | }
200 |
201 | function getLength(patchData, maxLength) {
202 | var fixWidth = 0,
203 | count = 0;
204 | for (var i = 0; i < patchData.length; i++) {
205 | if (patchData[i][2] == 0) {
206 | fixWidth += patchData[i][1];
207 | } else {
208 | count ++;
209 | }
210 | }
211 | return Math.round((maxLength - fixWidth) / count);
212 | }
213 |
214 | // disable the context menu (eg. the right click menu) to have a more native feel
215 | document.addEventListener('contextmenu', (e) => {
216 | e.preventDefault();
217 | });
218 |
219 | // call the plugin from the webview
220 | exportButton.addEventListener('click', () => {
221 | window.postMessage('export');
222 | });
223 |
224 | cancelButton.addEventListener('click', () => {
225 | window.postMessage('cancel');
226 | });
227 |
228 | main.style.opacity = '0';
229 |
230 | window.main = (base64, ninePatchWidth, ninePatchHeight, json) => {
231 |
232 | originalWidth = ninePatchWidth;
233 | originalHeight = ninePatchHeight;
234 |
235 | stretchWidth.oninput = function() {
236 | redrawNinePatch(base64);
237 | }
238 |
239 | stretchHeight.oninput = function() {
240 | redrawNinePatch(base64);
241 | }
242 |
243 | showContent.onchange = function() {
244 | redrawNinePatch(base64);
245 | }
246 |
247 | drawNinePatch(base64, ninePatchWidth, ninePatchHeight, false);
248 |
249 | // i18n
250 | const langs = JSON.parse(json);
251 | bgToggleLight.setAttribute('title', langs.tip_bg_light);
252 | bgToggleDark.setAttribute('title', langs.tip_bg_dark);
253 | bgToggleWhite.setAttribute('title', langs.tip_bg_white);
254 | labelStretchWidth.textContent = langs.width;
255 | labelStretchHeight.textContent = langs.height;
256 | labelStretchContext.textContent = langs.content;
257 | exportButton.textContent = langs.export;
258 | cancelButton.textContent = langs.cancel;
259 |
260 | main.style.opacity = '1';
261 | }
262 |
--------------------------------------------------------------------------------
/resources/view_vector_drawable_code.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
16 |
17 |
18 |
19 |
20 |
21 |
22 |
23 |
24 |
25 |
29 |
30 |
31 |
32 |
33 |
34 |
35 |
36 |
10 |
42 |
43 |
44 |
45 |
46 |
47 |
48 |
--------------------------------------------------------------------------------
/resources/view_vector_drawable_code.js:
--------------------------------------------------------------------------------
1 | const svg2vectordrawable = require('svg2vectordrawable/src/main.browser');
2 |
3 | const highlight = require('highlight.js/lib/core');
4 | const xml = require('highlight.js/lib/languages/xml');
5 | highlight.registerLanguage('xml', xml);
6 |
7 | const main = document.getElementById('main');
8 | const labelTint = document.getElementById('label_tint');
9 | const labelXml = document.getElementById('label_xml_declaration');
10 | const codeViewAvd = document.getElementById('code-view-avd');
11 | const codeViewSvg = document.getElementById('code-view-svg');
12 | const checkboxAddXml = document.getElementById('xml_declaration');
13 | const tintColorHex = document.getElementById('tint_color');
14 | const tintColorAlpha = document.getElementById('tint_color_alpha');
15 | const tintColorSwitch = document.getElementById('tint_color_switch');
16 | const tempSVGElement = document.getElementById('tempSVG');
17 | const tempXMLElement = document.getElementById('tempXML');
18 | const codeElement = document.getElementById("code");
19 | const copyButton = document.getElementById('copy');
20 | const saveButton = document.getElementById('save');
21 | const cancelButton = document.getElementById('cancel');
22 |
23 | let warning = '';
24 |
25 | // disable the context menu (eg. the right click menu) to have a more native feel
26 | document.addEventListener('contextmenu', (e) => {
27 | e.preventDefault();
28 | });
29 |
30 | // call the plugin from the webview
31 | copyButton.addEventListener('click', () => {
32 | if (codeViewAvd.checked) {
33 | window.postMessage('copyCode', tempXMLElement.value);
34 | }
35 | if (codeViewSvg.checked) {
36 | window.postMessage('copyCode', tempSVGElement.value);
37 | }
38 | });
39 |
40 | saveButton.addEventListener('click', () => {
41 | window.postMessage('saveCode', tempXMLElement.value);
42 | });
43 |
44 | cancelButton.addEventListener('click', () => {
45 | window.postMessage('cancel');
46 | });
47 |
48 | checkboxAddXml.addEventListener('click', async (event) => {
49 | window.postMessage('add_xml_declaration', event.target.checked);
50 | await convert(tempSVGElement.value);
51 | });
52 |
53 | tintColorHex.addEventListener('change', async (event) => {
54 | window.postMessage('tint_color', event.target.value.trim());
55 | if (tintColorSwitch.checked) {
56 | await convert(tempSVGElement.value);
57 | }
58 | });
59 |
60 | tintColorAlpha.addEventListener('change', async (event) => {
61 | window.postMessage('tint_color_alpha', event.target.value);
62 | if (tintColorSwitch.checked) {
63 | await convert(tempSVGElement.value);
64 | }
65 | });
66 |
67 | tintColorSwitch.addEventListener('click', async (event) => {
68 | window.postMessage('tint', event.target.checked);
69 | await convert(tempSVGElement.value);
70 | });
71 |
72 | document.querySelectorAll('input[name="view"]').forEach(node => {
73 | node.onclick = (event) => {
74 | let code = '';
75 | if (event.target.value === 'avd') {
76 | code = tempXMLElement.value;
77 | codeElement.innerHTML = highlight.highlight(code, {language: 'xml'}).value;
78 | tooLongPathWarning(code, warning);
79 | } else {
80 | code = tempSVGElement.value;
81 | codeElement.innerHTML = highlight.highlight(code, {language: 'xml'}).value;
82 | }
83 | };
84 | });
85 |
86 | main.style.opacity = '0';
87 |
88 | window.main = async (svg, json, addXml, tint, tintColor, tintAlpha) => {
89 |
90 | // i18n
91 | if (json) {
92 | const langs = JSON.parse(json);
93 | labelXml.textContent = langs.add_xml_declaration;
94 | labelTint.textContent = langs.tint_color;
95 | saveButton.textContent = langs.save;
96 | cancelButton.textContent = langs.cancel;
97 | copyButton.textContent = langs.copy;
98 | warning = langs.very_long_vector_path;
99 | }
100 |
101 | tempSVGElement.value = svg;
102 | checkboxAddXml.checked = addXml || false;
103 | tintColorHex.value = tintColor || '000000';
104 | tintColorAlpha.value = tintAlpha || 100;
105 | tintColorSwitch.checked = tint || false;
106 | tintColorHex.blur();
107 | tintColorAlpha.blur();
108 |
109 | await convert(svg, warning);
110 |
111 | main.style.opacity = '1';
112 | }
113 |
114 | async function convert(svg, warning) {
115 | const option = {}
116 | if (checkboxAddXml.checked) option.xmlTag = true;
117 | if (tintColorSwitch.checked) option.tint = toAndroidColor(tintColorHex.value, tintColorAlpha.value);
118 | const avd = await svg2vectordrawable(svg, option);
119 | if (codeViewAvd.checked) {
120 | tempXMLElement.value = avd;
121 | codeElement.innerHTML = highlight.highlight(avd, {language: 'xml'}).value;
122 | tooLongPathWarning(avd, warning);
123 | }
124 | if (codeViewSvg.checked) {
125 | tempSVGElement.value = svg;
126 | codeElement.innerHTML = highlight.highlight(svg, {language: 'xml'}).value;
127 | }
128 | }
129 |
130 | function toAndroidColor(hex, alpha) {
131 | if (!/^[a-f0-9]{6}$/i.test(hex)) {
132 | hex = '000000';
133 | }
134 | if (parseInt(alpha) === 100) {
135 | return '#' + hex;
136 | } else {
137 | return '#' + Math.round(parseInt(alpha) * 255 / 100).toString(16).padStart(2, '0') + hex;
138 | }
139 | }
140 |
141 | function tooLongPathWarning(avd, warning) {
142 | const searchResult = avd.match(/android:pathData="(.*)"/g);
143 | if (searchResult) {
144 | const paths = searchResult.map(path => {
145 | return path.substring(18, path.length - 1);
146 | });
147 | const nodes = document.querySelectorAll('.hljs-string');
148 | nodes.forEach(node => {
149 | const text = node.textContent.replace(/"/g, '');
150 | if (paths.includes(text) && text.length >= 800) {
151 | node.style.backgroundColor = 'rgba(255, 255, 102, 0.6)';
152 | node.setAttribute('title', warning.replace(/\%/, text.length));
153 | }
154 | });
155 | }
156 | }
--------------------------------------------------------------------------------
/src/export_app_icon.js:
--------------------------------------------------------------------------------
1 | const sketch = require('sketch/dom');
2 | const ui = require('sketch/ui');
3 | const settings = require('sketch/settings');
4 |
5 | const i18n = require('./lib/i18n');
6 | const sk = require('./lib/sk');
7 | const { chooseFolder, directoryIsWriteable, writeContentToFile, revealInFinder } = require('./lib/fs');
8 |
9 | export default function() {
10 |
11 | const document = sketch.getSelectedDocument();
12 | const page = document.selectedPage;
13 |
14 | if (!settings.layerSettingForKey(page, 'is_android_app_icon_template')) {
15 | ui.message(i18n('current_page_is_no_template'));
16 | return;
17 | }
18 |
19 | const background = sk.getLayerByNameFromParent('ic_background', page);
20 | const foreground = sk.getLayerByNameFromParent('ic_foreground', page);
21 | const iconNormal = sk.getLayerByNameFromParent('ic_launcher', page);
22 | const iconRound = sk.getLayerByNameFromParent('ic_launcher_round', page);
23 |
24 | if (!background || !foreground || !iconNormal || !iconRound) {
25 | ui.message(i18n('app_icon_not_find'));
26 | return;
27 | }
28 |
29 | sk.resizeLayer(background, 108);
30 | sk.resizeLayer(foreground, 108);
31 | sk.resizeLayer(iconNormal, 192);
32 | sk.resizeLayer(iconRound, 192);
33 |
34 | // Export.
35 | let exportFolder = chooseFolder();
36 | if (exportFolder) {
37 | // ExportFolder is writeable
38 | if (!directoryIsWriteable(exportFolder)) {
39 | ui.message(i18n('cannot_export_to_folder'));
40 | return;
41 | }
42 |
43 | // Hide grid symbol instances
44 | const gridStatus = {};
45 | const gridForAdaptiveIcon = sk.getLayerByNameFromParent('icon_grid_android_o', page);
46 | const gridForLegacyIcon = sk.getLayerByNameFromParent('icon_grid', page);
47 | gridForAdaptiveIcon.getAllInstances().forEach(instance => {
48 | gridStatus[String(instance.id)] = instance.hidden;
49 | instance.hidden = true;
50 | });
51 | gridForLegacyIcon.getAllInstances().forEach(instance => {
52 | gridStatus[String(instance.id)] = instance.hidden;
53 | instance.hidden = true;
54 | });
55 |
56 | // Export XML
57 | const xmlContent = '
11 |
12 |
13 |
14 |
15 |
17 |
18 |
19 |
23 |
24 |
25 |
26 |
27 |
28 |
29 |
33 |
34 |
35 |
36 |
37 |
38 |
39 |
40 |
41 |