Kanban: transformer outline doesn't resize after adding cards #49

New issue

Open

opened 2026-04-22 11:26:10 +00:00 by AhmedHanafy725 · 3 comments

AhmedHanafy725 commented

2026-04-22 11:26:10 +00:00

Member

Problem

When a kanban board is selected (showing its transformer handles), adding a card grows the kanban's internal background — but the transformer bounding box stays at the pre-add size. Handles end up misplaced relative to the new board.

Evidence

renderKanban() destroys and re-creates all children (group.destroyChildren()). The bg rect's totalH recomputes correctly.
Nothing calls transformer.forceUpdate() after the rerender, so the transformer still reflects the stale bounding box.

Fix

In renderKanban(), after drawing, detect if the group is currently attached to a transformer (WhiteboardTools.getTransformer() and .nodes().indexOf(group) >= 0) and call transformer.forceUpdate() (plus a batchDraw) so the handles follow the new size.
Same fix applies any time columns/cards grow the board (add card, add column, rename that wraps, etc.).

## Problem When a kanban board is selected (showing its transformer handles), adding a card grows the kanban's internal background — but the transformer bounding box stays at the pre-add size. Handles end up misplaced relative to the new board. ## Evidence - `renderKanban()` destroys and re-creates all children (`group.destroyChildren()`). The `bg` rect's `totalH` recomputes correctly. - Nothing calls `transformer.forceUpdate()` after the rerender, so the transformer still reflects the stale bounding box. ## Fix - In `renderKanban()`, after drawing, detect if the group is currently attached to a transformer (`WhiteboardTools.getTransformer()` and `.nodes().indexOf(group) >= 0`) and call `transformer.forceUpdate()` (plus a `batchDraw`) so the handles follow the new size. - Same fix applies any time columns/cards grow the board (add card, add column, rename that wraps, etc.).

AhmedHanafy725 commented

2026-04-22 11:30:45 +00:00

Author

Member

Implementation Spec for Issue #49

Objective

After any kanban content change that grows its bounding box (add card, add column, rename, etc.), refresh the active Konva.Transformer so the selection handles track the new size.

Requirements

When the kanban group is currently attached to a transformer, the transformer's handles must re-align to the new bounding box after every re-render.
No behavioral change when the kanban is not selected.
No impact on other transformer users (sticky, shape, frame, etc.).

Files to Modify

crates/hero_whiteboard_ui/static/web/js/whiteboard/kanban.js — at the end of renderKanban(group), if the group is part of the active transformer, call transformer.forceUpdate() and redraw.

Implementation Plan

Step 1: Call `transformer.forceUpdate()` after `renderKanban`

Files: crates/hero_whiteboard_ui/static/web/js/whiteboard/kanban.js

Subtasks:

In renderKanban(), after the existing WhiteboardCanvas.getObjectLayer().batchDraw(); (last line), add a guard:

var tr = WhiteboardTools && WhiteboardTools.getTransformer && WhiteboardTools.getTransformer();
if (tr && tr.nodes && tr.nodes().indexOf(group) >= 0) {
    tr.forceUpdate();
    tr.getLayer() && tr.getLayer().batchDraw();
}

No other changes.

Dependencies: none

Acceptance Criteria

Select the kanban board (transformer handles visible). Click + Add card in any column. The transformer handles expand to wrap the new, taller board.
Same for + Column and column delete (x) — handles follow.
Deselected kanban behaves exactly as before — no extra transformer flicker.
No regression in other object types that use the transformer.

Notes

WhiteboardTools.getTransformer() returns the single shared transformer on the UI layer.
forceUpdate() recomputes the transformer's attached-node bounding box without changing its node list.

## Implementation Spec for Issue #49 ### Objective After any kanban content change that grows its bounding box (add card, add column, rename, etc.), refresh the active Konva.Transformer so the selection handles track the new size. ### Requirements - When the kanban group is currently attached to a transformer, the transformer's handles must re-align to the new bounding box after every re-render. - No behavioral change when the kanban is not selected. - No impact on other transformer users (sticky, shape, frame, etc.). ### Files to Modify - `crates/hero_whiteboard_ui/static/web/js/whiteboard/kanban.js` — at the end of `renderKanban(group)`, if the group is part of the active transformer, call `transformer.forceUpdate()` and redraw. ### Implementation Plan #### Step 1: Call `transformer.forceUpdate()` after `renderKanban` Files: `crates/hero_whiteboard_ui/static/web/js/whiteboard/kanban.js` Subtasks: - In `renderKanban()`, after the existing `WhiteboardCanvas.getObjectLayer().batchDraw();` (last line), add a guard: ```js var tr = WhiteboardTools && WhiteboardTools.getTransformer && WhiteboardTools.getTransformer(); if (tr && tr.nodes && tr.nodes().indexOf(group) >= 0) { tr.forceUpdate(); tr.getLayer() && tr.getLayer().batchDraw(); } ``` - No other changes. Dependencies: none ### Acceptance Criteria - [ ] Select the kanban board (transformer handles visible). Click `+ Add card` in any column. The transformer handles expand to wrap the new, taller board. - [ ] Same for `+ Column` and column delete (`x`) — handles follow. - [ ] Deselected kanban behaves exactly as before — no extra transformer flicker. - [ ] No regression in other object types that use the transformer. ### Notes - `WhiteboardTools.getTransformer()` returns the single shared transformer on the UI layer. - `forceUpdate()` recomputes the transformer's attached-node bounding box without changing its node list.

AhmedHanafy725 commented

2026-04-22 12:47:50 +00:00

Author

Member

Test Results

cargo check --workspace: PASS
cargo clippy --workspace -- -D warnings: PASS

JavaScript-only change; Rust gates act as no-regression guards.

## Test Results - `cargo check --workspace`: PASS - `cargo clippy --workspace -- -D warnings`: PASS JavaScript-only change; Rust gates act as no-regression guards.