Inspector improvements. Readme improvements. use gojs-angular 1.0.15.

Author: rjohnson465

README.md

@@ -7,20 +7,27 @@ Check out the [Intro page on using GoJS with Angular](https://gojs.net/latest/in
 
 It makes use of the [gojs-angular](https://github.com/NorthwoodsSoftware/gojs-angular) package to handle some boilerplate for setting up Diagram, Palette and Overview components.
 
-When running the sample, try moving around nodes, adding / deleting nodes, editing text in the inspector, relinking, undoing (Ctrl-Z), etc. within the diagram
-and you'll notice the changes are reflected in app-level data. You'll also notice that changes
+When running the sample, try moving around nodes, adding / deleting nodes, editing text in the inspector, relinking, undoing (Ctrl-Z), re-doing (Ctrl-Y), etc. within the diagram and you'll notice the changes are reflected in app-level data. You'll also notice that changes
 made in the inspector are reflected in the diagram.
 
 ## Installation
 
-Start by running npm install to install all necessary dependencies.
+Start by running npm install to install all necessary dependencies. 
+
+If you do not have Angular already globally installed, you may do so by running:
+
+### `npm i -g @angular/cli`
 
 ## Running the project
 
 In the project directory, run:
 
 ### `ng serve`
 
+Alternatively, if you do not have Angular installed globally, you may run:
+
+### `npm run start`
+
 Runs the app in the development mode.<br>
 Open [http://localhost:4200](http://localhost:4200) to view it in the browser.
 

package-lock.json

@@ -20,8 +20,8 @@
     "@angular/platform-browser-dynamic": "~11.0.0",
     "@angular/router": "~11.0.0",
     "core-js": "^3.6.5",
-    "gojs": "^2.1.27",
-    "gojs-angular": "^1.0.13",
+    "gojs": "^2.1.32",
+    "gojs-angular": "^1.0.15",
     "rxjs": "^6.6.3",
     "tslib": "^2.0.0",
     "zone.js": "~0.11.2"

package.json

@@ -40,14 +40,14 @@ <h3>Links in app data</h3>
   <h3>Nodes in app data</h3>
   <ul>
     <li *ngFor="let nd of diagramNodeData">
-      Node Key: {{nd.key}}, Color: {{nd.color}}
+      Node Key: {{nd.key}}, Text: {{nd.text}}, Color: {{nd.color}}
     </li>
   </ul>
 </div>
 
 <div class="clear left">
   <p>
-    This Angular-GoJS sample demonstrates how to use the Diagram, Palette, and Overview Angular-GoJS components, made
+    This <code>gojs-angular</code> sample demonstrates how to use the Diagram, Palette, and Overview <a href="https://www.npmjs.com/package/gojs-angular">gojs-angular</a> components, made
     and
     maintained by <a href="http://www.nwoods.com/">Northwoods Software</a>.
   </p>

src/app/app.component.html

@@ -7,7 +7,7 @@ import * as _ from 'lodash';
   selector: 'app-root',
   templateUrl: './app.component.html',
   styleUrls: ['./app.component.css'],
-  encapsulation: ViewEncapsulation.None
+  encapsulation: ViewEncapsulation.ShadowDom
 })
 export class AppComponent {
 
@@ -31,7 +31,6 @@ export class AppComponent {
 
     dia.commandHandler.archetypeGroupData = { key: 'Group', isGroup: true };
 
-
     const makePort = function(id: string, spot: go.Spot) {
       return $(go.Shape, 'Circle',
         {
@@ -62,7 +61,7 @@ export class AppComponent {
             new go.Binding('fill', 'color')
           ),
           $(go.TextBlock, { margin: 8 },
-            new go.Binding('text', 'key'))
+            new go.Binding('text'))
         ),
         // Ports
         makePort('t', go.Spot.TopCenter),
@@ -75,13 +74,13 @@ export class AppComponent {
   }
 
   public diagramNodeData: Array<go.ObjectData> = [
-    { key: 'Alpha', color: 'lightblue', arr: [1, 2] },
-    { key: 'Beta', color: 'orange' },
-    { key: 'Gamma', color: 'lightgreen' },
-    { key: 'Delta', color: 'pink' }
+    { 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: '1' },
+    { 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' },
@@ -134,7 +133,7 @@ export class AppComponent {
     { key: 'PaletteNode2', color: 'blueviolet' }
   ];
   public paletteLinkData: Array<go.ObjectData> = [
-    { from: 'PaletteNode1', to: 'PaletteNode2' }
+    {  }
   ];
   public paletteModelData = { prop: 'val' };
   public paletteDivClassName = 'myPaletteDiv';

src/app/app.component.ts

@@ -6,6 +6,11 @@
   width: fit-content;
 }
 
+p {
+  padding: 0px;
+  margin: 0px;
+}
+
 form {
   background: lightgray;
   border: 1px solid black;

src/app/inspector/inspector.component.css

@@ -1,6 +1,7 @@
 <form *ngIf='selectedNode' (ngSubmit)='onCommitForm()'>
-  Key: {{ selectedNode.data.key }}
-  Color: <input name='color' [(ngModel)]='data.color' />
+  <p>Key: <input style="display: inline;" name='key' disabled [(ngModel)]='data.key' /></p>
+  <p>Color: <input style="display: inline;" name='color' [(ngModel)]='data.color' /></p>
+  <p>Text: <input style="display: inline;" name='text' [(ngModel)]='data.text' /></p>
   <button type="submit">Commit</button>
 </form>
 

src/app/inspector/inspector.component.html

@@ -12,7 +12,8 @@ export class InspectorComponent {
   public _selectedNode: go.Node;
   public data = {
     key: null,
-    color: null
+    color: null,
+    text: null
   };
 
   @Input()
@@ -28,10 +29,12 @@ export class InspectorComponent {
       this._selectedNode = node;
       this.data.key = this._selectedNode.data.key;
       this.data.color = this._selectedNode.data.color;
+      this.data.text = this._selectedNode.data.text;
     } else {
       this._selectedNode = null;
       this.data.key = null;
       this.data.color = null;
+      this.data.text = null;
     }
   }