wails icon indicating copy to clipboard operation
wails copied to clipboard
verified publisher icon wailsapp

[V3] Drag-n-Drop Zones and improvements

Open atterpac opened this issue 8 months ago • 3 comments

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.

atterpac avatar May 29 '25 16:05 atterpac

[!WARNING]

Rate limit exceeded

@leaanthony has exceeded the limit for the number of commits or files that can be reviewed per hour. Please wait 12 minutes and 2 seconds before requesting another review.

⌛ How to resolve this issue?

After the wait time has elapsed, a review can be triggered using the @coderabbitai review command as a PR comment. Alternatively, push new commits to this PR.

We recommend that you space out your commits to avoid hitting the rate limit.

🚦 How do rate limits work?

CodeRabbit enforces hourly rate limits for each developer per organization.

Our paid plans have higher rate limits than the trial, open-source and free plans. In all cases, we re-allow further reviews after a brief timeout.

Please see our FAQ for further information.

📥 Commits

Reviewing files that changed from the base of the PR and between d9b4b1265f8b878a3f96fb1513b863ec8ca16dab and 074932fd1e20a97778b0cd2593c5e7ed1c8dd384.

📒 Files selected for processing (1)
  • v3/UNRELEASED_CHANGELOG.md (1 hunks)

Walkthrough

This update introduces a cross-platform, element-targeted drag-and-drop system for file drops in Wails v3, including backend and frontend support for dropzone metadata, event propagation, and coordinate tracking. It adds new event types, updates the runtime and API, and enhances documentation and examples to reflect the new dropzone capabilities.

Changes

Cohort / File(s) Change Summary
Dropzone Drag-and-Drop Core Implementation
v3/pkg/application/application.go, v3/pkg/application/context_window_event.go, v3/pkg/application/messageprocessor_window.go, v3/pkg/application/webview_window.go, v3/pkg/application/window.go, v3/pkg/events/events.go, v3/pkg/events/events.txt, v3/internal/runtime/desktop/@wailsio/runtime/src/event_types.ts, v3/internal/runtime/desktop/@wailsio/runtime/src/window.ts, v3/internal/runtime/desktop/@wailsio/runtime/src/system.ts, v3/internal/runtime/desktop/@wailsio/runtime/docs/functions/System.HandlePlatformFileDrop.html, v3/internal/runtime/desktop/@wailsio/runtime/docs/modules/System.html		 Introduces element-scoped drag-and-drop with dropzone metadata, new event types, backend/JS API for dropzones, and event propagation with drop coordinates and attributes.
Platform-Specific Drag-and-Drop Integration
v3/pkg/application/application_darwin.go, v3/pkg/application/webview_window_darwin.m, v3/pkg/application/webview_window_darwin_drag.m, v3/pkg/application/linux_cgo.go, v3/pkg/application/webview_window_windows.go, v3/pkg/w32/idroptarget.go		 Adds drag-and-drop file support with coordinate tracking to macOS, Linux, and Windows backends, updating signatures and event dispatch for platform-native drops.
Frontend Example and Documentation
v3/examples/drag-n-drop/assets/index.html, docs/src/content/docs/learn/events.mdx		 Updates the drag-and-drop example to a file tree demo with detailed dropzone feedback and debugging; adds comprehensive documentation for the new dropzone system and event handling.
Runtime Refactor and Event Prefixing
v3/internal/assetserver/bundledassets/runtime.js, v3/tasks/events/generate.go		 Refactors and renames the runtime JS for clarity, updates event-to-JS mappings to include platform prefixes.
Changelog and Metadata
v3/UNRELEASED_CHANGELOG.md, docs/src/content/docs/changelog.mdx		 Adds changelog entries for dropzone support and other new features; minor formatting updates.
Taskfile and Code Formatting
v3/Taskfile.yaml, v3/internal/runtime/Taskfile.yaml		 Adds go fmt step to event generation tasks for consistent code formatting.
Generated Documentation & Data Assets
v3/internal/runtime/desktop/@wailsio/runtime/docs/assets/hierarchy.js, v3/internal/runtime/desktop/@wailsio/runtime/docs/assets/navigation.js, v3/internal/runtime/desktop/@wailsio/runtime/docs/assets/search.js, v3/internal/runtime/desktop/@wailsio/runtime/docs/classes/CancelError.html, v3/internal/runtime/desktop/@wailsio/runtime/docs/classes/CancellablePromise.html, v3/internal/runtime/desktop/@wailsio/runtime/docs/classes/CancelledRejectionError.html, v3/internal/runtime/desktop/@wailsio/runtime/docs/functions/System.Capabilities.html, v3/internal/runtime/desktop/@wailsio/runtime/docs/functions/System.Environment.html, v3/internal/runtime/desktop/@wailsio/runtime/docs/functions/System.IsAMD64.html, v3/internal/runtime/desktop/@wailsio/runtime/docs/functions/System.IsARM.html, v3/internal/runtime/desktop/@wailsio/runtime/docs/functions/System.IsARM64.html, v3/internal/runtime/desktop/@wailsio/runtime/docs/functions/System.IsDarkMode.html, v3/internal/runtime/desktop/@wailsio/runtime/docs/functions/System.IsDebug.html, v3/internal/runtime/desktop/@wailsio/runtime/docs/functions/System.IsLinux.html, v3/internal/runtime/desktop/@wailsio/runtime/docs/functions/System.IsMac.html, v3/internal/runtime/desktop/@wailsio/runtime/docs/functions/System.IsWindows.html, v3/internal/runtime/desktop/@wailsio/runtime/docs/functions/System.invoke.html, v3/internal/runtime/desktop/@wailsio/runtime/docs/hierarchy.html, v3/internal/runtime/desktop/@wailsio/runtime/docs/interfaces/System.EnvironmentInfo.html, v3/internal/runtime/desktop/@wailsio/runtime/docs/interfaces/System.OSInfo.html, v3/internal/runtime/desktop/@wailsio/runtime/docs/interfaces/_internal_.AddEventListenerOptions.html, v3/internal/runtime/desktop/@wailsio/runtime/docs/interfaces/_internal_.EventListenerOptions.html, v3/internal/runtime/desktop/@wailsio/runtime/docs/interfaces/_internal_.EventTarget.html, v3/internal/runtime/desktop/@wailsio/runtime/docs/interfaces/_internal_.MediaSource.html, v3/internal/runtime/desktop/@wailsio/runtime/docs/interfaces/_internal_.Position.html, v3/internal/runtime/desktop/@wailsio/runtime/docs/interfaces/_internal_.ReadableStreamBYOBReader.html, v3/internal/runtime/desktop/@wailsio/runtime/docs/interfaces/_internal_.ReadableStreamDefaultReader.html, v3/internal/runtime/desktop/@wailsio/runtime/docs/interfaces/_internal_.ReadableStreamGenericReader.html, v3/internal/runtime/desktop/@wailsio/runtime/docs/interfaces/_internal_.Size.html, v3/internal/runtime/desktop/@wailsio/runtime/docs/interfaces/_internal_.SourceBuffer.html, v3/internal/runtime/desktop/@wailsio/runtime/docs/variables/Window.html		 Updates generated documentation and data assets to reflect new APIs, event types, and source code line numbers.
Minor Code/Doc Formatting
v3/pkg/application/messageprocessor_application.go, v3/internal/runtime/desktop/@wailsio/runtime/src/wml.ts		 Minor formatting and code style adjustments, no logic changes.
Event Constant Updates
v3/pkg/events/events_darwin.h, v3/pkg/events/events_linux.h		 Increments event constant values to align with new event additions.

Sequence Diagram(s)

sequenceDiagram
    participant User
    participant DOM
    participant JS_Runtime
    participant Go_Backend

    User->>DOM: Drags file onto dropzone element
    DOM->>JS_Runtime: Detects dragover/drop on data-wails-dropzone
    JS_Runtime->>Go_Backend: Sends drop event with files, coordinates, dropzone metadata
    Go_Backend->>Go_Backend: Processes event, extracts files and dropzone details
    Go_Backend->>JS_Runtime: Emits event to frontend with drop info
    JS_Runtime->>DOM: Updates UI, displays drop info/debug

Estimated code review effort

🎯 4 (Complex) | ⏱️ ~45 minutes

Possibly related PRs

  • wailsapp/wails#4100: Migrates the JS runtime to TypeScript, introducing modular runtime architecture foundational to these drag-and-drop and event changes.
  • wailsapp/wails#4359: Refactors the App API to use manager-based architecture, directly related to event and window management changes present in this PR.

Suggested labels

Enhancement, Linux, Javascript

Suggested reviewers

  • atterpac

Poem

In the warren of code where events now hop,
Dropzones bloom and files go plop!
With drag and drop, each bunny’s delight,
Metadata and coordinates now land just right.
From backend to frontend, the info flows,
As rabbits debug where the carrot goes! 🥕✨

✨ Finishing Touches
🧪 Generate unit tests
  • [ ] Create PR with unit tests
  • [ ] Post copyable unit tests in a comment

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share
🪧 Tips

Chat

There are 3 ways to chat with CodeRabbit:

  • Review comments: Directly reply to a review comment made by CodeRabbit. Example:
    • I pushed a fix in commit <commit_id>, please review it.
    • Explain this complex logic.
    • Open a follow-up GitHub issue for this discussion.
  • Files and specific lines of code (under the "Files changed" tab): Tag @coderabbitai in a new review comment at the desired location with your query. Examples:
    • @coderabbitai explain this code block.
  • PR comments: Tag @coderabbitai in a new PR comment to ask questions about the PR branch. For the best results, please provide a very specific query, as very limited context is provided in this mode. Examples:
    • @coderabbitai gather interesting stats about this repository and render them as a table. Additionally, render a pie chart showing the language distribution in the codebase.
    • @coderabbitai read src/utils.ts and explain its main purpose.
    • @coderabbitai read the files in the src/scheduler package and generate a class diagram using mermaid and a README in the markdown format.

Support

Need help? Create a ticket on our support page for assistance with any issues or questions.

CodeRabbit Commands (Invoked using PR comments)

  • @coderabbitai pause to pause the reviews on a PR.
  • @coderabbitai resume to resume the paused reviews.
  • @coderabbitai review to trigger an incremental review. This is useful when automatic reviews are disabled for the repository.
  • @coderabbitai full review to do a full review from scratch and review all the files again.
  • @coderabbitai summary to regenerate the summary of the PR.
  • @coderabbitai generate docstrings to generate docstrings for this PR.
  • @coderabbitai generate sequence diagram to generate a sequence diagram of the changes in this PR.
  • @coderabbitai generate unit tests to generate unit tests for this PR.
  • @coderabbitai resolve resolve all the CodeRabbit review comments.
  • @coderabbitai configuration to show the current CodeRabbit configuration for the repository.
  • @coderabbitai help to get help.

Other keywords and placeholders

  • Add @coderabbitai ignore anywhere in the PR description to prevent this PR from being reviewed.
  • Add @coderabbitai summary to generate the high-level summary at a specific location in the PR description.
  • Add @coderabbitai anywhere in the PR title to generate the title automatically.

Documentation and Community

  • Visit our Documentation for detailed information on how to use CodeRabbit.
  • Join our Discord Community to get help, request features, and share feedback.
  • Follow us on X/Twitter for updates and announcements.

coderabbitai[bot] avatar May 29 '25 16:05 coderabbitai[bot]

Updated Example: Filetree to demo a more realistic case Improvements, no longer just passing ID/CLass we collect all attributes

https://github.com/user-attachments/assets/e8d0450c-2b76-47e0-b480-735d2efaecd8

atterpac avatar May 29 '25 18:05 atterpac

Quality Gate Failed Quality Gate failed

Failed conditions
1 Security Hotspot
4.6% Duplication on New Code (required ≤ 3%)

See analysis details on SonarQube Cloud

sonarqubecloud[bot] avatar Jun 04 '25 17:06 sonarqubecloud[bot]

Quality Gate Failed Quality Gate failed

Failed conditions
4.5% Duplication on New Code (required ≤ 3%)
B Reliability Rating on New Code (required ≥ A)

See analysis details on SonarQube Cloud

Catch issues before they fail your Quality Gate with our IDE extension SonarQube for IDE

sonarqubecloud[bot] avatar Aug 04 '25 10:08 sonarqubecloud[bot]

seems like it broke windows dnd which previously worked

xob0t avatar Aug 08 '25 04:08 xob0t

seems like it broke windows dnd which previously worked

Gah, can you please open an issue for that with details. Thank you 🙏

leaanthony avatar Aug 09 '25 07:08 leaanthony