Class: GutterAnnotationRender

About 4 min

@ghentcdh/annotated-text / GutterAnnotationRender

Class: GutterAnnotationRender

Defined in: libs/core/src/lib/adapter/annotation/renderer/GutterAnnotationRender.ts:105

Abstract base class for all annotation renderers.

Custom renderers must extend this class and implement all abstract members. The class handles style management and provides a contract for rendering annotations.

Example

class HighlightRenderer extends AnnotationRender<AnnotationRenderStyle> {
  weightOrder = 1;
  name = 'highlight';
  isGutter = false;

  constructor() {
    super(DefaultAnnotationRenderStyle);
  }

  render(params, parentDimensions, annotation) {
    // Implementation
    return { draws, isGutter, startPosition, color };
  }
}

Extends

AnnotationRender<GutterAnnotationRenderStyle>

Constructors

Constructor

new GutterAnnotationRender(name, style): GutterAnnotationRender

Defined in: libs/core/src/lib/adapter/annotation/renderer/GutterAnnotationRender.ts:109

Parameters

style

Partial<GutterAnnotationRenderStyle> = {}

Methods

createDraws()

createDraws(annotation): object

Defined in: libs/core/src/lib/adapter/annotation/renderer/GutterAnnotationRender.ts:113

Renders the annotation and returns draw instructions.

This method is called for each annotation that uses this renderer. It should return all information needed to visually represent the annotation.

{ color?: { active: { border?: string; borderWidth: number; fill?: string; }; default: { border?: string; borderWidth: number; fill?: string; }; edit: { border?: string; borderWidth: number; fill?: string; }; hover: { border?: string; borderWidth: number; fill?: string; }; tag: { border?: string; borderWidth: number; fill?: string; text?: string; }; }; dimensions?: { x: number; y1: number; y2: number; }; draws: object[]; } = annotationDrawMetadataSchema

_drawMetadata.color?

{ active: { border?: string; borderWidth: number; fill?: string; }; default: { border?: string; borderWidth: number; fill?: string; }; edit: { border?: string; borderWidth: number; fill?: string; }; hover: { border?: string; borderWidth: number; fill?: string; }; tag: { border?: string; borderWidth: number; fill?: string; text?: string; }; } = ...

_drawMetadata.color.active

{ border?: string; borderWidth: number; fill?: string; } = annotationDrawColorSchema

_drawMetadata.color.active.border?

string = ...

_drawMetadata.color.active.borderWidth

number = ...

_drawMetadata.color.active.fill?

string = ...

_drawMetadata.color.default

{ border?: string; borderWidth: number; fill?: string; } = annotationDrawColorSchema

_drawMetadata.color.default.border?

string = ...

_drawMetadata.color.default.borderWidth

number = ...

_drawMetadata.color.default.fill?

string = ...

_drawMetadata.color.edit

{ border?: string; borderWidth: number; fill?: string; } = annotationDrawColorSchema

_drawMetadata.color.edit.border?

string = ...

_drawMetadata.color.edit.borderWidth

number = ...

_drawMetadata.color.edit.fill?

string = ...

_drawMetadata.color.hover

{ border?: string; borderWidth: number; fill?: string; } = annotationDrawColorSchema

_drawMetadata.color.hover.border?

string = ...

_drawMetadata.color.hover.borderWidth

number = ...

_drawMetadata.color.hover.fill?

string = ...

_drawMetadata.color.tag

{ border?: string; borderWidth: number; fill?: string; text?: string; } = tagColorSchema

_drawMetadata.color.tag.border?

string = ...

_drawMetadata.color.tag.borderWidth

number = ...

_drawMetadata.color.tag.fill?

string = ...

_drawMetadata.color.tag.text?

string = ...

_drawMetadata.dimensions?

{ x: number; y1: number; y2: number; } = ...

_drawMetadata.dimensions.x

number = ...

_drawMetadata.dimensions.y1

number = ...

_drawMetadata.dimensions.y2

number = ...

_drawMetadata.draws

object[] = ...

_render

{ isGutter: boolean; lines: object[]; render: string; style: { color: { background?: string; backgroundActive?: string; border?: string; borderActive?: string; color?: string; gutterColor?: string; tagBackground?: string; tagColor?: string; }; renderStyle: any; }; weight?: number; } = renderSchema

_render.isGutter

boolean = ...

_render.lines

object[] = ...

_render.render

string = ...

_render.style

{ color: { background?: string; backgroundActive?: string; border?: string; borderActive?: string; color?: string; gutterColor?: string; tagBackground?: string; tagColor?: string; }; renderStyle: any; } = renderStyleSchema

draws: Array of draw instructions (rectangles, lines, text, etc.)
isGutter: Whether this annotation is rendered in the gutter
startPosition: The position and dimensions where rendering starts
color: The color scheme used for drawing

color

color: object

color.active

active: object = annotationDrawColorSchema

color.active.border?

optional border: string

color.active.borderWidth

borderWidth: number

color.active.fill?

optional fill: string

color.default

default: object = annotationDrawColorSchema

color.default.border?

optional border: string

color.default.borderWidth

borderWidth: number

color.default.fill?

optional fill: string

color.edit

edit: object = annotationDrawColorSchema

color.edit.border?

optional border: string

color.edit.borderWidth

borderWidth: number

color.edit.fill?

optional fill: string

color.hover

hover: object = annotationDrawColorSchema

color.hover.border?

optional border: string

color.hover.borderWidth

borderWidth: number

color.hover.fill?

optional fill: string

color.tag

tag: object = tagColorSchema

color.tag.border?

optional border: string

color.tag.borderWidth

borderWidth: number

color.tag.fill?

optional fill: string

color.tag.text?

optional text: string

dimensions

dimensions: object

dimensions.x

x: number

dimensions.y1

y1: number

dimensions.y2

y2: number

draws

draws: object[]

Example

render(params, parentDimensions, annotation) {
  return {
    draws: [
      {
        type: 'rect',
        x: parentDimensions.x,
        y: parentDimensions.y,
        width: 100,
        height: 20,
        fill: 'rgba(255, 0, 0, 0.3)'
      }
    ],
    isGutter: false,
    startPosition: { x: 0, y: 0, width: 100, height: 20 },
    color: { primary: '#ff0000', border: '#cc0000' }
  };
}

Overrides

AnnotationRender.createDraws

inject()

inject<T>(token): T

Defined in: libs/core/src/lib/di/BaseAnnotationDiFn.ts:46

Inject a dependency from the annotation module's container.

setModule(module): void

Defined in: libs/core/src/lib/di/BaseAnnotationDiFn.ts:33

Set the annotation module for dependency injection. This must be called before using inject().

updateStyle(style): void

Defined in: libs/core/src/lib/adapter/annotation/renderer/annotation-render.ts:232

Updates the renderer's style configuration.

Performs a deep merge with the default style, so only specified properties are overridden while preserving all other default values.

Uses lodash merge to handle nested objects properly.

// Update only specific properties
renderer.updateStyle({
  borderWidth: 3,
  borderRadius: 8
});

// Update nested properties
renderer.updateStyle({
  hover: {
    color: {
      border: 'rgba(255, 0, 0, 0.8)'
    }
  }
});

Inherited from

AnnotationRender.updateStyle