Image Resizing In HtmlEditor #2192
Conversation
…mise and create custom HtmlEditor buttons in your own projects.
Fixing ref clickListener
There was a problem hiding this comment.
Thank you for the pull request @YodasMyDad! This would be a great addition which has been highly requested.
Please address the comments I have left.
| var y = e.clientY - rect.top; | ||
| if (!e.target.closest('.rz-marker')) { | ||
| instance.invokeMethodAsync('Click', x, y); | ||
| ref.clickListener = function (e) { |
There was a problem hiding this comment.
This code seems to be in the createChart function ??? Doesn't look correct.
There was a problem hiding this comment.
Yeah I got in a muddle. I had a big refactor and ended up needing to use AI to help. I ended up renaming some methods to clickListener to clickHandler, I have run through all the charts and they all work as expected.
There was a problem hiding this comment.
Could you revert renaming this method? There is no reason for this change there to blame to you in git logs.
| handle.setAttribute('data-position', position); | ||
|
|
||
| // Add inline styles to ensure visibility | ||
| handle.style.position = 'absolute'; |
There was a problem hiding this comment.
No need to use inline styles. Those attributes should come from the theme CSS file. If needed we can use !important there to be sure they apply (now I understand why you have put them in the theme).
There was a problem hiding this comment.
So, I have tried increased specificity which you'll even see with the latest changes but for the life of me can't get the handles to show without using inline styles.
- Removed redundant `ImageResizeData` class. - Simplified `OnImageResize` method to use `ImageResizeEventArgs` directly. - Adjusted SCSS styles for selected images and resize handles in the HtmlEditor.
- Removed unnecessary console logs from `ref.clickListener`. - Simplified SCSS by removing `!important` in resize handle styles.
- Replaced `mousedown`, `touchstart`, and associated listeners with `pointerdown`. - Unified `mousemove`, `mouseup`, and `touch` handlers into `pointer` equivalents.
- Replaced redundant style updates with direct use of `clientWidth` and `clientHeight`. - Simplified handling of computed dimensions when resizing images.
| var y = e.clientY - rect.top; | ||
| if (!e.target.closest('.rz-marker')) { | ||
| instance.invokeMethodAsync('Click', x, y); | ||
| ref.clickListener = function (e) { |
There was a problem hiding this comment.
Could you revert renaming this method? There is no reason for this change there to blame to you in git logs.
| @@ -1937,17 +1951,24 @@ window.Radzen = { | |||
| }; | |||
|
|
|||
| ref.clickListener = function (e) { | |||
| console.log('Editor click event on:', e.target); | |||
There was a problem hiding this comment.
Remove this logging too.
| if (e.target.matches('img')) { | ||
| console.log('Image clicked:', e.target); |
| // Create container for the image and handles | ||
| var wrapper = document.createElement('div'); | ||
| wrapper.className = 'rz-image-resize-container'; | ||
| wrapper.style.position = 'relative'; |
There was a problem hiding this comment.
No need for those inline styles after setting a className.
|
Hey. Thanks for coming back, I was on holiday in Spain last week. I will get these changes sorted in the next couple of days. |
|
Gone down a bit of a rabbit hole. I realised that I have broken the insert link on the images with this approach, just looking into some other options |
Adding and removing link working
Starting to test other buttons
|
Up to you what you want to do here. Unfortunately due to personal and work stuff, I just don't have the time to keep on with this right now, and there are two things left. Working
Needs Addressing
If you want to close the PR then no problem, as it's going to be around 2-3 weeks before I can look at this again. |
|
Hi @YodasMyDad, Unfortunately we can't work on this any time soon. Still I don't think there is a need to close the PR in case you plan to return to it after a month or so. |
Create handles on images within the HTMLEditor and allows the user to click and drag to resize the image.