TabbedDiagramView Class

Represents a view that displays DiagramDocument objects.

Namespace: MindFusion.Diagramming.Controls
File: TabbedDiagramView.js

 Syntax

JavaScript

// class
TabbedDiagramView.prototype = {}

 Remarks

Content Security Policy
To allow for stricter CSP rules, the library no longer loads CSS scripts automatically. If you use TabbedDiagramView, you must explicitly link the common-ui.css file from distribution's themes folder.

Individual diagram pages can be activated through the tabs located at the top or at the bottom of the control. The appearance and behavior of the tab strip can be customized using various properties. The location and visibility of the strip is specified through the tabAlignment property. Its height can be changed via the tabsSize property. showAddButton and showNavigationButtons determine the visibility of the buttons for interactive tab creation and tab navigation respectively. showTabCloseButtons specifies whether the tabs can be closed interactively, by clicking on the small 'x' button displayed in each tab. allowReorder enables interactive tab rearrangement by mouse dragging.

Configuring the control

TabbedDiagramView comes as s a part of the diagramming-controls npm package or the MindFusion.Diagramming.Controls namespace for UMD users.

For npm users simply import the diagramming-controls package:

JavaScript

import * as Controls from '@mindfusion/diagramming-controls';

For UMD users, add references to files from distrbution's /umd folder using <script> tags. Note that the order of the scripts matters.

HTML

<!-- for core Diagramming -->
<script src="Scripts/collections.js" type="text/javascript"></script>
<script src="Scripts/drawing.js" type="text/javascript"></script>
<script src="Scripts/controls.js" type="text/javascript"></script>
<script src="Scripts/graphs.js" type="text/javascript"></script>
<script src="Scripts/animations.js" type="text/javascript"></script>
<script src="Scripts/diagramming.js" type="text/javascript"></script>

<!-- for TabbedDiagramView -->
<script src="Scripts/common.js" type="text/javascript"></script>
<script src="Scripts/common-collections.js" type="text/javascript"></script>
<script src="Scripts/common-ui.js" type="text/javascript"></script>
<script src="Scripts/diagramming-controls.js" type="text/javascript"></script>

Creating the control instance and adding it to an HTML page is the same as for the DiagramView control. You can pass a DiagramDocument instance to the create function, or omit that parameter to let the control create a new document with a single DiagramPage.

JavaScript

var doc = new MindFusion.Diagramming.DiagramDocument();
var page1 = new MindFusion.Diagramming.DiagramPage("diagram1");
var node = page1.factory.createShapeNode(10, 10, 20, 20);
doc.addPage(page1);
var diagramView = MindFusion.Diagramming.Controls.TabbedDiagramView.create(
    document.getElementById("diagram"), doc);

 or simply

JavaScript

var diagramView = MindFusion.Diagramming.Controls.TabbedDiagramView.create(
    document.getElementById("diagram"));

You can specify a title, iconUrl and titleColor for diagram pages by setting the corresponding properties.

Default images for the navigation buttons must be located in an ./icons folder. Alternatively, you can style the control with a predefined css theme, in which case the themes included in the distribution must be located in a ./themes folder and referenced in the head of the HTML document, e.g.

HTML / JavaScript

<link rel="stylesheet" type="text/css" href="themes/common-ui.css" />
<link rel="stylesheet" type="text/css" href="themes/business.css" />
...
diagramView.theme = MindFusion.Diagramming.Theme.fromId("business");

 Inheritance Hierarchy

MindFusion.Diagramming.DiagramView
    MindFusion.Diagramming.Controls.TabbedDiagramView