[docs] Improve window customization guide

[cangSDARM]

Maybe this should be used as a feat? idk

Describe the bug

https://github.com/tauri-apps/tauri/blob/45d427e44c0e06194079426c2690019643e03277/core/tauri/scripts/core.js#L136

here is my dom hierarchy:

import React from "react";
import classes from "./index.module.scss";
import clsx from "clsx";
import { Icon } from "@rsuite/icons";
import {
  VscChromeClose,
  VscChromeMinimize,
  VscChromeMaximize,
  VscChromeRestore,
} from "react-icons/vsc";
import { appWindow } from "@tauri-apps/api/window";
import { IoLogoChrome } from "react-icons/io5";

const AppBar: React.FC = () => {
  const [isMaxsize, setIsMaxsize] = React.useState(false);

  React.useEffect(() => {
    appWindow.isMaximized().then(setIsMaxsize);
  }, []);

  return (
    <div className={classes.titlebar}>
      <div data-tauri-drag-region className={classes["drag-region"]}>
        <div>
          <Icon as={IoLogoChrome} />
          <span>{appWindow.label}</span>
        </div>
        <div className={classes["window-controls"]}>
          <div
            className={classes.button}
            onClick={() => {
              appWindow.minimize();
            }}
          >
            <Icon as={VscChromeMinimize} />
          </div>
          <div
            className={classes.button}
            onClick={() => {
              appWindow
                .toggleMaximize()
                .then(() => appWindow.isMaximized())
                .then(setIsMaxsize);
            }}
          >
            <Icon as={isMaxsize ? VscChromeRestore : VscChromeMaximize} />
          </div>
          <div
            className={clsx(classes.button, classes["close-button"])}
            onClick={() => {
              appWindow.close();
            }}
          >
            <Icon as={VscChromeClose} />
          </div>
        </div>
      </div>
    </div>
  );
};

export default AppBar;

It renders like this:

I can't properly trigger the window's drag unless I add data-tauri-drag-region to every element.

Perhapes

Customize an event and allow tauri users to bind it themselves

Reproduction

No response

Expected behavior

No response

Platform and versions

> tauri "info"


Operating System - Windows, version 10.0.19044 X64
Webview2 - 99.0.1150.55
Visual Studio Build Tools:
   - Visual Studio Community 2019

Node.js environment
  Node.js - 14.17.6
  @tauri-apps/cli - 1.0.0-rc.5 (outdated, latest: 1.0.0-rc.8)
  @tauri-apps/api - 1.0.0-rc.3

Global packages
  npm - 6.14.11
  pnpm - 6.23.6
  yarn - 1.22.17

Rust environment
  rustup - 1.24.3
  rustc - 1.59.0
  cargo - 1.59.0
  toolchain - stable-x86_64-pc-windows-msvc 

App directory structure
/.git
/.parcel-cache
/client
/dist
/node_modules
/server

App
  tauri - 1.0.0-rc.6
  tauri-build - 1.0.0-rc.5
  tao - 0.7.0
  wry - 0.14.0
  build-type - bundle
  CSP - default-src 'self'
  distDir - ../dist
  devPath - http://localhost:3000/
  framework - React

Stack trace

No response

Additional context

No response

[cangSDARM]

A less elegant solution from before

tauri-apps/tauri#3031

Customize an event and allow tauri users to bind it themselves may better

[FabianLars]

See here for the reasons why we can't change it: tauri-apps/tauri#3031.
So yes you need to add the attribute to the actual click target (which generally should be the innermost element)

Edit: Unlucky timing 😂

[cangSDARM]

See here for the reasons why we can't change it: tauri-apps/tauri#3031. So yes you need to add the attribute to the actual click target (which generally should be the innermost element)

I saw. So I suggest using a custom event to let the user bind himself

[FabianLars]

Customize an event and allow tauri users to bind it themselves may better

You can already do that by using startDragging yourself.

[cangSDARM]

Customize an event and allow tauri users to bind it themselves may better

You can already do that by using startDragging yourself.

It would be better to implement in tauri to avoid other potential bugs.
Or give a hint in the documentation? 😂

[amrbashir]

It is documented here https://tauri.studio/docs/api/js/classes/window.WindowManager#startdragging

[cangSDARM]

I mean here: https://tauri.studio/docs/guides/window-customization

[amrbashir]

Yeah that guide needs to highlight data-tauri-drag-region more and also include a manual implementation of it using window.startDragging and mousedown event.

[JonasKruckenberg]

Yeah that guide needs to highlight data-tauri-drag-region more and also include a manual implementation of it using window.startDragging and mousedown event.

Suggestion noted