Commit Graph

3 Commits

Author SHA1 Message Date
Preet Sidhu
fa7bd6a543
feat: add layouts and widgets for sections and zones. (#29713)
## Description

1. Create Section Widget.
2. Create Zone Widget.
3. Create layouts and presets for Sections and zones.
4. Upate layout for Anvil Main Canvas.
5. Refactor BaseLayoutComponent. Separate renderer for edit and view
modes.
6. Add childrenMap context to avoid prop drilling through all layouts.
7. Add Anvil Config for WDS widgets.

#### Type of change
- New feature (non-breaking change which adds functionality)

## Testing
#### How Has This Been Tested?
- [x] Manual
- [ ] JUnit
- [ ] Jest
- [ ] Cypress

#### Test Plan

## 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
- [ ] 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:
- [ ] [Speedbreak
features](https://github.com/appsmithorg/TestSmith/wiki/Guidelines-for-test-plans#speedbreakers-)
have been covered
- [ ] Test plan covers all impacted features and [areas of
interest](https://github.com/appsmithorg/TestSmith/wiki/Guidelines-for-test-plans#areas-of-interest-)
- [ ] Test plan has been peer reviewed by project stakeholders and other
QA members
- [ ] Manually tested functionality on DP
- [ ] We had an implementation alignment call with stakeholders post QA
Round 2
- [ ] Cypress test cases have been added and approved by SDET/manual QA
- [ ] Added `Test Plan Approved` label after Cypress tests were reviewed
- [ ] Added `Test Plan Approved` label after JUnit tests were reviewed


<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit

- **New Features**
- Introduced a new `Zone Stepper Control` component for UI interaction.
- Added `AnvilCanvas` and `AnvilMainCanvas` components with improved
performance and interaction features.
- Implemented `LayoutProvider` and `useClickToClearSelections` for
better layout management.
- Launched `AnvilCanvasDraggingArena` and `AnvilHighlightingCanvas`
components with enhanced drag-and-drop capabilities.
- New `useZoneMinWidth` hook to calculate minimum zone width based on
child widgets.
- Added `SectionRow`, `Section`, `ZoneColumn`, and `Zone` components for
advanced layout structuring.
  - New `WidgetRenderer` component for dynamic child widget rendering.

- **Enhancements**
- Improved canvas activation and deactivation logic with
`useCanvasActivation` and `useCanvasActivationStates`.
- Enhanced drag-and-drop experience with updated `useCanvasDragging`
logic.
- Streamlined `AnvilMainCanvas` integration with conditional rendering
based on `renderMode`.
- Optimized `FlexLayout` component to handle new `isContainer` and
`layoutType` properties.

- **Bug Fixes**
- Fixed issues with widget positioning and event handling in
`WidgetNamesCanvas` components.
- Corrected `PageView` width property type for consistent page
rendering.

- **Refactor**
- Consolidated Anvil layout update management with `anvilSagas` and
`anvilChecksSagas`.
- Refined `SectionWidget` and `ZoneWidget` configuration for improved
stability and performance.
- Streamlined `LayoutElementPositionsObserver` with `layoutType`
enhancements.

- **Documentation**
- Updated comments and added clarifications for better developer
understanding of canvas-related hooks and components.

- **Style**
- Modified `.anvil-canvas` class styles for full-width and height
presentation.

- **Chores**
- Cleaned up import statements and removed unused code across various
components and utilities.

- **Tests**
- Enhanced Cypress tests with additional selectors and interaction
commands for `AutoDimension` feature verification.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->

---------

Co-authored-by: Ashok Kumar M <35134347+marks0351@users.noreply.github.com>
2023-12-26 09:16:58 -05:00
Preet Sidhu
159a26fb6e
chore: Add MutuationObserver to track changes in positions of widgets and layouts. (#28315) 2023-10-24 07:37:06 -04:00
Preet Sidhu
69f4a412bf
chore: add highlight calculation logic for layouts. (#27980)
## Description

1. Add LayoutComponent functionality.
2. Create Basic LayoutComponents.
3. Create LayoutPresets needed for Container-like widgets.
4. Add highlight calculation logic for all basic Layout Components.
5. Create dragging sagas for Anvil.
6. Create DraggingArena associated functionality to handle DnD in Anvil.

#### PR fixes following issue(s)
Fixes #27004 


#### Type of change
> Please delete options that are not relevant.
- New feature (non-breaking change which adds functionality)

## Testing

#### How Has This Been Tested?
- [ ] Manual
- [ ] JUnit
- [x] Jest
- [ ] Cypress


## 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
- [x] PR is being merged under a feature flag


#### QA activity:
- [ ] [Speedbreak
features](https://github.com/appsmithorg/TestSmith/wiki/Guidelines-for-test-plans#speedbreakers-)
have been covered
- [ ] Test plan covers all impacted features and [areas of
interest](https://github.com/appsmithorg/TestSmith/wiki/Guidelines-for-test-plans#areas-of-interest-)
- [ ] Test plan has been peer reviewed by project stakeholders and other
QA members
- [ ] Manually tested functionality on DP
- [ ] We had an implementation alignment call with stakeholders post QA
Round 2
- [ ] Cypress test cases have been added and approved by SDET/manual QA
- [ ] Added `Test Plan Approved` label after Cypress tests were reviewed
- [ ] Added `Test Plan Approved` label after JUnit tests were reviewed

---------

Co-authored-by: Ashok Kumar M <35134347+marks0351@users.noreply.github.com>
Co-authored-by: Aswath K <aswath.sana@gmail.com>
Co-authored-by: rahulramesha <rahul@appsmith.com>
Co-authored-by: rahulramesha <71900764+rahulramesha@users.noreply.github.com>
2023-10-19 16:27:40 -04:00