refactor: migrate the "Animation" story to TypeScript by tbouffard · Pull Request #635

refactor: migrate the "Animation" story to TypeScript by tbouffard · Pull Request #635 · maxGraph/maxGraph

packages/html/stories/Animation.stories.ts (4)

18-18: LGTM! Clean type import declaration.

The type-only import for CellStyle follows TypeScript best practices.

Line range hint 42-51: LGTM! Well-typed style object.

The CellStyle type annotation provides good type safety for the vertex styling properties.

77-79: LGTM! Proper boolean values for edge properties.

Converting numeric values to proper boolean types improves type safety and readability.

87-91: Consider refactoring repetitive DOM operations.

The code could be simplified to reduce repetition and improve null safety.

const path0 = state?.shape?.node.getElementsByTagName('path')[0];
const path1 = state?.shape?.node.getElementsByTagName('path')[1];

if (path0) {
  path0.removeAttribute('visibility');
  path0.setAttribute('stroke-width', '6');
  path0.setAttribute('stroke', 'lightGray');
}

path1?.setAttribute('class', 'flow');

Also, consider adding a comment explaining why the non-null assertion (!) is safe to use on e1.

✅ Verification successful

Refactoring suggestion is valid and safe to implement

The suggested refactoring will improve code readability while maintaining the same functionality. The non-null assertion on e1 is safe as the edge is created and configured immediately before use.

🏁 Scripts executed

The following scripts were executed for the analysis:

Error: No shell scripts found

Script:

#!/bin/bash
# Find the context around this code
rg -B 10 -A 5 "state\?\.shape\?\.node\.getElementsByTagName\('path'\)" packages/html/stories/Animation.stories.ts

# Look for similar patterns of DOM operations on SVG paths
rg "getElementsByTagName\('path'\)" --type ts

# Find usage of graph.view.getState
rg "graph\.view\.getState" --type ts

Length of output: 5969