4.2. エレメントを実装する¶

export class MySampleElement implements IUIElementCore {

    // ラッパークラスを返却します。
    // 繰り返さないシンプルなエレメントを作成する場合は `SimpleUIElement`、
    // 手動で繰り返すエレメントを作成する場合は `IndexableUIElement`、
    // 自動的に繰り返すエレメントを作成する場合は `RepeatableUIElement` を返却してください。
    public get wrapperClass(): UIElementWrapperClass {
        return 'SimpleUIElement';
    }

    // エレメント名を返却します。
    // { エレメントのクラス名 } .name のように、エレメントのクラス名を返却してください。
    // エレメント名が他のエレメント名と重複すると、正常に動作しない恐れがあります。
    public get elementTypeName(): string {
        return MySampleElement.name;
    }

    // エレメントの表示形式を返却します。
    public get displayType(): UIElementDisplayType {
        // TODO: 後述します
    }

    // エレメントを非表示状態にするときの非表示方法を返却します。
    // 実装がない場合は REMOVE_NODE_TREE を返却した場合と同じ動作です。
    public get hiddenType(): UIElementHiddenType {
        // TODO: 後述します
    }

    // エレメントの配置制約を定義したクラスのクラス名を返却します。
    public get constraintClass(): UIComponentConstraintClass {
        // TODO: 後述します
    }

    // エレメント固有プロパティの定義を返却します。
    public get uniquePropertyDefinition(): IUniquePropertyDefinition {
        // TODO: 後述します
    }

    // 共通プロパティの定義を返却します。
    public get commonPropertyDefinition(): ICommonPropertyDefinition {
        return {};
    }

    // createChildren(), updateChildren(), cloneChildren() で
    // 子エレメントとして自身以外のエレメントを使用する場合に、そのクラス名を返却します。
    // ここで返却されたエレメントのクラスは、IM-BloomMaker 側によって自動的にクラスが登録されるため、
    // 上記の3メソッドの中で使用できます。
    // 子エレメントを実装する必要がない場合は、空の配列を返却します。
    public get dependElements(): UIElementCoreClass[] {
        return [];
    }

    // エレメントが作成された際に一度だけ呼び出されるメソッドです。
    // このメソッド内で、このエレメントで使用するルートとなる HTML エレメントを、HTMLElementBuilder を経由して返却します。
    // updateElement() によって都度変更されない常時適用する属性値やイベントの設定は、このメソッドに実装します。
    public createElement(
        container: IUIContainer,
        properties: IUIElementPropertyAccessor<PropertyDefinition & ICommonPropertyDefinition>
    ): IHTMLElementBuilder {
        // TODO: 後述します
    }

    // レンダリングが必要になった際に呼び出されるメソッドです。
    // プロパティで紐づけている変数の値が変更された際など、エレメント側を更新する必要がある場合は、このメソッドに実装します。
    public updateElement(
        builder: IHTMLElementBuilder,
        container: IUIContainer,
        properties: IUIElementPropertyAccessor<PropertyDefinition & ICommonPropertyDefinition>
    ): void {
        // TODO: 後述します
    }

    // レンダリングが行われた後に、レンダリングが不要になった際に呼び出されるメソッドです。
    // document.body や window などグローバルに対してのイベントの設定を解除する処理を、このメソッドに実装します。
    // 特に実装がない場合は、このメソッドの実装は不要です。
    public hiddenElement(
        builder: IHTMLElementBuilder,
        container: IUIContainer,
        properties: IUIElementPropertyAccessor<PropertyDefinition & ICommonPropertyDefinition>
    ): void {
        // TODO: 後述します
    }

    // エレメントが削除された際に呼び出されるメソッドです。
    // 外部ライブラリを使用しており、ライブラリの解放処理が必要な場合に、このメソッドに実装します。
    // そのため、エレメントの実装のみで表示処理が完結している場合は、このメソッドの実装は不要です。
    public destroyElement(
        builder: IHTMLElementBuilder,
        container: IUIContainer,
        properties: IUIElementPropertyAccessor<IUniquePropertyDefinition & ICommonPropertyDefinition>
    ): void {
        return;
    }

    // エレメントが作成された際に一度だけ呼び出されるメソッドです。 createElement() の後に呼び出されます。
    // 自身のエレメント配下に子エレメントを作成する必要がある場合、このメソッドでエレメントを作成し、配列として返却します。
    // 子エレメントが不要な場合は、空配列を返却します。
    // IHTMLElementBuilder.appendChild() で子要素を追加する場合と異なり、
    // デザイナ上でコンテナに配置した際に、子要素はそれぞれ別のエレメントとして扱われます。
    public createChildren(self: IUIElement, container: IUIContainer): IUIElement[] {
        return [];
    }

    // レンダリングが必要になった際に呼び出されるメソッドです。 updateElement() の後に呼び出されます。
    // プロパティの状態によって子エレメントの数に変更がある場合、新しい子エレメントの配列を返却することで、子エレメントを再配置します。
    // 子エレメントの数に変更がない場合でも、子エレメントのプロパティ値を変更する場合は、このメソッドに実装します。
    // createChildren() で空配列を返却しており、子エレメントを追加する予定がない場合は、このメソッドは実装しません。
    public updateChildren(
        children: IUIElement[],
        self: IUIElement,
        container: IUIContainer,
        properties: IUIElementPropertyAccessor<IUniquePropertyDefinition & ICommonPropertyDefinition>
    ): IUIElement[] {
        return children;
    }

    // エレメントが複製された際に呼び出されるメソッドです。 createElement() の後に呼び出されます。
    // children 引数には、同様に複製されたエレメントが格納されています。
    // プロパティの状態によって子エレメントの数に変更がある場合、新しい子エレメントの配列を返却することで、子エレメントを再配置します。
    // 子エレメントの数に変更がない場合でも、子エレメントのプロパティ値を変更する場合は、このメソッドに実装します。
    // 子エレメントに対して何も操作しない場合は、children 引数をそのまま返却します。
    public clonedChildren(
        children: IUIElement[],
        self: IUIElement,
        container: IUIContainer,
        properties: IUIElementPropertyAccessor<IUniquePropertyDefinition & ICommonPropertyDefinition>
    ): IUIElement[] {
        return children;
    }
}

public get displayType(): UIElementDisplayType {
    return 'INPUT';
}

public get hiddenType(): UIElementHiddenType {
    return 'DISPLAY_CSS';
}

public createElement(
    container: IUIContainer,
    properties: IUIElementPropertyAccessor<PropertyDefinition & ICommonPropertyDefinition>
): IHTMLElementBuilder {
    // エレメントのビルダを作成するには、IHTMLElementBuilder.createElement() を利用します。
    const builder = window.imHichee.HTMLElementBuilder.createElement('input', HTMLInputElement);

    // 返却値には作成したビルダを指定します。
    return builder;
}

public createElement(
    container: IUIContainer,
    properties: IUIElementPropertyAccessor<PropertyDefinition & ICommonPropertyDefinition>
): IHTMLElementBuilder {
    const builder = window.imHichee.HTMLElementBuilder.createElement('input', HTMLInputElement);

    // setCSS() を使用すると、作成したエレメントにstyleを追加できます。
    builder.setCSS('padding', '10px');

    return builder;
}

public createElement(
    container: IUIContainer,
    properties: IUIElementPropertyAccessor<PropertyDefinition & ICommonPropertyDefinition>
): IHTMLElementBuilder {
    const builder = window.imHichee.HTMLElementBuilder.createElement('input', HTMLInputElement);

    // setAttribute() を使用すると、作成したエレメントにstyleを追加できます。
    builder.setAttribute('name', 'sample-element');

    return builder;
}

public createElement(
    container: IUIContainer,
    properties: IUIElementPropertyAccessor<PropertyDefinition & ICommonPropertyDefinition>
): IHTMLElementBuilder {
    const builder = window.imHichee.HTMLElementBuilder.createElement('input', HTMLInputElement);

    // 独自の属性名は、最初に data- を付与します。
    builder.setAttribute('data-my-attribute', 'my-attribute-value');

    return builder;
}

public createElement(
    container: IUIContainer,
    properties: IUIElementPropertyAccessor<PropertyDefinition & ICommonPropertyDefinition>
    ): IHTMLElementBuilder {

        // まず、<input>タグを作成します。
        const inputElement = document.createElement('input');

        // <input>タグに入力が行われたときに、sampleValueプロパティを更新するようにイベントリスナを付与します。
        inputElement.addEventListener('input', (e) => {
            properties.setProperty('sampleValue', inputElement.value, false);
        });

        // IHTMLElementBuilder.fromElement() を利用して、作成したエレメントからビルダを生成します。
        const builder = window.imHichee.HTMLElementBuilder.fromElement(inputElement);

        return builder;
    }

public updateElement(
    builder: IHTMLElementBuilder,
    container: IUIContainer,
    properties: IUIElementPropertyAccessor<PropertyDefinition & ICommonPropertyDefinition>
    ): void {
        // プロパティの値を取得するには、properties.getProperty() でプロパティ名を文字列で指定します。
        const sampleValue = properties.getProperty('sampleValue').toString();

        // builder.setValue() で、実際に描画される<input>タグのvalue属性に、sampleElementの値を反映します。
        builder.setValue(sampleValue);
    }

type ResizeEventCallback = (this: Window, e: Event) => void;
private _attachedResizeCallback: ResizeEventCallback | null;

constructor() {
    this._attachedResizeCallback = null;
}

public updateElement(
    builder: IHTMLElementBuilder,
    container: IUIContainer,
    properties: IUIElementPropertyAccessor<PropertyDefinition & ICommonPropertyDefinition>
): void {
    // window に対して resize イベントを登録します。
    // 重複登録にならないよう、登録済みのコールバックの存在を確認します。
    if (!this._attachedResizeCallback) {
        const callback = this.resizeWindow.bind(this);
        this._attachedResizeCallback = callback;
        window.addEventListener('resize', callback);
    }
}

public hiddenElement(
    builder: IHTMLElementBuilder,
    container: IUIContainer,
    properties: IUIElementPropertyAccessor<PropertyDefinition & ICommonPropertyDefinition>
): void {
    // window に対して resize イベントを解除します。
    if (this._attachedResizeCallback) {
        window.removeEventListener('resize', this._attachedResizeCallback);
        this._attachedResizeCallback = null;
    }
}

private resizeWindow(): void {
    // ウィンドウがリサイズした際の処理を実装します。
}

export class MySampleElement implements IUIElementCore {

    // 子要素のビルダを、あらかじめメソッドの外で宣言しておきます。理由は後述します。
    private _inputElementBuilder: IHTMLElementBuilder;

public createElement(
    container: IUIContainer,
    properties: IUIElementPropertyAccessor<PropertyDefinition & ICommonPropertyDefinition>
): IHTMLElementBuilder {

    const inputElement = document.createElement('input');
    inputElement.addEventListener('input', (e) => {
        properties.setProperty('value', inputElement.value, false);
    });

    // ビルダを生成し、あらかじめ宣言している変数に代入する
    this._inputElementBuilder = window.imHichee.HTMLElementBuilder.fromElement(inputElement);

    // <div> のエレメントビルダを生成
    const builder = window.imHichee.HTMLElementBuilder.createElement('div', HTMLDivElement);

    // 子要素を追加
    builder.appendChild(this._inputElementBuilder);

    return builder;
}

public updateElement(
    builder: IHTMLElementBuilder,
    container: IUIContainer,
    properties: IUIElementPropertyAccessor<PropertyDefinition & ICommonPropertyDefinition>
): void {
    // プロパティの値を文字列で取得します。
    const sampleValue = properties.getProperty('sampleValue').toString();

    // 子要素のエレメントに値をセットします。
    // 子ノードの IHTMLElementBuilder は自動で build() が呼ばれない仕様であるため、独自で build() を実行します。
    this._inputElementBuilder.setValue(sampleValue).build();
}