wailsapp / wails

Create beautiful applications using Go
https://wails.io
MIT License
25.34k stars 1.22k forks source link

input Simplified Chinese input cannot display floating Windows #2933

Closed jddk closed 1 year ago

jddk commented 1 year ago

Description

input Simplified Chinese input cannot display floating Windows

image

To Reproduce

  1. wails init -n myproject -t vue
  2. start myproject: wails dev
  3. in the windows, Mouse cursor into input
  4. Switch the simplified Pinyin input method
  5. you ken se

Expected behaviour

use macbook

  1. wails init -n myproject -t vue
  2. start myproject: wails dev
  3. in the windows, Mouse cursor into input
  4. Switch the simplified Pinyin input method
  5. you ken se

Screenshots

No response

Attempted Fixes

No response

System Details

Scanning system - Please wait (this may take a long ▀ Scanning system - Please wait (this may take a long ▄ Scanning system - Please wait (this may take a long▄  Scanning system - Please wait (this may take a long SUCCESS  Scanning system - Please wait (this may take                                                      
# Wails
Version | v2.6.0

# System
┌─────────────────────────┐
| OS           | MacOS    |
| Version      | 13.5.1   |
| ID           | 22G90    |
| Go Version   | go1.21.1 |
| Platform     | darwin   |
| Architecture | arm64    |
└─────────────────────────┘

# Dependencies
┌─────────────────────────────────────────────────────────────────────────┐
| Dependency                | Package Name | Status    | Version          |
| Xcode command line tools  | N/A          | Installed | 2397             |
| Nodejs                    | N/A          | Installed | 18.17.1          |
| npm                       | N/A          | Installed | 9.6.7            |
| *Xcode                    | N/A          | Installed | 14.3.1 (14E300c) |
| *upx                      | N/A          | Available |                  |
| *nsis                     | N/A          | Available |                  |
└──────────────────────── * - Optional Dependency ────────────────────────┘

# Diagnosis
Optional package(s) installation details: 
  - upx : Available at https://upx.github.io/
  - nsis : More info at https://wails.io/docs/guides/windows-installer/

 SUCCESS  Your system is ready for Wails development!

 ♥   If Wails is useful to you or your company, please consider sponsoring the project:

Additional context

No response

leaanthony commented 1 year ago

Thanks for opening this. What's Pinyin, and what is the expected behaviour here?

ivila commented 1 year ago

@leaanthony Pinyin is one of the input method of Chinese, it can use some characters to match Chinese words. When you are using Pinyin, there would be a float window showing the matching words of your input(just like the "good" part of the Description image) But currently @jddk using wails demo, input in the demo and found no float window(just like the "wails bad" part of the Description image)

But it cannot reproduce on my computer, I try both "Apple Pinyin" and "squirrel", and they both work perfectly with wails. 1, wails with Squirrel: img_v2_15aec2f9-a51f-4b42-8d80-6adf5e1d2a9g 2, wails with Apple Pinyin: img_v2_6174d046-159c-4ac5-b381-9e996aa1ed1g

Some information of my env:

# uname -a
Darwin [MacBook-Pro.local](http://macbook-pro.local/) 21.6.0 Darwin Kernel Version 21.6.0: Thu Jun  8 23:57:12 PDT 2023; root:xnu-8020.240.18.701.6~1/RELEASE_X86_64 x86_64

# go version
go version go1.20.4 darwin/amd64

#xcode-select -v
xcode-select version 2395

#node -v 
v20.1.0
jddk commented 1 year ago
image

in main.go , set AlwaysOnTop: true, Pinyin pop-ups are applied to cover

func main() {
    // Create an instance of the app structure
    app := NewApp()

    // Create application with options
    err := wails.Run(&options.App{
        Title:       "✍️临时记",
        Width:       400,
        Height:      300,
        AlwaysOnTop: true, //add this
        AssetServer: &assetserver.Options{
            Assets: assets,
        },
        BackgroundColour: &options.RGBA{R: 27, G: 38, B: 54, A: 0},
        OnStartup:        app.startup,
        Bind: []interface{}{
            app,
        },
    })

    if err != nil {
        println("Error:", err.Error())
    }
}
ivila commented 1 year ago

@jddk I try AlwaysOnTop, and reproduce with "Apple Pinyin": img_v2_0c3b401f-19ad-465e-8aab-5c8cdcac585g

but it still works well with My "squirrel": img_v2_465e3c11-d505-49aa-8ee7-a01698d252fg

I think the main problem is the Window Level. In wails, on MacOS, AlwaysOnTop option will set Window Level to NSStatusWindowLevel, and higher level window will always cover lower level window, my squirrel input method using window level of "NSScreenSaverWindowLevel + 1"(higher than NSStatusWindowLevel of wails), so it would not be covered, however, I think the "Apple Pinyin" use a lower level, so it will be covered.

valid options of Window Level:

  • NSNormalWindowLevel
  • NSFloatingWindowLevel
  • NSSubmenuWindowLevel
  • NSTornOffMenuWindowLevel
  • NSModalPanelWindowLevel
  • NSMainMenuWindowLevel
  • NSStatusWindowLevel
  • NSPopUpMenuWindowLevel
  • NSScreenSaverWindowLevel
  • kCGDesktopWindowLevel

@leaanthony @jddk I think this can be solved by one of these solutions: 1, allow user to set the window level of AlwaysOnTop option. 2, find out what level "Apple Pinyin" are using, and replace wails' NSStatusWindowLevel to a lower level, so it would not covered "Apple Pinyin" again.

For convenience, the SetAlwaysOnTop method is here: https://github.com/wailsapp/wails/blob/e31ad83472262d5ca023bf8899f8f099e420f94e/v2/internal/frontend/desktop/darwin/WailsContext.m#L407C1-L413C2

leaanthony commented 1 year ago

Thanks for the detailed explanation - I didn't really understand the issue. I think this is something we should make configurable. Not sure what that looks like cross platform. Perhaps it's just a different call... what do other frameworks do?

almas1992 commented 1 year ago

Thanks for the detailed explanation - I didn't really understand the issue. I think this is something we should make configurable. Not sure what that looks like cross platform. Perhaps it's just a different call... what do other frameworks do?

electron seems to be used NSFloatingWindowLevel https://github.com/electron/electron/blob/e61359598214399cab97ca6a8ad541983059c331/shell/browser/native_window_mac.mm#L941-L948. And I change the

// Set NSWindow always on top
void windowSetAlwaysOnTop(void* nsWindow, bool alwaysOnTop) {
    // Set window always on top on main thread
    [(WebviewWindow*)nsWindow setLevel:alwaysOnTop ? NSStatusWindowLevel : NSNormalWindowLevel];
}

to

// Set NSWindow always on top
void windowSetAlwaysOnTop(void* nsWindow, bool alwaysOnTop) {
    // Set window always on top on main thread
    [(WebviewWindow*)nsWindow setLevel:alwaysOnTop ? NSFloatingWindowLevel : NSNormalWindowLevel];
}

and it worked.

leaanthony commented 1 year ago

Awesome! Please feel free to open a PR 🙏