resizercentral.js 2.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596
  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. import global from '@ckeditor/ckeditor5-utils/src/dom/global';
  7. /**
  8. * Implements a resizer that enlarges/shrinks in all directions.
  9. *
  10. * @class ResizerCentral
  11. */
  12. export default class ResizerCentral {
  13. constructor( context, options ) {
  14. this.context = context;
  15. this.options = options || {};
  16. }
  17. attach() {}
  18. begin() {
  19. const resizeHost = this.context._getResizeHost();
  20. this.closestReferencePoint = getAbsoluteBoundaryPoint( resizeHost, this.context.referenceHandlerPosition );
  21. }
  22. commit() {}
  23. cancel() {}
  24. destroy() {}
  25. updateSize( domEventData ) {
  26. const context = this.context;
  27. const currentCoordinates = context._extractCoordinates( domEventData );
  28. const enlargement = {
  29. x: ( currentCoordinates.x - this.closestReferencePoint.x ) * 2,
  30. y: ( currentCoordinates.y - this.closestReferencePoint.y ) * 2
  31. };
  32. const originalSize = this.context.originalSize;
  33. const proposedSize = {
  34. x: Math.abs( this.closestReferencePoint.x - context.referenceCoordinates.x + enlargement.x ),
  35. y: Math.abs( this.closestReferencePoint.y - context.referenceCoordinates.y + enlargement.y )
  36. };
  37. // Dominant determination must take the ratio into account.
  38. proposedSize.dominant = proposedSize.x / context.aspectRatio > proposedSize.y ? 'x' : 'y';
  39. proposedSize.max = proposedSize[ proposedSize.dominant ];
  40. const drawnSize = {
  41. x: proposedSize.x,
  42. y: proposedSize.y
  43. };
  44. if ( proposedSize.dominant == 'x' ) {
  45. drawnSize.y = drawnSize.x / context.aspectRatio;
  46. } else {
  47. drawnSize.x = drawnSize.y * context.aspectRatio;
  48. }
  49. // Reset shadow bounding.
  50. context.domResizeShadow.style.top = 'auto';
  51. context.domResizeShadow.style.left = 'auto';
  52. context.domResizeShadow.style.bottom = 'auto';
  53. context.domResizeShadow.style.right = 'auto';
  54. const invertedPosition = this.context._invertPosition( context.referenceHandlerPosition );
  55. const resizeUsingImage = global.window.pocResizeUsingImage !== false;
  56. if ( !resizeUsingImage ) {
  57. context.domResizeShadow.style[ invertedPosition.split( '-' )[ 0 ] ] = `${ ( originalSize.y - drawnSize.y ) / 2 }px`;
  58. context.domResizeShadow.style[ invertedPosition.split( '-' )[ 1 ] ] = `${ ( originalSize.x - drawnSize.x ) / 2 }px`;
  59. } else {
  60. const resizingHost = this.context._getResizeHost();
  61. resizingHost.style.width = `${ drawnSize.x }px`;
  62. resizingHost.style.height = `${ drawnSize.y }px`;
  63. }
  64. // Apply the actual shadow dimensions.
  65. context.domResizeShadow.style.width = `${ drawnSize.x }px`;
  66. context.domResizeShadow.style.height = `${ drawnSize.y }px`;
  67. return drawnSize; // @todo decide what size should actually be returned, drawn or intended.
  68. }
  69. redraw() {}
  70. _getResizeHost() {}
  71. }
  72. mix( ResizerCentral, ObservableMixin );