coordinateSpace

.coordinateSpace(name: string): Component;

ScrollView([
    ForEach(items, (item) =>
        Text(item.name)
            .background(
                GeometryReader({ content: (geometry) =>
                    Rectangle()
                        .fill(Color("blue").opacity(
                            geometry.frame("scroll").minY > 0 ? 0.2 : 0
                        ))
                })
            )
    )
]).coordinateSpace("scroll")

VStack([
    Text("Header"),
    ZStack([
        Rectangle().fill(Color("background")),
        DragGesture()
            .onChanged((value) => {
                const location = value.location
                // location is relative to "container" coordinate space
            })
    ]).coordinateSpace("container")
])

VStack([
    HStack([
        Rectangle()
            .coordinateSpace("leftPanel"),
        Rectangle()
            .coordinateSpace("rightPanel")
    ]).coordinateSpace("mainContainer")
])

Rectangle()
    .fill(Color("red"))
    .onDragGesture((value) => {
        // Drag locations relative to "canvas" coordinate space
        const canvasLocation = value.location
    })
    .coordinateSpace("canvas")

ZStack([
    Rectangle()
        .fill(Color("blue"))
        .position(animationPosition),
    
    Button("Animate", () => {
        withAnimation(() => {
            // Animate to specific position in "animationSpace"
            animationPosition = { x: 100, y: 200 }
        })
    })
]).coordinateSpace("animationSpace")

VStack([
    ScrollView([
        VStack([
            Text("Content in nested space")
        ]).coordinateSpace("content")
    ]).coordinateSpace("scroll")
]).coordinateSpace("main")

ZStack([
    Canvas({ content: (context) => {
        // Drawing relative to "drawingArea" coordinate space
        context.stroke(path, Color("black"))
    } }),
    
    DragGesture()
        .onChanged((value) => {
            // Add point relative to "drawingArea"
            addDrawingPoint(value.location)
        })
]).coordinateSpace("drawingArea")

HStack([
    Text("Measure me")
        .background(
            GeometryReader({ content: (geometry) =>
                Rectangle()
                    .onAppear(() => {
                        const frame = geometry.frame("measurement")
                        recordMeasurement(frame.size)
                    })
            })
        )
]).coordinateSpace("measurement")