6/7: Shapes & coordinate rendering improvements

GenerateReferencesCLI/cli.swift

@@ -40,8 +40,11 @@ struct cli: ParsableCommand {
         "coords-transformattr-03-f",
         "coords-transformattr-04-f",
         "coords-transformattr-05-f",
+        "coords-units-01-b",
         "coords-units-02-b",
         "coords-units-03-b",
+        "coords-viewattr-01-b",
+        "coords-viewattr-02-b",
         "masking-opacity-01-b",
         "painting-control-02-f",
         "painting-control-03-f",
@@ -96,17 +99,21 @@ struct cli: ParsableCommand {
         "shapes-ellipse-03-f",
         "shapes-grammar-01-f",
         "shapes-intro-01-t",
+        "shapes-intro-02-f",
         "shapes-line-01-t",
         "shapes-line-02-f",
         "shapes-polygon-01-t",
         "shapes-polygon-02-t",
         "shapes-polygon-03-t",
         "shapes-polyline-01-t",
         "shapes-polyline-02-t",
+        "shapes-rect-01-t",
         "shapes-rect-02-t",
+        "shapes-rect-03-t",
         "shapes-rect-04-f",
         "shapes-rect-05-f",
         "shapes-rect-06-f",
+        "shapes-rect-07-f",
         "struct-cond-01-t",
         "struct-cond-03-t",
         "struct-defs-01-t",
@@ -147,6 +154,7 @@ struct cli: ParsableCommand {
         "shapes-line-01-t",
         "shapes-polygon-01-t",
         "shapes-polyline-01-t",
+        "shapes-rect-01-t",
         "shapes-rect-02-t",
         "struct-defs-01-t",
         "struct-frag-01-t",

Source/Model/Images/SVGDataImage.swift

@@ -19,9 +19,16 @@ public class SVGDataImage: SVGImage {
     @Published public var data: Data
     #endif
 
-    public init(x: CGFloat = 0, y: CGFloat = 0, width: CGFloat = 0, height: CGFloat = 0, data: Data) {
+    public init(
+        x: CGFloat = 0,
+        y: CGFloat = 0,
+        width: CGFloat = 0,
+        height: CGFloat = 0,
+        preserveAspectRatio: SVGPreserveAspectRatio = SVGPreserveAspectRatio(),
+        data: Data
+    ) {
         self.data = data
-        super.init(x: x, y: y, width: width, height: height)
+        super.init(x: x, y: y, width: width, height: height, preserveAspectRatio: preserveAspectRatio)
     }
 
     override func serialize(_ serializer: Serializer) {
@@ -39,28 +46,39 @@ public class SVGDataImage: SVGImage {
 #if canImport(SwiftUI)
 extension SVGDataImage: ObservableObject {}
 struct SVGDataImageView: View {
+    @ObservedObject var model: SVGDataImage
 
 #if os(OSX)
-    @ViewBuilder
-    private var image: Image? {
-        if let nsImage = NSImage(data: model.data) {
-            Image(nsImage: nsImage)
+    private var decoded: (image: Image, size: CGSize)? {
+        guard let nsImage = NSImage(data: model.data) else {
+            return nil
         }
+        return (Image(nsImage: nsImage), nsImage.size)
     }
 #else
-    @ViewBuilder
-    private var image: Image? {
-        if let uiImage = UIImage(data: model.data) {
-            Image(uiImage: uiImage)
+    private var decoded: (image: Image, size: CGSize)? {
+        guard let uiImage = UIImage(data: model.data) else {
+            return nil
         }
+        return (Image(uiImage: uiImage), uiImage.size)
     }
 #endif
 
-    @ObservedObject var model: SVGDataImage
+    private var viewportSize: CGSize {
+        CGSize(width: model.width, height: model.height)
+    }
 
     public var body: some View {
-        image
-            .frame(width: model.width, height: model.height)
+        ZStack(alignment: .topLeading) {
+            if let decoded {
+                decoded.image
+                    .resizable()
+                    .frame(width: decoded.size.width, height: decoded.size.height, alignment: .topLeading)
+                    .transformEffect(model.preserveAspectRatio.layout(size: decoded.size, into: viewportSize))
+            }
+        }
+            .frame(width: model.width, height: model.height, alignment: .topLeading)
+            .clipped()
             .position(x: model.x, y: model.y)
             .offset(x: model.width/2, y: model.height/2)
             .applyNodeAttributes(model: model)

Source/Model/Images/SVGURLImage.swift

@@ -16,10 +16,18 @@ public class SVGURLImage: SVGImage {
     public let src: String
     public let data: Data?
 
-    public init(x: CGFloat = 0, y: CGFloat = 0, width: CGFloat = 0, height: CGFloat = 0, src: String, data: Data?) {
+    public init(
+        x: CGFloat = 0,
+        y: CGFloat = 0,
+        width: CGFloat = 0,
+        height: CGFloat = 0,
+        preserveAspectRatio: SVGPreserveAspectRatio = SVGPreserveAspectRatio(),
+        src: String,
+        data: Data?
+    ) {
         self.src = src
         self.data = data
-        super.init(x: x, y: y, width: width, height: height)
+        super.init(x: x, y: y, width: width, height: height, preserveAspectRatio: preserveAspectRatio)
     }
 
     override func serialize(_ serializer: Serializer) {
@@ -40,25 +48,37 @@ struct SVGUrlImageView: View {
 
     @ObservedObject var model: SVGURLImage
 
+    private var viewportSize: CGSize {
+        CGSize(width: model.width, height: model.height)
+    }
+
 #if os(OSX)
-    @ViewBuilder
-    private var image: Image? {
-        if let data = model.data, let nsImage = NSImage(data: data) {
-            Image(nsImage: nsImage)
+    private var decoded: (image: Image, size: CGSize)? {
+        guard let data = model.data, let nsImage = NSImage(data: data) else {
+            return nil
         }
+        return (Image(nsImage: nsImage), nsImage.size)
     }
 #else
-    @ViewBuilder
-    private var image: Image? {
-        if let data = model.data, let uiImage = UIImage(data: data) {
-            Image(uiImage: uiImage)
+    private var decoded: (image: Image, size: CGSize)? {
+        guard let data = model.data, let uiImage = UIImage(data: data) else {
+            return nil
         }
+        return (Image(uiImage: uiImage), uiImage.size)
     }
 #endif
 
     public var body: some View {
-        image
-            .frame(width: model.width, height: model.height)
+        ZStack(alignment: .topLeading) {
+            if let decoded {
+                decoded.image
+                    .resizable()
+                    .frame(width: decoded.size.width, height: decoded.size.height, alignment: .topLeading)
+                    .transformEffect(model.preserveAspectRatio.layout(size: decoded.size, into: viewportSize))
+            }
+        }
+            .frame(width: model.width, height: model.height, alignment: .topLeading)
+            .clipped()
             .position(x: model.x, y: model.y)
             .offset(x: model.width/2, y: model.height/2)
             .applyNodeAttributes(model: model)

Source/Model/Nodes/SVGGroup.swift

@@ -71,7 +71,7 @@ struct SVGGroupView: View {
     @ObservedObject var model: SVGGroup
 
     public var body: some View {
-        ZStack {
+        ZStack(alignment: .topLeading) {
             ForEach(0..<model.contents.count, id: \.self) { i in
                 if i <= model.contents.count - 1 {
                     model.contents[i].toSwiftUI()

Source/Model/Nodes/SVGImage.swift

@@ -19,22 +19,38 @@ public class SVGImage: SVGNode {
     public var y: CGFloat
     public var width: CGFloat
     public var height: CGFloat
+    public var preserveAspectRatio: SVGPreserveAspectRatio
 #else
     @Published public var x: CGFloat
     @Published public var y: CGFloat
     @Published public var width: CGFloat
     @Published public var height: CGFloat
+    @Published public var preserveAspectRatio: SVGPreserveAspectRatio
 #endif
 
-    public init(x: CGFloat = 0, y: CGFloat = 0, width: CGFloat = 0, height: CGFloat = 0) {
+    public init(
+        x: CGFloat = 0,
+        y: CGFloat = 0,
+        width: CGFloat = 0,
+        height: CGFloat = 0,
+        preserveAspectRatio: SVGPreserveAspectRatio = SVGPreserveAspectRatio()
+    ) {
         self.x = x
         self.y = y
         self.width = width
         self.height = height
+        self.preserveAspectRatio = preserveAspectRatio
     }
 
     override func serialize(_ serializer: Serializer) {
-        serializer.add("x", x, 0).add("y", y, 0).add("width", width, 0).add("height", height, 0)
+        serializer
+            .add("x", x, 0)
+            .add("y", y, 0)
+            .add("width", width, 0)
+            .add("height", height, 0)
+            .add("scaling", preserveAspectRatio.scaling)
+            .add("xAlign", preserveAspectRatio.xAlign)
+            .add("yAlign", preserveAspectRatio.yAlign)
         super.serialize(serializer)
     }
 }

Source/Model/Nodes/SVGViewport.swift

@@ -79,7 +79,9 @@ struct SVGViewportView: View {
             SVGGroupView(model: model)
                 .transformEffect(getTransform(viewBox: viewBox, size: size))
         }
-        .frame(idealWidth: model.width.ideal, idealHeight: model.height.ideal)
+        // Use fixed frame for absolute viewport lengths so nested <svg> elements
+        // don't expand to the full proposed size from parent stacks.
+        .frame(width: model.width.ideal, height: model.height.ideal, alignment: .topLeading)
         .clipped()
     }