Issues regarding text edit and resize

[iprasadg]

Hello team, I am facing some issues while working with ngx-movable (Angular).

1. Unable to edit text properly even after adding contenteditable attribute to true. It wont work with mouse left click, also it wont wrap properly with movable controls, the text goes outside of the controls.

2. While resizing text, movable controls are not wrapping properly.

Thank You.

[daybrush]

@iprasadg

you can use:

• dragStart & stop
• updateRect()

This is a demo with contenteditable:
https://codesandbox.io/s/ngx-moveable-democontenteditable-ic923

[iprasadg]

@daybrush Thanks for the quick reply. Right now, I am checking, if this all works properly on any event.

[iprasadg]

@daybrush Hi, I went through your demo and also tried different examples. Right now I am working with editable text, I came to know that while resizing target's (text) height remains same even if we resize.

[daybrush]

@iprasadg

In fact, the width and height values must not be set in order for the text to stretch. So resize should not be done because the width and height are adjusted.

like below demo:
https://codesandbox.io/s/smoosh-architecture-jufyy

[iprasadg]

@daybrush
First of all, thank you for your help for my previous queries. From last few days, I am working with ngx-moveable (Angular).

Query:
I am having problem to set moveable controls show and hide. I tried this.moveable.target = null It is working fine but, after this image resize is not working properly.

Is there any other way to Show/Hide moveable controls.

Method written in Angular:

activateMoveableControl(event) {
document.querySelectorAll('.moveable').forEach(key => {
const elements = document.elementsFromPoint(event.clientX, event.clientY);
const chosenTarget = elements.find(key => key.matches('.moveable')) as HTMLElement;
if (chosenTarget) {
this.targetEl = chosenTarget;
}
chosenTarget ? (this.moveable.target = this.targetEl) : (this.targetEl = null);
});
}

Thanks

[daybrush]

@iprasadg
Shouldn't it be used like this?

<ngx-moveable
    [target]="targetEl"
/>