diff options
author | 2019-12-30 14:43:16 +0000 | |
---|---|---|
committer | 2019-12-30 14:43:16 +0000 | |
commit | e4ceeb2f026833c63d1a6386e00c154cb804a629 (patch) | |
tree | de52104786ae6925ad18e2f731c5453d006a708a /cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/designer.component.ts | |
parent | 86c2b15ff80c824806c0947299f2cb9576b8f396 (diff) | |
parent | f96340e651b01f77107249e29d2e62cb770ebd3b (diff) |
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"
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.ts | 328 |
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]); - } + // } } |