github.com/hernad/nomad@v1.6.112/ui/app/services/actors-relationships.js (about)

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