feat: add void methods with serializable params to ref

- https://visjs.github.io/vis-network/docs/network/#methods
- https://github.com/visjs/vis-network/blob/2260f9e7c1b9472a3f55309b68e05f6698dbbb59/types/network/Network.d.ts
- Did *not* add the following void methods with serializable params due to various issues:
  - enableEditMode
    - Couldn't verify that it did anything
  - disableEditMode
    - Couldn't verify that it did anything
  - editNode
    - Web view JavaScript error: "No function has been configured to handle the editing of nodes"
  - storePositions
    - Couldn't verify that this works in the web view
  - setSelection
    - Web view JavaScript error about undefined `this.selectionHandler.unselectAll`

Author: High5Apps

src/VisNetworkRef.ts

@@ -1,11 +1,14 @@
 import { ForwardedRef, useImperativeHandle } from 'react';
 import type {
   CallbackCache,
+  Data,
   EventCallback,
   FitOptions,
   FocusOptions,
   IdType,
+  MoveToOptions,
   NetworkEvents,
+  Options,
   Position,
   VisNetworkRef,
 } from './types';
@@ -102,6 +105,21 @@ export default function useVisNetworkRef(
 
           return { remove: () => removeEventListener(eventName, id) };
         },
+        addEdgeMode(): void {
+          send('addEdgeMode');
+        },
+        addNodeMode(): void {
+          send('addNodeMode');
+        },
+        deleteSelected(): void {
+          send('deleteSelected');
+        },
+        destroy(): void {
+          send('destroy');
+        },
+        editEdgeMode(): void {
+          send('editEdgeMode');
+        },
         async getPositions(
           nodeIds?: IdType[] | IdType
         ): Promise<{ [nodeId: string]: Position }> {
@@ -113,6 +131,45 @@ export default function useVisNetworkRef(
         focus(nodeId: IdType, options?: FocusOptions): void {
           send('focus', nodeId, options);
         },
+        moveNode(nodeId: IdType, x: number, y: number): void {
+          send('moveNode', nodeId, x, y);
+        },
+        moveTo(options: MoveToOptions): void {
+          send('moveTo', options);
+        },
+        redraw(): void {
+          send('redraw');
+        },
+        releaseNode(): void {
+          send('releaseNode');
+        },
+        selectEdges(edgeIds: IdType[]): void {
+          send('selectEdges', edgeIds);
+        },
+        selectNodes(nodeIds: IdType[], highlightEdges?: boolean): void {
+          send('selectNodes', nodeIds, highlightEdges);
+        },
+        setData(data: Data): void {
+          send('setData', data);
+        },
+        setOptions(options: Options): void {
+          send('setOptions', options);
+        },
+        setSize(width: string, height: string): void {
+          send('setSize', width, height);
+        },
+        stabilize(iterations?: number): void {
+          send('stabilize', iterations);
+        },
+        startSimulation(): void {
+          send('startSimulation');
+        },
+        stopSimulation(): void {
+          send('stopSimulation');
+        },
+        unselectAll(): void {
+          send('unselectAll');
+        },
       };
     },
     [callbackCache, webview]

src/types.ts

@@ -296,7 +296,6 @@ export interface LocaleMessages {
   back: string;
   addNode: string;
   addEdge: string;
-  editNode: string;
   editEdge: string;
   addDescription: string;
   edgeDescription: string;
@@ -685,6 +684,37 @@ export type VisNetworkRef = {
     callback: EventCallback
   ) => NativeEventSubscription;
 
+  /**
+   * Go into addEdge mode.
+   * The explaination from addNodeMode applies here as well.
+   */
+  addEdgeMode(): void;
+
+  /**
+   * 	Go into addNode mode. Having edit mode or manipulation enabled is not required.
+   * To get out of this mode, call disableEditMode().
+   * The callback functions defined in handlerFunctions still apply.
+   * To use these methods without having the manipulation GUI, make sure you set enabled to false.
+   */
+  addNodeMode(): void;
+
+  /**
+   * Delete selected.
+   * Having edit mode or manipulation enabled is not required.
+   */
+  deleteSelected(): void;
+
+  /**
+   * 	Remove the network from the DOM and remove all Hammer bindings and references.
+   */
+  destroy(): void;
+
+  /**
+   * Go into editEdge mode.
+   * The explaination from addNodeMode applies here as well.
+   */
+  editEdgeMode(): void;
+
   /**
    * Returns the x y positions in canvas space of a requested node or array of nodes.
    *
@@ -715,4 +745,103 @@ export type VisNetworkRef = {
    *
    */
   focus(nodeId: IdType, options?: FocusOptions): void;
+
+  /**
+   * You can use this to programatically move a node.
+   * The supplied x and y positions have to be in canvas space!
+   *
+   * @param nodeId the node that will be moved
+   * @param x new canvas space x position
+   * @param y new canvas space y position
+   */
+  moveNode(nodeId: IdType, x: number, y: number): void;
+
+  /**
+   * You can animate or move the camera using the moveTo method.
+   *
+   */
+  moveTo(options: MoveToOptions): void;
+
+  /**
+   * Redraw the network.
+   */
+  redraw(): void;
+
+  /**
+   * Programatically release the focussed node.
+   */
+  releaseNode(): void;
+
+  /**
+   * Selects the edges corresponding to the id's in the input array.
+   * This method unselects all other objects before selecting its own objects.
+   * Does not fire events.
+   *
+   */
+  selectEdges(edgeIds: IdType[]): void;
+
+  /**
+   * Selects the nodes corresponding to the id's in the input array.
+   * If highlightEdges is true or undefined, the neighbouring edges will also be selected.
+   * This method unselects all other objects before selecting its own objects. Does not fire events.
+   *
+   */
+  selectNodes(nodeIds: IdType[], highlightEdges?: boolean): void;
+
+  /**
+   * Override all the data in the network.
+   * If stabilization is enabled in the physics module,
+   * the network will stabilize again.
+   * This method is also performed when first initializing the network.
+   *
+   * @param data network data
+   */
+  setData(data: Data): void;
+
+  /**
+   * Set the options.
+   * All available options can be found in the modules above.
+   * Each module requires it's own container with the module name to contain its options.
+   *
+   * @param options network options
+   */
+  setOptions(options: Options): void;
+
+  /**
+   * Set the size of the canvas.
+   * This is automatically done on a window resize.
+   *
+   * @param width width in a common format, f.e. '100px'
+   * @param height height in a common format, f.e. '100px'
+   */
+  setSize(width: string, height: string): void;
+
+  /**
+   * You can manually call stabilize at any time.
+   * All the stabilization options above are used.
+   * You can optionally supply the number of iterations it should do.
+   *
+   * @param [iterations] the number of iterations it should do
+   */
+  stabilize(iterations?: number): void;
+
+  /**
+   * Start the physics simulation.
+   * This is normally done whenever needed and is only really useful
+   * if you stop the simulation yourself and wish to continue it afterwards.
+   */
+  startSimulation(): void;
+
+  /**
+   * This stops the physics simulation and triggers a stabilized event.
+   * Tt can be restarted by dragging a node,
+   * altering the dataset or calling startSimulation().
+   */
+  stopSimulation(): void;
+
+  /**
+   * Unselect all objects.
+   * Does not fire events.
+   */
+  unselectAll(): void;
 };