UPGRADE YOUR SKILLS: Learn advanced Swift and SwiftUI on Hacking with Swift+! >>

SOLVED: Prevent drawing outside of view bounds

Forums > SwiftUI

Hi all,

First post here and thought I'd say thanks for such a great resource, it's really helping me learn Swift and SwiftUI. I've years of software development under my belt but this is the first time I've ventured onto the mac and it's a novel experience :)

The app I'm building allows the user to create nodes by clicking the Add Node button in the top control panel. These items are shown, linked by lines in the Main Panel below, and can be dragged around (following this sites gesture tutorial video); clicking on the name of a node displays its details in the panel to the right. The panels, and nodes, are all separate views nested in a top level view.

The problem I'm having can be seen in the picture below (if I can get that to show ;) ), namely that if I drag one of my nodes outside of the Main Panel view, it still draws the node and connecting lines. In simple terms (hah!) I guess it requires boundary checking, though the intention is to later allow zooming in and out and thus scrolling of the workspace of that view meaning that even if the nodes were outside of the bounds and wouldn't be drawn I'd lose the lines. Any suggestions would be appreciated - even if it's to tell me I'm doing it all wrong :)

Screenshot-2022-02-18-at-06-28-14.png

Thanks,

Jes

2      

Jes writes:

The problem I'm having can be seen in the picture below (if I can get that to show ;) ), namely that if I drag one of my nodes outside of the Main Panel view, it still draws the node and connecting lines.

From your message title, it seem you want your program to prevent the node from being dragged past the boundaries?

You might take an hour or so and read up on GeometryReader. In other answers I've likened GeometryReader to a real estate agent who tells you the dimensions of every room you walk into. In short, consider using a geometry reader to find the dimensions of your MainPanel DrawingPanel view.

Somewhere in your NodeView's .onDrag code you can compare the node's drag offset or location to its parent's geometry. Then you can have fun making your iDevice vibrate when you hit a boundary!

2      

Hi Obelix,

Thanks for the response, it'll certainly resolve the first part of the problem. I'll revisit when I need to zoom in and out of the main panel.

Jes

2      

BUILD THE ULTIMATE PORTFOLIO APP Most Swift tutorials help you solve one specific problem, but in my Ultimate Portfolio App series I show you how to get all the best practices into a single app: architecture, testing, performance, accessibility, localization, project organization, and so much more, all while building a SwiftUI app that works on iOS, macOS and watchOS.

Get it on Hacking with Swift+

Sponsor Hacking with Swift and reach the world's largest Swift community!

Archived topic

This topic has been closed due to inactivity, so you can't reply. Please create a new topic if you need to.

All interactions here are governed by our code of conduct.

 
Unknown user

You are not logged in

Log in or create account
 

Link copied to your pasteboard.