that handles scrolling. It's great for simple projects or when you want explicit control over the core HTML structure. 2. The Web Components method: This is a more modern, encapsulated approach. You use custom HTML tags (e.g. ) and the library handles the internal setup for you. This is ideal for complex UIs or if you are building your application using a component-based architecture. We will cover both methods below. ### HTML elements The (Markdown/T_MindFusion_Diagramming_DiagramView.md) control relies on the HTML5 Canvas element to render graphics on web page. If you need to display large diagrams, place the Canvas inside a Div element. Overflow and scrolling will be handled internally by (Markdown/T_MindFusion_Diagramming_DiagramView.md). ```

``` To create an instance of the (Markdown/T_MindFusion_Diagramming_DiagramView.md) class, call its static (Markdown/T_MindFusion_Diagramming_DiagramView.md#create) method, passing the DOM canvas object as argument: ```javascript var diagramView = DiagramView.create( document.getElementById("diagram")); ``` The MindFusion.Diagramming toolkit includes additional user interface controls such as (Markdown/T_MindFusion_Diagramming_Ruler_0.md), (Markdown/T_MindFusion_Diagramming_Overview.md), (Markdown/T_MindFusion_Diagramming_NodeListView.md) and (Markdown/T_MindFusion_Controls_ZoomControl.md). If you'd like to use any of them, you will need to add Div and/or Canvas element for each one; for an example, see the Controls sample project. ### Web components Call (Markdown/T_MindFusion_Diagramming_WebComponents.md#register) to register each control class from the Diagramming package as a web component. After registration, you can use the following tags to create corresponding components: - creates a (Markdown/T_MindFusion_Diagramming_DiagramView.md) instance. - creates a (Markdown/T_MindFusion_Diagramming_Ruler_0.md) instance. - creates a (Markdown/T_MindFusion_Controls_ZoomControl.md) instance. - creates an (Markdown/T_MindFusion_Diagramming_Overview.md) instance. - creates a (Markdown/T_MindFusion_Diagramming_NodeListView.md) instance. When instantiated as a web component, each control class creates required HTML elements as internal shadow DOM. You can get the JavaScript object corresponding to a web component by calling controls' (Markdown/T_MindFusion_Diagramming_DiagramView.md#find) method with id argument. ``` ``` ```javascript var diagramView = DiagramView.find("diagramView"); var diagram = diagramView.diagram; ``` This method is demonstrated in the WebComponents.html example from the library's distribution, where you can find a complete, runnable example. ## Working with the JavaScript Diagram Model With the library loaded and a view established on your page, you can now start working with the core JavaScript objects that define your diagram's structure and content. This section introduces the two most important classes: - (Markdown/CC_T_MindFusion_Diagramming_Diagram_0.md): The data model that contains all your nodes, links, and their relationships. - (Markdown/T_MindFusion_Diagramming_DiagramView.md): The visual component that renders the (Markdown/CC_T_MindFusion_Diagramming_Diagram_0.md) model onto the canvas and handles user interactions. You will learn how to create a diagram instance and populate it with items, both programmatically and through direct user interaction. ### Creating and displaying a Diagram The (Markdown/CC_T_MindFusion_Diagramming_Diagram_0.md) is a model class, while rendering and interactions are handled by the (Markdown/T_MindFusion_Diagramming_DiagramView.md) control. The (Markdown/CC_T_MindFusion_Diagramming_Diagram_0.md) instance can be created first and passed to the view as a second argument of the (Markdown/T_MindFusion_Diagramming_DiagramView.md#create) method, or if not provided, an empty (Markdown/CC_T_MindFusion_Diagramming_Diagram_0.md) will be created and will be accessible through the view's (Markdown/T_MindFusion_Diagramming_DiagramView.md#diagram) property. ```javascript var diagram = new Diagramming.Diagram(); var diagramView = Diagramming.DiagramView.create( document.getElementById("diagram"), diagram); var diagramView = Diagramming.DiagramView.create( document.getElementById("diagram")); var diagram = diagramView.diagram; ``` ### Add items from code You can create diagram items programmatically by calling methods of the diagram's (Markdown/CC_T_MindFusion_Diagramming_Factory_0.md) object. Alternatively, create an instance of any class derived from (Markdown/CC_T_MindFusion_Diagramming_DiagramItem_0.md) by calling its constructor, and call (Markdown/CC_T_MindFusion_Diagramming_Diagram_0.md#additem) to add it to the diagram: ```javascript var node1 = diagram.factory.createShapeNode(0, 0, 10, 10); var node2 = new Diagramming.ShapeNode(diagram); node2.bounds = new Drawing.Rect(20, 0, 10, 10); diagram.addItem(node2); ``` ### Draw items interactively The (Markdown/T_MindFusion_Diagramming_DiagramView.md) can respond in various way to user input depending on the value of its (Markdown/T_MindFusion_Diagramming_DiagramView.md#behavior) property. By default, it creates a (Markdown/CC_T_MindFusion_Diagramming_ShapeNode_0.md) when the user starts drawing from unoccupied location, or a (Markdown/CC_T_MindFusion_Diagramming_DiagramLink_0.md) when the mouse pointer is over a node. See the (Markdown/CC_T_MindFusion_Diagramming_Behavior_0.md) enumeration for other supported modes. ### Further reading Browse the topics under (#programming-interface-overview) for conceptual information. See the (#tutorials) and check the sample scripts provided with JsDiagram.zip distribution for sample source code. For integrating the diagram with popular front-end libraries and frameworks, see (#react), (#vuejs) and (#angular) topics. ## TypeScript and Code Completion ### TypeScript support A d.ts declaration file is available for every package. For more information on declaration files see https://www.typescriptlang.org/docs/handbook/2/type-declarations.html#dts-files. ### Set up code completion The library provides code completion and hints through d.ts declaration files, supported by most popular IDEs. In order to enable the feature, you need to add a commented reference to the TypeScript *.d.ts files that are included in the library distribution. The most commonly used API members are in the diagramming file, but we advise that you add references to the auxiliary files as well: ```javascript /// /// /// /// /// ``` Once the references are loaded, you should be able to see code suggestions for the applicable members together with their type. All members should be visible: methods, properties, classes etc. The distribution also includes JsDiagram-vsdoc.js file providing IntelliSense documentation in VSDoc format. If your programming environment supports it, you could add a reference to that file instead of d.ts ones: ```javascript /// ``` ## Starter Projects Here are some starter projects you can clone from GitHub to get up and running quickly with different frameworks and environments. Each project provides a basic, pre-configured setup to demonstrate the integration of the diagramming library. Vanilla JavaScript: A basic project for using the library with plain JavaScript, without any frameworks. https://github.com/MindFusionComponents/diagram-starter-vanilla NPM and a Bundler: Demonstrates how to install the library from npm and integrate it into a project that uses a module bundler (here we use Vite). https://github.com/MindFusionComponents/diagram-starter-npm Electron: A starter project for building cross-platform desktop applications. https://github.com/MindFusionComponents/diagram-starter-electron React: A starter for integrating the diagram library with the React framework. https://github.com/MindFusionComponents/diagram-starter-react React with Vite: A specific starter for React projects that use the Vite build tool. https://github.com/MindFusionComponents/diagram-starter-react-vite Angular: A starter for integrating the diagram library with the Angular framework. https://github.com/MindFusionComponents/diagram-starter-angular Vue.js: A starter for integrating the diagram library with the Vue.js framework. https://github.com/MindFusionComponents/diagram-starter-vue Socket.IO and Express server: This example instantiates (Markdown/CC_T_MindFusion_Diagramming_Diagram_0.md) model on server side. https://github.com/MindFusionComponents/collaborative-mindmap-javascript ## Moving to version 4 To port a project that uses an earlier version of JsDiagram to v.4.0, follow these steps: - For projects that use module loaders, rather than accessing the MindFusion namespace from the global namespace, check the various "Loading ... modules" sections in (#getting-started) guide. - For TypeScript projects that access MindFusion namespace from the global namespace, add a reference to the global.d.ts file. - diagramming.compat.d.ts contains the module augmentation for the diagramming module and enables using legacy get/set functions in your TypeScript code. Use it with a reference path as below, or otherwise moving it to the project's main folder may be necessary. ``` /// ``` - The DOM control is now represented by the (Markdown/T_MindFusion_Diagramming_DiagramView.md) class, rather than the (Markdown/CC_T_MindFusion_Diagramming_Diagram_0.md) class, and you will need to replace any Diagram.create, Diagram.find, MindFusion.AbstractionLayer.createControl calls with respective (Markdown/T_MindFusion_Diagramming_DiagramView.md#create) and (Markdown/T_MindFusion_Diagramming_DiagramView.md#find) calls. The (Markdown/CC_T_MindFusion_Diagramming_Diagram_0.md) model object can be created first and passed to the view as a second argument of the (Markdown/T_MindFusion_Diagramming_DiagramView.md#create) method, or if not provided, an empty (Markdown/CC_T_MindFusion_Diagramming_Diagram_0.md) will be created and will be accessible through the view's (Markdown/T_MindFusion_Diagramming_DiagramView.md#diagram) property. For TypeScript projects, a cast to will be necessary for the first argument. - Most getProperty/setProperty functions have been replaced by getter/setter properties. In addition, some properties and methods of the (Markdown/CC_T_MindFusion_Diagramming_Diagram_0.md) class related to clipboard operations, zoom and scroll, inplace-edit and recording have been moved to the (Markdown/T_MindFusion_Diagramming_DiagramView.md) class. Check the complete list of the moved properties and methods in version 4 API changes section and replace the calling instance, e.g. ```javascript // remove diagram.setBehavior(MindFusion.Diagramming.LinkTables); // add diagramView.behavior = MindFusion.Diagramming.LinkTables; ``` You can continue using legacy get/set functions for properties defined in versions up to v.4.0 in your code by setting the (Markdown/T_MindFusion_Diagramming_CompatConfig.md#propfunctions) field of (Markdown/T_MindFusion_Diagramming_CompatConfig.md) class to true. ```javascript MindFusion.Diagramming.CompatConfig.propFunctions = true; ``` If using that with TypeScript projects, also add a reference to @mindfusion/diagramming/diagramming.compat.d.ts. - Auxiliary controls, such as (Markdown/T_MindFusion_Diagramming_Overview.md), (Markdown/T_MindFusion_Controls_ZoomControl.md) and (Markdown/T_MindFusion_Diagramming_Ruler_0.md), must be attached to a (Markdown/T_MindFusion_Diagramming_DiagramView.md) instance instead of (Markdown/CC_T_MindFusion_Diagramming_Diagram_0.md). ```javascript // remove overview.setDiagram(diagram); ruler.setDiagram(diagram); zoomControl.setTarget(diagram); // add overview.diagramView = diagramView; ruler.diagramView = diagramView; zoomControl.target = diagramView; ``` - The MindFusion.AbstractionLayer class has been removed. Custom node classes in ES6 projects should be created following the ES6 class pattern, e.g. ```javascript var TemplatedBase = Diagramming.CompositeNode.classFromTemplate("TemplatedBase", ... export class OrgChartNode extends TemplatedBase { _cost: string; constructor(parent) { super(parent); }; getCost() { return this._cost; } setCost(value) { this._cost = value; } toJson() { var json = super.toJson(); json.cost = this._cost; return json; } } ``` - Custom node classes in ES5 projects should be created following the prototypal inheritance pattern, with the account for the removal of AbstractionLayer class, e.g. ```javascript var TemplatedBase = CompositeNode.classFromTemplate("TemplatedBase", ... function OrgChartNode(parent) { var _this = TemplatedBase.call(this, parent); _this.cost = "low"; return _this; }; OrgChartNode.prototype.getCost = function () { return this.cost; }; OrgChartNode.prototype.setCost = function (value) { this.cost = value; }; OrgChartNode.prototype.toJson = function () { var json = TemplatedBase.prototype.toJson.call(this); json.cost = this.cost; return json; }; ``` - Registering a custom node type with the (Markdown/CC_T_MindFusion_Diagramming_Diagram_0.md) now also includes serialization identifiers and version: ```javascript // remove AbstractionLayer.registerClass(OrgChartNode, "OrgChartNode", TemplatedBase); // add Diagram.registerClass(OrgChartNode, "OrgChartNode", "OrgChartNode", 1, TemplatedBase); ``` ## User Interaction Most likely an application would use JsDiagram to let users interactively create diagrams, flowcharts and other kinds of presentation documents. A user composes or edits a diagram by drawing its elements on the JsDiagram canvas area. With the help of a mouse or another pointing device users draw shapes, tables and links, possibly connecting them in complex hierarchies, graphs, trees or other structures they might need. ## Creating New Items New items can be created by drawing them with the mouse. While a user drags the mouse, the view of the control is updated to show what the new item would look like at the pointer location. If the operation cannot be completed at the current mouse position, the cursor changes to a crossed out circle. When the user releases the button, the item is created. By default links can be drawn only between nodes, unless the (Markdown/CC_T_MindFusion_Diagramming_Diagram_0.md#allowunconnectedlinks) property is enabled. Users can cancel item creation by pressing the right mouse button while drawing. An alternative method for users to create new nodes is drag-and-drop from the (Markdown/T_MindFusion_Diagramming_NodeListView.md) control. Nodes in the (Markdown/T_MindFusion_Diagramming_NodeListView.md) are used as prototypes and are cloned when dropped on the diagram canvas. ## Modifying Items A user modifies an item by dragging its adjustment handles. The (Markdown/T_MindFusion_Diagramming_DiagramView.md#modificationstart) property specifies when these handles appear. The first option, (Markdown/T_MindFusion_Diagramming_ModificationStart_0.md), makes the handles appear when the mouse hovers over an item; modification of the item can start immediately by pointing it and dragging a handle. The second option is (Markdown/T_MindFusion_Diagramming_ModificationStart_0.md): in order to be modified, an item should first be selected. Adjustment handles appear around the item to indicate that now it can be moved or resized. Number and functionality of those handles depend on the item type and the value of the corresponding (Markdown/CC_T_MindFusion_Diagramming_DiagramNode_0.md#handlesstyle) property. ## Modifying a Node By default nodes display nine adjustment handles. The one at the center can be used to move the node. When dragged, each corner handle resizes the node by moving the two edges adjacent to the corresponding corner. The edge handles placed at the center of each side can be used to resize a node either horizontally or vertically. Shape nodes can be rotated using an additional round handle drawn above them. Each handle can be enabled or disabled by setting or clearing the respective bit in (Markdown/CC_T_MindFusion_Diagramming_DiagramNode_0.md#enabledhandles). ## Modifying a Link Variety and behavior of link adjustment handles depend on the link's (Markdown/CC_T_MindFusion_Diagramming_DiagramLink_0.md#shape) and (Markdown/CC_T_MindFusion_Diagramming_DiagramLink_0.md#segmentcount). Control-points stay at both ends of each segment that constitutes a link. MindFusion.Diagramming for JavaScript offers several link styles. Following sections discuss how to modify links of each style. - The first style called (Markdown/T_MindFusion_Diagramming_LinkShape.md) defines links, which consist of a series of straight segments, drawn between control-points. There are no restrictions as to the number of segments. Dragging a control-point modifies each segment adjacent to the point. If the (Markdown/CC_T_MindFusion_Diagramming_Diagram_0.md#allowsplitlinks) property is enabled, users are allowed to insert new control points or to remove existing ones. Inserting a control point is done by pressing the left mouse button over a segment and dragging. The new point appears at the mouse location and splits the pointed segment in two. - If link's shape is set to (Markdown/T_MindFusion_Diagramming_LinkShape.md), each segment has 4 manipulation handles that define a curve. Each curve goes through the end-points, which are shaped as circles. Bend of the curve is defined by the middle two points shaped as rectangles. If a user drags an end-point modification handle, the adjacent control points will be moved with same translation vector as that of the end-point. If a bend control point is dragged, the symmetric control point of the neighboring curve is also moved to ensure the two stay on the same line with the end-point and on the same distance from it. - (Markdown/T_MindFusion_Diagramming_LinkShape.md) links consist of straight horizontal and vertical segments, each one orthogonal to its neighbors. If a control-point is dragged, the segments adjacent to it are moved and resized preserving their orthogonal orientation to each other. If the (Markdown/CC_T_MindFusion_Diagramming_Diagram_0.md#allowsplitlinks) property is enabled, users are allowed to insert new control points to (Markdown/T_MindFusion_Diagramming_LinkShape.md) links or remove existing ones. In that mode, users can also change orientation of end segments by dragging next-to-last control point diagonally. ## Selecting Items Multiple items are selected by dragging while CTRL key is down. Selection can also be toggled with CTRL + clicking an item. A rectangle appears around selected items, allowing a user to move all of them at once. ## Interpreting Users Actions Mouse operations can be interpreted in different ways depending on the value of the (Markdown/T_MindFusion_Diagramming_DiagramView.md#behavior) property. It defines whether for example dragging the mouse creates a node or selects existing items. Check the property description for more information. ## Programming Interface Overview The Scripts/esm folder from distribution contains ES6 code that lets you import JsDiagram classes from respective modules, which are also available as scoped @mindfusion/diagramming package on npm. There are also ES5-compatible scripts located in Scripts/umd folder, which are transpiled from ES6 code, and whose classes are exposed as members of global MindFusion namespace object. The (#reference) section of this help file lists the classes under namespaces (i.e. ES5 compatible hierarchy) whose names you can easily translate to scoped module names when coding for ES6. E.g. if a class is listed under MindFusion.Graphs namespace, you can import it from respective @mindfusion/graphs package. ## Model-View Architecture JsDiagram implements the Model-View-Controller (MVC) architectural pattern starting from version 4. The MVC design pattern as applied to MindFusion.Diagramming separates the diagram data (model) from its representation to the user (view) and controlling it by the user (controller). ## Single Diagram Canvas The (Markdown/CC_T_MindFusion_Diagramming_Diagram_0.md) class represents the diagram data model and provides operations to process the data. It exposes properties and methods for adding new diagram elements, finding and accessing existing elements, or removing them. The (Markdown/T_MindFusion_Diagramming_DiagramView.md) class presents the relevant data from the (Markdown/CC_T_MindFusion_Diagramming_Diagram_0.md) class by drawing on the screen using the CanvasRenderingContext2D API. When the diagram changes, the view automatically redraws the affected part of the image to reflect the changes. Multiple views can display the same diagram, set by their (Markdown/T_MindFusion_Diagramming_DiagramView.md#diagram) property. Each view can have a different zoom level and scroll position. The (Markdown/T_MindFusion_Diagramming_DiagramView.md) class creates (Markdown/T_MindFusion_Diagramming_SinglePointerController.md) objects when user starts interacting with the diagram, depending on the value of view's (Markdown/T_MindFusion_Diagramming_DiagramView.md#behavior) property. That property specifies how GUI actions to manipulate the data should be interpreted. ## Multiple Diagram Pages The (Markdown/T_MindFusion_Diagramming_DiagramDocument_1.md) class represents a collection of diagram pages or sheets, represented by (Markdown/T_MindFusion_Diagramming_DiagramPage_1.md) objects. New pages can be added to the document and existing pages can be removed and reordered by using the (Markdown/T_MindFusion_Diagramming_DiagramDocument_1.md#addpage) and (Markdown/T_MindFusion_Diagramming_DiagramDocument_1.md#removepage) methods respectively. The (Markdown/T_MindFusion_Diagramming_DiagramDocument_1.md#tojson), (Markdown/T_MindFusion_Diagramming_DiagramDocument_1.md#savetoxml) and (Markdown/T_MindFusion_Diagramming_DiagramDocument_1.md#savetostring) methods of (Markdown/T_MindFusion_Diagramming_DiagramDocument_1.md) save all pages in a single file, and respectively the (Markdown/T_MindFusion_Diagramming_DiagramDocument_1.md#fromjson), (Markdown/T_MindFusion_Diagramming_DiagramDocument_1.md#loadfromxml) and (Markdown/T_MindFusion_Diagramming_DiagramDocument_1.md#loadfromstring) methods load all pages from the file. (Markdown/T_MindFusion_Diagramming_DiagramDocument_1.md) can also load files created by the serialization methods of (Markdown/CC_T_MindFusion_Diagramming_Diagram_0.md), and will show them in a single page. (Markdown/T_MindFusion_Diagramming_DiagramPage_1.md) is derived from (Markdown/CC_T_MindFusion_Diagramming_Diagram_0.md) and only adds a few properties, so any code that processes (Markdown/CC_T_MindFusion_Diagramming_Diagram_0.md) objects will work with (Markdown/T_MindFusion_Diagramming_DiagramPage_1.md) objects too. A diagram document forwards each event raised by its pages, giving you a chance to use the same handler for events raised by different pages. If a page should implement distinct user interaction or validation logic, it is also possible to attach handlers to the (Markdown/CC_T_MindFusion_Diagramming_Diagram_0.md) events inherited by (Markdown/T_MindFusion_Diagramming_DiagramPage_1.md). A single (Markdown/T_MindFusion_Diagramming_DiagramPage_1.md) could be assigned to the (Markdown/T_MindFusion_Diagramming_DiagramView.md#diagram) property of (Markdown/T_MindFusion_Diagramming_DiagramView.md), and that lets you create your own user interface for presenting a list of pages to the user and selecting a current page. The package also includes a (Markdown/T_MindFusion_Diagramming_Controls_TabbedDiagramView.md) that presents all pages of a document in a tabbed user interface where each tab corresponds to a page. The page displayed in the active tab is exposed by the (Markdown/T_MindFusion_Diagramming_Controls_TabbedDiagramView.md#selectedpage) property of (Markdown/T_MindFusion_Diagramming_Controls_TabbedDiagramView.md). The active page can be changed interactively by activating its associated tab. New pages can be added and removed to / from the document through buttons in the tab strip and the pages can be rearranged by dragging their associated tabs with the mouse. ## User Interface Components The following UI components from the library can be added to a page to let users create and view diagrams: ### DiagramView (Markdown/T_MindFusion_Diagramming_DiagramView.md) renders the contents of a (Markdown/CC_T_MindFusion_Diagramming_Diagram_0.md), and lets users draw new items by drawing with mouse or touch on the canvas. The (Markdown/T_MindFusion_Diagramming_DiagramView.md#behavior) property indicates how the control should interpret users' actions. Additional properties allow scrolling and zooming the view. ### TabbedDiagramView (Markdown/T_MindFusion_Diagramming_Controls_TabbedDiagramView.md) displays multi-page (Markdown/T_MindFusion_Diagramming_DiagramDocument_1.md)s. Each (Markdown/T_MindFusion_Diagramming_DiagramPage_1.md) is displayed in its own tab. Apart from base (Markdown/T_MindFusion_Diagramming_DiagramView.md) members, the control includes properties for customizing the tab strip, and to specify whether users are allowed add or remove pages. ### Palette The (Markdown/T_MindFusion_Diagramming_Controls_Palette.md) control represents a tool palette that displays (Markdown/CC_T_MindFusion_Diagramming_DiagramItem_0.md) objects grouped into categories, and is implemented as accordion UI. Call the (Markdown/T_MindFusion_Diagramming_Controls_Palette.md#addcategory) method to define a category and create its respective accordion pane (an (Markdown/T_MindFusion_Diagramming_ItemListView.md)). Call (Markdown/T_MindFusion_Diagramming_Controls_Palette.md#additem) to add an item to specified category. (Markdown/T_MindFusion_Diagramming_Controls_Palette.md) provides same layout and appearance properties as the (Markdown/T_MindFusion_Diagramming_ItemListView.md) class. ### ItemListView (Markdown/T_MindFusion_Diagramming_ItemListView.md) represents a tool palette that contains uncategorized list of diagram items. Items can be added to the list by calling (Markdown/T_MindFusion_Diagramming_ListViewBase.md#additem) method, and removed by calling (Markdown/T_MindFusion_Diagramming_ListViewBase.md#removeitem). Drag-and-drop operations from (Markdown/T_MindFusion_Diagramming_ItemListView.md) to (Markdown/T_MindFusion_Diagramming_DiagramView.md) create a copy of the dragged item, and set its size to (Markdown/T_MindFusion_Diagramming_ListViewBase.md#newinstancesize). ### Overview (Markdown/T_MindFusion_Diagramming_Overview.md) provides a scaled-down view of a target (Markdown/T_MindFusion_Diagramming_DiagramView.md), helping users work with larger diagrams. A tracker rectangle shows current viewport of the main (Markdown/T_MindFusion_Diagramming_DiagramView.md), and by dragging it users can change the scroll position. It can also be resized to zoom the target view. ### ZoomControl (Markdown/T_MindFusion_Controls_ZoomControl.md) lets users change the zoom level of a target (Markdown/T_MindFusion_Diagramming_DiagramView.md) by dragging a slider. It also includes arrow buttons for scrolling the view. ### Ruler The (Markdown/T_MindFusion_Diagramming_Ruler_0.md) control displays horizontal and vertical scales that let users measure and align diagram nodes. ### ShapeDesigner (Markdown/T_MindFusion_Diagramming_Controls_ShapeDesigner.md) control lets users define shape geometries. Shape definitions can be saved as a shape library XML file, loaded by application using the (Markdown/T_MindFusion_Diagramming_ShapeLibrary_0.md) class, and accessed by calling (Markdown/CC_T_MindFusion_Diagramming_Shape_0.md#fromid) method by the (Markdown/CC_T_MindFusion_Diagramming_Shape_0.md) class. ## Diagram Structure ## Standard Item Types Diagram elements in MindFusion.Diagramming for JavaScript are represented by (Markdown/CC_T_MindFusion_Diagramming_DiagramNode_0.md) and (Markdown/CC_T_MindFusion_Diagramming_DiagramLink_0.md) instances. Combined and linked together, they can form complex data structures such as process or entity-relationship diagrams, class hierarchies, networks and graphs. Each of their rich features can be customized through numerous methods and properties. ## Shape Nodes (Markdown/CC_T_MindFusion_Diagramming_ShapeNode_0.md) objects can represent geometric shapes, flowchart elements, icons in network diagrams, and so on. They can display both graphics and text in different fonts, sizes and colors. A node's shape is specified by setting its (Markdown/CC_T_MindFusion_Diagramming_ShapeNode_0.md#shape) property. There are more than 100 predefined node shapes and apart from them, MindFusion.Diagramming for JavaScript offers an easy way to define custom shapes. Shape nodes can be rotated, either interactively using the round selection handle drawn above them, or programmatically by setting their (Markdown/CC_T_MindFusion_Diagramming_DiagramNode_0.md#rotationangle) property. ## SVG Nodes The (Markdown/T_MindFusion_Diagramming_SvgNode_0.md) class represents nodes that can display SVG drawings. SVG graphics are rendered instead of (Markdown/CC_T_MindFusion_Diagramming_ShapeNode_0.md#image), and on top of the geometry rendered by the base (Markdown/CC_T_MindFusion_Diagramming_ShapeNode_0.md) class. Enable the (Markdown/CC_T_MindFusion_Diagramming_ShapeNode_0.md#transparent) property to hide the node's geometry and leave only the drawing visible. The SVG file is loaded and associated with the node through an (Markdown/T_MindFusion_Diagramming_SvgContent.md) object, which should be initialized and then assigned to the (Markdown/T_MindFusion_Diagramming_SvgNode_0.md#content) property. ## Composite Nodes Nodes in MindFusion.Diagramming can be composed from components. Components are graphical widgets similar to controls, which can be arranged in hierarchies and added to a (Markdown/CC_T_MindFusion_Diagramming_Diagram_0.md) through instances of the (Markdown/T_MindFusion_Diagramming_CompositeNode_0.md) class. The component system contains various built-in components, such as (Markdown/T_MindFusion_Drawing_Text.md) and (Markdown/T_MindFusion_Drawing_Image.md). Component hierarchies can be defined and loaded through Json templates using (Markdown/T_MindFusion_Diagramming_CompositeNode_0.md#loadtemplate) and (Markdown/T_MindFusion_Diagramming_CompositeNode_0.md#classfromtemplate) methods.## Table Nodes A (Markdown/CC_T_MindFusion_Diagramming_TableNode_0.md) displays tabular data, and can be used to represent table schemas in database diagrams or classes in class-hierarchies. A table contains cells arranged in a grid, and every cell can display (Markdown/T_MindFusion_Diagramming_Cell.md#text) and/or (Markdown/T_MindFusion_Diagramming_Cell.md#image). Cells, columns and rows can be customized in various ways - there are properties available for setting their extents, style, image and text alignment. Tables' dimensions can be programmatically changed; inserting, appending or deleting rows and columns can be done in a very comprehensive, intuitive way whenever you might need it. Tables can also display background images and graphics. ## Free-form Nodes A (Markdown/T_MindFusion_Diagramming_FreeFormNode_0.md) collects all points from users' mouse or touch input and displays them as node's outline. To let users draw free-form nodes interactively, set (Markdown/T_MindFusion_Diagramming_DiagramView.md#behavior) to (Markdown/CC_T_MindFusion_Diagramming_Behavior_0.md). Use the (Markdown/T_MindFusion_Diagramming_FreeFormNode_0.md#points) property of (Markdown/T_MindFusion_Diagramming_FreeFormNode_0.md) to get or set outline points programmatically. If the (Markdown/T_MindFusion_Diagramming_FreeFormNode_0.md#closed) property is enabled, the node is drawn as a closed shape and its interior filled, or otherwise the node is drawn as a poly-line. If the distance between first and last points drawn by user is shorter than (Markdown/CC_T_MindFusion_Diagramming_Diagram_0.md#autoclosedistance), the node gets closed automatically. ## Container Nodes A (Markdown/CC_T_MindFusion_Diagramming_ContainerNode_0.md) can contain other diagram nodes. When a container is moved, its child nodes move too. Containers can be nested within each other to unlimited depth. They can be folded to a smaller size, hiding their child items, and unfolded to show content again. Nodes inside a container can be linked to nodes both inside and outside of it. If a link connects items in the same container, the container is not considered an obstacle by the auto-routing algorithm. ## Paged Containers (Markdown/T_MindFusion_Diagramming_PagedContainerNode.md) is a (Markdown/CC_T_MindFusion_Diagramming_ContainerNode_0.md) subclass that organizes its child nodes into a collection of (Markdown/T_MindFusion_Diagramming_PagedContainerNode.md#pages), represented by (Markdown/T_MindFusion_Diagramming_ContainerPage.md) objects. This allows for the creation of more orgainzed diagrams where nodes can be grouped into logical views within a single container. Only the nodes belonging to the currently active page, specified by (Markdown/T_MindFusion_Diagramming_PagedContainerNode.md#currentpage) property, are rendered and participate in user interactions.## TreeView nodes The (Markdown/T_MindFusion_Diagramming_TreeViewNode_1.md) class represents nodes that can display hierarchical data. The root items displayed in the node can be accessed through the (Markdown/T_MindFusion_Diagramming_TreeViewNode_1.md#rootitems) property. Items can be added and removed individually by using the (Markdown/T_MindFusion_Diagramming_TreeViewNode_1.md#additem) and (Markdown/T_MindFusion_Diagramming_TreeViewNode_1.md#removeitem) methods, or in bulk by calling the (Markdown/T_MindFusion_Diagramming_TreeViewNode_1.md#fromobject) method, which loads the tree view items from an array of objects. ## Video Nodes (Markdown/T_MindFusion_Diagramming_VideoNode.md) objects display video streams, along with UI elements to play, pause, seek and change volume. Set node's (Markdown/T_MindFusion_Diagramming_VideoNode.md#videolocation) property to specify its video URL. Auto-playing is not supported at this time, and the video can be started only by users clicking the play button. (Markdown/T_MindFusion_Diagramming_VideoNode.md) is built around (Markdown/T_MindFusion_Drawing_Video.md) component, which can also be used in (Markdown/T_MindFusion_Diagramming_CompositeNode_0.md) templates. ## Control Nodes (Markdown/T_MindFusion_Diagramming_ControlNode_0.md) objects display custom HTML content, specified via their (Markdown/T_MindFusion_Diagramming_ControlNode_0.md#template) property. A node's DOM structure is created inside the (Markdown/T_MindFusion_Diagramming_ControlNode_0.md#getcontent) div element, which is then rendered on top of the diagram canvas. Note that this prevents (Markdown/T_MindFusion_Diagramming_ControlNode_0.md)s drawing in diagram' usual Z order, and they will always appear on top of other diagram items. By default the diagram intercepts mouse events of all hosted html elements to enable moving nodes or drawing links. You can specify that interactive elements, such as buttons or text boxes, should receive input instead by setting their data-interactive attribute to true. ## Links (Markdown/CC_T_MindFusion_Diagramming_DiagramLink_0.md) objects are used to represent various types of connections and relations in diagrams. MindFusion.Diagramming for JavaScript offers three basic link shapes, which can be assigned to links' (Markdown/CC_T_MindFusion_Diagramming_DiagramLink_0.md#shape) property: - polyline links composed of straight-line segments; - curved links composed of Bézier-spline segments; - cascading links composed of horizontal and vertical segments, alternating their orientation so that every segment is orthogonal to its neighbor. A link can be connected to a node at each of the link's ends. It is also possible to have unconnected links - having one or both of their ends not connected to nodes. Some customizable link's properties are: arrowheads, style, text, pen width and style, modification behavior and number of segments. See Also (#controlling-user-interaction) ## Composite Nodes The (Markdown/T_MindFusion_Diagramming_CompositeNode_0.md) class makes it easier to add custom graphics primitives to nodes. Appearance of composite nodes is defined by a tree of layout panels and child components. Unlike MindFusion's desktop diagram libraries, node templates are specified using JSON notation instead of XML. A sample node class derived from (Markdown/T_MindFusion_Diagramming_CompositeNode_0.md) can be defined declaratively as below. ```javascript var OrgChartNode = CompositeNode.classFromTemplate("OrgChartNode", { component: "GridPanel", rowDefinitions: ["*"], columnDefinitions: ["22", "*"], children: [ { component: "Rect", name: "Background", pen: "black", brush: "white", columnSpan: 2 }, { component: "Image", name: "Image", autoProperty: true, location: "icon4.png", margin: "1", imageAlign: "Fit" }, { component: "StackPanel", orientation: "Vertical", gridColumn: 1, margin: "1", verticalAlignment: "Near", children: [ { component: "Text", name: "Title", autoProperty: true, text: "title", font: "Arial bold" }, { component: "Text", name: "FullName", autoProperty: true, text: "full name", pen: "blue", padding: "1,0,1,0" }, { component: "Text", name: "Details", autoProperty: true, text: "details", font: "Arial 3" } ] } ] }); ``` Objects from the (#mindfusiondrawing) namespace, such as (Markdown/T_MindFusion_Drawing_Rect.md), (Markdown/T_MindFusion_Drawing_Image.md), (Markdown/T_MindFusion_Drawing_Path.md), (Markdown/T_MindFusion_Drawing_Video.md), double as (Markdown/T_MindFusion_Diagramming_CompositeNode_0.md) components. You can create custom components by deriving from (Markdown/T_MindFusion_Drawing_ComponentBase.md) and assigning a name to the custom class by calling (Markdown/CC_T_MindFusion_Diagramming_Diagram_0.md#registercomponent). Apart from JSON templates, the visual tree can also be created by adding panels and drawing objects programmatically starting from CompositeNode.root. Panel classes include: - (Markdown/T_MindFusion_Diagramming_SimplePanel.md), laying out its children to overlap each other, taking up all available space (useful for background graphics or images). - (Markdown/T_MindFusion_Diagramming_StackPanel.md), laying out its children side by side, either horizontally or vertically. - (Markdown/T_MindFusion_Diagramming_GridPanel.md), laying out its children in rows and columns, where children in same cell overlap. Rows and columns can be either set to a fixed size, auto-size to their child preferred size, or take up all space remaining unoccupied by other rows and columns. Named components (with specified name value) can be accessed by calling the (Markdown/T_MindFusion_Diagramming_CompositeNode_0.md#getcomponent) method. Components whose autoProperty attribute is enabled will have a pair of get/set property methods generated automatically by (Markdown/T_MindFusion_Diagramming_CompositeNode_0.md#classfromtemplate) method. The auto-properties from above template can be used as below. ```javascript var node1 = new OrgChartNode(diagram); node1.setBounds(new Rect(25, 15, 60, 25)); node1.setTitle("CEO"); node1.setFullName("John Smith"); node1.setDetails( "Our beloved leader. \r\n" + "The CEO of this great corporation."); node1.setImage("ceo.png"); diagram.addItem(node1); ``` Auto properties are also automatically serialized in JSON format, cloned by node.clone() method and saved/restored by undo commands. The (Markdown/CC_T_MindFusion_Diagramming_Shape_0.md) class used to specify (Markdown/CC_T_MindFusion_Diagramming_ShapeNode_0.md) geometry can also be used as a component. When its isOutline attribute is set, the shape will control (Markdown/T_MindFusion_Diagramming_CompositeNode_0.md)'s geometry too, defining hit test and clip area, and link alignment points along node's border. If isOutline is disabled, the shape will serve mostly as a decorative element. The code below shows a sample fragment specifying shape component in template: ```javascript { component: "Shape", id: "Cloud", autoProperty: true, name: "OutlineShape", pen: "gray", brush: "Transparent", isOutline: true }, ``` A (Markdown/T_MindFusion_Diagramming_Button.md) component that raises event when clicked can be added to template like this: ```javascript { component: "Button", brush: "#ccc", text: "Delete", width: 30, cornerRadius: 3.5, clickHandler: "onDeleteClick" } ``` ## Creating and Deleting Items New items can be added programmatically to the diagram by calling the constructors of the item's class, such as (Markdown/CC_T_MindFusion_Diagramming_ShapeNode_0.md#shapenode) or (Markdown/CC_T_MindFusion_Diagramming_DiagramLink_0.md#diagramlink), and adding the new instance via the (Markdown/CC_T_MindFusion_Diagramming_Diagram_0.md#additem) method. A shortcut to creating new items is provided by the methods of the (Markdown/CC_T_MindFusion_Diagramming_Factory_0.md) class. An instance of that class is returned by the (Markdown/CC_T_MindFusion_Diagramming_Diagram_0.md#factory) property of (Markdown/CC_T_MindFusion_Diagramming_Diagram_0.md). Factory methods such as (Markdown/CC_T_MindFusion_Diagramming_Factory_0.md#createshapenode) and (Markdown/CC_T_MindFusion_Diagramming_Factory_0.md#creatediagramlink) accept respectively node position or link's origin and destination arguments, create an instance of the class and add it to the diagram. The (Markdown/CC_T_MindFusion_Diagramming_Factory_0.md) class can create instances of JsDiagram predefined item types, while (Markdown/CC_T_MindFusion_Diagramming_Diagram_0.md#additem) can be used to add instances of custom types as well. ```javascript var ShapeNode = MindFusion.Diagramming.ShapeNode; var Rect = MindFusion.Drawing.Rect; function initDiagram(diagram) { // create the start node var startNode = diagram.factory.createShapeNode(10, 10, 30, 20); startNode.text = "start"; // create the end node var endNode = new ShapeNode(diagram); endNode.bounds = new Rect(10, 60, 30, 20); endNode.text = "end"; diagram.addItem(endNode); // connect the nodes diagram.factory.createDiagramLink(startNode, endNode); } ``` If an existing item should be removed from the diagram, call the (Markdown/CC_T_MindFusion_Diagramming_Diagram_0.md#removeitem) method. The (Markdown/CC_T_MindFusion_Diagramming_Diagram_0.md#clearall) method clears diagram contents by deleting all items. By default, deleting a node also removes its links. Set the (Markdown/CC_T_MindFusion_Diagramming_Diagram_0.md#autodeletelinks) property to false to prevent that, and disconnect the links instead. ## Accessing Items Items in the diagram are exposed via its (Markdown/CC_T_MindFusion_Diagramming_Diagram_0.md#nodes) and (Markdown/CC_T_MindFusion_Diagramming_Diagram_0.md#links) members. (Markdown/CC_T_MindFusion_Diagramming_Diagram_0.md#nodes) contains all (Markdown/CC_T_MindFusion_Diagramming_DiagramNode_0.md) -derived objects that have been added to the diagram, and (Markdown/CC_T_MindFusion_Diagramming_Diagram_0.md#links) contains all (Markdown/CC_T_MindFusion_Diagramming_DiagramLink_0.md) objects. By iterating these arrays, you can access all diagram elements and apply common attributes to them: ```javascript // paint all nodes with light blue color for (var node of diagram.nodes) { node.brush = "lightBlue"; } // set the links' arrowheads to triangles for (var link of diagram.links) { link.headShape = "Triangle"; } ``` Individual items provide methods that let you access their related items in the diagram. (Markdown/CC_T_MindFusion_Diagramming_DiagramNode_0.md) exposes the links coming into or going out of nodes via the (Markdown/CC_T_MindFusion_Diagramming_DiagramNode_0.md#incominglinks) and (Markdown/CC_T_MindFusion_Diagramming_DiagramNode_0.md#outgoinglinks) properties. The nodes connected by a link can be accessed by means of the (Markdown/CC_T_MindFusion_Diagramming_DiagramLink_0.md#origin) and (Markdown/CC_T_MindFusion_Diagramming_DiagramLink_0.md#destination) properties of (Markdown/CC_T_MindFusion_Diagramming_DiagramLink_0.md). The component lets users select multiple diagram items of interest. The (Markdown/CC_T_MindFusion_Diagramming_Diagram_0.md#selection) method of (Markdown/CC_T_MindFusion_Diagramming_Diagram_0.md) returns a (Markdown/CC_T_MindFusion_Diagramming_Selection_0.md) instance representing currently selected items. The (Markdown/CC_T_MindFusion_Diagramming_Selection_0.md) class provides (Markdown/CC_T_MindFusion_Diagramming_Selection_0.md#nodes) and (Markdown/CC_T_MindFusion_Diagramming_Selection_0.md#links) arrays containing respectively (Markdown/CC_T_MindFusion_Diagramming_DiagramNode_0.md) and (Markdown/CC_T_MindFusion_Diagramming_DiagramLink_0.md) -derived objects. ## Collapsing and Expanding Tree Branches If a diagram represents a tree structure, the tree branch starting from a node can be collapsed or expanded again in order to hide or display hierarchy details. To enable this, set the (Markdown/CC_T_MindFusion_Diagramming_DiagramNode_0.md#expandable) property. To get or set whether a tree branch is expanded or collapsed, use the (Markdown/CC_T_MindFusion_Diagramming_DiagramNode_0.md#expanded) property of its root node. ## Displaying Expand/Collapse Button If the (Markdown/CC_T_MindFusion_Diagramming_DiagramNode_0.md#expandable) property of a node is set to true, there is a [±] button displayed beside the node to allow users to collapse or expand the tree branch starting there. By default, pressing that button automatically toggles the (Markdown/CC_T_MindFusion_Diagramming_DiagramNode_0.md#expanded) property of the node and raises the (Markdown/T_MindFusion_Diagramming_DiagramBase_1.md#treeexpanded) or (Markdown/T_MindFusion_Diagramming_DiagramBase_1.md#treecollapsed) events. ## Defining Tree Direction A node can be connected to other nodes through outgoing and incoming links. Setting the (Markdown/CC_T_MindFusion_Diagramming_Diagram_0.md#expandonincoming) property specifies which items connected to a node will be regarded as its descendants. If (Markdown/CC_T_MindFusion_Diagramming_Diagram_0.md#expandonincoming) is false (default value) then each node will be regarded as a parent of its outgoing links and the items attached to them. If (Markdown/CC_T_MindFusion_Diagramming_Diagram_0.md#expandonincoming) is set to true, the node's incoming links define its children. So, this property specifies the direction of parent-children relationship between diagram items and respectively the overall direction in which collapsing / expanding is done. ## Attaching and Grouping Items MindFusion.Diagramming for JavaScript allows attaching a node to another node, establishing a subordinate - master relationship between them. The easiest way to attach nodes is to call the (Markdown/CC_T_MindFusion_Diagramming_DiagramNode_0.md#attachto) method. When a master node is moved, its subordinated nodes follow it, so that the initial distance between the nodes stays constant. This happens both when a user moves the master node around, and when the node position is changed using a method or a property. Recent versions of the API include (Markdown/T_MindFusion_Diagramming_NodeLabel.md) and (Markdown/T_MindFusion_Diagramming_LinkLabel_0.md) classes, which address several of the scenarios described below. We recommend using these classes when appropriate, as they offer a more lightweight and easily configurable alternative to attached nodes. ## Possible Uses - Attach a (Markdown/CC_T_MindFusion_Diagramming_ShapeNode_0.md#transparent) shape node to another node and set its (Markdown/CC_T_MindFusion_Diagramming_DiagramItem_0.md#text), so that the shape node acts as an additional label assigned to the master node. - Attach a shape node to another node and set its (Markdown/CC_T_MindFusion_Diagramming_ShapeNode_0.md#image), so it acts as an additional icon displayed inside or near the master node. - Attach a node to another node and handle (Markdown/T_MindFusion_Diagramming_DiagramBase_1.md#nodeclicked) or similar events to perform some action on the master node. This makes the subordinated node act as a button or another type of UI element attached to the master node. - Attach child elements in a tree branch to the branch root, so that when a user moves a tree node, the node's children moves simultaneously with it. Modifying an item in such hierarchical group makes the modification pervade through all dependant subordinated items. - In all previous scenarios, the (Markdown/CC_T_MindFusion_Diagramming_DiagramItem_0.md#locked) property can be set for attached nodes which are used only as decorations embellishing the main item. That prevents users from selecting, modifying or drawing links to the subordinate nodes. ## Hierarchical Grouping Every node in a group can be the master node of another group, that is, a node can be subordinate in one group and meanwhile be another group's master. MindFusion.Diagramming for JavaScript doesn't impose any limits to the depth and width of group hierarchies built that way. However, it is not possible to put a node as a subordinate in more than one groups because the hierarchy relations would become ambiguous. ## Unions It is possible to create such groups, that if any item in the hierarchy is modified, all other items are updated too. This can be done by putting the items in circular chain of dependencies - that is, item1 is attached to item2, item2 to item3 ... itemN to item1. If any of these items is modified, the change will propagate through the chain until it reaches its originator. ## Accessing Group Items The master node in a group can be accessed using the (Markdown/CC_T_MindFusion_Diagramming_DiagramNode_0.md#masternode) property of attached nodes. The array returned by (Markdown/CC_T_MindFusion_Diagramming_DiagramNode_0.md#attachednodes) getter on a master node contains references to all subordinate nodes attached to it. ## User Interaction ## Diagram Events The diagram raises various events to notify you of the effects of user actions, such as (Markdown/T_MindFusion_Diagramming_DiagramBase_1.md#nodecreated), (Markdown/T_MindFusion_Diagramming_DiagramBase_1.md#nodemodified), (Markdown/T_MindFusion_Diagramming_DiagramBase_1.md#nodedeleted), etc. Events are represented by the (Markdown/T_MindFusion_Controls_EventDispatcher.md) class and are accessible as properties of the corresponding objects ((Markdown/T_MindFusion_Diagramming_DiagramBase_1.md#diagrambase-events) or (Markdown/T_MindFusion_Diagramming_DiagramView.md#diagramview-events)). Event listeners are attached through the (Markdown/T_MindFusion_Controls_EventDispatcher.md#addeventlistener) method and removed through the (Markdown/T_MindFusion_Controls_EventDispatcher.md#removeeventlistener) method. The following sample code attaches an event listener to the (Markdown/T_MindFusion_Diagramming_DiagramBase_1.md#nodecreated) event of a (Markdown/CC_T_MindFusion_Diagramming_Diagram_0.md) control. The variable diagram identifies a (Markdown/CC_T_MindFusion_Diagramming_Diagram_0.md) instance and onNodeCreated is the name of the event handler function: ```javascript diagram.nodeCreated.addEventListener(onNodeCreated); ``` All event handlers receive two arguments. The first 'sender' argument specifies the object that emits the event, and the second 'args' argument is an instance of an (Markdown/T_MindFusion_Controls_EventArgs.md) -derived class: ```javascript function onNodeCreated(sender, args) { // ... } ``` While some events are raised to notify you that the user has performed an action, like the (Markdown/T_MindFusion_Diagramming_DiagramBase_1.md#nodecreated) event, validation events let you accept or reject user actions before actually changing the diagram. Validation event names usually end in '-ing' suffix, such as (Markdown/T_MindFusion_Diagramming_DiagramBase_1.md#nodecreating). The args parameter passed to their handler functions is an instance of a (Markdown/T_MindFusion_Controls_CancelEventArgs.md) -derived class. Validation event handlers are expected to set the value of args' (Markdown/T_MindFusion_Controls_CancelEventArgs.md#cancel) property either to true if it should be rejected or false (the default) if it should be accepted. The following code handles the (Markdown/T_MindFusion_Diagramming_DiagramBase_1.md#nodedeleting) event and, if the node to be deleted is a (Markdown/CC_T_MindFusion_Diagramming_TableNode_0.md) instance, cancels the action: ```javascript diagram.nodeDeleting.addEventListener( (sender, args) => { args.cancel = args.node instanceof TableNode; }); ``` ## Controlling User Interaction There are several ways to control user actions on the diagram as a whole, or on individual items in the diagram. ## Drawing Modes The (Markdown/T_MindFusion_Diagramming_DiagramView.md#behavior) property of (Markdown/T_MindFusion_Diagramming_DiagramView.md) provides several predefined sets of rules specifying how to interpret user input through pointing device. The default (Markdown/T_MindFusion_Diagramming_DiagramView.md#behavior) is (Markdown/CC_T_MindFusion_Diagramming_Behavior_0.md), where drawing with mouse or touch from an unoccupied point of the document is processed as a (Markdown/CC_T_MindFusion_Diagramming_ShapeNode_0.md) creation request, and drawing from a node creates a (Markdown/CC_T_MindFusion_Diagramming_DiagramLink_0.md). Additional members of the (Markdown/CC_T_MindFusion_Diagramming_Behavior_0.md) enumeration provide modes for drawing different node types, and ones that allow only limited interactions, such as (Markdown/CC_T_MindFusion_Diagramming_Behavior_0.md) or (Markdown/CC_T_MindFusion_Diagramming_Behavior_0.md). ## Item Constraints Constraints upon how users are allowed to modify a node are set through the (Markdown/CC_T_MindFusion_Diagramming_DiagramNode_0.md#constraints) and (Markdown/CC_T_MindFusion_Diagramming_DiagramNode_0.md#enabledhandles) properties. The former can be used to constrain the move direction, node size and aspect ratio. The latter enables or disables specific manipulation handles of a node. That allows making the node non-moveable, non-resizable, or resizable only horizontally/vertically. Items can be locked by setting their (Markdown/CC_T_MindFusion_Diagramming_DiagramItem_0.md#locked) property. Locked items are excluded from selection and users cannot select, move or modify them. ## In-place Text Editing The text of nodes and links can be edited in-place by double-clicking the respective items. To enable this feature, set the (Markdown/T_MindFusion_Diagramming_DiagramView.md#allowinplaceedit) property to true. Depending on the type of item, the control raises either the (Markdown/T_MindFusion_Diagramming_DiagramBase_1.md#nodetextedited), (Markdown/T_MindFusion_Diagramming_DiagramBase_1.md#celltextedited) or (Markdown/T_MindFusion_Diagramming_DiagramBase_1.md#linktextedited) event when its text has been edited. In-place editing mode is exited when users click outside the text entry control. Pressing ENTER or ESC exits inplace-edit mode if respectively (Markdown/T_MindFusion_Diagramming_DiagramView.md#inplaceeditacceptonenter) and (Markdown/T_MindFusion_Diagramming_DiagramView.md#inplaceeditcancelonesc) are enabled. By default, the control creates a textarea DOM element over an item to allow editing the item's text. If you prefer using a different type of element as in-place editor, handle the (Markdown/T_MindFusion_Diagramming_DiagramView.md#createeditcontrol) event and set the (Markdown/T_MindFusion_Diagramming_InplaceEditEventArgs.md#control) property of the provided (Markdown/T_MindFusion_Diagramming_InplaceEditEventArgs.md) object. ## Validation Events While the user draws new nodes or links, the control raises the (Markdown/T_MindFusion_Diagramming_DiagramBase_1.md#nodecreating) or (Markdown/T_MindFusion_Diagramming_DiagramBase_1.md#linkcreating) events after each change of the mouse position. By setting the (Markdown/T_MindFusion_Controls_CancelEventArgs.md#cancel) property of the event object, you can prevent the operation from being completed at the current position but let the user continue drawing. Calling the (Markdown/T_MindFusion_Diagramming_ItemEventArgs_1.md#canceldrag) method immediately stops the operation. The (Markdown/T_MindFusion_Diagramming_DiagramBase_1.md#nodemodifying) and (Markdown/T_MindFusion_Diagramming_DiagramBase_1.md#linkmodifying) events provide the same functionality during modification of existing objects. Finally, if the user tries to delete an item, you can handle the (Markdown/T_MindFusion_Diagramming_DiagramBase_1.md#nodedeleting) or (Markdown/T_MindFusion_Diagramming_DiagramBase_1.md#linkdeleting) event to prevent this. ## Interaction Properties - (Markdown/CC_T_MindFusion_Diagramming_Diagram_0.md#allowselfloops) property of (Markdown/CC_T_MindFusion_Diagramming_Diagram_0.md) specifies whether users can draw reflexive / self-loop links. - (Markdown/CC_T_MindFusion_Diagramming_Diagram_0.md#allowunconnectedlinks) property specifies whether users can create links without connecting them to nodes (e.g. for simple line or curve graphics in a drawing). - (Markdown/CC_T_MindFusion_Diagramming_Diagram_0.md#allowlinksrepeat) specifies whether user can draw a second link between same pair of nodes. - (Markdown/T_MindFusion_Diagramming_DiagramView.md#delkeyaction) specifies how the (Markdown/T_MindFusion_Diagramming_DiagramView.md) handles the Delete key. - (Markdown/T_MindFusion_Diagramming_DiagramView.md#modifierkeyactions) allows changing the function of modifier keys. - (Markdown/T_MindFusion_Diagramming_DiagramView.md#leftbuttonactions), (Markdown/T_MindFusion_Diagramming_DiagramView.md#middlebuttonactions) and (Markdown/T_MindFusion_Diagramming_DiagramView.md#rightbuttonactions) allow mapping interaction types to mouse buttons. - (Markdown/T_MindFusion_Diagramming_DiagramView.md#mousewheelaction) allows changing the function of the mouse wheel. - (Markdown/CC_T_MindFusion_Diagramming_DiagramNode_0.md#allowincominglinks) and (Markdown/CC_T_MindFusion_Diagramming_DiagramNode_0.md#allowoutgoinglinks) properties of (Markdown/CC_T_MindFusion_Diagramming_DiagramNode_0.md) specify if a node accepts respective types of links. - setting the (Markdown/CC_T_MindFusion_Diagramming_DiagramItem_0.md#locked) property of a (Markdown/CC_T_MindFusion_Diagramming_DiagramItem_0.md) prevents users from interacting with it altogether. ## Multi-touch Support The control handles DOM Pointer events to implement multi-touch interactions, such as zooming, node rotation or simultaneous drawing of multiple diagram items: - If (Markdown/T_MindFusion_Diagramming_DiagramView.md#multitouchzoom) property is enabled (default), the view can be zoomed or panned using two-touch pinch / flick gestures. - If (Markdown/T_MindFusion_Diagramming_DiagramView.md#multitouchmodify) property is enabled (default), diagram nodes can be moved, scaled and rotated using two-touch pinch / flick gestures. - If (Markdown/T_MindFusion_Diagramming_DiagramView.md#multitouchzoom) property is disabled, each touch draws diagram items corresponding to current behavior. - If (Markdown/T_MindFusion_Diagramming_DiagramView.md#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 (Markdown/T_MindFusion_Diagramming_DiagramView.md#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. ## User-interaction controllers All kinds of user interaction are carried out by controller objects. Built-in controllers include (Markdown/T_MindFusion_Diagramming_CreateNodeController.md), (Markdown/T_MindFusion_Diagramming_CreateLinkController.md), (Markdown/T_MindFusion_Diagramming_ModifyNodeController.md), (Markdown/T_MindFusion_Diagramming_ModifyLinkController.md), (Markdown/T_MindFusion_Diagramming_PanController.md). You can also create custom controllers by deriving and overriding the methods of (Markdown/T_MindFusion_Diagramming_SinglePointerController.md): ```javascript SinglePointerController.prototype = { start: function (position) {}, move: function (position) {}, validate: function (position) {}, commit: function (position) {}, cancel: function (position) {}, drawInteraction: function (context) {} } ``` The controller instance used by the diagram when interaction starts is returned by (Markdown/T_MindFusion_Diagramming_BehaviorBase.md#createcontroller) method of (Markdown/T_MindFusion_Diagramming_BehaviorBase.md) -derived classes. You can replace the method of standard behavior classes with a custom function to return a different controller, or inherit a new class from (Markdown/T_MindFusion_Diagramming_BehaviorBase.md) that implements it and assign it to the currentBehavior property of (Markdown/T_MindFusion_Diagramming_DiagramView.md). ## Alignment Grid MindFusion.Diagramming provides an alignment grid to help users place the diagram items more precisely. To activate the grid, set the (Markdown/CC_T_MindFusion_Diagramming_Diagram_0.md#aligntogrid) property to true. If the grid is active while an item is being created or modified, the item's control-points are aligned to the nearest grid points. The distance between adjacent grid points is set by the (Markdown/CC_T_MindFusion_Diagramming_Diagram_0.md#gridsizex) and (Markdown/CC_T_MindFusion_Diagramming_Diagram_0.md#gridsizey) properties. The (Markdown/CC_T_MindFusion_Diagramming_Diagram_0.md#gridoffsetx) and (Markdown/CC_T_MindFusion_Diagramming_Diagram_0.md#gridoffsety) properties allow specifying the horizontal and vertical offset of the first point in the alignment grid. Items created or modified by a user are automatically aligned to the grid. However, if items are placed in the diagram programmatically, their coordinates are set to the specified positions without aligning. In such cases use the (Markdown/CC_T_MindFusion_Diagramming_Diagram_0.md#alignpointtogrid) method if items must be placed exactly at grid points. The grid can be either visible or invisible, depending on whether the (Markdown/CC_T_MindFusion_Diagramming_Diagram_0.md#showgrid) property is enabled. If visible, the grid is painted as a matrix of points or as series of crossing lines, as specified by the (Markdown/CC_T_MindFusion_Diagramming_Diagram_0.md#gridstyle) property. (Markdown/CC_T_MindFusion_Diagramming_Diagram_0.md#gridcolor) defines the color with which the alignment points or lines are painted. ## Undo and Redo If the (Markdown/CC_T_MindFusion_Diagramming_Diagram_0.md#undoenabled) property is set to true, the control records users actions and allows undoing them later. The records are stored in a list, and can be undone consecutively by calling the (Markdown/CC_T_MindFusion_Diagramming_Diagram_0.md#undo) method. An action that has been undone can be redone by calling the (Markdown/CC_T_MindFusion_Diagramming_Diagram_0.md#redo) method. You can enable or disable UI elements that undo or redo commands by binding them to the canUndo and canRedo properties. The control also runs and saves in the undo history (Markdown/T_MindFusion_Diagramming_AddItemCommand.md) and (Markdown/T_MindFusion_Diagramming_RemoveItemCommand.md) commands when items are programmatically added or removed from the Items collection of the (Markdown/CC_T_MindFusion_Diagramming_Diagram_0.md). No other changes are recorded automatically when done from code. If support for undo/redo of such changes is required, they must be done through the (Markdown/CC_T_MindFusion_Diagramming_Diagram_0.md#executecommand) method. To allow undoing changes of (Markdown/CC_T_MindFusion_Diagramming_DiagramItem_0.md) properties, create a (Markdown/T_MindFusion_Diagramming_ChangeItemCommand.md) instance before setting the property values, and call (Markdown/CC_T_MindFusion_Diagramming_Diagram_0.md#executecommand) afterwards. Any other types of undoable changes can be implemented by deriving from the (Markdown/T_MindFusion_Diagramming_Command.md) class and overriding its (Markdown/T_MindFusion_Diagramming_Command.md#execute), (Markdown/T_MindFusion_Diagramming_Command.md#undo) and (Markdown/T_MindFusion_Diagramming_Command.md#redo) methods. ## Scrolling and Zooming The (Markdown/T_MindFusion_Diagramming_DiagramView.md) control implements scroll and zoom support. If diagram's size is larger than current (Markdown/T_MindFusion_Diagramming_DiagramView.md#viewport), scrollbars appear and let the user scroll to clipped parts of the diagram. ## Diagram Size The diagram size is set through the (Markdown/T_MindFusion_Controls_Canvas.md#bounds) property. Its value is a (Markdown/T_MindFusion_Drawing_Rect.md) instance that specifies the origin of the diagram coordinate system and the diagram size. Scrollbar ranges also depend on the current (Markdown/T_MindFusion_Diagramming_DiagramView.md#zoomfactor). ## Automatic Scrolling The (Markdown/T_MindFusion_Diagramming_DiagramView.md#autoscroll) property controls automatic scrolling. If it is enabled and the user drags an adjustment handle near the (Markdown/T_MindFusion_Diagramming_DiagramView.md) edges while manipulating an item, the control will scroll the viewport towards the mouse position. The (Markdown/T_MindFusion_Diagramming_DiagramView.md#scrollzonesize) property defines the size of the area near the view borders that triggers automatic scrolling. ## Programmatic Scrolling In order to scroll the document content programmatically, you can call the (Markdown/T_MindFusion_Diagramming_DiagramView.md#scrollto) method or set (Markdown/T_MindFusion_Diagramming_DiagramView.md#scrollx) and (Markdown/T_MindFusion_Diagramming_DiagramView.md#scrolly) properties. The latter can also be used to access the current scroll position in case you need it. The (Markdown/T_MindFusion_Diagramming_DiagramView.md#bringintoview) method scrolls the view to ensure that a specific diagram item can be seen inside the viewport. ## Zooming Zooming is controlled via the (Markdown/T_MindFusion_Diagramming_DiagramView.md#zoomfactor) property. The zoom level is expressed as a percentage, 100% meaning no zoom. Higher than 100% makes the diagram items look closer and bigger on the screen - zooming in. Less than 100% makes items look further and smaller on screen - zooming out. To zoom and scroll the view to fit the diagram contents to the control's client area, call (Markdown/T_MindFusion_Diagramming_DiagramView.md#zoomtofit). To zoom and scroll the view so it fits a specified rectangular document area to the control's client area, call (Markdown/T_MindFusion_Diagramming_DiagramView.md#zoomtorect). ## Lasso Zoom Tool The control supports several ways to zoom using lasso tool: - Set the (Markdown/T_MindFusion_Diagramming_DiagramView.md#behavior) property to (Markdown/CC_T_MindFusion_Diagramming_Behavior_0.md) to always draw zoom lasso. - Set the (Markdown/T_MindFusion_Diagramming_ModifierKeyAction_0.md) flag for one of the keys in (Markdown/T_MindFusion_Diagramming_DiagramView.md#modifierkeyactions) to let users draw zoom-lasso with respective modifier key pressed and the left mouse button. - Assign (Markdown/T_MindFusion_Diagramming_MouseButtonActions_0.md) value to (Markdown/T_MindFusion_Diagramming_DiagramView.md#rightbuttonactions) or (Markdown/T_MindFusion_Diagramming_DiagramView.md#middlebuttonactions) property to zoom using respective mouse button. ## Zoom control The (Markdown/T_MindFusion_Controls_ZoomControl.md) class lets user change interactively the current zoom level and scroll position of a (Markdown/T_MindFusion_Diagramming_DiagramView.md). To set it up, add a