Make joint.js editing not rely on clicking on the class icon at the top left of each class

[TimLethbridge]

Currently to move a class around in a joint.js class diagram you have to click on the little class icon at the top left of the class box. Clicking anywhere else does not work. It should be possible to drag anywhere in the class box to move a class; all graphics editors I am aware of would allow moving by placing the cursor anwhere; the current way it works is not 'discoverable'. Take a look at how moving works in the older editable class diagrams. The only time you can drag a class is after clicking to edit and bringing up and edit box.

Similarly, if you are trying to add an association, you have to first click on the 'Assocation' icon, then cllick on the little icons at the top left of the two class boxes. You should be able to click anywhere in the class boxes.

This issue is spun off from #600 -- which is the master issue for joint.js.

[runqingz]

Hi, @TimLethbridge. I investigated the JointJs Api and our implementation today and here are a few things I would like to comment on this issue.

1. The current implementation is not actually clicking the small class icon, it is in fact clicking that specific region will trigger the event that switch to state diagram (if state machine exists).
2. I believe the reason it is implemented like this is that so far, JointJs does not accept image as a a part of the class view rectangle but a children element (different layer). So binding event to image can not really trigger any JointJs specific events. Thus the way our currently implementation working is, bind that action to the region of class view rectangle where the icon is supposed to be, and not allowing that icon catching event, but the parent rectangle region.
3. Same problem applies to input field, which jointJs does not support at the moment. I tried pointer-event option and investigate the demo example JointJs has provided (UML class diagram). What I found are:
   (1) It is possible to make all input text fields draggable with the rectangle, however this involves some dirty JQuery calls to enable draggable, since the input field is a standard html text input element, not any JointJS provided element (the default editable graph, in contrast, has its own 'editable' version of input field)
   (2) If we want to make all JointJS graph specific event triggered when clicking on input field(e.g. link/add new association), we have to disable the input box catching any mouse related event so all these point event will caught by underlying rectangle. However this will make the input field become a plain text field (in fact all graph demos provided by JointJS do not have a editable text field). However, I feel like it is possible to work around by disable mouse triggered editing but add a new short cut key to enable editing text field.

So I think a few potential fixes to this issue I am proposing here are:

1. Wait for JointJs to provide support editable text field. (The way they are doing this right now is that they implement a side tool bar on the right most side of the window which has a input box allows you to modify the text in the graph after selecting a box https://resources.jointjs.com/demos/kitchensink).
2. Add JQuery calls to make the input field draggable (but not really fixing issue that input box does not catch actions such add association)
3. Disable mouse event triggering but add short cut key to make the input field.

However, none of this is a really satisfying solution, so I would be really appreciate if you can comment on this when you have the time.

[TimLethbridge]

Some comments on this:
regarding 3(2) "we have to disable the input box catching any mouse related event so all these point event will caught by underlying rectangle. However this will make the input field become a plain text field ... work around by disable mouse triggered editing but add a new short cut key to enable editing text field". The problem with this is that this is not 'discoverable' and is inconsistent with other user interfaces and too awkward. Don't use a key. However, if there is no way to allow single or even double-click to edit, then perhaps an icon with a pencil could be placed by the field to enable editing. This is still inferior to what we have in the legacy 'editable class diagrams', but might be a doable compromise.

The 'side panel' approach is not desirable. That is a step back and is something I have been wanting to avoid in Umple. We made a decision 10 years ago that we would not do that. It is one of the reasons for the complexity of other tools.

One option is to actually contribute to joint.js itself as a projet! Clearly joint.js has weaknesses currently. But for now I think the option is to see if we can add a pencil icon next to the garbage icon in the class box.

[runqingz]

@TimLethbridge FYI, this approach will end up making that pencil icon not triggering any actions related to underlying class rectangle (e.g. dragging, adding associations). This is true for the current delete icon in joint.js diagram.