gentics/gentics-ui-image-editor

An Angular module for cropping, resizing and setting the focal point of images.

gentics-ui-image-editor's Issues

Misplaced crosshair when opening in modal

Hi, this is a really easy to use component, thanks for this. Although, I have some issues.

As mentioned in #1, it would be a good idea to able to set initial values. For now I did it via the modal interface, directly setting the focalPointX and focalPointY, and it works well.

Sadly, sometimes the crosshair is misplaced from the initial set focal point values. eg.: I edit an image, set the coordinates, save it, close the modal. Then I reopen it, it provides the last time saved coordinates, it show up as it should, then after the third or fourth time I reopen the modal this way the crosshair is moved by some pixels left. And after the next reopens it is kept here.

There are some images, where it is not happens. Also when the crosshair misplaced and I click on edit focal point, the editor crosshair is placed on the right place. I think the issue is with the animation of the modal or the size of the image.

Do you have any idea, why does it happens?

Thanks in advance!

Suggestions

Hi - As already stated before, thanks for this very awesome implementation!

I have a few suggestions / proposals:

1. Rename the (transformation) output to (transformationChange) and add an input transformation - there is currently no way to supply already existing scaling/cropping/focalpoint information to the editor.
   @Input() transformation & @Output() transformationChange would allow consumers to use double-binding.

2. Disable text selection for the interactive elements (e.g. mode buttons, "aspect ration" text)
   When a user switches between modes and has the mouse down for a tad too long, the text below the buttons gets selected

3. When in mode X, switch back to the overview when canX changes to false

4. Exact scaling via text input
   e.g. width shows "1,921px", but as <input value=1,921><span>px</span>
   User could update the value to an exact value (1920px)

5. Use default (non-interactive) cursor for mode button when in a mode
   e.g. after clicking on "scale", the button on the left side still shows the hand cursor, but can not be interacted with it

I'd be happy to hear your opinion/input.