Skip to content

Commit

Permalink
[Update] Simple Type
Browse files Browse the repository at this point in the history
  • Loading branch information
@thize
thize committed Jan 8, 2021
1 parent 9ff04be commit 4045c72
Show file tree
Hide file tree
Showing 12 changed files with 67 additions and 33 deletions.
Empty file modified README.md
100755 → 100644
View file
Empty file.
Empty file modified images/icon@1x.png
100755 → 100644
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Empty file modified images/icon@2x.png
100755 → 100644
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
2 changes: 1 addition & 1 deletion manifest.json
100755 → 100644
View file
Original file line number Diff line number Diff line change
Expand Up @@ -42,5 +42,5 @@
}
}
],
"version": "3.3.1"
"version": "3.3.2"
}
5 changes: 4 additions & 1 deletion src/widgets/children.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -56,7 +56,10 @@ class Children {
simpleType(widgets) {
const { fix } = require("../util");
return `
[${widgets}].to${this.type}(${this.stackAlignment})${this.columnOrRowMainAlignment}${this.columnOrRowCrossAlignment}.w(${fix(this.w)}).h(${fix(this.h)})
${this.type}(
${this.stackAlignment}
children: <Widget>[${widgets},],
)${this.columnOrRowMainAlignment}${this.columnOrRowCrossAlignment}.w(${fix(this.w)}).h(${fix(this.h)})
`;
}

Expand Down
19 changes: 9 additions & 10 deletions src/widgets/container.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -71,8 +71,8 @@ class ContainerWidget {
const tl = radii.topLeft, tr = radii.topRight, br = radii.bottomRight, bl = radii.bottomLeft;
noCorner = tl == 0 && tl === tr && tl === br && tl === bl;
}
if (!xdNode.strokeEnabled && noCorner && !xdNode.shadow.visible && xdNode.fill instanceof xd.Color) {
d = `.backgroundColor(${getColor(xdNode.fill)})`;
if (!xdNode.strokeEnabled && noCorner && (xdNode.shadow == null || !xdNode.shadow.visible) && xdNode.fill instanceof xd.Color) {
d = `.bgColor(${getColor(xdNode.fill)})`;
} else {
d = getStyledDecoration(xdNode, parameters);
}
Expand All @@ -87,9 +87,8 @@ function getProp(xdNode, prop) {
return o && o[prop];
}


function getStyledAlignmentByFather(node, fatherNode) {
const { xdAlignmentToDartAlignment } = require("./util/xd_alignment_to_dart_alignment");
const { xdAlignmentToStyledDartAlignment } = require("./util/xd_alignment_to_dart_alignment");
const top = node.bounds.y1 - fatherNode.bounds.y1;
const right = fatherNode.bounds.x2 - node.bounds.x2;
const bot = fatherNode.bounds.y2 - node.bounds.y2;
Expand All @@ -98,12 +97,12 @@ function getStyledAlignmentByFather(node, fatherNode) {
const alignY = (top / (top + auxBot));
let auxRight = right == 0 && left == 0 ? 1 : right;
const alignX = (left / (left + auxRight));
const resAlignment = xdAlignmentToDartAlignment(alignX, alignY);
if (resAlignment == 'Alignment.center') {
return `${node.toDart()}.center()`;
}
if (resAlignment != 'Alignment.topLeft') {
return `${node.toDart()}.alignment(${resAlignment})`;
const resAlignment = xdAlignmentToStyledDartAlignment(alignX, alignY);
if (resAlignment[0] != '.topLeft') {
if (resAlignment.length == 1) {
return `${node.toDart()}${resAlignment[0]}`;
}
return `${node.toDart()}.alignment(${resAlignment[0]},${resAlignment[1]})`;
}
if (onlyTag) return '';
return node.toDart();
Expand Down
2 changes: 1 addition & 1 deletion src/widgets/grid.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,7 @@ class GridWidget {
if (withStyledWidget) {
return `Container(
// [${this.xdNode.name}] Repeat grid aren't supported
).w(${this.xdNode.localBounds.width}).h(${this.xdNode.localBounds.height}).backgroundColor(Colors.red)`;
).w(${this.xdNode.localBounds.width}).h(${this.xdNode.localBounds.height}).bgColor(Colors.red)`;
}
return `
Container(
Expand Down
2 changes: 1 addition & 1 deletion src/widgets/mask.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,7 @@ class MaskWidget {
if (withStyledWidget) {
return `Container(
// [${this.xdNode.name}] Group masks aren't supported.
).w(${this.xdNode.localBounds.width}).h(${this.xdNode.localBounds.height}).backgroundColor(Colors.red)`;
).w(${this.xdNode.localBounds.width}).h(${this.xdNode.localBounds.height}).bgColor(Colors.red)`;
}
return `
Container(
Expand Down
10 changes: 4 additions & 6 deletions src/widgets/svg.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -33,10 +33,9 @@ class SvgWidget {
let withStyledWidget = document.querySelector('input[name="simpleType"]');
withStyledWidget = withStyledWidget != null ? withStyledWidget.checked : null;
if (withStyledWidget) {
return `SvgPicture.asset(
return `
//TODO: ${node.name}
'assets/${node.name.replace('svg_', '')}.svg',
).w(${fix(width)}).h(${fix(height)})`;
'assets/${node.name.replace('svg_', '')}.svg'.svgAsset().w(${fix(width)}).h(${fix(height)})`;
}
return `SvgPicture.asset(
//TODO: ${node.name}
Expand Down Expand Up @@ -97,10 +96,9 @@ class Path {
let withStyledWidget = document.querySelector('input[name="simpleType"]');
withStyledWidget = withStyledWidget != null ? withStyledWidget.checked : null;
if (withStyledWidget) {
return `SvgPicture.string(
return `
// ${this.xdNode.name}
${svg},
).w(${fix(width)}).h(${fix(height)})`;
${svg}.svgString().w(${fix(width)}).h(${fix(height)})`;
}
return `SvgPicture.string(
// ${this.xdNode.name}
Expand Down
26 changes: 18 additions & 8 deletions src/widgets/text.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -105,13 +105,15 @@ function _borderText(xdNode, dartCode) {
}

function styledText(xdNode, textParam) {
//TODO: tAlignment
const { getOpacity } = require("../util");
const c = `.textColor(${getColor(xdNode.fill, getOpacity(xdNode))})`;
const fs = `.fontSize(${xdNode.fontSize})`;
const al = _getStyledTextAlign(xdNode);
const c = `.color(${getColor(xdNode.fill, getOpacity(xdNode))})`;
const fs = `.size(${xdNode.fontSize})`;
const weight = _getFontWeight(xdNode.fontStyle);
const fw = weight ? `.fontWeight(${weight})` : '';
const fw = weight ? `.weight(${weight})` : '';
const family = _getFontFamilyName(xdNode);
const ff = googleFonts.includes(family) ? `.textStyle(GoogleFonts.${family}())` : `.fontFamily('${_getFontFamily(xdNode)}')`;
const ff = googleFonts.includes(family) ? `.textStyle(GoogleFonts.${family}())` : `.family('${_getFontFamily(xdNode)}')`;
//! Text Shadow
const shadow = xdNode.shadow;
let ts = '';
Expand All @@ -122,7 +124,7 @@ function styledText(xdNode, textParam) {
const x = shadow.x;
const y = shadow.y;
const offset = (x || y ? x == 0 && y == 0 ? '' : `, offset: Offset(${x}, ${y}),` : '');
ts = `.textShadow(${blur}${color}${offset})`;
ts = `.shadow(${blur}${color}${offset})`;
}
//! Text Decoration
let td = '';
Expand All @@ -142,9 +144,9 @@ function styledText(xdNode, textParam) {
const sc = xdSec == 'round' ? '' : `cap: StrokeCap.${xdSec},`;
const sj = xdSj == 'round' ? '' : `join: StrokeJoin.${xdSj},`;
const sw = xdNode.strokeWidth == 6 ? '' : `width: ${xdNode.strokeWidth},`;
tb = `.textBorder(color:${getColor(xdNode.stroke, getOpacity(xdNode))},${sw}${sc}${sj})`;
tb = `.border(color:${getColor(xdNode.stroke, getOpacity(xdNode))},${sw}${sc}${sj})`;
}
return `Text(${textParam})${ff}${c}${fs}${fw}${ts}${td}${tb}`;
return `${textParam}.text()${ff}${c}${al}${fs}${fw}${ts}${td}${tb}`;
}

function escapeString(str) {
Expand Down Expand Up @@ -294,7 +296,7 @@ function _getHeightParam(o) {
}

function _getShadowsParam(xdNode) {
return (xdNode.shadow == null || !xdNode.shadow.visible ? '' :
return ((xdNode.shadow == null || !xdNode.shadow.visible) ? '' :
`shadows: [${_getShadow(xdNode.shadow)}], `);
}

Expand All @@ -310,6 +312,14 @@ function _getTextAlign(align) {
align === 'center' ? 'center' : 'left');
}

function _getStyledTextAlign(xdNode) {
const align = xdNode.textAlign;
if (align == 'left') return '';
if (align == 'right') return '.tRight';
if (align == 'center') return '.tCenter';
return '';
}

function _getFontStyle(style) {
style = style.toLowerCase();
let match = style.match(FONT_STYLES_RE);
Expand Down
8 changes: 4 additions & 4 deletions src/widgets/util/decorations.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -25,7 +25,7 @@ function getColorOrDecorationParam(xdNode, parameters) {
const tl = radii.topLeft, tr = radii.topRight, br = radii.bottomRight, bl = radii.bottomLeft;
noCorner = tl == 0 && tl === tr && tl === br && tl === bl;
}
if (!xdNode.strokeEnabled && noCorner && !xdNode.shadow.visible && xdNode.fill instanceof xd.Color) {
if (!xdNode.strokeEnabled && noCorner && (xdNode.shadow == null || !xdNode.shadow.visible) && xdNode.fill instanceof xd.Color) {
return _getFillParam(xdNode, parameters);
} else {
return getDecorationParam(xdNode, parameters);
Expand Down Expand Up @@ -160,7 +160,7 @@ function _getBorderRadiusForRectangle(o) {
if (tl === tr && tl === br && tl === bl) {
let withStyledWidget = document.querySelector('input[name="simpleType"]');
withStyledWidget = withStyledWidget != null ? withStyledWidget.checked : null;
if (withStyledWidget) return `${tl}.circularBorder`;
if (withStyledWidget) return `${tl}.circularBorderRadius()`;
return `BorderRadius.circular(${tl})`;
} else {
if ((tl == tr || (tl <= 1 && tr <= 1)) && (br == bl || (br <= 1 && bl <= 1))) {
Expand Down Expand Up @@ -189,8 +189,8 @@ function _getRadiusParam(param, value) {
if (value <= 1) { return ''; }
let withStyledWidget = document.querySelector('input[name="simpleType"]');
withStyledWidget = withStyledWidget != null ? withStyledWidget.checked : null;
if (withStyledWidget) return `${param}: ${value}.circular, `;
return `${param}: aRadius.circular(${value}), `;
if (withStyledWidget) return `${param}: ${value}.circularRadius(), `;
return `${param}: Radius.circular(${value}), `;
}


Expand Down
26 changes: 25 additions & 1 deletion src/widgets/util/xd_alignment_to_dart_alignment.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@ function xdAlignmentToDartAlignment(x, y) {
const dy = fix(fixAlignment(y));
const align = `Alignment(${dx},${dy})`;
const dif = Math.abs(dx - dy);
if(dif < 0.02) return 'Alignment.center';
if (dif < 0.02) return 'Alignment.center';
return nameAlignment[align] ? nameAlignment[align] : align;
}

Expand All @@ -22,7 +22,31 @@ const nameAlignment = {
'Alignment(0.0,1.0)': 'Alignment.bottomCenter',
}

function xdAlignmentToStyledDartAlignment(x, y) {
const { fix } = require('../../util');
/// 0 to 1, have to be -1 to 1
const dx = fix(fixAlignment(x));
const dy = fix(fixAlignment(y));
const align = `Alignment(${dx},${dy})`;
const dif = Math.abs(dx - dy);
if (dif < 0.02) return ['.center()'];
return nameStyleAlignment[align] ? [nameStyleAlignment[align]] : [dx, dy];
}

const nameStyleAlignment = {
'Alignment(-1.0,-1.0)': '.topLeft',
'Alignment(1.0,-1.0)': '.topRight',
'Alignment(0.0,-1.0)': '.topCenter',
'Alignment(1.0,0.0)': '.centerRight',
'Alignment(-1.0,0.0)': '.centerLeft',
'Alignment(0.0,0.0)': '.center()',
'Alignment(1.0,1.0)': '.bottomRight',
'Alignment(-1.0,1.0)': '.bottomLeft',
'Alignment(0.0,1.0)': '.bottomCenter',
}

exports.xdAlignmentToDartAlignment = xdAlignmentToDartAlignment;
exports.xdAlignmentToStyledDartAlignment = xdAlignmentToStyledDartAlignment;

/// 0 => -1
/// 0.5 => 0
Expand Down

0 comments on commit 4045c72

Please sign in to comment.