Feature/aligned grid (#5)

* Add html elements for horizontal lines * Add functions for creating horizontal lines * Add html elements for vertical lines * Add functions for creating vertical lines
L21s · Feb 13, 2024 · bc82956 · bc82956
1 parent 9b511db
commit bc82956
Show file tree

Hide file tree

Showing 2 changed files with 60 additions and 0 deletions.
diff --git a/src/taskpane/taskpane.html b/src/taskpane/taskpane.html
@@ -53,6 +53,24 @@ <h3>Background Options</h3>
                 <button class="ms-Button" id="fill-background">Fill</button>
                 <button class="ms-Button" id="remove-background">Remove</button>
             </div>
+
+            <h3>Horizontal Lines</h3>
+            <div class="content">
+                <div>
+                    <label for="number-of-rows">Number of rows</label>
+                    <input type="number" id="number-of-rows" name="head" value=5 />
+                </div>
+                <button class="ms-Button" id="create-rows">Create</button>
+            </div>
+
+            <h3>Vertical Lines</h3>
+            <div class="content">
+                <div>
+                    <label for="number-of-columns">Number of columns</label>
+                    <input type="number" id="number-of-columns" name="head" value=5 />
+                </div>
+                <button class="ms-Button" id="create-columns">Create</button>
+            </div>
         </div>
     </section>
 </body>

diff --git a/src/taskpane/taskpane.ts b/src/taskpane/taskpane.ts
@@ -28,9 +28,51 @@ Office.onReady((info) => {
     document.getElementById("cyan-sticker").onclick = () => insertSticker("#00ffff");
     document.getElementById("save-initials").onclick = () =>
       localStorage.setItem("initials", (<HTMLInputElement>document.getElementById("initials")).value);
+    document.getElementById("create-rows").onclick = () =>
+        createRows(+(<HTMLInputElement>document.getElementById("number-of-rows")).value);
+    document.getElementById("create-columns").onclick = () =>
+        createColumns(+(<HTMLInputElement>document.getElementById("number-of-columns")).value);
   }
 });
 
+export async function createRows(numberOfRows: number) {
+  const lineDistance = 354 / numberOfRows
+  let top = 126;
+
+  for (let _i = 0; _i <= numberOfRows; _i++) {
+    await runPowerPoint((powerPointContext) => {
+      const shapes = powerPointContext.presentation.getSelectedSlides().getItemAt(0).shapes;
+      const line = shapes.addLine(PowerPoint.ConnectorType.straight);
+      line.name = "StraightLine";
+      line.left = 8;
+      line.top = top;
+      line.height = 0;
+      line.width = 944;
+    });
+
+    top += lineDistance;
+  }
+}
+
+export async function createColumns(numberOfColumns: number) {
+  const lineDistance = 848 / numberOfColumns
+  let left= 58;
+
+  for (let _i = 0; _i <= numberOfColumns; _i++) {
+    await runPowerPoint((powerPointContext) => {
+      const shapes = powerPointContext.presentation.getSelectedSlides().getItemAt(0).shapes;
+      const line = shapes.addLine(PowerPoint.ConnectorType.straight);
+      line.name = "StraightLine";
+      line.left = left;
+      line.top = 8;
+      line.height = 524;
+      line.width = 0;
+    });
+
+    left += lineDistance;
+  }
+}
+
 function loadImageIntoLocalStorage(input?: HTMLInputElement) {
   if (!input) return;
   const file = input.files[0];