Zoom button

JBZoo · Dec 13, 2019 · 6b63267 · 6b63267
1 parent 45da888
commit 6b63267
Show file tree

Hide file tree

Showing 2 changed files with 19 additions and 17 deletions.
diff --git a/src/Helper.php b/src/Helper.php
@@ -35,7 +35,6 @@ public static function renderHtml(Graph $graph, array $params = []): string
         $title = $params['title'] ?? '';
 
         $scriptUrl = "https://unpkg.com/mermaid@{$version}/dist/mermaid.js";
-        $bootstrap = 'https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css';
 
         // @see https://mermaid-js.github.io/mermaid/#/mermaidAPI?id=loglevel
         $mermaidParams = \json_encode([
@@ -56,33 +55,37 @@ public static function renderHtml(Graph $graph, array $params = []): string
             ],
         ], JSON_PRETTY_PRINT);
 
-        $code = '';
+        $debugCode = '';
         if ($isDebug) {
-            $code .= '<hr>';
-            $code .= '<pre><code>' . htmlentities((string)$graph) . '</code></pre>';
-            $code .= '<hr>';
+            $debugCode .= '<hr>';
+            $debugCode .= '<pre><code>' . htmlentities((string)$graph) . '</code></pre>';
+            $debugCode .= '<hr>';
             $graphParams = \json_encode($graph->getParams(), JSON_PRETTY_PRINT);
-            $code .= "<pre><code>Params = {$graphParams}</code></pre>";
+            $debugCode .= "<pre><code>Params = {$graphParams}</code></pre>";
         }
 
         return implode(PHP_EOL, [
             '<!DOCTYPE html>',
             '<html lang="en">',
             '<head>',
             '    <meta charset="utf-8">',
-            "    <link rel=\"stylesheet\" href=\"{$bootstrap}\">",
+            '   <script src="https://code.jquery.com/jquery-3.4.1.slim.min.js"></script>',
+            "   <script src=\"{$scriptUrl}\"></script>",
             '</head>',
             '<body>',
-            '    <main role="main" class="container">',
             $title ? "<h1>{$title}</h1><hr>" : '',
-            '    <div class="mermaid" style="margin-top:20px;">',
-            (string)$graph,
-            '</div>',
-            $code,
-            '    </div>',
-            '</main>',
-            "    <script src=\"{$scriptUrl}\"></script>",
-            "    <script>mermaid.initialize({$mermaidParams});</script>",
+            '    <div class="mermaid" style="margin-top:20px;">' . $graph . '</div>',
+            '    <input type="button" class="btn btn-primary" id="zoom" value="Zoom In">',
+            $debugCode,
+            "    <script>
+                     mermaid.initialize({$mermaidParams});
+                     $(function () {
+                        $('#zoom').click(() => {
+                            $('.mermaid').removeAttr('data-processed');
+                            $('.mermaid').width($('.mermaid svg').css('max-width'));
+                        });
+                     });
+                </script>",
             '</body>',
             '</html>',
         ]);

diff --git a/tests/FlowchartTest.php b/tests/FlowchartTest.php
@@ -191,7 +191,6 @@ public function testComplexGraph()
 
         $html = $graph->renderHtml();
         isContain($graph, $html);
-        isContain('<script>mermaid.initialize(', $html);
     }
 
     public function testSimpleSubGraph()