Page Index Toggle Pages: 1 Send TopicPrint
Normal Topic Diagramming for JavaScript, V3.0 (Read 3889 times)
Forum Admin
YaBB Administrator
*****
Offline


Rock and Roll

Posts: 685
Joined: Apr 6th, 2003
Diagramming for JavaScript, V3.0
May 8th, 2017 at 4:03pm
Print Post  
We have released version 3.0 of MindFusion JavaScript Diagram library. It contains the following new features and improvements:

User-interaction controllers
All kinds of user interaction are now carried out by controller objects. The startDraw method of BehaviorBase-derived classes that returned an opaque InteractionState instance has been replaced by createController method returning a controller of class specific to the modified item and interaction types. Built-in controllers include CreateNodeController, CreateLinkController, ModifyNodeController, ModifyLinkController, PanController. You can also create custom controllers by deriving and overriding the methods of SinglePointerController:
Code
Select All
SinglePointerController.prototype =
{
    start: function (position) {},
    move: function (position) {},
    validate: function (position) {},
    commit: function (position) {},
    cancel: function (position) {},
    drawInteraction: function (context) {}
} 



Record and replay
The Diagram class provides record, stopRecording and replay methods that can be used to save and replay all user actions with keyboard and mouse. The replay method takes recording, timer and diagramJson parameters. The recording argument is an array of records returned by stopRecording. If the timer argument is set to true, events are replayed from a timer preserving their original timing, otherwise they are replayed immediately. Timer mode can be used to show tutorials played directly in the diagram. Immediate mode could be used to automate user interaction testing where an assertion is checked after replaying series of events. Recorded events could also be replayed as macros if ran on a diagram with items placed on same initial coordinates.

Improved testability
User interaction can now be tested automatically in several ways outlined below.
  • Create a MouseInputDispatcher instance and call its methods -
    Code
    Select All
    onMouseDown: function (position, button)
    onMouseMove: function (position)
    onMouseUp: function (position, button) 
    
    

    where position is a Point instance specifying logical coordinates in the diagram (in current measure unit, not scaled by zoom factor). The results of called mouse methods will depend on diagram's current Behavior, e.g. you could assert that a sequence of down, move and up events creates a ShapeNode when Behavior is set to DrawShapes.
  • Create an instance of controller class and call its start, move and commit methods. This would not depend on the value of diagram's Behavior, but could be still affected by other behavioral properties such as AllowSelfLoops and AllowUnconnectedLinks.
  • Check assertions after replaying a recording on a saved diagram.

Ruler control
The Ruler control provides horizontal and vertical scales that help users measure and align diagram items. In order to set up a Ruler instance, create a DIV element parenting the diagram's scroller div:
Code (HTML)
Select All
<div id="ruler">
  <div id="view">
     <canvas id="diagram" width="2100" height="2100">
     ...
 


Code (Javascript)
Select All
var ruler = MindFusion.Diagramming.Ruler.create(document.getElementById("ruler"));
ruler.setDiagram(diagram);
 



3rd party dependencies now optional
The diagram can now be used without JQuery and Microsoft Ajax libraries. To enable that mode, set MindFusionImpl = "StandAloneImpl" before loading diagramming.js. Stand-alone mode requires relatively modern browsers, the base feature-set against we test it is the one of IE11.

Flip shapes
The shape of a ShapeNode can be flipped horizontally or vertically. Enable the AllowFlip property and the shape flips when an edge is dragged over its opposite edge. You can get or set current flip state using FlipX and FlipY properties.


Revamped item dependency system
Dependencies between diagram items are now expressed by rule objects and applied in sequence by the DiagramMediator class. Built-in dependencies are implemented by ItemFollowsContainerRule, AttachedFollowsMasterRule, LinkFollowsNodesRule, NodeFollowsSelectionRule rules. You can create custom rule objects with following API and add them to DiagramMediator.AllRules array to make items follow other items during user interaction -
Code
Select All
var MyRule =
{
    dependencies: function (master) {}, // return array of items that should follow master
    dependentUpon: function (dependency) {},  // return array of items that should be followed by dependency
    recognize: function (dependency) {},  // return true or false if this rule shoudl be applied on an item
    updateFromMasters: function (dependency, originalStates) // set new position or size of dependency
} 



License keys
There are no separate trial / licensed builds of MindFusion scripts provided anymore, instead you disable trial mode by specifying a license key string. License keys are now listed on the Keys & Downloads page at MindFusion customer portal. Copy the key to a diagram_lic.txt file in same folder where the diagram html page is located. The file name and location can be changed by calling the diagram's setLicenseLocation method. Alternatively, the key string can be set directly by calling setLicenseKey method.

Miscellaneous
  • CaptionBackBrush and FoldIconSize properties added to ContainerNode.
  • Multiple rotation of nodes improved, now node angles are modified by same rotation delta calculated from mouse position instead of pointing all rotation handles in mouse direction.
  • Xml serialization improved.
  • LinkSegments property of Diagram specifies initial number of link segments.
  • JQuery mode now supports version 3 of JQuery.

Registered customers with an active upgrade subscription can find license keys at the clients area on our site.

A trial version is available for download here:
https://mindfusion.eu/JsDiagramTrial.zip

Enjoy!
  
Back to top
WWW  
IP Logged
 
Slavcho
God Member
*****
Offline


tech.support

Posts: 3147
Joined: Oct 19th, 2005
Re: Diagramming for JavaScript, V3.0
Reply #1 - Jun 13th, 2017 at 11:34am
Print Post  
V3.0.1 service release is now available -
https://mindfusion.eu/JsDiagramTrial.zip

  • fix for tooltips showing at wrong positions;
  • fix for inability to exit edit mode after calling Diagram.beginEdit;
  • fixed routing of Bezier links;
  • set Canvas.minVisibleFontSize value to a cut-off size in pixels to hide small text - useful in some browsers that otherwise ignore small font sizes and enforce a minimum (http://mindfusion.eu/Forum/YaBB.pl?num=1496994237), or simply to remove clutter in the Overview control.
  
Back to top
 
IP Logged
 
Page Index Toggle Pages: 1
Send TopicPrint