From ebec94d5d05a7d634abcb80831c63db97a5ad6c6 Mon Sep 17 00:00:00 2001
From: Jonah Lawrence <jonah@freshidea.com>
Date: Mon, 19 Dec 2022 13:45:31 -0700
Subject: [PATCH] feat: Added repeat option to disable loop (#181)

---
 README.md                    |  1 +
 src/demo/index.php           | 12 ++++--
 src/demo/js/script.js        |  1 +
 src/models/RendererModel.php |  5 +++
 src/templates/main.php       | 83 ++++++++++++++++++++++--------------
 src/views/RendererView.php   |  1 +
 tests/OptionsTest.php        | 29 +++++++++++++
 tests/RendererTest.php       | 79 +++++++++++++++++++++++++++++++++-
 tests/svg/test_normal.svg    | 13 +++---
 9 files changed, 182 insertions(+), 42 deletions(-)

diff --git a/README.md b/README.md
index 74972d0..9e372d1 100644
--- a/README.md
+++ b/README.md
@@ -98,6 +98,7 @@ Feel free to [open a PR](https://github.com/DenverCoder1/readme-typing-svg/issue
 | `multiline`  |  `true` to wrap lines or `false` to retype on one line (default: `false`)   | boolean |          `true` or `false`          |
 |  `duration`  | Duration of the printing of a single line in milliseconds (default: `5000`) | integer |         Any positive number         |
 |   `pause`    |     Duration of the pause between lines in milliseconds (default: `0`)      | integer |       Any non-negative number       |
+|   `repeat`   |  `true` to loop around to the first line after the last (default: `true`)   | boolean |          `true` or `false`          |
 
 ## 📤 Deploying it on your own
 
diff --git a/src/demo/index.php b/src/demo/index.php
index d050fb2..c4db521 100644
--- a/src/demo/index.php
+++ b/src/demo/index.php
@@ -83,23 +83,29 @@
                 <input class="param jscolor jscolor-active" id="background" name="background" alt="Background color" data-jscolor="{ format: 'hexa' }" value="#00000000">
 
                 <label for="center">Horizontally Centered</label>
-                <select class="param" id="center" name="center" alt="Horizontally Centered" value="false">
+                <select class="param" id="center" name="center" alt="Horizontally Centered">
                     <option>false</option>
                     <option>true</option>
                 </select>
 
                 <label for="vCenter">Vertically Centered</label>
-                <select class="param" id="vCenter" name="vCenter" alt="Vertically Centered" value="false">
+                <select class="param" id="vCenter" name="vCenter" alt="Vertically Centered">
                     <option>false</option>
                     <option>true</option>
                 </select>
 
                 <label for="multiline">Multiline</label>
-                <select class="param" id="multiline" name="multiline" alt="Multiline" value="false">
+                <select class="param" id="multiline" name="multiline" alt="Multiline">
                     <option value="false">Type sentences on one line</option>
                     <option value="true">Each sentence on a new line</option>
                 </select>
 
+                <label for="repeat">Repeat</label>
+                <select class="param" id="repeat" name="repeat" alt="Repeat">
+                    <option>true</option>
+                    <option>false</option>
+                </select>
+
                 <label for="dimensions" title="Width ✕ Height">Width ✕ Height</label>
                 <span id="dimensions">
                     <input class="param inline" type="number" id="width" name="width" alt="Width (px)" placeholder="435" value="435">
diff --git a/src/demo/js/script.js b/src/demo/js/script.js
index e865e6a..d6a87cd 100644
--- a/src/demo/js/script.js
+++ b/src/demo/js/script.js
@@ -13,6 +13,7 @@ let preview = {
     height: "50",
     duration: "5000",
     pause: "0",
+    repeat: "true",
   },
   dummyText: [
     "The five boxing wizards jump quickly",
diff --git a/src/models/RendererModel.php b/src/models/RendererModel.php
index 0681ac5..60746bd 100644
--- a/src/models/RendererModel.php
+++ b/src/models/RendererModel.php
@@ -46,6 +46,9 @@ class RendererModel
     /** @var int $pause pause duration between lines in milliseconds */
     public $pause;
 
+    /** @var bool $repeat Whether to loop around to the first line after the last */
+    public $repeat;
+
     /** @var string $fontCSS CSS required for displaying the selected font */
     public $fontCSS;
 
@@ -66,6 +69,7 @@ class RendererModel
         "multiline" => "false",
         "duration" => "5000",
         "pause" => "0",
+        "repeat" => "true",
     ];
 
     /**
@@ -90,6 +94,7 @@ class RendererModel
         $this->multiline = $this->checkBoolean($params["multiline"] ?? $this->DEFAULTS["multiline"]);
         $this->duration = $this->checkNumberPositive($params["duration"] ?? $this->DEFAULTS["duration"], "duration");
         $this->pause = $this->checkNumberNonNegative($params["pause"] ?? $this->DEFAULTS["pause"], "pause");
+        $this->repeat = $this->checkBoolean($params["repeat"] ?? $this->DEFAULTS["repeat"]);
         $this->fontCSS = $this->fetchFontCSS($this->font, $this->weight, $params["lines"]);
     }
 
diff --git a/src/templates/main.php b/src/templates/main.php
index 31cf11d..7664f89 100644
--- a/src/templates/main.php
+++ b/src/templates/main.php
@@ -5,43 +5,62 @@
     style='background-color: <?= $background ?>;'
     width='<?= $width ?>px' height='<?= $height ?>px'>
 
-    <?= preg_replace("/\n/", "\n\t", $fontCSS) ?>
+    <?= $fontCSS ?>
 
-<?php $previousId = "d" . (count($lines) - 1); ?>
-<?php for ($i = 0; $i < count($lines); ++$i): ?>
-    <path id='path<?= $i ?>'>
-<?php if (!$multiline): ?>
-        <animate id='d<?= $i ?>' attributeName='d' begin='<?= ($i == 0 ? "0s;" : "") .
-    $previousId ?>.end' dur='<?= $duration + $pause ?>ms'
-            values='m0,<?= $height / 2 ?> h0 ; m0,<?= $height / 2 ?> h<?= $width ?> ; m0,<?= $height /
-     2 ?> h<?= $width ?> ; m0,<?= $height / 2 ?> h0'
-            keyTimes='0;<?= (0.8 * $duration) / ($duration + $pause) ?>;<?= (0.8 * $duration + $pause) /
-    ($duration + $pause) ?>;1' />
-<?php else: ?>
-    <?php $lineHeight = $size + 5; ?>
-    <animate id='d<?= $i ?>' attributeName='d' dur='<?= ($duration + $pause) * ($i + 1) ?>ms' fill="freeze"
-            begin='0s;<?= "d" . (count($lines) - 1) ?>.end' keyTimes='0;<?= $i / ($i + 1) ?>;<?= $i / ($i + 1) +
-    $duration / (($duration + $pause) * ($i + 1)) ?>;1'
-            values='m0,<?= ($i + 1) * $lineHeight ?> h0 ; m0,<?= ($i + 1) * $lineHeight ?> h0 ; m0,<?= ($i + 1) *
-     $lineHeight ?> h<?= $width ?> ; m0,<?= ($i + 1) * $lineHeight ?> h<?= $width ?>' />
-<?php endif; ?>
-    </path>
+    <?php $lastLineIndex = count($lines) - 1; ?>
+    <?php for ($i = 0; $i <= $lastLineIndex; ++$i): ?>
+        <path id='path<?= $i ?>'>
+            <?php if (!$multiline): ?>
+                <!-- Single line -->
+                <?php
+                // start after previous line
+                $begin = "d" . ($i - 1) . ".end";
+                if ($i == 0) {
+                    // if this is the first line, start at 0 seconds
+                    // and also after the last line if repeat is true
+                    $begin = $repeat ? "0s;d$lastLineIndex.end" : "0s";
+                }
+                // don't delete text after typing the last line if repeat is false
+                $freeze = !$repeat && $i == $lastLineIndex;
+                // empty line values
+                $yOffset = $height / 2;
+                $emptyLine = "m0,$yOffset h0";
+                $fullLine = "m0,$yOffset h$width";
+                $values = [$emptyLine, $fullLine, $fullLine, $freeze ? $fullLine : $emptyLine];
+                // keyTimes for the animation
+                $keyTimes = [
+                    "0",
+                    (0.8 * $duration) / ($duration + $pause),
+                    (0.8 * $duration + $pause) / ($duration + $pause),
+                    "1",
+                ];
+                ?>
+                <animate id='d<?= $i ?>' attributeName='d' begin='<?= $begin ?>'
+                    dur='<?= $duration + $pause ?>ms' fill='<?= $freeze ? "freeze" : "remove" ?>'
+                    values='<?= implode(" ; ", $values) ?>' keyTimes='<?= implode(";", $keyTimes) ?>' />
+            <?php else: ?>
+                <!-- Multiline -->
+                <?php
+                $nextIndex = $i + 1;
+                $lineHeight = $size + 5;
+                $lineDuration = ($duration + $pause) * $nextIndex;
+                $yOffset = $nextIndex * $lineHeight;
+                $emptyLine = "m0,$yOffset h0";
+                $fullLine = "m0,$yOffset h$width";
+                $values = [$emptyLine, $emptyLine, $fullLine, $fullLine];
+                $keyTimes = ["0", $i / $nextIndex, $i / $nextIndex + $duration / $lineDuration, "1"];
+                ?>
+                <animate id='d<?= $i ?>' attributeName='d' begin='0s<?= $repeat ? ";d$lastLineIndex.end" : "" ?>'
+                    dur='<?= $lineDuration ?>ms' fill="freeze"
+                    values='<?= implode(" ; ", $values) ?>' keyTimes='<?= implode(";", $keyTimes) ?>' />
+            <?php endif; ?>
+        </path>
     <text font-family='"<?= $font ?>", monospace' fill='<?= $color ?>' font-size='<?= $size ?>'
-<?php if ($vCenter): ?>
-        dominant-baseline='middle'
-<?php else: ?>
-        dominant-baseline='auto'
-<?php endif; ?>
-<?php if ($center): ?>
-        x='50%' text-anchor='middle'>
-<?php else: ?>
-        x='0%' text-anchor='start'>
-<?php endif; ?>
+        dominant-baseline='<?= $vCenter ? "middle" : "auto" ?>'
+        x='<?= $center ? "50%" : "0%" ?>' text-anchor='<?= $center ? "middle" : "start" ?>'>
         <textPath xlink:href='#path<?= $i ?>'>
             <?= $lines[$i] . "\n" ?>
         </textPath>
     </text>
-
-<?php $previousId = "d" . $i; ?>
 <?php endfor; ?>
 </svg>
diff --git a/src/views/RendererView.php b/src/views/RendererView.php
index 1e98b24..7c54000 100644
--- a/src/views/RendererView.php
+++ b/src/views/RendererView.php
@@ -40,6 +40,7 @@ class RendererView
             "fontCSS" => $this->model->fontCSS,
             "duration" => $this->model->duration,
             "pause" => $this->model->pause,
+            "repeat" => $this->model->repeat,
         ]);
         // render SVG with output buffering
         ob_start();
diff --git a/tests/OptionsTest.php b/tests/OptionsTest.php
index b11e997..4e53612 100644
--- a/tests/OptionsTest.php
+++ b/tests/OptionsTest.php
@@ -287,4 +287,33 @@ final class OptionsTest extends TestCase
         ];
         print_r(new RendererModel("src/templates/main.php", $params));
     }
+
+    /**
+     * Test repeat set to true, false, other
+     */
+    public function testRepeat(): void
+    {
+        // not set
+        $params = [
+            "lines" => "text",
+        ];
+        $model = new RendererModel("src/templates/main.php", $params);
+        $this->assertEquals(true, $model->repeat);
+
+        // true
+        $params = [
+            "lines" => "text",
+            "repeat" => "true",
+        ];
+        $model = new RendererModel("src/templates/main.php", $params);
+        $this->assertEquals(true, $model->repeat);
+
+        // other / false
+        $params = [
+            "lines" => "text",
+            "repeat" => "other",
+        ];
+        $model = new RendererModel("src/templates/main.php", $params);
+        $this->assertEquals(false, $model->repeat);
+    }
 }
diff --git a/tests/RendererTest.php b/tests/RendererTest.php
index 54d678e..160404f 100644
--- a/tests/RendererTest.php
+++ b/tests/RendererTest.php
@@ -8,6 +8,24 @@ require "vendor/autoload.php";
 
 final class RendererTest extends TestCase
 {
+    /**
+     * Static method to assert strings are equal while ignoring whitespace
+     *
+     * @param string $expected
+     * @param string $actual
+     */
+    public static function compareNoCommentsOrWhitespace(string $expected, string $actual)
+    {
+        // remove comments and whitespace
+        $expected = preg_replace("/\s+/", " ", preg_replace("/<!--.*?-->/s", " ", $expected));
+        $actual = preg_replace("/\s+/", " ", preg_replace("/<!--.*?-->/s", " ", $actual));
+        // add newlines to make it easier to debug
+        $expected = str_replace(">", ">\n", $expected);
+        $actual = str_replace(">", ">\n", $actual);
+        // assert strings are equal
+        self::assertSame($expected, $actual);
+    }
+
     /**
      * Test normal card render
      */
@@ -26,7 +44,9 @@ final class RendererTest extends TestCase
             "height" => "50",
         ];
         $controller = new RendererController($params);
-        $this->assertStringEqualsFile("tests/svg/test_normal.svg", $controller->render());
+        $expectedSVG = file_get_contents("tests/svg/test_normal.svg");
+        $actualSVG = $controller->render();
+        $this->compareNoCommentsOrWhitespace($expectedSVG, $actualSVG);
     }
 
     public function testMultilineCardRender(): void
@@ -134,7 +154,9 @@ final class RendererTest extends TestCase
             "height" => "50",
         ];
         $controller = new RendererController($params);
-        $this->assertStringEqualsFile("tests/svg/test_normal.svg", $controller->render());
+        $expectedSVG = file_get_contents("tests/svg/test_normal.svg");
+        $actualSVG = $controller->render();
+        $this->compareNoCommentsOrWhitespace($expectedSVG, $actualSVG);
     }
 
     /**
@@ -205,4 +227,57 @@ final class RendererTest extends TestCase
         $this->assertStringContainsString("dur='12000ms'", $controller->render());
         $this->assertStringContainsString("keyTimes='0;0.5;0.91666666666667;1'", $controller->render());
     }
+
+    /**
+     * Test repeat set to false
+     */
+    public function testRepeatFalse(): void
+    {
+        $params = [
+            "lines" => implode(";", [
+                "Full-stack web and app developer",
+                "Self-taught UI/UX Designer",
+                "10+ years of coding experience",
+                "Always learning new things",
+            ]),
+            "center" => "true",
+            "vCenter" => "true",
+            "width" => "380",
+            "height" => "50",
+            "repeat" => "false",
+        ];
+        $controller = new RendererController($params);
+        $actualSVG = preg_replace("/\s+/", " ", $controller->render());
+        $this->assertStringContainsString("begin='0s'", $actualSVG);
+        $this->assertStringContainsString(
+            "begin='d2.end' dur='5000ms' fill='freeze' values='m0,25 h0 ; m0,25 h380 ; m0,25 h380 ; m0,25 h380'",
+            $actualSVG
+        );
+        $this->assertStringNotContainsString(";d3.end", $actualSVG);
+    }
+
+    /**
+     * Test repeat set to false on multiline card
+     */
+    public function testRepeatFalseMultiline(): void
+    {
+        $params = [
+            "lines" => implode(";", [
+                "Full-stack web and app developer",
+                "Self-taught UI/UX Designer",
+                "10+ years of coding experience",
+                "Always learning new things",
+            ]),
+            "center" => "true",
+            "vCenter" => "true",
+            "width" => "380",
+            "height" => "200",
+            "multiline" => "true",
+            "repeat" => "false",
+        ];
+        $controller = new RendererController($params);
+        $actualSVG = preg_replace("/\s+/", " ", $controller->render());
+        $this->assertStringContainsString("begin='0s'", $actualSVG);
+        $this->assertStringNotContainsString(";d3.end", $actualSVG);
+    }
 }
diff --git a/tests/svg/test_normal.svg b/tests/svg/test_normal.svg
index ad69e4f..7c7b70f 100644
--- a/tests/svg/test_normal.svg
+++ b/tests/svg/test_normal.svg
@@ -5,9 +5,9 @@
     style='background-color: #00000000;'
     width='380px' height='50px'>
 
-    
     <path id='path0'>
-        <animate id='d0' attributeName='d' begin='0s;d3.end' dur='5000ms'
+        <animate id='d0' attributeName='d' begin='0s;d3.end'
+            dur='5000ms' fill='remove'
             values='m0,25 h0 ; m0,25 h380 ; m0,25 h380 ; m0,25 h0'
             keyTimes='0;0.8;0.8;1' />
     </path>
@@ -20,7 +20,8 @@
     </text>
 
     <path id='path1'>
-        <animate id='d1' attributeName='d' begin='d0.end' dur='5000ms'
+        <animate id='d1' attributeName='d' begin='d0.end'
+            dur='5000ms' fill='remove'
             values='m0,25 h0 ; m0,25 h380 ; m0,25 h380 ; m0,25 h0'
             keyTimes='0;0.8;0.8;1' />
     </path>
@@ -33,7 +34,8 @@
     </text>
 
     <path id='path2'>
-        <animate id='d2' attributeName='d' begin='d1.end' dur='5000ms'
+        <animate id='d2' attributeName='d' begin='d1.end'
+            dur='5000ms' fill='remove'
             values='m0,25 h0 ; m0,25 h380 ; m0,25 h380 ; m0,25 h0'
             keyTimes='0;0.8;0.8;1' />
     </path>
@@ -46,7 +48,8 @@
     </text>
 
     <path id='path3'>
-        <animate id='d3' attributeName='d' begin='d2.end' dur='5000ms'
+        <animate id='d3' attributeName='d' begin='d2.end'
+            dur='5000ms' fill='remove'
             values='m0,25 h0 ; m0,25 h380 ; m0,25 h380 ; m0,25 h0'
             keyTimes='0;0.8;0.8;1' />
     </path>