arthur/rough-notation
1
0
Fork 0
mirror of https://github.com/slidevjs/rough-notation.git synced 2026-01-27 23:40:28 +01:00
Code Issues Packages Projects Releases Wiki Activity

fixed a bug in rehighlighting

Browse Source
This commit is contained in:
Preet Shihn
2020-06-16 01:34:19 -07:00
parent 2ebd8b40b9
commit 58b7a5d864
3 changed files with 7 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
package.json
View File

@@ -1,6 +1,6 @@
{ {
"name": "rough-notation", "name": "rough-notation",
"version": "0.3.2", "version": "0.3.3",
"description": "Create and animate hand-drawn annotations on a web page", "description": "Create and animate hand-drawn annotations on a web page",
"main": "lib/rough-notation.cjs.js", "main": "lib/rough-notation.cjs.js",
"module": "lib/rough-notation.esm.js", "module": "lib/rough-notation.esm.js",

7
src/render.ts
View File

@@ -1,4 +1,4 @@
import { Rect, RoughAnnotationConfig, SVG_NS, DEFAULT_ANIMATION_DURATION, FullPadding } from './model.js'; import { Rect, RoughAnnotationConfig, SVG_NS, FullPadding } from './model.js';
import { ResolvedOptions, OpSet } from 'roughjs/bin/core'; import { ResolvedOptions, OpSet } from 'roughjs/bin/core';
import { line, rectangle, ellipse } from 'roughjs/bin/renderer'; import { line, rectangle, ellipse } from 'roughjs/bin/renderer';
@@ -54,7 +54,7 @@ function parsePadding(config: RoughAnnotationConfig): FullPadding {
return [5, 5, 5, 5]; return [5, 5, 5, 5];
} }
export function renderAnnotation(svg: SVGSVGElement, rect: Rect, config: RoughAnnotationConfig, animationGroupDelay: number, seed: number) { export function renderAnnotation(svg: SVGSVGElement, rect: Rect, config: RoughAnnotationConfig, animationGroupDelay: number, animationDuration: number, seed: number) {
const opList: OpSet[] = []; const opList: OpSet[] = [];
let strokeWidth = config.strokeWidth || 2; let strokeWidth = config.strokeWidth || 2;
const padding = parsePadding(config); const padding = parsePadding(config);
@@ -156,7 +156,6 @@ export function renderAnnotation(svg: SVGSVGElement, rect: Rect, config: RoughAn
const lengths: number[] = []; const lengths: number[] = [];
const pathElements: SVGPathElement[] = []; const pathElements: SVGPathElement[] = [];
let totalLength = 0; let totalLength = 0;
const totalDuration = config.animationDuration === 0 ? 0 : (config.animationDuration || DEFAULT_ANIMATION_DURATION);
const setAttr = (p: SVGPathElement, an: string, av: string) => p.setAttribute(an, av); const setAttr = (p: SVGPathElement, an: string, av: string) => p.setAttribute(an, av);
for (const d of pathStrings) { for (const d of pathStrings) {
@@ -179,7 +178,7 @@ export function renderAnnotation(svg: SVGSVGElement, rect: Rect, config: RoughAn
for (let i = 0; i < pathElements.length; i++) { for (let i = 0; i < pathElements.length; i++) {
const path = pathElements[i]; const path = pathElements[i];
const length = lengths[i]; const length = lengths[i];
const duration = totalLength ? (totalDuration * (length / totalLength)) : 0; const duration = totalLength ? (animationDuration * (length / totalLength)) : 0;
const delay = animationGroupDelay + durationOffset; const delay = animationGroupDelay + durationOffset;
const style = path.style; const style = path.style;
style.strokeDashoffset = `${length}`; style.strokeDashoffset = `${length}`;

6
src/rough-notation.ts
View File

@@ -216,9 +216,9 @@ class RoughAnnotationImpl implements RoughAnnotation {
let delay = 0; let delay = 0;
for (let i = 0; i < rects.length; i++) { for (let i = 0; i < rects.length; i++) {
const rect = rects[i]; const rect = rects[i];
config.animationDuration = totalDuration * (rect.w / totalWidth); const ad = totalDuration * (rect.w / totalWidth);
renderAnnotation(svg, rects[i], config, delay + this._animationDelay, this._seed); renderAnnotation(svg, rects[i], config, delay + this._animationDelay, ad, this._seed);
delay += config.animationDuration; delay += ad;
} }
this._lastSizes = rects; this._lastSizes = rects;
this._state = 'showing'; this._state = 'showing';