@deephaven/golden-layout
Version:
A multi-screen javascript Layout manager
204 lines (192 loc) • 10.1 kB
JavaScript
function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == typeof i ? i : i + ""; }
function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != typeof i) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
import $ from 'jquery';
import { stripTags, EventEmitter } from "../utils/index.js";
/**
* This class creates a temporary container
* for the component whilst it is being dragged
* and handles drag events
*
* @param x The initial x position
* @param y The initial y position
* @param dragListener
* @param layoutManager
* @param contentItem
* @param originalParent
*/
export default class DragProxy extends EventEmitter {
constructor(x, y, dragListener, layoutManager, contentItem, originalParent) {
var _this$_contentItem$co, _this$_contentItem$co2, _offset$left, _offset$top, _this$_layoutManager$, _this$_layoutManager$2, _this$element$width, _this$element$height;
super();
_defineProperty(this, "_dragListener", void 0);
_defineProperty(this, "_layoutManager", void 0);
_defineProperty(this, "_contentItem", void 0);
_defineProperty(this, "_originalParent", void 0);
_defineProperty(this, "_area", null);
_defineProperty(this, "_lastValidArea", null);
_defineProperty(this, "_minX", void 0);
_defineProperty(this, "_maxX", void 0);
_defineProperty(this, "_minY", void 0);
_defineProperty(this, "_maxY", void 0);
_defineProperty(this, "_width", void 0);
_defineProperty(this, "_height", void 0);
_defineProperty(this, "_sided", void 0);
_defineProperty(this, "element", void 0);
_defineProperty(this, "childElementContainer", void 0);
_defineProperty(this, "_proxyTab", void 0);
this._dragListener = dragListener;
this._layoutManager = layoutManager;
this._contentItem = contentItem;
this._originalParent = originalParent;
this._dragListener.on('drag', this._onDrag, this);
this._dragListener.on('dragStop', this._onDrop, this);
// set the inserted drag placeholder to be the size of the tab removed, before its removed
if (this._contentItem.tab && this._contentItem.tab.element) {
var _this$_contentItem$ta, _this$_contentItem$ta2;
this._layoutManager.tabDropPlaceholder.width((_this$_contentItem$ta = this._contentItem.tab.element.outerWidth(true)) !== null && _this$_contentItem$ta !== void 0 ? _this$_contentItem$ta : 0);
this._layoutManager.tabDropPlaceholder.height((_this$_contentItem$ta2 = this._contentItem.tab.element.outerHeight(true)) !== null && _this$_contentItem$ta2 !== void 0 ? _this$_contentItem$ta2 : 0);
}
this.element = $(DragProxy._template);
if (originalParent && originalParent._side) {
this._sided = originalParent._sided;
this.element.addClass('lm_' + originalParent._side);
if (['right', 'bottom'].indexOf(originalParent._side.toString()) >= 0) this.element.find('.lm_content').after(this.element.find('.lm_header'));
}
this.element.css({
left: x,
top: y
});
this._proxyTab = this.element.find('.lm_tab');
this._proxyTab.attr('title', stripTags((_this$_contentItem$co = this._contentItem.config.title) !== null && _this$_contentItem$co !== void 0 ? _this$_contentItem$co : ''));
this.element.find('.lm_title').text((_this$_contentItem$co2 = this._contentItem.config.title) !== null && _this$_contentItem$co2 !== void 0 ? _this$_contentItem$co2 : '');
this.childElementContainer = this.element.find('.lm_content');
this.childElementContainer.append(contentItem.element);
this._updateTree();
this._layoutManager._$calculateItemAreas();
$(document.body).append(this.element);
// Need to set dimensions after adding the element, or `Component.setSize()` will not pass the `.is('visible')` test and won't update
this._setDimensions();
// there's no content tab to use yet, use the proxy tab size for placeholder sizing, after it's created
if (!this._contentItem.tab && this._proxyTab.length) {
var _this$_proxyTab$outer, _this$_proxyTab$outer2;
this._layoutManager.tabDropPlaceholder.width((_this$_proxyTab$outer = this._proxyTab.outerWidth(true)) !== null && _this$_proxyTab$outer !== void 0 ? _this$_proxyTab$outer : 0);
this._layoutManager.tabDropPlaceholder.height((_this$_proxyTab$outer2 = this._proxyTab.outerHeight(true)) !== null && _this$_proxyTab$outer2 !== void 0 ? _this$_proxyTab$outer2 : 0);
}
var offset = this._layoutManager.container.offset();
this._minX = (_offset$left = offset === null || offset === void 0 ? void 0 : offset.left) !== null && _offset$left !== void 0 ? _offset$left : 0;
this._minY = (_offset$top = offset === null || offset === void 0 ? void 0 : offset.top) !== null && _offset$top !== void 0 ? _offset$top : 0;
this._maxX = ((_this$_layoutManager$ = this._layoutManager.container.width()) !== null && _this$_layoutManager$ !== void 0 ? _this$_layoutManager$ : 0) + this._minX;
this._maxY = ((_this$_layoutManager$2 = this._layoutManager.container.height()) !== null && _this$_layoutManager$2 !== void 0 ? _this$_layoutManager$2 : 0) + this._minY;
this._width = (_this$element$width = this.element.width()) !== null && _this$element$width !== void 0 ? _this$element$width : 0;
this._height = (_this$element$height = this.element.height()) !== null && _this$element$height !== void 0 ? _this$element$height : 0;
this._setDropPosition(x, y);
this._layoutManager.emit('itemPickedUp', this._contentItem);
}
/**
* Callback on every mouseMove event during a drag. Determines if the drag is
* still within the valid drag area and calls the layoutManager to highlight the
* current drop area
*
* @param offsetX The difference from the original x position in px
* @param offsetY The difference from the original y position in px
* @param event
*/
_onDrag(offsetX, offsetY, event) {
var _event$pageX, _event$pageY;
var x = (_event$pageX = event.pageX) !== null && _event$pageX !== void 0 ? _event$pageX : 0;
var y = (_event$pageY = event.pageY) !== null && _event$pageY !== void 0 ? _event$pageY : 0;
var isWithinContainer = x > this._minX && x < this._maxX && y > this._minY && y < this._maxY;
if (!isWithinContainer && this._layoutManager.config.settings.constrainDragToContainer === true) {
return;
}
this._setDropPosition(x, y);
}
/**
* Sets the target position, highlighting the appropriate area
*
* @param x The x position in px
* @param y The y position in px
*/
_setDropPosition(x, y) {
this.element.css({
left: x,
top: y
});
this._area = this._layoutManager._$getArea(x, y);
if (this._area !== null) {
this._lastValidArea = this._area;
this._area.contentItem._$highlightDropZone(x, y, this._area);
}
}
/**
* Callback when the drag has finished. Determines the drop area
* and adds the child to it
*/
_onDrop() {
var _this$_layoutManager$3;
(_this$_layoutManager$3 = this._layoutManager.dropTargetIndicator) === null || _this$_layoutManager$3 === void 0 || _this$_layoutManager$3.hide();
/*
* Valid drop area found
*/
if (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) {
this._lastValidArea.contentItem._$onDrop(this._contentItem, this._lastValidArea);
/**
* No valid drop area found during the duration of the drag. Return
* 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) {
this._originalParent.addChild(this._contentItem);
/**
* The drag didn't ultimately end up with adding the content item to
* any container. In order to ensure clean up happens, destroy the
* content item.
*/
} else {
this._contentItem._$destroy();
}
this._dragListener.off('drag', this._onDrag, this);
this._dragListener.off('dragStop', this._onDrop, this);
this.element.remove();
this._layoutManager.emit('itemDropped', this._contentItem);
}
/**
* Removes the item from its original position within the tree
*/
_updateTree() {
/**
* parent is null if the drag had been initiated by a external drag source
*/
if (this._contentItem.parent) {
this._contentItem.parent.removeChild(this._contentItem, true);
}
this._contentItem._$setParent(null);
}
/**
* Updates the DragProxy's dimensions
*/
_setDimensions() {
var dimensions = this._layoutManager.config.dimensions;
var width = dimensions.dragProxyWidth;
var height = dimensions.dragProxyHeight;
this.element.width(width);
this.element.height(height);
width -= this._sided ? dimensions.headerHeight : 0;
height -= !this._sided ? dimensions.headerHeight : 0;
this.childElementContainer.width(width);
this.childElementContainer.height(height);
this._contentItem.element.width(width);
this._contentItem.element.height(height);
this._contentItem.callDownwards('_$show');
this._contentItem.callDownwards('setSize');
}
}
_defineProperty(DragProxy, "_template", '<div class="lm_dragProxy">' + '<div class="lm_header">' + '<ul class="lm_tabs">' + '<li class="lm_tab lm_active"><i class="lm_left"></i>' + '<span class="lm_title"></span>' + '<i class="lm_right"></i></li>' + '</ul>' + '</div>' + '<div class="lm_content"></div>' + '</div>');
//# sourceMappingURL=DragProxy.js.map