Vue Rough Notation

A Vue wrapper for RoughNotation, a small JavaScript library to create and animate annotations on a web page.

Table of Contents

• Demo
• Installation
• Usage
• Global options
• RoughNotation Component
• RoughNotationGroup Component
• Contributing
• License

Demo

Demo Page

Code Sandbox

Installation

NPM:

npm install --save vue-rough-notation

To make vue-rough-notation work for Vue 2, you need to have @vue/composition-api installed:

npm install --save @vue/composition-api

Usage

Vue3

import { createApp } from 'vue'
import VueRoughNotation from 'vue-rough-notation';

const app = createApp(...);
app.use(VueRoughNotation);

Vue2

import Vue from 'vue';
import VueCompositionAPI from '@vue/composition-api';
import VueRoughNotation from 'vue-rough-notation';

Vue.use(VueCompositionAPI);
Vue.use(VueRoughNotation);

Global options

The default global options are:

{
  // Turn on/off animation when annotating.
  animate: true,
  // Duration of the animation in milliseconds.
  animationDuration: 800,
  // Representing the color of the annotation sketch.
  color: 'currentColor',
  // Width of the annotation strokes.
  strokeWidth: 1,
  // (in pixels) Padding between the element and roughly where the annotation is drawn.
  padding: 5,
  // To annotate multiline text (each line separately), set this property to true.
  multiline: false,
  // By default annotations are drawn in two iterations.
  iterations: 2,
  // When drawing a bracket, this configures which side(s) of the element to bracket.
  brackets: `right`,
}

You can change the options when install:

• Vue3

import VueRoughNotation from 'vue-rough-notation';

app.use(VueRoughNotation, options);

• Vue2

import VueRoughNotation from 'vue-rough-notation';

Vue.use(VueRoughNotation, options);

RoughNotation Component

Usage

<RoughNotation :is-show="isShow" type="underline">
  <span>Rough Notation is awesome</span>
</RoughNotation>

Props

type

Type: string

required: true

This is a mandatory field. It sets the annotation style. Following are the list of supported annotation types:

• underline: This style creates a sketchy underline below an element.
• box: This style draws a box around the element.
• circle: This style draws a circle around the element.
• highlight: This style creates a highlight effect as if marked by a highlighter.
• strike-through: This style draws horizontal lines through the element.
• crossed-off: This style draws an 'X' across the element.
• bracket: This style draws a bracket around an element, usually a paragraph of text. By default on the right side, but can be configured to any or all of left, right, top, bottom.

isShow

Type: boolean

Required: false

Default: false

Whether draws the annotation.

animate

Type: boolean

Required: false

Default: true - You can change it when install (see above).

Turn on/off animation when annotating.

animationDuration

Type: number

Required: false

Default: 800 - You can change it when install (see above).

Duration of the animation in milliseconds.

color

Type: string

Required: false

Default: currentColor - You can change it when install (see above).

Representing the color of the annotation sketch.

strokeWidth

Type: number

Required: false

Default: 1 - You can change it when install (see above).

Width of the annotation strokes.

padding

Type: number | number[]

Required: false

Default: 5(in pixels) - You can change it when install (see above)

Padding between the element and roughly where the annotation is drawn. Default value is 5 (in pixels). If you wish to specify different top, left, right, bottom paddings, you can set the value to an array akin to CSS style padding [top, right, bottom, left] or just [top & bottom, left & right].

multiline

Type: boolean

Required: false

Default: false

This property only applies to inline text. To annotate multiline text (each line separately), set this property to true.

iterations

Type: number

Required: false

Default: 2 - You can change it when install (see above)

By default annotations are drawn in two iterations, e.g. when underlining, drawing from left to right and then back from right to left. Setting this property can let you configure the number of iterations.

brackets

Type: string | string[]

Required: false

Default: 'right'

Value could be a string or an array of strings, each string being one of these values: left, right, top, bottom. When drawing a bracket, this configures which side(s) of the element to bracket. Default value is right.

tag

Type: string

Required: false

Default: 'span'

String HTML tag name; if falsy (for example null or undefined), the component will be renderless (the content won't be wrapped in a tag), in this case, only the first child will be rendered

order

Type: number | string

Required: false

Default: 0

Works with RoughNotationGroup component, order the animation of annotations. When show is called on the group, the annotations are animated in order. For example, an annotation with order 1 will animate before order 2. Also you can pass orderAnnotations prop to RoughNotationGroup to customize the order function.

Events

init

Parameters: Annotation Object

Called when the component is initialized.

RoughNotationGroup Component

Usage

<RoughNotationGroup :is-show="isShow">
  <RoughNotation type="underline">Rough Notation</RoughNotation>
  <RoughNotation type="box">is</RoughNotation>
  <RoughNotation type="highlight">awesome</RoughNotation>
</RoughNotation>

Props

isShow

Type: boolean

Required: false

Default: false

Show/Hides the annotations

tag

Type: string

Required: false

Default: 'div'

String HTML tag name; if falsy (for example null or undefined), the component will be renderless (the content won't be wrapped in a tag), in this case, only the first child will be rendered

orderAnnotations

Type: function

Required: false

Default: (a, b) => a - b

Customize annotations order function. Order will be sorted in ascending order by default.

Contributing

CONTRIBUTING

License

MIT