Merge pull request #3 from Leecason/feature/support_multiline

Feat: support multiline

Author: Leecason

README.md

@@ -68,6 +68,8 @@ The default global options are:
   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,
 }
@@ -181,6 +183,16 @@ Width of the annotation strokes.
 
 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`

src/components/RoughNotation.js

@@ -61,6 +61,11 @@ export default (options) => ({
       default: () => options.padding,
     },
 
+    multiline: {
+      type: Boolean,
+      default: () => options.multiline,
+    },
+
     iterations: {
       type: Number,
       default: () => options.iterations,
@@ -81,6 +86,7 @@ export default (options) => ({
       color: this.color,
       strokeWidth: this.strokeWidth,
       padding: this.padding,
+      multiline: this.multiline,
       iterations: this.iterations,
     });
 

src/options.js

@@ -13,6 +13,9 @@ export const defaultOptions = {
   // 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].
   padding: 5,
+  // This property only applies to inline text.
+  // To annotate multiline text (each line separately), set this property to true.
+  multiline: false,
   // 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.