Configuration

While initating the core component, you can pass a configuration object to customize its behavior. Also if something changes in the configuration, you can update it later using the changeConfig method.

The configuration object can include the following properties:

Actions

Create

Allows creating annotations, default is false

Edit

Allows editing annotations, default is false.

gutter

Allows adjusting the the gutter dimensions, default is { "width": 3, "gap": 6 }.

text

Allows adjusting the the gutter dimensions, default is { "padding": 3, "lineHeight": 22, "borderRadius": 3, "border": 2, "handleRadius": 6, "rtl": false }.

Right to left

Allows rendering the text in right to left mode, default is false.

Hover

Allows changing the hover color, default is { "color": { "border": "rgba(100, 100, 100, 0.5)", "fill": "rgba(1, 1, 1, 0.1)" } }.

Visual events

hover

Allows changing highlighting on hover, by default it always shows the hover color.

Function to determine if the annotation should be highlighted on hover, default is:

 hover: (annotation: Annotation) => true

create

Allows to add additional properties to the annotation when it is created, default is:

create: () => {
  return {
    id: uuidv4(),
    isGutter: false,
    color: createAnnotationColor("#f51720"),
  };
},

useSnapper

Allows to adjust the start and end of the annotation when it is created or edited, default is:

snapper: (action, payload) => {
  const { start, end } = payload;
  return { start, end };
}

More information about the snapper can be found in the snapper documentation.

Events

Allows emitting events, default is logging to the console.debug

More information about the events can be found in the events documentation.

onEvent: ({ mouseEvent, event, data }: AnnotationEvent) => {
  console.log(mouseEvent, event, data);
}

Warning

Add more documentation and examples for the configuration