diff --git a/README.md b/README.md index 459a837..5cae931 100644 --- a/README.md +++ b/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` diff --git a/package.json b/package.json index 7df345d..03d323b 100644 --- a/package.json +++ b/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", diff --git a/src/components/RoughNotation.js b/src/components/RoughNotation.js index 7dbd063..4ca6e5b 100644 --- a/src/components/RoughNotation.js +++ b/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, diff --git a/src/options.js b/src/options.js index 238ccab..653e877 100644 --- a/src/options.js +++ b/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', }; diff --git a/types/VueRoughNotation.d.ts b/types/VueRoughNotation.d.ts index d7335fb..02f240e 100644 --- a/types/VueRoughNotation.d.ts +++ b/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 {} diff --git a/yarn.lock b/yarn.lock index 28e42d1..61ba83d 100644 --- a/yarn.lock +++ b/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"