enhancement
major
minor
defect
critical
major
minor
minor
#30180
Flowchart (Gantt): Clicking on an element does not select anything if frozenRows > 0
Problem
If a Flow Engine Gantt chart has frozen rows (frozenRows > 0, e.g., month and calendar week axes), no element (bar, milestone marker, edge) can be selected with a mouse click. The click does not trigger either the selection channel or an onClick handler.
With ` frozenRows: 0 `, the same selection works.
Version: 8.0.0-alpha12, modules tl-react-flow-client / tl-react-flow-common / tl-react-flow-server. According to sources, 8.0-SNAPSHOT behaves the same way in this regard.
Reproduction
- Gantt chart (reactFlowChart with Gantt layout) with ` frozenRows: 2 ` and a ` selection` channel to which a table or form is bound.
- Click on a milestone marker (reactFlowGanttSpan or similar) with a real mouse.
- Expected: The marker’s model object is selected in the selection channel.
- Actual: Nothing happens.
- Repeat with ` frozenRows: 0 `: The selection works.
Analysis
- When rows are frozen, a mouse-down on an element triggers a pan/drag. After that, the click event is suppressed, even if the mouse hasn’t moved.
- Synthetic click events (without a prior mouse-down) select correctly in both cases. The problem therefore lies in the pan detection during pointer-down.
Expected Behavior
- A click without significant movement (threshold of a few pixels) is a click and not a pan, regardless of ` frozenRows`.
- A pan only begins with actual movement. Alternatively, it should only start on the background, not on elements.
Impact
Without click selection, milestones in the schedule cannot be edited directly in the diagram. However, a fixed timeline is essential for a readable schedule. Currently, this can only be achieved with a workaround (a milestone table next to the diagram).
Solution
Cause: The Flow diagram’s DragHandler immediately initiated a pan or drag session when the pointer was down and captured the pointer (setPointerCapture). A captured click is no longer delivered by the browser to the element on which it began. With fixed rows, the Gantt layout supports panning, which is why the error occurred there for every non-movable element; for movable elements, the click was also lost because a drag began immediately.
Now, a pointer-down event only records what it would have initiated. Panning or dragging/resizing does not begin until the pointer has moved more than FlowDiagramClientControl.DRAG_THRESHOLD (4 screen pixels); only then is the pointer captured. Releasing the mouse button before reaching this threshold counts as a click and targets the element. After a true drag or pan, the subsequent click is suppressed, just as with the selection rectangle, which uses the same threshold.
The Gantt demo in tl-demo-react (fixed rows) displays the selection of the Spec, Build, QA, and Beta elements below the diagram.