Temporary Drag Region Compatibility

[konakona418]

Added a temporary workaround for --webkit-app-region.

For those platforms without this feature, by setting the element id to webui-draggable,
can simulate the behavior of it, thus providing some compatibility.

PS: I only tested it with mocking environment (as I'm using WebView2), and I can't guarantee it will definitely work.

[AlbertShown]

Great idea!

Your solution may actually be a webui standard, but instead of element ID <div id="webui-draggable"> (Element may already have another user ID), we instead ask user to add CSS --webui-app-region (to make it look like original webkit-app-region CSS). Example:

CSS:

#titlebar {
  -webkit-app-region: drag; /* Webkit Standard */
  --webui-app-region: drag; /* WebUI Alternative */
}

TypeScript:

let target = e.target as HTMLElement;

while (target) {

  const computedStyle = window.getComputedStyle(target);
  const webkitRegion = computedStyle.getPropertyValue("-webkit-app-region").trim();
  const webuiRegion = computedStyle.getPropertyValue("--webui-app-region").trim();

  if (webkitRegion === "drag" || webuiRegion === "drag") {
    this.#initialMouseX = e.screenX;
    this.#initialMouseY = e.screenY;
    this.#initialWindowX = this.#currentWindowX;
    this.#initialWindowY = this.#currentWindowY;
    this.#isDragging = true;
    break;
  }

  target = target.parentElement;
}

If you see WebUI -> Send Drag Event [xx, yy] in the DevTools F12 logs that's mean it's working, regardless of if window is actually moving or not.

[konakona418]

Thanks for the suggestion! I'll take a closer look later today and re-open a PR if appropriate.

[konakona418]

Great idea!

Your solution may actually be a webui standard, but instead of element ID <div id="webui-draggable"> (Element may already have another user ID), we instead ask user to add CSS --webui-app-region (to make it look like original webkit-app-region CSS). Example:

CSS:

#titlebar {
  -webkit-app-region: drag; /* Webkit Standard */
  --webui-app-region: drag; /* WebUI Alternative */
}

TypeScript:

let target = e.target as HTMLElement;

while (target) {

  const computedStyle = window.getComputedStyle(target);
  const webkitRegion = computedStyle.getPropertyValue("-webkit-app-region").trim();
  const webuiRegion = computedStyle.getPropertyValue("--webui-app-region").trim();

  if (webkitRegion === "drag" || webuiRegion === "drag") {
    this.#initialMouseX = e.screenX;
    this.#initialMouseY = e.screenY;
    this.#initialWindowX = this.#currentWindowX;
    this.#initialWindowY = this.#currentWindowY;
    this.#isDragging = true;
    break;
  }

  target = target.parentElement;
}

If you see WebUI -> Send Drag Event [xx, yy] in the DevTools F12 logs that's mean it's working, regardless of if window is actually moving or not.

I’ve rewritten the implementation based on your suggestion — please refer to PR #579.

Since this PR is no longer needed, I’ll go ahead and close it. Thanks again!