Skip to content

Add 20 P2 shapes: 14 flowchart + 6 stars (slides Phase 2)#205

Merged
hackerwins merged 13 commits into
mainfrom
slides-shapes-p2
May 10, 2026
Merged

Add 20 P2 shapes: 14 flowchart + 6 stars (slides Phase 2)#205
hackerwins merged 13 commits into
mainfrom
slides-shapes-p2

Conversation

@hackerwins

@hackerwins hackerwins commented May 10, 2026

Copy link
Copy Markdown
Collaborator

Summary

  • Adds 20 new OOXML-aligned shape builders (6 stars + 14 flowchart presets), bringing the slides catalog from 35 → 55 kinds.
  • Adds a shared regularPolygonPath helper to shapes/builder.ts and refactors the existing pentagon builder onto it (output is bit-identical).
  • Adds Flowchart and Stars categories to the shape picker in Google-Slides order (Lines · Shapes · Block Arrows · Flowchart · Callouts · Equation · Stars).
  • No adjustments-editing UI in P2 — drag handles + a complementary number-input popover are the P3 workstream. See docs/design/slides/slides-shapes-p2.md for rationale (Google Slides' canonical UX is yellow-diamond drag handles; a stop-gap toolbar input would teach a non-standard pattern that P3 would have to replace).
  • Refreshes the slides shape-catalog visual baselines (3 themes × 4 device profiles) to cover all 55 kinds in a 5×11 grid.

Spec & plan

  • New: docs/design/slides/slides-shapes-p2.md
  • Updated: docs/design/slides/slides-shapes-p1.md (roadmap row — moves the toolbar adjustments UI from P2 to P3).
  • Updated: docs/design/README.md (slides index).
  • Plan + lessons: docs/tasks/active/20260509-slides-shapes-p2-{todo,lessons}.md.

Test plan

  • pnpm verify:fast green
  • pnpm verify:self green (~73s locally; per-commit hooks run verify:fast ~34s)
  • Visual gate green: pnpm verify:browser:docker passes against the regenerated baselines (packages/frontend/tests/visual/baselines/)
  • Pentagon refactor verified coordinate-equivalent (existing pentagon.test.ts + registry snapshot unchanged for that kind)
  • Insert-defaults coverage extended in insert.test.ts (flowchart → outlined, stars → filled)
  • Manual smoke in pnpm dev: open the slides editor, click Shape ▾, confirm 7 categories in spec order, insert one shape from each new category, verify it renders + resizes + rotates correctly

Notes for reviewers

  • The catalog scenario (slides-scenarios.tsx) keeps P1 categories in their original grid positions and appends P2 (Stars then Flowchart) at the end. This is a deliberate trade-off vs picker order — keeps the visual diff focused on new shapes when categories grow.
  • flowChartDisplay is a hand-coded approximation; the Phase 4 DrawingML formula evaluator is expected to override it with the canonical OOXML preset path.
  • Inline ellipse / semi-ellipse curves use parametric polylines (32–64 segments) rather than Path2D.ellipse, per P1 lessons §"Test infrastructure" (shim quirks).

🤖 Generated with Claude Code

Summary by CodeRabbit

Release Notes

  • New Features

    • Added 6 star shapes (4, 5, 6, 7, 8, and 10-point stars) with adjustable inner radius
    • Added 14 flowchart shape types (terminator, process, documents, manual input/operation, connectors, and more)
    • New "Stars" and "Flowchart" categories in the shape picker
    • Expanded shape library from 35 to 55 total shapes
    • Applied default styling for new shapes
  • Tests

    • Added comprehensive tests for all new star and flowchart shape builders

hackerwins and others added 11 commits May 10, 2026 19:40
Extends the ShapeKind union ahead of the P2 builder registrations.
Until each builder lands in T4–T6, the dispatcher paints the new
kinds via the placeholder fallback. The frontend Yorkie schema
imports ShapeKind from @wafflebase/slides, so YorkieShapeElement
auto-extends without a parallel edit.

Includes the P2 design doc, the implementation plan, and the
lessons stub (filled in T9). P1's roadmap table updated to move
the toolbar adjustments UI from P2 to P3 — see slides-shapes-p2.md
for rationale.
Computes inscribed-polygon vertices for an arbitrary axis-aligned
ellipse. Will be used by the existing pentagon builder (refactor
in next commit) and the new star builders.
Pure refactor — output is coordinate-equivalent to the previous
hand-rolled trigonometry. Smoke-tests the helper on a known shape
ahead of the star builders.
Each star is N-pointed and inscribed in the element frame,
apex up, with an OOXML-default inner-radius ratio. Builders
share regularPolygonPath for vertex math.

Co-Authored-By: Claude Opus 4.7 (1M context) <[email protected]>
Adds terminator, predefinedProcess, internalStorage, manualInput,
manualOperation, offpageConnector, punchedCard. All non-parametric
in P2; geometry follows OOXML look-alikes.
Adds document, multidocument, punchedTape (sine waves),
summingJunction, or (full ellipses), delay (D-shape),
display. Sine-wave helper extracted to flowchart/wave.ts;
document subpath helper exported for multidocument reuse.

Co-Authored-By: Claude Opus 4.7 (1M context) <[email protected]>
Picker order matches Google Slides: Lines · Shapes · Block Arrows ·
Flowchart · Callouts · Equation · Stars. Each new entry already has
a registered path-builder, so canvas-rendered icons appear without
per-shape asset work. Insert defaults: stars use the 'filled' style
(accent1 fill, no stroke), flowchart uses 'outlined' (background
fill + text-coloured stroke) — matching how callouts look today.
Expands the slides shape-catalog scenario from 35 to 55 entries
(P1 35 + P2 20: Stars + Flowchart). Grid changes from 5×7 to 5×11
(cellH 100→96 px to fit 1080 px slide height). Shapes ordered in
picker-category order: Lines · Basic · Block Arrows · Callouts ·
Equation · Stars · Flowchart. Three catalog scenarios (light, dark,
material) each regenerated via Docker — all 148 profile targets match.

Co-Authored-By: Claude Sonnet 4.6 <[email protected]>
Records workflow notes (73.2s verify:self lane time, workspace build
prerequisite still applies, haiku-model subagent handled mechanical
template work reliably) and geometry observations (regularPolygonPath
refactoring for pentagon, polyline curves avoiding Path2D.ellipse shim
quirks, 64/32-segment approximations, Docker baseline regen on Apple
silicon).

Queues hand-off context for P3 (drag-handle UX, +50 GS-parity shapes,
flowChartDisplay approximation pending Phase 4 DrawingML evaluator).

All verify lanes green: verify:fast 34.5s, verify:self 73.2s total.
The aggregate harness PNGs include the slides catalog scenario, so
the 35→55 grid update in the previous commit also shifts these
baselines. Captured here as a follow-up so the visual gate stays
zero-diff against the regenerated set.
- Add coverage for flowchart + star insert defaults so a missing
  STYLE_BY_KIND entry surfaces as a failing test rather than a
  silent fall-through to 'filled'.
- Note the offpage-connector cut depth deviation (20% vs OOXML's
  25%) inline so future readers don't suspect a bug.
- Replace the duplicate isPointInPath assertion in
  internal-storage.test.ts with a second interior reference point.
- Reword the SHAPE_CATALOG comment to accurately describe the
  picker-vs-baseline order trade-off (P2 categories appended at
  the end, not interleaved).
- Update the P2 spec table for stars to match the prose +
  STYLE_BY_KIND placement (filled with a thin text-coloured stroke,
  consistent with basic-shape defaults).
@coderabbitai

coderabbitai Bot commented May 10, 2026

Copy link
Copy Markdown

Warning

Rate limit exceeded

@hackerwins has exceeded the limit for the number of commits that can be reviewed per hour. Please wait 35 minutes and 9 seconds before requesting another review.

You’ve run out of usage credits. Purchase more in the billing tab.

⌛ How to resolve this issue?

After the wait time has elapsed, a review can be triggered using the @coderabbitai review command as a PR comment. Alternatively, push new commits to this PR.

We recommend that you space out your commits to avoid hitting the rate limit.

🚦 How do rate limits work?

CodeRabbit enforces hourly rate limits for each developer per organization.

Our paid plans have higher rate limits than the trial, open-source and free plans. In all cases, we re-allow further reviews after a brief timeout.

Please see our FAQ for further information.

ℹ️ Review info
⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro

Run ID: bd5fe289-cad7-4e99-8166-204c58598ad4

📥 Commits

Reviewing files that changed from the base of the PR and between 829c1a0 and fc25f4a.

⛔ Files ignored due to path filters (1)
  • packages/slides/src/view/canvas/shapes/__snapshots__/registry.snap.test.ts.snap is excluded by !**/*.snap
📒 Files selected for processing (10)
  • docs/design/slides/slides-shapes-p2.md
  • docs/tasks/README.md
  • docs/tasks/archive/2026/05/20260509-slides-shapes-p2-lessons.md
  • docs/tasks/archive/2026/05/20260509-slides-shapes-p2-todo.md
  • docs/tasks/archive/README.md
  • packages/slides/src/view/canvas/shapes/builder.ts
  • packages/slides/src/view/canvas/shapes/flowchart/document.ts
  • packages/slides/src/view/canvas/shapes/flowchart/or.ts
  • packages/slides/src/view/canvas/shapes/flowchart/punched-tape.ts
  • packages/slides/src/view/canvas/shapes/flowchart/summing-junction.ts
📝 Walkthrough

Walkthrough

This PR extends the Slides Shape Library Phase 1 (35 shapes) to Phase 2 (55 shapes) by introducing 6 star builders with adjustable inner-radius parameters and 14 flowchart builders, supported by shared geometry helpers (regularPolygonPath for polygons, appendSineWave for curves), comprehensive test coverage, updated frontend picker categories, expanded visual harness, and style mappings for insertion defaults.

Changes

Phase 2 Shape Library Extension

Layer / File(s) Summary
Design Specification
docs/design/slides/slides-shapes-p2.md, docs/design/slides/slides-shapes-p1.md, docs/design/README.md
Comprehensive Phase 2 design spec defining scope (20 new kinds: 6 stars, 14 flowchart), goals (shared helpers, picker categories), non-goals (no adjustments UI, no importer), architecture (new modules, sine-wave helper), picker requirements, test strategy, and risks/mitigations. Updated P1 roadmap to defer adjustments-UX to P3.
Implementation Plan & Lessons
docs/tasks/active/20260509-slides-shapes-p2-todo.md, docs/tasks/active/20260509-slides-shapes-p2-lessons.md
10-task implementation roadmap with per-task checklist, workflow notes, path-builder design details, picker UX invariants, visual harness constraints, and Phase 3 considerations.
Type Extension
packages/slides/src/model/element.ts
Expanded ShapeKind union with star4, star5, star6, star7, star8, star10, and 14 flowChart* literals.
Polygon Helper
packages/slides/src/view/canvas/shapes/builder.ts, packages/slides/src/view/canvas/shapes/builder.test.ts
New regularPolygonPath(cx, cy, rx, ry, points, rotation) helper generating N-gon vertices inscribed in an ellipse; unit tests verify default/custom rotation, equal spacing, and elliptical radii support.
Pentagon Refactor
packages/slides/src/view/canvas/shapes/basic/pentagon.ts
buildPentagon now uses regularPolygonPath for vertex computation, eliminating duplicate trigonometry.
Star Builders & Tests
packages/slides/src/view/canvas/shapes/stars/star{4,5,6,7,8,10}.ts, .test.ts
Six star builders with STAR_N_ADJUSTMENTS defining "Inner radius" adjustment (default 50%, bounds 1–99%), each computing outer/inner point sets and alternating vertices to form star outlines. Tests verify center inclusion, apex on top edge, and custom adjustment behavior.
Flowchart Wave Helper
packages/slides/src/view/canvas/shapes/flowchart/wave.ts
New appendSineWave(path, startX, endX, baseY, amplitude, segments=32) utility generating one-period sine polylines with configurable amplitude inversion, used by document and punched-tape shapes.
Simple Flowchart Builders
packages/slides/src/view/canvas/shapes/flowchart/{terminator,predefined-process,internal-storage,manual-input,manual-operation,offpage-connector,punched-card}.{ts,.test.ts}
Seven non-parametric flowchart shapes using geometric primitives (rectangles, trapezoids, diagonal cuts, V-cuts) without adjustment specs. Tests use isPointInPath to verify containment.
Complex Flowchart Builders
packages/slides/src/view/canvas/shapes/flowchart/{delay,display,document,multidocument,or,summing-junction,punched-tape}.{ts,.test.ts}
Seven flowchart shapes using shared curve helpers: document/punched-tape use appendSineWave for wave edges; delay/display approximate ellipse arcs; or/summing-junction draw ellipse + center bars. Tests verify geometry containment and wave behavior.
Shape Registry
packages/slides/src/view/canvas/shapes/index.ts
Registers all 6 star and 14 flowchart builders in PATH_BUILDERS map; registers star adjustment specs in ADJUSTMENT_SPECS map for inner-radius editing.
Picker Categories
packages/frontend/src/app/slides/shape-picker-helpers.ts
Adds two new SHAPE_PICKER_CATEGORIES entries: Flowchart (7 kinds) and Stars (6 kinds) inserted at specific positions in picker category list.
Style Defaults
packages/slides/src/view/editor/interactions/insert.ts, .test.ts
Extends STYLE_BY_KIND: stars (4–10) mapped to filled (accent1 fill, stroke 1); flowchart shapes mapped to outlined (background fill, stroke 2). Tests verify correct insertion defaults.
Visual Harness
packages/frontend/src/app/harness/visual/slides-scenarios.tsx
Expands SHAPE_CATALOG from 35 to 55 shapes (5 columns × 11 rows); updates makeCatalogDoc grid sizing; refreshes three catalog scenarios (light/dark/material) descriptions.
Picker Test Expectations
packages/frontend/tests/app/slides/shape-picker.test.ts
Updates picker test assertions: expects 7 categories (was 5), 55 total kinds (was 35), new category titles (Flowchart, Callouts, Equation, Stars), and canonical first kinds per category.

Estimated code review effort

🎯 4 (Complex) | ⏱️ ~60 minutes

Possibly related PRs

  • wafflebase/wafflebase#190: Establishes foundational slides shape library structures that Phase 2 directly extends (ShapeKind union, rendering registry, picker framework).
  • wafflebase/wafflebase#191: Modifies slides visual harness and shape model surfaces that this PR builds upon with expanded shape coverage and grid dimensions.

Poem

🌟✨ A bunny's ode to Phase Two shapes ✨🌟

Twenty kinds hop into the pen,
Stars in rings and flows again—
Helper paths now shared and bright,
Pentagon's refactored right.
Sine waves dance through flowchart scenes,
Six-pointed stars complete the themes! 🌠

🚥 Pre-merge checks | ✅ 4 | ❌ 1

❌ Failed checks (1 warning)

Check name Status Explanation Resolution
Docstring Coverage ⚠️ Warning Docstring coverage is 71.43% which is insufficient. The required threshold is 80.00%. Write docstrings for the functions missing them to satisfy the coverage threshold.
✅ Passed checks (4 passed)
Check name Status Explanation
Title check ✅ Passed The PR title clearly and concisely summarizes the main change: adding 20 new Phase 2 shapes (14 flowchart + 6 stars) to the slides library, directly matching the primary objective of expanding the shape catalog from 35 to 55 kinds.
Linked Issues check ✅ Passed Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check ✅ Passed Check skipped because no linked issues were found for this pull request.
Description Check ✅ Passed Check skipped - CodeRabbit’s high-level summary is enabled.

✏️ Tip: You can configure your own custom pre-merge checks in the settings.

✨ Finishing Touches
🧪 Generate unit tests (beta)
  • Create PR with unit tests
  • Commit unit tests in branch slides-shapes-p2

Tip

💬 Introducing Slack Agent: The best way for teams to turn conversations into code.

Slack Agent is built on CodeRabbit's deep understanding of your code, so your team can collaborate across the entire SDLC without losing context.

  • Generate code and open pull requests
  • Plan features and break down work
  • Investigate incidents and troubleshoot customer tickets together
  • Automate recurring tasks and respond to alerts with triggers
  • Summarize progress and report instantly

Built for teams:

  • Shared memory across your entire org—no repeating context
  • Per-thread sandboxes to safely plan and execute work
  • Governance built-in—scoped access, auditability, and budget controls

One agent for your entire SDLC. Right inside Slack.

👉 Get started


Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

Comment @coderabbitai help to get the list of available commands and usage tips.

@github-actions

github-actions Bot commented May 10, 2026

Copy link
Copy Markdown
Contributor

Verification: verify:self

Result: ✅ PASS in 139.9s

Lane Status Duration
sheets:build ✅ pass 10.0s
docs:build ✅ pass 10.3s
slides:build ✅ pass 7.5s
verify:fast ✅ pass 75.4s
frontend:build ✅ pass 14.9s
verify:frontend:chunks ✅ pass 0.3s
backend:build ✅ pass 3.9s
cli:build ✅ pass 1.6s
verify:entropy ✅ pass 16.0s

Verification: verify:integration

Result: ✅ PASS

@codecov

codecov Bot commented May 10, 2026

Copy link
Copy Markdown

Codecov Report

✅ All modified and coverable lines are covered by tests.

📢 Thoughts on this report? Let us know!

@coderabbitai coderabbitai Bot left a comment

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Actionable comments posted: 2

🧹 Nitpick comments (5)
packages/slides/src/view/canvas/shapes/flowchart/or.ts (1)

14-21: 💤 Low value

Consider avoiding the duplicate endpoint in the ellipse approximation.

The loop iterates from i = 0 to i = segments (inclusive), which creates points at both angle 0 and angle 2π—the same position. The subsequent closePath() already handles the connection back to the start, making the duplicate point unnecessary.

♻️ Proposed refactor
- for (let i = 0; i <= segments; i++) {
+ for (let i = 0; i < segments; i++) {
    const angle = (i / segments) * Math.PI * 2;

This aligns with typical polygon approximation patterns and eliminates the redundant lineTo operation.

🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

In `@packages/slides/src/view/canvas/shapes/flowchart/or.ts` around lines 14 - 21,
The loop that approximates the ellipse currently iterates i = 0 to i <= segments
causing duplicate points at angle 0 and 2π; change the loop to iterate only up
to i < segments (or otherwise avoid the final angle duplicate) so the polygon
does not add a redundant lineTo before calling path.closePath(); update the loop
condition in the function that builds the ellipse (the for loop using variables
segments, angle, cx, cy, rx, ry and calling path.moveTo/path.lineTo) and keep
the existing path.closePath() as the sole connector back to the start.
packages/slides/src/view/canvas/shapes/builder.ts (1)

57-74: ⚡ Quick win

Validate points contract in regularPolygonPath.

The function documents points >= 3 but currently accepts invalid values silently. Add an explicit guard with a clear error.

♻️ Proposed fix
 export function regularPolygonPath(
   cx: number,
   cy: number,
   rx: number,
   ry: number,
   points: number,
   rotation: number = -Math.PI / 2,
 ): { x: number; y: number }[] {
+  if (!Number.isInteger(points) || points < 3) {
+    throw new RangeError(
+      'regularPolygonPath: `points` must be an integer greater than or equal to 3',
+    );
+  }
   const verts: { x: number; y: number }[] = [];
   for (let i = 0; i < points; i++) {
     const angle = rotation + (i / points) * Math.PI * 2;
     verts.push({
       x: cx + rx * Math.cos(angle),
       y: cy + ry * Math.sin(angle),
     });
   }
   return verts;
 }

As per coding guidelines, "Use meaningful error messages that help with debugging".

🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

In `@packages/slides/src/view/canvas/shapes/builder.ts` around lines 57 - 74, Add
an explicit validation at the start of regularPolygonPath to enforce points >=
3: check the points parameter (in the regularPolygonPath function) and if it's
less than 3 or not an integer, throw a clear Error with a meaningful message
like "regularPolygonPath: 'points' must be an integer >= 3, got: <value>" so
invalid inputs fail fast and aid debugging.
packages/slides/src/view/canvas/shapes/flowchart/punched-tape.ts (1)

20-21: ⚡ Quick win

Consider removing redundant lineTo before closePath.

Line 20's lineTo(0, topY) appears redundant because closePath() on line 21 automatically draws a straight line back to the starting point. The path already started at (0, topY) on line 16, so closePath() will close it correctly without the explicit lineTo.

♻️ Suggested simplification
   appendSineWave(path, w, 0, botY, -amp);
-  path.lineTo(0, topY);
   path.closePath();
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

In `@packages/slides/src/view/canvas/shapes/flowchart/punched-tape.ts` around
lines 20 - 21, Remove the redundant drawing call: the explicit path.lineTo(0,
topY) before path.closePath() is unnecessary because the path was started at (0,
topY) and closePath() will draw back to that start point; delete the
path.lineTo(0, topY) invocation (the surrounding code that sets up the path and
the subsequent path.closePath() should remain unchanged) and run the shape
rendering test to confirm no visual change.
packages/slides/src/view/canvas/shapes/flowchart/document.ts (1)

26-27: ⚡ Quick win

Consider removing redundant lineTo before closePath.

Line 26's lineTo(x, y) is redundant because the path already started at (x, y) on line 22, and closePath() on line 27 will automatically draw a straight line back to the starting point.

♻️ Suggested simplification
   appendSineWave(path, x + w, x, baseY, amp);
-  path.lineTo(x, y);
   path.closePath();
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

In `@packages/slides/src/view/canvas/shapes/flowchart/document.ts` around lines 26
- 27, Remove the redundant final segment: in the drawing routine in document.ts,
eliminate the extraneous path.lineTo(x, y) call just before path.closePath();
since the subpath already begins at (x, y) (created earlier in the same
function) and path.closePath() will implicitly draw the closing straight line,
remove the duplicate path.lineTo(x, y) to simplify the code and avoid an
unnecessary duplicate command.
docs/tasks/active/20260509-slides-shapes-p2-todo.md (1)

26-32: 💤 Low value

Minor: Add language identifier to fenced code block.

The fenced code block at line 26 should specify a language for better accessibility and rendering consistency.

📝 Suggested fix
-```
+```text
 docs/design/slides/slides-shapes-p2.md          (new — P2 spec)
 docs/design/slides/slides-shapes-p1.md          (modified — roadmap row)
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

In `@docs/tasks/active/20260509-slides-shapes-p2-todo.md` around lines 26 - 32,
Add a language identifier to the fenced code block that lists the changed files
(the block that begins with ``` and contains the lines starting
"docs/design/slides/slides-shapes-p2.md          (new — P2 spec)" and the
subsequent file lines); update the opening fence to include a language such as
"text" (e.g., change the opening ``` to ```text) so the block is properly
labeled for rendering and accessibility.
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

Inline comments:
In `@docs/design/slides/slides-shapes-p1.md`:
- Around line 90-93: The document still contains inconsistent references that
say P2 receives "toolbar number inputs" while the intended destination is P3;
update all instances of the phrasing "toolbar number inputs" and any mentions of
"adjustments-UX" that imply P2 (notably the occurrences referenced around the
earlier Section/Line 59 and later near Line 577) to state that the toolbar
number input UX moved to P3 (and add a parenthetical reference to
slides-shapes-p2.md if helpful for rationale), ensuring every mention across the
file consistently refers to P3 as the target for the toolbar inputs.

In `@docs/design/slides/slides-shapes-p2.md`:
- Around line 164-189: The two fenced code blocks that show the file tree
starting with "packages/slides/src/view/canvas/shapes/" and the single-line nav
label "Lines · Shapes · Block Arrows · Flowchart · Callouts · Equation · Stars"
need language identifiers to satisfy markdownlint MD040; edit the markdown to
change the opening triple-backticks to include a language (e.g., ```text) for
those two blocks (also apply the same change to the similar block at the "Lines
247-249" occurrence) so both fenced blocks declare a language.

---

Nitpick comments:
In `@docs/tasks/active/20260509-slides-shapes-p2-todo.md`:
- Around line 26-32: Add a language identifier to the fenced code block that
lists the changed files (the block that begins with ``` and contains the lines
starting "docs/design/slides/slides-shapes-p2.md          (new — P2 spec)" and
the subsequent file lines); update the opening fence to include a language such
as "text" (e.g., change the opening ``` to ```text) so the block is properly
labeled for rendering and accessibility.

In `@packages/slides/src/view/canvas/shapes/builder.ts`:
- Around line 57-74: Add an explicit validation at the start of
regularPolygonPath to enforce points >= 3: check the points parameter (in the
regularPolygonPath function) and if it's less than 3 or not an integer, throw a
clear Error with a meaningful message like "regularPolygonPath: 'points' must be
an integer >= 3, got: <value>" so invalid inputs fail fast and aid debugging.

In `@packages/slides/src/view/canvas/shapes/flowchart/document.ts`:
- Around line 26-27: Remove the redundant final segment: in the drawing routine
in document.ts, eliminate the extraneous path.lineTo(x, y) call just before
path.closePath(); since the subpath already begins at (x, y) (created earlier in
the same function) and path.closePath() will implicitly draw the closing
straight line, remove the duplicate path.lineTo(x, y) to simplify the code and
avoid an unnecessary duplicate command.

In `@packages/slides/src/view/canvas/shapes/flowchart/or.ts`:
- Around line 14-21: The loop that approximates the ellipse currently iterates i
= 0 to i <= segments causing duplicate points at angle 0 and 2π; change the loop
to iterate only up to i < segments (or otherwise avoid the final angle
duplicate) so the polygon does not add a redundant lineTo before calling
path.closePath(); update the loop condition in the function that builds the
ellipse (the for loop using variables segments, angle, cx, cy, rx, ry and
calling path.moveTo/path.lineTo) and keep the existing path.closePath() as the
sole connector back to the start.

In `@packages/slides/src/view/canvas/shapes/flowchart/punched-tape.ts`:
- Around line 20-21: Remove the redundant drawing call: the explicit
path.lineTo(0, topY) before path.closePath() is unnecessary because the path was
started at (0, topY) and closePath() will draw back to that start point; delete
the path.lineTo(0, topY) invocation (the surrounding code that sets up the path
and the subsequent path.closePath() should remain unchanged) and run the shape
rendering test to confirm no visual change.
🪄 Autofix (Beta)

Fix all unresolved CodeRabbit comments on this PR:

  • Push a commit to this branch (recommended)
  • Create a new PR with the fixes

ℹ️ Review info
⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro

Run ID: b3017015-d476-4a53-825d-ad29c8b05de9

📥 Commits

Reviewing files that changed from the base of the PR and between 79476c2 and 829c1a0.

⛔ Files ignored due to path filters (17)
  • packages/frontend/tests/visual/baselines/harness-visual.browser.desktop.dark.png is excluded by !**/*.png
  • packages/frontend/tests/visual/baselines/harness-visual.browser.mobile.dark.png is excluded by !**/*.png
  • packages/frontend/tests/visual/baselines/harness-visual.browser.mobile.png is excluded by !**/*.png
  • packages/frontend/tests/visual/baselines/harness-visual.browser.png is excluded by !**/*.png
  • packages/frontend/tests/visual/baselines/harness-visual.browser.slides-canvas-shapes-catalog-dark.desktop.dark.png is excluded by !**/*.png
  • packages/frontend/tests/visual/baselines/harness-visual.browser.slides-canvas-shapes-catalog-dark.mobile.dark.png is excluded by !**/*.png
  • packages/frontend/tests/visual/baselines/harness-visual.browser.slides-canvas-shapes-catalog-dark.mobile.png is excluded by !**/*.png
  • packages/frontend/tests/visual/baselines/harness-visual.browser.slides-canvas-shapes-catalog-dark.png is excluded by !**/*.png
  • packages/frontend/tests/visual/baselines/harness-visual.browser.slides-canvas-shapes-catalog-light.desktop.dark.png is excluded by !**/*.png
  • packages/frontend/tests/visual/baselines/harness-visual.browser.slides-canvas-shapes-catalog-light.mobile.dark.png is excluded by !**/*.png
  • packages/frontend/tests/visual/baselines/harness-visual.browser.slides-canvas-shapes-catalog-light.mobile.png is excluded by !**/*.png
  • packages/frontend/tests/visual/baselines/harness-visual.browser.slides-canvas-shapes-catalog-light.png is excluded by !**/*.png
  • packages/frontend/tests/visual/baselines/harness-visual.browser.slides-canvas-shapes-catalog-material.desktop.dark.png is excluded by !**/*.png
  • packages/frontend/tests/visual/baselines/harness-visual.browser.slides-canvas-shapes-catalog-material.mobile.dark.png is excluded by !**/*.png
  • packages/frontend/tests/visual/baselines/harness-visual.browser.slides-canvas-shapes-catalog-material.mobile.png is excluded by !**/*.png
  • packages/frontend/tests/visual/baselines/harness-visual.browser.slides-canvas-shapes-catalog-material.png is excluded by !**/*.png
  • packages/slides/src/view/canvas/shapes/__snapshots__/registry.snap.test.ts.snap is excluded by !**/*.snap
📒 Files selected for processing (56)
  • docs/design/README.md
  • docs/design/slides/slides-shapes-p1.md
  • docs/design/slides/slides-shapes-p2.md
  • docs/tasks/active/20260509-slides-shapes-p2-lessons.md
  • docs/tasks/active/20260509-slides-shapes-p2-todo.md
  • packages/frontend/src/app/harness/visual/slides-scenarios.tsx
  • packages/frontend/src/app/slides/shape-picker-helpers.ts
  • packages/frontend/tests/app/slides/shape-picker.test.ts
  • packages/slides/src/model/element.ts
  • packages/slides/src/view/canvas/shapes/basic/pentagon.ts
  • packages/slides/src/view/canvas/shapes/builder.test.ts
  • packages/slides/src/view/canvas/shapes/builder.ts
  • packages/slides/src/view/canvas/shapes/flowchart/delay.test.ts
  • packages/slides/src/view/canvas/shapes/flowchart/delay.ts
  • packages/slides/src/view/canvas/shapes/flowchart/display.test.ts
  • packages/slides/src/view/canvas/shapes/flowchart/display.ts
  • packages/slides/src/view/canvas/shapes/flowchart/document.test.ts
  • packages/slides/src/view/canvas/shapes/flowchart/document.ts
  • packages/slides/src/view/canvas/shapes/flowchart/internal-storage.test.ts
  • packages/slides/src/view/canvas/shapes/flowchart/internal-storage.ts
  • packages/slides/src/view/canvas/shapes/flowchart/manual-input.test.ts
  • packages/slides/src/view/canvas/shapes/flowchart/manual-input.ts
  • packages/slides/src/view/canvas/shapes/flowchart/manual-operation.test.ts
  • packages/slides/src/view/canvas/shapes/flowchart/manual-operation.ts
  • packages/slides/src/view/canvas/shapes/flowchart/multidocument.test.ts
  • packages/slides/src/view/canvas/shapes/flowchart/multidocument.ts
  • packages/slides/src/view/canvas/shapes/flowchart/offpage-connector.test.ts
  • packages/slides/src/view/canvas/shapes/flowchart/offpage-connector.ts
  • packages/slides/src/view/canvas/shapes/flowchart/or.test.ts
  • packages/slides/src/view/canvas/shapes/flowchart/or.ts
  • packages/slides/src/view/canvas/shapes/flowchart/predefined-process.test.ts
  • packages/slides/src/view/canvas/shapes/flowchart/predefined-process.ts
  • packages/slides/src/view/canvas/shapes/flowchart/punched-card.test.ts
  • packages/slides/src/view/canvas/shapes/flowchart/punched-card.ts
  • packages/slides/src/view/canvas/shapes/flowchart/punched-tape.test.ts
  • packages/slides/src/view/canvas/shapes/flowchart/punched-tape.ts
  • packages/slides/src/view/canvas/shapes/flowchart/summing-junction.test.ts
  • packages/slides/src/view/canvas/shapes/flowchart/summing-junction.ts
  • packages/slides/src/view/canvas/shapes/flowchart/terminator.test.ts
  • packages/slides/src/view/canvas/shapes/flowchart/terminator.ts
  • packages/slides/src/view/canvas/shapes/flowchart/wave.ts
  • packages/slides/src/view/canvas/shapes/index.ts
  • packages/slides/src/view/canvas/shapes/stars/star10.test.ts
  • packages/slides/src/view/canvas/shapes/stars/star10.ts
  • packages/slides/src/view/canvas/shapes/stars/star4.test.ts
  • packages/slides/src/view/canvas/shapes/stars/star4.ts
  • packages/slides/src/view/canvas/shapes/stars/star5.test.ts
  • packages/slides/src/view/canvas/shapes/stars/star5.ts
  • packages/slides/src/view/canvas/shapes/stars/star6.test.ts
  • packages/slides/src/view/canvas/shapes/stars/star6.ts
  • packages/slides/src/view/canvas/shapes/stars/star7.test.ts
  • packages/slides/src/view/canvas/shapes/stars/star7.ts
  • packages/slides/src/view/canvas/shapes/stars/star8.test.ts
  • packages/slides/src/view/canvas/shapes/stars/star8.ts
  • packages/slides/src/view/editor/interactions/insert.test.ts
  • packages/slides/src/view/editor/interactions/insert.ts

Comment on lines +90 to +93
P2's adjustments-UX cell was originally "toolbar number inputs"; it
moved to P3 once the Google-Slides-canonical UX (yellow-diamond
drag handles) was confirmed as the destination pattern. See
`slides-shapes-p2.md` for the rationale.

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue | 🟡 Minor | ⚡ Quick win

Resolve remaining P2/P3 adjustments-UX wording mismatch in this doc.

This section now correctly says the UX moved to P3, but other sections still say P2 gets toolbar inputs (see Line 59 and Line 577), which makes the roadmap internally inconsistent.

📝 Proposed follow-up edits
-  corner radius = 8px, star points = 5). P2 adds toolbar number
-  inputs; P3 adds drag handles (yellow diamonds). P1 does not block
+  corner radius = 8px, star points = 5). P2 keeps defaults only;
+  P3 adds drag handles (yellow diamonds) + popover number input. P1 does not block
   on either.
-| P2 | Toolbar number-input UI for `adjustments`; +20 shapes (flowchart 14 + stars 6) |
+| P2 | +20 shapes (flowchart 14 + stars 6), no adjustments editing UI |
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

In `@docs/design/slides/slides-shapes-p1.md` around lines 90 - 93, The document
still contains inconsistent references that say P2 receives "toolbar number
inputs" while the intended destination is P3; update all instances of the
phrasing "toolbar number inputs" and any mentions of "adjustments-UX" that imply
P2 (notably the occurrences referenced around the earlier Section/Line 59 and
later near Line 577) to state that the toolbar number input UX moved to P3 (and
add a parenthetical reference to slides-shapes-p2.md if helpful for rationale),
ensuring every mention across the file consistently refers to P3 as the target
for the toolbar inputs.

Comment thread docs/design/slides/slides-shapes-p2.md Outdated
- Drop the redundant duplicate vertex (i = segments) in the
  full-ellipse polylines in or.ts and summing-junction.ts; closePath
  joins the last vertex back to the start so the extra lineTo was
  emitting a zero-length edge. Snapshot regenerated, geometry
  identical visually.
- Drop the redundant `lineTo(start)` before closePath in
  document.ts and punched-tape.ts for the same reason.
- Validate `points >= 3` in regularPolygonPath with a meaningful
  RangeError so misuse fails fast at the call site rather than
  silently returning an empty / two-point array.
- Add `text` language identifier to two unidentified fenced code
  blocks in slides-shapes-p2.md (markdownlint MD040).
All checklist items in the P2 todo file are checked, so
\`pnpm tasks:archive\` moved the todo + lessons pair into
\`docs/tasks/archive/2026/05/\`. \`pnpm tasks:index\` regenerated
the active and archive READMEs accordingly.
@hackerwins
hackerwins merged commit 31b4056 into main May 10, 2026
1 check passed
@hackerwins
hackerwins deleted the slides-shapes-p2 branch May 10, 2026 11:26
hackerwins added a commit that referenced this pull request May 10, 2026
Each package already has its own README, but there was no top-level
entry point inside `packages/` that summarised what lives where.
Splits the listing into engines (sheets, docs, slides) and apps and
services (frontend, backend, cli, documentation) so a new contributor
can orient before drilling into a single package.

Four active tasks have shipped on main (PR #189 undo-destroys-initial-block,
#202+#205 slides-shapes-p1, #206 slides-thumb-responsive, #204
contributing-md) but their todo files were still sitting in
`docs/tasks/active/` because some checkboxes were never ticked. Mark
the remaining items done and run `pnpm tasks:archive` to move the five
files into `archive/2026/05/`.

While there, eight April task docs were still loose at the archive
root (predating the by-month layout). Move them into `archive/2026/04/`
so the directory is uniformly organised and the index counts stay
accurate.

Co-authored-by: Claude Opus 4.7 (1M context) <[email protected]>
hackerwins added a commit that referenced this pull request May 10, 2026
P2 (#205) shipped 55 OOXML shapes and registered 33 entries in
ADJUSTMENT_SPECS but no editing UI. P3-A.1 starts that workstream
around Google Slides' canonical yellow-diamond drag pattern with a
9-shape pilot covering all 4 adjustment axis types — radial (6
stars), linear (roundRect, chevron), point (wedgeRectCallout) — so
P3-A.2 can sweep the remaining 24 shapes mechanically against the
same registry.

Adds ADJUSTMENT_HANDLES parallel to PATH_BUILDERS / ADJUSTMENT_SPECS;
each AdjustmentHandle exposes element-local position + apply
(pointer → new full adjustments array) so the editor owns rotation
and the per-shape files stay pure geometry. Star math runs in
unit-ellipse space (pointer pre-divided by rx, ry) so non-square
frames behave consistently with the path builder; pointer projects
onto the handle's ray rather than via raw hypot, keeping
perpendicular wiggle from changing the value.

Drag loop mirrors startResize: pointermove paints a local preview
via the existing forceRender hook, pointerup commits one
store.updateElementData → one undo entry. 2px threshold prevents
accidental commits on click; Shift snaps every component to its
default when all are within 5% of range; tooltip uses
AdjustmentSpec.format for the live readout. No Yorkie schema
migration — data.adjustments has existed since P1; existing P1/P2
documents render bit-identical until the user drags a handle.

Two follow-ups are deferred to P3-A.2 and captured in the lessons
file: an 8px inset guard for handles that overlap resize handles at
boundary values (e.g. roundRect with r=0), and a rotated-frame
paint position unit test.

Co-authored-by: Claude Sonnet 4.6 <[email protected]>
@hackerwins hackerwins mentioned this pull request May 11, 2026
6 tasks
hackerwins added a commit that referenced this pull request May 11, 2026
Adds @wafflebase/slides as a third surface alongside Sheets and Docs,
plus 53-shape library (Phase 1+2), adjustment handles for 9 pilot
shapes (P3-A.1), live snap guides, align/distribute toolbar, themed
authoring, and layout-change UI. Also ships Sheets cell comments
(Phase B), docs peer-avatar caret jump, yorkie-js-sdk 0.7.8 upgrade,
and CLI/REST API improvements (docs export imageFetcher, expired
session refresh, REST docs split). Minor bump because slides is a
new top-level package.

Highlights: #184 #185 #186 #187 #188 #189 #190 #191 #192 #197 #198
#201 #202 #203 #204 #205 #206 #207 #209 #210
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant