## Overview

The Task Class Preview widget shows a preview of the task class. It serves as a configuration assistant for Task Classes (Activity Classes) in the cplace project planning module, providing immediate visual feedback as administrators configure visual properties, showing how tasks and milestones of that class will appear in actual Gantt charts.

The widget displays four preview variants simultaneously:
- **Activity**: Regular task bar appearance
- **Milestone**: Point-in-time marker appearance
- **Rollup Activity**: Collapsed summary bar appearance
- **Rollup Milestone**: Collapsed milestone indicator appearance

## Use Cases

### Primary Use Case: Task Class Configuration

Users don't explicitly "choose" this widget - it's automatically included in the default layout of every Task Class page. It is useful when:

1. **Creating New Task Classes**: Setting up visual distinctions for different types of tasks (e.g., "Development", "Testing", "Review"), choosing colors, and selecting shapes that intuitively represent task characteristics.

2. **Customizing Existing Task Classes**: Adjusting colors for better contrast or accessibility, changing bar patterns to distinguish similar task types, configuring rollup appearance for hierarchical project views.

3. **Visual Consistency Verification**: Ensuring that task visual styles are consistent across the organization, previewing how tasks will appear before applying changes.

### Problem It Solves

Without this widget, administrators would have to configure Task Class properties blindly, save changes, navigate to a Gantt chart, find a task with that class, evaluate the appearance, navigate back to make adjustments, and repeat the cycle. The preview widget eliminates this cycle by providing immediate WYSIWYG feedback.

## Design Considerations

### Embedding Context

This widget can only be embedded on pages of type `cf.activityClass` (Task Class). It reads all custom attributes from the embedding Task Class page and renders the preview accordingly.

### No Configuration Required

The widget itself has no configuration options - it's a pure preview/display widget. It visualizes the Task Class attributes:
- Shape selections (activity and milestone shapes)
- Colors (bar color, border color)
- Patterns (stripes, dots, solid fill)
- Rollup colors (optional fallback to main colors)
- Label positions

### Live Updates

Changes to any Task Class attribute trigger immediate re-rendering of the preview. The widget uses SVG-based rendering for scalable, crisp shapes.

## Related Patterns

### Part of Project Planning Master Data

This widget is part of the Master Data configuration layer that supports the visualization layer:

- **Task Classes** define how tasks look
- **Gantt Chart Widgets** (`cf.projektplanung.gantt`, `cf.projektplanung.multiGantt`, `cf.projektplanung.singleGantt`) consume Task Class styling
- **Schedule Tree Widget** also uses Task Class styling for visual indicators

### Typical Page Layout

On Task Class pages, the default layout typically places:
- Attributes widget (left, 8-width) for editing properties
- This preview widget (right, 4-width) for visual feedback
- Wiki widget below for documentation

## Alternatives

There is no alternative widget for previewing Task Class styling. The preview functionality is unique to this widget.