diff --git a/CHANGELOG.md b/CHANGELOG.md index 40b8b352..2063a28b 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -6,16 +6,18 @@ Check [Keep a Changelog](http://keepachangelog.com/) for recommendations on how ## [Unreleased] +## [0.0.16] - 2025-05-07 + ### Added +- Pan & zoom for the graphs in both the IDE extensions and the web version - Documentation now renders `dot` and `dot-cfg` (CFG-styled DOT diagrams) -- Documentation about our usage of Graphviz -- Documentation about the representation of control flow in the graph +- Added docs about GraphViz tips and tricks +- Added docs about our choices of visuals - Added support for "special" function detection and process-terminating nodes in the graph. This is currently only enabled in the `/render` page to slowly build up a collection of functions to match and confidence in the representation before adding to the main tool. -- When changing the code language, the URL is updated to reflect that. -- Pan & zoom for the graphs in both the IDE extensions and the web version +- In the web demo, URL now updates to reflect the selected language. ### Fixed @@ -31,8 +33,7 @@ Check [Keep a Changelog](http://keepachangelog.com/) for recommendations on how with unexpected recursion in the command. It is also a nicer name. - Language definitions are now more unified, making it easier to add new languages. - `language` URL query parameter now takes language name instead of index. -- Sharing now shares full config in addition to code. -- Sharing now uses the `compressed=` query parameter for all information. +- Sharing now includes configuration (color scheme, switch handling, highlighting) in addition to the code. - Migrated from Bun Test to Vitest. Tests are now run using `bun vitest`. - Web version layout changed to always fit in one screen (no scrollbar). diff --git a/README.md b/README.md index 4d2fbdb4..d90e638e 100644 --- a/README.md +++ b/README.md @@ -52,6 +52,14 @@ Custom color schemes are created via the [interactive demo](https://tmr232.githu 4. Paste the config into the `Custom Color Scheme` field in the VSCode extension settings.
![The Custom Color Scheme field in the settings](media/screenshots/color-scheme/settings-custom.png) +## Pan & Zoom + +If the graph is too small, enable the "Pan & Zoom" checkbox. +You can zoom with the mouse wheel, and pan by dragging the mouse. +Additionally, the view will automatically pan to the highlighted node when it changes. + +![Demonstration of pan & zoom in VSCode](media/gif/panzoom-demo.gif) + ## Supported Languages - [Go](https://tmr232.github.io/function-graph-overview/?language=go) diff --git a/media/gif/panzoom-demo.gif b/media/gif/panzoom-demo.gif new file mode 100644 index 00000000..32a70f7a Binary files /dev/null and b/media/gif/panzoom-demo.gif differ diff --git a/package.json b/package.json index fb4abe76..8e241b6b 100644 --- a/package.json +++ b/package.json @@ -90,7 +90,7 @@ "//": "START EXTENSION ATTRIBUTES", "publisher": "tamir-bahar", "name": "function-graph-overview", - "version": "0.0.15", + "version": "0.0.16", "description": "Function Graph Overview", "displayName": "Function Graph Overview", "icon": "./media/icon.png", diff --git a/src/components/PanzoomComp.svelte b/src/components/PanzoomComp.svelte index 0d7e5794..e7984f83 100644 --- a/src/components/PanzoomComp.svelte +++ b/src/components/PanzoomComp.svelte @@ -79,6 +79,7 @@ const zoomable: Action = ( minScale: 1, contain: "outside", cursor: "default", + duration: 300, }); node.parentElement?.addEventListener("wheel", panzoom.zoomWithWheel); registerPanzoomOnclick(