Page Index Toggle Pages: 1 Send TopicPrint
Normal Topic Diagramming for JavaScript, V4.2 (Read 4303 times)
Forum Admin
YaBB Administrator

Rock and Roll

Posts: 661
Joined: Apr 6th, 2003
Diagramming for JavaScript, V4.2
May 14th, 2022 at 8:17am
Print Post  
We have released version 4.2 of MindFusion JavaScript Diagram library. It contains the following new features and improvements:

Multiple labels per node
The NodeLabel class allows multiple captions to be displayed for a single DiagramNode of any type. Node labels provide a set of properties allowing full customization of their display and positioning. Label position is defined by specifying a pin point and offset from it, set through setCornerPosition, setEdgePosition, setCenterPosition methods. In addition, the horizontalAlign and verticalAlign properties of NodeLabel specify on which side of pin point to draw the label's caption.

For example, following code adds extra labels to top-left and bottom-right corners of a ShapeNode:

Select All
var node = diagram.factory.createShapeNode(10, 50, 40, 30);
node.text= "text"; // centered main text

var lb1 = node.addLabel("label 1");
lb1.setCornerPosition(0, 0, 0);
lb1.horizontalAlign = Alignment.Near;
lb1.verticalAlign = Alignment.Near;
lb1.brush = "red";
lb1.textColor = "white";

var lb2 = node.addLabel("label 2");
lb2.setCornerPosition(2, 0, 0);
lb2.horizontalAlign = Alignment.Far;
lb2.verticalAlign = Alignment.Far;
lb2.brush = "yellow";
lb2.textColor = "red";

Multi-touch improvements
  • The multiTouchDraw property of DiagramView lets you prevent drawing multiple items simultaneously, while keeping other multitouch gestures enabled.
  • The handleTouchHitDistance property of DiagramView makes it easier to grab adjustment handles on mobile devices, without increasing the adjustmentHandlesSize value.

  • The MoveLabels behavior lets user move link and node labels interactively.
  • LinkEventArgs now includes origin and destination properties that report respective candidate nodes to linkCreating and linkModifying event handlers.
  • The node.attach method now automatically detaches from previous master.
  • SvgNode.contentAlign property specifies alignment of SVG drawing inside the node.
  • DiagramLink.lineAlignment property sets the vertical position of link's text.
  • Horizontal scroll gestures should now work on Macbook trackpad when using virtual scroll mode.

Bug fixes
  • DiagramLink.baseShape serialization fix.
  • Fix for createDiagramLink not working with Point arguments (to create unconnected links).
  • Fix for link adjustment handles not applying stroke from HandlesVisualStyle.

Distribution for the latest version can be downloaded here, or from the clients area on our site:

Updated scripts are also available as @mindfusion/diagramming NPM package.

« Last Edit: Jun 3rd, 2022 at 7:28am by Forum Admin »  
Back to top
IP Logged
Page Index Toggle Pages: 1
Send TopicPrint