ResizePreview.js 1.7 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586
  1. var MARKER_RESIZING = 'djs-resizing',
  2. MARKER_RESIZE_NOT_OK = 'resize-not-ok';
  3. var LOW_PRIORITY = 500;
  4. import {
  5. attr as svgAttr,
  6. remove as svgRemove,
  7. classes as svgClasses
  8. } from 'tiny-svg';
  9. /**
  10. * Provides previews for resizing shapes when resizing.
  11. *
  12. * @param {EventBus} eventBus
  13. * @param {Canvas} canvas
  14. * @param {PreviewSupport} previewSupport
  15. */
  16. export default function ResizePreview(eventBus, canvas, previewSupport) {
  17. /**
  18. * Update resizer frame.
  19. *
  20. * @param {Object} context
  21. */
  22. function updateFrame(context) {
  23. var shape = context.shape,
  24. bounds = context.newBounds,
  25. frame = context.frame;
  26. if (!frame) {
  27. frame = context.frame = previewSupport.addFrame(shape, canvas.getDefaultLayer());
  28. canvas.addMarker(shape, MARKER_RESIZING);
  29. }
  30. if (bounds.width > 5) {
  31. svgAttr(frame, { x: bounds.x, width: bounds.width });
  32. }
  33. if (bounds.height > 5) {
  34. svgAttr(frame, { y: bounds.y, height: bounds.height });
  35. }
  36. if (context.canExecute) {
  37. svgClasses(frame).remove(MARKER_RESIZE_NOT_OK);
  38. } else {
  39. svgClasses(frame).add(MARKER_RESIZE_NOT_OK);
  40. }
  41. }
  42. /**
  43. * Remove resizer frame.
  44. *
  45. * @param {Object} context
  46. */
  47. function removeFrame(context) {
  48. var shape = context.shape,
  49. frame = context.frame;
  50. if (frame) {
  51. svgRemove(context.frame);
  52. }
  53. canvas.removeMarker(shape, MARKER_RESIZING);
  54. }
  55. // add and update previews
  56. eventBus.on('resize.move', LOW_PRIORITY, function(event) {
  57. updateFrame(event.context);
  58. });
  59. // remove previews
  60. eventBus.on('resize.cleanup', function(event) {
  61. removeFrame(event.context);
  62. });
  63. }
  64. ResizePreview.$inject = [
  65. 'eventBus',
  66. 'canvas',
  67. 'previewSupport'
  68. ];