CellView

A themeable cell view for list or collection display with interactive features.

CellView provides a rich set of features for displaying items in collections:

• Title and subtitle text display with automatic truncation
• Selection state with visual feedback
• Optional icons for kind/type indication
• Action buttons for lock, duplicate, and delete operations
• Drag and drop support with visual feedback and auto-scrolling
• Hover states and smooth transitions
• Theme-aware styling with light/dark mode support
• Input style mode for form-like appearance

The view is commonly used within CellCollectionView for displaying lists of items with consistent styling and behavior.

Example usage:

var cell = new CellView();
cell.title = "Item Name";
cell.subTitle = "Description";
cell.kindIcon = Entypo.DOC_TEXT;
cell.handleTrash = () -> deleteItem();
cell.bindDragDrop(click, handleReorder);

Instance Members #

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

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

Whether this cell is currently selected. Selected cells display with accent colors and borders.

The main title text to display in the cell. Text is automatically truncated if it exceeds the available width.

The subtitle text displayed below the title. Rendered in italic style with smaller font size. Text is automatically truncated if it exceeds the available width.

The index of this cell within its parent collection. Used for drag and drop reordering operations. Setting a new index resets the hover state.

Reference to the parent collection view containing this cell. Used to check scrolling state for hover behavior.

When true, applies input-style theming with lighter appearance. Used for cells that represent form inputs or editable fields.

When true in input style, displays the title with italic skew to indicate an empty or placeholder value.

Whether this cell represents a locked/protected item. Locked cells display with a darker background and lock icon.

Optional icon to display on the left side indicating the item type. Uses the Entypo icon set.

Whether this cell is currently being dragged. Read-only property updated during drag operations.

Callback invoked when the trash/delete button is clicked. If null, the trash button is not displayed.

Callback invoked when the lock/unlock button is clicked. If null, the lock button is not displayed.

Callback invoked when the duplicate button is clicked. If null, the duplicate button is not displayed.

Enables drag and drop functionality for this cell.

Disables drag and drop functionality for this cell. Cleans up drag handlers and resets dragging state.

Creates a new CellView instance.

Initializes the cell with:

• Column layout for title and subtitle
• Text views with appropriate styling
• Border configuration
• Event handlers for hover states
• Auto-updating style based on theme and state

Private Members #

Event when any observable value as changed on this instance.

Event when theme field changes.

Event when selected field changes.

Event when title field changes.

Event when subTitle field changes.

Event when itemIndex field changes.

Event when collectionView field changes.

Event when inputStyle field changes.

Event when displaysEmptyValue field changes.

Event when locked field changes.

Event when kindIcon field changes.

Event when handleTrash field changes.

Event when handleLock field changes.

Event when handleDuplicate field changes.

Event when dragging field changes.

Event when clonedForDragging field changes.

Event when hover field changes.

Event when appliedHoverItemIndex field changes.

Updates the title text view based on the current title property. Hides the text view when title is null.

Updates the subtitle text view based on the current subTitle property. Hides the text view when subTitle is null.

Clips the title text to fit within the available width. Called during layout to prevent text overflow.

Clips the subtitle text to fit within the available width. Called during layout to prevent text overflow.

Updates the icon layout based on current icon properties. Creates icon buttons for trash, lock, duplicate, and kind icon as needed. Adjusts text padding when a kind icon is present.

Updates all visual styling based on current state and theme.

Handles different visual states:

• Selected: Accent colors and borders
• Locked: Darker background with muted text
• Hover: Light background (when not scrolling)
• Input style: Different padding and border configuration
• Empty value: Italic skewed text

Creates a visual clone of this cell for drag visualization. The clone has all the same properties but is marked as a dragging clone.

Finds the first parent scroller that has scrolling enabled. Used for auto-scrolling during drag operations.

Updates the drag visualization and other cells based on drag position. Handles:

• Moving the dragged cell visual
• Calculating which cells should shift position
• Determining auto-scroll needs when near container edges

Updates the positions of other cells in response to dragging. Cells shift up or down with smooth transitions based on the dragged cell's position relative to their centers.

Performs auto-scrolling when dragging near container edges. Called every frame during drag operations.

Metadata #