diff options
Diffstat (limited to 'cds-ui/client-frankfurt')
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 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]); } + } |