Skip to content

Add explicit context menu commands for the experimental visual designer#19262

Open
shenglol wants to merge 6 commits intomainfrom
shenglol/visualizer-experimental-menu
Open

Add explicit context menu commands for the experimental visual designer#19262
shenglol wants to merge 6 commits intomainfrom
shenglol/visualizer-experimental-menu

Conversation

@shenglol
Copy link
Contributor

@shenglol shenglol commented Mar 24, 2026

Summary

Replace the hidden bicep.experimental.visualizerV2 setting with discoverable context menu commands:

  • Open Bicep Visual Designer (Experimental)
  • Open Bicep Visual Designer to the Side (Experimental)

These appear alongside the existing visualizer commands in the command palette, editor context menu, explorer context menu, and editor title context menu.

Other improvements

  • Reveal file range: open documents in the correct editor group instead of replacing the webview
  • Background flash: fix theme initialization to eliminate white flash on webview open
  • Layout animation: hide graph during major topology changes, use survival ratio to decide visibility
  • Node centering: spawn nodes centered at origin instead of top-left aligned
  • Module demotion: render empty modules as resource nodes with folder icon
  • Grab cursor: enlarge to 32px and properly hide native cursor during drag

…e background flash

- revealFileRange: open documents in an existing text editor group instead of
  ViewColumn.Beside to avoid creating a third column
- Move background-color from body to #root in GlobalStyle to avoid conflicting
  with VS Code's body background
- Initialize activeThemeAtom with getThemeFromBody() so the first render uses
  the correct theme instead of always starting with lightTheme
- Remove spring bounce (bounce: 0) for smoother node animations
- Hide graph during major topology changes (>50% nodes replaced) to
  avoid showing frozen nodes while ELK computes
- Keep graph visible for incremental edits (add/remove a few nodes)
- Use node centers for position snapshots so spawn centroid matches
  the visual center of the existing graph
On initial DOM measurement, shift the node's min position back by
half its dimensions so the node's center aligns with the spawn
origin rather than its top-left corner.
- Empty modules (no children) now render as ResourceDeclaration
  instead of ModuleDeclaration for a consistent leaf-node appearance
- Add resourceType to atomic module data so ResourceDeclaration
  can display the type label
- Map <module> resourceType to folder icon in ResourceDeclaration
- Remove unused data parameter from getContentComponent
- Remove bicep.experimental.visualizerV2 setting
- Add bicep.showVisualDesigner and bicep.showVisualDesignerToSide
  commands with menu entries in all context menus and command palette
- Old visualizer commands always open the Cytoscape.js visualizer
- New visual designer commands always open the React-based visualizer
- Increase grab cursor size from 22px to 32px
- Use CSS class with !important to hide native cursor on container
  and all child elements during drag
@github-actions
Copy link
Contributor

Test this change out locally with the following install scripts (Action run 23468505177)

VSCode
  • Mac/Linux
    bash <(curl -Ls https://aka.ms/bicep/nightly-vsix.sh) --run-id 23468505177
  • Windows
    iex "& { $(irm https://aka.ms/bicep/nightly-vsix.ps1) } -RunId 23468505177"
Azure CLI
  • Mac/Linux
    bash <(curl -Ls https://aka.ms/bicep/nightly-cli.sh) --run-id 23468505177
  • Windows
    iex "& { $(irm https://aka.ms/bicep/nightly-cli.ps1) } -RunId 23468505177"

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant