Clips Path should preserve transforms

Author: swhitty

Samples.bundle/alert.svg

@@ -82,7 +82,7 @@ extension LayerTree {
             guard state.display != .none else { return l }
 
             l.transform = Builder.createTransforms(from: attributes.transform ?? [])
-            l.clip = createClipShapes(for: element)
+            l.clip = makeClipShapes(for: element)
             l.clipRule = attributes.clipRule
             l.mask = createMaskLayer(for: element)
             l.opacity = state.opacity
@@ -123,11 +123,22 @@ extension LayerTree {
             return nil
         }
 
-        func createClipShapes(for element: DOM.GraphicsElement) -> [Shape] {
+        func makeClipShapes(for element: DOM.GraphicsElement) -> [ClipShape] {
             guard let clipId = element.attributes.clipPath?.fragmentID,
                   let clip = svg.defs.clipPaths.first(where: { $0.id == clipId }) else { return [] }
 
-            return clip.childElements.compactMap{ Builder.makeShape(from: $0) }
+            return clip.childElements.compactMap(makeClipShape)
+        }
+
+        func makeClipShape(for element: DOM.GraphicsElement) -> ClipShape? {
+            guard let shape = Builder.makeShape(from: element) else {
+                return nil
+            }
+
+            let transform = Self.createTransforms(from: element.attributes.transform ?? [])
+                .toMatrix()
+
+            return ClipShape(shape: shape, transform: transform)
         }
 
         func createMaskLayer(for element: DOM.GraphicsElement) -> Layer? {

SwiftDraw/LayerTree.Builder.swift

@@ -311,10 +311,9 @@ extension LayerTree {
             }
         }
 
-        func renderCommands(forClip shapes: [Shape], using rule: FillRule?) -> [RendererCommand<P.Types>] {
+        func renderCommands(forClip shapes: [ClipShape], using rule: FillRule?) -> [RendererCommand<P.Types>] {
             guard !shapes.isEmpty else { return [] }
-
-            let paths = shapes.map { provider.createPath(from: $0) }
+            let paths = shapes.map { provider.createPath(from: .path($0.makePath())) }
             let clipPath = provider.createPath(from: paths)
             let rule = provider.createFillRule(from: rule ?? .nonzero)
             return [.setClip(path: clipPath, rule: rule)]

SwiftDraw/LayerTree.CommandGenerator.swift

@@ -32,7 +32,7 @@ extension LayerTree {
         var contents: [Contents] = []
         var opacity: Float = 1.0
         var transform: [Transform] = []
-        var clip: [Shape] = []
+        var clip: [ClipShape] = []
         var clipRule: FillRule?
         var mask: Layer?
         var filters: [Filter] = []

SwiftDraw/LayerTree.Layer.swift

@@ -38,6 +38,18 @@ extension LayerTree {
         case polygon(between: [Point])
         case path(Path)
     }
+
+    struct ClipShape: Hashable {
+        var shape: Shape
+        var transform: Transform.Matrix?
+
+        func makePath() -> LayerTree.Path {
+            guard let transform else {
+                return shape.path
+            }
+            return shape.path.applying(matrix: transform)
+        }
+    }
 }
 
 extension LayerTree.Shape {

SwiftDraw/LayerTree.Shape.swift

@@ -147,4 +147,9 @@ private extension LayerTree.Builder {
         let builder = LayerTree.Builder(svg: DOM.SVG(width: 10, height: 10))
         return builder.makeStrokeAttributes(with: state)
     }
+
+    func createClipShapes(for element: DOM.GraphicsElement) -> [LayerTree.Shape] {
+        makeClipShapes(for: element).map(\.shape)
+    }
 }
+

SwiftDrawTests/LayerTree.BuilderTests.swift

@@ -70,3 +70,10 @@ final class LayerTreeCommandGeneratorTests: XCTestCase {
         XCTAssertEqual(commands.count, 4)
     }
 }
+
+private extension LayerTree.CommandGenerator {
+
+    func renderCommands(forClip shapes: [LayerTree.Shape], using rule: LayerTree.FillRule?) -> [RendererCommand<P.Types>] {
+        renderCommands(forClip: shapes.map { LayerTree.ClipShape(shape: $0) }, using: rule)
+    }
+}