summaryrefslogtreecommitdiffstats
path: root/cds-ui/client-frankfurt
diff options
context:
space:
mode:
authorArundathi Patil <arundpil@in.ibm.com>2019-11-25 15:41:45 +0530
committerKAPIL SINGAL <ks220y@att.com>2019-11-27 15:35:59 +0000
commit55b06b518ca4c4bb671bedf0d8a1d3a4f9c65f6b (patch)
tree5b13e85336e6df0e1095e7c9a6cdae137a278d4f /cds-ui/client-frankfurt
parent71616cc0a6bee9c604b35754778ec5cae7477635 (diff)
Canvas features and Jointjs Integration
Added Jointjs dependency to project and integrated editor bar to the designer canvas Issue-ID: CCSDK-1780 Change-Id: I8276469f76851be4f5b6ac765729304c68d04737 Signed-off-by: Arundathi Patil <arundpil@in.ibm.com>
Diffstat (limited to 'cds-ui/client-frankfurt')
-rw-r--r--cds-ui/client-frankfurt/angular.json7
-rw-r--r--cds-ui/client-frankfurt/package.json10
-rw-r--r--cds-ui/client-frankfurt/src/app/modules/feature-modules/packages/designer/designer.component.css1
-rw-r--r--cds-ui/client-frankfurt/src/app/modules/feature-modules/packages/designer/designer.component.html2
-rw-r--r--cds-ui/client-frankfurt/src/app/modules/feature-modules/packages/designer/designer.component.ts101
5 files changed, 119 insertions, 2 deletions
diff --git a/cds-ui/client-frankfurt/angular.json b/cds-ui/client-frankfurt/angular.json
index 97052b879..fafa6d775 100644
--- a/cds-ui/client-frankfurt/angular.json
+++ b/cds-ui/client-frankfurt/angular.json
@@ -28,10 +28,17 @@
"./node_modules/bootstrap/dist/css/bootstrap.min.css",
"./node_modules/@angular/material/prebuilt-themes/purple-green.css",
"./node_modules/font-awesome/css/font-awesome.css",
+ "./node_modules/jointjs/css/layout.css",
+ "./node_modules/jointjs/css/themes/material.css",
+ "./node_modules/jointjs/css/themes/default.css",
"src/assets/css/orangeHelvetica.css"
],
"scripts": [
+ "./node_modules/jquery/dist/jquery.min.js",
+ "./node_modules/lodash/index.js",
+ "./node_modules/backbone/backbone.js",
+ "./node_modules/jointjs/dist/joint.js"
]
},
"configurations": {
diff --git a/cds-ui/client-frankfurt/package.json b/cds-ui/client-frankfurt/package.json
index c1ba7ffec..c4fa1ab62 100644
--- a/cds-ui/client-frankfurt/package.json
+++ b/cds-ui/client-frankfurt/package.json
@@ -31,7 +31,11 @@
"ng-sidebar": "^9.1.1",
"rxjs": "~6.4.0",
"tslib": "^1.10.0",
- "zone.js": "~0.9.1"
+ "zone.js": "~0.9.1",
+ "jquery": "^3.1.1",
+ "backbone": "^1.4.0",
+ "jointjs": "^3.0.4",
+ "lodash": "^3.10.1"
},
"devDependencies": {
"@angular-devkit/build-angular": "~0.803.9",
@@ -41,6 +45,10 @@
"@types/jasmine": "~3.3.8",
"@types/jasminewd2": "~2.0.3",
"@types/node": "~8.9.4",
+ "@types/backbone": "^1.4.1",
+ "@types/jointjs": "^2.0.0",
+ "@types/jquery": "^3.3.31",
+ "@types/lodash": "^3.10.1",
"codelyzer": "^5.0.0",
"jasmine-core": "~3.4.0",
"jasmine-marbles": "^0.6.0",
diff --git a/cds-ui/client-frankfurt/src/app/modules/feature-modules/packages/designer/designer.component.css b/cds-ui/client-frankfurt/src/app/modules/feature-modules/packages/designer/designer.component.css
index d41bf5222..36abc9329 100644
--- a/cds-ui/client-frankfurt/src/app/modules/feature-modules/packages/designer/designer.component.css
+++ b/cds-ui/client-frankfurt/src/app/modules/feature-modules/packages/designer/designer.component.css
@@ -344,6 +344,7 @@ p.compType-4{
background:#F4F9FE;
border: solid 1px #E8EFF8;
box-shadow: 0 2px 6px rgba(47, 83, 151, .1);
+ margin-left: 20em;
}
.editBar .btn-group{
box-shadow: 0 2px 6px rgba(47, 83, 151, .15);
diff --git a/cds-ui/client-frankfurt/src/app/modules/feature-modules/packages/designer/designer.component.html b/cds-ui/client-frankfurt/src/app/modules/feature-modules/packages/designer/designer.component.html
index 0d55439dd..991e126c0 100644
--- a/cds-ui/client-frankfurt/src/app/modules/feature-modules/packages/designer/designer.component.html
+++ b/cds-ui/client-frankfurt/src/app/modules/feature-modules/packages/designer/designer.component.html
@@ -126,7 +126,7 @@
</div>
</ng-sidebar>
<!-- Page content -->
- <div ng-sidebar-content>
+ <div ng-sidebar-content id="paper">
<button class="rotate" (click)="_toggleSidebar1()">
<span>
Controller
diff --git a/cds-ui/client-frankfurt/src/app/modules/feature-modules/packages/designer/designer.component.ts b/cds-ui/client-frankfurt/src/app/modules/feature-modules/packages/designer/designer.component.ts
index 2d3557cb1..547c1e574 100644
--- a/cds-ui/client-frankfurt/src/app/modules/feature-modules/packages/designer/designer.component.ts
+++ b/cds-ui/client-frankfurt/src/app/modules/feature-modules/packages/designer/designer.component.ts
@@ -1,4 +1,7 @@
import { Component, OnInit, ViewEncapsulation } from '@angular/core';
+import * as $ from 'jquery';
+import * as _ from 'lodash';
+import * as joint from '../../../../../../node_modules/jointjs/dist/joint.js';
@Component({
selector: 'app-designer',
@@ -10,6 +13,9 @@ export class DesignerComponent implements OnInit {
private controllerSideBar: boolean;
private attributesSideBar: boolean;
+ public graph: any;
+ public paper: any;
+
constructor() {
this.controllerSideBar = true;
this.attributesSideBar = false;
@@ -23,5 +29,100 @@ export class DesignerComponent implements OnInit {
ngOnInit() {
+ this.attachEditorBarToCanvas();
+ }
+
+ attachEditorBarToCanvas() {
+ this.graph = new joint.dia.Graph,
+ this.paper = new joint.dia.Paper({
+ el: $('#paper'),
+ model: this.graph,
+ height: 720,
+ width: 1200,
+ gridSize: 2,
+ drawGrid: true,
+ cellViewNamespace: joint.shapes
+ });
+
+ this.paper.setGrid({
+ name: 'dot',
+ args:
+ { color: 'black', thickness: 2, scaleFactor: 8 }
+
+ }).drawGrid();
+
+
+ joint.shapes["html"] = {};
+ joint.shapes["html"].Element = joint.shapes.basic.Rect.extend({
+ defaults: joint.util.deepSupplement({
+ type: 'html.Element'
+ }, joint.shapes.basic.Rect.prototype.defaults)
+ });
+
+ joint.shapes["html"].ElementView = joint.dia.ElementView.extend({
+
+ template: [
+ '<div>',
+ '<div id="editbar" class="editBar text-center">',
+ '<div class="btn-group mr-2" role="group" aria-label="First group">',
+ '<button type="button" class="btn btn-secondary tooltip-bottom" data-tooltip="Undo">',
+ '<img src="/assets/img/icon-undoActive.svg">',
+ '</button>',
+ '<button type="button" class="btn btn-secondary tooltip-bottom" data-tooltip="Redo">',
+ '<img src="/assets/img/icon-redo.svg">',
+ '</button>',
+ '</div>',
+ '<div class="btn-group mr-2" role="group" aria-label="Second group">',
+ '<button type="button" class="btn btn-secondary tooltip-bottom" data-tooltip="Zoom Out">',
+ '<img src="/assets/img/icon-zoomOut.svg">',
+ '</button>',
+ '<button type="button" class="btn btn-secondary pl-0 pr-0">100%</button>',
+ '<button type="button" class="btn btn-secondary tooltip-bottom" data-tooltip="Zoom In">',
+ '<img src="/assets/img/icon-zoomIn.svg">',
+ '</button>',
+ '</div>',
+ '<div class="btn-group viewBtns" role="group" aria-label="Third group">',
+ '<button type="button" class="btn btn-secondary topologySource active">View</button>',
+ '<button type="button" class="btn btn-secondary topologyView">Source</button>',
+ '</div>',
+ '</div>',
+ '</div>'
+ ].join(''),
+
+ initialize: function() {
+ _.bindAll(this, 'updateBox');
+ joint.dia.ElementView.prototype.initialize.apply(this, arguments);
+
+ this.$box = $(_.template(this.template)());
+ // Prevent paper from handling pointerdown.
+ this.$box.find('input,select').on('mousedown click', function(evt) {
+ evt.stopPropagation();
+ });
+ this.model.on('change', this.updateBox, this);
+
+ this.updateBox();
+ },
+ render: function() {
+ joint.dia.ElementView.prototype.render.apply(this, arguments);
+ this.paper.$el.prepend(this.$box);
+ this.updateBox();
+ return this;
+ },
+ updateBox: function() {
+ // Set the position and dimension of the box so that it covers the JointJS element.
+ var bbox = this.model.getBBox();
+ this.$box.css({
+ width: bbox.width,
+ height: bbox.height,
+ left: bbox.x,
+ top: bbox.y,
+ transform: 'rotate(' + (this.model.get('angle') || 0) + 'deg)'
+ });
+ }
+ });
+
+ var el1 = new joint.shapes["html"].Element({});
+ this.graph.addCells([el1]);
}
+
}