show off new skipsDiagramUpdate

Author: rjohnson465

package-lock.json

@@ -21,8 +21,8 @@
     "@angular/platform-browser-dynamic": "~9.0.1",
     "@angular/router": "~9.0.1",
     "core-js": "^3.6.4",
-    "gojs": "^2.1.8",
-    "gojs-angular": "1.0.2",
+    "gojs": "^2.1.10",
+    "gojs-angular": "^1.0.3",
     "rxjs": "~6.5.4",
     "tslib": "^1.10.0",
     "zone.js": "~0.10.2"

package.json

@@ -11,7 +11,8 @@ <h1>GoJS / Angular - Components Sample</h1>
 <div class="left">
   Diagram
   <gojs-diagram #myDiagram [initDiagram]='initDiagram' [nodeDataArray]='diagramNodeData' [linkDataArray]='diagramLinkData'
-    [divClassName]='diagramDivClassName' [modelData]='diagramModelData' (modelChange)='diagramModelChange($event)'>
+    [divClassName]='diagramDivClassName' [modelData]='diagramModelData' [skipsDiagramUpdate]='skipsDiagramUpdate'
+    (modelChange)='diagramModelChange($event)'>
   </gojs-diagram>
 </div>
 

src/app/app.component.html

@@ -28,6 +28,9 @@ export class AppComponent {
       )
     });
 
+    dia.commandHandler.archetypeGroupData = { key: 'Group', isGroup: true };
+
+
     const makePort = function(id: string, spot: go.Spot) {
       return $(go.Shape, 'Circle',
         {
@@ -42,6 +45,17 @@ export class AppComponent {
     // define the Node template
     dia.nodeTemplate =
       $(go.Node, 'Spot',
+        {
+          contextMenu:
+            $('ContextMenu',
+              $('ContextMenuButton',
+                $(go.TextBlock, 'Group'),
+                { click: function(e, obj) { e.diagram.commandHandler.groupSelection(); } },
+                new go.Binding('visible', '', function(o) {
+                  return o.diagram.selection.count > 1;
+                }).ofObject())
+            )
+        },
         $(go.Panel, 'Auto',
           $(go.Shape, 'RoundedRectangle', { stroke: null },
             new go.Binding('fill', 'color')
@@ -74,9 +88,15 @@ export class AppComponent {
   ];
   public diagramDivClassName: string = 'myDiagramDiv';
   public diagramModelData = { prop: 'value' };
+  public skipsDiagramUpdate = false;
 
   // When the diagram model changes, update app data to reflect those changes
   public diagramModelChange = function(changes: go.IncrementalData) {
+    // when setting state here, be sure to set skipsDiagramUpdate: true since GoJS already has this update
+    // (since this is a GoJS model changed listener event function)
+    // this way, we don't log an unneeded transaction in the Diagram's undoManager history
+    this.skipsDiagramUpdate = true;
+
     this.diagramNodeData = DataSyncService.syncNodeData(changes, this.diagramNodeData);
     this.diagramLinkData = DataSyncService.syncLinkData(changes, this.diagramLinkData);
     this.diagramModelData = DataSyncService.syncModelData(changes, this.diagramModelData);
@@ -171,6 +191,8 @@ export class AppComponent {
     }
 
     if (index >= 0) {
+      // here, we set skipsDiagramUpdate to false, since GoJS does not yet have this update
+      this.skipsDiagramUpdate = false;
       this.diagramNodeData[index] = { key: newNodeData.key, color: newNodeData.color };
     }
   }