PromucFlow_constructor/app/client/src/actions/canvasSelectionActions.ts
rahulramesha 717b2c1610
feat: drag n drop and Container jump enhancements (#19047)
## Description

This PR includes Changes for Drag and drop Improvements, That includes,
- Resizing dragging widgets along Container edges.
- Initially resize widgets against Container/Droptarget widgets.
- While holding close to Container/Droptarget widgets for half a second,
start to reflow the widget.

Fixes #19139 
Fixes #12892


Media


https://user-images.githubusercontent.com/71900764/209154834-66acecbb-2df8-4598-86d5-4fe7843dd21b.mp4



## Type of change

- Bug fix (non-breaking change which fixes an issue)
- New feature (non-breaking change which adds functionality)


## How Has This Been Tested?
- Manual
- Jest


### Test Plan
> Add Testsmith test cases links that relate to this PR

### Issues raised during DP testing
> Link issues raised during DP testing for better visiblity and tracking
(copy link from comments dropped on this PR)


## Checklist:
### Dev activity
- [x] My code follows the style guidelines of this project
- [x] I have performed a self-review of my own code
- [x] I have commented my code, particularly in hard-to-understand areas
- [ ] I have made corresponding changes to the documentation
- [x] My changes generate no new warnings
- [x] I have added tests that prove my fix is effective or that my
feature works
- [x] New and existing unit tests pass locally with my changes
- [ ] PR is being merged under a feature flag


### QA activity:
- [ ] Test plan has been approved by relevant developers
- [ ] Test plan has been peer reviewed by QA
- [ ] Cypress test cases have been added and approved by either SDET or
manual QA
- [ ] Organized project review call with relevant stakeholders after
Round 1/2 of QA
- [ ] Added Test Plan Approved label after reveiwing all Cypress test
2023-01-06 22:27:40 +05:30

57 lines
1.3 KiB
TypeScript

import {
ReduxAction,
ReduxActionTypes,
} from "@appsmith/constants/ReduxActionConstants";
import { SelectedArenaDimensions } from "pages/common/CanvasArenas/CanvasSelectionArena";
import { XYCord } from "pages/common/CanvasArenas/hooks/useRenderBlocksOnCanvas";
export const setCanvasSelectionFromEditor = (
start: boolean,
startPoints?: XYCord,
) => {
return {
type: start
? ReduxActionTypes.START_CANVAS_SELECTION_FROM_EDITOR
: ReduxActionTypes.STOP_CANVAS_SELECTION_FROM_EDITOR,
payload: {
...(start && startPoints ? { startPoints } : {}),
},
};
};
export const setCanvasSelectionStateAction = (
start: boolean,
widgetId: string,
) => {
return {
type: start
? ReduxActionTypes.START_CANVAS_SELECTION
: ReduxActionTypes.STOP_CANVAS_SELECTION,
payload: {
widgetId,
},
};
};
export const selectAllWidgetsInAreaAction = (
selectionArena: SelectedArenaDimensions,
snapToNextColumn: boolean,
snapToNextRow: boolean,
isMultiSelect: boolean,
snapSpaces: {
snapColumnSpace: number;
snapRowSpace: number;
},
): ReduxAction<any> => {
return {
type: ReduxActionTypes.SELECT_WIDGETS_IN_AREA,
payload: {
selectionArena,
snapToNextColumn,
snapToNextRow,
isMultiSelect,
snapSpaces,
},
};
};