Add horizontal adjust slider

Sources/General/ZLAdjustSlider.swift

@@ -31,15 +31,49 @@ class ZLAdjustSlider: UIView {
 
     let sliderWidth: CGFloat = 5
 
-    lazy var valueLabel = UILabel()
-
-    lazy var separator = UIView()
-
-    lazy var shadowView = UIView()
-
-    lazy var whiteView = UIView()
-
-    lazy var tintView = UIView()
+    lazy var valueLabel: UILabel = {
+        let label = UILabel()
+        label.font = UIFont.systemFont(ofSize: 12)
+        label.layer.shadowColor = UIColor.black.withAlphaComponent(0.6).cgColor
+        label.layer.shadowOffset = .zero
+        label.layer.shadowOpacity = 1
+        label.textColor = .white
+        label.textAlignment = ZLImageEditorUIConfiguration.default().adjustSliderType == .vertical ? .right : .center
+        label.adjustsFontSizeToFitWidth = true
+        label.minimumScaleFactor = 0.6
+        return label
+    }()
+
+    lazy var separator: UIView = {
+        let view = UIView()
+        view.backgroundColor = zlRGB(230, 230, 230)
+        return view
+    }()
+
+    lazy var shadowView: UIView = {
+        let view = UIView()
+        view.backgroundColor = .zl.adjustSliderNormalColor
+        view.layer.cornerRadius = sliderWidth / 2
+        view.layer.shadowColor = UIColor.black.withAlphaComponent(0.4).cgColor
+        view.layer.shadowOffset = .zero
+        view.layer.shadowOpacity = 1
+        view.layer.shadowRadius = 3
+        return view
+    }()
+
+    lazy var whiteView: UIView = {
+        let view = UIView()
+        view.backgroundColor = .zl.adjustSliderNormalColor
+        view.layer.cornerRadius = sliderWidth / 2
+        view.layer.masksToBounds = true
+        return view
+    }()
+
+    lazy var tintView: UIView = {
+        let view = UIView()
+        view.backgroundColor = .zl.adjustSliderTintColor
+        return view
+    }()
 
     lazy var pan = UIPanGestureRecognizer(target: self, action: #selector(panAction(_:)))
 
@@ -52,6 +86,8 @@ class ZLAdjustSlider: UIView {
 
     private var valueForPanBegan: Float = 0
 
+    private var isVertical = ZLImageEditorUIConfiguration.default().adjustSliderType == .vertical
+
     var beginAdjust: (() -> Void)?
 
     var valueChanged: ((Float) -> Void)?
@@ -77,52 +113,48 @@ class ZLAdjustSlider: UIView {
     override func layoutSubviews() {
         super.layoutSubviews()
 
-        shadowView.frame = CGRect(x: 40, y: 0, width: sliderWidth, height: bounds.height)
-        whiteView.frame = CGRect(x: 40, y: 0, width: sliderWidth, height: bounds.height)
-        tintView.frame = calculateTintFrame()
-        let separatorH: CGFloat = 1
-        separator.frame = CGRect(x: 0, y: (bounds.height - separatorH) / 2, width: sliderWidth, height: separatorH)
-        valueLabel.frame = CGRect(x: 0, y: bounds.height / 2 - 10, width: 38, height: 20)
+        if isVertical {
+            shadowView.frame = CGRect(x: 40, y: 0, width: sliderWidth, height: bounds.height)
+            whiteView.frame = shadowView.frame
+            tintView.frame = calculateTintFrame()
+            let separatorH: CGFloat = 1
+            separator.frame = CGRect(x: 0, y: (bounds.height - separatorH) / 2, width: sliderWidth, height: separatorH)
+            valueLabel.frame = CGRect(x: 0, y: bounds.height / 2 - 10, width: 38, height: 20)
+        } else {
+            valueLabel.frame = CGRect(x: 0, y: 0, width: zl.width, height: 38)
+            shadowView.frame = CGRect(x: 0, y: valueLabel.zl.bottom + 2, width: zl.width, height: sliderWidth)
+            whiteView.frame = shadowView.frame
+            tintView.frame = calculateTintFrame()
+            let separatorW: CGFloat = 1
+            separator.frame = CGRect(x: (zl.width - separatorW) / 2, y: 0, width: separatorW, height: sliderWidth)
+        }
     }
 
     private func setupUI() {
-        shadowView.backgroundColor = .zl.adjustSliderNormalColor
-        shadowView.layer.cornerRadius = sliderWidth / 2
-        shadowView.layer.shadowColor = UIColor.black.withAlphaComponent(0.4).cgColor
-        shadowView.layer.shadowOffset = .zero
-        shadowView.layer.shadowOpacity = 1
-        shadowView.layer.shadowRadius = 3
         addSubview(shadowView)
-
-        whiteView.backgroundColor = .zl.adjustSliderNormalColor
-        whiteView.layer.cornerRadius = sliderWidth / 2
-        whiteView.layer.masksToBounds = true
         addSubview(whiteView)
-
-        tintView.backgroundColor = .zl.adjustSliderTintColor
         whiteView.addSubview(tintView)
-
-        separator.backgroundColor = zlRGB(230, 230, 230)
         whiteView.addSubview(separator)
-
-        valueLabel.font = UIFont.systemFont(ofSize: 12)
-        valueLabel.layer.shadowColor = UIColor.black.withAlphaComponent(0.6).cgColor
-        valueLabel.layer.shadowOffset = .zero
-        valueLabel.layer.shadowOpacity = 1
-        valueLabel.textColor = .white
-        valueLabel.textAlignment = .right
-        valueLabel.adjustsFontSizeToFitWidth = true
-        valueLabel.minimumScaleFactor = 0.6
         addSubview(valueLabel)
     }
 
     private func calculateTintFrame() -> CGRect {
-        let totalH = bounds.height / 2
-        let tintH = totalH * abs(CGFloat(value)) / CGFloat(ZLAdjustSlider.maximumValue)
-        if value > 0 {
-            return CGRect(x: 0, y: totalH - tintH, width: sliderWidth, height: tintH)
+        if isVertical {
+            let totalH = zl.height / 2
+            let tintH = totalH * abs(CGFloat(value)) / CGFloat(ZLAdjustSlider.maximumValue)
+            if value > 0 {
+                return CGRect(x: 0, y: totalH - tintH, width: sliderWidth, height: tintH)
+            } else {
+                return CGRect(x: 0, y: totalH, width: sliderWidth, height: tintH)
+            }
         } else {
-            return CGRect(x: 0, y: totalH, width: sliderWidth, height: tintH)
+            let totalW = zl.width / 2
+            let tintW = totalW * abs(CGFloat(value)) / CGFloat(ZLAdjustSlider.maximumValue)
+            if value > 0 {
+                return CGRect(x: totalW, y: 0, width: tintW, height: sliderWidth)
+            } else {
+                return CGRect(x: totalW - tintW, y: 0, width: tintW, height: sliderWidth)
+            }
         }
     }
 
@@ -133,8 +165,9 @@ class ZLAdjustSlider: UIView {
             valueForPanBegan = value
             beginAdjust?()
         } else if pan.state == .changed {
-            let y = -translation.y / 100
-            var temp = valueForPanBegan + Float(y)
+            let transValue = isVertical ? -translation.y : translation.x
+            let totalLength = isVertical ? zl.height / 2 : zl.width / 2
+            var temp = valueForPanBegan + Float(transValue / totalLength)
             temp = max(ZLAdjustSlider.minimumValue, min(ZLAdjustSlider.maximumValue, temp))
 
             if (-0.0049..<0.005) ~= temp {
@@ -152,7 +185,6 @@ class ZLAdjustSlider: UIView {
                 let style = ZLImageEditorConfiguration.default().impactFeedbackStyle.uiFeedback
                 UIImpactFeedbackGenerator(style: style).impactOccurred()
             }
-
         } else {
             valueForPanBegan = value
             endAdjust?()

Sources/General/ZLEditImageViewController.swift

@@ -302,6 +302,8 @@ open class ZLEditImageViewController: UIViewController {
 
     let canRedo = ZLImageEditorConfiguration.default().canRedo
 
+    var hasAdjustedImage = false
+
     @objc public var editFinishBlock: ((UIImage, ZLEditImageModel?) -> Void)?
 
     override open var prefersStatusBarHidden: Bool {
@@ -413,6 +415,7 @@ open class ZLEditImageViewController: UIViewController {
         guard shouldLayout else {
             return
         }
+
         shouldLayout = false
         zl_debugPrint("edit image layout subviews")
         var insets = UIEdgeInsets.zero
@@ -439,7 +442,18 @@ open class ZLEditImageViewController: UIViewController {
         drawColorCollectionView?.frame = CGRect(x: 20, y: 20, width: revokeBtn.zl.left - 20 - 10, height: drawColViewH)
 
         adjustCollectionView?.frame = CGRect(x: 20, y: 10, width: view.zl.width - 40, height: adjustColViewH)
-        adjustSlider?.frame = CGRect(x: view.zl.width - 60, y: view.zl.height / 2 - 100, width: 60, height: 200)
+        if ZLImageEditorUIConfiguration.default().adjustSliderType == .vertical {
+            adjustSlider?.frame = CGRect(x: view.zl.width - 60, y: view.zl.height / 2 - 100, width: 60, height: 200)
+        } else {
+            let sliderHeight: CGFloat = 60
+            let sliderWidth = UIDevice.current.userInterfaceIdiom == .phone ? view.zl.width - 100 : view.zl.width / 2
+            adjustSlider?.frame = CGRect(
+                x: (view.zl.width - sliderWidth) / 2,
+                y: bottomShadowView.zl.top - sliderHeight,
+                width: sliderWidth,
+                height: sliderHeight
+            )
+        }
 
         filterCollectionView?.frame = CGRect(x: 20, y: 0, width: view.zl.width - 40, height: filterColViewH)
 
@@ -645,7 +659,7 @@ open class ZLEditImageViewController: UIViewController {
                 self?.adjustValueChanged(value)
             }
             adjustSlider?.endAdjust = { [weak self] in
-                self?.endAdjust()
+                self?.hasAdjustedImage = true
             }
             adjustSlider?.isHidden = true
             view.addSubview(adjustSlider!)
@@ -831,6 +845,8 @@ open class ZLEditImageViewController: UIViewController {
             selectedTool = nil
         }
 
+        endAdjust()
+
         drawColorCollectionView?.isHidden = true
         filterCollectionView?.isHidden = true
         adjustCollectionView?.isHidden = true
@@ -1100,12 +1116,15 @@ open class ZLEditImageViewController: UIViewController {
     }
 
     func endAdjust() {
-        if tools.contains(.mosaic) {
-            generateNewMosaicImageLayer()
-
-            if !mosaicPaths.isEmpty {
-                generateNewMosaicImage()
-            }
+        defer {
+            hasAdjustedImage = false
+        }
+
+        guard tools.contains(.mosaic), hasAdjustedImage else { return }
+        generateNewMosaicImageLayer()
+
+        if !mosaicPaths.isEmpty {
+            generateNewMosaicImage()
         }
     }
 

Sources/General/ZLImageEditorUIConfiguration+Chaining.swift

@@ -33,6 +33,12 @@ public extension ZLImageEditorUIConfiguration {
         return self
     }
 
+    @discardableResult
+    func adjustSliderType(_ type: ZLAdjustSliderType) -> ZLImageEditorUIConfiguration {
+        adjustSliderType = type
+        return self
+    }
+
     @discardableResult
     func languageType(_ type: ZLImageEditorLanguageType) -> ZLImageEditorUIConfiguration {
         languageType = type

Sources/General/ZLImageEditorUIConfiguration.swift

@@ -40,6 +40,9 @@ public class ZLImageEditorUIConfiguration: NSObject {
     /// HUD style. Defaults to dark.
     @objc public var hudStyle: ZLProgressHUD.HUDStyle = .dark
 
+    /// Adjust Slider Type
+    @objc public var adjustSliderType: ZLAdjustSliderType = .vertical
+
     // MARK: Language properties
 
     /// Language for framework.
@@ -135,3 +138,8 @@ enum ZLCustomImageDeploy {
 
     static var imageForKey: [String: UIImage] = [:]
 }
+
+@objc public enum ZLAdjustSliderType: Int {
+    case vertical
+    case horizontal
+}