feat(cdk/drag-drop): adding method to set drag position

[meriturva]

Adds method setFreeDragPosition in Cdk DragDrop directive to set
position in pixel on a drop container.

Fixes #18530

[crisbeto]

We already have an API to do this through the cdkDragFreeDragPosition input.

[meriturva]

Thanks @crisbeto for your feedback.

Here is a sample of what we are developing on our project: https://stackblitz.com/edit/angular-ivy-xxffrj?file=src/app/app.component.ts

Keep an eye on code:

// Get position of central slider programmatically
    const sliderPosition = this.centralMarkerCdkDrag.getFreeDragPosition();

    // Set new position to central marker using left marker x coordinate
    this.centralMarkerCdkDrag._dragRef.setFreeDragPosition({
      x: result.x,
      y: sliderPosition.y,
    });

So basically, it is a simple slider where a left marker has to control also the position of other drag elements (center marker in sample case).

So we have noted that is it more convenient and clean to have also a setFreeDragPosition method exposed instead of input on the template.

To be honest I guess that could be more useful to deprecate getFreeDragPosition method and simply add a method to get dragRef from a CdkDrag directive (to reduce code size and have a simple way to get dragRef from directive).

What do you think?

[crisbeto]

ok, that makes sense. I'd be fine with leaving both in since one covers the case where the position is set declaratively while the other allows for it to be done programmatically. In our to get the CI to pass, you have to run these two commands and commit the result:

yarn ng-dev format files src/cdk/drag-drop/directives/drag.spec.ts
yarn approve-api drag-drop

Also while we're at it, the type of freeDragPosition can be changed to Point and the return type of getFreeDragPosition can be changed to Readonly<Point>.

[meriturva]

Hi @crisbeto I made a few improvements as advised in your comment, but I don't know why lint test failed (running ng-dev format command on my side doesn't produce any change on drag.spec.ts file.

About api_golden_checks, I have introduced Point type usage on a few methods, I guess it has to be approved on your side.

Regarding commit messages, I don't know if I have to squash all to a single one. If yes do I have to indicate both changes (new method and typing change) ?

So thanks.

[crisbeto]

We usually squash the commits automatically before they're merged into master, but each individual commit still has to pass the formatting check. My guess is that the merge commit is causing it to fail.

[meriturva]

Hi @crisbeto now I really need your help.
I have squashed messages with commands: git rebase --interactive origin/master and git rebase --continue but I always get error messages:

error: invalid line 1: feat(cdk/drag-drop): adding method to set drag position
error: invalid line 3: Adds method `setFreeDragPosition` in Cdk `DragDrop` directive to set position in pixel on a drop container.
error: invalid line 4: Also corrects some inaccurate types on a couple of freeDragPosition methods of the `DragDrop` directive.
error: invalid line 6: Fixes #18530
error: please fix this using 'git rebase --edit-todo'.

Here final commit message that, for me, seems correct:

feat(cdk/drag-drop): adding method to set drag position

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

I have also tried to disable hooks using env variables: HUSKY_SKIP_HOOKS=1 without success (git rebase has not --no-verify option).

I have tried so many times on Ubutun and also WSL2, with Git 2.35.1 and node 16.x but no way to conclude rebase. Could you help me to conclude this pr?

Thanks again.

[crisbeto]

I'm not sure why it could be happening, my guess is that it's due to the merge commit that is still in the branch. An alternative could be to create a new branch, cherry-pick the commit into it and submit a new PR.

[meriturva]

Close it in favor of a new one.

[angular-automatic-lock-bot]

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.}