From c6f319a36f417d49b0d2fda72672819a9a43603c Mon Sep 17 00:00:00 2001
From: Kush Makkapati <kush.makkapati@icloud.com>
Date: Fri, 8 Aug 2025 02:17:21 +0100
Subject: [PATCH 01/10] Start adding fence functionality to missions

---
 .../components/missions/fenceItemsTable.jsx   |  55 +++++++
 .../missions/fenceItemsTableRow.jsx           | 142 ++++++++++++++++++
 gcs/src/components/missions/missionsMap.jsx   |   5 +-
 .../components/missions/rallyItemsTable.jsx   |   8 +-
 gcs/src/helpers/mavlinkConstants.js           |   9 +-
 gcs/src/missions.jsx                          |  24 ++-
 6 files changed, 229 insertions(+), 14 deletions(-)
 create mode 100644 gcs/src/components/missions/fenceItemsTable.jsx
 create mode 100644 gcs/src/components/missions/fenceItemsTableRow.jsx

diff --git a/gcs/src/components/missions/fenceItemsTable.jsx b/gcs/src/components/missions/fenceItemsTable.jsx
new file mode 100644
index 000000000..0037890af
--- /dev/null
+++ b/gcs/src/components/missions/fenceItemsTable.jsx
@@ -0,0 +1,55 @@
+/*
+  This table displays all the fence items.
+*/
+
+import { Table } from "@mantine/core"
+import React from "react"
+import FenceItemsTableRow from "./fenceItemsTableRow"
+
+function FenceItemsTableNonMemo({
+  fenceItems,
+  updateMissionItem,
+  deleteMissionItem,
+  updateMissionItemOrder,
+}) {
+  return (
+    <Table striped withTableBorder withColumnBorders stickyHeader>
+      <Table.Thead>
+        <Table.Tr>
+          <Table.Th></Table.Th>
+          <Table.Th>Command</Table.Th>
+          <Table.Th>Param 1</Table.Th>
+          <Table.Th></Table.Th>
+          <Table.Th></Table.Th>
+          <Table.Th></Table.Th>
+          <Table.Th>Lat</Table.Th>
+          <Table.Th>Lng</Table.Th>
+          <Table.Th></Table.Th>
+          <Table.Th>Frame</Table.Th>
+          <Table.Th></Table.Th>
+        </Table.Tr>
+      </Table.Thead>
+      <Table.Tbody>
+        {fenceItems.map((fenceItem, idx) => {
+          return (
+            <FenceItemsTableRow
+              key={fenceItem.id}
+              index={idx}
+              fenceItem={fenceItem}
+              updateMissionItem={updateMissionItem}
+              deleteMissionItem={deleteMissionItem}
+              updateMissionItemOrder={updateMissionItemOrder}
+            />
+          )
+        })}
+      </Table.Tbody>
+    </Table>
+  )
+}
+
+function propsAreEqual(prev, next) {
+  return JSON.stringify(prev) === JSON.stringify(next)
+}
+const FenceItemsTable = React.memo(FenceItemsTableNonMemo, propsAreEqual)
+
+export default FenceItemsTable
diff --git a/gcs/src/components/missions/fenceItemsTableRow.jsx b/gcs/src/components/missions/fenceItemsTableRow.jsx
new file mode 100644
index 000000000..c1e250370
--- /dev/null
+++ b/gcs/src/components/missions/fenceItemsTableRow.jsx
@@ -0,0 +1,142 @@
+/*
+  This component displays the row for a fence item in a table.
+*/
+
+import {
+  ActionIcon,
+  NumberInput,
+  Select,
+  TableTd,
+  TableTr,
+} from "@mantine/core"
+import { IconArrowDown, IconArrowUp, IconTrash } from "@tabler/icons-react"
+import { useEffect, useState } from "react"
+import { coordToInt, intToCoord } from "../../helpers/dataFormatters"
+import {
+  FENCE_ITEM_COMMANDS_LIST,
+  MAV_FRAME_LIST,
+} from "../../helpers/mavlinkConstants"
+
+const coordsFractionDigits = 9
+
+export default function FenceItemsTableRow({
+  index,
+  fenceItem,
+  updateMissionItem,
+  deleteMissionItem,
+  updateMissionItemOrder,
+}) {
+  const [fenceItemData, setFenceItemData] = useState(fenceItem)
+
+  useEffect(() => {
+    setFenceItemData(fenceItem)
+  }, [fenceItem])
+
+  useEffect(() => {
+    updateMissionItem(fenceItemData)
+  }, [fenceItemData])
+
+  function getDisplayCommandName(commandName) {
+    if (commandName.startsWith("MAV_CMD_NAV_")) {
+      commandName = commandName.replace("MAV_CMD_NAV_", "")
+    } else if (commandName.startsWith("MAV_CMD_")) {
+      commandName = commandName.replace("MAV_CMD_", "")
+    }
+
+    return commandName
+  }
+
+  function getAvailableCommands() {
+    var commandsList = FENCE_ITEM_COMMANDS_LIST
+
+    return Object.entries(commandsList).map(([key, value]) => ({
+      value: key,
+      label: getDisplayCommandName(value),
+    }))
+  }
+
+  function getFrameName(frameId) {
+    var frameName = MAV_FRAME_LIST[frameId]
+
+    if (frameName.startsWith("MAV_FRAME_")) {
+      frameName = frameName.replace("MAV_FRAME_", "")
+    }
+
+    return frameName || "UNKNOWN"
+  }
+
+  function updateFenceItemData(key, newVal) {
+    setFenceItemData({
+      ...fenceItemData,
+      [key]: newVal,
+    })
+  }
+
+  return (
+    <TableTr>
+      <TableTd>{index}</TableTd>
+      <TableTd>
+        <Select
+          data={getAvailableCommands()}
+          value={fenceItemData.command.toString()}
+          onChange={(value) => updateFenceItemData("command", parseInt(value))}
+          allowDeselect={false}
+        />
+      </TableTd>
+      <TableTd>
+        <NumberInput
+          value={fenceItemData.param1}
+          onChange={(val) => updateFenceItemData("param1", val)}
+          hideControls
+        />
+      </TableTd>
+      <TableTd>
+        <NumberInput value={fenceItemData.param2} hideControls disabled />
+      </TableTd>
+      <TableTd>
+        <NumberInput value={fenceItemData.param3} hideControls disabled />
+      </TableTd>
+      <TableTd>
+        <NumberInput value={fenceItemData.param4} hideControls disabled />
+      </TableTd>
+      <TableTd>
+        <NumberInput
+          value={intToCoord(fenceItemData.x).toFixed(coordsFractionDigits)}
+          onChange={(val) => updateFenceItemData("x", coordToInt(val))}
+          hideControls
+        />
+      </TableTd>
+      <TableTd>
+        <NumberInput
+          value={intToCoord(fenceItemData.y).toFixed(coordsFractionDigits)}
+          onChange={(val) => updateFenceItemData("y", coordToInt(val))}
+          hideControls
+        />
+      </TableTd>
+      <TableTd>
+        <NumberInput
+          value={fenceItemData.z}
+          onChange={(val) => updateFenceItemData("z", val)}
+          hideControls
+        />
+      </TableTd>
+      <TableTd>{getFrameName(fenceItemData.frame)}</TableTd>
+      <TableTd className="flex flex-row gap-2">
+        <ActionIcon
+          onClick={() => updateMissionItemOrder(fenceItemData.id, -1)}
+        >
+          <IconArrowUp size={20} />
+        </ActionIcon>
+        <ActionIcon onClick={() => updateMissionItemOrder(fenceItemData.id, 1)}>
+          <IconArrowDown size={20} />
+        </ActionIcon>
+        <ActionIcon
+          onClick={() => deleteMissionItem(fenceItemData.id)}
+          color="red"
+        >
+          <IconTrash size={20} />
+        </ActionIcon>
+      </TableTd>
+    </TableTr>
+  )
+}
diff --git a/gcs/src/components/missions/missionsMap.jsx b/gcs/src/components/missions/missionsMap.jsx
index ba5dc84c6..0fa676991 100644
--- a/gcs/src/components/missions/missionsMap.jsx
+++ b/gcs/src/components/missions/missionsMap.jsx
@@ -233,9 +233,12 @@ function MapSectionNonMemo({
           return (
             <MarkerPin
               key={index}
+              id={item.id}
               lat={intToCoord(item.x)}
               lon={intToCoord(item.y)}
               colour={tailwindColors.blue[400]}
+              draggable={currentTab === "fence"}
+              dragEndCallback={markerDragEndCallback}
             />
           )
         })}
@@ -254,7 +257,7 @@ function MapSectionNonMemo({
               ],
             ]}
             colour={tailwindColors.blue[200]}
-            lineProps={{ "line-dasharray": [2, 2] }}
+            lineProps={{ "line-dasharray": [4, 6] }}
           />
         )}
 
diff --git a/gcs/src/components/missions/rallyItemsTable.jsx b/gcs/src/components/missions/rallyItemsTable.jsx
index dc1ea9820..6666742a7 100644
--- a/gcs/src/components/missions/rallyItemsTable.jsx
+++ b/gcs/src/components/missions/rallyItemsTable.jsx
@@ -16,10 +16,10 @@ function RallyItemsTableNonMemo({
         <Table.Tr>
           <Table.Th></Table.Th>
           <Table.Th>Command</Table.Th>
-          <Table.Th>Param 1</Table.Th>
-          <Table.Th>Param 2</Table.Th>
-          <Table.Th>Param 3</Table.Th>
-          <Table.Th>Param 4</Table.Th>
+          <Table.Th></Table.Th>
+          <Table.Th></Table.Th>
+          <Table.Th></Table.Th>
+          <Table.Th></Table.Th>
           <Table.Th>Lat</Table.Th>
           <Table.Th>Lng</Table.Th>
           <Table.Th>Alt</Table.Th>
diff --git a/gcs/src/helpers/mavlinkConstants.js b/gcs/src/helpers/mavlinkConstants.js
index d26a19843..bf87d7086 100644
--- a/gcs/src/helpers/mavlinkConstants.js
+++ b/gcs/src/helpers/mavlinkConstants.js
@@ -444,12 +444,11 @@ export const COPTER_MISSION_ITEM_COMMANDS_LIST = {
   526: "MAV_CMD_STORAGE_FORMAT",
 }
 
-// TODO: implement
 export const FENCE_ITEM_COMMANDS_LIST = {
-  // 5001: "MAV_CMD_NAV_FENCE_POLYGON_VERTEX_INCLUSION",
-  // 5002: "MAV_CMD_NAV_FENCE_POLYGON_VERTEX_EXCLUSION",
-  // 5003: 'MAV_CMD_NAV_FENCE_CIRCLE_INCLUSION',
-  // 5004: 'MAV_CMD_NAV_FENCE_CIRCLE_EXCLUSION',
+  5001: "MAV_CMD_NAV_FENCE_POLYGON_VERTEX_INCLUSION",
+  5002: "MAV_CMD_NAV_FENCE_POLYGON_VERTEX_EXCLUSION",
+  5003: "MAV_CMD_NAV_FENCE_CIRCLE_INCLUSION",
+  5004: "MAV_CMD_NAV_FENCE_CIRCLE_EXCLUSION",
 }
 
 export const MAV_FRAME_LIST = {
diff --git a/gcs/src/missions.jsx b/gcs/src/missions.jsx
index fd0b1181f..aca2503ff 100644
--- a/gcs/src/missions.jsx
+++ b/gcs/src/missions.jsx
@@ -26,6 +26,7 @@ import {
 } from "@mantine/core"
 import { IconInfoCircle } from "@tabler/icons-react"
 import Layout from "./components/layout"
+import FenceItemsTable from "./components/missions/fenceItemsTable"
 import MissionItemsTable from "./components/missions/missionItemsTable"
 import MissionsMapSection from "./components/missions/missionsMap"
 import RallyItemsTable from "./components/missions/rallyItemsTable"
@@ -162,7 +163,11 @@ export default function Missions() {
         updateHomePositionBasedOnWaypoints(missionItemsWithIds)
         setMissionItems(missionItemsWithIds)
       } else if (data.mission_type === "fence") {
-        setFenceItems(data.items)
+        const fenceItemsWithIds = []
+        for (let fence of data.items) {
+          fenceItemsWithIds.push(addIdToItem(fence))
+        }
+        setFenceItems(fenceItemsWithIds)
       } else if (data.mission_type === "rally") {
         const rallyItemsWithIds = []
         for (let rallyItem of data.items) {
@@ -196,7 +201,11 @@ export default function Missions() {
 
           setMissionItems(missionItemsWithIds)
         } else if (data.mission_type === "fence") {
-          setFenceItems(data.items)
+          const fenceItemsWithIds = []
+          for (let fence of data.items) {
+            fenceItemsWithIds.push(addIdToItem(fence))
+          }
+          setFenceItems(fenceItemsWithIds)
         } else if (data.mission_type === "rally") {
           const rallyItemsWithIds = []
           for (let rallyItem of data.items) {
@@ -325,7 +334,7 @@ export default function Missions() {
       setMissionItems((prevItems) => [...prevItems, newMissionItem])
     } else if (activeTab === "fence") {
       newMissionItem.seq = fenceItems.length
-      newMissionItem.command = 5100 // MAV_CMD_NAV_FENCE_POINT
+      newMissionItem.command = 5004 // MAV_CMD_NAV_FENCE_CIRCLE_EXCLUSION
       newMissionItem.mission_type = 1 // Fence type
 
       setFenceItems((prevItems) => [...prevItems, newMissionItem])
@@ -777,7 +786,14 @@ export default function Missions() {
                       updateMissionItemOrder={updateMissionItemOrder}
                     />
                   </Tabs.Panel>
-                  <Tabs.Panel value="fence"></Tabs.Panel>
+                  <Tabs.Panel value="fence">
+                    <FenceItemsTable
+                      fenceItems={fenceItems}
+                      updateMissionItem={updateMissionItem}
+                      deleteMissionItem={deleteMissionItem}
+                      updateMissionItemOrder={updateMissionItemOrder}
+                    />
+                  </Tabs.Panel>
                   <Tabs.Panel value="rally">
                     <RallyItemsTable
                       rallyItems={rallyItems}

From e944b5ef775eab8084ec177001b4258a41eab012 Mon Sep 17 00:00:00 2001
From: Kush Makkapati <kush.makkapati@icloud.com>
Date: Fri, 8 Aug 2025 16:34:26 +0100
Subject: [PATCH 02/10] Add circle fence marker display

---
 .../components/mapComponents/fenceItems.jsx   | 155 ++++++++++++++++++
 gcs/src/components/missions/missionsMap.jsx   |  39 +----
 gcs/src/missions.jsx                          |  27 ++-
 3 files changed, 183 insertions(+), 38 deletions(-)
 create mode 100644 gcs/src/components/mapComponents/fenceItems.jsx

diff --git a/gcs/src/components/mapComponents/fenceItems.jsx b/gcs/src/components/mapComponents/fenceItems.jsx
new file mode 100644
index 000000000..b17a5f2cd
--- /dev/null
+++ b/gcs/src/components/mapComponents/fenceItems.jsx
@@ -0,0 +1,155 @@
+/*
+  The FenceItems component returns the markers and lines connecting the
+  markers together on the map to display. It also filters out any
+  items which should not be displayed on the map as markers or not have lines
+  connecting them. It properly parses the type of fence marker.
+*/
+
+import { useEffect, useState } from "react"
+
+// Helper imports
+import { intToCoord } from "../../helpers/dataFormatters"
+
+// Styling imports
+import "maplibre-gl/dist/maplibre-gl.css"
+
+// Component imports
+
+// Tailing styling
+import { circle } from "@turf/turf"
+import { Layer, Source } from "react-map-gl"
+import resolveConfig from "tailwindcss/resolveConfig"
+import tailwindConfig from "../../../tailwind.config"
+import { FENCE_ITEM_COMMANDS_LIST } from "../../helpers/mavlinkConstants"
+import DrawLineCoordinates from "./drawLineCoordinates"
+import MarkerPin from "./markerPin"
+const tailwindColors = resolveConfig(tailwindConfig).theme.colors
+
+export default function FenceItems({
+  fenceItems,
+  editable = false,
+  dragEndCallback = () => {},
+}) {
+  const [fencePolygonItems, setFencePolygonItems] = useState([])
+  const [fenceCircleItems, setFenceCircleItems] = useState([])
+
+  useEffect(() => {
+    function getFenceCommandNumber(value) {
+      return parseInt(
+        Object.keys(FENCE_ITEM_COMMANDS_LIST).filter(
+          (key) => FENCE_ITEM_COMMANDS_LIST[key] === value,
+        ),
+      )
+    }
+
+    // Filter out fence items based on their type
+    const polygonCommands = [
+      getFenceCommandNumber("MAV_CMD_NAV_FENCE_POLYGON_VERTEX_INCLUSION"),
+      getFenceCommandNumber("MAV_CMD_NAV_FENCE_POLYGON_VERTEX_EXCLUSION"),
+    ]
+    const circleCommands = [
+      getFenceCommandNumber("MAV_CMD_NAV_FENCE_CIRCLE_INCLUSION"),
+      getFenceCommandNumber("MAV_CMD_NAV_FENCE_CIRCLE_EXCLUSION"),
+    ]
+
+    const polygonItems = fenceItems.filter((item) =>
+      polygonCommands.includes(item.command),
+    )
+    const circleItems = fenceItems.filter((item) =>
+      circleCommands.includes(item.command),
+    )
+
+    setFencePolygonItems(polygonItems)
+    setFenceCircleItems(circleItems)
+  }, [fenceItems])
+
+  return (
+    <>
+      {/* Show mission geo-fence MARKERS */}
+      {fencePolygonItems.map((item, index) => {
+        return (
+          <MarkerPin
+            key={index}
+            id={item.id}
+            lat={intToCoord(item.x)}
+            lon={intToCoord(item.y)}
+            colour={tailwindColors.blue[400]}
+            draggable={editable}
+            dragEndCallback={dragEndCallback}
+          />
+        )
+      })}
+
+      {/* Show geo-fence outlines */}
+      {fencePolygonItems.length > 0 && (
+        <DrawLineCoordinates
+          coordinates={[
+            ...fencePolygonItems.map((item) => [
+              intToCoord(item.y),
+              intToCoord(item.x),
+            ]),
+            [
+              intToCoord(fencePolygonItems[0].y),
+              intToCoord(fencePolygonItems[0].x),
+            ],
+          ]}
+          colour={tailwindColors.blue[200]}
+          lineProps={{ "line-dasharray": [4, 6] }}
+        />
+      )}
+
+      {fenceCircleItems.map((item, index) => {
+        return (
+          <MarkerPin
+            key={index}
+            id={item.id}
+            lat={intToCoord(item.x)}
+            lon={intToCoord(item.y)}
+            colour={tailwindColors.blue[400]}
+            draggable={editable}
+            dragEndCallback={dragEndCallback}
+          />
+        )
+      })}
+
+      <Source
+        id="circle-source"
+        type="geojson"
+        data={{
+          type: "FeatureCollection",
+          features: fenceCircleItems.map((item) =>
+            circle([intToCoord(item.y), intToCoord(item.x)], item.param1, {
+              steps: 64, // Number of points to create the circle
+              units: "meters", // Units for the radius
+              properties: {
+                color:
+                  item.command === 5004
+                    ? tailwindColors.red[500]
+                    : tailwindColors.blue[200],
+                fillOpacity: item.command === 5004 ? 0.2 : 0, // No fill if inclusion
+              },
+            }),
+          ),
+        }}
+      >
+        <Layer
+          id="circle-fill-layer"
+          type="fill"
+          paint={{
+            "fill-color": ["get", "color"],
+            "fill-opacity": ["get", "fillOpacity"],
+          }}
+        />
+        <Layer
+          id="circle-border-layer"
+          type="line"
+          paint={{
+            "line-color": ["get", "color"],
+            "line-width": 2,
+            "line-dasharray": [2, 2],
+          }}
+        />
+      </Source>
+    </>
+  )
+}
diff --git a/gcs/src/components/missions/missionsMap.jsx b/gcs/src/components/missions/missionsMap.jsx
index 0fa676991..9b3e9229c 100644
--- a/gcs/src/components/missions/missionsMap.jsx
+++ b/gcs/src/components/missions/missionsMap.jsx
@@ -27,7 +27,6 @@ import { useSettings } from "../../helpers/settings"
 
 // Other dashboard imports
 import ContextMenuItem from "../mapComponents/contextMenuItem"
-import DrawLineCoordinates from "../mapComponents/drawLineCoordinates"
 import DroneMarker from "../mapComponents/droneMarker"
 import HomeMarker from "../mapComponents/homeMarker"
 import MarkerPin from "../mapComponents/markerPin"
@@ -37,6 +36,7 @@ import useContextMenu from "../mapComponents/useContextMenu"
 // Tailwind styling
 import resolveConfig from "tailwindcss/resolveConfig"
 import tailwindConfig from "../../../tailwind.config"
+import FenceItems from "../mapComponents/fenceItems"
 const tailwindColors = resolveConfig(tailwindConfig).theme.colors
 
 const coordsFractionDigits = 7
@@ -228,38 +228,11 @@ function MapSectionNonMemo({
           dragEndCallback={markerDragEndCallback}
         />
 
-        {/* Show mission geo-fence MARKERS */}
-        {missionItems.fence_items.map((item, index) => {
-          return (
-            <MarkerPin
-              key={index}
-              id={item.id}
-              lat={intToCoord(item.x)}
-              lon={intToCoord(item.y)}
-              colour={tailwindColors.blue[400]}
-              draggable={currentTab === "fence"}
-              dragEndCallback={markerDragEndCallback}
-            />
-          )
-        })}
-
-        {/* Show geo-fence outlines */}
-        {missionItems.fence_items.length > 0 && (
-          <DrawLineCoordinates
-            coordinates={[
-              ...missionItems.fence_items.map((item) => [
-                intToCoord(item.y),
-                intToCoord(item.x),
-              ]),
-              [
-                intToCoord(missionItems.fence_items[0].y),
-                intToCoord(missionItems.fence_items[0].x),
-              ],
-            ]}
-            colour={tailwindColors.blue[200]}
-            lineProps={{ "line-dasharray": [4, 6] }}
-          />
-        )}
+        <FenceItems
+          fenceItems={missionItems.fence_items}
+          editable={currentTab === "fence"}
+          dragEndCallback={markerDragEndCallback}
+        />
 
         {/* Show mission rally point */}
         {missionItems.rally_items.map((item, index) => {
diff --git a/gcs/src/missions.jsx b/gcs/src/missions.jsx
index aca2503ff..7fdb09610 100644
--- a/gcs/src/missions.jsx
+++ b/gcs/src/missions.jsx
@@ -314,7 +314,7 @@ export default function Missions() {
         ),
       ),
       command: null,
-      param1: 0,
+      param1: activeTab === "fence" ? 5 : 0,
       param2: 0,
       param3: 0,
       param4: 0,
@@ -399,7 +399,7 @@ export default function Missions() {
     if (activeTab === "mission") {
       setMissionItems((prevItems) => getUpdatedItems(prevItems))
     } else if (activeTab === "fence") {
-      // TODO: Implement fence item update logic
+      setFenceItems((prevItems) => getUpdatedItems(prevItems))
     } else if (activeTab === "rally") {
       setRallyItems((prevItems) => getUpdatedItems(prevItems))
     }
@@ -418,14 +418,14 @@ export default function Missions() {
     if (activeTab === "mission") {
       setMissionItems((prevItems) => getUpdatedItems(prevItems))
     } else if (activeTab === "fence") {
-      // TODO: Implement fence item deletion logic
+      setFenceItems((prevItems) => getUpdatedItems(prevItems))
     } else if (activeTab === "rally") {
       setRallyItems((prevItems) => getUpdatedItems(prevItems))
     }
   }
 
   function updateMissionItemOrder(missionItemId, indexIncrement) {
-    setMissionItems((prevItems) => {
+    function updateItemOrder(prevItems) {
       const currentIndex = prevItems.findIndex(
         (item) => item.id === missionItemId,
       )
@@ -455,7 +455,13 @@ export default function Missions() {
       updatedItems[newIndex].seq = newIndex
 
       return updatedItems
-    })
+    }
+
+    if (activeTab === "mission") {
+      setMissionItems((prevItems) => updateItemOrder(prevItems))
+    } else if (activeTab === "fence") {
+      setFenceItems((prevItems) => updateItemOrder(prevItems))
+    }
   }
 
   function readMissionFromDrone() {
@@ -510,6 +516,17 @@ export default function Missions() {
         items = [...missionItems]
       } else if (activeTab === "fence") {
         items = [...fenceItems]
+
+        const newHomeItem = createHomePositionItem()
+        if (newHomeItem) {
+          items.unshift(newHomeItem) // Add home item at the beginning
+        }
+
+        // Ensure all sequence values are updated
+        items = items.map((item, index) => ({
+          ...item,
+          seq: index,
+        }))
       } else if (activeTab === "rally") {
         items = [...rallyItems]
 

From 414fd1303d4c2a5bf0343c699bde63ad48de816c Mon Sep 17 00:00:00 2001
From: Kush Makkapati <kush.makkapati@icloud.com>
Date: Fri, 8 Aug 2025 22:16:46 +0100
Subject: [PATCH 03/10] Add context menu dropdown item

---
 .../mapComponents/contextMenuItem.jsx         |  2 +-
 .../mapComponents/contextMenuSubMenuItem.jsx  | 54 +++++++++++++++
 gcs/src/components/missions/missionsMap.jsx   | 68 ++++++++++++-------
 gcs/src/missions.jsx                          |  4 ++
 4 files changed, 102 insertions(+), 26 deletions(-)
 create mode 100644 gcs/src/components/mapComponents/contextMenuSubMenuItem.jsx

diff --git a/gcs/src/components/mapComponents/contextMenuItem.jsx b/gcs/src/components/mapComponents/contextMenuItem.jsx
index 970d8c1b3..03fa547ac 100644
--- a/gcs/src/components/mapComponents/contextMenuItem.jsx
+++ b/gcs/src/components/mapComponents/contextMenuItem.jsx
@@ -4,7 +4,7 @@ export default function ContextMenuItem({ children, onClick }) {
       className="hover:bg-falcongrey-800 hover:cursor-pointer py-1 px-4 rounded"
       onClick={onClick}
     >
-      {children}
+      <div className="w-full flex justify-between gap-2">{children}</div>
     </div>
   )
 }
diff --git a/gcs/src/components/mapComponents/contextMenuSubMenuItem.jsx b/gcs/src/components/mapComponents/contextMenuSubMenuItem.jsx
new file mode 100644
index 000000000..5f29e2eca
--- /dev/null
+++ b/gcs/src/components/mapComponents/contextMenuSubMenuItem.jsx
@@ -0,0 +1,54 @@
+import { useEffect, useRef, useState } from "react"
+
+export default function ContextMenuSubMenuItem({ children, title }) {
+  const [isHovered, setIsHovered] = useState(false)
+  const [submenuPosition, setSubmenuPosition] = useState({ top: 0, left: 0 })
+  const parentRef = useRef(null)
+  const subMenuRef = useRef(null)
+
+  useEffect(() => {
+    if (isHovered && parentRef.current && subMenuRef.current) {
+      const parentRect = parentRef.current.getBoundingClientRect()
+      const submenuRect = subMenuRef.current.getBoundingClientRect()
+      const viewportWidth = window.innerWidth
+
+      // Calculate whether to position the submenu to the right or left
+      const shouldAppearToLeft =
+        parentRect.right + submenuRect.width > viewportWidth
+
+      setSubmenuPosition({
+        top: parentRect.top,
+        left: shouldAppearToLeft
+          ? parentRect.left - submenuRect.width
+          : parentRect.right,
+      })
+    }
+  }, [isHovered])
+
+  return (
+    <div
+      ref={parentRef}
+      className="hover:bg-falcongrey-800 hover:cursor-pointer py-1 px-4 rounded"
+      onMouseOver={() => setIsHovered(true)}
+      onMouseOut={() => setIsHovered(false)}
+    >
+      <div className="w-full flex justify-between items-center gap-2">
+        <p>{title}</p>
+        <span className="text-gray-400">▶</span>
+      </div>
+      {isHovered && (
+        <div
+          ref={subMenuRef}
+          className="absolute top-0 left-full bg-falcongrey-700  rounded p-1"
+          style={{
+            top: `${submenuPosition.top}px`,
+            left: `${submenuPosition.left}px`,
+            position: "fixed", // Use fixed to align with the viewport
+          }}
+        >
+          {children}
+        </div>
+      )}
+    </div>
+  )
+}
diff --git a/gcs/src/components/missions/missionsMap.jsx b/gcs/src/components/missions/missionsMap.jsx
index 9b3e9229c..62a27f5d4 100644
--- a/gcs/src/components/missions/missionsMap.jsx
+++ b/gcs/src/components/missions/missionsMap.jsx
@@ -27,16 +27,18 @@ import { useSettings } from "../../helpers/settings"
 
 // Other dashboard imports
 import ContextMenuItem from "../mapComponents/contextMenuItem"
+import ContextMenuSubMenuItem from "../mapComponents/contextMenuSubMenuItem"
 import DroneMarker from "../mapComponents/droneMarker"
+import FenceItems from "../mapComponents/fenceItems"
 import HomeMarker from "../mapComponents/homeMarker"
 import MarkerPin from "../mapComponents/markerPin"
 import MissionItems from "../mapComponents/missionItems"
 import useContextMenu from "../mapComponents/useContextMenu"
+import Divider from "../toolbar/menus/divider"
 
 // Tailwind styling
 import resolveConfig from "tailwindcss/resolveConfig"
 import tailwindConfig from "../../../tailwind.config"
-import FenceItems from "../mapComponents/fenceItems"
 const tailwindColors = resolveConfig(tailwindConfig).theme.colors
 
 const coordsFractionDigits = 7
@@ -200,6 +202,9 @@ function MapSectionNonMemo({
             },
           })
         }}
+        onMouseDown={(e) => {
+          setClicked(false)
+        }}
         onClick={(e) => {
           setClicked(false)
           let lat = e.lngLat.lat
@@ -293,24 +298,22 @@ function MapSectionNonMemo({
                 showNotification("Copied to clipboard")
               }}
             >
-              <div className="w-full flex justify-between gap-2">
-                <p>
-                  {clickedGpsCoords.lat.toFixed(coordsFractionDigits)},{" "}
-                  {clickedGpsCoords.lng.toFixed(coordsFractionDigits)}
-                </p>
-                <svg
-                  className="relative -right-1"
-                  xmlns="http://www.w3.org/2000/svg"
-                  width="20"
-                  height="20"
-                  viewBox="0 0 24 24"
-                >
-                  <path
-                    fill="currentColor"
-                    d="M9 18q-.825 0-1.412-.587T7 16V4q0-.825.588-1.412T9 2h9q.825 0 1.413.588T20 4v12q0 .825-.587 1.413T18 18zm0-2h9V4H9zm-4 6q-.825 0-1.412-.587T3 20V7q0-.425.288-.712T4 6t.713.288T5 7v13h10q.425 0 .713.288T16 21t-.288.713T15 22zm4-6V4z"
-                  />
-                </svg>
-              </div>
+              <p>
+                {clickedGpsCoords.lat.toFixed(coordsFractionDigits)},{" "}
+                {clickedGpsCoords.lng.toFixed(coordsFractionDigits)}
+              </p>
+              <svg
+                className="relative -right-1"
+                xmlns="http://www.w3.org/2000/svg"
+                width="20"
+                height="20"
+                viewBox="0 0 24 24"
+              >
+                <path
+                  fill="currentColor"
+                  d="M9 18q-.825 0-1.412-.587T7 16V4q0-.825.588-1.412T9 2h9q.825 0 1.413.588T20 4v12q0 .825-.587 1.413T18 18zm0-2h9V4H9zm-4 6q-.825 0-1.412-.587T3 20V7q0-.425.288-.712T4 6t.713.288T5 7v13h10q.425 0 .713.288T16 21t-.288.713T15 22zm4-6V4z"
+                />
+              </svg>
             </ContextMenuItem>
             <ContextMenuItem
               onClick={() => {
@@ -320,15 +323,30 @@ function MapSectionNonMemo({
                 )
               }}
             >
-              <div className="w-full flex justify-between gap-2">
-                <p>Set home position</p>
-              </div>
+              <p>Set home position</p>
             </ContextMenuItem>
             <ContextMenuItem onClick={clearMissionItems}>
-              <div className="w-full flex justify-between gap-2">
-                <p>Clear mission</p>
-              </div>
+              <p>Clear mission</p>
             </ContextMenuItem>
+            <Divider />
+            <ContextMenuSubMenuItem title={"Polygon"}>
+              <ContextMenuItem>
+                <p>Draw polygon</p>
+              </ContextMenuItem>
+              <ContextMenuItem>
+                <p>Clear polygon</p>
+              </ContextMenuItem>
+              {currentTab === "fence" && (
+                <>
+                  <ContextMenuItem>
+                    <p>Fence inclusion</p>
+                  </ContextMenuItem>
+                  <ContextMenuItem>
+                    <p>Fence exclusion</p>
+                  </ContextMenuItem>
+                </>
+              )}
+            </ContextMenuSubMenuItem>
           </div>
         )}
       </Map>
diff --git a/gcs/src/missions.jsx b/gcs/src/missions.jsx
index 7fdb09610..3a1b1a399 100644
--- a/gcs/src/missions.jsx
+++ b/gcs/src/missions.jsx
@@ -118,6 +118,10 @@ export default function Missions() {
     [],
   )
 
+  useEffect(() => {
+    setActiveTab("mission") // Default to mission tab on load
+  }, [])
+
   useEffect(() => {
     if (!connected) {
       return

From d6f58967ccce2965a667b1f7e2d374aa13a2ae14 Mon Sep 17 00:00:00 2001
From: Kush Makkapati <kush.makkapati@icloud.com>
Date: Sat, 9 Aug 2025 03:07:54 +0100
Subject: [PATCH 04/10] Start adding polygon drawing functionality

---
 gcs/src/components/mapComponents/polygon.jsx | 54 ++++++++++++++++++++
 gcs/src/components/missions/missionsMap.jsx  | 42 +++++++++++++--
 gcs/src/missions.jsx                         | 16 +++---
 3 files changed, 99 insertions(+), 13 deletions(-)
 create mode 100644 gcs/src/components/mapComponents/polygon.jsx

diff --git a/gcs/src/components/mapComponents/polygon.jsx b/gcs/src/components/mapComponents/polygon.jsx
new file mode 100644
index 000000000..2e909a329
--- /dev/null
+++ b/gcs/src/components/mapComponents/polygon.jsx
@@ -0,0 +1,54 @@
+/*
+  The PolygonItems component returns the markers and lines connecting the
+  polygon together on the map to display.
+*/
+
+// Helper imports
+
+// Styling imports
+import "maplibre-gl/dist/maplibre-gl.css"
+
+// Component imports
+import DrawLineCoordinates from "./drawLineCoordinates"
+import MarkerPin from "./markerPin"
+
+// Tailing styling
+import resolveConfig from "tailwindcss/resolveConfig"
+import tailwindConfig from "../../../tailwind.config"
+const tailwindColors = resolveConfig(tailwindConfig).theme.colors
+
+export default function Polygon({
+  polygonPoints,
+  editable = false,
+  dragEndCallback = () => {},
+}) {
+  return (
+    <>
+      {/* Show polygon MARKERS */}
+      {polygonPoints.map((item, index) => {
+        return (
+          <MarkerPin
+            key={index}
+            id={item.id}
+            lat={item.lat}
+            lon={item.lon}
+            colour={tailwindColors.red[400]}
+            draggable={editable}
+            dragEndCallback={dragEndCallback}
+          />
+        )
+      })}
+
+      {/* Show polygon outlines */}
+      {polygonPoints.length > 0 && (
+        <DrawLineCoordinates
+          coordinates={[
+            ...polygonPoints.map((item) => [item.lat, item.lon]),
+            [polygonPoints[0].lat, polygonPoints[0].lon],
+          ]}
+          colour={tailwindColors.red[200]}
+        />
+      )}
+    </>
+  )
+}
diff --git a/gcs/src/components/missions/missionsMap.jsx b/gcs/src/components/missions/missionsMap.jsx
index 62a27f5d4..658c3a986 100644
--- a/gcs/src/components/missions/missionsMap.jsx
+++ b/gcs/src/components/missions/missionsMap.jsx
@@ -20,6 +20,7 @@ import "maplibre-gl/dist/maplibre-gl.css"
 import Map from "react-map-gl/maplibre"
 
 // Helper scripts
+import { v4 as uuidv4 } from "uuid"
 import { intToCoord } from "../../helpers/dataFormatters"
 import { filterMissionItems } from "../../helpers/filterMissions"
 import { showNotification } from "../../helpers/notification"
@@ -33,6 +34,7 @@ import FenceItems from "../mapComponents/fenceItems"
 import HomeMarker from "../mapComponents/homeMarker"
 import MarkerPin from "../mapComponents/markerPin"
 import MissionItems from "../mapComponents/missionItems"
+import Polygon from "../mapComponents/polygon"
 import useContextMenu from "../mapComponents/useContextMenu"
 import Divider from "../toolbar/menus/divider"
 
@@ -101,6 +103,9 @@ function MapSectionNonMemo({
 
   const clipboard = useClipboard({ timeout: 500 })
 
+  const [polygonDrawMode, setPolygonDrawMode] = useState(false)
+  const [polygonPoints, setPolygonPoints] = useState([])
+
   useEffect(() => {
     return () => {}
   }, [connected])
@@ -173,6 +178,16 @@ function MapSectionNonMemo({
     }
   }, [homePosition])
 
+  function addNewPolygonVertex(lat, lon) {
+    if (!polygonDrawMode) return
+
+    // Add new point to polygon points
+    setPolygonPoints((prevPoints) => [
+      ...prevPoints,
+      { id: uuidv4(), lat: lat, lon: lon },
+    ])
+  }
+
   return (
     <div className="w-initial h-full" id="map">
       <Map
@@ -202,14 +217,19 @@ function MapSectionNonMemo({
             },
           })
         }}
-        onMouseDown={(e) => {
+        onMouseDown={() => {
           setClicked(false)
         }}
         onClick={(e) => {
           setClicked(false)
           let lat = e.lngLat.lat
           let lon = e.lngLat.lng
-          addNewMissionItem(lat, lon)
+
+          if (polygonDrawMode) {
+            addNewPolygonVertex(lat, lon)
+          } else {
+            addNewMissionItem(lat, lon)
+          }
         }}
         cursor="default"
       >
@@ -227,6 +247,12 @@ function MapSectionNonMemo({
             />
           )}
 
+        <Polygon
+          polygonPoints={polygonPoints}
+          editable={polygonDrawMode}
+          dragEndCallback={() => {}}
+        />
+
         <MissionItems
           missionItems={missionItemsList}
           editable={currentTab === "mission"}
@@ -330,10 +356,18 @@ function MapSectionNonMemo({
             </ContextMenuItem>
             <Divider />
             <ContextMenuSubMenuItem title={"Polygon"}>
-              <ContextMenuItem>
+              <ContextMenuItem
+                onClick={() => {
+                  setPolygonDrawMode(true)
+                }}
+              >
                 <p>Draw polygon</p>
               </ContextMenuItem>
-              <ContextMenuItem>
+              <ContextMenuItem
+                onClick={() => {
+                  setPolygonDrawMode(true)
+                }}
+              >
                 <p>Clear polygon</p>
               </ContextMenuItem>
               {currentTab === "fence" && (
diff --git a/gcs/src/missions.jsx b/gcs/src/missions.jsx
index 3a1b1a399..25a270def 100644
--- a/gcs/src/missions.jsx
+++ b/gcs/src/missions.jsx
@@ -58,7 +58,7 @@ export default function Missions() {
 
   const [activeTab, setActiveTab] = useState("mission")
 
-  // Mission
+  // Mission data
   const [missionItems, setMissionItems] = useSessionStorage({
     key: "missionItems",
     defaultValue: [],
@@ -79,11 +79,12 @@ export default function Missions() {
     key: "targetInfo",
     defaultValue: { target_component: 0, target_system: 255 },
   })
+
+  // File import handling
   const [importFile, setImportFile] = useState(null)
   const importFileResetRef = useRef(null)
 
-  const newMissionItemAltitude = 30 // TODO: Make this configurable
-
+  // Modal for mission progress
   const [
     missionProgressModalOpened,
     { open: openMissionProgressModal, close: closeMissionProgressModal },
@@ -93,17 +94,14 @@ export default function Missions() {
   )
   const [missionProgressModalData, setMissionProgressModalData] = useState({})
 
-  // Heartbeat data
+  // Drone data
   const [heartbeatData, setHeartbeatData] = useState({ system_status: 0 })
-
-  // GPS and Telemetry
   const [gpsData, setGpsData] = useState({})
+  const [navControllerOutputData, setNavControllerOutputData] = useState({})
 
-  // Map and messages
   const mapRef = useRef()
 
-  // System data
-  const [navControllerOutputData, setNavControllerOutputData] = useState({})
+  const newMissionItemAltitude = 30 // TODO: Make this configurable
 
   const incomingMessageHandler = useCallback(
     () => ({

From 14e49e674a18bbd18873412a873392a692406597 Mon Sep 17 00:00:00 2001
From: Kush Makkapati <kush.makkapati@icloud.com>
Date: Sat, 9 Aug 2025 14:06:49 +0100
Subject: [PATCH 05/10] Add polygon update function

---
 gcs/src/components/mapComponents/polygon.jsx |  4 ++--
 gcs/src/components/missions/missionsMap.jsx  | 19 +++++++++++++++++--
 2 files changed, 19 insertions(+), 4 deletions(-)

diff --git a/gcs/src/components/mapComponents/polygon.jsx b/gcs/src/components/mapComponents/polygon.jsx
index 2e909a329..d4f87302f 100644
--- a/gcs/src/components/mapComponents/polygon.jsx
+++ b/gcs/src/components/mapComponents/polygon.jsx
@@ -43,8 +43,8 @@ export default function Polygon({
       {polygonPoints.length > 0 && (
         <DrawLineCoordinates
           coordinates={[
-            ...polygonPoints.map((item) => [item.lat, item.lon]),
-            [polygonPoints[0].lat, polygonPoints[0].lon],
+            ...polygonPoints.map((item) => [item.lon, item.lat]),
+            [polygonPoints[0].lon, polygonPoints[0].lat],
           ]}
           colour={tailwindColors.red[200]}
         />
diff --git a/gcs/src/components/missions/missionsMap.jsx b/gcs/src/components/missions/missionsMap.jsx
index 658c3a986..b087bd8ea 100644
--- a/gcs/src/components/missions/missionsMap.jsx
+++ b/gcs/src/components/missions/missionsMap.jsx
@@ -188,6 +188,20 @@ function MapSectionNonMemo({
     ])
   }
 
+  function updatePolygonVertex(updatedPolygonVertex) {
+    setPolygonPoints((prevPoints) =>
+      prevPoints.map((item) =>
+        item.id === updatedPolygonVertex.id
+          ? {
+              ...item,
+              lat: intToCoord(updatedPolygonVertex.x),
+              lon: intToCoord(updatedPolygonVertex.y),
+            }
+          : item,
+      ),
+    )
+  }
+
   return (
     <div className="w-initial h-full" id="map">
       <Map
@@ -250,7 +264,7 @@ function MapSectionNonMemo({
         <Polygon
           polygonPoints={polygonPoints}
           editable={polygonDrawMode}
-          dragEndCallback={() => {}}
+          dragEndCallback={updatePolygonVertex}
         />
 
         <MissionItems
@@ -365,7 +379,8 @@ function MapSectionNonMemo({
               </ContextMenuItem>
               <ContextMenuItem
                 onClick={() => {
-                  setPolygonDrawMode(true)
+                  setPolygonPoints([])
+                  setPolygonDrawMode(false)
                 }}
               >
                 <p>Clear polygon</p>

From 39b448f47cec5a4a7486737d7cb2ea0771ac8c14 Mon Sep 17 00:00:00 2001
From: Kush Makkapati <kush.makkapati@icloud.com>
Date: Sat, 9 Aug 2025 14:10:57 +0100
Subject: [PATCH 06/10] Style mission tabs to match marker pin colours

---
 gcs/src/missions.jsx | 20 +++++++++++++++++---
 1 file changed, 17 insertions(+), 3 deletions(-)

diff --git a/gcs/src/missions.jsx b/gcs/src/missions.jsx
index 25a270def..3db920cdf 100644
--- a/gcs/src/missions.jsx
+++ b/gcs/src/missions.jsx
@@ -44,6 +44,11 @@ import {
 } from "./helpers/notification"
 import { socket } from "./helpers/socket"
 
+// Tailwind styling
+import resolveConfig from "tailwindcss/resolveConfig"
+import tailwindConfig from "../tailwind.config"
+const tailwindColors = resolveConfig(tailwindConfig).theme.colors
+
 const coordsFractionDigits = 7
 
 export default function Missions() {
@@ -791,9 +796,18 @@ export default function Missions() {
                   className="mt-2"
                 >
                   <Tabs.List grow>
-                    <Tabs.Tab value="mission">Mission</Tabs.Tab>
-                    <Tabs.Tab value="fence">Fence</Tabs.Tab>
-                    <Tabs.Tab value="rally">Rally</Tabs.Tab>
+                    <Tabs.Tab
+                      value="mission"
+                      color={tailwindColors.yellow[400]}
+                    >
+                      Mission
+                    </Tabs.Tab>
+                    <Tabs.Tab value="fence" color={tailwindColors.blue[400]}>
+                      Fence
+                    </Tabs.Tab>
+                    <Tabs.Tab value="rally" color={tailwindColors.purple[400]}>
+                      Rally
+                    </Tabs.Tab>
                   </Tabs.List>
 
                   <Tabs.Panel value="mission">

From 9dd54bf705662056fe34d240cc256e50368eaddc Mon Sep 17 00:00:00 2001
From: Kush Makkapati <kush.makkapati@icloud.com>
Date: Sat, 9 Aug 2025 20:42:26 +0100
Subject: [PATCH 07/10] Add polygon display to missions map for fence polygons

---
 .../mapComponents/drawLineCoordinates.jsx     | 16 +++++
 .../components/mapComponents/fenceItems.jsx   | 64 +++++++++++++------
 gcs/src/components/missions/missionsMap.jsx   | 38 ++++++++++-
 gcs/src/missions.jsx                          | 38 +++++++++++
 4 files changed, 134 insertions(+), 22 deletions(-)

diff --git a/gcs/src/components/mapComponents/drawLineCoordinates.jsx b/gcs/src/components/mapComponents/drawLineCoordinates.jsx
index 28e72176a..745913f11 100644
--- a/gcs/src/components/mapComponents/drawLineCoordinates.jsx
+++ b/gcs/src/components/mapComponents/drawLineCoordinates.jsx
@@ -9,6 +9,8 @@ export default function DrawLineCoordinates({
   colour,
   width = 1,
   lineProps = {},
+  fillLayer = false,
+  fillOpacity = 0.5,
 }) {
   return (
     <Source
@@ -21,6 +23,7 @@ export default function DrawLineCoordinates({
           coordinates,
         },
       }}
+      buffer={512} // Attempt to increase buffer to remove fill layer clipping
     >
       <Layer
         {...{
@@ -36,6 +39,19 @@ export default function DrawLineCoordinates({
           },
         }}
       />
+      {fillLayer && (
+        <Layer
+          id="fence-polygon-fill-layer"
+          type="fill"
+          paint={{
+            "fill-color": colour,
+            "fill-opacity": fillOpacity,
+          }}
+          layout={{
+            "fill-sort-key": 10,
+          }}
+        />
+      )}
     </Source>
   )
 }
diff --git a/gcs/src/components/mapComponents/fenceItems.jsx b/gcs/src/components/mapComponents/fenceItems.jsx
index b17a5f2cd..45aa3ad8e 100644
--- a/gcs/src/components/mapComponents/fenceItems.jsx
+++ b/gcs/src/components/mapComponents/fenceItems.jsx
@@ -80,23 +80,49 @@ export default function FenceItems({
         )
       })}
 
-      {/* Show geo-fence outlines */}
-      {fencePolygonItems.length > 0 && (
-        <DrawLineCoordinates
-          coordinates={[
-            ...fencePolygonItems.map((item) => [
-              intToCoord(item.y),
-              intToCoord(item.x),
-            ]),
-            [
-              intToCoord(fencePolygonItems[0].y),
-              intToCoord(fencePolygonItems[0].x),
-            ],
-          ]}
-          colour={tailwindColors.blue[200]}
-          lineProps={{ "line-dasharray": [4, 6] }}
-        />
-      )}
+      {/* Group fencePolygonItems into separate polygons */}
+      {(() => {
+        const polygons = []
+        let currentPolygon = []
+        let currentPoints = 0
+
+        fencePolygonItems.forEach((item) => {
+          currentPolygon.push(item)
+          currentPoints++
+
+          if (currentPoints === item.param1) {
+            polygons.push(currentPolygon)
+            currentPolygon = []
+            currentPoints = 0
+          }
+        })
+
+        return polygons.map((polygon, index) => {
+          const lastPolygonItem = polygon[polygon.length - 1]
+
+          const color =
+            lastPolygonItem.command === 5002
+              ? tailwindColors.red[500]
+              : tailwindColors.blue[200]
+
+          return (
+            <DrawLineCoordinates
+              key={index}
+              coordinates={[
+                ...polygon.map((item) => [
+                  intToCoord(item.y),
+                  intToCoord(item.x),
+                ]),
+                [intToCoord(polygon[0].y), intToCoord(polygon[0].x)],
+              ]}
+              colour={color}
+              lineProps={{ "line-width": 2, "line-dasharray": [4, 6] }}
+              fillLayer={true}
+              fillOpacity={lastPolygonItem.command === 5002 ? 0.2 : 0}
+            />
+          )
+        })
+      })()}
 
       {fenceCircleItems.map((item, index) => {
         return (
@@ -133,7 +159,7 @@ export default function FenceItems({
         }}
       >
         <Layer
-          id="circle-fill-layer"
+          id="fence-circle-fill-layer"
           type="fill"
           paint={{
             "fill-color": ["get", "color"],
@@ -141,7 +167,7 @@ export default function FenceItems({
           }}
         />
         <Layer
-          id="circle-border-layer"
+          id="fence-circle-border-layer"
           type="line"
           paint={{
             "line-color": ["get", "color"],
diff --git a/gcs/src/components/missions/missionsMap.jsx b/gcs/src/components/missions/missionsMap.jsx
index b087bd8ea..09167b223 100644
--- a/gcs/src/components/missions/missionsMap.jsx
+++ b/gcs/src/components/missions/missionsMap.jsx
@@ -21,7 +21,7 @@ import Map from "react-map-gl/maplibre"
 
 // Helper scripts
 import { v4 as uuidv4 } from "uuid"
-import { intToCoord } from "../../helpers/dataFormatters"
+import { coordToInt, intToCoord } from "../../helpers/dataFormatters"
 import { filterMissionItems } from "../../helpers/filterMissions"
 import { showNotification } from "../../helpers/notification"
 import { useSettings } from "../../helpers/settings"
@@ -59,6 +59,7 @@ function MapSectionNonMemo({
   addNewMissionItem,
   updateMissionHomePosition,
   clearMissionItems,
+  addFencePolygon,
   mapId = "dashboard",
 }) {
   const [connected] = useSessionStorage({
@@ -202,6 +203,29 @@ function MapSectionNonMemo({
     )
   }
 
+  function convertPolygonToFenceItems(fenceType) {
+    if (polygonPoints.length < 3) {
+      showNotification("Polygon must have at least 3 points to be valid")
+      return
+    }
+
+    const fenceItems = polygonPoints.map((point, index) => ({
+      id: point.id,
+      command: fenceType === "inclusion" ? 5001 : 5002, // 5001 for inclusion, 5002 for exclusion
+      param1: polygonPoints.length, // Number of points in the polygon
+      param2: 0,
+      param3: 0,
+      param4: 0,
+      x: coordToInt(point.lat),
+      y: coordToInt(point.lon),
+      z: index,
+    }))
+
+    addFencePolygon(fenceItems)
+    setPolygonPoints([])
+    setPolygonDrawMode(false)
+  }
+
   return (
     <div className="w-initial h-full" id="map">
       <Map
@@ -387,10 +411,18 @@ function MapSectionNonMemo({
               </ContextMenuItem>
               {currentTab === "fence" && (
                 <>
-                  <ContextMenuItem>
+                  <ContextMenuItem
+                    onClick={() => {
+                      convertPolygonToFenceItems("inclusion")
+                    }}
+                  >
                     <p>Fence inclusion</p>
                   </ContextMenuItem>
-                  <ContextMenuItem>
+                  <ContextMenuItem
+                    onClick={() => {
+                      convertPolygonToFenceItems("exclusion")
+                    }}
+                  >
                     <p>Fence exclusion</p>
                   </ContextMenuItem>
                 </>
diff --git a/gcs/src/missions.jsx b/gcs/src/missions.jsx
index 3db920cdf..60a4ac3d2 100644
--- a/gcs/src/missions.jsx
+++ b/gcs/src/missions.jsx
@@ -622,6 +622,43 @@ export default function Missions() {
     }
   }
 
+  function addFencePolygon(newFenceItems) {
+    var seqNumber =
+      fenceItems.length > 0 ? fenceItems[fenceItems.length - 1].seq + 1 : 0
+
+    const newFenceMissionItems = newFenceItems.map((item, index) => {
+      const newFenceMissionItem = {
+        id: item.id,
+        seq: seqNumber,
+        x: item.x,
+        y: item.y,
+        z: item.z,
+        frame: parseInt(
+          Object.keys(MAV_FRAME_LIST).find(
+            (key) => MAV_FRAME_LIST[key] === "MAV_FRAME_GLOBAL_RELATIVE_ALT",
+          ),
+        ),
+        command: item.command,
+        param1: item.param1,
+        param2: item.param2,
+        param3: item.param3,
+        param4: item.param4,
+        current: 0,
+        autocontinue: 1,
+        target_component: targetInfo.target_component,
+        target_system: targetInfo.target_system,
+        mission_type: 1, // Fence type
+        mavpackettype: "MISSION_ITEM_INT",
+      }
+
+      seqNumber++
+
+      return newFenceMissionItem
+    })
+
+    setFenceItems((prevItems) => [...prevItems, ...newFenceMissionItems])
+  }
+
   return (
     <Layout currentPage="missions">
       <Modal
@@ -773,6 +810,7 @@ export default function Missions() {
                   addNewMissionItem={addNewMissionItem}
                   updateMissionHomePosition={updateMissionHomePosition}
                   clearMissionItems={clearMissionItems}
+                  addFencePolygon={addFencePolygon}
                   mapId="missions"
                 />
               </div>

From 8eb4e436ceb1f90164280853fcb1a19e004fe6cd Mon Sep 17 00:00:00 2001
From: Kush Makkapati <kush.makkapati@icloud.com>
Date: Sat, 9 Aug 2025 21:07:27 +0100
Subject: [PATCH 08/10] Fix 2 bugs

---
 gcs/src/components/mapComponents/drawLineCoordinates.jsx | 1 -
 gcs/src/missions.jsx                                     | 2 +-
 2 files changed, 1 insertion(+), 2 deletions(-)

diff --git a/gcs/src/components/mapComponents/drawLineCoordinates.jsx b/gcs/src/components/mapComponents/drawLineCoordinates.jsx
index 745913f11..1f9f75aa8 100644
--- a/gcs/src/components/mapComponents/drawLineCoordinates.jsx
+++ b/gcs/src/components/mapComponents/drawLineCoordinates.jsx
@@ -41,7 +41,6 @@ export default function DrawLineCoordinates({
       />
       {fillLayer && (
         <Layer
-          id="fence-polygon-fill-layer"
           type="fill"
           paint={{
             "fill-color": colour,
diff --git a/gcs/src/missions.jsx b/gcs/src/missions.jsx
index 60a4ac3d2..5cd1685d9 100644
--- a/gcs/src/missions.jsx
+++ b/gcs/src/missions.jsx
@@ -626,7 +626,7 @@ export default function Missions() {
     var seqNumber =
       fenceItems.length > 0 ? fenceItems[fenceItems.length - 1].seq + 1 : 0
 
-    const newFenceMissionItems = newFenceItems.map((item, index) => {
+    const newFenceMissionItems = newFenceItems.map((item) => {
       const newFenceMissionItem = {
         id: item.id,
         seq: seqNumber,

From 398f71a7588d2c79c0b84e069f1a4c6c71102ad8 Mon Sep 17 00:00:00 2001
From: Kush Makkapati <kush.makkapati@icloud.com>
Date: Sat, 9 Aug 2025 21:18:42 +0100
Subject: [PATCH 09/10] Address copilot review comments

---
 .../components/mapComponents/fenceItems.jsx   | 34 ++++++++---------
 .../missions/fenceItemsTableRow.jsx           | 38 +++++++++----------
 gcs/src/missions.jsx                          |  2 +-
 3 files changed, 37 insertions(+), 37 deletions(-)

diff --git a/gcs/src/components/mapComponents/fenceItems.jsx b/gcs/src/components/mapComponents/fenceItems.jsx
index 45aa3ad8e..795a35b1e 100644
--- a/gcs/src/components/mapComponents/fenceItems.jsx
+++ b/gcs/src/components/mapComponents/fenceItems.jsx
@@ -25,6 +25,23 @@ import DrawLineCoordinates from "./drawLineCoordinates"
 import MarkerPin from "./markerPin"
 const tailwindColors = resolveConfig(tailwindConfig).theme.colors
 
+function getFenceCommandNumber(value) {
+  return parseInt(
+    Object.keys(FENCE_ITEM_COMMANDS_LIST).filter(
+      (key) => FENCE_ITEM_COMMANDS_LIST[key] === value,
+    ),
+  )
+}
+
+const polygonCommands = [
+  getFenceCommandNumber("MAV_CMD_NAV_FENCE_POLYGON_VERTEX_INCLUSION"),
+  getFenceCommandNumber("MAV_CMD_NAV_FENCE_POLYGON_VERTEX_EXCLUSION"),
+]
+const circleCommands = [
+  getFenceCommandNumber("MAV_CMD_NAV_FENCE_CIRCLE_INCLUSION"),
+  getFenceCommandNumber("MAV_CMD_NAV_FENCE_CIRCLE_EXCLUSION"),
+]
+
 export default function FenceItems({
   fenceItems,
   editable = false,
@@ -34,24 +51,7 @@ export default function FenceItems({
   const [fenceCircleItems, setFenceCircleItems] = useState([])
 
   useEffect(() => {
-    function getFenceCommandNumber(value) {
-      return parseInt(
-        Object.keys(FENCE_ITEM_COMMANDS_LIST).filter(
-          (key) => FENCE_ITEM_COMMANDS_LIST[key] === value,
-        ),
-      )
-    }
-
     // Filter out fence items based on their type
-    const polygonCommands = [
-      getFenceCommandNumber("MAV_CMD_NAV_FENCE_POLYGON_VERTEX_INCLUSION"),
-      getFenceCommandNumber("MAV_CMD_NAV_FENCE_POLYGON_VERTEX_EXCLUSION"),
-    ]
-    const circleCommands = [
-      getFenceCommandNumber("MAV_CMD_NAV_FENCE_CIRCLE_INCLUSION"),
-      getFenceCommandNumber("MAV_CMD_NAV_FENCE_CIRCLE_EXCLUSION"),
-    ]
-
     const polygonItems = fenceItems.filter((item) =>
       polygonCommands.includes(item.command),
     )
diff --git a/gcs/src/components/missions/fenceItemsTableRow.jsx b/gcs/src/components/missions/fenceItemsTableRow.jsx
index c1e250370..f2573eaa0 100644
--- a/gcs/src/components/missions/fenceItemsTableRow.jsx
+++ b/gcs/src/components/missions/fenceItemsTableRow.jsx
@@ -19,6 +19,25 @@ import {
 
 const coordsFractionDigits = 9
 
+function getAvailableCommands() {
+  var commandsList = FENCE_ITEM_COMMANDS_LIST
+
+  return Object.entries(commandsList).map(([key, value]) => ({
+    value: key,
+    label: getDisplayCommandName(value),
+  }))
+}
+
+function getFrameName(frameId) {
+  var frameName = MAV_FRAME_LIST[frameId]
+
+  if (frameName.startsWith("MAV_FRAME_")) {
+    frameName = frameName.replace("MAV_FRAME_", "")
+  }
+
+  return frameName || "UNKNOWN"
+}
+
 export default function FenceItemsTableRow({
   index,
   fenceItem,
@@ -46,25 +65,6 @@ export default function FenceItemsTableRow({
     return commandName
   }
 
-  function getAvailableCommands() {
-    var commandsList = FENCE_ITEM_COMMANDS_LIST
-
-    return Object.entries(commandsList).map(([key, value]) => ({
-      value: key,
-      label: getDisplayCommandName(value),
-    }))
-  }
-
-  function getFrameName(frameId) {
-    var frameName = MAV_FRAME_LIST[frameId]
-
-    if (frameName.startsWith("MAV_FRAME_")) {
-      frameName = frameName.replace("MAV_FRAME_", "")
-    }
-
-    return frameName || "UNKNOWN"
-  }
-
   function updateFenceItemData(key, newVal) {
     setFenceItemData({
       ...fenceItemData,
diff --git a/gcs/src/missions.jsx b/gcs/src/missions.jsx
index 5cd1685d9..2f2f8066e 100644
--- a/gcs/src/missions.jsx
+++ b/gcs/src/missions.jsx
@@ -623,7 +623,7 @@ export default function Missions() {
   }
 
   function addFencePolygon(newFenceItems) {
-    var seqNumber =
+    let seqNumber =
       fenceItems.length > 0 ? fenceItems[fenceItems.length - 1].seq + 1 : 0
 
     const newFenceMissionItems = newFenceItems.map((item) => {

From 505ea9a5eb8e18d8f2a32a74d138c66f93a5f068 Mon Sep 17 00:00:00 2001
From: Kush Makkapati <kush.makkapati@icloud.com>
Date: Sat, 9 Aug 2025 21:21:53 +0100
Subject: [PATCH 10/10] Fix bug

---
 .../missions/fenceItemsTableRow.jsx           | 20 +++++++++----------
 1 file changed, 10 insertions(+), 10 deletions(-)

diff --git a/gcs/src/components/missions/fenceItemsTableRow.jsx b/gcs/src/components/missions/fenceItemsTableRow.jsx
index f2573eaa0..5ba378300 100644
--- a/gcs/src/components/missions/fenceItemsTableRow.jsx
+++ b/gcs/src/components/missions/fenceItemsTableRow.jsx
@@ -19,6 +19,16 @@ import {
 
 const coordsFractionDigits = 9
 
+function getDisplayCommandName(commandName) {
+  if (commandName.startsWith("MAV_CMD_NAV_")) {
+    commandName = commandName.replace("MAV_CMD_NAV_", "")
+  } else if (commandName.startsWith("MAV_CMD_")) {
+    commandName = commandName.replace("MAV_CMD_", "")
+  }
+
+  return commandName
+}
+
 function getAvailableCommands() {
   var commandsList = FENCE_ITEM_COMMANDS_LIST
 
@@ -55,16 +65,6 @@ export default function FenceItemsTableRow({
     updateMissionItem(fenceItemData)
   }, [fenceItemData])
 
-  function getDisplayCommandName(commandName) {
-    if (commandName.startsWith("MAV_CMD_NAV_")) {
-      commandName = commandName.replace("MAV_CMD_NAV_", "")
-    } else if (commandName.startsWith("MAV_CMD_")) {
-      commandName = commandName.replace("MAV_CMD_", "")
-    }
-
-    return commandName
-  }
-
   function updateFenceItemData(key, newVal) {
     setFenceItemData({
       ...fenceItemData,