From 53ca745edd1072a80ea58be1ac616de3bf79f6b4 Mon Sep 17 00:00:00 2001 From: Arundathi Patil Date: Fri, 11 Oct 2019 18:19:04 +0530 Subject: Jointjs integration with angular Added JointJS dependency to the project Issue-ID: CCSDK-1826 Change-Id: Iddd014b23d62e1874de4aedb01e3efd53fcf0945 Signed-off-by: Arundathi Patil --- cds-ui/client/src/app/app-routing.module.ts | 4 ++ cds-ui/client/src/app/app.module.ts | 4 +- .../shared/components/home/home.component.html | 1 + .../blueprint-designer-routing.module.ts | 38 ++++++++++++ .../blueprint-designer.component.html | 21 +++++++ .../blueprint-designer.component.scss | 20 ++++++ .../blueprint-designer.component.spec.ts | 46 ++++++++++++++ .../blueprint-designer.component.ts | 71 ++++++++++++++++++++++ .../blueprint-designer.module.ts | 34 +++++++++++ 9 files changed, 238 insertions(+), 1 deletion(-) create mode 100644 cds-ui/client/src/app/feature-modules/blueprint-designer/blueprint-designer-routing.module.ts create mode 100644 cds-ui/client/src/app/feature-modules/blueprint-designer/blueprint-designer.component.html create mode 100644 cds-ui/client/src/app/feature-modules/blueprint-designer/blueprint-designer.component.scss create mode 100644 cds-ui/client/src/app/feature-modules/blueprint-designer/blueprint-designer.component.spec.ts create mode 100644 cds-ui/client/src/app/feature-modules/blueprint-designer/blueprint-designer.component.ts create mode 100644 cds-ui/client/src/app/feature-modules/blueprint-designer/blueprint-designer.module.ts (limited to 'cds-ui/client/src') 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. --> Resource Definition Controller Catalog + Blueprint Designer 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 @@ + + +
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; + + 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 { } -- cgit 1.2.3-korg