bm-core-ui 2.12.0-beta.14 → 2.12.0-beta.16

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

@@ -9992,7 +9992,7 @@ export class BMMenu {
 	 * The menu items displayed by this menu.
 	 *     
 	 */
-	readonly items: BMMenuItem[];
+	items: BMMenuItem[];
 
 	/**
 	 * An optional delegate object that will receive callbacks events from this menu.
@@ -10076,7 +10076,7 @@ export class BMMenu {
 	 * The menu that opened this menu, if any.
 	 *     
 	 */
-	private _supermenu?: BMMenu | null | undefined;
+	readonly supermenu?: BMMenu | null | undefined;
 
 	/**
 	 * The menu's frame, relative to the viewport, available while this menu is visible.

package/build/BMCollectionView/BMCollectionView.js

@@ -6059,14 +6059,18 @@ BMCollectionView.prototype = BMExtend(BM_COLLECTION_VIEW_USE_BMVIEW_SUBCLASS ? O
 		
 		// If this update occurs because of a drag & drop operation, try to obtain the associated index paths from the data set
 		let dropPreviewMap;
+		/** @type {Map} */
+		let dropPreviewReverseMap;
 		if (this._dropPreviews && this.dataSet.indexPathForDragItem) {
 			dropPreviewMap = new Map();
+			dropPreviewReverseMap = new Map();
 
 			for (const preview of this._dropPreviews) {
 				const indexPath = this.dataSet.indexPathForDragItem(preview.item);
 
 				if (indexPath) {
 					dropPreviewMap.set(indexPath, preview);
+					dropPreviewReverseMap.set(preview, indexPath);
 				}
 			}
 		}
@@ -6464,6 +6468,18 @@ BMCollectionView.prototype = BMExtend(BM_COLLECTION_VIEW_USE_BMVIEW_SUBCLASS ? O
 				for (const cell of insertedCells) {
 					cell._dropPreview.performDropToNode(cell.node);
 
+					// Handle the cases where multiple drop previews target this cell
+					for (const [preview, indexPath] of dropPreviewReverseMap.entries()) {
+					    if (indexPath.isLooselyEqualToIndexPath(cell.indexPath, {usingComparator: self.identityComparator}) && preview != cell._dropPreview) {
+							preview.performDropToNode(cell.node);
+           					const index = self._dropPreviews.indexOf(cell._dropPreview);
+
+           					if (index != -1) {
+          						self._dropPreviews.splice(index, 1);
+           					}
+						}
+					}
+
 					const index = self._dropPreviews.indexOf(cell._dropPreview);
 
 					if (index != -1) {
@@ -6486,6 +6502,19 @@ BMCollectionView.prototype = BMExtend(BM_COLLECTION_VIEW_USE_BMVIEW_SUBCLASS ? O
 					// Play all drop animations
 					for (const cell of dropMovingCells) {
 						cell._dropPreview.performDropToNode(cell.node);
+
+    					// Handle the cases where multiple drop previews target this cell
+    					for (const [preview, indexPath] of dropPreviewReverseMap.entries()) {
+    					    if (indexPath.isLooselyEqualToIndexPath(cell.indexPath, {usingComparator: self.identityComparator}) && preview != cell._dropPreview) {
+    							preview.performDropToNode(cell.node);
+               					const index = self._dropPreviews.indexOf(cell._dropPreview);
+    
+               					if (index != -1) {
+              						self._dropPreviews.splice(index, 1);
+               					}
+    						}
+    					}
+						
 						const index = self._dropPreviews.indexOf(cell._dropPreview);
 
 						if (index != -1) {
@@ -7368,4 +7397,4 @@ class BMCollectionViewDataSetAdapter {
 	}
 }
 
-// #endregion
+// #endregion

package/build/BMCoreUI.css

@@ -1346,6 +1346,19 @@ input:not(:checked) + .BMWindowSwitchGutter > .BMWindowSwitchKnob, .BMWindowSwit
 	z-index: 9999999;
 }
 
+/* A class that is temporarily added to the menu container to allow the user
+   to move over menu items without triggering them while moving torwards the submenu;
+   additionally, this causes the `mouseenter` event to trigger when this class is removed */
+.BMMenuContainer.BMMenuContainerSubmenuActive > * {
+	pointer-events: none !important;
+}
+
+/* This allows clicking on an item with a submenu during the event delaying period
+after a submenu has just been opened */
+.BMMenuContainer.BMMenuContainerSubmenuActive .BMMenuItemHighlighted {
+    pointer-events: all !important;
+}
+
 .BMMenuContainerFullScreen {
 	background-color: rgba(0, 0, 0, .33);
 }

package/build/BMView/BMMenu.js

@@ -406,6 +406,42 @@ BMMenu.prototype = {
     get items() {
         return this._items.slice();
     },
+    set items(items) {
+        this._items = items.slice();
+
+        // If this menu was already open when items are updated, destroy
+        // and re-render it
+        if (this._node) {
+            if (this._supermenu) {
+                this._node.remove();
+            }
+            else {
+                this._containerNode.remove();
+            }
+            
+            this._renderMenu();
+
+            if (!this._supermenu) {
+                document.body.appendChild(this._containerNode);
+            }
+            
+            this._setAnchorRect(this._rect);
+
+            // Restore the highlighted menu item
+            if (this._highlightedIndex != -1) {
+                const item = this._items[this._highlightedIndex];
+                if (item && !item._isSeparator && item._enabled) {
+                    const index = this._highlightedIndex;
+                    this._highlightedIndex = -1;
+                    this.highlightedIndex = index;
+                }
+            }
+
+            for (const node of this._itemsContainerNode.children) {
+                BMHook(node, {opacity: 1, translateY: '0px'});
+            }
+        }
+    },
 
     /**
      * An optional delegate object that will receive callbacks events from this menu.
@@ -519,6 +555,9 @@ BMMenu.prototype = {
      * The menu that opened this menu, if any.
      */
     _supermenu: undefined, // <BMMenu, nullable>
+    get supermenu() {
+        return this._supermenu;
+    },
 
     /**
      * The menu's frame, relative to the viewport, available while this menu is visible.
@@ -1458,9 +1497,6 @@ BMMenu.prototype = {
         let topPoint;
         let bottomPoint;
 
-        // Determines whether the slope needs to be between the min and max slopes or outside their range
-        let flipSlopes = false;
-
         const eventTarget = this._containerNode;
         // Immediately block interactions with menu elements
         this._delaysEvents = YES;
@@ -1478,7 +1514,7 @@ BMMenu.prototype = {
             this._delaysEvents = NO;
 
             // Remove the mousemove event handler
-            eventTarget.removeEventListener(mouseMoveEvent, handler, {capture: YES});
+            window.removeEventListener(mouseMoveEvent, handler, {capture: YES});
 
             // Allow pointer interaction with the menu nodes
             eventTarget.classList.remove('BMMenuContainerSubmenuActive');
@@ -1511,14 +1547,6 @@ BMMenu.prototype = {
                                     BMPointMake(submenuFrame.origin.x, submenuFrame.bottom) :
                                     BMPointMake(submenuFrame.right, submenuFrame.bottom);
 
-                if (submenuFrame.origin.x < lastPosition.x) {
-                    // When the menu appears to the left, the min and max slopes need to be
-                    // flipped, because the "interior" of the slopes is counted clockwise
-                    // from the bottom slope to the top one, but on the left side
-                    // the interior needs to be counted counter-clockwise
-                    flipSlopes = true;
-                }
-
                 return;
             }
 
@@ -1563,20 +1591,39 @@ BMMenu.prototype = {
             const topSlope = currentPosition.slopeAngleToPoint(topPoint);
             const bottomSlope = currentPosition.slopeAngleToPoint(bottomPoint);
 
+            // Normalizes the specified angle so that it's within the [0, 2Pi] range
+            function normalizeAngle(angle) {
+                // Coerce angle into [-2Pi, 2Pi]
+                angle %= 2 * Math.PI;
+
+                // Coerce the result into a positive angle
+                return angle < 0 ? angle + 2 * Math.PI : angle;
+            }
+
             // Get the slope angle for the current movement, which indicates the direction
             // in which the pointer moves
-            const currentSlope = lastPosition.slopeAngleToPoint(currentPosition);
+            const currentSlope = normalizeAngle(lastPosition.slopeAngleToPoint(currentPosition));
 
-            const minSlope = Math.min(topSlope, bottomSlope);
-            const maxSlope = Math.max(topSlope, bottomSlope);
+            const minSlope = normalizeAngle(bottomSlope - topSlope);
+            const maxSlope = normalizeAngle(topSlope - bottomSlope);
 
+            // Determine which is the starting and ending slopes and normalize them
+            let startSlope, endSlope;
+            if (minSlope <= maxSlope) {
+                startSlope = normalizeAngle(topSlope);
+                endSlope = normalizeAngle(bottomSlope);
+            }
+            else {
+                startSlope = normalizeAngle(bottomSlope);
+                endSlope = normalizeAngle(topSlope);
+            }
+            
             // If the mouse moves away from the submenu, resume events
             // The pointer is considered to be moving towards the menu if the slope angle
             // of the line formed between the current and previous mouse positions
             // is between these two slope angles
-            let isOutsideSlopeRange = flipSlopes ?
-                currentSlope > minSlope && currentSlope < maxSlope :
-                currentSlope < minSlope || currentSlope > maxSlope;
+            // This is done by rotating the end and current slope by the start slope and checking which is larger
+            const isOutsideSlopeRange = normalizeAngle(currentSlope - startSlope) >= normalizeAngle(endSlope - startSlope);
 
             if (isOutsideSlopeRange) {
                 resumeEvents();
@@ -1587,7 +1634,7 @@ BMMenu.prototype = {
             lastPosition = currentPosition;
         };
 
-        eventTarget.addEventListener(mouseMoveEvent, handler, {capture: YES});
+        window.addEventListener(mouseMoveEvent, handler, {capture: YES});
     },
 
     /**
@@ -1603,6 +1650,14 @@ BMMenu.prototype = {
     closeAnimated(animated = YES, {withSupermenu = NO} = {}) {
         // If the menu isn't visible this action has no effect.
         if (!this._node) return;
+        
+        const sourceNodeShadow = this._sourceNodeShadow;
+        const containerNode = this._containerNode;
+        const node = this._node;
+        const itemsContainerNode = this._itemsContainerNode;
+        const sourceNode = this._sourceNode;
+
+        this._node = undefined;
 
         this._containerNode.removeEventListener('keydown', this, {passive: true});
         this._containerNode.removeEventListener('keyup', this, {passive: true});
@@ -1647,8 +1702,8 @@ BMMenu.prototype = {
         }
 
         // Prevent interaction with the menu while its close animation is running
-        this._node.style.pointerEvents = 'none';
-        // this._node.inert = true;
+        node.style.pointerEvents = 'none';
+        // node.inert = true;
 
         if (!supermenu) {
             this._containerNode.style.pointerEvents = 'none';
@@ -1685,12 +1740,6 @@ BMMenu.prototype = {
             }
         }
 
-        const sourceNodeShadow = this._sourceNodeShadow;
-        const containerNode = this._containerNode;
-        const node = this._node;
-        const itemsContainerNode = this._itemsContainerNode;
-        const sourceNode = this._sourceNode;
-
         this._sourceNode = undefined;
         this._sourceNodeShadow = undefined;
 
@@ -1721,7 +1770,7 @@ BMMenu.prototype = {
 
         itemsContainerNode.style.overflow = 'hidden';
 
-        __BMVelocityAnimate(this._node, {
+        __BMVelocityAnimate(node, {
             scaleX: this._kind == BMMenuKind.PullDownMenu ? 1 : scale,
             scaleY: scale,
             opacity: (sourceNodeShadow && !supermenu) ? 1 : 0,

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

@@ -9992,7 +9992,7 @@ declare class BMMenu {
 	 * The menu items displayed by this menu.
 	 *     
 	 */
-	readonly items: BMMenuItem[];
+	items: BMMenuItem[];
 
 	/**
 	 * An optional delegate object that will receive callbacks events from this menu.
@@ -10076,7 +10076,7 @@ declare class BMMenu {
 	 * The menu that opened this menu, if any.
 	 *     
 	 */
-	private _supermenu?: BMMenu | null | undefined;
+	readonly supermenu?: BMMenu | null | undefined;
 
 	/**
 	 * The menu's frame, relative to the viewport, available while this menu is visible.