ResizerWidget.js 3.1 KB

12345678910111213141516171819202122232425262728
  1. export default class ResizerWidget extends Common.Object{constructor(){super();this._isEnabled=true;this._elements=[];this._installDragOnMouseDownBound=this._installDragOnMouseDown.bind(this);this._cursor='nwse-resize';}
  2. isEnabled(){return this._isEnabled;}
  3. setEnabled(enabled){this._isEnabled=enabled;this.updateElementCursors();}
  4. elements(){return this._elements.slice();}
  5. addElement(element){if(this._elements.indexOf(element)!==-1){return;}
  6. this._elements.push(element);element.addEventListener('mousedown',this._installDragOnMouseDownBound,false);this._updateElementCursor(element);}
  7. removeElement(element){if(this._elements.indexOf(element)===-1){return;}
  8. this._elements.remove(element);element.removeEventListener('mousedown',this._installDragOnMouseDownBound,false);element.style.removeProperty('cursor');}
  9. updateElementCursors(){this._elements.forEach(this._updateElementCursor.bind(this));}
  10. _updateElementCursor(element){if(this._isEnabled){element.style.setProperty('cursor',this.cursor());}else{element.style.removeProperty('cursor');}}
  11. cursor(){return this._cursor;}
  12. setCursor(cursor){this._cursor=cursor;this.updateElementCursors();}
  13. _installDragOnMouseDown(event){if(this._elements.indexOf(event.target)===-1){return false;}
  14. UI.elementDragStart((event.target),this._dragStart.bind(this),this._drag.bind(this),this._dragEnd.bind(this),this.cursor(),event);}
  15. _dragStart(event){if(!this._isEnabled){return false;}
  16. this._startX=event.pageX;this._startY=event.pageY;this.sendDragStart(this._startX,this._startY);return true;}
  17. sendDragStart(x,y){this.dispatchEventToListeners(Events.ResizeStart,{startX:x,currentX:x,startY:y,currentY:y});}
  18. _drag(event){if(!this._isEnabled){this._dragEnd(event);return true;}
  19. this.sendDragMove(this._startX,event.pageX,this._startY,event.pageY,event.shiftKey);event.preventDefault();return false;}
  20. sendDragMove(startX,currentX,startY,currentY,shiftKey){this.dispatchEventToListeners(Events.ResizeUpdate,{startX:startX,currentX:currentX,startY:startY,currentY:currentY,shiftKey:shiftKey});}
  21. _dragEnd(event){this.dispatchEventToListeners(Events.ResizeEnd);delete this._startX;delete this._startY;}}
  22. export const Events={ResizeStart:Symbol('ResizeStart'),ResizeUpdate:Symbol('ResizeUpdate'),ResizeEnd:Symbol('ResizeEnd')};export class SimpleResizerWidget extends ResizerWidget{constructor(){super();this._isVertical=true;}
  23. isVertical(){return this._isVertical;}
  24. setVertical(vertical){this._isVertical=vertical;this.updateElementCursors();}
  25. cursor(){return this._isVertical?'ns-resize':'ew-resize';}
  26. sendDragStart(x,y){const position=this._isVertical?y:x;this.dispatchEventToListeners(Events.ResizeStart,{startPosition:position,currentPosition:position});}
  27. sendDragMove(startX,currentX,startY,currentY,shiftKey){if(this._isVertical){this.dispatchEventToListeners(Events.ResizeUpdate,{startPosition:startY,currentPosition:currentY,shiftKey:shiftKey});}else{this.dispatchEventToListeners(Events.ResizeUpdate,{startPosition:startX,currentPosition:currentX,shiftKey:shiftKey});}}}
  28. self.UI=self.UI||{};UI=UI||{};UI.ResizerWidget=ResizerWidget;UI.ResizerWidget.Events=Events;UI.SimpleResizerWidget=SimpleResizerWidget;