Merge pull request #149 from liveviewnative/carsonk/shape-support

Support Circle, Ellipse, Capsule, and ContainerRelativeShape

Author: carson-katri

Sources/LiveViewNative/BuiltinRegistry.swift

@@ -44,6 +44,14 @@ struct BuiltinRegistry {
             Shape(element: element, context: context, shape: Rectangle())
         case "roundedrectangle":
             Shape(element: element, context: context, shape: RoundedRectangle(from: element))
+        case "circle":
+            Shape(element: element, context: context, shape: Circle())
+        case "ellipse":
+            Shape(element: element, context: context, shape: Ellipse())
+        case "capsule":
+            Shape(element: element, context: context, shape: Capsule(from: element))
+        case "containerrelativeshape":
+            Shape(element: element, context: context, shape: ContainerRelativeShape())
         case "lvn-link":
             Link(element: element, context: context)
         case "divider":

Sources/LiveViewNative/Views/Shapes/Shape.swift

@@ -28,12 +28,33 @@ struct Shape<S: SwiftUI.Shape>: View {
 
 extension RoundedRectangle {
     init(from element: ElementNode) {
-        let radius: Double
-        if let s = element.attributeValue(for: "corner-radius"), let d = Double(s) {
-            radius = d
-        } else {
-            radius = 5
+        let radius = element.attributeValue(for: "corner-radius").flatMap(Double.init) ?? 0
+        self.init(
+            cornerSize: .init(
+                width: element.attributeValue(for: "corner-width").flatMap(Double.init) ?? radius,
+                height: element.attributeValue(for: "corner-height").flatMap(Double.init) ?? radius
+            ),
+            style: (element.attributeValue(for: "style").flatMap(RoundedCornerStyle.init) ?? .circular).style
+        )
+    }
+}
+
+extension Capsule {
+    init(from element: ElementNode) {
+        self.init(
+            style: (element.attributeValue(for: "style").flatMap(RoundedCornerStyle.init) ?? .circular).style
+        )
+    }
+}
+
+private enum RoundedCornerStyle: String {
+    case circular
+    case continuous
+    
+    var style: SwiftUI.RoundedCornerStyle {
+        switch self {
+        case .circular: return .circular
+        case .continuous: return .continuous
         }
-        self.init(cornerRadius: radius)
     }
 }

Tests/RenderingTests/ShapeTests.swift

@@ -0,0 +1,67 @@
+//
+//  ShapeTests.swift
+//  
+//
+//  Created by Carson Katri on 1/18/23.
+//
+
+import XCTest
+import SwiftUI
+@testable import LiveViewNative
+
+@MainActor
+final class ShapeTests: XCTestCase {
+    func testRectangle() throws {
+        try assertMatch(#"<rectangle />"#) {
+            Rectangle()
+        }
+    }
+    
+    func testRoundedRectangle() throws {
+        try assertMatch(#"<roundedrectangle corner-radius="5" />"#, size: .init(width: 100, height: 50)) {
+            RoundedRectangle(cornerRadius: 5)
+        }
+        try assertMatch(#"<roundedrectangle corner-width="5" corner-height="10" />"#, size: .init(width: 100, height: 50)) {
+            RoundedRectangle(cornerSize: .init(width: 5, height: 10))
+        }
+        try assertMatch(#"<roundedrectangle corner-width="5" corner-radius="15" />"#, size: .init(width: 100, height: 50)) {
+            RoundedRectangle(cornerSize: .init(width: 5, height: 15))
+        }
+        try assertMatch(#"<roundedrectangle corner-height="5" corner-radius="15" />"#, size: .init(width: 100, height: 50)) {
+            RoundedRectangle(cornerSize: .init(width: 15, height: 5))
+        }
+        try assertMatch(#"<roundedrectangle corner-radius="10" style="continuous" />"#, size: .init(width: 100, height: 50)) {
+            RoundedRectangle(cornerRadius: 10, style: .continuous)
+        }
+    }
+    
+    func testCircle() throws {
+        try assertMatch(#"<circle />"#) {
+            Circle()
+        }
+    }
+    
+    func testEllipse() throws {
+        try assertMatch(#"<ellipse />"#, size: .init(width: 100, height: 50)) {
+            Ellipse()
+        }
+    }
+    
+    func testCapsule() throws {
+        try assertMatch(#"<capsule />"#, size: .init(width: 100, height: 50)) {
+            Capsule()
+        }
+        try assertMatch(#"<capsule />"#, size: .init(width: 50, height: 100)) {
+            Capsule()
+        }
+        try assertMatch(#"<capsule style="continuous" />"#, size: .init(width: 100, height: 50)) {
+            Capsule(style: .continuous)
+        }
+    }
+    
+    func testContainerRelativeShape() throws {
+        try assertMatch(#"<containerrelativeshape />"#) {
+            ContainerRelativeShape()
+        }
+    }
+}

Tests/RenderingTests/assertMatch.swift

@@ -17,27 +17,29 @@ func assertMatch(
     _ file: String = #file,
     _ line: Int = #line,
     _ function: StaticString = #function,
-    @ViewBuilder _ view: () -> some View,
-    environment: @escaping (inout EnvironmentValues) -> () = { _ in }
+    environment: @escaping (inout EnvironmentValues) -> () = { _ in },
+    size: CGSize? = nil,
+    @ViewBuilder _ view: () -> some View
 ) throws {
-    try assertMatch(name: "\(URL(filePath: file).lastPathComponent)-\(line)-\(function)", markup, view, environment: environment)
+    try assertMatch(name: "\(URL(filePath: file).lastPathComponent)-\(line)-\(function)", markup, environment: environment, size: size, view)
 }
 
 @MainActor
 func assertMatch(
     name: String,
     _ markup: String,
-    @ViewBuilder _ view: () -> some View,
-    environment: @escaping (inout EnvironmentValues) -> () = { _ in }
+    environment: @escaping (inout EnvironmentValues) -> () = { _ in },
+    size: CGSize? = nil,
+    @ViewBuilder _ view: () -> some View
 ) throws {
     let session = LiveSessionCoordinator(URL(string: "http://localhost")!)
     let document = try LiveViewNativeCore.Document.parse(markup)
     let viewTree = session.rootCoordinator.builder.fromNodes(
         document[document.root()].children(),
         context: LiveContext(coordinator: session.rootCoordinator, url: session.url)
     ).environment(\.coordinatorEnvironment, CoordinatorEnvironment(session.rootCoordinator, document: document))
-    let markupImage = ImageRenderer(content: viewTree.transformEnvironment(\.self, transform: environment)).uiImage?.pngData()
-    let viewImage = ImageRenderer(content: view().transformEnvironment(\.self, transform: environment)).uiImage?.pngData()
+    let markupImage = ImageRenderer(content: viewTree.transformEnvironment(\.self, transform: environment).frame(width: size?.width, height: size?.height)).uiImage?.pngData()
+    let viewImage = ImageRenderer(content: view().transformEnvironment(\.self, transform: environment).frame(width: size?.width, height: size?.height)).uiImage?.pngData()
 
     if markupImage == viewImage {
         XCTAssert(true)