Highlight widgets and mini-widgets when hovering then or their edit-menu entry

src/assets/defaults.ts

@@ -9,11 +9,13 @@ const defaultWidgetManagerVars = {
   lastNonMaximizedY: 0.32,
   lastNonMaximizedWidth: 0.2,
   lastNonMaximizedHeight: 0.36,
+  highlighted: false,
 }
 
 const defaultMiniWidgetManagerVars = {
   timesMounted: 0,
   configMenuOpen: false,
+  highlighted: false,
 }
 
 const hostname = window.location.hostname
@@ -641,15 +643,7 @@ export const widgetProfiles: Profile[] = [
             options: {
               showVehiclePath: true,
             },
-            managerVars: {
-              timesMounted: 308,
-              configMenuOpen: false,
-              allowMoving: true,
-              lastNonMaximizedX: 0.4,
-              lastNonMaximizedY: 0.32,
-              lastNonMaximizedWidth: 0.2,
-              lastNonMaximizedHeight: 0.36,
-            },
+            managerVars: defaultWidgetManagerVars,
           },
         ],
         miniWidgetContainers: [
@@ -661,10 +655,7 @@ export const widgetProfiles: Profile[] = [
                 component: MiniWidgetType.TakeoffLandCommander,
                 options: {},
                 hash: '0fec5430-8e49-43f0-9d7f-f3bec5f2c17e',
-                managerVars: {
-                  timesMounted: 0,
-                  configMenuOpen: false,
-                },
+                managerVars: defaultMiniWidgetManagerVars,
               },
             ],
           },
@@ -676,10 +667,7 @@ export const widgetProfiles: Profile[] = [
                 component: MiniWidgetType.RelativeAltitudeIndicator,
                 options: {},
                 hash: '11952b31-5123-44cd-8730-735caab2ec57',
-                managerVars: {
-                  timesMounted: 0,
-                  configMenuOpen: false,
-                },
+                managerVars: defaultMiniWidgetManagerVars,
               },
             ],
           },
@@ -691,20 +679,14 @@ export const widgetProfiles: Profile[] = [
                 component: MiniWidgetType.ModeSelector,
                 options: {},
                 hash: 'd9dc79e3-dd8a-473c-ba60-dbb83e41412a',
-                managerVars: {
-                  timesMounted: 0,
-                  configMenuOpen: false,
-                },
+                managerVars: defaultMiniWidgetManagerVars,
               },
               {
                 name: 'Armer Button',
                 component: MiniWidgetType.ArmerButton,
                 options: {},
                 hash: 'fe8cd3c0-f542-4343-bfb2-b6369d1522fe',
-                managerVars: {
-                  timesMounted: 0,
-                  configMenuOpen: false,
-                },
+                managerVars: defaultMiniWidgetManagerVars,
               },
             ],
           },

src/components/Button.vue

@@ -1,6 +1,7 @@
 <template>
   <button
     class="px-4 py-1 text-lg font-medium text-white uppercase transition-all rounded-md shadow-md action-button bg-slate-500 hover:bg-slate-400"
+    v-bind="$attrs"
   >
     <slot></slot>
   </button>

src/components/EditMenu.vue

@@ -125,6 +125,9 @@
           >
             <Button
               class="flex items-center justify-center w-full h-8 pl-3 overflow-auto cursor-grab active:cursor-grabbing"
+              :class="{ '!bg-slate-400': widget.managerVars.highlighted }"
+              @mouseover="widget.managerVars.highlighted = true"
+              @mouseleave="widget.managerVars.highlighted = false"
             >
               <span class="mr-3 text-base text-slate-700">⠿</span>
               <p class="overflow-hidden text-sm text-ellipsis whitespace-nowrap">{{ widget.name }}</p>
@@ -162,7 +165,10 @@
             <div
               v-for="widget in miniWidgetContainer.widgets"
               :key="widget.hash"
-              class="flex items-center justify-between w-full h-10 my-1"
+              class="flex items-center justify-between w-full h-10 px-2 py-1 my-1 rounded-md"
+              :class="{ 'bg-slate-400': widget.managerVars.highlighted }"
+              @mouseover="widget.managerVars.highlighted = true"
+              @mouseleave="widget.managerVars.highlighted = false"
             >
               <div class="flex items-center justify-start w-full overflow-auto">
                 <p class="overflow-hidden select-none text-ellipsis whitespace-nowrap">
@@ -310,6 +316,7 @@ const availableMiniWidgetTypes = computed(() =>
     managerVars: {
       timesMounted: 0,
       configMenuOpen: false,
+      highlighted: false,
     },
   }))
 )

src/components/MiniWidgetContainer.vue

@@ -17,7 +17,9 @@
         v-for="miniWidget in container.widgets"
         :key="miniWidget.hash"
         class="rounded-md"
-        :class="{ 'cursor-grab': allowEditing, 'hover:bg-slate-400': allowEditing && !mousePressed }"
+        :class="{ 'cursor-grab': allowEditing, 'bg-slate-400': miniWidget.managerVars.highlighted }"
+        @mouseover="miniWidget.managerVars.highlighted = true"
+        @mouseleave="miniWidget.managerVars.highlighted = false"
       >
         <div :class="{ 'select-none pointer-events-none': allowEditing }">
           <MiniWidgetInstantiator :mini-widget="miniWidget" />
@@ -57,7 +59,6 @@
 </template>
 
 <script setup lang="ts">
-import { useMousePressed } from '@vueuse/core'
 import { v4 as uuid } from 'uuid'
 import { ref, toRefs } from 'vue'
 import { computed } from 'vue'
@@ -114,6 +115,4 @@ const refreshWidgetsHashs = (): void => {
 const showWidgetTrashArea = ref(false)
 
 const trashList = ref<MiniWidget[]>([])
-
-const { pressed: mousePressed } = useMousePressed()
 </script>

src/components/WidgetHugger.vue

@@ -9,7 +9,11 @@
     <p>Scroll size: {{ innerWidgetRef?.scrollWidth }} x {{ innerWidgetRef?.scrollHeight }} px</p>
     <p v-for="[k, v] in Object.entries(widget?.options)" :key="k">{{ k }} (option): {{ v }}</p>
   </div>
-  <div ref="widgetOverlay" class="widgetOverlay" :class="{ allowMoving, draggingWidget, hoveringWidgetOrOverlay }" />
+  <div
+    ref="widgetOverlay"
+    class="widgetOverlay"
+    :class="{ allowMoving, draggingWidget, hoveringWidgetOrOverlay, highlighted }"
+  />
   <div ref="outerWidgetRef" class="outerWidget">
     <div ref="innerWidgetRef" class="innerWidget" :class="{ 'overflow-hidden': hideOverflow }">
       <slot></slot>
@@ -27,7 +31,7 @@
 
 <script setup lang="ts">
 import { useElementBounding, useElementHover, useWindowSize } from '@vueuse/core'
-import { computed, nextTick, onMounted, ref, toRefs } from 'vue'
+import { computed, nextTick, onMounted, ref, toRefs, watch } from 'vue'
 
 import { constrain, round } from '@/libs/utils'
 import { useDevelopmentStore } from '@/stores/development'
@@ -79,6 +83,11 @@ const hoveringOverlay = useElementHover(widgetOverlay)
 const hoveringWidgetItself = useElementHover(outerWidgetRef)
 const hoveringWidgetOrOverlay = computed(() => hoveringOverlay.value || hoveringWidgetItself.value)
 
+// Put the widget into highlighted state when in edit-mode and hovering over it
+watch([hoveringWidgetOrOverlay, allowMoving], () => {
+  widget.value.managerVars.highlighted = hoveringWidgetOrOverlay.value && allowMoving.value
+})
+
 const draggingWidget = ref(false)
 const isResizing = ref(false)
 const resizeHandle = ref<EventTarget | null>(null)
@@ -269,6 +278,8 @@ const cursorStyle = computed(() => {
 })
 
 const devInfoBlurLevel = computed(() => `${devStore.widgetDevInfoBlurLevel}px`)
+
+const highlighted = computed(() => widget.value.managerVars.highlighted)
 </script>
 
 <style>
@@ -299,6 +310,9 @@ const devInfoBlurLevel = computed(() => `${devStore.widgetDevInfoBlurLevel}px`)
 .widgetOverlay.allowMoving {
   background-color: rgba(0, 0, 0, 0.1);
 }
+.widgetOverlay.allowMoving.highlighted {
+  background-color: rgba(255, 255, 255, 0.3);
+}
 .widgetOverlay.hoveringWidgetOrOverlay.allowMoving {
   box-shadow: 0 0 0 1px white;
   outline: dashed 1px black;

src/stores/widgetManager.ts

@@ -364,6 +364,7 @@ export const useWidgetManagerStore = defineStore('widget-manager', () => {
         lastNonMaximizedY: 0.32,
         lastNonMaximizedWidth: 0.2,
         lastNonMaximizedHeight: 0.36,
+        highlighted: false,
       },
     })
   }

src/types/miniWidgets.ts

@@ -47,6 +47,10 @@ export type MiniWidget = {
      * If the configuration menu is open or not
      */
     configMenuOpen: boolean
+    /**
+     * Wether the mini-widget should be highlited or not
+     */
+    highlighted: boolean
   }
 }
 

src/types/widgets.ts

@@ -76,6 +76,10 @@ export type Widget = {
      * Last widget height when it wasn't maximized
      */
     lastNonMaximizedHeight: number
+    /**
+     * Wether thewidget should be highlited or not
+     */
+    highlighted: boolean
   }
 }