feat(ContextPad): Add config for ContextPad scaling

Closes #719
bpmn-io · Oct 8, 2018 · a22043e · a22043e
1 parent 19d6db5
commit a22043e
Show file tree

Hide file tree

Showing 2 changed files with 100 additions and 33 deletions.
diff --git a/lib/features/context-pad/ContextPad.js b/lib/features/context-pad/ContextPad.js
@@ -1,4 +1,5 @@
 import {
+  assign,
   isFunction,
   isArray,
   forEach
@@ -20,22 +21,40 @@ var entrySelector = '.entry';
  * A context pad that displays element specific, contextual actions next
  * to a diagram element.
  *
+ * @param {Object} config
+ * @param {Boolean|Object} [config.scale={ min: 1.0, max: 1.5 }]
+ * @param {Number} [config.scale.min]
+ * @param {Number} [config.scale.max]
  * @param {EventBus} eventBus
  * @param {Overlays} overlays
  */
-export default function ContextPad(eventBus, overlays) {
+export default function ContextPad(config, eventBus, overlays) {
 
   this._providers = [];
 
   this._eventBus = eventBus;
   this._overlays = overlays;
+  this._overlaysConfig = assign({
+    position: {
+      right: -9,
+      top: -6
+    },
+    scale: {
+      min: 1,
+      max: 1.5
+    }
+  }, config && { scale: config.scale });
 
   this._current = null;
 
   this._init();
 }
 
-ContextPad.$inject = [ 'eventBus', 'overlays' ];
+ContextPad.$inject = [
+  'config.contextPad',
+  'eventBus',
+  'overlays'
+];
 
 
 /**
@@ -228,6 +247,10 @@ ContextPad.prototype.getPad = function(element) {
 
   var html = domify('<div class="djs-context-pad"></div>');
 
+  var overlaysConfig = assign({
+    html: html
+  }, this._overlaysConfig);
+
   domDelegate.bind(html, entrySelector, 'click', function(event) {
     self.trigger('click', event);
   });
@@ -241,17 +264,7 @@ ContextPad.prototype.getPad = function(element) {
     event.stopPropagation();
   });
 
-  this._overlayId = overlays.add(element, 'context-pad', {
-    position: {
-      right: -9,
-      top: -6
-    },
-    scale: {
-      min: 1,
-      max: 1.5
-    },
-    html: html
-  });
+  this._overlayId = overlays.add(element, 'context-pad', overlaysConfig);
 
   var pad = overlays.get(this._overlayId);
 

diff --git a/test/spec/features/context-pad/ContextPadSpec.js b/test/spec/features/context-pad/ContextPadSpec.js
@@ -372,6 +372,7 @@ describe('features/context-pad', function() {
     beforeEach(bootstrapDiagram({ modules: [ contextPadModule, providerModule ] }));
 
     var NUM_REGEX = /[+-]?\d*[.]?\d+(?=,|\))/g;
+    var zoomLevels = [ 1.0, 1.2, 3.5, 10, 0.5 ];
 
     function asVector(scaleStr) {
       if (scaleStr && scaleStr !== 'none') {
@@ -388,36 +389,89 @@ describe('features/context-pad', function() {
       return asVector(element.style.transform);
     }
 
-    it('should keep zoom level within the limits', inject(function(canvas, contextPad) {
-      // given
-      var shape = canvas.addShape({ id: 's1', width: 100, height: 100, x: 10, y: 10, type: 'drag' });
+    function verifyScale(expectedScales) {
+      return inject(function(canvas, contextPad) {
+        // given
+        var shape = canvas.addShape({ id: 's1', width: 100, height: 100, x: 10, y: 10, type: 'drag' });
 
-      contextPad.open(shape);
+        contextPad.open(shape);
+
+        var pad = contextPad.getPad(shape);
 
-      var pad = contextPad.getPad(shape);
+        var padParent = pad.html.parentNode;
 
-      var overlayParent = pad.html.parentNode;
+        // test multiple zoom steps
+        zoomLevels.forEach(function(zoom, idx) {
 
-      var expectedScales = [
-        1.0, 1.2, 1.5, 1.5, 1.0
-      ];
+          var expectedScale = expectedScales[idx];
 
-      // test multiple zoom steps
-      [ 1.0, 1.2, 3.5, 10, 0.5 ].forEach(function(zoom, idx) {
+          // when
+          canvas.zoom(zoom);
 
-        var expectedScale = expectedScales[idx];
+          var actualScale = scaleVector(padParent) || { x: 1, y: 1 };
 
-        // when
-        canvas.zoom(zoom);
+          var effectiveScale = zoom * actualScale.x;
 
-        var actualScale = scaleVector(overlayParent) || { x: 1, y: 1 };
+          // then
+          expect(actualScale.x).to.eql(actualScale.y);
+          expect(effectiveScale).to.be.closeTo(expectedScale, 0.00001);
+        });
+      });
+    }
 
-        var effectiveScale = zoom * actualScale.x;
+    it('should scale within the limits of [ 1.0, 1.5 ] by default', function() {
+      var expectedScales = [ 1.0, 1.2, 1.5, 1.5, 1.0 ];
 
-        // then
-        expect(actualScale.x).to.eql(actualScale.y);
-        expect(effectiveScale).to.be.closeTo(expectedScale, 0.00001);
+      bootstrapDiagram({
+        modules: [ contextPadModule, providerModule ]
       });
-    }));
+
+      return verifyScale(expectedScales);
+    });
+
+    it('should scale within the limits set in config', function() {
+      var config = {
+        scale: {
+          min: 1.0,
+          max: 1.2
+        }
+      };
+      var expectedScales = [ 1.0, 1.2, 1.2, 1.2, 1.0 ];
+
+      bootstrapDiagram({
+        modules: [ contextPadModule, providerModule ],
+        contextPad: config
+      });
+
+      return verifyScale(expectedScales);
+    });
+
+    it('should scale with scale = true', function() {
+      var config = {
+        scale: false
+      };
+      var expectedScales = [ 1.0, 1.2, 1.2, 1.2, 1.0 ];
+
+      bootstrapDiagram({
+        modules: [ contextPadModule, providerModule ],
+        contextPad: config
+      });
+
+      return verifyScale(expectedScales);
+    });
+
+    it('should not scale with scale = false', function() {
+      var config = {
+        scale: false
+      };
+      var expectedScales = [ 1.0, 1.2, 1.2, 1.2, 1.0 ];
+
+      bootstrapDiagram({
+        modules: [ contextPadModule, providerModule ],
+        contextPad: config
+      });
+
+      return verifyScale(expectedScales);
+    });
   });
 });