Added an option to make HyprPanel compatible with Hyprland tearing. (#243)

* Adding an option to make HyprPanel compatible with Hyprland tearing.

* Added bar to Tearing Compatibility checks

lib/types/options.d.ts

@@ -48,6 +48,8 @@ export type OSDOrientation = "horizontal" | "vertical";
 
 export type HexColor = `#${string}`;
 
+export type WindowLayer = "top" | "bottom" | "overlay" | "background";
+
 export type MatugenColors = {
     "background": HexColor,
     "error": HexColor,

modules/bar/Bar.ts

@@ -29,6 +29,7 @@ import Button from "types/widgets/button.js";
 import Gtk from "types/@girs/gtk-3.0/gtk-3.0.js";
 
 import './SideEffects';
+import { WindowLayer } from "lib/types/options.js";
 
 const { layouts } = options.bar;
 
@@ -44,14 +45,14 @@ type Section = "battery"
     | "network"
     | "bluetooth"
     | "clock"
-    | "Ram"
+    | "ram"
-    | "Cpu"
+    | "cpu"
-    | "Storage"
+    | "storage"
-    | "Netstat"
+    | "netstat"
-    | "KbInput"
+    | "kbinput"
-    | "Updates"
+    | "updates"
-    | "Weather"
+    | "weather"
-    | "Power"
+    | "power"
     | "systray";
 
 type Layout = {
@@ -134,7 +135,7 @@ function getGdkMonitors(): GdkMonitors {
     }
 
     const numGdkMonitors = display.get_n_monitors();
-    const gdkMonitors = {};
+    const gdkMonitors: GdkMonitors = {};
 
     for (let i = 0; i < numGdkMonitors; i++) {
         const curMonitor = display.get_monitor(i);
@@ -144,7 +145,7 @@ function getGdkMonitors(): GdkMonitors {
             continue;
         }
 
-        const model = curMonitor.get_model();
+        const model = curMonitor.get_model() || '';
         const geometry = curMonitor.get_geometry();
         const scaleFactor = curMonitor.get_scale_factor();
 
@@ -260,7 +261,20 @@ export const Bar = (() => {
             visible: true,
             anchor: ["top", "left", "right"],
             exclusivity: "exclusive",
-            layer: options.theme.bar.layer.bind("value"),
+            layer: Utils.merge(
+                [
+                    options.theme.bar.layer.bind("value"),
+                    options.tear.bind("value")
+                ],
+                (
+                    barLayer: WindowLayer,
+                    tear: boolean
+                ) => {
+                    if (tear && barLayer === "overlay") {
+                        return "top";
+                    }
+                    return barLayer;
+                }),
             child: Widget.Box({
                 class_name: 'bar-panel-container',
                 child: Widget.CenterBox({

modules/notifications/index.ts

@@ -40,7 +40,7 @@ export default () => {
                 return mon;
             }
         ),
-        layer: "overlay",
+        layer: options.tear.bind("value").as(tear => tear ? "top" : "overlay"),
         anchor: position.bind("value").as(v => getPosition(v)),
         exclusivity: "normal",
         child: Widget.Box({

modules/osd/index.ts

@@ -98,7 +98,7 @@ export default () => Widget.Window({
         }),
     name: `indicator`,
     class_name: "indicator",
-    layer: "overlay",
+    layer: options.tear.bind("value").as(tear => tear ? "top" : "overlay"),
     anchor: location.bind("value").as(v => getPosition(v)),
     click_through: true,
     child: Widget.Box({

options.ts

@@ -1,7 +1,7 @@
 import { opt, mkOptions } from "lib/option"
 import { NetstatIcon, NetstatLabelType, PowerIcon, RateUnit, ResourceLabelType, StorageIcon, UpdatesIcon } from "lib/types/bar";
 import { KbIcon, KbLabelType } from "lib/types/customModules/kbLayout";
-import { BarButtonStyles, NotificationAnchor, OSDAnchor, OSDOrientation } from "lib/types/options";
+import { BarButtonStyles, NotificationAnchor, OSDAnchor, OSDOrientation, WindowLayer } from "lib/types/options";
 import { MatugenScheme, MatugenTheme, MatugenVariation } from "lib/types/options";
 import { UnitType } from "lib/types/weather";
 
@@ -130,7 +130,7 @@ const options = mkOptions(OPTIONS, {
         bar: {
             scaling: opt(100),
             floating: opt(false),
-            layer: opt<"top" | "bottom" | "overlay" | "background">("top"),
+            layer: opt<WindowLayer>("top"),
             margin_top: opt("0.5em"),
             opacity: opt(100),
             margin_bottom: opt("0em"),
@@ -1067,6 +1067,8 @@ const options = mkOptions(OPTIONS, {
 
     terminal: opt("kitty"),
 
+    tear: opt(false),
+
     wallpaper: {
         enable: opt(true),
         image: opt(""),

widget/settings/pages/config/general/index.ts

@@ -25,6 +25,14 @@ export const BarGeneral = () => {
                     }
                 }),
                 Option({ opt: options.terminal, title: 'Terminal', subtitle: "Tools such as 'btop' will open in this terminal", type: 'string' }),
+                Option({
+                    opt: options.tear,
+                    title: 'Tearing Compatible',
+                    subtitle:
+                        "Makes HyprPanel compatible with Hyprland tearing.\n" +
+                        "Enabling this will change all overlays (Notifications, OSDs, Bar) to the \'top\' layer instead the \'overlay\' layer.",
+                    type: 'boolean'
+                }),
 
                 Header('Scaling'),
                 Option({ opt: options.theme.bar.scaling, title: 'Bar', type: 'number', min: 1, max: 100, increment: 5 }),