[Feat] Export Path

Author: thize

README.md

@@ -1,5 +1,5 @@
 # Adobe XD Flutter Code Generate - Plugin
-<a href="https://github.com/thize/xd-to-flutter/releases"><img src="https://img.shields.io/badge/Xd%20to%20Flutter-v3.1.1-blue"/></a>
+<a href="https://github.com/thize/xd-to-flutter/releases"><img src="https://img.shields.io/badge/Xd%20to%20Flutter-v3.2.0-blue"/></a>
 
 ⚠️ **If you encounter an issue or have any feedback which you think could improve Plugin, please open an issue [here](https://github.com/thize/xd-to-flutter/issues)**
 

main.js

@@ -20,5 +20,7 @@ module.exports = {
 TODO:
 ! Android Adaptive icon
 ! Mask
-! Grid
+! Repeat Grid
+! List View
+! Styled Widget
 */

src/generate_path.js

@@ -0,0 +1,68 @@
+const scenegraph = require("scenegraph");
+const clipboard = require("clipboard");
+const { changeOutputUiText } = require("./ui/components/output_ui");
+const { formatDart } = require("./widgets/util/format_dart");
+const { fix } = require("./util");
+
+function onTapGeneratePath() {
+    const item = scenegraph.selection.items[0];
+    const pathData = item.pathData;
+    const lb = item.localBounds;
+    const movs = [];
+    const letters = new Set();
+    pathData.split(' ').forEach((e) => {
+        if (e.match(/^[A-Za-z]+$/)) {
+            movs.push(new Mov(e));
+            letters.add(e);
+        } else {
+            let value = parseFloat(e);
+            movs[movs.length - 1].values.push(value);
+        }
+    });
+    // var letterStr = '';
+    // letters.forEach((letter) => {
+    //     letterStr += `${letter}  -  `;
+    // });
+    // console.log(`Types = ${letterStr}`);
+    movs.forEach((e) => {
+        for (var i = 0; i < e.values.length; i++) {
+            e.values[i] = fix((e.values[i] - (i % 2 == 0 ? lb.x : lb.y)));
+        }
+    });
+    let dartCode = `Path path = Path()`;
+    movs.forEach((e) => {
+        const t = e.type;
+        const v = e.values;
+        if (t == 'M') {
+            // [x, y]
+            dartCode += `..moveTo(${nmn(v[0])}, ${nmn(v[1])})`
+        } else if (t == 'L') {
+            // [x, y]
+            dartCode += `..lineTo(${nmn(v[0])}, ${nmn(v[1])})`
+        } else if (t == 'C') {
+            // [x1, y1, x2, y2, x3, y3]
+            dartCode += `..cubicTo(${nmn(v[0])}, ${nmn(v[1])}, ${nmn(v[2])}, ${nmn(v[3])}, ${nmn(v[4])}, ${nmn(v[5])})`
+        }
+    });
+    changeOutputUiText('Success');
+    dartCode = formatDart(dartCode + ';');
+    // console.log(`dartCode = ${dartCode}`);
+    clipboard.copyText(dartCode);
+}
+
+exports.onTapGeneratePath = onTapGeneratePath;
+
+function nmn(value) {
+    const element = document.getElementById('numbersMethodName');
+    let methodName = element != null ? element.value : element;
+    methodName = methodName ? methodName : '';
+    if (methodName == '') return value;
+    return `${methodName}(${value})`;
+}
+
+class Mov {
+    constructor(type) {
+        this.values = [];
+        this.type = type;
+    }
+}

src/ui/components/export_buttons_ui.js

@@ -8,8 +8,7 @@ function exportButtonsUi() {
     const components = buildRadio('Components');
     const textStyles = buildRadio('TextStyles');
     const switchs = artboards + components + '<br>' + colors + textStyles;
-
-    const exportContent = title + exportSelectionButton() + exportSingleColorButton();
+    const exportContent = title + exportSelectionButton() + exportSingleColorButton() + exportPathButton();
     const exportAllContent = titleAll + switchs + exportAllButton();
     return exportContent + '<hr>' + exportAllContent;
 }
@@ -29,6 +28,10 @@ function exportSelectionButton() {
     return buttonUi('selectionButton', 'Selected Item', false);
 }
 
+function exportPathButton() {
+    return buttonUi('pathButton', 'Selected Path', false);
+}
+
 function exportSingleColorButton() {
     return buttonUi('singleColorButton', 'Selected Item Color', false);
 }

src/ui/main_panel_ui.js

@@ -7,6 +7,7 @@ const { exportButtonsUi, exportIconButtons } = require("./components/export_butt
 const { exportWithCheckBoxsUi } = require("./components/export_with_checkboxs_ui");
 const { getFolderPath, changeProjectFolder } = require('../project_folder');
 const { onTapGenerate } = require("../generate");
+const { onTapGeneratePath } = require("../generate_path");
 const { exportAppIcon } = require("../icon/functions");
 const { numbersMethodName } = require("./components/numbers_method_name");
 const { exportColor } = require("../color");
@@ -39,15 +40,19 @@ function show(event) {
 
 let oldItemsLengh;
 function update() {
+
     const items = scenegraph.selection.items;
     const singleColorButton = document.getElementById('singleColorButton');
     const isToActiveSingleColorButton = items.length == 1 && (items[0].children.length == 0 || items[0].constructor.name == 'Artboard');
     _changeButtonState(singleColorButton, isToActiveSingleColorButton);
     const selectionButton = document.getElementById('selectionButton');
+    const pathButton = document.getElementById('pathButton');
     const iosIconButton = document.getElementById('iosIconButton');
     const androidIconButton = document.getElementById('androidIconButton');
     const isToActiveSelectionButton = items.length > 0;
     _changeButtonState(selectionButton, isToActiveSelectionButton);
+    const isToActivePathButton = items.length == 1 && items[0].constructor.name == 'Path';
+    _changeButtonState(pathButton, isToActivePathButton);
     const isToActiveIosIconButton = items.length == 1;
     _changeButtonState(iosIconButton, isToActiveIosIconButton);
     const isToActiveAndroidIconButton = items.length == 1;
@@ -72,6 +77,12 @@ function buildTaps() {
     }, function () {
         changeOutputUiText(`Select something`, 'red');
     });
+    let pathButton = document.getElementById('pathButton');
+    pathButton.onclick = _checkActive(pathButton, function () {
+        onTapGeneratePath();
+    }, function () {
+        changeOutputUiText(`Select one path`, 'red');
+    });
     let exportAllButton = document.getElementById('exportAllButton');
     exportAllButton.onclick = _checkActive(exportAllButton, function () {
         let exportAllRadio = document.querySelector('input[name="exportAllRadio"]:checked');

src/util.js

@@ -23,6 +23,7 @@ function _isSvgLine(item) {
 
 function isSvgFolder(item) {
     let onlySvg = true;
+    if (item.name.includes('svg_')) return onlySvg;
     item.children.forEach(child => {
         if (onlySvg) {
             // if (child instanceof Group) {
@@ -179,7 +180,6 @@ function applyRegex(str) {
                 index++;
             }
             let fix = str.substring(ini, end);
-            console.log('fix height');
             fix = fix.replace(new RegExp(`height: ${methodName}\(.*\)`, 'gm'), (value) => {
                 return value.replace(`${methodName}(`, '').replace(')', '');
             });

src/widgets/svg.js

@@ -15,11 +15,27 @@ class SvgWidget {
 
     toDart() {
         const node = this.xdNode;
+        if (node.name.includes('svg_')) return this.assetSvg();
         const path = new Path(node);
         path.shapes = this.shapes;
         return path.toString();
     }
 
+    assetSvg() {
+        const node = this.xdNode;
+        let height = node.height;
+        height = height != null ? height : node.localBounds.height;
+        height = height == 0 ? 1 : height;
+        let width = node.width;
+        width = width != null ? width : node.localBounds.width;
+        width = width == 0 ? 1 : width;
+        return `SvgPicture.asset(
+                //TODO: ${node.name}
+            'assets/${node.name.replace('svg_', '')}.svg',
+            width: ${width},
+            height: ${height},
+        )`;
+    }
 
     addShapesFromGroup(xdNode) {
         xdNode.children.forEach(child => {

src/widgets/util/xd_alignment_to_dart_alignment.js

@@ -7,7 +7,6 @@ function xdAlignmentToDartAlignment(x, y) {
     const align = `Alignment(${dx},${dy})`;
     const dif = Math.abs(dx - dy);
     if(dif < 0.02) return 'Alignment.center';
-    console.log(`dif = ${dif}`);
     return nameAlignment[align] ? nameAlignment[align] : align;
 }