[PowerPoint] (shapes) Updates to include 1.4 Shape enums (#1033)

* [PowerPoint] (shapes) Updates to include 1.4 Shape enums

* Refine text ranges HTML

* Update TextRange snippet to include ParagraphFormat and BulletFormat references

Author: ElizabethSamuel-MSFT

playlists-prod/powerpoint.yaml

@@ -186,4 +186,4 @@
     https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/powerpoint/text/get-set-textrange.yaml
   group: Text
   api_set:
-    PowerPointApi: '1.5'
+    PowerPointApi: '1.8'

playlists/powerpoint.yaml

@@ -186,4 +186,4 @@
     https://raw.githubusercontent.com/OfficeDev/office-js-snippets/main/samples/powerpoint/text/get-set-textrange.yaml
   group: Text
   api_set:
-    PowerPointApi: '1.5'
+    PowerPointApi: '1.8'

samples/powerpoint/shapes/get-set-shapes.yaml

@@ -53,7 +53,7 @@ script:
             shape2.load("id");
             await context.sync();
 
-            console.log(`IDs: ${shape1.id}, ${shape2.id}`)
+            console.log(`IDs: ${shape1.id}, ${shape2.id}`);
             slide1.setSelectedShapes([shape1.id, shape2.id]);
             await context.sync();
           });
@@ -64,9 +64,11 @@ script:
           await PowerPoint.run(async (context) => {
             const shapes: PowerPoint.ShapeScopedCollection = context.presentation.getSelectedShapes();
             const shapeCount = shapes.getCount();
-            shapes.load("items");
+            shapes.load("items/fill/type");
             await context.sync();
             shapes.items.map((shape) => {
+              const shapeFillType = shape.fill.type as PowerPoint.ShapeFillType;
+              console.log(`Shape ID ${shape.id} original fill type: ${shapeFillType}`);
               shape.fill.setSolidColor("red");
             });
             await context.sync();
@@ -115,9 +117,7 @@ script:
         }
 
         function generateRandomHexColor() {
-          return `#${Math.random()
-            .toString(16)
-            .substring(2, 8)}`;
+          return `#${Math.random().toString(16).substring(2, 8)}`;
         }
 
         async function createShapes() {
@@ -131,7 +131,7 @@ script:
             const minNewShapeHeight = 50;
             for (let i = 0; i < 20; i++) {
               const rectangle: PowerPoint.Shape = currentSlide.shapes.addGeometricShape(
-                PowerPoint.GeometricShapeType.rectangle
+                PowerPoint.GeometricShapeType.rectangle,
               );
               rectangle.height = getRandomBetween(minNewShapeWidth, maxNewShapeWidth);
               rectangle.width = getRandomBetween(minNewShapeHeight, maxNewShapeHeight);

samples/powerpoint/shapes/shapes.yaml

@@ -6,7 +6,7 @@ host: POWERPOINT
 api_set:
     PowerPointApi: '1.4'
 script:
-    content: |-
+    content: |
         document.getElementById("create-hexagon").addEventListener("click", () => tryCatch(createHexagon));
         document.getElementById("shrink-hexagon").addEventListener("click", () => tryCatch(shrinkHexagon));
         document.getElementById("move-hexagon").addEventListener("click", () => tryCatch(moveHexagon));
@@ -25,7 +25,7 @@ script:
               left: 100,
               top: 100,
               height: 150,
-              width: 150
+              width: 150,
             };
             const hexagon: PowerPoint.Shape = shapes.addGeometricShape(PowerPoint.GeometricShapeType.hexagon, shapeOptions);
             hexagon.name = "Hexagon";
@@ -69,13 +69,12 @@ script:
 
             // For a line, left and top are the coordinates of the start point,
             // while height and width are the coordinates of the end point.
-            const line: PowerPoint.Shape = shapes.addLine(PowerPoint.ConnectorType.straight, 
-                { 
-                  left: 400, 
-                  top: 200, 
-                  height: 20, 
-                  width: 150 
-                });
+            const line: PowerPoint.Shape = shapes.addLine(PowerPoint.ConnectorType.straight, {
+              left: 400,
+              top: 200,
+              height: 20,
+              width: 150,
+            });
             line.name = "StraightLine";
 
             await context.sync();
@@ -88,13 +87,12 @@ script:
           // location, and size. Then it names the text box.
           await PowerPoint.run(async (context) => {
             const shapes: PowerPoint.ShapeCollection = context.presentation.slides.getItemAt(0).shapes;
-            const textbox: PowerPoint.Shape = shapes.addTextBox("Hello!", 
-                { 
-                  left: 100, 
-                  top: 300, 
-                  height: 300, 
-                  width: 450 
-                });
+            const textbox: PowerPoint.Shape = shapes.addTextBox("Hello!", {
+              left: 100,
+              top: 300,
+              height: 300,
+              width: 450,
+            });
             textbox.name = "Textbox";
 
             return context.sync();
@@ -109,15 +107,17 @@ script:
           await PowerPoint.run(async (context) => {
             const shapes: PowerPoint.ShapeCollection = context.presentation.slides.getItemAt(0).shapes;
             const braces: PowerPoint.Shape = shapes.addGeometricShape(PowerPoint.GeometricShapeType.bracePair, {
-                left: 100,
-                top: 400,
-                height: 50,
-                width: 150
-              });
+              left: 100,
+              top: 400,
+              height: 50,
+              width: 150,
+            });
             braces.name = "Braces";
             braces.textFrame.textRange.text = "Shape text";
             braces.textFrame.textRange.font.color = "purple";
+            braces.textFrame.textRange.font.underline = PowerPoint.ShapeFontUnderlineStyle.heavy;
             braces.textFrame.verticalAlignment = PowerPoint.TextVerticalAlignment.middleCentered;
+            braces.textFrame.autoSizeSetting = PowerPoint.ShapeAutoSize.autoSizeShapeToFitText;
 
             return context.sync();
           });

samples/powerpoint/text/get-set-textrange.yaml

@@ -4,14 +4,17 @@ name: Work with text range selections
 description: Get, set, load, and save text range selections.
 host: POWERPOINT
 api_set:
-    PowerPointApi: '1.5'
+    PowerPointApi: '1.8'
 script:
-    content: |-
+    content: |
         document.getElementById("getSelectedTextRange").addEventListener("click", () => tryCatch(getSelectedTextRange));
         document.getElementById("setSelectedTextRange").addEventListener("click", () => tryCatch(setSelectedTextRange));
         document.getElementById("changeColor").addEventListener("click", () => tryCatch(changeColor));
         document.getElementById("saveTextSelection").addEventListener("click", () => tryCatch(saveTextSelection));
         document.getElementById("loadTextSelection").addEventListener("click", () => tryCatch(loadTextSelection));
+        document
+          .getElementById("getSelectedTextRangeProperties")
+          .addEventListener("click", () => tryCatch(getSelectedTextRangeComplexProperties));
 
         async function getSelectedTextRange() {
           // Gets the selected text range and prints data about the range on the task pane.
@@ -37,15 +40,15 @@ script:
             txtExplained = txtExplained.replace(/\v/g, "<font color=red>VV</font>");
             let finalTable = "";
             finalTable +=
-              "<br><table border=1 cellpadding=3 cellspacing=0><tr><td bgcolor=#3333EE><font color=white>Index</font></td><td bgcolor=#3333EE><font color=white>Id</font></td></tr>";
+              "<table border=1 cellpadding=3 cellspacing=0><tr><td bgcolor=#3333EE><font color=white>Index</font></td><td bgcolor=#3333EE><font color=white>Id</font></td></tr>";
             finalTable += "<tr><td>Raw</td><td>" + textRange.text + "</td></tr>";
             finalTable += "<tr><td>Html</td><td>" + txtHtml + "</td></tr>";
             finalTable += "<tr><td>Exp</td><td>" + txtExplained + "</td></tr>";
             finalTable += "<tr><td>Start</td><td>" + textRange.start + "</td></tr>";
             finalTable += "<tr><td>Length</td><td>" + textRange.length + "</td></tr>";
             finalTable += "</table>";
             const outputSpan = document.getElementById("outputSpan");
-            outputSpan.innerHTML = ""
+            outputSpan.innerHTML = "";
             outputSpan.innerHTML += finalTable;
           });
         }
@@ -132,12 +135,42 @@ script:
           await PowerPoint.run(async (context) => {
             const slide1: PowerPoint.Slide = context.presentation.slides.getItem(savedTextSlideSelection[0]);
             const shape1: PowerPoint.Shape = slide1.shapes.getItem(savedTextShapeSelection[0]);
-            const textRange: PowerPoint.TextRange = shape1.textFrame.textRange.getSubstring(savedTextTextRangeStart, savedTextTextRangeLength);
+            const textRange: PowerPoint.TextRange = shape1.textFrame.textRange.getSubstring(
+              savedTextTextRangeStart,
+              savedTextTextRangeLength,
+            );
             textRange.setSelected();
             await context.sync();
           });
         }
 
+        async function getSelectedTextRangeComplexProperties() {
+          // Gets navigational (complex) properties of the selected text range.
+          await PowerPoint.run(async (context) => {
+            const textRange: PowerPoint.TextRange = context.presentation.getSelectedTextRange();
+            textRange.load("font,paragraphFormat/bulletFormat,paragraphFormat/horizontalAlignment");
+            await context.sync();
+
+            console.log("Font properties of selected text range:");
+            console.log(`\tallCaps: ${textRange.font.allCaps}`);
+            console.log(`\tbold: ${textRange.font.bold}`);
+            console.log(`\tcolor: ${textRange.font.color}`);
+            console.log(`\tdoubleStrikethrough: ${textRange.font.doubleStrikethrough}`);
+            console.log(`\titalic: ${textRange.font.italic}`);
+            console.log(`\tname: ${textRange.font.name}`);
+            console.log(`\tsize: ${textRange.font.size}`);
+            console.log(`\tsmallCaps: ${textRange.font.smallCaps}`);
+            console.log(`\tstrikethrough: ${textRange.font.strikethrough}`);
+            console.log(`\tsubscript: ${textRange.font.subscript}`);
+            console.log(`\tsuperscript: ${textRange.font.superscript}`);
+            console.log(`\tunderline: ${textRange.font.underline}`);
+
+            console.log("Paragraph format properties of selected text range:");
+            console.log(`\tbulletFormat.visible: ${textRange.paragraphFormat.bulletFormat.visible}`);
+            console.log(`\thorizontalAlignment: ${textRange.paragraphFormat.horizontalAlignment}`);
+          });
+        }
+
         /** Default helper for invoking an action and handling errors. */
         async function tryCatch(callback) {
           try {
@@ -151,16 +184,20 @@ script:
 template:
     content: |-
         <section class="ms-Fabric ms-font-m">
-          <p>This sample shows how to get selected text, and how to select specific text.</p>
+            <p>This sample shows how to get selected text, and how to select specific text.</p>
         </section>
         <section class="ms-Fabric samples ms-font-m">
-          <h3>Try it out</h3>
-          <button id="getSelectedTextRange" class="ms-Button"><span class="ms-Button-label">Get selected text range</span></button>
-          <br><button id="setSelectedTextRange" class="ms-Button"><span class="ms-Button-label">Selects the first 10 characters of the selected shape.</span></button>
-          <br><button id="changeColor" class="ms-Button"><span class="ms-Button-label">Change color of selected text</span></button>
-          <br><button id="saveTextSelection" class="ms-Button"><span class="ms-Button-label">Save text selection</span></button>
-          <br><button id="loadTextSelection" class="ms-Button"><span class="ms-Button-label">Load the saved selection</span></button>
-          <span id="outputSpan"></span>
+            <h3>Try it out</h3>
+            <p>Before choosing the <b>Get selected text range</b> button, add text to a slide and select some text.</p>
+            <button id="getSelectedTextRange" class="ms-Button"><span class="ms-Button-label">Get selected text range</span></button>
+            <button id="setSelectedTextRange" class="ms-Button"><span class="ms-Button-label">Selects first 10 characters of selected shape</span></button>
+            <button id="changeColor" class="ms-Button"><span class="ms-Button-label">Change color of selected text</span></button>
+            <button id="saveTextSelection" class="ms-Button"><span class="ms-Button-label">Save text selection</span></button>
+            <button id="loadTextSelection" class="ms-Button"><span class="ms-Button-label">Load the saved selection</span></button>
+            <button id="getSelectedTextRangeProperties" class="ms-Button"><span class="ms-Button-label">Get selected text range properties</span></button>
+            <h4>Output</h4>
+            <span id="outputSpan"></span>
+            <p>Output from choosing the <b>Get selected text range</b> button is displayed in this section.</p>
         </section>
     language: html
 style: