Guide Users to Create Valid Relationships

[danyeaw]

This issue is part of the wider epic to make it more clear that Gaphor has an underlying data model and that it isn't just a drawing tool.

I'm submitting a...

• [ ] Bug report
• [X] Feature request
• [ ] Documentation issue or request

Current behavior

It isn't very apparent that Gaphor is constraining which elements a relationship can connect to. You can only really tell that it was connected after you fully drop the relationship and it turns red. I also don't think the green and red relationship ends are very obvious to a new user or clear what they mean

Expected behavior

1. When you select a relationship from the palette, it should gray out (50% opacity) anything that it isn't allowed to connect to.
2. Once you hover over any valid object it should highlight the object (potentially in green), if you hover over an invalid object it should highlight it in red
3. Starting the drag anywhere on top of a valid element should make the connection (not just the border). Starting a drag over an invalid element should be ignored
4. Once you have connected the head of the relationship, it should gray out anything that the tail can't connect to
5. If there is only one valid element to connect to, it should show an icon for that element to coach the user
6. Hovering over a valid object should highlight it as well
7. Dropping anywhere over the valid object should complete the connection. Dropping over an invalid object should create a new node in the path.

I would also want similar behavior when moving one end of a relationship to another element. I think we could then remove the colors from the ends of the relationships, because then there would be no way to create an unconnected relationship.

Minimal reproduction of the problem with instructions

If this is a feature request please fill out the following:

As a user:
I want to be guided on what relationships are valid:
So that it is very clear that there is a data model constraining what I can draw,
so that it is easier to model,
and so that there are no unglued relationships in the model:

NOTES:

[amolenaar]

Hovering over a valid object should highlight it as well

@danyeaw Do you think the connection should be placed at the intersection of the line and the port? Or should the line point to the center of the object (when you drag the element, the line keeps pointing at the center)? Or maybe a combination of both?

[danyeaw]

Do you think the connection should be placed at the intersection of the line and the port? Or should the line point to the center of the object

@amolenaar I think the intersection of the line and the port.

[amolenaar]

@danyeaw Thanks. That would be the easy one to get started with :).

[amolenaar]

1. When you select a relationship from the palette, it should gray out (50% opacity) anything that it isn't allowed to connect to.
2. Once you hover over any valid object it should highlight the object (potentially in green), if you hover over an invalid object it should highlight it in red
3. Starting the drag anywhere on top of a valid element should make the connection (not just the border). Starting a drag over an invalid element should be ignored
4. Once you have connected the head of the relationship, it should gray out anything that the tail can't connect to
5. If there is only one valid element to connect to, it should show an icon for that element to coach the user
6. Hovering over a valid object should highlight it as well
7. Dropping anywhere over the valid object should complete the connection. Dropping over an invalid object should create a new node in the path.

1. Done
2. For highlight we can use the current "drop zone" feature. The item will then highlight in the default highlight color (blue). I think that's more consistent than introducing another color.
3. See comment below
4. Done
5. I wonder if that's obvious. We change the icon when a new item of that type will be created. If we also change it on drag, it may be confusing.
6. It can be marked as a drop zone, like 2.
7. I do not think we should create extra nodes automagically. Inkscape has a behavior like that, and I find myself fighting it every time. See also comment below

Starting and stopping a drag over objects

This kinda depends on how we will approach connections. I see two approaches:

1. Using ports, as is currently done in Gaphas: we find the intersection between handle[0] and handle[1] (or -1, -2) and one port on the edge of an element, and place the connection at that point.
2. We introduce an ElementPort that will place the line handle (0/-1) on the edge of the element.

Both approaches will require one line handle inside, and one handle outside the element. With the second approach we can ensure the handle segment that connects to the element is always pointing to the center of the element, which may be nice when the other end of the line is moved.

Anyhow, when a user connects an to an edge of an element, I think we should support the current behavior.

In both cases we should prevent both ends of the line to connect to the same element (e.i. both ends are inside the same element).

I see these scenario's:

• [ ] Line is placed or dragged outside of an element
• [ ] Line is placed or dragged, both handles are inside an element
• [ ] Line end is dragged, line head is inside element, line tail is outside
• [ ] Line end is dragged, line head is outside element, line tail is inside
• [ ] Line end is dragged, line head is inside element and line tail is in another element
• [ ] Same as above, but line head and/or tail is on the edge of an element ( = current behavior)

These scenario's do not apply to line-line connections.

Other things

• [ ] Saving and loading models should be aware of which port a connection was connected to
• [ ] Test what happens when segments are added to a line?

@danyeaw I have a preference for the second option. I expect it to give a better user experience. What do you think?

[danyeaw]

@amolenaar Awesome work so far on this, it is already much improved!

Both approaches will require one line handle inside, and one handle outside the element. With the second approach we can ensure the handle segment that connects to the element is always pointing to the center of the element, which may be nice when the other end of the line is moved.

I was expecting that as soon as the handle snaps to the edge that Gaphor forgets that the user released it at the center of the element at all. I think this would be more consistent because I don't think there would be anything to visually show a user that they originally placed the handle inside the element (nor would it be important to show this once the line connection is made). I was also expecting the first option to be easier to implement.

[amolenaar]

I think most of the updates will be in Gaphas.

The ConnectionSink should determine which port is applicable, given a handle position (and secondary position, so we can determine crossings).

[danyeaw]

Closed by #610, awesome job @amolenaar!