Selecting a pen color leaves Example drawing in eraser mode

先查看 web/example-board.js 中的颜色按钮处理器和指针处理器，再将它们的行为与 web/interview.js 中的 selectPen() 进行比较。在 example-board.test.js 中添加或更新回归测试，覆盖从 Eraser 切换到笔的颜色以及显式选择 Eraser 的情况。完成标准是：所选颜色能绘制宽度符合预期的笔迹，工具栏状态与当前工具一致，并且 Eraser 仍会产生橡皮擦笔迹。

Problem and motivation

In the coding interview's Example drawing panel, selecting a pen color after using the eraser does not switch back to the pen. The color button becomes selected, but subsequent strokes still erase existing content. A candidate trying to annotate a diagram in another color can therefore erase it instead.

The color buttons have labels such as Pen Red, which suggest that selecting one activates that pen. The full whiteboard already follows this behavior, so applying the same interaction rule to Example drawing would make the two drawing surfaces more consistent.

I reproduced this behavior during an actual interview. Selecting a pen color after using the eraser did not resume drawing, making it difficult to alternate between erasing parts of a diagram and adding annotations in different colors.

Steps to reproduce

1. Select Editor mode and enable Example drawing in the lobby.
2. Start an interview and enter the live coding phase.
3. Expand Example drawing and draw a black line.
4. Select Eraser.
5. Select the red pen color.
6. Draw across the black line.

Expected

Selecting the red pen color activates Pen, and the next stroke draws a red line.

Actual

The red color is selected, but Eraser remains active and the next stroke erases the black line.

Analysis

In web/example-board.js, the color-button handler updates color and the color buttons' aria-pressed attributes, but leaves tool unchanged. The pointer handler subsequently passes the active tool and selected color to model.begin(). Because the active tool is still Eraser, the model correctly creates an eraser stroke.

The full whiteboard provides an existing reference in web/interview.js: selectPen() sets the color, activates Pen through board.tool = "pen", and updates the toolbar.

The relevant state in mountExampleBoard() consists of two values:

• tool determines whether the next stroke draws or erases.
• color stores the selected pen color.

The proposed interaction is to activate Pen whenever a pen color is selected, while preserving the stored pen color when switching to Eraser.

User action	Active tool	Stored pen color
Select a pen color	Pen	Update to the selected color
Select Eraser	Eraser	Preserve the current color
Select Pen	Pen	Preserve the current color

These results indicate that the selected color is retained and applied correctly when Pen is active. The issue concerns the toolbar state transition rather than the drawing model.

The existing example-board.test.js suite passed all eight tests at the time of the initial investigation. The new interaction has not yet been verified in a real browser.

Acceptance criteria

• Selecting any pen color in Example drawing immediately activates Pen.
• The toolbar accurately reflects the active tool and selected color.
• The next stroke uses the selected color and pen width.
• Selecting Eraser explicitly continues to produce eraser strokes.
• The stored pen color is preserved when switching tools.
• Undo, replay, and the active-stroke guard continue to work as expected.
• Regression coverage verifies the Eraser-to-Pen transition.

Problem and motivation

In the coding interview's Example drawing panel, selecting a pen color after using the eraser does not switch back to the pen. The color button becomes selected, but subsequent strokes still erase existing content. A candidate trying to annotate a diagram in another color can therefore erase it instead.

The color buttons have labels such as Pen Red, which suggest that selecting one activates that pen. The full whiteboard already follows this behavior, so applying the same interaction rule to Example drawing would make the two drawing surfaces more consistent.

I reproduced this behavior during an actual interview. Selecting a pen color after using the eraser did not resume drawing, making it difficult to alternate between erasing parts of a diagram and adding annotations in different colors.

Steps to reproduce

1. Select Editor mode and enable Example drawing in the lobby.
2. Start an interview and enter the live coding phase.
3. Expand Example drawing and draw a black line.
4. Select Eraser.
5. Select the red pen color.
6. Draw across the black line.

Expected

Selecting the red pen color activates Pen, and the next stroke draws a red line.

Actual

The red color is selected, but Eraser remains active and the next stroke erases the black line.

Analysis

In web/example-board.js, the color-button handler updates color and the color buttons' aria-pressed attributes, but leaves tool unchanged. The pointer handler subsequently passes the active tool and selected color to model.begin(). Because the active tool is still Eraser, the model correctly creates an eraser stroke.

The full whiteboard provides an existing reference in web/interview.js: selectPen() sets the color, activates Pen through board.tool = "pen", and updates the toolbar.

The relevant state in mountExampleBoard() consists of two values:

• tool determines whether the next stroke draws or erases.
• color stores the selected pen color.

The proposed interaction is to activate Pen whenever a pen color is selected, while preserving the stored pen color when switching to Eraser.

User action	Active tool afterwards	Stored pen color
Select a pen color	Pen	Update to the selected color
Select Eraser	Eraser	Preserve the current color
Select Pen	Pen	Preserve the current color

Selecting a color should activate Pen even when the selected color has not changed. For example, if red is already the stored pen color, selecting Pen Red while Eraser is active should resume drawing in red.

Proposed implementation

Keep the change within web/example-board.js.

When a pen color is selected, update both the stored color and the active tool, then refresh the toolbar state. The Pen/Eraser buttons, color selection, and corresponding aria-pressed attributes should consistently reflect the resulting state.

The existing separation between the drawing-tool and pen-color controls can remain. The important behavior is that selecting a color activates Pen and makes the active tool clear to the user.

The existing if (drag) return guard should remain before changing either state value, so tool or color selection cannot alter a stroke already in progress.

No changes to the shared drawing model, operation format, replay mechanism, or backend should be necessary. The model already derives stroke appearance from the active tool: pen strokes use the selected color and pen width, while eraser strokes use the white background and eraser width.

Tool and color selection alone should not create a stroke operation, add an Undo entry, or publish a drawing.

Regression tests

The existing browser test selects Pen before selecting a pen color, so it does not cover the Eraser-to-Pen transition.

Add a focused regression test that:

1. Draws an initial black line.
2. Selects Eraser.
3. Selects Pen Red.
4. Verifies that Pen is active and Eraser is inactive.
5. Draws across the initial line.
6. Verifies that the new stroke uses #c2261b and pen width 3.

Additional cases should verify that:

• Selecting the same color while Eraser is active reactivates Pen.
• Selecting Pen after erasing preserves the previously selected color.
• Explicitly selecting Eraser still produces an eraser stroke with the expected background color and width.
• Undo removes the latest stroke and restores the preceding drawing.
• Tool and color changes remain guarded during an active stroke.
• Selecting a color without drawing does not create a stroke operation.

The existing test for ordinary color selection can remain unchanged.

Verification status

At checkout revision [fd7c23c](https://github.com/sysprog21/codetrial/commit/fd7c23c1594ac9ecc630918bbf3ac87126b426af), a module-level reproduction using the actual mountExampleBoard() implementation with simulated DOM and canvas objects produced the following results:

Selection sequence	Stroke color	Stroke width
Red	#c2261b	3
Eraser → Red	#ffffff	24
Eraser → Black	#ffffff	24
Eraser → Red → Pen	#c2261b	3

These results indicate that the selected color is retained and applied correctly when Pen is active. The issue concerns the toolbar state transition rather than the drawing model.

The existing example-board.test.js suite passed all eight tests at the time of the initial investigation. The new interaction has not yet been verified in a real browser.

Acceptance criteria

• Selecting any pen color in Example drawing immediately activates Pen.
• The toolbar accurately reflects the active tool and selected color.
• The next stroke uses the selected color and pen width.
• Selecting Eraser explicitly continues to produce eraser strokes.
• The stored pen color is preserved when switching tools.
• Undo, replay, and the active-stroke guard continue to work as expected.
• Regression coverage verifies the Eraser-to-Pen transition.