rough-notation - npm Package Compare versions

Comparing version 0.0.2 to 0.1.0

package.json

 {
   "name": "rough-notation",
-  "version": "0.0.2",
+  "version": "0.1.0",
   "description": "Annotate html",
@@ -39,2 +39,2 @@ "main": "lib/rough-notation.cjs.js",
   }
-}
+}

README.md

@@ -1,2 +0,111 @@
-# rough-notation
-Annotate HTML with sketchy shapes
+![Rough Notation logo](https://roughnotation.com/images/social.png)
+
+# Rough Notation
+
+A small JavaScript library to create and animate annotations on a web page
+
+Rough Notation uses [RoughJS](https://roughjs.com) to create a hand-drawn look and feel. Elements can be annotated in a number of different styles. Animation duration and delay can be configured, or just turned off.
+
+Rough Notation is about 3.2kb in size when gzipped.
+
+[Visit website to see it in action](https://roughnotation.com/)
+
+## Installation
+
+You can add rough-notation to your project via npm
+
+```
+npm install --save rough-notation
+```
+
+Or load the ES module directly
+
+```html
+<script type="module" src="https://unpkg.com/rough-notation?module"></script>
+```
+
+Or load the IIFE version which created a `RoughNotation` object in your scope.
+
+```html
+<script type="module" src="https://unpkg.com/rough-notation"></script>
+```
+
+## Usage
+
+Create an `annotation` object by passing the element to annotate, and a config to describe the annotation style. 
+Once you have the annotation object, you can call `show()` or `hide()` on it to show the annotation
+
+```javascript
+import { annotate } from 'rough-notation';
+
+const e = document.quereySelector('#myElement');
+const annotation = annotate(e, { type: 'underline' });
+annotation.show();
+```
+
+## Annotation Group
+
+rough-notation provides a way to order the animation of annotations by creating an annotation-group. Pass the list of annotations to create a group. When show is called on the group, the annotations are animated in order.
+
+```javascript
+import { annotate, annotationGroup } from 'rough-notation';
+
+const a1 = annotate(document.quereySelector('#e1'), { type: 'underline' });
+const a2 = annotate(document.quereySelector('#e3'), { type: 'box' });
+const a3 = annotate(document.quereySelector('#e3'), { type: 'circle' });
+
+const ag = annotationGroup([a3, a1, a2]);
+ag.show();
+```
+
+## Configuring the Annotation
+
+When you create an annotation object, you pass in a config. The config only has one mandatory field, which is the `type` of the annotation. But you can configure the annotation in many ways. 
+
+#### type
+This is a mandatory field. It sets the annotation style. Following are the list of supported annotation types:
+
+* __underline__: Create a sketchy underline below an element.
+* __box__: This style draws a box around the element.
+* __circle__: Draw a circle around the element.
+* __highlight__: Creates a highlight effect as if maked by a highlighter.
+* __strike-through__: This style draws a box around the element.
+* __crossed-off__: This style draws a box around the element.
+
+#### animate
+Boolean property to turn on/off animation when annotating. Default value is `true`.
+
+
+#### animationDuration
+Duration of the animation in milliseconds. Default is `800ms`.
+
+
+#### animationDelay
+Delay in animation in milliseconds. Default is `0ms`.
+
+
+#### color
+String value representing the color of the annotation sketch. Default value is `currentColor`.
+
+#### strokeWidth
+Width of the annotation strokes. Default value is `1`. 
+
+
+#### padding
+Padding between the element and roughly where the annotation is drawn. Default value is `5` (in pixels).
+
+## Annotation Object
+
+When you call the `annotate` function, you get back an annotation object, which has the following methods:
+
+#### isShowing(): boolean
+Returns if the annotation is showing
+
+#### show()
+Drawns the annotation. If the annotation is set to animate (default), it will animate the drawing. If called again, it will re-draw the animation. 
+
+#### hide()
+Hides the annotation if showing. This is not animated. 
+
+#### remove()
+Unlinks the annotation from the element. 

Fixed alerts

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

46455

increased by8.43%

Number of lines in readme file

112

increased by3633.33%

Number of medium supply chain risk alerts

0

decreased by-100%

No dependency changes