6.5. テーブルエディタを実装する¶

6.5.1. イベントリスナを実装する¶

ツールバー以外に、テーブルを編集するための専用バー（テーブルエディタ）が用意されています。

このテーブルエディタでは、以下の機能を提供します。

各行・各列の全体選択バー

各行・各列の間に挿入するアイコン

空行・空列の追加

前行・前列と同じ内容を追加

各行・各列を削除するアイコン

各行・各列の大きさを変更

郵便番号入力エレメントはテーブルではありませんが、説明のためにテーブルエディタを実装してみます。
特定のエレメントに対してテーブルエディタを使用可能とするためには、「事前準備」にて用意した Layouter クラスに、特定のイベントリスナを実装します。
実装するイベントリスナは、以下の通りです。

designer-get-table-size

インラインメニュー、または、ツールバーの表示が必要となったときに呼び出されるイベントです。

このイベントを実装し、行・列の各サイズ情報を返却すると、エディタ上にテーブル用の行列エディタが表示されます。

テーブルの行列を操作する機能を付与したい場合は、このイベントは必須です。機能を使用しない場合は、このイベントは不要です。

designer-set-table-size

テーブルの行列を操作する機能において、行・列のサイズが変更されたときに呼び出されるイベントです。

リクエストに従って、行・列のサイズを更新する操作を、エレメントに対して行います。

designer-toolbar-push-table

designer-get-table-size イベントで許可した操作において、ツールバー上の項目が選択されたときに呼び出されるイベントです。

リクエストに従って、表示した項目に応じた操作を、エレメントに対して行います。

以下のように実装します。

export class MyZipCodeFieldLayouter implements IUIElementLayouterExpandCaller {

    public isSupported(element: IUIElement): boolean {
        return element.instance.elementTypeName === MyZipCodeField.name;
    }

    public initialize(element: IUIElement, container: IUIContainer): void {
        const eventListener = container.eventListener;

        // テーブル用の行列エディタが表示されたとき
        eventListener.addEventListener(element, 'designer-get-table-size', async () => {
            return {columns: [], rows: []}; // テーブルの各行列サイズを返却する
        });

        // テーブル用の行列エディタで、サイズが変更されたとき
        eventListener.addEventListener(element, 'designer-set-table-size', (eventValue) => {
            // テーブルの各行列サイズを設定する
        });

        // テーブル用のツールバーから項目が選択されたとき
        eventListener.addEventListener(element, 'designer-toolbar-push-table', (eventValue) => {
            // テーブル行列の操作を実装する
        });
    }

}

6.5.2. テーブルの各行列サイズを返却する¶

テーブルエディタに、テーブルの基本的な情報を与えるため、イベントリスナで designer-get-table-size のリスナを追加し、各行・各列の情報を返却します。

今回はサンプルとして、列の情報のみを返却してみます。

以下のように実装します。

export class MyZipCodeFieldLayouter implements IUIElementLayouterExpandCaller {

    public isSupported(element: IUIElement): boolean {
        return element.instance.elementTypeName === MyZipCodeField.name;
    }

    public initialize(element: IUIElement, container: IUIContainer): void {
        const eventListener = container.eventListener;

        // テーブルエディタが表示されたとき
        eventListener.addEventListener(element, 'designer-get-table-size', async () => {
            // エレメントの表示位置を取得する
            const rect = element.getClientRect();

            // テーブルの各行列サイズを返却する
            return {
                // 列
                columns: [
                    // position には、列の堺となる場所（単位：px）を指定します。
                    // supported には、テーブルエディタに表示する機能を指定します。 表示されるだけで、実際に動作しません。
                    // サイズ変更を動作させるためには、designer-set-table-size イベントを実装します。
                    // 行・列の追加・削除を動作させるためには、designer-toolbar-push-table イベントを実装します。
                    {position: rect.left}, // 左上の位置
                    {position: rect.left + 100, supported: {changeWidth: true, cloneColumn: true, insertColumn: true, removeColumn: true}},
                    {position: rect.left + 200, supported: {changeWidth: true, cloneColumn: true, insertColumn: true, removeColumn: true}}
                ],
                // 行
                rows: [
                    {position: rect.top} // 左上の位置
                ]
            };
        });
    }

}

6.5.3. テーブルの各行列サイズを更新する¶

テーブルエディタで表示されている行・列の堺にある三角マークをドラッグすると、サイズの変更が開始されます。
ドラッグ操作が終了したときに、最終的に決定したサイズを取得するため、イベントリスナで designer-set-table-size のリスナを追加し、新しいサイズの情報を取得します。
サイズを取得したら、実際にエレメント上で行・列のサイズを変更する実装を行います。

以下のように実装します。

export class MyZipCodeFieldLayouter implements IUIElementLayouterExpandCaller {

    public isSupported(element: IUIElement): boolean {
        return element.instance.elementTypeName === MyZipCodeField.name;
    }

    public initialize(element: IUIElement, container: IUIContainer): void {
        const eventListener = container.eventListener;

        eventListener.addEventListener(element, 'designer-get-table-size', async () => {
            // （省略）
        });

        // テーブルエディタで行列のサイズが変更されたとき
        eventListener.addEventListener(element, 'designer-set-table-size', (eventValue) => {
            // テーブルの列サイズの変更要求があったとき
            if (eventValue.direction === 'column') {
                const index = eventValue.index;  // 列番号
                const size = eventValue.size;    // 変更後のサイズ（単位：px）
                // TODO: ここに、列サイズを変更する処理を実装する
            }
            // テーブルの行サイズの変更要求があったとき
            if (eventValue.direction === 'row') {
                // （省略）
            }
        });
    }

}

目次

6.5. テーブルエディタを実装する¶

6.5.1. イベントリスナを実装する¶

6.5.2. テーブルの各行列サイズを返却する¶

6.5.3. テーブルの各行列サイズを更新する¶

目次

目次

6.5. テーブルエディタを実装する¶

6.5.1. イベントリスナを実装する¶

6.5.2. テーブルの各行列サイズを返却する¶

6.5.3. テーブルの各行列サイズを更新する¶

6.5.4. テーブルの行列を追加・削除する¶

6.5.4.1. 動作を確認する¶

目次