gojs-angular-basic v2.0

Author: rjohnson465

package-lock.json

@@ -24,7 +24,8 @@
     "gojs-angular": "^1.0.17",
     "rxjs": "^6.6.3",
     "tslib": "^2.0.0",
-    "zone.js": "~0.11.2"
+    "zone.js": "~0.11.2",
+    "immer": "9.0.1"
   },
   "devDependencies": {
     "@angular-devkit/build-angular": "^0.1100.2",

package.json

@@ -2,16 +2,14 @@ <h1>GoJS / Angular - Components Sample</h1>
 
 <div class="left">
   Palette
-  <gojs-palette #myPalette [initPalette]='initPalette' [divClassName]='paletteDivClassName' [nodeDataArray]='paletteNodeData'
-    [linkDataArray]='paletteLinkData' [modelData]='paletteModelData' (modelChange)='paletteModelChange($event)' [skipsPaletteUpdate]='skipsPaletteUpdate'></gojs-palette>
+  <gojs-palette #myPalette [initPalette]='initPalette' [divClassName]='paletteDivClassName' [nodeDataArray]='state.paletteNodeData'
+     [modelData]='state.paletteModelData' (modelChange)='paletteModelChange($event)' [skipsPaletteUpdate]='state.skipsPaletteUpdate'></gojs-palette>
 </div>
 
-
-
 <div class="left">
   Diagram
-  <gojs-diagram #myDiagram [initDiagram]='initDiagram' [nodeDataArray]='diagramNodeData' [linkDataArray]='diagramLinkData'
-    [divClassName]='diagramDivClassName' [modelData]='diagramModelData' [skipsDiagramUpdate]='skipsDiagramUpdate'
+  <gojs-diagram #myDiagram [initDiagram]='initDiagram' [nodeDataArray]='state.diagramNodeData' [linkDataArray]='state.diagramLinkData'
+    [divClassName]='diagramDivClassName' [modelData]='state.diagramModelData' [(skipsDiagramUpdate)]='state.skipsDiagramUpdate'
     (modelChange)='diagramModelChange($event)'>
   </gojs-diagram>
 </div>
@@ -23,14 +21,14 @@ <h1>GoJS / Angular - Components Sample</h1>
 
 
 <div class="left">
-  <app-inspector [selectedNode]='selectedNode' (onFormChange)='handleInspectorChange($event)'></app-inspector>
+  <app-inspector [nodeData]='state.selectedNodeData' (onInspectorChange)='handleInspectorChange($event)'></app-inspector>
 </div>
 
 
 <div class="clear left box">
   <h3>Links in app data</h3>
   <ul>
-    <li *ngFor="let ld of diagramLinkData">
+    <li *ngFor="let ld of state.diagramLinkData">
       Link Key: {{ld.key}}, To: {{ld.to}}, From: {{ ld.from }}
     </li>
   </ul>
@@ -39,8 +37,8 @@ <h3>Links in app data</h3>
 <div class="left box">
   <h3>Nodes in app data</h3>
   <ul>
-    <li *ngFor="let nd of diagramNodeData">
-      Node Key: {{nd.key}}, Text: {{nd.text}}, Color: {{nd.color}}
+    <li *ngFor="let nd of state.diagramNodeData">
+      Node ID: {{nd.id}}, Text: {{nd.text}}, Color: {{nd.color}}
     </li>
   </ul>
 </div>

src/app/app.component.html

@@ -1,7 +1,12 @@
+/**
+ * Sample app showcasing gojs-angular components
+ * For use with gojs-angular version 2.x
+ */
+
 import { ChangeDetectorRef, Component, ViewChild, ViewEncapsulation } from '@angular/core';
 import * as go from 'gojs';
 import { DataSyncService, DiagramComponent, PaletteComponent } from 'gojs-angular';
-import * as _ from 'lodash';
+import produce from "immer";
 
 @Component({
   selector: 'app-root',
@@ -14,14 +19,57 @@ export class AppComponent {
   @ViewChild('myDiagram', { static: true }) public myDiagramComponent: DiagramComponent;
   @ViewChild('myPalette', { static: true }) public myPaletteComponent: PaletteComponent;
 
+  // Big object that holds app-level state data
+  // As of gojs-angular 2.0, immutability is expected and required of state for ease of change detection.
+  // Whenever updating state, immutability must be preserved. It is recommended to use immer for this, a small package that makes working with immutable data easy.
+  public state = {
+    // Diagram state props
+    diagramNodeData: [
+      { id: 'Alpha', text: "Alpha", color: 'lightblue' },
+      { id: 'Beta', text: "Beta", color: 'orange' },
+      { id: 'Gamma', text: "Gamma", color: 'lightgreen' },
+      { id: 'Delta', text: "Delta", color: 'pink' }
+    ],
+    diagramLinkData: [
+        { key: -1, from: 'Alpha', to: 'Beta', fromPort: 'r', toPort: '1' },
+        { key: -2, from: 'Alpha', to: 'Gamma', fromPort: 'b', toPort: 't' },
+        { key: -3, from: 'Beta', to: 'Beta' },
+        { key: -4, from: 'Gamma', to: 'Delta', fromPort: 'r', toPort: 'l' },
+        { key: -5, from: 'Delta', to: 'Alpha', fromPort: 't', toPort: 'r' }
+    ],
+    diagramModelData: { prop: 'value' },
+    skipsDiagramUpdate: false,
+    selectedNodeData: null, // used by InspectorComponent
+
+    // Palette state props
+    paletteNodeData: [
+      { key: 'PaletteNode1', color: 'firebrick' },
+      { key: 'PaletteNode2', color: 'blueviolet' }
+    ],
+    paletteLinkData: [
+      {
+        points: new go.List(/*go.Point*/).addAll([new go.Point(0, 0), new go.Point(30, 0), new go.Point(30, 40), new go.Point(60, 40)]),
+        strokeWidth: 4, dash: [6, 3]
+      },
+      { points: new go.List(/*go.Point*/).addAll([new go.Point(20, 20), new go.Point(60, 20), new go.Point(60, 40), new go.Point(60, 50)]) }
+    ],
+    paletteModelData: { prop: 'val' },
+    skipsPaletteUpdate: false
+  };
+  
+  public diagramDivClassName: string = 'myDiagramDiv';
+  public paletteDivClassName = 'myPaletteDiv';
+
   // initialize diagram / templates
   public initDiagram(): go.Diagram {
 
     const $ = go.GraphObject.make;
     const dia = $(go.Diagram, {
       'undoManager.isEnabled': true,
+      'clickCreatingTool.archetypeNodeData': { text: 'new node', color: 'lightblue' },
       model: $(go.GraphLinksModel,
         {
+          nodeKeyProperty: 'id',
           linkToPortIdProperty: 'toPort',
           linkFromPortIdProperty: 'fromPort',
           linkKeyProperty: 'key' // IMPORTANT! must be defined for merges and data sync when using GraphLinksModel
@@ -58,10 +106,13 @@ export class AppComponent {
         },
         $(go.Panel, 'Auto',
           $(go.Shape, 'RoundedRectangle', { stroke: null },
-            new go.Binding('fill', 'color')
+            new go.Binding('fill', 'color', (c, panel) => {
+             
+              return c;
+            })
           ),
-          $(go.TextBlock, { margin: 8 },
-            new go.Binding('text'))
+          $(go.TextBlock, { margin: 8, editable: true },
+            new go.Binding('text').makeTwoWay())
         ),
         // Ports
         makePort('t', go.Spot.TopCenter),
@@ -73,37 +124,19 @@ export class AppComponent {
     return dia;
   }
 
-  public diagramNodeData: Array<go.ObjectData> = [
-    { key: 'Alpha', text: "Node Alpha", color: 'lightblue' },
-    { key: 'Beta', text: "Node Beta", color: 'orange' },
-    { key: 'Gamma', text: "Node Gamma", color: 'lightgreen' },
-    { key: 'Delta', text: "Node Delta", color: 'pink' }
-  ];
-  public diagramLinkData: Array<go.ObjectData> = [
-    { key: -1, from: 'Alpha', to: 'Beta', fromPort: 'r', toPort: 'l' },
-    { key: -2, from: 'Alpha', to: 'Gamma', fromPort: 'b', toPort: 't' },
-    { key: -3, from: 'Beta', to: 'Beta' },
-    { key: -4, from: 'Gamma', to: 'Delta', fromPort: 'r', toPort: 'l' },
-    { key: -5, from: 'Delta', to: 'Alpha', fromPort: 't', toPort: 'r' }
-  ];
-  public diagramDivClassName: string = 'myDiagramDiv';
-  public diagramModelData = { prop: 'value' };
-  public skipsDiagramUpdate = false;
-
-  // When the diagram model changes, update app data to reflect those changes
+  // When the diagram model changes, update app data to reflect those changes. Be sure to use immer's "produce" function to preserve immutability
   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);
+    const appComp = this;
+    this.state = produce(this.state, draft => {
+      // set skipsDiagramUpdate: true since GoJS already has this update
+      // this way, we don't log an unneeded transaction in the Diagram's undoManager history
+      draft.skipsDiagramUpdate = true;
+      draft.diagramNodeData = DataSyncService.syncNodeData(changes, draft.diagramNodeData, appComp.observedDiagram.model);
+      draft.diagramLinkData = DataSyncService.syncLinkData(changes, draft.diagramLinkData, appComp.observedDiagram.model);
+      draft.diagramModelData = DataSyncService.syncModelData(changes, draft.diagramModelData);
+    });
   };
 
-
-
   public initPalette(): go.Palette {
     const $ = go.GraphObject.make;
     const palette = $(go.Palette);
@@ -118,35 +151,53 @@ export class AppComponent {
           new go.Binding('fill', 'color')
         ),
         $(go.TextBlock, { margin: 8 },
-          new go.Binding('text'))
+          new go.Binding('text', 'key'))
       );
 
+      palette.linkTemplate = $(go.Link,
+        { // because the GridLayout.alignment is Location and the nodes have locationSpot == Spot.Center,
+          // to line up the Link in the same manner we have to pretend the Link has the same location spot
+          locationSpot: go.Spot.Center,
+          selectionAdornmentTemplate:
+            $(go.Adornment, 'Link',
+              { locationSpot: go.Spot.Center },
+              $(go.Shape,
+                { isPanelMain: true, fill: null, stroke: 'deepskyblue', strokeWidth: 0 }, new go.Binding('strokeDashArray', 'dash')),
+              $(go.Shape,  // the arrowhead
+                { toArrow: 'Standard', stroke: null })
+            )
+        },
+        {
+          routing: go.Link.AvoidsNodes,
+          curve: go.Link.JumpOver,
+          corner: 5,
+          toShortLength: 4
+        },
+        new go.Binding('points'),
+        $(go.Shape,  // the link path shape
+          { isPanelMain: true }, new go.Binding('strokeDashArray', 'dash')),
+        $(go.Shape,  // the arrowhead
+          { toArrow: 'Standard', stroke: null })
+      )
+
     palette.model = $(go.GraphLinksModel,
       {
         linkKeyProperty: 'key'  // IMPORTANT! must be defined for merges and data sync when using GraphLinksModel
       });
 
     return palette;
   }
-  public paletteNodeData: Array<go.ObjectData> = [
-    { key: 'PaletteNode1', text: "PaletteNode1", color: 'red' },
-    { key: 'PaletteNode2', text: "PaletteNode2", color: 'yellow' }
-  ];
-  public paletteLinkData: Array<go.ObjectData> = [
-    {  }
-  ];
-  public paletteModelData = { prop: 'val' };
-  public paletteDivClassName = 'myPaletteDiv';
-  public skipsPaletteUpdate = false;
-  public paletteModelChange = function(changes: go.IncrementalData) {
-    // when setting state here, be sure to set skipsPaletteUpdate: 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 Palette's undoManager history
-    this.skipsPaletteUpdate = true;
-
-    this.paletteNodeData = DataSyncService.syncNodeData(changes, this.paletteNodeData);
-    this.paletteLinkData = DataSyncService.syncLinkData(changes, this.paletteLinkData);
-    this.paletteModelData = DataSyncService.syncModelData(changes, this.paletteModelData);
+  
+  // When the palette model changes, update app data to reflect those changes. Be sure to use immer's "produce" function to preserve immutability
+  public paletteModelChange = function(changes: go.IncrementalData) {  
+    this.state = produce(this.state, draft => {
+      // set skipsPaletteUpdate: true since GoJS already has this update
+      // this way, we don't log an unneeded transaction in the Palette's undoManager history
+      draft.skipsPaletteUpdate = true;
+      draft.paletteNodeData = DataSyncService.syncNodeData(changes, draft.paletteNodeData);
+      draft.paletteLinkData = DataSyncService.syncLinkData(changes, draft.paletteLinkData);
+      draft.paletteModelData = DataSyncService.syncModelData(changes, draft.paletteModelData);
+    });
   };
 
   constructor(private cdr: ChangeDetectorRef) { }
@@ -161,10 +212,9 @@ export class AppComponent {
   public observedDiagram = null;
 
   // currently selected node; for inspector
-  public selectedNode: go.Node | null = null;
+  public selectedNodeData: go.ObjectData = null;
 
   public ngAfterViewInit() {
-
     if (this.observedDiagram) return;
     this.observedDiagram = this.myDiagramComponent.diagram;
     this.cdr.detectChanges(); // IMPORTANT: without this, Angular will throw ExpressionChangedAfterItHasBeenCheckedError (dev mode only)
@@ -173,40 +223,41 @@ export class AppComponent {
     // listener for inspector
     this.myDiagramComponent.diagram.addDiagramListener('ChangedSelection', function(e) {
       if (e.diagram.selection.count === 0) {
-        appComp.selectedNode = null;
+        appComp.selectedNodeData = null;
       }
       const node = e.diagram.selection.first();
-      if (node instanceof go.Node) {
-        appComp.selectedNode = node;
-      } else {
-        appComp.selectedNode = null;
-      }
+      appComp.state = produce(appComp.state, draft => {
+        if (node instanceof go.Node) {
+          var idx = draft.diagramNodeData.findIndex(nd => nd.id == node.data.id);
+          var nd = draft.diagramNodeData[idx];
+          draft.selectedNodeData = nd;
+        } else {
+          draft.selectedNodeData = null;
+        }
+      });
     });
-
   } // end ngAfterViewInit
 
 
-  public handleInspectorChange(newNodeData) {
-    const key = newNodeData.key;
-    // find the entry in nodeDataArray with this key, replace it with newNodeData
-    let index = null;
-    for (let i = 0; i < this.diagramNodeData.length; i++) {
-      const entry = this.diagramNodeData[i];
-      if (entry.key && entry.key === key) {
-        index = i;
-      }
-    }
+  /**
+   * Update a node's data based on some change to an inspector row's input
+   * @param changedPropAndVal An object with 2 entries: "prop" (the node data prop changed), and "newVal" (the value the user entered in the inspector <input>)
+   */
+  public handleInspectorChange(changedPropAndVal) {
 
-    if (index >= 0) {
-      // here, we set skipsDiagramUpdate to false, since GoJS does not yet have this update
-      this.skipsDiagramUpdate = false;
-      this.diagramNodeData[index] = _.cloneDeep(newNodeData);
-      // this.diagramNodeData[index] = _.cloneDeep(newNodeData);
-    }
-
-    // var nd = this.observedDiagram.model.findNodeDataForKey(newNodeData.key);
-    // console.log(nd);
+    const path = changedPropAndVal.prop;
+    const value = changedPropAndVal.newVal;
 
+    this.state = produce(this.state, draft => {
+      var data = draft.selectedNodeData;
+      data[path] = value;
+      const key = data.id;
+      const idx = draft.diagramNodeData.findIndex(nd => nd.id == key);
+      if (idx >= 0) {
+        draft.diagramNodeData[idx] = data;
+        draft.skipsDiagramUpdate = false; // we need to sync GoJS data with this new app state, so do not skips Diagram update
+      }
+    });
   }
 
 

src/app/app.component.ts

@@ -5,12 +5,14 @@ import { GojsAngularModule } from 'gojs-angular';
 import { AppComponent } from './app.component';
 
 import { InspectorComponent } from './inspector/inspector.component';
+import { InspectorRowComponent } from './inspector/inspector-row.component';
 
 
 @NgModule({
   declarations: [
     AppComponent,
-    InspectorComponent
+    InspectorComponent,
+    InspectorRowComponent
   ],
   imports: [
     BrowserModule,

src/app/app.module.ts

@@ -0,0 +1,8 @@
+<td>{{id}}</td>
+<td>
+  <input
+    (change)="onInputChange($event)"
+    [ngModel]="value"
+  />
+</td>
+