Refactored hooks to specify events and reworked the dropdowns to be significantly faster and more responsive. (#304)

* Updated events to be more specific

* Update more events

* Update globalmousepos

* Update themes and submap module to show submap name.

* Type fixes

* Reworked menu position calculation logic to be much more efficient.

* Revert import file location

* We luv arrow functions

* Remove globalMousePos remnants since it's unused.

* Added the ability to configure menu dropdown transition and duration.

* Fix type
This commit is contained in:
Jas Singh
2024-10-06 00:22:27 -07:00
committed by GitHub
parent 8a727a080e
commit ee7d19320c
71 changed files with 2175 additions and 1796 deletions

View File

@@ -1,5 +1,6 @@
import Gdk from 'gi://Gdk?version=3.0';
import { Attribute, Child } from 'lib/types/widget';
import { calculateMenuPosition } from 'modules/menus/shared/dropdown/locationHandler/index';
import Button from 'types/widgets/button';
export const closeAllMenus = (): void => {
@@ -20,7 +21,7 @@ export const closeAllMenus = (): void => {
});
};
export const openMenu = (clicked: Button<Child, Attribute>, event: Gdk.Event, window: string): void => {
export const openMenu = async (clicked: Button<Child, Attribute>, event: Gdk.Event, window: string): Promise<void> => {
/*
* NOTE: We have to make some adjustments so the menu pops up relatively
* to the center of the button clicked. We don't want the menu to spawn
@@ -44,7 +45,11 @@ export const openMenu = (clicked: Button<Child, Attribute>, event: Gdk.Event, wi
const adjustedXCoord = clickPos[1] + middleOffset;
const coords = [adjustedXCoord, clickPos[2]];
globalMousePos.value = coords;
try {
await calculateMenuPosition(coords, window);
} catch (error) {
console.error(`Error calculating menu position: ${error}`);
}
closeAllMenus();
App.toggleWindow(window);

View File

@@ -16,9 +16,9 @@ const Workspaces = (monitor = -1): BarBoxChild => {
return {
component: Widget.Box({
class_name: 'workspaces-box-container',
child: options.bar.workspaces.hideUnoccupied
.bind('value')
.as((hideUnoccupied) => (hideUnoccupied ? occupiedWses(monitor) : defaultWses(monitor))),
child: options.bar.workspaces.hideUnoccupied.bind('value').as((hideUnoccupied) => {
return hideUnoccupied ? occupiedWses(monitor) : defaultWses(monitor);
}),
}),
isVisible: true,
boxClass: 'workspaces',

View File

@@ -44,7 +44,6 @@ export const defaultWses = (monitor: number): BoxWidget => {
options.theme.matugen.bind('value'),
options.theme.bar.buttons.workspaces.smartHighlight.bind('value'),
hyprland.bind('monitors'),
hyprland.active.workspace.bind('id'),
],
(
sp: number,
@@ -70,7 +69,6 @@ export const defaultWses = (monitor: number): BoxWidget => {
hyprland.bind('monitors'),
options.bar.workspaces.icons.available.bind('value'),
options.bar.workspaces.icons.active.bind('value'),
hyprland.active.workspace.bind('id'),
],
(
showIcons: boolean,
@@ -102,7 +100,6 @@ export const defaultWses = (monitor: number): BoxWidget => {
options.bar.workspaces.showWsIcons.bind('value'),
workspaceMask.bind('value'),
hyprland.bind('monitors'),
hyprland.active.workspace.bind('id'),
],
(
showIcons: boolean,

View File

@@ -24,7 +24,6 @@ export const occupiedWses = (monitor: number): BoxWidget => {
options.bar.workspaces.show_numbered.bind('value'),
options.bar.workspaces.numbered_active_indicator.bind('value'),
spacing.bind('value'),
hyprland.active.workspace.bind('id'),
options.bar.workspaces.workspaceIconMap.bind('value'),
options.bar.workspaces.showWsIcons.bind('value'),
options.theme.matugen.bind('value'),
@@ -45,13 +44,13 @@ export const occupiedWses = (monitor: number): BoxWidget => {
showNumbered: boolean,
numberedActiveIndicator: string,
spacing: number,
activeId: number,
wsIconMap: WorkspaceIconMap,
showWsIcons: boolean,
matugen: boolean,
smartHighlight: boolean,
monitors: Monitor[],
) => {
const activeId = hyprland.active.workspace.id;
let allWkspcs = range(totalWkspcs || 8);
const activeWorkspaces = wkSpaces.map((w) => w.id);
@@ -92,13 +91,13 @@ export const occupiedWses = (monitor: number): BoxWidget => {
}
return allWkspcs
.filter((workspaceNumber) => {
return !isWorkspaceIgnored(ignored, workspaceNumber);
})
.sort((a, b) => {
return a - b;
})
.map((i, index) => {
if (isWorkspaceIgnored(ignored, i)) {
return Widget.Box();
}
return Widget.Button({
class_name: 'workspace-button',
on_primary_click: () => {

View File

@@ -12,27 +12,30 @@ const renderActiveInput = (): Box<Child, Attribute>[] => {
vexpand: false,
vpack: 'end',
setup: (self) => {
self.hook(audio, () => {
const updateClass = (): void => {
const mic = audio.microphone;
const className = `menu-active-button input ${mic.is_muted ? 'muted' : ''}`;
return (self.class_name = className);
});
self.class_name = className;
};
self.hook(audio.microphone, updateClass, 'notify::is-muted');
},
on_primary_click: () => (audio.microphone.is_muted = !audio.microphone.is_muted),
child: Widget.Icon({
class_name: 'menu-active-icon input',
setup: (self) => {
self.hook(audio, () => {
const updateIcon = (): void => {
const isMicMuted =
audio.microphone.is_muted !== null ? audio.microphone.is_muted : true;
if (audio.microphone.volume > 0) {
self.icon = getIcon(audio.microphone.volume, isMicMuted)['mic'];
return;
} else {
self.icon = getIcon(100, true)['mic'];
}
self.icon = getIcon(100, false)['mic'];
});
};
self.hook(audio.microphone, updateIcon, 'notify::volume');
self.hook(audio.microphone, updateIcon, 'notify::is-muted');
},
}),
}),
@@ -44,9 +47,9 @@ const renderActiveInput = (): Box<Child, Attribute>[] => {
hpack: 'start',
truncate: 'end',
wrap: true,
label: audio
.bind('microphone')
.as((v) => (v.description === null ? 'No input device found...' : v.description)),
label: audio.bind('microphone').as((v) => {
return v.description === null ? 'No input device found...' : v.description;
}),
}),
Widget.Slider({
value: audio.microphone.bind('volume').as((v) => v),

View File

@@ -12,20 +12,24 @@ const renderActivePlayback = (): Box<Child, Attribute>[] => {
vexpand: false,
vpack: 'end',
setup: (self) => {
self.hook(audio, () => {
const updateClass = (): void => {
const spkr = audio.speaker;
const className = `menu-active-button playback ${spkr.is_muted ? 'muted' : ''}`;
return (self.class_name = className);
});
self.class_name = className;
};
self.hook(audio.speaker, updateClass, 'notify::is-muted');
},
on_primary_click: () => (audio.speaker.is_muted = !audio.speaker.is_muted),
child: Widget.Icon({
class_name: 'menu-active-icon playback',
setup: (self) => {
self.hook(audio, () => {
const updateIcon = (): void => {
const isSpeakerMuted = audio.speaker.is_muted !== null ? audio.speaker.is_muted : true;
self.icon = getIcon(audio.speaker.volume, isSpeakerMuted)['spkr'];
});
};
self.hook(audio.speaker, updateIcon, 'notify::volume');
self.hook(audio.speaker, updateIcon, 'notify::is-muted');
},
}),
}),

View File

@@ -3,11 +3,12 @@ import DropdownMenu from '../shared/dropdown/index.js';
import { activeDevices } from './active/index.js';
import { availableDevices } from './available/index.js';
import { Attribute, Child } from 'lib/types/widget.js';
import options from 'options.js';
export default (): Window<Child, Attribute> => {
return DropdownMenu({
name: 'audiomenu',
transition: 'crossfade',
transition: options.menus.transition.bind('value'),
child: Widget.Box({
class_name: 'menu-items audio',
hpack: 'fill',

View File

@@ -2,11 +2,12 @@ import Window from 'types/widgets/window.js';
import DropdownMenu from '../shared/dropdown/index.js';
import { Devices } from './devices/index.js';
import { Attribute, Child } from 'lib/types/widget.js';
import options from 'options.js';
export default (): Window<Child, Attribute> => {
return DropdownMenu({
name: 'bluetoothmenu',
transition: 'crossfade',
transition: options.menus.transition.bind('value'),
child: Widget.Box({
class_name: 'menu-items bluetooth',
hpack: 'fill',

View File

@@ -11,7 +11,7 @@ const { enabled: weatherEnabled } = options.menus.clock.weather;
export default (): Window<Child, Attribute> => {
return DropdownMenu({
name: 'calendarmenu',
transition: 'crossfade',
transition: options.menus.transition.bind('value'),
child: Widget.Box({
class_name: 'calendar-menu-content',
css: 'padding: 1px; margin: -1px;',

View File

@@ -59,16 +59,24 @@ const Controls = (): BoxWidget => {
expand: true,
on_primary_click: () => (audio.speaker.is_muted = !audio.speaker.is_muted),
setup: (self) => {
self.hook(audio, () => {
return (self.class_name = `dashboard-button playback ${audio.speaker.is_muted ? 'disabled' : ''}`);
});
self.hook(
audio.speaker,
() => {
return (self.class_name = `dashboard-button playback ${audio.speaker.is_muted ? 'disabled' : ''}`);
},
'notify::is-muted',
);
},
child: Widget.Label({
class_name: 'txt-icon',
setup: (self) => {
self.hook(audio, () => {
return (self.label = audio.speaker.is_muted ? '󰖁' : '󰕾');
});
self.hook(
audio.speaker,
() => {
return (self.label = audio.speaker.is_muted ? '󰖁' : '󰕾');
},
'notify::is-muted',
);
},
}),
}),
@@ -77,16 +85,24 @@ const Controls = (): BoxWidget => {
expand: true,
on_primary_click: () => (audio.microphone.is_muted = !audio.microphone.is_muted),
setup: (self) => {
self.hook(audio, () => {
return (self.class_name = `dashboard-button input ${audio.microphone.is_muted ? 'disabled' : ''}`);
});
self.hook(
audio.microphone,
() => {
return (self.class_name = `dashboard-button input ${audio.microphone.is_muted ? 'disabled' : ''}`);
},
'notify::is-muted',
);
},
child: Widget.Label({
class_name: 'txt-icon',
setup: (self) => {
self.hook(audio, () => {
return (self.label = audio.microphone.is_muted ? '󰍭' : '󰍬');
});
self.hook(
audio.microphone,
() => {
return (self.label = audio.microphone.is_muted ? '󰍭' : '󰍬');
},
'notify::is-muted',
);
},
}),
}),

View File

@@ -6,11 +6,12 @@ import { Stats } from './stats/index.js';
import { Directories } from './directories/index.js';
import Window from 'types/widgets/window.js';
import { Attribute, Child } from 'lib/types/widget.js';
import options from 'options.js';
export default (): Window<Child, Attribute> => {
return DropdownMenu({
name: 'dashboardmenu',
transition: 'crossfade',
transition: options.menus.transition.bind('value'),
child: Widget.Box({
class_name: 'dashboard-menu-content',
css: 'padding: 1px; margin: -1px;',

View File

@@ -38,7 +38,7 @@ const Shortcuts = (): BoxWidget => {
hpack: 'fill',
hexpand: true,
setup: (self) => {
self.hook(hyprland, () => {
const renderMonitorList = (): void => {
const displays = hyprland.monitors.map((mon) => {
return Widget.MenuItem({
label: `Display ${mon.name}`,
@@ -64,12 +64,14 @@ const Shortcuts = (): BoxWidget => {
// });
// });
return (self.children = [
self.children = [
...displays,
// Disabled since window recording isn't available on wayland
// ...apps
]);
});
];
};
self.hook(hyprland, renderMonitorList, 'monitor-added');
self.hook(hyprland, renderMonitorList, 'monitor-removed');
},
});

View File

@@ -3,11 +3,12 @@ import { EnergyProfiles } from './profiles/index.js';
import { Brightness } from './brightness/index.js';
import { Attribute, Child } from 'lib/types/widget.js';
import Window from 'types/widgets/window.js';
import options from 'options.js';
export default (): Window<Child, Attribute> => {
return DropdownMenu({
name: 'energymenu',
transition: 'crossfade',
transition: options.menus.transition.bind('value'),
child: Widget.Box({
class_name: 'menu-items energy',
hpack: 'fill',

View File

@@ -46,10 +46,15 @@ const Bar = (getPlayerInfo: (media: Mpris) => MprisPlayer): BoxWidget => {
const curSec = Math.floor(foundPlayer.position % 60);
if (typeof foundPlayer.position === 'number' && foundPlayer.position >= 0) {
// WARN: These nested ternaries are absolutely disgusting lol
self.tooltip_text = `${
curHour > 0 ? (curHour < 10 ? '0' + curHour : curHour) + ':' : ''
}${curMin < 10 ? '0' + curMin : curMin}:${curSec < 10 ? '0' + curSec : curSec}`;
const formatTime = (time: number): string => {
return time.toString().padStart(2, '0');
};
const formatHour = (hour: number): string => {
return hour > 0 ? formatTime(hour) + ':' : '';
};
self.tooltip_text = `${formatHour(curHour)}${formatTime(curMin)}:${formatTime(curSec)}`;
} else {
self.tooltip_text = `00:00`;
}

View File

@@ -2,11 +2,12 @@ import Window from 'types/widgets/window.js';
import DropdownMenu from '../shared/dropdown/index.js';
import { Media } from './media.js';
import { Attribute, Child } from 'lib/types/widget.js';
import options from 'options.js';
export default (): Window<Child, Attribute> => {
return DropdownMenu({
name: 'mediamenu',
transition: 'crossfade',
transition: options.menus.transition.bind('value'),
child: Widget.Box({
class_name: 'menu-items media',
hpack: 'fill',

View File

@@ -3,11 +3,12 @@ import DropdownMenu from '../shared/dropdown/index.js';
import { Ethernet } from './ethernet/index.js';
import { Wifi } from './wifi/index.js';
import { Attribute, Child } from 'lib/types/widget.js';
import options from 'options.js';
export default (): Window<Child, Attribute> => {
return DropdownMenu({
name: 'networkmenu',
transition: 'crossfade',
transition: options.menus.transition.bind('value'),
child: Widget.Box({
class_name: 'menu-items network',
child: Widget.Box({

View File

@@ -27,7 +27,7 @@ export default (): Window<Child, Attribute> => {
return DropdownMenu({
name: 'notificationsmenu',
transition: 'crossfade',
transition: options.menus.transition.bind('value'),
child: Widget.Box({
class_name: 'notification-menu-content',
css: 'padding: 1px; margin: -1px;',

View File

@@ -14,7 +14,7 @@ const Placeholder = (notifs: Notifications): BoxWidget => {
children: [
Widget.Label({
vpack: 'center',
class_name: 'placeholder-label dim bell',
class_name: 'placeholder-label dim bell txt-icon',
label: notifs.bind('dnd').as((dnd) => (dnd ? '󰂛' : '󰂚')),
}),
Widget.Label({

View File

@@ -4,6 +4,7 @@ import powermenu from './helpers/actions.js';
import icons from '../../icons/index.js';
import Window from 'types/widgets/window.js';
import { Attribute, Child, GButton } from 'lib/types/widget.js';
import options from 'options.js';
const SysButton = (action: Action, label: string): GButton =>
Widget.Button({
@@ -27,7 +28,7 @@ const SysButton = (action: Action, label: string): GButton =>
export default (): Window<Child, Attribute> =>
PopupWindow({
name: 'powermenu',
transition: 'crossfade',
transition: options.menus.transition.bind('value'),
child: Widget.Box({
class_name: 'powermenu horizontal',
children: [

View File

@@ -2,11 +2,12 @@ import Window from 'types/widgets/window.js';
import DropdownMenu from '../shared/dropdown/index.js';
import { PowerButton } from './button.js';
import { Attribute, Child } from 'lib/types/widget.js';
import options from 'options.js';
export default (): Window<Child, Attribute> => {
return DropdownMenu({
name: 'powerdropdownmenu',
transition: 'crossfade',
transition: options.menus.transition.bind('value'),
child: Widget.Box({
class_name: 'menu-items power-dropdown',
child: Widget.Box({

View File

@@ -2,8 +2,8 @@ import options from 'options';
import { DropdownMenuProps } from 'lib/types/dropdownmenu';
import { Attribute, Child, Exclusivity } from 'lib/types/widget';
import Window from 'types/widgets/window';
import { moveBoxToCursor } from './locationHandler/index';
import { barEventMargins } from './eventBoxes/index';
import { globalEventBoxes } from 'globals/dropdown';
const { location } = options.theme.bar;
@@ -22,7 +22,6 @@ export default ({
child,
transition,
exclusivity = 'ignore' as Exclusivity,
fixed = false,
...props
}: DropdownMenuProps): Window<Child, Attribute> =>
Widget.Window({
@@ -61,7 +60,7 @@ export default ({
return true;
},
setup: (self) => {
moveBoxToCursor(self, fixed);
globalEventBoxes.value[name] = self;
},
child: Widget.Box({
class_name: 'dropdown-menu-container',
@@ -73,7 +72,7 @@ export default ({
if (wname === name) self.reveal_child = visible;
}),
transition,
transitionDuration: 350,
transitionDuration: options.menus.transitionTime.bind('value'),
child: Widget.Box({
class_name: 'dropdown-menu-container',
can_focus: true,

View File

@@ -7,6 +7,7 @@ import { Monitor } from 'types/service/hyprland';
import Box from 'types/widgets/box';
import EventBox from 'types/widgets/eventbox';
import Revealer from 'types/widgets/revealer';
import { globalEventBoxes } from 'globals/dropdown';
type NestedRevealer = Revealer<Box<TWidget, unknown>, unknown>;
type NestedBox = Box<NestedRevealer, unknown>;
@@ -15,90 +16,83 @@ type NestedEventBox = EventBox<NestedBox, unknown>;
const { location } = options.theme.bar;
const { scalingPriority } = options;
export const moveBoxToCursor = <T extends NestedEventBox>(self: T, fixed: boolean): void => {
if (fixed) {
export const calculateMenuPosition = async (pos: number[], windowName: string): Promise<void> => {
const self = globalEventBoxes.value[windowName] as NestedEventBox;
const curHyprlandMonitor = hyprland.monitors.find((m) => m.id === hyprland.active.monitor.id);
const dropdownWidth = self.child.get_allocation().width;
const dropdownHeight = self.child.get_allocation().height;
let hyprScaling = 1;
try {
const monitorInfo = await bash('hyprctl monitors -j');
const parsedMonitorInfo = JSON.parse(monitorInfo);
const foundMonitor = parsedMonitorInfo.find((monitor: Monitor) => monitor.id === hyprland.active.monitor.id);
hyprScaling = foundMonitor?.scale || 1;
} catch (error) {
console.error(`Error parsing hyprland monitors: ${error}`);
}
let monWidth = curHyprlandMonitor?.width;
let monHeight = curHyprlandMonitor?.height;
if (monWidth === undefined || monHeight === undefined || hyprScaling === undefined) {
return;
}
globalMousePos.connect('changed', async ({ value }) => {
const curHyprlandMonitor = hyprland.monitors.find((m) => m.id === hyprland.active.monitor.id);
const dropdownWidth = self.child.get_allocation().width;
const dropdownHeight = self.child.get_allocation().height;
// If GDK Scaling is applied, then get divide width by scaling
// to get the proper coordinates.
// Ex: On a 2860px wide monitor... if scaling is set to 2, then the right
// end of the monitor is the 1430th pixel.
const gdkScale = Utils.exec('bash -c "echo $GDK_SCALE"');
let hyprScaling = 1;
try {
const monitorInfo = await bash('hyprctl monitors -j');
const parsedMonitorInfo = JSON.parse(monitorInfo);
if (scalingPriority.value === 'both') {
const scale = parseFloat(gdkScale);
monWidth = monWidth / scale;
monHeight = monHeight / scale;
const foundMonitor = parsedMonitorInfo.find(
(monitor: Monitor) => monitor.id === hyprland.active.monitor.id,
);
hyprScaling = foundMonitor?.scale || 1;
} catch (error) {
console.error(`Error parsing hyprland monitors: ${error}`);
}
monWidth = monWidth / hyprScaling;
monHeight = monHeight / hyprScaling;
} else if (/^\d+(.\d+)?$/.test(gdkScale) && scalingPriority.value === 'gdk') {
const scale = parseFloat(gdkScale);
monWidth = monWidth / scale;
monHeight = monHeight / scale;
} else {
monWidth = monWidth / hyprScaling;
monHeight = monHeight / hyprScaling;
}
let monWidth = curHyprlandMonitor?.width;
let monHeight = curHyprlandMonitor?.height;
// If monitor is vertical (transform = 1 || 3) swap height and width
const isVertical = curHyprlandMonitor?.transform !== undefined ? curHyprlandMonitor.transform % 2 !== 0 : false;
if (monWidth === undefined || monHeight === undefined || hyprScaling === undefined) {
return;
}
if (isVertical) {
[monWidth, monHeight] = [monHeight, monWidth];
}
// If GDK Scaling is applied, then get divide width by scaling
// to get the proper coordinates.
// Ex: On a 2860px wide monitor... if scaling is set to 2, then the right
// end of the monitor is the 1430th pixel.
const gdkScale = Utils.exec('bash -c "echo $GDK_SCALE"');
let marginRight = monWidth - dropdownWidth / 2;
marginRight = marginRight - pos[0];
let marginLeft = monWidth - dropdownWidth - marginRight;
if (scalingPriority.value === 'both') {
const scale = parseFloat(gdkScale);
monWidth = monWidth / scale;
monHeight = monHeight / scale;
const minimumMargin = 0;
monWidth = monWidth / hyprScaling;
monHeight = monHeight / hyprScaling;
} else if (/^\d+(.\d+)?$/.test(gdkScale) && scalingPriority.value === 'gdk') {
const scale = parseFloat(gdkScale);
monWidth = monWidth / scale;
monHeight = monHeight / scale;
} else {
monWidth = monWidth / hyprScaling;
monHeight = monHeight / hyprScaling;
}
if (marginRight < minimumMargin) {
marginRight = minimumMargin;
marginLeft = monWidth - dropdownWidth - minimumMargin;
}
// If monitor is vertical (transform = 1 || 3) swap height and width
const isVertical = curHyprlandMonitor?.transform !== undefined ? curHyprlandMonitor.transform % 2 !== 0 : false;
if (marginLeft < minimumMargin) {
marginLeft = minimumMargin;
marginRight = monWidth - dropdownWidth - minimumMargin;
}
if (isVertical) {
[monWidth, monHeight] = [monHeight, monWidth];
}
self.set_margin_left(marginLeft);
self.set_margin_right(marginRight);
let marginRight = monWidth - dropdownWidth / 2;
marginRight = fixed ? marginRight - monWidth / 2 : marginRight - value[0];
let marginLeft = monWidth - dropdownWidth - marginRight;
const minimumMargin = 0;
if (marginRight < minimumMargin) {
marginRight = minimumMargin;
marginLeft = monWidth - dropdownWidth - minimumMargin;
}
if (marginLeft < minimumMargin) {
marginLeft = minimumMargin;
marginRight = monWidth - dropdownWidth - minimumMargin;
}
self.set_margin_left(marginLeft);
self.set_margin_right(marginRight);
if (location.value === 'top') {
self.set_margin_top(0);
self.set_margin_bottom(monHeight);
} else {
self.set_margin_bottom(0);
self.set_margin_top(monHeight - dropdownHeight);
}
});
if (location.value === 'top') {
self.set_margin_top(0);
self.set_margin_bottom(monHeight);
} else {
self.set_margin_bottom(0);
self.set_margin_top(monHeight - dropdownHeight);
}
};

View File

@@ -163,7 +163,7 @@ export default ({
name,
child,
layout = 'center',
transition,
transition = 'none',
exclusivity = 'ignore' as Exclusivity,
...props
}: PopupWindowProps): Window<Child, Attribute> => {