arthur/rough-notation
1
0
Fork 0
mirror of https://github.com/slidevjs/rough-notation.git synced 2026-01-17 10:47:56 +01:00
Code Issues Packages Projects Releases Wiki Activity

Multi line+element (#39)

Browse Source 
* [Proof of Concept] Support for multiline annotations (#21)

* Added test for multi annotations

* Added proof of concept support for multiple lines

* Eliminated the compute sizes function

* Added back the .js suffixes

* Eliminated changes to the public facing models

Co-authored-by: Preet <833927+pshihn@users.noreply.github.com>

* .

* multiline support

* minor code opt

* minor opt

* minor opt

Co-authored-by: Nick Cuthbert <nick@cuthbert.co.za>
This commit is contained in:
Preet
2020-06-13 00:34:02 -07:00
committed by GitHub
parent ff9318fdc2
commit 7d7693d98a
3 changed files with 98 additions and 96 deletions
Download Patch File Download Diff File Expand all files Collapse all files

67
src/render.ts
View File

@@ -2,43 +2,30 @@ import { Rect, RoughAnnotationConfig, SVG_NS, DEFAULT_ANIMATION_DURATION, FullPa
import { ResolvedOptions, OpSet } from 'roughjs/bin/core';
import { line, rectangle, ellipse } from 'roughjs/bin/renderer';
const defaultOptions: ResolvedOptions = {
maxRandomnessOffset: 2,
roughness: 1.5,
bowing: 1,
stroke: '#000',
strokeWidth: 1.5,
curveTightness: 0,
curveFitting: 0.95,
curveStepCount: 9,
fillStyle: 'hachure',
fillWeight: -1,
hachureAngle: -41,
hachureGap: -1,
dashOffset: -1,
dashGap: -1,
zigzagOffset: -1,
seed: 0,
combineNestedSvgPaths: false,
disableMultiStroke: false,
disableMultiStrokeFill: false
};
type RoughOptionsType = 'highlight' | 'single' | 'double';
function getOptions(type: RoughOptionsType, seed: number): ResolvedOptions {
const o = JSON.parse(JSON.stringify(defaultOptions)) as ResolvedOptions;
switch (type) {
case 'highlight':
o.roughness = 3;
o.disableMultiStroke = true;
break;
case 'single':
o.disableMultiStroke = true;
break;
}
o.seed = seed;
return o;
return {
maxRandomnessOffset: 2,
roughness: type === 'highlight' ? 3 : 1.5,
bowing: 1,
stroke: '#000',
strokeWidth: 1.5,
curveTightness: 0,
curveFitting: 0.95,
curveStepCount: 9,
fillStyle: 'hachure',
fillWeight: -1,
hachureAngle: -41,
hachureGap: -1,
dashOffset: -1,
dashGap: -1,
zigzagOffset: -1,
combineNestedSvgPaths: false,
disableMultiStroke: type !== 'double',
disableMultiStrokeFill: false,
seed
};
}
function parsePadding(config: RoughAnnotationConfig): FullPadding {
@@ -170,14 +157,14 @@ export function renderAnnotation(svg: SVGSVGElement, rect: Rect, config: RoughAn
const pathElements: SVGPathElement[] = [];
let totalLength = 0;
const totalDuration = config.animationDuration === 0 ? 0 : (config.animationDuration || DEFAULT_ANIMATION_DURATION);
const initialDelay = (config.animationDelay === 0 ? 0 : (config.animationDelay || 0)) + (animationGroupDelay || 0);
const setAttr = (p: SVGPathElement, an: string, av: string) => p.setAttribute(an, av);
for (const d of pathStrings) {
const path = document.createElementNS(SVG_NS, 'path');
path.setAttribute('d', d);
path.setAttribute('fill', 'none');
path.setAttribute('stroke', config.color || 'currentColor');
path.setAttribute('stroke-width', `${strokeWidth}`);
setAttr(path, 'd', d);
setAttr(path, 'fill', 'none');
setAttr(path, 'stroke', config.color || 'currentColor');
setAttr(path, 'stroke-width', `${strokeWidth}`);
if (animate) {
const length = path.getTotalLength();
lengths.push(length);
@@ -193,7 +180,7 @@ export function renderAnnotation(svg: SVGSVGElement, rect: Rect, config: RoughAn
const path = pathElements[i];
const length = lengths[i];
const duration = totalLength ? (totalDuration * (length / totalLength)) : 0;
const delay = initialDelay + durationOffset;
const delay = animationGroupDelay + durationOffset;
const style = path.style;
style.strokeDashoffset = `${length}`;
style.strokeDasharray = `${length}`;