From 51d7ce5f71465f2f578a08a998b2df353242ff4d Mon Sep 17 00:00:00 2001 From: bobzel Date: Tue, 5 Apr 2022 13:54:26 -0400 Subject: fixes to allow dragging golden layout windows to be aborted with 'esc'. some code cleanup as well to avoid rebuilding golden layout when tabs are closed. Fixes for undo and goldenlayout --- src/client/goldenLayout.js | 32 ++++++++++++++++++++++++++------ 1 file changed, 26 insertions(+), 6 deletions(-) (limited to 'src/client/goldenLayout.js') diff --git a/src/client/goldenLayout.js b/src/client/goldenLayout.js index 896237e1d..295875ef6 100644 --- a/src/client/goldenLayout.js +++ b/src/client/goldenLayout.js @@ -366,6 +366,7 @@ this._nOriginalY = 0; this._bDragging = false; + this._bAborting = false; this._fMove = lm.utils.fnBind(this.onMouseMove, this); this._fUp = lm.utils.fnBind(this.onMouseUp, this); @@ -427,6 +428,24 @@ } }, + AbortDrag: function () { + if (this._timeout != null) { + clearTimeout(this._timeout); + this._eBody.removeClass('lm_dragging'); + this._eElement.removeClass('lm_dragging'); + this._oDocument.find('iframe').css('pointer-events', ''); + this._oDocument.unbind('mousemove touchmove', this._fMove); + this._oDocument.unbind('mouseup touchend', this._fUp); + + if (this._bDragging === true) { + this._bDragging = false; + this._bAborting = true; + this.emit('dragStop', { pageX: 0, pageY: 0 }, this._nOriginalX + this._nX); + this._bAborting = false; + } + } + }, + onMouseUp: function (oEvent) { if (this._timeout != null) { clearTimeout(this._timeout); @@ -2178,18 +2197,18 @@ */ _onDrop: function () { this._layoutManager.dropTargetIndicator.hide(); - + let abortedDrop = this._dragListener._bAborting; /* * Valid drop area found */ - if (this._area !== null) { + if (!abortedDrop && this._area !== null) { this._area.contentItem._$onDrop(this._contentItem, this._area); /** * No valid drop area available at present, but one has been found before. * Use it */ - } else if (this._lastValidArea !== null) { + } else if (!abortedDrop && this._lastValidArea !== null) { this._lastValidArea.contentItem._$onDrop(this._contentItem, this._lastValidArea); /** @@ -2197,7 +2216,7 @@ * content item to its original position if a original parent is provided. * (Which is not the case if the drag had been initiated by createDragSource) */ - } else if (this._originalParent) { + } else if (!abortedDrop && this._originalParent) { this._originalParent.addChild(this._contentItem); /** @@ -2212,7 +2231,7 @@ restoreScrollTops(this._contentItem.element) this.element.remove(); - this._layoutManager.emit('itemDropped', this._contentItem); + !abortedDrop && this._layoutManager.emit('itemDropped', this._contentItem); }, /** @@ -2963,7 +2982,7 @@ if (this.contentItem.parent.isMaximised === true) { this.contentItem.parent.toggleMaximise(); } - new lm.controls.DragProxy( + let proxy = new lm.controls.DragProxy( x, y, this._dragListener, @@ -2971,6 +2990,7 @@ this.contentItem, this.header.parent ); + this._layoutManager.emit('dragStart', proxy); }, /** -- cgit v1.2.3-70-g09d2 From 996b0c12ae5456f6471e8162959dfa4174b8fc5b Mon Sep 17 00:00:00 2001 From: bobzel Date: Tue, 5 Apr 2022 14:34:38 -0400 Subject: tweaked tab titles to be more normally editable. --- src/client/goldenLayout.js | 12 ++++++++++-- 1 file changed, 10 insertions(+), 2 deletions(-) (limited to 'src/client/goldenLayout.js') diff --git a/src/client/goldenLayout.js b/src/client/goldenLayout.js index 295875ef6..82b10608d 100644 --- a/src/client/goldenLayout.js +++ b/src/client/goldenLayout.js @@ -388,8 +388,8 @@ }, onMouseDown: function (oEvent) { - oEvent.preventDefault(); - + //oEvent.preventDefault(); // don't prevent deafult as this will stop text selection + if (oEvent.target && oEvent.target.className === "lm_title") return; // if the title is active and receiving events, then don't do tab dragging. if (oEvent.button == 0 || oEvent.type === "touchstart") { var coordinates = this._getCoordinates(oEvent); @@ -458,7 +458,13 @@ if (this._bDragging === true) { this._bDragging = false; this.emit('dragStop', oEvent, this._nOriginalX + this._nX); + } else if (oEvent.target) { // make title receive pointer events to allow setting insertion position or selecting texst range + if (oEvent.target.className.includes("lm_title_wrap")) { + oEvent.target.children[0].style.pointerEvents = "all"; + oEvent.target.children[0].focus(); + } } + } }, @@ -2870,6 +2876,8 @@ this.closeElement = this.element.find('.lm_close_tab'); this.closeElement[contentItem.config.isClosable ? 'show' : 'hide'](); this.isActive = false; + this.titleElement[0].style.pointerEvents = "none"; // don't let title receive pointer events by default -- need to click on it to make it editable -- this allows the tab to be dragged + this.titleElement[0].onblur = () => this.titleElement[0].style.pointerEvents = "none"; this.setTitle(contentItem.config.title); this.contentItem.on('titleChanged', this.setTitle, this); -- cgit v1.2.3-70-g09d2