arthur/rough-notation
1
0
Fork 0
mirror of https://github.com/slidevjs/rough-notation.git synced 2026-01-14 09:44:21 +01:00
Code Issues Packages Projects Releases Wiki Activity

animation group

Browse Source
This commit is contained in:
Preet Shihn
2020-05-26 19:03:33 -07:00
parent 111573c898
commit 4cd901716f
3 changed files with 41 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
src/model.ts
View File

@@ -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;
@@ -25,3 +27,8 @@ export interface RoughAnnotation {
hide(): void;
remove(): void;
}
export interface RoughAnnotationGroup {
show(): void;
hide(): void;
}

8
src/render.ts
View File

@@ -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 initialDelay = config.animationDelay === 0 ? 0 : (config.animationDelay || 0);
const totalDuration = config.animationDuration === 0 ? 0 : (config.animationDuration || DEFAULT_ANIMATION_DURATION);
const initialDelay = (config.animationDelay === 0 ? 0 : (config.animationDelay || 0)) + (animationGroupDelay || 0);
for (const d of pathStrings) {
const path = document.createElementNS(SVG_NS, 'path');

32
src/rough-notation.ts
View File

@@ -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';
}
@@ -180,3 +185,26 @@ 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();
}
}
}
}