animation group

src/model.ts

@@ -1,5 +1,7 @@
 export const SVG_NS = 'http://www.w3.org/2000/svg';
 
+export const DEFAULT_ANIMATION_DURATION = 1000;
+
 export interface Rect {
   x: number;
   y: number;
@@ -24,4 +26,9 @@ export interface RoughAnnotation {
   show(): void;
   hide(): void;
   remove(): void;
+}
+
+export interface RoughAnnotationGroup {
+  show(): void;
+  hide(): void;
 }

src/render.ts

@@ -1,4 +1,4 @@
-import { Rect, RoughAnnotationConfig, SVG_NS } from './model.js';
+import { Rect, RoughAnnotationConfig, SVG_NS, DEFAULT_ANIMATION_DURATION } from './model.js';
 import { ResolvedOptions, OpSet } from 'roughjs/bin/core';
 import { line, rectangle, ellipse } from 'roughjs/bin/renderer';
 
@@ -29,7 +29,7 @@ const highlightOptions = JSON.parse(JSON.stringify(defaultOptions));
 highlightOptions.roughness = 3;
 highlightOptions.disableMultiStroke = true;
 
-export function renderAnnotation(svg: SVGSVGElement, rect: Rect, config: RoughAnnotationConfig) {
+export function renderAnnotation(svg: SVGSVGElement, rect: Rect, config: RoughAnnotationConfig, animationGroupDelay: number) {
   const opList: OpSet[] = [];
   let strokeWidth = config.strokeWidth || 2;
   const padding = (config.padding === 0) ? 0 : (config.padding || 5);
@@ -91,8 +91,8 @@ export function renderAnnotation(svg: SVGSVGElement, rect: Rect, config: RoughAn
     const lengths: number[] = [];
     const pathElements: SVGPathElement[] = [];
     let totalLength = 0;
-    const totalDuration = config.animationDuration === 0 ? 0 : (config.animationDuration || 1000);
+    const totalDuration = config.animationDuration === 0 ? 0 : (config.animationDuration || DEFAULT_ANIMATION_DURATION);
-    const initialDelay = config.animationDelay === 0 ? 0 : (config.animationDelay || 0);
+    const initialDelay = (config.animationDelay === 0 ? 0 : (config.animationDelay || 0)) + (animationGroupDelay || 0);
 
     for (const d of pathStrings) {
       const path = document.createElementNS(SVG_NS, 'path');

src/rough-notation.ts

@@ -1,4 +1,4 @@
-import { Rect, RoughAnnotationConfig, RoughAnnotation, SVG_NS } from './model.js';
+import { Rect, RoughAnnotationConfig, RoughAnnotation, SVG_NS, RoughAnnotationGroup, DEFAULT_ANIMATION_DURATION } from './model.js';
 import { renderAnnotation } from './render.js';
 import { ensureKeyframes } from './keyframes.js';
 
@@ -12,6 +12,7 @@ class RoughAnnotationImpl implements RoughAnnotation {
   private _resizing = false;
   private _resizeObserver?: any; // ResizeObserver is not supported in typescript std lib yet
   private _lastSize?: Rect;
+  _animationGroupDelay = 0;
 
   constructor(e: HTMLElement, config: RoughAnnotationConfig) {
     this._e = e;
@@ -19,6 +20,10 @@ class RoughAnnotationImpl implements RoughAnnotation {
     this.attach();
   }
 
+  get config(): RoughAnnotationConfig {
+    return this._config;
+  }
+
   private _resizeListener = () => {
     if (!this._resizing) {
       this._resizing = true;
@@ -151,7 +156,7 @@ class RoughAnnotationImpl implements RoughAnnotation {
   private render(svg: SVGSVGElement) {
     const rect = this.computeSize();
     if (rect) {
-      renderAnnotation(svg, rect, this._config);
+      renderAnnotation(svg, rect, this._config, this._animationGroupDelay);
       this._lastSize = rect;
       this._state = 'showing';
     }
@@ -179,4 +184,27 @@ class RoughAnnotationImpl implements RoughAnnotation {
 
 export function annotate(element: HTMLElement, config: RoughAnnotationConfig): RoughAnnotation {
   return new RoughAnnotationImpl(element, config);
+}
+
+export function annotationGroup(annotations: RoughAnnotation[]): RoughAnnotationGroup {
+  let delay = 0;
+  for (const a of annotations) {
+    const ai = a as RoughAnnotationImpl;
+    ai._animationGroupDelay = delay;
+    const duration = ai.config.animationDuration === 0 ? 0 : (ai.config.animationDuration || DEFAULT_ANIMATION_DURATION);
+    delay += duration;
+  }
+  const list = [...annotations];
+  return {
+    show() {
+      for (const a of list) {
+        a.show();
+      }
+    },
+    hide() {
+      for (const a of list) {
+        a.hide();
+      }
+    }
+  }
 }