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 <matan.sarshalom@siemplify.co>
Co-authored-by: Tomina <tom.vycital@gmail.com>

Author: 3 people

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,

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>

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
     ) {

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,