# Web View Input Handling

The [web-view-ugui](https://stylishesper.gitbook.io/skill-web/editors/components/ugui/web-view-ugui "mention") component has multiple features that you can take advantage of with the input system of your choice.

## Important Methods

Usually, you can simply call any of the methods below when the appropriate button is pressed. Some navigation methods may need a `Vector2` or `float` value.

### Move

The `Move` method pans the web view towards a direction.

```csharp
// Move right
var move = Vector2.right;
WebViewUGUI.Active.Move(move);
```

### Zoom

The `SetConstantZoom` method zooms in or out. Use negatives to zoom out. Use `0` to stop the constant zoom.

```csharp
WebViewUGUI.Active.SetConstantZoom(1);
```

### Focus

The `Focus` method focuses the skill at a specific direction closest to the current position.

<pre class="language-csharp"><code class="lang-csharp"><strong>// Focus the skill on the right
</strong><strong>Vector2 dir = Vector2.right;
</strong>WebViewUGUI.Active.Focus(dir);
</code></pre>

### Remove Focus

The `RemoveFocus` method simply removes the focus set on a skill.

```csharp
WebViewUGUI.Active.RemoveFocus();
```

### Upgrade Focused

The `UpgradeFocused` method upgrades the currently focused skill. Nothing happens if nothing is focused.

```csharp
WebViewUGUI.Active.UpgradeFocused();
```

### Downgrade Focused

The `DowngradeFocused` method downgrades the currently focused skill. Nothing happens if nothing is focused.

```csharp
WebViewUGUI.Active.DowngradeFocus();
```

### Reset View

The `ResetView` method simply resets the web view position and zoom scale to the starting position and scale.

```csharp
WebViewUGUI.Active.ResetView();
```

### Reset All Skills

The `ResetAllSkills` method simply sets the level of each skill to `0`.

```csharp
WebViewUGUI.Active.ResetAllSkills();
```

### Toggle

The `Toggle` method enables or disables the content `GameObject`. You can use `Open` or `Close`, respectively, to just do one or the other.

```csharp
WebViewUGUI.Active.Toggle();
```

## Example Script (New Input System)

There's an example script called `SkillWebInputExample` that works with the new input system. This script is used for both demos. Here's the script for reference:

```csharp
using Esper.SkillWeb.UI.UGUI;
using UnityEngine;
using UnityEngine.InputSystem;

public class SkillWebInputExample : MonoBehaviour
{
    [SerializeField, Min(0)]
    private float moveSpeed = 5;

    [SerializeField, Min(0)]
    private float zoomSpeed = 10;

    private void OnMove(InputValue value)
    {
        var move = value.Get<Vector2>();
        move *= moveSpeed;
        WebViewUGUI.Active.Move(move);
    }

    private void OnFocus(InputValue value)
    {
        var move = value.Get<Vector2>();

        if (move != Vector2.zero)
        {
            WebViewUGUI.Active.Focus(move);
        }
    }

    private void OnResetView(InputValue value)
    {
        if (value.isPressed)
        {
            WebViewUGUI.Active.ResetView();
        }
    }

    private void OnResetSkills(InputValue value)
    {
        if (value.isPressed)
        {
            WebViewUGUI.Active.ResetAllSkills();
        }
    }

    private void OnZoomIn(InputValue value)
    {
        if (value.isPressed)
        {
            WebViewUGUI.Active.SetConstantZoom(zoomSpeed);
        }
        else
        {
            WebViewUGUI.Active.SetConstantZoom(0);
        }
    }

    private void OnZoomOut(InputValue value)
    {
        if (value.isPressed)
        {
            WebViewUGUI.Active.SetConstantZoom(-zoomSpeed);
        }
        else
        {
            WebViewUGUI.Active.SetConstantZoom(0);
        }
    }

    private void OnRemoveFocus(InputValue value)
    {
        if (value.isPressed)
        {
            WebViewUGUI.Active.RemoveFocus();
        }
    }

    private void OnUpgrade(InputValue value)
    {
        if (value.isPressed)
        {
            WebViewUGUI.Active.UpgradeFocused();
        }
    }

    private void OnDowngrade(InputValue value)
    {
        if (value.isPressed)
        {
            WebViewUGUI.Active.DowngradeFocused();
        }
    }

    private void OnToggle(InputValue value)
    {
        if (value.isPressed)
        {
            WebViewUGUI.Active.Toggle();
        }
    }
}
```
