Feat/delete grid (#12)

* Add constants for grid line names

* Add css class for grid button

* Add delete buttons for grid lines

* Add functions to delete buttons

src/taskpane/taskpane.css

@@ -116,3 +116,7 @@
 .save-button {
   width: 31%;
 }
+
+.grid-button {
+  width: 49%
+}

src/taskpane/taskpane.html

@@ -53,7 +53,10 @@ <h3 class="ms-font-l">Rows</h3>
                     <button class="grid" id="four-rows">4</button>
                     <input class="grid" type="number" id="number-of-rows" name="head" value=5 />
                 </div>
-                <button class="ms-Button" id="create-rows">Create</button>
+                <div>
+                    <button class="grid-button" id="create-rows">Create</button>
+                    <button class="grid-button" id="delete-rows">Delete</button>
+                </div>
             </div>
 
             <h3 class="ms-font-l">Columns</h3>
@@ -64,7 +67,10 @@ <h3 class="ms-font-l">Columns</h3>
                     <button class="grid" id="four-columns">4</button>
                     <input class="grid" type="number" id="number-of-columns" name="head" value=5 />
                 </div>
-                <button class="ms-Button" id="create-columns">Create</button>
+                <div>
+                    <button class="grid-button" id="create-columns">Create</button>
+                    <button class="grid-button" id="delete-columns">Delete</button>
+                </div>
             </div>
         </div>
     </section>

src/taskpane/taskpane.ts

@@ -5,6 +5,9 @@
 
 /* global Office, PowerPoint */
 
+const rowLineName = "RowLine";
+const columnLineName = "ColumnLine";
+
 Office.onReady((info) => {
   if (info.host === Office.HostType.PowerPoint) {
     let initials = <HTMLInputElement>document.getElementById("initials");
@@ -21,17 +24,36 @@ Office.onReady((info) => {
       localStorage.setItem("initials", (<HTMLInputElement>document.getElementById("initials")).value);
     document.getElementById("create-rows").onclick = () =>
         createRows(+(<HTMLInputElement>document.getElementById("number-of-rows")).value);
+    document.getElementById("delete-rows").onclick = () => deleteShapesByName(rowLineName);
     document.getElementById("two-rows").onclick = () => createRows(2);
     document.getElementById("three-rows").onclick = () => createRows(3);
     document.getElementById("four-rows").onclick = () => createRows(4);
     document.getElementById("create-columns").onclick = () =>
         createColumns(+(<HTMLInputElement>document.getElementById("number-of-columns")).value);
+    document.getElementById("delete-columns").onclick = () => deleteShapesByName(columnLineName);
     document.getElementById("two-columns").onclick = () => createColumns(2);
     document.getElementById("three-columns").onclick = () => createColumns(3);
     document.getElementById("four-columns").onclick = () => createColumns(4);
   }
 });
 
+async function deleteShapesByName(name: string) {
+  await PowerPoint.run(async (context) => {
+    const sheet = context.presentation.slides.getItemAt(0);
+    const shapes = sheet.shapes;
+
+    shapes.load();
+    await context.sync();
+
+    shapes.items.forEach(function (shape) {
+      if (shape.name == name) {
+        shape.delete();
+      }
+    });
+    await context.sync();
+  });
+}
+
 export async function createRows(numberOfRows: number) {
   const lineDistance = 354 / numberOfRows
   let top = 126;
@@ -40,7 +62,7 @@ export async function createRows(numberOfRows: number) {
     await runPowerPoint((powerPointContext) => {
       const shapes = powerPointContext.presentation.getSelectedSlides().getItemAt(0).shapes;
       const line = shapes.addLine(PowerPoint.ConnectorType.straight);
-      line.name = "StraightLine";
+      line.name = rowLineName;
       line.left = 8;
       line.top = top;
       line.height = 0;
@@ -61,7 +83,7 @@ export async function createColumns(numberOfColumns: number) {
     await runPowerPoint((powerPointContext) => {
       const shapes = powerPointContext.presentation.getSelectedSlides().getItemAt(0).shapes;
       const line = shapes.addLine(PowerPoint.ConnectorType.straight);
-      line.name = "StraightLine";
+      line.name = columnLineName;
       line.left = left;
       line.top = 8;
       line.height = 524;