// // 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.publisher(for: .valueChanged).sink { [weak self] slider in self?.value = slider.value self?.sendActions(for: .valueChanged) }.store(in: &subscribers) } override func updateView() { textField.text = String(format: "%.2f", value) } func textFieldShouldReturn(_ textField: UITextField) -> Bool { textField.resignFirstResponder() if let text = textField.text, let n = NumberFormatter().number(from: text) { self.value = n.floatValue print(self.value) } return true } } class DropShadowViewController: BaseViewController { 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 opacityRange = Slider() var radiusRange = Slider() var offsetXRange = Slider() var offsetYRange = Slider() 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) }() let spacer: Float = 50 override func viewDidLoad() { super.viewDidLoad() component.widthAnchor.constraint(equalToConstant: 100).isActive = true component.heightAnchor.constraint(equalToConstant: 100).isActive = true addContentTopView(view: .makeWrapper(for: component, edgeSpacing: Double(spacer)), edgeSpacing: 0.0) setupPicker() setupModel() updateView() } override func setupForm(){ super.setupForm() addFormRow(label: "Surface", view: surfacePickerSelectorView) 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) 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 dropshadowColorConfiguration = SurfaceColorConfiguration(shadowLightColor.uiColor, shadowDarkColor.uiColor) let viewColorConfiguration = SurfaceColorConfiguration(viewLightColor.uiColor, viewDarkColor.uiColor) component.layer.masksToBounds = false component.backgroundColor = viewColorConfiguration.getColor(surface) component.layer.shadowColor = dropshadowColorConfiguration.getColor(surface).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) component.layer.cornerRadius = 8 } 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 } } }