Image draggable and resizable

[Manakelll]

Hi, First of all, vue-document-editor is just great. I'm not a basic JS coder but I'm getting started and looking to integrate into vue-document-editor the possibility of making images draggable and resizable. Have you implemented such a thing? Do you have any ideas, I have already tried vue-draggable-resizable but I must be missing something if you could help me. Thank you and congratulations again for the work accomplished.

[motla]

Hi @Manakelll,

Thanks for your interest on the library and for your kind words! Unfortunately resizable/draggable image is not trivial to implement on top of this library, I think it would take at least a week of development and testing to have a minimal behavior. I don't know if a library could to that out of the box without you having to code it. However it is a great project to learn web programming.

I would say to achieve the resizable part, I would first replace images of the content by <div>s, set with CSS position: relative or absolute depending if you want the image to be over the text or aligned with the text. You can set the image either as a CSS background-image property (also set background-size: 100% 100%), or directly inside of the <div> (in this case width/height set to 100%). The <div> would need width/height to be set to the desired image size, and this size would be changed with JavaScript if the user resizes the image. Inside this div, I would set square <div>s with CSS position: absolute, for example width: 10px; height: 10px and background set with a fixed color, representing the handles (located at CSS left/top 0%, 50% and 100% all around of the image). You can set CSS cursor accordingly. Then for the dynamic part, I would call a JavaScript function on the mousedown event of every square, which does only three things:

• store the current mouse position
• listen to the mousemove event of the document, to resize the image:

  function my_function(e) {
  // resize image according to the new mouse position (you can get it from the Event object argument "e"),
  // minus the position which was stored at mousedown event.
  // NOTES: - you can set boundaries on width/height and activate them depending of which handle was dragged
  // - you can also get if the user press special keys (like Shift/Alt) to lock the image ratio for example
  }
  document.addEventListener("mousemove", my_function);

• remove the listener we just set, when the user does a mouseup (we set to do it only once)

  document.addEventListener("mouseup", function() {
  document.removeEventListener("mousemove", my_function);
  }, {once: true});

Then for the draggable part, if the image is in position: absolute I would do exactly the same process, but acting on top/left properties on mousedown of the image <div>. However I have currently no idea how to implement dragging if the image has to stay aligned with the text. It doesn't seem feasible with the current contenteditable implementation.

Don't hesitate to read MDN website for info if you don't already know the functions or CSS properties I listed (like addEventListener).

[Manakelll]

Hello, Sorry for my late response but my project is taking up all my time. I finally succeeded using draggable and resizable. I used a listener on paste which detects if it is an image and if so converts the image to base64 and creates a canvas with the resizable class. In short, it works. Thanks again I'm discovering JS being a python dev and I'm really having fun