Hacktoberfest 2026: le issue che i maintainer hanno segnato per ottobre, aperte e adatte ai principianti. Sfoglia le issue Hacktoberfest

Selecting a pen color leaves Example drawing in eraser mode

Aperta Adatta ai principianti
  • Qualcosa non va?
#437 0 commenti 0 reazioni 0 assegnatari Vedi su GitHub

I maintainer di solito rispondono entro 1 giorno

Nessuno ha ancora preso questa issue.

Valutazione

Difficoltà
2/5
Tempo stimato
1-3 ore
Idoneità per principianti
78/100
Tipo di issue
Bug
Chiarezza
Specificata chiaramente
Stato di attività
Attiva
Stack tecnologico
javascript
Ambito
frontend

Direzione di ricerca

Inizia con il gestore del pulsante del colore e il gestore del puntatore in web/example-board.js, poi confrontane il comportamento con selectPen() in web/interview.js. Aggiungi o aggiorna il test di regressione in example-board.test.js per coprire il passaggio da Eraser a un colore della penna e la selezione esplicita di Eraser. Il lavoro è completo quando il colore selezionato disegna un tratto di penna con la larghezza prevista, gli stati della barra degli strumenti corrispondono allo strumento attivo ed Eraser continua a produrre tratti di gomma.

Scritto dal modello di indicizzazione a partire dal testo della issue.

Descrizione

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 the two drawing surfaces respond differently to the same action.

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 the 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.

Initial analysis

In web/example-board.js, the color-button handler updates color and the color buttons' aria-pressed states, but leaves tool unchanged. The pointer handler later passes that unchanged tool to model.begin(), so the board continues producing eraser strokes.
The full whiteboard handles this through selectPen() in web/interview.js, which sets both the color and board.tool = "pen" before updating the toolbar. Applying the same interaction rule to Example drawing would make the selected color and the active drawing tool agree.

Proposed implementation

Keep the change within the Example drawing toolbar. Selecting a color should activate the pen and update both the pen/eraser buttons and the color buttons to reflect the resulting state. Eraser behavior should remain available through its explicit control.
Add a regression test that selects Eraser, selects a pen color, and draws a stroke. Assert that the stroke uses the selected color and pen width, that Pen is active, and that Eraser is inactive. Also verify that explicitly selecting Eraser still produces an eraser stroke.

Verification so far

At checkout revision fd7c23c, a module-level reproduction using the actual mountExampleBoard() implementation with simulated DOM and canvas objects produced a white, width-24 eraser stroke after selecting Eraser and then Pen Red. The red color button and Eraser both remained pressed.
The existing example-board.test.js suite passed all eight tests. The interaction above has not yet been manually verified in a real browser; the steps listed above are the browser verification procedure.

Lingua principale
Rust
Stelle
177
Fork
100
Merge medio
1g 8h
PR unite (30g)
168

Preparare l'ambiente

Come iniziare

  1. Leggi tutta la issue e poi la guida ai contributi del progetto.
  2. Commenta sulla issue per dire che te ne occupi tu — evita che due persone facciano lo stesso lavoro.
  3. Fai un fork del repository e lavora su un branch.
  4. Apri una pull request che faccia riferimento al numero della issue.

Altre issue di sysprog21/codetrial

Tutte le issue di sysprog21/codetrial

Issue simili

Altre issue su Rust

Ricevi le nuove issue nella tua casella

Un breve riepilogo di issue GitHub adatte ai principianti.