[Feat] Export with Group

thize · Jun 9, 2020 · 4b75254 · 4b75254
1 parent d94b475
commit 4b75254
Show file tree

Hide file tree

Showing 12 changed files with 84 additions and 49 deletions.
diff --git a/src/items_to_dart.js b/src/items_to_dart.js
@@ -1,5 +1,5 @@
 const { Group, Artboard } = require("scenegraph");
-const { isSvgFolder, xdItemToWidget, widgetCanHaveChild } = require("./util");
+const { isSvgFolder, xdItemToWidget, widgetCanHaveChild, removeItemsFromGroup } = require("./util");
 const { Bounds } = require("./bounds");
 const { Children } = require("./widgets/children");
 const { ArtboardWidget } = require("./widgets/artboard");
@@ -13,30 +13,6 @@ function itemsToDart(items) {
 
 exports.itemsToDart = itemsToDart;
 
-function removeItemsFromGroup(items) {
-    let removedItems = [];
-    items.forEach(item => {
-        const isGroup = item instanceof Group;
-        const isArtboard = item instanceof Artboard;
-        const isSvgGroup = isGroup && (item.name.includes('svg_') || isSvgFolder(item));
-        const isMaskGroup = isGroup && item.mask;
-        const hasInteraction = item.triggeredInteractions[0] != null && item.triggeredInteractions[0].trigger.type == 'tap';
-        if (isSvgGroup || isMaskGroup) {
-            removedItems.push(item);
-        } else if (isGroup || isArtboard) {
-            if (isArtboard || hasInteraction) {
-                removedItems.push(item);
-            }
-            removeItemsFromGroup(item.children).forEach(child => {
-                removedItems.push(child);
-            });
-        } else {
-            removedItems.push(item);
-        }
-    });
-    return removedItems;
-}
-
 function generateWidgetsFromItems(items) {
     const widgets = [];
     items.forEach(item => {
@@ -298,7 +274,7 @@ class Node {
     }
 
     /**
-    * @param {number} depth depth in the Tree to indent the co'de
+    * @param {number} depth depth in the Tree to indent the code
     * @return {string} Generated dart code
     */
     toDart() {

diff --git a/src/util.js b/src/util.js
@@ -2,6 +2,7 @@ const { Path, Line, Group, Polygon, BooleanGroup, Artboard, ImageFill, RepeatGri
 const { ArtboardWidget } = require("./widgets/artboard");
 const { ComponentWidget } = require("./widgets/component");
 const { ContainerWidget } = require("./widgets/container");
+const { GroupWidget } = require("./widgets/group");
 const { GridWidget } = require("./widgets/grid");
 const { ImageWidget } = require("./widgets/image");
 const { InkWellWidget } = require("./widgets/inkwell");
@@ -32,15 +33,24 @@ function isSvgFolder(item) {
 
 exports.isSvgFolder = isSvgFolder;
 
+function hasInteraction(item) {
+    const hasInteraction = item.triggeredInteractions[0] != null && item.triggeredInteractions[0].trigger.type == 'tap';
+    return hasInteraction;
+}
+
+exports.hasInteraction = hasInteraction;
+
 function xdItemToWidget(item) {
     const isImage = item.fill instanceof ImageFill;
     if (isImage) return new ImageWidget(item);
     const isGrid = item instanceof RepeatGrid;
     if (isGrid) return new GridWidget(item);
     const isInkWell = item instanceof Group && !item.name.includes('svg_') && item.triggeredInteractions[0] != null && item.triggeredInteractions[0].trigger.type == 'tap';
     if (isInkWell) return new InkWellWidget(item);
-    const isSvg = item instanceof Group || item instanceof Path || item instanceof Polygon || item instanceof BooleanGroup || _isSvgLine(item);
+    const isSvg = (item instanceof Group && isSvgFolder(item)) || item instanceof Path || item instanceof Polygon || item instanceof BooleanGroup || _isSvgLine(item);
     if (isSvg) return new SvgWidget(item);
+    const isGroup = item instanceof Group;
+    if (isGroup) return new GroupWidget(item);
     const isComponent = item instanceof SymbolInstance;
     if (isComponent) return new ComponentWidget(item);
     const isArtboard = item instanceof Artboard;
@@ -57,8 +67,35 @@ function widgetCanHaveChild(widget) {
     const isSvg = widget instanceof SvgWidget;
     const isComponent = widget instanceof ComponentWidget;
     const isText = widget instanceof TextWidget;
-    const isAWidgetThatCannotHaveChild = isGrid || isSvg || isComponent || isText;
+    //TODO: decide... will Group have child or not?
+    const isGroup = widget instanceof GroupWidget;
+    const isAWidgetThatCannotHaveChild = isGrid || isSvg || isComponent || isText || isGroup;
     return !isAWidgetThatCannotHaveChild;
 }
 
 exports.widgetCanHaveChild = widgetCanHaveChild;
+
+function removeItemsFromGroup(items) {
+    let removedItems = [];
+    items.forEach(item => {
+        const isGroup = item instanceof Group;
+        const isArtboard = item instanceof Artboard;
+        const isSvgGroup = isGroup && (item.name.includes('svg_') || isSvgFolder(item));
+        const isMaskGroup = isGroup && item.mask;
+        if (isSvgGroup || isMaskGroup) {
+            removedItems.push(item);
+        } else if (isArtboard /* || isGroup */) {
+            // if (isArtboard) {
+            removedItems.push(item);
+            // }
+            removeItemsFromGroup(item.children).forEach(child => {
+                removedItems.push(child);
+            });
+        } else {
+            removedItems.push(item);
+        }
+    });
+    return removedItems;
+}
+
+exports.removeItemsFromGroup = removeItemsFromGroup;
diff --git a/src/widgets/artboard.js b/src/widgets/artboard.js
@@ -1,4 +1,4 @@
-const { randomColor } = require("./util/util");
+const { randomColor } = require("./util/widgets_util");
 const { Bounds } = require("../bounds");
 
 class ArtboardWidget {
@@ -8,7 +8,7 @@ class ArtboardWidget {
     }
 
     toDart(child) {
-        let childWidget = child != null ? `child:Center(child:${child.toDart()},),` : ``;
+        let childWidget = child != null ? `child:${child.toDart()},` : ``;
         return `Scaffold(
             backgroundColor: ${randomColor()},
             ${childWidget}

diff --git a/src/widgets/component.js b/src/widgets/component.js
@@ -1,4 +1,4 @@
-const { randomColor } = require("./util/util");
+const { randomColor } = require("./util/widgets_util");
 const { Bounds } = require("../bounds");
 
 class ComponentWidget {
@@ -7,14 +7,12 @@ class ComponentWidget {
         this.bounds = new Bounds(XdNode);
     }
 
-    toDart(child) {
-        let childWidget = child != null ? `child:${child.toDart()},` : ``;
+    toDart() {
         return `Container(
             alignment: Alignment.center,
             width: ${this.XdNode.localBounds.width},
             height: ${this.XdNode.localBounds.height},
             color: ${randomColor()},
-            ${childWidget}
         )`;
     }
 

diff --git a/src/widgets/container.js b/src/widgets/container.js
@@ -1,4 +1,4 @@
-const { randomColor } = require("./util/util");
+const { randomColor } = require("./util/widgets_util");
 const { Bounds } = require("../bounds");
 
 class ContainerWidget {

diff --git a/src/widgets/grid.js b/src/widgets/grid.js
@@ -1,4 +1,4 @@
-const { randomColor } = require("./util/util");
+const { randomColor } = require("./util/widgets_util");
 const { Bounds } = require("../bounds");
 
 class GridWidget {
@@ -7,14 +7,12 @@ class GridWidget {
         this.bounds = new Bounds(XdNode);
     }
 
-    toDart(child) {
-        let childWidget = child != null ? `child:${child.toDart()},` : ``;
+    toDart() {
         return `Container(
             alignment: Alignment.center,
             width: ${this.XdNode.localBounds.width},
             height: ${this.XdNode.localBounds.height},
             color: ${randomColor()},
-            ${childWidget}
         )`;
     }
 

diff --git a/src/widgets/group.js b/src/widgets/group.js
@@ -0,0 +1,30 @@
+const { randomColor } = require("./util/widgets_util");
+const { Bounds } = require("../bounds");
+
+class GroupWidget {
+    constructor(XdNode) {
+        this.XdNode = XdNode;
+        this.bounds = new Bounds(XdNode);
+    }
+
+    toDart() {
+        const { itemsToDart } = require("../items_to_dart");
+        const { removeItemsFromGroup } = require("../util");
+        const ungroupedItems = removeItemsFromGroup(this.XdNode.children);
+        const itemsDart = itemsToDart(ungroupedItems);
+        //TODO: put SizedBox
+        // SizedBox(
+        return `
+        // ${this.XdNode.name} Group
+        Container(
+            alignment: Alignment.center,
+            width: ${this.XdNode.localBounds.width},
+            height: ${this.XdNode.localBounds.height},
+            color: ${randomColor()},
+            child: ${itemsDart},
+        )`;
+    }
+
+}
+
+exports.GroupWidget = GroupWidget;
diff --git a/src/widgets/image.js b/src/widgets/image.js
@@ -1,4 +1,4 @@
-const { randomColor } = require("./util/util");
+const { randomColor } = require("./util/widgets_util");
 const { Bounds } = require("../bounds");
 
 class ImageWidget {

diff --git a/src/widgets/inkwell.js b/src/widgets/inkwell.js
@@ -1,4 +1,4 @@
-const { randomColor } = require("./util/util");
+const { randomColor } = require("./util/widgets_util");
 const { Bounds } = require("../bounds");
 
 class InkWellWidget {

diff --git a/src/widgets/svg.js b/src/widgets/svg.js
@@ -1,4 +1,4 @@
-const { randomColor } = require("./util/util");
+const { randomColor } = require("./util/widgets_util");
 const { Bounds } = require("../bounds");
 
 class SvgWidget {
@@ -7,14 +7,12 @@ class SvgWidget {
         this.bounds = new Bounds(XdNode);
     }
 
-    toDart(child) {
-        let childWidget = child != null ? `child:${child.toDart()},` : ``;
+    toDart() {
         return `Container(
             alignment: Alignment.center,
             width: ${this.XdNode.localBounds.width},
             height: ${this.XdNode.localBounds.height},
             color: ${randomColor()},
-            ${childWidget}
         )`;
     }
 

diff --git a/src/widgets/text.js b/src/widgets/text.js
@@ -1,4 +1,4 @@
-const { randomColor } = require("./util/util");
+const { randomColor } = require("./util/widgets_util");
 const { Bounds } = require("../bounds");
 
 class TextWidget {
@@ -7,14 +7,12 @@ class TextWidget {
         this.bounds = new Bounds(XdNode);
     }
 
-    toDart(child) {
-        let childWidget = child != null ? `child:${child.toDart()},` : ``;
+    toDart() {
         return `Container(
             alignment: Alignment.center,
             width: ${this.XdNode.localBounds.width},
             height: ${this.XdNode.localBounds.height},
             color: ${randomColor()},
-            ${childWidget}
         )`;
     }
 

diff --git a/src/widgets/util/util.js → src/widgets/util/widgets_util.js b/src/widgets/util/util.js → src/widgets/util/widgets_util.js