widgets: Get grid snapping back

bluerobotics · Jun 7, 2024 · 1d5a980 · 1d5a980
1 parent 1b77c3d
commit 1d5a980
Show file tree

Hide file tree

Showing 5 changed files with 34 additions and 13 deletions.
diff --git a/src/components/EditMenu.vue b/src/components/EditMenu.vue
@@ -8,7 +8,13 @@
       class="absolute text-2xl transition-all cursor-pointer text-slate-500 aspect-square mdi mdi-close hover:text-slate-300 left-2 top-2"
       @click="emit('update:editMode', false)"
     />
-    <p class="flex items-center justify-center mt-10 text-xl font-semibold select-none">Edit interface</p>
+    <div class="flex items-center justify-center mt-10 text-xl font-semibold select-none">
+      <p>Edit interface</p>
+      <div
+        class="absolute !bg-slate-600 right-2 icon-btn mdi mdi-dots-vertical"
+        @click.stop="editMenuDialogRevealed = true"
+      />
+    </div>
     <div class="w-full h-px my-2 sm bg-slate-800/40" />
     <div class="flex flex-col items-center justify-center w-full px-2 shrink overflow-y-clip h-[35%]">
       <p class="mb-3 text-lg font-semibold select-none">Profiles</p>
@@ -282,6 +288,15 @@
       </v-card>
     </v-dialog>
   </teleport>
+  <teleport to="body">
+    <v-dialog v-model="editMenuDialogRevealed" width="20rem">
+      <v-card class="pa-2">
+        <v-card-text>
+          <v-switch v-model="store.snapToGrid" label="Snap to grid" class="m-2 text-slate-800" />
+        </v-card-text>
+      </v-card>
+    </v-dialog>
+  </teleport>
 </template>
 
 <script setup lang="ts">
@@ -339,6 +354,9 @@ const widgetAddMenuGroupOptions = {
 
 const editMode = toRefs(props).editMode
 
+const editMenuDialogRevealed = ref(false)
+useConfirmDialog(editMenuDialogRevealed)
+
 const viewBeingRenamed = ref(store.currentView)
 const newViewName = ref('')
 const viewRenameDialogRevealed = ref(false)

diff --git a/src/components/SnappingGrid.vue b/src/components/SnappingGrid.vue
@@ -20,22 +20,23 @@ const gridIntervalStyleY = computed(() => `${windowHeight.value * props.gridInte
 
 <style scoped>
 .grid {
+  --grid-color: #b0b0b089;
   position: absolute;
   height: 100%;
   width: 100%;
   background-image: repeating-linear-gradient(
       0deg,
       transparent,
       transparent calc(v-bind('gridIntervalStyleY') - 1px),
-      #88f calc(v-bind('gridIntervalStyleY') - 1px),
-      #88f v-bind('gridIntervalStyleY')
+      var(--grid-color) calc(v-bind('gridIntervalStyleY') - 1px),
+      var(--grid-color) v-bind('gridIntervalStyleY')
     ),
     repeating-linear-gradient(
       -90deg,
       transparent,
       transparent calc(v-bind('gridIntervalStyleX') - 1px),
-      #88f calc(v-bind('gridIntervalStyleX') - 1px),
-      #88f v-bind('gridIntervalStyleX')
+      var(--grid-color) calc(v-bind('gridIntervalStyleX') - 1px),
+      var(--grid-color) v-bind('gridIntervalStyleX')
     );
   background-size: v-bind('gridIntervalStyleX') v-bind('gridIntervalStyleY');
   background-repeat: repeat;

diff --git a/src/components/WidgetHugger.vue b/src/components/WidgetHugger.vue
@@ -262,6 +262,12 @@ const temporaryPosition = computed(() => {
     tempPos.y = 1 - maxBottomEdgePosition - size.value.height
   }
 
+  // Use grid to snap to grid
+  if (widgetStore.snapToGrid) {
+    tempPos.x = Math.round(tempPos.x / widgetStore.gridInterval) * widgetStore.gridInterval
+    tempPos.y = Math.round(tempPos.y / widgetStore.gridInterval) * widgetStore.gridInterval
+  }
+
   return tempPos
 })
 

diff --git a/src/stores/widgetManager.ts b/src/stores/widgetManager.ts
@@ -30,7 +30,7 @@ const savedProfilesKey = 'cockpit-saved-profiles-v8'
 export const useWidgetManagerStore = defineStore('widget-manager', () => {
   const vehicleStore = useMainVehicleStore()
   const editingMode = ref(false)
-  const showGrid = ref(true)
+  const snapToGrid = ref(true)
   const gridInterval = ref(0.01)
   const currentMiniWidgetsProfile = useStorage('cockpit-mini-widgets-profile-v4', miniWidgetsProfile)
   const savedProfiles = useStorage<Profile[]>(savedProfilesKey, [])
@@ -628,7 +628,7 @@ export const useWidgetManagerStore = defineStore('widget-manager', () => {
 
   return {
     editingMode,
-    showGrid,
+    snapToGrid,
     gridInterval,
     currentProfile,
     currentView,

diff --git a/src/views/WidgetsView.vue b/src/views/WidgetsView.vue
@@ -1,7 +1,8 @@
 <template>
-  <SnappingGrid v-if="store.showGrid && store.editingMode" :grid-interval="store.gridInterval" class="snapping-grid" />
   <div class="widgets-view">
     <div v-for="view in store.viewsToShow" :key="view.hash" class="widget-view">
+      <div class="w-full h-full bg-slate-500" />
+      <SnappingGrid v-if="store.snapToGrid && store.editingMode" :grid-interval="store.gridInterval" />
       <template v-for="widget in view.widgets.slice().reverse()" :key="widget.hash">
         <WidgetHugger
           v-if="Object.values(WidgetType).includes(widget.component)"
@@ -12,7 +13,6 @@
           <component :is="componentFromType(widget.component)" :widget="widget" />
         </WidgetHugger>
       </template>
-      <div class="w-full h-full bg-slate-500" />
     </div>
   </div>
 </template>
@@ -49,9 +49,6 @@ const componentFromType = (componentType: WidgetType): AsyncComponentLoader => {
   justify-content: center;
   position: relative;
 }
-.snapping-grid {
-  z-index: 40;
-}
 .widget-view {
   position: absolute;
   width: 100%;
@@ -61,6 +58,5 @@ const componentFromType = (componentType: WidgetType): AsyncComponentLoader => {
   align-items: center;
   justify-content: center;
   background-color: rgb(122, 25, 25);
-  z-index: 50;
 }
 </style>