Skip to content

Commit

Permalink
feat(create): allow constraints
Browse files Browse the repository at this point in the history 
Related to camunda/camunda-modeler#1290
  • Loading branch information
@philippfromme
philippfromme committed May 20, 2019
1 parent fcc257c commit 1f3b41c
Show file tree
Hide file tree
Showing 2 changed files with 138 additions and 19 deletions.
68 changes: 56 additions & 12 deletions lib/features/create/Create.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,10 +13,14 @@ import {
remove as svgRemove
} from 'tiny-svg';

import { assign } from 'min-dash';

import {
translate
} from '../../util/SvgTransformUtil';

import { Shape } from '../../model';


/**
* Adds the ability to create new shapes via drag and drop.
Expand Down Expand Up @@ -165,13 +169,14 @@ export default function Create(
// event handlers

eventBus.on('create.move', function(event) {

var context = event.context,
hover = event.hover,
shape = context.shape,
source = context.source,
canExecute;

ensureConstraints(event);

var position = {
x: event.x,
y: event.y
Expand Down Expand Up @@ -223,16 +228,19 @@ export default function Create(
target = context.target,
canExecute = context.canExecute,
attach = canExecute && canExecute.attach,
connect = canExecute && canExecute.connect,
position = {
x: event.x,
y: event.y
};
connect = canExecute && canExecute.connect;

if (!canExecute) {
return false;
}

ensureConstraints(event);

var position = {
x: event.x,
y: event.y
};

if (connect) {
// invoke append if connect is set via rules
shape = modeling.appendShape(source, shape, position, target, {
Expand Down Expand Up @@ -264,17 +272,26 @@ export default function Create(

// API

this.start = function(event, shape, source) {
this.start = function(event, shape, sourceOrContext) {
var context;

if (!sourceOrContext || sourceOrContext instanceof Shape) {
context = {
shape: shape,
source: sourceOrContext
};
} else {
context = assign({
shape: shape
}, sourceOrContext);
}

dragging.init(event, 'create', {
cursor: 'grabbing',
autoActivate: true,
data: {
shape: shape,
context: {
shape: shape,
source: source
}
context: context
}
});
};
Expand All @@ -288,4 +305,31 @@ Create.$inject = [
'canvas',
'styles',
'graphicsFactory'
];
];

// helpers //////////

function ensureConstraints(event) {
var context = event.context,
createConstraints = context.createConstraints;

if (!createConstraints) {
return;
}

if (createConstraints.left) {
event.x = Math.max(event.x, createConstraints.left);
}

if (createConstraints.right) {
event.x = Math.min(event.x, createConstraints.right);
}

if (createConstraints.top) {
event.y = Math.max(event.y, createConstraints.top);
}

if (createConstraints.bottom) {
event.y = Math.min(event.y, createConstraints.bottom);
}
}
89 changes: 82 additions & 7 deletions test/spec/features/create/CreateSpec.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -19,6 +19,7 @@ import {
classes as svgClasses
} from 'tiny-svg';

import { getMid } from 'lib/layout/LayoutUtil';

var testModules = [
createModule,
Expand Down Expand Up @@ -103,7 +104,7 @@ describe('features/create - Create', function() {

describe('basics', function() {

it('should create', inject(function(create, elementRegistry, elementFactory, dragging) {
it('should create', inject(function(create, elementRegistry, dragging) {

// given
var parentGfx = elementRegistry.getGraphics('parentShape');
Expand All @@ -127,7 +128,7 @@ describe('features/create - Create', function() {
}));


it('should append', inject(function(create, elementRegistry, elementFactory, dragging) {
it('should append', inject(function(create, elementRegistry, dragging) {

// given
var parentGfx = elementRegistry.getGraphics('parentShape');
Expand All @@ -152,7 +153,7 @@ describe('features/create - Create', function() {
}));


it('should attach', inject(function(create, elementRegistry, elementFactory, dragging) {
it('should attach', inject(function(create, elementRegistry, dragging) {

// given
var hostShapeGfx = elementRegistry.getGraphics('hostShape');
Expand All @@ -172,7 +173,7 @@ describe('features/create - Create', function() {
}));


it('should append + attach', inject(function(create, elementRegistry, elementFactory, dragging) {
it('should append + attach', inject(function(create, elementRegistry, dragging) {

// given
var hostShapeGfx = elementRegistry.getGraphics('hostShape');
Expand All @@ -199,7 +200,7 @@ describe('features/create - Create', function() {

describe('visuals', function() {

it('should add visuals', inject(function(create, elementRegistry, dragging) {
it('should add visuals', inject(function(create, dragging) {

// when
create.start(canvasEvent({ x: 50, y: 50 }), newShape);
Expand All @@ -213,7 +214,7 @@ describe('features/create - Create', function() {
}));


it('should remove visuals', inject(function(create, elementRegistry, dragging, eventBus) {
it('should remove visuals', inject(function(create, elementRegistry, dragging) {
var parentGfx = elementRegistry.getGraphics('parentShape');

// when
Expand All @@ -236,7 +237,7 @@ describe('features/create - Create', function() {

describe('rules', function() {

it('should not allow shape create', inject(function(canvas, create, elementRegistry, dragging) {
it('should not allow shape create', inject(function(create, elementRegistry, dragging) {
// given
var targetGfx = elementRegistry.getGraphics('rootShape');

Expand Down Expand Up @@ -433,4 +434,78 @@ describe('features/create - Create', function() {
});
});


describe('constraints', function() {

beforeEach(inject(function(create, dragging, elementRegistry) {
// given
var parentGfx = elementRegistry.getGraphics('parentShape');

// when
create.start(canvasEvent({ x: 0, y: 0 }), newShape, {
createConstraints: {
top: 10,
right: 110,
bottom: 110,
left: 10
}
});

dragging.hover({ element: parentShape, gfx: parentGfx });
}));


it('top left', inject(function(dragging, elementRegistry) {

dragging.move(canvasEvent({ x: 0, y: 0 }));

dragging.end();

var createdShape = elementRegistry.get('newShape');

// then
expect(getMid(createdShape)).to.eql({ x: 10, y: 10 });
}));


it('top right', inject(function(dragging, elementRegistry) {

dragging.move(canvasEvent({ x: 120, y: 0 }));

dragging.end();

var createdShape = elementRegistry.get('newShape');

// then
expect(getMid(createdShape)).to.eql({ x: 110, y: 10 });
}));


it('left bottom', inject(function(dragging, elementRegistry) {

dragging.move(canvasEvent({ x: 0, y: 120 }));

dragging.end();

var createdShape = elementRegistry.get('newShape');

// then
expect(getMid(createdShape)).to.eql({ x: 10, y: 110 });
}));


it('right bottom', inject(function(dragging, elementRegistry) {

dragging.move(canvasEvent({ x: 120, y: 120 }));

dragging.end();

var createdShape = elementRegistry.get('newShape');

// then
expect(getMid(createdShape)).to.eql({ x: 110, y: 110 });
}));

});

});

0 comments on commit 1f3b41c

Please sign in to comment.