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: add ability to update internal _activeTransform #18530

Closed
fxck opened this issue Feb 17, 2020 · 6 comments · Fixed by #24769
Closed

cdk drag: add ability to update internal _activeTransform #18530

fxck opened this issue Feb 17, 2020 · 6 comments · Fixed by #24769
Labels
feature This issue represents a new feature or feature request rather than a bug or bug fix

Comments

@fxck
Copy link
Contributor

fxck commented Feb 17, 2020

I want to use cdkDrag for the dragging part of a custom scrollbar. But the thing is, the native scroll occurs, I apply transform3d to the custom scrollbar thumb, which is simultaneously the drag handle, now when I try to drag after scroll occurred, those transforms get all messed up.

So ideally I would like to be able to sync those values.

This works:

(this.cdkDragYRef as any)._dragRef._activeTransform.y = this._scrollbarPosition.y;
(this.cdkDragXRef as any)._dragRef._activeTransform.x = this._scrollbarPosition.x;
@fxck fxck added the feature This issue represents a new feature or feature request rather than a bug or bug fix label Feb 17, 2020
@crisbeto
Copy link
Member

That was one of the purposes of the cdkDragFreeDragPosition input, although I'm not completely sure how well it'll work if it's being updated while dragging.

@fxck
Copy link
Contributor Author

fxck commented Feb 17, 2020

Looks like updating _activeTransform like this doesn't quite work either.

@fxck
Copy link
Contributor Author

fxck commented Feb 17, 2020

Is there a way to update cdkDragFreeDragPosition with method? I'm trying not to trigger change detection..

Edit: this looks like it's working, gonna test it some more

    if (this._scrollbarSize.y) {
      this.trackYRef.nativeElement.style.transform = `translate3d(0, ${this._scrollbarPosition.y}px, 0)`;
      this.cdkDragYRef._dragRef.setFreeDragPosition({ y: this._scrollbarPosition.y, x: 0 });
      // (this.cdkDragYRef as any)._dragRef._activeTransform.y = this._scrollbarPosition.y;
    }

    if (this._scrollbarSize.x) {
      this.trackXRef.nativeElement.style.transform = `translate3d(${this._scrollbarPosition.x}px, 0, 0)`;
      this.cdkDragXRef._dragRef.setFreeDragPosition({ x: this._scrollbarPosition.x, y: 0 });
      // (this.cdkDragXRef as any)._dragRef._activeTransform.x = this._scrollbarPosition.x;
    }

@fxck
Copy link
Contributor Author

fxck commented Feb 18, 2020

I'm closing this @crisbeto, cdkDragFreeDragPosition does exactly what I want. And _dragRef.setFreeDragPosition works, albeit it's going thru that private property.

I'd suggest naming cdkDragFreeDragPosition something more descriptive and adding a setFreeDragPosition method to CdkDrag.

What do you think, should I make a PR (for that method at least, that rename would probably be breaking change not work doing right now I guess..)?

@fxck fxck closed this as completed Feb 18, 2020
@crisbeto
Copy link
Member

I agree that the name isn't great, but I couldn't come up with anything more descriptive.

Regarding the method, won't it be a little redundant? The input basically calls directly into it.

@angular-automatic-lock-bot
Copy link

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

This action has been performed automatically by a bot.

@angular-automatic-lock-bot angular-automatic-lock-bot bot locked and limited conversation to collaborators Mar 20, 2020
meriturva added a commit to meriturva/components that referenced this issue Apr 6, 2022
Adds method `setFreeDragPosition` in Cdk `DragDrop` directive to set
position in pixel on a drop container.

Fixes angular#18530
meriturva added a commit to meriturva/components that referenced this issue Apr 13, 2022
Adds method `setFreeDragPosition` in Cdk `DragDrop` directive to set position in pixel on a drop container.
Also corrects some inaccurate types on a couple of freeDragPosition methods of the `DragDrop` directive.

Fixes angular#18530
wagnermaciel pushed a commit that referenced this issue Apr 21, 2022
Adds method `setFreeDragPosition` in Cdk `DragDrop` directive to set position in pixel on a drop container.
Also corrects some inaccurate types on a couple of freeDragPosition methods of the `DragDrop` directive.

Fixes #18530
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
feature This issue represents a new feature or feature request rather than a bug or bug fix
Projects
None yet
2 participants