Tag Archives: javascript

Diagramming for JavaScript, V2.1

Posted on by

MindFusion has just released a beta version of the Diagramming for JavaScript library.

SVG Nodes
The SvgNode class represents nodes that can display SVG drawings. SVG graphics are rendered instead of Image, and on top of the geometry rendered by the base ShapeNode class. You can enable the Transparent property to hide the node’s geometry and leave visible only the drawing.

SVG Nodes built with MindFusion.Diagramming for JavaScript.

SVG Nodes built with MindFusion.Diagramming for JavaScript.

jQuery support
You can now use jQuery for browser abstraction instead of Microsoft Ajax. To enable jQuery support, set MindFusionImpl=”JQuery” before loading the diagram script. Instead of Microsoft Ajax $create function, use the static Diagram.create(element) method to create a Diagram instance for a given Canvas element.

Miscellaneous

  • Set the BackgroundImageUrl property to draw an image as Diagram’s background.
  • The TextStyle property of links provides support for several different text position and orientation styles, defined by the LinkTextStyle enumeration.
  • Set the AllowUnconnectedLinks property to true to let users draw links without connecting them
    to nodes.

You can download the trial version directly from the following link:

Download Diagramming for JavaScript, V2.1 Trial Version

We shall be glad to receive any comments, suggestions and feedback. 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.

Diagramming for JavaScript with jQuery

Posted on by

Diagramming for JavaScript can use jQuery for browser abstraction instead of Microsoft Ajax. If you want to try the new feature, please download this archive containing a pre-release mindfusion.diagramming.js build and a sample page:

https://mindfusion.eu/_beta/jsdiag_jquery.zip

To enable jQuery support, set MindFusionImpl=”JQuery” before loading the diagram script:

Code:

MindFusionImpl = "JQuery";

Instead of MSAjax $create function, use the static Diagram.create(element) method to create a Diagram instance for given Canvas element:

Code:

diagram = MindFusion.Diagramming.Diagram.create($("#diagram")[0]);
A sample diagram.

A sample diagram.

We welcome any comments, suggestions and feedback. 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.

Diagramming for JavaScript, V2.0

Posted on by

We have released Diagramming for JavaScript with a host of new features. Here is an overview:

Undo / redo support
If you set the UndoEnabled property to true, the Diagram control tracks changes done to its items and allows undoing and redoing them later by calling the undo() and redo() methods respectively. Multiple changes could be recorded as a single undoable operation by enclosing them between startCompositeOperation() and commitCompositeOperation() calls. You can also create custom undoable operations.

Animations
You can animate Diagram items through the Animation class in the MindFusion.Animations namespace. The class
implements several built-in animation and easing types, and allows definition of custom animation functions, to create fluid and pleasing animation effects.

Clipboard support
Now you can copy or cut a single item or a selection of items to a clipboard maintained by the diagram control. This is done programmatically using the copyToClipboard and cutToClipboard methods. To paste the clipboard contents into the current diagram, call pasteFromClipboard.

Swimlanes
The lane grid lets you emphasize the relationship between a group of diagram items by displaying them in a distinct lane or cell within the grid. If you want to display the lane grid, set the EnableLanes property of the Diagram class to true. In order to customize the grid, set the various attributes exposed by the LaneGrid property, which lets you specify the number of rows and columns, add headers, customize the cell appearance, etc.

A diagram with swimlanes.

A diagram with swimlanes.

Resize of multiple nodes
You can now resize multiple selected nodes simultaneously – just set the AllowMultipleResize property to true. When enabled, dragging a corner or side adjustment handle of any node resizes all nodes in the selection. The selectionModifying validation event lets you cancel the operation for all nodes.

Magnifier
The new magnifier tool allows users to interactively zoom in (or out) portions of the diagram by holding down a modifier key or pressing a mouse button. You can customize the magnifier’s appearance via properties such as MagnifierShape and MagnifierFrameColor. Its size and magnification can be set via MagnifierWidth, MagnifierHeight and MagnifierFactor properties.

The new magnifier tool.

The new magnifier tool.

Intellisense support
The package now includes a MindFusion.Diagramming-vsdoc.js file providing code completion information. To load it in Visual Studio, add e /// <reference path=”MindFusion.Diagramming-vsdoc.js” /> tag to the top of your script files. Use the static Diagram.create and Diagram.find methods instead of $create and $find to let Visual Studio infer the type of returned Diagram objects correctly.

Miscellaneous

  • Set the ModificationStart property to AutoHandles to let users start moving or resizing an item without selecting it first.
  • The diagram area can be resized automatically to fit the current diagram items as set through the AutoResize property.
  • The AutoScroll property enables automatic scrolling when the mouse is dragged near the diagram edges.
  • 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 2.0 Trial Version

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.

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.

MindFusion.Diagramming for JavaScript 1.7

Posted on by

MindFusion has released a new version of its Diagramming component for JavaScript. Here is an overview of the most important new features:

Adjustment handle styles

You can customize the appearance of nodes’ adjustment handles with the new setHandlesStyle method. There are various styles to choose from, including round and square handles, dashed and hatched frames, some combinations. It’s also possible to set what part of a node can be dragged to move or resize it. Custom handles are also supported.

Node anchor points.

Node anchor points.

Dynamic links

When you drag a dynamic link, its end segments are automatically adjusted to point to the center of the target node. If the AnchorPattern property of the node is set, the link ends will align to the closest anchor point instead. Positions of the link’s end points are also updated when the next-to-last control points are being modified.

ContainerNode enhancements

Miscellaneous

  • The Dirty flag is automatically set when a serializable property of an item or the diagram has been modified. It lets you determine where there are any changes that need to be saved.
  • The AdjustmentHandlesSize property specifies the size of adjustment handles.
  • The ShowDisabledHandles property controls whether disabled adjustment handles are drawn on screen.

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

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 features page.