ColorFieldView

View source
ceramic.Entity → ceramic.Visual → ceramic.Quad → ceramic.Layer → ceramic.View → ceramic.LinearLayout → FieldView → elements.ColorFieldView (Class)

A color input field with an integrated color picker popup.

This field provides multiple ways to input colors:

  • Direct hex color input (#RRGGBB format)
  • Visual color preview box that opens a color picker when clicked
  • Full-featured color picker with HSB/HSLuv spectrum and sliders

The field validates hex input in real-time and shows a live preview. The color picker appears as a floating popup positioned intelligently to stay within screen bounds.

Features:

  • Hex color validation with automatic formatting
  • Live color preview
  • Floating color picker with triangle pointer
  • Smart positioning to avoid screen edges
  • Keyboard shortcuts (Escape to close, Enter/Space to toggle)
  • Theme-aware styling
  • Disabled state support

Example usage:

var colorField = new ColorFieldView();
colorField.value = Color.BLUE;
colorField.setValue = (field, color) -> {
    myObject.color = color;
};
See: ColorPickerView, FieldView

Instance Members

elements
theme: Theme

The theme to use for styling. If null, uses the global context theme.

elements
value: ceramic.Color

The current color value. Updates the hex display and color preview when changed.

elements
disabled: Bool

Whether the field is disabled. Disabled fields cannot be edited and appear dimmed.

elements
invalidateTheme(): Void
elements
setValue(field: ColorFieldView, value: ceramic.Color): Void

Hook function called when the color value changes. Override this to handle color changes.

Name Type Description
field ColorFieldView The color field that changed
value ceramic.Color The new color value
elements
invalidateValue(): Void
elements
invalidateDisabled(): Void
elements
invalidatePickerVisible(): Void
elements
focus(): Void

Focuses the field and activates text editing.

elements
destroy(): Void
elements
hitsSelfOrDerived(x: Float, y: Float): Bool
Name Type
x Float
y Float
Returns
Bool
elements
usesScanCode(scanCode: ceramic.ScanCode): Bool
Name Type
scanCode ceramic.ScanCode
Returns
Bool
elements
usesKeyCode(keyCode: ceramic.KeyCode): Bool
Name Type
keyCode ceramic.KeyCode
Returns
Bool
elements
new(): Void

Creates a new ColorFieldView.

Initializes:

  • Hex color text input with # prefix
  • Color preview box
  • Hidden color picker container
  • Keyboard shortcuts and event handlers
  • Theme-based styling

Private Members

elements
RE_HEX_COLOR: EReg

Regular expression to validate complete 6-digit hex color codes.

elements
RE_HEX_COLOR_ANY_LENGTH: EReg

Regular expression to validate partial hex color input.

elements
unobservedTheme: Theme
elements
unobservedValue: ceramic.Color
elements
unobservedDisabled: Bool
elements
pickerVisible: Bool

Whether the color picker popup is currently visible.

elements
unobservedPickerVisible: Bool
elements
keyBindings: ceramic.KeyBindings
elements
container: ceramic.RowLayout
elements
textView: ceramic.TextView
elements
textPrefixView: ceramic.TextView
elements
editText: ceramic.EditText
elements
colorPreview: ceramic.View
elements
pickerContainer: ceramic.View
elements
pickerView: ColorPickerView
elements
bubbleTriangle: BiBorderedTriangle
elements
bubbleTopBorderLeft: ceramic.Quad
elements
bubbleTopBorderRight: ceramic.Quad
elements
updatingFromPicker: Int
elements
editingThisFrame: Bool
elements
emitThemeChange(current: Theme, previous: Theme): Void

Event when theme field changes.

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

Event when value field changes.

Name Type
current ceramic.Color
previous ceramic.Color
elements
emitDisabledChange(current: Bool, previous: Bool): Void

Event when disabled field changes.

Name Type
current Bool
previous Bool
elements
emitPickerVisibleChange(current: Bool, previous: Bool): Void

Event when pickerVisible field changes.

Name Type
current Bool
previous Bool
elements
didLostFocus(): Void

Handles focus loss by validating and correcting the hex input. If the input is empty or invalid, resets to the current color value.

elements
layout(): Void
elements
layoutContainer(): Void
elements
updatePickerVisibility(): Void
elements
updatePickerPosition(): Void
elements
updateEditingThisFrame(): Void
elements
layoutPickerContainer(): Void
elements
bindKeyBindings(): Void
elements
updateFromEditText(text: String): Void

Validates and processes hex color input from the text field. Handles various input formats (#RRGGBB, 0xRRGGBB, RRGGBB). Updates the color value if valid, otherwise reverts to current value.

Name Type Description
text String The input text to validate
elements
handleStopEditText(): Void
elements
updateFromValue(): Void

Updates the UI elements to reflect the current color value. Updates the hex text display and color preview box.

elements
updateStyle(): Void
elements
togglePickerVisible(): Void
elements
updatePickerContainer(): Void

Creates or destroys the color picker popup based on visibility state. Handles picker creation, positioning, and color synchronization.

Metadata

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