Go to file
Ashok Kumar M 4b1ef98014
feat: Anvil DnD Polish(Refactor) (#32839)
[![workerB](https://img.shields.io/endpoint?url=https%3A%2F%2Fworkerb.linearb.io%2Fv2%2Fbadge%2Fprivate%2FU2FsdGVkX18VSEOqElAtQ747ag1P1M0EAgrsJtMy4pQ%2Fcollaboration.svg%3FcacheSeconds%3D60)](https://workerb.linearb.io/v2/badge/collaboration-page?magicLinkId=MdeCkAG)
## Description
In this PR, 
- we are refactoring Anvil DnD to use dom elements to render highlights
instead of canvas.

  Why?
- Doesn't have the ability to overflow a widget and still allow dnd
events(section widget use case)
  - limitations with respect to being testable

- we are adding compensators to dnd layers, so that DnD is not just for
layout but for the entire widget.
  Widget is the appsmith entity.
layout is something present in container like widgets like Section and
Zone which allow you to contain children widgets based on a the layout
structure.
  
  What are compensators?
  - additional padding for DnD layers in a widget
- additional position offsets for highlights in a widget so that they
don't stick to the layout.
  
  Why compensators?
- Section widget can be activated to show highlights in areas
overlapping with main canvas
- DnD should be possible even at spacings created by parent widget like
in Zone widget

- we are also removing canvas activation logic and moving to using mouse
move event to activate a canvas for DnD.

Fixes #32016
_or_  
Fixes `Issue URL`
> [!WARNING]  
> _If no issue exists, please create an issue first, and check with the
maintainers if the issue is valid._

## Automation

/ok-to-test tags="@tag.Anvil"

### 🔍 Cypress test results
<!-- This is an auto-generated comment: Cypress test results  -->
> [!TIP]
> 🟢 🟢 🟢 All cypress tests have passed! 🎉 🎉 🎉
> Workflow run:
<https://github.com/appsmithorg/appsmith/actions/runs/8872919856>
> Commit: 3f6603bf8480a99437552ac73764c9de1d6f7f95
> Cypress dashboard url: <a
href="https://internal.appsmith.com/app/cypress-dashboard/rundetails-65890b3c81d7400d08fa9ee5?branch=master&workflowId=8872919856&attempt=1"
target="_blank">Click here!</a>

<!-- end of auto-generated comment: Cypress test results  -->












## Communication
Should the DevRel and Marketing teams inform users about this change?
- [ ] Yes
- [x] No


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

## Summary by CodeRabbit

- **New Features**
- Introduced a new layout property for widgets, enhancing customization
options.
- Added a custom error boundary component to handle and display errors
elegantly.
- New drag-and-drop components and utilities to improve interaction
within the editor canvas.
- Adjusted component hierarchies in Anvil editor and viewer for better
performance and structure.

- **Refactor**
- Simplified rendering logic in `AnvilWidgetComponent` by removing
conditional boundaries.
- Updated the hierarchy within the Anvil editor, enhancing component
nesting and interaction.

- **Bug Fixes**
- Adjusted padding values and added new constants for better UI
alignment and interaction feedback.

- **Chores**
- Renamed and reorganized Cypress locators and methods for clearer and
more efficient testing automation.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
2024-04-29 11:32:08 +05:30
.github Updated Label Config 2024-04-26 14:16:49 +05:30
app feat: Anvil DnD Polish(Refactor) (#32839) 2024-04-29 11:32:08 +05:30
contributions
deploy chore: Use CS to get Appsmith server IP (#32998) 2024-04-28 17:31:13 +05:30
scripts
static
utils/observability
.deepsource.toml
.editorconfig
.env.example
.gitignore
.imgbotconfig
.nojekyll
app.json
appsmith_events.md
appsmith_templates.md
ci-debug.sh
CODE_OF_CONDUCT.md
CODEOWNERS Update CODEOWNERS (#32807) 2024-04-19 13:39:00 +05:30
CONTRIBUTING.md
depot.json
Dockerfile
heroku.yml
IssuesReport.md
LICENSE
README.md
SECURITY.md

Appsmith Logo

Discord GitHub commit activity


Organizations build internal applications such as dashboards, database GUIs, admin panels, approval apps, customer support dashboards, and more to help their teams perform day-to-day operations. Appsmith is an open-source tool that enables the rapid development of these internal apps. Read more on our website.

Appsmith in 100 secs

Installation

There are two ways to start using Appsmith:

  • Signup on Appsmith Cloud.
  • Install Appsmith on your machine. See the installation guides below.
Installation Methods Documentation
Docker Docker (Recommended)
Kubernetes Kubernetes
AWS AWS AMI

For other deployment options, see the Installation Guides documentation.

Development

To build and run Appsmith in your local dev environment, see Setup for local development.

Learning Resources

Need Help?

Contributing

We ❤️ our contributors. We're committed to fostering an open, welcoming, and safe environment in the community.

📕 We expect everyone participating in the community to abide by our Code of Conduct. Please read and follow it.
🤝 If you'd like to contribute, start by reading our Contribution Guide.
👾 Explore some good first issues.

Let's build great software together.

Top Contributors

Nikhil-Nandagopal mohanarpit sharat87 hetunandu trishaanand riodeuno nidhi-nair vicky-primathon Aishwarya-U-R satbir121 sumitsum AnaghHegde arunvjn NandanAnantharamu ankitakinger nayan-rafiq abhvsn jsartisan Rishabh-Rathod ohansFavour sbalaji1192 sarojsarab SatishGandham AmanAgarwal041 prsidhu ayushpahwa sneha122 ApekshaBhosale Parthvi12 yatinappsmith somangshu pratapaprasanna pranavkanade albinAppsmith marks0351 nsarupr ashit-rath NilanshBansal sondermanish KelvinOm dhruvikn rajatagrawal areyabhishek subrata71 ichik dipyamanbiswas07 rahulbarwal ankitsrivas14 vsvamsi1 brayn003 sharanya-appsmith vivonk dvj1988 ramsaptami rohan-arthur jacquesikot danciaclara kocharrahul7 riteshkew srix laveena-en RakshaKShetty Rishabhkaul sandeepravi tejasahluwalia dilippitchika nerbos rlnorthcutt kevinblanco AbhaySM tomjose92 andreevanatasha LagunaElectric sribalajig infinitetrooper RoopKrrish9696 bharath31 GreenFlux shadabbuchh harshilp24 appsmith-bot momcilo-appsmith shwetha-ramesh vasanthappsmith parth-appsmith chandannkumar jnikhila vinay-appsmith ame-appsmith btsgh Sripriya93 pranayagarwal96 kamakshibhat-appsmith sujdev7 BharghaviK carinanfonseca deepikaappsmith Harshask93 cssonic kavitasmoolya NeelPattani1 rashmi-sahoo-git michael-peach-appsmith akash-codemonk Tooluloope rishabhsaxena wmdev0808 Irongade techbhavin yaldram aswathkk rahulramesha sidhantgoel Vijetha-Kaja haojin111 berzerkeer sum35h ChandanBalajiBP devrk96 keyurparalkar eco-monk vibhandikyash ofpiyush vishnu-gp rimildeyjsr tanvibhakta rashmigowda55 ankurrsinghal Druthi geekup-legodevops megaconfidence vihar danieldare Nikhil-Curefit souma-ghosh arslanhaiderbuttar tkAppsmith rashmi-rai leotom2000 ravikp7 Adityaacharya1807 RashmiNagarajp prapullac kaushik94 PiyushPushkar02 akshayrangasaid mojtab23 rohitagarwal88 iamakulov iamrkcheers sumanthyedoti shubham7saxena7 vaibh1297 vnodecg pc9795 Rhitottam Pranay105 iSatVeerSingh abm17 akshay11298 daniel-shuy daniloff200 osis harshitpandey0426 ganganimaulik jyash97 ram-primathon sub1983 sanjus-robotic-studio AR10X shreemaan-abhishek A-Scratchy gitstart-appsmith manish535 shinnlok suhasranganath ThakurKarthik trdillon acharyaaditya18 amogh2019 appsmithguru pric-appsmith sunil-codemonk abhiappsmith ajinkyakulkarni Cool-Runningz akbansa ArjobanSingh bharat-patodi Bhavin789 bhuvanaindukuri donno2048 jacobwgillespie reachtokish nuwan94 OmkarPh parthiv11 priyanka-mahour rafaeelaudibert samyakjain10 Jain-Sanchit irfan-ansari-au28 sheetal2001p Hard-Coder05 vj-codes knockknockyoo jdun28 alphaX86 aanchal-fatwani monarch0111 abhishekS14 adarshlilha avats-dev visibleajay blenderskool AlekSi alzaar heroic AJ-72 apoorv-mishra anvaravind ari-hacks arunstar ashwanisindhu1 ayushkumarbhadani Caitlin-Fotheringham Chiradeep-Banik chrismaeda CommanderRoot DevSnap digvijaysinghh DiptoChakrabarty felixsuarez0727 gitstart Gretel8 danguilherme harshmange44 indrajitbnikam ishaanmehta4 jaikanthjay46 jarimayenburg JarLob JeffResc jmakhack jlund jrcamelo khoahuynhdev kylegalbraith loiscodes jk2K micarner me-heer MuhammadAakash dammahhammad moulik-deepsource Nandanha wasabigeek nipun1999 nishihere19 Nitesh2905 eagleera NoxiousPenguin palashkaria pallavagarwal07 paususe neok sanchezpili6 pushkar1393 imor ricardocarrola RishiKumarRay Rooney30 Saket2 Sheikh-JamirAlam withshubh smrutiparida somnathdasadhikari srijanshetty Sufiyan1997 rayrny trishitapingolia trivikr webdott vasanthkumar18 VanshajPoonia vedant-pandey torcoste vvkpd yasharma2301 Yash-Bhange YogeshJayaseelan Ian-Yy danceAndJive devnamrits deepakchethan IAmAnubhavSaini gokuatkai Jackenmen Mrxyy zimkjh kyteinsky lifeneedspassion nikhil-babar nupur-singhal1992 nzidol onifs10 ps-xaf

License

Appsmith is licensed under the terms of Apache License 2.0.