Clipping Mask layers to the contents they are clipping

Author: swhitty

Samples/thats-no-moon.svg

@@ -82,20 +82,33 @@ extension LayerTree {
             l.clip = createClipShapes(for: element)
             l.mask = createMaskLayer(for: element)
             l.opacity = state.opacity
-            
+            l.contents = makeAllContents(from: element, with: state)
+
+            // clips the mask to the content
+            l.mask?.clip = l.contents.compactMap { (contents: Layer.Contents) -> LayerTree.Shape? in
+                switch(contents) {
+                case .shape(let s, _, _): return s
+                default: return nil
+                }
+            }
+
+            return l
+        }
+
+        func makeAllContents(from element: DOM.GraphicsElement, with state: State) -> [Layer.Contents] {
+            var all = [Layer.Contents]()
             if let contents = makeContents(from: element, with: state) {
-                l.appendContents(contents)
+                all.append(contents)
             }
             else if let container = element as? ContainerElement {
                 container.childElements.forEach{
                     let contents = Layer.Contents.layer(makeLayer(from: $0, inheriting: state))
-                    l.appendContents(contents)
+                    all.append(contents)
                 }
             }
-
-            return l
+            return all
         }
-        
+
         func makeContents(from element: DOM.GraphicsElement, with state: State) -> Layer.Contents? {
             if let shape = Builder.makeShape(from: element) {
                 return makeShapeContents(from: shape, with: state)

SwiftDraw/LayerTree.AB.Builder.swift

@@ -44,17 +44,14 @@ extension LayerTree {
 
         func renderCommands(for layer: Layer) -> [RendererCommand<P.Types>] {
             guard layer.opacity > 0.0 else { return [] }
-            
+
             let opacityCommands = renderCommands(forOpacity: layer.opacity)
             let transformCommands = renderCommands(forTransforms: layer.transform)
             let clipCommands = renderCommands(forClip: layer.clip)
             let maskCommands = renderCommands(forMask: layer.mask)
-            
-            //TODO: handle layer.mask
-            // render to transparanency layer then composite contents on top.
-            
+
             var commands = [RendererCommand<P.Types>]()
-            
+
             if !opacityCommands.isEmpty ||
                !transformCommands.isEmpty ||
                !clipCommands.isEmpty ||
@@ -218,7 +215,7 @@ extension LayerTree {
         func renderCommands(forClip shapes: [Shape]) -> [RendererCommand<P.Types>] {
             guard !shapes.isEmpty else { return [] }
 
-            let paths = shapes.map{ provider.createPath(from: $0) }
+            let paths = shapes.map { provider.createPath(from: $0) }
             let clipPath = provider.createPath(from: paths)
 
             return [.setClip(path: clipPath)]
@@ -233,6 +230,7 @@ extension LayerTree {
             var commands = [RendererCommand<P.Types>]()
             commands.append(.pushTransparencyLayer)
             commands.append(.setBlend(mode: modeCopy))
+            commands.append(contentsOf: renderCommands(forClip: layer.clip))
 
             let drawMask = layer.contents.flatMap{
                 renderCommands(for: $0, colorConverter: LuminanceColorConverter())

SwiftDraw/LayerTree.CommandGenerator.swift

@@ -40,7 +40,7 @@ extension LayerTree {
             case text(String, Point, TextAttributes)
             case layer(Layer)
         }
-        
+
         func appendContents(_ contents: Contents) {
             switch contents {
             case .layer(let l):