6.1. ツールバーの拡張について¶
IM-BloomMaker のレイアウトモードでは、エレメントの編集機能を簡易化しているため、エレメントのプロパティエディタは表示されません。プロパティエディタの代わりにツールバーが用意されています。
エレメントを選択すると、エレメントのプロパティ設定に応じて IM-BloomMaker が判断し、基本的な編集機能 を自動的に用意した状態で、ツールバーが表示されます。
基本的な編集機能よりも、エレメントに対して高度な編集が必要な場合は、ツールバーの「操作」機能に操作メニューを実装する必要があります。
この章では、既存・自作のエレメントに対して、ツールバーに機能メニューを実装し、利用できるようにするまでの流れを説明します。
注意
ツールバーと操作メニューは、2024 Spring(Iris) 以降のバージョンで利用可能です。
レイアウトモードでのみ使用可能です。 デベロップモードでは動作しません。
6.1.1. 基本的な編集機能¶
ツールバーには、以下の基本的な編集機能が用意されています。
フォントの変更
テキストサイズの変更
テキストの装飾(太字・斜体・下線・取り消し線)
横位置の設定(左寄せ・中央寄せ・右寄せ)
背景色、文字色の変更
- アイコンの変更
- 固有プロパティの追加設定が必要です。
位置調整
- テキストの直接編集
- 固有プロパティの追加設定が必要です。
メモの追加・更新・削除
切り取り・コピー・貼り付け
エレメントの削除
上記以外でエレメント固有のプロパティ値や、大きく見た目を変更する機能を付加したい場合は、操作メニューの実装が必要です。
「事前準備」から操作メニューを実装してください。
6.1.1.1. アイコンの変更¶
エレメントの固有プロパティの設定で iconClass を “font-awesome” に設定すると、エレメント選択時に表示されるツールバーに「アイコン」機能が追加されます。
エレメント固有プロパティの詳細については、「固有プロパティを追加する」を参照してください。
6.1.1.2. テキストの直接編集¶
エレメントの固有プロパティの設定で directInput を true に設定すると、エレメント選択時に表示されるツールバーに「テキスト編集」機能が追加されます。
エレメント固有プロパティの詳細については、「固有プロパティを追加する」を参照してください。
6.1.2. 事前準備¶
自作のエレメントに対して操作メニューを実装する場合は、「エレメント・アクションアイテムを作成する」にしたがってエレメントを作成してください。
既存のエレメントに対して操作メニューを実装する場合は、「事前準備」にしたがって事前準備を行ってください。
6.1.2.1. Layouter を実装する¶
エレメント独自の操作メニューは、IUIElementLayouterExpandCaller インタフェースを持つクラスに実装していきます。
{VSCODE_HOME}/src/public/layouter に、操作メニューを実装するファイル(.tsファイル)を作成します。
ここでは、MyZipCodeFieldLayouter.ts というファイル名で作成しています。
このファイルに、IUIElementLayouterExpandCaller インタフェースを実装した、操作メニューのクラスを定義していきます。
export class MyZipCodeFieldLayouter implements IUIElementLayouterExpandCaller {
public isSupported(element: IUIElement): boolean {
// 引数が操作メニュー表示対象のエレメントであれば、true を返却する
// ここでは、エレメントが MyZipCodeField であれば true を返却する
return element.instance.elementTypeName === MyZipCodeField.name;
}
public initialize(element: IUIElement, container: IUIContainer): void {
// ここに操作メニューのイベントハンドラを実装する
}
}
6.1.2.2. Layouter をレポジトリに登録する¶
作成した Layouter クラスを UIElementLayouterExpandCallerRepository に登録します。
登録処理は {VSCODE_HOME}/src/index.ts に実装します。
const caller = window.imHichee.UIElementLayouterExpandCallerRepository;
if (caller) {
caller.registerInstance(new MyZipCodeFieldLayouter());
}
以上で準備は完了です。