Class: UnderLineAnnotationRender

About 6 min

@ghentcdh/annotated-text / UnderLineAnnotationRender

Class: UnderLineAnnotationRender

Defined in: libs/core/src/lib/adapter/annotation/renderer/UnderLineAnnotationRender.ts:36

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

SvgAnnotationRender<UnderlineAnnotationRenderStyle>

Constructors

Constructor

new UnderLineAnnotationRender(name, style): UnderLineAnnotationRender

Defined in: libs/core/src/lib/adapter/annotation/renderer/UnderLineAnnotationRender.ts:41

Parameters

style

Partial<UnderlineAnnotationRenderStyle> = {}

Methods

createDraws()

createDraws(annotation): object

Defined in: libs/core/src/lib/adapter/annotation/renderer/SvgAnnotationRender.ts:38

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

_render.style.color

{ background?: string; backgroundActive?: string; border?: string; borderActive?: string; color?: string; gutterColor?: string; tagBackground?: string; tagColor?: string; } = annotationColorSchema

_render.style.color.background?

string = ...

_render.style.color.backgroundActive?

string = ...

_render.style.color.border?

string = ...

_render.style.color.borderActive?

string = ...

_render.style.color.color?

string = ...

_render.style.color.gutterColor?

string = ...

_render.style.color.tagBackground?

string = ...

_render.style.color.tagColor?

string = ...

_render.style.renderStyle

any = ...

_render.weight?

number = ...

end

number = ...

id?

string | number = annotationIdSchema

label?

string = ...

start

number = ...

textSelection?

string = ...

Returns

object

An object containing:

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' }
  };
}

Inherited from

SvgAnnotationRender.createDraws

createPath()

createPath(params): object

Defined in: libs/core/src/lib/adapter/annotation/renderer/UnderLineAnnotationRender.ts:48

Parameters

params

PathParams

Returns

object

border?

optional border: string

fill?

optional fill: string

Overrides

SvgAnnotationRender.createPath

getColors()

getColors(annotation): object

Defined in: libs/core/src/lib/adapter/annotation/renderer/SvgAnnotationRender.ts:33

active: object = annotationDrawColorSchema

active.border?

optional border: string

active.borderWidth

borderWidth: number

active.fill?

optional fill: string

default

default: object = annotationDrawColorSchema

default.border?

optional border: string

default.borderWidth

borderWidth: number

default.fill?

optional fill: string

edit

edit: object = annotationDrawColorSchema

edit.border?

optional border: string

edit.borderWidth

borderWidth: number

edit.fill?

optional fill: string

hover

hover: object = annotationDrawColorSchema

hover.border?

optional border: string

hover.borderWidth

borderWidth: number

hover.fill?

optional fill: string

Inherited from

SvgAnnotationRender.getColors

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

SvgAnnotationRender.updateStyle