starred/Memola
1
0
Fork 0
mirror of https://github.com/dscyrescotti/Memola.git synced 2026-03-21 08:59:12 +01:00
Code Issues 5 Packages Projects Releases 3 Wiki Activity

feat: update color picker

Browse Source
This commit is contained in:
dscyrescotti
2024-05-19 12:13:35 +07:00
parent af7343c05c
commit 42b1d4d588
2 changed files with 39 additions and 49 deletions
Download Patch File Download Diff File Expand all files Collapse all files

51
Memola/Features/Memo/ColorPicker/ColorPicker.swift
View File

@@ -10,40 +10,22 @@ import Foundation
struct ColorPicker: View {
@ObservedObject var pen: Pen
@EnvironmentObject var tool: Tool
@State var hue: Double = 1
@State var saturation: Double = 0
@State var brightness: Double = 1
@State var alpha: Double = 1
let size: CGFloat = 18
let size: CGFloat = 20
var body: some View {
VStack(spacing: 10) {
colorPicker
.frame(width: 180, height: 180)
.frame(width: 200, height: 200)
HStack(spacing: 10) {
Color(hue: hue, saturation: saturation, brightness: brightness)
.overlay {
Image("transparent-grid-square")
.resizable()
.scaleEffect(1.8)
.aspectRatio(contentMode: .fill)
.clipShape(Triangle())
pen.color
.clipShape(Triangle())
}
.frame(width: size * 2 + 10)
.cornerRadius(5)
.drawingGroup()
.overlay {
RoundedRectangle(cornerRadius: 5)
.stroke(Color.gray, lineWidth: 0.2)
}
VStack(spacing: 15) {
hueSlider
alphaSlider
}
hueSlider
alphaSlider
}
}
.padding(10)
@@ -135,11 +117,6 @@ struct ColorPicker: View {
.offset(x: max(size, proxy.size.width * hue - 2))
}
.frame(width: proxy.size.width, height: proxy.size.height)
.clipShape(Capsule())
.overlay {
Capsule()
.stroke(Color.gray, lineWidth: 0.2)
}
.gesture(
DragGesture(minimumDistance: 0)
.onChanged { value in
@@ -151,6 +128,12 @@ struct ColorPicker: View {
updateBaseColor()
}
)
.clipShape(Capsule())
.overlay {
Capsule()
.stroke(Color.gray, lineWidth: 0.2)
}
.frame(height: proxy.size.height)
}
.frame(height: size)
}
@@ -187,11 +170,6 @@ struct ColorPicker: View {
.offset(x: max(size, proxy.size.width * alpha - 2))
}
.frame(width: proxy.size.width, height: proxy.size.height)
.clipShape(Capsule())
.overlay {
Capsule()
.stroke(Color.gray, lineWidth: 0.2)
}
.gesture(
DragGesture(minimumDistance: 0)
.onChanged { value in
@@ -203,11 +181,18 @@ struct ColorPicker: View {
updateBaseColor()
}
)
.clipShape(Capsule())
.overlay {
Capsule()
.stroke(Color.gray, lineWidth: 0.2)
}
.frame(height: proxy.size.height)
}
.frame(height: size)
}
func updateBaseColor() {
pen.color = Color(hue: hue, saturation: saturation, brightness: brightness).opacity(0.7 * alpha + 0.3)
tool.objectWillChange.send()
}
}

37
Memola/Features/Memo/PenDock/PenDockView.swift
View File

@@ -17,7 +17,7 @@ struct PenDockView: View {
var body: some View {
VStack(alignment: .trailing) {
if let pen = tool.selectedPen {
VStack(spacing: 15) {
VStack(spacing: 5) {
penColorView(pen)
penThicknessView(pen)
}
@@ -141,25 +141,30 @@ struct PenDockView: View {
tool.opensColorPicker = true
} label: {
let hsba = pen.color.hsba
Color(hue: hsba.hue, saturation: hsba.saturation, brightness: hsba.brightness)
.overlay {
let baseColor = Color(hue: hsba.hue, saturation: hsba.saturation, brightness: hsba.brightness)
GeometryReader { proxy in
HStack(spacing: 0) {
baseColor
.frame(width: proxy.size.width / 2)
Image("transparent-grid-square")
.resizable()
.scaleEffect(1.8)
.scaleEffect(3)
.aspectRatio(contentMode: .fill)
.clipShape(Triangle())
pen.color
.clipShape(Triangle())
.opacity(1 - hsba.alpha)
.frame(width: proxy.size.width / 2)
.clipped()
}
.background(.white)
.clipShape(Capsule())
.frame(height: 25)
.overlay {
Capsule()
.stroke(Color.gray, lineWidth: 0.4)
}
.padding(0.2)
.drawingGroup()
}
.background(baseColor)
.clipShape(RoundedRectangle(cornerRadius: 10))
.frame(height: 28)
.overlay {
RoundedRectangle(cornerRadius: 10)
.stroke(Color.gray, lineWidth: 0.4)
}
.padding(0.2)
.padding(.top, 4)
.drawingGroup()
}
.hoverEffect(.lift)
.popover(isPresented: $tool.opensColorPicker) {