u/VenniCidi

I'm working on Flowy.Blazor v2
▲ 39 r/Blazor

I'm working on Flowy.Blazor v2

I'm working on Flowy.Blazor v2

v1 shipped as a hierarchical tree visualizer (drag & drop, auto-layout, zoom/pan, JSON import/export, custom node templates). v2 turns it into a proper visual editor — way bigger scope than I expected.

New in v2 (not in v1):

Canvas & navigation

  • Free canvas mode alongside tree mode (multi-root, manual positioning)
  • Programmatic viewport — FitViewAsyncSetViewportAsync (animated), GetViewportAsync
  • Fit to subset — fit the view to a specific set of item IDs
  • Pan boundaries (translateExtent) and min/max zoom clamps
  • Auto-pan when dragging near canvas edges (configurable speed + threshold)
  • Coordinate helpers — ScreenToFlowPositionAsync / FlowToScreenPositionAsync

Selection & editing

  • Marquee selection — shift-drag to box-select
  • Ctrl-click multi-select
  • Programmatic selection API — SelectItemAsyncSelectItemsAsyncClearSelectionAsyncRemoveSelectedAsync
  • Undo / Redo with configurable history depth
  • Bulk mutations — DeleteItemsAsync, read-only queries (AllItemsRootsGetChildren, etc.)
  • Promote / demote items in the tree, with OnTreeRestructured event
  • Manual layout — drop items at custom positions, OnItemRepositioned event
  • Snap to grid (configurable X/Y)

Edges

  • Edge markers — arrow heads on start/end with multiple variants
  • Edge styling — stroke width, dash patterns, animated dashes
  • Edge labels with animation support

Drag & drop

  • Configurable drag threshold
  • Drop position bands (left/right/under)
  • Drop validation — reject by depth, position, custom rules, with ValidationMessage
  • Cross-canvas dragging via a drag registry — move items between separate canvases
  • NoDrag class to opt subtrees out of dragging

Events

  • Pane events: OnPaneClickOnPaneContextMenuOnItemContextMenu
  • Hover events: OnItemMouseEnter / Leave / Move
  • Drag event log, drop events, tree restructure, error events

Other

  • Configurable keyboard bindings — every key (delete, undo, redo, pan/zoom activation, selection modifiers) is overridable; full disable supported
  • SVG export with options
  • Light/dark theming with token overrides
  • Background variants (slot + overlay) you can switch live
  • Minimap
  • Customizable toolbox palette

Small UX wins too: toolbar hides while dragging, smoother layout animations (JS-driven transforms), order map preserved across JSON round-trips.

u/VenniCidi — 7 days ago