diff --git a/README.md b/README.md index 6e57134..fdc13df 100644 --- a/README.md +++ b/README.md @@ -6,4 +6,6 @@ Changes in this fork: - Expose config and data types - Support custom `class` option +- Support `overrides` option for customizing RoughJS - Improved build assets with `.cjs` and `.mjs` +- `annotation.show()` returns a promise that resolves when the animation is done diff --git a/src/render.ts b/src/render.ts index 8cfc74d..31cd47f 100644 --- a/src/render.ts +++ b/src/render.ts @@ -16,7 +16,7 @@ function getDefaultOptions(): ResolvedOptions { return defaultOptions } -function getOptions(type: RoughOptionsType, seed: number): ResolvedOptions { +function getOptions(type: RoughOptionsType, seed: number, overrides?: Partial): ResolvedOptions { return { ...getDefaultOptions(), maxRandomnessOffset: 2, @@ -38,6 +38,7 @@ function getOptions(type: RoughOptionsType, seed: number): ResolvedOptions { disableMultiStroke: type !== 'double', disableMultiStrokeFill: false, seed, + ...overrides, } } @@ -82,7 +83,7 @@ export function renderAnnotation( const animate = (config.animate === undefined) ? true : (!!config.animate) const iterations = config.iterations || 2 const rtl = config.rtl ? 1 : 0 - const o = getOptions('single', seed) + const o = getOptions('single', seed, config.overrides) switch (config.type) { case 'underline': { @@ -182,7 +183,7 @@ export function renderAnnotation( break } case 'circle': { - const doubleO = getOptions('double', seed) + const doubleO = getOptions('double', seed, config.overrides) const width = rect.w + (padding[1] + padding[3]) const height = rect.h + (padding[0] + padding[2]) const x = rect.x - padding[3] + (width / 2) @@ -198,7 +199,7 @@ export function renderAnnotation( break } case 'highlight': { - const o = getOptions('highlight', seed) + const o = getOptions('highlight', seed, config.overrides) strokeWidth = rect.h * 0.95 const y = rect.y + (rect.h / 2) for (let i = rtl; i < iterations + rtl; i++) { diff --git a/src/types.ts b/src/types.ts index d310f00..27cc3f2 100644 --- a/src/types.ts +++ b/src/types.ts @@ -1,3 +1,5 @@ +import type { ResolvedOptions } from 'roughjs/bin/core' + export interface Rect { x: number y: number @@ -24,8 +26,14 @@ export interface RoughAnnotationConfigBase { padding?: RoughPadding // defaults to 5px iterations?: number // defaults to 2 brackets?: BracketType | BracketType[] // defaults to 'right' - // Additional class added to the annotation + /** + * Additional class to add to the root SVG element + */ class?: string + /** + * RoughJS options + */ + overrides?: Partial } export interface RoughAnnotation extends RoughAnnotationConfigBase {