From 334290aaa7084d1b8941673ab0102f2c040041ee Mon Sep 17 00:00:00 2001 From: Nathan Sobo Date: Wed, 5 Apr 2017 12:56:50 -0600 Subject: [PATCH] Resize dock to fit on double-click of resize handle --- spec/dock-spec.js | 74 ++++++++++++++++++++++++++++++++++++++++++++++- src/dock.js | 18 ++++++++++-- 2 files changed, 88 insertions(+), 4 deletions(-) diff --git a/spec/dock-spec.js b/spec/dock-spec.js index 1cebe5379..57f58f46f 100644 --- a/spec/dock-spec.js +++ b/spec/dock-spec.js @@ -1,3 +1,7 @@ +/** @babel */ + +import {it, fit, ffit, fffit, beforeEach, afterEach} from './async-spec-helpers' + describe('Dock', () => { describe('when a pane in a dock is activated', () => { it('opens the dock', () => { @@ -12,4 +16,72 @@ describe('Dock', () => { expect(atom.workspace.getLeftDock().isOpen()).toBe(true) }) }) -}) \ No newline at end of file + + describe('when the dock resize handle is double-clicked', () => { + describe('when the dock is open', () => { + it('resizes a vertically-oriented dock to the current item\'s preferred width', async () => { + const workspaceElement = atom.views.getView(atom.workspace) + jasmine.attachToDOM(workspaceElement) + + const item = { + element: document.createElement('div'), + getDefaultLocation() { return 'left' }, + getPreferredWidth() { return 142 }, + getPreferredHeight() { return 122 } + } + + await atom.workspace.open(item) + const dock = atom.workspace.getLeftDock() + const dockElement = dock.getElement() + + dock.setState({size: 300}) + expect(dockElement.offsetWidth).toBe(300) + dockElement.querySelector('.atom-dock-resize-handle').dispatchEvent(new MouseEvent('mousedown', {detail: 2})) + + expect(dockElement.offsetWidth).toBe(item.getPreferredWidth()) + }) + + it('resizes a horizontally-oriented dock to the current item\'s preferred width', async () => { + const workspaceElement = atom.views.getView(atom.workspace) + jasmine.attachToDOM(workspaceElement) + + const item = { + element: document.createElement('div'), + getDefaultLocation() { return 'bottom' }, + getPreferredWidth() { return 122 }, + getPreferredHeight() { return 142 } + } + + await atom.workspace.open(item) + const dock = atom.workspace.getBottomDock() + const dockElement = dock.getElement() + + dock.setState({size: 300}) + expect(dockElement.offsetHeight).toBe(300) + dockElement.querySelector('.atom-dock-resize-handle').dispatchEvent(new MouseEvent('mousedown', {detail: 2})) + + expect(dockElement.offsetHeight).toBe(item.getPreferredHeight()) + }) + }) + + describe('when the dock is closed', () => { + it('does nothing', async () => { + const workspaceElement = atom.views.getView(atom.workspace) + jasmine.attachToDOM(workspaceElement) + + const item = { + element: document.createElement('div'), + getDefaultLocation() { return 'bottom' }, + getPreferredWidth() { return 122 }, + getPreferredHeight() { return 142 } + } + + await atom.workspace.open(item, {activatePane: false}) + + const dockElement = atom.workspace.getBottomDock().getElement() + dockElement.querySelector('.atom-dock-resize-handle').dispatchEvent(new MouseEvent('mousedown', {detail: 2})) + expect(dockElement.offsetHeight).toBe(0) + }) + }) + }) +}) diff --git a/src/dock.js b/src/dock.js index e495c622d..a307cfb16 100644 --- a/src/dock.js +++ b/src/dock.js @@ -20,6 +20,7 @@ const CURSOR_OVERLAY_VISIBLE_CLASS = 'atom-dock-cursor-overlay-visible' module.exports = class Dock { constructor (params) { this.handleResizeHandleDragStart = this.handleResizeHandleDragStart.bind(this) + this.handleResizeToFit = this.handleResizeToFit.bind(this) this.handleMouseMove = this.handleMouseMove.bind(this) this.handleMouseUp = this.handleMouseUp.bind(this) this.handleDrag = _.throttle(this.handleDrag.bind(this), 30) @@ -139,7 +140,8 @@ module.exports = class Dock { this.wrapperElement.classList.add('atom-dock-content-wrapper', this.location) this.resizeHandle = new DockResizeHandle({ location: this.location, - onResizeStart: this.handleResizeHandleDragStart + onResizeStart: this.handleResizeHandleDragStart, + onResizeToFit: this.handleResizeToFit }) this.toggleButton = new DockToggleButton({ onDragEnter: this.handleToggleButtonDragEnter.bind(this), @@ -211,6 +213,14 @@ module.exports = class Dock { this.setState({resizing: true}) } + handleResizeToFit () { + const item = this.getActivePaneItem() + if (item) { + const size = getPreferredSize(item, this.getLocation()) + if (size != null) this.setState({size}) + } + } + handleMouseMove (event) { if (event.buttons === 0) { // We missed the mouseup event. For some reason it happens on Windows this.handleMouseUp(event) @@ -634,8 +644,10 @@ class DockResizeHandle { this.element.removeEventListener('mousedown', this.handleMouseDown) } - handleMouseDown () { - if (this.props.dockIsOpen) { + handleMouseDown (event) { + if (event.detail === 2) { + this.props.onResizeToFit() + } else if (this.props.dockIsOpen) { this.props.onResizeStart() } }