Use edit-mode to remove mini-widgets from the MiniWidgetBar

src/assets/defaults.ts

@@ -1,6 +1,16 @@
 import { type MiniWidgetProfile, MiniWidgetType } from '@/types/miniWidgets'
 import { type Profile, WidgetType } from '@/types/widgets'
 
+const defaultManagerVars = {
+  timesMounted: 0,
+  configMenuOpen: false,
+  allowMoving: false,
+  lastNonMaximizedX: 0.4,
+  lastNonMaximizedY: 0.32,
+  lastNonMaximizedWidth: 0.2,
+  lastNonMaximizedHeight: 0.36,
+}
+
 export const defaultGlobalAddress = process.env.NODE_ENV === 'development' ? 'blueos.local' : window.location.hostname
 export const widgetProfiles: { [key: string]: Profile } = {
   'c2bcf04d-048f-496f-9d78-fc4002608028': {
@@ -16,14 +26,7 @@ export const widgetProfiles: { [key: string]: Profile } = {
             component: WidgetType.DepthHUD,
             position: { x: 0.89, y: 0.23 },
             size: { width: 0.09, height: 0.62 },
-            managerVars: {
-              timesMounted: 0,
-              configMenuOpen: false,
-              lastNonMaximizedX: 0.4,
-              lastNonMaximizedY: 0.32,
-              lastNonMaximizedWidth: 0.2,
-              lastNonMaximizedHeight: 0.36,
-            },
+            managerVars: defaultManagerVars,
             options: {
               showDepthValue: true,
               hudColor: '#FFFFFF',
@@ -35,14 +38,7 @@ export const widgetProfiles: { [key: string]: Profile } = {
             component: WidgetType.Attitude,
             position: { x: 0.14, y: 0.2 },
             size: { width: 0.72, height: 0.6 },
-            managerVars: {
-              timesMounted: 0,
-              configMenuOpen: false,
-              lastNonMaximizedX: 0.4,
-              lastNonMaximizedY: 0.32,
-              lastNonMaximizedWidth: 0.2,
-              lastNonMaximizedHeight: 0.36,
-            },
+            managerVars: defaultManagerVars,
             options: {
               showCenterAim: true,
               showPitchLines: true,
@@ -58,14 +54,7 @@ export const widgetProfiles: { [key: string]: Profile } = {
             component: WidgetType.CompassHUD,
             position: { x: 0.15, y: 0.84 },
             size: { width: 0.7, height: 0.065 },
-            managerVars: {
-              timesMounted: 0,
-              configMenuOpen: false,
-              lastNonMaximizedX: 0.4,
-              lastNonMaximizedY: 0.32,
-              lastNonMaximizedWidth: 0.2,
-              lastNonMaximizedHeight: 0.36,
-            },
+            managerVars: defaultManagerVars,
             options: {
               showYawValue: true,
               hudColor: '#FFF',
@@ -77,14 +66,7 @@ export const widgetProfiles: { [key: string]: Profile } = {
             component: WidgetType.VideoPlayer,
             position: { x: 0, y: 0 },
             size: { width: 1, height: 1 },
-            managerVars: {
-              timesMounted: 0,
-              configMenuOpen: false,
-              lastNonMaximizedX: 0.4,
-              lastNonMaximizedY: 0.32,
-              lastNonMaximizedWidth: 0.2,
-              lastNonMaximizedHeight: 0.36,
-            },
+            managerVars: defaultManagerVars,
             options: {
               videoFitStyle: 'cover',
               flipHorizontally: false,
@@ -145,14 +127,7 @@ export const widgetProfiles: { [key: string]: Profile } = {
             component: WidgetType.Map,
             position: { x: 0, y: 0 },
             size: { width: 1, height: 1 },
-            managerVars: {
-              timesMounted: 0,
-              configMenuOpen: false,
-              lastNonMaximizedX: 0.4,
-              lastNonMaximizedY: 0.32,
-              lastNonMaximizedWidth: 0.2,
-              lastNonMaximizedHeight: 0.36,
-            },
+            managerVars: defaultManagerVars,
             options: {},
           },
         ],

src/components/EditMenu.vue

@@ -144,7 +144,8 @@
       <div
         v-for="item in availableMiniWidgetTypes"
         :key="item.hash"
-        class="flex flex-col items-center justify-center p-2 mx-3 rounded-md h-5/6 w-fit text-slate-100"
+        class="flex flex-col items-center justify-center p-2 mx-3 transition-all rounded-md h-5/6 w-fit text-slate-100 cursor-grab"
+        :class="{ 'hover:bg-slate-400': !mousePressed }"
       >
         <div class="m-2 pointer-events-none select-none">
           <MiniWidgetInstantiator :widget-type="item.component" :options="item.options" />
@@ -168,7 +169,7 @@
 </template>
 
 <script setup lang="ts">
-import { useConfirmDialog } from '@vueuse/core'
+import { useConfirmDialog, useMousePressed } from '@vueuse/core'
 import { v4 as uuid } from 'uuid'
 import { computed, onMounted, ref, toRefs, watch } from 'vue'
 import { nextTick } from 'vue'
@@ -260,6 +261,8 @@ enum WidgetMode {
 }
 
 const widgetMode = ref(WidgetMode.RegularWidgets)
+
+const { pressed: mousePressed } = useMousePressed()
 </script>
 
 <style scoped>
@@ -316,4 +319,8 @@ const widgetMode = ref(WidgetMode.RegularWidgets)
   opacity: 0;
   transform: scaleY(0.01) translate(30px, 0);
 }
+
+.sortable-ghost {
+  cursor: grabbing;
+}
 </style>

src/components/MiniWidgetContainer.vue

@@ -10,8 +10,15 @@
       @start="showWidgetTrashArea = true"
       @end="showWidgetTrashArea = false"
       @add="refreshWidgetsHashs"
+      @choose="(event) => emit('chooseMiniWidget', event)"
+      @unchoose="(event) => emit('unchooseMiniWidget', event)"
     >
-      <div v-for="item in container.widgets" :key="item.hash">
+      <div
+        v-for="item in container.widgets"
+        :key="item.hash"
+        class="rounded-md"
+        :class="{ 'cursor-grab': allowEditing, 'hover:bg-slate-400': allowEditing && !mousePressed }"
+      >
         <div :class="{ 'select-none pointer-events-none': allowEditing }">
           <MiniWidgetInstantiator :widget-type="item.component" :options="item.options" />
         </div>
@@ -35,6 +42,7 @@
             animation="150"
             group="generalGroup"
             class="flex flex-wrap items-center justify-center w-full h-full gap-2"
+            @add="trashList = []"
           >
             <div v-for="item in trashList" :key="item.hash">
               <div class="pointer-events-none select-none">
@@ -49,16 +57,21 @@
 </template>
 
 <script setup lang="ts">
+import { useMousePressed } from '@vueuse/core'
 import { v4 as uuid } from 'uuid'
-import { ref, toRefs, watch } from 'vue'
+import { ref, toRefs } from 'vue'
 import { computed } from 'vue'
-import { nextTick } from 'vue'
 import { VueDraggable } from 'vue-draggable-plus'
 
 import type { MiniWidget, MiniWidgetContainer } from '@/types/miniWidgets'
 
 import MiniWidgetInstantiator from './MiniWidgetInstantiator.vue'
 
+const emit = defineEmits<{
+  (e: 'chooseMiniWidget', value: unknown): void
+  (e: 'unchooseMiniWidget', value: unknown): void
+}>()
+
 // eslint-disable-next-line jsdoc/require-jsdoc
 interface Props {
   /**
@@ -101,13 +114,6 @@ const refreshWidgetsHashs = (): void => {
 const showWidgetTrashArea = ref(false)
 
 const trashList = ref<MiniWidget[]>([])
-watch(trashList, () => {
-  nextTick(() => (trashList.value = []))
-})
-</script>
 
-<style>
-.bottom-trans-grad {
-  mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 1) 75%, rgba(0, 0, 0, 0) 100%);
-}
-</style>
+const { pressed: mousePressed } = useMousePressed()
+</script>

src/components/widgets/MiniWidgetsBar.vue

@@ -1,27 +1,19 @@
 <template>
-  <div ref="widgetBar" class="flex flex-col items-center justify-center w-full h-full p-2 rounded-md bg-slate-600/50">
+  <div class="flex flex-col items-center justify-center w-full h-full p-2 rounded-md bg-slate-600/50">
     <MiniWidgetContainer
       :container="widget.options.miniWidgetsContainer"
       :wrap="true"
-      :allow-editing="allowEditing || widgetStore.editingMode"
+      :allow-editing="widgetStore.editingMode"
+      @choose-mini-widget="widget.managerVars.allowMoving = false"
+      @unchoose-mini-widget="widget.managerVars.allowMoving = true"
     />
-    <button
-      v-if="hovering || allowEditing"
-      :class="{ 'text-slate-700': !allowEditing }"
-      class="absolute top-0 right-0 m-1 transition-all text-slate-100"
-      @click="allowEditing = !allowEditing"
-    >
-      <FontAwesomeIcon icon="fa-solid fa-pen" />
-    </button>
   </div>
 </template>
 
 <script setup lang="ts">
-import { useElementHover } from '@vueuse/core'
 import { v4 as uuid } from 'uuid'
 import { toRefs } from 'vue'
 import { onBeforeMount } from 'vue'
-import { ref } from 'vue'
 
 import { useWidgetManagerStore } from '@/stores/widgetManager'
 import type { Widget } from '@/types/widgets'
@@ -37,10 +29,6 @@ const props = defineProps<{
 const widget = toRefs(props).widget
 
 const widgetStore = useWidgetManagerStore()
-const allowEditing = ref(false)
-
-const widgetBar = ref()
-const hovering = useElementHover(widgetBar)
 
 onBeforeMount(() => {
   // Set initial widget options if they don't exist

src/stores/widgetManager.ts

@@ -5,7 +5,7 @@ import { saveAs } from 'file-saver'
 import { defineStore } from 'pinia'
 import Swal from 'sweetalert2'
 import { v4 as uuid4 } from 'uuid'
-import { computed, onBeforeUnmount, ref } from 'vue'
+import { computed, onBeforeUnmount, ref, watch } from 'vue'
 
 import { widgetProfile, widgetProfiles } from '@/assets/defaults'
 import { miniWidgetsProfile } from '@/assets/defaults'
@@ -228,6 +228,7 @@ export const useWidgetManagerStore = defineStore('widget-manager', () => {
       managerVars: {
         timesMounted: 0,
         configMenuOpen: false,
+        allowMoving: true,
         lastNonMaximizedX: 0.4,
         lastNonMaximizedY: 0.32,
         lastNonMaximizedWidth: 0.2,
@@ -292,6 +293,17 @@ export const useWidgetManagerStore = defineStore('widget-manager', () => {
     }
   }
 
+  const resetWidgetsEditingState = (): void => {
+    currentProfile.value.views.forEach((view) => {
+      view.widgets.forEach((widget) => {
+        widget.managerVars.allowMoving = editingMode.value
+      })
+    })
+  }
+
+  watch(editingMode, () => resetWidgetsEditingState())
+  resetWidgetsEditingState()
+
   const isFullScreen = (widget: Widget): boolean => {
     return isEqual(widget.position, fullScreenPosition) && isEqual(widget.size, fullScreenSize)
   }

src/types/widgets.ts

@@ -54,6 +54,10 @@ export type Widget = {
      * If the configuration menu is open or not
      */
     configMenuOpen: boolean
+    /**
+     * If the widget should be allowed to move
+     */
+    allowMoving: boolean
     /**
      * Last widget X position when it wasn't maximized
      */

src/views/WidgetsView.vue

@@ -6,7 +6,7 @@
         <WidgetHugger
           v-if="Object.values(WidgetType).includes(widget.component)"
           :widget="widget"
-          :allow-moving="store.editingMode"
+          :allow-moving="widget.managerVars.allowMoving"
           :allow-resizing="store.editingMode"
         >
           <template v-if="widget.component === WidgetType.Attitude">