Merge pull request #651 from nature-heart-software/dev

release

apps/app/src/modules/electron-keybinding/register.ts

@@ -18,7 +18,9 @@ export default () =>
     const messagesStore = useMessagesStore()
     const multiKeysKeybindings = {
       toggleMessengerWindow: handleShortcut(() => electronMessengerWindow.toggleWindow('keyboard')),
-      toggleMessengerWindowAlt: handleShortcut(() => electronMessengerWindow.toggleWindow('mouse')),
+      toggleMessengerWindowAlt: handleShortcut(() =>
+        electronMessengerWindow.toggleWindow('keyboard'),
+      ),
       cancelCurrentMessage: handleShortcut(() => emitIPCCancelCurrentMessage()),
       cancelAllMessages: handleShortcut(() => emitIPCCancelAllMessages()),
     }

apps/app/src/modules/vue-hitboxes/NvHitbox.vue

@@ -7,11 +7,17 @@
 import { v4 as uuid } from 'uuid'
 import { onBeforeUnmount, onMounted, ref, watch } from 'vue'
 import { throttle } from 'lodash'
-import { useIntersectionObserver, useMutationObserver, useResizeObserver } from '@vueuse/core'
+import {
+  useDevicePixelRatio,
+  useIntersectionObserver,
+  useMutationObserver,
+  useResizeObserver,
+} from '@vueuse/core'
 import { useHitboxesStore } from '@/modules/vue-hitboxes/hitboxes.store'
 
 const hitboxesStore = useHitboxesStore()
 
+const { pixelRatio } = useDevicePixelRatio()
 const componentRef = ref()
 const id = uuid()
 const hitboxes = ref({
@@ -33,10 +39,10 @@ const updateHitbox = throttle(
   () => {
     if (componentRef.value) {
       const bounds = componentRef.value.getBoundingClientRect()
-      hitboxes.value.x = bounds.x
-      hitboxes.value.y = bounds.y
-      hitboxes.value.w = bounds.width
-      hitboxes.value.h = bounds.height
+      hitboxes.value.x = bounds.x * pixelRatio.value
+      hitboxes.value.y = bounds.y * pixelRatio.value
+      hitboxes.value.w = bounds.width * pixelRatio.value
+      hitboxes.value.h = bounds.height * pixelRatio.value
     }
   },
   250,

apps/app/src/modules/vue-hitboxes/index.ts

@@ -2,6 +2,7 @@ import ready from '@ryanmorr/ready'
 import { v4 as uuid } from 'uuid'
 import { throttle } from 'lodash'
 import { useHitboxesStore } from '@/modules/vue-hitboxes/hitboxes.store'
+import { useDevicePixelRatio } from '@vueuse/core'
 
 export const hitboxClass = 'hitbox'
 
@@ -22,10 +23,17 @@ export const watchHitbox = (selector: string) => {
   ready(selector, (element: Element) => {
     const id = uuid()
     const hitboxesStore = useHitboxesStore()
+    const { pixelRatio } = useDevicePixelRatio()
     const updateHitboxes = throttle(() => {
       if (element) {
         const { x, y, width: w, height: h } = element.getBoundingClientRect()
-        hitboxesStore.addHitbox({ id, x, y, w, h })
+        hitboxesStore.addHitbox({
+          id,
+          x: x * pixelRatio.value,
+          y: y * pixelRatio.value,
+          w: w * pixelRatio.value,
+          h: h * pixelRatio.value,
+        })
       } else {
         hitboxesStore.removeHitbox(id)
       }

apps/app/src/teams/messenger/App.vue

@@ -37,10 +37,27 @@ import { useSettingsStore } from '@/features/settings/store'
 import { watch } from 'vue'
 import { socket } from '@/services'
 
+const { ElectronMessengerWindow } = window
 const messengerStore = useMessengerStore()
 const settingsStore = useSettingsStore()
 const messengerWindowStore = useMessengerWindowStore()
 
+window.addEventListener('keydown', (event) => {
+  const isCtrlOrCmdKey = event.ctrlKey || event.metaKey
+
+  if (isCtrlOrCmdKey && (event.key === '+' || event.key === '=')) {
+    ElectronMessengerWindow.zoomIn()
+  }
+
+  if (isCtrlOrCmdKey && (event.key === '-' || event.key === '_')) {
+    ElectronMessengerWindow.zoomOut()
+  }
+
+  if (isCtrlOrCmdKey && event.key === '0') {
+    ElectronMessengerWindow.resetZoom()
+  }
+})
+
 watch(
   () => messengerWindowStore.isFocused,
   () => {

apps/app/src/teams/messenger/components/NvDebug.vue

@@ -5,10 +5,10 @@
         :data-debug-hitbox-id="hitbox.id"
         :style="{
           position: 'absolute',
-          top: rem(hitbox.y),
-          left: rem(hitbox.x),
-          width: rem(hitbox.w),
-          height: rem(hitbox.h),
+          top: rem(hitbox.y / pixelRatio),
+          left: rem(hitbox.x / pixelRatio),
+          width: rem(hitbox.w / pixelRatio),
+          height: rem(hitbox.h / pixelRatio),
           border: '1px solid red',
           pointerEvents: 'none',
         }"
@@ -19,6 +19,8 @@
 <script lang="ts" setup>
 import { useHitboxesStore } from '@/modules/vue-hitboxes/hitboxes.store'
 import { rem } from 'polished'
+import { useDevicePixelRatio } from '@vueuse/core'
 
+const { pixelRatio } = useDevicePixelRatio()
 const hitboxStore = useHitboxesStore()
 </script>

apps/app/src/teams/messenger/components/NvMessenger.vue

@@ -72,8 +72,8 @@ import NvMessengerLinksBar from '@/teams/messenger/components/NvMessengerLinksBa
 import NvMessengerHandleBar from '@/teams/messenger/components/NvMessengerHandleBar.vue'
 import NvMessengerNavigationBar from '@/teams/messenger/components/NvMessengerNavigationBar.vue'
 import { debounce } from 'lodash'
+import { useWindowSize } from '@vueuse/core'
 // import gsap from 'gsap'
-
 // const messengerWindowStore = useMessengerWindowStore()
 const messengerStore = useMessengerStore()
 const props = defineProps({
@@ -141,10 +141,18 @@ provide('messenger', {
   navigateTo,
   isViewShown,
 })
-
+const { width: windowWidth, height: windowHeight } = useWindowSize()
 const viewport = computed(() => ({
-  width: Math.max(document.documentElement.clientWidth || 0, window.innerWidth || 0),
-  height: Math.max(document.documentElement.clientHeight || 0, window.innerHeight || 0),
+  width: Math.max(
+    windowWidth.value,
+    document.documentElement.clientWidth || 0,
+    window.innerWidth || 0,
+  ),
+  height: Math.max(
+    windowHeight.value,
+    document.documentElement.clientHeight || 0,
+    window.innerHeight || 0,
+  ),
 }))
 
 const savePosition = debounce((event: any) => {

apps/app/src/teams/messenger/modules/electron-messenger-window/index.ts

@@ -63,13 +63,24 @@ export const ElectronMessengerWindow = () => {
       resolve(true)
     })
 
+  const ensureNativeFocus = () => {
+    const window = getWindow()
+    if (window) {
+      const windowNativeHandle = getNativeWindowHandleInt(window)
+      user32.SetForegroundWindow(windowNativeHandle)
+    }
+  }
+
   const focus = (context: 'mouse' | 'keyboard') =>
     new Promise((resolve, reject) => {
       messengerWindowStore?.$patch({ focusContext: context })
       const window = getWindow()
       if (window) {
         if (!isFocused) {
           foregroundWindow = user32.GetForegroundWindow()
+          // to prevent shenanigans with some softwares (*coughs* League of Legends *coughs*)
+          // this makes sure to blur first with ffi-napi for safe measures
+          user32.SetForegroundWindow(0)
           isFocused = true
           // window.once('show', () => {
           //   /* The focus needs to be delayed after the show() to actually focus properly... */
@@ -85,6 +96,13 @@ export const ElectronMessengerWindow = () => {
           window.setIgnoreMouseEvents(false)
           window.show() // Fixes focus properly with Hardware Acceleration for some reasons
           window.focus() // needed for immediate focus in case the window is already shown
+
+          // In applications like League of Legends, the window doesn't always receive focus
+          // but we can force it manually once we're sure the window is shown 100%.
+          // Only possible with a timeout atm.
+          setTimeout(() => {
+            ensureNativeFocus()
+          }, 100)
         }
       } else {
         reject()
@@ -182,7 +200,23 @@ export const ElectronMessengerWindow = () => {
       window.setBounds(display.bounds)
     }
   }
+  const zoomIn = () => {
+    const window = getWindow()
+    if (!window) return
+    window.webContents.zoomLevel += 0.5
+  }
+
+  const zoomOut = () => {
+    const window = getWindow()
+    if (!window) return
+    window.webContents.zoomLevel -= 0.5
+  }
 
+  const resetZoom = () => {
+    const window = getWindow()
+    if (!window) return
+    window.webContents.zoomLevel = 0
+  }
   const addEventListeners = () => {
     const window = getWindow()
     iohook.on('mousemove', throttle(onMouseMove, 150))
@@ -238,6 +272,10 @@ export const ElectronMessengerWindow = () => {
     start,
     setDisplay,
     isReady,
+    ensureNativeFocus,
+    zoomIn,
+    zoomOut,
+    resetZoom,
   }
 }
 

apps/app/src/teams/messenger/views/NvSettingsGeneral.vue

@@ -68,14 +68,10 @@
           <NvDivider direction="horizontal" />
           <NvGroup align="start" justify="apart" no-wrap spacing="5">
             <NvStack>
-              <NvText type="label">Show Messenger window (for compatibility)</NvText>
+              <NvText type="label">Show Messenger window (alternative)</NvText>
               <NvText
-                >Applications sometimes block system-wide keyboard shortcuts<br />
-                Use this shortcut if the Messenger window doesn't show with the shortcut above
-              </NvText>
-              <NvText type="caption"
-                ><strong>NOTE:</strong> The Messenger window will not be focused when shown with
-                this shortcut
+                >If an application is preventing the window from showing with the shortcut above,
+                try this one
               </NvText>
             </NvStack>
             <NvKeybinding