Transform Origin of dynamically changed, rotated elements

[hrachmkr]

Environments

• Framework name: React js
• Framework version: 16.9.0
• Moveable Component version: 0.20.10

Description

Hey! I have a problem with rotated texts.

Here you can see how it behaves.

As you can see the size of my element changes due to text typing, so the center origin of the element too. I need to keep the top left corner static. I want to know if there is any way to do this with movable methods. Like, is it possible to call onResize method on text changing event, so it would handle the transformation delta from resizing(just like drag.beforeTranslate[0] from onResize method), or do I need to handle the transformations by myself?

P.S. thank you so much for your great work. Your library really helps me a lot :)

[daybrush]

@hrachmkr

Maybe you should use request method when resize text box or move transformOrigin: 0px 0px;

https://daybrush.com/moveable/release/latest/doc/Moveable.Resizable.html#request

moveable.request("resizable", { offsetWidth, offsetHeight });

[hrachmkr]

@daybrush setting transformOrigin: 0px 0px changes the position of rotated element, so this doesn't solve the problem.

I checked moveable.request method, but it triggers only onResizeStart event, and if I'm adding requester.requestEnd() it also triggers onResizeEnd event, but it does not trigger the onResize event, from which I could get the drag property.

` const requester = movableRectRef.current.request('resizable')

  requester.request({
    offsetWidth: targetRef.offsetWidth,
    offsetHeight: targetRef.offsetHeight
  })

 requester.requestEnd()

`

I wonder if there is an option to trigger onResize event and grab the drag value?

[daybrush]

@hrachmkr

Try use instant option.

moveable.request("resizable", { offsetWidth, offsetHeight }, true);

[hrachmkr]

@daybrush

Unfortunately that does't work too. Btw I figured it out by calculating new coordinates every time my text box's size changes, so I solved this issue but it would be perfect if you could handle this problem in your library, if you have this kind of elements which don't have fixed height or width. For example this would be really helpful if you have text editing controllers from outside of movable component, like changing text size, letter spacing, etc...

Thank you so much for your reply.

Keep rocking x.

[daybrush]

@hrachmkr

Thank you. The fixed width and flexible height of contenteditable is a big challenge for me.

This is the code to return to the original position using a draggable request.

https://codepen.io/daybrush/pen/JjXmbmb

try it.

[mamsoudi]

@daybrush

Unfortunately that does't work too. Btw I figured it out by calculating new coordinates every time my text box's size changes, so I solved this issue but it would be perfect if you could handle this problem in your library, if you have this kind of elements which don't have fixed height or width. For example this would be really helpful if you have text editing controllers from outside of movable component, like changing text size, letter spacing, etc...

Thank you so much for your reply.

Keep rocking x.

Hey @hrachmkr, can you please kindly share how you managed to solve this issue and managed the calculations?