# all files / diagram-js/lib/features/create/ CreatePreview.js

92.86% Statements 26/28
66.67% Branches 4/6
100% Functions 5/5
92.86% Lines 26/28

    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

    1×

    29×

    29×

    29×

    29×

    29×

    29×

    31×

    31×

    31×

    31×

    31×

    29×

    1189×

    62×
    62×
    62×

    62×
    29×

    62×

    1189×
    29×
    29×

    29×
    29×

    1×

     import {
      translate
    } from '../../util/SvgTransformUtil';

    import { getVisual } from '../../util/GraphicsUtil';

    import {
      append as svgAppend,
      attr as svgAttr,
      create as svgCreate,
      remove as svgRemove
    } from 'tiny-svg';

    var LOW_PRIORITY = 750;

    export default function CreatePreview(
        canvas,
        eventBus,
        graphicsFactory,
        previewSupport,
        styles
    ) {
      function createDragGroup(elements) {
        var dragGroup = svgCreate('g');

        svgAttr(dragGroup, styles.cls('djs-drag-group', [ 'no-events' ]));

        var defaultLayer = canvas.getDefaultLayer();

        svgAppend(defaultLayer, dragGroup);

        var childrenGfx = svgCreate('g');

        elements.forEach(function(element) {

          // create graphics
          var gfx;

          Iif (element.waypoints) {
            gfx = graphicsFactory._createContainer('connection', childrenGfx);

            graphicsFactory.drawConnection(getVisual(gfx), element);
          } else {
            gfx = graphicsFactory._createContainer('shape', childrenGfx);

            graphicsFactory.drawShape(getVisual(gfx), element);

            translate(gfx, element.x, element.y);
          }

          // add preview
          previewSupport.addDragger(element, dragGroup, gfx);
        });

        return dragGroup;
      }

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

        var context = event.context,
            elements = context.elements,
            dragGroup = context.dragGroup;

        // lazily create previews
        if (!dragGroup) {
          dragGroup = context.dragGroup = createDragGroup(elements);
        }

        translate(dragGroup, event.x, event.y);
      });

      eventBus.on('create.cleanup', function(event) {
        var context = event.context,
            dragGroup = context.dragGroup;

        Eif (dragGroup) {
          svgRemove(dragGroup);
        }
      });
    }

    CreatePreview.$inject = [
      'canvas',
      'eventBus',
      'graphicsFactory',
      'previewSupport',
      'styles'
    ];