sartography
/
bpmn-js
mirror of https://github.com/sartography/bpmn-js.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

feat(grid-snapping): integrate auto resize 

Related to camunda/camunda-modeler#1344
Related to camunda/camunda-modeler#1349
This commit is contained in:
Philipp Fromme 2019-04-18 13:25:53 +02:00 committed by merge-me[bot]
parent 3b756e0725
commit fa2e472361
4 changed files with 163 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
lib/features/auto-resize/BpmnAutoResize.js
View File

@ -27,11 +27,11 @@ inherits(BpmnAutoResize, AutoResize);
* @param {djs.model.Shape} target
* @param {Object} newBounds
*/
BpmnAutoResize.prototype.resize = function(target, newBounds) {
BpmnAutoResize.prototype.resize = function(target, newBounds, hints) {
if (is(target, 'bpmn:Participant')) {
this._modeling.resizeLane(target, newBounds);
this._modeling.resizeLane(target, newBounds, null, hints);
} else {
this._modeling.resizeShape(target, newBounds);
this._modeling.resizeShape(target, newBounds, null, hints);
}
};

4
lib/features/modeling/behavior/ToggleElementCollapseBehaviour.js
View File

@ -119,7 +119,9 @@ export default function ToggleElementCollapseBehaviour(
newBounds = expandedBounds(shape, defaultSize);
}
modeling.resizeShape(shape, newBounds);
modeling.resizeShape(shape, newBounds, null, {
autoResize: shape.collapsed ? false : 'nwse'
});
});
}

38
test/spec/features/grid-snapping/BpmnGridSnapping.bpmn
View File

@ -8,7 +8,20 @@
<bpmn:association id="Association_0punwjh" sourceRef="Participant_1" targetRef="TextAnnotation_1" />
</bpmn:collaboration>
<bpmn:process id="Process_1" isExecutable="true">
<bpmn:subProcess id="SubProcess_1" name="SubProcess_1" />
<bpmn:subProcess id="SubProcess_1" name="SubProcess_1">
<bpmn:task id="Task_1" name="Task_1">
<bpmn:incoming>SequenceFlow_0e7hjjz</bpmn:incoming>
<bpmn:outgoing>SequenceFlow_0jhtpzs</bpmn:outgoing>
</bpmn:task>
<bpmn:startEvent id="StartEvent_1" name="StartEvent_1">
<bpmn:outgoing>SequenceFlow_0e7hjjz</bpmn:outgoing>
</bpmn:startEvent>
<bpmn:endEvent id="EndEvent_1" name="EndEvent_1">
<bpmn:incoming>SequenceFlow_0jhtpzs</bpmn:incoming>
</bpmn:endEvent>
<bpmn:sequenceFlow id="SequenceFlow_0e7hjjz" sourceRef="StartEvent_1" targetRef="Task_1" />
<bpmn:sequenceFlow id="SequenceFlow_0jhtpzs" sourceRef="Task_1" targetRef="EndEvent_1" />
</bpmn:subProcess>
</bpmn:process>
<bpmndi:BPMNDiagram id="BPMNDiagram_1">
<bpmndi:BPMNPlane id="BPMNPlane_1" bpmnElement="Collaboration_1">
@ -25,6 +38,29 @@
<di:waypoint x="646" y="100" />
<di:waypoint x="706" y="70" />
</bpmndi:BPMNEdge>
<bpmndi:BPMNShape id="Task_10ndd1c_di" bpmnElement="Task_1">
<dc:Bounds x="273" y="180" width="100" height="80" />
</bpmndi:BPMNShape>
<bpmndi:BPMNShape id="StartEvent_0ck0xbl_di" bpmnElement="StartEvent_1">
<dc:Bounds x="190" y="202" width="36" height="36" />
<bpmndi:BPMNLabel>
<dc:Bounds x="176" y="245" width="64" height="14" />
</bpmndi:BPMNLabel>
</bpmndi:BPMNShape>
<bpmndi:BPMNShape id="EndEvent_0fx80e1_di" bpmnElement="EndEvent_1">
<dc:Bounds x="420" y="202" width="36" height="36" />
<bpmndi:BPMNLabel>
<dc:Bounds x="408" y="245" width="60" height="14" />
</bpmndi:BPMNLabel>
</bpmndi:BPMNShape>
<bpmndi:BPMNEdge id="SequenceFlow_0e7hjjz_di" bpmnElement="SequenceFlow_0e7hjjz">
<di:waypoint x="226" y="220" />
<di:waypoint x="273" y="220" />
</bpmndi:BPMNEdge>
<bpmndi:BPMNEdge id="SequenceFlow_0jhtpzs_di" bpmnElement="SequenceFlow_0jhtpzs">
<di:waypoint x="373" y="220" />
<di:waypoint x="420" y="220" />
</bpmndi:BPMNEdge>
</bpmndi:BPMNPlane>
</bpmndi:BPMNDiagram>
</bpmn:definitions>

122
test/spec/features/grid-snapping/BpmnGridSnappingSpec.js
View File

@ -13,7 +13,13 @@ import {
createCanvasEvent as canvasEvent
} from '../../../util/MockEvents';
import { isString } from 'min-dash';
import { getMid } from 'diagram-js/lib/layout/LayoutUtil';
import {
isString,
pick,
assign
} from 'min-dash';
var LOW_PRIORITY = 500;
@ -43,7 +49,7 @@ describe('features/grid-snapping', function() {
}));
describe('snap top-left', function() {
describe('snap top-left on move', function() {
it('participant', inject(function(dragging, eventBus, move) {
@ -151,6 +157,114 @@ describe('features/grid-snapping', function() {
});
describe('auto resize <nwse> on toggle collapse', function() {
describe('collapsing', function() {
it('participant (no auto resize)', inject(function(bpmnReplace) {
// given
var bounds = assign(
getBounds(participant),
{ height: 100 }
);
// when
var collapsedParticipant = bpmnReplace.replaceElement(participant,
{
type: 'bpmn:Participant',
isExpanded: false
}
);
// then
expect(getBounds(collapsedParticipant)).to.eql(bounds);
}));
it('sub process (no auto resize)', inject(function(bpmnReplace) {
// given
var mid = getMid(subProcess);
// when
var collapsedSubProcess = bpmnReplace.replaceElement(subProcess,
{
type: 'bpmn:SubProcess',
isExpanded: false
}
);
// then
expect(getMid(collapsedSubProcess)).to.eql(mid);
expect(collapsedSubProcess).to.include({
width: 100,
height: 80
});
}));
});
describe('expanding', function() {
it('participant (auto resize <nwse>)', inject(function(bpmnReplace) {
// given
var bounds = getBounds(participant);
var collapsedParticipant = bpmnReplace.replaceElement(participant,
{
type: 'bpmn:Participant',
isExpanded: false
}
);
// when
var expandedParticipant = bpmnReplace.replaceElement(collapsedParticipant,
{
type: 'bpmn:Participant',
isExpanded: true
}
);
// then
expect(getBounds(expandedParticipant)).to.eql(bounds);
}));
it('sub process (auto resize <nwse>)', inject(function(bpmnReplace) {
// given
var collapsedSubProcess = bpmnReplace.replaceElement(subProcess,
{
type: 'bpmn:SubProcess',
isExpanded: false
}
);
// when
var expandedSubProcess = bpmnReplace.replaceElement(collapsedSubProcess,
{
type: 'bpmn:SubProcess',
isExpanded: true
}
);
// then
expect(expandedSubProcess).to.include({
x: 140,
y: 120,
width: 360,
height: 210
});
}));
});
});
});
// helpers //////////
@ -215,3 +329,7 @@ function position(event) {
y: event.y
};
}
function getBounds(shape) {
return pick(shape, [ 'x', 'y', 'width', 'height' ]);
}