Skip to content

Commit

Permalink
fix(navigation/zoomscroll): hook up with canvas focused state
Browse files Browse the repository at this point in the history
Related to #662
  • Loading branch information
nikku committed Dec 20, 2024
1 parent 78e678d commit 8c07236
Show file tree
Hide file tree
Showing 2 changed files with 61 additions and 33 deletions.
10 changes: 4 additions & 6 deletions lib/navigation/zoomscroll/ZoomScroll.js
Original file line number Diff line number Diff line change
@@ -1,6 +1,5 @@
import {
event as domEvent,
closest as domClosest
event as domEvent
} from 'min-dom';

import {
Expand Down Expand Up @@ -68,8 +67,8 @@ export default function ZoomScroll(config, eventBus, canvas) {

var self = this;

eventBus.on('canvas.init', function(e) {
self._init(config.enabled !== false);
eventBus.on('canvas.focus.changed', function(event) {
self._init(event.focused && config.enabled !== false);
});
}

Expand Down Expand Up @@ -116,8 +115,7 @@ ZoomScroll.prototype.zoom = function zoom(delta, position) {

ZoomScroll.prototype._handleWheel = function handleWheel(event) {

// event is already handled by '.djs-scrollable'
if (domClosest(event.target, '.djs-scrollable', true)) {
if (!this._canvas.isFocused()) {
return;
}

Expand Down
84 changes: 57 additions & 27 deletions test/spec/navigation/zoomscoll/ZoomScrollSpec.js
Original file line number Diff line number Diff line change
Expand Up @@ -8,10 +8,6 @@ import {
assign
} from 'min-dash';

import {
domify
} from 'min-dom';

import zoomScrollModule from 'lib/navigation/zoomscroll';


Expand All @@ -21,7 +17,9 @@ describe('navigation/zoomscroll', function() {

beforeEach(bootstrapDiagram({
modules: [ zoomScrollModule ],
canvas: { deferUpdate: false }
canvas: {
deferUpdate: false
}
}));


Expand All @@ -36,7 +34,7 @@ describe('navigation/zoomscroll', function() {
});

expect(zoomScroll).to.exist;
expect(zoomScroll._enabled).to.be.true;
expect(zoomScroll._enabled).to.be.false;
}));

});
Expand All @@ -46,7 +44,9 @@ describe('navigation/zoomscroll', function() {

beforeEach(bootstrapDiagram({
modules: [ zoomScrollModule ],
canvas: { deferUpdate: false }
canvas: {
deferUpdate: false
}
}));


Expand Down Expand Up @@ -88,7 +88,9 @@ describe('navigation/zoomscroll', function() {

beforeEach(bootstrapDiagram({
modules: [ zoomScrollModule ],
canvas: { deferUpdate: false }
canvas: {
deferUpdate: false
}
}));


Expand Down Expand Up @@ -170,7 +172,9 @@ describe('navigation/zoomscroll', function() {

beforeEach(bootstrapDiagram({
modules: [ zoomScrollModule ],
canvas: { deferUpdate: false },
canvas: {
deferUpdate: false
},
zoomScroll: {
enabled: false
}
Expand Down Expand Up @@ -243,34 +247,48 @@ describe('navigation/zoomscroll', function() {

beforeEach(bootstrapDiagram({
modules: [ zoomScrollModule ],
canvas: { deferUpdate: false }
canvas: {
deferUpdate: false
}
}));

beforeEach(inject(function(canvas) {

describe('should mute', function() {
canvas.addShape({
id: 'test',
width: 100,
height: 100,
x: 100,
y: 100
});
}));

it('on .djs-scrollable target', inject(function(zoomScroll) {

// given
var zoomSpy = sinon.spy(zoomScroll, 'zoom');
var scrollSpy = sinon.spy(zoomScroll, 'scroll');
it('should not scroll, if canvas is not focused', inject(function(zoomScroll, canvas) {

var event = wheelEvent({
target: domify('<div class="djs-scrollable" />')
});
// given
var zoomSpy = sinon.spy(zoomScroll, 'zoom');
var scrollSpy = sinon.spy(zoomScroll, 'scroll');

// when
zoomScroll._handleWheel(event);
var event = wheelEvent({
target: canvas._svg
});

// then
expect(zoomSpy).not.to.have.been.called;
expect(scrollSpy).not.to.have.been.called;
}));
// when
zoomScroll._handleWheel(event);

});
// then
expect(zoomSpy).not.to.have.been.called;
expect(scrollSpy).not.to.have.been.called;
}));


describe('should scroll', function() {
describe('should scroll, if canvas is focused', function() {

beforeEach(inject(function(canvas) {
canvas.focus();
}));


it('two-dimensional', expectScroll({
expectedDelta: {
Expand Down Expand Up @@ -316,6 +334,11 @@ describe('navigation/zoomscroll', function() {

describe('should zoom', function() {

beforeEach(inject(function(canvas) {
canvas.focus();
}));


it('with scroll + ctrlKey', expectZoom({
expectedDelta: 0.7949999999999999,
expectedPosition: { x: 100, y: 70 },
Expand Down Expand Up @@ -353,13 +376,20 @@ describe('navigation/zoomscroll', function() {

beforeEach(bootstrapDiagram({
modules: [ zoomScrollModule ],
canvas: { deferUpdate: false },
canvas: {
deferUpdate: false
},
zoomScroll: {
scale: 0.5
}
}));


beforeEach(inject(function(canvas) {
canvas.focus();
}));


it('should adapt scroll', expectScroll({
expectedDelta: {
dx: -17,
Expand Down

0 comments on commit 8c07236

Please sign in to comment.