# all files / bpmn-js/lib/features/replace-preview/ BpmnReplacePreview.js

80.56% Statements 29/36
57.14% Branches 8/14
83.33% Functions 5/6
80.56% Lines 29/36

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
    78
    79
    80
    81
    82
    83
    84
    85
    86
    87
    88
    89
    90
    91
    92
    93
    94
    95
    96
    97
    98
    99
    100
    101
    102
    103
    104
    105
    106
    107
    108
    109
    110
    111
    112
    113
    114
    115
    116
    117
    118
    119
    120
    121
    122
    123
    124
    125
    126

    1×

    78×

    12×

    12×

    14×

    14×

    14×

    14×

    14×

    14×

    14×

    14×

    14×
    14×

    14×

    14×

    14×

    11×

    11×

    78×

    23×
    23×

    23×
    21×

    23×
    12×

    11×

    1×

    1×import CommandInterceptor from 'diagram-js/lib/command/CommandInterceptor';

    import inherits from 'inherits';

    import cssEscape from 'css.escape';

    import {
      assign,
      forEach
    } from 'min-dash';

    import {
      query as domQuery
    } from 'min-dom';

    import {
      attr as svgAttr
    } from 'tiny-svg';

    var LOW_PRIORITY = 250;

    export default function BpmnReplacePreview(
        eventBus, elementRegistry, elementFactory,
        canvas, previewSupport) {

      CommandInterceptor.call(this, eventBus);

      /**
       * Replace the visuals of all elements in the context which can be replaced
       *
       * @param  {Object} context
       */
      function replaceVisual(context) {

        var replacements = context.canExecute.replacements;

        forEach(replacements, function(replacement) {

          var id = replacement.oldElementId;

          var newElement = {
            type: replacement.newElementType
          };

          // if the visual of the element is already replaced
          Iif (context.visualReplacements[id]) {
            return;
          }

          var element = elementRegistry.get(id);

          assign(newElement, { x: element.x, y: element.y });

          // create a temporary shape
          var tempShape = elementFactory.createShape(newElement);

          canvas.addShape(tempShape, element.parent);

          // select the original SVG element related to the element and hide it
          var gfx = domQuery('[data-element-id="' + cssEscape(element.id) + '"]', context.dragGroup);

          Eif (gfx) {
            svgAttr(gfx, { display: 'none' });
          }

          // clone the gfx of the temporary shape and add it to the drag group
          var dragger = previewSupport.addDragger(tempShape, context.dragGroup);

          context.visualReplacements[id] = dragger;

          canvas.removeShape(tempShape);
        });
      }

      /**
       * Restore the original visuals of the previously replaced elements
       *
       * @param  {Object} context
       */
      function restoreVisual(context) {

        var visualReplacements = context.visualReplacements;

        forEach(visualReplacements, function(dragger, id) {

          var originalGfx = domQuery('[data-element-id="' + cssEscape(id) + '"]', context.dragGroup);

          if (originalGfx) {
            svgAttr(originalGfx, { display: 'inline' });
          }

          dragger.remove();

          if (visualReplacements[id]) {
            delete visualReplacements[id];
          }
        });
      }

      eventBus.on('shape.move.move', LOW_PRIORITY, function(event) {

        var context = event.context,
            canExecute = context.canExecute;

        if (!context.visualReplacements) {
          context.visualReplacements = {};
        }

        if (canExecute && canExecute.replacements) {
          replaceVisual(context);
        } else {
          restoreVisual(context);
        }
      });
    }

    BpmnReplacePreview.$inject = [
      'eventBus',
      'elementRegistry',
      'elementFactory',
      'canvas',
      'previewSupport'
    ];

    inherits(BpmnReplacePreview, CommandInterceptor);