├── .npmignore ├── .prettierrc.json ├── src ├── RoughNotation │ ├── index.ts │ ├── types.ts │ └── RoughNotation.tsx ├── RoughNotationGroup │ ├── index.ts │ ├── types.ts │ └── RoughNotationGroup.tsx └── index.ts ├── dist ├── RoughNotation │ ├── index.d.ts │ ├── RoughNotation.d.ts │ └── types.d.ts ├── RoughNotationGroup │ ├── index.d.ts │ ├── RoughNotationGroup.d.ts │ └── types.d.ts ├── index.d.ts ├── module.es.js ├── main.js ├── module.es.js.map └── main.js.map ├── .gitignore ├── .github ├── ISSUE_TEMPLATE │ ├── feature_request.md │ └── bug_report.md └── workflows │ └── codeql-analysis.yml ├── tsconfig.json ├── .eslintrc.json ├── rollup.config.js ├── LICENSE ├── package.json └── README.md /.npmignore: -------------------------------------------------------------------------------- 1 | .babelrc 2 | config 3 | demo 4 | public 5 | scripts 6 | src 7 | webpack.config.js 8 | -------------------------------------------------------------------------------- /.prettierrc.json: -------------------------------------------------------------------------------- 1 | { 2 | "trailingComma": "es5", 3 | "tabWidth": 2, 4 | "semi": false, 5 | "singleQuote": true 6 | } 7 | -------------------------------------------------------------------------------- /src/RoughNotation/index.ts: -------------------------------------------------------------------------------- 1 | export { default as RoughNotation } from './RoughNotation' 2 | export { types, RoughNotationProps } from './types' 3 | -------------------------------------------------------------------------------- /dist/RoughNotation/index.d.ts: -------------------------------------------------------------------------------- 1 | export { default as RoughNotation } from './RoughNotation'; 2 | export { types, RoughNotationProps } from './types'; 3 | -------------------------------------------------------------------------------- /src/RoughNotationGroup/index.ts: -------------------------------------------------------------------------------- 1 | export { default as RoughNotationGroup } from './RoughNotationGroup' 2 | export { RoughNotationGroupProps } from './types' 3 | -------------------------------------------------------------------------------- /dist/RoughNotationGroup/index.d.ts: -------------------------------------------------------------------------------- 1 | export { default as RoughNotationGroup } from './RoughNotationGroup'; 2 | export { RoughNotationGroupProps } from './types'; 3 | -------------------------------------------------------------------------------- /dist/index.d.ts: -------------------------------------------------------------------------------- 1 | export { RoughNotation, RoughNotationProps, types } from './RoughNotation/'; 2 | export { RoughNotationGroup, RoughNotationGroupProps, } from './RoughNotationGroup/'; 3 | -------------------------------------------------------------------------------- /src/index.ts: -------------------------------------------------------------------------------- 1 | export { RoughNotation, RoughNotationProps, types } from './RoughNotation/' 2 | 3 | export { 4 | RoughNotationGroup, 5 | RoughNotationGroupProps, 6 | } from './RoughNotationGroup/' 7 | -------------------------------------------------------------------------------- /dist/RoughNotation/RoughNotation.d.ts: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { RoughNotationProps } from './types'; 3 | declare const RoughNotation: React.FunctionComponent; 4 | export default RoughNotation; 5 | -------------------------------------------------------------------------------- /dist/RoughNotationGroup/RoughNotationGroup.d.ts: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { Payload, RoughNotationGroupProps } from './types'; 3 | declare const RoughNotationGroup: React.FunctionComponent; 4 | export declare const useGroupContext: (annotation: Payload['annotation'], order: Payload['order']) => void; 5 | export default RoughNotationGroup; 6 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files. 2 | 3 | # dependencies 4 | node_modules 5 | /.pnp 6 | .pnp.js 7 | 8 | # testing 9 | /coverage 10 | 11 | # production 12 | /build 13 | 14 | # misc 15 | .DS_Store 16 | .env.local 17 | .env.development.local 18 | .env.test.local 19 | .env.production.local 20 | 21 | npm-debug.log* 22 | yarn-debug.log* 23 | yarn-error.log* 24 | -------------------------------------------------------------------------------- /src/RoughNotationGroup/types.ts: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | 3 | import { Annotation } from '../RoughNotation/types' 4 | 5 | export interface RoughNotationGroupProps { 6 | children: React.ReactNode 7 | show?: boolean 8 | } 9 | 10 | export type State = { 11 | annotations: Array 12 | } 13 | 14 | export type Payload = { 15 | annotation: { 16 | getAnnotation: () => Annotation 17 | show: () => void 18 | hide: () => void 19 | } 20 | order: number | undefined 21 | } 22 | 23 | export type Action = { 24 | type: 'ADD' 25 | payload: Payload 26 | } 27 | 28 | export type Dispatch = (action: Action) => void 29 | -------------------------------------------------------------------------------- /dist/RoughNotationGroup/types.d.ts: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { Annotation } from '../RoughNotation/types'; 3 | export interface RoughNotationGroupProps { 4 | children: React.ReactNode; 5 | show?: boolean; 6 | } 7 | export declare type State = { 8 | annotations: Array; 9 | }; 10 | export declare type Payload = { 11 | annotation: { 12 | getAnnotation: () => Annotation; 13 | show: () => void; 14 | hide: () => void; 15 | }; 16 | order: number | undefined; 17 | }; 18 | export declare type Action = { 19 | type: 'ADD'; 20 | payload: Payload; 21 | }; 22 | export declare type Dispatch = (action: Action) => void; 23 | -------------------------------------------------------------------------------- /.github/ISSUE_TEMPLATE/feature_request.md: -------------------------------------------------------------------------------- 1 | --- 2 | name: Feature request 3 | about: Suggest an idea for this project 4 | title: '' 5 | labels: '' 6 | assignees: '' 7 | 8 | --- 9 | 10 | **Is your feature request related to a problem? Please describe.** 11 | A clear and concise description of what the problem is. Ex. I'm always frustrated when [...] 12 | 13 | **Describe the solution you'd like** 14 | A clear and concise description of what you want to happen. 15 | 16 | **Describe alternatives you've considered** 17 | A clear and concise description of any alternative solutions or features you've considered. 18 | 19 | **Additional context** 20 | Add any other context or screenshots about the feature request here. 21 | -------------------------------------------------------------------------------- /tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "allowJs": false, 4 | "allowSyntheticDefaultImports": true, 5 | "declaration": true, 6 | "declarationDir": "dist", 7 | "esModuleInterop": true, 8 | "forceConsistentCasingInFileNames": true, 9 | "jsx": "react", 10 | "lib": ["es6", "dom", "es2016", "es2017"], 11 | "module": "esnext", 12 | "moduleResolution": "node", 13 | "noImplicitAny": true, 14 | "noImplicitReturns": true, 15 | "noImplicitThis": true, 16 | "noUnusedLocals": true, 17 | "noUnusedParameters": true, 18 | "outDir": "dist", 19 | "sourceMap": true, 20 | "strictNullChecks": true, 21 | "suppressImplicitAnyIndexErrors": true, 22 | "target": "es5" 23 | }, 24 | "include": ["src"], 25 | "exclude": ["node_modules", "dist", "example", "rollup.config.js"] 26 | } 27 | -------------------------------------------------------------------------------- /.eslintrc.json: -------------------------------------------------------------------------------- 1 | { 2 | "env": { 3 | "browser": true, 4 | "es2020": true 5 | }, 6 | "extends": [ 7 | "eslint:recommended", 8 | "plugin:react/recommended", 9 | "plugin:@typescript-eslint/recommended", 10 | "plugin:react-hooks/recommended" 11 | ], 12 | "parser": "@typescript-eslint/parser", 13 | "parserOptions": { 14 | "ecmaFeatures": { 15 | "jsx": true 16 | }, 17 | "ecmaVersion": 11, 18 | "sourceType": "module", 19 | "project": "./tsconfig.json" 20 | }, 21 | "plugins": ["react", "@typescript-eslint"], 22 | "rules": { 23 | "indent": ["error", 2, { "SwitchCase": 1 }], 24 | "linebreak-style": ["error", "windows"], 25 | "quotes": ["error", "single"], 26 | "semi": ["error", "never"], 27 | "react/prop-types": 0, 28 | "@typescript-eslint/no-non-null-assertion": "off" 29 | } 30 | } 31 | -------------------------------------------------------------------------------- /rollup.config.js: -------------------------------------------------------------------------------- 1 | import resolve from '@rollup/plugin-node-resolve' 2 | import peerDepsExternal from 'rollup-plugin-peer-deps-external' 3 | import commonJS from '@rollup/plugin-commonjs' 4 | import typescript from 'rollup-plugin-typescript2' 5 | 6 | import pkg from './package.json' 7 | 8 | export default { 9 | external: ['rough-notation'], 10 | input: 'src/index.ts', 11 | strictDeprecations: true, 12 | output: [ 13 | { 14 | banner: `'use client';`, 15 | exports: 'named', 16 | file: pkg.main, 17 | format: 'cjs', 18 | sourcemap: true, 19 | strict: false, 20 | }, 21 | { 22 | banner: `'use client';`, 23 | file: pkg.module, 24 | format: 'esm', 25 | sourcemap: true, 26 | }, 27 | ], 28 | plugins: [ 29 | peerDepsExternal({}), 30 | resolve(), 31 | commonJS({ 32 | include: 'node_modules/**', 33 | }), 34 | typescript({ 35 | useTsconfigDeclarationDir: true, 36 | }), 37 | ], 38 | } 39 | -------------------------------------------------------------------------------- /.github/ISSUE_TEMPLATE/bug_report.md: -------------------------------------------------------------------------------- 1 | --- 2 | name: Bug report 3 | about: Create a report to help us improve 4 | title: '' 5 | labels: '' 6 | assignees: '' 7 | 8 | --- 9 | 10 | **Describe the bug** 11 | A clear and concise description of what the bug is. 12 | 13 | **To Reproduce** 14 | Steps to reproduce the behavior: 15 | 1. Go to '...' 16 | 2. Click on '....' 17 | 3. Scroll down to '....' 18 | 4. See error 19 | 20 | **Expected behavior** 21 | A clear and concise description of what you expected to happen. 22 | 23 | **Screenshots** 24 | If applicable, add screenshots to help explain your problem. 25 | 26 | **Desktop (please complete the following information):** 27 | - OS: [e.g. iOS] 28 | - Browser [e.g. chrome, safari] 29 | - Version [e.g. 22] 30 | 31 | **Smartphone (please complete the following information):** 32 | - Device: [e.g. iPhone6] 33 | - OS: [e.g. iOS8.1] 34 | - Browser [e.g. stock browser, safari] 35 | - Version [e.g. 22] 36 | 37 | **Additional context** 38 | Add any other context about the problem here. 39 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2020 Link Strifer 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /dist/RoughNotation/types.d.ts: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | export declare type types = 'underline' | 'box' | 'circle' | 'highlight' | 'strike-through' | 'crossed-off' | 'bracket'; 3 | declare type brackets = 'left' | 'right' | 'top' | 'bottom'; 4 | interface RoughNotationProperties { 5 | animate?: boolean; 6 | animationDelay?: number; 7 | animationDuration?: number; 8 | brackets?: brackets | brackets[]; 9 | color?: string; 10 | iterations?: number; 11 | multiline?: boolean; 12 | order?: number | string; 13 | padding?: number | [number, number, number, number] | [number, number]; 14 | strokeWidth?: number; 15 | } 16 | export interface RoughNotationProps extends RoughNotationProperties { 17 | children: React.ReactNode; 18 | customElement?: string; 19 | getAnnotationObject?: (annotation: Annotation) => void; 20 | show?: boolean; 21 | type: types; 22 | } 23 | export interface Annotation extends RoughNotationProperties { 24 | isShowing(): boolean; 25 | show(): void; 26 | hide(): void; 27 | remove(): void; 28 | } 29 | export interface Props { 30 | children: React.ReactNode; 31 | } 32 | export {}; 33 | -------------------------------------------------------------------------------- /src/RoughNotation/types.ts: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | 3 | export type types = 4 | | 'underline' 5 | | 'box' 6 | | 'circle' 7 | | 'highlight' 8 | | 'strike-through' 9 | | 'crossed-off' 10 | | 'bracket' 11 | 12 | type brackets = 'left' | 'right' | 'top' | 'bottom' 13 | 14 | interface RoughNotationProperties { 15 | animate?: boolean 16 | animationDelay?: number 17 | animationDuration?: number 18 | brackets?: brackets | brackets[] 19 | color?: string 20 | iterations?: number 21 | multiline?: boolean 22 | order?: number | string 23 | padding?: number | [number, number, number, number] | [number, number] 24 | strokeWidth?: number 25 | } 26 | 27 | export interface RoughNotationProps extends RoughNotationProperties { 28 | children: React.ReactNode 29 | customElement?: string 30 | getAnnotationObject?: (annotation: Annotation) => void 31 | show?: boolean 32 | type: types 33 | } 34 | 35 | export interface Annotation extends RoughNotationProperties { 36 | isShowing(): boolean 37 | show(): void 38 | hide(): void 39 | remove(): void 40 | } 41 | 42 | export interface Props { 43 | children: React.ReactNode 44 | } 45 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "react-rough-notation", 3 | "version": "1.0.8", 4 | "main": "./dist/main.js", 5 | "module": "./dist/module.es.js", 6 | "types": "./dist/index.d.ts", 7 | "scripts": { 8 | "build": "rollup -c", 9 | "start": "rollup -c -w", 10 | "publish:beta": "npm run build && npm publish --tag beta", 11 | "publish": "npm run build && npm publish" 12 | }, 13 | "dependencies": { 14 | "rough-notation": "^0.5.1" 15 | }, 16 | "peerDependencies": { 17 | "react": "^18.2.0 || ^19.0.0", 18 | "react-dom": "^18.2.0 || ^19.0.0" 19 | }, 20 | "devDependencies": { 21 | "@rollup/plugin-commonjs": "^13.0.0", 22 | "@rollup/plugin-node-resolve": "^8.1.0", 23 | "@types/react": "^16.9.35", 24 | "@types/react-dom": "^16.9.8", 25 | "@typescript-eslint/eslint-plugin": "^3.6.0", 26 | "@typescript-eslint/parser": "^3.6.0", 27 | "babel-core": "^6.26.3", 28 | "babel-runtime": "^6.26.0", 29 | "eslint": "^7.4.0", 30 | "eslint-plugin-react": "^7.20.3", 31 | "eslint-plugin-react-hooks": "^4.0.7", 32 | "react": "^18.2.0 || ^19.0.0", 33 | "react-dom": "^18.2.0 || ^19.0.0", 34 | "rollup": "^2.79.1", 35 | "rollup-plugin-peer-deps-external": "^2.2.3", 36 | "rollup-plugin-typescript2": "^0.27.1", 37 | "typescript": "^3.9.3" 38 | }, 39 | "files": [ 40 | "dist" 41 | ], 42 | "description": "This is a React wrapper for [RoughNotation](https://roughnotation.com/), a small JavaScript library to create and animate annotations on a web page.", 43 | "repository": { 44 | "type": "git", 45 | "url": "git+https://github.com/linkstrifer/react-rough-notation.git" 46 | }, 47 | "keywords": [ 48 | "annotate", 49 | "react-component", 50 | "react", 51 | "rough", 52 | "sketchy" 53 | ], 54 | "author": "Link Strifer", 55 | "license": "MIT", 56 | "bugs": { 57 | "url": "https://github.com/linkstrifer/react-rough-notation/issues" 58 | } 59 | } 60 | -------------------------------------------------------------------------------- /.github/workflows/codeql-analysis.yml: -------------------------------------------------------------------------------- 1 | # For most projects, this workflow file will not need changing; you simply need 2 | # to commit it to your repository. 3 | # 4 | # You may wish to alter this file to override the set of languages analyzed, 5 | # or to provide custom queries or build logic. 6 | # 7 | # ******** NOTE ******** 8 | # We have attempted to detect the languages in your repository. Please check 9 | # the `language` matrix defined below to confirm you have the correct set of 10 | # supported CodeQL languages. 11 | # 12 | name: "CodeQL" 13 | 14 | on: 15 | push: 16 | branches: [ main ] 17 | pull_request: 18 | # The branches below must be a subset of the branches above 19 | branches: [ main ] 20 | schedule: 21 | - cron: '17 14 * * 3' 22 | 23 | jobs: 24 | analyze: 25 | name: Analyze 26 | runs-on: ubuntu-latest 27 | permissions: 28 | actions: read 29 | contents: read 30 | security-events: write 31 | 32 | strategy: 33 | fail-fast: false 34 | matrix: 35 | language: [ 'javascript' ] 36 | # CodeQL supports [ 'cpp', 'csharp', 'go', 'java', 'javascript', 'python' ] 37 | # Learn more: 38 | # https://docs.github.com/en/free-pro-team@latest/github/finding-security-vulnerabilities-and-errors-in-your-code/configuring-code-scanning#changing-the-languages-that-are-analyzed 39 | 40 | steps: 41 | - name: Checkout repository 42 | uses: actions/checkout@v2 43 | 44 | # Initializes the CodeQL tools for scanning. 45 | - name: Initialize CodeQL 46 | uses: github/codeql-action/init@v1 47 | with: 48 | languages: ${{ matrix.language }} 49 | # If you wish to specify custom queries, you can do so here or in a config file. 50 | # By default, queries listed here will override any specified in a config file. 51 | # Prefix the list here with "+" to use these queries and those in the config file. 52 | # queries: ./path/to/local/query, your-org/your-repo/queries@main 53 | 54 | # Autobuild attempts to build any compiled languages (C/C++, C#, or Java). 55 | # If this step fails, then you should remove it and run the build manually (see below) 56 | - name: Autobuild 57 | uses: github/codeql-action/autobuild@v1 58 | 59 | # ℹ️ Command-line programs to run using the OS shell. 60 | # 📚 https://git.io/JvXDl 61 | 62 | # ✏️ If the Autobuild fails above, remove it and uncomment the following three lines 63 | # and modify them (or add more) to build your code if your project 64 | # uses a compiled language 65 | 66 | #- run: | 67 | # make bootstrap 68 | # make release 69 | 70 | - name: Perform CodeQL Analysis 71 | uses: github/codeql-action/analyze@v1 72 | -------------------------------------------------------------------------------- /src/RoughNotation/RoughNotation.tsx: -------------------------------------------------------------------------------- 1 | 'use client' 2 | import React, { useRef, useEffect, useCallback } from 'react' 3 | 4 | import { annotate } from 'rough-notation' 5 | 6 | import { useGroupContext } from '../RoughNotationGroup/RoughNotationGroup' 7 | 8 | import { RoughNotationProps, Annotation } from './types' 9 | 10 | const RoughNotation: React.FunctionComponent = ({ 11 | animate = true, 12 | animationDelay = 0, 13 | animationDuration = 800, 14 | brackets, 15 | children, 16 | color, 17 | customElement = 'span', 18 | getAnnotationObject, 19 | iterations = 2, 20 | multiline = false, 21 | order, 22 | padding = 5, 23 | show = false, 24 | strokeWidth = 1, 25 | type = 'underline', 26 | ...rest 27 | }) => { 28 | const element = useRef(null) 29 | const annotation = useRef() 30 | const innerVars = useRef<{ 31 | playing: boolean 32 | timeout: null | number 33 | }>({ 34 | playing: false, 35 | timeout: null, 36 | }) 37 | const initialOptions = useRef({ 38 | animate, 39 | animationDuration, 40 | brackets, 41 | color, 42 | getAnnotationObject, 43 | iterations, 44 | multiline, 45 | padding, 46 | strokeWidth, 47 | type, 48 | }) 49 | 50 | const showAnnotation = useCallback(() => { 51 | if (!innerVars.current.timeout) { 52 | innerVars.current.timeout = window.setTimeout(() => { 53 | innerVars.current.playing = true 54 | 55 | annotation.current?.show?.() 56 | 57 | window.setTimeout(() => { 58 | innerVars.current.playing = false 59 | innerVars.current.timeout = null 60 | }, animationDuration) 61 | }, animationDelay) 62 | } 63 | }, [animationDelay, animationDuration]) 64 | 65 | const hideAnnotation = useCallback(() => { 66 | annotation.current?.hide?.() 67 | innerVars.current.playing = false 68 | 69 | if (innerVars.current.timeout) { 70 | clearTimeout(innerVars.current.timeout) 71 | innerVars.current.timeout = null 72 | } 73 | }, []) 74 | 75 | const getAnnotation = useCallback(() => { 76 | return annotation.current! 77 | }, [annotation]) 78 | 79 | useGroupContext( 80 | { 81 | getAnnotation, 82 | show: showAnnotation, 83 | hide: hideAnnotation, 84 | }, 85 | typeof order === 'string' ? parseInt(order) : order 86 | ) 87 | 88 | useEffect(() => { 89 | const options = initialOptions.current 90 | const { getAnnotationObject: getAnnotationObjectFromOptions } = options 91 | 92 | annotation.current = annotate(element.current!, options) 93 | 94 | if (getAnnotationObjectFromOptions) { 95 | getAnnotationObjectFromOptions(annotation.current) 96 | } 97 | 98 | return () => { 99 | annotation.current?.remove?.() 100 | } 101 | }, []) 102 | 103 | useEffect(() => { 104 | if (show) { 105 | showAnnotation() 106 | } else { 107 | hideAnnotation() 108 | } 109 | }, [ 110 | annotation, 111 | show, 112 | animationDelay, 113 | innerVars, 114 | animationDuration, 115 | showAnnotation, 116 | hideAnnotation, 117 | ]) 118 | 119 | useEffect(() => { 120 | if (annotation.current) { 121 | annotation.current.animate = animate 122 | annotation.current.animationDuration = animationDuration 123 | annotation.current.color = color 124 | annotation.current.strokeWidth = strokeWidth 125 | annotation.current.padding = padding 126 | } 127 | }, [annotation, animate, animationDuration, color, strokeWidth, padding]) 128 | 129 | return React.createElement( 130 | customElement, 131 | { 132 | ref: element, 133 | ...rest, 134 | }, 135 | children 136 | ) 137 | } 138 | 139 | export default RoughNotation 140 | -------------------------------------------------------------------------------- /src/RoughNotationGroup/RoughNotationGroup.tsx: -------------------------------------------------------------------------------- 1 | import React, { 2 | createContext, 3 | useContext, 4 | useEffect, 5 | useReducer, 6 | useRef, 7 | } from 'react' 8 | 9 | import { 10 | Action, 11 | Dispatch, 12 | Payload, 13 | RoughNotationGroupProps, 14 | State, 15 | } from './types' 16 | 17 | const GroupContext = createContext(null) 18 | const GroupDispatchContext = createContext(null) 19 | 20 | const initialState: State = { 21 | annotations: [], 22 | } 23 | 24 | function reducer(state: State, { type, payload }: Action) { 25 | switch (type) { 26 | case 'ADD': { 27 | const annotations = [...state.annotations, payload] 28 | 29 | const annotationsToSort = annotations.reduce( 30 | (toSort, annotation) => { 31 | const newAnnotations: { 32 | withOrder: Payload[] 33 | withoutOrder: Payload[] 34 | } = { 35 | ...toSort, 36 | } 37 | 38 | if (typeof annotation.order === 'number') { 39 | newAnnotations.withOrder = [ 40 | ...newAnnotations.withOrder, 41 | annotation, 42 | ].sort((a, b) => a.order! - b.order!) 43 | } else { 44 | newAnnotations.withoutOrder = [ 45 | ...newAnnotations.withoutOrder, 46 | annotation, 47 | ] 48 | } 49 | 50 | return newAnnotations 51 | }, 52 | { 53 | withOrder: [], 54 | withoutOrder: [], 55 | } 56 | ) 57 | 58 | return { 59 | ...state, 60 | annotations: [ 61 | ...annotationsToSort.withOrder, 62 | ...annotationsToSort.withoutOrder, 63 | ], 64 | } 65 | } 66 | default: 67 | return state 68 | } 69 | } 70 | 71 | const RoughNotationGroup: React.FunctionComponent = ({ 72 | children, 73 | show, 74 | }) => { 75 | const [state, dispatch] = useReducer(reducer, initialState) 76 | const timeouts = useRef([]) 77 | 78 | useEffect(() => { 79 | let nextTimeout = 0 80 | 81 | state.annotations.forEach(({ annotation }) => { 82 | if (show) { 83 | const timeout = setTimeout(() => { 84 | annotation.show() 85 | }, nextTimeout) 86 | 87 | timeouts.current.push(timeout) 88 | 89 | nextTimeout += annotation.getAnnotation().animationDuration || 800 90 | } else { 91 | annotation.hide() 92 | 93 | timeouts.current.forEach((timeout) => { 94 | clearTimeout(timeout) 95 | 96 | timeouts.current = timeouts.current.filter( 97 | (currentTimeout) => currentTimeout !== timeout 98 | ) 99 | }) 100 | } 101 | }) 102 | }, [show, state, timeouts]) 103 | 104 | return ( 105 | 106 | 107 | {children} 108 | 109 | 110 | ) 111 | } 112 | 113 | export const useGroupContext = ( 114 | annotation: Payload['annotation'], 115 | order: Payload['order'] 116 | ): void => { 117 | const context = useContext(GroupContext) 118 | const dispatch = useContext(GroupDispatchContext) 119 | const initialProps = useRef({ annotation, context, dispatch, order }) 120 | 121 | useEffect(() => { 122 | const { 123 | annotation: currentAnnotation, 124 | context: currentContext, 125 | dispatch: currentDispatch, 126 | order: currentOrder, 127 | } = initialProps.current 128 | 129 | if (!currentContext) { 130 | return 131 | } 132 | 133 | if (currentDispatch) { 134 | return currentDispatch({ 135 | type: 'ADD', 136 | payload: { annotation: currentAnnotation, order: currentOrder }, 137 | }) 138 | } 139 | }, []) 140 | } 141 | 142 | export default RoughNotationGroup 143 | -------------------------------------------------------------------------------- /dist/module.es.js: -------------------------------------------------------------------------------- 1 | 'use client'; 2 | import React, { createContext, useReducer, useRef, useEffect, useContext, useCallback } from 'react'; 3 | import { annotate } from 'rough-notation'; 4 | 5 | /*! ***************************************************************************** 6 | Copyright (c) Microsoft Corporation. 7 | 8 | Permission to use, copy, modify, and/or distribute this software for any 9 | purpose with or without fee is hereby granted. 10 | 11 | THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH 12 | REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY 13 | AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT, 14 | INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM 15 | LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR 16 | OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR 17 | PERFORMANCE OF THIS SOFTWARE. 18 | ***************************************************************************** */ 19 | 20 | var __assign = function() { 21 | __assign = Object.assign || function __assign(t) { 22 | for (var s, i = 1, n = arguments.length; i < n; i++) { 23 | s = arguments[i]; 24 | for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p]; 25 | } 26 | return t; 27 | }; 28 | return __assign.apply(this, arguments); 29 | }; 30 | 31 | function __rest(s, e) { 32 | var t = {}; 33 | for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0) 34 | t[p] = s[p]; 35 | if (s != null && typeof Object.getOwnPropertySymbols === "function") 36 | for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) { 37 | if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i])) 38 | t[p[i]] = s[p[i]]; 39 | } 40 | return t; 41 | } 42 | 43 | function __spreadArrays() { 44 | for (var s = 0, i = 0, il = arguments.length; i < il; i++) s += arguments[i].length; 45 | for (var r = Array(s), k = 0, i = 0; i < il; i++) 46 | for (var a = arguments[i], j = 0, jl = a.length; j < jl; j++, k++) 47 | r[k] = a[j]; 48 | return r; 49 | } 50 | 51 | var GroupContext = createContext(null); 52 | var GroupDispatchContext = createContext(null); 53 | var initialState = { 54 | annotations: [], 55 | }; 56 | function reducer(state, _a) { 57 | var type = _a.type, payload = _a.payload; 58 | switch (type) { 59 | case 'ADD': { 60 | var annotations = __spreadArrays(state.annotations, [payload]); 61 | var annotationsToSort = annotations.reduce(function (toSort, annotation) { 62 | var newAnnotations = __assign({}, toSort); 63 | if (typeof annotation.order === 'number') { 64 | newAnnotations.withOrder = __spreadArrays(newAnnotations.withOrder, [ 65 | annotation, 66 | ]).sort(function (a, b) { return a.order - b.order; }); 67 | } 68 | else { 69 | newAnnotations.withoutOrder = __spreadArrays(newAnnotations.withoutOrder, [ 70 | annotation, 71 | ]); 72 | } 73 | return newAnnotations; 74 | }, { 75 | withOrder: [], 76 | withoutOrder: [], 77 | }); 78 | return __assign(__assign({}, state), { annotations: __spreadArrays(annotationsToSort.withOrder, annotationsToSort.withoutOrder) }); 79 | } 80 | default: 81 | return state; 82 | } 83 | } 84 | var RoughNotationGroup = function (_a) { 85 | var children = _a.children, show = _a.show; 86 | var _b = useReducer(reducer, initialState), state = _b[0], dispatch = _b[1]; 87 | var timeouts = useRef([]); 88 | useEffect(function () { 89 | var nextTimeout = 0; 90 | state.annotations.forEach(function (_a) { 91 | var annotation = _a.annotation; 92 | if (show) { 93 | var timeout = setTimeout(function () { 94 | annotation.show(); 95 | }, nextTimeout); 96 | timeouts.current.push(timeout); 97 | nextTimeout += annotation.getAnnotation().animationDuration || 800; 98 | } 99 | else { 100 | annotation.hide(); 101 | timeouts.current.forEach(function (timeout) { 102 | clearTimeout(timeout); 103 | timeouts.current = timeouts.current.filter(function (currentTimeout) { return currentTimeout !== timeout; }); 104 | }); 105 | } 106 | }); 107 | }, [show, state, timeouts]); 108 | return (React.createElement(GroupContext.Provider, { value: state }, 109 | React.createElement(GroupDispatchContext.Provider, { value: dispatch }, children))); 110 | }; 111 | var useGroupContext = function (annotation, order) { 112 | var context = useContext(GroupContext); 113 | var dispatch = useContext(GroupDispatchContext); 114 | var initialProps = useRef({ annotation: annotation, context: context, dispatch: dispatch, order: order }); 115 | useEffect(function () { 116 | var _a = initialProps.current, currentAnnotation = _a.annotation, currentContext = _a.context, currentDispatch = _a.dispatch, currentOrder = _a.order; 117 | if (!currentContext) { 118 | return; 119 | } 120 | if (currentDispatch) { 121 | return currentDispatch({ 122 | type: 'ADD', 123 | payload: { annotation: currentAnnotation, order: currentOrder }, 124 | }); 125 | } 126 | }, []); 127 | }; 128 | 129 | var RoughNotation = function (_a) { 130 | var _b = _a.animate, animate = _b === void 0 ? true : _b, _c = _a.animationDelay, animationDelay = _c === void 0 ? 0 : _c, _d = _a.animationDuration, animationDuration = _d === void 0 ? 800 : _d, brackets = _a.brackets, children = _a.children, color = _a.color, _e = _a.customElement, customElement = _e === void 0 ? 'span' : _e, getAnnotationObject = _a.getAnnotationObject, _f = _a.iterations, iterations = _f === void 0 ? 2 : _f, _g = _a.multiline, multiline = _g === void 0 ? false : _g, order = _a.order, _h = _a.padding, padding = _h === void 0 ? 5 : _h, _j = _a.show, show = _j === void 0 ? false : _j, _k = _a.strokeWidth, strokeWidth = _k === void 0 ? 1 : _k, _l = _a.type, type = _l === void 0 ? 'underline' : _l, rest = __rest(_a, ["animate", "animationDelay", "animationDuration", "brackets", "children", "color", "customElement", "getAnnotationObject", "iterations", "multiline", "order", "padding", "show", "strokeWidth", "type"]); 131 | var element = useRef(null); 132 | var annotation = useRef(); 133 | var innerVars = useRef({ 134 | playing: false, 135 | timeout: null, 136 | }); 137 | var initialOptions = useRef({ 138 | animate: animate, 139 | animationDuration: animationDuration, 140 | brackets: brackets, 141 | color: color, 142 | getAnnotationObject: getAnnotationObject, 143 | iterations: iterations, 144 | multiline: multiline, 145 | padding: padding, 146 | strokeWidth: strokeWidth, 147 | type: type, 148 | }); 149 | var showAnnotation = useCallback(function () { 150 | if (!innerVars.current.timeout) { 151 | innerVars.current.timeout = window.setTimeout(function () { 152 | var _a, _b; 153 | innerVars.current.playing = true; 154 | (_b = (_a = annotation.current) === null || _a === void 0 ? void 0 : _a.show) === null || _b === void 0 ? void 0 : _b.call(_a); 155 | window.setTimeout(function () { 156 | innerVars.current.playing = false; 157 | innerVars.current.timeout = null; 158 | }, animationDuration); 159 | }, animationDelay); 160 | } 161 | }, [animationDelay, animationDuration]); 162 | var hideAnnotation = useCallback(function () { 163 | var _a, _b; 164 | (_b = (_a = annotation.current) === null || _a === void 0 ? void 0 : _a.hide) === null || _b === void 0 ? void 0 : _b.call(_a); 165 | innerVars.current.playing = false; 166 | if (innerVars.current.timeout) { 167 | clearTimeout(innerVars.current.timeout); 168 | innerVars.current.timeout = null; 169 | } 170 | }, []); 171 | var getAnnotation = useCallback(function () { 172 | return annotation.current; 173 | }, [annotation]); 174 | useGroupContext({ 175 | getAnnotation: getAnnotation, 176 | show: showAnnotation, 177 | hide: hideAnnotation, 178 | }, typeof order === 'string' ? parseInt(order) : order); 179 | useEffect(function () { 180 | var options = initialOptions.current; 181 | var getAnnotationObjectFromOptions = options.getAnnotationObject; 182 | annotation.current = annotate(element.current, options); 183 | if (getAnnotationObjectFromOptions) { 184 | getAnnotationObjectFromOptions(annotation.current); 185 | } 186 | return function () { 187 | var _a, _b; 188 | (_b = (_a = annotation.current) === null || _a === void 0 ? void 0 : _a.remove) === null || _b === void 0 ? void 0 : _b.call(_a); 189 | }; 190 | }, []); 191 | useEffect(function () { 192 | if (show) { 193 | showAnnotation(); 194 | } 195 | else { 196 | hideAnnotation(); 197 | } 198 | }, [ 199 | annotation, 200 | show, 201 | animationDelay, 202 | innerVars, 203 | animationDuration, 204 | showAnnotation, 205 | hideAnnotation, 206 | ]); 207 | useEffect(function () { 208 | if (annotation.current) { 209 | annotation.current.animate = animate; 210 | annotation.current.animationDuration = animationDuration; 211 | annotation.current.color = color; 212 | annotation.current.strokeWidth = strokeWidth; 213 | annotation.current.padding = padding; 214 | } 215 | }, [annotation, animate, animationDuration, color, strokeWidth, padding]); 216 | return React.createElement(customElement, __assign({ ref: element }, rest), children); 217 | }; 218 | 219 | export { RoughNotation, RoughNotationGroup }; 220 | //# sourceMappingURL=module.es.js.map 221 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Rough Notation React (Wrapper) 2 | 3 | ![npm](https://img.shields.io/npm/v/react-rough-notation?style=for-the-badge) 4 | 5 | This is a React wrapper for [RoughNotation](https://roughnotation.com/), a small JavaScript library to create and animate annotations on a web page. 6 | 7 | - [Visit website to see it in action](https://roughnotation.com/) 8 | - [Library docs](https://github.com/pshihn/rough-notation) 9 | 10 | ![Rough Notation logo](https://roughnotation.com/images/social.png) 11 | 12 | ## Table of contents 13 | 14 | 15 | 16 | - [Rough Notation React (Wrapper)](#rough-notation-react-wrapper) 17 | - [Table of contents](#table-of-contents) 18 | - [Installation](#installation) 19 | - [RoughNotation Component](#roughnotation-component) 20 | - [Usage](#usage) 21 | - [Props](#props) 22 | - [Type values](#type-values) 23 | - [Updating Styles](#updating-styles) 24 | - [RoughNotationGroup Component](#roughnotationgroup-component) 25 | - [Usage](#usage) 26 | - [Props](#props) 27 | - [Custom order](#custom-order) 28 | - [Playground](#playground) 29 | - [TODO](#todo) 30 | 31 | 32 | 33 | ## Installation 34 | 35 | You can add rough-notation to your project via npm. 36 | 37 | ``` 38 | npm install --save react-rough-notation 39 | ``` 40 | 41 | Then just import the components you need. 42 | 43 | ```js 44 | import { RoughNotation, RoughNotationGroup } from "react-rough-notation"; 45 | ``` 46 | 47 | ## RoughNotation Component 48 | 49 | This is the main component, is a span element by default but you can change the tag name by anything you want using the `customElement` prop. 50 | 51 | ### Usage 52 | 53 | ```jsx 54 | 55 | Hello RoughNotation 56 | 57 | ``` 58 | 59 | ### Props 60 | 61 | Any unlisted prop will be pass to the component so you can use any react prop to handle interactions or styling. 62 | 63 | | name | type | default | description | 64 | | ------------------- | ---------------------------------------------------------------- | -------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | 65 | | animate | `boolean` | `true` | Turn on/off animation when annotating | 66 | | animationDelay | `number` | `0` | Delay in animation in milliseconds | 67 | | animationDuration | `number` | `800` | Duration of the animation in milliseconds | 68 | | brackets | `enum` or [`enum`] from `left`, `right`, `top`, `bottom` | `right` | Value could be a string or an array of strings, each string being one of these values: `left`, `right`, `top`, `bottom`. When drawing a bracket, this configures which side(s) of the element to bracket. | 69 | | color | `string` | | String value representing the color of the annotation sketch | 70 | | customElement | `string` | `span` | Element wrapper tagName | 71 | | getAnnotationObject | `function` | `(annotation) => {}` | Callback function called after annotation init, it will receive the javascript [annotation object](https://github.com/pshihn/rough-notation#annotation-object) as a param | 72 | | iterations | `number` | `2` | By default annotations are drawn in two iterations, e.g. when underlining, drawing from left to right and then back from right to left. Setting this property can let you configure the number of iterations. | 73 | | multiline | `boolean` | `false` | This property only applies to inline text. To annotate multiline text (each line separately), set this property to true. | 74 | | order | `number`, `string` | | Annotation order to animate if is inside an Annotation Group | 75 | | padding | `number`, `[top, right, bottom, left]`, `[vertical, horizontal]` | `5` | Padding in pixels between the element and roughly where the annotation is drawn. If you wish to specify different `top`, `left`, `right`, `bottom` paddings, you can set the value to an array akin to CSS style padding `[top, right, bottom, left]` or just `[top & bottom, left & right]` | 76 | | show | `boolean` | `false` | Show/hide the annotation | 77 | | strokeWidth | `number` | `1` | Width of the annotation strokes | 78 | | type | `enum` from (Type values)[#type-values] | `underline` | It sets the annotation style | 79 | 80 | ### Type values 81 | 82 | | value | description | 83 | | -------------- | ------------------------------------------------------- | 84 | | underline | Create a sketchy underline below an element | 85 | | box | This style draws a box around the element | 86 | | circle | Draw a circle around the element | 87 | | highlight | Creates a highlight effect as if maked by a highlighter | 88 | | strike-through | Draws a horizontal line over the element | 89 | | crossed-off | Crosses out the element with two diagonal lines | 90 | 91 | ### Updating Styles 92 | 93 | Some props can be changed after the initialization without re-rendering the annotation. i.e: if you like to change the color, just change the `color` prop, here is the complete list: 94 | 95 | | Prop | 96 | | ----------------- | 97 | | animated | 98 | | animationDuration | 99 | | color | 100 | | padding | 101 | | strokeWidth | 102 | 103 | _Note: the type of the annotation cannot be changed. Create a new annotation for that._ 104 | 105 | ## RoughNotationGroup Component 106 | 107 | This is a wrapper for multiple annotations, it will trigger the `show()` method on every child annotation after the prev annotation animation is complete. **It does not render any HTML element.** 108 | 109 | ### Usage 110 | 111 | ```jsx 112 | 113 | Hello, 114 | This is 115 | a Test 116 | 117 | ``` 118 | 119 | ### Props 120 | 121 | | name | type | default | description | 122 | | ---- | ------- | ------- | -------------------------- | 123 | | show | boolean | | show/hides the annotations | 124 | 125 | ### Custom order 126 | 127 | If you need to trigger annotations in a specific order, use the `order` prop in each `RoughAnnotation` component. 128 | 129 | i.e: Reverse order 130 | 131 | ```jsx 132 | 133 | 134 | Hello, 135 | 136 | 137 | This is 138 | 139 | 140 | a Test 141 | 142 | 143 | ``` 144 | 145 | _Note: It will annotate first the components with the `order` prop, and then the ones without it._ 146 | 147 | ## Playground 148 | 149 | You can find a [CodeSandbox demo here](https://codesandbox.io/s/github/linkstrifer/react-rough-notation-playground) 150 | 151 | ## TODO 152 | 153 | - [ ] Auto compile and publish to npm 154 | - [ ] Testing 155 | -------------------------------------------------------------------------------- /dist/main.js: -------------------------------------------------------------------------------- 1 | 'use client'; 2 | Object.defineProperty(exports, '__esModule', { value: true }); 3 | 4 | var React = require('react'); 5 | var roughNotation = require('rough-notation'); 6 | 7 | function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; } 8 | 9 | var React__default = /*#__PURE__*/_interopDefaultLegacy(React); 10 | 11 | /*! ***************************************************************************** 12 | Copyright (c) Microsoft Corporation. 13 | 14 | Permission to use, copy, modify, and/or distribute this software for any 15 | purpose with or without fee is hereby granted. 16 | 17 | THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH 18 | REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY 19 | AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT, 20 | INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM 21 | LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR 22 | OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR 23 | PERFORMANCE OF THIS SOFTWARE. 24 | ***************************************************************************** */ 25 | 26 | var __assign = function() { 27 | __assign = Object.assign || function __assign(t) { 28 | for (var s, i = 1, n = arguments.length; i < n; i++) { 29 | s = arguments[i]; 30 | for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p]; 31 | } 32 | return t; 33 | }; 34 | return __assign.apply(this, arguments); 35 | }; 36 | 37 | function __rest(s, e) { 38 | var t = {}; 39 | for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0) 40 | t[p] = s[p]; 41 | if (s != null && typeof Object.getOwnPropertySymbols === "function") 42 | for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) { 43 | if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i])) 44 | t[p[i]] = s[p[i]]; 45 | } 46 | return t; 47 | } 48 | 49 | function __spreadArrays() { 50 | for (var s = 0, i = 0, il = arguments.length; i < il; i++) s += arguments[i].length; 51 | for (var r = Array(s), k = 0, i = 0; i < il; i++) 52 | for (var a = arguments[i], j = 0, jl = a.length; j < jl; j++, k++) 53 | r[k] = a[j]; 54 | return r; 55 | } 56 | 57 | var GroupContext = React.createContext(null); 58 | var GroupDispatchContext = React.createContext(null); 59 | var initialState = { 60 | annotations: [], 61 | }; 62 | function reducer(state, _a) { 63 | var type = _a.type, payload = _a.payload; 64 | switch (type) { 65 | case 'ADD': { 66 | var annotations = __spreadArrays(state.annotations, [payload]); 67 | var annotationsToSort = annotations.reduce(function (toSort, annotation) { 68 | var newAnnotations = __assign({}, toSort); 69 | if (typeof annotation.order === 'number') { 70 | newAnnotations.withOrder = __spreadArrays(newAnnotations.withOrder, [ 71 | annotation, 72 | ]).sort(function (a, b) { return a.order - b.order; }); 73 | } 74 | else { 75 | newAnnotations.withoutOrder = __spreadArrays(newAnnotations.withoutOrder, [ 76 | annotation, 77 | ]); 78 | } 79 | return newAnnotations; 80 | }, { 81 | withOrder: [], 82 | withoutOrder: [], 83 | }); 84 | return __assign(__assign({}, state), { annotations: __spreadArrays(annotationsToSort.withOrder, annotationsToSort.withoutOrder) }); 85 | } 86 | default: 87 | return state; 88 | } 89 | } 90 | var RoughNotationGroup = function (_a) { 91 | var children = _a.children, show = _a.show; 92 | var _b = React.useReducer(reducer, initialState), state = _b[0], dispatch = _b[1]; 93 | var timeouts = React.useRef([]); 94 | React.useEffect(function () { 95 | var nextTimeout = 0; 96 | state.annotations.forEach(function (_a) { 97 | var annotation = _a.annotation; 98 | if (show) { 99 | var timeout = setTimeout(function () { 100 | annotation.show(); 101 | }, nextTimeout); 102 | timeouts.current.push(timeout); 103 | nextTimeout += annotation.getAnnotation().animationDuration || 800; 104 | } 105 | else { 106 | annotation.hide(); 107 | timeouts.current.forEach(function (timeout) { 108 | clearTimeout(timeout); 109 | timeouts.current = timeouts.current.filter(function (currentTimeout) { return currentTimeout !== timeout; }); 110 | }); 111 | } 112 | }); 113 | }, [show, state, timeouts]); 114 | return (React__default["default"].createElement(GroupContext.Provider, { value: state }, 115 | React__default["default"].createElement(GroupDispatchContext.Provider, { value: dispatch }, children))); 116 | }; 117 | var useGroupContext = function (annotation, order) { 118 | var context = React.useContext(GroupContext); 119 | var dispatch = React.useContext(GroupDispatchContext); 120 | var initialProps = React.useRef({ annotation: annotation, context: context, dispatch: dispatch, order: order }); 121 | React.useEffect(function () { 122 | var _a = initialProps.current, currentAnnotation = _a.annotation, currentContext = _a.context, currentDispatch = _a.dispatch, currentOrder = _a.order; 123 | if (!currentContext) { 124 | return; 125 | } 126 | if (currentDispatch) { 127 | return currentDispatch({ 128 | type: 'ADD', 129 | payload: { annotation: currentAnnotation, order: currentOrder }, 130 | }); 131 | } 132 | }, []); 133 | }; 134 | 135 | var RoughNotation = function (_a) { 136 | var _b = _a.animate, animate = _b === void 0 ? true : _b, _c = _a.animationDelay, animationDelay = _c === void 0 ? 0 : _c, _d = _a.animationDuration, animationDuration = _d === void 0 ? 800 : _d, brackets = _a.brackets, children = _a.children, color = _a.color, _e = _a.customElement, customElement = _e === void 0 ? 'span' : _e, getAnnotationObject = _a.getAnnotationObject, _f = _a.iterations, iterations = _f === void 0 ? 2 : _f, _g = _a.multiline, multiline = _g === void 0 ? false : _g, order = _a.order, _h = _a.padding, padding = _h === void 0 ? 5 : _h, _j = _a.show, show = _j === void 0 ? false : _j, _k = _a.strokeWidth, strokeWidth = _k === void 0 ? 1 : _k, _l = _a.type, type = _l === void 0 ? 'underline' : _l, rest = __rest(_a, ["animate", "animationDelay", "animationDuration", "brackets", "children", "color", "customElement", "getAnnotationObject", "iterations", "multiline", "order", "padding", "show", "strokeWidth", "type"]); 137 | var element = React.useRef(null); 138 | var annotation = React.useRef(); 139 | var innerVars = React.useRef({ 140 | playing: false, 141 | timeout: null, 142 | }); 143 | var initialOptions = React.useRef({ 144 | animate: animate, 145 | animationDuration: animationDuration, 146 | brackets: brackets, 147 | color: color, 148 | getAnnotationObject: getAnnotationObject, 149 | iterations: iterations, 150 | multiline: multiline, 151 | padding: padding, 152 | strokeWidth: strokeWidth, 153 | type: type, 154 | }); 155 | var showAnnotation = React.useCallback(function () { 156 | if (!innerVars.current.timeout) { 157 | innerVars.current.timeout = window.setTimeout(function () { 158 | var _a, _b; 159 | innerVars.current.playing = true; 160 | (_b = (_a = annotation.current) === null || _a === void 0 ? void 0 : _a.show) === null || _b === void 0 ? void 0 : _b.call(_a); 161 | window.setTimeout(function () { 162 | innerVars.current.playing = false; 163 | innerVars.current.timeout = null; 164 | }, animationDuration); 165 | }, animationDelay); 166 | } 167 | }, [animationDelay, animationDuration]); 168 | var hideAnnotation = React.useCallback(function () { 169 | var _a, _b; 170 | (_b = (_a = annotation.current) === null || _a === void 0 ? void 0 : _a.hide) === null || _b === void 0 ? void 0 : _b.call(_a); 171 | innerVars.current.playing = false; 172 | if (innerVars.current.timeout) { 173 | clearTimeout(innerVars.current.timeout); 174 | innerVars.current.timeout = null; 175 | } 176 | }, []); 177 | var getAnnotation = React.useCallback(function () { 178 | return annotation.current; 179 | }, [annotation]); 180 | useGroupContext({ 181 | getAnnotation: getAnnotation, 182 | show: showAnnotation, 183 | hide: hideAnnotation, 184 | }, typeof order === 'string' ? parseInt(order) : order); 185 | React.useEffect(function () { 186 | var options = initialOptions.current; 187 | var getAnnotationObjectFromOptions = options.getAnnotationObject; 188 | annotation.current = roughNotation.annotate(element.current, options); 189 | if (getAnnotationObjectFromOptions) { 190 | getAnnotationObjectFromOptions(annotation.current); 191 | } 192 | return function () { 193 | var _a, _b; 194 | (_b = (_a = annotation.current) === null || _a === void 0 ? void 0 : _a.remove) === null || _b === void 0 ? void 0 : _b.call(_a); 195 | }; 196 | }, []); 197 | React.useEffect(function () { 198 | if (show) { 199 | showAnnotation(); 200 | } 201 | else { 202 | hideAnnotation(); 203 | } 204 | }, [ 205 | annotation, 206 | show, 207 | animationDelay, 208 | innerVars, 209 | animationDuration, 210 | showAnnotation, 211 | hideAnnotation, 212 | ]); 213 | React.useEffect(function () { 214 | if (annotation.current) { 215 | annotation.current.animate = animate; 216 | annotation.current.animationDuration = animationDuration; 217 | annotation.current.color = color; 218 | annotation.current.strokeWidth = strokeWidth; 219 | annotation.current.padding = padding; 220 | } 221 | }, [annotation, animate, animationDuration, color, strokeWidth, padding]); 222 | return React__default["default"].createElement(customElement, __assign({ ref: element }, rest), children); 223 | }; 224 | 225 | exports.RoughNotation = RoughNotation; 226 | exports.RoughNotationGroup = RoughNotationGroup; 227 | //# sourceMappingURL=main.js.map 228 | -------------------------------------------------------------------------------- /dist/module.es.js.map: -------------------------------------------------------------------------------- 1 | {"version":3,"file":"module.es.js","sources":["../node_modules/tslib/tslib.es6.js","../src/RoughNotationGroup/RoughNotationGroup.tsx","../src/RoughNotation/RoughNotation.tsx"],"sourcesContent":["/*! *****************************************************************************\r\nCopyright (c) Microsoft Corporation.\r\n\r\nPermission to use, copy, modify, and/or distribute this software for any\r\npurpose with or without fee is hereby granted.\r\n\r\nTHE SOFTWARE IS PROVIDED \"AS IS\" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH\r\nREGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY\r\nAND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,\r\nINDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM\r\nLOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR\r\nOTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR\r\nPERFORMANCE OF THIS SOFTWARE.\r\n***************************************************************************** */\r\n/* global Reflect, Promise */\r\n\r\nvar extendStatics = function(d, b) {\r\n extendStatics = Object.setPrototypeOf ||\r\n ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||\r\n function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };\r\n return extendStatics(d, b);\r\n};\r\n\r\nexport function __extends(d, b) {\r\n extendStatics(d, b);\r\n function __() { this.constructor = d; }\r\n d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());\r\n}\r\n\r\nexport var __assign = function() {\r\n __assign = Object.assign || function __assign(t) {\r\n for (var s, i = 1, n = arguments.length; i < n; i++) {\r\n s = arguments[i];\r\n for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];\r\n }\r\n return t;\r\n }\r\n return __assign.apply(this, arguments);\r\n}\r\n\r\nexport function __rest(s, e) {\r\n var t = {};\r\n for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)\r\n t[p] = s[p];\r\n if (s != null && typeof Object.getOwnPropertySymbols === \"function\")\r\n for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {\r\n if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))\r\n t[p[i]] = s[p[i]];\r\n }\r\n return t;\r\n}\r\n\r\nexport function __decorate(decorators, target, key, desc) {\r\n var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;\r\n if (typeof Reflect === \"object\" && typeof Reflect.decorate === \"function\") r = Reflect.decorate(decorators, target, key, desc);\r\n else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;\r\n return c > 3 && r && Object.defineProperty(target, key, r), r;\r\n}\r\n\r\nexport function __param(paramIndex, decorator) {\r\n return function (target, key) { decorator(target, key, paramIndex); }\r\n}\r\n\r\nexport function __metadata(metadataKey, metadataValue) {\r\n if (typeof Reflect === \"object\" && typeof Reflect.metadata === \"function\") return Reflect.metadata(metadataKey, metadataValue);\r\n}\r\n\r\nexport function __awaiter(thisArg, _arguments, P, generator) {\r\n function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }\r\n return new (P || (P = Promise))(function (resolve, reject) {\r\n function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }\r\n function rejected(value) { try { step(generator[\"throw\"](value)); } catch (e) { reject(e); } }\r\n function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }\r\n step((generator = generator.apply(thisArg, _arguments || [])).next());\r\n });\r\n}\r\n\r\nexport function __generator(thisArg, body) {\r\n var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g;\r\n return g = { next: verb(0), \"throw\": verb(1), \"return\": verb(2) }, typeof Symbol === \"function\" && (g[Symbol.iterator] = function() { return this; }), g;\r\n function verb(n) { return function (v) { return step([n, v]); }; }\r\n function step(op) {\r\n if (f) throw new TypeError(\"Generator is already executing.\");\r\n while (_) try {\r\n if (f = 1, y && (t = op[0] & 2 ? y[\"return\"] : op[0] ? y[\"throw\"] || ((t = y[\"return\"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;\r\n if (y = 0, t) op = [op[0] & 2, t.value];\r\n switch (op[0]) {\r\n case 0: case 1: t = op; break;\r\n case 4: _.label++; return { value: op[1], done: false };\r\n case 5: _.label++; y = op[1]; op = [0]; continue;\r\n case 7: op = _.ops.pop(); _.trys.pop(); continue;\r\n default:\r\n if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }\r\n if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }\r\n if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }\r\n if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }\r\n if (t[2]) _.ops.pop();\r\n _.trys.pop(); continue;\r\n }\r\n op = body.call(thisArg, _);\r\n } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }\r\n if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };\r\n }\r\n}\r\n\r\nexport function __exportStar(m, exports) {\r\n for (var p in m) if (!exports.hasOwnProperty(p)) exports[p] = m[p];\r\n}\r\n\r\nexport function __values(o) {\r\n var s = typeof Symbol === \"function\" && Symbol.iterator, m = s && o[s], i = 0;\r\n if (m) return m.call(o);\r\n if (o && typeof o.length === \"number\") return {\r\n next: function () {\r\n if (o && i >= o.length) o = void 0;\r\n return { value: o && o[i++], done: !o };\r\n }\r\n };\r\n throw new TypeError(s ? \"Object is not iterable.\" : \"Symbol.iterator is not defined.\");\r\n}\r\n\r\nexport function __read(o, n) {\r\n var m = typeof Symbol === \"function\" && o[Symbol.iterator];\r\n if (!m) return o;\r\n var i = m.call(o), r, ar = [], e;\r\n try {\r\n while ((n === void 0 || n-- > 0) && !(r = i.next()).done) ar.push(r.value);\r\n }\r\n catch (error) { e = { error: error }; }\r\n finally {\r\n try {\r\n if (r && !r.done && (m = i[\"return\"])) m.call(i);\r\n }\r\n finally { if (e) throw e.error; }\r\n }\r\n return ar;\r\n}\r\n\r\nexport function __spread() {\r\n for (var ar = [], i = 0; i < arguments.length; i++)\r\n ar = ar.concat(__read(arguments[i]));\r\n return ar;\r\n}\r\n\r\nexport function __spreadArrays() {\r\n for (var s = 0, i = 0, il = arguments.length; i < il; i++) s += arguments[i].length;\r\n for (var r = Array(s), k = 0, i = 0; i < il; i++)\r\n for (var a = arguments[i], j = 0, jl = a.length; j < jl; j++, k++)\r\n r[k] = a[j];\r\n return r;\r\n};\r\n\r\nexport function __await(v) {\r\n return this instanceof __await ? (this.v = v, this) : new __await(v);\r\n}\r\n\r\nexport function __asyncGenerator(thisArg, _arguments, generator) {\r\n if (!Symbol.asyncIterator) throw new TypeError(\"Symbol.asyncIterator is not defined.\");\r\n var g = generator.apply(thisArg, _arguments || []), i, q = [];\r\n return i = {}, verb(\"next\"), verb(\"throw\"), verb(\"return\"), i[Symbol.asyncIterator] = function () { return this; }, i;\r\n function verb(n) { if (g[n]) i[n] = function (v) { return new Promise(function (a, b) { q.push([n, v, a, b]) > 1 || resume(n, v); }); }; }\r\n function resume(n, v) { try { step(g[n](v)); } catch (e) { settle(q[0][3], e); } }\r\n function step(r) { r.value instanceof __await ? Promise.resolve(r.value.v).then(fulfill, reject) : settle(q[0][2], r); }\r\n function fulfill(value) { resume(\"next\", value); }\r\n function reject(value) { resume(\"throw\", value); }\r\n function settle(f, v) { if (f(v), q.shift(), q.length) resume(q[0][0], q[0][1]); }\r\n}\r\n\r\nexport function __asyncDelegator(o) {\r\n var i, p;\r\n return i = {}, verb(\"next\"), verb(\"throw\", function (e) { throw e; }), verb(\"return\"), i[Symbol.iterator] = function () { return this; }, i;\r\n function verb(n, f) { i[n] = o[n] ? function (v) { return (p = !p) ? { value: __await(o[n](v)), done: n === \"return\" } : f ? f(v) : v; } : f; }\r\n}\r\n\r\nexport function __asyncValues(o) {\r\n if (!Symbol.asyncIterator) throw new TypeError(\"Symbol.asyncIterator is not defined.\");\r\n var m = o[Symbol.asyncIterator], i;\r\n return m ? m.call(o) : (o = typeof __values === \"function\" ? __values(o) : o[Symbol.iterator](), i = {}, verb(\"next\"), verb(\"throw\"), verb(\"return\"), i[Symbol.asyncIterator] = function () { return this; }, i);\r\n function verb(n) { i[n] = o[n] && function (v) { return new Promise(function (resolve, reject) { v = o[n](v), settle(resolve, reject, v.done, v.value); }); }; }\r\n function settle(resolve, reject, d, v) { Promise.resolve(v).then(function(v) { resolve({ value: v, done: d }); }, reject); }\r\n}\r\n\r\nexport function __makeTemplateObject(cooked, raw) {\r\n if (Object.defineProperty) { Object.defineProperty(cooked, \"raw\", { value: raw }); } else { cooked.raw = raw; }\r\n return cooked;\r\n};\r\n\r\nexport function __importStar(mod) {\r\n if (mod && mod.__esModule) return mod;\r\n var result = {};\r\n if (mod != null) for (var k in mod) if (Object.hasOwnProperty.call(mod, k)) result[k] = mod[k];\r\n result.default = mod;\r\n return result;\r\n}\r\n\r\nexport function __importDefault(mod) {\r\n return (mod && mod.__esModule) ? mod : { default: mod };\r\n}\r\n\r\nexport function __classPrivateFieldGet(receiver, privateMap) {\r\n if (!privateMap.has(receiver)) {\r\n throw new TypeError(\"attempted to get private field on non-instance\");\r\n }\r\n return privateMap.get(receiver);\r\n}\r\n\r\nexport function __classPrivateFieldSet(receiver, privateMap, value) {\r\n if (!privateMap.has(receiver)) {\r\n throw new TypeError(\"attempted to set private field on non-instance\");\r\n }\r\n privateMap.set(receiver, value);\r\n return value;\r\n}\r\n","import React, {\r\n createContext,\r\n useContext,\r\n useEffect,\r\n useReducer,\r\n useRef,\r\n} from 'react'\r\n\r\nimport {\r\n Action,\r\n Dispatch,\r\n Payload,\r\n RoughNotationGroupProps,\r\n State,\r\n} from './types'\r\n\r\nconst GroupContext = createContext(null)\r\nconst GroupDispatchContext = createContext(null)\r\n\r\nconst initialState: State = {\r\n annotations: [],\r\n}\r\n\r\nfunction reducer(state: State, { type, payload }: Action) {\r\n switch (type) {\r\n case 'ADD': {\r\n const annotations = [...state.annotations, payload]\r\n\r\n const annotationsToSort = annotations.reduce(\r\n (toSort, annotation) => {\r\n const newAnnotations: {\r\n withOrder: Payload[]\r\n withoutOrder: Payload[]\r\n } = {\r\n ...toSort,\r\n }\r\n\r\n if (typeof annotation.order === 'number') {\r\n newAnnotations.withOrder = [\r\n ...newAnnotations.withOrder,\r\n annotation,\r\n ].sort((a, b) => a.order! - b.order!)\r\n } else {\r\n newAnnotations.withoutOrder = [\r\n ...newAnnotations.withoutOrder,\r\n annotation,\r\n ]\r\n }\r\n\r\n return newAnnotations\r\n },\r\n {\r\n withOrder: [],\r\n withoutOrder: [],\r\n }\r\n )\r\n\r\n return {\r\n ...state,\r\n annotations: [\r\n ...annotationsToSort.withOrder,\r\n ...annotationsToSort.withoutOrder,\r\n ],\r\n }\r\n }\r\n default:\r\n return state\r\n }\r\n}\r\n\r\nconst RoughNotationGroup: React.FunctionComponent = ({\r\n children,\r\n show,\r\n}) => {\r\n const [state, dispatch] = useReducer(reducer, initialState)\r\n const timeouts = useRef([])\r\n\r\n useEffect(() => {\r\n let nextTimeout = 0\r\n\r\n state.annotations.forEach(({ annotation }) => {\r\n if (show) {\r\n const timeout = setTimeout(() => {\r\n annotation.show()\r\n }, nextTimeout)\r\n\r\n timeouts.current.push(timeout)\r\n\r\n nextTimeout += annotation.getAnnotation().animationDuration || 800\r\n } else {\r\n annotation.hide()\r\n\r\n timeouts.current.forEach((timeout) => {\r\n clearTimeout(timeout)\r\n\r\n timeouts.current = timeouts.current.filter(\r\n (currentTimeout) => currentTimeout !== timeout\r\n )\r\n })\r\n }\r\n })\r\n }, [show, state, timeouts])\r\n\r\n return (\r\n \r\n \r\n {children}\r\n \r\n \r\n )\r\n}\r\n\r\nexport const useGroupContext = (\r\n annotation: Payload['annotation'],\r\n order: Payload['order']\r\n): void => {\r\n const context = useContext(GroupContext)\r\n const dispatch = useContext(GroupDispatchContext)\r\n const initialProps = useRef({ annotation, context, dispatch, order })\r\n\r\n useEffect(() => {\r\n const {\r\n annotation: currentAnnotation,\r\n context: currentContext,\r\n dispatch: currentDispatch,\r\n order: currentOrder,\r\n } = initialProps.current\r\n\r\n if (!currentContext) {\r\n return\r\n }\r\n\r\n if (currentDispatch) {\r\n return currentDispatch({\r\n type: 'ADD',\r\n payload: { annotation: currentAnnotation, order: currentOrder },\r\n })\r\n }\r\n }, [])\r\n}\r\n\r\nexport default RoughNotationGroup\r\n","'use client'\r\nimport React, { useRef, useEffect, useCallback } from 'react'\r\n\r\nimport { annotate } from 'rough-notation'\r\n\r\nimport { useGroupContext } from '../RoughNotationGroup/RoughNotationGroup'\r\n\r\nimport { RoughNotationProps, Annotation } from './types'\r\n\r\nconst RoughNotation: React.FunctionComponent = ({\r\n animate = true,\r\n animationDelay = 0,\r\n animationDuration = 800,\r\n brackets,\r\n children,\r\n color,\r\n customElement = 'span',\r\n getAnnotationObject,\r\n iterations = 2,\r\n multiline = false,\r\n order,\r\n padding = 5,\r\n show = false,\r\n strokeWidth = 1,\r\n type = 'underline',\r\n ...rest\r\n}) => {\r\n const element = useRef(null)\r\n const annotation = useRef()\r\n const innerVars = useRef<{\r\n playing: boolean\r\n timeout: null | number\r\n }>({\r\n playing: false,\r\n timeout: null,\r\n })\r\n const initialOptions = useRef({\r\n animate,\r\n animationDuration,\r\n brackets,\r\n color,\r\n getAnnotationObject,\r\n iterations,\r\n multiline,\r\n padding,\r\n strokeWidth,\r\n type,\r\n })\r\n\r\n const showAnnotation = useCallback(() => {\r\n if (!innerVars.current.timeout) {\r\n innerVars.current.timeout = window.setTimeout(() => {\r\n innerVars.current.playing = true\r\n\r\n annotation.current?.show?.()\r\n\r\n window.setTimeout(() => {\r\n innerVars.current.playing = false\r\n innerVars.current.timeout = null\r\n }, animationDuration)\r\n }, animationDelay)\r\n }\r\n }, [animationDelay, animationDuration])\r\n\r\n const hideAnnotation = useCallback(() => {\r\n annotation.current?.hide?.()\r\n innerVars.current.playing = false\r\n\r\n if (innerVars.current.timeout) {\r\n clearTimeout(innerVars.current.timeout)\r\n innerVars.current.timeout = null\r\n }\r\n }, [])\r\n\r\n const getAnnotation = useCallback(() => {\r\n return annotation.current!\r\n }, [annotation])\r\n\r\n useGroupContext(\r\n {\r\n getAnnotation,\r\n show: showAnnotation,\r\n hide: hideAnnotation,\r\n },\r\n typeof order === 'string' ? parseInt(order) : order\r\n )\r\n\r\n useEffect(() => {\r\n const options = initialOptions.current\r\n const { getAnnotationObject: getAnnotationObjectFromOptions } = options\r\n\r\n annotation.current = annotate(element.current!, options)\r\n\r\n if (getAnnotationObjectFromOptions) {\r\n getAnnotationObjectFromOptions(annotation.current)\r\n }\r\n\r\n return () => {\r\n annotation.current?.remove?.()\r\n }\r\n }, [])\r\n\r\n useEffect(() => {\r\n if (show) {\r\n showAnnotation()\r\n } else {\r\n hideAnnotation()\r\n }\r\n }, [\r\n annotation,\r\n show,\r\n animationDelay,\r\n innerVars,\r\n animationDuration,\r\n showAnnotation,\r\n hideAnnotation,\r\n ])\r\n\r\n useEffect(() => {\r\n if (annotation.current) {\r\n annotation.current.animate = animate\r\n annotation.current.animationDuration = animationDuration\r\n annotation.current.color = color\r\n annotation.current.strokeWidth = strokeWidth\r\n annotation.current.padding = padding\r\n }\r\n }, [annotation, animate, animationDuration, color, strokeWidth, padding])\r\n\r\n return React.createElement(\r\n customElement,\r\n {\r\n ref: element,\r\n ...rest,\r\n },\r\n children\r\n )\r\n}\r\n\r\nexport default RoughNotation\r\n"],"names":[],"mappings":"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"} -------------------------------------------------------------------------------- /dist/main.js.map: -------------------------------------------------------------------------------- 1 | {"version":3,"file":"main.js","sources":["../node_modules/tslib/tslib.es6.js","../src/RoughNotationGroup/RoughNotationGroup.tsx","../src/RoughNotation/RoughNotation.tsx"],"sourcesContent":["/*! *****************************************************************************\r\nCopyright (c) Microsoft Corporation.\r\n\r\nPermission to use, copy, modify, and/or distribute this software for any\r\npurpose with or without fee is hereby granted.\r\n\r\nTHE SOFTWARE IS PROVIDED \"AS IS\" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH\r\nREGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY\r\nAND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,\r\nINDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM\r\nLOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR\r\nOTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR\r\nPERFORMANCE OF THIS SOFTWARE.\r\n***************************************************************************** */\r\n/* global Reflect, Promise */\r\n\r\nvar extendStatics = function(d, b) {\r\n extendStatics = Object.setPrototypeOf ||\r\n ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||\r\n function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };\r\n return extendStatics(d, b);\r\n};\r\n\r\nexport function __extends(d, b) {\r\n extendStatics(d, b);\r\n function __() { this.constructor = d; }\r\n d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());\r\n}\r\n\r\nexport var __assign = function() {\r\n __assign = Object.assign || function __assign(t) {\r\n for (var s, i = 1, n = arguments.length; i < n; i++) {\r\n s = arguments[i];\r\n for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];\r\n }\r\n return t;\r\n }\r\n return __assign.apply(this, arguments);\r\n}\r\n\r\nexport function __rest(s, e) {\r\n var t = {};\r\n for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)\r\n t[p] = s[p];\r\n if (s != null && typeof Object.getOwnPropertySymbols === \"function\")\r\n for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {\r\n if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))\r\n t[p[i]] = s[p[i]];\r\n }\r\n return t;\r\n}\r\n\r\nexport function __decorate(decorators, target, key, desc) {\r\n var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;\r\n if (typeof Reflect === \"object\" && typeof Reflect.decorate === \"function\") r = Reflect.decorate(decorators, target, key, desc);\r\n else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;\r\n return c > 3 && r && Object.defineProperty(target, key, r), r;\r\n}\r\n\r\nexport function __param(paramIndex, decorator) {\r\n return function (target, key) { decorator(target, key, paramIndex); }\r\n}\r\n\r\nexport function __metadata(metadataKey, metadataValue) {\r\n if (typeof Reflect === \"object\" && typeof Reflect.metadata === \"function\") return Reflect.metadata(metadataKey, metadataValue);\r\n}\r\n\r\nexport function __awaiter(thisArg, _arguments, P, generator) {\r\n function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }\r\n return new (P || (P = Promise))(function (resolve, reject) {\r\n function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }\r\n function rejected(value) { try { step(generator[\"throw\"](value)); } catch (e) { reject(e); } }\r\n function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }\r\n step((generator = generator.apply(thisArg, _arguments || [])).next());\r\n });\r\n}\r\n\r\nexport function __generator(thisArg, body) {\r\n var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g;\r\n return g = { next: verb(0), \"throw\": verb(1), \"return\": verb(2) }, typeof Symbol === \"function\" && (g[Symbol.iterator] = function() { return this; }), g;\r\n function verb(n) { return function (v) { return step([n, v]); }; }\r\n function step(op) {\r\n if (f) throw new TypeError(\"Generator is already executing.\");\r\n while (_) try {\r\n if (f = 1, y && (t = op[0] & 2 ? y[\"return\"] : op[0] ? y[\"throw\"] || ((t = y[\"return\"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;\r\n if (y = 0, t) op = [op[0] & 2, t.value];\r\n switch (op[0]) {\r\n case 0: case 1: t = op; break;\r\n case 4: _.label++; return { value: op[1], done: false };\r\n case 5: _.label++; y = op[1]; op = [0]; continue;\r\n case 7: op = _.ops.pop(); _.trys.pop(); continue;\r\n default:\r\n if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }\r\n if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }\r\n if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }\r\n if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }\r\n if (t[2]) _.ops.pop();\r\n _.trys.pop(); continue;\r\n }\r\n op = body.call(thisArg, _);\r\n } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }\r\n if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };\r\n }\r\n}\r\n\r\nexport function __exportStar(m, exports) {\r\n for (var p in m) if (!exports.hasOwnProperty(p)) exports[p] = m[p];\r\n}\r\n\r\nexport function __values(o) {\r\n var s = typeof Symbol === \"function\" && Symbol.iterator, m = s && o[s], i = 0;\r\n if (m) return m.call(o);\r\n if (o && typeof o.length === \"number\") return {\r\n next: function () {\r\n if (o && i >= o.length) o = void 0;\r\n return { value: o && o[i++], done: !o };\r\n }\r\n };\r\n throw new TypeError(s ? \"Object is not iterable.\" : \"Symbol.iterator is not defined.\");\r\n}\r\n\r\nexport function __read(o, n) {\r\n var m = typeof Symbol === \"function\" && o[Symbol.iterator];\r\n if (!m) return o;\r\n var i = m.call(o), r, ar = [], e;\r\n try {\r\n while ((n === void 0 || n-- > 0) && !(r = i.next()).done) ar.push(r.value);\r\n }\r\n catch (error) { e = { error: error }; }\r\n finally {\r\n try {\r\n if (r && !r.done && (m = i[\"return\"])) m.call(i);\r\n }\r\n finally { if (e) throw e.error; }\r\n }\r\n return ar;\r\n}\r\n\r\nexport function __spread() {\r\n for (var ar = [], i = 0; i < arguments.length; i++)\r\n ar = ar.concat(__read(arguments[i]));\r\n return ar;\r\n}\r\n\r\nexport function __spreadArrays() {\r\n for (var s = 0, i = 0, il = arguments.length; i < il; i++) s += arguments[i].length;\r\n for (var r = Array(s), k = 0, i = 0; i < il; i++)\r\n for (var a = arguments[i], j = 0, jl = a.length; j < jl; j++, k++)\r\n r[k] = a[j];\r\n return r;\r\n};\r\n\r\nexport function __await(v) {\r\n return this instanceof __await ? (this.v = v, this) : new __await(v);\r\n}\r\n\r\nexport function __asyncGenerator(thisArg, _arguments, generator) {\r\n if (!Symbol.asyncIterator) throw new TypeError(\"Symbol.asyncIterator is not defined.\");\r\n var g = generator.apply(thisArg, _arguments || []), i, q = [];\r\n return i = {}, verb(\"next\"), verb(\"throw\"), verb(\"return\"), i[Symbol.asyncIterator] = function () { return this; }, i;\r\n function verb(n) { if (g[n]) i[n] = function (v) { return new Promise(function (a, b) { q.push([n, v, a, b]) > 1 || resume(n, v); }); }; }\r\n function resume(n, v) { try { step(g[n](v)); } catch (e) { settle(q[0][3], e); } }\r\n function step(r) { r.value instanceof __await ? Promise.resolve(r.value.v).then(fulfill, reject) : settle(q[0][2], r); }\r\n function fulfill(value) { resume(\"next\", value); }\r\n function reject(value) { resume(\"throw\", value); }\r\n function settle(f, v) { if (f(v), q.shift(), q.length) resume(q[0][0], q[0][1]); }\r\n}\r\n\r\nexport function __asyncDelegator(o) {\r\n var i, p;\r\n return i = {}, verb(\"next\"), verb(\"throw\", function (e) { throw e; }), verb(\"return\"), i[Symbol.iterator] = function () { return this; }, i;\r\n function verb(n, f) { i[n] = o[n] ? function (v) { return (p = !p) ? { value: __await(o[n](v)), done: n === \"return\" } : f ? f(v) : v; } : f; }\r\n}\r\n\r\nexport function __asyncValues(o) {\r\n if (!Symbol.asyncIterator) throw new TypeError(\"Symbol.asyncIterator is not defined.\");\r\n var m = o[Symbol.asyncIterator], i;\r\n return m ? m.call(o) : (o = typeof __values === \"function\" ? __values(o) : o[Symbol.iterator](), i = {}, verb(\"next\"), verb(\"throw\"), verb(\"return\"), i[Symbol.asyncIterator] = function () { return this; }, i);\r\n function verb(n) { i[n] = o[n] && function (v) { return new Promise(function (resolve, reject) { v = o[n](v), settle(resolve, reject, v.done, v.value); }); }; }\r\n function settle(resolve, reject, d, v) { Promise.resolve(v).then(function(v) { resolve({ value: v, done: d }); }, reject); }\r\n}\r\n\r\nexport function __makeTemplateObject(cooked, raw) {\r\n if (Object.defineProperty) { Object.defineProperty(cooked, \"raw\", { value: raw }); } else { cooked.raw = raw; }\r\n return cooked;\r\n};\r\n\r\nexport function __importStar(mod) {\r\n if (mod && mod.__esModule) return mod;\r\n var result = {};\r\n if (mod != null) for (var k in mod) if (Object.hasOwnProperty.call(mod, k)) result[k] = mod[k];\r\n result.default = mod;\r\n return result;\r\n}\r\n\r\nexport function __importDefault(mod) {\r\n return (mod && mod.__esModule) ? mod : { default: mod };\r\n}\r\n\r\nexport function __classPrivateFieldGet(receiver, privateMap) {\r\n if (!privateMap.has(receiver)) {\r\n throw new TypeError(\"attempted to get private field on non-instance\");\r\n }\r\n return privateMap.get(receiver);\r\n}\r\n\r\nexport function __classPrivateFieldSet(receiver, privateMap, value) {\r\n if (!privateMap.has(receiver)) {\r\n throw new TypeError(\"attempted to set private field on non-instance\");\r\n }\r\n privateMap.set(receiver, value);\r\n return value;\r\n}\r\n","import React, {\r\n createContext,\r\n useContext,\r\n useEffect,\r\n useReducer,\r\n useRef,\r\n} from 'react'\r\n\r\nimport {\r\n Action,\r\n Dispatch,\r\n Payload,\r\n RoughNotationGroupProps,\r\n State,\r\n} from './types'\r\n\r\nconst GroupContext = createContext(null)\r\nconst GroupDispatchContext = createContext(null)\r\n\r\nconst initialState: State = {\r\n annotations: [],\r\n}\r\n\r\nfunction reducer(state: State, { type, payload }: Action) {\r\n switch (type) {\r\n case 'ADD': {\r\n const annotations = [...state.annotations, payload]\r\n\r\n const annotationsToSort = annotations.reduce(\r\n (toSort, annotation) => {\r\n const newAnnotations: {\r\n withOrder: Payload[]\r\n withoutOrder: Payload[]\r\n } = {\r\n ...toSort,\r\n }\r\n\r\n if (typeof annotation.order === 'number') {\r\n newAnnotations.withOrder = [\r\n ...newAnnotations.withOrder,\r\n annotation,\r\n ].sort((a, b) => a.order! - b.order!)\r\n } else {\r\n newAnnotations.withoutOrder = [\r\n ...newAnnotations.withoutOrder,\r\n annotation,\r\n ]\r\n }\r\n\r\n return newAnnotations\r\n },\r\n {\r\n withOrder: [],\r\n withoutOrder: [],\r\n }\r\n )\r\n\r\n return {\r\n ...state,\r\n annotations: [\r\n ...annotationsToSort.withOrder,\r\n ...annotationsToSort.withoutOrder,\r\n ],\r\n }\r\n }\r\n default:\r\n return state\r\n }\r\n}\r\n\r\nconst RoughNotationGroup: React.FunctionComponent = ({\r\n children,\r\n show,\r\n}) => {\r\n const [state, dispatch] = useReducer(reducer, initialState)\r\n const timeouts = useRef([])\r\n\r\n useEffect(() => {\r\n let nextTimeout = 0\r\n\r\n state.annotations.forEach(({ annotation }) => {\r\n if (show) {\r\n const timeout = setTimeout(() => {\r\n annotation.show()\r\n }, nextTimeout)\r\n\r\n timeouts.current.push(timeout)\r\n\r\n nextTimeout += annotation.getAnnotation().animationDuration || 800\r\n } else {\r\n annotation.hide()\r\n\r\n timeouts.current.forEach((timeout) => {\r\n clearTimeout(timeout)\r\n\r\n timeouts.current = timeouts.current.filter(\r\n (currentTimeout) => currentTimeout !== timeout\r\n )\r\n })\r\n }\r\n })\r\n }, [show, state, timeouts])\r\n\r\n return (\r\n \r\n \r\n {children}\r\n \r\n \r\n )\r\n}\r\n\r\nexport const useGroupContext = (\r\n annotation: Payload['annotation'],\r\n order: Payload['order']\r\n): void => {\r\n const context = useContext(GroupContext)\r\n const dispatch = useContext(GroupDispatchContext)\r\n const initialProps = useRef({ annotation, context, dispatch, order })\r\n\r\n useEffect(() => {\r\n const {\r\n annotation: currentAnnotation,\r\n context: currentContext,\r\n dispatch: currentDispatch,\r\n order: currentOrder,\r\n } = initialProps.current\r\n\r\n if (!currentContext) {\r\n return\r\n }\r\n\r\n if (currentDispatch) {\r\n return currentDispatch({\r\n type: 'ADD',\r\n payload: { annotation: currentAnnotation, order: currentOrder },\r\n })\r\n }\r\n }, [])\r\n}\r\n\r\nexport default RoughNotationGroup\r\n","'use client'\r\nimport React, { useRef, useEffect, useCallback } from 'react'\r\n\r\nimport { annotate } from 'rough-notation'\r\n\r\nimport { useGroupContext } from '../RoughNotationGroup/RoughNotationGroup'\r\n\r\nimport { RoughNotationProps, Annotation } from './types'\r\n\r\nconst RoughNotation: React.FunctionComponent = ({\r\n animate = true,\r\n animationDelay = 0,\r\n animationDuration = 800,\r\n brackets,\r\n children,\r\n color,\r\n customElement = 'span',\r\n getAnnotationObject,\r\n iterations = 2,\r\n multiline = false,\r\n order,\r\n padding = 5,\r\n show = false,\r\n strokeWidth = 1,\r\n type = 'underline',\r\n ...rest\r\n}) => {\r\n const element = useRef(null)\r\n const annotation = useRef()\r\n const innerVars = useRef<{\r\n playing: boolean\r\n timeout: null | number\r\n }>({\r\n playing: false,\r\n timeout: null,\r\n })\r\n const initialOptions = useRef({\r\n animate,\r\n animationDuration,\r\n brackets,\r\n color,\r\n getAnnotationObject,\r\n iterations,\r\n multiline,\r\n padding,\r\n strokeWidth,\r\n type,\r\n })\r\n\r\n const showAnnotation = useCallback(() => {\r\n if (!innerVars.current.timeout) {\r\n innerVars.current.timeout = window.setTimeout(() => {\r\n innerVars.current.playing = true\r\n\r\n annotation.current?.show?.()\r\n\r\n window.setTimeout(() => {\r\n innerVars.current.playing = false\r\n innerVars.current.timeout = null\r\n }, animationDuration)\r\n }, animationDelay)\r\n }\r\n }, [animationDelay, animationDuration])\r\n\r\n const hideAnnotation = useCallback(() => {\r\n annotation.current?.hide?.()\r\n innerVars.current.playing = false\r\n\r\n if (innerVars.current.timeout) {\r\n clearTimeout(innerVars.current.timeout)\r\n innerVars.current.timeout = null\r\n }\r\n }, [])\r\n\r\n const getAnnotation = useCallback(() => {\r\n return annotation.current!\r\n }, [annotation])\r\n\r\n useGroupContext(\r\n {\r\n getAnnotation,\r\n show: showAnnotation,\r\n hide: hideAnnotation,\r\n },\r\n typeof order === 'string' ? parseInt(order) : order\r\n )\r\n\r\n useEffect(() => {\r\n const options = initialOptions.current\r\n const { getAnnotationObject: getAnnotationObjectFromOptions } = options\r\n\r\n annotation.current = annotate(element.current!, options)\r\n\r\n if (getAnnotationObjectFromOptions) {\r\n getAnnotationObjectFromOptions(annotation.current)\r\n }\r\n\r\n return () => {\r\n annotation.current?.remove?.()\r\n }\r\n }, [])\r\n\r\n useEffect(() => {\r\n if (show) {\r\n showAnnotation()\r\n } else {\r\n hideAnnotation()\r\n }\r\n }, [\r\n annotation,\r\n show,\r\n animationDelay,\r\n innerVars,\r\n animationDuration,\r\n showAnnotation,\r\n hideAnnotation,\r\n ])\r\n\r\n useEffect(() => {\r\n if (annotation.current) {\r\n annotation.current.animate = animate\r\n annotation.current.animationDuration = animationDuration\r\n annotation.current.color = color\r\n annotation.current.strokeWidth = strokeWidth\r\n annotation.current.padding = padding\r\n }\r\n }, [annotation, animate, animationDuration, color, strokeWidth, padding])\r\n\r\n return React.createElement(\r\n customElement,\r\n {\r\n ref: element,\r\n ...rest,\r\n },\r\n children\r\n )\r\n}\r\n\r\nexport default RoughNotation\r\n"],"names":["createContext","useReducer","useRef","useEffect","React","useContext","useCallback","annotate"],"mappings":"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"} --------------------------------------------------------------------------------