diff options
author | Ahmed Abbas <ahmad.helmy@orange.com> | 2020-01-06 17:52:39 +0200 |
---|---|---|
committer | shaaban Altanany <shaaban.eltanany.ext@orange.com> | 2020-01-07 12:23:15 +0200 |
commit | 11072c92de3aec370e93c21134621ac993f601bc (patch) | |
tree | 49e7a1331fb9bd6cafc71495326f5d722a9c3ea2 /cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/designer.component.ts | |
parent | 077b1ab152c61695ac4d007035dfb81e9aef2c61 (diff) |
designer client screen functionality:
- insert action into main board
- drag function from palette and drop over an action
- prevent drag function outside action
- insert multiple actions into the board
Issue-ID: CCSDK-2017
Issue-ID: CCSDK-1783
Signed-off-by: Ahmed Abbas <ahmad.helmy@orange.com>
Change-Id: Id7528404ba70ca05561127c22e8bf4d27766bb91
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 | 107 |
1 files changed, 88 insertions, 19 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 f3e592cdb..b19f5699b 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,7 +1,10 @@ import { Component, OnInit, ViewEncapsulation } from '@angular/core'; -import * as _ from 'lodash'; import * as joint from 'jointjs'; -import './palette.function.element'; +import './jointjs/elements/palette.function.element'; +import './jointjs/elements/action.element'; +import './jointjs/elements/board.function.element'; + + @Component({ selector: 'app-designer', @@ -13,6 +16,9 @@ export class DesignerComponent implements OnInit { private controllerSideBar: boolean; private attributesSideBar: boolean; + //to generate Ids for dragged function elements + private fuctionIdCounter=0; + private actionIdCounter=0; boardGraph: joint.dia.Graph; boardPaper: joint.dia.Paper; @@ -90,9 +96,9 @@ export class DesignerComponent implements OnInit { width: 1200, gridSize: 10, drawGrid: true, - background: { - color: 'rgba(0, 255, 0, 0.3)' - }, + // background: { + // color: 'rgba(0, 255, 0, 0.3)' + // }, cellViewNamespace: joint.shapes }); @@ -111,9 +117,50 @@ export class DesignerComponent implements OnInit { this.boardPaper.on('blank:pointerclick', () => { // this.selectedModel = undefined; }); + + this.boardGraph.on('change:position', (cell) => { + + var parentId = cell.get('parent'); + if (!parentId) return; + + var parent = this.boardGraph.getCell(parentId); + + var parentBbox = parent.getBBox(); + var cellBbox = cell.getBBox(); + + console.log("parent ", parentBbox); + console.log("cell ", cellBbox); + if (parentBbox.containsPoint(cellBbox.origin()) && + parentBbox.containsPoint(cellBbox.topRight()) && + parentBbox.containsPoint(cellBbox.corner()) && + parentBbox.containsPoint(cellBbox.bottomLeft())) { + + + // All the four corners of the child are inside + // the parent area. + return; + } + + // Revert the child position. + cell.set('position', cell.previous('position')); + }); } } + insertCustomActionIntoBoard() { + this.actionIdCounter++; + const element = this.createCustomAction("action_"+ this.actionIdCounter, 'Action' + this.actionIdCounter); + this.boardGraph.addCell(element); + } + + createCustomAction(id: string, label: string) { + const element = new joint.shapes.app.ActionElement({ + id: id + }); + element.attr('#label/text', label); + return element; + } + buildPaletteGraphFromList(list: any) { const elements = []; @@ -125,12 +172,22 @@ export class DesignerComponent implements OnInit { return elements; } - createFuctionElementForPalette(label: string) { - const element = new joint.shapes.app.FunctionElement({ - id: label}); - element.attr('#label/text', label); - return element; + const element = new joint.shapes.palette.FunctionElement({ + id: label + }); + element.attr('#label/text', label); + element.attr('type', label); + return element; + } + + createFuctionElementForBoard(id :String, label :string, type :string) { + const boardElement = new joint.shapes.board.FunctionElement({ + id: id + }); + boardElement.attr('#label/text', label); + boardElement.attr('#type/text', type); + return boardElement; } stencilPaperEventListeners() { @@ -175,24 +232,36 @@ export class DesignerComponent implements OnInit { 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(); - - clonedShape.position(mouseupX - target.left - offset.x, mouseupY - target.top - offset.y); - this.boardGraph.addCell(clonedShape); + // const clonedShape = flyShape.clone(); + const type = flyShape.attributes.attrs.type; + console.log(type); + + //create board function element of the same type of palette function + //board function element is different in design from the palette function element + this.fuctionIdCounter++; + console.log(this.fuctionIdCounter); + const functionElementForBoard = + this.createFuctionElementForBoard("fucntion_" + this.fuctionIdCounter, 'execute', type); + + functionElementForBoard.position(mouseupX - target.left - offset.x, mouseupY - target.top - offset.y); + this.boardGraph.addCell(functionElementForBoard); const cellViewsBelow = - this.boardPaper.findViewsFromPoint(clonedShape.getBBox().center()); - + this.boardPaper.findViewsFromPoint(functionElementForBoard.getBBox().center()); + console.log(cellViewsBelow); if (cellViewsBelow.length) { let cellViewBelow; cellViewsBelow.forEach( cellItem => { - if (cellItem.model.id !== clonedShape.id) { + if (cellItem.model.id !== functionElementForBoard.id) { cellViewBelow = cellItem; } }); + // Prevent recursive embedding. - if (cellViewBelow && cellViewBelow.model.get('parent') !== clonedShape.id) { - cellViewBelow.model.embed(clonedShape); + if (cellViewBelow && cellViewBelow.model.get('parent') !== functionElementForBoard.id) { + console.log(cellViewBelow); + cellViewBelow.model.embed(functionElementForBoard); } + console.log(this.boardGraph); } } |