feat: add thickness picker

Memola/Canvas/Tool/Pen/Core/PenStyle.swift

@@ -11,7 +11,8 @@ import Foundation
 protocol PenStyle {
     var icon: (base: String, tip: String?) { get }
     var textureName: String { get }
-    var thinkness: (min: CGFloat, max: CGFloat) { get }
+    var thickness: (min: CGFloat, max: CGFloat) { get }
+    var thicknessSteps: [CGFloat] { get }
     var color: [CGFloat] { get }
     var stepRate: CGFloat { get }
     var generator: any StrokeGenerator { get }

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

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

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

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

Memola/Features/Memo/ColorPicker/ColorPicker.swift

@@ -35,6 +35,7 @@ struct ColorPicker: View {
                     }
                     .frame(width: size * 2 + 10)
                     .cornerRadius(5)
+                    .drawingGroup()
                     .overlay {
                         RoundedRectangle(cornerRadius: 5)
                             .stroke(Color.gray, lineWidth: 0.2)

Memola/Features/Memo/PenDock/PenDockView.swift

@@ -17,12 +17,11 @@ struct PenDockView: View {
     var body: some View {
         VStack(alignment: .trailing) {
             if let pen = tool.selectedPen {
-                VStack(spacing: 10) {
+                VStack(spacing: 15) {
-                    penColorButton(pen)
+                    penColorView(pen)
-                    Capsule()
+                    penThicknessView(pen)
-                        .frame(height: 20)
                 }
-                .padding()
+                .padding(10)
                 .frame(width: width * factor - 18)
                 .background {
                     RoundedRectangle(cornerRadius: 20)
@@ -137,7 +136,7 @@ struct PenDockView: View {
         .offset(x: tool.selectedPen === pen ? 0 : 25)
     }
 
-    func penColorButton(_ pen: Pen) -> some View {
+    func penColorView(_ pen: Pen) -> some View {
         Button {
             tool.opensColorPicker = true
         } label: {
@@ -154,7 +153,7 @@ struct PenDockView: View {
                 }
                 .background(.white)
                 .clipShape(Capsule())
-                .frame(height: 20)
+                .frame(height: 25)
                 .overlay {
                     Capsule()
                         .stroke(Color.gray, lineWidth: 0.4)
@@ -169,6 +168,37 @@ struct PenDockView: View {
         }
     }
 
+    @ViewBuilder
+    func penThicknessView(_ pen: Pen) -> some View {
+        let minimum: CGFloat = pen.style.thickness.min
+        let maximum: CGFloat = pen.style.thickness.max
+        let start: CGFloat = 5
+        let end: CGFloat = 15
+        let selection = Binding(
+            get: { pen.thickness },
+            set: { 
+                pen.thickness = $0
+                tool.objectWillChange.send()
+            }
+        )
+        Picker("", selection: selection) {
+            ForEach(pen.style.thicknessSteps, id: \.self) { step in
+                let size = ((step - minimum) * (end - start) / (maximum - minimum)) + start - (1 / step)
+                if pen.thickness == step {
+                    Circle()
+                        .fill(.black)
+                        .frame(width: size, height: size)
+                } else {
+                    Circle()
+                        .stroke(Color.black, lineWidth: 1)
+                        .frame(width: size, height: size)
+                }
+            }
+        }
+        .pickerStyle(.wheel)
+        .frame(width: width * factor - 18, height: 40)
+    }
+
     var newPenButton: some View {
         Button {
             let pen = PenObject.createObject(\.viewContext, penStyle: .marker)

Memola/Persistence/Objects/PenObject.swift

@@ -24,7 +24,7 @@ extension PenObject {
         object.color = penStyle.color
         object.style = penStyle.strokeStyle.rawValue
         object.isSelected = false
-        object.thickness = penStyle.thinkness.min
+        object.thickness = penStyle.thickness.min
         return object
     }
 }