https://github.com/jornetsimon/ng-rough-notation
〽️ A simple and configurable directive to annotate elements
https://github.com/jornetsimon/ng-rough-notation
angular annotate annotations drawing highlight rough
Last synced: 3 months ago
JSON representation
〽️ A simple and configurable directive to annotate elements
- Host: GitHub
- URL: https://github.com/jornetsimon/ng-rough-notation
- Owner: jornetsimon
- License: mit
- Created: 2020-06-11T10:03:47.000Z (almost 6 years ago)
- Default Branch: master
- Last Pushed: 2023-02-03T14:43:15.000Z (about 3 years ago)
- Last Synced: 2025-10-03T19:36:40.339Z (6 months ago)
- Topics: angular, annotate, annotations, drawing, highlight, rough
- Language: TypeScript
- Homepage: https://ng-rough-notation-demo.stackblitz.io
- Size: 2.12 MB
- Stars: 5
- Watchers: 1
- Forks: 0
- Open Issues: 11
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# ng-rough-notation
〽️ A simple and configurable directive to annotate elements.
This is an Angular 13 wrapper for [rough-notation](https://roughnotation.com).
- 😌 **Easy to use**
- 🪶 **Lightweight**
- 🎨 **Customizable** : colors, duration, delay, padding...
- ⚙️ **Convenient** : local & global config
## Demo
[Demo page](https://ng-rough-notation-demo.stackblitz.io/)
[StackBlitz sandbox](https://stackblitz.com/edit/ng-rough-notation-demo)
## Installation
```bash
npm install ng-rough-notation
```
Add `RoughNotationModule` to your module imports :
``` typescript
import { RoughNotationModule } from 'ng-rough-notation';
@NgModule({
...
imports: [RoughNotationModule],
})
export class AppModule {}
```
## Usage
Use the `roughNotation` directive on any element :
``` html
Some content
```
By default, _highlight_ will be used.
#### Config object
You can provide a configuration object to the directive.
``` html
```
The config object should represent a partial [RoughAnnotationConfigBase](https://github.com/pshihn/rough-notation/blob/979cdd33d8825df4e0124de17e4e2433e1f6e4a6/src/model.ts#L16) 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](#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](https://github.com/pshihn/rough-notation#configuring-the-annotation).
#### 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` | Triggers each time the annotation visibility changes |
#### Instance
You can get a reference to the `RoughNotationDirective` instance.
```html
```
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](https://roughnotation.com) 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.
```typescript
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.
```html
First annotation
Second annotation
```