rough-stuff / rough-notation Goto Github PK

It would be extremely helpful to add some sort of a classname to the generated <svg> element (optionally, could be configurable).

The usecase I have is Bootstrap's input groups have z-index applied and so they show up on top of the drawn annotation. Applying an even higher z-index to svg works, but in this case also affects <svg> icons inside the button and also breaks highlight annotation type.

A class on the annotated <svg> would let users easily apply any CSS properties they might require.

Just used this in a project, and it's incredibly well done! Thanks for all the work on it... it's beautiful, simple, and worked amazingly well. Thank you!

Hey, unfortunately library don't work localy...
https://codepen.io/chriscoyier/pen/JjGEpXK

Can you add more detailed instruction how to use it without npm, please?

The issue is currently visible live here, but in case I change the live page, this is a video report from my visitor:

I experience the same thing and get reports from other users on different browsers and OSes (Firefox, Chrome, macOS, Windows, with fonts, with web fonts disabled…), so I don't think it's specific to a certain browser. My code:

<script defer src="bundle.js"></script>
...
<header class="masthead">
  <div class="masthead-container">
    <div class="masthead-content">
      <h1>Tvoje programovací parta</h1>
      <div class="lead">
        <p>
          Začátečníci, kteří to myslí vážně. Profesionálové s chutí pomáhat.
          V klubu svoje programování nebo hledání práce posuneš o <strong>1 % každý den</strong>.
        </p>
      </div>
      <div class="masthead-numbers">...</div>
      <a class="masthead-button primary" href="#cenik">Přidej se</a>
      <span class="masthead-members">...</span>
    </div>
    <img class="masthead-illustration" src="../static/images/illustration-club.svg">
  </div>
</header>

import { annotate } from 'rough-notation';

document.addEventListener('DOMContentLoaded', function () {
  Array.from(document.querySelectorAll('.masthead .lead strong'))
    .forEach(function (element) {
      const annotation = annotate(element, {
        type: 'underline',
        color: '#1755d1',
        animationDuration: 1600,
      });
      annotation.show();
    })
});

The underline seems to find wrong position, often alongside the top of the element instead of its bottom. The issue is intermittent. Sometimes it loads correctly. Reload of the page sometimes help. Sometimes it does not. Often the location adjusts on scroll or window resize, but sometimes it does not.

I thought it could be something with defer and DOMContentLoaded, but playing around with those has no effect. Any clues why this could be happening? Easy solution would be not to use Rough Notation, but I like it a lot, I use my own stupid cartoons as illustrations, so it matches the visual style of the page.

Hi, I found your library and I think it's really cool! I'm trying to add it to a React project and I keep getting an error that Object(...) is not a function when calling the annotate function.
I reproduced the behavior in a code sandbox.
https://codesandbox.io/s/tender-river-k6d32?fontsize=14&hidenavigation=1&theme=dark

Idk what I'm doing wrong.

Thank you so much!

An asterisks to annotate and some text to go with it.

I'd love to be able to add callbacks after individual group animations, like:

[...]
const a2 = annotate(elems[1], {callback: ()=>{}, type: 'highlight', color: this.$vuetify.theme.themes.light.primary })
[...]
const ag = annotationGroup([a1, a2, a3])
ag.show()

My use case, in this example, is I want to have a dark highlight, but after highlighting set the element text color to white, so that it doesn't get washed out.

Amazing work on this library!

I'm trying to add annotations to elements that end up shifting in their container after they have been annotated. The result is the annotation stays put, but the element has moved, so the element and its annotation no longer match up.

My solution is to call .show() again to repaint, but the annotations all animate again.

Is it possible to call .show() a second time, but without animation?

Or is there a better approach overall to solving for this problem of elements moving over in their container after the annotation has already been painted?

Thanks again!

I have my own component with ought-notation in it. Look at the image below for the component.

This component works on my hero page look at the code below.

But when i try to runought-notation on a different page or component of my site it does not work look at the code below.

I have tried different variants as shown in the documentation with variant parameters with no result.
Any help would be highly appreciated!

Relevant info, Package.json

{
"name": "v5",
"version": "0.1.0",
"private": true,
"scripts": {
"dev": "next dev",
"build": "next build",
"start": "next start -p ${PORT:=3000}",
"lint": "next lint"
},
"dependencies": {
"axios": "^0.21.1",
"next": "^12.1.3",
"next-i18next": "^10.5.0",
"next-themes": "0.0.15",
"react": "17.x",
"react-dom": "17.x",
"react-rough-notation": "^1.0.1"
},
"devDependencies": {
"autoprefixer": "^10.3.1",
"eslint": "8.12.0",
"eslint-config-next": "12.1.4",
"postcss": "^8.3.6",
"tailwindcss": "^2.2.7"
}
}

Hi there. Got really excited about rough-notation for documentation purposes. Having ways other than using typographic or box elements to emphasise certain key pieces of information in technical documentation is quite useful.

I suspect that this feature feature request may be not entirely trivial, but being able to have highlights and underlines spanning an unknown number of lines would be really useful for documentation purposes, especially when paired with something like MDX

Don't know if this would be considered a bug or documentation improvement. I added a bunch of annotation to <td> elements, and that caused <svg> elements to be inserted alongside those <td>s which blew up my tables and I think is also an invalid markup.

In some table setups it might be hard to figure out where the td shift is coming from.

Hi guys,
thanks for this project, is very cool!

I'm using some of the annotations in hover on elements, it would be really cool to make animations possible in reverse (on hide).

Bye!

Congrats on publishing the library!

I'd just like to suggest an edit to the site/README.

Rough Notation is about 3.2kb in size when gzipped

This feels kinda "marketing-ish" to me, when there's a 27k (min'd) dependency coming with it.

(Not a bug but something that people will run into and that could be documented in the README. I am happy to provide a PR and examples.)

When loading web fonts, setting font-display: swap is a good idea to avoid text being illegible until fonts are loaded. Google Fonts has made it a default recently for that reason. When set, the fallback font will be displayed until fonts are loaded, so font-family: 'Fancy Web Font', sans-serif; would show sans-serif until Fancy Web Font has been downloaded.
This can take some time and the document's load event might fire in-between.

It is common practice to put JS initialization logic into a document.ready callback or similar. When triggering rough-notation on document.ready, it might take into account the dimensions of the fallback font which usually are a bit off from the dimensions of the web font and that results in the notation having wrong dimensions.

There is a simple workaround: Waiting for the web font to load/cancel and call annotate right after that. This can be achieved via the CSS Font Loading API. This simple snippet did the trick for me:

document.fonts.ready.then(function () {
  // call `annotate()` here
})

Thank you for creating this library, it's awesome 🙂

Web Annotations

• https://www.w3.org/TR/annotation-model/
• https://web.hypothes.is/blog/annotation-is-now-a-web-standard/
• https://github.com/hypothesis
• https://github.com/linkeddata/dokieli#specifications

Archiving: WARC, Memento,

• Zotero Snapshots on WebDAV: https://www.zotero.org/support/kb/links_vs_snapshots
• https://www.google.com/search?q=archivebox+site%3Agithub.com+inurl%3Aawesome
• https://github.com/iipc/awesome-web-archiving#replay

Is there a way to change the annotation properties after annotate?

I didn't find the way to do it and checking at the code doesn't look like is there one but maybe I'm wrong

Use case:

• Annotate content (annotation.show())
• Change the color line after render for contrast, like when you change between dark-theme and light-theme

Right now I have to re-annotate, losing the svg a drawing a new one

I noticed that animationDelay has been taken away fron config object. Any particular reason for that ? README might need an updated in that case.

If I just add this code, it gives the error "Cannot use import statement outside a module"
What am I doing wrong?
See the code here: https://jsfiddle.net/4gvwatLn/

<script type="module" src="https://unpkg.com/rough-notation?module"></script>

<script>
import { annotate } from 'rough-notation';
// Or using unpkg
// import { annotate } from 'https://unpkg.com/rough-notation?module';

const e = document.querySelector('#myElement');
const annotation = annotate(e, { type: 'underline' });
annotation.show();
</script>

Ability to annotate a block like the parenthesis around paragraphs in:

Hello! Love this library - we use it on the home page of Exercism and I'm currently adding it to Kaido too 🙂

I'd like to make the lines slightly less rough, and was wondering if you'd be interested in a PR that allows consumers to vary the roughness option via the options hash? ie make this configurable:

Thanks! :)

I'm using RemarkJS to create my slides, and I would love to use Rough notation to highlight parts of my talk!

When I tried to integrate it, I noticed the positioning was wrong and tried to understand why: remark use a "scaler" container to always have the slides centered with the same aspect ratio, and it uses transform: scale() to achieve that.

When the scale value is different than 1, the Rough notation positioning is shifted.

I would love to know if you are aware of any workaround!

Thanks

Hello developer!

The animations in this library are really cool, I really like it. Currently, I have built my own blog using vitepress, but you know, the article format is all in markdown, so it's difficult to utilize this library to add effects to the articles.

I hope in the future, this library can be supported as a plugin for vitepress or Astro.

Thank you very much for your development!

First of all: Thank you for this amazing library!

I am new to javascript and got it running with the help of some friends.
However I do have some questions and hope you can help me out:

1. How can I use the same selector multiple times?
   I created a selector .ul-pink and want to use it multiple times within the same page: https://codepen.io/philippstakenborg/pen/gOGNdWj
   Problem: It only shows the first selector, not the second. Can I change that?

2. What to do when a defined selector is not used in HTML?
   When all my selectors (.ul-pink / .ul-green / .ul-yellow) are used, it works.
   https://codepen.io/philippstakenborg/pen/VwMJBpv

Problem: When I delete one selector in HTML (.ul-yellow), nothing works.
https://codepen.io/philippstakenborg/pen/BawgPRd

Sorry for my bad formulations, I am new to this and hope you guys can help me out.

Greetings,
Philipp

Hey thanks so much for making this, looks fantastic. I'm having a little trouble getting started because I'm a JS novice. I'd really appreciate anything that makes this documentation more approachable for folks like me.

For example, after getting the library into my site, I'm not sure where I should be including JavaScript for each instance. Or the best way to include multiple instances on a page. The documentation isn't specific and the examples are hard to follow by viewing source. Any advice you can offer would be great.

I have developed an angular wrapper ngx-rough-notation and I think it would be helpful for other angular developers if it's link is added to README wrappers section.

Hey thanks again for making this!

I'm a JS novice and am wondering how to delay an annotate or annotationGroup group from running for 500ms or 1s or something. Is this an option in ag.show();? Or should we be using setTimeout() or something similar?

Any suggestions would be a big help. Thanks!

When highlighting in RTL languages like Hebrew, it looks quirky when the highlighting starts from left to right.

I've created a simple PR that implements this support of reversing the direction of highlighting:
#56

See https://twitter.com/KrComet/status/1265683331041001474?s=20

Would it to be possible to use this library to create an endpoint similar to the attached screenshot? What I'm calling the "Sun Lines" effect around an element. I'm willing to do the work if necessary but don't know where I would start.

Right now many of the annotations use two passes (i.e. underlines things twice). I suggest removing this default and instead add a reverse option. That way people can completely control how many passes they want and maybe a delay between them:

const a1 = annotate(document.querySelector('#e1'), { type: 'underline' });
const a2 = annotate(document.querySelector('#e1'), { type: 'underline', reverse: true });

const ag = annotationGroup([a1, /*way_to_add_delay?*/, a2]);
ag.show();

Hi there,

Trying multiline annotations, when the target element is a <span> everything works as expected, but when I apply it to a <p> element the full block is highlighted, multiline highlight isn't shown, is this the intended behavior? only inline elements can be multiline highlighted? I think it would be nice to annotate in multiline all text inside a <p>, so this is a feature request :)

Thank for the cool piece of software, it's nice rough-stuff.

When you get a Dependabot PR to upgrade rough-notation all you get is a link to this: https://github.com/rough-stuff/rough-notation/commits

Most of the commit messages are, a bit hard to decipher :)

Great thanks for this awesome library! 🎉

In my project, I want to add a notation on multiple elements. However, it would generate multiple notations. An example below

My HTML:

<p>
  I would like to add
  <span class="bright">a notation</span><span class="emphasis"> here</span>.
</p>

And I want to add only one notation on the last two span elements. How can I make this?

I've been working on getting around issue #36 by adding unique IDs for each span of highlights I want to paint:

<script type="module">
      import { annotate } from 'https://unpkg.com/rough-notation?module';
      const $ = (t) => document.querySelector(t);
      const config = { type: 'highlight', color: 'lightblue', iterations: 3, multiline: true };
      const a1 = annotate($('#hl'), config );
      if (document.querySelector("#hl2") != null) {
        const a2 = annotate($('#hl2'), config );
        a2.show();
      }
      if (document.querySelector("#hl3") != null) {
        const a3 = annotate($('#hl3'), config );
        a3.show();
      }
      if (document.querySelector("#hl4") != null) {
        const a4 = annotate($('#hl4'), config );
        a4.show();
      }
      if (document.querySelector("#hl5") != null) {
        const a5 = annotate($('#hl5'), config );
        a5.show();
      }
      a1.show();

and then simply surrounding the highlighted paragraphs with
<span id="hl">This is interesting stuff!</span> But now comes a boring bit with no content worth noting. <span id="hl2">A great insight has arrived.</span>

It works with Firefox but once I tested Edge and Chrome, I noted that the animation never triggers but the "paint" becomes visible if I resize the window/canvas. Any suggestions on how to make this work across the different browsers?

I am using Rough Notation and love it, thanks so much :)

I just have one more little problem: The Z-Index of my Annotation seems to be wrong.
-> In lots of cases, the "underline" annotation blocks parts of my headline.

Padding does not do the trick, since I need padding:0 in lots of cases.
The Z-index of my headline is also no solution.

Does anyone Know how to change the z-index of the Annotation Underline?

Preet, this library is money. Thanks for it. Using and quite happy.

Question: How would I go about triggering the notation when element is within viewport?

Thanks ahead of time for your work on this tool; from a UX perspective, it speaks volumes for calling attention without breaking focus with the "F-Pattern" of scannability 👌

I'm using rough notation for the first time, and I'm trying to add the highlight animation to my title. It works, but I have an issue.

Imagine my background is white, and my text is black. Now I want to highlight in black, but that will hide the text because it's black as well. Is it possible to add another argument for the text color so it can be set to white after/while animating?

e.g.:

const annotation = annotate(element, {
      type: 'highlight',
      color: '#000',
      text: '#fff',
});

1. Is there a way to set the opacity on an Annotation?
   Like this opacity: '75'

const heroTitleColor = annotate(heroTitle, { type: 'highlight', color: 'yellow', opacity: '75' });

2. Also is there a way to use custom tailwind colors or padding?
   Like this:

const heroTitleColor = annotate(heroTitle, { type: 'highlight', padding: ['py-4', 'px-6'], color: 'custom-yellow-500'});

Given that the AnnotationState is

type AnnotationState = 'unattached' | 'not-showing' | 'showing';

and when we call the private attach() method, we first check if the state is 'unattached'

private attach() {
  if (this._state === 'unattached' && this._e.parentElement) {
    // ...
  }
}

I think the this.attach() statement in the 'not-showing' case is redundant.

show(): void {
  switch (this._state) {
    case 'unattached':
      // ...
    case 'showing':
      // ...
    case 'not-showing':
      this.attach();
      if (this._svg) {
        this.render(this._svg, false);
      }
      break;
  }
}

Not sure if I'm missing anything : )

Great library for starters but is there a way to delay the annotation until you've scrolled to a section on the page? I'm using the code below ATM. Thanks

`const annotate = RoughNotation.annotate;
const annotationGroup = RoughNotation.annotationGroup;

const g1 = annotate(document.querySelector('.highlight'), {
type: 'highlight',
color: '#FAE633',
multiline: true,
animationDuration: 1500,
animationDelay: 3000,
iterations: 1
});

const ag = annotationGroup([g1]);
ag.show();
`

Hey, thanks for opensourcing this library. I haven't even tried it yet but I know it will come in handy.

Most of my use cases would use the annotate animation in sync with other (js controlled) animations. For example, using it together with something like Code Surfer.

Is it possible to add a progress parameter somewhere?

For example, annotation.show(0.5) shows the animation at 50%.

I think it would be great if padding could be more fine-grained to allow more complete control over the visuals. For example, right now if you have a box annotation on two lines of text, the boxes may awkwardly overlap. This could be resolved by using negative top/bottom padding to give them some breathing room.

For example, with 0 padding on all annotations:

With -3 padding on the box, the top border looks (imo) nicer:

But obviously, since padding is currently applied uniformly and thus the other sides of the box also get -3 padding, it's not really usable.

Some quick thoughts on a possible implementation that wouldn't change the API too much:

padding in RoughAnnotationConfig has type number (love that this is Typescript, by the way!), it could be changed to be typed number | [number, number] | [number, number, number, number].

Then renderAnnotation would have a bit of extra logic to check which variant of the padding definition it is and use it accordingly.

So [number, number] would apply to X and Y respectively, [number, number, number, number] would apply to top/right/down/left like in CSS. For things like box where the actual rendering draws a full rectangle, it would just be a tiny bit of extra math to get the padding right.

Hi, thanks for this great library. I've been searching for hand drawn arrow for many years and this looks a great potential to do it.

Will be useful for libraries such as tourjs or introjs.

Thanks!

I tried to give a higher z-index to the side navbar but id doesn't work