Annotated Image - מאפשר לכם לסמן תמונות בתצוגן המקדימה

I updated it to markerjs2 and cleanup the codes.
Here is the link for the PR:

7 לייקים

The editor improvements are fantastic, and it removed so much code :clap:

Unfortunately, after saving the edit, the post is no longer showing up, as the markdown isn’t quite right. It looks like the string parsing is not correct.


The top image markdown is the uneditted file. After editing you can see that the component is getting confused from the (1) in the filename and putting that into the upload path, look at (1upload. Now that themes can have JS tests, lets add a test for the file name parsing.

I am going to disable the theme component here on Meta for a bit while this gets fixed. It’s already marked as #theme:broken-theme so nothing new here :slight_smile:

6 לייקים

I fixed the bug catching wrong parentheses when finding image url.
Here is the link for the PR:

I am also planning to add a function when hovering over the image the user can choose whether to annotate it or crop (rotate/flip) it.

6 לייקים

Hi Nam,

Component is now installed on meta and I was testing it out!

Some feedback:

  1. It is unclear how to open up the editor. I would recommend some indication here (maybe float the word edit? or a pencil? in the preview area):

  1. There is a big z-index fight with the composer leaving the image behind the composer. You have to shrink the composer way down to see it all.

  2. Images being edited seems enormous. Any way to keep dimensions of image being edited?

6 לייקים

Thank you so much for the feedback!
I am working on the feedback #1. I will change the style of them but the ‘ANNOTATE’ or ‘CROP’ button will open up the requested tool.

For feedback #2, could you clarify the issue for me?

I can work on #3 soon.

6 לייקים

Sure:

The composer is rendered on top of the image editor for me, so I can not edit properly till I shrink the composer.

Thanks heaps for all you awesome work here!

3 לייקים

Thank you for your clarification!
Could you tell me which device, browser, and version you used?
The editor pops up on top of the image editor for me. This is how it looks on mine:

4 לייקים

Oh I see what is going on here, can you test with the “focused sidebar” theme which is only enabled for the Discourse team (and part of Discourse for Teams)

My guess is that you need to push the zindex up a tiny bit more. @markvanlan is helping out here.

4 לייקים

@Nam Merged in an awesome change allowing crop/rotate. There is now a selection stage after you click an (local upload only) image, to either annotate or crop/rotate. :clap:

The only issue right now is another z-index issue but with the cropping modal (the annotating modal z-index is correct). There is no stable className on the outer element for the cropping modal, so I have a PR open for the cropro library to add one.

Edit:
I forked the repo and made the small change we need. No more z-index issue.

4 לייקים

It seems like there is no solution for the issues that images being edited are too big.
It’s because the MarkerJs and Cropro set the image size when it is being edited.

3 לייקים

I have problem cannot done.

לייק 1

It’s been a year so I’ll ask in desperation again because this has so much potential, any hope for images hosted on s3 and using a cdn? :grin:

2 לייקים

Meta uses S3 and CDN and it works just fine if you are uploading the image at the same time you want to edit it. AFAIK it won’t work while editing existing images.

לייק 1

Interesting, I tried it on another site which currently has all plugins and TCs disabled and I have the same problem, but it works with s3 disabled, any ideas? The image is also oddly stretched out, should be 2:3 but it’s stretching to the width of the screen.

3 לייקים

Do you have DISCOURSE_ENABLE_CORS: true in your app.yml ?

2 לייקים

No I don’t have that line, and nothing set in cors-origins site setting either.

לייק 1

Try setting that up and rebuilding.

2 לייקים

Still happening after enabling/rebuilding, do I need to set anything for cors-origins or DISCOURSE_CORS_ORIGIN: ?

לייק 1

I have problem cannot edit done.

2021-09-20_16-46-24

לייק 1

When I try this on smartphone, it does not edit current image, and replace next image (next to current).

Could you check for this?

לייק 1