search

daybrush / moveable

Moveable! Draggable! Resizable! Scalable! Rotatable! Warpable! Pinchable! Groupable! Snappable!
https://daybrush.com/moveable/
MIT License
10.12k stars 621 forks source link

resize after rotation turns element to its first position #403

Open mayschil opened 3 years ago

mayschil commented 3 years ago

Environments

Description

I'm using moveable to resize and rotate elements.

This is my moveable element: <ngx-moveable [target]="target" [container]="mapBackground" [resizable]="true" [rotatable]="true" [keepRatio]='false' [throttleResize]='0' [renderDirections]='["nw","n","ne","w","e","sw","s","se"]' [edge]='false' [zoom]='1' [origin]='true' [padding]='{"left":0,"top":0,"right":0,"bottom":0}' (resizeStart)="onResizeStart($event)" (resize)="onResize($event)" (rotateStart)="onRotateStart($event)" (rotate)="onRotate($event)" = >

and here are my functions:

I set at first : frame = { translate: [0,0], rotate : 0 }

onResizeStart({setOrigin, dragStart, moveable}) { setOrigin(['%', '%']); dragStart && dragStart.setState(this.frame.translate);

}

onResize({target, width, height, drag}) { console.log(drag) const beforeTranslate = drag.beforeTranslate;

this.frame.translate = beforeTranslate;
target.style.width = `${width}px`;
target.style.height = `${height}px`;
target.style.transform = `translate(${beforeTranslate[0]}px, ${beforeTranslate[1]}px)`;

}

onRotateStart({set}) { set(this.frame.rotate); }

onRotate({beforeRotate, target}) { console.log(beforeRotate) this.frame.rotate = beforeRotate; target.style.transform = rotate(${beforeRotate}deg); }

My problem is with the onResize funciton.It seems that drag.beforeTranslate is always [0, 0]. The result is : If I rotate and then resize - the element appears as if it was never rotated

daybrush commented 3 years ago

@mayschil

You have to save both the translate value and the rotate value.

And you need to set both translate rotate in transform.

mayschil commented 3 years ago

@daybrush I do save that information... My problem is that the translate value never changes. It is always [0,0] - to get the translate value I use drag.beforeTranslate as mentioned in the examples - it is always [0,0].

And also, when you say - you need to set both translate rotate in transform - you mean in the frame or element target? I would be happy if you can specify

daybrush commented 3 years ago

@mayschil

this.frame.translate = beforeTranslate; target.style.width = ${width}px; target.style.height = ${height}px; target.style.transform = translate(${beforeTranslate[0]}px, ${beforeTranslate[1]}px) rotate(${this.frame.rotate}deg);

* onRotate
```js
console.log(beforeRotate)
this.frame.rotate = beforeRotate;
target.style.transform = `translate(${this.frame.translate[0]}px, ${this.frame.translate[1]}px) rotate(${beforeRotate}deg)`;

If translate is [0,0], does it mean that in rotate?

Originally, in most situations, rotate's translate is [0, 0].

If you use transform in the order translate -> rotate -> (scale), it is always [0, 0].

mayschil commented 3 years ago

Great. Thank you.

One more question: It seems that onDragGroupEnd never gets called. How can I know I finished dragging a group?

On Sat, Jan 16, 2021 at 3:36 PM Daybrush (Younkue Choi) < notifications@github.com> wrote:

@mayschil https://github.com/mayschil

  • onResize

this.frame.translate = beforeTranslate;target.style.width = ${width}px;target.style.height = ${height}px;target.style.transform = translate(${beforeTranslate[0]}px, ${beforeTranslate[1]}px) rotate(${this.frame.rotate}deg);

  • onRotate

console.log(beforeRotate)this.frame.rotate = beforeRotate;target.style.transform = translate(${this.frame.translate[0]}px, ${this.frame.translate[1]}px) rotate(${beforeRotate}deg);

If translate is [0,0], does it mean that in rotate?

Originally, in most situations, rotate's translate is [0, 0].

If you use transform in the order translate -> rotate -> (scale), it is always [0, 0].

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/daybrush/moveable/issues/403#issuecomment-761564372, or unsubscribe https://github.com/notifications/unsubscribe-auth/AH7IBJEYAHD3D7ELPDBGWHDS2GI47ANCNFSM4WEVHLPQ .

daybrush commented 3 years ago

@mayschil

I don't know why the group event doesn't occur.

It's working fine as a test now.

Are you calling the dragStart method?

mayschil commented 3 years ago

I'm sorry. I deleted this email but you still got it. All works perfectly fine!

On Sun, Jan 31, 2021 at 6:54 AM Daybrush (Younkue Choi) < notifications@github.com> wrote:

@mayschil https://github.com/mayschil

I don't know why the group event doesn't occur.

It's working fine as a test now.

Are you calling the dragStart method?

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/daybrush/moveable/issues/403#issuecomment-770325746, or unsubscribe https://github.com/notifications/unsubscribe-auth/AH7IBJDW3BTUCQYTDWW65YLS4TO65ANCNFSM4WEVHLPQ .

mayschil commented 3 years ago

But I do have one more question. I use moveable as an editing tool where I allow the user to draw an image so everything in my code should respond quickly. Often when I want to select (click) a target I clear the previous one but it doesn't get cleared as quicky as I need so I use setTimeout - which is a really bad habit. Is there any function to clear a target on moveable component?

This is my code: I use one moveable component for my entire app, Whenever I need to select new targets I clear the old ones and populate the new one.

<ngx-moveable

moveableComponent

[target]="targets" [container]="mapBackground" [resizable]="resizable" [draggable]="draggable" [rotatable]="rotatable" [defaultGroupRotate]='0' [defaultGroupOrigin]='"50% 50%"' [keepRatio]='false' [throttleResize]='0' [renderDirections]=renderDirections [edge]='false' [zoom]='1' [origin]='true' [padding]='{"left":0,"top":0,"right":0,"bottom":0}' (resizeStart)="onResizeStart($event)" (resize)="onResize($event)" (resizeEnd)="onResizeEnd($event)" (rotateStart)="onRotateStart($event)" (rotate)="onRotate($event)" (rotateEnd)="onRotateEnd($event)" (dragStart)="onDragStart($event)" (drag)="onDrag($event)" (dragEnd)="onDragEnd($event)" (dragGroupStart)="onDragGroupStart($event)" (dragGroup)="onDragGroup($event)" (dragGroupEnd)="dragGroupEnd($event)"

<ngx-selecto *ngIf="allowMutipleSelectionByDraggingMouse" dragContainer=".map-container" [selectableTargets]='[".map-selecto-area .table, .map-selecto-area .object"]' [hitRate]="100" [selectByClick]="true" [selectFromInside]="true" [ratio]="0" (selectEnd)="selectEnd($event)" (select)="onSelect($event)"

On Sun, Jan 31, 2021 at 9:08 AM May Schiller may@tabit.cloud wrote:

I'm sorry. I deleted this email but you still got it. All works perfectly fine!

On Sun, Jan 31, 2021 at 6:54 AM Daybrush (Younkue Choi) < notifications@github.com> wrote:

@mayschil https://github.com/mayschil

I don't know why the group event doesn't occur.

It's working fine as a test now.

Are you calling the dragStart method?

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/daybrush/moveable/issues/403#issuecomment-770325746, or unsubscribe https://github.com/notifications/unsubscribe-auth/AH7IBJDW3BTUCQYTDWW65YLS4TO65ANCNFSM4WEVHLPQ .

mayschil commented 3 years ago

By the way, If I don't use setTimeout I get errors in my console of this: [image: image.png]

On Sun, Jan 31, 2021 at 7:26 PM May Schiller may@tabit.cloud wrote:

But I do have one more question. I use moveable as an editing tool where I allow the user to draw an image so everything in my code should respond quickly. Often when I want to select (click) a target I clear the previous one but it doesn't get cleared as quicky as I need so I use setTimeout - which is a really bad habit. Is there any function to clear a target on moveable component?

This is my code: I use one moveable component for my entire app, Whenever I need to select new targets I clear the old ones and populate the new one.

<ngx-moveable

moveableComponent

[target]="targets" [container]="mapBackground" [resizable]="resizable" [draggable]="draggable" [rotatable]="rotatable" [defaultGroupRotate]='0' [defaultGroupOrigin]='"50% 50%"' [keepRatio]='false' [throttleResize]='0' [renderDirections]=renderDirections [edge]='false' [zoom]='1' [origin]='true' [padding]='{"left":0,"top":0,"right":0,"bottom":0}' (resizeStart)="onResizeStart($event)" (resize)="onResize($event)" (resizeEnd)="onResizeEnd($event)" (rotateStart)="onRotateStart($event)" (rotate)="onRotate($event)" (rotateEnd)="onRotateEnd($event)" (dragStart)="onDragStart($event)" (drag)="onDrag($event)" (dragEnd)="onDragEnd($event)" (dragGroupStart)="onDragGroupStart($event)" (dragGroup)="onDragGroup($event)" (dragGroupEnd)="dragGroupEnd($event)"

<ngx-selecto *ngIf="allowMutipleSelectionByDraggingMouse" dragContainer=".map-container" [selectableTargets]='[".map-selecto-area .table, .map-selecto-area .object"]' [hitRate]="100" [selectByClick]="true" [selectFromInside]="true" [ratio]="0" (selectEnd)="selectEnd($event)" (select)="onSelect($event)"

On Sun, Jan 31, 2021 at 9:08 AM May Schiller may@tabit.cloud wrote:

I'm sorry. I deleted this email but you still got it. All works perfectly fine!

On Sun, Jan 31, 2021 at 6:54 AM Daybrush (Younkue Choi) < notifications@github.com> wrote:

@mayschil https://github.com/mayschil

I don't know why the group event doesn't occur.

It's working fine as a test now.

Are you calling the dragStart method?

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/daybrush/moveable/issues/403#issuecomment-770325746, or unsubscribe https://github.com/notifications/unsubscribe-auth/AH7IBJDW3BTUCQYTDWW65YLS4TO65ANCNFSM4WEVHLPQ .