feat(web): image editor - panel and cropping (#11074)

* cropping, panel * fix presets * types * prettier * fix lint * fix aspect ratio, performance optimization * improved tool selection, removed placeholder * fix the mouse's exit from canvas * fix error * the "save" button and change tracking * lint, format * the mini functionality of the save button * fix aspect ratio * hide editor button on mobiles * strict equality Co-authored-by: Michel Heusschen <59014050+michelheusschen@users.noreply.github.com> * Use the dollar sign syntax for stores inside components * unobtrusive grid lines, circles at the corners * more correct image load, handleError * more strict equality * fix styles. unused and tailwind Co-Authored-By: Michel Heusschen <59014050+michelheusschen@users.noreply.github.com> * dont store isShowEditor * if showEditor - hide navbar & shortcuts * crop-canvas decomposition (danger) I could have accidentally broken something.. but I checked the work and it seems ok. * fix lint * fix ts * callback function as props * correctly disabling shortcuts * convenient canvas borders • you can use the mouse to go beyond the boundaries and freely change the crop. • the circles on the corners of the canvas are not cut off. * -the editor button for video files, -save button * hide editor btn if panoramic || gif || live * corners instead of circles (preview), fix lint&format * confirm close editor without save * vertical aspect ratios * recovery after merge. editor's closing shortcut * fix format * move from canvas to html elements * fix changes detections * rotation * hide detail panel if showing editor * fix aspect ratios near min size * fix crop area when changing image size when rotate * fix of fix * better layout - grouping https://github.com/user-attachments/assets/48f15172-9666-4588-acb6-3cb5eda873a8 * hide the button * fix i18n, format * hide button * hide button v2 --------- Co-authored-by: Michel Heusschen <59014050+michelheusschen@users.noreply.github.com> Co-authored-by: Alex Tran <alex.tran1502@gmail.com>
2025-10-17 18:19:27 +00:00 · 2024-08-14 17:54:50 +03:00 · 2024-08-14 17:54:50 +03:00 · 7f7fec2cea
commit 7f7fec2cea
parent 593f036c0d
14 changed files with 1491 additions and 5 deletions
--- a/web/src/lib/components/asset-viewer/editor/crop-tool/mouse-handlers.ts
+++ b/web/src/lib/components/asset-viewer/editor/crop-tool/mouse-handlers.ts
@ -0,0 +1,536 @@
+import {
+  cropAspectRatio,
+  cropImageScale,
+  cropImageSize,
+  cropSettings,
+  cropSettingsChanged,
+  normaizedRorateDegrees,
+  rotateDegrees,
+  showCancelConfirmDialog,
+  type CropSettings,
+} from '$lib/stores/asset-editor.store';
+import { get } from 'svelte/store';
+import { adjustDimensions, keepAspectRatio } from './crop-settings';
+import {
+  canvasCursor,
+  cropAreaEl,
+  dragOffset,
+  isDragging,
+  isResizingOrDragging,
+  overlayEl,
+  resizeSide,
+} from './crop-store';
+import { draw } from './drawing';
+
+export function handleMouseDown(e: MouseEvent) {
+  const canvas = get(cropAreaEl);
+  if (!canvas) {
+    return;
+  }
+
+  const crop = get(cropSettings);
+  const { mouseX, mouseY } = getMousePosition(e);
+
+  const {
+    onLeftBoundary,
+    onRightBoundary,
+    onTopBoundary,
+    onBottomBoundary,
+    onTopLeftCorner,
+    onTopRightCorner,
+    onBottomLeftCorner,
+    onBottomRightCorner,
+  } = isOnCropBoundary(mouseX, mouseY, crop);
+
+  if (
+    onTopLeftCorner ||
+    onTopRightCorner ||
+    onBottomLeftCorner ||
+    onBottomRightCorner ||
+    onLeftBoundary ||
+    onRightBoundary ||
+    onTopBoundary ||
+    onBottomBoundary
+  ) {
+    setResizeSide(mouseX, mouseY);
+  } else if (isInCropArea(mouseX, mouseY, crop)) {
+    startDragging(mouseX, mouseY);
+  }
+
+  document.body.style.userSelect = 'none';
+  window.addEventListener('mouseup', handleMouseUp);
+}
+
+export function handleMouseMove(e: MouseEvent) {
+  const canvas = get(cropAreaEl);
+  if (!canvas) {
+    return;
+  }
+
+  const resizeSideValue = get(resizeSide);
+  const { mouseX, mouseY } = getMousePosition(e);
+
+  if (get(isDragging)) {
+    moveCrop(mouseX, mouseY);
+  } else if (resizeSideValue) {
+    resizeCrop(mouseX, mouseY);
+  } else {
+    updateCursor(mouseX, mouseY);
+  }
+}
+
+export function handleMouseUp() {
+  window.removeEventListener('mouseup', handleMouseUp);
+  document.body.style.userSelect = '';
+  stopInteraction();
+}
+
+function getMousePosition(e: MouseEvent) {
+  let offsetX = e.clientX;
+  let offsetY = e.clientY;
+  const clienRect = getBoundingClientRectCached(get(cropAreaEl));
+  const rotateDeg = get(normaizedRorateDegrees);
+
+  if (rotateDeg == 90) {
+    offsetX = e.clientY - (clienRect?.top ?? 0);
+    offsetY = window.innerWidth - e.clientX - (window.innerWidth - (clienRect?.right ?? 0));
+  } else if (rotateDeg == 180) {
+    offsetX = window.innerWidth - e.clientX - (window.innerWidth - (clienRect?.right ?? 0));
+    offsetY = window.innerHeight - e.clientY - (window.innerHeight - (clienRect?.bottom ?? 0));
+  } else if (rotateDeg == 270) {
+    offsetX = window.innerHeight - e.clientY - (window.innerHeight - (clienRect?.bottom ?? 0));
+    offsetY = e.clientX - (clienRect?.left ?? 0);
+  } else if (rotateDeg == 0) {
+    offsetX -= clienRect?.left ?? 0;
+    offsetY -= clienRect?.top ?? 0;
+  }
+  return { mouseX: offsetX, mouseY: offsetY };
+}
+
+type BoundingClientRect = ReturnType<HTMLElement['getBoundingClientRect']>;
+let getBoundingClientRectCache: { data: BoundingClientRect | null; time: number } = {
+  data: null,
+  time: 0,
+};
+rotateDegrees.subscribe(() => {
+  getBoundingClientRectCache.time = 0;
+});
+function getBoundingClientRectCached(el: HTMLElement | null) {
+  if (Date.now() - getBoundingClientRectCache.time > 5000 || getBoundingClientRectCache.data === null) {
+    getBoundingClientRectCache = {
+      time: Date.now(),
+      data: el?.getBoundingClientRect() ?? null,
+    };
+  }
+  return getBoundingClientRectCache.data;
+}
+
+function isOnCropBoundary(mouseX: number, mouseY: number, crop: CropSettings) {
+  const { x, y, width, height } = crop;
+  const sensitivity = 10;
+  const cornerSensitivity = 15;
+
+  const outOfBound = mouseX > get(cropImageSize)[0] || mouseY > get(cropImageSize)[1] || mouseX < 0 || mouseY < 0;
+  if (outOfBound) {
+    return {
+      onLeftBoundary: false,
+      onRightBoundary: false,
+      onTopBoundary: false,
+      onBottomBoundary: false,
+      onTopLeftCorner: false,
+      onTopRightCorner: false,
+      onBottomLeftCorner: false,
+      onBottomRightCorner: false,
+    };
+  }
+
+  const onLeftBoundary = mouseX >= x - sensitivity && mouseX <= x + sensitivity && mouseY >= y && mouseY <= y + height;
+  const onRightBoundary =
+    mouseX >= x + width - sensitivity && mouseX <= x + width + sensitivity && mouseY >= y && mouseY <= y + height;
+  const onTopBoundary = mouseY >= y - sensitivity && mouseY <= y + sensitivity && mouseX >= x && mouseX <= x + width;
+  const onBottomBoundary =
+    mouseY >= y + height - sensitivity && mouseY <= y + height + sensitivity && mouseX >= x && mouseX <= x + width;
+
+  const onTopLeftCorner =
+    mouseX >= x - cornerSensitivity &&
+    mouseX <= x + cornerSensitivity &&
+    mouseY >= y - cornerSensitivity &&
+    mouseY <= y + cornerSensitivity;
+  const onTopRightCorner =
+    mouseX >= x + width - cornerSensitivity &&
+    mouseX <= x + width + cornerSensitivity &&
+    mouseY >= y - cornerSensitivity &&
+    mouseY <= y + cornerSensitivity;
+  const onBottomLeftCorner =
+    mouseX >= x - cornerSensitivity &&
+    mouseX <= x + cornerSensitivity &&
+    mouseY >= y + height - cornerSensitivity &&
+    mouseY <= y + height + cornerSensitivity;
+  const onBottomRightCorner =
+    mouseX >= x + width - cornerSensitivity &&
+    mouseX <= x + width + cornerSensitivity &&
+    mouseY >= y + height - cornerSensitivity &&
+    mouseY <= y + height + cornerSensitivity;
+
+  return {
+    onLeftBoundary,
+    onRightBoundary,
+    onTopBoundary,
+    onBottomBoundary,
+    onTopLeftCorner,
+    onTopRightCorner,
+    onBottomLeftCorner,
+    onBottomRightCorner,
+  };
+}
+
+function isInCropArea(mouseX: number, mouseY: number, crop: CropSettings) {
+  const { x, y, width, height } = crop;
+  return mouseX >= x && mouseX <= x + width && mouseY >= y && mouseY <= y + height;
+}
+
+function setResizeSide(mouseX: number, mouseY: number) {
+  const crop = get(cropSettings);
+  const {
+    onLeftBoundary,
+    onRightBoundary,
+    onTopBoundary,
+    onBottomBoundary,
+    onTopLeftCorner,
+    onTopRightCorner,
+    onBottomLeftCorner,
+    onBottomRightCorner,
+  } = isOnCropBoundary(mouseX, mouseY, crop);
+
+  if (onTopLeftCorner) {
+    resizeSide.set('top-left');
+  } else if (onTopRightCorner) {
+    resizeSide.set('top-right');
+  } else if (onBottomLeftCorner) {
+    resizeSide.set('bottom-left');
+  } else if (onBottomRightCorner) {
+    resizeSide.set('bottom-right');
+  } else if (onLeftBoundary) {
+    resizeSide.set('left');
+  } else if (onRightBoundary) {
+    resizeSide.set('right');
+  } else if (onTopBoundary) {
+    resizeSide.set('top');
+  } else if (onBottomBoundary) {
+    resizeSide.set('bottom');
+  }
+}
+
+function startDragging(mouseX: number, mouseY: number) {
+  isDragging.set(true);
+  const crop = get(cropSettings);
+  isResizingOrDragging.set(true);
+  dragOffset.set({ x: mouseX - crop.x, y: mouseY - crop.y });
+  fadeOverlay(false);
+}
+
+function moveCrop(mouseX: number, mouseY: number) {
+  const cropArea = get(cropAreaEl);
+  if (!cropArea) {
+    return;
+  }
+
+  const crop = get(cropSettings);
+  const { x, y } = get(dragOffset);
+
+  let newX = mouseX - x;
+  let newY = mouseY - y;
+
+  newX = Math.max(0, Math.min(cropArea.clientWidth - crop.width, newX));
+  newY = Math.max(0, Math.min(cropArea.clientHeight - crop.height, newY));
+
+  cropSettings.update((crop) => {
+    crop.x = newX;
+    crop.y = newY;
+    return crop;
+  });
+
+  draw(crop);
+}
+
+function resizeCrop(mouseX: number, mouseY: number) {
+  const canvas = get(cropAreaEl);
+  const crop = get(cropSettings);
+  const resizeSideValue = get(resizeSide);
+  if (!canvas || !resizeSideValue) {
+    return;
+  }
+  fadeOverlay(false);
+
+  const { x, y, width, height } = crop;
+  const minSize = 50;
+  let newWidth = width;
+  let newHeight = height;
+  switch (resizeSideValue) {
+    case 'left': {
+      newWidth = width + x - mouseX;
+      newHeight = height;
+      if (newWidth >= minSize && mouseX >= 0) {
+        const { newWidth: w, newHeight: h } = keepAspectRatio(newWidth, newHeight, get(cropAspectRatio));
+        cropSettings.update((crop) => {
+          crop.width = Math.max(minSize, Math.min(w, canvas.clientWidth));
+          crop.height = Math.max(minSize, Math.min(h, canvas.clientHeight));
+          crop.x = Math.max(0, x + width - crop.width);
+          return crop;
+        });
+      }
+      break;
+    }
+    case 'right': {
+      newWidth = mouseX - x;
+      newHeight = height;
+      if (newWidth >= minSize && mouseX <= canvas.clientWidth) {
+        const { newWidth: w, newHeight: h } = keepAspectRatio(newWidth, newHeight, get(cropAspectRatio));
+        cropSettings.update((crop) => {
+          crop.width = Math.max(minSize, Math.min(w, canvas.clientWidth - x));
+          crop.height = Math.max(minSize, Math.min(h, canvas.clientHeight));
+          return crop;
+        });
+      }
+      break;
+    }
+    case 'top': {
+      newHeight = height + y - mouseY;
+      newWidth = width;
+      if (newHeight >= minSize && mouseY >= 0) {
+        const { newWidth: w, newHeight: h } = adjustDimensions(
+          newWidth,
+          newHeight,
+          get(cropAspectRatio),
+          canvas.clientWidth,
+          canvas.clientHeight,
+          minSize,
+        );
+        cropSettings.update((crop) => {
+          crop.y = Math.max(0, y + height - h);
+          crop.width = w;
+          crop.height = h;
+          return crop;
+        });
+      }
+      break;
+    }
+    case 'bottom': {
+      newHeight = mouseY - y;
+      newWidth = width;
+      if (newHeight >= minSize && mouseY <= canvas.clientHeight) {
+        const { newWidth: w, newHeight: h } = adjustDimensions(
+          newWidth,
+          newHeight,
+          get(cropAspectRatio),
+          canvas.clientWidth,
+          canvas.clientHeight - y,
+          minSize,
+        );
+        cropSettings.update((crop) => {
+          crop.width = w;
+          crop.height = h;
+          return crop;
+        });
+      }
+      break;
+    }
+    case 'top-left': {
+      newWidth = width + x - Math.max(mouseX, 0);
+      newHeight = height + y - Math.max(mouseY, 0);
+      const { newWidth: w, newHeight: h } = adjustDimensions(
+        newWidth,
+        newHeight,
+        get(cropAspectRatio),
+        canvas.clientWidth,
+        canvas.clientHeight,
+        minSize,
+      );
+      cropSettings.update((crop) => {
+        crop.width = w;
+        crop.height = h;
+        crop.x = Math.max(0, x + width - crop.width);
+        crop.y = Math.max(0, y + height - crop.height);
+        return crop;
+      });
+      break;
+    }
+    case 'top-right': {
+      newWidth = Math.max(mouseX, 0) - x;
+      newHeight = height + y - Math.max(mouseY, 0);
+      const { newWidth: w, newHeight: h } = adjustDimensions(
+        newWidth,
+        newHeight,
+        get(cropAspectRatio),
+        canvas.clientWidth - x,
+        y + height,
+        minSize,
+      );
+      cropSettings.update((crop) => {
+        crop.width = w;
+        crop.height = h;
+        crop.y = Math.max(0, y + height - crop.height);
+        return crop;
+      });
+      break;
+    }
+    case 'bottom-left': {
+      newWidth = width + x - Math.max(mouseX, 0);
+      newHeight = Math.max(mouseY, 0) - y;
+      const { newWidth: w, newHeight: h } = adjustDimensions(
+        newWidth,
+        newHeight,
+        get(cropAspectRatio),
+        canvas.clientWidth,
+        canvas.clientHeight - y,
+        minSize,
+      );
+      cropSettings.update((crop) => {
+        crop.width = w;
+        crop.height = h;
+        crop.x = Math.max(0, x + width - crop.width);
+        return crop;
+      });
+      break;
+    }
+    case 'bottom-right': {
+      newWidth = Math.max(mouseX, 0) - x;
+      newHeight = Math.max(mouseY, 0) - y;
+      const { newWidth: w, newHeight: h } = adjustDimensions(
+        newWidth,
+        newHeight,
+        get(cropAspectRatio),
+        canvas.clientWidth - x,
+        canvas.clientHeight - y,
+        minSize,
+      );
+      cropSettings.update((crop) => {
+        crop.width = w;
+        crop.height = h;
+        return crop;
+      });
+      break;
+    }
+  }
+
+  cropSettings.update((crop) => {
+    crop.x = Math.max(0, Math.min(crop.x, canvas.clientWidth - crop.width));
+    crop.y = Math.max(0, Math.min(crop.y, canvas.clientHeight - crop.height));
+    return crop;
+  });
+
+  draw(crop);
+}
+
+function updateCursor(mouseX: number, mouseY: number) {
+  const canvas = get(cropAreaEl);
+  if (!canvas) {
+    return;
+  }
+
+  const crop = get(cropSettings);
+  const rotateDeg = get(normaizedRorateDegrees);
+
+  let {
+    onLeftBoundary,
+    onRightBoundary,
+    onTopBoundary,
+    onBottomBoundary,
+    onTopLeftCorner,
+    onTopRightCorner,
+    onBottomLeftCorner,
+    onBottomRightCorner,
+  } = isOnCropBoundary(mouseX, mouseY, crop);
+
+  if (rotateDeg == 90) {
+    [onTopBoundary, onRightBoundary, onBottomBoundary, onLeftBoundary] = [
+      onLeftBoundary,
+      onTopBoundary,
+      onRightBoundary,
+      onBottomBoundary,
+    ];
+
+    [onTopLeftCorner, onTopRightCorner, onBottomRightCorner, onBottomLeftCorner] = [
+      onBottomLeftCorner,
+      onTopLeftCorner,
+      onTopRightCorner,
+      onBottomRightCorner,
+    ];
+  } else if (rotateDeg == 180) {
+    [onTopBoundary, onBottomBoundary] = [onBottomBoundary, onTopBoundary];
+    [onLeftBoundary, onRightBoundary] = [onRightBoundary, onLeftBoundary];
+
+    [onTopLeftCorner, onBottomRightCorner] = [onBottomRightCorner, onTopLeftCorner];
+    [onTopRightCorner, onBottomLeftCorner] = [onBottomLeftCorner, onTopRightCorner];
+  } else if (rotateDeg == 270) {
+    [onTopBoundary, onRightBoundary, onBottomBoundary, onLeftBoundary] = [
+      onRightBoundary,
+      onBottomBoundary,
+      onLeftBoundary,
+      onTopBoundary,
+    ];
+
+    [onTopLeftCorner, onTopRightCorner, onBottomRightCorner, onBottomLeftCorner] = [
+      onTopRightCorner,
+      onBottomRightCorner,
+      onBottomLeftCorner,
+      onTopLeftCorner,
+    ];
+  }
+  if (onTopLeftCorner || onBottomRightCorner) {
+    setCursor('nwse-resize');
+  } else if (onTopRightCorner || onBottomLeftCorner) {
+    setCursor('nesw-resize');
+  } else if (onLeftBoundary || onRightBoundary) {
+    setCursor('ew-resize');
+  } else if (onTopBoundary || onBottomBoundary) {
+    setCursor('ns-resize');
+  } else if (isInCropArea(mouseX, mouseY, crop)) {
+    setCursor('move');
+  } else {
+    setCursor('default');
+  }
+
+  function setCursor(cursorName: string) {
+    if (get(canvasCursor) != cursorName && canvas && !get(showCancelConfirmDialog)) {
+      canvasCursor.set(cursorName);
+      document.body.style.cursor = cursorName;
+      canvas.style.cursor = cursorName;
+    }
+  }
+}
+
+function stopInteraction() {
+  isResizingOrDragging.set(false);
+  isDragging.set(false);
+  resizeSide.set('');
+  fadeOverlay(true); // Darken the background
+
+  setTimeout(() => {
+    checkEdits();
+  }, 1);
+}
+
+export function checkEdits() {
+  const cropImageSizeParams = get(cropSettings);
+  const originalImgSize = get(cropImageSize).map((el) => el * get(cropImageScale));
+  const changed =
+    Math.abs(originalImgSize[0] - cropImageSizeParams.width) > 2 ||
+    Math.abs(originalImgSize[1] - cropImageSizeParams.height) > 2;
+  cropSettingsChanged.set(changed);
+}
+
+function fadeOverlay(toDark: boolean) {
+  const overlay = get(overlayEl);
+  const cropFrame = document.querySelector('.crop-frame');
+
+  if (toDark) {
+    overlay?.classList.remove('light');
+    cropFrame?.classList.remove('resizing');
+  } else {
+    overlay?.classList.add('light');
+    cropFrame?.classList.add('resizing');
+  }
+
+  isResizingOrDragging.set(!toDark);
+}