Prevent the resize handle from covering the center

Currently, the absolutely positioned element is the only thing with a
size. That means that it'll cover the center. With this change, we give
a size to the (relatively-positioned) atom-dock element so that closed
docks take up canvas space instead.

I think @simurai mentioned this problem before but I wasn't following
and then forgot about it. 😖
This commit is contained in:
Matthew Dapena-Tretter
2017-04-11 22:38:09 -07:00
parent 69363cf805
commit 2a2d657d98

View File

@@ -205,11 +205,16 @@ module.exports = class Dock {
const shouldBeVisible = state.visible || state.showDropTarget
const size = Math.max(MINIMUM_SIZE, state.size == null ? this.getInitialSize() : state.size)
const resizeHandleSize = this.resizeHandle.getSize()
// We need to change the size of the mask...
this.maskElement.style[this.widthOrHeight] = `${shouldBeVisible ? size : this.resizeHandle.getSize()}px`
this.maskElement.style[this.widthOrHeight] = `${shouldBeVisible ? size : resizeHandleSize}px`
// ...but the content needs to maintain a constant size.
this.wrapperElement.style[this.widthOrHeight] = `${size}px`
// ...and the non-absolutely positioned dock element should always be large enough to fit the
// resize handle (so the handle doesn't cover the center).
const minWidthOrHeight = this.widthOrHeight === 'width' ? 'minWidth' : 'minHeight'
this.element.style[minWidthOrHeight] = `${resizeHandleSize}px`
this.resizeHandle.update({dockIsVisible: this.state.visible})
this.toggleButton.update({