yFiles for HTML 2.2.0.2 demos

Author: fskpf

demos/01-tutorial-getting-started/03-managing-viewport/SampleApplication.js

@@ -30,6 +30,7 @@ import {
   ExteriorLabelModel,
   FreeNodePortLocationModel,
   GraphComponent,
+  GraphOverviewComponent,
   ICommand,
   IGraph,
   License,

demos/01-tutorial-getting-started/04-setting-styles/SampleApplication.js

@@ -33,6 +33,7 @@ import {
   Fill,
   FreeNodePortLocationModel,
   GraphComponent,
+  GraphOverviewComponent,
   ICommand,
   IGraph,
   License,

demos/01-tutorial-getting-started/05-label-placement/SampleApplication.js

@@ -32,6 +32,7 @@ import {
   ExteriorLabelModelPosition,
   FreeNodePortLocationModel,
   GraphComponent,
+  GraphOverviewComponent,
   ICommand,
   IGraph,
   Insets,

demos/01-tutorial-getting-started/06-basic-interaction/SampleApplication.js

@@ -33,6 +33,7 @@ import {
   FreeNodePortLocationModel,
   GraphComponent,
   GraphEditorInputMode,
+  GraphOverviewComponent,
   ICommand,
   IGraph,
   InteriorLabelModel,

demos/01-tutorial-getting-started/07-undo-clipboard-support/SampleApplication.js

@@ -33,6 +33,7 @@ import {
   FreeNodePortLocationModel,
   GraphComponent,
   GraphEditorInputMode,
+  GraphOverviewComponent,
   ICommand,
   IGraph,
   InteriorLabelModel,

demos/01-tutorial-getting-started/08-grouping/SampleApplication.js

@@ -33,6 +33,7 @@ import {
   FreeNodePortLocationModel,
   GraphComponent,
   GraphEditorInputMode,
+  GraphOverviewComponent,
   ICommand,
   IGraph,
   InteriorLabelModel,

demos/01-tutorial-getting-started/09-data-binding/SampleApplication.js

@@ -34,6 +34,7 @@ import {
   GraphComponent,
   GraphEditorInputMode,
   GraphItemTypes,
+  GraphOverviewComponent,
   ICommand,
   IGraph,
   IMapper,
@@ -45,7 +46,8 @@ import {
   PanelNodeStyle,
   Point,
   ShapeNodeStyle,
-  Size
+  Size,
+  ToolTipQueryEventArgs
 } from 'yfiles'
 
 import ContextMenu from '../../utils/ContextMenu.js'
@@ -157,15 +159,15 @@ function setupTooltips() {
     graphEditorInputMode.toolTipItems = GraphItemTypes.NODE
     graphEditorInputMode.addQueryItemToolTipListener((src, eventArgs) => {
       if (eventArgs.handled) {
-        // A tooltip has already been assigned -> nothing to do.
+        // Tooltip content has already been assigned -> nothing to do.
         return
       }
       const item = eventArgs.item
       if (INode.isInstance(item)) {
-        // Set the tooltip.
+        // Set the tooltip content.
         eventArgs.toolTip = dateMapper.get(item).toLocaleString()
 
-        // Indicate that the tooltip has been set.
+        // Indicate that the tooltip content has been set.
         eventArgs.handled = true
       }
     })

demos/01-tutorial-getting-started/10-layout/SampleApplication.js

@@ -35,6 +35,7 @@ import {
   GraphComponent,
   GraphEditorInputMode,
   GraphItemTypes,
+  GraphOverviewComponent,
   HierarchicLayout,
   ICommand,
   IGraph,
@@ -49,7 +50,8 @@ import {
   Point,
   Rect,
   ShapeNodeStyle,
-  Size
+  Size,
+  ToolTipQueryEventArgs
 } from 'yfiles'
 
 import ContextMenu from '../../utils/ContextMenu.js'
@@ -158,35 +160,31 @@ function createSampleGraph() {
     nodeIdBinding: 'id',
     nodeLabelBinding: 'label',
     groupBinding: 'parent',
-    groupIdBinding: 'id',
-    locationXBinding: data => data.layout.x,
-    locationYBinding: data => data.layout.y
+    groupIdBinding: 'id'
   })
 
   builder.buildGraph()
 
-  // Sets the sizes of the nodes
+  // Sets the layout of the nodes
   graph.nodes.forEach(node => {
-    node.layout.width = node.tag.layout.width
-    node.layout.height = node.tag.layout.height
+    graph.setNodeLayout(node, Rect.from(node.tag.layout))
   })
 
   // Iterate the edge data and create the according bends and Ports
   graph.edges.forEach(edge => {
     if (edge.tag.bends) {
       edge.tag.bends.forEach(bend => {
-        graph.addBend(edge, new Point(bend.x, bend.y))
+        graph.addBend(edge, Point.from(bend))
       })
     }
-    graph.setPortLocation(edge.sourcePort, new Point(edge.tag.sourcePort.x, edge.tag.sourcePort.y))
-    graph.setPortLocation(edge.targetPort, new Point(edge.tag.targetPort.x, edge.tag.targetPort.y))
+    graph.setPortLocation(edge.sourcePort, Point.from(edge.tag.sourcePort))
+    graph.setPortLocation(edge.targetPort, Point.from(edge.tag.targetPort))
   })
 
   // Sets the location of the groups
   graph.nodes.forEach(node => {
     if (graph.isGroupNode(node)) {
-      const layout = node.tag.layout
-      graph.setNodeLayout(node, new Rect(layout.x, layout.y, layout.width, layout.height))
+      graph.setNodeLayout(node, Rect.from(node.tag.layout))
     }
   })
 }
@@ -237,15 +235,15 @@ function setupTooltips() {
     graphEditorInputMode.toolTipItems = GraphItemTypes.NODE
     graphEditorInputMode.addQueryItemToolTipListener((src, eventArgs) => {
       if (eventArgs.handled) {
-        // A tooltip has already been assigned -> nothing to do.
+        // Tooltip content has already been assigned -> nothing to do.
         return
       }
       const item = eventArgs.item
       if (INode.isInstance(item)) {
-        // Set the tooltip.
+        // Set the tooltip content.
         eventArgs.toolTip = dateMapper.get(item).toLocaleString()
 
-        // Indicate that the tooltip has been set.
+        // Indicate that the tooltip content has been set.
         eventArgs.handled = true
       }
     })

demos/01-tutorial-getting-started/11-layout-data/SampleApplication.js

@@ -33,6 +33,7 @@ import {
   GraphBuilder,
   GraphComponent,
   GraphEditorInputMode,
+  GraphOverviewComponent,
   HierarchicLayout,
   HierarchicLayoutData,
   HierarchicLayoutNodeLayoutDescriptor,
@@ -163,35 +164,31 @@ function createSampleGraph() {
     nodeIdBinding: 'id',
     nodeLabelBinding: 'alignment',
     groupBinding: 'parent',
-    groupIdBinding: 'id',
-    locationXBinding: data => data.layout.x,
-    locationYBinding: data => data.layout.y
+    groupIdBinding: 'id'
   })
 
   builder.buildGraph()
 
   // Sets the sizes of the nodes
   graph.nodes.forEach(node => {
-    node.layout.width = node.tag.layout.width
-    node.layout.height = node.tag.layout.height
+    graph.setNodeLayout(node, Rect.from(node.tag.layout))
   })
 
   // Iterate the edge data and create the according bends and Ports
   graph.edges.forEach(edge => {
     if (edge.tag.bends) {
       edge.tag.bends.forEach(bend => {
-        graph.addBend(edge, new Point(bend.x, bend.y))
+        graph.addBend(edge, Point.from(bend))
       })
     }
-    graph.setPortLocation(edge.sourcePort, new Point(edge.tag.sourcePort.x, edge.tag.sourcePort.y))
-    graph.setPortLocation(edge.targetPort, new Point(edge.tag.targetPort.x, edge.tag.targetPort.y))
+    graph.setPortLocation(edge.sourcePort, Point.from(edge.tag.sourcePort))
+    graph.setPortLocation(edge.targetPort, Point.from(edge.tag.targetPort))
   })
 
   // Sets the location of the groups
   graph.nodes.forEach(node => {
     if (graph.isGroupNode(node)) {
-      const layout = node.tag.layout
-      graph.setNodeLayout(node, new Rect(layout.x, layout.y, layout.width, layout.height))
+      graph.setNodeLayout(node, Rect.from(node.tag.layout))
     }
   })