Swiftgram/submodules/DrawingUI/Sources/TextSettingsComponent.swift
Ilya Laktyushin 02e06779ef Drawing
2022-12-03 21:57:32 +04:00

711 lines
29 KiB
Swift

import Foundation
import UIKit
import Display
import ComponentFlow
import LegacyComponents
import TelegramCore
import Postbox
enum DrawingTextStyle: Equatable {
case regular
case filled
case semi
case stroke
init(style: DrawingTextEntity.Style) {
switch style {
case .regular:
self = .regular
case .filled:
self = .filled
case .semi:
self = .semi
case .stroke:
self = .stroke
}
}
}
enum DrawingTextAlignment: Equatable {
case left
case center
case right
init(alignment: DrawingTextEntity.Alignment) {
switch alignment {
case .left:
self = .left
case .center:
self = .center
case .right:
self = .right
}
}
}
enum DrawingTextFont: Equatable, CaseIterable {
case sanFrancisco
case newYork
case monospaced
case round
init(font: DrawingTextEntity.Font) {
switch font {
case .sanFrancisco:
self = .sanFrancisco
case .newYork:
self = .newYork
case .monospaced:
self = .monospaced
case .round:
self = .round
}
}
var font: DrawingTextEntity.Font {
switch self {
case .sanFrancisco:
return .sanFrancisco
case .newYork:
return .newYork
case .monospaced:
return .monospaced
case .round:
return .round
}
}
var title: String {
switch self {
case .sanFrancisco:
return "San Francisco"
case .newYork:
return "New York"
case .monospaced:
return "Monospaced"
case .round:
return "Rounded"
}
}
var uiFont: UIFont {
switch self {
case .sanFrancisco:
return Font.semibold(13.0)
case .newYork:
return Font.with(size: 13.0, design: .serif, weight: .semibold)
case .monospaced:
return Font.with(size: 13.0, design: .monospace, weight: .semibold)
case .round:
return Font.with(size: 13.0, design: .round, weight: .semibold)
}
}
}
final class TextAlignmentComponent: Component {
let alignment: DrawingTextAlignment
init(alignment: DrawingTextAlignment) {
self.alignment = alignment
}
static func == (lhs: TextAlignmentComponent, rhs: TextAlignmentComponent) -> Bool {
return lhs.alignment == rhs.alignment
}
public final class View: UIView {
private let line1 = SimpleLayer()
private let line2 = SimpleLayer()
private let line3 = SimpleLayer()
private let line4 = SimpleLayer()
override init(frame: CGRect) {
super.init(frame: frame)
let lines = [self.line1, self.line2, self.line3, self.line4]
lines.forEach { line in
line.backgroundColor = UIColor.white.cgColor
line.cornerRadius = 1.0
line.masksToBounds = true
self.layer.addSublayer(line)
}
}
required init?(coder: NSCoder) {
fatalError("init(coder:) has not been implemented")
}
func update(component: TextAlignmentComponent, availableSize: CGSize, state: EmptyComponentState, environment: Environment<Empty>, transition: Transition) -> CGSize {
let height = 2.0 - UIScreenPixel
let spacing: CGFloat = 3.0 + UIScreenPixel
let long = 21.0
let short = 13.0
let size = CGSize(width: long, height: 18.0)
switch component.alignment {
case .left:
transition.setFrame(layer: self.line1, frame: CGRect(origin: CGPoint(x: 0.0, y: 0.0), size: CGSize(width: long, height: height)))
transition.setFrame(layer: self.line2, frame: CGRect(origin: CGPoint(x: 0.0, y: height + spacing), size: CGSize(width: short, height: height)))
transition.setFrame(layer: self.line3, frame: CGRect(origin: CGPoint(x: 0.0, y: height + spacing + height + spacing), size: CGSize(width: long, height: height)))
transition.setFrame(layer: self.line4, frame: CGRect(origin: CGPoint(x: 0.0, y: height + spacing + height + spacing + height + spacing), size: CGSize(width: short, height: height)))
case .center:
transition.setFrame(layer: self.line1, frame: CGRect(origin: CGPoint(x: floorToScreenPixels((size.width - long) / 2.0), y: 0.0), size: CGSize(width: long, height: height)))
transition.setFrame(layer: self.line2, frame: CGRect(origin: CGPoint(x: floorToScreenPixels((size.width - short) / 2.0), y: height + spacing), size: CGSize(width: short, height: height)))
transition.setFrame(layer: self.line3, frame: CGRect(origin: CGPoint(x: floorToScreenPixels((size.width - long) / 2.0), y: height + spacing + height + spacing), size: CGSize(width: long, height: height)))
transition.setFrame(layer: self.line4, frame: CGRect(origin: CGPoint(x: floorToScreenPixels((size.width - short) / 2.0), y: height + spacing + height + spacing + height + spacing), size: CGSize(width: short, height: height)))
case .right:
transition.setFrame(layer: self.line1, frame: CGRect(origin: CGPoint(x: size.width - long, y: 0.0), size: CGSize(width: long, height: height)))
transition.setFrame(layer: self.line2, frame: CGRect(origin: CGPoint(x: size.width - short, y: height + spacing), size: CGSize(width: short, height: height)))
transition.setFrame(layer: self.line3, frame: CGRect(origin: CGPoint(x: size.width - long, y: height + spacing + height + spacing), size: CGSize(width: long, height: height)))
transition.setFrame(layer: self.line4, frame: CGRect(origin: CGPoint(x: size.width - short, y: height + spacing + height + spacing + height + spacing), size: CGSize(width: short, height: height)))
}
return size
}
}
public func makeView() -> View {
return View(frame: CGRect())
}
public func update(view: View, availableSize: CGSize, state: EmptyComponentState, environment: Environment<Empty>, transition: Transition) -> CGSize {
return view.update(component: self, availableSize: availableSize, state: state, environment: environment, transition: transition)
}
}
final class TextFontComponent: Component {
let values: [DrawingTextFont]
let selectedValue: DrawingTextFont
let updated: (DrawingTextFont) -> Void
init(values: [DrawingTextFont], selectedValue: DrawingTextFont, updated: @escaping (DrawingTextFont) -> Void) {
self.values = values
self.selectedValue = selectedValue
self.updated = updated
}
static func == (lhs: TextFontComponent, rhs: TextFontComponent) -> Bool {
return lhs.values == rhs.values && lhs.selectedValue == rhs.selectedValue
}
public final class View: UIView {
private var buttons: [DrawingTextFont: HighlightableButton] = [:]
private let scrollView = UIScrollView()
private let scrollMask = UIView()
private let maskLeft = SimpleGradientLayer()
private let maskCenter = SimpleLayer()
private let maskRight = SimpleGradientLayer()
private var updated: (DrawingTextFont) -> Void = { _ in }
override init(frame: CGRect) {
if #available(iOS 11.0, *) {
self.scrollView.contentInsetAdjustmentBehavior = .never
}
self.scrollView.showsHorizontalScrollIndicator = false
self.scrollView.showsVerticalScrollIndicator = false
self.scrollView.decelerationRate = .fast
super.init(frame: frame)
self.mask = self.scrollMask
self.maskLeft.type = .axial
self.maskLeft.startPoint = CGPoint(x: 0.0, y: 0.5)
self.maskLeft.endPoint = CGPoint(x: 1.0, y: 0.5)
self.maskLeft.colors = [UIColor.white.withAlphaComponent(0.0).cgColor, UIColor.white.cgColor]
self.maskLeft.locations = [0.0, 1.0]
self.maskCenter.backgroundColor = UIColor.white.cgColor
self.maskRight.type = .axial
self.maskRight.startPoint = CGPoint(x: 0.0, y: 0.5)
self.maskRight.endPoint = CGPoint(x: 1.0, y: 0.5)
self.maskRight.colors = [UIColor.white.cgColor, UIColor.white.withAlphaComponent(0.0).cgColor]
self.maskRight.locations = [0.0, 1.0]
self.scrollMask.layer.addSublayer(self.maskLeft)
self.scrollMask.layer.addSublayer(self.maskCenter)
self.scrollMask.layer.addSublayer(self.maskRight)
self.addSubview(self.scrollView)
}
required init?(coder: NSCoder) {
fatalError("init(coder:) has not been implemented")
}
@objc private func pressed(_ sender: HighlightableButton) {
for (font, button) in self.buttons {
if button === sender {
self.updated(font)
break
}
}
}
private var previousValue: DrawingTextFont?
func update(component: TextFontComponent, availableSize: CGSize, state: EmptyComponentState, environment: Environment<Empty>, transition: Transition) -> CGSize {
self.updated = component.updated
var contentWidth: CGFloat = 0.0
for value in component.values {
contentWidth += 12.0
let button: HighlightableButton
if let current = self.buttons[value] {
button = current
} else {
button = HighlightableButton()
button.setTitle(value.title, for: .normal)
button.titleLabel?.font = value.uiFont
button.sizeToFit()
button.frame = CGRect(origin: .zero, size: CGSize(width: button.frame.width + 16.0, height: 30.0))
button.layer.cornerRadius = 11.0
button.addTarget(self, action: #selector(self.pressed(_:)), for: .touchUpInside)
self.buttons[value] = button
self.scrollView.addSubview(button)
}
if value == component.selectedValue {
button.layer.borderWidth = 1.0 - UIScreenPixel
button.layer.borderColor = UIColor.white.cgColor
} else {
button.layer.borderWidth = UIScreenPixel
button.layer.borderColor = UIColor.white.withAlphaComponent(0.5).cgColor
}
button.frame = CGRect(origin: CGPoint(x: contentWidth, y: 0.0), size: button.frame.size)
contentWidth += button.frame.width
}
contentWidth += 12.0
if self.scrollView.contentSize.width != contentWidth {
self.scrollView.contentSize = CGSize(width: contentWidth, height: 30.0)
}
self.scrollView.frame = CGRect(origin: .zero, size: availableSize)
self.scrollMask.frame = CGRect(origin: .zero, size: availableSize)
self.maskLeft.frame = CGRect(origin: .zero, size: CGSize(width: 12.0, height: 30.0))
self.maskCenter.frame = CGRect(origin: CGPoint(x: 12.0, y: 0.0), size: CGSize(width: availableSize.width - 24.0, height: 30.0))
self.maskRight.frame = CGRect(origin: CGPoint(x: availableSize.width - 12.0, y: 0.0), size: CGSize(width: 12.0, height: 30.0))
if component.selectedValue != self.previousValue {
self.previousValue = component.selectedValue
if let button = self.buttons[component.selectedValue] {
self.scrollView.scrollRectToVisible(button.frame.insetBy(dx: -48.0, dy: 0.0), animated: true)
}
}
return availableSize
}
}
public func makeView() -> View {
return View(frame: CGRect())
}
public func update(view: View, availableSize: CGSize, state: EmptyComponentState, environment: Environment<Empty>, transition: Transition) -> CGSize {
return view.update(component: self, availableSize: availableSize, state: state, environment: environment, transition: transition)
}
}
final class TextSettingsComponent: CombinedComponent {
let color: DrawingColor?
let style: DrawingTextStyle
let alignment: DrawingTextAlignment
let font: DrawingTextFont
let presentColorPicker: () -> Void
let presentFastColorPicker: (GenericComponentViewTag) -> Void
let updateFastColorPickerPan: (CGPoint) -> Void
let dismissFastColorPicker: () -> Void
let toggleStyle: () -> Void
let toggleAlignment: () -> Void
let updateFont: (DrawingTextFont) -> Void
init(
color: DrawingColor?,
style: DrawingTextStyle,
alignment: DrawingTextAlignment,
font: DrawingTextFont,
presentColorPicker: @escaping () -> Void = {},
presentFastColorPicker: @escaping (GenericComponentViewTag) -> Void = { _ in },
updateFastColorPickerPan: @escaping (CGPoint) -> Void = { _ in },
dismissFastColorPicker: @escaping () -> Void = {},
toggleStyle: @escaping () -> Void,
toggleAlignment: @escaping () -> Void,
updateFont: @escaping (DrawingTextFont) -> Void
) {
self.color = color
self.style = style
self.alignment = alignment
self.font = font
self.presentColorPicker = presentColorPicker
self.presentFastColorPicker = presentFastColorPicker
self.updateFastColorPickerPan = updateFastColorPickerPan
self.dismissFastColorPicker = dismissFastColorPicker
self.toggleStyle = toggleStyle
self.toggleAlignment = toggleAlignment
self.updateFont = updateFont
}
static func ==(lhs: TextSettingsComponent, rhs: TextSettingsComponent) -> Bool {
if lhs.color != rhs.color {
return false
}
if lhs.style != rhs.style {
return false
}
if lhs.alignment != rhs.alignment {
return false
}
if lhs.font != rhs.font {
return false
}
return true
}
final class State: ComponentState {
enum ImageKey: Hashable {
case regular
case filled
case semi
case stroke
}
private var cachedImages: [ImageKey: UIImage] = [:]
func image(_ key: ImageKey) -> UIImage {
if let image = self.cachedImages[key] {
return image
} else {
var image: UIImage
switch key {
case .regular:
image = UIImage(bundleImageName: "Media Editor/TextDefault")!
case .filled:
image = UIImage(bundleImageName: "Media Editor/TextFilled")!
case .semi:
image = UIImage(bundleImageName: "Media Editor/TextSemi")!
case .stroke:
image = UIImage(bundleImageName: "Media Editor/TextStroke")!
}
cachedImages[key] = image
return image
}
}
}
func makeState() -> State {
State()
}
static var body: Body {
let colorButton = Child(ColorSwatchComponent.self)
let colorButtonTag = GenericComponentViewTag()
let alignmentButton = Child(Button.self)
let styleButton = Child(Button.self)
let font = Child(TextFontComponent.self)
return { context in
let component = context.component
let state = context.state
let toggleStyle = component.toggleStyle
let toggleAlignment = component.toggleAlignment
let updateFont = component.updateFont
var offset: CGFloat = 6.0
if let color = component.color {
let presentColorPicker = component.presentColorPicker
let presentFastColorPicker = component.presentFastColorPicker
let updateFastColorPickerPan = component.updateFastColorPickerPan
let dismissFastColorPicker = component.dismissFastColorPicker
let colorButton = colorButton.update(
component: ColorSwatchComponent(
type: .main,
color: color,
tag: colorButtonTag,
action: {
presentColorPicker()
},
holdAction: {
presentFastColorPicker(colorButtonTag)
},
pan: { point in
updateFastColorPickerPan(point)
},
release: {
dismissFastColorPicker()
}
),
availableSize: CGSize(width: 44.0, height: 44.0),
transition: context.transition
)
context.add(colorButton
.position(CGPoint(x: colorButton.size.width / 2.0, y: context.availableSize.height / 2.0))
)
offset += 44.0
}
let styleImage: UIImage
switch component.style {
case .regular:
styleImage = state.image(.regular)
case .filled:
styleImage = state.image(.filled)
case .semi:
styleImage = state.image(.semi)
case .stroke:
styleImage = state.image(.stroke)
}
let styleButton = styleButton.update(
component: Button(
content: AnyComponent(
Image(
image: styleImage
)
),
action: {
toggleStyle()
}
).minSize(CGSize(width: 44.0, height: 44.0)),
availableSize: CGSize(width: 30.0, height: 30.0),
transition: .easeInOut(duration: 0.2)
)
context.add(styleButton
.position(CGPoint(x: offset + styleButton.size.width / 2.0, y: context.availableSize.height / 2.0))
.update(Transition.Update { _, view, transition in
if let snapshot = view.snapshotView(afterScreenUpdates: false) {
transition.setAlpha(view: snapshot, alpha: 0.0, completion: { [weak snapshot] _ in
snapshot?.removeFromSuperview()
})
snapshot.frame = view.frame
transition.animateAlpha(view: view, from: 0.0, to: 1.0)
view.superview?.addSubview(snapshot)
}
})
)
offset += 44.0
let alignmentButton = alignmentButton.update(
component: Button(
content: AnyComponent(
TextAlignmentComponent(
alignment: component.alignment
)
),
action: {
toggleAlignment()
}
).minSize(CGSize(width: 44.0, height: 44.0)),
availableSize: context.availableSize,
transition: .easeInOut(duration: 0.2)
)
context.add(alignmentButton
.position(CGPoint(x: offset + alignmentButton.size.width / 2.0, y: context.availableSize.height / 2.0))
)
offset += 44.0
let font = font.update(
component: TextFontComponent(
values: DrawingTextFont.allCases,
selectedValue: component.font,
updated: { font in
updateFont(font)
}
),
availableSize: CGSize(width: context.availableSize.width - offset, height: 30.0),
transition: .easeInOut(duration: 0.2)
)
context.add(font
.position(CGPoint(x: offset + font.size.width / 2.0, y: context.availableSize.height / 2.0))
)
offset += 44.0
return context.availableSize
}
}
}
private func generateMaskPath(size: CGSize, topRadius: CGFloat, bottomRadius: CGFloat) -> UIBezierPath {
let path = UIBezierPath()
path.addArc(withCenter: CGPoint(x: size.width / 2.0, y: topRadius), radius: topRadius, startAngle: .pi, endAngle: 0, clockwise: true)
path.addArc(withCenter: CGPoint(x: size.width / 2.0, y: size.height - bottomRadius), radius: bottomRadius, startAngle: 0, endAngle: .pi, clockwise: true)
path.close()
return path
}
private func generateKnobImage() -> UIImage? {
let side: CGFloat = 32.0
let margin: CGFloat = 10.0
let image = generateImage(CGSize(width: side + margin * 2.0, height: side + margin * 2.0), opaque: false, rotatedContext: { size, context in
context.clear(CGRect(origin: .zero, size: size))
context.setShadow(offset: CGSize(width: 0.0, height: 0.0), blur: 9.0, color: UIColor(rgb: 0x000000, alpha: 0.3).cgColor)
context.setFillColor(UIColor.white.cgColor)
context.fillEllipse(in: CGRect(origin: CGPoint(x: margin, y: margin), size: CGSize(width: side, height: side)))
})
return image?.stretchableImage(withLeftCapWidth: Int(margin + side * 0.5), topCapHeight: Int(margin + side * 0.5))
}
final class TextSizeSliderComponent: Component {
let value: CGFloat
let updated: (CGFloat) -> Void
public init(
value: CGFloat,
updated: @escaping (CGFloat) -> Void
) {
self.value = value
self.updated = updated
}
public static func ==(lhs: TextSizeSliderComponent, rhs: TextSizeSliderComponent) -> Bool {
if lhs.value != rhs.value {
return false
}
return true
}
final class View: UIView, UIGestureRecognizerDelegate {
private var validSize: CGSize?
private var component: TextSizeSliderComponent?
private let backgroundNode = NavigationBackgroundNode(color: UIColor(rgb: 0x888888, alpha: 0.3))
private let maskLayer = SimpleShapeLayer()
private let knobContainer = SimpleLayer()
private let knob = SimpleLayer()
fileprivate var updated: (CGFloat) -> Void = { _ in }
init() {
super.init(frame: CGRect())
let pressGestureRecognizer = UILongPressGestureRecognizer(target: self, action: #selector(self.handlePress(_:)))
pressGestureRecognizer.minimumPressDuration = 0.01
pressGestureRecognizer.delegate = self
self.addGestureRecognizer(pressGestureRecognizer)
self.addGestureRecognizer(UIPanGestureRecognizer(target: self, action: #selector(self.handlePan(_:))))
}
required init?(coder aDecoder: NSCoder) {
preconditionFailure()
}
private var isTracking: Bool?
private var isPanning = false
private var isPressing = false
@objc func handlePress(_ gestureRecognizer: UILongPressGestureRecognizer) {
guard self.frame.height > 0.0 else {
return
}
switch gestureRecognizer.state {
case .began:
self.isPressing = true
if let size = self.validSize, let component = self.component {
let _ = self.updateLayout(size: size, component: component, transition: .easeInOut(duration: 0.2))
}
let location = gestureRecognizer.location(in: self).offsetBy(dx: 0.0, dy: -12.0)
let value = 1.0 - max(0.0, min(1.0, location.y / (self.frame.height - 24.0)))
self.updated(value)
case .ended, .cancelled:
self.isPressing = false
if let size = self.validSize, let component = self.component {
let _ = self.updateLayout(size: size, component: component, transition: .easeInOut(duration: 0.2))
}
default:
break
}
}
@objc func handlePan(_ gestureRecognizer: UIPanGestureRecognizer) {
guard self.frame.height > 0.0 else {
return
}
switch gestureRecognizer.state {
case .began, .changed:
self.isPanning = true
if let size = self.validSize, let component = self.component {
let _ = self.updateLayout(size: size, component: component, transition: .easeInOut(duration: 0.2))
}
let location = gestureRecognizer.location(in: self).offsetBy(dx: 0.0, dy: -12.0)
let value = 1.0 - max(0.0, min(1.0, location.y / (self.frame.height - 24.0)))
self.updated(value)
case .ended, .cancelled:
self.isPanning = false
if let size = self.validSize, let component = self.component {
let _ = self.updateLayout(size: size, component: component, transition: .easeInOut(duration: 0.2))
}
default:
break
}
}
func gestureRecognizer(_ gestureRecognizer: UIGestureRecognizer, shouldRecognizeSimultaneouslyWith otherGestureRecognizer: UIGestureRecognizer) -> Bool {
return true
}
func updateLayout(size: CGSize, component: TextSizeSliderComponent, transition: Transition) -> CGSize {
self.component = component
let previousSize = self.validSize
self.validSize = size
if self.backgroundNode.view.superview == nil {
self.addSubview(self.backgroundNode.view)
}
if self.knobContainer.superlayer == nil {
self.layer.addSublayer(self.knobContainer)
}
if self.knob.superlayer == nil {
self.knob.contents = generateKnobImage()?.cgImage
self.knobContainer.addSublayer(self.knob)
}
let isTracking = self.isPanning || self.isPressing
if self.isTracking != isTracking {
self.isTracking = isTracking
transition.setSublayerTransform(view: self, transform: isTracking ? CATransform3DMakeTranslation(8.0, 0.0, 0.0) : CATransform3DMakeTranslation(-size.width / 2.0, 0.0, 0.0))
transition.setSublayerTransform(layer: self.knobContainer, transform: isTracking ? CATransform3DIdentity : CATransform3DMakeTranslation(4.0, 0.0, 0.0))
}
let knobSize = CGSize(width: 52.0, height: 52.0)
self.knob.frame = CGRect(origin: CGPoint(x: floorToScreenPixels((size.width - knobSize.width) / 2.0), y: -12.0 + floorToScreenPixels((size.height + 24.0 - knobSize.height) * (1.0 - component.value))), size: knobSize)
transition.setFrame(view: self.backgroundNode.view, frame: CGRect(origin: CGPoint(), size: size))
self.backgroundNode.update(size: size, transition: transition.containedViewLayoutTransition)
transition.setFrame(layer: self.knobContainer, frame: CGRect(origin: CGPoint(), size: size))
if previousSize != size {
transition.setFrame(layer: self.maskLayer, frame: CGRect(origin: .zero, size: size))
self.maskLayer.path = generateMaskPath(size: size, topRadius: 15.0, bottomRadius: 3.0).cgPath
self.backgroundNode.layer.mask = self.maskLayer
}
return size
}
}
func makeView() -> View {
return View()
}
func update(view: View, availableSize: CGSize, state: EmptyComponentState, environment: Environment<Empty>, transition: Transition) -> CGSize {
view.updated = self.updated
return view.updateLayout(size: availableSize, component: self, transition: transition)
}
}