ProcessMaker · velkymx · May 11, 2018 · May 11, 2018 · May 11, 2018
diff --git 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
@@ -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
@@ -3,91 +3,50 @@
  */
 
 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();
     }
 
     /**
      * Load element in SVG Object
      * @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
@@ -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
@@ -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()
+    })
+})