DoodleBUGS: Allow plate resizing

[shravanngoswamii]

Right now, if you try to move a node out of a plate, the plate automatically resizes to follow it. The node only gets removed if you drop it outside the plate's original area. We have some visual cues for this: the node's background becomes red when it's far enough away to be removed (the outThreshold is 30px), and a plate's border turns yellow when you can drop a node into it.
I added this behavior as a feature, but is it weird? It kind of feels like the plate visually fights you when you're trying to remove a node. 😅

One better way to do this as @nsiccha suggested, might be to lock the plate's size as soon as you start dragging. The plate wouldn't resize at all while you're moving the node. Once you drop it, the plate would then correctly resize to fit its remaining children.

What do you think? Which way feels more natural? Should the plate resize as you drag, or should it lock in place?

[shravanngoswamii]

There is an plugin in Cytoscape for node editing (https://github.com/iVis-at-Bilkent/cytoscape.js-node-editing) -- We can use this for implementing plate resize feature!

[shravanngoswamii]

As suggested by @sunxd3:

I like coupling the plate with the nodes in it. One of the annoying element of the original DoodleBUGS' UI is that the plate and nodes are separate, so if you want to move a plate with all the nodes in it, you would need to move every individual element.
I don't particularly like the way a node is dragged out of the plate now. In my view, one issue is that if a user want to resize the plate, the only way they have is to drag a node, but if they drag too far, the node is moved out of the plate, so the resizing operation is limited.
An option might be when you hold a key (on keyboard), the node is dragged out of the plate? Although this might not be intuitive.

Only allow node removal from plate when certain key on keyboard is pressed!