[space-picker] user color space included when import {colorjs.io/dist/color.js} not {colorjs.io/src/index.js}

[sidewayss]

Source code is here: https://github.com/sidewayss/sidewayss.github.io/tree/main/scratch

Both these pages create a custom color space and add it to the registry. The only difference between the two files is:

 import Color from "https://colorjs.io/dist/color.js";

versus

import Color from "https://colorjs.io/src/index.js";

This page's picker includes the custom color space in the <space-picker>, as the last item in the list: "sRGB (0-255)".

This page's picker does not include it.

Is there a way to work around this? Or is this a feature request?

[DmitrySharabin]

Hey there, @sidewayss, sorry for the delay.

I investigated the issue, and here is what I found.

All color elements extend the ColorElement base class, which exposes an instance of the Color class to all of them (via a Color static property).

The Color class, in its turn, is imported from https://colorjs.io/dist/color.js. So, when you extend an instance from https://colorjs.io/dist/color.js, you are changing the same instance that all color elements use under the hood. And, as a result, you can see the new color space in the space picker.

OTOH, when you add a color space to the registry of a Color object from https://colorjs.io/src/index.js, you are extending an object that the color elements know nothing about.

If you want the color elements to pick it up, we have an official way—you can change the Color object that the color elements use. You can do it individually, for example, for all space pickers:

import Color from "https://colorjs.io/src/index.js";
import { SpacePicker } from "https://elements.colorjs.io/index.js";

SpacePicker.Color = Color;

// Add a new color space to the register

Alternatively, you can do it for all color elements in one go:

import Color from "https://colorjs.io/src/index.js";
import ColorElement from "https://elements.colorjs.io/src/common/color-element.js";

ColorElement.Color = Color;

// Add a new color space to the register

I hope that makes sense.

[sidewayss]

@DmitrySharabin - thanks for explanation. It makes sense.