# `GanttEx.Live.Hook`
[🔗](https://github.com/rocket4ce/gantt_ex/blob/v0.1.0/lib/gantt_ex/live/hook.ex#L1)

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"

---

*Consult [api-reference.md](api-reference.md) for complete listing*