Highlight toolbox if something could drop into it

[samreid]

I considered adding a feature that makes it clear whether something would drop in a toolbox. Perhaps the toolbox should highlight if something (that it accepts) is dragged across it. I'm not aware of this being a problem, but it could be a nice embellishment to the simulations.

@arouinfar @ariel-phet have we done anything like this before? If we do something here, how should it look?

[arouinfar]

@samreid I am not aware of this behavior in any of our published sims, but I do like the general idea. However, this is not a feature necessary for the MVP, so we don't need to worry about it just yet.

I'll tag it for design meeting, so that we can discuss it for future iterations.

[samreid]

It will be simple enough to experiment with a border highlight when an object is dragged over the toolbox. Assigned to myself to try it out. After I have a proposed implementation, we can review and discuss it.

[samreid]

This looks akin to the scenery problem of detecting if any pointer is over a node. In CCK, there are many draggable objects, and we would want to highlight the box if any one is over it. So we would need either (a) a persistent list of objects that can be observed and with which we must be careful to make sure items get removed when dropping into the box or moving out of the box, or when reset all is pressed. or (b) each frame the count could clear out, then items over the box can register themselves and during the draw step, it could count the number of over components or (c) each circuitElement can have a isOverToolbox property, and emitters could fire to count them when any value changes.

[samreid]

I added this property in Circuit.js

    this.isCircuitElementOverToolboxProperty = new Property( false );
    var counter = function() {
      var circuitElements = self.circuitElements;
      for ( var i = 0; i < circuitElements.length; i++ ) {
        var element = circuitElements[ i ];
        if ( element.isOverToolboxProperty.get() ) {
          self.isCircuitElementOverToolboxProperty.set( true );
          return;
        }
      }
      self.isCircuitElementOverToolboxProperty.set( false );
    };
    this.wires.addItemAddedListener( function( wire ) {
      wire.isOverToolboxProperty.link( counter );
    } );
    this.wires.addItemRemovedListener( function( wire ) {
      wire.isOverToolboxProperty.unlink( counter );
      counter();
    } );

It is working well, except the toolbox highlights right when the user starts dragging an object for the first time. That is because you can click and release an object in the toolbox and it will fall back into the toolbox. This raises the following questions:

• Maybe you should not be able to drop an object back in the toolbox unless you have moved it out of the toolbox. If you click and release over the toolbox, it could bump the element to the side (out of the toolbox). This could help users that click toolbox circuit elements instead of dragging them.

• Maybe it should only highlight the toolbox for dropping an item after the item has been moved outside of the toolbox bounds. However, this means we would have to keep track of whether items start inside the toolbox or not (on creation), and I'm not sure whether this complexity is warranted.

Here's a video of what the highlight-on-over looks like:

[samreid]

Here's the spurious highlight on creation:

[samreid]

@arouinfar before I proceed on this, I'd like to discuss this question: Should the user be able to drop the circuit element back in the toolbox right away? What should happen if the user clicks and releases on a circuit element over the toolbox?

[samreid]

I decided to commit my intermediate work on this.

[arouinfar]

Should the user be able to drop the circuit element back in the toolbox right away? What should happen if the user clicks and releases on a circuit element over the toolbox?

@samreid yes. If the user clicks, the object is grabbed (full size) but can immediately be dropped back into the toolbox -- like the tools in Bending Light.

[samreid]

After using it for a few days, the immediate highlight is still annoying, but not as bad as I expected. Still, it would be good to wait until we convene on #224 before deciding how to address this issue.

[samreid]

This and potentially other toolbox design issues will be discussed in phetsims/scenery-phet#289

[arouinfar]

@samreid based on the discussion at design meeting last week, I don't think we'll be moving ahead with the outline, so I'll go ahead and close this issue.