Skip to content

Commit

Permalink
[3.3.0]
Browse files Browse the repository at this point in the history 
CHANGELOG:

Export Color now use Colors from Asset Panel

Added:
Bordered Text
Column/Row Cross Alignment
BorderRadius vertial / horizontal
Simple Type (Alpha)

Fixed:
Column/Row Alignments
Container Decoration
UI Flow
  • Loading branch information
@thize
thize committed Nov 23, 2020
1 parent bfa2953 commit e4ca6d8
Show file tree
Hide file tree
Showing 10 changed files with 198 additions and 29 deletions.
26 changes: 19 additions & 7 deletions main.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,14 +18,26 @@ module.exports = {

/*
CHANGELOG:
Export Color now use Colors from Asset Panel
Added:
Bordered Text
Fix Container Decoration
Added Column/Row Cross Alignment
Column/Row Cross Alignment
Simple Type (Alpha)
Fixed:
Column/Row Alignments
Container Decoration
UI Flow
* Done
? Have to do
! To Do
TODO:
! Use Color from Asset Panel
! Use TextStyle from Asset Panel
! Android Adaptive icon
! Use TextStyle from Asset Panel
! Mask
! Repeat Grid
! List View
Expand All @@ -35,8 +47,8 @@ TODO: Simple Type:
* Svg
* Children
* InkWell
* Mask
* Grid
* Container
! Text Rich
! Container
! Mask
! Grid
*/
2 changes: 1 addition & 1 deletion manifest.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -42,5 +42,5 @@
}
}
],
"version": "3.2.0"
"version": "3.3.0"
}
1 change: 0 additions & 1 deletion src/export_all.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,6 @@ const assets = require("assets");
const { Parameter, ParameterRef } = require("./widgets/util/parameter");
const { _getStyleParam, _getTextStyleParamList } = require("./widgets/text");
const { applyRegex } = require("./util");
const { _getFillParam } = require("./widgets/util/decorations");
const { getColor } = require("./widgets/util/color");
let components = [];
let componentsNames = [];
Expand Down
15 changes: 8 additions & 7 deletions src/ui/components/export_with_checkboxs_ui.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,19 +16,20 @@ module.exports = {



function googleFontsUi() {
return rowUi(`<input type="checkbox" id="googleFonts" name="googleFonts">Google Fonts`);
}
// function googleFontsUi() {
// return rowUi(`<input type="checkbox" id="googleFonts" name="googleFonts">Google Fonts`);
// }

// function simpleCodeUi() {
// return rowUi(`<input type="checkbox" id="simpleCode" name="simpleCode" >SimpleCode`);
// }

function prototypeInteractionsUi() {
return rowUi(`<input type="checkbox" id="prototypeInteractions" name="prototypeInteractions" checked>Prototype Interactions`);
}

function simpleCodeUi() {
return rowUi(`<input type="checkbox" id="simpleCode" name="simpleCode" >SimpleCode`);
}

function simpleTypeUi() {
return rowUi(`<input type="checkbox" id="simpleType" name="simpleType" disabled="disabled" >Simple Type (Coming soon)`);
return rowUi(`<input type="checkbox" id="simpleType" name="simpleType">Simple Type (Alpha)`);
// return rowUi(`<input type="checkbox" id="simpleType" name="simpleType" >Simple Type (Beta)`);
}
24 changes: 20 additions & 4 deletions src/widgets/children.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -201,23 +201,39 @@ class Children {
const right = this.rightDistance[index];
const isColumn = this.type == 'Column';
let resAlignment;
let withStyledWidget = document.querySelector('input[name="simpleType"]');
withStyledWidget = withStyledWidget != null ? withStyledWidget.checked : null;
if (isColumn) {
if (left != right) {
let auxRight = right == 0 && left == 0 ? 1 : right;
const alignX = (left / (left + auxRight));
resAlignment = xdAlignmentToDartAlignment(alignX, 0.5);
const aux = this.isEnd ? 'Alignment.centerRight' : this.isStart ? 'Alignment.centerLeft' : 'Alignment.center';
if (resAlignment != aux)
return `Align(alignment: ${resAlignment}, child: ${child.toDart()},)`;
if (resAlignment != aux) {
if (!withStyledWidget) {
return `Align(alignment: ${resAlignment}, child: ${child.toDart()},)`;
}
if (resAlignment == 'Alignment.center') {
return `${child.toDart()}.center()`;
}
return `${child.toDart()}.alignment(${resAlignment})`;
}
}
} else {
if (top != bot) {
let auxBot = bot == 0 && top == 0 ? 1 : bot;
const alignY = (top / (top + auxBot));
resAlignment = xdAlignmentToDartAlignment(0.5, alignY);
const aux = this.isEnd ? 'Alignment.bottomCenter' : this.isStart ? 'Alignment.topCenter' : 'Alignment.center';
if (resAlignment != aux)
return `Align(alignment: ${resAlignment}, child: ${child.toDart()},)`;
if (resAlignment != aux) {
if (!withStyledWidget) {
return `Align(alignment: ${resAlignment}, child: ${child.toDart()},)`;
}
if (resAlignment == 'Alignment.center') {
return `${child.toDart()}.center()`;
}
return `${child.toDart()}.alignment(${resAlignment})`;
}
}
}
return widget;
Expand Down
59 changes: 57 additions & 2 deletions src/widgets/container.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,9 +12,10 @@ written permission of Adobe.

const { Bounds } = require("../bounds");
const { getAlignmentByFather } = require("./util/alignment_by_father");
const { getColorOrDecorationParam } = require("./util/decorations");
const { getColorOrDecorationParam, getStyledDecoration } = require("./util/decorations");
const xd = require("scenegraph");
const { Parameter, ParameterRef } = require("./util/parameter");
const { getColor } = require("./util/color");

class ContainerWidget {
constructor(xdNode) {
Expand All @@ -35,6 +36,9 @@ class ContainerWidget {
}

toDart(child) {
let withStyledWidget = document.querySelector('input[name="simpleType"]');
withStyledWidget = withStyledWidget != null ? withStyledWidget.checked : null;
if (withStyledWidget) return this.styledWidget(this.xdNode, child, this.parameters);
const alignment = child != null ? getAlignmentByFather(child, this, true) : '';
let childWidget = child != null ? `child:${child.toDart()},` : ``;
let c = getColorOrDecorationParam(this.xdNode, this.parameters);
Expand All @@ -46,10 +50,61 @@ class ContainerWidget {
${childWidget}
)`;
}

styledWidget(xdNode, child, parameters) {
const lb = xdNode.localBounds;
let childWidget = child != null ? getStyledAlignmentByFather(child, this) : `boxWidget`;
const { fix } = require("../util");
let w = fix(lb.width);
let h = fix(lb.height);
if (w == h) {
w = `.sq(${w})`;
h = '';
} else {
w = `.w(${w})`;
h = `.h(${h})`;
}
let d = '';
let noCorner = !(xdNode instanceof xd.Ellipse);
if (noCorner) {
const radii = xdNode.cornerRadii;
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)})`;
} else {
d = getStyledDecoration(xdNode, parameters);
}
return `${childWidget}${w}${h}${d}`;
}
}

exports.ContainerWidget = ContainerWidget;

function getProp(xdNode, prop) {
let o = xdNode.pluginData;
return o && o[prop];
}
}


function getStyledAlignmentByFather(node, fatherNode) {
const { xdAlignmentToDartAlignment } = 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;
const left = node.bounds.x1 - fatherNode.bounds.x1;
let auxBot = bot == 0 && top == 0 ? 1 : bot;
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})`;
}
if (onlyTag) return '';
return node.toDart();
}
7 changes: 7 additions & 0 deletions src/widgets/grid.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,13 @@ class GridWidget {
}

toDart() {
let withStyledWidget = document.querySelector('input[name="simpleType"]');
withStyledWidget = withStyledWidget != null ? withStyledWidget.checked : null;
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)`;
}
return `
Container(
// [${this.xdNode.name}] Repeat grid aren't supported.
Expand Down
7 changes: 7 additions & 0 deletions src/widgets/mask.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,13 @@ class MaskWidget {
// const { removeItemsFromGroup } = require("../util");
// const ungroupedItems = removeItemsFromGroup(this.xdNode.children);
// const itemsDart = itemsToDart(ungroupedItems);
let withStyledWidget = document.querySelector('input[name="simpleType"]');
withStyledWidget = withStyledWidget != null ? withStyledWidget.checked : null;
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)`;
}
return `
Container(
// [${this.xdNode.name}] Group masks aren't supported.
Expand Down
31 changes: 28 additions & 3 deletions src/widgets/util/color.js
View file
Original file line number Diff line number Diff line change
@@ -1,8 +1,11 @@
const assets = require("assets");


function getColor(color, opacity = 1.0) {
function getColor(color, opacity = 1.0, fromAsset = true) {
const hexColor = color.toHex(true).replace("#", "").toUpperCase();
const colorResult = _colorToMaterialColor(`Color(0xFF${hexColor})`);
let colorResult = _colorToMaterialColor(`Color(0xFF${hexColor})`);
if (fromAsset) {
colorResult = _colorToAssetPanelColor(colorResult);
}
const withOpacity = _withOpacity((color.a / 255) * opacity);
return `${colorResult}${withOpacity}`;
}
Expand All @@ -22,6 +25,28 @@ function _colorToMaterialColor(color) {
return 'const ' + color;
}

function _colorToAssetPanelColor(color) {
const assetsColors = assets.colors.get();
for (let i = 0; i < assetsColors.length; i++) {
const assetsColor = assetsColors[i];
const name = assetsColor.name != null ? assetsColor.name : `color${i + 1}`;
if (!_isGradient(assetsColor)) {
const generatedColor = getColor(assetsColor.color, 1, false)
if (generatedColor == color) {
const element = document.getElementById('widgetsPrexix');
let prefix = element != null ? element.value : element;
if (!prefix) prefix = '';
return `${prefix}AppColors.${name}`;
}
}
}
return color;
}

function _isGradient(fill) {
return fill.startY != null || (fill.colorStops != null && fill.colorStops.length > 0);
}

const materialColors = JSON.parse(JSON.stringify(JSON.parse(`{
"Color(0x00000000)" : "Colors.transparent",
"Color(0xFF000000)" : "Colors.black",
Expand Down
55 changes: 51 additions & 4 deletions src/widgets/util/decorations.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -19,9 +19,12 @@ const { changeOutputUiText } = require("../../ui/components/output_ui");

/** BOXDECORATION */
function getColorOrDecorationParam(xdNode, parameters) {
const radii = xdNode.cornerRadii;
const tl = radii.topLeft, tr = radii.topRight, br = radii.bottomRight, bl = radii.bottomLeft;
const noCorner = tl == 0 && tl === tr && tl === br && tl === bl;
let noCorner = !(xdNode instanceof xd.Ellipse);
if (noCorner) {
const radii = xdNode.cornerRadii;
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) {
return _getFillParam(xdNode, parameters);
} else {
Expand All @@ -34,8 +37,33 @@ exports.getColorOrDecorationParam = getColorOrDecorationParam;
function getDecorationParam(o, parameters) {
return `decoration: ${_getBoxDecoration(o, parameters)}, `;
}

exports.getDecorationParam = getDecorationParam;


function getStyledDecoration(xdNode, parameters) {
const { fix, getOpacity } = require("../../util");
//! border
let s = !xdNode.strokeEnabled ? '' : `
border: Border.all(
width: ${xdNode.strokeWidth}.a,
color: ${getColor(xdNode.stroke, getOpacity(xdNode))},
),`;
//! shadow
let bs = xdNode.shadow;
if (!bs || !bs.visible) { bs = ""; } else {
bs = `boxShadow: [BoxShadow(color: ${getColor(bs.color, getOpacity(xdNode))}, offset: Offset(${fix(bs.x)}.a, ${fix(bs.y)}.a), blurRadius: ${fix(bs.blur)}.a, ), ], `;
}
//! radius
let br = _getBorderRadiusParam(xdNode);
//! Result
return `.decorated(
${_getFillParam(xdNode, parameters)}${s}${bs}${br}
)`;
}

exports.getStyledDecoration = getStyledDecoration;

function _getBoxDecoration(xdNode, parameters) {
const { getParamList } = require("../../util");
let str = getParamList([
Expand Down Expand Up @@ -130,8 +158,24 @@ function _getBorderRadiusForRectangle(o) {
let radii = o.cornerRadii;
let tl = radii.topLeft, tr = radii.topRight, br = radii.bottomRight, bl = radii.bottomLeft;
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`;
return `BorderRadius.circular(${tl})`;
} else {
if ((tl == tr || (tl <= 1 && tr <= 1)) && (br == bl || (br <= 1 && bl <= 1))) {
return `BorderRadius.vertical(
${_getRadiusParam("top", tl)}
${_getRadiusParam("bottom", br)}
)`;
}

if ((tl == bl || (tl <= 1 && bl <= 1)) && (br == tr || (br <= 1 && tr <= 1))) {
return `BorderRadius.horizontal(
${_getRadiusParam("left", tl)}
${_getRadiusParam("right", br)}
)`;
}
return 'BorderRadius.only(' +
_getRadiusParam("topLeft", tl) +
_getRadiusParam("topRight", tr) +
Expand All @@ -143,7 +187,10 @@ function _getBorderRadiusForRectangle(o) {

function _getRadiusParam(param, value) {
if (value <= 1) { return ''; }
return `${param}: Radius.circular(${value}), `;
let withStyledWidget = document.querySelector('input[name="simpleType"]');
withStyledWidget = withStyledWidget != null ? withStyledWidget.checked : null;
if (withStyledWidget) return `${param}: ${value}.circular, `;
return `${param}: aRadius.circular(${value}), `;
}


Expand Down

0 comments on commit e4ca6d8

Please sign in to comment.