WIP: linear gradient

README.md

@@ -89,15 +89,7 @@
 
   <details><summary>Linear gradient example</summary>
 
-  ```swift
-  let gradientLayer = CAGradientLayer()
-  gradientLayer.frame = view.bounds
-  gradientLayer.startPoint = CGPoint(x: 0.0, y: 0.5)
-  gradientLayer.endPoint = CGPoint(x: 1.0, y: 0.5)
-  gradientLayer.colors = [UIColor.lightishRed.cgColor, UIColor.barbiePink.cgColor]
-  gradientLayer.locations = [0, 1]
-  view.layer.insertSublayer(gradientLayer, at: 0)
-  ```
+ Check out [LinearGradientPlayground](.github/LinearGradientPlayground.zip) and read explanation of the implementation [here](https://github.com/artemnovichkov/zepcode/issues/1#issuecomment-370118449).
 
   </details>
    <details><summary>Radial gradient example</summary>

src/helpers.js

@@ -53,14 +53,10 @@ export function options(context) {
 
 export function linearGradientLayer(gradient, project, extensionOptions) {
   const { colorStops } = gradient;
-  const colorStopsPositionString = colorStops
-    .map((colorStop, index) => `${index}`)
-    .join(', ');
 
   return linearGradientTemplate(
     gradient,
-    colorStopsString(colorStops, project, extensionOptions),
-    colorStopsPositionString
+    colorStopsString(colorStops, project, extensionOptions)
   );
 }
 

src/templates/linear-gradient.js

@@ -1,18 +1,90 @@
-const linearGradientTemplate = (
-  gradient,
-  colorStopsString,
-  colorStopsPositionString
-) => `
-let gradientLayer = CAGradientLayer()
-gradientLayer.frame = view.bounds
-${
-  gradient.angle === 90
-    ? `gradientLayer.startPoint = CGPoint(x: 0.0, y: 0.5)
-gradientLayer.endPoint = CGPoint(x: 1.0, y: 0.5)`
-    : ``
+const linearGradientTemplate = (gradient, colorStopsString) =>
+  `import UIKit
+
+final class LinearGradientLayer: CALayer {
+
+    enum Direction {
+        case vertical
+        case horizontal
+        case custom(start: CGPoint, end: CGPoint)
+
+        var points: (start: CGPoint, end: CGPoint) {
+            switch self {
+            case .vertical:
+                return (CGPoint(x: 0.5, y: 0.0), CGPoint(x: 0.5, y: 1.0))
+            case .horizontal:
+                return (CGPoint(x: 0.0, y: 0.5), CGPoint(x: 1.0, y: 0.5))
+            case let .custom(start, end):
+                return (start, end)
+            }
+        }
+    }
+
+    var direction: Direction = .vertical
+
+    var colorSpace = CGColorSpaceCreateDeviceRGB()
+    var colors: [CGColor]?
+    var locations: [CGFloat]?
+
+    var options: CGGradientDrawingOptions = CGGradientDrawingOptions(rawValue: 0)
+
+    required override init() {
+        super.init()
+        masksToBounds = true
+        needsDisplayOnBoundsChange = true
+    }
+
+    required init?(coder aDecoder: NSCoder) {
+        super.init(coder: aDecoder)
+    }
+
+    required override init(layer: Any) {
+        super.init(layer: layer)
+    }
+
+    override func draw(in ctx: CGContext) {
+        ctx.saveGState()
+
+        guard let colors = colors, let gradient = CGGradient(colorsSpace: colorSpace,
+                                                             colors: colors as CFArray, locations: locations) else { return }
+
+
+        let points = direction.points
+        ctx.drawLinearGradient(
+            gradient,
+            start: transform(points.start),
+            end: transform(points.end),
+            options: options
+        )
+    }
+
+    private func transform(_ point: CGPoint) -> CGPoint {
+        return CGPoint(x: bounds.width * point.x, y: bounds.height * point.y)
+    }
 }
-gradientLayer.colors = [${colorStopsString}]
-gradientLayer.locations = [${colorStopsPositionString}]
-view.layer.insertSublayer(gradientLayer, at: 0)`;
+
+final class GradientView: UIView {
+
+    lazy var gradientLayer: LinearGradientLayer = {
+        let gradientLayer = LinearGradientLayer()
+        gradientLayer.colors = [${colorStopsString}]
+        return gradientLayer
+    }()
+
+    override init(frame: CGRect) {
+        super.init(frame: frame)
+        layer.insertSublayer(gradientLayer, at: 0)
+    }
+
+    required init?(coder aDecoder: NSCoder) {
+        super.init(coder: aDecoder)
+        layer.insertSublayer(gradientLayer, at: 0)
+    }
+
+    override func layoutSubviews() {
+        super.layoutSubviews()
+        gradientLayer.frame = bounds
+    }
+}`;
 
 export default linearGradientTemplate;