feat(interaction-handler): add the ability to skip highlight when bin… (

#1537) * feat(interaction-handler): add the ability to skip highlight when bindToWindow is false * feat(interaction-handler): add skipHighlight to the docs * refactor(interaction-handler): rename skipHighlight to autoFocus that defaults to true Co-authored-by: Matan Sar-Shalom <[email protected]> Co-authored-by: Tomina <[email protected]>
visjs · Aug 29, 2021 · ea66a94 · ea66a94
1 parent 8455e39
commit ea66a94
Show file tree

Hide file tree

Showing 4 changed files with 17 additions and 2 deletions.
diff --git a/docs-kr/network/interaction.html b/docs-kr/network/interaction.html
@@ -156,7 +156,8 @@ <h3>옵션</h3>
  keyboard: {
  enabled: false,
  speed: {x: 10, y: 10, zoom: 0.02},
- bindToWindow: true
+ bindToWindow: true,
+ autoFocus: true,
  },
  multiselect: false,
  navigationButtons: false,

diff --git a/docs/network/interaction.html b/docs/network/interaction.html
@@ -156,7 +156,8 @@ <h3>Options</h3>
  keyboard: {
  enabled: false,
  speed: {x: 10, y: 10, zoom: 0.02},
- bindToWindow: true
+ bindToWindow: true,
+ autoFocus: true,
  },
  multiselect: false,
  navigationButtons: false,
@@ -317,6 +318,15 @@ <h3>Options</h3>
  keyboard shortcuts only work on the network that has the focus.
  </td>
  </tr>
+ <tr parent="keyboard" class="hidden">
+ <td class="indent">keyboard.autoFocus</td>
+ <td>Boolean</td>
+ <td><code>true</code></td>
+ <td>
+ When <code>keyboard.bindToWindow=false</code> this option allows you
+ to skip auto focusing the network on hover.
+ </td>
+ </tr>
  <tr>
  <td>multiselect</td>
  <td>Boolean</td>

diff --git a/lib/network/modules/InteractionHandler.js b/lib/network/modules/InteractionHandler.js
@@ -55,6 +55,7 @@ class InteractionHandler {
  enabled: false,
  speed: { x: 10, y: 10, zoom: 0.02 },
  bindToWindow: true,
+ autoFocus: true,
  },
  navigationButtons: false,
  tooltipDelay: 300,
@@ -647,6 +648,7 @@ class InteractionHandler {
 
  // if we bind the keyboard to the div, we have to highlight it to use it. This highlights it on mouse over.
  if (
+ this.options.keyboard.autoFocus &&
  this.options.keyboard.bindToWindow === false &&
  this.options.keyboard.enabled === true
  ) {

diff --git a/lib/network/options.ts b/lib/network/options.ts
@@ -420,6 +420,7 @@ const allOptions: OptionsConfig = {
  __type__: { object },
  },
  bindToWindow: { boolean: bool },
+ autoFocus: { boolean: bool },
  __type__: { object, boolean: bool },
  },
  multiselect: { boolean: bool },
@@ -759,6 +760,7 @@ const configureOptions: ConfiguratorConfig = {
  zoom: [0.02, 0, 0.1, 0.005],
  },
  bindToWindow: true,
+ autoFocus: true,
  },
  multiselect: false,
  navigationButtons: false,