Allow centering images with auto-margins

zbarbuto · zbarbuto · commit 3aa9b0a4e779 · 2021-11-08T12:11:43.000+10:30
diff --git a/example/lib/main.dart b/example/lib/main.dart
@@ -58,7 +58,8 @@ const htmlData = r"""
       <p style="text-align: justify;"><span style="color: rgba(0, 0, 0, 0.95);">blasdafjklasdlkjfkl</span></p>
       <p style="text-align: center;"><span style="color: rgba(0, 0, 0, 0.95);">blasdafjklasdlkjfkl</span></p>
       <div style="width: 150px; height: 20px; background-color: red; margin: auto;">Centered Div</div>
-      <div style="width: 150px; height: 20px; background-color: yellow; margin-left: auto;">margin-left: auto div</div>
+      <div style="width: 150px; height: 20px; background-color: yellow; margin-left: auto;">Margin-left auto Div</div>
+      <img style="margin: auto;" src="https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_92x30dp.png">
       <h3>Table support (with custom styling!):</h3>
       <p>
       <q>Famous quote...</q>
diff --git a/lib/html_parser.dart b/lib/html_parser.dart
@@ -456,7 +456,7 @@ class HtmlParser extends StatelessWidget {
         return WidgetSpan(
           alignment: tree.alignment,
           baseline: TextBaseline.alphabetic,
-          child: tree.toWidget(context)!,
+          child: tree.toWidget(newContext)!,
         );
       }
     } else if (tree is InteractableElement) {
@@ -848,7 +848,12 @@ class HtmlParser extends StatelessWidget {
     if (tree.children.isEmpty) {
       // Handle case (4) from above.
       if ((tree.style.height ?? 0) == 0) {
-        tree.style.margin = Margins.all(0);
+        tree.style.margin = tree.style.margin?.copyWith(
+          left: Margin(value: 0, type: tree.style.margin!.left?.type ?? MarginType.VALUE),
+          right: Margin(value: 0, type: tree.style.margin!.right?.type ?? MarginType.VALUE),
+          top: Margin(value: 0, type: tree.style.margin!.top?.type ?? MarginType.VALUE),
+          bottom: Margin(value: 0, type: tree.style.margin!.bottom?.type ?? MarginType.VALUE),
+        ) ?? Margins.all(0);
       }
       return tree;
     }
@@ -1058,9 +1063,9 @@ class ContainerSpan extends StatelessWidget {
           ),
     );
     if(style.margin?.isAutoHorizontal ?? false) {
-      return Row(
-        mainAxisAlignment: style.margin?.alignment ?? MainAxisAlignment.start,
-        children: [Flexible(child: container)],
+      return Align(
+        alignment: style.margin!.alignment,
+        child: container
       );
     }
     return container;
diff --git a/lib/image_render.dart b/lib/image_render.dart
@@ -152,7 +152,7 @@ ImageRender networkImageRender({
             image.image.resolve(ImageConfiguration()).removeListener(listener);
           }
           if (snapshot.hasData) {
-            return Container(
+            var imageWidget = Container(
               constraints: BoxConstraints(
                   maxWidth: width ?? _width(attributes) ?? snapshot.data!.width,
                   maxHeight:
@@ -176,6 +176,13 @@ ImageRender networkImageRender({
                 ),
               ),
             );
+            if (context.style.margin?.isAutoHorizontal ?? false) {
+              return Align(
+                alignment: context.style.margin!.alignment,
+                child: imageWidget,
+              );
+            }
+            return imageWidget;
           } else if (snapshot.hasError) {
             return altWidget?.call(_alt(attributes)) ??
                 Text(_alt(attributes) ?? "",
diff --git a/lib/style.dart b/lib/style.dart
@@ -486,13 +486,13 @@ class Margins {
 
   bool get isAutoHorizontal => (left?.isAuto ?? false) || (right?.isAuto ?? false);
 
-  MainAxisAlignment get alignment {
+  AlignmentGeometry get alignment {
     if((left?.isAuto ?? false) && (right?.isAuto ?? false)) {
-      return MainAxisAlignment.center;
+      return Alignment.center;
     } else if(left?.isAuto ?? false) {
-      return MainAxisAlignment.end;
+      return Alignment.topRight;
     }
-    return MainAxisAlignment.start;
+    return Alignment.topLeft;
   }
 
   /// Analogous to [EdgeInsets.all] 
