[DONE] Pattern Lab 에서 매트릭스 크기를 바꾼 뒤에도 픽셀 되돌리기가 그림을 지킨다

[patternflow-bot]

studio / https://claude.ai/code/session_011kmmYcHXz5CmHbQQyXrdyf

Pattern Lab 에서 픽셀을 그리고 매트릭스 크기를 바꾼 뒤 Ctrl+Z 를 누르면, 줄였을 땐 RangeError 로 되돌리기가 멈췄고 키웠을 땐 옛 줄이 새 폭에 밀려 써져 그림이 어긋났어요. 되돌리기 기록이 찍힌 때의 크기를 같이 들고 있다가 크기를 바꿀 때와 같은 꼴(가운데에 맞춰 자르거나 채우기)로 되돌리게 고쳤어요. 머지하면 크기를 바꾼 뒤에도 Ctrl+Z 와 Ctrl+Shift+Z 가 그림을 그대로 지켜요.

좋아지는 것: 크기를 바꾼 뒤에도 픽셀 되돌리기가 맞게 된다 — 그리던 그림이 어긋나거나 멈추지 않는다

할 일

• incoming/ROUND.md 「한 바퀴」 절차 읽기
• 앞 바퀴 PR 댓글 읽기. 1바퀴라 앞 바퀴 PR 이 없고, 절차 PR [DONE] Patternflow 바퀴 절차와 후보 표 #95 엔 댓글·리뷰가 없어요
• 후보 표에서 고르기: 후보 1
• 지금 코드에서 두 버그 재현
• pixelHistory.ts 고침과 PixelPanel.tsx 호출 셋
• 새 pixelHistory.test.ts 일곱, PixelPanel.test.tsx 하나
• npm ci · lint · typecheck · build · check:ci · check:voice
• dev merge 뒤 [DONE]

한 일

web/src/lib/lab/pixelHistory.ts 의 되돌리기 한 칸이 맨 버퍼였는데, 이제 { data, width, height } 예요. 되돌리거나 다시 할 때 그 칸의 크기가 지금 레이어와 다르면 resizeSurface 를 거쳐 넣어요. 크기를 바꿀 때 resizePixelLayers 가 레이어에 쓰는 바로 그 함수라, 되돌린 그림이 크기를 바꾼 레이어와 같은 자리에 앉아요.

PixelPanel.tsx 는 pixel.data 대신 pixel 을 넘겨요. 세 줄이에요.

시험은 둘이에요. web/src/lib/lab/pixelHistory.test.ts 는 줄인 뒤, 키운 뒤, 크기를 바꾸기 앞뒤 칸이 섞인 스택, 되돌리기와 다시 하기 사이의 크기 바꾸기, 40칸 상한, prune 을 봐요. PixelPanel.test.tsx 의 「undo still works after the matrix size changes」는 실제 길을 그대로 밟아요. (40, 20) 에 점을 찍고 setMatrix 로 128×64 를 64×32 로 줄인 뒤 Ctrl+Z, Ctrl+Shift+Z 를 눌러요.

증거

고치기 전 dev(c065e13)에서 버리는 재현 시험을 돌렸어요.

 × repro on dev > undo after shrinking 4x2 -> 2x2 13ms
   → expected [Function] to not throw an error but 'RangeError' was thrown
 × repro on dev > undo after growing 2x1 -> 4x3 8ms
   → expected [ 9, 9, 9, 255, +0, +0, +0, +0, …(40) ] to deeply equal [ +0, +0, +0, +0, +0, +0, +0, …(41) ]

새 패널 시험을 고치기 전 코드에 돌리면 키 처리기가 던져요.

RangeError: offset is out of bounds
   × PixelPanel > undo still works after the matrix size changes 177ms
     → expected [ 255, 77, +0, 255 ] to deeply equal [ +0, +0, +0, +0 ]

고친 뒤.

 ✓ src/lib/lab/pixelHistory.test.ts (7 tests) 12ms
 ✓ src/app/pattern-lab/panels/PixelPanel.test.tsx (16 tests) 746ms
      Tests  23 passed (23)

web/ 에서 다섯을 돌린 끝줄이에요.

npm ci                            added 794 packages, and audited 795 packages in 56s
npm run lint -- --max-warnings=0  exit 0
npm run typecheck                 exit 0
npm run build                     ƒ  (Dynamic)  server-rendered on demand · exit 0
npm run check:ci                  skipped  roadmap · exit 0
npm run check:voice               check:voice: nothing found

check:ci 안의 Vitest 는 Test Files 36 passed (36), Tests 495 passed (495) 예요. drift 러너 끝은 roadmap 하나만 skipped 이고 나머지 열다섯은 passed 예요. roadmap 은 gh 로그인이 없는 컨테이너라 건너뛰었고, PR 에서 drift.yml 이 다시 돌려요.

화면 배치는 바뀌지 않아서 390px 와 1440px 사진은 찍지 않았어요. 바뀐 것은 Ctrl+Z 를 누른 뒤 버퍼에 무엇이 들어가는지이고, 패널 시험이 그 버퍼를 읽어요.

실행법

cd web
npx vitest run src/lib/lab/pixelHistory.test.ts src/app/pattern-lab/panels/PixelPanel.test.tsx

손으로는 npm run dev 뒤 /pattern-lab 에서 픽셀 레이어에 점을 찍고, 매트릭스를 64 × 32 로 줄인 뒤 Ctrl+Z 를 눌러요. 고치기 전엔 콘솔에 RangeError 가 뜨고 점이 남아요.

가정

• 크기를 바꿀 때 기록을 지우는 쪽도 있었어요. 그러면 크기를 한 번 바꾼 사람은 그 앞의 붓질을 되돌릴 수 없어요. 그래서 기록을 남기고 크기에 맞춰 넣는 쪽을 골랐어요.
• 크기 바꾸기는 되돌리기 한 칸이 아니에요. 매트릭스 크기는 프로젝트 값이고 픽셀 되돌리기는 레이어 버퍼만 다뤄요. Ctrl+Z 는 크기를 바꾸기 전 붓질을 새 크기 위에서 되돌려요.
• 줄였다가 다시 키운 뒤 크기 바꾸기 전 칸으로 되돌리면, 잘려 나갔던 가장자리가 그 칸의 판대로 돌아와요. 그 칸이 원래 크기로 남아 있어서예요. 되돌리기가 「그때의 그림」을 돌려주는 것이라 맞다고 봤어요.
• PixelPanel.test.tsx 에 시험 하나를 더한 것은 후보의 「고칠 곳」 밖이에요. 버그가 스토어의 setMatrix 와 되돌리기 기록 사이에서 나서, 그 길을 그대로 밟는 시험이 있어야 다시 깨지지 않는다고 봤어요.

Changelog

Web

• Pattern Lab's pixel undo survives a matrix resize. Undo after shrinking the matrix threw a RangeError, and after growing it wrote the old rows into the new buffer. Each undo frame now keeps its size and goes back through the same centred crop or pad the resize gave the layer.

바퀴

바퀴 1 · 후보 1 「Pattern Lab 에서 매트릭스 크기를 바꾼 뒤에도 픽셀 되돌리기가 그림을 지킨다」

다음 바퀴

• 후보 2 「링크를 메신저나 X 에 붙이면 쪽마다 제 제목과 그림이 뜬다」. 지금은 /guide/build, /pattern 같은 쪽이 링크 미리보기에 그림 없이 나가고, twitter:title 은 어느 쪽이든 첫 화면 제목이에요.
• 후보 3 「Pattern Lab 의 Del 이 레이어를 지우기 전에 한 번 묻는다」. 되돌릴 길이 없고 자동 저장이 곧 덮어써서, 실수 한 번에 픽셀 그림 하나가 사라져요.
• 후보 4 「폰에서 Pattern Lab 패널이 한 칸씩 넓게 보인다」. 390px 에서 세 칸으로 눌려 글이 잘리고 입력이 밖으로 나가요.

🤖 Generated with Claude Code

https://claude.ai/code/session_011kmmYcHXz5CmHbQQyXrdyf