search

jsGanttImproved / jsgantt-improved

Javascript Gantt: fully featured gantt chart component built entirely with JS and CSS. No images or external libs required.
https://jsganttimproved.github.io/jsgantt-improved
Other
480 stars 249 forks source link

Add "Connect Mode" #240

Open bitflower opened 5 years ago

bitflower commented 5 years ago

Feature:

I have build a "Connect Mode" feature by using the afterDraw hook. However I thought this would be cool to be integrated natively.

Description:

The user hovers a bar => the 2 "connect dots" appear. The user clicks either of them => this activates the connect mode. The user then clicks the "target" task to create the connection => an event is fired (I use it in Angular to update the data model). After that the connect mode exists.

The same mechanism applies to disconnecting.

It needs a few improvement iterations for sure - both UX and testing wise. For example the dots should appear in connect mode. Also the little bottom tooltip text should be customizable etc.

This mode works without dragging on purpose because I don't like dragging solutions in this case. The controls and bars are so tiny and not easy to target with the mouse. Therefore we prefer to have simple clicks.

Thoughts?

gantt-connect-mode

mariohmol commented 5 years ago

thats great!! can u put this in a Pull Request?

nidu commented 5 years ago

This looks really impressive! My only question is how would it look for short tasks where two markers can hardly fit (not sure that's the case for others)?

mariohmol commented 5 years ago

thats a good question @nidu .. maybe a kind of zoom in and out feature, might help