[V3] Drag-n-Drop Zones and improvements

[atterpac]

trafficstars

Adds support for drop zones in v3

• Enabled via data-wails-dropzone the runtime will populate listeners and events as needed
• CSS is assigned wails-dropzone and wails-dropzone-hover to allow for customization
• Updated drag-n-drop example
• fixed a macOS x/y positioning discrepancy between native messaging and javascript

Basic Usage Example:

 <div data-wails-dropzone>Drop HERE </div>

win.OnWindowEvent(events.Common.WindowDropZoneFilesDropped, func(event *application.WindowEvent) {
		droppedFiles := event.Context().DroppedFiles()
		details := event.Context().DropZoneDetails()		
}

WindowEvent.Context().DroppedFiles() -> Returns array of the file paths dropped, if the path is a dir it will not recursively get files but provide the dropped location instead WindowEvent.Context().DropZoneDetails() -> Returns the data from the element the files were dropped into X -> X Position based off the top left corner Y -> Y Position based off the top left corner Attributes -> Map of all data attributes assigned to the element ClassList -> array of the classes currently assigned to the element at that X/Y position

Demo

https://github.com/user-attachments/assets/4a11e808-3041-484f-9377-60f66acf0e0a

EDIT: Improved demo

https://github.com/user-attachments/assets/24d69fda-6912-4198-ae98-240e17402ee1

AI Slop Summary

Enhancements to Drag-and-Drop Functionality:

• Targeted Dropzones: Added support for defining specific HTML elements as dropzones using the data-wails-dropzone attribute, enabling finer control over file drops.
• Visual Feedback: Implemented automatic addition of the wails-dropzone-hover CSS class to dropzones during drag events, allowing customizable hover effects. [1] [2]
• Go Event Handling: Introduced a new FilesDroppedOnTarget function to handle file drop events with detailed context, including element ID, classes, and drop coordinates. [1] [2]

Documentation Updates:

• Changelog: Added a changelog entry highlighting the new drag-and-drop feature.
• User Guide: Updated the events documentation to include detailed instructions and examples for using the enhanced drag-and-drop system.

Example Updates:

• Demo Application: Enhanced the drag-and-drop example in v3/examples/drag-n-drop with new dropzones, CSS styles, and JavaScript logic to demonstrate the feature. [1] [2] [3]

Summary by CodeRabbit

Summary by CodeRabbit

• New Features

  • Added support for targeted drag-and-drop file handling with designated dropzones in the UI, including new events and enhanced metadata about the drop target.
  • Updated example application to showcase multiple styled dropzones and display detailed information about dropped files.

• Documentation

  • Expanded documentation to cover the new drag-and-drop system with targeted dropzones, usage instructions, event details, and runnable examples.
  • Updated changelog to reflect the addition of dropzone support.

• Style

  • Improved example app styling for a modern, visually clear drag-and-drop experience.

• Refactor

  • Internal event and method naming updated for consistency; no changes to user-facing APIs beyond new features.