├── Images
    ├── color-picker.png
    └── susketch view.png
├── .gitignore
├── .swiftpm
    └── xcode
    │   └── package.xcworkspace
    │       └── xcshareddata
    │           └── IDEWorkspaceChecks.plist
├── Tests
    └── SUSketchTests
    │   └── SUSketchTests.swift
├── Package.swift
├── LICENSE.txt
├── Sources
    └── SUSketch
    │   ├── DrawingTool.swift
    │   ├── ImagePicker.swift
    │   ├── DrawingData.swift
    │   └── SUSketchView.swift
└── README.md


/Images/color-picker.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ArunaUd92/SUSketch/HEAD/Images/color-picker.png


--------------------------------------------------------------------------------
/Images/susketch view.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ArunaUd92/SUSketch/HEAD/Images/susketch view.png


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
1 | .DS_Store
2 | /.build
3 | /Packages
4 | xcuserdata/
5 | DerivedData/
6 | .swiftpm/configuration/registries.json
7 | .swiftpm/xcode/package.xcworkspace/contents.xcworkspacedata
8 | .netrc
9 | 


--------------------------------------------------------------------------------
/.swiftpm/xcode/package.xcworkspace/xcshareddata/IDEWorkspaceChecks.plist:
--------------------------------------------------------------------------------
1 | <?xml version="1.0" encoding="UTF-8"?>
2 | <!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd">
3 | <plist version="1.0">
4 | <dict>
5 | 	<key>IDEDidComputeMac32BitWarning</key>
6 | 	<true/>
7 | </dict>
8 | </plist>
9 | 


--------------------------------------------------------------------------------
/Tests/SUSketchTests/SUSketchTests.swift:
--------------------------------------------------------------------------------
 1 | import XCTest
 2 | @testable import SUSketch
 3 | 
 4 | final class SUSketchTests: XCTestCase {
 5 |     func testExample() throws {
 6 |         // XCTest Documentation
 7 |         // https://developer.apple.com/documentation/xctest
 8 | 
 9 |         // Defining Test Cases and Test Methods
10 |         // https://developer.apple.com/documentation/xctest/defining_test_cases_and_test_methods
11 |     }
12 | }
13 | 


--------------------------------------------------------------------------------
/Package.swift:
--------------------------------------------------------------------------------
 1 | // swift-tools-version: 5.9
 2 | // The swift-tools-version declares the minimum version of Swift required to build this package.
 3 | 
 4 | import PackageDescription
 5 | 
 6 | let package = Package(
 7 |     name: "SUSketch",
 8 |     platforms: [
 9 |         .iOS(.v15),
10 |     ],
11 |     products: [
12 |         // Products define the executables and libraries a package produces, making them visible to other packages.
13 |         .library(
14 |             name: "SUSketch",
15 |             targets: ["SUSketch"]),
16 |     ],
17 |     targets: [
18 |         // Targets are the basic building blocks of a package, defining a module or a test suite.
19 |         // Targets can depend on other targets in this package and products from dependencies.
20 |         .target(
21 |             name: "SUSketch"),
22 |         .testTarget(
23 |             name: "SUSketchTests",
24 |             dependencies: ["SUSketch"]),
25 |     ]
26 | )
27 | 


--------------------------------------------------------------------------------
/LICENSE.txt:
--------------------------------------------------------------------------------
 1 | The MIT License (MIT)
 2 | 
 3 | Copyright (c) 2024 Aruna Udayanga <arunzzrip@gmail.com>
 4 | 
 5 | Permission is hereby granted, free of charge, to any person obtaining a copy
 6 | of this software and associated documentation files (the "Software"), to deal
 7 | in the Software without restriction, including without limitation the rights
 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 | 
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 | 
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 | 
23 | 


--------------------------------------------------------------------------------
/Sources/SUSketch/DrawingTool.swift:
--------------------------------------------------------------------------------
 1 | //
 2 | //  File.swift
 3 | //  
 4 | //
 5 | //  Created by Aruna Udayanga on 23/04/2024.
 6 | //
 7 | 
 8 | import SwiftUI
 9 | 
10 | enum DrawingTool: String, CaseIterable, Identifiable {
11 |     case pen
12 |     case eraser
13 |     case brush
14 |     case fill
15 |     
16 |     var id: String { self.rawValue }
17 |     
18 |     var description: String {
19 |         switch self {
20 |         case .pen: return "Pen"
21 |         case .eraser: return "Eraser"
22 |         case .brush: return "Brush"
23 |         case .fill: return "Fill"
24 |         }
25 |     }
26 |     
27 |     var iconName: String {
28 |         switch self {
29 |         case .pen: return "pencil"
30 |         case .eraser: return "eraser"
31 |         case .brush: return "paintbrush"
32 |         case .fill: return "eyedropper"
33 |         }
34 |     }
35 | }
36 | 
37 | struct ShapeElement: Identifiable {
38 |     let id: UUID = UUID()
39 |     var type: ShapeType
40 |     var position: CGPoint
41 |     var size: CGSize
42 |     var color: Color
43 |     var isSelected: Bool = false
44 |     
45 |     enum ShapeType {
46 |         case triangle, rectangle, circle, oval, square
47 |         
48 |         var description: String {
49 |             switch self {
50 |             case .triangle: return "Triangle"
51 |             case .rectangle: return "Rectangle"
52 |             case .circle: return "Circle"
53 |             case .oval: return "Oval"
54 |             case .square: return "Square"
55 |             }
56 |         }
57 |     }
58 | }
59 | 
60 | 
61 | 


--------------------------------------------------------------------------------
/Sources/SUSketch/ImagePicker.swift:
--------------------------------------------------------------------------------
 1 | //
 2 | //  ImagePicker.swift
 3 | //  SUSketch
 4 | //
 5 | //  Created by Aruna Udayanga on 14/05/2024.
 6 | //
 7 | 
 8 | import Foundation
 9 | import SwiftUI
10 | import PhotosUI
11 | 
12 | struct ImagePicker: UIViewControllerRepresentable {
13 |     @Environment(\.presentationMode) var presentationMode
14 |     @Binding var image: UIImage?
15 |     
16 |     func makeUIViewController(context: UIViewControllerRepresentableContext<ImagePicker>) -> UIImagePickerController {
17 |         let picker = UIImagePickerController()
18 |         picker.delegate = context.coordinator
19 |         return picker
20 |     }
21 |     
22 |     func updateUIViewController(_ uiViewController: UIImagePickerController, context: UIViewControllerRepresentableContext<ImagePicker>) {
23 |         // No update action needed
24 |     }
25 |     
26 |     func makeCoordinator() -> Coordinator {
27 |         Coordinator(self)
28 |     }
29 |     
30 |     class Coordinator: NSObject, UINavigationControllerDelegate, UIImagePickerControllerDelegate {
31 |         let parent: ImagePicker
32 |         
33 |         init(_ parent: ImagePicker) {
34 |             self.parent = parent
35 |         }
36 |         
37 |         func imagePickerController(_ picker: UIImagePickerController, didFinishPickingMediaWithInfo info: [UIImagePickerController.InfoKey : Any]) {
38 |             if let uiImage = info[.originalImage] as? UIImage {
39 |                 parent.image = uiImage
40 |             }
41 |             parent.presentationMode.wrappedValue.dismiss()
42 |         }
43 |     }
44 | }
45 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # SUSketch
 2 | 
 3 | ![platforms](https://img.shields.io/badge/platforms-iOS-333333.svg)
 4 | [![License](https://img.shields.io/cocoapods/l/Sketch.svg?style=flat)](https://github.com/ArunaUd92/SUSketch)
 5 | [![Language: Swift 5.10](https://img.shields.io/badge/swift-5.10-4BC51D.svg?style=flat)](https://developer.apple.com/swift)
 6 | [![Swift Package Manager](https://img.shields.io/badge/Swift_Package_Manager-compatible-orange?style=flat-square)](https://www.swift.org/documentation/package-manager/)
 7 | 
 8 | SUSketch has basic functions for drawing from the beginning. Anyone can easily create drawing iOS Applications.
 9 | 
10 | ![](https://github.com/ArunaUd92/SUSketch/blob/main/Images/susketch%20view.png)
11 | ![](https://github.com/ArunaUd92/SUSketch/blob/main/Images/color-picker.png)
12 | 
13 | ## Features
14 | - [x] Pen tool
15 | - [x] Eraser tool
16 | - [x] Fill
17 | - [x] Brush
18 | - [x] Undo / Redo
19 | - [x] Draw on Camera / Gallery image
20 | - [x] Text
21 | 
22 | ## Requirements
23 | - Xcode 14
24 | - Swift 5.5+
25 | 
26 | ## Installation
27 | 
28 | Swift Package Manager
29 | 
30 | The [Swift Package Manager](https://www.swift.org/package-manager/) is a tool for automating the distribution of Swift code and is integrated into the swift compiler.
31 | 
32 | Once you have your Swift package set up, adding SUSketch as a dependency is as easy as adding it to the dependencies value of your Package.swift.
33 | 
34 | ```swift
35 | dependencies: [
36 |     .package(url: "https://github.com/ArunaUd92/SUSketch")
37 | ]
38 | ```
39 | 
40 | ## Privacy
41 | 
42 | `SUSketch` does not collect any data. A [privacy manifest file](https://developer.apple.com/documentation/bundleresources/privacy_manifest_files).
43 | 
44 | ## License
45 | 
46 | SUSketch is available under the MIT license. See the LICENSE file for more info.
47 | 


--------------------------------------------------------------------------------
/Sources/SUSketch/DrawingData.swift:
--------------------------------------------------------------------------------
 1 | //
 2 | //  DrawingData.swift
 3 | //  SUSketch
 4 | //
 5 | //  Created by Aruna Udayanga on 23/04/2024.
 6 | //
 7 | 
 8 | import SwiftUI
 9 | 
10 | struct TextElement: Identifiable, Equatable {
11 |     let id: UUID = UUID()
12 |     var text: String
13 |     var position: CGPoint
14 |     var color: Color
15 |     var fontSize: CGFloat
16 |     var isSelected: Bool = false
17 | }
18 | 
19 | // Observable class to manage and update drawing data.
20 | public class DrawingData: ObservableObject {
21 |     @Published var paths: [(path: Path, color: Color, isFilled: Bool, lineWidth: CGFloat)] = [] // Stores drawn paths.
22 |     @Published var currentTool: DrawingTool = .pen // Active drawing tool.
23 |     @Published var penColor: Color = .black // Default color for pen.
24 |     @Published var penWidth: CGFloat = 1.0 // Default width for pen.
25 |     @Published var brushWidth: CGFloat = 10.0 // Default width for brush.
26 |     @Published var image: Image? = nil // Optional image that can be added to the canvas.
27 |     @Published var texts: [TextElement] = [] // Array of text elements.
28 |     @Published var shapes: [ShapeElement] = [] // Array of shape elements.
29 |     @Published var currentShape: ShapeElement.ShapeType? // Currently selected shape
30 |     
31 |     
32 |     // Computed property to adjust the line width based on the current tool.
33 |     var currentWidth: CGFloat {
34 |         get {
35 |             switch currentTool {
36 |             case .pen:
37 |                 return penWidth
38 |             case .brush:
39 |                 return brushWidth
40 |             default:
41 |                 return 1.0 // Default width for other tools.
42 |             }
43 |         }
44 |         set {
45 |             switch currentTool {
46 |             case .pen:
47 |                 penWidth = newValue
48 |             case .brush:
49 |                 brushWidth = newValue
50 |             default:
51 |                 break
52 |             }
53 |         }
54 |     }
55 |     
56 |     // Array to store paths for undo functionality.
57 |     var history: [(path: Path, color: Color, isFilled: Bool, lineWidth: CGFloat)] = []
58 |     
59 |     // Adds a path to the paths array.
60 |     func addPath(_ path: Path, color: Color, isFilled: Bool = false, lineWidth: CGFloat = 5.0) {
61 |         paths.append((path, color, isFilled, lineWidth))
62 |     }
63 |     
64 |     // Undo the last drawing action.
65 |     func undo() {
66 |         if let last = paths.popLast() {
67 |             history.append(last)
68 |         }
69 |     }
70 |     
71 |     // Redo the last undone drawing action.
72 |     func redo() {
73 |         if let redoPath = history.popLast() {
74 |             paths.append(redoPath)
75 |         }
76 |     }
77 |     
78 |     // Clears all drawing data.
79 |     func clear() {
80 |         paths.removeAll()
81 |         history.removeAll()
82 |         shapes.removeAll()
83 |         texts.removeAll()
84 |     }
85 |     
86 |     // Adds a shape to the shapes array.
87 |     func addShape(_ shapeType: ShapeElement.ShapeType) {
88 |         let shape = ShapeElement(type: shapeType, position: CGPoint(x: 100, y: 100), size: CGSize(width: 100, height: 140), color: penColor)
89 |         shapes.append(shape)
90 |     }
91 | }
92 | 


--------------------------------------------------------------------------------
/Sources/SUSketch/SUSketchView.swift:
--------------------------------------------------------------------------------
  1 | //
  2 | //  File.swift
  3 | //
  4 | //
  5 | //  Created by Aruna Udayanga on 23/04/2024.
  6 | //
  7 | 
  8 | import SwiftUI
  9 | import PhotosUI
 10 | 
 11 | // SwiftUI view for a sketching app.
 12 | public struct SUSketchView: View {
 13 |     @StateObject private var drawingData = DrawingData() // Manages drawing data.
 14 |     @State private var currentPath = Path() // Current drawing path.
 15 |     @State private var lastLocation: CGPoint? // Last touch point.
 16 |     @State private var showImagePicker = false // Toggle for image picker.
 17 |     @State private var inputImage: UIImage? // Selected image.
 18 |     @State private var inputText: String = "" // User-entered text.
 19 |     @State private var showTextEditor: Bool = false // Toggle for text editor.
 20 |     @State private var textColor: Color = .black // Color for text.
 21 |     @State private var fontSize: CGFloat = 20 // Font size for text.
 22 |     @State private var cursorLocation: CGPoint = .zero
 23 | 
 24 |     public init() {} // Empty initializer for public struct.
 25 | 
 26 |     public var body: some View {
 27 |         GeometryReader { geometry in
 28 |             VStack {
 29 |                 // Header for tools like text editor and image picker.
 30 |                 SketchHeaderView(
 31 |                     showTextEditor: $showTextEditor,
 32 |                     inputText: $inputText,
 33 |                     textColor: $textColor,
 34 |                     fontSize: $fontSize,
 35 |                     showImagePicker: $showImagePicker,
 36 |                     inputImage: $inputImage,
 37 |                     drawingData: drawingData
 38 |                 )
 39 |                 // Main drawing area handling touch and drawing.
 40 |                 SketchBodyView(
 41 |                     drawingData: drawingData,
 42 |                     currentPath: $currentPath,
 43 |                     lastLocation: $lastLocation,
 44 |                     cursorLocation: $cursorLocation
 45 |                 )
 46 |                 // Footer for additional controls or status.
 47 |                 SketchFooterView(drawingData: drawingData)
 48 |             }
 49 |         }
 50 |     }
 51 | }
 52 | 
 53 | struct ContentView_Previews: PreviewProvider {
 54 |     static var previews: some View {
 55 |         SUSketchView()
 56 |     }
 57 | }
 58 | 
 59 | struct SketchBodyView: View {
 60 |     @ObservedObject var drawingData: DrawingData // Observes drawing data for changes.
 61 |     @Binding var currentPath: Path // Binding to the current drawing path.
 62 |     @Binding var lastLocation: CGPoint? // Binding to track last touch location.
 63 |     @State private var inputImage: UIImage? // Holds the image selected from the picker.
 64 |     @Binding var cursorLocation: CGPoint // Binding to track cursor location.
 65 |     
 66 |     
 67 |     var body: some View {
 68 |         ZStack {
 69 |             Canvas { context, size in
 70 |                 // Draw the input image if available.
 71 |                 if let uiImage = inputImage {
 72 |                     let image = Image(uiImage: uiImage)
 73 |                     image.resizable().aspectRatio(contentMode: .fit).frame(width: size.width, height: size.height)
 74 |                 }
 75 |                 // Render background or foreground images and fills.
 76 |                 if let image = drawingData.image {
 77 |                     context.draw(image, in: CGRect(x: 0, y: 0, width: size.width, height: size.height))
 78 |                 }
 79 |                 if drawingData.currentTool == .fill {
 80 |                     context.fill(Rectangle().path(in: CGRect(x: 0, y: 0, width: size.width, height: size.height)), with: .color(drawingData.penColor))
 81 |                 }
 82 |                 // Render each path with appropriate style.
 83 |                 for (path, color, isFilled, lineWidth) in drawingData.paths {
 84 |                     if isFilled {
 85 |                         context.fill(path, with: .color(color))
 86 |                     } else {
 87 |                         context.stroke(path, with: .color(color), lineWidth: lineWidth)
 88 |                     }
 89 |                 }
 90 |                 
 91 | //                // Render each shape with appropriate style.
 92 | //                for shape in drawingData.shapes {
 93 | //                    let rect = CGRect(origin: shape.position, size: shape.size)
 94 | //                    switch shape.type {
 95 | //                    case .triangle:
 96 | //                        let path = Path { path in
 97 | //                            path.move(to: CGPoint(x: rect.midX, y: rect.minY))
 98 | //                            path.addLine(to: CGPoint(x: rect.maxX, y: rect.maxY))
 99 | //                            path.addLine(to: CGPoint(x: rect.minX, y: rect.maxY))
100 | //                            path.closeSubpath()
101 | //                        }
102 | //                        context.stroke(path, with: .color(shape.color))
103 | //                    case .rectangle:
104 | //                        context.stroke(Rectangle().path(in: rect), with: .color(shape.color))
105 | //                    case .circle:
106 | //                        context.stroke(Circle().path(in: rect), with: .color(shape.color))
107 | //                    case .oval:
108 | //                        context.stroke(Ellipse().path(in: rect), with: .color(shape.color))
109 | //                    case .square:
110 | //                        let side = min(rect.width, rect.height)
111 | //                        let squareRect = CGRect(x: rect.origin.x, y: rect.origin.y, width: side, height: side)
112 | //                        context.stroke(Rectangle().path(in: squareRect), with: .color(shape.color))
113 | //                    }
114 | //
115 | //                }
116 |             }
117 |             
118 |             // Render draggable and resizable shape elements.
119 |             ForEach(drawingData.shapes.indices, id: \.self) { index in
120 |                 let shape = drawingData.shapes[index]
121 |                 GeometryReader { geometry in
122 |                     let rect = CGRect(origin: shape.position, size: shape.size)
123 |                     let handleSize: CGFloat = 20
124 |                     let handleOffset: CGSize = CGSize(width: shape.size.width + handleSize / 2, height: shape.size.height + handleSize / 2)
125 |                     
126 |                     ZStack {
127 |                         // Shape view
128 |                         Path { path in
129 |                             switch shape.type {
130 |                             case .triangle:
131 |                                 path.move(to: CGPoint(x: rect.midX, y: rect.minY))
132 |                                 path.addLine(to: CGPoint(x: rect.maxX, y: rect.maxY))
133 |                                 path.addLine(to: CGPoint(x: rect.minX, y: rect.maxY))
134 |                                 path.closeSubpath()
135 |                             case .rectangle:
136 |                                 path.addRect(rect)
137 |                             case .circle:
138 |                                 path.addEllipse(in: rect)
139 |                             case .oval:
140 |                                 path.addEllipse(in: rect)
141 |                             case .square:
142 |                                 let side = min(rect.width, rect.height)
143 |                                 let squareRect = CGRect(x: rect.origin.x, y: rect.origin.y, width: side, height: side)
144 |                                 path.addRect(squareRect)
145 |                             }
146 |                         }
147 |                         .stroke(shape.color)
148 |                         .position(shape.position)
149 |                         .gesture(
150 |                             DragGesture()
151 |                                 .onChanged { value in
152 |                                     drawingData.shapes[index].position = value.location
153 |                                 }
154 |                         )
155 |                         
156 |                         // Resize handle
157 |                         Rectangle()
158 |                             .fill(Color.blue)
159 |                             .frame(width: handleSize, height: handleSize)
160 |                             .position(x: shape.position.x + handleOffset.width, y: shape.position.y + handleOffset.height)
161 |                             .gesture(
162 |                                 DragGesture()
163 |                                     .onChanged { value in
164 |                                         let newSize = CGSize(width: value.location.x - shape.position.x - handleSize / 2, height: value.location.y - shape.position.y - handleSize / 2)
165 |                                         drawingData.shapes[index].size = newSize
166 |                                     }
167 |                             )
168 |                     }
169 |                 }
170 |             }
171 | 
172 |             
173 |             // Render draggable text elements.
174 |             ForEach(drawingData.texts.indices, id: \.self) { index in
175 |                 let textElement = drawingData.texts[index]
176 |                 Text(textElement.text)
177 |                     .font(.system(size: textElement.fontSize))
178 |                     .foregroundColor(textElement.color)
179 |                     .position(textElement.position)
180 |                     .gesture(
181 |                         DragGesture()
182 |                             .onChanged { value in
183 |                                 drawingData.texts[index].position = value.location
184 |                             }
185 |                     )
186 |                     .onTapGesture {
187 |                         for i in 0..<drawingData.texts.count {
188 |                             drawingData.texts[i].isSelected = false
189 |                         }
190 |                         drawingData.texts[index].isSelected = true
191 |                     }
192 |             }
193 |             
194 |             // Display the cursor based on the selected tool
195 |             if drawingData.currentTool != .fill {
196 |                 cursorView
197 |                     .position(cursorLocation)
198 |             }
199 |         }
200 |         .gesture(
201 |             DragGesture(minimumDistance: 0, coordinateSpace: .local)
202 |                 .onChanged { value in
203 |                     cursorLocation = value.location // Update cursor location
204 |                     switch drawingData.currentTool {
205 |                     case .pen, .brush:
206 |                         if currentPath.isEmpty {
207 |                             currentPath.move(to: value.startLocation)
208 |                             lastLocation = value.startLocation
209 |                         }
210 |                         if drawingData.currentTool == .brush {
211 |                             if let lastLocation = lastLocation {
212 |                                 let newPoint = value.location
213 |                                 let midPoint = CGPoint(x: (lastLocation.x + newPoint.x) / 2, y: (lastLocation.y + newPoint.y) / 2)
214 |                                 currentPath.addQuadCurve(to: midPoint, control: lastLocation)
215 |                                 currentPath.addLine(to: newPoint)
216 |                             }
217 |                         } else {
218 |                             currentPath.addLine(to: value.location)
219 |                         }
220 |                         lastLocation = value.location
221 |                     case .eraser, .fill:
222 |                         // Handle eraser, stamp, and fill tools.
223 |                         currentPath.addLine(to: value.location)
224 |                         lastLocation = value.location
225 |                     }
226 |                 }
227 |                 .onEnded { _ in
228 |                     // Finalize the drawing path when the gesture ends.
229 |                     let isErasing = drawingData.currentTool == .eraser
230 |                     let color = isErasing ? .white : drawingData.penColor
231 |                     let lineWidth = isErasing ? 10 : drawingData.currentWidth
232 |                     let isFilled = drawingData.currentTool == .fill
233 |                     drawingData.addPath(currentPath, color: color, isFilled: isFilled, lineWidth: lineWidth)
234 |                     currentPath = Path()
235 |                 }
236 |         )
237 |         .contentShape(Rectangle())
238 |         
239 |     }
240 |     
241 |     private var cursorView: some View {
242 |         Group {
243 |             switch drawingData.currentTool {
244 |             case .pen:
245 |                 Image(systemName: "pencil.tip")
246 |                     .resizable()
247 |                     .frame(width: 24, height: 24)
248 |                     .foregroundColor(.blue)
249 |             case .eraser:
250 |                 Image(systemName: "eraser")
251 |                     .resizable()
252 |                     .frame(width: 24, height: 24)
253 |                     .foregroundColor(.red)
254 |             case .brush:
255 |                 Circle()
256 |                     .fill(Color.blue.opacity(0.5))
257 |                     .frame(width: 24, height: 24)
258 |             default:
259 |                 EmptyView()
260 |             }
261 |         }
262 |     }
263 | 
264 | }
265 | 
266 | struct SketchHeaderView: View {
267 |     @Binding var showTextEditor: Bool // Toggles visibility of the text editor.
268 |     @Binding var inputText: String // Binds to the text input for annotations.
269 |     @Binding var textColor: Color // Binds to the selected text color.
270 |     @Binding var fontSize: CGFloat // Binds to the font size for text.
271 |     @Binding var showImagePicker: Bool // Toggles the image picker visibility.
272 |     @Binding var inputImage: UIImage? // Holds the selected image.
273 |     @ObservedObject var drawingData: DrawingData // Observes changes in drawing data.
274 |     @State private var draggedElement: TextElement?
275 |     @State private var dropAreaIndex: Int?
276 |     @State private var dragOffset: CGSize = .zero
277 |     @State private var showShapeSelection: Bool = false // State variable for shape selection modal
278 |     
279 |     var body: some View {
280 |         VStack {
281 |             // Top bar with text editor, image picker, and drawing tools
282 |             HStack(spacing: 20) {
283 |                 // Toggle text editor button
284 |                 Button(action: {
285 |                     showTextEditor.toggle()
286 |                 }) {
287 |                     Image(systemName: "textformat")
288 |                         .font(.title2)
289 |                         .foregroundColor(showTextEditor ? .blue : .primary)
290 |                 }
291 |                 
292 |                 // Open image picker button
293 |                 Button(action: {
294 |                     showImagePicker = true
295 |                 }) {
296 |                     Image(systemName: "photo.on.rectangle.angled")
297 |                         .font(.title2)
298 |                         .foregroundColor(.primary)
299 |                 }
300 |                 .sheet(isPresented: $showImagePicker, onDismiss: loadImage) {
301 |                     ImagePicker(image: $inputImage)
302 |                 }
303 |                 
304 |                 // Pen color picker
305 |                 ColorPicker("", selection: $drawingData.penColor)
306 |                     .labelsHidden()
307 |                     .frame(width: 40, height: 40)
308 |                     .clipShape(Circle())
309 |                 
310 |                 // Pen or brush width slider
311 |                 if drawingData.currentTool == .pen {
312 |                     Slider(value: $drawingData.penWidth, in: 1...6)
313 |                         .frame(width: 100)
314 |                 } else if drawingData.currentTool == .brush {
315 |                     Slider(value: $drawingData.brushWidth, in: 1...40)
316 |                         .frame(width: 100)
317 |                 }
318 |                 
319 |                 // Show shape selection modal button
320 |                 Button(action: {
321 |                     showShapeSelection = true
322 |                 }) {
323 |                     Image(systemName: "square.on.circle")
324 |                         .font(.title2)
325 |                         .foregroundColor(.primary)
326 |                 }
327 |                 .sheet(isPresented: $showShapeSelection) {
328 |                     ShapeSelectionView(drawingData: drawingData, isPresented: $showShapeSelection)
329 |                 }
330 |                 
331 |                 Spacer()
332 |             }
333 |             .padding()
334 |             .background(Color(.systemGray6))
335 |             .cornerRadius(10)
336 | 
337 |             // Text editor view
338 |             if showTextEditor {
339 |                 VStack {
340 |                     // Text input field
341 |                     TextField("Enter text here", text: $inputText)
342 |                         .textFieldStyle(RoundedBorderTextFieldStyle())
343 |                         .padding([.top, .leading, .trailing])
344 |                     
345 |                     HStack {
346 |                         // Text color picker
347 |                         ColorPicker("Text Color", selection: $textColor)
348 |                         
349 |                         // Font size slider
350 |                         Slider(value: $fontSize, in: 12...36, step: 1)
351 |                             .frame(width: 100)
352 |                             .padding([.leading, .trailing])
353 |                         
354 |                         // Add text element button
355 |                         Button(action: {
356 |                             addTextElement()
357 |                         }) {
358 |                             HStack(spacing: 4) {
359 |                                 Image(systemName: "plus.circle.fill")
360 |                                     .imageScale(.large)
361 |                                     .frame(height: 26)
362 |                                 Text("Add")
363 |                                     .font(.system(size: 15))
364 |                             }
365 |                             .frame(height: 45)
366 |                         }
367 |                         .padding(.trailing)
368 |                     }
369 |                     .padding([.bottom, .leading, .trailing])
370 |                 }
371 |                 .background(Color(.systemGray5))
372 |                 .cornerRadius(10)
373 |             }
374 |                 
375 |             
376 |         }
377 |         .padding()
378 |     }
379 |     // Function to add a new text element to the drawing canvas.
380 |     private func addTextElement() {
381 |         print("Adding text element: \(inputText)")
382 |         let textElement = TextElement(text: inputText, position: CGPoint(x: 150, y: 150), color: textColor, fontSize: fontSize)
383 |         drawingData.texts.append(textElement)
384 |         showTextEditor = false
385 |         inputText = "" // Resets the input field.
386 |     }
387 |     
388 |     // Loads the selected image into the drawing data.
389 |     private func loadImage() {
390 |         guard let inputImage = inputImage else { return }
391 |         drawingData.image = Image(uiImage: inputImage)
392 |     }
393 | 
394 | }
395 | 
396 | // Shape selection modal view
397 | struct ShapeSelectionView: View {
398 |     @ObservedObject var drawingData: DrawingData
399 |     @Binding var isPresented: Bool // Binding to control the modal's visibility
400 |     
401 |     var body: some View {
402 |         VStack {
403 |             Text("Select Shape")
404 |                 .font(.headline)
405 |                 .padding()
406 |             
407 |             ForEach([ShapeElement.ShapeType.triangle, ShapeElement.ShapeType.rectangle, ShapeElement.ShapeType.circle, ShapeElement.ShapeType.oval, ShapeElement.ShapeType.square], id: \.self) { shape in
408 |                 Button(action: {
409 |                     drawingData.addShape(shape)
410 |                     isPresented = false // Dismiss the modal after selecting a shape
411 |                 }) {
412 |                     HStack {
413 |                         Text(shape.description)
414 |                             .font(.title2)
415 |                             .foregroundColor(drawingData.currentShape == shape ? .blue : .primary)
416 |                         Spacer()
417 |                     }
418 |                     .padding()
419 |                     .background(drawingData.currentShape == shape ? Color(.systemGray5) : Color.clear)
420 |                     .cornerRadius(10)
421 |                 }
422 |                 .padding(.horizontal)
423 |             }
424 |             
425 |             Spacer()
426 |         }
427 |     }
428 | }
429 | 
430 | struct SketchFooterView: View {
431 |     @ObservedObject var drawingData: DrawingData // Observes changes in drawing data.
432 |     
433 |     var body: some View {
434 |         HStack(spacing: 20) {
435 |             // Undo button with icon
436 |             Button(action: {
437 |                 drawingData.undo()
438 |             }) {
439 |                 Image(systemName: "arrow.uturn.backward")
440 |                     .font(.title2)
441 |                     .foregroundColor(.primary)
442 |             }
443 |             
444 |             // Redo button with icon
445 |             Button(action: {
446 |                 drawingData.redo()
447 |             }) {
448 |                 Image(systemName: "arrow.uturn.forward")
449 |                     .font(.title2)
450 |                     .foregroundColor(.primary)
451 |             }
452 |             
453 |             // Clear button with icon
454 |             Button(action: {
455 |                 drawingData.clear()
456 |             }) {
457 |                 Image(systemName: "trash")
458 |                     .font(.title2)
459 |                     .foregroundColor(.red)
460 |             }
461 |             
462 |            // Spacer()
463 |             
464 |             // Drawing tools buttons
465 |             ForEach([DrawingTool.pen, DrawingTool.eraser, DrawingTool.brush, DrawingTool.fill], id: \.self) { tool in
466 |                 Button(action: {
467 |                     drawingData.currentTool = tool
468 |                 }) {
469 |                     VStack {
470 |                         Image(systemName: tool.iconName)
471 |                             .font(.title2)
472 |                             .foregroundColor(drawingData.currentTool == tool ? .blue : .primary)
473 |                         Text(tool.description)
474 |                             .font(.caption)
475 |                             .foregroundColor(drawingData.currentTool == tool ? .blue : .primary)
476 |                     }
477 |                 }
478 |             }
479 |             
480 |         }
481 |         .padding()
482 |         .background(Color(.systemGray6))
483 |         .cornerRadius(10)
484 |         .padding([.leading, .trailing, .bottom])
485 |         
486 |     }
487 | }
488 | 
489 | extension NSAttributedString {
490 |     func toImage(with size: CGSize) -> Image {
491 |         let renderer = UIGraphicsImageRenderer(size: size)
492 |         let image = renderer.image { context in
493 |             self.draw(in: CGRect(origin: .zero, size: size))
494 |         }
495 |         return Image(uiImage: image)
496 |     }
497 | }
498 | 


--------------------------------------------------------------------------------