Scissor icon on touch devices

[Denz1994]

There is a scissor icon that is shown when a user hovers the cursor over a bond. This indicates that it can be broken and clicking over the bond produces a "cutting" animation by the scissors.

As mentioned by @ariel-phet, this may need to change for touch devices because a user can't hover the cursor over the bond. It is a press event that occurs.

@terracoda Also mentioned that keyboard navigability should be considered for these reasons as well.

[Denz1994]

Potential solution: On a down touch event, show the scissor as open. Then once released, show the scissor as closed for a brief moment. I think we would want to avoid touch snagging for this operation. Or atom manipulation in general.

For keyboard nav, the process could follow the same paradigm. If a bond is highlighted, then show the scissors. When the press event occurs, then show closed scissors and "cut" the bond.

This would cause bond breaking to have 3 modalities for cursors, touch events, and keyboard events. Could we determine the type of input from Scenery.Event.domEvent @jonathanolson and handle the behavior accordingly?

[ariel-phet]

I think this issue needs to be discussed at design meeting, to properly think through the possibilities.

Thanks for the thoughts above @Denz1994, a good jump off point for the discussion.

[arouinfar]

Discussed in 11/27/19 design meeting.

We would like to have a common touch and mouse UX. The cut interactions in ESP(B) and CCK have worked well, and we would like to try something parallel. We discussed a few options

1. Tap atom and get up to 4 scissor buttons around it
2. Tap atom and neighbors light up
3. Tap atom, add dashed line orthogonal to bonds with scissor button next to the line

Self-assigning to mock up some options before our next discussion.

[Denz1994]

From status meeting 12/05/19 @terracoda mentioned:

Denzell, I think that separation feature would work with keyboard - the ones in CCK and ESP.

[Denz1994]

The model elements for the cutting nodes have been implemented. This is ready for visual fine-tuning @arouinfar.

[Denz1994]

Noting for @samreid: The moleculeBondNode includes a scissor icon. The .cur files for the scissor cursor will still need to be supported as a module import during the ES6 module conversion work.

[arouinfar]

In the 1/30/20 design meeting, we decided that we like the general direction of current behavior, including the scissor cursor on hover.

I mocked up a few changes to make the nodes look more interactive. The yellow dots are now 50% the size of hydrogen, with an added halo that makes the entire thing 75% the size of hydrogen. I've also added dashed lines for extra cueing. The touch areas should as large as physically possible without overlapping.

[Denz1994]

@arouinfar Can you review this dev version and critique the bond node visuals?

[arouinfar]

This is looking really nice @Denz1994! My one nit-picky comment is that the dashed lines look slightly off-center. I realize they are probably centered correctly, but the dash spacing creates an illusion that they are not. Can you look into it?

[Denz1994]

Good catch. The dashed line spacing needed to be slighting adjusted. Master should be updated for review @arouinfar.

[arouinfar]

It's looking much better now, thanks @Denz1994.