# all files / diagram-js/lib/features/resize/ ResizePreview.js

96.15% Statements 25/26
60% Branches 6/10
100% Functions 5/5
96.15% Lines 25/26

    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
    861×
    1×

    1×

    20×
    20×
    20×

    20×
    10×

    10×

    20×
    20×

    20×
    20×

    20×
    20×

    10×
    10×

    10×
    10×

    10×

    153×
    20×

    153×
    10×

    1×

     var MARKER_RESIZING = 'djs-resizing',
        MARKER_RESIZE_NOT_OK = 'resize-not-ok';

    var LOW_PRIORITY = 500;

    import {
      attr as svgAttr,
      remove as svgRemove,
      classes as svgClasses
    } from 'tiny-svg';

    /**
     * Provides previews for resizing shapes when resizing.
     *
     * @param {EventBus} eventBus
     * @param {Canvas} canvas
     * @param {PreviewSupport} previewSupport
     */
    export default function ResizePreview(eventBus, canvas, previewSupport) {

      /**
       * Update resizer frame.
       *
       * @param {Object} context
       */
      function updateFrame(context) {

        var shape = context.shape,
            bounds = context.newBounds,
            frame = context.frame;

        if (!frame) {
          frame = context.frame = previewSupport.addFrame(shape, canvas.getDefaultLayer());

          canvas.addMarker(shape, MARKER_RESIZING);
        }

        Eif (bounds.width > 5) {
          svgAttr(frame, { x: bounds.x, width: bounds.width });
        }

        Eif (bounds.height > 5) {
          svgAttr(frame, { y: bounds.y, height: bounds.height });
        }

        Eif (context.canExecute) {
          svgClasses(frame).remove(MARKER_RESIZE_NOT_OK);
        } else {
          svgClasses(frame).add(MARKER_RESIZE_NOT_OK);
        }
      }

      /**
       * Remove resizer frame.
       *
       * @param {Object} context
       */
      function removeFrame(context) {
        var shape = context.shape,
            frame = context.frame;

        Eif (frame) {
          svgRemove(context.frame);
        }

        canvas.removeMarker(shape, MARKER_RESIZING);
      }

      // add and update previews
      eventBus.on('resize.move', LOW_PRIORITY, function(event) {
        updateFrame(event.context);
      });

      // remove previews
      eventBus.on('resize.cleanup', function(event) {
        removeFrame(event.context);
      });

    }

    ResizePreview.$inject = [
      'eventBus',
      'canvas',
      'previewSupport'
    ];