Constrained linking by dynamic distance calculation

Hello, I have a very basic use case that’s brought me into the Javascript world and evaluating GoJS. My background is Electrical Engineering and I have minimal Java experience.

My application is an interactive floor plan that visually shows a personal wireless network. I’d like to be able to drag several (up to 4 or 5) objects around the floor plan and have the links dynamically appear based on the distance between objects. So as you drag an object “within” range, it simply draws the link. It would be nice to have some text and some other basic controls associated with each node as well.

I’ve seen several examples that are related, but far too complicated. Is there an easy way to do the following key components of my use case:

  1. Calculate distance between two nodes (I’m close to this)
  2. Dynamically draw links based on distance mentioned above (must appear/reappear as user is dragging the object)
  3. Can you have an object have “on/off” properties by clicking the object, such that the line will only appear if the object is “on” and “within range”?

Thank you! -Zach

Do you have some before-and-after sketches or screenshots of the behavior that you are looking for?

The diagram above is a basic floor plan with several low-power wifi gateways (blue rectangles) placed around the house. I’d like an interactive diagram, much like the ones in the example, where there are lines that appear between the person and the wifi gateways when the person is close to the gateways. In one case, I would envision the nearest line overwriting the pervious one, but in other use cases I’d like to have any line within a certain distance appear. For example, the diagram below shows what you’d expect as the person enters the garage.

Also, I’m starting off with the “Minimal” example and have this so far. Again, the links are just statically defined and not based on distance, and I haven’t added any of the on/off logic or floor plan.

Here you go: While Dragging Automatically Connect a Link with the Nearest Node

Wow thats perfect! How do I access the source code that generated that?

It’s right there on the page, in a script element, like almost all of our samples.