カラーピッカーをコンテンツグラフに公開します

私は岩の下に住んでいたに違いありません。 ヌゲットパッケージ、構成可能なカラーピッカーを最適化するCMSに追加します。これは、CMS編集モードで色を選択するための直感的なインターフェイスを編集者に提供する素晴らしいアドオンです。

パッケージは、少量の構成の後に使用する準備ができています。ヘッドレスアーキテクチャでは重要な1つの細部を除いて、すべてが完全に機能します。デフォルトでは、選択した色はOptimizelyグラフでは正しくシリアル化されていません。これは、パッケージがカスタムバッキングタイプを導入するために起こります icolor コンテンツプロパティで使用されるインターフェイス：

[ColorPicker]
public virtual IColor? PaletteColor { get; set; }

欠落しているのは、aの登録です propertyConverterProvider それは色のプロパティを認識し、それがどのようにシリアル化されるべきかを指定することができます。これを達成するには、いくつかのクラスを作成する必要があります。

まず、グラフに公開するデータを含めるには、簡単なレコードまたはクラスが必要です。

public record PaletteColorModel(string? Name, string? HexCode);

次に、aを作成する必要があります propertyModel それには必要です icolor 値と変換して、GraphQLモデルに変換します。このようにして、グラフを介して露出したときに、色のプロパティが必要な方法でマッピングおよびシリアル化されていることを確認できます。

internal class PropertyPaletteColorModel: PropertyModelPaletteColorModel, PropertyPaletteColor>
{
    public PropertyPaletteColorModel(PropertyPaletteColor property) : base(property)
    {
        var color = property.Value as IColor;
        Value = new PaletteColorModel(color?.Name, color?.Value);
    }
}

一般的なパラメーターに見られるように、それらはマッピングのソースと出力を指定します。 Palettecolormodel 私たちのクラスです PropertyPaletteColor からのプロパティバッキングタイプです doublejay.epi.configurablecolorpicker 名前空間。

次のステップは、初期化するコンバーターを作成することです propertyPalettecolormodel そして、シリアル化する必要があるプロパティを通過します。

internal class PropertyPaletteColorModelConverter : IPropertyConverter
{
    public IPropertyModel Convert(PropertyData propertyData, ConverterContext contentMappingContext)
    {
        if (propertyData is not PropertyPaletteColor propertyPaletteColor)
        {
            throw new InvalidOperationException();
        }

        return new PropertyPaletteColorModel(propertyPaletteColor);
    }
}

最後になりましたが、プロバイダーを追加する必要があります。このプロバイダーの仕事は、カラープロパティをシリアル化する必要がある場合、プロセスがカスタムコンバーターにリダイレクトされることを確認することです。プロパティタイプを正しいシリアル化ロジックに接続し、すべてが舞台裏でスムーズに機能するようにします。

internal class CustomPropertyConverterProvider : IPropertyConverterProvider
{
    public int SortOrder => 200;

    public IPropertyConverter? Resolve(PropertyData propertyData)
    {
        if (propertyData is PropertyPaletteColor)
        {
            return new PropertyPaletteColorModelConverter();
        }

        return null;
    }
}

最後に、DIコンテナにコンバーターとプロバイダーの両方を登録する必要があります。

internal static IServiceCollection AddPropertyConverters(this IServiceCollection services)
{
    services.AddSingleton();
    services.AddSingleton();

    return services;
}

プロバイダーはカラーピッカーに固有のものではないことを指摘する価値があります。別のカスタムプロパティコンバーターを追加する必要がある場合、プロバイダーを使用して、シリアル化フローを適切な場所に向けることができます。言い換えれば、ここで実証されているアプローチは一般的であり、カスタムプロパティモデルに使用または拡張できます。

それはそれです。これで、編集者が選択した色の値は、GraphQLを介して正常に公開され、フロントエンドアプリケーションで消費される可能性があります。そして、そのように、私たちはインターネットの世界をもう少しカラフルにしました！

参考文献：

https://github.com/jacobjones/doublejay.epi.configurablecolorpicker