Add basic shape tools to the example drawing area
メンテナーはふだん 1 日以内に返信
@Chuyutseng がすでに取り組んでいます。
2026年11月8日 から。
評価
この issue はまだ評価されていません。
説明
Observed behavior
The Example drawing area introduced in PR #262 allows candidates to illustrate examples during coding interviews without hiding the code editor. It currently supports freehand drawing, erasing, undo, clear, color selection, and text labels, but does not provide tools for drawing basic geometric shapes.
Candidates must manually draw rectangles, circles, and straight lines using the pen tool, making it difficult to create consistent diagrams when explaining data structures, algorithms, or relationships between elements.
Expected behavior
The Example drawing area should support three additional drawing tools:
- Rectangle: Draw a rectangle between two points.
- Ellipse: Draw a circle or ellipse within the dragged bounds.
- Line: Draw a straight line between two points.
Candidates should be able to preview a shape while dragging and complete it when releasing the pointer.
Each completed shape should behave as a single undoable operation, reuse the existing color selection, and remain compatible with recording, replay, and reconnection.
Reproduction
- Start a Coding interview with Example drawing enabled.
- Expand the Example drawing area below the code editor.
- Observe that the toolbar provides pen, eraser, text, undo, clear, and color selection.
- Attempt to draw a rectangle, circle, or straight line.
- Observe that these shapes must be drawn manually using the pen tool.
Initial analysis
The drawing model and rendering logic are implemented in web/whiteboard.js, with corresponding tests in tests/browser/whiteboard.test.js. The existing drawing operations support undo, clearing, and replay through a shared drawing model.
PR #523 introduced structured text operations shared by Whiteboard and Example drawing. The proposed shape tools should reuse the existing drawing infrastructure where possible.
The implementation would need to consider:
- Toolbar controls: Add rectangle, ellipse, and line tools alongside the existing drawing controls.
- Pointer handling: Track the initial pointer position and current position to determine shape geometry.
- Drawing preview: Render temporary shapes during dragging without adding intermediate previews to the operation history.
- Operation history: Commit each completed shape as a single undoable operation.
- Recording and replay: Ensure that completed shapes are preserved and rendered correctly.
- Reconnection: Retain completed drawings after reconnecting.
The operation representation should minimize changes to the existing drawing protocol while preserving compatibility with recording, replay, and reconnection.
Proposed change
Extend the Example drawing area with three basic shape tools: Rectangle, Ellipse, and Line.
Selecting a shape tool should allow candidates to press, drag, and release the pointer to create the corresponding shape. A temporary preview should be displayed during dragging, and the completed shape should be committed to the drawing history when the pointer is released.
The implementation should preserve existing pen, eraser, text, undo, clear, color selection, recording, replay, and reconnection behavior.
Validation plan
Add browser regression tests covering:
- Rectangle, ellipse, and line creation using pointer interactions.
- Shape geometry when dragging in different directions.
- Shape preview and final rendering.
- Color selection for newly created shapes.
- Undo and clear behavior for completed shapes.
- Recording and replay of drawings containing geometric shapes.
- Preservation of completed shapes after reconnection.
- Regression coverage for existing pen, eraser, and text tools.
Tests should verify the actual drawing output rather than only checking whether toolbar buttons or canvas elements are visible.
Run ./scripts/test.sh and report the results, including any skipped checks.
- 主要言語
- Rust
- スター
- 223
- フォーク
- 148
- 平均マージ
- 1日 4時間
- マージ済み PR（30日）
- 223
環境構築
- Dockerfile・Docker Compose ファイルなし
- プルリクエストのテンプレートあり
- コントリビューションガイドを読む
はじめの一歩
- issue を最後まで読み、次にプロジェクトのコントリビューションガイドを読みます。
- 着手することを issue にコメントします — 二人が同じ作業をするのを防げます。
- リポジトリをフォークし、ブランチを切って変更します。
- issue 番号を参照したプルリクエストを送ります。
sysprog21/codetrial のほかの issue
-
難易度 1/5 1時間未満 初心者へのやさしさ 84/100
メンテナーはふだん 1 日以内に返信
-
Show recorded scores in past attempt rows対応中かも @liehcheng が 1 日前に担当しました。 オープン
難易度 2/5 1〜3時間 初心者へのやさしさ 78/100
sysprog21/codetrial#604 · コメント 4 件 · 担当者 1 名 ·
メンテナーはふだん 1 日以内に返信
-
Remind the candidate when they speak while the microphone is muted対応中かも @gino1203 が今日担当しました。 オープン
sysprog21/codetrial#627 · 担当者 1 名 ·
メンテナーはふだん 1 日以内に返信
-
The peer lobby stays on "Checking account..." when an invite link is opened with site data blocked対応中かも @dges5202 が今日担当しました。 オープン
sysprog21/codetrial#626 · コメント 3 件 · 担当者 1 名 ·
メンテナーはふだん 1 日以内に返信
-
Browser-local practice backend対応中かも @tony2037 が今日担当しました。 オープン
sysprog21/codetrial#621 · コメント 2 件 · 担当者 1 名 ·
メンテナーはふだん 1 日以内に返信
sysprog21/codetrial の issue をすべて見る
似ている issue
-
needs-triage tooling
難易度 1/5 1時間未満 初心者へのやさしさ 90/100
neilsh/stunt-reel#317 ·
メンテナーはふだん 1 日以内に返信
-
難易度 2/5 1〜3時間 初心者へのやさしさ 84/100
storytold/craft-fonts#65 ·
メンテナーはふだん 2 日以内に返信
-
難易度 2/5 1〜3時間 初心者へのやさしさ 86/100
storytold/craft-libs#723 ·
メンテナーはふだん 1 日以内に返信
-
難易度 2/5 1〜3時間 初心者へのやさしさ 83/100
n0-computer/iroh#4669 · コメント 1 件 ·
メンテナーはふだん 1 日以内に返信
-
難易度 2/5 1〜3時間 初心者へのやさしさ 78/100
メンテナーはふだん 1 日以内に返信