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

ilyaChuk · 2024-07-13T15:02:31Z

Another attempt to create a photo editor. I hope it's the final one. #10883

I made a sidebar with tools. so far, there is a cropping and adjustment tool (placeholder).
Cropping works - you can freely choose the size or use the preset.
I checked on different pictures: horizontal, square, vertical. I didn't notice any problems.
Only the desktop version works. I haven't adapted it to mobile screens.
This is only a web interface, there is no server part of this functionality yet.

TODO:

~~[ ] Adaptation to mobile screens~~.
~~[x] Canvas performance optimization~~.

opbod · 2024-07-15T07:05:29Z

Related: #10989 (Mobile); #3271 (Web); #9575 (Web)

ilyaChuk · 2024-07-29T02:05:33Z

I feel like I'm ready. The cropping interface is ready.

There is a editor tools sidebar on desktop screens. So far, there's only cropping, but she's ready to work with an array of tools.
Since last time, I added a "save" button. It is active only when changes have been made in the editor. So far, clicking on it does nothing except close the editor and the panel.
I've double-checked everything several times, different aspect ratios of the images, it works stably for me.
This is the first time I have had such an experience, but I tried to make the code convenient for other developers as well.
video

opbod · 2024-07-29T07:07:18Z

#10989 just got accepted into main few hours ago, mobile-only.
@martyfuhry does this web-only image editor PR conflict with or enrich the overall setup?

michelheusschen

First off, a big thank you for the PR. Having an editor would be a great addition to Immich!

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

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

michelheusschen · 2024-07-29T09:52:52Z

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

+  let animationFrame: ReturnType<typeof requestAnimationFrame>;
+  let canvasCursor: string;
+  const getAssetUrl = (id: string, checksum: string) => {
+    return `http://localhost:2283/api/assets/${id}/original?c=${checksum}`;


What if the original asset can't be displayed by the browser? Also this URL should be changed

This is only partially resolved. There is still the possibility that a browser can't display the original asset. This will also be an issue for videos, live photos and panoramas.

Should we even allow the editor to be opened for live photos, panoramas, and gifs?

Right now it makes sense to disable the editor for these types of assets. If there are tools added in the future that can be used for more asset types (like rotate), we can always reconsider this

@michelheusschen

There is still the possibility that a browser can't display the original asset

And then what to show? now there is an error message when opening the editor and an error loading the image. An error message, a black editor screen, and a toolbar on the right.
Should I close the editor automatically in this case?

Right now it makes sense to disable the editor for these types of assets

done

michelheusschen · 2024-07-29T09:53:49Z

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

+    // Vertical lines
+    const thirdWidth = crop.width / 3;


Not a huge fan of the grid lines personally, maybe only show them while changing the crop area?

I made the lines visible only when the cropping rectangle is changed. But then, when the cropping rectangle is the same size as the image, it is poorly visible

I can't imagine how to solve this in a simple way. I added small circles on the corners for more visibility.

But maybe as long as the rectangle is the same size as the image, draw these lines?
Although if this is just a problem for me, then everything is ok.

Yeah I think this is better. The dots only seem to get cut off at the edges, maybe there's a way to extend them? I also noticed that cropping immediately stops when the cursor leaves the canvas. Can we allow cropping to continue when that happens?

It will require some reworking, but I will try

It wasn't easy, but it's done. video

Another thing that might be worth looking into down the road is using sharp to do the actual cropping on the original asset. So always show the crop tool on the jpeg/webp thumbnail and use it to get the cropping coordinates, but when send those to the server which can actually perform the operation. I believe using sharp it would be possible to keep the metadata, etc.

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

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

web/src/lib/stores/preferences.store.ts

ilyaChuk · 2024-07-29T12:05:21Z

@opbod

does this web-only image editor PR conflict with or enrich the overall setup?

We try to work together by discussing our roles. But the difference so far is that I cannot rotate the image, and it is not saved.

Co-authored-by: Michel Heusschen <[email protected]>

ilyaChuk · 2024-08-10T02:27:51Z

~~Feels ready 😴~~
no, I found a problem with very long or very wide images. It's not easy to fix. in the morning

ilyaChuk · 2024-08-10T20:22:07Z

Ok, now I don't see any errors. Yet

ilyaChuk · 2024-08-10T20:24:32Z

but I still don't understand the error I'm getting here https://github.com/immich-app/immich/actions/runs/10328229151/job/28597174488

https://github.com/user-attachments/assets/48f15172-9666-4588-acb6-3cb5eda873a8

eygraber · 2024-08-14T19:56:58Z

I saw this in the release notes, but it doesn't look like it is available. Is it disabled, or hidden?

ilyaChuk · 2024-08-14T20:04:44Z

@eygraber Yeah, it's hidden for now. I think we'll launch it when the server side is ready.

* 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 <[email protected]> * 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 <[email protected]> * 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 <[email protected]> Co-authored-by: Alex Tran <[email protected]>

sammyke007 · 2024-09-26T12:32:39Z

Any news on this?

dharapvj · 2024-10-06T16:37:38Z

Yes -which github issue to track and vote on for server side of this?

NicholasFlamy · 2024-10-06T16:49:20Z

#11658 seems to be a potential server-side implementation.

RichardMawdsley · 2024-11-14T15:19:03Z

Any update on this??

ilyaChuk added 4 commits July 13, 2024 02:01

cropping, panel

6154c9c

fix presets

e23fdaf

types

100f83d

Merge branch 'immich-app:main' into main

31790b2

github-actions bot added the 🖥️web label Jul 13, 2024

ilyaChuk added 2 commits July 13, 2024 19:03

prettier

539d271

fix lint

1cb58b9

ilyaChuk changed the title ~~Web image editor: panel and cropping~~ feat: web image editor - panel and cropping Jul 13, 2024

ilyaChuk changed the title ~~feat: web image editor - panel and cropping~~ feat(web): image editor - panel and cropping Jul 13, 2024

NicholasFlamy added the feature label Jul 16, 2024

ilyaChuk added 9 commits July 29, 2024 02:18

Merge branch 'immich-app:main' into main

aa21e08

fix aspect ratio, performance optimization

0a8bab6

improved tool selection, removed placeholder

c81bda4

fix the mouse's exit from canvas

71ea55f

fix error

74bac38

the "save" button and change tracking

21731e8

lint, format

dcfd221

the mini functionality of the save button

e498055

fix aspect ratio

c5cff01

ilyaChuk force-pushed the main branch from 5fd058a to c5cff01 Compare July 29, 2024 01:59

hide editor button on mobiles

0f01afe

ilyaChuk marked this pull request as ready for review July 29, 2024 02:06

bo0tzz requested a review from alextran1502 July 29, 2024 08:32

michelheusschen reviewed Jul 29, 2024

View reviewed changes

ilyaChuk and others added 2 commits July 29, 2024 15:15

strict equality

019ed53

Co-authored-by: Michel Heusschen <[email protected]>

Use the dollar sign syntax for stores inside components

1eb7f1c

ilyaChuk added 2 commits August 10, 2024 05:23

fix aspect ratios near min size

20cd0b8

Merge branch 'main' into main

bc6e18c

ilyaChuk requested a review from alextran1502 August 10, 2024 02:28

ilyaChuk added 2 commits August 10, 2024 23:15

fix crop area when changing image size when rotate

73ab707

fix of fix

219fff9

better layout - grouping

dbb3fe4

https://github.com/user-attachments/assets/48f15172-9666-4588-acb6-3cb5eda873a8

ilyaChuk force-pushed the main branch from 626e9af to dbb3fe4 Compare August 10, 2024 22:29

ilyaChuk and others added 5 commits August 12, 2024 19:49

Merge branch 'main' into main

ae0c5a3

Merge branch 'main' into main

53e57ea

Merge branch 'main' into main

69043f8

Merge branch 'main' into main

59c015f

hide the button

bfd6cbe

alextran1502 approved these changes Aug 14, 2024

View reviewed changes

alextran1502 enabled auto-merge (squash) August 14, 2024 13:42

ilyaChuk added 2 commits August 14, 2024 17:03

Merge branch 'main' into main

cb1e541

fix i18n, format

63bfc43

auto-merge was automatically disabled August 14, 2024 14:09
Head branch was pushed to by a user without write access

ilyaChuk added 2 commits August 14, 2024 17:39

hide button

c154d00

hide button v2

857f02a

alextran1502 merged commit 7f7fec2 into immich-app:main Aug 14, 2024
22 checks passed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

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

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

ilyaChuk commented Jul 13, 2024 •

edited

Loading

opbod commented Jul 15, 2024

ilyaChuk commented Jul 29, 2024

opbod commented Jul 29, 2024

michelheusschen left a comment

michelheusschen Jul 29, 2024

michelheusschen Jul 30, 2024

ilyaChuk Jul 30, 2024

michelheusschen Jul 30, 2024

ilyaChuk Jul 30, 2024

ilyaChuk Jul 30, 2024

michelheusschen Jul 29, 2024

ilyaChuk Jul 29, 2024

michelheusschen Jul 30, 2024

ilyaChuk Jul 30, 2024

ilyaChuk Jul 30, 2024

jrasm91 Jul 31, 2024

ilyaChuk commented Jul 29, 2024

ilyaChuk commented Aug 10, 2024 •

edited

Loading

ilyaChuk commented Aug 10, 2024

ilyaChuk commented Aug 10, 2024

eygraber commented Aug 14, 2024

ilyaChuk commented Aug 14, 2024

sammyke007 commented Sep 26, 2024

dharapvj commented Oct 6, 2024

NicholasFlamy commented Oct 6, 2024

RichardMawdsley commented Nov 14, 2024

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

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

Conversation

ilyaChuk commented Jul 13, 2024 • edited Loading

opbod commented Jul 15, 2024

ilyaChuk commented Jul 29, 2024

opbod commented Jul 29, 2024

michelheusschen left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

ilyaChuk commented Jul 29, 2024

ilyaChuk commented Aug 10, 2024 • edited Loading

ilyaChuk commented Aug 10, 2024

ilyaChuk commented Aug 10, 2024

eygraber commented Aug 14, 2024

ilyaChuk commented Aug 14, 2024

sammyke007 commented Sep 26, 2024

dharapvj commented Oct 6, 2024

NicholasFlamy commented Oct 6, 2024

RichardMawdsley commented Nov 14, 2024

ilyaChuk commented Jul 13, 2024 •

edited

Loading

ilyaChuk commented Aug 10, 2024 •

edited

Loading