bm-core-ui 2.8.2 → 2.9.0

package/build/BMView/BMScrollView.js

@@ -103,7 +103,7 @@ BMScrollView.prototype = BMExtend({}, BMView.prototype, {
     },
 
     /**
-     * Invoked whenever the iScroll instance managing this scroll view's scrolling scrolls.
+     * Invoked whenever the iScroll instance managing this scroll view's scrolling.
      */
     _iScrollDidScroll() {
         this._scrollOffset = BMPointMake(this._iScroll.x, this._iScroll.y);

package/build/BMView/BMTextFieldDelegate.js

@@ -1,7 +1,7 @@
 // @type interface BMTextFieldDelegate
 
 /**
- * The specification for a `BMTextField` object, which can optionally be used in conjunction with `BMTextField` objects and will receive various
+ * The specification for a `BMTextFieldDelegate` object, which can optionally be used in conjunction with `BMTextField` objects and will receive various
  * callbacks related to the text field's lifecycle.
  */
 function BMTextFieldDelegate() {} // <constructor>
@@ -15,7 +15,7 @@ BMTextFieldDelegate.prototype = {
      * 
      * If this method is not implemented, suggestions and autocomplete will not be available.
 	 * @param textField <BMTextField>		The calling text field.
-     * @param text <String>                 
+     * @param text <String>                 The text for which to obtain suggestions.
      * @return <[String]>                   An array of string suggestions.
 	 */
     textFieldSuggestionsForText(textField, text) {},
@@ -47,7 +47,7 @@ BMTextFieldDelegate.prototype = {
     /**
      * Invoked whenever the contents in this text field change for any reason. This can be because of an input event,
      * the user pasting text or a suggestion being selected.
-     * Note that this method will not be invoked when manually setting the input node's `value`.
+     * Note that this method will not be invoked when programatically setting the input node's `value`.
      * 
      * Delegate objects can implement this method in place of standard event listeners to handle changes to this text field.
      * The contents of the text field can be retrieved via the standard `value` property on the text field's node.
@@ -58,9 +58,9 @@ BMTextFieldDelegate.prototype = {
     /**
      * Invoked whenever the user presses the return key while the text field has keyboard focus.
      * 
-     * Delegate objects can implement this method to customize the behaviour when the user presses the return key and also control whether the default action will take place.
-     * The default action for pressing the return key is to cause the text field to resign keyboard focus. If suggestions are used, the return key will also fill in the currently
-     * highlighted suggestion.
+     * Delegate objects can implement this method to customize the behaviour when the user presses the return key and also control 
+     * whether the default action will take place. The default action for pressing the return key is to cause the text field to 
+     * resign keyboard focus. If suggestions are used, the return key will also fill in the currently highlighted suggestion.
      * @param textField <BMTextField>       The calling text field.
      * @return <Boolean, nullable>          Defaults to `YES`. If set to `YES`, the standard behaviour will be invoked.
      */

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/BMViewLayoutEditor/BMLayoutEditorViewSettings.js

@@ -30,8 +30,11 @@ _BMLayoutEditorViewSettingsPanel.prototype = BMExtend(Object.create(_BMLayoutEdi
     _layoutTab: undefined, // <BMLayoutEditorSettingsTab>
 
     /**
-     * Designated initializer. Initializes this settings panel with the given settings view.
-     * @param view <_BMLayoutSettingsView>          The settings view.
+     * Designated initializer. Initializes this settings panel with the specified settings view.
+     * @param settingsView <_BMLayoutSettingsView>  The settings view.
+     * {
+     *  @param forView <BMView>                     The view whose settings will be displayed.
+     * }
      * @return <_BMLayoutEditorSettingsPanel>       This setttings panel.
      */
     initWithSettingsView(settingsView, {forView: view}) {

package/build/BMWindow/BMConfirmationPopup.js

@@ -182,7 +182,12 @@ BMAlertPopup.prototype = BMExtend(Object.create(BMWindow.prototype), {
     /**
      * The DOM node that was focused when this alert was opened.
      */
-    _previouslyActiveNode: undefined, // DOMNode
+    _previouslyActiveNode: undefined, // <DOMNode>
+
+    /**
+     * A handler that is invoked when the window resizes, used to reposition this window.
+     */
+    _centerHandler: undefined, // <void ^()>
 
     /**
      * Designated initializer. Initializes this alert popup with the given labels.
@@ -290,6 +295,15 @@ BMAlertPopup.prototype = BMExtend(Object.create(BMWindow.prototype), {
         return this._resolution;
     },
 
+    // @override - BMWindow
+    bringToFrontAnimated() {
+        this._resizeHandler = () => this.needsLayout = YES;
+
+        window.addEventListener('resize', this._resizeHandler);
+
+        return BMWindow.prototype.bringToFrontAnimated.apply(this, arguments);
+    },
+
     // @override - BMWindow
     dismissAnimated() {
         // Since the window can be dismissed by clicking outside in certain cases, this would be equivalent to pressing "OK".
@@ -302,7 +316,13 @@ BMAlertPopup.prototype = BMExtend(Object.create(BMWindow.prototype), {
             this._previouslyActiveNode.focus();
         }
 
+        window.removeEventListener('resize', this._resizeHandler);
+
         return BMWindow.prototype.dismissAnimated.apply(this, arguments);
+    },
+
+    windowDidClose() {
+        this.release();
     }
 
 });

package/build/BMWindow/BMPopover/BMPopover.js

@@ -8,6 +8,35 @@ import { BMHook, __BMVelocityAnimate } from "../../Core/BMAnimationContext";
 import { BMView } from "../../BMView/BMView_v2.5";
 import { BMInsetMakeWithEqualInsets } from "../../Core/BMInset";
 
+// @type BMPopoverIndicatorDirection
+
+// @endtype
+
+/**
+ * Constants describing the position where the indicator appears on its popover.
+ */
+ export var BMPopoverIndicatorDirection = Object.freeze({ // <enum>
+	/**
+	 * Causes the popover indicator to appear on the top edge of the popover.
+	 */
+	Top: "Top", // <enum>
+	
+	/**
+	 * Causes the popover indicator to appear on the bottom edge of the popover.
+	 */
+	Bottom: "Bottom", // <enum>
+	
+	/**
+	 * Causes the popover indicator to appear on the left edge of the popover.
+	 */
+	Left: "Left", // <enum>
+	
+	/**
+	 * Causes the popover indicator to appear on the right edge of the popover.
+	 */
+	Right: "Right" // <enum>
+});
+
 // @type BMPopover extends BMWindow
 
 /**
@@ -90,7 +119,7 @@ BMPopover.prototype = BMExtend(Object.create(BMWindow.prototype), {
      * Controls how rounded the popover's borders should be. This property should be set prior to the
      * popover being displayed.
      */
-    _borderRadius: 4, // <Number>
+    _borderRadius: 8, // <Number>
     get borderRadius() {
         return this._borderRadius;
     },
@@ -182,6 +211,16 @@ BMPopover.prototype = BMExtend(Object.create(BMWindow.prototype), {
      */
     _contentViewBottomConstraint: undefined, // <BMLayoutConstraint>
 
+    /**
+     * The content view's left edge constraint.
+     */
+    _contentViewLeftConstraint: undefined, // <BMLayoutConstraint>
+
+    /**
+     * The content view's right edge constraint.
+     */
+    _contentViewRightConstraint: undefined, // <BMLayoutConstraint>
+
     /**
      * The computed height of the indicator.
      */
@@ -190,6 +229,18 @@ BMPopover.prototype = BMExtend(Object.create(BMWindow.prototype), {
         return indicatorWidth / 2 | 0;
     },
 
+    /**
+     * An array that specifies the permitted indicator directions that this popover
+     * may use and the priority in which they will be evaluated.
+     */
+    _permittedDirections: [BMPopoverIndicatorDirection.Bottom, BMPopoverIndicatorDirection.Top, BMPopoverIndicatorDirection.Right, BMPopoverIndicatorDirection.Left], // <[BMPopoverIndicatorDirection]>
+    get permittedDirections() {
+        return this._permittedDirections.slice();
+    },
+    set permittedDirections(directions) {
+        this._permittedDirections = directions.slice();
+    },
+
     /**
      * Designated initializer. Initializes this popover with the given size.
      * 
@@ -239,8 +290,12 @@ BMPopover.prototype = BMExtend(Object.create(BMWindow.prototype), {
         const contentView = this._contentView = BMView.view();
         this.addSubview(this._contentView);
 
-        contentView.leading.equalTo(this.leading).isActive = YES;
-        contentView.trailing.equalTo(this.trailing).isActive = YES;
+        this._contentViewLeftConstraint = contentView.left.equalTo(this.left);
+        this._contentViewLeftConstraint.isActive = YES;
+
+        this._contentViewRightConstraint = contentView.right.equalTo(this.right);
+        this._contentViewRightConstraint.isActive = YES;
+
         this._contentViewTopConstraint = contentView.top.equalTo(this.top);
         this._contentViewTopConstraint.isActive = YES;
 
@@ -266,38 +321,108 @@ BMPopover.prototype = BMExtend(Object.create(BMWindow.prototype), {
         const nodeFrame = this.anchorRect || (this.anchorNode && BMRectMakeWithNodeFrame(this.anchorNode));
         const location = this.anchorPoint ? this.anchorPoint.copy() : nodeFrame.center;
 
-        frame.origin.x = location.x - frame.size.width / 2 | 0;
-
-        if (frame.origin.x < this._edgeInsets.left) {
-            frame.origin.x = this._edgeInsets.left;
+        // Determine the appropriate direction to display this popover
+        let direction;
+        if (this.anchorPoint) {
+            direction = this._directionAroundPoint(location);
         }
-        if (frame.right > window.innerWidth - this._edgeInsets.right) {
-            frame.origin.x = window.innerWidth - frame.size.width - this._edgeInsets.right;
+        else {
+            direction = this._directionAroundRect(nodeFrame);
         }
 
-        const appearsBelow = location.y < window.innerHeight - this.size.height - this._indicatorHeight;
+        // Adjust the constraints based on the direction
+        switch (direction) {
+            case BMPopoverIndicatorDirection.Top:
+                frame.origin.y = this.anchorPoint ? location.y : nodeFrame.bottom - 2;
 
-        if (appearsBelow) {
-            frame.origin.y = this.anchorPoint ? location.y : nodeFrame.bottom - 2;
-            this._contentViewTopConstraint.constant = this._indicatorHeight;
-            this._contentViewBottomConstraint.constant = 0;
-        }
-        else {
-            frame.origin.y = this.anchorPoint ? location.y - frame.size.height : nodeFrame.origin.y + 2 - frame.size.height;
-            this._contentViewTopConstraint.constant = 0;
-            this._contentViewBottomConstraint.constant = -this._indicatorHeight;
+                frame.origin.x = location.x - frame.size.width / 2 | 0;
+
+                if (frame.origin.x < this._edgeInsets.left) {
+                    frame.origin.x = this._edgeInsets.left;
+                }
+                if (frame.right > window.innerWidth - this._edgeInsets.right) {
+                    frame.origin.x = window.innerWidth - frame.size.width - this._edgeInsets.right;
+                }
+                
+                this._contentViewTopConstraint.constant = this._indicatorHeight;
+                this._contentViewBottomConstraint.constant = 0;
+                this._contentViewLeftConstraint.constant = 0;
+                this._contentViewRightConstraint.constant = 0;
+                break;
+            case BMPopoverIndicatorDirection.Bottom:
+                frame.origin.y = this.anchorPoint ? location.y - frame.size.height : nodeFrame.origin.y + 2 - frame.size.height;
+
+                frame.origin.x = location.x - frame.size.width / 2 | 0;
+
+                if (frame.origin.x < this._edgeInsets.left) {
+                    frame.origin.x = this._edgeInsets.left;
+                }
+                if (frame.right > window.innerWidth - this._edgeInsets.right) {
+                    frame.origin.x = window.innerWidth - frame.size.width - this._edgeInsets.right;
+                }
+                
+                this._contentViewTopConstraint.constant = 0;
+                this._contentViewBottomConstraint.constant = -this._indicatorHeight;
+                this._contentViewLeftConstraint.constant = 0;
+                this._contentViewRightConstraint.constant = 0;
+                break;
+            case BMPopoverIndicatorDirection.Right:
+                frame.origin.x = this.anchorPoint ? location.x - frame.size.width : nodeFrame.origin.x + 2 - frame.size.width;
+
+                frame.origin.y = location.y - frame.size.height / 2 | 0;
+
+                if (frame.origin.y < this._edgeInsets.top) {
+                    frame.origin.y = this._edgeInsets.top;
+                }
+                if (frame.bottom > window.innerHeight - this._edgeInsets.bottom) {
+                    frame.origin.y = window.innerHeight - frame.size.height - this._edgeInsets.bottom;
+                }
+                
+                this._contentViewTopConstraint.constant = 0;
+                this._contentViewBottomConstraint.constant = 0;
+                this._contentViewLeftConstraint.constant = 0;
+                this._contentViewRightConstraint.constant = -this._indicatorHeight;
+                break;
+            case BMPopoverIndicatorDirection.Left:
+                frame.origin.x = this.anchorPoint ? location.x : nodeFrame.right - 2;
+
+                frame.origin.y = location.y - frame.size.height / 2 | 0;
+
+                if (frame.origin.y < this._edgeInsets.top) {
+                    frame.origin.y = this._edgeInsets.top;
+                }
+                if (frame.bottom > window.innerHeight - this._edgeInsets.bottom) {
+                    frame.origin.y = window.innerHeight - frame.size.height - this._edgeInsets.bottom;
+                }
+                
+                this._contentViewTopConstraint.constant = 0;
+                this._contentViewBottomConstraint.constant = 0;
+                this._contentViewLeftConstraint.constant = this._indicatorHeight;
+                this._contentViewRightConstraint.constant = 0;
+                break;
         }
 
         this.frame = frame;
 
-        const innerFrame = frame.copy();
-
-        const knobPosition = BMNumberByConstrainingNumberToBounds(location.x - frame.origin.x, 12, frame.size.width - 12);
+        // Determine the indicator's position along its edge
+        let indicatorPosition;
+        switch (direction) {
+            case BMPopoverIndicatorDirection.Bottom:
+            case BMPopoverIndicatorDirection.Top:
+                indicatorPosition = BMNumberByConstrainingNumberToBounds(location.x - frame.origin.x, 12, frame.size.width - 12);
+                break;
+            case BMPopoverIndicatorDirection.Left:
+            case BMPopoverIndicatorDirection.Right:
+                indicatorPosition = BMNumberByConstrainingNumberToBounds(location.y - frame.origin.y, 12, frame.size.height - 12);
+                break;
+        }
 
+        // Create an inner frame to be used by the various paths
+        const innerFrame = frame.copy();
         innerFrame.origin = BMPointMake();
 
-        const pathContent = `${this._pathForPopoverWithFrame(innerFrame, {widthIndicatorSize: this._indicatorSize, knobPosition, gravity: appearsBelow ? 'Top' : 'Bottom'})}`;
-        const outlinePathContent = `${this._pathForPopoverWithFrame(innerFrame, {widthIndicatorSize: this._indicatorSize, inset: 1, knobPosition, gravity: appearsBelow ? 'Top' : 'Bottom'})}`;
+        const pathContent = `${this._pathForPopoverWithFrame(innerFrame, {indicatorSize: this._indicatorSize, position: indicatorPosition, direction, radius: this._borderRadius})}`;
+        const outlinePathContent = `${this._pathForPopoverWithFrame(innerFrame, {indicatorSize: this._indicatorSize, inset: 1, position: indicatorPosition, direction, radius: this._borderRadius})}`;
 
         if (!this._clipPathUUID && !CSS.supports('clip-path', `path('${pathContent}')`)) {
             // If inline path definitions are not supported by the browsers, create an UUID for a SVG clip path and create it
@@ -362,64 +487,197 @@ BMPopover.prototype = BMExtend(Object.create(BMWindow.prototype), {
 
         const popoverLayers = [this.contentNode, this._background, this._dropShadowContainer];
 
+        let transformOriginX, transformOriginY;
+        switch (direction) {
+            case BMPopoverIndicatorDirection.Bottom:
+                transformOriginX = ((indicatorPosition / this.frame.size.width) * 100) + '%';
+                transformOriginY = '100%';
+                break;
+            case BMPopoverIndicatorDirection.Top:
+                transformOriginX = ((indicatorPosition / this.frame.size.width) * 100) + '%';
+                transformOriginY = '0%';
+                break;
+            case BMPopoverIndicatorDirection.Left:
+                transformOriginX = '0%';
+                transformOriginY = ((indicatorPosition / this.frame.size.height) * 100) + '%';
+                break;
+            case BMPopoverIndicatorDirection.Right:
+                transformOriginX = '100%';
+                transformOriginY = ((indicatorPosition / this.frame.size.height) * 100) + '%';
+                break;
+        }
+
         for (const layer of popoverLayers) {
-            layer.style.transformOrigin = ((knobPosition / this.frame.size.width) * 100) + '% ' + (appearsBelow ? '0%' : '100%');
+            layer.style.transformOrigin = `${transformOriginX} ${transformOriginY}`;
         }
     },
 
+    /**
+     * Determines the direction that the popover should appear in order to fit best around the given point.
+     * The popover will verify directions in the order specified by the `permittedDirections` property.
+     * If none of the permitted indicator directions would fit the popover in the viewport, the first
+     * specified direction is returned.
+     * @param point <BMPoint>                   The anchor point to check against.
+     * @return <BMPopoverIndicatorDirection>    The direction that best fits.
+     */
+    _directionAroundPoint(point) {
+        for (const direction of this._permittedDirections) {
+            switch (direction) {
+                case BMPopoverIndicatorDirection.Top:
+                    if (point.y < window.innerHeight - this.size.height - this._indicatorHeight) {
+                        return BMPopoverIndicatorDirection.Top;
+                    }
+                    break;
+                case BMPopoverIndicatorDirection.Bottom:
+                    if (point.y > this.size.height + this._indicatorHeight) {
+                        return BMPopoverIndicatorDirection.Bottom;
+                    }
+                    break;
+                case BMPopoverIndicatorDirection.Right:
+                    if (point.x > this.size.width + this._indicatorHeight) {
+                        return BMPopoverIndicatorDirection.Right;
+                    }
+                    break;
+                case BMPopoverIndicatorDirection.Left:
+                    if (point.x < window.innerWidth - this.size.width - this._indicatorHeight) {
+                        return BMPopoverIndicatorDirection.Left;
+                    }
+                    break;
+            }
+        }
+
+        return this._permittedDirections[0];
+    },
+
+    /**
+     * Determines the direction that the popover should appear in order to fit best around the given rect.
+     * The popover will verify directions in the order specified by the `permittedDirections` property.
+     * If none of the permitted indicator directions would fit the popover in the viewport, the first
+     * specified direction is returned.
+     * @param rect <BMRect>                     The anchor rect to check against.
+     * @return <BMPopoverIndicatorDirection>    The direction that best fits.
+     */
+    _directionAroundRect(rect) {
+        for (const direction of this._permittedDirections) {
+            switch (direction) {
+                case BMPopoverIndicatorDirection.Top:
+                    if (rect.bottom < window.innerHeight - this.size.height - this._indicatorHeight) {
+                        return BMPopoverIndicatorDirection.Top;
+                    }
+                    break;
+                case BMPopoverIndicatorDirection.Bottom:
+                    if (rect.top > this.size.height + this._indicatorHeight) {
+                        return BMPopoverIndicatorDirection.Bottom;
+                    }
+                    break;
+                case BMPopoverIndicatorDirection.Right:
+                    if (rect.left > this.size.width + this._indicatorHeight) {
+                        return BMPopoverIndicatorDirection.Right;
+                    }
+                    break;
+                case BMPopoverIndicatorDirection.Left:
+                    if (rect.right < window.innerWidth - this.size.width - this._indicatorHeight) {
+                        return BMPopoverIndicatorDirection.Left;
+                    }
+                    break;
+            }
+        }
+
+        return this._permittedDirections[0];
+    },
+
     /**
      * Builds the SVG path definition for a popover with the given frame. Note that the indicator will be positioned inside the frame, which will push the usable
      * area of the frame downwards.
-     * @param frame <BMRect>                            The popover's frame.
+     * @param frame <BMRect>                                        The popover's frame.
      * {
-     *  @param widthIndicatorSize <Number, nullable>    Defaults to `8`. The size of the popover's indicator.
-     *  @param radius <Number, nullable>                Defaults to `4`. Controls how rounded the corners are.
-     *  @param inset <Number, nullable>                 Defaults to `0`. An optional inset to apply to the path.
-     *  @param knobPosition <Number, nullable>          Defaults to half of the frame's width. The position along the top frame on which to place the knob.
-     *                                                  This coordinate is relative to the popover's frame and represents the center position of the knob.
-     *                                                  This position should not overlap the specified corner radius.
-     *  @param gravity <String, nullable>               Defaults to `"Top"`. If set to `"Bottom"`, the popover knob will be placed at the bottom of the popover.
+     *  @param indicatorSize <Number, nullable>                     Defaults to `8`. The size of the popover's indicator.
+     *  @param radius <Number, nullable>                            Defaults to `4`. Controls how rounded the corners are.
+     *  @param inset <Number, nullable>                             Defaults to `0`. An optional inset to apply to the path.
+     *  @param position <Number, nullable>                          Defaults to half of the frame's width. The position along the edge of the frame on which to place the indicator.
+     *                                                              This coordinate is relative to the popover's frame and represents the center position of the indicator.
+     *                                                              This position should not overlap the specified corner radius.
+     *  @param direction <BMPopoverIndicatorDirection, nullable>    Defaults to `.Top`. Controls where the indicator will be placed relative to the popover.
      * }
      * @return <String>                                 The SVG path.
      */
-    _pathForPopoverWithFrame(frame, {widthIndicatorSize: size = 8, radius = 8, inset = 0, knobPosition = undefined, gravity = 'Top'} = {widthIndicatorSize: 8, radius: 4, inset: 0}) {
-        let top = gravity === 'Bottom' ? 0 : size * Math.SQRT2 / 2 | 0;
-        let bottom = gravity === 'Bottom' ? frame.size.height - size * Math.SQRT2 / 2 | 0 : frame.size.height;
-        const left = inset;
+    _pathForPopoverWithFrame(frame, {indicatorSize = 8, radius = 8, inset = 0, position = undefined, direction = BMPopoverIndicatorDirection.Top} = {indicatorSize: 8, radius: 4, inset: 0}) {
+        // Adjust the appropriate edge's position depending on the indicator direction
+        let top = direction === BMPopoverIndicatorDirection.Top ? indicatorSize * Math.SQRT2 / 2 | 0 : 0;
+        let left = direction == BMPopoverIndicatorDirection.Left ? indicatorSize * Math.SQRT2 / 2 | 0 : 0;
+
+        let bottom = direction === BMPopoverIndicatorDirection.Bottom ? frame.size.height - indicatorSize * Math.SQRT2 / 2 | 0 : frame.size.height;
+        let right = direction == BMPopoverIndicatorDirection.Right ? frame.size.width - indicatorSize * Math.SQRT2 / 2 | 0 : frame.size.width;
 
         if (inset) {
-            size = size - inset;
+            // If an inset is specified, adjust the values appropriately
+            indicatorSize = indicatorSize - inset;
             frame = frame.copy();
             frame.insetWithInset(BMInsetMakeWithEqualInsets(inset));
             radius = radius + inset;
+
             top += inset;
+            left += inset;
+
             bottom -= inset;
+            right -= inset;
         }
 
-        if (knobPosition === undefined) {
-            knobPosition = frame.size.width / 2 | 0;
+        if (position === undefined) {
+            position = frame.size.width / 2 | 0;
         }
         else {
-            knobPosition = (knobPosition - inset) | 0;
+            position = (position - inset) | 0;
         }
 
-        const knobWidth = size * Math.SQRT2;
+        const knobWidth = indicatorSize * Math.SQRT2;
         const knobHeight = knobWidth / 2 | 0;
 
-        // bottom should be equivalent to frame.size.height + inset
-        const pathTop = gravity === 'Bottom' ?
-            `M${left + radius},${top} L${frame.size.width + left - radius},${top} ` :
-            `M${left + radius},${top} L${(knobPosition - knobWidth / 2 + left)},${top} l${(knobWidth / 2)},${-knobHeight} l${(knobWidth / 2)},${knobHeight} L${frame.size.width + left - radius},${top} `;
-
-        const pathBottom = gravity === 'Bottom' ?
-            `Q${frame.size.width + left},${bottom} ${frame.size.width + left - radius},${bottom} L${(knobPosition + knobWidth / 2 + left)},${bottom} l${(-knobWidth / 2)},${knobHeight} l${(-knobWidth / 2)},${-knobHeight} L${radius},${bottom} ` :
-            `Q${frame.size.width + left},${bottom} ${frame.size.width + left - radius},${bottom} L${radius},${bottom} `;
+        const pathTop = direction === BMPopoverIndicatorDirection.Top ?
+            // Start at top left, then draw the indicator and move to the end of the edge
+            `M${left + radius},${top} ` +
+            `L${(position - knobWidth / 2 + left)},${top} l${(knobWidth / 2)},${-knobHeight} l${(knobWidth / 2)},${knobHeight} ` +
+            `L${right - radius},${top} ` :
+            // Start at top left, then move to the end of the edge
+            `M${left + radius},${top} ` +
+            `L${right - radius},${top} `;
+
+        const pathRight = direction == BMPopoverIndicatorDirection.Right ? 
+            // Draw the rounded corner, then the indicator and move to the end of the edge
+            `Q${right},${top} ${right},${top + radius} ` +
+            `L${right},${(position - knobWidth / 2 + top)} l${knobHeight},${(knobWidth / 2)} l${-knobHeight},${(knobWidth / 2)} ` +
+            `L${right},${bottom - radius} ` :
+            // Draw the rounded corner, then move to the end of the dge
+            `Q${right},${top} ${right},${top + radius} ` +
+            `L${right},${bottom - radius} `;
+
+        const pathBottom = direction === BMPopoverIndicatorDirection.Bottom ?
+            // Draw the rounded corner, then the indicator and move to the end of the edge
+            `Q${right},${bottom} ${right - radius},${bottom} ` +
+            `L${(position + knobWidth / 2 + left)},${bottom} l${(-knobWidth / 2)},${knobHeight} l${(-knobWidth / 2)},${-knobHeight} ` +
+            `L${left + radius},${bottom} ` :
+            // Draw the rounded corner, then move to the end of the edge
+            `Q${right},${bottom} ${right - radius},${bottom} ` +
+            `L${left + radius},${bottom} `;
+
+        const pathLeft = direction === BMPopoverIndicatorDirection.Left ?
+            // Draw the rounded corner coming from the bottom left, then the indicator
+            // afterwards move to the end of the edge and finally draw the rounded corner coming from the left to top
+            `Q${left},${bottom} ${left},${bottom - radius} ` +
+            `L${left},${(position + knobWidth / 2 + top)} l${-knobHeight},${(-knobWidth / 2)} l${knobHeight},${(-knobWidth / 2)} ` +
+            `L${left},${top + radius} ` +
+            `Q${left},${top} ${left + radius},${top} Z` :
+            // Draw the rounded corner coming from the bottom left, then move to
+            // the end of the edge and finally draw the rounded corner coming from the left to top
+            `Q${left},${bottom} ${left},${bottom - radius} ` +
+            `L${left},${top + radius} ` +
+            `Q${left},${top} ${left + radius},${top} Z`;
 
 
         let path =  pathTop;
-        path +=     `Q${frame.size.width + left},${top} ${frame.size.width + left},${top + radius} L${frame.size.width + left},${bottom - radius} `;
+        path +=     pathRight; //`Q${right},${top} ${right},${top + radius} L${right},${bottom - radius} `;
         path +=     pathBottom;
-        path +=     `Q${left},${bottom} ${left},${bottom - radius} L${left},${top + radius} Q${left},${top} ${radius},${top} Z`;
+        path +=     pathLeft; //`Q${left},${bottom} ${left},${bottom - radius} L${left},${top + radius} Q${left},${top} ${radius},${top} Z`;
 
         return path;
     },