Merge Request차이 프론트엔드 개요

%%{init: { "fontFamily": "GitLab Sans" }}%% flowchart TB accDescr: GitLab 프론트엔드에서 컴포넌트를 렌더링하는 플로차트 classDef 코드 font-family: 고정폭; A["diffs~~app.vue"] descVirtualScroller(["가상 스크롤러"]) 코드단위[["v-for(diffFiles)"]] B["diffs~~diff_file.vue"] C["diffs~~diff_file_header.vue"] D["diffs~~diff_stats.vue"] E["diffs~~diff_content.vue"] isTextFile{텍스트 파일인가요} isWhitespaceOnly{공백만 있는가요} notDiffable{비교 불가능한가요} noPreview{"별도의 미리 보기가 없음"} %% 텍스트 변경 사항 dirDiffViewer>"vue_shared~~diff_viewer"] F["./viewers/not_diffable.vue"] G["./viewers/no_preview.vue"] H["./diff_viewer.vue"] I["diffs~~diff_view.vue"] isRenamed{이름 변경되었나요} isModeChanged{모드가 변경되었나요} hasNewPath{새 경로가 없나요} isImage{이미지 파일인가요} J["./viewers/renamed.vue"] K["./viewers/mode_changed.vue"] descNoViewer(["뷰어가 렌더링되지 않음"]) L["./viewers/image_diff_viewer.vue"] M["./viewers/download.vue"] N["vue_shared~~download_diff_viewer.vue"] isReplaced{이미지가 교체되었나요} O["vue_shared~~image_viewer.vue"] switchImageMode((image_diff_viewer.mode)) P["./viewers/image_diff/onion_skin_viewer.vue"] Q["./viewers/image_diff/swipe_viewer.vue"] R["./viewers/image_diff/two_up_viewer.vue"] S["diffs~~image_diff_overlay.vue"] 댓글단위[["v-for(discussions)"]] T["vue_shared~~design_note_pin.vue"] U["vue_shared~~user_avatar_link.vue"] V["diffs~~diff_discussions.vue"] W["batch_comments~~diff_file_drafts.vue"] 댓글단위(두 개의 파일 비교 댓글)["v-for(discussions)"] 초안단위(두 개의 파일 비교 초안)["v-for(drafts)"] X["notes~~notable_discussion.vue"] %% 텍스트 파일 변경 사항 코드단위(두 개의 파일 비교)["v-for(diffLines)"] Y["diffs~~diff_expansion_cell.vue"] Z["diffs~~diff_row.vue"] AA["diffs~~diff_line.vue"] AB["batch_comments~~draft_note.vue"] AC["diffs~~diff_comment_cell.vue"] AD["diffs~~diff_gutter_avatars.vue"] AE["ee-diffs~~inline_findings_gutter_icon_dropdown.vue"] AF["notes~~noteable_note.vue"] AG["notes~~note_actions.vue"] AH["notes~~note_body.vue"] AI["notes~~note_header.vue"] AJ["notes~~reply_button.vue"] AK["notes~~note_awards_list.vue"] AL["notes~~note_edited_text.vue"] AM["notes~~note_form.vue"] AN["vue_shared~~awards_list.vue"] AO["emoji~~picker.vue"] AP["emoji~~emoji_list.vue"] descEmojiVirtualScroll(["가상 스크롤러"]) AQ["emoji~~category.vue"] AR["emoji~emoji_category.vue"] AS["vue_shared~~markdown_editor.vue"] class 코드단위,댓글단위,초안단위 코드; class 코드단위(두 개의 파일 비교),초안단위(두 개의 파일 비교) 코드; %% 이 스위치 노드에도 코드 스타일을 적용합니다 class switchImageMode 코드; %% 이 boolean 노드에도 코드 스타일을 적용합니다 class isTextFile,isWhitespaceOnly,notDiffable,noPreview 코드; class isRenamed,isModeChanged,hasNewPath,isImage 코드; class isReplaced 코드; A --> descVirtualScroller A -->|"가상 스크롤러는 페이지 검색을 실행하면 비활성화됩니다. (Cmd/Ctrl+f)"|코드단위 descVirtualScroller --> 코드단위 코드단위 --> B --> C --> D B --> E %% 파일 보기 플래그 캐스케이드 E --> isTextFile isTextFile --> |예| I isTextFile --> |아니요| isWhitespaceOnly isWhitespaceOnly --> |예| descShowChanges isWhitespaceOnly --> |아니요| dirDiffViewer dirDiffViewer --> H H --> notDiffable notDiffable --> |예| F notDiffable --> |아니요| noPreview noPreview --> |예| G noPreview --> |아니요| isRenamed isRenamed --> |예| J isRenamed --> |아니요| isModeChanged isModeChanged --> |예| K isModeChanged --> |아니요| hasNewPath hasNewPath --> |예| isImage hasNewPath --> |아니요| descNoViewer isImage --> |예| L isImage --> |아니요| M M --> N %% 이미지 디프 뷰어 L --> isReplaced isReplaced --> |예| switchImageMode isReplaced --> |아니요| O switchImageMode -->|"'twoup' (기본값)"| R switchImageMode -->|'onion'| P switchImageMode -->|'swipe'| Q P & Q --> S S --> 댓글단위 S --> AM R-->|"노트 컨테이너 div에 렌더링됨"|U & W & V %% 상기 "P & Q --> S" 문 아래에 이 노드 관련은 결합하지 마십시오 %% 노드 관계의 순서는 그래프의 레이아웃을 정의하고, 이 순서에 따라야 합니다. R --> S V --> 초안단위 W --> 댓글단위 %% 이 보이지 않는 링크는 `noteable_discussion`이 `design_note_pin` 위에 렌더링되도록 합니다 X ~~~ T 초안단위 --> AB 댓글단위 & 초안단위 & 댓글단위 --> T 초안단위 --> X %% 텍스트 파일 디프 뷰어 I --> 코드단위 코드단위 --> Z 코드단위 -->|"isMatchLine?"| Y 코드단위 -->|"hasCodeQuality?"| AA 코드단위 -->|"hasDraftNote(s)?"| AB Z -->|"hasCodeQuality?"| AE Z -->|"hasDiscussions?"| AD AA --> AC %% 초안 노트들 AB --> AF AF --> AG & AH & AI AG --> AJ AH --> AK & AL & AM AK --> AN --> AO --> AP --> descEmojiVirtualScroll --> AQ --> AR AM --> AS

{
  "key": "",
  "path": "",
  "name": "",
  "type": "",
  "tree": [],
  "changed": true,
  "diffLoaded": false,
  "filePaths": {
    "old": file.old_path,
    "new": file.new_path
  },
  "tempFile": false,
  "deleted": false,
  "fileHash": "",
  "addedLines": 1,
  "removedLines": 1,
  "parentPath": "/",
  "submodule": false
}

%%{init: { "fontFamily": "GitLab Sans" }}%% graph TD accTitle: 차이점 형식 지정 accDescr: 차이점 렌더링시 사용되는 단계의 플로우차트를 포함한 작업 A[fetchDiffFilesBatch] --> B[commit SET_DIFF_DATA_BATCH] --> C[prepareDiffData] --> D[prepareRawDiffFile] --> E[ensureBasicDiffFileLines] --> F[prepareDiffFileLines] --> G[finalizeDiffFile] --> H[deduplicateFilesList]

%%{init: { "fontFamily": "GitLab Sans" }}%% graph TD accTitle: 렌더 대기열 파이프라인 accDescr: 렌더 대기열 파이프라인의 단계에 대한 플로우차트 A[startRenderDiffsQueue] -->B B[commit RENDER_FILE current file index] -->C C[canRenderNextFile?] C -->|Yes| D[Render file] -->B C -->|No| E[Re-run requestIdleCallback] -->C