From af7343c05c90f09653c1457a85932b6b7a05da9e Mon Sep 17 00:00:00 2001 From: dscyrescotti Date: Sun, 19 May 2024 10:55:31 +0700 Subject: [PATCH] feat: add thickness picker --- Memola/Canvas/Tool/Pen/Core/PenStyle.swift | 3 +- .../Tool/Pen/PenStyles/EraserPenStyle.swift | 4 +- .../Tool/Pen/PenStyles/MarkerPenStyle.swift | 4 +- .../Memo/ColorPicker/ColorPicker.swift | 1 + .../Features/Memo/PenDock/PenDockView.swift | 44 ++++++++++++++++--- Memola/Persistence/Objects/PenObject.swift | 2 +- 6 files changed, 47 insertions(+), 11 deletions(-) diff --git a/Memola/Canvas/Tool/Pen/Core/PenStyle.swift b/Memola/Canvas/Tool/Pen/Core/PenStyle.swift index a2a63ea..85b1a05 100644 --- a/Memola/Canvas/Tool/Pen/Core/PenStyle.swift +++ b/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 } diff --git a/Memola/Canvas/Tool/Pen/PenStyles/EraserPenStyle.swift b/Memola/Canvas/Tool/Pen/PenStyles/EraserPenStyle.swift index a18d8df..8e08423 100644 --- a/Memola/Canvas/Tool/Pen/PenStyles/EraserPenStyle.swift +++ b/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] diff --git a/Memola/Canvas/Tool/Pen/PenStyles/MarkerPenStyle.swift b/Memola/Canvas/Tool/Pen/PenStyles/MarkerPenStyle.swift index ed82047..16f3924 100644 --- a/Memola/Canvas/Tool/Pen/PenStyles/MarkerPenStyle.swift +++ b/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] diff --git a/Memola/Features/Memo/ColorPicker/ColorPicker.swift b/Memola/Features/Memo/ColorPicker/ColorPicker.swift index a3a197a..ff8604b 100644 --- a/Memola/Features/Memo/ColorPicker/ColorPicker.swift +++ b/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) diff --git a/Memola/Features/Memo/PenDock/PenDockView.swift b/Memola/Features/Memo/PenDock/PenDockView.swift index b1caf1f..801f3ec 100644 --- a/Memola/Features/Memo/PenDock/PenDockView.swift +++ b/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) { - penColorButton(pen) - Capsule() - .frame(height: 20) + VStack(spacing: 15) { + penColorView(pen) + penThicknessView(pen) } - .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) diff --git a/Memola/Persistence/Objects/PenObject.swift b/Memola/Persistence/Objects/PenObject.swift index 52380ec..054edf4 100644 --- a/Memola/Persistence/Objects/PenObject.swift +++ b/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 } }