feat(space-tool): add/remove space locally when pressing shift

Related to bpmn-io/bpmn-js#557
bpmn-io · Oct 9, 2023 · cea67d9 · cea67d9
1 parent 282b844
commit cea67d9
Show file tree

Hide file tree

Showing 2 changed files with 178 additions and 3 deletions.
diff --git a/lib/features/space-tool/SpaceTool.js b/lib/features/space-tool/SpaceTool.js
@@ -14,7 +14,10 @@ import { getBBox } from '../../util/Elements';
 
 import { getDirection } from './SpaceUtil';
 
-import { hasPrimaryModifier } from '../../util/Mouse';
+import {
+  hasPrimaryModifier,
+  hasSecondaryModifier
+} from '../../util/Mouse';
 
 import { set as setCursor } from '../../util/Cursor';
 
@@ -240,7 +243,14 @@ SpaceTool.prototype.init = function(event, context) {
 
   var root = this._canvas.getRootElement();
 
-  var children = selfAndAllChildren(root, true);
+  if (hasSecondaryModifier(event) && event.hover) {
+    root = event.hover;
+  }
+
+  var children = [
+    ...selfAndAllChildren(root, true),
+    ...(root.attachers || [])
+  ];
 
   var elements = this.calculateAdjustments(children, axis, delta, start);
 

diff --git a/test/spec/features/space-tool/SpaceToolSpec.js b/test/spec/features/space-tool/SpaceToolSpec.js
@@ -562,7 +562,7 @@ describe('features/space-tool', function() {
   });
 
 
-  describe('create/remove space', function() {
+  describe('create/remove space - global', function() {
 
     beforeEach(bootstrapDiagram({
       modules: [
@@ -874,6 +874,171 @@ describe('features/space-tool', function() {
   });
 
 
+  describe.only('create/remove space - local', function() {
+
+    beforeEach(bootstrapDiagram({
+      modules: [
+        modelingModule,
+        rulesModule,
+        spaceToolModule
+      ]
+    }));
+
+    var childShape,
+        childShape2,
+        grandChildShape;
+
+    beforeEach(inject(function(canvas, elementFactory) {
+      childShape = elementFactory.createShape({
+        id: 'child-resizable',
+        x: 100,
+        y: 100,
+        width: 200,
+        height: 100
+      });
+
+      canvas.addShape(childShape);
+
+      childShape2 = elementFactory.createShape({
+        id: 'child2-resizable',
+        x: 100,
+        y: 300,
+        width: 200,
+        height: 100
+      });
+
+      canvas.addShape(childShape2);
+
+      grandChildShape = elementFactory.createShape({
+        id: 'grandChild',
+        x: 225,
+        y: 325,
+        width: 50,
+        height: 50
+      });
+
+      canvas.addShape(grandChildShape, childShape2);
+    }));
+
+    beforeEach(inject(function(dragging) {
+      dragging.setOptions({ manual: true });
+    }));
+
+
+    it('should create space locally', inject(
+      function(dragging, spaceTool) {
+
+        // given
+        spaceTool.activateMakeSpace(canvasEvent({ x: 110, y: 0 }));
+
+        dragging.hover({
+          element: childShape2
+        });
+
+        // when
+        dragging.move(canvasEvent({ x: 210, y: 0 }, {
+          button: 0,
+          shiftKey: true
+        }));
+
+        dragging.end();
+
+        // then
+        expect(childShape.x).to.equal(100);
+        expect(childShape.y).to.equal(100);
+        expect(childShape.width).to.equal(200);
+        expect(childShape.height).to.equal(100);
+
+        expect(childShape2.x).to.equal(100);
+        expect(childShape2.y).to.equal(300);
+        expect(childShape2.width).to.equal(300);
+        expect(childShape2.height).to.equal(100);
+
+        expect(grandChildShape.x).to.equal(325);
+        expect(grandChildShape.y).to.equal(325);
+        expect(grandChildShape.width).to.equal(50);
+        expect(grandChildShape.height).to.equal(50);
+      }
+    ));
+
+
+    it('should remove space locally', inject(
+      function(dragging, spaceTool) {
+
+        // given
+        spaceTool.activateMakeSpace(canvasEvent({ x: 210, y: 0 }));
+
+        dragging.hover({
+          element: childShape2
+        });
+
+        // when
+        dragging.move(canvasEvent({ x: 110, y: 0 }, {
+          button: 0,
+          shiftKey: true
+        }));
+
+        dragging.end();
+
+        // then
+        expect(childShape.x).to.equal(100);
+        expect(childShape.y).to.equal(100);
+        expect(childShape.width).to.equal(200);
+        expect(childShape.height).to.equal(100);
+
+        expect(childShape2.x).to.equal(100);
+        expect(childShape2.y).to.equal(300);
+        expect(childShape2.width).to.equal(100);
+        expect(childShape2.height).to.equal(100);
+
+        expect(grandChildShape.x).to.equal(125);
+        expect(grandChildShape.y).to.equal(325);
+        expect(grandChildShape.width).to.equal(50);
+        expect(grandChildShape.height).to.equal(50);
+      }
+    ));
+
+
+    it('should move attachers', inject(
+      function(canvas, dragging, elementFactory, spaceTool) {
+
+        // given
+        var attacher = elementFactory.createShape({
+          id: 'attacher',
+          x: 275,
+          y: 375,
+          width: 50,
+          height: 50,
+          host: childShape2
+        });
+
+        canvas.addShape(attacher);
+
+        spaceTool.activateMakeSpace(canvasEvent({ x: 110, y: 0 }));
+
+        dragging.hover({
+          element: childShape2
+        });
+
+        // when
+        dragging.move(canvasEvent({ x: 210, y: 0 }, {
+          button: 0,
+          shiftKey: true
+        }));
+
+        dragging.end();
+
+        // then
+        expect(attacher.x).to.equal(375);
+        expect(attacher.y).to.equal(375);
+        expect(attacher.width).to.equal(50);
+        expect(attacher.height).to.equal(50);
+      }
+    ))
+
+  });
+
+
   describe('external labels', function() {
 
     beforeEach(bootstrapDiagram({