bm-core-ui 2.11.0 → 2.11.2

package/build/@types/index.d.ts

@@ -13920,6 +13920,51 @@ export class BMWindow extends BMView {
 	initWithFrame(frame: BMRect, {toolbar, modal}?: {toolbar?: boolean | null | undefined, modal?: boolean | null | undefined}): BMWindow;
 
 
+	/**
+	 * Starts a drag event from the specified `mousedown` or `touchstart` event that moves this window.
+	 * When this method is invoked, further mouse and touch events will be blocked until the drag finishes.
+	 * 
+	 * If there is already a drag operation in progress or if this window is full screen or a modal window,
+	 * this method has no effect.
+	 * @param event 		The `mousedown` or `touchstart` event from which to begin
+	 * 												the window movement.
+	 *  
+	 */
+	performDragWithEvent(event: MouseEvent | TouchEvent): void;
+
+
+	/**
+	 * Starts a drag event from the specified `mousedown` event that will move this window.
+	 * When this method is invoked, further mouse events will be blocked until the drag finishes.
+	 * 
+	 * If there is already a drag operation in progress or if this window is full screen or a modal window,
+	 * this method has no effect.
+	 * @param event 		The `mousedown` event from which to begin the window movement.
+	 *  
+	 */
+	performDragWithMouseEvent(event: MouseEvent | TouchEvent): void;
+
+
+	/**
+	 * The identifier of the touch point that is tracked during a drag operation. `undefined`
+	 * when not tracking a drag.
+	 *  
+	 */
+	private _touchDragPoint: string;
+
+	/**
+	 * Starts a drag event from the specified `touchstart` event that will move this window.
+	 * When this method is invoked, further touch events will be blocked until the drag finishes.
+	 * 
+	 * 
+	 * If there is already a drag operation in progress or if this window is full screen or a modal window,
+	 * this method has no effect.
+	 * @param event 		The `touchstart` event from which to begin the window movement.
+	 *  
+	 */
+	performDragWithTouchEvent(event: MouseEvent | TouchEvent): void;
+
+
 	/**
 	 * Invoked on non-modal windows when the viewport resizes.
 	 * @param event 			The event that triggered this action.

package/build/BMCollectionView/BMCollectionView.js

@@ -4594,7 +4594,7 @@ BMCollectionView.prototype = BMExtend(BM_COLLECTION_VIEW_USE_BMVIEW_SUBCLASS ? O
 	 * }
 	 */
     setLayout: function (layout, options) {
-		// If there is an in-progress animated update, schedule this call for later
+		// If there is an in-progress animated update, schedule this call for when that update finishes
 		if (this.isUpdatingData) {
 			var self = this;
 			this.registerDataCompletionCallback(function () {
@@ -4625,7 +4625,8 @@ BMCollectionView.prototype = BMExtend(BM_COLLECTION_VIEW_USE_BMVIEW_SUBCLASS ? O
 		BMAnimationContextBeginStatic();
 
 		let resolveLayoutUpdate;
-		this._dataUpdatePromise = new Promise($1 => resolveLayoutUpdate = $1);
+		const dataUpdatePromise = new Promise($1 => resolveLayoutUpdate = $1);
+		this._dataUpdatePromise = dataUpdatePromise;
 
 	    // Discard the cached attribute pages
 	    this.attributeCache = {};
@@ -4916,16 +4917,19 @@ BMCollectionView.prototype = BMExtend(BM_COLLECTION_VIEW_USE_BMVIEW_SUBCLASS ? O
 
 			self._applyOverflows();
 
-			self._collectionEnabled = YES;
-			self.isUpdatingData = NO;
+			// Restore collection invoke the data completion callbacks unless another animation is in progress
+			if (self._dataUpdatePromise == dataUpdatePromise) {
+				self._collectionEnabled = YES;
+				self.isUpdatingData = NO;
+				
+				self._executeDataCompletionCallbacks();
+			}
+
+			// If the delegate animation options contains a complete handler, invoke it here
+			if (delegateOptions.complete) delegateOptions.complete();
 			
-			self._executeDataCompletionCallbacks();
-		    
-		    // If the delegate animation options contains a complete handler, invoke it here
-		    if (delegateOptions.complete) delegateOptions.complete();
-		    
-		    // Run the completion handler if it was specified
-		    if (options && options.completionHandler) options.completionHandler();
+			// Run the completion handler if it was specified
+			if (options && options.completionHandler) options.completionHandler();
 
 			resolveLayoutUpdate();
 	    };
@@ -5152,7 +5156,8 @@ BMCollectionView.prototype = BMExtend(BM_COLLECTION_VIEW_USE_BMVIEW_SUBCLASS ? O
 		var self = this;
 
 		let resolveUpdateData;
-		this._dataUpdatePromise = new Promise(function (resolve, reject) {resolveUpdateData = resolve});
+		const dataUpdatePromise = new Promise(function (resolve, reject) {resolveUpdateData = resolve});
+		this._dataUpdatePromise = dataUpdatePromise;
 		
 		// Update the selection index paths
 		this._updateSelectionIndexPaths();
@@ -5567,11 +5572,10 @@ BMCollectionView.prototype = BMExtend(BM_COLLECTION_VIEW_USE_BMVIEW_SUBCLASS ? O
 			}
 			animationComplete = YES;
 			
-			// Apply the new size now if it wasn't already applied earlier
-			if (!contentSizeWidthApplied) {
+			// Apply the new size now, unless another animation is in progress
+			if (self._dataUpdatePromise == dataUpdatePromise) {
+				const contentSize = self.layout.contentSize();
 				self._contentWrapper.css({width: contentSize.width + 'px'});
-			} 
-			if (!contentSizeHeightApplied) {
 				self._contentWrapper.css({height: contentSize.height + 'px'});
 			}
 			
@@ -5596,17 +5600,21 @@ BMCollectionView.prototype = BMExtend(BM_COLLECTION_VIEW_USE_BMVIEW_SUBCLASS ? O
 				deletedCells[i].recycle();
 			}
 			
-			self._applyOverflows();
-			self._container[0].style.pointerEvents = 'inherit';//.css({'pointer-events': 'inherit'});
+			// If another update is not in progress, re-enable scrolling and collection
+			if (self._dataUpdatePromise == dataUpdatePromise) {
+				self._applyOverflows();
+				self._container[0].style.pointerEvents = 'inherit';//.css({'pointer-events': 'inherit'});
+				
+				if (self.scrollView) self.scrollView.scrollingEnabled = YES;
 			
-			if (self.scrollView) self.scrollView.scrollingEnabled = YES;
-		
-			self._collectionEnabled = YES;
-		
-			// Set the updating flag back to NO
-			self.isUpdatingData = NO;
+				self._collectionEnabled = YES;
 			
-			self._executeDataCompletionCallbacks();
+				// Set the updating flag back to NO
+				self.isUpdatingData = NO;
+				
+				// Only execute data completion callbacks after all pending updates have finished
+				self._executeDataCompletionCallbacks();
+			}
 			
 			if (options && options.completionHandler) options.completionHandler();
 			if (delegateOptions.complete) delegateOptions.complete.apply(this, arguments);

package/build/BMCoreUI.css

@@ -192,7 +192,7 @@
 	background: rgba(245, 245, 245, .8);
 }
 
-.BMWindow.BMKeyWindow::before, .BMToolWindow::before {
+.BMWindow.BMKeyWindow, .BMToolWindow {
 	backdrop-filter: blur(15px);
 	-webkit-backdrop-filter: blur(15px);
 }
@@ -1169,6 +1169,9 @@ input:not(:checked) + .BMWindowSwitchGutter > .BMWindowSwitchKnob, .BMWindowSwit
 	color: rgba(0, 0, 0, .8);
 
 	border-radius: 8px;
+
+	backdrop-filter: blur(25px);
+	-webkit-backdrop-filter: blur(25px);
 }
 
 .BMLayoutEditorConstraintPopup::before, .BMMenu::before {
@@ -1181,11 +1184,6 @@ input:not(:checked) + .BMWindowSwitchGutter > .BMWindowSwitchKnob, .BMWindowSwit
 	bottom: 0;
 
 	border-radius: 8px;
-
-	backdrop-filter: blur(25px);
-	-webkit-backdrop-filter: blur(25px);
-
-	z-index: -1;
 }
 
 .BMMenuSourceNodeShadow {
@@ -1332,6 +1330,10 @@ input:not(:checked) + .BMWindowSwitchGutter > .BMWindowSwitchKnob, .BMWindowSwit
 /* The menu's text element should expand to fill all available space */
 .BMMenuItem > span {
 	flex-grow: 1;
+	
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
 }
 
 .BMMenuItemHint {

package/build/BMView/BMMenu.js

@@ -995,20 +995,37 @@ BMMenu.prototype = {
         // that the first menu item appears directly on the pointer's position
         const point = BMPointMake(rect.right, rect.origin.y - paddingTop);
 
+        const windowWidth = window.innerWidth;
+        const windowHeight = window.innerHeight;
+
         // Determine where to place the menu based on where it fits best, preferring towards
         // the bottom-right of the origin point
         if (kind == BMMenuKind.PullDownMenu) {
             transformOriginX = '50%';
         }
-        else if (width + point.x > document.documentElement.clientWidth) {
-            // If the menu doesn't fit towards the right, open it towards the left
-            transformOriginX = '100%';
-            point.x = rect.origin.x - width;
+        else if (width + point.x > windowWidth) {
+            // If the menu doesn't fit towards the right, open it towards the left, if it has more space
+            if (point.x > windowWidth / 2) {
+                transformOriginX = '100%';
+                point.x = rect.origin.x - width;
+
+                menuNode.style.maxWidth = point.x + 'px'
+            }
+            else {
+                menuNode.style.maxWidth = (window.innerWidth - point.x) + 'px';
+            }
         }
-        if (height + point.y > document.documentElement.clientHeight) {
-            // If the menu doesn't fit towards the bottom, open it towards the top
-            transformOriginY = ' 100%';
-            point.y = rect.bottom + paddingBottom - height;
+        if (height + point.y > windowHeight) {
+            // If the menu doesn't fit towards the bottom, open it towards the top, if it has more space
+            if (point.y > windowHeight / 2) {
+                transformOriginY = ' 100%';
+                point.y = Math.max(rect.bottom + paddingBottom - height, 0);
+
+                menuNode.style.maxHeight = point.y + 'px';
+            }
+            else {
+                menuNode.style.maxHeight = (windowHeight - point.y) + 'px';
+            }
         }
         menuNode.style.transformOrigin = transformOriginX + transformOriginY;
 

package/build/BMWindow/BMWindow.js

@@ -1075,6 +1075,147 @@ BMWindow.prototype = BMExtend(Object.create(BMView.prototype), {
 		return this;
 	},
 
+	/**
+	 * Starts a drag event from the specified `mousedown` or `touchstart` event that moves this window.
+	 * When this method is invoked, further mouse and touch events will be blocked until the drag finishes.
+	 * 
+	 * If there is already a drag operation in progress or if this window is full screen or a modal window,
+	 * this method has no effect.
+	 * @param event <MouseEvent | TouchEvent>		The `mousedown` or `touchstart` event from which to begin
+	 * 												the window movement.
+	 */
+	performDragWithEvent(event) {
+		if (event.type == 'mousedown') {
+			this.performDragWithMouseEvent(event);
+		}
+		else if (event.type == 'touchstart') {
+			this.performDragWithTouchEvent(event);
+		}
+	},
+
+	/**
+	 * Starts a drag event from the specified `mousedown` event that will move this window.
+	 * When this method is invoked, further mouse events will be blocked until the drag finishes.
+	 * 
+	 * If there is already a drag operation in progress or if this window is full screen or a modal window,
+	 * this method has no effect.
+	 * @param event <MouseEvent | TouchEvent>		The `mousedown` event from which to begin the window movement.
+	 */
+	performDragWithMouseEvent(event) {
+		// Full screen and modal windows cannot be moved
+		if (this._fullScreen) return;
+
+		this._dragged = YES;
+
+		this._position = BMPointMake(this.node.offsetLeft, this.node.offsetTop);
+		let lastPosition = BMPointMake(event.clientX, event.clientY);
+
+		let mouseMoveEventListener = event => {
+			let position = BMPointMake(event.clientX, event.clientY);
+			const newPosition = BMPointMake(this._position.x + position.x - lastPosition.x, this._position.y + position.y - lastPosition.y);
+
+			// Check if the window can move
+			let canMove = YES;
+			if (this.delegate && this.delegate.windowShouldMove) {
+				canMove = this.delegate.windowShouldMove(this, newPosition);
+			}
+			if (!canMove) return;
+
+			this.leftConstraint.constant = this._position.x + position.x - lastPosition.x;
+			this.topConstraint.constant = this._position.y + position.y - lastPosition.y;
+			this._position = newPosition;
+			lastPosition = position;
+			this.layout();
+			event.preventDefault();
+		};
+
+		let mouseUpEventListener = event => {
+			window.removeEventListener('mousemove', mouseMoveEventListener, YES);
+			window.removeEventListener('mouseup', mouseUpEventListener, YES);
+		}
+
+		window.addEventListener('mousemove', mouseMoveEventListener, YES);
+		window.addEventListener('mouseup', mouseUpEventListener, YES);
+
+		event.preventDefault();
+	},
+
+	/**
+	 * The identifier of the touch point that is tracked during a drag operation. `undefined`
+	 * when not tracking a drag.
+	 */
+	_touchDragPoint: undefined, // <String>
+
+	/**
+	 * Starts a drag event from the specified `touchstart` event that will move this window.
+	 * When this method is invoked, further touch events will be blocked until the drag finishes.
+	 * 
+	 * 
+	 * If there is already a drag operation in progress or if this window is full screen or a modal window,
+	 * this method has no effect.
+	 * @param event <MouseEvent | TouchEvent>		The `touchstart` event from which to begin the window movement.
+	 */
+	performDragWithTouchEvent(event) {
+		// If there is already a drag in progress, don't process this new event
+		if (typeof this._touchDragPoint !== 'undefined') {
+			return;
+		}
+
+		// Full screen windows cannot be moved
+		if (this._fullScreen) return;
+
+		// Only use the first touch point
+		this._touchDragPoint = event.changedTouches[0].identifier;
+		this._dragged = YES;
+
+		this._position = BMPointMake(this.node.offsetLeft, this.node.offsetTop);
+		let lastPosition = BMPointMake(event.changedTouches[0].clientX, event.changedTouches[0].clientY);
+
+		let mouseMoveEventListener = event => {
+			// Look for the actively tracked touch point
+			let touch;
+			for (let changedTouch of event.changedTouches) {
+				if (changedTouch.identifier == this._touchDragPoint) {
+					touch = changedTouch;
+					break;
+				}
+			}
+
+			// If the actively tracked touch point did not move, do not process this event
+			if (!touch) return;
+
+			let position = BMPointMake(touch.clientX, touch.clientY);
+			const newPosition = BMPointMake(this._position.x + position.x - lastPosition.x, this._position.y + position.y - lastPosition.y);
+
+			// Check if the window can move
+			let canMove = YES;
+			if (this.delegate && this.delegate.windowShouldMove) {
+				canMove = this.delegate.windowShouldMove(this, newPosition);
+			}
+			if (!canMove) return;
+
+			this.leftConstraint.constant = this._position.x + position.x - lastPosition.x;
+			this.topConstraint.constant = this._position.y + position.y - lastPosition.y;
+			this._position = newPosition;
+			lastPosition = position;
+			this.layout();
+			event.preventDefault();
+		};
+
+		let mouseUpEventListener = event => {
+			this._touchDragPoint = undefined;
+			window.removeEventListener('touchmove', mouseMoveEventListener);
+			window.removeEventListener('touchend', mouseUpEventListener);
+			window.removeEventListener('touchcancel', mouseUpEventListener);
+		}
+
+		window.addEventListener('touchmove', mouseMoveEventListener);
+		window.addEventListener('touchend', mouseUpEventListener);
+		window.removeEventListener('touchcancel', mouseUpEventListener);
+
+		event.preventDefault();
+	},
+
 	// @override - BMView
 	colorSchemeDidChange(scheme) {
 		BMView.prototype.colorSchemeDidChange.apply(this, arguments);

package/build/Core/BMAnimationContext.js

@@ -499,7 +499,7 @@ export function __BMVelocityAnimate(node, properties, options, useWebAnimations)
 export function BMHook(element, properties) {
 	if (BM_USE_VELOCITY2) {
 		let node = element;
-		if (element instanceof window.$) {
+		if (window.$ && element instanceof window.$) {
 			node = element[0];
 		}
 
@@ -969,7 +969,7 @@ export function BMAnimationApplyBlocking(blocking) {
 
 			// Set up the animation
 			let node = element;
-			if (element instanceof window.$) {
+			if (window.$ && element instanceof window.$) {
 				node = element[0];
 			}
 
@@ -1071,7 +1071,7 @@ export function BMAnimationApplyBlocking(blocking) {
 
 		}
 		else if (BM_USE_VELOCITY2) {
-			if (element instanceof window.$) {
+			if (window.$ && element instanceof window.$) {
 				promises.push(element[0].velocity(animationTargets[i].properties, options));
 			}
 			else {
@@ -1091,6 +1091,11 @@ export function BMAnimationApplyBlocking(blocking) {
 				const properties = animationTargets[i].properties;
 				const animationOptions = options;
 
+				// If there are no properties specified for this element, add a dummy tween property
+				if (!Object.keys(properties).length) {
+					properties.tween = [1, 0];
+				}
+
 				promises.push(new Promise(async resolve => {
 					const delay = options.delay;
 					options.delay = undefined;
@@ -1122,6 +1127,11 @@ export function BMAnimationApplyBlocking(blocking) {
 				}));
 			}
 			else {
+				// If there are no properties specified for this element, add a dummy tween property
+				if (!Object.keys(animationTargets[i].properties).length) {
+					animationTargets[i].properties.tween = [1, 0];
+				}
+
 				promises.push(velocity.animate(element, animationTargets[i].properties, options));
 			}
 		}

package/lib/@types/BMCoreUI.min.d.ts

@@ -13920,6 +13920,51 @@ declare class BMWindow extends BMView {
 	initWithFrame(frame: BMRect, {toolbar, modal}?: {toolbar?: boolean | null | undefined, modal?: boolean | null | undefined}): BMWindow;
 
 
+	/**
+	 * Starts a drag event from the specified `mousedown` or `touchstart` event that moves this window.
+	 * When this method is invoked, further mouse and touch events will be blocked until the drag finishes.
+	 * 
+	 * If there is already a drag operation in progress or if this window is full screen or a modal window,
+	 * this method has no effect.
+	 * @param event 		The `mousedown` or `touchstart` event from which to begin
+	 * 												the window movement.
+	 *  
+	 */
+	performDragWithEvent(event: MouseEvent | TouchEvent): void;
+
+
+	/**
+	 * Starts a drag event from the specified `mousedown` event that will move this window.
+	 * When this method is invoked, further mouse events will be blocked until the drag finishes.
+	 * 
+	 * If there is already a drag operation in progress or if this window is full screen or a modal window,
+	 * this method has no effect.
+	 * @param event 		The `mousedown` event from which to begin the window movement.
+	 *  
+	 */
+	performDragWithMouseEvent(event: MouseEvent | TouchEvent): void;
+
+
+	/**
+	 * The identifier of the touch point that is tracked during a drag operation. `undefined`
+	 * when not tracking a drag.
+	 *  
+	 */
+	private _touchDragPoint: string;
+
+	/**
+	 * Starts a drag event from the specified `touchstart` event that will move this window.
+	 * When this method is invoked, further touch events will be blocked until the drag finishes.
+	 * 
+	 * 
+	 * If there is already a drag operation in progress or if this window is full screen or a modal window,
+	 * this method has no effect.
+	 * @param event 		The `touchstart` event from which to begin the window movement.
+	 *  
+	 */
+	performDragWithTouchEvent(event: MouseEvent | TouchEvent): void;
+
+
 	/**
 	 * Invoked on non-modal windows when the viewport resizes.
 	 * @param event 			The event that triggered this action.