The only JavaScript of GanttEx: a colocated LiveView hook named
"GanttEx.Live.Hook.Gantt".
Everything that can be done on the server is done on the server (state, validation, layout, dialogs, keyboard navigation). The hook only handles what needs the pointer position:
- dragging bars (move, resize, progress), with snapping preview
- drawing dependencies between bar edges
- reordering rows in the grid
- dragging on the timeline to create a task, or to pan the chart
- resizing grid columns and the grid itself
- double click to open the lightbox
- Ctrl/Cmd+click and Shift+click selection, and moving the selected bars together
- undo / redo keyboard shortcuts (they need modifier keys)
- fullscreen, print, scrolling and file downloads requested by the server (PNG images are rasterized from the server-rendered SVG)
- reporting the visible area for smart rendering
Each gesture ends with a single event to the server (gx:drag, gx:link,
gx:reorder, gx:create, gx:resize, gx:dblclick, gx:viewport), which decides the
outcome and re-renders the chart.
The hook is extracted at compile time; import it in your app.js:
import {hooks as ganttHooks} from "phoenix-colocated/gantt_ex"