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
GitHub
@@ -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,
|
||||
|
||||
@@ -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);
|
||||
}
|
||||
};
|
||||
|
||||
@@ -163,7 +163,7 @@ export default ({
|
||||
name,
|
||||
child,
|
||||
layout = 'center',
|
||||
transition,
|
||||
transition = 'none',
|
||||
exclusivity = 'ignore' as Exclusivity,
|
||||
...props
|
||||
}: PopupWindowProps): Window<Child, Attribute> => {
|
||||
|
||||
Reference in New Issue
Block a user