Merge "create palette on the right side menu draw function elements to the palette (static functions for now) enable drap elements from palette to main board"

1 files changed, 242 insertions, 86 deletions

diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/designer.component.ts b/cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/designer.component.ts
index 6d36a961f..f3e592cdb 100644
--- a/cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/designer.component.ts
+++ b/cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/designer.component.ts
@@ -1,4 +1,7 @@
 import { Component, OnInit, ViewEncapsulation } from '@angular/core';
+import * as _ from 'lodash';
+import * as joint from 'jointjs';
+import './palette.function.element';
 
 @Component({
   selector: 'app-designer',
@@ -10,6 +13,13 @@ export class DesignerComponent implements OnInit {
 
   private controllerSideBar: boolean;
   private attributesSideBar: boolean;
+
+  boardGraph: joint.dia.Graph;
+  boardPaper: joint.dia.Paper;
+
+  paletteGraph: joint.dia.Graph;
+  palettePaper: joint.dia.Paper;
+
   constructor() {
     this.controllerSideBar = true;
     this.attributesSideBar = false;
@@ -22,101 +32,247 @@ export class DesignerComponent implements OnInit {
   }
 
 
+  /**
+   * - There is a board (main paper) that will the action and function selected from the palette
+   * itmes in this board will be used to create tosca workflow and node templates
+   * - There is also palette , whis contains all the possible functions and actions
+   * that can be dragged into the board
+   * - There is also a fly paper , which is temporarliy paper created on the fly
+   * when items is dragged from the palette- and it's deleted when the item is dropped over
+   * the board.
+   * for more info about the drag and drop algorithem used please visit the following link:
+   * https://stackoverflow.com/a/36932973/1340034
+   */
+
   ngOnInit() {
+    this.initializeBoard();
+    this.initializePalette();
+    // this.createEditBarOverThePaper();
+    const list = [
+      { modelName: 'component-netconf-executor'},
+      { modelName: 'component-remote-ansible-executor' },
+      { modelName: 'dg-generic' },
+      { modelName: 'component-resource-resolution' }];
+
+    const cells = this.buildPaletteGraphFromList(list);
+    this.paletteGraph.resetCells(cells);
+
+    let idx = 0;
+    cells.forEach(cell => {
+      console.log(cell);
+      cell.translate(5, (cell.attributes.size.height + 5) * idx++);
+
+    });
+    this.stencilPaperEventListeners();
+  }
+
+  initializePalette() {
+    if (!this.paletteGraph) {
+      this.paletteGraph = new joint.dia.Graph();
+      this.palettePaper = new joint.dia.Paper({
+        el: $('#palette-paper'),
+        model: this.paletteGraph,
+        height: 300,
+        width: 300,
+        gridSize: 1,
+        interactive: false
+      });
+    }
+  }
+
+  initializeBoard() {
+    if (!this.boardGraph) {
+      this.boardGraph = new joint.dia.Graph();
+      this.boardPaper = new joint.dia.Paper({
+          el: $('#board-paper'),
+          model: this.boardGraph,
+          height: 720,
+          width: 1200,
+          gridSize: 10,
+          drawGrid: true,
+          background: {
+            color: 'rgba(0, 255, 0, 0.3)'
+          },
+          cellViewNamespace: joint.shapes
+        });
+
+      this.boardPaper.on('all', element => {
+        // console.log(element);
+      });
+
+      this.boardPaper.on('link:pointerdown', link => {
+        console.log(link);
+      });
+
+      this.boardPaper.on('element:pointerdown', element => {
+        // this.modelSelected.emit(element.model.get('model'));
+      });
+
+      this.boardPaper.on('blank:pointerclick', () => {
+        // this.selectedModel = undefined;
+      });
+    }
+  }
+
+  buildPaletteGraphFromList(list: any) {
+    const elements = [];
+
+    console.log(list);
+    list.forEach(element => {
+      elements.push(this.createFuctionElementForPalette(element.modelName));
+    });
+
+    return elements;
+  }
 
-    this.attachEditorBarToCanvas();
+
+  createFuctionElementForPalette(label: string) {
+    const element = new joint.shapes.app.FunctionElement({
+      id: label});
+    element.attr('#label/text', label);
+    return element;
   }
 
-  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
+  stencilPaperEventListeners() {
+    this.palettePaper.on('cell:pointerdown', (draggedCell, pointerDownEvent, x, y) => {
+      console.log('pointerdown 2');
+
+      $('body').append(`
+        <div id="flyPaper"
+            style="position:fixed;z-index:100;opacity:.7;pointer-event:none;background-color: transparent !important;"></div>`
+        );
+      const flyGraph = new joint.dia.Graph();
+      const flyPaper = new joint.dia.Paper({
+          el: $('#flyPaper'),
+          model: flyGraph,
+          interactive: true
+        });
+      const flyShape = draggedCell.model.clone();
+      const pos = draggedCell.model.position();
+      const offset = {
+        x: x - pos.x,
+        y: y - pos.y
+      };
+
+      flyShape.position(0, 0);
+      flyGraph.addCell(flyShape);
+      $('#flyPaper').offset({
+        left: pointerDownEvent.pageX - offset.x,
+        top: pointerDownEvent.pageY - offset.y
+      });
+      $('body').on('mousemove.fly', mouseMoveEvent => {
+        $('#flyPaper').offset({
+          left: mouseMoveEvent.pageX - offset.x,
+          top: mouseMoveEvent.pageY - offset.y
+        });
       });
 
-    this.paper.setGrid({
-      name: 'dot',
-      args:
-        { color: 'black', thickness: 2, scaleFactor: 8 }
+      $('body').on('mouseup.fly', mouseupEvent => {
+        const mouseupX = mouseupEvent.pageX;
+        const mouseupY = mouseupEvent.pageY;
+        const target = this.boardPaper.$el.offset();
+        // Dropped over paper ?
+        if (mouseupX > target.left &&
+          mouseupX < target.left + this.boardPaper.$el.width() &&
+          mouseupY > target.top && y < target.top + this.boardPaper.$el.height()) {
+          const clonedShape = flyShape.clone();
 
-    }).drawGrid();
+          clonedShape.position(mouseupX - target.left - offset.x, mouseupY - target.top - offset.y);
+          this.boardGraph.addCell(clonedShape);
+          const cellViewsBelow =
+            this.boardPaper.findViewsFromPoint(clonedShape.getBBox().center());
 
+          if (cellViewsBelow.length) {
+            let cellViewBelow;
+            cellViewsBelow.forEach( cellItem => {
+              if (cellItem.model.id !== clonedShape.id) {
+                cellViewBelow = cellItem;
+              }
+            });
+            // Prevent recursive embedding.
+            if (cellViewBelow && cellViewBelow.model.get('parent') !== clonedShape.id) {
+              cellViewBelow.model.embed(clonedShape);
+            }
+          }
 
-    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)
+        }
+        $('body').off('mousemove.fly').off('mouseup.fly');
+        // flyShape.remove();
+        $('#flyPaper').remove();
+      });
     });
+  }
+
+  /**
+   * this is a way to add the button like zoom in , zoom out , and source over jointjs paper
+   * may be used if no other way is found
+   */
+  // createEditBarOverThePaper() {
+  //   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)'
+  //       });
+  //     }
+  //   });
 
-    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]);
-  }  
+  // }
 }