# # 表单交互模式

在 Foxit PDF SDK for Web 中，表单的交互模式分为两种: 设计模式和填表模式。这两种模式分别针对不同的用户场景，旨在帮助开发者和用户更高效地完成表单的设计和填写。

## # 概述

### # 设计模式

在设计模式下，用户可以编辑表单域并设置其属性。具体功能包括：

- 选择表单域:支持选择特定类型或所有表单域。
- 编辑操作:支持拖放、删除、对齐等操作。
- 右键菜单:提供更多高级操作选项，如表单域属性设置、复制粘贴等。

注意： 设计模式的相关功能依赖于 `UIExtension` 和 `form-designer-v2` addon 来实现。如果您的应用是基于 PDFViewCtrl 开发的，则需要自行实现设计模式。

### # 填表模式

填表模式是表单的默认模式，用户在此模式下可以填写表单内容。具体功能包括:

- 数据输入:支持文本、日期、选择框等各类表单域的输入。
- 动作触发:与表单交互触发动作。
- 签名域:点击签名域触发签名或验签功能。

## # 交互模式的 API

Foxit PDF SDK for Web 提供了以下 API，用来帮助开发者更好地管理表单的交互模式。

### # `FormDesignMode`
(opens new window) 枚举

`FormDesignMode`
(opens new window) 枚举用于表示表单的当前交互模式，定义如下：

    export enum FormDesignMode {
        NONE,
        PUSH_BUTTON_AND_IMAGE,
        CHECK_BOX,
        RADIO_BUTTON,
        COMBO_BOX,
        LIST_BOX,
        TEXT_AND_DATE,
        SIGNATURE,
        ALL_WIDGET_TYPES
    }

枚举值 `NONE` 表示当前处于填表模式，而 `ALL_WIDGET_TYPES` 表示所有表单域都处于设计模式，通常在用户设置当前的 state handler 工具为 `STATE_HANDLER_NAMES.STATE_HANDLER_SELECT_ANNOTATION` 时生效。

此外，其他表单创建工具的枚举值则对应于特定表单域类型的设计模式。例如，当用户选择 `STATE_HANDLER_NAMES.STATE_HANDLER_CREATE_FIELD_PUSH_BUTTON` 作为当前的表单创建工具时，相应的交互模式会被设置为 `PUSH_BUTTON_AND_IMAGE`。这样，开发者可以根据需要更方便地切换和管理各种交互模式。

### # `FormFillerService.onDesignModeChange`
(opens new window)

`FormFillerService.onDesignModeChange`
(opens new window) 是一个事件监听方法，用于监听表单交互模式的变化。开发者可以订阅该事件，以便在模式切换时执行自定义逻辑：

    const formFillerService = pdfviewer.getFormFillerService();
    formFillerService.onDesignModeChange((mode) => {
        console.log('表单交互模式发生变化:', mode);
        // 这里可以添加根据模式变化而执行的代码
    });

### # `FormFillerService.getDesignMode`
(opens new window)

`FormFillerService.getDesignMode`
(opens new window) 方法用于获取表单的当前交互模式：

    const formFillerService = pdfviewer.getFormFillerService();
    const currentMode = formFillerService.getDesignMode();
    console.log('当前表单模式:', FormDesignMode[currentMode]);

### # `FormFillerService.setDesignMode`
(opens new window)

`FormFillerService.setDesignMode`
(opens new window) 方法允许开发者动态切换表单的交互模式。Foxit PDF SDK for Web 在切换 state-handler 时会自动切换表单的交互模式，因此，开发者通常不需要直接调用这个方法。

    const formFillerService = pdfviewer.getFormFillerService();
    formFillerService.setDesignMode(FormDesignMode.PUSH_BUTTON_AND_IMAGE);