Skip to content

Commit 269238f

Browse files
BeksOmegaBeksOmega
committed
fixup implementation to actually work
1 parent 62c7484 commit 269238f

File tree

4 files changed

+199
-130
lines changed

4 files changed

+199
-130
lines changed

‎demo.html‎

Lines changed: 51 additions & 50 deletions
Original file line numberDiff line numberDiff line change
@@ -1,58 +1,59 @@
11
<!DOCTYPE html>
22
<html>
3-
<head>
4-
<title>Rough Notation Demo</title>
5-
<style>
6-
body {
7-
font-family: sans-serif;
8-
display: flex;
9-
flex-direction: column;
10-
align-items: center;
11-
justify-content: center;
12-
height: 100vh;
13-
margin: 0;
14-
}
15-
#annotated-text {
16-
font-size: 2em;
17-
padding: 20px;
18-
border: 1px solid #ccc;
19-
cursor: pointer;
20-
}
21-
.instructions {
22-
margin-top: 20px;
23-
font-size: 1em;
24-
color: #555;
25-
}
26-
</style>
27-
</head>
28-
<body>
29-
30-
<div id="annotated-text">
31-
Click me to toggle the annotation.
32-
</div>
33-
34-
<div class="instructions">
35-
This demo shows the animated `hide()` method.
36-
</div>
3+
<head>
4+
<title>Rough Notation Demo</title>
5+
<style>
6+
body {
7+
font-family: sans-serif;
8+
display: flex;
9+
flex-direction: column;
10+
align-items: center;
11+
justify-content: center;
12+
height: 100vh;
13+
margin: 0;
14+
}
15+
#annotated-text {
16+
font-size: 2em;
17+
padding: 20px;
18+
border: 1px solid #ccc;
19+
cursor: pointer;
20+
}
21+
.instructions {
22+
margin-top: 20px;
23+
font-size: 1em;
24+
color: #555;
25+
}
26+
</style>
27+
</head>
28+
<body>
29+
<div id="annotated-text">Click me to toggle the annotation.</div>
3730

38-
<script src="lib/rough-notation.iife.js"></script>
39-
<script>
40-
const { annotate } = RoughNotation;
31+
<div class="instructions">
32+
This demo shows the animated `hide()` method.
33+
</div>
4134

42-
const el = document.getElementById('annotated-text');
43-
const annotation = annotate(el, { type: 'underline', color: 'red', animationDuration: 1000 });
35+
<script src="lib/rough-notation.iife.js"></script>
36+
<script>
37+
const { annotate } = RoughNotation;
4438

45-
el.addEventListener('click', () => {
46-
if (annotation.isShowing()) {
47-
annotation.hide();
48-
} else {
49-
annotation.show();
50-
}
51-
});
39+
const el = document.getElementById("annotated-text");
40+
const annotation = annotate(el, {
41+
type: "underline",
42+
color: "red",
43+
animationDuration: 1000,
44+
animateOnHide: true,
45+
});
5246

53-
// Initially show the annotation
54-
annotation.show();
55-
</script>
47+
el.addEventListener("click", () => {
48+
if (annotation.isShowing()) {
49+
annotation.hide();
50+
} else {
51+
annotation.show();
52+
}
53+
});
5654

57-
</body>
55+
// Initially show the annotation
56+
annotation.show();
57+
</script>
58+
</body>
5859
</html>

‎src/keyframes.ts‎

Lines changed: 7 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,11 @@
11
export function ensureKeyframes() {
22
if (!(window as any).__rno_kf_s) {
3-
const style = (window as any).__rno_kf_s = document.createElement('style');
4-
style.textContent = `@keyframes rough-notation-dash { to { stroke-dashoffset: 0; } }`;
3+
const style = ((window as any).__rno_kf_s =
4+
document.createElement("style"));
5+
style.textContent = `
6+
@keyframes rough-notation-dash { to { stroke-dashoffset: 0; } }
7+
@keyframes rough-notation-dash-reverse { to { stroke-dashoffset: var(--path-length); } }
8+
`;
59
document.head.appendChild(style);
610
}
7-
}
11+
}

‎src/model.ts‎

Lines changed: 12 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
export const SVG_NS = 'http://www.w3.org/2000/svg';
1+
export const SVG_NS = "http://www.w3.org/2000/svg";
22

33
export const DEFAULT_ANIMATION_DURATION = 800;
44

@@ -9,10 +9,17 @@ export interface Rect {
99
h: number;
1010
}
1111

12-
export type RoughAnnotationType = 'underline' | 'box' | 'circle' | 'highlight' | 'strike-through' | 'crossed-off' | 'bracket';
12+
export type RoughAnnotationType =
13+
| "underline"
14+
| "box"
15+
| "circle"
16+
| "highlight"
17+
| "strike-through"
18+
| "crossed-off"
19+
| "bracket";
1320
export type FullPadding = [number, number, number, number];
1421
export type RoughPadding = number | [number, number] | FullPadding;
15-
export type BracketType = 'left' | 'right' | 'top' | 'bottom';
22+
export type BracketType = "left" | "right" | "top" | "bottom";
1623

1724
export interface RoughAnnotationConfig extends RoughAnnotationConfigBase {
1825
type: RoughAnnotationType;
@@ -23,6 +30,7 @@ export interface RoughAnnotationConfig extends RoughAnnotationConfigBase {
2330
export interface RoughAnnotationConfigBase {
2431
animate?: boolean; // defaults to true
2532
animationDuration?: number; // defaulst to 1000ms
33+
animateOnHide?: boolean; // defaults to false
2634
color?: string; // defaults to currentColor
2735
strokeWidth?: number; // default based on type
2836
padding?: RoughPadding; // defaults to 5px
@@ -40,4 +48,4 @@ export interface RoughAnnotation extends RoughAnnotationConfigBase {
4048
export interface RoughAnnotationGroup {
4149
show(): void;
4250
hide(): void;
43-
}
51+
}

0 commit comments

Comments
 (0)