- #373
ecf0d23
Thanks @davidkpiano! - Updated API to point to projects rather than systems
- #293
67e24ae
Thanks @jacksteamdev! - You can now inspect via WebSocket. To do that you can add the WebSocket server url as a query parameter, for examplehttps://stately.ai/viz?inspect&server=ws://localhost:3000
- #343
632f950
Thanks @Andarist! - Fixed panning/dragging interations (the ones that include pressing pointer down) in FireFox.
- #338
196e44d
Thanks @riccardo-forina! - You can now visualize descriptions added directly to state nodes and transitions
- #336
225757d
Thanks @kmannislands! - Remove unecessary feature policy claims from generated embed iframes
- #332
9f93d67
Thanks @Andarist! - Fixed the app crashing when processing invalid actions - like when using a guard accidentally in a place of an action.
-
#334
fecdc01
Thanks @davidkpiano! - Self-transitions on the machine will no longer cause graph layout to fail:import { createMachine } from 'xstate'; const machine = createMachine({ on: { // These will now display as expected LOAD: {}, UPDATE: {}, }, states: { something: {}, }, });
- #269
0f8e205
Thanks @Andarist! - A possibility to start panning the canvas by pressing the middle button of a mouse has been added.
-
#237
7599a26
Thanks @rthor, @Andarist! - Added more keyboard interactions to the canvas:- arrows (↑↓→←) can be used to move the canvas around (with Shift the step move is increased)
- +/- can be used to zoom in/out
- Shift + 1 can be used to fit the machine on the canvas
-
#315
f98ce3f
Thanks @farskid! - Tweak controls options in embed mode- RESET and Fit To View are now available in all embed modes with
controls=1
- Zoom in and out buttons are only available if controls and Zoom are both enabled
- Hand tool (pan button) is only available if controls and pan are both enabled
- Reset canvas button and Help button are no longer available in embed mode
- RESET and Fit To View are now available in all embed modes with
- #298
0c3bfec
Thanks @christoph-fricke! - Align the visualization of custom actions with the visualization of XState-provided actions. Previously, the labels for custom actions were not rendered with a bold font.
- #312
d10238a
Thanks @Andarist! - Updated XState to its latest version (4.26.0). Visualizer should be able to use the new goodies now, such as it should provide access to theinvoke.meta
object in the invoke creators.
- #303
2cb5ccf
Thanks @mattpocock! - Fixed an issue where events were being duplicated in the right-hand events panel.
-
#209
45cdb47
Thanks @farskid! - Embedded Mode!The visualizer/inspector can now be used in embedded mode. In this mode, some parts of the application can be configured such as control buttons, panning, zooming, etc.
The embed preview frame lets users configure how they want the embedded visualizer to look:
-
#198
784ded9
Thanks @mattpocock! - Added generated OG images to visualized machine links. You can copy these links yourself to embed an up-to-date image of your visualized machine - for instance in docs. Here's where the share button is in the viz:
-
#246
22f1724
Thanks @Andarist! - Added a hand icon to the canvas' toolbar:This allows you to enable the "pan mode" to drag the canvas around without holding the spacebar button down at the same time.
- #263
4a0f041
Thanks @Andarist! - Fixed an issue with right-side panels getting cut off after stretching them and shrinking back with the resize handle.
- #240
fbb2f00
Thanks @mattpocock! - Added support for using setInterval, setTimeout, clearInterval and clearTimeout in the viz.
-
#217
92a2bba
Thanks @mattpocock! - Added a button to allow users to report any issues they find, using a GitHub issue template.
- #238
e074059
Thanks @mattpocock! - When you press visualize, machines will now automatically 'fit to view'. This prevents various bugs around state machines appearing not to be visible, when they're actually just off screen.
-
#214
b9020a6
Thanks @davidkpiano! - Multiple actors are now correctly visualized in the actors panel. This includes actors that are:- Created with
createMachine(...)
(automatically interpreted by default) - Invoked with
invoke: { ... }
- Spawned with
spawn(...)
- Created with
- #247
bdbc892
Thanks @Andarist! - Fixed an issue with the code editor becoming visually broken after saving a machine.
-
#215
f030057
Thanks @mattpocock! - Added a welcome area for new users to help new folks understand what the viz can do.
-
#210
a8dbee6
Thanks @davidkpiano! - You can now click the Fit to view button to fit your entire diagram into view:CleanShot.2021-08-26.at.10.35.41.mp4
- #203
fd35c53
Thanks @Andarist! - Fixed an issue with action buttons for the editor being often left out of the screen after viewport resizes.
- #208
a1b7379
Thanks @Andarist! - Fixed an issue with global keybindings being also triggered when providing input to input-like elements.
-
#228
7ca7e9a
Thanks @davidkpiano! - The layout algorithm was parenting some of the edges incorrectly. This has been fixed.
- #190
fd64139
Thanks @davidkpiano! - In the visualized machine, the entire event is now clickable.
- #189
77e808b
Thanks @davidkpiano! - Styles for invoked actors are now consistent with other action styles.
- #182
80f6966
Thanks @Andarist! - All keyboard shortcuts and keyboard-based interactions should now only allow platform-specific meta keys to be used. That means that on Mac they work with CMD and on other platforms they work with Ctrl.
- #192
87ffc50
Thanks @davidkpiano! - Sometimes, initial states will end up in an unexpected place, such as all the way to the right of the graph. This was due to the graph layout algorithm trying to prioritize all transitions to point to the right, even transitions cycling back to the initial state. Now, transitions coming from the initial state are prioritized over all others, to ensure that the initial state ends up in an expected top-left placement.
- #186 Thanks @santicros! - Fixed an issue which caused browsers to zoom together with the visualization canvas when zooming using wheel.
- #187
1d69848
Thanks @Andarist! - Fixed an issue with inspector crashing on some inline action objects used in the config.
- #195
3ed3c0d
Thanks @davidkpiano! - The graph layout algorithm (using ELK) is now more resilient to layout failures caused by some layout options (such as compaction), so heuristics have been applied that make it more resilient to potential layout failures.
Initial release of the new Visualizer.