Make TableListLayout respect padding by default

Previously while you could set padding on the `TableListLayout`, that
padding would be equally distributed to the left and right rather than
respecting any difference between the two. Even if a custom width was
set on the section or items, if the center alignment was used the
resulting attributes would be globally centered versus centered in the
available width between the padding.

This change resolves the issue on two fronts. First, the
`CustomWidth.Alignment.center` now center aligns between the provided
padding. Second, because the `CustomWidth.default` will center align
completely ignoring padding, this change introduces a root `CustomWidth`
during the layout which all other components merge against to calculate
their origin. This allows the correct center alignment with respect to
padding to cascade down throughout the attributes until a component
overrides the width with something else.

ListableUI/Sources/Layout/Table/TableListLayout.swift

@@ -459,11 +459,13 @@ final class TableListLayout : ListLayout
         let viewSize = context.viewBounds.size
         let viewWidth = context.viewBounds.width
 
-        let rootWidth = TableAppearance.Layout.width(
-            with: viewSize.width,
+        let rootWidth = CustomWidth.custom(CustomWidth.Custom(
             padding: HorizontalPadding(left: layout.padding.left, right: layout.padding.right),
-            constraint: layout.width
-        )
+            width: layout.width,
+            alignment: .center
+        ))
+
+        let defaultWidth = rootWidth.position(with: viewSize, defaultWidth: viewSize.width).width
 
         //
         // Item Positioning
@@ -497,8 +499,8 @@ final class TableListLayout : ListLayout
 
         performLayout(for: self.content.header) { header in
             let hasListHeader = self.content.header.isPopulated
-
-            let position = header.layouts.table.width.position(with: viewSize, defaultWidth: rootWidth)
+            let headerWith = header.layouts.table.width.merge(with: rootWidth)
+            let position = headerWith.position(with: viewSize, defaultWidth: defaultWidth)
 
             let measureInfo = Sizing.MeasureInfo(
                 sizeConstraint: CGSize(width: position.width, height: .greatestFiniteMagnitude),
@@ -526,8 +528,8 @@ final class TableListLayout : ListLayout
         //
 
         self.content.sections.forEachWithIndex { sectionIndex, isLast, section in
-
-            let sectionPosition = section.layouts.table.width.position(with: viewSize, defaultWidth: rootWidth)
+            let sectionWidth = section.layouts.table.width.merge(with: rootWidth)
+            let sectionPosition = sectionWidth.position(with: viewSize, defaultWidth: defaultWidth)
 
             //
             // Section Header
@@ -537,7 +539,7 @@ final class TableListLayout : ListLayout
             let hasSectionFooter = section.footer.isPopulated
 
             performLayout(for: section.header) { header in
-                let width = header.layouts.table.width.merge(with: section.layouts.table.width)
+                let width = header.layouts.table.width.merge(with: sectionWidth)
                 let position = width.position(with: viewSize, defaultWidth: sectionPosition.width)
 
                 let measureInfo = Sizing.MeasureInfo(
@@ -690,8 +692,8 @@ final class TableListLayout : ListLayout
 
         performLayout(for: self.content.footer) { footer in
             let hasFooter = footer.isPopulated
-
-            let position = footer.layouts.table.width.position(with: viewSize, defaultWidth: rootWidth)
+            let footerWidth = footer.layouts.table.width.merge(with: rootWidth)
+            let position = footerWidth.position(with: viewSize, defaultWidth: defaultWidth)
 
             let measureInfo = Sizing.MeasureInfo(
                 sizeConstraint: CGSize(width: position.width, height: .greatestFiniteMagnitude),
@@ -720,7 +722,8 @@ final class TableListLayout : ListLayout
         //
 
         performLayout(for: self.content.overscrollFooter) { footer in
-            let position = footer.layouts.table.width.position(with: viewSize, defaultWidth: rootWidth)
+            let footerWidth = footer.layouts.table.width.merge(with: rootWidth)
+            let position = footerWidth.position(with: viewSize, defaultWidth: defaultWidth)
 
             let measureInfo = Sizing.MeasureInfo(
                 sizeConstraint: CGSize(width: position.width, height: .greatestFiniteMagnitude),

ListableUI/Sources/Sizing.swift

@@ -321,7 +321,8 @@ public enum CustomWidth : Equatable
             case .left:
                 return padding.left
             case .center:
-                return round((parentWidth - width) / 2.0)
+                let availableWidth = parentWidth - (padding.left + padding.right)
+                return round((availableWidth - width) / 2.0) + padding.left
             case .right:
                 return parentWidth - width - padding.right
             }

ListableUI/Tests/Layout/Table/Snapshot Results/TableListLayoutTests.swift/All/test_layout_vertical()/ListAttributes/200.0 x 700.0.txt

@@ -2,39 +2,39 @@
   ▿ contentSize: (200.0, 700.0)
     - width: 200.0
     - height: 700.0
-  ▿ header: Optional(ListableUI.ListLayoutAttributes.Supplementary(frame: (30.0, 10.0, 140.0, 50.0)))
+  ▿ header: Optional(ListableUI.ListLayoutAttributes.Supplementary(frame: (20.0, 10.0, 140.0, 50.0)))
     ▿ some: ListableUI.ListLayoutAttributes.Supplementary
-      ▿ frame: (30.0, 10.0, 140.0, 50.0)
-        ▿ origin: (30.0, 10.0)
-          - x: 30.0
+      ▿ frame: (20.0, 10.0, 140.0, 50.0)
+        ▿ origin: (20.0, 10.0)
+          - x: 20.0
           - y: 10.0
         ▿ size: (140.0, 50.0)
           - width: 140.0
           - height: 50.0
-  ▿ footer: Optional(ListableUI.ListLayoutAttributes.Supplementary(frame: (30.0, 600.0, 140.0, 70.0)))
+  ▿ footer: Optional(ListableUI.ListLayoutAttributes.Supplementary(frame: (20.0, 600.0, 140.0, 70.0)))
     ▿ some: ListableUI.ListLayoutAttributes.Supplementary
-      ▿ frame: (30.0, 600.0, 140.0, 70.0)
-        ▿ origin: (30.0, 600.0)
-          - x: 30.0
+      ▿ frame: (20.0, 600.0, 140.0, 70.0)
+        ▿ origin: (20.0, 600.0)
+          - x: 20.0
           - y: 600.0
         ▿ size: (140.0, 70.0)
           - width: 140.0
           - height: 70.0
   - overscrollFooter: nil
   ▿ sections: 4 elements
     ▿ ListableUI.ListLayoutAttributes.Section
-      ▿ frame: (30.0, 80.0, 140.0, 160.0)
-        ▿ origin: (30.0, 80.0)
-          - x: 30.0
+      ▿ frame: (20.0, 80.0, 150.0, 160.0)
+        ▿ origin: (20.0, 80.0)
+          - x: 20.0
           - y: 80.0
-        ▿ size: (140.0, 160.0)
-          - width: 140.0
+        ▿ size: (150.0, 160.0)
+          - width: 150.0
           - height: 160.0
-      ▿ header: Optional(ListableUI.ListLayoutAttributes.Supplementary(frame: (30.0, 80.0, 140.0, 30.0)))
+      ▿ header: Optional(ListableUI.ListLayoutAttributes.Supplementary(frame: (20.0, 80.0, 140.0, 30.0)))
         ▿ some: ListableUI.ListLayoutAttributes.Supplementary
-          ▿ frame: (30.0, 80.0, 140.0, 30.0)
-            ▿ origin: (30.0, 80.0)
-              - x: 30.0
+          ▿ frame: (20.0, 80.0, 140.0, 30.0)
+            ▿ origin: (20.0, 80.0)
+              - x: 20.0
               - y: 80.0
             ▿ size: (140.0, 30.0)
               - width: 140.0
@@ -74,18 +74,18 @@
               - width: 140.0
               - height: 20.0
     ▿ ListableUI.ListLayoutAttributes.Section
-      ▿ frame: (30.0, 270.0, 140.0, 165.0)
-        ▿ origin: (30.0, 270.0)
-          - x: 30.0
+      ▿ frame: (20.0, 270.0, 150.0, 165.0)
+        ▿ origin: (20.0, 270.0)
+          - x: 20.0
           - y: 270.0
-        ▿ size: (140.0, 165.0)
-          - width: 140.0
+        ▿ size: (150.0, 165.0)
+          - width: 150.0
           - height: 165.0
-      ▿ header: Optional(ListableUI.ListLayoutAttributes.Supplementary(frame: (30.0, 270.0, 140.0, 30.0)))
+      ▿ header: Optional(ListableUI.ListLayoutAttributes.Supplementary(frame: (20.0, 270.0, 140.0, 30.0)))
         ▿ some: ListableUI.ListLayoutAttributes.Supplementary
-          ▿ frame: (30.0, 270.0, 140.0, 30.0)
-            ▿ origin: (30.0, 270.0)
-              - x: 30.0
+          ▿ frame: (20.0, 270.0, 140.0, 30.0)
+            ▿ origin: (20.0, 270.0)
+              - x: 20.0
               - y: 270.0
             ▿ size: (140.0, 30.0)
               - width: 140.0
@@ -117,18 +117,18 @@
               - width: 140.0
               - height: 40.0
     ▿ ListableUI.ListLayoutAttributes.Section
-      ▿ frame: (30.0, 455.0, 140.0, 75.0)
-        ▿ origin: (30.0, 455.0)
-          - x: 30.0
+      ▿ frame: (20.0, 455.0, 150.0, 75.0)
+        ▿ origin: (20.0, 455.0)
+          - x: 20.0
           - y: 455.0
-        ▿ size: (140.0, 75.0)
-          - width: 140.0
+        ▿ size: (150.0, 75.0)
+          - width: 150.0
           - height: 75.0
-      ▿ header: Optional(ListableUI.ListLayoutAttributes.Supplementary(frame: (30.0, 455.0, 140.0, 30.0)))
+      ▿ header: Optional(ListableUI.ListLayoutAttributes.Supplementary(frame: (20.0, 455.0, 140.0, 30.0)))
         ▿ some: ListableUI.ListLayoutAttributes.Supplementary
-          ▿ frame: (30.0, 455.0, 140.0, 30.0)
-            ▿ origin: (30.0, 455.0)
-              - x: 30.0
+          ▿ frame: (20.0, 455.0, 140.0, 30.0)
+            ▿ origin: (20.0, 455.0)
+              - x: 20.0
               - y: 455.0
             ▿ size: (140.0, 30.0)
               - width: 140.0

ListableUI/Tests/SizingTests.swift

@@ -6,8 +6,43 @@
 //
 
 import XCTest
+@testable import ListableUI
 
 class SizingTests: XCTestCase
 {
+    //  MARK: - CustomWidth Tests
 
+    func test_customWidth_alignment_originWith() {
+        // Given
+        let parentWidth: CGFloat = 100
+        let width: CGFloat = 80
+        let padding = HorizontalPadding(left: 7, right: 3)
+
+        // When: Left
+        do {
+            let alignment = CustomWidth.Alignment.left
+            let origin = alignment.originWith(parentWidth: parentWidth, width: width, padding: padding)
+
+            // Should align left edge with left padding
+            XCTAssertEqual(origin, 7)
+        }
+
+        // When: Center
+        do {
+            let alignment = CustomWidth.Alignment.center
+            let origin = alignment.originWith(parentWidth: parentWidth, width: width, padding: padding)
+
+            // Should center within width minus padding then offset by left padding
+            XCTAssertEqual(origin, 12)
+        }
+
+        // When: Right
+        do {
+            let alignment = CustomWidth.Alignment.right
+            let origin = alignment.originWith(parentWidth: parentWidth, width: width, padding: padding)
+
+            // Should align right edge with right edge of width minus right padding
+            XCTAssertEqual(origin, 17)
+        }
+    }
 }