From f59d3f948e785a766d17a13662412fb5b2e44001 Mon Sep 17 00:00:00 2001
From: Thomas Bouffard <27200110+tbouffard@users.noreply.github.com>
Date: Mon, 13 Jan 2025 15:54:56 +0100
Subject: [PATCH] refactor: migrate the "Animation" story to TypeScript

Rationale:
  - Ease the maintenance
  - Detect the errors earlier
---
 ...mation.stories.js => Animation.stories.ts} | 22 +++++++++----------
 1 file changed, 11 insertions(+), 11 deletions(-)
 rename packages/html/stories/{Animation.stories.js => Animation.stories.ts} (75%)

diff --git a/packages/html/stories/Animation.stories.js b/packages/html/stories/Animation.stories.ts
similarity index 75%
rename from packages/html/stories/Animation.stories.js
rename to packages/html/stories/Animation.stories.ts
index a6f1939d53..1e0aba6545 100644
--- a/packages/html/stories/Animation.stories.js
+++ b/packages/html/stories/Animation.stories.ts
@@ -15,7 +15,7 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import { Graph, Point } from '@maxgraph/core';
+import { type CellStyle, Graph, Point } from '@maxgraph/core';
 
 import { globalTypes, globalValues } from './shared/args.js';
 import { createGraphContainer } from './shared/configure.js';
@@ -32,14 +32,14 @@ export default {
   },
 };
 
-const Template = ({ label, ...args }) => {
+const Template = ({ label, ...args }: Record<string, string>) => {
   const container = createGraphContainer(args);
 
   const graph = new Graph(container);
   graph.setEnabled(false);
   const parent = graph.getDefaultParent();
 
-  const vertexStyle = {
+  const vertexStyle: CellStyle = {
     shape: 'cylinder',
     strokeWidth: 2,
     fillColor: '#ffffff',
@@ -74,21 +74,21 @@ const Template = ({ label, ...args }) => {
         strokeWidth: 3,
         endArrow: 'block',
         endSize: 2,
-        endFill: 1,
+        endFill: true,
         strokeColor: 'black',
-        rounded: 1,
+        rounded: true,
       },
     });
-    e1.geometry.points = [new Point(230, 50)];
+    e1.geometry && (e1.geometry.points = [new Point(230, 50)]);
     graph.orderCells(true, [e1]);
   });
 
   // Adds animation to edge shape and makes "pipe" visible
-  const state = graph.view.getState(e1);
-  state.shape.node.getElementsByTagName('path')[0].removeAttribute('visibility');
-  state.shape.node.getElementsByTagName('path')[0].setAttribute('stroke-width', '6');
-  state.shape.node.getElementsByTagName('path')[0].setAttribute('stroke', 'lightGray');
-  state.shape.node.getElementsByTagName('path')[1].setAttribute('class', 'flow');
+  const state = graph.view.getState(e1!);
+  state?.shape?.node.getElementsByTagName('path')[0].removeAttribute('visibility');
+  state?.shape?.node.getElementsByTagName('path')[0].setAttribute('stroke-width', '6');
+  state?.shape?.node.getElementsByTagName('path')[0].setAttribute('stroke', 'lightGray');
+  state?.shape?.node.getElementsByTagName('path')[1].setAttribute('class', 'flow');
 
   return container;
 };