Tag Archives: link

Customizing Diagram Link Shape-s in JavaScript and React

Posted on by

In this blog post we will look at 3 different ways of customizing diagram links. They are:

  • Drawing one ShapeNode in the middle of the link.
  • Drawing a rectangle in the middle of a link.
  • Drawing a ShapeNode at conjunction points.

The following image illustrates DiagramLink s created by each of the three methods.

Continue reading →

Diagramming for Android, V1.2

Posted on by

We are happy to announce the new version of MindFusion.Diagramming library for Android. We have added the following new features and improvements:

AnchorPattern improvements

  • The XUnit and YUnit properties allow specifying the coordinates of an AnchorPoint as a fixed offset from the node’s top-left corner rather than in percentage, so that the point position does not change when the node is resized.
  • The AnchorPattern property of Shape class lets you associate anchor points with shape definitions. If a ShapeNode instance does not contain its own AnchorPattern, it will derive the one defined by the node’s Shape.
Android diagramming library: anchor points

Android diagramming library: anchor points

Miscellaneous

  • Links can now snap to nodes from a distance when their AutoSnapToNode property is enabled. The maximum snap distance is specified via Diagram.AutoSnapDistance property. AutoSnapToNode supersedes the old SnapToNodeBorder property, which worked only for nodes under pointer location.
  • Type of Margin property of LinkLabel has been changed from float to Thickness.
  • The changeUnit method sets a new MeasureUnit and scales the coordinates of diagram items to keep them the same size.
  • Fixed node spacing in bottom-to-top TreeLayout.
  • Multiple-resize of rotated nodes fixed to apply same offsets in nodes’ local coordinate system.
  • Fixed text layout in rotated nodes.
  • Improved layout of text components in CompositeNode.

The new version is available for download from the following link:

Download Diagramming for Android, V1.2

If you require technical support, please use the forum or write us at support@mindfusion.eu. A help desk is also available. Providing fast and competent technical support is among the priorities of MindFusion. We answer most support inquiries within hours of receiving them.

About Diagramming for Android: A native Java class library, which provides your Android application with a powerful set of features for creating, customizing and displaying flowcharts, genealogy trees, class hierarchies, networks, algorithms and much more. The component offers a rich choice of predefined shapes, many pen and brush options as well HTML-like formatting of text. Diagram nodes can hold text as well images, can be semi-transparent and support glass reflection effects. The component offers various automatic layout algorithms and a rich user interaction model, which supports zoom, scroll, alignment guides and more. You can read the features list of MindFusion Diagramming library for Android here. For pricing and licenses check this link.

Diagramming for Android, V1.1.1

Posted on by

MindFusio has recently released a new version of Diagramming for Android programming library. Here are details about the new features:

Improved arrowhead rendering

  • Arrowheads are rendered as a single path when possible and several arrowhead Shape definitions have been changed to implement mitered joints when HeadPen is set to a thick pen.
  • The point where end segments connect to arrowheads can be specified via the LinkSegmentInset property of shapes. Shape definitions from the ArrowHeads class set it to suitable default value. This allows using transparent or semi-transparent brushes without seeing the link line drawn behind arrowheads.
  • Arrowhead shadows are no longer filled if the link’s EffectiveBrush is null or fully transparent.
  • IntermediateShape is now also rendered for Bezier links.
Arrowheads

Arrowheads

Miscellaneous

  • Link segments and node borders are now drawn anti-aliased.
  • Improved DiagramLink rendering speed.
  • Improved text layout in TextComponent and LinkLabel.
  • Fixed null-reference exception in some situations when tap is outside of diagram boundaries.

The new version is available for download from the following link:

Download Diagramming for Android, V1.1.1

If you require technical support, please use the forum or write us at support@mindfusion.eu. A help desk is also available. Providing fast and competent technical support is among the priorities of MindFusion. We answer most support inquiries within hours of receiving them.

About Diagramming for Android: A native Java class library, which provides your Android application with a powerful set of features for creating, customizing and displaying flowcharts, genealogy trees, class hierarchies, networks, algorithms and much more. The component offers a rich choice of predefined shapes, many pen and brush options as well HTML-like formatting of text. Diagram nodes can hold text as well images, can be semi-transparent and support glass reflection effects. The component offers various automatic layout algorithms and a rich user interaction model, which supports zoom, scroll, alignment guides and more. You can read the features list at the features web page of the component. For pricing and licenses check this link.

MindFusion.Diagramming for ASP.NET MVC, V1.8

Posted on by

We have just released version 1.8 of Diagramming for ASP.NET MVC programming component. Here is a list of the most important new features:

Rounded links

Links whose Shape is set to Polyline or Cascading can be rendered with rounded joints between segments – just set the Diagram.RoundedLinks property to true. You can specify the radius of joint arcs with the Diagram.RoundedLinks property.

Link crossings

The component can represent the crossing point of two links either as an arc (bridge) drawn for the link with higher Z-index or as a cut drawn in the link with lower Z index. To enable that, you must set the Diagram.LinkCrossings property to LinkCrossings.Arcs or LinkCrossings.Cut. You can specify the radius of crossing arcs with Diagram.CrossingRadius.

Arcs at links crossings.

Arcs at links crossings and rounded links.

Visio2013Importer improvements

  • The Item argument of ImportItem event handlers is now pre-set to a DiagramItem instance created for the imported Visio shape, letting you avoid parsing some standard data such as Bounds or Text. You can either modify this item’s properties, or replace it with a new instance of a different type.
  • a few bugs have been fixed

Miscellaneous

  • node rotation was ignored by link routing algorithm; now links are routed around the rotated node’s boundaries.
  • the routeAllLinks function pulls apart link segments if they would overlap.
  • set Diagram.Behavior to Pan to let users only pan the view when dragging the mouse.
  • and more – you can read the list here.

The trial version is available for download from the link below:

Download MindFusion.Diagramming for ASP.NET MVC, V1.8

MindFusion support team is happy to assist you with any questions you might have about Diagramming for ASP.NET MVC or any other of our products. You can leave a message at the discussion board, use the help desk or e-mail support@mindfusion.eu.. We strive to provide competent and detailed answers to your questions within hours of receiving them.

About Diagramming for ASP.NET MVC Control: It is a multi-purpose diagramming tool that consists of two parts: a .NET class library running on the server and a client side control implemented in JavaScript. The server side .NET library implements a flow-diagramming object model that lets you define structures such as trees, flowcharts and graphs. Every element in the diagram is easily accessible and the whole diagram is rendered as part of an HTML page by just calling the DiagramView extension method.

On the client the diagram is rendered by a DiagramView JavaScript control that draws its content on an HTML Canvas. The user is able to add nodes and links simply by drawing them with the mouse. There is also a NodeListView control, which lets users create new nodes via drag and drop.

MvcDiagram also supports various automatic layout algorithms that will make every diagram easy to understand and nice to look at. The diagram can also be easily serialized in binary or XML format. Exporting is done in a variety of formats including Pdf, Svg, Visio and more. You can read details about the components at the MvcDiagram features page.

Diagramming for JavaScript, V1.7.1

Posted on by

MindFusion has released a new version of its diagramming component for JavaScript. Here is an overview of the new features in Diagramming for JavaScript, V1.7.1:

Rounded links
If your links are with Polyline or Cascading Shape, they can be rendered with rounded joints between the segments. You need to call the new Diagram.setRoundedLinks(true) method to enable this. The radius of joint arcs is specified with the Diagram.setRoundedLinksRadius.

Arcs at links crossings.

Arcs at links crossings.

Link crossings
The component can now represent the crossing point of two links either as an arc (bridge) drawn for the link with the higher Z-index, or as a cut in the link with lower Z-index. Call the Diagram.setLinkCrossings() methods with either LinkCrossings.Arcs or LinkCrossings.Cut as an argument. The radius of crossing arcs is specified with Diagram.setCrossingRadius().

Miscellaneous

  • By node rotation, the links are now routed around the rotated node’s boundaries.
  • The new routeAllLinks pulls apart link segments that would overlap.
  • A set of new predefined node shapes are added to the Shapes class: RightTriangle, Decagon, Trapezoid, Star4Pointed, Star5Pointed, Star6Pointed, Star7Pointed, Star16Pointed, Star24Pointed, Star32Pointed, Donut and Plaque.
  • and much more – read the full list here.

The trial version of the new Diagramming for JavaScript release is available for direct download from the following link:

Download MindFusion.Diagramming for JavaScript Library 1.7.1

We have always taken special effort in providing quality technical support to all our clients and evaluators. You can write us at e-mail support@mindfusion.eu or use the help desk. You can use the JsDiagram section on MindFusion forum to post questions about the tool.

About Diagramming for JavaScript Library: Written 100% in JavaScript, this tool uses HTML5 Canvas to draw impressive diagrams, schemes, flowcharts, trees and many more. It is browser independent, easy to use and integrate into any web application. JsDiagram supports a variety of predefined node shapes, customizable links, rich event set and many appearance options. The user interaction model includes resizing / moving / selecting and modifying any diagram element.

The tool boasts an elegant API, which is documented in details as well numerous step-by-step guides and tutorials. Various samples are provided to let you learn quickly how to use the most important features of the library – check them here. JsDiagram is not only the perfect choice for creating any type of diagram in the browser – it can also arrange it the way you wish with a mouse click using one of its automatic graph layout algorithms. For more details about the features of the component, please visit the JsDiagram page.