This commit is contained in:
Min Idzelis 2025-04-23 23:19:48 +00:00
parent d76c50ff22
commit a5eaaddec4
2 changed files with 16 additions and 17 deletions

View File

@ -1,15 +1,10 @@
<script lang="ts"> <script lang="ts">
import { onMount, onDestroy, tick } from 'svelte';
import { t } from 'svelte-i18n';
import { getAssetOriginalUrl } from '$lib/utils'; import { getAssetOriginalUrl } from '$lib/utils';
import { handleError } from '$lib/utils/handle-error'; import { handleError } from '$lib/utils/handle-error';
import { getAltText } from '$lib/utils/thumbnail-util'; import { getAltText } from '$lib/utils/thumbnail-util';
import { onDestroy, onMount, tick } from 'svelte';
import { t } from 'svelte-i18n';
import { imgElement, cropAreaEl, resetCropStore, overlayEl, isResizingOrDragging, cropFrame } from './crop-store';
import { draw } from './drawing';
import { onImageLoad, resizeCanvas } from './image-loading';
import { handleMouseDown, handleMouseMove, handleMouseUp } from './mouse-handlers';
import { recalculateCrop, animateCropChange } from './crop-settings';
import { import {
changedOriention, changedOriention,
cropAspectRatio, cropAspectRatio,
@ -17,7 +12,13 @@
resetGlobalCropStore, resetGlobalCropStore,
rotateDegrees, rotateDegrees,
} from '$lib/stores/asset-editor.store'; } from '$lib/stores/asset-editor.store';
import { toTimelineAsset } from '$lib/utils/timeline-util';
import type { AssetResponseDto } from '@immich/sdk'; import type { AssetResponseDto } from '@immich/sdk';
import { animateCropChange, recalculateCrop } from './crop-settings';
import { cropAreaEl, cropFrame, imgElement, isResizingOrDragging, overlayEl, resetCropStore } from './crop-store';
import { draw } from './drawing';
import { onImageLoad, resizeCanvas } from './image-loading';
import { handleMouseDown, handleMouseMove, handleMouseUp } from './mouse-handlers';
interface Props { interface Props {
asset: AssetResponseDto; asset: AssetResponseDto;
@ -81,7 +82,7 @@
aria-label="Crop area" aria-label="Crop area"
type="button" type="button"
> >
<img draggable="false" src={img?.src} alt={$getAltText(asset)} /> <img draggable="false" src={img?.src} alt={$getAltText(toTimelineAsset(asset))} />
<div class={`${$isResizingOrDragging ? 'resizing' : ''} crop-frame`} bind:this={$cropFrame}> <div class={`${$isResizingOrDragging ? 'resizing' : ''} crop-frame`} bind:this={$cropFrame}>
<div class="grid"></div> <div class="grid"></div>
<div class="corner top-left"></div> <div class="corner top-left"></div>

View File

@ -460,15 +460,13 @@
transition:fade transition:fade
></video> ></video>
{:else} {:else}
{#await currentMemoryAssetFull then asset}
<img <img
class="h-full w-full rounded-2xl object-contain transition-all" class="h-full w-full rounded-2xl object-contain transition-all"
src={getAssetThumbnailUrl({ id: current.asset.id, size: AssetMediaSize.Preview })} src={getAssetThumbnailUrl({ id: current.asset.id, size: AssetMediaSize.Preview })}
alt={$getAltText(asset)} alt={$getAltText(current.asset)}
draggable="false" draggable="false"
transition:fade transition:fade
/> />
{/await}
{/if} {/if}
</div> </div>
{/key} {/key}