272 lines
11 KiB
Swift
272 lines
11 KiB
Swift
//
|
|
// DropShawdowViewController.swift
|
|
// VDSSample
|
|
//
|
|
// Created by Matt Bruce on 6/13/23.
|
|
//
|
|
|
|
import Foundation
|
|
import UIKit
|
|
import VDS
|
|
import VDSColorTokens
|
|
import Combine
|
|
|
|
class Slider: Control, UITextFieldDelegate {
|
|
var textField = NumericField().with { $0.translatesAutoresizingMaskIntoConstraints = false }
|
|
var range = UISlider().with { $0.translatesAutoresizingMaskIntoConstraints = false }
|
|
var maximumValue: Float = 0.0 { didSet { range.maximumValue = maximumValue }}
|
|
var minimumValue: Float = 0.0 { didSet { range.minimumValue = minimumValue }}
|
|
var value: Float = 0.0 { didSet { range.value = value; setNeedsUpdate() }}
|
|
override func setup() {
|
|
addSubview(textField)
|
|
addSubview(range)
|
|
textField.delegate = self
|
|
textField.pinTop()
|
|
textField.pinBottom()
|
|
textField.pinLeading()
|
|
textField.heightAnchor.constraint(equalToConstant: 44).isActive = true
|
|
textField.widthAnchor.constraint(equalToConstant: 75).isActive = true
|
|
textField.pinTrailing(range.leadingAnchor, 10)
|
|
range.pinTop()
|
|
range.pinBottom()
|
|
range.pinTrailing()
|
|
|
|
range.thumbTintColor = .systemBlue
|
|
range.publisher(for: .valueChanged).sink { [weak self] slider in
|
|
self?.valueChanged(newValue: slider.value)
|
|
}.store(in: &subscribers)
|
|
}
|
|
|
|
override func updateView() {
|
|
textField.text = String(format: "%.2f", value)
|
|
}
|
|
|
|
private func valueChanged(newValue: Float) {
|
|
value = newValue
|
|
sendActions(for: .valueChanged)
|
|
}
|
|
|
|
func textFieldShouldReturn(_ textField: UITextField) -> Bool {
|
|
textField.resignFirstResponder()
|
|
if let text = textField.text, let n = NumberFormatter().number(from: text) {
|
|
valueChanged(newValue: n.floatValue)
|
|
}
|
|
return true
|
|
}
|
|
}
|
|
|
|
class DropShadowViewController: BaseViewController<View> {
|
|
var shadowLightColor: UIColor.VDSColor = .backgroundPrimaryDark { didSet { updateView() }}
|
|
var shadowDarkColor: UIColor.VDSColor = .backgroundPrimaryLight { didSet { updateView() }}
|
|
var viewLightColor: UIColor.VDSColor = .paletteGray65 { didSet { updateView() }}
|
|
var viewDarkColor: UIColor.VDSColor = .backgroundPrimaryLight { didSet { updateView() }}
|
|
|
|
var viewPaddingRange = Slider()
|
|
var viewRadiusRange = Slider()
|
|
var opacityRange = Slider()
|
|
var radiusRange = Slider()
|
|
var offsetXRange = Slider()
|
|
var offsetYRange = Slider()
|
|
var viewSpacerRange = Slider()
|
|
|
|
var viewSize: CGFloat = 100.0
|
|
var wrappedHelper: UIView.WrappedViewHelper!
|
|
var secondView = View()
|
|
var thirdView = View()
|
|
|
|
lazy var dropShadowLightColorPickerSelectorView = {
|
|
PickerSelectorView(title: "",
|
|
picker: self.picker,
|
|
items: UIColor.VDSColor.allCases)
|
|
}()
|
|
|
|
lazy var dropShadowDarkColorPickerSelectorView = {
|
|
PickerSelectorView(title: "",
|
|
picker: self.picker,
|
|
items: UIColor.VDSColor.allCases)
|
|
}()
|
|
|
|
lazy var viewLightColorPickerSelectorView = {
|
|
PickerSelectorView(title: "",
|
|
picker: self.picker,
|
|
items: UIColor.VDSColor.allCases)
|
|
}()
|
|
|
|
lazy var viewDarkColorPickerSelectorView = {
|
|
PickerSelectorView(title: "",
|
|
picker: self.picker,
|
|
items: UIColor.VDSColor.allCases)
|
|
}()
|
|
|
|
var spacer: Float = 0 {
|
|
didSet {
|
|
spacings.forEach{ $0.constant = CGFloat(spacer) }
|
|
}
|
|
}
|
|
|
|
var spacings = [NSLayoutConstraint]()
|
|
|
|
override func viewDidLoad() {
|
|
super.viewDidLoad()
|
|
|
|
wrappedHelper = UIView.makeWrappedView(for: component, isTrailing: false)
|
|
contentTopView.addSubview(wrappedHelper.view)
|
|
contentTopView.addSubview(secondView)
|
|
contentTopView.addSubview(thirdView)
|
|
|
|
component.widthAnchor.constraint(equalToConstant: viewSize).isActive = true
|
|
component.heightAnchor.constraint(equalToConstant: viewSize).isActive = true
|
|
|
|
secondView.widthAnchor.constraint(equalToConstant: viewSize).isActive = true
|
|
secondView.heightAnchor.constraint(equalToConstant: viewSize).isActive = true
|
|
|
|
thirdView.widthAnchor.constraint(equalToConstant: viewSize).isActive = true
|
|
thirdView.heightAnchor.constraint(equalToConstant: viewSize).isActive = true
|
|
|
|
wrappedHelper.view.pinTop().pinLeading()
|
|
secondView.pinTop()
|
|
thirdView.pinLeading().pinBottom()
|
|
|
|
secondView.trailingAnchor.constraint(lessThanOrEqualTo: contentTopView.trailingAnchor).isActive = true
|
|
secondView.bottomAnchor.constraint(lessThanOrEqualTo: contentTopView.bottomAnchor).isActive = true
|
|
thirdView.trailingAnchor.constraint(lessThanOrEqualTo: contentTopView.trailingAnchor).isActive = true
|
|
|
|
spacings.append(thirdView.topAnchor.constraint(equalTo: wrappedHelper.view.bottomAnchor))
|
|
spacings.append(secondView.leadingAnchor.constraint(equalTo: wrappedHelper.view.trailingAnchor))
|
|
spacings.forEach{ $0.isActive = true }
|
|
|
|
spacer = 10
|
|
wrappedHelper.viewPadding = 10
|
|
|
|
setupPicker()
|
|
setupModel()
|
|
updateView()
|
|
}
|
|
|
|
override func showDebug(show: Bool) {
|
|
super.showDebug(show: show)
|
|
component.debugBorder(show: false)
|
|
wrappedHelper.view.debugBorder(show: show, color: .green)
|
|
secondView.debugBorder(show: show, color: .green)
|
|
thirdView.debugBorder(show: show, color: .green)
|
|
}
|
|
|
|
override func setupForm(){
|
|
super.setupForm()
|
|
addFormRow(label: "Surface", view: surfacePickerSelectorView)
|
|
addFormRow(label: "Space Between Views", view: viewSpacerRange)
|
|
addFormRow(label: "View Padding", view: viewPaddingRange)
|
|
addFormRow(label: "View Corner Radius", view: viewRadiusRange)
|
|
addFormRow(label: "View Light", view: viewLightColorPickerSelectorView)
|
|
addFormRow(label: "View Dark", view: viewDarkColorPickerSelectorView)
|
|
addFormRow(label: "Shawdow Light", view: dropShadowLightColorPickerSelectorView)
|
|
addFormRow(label: "Shawdow Dark", view: dropShadowDarkColorPickerSelectorView)
|
|
|
|
addFormRow(label: "Opacity", view: opacityRange)
|
|
addFormRow(label: "Radius (Blur)", view: radiusRange)
|
|
addFormRow(label: "Width (OffSet X)", view: offsetXRange)
|
|
addFormRow(label: "Height (Offset Y)", view: offsetYRange)
|
|
|
|
opacityRange.maximumValue = 1.0
|
|
opacityRange.minimumValue = 0.0
|
|
opacityRange.value = 1.0
|
|
opacityRange.publisher(for: .valueChanged).sink(receiveValue: { [weak self] slider in
|
|
self?.updateView()
|
|
}).store(in: &subscribers)
|
|
|
|
radiusRange.maximumValue = 20.0
|
|
radiusRange.minimumValue = 0.0
|
|
radiusRange.value = 2.0
|
|
radiusRange.publisher(for: .valueChanged).sink(receiveValue: { [weak self] slider in
|
|
self?.updateView()
|
|
}).store(in: &subscribers)
|
|
|
|
offsetXRange.maximumValue = spacer
|
|
offsetXRange.minimumValue = -spacer
|
|
offsetXRange.value = 2.0
|
|
offsetXRange.publisher(for: .valueChanged).sink(receiveValue: { [weak self] slider in
|
|
self?.updateView()
|
|
}).store(in: &subscribers)
|
|
|
|
offsetYRange.maximumValue = spacer
|
|
offsetYRange.minimumValue = -spacer
|
|
offsetYRange.value = 2.0
|
|
offsetYRange.publisher(for: .valueChanged).sink(receiveValue: { [weak self] slider in
|
|
self?.updateView()
|
|
}).store(in: &subscribers)
|
|
|
|
viewPaddingRange.maximumValue = 50.0
|
|
viewPaddingRange.minimumValue = 0.0
|
|
viewPaddingRange.value = 2.0
|
|
viewPaddingRange.publisher(for: .valueChanged).sink(receiveValue: { [weak self] slider in
|
|
self?.wrappedHelper.viewPadding = CGFloat(slider.value)
|
|
self?.updateView()
|
|
}).store(in: &subscribers)
|
|
|
|
viewRadiusRange.maximumValue = Float(viewSize / 2)
|
|
viewRadiusRange.minimumValue = 0
|
|
viewRadiusRange.value = 8.0
|
|
viewRadiusRange.publisher(for: .valueChanged).sink(receiveValue: { [weak self] slider in
|
|
self?.updateView()
|
|
}).store(in: &subscribers)
|
|
|
|
viewSpacerRange.maximumValue = 50
|
|
viewSpacerRange.minimumValue = 0
|
|
viewSpacerRange.value = 10.0
|
|
viewSpacerRange.publisher(for: .valueChanged).sink(receiveValue: { [weak self] slider in
|
|
self?.spacer = slider.value
|
|
}).store(in: &subscribers)
|
|
|
|
dropShadowLightColorPickerSelectorView.text = shadowLightColor.rawValue
|
|
dropShadowDarkColorPickerSelectorView.text = shadowDarkColor.rawValue
|
|
viewLightColorPickerSelectorView.text = viewLightColor.rawValue
|
|
viewDarkColorPickerSelectorView.text = viewDarkColor.rawValue
|
|
}
|
|
|
|
func setupModel() {
|
|
//setup UI
|
|
surfacePickerSelectorView.text = component.surface.rawValue
|
|
}
|
|
|
|
override func updateView() {
|
|
let surface = surfacePickerSelectorView.selectedItem
|
|
let dropshadowColor = SurfaceColorConfiguration(shadowLightColor.uiColor, shadowDarkColor.uiColor).getColor(surface)
|
|
let viewColor = SurfaceColorConfiguration(viewLightColor.uiColor, viewDarkColor.uiColor).getColor(surface)
|
|
|
|
secondView.backgroundColor = .red
|
|
thirdView.backgroundColor = .purple
|
|
|
|
component.layer.cornerRadius = CGFloat(viewRadiusRange.value)
|
|
component.layer.masksToBounds = false
|
|
component.backgroundColor = viewColor
|
|
component.layer.shadowColor = dropshadowColor.cgColor
|
|
component.layer.shadowOpacity = Float(opacityRange.value)
|
|
component.layer.shadowOffset = .init(width: CGFloat(offsetXRange.value), height: CGFloat(offsetYRange.value))
|
|
component.layer.shadowRadius = CGFloat(radiusRange.value)
|
|
}
|
|
|
|
func setupPicker(){
|
|
|
|
surfacePickerSelectorView.onPickerDidSelect = { [weak self] item in
|
|
self?.contentTopView.backgroundColor = item.color
|
|
self?.updateView()
|
|
}
|
|
|
|
dropShadowDarkColorPickerSelectorView.onPickerDidSelect = { [weak self] item in
|
|
self?.shadowDarkColor = item
|
|
}
|
|
|
|
dropShadowLightColorPickerSelectorView.onPickerDidSelect = { [weak self] item in
|
|
self?.shadowLightColor = item
|
|
}
|
|
|
|
viewLightColorPickerSelectorView.onPickerDidSelect = { [weak self] item in
|
|
self?.viewLightColor = item
|
|
}
|
|
|
|
viewDarkColorPickerSelectorView.onPickerDidSelect = { [weak self] item in
|
|
self?.viewDarkColor = item
|
|
}
|
|
}
|
|
}
|