Description
When attempting to drag and drop a new command into the program, there is no indication of where the command can be “dropped”.
@@Antranig Basman pointed this out when I asked him to try something in the coding environment earlier.
Comments
-
Tony Atkins [RtF] commented
2020-12-10T04:53:54.364-0500 https://github.com/codelearncreate/c2lc-coding-environment/pull/114
-
Tony Atkins [RtF] commented
2020-12-15T04:44:32.965-0500 We discussed this in yesterday’s meeting and I mentioned that I need some design input. I wanted to record some notes here for @@Sepideh Shahi and others. We need to be able to indicate a few key things:
- What is being dragged.
- Where it can be dropped.
- What the result will be if it is dropped at the current position.
Currently we only have the first, i.e. it’s clear when you drag a particular command that you are adding that command and not any other.
I have been working to make it so that individual “add nodes” as well as their surrounding region can accept dragged commands. When dropping on the region, it determines the position of the closest “add node” and adds a command at that position. One option might be to highlight the whole region and the nearest “add node”. Another might be to darken everything but the region that can accept dragged items, and to highlight the “add node” that will be used if the command is released at the current position. I’m sure there are other options as well.
Dragging over an individual “add node” will currently expand it if it’s not already expanded. I think it’s a good idea to do something similar when that “add node” is the closest in the region. I’m not sure how best to accomplish this in React, It would be helpful to have a pairing session with @@Simon Bates and/or @@Daniel Cho to talk through approaches.
-
Tony Atkins [RtF] commented
2020-12-15T05:46:59.556-0500 I figured out an approach to highlighting and expanding (if needed) the “nearest add node”, although it definitely needs review.