feat(grid-snapping): snap width and height on create first participant

Closes #1061

lib/features/grid-snapping/behavior/CreateParticipantBehavior.js

@@ -0,0 +1,36 @@
+import { is } from '../../../util/ModelUtil';
+
+var HIGHER_PRIORITY = 1750;
+
+
+export default function CreateParticipantBehavior(canvas, eventBus, gridSnapping) {
+  eventBus.on([
+    'create.start',
+    'shape.move.start'
+  ], HIGHER_PRIORITY, function(event) {
+    var context = event.context,
+        shape = context.shape,
+        rootElement = canvas.getRootElement();
+
+    if (!is(shape, 'bpmn:Participant') ||
+      !is(rootElement, 'bpmn:Process') ||
+      !rootElement.children.length) {
+      return;
+    }
+
+    var createConstraints = context.createConstraints;
+
+    if (!createConstraints) {
+      return;
+    }
+
+    shape.width = gridSnapping.snapValue(shape.width, { min: shape.width });
+    shape.height = gridSnapping.snapValue(shape.height, { min: shape.height });
+  });
+}
+
+CreateParticipantBehavior.$inject = [
+  'canvas',
+  'eventBus',
+  'gridSnapping'
+];

lib/features/grid-snapping/behavior/index.js

@@ -1,11 +1,14 @@
 import AutoPlaceBehavior from './AutoPlaceBehavior';
+import CreateParticipantBehavior from './CreateParticipantBehavior';
 import LayoutConnectionBehavior from './LayoutConnectionBehavior';
 
 export default {
   __init__: [
+    'gridSnappingAutoPlaceBehavior',
+    'gridSnappingCreateParticipantBehavior',
     'gridSnappingLayoutConnectionBehavior',
-    'gridSnappingAutoPlaceBehavior'
   ],
   gridSnappingAutoPlaceBehavior: [ 'type', AutoPlaceBehavior ],
+  gridSnappingCreateParticipantBehavior: [ 'type', CreateParticipantBehavior ],
   gridSnappingLayoutConnectionBehavior: [ 'type', LayoutConnectionBehavior ]
 };

lib/features/modeling/behavior/CreateParticipantBehavior.js

@@ -10,9 +10,12 @@ import { getBBox } from 'diagram-js/lib/util/Elements';
 
 import { assign } from 'min-dash';
 
+import { asTRBL } from 'diagram-js/lib/layout/LayoutUtil';
+
 var HORIZONTAL_PARTICIPANT_PADDING = 20,
-    VERTICAL_PARTICIPANT_PADDING = 20,
-    PARTICIPANT_BORDER_WIDTH = 30;
+    VERTICAL_PARTICIPANT_PADDING = 20;
+
+export var PARTICIPANT_BORDER_WIDTH = 30;
 
 var HIGH_PRIORITY = 2000;
 
@@ -167,11 +170,13 @@ function getParticipantBounds(shape, childrenBBox) {
 }
 
 function getParticipantCreateConstraints(shape, childrenBBox) {
+  childrenBBox = asTRBL(childrenBBox);
+
   return {
-    bottom: childrenBBox.y + shape.height / 2 - VERTICAL_PARTICIPANT_PADDING,
-    left: childrenBBox.x + childrenBBox.width - shape.width / 2 + HORIZONTAL_PARTICIPANT_PADDING,
-    top: childrenBBox.y + childrenBBox.height - shape.height / 2 + VERTICAL_PARTICIPANT_PADDING,
-    right: childrenBBox.x + shape.width / 2 - HORIZONTAL_PARTICIPANT_PADDING - PARTICIPANT_BORDER_WIDTH
+    bottom: childrenBBox.top + shape.height / 2 - VERTICAL_PARTICIPANT_PADDING,
+    left: childrenBBox.right - shape.width / 2 + HORIZONTAL_PARTICIPANT_PADDING,
+    top: childrenBBox.bottom - shape.height / 2 + VERTICAL_PARTICIPANT_PADDING,
+    right: childrenBBox.left + shape.width / 2 - HORIZONTAL_PARTICIPANT_PADDING - PARTICIPANT_BORDER_WIDTH
   };
 }
 

test/spec/features/grid-snapping/behavior/CreateParticipantBehavior.bpmn

@@ -0,0 +1,56 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<bpmn:definitions xmlns:bpmn="http://www.omg.org/spec/BPMN/20100524/MODEL" xmlns:bpmndi="http://www.omg.org/spec/BPMN/20100524/DI" xmlns:dc="http://www.omg.org/spec/DD/20100524/DC" xmlns:di="http://www.omg.org/spec/DD/20100524/DI" id="Definitions_1sgpq8p" targetNamespace="http://bpmn.io/schema/bpmn" exporter="Camunda Modeler" exporterVersion="3.1.0">
+  <bpmn:process id="Process_1" isExecutable="true">
+    <bpmn:startEvent id="StartEvent_1">
+      <bpmn:outgoing>SequenceFlow_1</bpmn:outgoing>
+    </bpmn:startEvent>
+    <bpmn:sequenceFlow id="SequenceFlow_1" sourceRef="StartEvent_1" targetRef="SubProcess_1" />
+    <bpmn:subProcess id="SubProcess_1">
+      <bpmn:incoming>SequenceFlow_1</bpmn:incoming>
+      <bpmn:outgoing>SequenceFlow_2</bpmn:outgoing>
+    </bpmn:subProcess>
+    <bpmn:endEvent id="EndEvent_1">
+      <bpmn:incoming>SequenceFlow_2</bpmn:incoming>
+    </bpmn:endEvent>
+    <bpmn:sequenceFlow id="SequenceFlow_2" sourceRef="SubProcess_1" targetRef="EndEvent_1" />
+    <bpmn:boundaryEvent id="BoundaryEvent_1" attachedToRef="SubProcess_1">
+      <bpmn:outgoing>SequenceFlow_3</bpmn:outgoing>
+    </bpmn:boundaryEvent>
+    <bpmn:endEvent id="EndEvent_2">
+      <bpmn:incoming>SequenceFlow_3</bpmn:incoming>
+    </bpmn:endEvent>
+    <bpmn:sequenceFlow id="SequenceFlow_3" sourceRef="BoundaryEvent_1" targetRef="EndEvent_2" />
+  </bpmn:process>
+  <bpmndi:BPMNDiagram id="BPMNDiagram_1">
+    <bpmndi:BPMNPlane id="BPMNPlane_1" bpmnElement="Process_1">
+      <bpmndi:BPMNShape id="_BPMNShape_StartEvent_2" bpmnElement="StartEvent_1">
+        <dc:Bounds x="5" y="187" width="36" height="36" />
+      </bpmndi:BPMNShape>
+      <bpmndi:BPMNEdge id="SequenceFlow_1ope89t_di" bpmnElement="SequenceFlow_1">
+        <di:waypoint x="41" y="205" />
+        <di:waypoint x="100" y="205" />
+      </bpmndi:BPMNEdge>
+      <bpmndi:BPMNShape id="SubProcess_0qd2wll_di" bpmnElement="SubProcess_1" isExpanded="true">
+        <dc:Bounds x="100" y="105" width="350" height="200" />
+      </bpmndi:BPMNShape>
+      <bpmndi:BPMNShape id="EndEvent_01vi313_di" bpmnElement="EndEvent_1">
+        <dc:Bounds x="509" y="187" width="36" height="36" />
+      </bpmndi:BPMNShape>
+      <bpmndi:BPMNEdge id="SequenceFlow_0lo6y23_di" bpmnElement="SequenceFlow_2">
+        <di:waypoint x="450" y="205" />
+        <di:waypoint x="509" y="205" />
+      </bpmndi:BPMNEdge>
+      <bpmndi:BPMNShape id="BoundaryEvent_0vmvyig_di" bpmnElement="BoundaryEvent_1">
+        <dc:Bounds x="257" y="287" width="36" height="36" />
+      </bpmndi:BPMNShape>
+      <bpmndi:BPMNShape id="EndEvent_1a5k354_di" bpmnElement="EndEvent_2">
+        <dc:Bounds x="343" y="369" width="36" height="36" />
+      </bpmndi:BPMNShape>
+      <bpmndi:BPMNEdge id="SequenceFlow_1lxbayl_di" bpmnElement="SequenceFlow_3">
+        <di:waypoint x="275" y="323" />
+        <di:waypoint x="275" y="387" />
+        <di:waypoint x="343" y="387" />
+      </bpmndi:BPMNEdge>
+    </bpmndi:BPMNPlane>
+  </bpmndi:BPMNDiagram>
+</bpmn:definitions>

test/spec/features/grid-snapping/behavior/CreateParticipantBehaviorSpec.js

@@ -0,0 +1,52 @@
+import {
+  bootstrapModeler,
+  inject
+} from 'test/TestHelper';
+
+import coreModule from 'lib/core';
+import createModule from 'diagram-js/lib/features/create';
+import gridSnappingModule from 'lib/features/grid-snapping';
+import modelingModule from 'lib/features/modeling';
+
+import { createCanvasEvent as canvasEvent } from '../../../../util/MockEvents';
+
+
+describe('features/grid-snapping - create participant', function() {
+
+  var diagramXML = require('./CreateParticipantBehavior.bpmn');
+
+  beforeEach(bootstrapModeler(diagramXML, {
+    modules: [
+      coreModule,
+      createModule,
+      gridSnappingModule,
+      modelingModule
+    ]
+  }));
+
+
+  it('should snap width and height', inject(
+    function(create, dragging, elementFactory, elementRegistry) {
+
+      // given
+      var process = elementRegistry.get('Process_1'),
+          processGfx = elementRegistry.getGraphics(process);
+
+      var participant = elementFactory.createParticipantShape();
+
+      // when
+      create.start(canvasEvent({ x: 100, y: 100 }), participant);
+
+      dragging.hover({ element: process, gfx: processGfx });
+
+      dragging.move(canvasEvent({ x: 100, y: 100 }));
+
+      dragging.end();
+
+      // then
+      expect(participant.width).to.equal(610);
+      expect(participant.height).to.equal(340);
+    }
+  ));
+
+});