8
0

resizertopbound.js 2.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104
  1. import {
  2. getAbsoluteBoundaryPoint
  3. } from './utils';
  4. import ObservableMixin from '@ckeditor/ckeditor5-utils/src/observablemixin';
  5. import mix from '@ckeditor/ckeditor5-utils/src/mix';
  6. /**
  7. *
  8. * This resizer is top bound, and expands symmetrically towards left, right and increasingly fast toward bottom
  9. * (to compensate for top anchoring).
  10. *
  11. *
  12. *
  13. */
  14. /**
  15. * Implements a resizer that enlarges/shrinks in all directions.
  16. *
  17. * @class ResizerCentral
  18. */
  19. export default class ResizerCentral {
  20. constructor( context, options ) {
  21. this.context = context;
  22. this.options = options || {};
  23. }
  24. attach() {}
  25. begin() {
  26. const resizeHost = this.context._getResizeHost();
  27. this.closestReferencePoint = getAbsoluteBoundaryPoint( resizeHost, this.context.referenceHandlerPosition );
  28. }
  29. commit() {}
  30. cancel() {}
  31. destroy() {}
  32. updateSize( domEventData ) {
  33. const context = this.context;
  34. const currentCoordinates = context._extractCoordinates( domEventData );
  35. const enlargement = {
  36. x: ( currentCoordinates.x - this.closestReferencePoint.x ) * 2,
  37. y: ( currentCoordinates.y - this.closestReferencePoint.y )
  38. };
  39. const resizeHost = this.context._getResizeHost();
  40. const originalSize = {
  41. x: resizeHost.width,
  42. y: resizeHost.height
  43. };
  44. const proposedSize = {
  45. x: Math.abs( this.closestReferencePoint.x - context.referenceCoordinates.x + enlargement.x ),
  46. y: Math.abs( this.closestReferencePoint.y - context.referenceCoordinates.y + enlargement.y )
  47. };
  48. // Dominant determination must take the ratio into account.
  49. proposedSize.dominant = proposedSize.x / context.aspectRatio > proposedSize.y ? 'x' : 'y';
  50. proposedSize.max = proposedSize[ proposedSize.dominant ];
  51. const drawnSize = {
  52. x: proposedSize.x,
  53. y: proposedSize.y
  54. };
  55. if ( proposedSize.dominant == 'x' ) {
  56. drawnSize.y = drawnSize.x / context.aspectRatio;
  57. } else {
  58. drawnSize.x = drawnSize.y * context.aspectRatio;
  59. }
  60. // Reset shadow bounding.
  61. context.domResizeShadow.style.top = 'auto';
  62. context.domResizeShadow.style.left = 'auto';
  63. context.domResizeShadow.style.bottom = 'auto';
  64. context.domResizeShadow.style.right = 'auto';
  65. const invertedPosition = this.context._invertPosition( context.referenceHandlerPosition );
  66. const diff2 = {
  67. x: parseFloat( originalSize.x ) - drawnSize.x,
  68. y: parseFloat( originalSize.y ) - drawnSize.y
  69. };
  70. // context.domResizeShadow.style[ invertedPosition.split( '-' )[ 0 ] ] = `${ diff2.y / 2 }px`;
  71. context.domResizeShadow.style[ invertedPosition.split( '-' )[ 0 ] ] = '0px';
  72. context.domResizeShadow.style[ invertedPosition.split( '-' )[ 1 ] ] = `${ diff2.x / 2 }px`;
  73. // Apply the actual shadow dimensions.
  74. context.domResizeShadow.style.width = `${ drawnSize.x }px`;
  75. context.domResizeShadow.style.height = `${ drawnSize.y }px`;
  76. return drawnSize; // @todo decide what size should actually be returned.
  77. }
  78. redraw() {}
  79. }
  80. mix( ResizerCentral, ObservableMixin );