Nice Pottery Mug

    @mindfusion/diagramming
    TypeScript icon, indicating that this package has built-in type declarations

    4.2.4-1 • Public • Published

    Diagram Library for JavaScript and TypeScript

    A diagram library that enables you to build any type of graph, flowchart, tree, org chart, diagram, process chart, database schema and much more. Includes a huge variety of prdefined node and link shapes, automatic layout algorithms, many import and export options.

    Installing

    For the latest stable version:

    npm i diagram-library
    

    MindFusion Diagramming Library for JavaScript

    JS Diagram 4.2.4-1

    Lasso zoom tool

    The control now supports several ways to zoom using lasso tool:

    Miscellaneous

    JS Diagram 4.2.4

    Radial tree layout

    RadialTreeLayout class arranges tree levels in concentric circles around the root. The levelDistance property specifies the distance between adjacent circles. The direction property specifies placement of first child node. Set stretchFactor to a value larger than 1 in order to stretch level circles into ellipses, providing more space for the layout when using wider nodes.

    Miscellaneous

    JS Diagram 4.2.3

    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:

    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 support

    The control now handles DOM Pointer events to implement multi-touch interactions, such as zooming, node rotation or simultaneous drawing of multiple diagram items:

    • If multiTouchZoom property is enabled (default), the view can be zoomed or panned using two-touch pinch / flick gestures.
    • If multiTouchModify property is enabled (default), diagram nodes can be moved, scaled and rotated using two-touch pinch / flick gestures.
    • If multiTouchZoom property is disabled, each touch draws diagram items corresponding to current behavior.
    • If multiTouchModify property is disabled, each touch started from a node draws a diagram link.
    • Latter modes can be used for collaborative whiteboarding / classroom scenarios.
    • The handleTouchHitDistance property of DiagramView makes it easier to grab adjustment handles on mobile devices, without increasing the adjustmentHandlesSize value.
    • The multiTouchDraw property of DiagramView lets you prevent drawing multiple items simultaneously, while keeping other multitouch gestures enabled.

    Built-in multi-touch can be disabled altogether by setting enableMultiTouch to false, e.g. if you need to handle touch events yourself or through a third-party gesture library. If disabled, the control will revert to its mouse event handling code from previous versions. It will also no longer be able to capture mouse input during drag operations (to detect mouse pointer leaving the view), which is handled through DOM Pointers API.

    Miscellaneous

    Bug fixes

    JS Diagram 4.2.2

    This is a maintenance version with a few fixes and improvements.

    JS Diagram 4.2

    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 and setEdgePosition methods. In addition, the horizontalAlign and verticalAlign properties of NodeLabel specify on which side of pin point to draw the label's caption.

    Multi-touch improvements
    Miscellanous
    Bug fixes

    JS Diagram 4.1

    Multi-touch support

    The control now handles DOM Pointer events to implement multi-touch interactions, such as zooming, node rotation or simultaneous drawing of multiple diagram items:

    • If multiTouchZoom property is enabled (default), the view can be zoomed or panned using two-touch pinch / flick gestures.
    • If multiTouchModify property is enabled (default), diagram nodes can be moved, scaled and rotated using two-touch pinch / flick gestures.
    • If multiTouchZoom property is disabled, each touch draws diagram items corresponding to current behavior.
    • If multiTouchModify property is disabled, each touch started from a node draws a diagram link.

    Latter modes can be used for collaborative whiteboarding / classroom scenarios.

    Built-in multi-touch can be disabled altogether by setting enableMultiTouch to false, e.g. if you need to handle touch events yourself or through a third-party gesture library. If disabled, the control will revert to its mouse event handling code from previous versions. It will also no longer be able to capture mouse input during drag operations (to detect mouse pointer leaving the view), which is handled through DOM Pointers API.

    Miscellaneous
    • The createDiagramLink method can now be used to connect to TableNode rows or TreeViewNode items.
    • cancelDrag method added to DiagramView.
    • The control now captures mouse input during drag operations and will not lose current drag state if mouse pointer leaves the view.
    • Fixed exceptions when linkCrossing is set to Arcs.
    • Fix for containers clipping their child nodes when children are being dragged.

    Electron compatibility

    Serialization and clipboard operations should now work under Electron.js. In previous versions they would throw exceptions due to restricted use of eval.

    Miscellaneous

    • Mouse pointer position is now provided as argument to nodeCreated and linkCreated events.
    • Visibility property added to CompositeNode components lets you keep invisible components in the template.
    • General performance improvements. Collapse / expand icon is now drawn correctly for CompositeNode when Expandable is enabled.
    • Json deserialization no longer creates undo records.

    API changes

    For compatibility with MindFusion diagramming API for other platforms, StrokeThickness is now specified in diagram's MeasureUnit instead of pixels. You can set CompatConfig.pixelThickness= true in order to revert to using pixel values.

    React support

    The DiagramView React component allows integrating the MindFusion.Diagramming API into React applications. It renders a Diagram instance assigned to "diagram" prop as its model. Most diagram properties can be set from JSX, and all diagram events can be handled through JSX syntax as well. For more information, see the Integration with React topic.

    The DiagramView component for Rect on npm.

    Vue.js support

    The diagram-view Vue.js component allows integrating the MindFusion.Diagramming API into Vue.js applications. It renders a Diagram instance assigned to "diagram" prop as its model. Most diagram properties can be set from the vue template, and all diagram events can be handled through the v-on directive as well. For more information, see the Integration with Vue.js topic.

    The DiagramView component for Vue on npm.

    Angular support

    The diagram-view Angular component allows integrating the MindFusion.Diagramming API into Angular applications. It renders a Diagram instance assigned to "diagram" property as its model. Most diagram properties can be set from the html template, and all diagram events can be handled through event binding syntax as well. For more information, see the Integration with Angular topic.

    The DiagramView component for Angular on npm.

    The diagram library is also included in MindFusion Pack for JavaScript.

    Documentation

    1. Detailed API Reference
    2. Tutorials and Step-by-step Guides

    Samples

    A variety of online samples are uploaded at the MindFusion Js Diagram website. You can also visit the online demo for Js Diagram. You can download an archive with all samples and all files for the library from here.

    Additional Information

    Learn more about JS Diagram from the official product page. Stay in touch with MindFusion about our latest product announcements, tutorials and programming guidelines via Twitter or our company blog.

    Technical Support

    Licensing

    The end-user license agreement for JS Diagram is here.

    Install

    npm i @mindfusion/diagramming

    DownloadsWeekly Downloads

    14

    Version

    4.2.4-1

    License

    SEE LICENSE IN LICENSE.txt

    Unpacked Size

    4.78 MB

    Total Files

    10

    Last publish

    Collaborators

    • mindfusion