Documentationfor yFiles for HTML 2.3

Introduction yFiles for HTML Features Getting Started Demos and Tutorials Working with yFiles The Graph Model Displaying the Graph User Interaction Graph I/O and Printing Automatic Graph Layout Graph Analysis Creating a Graph from Business Data Customizing the Graph Customizing the View Customizing User Interaction Customizing Styles Customizing Graph I/O Customizing Automatic Layout General Concepts for Customization Advanced Concepts Utility Scripts and Tools Known Issues and Workarounds Glossary Migration Guide

Use arrow keys to navigate

Introduction Graphs and Diagrams About yFiles for HTML Technical Requirements During Development Deployed Applications Supported Browsers yFiles for HTML Product Types About this Developer’s Guide yFiles for HTML Features Getting Started Setting up Your Development Environment JetBrains IDEs Creating a Project Using the npm Package Adding the Library Manually Including the License Creating a Web Application Visual Studio Code Creating a Project Adding the Library Manually Enabling IntelliSense Including the License TypeScript Support Visual Studio Code WebStorm Visual Studio Runtime Developer Tools Creating the Web Application Creating the GUI Module Loading Importing the ES Modules of yFiles for HTML Adding the Main Component Creating Graph Elements Creating Nodes Creating Edges Using Bends Using Ports Adding Labels Removing Elements Summary of Creating Elements User Interaction Setting Styles Placing Graph Elements Placing Nodes Placing Bends Placing Labels Placing Ports Automatic Graph Layout Adding a Layout Button Loading and Saving Graphs Demos and Tutorials Running the Demos The Demo Server Converting the Demos for Old Browsers Working with yFiles The Class Framework yFiles Library Formats ES Modules Importing the ES Modules of yFiles for HTML UMD Modules Loading the UMD Modules Using an AMD Loader Loading the UMD Modules Using CommonJS Loading the UMD Modules Using Browser Globals Development Mode Setup Type Checking Graph Inspection and Status Information Custom Formatters Working with the yFiles npm Module Installing from the Local Filesystem Creating the yFiles for HTML npm package Installing from a Remote Filesystem Installing from a Local or Private npm Registry Installing from a Local git Server The Version Number of the yFiles npm Package Classes Extending Classes Interfaces instanceof Checks for Interfaces Implementing Interfaces Quick Interface Implementation Quick Interface Implementation in TypeScript Extending Classes and Implementing Interfaces Namespaces Events Delegates Option Overloads Extra Properties in Option Overloads Automatic Type Conversion Enums Colors, Fills, and Strokes Fonts Rectangles, Points, Sizes, and Insets Arrows Cursors TimeSpan Enumerables, Collections, and Lists ItemMapping, ItemCollection, SingleItem The Graph Model IGraph Nodes Edges Bends Self-loops Edge to Edge Connections Labels Ports Grouping Nodes Traversing the Hierarchy Adjusting the Size of a Group Node Setting Defaults for new Items Finding Adjacent Nodes and Edges Storing Business Data for Graph Elements Displaying the Graph The Component for Displaying Graphs Managing the View Visualization of Graph Elements Styles Arrows Bridges Item Layout Nodes Edges Labels Ports Selection, Focus, and Highlight Component for Graph Outline User Interaction Editing Graphs Non-Editable Graphs Supported User Interactions Zooming, Panning, and Scrolling Creating Nodes Creating Edges Adding and Editing Labels Creating Bends Deleting Items Moving Items Resizing Nodes Grouping Keyboard Input Mouse Clicks Touch Gestures Selection Focus Tooltips Context Menus Drag and Drop Clipboard Undo and Redo Snapping Border and center snap lines Same size snap lines Same distance snap lines Grid snapping Orthogonal Edge Editing Graph I/O and Printing Loading and Saving Graphs JSON GraphML Image Export Bitmap Export PDF Export VSDX Export Printing Automatic Graph Layout Summary of Layout and Routing Styles Layout Styles Hierarchical Layout Organic Layout Tree Layout Orthogonal Layout Circular Layout Radial Layout Series-parallel Layout Family Tree Layout Edge Routing Styles Polyline Routing Channel Routing Bus Routing Organic Routing Label Placement Algorithms Integrated Labeling Layout of Grouped Graphs Layout of Tables and Swimlanes Layout with Edge Grouping Incremental Layout Node Padding (Halos)Edge Bundling Applying an Automatic Layout Layout Data Configuring the Layout Morphing Aborting Layout Calculations Multi-Threading Edge-to-Edge Connections Layout Stages The Layout Stage Concept Default Multi-Stage Layout Pipeline Layout of Unconnected Components Wrapping Wide or High Layouts Port Placement Automatic Port Handling by LayoutExecutor Restricting Port Locations Port Candidates for Nodes Matching Port Candidates and Edges Port Candidates for Edges Port Constraints Restricting Ports for Layout Algorithms which Do Not Support Port Constraints Automatic Label Placement Labeling Scenarios: Generic vs. Integrated Labeling Defining valid positions Label Models Preferred Placement of Edge Labels Generic Labeling Layout Data Integrated Labeling Hierarchical Layout Terminology Application Areas Relevant Classes Basic Options Labeling Grouped Graphs Recursive Edges Routing Non-incremental Layout Layer Assignment Options From Scratch Layering Strategy Node Order Options Incremental Layout Use Cases Specifying Hints Constrained Layer Assignment Constrained Node Sequencing Layer Assignment with Undirected Edges Custom Sub-Components Example Usage Inter-Edges Grouped Graphs Port Constraints Port Candidates Edge Grouping Automatic Edge Grouping Custom Edge Grouping Bus Structures Grid Swimlanes Setup Partition Grid Critical Paths Edge Crossing Costs Crossing costs with group borders Node Halos Related Classes NodeLayoutDescriptor and EdgeLayoutDescriptor SimplexNodePlacer Applicable Layout Stages Tutorial Demo Code Layout Data Related Layout Algorithms Organic Layouts Application Areas Relevant Classes Basic Options Labeling Grouped Graphs Incremental Layout Tables Layout of Regular Substructures Node Halos Layout Data Related Layout Algorithms Interactive Organic Layout Basic Options General Usage Setup Life Cycle Polling for Results Interaction Layout Data Tutorial Demo Code Tree Layouts General Sorting Child Nodes Enhancing the Layout Process of a Tree Layout Edge Bundling Tutorial Demo Code Classic Tree Layout Basic Options Labeling Incremental Layout Node Halos Layout Data Tree Layout Basic Options Predefined Node Placers Labeling Grouped Graphs Incremental Layout Port Constraints Node Halos Multi-parent Structures Layout Data Tutorial Demo Code Balloon Tree Layout Basic Options Labeling Incremental Layout Node Halos Layout Data Aspect Ratio Tree Layout Basic Options Layout Data Tree Map Layout Terminology Input Defining the Weight of Nodes Basic Options Tiling Policy More Settings Layout Data Orthogonal Layouts Basic Options Labeling Grouped Graphs Substructure Support Substructures - Edge Directedness Tree Substructures Chain Substructures Cycle Substructures Related Classes Applicable Layout Stages Layout Data Directed Edge Drawings Directed Edges Edge Grouping Compact Orthogonal Layout Basic Options Applicable Layout Stages Circular Layout Basic Options Partition Arrangement Options Edge Routing Policy Exterior Edges - Settings Tree Arrangement Options Labeling Node Halos Edge Bundling Optimizing Compactness Returning Circle Indices Layout Data Radial Layout Terminology Basic Options Node Halos Edge Bundling Layout Data Series-parallel Layout Terminology Relevant Classes Basic Options Labeling Grouped Graphs Incremental Layout Handling Non-Series-parallel Graphs Layout Data Tabular Layout Relation to Partition Grid Layout Policies Auto-Size Fixed Size From-Sketch Basic Options Node Layout Descriptor Grid-related Settings More General Settings Layout Data Partial Layout Relevant Classes Subgraph Components Basic Options Edge Routing Options Grouped Graphs Node Alignment Layout Data Multi-page Layout About the Concept Terminology Relevant Classes Running a Multi-Page Layout Setup for Layout Options Obtaining the Result from a Multi-Page Layout Tutorial Demo Code Supplemental Layout Data Clear and Fill Area Layout Input Area defined by a set of nodes (AreaNodes)Area defined by a single expanded node Basic Options ClearAreaStrategy More Settings for ClearAreaLayout Settings for FillAreaLayout Layout Data Family Tree Layout Basic Options Layout Data Polyline Edge Routing Relevant Classes Basic Options Advanced Options Routing Style Minimum Edge to Edge Distance Minimum Length of First and Last Segment Minimum Distance to Node Corners Penalty Settings Monotonic Path Restrictions Edge routes similar to the Hierarchical Layout Labeling Grouped Graphs Incremental Layout Port Constraints Port Candidates Edge Grouping Bus-style routing Usage Tables Node Halos Layout Data Channel Edge Routing Basic Options Incremental Layout Port Constraints Port Candidates Related Classes Applicable Layout Stages Layout Data Bus-style Edge Routing Terminology Relevant Classes Setup Basic Options Bus-related Options Hub Structure Incremental Layout Polyline Routing Port Constraints Port Candidates Esthetic Buses Layout Data Organic Edge Routing Basic Options Enhancing the Routing Process Layout Data Graph Analysis Using Graph Analysis Analyzing Only Part of a Graph Centrality Measures Clustering BiconnectedComponent KMeans EdgeBetweenness LouvainModularity LabelPropagation Hierarchical Connectivity Connected Components Independent Sets K-Core Components Paths Shortest Path Reachability Trees Tree Characteristics Querying Tree Structures Finding trees Example: Make Directed Tree Network Flows Maximum Flow Minimum Cost Flow Transitivity Node Aggregation Creating a Graph from Business Data Common Features Binding the Business Data to the Graph Builders Configuring the Visual Appearance of Graph Items Creating And Updating Graphs Grouping GraphBuilder TreeBuilder AdjacencyGraphBuilder Customizing the Graph Decorating Graph Elements Setting a Decoration Removing a Decoration Examples Associating Data with Graph Elements Reacting to Graph Changes Reacting to Element Creation Reacting to Element Removal Reacting to Grouping Related Changes Reacting to Other Structural Changes Reacting to Tag Changes Reacting to Layout and Geometry Changes Reacting to Other Property Changes Copying Elements of a Graph Customizing the View Visualizing Arbitrary Objects Changing the Z-order General Thoughts The Default Z-order of Edges and Groups The Z-order of Graph Elements Re-ordering Model Items Z-order Commands The Z-order of Indicators Completely Customize the Z-order Customizing Selection, Focus, and Highlight Using CSS Styling for the Indicators The Selection and Focus Template The Highlight Template Using Styles for the Indicators Model Manager Indicator Installer Customizing the Predefined Indicators Implementing a Custom Indicator Installer Adding your own Indicator for Objects Building Indicators into your Styles Restricting the Viewport Customizing the Graph Outline OverviewGraphVisualCreator Second GraphControl Viewport Rectangle Animations Predefined Animations Animation Framework Support for Colors and Fills CSS Styling Styling of Handles Styling of Port Candidates Styling of Marquee Rectangle Styling of Lasso Selection Styling of Overview Viewport Rectangle Styling of Table Indicators Styling of Snap Lines Styling of the Grid Visual Styling of Selection, Focus and Highlight Indicators Styling of the Label Position Suggestions Styling of the Label Input Element Styling of the Tooltip Element Customizing User Interaction Adding Custom Input Modes Coordinating Different Kinds of User Interactions Priorities and Exclusiveness Event Recognizers Customizing Cursors Zooming, Panning, and Scrolling Mouse Wheel and Scroll Bars Panning Creating Nodes Creating Edges Reconnecting Edges Providing Port Candidates Customizing the Reconnection Gesture Adding and Editing Labels CSS Transition or Animation for the Input Element Enter Phase Leave Phase Deleting Items Moving Items Moving Unselected Items Moving Labels Resizing Nodes IReshapeHandleProvider IHandleProvider IHandle IReshapeHandler INodeSizeConstraintProvider Grouping Keyboard Input Mouse Clicks Touch handling Selection Tooltips CSS Transition or Animation Enter Phase Leave Phase Context Menus Drag and Drop General Drag and Drop Support Drag and Drop of Graph Items Preview outside of the GraphComponent Providing a Custom Preview Element Using native HTML5 Drag and Drop API Drag and Drop of INodes Drag and Drop of ILabels Drag and Drop of IPorts Undo and Redo Custom Undo Units Built-in Undo Units Merging Changes into one Undo Unit Remembering States for Undo (Memento Design Pattern)Clipboard Defining Items to be Copied and Pasted Clipboard Operations with Dependent Items Copy Dependent Items Independently Filtering the Items to be Cut / Copied / Pasted Customizations for Paste Customizing the Clipboard for Individual Items: IClipboardHelper Snapping Adding Custom Snap Lines Adding Custom Snap Results Orthogonal Edge Editing Customizing Styles Basic Style Implementation Predefined Visuals Implementing an Visual Efficient Style Implementation Decorating Styles Refining a Style’s Behavior IHitTestable IMarqueeTestable ILassoTestable IBoundsProvider IVisibilityTestable IShapeGeometry IPathGeometry Separating Style and Renderer Customizing Predefined Styles The Preferred Label Size Using SVG Templates in Styles Using Strings as Templates Using Data Binding Template Binding Bindings in String Template Styles Property Paths Converters Notifying of Property Changes State Dependent CSS classes Text Wrapping in a Template Style Using Vue.js Templates in Node Styles Using Data Binding Usage Example Using Node Styles for Labels and Ports Using Node Styles for Port Candidates Customizing Bridges Crossing Styles Crossing Determination Custom Obstacle Provider Bridges for Custom Edge Styles Customizing Graph I/O The GraphML File Format The GraphMLIOHandler Adding Custom Data for Serialization Automatically Serialized Types Map the Namespace of Your Custom Types Serializing Complex Types Markup Extension Registering a Markup Extension for Deserialization Registering a Markup Extension for Serialization Serialization Event Listeners Serialization with Symbolic Names Low-level Customizations Implementing Custom I/O Handlers Registering Custom I/O Handlers Best Practices for Customizing Serialization Provide Default Values for Your Properties Annotating ECMAScript Level 5 classes Customizing Automatic Layout The Layout Graph Model Class LayoutGraph Creating and Removing Graph Elements Class Node Class Edge Classes INodeLayout and IEdgeLayout Labels Defining label positions: Label Models Preferred placement of a Label Group Nodes Time Complexity Hiding Graph Elements Iteration Mechanisms Collections Binding Data to Graph Elements Maps and Data Providers Default Map Implementations Creating Customized Data Accessors Notes Using Buffered Layout Customizing Tabular Layout Algorithm namespace YGraphAdapter Depth-First Search General Concepts for Customization Configuration Properties Logic Abstraction Service Locator Pattern: Lookup Using Lookup The Lookup Chain Examples for Lookup Decoration Events Resource Keys Customizing String Resources Resources Defaults Commands Custom Command Bindings Commands and HTML Widgets Advanced Concepts Filtering: Hiding Graph Elements Folding Working with Folding Styles for Folding User Interaction Folding Revisited Working with Master and View Converting Master and View Items Tasks for the Master Graph Tasks for the View Graph The State of Folded Elements Maintaining the Folder Node State Maintaining the Folding Edge State Shared Folding States of Multiple Views Tables Concepts Table Model Working with the Table Model Undo/Redo Support Visual Representation Rows and Columns Stripe Styles CSS Styling of Indicators User Interaction Interaction Customization Hit-testing Tutorial Demo Code Automatic Layout Tutorial Demo Code Details of the yFiles Class Framework Modules and Namespaces Type System Overview Classes Interfaces Structures Enumerations Attributes Lazy Type Definitions Classes Defining a Class in ES5 Class Inheritance Interface Inheritance Lazy Classes Interfaces Defining an Interface Interface Inheritance Lazy Interfaces Structures Defining a Structure Lazy Structures Enumerations Defining an Enumeration Type Lazy Enumerations Attributes Defining an Attribute Lazy Attributes Additional Support Events Canvas Rendering The Canvas Rendering API When should I use canvas rendering?When should I avoid canvas rendering?WebGL Rendering Predefined WebGL Styles The WebGL Rendering API When should I use WebGL rendering?When should I avoid WebGL rendering?Using Projections Understanding Projections Drawing Elements in World Coordinates Drawing Elements in Intermediate Coordinates Drawing Elements in View Coordinates Drawing Custom Visuals in View Coordinates Interacting with projected Graphs Scrollbars and Content Fitting Unsupported Functionality Large Graph Performance General Considerations Size Layouts GraphOverviewControl GraphEditorInputMode Styles Virtualization Selections Static Graphs Label Models CanvasObjectDescriptor Deployment Preparing the Development Mode Library for Production Technical Details Licensing General Concept Registering the License Development vs. Distribution License Pre-installed License in Evaluation Packages Separate Licenses for Purchased yFiles for HTML Packages Redistributables in Evaluation Packages Redistributables in Purchased yFiles for HTML Packages Good Practices Web Browser Caching Problem Analysis and Background Solution HTTP Compression Problem Analysis and Background Solution ES5 Compatibility ECMAScript 2015 Shim ES5 Compatibility in a Toolkit Project ES5 Compatibility in General Webpack + Babel Rollup + Babel Toolkit Specific Advice Webpack Separate yFiles Chunk Integrating the yWorks Optimizer Excluding the yFiles Chunk from Minimzation Angular CLI TypeScript Vue.js React Electron yWorks Optimizer yWorks Optimizer Examples Using the yWorks Optimizer as a Webpack Plugin Using the yWorks Optimizer in a Gruntfile Using the yWorks Optimizer API Utility Scripts and Tools Tools Included in the yFiles for HTML Package Creating Typings for the yFiles npm Module Converting ES Module Imports to UMD Converting UMD Imports to ES Modules Examples Split Single 'yfiles' Import Example Usage Tools Available Online yWorks Optimizer Scaffolding with Yeoman Known Issues and Workarounds Known Issues of the yFiles Library With TypeScript 4.0, overriding properties of yFiles classes fails Multilevel inheritance of JavaScript classes, yFiles class framework Rendering issues, Safari 11 and all WebKit-based browsers on iOS 11 Undefined behavior with JS classes, Edge before Windows 10 Creators Update Zooming on precision touchpad not working, EdgeHTML 16 and Internet Explorer 11 Graph panning and drag operations lag, Chrome Poor SVG rendering performance, Firefox Missing visualizations when using SvgExport.encodeImagesBase64, Firefox Broken Web Components 1.0 implementation, Safari 10 and newer Broken SVG <marker> elements, Edge 16 and Internet Explorer on Windows 7, 8, and 8.1 Dashed lines, Edge Text rendering, Edge before Windows 10 Creators Update Mouse events, All browsers Fast zooming and scrolling on precision touchpads, Firefox Custom styles, Internet Explorer 11, Windows 7 only Consecutive whitespace characters in label text, Internet Explorer Disappearing <use> elements, Internet Explorer 11 on Windows 10 Native HTML5 drag and drop not working, Internet Explorer Array.isArray fails in some cases, GWT projects in Internet Explorer Developer tools drastically degrade JavaScript performance, Internet Explorer Application menu on Alt press cannot be disabled, Firefox Known Vulnerabilities Known Issues of Third-party Toolkits Possible performance issue in large Angular applications Possible "RangeError: Maximum call stack size exceeded" in production build of Angular 8 UglifyJS may corrupt Unicode characters in the library code Known Issues of the Demos Unresponsive script warning Grid visualisation Image Export Demo HTML Label Demo Web Worker Demo ShadowNodeStyleDecorator Operation Not Permitted During Installation on macOS Glossary Migration Guide Migration Tool Migrating from UMD to ES Modules Migrating to 2.3 from 2.2 yfiles-typeinfo.js and Development Mode The New Graph Builder Classes Changes When using a Projection Renamed Types and API Members Removed API Members Other API Changes Changes of Default Behavior Deprecations Migrating to 2.2 from 2.1 License File Changes Renamed API Members Renamed Types Renamed API Members in ECMAScript Modules Removed API Members Other API Changes Migrating to 2.1 from 2.0.1 Changed Module Dependencies Renamed API Members Removed API Members Deprecated API Members Other API Changes TypeScript Definition File Changes Migrating to 2.0.1 from 2.0 Renamed API Members Removed API Members Other API Changes Behavior Changes Migrating to 2.0 from 1.x General Changes to the Class Framework Changes to the Collection Types Changes to Helper Classes and Default Implementations Usage of Promises Major Version Change for GraphML Geometry Support 'Struct' Classes Restructured Javascript Modules Modules do not Introduce Globals Anymore Built-in Types are no Longer Modified Grouping and Folding ECMAScript Level 6 Layout and Graph Analysis Detailed Changes General Namespace Structure Factory Methods Instead of Default Implementations Moved Static Members to Interfaces Model IGraph DefaultGraph Folding Labels Ports Table Undo Support Geometry Controls and Components Members of GraphComponent Visualization Styles Various Visualization Changes Input General Input Mode refactorings GraphEditorInputMode and GraphViewerInputMode CreateEdgeInputMode Other Input Modes Label Editing Snapping Clipboard KeyboardInputMode Various Input-related Changes GraphML Collections and Utility Types Layout Layout Execution Layout API Renamed Types

Welcome to the yFiles for HTML Documentation Viewer

Search API and Documentation?

More Search Results

Quick Links

Getting Started

Developer's
Guide

Demos and
Tutorials

PRODUCTS

yFiles
yFiles for HTML
yFiles for Java
yFiles for JavaFX
yFiles.NET
yFiles WPF
yEd
yEd Live

yWORKS

Services
Blog
Downloads
References
Jobs
Contact

FOLLOW US

Copyright © 2020 yWorks GmbH

Legal Disclosure
Terms of Use
Privacy Policy