How to pass data object among views so its values can be modified?

Question

I have created an object that represents the current state of drawing:

class ColoringImageViewModel: ObservableObject {
    @Published var shapeItemsByKey = [UUID: ShapeItem]()
    var shapeItemKeys: [UUID] = []
    var scale: CGFloat = 0
    var offset: CGSize = CGSize.zero
    var dragGestureMode: DragGestureEnum = DragGestureEnum.FillAreas
    @Published var selectedColor: Color?
    var selectedImage: String?
    
    init(selectedImage: String) {
        let svgURL = Bundle.main.url(forResource: selectedImage, withExtension: "svg")!
        let _paths = SVGBezierPath.pathsFromSVG(at: svgURL)
        for (index, path) in _paths.enumerated() {
            let scaledBezier = ScaledBezier(bezierPath: path)
            let shapeItem = ShapeItem(path: scaledBezier)
            shapeItemsByKey[shapeItem.id] = shapeItem
            shapeItemKeys.append(shapeItem.id)
        }
    }
}

The main view is composed of multiple views - one for image and one for color palette among others:

struct ColoringScreenView: View {
    @ObservedObject var coloringImageViewModel : ColoringImageViewModel = ColoringImageViewModel(selectedImage: "tiger")
    var body: some View {
        VStack {
            ColoringImageView(coloringImageViewModel: coloringImageViewModel)
            ColoringImageButtonsView(coloringImageViewModel: coloringImageViewModel)
        }
    }
}

The ColoringImageButtonsView is supposed to modify the selected color depending on selected color:

import SwiftUI

struct ColoringImageButtonsView: View {
    @ObservedObject var coloringImageViewModel : ColoringImageViewModel
    var paletteColors: [PaletteColorItem] = [PaletteColorItem(color: .red), PaletteColorItem(color: .green), PaletteColorItem(color: .blue), PaletteColorItem(color: .yellow), PaletteColorItem(color: .purple), PaletteColorItem(color: .black), PaletteColorItem(color: .red), PaletteColorItem(color: .red), PaletteColorItem(color: .red)]
    var body: some View {
        HStack {
            ForEach(paletteColors) { colorItem in
                Button("blue", action: {
                    self.coloringImageViewModel.selectedColor = colorItem.color
                    print("Selected color: \(self.coloringImageViewModel.selectedColor)")
                }).buttonStyle(ColorButtonStyle(color: colorItem.color))
            }
        }
    }
}

struct ColorButtonStyle: ButtonStyle {
    var color: Color
    init(color: Color) {
        self.color = color
    }
    func makeBody(configuration: Configuration) -> some View {
        Circle()
            .fill(color)
            .frame(width: 40, height: 40, alignment: .top)
    }
}

struct ColoringImageButtonsView_Previews: PreviewProvider {
    static var previews: some View {
        var coloringImageViewModel : ColoringImageViewModel = ColoringImageViewModel(selectedImage: "tiger")
        ColoringImageButtonsView(coloringImageViewModel: coloringImageViewModel)
    }
}

In ShapeView (subview of ImageView), it seels that coloringImageViewModel.selectedColor is always nil:

struct ShapeView: View {
    var id: UUID
    @Binding var coloringImageViewModel : ColoringImageViewModel
    var body: some View {
        ZStack {
            var shapeItem = coloringImageViewModel.shapeItemsByKey[id]!
            shapeItem.path
                .fill(shapeItem.color)
                .gesture(
                    DragGesture(minimumDistance: 0, coordinateSpace: .global)
                        .onChanged { gesture in
                            print("Tap location: \(gesture.startLocation)")
                            guard let currentlySelectedColor = coloringImageViewModel.selectedColor else {return}
                            shapeItem.color = currentlySelectedColor
                        }
                )
                .allowsHitTesting(coloringImageViewModel.dragGestureMode == DragGestureEnum.FillAreas)
            shapeItem.path.stroke(Color.black)
        }
    }
}

I have been reading about @Binding, @State and @ObservedObject but I haven't managed to use the property wrappers correctly in order to hold the states in a single instance of an object (ColoringImageViewModel) and modify/pass its values among multiple views. Does anyone know what is the right way to do so?

Answer 1

I made a Swift Playground with what I think is a simplified version of your problem. It shows how you can leverage @ObservedObject, @EnvironmentObject, @State and @Binding depending the context to achieve your goal.

If you run it you should see something like this:

Notice in the code below how the instance of ColoringImageViewModel is actually created outside of any views so that it does not get caught in the view's lifecycle.

Also check out the comments next to each piece of state data that explain the different usage scenarios.

import SwiftUI
import PlaygroundSupport

// Some global constants
let images = ["circle.fill", "triangle.fill", "square.fill"]
let colors: [Color] = [.red, .green, .blue]

/// Simplified model
class ColoringImageViewModel: ObservableObject {
    
    @Published var selectedColor: Color?
    
    // Use singleton pattern to manage instance outside view hierarchy
    static let shared = ColoringImageViewModel()
}

/// Entry-point for the coloring tool
struct ColoringTool: View {
    
    // We bring 
    @ObservedObject var model =  ColoringImageViewModel.shared
    
    var body: some View {
        VStack {
            ColorPalette(selection: $model.selectedColor)
            // We pass a binding only to the color selection
            
            CanvasDisplay()
            .environmentObject(model)
            // Inject model into CanvasDisplay's environment
            
            Text("Tap on an image to color it!")
        }
    }
}

struct ColorPalette: View {
    
    // Bindings are parameters that NEED to be modified
    @Binding var selection: Color?
    
    var body: some View {
        HStack {
            Text("Select a color:")
            ForEach(colors, id: \.self) { color in
                Rectangle()
                .frame(width: 50, height: 50)
                .foregroundColor(color)
                .border(Color.white, width:
                    color == self.selection ? 3 : 0
                )
                .onTapGesture {
                    self.selection = color
                }
            }
        }
    }
}

/// Displays all images
struct CanvasDisplay: View {
    
    // Environment objects are injected by some ancestor
    @EnvironmentObject private var model: ColoringImageViewModel
    
    var body: some View {
        HStack {
            ForEach(images, id: \.self) {
                ImageDisplay(imageName: $0, selectedColor: self.model.selectedColor)
            }
        }
    }
}

/// A single colored, tappable image
struct ImageDisplay: View {
    
    let imageName: String // Constant parameter
    let selectedColor: Color? // Constant parameter
    @State private var imageColor: Color? // Internal variable state
    
    var body: some View {
        Image(systemName: imageName)
        .resizable()
        .aspectRatio(contentMode: .fit)
        .foregroundColor(
            imageColor == nil ? nil : imageColor!
        )
        .onTapGesture {
            self.imageColor = self.selectedColor
        }
    }
}

PlaygroundPage.current.setLiveView(ColoringTool())

Answer 2

You don't show where you use ShapeView in ImageView, but taking into account logic of other provided code model should be ObservedObject

struct ShapeView: View {
    var id: UUID
    @ObservedObject var coloringImageViewModel : ColoringImageViewModel

    // ... other code