Skip to content

jornetsimon/ng-rough-notation

Repository files navigation

ng-rough-notation

Licence NPM Tree Shaking Last commit

〽️ A simple and configurable directive to annotate elements.

Banner

This is an Angular 13 wrapper for rough-notation.

  • 😌 Easy to use
  • 🪶 Lightweight
  • 🎨 Customizable : colors, duration, delay, padding...
  • ⚙️ Convenient : local & global config

Demo

Demo page

StackBlitz sandbox

Installation

npm install ng-rough-notation

Add RoughNotationModule to your module imports :

import { RoughNotationModule } from 'ng-rough-notation';

@NgModule({
    ...
    imports: [RoughNotationModule],
})
export class AppModule {}

Usage

Use the roughNotation directive on any element :

<span roughNotation>Some content</span>

By default, highlight will be used.

Config object

You can provide a configuration object to the directive.

<span [roughNotation]="{ type: 'highlight', color: '#F44336' }"></span>

The config object should represent a partial RoughAnnotationConfigBase interface.

Every property is optional since a default config is predefined.

Property Type Default value
type 'underline', 'box', 'circle', 'highlight', 'strike-through', 'crossed-off', 'bracket' 'highlight'
animate boolean true
animationDuration number 800
animationDelay number 0
color string See Automatic colors
strokeWidth number 1
padding number, [number, number], [number, number, number, number] 5
multiline boolean false
iterations number 2
brackets 'left', 'right', 'top', 'bottom', [...'left', 'right', 'top', 'bottom'] 'right'

Please refer to the official doc for property descriptions.

Inputs

Name Type Default value Description
show boolean true Sets the visibility of the annotation.
annotatedTextColor boolean true Specify the CSS color value the element should have only when it is annotated.
Returns to its original color when the annotation is hidden.

Outputs

Name Type Description
isShowingChange EventEmitter<boolean> Triggers each time the annotation visibility changes

Instance

You can get a reference to the RoughNotationDirective instance.

<span roughNotation #instance="roughNotation"></span>

This is useful if you want to toggle programmatically the annotation.

Method Description
toggle() Shows or hide the annotation according to its current state

Automatic colors

A set of default colors is defined for each annotation type. It follows the scheme on the original website so you can omit the color property if you're happy with the defaults.

Type Default color
highlight #FFF176
circle #0D47A1
box #4A148C
strike-through #1B5E1F
underline #B71C1B
crossed-off #F57F17
bracket #FF0000

Global configuration

You can provide a global default configuration for the whole module.

For that you can use the forRoot() method on the module.

RoughNotationModule.forRoot({
    type: 'circle',
    animationDuration: 1000,
})

Note: this global configuration will be overriden by the configurations provided to the roughNotation directives.

Annotation group

You can use the rough-notation-group component to wrap and toggle a bunch of annotations.

<rough-notation-group [show]="showGroup">
   <div>
      <span roughNotation>First annotation</span>
   </div>
   <div>
      <span [roughNotation]="{ type: 'underline' }">Second annotation</span>
   </div>
</rough-notation-group>