-
Notifications
You must be signed in to change notification settings - Fork 6.8k
feat(drag-drop): add service for attaching drag&drop to arbitrary DOM nodes #14437
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
Conversation
@@ -21,6 +21,7 @@ import { | |||
createTouchEvent, | |||
} from '@angular/cdk/testing'; | |||
import {Directionality} from '@angular/cdk/bidi'; | |||
import {of as observbleOf} from 'rxjs'; |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Typo? observableOf
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Ops, thanks for catching it.
6a4e57a
to
6873cda
Compare
6873cda
to
60ceb18
Compare
Hi @crisbeto! This PR has merge conflicts due to recent upstream merges. |
60ceb18
to
1156277
Compare
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Do you plan to add documentation for the service in a follow-up PR?
src/cdk/drag-drop/directives/drag.ts
Outdated
.withPlaceholderTemplate(this._placeholderTemplate ? { | ||
templateRef: this._placeholderTemplate.templateRef, | ||
data: this._placeholderTemplate.data, | ||
viewContainer: this._viewContainerRef |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I would move the placeholder and preview ternary expressions out into separate variables so that the .with
calls are a bit more concise here
src/cdk/drag-drop/drag-drop.ts
Outdated
import {DragDropRegistry} from './drag-drop-registry'; | ||
|
||
/** | ||
* Service that allows for drag&drop functionality to be attached to DOM elements. |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
nit: "drag-and-drop"
src/cdk/drag-drop/drag-drop.ts
Outdated
config: DragRefConfig = { | ||
dragStartThreshold: 5, | ||
pointerDirectionChangeThreshold: 5 | ||
}): DragRef<T> { |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Move this to a DEFAULT_CONFIG
const?
* Service that allows for drag&drop functionality to be attached to DOM elements. | ||
*/ | ||
@Injectable({providedIn: 'root'}) | ||
export class DragDrop { |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Add unit tests for consuming this service?
1156277
to
092b4c0
Compare
@jelbourn I've addressed the feedback. Regarding docs, I was planning on adding some live examples in a follow-up. As for tests, I'm not sure whether it makes sense to test this service, because all it does is create the refs which is covered by the TS type checking already. |
It would be good to have at least one test that verifies the services can be injected and invoked correctly from a code coverage standpoint. |
96238ef
to
6a3eb5f
Compare
… nodes * Adds the `DragDrop` service that simplifies the construction logic for `DragRef` and `DropListRef` and allows consumers to attach drag&drop functionality to arbitrary DOM nodes, rather than having to go through the directives. * Reworks `DragRef` and `DragDropRef` to make them easier to construct. * Normalizes some of the instances where some parameters only accept an `ElementRef`, whereas others accept `ElementRef | HTMLElement`.
6a3eb5f
to
1efd7a4
Compare
@jelbourn this PR should be good to go now. |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
LGTM
This issue has been automatically locked due to inactivity. Read more about our automatic conversation locking policy. This action has been performed automatically by a bot. |
DragDrop
service that simplifies the construction logic forDragRef
andDropListRef
and allows consumers to attach drag&drop functionality to arbitrary DOM nodes, rather than having to go through the directives.DragRef
andDragDropRef
to make them easier to construct.ElementRef
, whereas others acceptElementRef | HTMLElement
.