feat(stage-tamagotchi): bring back resizing, use auto detect like auto hover

Author: nekomeowww

apps/stage-tamagotchi/src/renderer/composables/electron-vueuse/index.ts

@@ -1,6 +1,7 @@
 export { useElectronAllDisplays } from './use-electorn-all-displays'
 export { useElectronEventaContext, useElectronEventaInvoke } from './use-electron-eventa-context'
 export { useElectronMouse, useElectronMouseEventTarget } from './use-electron-mouse'
+export { useElectronMouseAroundWindowBorder } from './use-electron-mouse-around-window-border'
 export type { UseMouseInElementReturn } from './use-electron-mouse-in-element'
 export { useElectronMouseInElement } from './use-electron-mouse-in-element'
 export { useElectronMouseInWindow } from './use-electron-mouse-in-window'

apps/stage-tamagotchi/src/renderer/composables/electron-vueuse/use-electron-mouse-around-window-border/index.ts

@@ -0,0 +1,63 @@
+import { computed } from 'vue'
+
+import { useElectronRelativeMouse } from '../use-electron-relative-mouse'
+import { useElectronWindowBounds } from '../use-electron-window-bounds'
+
+export interface UseElectronMouseAroundWindowBorderOptions {
+  /** Pixel distance from the window edge to consider as "near". */
+  threshold?: number
+  /** Allow a small overshoot outside the window and still count as near. Defaults to threshold. */
+  overshoot?: number
+}
+
+/**
+ * Detect when the cursor is near the window border using window-relative mouse coords.
+ * Fast path: no extra listeners; reuses existing mouse and window bounds streams.
+ */
+export function useElectronMouseAroundWindowBorder(
+  options: UseElectronMouseAroundWindowBorderOptions = {},
+) {
+  const threshold = options.threshold ?? 8
+  const overshoot = options.overshoot ?? threshold
+
+  const { x, y } = useElectronRelativeMouse()
+  const { width, height } = useElectronWindowBounds()
+
+  // Helpers to determine proximity to each edge. We allow a small overshoot so
+  // users hovering slightly outside still get feedback to find the edge.
+  const nearLeft = computed(() => Math.abs(x.value) <= threshold && y.value > -overshoot && y.value < height.value + overshoot)
+  const nearRight = computed(() => Math.abs(x.value - width.value) <= threshold && y.value > -overshoot && y.value < height.value + overshoot)
+  const nearTop = computed(() => Math.abs(y.value) <= threshold && x.value > -overshoot && x.value < width.value + overshoot)
+  const nearBottom = computed(() => Math.abs(y.value - height.value) <= threshold && x.value > -overshoot && x.value < width.value + overshoot)
+
+  const nearTopLeft = computed(() => nearTop.value && nearLeft.value)
+  const nearTopRight = computed(() => nearTop.value && nearRight.value)
+  const nearBottomLeft = computed(() => nearBottom.value && nearLeft.value)
+  const nearBottomRight = computed(() => nearBottom.value && nearRight.value)
+
+  const isNearAnyBorder = computed(() =>
+    nearLeft.value
+    || nearRight.value
+    || nearTop.value
+    || nearBottom.value,
+  )
+
+  return {
+    x,
+    y,
+    width,
+    height,
+    nearLeft,
+    nearRight,
+    nearTop,
+    nearBottom,
+    nearTopLeft,
+    nearTopRight,
+    nearBottomLeft,
+    nearBottomRight,
+    isNearAnyBorder,
+  }
+}
+
+export type UseElectronMouseAroundWindowBorderReturn = ReturnType<typeof useElectronMouseAroundWindowBorder>
+

apps/stage-tamagotchi/src/renderer/pages/index.vue

@@ -12,6 +12,7 @@ import ResourceStatusIsland from '../components/Widgets/ResourceStatusIsland/ind
 import { electron } from '../../shared/electron'
 import {
   useElectronEventaInvoke,
+  useElectronMouseAroundWindowBorder,
   useElectronMouseInElement,
   useElectronMouseInWindow,
   useElectronRelativeMouse,
@@ -34,6 +35,8 @@ const { isOutside } = useElectronMouseInElement(controlsIslandRef)
 const isOutsideFor250Ms = debouncedRef(isOutside, 250)
 const { x: relativeMouseX, y: relativeMouseY } = useElectronRelativeMouse()
 const isTransparent = useCanvasPixelIsTransparentAtPoint(stageCanvas, relativeMouseX, relativeMouseY)
+const { isNearAnyBorder: isAroundWindowBorder } = useElectronMouseAroundWindowBorder({ threshold: 30 })
+const isAroundWindowBorderFor250Ms = debouncedRef(isAroundWindowBorder, 250)
 
 const setIgnoreMouseEvents = useElectronEventaInvoke(electron.window.setIgnoreMouseEvents)
 
@@ -46,19 +49,23 @@ const { pause, resume } = watchPausable(isTransparent, (transparent) => {
   shouldFadeOnCursorWithin.value = !transparent
 }, { immediate: true })
 
-watch([isOutsideFor250Ms, isOutsideWindow], () => {
-  if (!isOutsideFor250Ms.value) {
+watch([isOutsideFor250Ms, isAroundWindowBorderFor250Ms, isOutsideWindow, isTransparent], () => {
+  const insideControls = !isOutsideFor250Ms.value
+  const nearBorder = isAroundWindowBorderFor250Ms.value
+
+  if (insideControls || nearBorder) {
+    // Inside interactive controls or near resize border: do NOT ignore events
     isIgnoringMouseEvents.value = false
     shouldFadeOnCursorWithin.value = false
     setIgnoreMouseEvents([false, { forward: true }])
     pause()
   }
   else {
+    // Otherwise allow click-through while we fade UI based on transparency
     isIgnoringMouseEvents.value = true
     if (!isOutsideWindow.value && !isTransparent.value) {
       shouldFadeOnCursorWithin.value = true
     }
-
     setIgnoreMouseEvents([true, { forward: true }])
     resume()
   }
@@ -85,6 +92,8 @@ watch([isOutsideFor250Ms, isOutsideWindow], () => {
           shouldFadeOnCursorWithin ? 'op-0' : 'op-100',
           'absolute',
           'top-0 left-0 w-full h-full',
+          'overflow-hidden',
+          'rounded-2xl',
           'transition-opacity duration-250 ease-in-out',
         ]"
       >
@@ -161,11 +170,13 @@ watch([isOutsideFor250Ms, isOutsideWindow], () => {
     leave-from-class="opacity-100"
     leave-to-class="opacity-50"
   >
-    <div
-      v-if="false"
-      class="absolute left-0 top-0 z-999 h-full w-full"
-    >
-      <div h-full w-full animate-flash animate-duration-2.5s animate-count-infinite b-4 b-primary rounded-2xl />
+    <div v-if="isAroundWindowBorderFor250Ms && !isLoading" class="pointer-events-none absolute left-0 top-0 z-999 h-full w-full">
+      <div
+        :class="[
+          'b-primary/50',
+          'h-full w-full animate-flash animate-duration-3s animate-count-infinite b-4 rounded-2xl',
+        ]"
+      />
     </div>
   </Transition>
 </template>