diff --git a/resources/assets/designer/diagram/elements.js b/resources/assets/designer/diagram/elements.js index d3b64701cd..06220eb5df 100644 --- a/resources/assets/designer/diagram/elements.js +++ b/resources/assets/designer/diagram/elements.js @@ -1,4 +1,5 @@ import {StartEvent} from "./events/startEvent"; +import {EndEvent} from "./events/endEvent"; import {Task} from "./tasks/Task"; -export const Elements = Object.assign({}, {StartEvent, Task}); +export const Elements = Object.assign({}, {StartEvent, EndEvent, Task}); diff --git a/resources/assets/designer/diagram/events/endEvent.js b/resources/assets/designer/diagram/events/endEvent.js new file mode 100644 index 0000000000..a2d438f052 --- /dev/null +++ b/resources/assets/designer/diagram/events/endEvent.js @@ -0,0 +1,61 @@ +import {EventShape} from "./eventShape"; + +/** + * End Event Class + */ +export class EndEvent extends EventShape { + constructor(options, svg) { + super(svg); + this.options = { + id: null, + marker: "EMPTY", + name: null, + x: 100, + y: 100, + scale: 40 + }; + this.config(options); + } + + /** + * Get shape base to render + * @param type + * @param marker + */ + getBase(type, marker) { + const x = this.options.x + this.options.x * 0.043; + const y = this.options.y + this.options.y * 0.043; + const bases = { + "bpmn:EndEvent": { + EMPTY: { + path: "m496 48c-203-1-394 153-437 351-41 174 33 368 181 470 143 103 348 111 497 15 150-91 238-275 210-449-26-181-170-339-350-376-33-7-67-11-101-11z m10 142c150-1 287 123 302 271 19 142-72 291-210 334-134 45-296-13-366-138-77-129-45-313 78-403 56-43 126-66 196-64z", + options: { + x, + y, + scale: "s0.04", + attr: { + stroke: "#000", + strokeWidth: 0 + } + } + } + } + }; + return bases[type][marker]; + } + + /** + * Get shape fill to render in SVG + * @returns {{x: number, y, attr: {fill: string}}} + */ + getBaseFill() { + const baseFill = { + x: this.options.x, + y: this.options.y, + attr: { + fill: "#FFFFFF" + } + }; + return baseFill; + } +} diff --git a/resources/assets/designer/diagram/events/eventShape.js b/resources/assets/designer/diagram/events/eventShape.js index 8a709000f9..e6d20b485d 100644 --- a/resources/assets/designer/diagram/events/eventShape.js +++ b/resources/assets/designer/diagram/events/eventShape.js @@ -3,21 +3,9 @@ */ export class EventShape { - constructor (svg) { + constructor(svg) { this.svg = svg; this.shape = this.svg.group(); - this.x = 100; - this.y = 100; - this.scale = 40; - this.attr = { - fill: "#B4DCCB", - stroke: "#018A4F", - strokeWidth: 2 - }; - this.animateOptions = {r: this.scale}; - this.animationTime = 10; - this.inputConnectors = new Map(); - this.outputConnectors = new Map(); } /** @@ -25,69 +13,40 @@ export class EventShape { * @param path * @param options */ - loadElement (path, options) { + loadElement(path, options) { return this.svg.path(path) .transform(`${options.scale}, ${options.x}, ${options.y}`) .attr(options.attr); } /** - * Init config + * Merge local options with arguments options * @param options + * @returns {EventShape} */ - config (options) { - this.x = +options.x - 4; - this.y = +options.y - 4; - this.scale = options.width || this.scale; - this.options = options; - this.attr = options.attr || this.attr; - this.attr.id = options.id; - this.animateOptions.r = +options.width / 2 || this.scale; - this.animateOptions = options.animateOptions || this.animateOptions; - this.animationTime = options.animationTime || this.animationTime; - } - - /** - * Get shape base to render - * @param type - * @param marker - */ - getBase (type, marker) { - const x = this.x + this.x * 0.043; - const y = this.y + this.y * 0.043; - const bases = { - "bpmn:StartEvent": { - EMPTY: { - path: "m496 48c-176 0-345 113-412 276-70 161-34 362 89 487 119 128 314 175 477 115 169-58 294-224 301-403 12-176-92-351-250-428-62-31-132-47-201-47-1 0-3 0-4 0z m12 49c173 1 335 126 380 293 47 159-17 344-155 439-143 105-354 97-489-18-136-109-185-309-115-468 60-147 212-248 371-246 3 0 6 0 8 0z", - options: { - x, - y, - scale: "s0.04", - attr: { - stroke: "#000", - strokeWidth: 0 - } - } - } - } - }; - return bases[type][marker]; + config(options) { + this.options = Object.assign({}, this.options, options) + return this } /** * Render the element in SVG */ - render () { + render() { let element = this.getBase( this.options.$type, this.options.eventDefinitions ? this.options.eventDefinitions[0].$type : this.options.marker ); - let rec = this.svg.circle(this.x + this.scale / 2, this.y + this.scale / 2, this.scale / 2).attr({fill: "#FFFFFF"}); - let border = this.loadElement( + + let elementFill = this.getBaseFill(); + + let shape = this.loadElement( element.path, element.options ); - let group = this.svg.group(rec, border); + let shapeFill = this.svg.circle(elementFill.x + this.options.scale / 2, elementFill.y + this.options.scale / 2, this.options.scale / 2).attr(elementFill.attr); + + let group = this.svg.group(shapeFill, shape); group.attr({ id: this.options.id }); diff --git a/resources/assets/designer/diagram/events/startEvent.js b/resources/assets/designer/diagram/events/startEvent.js index 4e97469060..feb69aac68 100644 --- a/resources/assets/designer/diagram/events/startEvent.js +++ b/resources/assets/designer/diagram/events/startEvent.js @@ -1,17 +1,58 @@ import {EventShape} from "./eventShape"; export class StartEvent extends EventShape { - constructor (options, svg) { + constructor(options, svg) { super(svg); - this.type = options.type; - this.name = options.name || ""; - this.options = options; - options.attr = { - fill: "#B4DCCB", - stroke: "#018A4F", - strokeWidth: 2 + this.options = { + id: null, + marker: "EMPTY", + name: null, + x: 100, + y: 100, + scale: 40 }; - options.marker = "EMPTY"; this.config(options); } + + /** + * Get shape base to render + * @param type + * @param marker + */ + getBase(type, marker) { + const x = this.options.x + this.options.x * 0.043; + const y = this.options.y + this.options.y * 0.043; + const bases = { + "bpmn:StartEvent": { + EMPTY: { + path: "m496 48c-176 0-345 113-412 276-70 161-34 362 89 487 119 128 314 175 477 115 169-58 294-224 301-403 12-176-92-351-250-428-62-31-132-47-201-47-1 0-3 0-4 0z m12 49c173 1 335 126 380 293 47 159-17 344-155 439-143 105-354 97-489-18-136-109-185-309-115-468 60-147 212-248 371-246 3 0 6 0 8 0z", + options: { + x, + y, + scale: "s0.04", + attr: { + stroke: "#018A4F", + strokeWidth: 0 + } + } + } + } + }; + return bases[type][marker]; + } + + /** + * Get shape fill to render in SVG + * @returns {{x: number, y, attr: {fill: string}}} + */ + getBaseFill() { + const baseFill = { + x: this.options.x, + y: this.options.y, + attr: { + fill: "#FFFFFF" + } + }; + return baseFill; + } } diff --git a/tests/js/designer/diagram/endEvent.test.js b/tests/js/designer/diagram/endEvent.test.js new file mode 100644 index 0000000000..3d2c48ad22 --- /dev/null +++ b/tests/js/designer/diagram/endEvent.test.js @@ -0,0 +1,63 @@ +import {mount, shallow} from '@vue/test-utils' +import {Elements} from '../../../../resources/assets/designer/diagram/elements' + +let svg +const mockGroup = jest.fn(() => svg); +const mockAdd = jest.fn(() => svg); +const mockDrag = jest.fn(() => svg); +const mockRect = jest.fn(() => svg); +const mockAttr = jest.fn(() => svg); +const mockPath = jest.fn(() => svg); +const mockTrans = jest.fn(() => svg); +const mockCircle = jest.fn(() => svg); + +svg = { + group: mockGroup, + add: mockAdd, + drag: mockDrag, + rect: mockRect, + attr: mockAttr, + path: mockPath, + transform: mockTrans, + circle: mockCircle +} +mockAdd.mockReturnValue(svg) +mockGroup.mockReturnValue(svg) +mockRect.mockReturnValue(svg) +mockAttr.mockReturnValue(svg) +mockPath.mockReturnValue(svg) +mockTrans.mockReturnValue(svg) +mockCircle.mockReturnValue(svg) + +describe('Task ', () => { + let eEvent + + beforeEach(() => { + eEvent = new Elements["EndEvent"]( + { + $type: "bpmn:EndEvent", + id: "end1", + name: "End Event 1", + moddleElement: {} + }, + svg + ); + }) + + it('config() - verify the merge of options', () => { + expect(eEvent.options).toEqual({ + "$type": "bpmn:EndEvent", + "id": "end1", + "marker": "EMPTY", + "moddleElement": {}, + "name": "End Event 1", + "scale": 40, + "x": 100, + "y": 100 + }); + }) + + it('render() - Verify if use the library snap svg', () => { + eEvent.render() + }) +}) \ No newline at end of file