Added swap position functionality

src/taskpane/components/App.tsx

@@ -3,6 +3,7 @@ import { useEffect, useState } from "react";
 import MatchSizes from "./MatchSizes";
 import MatchProperties from "./MatchProperties";
 import RoundImage from "./RoundImage";
+import SwapPositions from "./SwapPositions";
 import { makeStyles, Text, Subtitle1, tokens, Theme, Spinner } from "@fluentui/react-components";
 import { ShapeUnionRegular, SquareRegular, InfoRegular } from "@fluentui/react-icons";
 
@@ -154,6 +155,8 @@ const App: React.FC<AppProps> = () => {
           <MatchProperties />
           <div style={{ marginTop: "8px" }}></div>
           <RoundImage />
+          <div style={{ marginTop: "8px" }}></div>
+          <SwapPositions />
         </div>
 
         <div className={styles.section}>

src/taskpane/components/SwapPositions.tsx

@@ -0,0 +1,85 @@
+import * as React from "react";
+import { 
+  Button
+} from "@fluentui/react-components";
+import { 
+  ArrowSwapRegular
+} from "@fluentui/react-icons";
+import { useStatusContext } from "./App";
+import { useCommonStyles } from "./commonStyles";
+
+export const SwapPositions: React.FC = () => {
+  const styles = useCommonStyles();
+  const { 
+    statusMessage, setStatusMessage,
+    statusType, setStatusType,
+    isProcessing, setIsProcessing
+  } = useStatusContext();
+
+  const swapPositionsOfTwoSelectedObjects = async () => {
+    setIsProcessing(true);
+    try {
+      await PowerPoint.run(async (context) => {
+        // Get the selected shapes
+        const shapes = context.presentation.getSelectedShapes();
+        shapes.load("items/count");
+        await context.sync();
+
+        // Check if exactly two shapes are selected
+        if (shapes.items.length !== 2) {
+          setStatusMessage("Please select exactly two shapes to swap their positions.");
+          setStatusType("warning");
+          return;
+        }
+
+        // Get the two shapes
+        const shapeObj1 = shapes.items[0];
+        const shapeObj2 = shapes.items[1];
+        
+        // Load position properties
+        shapeObj1.load("left,top");
+        shapeObj2.load("left,top");
+        await context.sync();
+        
+        // Store the position of the first shape
+        const tempLeft = shapeObj1.left;
+        const tempTop = shapeObj1.top;
+        
+        // Swap positions
+        shapeObj1.left = shapeObj2.left;
+        shapeObj1.top = shapeObj2.top;
+        shapeObj2.left = tempLeft;
+        shapeObj2.top = tempTop;
+        
+        await context.sync();
+        
+        setStatusMessage("Positions of the two shapes have been swapped successfully.");
+        setStatusType("success");
+      });
+    } catch (error) {
+      setStatusMessage(`Error: ${error.message}`);
+      setStatusType("error");
+      console.error("Swap positions error:", error);
+    } finally {
+      setIsProcessing(false);
+    }
+  };
+
+  return (
+    <div className={styles.container}>
+      <div className={styles.buttonGroup}>
+        <Button 
+          appearance="primary" 
+          className={styles.actionButton}
+          onClick={swapPositionsOfTwoSelectedObjects} 
+          icon={<ArrowSwapRegular />}
+          disabled={isProcessing}
+        >
+          Swap Positions
+        </Button>
+      </div>
+    </div>
+  );
+};
+
+export default SwapPositions;