deblan-mirror/wails
1
0
Fork 0
mirror of https://github.com/wailsapp/wails.git synced 2026-03-15 07:05:50 +01:00
Code Issues Projects Releases Packages Wiki Activity
wails/v3/examples/liquid-glass
History
Exact
Lea Anthony 53c2275fea
 fix(v3): overhaul drag-and-drop for Linux reliability and simplify Windows implementation (#4848) 
* fix(v3): overhaul drag-and-drop for Linux reliability and simplify Windows

This commit fixes drag-and-drop reliability on Linux and simplifies the
Windows implementation.

## Linux
- Rewrite GTK drag handlers to properly intercept external file drops
- Fix HTML5 internal drag-and-drop being broken when file drop enabled
- Add hover effects during file drag operations
- Fix multiple app instances interfering with each other

## Windows
- Remove native IDropTarget in favor of JavaScript approach (matches v2)
- File drops now handled via chrome.webview.postMessageWithAdditionalObjects

## All Platforms
- Rename EnableDragAndDrop to EnableFileDrop
- Rename data-wails-drop-target to data-file-drop-target
- Rename wails-drop-target-active to file-drop-target-active
- Add comprehensive drag-and-drop documentation

## Breaking Changes
- EnableDragAndDrop -> EnableFileDrop
- data-wails-dropzone -> data-file-drop-target
- wails-dropzone-hover -> file-drop-target-active
- DropZoneDetails -> DropTargetDetails
- Remove WindowDropZoneFilesDropped event (use WindowFilesDropped)

* feat(macos): optimize drag event performance with debouncing and caching

- Add 50ms debouncing to limit drag events to 20/sec (was 120/sec)
- Implement window implementation caching to avoid repeated lookups
- Maintain existing 5-pixel threshold for immediate response
- Keep zero-allocation path with pre-allocated buffers
- Rename linuxDragActive to nativeDragActive for clarity
- Update IMPLEMENTATION.md with optimization details and Windows guidance

Performance improvements:
- 83% reduction in event frequency
- ~6x reduction in CPU/memory usage during drag operations
- Maintains smooth visual feedback with InvokeSync for timer callbacks

* fix(windows): implement proper file drop support for Windows

- Remove incorrect AllowExternalDrag(false) call that was blocking file drops
- Fix message prefix from 'FilesDropped' to 'file:drop:' to match JS runtime
- Fix coordinate parsing for 'file:drop:x:y' format (indices 2,3 not 1,2)
- Add enableFileDrop flag injection to JS runtime during navigation
- Update JS runtime to check enableFileDrop flag before processing drops
- Always call preventDefault() to stop browser navigation on file drags
- Show 'no drop' cursor when file drops are disabled
- Update example to filter file drags from HTML drop zone handlers
- Add documentation for combining file drop with HTML drag-and-drop

* fix(v3): block file drops on Linux when EnableFileDrop is false

- Add disableDND() to intercept and reject external file drags at GTK level
- Show 'no drop' cursor when files are dragged over window
- Allow internal HTML5 drag-and-drop to work normally
- Initialize _wails.flags object in runtime core to prevent undefined errors
- Inject enableFileDrop flag on Linux and macOS (matching Windows)
- Fix bare _wails reference to use window._wails
- Update docs with info about blocked drops and combining with HTML DnD

* fix(darwin): add missing fmt import in webview_window_darwin.go

* fix(macOS): implement hover effects for file drag-and-drop with optimizations

- Added draggingUpdated: handler to track mouse movement during drag operations
- Implemented macosOnDragEnter/Exit/Over export functions for real-time hover state
- Fixed JS function call from '_wails.handlePlatformFileDrop' to correct 'wails.Window.HandlePlatformFileDrop'
- Added EnableFileDrop flag checks to prevent hover effects when file drops are disabled
- Renamed linuxDragActive to nativeDragActive for cross-platform consistency

Performance optimizations:
- Added 50ms debounce to reduce event frequency from ~120/sec to ~20/sec
- Implemented 5-pixel movement threshold for immediate response
- Added window caching with sync.Map to avoid repeated lookups
- Zero-allocation JavaScript calls with pre-allocated 128-byte buffer
- Reduced memory usage to ~18 bytes per event (6x reduction)

Build improvements:
- Updated runtime Taskfile to include documentation generation
- Added docs:build task to runtime build process
- Fixed build order: events → docs → runtime

Documentation:
- Added IMPLEMENTATION.md with optimization details
- Included guidance for Windows implementation

* chore(v3/examples): remove html-dnd-api example

The drag-n-drop example now demonstrates both external file drops
and internal HTML5 drag-and-drop, making this separate example redundant.

* docs(v3): move drag-and-drop implementation details to runtime-internals

- Add drag-and-drop section to contributing/runtime-internals.mdx
- Remove IMPLEMENTATION.md from example (content now in proper docs)
- Covers platform differences, debugging tips, and key files

* fix(v3): remove html-dnd-api from example build list

* fix(v3): remove duplicate json import in application_darwin.go

* fix(v3): address CodeRabbit review feedback

- Fix docs to use app.Window.NewWithOptions() instead of deprecated API
- Add mutex protection to dragOverJSBuffer to prevent race conditions
- Add mutex protection to dragThrottleState fields for thread safety

* docs: add coderabbit pre-push requirement to AGENTS.md

* fix(v3/test): use correct CSS class name file-drop-target-active

* chore(v3/test): remove dnd-test directory

This was a development test file that shouldn't be in the PR.
The drag-n-drop example serves as the proper test case.

* docs(v3): update Windows file drop comment to reflect implemented fix

Remove stale TODO - enableFileDrop flag is now injected in navigationCompleted

* refactor(v3): make handleDragAndDropMessage unexported

Internal method only called by application event loop, not part of public API.
2026-01-04 11:08:29 +11:00
..
.gitignore Add native Liquid Glass effect support for macOS (#4534) 2025-08-24 07:16:19 +10:00
index.html Add native Liquid Glass effect support for macOS (#4534) 2025-08-24 07:16:19 +10:00
main.go fix(v3): overhaul drag-and-drop for Linux reliability and simplify Windows implementation (#4848) 2026-01-04 11:08:29 +11:00
README.md Add native Liquid Glass effect support for macOS (#4534) 2025-08-24 07:16:19 +10:00
wails-logo.png Add native Liquid Glass effect support for macOS (#4534) 2025-08-24 07:16:19 +10:00

README.md

Liquid Glass Demo for Wails v3

This demo showcases the native Liquid Glass effect available in macOS 15.0+ with fallback to NSVisualEffectView for older systems.

Features Demonstrated

Window Styles

  1. Light Glass - Clean, light appearance with no tint
  2. Dark Glass - Dark themed glass effect
  3. Vibrant Glass - Enhanced vibrant effect for maximum transparency
  4. Tinted Glass - Blue tinted glass with custom RGBA color
  5. Sheet Material - Using specific NSVisualEffectMaterialSheet
  6. HUD Window - Ultra-light HUD window material
  7. Content Background - Content background material with warm tint

Customization Options

  • Style: LiquidGlassStyleAutomatic, LiquidGlassStyleLight, LiquidGlassStyleDark, LiquidGlassStyleVibrant
  • Material: Direct NSVisualEffectMaterial selection (when NSGlassEffectView is not available)
    • NSVisualEffectMaterialAppearanceBased
    • NSVisualEffectMaterialLight
    • NSVisualEffectMaterialDark
    • NSVisualEffectMaterialSheet
    • NSVisualEffectMaterialHUDWindow
    • NSVisualEffectMaterialContentBackground
    • NSVisualEffectMaterialUnderWindowBackground
    • NSVisualEffectMaterialUnderPageBackground
    • And more...
  • CornerRadius: Rounded corners (0 for square corners)
  • TintColor: Custom RGBA tint overlay
  • GroupID: For grouping multiple glass windows (future feature)
  • GroupSpacing: Spacing between grouped windows (future feature)

Running the Demo

go build -o liquid-glass-demo .
./liquid-glass-demo

Requirements

  • macOS 10.14+ (best experience on macOS 26.0+ with native NSGlassEffectView)
  • Wails v3

Implementation Details

The implementation uses:

  • Native NSGlassEffectView on macOS 26.0+ for authentic glass effect
  • Falls back to NSVisualEffectView on older systems
  • Runtime detection using NSClassFromString for compatibility
  • Key-Value Coding (KVC) for dynamic property setting

Example Usage

window := app.Window.NewWithOptions(application.WebviewWindowOptions{
    Mac: application.MacWindow{
        Backdrop: application.MacBackdropLiquidGlass,
        InvisibleTitleBarHeight: 500, // Make window draggable
        LiquidGlass: application.MacLiquidGlass{
            Style:        application.LiquidGlassStyleLight,
            Material:     application.NSVisualEffectMaterialHUDWindow,
            CornerRadius: 20.0,
            TintColor:    &application.RGBA{Red: 0, Green: 100, Blue: 200, Alpha: 50},
        },
    },
})