├── .editorconfig
├── .gitignore
├── LICENSE.md
├── README.md
├── angular.json
├── e2e
├── protractor.conf.js
├── src
│ ├── app.e2e-spec.ts
│ └── app.po.ts
└── tsconfig.e2e.json
├── package-lock.json
├── package.json
├── src
├── app
│ ├── app.component.css
│ ├── app.component.html
│ ├── app.component.spec.ts
│ ├── app.component.ts
│ ├── app.module.ts
│ ├── diagram
│ │ ├── diagram.component.css
│ │ ├── diagram.component.html
│ │ ├── diagram.component.spec.ts
│ │ └── diagram.component.ts
│ └── inspector
│ │ ├── inspector.component.css
│ │ ├── inspector.component.html
│ │ ├── inspector.component.spec.ts
│ │ └── inspector.component.ts
├── assets
│ ├── .gitkeep
│ ├── HS1.png
│ ├── HS10.png
│ ├── HS11.png
│ ├── HS12.png
│ ├── HS13.png
│ ├── HS14.png
│ ├── HS15.png
│ ├── HS16.png
│ ├── HS2.png
│ ├── HS3.png
│ ├── HS4.png
│ ├── HS5.png
│ ├── HS6.png
│ ├── HS7.png
│ ├── HS8.png
│ └── HS9.png
├── browserslist
├── environments
│ ├── environment.prod.ts
│ └── environment.ts
├── favicon.ico
├── index.html
├── karma.conf.js
├── main.ts
├── polyfills.ts
├── styles.css
├── test.ts
├── tsconfig.app.json
├── tsconfig.spec.json
└── tslint.json
├── tsconfig.json
└── tslint.json
/.editorconfig:
--------------------------------------------------------------------------------
1 | # Editor configuration, see https://editorconfig.org
2 | root = true
3 |
4 | [*]
5 | charset = utf-8
6 | indent_style = space
7 | indent_size = 2
8 | insert_final_newline = true
9 | trim_trailing_whitespace = true
10 |
11 | [*.md]
12 | max_line_length = off
13 | trim_trailing_whitespace = false
14 |
--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
1 | # See http://help.github.com/ignore-files/ for more about ignoring files.
2 |
3 | # compiled output
4 | /dist
5 | /tmp
6 | /out-tsc
7 | # Only exists if Bazel was run
8 | /bazel-out
9 |
10 | # dependencies
11 | /node_modules
12 |
13 | # profiling files
14 | chrome-profiler-events.json
15 | speed-measure-plugin.json
16 |
17 | # IDEs and editors
18 | /.idea
19 | .project
20 | .classpath
21 | .c9/
22 | *.launch
23 | .settings/
24 | *.sublime-workspace
25 |
26 | # IDE - VSCode
27 | .vscode/*
28 | !.vscode/settings.json
29 | !.vscode/tasks.json
30 | !.vscode/launch.json
31 | !.vscode/extensions.json
32 | .history/*
33 |
34 | # misc
35 | /.sass-cache
36 | /connect.lock
37 | /coverage
38 | /libpeerconnection.log
39 | npm-debug.log
40 | yarn-error.log
41 | testem.log
42 | /typings
43 |
44 | # System Files
45 | .DS_Store
46 | Thumbs.db
47 |
--------------------------------------------------------------------------------
/LICENSE.md:
--------------------------------------------------------------------------------
1 | This project is intended to be used alongside [GoJS](https://gojs.net/latest/index.html),
2 | and is covered by the GoJS software license.
3 |
4 | Copyright 1998-2020 by Northwoods Software Corporation.
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # Angular / GoJS - Basic OrgChart Editor
2 |
3 | This project privides a basic example of using GoJS in an Angular app.
4 |
5 | When running the sample, click on a Node. An Inspector window appears. Changing values in the Inspector will update the Nodes. This is done through a top down application struture, where the top level App Component passes data to the Diagram and Inspector Components.
6 |
7 | ## Installation
8 |
9 | Start by running npm install to install all necessary dependencies.
10 |
11 | ## Development server
12 |
13 | Run `ng serve` for a dev server. Navigate to `http://localhost:4200/`. The app will automatically reload if you change any of the source files.
14 |
15 | ## Build
16 |
17 | Run `ng build` to build the project. The build artifacts will be stored in the `dist/` directory. Use the `--prod` flag for a production build.
18 |
19 | ## Further help
20 |
21 | For more on GoJS, head to the [GoJS Website](https://gojs.net).
22 |
23 | To get more help on the Angular CLI use `ng help` or go check out the [Angular CLI README](https://github.com/angular/angular-cli/blob/master/README.md).
24 |
--------------------------------------------------------------------------------
/angular.json:
--------------------------------------------------------------------------------
1 | {
2 | "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
3 | "version": 1,
4 | "newProjectRoot": "projects",
5 | "projects": {
6 | "angular-tutorial": {
7 | "root": "",
8 | "sourceRoot": "src",
9 | "projectType": "application",
10 | "prefix": "app",
11 | "schematics": {},
12 | "architect": {
13 | "build": {
14 | "builder": "@angular-devkit/build-angular:browser",
15 | "options": {
16 | "outputPath": "dist/angular-tutorial",
17 | "index": "src/index.html",
18 | "main": "src/main.ts",
19 | "polyfills": "src/polyfills.ts",
20 | "tsConfig": "src/tsconfig.app.json",
21 | "assets": [
22 | "src/favicon.ico",
23 | "src/assets"
24 | ],
25 | "styles": [
26 | "src/styles.css"
27 | ],
28 | "scripts": [],
29 | "es5BrowserSupport": true
30 | },
31 | "configurations": {
32 | "production": {
33 | "fileReplacements": [
34 | {
35 | "replace": "src/environments/environment.ts",
36 | "with": "src/environments/environment.prod.ts"
37 | }
38 | ],
39 | "optimization": true,
40 | "outputHashing": "all",
41 | "sourceMap": false,
42 | "extractCss": true,
43 | "namedChunks": false,
44 | "aot": true,
45 | "extractLicenses": true,
46 | "vendorChunk": false,
47 | "buildOptimizer": true,
48 | "budgets": [
49 | {
50 | "type": "initial",
51 | "maximumWarning": "2mb",
52 | "maximumError": "5mb"
53 | }
54 | ]
55 | }
56 | }
57 | },
58 | "serve": {
59 | "builder": "@angular-devkit/build-angular:dev-server",
60 | "options": {
61 | "browserTarget": "angular-tutorial:build"
62 | },
63 | "configurations": {
64 | "production": {
65 | "browserTarget": "angular-tutorial:build:production"
66 | }
67 | }
68 | },
69 | "extract-i18n": {
70 | "builder": "@angular-devkit/build-angular:extract-i18n",
71 | "options": {
72 | "browserTarget": "angular-tutorial:build"
73 | }
74 | },
75 | "test": {
76 | "builder": "@angular-devkit/build-angular:karma",
77 | "options": {
78 | "main": "src/test.ts",
79 | "polyfills": "src/polyfills.ts",
80 | "tsConfig": "src/tsconfig.spec.json",
81 | "karmaConfig": "src/karma.conf.js",
82 | "styles": [
83 | "src/styles.css"
84 | ],
85 | "scripts": [],
86 | "assets": [
87 | "src/favicon.ico",
88 | "src/assets"
89 | ]
90 | }
91 | },
92 | "lint": {
93 | "builder": "@angular-devkit/build-angular:tslint",
94 | "options": {
95 | "tsConfig": [
96 | "src/tsconfig.app.json",
97 | "src/tsconfig.spec.json"
98 | ],
99 | "exclude": [
100 | "**/node_modules/**"
101 | ]
102 | }
103 | }
104 | }
105 | },
106 | "angular-tutorial-e2e": {
107 | "root": "e2e/",
108 | "projectType": "application",
109 | "prefix": "",
110 | "architect": {
111 | "e2e": {
112 | "builder": "@angular-devkit/build-angular:protractor",
113 | "options": {
114 | "protractorConfig": "e2e/protractor.conf.js",
115 | "devServerTarget": "angular-tutorial:serve"
116 | },
117 | "configurations": {
118 | "production": {
119 | "devServerTarget": "angular-tutorial:serve:production"
120 | }
121 | }
122 | },
123 | "lint": {
124 | "builder": "@angular-devkit/build-angular:tslint",
125 | "options": {
126 | "tsConfig": "e2e/tsconfig.e2e.json",
127 | "exclude": [
128 | "**/node_modules/**"
129 | ]
130 | }
131 | }
132 | }
133 | }
134 | },
135 | "defaultProject": "angular-tutorial"
136 | }
--------------------------------------------------------------------------------
/e2e/protractor.conf.js:
--------------------------------------------------------------------------------
1 | // Protractor configuration file, see link for more information
2 | // https://github.com/angular/protractor/blob/master/lib/config.ts
3 |
4 | const { SpecReporter } = require('jasmine-spec-reporter');
5 |
6 | exports.config = {
7 | allScriptsTimeout: 11000,
8 | specs: [
9 | './src/**/*.e2e-spec.ts'
10 | ],
11 | capabilities: {
12 | 'browserName': 'chrome'
13 | },
14 | directConnect: true,
15 | baseUrl: 'http://localhost:4200/',
16 | framework: 'jasmine',
17 | jasmineNodeOpts: {
18 | showColors: true,
19 | defaultTimeoutInterval: 30000,
20 | print: function() {}
21 | },
22 | onPrepare() {
23 | require('ts-node').register({
24 | project: require('path').join(__dirname, './tsconfig.e2e.json')
25 | });
26 | jasmine.getEnv().addReporter(new SpecReporter({ spec: { displayStacktrace: true } }));
27 | }
28 | };
--------------------------------------------------------------------------------
/e2e/src/app.e2e-spec.ts:
--------------------------------------------------------------------------------
1 | import { AppPage } from './app.po';
2 | import { browser, logging } from 'protractor';
3 |
4 | describe('workspace-project App', () => {
5 | let page: AppPage;
6 |
7 | beforeEach(() => {
8 | page = new AppPage();
9 | });
10 |
11 | it('should display welcome message', () => {
12 | page.navigateTo();
13 | expect(page.getTitleText()).toEqual('Welcome to angular-tutorial!');
14 | });
15 |
16 | afterEach(async () => {
17 | // Assert that there are no errors emitted from the browser
18 | const logs = await browser.manage().logs().get(logging.Type.BROWSER);
19 | expect(logs).not.toContain(jasmine.objectContaining({
20 | level: logging.Level.SEVERE,
21 | } as logging.Entry));
22 | });
23 | });
24 |
--------------------------------------------------------------------------------
/e2e/src/app.po.ts:
--------------------------------------------------------------------------------
1 | import { browser, by, element } from 'protractor';
2 |
3 | export class AppPage {
4 | navigateTo() {
5 | return browser.get(browser.baseUrl) as Promise;
6 | }
7 |
8 | getTitleText() {
9 | return element(by.css('app-root h1')).getText() as Promise;
10 | }
11 | }
12 |
--------------------------------------------------------------------------------
/e2e/tsconfig.e2e.json:
--------------------------------------------------------------------------------
1 | {
2 | "extends": "../tsconfig.json",
3 | "compilerOptions": {
4 | "outDir": "../out-tsc/app",
5 | "module": "commonjs",
6 | "target": "es5",
7 | "types": [
8 | "jasmine",
9 | "jasminewd2",
10 | "node"
11 | ]
12 | }
13 | }
--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "angular-tutorial",
3 | "version": "0.0.0",
4 | "scripts": {
5 | "ng": "ng",
6 | "start": "ng serve",
7 | "build": "ng build",
8 | "test": "ng test",
9 | "lint": "ng lint",
10 | "e2e": "ng e2e"
11 | },
12 | "private": true,
13 | "dependencies": {
14 | "@angular/animations": "~7.2.0",
15 | "@angular/common": "~7.2.0",
16 | "@angular/compiler": "~7.2.0",
17 | "@angular/core": "~7.2.0",
18 | "@angular/forms": "~7.2.0",
19 | "@angular/platform-browser": "~7.2.0",
20 | "@angular/platform-browser-dynamic": "~7.2.0",
21 | "@angular/router": "~7.2.0",
22 | "core-js": "^2.5.4",
23 | "gojs": "^2.0.17",
24 | "rxjs": "~6.3.3",
25 | "tslib": "^1.10.0",
26 | "zone.js": "~0.8.26"
27 | },
28 | "devDependencies": {
29 | "@angular-devkit/build-angular": "~0.13.0",
30 | "@angular/cli": "~7.3.7",
31 | "@angular/compiler-cli": "~7.2.0",
32 | "@angular/language-service": "~7.2.0",
33 | "@types/jasmine": "~2.8.8",
34 | "@types/jasminewd2": "^2.0.8",
35 | "@types/node": "~8.9.4",
36 | "codelyzer": "~4.5.0",
37 | "jasmine-core": "~2.99.1",
38 | "jasmine-spec-reporter": "~4.2.1",
39 | "karma": "~4.0.0",
40 | "karma-chrome-launcher": "~2.2.0",
41 | "karma-coverage-istanbul-reporter": "^2.1.0",
42 | "karma-jasmine": "~1.1.2",
43 | "karma-jasmine-html-reporter": "^0.2.2",
44 | "protractor": "~5.4.0",
45 | "ts-node": "~7.0.0",
46 | "tslint": "~5.11.0",
47 | "typescript": "~3.2.2"
48 | }
49 | }
50 |
--------------------------------------------------------------------------------
/src/app/app.component.css:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/NorthwoodsSoftware/gojs-angular-video-sample/672bc8cd9ce7da18616f196678354a82cc4a6242/src/app/app.component.css
--------------------------------------------------------------------------------
/src/app/app.component.html:
--------------------------------------------------------------------------------
1 |
2 |
--------------------------------------------------------------------------------
/src/app/app.component.spec.ts:
--------------------------------------------------------------------------------
1 | import { TestBed, async } from '@angular/core/testing';
2 | import { AppComponent } from './app.component';
3 |
4 | describe('AppComponent', () => {
5 | beforeEach(async(() => {
6 | TestBed.configureTestingModule({
7 | declarations: [
8 | AppComponent
9 | ],
10 | }).compileComponents();
11 | }));
12 |
13 | it('should create the app', () => {
14 | const fixture = TestBed.createComponent(AppComponent);
15 | const app = fixture.debugElement.componentInstance;
16 | expect(app).toBeTruthy();
17 | });
18 |
19 | it(`should have as title 'angular-gojs'`, () => {
20 | const fixture = TestBed.createComponent(AppComponent);
21 | const app = fixture.debugElement.componentInstance;
22 | expect(app.title).toEqual('angular-gojs');
23 | });
24 |
25 | it('should render title in a h1 tag', () => {
26 | const fixture = TestBed.createComponent(AppComponent);
27 | fixture.detectChanges();
28 | const compiled = fixture.debugElement.nativeElement;
29 | expect(compiled.querySelector('h1').textContent).toContain('Welcome to angular-gojs!');
30 | });
31 | });
32 |
--------------------------------------------------------------------------------
/src/app/app.component.ts:
--------------------------------------------------------------------------------
1 | import { Component } from '@angular/core';
2 | import * as go from 'gojs';
3 |
4 | @Component({
5 | selector: 'app-root',
6 | templateUrl: './app.component.html',
7 | styleUrls: ['./app.component.css']
8 | })
9 | export class AppComponent {
10 |
11 | public selectedNode = null;
12 |
13 | public model: go.TreeModel = new go.TreeModel(
14 | [
15 | { 'key': 1, 'name': 'Stella Payne Diaz', 'title': 'CEO' },
16 | { 'key': 2, 'name': 'Luke Warm', 'title': 'VP Marketing/Sales', 'parent': 1 },
17 | { 'key': 3, 'name': 'Meg Meehan Hoffa', 'title': 'Sales', 'parent': 2 },
18 | { 'key': 4, 'name': 'Peggy Flaming', 'title': 'VP Engineering', 'parent': 1 },
19 | { 'key': 5, 'name': 'Saul Wellingood', 'title': 'Manufacturing', 'parent': 4 },
20 | { 'key': 6, 'name': 'Al Ligori', 'title': 'Marketing', 'parent': 2 },
21 | { 'key': 7, 'name': 'Dot Stubadd', 'title': 'Sales Rep', 'parent': 3 },
22 | { 'key': 8, 'name': 'Les Ismore', 'title': 'Project Mgr', 'parent': 5 },
23 | { 'key': 9, 'name': 'April Lynn Parris', 'title': 'Events Mgr', 'parent': 6 },
24 | { 'key': 10, 'name': 'Xavier Breath', 'title': 'Engineering', 'parent': 4 },
25 | { 'key': 11, 'name': 'Anita Hammer', 'title': 'Process', 'parent': 5 },
26 | { 'key': 12, 'name': 'Billy Aiken', 'title': 'Software', 'parent': 10 },
27 | { 'key': 13, 'name': 'Stan Wellback', 'title': 'Testing', 'parent': 10 },
28 | { 'key': 14, 'name': 'Marge Innovera', 'title': 'Hardware', 'parent': 10 },
29 | { 'key': 15, 'name': 'Evan Elpus', 'title': 'Quality', 'parent': 5 },
30 | { 'key': 16, 'name': 'Lotta B. Essen', 'title': 'Sales Rep', 'parent': 3 }
31 | ]
32 | );
33 |
34 | public setSelectedNode(node) {
35 | this.selectedNode = node;
36 | }
37 |
38 | }
39 |
--------------------------------------------------------------------------------
/src/app/app.module.ts:
--------------------------------------------------------------------------------
1 | import { NgModule } from '@angular/core';
2 | import { FormsModule } from '@angular/forms';
3 | import { BrowserModule } from '@angular/platform-browser';
4 |
5 | import { AppComponent } from './app.component';
6 | import { DiagramComponent } from './diagram/diagram.component';
7 | import { InspectorComponent } from './inspector/inspector.component';
8 |
9 |
10 | @NgModule({
11 | declarations: [
12 | AppComponent,
13 | DiagramComponent,
14 | InspectorComponent
15 | ],
16 | imports: [
17 | BrowserModule,
18 | FormsModule
19 | ],
20 | providers: [],
21 | bootstrap: [AppComponent]
22 | })
23 | export class AppModule { }
24 |
--------------------------------------------------------------------------------
/src/app/diagram/diagram.component.css:
--------------------------------------------------------------------------------
1 | #myDiagramDiv {
2 | width: 1500px;
3 | height: 500px;
4 | border: 1px solid black;
5 | background-color: #696969;
6 | }
--------------------------------------------------------------------------------
/src/app/diagram/diagram.component.html:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/src/app/diagram/diagram.component.spec.ts:
--------------------------------------------------------------------------------
1 | import { async, ComponentFixture, TestBed } from '@angular/core/testing';
2 |
3 | import { DiagramComponent } from './diagram.component';
4 |
5 | describe('DiagramComponent', () => {
6 | let component: DiagramComponent;
7 | let fixture: ComponentFixture;
8 |
9 | beforeEach(async(() => {
10 | TestBed.configureTestingModule({
11 | declarations: [ DiagramComponent ]
12 | })
13 | .compileComponents();
14 | }));
15 |
16 | beforeEach(() => {
17 | fixture = TestBed.createComponent(DiagramComponent);
18 | component = fixture.componentInstance;
19 | fixture.detectChanges();
20 | });
21 |
22 | it('should create', () => {
23 | expect(component).toBeTruthy();
24 | });
25 | });
26 |
--------------------------------------------------------------------------------
/src/app/diagram/diagram.component.ts:
--------------------------------------------------------------------------------
1 | import { Component, EventEmitter, Input, Output } from '@angular/core';
2 | import * as go from 'gojs';
3 |
4 | const $ = go.GraphObject.make;
5 |
6 | @Component({
7 | selector: 'app-diagram',
8 | templateUrl: './diagram.component.html',
9 | styleUrls: ['./diagram.component.css']
10 | })
11 | export class DiagramComponent {
12 |
13 | public diagram: go.Diagram = null;
14 |
15 | @Input()
16 | public model: go.Model;
17 |
18 | @Output()
19 | public nodeClicked = new EventEmitter();
20 |
21 |
22 | constructor() {
23 | }
24 |
25 | public ngAfterViewInit() {
26 | this.diagram = $(go.Diagram, 'myDiagramDiv',
27 | {
28 | layout:
29 | $(go.TreeLayout,
30 | {
31 | isOngoing: true,
32 | treeStyle: go.TreeLayout.StyleLastParents,
33 | arrangement: go.TreeLayout.ArrangementHorizontal,
34 | // properties for most of the tree:
35 | angle: 90,
36 | layerSpacing: 35,
37 | // properties for the "last parents":
38 | alternateAngle: 90,
39 | alternateLayerSpacing: 35,
40 | alternateAlignment: go.TreeLayout.AlignmentBus,
41 | alternateNodeSpacing: 20
42 | }),
43 | 'undoManager.isEnabled': true
44 | }
45 | );
46 |
47 | // define the Node template
48 | this.diagram.nodeTemplate =
49 | $(go.Node, 'Auto',
50 | // for sorting, have the Node.text be the data.name
51 | new go.Binding('text', 'name'),
52 | // bind the Part.layerName to control the Node's layer depending on whether it isSelected
53 | new go.Binding('layerName', 'isSelected', function(sel) { return sel ? 'Foreground' : ''; }).ofObject(),
54 | // define the node's outer shape
55 | $(go.Shape, 'Rectangle',
56 | {
57 | name: 'SHAPE', fill: 'lightblue', stroke: null,
58 | // set the port properties:
59 | portId: '', fromLinkable: true, toLinkable: true, cursor: 'pointer'
60 | },
61 | new go.Binding('fill', '', function(node) {
62 | // modify the fill based on the tree depth level
63 | const levelColors = ['#AC193D', '#2672EC', '#8C0095', '#5133AB',
64 | '#008299', '#D24726', '#008A00', '#094AB2'];
65 | let color = node.findObject('SHAPE').fill;
66 | const dia: go.Diagram = node.diagram;
67 | if (dia && dia.layout.network) {
68 | dia.layout.network.vertexes.each(function(v: go.TreeVertex) {
69 | if (v.node && v.node.key === node.data.key) {
70 | const level: number = v.level % (levelColors.length);
71 | color = levelColors[level];
72 | }
73 | });
74 | }
75 | return color;
76 | }).ofObject()
77 | ),
78 | $(go.Panel, 'Horizontal',
79 | $(go.Picture,
80 | {
81 | name: 'Picture',
82 | desiredSize: new go.Size(39, 50),
83 | margin: new go.Margin(6, 8, 6, 10)
84 | },
85 | new go.Binding('source', 'key', function(key) {
86 | if (key < 0 || key > 16) return ''; // There are only 16 images on the server
87 | return 'assets/HS' + key + '.png';
88 | })
89 | ),
90 | // define the panel where the text will appear
91 | $(go.Panel, 'Table',
92 | {
93 | maxSize: new go.Size(150, 999),
94 | margin: new go.Margin(6, 10, 0, 3),
95 | defaultAlignment: go.Spot.Left
96 | },
97 | $(go.RowColumnDefinition, { column: 2, width: 4 }),
98 | $(go.TextBlock, { font: '9pt Segoe UI,sans-serif', stroke: 'white' }, // the name
99 | {
100 | row: 0, column: 0, columnSpan: 5,
101 | font: '12pt Segoe UI,sans-serif',
102 | editable: true, isMultiline: false,
103 | minSize: new go.Size(10, 16)
104 | },
105 | new go.Binding('text', 'name').makeTwoWay()),
106 | $(go.TextBlock, 'Title: ', { font: '9pt Segoe UI,sans-serif', stroke: 'white' },
107 | { row: 1, column: 0 }),
108 | $(go.TextBlock, { font: '9pt Segoe UI,sans-serif', stroke: 'white' },
109 | {
110 | row: 1, column: 1, columnSpan: 4,
111 | editable: true, isMultiline: false,
112 | minSize: new go.Size(10, 14),
113 | margin: new go.Margin(0, 0, 0, 3)
114 | },
115 | new go.Binding('text', 'title').makeTwoWay()),
116 | $(go.TextBlock, { font: '9pt Segoe UI,sans-serif', stroke: 'white' },
117 | { row: 2, column: 0 },
118 | new go.Binding('text', 'key', function(v) { return 'ID: ' + v; })),
119 | $(go.TextBlock, { font: '9pt Segoe UI,sans-serif', stroke: 'white' },
120 | { name: 'boss', row: 2, column: 3 }, // we include a name so we can access this TextBlock when deleting Nodes/Links
121 | new go.Binding('text', 'parent', function(v) { return 'Boss: ' + v; })),
122 | $(go.TextBlock, { font: '9pt Segoe UI,sans-serif', stroke: 'white' }, // the comments
123 | {
124 | row: 3, column: 0, columnSpan: 5,
125 | font: 'italic 9pt sans-serif',
126 | wrap: go.TextBlock.WrapFit,
127 | editable: true, // by default newlines are allowed
128 | minSize: new go.Size(10, 14)
129 | },
130 | new go.Binding('text', 'comments').makeTwoWay())
131 | ) // end Table Panel
132 | ) // end Horizontal Panel
133 | ); // end Node
134 |
135 | this.diagram.model = this.model;
136 |
137 | // when the selection changes, emit event to app-component updating the selected node
138 | this.diagram.addDiagramListener('ChangedSelection', (e) => {
139 | const node = this.diagram.selection.first();
140 | this.nodeClicked.emit(node);
141 | });
142 | }
143 |
144 | }
145 |
--------------------------------------------------------------------------------
/src/app/inspector/inspector.component.css:
--------------------------------------------------------------------------------
1 | * {
2 | padding: 5px;
3 | font-family: Arial, Helvetica, sans-serif;
4 | font-weight: 600;
5 | margin: 10px;
6 | width: fit-content;
7 | }
8 |
9 | form {
10 | background: lightgray;
11 | border: 1px solid black;
12 | }
13 |
14 | input {
15 | clear: both;
16 | display: inherit;
17 | float: initial;
18 | font-weight: 300;
19 | border-radius: 10px;
20 | background: white;
21 | }
22 |
23 | input:focus {
24 | border-radius: 10px;
25 | outline: none;
26 | }
27 |
--------------------------------------------------------------------------------
/src/app/inspector/inspector.component.html:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/src/app/inspector/inspector.component.spec.ts:
--------------------------------------------------------------------------------
1 | import { async, ComponentFixture, TestBed } from '@angular/core/testing';
2 |
3 | import { InspectorComponent } from './inspector.component';
4 |
5 | describe('InspectorComponent', () => {
6 | let component: InspectorComponent;
7 | let fixture: ComponentFixture;
8 |
9 | beforeEach(async(() => {
10 | TestBed.configureTestingModule({
11 | declarations: [InspectorComponent]
12 | })
13 | .compileComponents();
14 | }));
15 |
16 | beforeEach(() => {
17 | fixture = TestBed.createComponent(InspectorComponent);
18 | component = fixture.componentInstance;
19 | fixture.detectChanges();
20 | });
21 |
22 | it('should create', () => {
23 | expect(component).toBeTruthy();
24 | });
25 | });
26 |
--------------------------------------------------------------------------------
/src/app/inspector/inspector.component.ts:
--------------------------------------------------------------------------------
1 | import { Component, Input, OnInit } from '@angular/core';
2 | import * as go from 'gojs';
3 |
4 | @Component({
5 | selector: 'app-inspector',
6 | templateUrl: './inspector.component.html',
7 | styleUrls: ['./inspector.component.css']
8 | })
9 | export class InspectorComponent {
10 |
11 | public _selectedNode: go.Node;
12 | public data = {
13 | name: null,
14 | parent: null
15 | };
16 |
17 | @Input()
18 | public model: go.Model;
19 |
20 | @Input()
21 | get selectedNode() { return this._selectedNode; }
22 | set selectedNode(node: go.Node) {
23 | if (node && node != null) {
24 | this._selectedNode = node;
25 | this.data.name = this._selectedNode.data.name;
26 | this.data.parent = this._selectedNode.data.parent;
27 | } else {
28 | this._selectedNode = null;
29 | }
30 | }
31 |
32 | constructor() { }
33 |
34 | public onCommitForm() {
35 | this.model.startTransaction();
36 | this.model.set(this.selectedNode.data, 'name', this.data.name);
37 | this.model.set(this.selectedNode.data, 'parent', this.data.parent);
38 | this.model.commitTransaction();
39 | }
40 |
41 | }
42 |
--------------------------------------------------------------------------------
/src/assets/.gitkeep:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/NorthwoodsSoftware/gojs-angular-video-sample/672bc8cd9ce7da18616f196678354a82cc4a6242/src/assets/.gitkeep
--------------------------------------------------------------------------------
/src/assets/HS1.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/NorthwoodsSoftware/gojs-angular-video-sample/672bc8cd9ce7da18616f196678354a82cc4a6242/src/assets/HS1.png
--------------------------------------------------------------------------------
/src/assets/HS10.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/NorthwoodsSoftware/gojs-angular-video-sample/672bc8cd9ce7da18616f196678354a82cc4a6242/src/assets/HS10.png
--------------------------------------------------------------------------------
/src/assets/HS11.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/NorthwoodsSoftware/gojs-angular-video-sample/672bc8cd9ce7da18616f196678354a82cc4a6242/src/assets/HS11.png
--------------------------------------------------------------------------------
/src/assets/HS12.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/NorthwoodsSoftware/gojs-angular-video-sample/672bc8cd9ce7da18616f196678354a82cc4a6242/src/assets/HS12.png
--------------------------------------------------------------------------------
/src/assets/HS13.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/NorthwoodsSoftware/gojs-angular-video-sample/672bc8cd9ce7da18616f196678354a82cc4a6242/src/assets/HS13.png
--------------------------------------------------------------------------------
/src/assets/HS14.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/NorthwoodsSoftware/gojs-angular-video-sample/672bc8cd9ce7da18616f196678354a82cc4a6242/src/assets/HS14.png
--------------------------------------------------------------------------------
/src/assets/HS15.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/NorthwoodsSoftware/gojs-angular-video-sample/672bc8cd9ce7da18616f196678354a82cc4a6242/src/assets/HS15.png
--------------------------------------------------------------------------------
/src/assets/HS16.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/NorthwoodsSoftware/gojs-angular-video-sample/672bc8cd9ce7da18616f196678354a82cc4a6242/src/assets/HS16.png
--------------------------------------------------------------------------------
/src/assets/HS2.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/NorthwoodsSoftware/gojs-angular-video-sample/672bc8cd9ce7da18616f196678354a82cc4a6242/src/assets/HS2.png
--------------------------------------------------------------------------------
/src/assets/HS3.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/NorthwoodsSoftware/gojs-angular-video-sample/672bc8cd9ce7da18616f196678354a82cc4a6242/src/assets/HS3.png
--------------------------------------------------------------------------------
/src/assets/HS4.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/NorthwoodsSoftware/gojs-angular-video-sample/672bc8cd9ce7da18616f196678354a82cc4a6242/src/assets/HS4.png
--------------------------------------------------------------------------------
/src/assets/HS5.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/NorthwoodsSoftware/gojs-angular-video-sample/672bc8cd9ce7da18616f196678354a82cc4a6242/src/assets/HS5.png
--------------------------------------------------------------------------------
/src/assets/HS6.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/NorthwoodsSoftware/gojs-angular-video-sample/672bc8cd9ce7da18616f196678354a82cc4a6242/src/assets/HS6.png
--------------------------------------------------------------------------------
/src/assets/HS7.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/NorthwoodsSoftware/gojs-angular-video-sample/672bc8cd9ce7da18616f196678354a82cc4a6242/src/assets/HS7.png
--------------------------------------------------------------------------------
/src/assets/HS8.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/NorthwoodsSoftware/gojs-angular-video-sample/672bc8cd9ce7da18616f196678354a82cc4a6242/src/assets/HS8.png
--------------------------------------------------------------------------------
/src/assets/HS9.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/NorthwoodsSoftware/gojs-angular-video-sample/672bc8cd9ce7da18616f196678354a82cc4a6242/src/assets/HS9.png
--------------------------------------------------------------------------------
/src/browserslist:
--------------------------------------------------------------------------------
1 | # This file is currently used by autoprefixer to adjust CSS to support the below specified browsers
2 | # For additional information regarding the format and rule options, please see:
3 | # https://github.com/browserslist/browserslist#queries
4 | #
5 | # For IE 9-11 support, please remove 'not' from the last line of the file and adjust as needed
6 |
7 | > 0.5%
8 | last 2 versions
9 | Firefox ESR
10 | not dead
11 | not IE 9-11
--------------------------------------------------------------------------------
/src/environments/environment.prod.ts:
--------------------------------------------------------------------------------
1 | export const environment = {
2 | production: true
3 | };
4 |
--------------------------------------------------------------------------------
/src/environments/environment.ts:
--------------------------------------------------------------------------------
1 | // This file can be replaced during build by using the `fileReplacements` array.
2 | // `ng build --prod` replaces `environment.ts` with `environment.prod.ts`.
3 | // The list of file replacements can be found in `angular.json`.
4 |
5 | export const environment = {
6 | production: false
7 | };
8 |
9 | /*
10 | * For easier debugging in development mode, you can import the following file
11 | * to ignore zone related error stack frames such as `zone.run`, `zoneDelegate.invokeTask`.
12 | *
13 | * This import should be commented out in production mode because it will have a negative impact
14 | * on performance if an error is thrown.
15 | */
16 | // import 'zone.js/dist/zone-error'; // Included with Angular CLI.
17 |
--------------------------------------------------------------------------------
/src/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/NorthwoodsSoftware/gojs-angular-video-sample/672bc8cd9ce7da18616f196678354a82cc4a6242/src/favicon.ico
--------------------------------------------------------------------------------
/src/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 | AngularTutorial
6 |
7 |
8 |
9 |
10 |
11 |
12 |
13 |
14 |
15 |
--------------------------------------------------------------------------------
/src/karma.conf.js:
--------------------------------------------------------------------------------
1 | // Karma configuration file, see link for more information
2 | // https://karma-runner.github.io/1.0/config/configuration-file.html
3 |
4 | module.exports = function (config) {
5 | config.set({
6 | // list of files / patterns to load in the browser
7 | files: [
8 | '.node_modules/gojs/release'
9 | //..rest files
10 | ],
11 | basePath: '',
12 | frameworks: ['jasmine', '@angular-devkit/build-angular'],
13 | plugins: [
14 | require('karma-jasmine'),
15 | require('karma-chrome-launcher'),
16 | require('karma-jasmine-html-reporter'),
17 | require('karma-coverage-istanbul-reporter'),
18 | require('@angular-devkit/build-angular/plugins/karma')
19 | ],
20 | client: {
21 | clearContext: false // leave Jasmine Spec Runner output visible in browser
22 | },
23 | coverageIstanbulReporter: {
24 | dir: require('path').join(__dirname, '../coverage/angular-tutorial'),
25 | reports: ['html', 'lcovonly', 'text-summary'],
26 | fixWebpackSourcePaths: true
27 | },
28 | reporters: ['progress', 'kjhtml'],
29 | port: 9876,
30 | colors: true,
31 | logLevel: config.LOG_INFO,
32 | autoWatch: true,
33 | browsers: ['Chrome'],
34 | singleRun: false,
35 | restartOnFileChange: true
36 | });
37 | };
38 |
--------------------------------------------------------------------------------
/src/main.ts:
--------------------------------------------------------------------------------
1 | import { enableProdMode } from '@angular/core';
2 | import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
3 |
4 | import { AppModule } from './app/app.module';
5 | import { environment } from './environments/environment';
6 |
7 | if (environment.production) {
8 | enableProdMode();
9 | }
10 |
11 | platformBrowserDynamic().bootstrapModule(AppModule)
12 | .catch(err => console.error(err));
13 |
--------------------------------------------------------------------------------
/src/polyfills.ts:
--------------------------------------------------------------------------------
1 | /**
2 | * This file includes polyfills needed by Angular and is loaded before the app.
3 | * You can add your own extra polyfills to this file.
4 | *
5 | * This file is divided into 2 sections:
6 | * 1. Browser polyfills. These are applied before loading ZoneJS and are sorted by browsers.
7 | * 2. Application imports. Files imported after ZoneJS that should be loaded before your main
8 | * file.
9 | *
10 | * The current setup is for so-called "evergreen" browsers; the last versions of browsers that
11 | * automatically update themselves. This includes Safari >= 10, Chrome >= 55 (including Opera),
12 | * Edge >= 13 on the desktop, and iOS 10 and Chrome on mobile.
13 | *
14 | * Learn more in https://angular.io/guide/browser-support
15 | */
16 |
17 | /***************************************************************************************************
18 | * BROWSER POLYFILLS
19 | */
20 |
21 | /** IE10 and IE11 requires the following for NgClass support on SVG elements */
22 | // import 'classlist.js'; // Run `npm install --save classlist.js`.
23 |
24 | /**
25 | * Web Animations `@angular/platform-browser/animations`
26 | * Only required if AnimationBuilder is used within the application and using IE/Edge or Safari.
27 | * Standard animation support in Angular DOES NOT require any polyfills (as of Angular 6.0).
28 | */
29 | // import 'web-animations-js'; // Run `npm install --save web-animations-js`.
30 |
31 | /**
32 | * By default, zone.js will patch all possible macroTask and DomEvents
33 | * user can disable parts of macroTask/DomEvents patch by setting following flags
34 | * because those flags need to be set before `zone.js` being loaded, and webpack
35 | * will put import in the top of bundle, so user need to create a separate file
36 | * in this directory (for example: zone-flags.ts), and put the following flags
37 | * into that file, and then add the following code before importing zone.js.
38 | * import './zone-flags.ts';
39 | *
40 | * The flags allowed in zone-flags.ts are listed here.
41 | *
42 | * The following flags will work for all browsers.
43 | *
44 | * (window as any).__Zone_disable_requestAnimationFrame = true; // disable patch requestAnimationFrame
45 | * (window as any).__Zone_disable_on_property = true; // disable patch onProperty such as onclick
46 | * (window as any).__zone_symbol__BLACK_LISTED_EVENTS = ['scroll', 'mousemove']; // disable patch specified eventNames
47 | *
48 | * in IE/Edge developer tools, the addEventListener will also be wrapped by zone.js
49 | * with the following flag, it will bypass `zone.js` patch for IE/Edge
50 | *
51 | * (window as any).__Zone_enable_cross_context_check = true;
52 | *
53 | */
54 |
55 | /***************************************************************************************************
56 | * Zone JS is required by default for Angular itself.
57 | */
58 | import 'zone.js/dist/zone'; // Included with Angular CLI.
59 |
60 |
61 | /***************************************************************************************************
62 | * APPLICATION IMPORTS
63 | */
64 |
--------------------------------------------------------------------------------
/src/styles.css:
--------------------------------------------------------------------------------
1 | /* You can add global styles to this file, and also import other style files */
2 |
--------------------------------------------------------------------------------
/src/test.ts:
--------------------------------------------------------------------------------
1 | // This file is required by karma.conf.js and loads recursively all the .spec and framework files
2 |
3 | import 'zone.js/dist/zone-testing';
4 | import { getTestBed } from '@angular/core/testing';
5 | import {
6 | BrowserDynamicTestingModule,
7 | platformBrowserDynamicTesting
8 | } from '@angular/platform-browser-dynamic/testing';
9 |
10 | declare const require: any;
11 |
12 | // First, initialize the Angular testing environment.
13 | getTestBed().initTestEnvironment(
14 | BrowserDynamicTestingModule,
15 | platformBrowserDynamicTesting()
16 | );
17 | // Then we find all the tests.
18 | const context = require.context('./', true, /\.spec\.ts$/);
19 | // And load the modules.
20 | context.keys().map(context);
21 |
--------------------------------------------------------------------------------
/src/tsconfig.app.json:
--------------------------------------------------------------------------------
1 | {
2 | "extends": "../tsconfig.json",
3 | "compilerOptions": {
4 | "outDir": "../out-tsc/app",
5 | "types": []
6 | },
7 | "exclude": [
8 | "test.ts",
9 | "**/*.spec.ts"
10 | ]
11 | }
12 |
--------------------------------------------------------------------------------
/src/tsconfig.spec.json:
--------------------------------------------------------------------------------
1 | {
2 | "extends": "../tsconfig.json",
3 | "compilerOptions": {
4 | "outDir": "../out-tsc/spec",
5 | "types": [
6 | "jasmine",
7 | "node"
8 | ]
9 | },
10 | "files": [
11 | "test.ts",
12 | "polyfills.ts"
13 | ],
14 | "include": [
15 | "**/*.spec.ts",
16 | "**/*.d.ts"
17 | ]
18 | }
19 |
--------------------------------------------------------------------------------
/src/tslint.json:
--------------------------------------------------------------------------------
1 | {
2 | "extends": "../tslint.json",
3 | "rules": {
4 | "directive-selector": [
5 | true,
6 | "attribute",
7 | "app",
8 | "camelCase"
9 | ],
10 | "component-selector": [
11 | true,
12 | "element",
13 | "app",
14 | "kebab-case"
15 | ]
16 | }
17 | }
18 |
--------------------------------------------------------------------------------
/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 | "compileOnSave": false,
3 | "compilerOptions": {
4 | "baseUrl": "./",
5 | "outDir": "./dist/out-tsc",
6 | "sourceMap": true,
7 | "declaration": false,
8 | "module": "es2015",
9 | "moduleResolution": "node",
10 | "emitDecoratorMetadata": true,
11 | "experimentalDecorators": true,
12 | "importHelpers": true,
13 | "target": "es5",
14 | "typeRoots": [
15 | "node_modules/@types"
16 | ],
17 | "lib": [
18 | "es2018",
19 | "dom"
20 | ]
21 | }
22 | }
23 |
--------------------------------------------------------------------------------
/tslint.json:
--------------------------------------------------------------------------------
1 | {
2 | "extends": "tslint:recommended",
3 | "rulesDirectory": [
4 | "codelyzer"
5 | ],
6 | "rules": {
7 | "array-type": false,
8 | "arrow-parens": false,
9 | "deprecation": {
10 | "severity": "warn"
11 | },
12 | "import-blacklist": [
13 | true,
14 | "rxjs/Rx"
15 | ],
16 | "interface-name": false,
17 | "max-classes-per-file": false,
18 | "max-line-length": [
19 | true,
20 | 140
21 | ],
22 | "member-access": false,
23 | "member-ordering": [
24 | true,
25 | {
26 | "order": [
27 | "static-field",
28 | "instance-field",
29 | "static-method",
30 | "instance-method"
31 | ]
32 | }
33 | ],
34 | "no-consecutive-blank-lines": false,
35 | "no-console": [
36 | true,
37 | "debug",
38 | "info",
39 | "time",
40 | "timeEnd",
41 | "trace"
42 | ],
43 | "no-empty": false,
44 | "no-inferrable-types": [
45 | true,
46 | "ignore-params"
47 | ],
48 | "no-non-null-assertion": true,
49 | "no-redundant-jsdoc": true,
50 | "no-switch-case-fall-through": true,
51 | "no-use-before-declare": true,
52 | "no-var-requires": false,
53 | "object-literal-key-quotes": [
54 | true,
55 | "as-needed"
56 | ],
57 | "object-literal-sort-keys": false,
58 | "ordered-imports": false,
59 | "quotemark": [
60 | true,
61 | "single"
62 | ],
63 | "trailing-comma": false,
64 | "no-output-on-prefix": true,
65 | "use-input-property-decorator": true,
66 | "use-output-property-decorator": true,
67 | "use-host-property-decorator": true,
68 | "no-input-rename": true,
69 | "no-output-rename": true,
70 | "use-life-cycle-interface": true,
71 | "use-pipe-transform-interface": true,
72 | "component-class-suffix": true,
73 | "directive-class-suffix": true
74 | }
75 | }
76 |
--------------------------------------------------------------------------------