Mindmap title editor overlaps the existing title text while typing #221

New issue

Closed

opened 2026-06-08 08:37:19 +00:00 by AhmedHanafy725 · 2 comments

AhmedHanafy725 commented

2026-06-08 08:37:19 +00:00

Member

Summary

When editing a mindmap's title, the inline text editor overlaps the existing on-canvas title, so the text being typed is unreadable.

Steps to reproduce

Open a board containing a mindmap (or create one — its title defaults to "Mind Map").
Double-click the mindmap title to edit it.
The HTML edit field appears directly over the still-visible canvas title; the two strings overlap and you cannot read what you are typing.

Expected

While editing, only the editor text should be visible — the underlying canvas title should be hidden (or the editor should have an opaque background that fully occludes it), as is done for other inline text editors.

Root cause

crates/hero_whiteboard_admin/static/web/js/whiteboard/mindmap.js, function editMindmapTitle (around line 638):

The edit <input> is created with input.style.background = 'transparent' (around line 655).
The underlying Konva title text node (titleNode) is not hidden while the editor is open.

As a result the on-canvas title shows through behind the transparent input, producing the overlap.

Proposed fix

Mirror the pattern used by objects.js editText, which hides the Konva text node while the HTML editor is open:

Hide titleNode during editing (titleNode.visible(false) + object-layer batchDraw()), and/or give the input an opaque, theme-aware background.
On blur the title is rebuilt by renderMindmap(group), so no explicit restore of the hidden node is required.

Acceptance criteria

While editing a mindmap title, the old title text is not visible behind the editor.
The typed text is fully legible during editing.
After committing or cancelling the edit, the title renders correctly.

## Summary When editing a mindmap's title, the inline text editor overlaps the existing on-canvas title, so the text being typed is unreadable. ## Steps to reproduce 1. Open a board containing a mindmap (or create one — its title defaults to "Mind Map"). 2. Double-click the mindmap title to edit it. 3. The HTML edit field appears directly over the still-visible canvas title; the two strings overlap and you cannot read what you are typing. ## Expected While editing, only the editor text should be visible — the underlying canvas title should be hidden (or the editor should have an opaque background that fully occludes it), as is done for other inline text editors. ## Root cause `crates/hero_whiteboard_admin/static/web/js/whiteboard/mindmap.js`, function `editMindmapTitle` (around line 638): - The edit `<input>` is created with `input.style.background = 'transparent'` (around line 655). - The underlying Konva title text node (`titleNode`) is not hidden while the editor is open. As a result the on-canvas title shows through behind the transparent input, producing the overlap. ## Proposed fix Mirror the pattern used by `objects.js` `editText`, which hides the Konva text node while the HTML editor is open: - Hide `titleNode` during editing (`titleNode.visible(false)` + object-layer `batchDraw()`), and/or give the input an opaque, theme-aware background. - On blur the title is rebuilt by `renderMindmap(group)`, so no explicit restore of the hidden node is required. ## Acceptance criteria - [ ] While editing a mindmap title, the old title text is not visible behind the editor. - [ ] The typed text is fully legible during editing. - [ ] After committing or cancelling the edit, the title renders correctly.

AhmedHanafy725 commented

2026-06-08 08:38:14 +00:00

Author

Member

Implementation Spec for Issue #221

Objective

While a mindmap title is being edited inline, the existing on-canvas title must not be visible behind the editor, so the typed text stays legible.

Root cause

editMindmapTitle (crates/hero_whiteboard_admin/static/web/js/whiteboard/mindmap.js, ~line 638) opens a transparent-background <input> over the title but never hides the underlying Konva title text node (titleNode), so the old title shows through.

Files to Modify

crates/hero_whiteboard_admin/static/web/js/whiteboard/mindmap.js - editMindmapTitle

Implementation Plan

Step 1: Hide the title node while editing, restore on the non-rebuild path

Files: crates/hero_whiteboard_admin/static/web/js/whiteboard/mindmap.js

After the <input> is created and appended, hide the canvas title: titleNode.visible(false) followed by WhiteboardCanvas.getObjectLayer().batchDraw().
Normal commit path: the existing renderMindmap(group) on blur rebuilds the title from scratch, so the hidden node is replaced — no explicit restore needed.
Locked early-return path inside the blur handler returns before renderMindmap; restore titleNode.visible(true) + batchDraw() there so the title cannot stay hidden.
Mirrors the pattern used by objects.js editText, which hides the Konva text node while its HTML editor is open.
Dependencies: none

Acceptance Criteria

While editing a mindmap title, the old title text is not visible behind the editor.
The typed text is fully legible during editing.
After committing the edit, the title renders correctly with the new value.
If the edit is opened on a locked mindmap (defensive path), the title is not left hidden.

Notes

Scope is one function; no API, persistence, or sync changes.
The board has no JS unit tests; verification is a workspace build plus manual check that the title hides during edit and re-renders after.

## Implementation Spec for Issue #221 ### Objective While a mindmap title is being edited inline, the existing on-canvas title must not be visible behind the editor, so the typed text stays legible. ### Root cause `editMindmapTitle` (crates/hero_whiteboard_admin/static/web/js/whiteboard/mindmap.js, ~line 638) opens a transparent-background `<input>` over the title but never hides the underlying Konva title text node (`titleNode`), so the old title shows through. ### Files to Modify - `crates/hero_whiteboard_admin/static/web/js/whiteboard/mindmap.js` - `editMindmapTitle` ### Implementation Plan #### Step 1: Hide the title node while editing, restore on the non-rebuild path Files: `crates/hero_whiteboard_admin/static/web/js/whiteboard/mindmap.js` - After the `<input>` is created and appended, hide the canvas title: `titleNode.visible(false)` followed by `WhiteboardCanvas.getObjectLayer().batchDraw()`. - Normal commit path: the existing `renderMindmap(group)` on blur rebuilds the title from scratch, so the hidden node is replaced — no explicit restore needed. - Locked early-return path inside the blur handler returns before `renderMindmap`; restore `titleNode.visible(true)` + `batchDraw()` there so the title cannot stay hidden. - Mirrors the pattern used by `objects.js` `editText`, which hides the Konva text node while its HTML editor is open. Dependencies: none ### Acceptance Criteria - [ ] While editing a mindmap title, the old title text is not visible behind the editor. - [ ] The typed text is fully legible during editing. - [ ] After committing the edit, the title renders correctly with the new value. - [ ] If the edit is opened on a locked mindmap (defensive path), the title is not left hidden. ### Notes - Scope is one function; no API, persistence, or sync changes. - The board has no JS unit tests; verification is a workspace build plus manual check that the title hides during edit and re-renders after.

AhmedHanafy725 commented

2026-06-08 08:40:17 +00:00

Author

Member

Implementation Summary

Change

crates/hero_whiteboard_admin/static/web/js/whiteboard/mindmap.js - editMindmapTitle:

When the inline title editor opens, the on-canvas Konva title node is now hidden (titleNode.visible(false) + object-layer batchDraw()), so the old title no longer shows through the transparent editor.
On the normal commit path, renderMindmap() rebuilds the title fresh (no explicit restore needed).
On the defensive locked early-return path, the title node visibility is restored so it cannot be left hidden.

Scope was confirmed to be the title editor only: the node-text editor (editMindmapNode) already uses an opaque background, so it has no overlap.

Verification

The project has no JavaScript unit-test suite; this is a static front-end asset change with no Rust changes.
Syntax-checked all whiteboard JS modules with node --check — all pass.
Manual check: opening the title editor hides the canvas title (no overlap), the typed text is legible, and the title re-renders correctly with the new value after commit.

Acceptance criteria

While editing a mindmap title, the old title text is not visible behind the editor.
The typed text is fully legible during editing.
After committing the edit, the title renders correctly with the new value.
If the edit is opened on a locked mindmap (defensive path), the title is not left hidden.

## Implementation Summary ### Change `crates/hero_whiteboard_admin/static/web/js/whiteboard/mindmap.js` - `editMindmapTitle`: - When the inline title editor opens, the on-canvas Konva title node is now hidden (`titleNode.visible(false)` + object-layer `batchDraw()`), so the old title no longer shows through the transparent editor. - On the normal commit path, `renderMindmap()` rebuilds the title fresh (no explicit restore needed). - On the defensive locked early-return path, the title node visibility is restored so it cannot be left hidden. Scope was confirmed to be the title editor only: the node-text editor (`editMindmapNode`) already uses an opaque background, so it has no overlap. ### Verification - The project has no JavaScript unit-test suite; this is a static front-end asset change with no Rust changes. - Syntax-checked all whiteboard JS modules with `node --check` — all pass. - Manual check: opening the title editor hides the canvas title (no overlap), the typed text is legible, and the title re-renders correctly with the new value after commit. ### Acceptance criteria - [x] While editing a mindmap title, the old title text is not visible behind the editor. - [x] The typed text is fully legible during editing. - [x] After committing the edit, the title renders correctly with the new value. - [x] If the edit is opened on a locked mindmap (defensive path), the title is not left hidden.