diff --git a/README.md b/README.md index 0741345..47c62ef 100644 --- a/README.md +++ b/README.md @@ -109,6 +109,9 @@ By default annotations are drawn in two iterations, e.g. when underlining, drawi #### brackets 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`. +#### rtl +By default annotations are drawn from left to right. To start with right to left, set this property to `true`. + ## Annotation Object When you call the `annotate` function, you get back an annotation object, which has the following methods: diff --git a/src/model.ts b/src/model.ts index ee51853..0783e08 100644 --- a/src/model.ts +++ b/src/model.ts @@ -17,6 +17,7 @@ export type BracketType = 'left' | 'right' | 'top' | 'bottom'; export interface RoughAnnotationConfig extends RoughAnnotationConfigBase { type: RoughAnnotationType; multiline?: boolean; + rtl?: boolean; } export interface RoughAnnotationConfigBase { diff --git a/src/render.ts b/src/render.ts index 8ba95c8..a62e051 100644 --- a/src/render.ts +++ b/src/render.ts @@ -61,12 +61,13 @@ export function renderAnnotation(svg: SVGSVGElement, rect: Rect, config: RoughAn const padding = parsePadding(config); const animate = (config.animate === undefined) ? true : (!!config.animate); const iterations = config.iterations || 2; + const rtl = config.rtl ? 1 : 0; const o = getOptions('single', seed); switch (config.type) { case 'underline': { const y = rect.y + rect.h + padding[2]; - for (let i = 0; i < iterations; i++) { + for (let i = rtl; i < iterations + rtl; i++) { if (i % 2) { opList.push(line(rect.x + rect.w, y, rect.x, y, o)); } else { @@ -77,7 +78,7 @@ export function renderAnnotation(svg: SVGSVGElement, rect: Rect, config: RoughAn } case 'strike-through': { const y = rect.y + (rect.h / 2); - for (let i = 0; i < iterations; i++) { + for (let i = rtl; i < iterations + rtl; i++) { if (i % 2) { opList.push(line(rect.x + rect.w, y, rect.x, y, o)); } else { @@ -149,14 +150,14 @@ export function renderAnnotation(svg: SVGSVGElement, rect: Rect, config: RoughAn const y = rect.y; const x2 = x + rect.w; const y2 = y + rect.h; - for (let i = 0; i < iterations; i++) { + for (let i = rtl; i < iterations + rtl; i++) { if (i % 2) { opList.push(line(x2, y2, x, y, o)); } else { opList.push(line(x, y, x2, y2, o)); } } - for (let i = 0; i < iterations; i++) { + for (let i = rtl; i < iterations + rtl; i++) { if (i % 2) { opList.push(line(x, y2, x2, y, o)); } else { @@ -185,7 +186,7 @@ export function renderAnnotation(svg: SVGSVGElement, rect: Rect, config: RoughAn const o = getOptions('highlight', seed); strokeWidth = rect.h * 0.95; const y = rect.y + (rect.h / 2); - for (let i = 0; i < iterations; i++) { + for (let i = rtl; i < iterations + rtl; i++) { if (i % 2) { opList.push(line(rect.x + rect.w, y, rect.x, y, o)); } else {