Jointjs integration with angular

Added JointJS dependency to the project

Issue-ID: CCSDK-1826
Change-Id: Iddd014b23d62e1874de4aedb01e3efd53fcf0945
Signed-off-by: Arundathi Patil <arundpil@in.ibm.com>

11 files changed, 257 insertions, 5 deletions

diff --git a/cds-ui/client/angular.json b/cds-ui/client/angular.json
index c5800f050..2bf255ddf 100644
--- a/cds-ui/client/angular.json
+++ b/cds-ui/client/angular.json
@@ -31,7 +31,10 @@
                             "./node_modules/@angular/material/prebuilt-themes/indigo-pink.css",
                             "./node_modules/material-design-icons/iconfont/material-icons.css",
                             "./node_modules/font-awesome/css/font-awesome.css",                            
-                            "./node_modules/bootstrap/dist/css/bootstrap.min.css"
+                            "./node_modules/bootstrap/dist/css/bootstrap.min.css",
+                            "./node_modules/jointjs/css/layout.css",
+                            "./node_modules/jointjs/css/themes/material.css",
+                            "./node_modules/jointjs/css/themes/default.css"
                         ],
                         "scripts": [
                             "./node_modules/ace-builds/src-min/ace.js",
@@ -43,7 +46,11 @@
                             "./node_modules/ace-builds/src-min/mode-kotlin.js",
                             "./node_modules/ace-builds/src-min/mode-text.js",
                             "./node_modules/ace-builds/src-min/mode-velocity.js",
-                            "./node_modules/ace-builds/src-min/mode-yaml.js"
+                            "./node_modules/ace-builds/src-min/mode-yaml.js",
+                            "./node_modules/jquery/dist/jquery.js",
+                            "./node_modules/lodash/index.js",
+                            "./node_modules/backbone/backbone.js",
+                            "./node_modules/jointjs/dist/joint.js"
                         ]
                     },
                     "configurations": {
diff --git a/cds-ui/client/package.json b/cds-ui/client/package.json
index 2e19d29fe..4da70110e 100644
--- a/cds-ui/client/package.json
+++ b/cds-ui/client/package.json
@@ -29,14 +29,18 @@
         "@ngrx/store-devtools": "^6.1.2",
         "@types/d3": "^5.7.0",
         "ang-jsoneditor": "1.6.1",
+        "backbone": "^1.4.0",
+        "bootstrap": "^4.3.1",
         "core-js": "^2.5.4",
         "d3": "^5.9.1",
-        "bootstrap": "^4.3.1",
         "file-saver": "^2.0.1",
         "font-awesome": "^4.7.0",
         "hammerjs": "^2.0.8",
+        "jointjs": "^3.0.4",
+        "jquery": "^3.1.1",
         "jsoneditor": "^5.31.1",
         "jszip": "^3.2.0",
+        "lodash": "^3.10.1",
         "material-design-icons": "^3.0.1",
         "ng2-ace-editor": "^0.3.9",
         "rxjs": "6.3.3",
@@ -49,9 +53,13 @@
         "@angular/cli": "7.1.0",
         "@angular/compiler-cli": "7.1.0",
         "@angular/language-service": "7.1.0",
-        "@types/node": "8.9.4",
+        "@types/backbone": "^1.4.1",
         "@types/jasmine": "2.8.8",
         "@types/jasminewd2": "2.0.3",
+        "@types/jointjs": "^2.0.0",
+        "@types/jquery": "^3.3.31",
+        "@types/lodash": "^3.10.1",
+        "@types/node": "^8.10.54",
         "codelyzer": "4.5.0",
         "jasmine-core": "2.99.1",
         "jasmine-spec-reporter": "4.2.1",
diff --git a/cds-ui/client/src/app/app-routing.module.ts b/cds-ui/client/src/app/app-routing.module.ts
index 01ecfe48b..998194274 100644
--- a/cds-ui/client/src/app/app-routing.module.ts
+++ b/cds-ui/client/src/app/app-routing.module.ts
@@ -42,6 +42,10 @@ const routes: Routes = [
     {
         path: 'controller-catalog',
         loadChildren: './feature-modules/controller-catalog/controller-catalog.module#ControllerCatalogModule'
+    },
+    {
+      path: 'blueprint-designer',
+      loadChildren: './feature-modules/blueprint-designer/blueprint-designer.module#BlueprintDesignerModule'
     }
   ]
 }
diff --git a/cds-ui/client/src/app/app.module.ts b/cds-ui/client/src/app/app.module.ts
index e4cc4a15d..998a80077 100644
--- a/cds-ui/client/src/app/app.module.ts
+++ b/cds-ui/client/src/app/app.module.ts
@@ -33,6 +33,7 @@ import { SharedModule } from './common/shared/shared.module';
 import { CoreModule } from './common/core/core.module';
 import { AppMaterialModule } from './common/modules/app-material.module';
 import { ResourceDefinitionModule } from './feature-modules/resource-definition/resource-definition.module';
+import { BlueprintDesignerModule } from './feature-modules/blueprint-designer/blueprint-designer.module';
 
 @NgModule({ 
   declarations: [
@@ -48,7 +49,8 @@ import { ResourceDefinitionModule } from './feature-modules/resource-definition/
     AppMaterialModule,
     SharedModule,
     CoreModule,
-    ResourceDefinitionModule
+    ResourceDefinitionModule,
+    BlueprintDesignerModule
   ],
   providers: [],
   bootstrap: [AppComponent]
diff --git a/cds-ui/client/src/app/common/shared/components/home/home.component.html b/cds-ui/client/src/app/common/shared/components/home/home.component.html
index beff353ef..2f1ec45ec 100644
--- a/cds-ui/client/src/app/common/shared/components/home/home.component.html
+++ b/cds-ui/client/src/app/common/shared/components/home/home.component.html
@@ -53,6 +53,7 @@ limitations under the License.
             </nav> -->
             <a mat-list-item [routerLink]="['/resource-definition']">Resource Definition</a>
             <a mat-list-item [routerLink]="['/controller-catalog']">Controller Catalog</a>
+            <a mat-list-item [routerLink]="['/blueprint-designer']">Blueprint Designer</a>
         </mat-nav-list>
     </mat-sidenav>
 
diff --git a/cds-ui/client/src/app/feature-modules/blueprint-designer/blueprint-designer-routing.module.ts b/cds-ui/client/src/app/feature-modules/blueprint-designer/blueprint-designer-routing.module.ts
new file mode 100644
index 000000000..6b0749603
--- /dev/null
+++ b/cds-ui/client/src/app/feature-modules/blueprint-designer/blueprint-designer-routing.module.ts
@@ -0,0 +1,38 @@
+/*
+============LICENSE_START==========================================
+===================================================================
+Copyright (C) 2019 IBM Intellectual Property. All rights reserved.
+===================================================================
+
+Unless otherwise specified, all software contained herein is licensed
+under the Apache License, Version 2.0 (the License);
+you may not use this software except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+============LICENSE_END============================================
+*/
+
+import { NgModule } from '@angular/core';
+import { Routes, RouterModule } from '@angular/router';
+import { BlueprintDesignerComponent } from './blueprint-designer.component';
+
+
+const routes: Routes = [
+    {
+        path: '',
+        component: BlueprintDesignerComponent
+    }
+];
+
+@NgModule({
+  imports: [RouterModule.forChild(routes)],
+  exports: [RouterModule]
+})
+export class BlueprintDesignerRoutingModule { }
diff --git a/cds-ui/client/src/app/feature-modules/blueprint-designer/blueprint-designer.component.html b/cds-ui/client/src/app/feature-modules/blueprint-designer/blueprint-designer.component.html
new file mode 100644
index 000000000..11a5d72d3
--- /dev/null
+++ b/cds-ui/client/src/app/feature-modules/blueprint-designer/blueprint-designer.component.html
@@ -0,0 +1,21 @@
+<!-- ============LICENSE_START==========================================
+===================================================================
+Copyright (C) 2019 IBM Intellectual Property. All rights reserved.
+===================================================================
+
+Unless otherwise specified, all software contained herein is licensed
+under the Apache License, Version 2.0 (the License);
+you may not use this software except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+============LICENSE_END============================================ 
+-->
+
+<div id="paper" style="height: 100%; width: 100%"></div>
diff --git a/cds-ui/client/src/app/feature-modules/blueprint-designer/blueprint-designer.component.scss b/cds-ui/client/src/app/feature-modules/blueprint-designer/blueprint-designer.component.scss
new file mode 100644
index 000000000..93f5c9dea
--- /dev/null
+++ b/cds-ui/client/src/app/feature-modules/blueprint-designer/blueprint-designer.component.scss
@@ -0,0 +1,20 @@
+/*
+============LICENSE_START==========================================
+===================================================================
+Copyright (C) 2019 IBM Intellectual Property. All rights reserved.
+===================================================================
+
+Unless otherwise specified, all software contained herein is licensed
+under the Apache License, Version 2.0 (the License);
+you may not use this software except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+============LICENSE_END============================================
+*/
\ No newline at end of file
diff --git a/cds-ui/client/src/app/feature-modules/blueprint-designer/blueprint-designer.component.spec.ts b/cds-ui/client/src/app/feature-modules/blueprint-designer/blueprint-designer.component.spec.ts
new file mode 100644
index 000000000..1972e75b7
--- /dev/null
+++ b/cds-ui/client/src/app/feature-modules/blueprint-designer/blueprint-designer.component.spec.ts
@@ -0,0 +1,46 @@
+/*
+============LICENSE_START==========================================
+===================================================================
+Copyright (C) 2019 IBM Intellectual Property. All rights reserved.
+===================================================================
+
+Unless otherwise specified, all software contained herein is licensed
+under the Apache License, Version 2.0 (the License);
+you may not use this software except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+============LICENSE_END============================================
+*/
+
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { BlueprintDesignerComponent } from './blueprint-designer.component';
+
+describe('BlueprintDesignerComponent', () => {
+  let component: BlueprintDesignerComponent;
+  let fixture: ComponentFixture<BlueprintDesignerComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ BlueprintDesignerComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(BlueprintDesignerComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/cds-ui/client/src/app/feature-modules/blueprint-designer/blueprint-designer.component.ts b/cds-ui/client/src/app/feature-modules/blueprint-designer/blueprint-designer.component.ts
new file mode 100644
index 000000000..ac9637722
--- /dev/null
+++ b/cds-ui/client/src/app/feature-modules/blueprint-designer/blueprint-designer.component.ts
@@ -0,0 +1,71 @@
+/*
+============LICENSE_START==========================================
+===================================================================
+Copyright (C) 2019 IBM Intellectual Property. All rights reserved.
+===================================================================
+
+Unless otherwise specified, all software contained herein is licensed
+under the Apache License, Version 2.0 (the License);
+you may not use this software except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+============LICENSE_END============================================
+*/
+
+import { Component, OnInit } from '@angular/core';
+import * as $ from 'jquery';
+import * as _ from 'lodash';
+import * as joint from '../../../../node_modules/jointjs/dist/joint.js';
+
+@Component({
+  selector: 'app-blueprint-designer',
+  templateUrl: './blueprint-designer.component.html',
+  styleUrls: ['./blueprint-designer.component.scss']
+})
+export class BlueprintDesignerComponent implements OnInit {
+
+  public graph: any;
+  public paper: any;
+
+  constructor() { }
+
+  ngOnInit() {
+    // this.createGraph();
+  }
+
+  createGraph() {
+    this.graph = new joint.dia.Graph,
+      this.paper = new joint.dia.Paper({
+        el: $('#paper'),
+        model: this.graph,
+        height: 700,
+        width: 1000,
+        gridSize: 2,
+        drawGrid: true
+      });
+
+      this.paper = new joint.dia.Paper({
+      el: document.getElementById('paper'),
+      width: 1000,
+      height: 1000,
+      model: this.graph,
+      gridSize: 2,
+      drawGrid: true
+    });
+
+    this.paper.setGrid({
+      name: 'dot',
+      args:
+        { color: 'black', thickness: 2, scaleFactor: 8 }
+
+    }).drawGrid();
+  }
+
+}
diff --git a/cds-ui/client/src/app/feature-modules/blueprint-designer/blueprint-designer.module.ts b/cds-ui/client/src/app/feature-modules/blueprint-designer/blueprint-designer.module.ts
new file mode 100644
index 000000000..f338f790d
--- /dev/null
+++ b/cds-ui/client/src/app/feature-modules/blueprint-designer/blueprint-designer.module.ts
@@ -0,0 +1,34 @@
+/*
+============LICENSE_START==========================================
+===================================================================
+Copyright (C) 2019 IBM Intellectual Property. All rights reserved.
+===================================================================
+
+Unless otherwise specified, all software contained herein is licensed
+under the Apache License, Version 2.0 (the License);
+you may not use this software except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+============LICENSE_END============================================
+*/
+
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { BlueprintDesignerComponent } from './blueprint-designer.component';
+import { BlueprintDesignerRoutingModule } from './blueprint-designer-routing.module'
+
+@NgModule({
+  declarations: [BlueprintDesignerComponent],
+  imports: [
+    CommonModule,
+    BlueprintDesignerRoutingModule
+  ]
+})
+export class BlueprintDesignerModule { }