github.com/anth0d/nomad@v0.0.0-20221214183521-ae3a0a2cad06/ui/app/services/actors-relationships.js (about)

     1  import Service from '@ember/service';
     2  import { action } from '@ember/object';
     3  import { tracked } from '@glimmer/tracking';
     4  import { schedule } from '@ember/runloop';
     5  import { getBoxToBoxArrow } from 'curved-arrows';
     6  
     7  function boxToArrow(ra, rb) {
     8    const bbA = ra;
     9    const bbB = rb;
    10  
    11    const [sx, sy, c1x, c1y, c2x, c2y, ex, ey, ae, as] = getBoxToBoxArrow(
    12      bbA.offsetLeft,
    13      bbA.offsetTop,
    14      bbA.offsetWidth,
    15      bbA.offsetHeight,
    16      bbB.offsetLeft,
    17      bbB.offsetTop,
    18      bbB.offsetWidth,
    19      bbB.offsetHeight
    20    );
    21  
    22    return {
    23      sx,
    24      sy,
    25      c1x,
    26      c1y,
    27      c2x,
    28      c2y,
    29      ex,
    30      ey,
    31      ae,
    32      as,
    33    };
    34  }
    35  
    36  export default class ActorRelationshipService extends Service {
    37    @tracked actors = [];
    38  
    39    get fns() {
    40      const { registerActor, deregisterActor, recalcCurves } = this;
    41      return { registerActor, deregisterActor, recalcCurves };
    42    }
    43  
    44    get data() {
    45      const { actors, relationships } = this;
    46      return { actors, relationships };
    47    }
    48  
    49    @action registerActor(actor) {
    50      schedule('actions', this, () => {
    51        this.actors = [...this.actors, actor];
    52      });
    53    }
    54  
    55    @action deregisterActor(actor) {
    56      schedule('actions', this, () => {
    57        this.actors = this.actors.filter((a) => a !== actor);
    58      });
    59    }
    60  
    61    get rects() {
    62      const { actors } = this;
    63  
    64      return actors
    65        .filter((e) => e.previousEval)
    66        .map((e) => {
    67          const { previousEval: pid, id } = e;
    68  
    69          const eRectangle = document.querySelector(`[data-eval="${id}"]`);
    70          const prevRectangle = document.querySelector(`[data-eval="${pid}"]`);
    71  
    72          return [eRectangle, prevRectangle];
    73        });
    74    }
    75  
    76    get relationships() {
    77      const { rects } = this;
    78  
    79      return rects.map(([eRectangle, prevRectangle]) => {
    80        const { sx, sy, c1x, c1y, c2x, c2y, ex, ey } = boxToArrow(
    81          eRectangle,
    82          prevRectangle
    83        );
    84  
    85        return {
    86          d: `M ${sx} ${sy} C ${c1x} ${c1y}, ${c2x} ${c2y}, ${ex} ${ey}`,
    87          sx,
    88          sy,
    89          ex,
    90          ey,
    91        };
    92      });
    93    }
    94  
    95    @action
    96    recalcCurves() {
    97      // retrigger the tracked getters by resetting dependent keys
    98      /* eslint-disable-next-line */
    99      this.actors = this.actors;
   100    }
   101  }