1 files changed, 101 insertions, 0 deletions
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]);
   }
+  
 }