feat: use #scrollIntoView to make elements visible

* scroll auto-placed elements into view * use centralized method in SearchPad related to camunda/camunda-modeler#1249
bpmn-io · Apr 23, 2021 · 9171f4f · 9171f4f
1 parent 0129993
commit 9171f4f
Show file tree

Hide file tree

Showing 4 changed files with 39 additions and 32 deletions.
diff --git a/lib/features/auto-place/AutoPlace.js b/lib/features/auto-place/AutoPlace.js
@@ -15,7 +15,7 @@ var LOW_PRIORITY = 100;
  * @param {EventBus} eventBus
  * @param {Modeling} modeling
  */
-export default function AutoPlace(eventBus, modeling) {
+export default function AutoPlace(eventBus, modeling, canvas) {
 
   eventBus.on('autoPlace', LOW_PRIORITY, function(context) {
     var shape = context.shape,
@@ -24,6 +24,10 @@ export default function AutoPlace(eventBus, modeling) {
     return getNewShapePosition(source, shape);
   });
 
+  eventBus.on('autoPlace.end', function(event) {
+    canvas.scrollToElement(event.shape);
+  });
+
   /**
    * Append shape to source at appropriate position.
    *
@@ -59,7 +63,8 @@ export default function AutoPlace(eventBus, modeling) {
 
 AutoPlace.$inject = [
   'eventBus',
-  'modeling'
+  'modeling',
+  'canvas'
 ];
 
 // helpers //////////

diff --git a/lib/features/search-pad/SearchPad.js b/lib/features/search-pad/SearchPad.js
@@ -387,7 +387,7 @@ SearchPad.prototype._preselect = function(node) {
 
   this._resetOverlay(element);
 
-  this._centerViewbox(element);
+  this._canvas.scrollToElement(element, { top: 400 });
 
   this._selection.select(element);
 
@@ -408,37 +408,14 @@ SearchPad.prototype._select = function(node) {
 
   this._resetOverlay();
 
-  this._centerViewbox(element);
+  this._canvas.scrollToElement(element, { top: 400 });
 
   this._selection.select(element);
 
   this._eventBus.fire('searchPad.selected', element);
 };
 
 
-/**
- * Center viewbox on the element middle point.
- *
- * @param  {Element} element
- */
-SearchPad.prototype._centerViewbox = function(element) {
-  var viewbox = this._canvas.viewbox();
-
-  var box = getBoundingBox(element);
-
-  var newViewbox = {
-    x: (box.x + box.width/2) - viewbox.outer.width/2,
-    y: (box.y + box.height/2) - viewbox.outer.height/2,
-    width: viewbox.outer.width,
-    height: viewbox.outer.height
-  };
-
-  this._canvas.viewbox(newViewbox);
-
-  this._canvas.zoom(viewbox.scale);
-};
-
-
 /**
  * Reset overlay removes and, optionally, set
  * overlay to a new element.

diff --git a/test/spec/features/auto-place/AutoPlaceSpec.js b/test/spec/features/auto-place/AutoPlaceSpec.js
@@ -90,6 +90,31 @@ describe('features/auto-place', function() {
       expect(selection.get()).to.eql([ newShape ]);
     }));
 
+
+    it('should scroll into view', inject(function(autoPlace, canvas) {
+
+      // given
+      var container = canvas.getContainer();
+      container.style.width = '500px';
+      container.style.height = '500px';
+
+      canvas.viewbox({
+        x: -400,
+        y: -450,
+        width: 500,
+        height: 500
+      });
+
+      // when
+      autoPlace.append(shape, newShape);
+
+      // then
+      var newViewbox = canvas.viewbox();
+      expect(newViewbox.x).to.eql(-150);
+      expect(newViewbox.y).to.eql(-300);
+
+    }));
+
   });
 
 

diff --git a/test/spec/features/search-pad/SearchPadSpec.js b/test/spec/features/search-pad/SearchPadSpec.js
@@ -304,7 +304,7 @@ describe('features/searchPad', function() {
     }));
 
 
-    it('select should center viewbox on an element', inject(function(searchPad, canvas) {
+    it('select should scroll element into view', inject(function(searchPad, canvas) {
 
       // given
       typeText(input_node, 'one');
@@ -314,8 +314,8 @@ describe('features/searchPad', function() {
       container.style.height = '1000px';
 
       canvas.viewbox({
-        x: 0,
-        y: 0,
+        x: 1000,
+        y: 1000,
         width: 1000,
         height: 1000
       });
@@ -325,8 +325,8 @@ describe('features/searchPad', function() {
 
       // then
       var newViewbox = canvas.viewbox();
-      expect(newViewbox).to.have.property('x', -450);
-      expect(newViewbox).to.have.property('y', -460);
+      expect(newViewbox).to.have.property('x', -100);
+      expect(newViewbox).to.have.property('y', -400);
     }));