bm-core-ui 2.12.0-beta.4 → 2.12.0-beta.6

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

@@ -5846,6 +5846,14 @@ export class BMDragSession implements EventHandlerObject {
 	private _beginDrag(): void;
 
 
+	/**
+	 * Invoked when a key is pressed while this drag session is in progress.
+	 * @param event          The event.
+	 *     
+	 */
+	private _keyPressedWithEvent(event: KeyboardEvent): void;
+
+
 	/**
 	 * Invoked whenever the pointer moves while this drag session is in progress.
 	 * @param event        The event.
@@ -5856,11 +5864,11 @@ export class BMDragSession implements EventHandlerObject {
 
 	/**
 	 * Invoked when the pointer is released or cancelled while this drag session is in progress.
-	 * @param event       The event.
-	 * @return                       A promise that resolves when all associated animations finish.
+	 * @param event  The event.
+	 * @return                                   A promise that resolves when all associated animations finish.
 	 *     
 	 */
-	private _dragDidFinishWithEvent(event: MouseEvent | TouchEvent): Promise<void>;
+	private _dragDidFinishWithEvent(event: MouseEvent | TouchEvent | KeyboardEvent): Promise<void>;
 
 
 	/**
@@ -6313,7 +6321,7 @@ export interface BMDropDelegate {
 	 *                                          if the current action should be retained.
 	 *     
 	 */
-	dropSessionDidUpdate?(session: BMDropSession): BMDragSessionAction | null | undefined;
+	dropSessionDidUpdate?(session: BMDropSession): BMDropSessionAction | null | undefined;
 
 
 	/**
@@ -6326,7 +6334,7 @@ export interface BMDropDelegate {
 
 
 	/**
-	 * Invoked to notify the delegate that the specified drop session is about to finish. This is invoked for drop
+	 * Invoked to notify the delegate that the specified drop session is about to finish. This is invoked for a drop
 	 * delegate that has returned `YES` from `dropSessionCanBegin` regardless of whether the drop finished
 	 * in the target view's frame or not.
 	 * @param session            The drop session that ended.
@@ -6336,7 +6344,7 @@ export interface BMDropDelegate {
 
 
 	/**
-	 * Invoked to notify the delegate that the specified drop session has finished. This is invoked for drop
+	 * Invoked to notify the delegate that the specified drop session has finished. This is invoked for a drop
 	 * delegate that has returned `YES` from `dropSessionCanBegin` regardless of whether the drop finished
 	 * in the target view's frame or not.
 	 * @param session            The drop session that ended.
@@ -7036,6 +7044,13 @@ export class _BMDragIndicator {
  */
 export class _BMDragPreviewSet {
 
+	/**
+	 * The offset between the drag pointer and the center the from of the view from which the drag session
+	 * started, expressed in percentages relative to the view's frame.
+	 *     
+	 */
+	private _offsetPercent: BMPoint;
+
 	/**
 	 * The offset between the drag pointer and the center of the frames of the preview elements.
 	 *     
@@ -7082,7 +7097,8 @@ export class _BMDragPreviewSet {
 	 * Initializes this drag preview set with the specified item previews and offset position.
 	 * @param previews             The previews for items in the drag session.
 	 * @param pointerOffset               The offset between the drag pointer and the
-	 *                                              center of the frames of the preview elements.
+	 *                                              center of the frames of the view from which the
+	 *                                              drag session started.
 	 * @return                   This preview set.
 	 *     
 	 */
@@ -9975,6 +9991,13 @@ export class BMMenu {
 	 */
 	_delaysClosing: boolean;
 
+	/**
+	 * 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: 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.
@@ -10011,6 +10034,20 @@ export class BMMenu {
 	private _renderMenuItems(): void;
 
 
+	/**
+	 * Temporarily set to the menu item that was selected until its action is performed.
+	 *     
+	 */
+	private _selectedMenuItem?: BMMenuItem | null | undefined;
+
+	/**
+	 * Performs the action for the specified menu item and invokes the delegate selection callback for it.
+	 * @param item          The menu item whose action should be performed.
+	 *     
+	 */
+	private _performActionForMenuItem(item: BMMenuItem): void;
+
+
 	/**
 	 * The kind of menu currently displayed.
 	 *     
@@ -13039,7 +13076,7 @@ export class BMCollectionViewScrollingDirection {
 }
 
 /**
- * Controls the final horizontal scrolling position of a programatic scroll.
+ * Controls the final horizontal scrolling position of a programmatic scroll.
  * 
  */
 export class BMCollectionViewScrollingGravityHorizontal {
@@ -13065,7 +13102,7 @@ export class BMCollectionViewScrollingGravityHorizontal {
 }
 
 /**
- * Controls the final vertical scrolling position of a programatic scroll.
+ * Controls the final vertical scrolling position of a programmatic scroll.
  * 
  */
 export class BMCollectionViewScrollingGravityVertical {
@@ -13116,7 +13153,7 @@ export class BMCollectionViewScrollingGravityVertical {
  * 
  * 
  */
-export class BMCollectionView<T = any> extends BMView {
+export class BMCollectionView<T = any> extends BMView implements BMDragDelegate, BMDropDelegate {
 
 	/**
 	 * The last measured intrinsic size for this collection view.

package/build/BMCollectionView/BMCollectionView.js

@@ -217,7 +217,7 @@ export var BMCollectionViewScrollingDirection = Object.freeze({ // <enum>
 // @type BMCollectionViewScrollingGravityHorizontal
 
 /**
- * Controls the final horizontal scrolling position of a programatic scroll.
+ * Controls the final horizontal scrolling position of a programmatic scroll.
  */
 export var BMCollectionViewScrollingGravityHorizontal = Object.freeze({ // <enum>
 	/**
@@ -241,7 +241,7 @@ export var BMCollectionViewScrollingGravityHorizontal = Object.freeze({ // <enum
 // @type BMCollectionViewScrollingGravityVertical
 
 /**
- * Controls the final vertical scrolling position of a programatic scroll.
+ * Controls the final vertical scrolling position of a programmatic scroll.
  */
 export var BMCollectionViewScrollingGravityVertical = Object.freeze({ // <enum>
 	/**
@@ -262,7 +262,7 @@ export var BMCollectionViewScrollingGravityVertical = Object.freeze({ // <enum>
 
 // @endtype
 
-// @type BMCollectionView<T = any> extends BMView
+// @type BMCollectionView<T = any> extends BMView implements BMDragDelegate, BMDropDelegate
 
 // Contains all active collection view instances
 var _BMCollectionViews = new Map;

package/build/BMView/BMDragSession.js

@@ -435,7 +435,10 @@ BMDragSession.prototype = {
         if (firstItemPreview._sourceNode) {
             const sourceNodeFrame = BMRectMakeWithNodeFrame(firstItemPreview._sourceNode);
             const center = sourceNodeFrame.center;
-            pointerOffset = BMPointMake(center.x - this._position.x, center.y - this._position.y);
+            pointerOffset = BMPointMake(
+                (center.x - this._position.x) / sourceNodeFrame.size.width,
+                (center.y - this._position.y) / sourceNodeFrame.size.height,
+            );
         }
 
         // Obtain the drag previews for the remaining items
@@ -468,10 +471,16 @@ BMDragSession.prototype = {
         if (this._touchIdentifier !== undefined) {
             window.addEventListener('touchcancel', this, {capture: YES, passive: NO});
         }
+
+        // Register a key press event that will cancel the drag when escape is pressed
+        window.addEventListener('keydown', this, {capture: YES, passive: NO});
     },
 
-    handleEvent(/** @type {MouseEvent | TouchEvent} */ event) {
-        if (event.type == 'mousemove' || event.type == 'touchmove') {
+    handleEvent(/** @type {MouseEvent | TouchEvent | KeyboardEvent} */ event) {
+        if (event.type == 'keydown') {
+            this._keyPressedWithEvent(event);
+        }
+        else if (event.type == 'mousemove' || event.type == 'touchmove') {
             this._dragDidMoveWithEvent(event);
         }
         else {
@@ -479,6 +488,26 @@ BMDragSession.prototype = {
         }
     },
 
+    /**
+     * Invoked when a key is pressed while this drag session is in progress.
+     * @param event <KeyboardEvent>         The event.
+     */
+    _keyPressedWithEvent(event) {
+        // Cancel the drag session when pressing escape or command + .
+        if (event.code != 'Escape' && (event.code != 'Period' || !event.metaKey)) {
+            return;
+        }
+
+        // Clear any drop target, set the drop action to ignore and immediately finish the session
+        event.stopPropagation();
+        event.preventDefault();
+        this._setDropTarget(undefined);
+        this._sourceDropAction = BMDragSessionAction.actionWithKind(BMDragSessionActionKind.Ignore);
+        this._updateDropAction();
+
+        this._dragDidFinishWithEvent();
+    },
+
     /** 
      * Invoked whenever the pointer moves while this drag session is in progress.
      * @param event <MouseEvent or TouchEvent>       The event.
@@ -551,8 +580,8 @@ BMDragSession.prototype = {
 
     /**
      * Invoked when the pointer is released or cancelled while this drag session is in progress.
-     * @param event <MouseEvent or TouchEvent>      The event.
-     * @return <Promise<void>>                      A promise that resolves when all associated animations finish.
+     * @param event <MouseEvent or TouchEvent or KeyboardEvent> The event.
+     * @return <Promise<void>>                                  A promise that resolves when all associated animations finish.
      */
     async _dragDidFinishWithEvent(event) {
         event.preventDefault();
@@ -575,6 +604,7 @@ BMDragSession.prototype = {
         if (this._touchIdentifier !== undefined) {
             window.removeEventListener('touchcancel', this, {capture: YES, passive: NO});
         }
+        window.removeEventListener('keydown', this, {capture: YES, passive: NO});
         this._releaseDropTargetHandlers();
 
         // If there is a drop target and its action is not ignore, instruct the delegate to perform the action
@@ -666,6 +696,11 @@ BMDragSession.prototype = {
                 const requiresDropPreviews = this._delegate.dragSessionRequiresCustomDropAnimationForItems?.(this, items.slice());
 
                 if (requiresDropPreviews) {
+                    this._dropPreviews = this._previewSet._dragPreviews.entries().map(([i, dragPreview]) => {
+                        dragPreview._dropHandled = YES;
+                        return new BMDropPreview()._initWithDragPreview(dragPreview, {forItem: i});
+                    });
+
                     this._delegate.dragSessionAnimateDropWithPreviews?.(this, this._dropPreviews);
                 }
             }

package/build/BMView/BMDragSessionPreview.js

@@ -830,6 +830,7 @@ BMDropPreview.prototype = {
             translateX: `${-transformRect.origin.x + (this.transform.translateX ?? 0)}px`,
             translateY: `${-transformRect.origin.y + (this.transform.translateY ?? 0)}px`,
             rotateZ: `${this.transform.rotateZ ?? 0}deg`,
+            opacity: 0,
         });
         targetController.registerBuiltInPropertiesWithDictionary({
             scaleX: [1, 1 / transformRect.size.width],
@@ -842,6 +843,7 @@ BMDropPreview.prototype = {
 
         BMAnimationContextAddCompletionHandler(() => {
             nodeCopy.remove();
+            this.previewNode.remove();
         });
     },
 
@@ -1197,6 +1199,12 @@ export function _BMDragPreviewSet() {} // <constructor>
 
 _BMDragPreviewSet.prototype = {
 
+    /**
+     * The offset between the drag pointer and the center the from of the view from which the drag session
+     * started, expressed in percentages relative to the view's frame.
+     */
+    _offsetPercent: BMPointMake(), // <BMPoint>
+
     /**
      * The offset between the drag pointer and the center of the frames of the preview elements.
      */
@@ -1237,7 +1245,8 @@ _BMDragPreviewSet.prototype = {
      * @param previews <[BMDragPreview]>            The previews for items in the drag session.
      * {
      *  @param pointerOffset <BMPoint>              The offset between the drag pointer and the
-     *                                              center of the frames of the preview elements.
+     *                                              center of the frames of the view from which the
+     *                                              drag session started.
      * }
      * @return <_BMDragPreviewSet>                  This preview set.
      */
@@ -1252,7 +1261,7 @@ _BMDragPreviewSet.prototype = {
             this._baseDragPreviews.set(preview._dragItem, preview);
         }
 
-        this._offset = pointerOffset.copy();
+        this._offsetPercent = pointerOffset.copy();
 
         this._dragIndicator = new _BMDragIndicator().init();
 
@@ -1363,6 +1372,21 @@ _BMDragPreviewSet.prototype = {
      * @param position <BMPoint>        The position of the drag session.
      */
     beginLiftAtPosition(position) {
+        const firstPreview = this._dragPreviews.entries().next().value?.[1];
+        const measureIterator = firstPreview?._attachAtPosition(BMPointMake());
+        let measureIteratorResult = measureIterator.next();
+        while (!measureIteratorResult.done) {
+            measureIteratorResult = measureIterator.next();
+        }
+
+        this._offset = BMPointMake(
+            this._offsetPercent.x * (firstPreview?._frame.size.width ?? 0),
+            this._offsetPercent.y * (firstPreview?._frame.size.height ?? 0),
+        );
+
+        firstPreview._detach();
+        firstPreview._measured = NO;
+
         this._position = position.copy();
         const previewPosition = position.copy();
         previewPosition.x += this._offset.x;
@@ -1371,7 +1395,6 @@ _BMDragPreviewSet.prototype = {
         // Attach and measure the previews
         let attachIterators = [];
         let previousPreview;
-        let firstPreview;
         for (const [item, preview] of this._dragPreviews.entries()) {
 
             // For each preview other than the first, apply a random rotation between 15 and -15 degrees
@@ -1379,10 +1402,6 @@ _BMDragPreviewSet.prototype = {
                 preview._transform.rotateZ = Math.random() * _BMDragPreviewMaxRotation * 2 - _BMDragPreviewMaxRotation;
             }
 
-            if (!firstPreview) {
-                firstPreview = preview;
-            }
-
             const attachIterator = preview._attachAtPosition(previewPosition, {before: previousPreview?._previewNode});
             attachIterators.push(attachIterator);
             attachIterator.next();

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.
      */
@@ -1380,11 +1394,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;
@@ -1598,11 +1628,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/lib/@types/BMCoreUI.min.d.ts

@@ -5846,6 +5846,14 @@ declare class BMDragSession implements EventHandlerObject {
 	private _beginDrag(): void;
 
 
+	/**
+	 * Invoked when a key is pressed while this drag session is in progress.
+	 * @param event          The event.
+	 *     
+	 */
+	private _keyPressedWithEvent(event: KeyboardEvent): void;
+
+
 	/**
 	 * Invoked whenever the pointer moves while this drag session is in progress.
 	 * @param event        The event.
@@ -5856,11 +5864,11 @@ declare class BMDragSession implements EventHandlerObject {
 
 	/**
 	 * Invoked when the pointer is released or cancelled while this drag session is in progress.
-	 * @param event       The event.
-	 * @return                       A promise that resolves when all associated animations finish.
+	 * @param event  The event.
+	 * @return                                   A promise that resolves when all associated animations finish.
 	 *     
 	 */
-	private _dragDidFinishWithEvent(event: MouseEvent | TouchEvent): Promise<void>;
+	private _dragDidFinishWithEvent(event: MouseEvent | TouchEvent | KeyboardEvent): Promise<void>;
 
 
 	/**
@@ -6313,7 +6321,7 @@ declare interface BMDropDelegate {
 	 *                                          if the current action should be retained.
 	 *     
 	 */
-	dropSessionDidUpdate?(session: BMDropSession): BMDragSessionAction | null | undefined;
+	dropSessionDidUpdate?(session: BMDropSession): BMDropSessionAction | null | undefined;
 
 
 	/**
@@ -6326,7 +6334,7 @@ declare interface BMDropDelegate {
 
 
 	/**
-	 * Invoked to notify the delegate that the specified drop session is about to finish. This is invoked for drop
+	 * Invoked to notify the delegate that the specified drop session is about to finish. This is invoked for a drop
 	 * delegate that has returned `YES` from `dropSessionCanBegin` regardless of whether the drop finished
 	 * in the target view's frame or not.
 	 * @param session            The drop session that ended.
@@ -6336,7 +6344,7 @@ declare interface BMDropDelegate {
 
 
 	/**
-	 * Invoked to notify the delegate that the specified drop session has finished. This is invoked for drop
+	 * Invoked to notify the delegate that the specified drop session has finished. This is invoked for a drop
 	 * delegate that has returned `YES` from `dropSessionCanBegin` regardless of whether the drop finished
 	 * in the target view's frame or not.
 	 * @param session            The drop session that ended.
@@ -7036,6 +7044,13 @@ declare class _BMDragIndicator {
  */
 declare class _BMDragPreviewSet {
 
+	/**
+	 * The offset between the drag pointer and the center the from of the view from which the drag session
+	 * started, expressed in percentages relative to the view's frame.
+	 *     
+	 */
+	private _offsetPercent: BMPoint;
+
 	/**
 	 * The offset between the drag pointer and the center of the frames of the preview elements.
 	 *     
@@ -7082,7 +7097,8 @@ declare class _BMDragPreviewSet {
 	 * Initializes this drag preview set with the specified item previews and offset position.
 	 * @param previews             The previews for items in the drag session.
 	 * @param pointerOffset               The offset between the drag pointer and the
-	 *                                              center of the frames of the preview elements.
+	 *                                              center of the frames of the view from which the
+	 *                                              drag session started.
 	 * @return                   This preview set.
 	 *     
 	 */
@@ -9975,6 +9991,13 @@ declare class BMMenu {
 	 */
 	_delaysClosing: boolean;
 
+	/**
+	 * 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: 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.
@@ -10011,6 +10034,20 @@ declare class BMMenu {
 	private _renderMenuItems(): void;
 
 
+	/**
+	 * Temporarily set to the menu item that was selected until its action is performed.
+	 *     
+	 */
+	private _selectedMenuItem?: BMMenuItem | null | undefined;
+
+	/**
+	 * Performs the action for the specified menu item and invokes the delegate selection callback for it.
+	 * @param item          The menu item whose action should be performed.
+	 *     
+	 */
+	private _performActionForMenuItem(item: BMMenuItem): void;
+
+
 	/**
 	 * The kind of menu currently displayed.
 	 *     
@@ -13039,7 +13076,7 @@ declare class BMCollectionViewScrollingDirection {
 }
 
 /**
- * Controls the final horizontal scrolling position of a programatic scroll.
+ * Controls the final horizontal scrolling position of a programmatic scroll.
  * 
  */
 declare class BMCollectionViewScrollingGravityHorizontal {
@@ -13065,7 +13102,7 @@ declare class BMCollectionViewScrollingGravityHorizontal {
 }
 
 /**
- * Controls the final vertical scrolling position of a programatic scroll.
+ * Controls the final vertical scrolling position of a programmatic scroll.
  * 
  */
 declare class BMCollectionViewScrollingGravityVertical {
@@ -13116,7 +13153,7 @@ declare class BMCollectionViewScrollingGravityVertical {
  * 
  * 
  */
-declare class BMCollectionView<T = any> extends BMView {
+declare class BMCollectionView<T = any> extends BMView implements BMDragDelegate, BMDropDelegate {
 
 	/**
 	 * The last measured intrinsic size for this collection view.