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>

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]);
   }
+  
 }