starred/Memola
1
0
Fork 0
mirror of https://github.com/dscyrescotti/Memola.git synced 2026-04-25 10:08:34 +02: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 { struct ColorPicker: View {
@ObservedObject var pen: Pen @ObservedObject var pen: Pen
@EnvironmentObject var tool: Tool
@State var hue: Double = 1 @State var hue: Double = 1
@State var saturation: Double = 0 @State var saturation: Double = 0
@State var brightness: Double = 1 @State var brightness: Double = 1
@State var alpha: Double = 1 @State var alpha: Double = 1
let size: CGFloat = 18 let size: CGFloat = 20
var body: some View { var body: some View {
VStack(spacing: 10) { VStack(spacing: 10) {
colorPicker colorPicker
.frame(width: 180, height: 180) .frame(width: 200, height: 200)
HStack(spacing: 10) { HStack(spacing: 10) {
Color(hue: hue, saturation: saturation, brightness: brightness) hueSlider
.overlay { alphaSlider
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
}
} }
} }
.padding(10) .padding(10)
@@ -135,11 +117,6 @@ struct ColorPicker: View {
.offset(x: max(size, proxy.size.width * hue - 2)) .offset(x: max(size, proxy.size.width * hue - 2))
} }
.frame(width: proxy.size.width, height: proxy.size.height) .frame(width: proxy.size.width, height: proxy.size.height)
.clipShape(Capsule())
.overlay {
Capsule()
.stroke(Color.gray, lineWidth: 0.2)
}
.gesture( .gesture(
DragGesture(minimumDistance: 0) DragGesture(minimumDistance: 0)
.onChanged { value in .onChanged { value in
@@ -151,6 +128,12 @@ struct ColorPicker: View {
updateBaseColor() updateBaseColor()
} }
) )
.clipShape(Capsule())
.overlay {
Capsule()
.stroke(Color.gray, lineWidth: 0.2)
}
.frame(height: proxy.size.height)
} }
.frame(height: size) .frame(height: size)
} }
@@ -187,11 +170,6 @@ struct ColorPicker: View {
.offset(x: max(size, proxy.size.width * alpha - 2)) .offset(x: max(size, proxy.size.width * alpha - 2))
} }
.frame(width: proxy.size.width, height: proxy.size.height) .frame(width: proxy.size.width, height: proxy.size.height)
.clipShape(Capsule())
.overlay {
Capsule()
.stroke(Color.gray, lineWidth: 0.2)
}
.gesture( .gesture(
DragGesture(minimumDistance: 0) DragGesture(minimumDistance: 0)
.onChanged { value in .onChanged { value in
@@ -203,11 +181,18 @@ struct ColorPicker: View {
updateBaseColor() updateBaseColor()
} }
) )
.clipShape(Capsule())
.overlay {
Capsule()
.stroke(Color.gray, lineWidth: 0.2)
}
.frame(height: proxy.size.height)
} }
.frame(height: size) .frame(height: size)
} }
func updateBaseColor() { func updateBaseColor() {
pen.color = Color(hue: hue, saturation: saturation, brightness: brightness).opacity(0.7 * alpha + 0.3) 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 { var body: some View {
VStack(alignment: .trailing) { VStack(alignment: .trailing) {
if let pen = tool.selectedPen { if let pen = tool.selectedPen {
VStack(spacing: 15) { VStack(spacing: 5) {
penColorView(pen) penColorView(pen)
penThicknessView(pen) penThicknessView(pen)
} }
@@ -141,25 +141,30 @@ struct PenDockView: View {
tool.opensColorPicker = true tool.opensColorPicker = true
} label: { } label: {
let hsba = pen.color.hsba let hsba = pen.color.hsba
Color(hue: hsba.hue, saturation: hsba.saturation, brightness: hsba.brightness) let baseColor = Color(hue: hsba.hue, saturation: hsba.saturation, brightness: hsba.brightness)
.overlay { GeometryReader { proxy in
HStack(spacing: 0) {
baseColor
.frame(width: proxy.size.width / 2)
Image("transparent-grid-square") Image("transparent-grid-square")
.resizable() .resizable()
.scaleEffect(1.8) .scaleEffect(3)
.aspectRatio(contentMode: .fill) .aspectRatio(contentMode: .fill)
.clipShape(Triangle()) .opacity(1 - hsba.alpha)
pen.color .frame(width: proxy.size.width / 2)
.clipShape(Triangle()) .clipped()
} }
.background(.white) }
.clipShape(Capsule()) .background(baseColor)
.frame(height: 25) .clipShape(RoundedRectangle(cornerRadius: 10))
.overlay { .frame(height: 28)
Capsule() .overlay {
.stroke(Color.gray, lineWidth: 0.4) RoundedRectangle(cornerRadius: 10)
} .stroke(Color.gray, lineWidth: 0.4)
.padding(0.2) }
.drawingGroup() .padding(0.2)
.padding(.top, 4)
.drawingGroup()
} }
.hoverEffect(.lift) .hoverEffect(.lift)
.popover(isPresented: $tool.opensColorPicker) { .popover(isPresented: $tool.opensColorPicker) {