Change Cursor on Draggable region in Electron

Question

I am making an app in Electron and I have a frameless window, I have some top areas to -webkit-app-region: drag but when I do this, the will not change.

obviously it will not be draggable in this snippet because it's not an electron app, but basically the cursor will not change on an element that is draggable.

EDIT: it seems that trying to change the cursor on any webkit style does not work at all as I tried to change the cursor on a scrollbar as well. Is there any fix to this? I have googled it but found nothing that fits.

#draggable {
  -webkit-app-region: drag;
  cursor: grab;
  height: 40px;
  width: 90%;
  margin: 0;
  background-color: #393939;
  color: #000;
  position: absolute;
  z-index: 2;
  top: 0;
  border-bottom: 3px solid #202020;
}
#draggable:hover {
  cursor: grab;
}

<div id="draggable">
   <h3 style="margin: 5px 0 0 10px;">Hardware Application</h3>
</div>

Misdeed

Related chromium issue bugs.chromium.org/p/chromium/issues/… – Mortality

Answer 1

Unfortunately setting -webkit-app-region: drag; disables all click and mouse events because it's treated as a title-bar so you can't change the cursor.

I would include where I read that but I can't find it anymore.

See:

#1354 -webkit-app-region: drag eats all click events

#8730 Frameless Electron App not work css cursor:pointer

Validate

well that sucks, hopefully they will update it to work one day? – Misdeed

Maybe but I don't think so since they closed the issue as a wont-fix – Validate

After 5 years I think it's safe to say they won't – Villenage

Answer 2

yeah, sorry, but there is an alternative that works with a few limitations:

example of a titlebar in react-ts which sends the mouse movement once dragging starts:

function Header({ leading, navigation, following }: HeaderProps) {
  const navigate = useNavigate();
  const [, startTransition] = useTransition();
  const [dragging, setDragging] = useState(false);
  return (
    <div
      className="titleBar"
      onMouseDown={() => {
        setDragging(true);
      }}
      onMouseUp={() => {
        setDragging(false);
      }}
      onMouseLeave={() => {
        setDragging(false);
      }}
      onMouseMove={(e) => {
        if (dragging) {
          window.electron.ipcRenderer.sendMessage(
            'window',
            'move',
            e.movementX,
            e.movementY
          );
        }
      }}
    >
      <div className="flexrow_start">
        {leading}
        <div>
          {navigation.map((info, index) => (
            <button
              type="button"
              onClick={(e) => {
                e.preventDefault();
                startTransition(() => {
                  navigate(info.destination ?? '/');
                });
              }}
              key={index}
            >
              {info.content}
            </button>
          ))}
        </div>
      </div>
      {following !== undefined && (
        <div className="flexrow_end"> {following}</div>
      )}
    </div>
  );
}

in main.ts:

ipcMain.on('window', (e, arg, arg2, arg3) => {
  switch (arg as string) {
    // comes from element added to header as element following routes
    case 'min':
      mainWindow?.minimize();
      break;
    // comes from element added to header as element following routes
    case 'max':
      if (mainWindow?.isMaximized()) {
        mainWindow.unmaximize();
      } else {
        mainWindow?.maximize();
      }
      break;
    // comes from element added to header as element following routes
    case 'close':
      app.quit();
      break;
    //header element dragging handler
    case 'move':
      console.log(arg2, arg3);
      mainWindow?.setPosition(
        mainWindow.getPosition()[0] + arg2,
        mainWindow.getPosition()[1] + arg3
      );
      break;
    default:
      break;
  }
});

.titleBar{
  height: 50px;
  display: flex;
  justify-content: space-between;


}
.titleBar:hover{
  cursor: grab;

}

EDIT: it doesn't work well when you move the electron app between displays. If anyone has a solution for that, I would be very gratreful for a comment

Manxman