bm-core-ui 2.11.9-beta.2 → 2.12.0-beta.12

package/build/BMView/BMLayoutConstraint_v2.5.js

@@ -541,10 +541,12 @@ BMLayoutConstraint.prototype = {
 				if (this._solver) {
 					if (this._constraint) {
 						try {
-							if (this._solver.hasConstraint(this._constraint)) this._solver.removeConstraint(this._constraint);
+							if (this._solver.hasConstraint(this._constraint)) {
+								this._solver.removeConstraint(this._constraint);
+							}
 						}
 						catch (layoutError) {
-							this._cassowaryConstraint = undefined;
+							this._constraint = undefined;
 							this._sourceView.rootView._invalidatedConstraints = YES;
 							this._sourceView.needsLayout = YES;
 						}
@@ -556,7 +558,7 @@ BMLayoutConstraint.prototype = {
 						this._solver.addConstraint(this._cassowaryConstraint);
 					}
 					catch (layoutError) {
-						this._cassowaryConstraint = undefined;
+						this._constraint = undefined;
 						this._sourceView.rootView._invalidatedConstraints = YES;
 						this._sourceView.needsLayout = YES;
 					}
@@ -605,22 +607,12 @@ BMLayoutConstraint.prototype = {
 		return this._constant;
 	},
 	set constant(constant) {
-		if (constant == this._constant) return;
-		this._constant = constant;
-		return this._updateConfiguration();
-
-		// When changing the constant, update the attached solver, if there is one
-		if (this._solver) {
-			if (this._constraint) {
-				this._solver.removeConstraint(this._constraint);
-				this._constraint = undefined;
-			}
-			this._solver.addConstraint(this._cassowaryConstraint);
+		if (constant == this._constant) {
+			return;
 		}
 
-		if (this.isActive) {
-		    this._sourceView.needsLayout = YES;
-		}
+		this._constant = constant;
+		this._updateConfiguration();
 	},
 
 	/**
@@ -694,15 +686,7 @@ BMLayoutConstraint.prototype = {
 	 * Returns this constraint's constant for the currently active size class.
 	 */
 	get activeConstant() { // <Number or String>
-		// TODO:
 		return this._configuration.constant;
-		let sizeClassHash = this._sourceView.sizeClass._hashString;
-
-		if ('constant' in this._variations[sizeClassHash]) {
-			return this._variations[sizeClassHash].constant;
-		}
-
-		return this._constant;
 	},
 
 	/**
@@ -716,12 +700,7 @@ BMLayoutConstraint.prototype = {
 	set priority(priority) {
 		if (this._priority != priority) {
 			this._priority = priority;
-			return this._updateConfiguration();
-			
-			this._sourceView.needsLayout = YES;
-
-			if (this._targetView) this._targetView.needsLayout = YES;
-			this._sourceView.rootView._invalidatedConstraints = YES;
+			this._updateConfiguration();
 		}
 	},
 
@@ -798,13 +777,6 @@ BMLayoutConstraint.prototype = {
 	get activePriority() { // <Number>
 		// TODO:
 		return this._configuration.priority;
-		let sizeClassHash = this._sourceView.sizeClass._hashString;
-
-		if ('priority' in this._variations[sizeClassHash]) {
-			return this._variations[sizeClassHash].priority;
-		}
-
-		return this._priority;
 	},
 
 	/**
@@ -855,19 +827,7 @@ BMLayoutConstraint.prototype = {
 	set isActive(active) {
 		if (active != this._isActive) {
 			this._isActive = active;
-			return this._updateConfiguration();
-			this._sourceView._checkConstraints();
-			this._sourceView.needsLayout = YES;
-			this._sourceView.rootView._invalidatedConstraints = YES;
-
-			if (this._targetView) {
-				if (this._targetView.rootView != this._sourceView.rootView) {
-					throw new Error('[BMCoreUI] Incorrectly attempting to activate a layout constraint that affects two views that do not share a common ancestor.');
-				}
-
-				this._targetView._checkConstraints();
-				this._targetView.needsLayout = YES;
-			}
+			this._updateConfiguration();
 		}
 	},
 
@@ -942,13 +902,6 @@ BMLayoutConstraint.prototype = {
 	 */
 	get affectsLayout() { // <Boolean>
 		return this._configuration.isActive;
-		let sizeClassHash = this._sourceView.sizeClass._hashString;
-
-		if ('isActive' in this._variations[sizeClassHash]) {
-			return this._variations[sizeClassHash].isActive;
-		}
-
-		return this._isActive;
 	},
 
 	/**
@@ -1048,7 +1001,9 @@ BMLayoutConstraint.prototype = {
 	 * generated by this layout constraint.
 	 */
 	get _cassowaryConstraint() {
-		if (this._constraint) return this._constraint;
+		if (this._constraint) {
+			return this._constraint;
+		}
 
 		var expression = this._cassowaryExpression;
 

package/build/BMView/BMMenu.js

@@ -460,6 +460,12 @@ BMMenu.prototype = {
         this.__delaysClosing = delays;
     },
 
+    /**
+     * When set to `YES`, the menu item actions and item selection delegate callbacks will be invoked
+     * with a slight delay to allow time for the menu closing animation to play.
+     */
+    delaysActions: NO, // <Boolean>
+
     /**
      * Initializes this menu with the specified items.
      * The menu will be hidden by default; the method showAtPoint(_) should be used to make the menu visible.
@@ -701,20 +707,13 @@ BMMenu.prototype = {
                 // animation to play out
                 this._delaysClosing = YES;
 
-                if (item.action) {
-                    // Invoke the menu's action if configured
-                    item.action(item);
-                }
+                this._selectedMenuItem = item;
 
                 itemNode.classList.add('BMMenuItemActive');
-
-                if (this.delegate && this.delegate.menuDidSelectItem) {
-                    this.delegate.menuDidSelectItem(this, item);
-                }
             });
 
             // When moving the mouse over an item, set the highlight index to it,
-            // allowing further keyboard navigation to continute from this item
+            // allowing further keyboard navigation to continue from this item
             itemNode.addEventListener('mouseover', event => {
                 // Disabled items can't be highlighted and can't open submenus
                 if (!item._enabled) {
@@ -747,6 +746,21 @@ BMMenu.prototype = {
         });
     },
 
+    /**
+     * Temporarily set to the menu item that was selected until its action is performed.
+     */
+    _selectedMenuItem: undefined, // <BMMenuItem, nullable>
+
+    /**
+     * Performs the action for the specified menu item and invokes the delegate selection callback for it.
+     * @param item <BMMenuItem>         The menu item whose action should be performed.
+     */
+    _performActionForMenuItem(item) {
+        item.action?.(item);
+
+        this.delegate?.menuDidSelectItem?.(this, item);
+    },
+
     /**
      * The kind of menu currently displayed.
      */
@@ -899,8 +913,8 @@ BMMenu.prototype = {
         });
 
         if (!this._supermenu) {
-            // Make the container visible
-            __BMVelocityAnimate(menuContainer, {opacity: 1}, {duration, easing}, BMMENU_USE_WEB_ANIMATIONS);
+            // Make the container visible, using a different easing for the opacity so that it doesn't overshoot the 1 limit
+            __BMVelocityAnimate(menuContainer, {opacity: 1}, {duration: duration / 2, easing: 'easeOutQuad'}, BMMENU_USE_WEB_ANIMATIONS);
         }
         else {
             this._supermenu._node.classList.add('BMMenuInactive');
@@ -911,8 +925,9 @@ BMMenu.prototype = {
         itemsContainerNode.style.overflow = 'hidden';
         
         __BMVelocityAnimate(menuNode, {opacity: 1}, {
-            duration,
-            easing
+            duration: duration / 2,
+            // Use a different easing for the opacity so that it doesn't overshoot the 1 limit
+            easing: 'easeOutQuad',
         }, BMMENU_USE_WEB_ANIMATIONS);
 
         __BMVelocityAnimate(menuNode, {scaleX: 1, scaleY: 1, translateZ: 0, translateY: 0, translateX: 0}, {
@@ -921,7 +936,7 @@ BMMenu.prototype = {
             complete: _ => {
                 menuNode.style.pointerEvents = 'all';
                 menuContainer.style.pointerEvents = 'all';
-            }
+            },
         }, BMMENU_USE_WEB_ANIMATIONS);
 
         // Animate each child node in
@@ -1267,7 +1282,9 @@ BMMenu.prototype = {
             // If the mouse pointer enters the submenu's frame, cause it to acquire focus
             // and resume events
             if (submenuFrame.intersectsPoint(currentPosition)) {
-                submenu._node.focus();
+                if (submenu._node) {
+                    submenu._node.focus();
+                }
                 resumeEvents();
                 return;
             }
@@ -1380,11 +1397,27 @@ BMMenu.prototype = {
         let delay = Math.min(this._itemsContainerNode.childNodes.length * 16, 150);
         delay = (delay < 0 ? 0 : delay);
 
+        let selectedItemCallbackDelay = 0;
+
         // If an item was clicked, further delay closing to allow the selection animation to play
         const delaysClosing = this._delaysClosing;
         this._delaysClosing = NO;
         if (delaysClosing && !this._sourceNodeShadow) {
             delay += 200;
+
+            selectedItemCallbackDelay = 200;
+        }
+
+        const selectedMenuItem = this._selectedMenuItem;
+        this._selectedMenuItem = undefined;
+        
+        if (selectedMenuItem) {
+            if (this.delaysActions && selectedItemCallbackDelay) {
+                setTimeout(() => this._performActionForMenuItem(selectedMenuItem), selectedItemCallbackDelay);
+            }
+            else {
+                this._performActionForMenuItem(selectedMenuItem);
+            }
         }
 
         const sourceNodeShadow = this._sourceNodeShadow;
@@ -1547,6 +1580,7 @@ BMMenu.prototype = {
     },
 
     /**
+     * @protected
      * Invoked when the key sequence for a menu item is pressed.
      * @param event <KeyboardEvent>                         The event that triggered this action.
      * {
@@ -1598,11 +1632,7 @@ BMMenu.prototype = {
             // animation to play out
             this._delaysClosing = YES;
 
-            if (item.action) item.action(item);
-
-            if (this.delegate && this.delegate.menuDidSelectItem) {
-                this.delegate.menuDidSelectItem(this, item);
-            }
+            this._selectedMenuItem = item;
 
             const highlightedNode = item._node;
             if (highlightedNode) {

package/build/BMView/BMView_v2.5.js

@@ -11,6 +11,7 @@ import {BMViewport} from './BMViewport'
 import {BMLayoutAttribute, BMLayoutConstraintRelation, BMLayoutConstraint, BMLayoutConstraintPriorityRequired, BMLayoutConstraintKind} from './BMLayoutConstraint_v2.5'
 import * as kiwi from 'kiwi.js'
 import { BMKeyboardShortcutModifier } from '../BMWindow/BMKeyboardShortcut'
+import { BMDragSession } from './BMDragSession'
 
 
 // When set to YES, this will cause view to use transforms instead of left/right for positioning
@@ -2276,7 +2277,9 @@ BMView.prototype = BMExtend(BMView.prototype, {
 	 * @param shortcut <BMKeyboardShortcut>			The keyboard shortcut to register.
 	 */
 	registerKeyboardShortcut(shortcut) {
-		if (!Object.keys(this._keyboardShortcuts).length) this._enableKeyboardShortcuts();
+		if (!Object.keys(this._keyboardShortcuts).length) {
+            this._enableKeyboardShortcuts();
+        }
 
         if (!this._keyboardShortcuts[shortcut.keyCode]) {
             this._keyboardShortcuts[shortcut.keyCode] = [];
@@ -2306,7 +2309,9 @@ BMView.prototype = BMExtend(BMView.prototype, {
             }
         }
 
-		if (!Object.keys(this._keyboardShortcuts).length) this._disableKeyboardShortcuts();
+		if (!Object.keys(this._keyboardShortcuts).length) {
+            this._disableKeyboardShortcuts();
+        }
 	},
 
 	/**
@@ -2314,9 +2319,12 @@ BMView.prototype = BMExtend(BMView.prototype, {
 	 * and handle key presses. Subclasses that override this method should invoke the base implementation to allow
 	 * keyboard shortcuts to be handled correctly.
 	 * @param event <KeyboardEvent>			The event that triggered this action.
+     * @return <Boolean, nullable>          `YES` if a keyboard shortcut was handled, `NO` or `undefined` otherwise.
 	 */
 	keyPressedWithEvent(event) {
-        if (!this._keyboardShortcuts[event.code]) return;
+        if (!this._keyboardShortcuts[event.code]) return NO;
+
+        let shortcutHandled = NO;
 
 		// Check if a shortcut key has been pressed.
 		for (const shortcut of this._keyboardShortcuts[event.code]) {
@@ -2331,8 +2339,11 @@ BMView.prototype = BMExtend(BMView.prototype, {
 			if (bitmap == shortcut._modifierBitmap) {
 				if (shortcut.preventsDefault) event.preventDefault();
 				shortcut.target[shortcut.action](event, {forKeyboardShortcut: shortcut});
+                shortcutHandled = YES;
 			}
 		}
+
+        return shortcutHandled;
 	},
 
 	/**
@@ -2370,6 +2381,26 @@ BMView.prototype = BMExtend(BMView.prototype, {
 
     // #endregion
 
+    // #region Gestures
+
+    /**
+     * Initiates a drag session with the specified drag delegate from a touch or mouse event.
+     * @param event <MouseEvent or TouchEvent>      The event that triggered the drag gesture.
+     * {
+     *  @param delegate <BMDragDelegate>            The drag session delegate supplying items and
+     *                                              handling events for the session.
+     *  @param touchIdentifier <Number, nullable>   If the event is a touch event and this is specified,
+     *                                              it represents the identifier of the touch point that
+     *                                              will be tracked throughout the drag session. If not
+     *                                              specified, the first changed touch will be used.
+     * }
+     */
+    performDragWithEvent(event, {delegate, touchIdentifier}) {
+        BMDragSession._beginDragWithEvent(event, {dragDelegate: delegate, view: this, touchIdentifier});
+    },
+
+    // #endregion
+
     // #region Constraints and Cassowary Variables
 
 

package/build/BMWindow/BMPopover/BMPopover.js

@@ -1127,12 +1127,16 @@ BMPopover.prototype = BMExtend(Object.create(BMWindow.prototype), {
         }
 
         if (!this._isDetached) {
+            const popoverLayers = [this.contentNode, this._background, this._dropShadowContainer];
+
             // If not detached, apply a displacement to this popover that is half of the regular
             // drag distance, until this popover is fully detached
-            BMHook(this.node, {
-                translateX: `${(toPosition.x - this._initialDragPosition.x) / 3 | 0}px`,
-                translateY: `${(toPosition.y - this._initialDragPosition.y) / 3 | 0}px`,
-            });
+            for (const node of popoverLayers) {
+                BMHook(node, {
+                    translateX: `${(toPosition.x - this._initialDragPosition.x) / 3 | 0}px`,
+                    translateY: `${(toPosition.y - this._initialDragPosition.y) / 3 | 0}px`,
+                });
+            }
 
             const distance = toPosition.distanceToPoint(this._initialDragPosition);
             if (distance > BMPopoverDragThreshold) {
@@ -1158,11 +1162,15 @@ BMPopover.prototype = BMExtend(Object.create(BMWindow.prototype), {
             // If the drag operation didn't cause this popover to detach, animate it back to its
             // regular position
             BMAnimateWithBlock(() => {
-                const controller = BMAnimationContextGetCurrent().controllerForObject(this, {node: this.node});
-                controller.registerBuiltInPropertiesWithDictionary({
-                    translateX: '0px',
-                    translateY: '0px',
-                });
+                const popoverLayers = [this.contentNode, this._background, this._dropShadowContainer];
+
+                for (const node of popoverLayers) {
+                    const controller = BMAnimationContextGetCurrent().controllerForObject(node, {node});
+                    controller.registerBuiltInPropertiesWithDictionary({
+                        translateX: '0px',
+                        translateY: '0px',
+                    });
+                }
             }, {duration: 500, easing: 'easeInOutQuart'});
         }
 
@@ -1194,19 +1202,24 @@ BMPopover.prototype = BMExtend(Object.create(BMWindow.prototype), {
 
         let promise;
 
+        const popoverLayers = [this.contentNode, this._background, this._dropShadowContainer];
+
         // If a temporary transform was applied to this node, clear it
-        if (BMAnimationContextGetCurrent()) {
-            const controller = BMAnimationContextGetCurrent().controllerForObject(this, {node: this.node});
-            controller.registerBuiltInPropertiesWithDictionary({
-                translateX: '0px',
-                translateY: '0px',
-            });
+        for (const node of popoverLayers) {
+            if (BMAnimationContextGetCurrent()) {
+                const controller = BMAnimationContextGetCurrent().controllerForObject(node, {node});
+                controller.registerBuiltInPropertiesWithDictionary({
+                    translateX: '0px',
+                    translateY: '0px',
+                });
 
-            promise = new Promise(r => BMAnimationContextAddCompletionHandler(r));
-        }
-        else {
-            BMHook(this.node, {translateX: '0px', translateY: '0px'});
+                promise = new Promise(r => BMAnimationContextAddCompletionHandler(r));
+            }
+            else {
+                BMHook(node, {translateX: '0px', translateY: '0px'});
+            }
         }
+        
 
         if (animationContextStarted) {
             BMAnimationApplyBlocking(YES);
@@ -1229,7 +1242,9 @@ BMPopover.prototype = BMExtend(Object.create(BMWindow.prototype), {
         for (const layer of popoverLayers) {
             BMHook(layer, {scaleX: .75, scaleY: .75, opacity: 0});
 
-            __BMVelocityAnimate(layer, {scaleX: 1, scaleY: 1, opacity: 1}, {duration: 300, easing: [0,1.59,.49,1], complete: first ? completionHandler : undefined}, YES);
+            __BMVelocityAnimate(layer, {scaleX: 1, scaleY: 1, opacity: 1}, {duration: 300, easing: [0,1.59,.49,1], complete: first ? completionHandler : undefined}, YES)?.then(() => {
+                BMHook(layer, {scaleX: 1, scaleY: 1, opacity: 1});
+            });
             first = NO;
         }
     },

package/build/BMWindow/BMToolWindow.js

@@ -1,5 +1,6 @@
 // @ts-check
 
+import { BMView } from '../BMView/BMView_v2.5';
 import {YES, NO, BMExtend} from '../Core/BMCoreUI'
 import {BMWindow} from './BMWindow'
 
@@ -25,6 +26,11 @@ BMToolWindow.prototype = BMExtend(Object.create(BMWindow.prototype), {
 	 */
 	opensAutomatically: YES, // <Boolean>
 
+	/**
+	 * The window to which this tool window is associated.
+	 */
+	_parentWindow: undefined, // <BMWindow>
+
 	/**
 	 * Initializes this tool window with the given frame and associates it with the given window.
 	 * @param frame <BMRect>		The window's frame.
@@ -41,8 +47,14 @@ BMToolWindow.prototype = BMExtend(Object.create(BMWindow.prototype), {
 		this.node.classList.add('BMToolWindow');
 		window._toolWindows.push(this);
 
+		this._parentWindow = window;
+
 		// If the window is the key window, make this tool window visible
-		if (BMWindow._keyWindow == window) this.bringToFrontAnimated(YES);
+		if (BMWindow._keyWindow == window) {
+			this.bringToFrontAnimated(YES);
+		}
+
+		this._enableKeyboardShortcuts();
 
 		return this;
 	},
@@ -53,6 +65,22 @@ BMToolWindow.prototype = BMExtend(Object.create(BMWindow.prototype), {
 
 	resignKeyWindow() {
 		// This operation is a no-op for tool windows
+	},
+
+	keyPressedWithEvent(event, args) {
+		const handled = BMView.prototype.keyPressedWithEvent.apply(this, [event, args]);
+
+		if (!handled) {
+			this._parentWindow?.keyPressedWithEvent(event, args);
+		}
+	},
+
+	release() {
+		const index = this._parentWindow._toolWindows.indexOf(this);
+		if (index != -1) {
+			this._parentWindow._toolWindows.splice(index, -1);
+		}
+		BMWindow.prototype.release.call(this);
 	}
 });