Labels
Add and customize labels for atoms, residues, and other molecular features.
Features
Multiple Label Types
Support for various label types
Custom Styling
Flexible label appearance
Dynamic Positioning
Smart label placement
Interactive Labels
Click and hover interactions
Configuration
interface LabelConfig {
type: 'atom' | 'residue' | 'chain' | 'custom'; // Label type
text: string; // Label text
target: number | string; // Target identifier
style?: { // Style settings
color?: string; // Text color
backgroundColor?: string; // Background color
fontSize?: number; // Font size
fontFamily?: string; // Font family
padding?: number; // Padding
borderRadius?: number; // Border radius
};
position?: { // Position settings
offset?: [number, number, number]; // Offset from target
alignment?: 'top' | 'bottom' | 'left' | 'right';
distance?: number; // Distance from target
};
interaction?: { // Interaction settings
hover?: boolean; // Enable hover
click?: boolean; // Enable click
tooltip?: string; // Tooltip text
};
}
Methods
addLabel
Adds a new label
addLabel(config: LabelConfig): Label
updateLabel
Updates label properties
updateLabel(id: string, options: Partial<LabelConfig>): void
removeLabel
Removes a label
removeLabel(id: string): void
clearLabels
Removes all labels
clearLabels(): void
Example
// Add atom label
const label = model.addLabel({
type: 'atom',
text: 'CA',
target: 1,
style: {
color: '#ffffff',
backgroundColor: '#000000',
fontSize: 14,
padding: 4,
borderRadius: 4
},
position: {
offset: [0, 2, 0],
alignment: 'top',
distance: 2
},
interaction: {
hover: true,
tooltip: 'Alpha Carbon'
}
});
// Update label style
model.updateLabel(label.id, {
style: {
color: '#ff0000',
fontSize: 16
}
});
// Remove label
model.removeLabel(label.id);
// Clear all labels
model.clearLabels();
Related Features
Learn more about other features: