feat: add implicit keyboard binding

Editor is now focussed automatically on hover. chore: update to diagram-js@15 Related to bpmn-io/diagram-js#662
bpmn-io · Nov 15, 2024 · 6cd54a9 · 6cd54a9
1 parent 997b2cd
commit 6cd54a9
Show file tree

Hide file tree

Showing 8 changed files with 81 additions and 63 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -91,7 +91,7 @@
     "cross-env": "^7.0.3",
     "css-loader": "^7.1.2",
     "del-cli": "^5.1.0",
-    "diagram-js": "^14.11.3",
+    "diagram-js": "^15.2.2",
     "didi": "^10.2.2",
     "eslint": "^8.57.0",
     "eslint-config-prettier": "^9.1.0",

diff --git a/packages/form-js-editor/src/FormEditor.js b/packages/form-js-editor/src/FormEditor.js
@@ -63,7 +63,7 @@ export class FormEditor {
      */
     this._container = createFormContainer();
 
-    this._container.setAttribute('input-handle-modified-keys', 'z,y');
+    this._container.setAttribute('tabindex', '0');
 
     const { container, exporter, injector = this._createInjector(options, this._container), properties = {} } = options;
 

diff --git a/packages/form-js-editor/src/features/keyboard/FormEditorKeyboardBindings.js b/packages/form-js-editor/src/features/keyboard/FormEditorKeyboardBindings.js
@@ -1,6 +1,4 @@
-import { isCmd, isKey, isShift } from 'diagram-js/lib/features/keyboard/KeyboardUtil';
-
-import { KEYS_REDO, KEYS_UNDO } from 'diagram-js/lib/features/keyboard/KeyboardBindings';
+import { isUndo, isRedo } from 'diagram-js/lib/features/keyboard/KeyboardUtil';
 
 const LOW_PRIORITY = 500;
 
@@ -25,7 +23,7 @@ export class FormEditorKeyboardBindings {
     addListener('undo', (context) => {
       const { keyEvent } = context;
 
-      if (isCmd(keyEvent) && !isShift(keyEvent) && isKey(KEYS_UNDO, keyEvent)) {
+      if (isUndo(keyEvent)) {
         editorActions.trigger('undo');
 
         return true;
@@ -38,7 +36,7 @@ export class FormEditorKeyboardBindings {
     addListener('redo', (context) => {
       const { keyEvent } = context;
 
-      if (isCmd(keyEvent) && (isKey(KEYS_REDO, keyEvent) || (isKey(KEYS_UNDO, keyEvent) && isShift(keyEvent)))) {
+      if (isRedo(keyEvent)) {
         editorActions.trigger('redo');
 
         return true;

diff --git a/packages/form-js-editor/src/render/Renderer.js b/packages/form-js-editor/src/render/Renderer.js
@@ -22,6 +22,31 @@ export class Renderer {
   constructor(renderConfig, eventBus, formEditor, injector) {
     const { container, compact = false } = renderConfig;
 
+    eventBus.on('form.init', function () {
+      // emit <canvas.init> so dependent components can hook in
+      // this is required to register keyboard bindings
+      eventBus.fire('canvas.init', {
+        svg: container,
+        viewport: null,
+      });
+    });
+
+    // focus container on over if no selection
+    container.addEventListener('mouseover', function () {
+      if (document.activeElement === document.body) {
+        container.focus({ preventScroll: true });
+      }
+    });
+
+    // ensure we focus the container if the users clicks
+    // inside; this follows input focus handling closely
+    container.addEventListener('click', function (event) {
+      // force focus when clicking container
+      if (!container.contains(document.activeElement)) {
+        container.focus({ preventScroll: true });
+      }
+    });
+
     const App = () => {
       const [state, setState] = useState(formEditor._getState());
 

diff --git a/packages/form-js-editor/src/render/components/FormEditor.js b/packages/form-js-editor/src/render/components/FormEditor.js
@@ -121,14 +121,23 @@ function Element(props) {
     }
   }, [selection, field]);
 
-  function onClick(event) {
-    event.stopPropagation();
+  const onClick = useCallback(
+    (event) => {
+      // TODO(nikku): refactor this to use proper DOM delegation
+      const fieldEl = event.target.closest('[data-id]');
 
-    selection.toggle(field);
+      if (!fieldEl) {
+        return;
+      }
 
-    // properly focus on field
-    ref.current.focus();
-  }
+      const id = fieldEl.dataset.id;
+
+      if (id === field.id) {
+        selection.toggle(field);
+      }
+    },
+    [field, selection],
+  );
 
   const isSelected = selection.isSelected(field);
 

diff --git a/packages/form-js-editor/test/spec/FormEditor.spec.js b/packages/form-js-editor/test/spec/FormEditor.spec.js
@@ -52,9 +52,6 @@ describe('FormEditor', function () {
     await bootstrapFormEditor({
       container,
       schema,
-      keyboard: {
-        bindTo: document,
-      },
     });
 
     formEditor.on('changed', (event) => {
@@ -70,9 +67,6 @@ describe('FormEditor', function () {
     await bootstrapFormEditor({
       container,
       schema: schemaRows,
-      keyboard: {
-        bindTo: document,
-      },
       debugColumns: true,
     });
 
@@ -93,9 +87,6 @@ describe('FormEditor', function () {
     await bootstrapFormEditor({
       container,
       schema,
-      keyboard: {
-        bindTo: document,
-      },
     });
 
     // then
@@ -111,9 +102,6 @@ describe('FormEditor', function () {
     await bootstrapFormEditor({
       container,
       schema,
-      keyboard: {
-        bindTo: document,
-      },
     });
 
     // when
@@ -132,9 +120,6 @@ describe('FormEditor', function () {
       renderer: {
         compact: true,
       },
-      keyboard: {
-        bindTo: document,
-      },
     });
 
     // then
@@ -153,9 +138,6 @@ describe('FormEditor', function () {
         type: 'default',
       },
       debounce: true,
-      keyboard: {
-        bindTo: document,
-      },
     });
 
     // then
@@ -181,9 +163,6 @@ describe('FormEditor', function () {
         ],
       },
       debounce: true,
-      keyboard: {
-        bindTo: document,
-      },
     });
 
     // then

diff --git a/packages/form-js-viewer/test/spec/Form.spec.js b/packages/form-js-viewer/test/spec/Form.spec.js
@@ -208,9 +208,6 @@ describe('Form', function () {
     await bootstrapForm({
       container,
       schema,
-      keyboard: {
-        bindTo: document,
-      },
     });
 
     // when