ColorPickerView

View source
ceramic.Entity → ceramic.Visual → ceramic.Quad → ceramic.Layer → ceramic.View → ceramic.LayersLayout → elements.ColorPickerView (Class)
Implements: RelatedToFieldView, tracker.Observable

A comprehensive color picker interface combining multiple color selection methods.

This view provides:

  • HSB/HSL color gradient with hue spectrum
  • HSLuv perceptually uniform color space option
  • RGB numeric input fields (0-255)
  • HSL/HSLuv numeric input fields (H: 0-360, S/L: 0-100%)
  • Saved color palette with drag-and-drop reordering
  • Color mode switching between HSL and HSLuv

The picker automatically synchronizes all input methods - changing the color through any interface updates all others. Users can save frequently used colors to a palette for quick access.

Layout:

  • Left: Gradient picker and spectrum
  • Center: RGB input fields
  • Right: HSL/HSLuv input fields and buttons
  • Bottom: Saved color palette (when colors exist)

Instance Members

elements
observedDirty: Bool

Default is false, automatically set to true when any of this instance's observable variables has changed.

elements
theme: Theme

Optional custom theme for this picker

elements
colorValue: ceramic.Color

The currently selected color value (read-only, use setColor methods to change)

elements
colorFieldView: ColorFieldView

Associated color field view that this picker is editing (optional)

elements
invalidateTheme(): Void
elements
invalidateColorValue(): Void
elements
invalidateDraggingColorPreview(): Void
elements
invalidateDraggingColorDropIndex(): Void
elements
invalidatePaletteHeight(): Void
elements
invalidatePaletteColorPreviews(): Void
elements
setColorFromRGB(r: Int, g: Int, b: Int): Void

Sets the selected color from RGB values. Updates all UI elements to reflect the new color.

Name Type Description
r Int Red component (0-255)
g Int Green component (0-255)
b Int Blue component (0-255)
elements
setColorFromHSL(h: Float, s: Float, l: Float): Void

Sets the selected color from HSL values. Updates all UI elements to reflect the new color.

Name Type Description
h Float Hue in degrees (0-360)
s Float Saturation (0-1)
l Float Lightness (0-1)
elements
setColorFromHSB(h: Float, s: Float, b: Float): Void

Sets the selected color from HSB/HSV values. Updates all UI elements to reflect the new color.

Name Type Description
h Float Hue in degrees (0-360)
s Float Saturation (0-1)
b Float Brightness/Value (0-1)
elements
setColorFromHSLuv(h: Float, s: Float, l: Float): Void

Sets the selected color from HSLuv values. HSLuv provides perceptually uniform color selection.

Name Type Description
h Float Hue in degrees (0-360)
s Float Saturation (0-1)
l Float Lightness (0-1)
elements
relatedFieldView(): FieldView

Returns the associated field view for this color picker. Used for contextual positioning and updates.

Returns Description
FieldView The related ColorFieldView or null
elements
new(?colorFieldView: ColorFieldView): Void

Creates a new color picker view.

Name Type Default Description
colorFieldView ColorFieldView (optional) Optional associated color field for context

Private Members

elements
FIELD_ROW_WIDTH: Float

Width of input field rows

elements
FIELD_ADVANCE: Float

Vertical spacing between fields

elements
BUTTON_ADVANCE: Float

Vertical spacing for buttons

elements
FIELD_Y_GAP: Float

Additional gap between field groups

elements
PADDING: Float

General padding for the picker

elements
GRADIENT_SIZE: Float

Size of the main color gradient square

elements
SPECTRUM_WIDTH: Float

Width of the hue/lightness spectrum bar

elements
PALETTE_COLOR_SIZE: Float

Size of palette color swatches

elements
PALETTE_COLOR_GAP: Float

Gap between palette colors

elements
unobservedTheme: Theme
elements
unobservedColorValue: ceramic.Color
elements
draggingColorPreview: ColorPickerPaletteColorView

Computed property that returns the palette color currently being dragged.

elements
unobservedDraggingColorPreview: ColorPickerPaletteColorView
elements
draggingColorDropIndex: Int

Computes the palette index where a dragged color should be dropped. Uses distance calculation to find the nearest palette slot.

elements
unobservedDraggingColorDropIndex: Int
elements
paletteHeight: Float

Height of the palette area

elements
unobservedPaletteHeight: Float
elements
hsluv: Bool

Whether to use HSLuv color space instead of HSL

elements
paletteColors: ceramic.ReadOnlyArray<ceramic.Color>

User's saved palette colors

elements
hsbGradientView: ColorPickerHSBGradientView

HSB color gradient view for saturation and brightness selection

elements
hsbSpectrumView: ColorPickerHSBSpectrumView

HSB spectrum view for hue selection (vertical color bar)

elements
hsluvGradientView: ColorPickerHSLuvGradientView

HSLuv perceptually uniform gradient view for saturation and lightness selection

elements
hsluvSpectrumView: ColorPickerHSLuvSpectrumView

HSLuv spectrum view for lightness selection (vertical lightness bar)

elements
rgbRedField: TextFieldView

Text input field for red color component (0-255)

elements
rgbGreenField: TextFieldView

Text input field for green color component (0-255)

elements
rgbBlueField: TextFieldView

Text input field for blue color component (0-255)

elements
rgbRedFieldValue: String

Cached text value of the red field to detect changes and prevent feedback loops

elements
rgbGreenFieldValue: String

Cached text value of the green field to detect changes and prevent feedback loops

elements
rgbBlueFieldValue: String

Cached text value of the blue field to detect changes and prevent feedback loops

elements
rgbLabel: ceramic.TextView

Header label displaying "RGB" above the RGB input fields

elements
hslHueField: TextFieldView

Text input field for hue component in HSL/HSLuv mode (0-360 degrees)

elements
hslSaturationField: TextFieldView

Text input field for saturation component in HSL/HSLuv mode (0-100%)

elements
hslLightnessField: TextFieldView

Text input field for lightness component in HSL/HSLuv mode (0-100%)

elements
hslHueFieldValue: String

Cached text value of the hue field to detect changes and prevent feedback loops

elements
hslSaturationFieldValue: String

Cached text value of the saturation field to detect changes and prevent feedback loops

elements
hslLightnessFieldValue: String

Cached text value of the lightness field to detect changes and prevent feedback loops

elements
hslLabel: ceramic.TextView

Header label displaying "HSL" or "HSLuv" above the HSL input fields

elements
updatingColor: Int

Counter to prevent infinite update loops when synchronizing color values across UI elements

elements
hslFieldsLocked: Int

Lock counter to prevent HSL field updates during manual field edits

elements
paletteAddButton: Button

Button to add current color to palette or remove it if already exists

elements
colorModeButton: Button

Button to switch between HSL and HSLuv color space modes

elements
lastDraggingColorDropIndex: Int

Index where the last palette color drag operation should drop the color

elements
lastDraggingColorPreview: ColorPickerPaletteColorView

Reference to the palette color view that was last being dragged

elements
paletteColorPreviews: Array<ColorPickerPaletteColorView>

Array of visual previews for each color in the user's saved palette

elements
unobservedPaletteColorPreviews: Array<ColorPickerPaletteColorView>
elements
emitObservedDirty(instance: ColorPickerView, fromSerializedField: Bool): Void

Event when any observable value as changed on this instance.

Name Type
instance ColorPickerView
fromSerializedField Bool
elements
emitThemeChange(current: Theme, previous: Theme): Void

Event when theme field changes.

Name Type
current Theme
previous Theme
elements
emitColorValueChange(current: ceramic.Color, previous: ceramic.Color): Void

Event when colorValue field changes.

Name Type
current ceramic.Color
previous ceramic.Color
elements
emitDraggingColorPreviewChange(current: ColorPickerPaletteColorView, previous: ColorPickerPaletteColorView): Void

Event when draggingColorPreview field changes.

Name Type
current ColorPickerPaletteColorView
previous ColorPickerPaletteColorView
elements
emitDraggingColorDropIndexChange(current: Int, previous: Int): Void

Event when draggingColorDropIndex field changes.

Name Type
current Int
previous Int
elements
emitPaletteHeightChange(current: Float, previous: Float): Void

Event when paletteHeight field changes.

Name Type
current Float
previous Float
elements
emitPaletteColorPreviewsChange(current: Array<ColorPickerPaletteColorView>, previous: Array<ColorPickerPaletteColorView>): Void

Event when paletteColorPreviews field changes.

Name Type
current Array<ColorPickerPaletteColorView>
previous Array<ColorPickerPaletteColorView>
elements
getColorPickerWidth(): Float
Returns
Float
elements
updateSize(): Void
elements
initRGBFields(offsetX: Float): Float
Name Type
offsetX Float
Returns
Float
elements
initHSLFields(offsetX: Float): Float
Name Type
offsetX Float
Returns
Float
elements
initPaletteUI(offsetX: Float, offsetY: Float): Void
Name Type
offsetX Float
offsetY Float
elements
layout(): Void
elements
updateRGBFields(colorValue: ceramic.Color): Void
Name Type
colorValue ceramic.Color
elements
updateHSLFields(colorValue: ceramic.Color, ?hue: Float, ?saturation: Float, ?lightness: Float): Void
Name Type Default
colorValue ceramic.Color
hue Float (optional)
saturation Float (optional)
lightness Float (optional)
elements
updateGradientAndSpectrum(colorValue: ceramic.Color, ?hue: Float, ?saturation: Float, ?lightness: Float): Void
Name Type Default
colorValue ceramic.Color
hue Float (optional)
saturation Float (optional)
lightness Float (optional)
elements
setColorFromRGBFields(): Void
elements
setColorFromHSLFieldHue(): Void
elements
setColorFromHSLFieldSaturation(): Void
elements
setColorFromHSLFieldLightness(): Void
elements
createTextField(?applyValue: Function, ?minValue: Int = 0, ?maxValue: Int = 100): TextFieldView
Name Type Default
applyValue Function (optional)
minValue Int 0
maxValue Int 100
Returns
TextFieldView
elements
updateStyle(): Void
elements
saveColor(): Void
elements
switchColorMode(): Void
elements
updateColorPreviews(): Void
elements
updateFromColorDrop(): Void
elements
createColorPreview(): ColorPickerPaletteColorView
Returns
ColorPickerPaletteColorView
elements
handlePaletteColorClick(colorPreview: ColorPickerPaletteColorView): Void
Name Type
colorPreview ColorPickerPaletteColorView
elements
handlePaletteColorDrop(colorPreview: ColorPickerPaletteColorView): Void
Name Type
colorPreview ColorPickerPaletteColorView
elements
handlePaletteColorLongPress(colorPreview: ColorPickerPaletteColorView, info: ceramic.TouchInfo): Void
Name Type
colorPreview ColorPickerPaletteColorView
info ceramic.TouchInfo

Metadata

Name Parameters
:build tracker.macros.ObservableMacro.build()
:autoBuild tracker.macros.ObservableMacro.build()
:build tracker.macros.EventsMacro.build()
:autoBuild tracker.macros.EventsMacro.build()
:build ceramic.macros.EntityMacro.buildForCompletion()
:autoBuild ceramic.macros.EntityMacro.buildForCompletion()