components
components copied to clipboard
angular
[Feature Request] CDK Resizable
Please describe the feature you would like to request.
Add cdkResize (along with cdkResizeHandle) to the CDK to allow resizing of elements such as divs or any other element.
What is the use-case or motivation for this proposal?
I believe that it would complement the new drag and drop functionality very well and would be especially useful to those making dashboard like applications, such as myself..
Is there anything else we should know?
Should also probably have the similar events to the cdkDrag ones (startResizing, stopResizing, etc).
~~Hi @cole21771 can you point out the locations in source code where cdkResize is used in CDK?~~
@sahilbabbar This is a feature request.... the point is that it is NOT in the CDK, but I would like it to be ADDED to the CDK....
Edit: So just to be clear, there are no locations in code where cdkResize is used since it doesn't exist.
I could take a wack at this. @andrewseguin do team members have objections outside contributors taking this on? I'll try to follow patterns laid out by @crisbeto . I'm planning on grabbing the drag events using the dragRef similar to how the drag.ts directive is, then use those events to resize.
@nayfin Take a look at their contribution guide. Looks like they are happy to accept contributions, you just need to follow their guidelines outlined on that page.
Also, I really appreciate you taking this on. I'd be glad to do some testing with it once you're done or to give feedback on design choices if you'd like. I'm not an expert in Angular material, but I know some things I'd like out of the feature.
@cole21771 , the team usually limits outside contribution on features that need special design consideration, so it is generally a good idea to get confirmation that they are open to outside work for a particular feature before spending a lot of time developing, only to find they developed another solution internally. I will admit that this would be a bigger ticket for me, but there are already a lot of good patterns in place so I think that I can build it in a way that is consistent with the rest of the API.
Also, I will have limited free time for the foreseeable future so I will only be able to peck at it over the next few weeks, and there is a lot of source code I'll need to digest before starting. Keep this in mind if it is a feature you need soon.
I've looked into the source quite a bit, and it will be a non-trivial feature to implement and require some design docs to be written to account for the important scenarios.
- For drag-item resizing it will have to hook into and update the position of the drag item when resizing up or left
- For a list of drag-items it will have to be able to do the same thing, and also might need to update positions of all items that would be affected by the resize. (Imagine a vertical list where the first item is resized to be taller, all items below would need to move down as well)
- Would it need to handle non-drag items? I could argue both ways on this one, maybe initially only handling drag items would be best.
Additionally, all the drag events would be handy to have to make use of for this feature, but in the current implementation there doesn't seem to be a way to access the events without bringing along the drag behavior. For example: when dragging, the logic waits for dragStart event, then adjusts the position of the dragged item to correspond with the position of the pointer. For resizing we would want to hook Into those same drag events but adjust our behaviour based on what part of the element was dragged. We would only adjust position of the element when resizing the top border of the element up, or the left border towards the left, otherwise we would only be adjusting the height and/or width of the component. There is already an issue open to enable similar access to drop events for the drop-list, #14261. Hopefully, we could get a similar API setup for the drag events.
I'm happy to elaborate for anyone considering tackling this issue, as I have a need for this feature as well. Unfortunately, in its current form it would be hard to add this feature to API without inundating it with conditional logic, and repeating a lot of the event related code.
I might be mistaken but I think the regular CSS resize doesn't work on elements with cdkDrag - I think that is the motivation for this feature if I am not mistaken.
For anyone wondering how to use resizable behaviour alongside draggable, feel free to use (or extend) my simple solution: https://stackblitz.com/edit/angular-ivy-utqoca?file=src%2Fapp%2Fapp.component.html
https://stackblitz.com/edit/sq7qd3?file=src%2Fexample%2Fcdk-drag-drop-boundary-example.html
Hi I added a custom directive for cdkDrag with resize functionality.
PS - Can be improved by adding transitions
I think angular component team is not interested in angular new components or CDKs. And this reflects in recent years. And this issue is open since Jan 2019 and angular component team doesn't even bother to reply.
