How to enable clicks through window toolbar

Question

Created Nov ’23

Replies 0

Boosts 0

Participants 1

I'm currently building a MacOS app using react-native-macos, since I don't have any experience in Swift or Objective-C. The interface in the screenshot below is therefore faking a titlebar. The real titlebar is set to be transparent and overlays the whole application.

The problem that I have is that the toolbar blocks clicks from going through. If I try to click the plus button on the right, nothing happens. Mouse hover is still noticed, but clicks don't go through.

How do I get the clicks to be registered by React? In the best case with the window still being draggable. The buttons in the toolbar change, so the click area changes as well.

I'm setting my window in the AppDelegate.swift and my code basically looks like this:

func applicationDidFinishLaunching(_ aNotification: Notification) {
    let jsCodeLocation: URL
    #if DEBUG
      jsCodeLocation = RCTBundleURLProvider.sharedSettings().jsBundleURL(forBundleRoot: "index")
    #else
      jsCodeLocation = Bundle.main.url(forResource: "main", withExtension: "jsbundle")!
    #endif
    let rootView = RCTRootView(bundleURL: jsCodeLocation, moduleName: "JiraTimeTracker", initialProperties: nil, launchOptions: nil)
    let rootViewController = NSViewController()
    rootViewController.view = rootView

    // Create the application window
    window = NSWindow(
      contentRect: NSRect(x: 0, y: 0, width: 1, height: 1),
      styleMask: [.titled, .closable, .miniaturizable, .resizable],
      backing: .buffered,
      defer: false)

    window.titlebarAppearsTransparent = true
    window.titleVisibility = .hidden
    window.toolbarStyle = .unified
    window.styleMask.insert(NSWindow.StyleMask.fullSizeContentView)
    window.contentViewController = rootViewController
    window.center()
    window.isReleasedWhenClosed = false
    window.makeKeyAndOrderFront(self)
    
    // Add a toolbar to the window to increase its titlebar height
    window.toolbar = NSToolbar()

    let screen: NSScreen = NSScreen.main!
    let midScreenX = screen.frame.midX
    let posScreenY = 200
    let origin = CGPoint(x: Int(midScreenX), y: posScreenY)
    let size = CGSize(width: 700, height: 800)
    let frame = NSRect(origin: origin, size: size)
    window.setFrame(frame, display: true)
}

The Apple docs say that you can:

Use the contentLayoutRect or the contentLayoutGuide to lay out views underneath the title bar–toolbar area.

I tried doing this, but I couldn't get it to work due to my limited Swift knowledge. I also don't know if this would still allow dragging. I guess this is only used to prevent content from being underneath the titlebar (but that's what I want)?

A different idea that I got is to send an event to React on each click in the toolbar. I know where the cursor is, so I could then manually recreate the click event. This should be possible with native modules but again, due to my limited knowledge I'm not quite sure if this is even possible.

I also found this answer which may be related, but the solution there is written in Swift 4.2 and I wasn't able to adjust this to my Swift version yet.

Any help is really appreciated!

Boost