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:
@@ -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);
|
||||
|
||||
@@ -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',
|
||||
|
||||
@@ -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,
|
||||
|
||||
@@ -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: () => {
|
||||
|
||||
@@ -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),
|
||||
|
||||
@@ -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');
|
||||
},
|
||||
}),
|
||||
}),
|
||||
|
||||
@@ -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',
|
||||
|
||||
@@ -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',
|
||||
|
||||
@@ -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;',
|
||||
|
||||
@@ -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',
|
||||
);
|
||||
},
|
||||
}),
|
||||
}),
|
||||
|
||||
@@ -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;',
|
||||
|
||||
@@ -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');
|
||||
},
|
||||
});
|
||||
|
||||
|
||||
@@ -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',
|
||||
|
||||
@@ -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`;
|
||||
}
|
||||
|
||||
@@ -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',
|
||||
|
||||
@@ -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({
|
||||
|
||||
@@ -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;',
|
||||
|
||||
@@ -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({
|
||||
|
||||
@@ -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: [
|
||||
|
||||
@@ -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({
|
||||
|
||||
@@ -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