feat(dia.Paper): add focusin and focusout events

.changeset/big-donkeys-refuse.md

@@ -0,0 +1,5 @@
+---
+"@joint/core": minor
+---
+
+dia.Paper - add `focusin` and `focusout` events (`cell:`, `element:`, `link:` variants)

packages/joint-core/src/dia/CellView.mjs

@@ -1299,6 +1299,16 @@ export const CellView = View.extend({
         this.notify('cell:mouseout', evt);
     },
 
+    focusin: function(evt) {
+
+        this.notify('cell:focusin', evt);
+    },
+
+    focusout: function(evt) {
+
+        this.notify('cell:focusout', evt);
+    },
+
     mouseenter: function(evt) {
 
         this.notify('cell:mouseenter', evt);

packages/joint-core/src/dia/ElementView.mjs

@@ -687,6 +687,18 @@ export const ElementView = CellView.extend({
         this.notify('element:mouseout', evt);
     },
 
+    focusin: function(evt) {
+
+        CellView.prototype.focusin.apply(this, arguments);
+        this.notify('element:focusin', evt);
+    },
+
+    focusout: function(evt) {
+
+        CellView.prototype.focusout.apply(this, arguments);
+        this.notify('element:focusout', evt);
+    },
+
     mouseenter: function(evt) {
 
         CellView.prototype.mouseenter.apply(this, arguments);

packages/joint-core/src/dia/LinkView.mjs

@@ -1561,6 +1561,18 @@ export const LinkView = CellView.extend({
         this.notify('link:mouseout', evt);
     },
 
+    focusin: function(evt) {
+
+        CellView.prototype.focusin.apply(this, arguments);
+        this.notify('link:focusin', evt);
+    },
+
+    focusout: function(evt) {
+
+        CellView.prototype.focusout.apply(this, arguments);
+        this.notify('link:focusout', evt);
+    },
+
     mouseenter: function(evt) {
 
         CellView.prototype.mouseenter.apply(this, arguments);

packages/joint-core/src/dia/Paper.mjs

@@ -549,6 +549,8 @@ export const Paper = View.extend({
         'touchstart': 'pointerdown',
         'mouseover': 'mouseover',
         'mouseout': 'mouseout',
+        'focusin': 'focusin',
+        'focusout': 'focusout',
         'mouseenter': 'mouseenter',
         'mouseleave': 'mouseleave',
         'wheel': 'mousewheel',
@@ -3674,6 +3676,22 @@ export const Paper = View.extend({
         }
     },
 
+    focusin: function(evt) {
+
+        var view = this.findView(evt.target);
+        if (this.guard(evt, view)) return;
+
+        if (view) view.focusin(evt);
+    },
+
+    focusout: function(evt) {
+
+        var view = this.findView(evt.target);
+        if (this.guard(evt, view)) return;
+
+        if (view) view.focusout(evt);
+    },
+
     mouseenter: function(evt) {
 
         evt = normalizeEvent(evt);

packages/joint-core/test/jointjs/paper.js

@@ -355,6 +355,42 @@ QUnit.module('paper', function(hooks) {
         assert.ok(blankContextmenuCallback.called, 'blank:contextmenu triggered');
     });
 
+    QUnit.test('focusin & focusout', function(assert) {
+
+        var r1 = new joint.shapes.standard.Rectangle({ position: { x: 50, y: 50 }, size: { width: 20, height: 20 }});
+        var r2 = new joint.shapes.standard.Rectangle({ position: { x: 150, y: 50 }, size: { width: 20, height: 20 }});
+        var l1 = new joint.shapes.standard.Link({ source: { id: r1.id }, target: { id: r2.id }});
+        this.graph.resetCells([r1, r2, l1]);
+
+        var events = [];
+        this.paper.on('all', function(name) {
+            if (name.indexOf('focus') > -1) events.push(name);
+        });
+
+        // The test `$.fn.trigger` does not dispatch bubbling events —
+        // dispatch native focus events instead.
+        var focus = function(el, type) {
+            el.dispatchEvent(new FocusEvent(type, { bubbles: true }));
+        };
+
+        var r1View = this.paper.findViewByModel(r1);
+        focus(r1View.el, 'focusin');
+        assert.deepEqual(events, ['cell:focusin', 'element:focusin'], 'cell:focusin precedes element:focusin');
+
+        events = [];
+        focus(r1View.el, 'focusout');
+        assert.deepEqual(events, ['cell:focusout', 'element:focusout'], 'cell:focusout precedes element:focusout');
+
+        events = [];
+        var l1View = this.paper.findViewByModel(l1);
+        focus(l1View.el, 'focusin');
+        assert.deepEqual(events, ['cell:focusin', 'link:focusin'], 'cell:focusin precedes link:focusin');
+
+        events = [];
+        focus(this.paper.svg, 'focusin');
+        assert.deepEqual(events, [], 'no event for a focusin outside of a cell view');
+    });
+
     QUnit.test('paper.getArea()', function(assert) {
 
         this.paper.translate(0, 0);

packages/joint-core/types/dia.d.ts

@@ -1895,6 +1895,14 @@ export namespace Paper {
         'element:mouseout': (elementView: ElementView, evt: Event) => void;
         'link:mouseout': (linkView: LinkView, evt: Event) => void;
         'blank:mouseout': (evt: Event) => void;
+        // focusin
+        'cell:focusin': (cellView: CellView, evt: Event) => void;
+        'element:focusin': (elementView: ElementView, evt: Event) => void;
+        'link:focusin': (linkView: LinkView, evt: Event) => void;
+        // focusout
+        'cell:focusout': (cellView: CellView, evt: Event) => void;
+        'element:focusout': (elementView: ElementView, evt: Event) => void;
+        'link:focusout': (linkView: LinkView, evt: Event) => void;
         // mouseenter
         'cell:mouseenter': (cellView: CellView, evt: Event) => void;
         'element:mouseenter': (elementView: ElementView, evt: Event) => void;