|
| 1 | +<script lang="ts"> |
| 2 | + import emptyFileSvg from '$lib/assets/empty-state/empty-file.svg?raw'; |
| 3 | + import { FILE_SERVICE } from '$lib/files/fileService'; |
| 4 | + import { inject } from '@gitbutler/core/context'; |
| 5 | + import { ImageDiff, EmptyStatePlaceholder } from '@gitbutler/ui'; |
| 6 | + import type { TreeChange } from '$lib/hunks/change'; |
| 7 | +
|
| 8 | + type Props = { |
| 9 | + projectId: string; |
| 10 | + change: TreeChange; |
| 11 | + /** If provided, this is a commit diff (not a workspace diff). */ |
| 12 | + commitId?: string; |
| 13 | + }; |
| 14 | +
|
| 15 | + type ImageSource = |
| 16 | + | { type: 'workspace'; path: string } |
| 17 | + | { type: 'commit'; path: string; commitId: string } |
| 18 | + | { type: 'blob'; path: string; blobId: string }; |
| 19 | +
|
| 20 | + type LoadStrategy = { |
| 21 | + before: ImageSource | null; |
| 22 | + after: ImageSource | null; |
| 23 | + }; |
| 24 | +
|
| 25 | + const { projectId, change, commitId }: Props = $props(); |
| 26 | + const fileService = inject(FILE_SERVICE); |
| 27 | +
|
| 28 | + let beforeImageUrl = $state<string | null>(null); |
| 29 | + let afterImageUrl = $state<string | null>(null); |
| 30 | + let loadError = $state<string | null>(null); |
| 31 | + let isLoading = $state<boolean>(true); |
| 32 | +
|
| 33 | + // Decide image sources for before/after panels without changing logic. |
| 34 | + function getLoadStrategy(): LoadStrategy { |
| 35 | + const { status, path } = change; |
| 36 | + const isCommitDiff = !!commitId; |
| 37 | +
|
| 38 | + switch (status.type) { |
| 39 | + case 'Addition': |
| 40 | + return isCommitDiff |
| 41 | + ? { before: null, after: { type: 'commit' as const, path, commitId: commitId! } } |
| 42 | + : { before: null, after: { type: 'workspace' as const, path } }; |
| 43 | +
|
| 44 | + case 'Deletion': |
| 45 | + return isCommitDiff |
| 46 | + ? { before: { type: 'commit' as const, path, commitId: `${commitId}^` }, after: null } |
| 47 | + : { |
| 48 | + before: { type: 'blob' as const, path, blobId: status.subject.previousState.id }, |
| 49 | + after: null |
| 50 | + }; |
| 51 | +
|
| 52 | + case 'Modification': |
| 53 | + return isCommitDiff |
| 54 | + ? { |
| 55 | + before: { type: 'commit' as const, path, commitId: `${commitId}^` }, |
| 56 | + after: { type: 'commit' as const, path, commitId: commitId! } |
| 57 | + } |
| 58 | + : { |
| 59 | + before: { type: 'blob' as const, path, blobId: status.subject.previousState.id }, |
| 60 | + after: { type: 'workspace' as const, path } |
| 61 | + }; |
| 62 | +
|
| 63 | + case 'Rename': |
| 64 | + return isCommitDiff |
| 65 | + ? { |
| 66 | + before: { |
| 67 | + type: 'commit' as const, |
| 68 | + path: status.subject.previousPath, |
| 69 | + commitId: `${commitId}^` |
| 70 | + }, |
| 71 | + after: { type: 'commit' as const, path, commitId: commitId! } |
| 72 | + } |
| 73 | + : { |
| 74 | + before: { |
| 75 | + type: 'blob' as const, |
| 76 | + path: status.subject.previousPath, |
| 77 | + blobId: status.subject.previousState.id |
| 78 | + }, |
| 79 | + after: { type: 'workspace' as const, path } |
| 80 | + }; |
| 81 | + } |
| 82 | + } |
| 83 | +
|
| 84 | + /** |
| 85 | + * Load image from workspace, commit, or blob. |
| 86 | + * |
| 87 | + * @param source - The image source to load. |
| 88 | + * @param signal - Optional AbortSignal. Note: The backend service methods |
| 89 | + * (readFromWorkspace, readFromCommit, readFromBlob) do NOT support AbortSignal, |
| 90 | + * so the actual IO operations cannot be cancelled once started. The signal is |
| 91 | + * only used to prevent processing results after abortion, not to abort the IO itself. |
| 92 | + * |
| 93 | + * @returns A data URL string or null. |
| 94 | + * |
| 95 | + * @remarks |
| 96 | + * This function cannot cancel backend IO operations. If abort support is needed, |
| 97 | + * the backend service methods must be updated to accept and honor AbortSignal. |
| 98 | + * See: https://github.com/gitbutlerapp/gitbutler/issues (file a follow-up if needed) |
| 99 | + */ |
| 100 | + async function loadImage( |
| 101 | + source: ImageSource | null, |
| 102 | + signal?: AbortSignal |
| 103 | + ): Promise<string | null> { |
| 104 | + if (!source) return null; |
| 105 | +
|
| 106 | + try { |
| 107 | + let fileInfo; |
| 108 | +
|
| 109 | + if (source.type === 'workspace') { |
| 110 | + const { data } = await fileService.readFromWorkspace(source.path, projectId); |
| 111 | + fileInfo = data; |
| 112 | + } else if (source.type === 'commit') { |
| 113 | + fileInfo = await fileService.readFromCommit(source.path, projectId, source.commitId); |
| 114 | + } else { |
| 115 | + // type === 'blob' |
| 116 | + fileInfo = await fileService.readFromBlob(source.path, projectId, source.blobId); |
| 117 | + } |
| 118 | +
|
| 119 | + if (signal?.aborted) return null; |
| 120 | +
|
| 121 | + if (fileInfo?.content && fileInfo?.mimeType) { |
| 122 | + return `data:${fileInfo.mimeType};base64,${fileInfo.content}`; |
| 123 | + } |
| 124 | +
|
| 125 | + return null; |
| 126 | + } catch (err) { |
| 127 | + if (signal?.aborted) return null; |
| 128 | + console.warn(`Failed to load image from ${source.type}: ${source.path}`, err); |
| 129 | + return null; |
| 130 | + } |
| 131 | + } |
| 132 | +
|
| 133 | + // Load both images according to the strategy. |
| 134 | + async function loadImages(signal?: AbortSignal) { |
| 135 | + isLoading = true; |
| 136 | + loadError = null; |
| 137 | + beforeImageUrl = null; |
| 138 | + afterImageUrl = null; |
| 139 | +
|
| 140 | + try { |
| 141 | + const strategy = getLoadStrategy(); |
| 142 | +
|
| 143 | + const [before, after] = await Promise.all([ |
| 144 | + loadImage(strategy.before, signal), |
| 145 | + loadImage(strategy.after, signal) |
| 146 | + ]); |
| 147 | +
|
| 148 | + if (signal?.aborted) return; |
| 149 | +
|
| 150 | + beforeImageUrl = before; |
| 151 | + afterImageUrl = after; |
| 152 | +
|
| 153 | + if (!before && !after) { |
| 154 | + loadError = 'Failed to load both images (before and after).'; |
| 155 | + } else if (!before && strategy.before) { |
| 156 | + loadError = 'Failed to load before image.'; |
| 157 | + } else if (!after && strategy.after) { |
| 158 | + loadError = 'Failed to load after image.'; |
| 159 | + } |
| 160 | + } catch (err) { |
| 161 | + console.error('Failed to load images:', err); |
| 162 | + loadError = `Failed to load images: ${err instanceof Error ? err.message : String(err)}`; |
| 163 | + } finally { |
| 164 | + isLoading = false; |
| 165 | + } |
| 166 | + } |
| 167 | +
|
| 168 | + $effect(() => { |
| 169 | + const abortController = new AbortController(); |
| 170 | + loadImages(abortController.signal); |
| 171 | + return () => abortController.abort(); |
| 172 | + }); |
| 173 | +</script> |
| 174 | + |
| 175 | +{#if loadError} |
| 176 | + <div class="imagediff-placeholder"> |
| 177 | + <EmptyStatePlaceholder image={emptyFileSvg} gap={12} topBottomPadding={34}> |
| 178 | + {#snippet caption()} |
| 179 | + Can't preview this file type |
| 180 | + {/snippet} |
| 181 | + </EmptyStatePlaceholder> |
| 182 | + </div> |
| 183 | +{:else} |
| 184 | + <ImageDiff {beforeImageUrl} {afterImageUrl} fileName={change.path} {isLoading} /> |
| 185 | +{/if} |
| 186 | + |
| 187 | +<style lang="scss"> |
| 188 | + .imagediff-placeholder { |
| 189 | + display: flex; |
| 190 | + align-items: center; |
| 191 | + justify-content: center; |
| 192 | + width: 100%; |
| 193 | + height: 200px; |
| 194 | + border: 1px solid var(--clr-border-3); |
| 195 | + border-radius: var(--radius-m); |
| 196 | + } |
| 197 | +</style> |
0 commit comments