[PowerPoint] (shapes) Add 'Move group' to group-ungroup snippet (#983)

* [PowerPoint] (shapes) Add 'Move group' to group-ungroup snippet

* Fix typo

Author: ElizabethSamuel-MSFT

samples/powerpoint/shapes/group-ungroup-shapes.yaml

@@ -9,18 +9,17 @@ api_set:
 script:
     content: |
         document.getElementById("group-shapes").addEventListener("click", () => tryCatch(groupShapes));
+        document.getElementById("move-group").addEventListener("click", () => tryCatch(moveGroup));
         document.getElementById("ungroup-shapes").addEventListener("click", () => tryCatch(ungroupShapes));
         document.getElementById("setup").addEventListener("click", () => tryCatch(setup));
 
         async function groupShapes() {
           await PowerPoint.run(async (context) => {
             // Groups the geometric shapes on the current slide.
 
-            // Get the current slide.
+            // Get the shapes on the current slide.
             context.presentation.load("slides");
             const slide: PowerPoint.Slide = context.presentation.getSelectedSlides().getItemAt(0);
-
-            // Get the shapes.
             slide.load("shapes");
             await context.sync();
 
@@ -39,15 +38,44 @@ script:
           });
         }
 
+        async function moveGroup() {
+          await PowerPoint.run(async (context) => {
+            // Move the first shape group to the top-left of the current slide.
+
+            // Get the shapes on the current slide.
+            context.presentation.load("slides");
+            const slide: PowerPoint.Slide = context.presentation.getSelectedSlides().getItemAt(0);
+            slide.load("shapes");
+            await context.sync();
+
+            const shapes: PowerPoint.ShapeCollection = slide.shapes;
+            shapes.load("items/type,items/id");
+            await context.sync();
+
+            // Move the first grouped shapes.
+            const shapeGroups = shapes.items.filter((item) => item.type === PowerPoint.ShapeType.group);
+            if (shapeGroups.length == 0) {
+              console.warn("No shape groups on the current slide so nothing to move.");
+              return;
+            }
+
+            const firstGroupId = shapeGroups[0].id;
+            const shapeGroupToMove = shapes.getItem(firstGroupId);
+            shapeGroupToMove.top = 0;
+            shapeGroupToMove.left = 0;
+            await context.sync();
+
+            console.log(`Moved shape group with group ID: ${firstGroupId}`);
+          });
+        }
+
         async function ungroupShapes() {
           await PowerPoint.run(async (context) => {
             // Ungroups the first shape group on the current slide.
 
-            // Get the current slide.
+            // Get the shapes on the current slide.
             context.presentation.load("slides");
             const slide: PowerPoint.Slide = context.presentation.getSelectedSlides().getItemAt(0);
-
-            // Get the shapes.
             slide.load("shapes");
             await context.sync();
 
@@ -132,6 +160,9 @@ template:
             <button id="group-shapes" class="ms-Button">
                 <span class="ms-Button-label">Group shapes</span>
             </button>
+            <button id="move-group" class="ms-Button">
+                <span class="ms-Button-label">Move group</span>
+                </button>
             <button id="ungroup-shapes" class="ms-Button">
                 <span class="ms-Button-label">Ungroup shapes</span>
             </button>

snippet-extractor-output/snippets.yaml

@@ -15230,11 +15230,9 @@
     await PowerPoint.run(async (context) => {
       // Ungroups the first shape group on the current slide.
 
-      // Get the current slide.
+      // Get the shapes on the current slide.
       context.presentation.load("slides");
       const slide: PowerPoint.Slide = context.presentation.getSelectedSlides().getItemAt(0);
-
-      // Get the shapes.
       slide.load("shapes");
       await context.sync();
 
@@ -15471,11 +15469,9 @@
     await PowerPoint.run(async (context) => {
       // Groups the geometric shapes on the current slide.
 
-      // Get the current slide.
+      // Get the shapes on the current slide.
       context.presentation.load("slides");
       const slide: PowerPoint.Slide = context.presentation.getSelectedSlides().getItemAt(0);
-
-      // Get the shapes.
       slide.load("shapes");
       await context.sync();
 
@@ -15716,11 +15712,9 @@
     await PowerPoint.run(async (context) => {
       // Ungroups the first shape group on the current slide.
 
-      // Get the current slide.
+      // Get the shapes on the current slide.
       context.presentation.load("slides");
       const slide: PowerPoint.Slide = context.presentation.getSelectedSlides().getItemAt(0);
-
-      // Get the shapes.
       slide.load("shapes");
       await context.sync();
 
@@ -15751,11 +15745,9 @@
     await PowerPoint.run(async (context) => {
       // Ungroups the first shape group on the current slide.
 
-      // Get the current slide.
+      // Get the shapes on the current slide.
       context.presentation.load("slides");
       const slide: PowerPoint.Slide = context.presentation.getSelectedSlides().getItemAt(0);
-
-      // Get the shapes.
       slide.load("shapes");
       await context.sync();