[feat/MAT-355] 렌더링 분리#299
Open
b0nsu wants to merge 1 commit intorefactor/mat-354-type-modelfrom
Open
Conversation
- render/skia/skiaRenderUtils.ts: wrapTextToLines (중복 텍스트 줄바꿈 로직 통합) - render/skia/useSkiaDrawingRenderer.tsx: renderedPaths, renderedTexts, hoverOpacity 훅 - render/skia/SkiaDrawingCanvasSurface.tsx: Canvas 래퍼 컴포넌트 - DrawingCanvas.tsx: calculateTextLineCount를 wrapTextToLines 기반으로 단순화 - DrawingCanvas.tsx에서 렌더링 로직 136줄 제거 Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
Collaborator
Author
실기기 테스트 중 발견된 이슈증상: 스크랩 진입 시 필기 데이터가 로딩된 후 사라짐 원인: TanStack Query refetch로 인해 정상 데이터(40획, 16604 bytes) 로딩 후 빈 데이터(36 bytes)가 다시 로그 증거: 판단: MAT-355 렌더링 분리와 무관한 기존 이슈. develop에서도 동일하게 재현 가능성 높음. 별도 이슈로 추적 필요.
|
Contributor
There was a problem hiding this comment.
Pull request overview
DrawingCanvas에서 Skia 렌더링 관련 로직을 render/skia/ 하위로 분리해, 렌더링 관심사를 컴포넌트 본체 로직(gesture/state/history)과 분리하는 리팩터링 PR입니다.
Changes:
- Skia Canvas 래퍼 컴포넌트(
SkiaDrawingCanvasSurface)로 캔버스 surface 책임 분리 - 텍스트 줄바꿈 로직을
wrapTextToLines()유틸로 추출하여 중복 제거 - Path/Text/hover 렌더링을
useSkiaDrawingRenderer()훅으로 추출하고 DrawingCanvas는 해당 결과를 사용
Reviewed changes
Copilot reviewed 4 out of 4 changed files in this pull request and generated 1 comment.
| File | Description |
|---|---|
| packages/pointer-native-drawing/src/render/skia/useSkiaDrawingRenderer.tsx | paths/texts 렌더링 및 hover opacity derived value 생성 로직을 훅으로 분리 |
| packages/pointer-native-drawing/src/render/skia/skiaRenderUtils.ts | 텍스트 줄바꿈(wrapping) 유틸을 공용 함수로 추출 |
| packages/pointer-native-drawing/src/render/skia/SkiaDrawingCanvasSurface.tsx | Canvas 스타일/높이 적용을 전담하는 surface 컴포넌트 추가 |
| packages/pointer-native-drawing/src/DrawingCanvas.tsx | 기존 렌더링 코드를 제거하고 새 훅/유틸/컴포넌트로 대체 |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
Comment on lines
204
to
+208
| if (textLineCountCache.current.has(cacheKey)) { | ||
| return textLineCountCache.current.get(cacheKey) ?? 1; | ||
| } | ||
|
|
||
| let totalLines = 0; | ||
| const paragraphs = text.split('\n'); | ||
|
|
||
| paragraphs.forEach((paragraph) => { | ||
| if (!paragraph) { | ||
| totalLines += 1; | ||
| return; | ||
| } | ||
|
|
||
| const words = paragraph.split(' '); | ||
| let currentLine = ''; | ||
| let paragraphLines = 0; | ||
|
|
||
| words.forEach((word, idx) => { | ||
| const testLine = currentLine ? `${currentLine} ${word}` : word; | ||
| const textWidth = font.measureText(testLine).width; | ||
|
|
||
| if (textWidth > maxTextWidth && currentLine) { | ||
| paragraphLines += 1; | ||
| currentLine = word; | ||
| } else { | ||
| currentLine = testLine; | ||
| } | ||
|
|
||
| if (idx === words.length - 1) { | ||
| paragraphLines += 1; | ||
| } | ||
| }); | ||
|
|
||
| totalLines += paragraphLines; | ||
| }); | ||
| const lineCount = wrapTextToLines(text, maxTextWidth, (t) => font.measureText(t)).length; |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
DrawingCanvas에서 Skia 렌더링 로직을
render/skia/디렉토리로 추출합니다.SkiaDrawingCanvasSurface, skiaRenderUtils, useSkiaDrawingRenderer로 분리하여 렌더링 관심사를 격리합니다.
Linear
Changes
render/skia/SkiaDrawingCanvasSurface.tsxrender/skia/skiaRenderUtils.tsrender/skia/useSkiaDrawingRenderer.tsxTesting
pnpm typecheck통과pnpm lint통과Risk / Impact
pointer-native-drawing패키지 내부 구조 변경실기기 테스트 중 발견된 기존 이슈
증상: 스크랩 진입 시 필기 데이터가 로딩된 후 사라짐
원인: TanStack Query refetch로 인해 정상 데이터(40획) 로딩 후 빈 데이터가
setStrokes를 재호출하여 덮어씌움판단: MAT-355 변경과 무관한 기존 이슈.
해결: PR #288 (MAT-349: handwriting API 캐시 전략 개선)에서
staleTime: Infinity+refetchOnWindowFocus: false적용으로 해결됨. #288 머지 후 해소.