376 lines
14 KiB
Swift
376 lines
14 KiB
Swift
//
|
|
// Copyright 2019 Signal Messenger, LLC
|
|
// SPDX-License-Identifier: AGPL-3.0-only
|
|
//
|
|
|
|
import SignalServiceKit
|
|
|
|
public protocol ColorPickerBarViewDelegate: AnyObject {
|
|
func colorPickerBarView(_ pickerView: ColorPickerBarView, didSelectColor color: ColorPickerBarColor)
|
|
}
|
|
|
|
// MARK: -
|
|
|
|
// We represent picker colors using this (color, phase)
|
|
// tuple so that we can consistently restore palette view state.
|
|
public class ColorPickerBarColor {
|
|
public let color: UIColor
|
|
|
|
// Colors are chosen from a spectrum of colors.
|
|
// This unit value represents the location of the
|
|
// color within that spectrum.
|
|
let palettePhase: CGFloat
|
|
|
|
var cgColor: CGColor {
|
|
return color.cgColor
|
|
}
|
|
|
|
init(color: UIColor, palettePhase: CGFloat) {
|
|
self.color = color
|
|
self.palettePhase = palettePhase
|
|
}
|
|
|
|
class func defaultColor() -> ColorPickerBarColor {
|
|
return ColorPickerBarColor(color: UIColor(rgbHex: 0xff0000), palettePhase: 1/9)
|
|
}
|
|
|
|
class var white: ColorPickerBarColor {
|
|
ColorPickerBarColor(color: .white, palettePhase: 1)
|
|
}
|
|
|
|
class var black: ColorPickerBarColor {
|
|
ColorPickerBarColor(color: .black, palettePhase: 0)
|
|
}
|
|
|
|
static var gradientUIColors: [UIColor] {
|
|
return [
|
|
UIColor(rgbHex: 0x000000),
|
|
UIColor(rgbHex: 0xff5500),
|
|
UIColor(rgbHex: 0xffff00),
|
|
UIColor(rgbHex: 0x00ff00),
|
|
UIColor(rgbHex: 0x00ffff),
|
|
UIColor(rgbHex: 0x0000ff),
|
|
UIColor(rgbHex: 0xff00ff),
|
|
UIColor(rgbHex: 0xff0000),
|
|
UIColor(rgbHex: 0xffffff)
|
|
]
|
|
}
|
|
|
|
static var gradientCGColors: [CGColor] {
|
|
return gradientUIColors.map { $0.cgColor }
|
|
}
|
|
|
|
static func == (left: ColorPickerBarColor, right: ColorPickerBarColor) -> Bool {
|
|
return left.palettePhase.fuzzyEquals(right.palettePhase)
|
|
}
|
|
}
|
|
|
|
// MARK: -
|
|
|
|
private class ColorPreviewView: OWSLayerView {
|
|
|
|
private static let innerRadius: CGFloat = 32
|
|
// The distance from the "inner circle" to the "teardrop".
|
|
private static let circleMargin: CGFloat = 3
|
|
private static let teardropTipRadius: CGFloat = 4
|
|
private static let teardropPointiness: CGFloat = 12
|
|
|
|
private let teardropColor = UIColor.white
|
|
var selectedColor = UIColor.white {
|
|
didSet {
|
|
circleLayer.fillColor = selectedColor.cgColor
|
|
}
|
|
}
|
|
|
|
private let circleLayer: CAShapeLayer
|
|
private let teardropLayer: CAShapeLayer
|
|
|
|
override init() {
|
|
let circleLayer = CAShapeLayer()
|
|
let teardropLayer = CAShapeLayer()
|
|
self.circleLayer = circleLayer
|
|
self.teardropLayer = teardropLayer
|
|
|
|
super.init()
|
|
|
|
circleLayer.strokeColor = nil
|
|
teardropLayer.strokeColor = nil
|
|
// Layer order matters.
|
|
layer.addSublayer(teardropLayer)
|
|
layer.addSublayer(circleLayer)
|
|
|
|
teardropLayer.fillColor = teardropColor.cgColor
|
|
|
|
layoutCallback = { (view) in
|
|
ColorPreviewView.updateLayers(view: view,
|
|
circleLayer: circleLayer,
|
|
teardropLayer: teardropLayer)
|
|
}
|
|
|
|
// The bounding rect of the teardrop + shadow is non-trivial, so
|
|
// we use a generous size that reserves plenty of space.
|
|
//
|
|
// The size doesn't matter since this view is
|
|
// mostly transparent and isn't hot.
|
|
autoSetDimensions(to: CGSize(square: ColorPreviewView.innerRadius * 4))
|
|
}
|
|
|
|
@available(*, unavailable, message: "use other init() instead.")
|
|
required init?(coder aDecoder: NSCoder) {
|
|
fatalError("init(coder:) has not been implemented")
|
|
}
|
|
|
|
static func updateLayers(view: UIView,
|
|
circleLayer: CAShapeLayer,
|
|
teardropLayer: CAShapeLayer) {
|
|
let bounds = view.bounds
|
|
let outerRadius = innerRadius + circleMargin
|
|
let bottomEdge = CGPoint(x: bounds.center.x, y: bounds.maxY)
|
|
let teardropTipCenter = bottomEdge.minus(CGPoint(x: 0, y: teardropTipRadius))
|
|
let circleCenter = teardropTipCenter.minus(CGPoint(x: 0, y: teardropPointiness + innerRadius))
|
|
|
|
// The "teardrop" shape is bounded by 2 circles, joined by their tangents.
|
|
//
|
|
// UIBezierPath can be used to draw this using 2 arcs, if we
|
|
// have the angle of the tangents.
|
|
//
|
|
// Finding the tangent between two circles of known distance + radius
|
|
// is pretty straightforward. We solve for the right triangle that
|
|
// defines the tangents and atan() that triangle to get the angle.
|
|
//
|
|
// 1. Find the length of the hypotenuse.
|
|
let circleCenterDistance = teardropTipCenter.minus(circleCenter).length
|
|
// 2. Find the length of the first side.
|
|
let radiusDiff = outerRadius - teardropTipRadius
|
|
// 3. Find the length of the second side.
|
|
let tangentLength = (circleCenterDistance.square - radiusDiff.square).squareRoot()
|
|
let angle = atan2(tangentLength, radiusDiff)
|
|
let startAngle = angle + .halfPi
|
|
let endAngle = -angle + .halfPi
|
|
|
|
let teardropPath = UIBezierPath()
|
|
teardropPath.addArc(withCenter: circleCenter,
|
|
radius: outerRadius,
|
|
startAngle: startAngle,
|
|
endAngle: endAngle,
|
|
clockwise: true)
|
|
teardropPath.addArc(withCenter: teardropTipCenter,
|
|
radius: teardropTipRadius,
|
|
startAngle: endAngle,
|
|
endAngle: startAngle,
|
|
clockwise: true)
|
|
|
|
teardropLayer.path = teardropPath.cgPath
|
|
teardropLayer.frame = bounds
|
|
|
|
let innerCircleSize = CGSize(square: innerRadius * 2)
|
|
let circleFrame = CGRect(origin: circleCenter.minus(innerCircleSize.asPoint.times(0.5)),
|
|
size: innerCircleSize)
|
|
circleLayer.path = UIBezierPath(ovalIn: circleFrame).cgPath
|
|
circleLayer.frame = bounds
|
|
}
|
|
}
|
|
|
|
// MARK: -
|
|
|
|
public class ColorPickerBarView: UIView {
|
|
|
|
public weak var delegate: ColorPickerBarViewDelegate?
|
|
|
|
public var color: UIColor { selectedValue.color }
|
|
var selectedValue: ColorPickerBarColor {
|
|
didSet {
|
|
updateState()
|
|
}
|
|
}
|
|
|
|
init(currentColor: ColorPickerBarColor? = nil) {
|
|
selectedValue = currentColor ?? ColorPickerBarColor.defaultColor()
|
|
super.init(frame: .zero)
|
|
createContents()
|
|
}
|
|
|
|
@available(*, unavailable, message: "use other init() instead.")
|
|
required init?(coder aDecoder: NSCoder) {
|
|
fatalError("init(coder:) has not been implemented")
|
|
}
|
|
|
|
// MARK: - Views
|
|
|
|
private let imageView = UIImageView()
|
|
private static let selectionSize: CGFloat = 22
|
|
private static let colorBarWidth: CGFloat = 12
|
|
private var selectionView: UIView = {
|
|
let selectionView = CircleView(diameter: selectionSize)
|
|
// Use separate view to create border effect because
|
|
// setting up border on the same view creates a weird glow around the border.
|
|
let borderView = CircleView(diameter: selectionSize + 1)
|
|
borderView.layer.borderColor = UIColor.white.cgColor
|
|
borderView.layer.borderWidth = 2
|
|
selectionView.addSubview(borderView)
|
|
borderView.autoHCenterInSuperview()
|
|
borderView.autoVCenterInSuperview()
|
|
return selectionView
|
|
}()
|
|
// imageWrapper is used to host the "selection view".
|
|
private let imageWrapper = OWSLayerView()
|
|
private var selectionConstraint: NSLayoutConstraint?
|
|
private let previewView = ColorPreviewView()
|
|
|
|
private func createContents() {
|
|
isOpaque = false
|
|
layoutMargins.leading = 0
|
|
layoutMargins.trailing = 0
|
|
|
|
let borderWidth: CGFloat = 2
|
|
let image = ColorPickerBarView.buildPaletteGradientImage()
|
|
imageView.image = image
|
|
let imageRadius = image.size.height * 0.5
|
|
imageView.layer.cornerRadius = imageRadius
|
|
imageView.clipsToBounds = true
|
|
addSubview(imageView)
|
|
imageView.autoSetDimension(.height, toSize: ColorPickerBarView.colorBarWidth)
|
|
imageView.autoPinEdgesToSuperviewMargins(with: UIEdgeInsets(margin: borderWidth))
|
|
|
|
// Create "outer border" that doesn't obscure any colors in the strip.
|
|
let imageViewBorder = PillView()
|
|
imageViewBorder.layer.borderWidth = borderWidth
|
|
imageViewBorder.layer.borderColor = UIColor.white.cgColor
|
|
addSubview(imageViewBorder)
|
|
imageViewBorder.autoPinEdges(toEdgesOf: imageView, with: UIEdgeInsets(margin: -borderWidth))
|
|
|
|
imageWrapper.layoutCallback = { [weak self] (_) in
|
|
guard let strongSelf = self else {
|
|
return
|
|
}
|
|
strongSelf.updateState()
|
|
}
|
|
addSubview(imageWrapper)
|
|
imageWrapper.autoPinEdges(toEdgesOf: imageView)
|
|
|
|
imageWrapper.addSubview(selectionView)
|
|
selectionView.autoVCenterInSuperview()
|
|
|
|
// There must be a better way to pin the selection view's location,
|
|
// but I can't find it.
|
|
let selectionConstraint = NSLayoutConstraint(item: selectionView, attribute: .centerX, relatedBy: .equal,
|
|
toItem: imageWrapper, attribute: .leading, multiplier: 1, constant: 0)
|
|
selectionConstraint.autoInstall()
|
|
self.selectionConstraint = selectionConstraint
|
|
|
|
previewView.isHidden = true
|
|
addSubview(previewView)
|
|
previewView.autoPinEdge(.bottom, to: .top, of: imageView, withOffset: -24)
|
|
previewView.centerXAnchor.constraint(equalTo: selectionView.centerXAnchor).isActive = true
|
|
|
|
addGestureRecognizer(PermissiveGestureRecognizer(target: self, action: #selector(didTouch)))
|
|
|
|
updateState()
|
|
}
|
|
|
|
private func selectColor(atLocationX locationX: CGFloat) {
|
|
let palettePhase = locationX.inverseLerp(0, imageView.width, shouldClamp: true)
|
|
selectedValue = value(for: palettePhase)
|
|
|
|
delegate?.colorPickerBarView(self, didSelectColor: selectedValue)
|
|
}
|
|
|
|
private func value(for palettePhase: CGFloat) -> ColorPickerBarColor {
|
|
// We find the color in the palette's gradient that corresponds
|
|
// to the "phase".
|
|
//
|
|
// 0 = top of gradient, first color.
|
|
// 1 = bottom of gradient, last color.
|
|
struct GradientSegment {
|
|
let color0: UIColor
|
|
let color1: UIColor
|
|
let palettePhase0: CGFloat
|
|
let palettePhase1: CGFloat
|
|
}
|
|
var segments = [GradientSegment]()
|
|
let segmentCount = ColorPickerBarColor.gradientUIColors.count - 1
|
|
var prevColor: UIColor?
|
|
for color in ColorPickerBarColor.gradientUIColors {
|
|
if let color0 = prevColor {
|
|
let index = CGFloat(segments.count)
|
|
let color1 = color
|
|
let palettePhase0: CGFloat = index / CGFloat(segmentCount)
|
|
let palettePhase1: CGFloat = (index + 1) / CGFloat(segmentCount)
|
|
segments.append(GradientSegment(color0: color0, color1: color1, palettePhase0: palettePhase0, palettePhase1: palettePhase1))
|
|
}
|
|
prevColor = color
|
|
}
|
|
var bestSegment = segments.first
|
|
for segment in segments {
|
|
if palettePhase >= segment.palettePhase0 {
|
|
bestSegment = segment
|
|
}
|
|
}
|
|
guard let segment = bestSegment else {
|
|
owsFailDebug("Couldn't find matching segment.")
|
|
return ColorPickerBarColor.defaultColor()
|
|
}
|
|
guard palettePhase >= segment.palettePhase0,
|
|
palettePhase <= segment.palettePhase1 else {
|
|
owsFailDebug("Invalid segment.")
|
|
return ColorPickerBarColor.defaultColor()
|
|
}
|
|
let segmentPhase = palettePhase.inverseLerp(segment.palettePhase0, segment.palettePhase1).clamp01()
|
|
// If CAGradientLayer doesn't do naive RGB color interpolation,
|
|
// this won't be WYSIWYG.
|
|
let color = segment.color0.blended(with: segment.color1, alpha: segmentPhase)
|
|
return ColorPickerBarColor(color: color, palettePhase: palettePhase)
|
|
}
|
|
|
|
private func updateState() {
|
|
selectionView.backgroundColor = selectedValue.color
|
|
previewView.selectedColor = selectedValue.color
|
|
|
|
guard let selectionConstraint = selectionConstraint else {
|
|
owsFailDebug("Missing selectionConstraint.")
|
|
return
|
|
}
|
|
let selectionX = imageWrapper.width * selectedValue.palettePhase
|
|
selectionConstraint.constant = selectionX
|
|
}
|
|
|
|
// MARK: Events
|
|
|
|
@objc
|
|
private func didTouch(gesture: UIGestureRecognizer) {
|
|
switch gesture.state {
|
|
case .began, .changed:
|
|
previewView.isHidden = false
|
|
case .ended:
|
|
previewView.isHidden = true
|
|
default:
|
|
previewView.isHidden = true
|
|
return
|
|
}
|
|
|
|
let location = gesture.location(in: imageView)
|
|
selectColor(atLocationX: location.x)
|
|
}
|
|
|
|
private static func buildPaletteGradientImage() -> UIImage {
|
|
let gradientSize = CGSize(width: UIScreen.main.bounds.width, height: colorBarWidth)
|
|
let gradientBounds = CGRect(origin: .zero, size: gradientSize)
|
|
let gradientView = UIView()
|
|
gradientView.frame = gradientBounds
|
|
let gradientLayer = CAGradientLayer()
|
|
gradientView.layer.addSublayer(gradientLayer)
|
|
gradientLayer.frame = gradientBounds
|
|
// See: https://github.com/signalapp/Signal-Android/blob/42e94d8f921aba212b1ffebfae4f2590a6f3385a/res/values/arrays.xml#L267-L277
|
|
gradientLayer.colors = ColorPickerBarColor.gradientCGColors
|
|
gradientLayer.startPoint = CGPoint.zero
|
|
gradientLayer.endPoint = CGPoint(x: 1, y: 0)
|
|
return gradientView.renderAsImage(opaque: true, scale: UIScreen.main.scale)
|
|
}
|
|
}
|
|
|
|
public extension UIColor {
|
|
|
|
func isCloseToColor(_ color: UIColor) -> Bool {
|
|
return isEqualToColor(color, tolerance: 0.1)
|
|
}
|
|
}
|