cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/designer.component.ts

   1 import { Component, OnInit, ViewEncapsulation } from '@angular/core';
   2 import * as $ from 'jquery';
   3 import * as _ from 'lodash';
   4 import * as joint from '../../../../../../node_modules/jointjs/dist/joint.js';
   5
   6 @Component({
   7   selector: 'app-designer',
   8   templateUrl: './designer.component.html',
   9   styleUrls: ['./designer.component.css'],
  10   encapsulation: ViewEncapsulation.None
  11 })
  12 export class DesignerComponent implements OnInit {
  13
  14   private controllerSideBar: boolean;
  15   private attributesSideBar: boolean;
  16   public graph: any;
  17   public paper: any;
  18
  19   constructor() {
  20     this.controllerSideBar = true;
  21     this.attributesSideBar = false;
  22   }
  23   private _toggleSidebar1() {
  24     this.controllerSideBar = !this.controllerSideBar;
  25   }
  26   private _toggleSidebar2() {
  27     this.attributesSideBar = !this.attributesSideBar;
  28   }
  29
  30
  31   ngOnInit() {
  32     this.attachEditorBarToCanvas();
  33   }
  34
  35   attachEditorBarToCanvas() {
  36     this.graph = new joint.dia.Graph,
  37       this.paper = new joint.dia.Paper({
  38         el: $('#paper'),
  39         model: this.graph,
  40         height: 720,
  41         width: 1200,
  42         gridSize: 2,
  43         drawGrid: true,
  44         cellViewNamespace: joint.shapes
  45       });
  46
  47     this.paper.setGrid({
  48       name: 'dot',
  49       args:
  50         { color: 'black', thickness: 2, scaleFactor: 8 }
  51
  52     }).drawGrid();
  53
  54
  55     joint.shapes["html"] = {};
  56     joint.shapes["html"].Element = joint.shapes.basic.Rect.extend({
  57         defaults: joint.util.deepSupplement({
  58             type: 'html.Element'
  59         }, joint.shapes.basic.Rect.prototype.defaults)
  60     });
  61
  62     joint.shapes["html"].ElementView = joint.dia.ElementView.extend({
  63
  64       template: [
  65         '<div>',
  66       '<div id="editbar" class="editBar text-center">',
  67       '<div class="btn-group mr-2" role="group" aria-label="First group">',
  68         '<button type="button" class="btn btn-secondary tooltip-bottom" data-tooltip="Undo">',
  69           '<img src="/assets/img/icon-undoActive.svg">',
  70         '</button>',
  71         '<button type="button" class="btn btn-secondary tooltip-bottom" data-tooltip="Redo">',
  72           '<img src="/assets/img/icon-redo.svg">',
  73         '</button>',
  74       '</div>',
  75       '<div class="btn-group mr-2" role="group" aria-label="Second group">',
  76         '<button type="button" class="btn btn-secondary tooltip-bottom" data-tooltip="Zoom Out">',
  77           '<img src="/assets/img/icon-zoomOut.svg">',
  78         '</button>',
  79         '<button type="button" class="btn btn-secondary pl-0 pr-0">100%</button>',
  80         '<button type="button" class="btn btn-secondary tooltip-bottom" data-tooltip="Zoom In">',
  81           '<img src="/assets/img/icon-zoomIn.svg">',
  82         '</button>',
  83       '</div>',
  84       '<div class="btn-group viewBtns" role="group" aria-label="Third group">',
  85         '<button type="button" class="btn btn-secondary topologySource active">View</button>',
  86         '<button type="button" class="btn btn-secondary topologyView">Source</button>',
  87       '</div>',
  88     '</div>',
  89     '</div>'
  90       ].join(''),
  91
  92       initialize: function() {
  93           _.bindAll(this, 'updateBox');
  94           joint.dia.ElementView.prototype.initialize.apply(this, arguments);
  95
  96           this.$box = $(_.template(this.template)());
  97           // Prevent paper from handling pointerdown.
  98           this.$box.find('input,select').on('mousedown click', function(evt) {
  99               evt.stopPropagation();
 100           });
 101           this.model.on('change', this.updateBox, this);
 102
 103           this.updateBox();
 104       },
 105       render: function() {
 106           joint.dia.ElementView.prototype.render.apply(this, arguments);
 107           this.paper.$el.prepend(this.$box);
 108           this.updateBox();
 109           return this;
 110       },
 111       updateBox: function() {
 112           // Set the position and dimension of the box so that it covers the JointJS element.
 113           var bbox = this.model.getBBox();
 114           this.$box.css({
 115               width: bbox.width,
 116               height: bbox.height,
 117               left: bbox.x,
 118               top: bbox.y,
 119               transform: 'rotate(' + (this.model.get('angle') || 0) + 'deg)'
 120           });
 121       }
 122   });
 123
 124   var el1 = new joint.shapes["html"].Element({});
 125   this.graph.addCells([el1]);
 126   }
 127
 128 }