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>

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

@@ -0,0 +1,40 @@
+<script lang="ts">
+  import Button, { type Color } from '$lib/components/elements/buttons/button.svelte';
+  import Icon from '$lib/components/elements/icon.svelte';
+  import type { CropAspectRatio } from '$lib/stores/asset-editor.store';
+
+  export let size: {
+    icon: string;
+    name: CropAspectRatio;
+    viewBox: string;
+    rotate?: boolean;
+  };
+  export let selectedSize: CropAspectRatio;
+  export let rotateHorizontal: boolean;
+  export let selectType: (size: CropAspectRatio) => void;
+
+  $: isSelected = selectedSize === size.name;
+  $: buttonColor = (isSelected ? 'primary' : 'transparent-gray') as Color;
+
+  $: rotatedTitle = (title: string, toRotate: boolean) => {
+    let sides = title.split(':');
+    if (toRotate) {
+      sides.reverse();
+    }
+    return sides.join(':');
+  };
+
+  $: toRotate = (def: boolean | undefined) => {
+    if (def === false) {
+      return false;
+    }
+    return (def && !rotateHorizontal) || (!def && rotateHorizontal);
+  };
+</script>
+
+<li>
+  <Button color={buttonColor} class="flex-col gap-1" size="sm" rounded="lg" on:click={() => selectType(size.name)}>
+    <Icon size="1.75em" path={size.icon} viewBox={size.viewBox} class={toRotate(size.rotate) ? 'rotate-90' : ''} />
+    <span>{rotatedTitle(size.name, rotateHorizontal)}</span>
+  </Button>
+</li>