From 11072c92de3aec370e93c21134621ac993f601bc Mon Sep 17 00:00:00 2001 From: Ahmed Abbas Date: Mon, 6 Jan 2020 17:52:39 +0200 Subject: 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 Change-Id: Id7528404ba70ca05561127c22e8bf4d27766bb91 --- .../packages/designer/designer.component.html | 2 +- .../packages/designer/designer.component.ts | 107 +++++-- .../designer/jointjs/elements/action.element.ts | 64 ++++ .../jointjs/elements/board.function.element.ts | 327 +++++++++++++++++++++ .../jointjs/elements/palette.function.element.ts | 286 ++++++++++++++++++ .../packages/designer/palette.function.element.ts | 108 ------- 6 files changed, 766 insertions(+), 128 deletions(-) create mode 100644 cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/jointjs/elements/action.element.ts create mode 100644 cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/jointjs/elements/board.function.element.ts create mode 100644 cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/jointjs/elements/palette.function.element.ts delete mode 100644 cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/palette.function.element.ts (limited to 'cds-ui/designer-client/src') diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/designer.component.html b/cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/designer.component.html index c0ea41dbc..8ec735aec 100644 --- a/cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/designer.component.html +++ b/cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/designer.component.html @@ -70,7 +70,7 @@

Actions

- +
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); } } diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/jointjs/elements/action.element.ts b/cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/jointjs/elements/action.element.ts new file mode 100644 index 000000000..212905814 --- /dev/null +++ b/cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/jointjs/elements/action.element.ts @@ -0,0 +1,64 @@ +import * as joint from 'jointjs'; +/** + * please refer to documentation in file palette.function.element.ts to get more details + * about how to create new element type and define it in typescript + */ + +declare module 'jointjs' { + namespace shapes { + // add new module called "app" under the already existing "shapes" modeule inside jointjs + export namespace app { + class ActionElement extends joint.shapes.standard.Rectangle { + } + } + } +} + +const rectWidth = 616; +const rectHeight = 381; +// custom element implementation +// https://resources.jointjs.com/tutorials/joint/tutorials/custom-elements.html#markup +const ActionElement = joint.shapes.standard.Rectangle.define('app.ActionElement', { + size: {width: rectWidth, height: rectHeight} +}, + { + markup: + ` + + + + + + + + + + + + + + + + + + + + Action 1 + + + + + ` +}); + +Object.assign(joint.shapes, { + app: { + ActionElement + } +}); diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/jointjs/elements/board.function.element.ts b/cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/jointjs/elements/board.function.element.ts new file mode 100644 index 000000000..42813075c --- /dev/null +++ b/cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/jointjs/elements/board.function.element.ts @@ -0,0 +1,327 @@ +import * as joint from 'jointjs'; + +declare module 'jointjs' { + namespace shapes { + // add new module called "app" under the already existing "shapes" modeule inside jointjs + export namespace board { + class FunctionElement extends joint.shapes.standard.Rectangle { + } + } + } +} + +const rectWidth = 260; +const rectHeight = 150; +const FunctionElement = joint.shapes.standard.Rectangle.define('board.FunctionElement', { + size: { width: rectWidth, height: rectHeight }, + attrs: { + icon: { + 'xlink:href': 'http://placehold.it/16x16' + }, + type: '' + } +}, { + markup: + ` + + + + + + + + + + + + execute + + + + + + + + + + + ` +}); + +Object.assign(joint.shapes, { + board: { + FunctionElement + } +}); diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/jointjs/elements/palette.function.element.ts b/cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/jointjs/elements/palette.function.element.ts new file mode 100644 index 000000000..896ecaa88 --- /dev/null +++ b/cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/jointjs/elements/palette.function.element.ts @@ -0,0 +1,286 @@ +import * as joint from 'jointjs'; + +/** + * The function element in the palette should contain image and text with style- that is why + * it requires a custom element. + * The following code declares a type for typescript to accept "app.FunctionElement" + * and create an element implementation , then joins the app module inside shapes module for javascript to work. + * please refer to the official example : + * https://github.com/clientIO/joint/blob/master/demo/ts-demo/custom.ts + */ + +declare module 'jointjs' { + namespace shapes { + // add new module called "app" under the already existing "shapes" modeule inside jointjs + export namespace palette { + class FunctionElement extends joint.shapes.standard.Rectangle { + } + } + } +} + +const rectWidth = 260; +const rectHeight = 60; +// custom element implementation +// https://resources.jointjs.com/tutorials/joint/tutorials/custom-elements.html#markup +const FunctionElement = joint.shapes.standard.Rectangle.define('palette.FunctionElement', { + size: { width: rectWidth, height: rectHeight }, + attrs: { + icon: { + 'xlink:href': 'http://placehold.it/16x16' + }, + type: '' + } +}, { + markup: + ` + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + ` + // [{ + // tagName: 'rect', + // selector: 'body', + // }, { + // tagName: 'text', + // selector: 'label' + // }, { + // tagName: 'image', + // selector: 'icon' + // }, { + // tagName: 'image', + // selector: 'drag-handle' + // } + // ] +}); + +Object.assign(joint.shapes, { + palette: { + FunctionElement + } +}); diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/palette.function.element.ts b/cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/palette.function.element.ts deleted file mode 100644 index 6f0ba8b5d..000000000 --- a/cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/palette.function.element.ts +++ /dev/null @@ -1,108 +0,0 @@ -import * as joint from 'jointjs'; - -/** - * The function element in the palette should contain image and text with style- that is why - * it requires a custom element. - * The following code declares a type for typescript to accept "app.FunctionElement" - * and create an element implementation , then joins the app module inside shapes module for javascript to work. - * please refer to the official example : - * https://github.com/clientIO/joint/blob/master/demo/ts-demo/custom.ts - */ - -declare module 'jointjs' { - namespace shapes { - // add new module called "app" under the already existing "shapes" modeule inside jointjs - export namespace app { - class FunctionElement extends joint.shapes.standard.Rectangle { - } - } - } -} - -const rectWidth = 260; -const rectHeight = 60; -// custom element implementation -// https://resources.jointjs.com/tutorials/joint/tutorials/custom-elements.html#markup -const FunctionElement = joint.shapes.standard.Rectangle.define('app.FunctionElement', { - size: { width: rectWidth, height: rectHeight }, - attrs: { - icon: { - 'xlink:href': 'http://placehold.it/16x16' - } - } -}, { - markup: - ` - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - ` - // [{ - // tagName: 'rect', - // selector: 'body', - // }, { - // tagName: 'text', - // selector: 'label' - // }, { - // tagName: 'image', - // selector: 'icon' - // }, { - // tagName: 'image', - // selector: 'drag-handle' - // } - // ] -}); - -Object.assign(joint.shapes, { - app: { - FunctionElement - } -}); -- cgit 1.2.3-korg