[Feat] FontStyle from Assets Panel

thize · May 18, 2020 · c0029d0 · c0029d0
1 parent c1c7f8d
commit c0029d0
Show file tree

Hide file tree

Showing 6 changed files with 400 additions and 19 deletions.
diff --git a/src/core/functions/color.js b/src/core/functions/color.js
@@ -4,7 +4,7 @@ const { exportFiles } = require("./util/project_folder");
 const { formatDart } = require("./util/format_dart");
 const { widgetPrefix, exportTo, copyToClipboard } = require("./util/util");
 const { changeOutputUiText } = require("../../ui/components/output_ui");
-const { dartColor, gradientColorList, isGradient } = require("../widgets/util");
+const { dartColor, gradientColorList, isGradient } = require("../widgets/util/util");
 
 async function exportSelectionColor() {
     document.addEventListener('keydown', keydownFunc);
@@ -18,7 +18,7 @@ function exporColorsFromAssetsPanel() {
         const name = assetsColor.name != null ? assetsColor.name : `color${index + 1}`;
         const generatedColor = isGradient(assetsColor) ? gradientColorList(assetsColor) : dartColor(assetsColor.color);
         const staticType = isGradient(assetsColor) ? 'List<Color>' : 'Color';
-        const generatedStaticColor = `static ${staticType} get ${name} => const ${generatedColor};`
+        const generatedStaticColor = `static ${staticType} get ${name} => ${generatedColor};`
         resColors += generatedStaticColor;
     });
     if (resColors == '') {
@@ -31,12 +31,17 @@ function exporColorsFromAssetsPanel() {
             copyToClipboard(appColorsClass);
             changeOutputUiText('class AppColors copied to clipboard');
         } else {
-            changeOutputUiText('Exporting Dart File');
+            changeOutputUiText('Exporting app_colors.dart');
             exportFiles(['app_colors.dart'], [appColorsClass]);
         }
     }
 }
 
+module.exports = {
+    exportSelectionColor: exportSelectionColor,
+    exporColorsFromAssetsPanel: exporColorsFromAssetsPanel,
+};
+
 const keydownFunc = function (event) {
     const item = scenegraph.selection.items[0];
     const key = event.key;
@@ -61,8 +66,3 @@ const keydownFunc = function (event) {
         changeOutputUiText('Tapped not mapped', 'red');
     }
 };
-
-module.exports = {
-    exportSelectionColor: exportSelectionColor,
-    exporColorsFromAssetsPanel: exporColorsFromAssetsPanel,
-};
diff --git a/src/core/functions/export.js b/src/core/functions/export.js
@@ -1,4 +1,5 @@
 const { exportSelectionColor, exporColorsFromAssetsPanel } = require('./color');
+const { exporTextStylesFromAssetsPanel } = require('./text_style');
 
 function onTapExport(type) {
     switch (type) {
@@ -15,7 +16,7 @@ function onTapExport(type) {
             exporColorsFromAssetsPanel();
             break;
         case 'FontStyles':
-            exportFontStyles();
+            exporTextStylesFromAssetsPanel();
             break;
         case 'SingleColor':
             exportSelectionColor();
@@ -40,8 +41,4 @@ function exportArtboards() {
 
 function exportComponents() {
     console.log('exportComponents');
-}
-
-function exportFontStyles() {
-    console.log('exportFontStyles');
-}
+}
diff --git a/src/core/functions/text_style.js b/src/core/functions/text_style.js
@@ -0,0 +1,87 @@
+const { widgetPrefix, exportTo, copyToClipboard } = require("./util/util");
+const assets = require("assets");
+const { formatDart } = require("./util/format_dart");
+const { dartColor } = require("../widgets/util/util");
+const { exportFiles } = require("./util/project_folder");
+const { changeOutputUiText } = require("../../ui/components/output_ui");
+
+function exporTextStylesFromAssetsPanel() {
+    const assetsTextStyles = assets.characterStyles.get();
+    let resStyles = '';
+    assetsTextStyles.forEach((assetsTextStyle, index) => {
+        const name = assetsTextStyle.name != null ? assetsTextStyle.name : `textStyle${index + 1}`;
+        const generatedTextStyle = _generateTextStyle(assetsTextStyle.style);
+        const generatedStaticTextStyle = `static TextStyle get ${name} => const ${generatedTextStyle};`
+        resStyles += generatedStaticTextStyle;
+    });
+    if (resStyles == '') {
+        changeOutputUiText('Without Text Styles in Assets Panel', 'red');
+    } else {
+        const prefix = widgetPrefix();
+        const appTextStylesClass = formatDart(`class ${prefix}AppTextStyles {${resStyles}}`);
+        const exportToValue = exportTo();
+        if (exportToValue == 'clipboard') {
+            copyToClipboard(appTextStylesClass);
+            changeOutputUiText('class AppTextStyles copied to clipboard');
+        } else {
+            changeOutputUiText('Exporting app_text_styles.dart');
+            exportFiles(['app_text_styles.dart'], [appTextStylesClass]);
+        }
+    }
+}
+
+module.exports = {
+    exporTextStylesFromAssetsPanel: exporTextStylesFromAssetsPanel,
+};
+
+function _generateTextStyle(textStyle) {
+    return `TextStyle(
+        color: ${dartColor(textStyle.fill)},
+        fontSize: ${textStyle.fontSize},
+        ${_fontWeight(textStyle)}
+        fontFamily: '${textStyle.fontFamily}',
+        ${_decoration(textStyle)}
+      )`;
+}
+
+function _fontWeight(style) {
+    let fontWeight = style.fontStyle.toLowerCase().replace("-", "");
+    if (fontWeight == "thin") {
+        fontWeight = "100";
+    } else if (fontWeight == "extraligth") {
+        fontWeight = "200";
+    } else if (fontWeight == "light") {
+        fontWeight = "300";
+    } else if (fontWeight == "medium") {
+        fontWeight = "500";
+    } else if (fontWeight == "semibold") {
+        fontWeight = "600";
+    } else if (fontWeight == "bold") {
+        fontWeight = "700";
+        return 'fontWeight: FontWeight.bold,';
+    } else if (fontWeight == "extrabold") {
+        fontWeight = "800";
+    } else if (fontWeight == "black") {
+        fontWeight = "900";
+    } else {
+        fontWeight = "400";
+        return "";
+    }
+    return `fontWeight: FontWeight.w${fontWeight},`;
+}
+
+function _decoration(style) {
+    let content;
+    if (style.strikethrough && style.underline) {
+        content = `TextDecoration.combine(
+        [TextDecoration.lineThrough, TextDecoration.underline])`;
+    } else if (style.strikethrough) {
+        content = "TextDecoration.lineThrough";
+    } else if (style.underline) {
+        content = "TextDecoration.underline";
+    }
+    if (content != undefined) {
+        return `decoration: ${content},`;
+    }
+    return "";
+}