Merge pull request #444 from dfpc-coe/locked-

Locked Radial
dfpc-coe · Dec 11, 2024 · 3300c4a · 3300c4a
2 parents c0e4e4c + 3f8d8a4
commit 3300c4a
Show file tree

Hide file tree

Showing 2 changed files with 26 additions and 2 deletions.
diff --git a/api/web/src/components/CloudTAK/Map.vue b/api/web/src/components/CloudTAK/Map.vue
@@ -141,6 +141,7 @@
                     <IconLockAccess
                         v-else-if='!mapStore.radial.cot'
                         role='button'
+                        color='#83b7e8'
                         tabindex='0'
                         title='Map is locked to marker'
                         :size='40'
@@ -567,7 +568,7 @@ const drawMode = ref<string>('static') // Set the terra-draw mode to avoid getMo
 const drawModePoint = ref<string>('u-d-p');
 const pointInput = ref<boolean>(false);
 const feat = ref()        // Show the Feat Viewer sidebar
-const locked = ref([])         // Lock the map view to a given CoT - The last element is the currently locked value
+const locked = ref<Array<string>>([])         // Lock the map view to a given CoT - The last element is the currently locked value
                     //   this is an array so that things like the radial menu can temporarily lock state but remember the previous lock value when they are closed
 const live_loc_denied = ref(false)   // User denied live location services
 const live_loc = ref<Feature | undefined>();
@@ -614,7 +615,6 @@ watch(mapStore.radial, () => {
         mapStore.map.touchZoomRotate.disableRotation();
         mapStore.map.dragRotate.disable();
         mapStore.map.dragPan.disable();
-        // @ts-expect-error Fix Types
         locked.value.push(mapStore.radial.cot.properties ? mapStore.radial.cot.properties.id : mapStore.radial.cot.id);
     } else {
         mapStore.map.scrollZoom.enable();
@@ -864,6 +864,9 @@ async function handleRadial(event: string): Promise<void> {
 
         await cotStore.delete(String(cot.id))
         await updateCOT();
+    } else if (event === 'cot:lock') {
+        locked.value.push(mapStore.radial.cot.properties ? mapStore.radial.cot.properties.id : mapStore.radial.cot.id);
+        closeRadial()
     } else if (event === 'cot:edit') {
         editGeometry(mapStore.radial.cot.properties ? mapStore.radial.cot.properties.id : mapStore.radial.cot.id);
         closeRadial()

diff --git a/api/web/src/components/CloudTAK/RadialMenu/RadialMenu.vue b/api/web/src/components/CloudTAK/RadialMenu/RadialMenu.vue
@@ -13,6 +13,23 @@
         id='icons'
         class='d-none'
     >
+        <symbol
+            id='radial-lock'
+            viewBox='0 0 24 24'
+            fill='none'
+            width='24'
+            height='24'
+            stroke='#fff'
+            stroke-width='2'
+            stroke-linejoin='round'
+            stroke-linecap='round'
+        >
+            <path d='M12.5 21h-5.5a2 2 0 0 1 -2 -2v-6a2 2 0 0 1 2 -2h10c.24 0 .47 .042 .683 .12' />
+            <path d='M11 16a1 1 0 1 0 2 0a1 1 0 0 0 -2 0' />
+            <path d='M8 11v-4a4 4 0 1 1 8 0v4' />
+            <path d='M21.121 20.121a3 3 0 1 0 -4.242 0c.418 .419 1.125 1.045 2.121 1.879c1.051 -.89 1.759 -1.516 2.121 -1.879z' />
+            <path d='M19 18v.01' />
+        </symbol>
         <symbol
             id='radial-question'
             viewBox='0 0 24 24'
@@ -154,6 +171,10 @@ export default {
                     if (cot.origin.mode === OriginMode.CONNECTION) {
                         this.menuItems.push({ id: 'edit', icon: '#radial-pencil' })
                         this.menuItems.push({ id: 'delete', icon: '#radial-trash' })
+
+                        if (cot.geometry.type === 'Point') {
+                            this.menuItems.push({ id: 'lock', icon: '#radial-lock' })
+                        }
                     } else if (cot.origin.mode === OriginMode.MISSION && cot.origin.mode_id) {
                         const sub = cotStore.subscriptions.get(cot.origin.mode_id);