From daa680d6dbc67796835e9604a75e2e9b1d9b87da Mon Sep 17 00:00:00 2001
From: KaizIqbal <24286590+KaizIqbal@users.noreply.github.com>
Date: Mon, 27 Jul 2020 17:43:20 +0530
Subject: [PATCH] =?UTF-8?q?=F0=9F=8E=A5=20Animated=20cursors=20render?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/index.ts | 79 +++++++++++++++++++++++++++++++++++++++++-----------
 1 file changed, 63 insertions(+), 16 deletions(-)

diff --git a/src/index.ts b/src/index.ts
index 6941b6f..cbeb990 100644
--- a/src/index.ts
+++ b/src/index.ts
@@ -3,7 +3,16 @@ import path from "path";
 import puppeteer from "puppeteer";
 
 import { generateRenderTemplate } from "./helpers/htmlTemplate";
-import { staticSvgs, bitmapsDir } from "./config";
+import { staticSvgs, bitmapsDir, svgsDir, animatedCursors } from "./config";
+
+// --------------------------- Helpers
+const pad = (number: number, length: number) => {
+  var str = "" + number;
+  while (str.length < length) {
+    str = "0" + str;
+  }
+  return str;
+};
 
 // --------------------------- Main
 (async () => {
@@ -13,20 +22,20 @@ import { staticSvgs, bitmapsDir } from "./config";
     headless: true,
   });
 
-  // Rendering satic .svg files
-  for (let svg of staticSvgs) {
-    fs.readFile(svg, "utf8", async (error, data) => {
-      if (error) throw new Error(`${error}`);
+  try {
+    // Rendering satic .svg files
+    for (let svg of staticSvgs) {
+      fs.readFile(svg, "utf8", async (error, data) => {
+        if (error) throw new Error(`${error}`);
 
-      // Generating HTML Template
-      const template = generateRenderTemplate(data);
+        // Generating HTML Template
+        const template = generateRenderTemplate(data);
 
-      // config
-      const bitmap = `${path.basename(svg, ".svg")}.png`;
-      const out = path.resolve(bitmapsDir, bitmap);
+        // config
+        const bitmap = `${path.basename(svg, ".svg")}.png`;
+        const out = path.resolve(bitmapsDir, bitmap);
 
-      // Render
-      try {
+        // Render
         const page = await browser.newPage();
         await page.setContent(template);
 
@@ -39,9 +48,47 @@ import { staticSvgs, bitmapsDir } from "./config";
         console.log(`Static Cursor rendered at ${out}`);
 
         await page.close();
-      } catch (error) {
-        console.error(error);
-      }
-    });
+      });
+    }
+
+    // Rendering animated .svg files
+    for (let [svg, { frames }] of Object.entries(animatedCursors)) {
+      fs.readFile(path.resolve(svgsDir, svg), "utf8", async (error, data) => {
+        if (error) throw new Error(`${error}`);
+
+        // Generating HTML Template
+        const template = generateRenderTemplate(data);
+
+        const page = await browser.newPage();
+        await page.setContent(template);
+
+        await page.waitForSelector("#container");
+        const svgElement = await page.$("#container svg");
+
+        if (!svgElement) throw new Error("svg element not found");
+
+        // Render Frames
+        for (let index = 1; index <= frames; index++) {
+          // config
+          const padIndex = pad(index, frames.toString().length);
+          const bitmap =
+            frames == 1
+              ? `${path.basename(svg, ".svg")}.png`
+              : `${path.basename(svg, ".svg")}-${padIndex}.png`;
+
+          const out = path.resolve(bitmapsDir, bitmap);
+
+          // Render
+          await svgElement.screenshot({ omitBackground: true, path: out });
+          console.log(`${svg} Rendered ${padIndex}/${frames} `);
+        }
+
+        await page.close();
+      });
+    }
+  } catch (error) {
+    console.error(error);
+  } finally {
+    console.log("📸 Render Complete");
   }
 })();