Resize picture

[E-Mans-Application]

Hello,

I was wondering whether and how the user could manually resize a picture inserted in the editor.
When I select the image, I can't slide the corners of the picture to resize or move it (as I can do with Word or LibreOffice for instance).
It would be very convenient to propose such an option.

Sincerely,
E__Man.

[dankito]

I couldn't find a quick way how to do it.

Do you know how this can be done?

Any pull requests are welcome.

[E-Mans-Application]

Hello,

I don't know whether it is possible, but if you can catch OnTouchEvent on the picture, you can then use a ScaleGestureDetector.
(see https://developer.android.com/training/gestures/scale#scale)
You would compare the scale factor with the size of the image, and you would set (or update) height and width attributes in the html tag <img ... />

With this, the user could not change the proportions of the image, however.

[dankito]

After a little research I think it's not possible to draw drag handles natively as it seems you cannot draw on an Android WebView.

The only way to do this seems to be in JavaScript - which I don't know how to do.

But what do you think of when the user clicks on an image, then a native dialog gets displayed and the user then can select the size in pixels or percent?

In this dialog I could also add a button to download the image to local storage or embed it in html (see #2).

[E-Mans-Application]

I think this is a very good idea. Do you think you could measure the size of the image to display it in the dialog when it is not explicitly mentioned in height and width attributes?

Moreover, I found this link to implement a drag-to-resize feature in javascript:
http://interactjs.io/#resizing
I have not tested yet, but the provided demo seems to produce the expected behavior.
(The code is under the MIT license, so you can use it in your project on condition that you add a copy of the original license.)

[dankito]

interactjs looks quite promising.
And way better than having to type in image's size in a dialog.
Bad just that it doesn't show any resize handles, so that users might not see that they can resize the image.

As i only have rare time, could you provide an implementation and then post a pull request?
I would then provide within a few days a new release.

[E-Mans-Application]

I will address the issue, but I am not accustomed to programming in Kotlin. (I usually program with Java.)
I will come back to you within a few days to tell you about the progress of that implementation.

[E-Mans-Application]

I guess I'm doing something wrong, but I can't clone the project in Android Studio.
I get the error:
Gradle sync failed: Could not get unknown property 'ossrhUsername' for object of type org.gradle.api.publication.maven.internal.deployer.DefaultGroovyMavenDeployer.

[dankito]

The reason is that you don't know my credentials to publish the library to Maven Central ;) .

In build.gradle in RichTextEditorCommon, RichTextEditorAndroid and RichTextEditorJavaFX comment out these lines (almost at the bottom of the file):

        repository(url: "https://oss.sonatype.org/service/local/staging/deploy/maven2/") {
            authentication(userName: ossrhUsername, password: ossrhPassword)
        }

        snapshotRepository(url: "https://oss.sonatype.org/content/repositories/snapshots/") {
            authentication(userName: ossrhUsername, password: ossrhPassword)
        }

And don't be afraid, there should be no need to program any Kotlin.

Simply take a look at the file RichTextEditorCommon/src/main/resources/editor/rich_text_editor.js.

This JavaScript file wraps the basic functionality around which RichTextEditor is built.

[E-Mans-Application]

Thank you. That was obvious, I should have thought about that earlier...

Indeed, I didn't have to program any Kotlin. I was not aware you used Javascript for all the editor functions.

I successfully implemented:

• resizing images
• multi-touch rotation
  (see http://interactjs.io/)

I made a pull request (I hope I didn't forget to commit any changes).

You should also add a license and copyright notice to match the requirements of the Interact's MIT License

[dankito]

Thank you very much for your efforts and your pull request!

You can see the integrated changes on branch feature/ResizeImage.

Before I merge it to master, one last question:
As I'm not familiar with license compatibility, what do I have to do use Interact's MIT license under RichTextEditor's Apache 2.0 license?

Do I have to add MIT license file or mention the author somewhere (where?)?

[E-Mans-Application]

Maybe you could add the notice in the license file, such as:

"This library contains code from the following external library:

taye/interact.js
Copyright: Taye Adeyemi
License: MIT License
(https://taye.mit-license.org/)"

[dankito]

I added the license info as you suggested.

Just released version 1.2.1 to Maven Central and to PlayStore.

Please check if the implementation meets your expectations and if so close this issue.

[E-Mans-Application]

Rotation is not kept when calling setHtml()
Image was still resizable after calling setInputEnabled(false)
Rotation loss is not an urgent matter even though I will try to fix it.

I made a new pull request to prevent the user from resizing the image when input is disabled.