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>
2024-08-14 17:54:50 +03:00
parent 593f036c0d
commit 7f7fec2cea
14 changed files with 1491 additions and 5 deletions
@@ -0,0 +1,73 @@
+import CropTool from '$lib/components/asset-viewer/editor/crop-tool/crop-tool.svelte';
+import { mdiCropRotate } from '@mdi/js';
+import { derived, get, writable } from 'svelte/store';
+
+//---------crop
+export const cropSettings = writable<CropSettings>({ x: 0, y: 0, width: 100, height: 100 });
+export const cropImageSize = writable([1000, 1000]);
+export const cropImageScale = writable(1);
+export const cropAspectRatio = writable<CropAspectRatio>('free');
+export const cropSettingsChanged = writable<boolean>(false);
+//---------rotate
+export const rotateDegrees = writable<number>(0);
+export const normaizedRorateDegrees = derived(rotateDegrees, (v) => {
+  const newAngle = v % 360;
+  return newAngle < 0 ? newAngle + 360 : newAngle;
+});
+export const changedOriention = derived(normaizedRorateDegrees, () => get(normaizedRorateDegrees) % 180 > 0);
+//-----other
+export const showCancelConfirmDialog = writable<boolean | CallableFunction>(false);
+
+export const editTypes = [
+  {
+    name: 'crop',
+    icon: mdiCropRotate,
+    component: CropTool,
+    changesFlag: cropSettingsChanged,
+  },
+];
+
+export function closeEditorCofirm(closeCallback: CallableFunction) {
+  if (get(hasChanges)) {
+    showCancelConfirmDialog.set(closeCallback);
+  } else {
+    closeCallback();
+  }
+}
+
+export const hasChanges = derived(
+  editTypes.map((t) => t.changesFlag),
+  ($flags) => {
+    return $flags.some(Boolean);
+  },
+);
+
+export function resetGlobalCropStore() {
+  cropSettings.set({ x: 0, y: 0, width: 100, height: 100 });
+  cropImageSize.set([1000, 1000]);
+  cropImageScale.set(1);
+  cropAspectRatio.set('free');
+  cropSettingsChanged.set(false);
+  showCancelConfirmDialog.set(false);
+  rotateDegrees.set(0);
+}
+
+export type CropAspectRatio =
+  | '1:1'
+  | '16:9'
+  | '4:3'
+  | '3:2'
+  | '7:5'
+  | '9:16'
+  | '3:4'
+  | '2:3'
+  | '5:7'
+  | 'free'
+  | 'reset';
+
+export type CropSettings = {
+  x: number;
+  y: number;
+  width: number;
+  height: number;
+};