Tag Archives: diagram

Diagramming for Java Swing, V4.0.2

Posted on by

MindFusion.Diagramming for Java Swing, V4.0.2 has just been released. The new features are mostly requested by the users, we have also fixed several bugs. Here are the details:

ContainerNode improvements

  • JDiagram now draws child nodes by their container. When containers overlap, the children of the lower container can no longer appear above the children of the upper container;
  • You can use the new ClipChildren property to specify whether child items are clipped to the boundaries of the container;
  • When you drop nodes into a container, the ZIndex property is not changed automatically;
  • and more.
Container nodes

Container nodes

Miscellaneous

  • The placement of link labels at shorter link segments is improved.
  • The new DiagramLink.intersects method checks whether two links intersect.
  • You can use the hitTest method to determine whether a diagram item or any of its child items contain the specified point.
  • The getFlatItemList method returns a list of all TreeViewNode items.
  • as well other new properties and methods – check the complete list here.
Labels at diagram links

Labels at diagram links

You can download the control and test yourself its performance and functionality. Here is a direct link to the trial version:

Download MindFusion.Diagramming for Java Swing, V4.0.2

Technical support

Your questions about the library or any other of our components are welcomed by our support team. You can write at the forum, help desk or at support@mindfusion.eu.

About Diagramming for Java Swing: MindFusion.Diagramming for Java Swing provides your Java application with all necessary functionality to create and customize a diagram. The library is very easy to integrate and program. There are numerous utility methods, rich event set, more than 80 predefined shapes. The tool supports a variety of ways to render or export the diagram, advanced node types like TreeView nodes, hierarchical nodes, tables, container nodes and many more. There are 15 automatic layouts, various input / output options and fully customizable appearance. A detailed list with JDiagram’s features is uploaded here. You can check the online demo to see some of the functionality implemented.

Diagramming for Java Swing is royalty free, there are no distribution fees. Licenses depend on the count of developers using the tool – check here the prices.

Create a block diagram editor in JavaScript

Posted on by

In this example, we will create a block diagram editor using MindFusion.Diagramming for JavaScript.

First, let’s add two HTML canvas elements to a page, one for the Diagram control and one for a NodeListView control that will serve as a tool palette:

<!-- The Diagram component is bound to the canvas element below -->

<div style="width:800px; height:600px; overflow:auto; border: 1px solid;">
  <canvas id="diagram" width="2100" height="2100">
    This page requires a browser that supports HTML 5 Canvas element.
  </canvas>
</div>


<!-- NodeListView control -->

<div style="width:130px; height:600px; overflow:none; border: 1px solid rgb(0, 0, 0);">
  <canvas id="nodeList" width="130" height="600"></canvas>
</div>

Next, add references to the necessary script files:

<script src="MicrosoftAjax.js" type="text/javascript"></script>
<script src="MindFusion.Diagramming.js" type="text/javascript"></script>
<script src="BlockDiagEdit.js" type="text/javascript"></script>

In the load handler in the script file, setup the diagram properties and populate the node list with prototype containers and shape nodes, that will represent respectively systems and modules in our block diagrams:

Sys.Application.add_load(function (sender, args)
{
	// create a Diagram component that wraps the "diagram" canvas
	diagram = $create(Diagram, null, null, null, $get("diagram"));
	diagram.addEventListener(Events.nodeCreated, onNodeCreated);
	diagram.addEventListener(Events.linkCreated, onLinkCreated);
	diagram.setLinkHeadShapeSize(3);
	diagram.setLinkHeadShape("Alternative");
	diagram.setAllowInplaceEdit(true);

	// create a NodeListView component that wraps the "nodeList" canvas
	var nodeList = $create(MindFusion.Diagramming.NodeListView,
        null, null, null, $get("nodeList"));
	nodeList.setIconSize(new Size(48, 48));
	nodeList.setDefaultNodeSize(new Size(24, 24));

	var colors = [
		"#FF5555",
		"#55FF55",
		"#5555FF",
		"#FFFFFF"
	];

	// add container to the NodeListView to represent "system" blocks
	for (var i = 0; i < 4; ++i)
	{
		var node = new ContainerNode(diagram);
		node.setBrush(colors[i]);
		nodeList.addNode(node, "System " + (i + 1));
	}

	// add container to the NodeListView to represent "module" blocks
	for (var i = 0; i < 4; ++i)
	{
		var node = new MindFusion.Diagramming.ShapeNode(diagram);
		node.setShape("Rectangle");
		node.setBrush(colors[i]);
		nodeList.addNode(node, "Module " + (i + 1));
	}
});

Handle the nodeCreated event to make containers larger, and start inplace edit operation to let users enter text immediately after dropping a node:

function onNodeCreated(sender, args)
{
	var node = args.getNode();
	if (ContainerNode.isInstanceOfType(node))
	{
		// make containers larger
		var bounds = node.getBounds().clone();
		bounds.width = 100;
		bounds.height = 75;
		node.setBounds(bounds);
	}

	// let user enter text immediately
	diagram.beginEdit(node);
}

When there aren’t anchor points defined, the diagram control snaps link points to nearest point of nodes borders. Let’s automatically align points when links are created to make them straight horizontal or vertical lines if they are already close to being such. Otherwise leave points unchanged to let users draw diagonal lines too:

function onLinkCreated(sender, args)
{
	var link = args.getLink();
	var start = link.getStartPoint();
	var end = link.getEndPoint();

	// make link horizontal if close to being one
	if (Math.abs(start.x - end.x) > 10 && Math.abs(start.y - end.y) < 4)
	{
		end.y = start.y;
		link.setEndPoint(end);
	}

	// make link vertical if close to being one
	if (Math.abs(start.y - end.y) > 10 && Math.abs(start.x - end.x) < 4)
	{
		end.x = start.x;
		link.setEndPoint(end);
	}
}

Here’s the kind of block diagrams and flowcharts you can now draw:
Block diagram

The complete example can be downloaded from this link:
https://mindfusion.eu/_samples/BlockDiagEdit.zip

Enjoy!

Diagramming for WinRT Beta Version

Posted on by

We have almost finished the initial release of MindFusion.Diagramming component for WinRT. The release
implements most of the API of the MindFusion.Diagramming for Silvelright component. You can read the online reference here:

Diagramming for Silvelright Online Reference

MindFusion.Diagramming for WinRT

MindFusion.Diagramming for WinRT

The Magnifier and Overview controls as well the printing functionality are currently not supported.
Single-touch events are equivalent to mouse input in the Silverlight control. Additionally, the WinRT library implements the following multi-touch gestures:

  • dragging two fingers in same direction over a node translates it
  • dragging two fingers in opposite directions over a node scales and/or rotates it
  • dragging two fingers over an unoccupied point pans the diagram

If the diagram is inside a ScrollViewer, multi-touch gestures are handled only if the ManipulationMode property is set to None; otherwise they are intercepted by the parent ScrollViewer control.

When adding references to the MindFusion.* assemblies, their accompanying resource folders (MindFusion.Diagramming and MindFusion.Diagramming.Controls) must be in the same location as the dll files. If copying or moving the diagramming.dll assemblies, you must also copy these folders in order for Visual Studio to discover the necessary resources.

You are welcome to download and test the beta version:

MindFusion.Diagramming for WinRT Beta Version

Your feedback is highly appreciated. You can write your reviews at the forum or at support@mindfusion.eu.
Thank you.

MindFusion Pack for Silverlight 2013.R1

Posted on by

MindFusion has released a new version of its Silverlight controls suite. There are new features in many of the controls, here are details:

Visual Studio 2012 Support

New assemblies for all components targeting Silverlight 5 are available. Additionally all samples provide versions for Visual Studio 2012.

chartMindFusion.Charting

Radar and Polar charts
The Silverlight charting control adds a brand new types of charts – radar and polar charts. They support unlimited number of data series, 4 label types at the inner and outer axes, spiderweb, scatters and many more.

Radar chart

Radar chart

Hit testing
The new HitTest method returns a list of all ChartElement objects, which contain the specified point. Each chart type has its own ChartElement-derived class, which exposes properties for the hit object – data, labels, value etc.

Visual Effects
All chart types support the System.Windows.Media.Effects.DropShadowEffect and System.Windows.Media.Effects.Blur effect. Use the Effect property to specify the chosen effect.

diagram16x16MindFusion.Diagramming

Node Effects
You can apply to nodes two visual effects, represented by the GlassEffect and AeroEffect classes. Effects can be added, removed or modified at any time and this will immediately reflect on the diagram. Effects of different types can be applied simultaneously.

Themes and Theme Editor
A theme in DiagramLite is a set of styles, each associated with a specific item type. When the theme is applied to a diagram, the styles registered in the theme affect all objects of their associated type. Styles are associated with item types within the theme through the RegisterStyle method. The package also includes a Theme Editor tool that provides simple visual environment for theme creation and modification. There are also several predefined themes available in the Themes subfolder of the installation root folder.

Diagram documents and tabbed views
The DiagramDocument class represents a collection of diagram pages or sheets, represented by DiagramPage objects. New pages can be added to the document and existing pages can be removed and reordered via the Pages collection.

The new TabbedDiagramView can be used to display DiagramDocument objects. The view displays a tab for each page in the document. You can change the active page, add and remove pages as well rearrange them by dragging with the mouse.

One-way graph Layout
The OneWayLayout class ensures that links enter into nodes from the same general direction and exit them from the opposite side. If the graph contains cycles, some links bend around the nodes to keep the enter/exit direction consistent. The algorithm aims to minimize the number of such links.

One Way Graph Layout

One Way Graph Layout

Multiple labels per link
The LinkLabel class allows multiple captions to be displayed for a single DiagramLink object. Link labels provide a set of properties allowing full customization of their display and positioning. The labels support automatic arrangement.

Layers
Items can now be assigned to layers, and layers can be hidden, locked or moved up/down in the Z order as a group. Set the LayerIndex property of items to associate them with layers in the Diagram.Layers collection. The Layer objects provide Visible, Locked and ZIndex properties, which affect all items in the respective layer. Layers also expose a Title property shown in the LayerListView control.

Layer list control
The LayerListView control provides user interface for working with Layer objects. The control displays a list of all layers in a specified Diagram with a title and an overview area, and also allows editing of layer’s Title, Visible and Locked properties and choosing the Diagram’s currently active layer.

Magnifier
The new magnifier tool lets you interactively zoom in (or out) portions of the diagram by holding down a modifier key or pressing a mouse button. The magnifier’s zoom factor and size are
customizable.

The Magnifier Tool

The Magnifier Tool

Report-16x16MindFusion.Reporting

Side-By-Side Containers
You can arrange items in the report parallelly by putting them inside the new SideBySideContainer report item. One of the uses is to display two (or more) data ranges next to each other.

Miscellaneous

  • New DefaultEncoding property in PdfExporter;
  • New Median aggregate function;
A sample report

A sample report

Calendar-16x16MindFusion.Scheduling

Improved item presenter
The ItemPresenter class now provides the start and end time of the represented item fragment through the new StartTime and EndTime properties. In addition, derived classes can override the new OnStartTimeChanged, OnEndTimeChanged, and OnItemPropertyChanged methods to get notified when the StartTime or EndTime properties change or when any property of the underlying item changes.

Improved recurrence
The Recurrennce class exposes a new event – ValidateOccurrence, which can be used to validate and customize the occurrences of a recurrence pattern.

A sample schedule

A sample schedule

You can read further details about the release at the forum. A trial version is available for download from here:

Download MindFusion Silverlight Pack R1.2013

Technical Support
You are welcomed to post your questions at the forum section of the respective product. You can also use the help desk or the support e-mail. MindFusion puts special effort in providing fast and competent technical support to everyone using our products.

About MindFusion.Silverlight Pack: A set of advanced Silverlight components that help you build your business application easy and on time. The tools provide you with a complete set of features for creating, editing and rendering complex flowcharts, charts, diagrams, calendars, maps, schedules and reports. A set of gauges and UI elements is also included. Each component offers various samples, tutorials and detailed documentation. The controls offer simple and intuitive API, completely customizable appearance, numerous input/output options and a rich event set. Each tool has been thoroughly tested to guarantee that you and your application get the high quality and performance you deserve.

MindFusion Diagram Viewer Library for Android

Posted on by

You can show now your diagrams and flowcharts on any Android device. With MindFusion DiagramViewer library for Android you can load any diagram, created by any MindFusion diagramming component and exported to XML. Currently, the diagram viewer supports the following item types:

  • ShapeNode
  • ContainerNode
  • TableNode
  • TreeViewNode
  • DiagramLink
Diagrams in Android mobile devices

Diagrams in Android mobile devices

The library includes all model classes and properties from MindFusion’s Java diagramming library. This provides your Android applications with access to the loaded links and nodes and their data properties, along with methods for simple hit testing from touch events. Here is a link to the online documentation of the Java diagramming component:

MindFusion.Diagramming for Java online reference.

MindFusion diagram viewer for Android is free of charge for anyone with a license for any MindFusion.Diagramming component – you can learn more about the tools here.

We have prepared a deteiled guide on how to use the library in an Android application. You can read the tutorial from here:

Tutorial: How to Render a Diagram in an Android Application