bm-core-ui 2.7.0 → 2.8.3

package/build/BMViewLayoutEditor/BMLayoutEditor.js

@@ -171,172 +171,7 @@ BMLayoutEditor.prototype = BMExtend(Object.create(BMWindow.prototype), {
         window.addEventListener('resize', this.resizeListener);
 
         view.allSubviews.forEach(subview => {
-            // Create and add the selector, that takes over interactions for the view
-            let selector = document.createElement('div');
-            selector.className = 'BMLayoutEditorViewSelector';
-
-            subview._selector = selector;
-            subview.node.classList.add('BMLayoutEditorManagedView');
-
-            // Also add a resize drag handle that can be used to resize the view's frame
-            const dragHandle = document.createElement('div');
-            dragHandle.className = 'material-icons BMWindowDragHandle BMLayoutEditorViewDragHandle';
-            dragHandle.innerText = 'dehaze';
-			dragHandle.style.cursor = 'nwse-resize';
-
-            selector.appendChild(dragHandle);
-
-	
-			let touchDragPoint;
-            
-			// Initialize dragging touch events for the drag handler
-			dragHandle.addEventListener('mousedown', event => {
-	
-				let size = BMSizeMake(subview.frame.size.width, subview.frame.size.height);
-                let lastPosition = BMPointMake(event.clientX, event.clientY);
-                
-                let didRemoveConstraints = NO;
-	
-				let mouseMoveEventListener = event => {
-                    if (!didRemoveConstraints) {
-                        this._view.node.querySelectorAll('.BMLayoutEditorConstraint, .BMLayoutEditorLeadLine').forEach(node => node.remove());
-                        didRemoveConstraints = YES;
-                    }
-
-                    let position = BMPointMake(event.clientX, event.clientY);
-                    const frame = subview.frame.copy();
-					frame.size.width = size.width + (position.x - lastPosition.x) / this.scale;
-					frame.size.height = size.height + (position.y - lastPosition.y) / this.scale;
-					subview.frame = frame;
-					size = BMSizeMake(size.width + (position.x - lastPosition.x) / this.scale, size.height + (position.y - lastPosition.y) / this.scale);
-                    lastPosition = position;
-                    
-                    event.preventDefault();
-                    event.stopPropagation();
-				};
-
-				let mask = document.createElement('div');
-				mask.className = 'BMLayoutGuideMask';
-				mask.style.cursor = 'nwse-resize';
-				document.body.appendChild(mask);
-	
-				let mouseUpEventListener = event => {
-					window.removeEventListener('mousemove', mouseMoveEventListener, YES);
-					window.removeEventListener('mouseup', mouseUpEventListener, YES);
-					mask.remove();
-                    event.preventDefault();
-                    event.stopPropagation();
-
-                    this.selectView(subview);
-				}
-	
-				window.addEventListener('mousemove', mouseMoveEventListener, YES);
-				window.addEventListener('mouseup', mouseUpEventListener, YES);
-	
-                event.preventDefault();
-                event.stopPropagation();
-			});
-	
-			let touchDragHandlePoint;
-	
-			dragHandle.addEventListener('touchstart', /** @type {TouchEvent} */ event => {
-				// If there is already a drag in progress, don't process this new event
-				if (typeof touchDragPoint !== 'undefined') {
-					return;
-				}
-	
-				// Only use the first touch point
-				touchDragHandlePoint = event.changedTouches[0].identifier;
-	
-				let size = BMSizeMake(subview.frame.size.width, subview.frame.size.height);
-                let lastPosition = BMPointMake(event.changedTouches[0].clientX, event.changedTouches[0].clientY);
-                
-                let didRemoveConstraints = NO;
-	
-				let mouseMoveEventListener = event => {
-					// Look for the actively tracked touch point
-					let touch;
-					for (let changedTouch of event.changedTouches) {
-						if (changedTouch.identifier == touchDragHandlePoint) {
-							touch = changedTouch;
-							break;
-						}
-					}
-	
-					// If the actively tracked touch point did not move, do not process this event
-                    if (!touch) return;
-                    
-                    if (!didRemoveConstraints) {
-                        this._view.node.querySelectorAll('.BMLayoutEditorConstraint, .BMLayoutEditorLeadLine').forEach(node => node.remove());
-                        didRemoveConstraints = YES;
-                    }
-	
-					let position = BMPointMake(touch.clientX, touch.clientY);
-                    const frame = subview.frame.copy();
-					frame.size.width = size.width + (position.x - lastPosition.x) / this.scale;
-					frame.size.height = size.height + (position.y - lastPosition.y) / this.scale;
-					subview.frame = frame;
-					size = BMSizeMake(size.width + (position.x - lastPosition.x) / this.scale, size.height + (position.y - lastPosition.y) / this.scale);
-					lastPosition = position;
-                    event.preventDefault();
-                    event.stopPropagation();
-				};
-	
-				let mouseUpEventListener = event => {
-					touchDragHandlePoint = undefined;
-					window.removeEventListener('touchmove', mouseMoveEventListener);
-					window.removeEventListener('touchend', mouseUpEventListener);
-                    window.removeEventListener('touchcancel', mouseUpEventListener);
-                    
-                    event.preventDefault();
-                    event.stopPropagation();
-
-                    this.selectView(subview);
-				}
-	
-				window.addEventListener('touchmove', mouseMoveEventListener);
-				window.addEventListener('touchend', mouseUpEventListener);
-				window.removeEventListener('touchcancel', mouseUpEventListener);
-	
-				event.preventDefault();
-                event.stopPropagation();
-            });
-            
-            // Enable double click to select views
-            let doubleClickTimeout;
-
-            selector.addEventListener('click', event => {
-                if (event.altKey) return;
-
-                this.selectView(subview, {withEvent: event});
-                if (!doubleClickTimeout) {
-                    doubleClickTimeout = setTimeout(() => doubleClickTimeout = undefined, 250);
-                }
-                else {
-                    doubleClickTimeout = undefined;
-                    if (!this._detailsToolWindow._visible) {
-                        this._detailsToolWindow.bringToFrontAnimated(YES, {fromRect: BMRectMakeWithNodeFrame(this._inspectorButton)});
-                    }
-                }
-
-                event.stopPropagation();
-                event.stopImmediatePropagation();
-            });
-
-            this.initDragEventListenerForNode(selector, {view: subview});
-
-            // Disable all other non-right mouse button interactions
-            selector.addEventListener('mousedown', event => (event.button != 2) && (event.stopPropagation(), event.stopImmediatePropagation()));
-            selector.addEventListener('mousemove', event => (event.button != 2) && (event.stopPropagation(), event.stopImmediatePropagation()));
-            selector.addEventListener('mouseup', event => (event.button != 2) && (event.stopPropagation(), event.stopImmediatePropagation()));
-
-
-            if (subview.node.childNodes.length) {
-                subview.node.insertBefore(selector, subview.node.childNodes[0]);
-            }
-            else {
-                subview.node.appendChild(selector);
-            }
+            this._prepareView(subview);
         });
 
         var width = document.documentElement.clientWidth;
@@ -590,6 +425,180 @@ BMLayoutEditor.prototype = BMExtend(Object.create(BMWindow.prototype), {
         return this;
     },
 
+    /**
+     * Prepares the given view for being edited by setting up the appropriate event handlers and
+     * adding the required controls to the view's node.
+     * @param view <BMView>     The view to prepare.
+     */
+    _prepareView(view) {
+        // Create and add the selector, that takes over interactions for the view
+        let selector = document.createElement('div');
+        selector.className = 'BMLayoutEditorViewSelector';
+
+        view._selector = selector;
+        view.node.classList.add('BMLayoutEditorManagedView');
+
+        // Also add a resize drag handle that can be used to resize the view's frame
+        const dragHandle = document.createElement('div');
+        dragHandle.className = 'material-icons BMWindowDragHandle BMLayoutEditorViewDragHandle';
+        dragHandle.innerText = 'dehaze';
+        dragHandle.style.cursor = 'nwse-resize';
+
+        selector.appendChild(dragHandle);
+
+
+        let touchDragPoint;
+        
+        // Initialize dragging touch events for the drag handler
+        dragHandle.addEventListener('mousedown', event => {
+
+            let size = BMSizeMake(view.frame.size.width, view.frame.size.height);
+            let lastPosition = BMPointMake(event.clientX, event.clientY);
+            
+            let didRemoveConstraints = NO;
+
+            let mouseMoveEventListener = event => {
+                if (!didRemoveConstraints) {
+                    this._view.node.querySelectorAll('.BMLayoutEditorConstraint, .BMLayoutEditorLeadLine').forEach(node => node.remove());
+                    didRemoveConstraints = YES;
+                }
+
+                let position = BMPointMake(event.clientX, event.clientY);
+                const frame = view.frame.copy();
+                frame.size.width = size.width + (position.x - lastPosition.x) / this.scale;
+                frame.size.height = size.height + (position.y - lastPosition.y) / this.scale;
+                view.frame = frame;
+                size = BMSizeMake(size.width + (position.x - lastPosition.x) / this.scale, size.height + (position.y - lastPosition.y) / this.scale);
+                lastPosition = position;
+                
+                event.preventDefault();
+                event.stopPropagation();
+            };
+
+            let mask = document.createElement('div');
+            mask.className = 'BMLayoutGuideMask';
+            mask.style.cursor = 'nwse-resize';
+            document.body.appendChild(mask);
+
+            let mouseUpEventListener = event => {
+                window.removeEventListener('mousemove', mouseMoveEventListener, YES);
+                window.removeEventListener('mouseup', mouseUpEventListener, YES);
+                mask.remove();
+                event.preventDefault();
+                event.stopPropagation();
+
+                this.selectView(view);
+            }
+
+            window.addEventListener('mousemove', mouseMoveEventListener, YES);
+            window.addEventListener('mouseup', mouseUpEventListener, YES);
+
+            event.preventDefault();
+            event.stopPropagation();
+        });
+
+        let touchDragHandlePoint;
+
+        dragHandle.addEventListener('touchstart', /** @type {TouchEvent} */ event => {
+            // If there is already a drag in progress, don't process this new event
+            if (typeof touchDragPoint !== 'undefined') {
+                return;
+            }
+
+            // Only use the first touch point
+            touchDragHandlePoint = event.changedTouches[0].identifier;
+
+            let size = BMSizeMake(view.frame.size.width, view.frame.size.height);
+            let lastPosition = BMPointMake(event.changedTouches[0].clientX, event.changedTouches[0].clientY);
+            
+            let didRemoveConstraints = NO;
+
+            let mouseMoveEventListener = event => {
+                // Look for the actively tracked touch point
+                let touch;
+                for (let changedTouch of event.changedTouches) {
+                    if (changedTouch.identifier == touchDragHandlePoint) {
+                        touch = changedTouch;
+                        break;
+                    }
+                }
+
+                // If the actively tracked touch point did not move, do not process this event
+                if (!touch) return;
+                
+                if (!didRemoveConstraints) {
+                    this._view.node.querySelectorAll('.BMLayoutEditorConstraint, .BMLayoutEditorLeadLine').forEach(node => node.remove());
+                    didRemoveConstraints = YES;
+                }
+
+                let position = BMPointMake(touch.clientX, touch.clientY);
+                const frame = view.frame.copy();
+                frame.size.width = size.width + (position.x - lastPosition.x) / this.scale;
+                frame.size.height = size.height + (position.y - lastPosition.y) / this.scale;
+                view.frame = frame;
+                size = BMSizeMake(size.width + (position.x - lastPosition.x) / this.scale, size.height + (position.y - lastPosition.y) / this.scale);
+                lastPosition = position;
+                event.preventDefault();
+                event.stopPropagation();
+            };
+
+            let mouseUpEventListener = event => {
+                touchDragHandlePoint = undefined;
+                window.removeEventListener('touchmove', mouseMoveEventListener);
+                window.removeEventListener('touchend', mouseUpEventListener);
+                window.removeEventListener('touchcancel', mouseUpEventListener);
+                
+                event.preventDefault();
+                event.stopPropagation();
+
+                this.selectView(view);
+            }
+
+            window.addEventListener('touchmove', mouseMoveEventListener);
+            window.addEventListener('touchend', mouseUpEventListener);
+            window.removeEventListener('touchcancel', mouseUpEventListener);
+
+            event.preventDefault();
+            event.stopPropagation();
+        });
+        
+        // Enable double click to select views
+        let doubleClickTimeout;
+
+        selector.addEventListener('click', event => {
+            if (event.altKey) return;
+
+            this.selectView(view, {withEvent: event});
+            if (!doubleClickTimeout) {
+                doubleClickTimeout = setTimeout(() => doubleClickTimeout = undefined, 250);
+            }
+            else {
+                doubleClickTimeout = undefined;
+                if (!this._detailsToolWindow._visible) {
+                    this._detailsToolWindow.bringToFrontAnimated(YES, {fromRect: BMRectMakeWithNodeFrame(this._inspectorButton)});
+                }
+            }
+
+            event.stopPropagation();
+            event.stopImmediatePropagation();
+        });
+
+        this.initDragEventListenerForNode(selector, {view: view});
+
+        // Disable all other non-right mouse button interactions
+        selector.addEventListener('mousedown', event => (event.button != 2) && (event.stopPropagation(), event.stopImmediatePropagation()));
+        selector.addEventListener('mousemove', event => (event.button != 2) && (event.stopPropagation(), event.stopImmediatePropagation()));
+        selector.addEventListener('mouseup', event => (event.button != 2) && (event.stopPropagation(), event.stopImmediatePropagation()));
+
+
+        if (view.node.childNodes.length) {
+            view.node.insertBefore(selector, view.node.childNodes[0]);
+        }
+        else {
+            view.node.appendChild(selector);
+        }
+    },
+
     /**
      * Is set to <code>YES</code> while this layout editor is full screen.
      */
@@ -859,7 +868,7 @@ BMLayoutEditor.prototype = BMExtend(Object.create(BMWindow.prototype), {
             const closeButton = document.createElement('div');
             closeButton.className = 'BMWindowToolbarButton BMLayoutEditorToolbarButton';
             closeButton.innerHTML = '<i class="material-icons">&#xE5CD;</i>';
-            closeButton.style.opacity = 1;
+            closeButton.style.opacity = '1';
 
             closeButton.addEventListener('click', event => this.dismissAnimated(YES, {toNode: this._returnNode}));
             
@@ -872,7 +881,7 @@ BMLayoutEditor.prototype = BMExtend(Object.create(BMWindow.prototype), {
         fullscreenButton.innerHTML = `<i class="material-icons" style="pointer-events: none;">${this._useSettingsView ? 'layers' : '&#xE5DC;'}</i>`;
         this._fullScreenButton = fullscreenButton;
 
-        fullscreenButton.style.opacity = 1;
+        fullscreenButton.style.opacity = '1';
         fullscreenButton.style.pointerEvents = 'all';
 
         fullscreenButton.addEventListener('click', this._useSettingsView ? event => this._treeWindow.toggleAnimated(YES) : event => this.toggleFullscreenWithEvent(event));
@@ -900,6 +909,9 @@ BMLayoutEditor.prototype = BMExtend(Object.create(BMWindow.prototype), {
         toolbar.appendChild(deviceSelector);
 
 
+        /**
+         * @type {HTMLInputElement}
+         */
         let widthInput = document.createElement('input');
         widthInput.type = 'number';
         widthInput.style.cssText = 'width: 64px !important; margin-left: 32px !important; text-align: center;';
@@ -1119,6 +1131,14 @@ BMLayoutEditor.prototype = BMExtend(Object.create(BMWindow.prototype), {
             this._showSizeClassMenuAtPoint(point);
         });
 
+        const addViewsButton = document.createElement('div');
+        addViewsButton.className = 'BMWindowToolbarButton BMLayoutEditorToolbarButton';
+        addViewsButton.innerHTML = '<i class="material-icons BMScriptFont" style="pointer-events: none;">+</i>';
+        toolbar.appendChild(addViewsButton);
+        this.addViewsButton = addViewsButton;
+
+        addViewsButton.addEventListener('click', event => this.showViewsPopupWithEvent(event));
+
         const layoutVariablesButton = document.createElement('div');
         layoutVariablesButton.className = 'BMWindowToolbarButton BMLayoutEditorToolbarButton';
         layoutVariablesButton.innerHTML = '<i class="material-icons BMScriptFont" style="pointer-events: none;">{X}</i>';

package/build/BMViewLayoutEditor/BMLayoutEditorSettingCells.js

@@ -518,10 +518,10 @@ BMLayoutEditorSettingsDeactivateConstraintsCell.prototype = BMExtend(Object.crea
 
         buttonView.node.addEventListener('click', event => {
             if (hasOption && hasShift && hasCtrl) {
-                new Set(this.setting.target.rootView.allConstraints).forEach(constraint => constraint.remove());
+                new Set(this.setting.target._view.rootView.allConstraints).forEach(constraint => constraint.remove());
             }
             else if (hasOption) {
-                for (let constraint of this.setting.target.localConstraints) {
+                for (let constraint of this.setting.target._view.localConstraints) {
                     if (hasShift) {
                         constraint.remove();
                     }

package/build/BMWindow/BMConfirmationPopup.js

@@ -179,6 +179,11 @@ BMAlertPopup.prototype = BMExtend(Object.create(BMWindow.prototype), {
         return BMLayoutAttribute.CenterY;
     },
 
+    /**
+     * The DOM node that was focused when this alert was opened.
+     */
+    _previouslyActiveNode: undefined, // DOMNode
+
     /**
      * Designated initializer. Initializes this alert popup with the given labels.
      * @param title <String>                    The popup's title.
@@ -249,6 +254,8 @@ BMAlertPopup.prototype = BMExtend(Object.create(BMWindow.prototype), {
         escapeKeyboardShortcut.preventsDefault = YES;
         this.registerKeyboardShortcut(escapeKeyboardShortcut);
 
+        this._previouslyActiveNode = document.activeElement;
+
         return this;
     },
     /**
@@ -291,6 +298,10 @@ BMAlertPopup.prototype = BMExtend(Object.create(BMWindow.prototype), {
             this._resolve(BMConfirmationPopupResult.Confirmed);
         }
 
+        if (this._previouslyActiveNode) {
+            this._previouslyActiveNode.focus();
+        }
+
         return BMWindow.prototype.dismissAnimated.apply(this, arguments);
     }
 
@@ -455,6 +466,10 @@ BMConfirmationPopup.prototype = BMExtend(Object.create(BMAlertPopup.prototype),
             this._resolve(BMConfirmationPopupResult.Cancelled);
         }
 
+        if (this._previouslyActiveNode) {
+            this._previouslyActiveNode.focus();
+        }
+
         return BMWindow.prototype.dismissAnimated.apply(this, arguments);
     }
 

package/build/BMWindow/BMKeyboardShortcut.js

@@ -1,7 +1,7 @@
-import { NO } from "../Core/BMCoreUI";
-
 // @ts-check
 
+import { NO } from "../Core/BMCoreUI";
+
 // @type BMKeyboardShortcutModifier
 
 /**
@@ -9,22 +9,27 @@ import { NO } from "../Core/BMCoreUI";
  * for views and windows.
  */
 export const BMKeyboardShortcutModifier = Object.freeze({ // <enum>
+
 	/**
 	 * Represents the command key on macOS and iOS, windows key on Windows and meta key on Linux.
 	 */
 	Command: {key: 'metaKey', value: 1}, // <enum>
+
 	/**
 	 * Represents the option key on macOS and alt on other systems.
 	 */
 	Option: {key: 'altKey', value: 2}, // <enum>
+
 	/**
 	 * Represents the shit key.
 	 */
 	Shift: {key: 'shiftKey', value: 4}, // <enum>
+
 	/**
 	 * Represents the control key.
 	 */
 	Control: {key: 'ctrlKey', value: 8}, // <enum>
+
 	/**
 	 * Represents the command key on macOS and iOS and control key on other systems.
 	 */
@@ -96,7 +101,7 @@ BMKeyboardShortcut.prototype = {
     preventsDefault: NO, // <Boolean>
 
     /**
-     * Initializes this keyboard shortcut with the given key and optional modifiers, as well as
+     * Designated initializer. Initializes this keyboard shortcut with the given key and optional modifiers, as well as
      * the target and action that will handle it.
      * 
      * In order to be triggered, this keyboard shortcut must be registered with an event handler such as a window
@@ -124,6 +129,88 @@ BMKeyboardShortcut.prototype = {
         }
 
         return this;
+    },
+
+    /**
+     * Initializes this keyboard shortcut with the given keyboard event. If the event includes the control or command keys, these may be converted
+     * into a system key modifier based on the current platform.
+     * @param event <KeyboardEvent>                                     The keyboard event from which this keyboard shortcut should be initialized.
+     * {
+     * 	@param target <AnyObject>										The object that will handle this keyboard shortcut action.
+     * 	@param action <String>											The name of a method on the target object that will be invoked when this 
+     * 																	keyboard shortcut is triggered. That method will receive the keyboard event as its single parameter.
+     *  @param preventsDefault <Boolean, nullable>                      Defaults to `NO`. When set to `YES`, the default action of the event that triggers this keyboard shortcut will be prevented.
+     * }
+     * 
+     */
+    initWithKeyboardEvent(event, {target, action, preventsDefault} = {}) {
+        const modifiers = [];
+        if (event.shiftKey) {
+            modifiers.push(BMKeyboardShortcutModifier.Shift);
+        }
+        if (event.altKey) {
+            modifiers.push(BMKeyboardShortcutModifier.Option);
+        }
+        if (event.metaKey) {
+            if (BMKeyboardShortcutModifier.System.value == BMKeyboardShortcutModifier.Command.value) {
+                modifiers.push(BMKeyboardShortcutModifier.System);
+            }
+            else {
+                modifiers.push(BMKeyboardShortcutModifier.Command);
+            }
+        }
+        if (event.ctrlKey) {
+            if (BMKeyboardShortcutModifier.System.value == BMKeyboardShortcutModifier.Control.value) {
+                modifiers.push(BMKeyboardShortcutModifier.System);
+            }
+            else {
+                modifiers.push(BMKeyboardShortcutModifier.Control);
+            }
+        }
+
+        return this.initWithKeyCode(event.code, {modifiers, target, action, preventsDefault});
+    },
+
+    /**
+     * Initializes this keyboard shortcut with the given serialized object representation. A callback is used to
+     * convert from the target object ID to an actual target object.
+     * @param shortcut <Object>                 A serialized keyboard shortcut.
+     * {
+     *  @param targetID <Object ^(String)>      A callback that is invoked with the target ID and should return
+     *                                          the target object which will handle the keyboard shortcut.
+     * }
+     * @returns <Object>                        This keyboard shortcut.
+     */
+    initWithSerializedKeyboardShortcut(shortcut, {targetID: resolver}) {
+        if (shortcut._class != 'BMKeyboardShortcut') {
+            throw new Error(`Unknown keyboard shortcut class - "${shortcut._class}"`);
+        }
+
+        const target = resolver(shortcut._targetID);
+
+        const modifiers = shortcut._modifiers.map(modifier => {
+            return Object.values(BMKeyboardShortcutModifier).find(m => m.key == modifier)
+        });
+
+        return this.initWithKeyCode(shortcut._key, {modifiers, target, action: shortcut._action, preventsDefault: shortcut._preventsDefault});
+    },
+
+    /**
+     * Returns an object representation of this keyboard shortcut that can be used with `JSON.stringify` to 
+     * serialize this keyboard shortcut.
+     * @param ID <String>           A string that identifies the target object and can be used when recreating
+     *                              the keyboard shortcut instance.
+     * @returns <Object>            An object that can be used with `JSON.stringify`.
+     */
+    serializedKeyboardShortcutWithTargetID(ID) {
+        return {
+            _class: `BMKeyboardShortcut`,
+            _key: this._key,
+            _modifiers: this._modifiers.map(m => m.key),
+            _targetID: ID,
+            _action: this._action,
+            _preventsDefault: this.preventsDefault,
+        };
     }
 
 };
@@ -141,6 +228,7 @@ BMKeyboardShortcut.prototype = {
  * 	@param target <AnyObject>										The object that will handle this keyboard shortcut action.
  * 	@param action <String>											The name of a method on the target object that will be invoked when this 
  * 																	keyboard shortcut is triggered. That method will receive the keyboard event as its single parameter.
+ *  @param preventsDefault <Boolean, nullable>                      Defaults to `NO`. When set to `YES`, the default action of the event that triggers this keyboard shortcut will be prevented.
  * }
  * @return <BMKeyboardShortcut>                                     A keyboard shortcut.
  */
@@ -148,4 +236,35 @@ BMKeyboardShortcut.keyboardShortcutWithKeyCode = function (key, args) {
     return (new BMKeyboardShortcut).initWithKeyCode(key, args);
 };
 
+
+/**
+ * Constructs and returns a keyboard shortcut with the given keyboard event. If the event includes the control or command keys, these may be converted
+ * into a system key modifier based on the current platform.
+ * @param event <KeyboardEvent>                                     The keyboard event from which this keyboard shortcut should be initialized.
+ * {
+ * 	@param target <AnyObject>										The object that will handle this keyboard shortcut action.
+ * 	@param action <String>											The name of a method on the target object that will be invoked when this 
+ * 																	keyboard shortcut is triggered. That method will receive the keyboard event as its single parameter.
+ *  @param preventsDefault <Boolean, nullable>                      Defaults to `NO`. When set to `YES`, the default action of the event that triggers this keyboard shortcut will be prevented.
+ * }
+ * 
+ */
+BMKeyboardShortcut.keyboardShortcutWithKeyboardEvent = function (event, args) {
+    return (new BMKeyboardShortcut).initWithKeyboardEvent(event, args);
+};
+
+/**
+ * Constructs and returns keyboard shortcut with the given serialized object representation. A callback is used to
+ * convert from the target object ID to an actual target object.
+ * @param shortcut <Object>                 A serialized keyboard shortcut.
+ * {
+ *  @param targetID <Object ^(String)>      A callback that is invoked with the target ID and should return
+ *                                          the target object which will handle the keyboard shortcut.
+ * }
+ * @returns <Object>                        A keyboard shortcut.
+ */
+BMKeyboardShortcut.keyboardShortcutWithSerializedKeyboardShortcut = function (shortcut, args) {
+    return (new BMKeyboardShortcut).initWithSerializedKeyboardShortcut(shortcut, args);
+};
+
 // @endtype