How to hide/show all LeaderLines in one click of a button?

Norlandz commented 2 years ago

How to hide/show all lines in one click of a button?

Is there a way to get all the LeaderLine objects that are created? So that maybe, I can loop through and .hide()/.show() for all of them.

anseki commented 2 years ago

Hi @Norlandz, thank you for the comment. What does the "all lines" mean? Do you mean that your code using Array and loop failed?

Norlandz commented 2 years ago

question (original, main)

We know that: Every time you create an arrow you use var line = new LeaderLine(. And you can call line.hide(); to hide that line.

But is there a way to .hide()/.show() for all lines in one click?

solution (using loop & global array)

Here is the current workaround I am using.

I used arrLeaderLines: [] as a global variable array to store all the LeaderLines. And loop through them.

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Test</title>
<script src="lib/leaderLine/leader-line.min.js"></script>
</head>

<body>
<script>
  leaderLineNsp = {
    arrLeaderLines: [] // @watch:
  };

  function hideShowAllLeaderLines(det_HideShow) { // @watch:
    if (det_HideShow == 0) {
      for (var line of leaderLineNsp.arrLeaderLines) {
        line.hide();
      }
    } else if (det_HideShow == 1) {
      for (var line of leaderLineNsp.arrLeaderLines) {
        line.show();
      }
    }
  }
</script>
<div class="js-toc-content"> 
  <!--// @watch:-->
  <button onclick="hideShowAllLeaderLines(0)">HideAllArrows</button>
  <button onclick="hideShowAllLeaderLines(1)">ShowAllArrows</button>
  <h1>Determinism with Event-Driven Workflows</h1>
  <p>AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA<br/>
    AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA<br/>
    AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA <span id="Alpha__linkArrowStart_994" class="linkArrowStart" data-timestamp="07022038_05065">Alpha</span> AAAAAAAAAAAAAAAA</p>
  <p>AAAA</p>
  <p>AAAA</p>
  <p>AAAA</p>
  <script>
window.addEventListener('load', function() {
  'use strict';

  var line = new LeaderLine(
    document.getElementById('Alpha__linkArrowStart_994'),
    document.getElementById('Delta__linkArrowEnd_690'),
    {color: 'rgba(0,128,0,0.50)', size: 1, endPlugSize: 3}
  );

  leaderLineNsp.arrLeaderLines.push(line); // @watch:
});
</script>
  <div>
    <h2>Custom Event Schedulers</h2>
    <p>AAAAAAAAAAAAAAAAAAAAAAA AAAAAAAAAAAAAAAAAAAAAAAA</p>
    <p>AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA<br/>
      AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA<br/>
      AAAAAAAAAAAAAAAAAA <span id="Beta__linkArrowEnd_099" class="linkArrowEnd" data-timestamp="07022038_42163">Beta</span> AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA</p>
    <p>AAAA</p>
    <p>AAAAAAAA AAAAAAAAAAAAAAAAA<br/>
      AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA<br/>
      AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA<br/>
      AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA<br/>
      AAAAAAAAAAAAAAAAAA <span id="Gamma__linkArrowStart_646" class="linkArrowStart" data-timestamp="07022038_34715">Gamma</span> AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA<br/>
      AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA<br/>
      AAAAAAAAAAAAAAAAAAAAAAAAAAA<br/>
      AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA<br/>
      AAAAAAAAAAAAAAAAAAAAAAAAAAAA <span id="Delta__linkArrowEnd_690" class="linkArrowEnd" data-timestamp="07022038_07770">Delta</span> AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA<br/>
      AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA<br/>
      AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA</p>
    <script>
window.addEventListener('load', function() {
  'use strict';

  var line = new LeaderLine(
    document.getElementById('Gamma__linkArrowStart_646'),
    document.getElementById('Beta__linkArrowEnd_099'),
    {color: 'rgba(0,128,0,0.50)', size: 1, endPlugSize: 3}
  );

  leaderLineNsp.arrLeaderLines.push(line); // @watch:
});
</script>
    <p>AAAA</p>
    <p>AAAA</p>
  </div>
</div>
</body>
</html>

Output of the html.

question (additional)

So, Loop works fine. Im just curious if there is a better way to do this. @anseki

ie: Is there a way to var allLine = getAllLeaderLine(); And then allLine.hideAll(); to hide/show all the lines?

anseki commented 2 years ago

I see. LeaderLine doesn't provide an API to get all instances in the current page. And that is not required because it is too easy. Usually, an Array is used to do something for multiple target instances regardless of whether it is all or not. If you want more simple code, for example you can use this:

function hideShowAllLeaderLines(det_HideShow) {
  leaderLineNsp.arrLeaderLines.forEach(line => { line[det_HideShow ? 'show' : 'hide'](); });
}

anseki / leader-line