aboutsummaryrefslogtreecommitdiffstats
path: root/cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/designer.component.ts
diff options
context:
space:
mode:
Diffstat (limited to 'cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/designer.component.ts')
-rw-r--r--cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/designer.component.ts328
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]);
- }
+ // }
}