Skip to content
This repository was archived by the owner on Mar 3, 2025. It is now read-only.

Commit 65b33a7

Browse files
committed
[3.3.3]
1 parent 4045c72 commit 65b33a7

12 files changed

+55
-53
lines changed

.gitignore

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
.DS_Store

CHANGELOG.md

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
# Changelog
2+
All notable changes to this project will be documented in this file.
3+
4+
The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
5+
and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
6+
7+
## [3.3.3] - 2021-02-19
8+
### Changed
9+
- fix Text Height
10+
- fix Export Artboard Color
11+
- fix Export All Colors
12+
- fix import app_colors.dart
13+
14+
### Removed
15+
- Simple Type
16+
- Group Name Comment

main.js

Lines changed: 0 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -27,14 +27,4 @@ TODO:
2727
! Mask
2828
! Repeat Grid
2929
! List View
30-
31-
TODO: Simple Type:
32-
* Text
33-
* Svg
34-
* Children
35-
* InkWell
36-
* Mask
37-
* Grid
38-
* Container
39-
! Text Rich
4030
*/

manifest.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -42,5 +42,5 @@
4242
}
4343
}
4444
],
45-
"version": "3.3.2"
45+
"version": "3.3.3"
4646
}

src/color.js

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
const { getColor } = require("./widgets/util/color");
22
const { exportDialog } = require("./ui/dialogs/dialogs");
3+
const { Artboard } = require("scenegraph");
34

45
let clipboard = require("clipboard");
56
let scenegraph = require("scenegraph")
@@ -31,7 +32,7 @@ async function exportColor() {
3132
withErro = null;
3233
color = null;
3334
const node = scenegraph.selection.items[0];
34-
if (node.children.length > 1 || scenegraph.selection.items.length > 1) {
35+
if ((node.children.length > 1 && !(node instanceof Artboard)) || scenegraph.selection.items.length > 1) {
3536
await exportDialog("Select only one item", 'Ok', 'Tap any key to close');
3637
} else {
3738
document.addEventListener('keydown', keydownFunc);

src/export_all.js

Lines changed: 5 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -65,9 +65,9 @@ function exportAllColors() {
6565
let resColors = '';
6666
assetsColors.forEach((assetsColor, index) => {
6767
const name = assetsColor.name != null ? assetsColor.name : `color${index + 1}`;
68-
const generatedColor = _isGradient(assetsColor) ? _gradientColorList(assetsColor) : getColor(assetsColor.color)
68+
const generatedColor = _isGradient(assetsColor) ? _gradientColorList(assetsColor) : getColor(assetsColor.color, 1, false)
6969
const staticType = _isGradient(assetsColor) ? 'List<Color>' : 'Color';
70-
const generatedStaticColor = `static ${staticType} get ${name} => ${generatedColor};`
70+
const generatedStaticColor = `static const ${staticType} ${name} = ${generatedColor.replace('const ', '')};`
7171
resColors += generatedStaticColor + '\n';
7272
});
7373
if (resColors == '') {
@@ -110,13 +110,14 @@ function getImports(widget, componentsNames) {
110110
const googleFonts = widget.includes('GoogleFonts.') ? `import 'package:google_fonts/google_fonts.dart';\n` : '';
111111
const math = widget.includes('Transform.rotate') ? `import 'dart:math';\n` : '';
112112
const simplecode = widget.includes('sz(') ? `import 'package:simple_code/simple_code.dart';\n` : '';
113+
const appColors = widget.includes('AppColors.') ? `import 'app_colors.dart';\n` : '';
113114
let importsComponents = '';
114115
componentsNames.forEach(c => {
115116
if (widget.includes(`const ${c}`) && !widget.includes(`class ${c}`)) {
116117
importsComponents += `import '${c}.dart';\n`;
117118
}
118119
});
119-
return material + svg + googleFonts + math + simplecode + importsComponents + '\n';
120+
return material + svg + googleFonts + math + simplecode + appColors + importsComponents + '\n';
120121
}
121122

122123
function getImportsTextStyle(widget) {
@@ -187,7 +188,7 @@ function _isGradient(fill) {
187188
function _gradientColorList(gradient) {
188189
let colors = [];
189190
gradient.colorStops.forEach(colorStop => {
190-
colors.push(dartColor(colorStop.color));
191+
colors.push(getColor(colorStop.color, 1, false));
191192
});
192193
return `[${colors}]`;
193194
}

src/ui/components/export_with_checkboxs_ui.js

Lines changed: 1 addition & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -3,33 +3,14 @@ const { rowUi } = require("./util");
33
function exportWithCheckBoxsUi() {
44
const title = '<h1>Export with</h1>';
55
const checkboxs =
6-
prototypeInteractionsUi() +
7-
// googleFontsUi() +
8-
// simpleCodeUi() +
9-
simpleTypeUi();
6+
prototypeInteractionsUi();
107
return title + checkboxs;
118
}
129

1310
module.exports = {
1411
exportWithCheckBoxsUi: exportWithCheckBoxsUi,
1512
};
1613

17-
18-
19-
// function googleFontsUi() {
20-
// return rowUi(`<input type="checkbox" id="googleFonts" name="googleFonts">Google Fonts`);
21-
// }
22-
23-
// function simpleCodeUi() {
24-
// return rowUi(`<input type="checkbox" id="simpleCode" name="simpleCode" >SimpleCode`);
25-
// }
26-
2714
function prototypeInteractionsUi() {
2815
return rowUi(`<input type="checkbox" id="prototypeInteractions" name="prototypeInteractions" checked>Prototype Interactions`);
2916
}
30-
31-
32-
function simpleTypeUi() {
33-
return rowUi(`<input type="checkbox" id="simpleType" name="simpleType">Simple Type (Alpha)`);
34-
// return rowUi(`<input type="checkbox" id="simpleType" name="simpleType" >Simple Type (Beta)`);
35-
}

src/ui/components/output_ui.js

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@ function outputUi(two) {
77
return title + outputText;
88
}
99

10-
function changeOutputUiText(newText, color) {
10+
function changeOutputUiText(newText, color, stop = false) {
1111
const redColor = 'LightCoral';
1212
const greenColor = 'MediumSeaGreen';
1313
const element = document.getElementById('outputText');
@@ -24,6 +24,7 @@ function changeOutputUiText(newText, color) {
2424
element.style.color = color;
2525
element2.style.color = color;
2626
}
27+
if (stop) alert('error to stop the app');
2728
}
2829

2930
function getOutputUiText() {

src/widgets/children.js

Lines changed: 8 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -85,7 +85,7 @@ class Children {
8585
const spacer = this.childrenSpaces[index];
8686
if (spacer > 0) {
8787
if (withStyledWidget) {
88-
widgets.push(`s(${spacer})`);
88+
widgets.push(`${spacer}.spacer`);
8989
} else {
9090
widgets.push(`Spacer(flex: ${spacer})`);
9191
}
@@ -98,27 +98,27 @@ class Children {
9898
let set = new Set(dist);
9999
if (set.size == 1) {
100100
if (set.getByIdx(0) == 0) return;
101-
this.columnOrRowMainAlignment = withSw ? '.mainSpaceEvenly' : 'mainAxisAlignment: MainAxisAlignment.spaceEvenly,';
101+
this.columnOrRowMainAlignment = withSw ? '.mSpaceEvenly' : 'mainAxisAlignment: MainAxisAlignment.spaceEvenly,';
102102
return;
103103
}
104104
set = new Set(dist.slice(1, dist.length - 1)); // remove first and last item of Set
105105
if (dist[0] == 0 && dist[dist.length - 1] == 0 && set.size == 1) {
106-
this.columnOrRowMainAlignment = withSw ? '.mainSpaceBetween' : 'mainAxisAlignment: MainAxisAlignment.spaceBetween,';
106+
this.columnOrRowMainAlignment = withSw ? '.mSpaceBetween' : 'mainAxisAlignment: MainAxisAlignment.spaceBetween,';
107107
return;
108108
}
109109
let first = dist[0];
110110
if (first != 0 && dist[dist.length - 1] == first && set.size == 1 && set.getByIdx(0) == first * 2) {
111-
this.columnOrRowMainAlignment = withSw ? '.mainSpaceAround' : 'mainAxisAlignment: MainAxisAlignment.spaceAround,';
111+
this.columnOrRowMainAlignment = withSw ? '.mSpaceAround' : 'mainAxisAlignment: MainAxisAlignment.spaceAround,';
112112
return;
113113
}
114114
let last = dist[dist.length - 1];
115115
if (first != 0 && last != 0 && first == last && set.size == 1 && set.getByIdx(0) == 0) {
116-
this.columnOrRowMainAlignment = withSw ? '.mainCenter' : 'mainAxisAlignment: MainAxisAlignment.center,';
116+
this.columnOrRowMainAlignment = withSw ? '.mCenter' : 'mainAxisAlignment: MainAxisAlignment.center,';
117117
return;
118118
}
119119
set = new Set(dist.slice(1, dist.length)); // remove first and last item of Set
120120
if (first != 0 && set.size == 1 && set.getByIdx(0) == 0) {
121-
this.columnOrRowMainAlignment = withSw ? '.mainEnd' : 'mainAxisAlignment: MainAxisAlignment.end,';
121+
this.columnOrRowMainAlignment = withSw ? '.mEnd' : 'mainAxisAlignment: MainAxisAlignment.end,';
122122
return;
123123
}
124124
}
@@ -166,11 +166,11 @@ class Children {
166166
if (center >= end && center >= start) return;
167167
if (end >= center && end >= start) {
168168
this.isEnd = true;
169-
this.columnOrRowCrossAlignment = withSw ? '.crossEnd' : 'crossAxisAlignment: CrossAxisAlignment.end,';
169+
this.columnOrRowCrossAlignment = withSw ? '.cEnd' : 'crossAxisAlignment: CrossAxisAlignment.end,';
170170
}
171171
if (start >= center && start >= end) {
172172
this.isStart = true;
173-
this.columnOrRowCrossAlignment = withSw ? '.crossStart' : 'crossAxisAlignment: CrossAxisAlignment.start,';
173+
this.columnOrRowCrossAlignment = withSw ? '.cStart' : 'crossAxisAlignment: CrossAxisAlignment.start,';
174174
}
175175
}
176176

src/widgets/group.js

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,8 @@ class GroupWidget {
1111
const { removeItemsFromGroup } = require("../util");
1212
const ungroupedItems = removeItemsFromGroup(this.xdNode.children);
1313
const itemsDart = itemsToDart(ungroupedItems);
14-
return `\n// Group: ${this.xdNode.name}\n${itemsDart}`;
14+
return itemsDart;
15+
// return `\n// Group: ${this.xdNode.name}\n${itemsDart}`;
1516
/*
1617
return `
1718
Container(

src/widgets/text.js

Lines changed: 14 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -80,6 +80,7 @@ function _getText(xdNode, params) {
8080
return _borderText(xdNode, 'Text('
8181
+ `${textParam},` +
8282
_getStyleParam(xdNode, _getTextStyleParamList(xdNode, null, params)) +
83+
_getHeightBehavior(xdNode) +
8384
_getTextAlignParam(xdNode) +
8485
')');
8586
}
@@ -110,10 +111,12 @@ function styledText(xdNode, textParam) {
110111
const al = _getStyledTextAlign(xdNode);
111112
const c = `.color(${getColor(xdNode.fill, getOpacity(xdNode))})`;
112113
const fs = `.size(${xdNode.fontSize})`;
113-
const weight = _getFontWeight(xdNode.fontStyle);
114-
const fw = weight ? `.weight(${weight})` : '';
115114
const family = _getFontFamilyName(xdNode);
116-
const ff = googleFonts.includes(family) ? `.textStyle(GoogleFonts.${family}())` : `.family('${_getFontFamily(xdNode)}')`;
115+
const wgf = googleFonts.includes(family);
116+
const weight = _getFontWeight(xdNode.fontStyle);
117+
const fw = !wgf && weight ? `.weight(${weight})` : '';
118+
const gfw = wgf && weight ? `fontWeight: ${weight}` : '';
119+
const ff = wgf ? `.textStyle(GoogleFonts.${family}(${gfw}))` : `.family('${_getFontFamily(xdNode)}')`;
117120
//! Text Shadow
118121
const shadow = xdNode.shadow;
119122
let ts = '';
@@ -174,7 +177,7 @@ function _getTextRich(xdNode, params) {
174177
// Child spans set their style as a delta of the default.
175178
return _borderText(xdNode, 'Text.rich(TextSpan(' +
176179
' ' + _getStyleParam(xdNode, defaultStyleParams) +
177-
` children: [${str}],` +
180+
` children: [${str}],` + _getHeightBehavior(xdNode) +
178181
`), ${_getTextAlignParam(xdNode)})`);
179182

180183
}
@@ -295,6 +298,13 @@ function _getHeightParam(o) {
295298
`height: ${o.lineSpacing / o.fontSize}, `);
296299
}
297300

301+
function _getHeightBehavior(o) {
302+
// XD reports a lineSpacing of 0 to indicate default spacing.
303+
// Flutter uses a multiplier against the font size for its "height" value.
304+
// XD uses a pixel value.
305+
return (o.lineSpacing === 0 ? '' : `textHeightBehavior: TextHeightBehavior(applyHeightToFirstAscent: false),`);
306+
}
307+
298308
function _getShadowsParam(xdNode) {
299309
return ((xdNode.shadow == null || !xdNode.shadow.visible) ? '' :
300310
`shadows: [${_getShadow(xdNode.shadow)}], `);

src/widgets/util/decorations.js

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -46,18 +46,18 @@ function getStyledDecoration(xdNode, parameters) {
4646
//! border
4747
let s = !xdNode.strokeEnabled ? '' : `
4848
border: Border.all(
49-
width: ${xdNode.strokeWidth}.a,
49+
width: ${xdNode.strokeWidth},
5050
color: ${getColor(xdNode.stroke, getOpacity(xdNode))},
5151
),`;
5252
//! shadow
5353
let bs = xdNode.shadow;
5454
if (!bs || !bs.visible) { bs = ""; } else {
55-
bs = `boxShadow: [BoxShadow(color: ${getColor(bs.color, getOpacity(xdNode))}, offset: Offset(${fix(bs.x)}.a, ${fix(bs.y)}.a), blurRadius: ${fix(bs.blur)}.a, ), ], `;
55+
bs = `boxShadow: [BoxShadow(color: ${getColor(bs.color, getOpacity(xdNode))}, offset: Offset(${fix(bs.x)}, ${fix(bs.y)}), blurRadius: ${fix(bs.blur)}, ), ], `;
5656
}
5757
//! radius
5858
let br = _getBorderRadiusParam(xdNode);
5959
//! Result
60-
return `.decorated(
60+
return `.decoration(
6161
${_getFillParam(xdNode, parameters)}${s}${bs}${br}
6262
)`;
6363
}

0 commit comments

Comments
 (0)