feat: move color picker to components

Memola.xcodeproj/project.pbxproj

@@ -191,6 +191,14 @@
 			path = ViewController;
 			sourceTree = "<group>";
 		};
+		EC1B783A2BF9C68C005A34E2 /* Views */ = {
+			isa = PBXGroup;
+			children = (
+				ECFC51252BF8885000D0D051 /* ColorPicker */,
+			);
+			path = Views;
+			sourceTree = "<group>";
+		};
 		EC5050042BF65CBC00B4D86E /* Core */ = {
 			isa = PBXGroup;
 			children = (
@@ -227,6 +235,7 @@
 		EC50500A2BF6672000B4D86E /* Components */ = {
 			isa = PBXGroup;
 			children = (
+				EC1B783A2BF9C68C005A34E2 /* Views */,
 				EC50500B2BF6673300B4D86E /* ViewModifiers */,
 			);
 			path = Components;
@@ -317,7 +326,6 @@
 		ECA7387B2BE5EF3500A4542E /* Memo */ = {
 			isa = PBXGroup;
 			children = (
-				ECFC51252BF8885000D0D051 /* ColorPicker */,
 				EC5050082BF65D0500B4D86E /* Memo */,
 				EC5050052BF65CCD00B4D86E /* PenDock */,
 			);

Memola/Canvas/Tool/Pen/PenStyles/EraserPenStyle.swift

@@ -12,9 +12,9 @@ struct EraserPenStyle: PenStyle {
 
     var textureName: String = "point-texture"
 
-    var thickness: (min: CGFloat, max: CGFloat) = (0.5, 120)
+    var thickness: (min: CGFloat, max: CGFloat) = (0.5, 40)
 
-    var thicknessSteps: [CGFloat] = [0.5, 1, 2, 5, 10, 20, 50, 75, 100, 120]
+    var thicknessSteps: [CGFloat] = [0.5, 1, 2, 5, 7.5, 10, 15, 20, 25, 30, 35, 40]
 
     var color: [CGFloat] = [1, 1, 1, 0]
 

Memola/Canvas/Tool/Pen/PenStyles/MarkerPenStyle.swift

@@ -12,9 +12,9 @@ struct MarkerPenStyle: PenStyle {
 
     var textureName: String = "point-texture"
 
-    var thickness: (min: CGFloat, max: CGFloat) = (0.5, 125)
+    var thickness: (min: CGFloat, max: CGFloat) = (0.5, 40)
 
-    var thicknessSteps: [CGFloat] = [0.5, 1, 2, 5, 10, 20, 50, 75, 100, 120]
+    var thicknessSteps: [CGFloat] = [0.5, 1, 2, 5, 7.5, 10, 15, 20, 25, 30, 35, 40]
 
     var color: [CGFloat] = [1, 0.38, 0.38, 1]
 

Memola/Components/Views/ColorPicker/ColorPicker.swift

@@ -9,14 +9,13 @@ import SwiftUI
 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
 
+    @Binding var color: Color
+
     let size: CGFloat = 20
 
     var body: some View {
@@ -35,7 +34,7 @@ struct ColorPicker: View {
                 .ignoresSafeArea(.all)
         }
         .onAppear {
-            let hsba = pen.color.hsba
+            let hsba = color.hsba
             hue = hsba.hue
             saturation = hsba.saturation
             brightness = hsba.brightness
@@ -86,7 +85,7 @@ struct ColorPicker: View {
                     .onChanged { value in
                         saturation = min(1, max(value.location.x / proxy.size.width, 0))
                         brightness = 1 - min(1, max(value.location.y / proxy.size.height, 0))
-                        updateBaseColor()
+                        updateColor()
                     }
             )
         }
@@ -121,11 +120,11 @@ struct ColorPicker: View {
                 DragGesture(minimumDistance: 0)
                     .onChanged { value in
                         hue = min(1, max(value.location.x / proxy.size.width, 0))
-                        updateBaseColor()
+                        updateColor()
                     }
                     .onEnded { value in
                         hue = min(1, max(value.location.x / proxy.size.width, 0))
-                        updateBaseColor()
+                        updateColor()
                     }
             )
             .clipShape(Capsule())
@@ -174,11 +173,11 @@ struct ColorPicker: View {
                 DragGesture(minimumDistance: 0)
                     .onChanged { value in
                         alpha = min(1, max(value.location.x / proxy.size.width, 0))
-                        updateBaseColor()
+                        updateColor()
                     }
                     .onEnded { value in
                         alpha = min(1, max(value.location.x / proxy.size.width, 0))
-                        updateBaseColor()
+                        updateColor()
                     }
             )
             .clipShape(Capsule())
@@ -191,8 +190,7 @@ struct ColorPicker: View {
         .frame(height: size)
     }
 
-    func updateBaseColor() {
+    func updateColor() {
-        pen.color = Color(hue: hue, saturation: saturation, brightness: brightness).opacity(0.7 * alpha + 0.3)
+        color = Color(hue: hue, saturation: saturation, brightness: brightness).opacity(0.7 * alpha + 0.3)
-        tool.objectWillChange.send()
     }
 }

Memola/Features/Memo/PenDock/PenDockView.swift

@@ -172,7 +172,14 @@ struct PenDockView: View {
         }
         .hoverEffect(.lift)
         .popover(isPresented: $opensColorPicker) {
-            ColorPicker(pen: pen)
+            let color = Binding(
+                get: { pen.color },
+                set: {
+                    pen.color = $0
+                    tool.objectWillChange.send()
+                }
+            )
+            ColorPicker(color: color)
                 .presentationCompactAdaptation(.popover)
         }
     }
@@ -211,7 +218,9 @@ struct PenDockView: View {
     var newPenButton: some View {
         Button {
             let pen = PenObject.createObject(\.viewContext, penStyle: .marker)
-            pen.color = [Color.red, Color.blue, Color.green, Color.black, Color.orange].randomElement()!.components
+            if let color = (tool.selectedPen ?? tool.pens.last)?.rgba {
+                pen.color = color
+            }
             pen.isSelected = true
             pen.tool = tool.object
             pen.orderIndex = Int16(tool.pens.count)