Merge pull request #5 from Leecason/feature/bracket

Feature: bracket type

Author: Leecason

README.md

@@ -60,8 +60,6 @@ The default global options are:
   animate: true,
   // Duration of the animation in milliseconds.
   animationDuration: 800,
-  // Delay in animation in milliseconds.
-  animationDelay: 0,
   // Representing the color of the annotation sketch.
   color: 'currentColor',
   // Width of the annotation strokes.
@@ -72,6 +70,8 @@ The default global options are:
   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`,
 }
 ```
 
@@ -106,12 +106,13 @@ Vue.use(VueRoughNotation, options);
 
 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.
+- **underline**: This style creates 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.
+- **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
 
@@ -143,16 +144,6 @@ Turn on/off animation when annotating.
 
 Duration of the animation in milliseconds.
 
-#### animationDelay
-
-**Type**: `number`
-
-**Required**: `false`
-
-**Default**: `0` - You can change it when install _(see above)_.
-
-Delay in animation in milliseconds.
-
 #### color
 
 **Type**: `string`
@@ -175,7 +166,7 @@ Width of the annotation strokes.
 
 #### padding
 
-**Type**: `number`
+**Type**: `number | number[]`
 
 **Required**: `false`
 
@@ -203,6 +194,16 @@ This property only applies to inline text. To annotate multiline text (each line
 
 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`

package.json

@@ -39,7 +39,7 @@
   },
   "license": "MIT",
   "dependencies": {
-    "rough-notation": "^0.3.3"
+    "rough-notation": "^0.4.0"
   },
   "devDependencies": {
     "@babel/core": "^7.10.1",

src/components/RoughNotation.js

@@ -7,6 +7,7 @@ const AVAILABLE_TYPES = [
   'highlight',
   'strike-through',
   'crossed-off',
+  'bracket',
 ];
 
 export default (options) => ({
@@ -41,11 +42,6 @@ export default (options) => ({
       default: () => options.animationDuration,
     },
 
-    animationDelay: {
-      type: Number,
-      default: () => options.animationDelay,
-    },
-
     color: {
       type: String,
       default: () => options.color,
@@ -71,6 +67,11 @@ export default (options) => ({
       default: () => options.iterations,
     },
 
+    brackets: {
+      type: [String, Array],
+      default: () => options.brackets,
+    },
+
     order: {
       type: [Number, String],
       default: 0,
@@ -82,7 +83,6 @@ export default (options) => ({
       type: this.type,
       animate: this.animate,
       animationDuration: this.animationDuration,
-      animationDelay: this.animationDelay,
       color: this.color,
       strokeWidth: this.strokeWidth,
       padding: this.padding,

src/options.js

@@ -3,8 +3,6 @@ export const defaultOptions = {
   animate: true,
   // Duration of the animation in milliseconds.
   animationDuration: 800,
-  // Delay in animation in milliseconds.
-  animationDelay: 0,
   // Representing the color of the annotation sketch.
   color: 'currentColor',
   // Width of the annotation strokes.
@@ -20,4 +18,8 @@ export const defaultOptions = {
   // 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.
   iterations: 2,
+  // 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.
+  brackets: 'right',
 };

types/VueRoughNotation.d.ts

@@ -1,14 +1,15 @@
 import { PluginObject } from "vue";
 
-export type RoughNotationTypes = 'underline' | 'box' | 'circle' | 'highlight' | 'strike-through' | 'crossed-off';
+export type RoughNotationTypes = 'underline' | 'box' | 'circle' | 'highlight' | 'strike-through' | 'crossed-off' | 'bracket';
 
 export interface VueRoughNotationOptions {
   animate?: boolean;
-  animationDelay?: number;
   color?: string;
   strokeWidth?: number;
   padding?: number;
+  multiline?: boolean;
   iterations?: number;
+  brackets?: string;
 }
 
 export interface VueRoughNotationPluginObject extends PluginObject<VueRoughNotationOptions> {}

yarn.lock

@@ -7656,10 +7656,10 @@ rollup@^2.11.2:
   optionalDependencies:
     fsevents "~2.1.2"
 
-rough-notation@^0.3.3:
-  version "0.3.3"
-  resolved "https://registry.yarnpkg.com/rough-notation/-/rough-notation-0.3.3.tgz#abe82f464b3d5d990e6b2ccd11ca5e596b1b0d8e"
-  integrity sha512-u2wn53Re907g208tPOxNdlv3WYRaXmXxd7JNTbAzzrkG4/6Iw5ZdhdXol8/AiVreUgt3MiBWpPVt+SYJwkNkXQ==
+rough-notation@^0.4.0:
+  version "0.4.0"
+  resolved "https://registry.yarnpkg.com/rough-notation/-/rough-notation-0.4.0.tgz#6f97324cb50fc91ec8064219253aa2528a69210f"
+  integrity sha512-hDgn9qMIxWnfY+WWjt30aLMtDHR13H8r/NI3EQNdJiEFAzpklH5nKg4eH/thpxCWTYzyg8ueMsKIfz9MzOBQ4Q==
 
 rsvp@^4.8.4:
   version "4.8.5"