3.0.0 beta 1

.NET 6!

A lot of things changed in this version, a lot of breaking changes were introduced but I believe it was necessary.
Many changes were required to make everything clearer, customizable and cleaner (code wise).
I'm aiming to completely decouple the Core library from the UI, because I'm thinking of giving MAUI Diagrams a try very soon!

https://www.nuget.org/packages/Z.Blazor.Diagrams.Core/3.0.0-beta.1
https://www.nuget.org/packages/Z.Blazor.Diagrams/3.0.0-beta.1

Added

• BlazorDiagram class (inherits Diagram) to the blazor package to replace the old Core one
• BlazorDiagramOptions that inherit from the other diagram options to add Blazor (UI) specific options
• Blazor.Diagrams.Models.SvgNodeModel class to represent a node that needs to be rendered in the SVG layer
• GetBehavior<T> method to Diagram in order to retrieve a registered behavior
• KeyboardShortcutsBehavior class which handles keyboard shortcuts/actions:
  • SetShortcut: sets an action (Func<Diagrambase, ValueTask>) to be executed whenever the specified combination is pressed
  • RemoveShortcut: removes a defined action (if it exists)
• KeyboardShortcutsDefaults containing the default shortcuts that were deleted (DeleteSelection and Grouping)
• Anchors functionality:
  • An Anchor determines where on an element the link will connect
  • Instead of links requiring the source and target to be either both nodes or both ports, there is now only one Source and Target of type Anchor
  • This lets the link not worry about the details of from/to where its going, as long as the anchor provides it with its position when asked for
  • Current implementations:
    • SinglePortAnchor: Specifies that the connection point is a specific port (supports shape & alignment)
    • ShapeIntersectionAnchor: Specifies that the connection point is the intersection of a line with the node's shape
    • DynamicAnchor: Specifies that the connection point is one of the given positions (closest)
• Virtual IShape GetShape() method on nodes (default Rectangle) and ports (default Circle)
• Options.LinksLayerOrder to indicate the order of the links layer (svg for blazor)
• Options.NodesLayerOrder to indicate the order of the nodes layer (html for blazor)
• Support for SVG groups that also represent children as a hierarchy (SvgGroupModel)
• Node renderer will now append, in addition to node locked, the classes selected grouped
• IHasBounds and IHasShape interfaces to both nodes and ports
• IPositionProvider to encapsulate how certain positions are calculated given a model
  • They are used for dynamic anchors and controls for now
  • BoundsBasedPositionProvider returns the position based on the bounds of the model (e.g. (0.5, 0.5) would be the center)
  • ShapeAnglePositionProvider returns the position as the point at the angle of the shape
  • LinkPathPositionProvider returns the position based on the link's path (getPointAtLength)
• Links have a reference to Diagram now
• PointerEnter and PointerLeave events for nodes and links for now
• GeneratedPathResult and Paths to BaseLinkModel to always have access to the actual paths
• Controls feature (beta):
  • They are things that can show up on top of nodes/links and can even be clicked to be executed
  • Their UI is also picked up from the registered components
  • Control designates a control that has a position and will be rendered if visible
  • ExecutableControl designates a control that has a position and will be executed when pressed (PointerDown event)
  • Default controls for now are:
    • BoundaryControl shows the model's boundary
    • RemoveControl shows a button that when clicked, removes the model from the diagram
    • DragNewLink shows a button that when clicked, starts a new link dragging from that node
• GridWidget a background grid that moves with the diagram instead of being fixed like in the Snap to grid example
• More unit tests

Changed

• Core package changes:
  • Web dependency was removed from the Core package
    • Diagram is now abstract
    • These changes were done to decouple the core from the rendering, in the future we might have a MAUI renderer
• Diagram.GetComponentForModel now accepts a checkSubclasses argument (default true)
• Constraints now must return a ValueTask<bool> instead of a simple bool
• Renamed AllLinks to PortLinks for more clarity on which links, since Links contains the others
• Dragging links from ports will now follow the mouse at the same pace minus 5 pixels so that it doesn't go on top of the link it self or other ports
• How groups are rendered
  • GroupRenderer will take care of rendering the group with the appropriate style and classes
  • Only GroupNodes is required, GroupLinks was deleted because all links are shown in the svg layer (with appropriate order)
• Diagram.AddGroup will now return the added group
• All Mouse events have been converted to Pointer events
• PathGenerator now return SvgPath instead of just strings
• NavigatorWidget was rewritten to be faster, lighter, WORKING and customizable
  • It now can also take the shape of the nodes into account (rect and ellipse for now)

Fixed

• Virtualization throwing a JSException (#155)
• Ports not rendering correctly because of the missing @key (#220)
• Link not refreshing when a new vertex is created, which was showing out of link

Removed

• DefaultNodeComponent and DefaultLinkComponent options (see GetComponentForModel changes)
• RenderLayer from the Core package and all its usage
• DeleteSelectionBehavior since there is a new keyboard shortcuts system
• GroupingBehavior since there is a new keyboard shortcuts system
• BaseLinkModelExtensions since it was Obselete
• Unnecessary port refreshes when dragging a link ends or when link snapping
• ShapeDefiner delegate and constructor arguments on nodes since delegates can't be serialized
• TouchX events

2.1.6

Fixed

• ZoomBehavior using new zoom before Clamp to set Pan. (fixes #141)
• PanChanged not triggering when zooming with the mouse wheel.
• Zoom value decreasing when the mouse wheel delta is zero.
• Ports aren't refreshed when links are added in OnInitializedAsync. (fixes #111)

2.1.4

Added

• MouseDoubleClick (500ms interval) event in Diagram.
• GetScreenPoint in Diagram in order to get the screen points from a diagram point (e.g. node position).
• Title property in NodeModel, used by the default node widget.

Fixed

• ZoomToFit not triggering ZoomChanged event.
• SourceNode and TargetNode not being set in BaseLinkModel when the ports change.

2.1.3

Added

• Multiple demo projects by TrevorDArcyEvans showing:
  • Minimal project setup
  • Custom nodes & links
  • GraphShape layout algorithms

Fixed

• Link labels not appearing (fixes #109).
• ZoomToFit throwing a NullReferenceException when one of the nodes doesn't have a size yet (fixes #118).

2.1.2

Fixed

• Inability to interact with nodes after re-using ids on new node instances.

2.1.1

Fixed

• Exception when navigating to the Options page (#95).
• Portless links not deleted when node is deleted (#96).

2.1.0

Added

• ScaleFactor zoom option (@joezearing)
• Add Constraints options which gives you more control on what happens in the diagram:
  • ShouldDeleteNode: Whether a selected node should be deleted or not
  • ShouldDeleteLink: Whether a selected link should be deleted or not
  • ShouldDeleteGroup: Whether a selected group should be deleted or not
• DeleteSelectionBehavior unit tests

Changes

• Batched more things

2.0.0

Added

• GroupUngrouped event (not the greatest name 😄)
• Touch events TouchStart, TouchMove and TouchEnd
• Mobile support
  • Dragging new links from ports
  • Selecting models
  • Panning
  • Dragging movables
• RemoveGroup method to delete a group and all its children
• Pressing DEL on a selected group will now remove it
• Ability for links to be segmentable (by setting Segmentable to true)
  • Clicking a segmentable link will add a new vertex in that position
  • Vertices are movable models, which mean you can drag them to reposition them
  • Double clicking a vertex will delete it
• Link routers
  • Routers are functions that take into account a link's vertices, and decide whether to add more points along the path
  • They are specified using Options.Links.DefaultRouter or by setting Router in links
  • There are currently two routers, Routers.Normal and Routers.Orthogonal
  • You can provide your own router by simply respecting the delegate Router
• Link path generators
  • Path generators are functions that takes as input a link's route, and return a list of generated SVG paths (strings), as well as the position and angle of the source/target markers
  • They are specified using Options.Links.DefaultPathGenerator or by setting PathGenerator in links
  • There are currently two generators, PathGenerators.Straight and PathGenerators.Smooth
  • You can provide your own generator by simply respecting the delegate PathGenerator
• On-the-fly link markers
  • A link can either have a SourceMarker or TargetMarker
  • Link markers are SVG Paths with a known width (to calculate angle and where to cut the links)
  • Static markers are available (e.g. LinkMarker.Arrow) as well as utility methods to create known shapes
• MouseClick event, which only fires if the model (or canvas) in question didn't move, as opposed to MouseUp
• data-X-id HTML attributes to nodes, ports and links
• Abstract BaseLinkModel, LinkModel now inherits from it
  • All the parts of the library now refer to BaseLinkModel instead of LinkModel (e.g. PortModel.Links)
• Color, SelectedColor and Width properties to LinkModel
• Link labels
  • Can have custom models, using RegisterModelComponent
  • Due to the limitation of SVGs in Blazor, labels aren't interactive and must be created using MarkupString
  • They can have a specified distance
    • A number between 0 and 1: Position relative to the link's length
    • A positive number, greater than 1: Position away from the start
    • A negative number, less than 0: Position away from the end
  • They can have an offset (Point)
• Link snapping
  • While the user is dragging a link, it will try to find the closest port it can attach the link to
  • Options (in DiagramOptions.Links): EnableSnapping and SnappingRadius
• GetBounds extension method on IEnumerable<NodeModel>
• Expose Padding property in GroupModel
• Factory option to Options.Links
  • This is a delegate (BaseLinkModel LinkFactory(DiagramManager diagram, PortModel sourcePort)) to let you control how links are created
• Groups (of type DiagramGroupOptions) option to DiagramOptions
  • Enabled option controls whether users are allow to group nodes together or not
  • KeyboardShortcut (Func<KeyboardEventArgs, bool>) controls what keys need to be pressed to trigger the behavior
  • Factory lets you control how groups are created
• GetRelativePoint method to Diagram
  • This method gives the relative mouse point on the canvas
• SelectionBoxWidget
  • If used, holding SHIFT and clicking then dragging will show a selection box that selects all models intersecting with it
• Minified versions of all assets
• Observe document body mutations to update canvas container
• Ability to add/remove children after the group is created
• Diagram now also inherits Model
• Ability to suspend refreshes in Diagram by setting Diagram.SuspendRefresh to true
  • As the name suggests, this will stop the method Refresh from triggering the event Changed, which tries to re-render the UI
• Batch(Action action) in Diagram.
  • This is just a helper method that suspends refreshes, runs the action and then refreshes
  • This is now used internally in node/link layers to only trigger 1 UI re-render
• Add FillColor parameter to NavigatorWidget
• Ability to create links between two nodes directly, without needing ports
  • This depends on the shape of the nodes, which can be defined by providing a ShapeDefiner in NodeModel's constructor
  • The default shape definer is Shapes.Rectangle
  • Currently, there is only the Rectangle and Ellipse (including Circle) shapes, others will be added later
  • This also works for groups, since groups are nodes
• Unit tests

Changed

• Renamed DiagramManager to Diagram
• Remove need to specify Name in diagram's CascadingValue
• Separate Nodes/Links from DiagramManager, they are now layers (Diagram.Nodes and Diagram.Links)
• • Adding/Removing nodes or links is now done inside these layers (e.g. Diagram.Nodes.Add)
  • Added/Removed events are now inside these layers, not in the diagram (e.g. Diagram.Links.Added)
• LinkAttached event removed (TargetPortChanged is the alternative)
• It is now mandatory to add nodes to diagram before creating groups
• SelectionChanged event only contains the model now, use Selected property
• Removed SelectedModels in favor of GetSelectedModels(), this is because we don't hold a list of selected models anymore (unnecessary)
• Renamed DiagramSubManager to Behavior, it makes more sense
• RegisterBehavior now takes as an argument the behavior instance to add. No need to use Activator.CreateInstance for something like this, as it just slows things down
• Removed LinkType enum
• Removed DefaultLinkType link option
• Removed DefaultLinkModel link option
• Removed GetNodesRect method from DiagramManager (use GetBounds)
• Removed diagram dependency from GroupModel (was only using GetNodesRect)
• Renamed GetRelativePoint to GetRelativeMousePoint
  • This method gives the relative mouse point inside the diagram, taking into account the current pan & zoom
• Widgets are inside the DiagramCanvas now
  • This change is necessary so that widgets with absolute position have their relative parent be the canvas
• Renamed Navigator widget to NavigatorWidget
• Allow empty groups
• Compare received JS sizes (width and height) with precision of 0.0001
  • In most cases, sizes retrieved from JS (especially with a zoom <> 1) can't be compared accurately (e.g. 80 and 79.9999975). We fix this by comparing with a tolerance.
• Update ports dimensions only if Initialized is false
  • This avoids useless re-renders/JS calls when node is re-visible
• NodeModel.Ports is now a IReadOnlyList<PortModel>
• BaseLinkModelExtensions is now obsolete
• Moved everything in Blazor.Diagrams.Core.Models.Core to Blazor.Diagrams.Core.Geometry
  • This includes Point, Size and Rectangle
  • This is to better structure things in the project, the new Geometry namespace will contain many other things related to it
• Only render links when ports/nodes are initialized (position and/or size received)
  • This will avoid the weird flicker where links show at (0, 0) then move to the correct position

Fixed

• Remove links when groups are removed
• Issue where links are clickable outside the visible stroke
  • pointer-events is now set to visiblePainted instead of all
• MouseUp event bubbles up from PortModel to NodeModel
• Size not taking into account zoom when nodes become visible again
• Only allow link creation using left mouse button
• JS errors in razor pages without a diagram
• CustomNodeWidget was movable from text input
  • All users who create custom nodes with HTML inputs should use x:stopPropagation on mousedown, mousemove and mouseup to prevent the node from being movable through inputs.
• Deleted nodes from groups would still show them
• NavigatorWidget not handling negative node positions
• Panning with right click. It is now disallowed
• PortRender not taking into account its parent's RenderLayer
  • Ports on SVG nodes will now render as <g> elements
• Useless refreshes when diagram Container values didn't change

1.5.2

Fixed

• Missing MouseUp event on links.

1.5.1

Added

• AddGroup: add an instance of a group to the diagram.
• Custom group documentation/demo.

Fixed

• Clicking the canvas in the Events demo throws an exception.