8
0

widgetresizer.js 3.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138
  1. /**
  2. * @license Copyright (c) 2003-2019, CKSource - Frederico Knabben. All rights reserved.
  3. * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
  4. */
  5. /**
  6. * @module widget/widget
  7. */
  8. import WidgetResizeFeature from './widgetresizefeature';
  9. import Plugin from '@ckeditor/ckeditor5-core/src/plugin';
  10. import MouseObserver from './view/mouseobserver';
  11. import MouseMoveObserver from './view/mousemoveobserver';
  12. import getAncestors from '@ckeditor/ckeditor5-utils/src/dom/getancestors';
  13. class ResizeContext {
  14. constructor( handler ) {
  15. const resizeWrapper = getAncestors( handler ).filter(
  16. element => element.classList.contains( 'ck-widget_with-resizer' )
  17. )[ 0 ];
  18. this.widgetWrapper = resizeWrapper;
  19. this.shadowWrapper = resizeWrapper.querySelector( '.ck-widget__resizer-shadow' );
  20. }
  21. initialize( domEventData ) {
  22. this.initialClickCoordinates = this._extractCoordinates( domEventData );
  23. this.shadowWrapper.classList.add( 'ck-widget__resizer-shadow-active' );
  24. }
  25. destroy() {
  26. this.shadowWrapper.classList.remove( 'ck-widget__resizer-shadow-active' );
  27. this.shadowWrapper = null;
  28. this.wrapper = null;
  29. }
  30. updateSize( domEventData ) {
  31. const currentCoordinates = this._extractCoordinates( domEventData );
  32. const yDistance = this.initialClickCoordinates.y - currentCoordinates.y;
  33. // for top, left handler:
  34. // yDistance > 0 - element is enlarged
  35. // yDistance < 0 - element is shrinked
  36. if ( yDistance > 0 ) {
  37. // console.log( 'enlarging' );
  38. } else {
  39. // console.log( 'shrinking' );
  40. }
  41. }
  42. _extractCoordinates( event ) {
  43. return {
  44. x: event.domEvent.pageX,
  45. y: event.domEvent.pageY
  46. };
  47. }
  48. }
  49. /**
  50. * The base class for widget features. This type provides a common API for reusable features of widgets.
  51. */
  52. export default class WidgetResizer extends Plugin {
  53. /**
  54. * @inheritDoc
  55. */
  56. static get pluginName() {
  57. return 'WidgetResizer';
  58. }
  59. init() {
  60. const view = this.editor.editing.view;
  61. const viewDocument = view.document;
  62. this._observers = {
  63. mouseMove: view.addObserver( MouseMoveObserver ),
  64. mouseDownUp: view.addObserver( MouseObserver )
  65. };
  66. // It should start disabled, only upon clicking drag handler it interests us.
  67. // Currently broken due to https://github.com/ckeditor/ckeditor5-engine/blob/ce6422b/src/view/view.js#L364
  68. this._observers.mouseMove.disable();
  69. let isActive = false;
  70. let resizeContext = null;
  71. // Mouse move observer is only needed when the mouse button is pressed.
  72. // this.listenTo( viewDocument, 'mousemove', () => console.log( 'move' ) );
  73. this.listenTo( viewDocument, 'mousemove', ( event, domEventData ) => {
  74. if ( resizeContext ) {
  75. resizeContext.updateSize( domEventData );
  76. }
  77. } );
  78. this.listenTo( viewDocument, 'mousedown', ( event, domEventData ) => {
  79. const target = domEventData.domTarget;
  80. const resizeHandler = isResizeWrapper( target ) || getAncestors( target ).filter( isResizeWrapper )[ 0 ];
  81. if ( resizeHandler ) {
  82. isActive = true;
  83. this._observers.mouseMove.enable();
  84. resizeContext = new ResizeContext( resizeHandler );
  85. resizeContext.initialize( domEventData );
  86. }
  87. } );
  88. const finishResizing = () => {
  89. // @todo listen also for mouse up outside of the editable.
  90. if ( isActive ) {
  91. isActive = false;
  92. this._observers.mouseMove.disable();
  93. resizeContext.destroy();
  94. resizeContext = null;
  95. }
  96. };
  97. // @todo: it should listen on the entire window.
  98. this.listenTo( viewDocument, 'mouseup', finishResizing );
  99. function isResizeWrapper( element ) {
  100. return element.classList && element.classList.contains( 'ck-widget__resizer' );
  101. }
  102. }
  103. apply( widgetElement, writer ) {
  104. // @todo inline the logic
  105. const ret = new WidgetResizeFeature();
  106. ret.apply( widgetElement, writer );
  107. return ret;
  108. }
  109. }