Using LeaderLine.js in RevealJS

[Walser52]

Bug description

I'm trying to add arrows from LeaderLine.js to my reveal presentation and am having some trouble.

Two problems are present.

1. Upon preview, the arrow is initially at the top of the screen both in VS Code as well as Firefox.
   

I have noticed that sometimes the arrow comes out right on the first preview but not on the second.

2. Upon resizing the preview screen the arrow assumes the correct position but is present on all the subsequent slides. Perhaps this is this is a limitation of my understanding of how scripting works but I would appreciate if someone can guide me how to limit the script so that it is only active on the relevant slide.
   

Steps to reproduce

The reprex is shared at: https://github.com/Walser52/LeaderLineReprex

---
title: "LeaderLineReprex"
format:
    revealjs:
        width: 1600
        height: 900
include-in-header:
    file: scripts/scripts.js
---


## Slide A

<div id="start" style="position: absolute; top: 100px; left: 50px; background-color: #ffcc00; padding: 10px;">start</div>

<div id="end" style="position: absolute; top: 350px; left: 350px; background-color: #00ccff; padding: 10px;">end</div>

<script>
new LeaderLine(
    document.getElementById('start'),
    document.getElementById('end')
);
</script>

## Slide B


::::{.columns}
:::{.column width=30%}
Arrow appears here
:::
:::{.column}
![](_figs/t1.jpeg){width=90%}
:::
::::

Expected Behavior

Your environment

Version: 1.77.1
Commit: b7886d7461186a5eac768481578c1d7ca80e2d21
Date: 2023-04-04T23:20:37.202Z
Electron: 19.1.11
Chromium: 102.0.5005.196
Node.js: 16.14.2
V8: 10.2.154.26-electron.0
OS: Linux x64 5.15.0-69-generic
Sandboxed: No

Quarto check output

[✓] Checking versions of quarto binary dependencies...
Pandoc version 3.1.1: OK
Dart Sass version 1.55.0: OK
[✓] Checking versions of quarto dependencies......OK
[✓] Checking Quarto installation......OK
Version: 1.3.450
Path: /opt/quarto/bin

[✓] Checking basic markdown render....OK

[✓] Checking Python 3 installation....OK
Version: 3.10.12
Path: /bin/python3
Jupyter: 5.5.0
Kernels: julia-1.9, python3

[✓] Checking Jupyter engine render....OK

[✓] Checking R installation...........OK
Version: 4.1.2
Path: /usr/lib/R
LibPaths:
- /home/fes33/R/x86_64-pc-linux-gnu-library/4.1
- /usr/local/lib/R/site-library
- /usr/lib/R/site-library
- /usr/lib/R/library
knitr: 1.43
rmarkdown: 2.22

[✓] Checking Knitr engine render......OK

[cderv]

Do you know if this JS library works already within RevealJS JS framework ? If not, this would be a RevealJS question and issue. Auto scaling and Sizing is done by Reveal.js directly. You can opt-out in config I believe though. Maybe it could help.

For context, Quarto HTML Presentation does use Revealjs (https://revealjs.com/) and you may need to bundle your usage of LeaderLine.js as a revealjs plugin so that it is synced correctly with Revealjs process, and play with it nicely.

About plugins: https://revealjs.com/creating-plugins/
and how to bundle them for Quarto usage: https://quarto.org/docs/extensions/revealjs.html

If you have an example where the LeaderLine JS works ok with a revealjs presentation, but not when produced by Quarto, then it would be something to look on Quarto side. Otherwise, it may be conflict in the JS from reveal, with the one for Leader Line.