diff options
Diffstat (limited to 'cds-ui/client-frankfurt/src/app/modules/feature-modules/packages')
3 files changed, 103 insertions, 1 deletions
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 faa419c80..067d30d7f 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]); } + } |