diff --git a/VDSSample/ViewControllers/DropShawdowViewController.swift b/VDSSample/ViewControllers/DropShawdowViewController.swift index 35133e9..3c1a384 100644 --- a/VDSSample/ViewControllers/DropShawdowViewController.swift +++ b/VDSSample/ViewControllers/DropShawdowViewController.swift @@ -11,20 +11,25 @@ import VDS import VDSColorTokens import Combine -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() }} - +class DropShadowViewController: BaseViewController { var viewPaddingRange = Slider() var viewRadiusRange = Slider() + var viewSpacerRange = Slider() + + //shadow 1 + var showShadow = Toggle() var opacityRange = Slider() var radiusRange = Slider() var offsetXRange = Slider() var offsetYRange = Slider() - var viewSpacerRange = Slider() - + + //shadow 2 + var showShadow2 = Toggle() + var opacityRange2 = Slider() + var radiusRange2 = Slider() + var offsetXRange2 = Slider() + var offsetYRange2 = Slider() + var viewSize: CGFloat = 100.0 var componentWrapper: UIView! var componentConstraints: NSLayoutConstraint.Container! @@ -44,6 +49,18 @@ class DropShadowViewController: BaseViewController { items: UIColor.VDSColor.allCases) }() + lazy var dropShadow2LightColorPickerSelectorView = { + PickerSelectorView(title: "", + picker: self.picker, + items: UIColor.VDSColor.allCases) + }() + + lazy var dropShadow2DarkColorPickerSelectorView = { + PickerSelectorView(title: "", + picker: self.picker, + items: UIColor.VDSColor.allCases) + }() + lazy var viewLightColorPickerSelectorView = { PickerSelectorView(title: "", picker: self.picker, @@ -115,6 +132,8 @@ class DropShadowViewController: BaseViewController { viewPadding = 10 spacer = 10 + component.setNeedsUpdate() + setupPicker() setupModel() updateView() @@ -144,6 +163,7 @@ class DropShadowViewController: BaseViewController { let form2 = FormSection() form2.title = "View 1 Shadow Settings" + form2.addFormRow(label: "Show", view: .makeWrapper(for: showShadow)) form2.addFormRow(label: "Shawdow Light", view: dropShadowLightColorPickerSelectorView) form2.addFormRow(label: "Shawdow Dark", view: dropShadowDarkColorPickerSelectorView) form2.addFormRow(label: "Opacity", view: opacityRange) @@ -151,13 +171,32 @@ class DropShadowViewController: BaseViewController { form2.addFormRow(label: "Width (OffSet X)", view: offsetXRange) form2.addFormRow(label: "Height (Offset Y)", view: offsetYRange) + let form3 = FormSection() + form3.title = "View 1 Shadow 2 Settings" + form3.addFormRow(label: "Show", view: .makeWrapper(for: showShadow2)) + form3.addFormRow(label: "Shawdow Light", view: dropShadow2LightColorPickerSelectorView) + form3.addFormRow(label: "Shawdow Dark", view: dropShadow2DarkColorPickerSelectorView) + form3.addFormRow(label: "Opacity", view: opacityRange2) + form3.addFormRow(label: "Radius (Blur)", view: radiusRange2) + form3.addFormRow(label: "Width (OffSet X)", view: offsetXRange2) + form3.addFormRow(label: "Height (Offset Y)", view: offsetYRange2) + + append(section: form1) append(section: form2) + append(section: form3) + + //shadow1 + showShadow.publisher(for: .valueChanged).sink(receiveValue: { [weak self] slider in + self?.component.showShadow = slider.isOn + self?.updateView() + }).store(in: &subscribers) opacityRange.maximumValue = 1.0 opacityRange.minimumValue = 0.0 opacityRange.value = 1.0 opacityRange.publisher(for: .valueChanged).sink(receiveValue: { [weak self] slider in + self?.component.opacityRange = CGFloat(slider.value) self?.updateView() }).store(in: &subscribers) @@ -165,6 +204,7 @@ class DropShadowViewController: BaseViewController { radiusRange.minimumValue = 0.0 radiusRange.value = 2.0 radiusRange.publisher(for: .valueChanged).sink(receiveValue: { [weak self] slider in + self?.component.radiusRange = CGFloat(slider.value) self?.updateView() }).store(in: &subscribers) @@ -172,6 +212,7 @@ class DropShadowViewController: BaseViewController { offsetXRange.minimumValue = -20 offsetXRange.value = 2.0 offsetXRange.publisher(for: .valueChanged).sink(receiveValue: { [weak self] slider in + self?.component.offsetXRange = CGFloat(slider.value) self?.updateView() }).store(in: &subscribers) @@ -179,9 +220,49 @@ class DropShadowViewController: BaseViewController { offsetYRange.minimumValue = -20 offsetYRange.value = 2.0 offsetYRange.publisher(for: .valueChanged).sink(receiveValue: { [weak self] slider in + self?.component.offsetYRange = CGFloat(slider.value) self?.updateView() }).store(in: &subscribers) - + + //shadow2 + showShadow2.publisher(for: .valueChanged).sink(receiveValue: { [weak self] slider in + self?.component.showShadow2 = slider.isOn + self?.updateView() + }).store(in: &subscribers) + + opacityRange2.maximumValue = 1.0 + opacityRange2.minimumValue = 0.0 + opacityRange2.value = 1.0 + opacityRange2.publisher(for: .valueChanged).sink(receiveValue: { [weak self] slider in + self?.component.opacityRange2 = CGFloat(slider.value) + self?.updateView() + }).store(in: &subscribers) + + radiusRange2.maximumValue = 20.0 + radiusRange2.minimumValue = 0.0 + radiusRange2.value = 2.0 + radiusRange2.publisher(for: .valueChanged).sink(receiveValue: { [weak self] slider in + self?.component.radiusRange2 = CGFloat(slider.value) + self?.updateView() + }).store(in: &subscribers) + + offsetXRange2.maximumValue = 20 + offsetXRange2.minimumValue = -20 + offsetXRange2.value = 2.0 + offsetXRange2.publisher(for: .valueChanged).sink(receiveValue: { [weak self] slider in + self?.component.offsetXRange2 = CGFloat(slider.value) + self?.updateView() + }).store(in: &subscribers) + + offsetYRange2.maximumValue = 20 + offsetYRange2.minimumValue = -20 + offsetYRange2.value = 2.0 + offsetYRange2.publisher(for: .valueChanged).sink(receiveValue: { [weak self] slider in + self?.component.offsetYRange2 = CGFloat(slider.value) + self?.updateView() + }).store(in: &subscribers) + + //view viewPaddingRange.maximumValue = 50.0 viewPaddingRange.minimumValue = 0.0 viewPaddingRange.value = 2.0 @@ -194,6 +275,7 @@ class DropShadowViewController: BaseViewController { viewRadiusRange.minimumValue = 0 viewRadiusRange.value = 8.0 viewRadiusRange.publisher(for: .valueChanged).sink(receiveValue: { [weak self] slider in + self?.component.viewRadiusRange = CGFloat(slider.value) self?.updateView() }).store(in: &subscribers) @@ -204,10 +286,15 @@ class DropShadowViewController: BaseViewController { self?.spacer = CGFloat(slider.value) }).store(in: &subscribers) - dropShadowLightColorPickerSelectorView.text = shadowLightColor.rawValue - dropShadowDarkColorPickerSelectorView.text = shadowDarkColor.rawValue - viewLightColorPickerSelectorView.text = viewLightColor.rawValue - viewDarkColorPickerSelectorView.text = viewDarkColor.rawValue + dropShadowLightColorPickerSelectorView.text = component.shadowLightColor.rawValue + dropShadowDarkColorPickerSelectorView.text = component.shadowDarkColor.rawValue + dropShadow2LightColorPickerSelectorView.text = component.shadowLightColor2.rawValue + dropShadow2DarkColorPickerSelectorView.text = component.shadowDarkColor2.rawValue + viewLightColorPickerSelectorView.text = component.viewLightColor.rawValue + viewDarkColorPickerSelectorView.text = component.viewDarkColor.rawValue + + showShadow.isOn = component.showShadow + showShadow2.isOn = component.showShadow2 } func setupModel() { @@ -216,19 +303,8 @@ class DropShadowViewController: BaseViewController { } 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(){ @@ -239,19 +315,101 @@ class DropShadowViewController: BaseViewController { } dropShadowDarkColorPickerSelectorView.onPickerDidSelect = { [weak self] item in - self?.shadowDarkColor = item + self?.component.shadowDarkColor = item } dropShadowLightColorPickerSelectorView.onPickerDidSelect = { [weak self] item in - self?.shadowLightColor = item + self?.component.shadowLightColor = item } + dropShadow2DarkColorPickerSelectorView.onPickerDidSelect = { [weak self] item in + self?.component.shadowDarkColor2 = item + } + + dropShadow2LightColorPickerSelectorView.onPickerDidSelect = { [weak self] item in + self?.component.shadowLightColor2 = item + } viewLightColorPickerSelectorView.onPickerDidSelect = { [weak self] item in - self?.viewLightColor = item + self?.component.viewLightColor = item } viewDarkColorPickerSelectorView.onPickerDidSelect = { [weak self] item in - self?.viewDarkColor = item + self?.component.viewDarkColor = item } } } + +public class ShadowView: View { + public var shadow1 = View() + public var shadow2 = View() + + public var viewLightColor: UIColor.VDSColor = .paletteGray65 { didSet { setNeedsUpdate() }} + public var viewDarkColor: UIColor.VDSColor = .backgroundPrimaryLight { didSet { setNeedsUpdate() }} + + public var viewRadiusRange: CGFloat = 8.0 { didSet { setNeedsUpdate() }} + + public var showShadow: Bool = true { didSet { setNeedsUpdate() }} + public var opacityRange: CGFloat = 1.0 { didSet { setNeedsUpdate() }} + public var offsetXRange: CGFloat = 2.0 { didSet { setNeedsUpdate() }} + public var offsetYRange: CGFloat = 2.0 { didSet { setNeedsUpdate() }} + public var radiusRange: CGFloat = 2.0 { didSet { setNeedsUpdate() }} + public var shadowLightColor: UIColor.VDSColor = .backgroundPrimaryDark { didSet { setNeedsUpdate() }} + public var shadowDarkColor: UIColor.VDSColor = .backgroundPrimaryLight { didSet { setNeedsUpdate() }} + + public var showShadow2: Bool = false { didSet { setNeedsUpdate() }} + public var opacityRange2: CGFloat = 1.0 { didSet { setNeedsUpdate() }} + public var offsetXRange2: CGFloat = 2.0 { didSet { setNeedsUpdate() }} + public var offsetYRange2: CGFloat = 2.0 { didSet { setNeedsUpdate() }} + public var radiusRange2: CGFloat = 2.0 { didSet { setNeedsUpdate() }} + public var shadowLightColor2: UIColor.VDSColor = .backgroundPrimaryDark { didSet { setNeedsUpdate() }} + public var shadowDarkColor2: UIColor.VDSColor = .backgroundPrimaryLight { didSet { setNeedsUpdate() }} + + public override func setup() { + super.setup() + addSubview(shadow1) + addSubview(shadow2) + shadow1.pinToSuperView() + shadow2.pinToSuperView() + width(constant: 100) + height(constant: 100) + } + + public override func updateView() { + super.updateView() + let viewColor = SurfaceColorConfiguration(viewLightColor.uiColor, viewDarkColor.uiColor).getColor(surface) + backgroundColor = viewColor + shadow1.backgroundColor = .brown + shadow2.backgroundColor = .yellow + + shadow1.isHidden = !showShadow + shadow2.isHidden = !showShadow2 + setNeedsLayout() + layoutIfNeeded() + } + + + public override func layoutSubviews() { + super.layoutSubviews() + + let dropshadowColor = SurfaceColorConfiguration(shadowLightColor.uiColor, shadowDarkColor.uiColor).getColor(surface) + let dropshadowColor2 = SurfaceColorConfiguration(shadowLightColor.uiColor, shadowDarkColor.uiColor).getColor(surface) + layer.cornerRadius = CGFloat(viewRadiusRange) + layer.masksToBounds = false + + shadow1.layer.cornerRadius = CGFloat(viewRadiusRange) + shadow1.layer.masksToBounds = false + shadow1.layer.cornerRadius = CGFloat(viewRadiusRange) + shadow1.layer.shadowColor = UIColor.purple.cgColor //dropshadowColor.cgColor + shadow1.layer.shadowOpacity = Float(opacityRange) + shadow1.layer.shadowOffset = .init(width: CGFloat(offsetXRange), height: CGFloat(offsetYRange)) + shadow1.layer.shadowRadius = CGFloat(radiusRange) + + shadow2.layer.cornerRadius = CGFloat(viewRadiusRange) + shadow2.layer.masksToBounds = false + shadow2.layer.cornerRadius = CGFloat(viewRadiusRange) + shadow2.layer.shadowColor = UIColor.blue.cgColor//dropshadowColor2.cgColor + shadow2.layer.shadowOpacity = Float(opacityRange2) + shadow2.layer.shadowOffset = .init(width: CGFloat(offsetXRange2), height: CGFloat(offsetYRange2)) + shadow2.layer.shadowRadius = CGFloat(radiusRange2) + } +}