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

bracket annotation support (#50)

Browse Source
This commit is contained in:
Preet
2020-06-22 20:28:41 -07:00
committed by GitHub
parent e1d7e1b930
commit 212bfa06bd
2 changed files with 55 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
src/model.ts
View File

@@ -9,9 +9,10 @@ export interface Rect {
h: number;
}
export type RoughAnnotationType = 'underline' | 'box' | 'circle' | 'highlight' | 'strike-through' | 'crossed-off';
export type RoughAnnotationType = 'underline' | 'box' | 'circle' | 'highlight' | 'strike-through' | 'crossed-off' | 'bracket';
export type FullPadding = [number, number, number, number];
export type RoughPadding = number | [number, number] | FullPadding;
export type BracketType = 'left' | 'right' | 'top' | 'bottom';
export interface RoughAnnotationConfig extends RoughAnnotationConfigBase {
type: RoughAnnotationType;
@@ -25,6 +26,7 @@ export interface RoughAnnotationConfigBase {
strokeWidth?: number; // default based on type
padding?: RoughPadding; // defaults to 5px
iterations?: number; // defaults to 2
brackets?: BracketType | BracketType[]; // defaults to 'right'
}
export interface RoughAnnotation extends RoughAnnotationConfigBase {

54
src/render.ts
View File

@@ -1,6 +1,7 @@
import { Rect, RoughAnnotationConfig, SVG_NS, FullPadding } from './model.js';
import { Rect, RoughAnnotationConfig, SVG_NS, FullPadding, BracketType } from './model.js';
import { ResolvedOptions, OpSet } from 'roughjs/bin/core';
import { line, rectangle, ellipse } from 'roughjs/bin/renderer';
import { line, rectangle, ellipse, linearPath } from 'roughjs/bin/renderer';
import { Point } from 'roughjs/bin/geometry';
type RoughOptionsType = 'highlight' | 'single' | 'double';
@@ -97,6 +98,55 @@ export function renderAnnotation(svg: SVGSVGElement, rect: Rect, config: RoughAn
}
break;
}
case 'bracket': {
const o = getOptions('single', seed);
const brackets: BracketType[] = Array.isArray(config.brackets) ? config.brackets : (config.brackets ? [config.brackets] : ['right']);
const lx = rect.x - padding[3] * 2;
const rx = rect.x + rect.w + padding[1] * 2;
const ty = rect.y - padding[0] * 2;
const by = rect.y + rect.h + padding[2] * 2;
for (const br of brackets) {
let points: Point[];
switch (br) {
case 'bottom':
points = [
[lx, rect.y + rect.h],
[lx, by],
[rx, by],
[rx, rect.y + rect.h]
];
break;
case 'top':
points = [
[lx, rect.y],
[lx, ty],
[rx, ty],
[rx, rect.y]
];
break;
case 'left':
points = [
[rect.x, ty],
[lx, ty],
[lx, by],
[rect.x, by]
];
break;
case 'right':
points = [
[rect.x + rect.w, ty],
[rx, ty],
[rx, by],
[rect.x + rect.w, by]
];
break;
}
if (points) {
opList.push(linearPath(points, false, o));
}
}
break;
}
case 'crossed-off': {
const o = getOptions('single', seed);
const x = rect.x;