Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[cdk-drag-drop] Can't change initial transform in runtime #15474

Closed
Flashunt opened this Issue Mar 14, 2019 · 2 comments

Comments

Projects
None yet
2 participants
@Flashunt
Copy link

Flashunt commented Mar 14, 2019

What is the expected behavior?

Change _initialTransform in runtime, with an @input property or something else.

What is the current behavior?

ezgif com-video-to-gif

What are the steps to reproduce?

https://stackblitz.com/edit/angular-bdq1af?file=app%2Fcdk-drag-drop-overview-example.html

Which versions of Angular, Material, OS, TypeScript, browsers are affected?

7.3.4

Is there anything else we should know?

I have a solution but i think this isn't an optimal solution.
I overwrite the _initialTransform property of the _dragRef in the cdkDragStart event object, but this not enough.

@Flashunt

This comment has been minimized.

Copy link
Author

Flashunt commented Mar 14, 2019

My research:

dragTest = [
    {text: 'drag me around', deg: 0, isChangedOrientation: false, dragCounter: 0}
];

// cdkDragStarted event, with $event and the ngFor object input.
changeInitialTransform($event: any, drag: any): void {
    $event.source._dragRef._initialTransform = 'rotate(' + drag.deg + 'deg)';
    let prevWidth: 0;
    let prevHeight: 0;
    if (((Math.abs(drag.deg)) / 90) % 2 !== 0) {
      if (!drag.isChangedOrientation && $event.source._dragRef._previewRect) {
        prevWidth = $event.source._dragRef._previewRect.width;
        prevHeight = $event.source._dragRef._previewRect.height;
        $event.source._dragRef._previewRect.width = prevHeight;
        $event.source._dragRef._previewRect.height = prevWidth;
      }
      drag.isChangedOrientation = true;
    } else {
      if (drag.isChangedOrientation && $event.source._dragRef._previewRect) {
        prevWidth = $event.source._dragRef._previewRect.width;
        prevHeight = $event.source._dragRef._previewRect.height;
        $event.source._dragRef._previewRect.width = prevHeight;
        $event.source._dragRef._previewRect.height = prevWidth;
      }
      drag.isChangedOrientation = false;
    }
  }

// cdkDragMoved event, with a $event, dragged object and rotate direction input.
  appendTransform($event: any, drag: any, direction?: string): void {
    const previousDeg = drag.deg;
    if (direction === 'left') {
      drag.deg = drag.deg - 90;
    } else if (direction === 'right') {
      drag.deg = drag.deg + 90;
    } else {
      drag.deg = drag.deg + 90;
    }
    if ($event.path[1].style.transform !== '') {
      $event.path[1].style.transform = $event.path[1].style.transform
        .replace('rotate(' + previousDeg + 'deg)', 'rotate(' + drag.deg + 'deg)');
    } else {
      $event.path[1].style.transform = 'rotate(' + drag.deg + 'deg)';
    }
  }

ezgif com-video-to-gif (2)

I know this is a horrible solution, but works, and works with .cdkDragBoundary too. But i hope you can solve this with a better way.

@crisbeto

This comment has been minimized.

Copy link
Member

crisbeto commented Mar 14, 2019

Will be added in #14696.

@crisbeto crisbeto closed this Mar 14, 2019

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.