feat(web): image editor - panel and cropping

web/src/lib/components/asset-viewer/asset-viewer-nav-bar.svelte

@@ -15,6 +15,7 @@
   import CircleIconButton from '$lib/components/elements/buttons/circle-icon-button.svelte';
   import ButtonContextMenu from '$lib/components/shared-components/context-menu/button-context-menu.svelte';
   import MenuOption from '$lib/components/shared-components/context-menu/menu-option.svelte';
+  import { ProjectionType } from '$lib/constants';
   import { user } from '$lib/stores/user.store';
   import { photoZoomState } from '$lib/stores/zoom-image.store';
   import { getAssetJobName, getSharedLink } from '$lib/utils';
@@ -26,6 +27,7 @@
     mdiContentCopy,
     mdiDatabaseRefreshOutline,
     mdiDotsVertical,
+    mdiImageEditOutline,
     mdiImageRefreshOutline,
     mdiMagnifyMinusOutline,
     mdiMagnifyPlusOutline,
@@ -47,12 +49,22 @@
   export let onRunJob: (name: AssetJobName) => void;
   export let onPlaySlideshow: () => void;
   export let onShowDetail: () => void;
+  export let showEditorHandler: () => void;
   export let onClose: () => void;
 
   const sharedLink = getSharedLink();
 
   $: isOwner = $user && asset.ownerId === $user?.id;
   $: showDownloadButton = sharedLink ? sharedLink.allowDownload : !asset.isOffline;
+  $: showEditorButton =
+    isOwner &&
+    asset.type === AssetTypeEnum.Image &&
+    !(
+      asset.exifInfo?.projectionType === ProjectionType.EQUIRECTANGULAR ||
+      (asset.originalPath && asset.originalPath.toLowerCase().endsWith('.insp'))
+    ) &&
+    !(asset.originalPath && asset.originalPath.toLowerCase().endsWith('.gif')) &&
+    !asset.livePhotoVideoId;
 </script>
 
 <div
@@ -98,6 +110,15 @@
     {#if isOwner}
       <FavoriteAction {asset} {onAction} />
     {/if}
+    {#if showEditorButton}
+      <CircleIconButton
+        color="opaque"
+        hideMobile={true}
+        icon={mdiImageEditOutline}
+        on:click={showEditorHandler}
+        title={$t('editor')}
+      />
+    {/if}
 
     {#if isOwner}
       <DeleteAction {asset} {onAction} />

web/src/lib/components/asset-viewer/asset-viewer.svelte

@@ -45,7 +45,9 @@
   import PhotoViewer from './photo-viewer.svelte';
   import SlideshowBar from './slideshow-bar.svelte';
   import VideoViewer from './video-wrapper-viewer.svelte';
-
+  import EditorPanel from './editor/editor-panel.svelte';
+  import CropCanvas from './editor/crop-tool/crop-canvas.svelte';
+  import { closeEditorCofirm } from '$lib/stores/asset-editor.store';
   export let assetStore: AssetStore | null = null;
   export let asset: AssetResponseDto;
   export let preloadAssets: AssetResponseDto[] = [];
@@ -80,6 +82,7 @@
   let shuffleSlideshowUnsubscribe: () => void;
   let previewStackedAsset: AssetResponseDto | undefined;
   let isShowActivity = false;
+  let isShowEditor = false;
   let isLiked: ActivityResponseDto | null = null;
   let numberOfComments: number;
   let fullscreenElement: Element;
@@ -259,6 +262,12 @@
     await navigate({ targetRoute: 'current', assetId: null });
   };
 
+  const closeEditor = () => {
+    closeEditorCofirm(() => {
+      isShowEditor = false;
+    });
+  };
+
   const navigateAssetRandom = async () => {
     if (!assetStore) {
       return;
@@ -302,6 +311,13 @@
     dispatch(order);
   };
 
+  const showEditorHandler = () => {
+    if (isShowActivity) {
+      isShowActivity = false;
+    }
+    isShowEditor = !isShowEditor;
+  };
+
   const handleRunJob = async (name: AssetJobName) => {
     try {
       await runAssetJobs({ assetJobsDto: { assetIds: [asset.id], name } });
@@ -370,6 +386,12 @@
 
     onAction?.(action);
   };
+
+  let selectedEditType: string = '';
+
+  function handleUpdateSelectedEditType(type: string) {
+    selectedEditType = type;
+  }
 </script>
 
 <svelte:document bind:fullscreenElement />
@@ -380,7 +402,7 @@
   use:focusTrap
 >
   <!-- Top navigation bar -->
-  {#if $slideshowState === SlideshowState.None}
+  {#if $slideshowState === SlideshowState.None && !isShowEditor}
     <div class="z-[1002] col-span-4 col-start-1 row-span-1 row-start-1 transition-transform">
       <AssetViewerNavBar
         {asset}
@@ -393,6 +415,7 @@
         onCopyImage={copyImage}
         onAction={handleAction}
         onRunJob={handleRunJob}
+        {showEditorHandler}
         onPlaySlideshow={() => ($slideshowState = SlideshowState.PlaySlideshow)}
         onShowDetail={toggleDetailPanel}
         onClose={closeViewer}
@@ -406,7 +429,7 @@
     </div>
   {/if}
 
-  {#if $slideshowState === SlideshowState.None && showNavigation}
+  {#if $slideshowState === SlideshowState.None && showNavigation && !isShowEditor}
     <div class="z-[1001] my-auto column-span-1 col-start-1 row-span-full row-start-1 justify-self-start">
       <PreviousAssetAction onPreviousAsset={() => navigateAsset('previous')} />
     </div>
@@ -474,6 +497,8 @@
                 .toLowerCase()
                 .endsWith('.insp'))}
             <PanoramaViewer {asset} />
+          {:else if isShowEditor && selectedEditType === 'crop'}
+            <CropCanvas {asset} />
           {:else}
             <PhotoViewer bind:zoomToggle bind:copyImage {asset} {preloadAssets} on:close={closeViewer} {sharedLink} />
           {/if}
@@ -503,7 +528,7 @@
     {/if}
   </div>
 
-  {#if $slideshowState === SlideshowState.None && showNavigation}
+  {#if $slideshowState === SlideshowState.None && showNavigation && !isShowEditor}
     <div class="z-[1001] my-auto col-span-1 col-start-4 row-span-full row-start-1 justify-self-end">
       <NextAssetAction onNextAsset={() => navigateAsset('next')} />
     </div>
@@ -520,6 +545,17 @@
     </div>
   {/if}
 
+  {#if isShowEditor}
+    <div
+      transition:fly={{ duration: 150 }}
+      id="detail-panel"
+      class="z-[1002] row-start-1 row-span-4 w-[460px] overflow-y-auto bg-immich-bg transition-all dark:border-l dark:border-l-immich-dark-gray dark:bg-immich-dark-bg"
+      translate="yes"
+    >
+      <EditorPanel {asset} onUpdateSelectedType={handleUpdateSelectedEditType} onClose={closeEditor} />
+    </div>
+  {/if}
+
   {#if stackedAssets.length > 0 && withStacked}
     <div
       id="stack-slideshow"

web/src/lib/components/asset-viewer/editor/crop-tool/canvas-drawing.ts

@@ -0,0 +1,118 @@
+import type { CropSettings } from '$lib/stores/asset-editor.store';
+import { get } from 'svelte/store';
+import { context2D, darkenLevel, imgElement, isResizingOrDragging, padding } from './crop-store';
+const mPadding = get(padding);
+export function draw(canvas: HTMLCanvasElement | null, crop: CropSettings) {
+  const ctx = get(context2D);
+  const img = get(imgElement);
+  if (!ctx || !canvas || !img) {
+    return;
+  }
+
+  ctx.clearRect(0, 0, canvas.width, canvas.height);
+  ctx.drawImage(img, mPadding, mPadding, canvas.width - 2 * mPadding, canvas.height - 2 * mPadding);
+  drawOverlay(canvas, crop);
+  drawCropRect(crop);
+}
+
+export function drawCropRect(crop: CropSettings) {
+  const ctx = get(context2D);
+  if (!ctx) {
+    return;
+  }
+
+  ctx.globalCompositeOperation = 'exclusion';
+  ctx.strokeStyle = 'white';
+  ctx.lineWidth = 2;
+  ctx.strokeRect(crop.x + mPadding, crop.y + mPadding, crop.width, crop.height);
+
+  if (get(isResizingOrDragging)) {
+    ctx.strokeStyle = 'white';
+    ctx.lineWidth = 1;
+
+    const thirdWidth = crop.width / 3;
+    ctx.beginPath();
+    ctx.moveTo(crop.x + thirdWidth + mPadding, crop.y + mPadding);
+    ctx.lineTo(crop.x + thirdWidth + mPadding, crop.y + crop.height + mPadding);
+    ctx.stroke();
+
+    ctx.beginPath();
+    ctx.moveTo(crop.x + 2 * thirdWidth + mPadding, crop.y + mPadding);
+    ctx.lineTo(crop.x + 2 * thirdWidth + mPadding, crop.y + crop.height + mPadding);
+    ctx.stroke();
+
+    const thirdHeight = crop.height / 3;
+    ctx.beginPath();
+    ctx.moveTo(crop.x + mPadding, crop.y + thirdHeight + mPadding);
+    ctx.lineTo(crop.x + crop.width + mPadding, crop.y + thirdHeight + mPadding);
+    ctx.stroke();
+
+    ctx.beginPath();
+    ctx.moveTo(crop.x + mPadding, crop.y + 2 * thirdHeight + mPadding);
+    ctx.lineTo(crop.x + crop.width + mPadding, crop.y + 2 * thirdHeight + mPadding);
+    ctx.stroke();
+  }
+
+  ctx.globalCompositeOperation = 'source-over';
+  //dynamic corners size
+  const minSide = Math.min(crop.height, crop.width);
+  const length = minSide > 18 * 5 ? 18 : Math.min(18, minSide / 5);
+
+  ctx.strokeStyle = 'white';
+  ctx.lineWidth = mPadding * 2;
+  ctx.lineJoin = 'round';
+  ctx.lineCap = 'round';
+
+  ctx.beginPath();
+  ctx.moveTo(crop.x + mPadding, crop.y + mPadding);
+  ctx.lineTo(crop.x + mPadding + length, crop.y + mPadding);
+  ctx.moveTo(crop.x + mPadding, crop.y + mPadding);
+  ctx.lineTo(crop.x + mPadding, crop.y + mPadding + length);
+  ctx.stroke();
+
+  ctx.beginPath();
+  ctx.moveTo(crop.x + crop.width + mPadding, crop.y + mPadding);
+  ctx.lineTo(crop.x + crop.width + mPadding - length, crop.y + mPadding);
+  ctx.moveTo(crop.x + crop.width + mPadding, crop.y + mPadding);
+  ctx.lineTo(crop.x + crop.width + mPadding, crop.y + mPadding + length);
+  ctx.stroke();
+
+  ctx.beginPath();
+  ctx.moveTo(crop.x + mPadding, crop.y + crop.height + mPadding);
+  ctx.lineTo(crop.x + mPadding + length, crop.y + crop.height + mPadding);
+  ctx.moveTo(crop.x + mPadding, crop.y + crop.height + mPadding);
+  ctx.lineTo(crop.x + mPadding, crop.y + crop.height + mPadding - length);
+  ctx.stroke();
+
+  ctx.beginPath();
+  ctx.moveTo(crop.x + crop.width + mPadding, crop.y + crop.height + mPadding);
+  ctx.lineTo(crop.x + crop.width + mPadding - length, crop.y + crop.height + mPadding);
+  ctx.moveTo(crop.x + crop.width + mPadding, crop.y + crop.height + mPadding);
+  ctx.lineTo(crop.x + crop.width + mPadding, crop.y + crop.height + mPadding - length);
+  ctx.stroke();
+}
+
+export function drawOverlay(canvas: HTMLCanvasElement, crop: CropSettings) {
+  const ctx = get(context2D);
+  const darken = get(darkenLevel);
+  if (!ctx) {
+    return;
+  }
+
+  ctx.fillStyle = `rgba(0, 0, 0, ${darken})`;
+
+  ctx.fillRect(mPadding, mPadding, canvas.width - 2 * mPadding, crop.y);
+  ctx.fillRect(mPadding, crop.y + mPadding, crop.x, crop.height);
+  ctx.fillRect(
+    crop.x + crop.width + mPadding,
+    crop.y + mPadding,
+    canvas.width - crop.x - crop.width - 2 * mPadding,
+    crop.height,
+  );
+  ctx.fillRect(
+    mPadding,
+    crop.y + crop.height + mPadding,
+    canvas.width - 2 * mPadding,
+    canvas.height - crop.y - crop.height - 2 * mPadding,
+  );
+}

web/src/lib/components/asset-viewer/editor/crop-tool/crop-canvas.svelte

@@ -0,0 +1,76 @@
+<script lang="ts">
+  import { onMount, afterUpdate, onDestroy } from 'svelte';
+  import { t } from 'svelte-i18n';
+  import { getAssetOriginalUrl } from '$lib/utils';
+  import { handleError } from '$lib/utils/handle-error';
+
+  import { imgElement, canvasElement, resetCropStore } from './crop-store';
+
+  import { draw } from './canvas-drawing';
+  import { onImageLoad, resizeCanvas } from './image-loading';
+  import { handleMouseDown, handleMouseMove, handleMouseUp, handleMouseOut } from './mouse-handlers';
+  import { recalculateCrop, animateCropChange } from './crop-settings';
+  import { cropAspectRatio, cropSettings, resetGlobalCropStore } from '$lib/stores/asset-editor.store';
+
+  export let asset;
+
+  let canvas: HTMLCanvasElement;
+  let img: HTMLImageElement;
+
+  $: imgElement.set(img);
+  $: canvasElement.set(canvas);
+
+  cropAspectRatio.subscribe((value) => {
+    if (!$imgElement || !$canvasElement) {
+      return;
+    }
+    const newCrop = recalculateCrop($cropSettings, $canvasElement, value, true);
+    if (newCrop) {
+      animateCropChange($cropSettings, newCrop, () => draw($canvasElement, $cropSettings));
+    }
+  });
+
+  onMount(() => {
+    resetCropStore();
+    resetGlobalCropStore();
+    $imgElement = new Image();
+    $imgElement.src = getAssetOriginalUrl({ id: asset.id, checksum: asset.checksum });
+    $imgElement.addEventListener('load', onImageLoad);
+    $imgElement.addEventListener('error', (error) => {
+      handleError(error, $t('error_loading_image'));
+    });
+
+    window.addEventListener('mousemove', handleMouseMove);
+  });
+
+  onDestroy(() => {
+    window.removeEventListener('mousemove', handleMouseMove);
+    resetCropStore();
+    resetGlobalCropStore();
+  });
+
+  afterUpdate(() => {
+    resizeCanvas();
+  });
+</script>
+
+<div class="canvas-container">
+  <canvas bind:this={canvas} on:mousedown={handleMouseDown} on:mouseup={handleMouseUp} on:blur={handleMouseOut}
+  ></canvas>
+</div>
+
+<style>
+  .canvas-container {
+    width: calc(100% - 4rem);
+    margin: auto;
+    margin-top: 2rem;
+    height: calc(100% - 4rem);
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+  }
+  canvas {
+    cursor: default;
+  }
+</style>