bm-core-ui 2.8.3 → 2.9.0

package/build/BMCollectionView/BMCollectionViewFlowLayout.js

@@ -3335,10 +3335,18 @@ BMCollectionViewFlowLayout.prototype = BMExtend(Object.create(BMCollectionViewLa
 		// for the requested index path
 		if (this._expectedCellSize) {
 			if (this.cachedLayout.resolvedIndexPath.section < indexPath.section ||
-				(this.cachedLayout.resolvedIndexPath.section == indexPath.section && this.cachedLayout.resolvedIndexPath.row < indexPath.row)) {
-					// If the layout has not been resolved up to this index path, continue computing it until it has
-					this._layoutIterator.next({indexPath: indexPath});
+				(this.cachedLayout.resolvedIndexPath.section == indexPath.section && this.cachedLayout.resolvedIndexPath.row < indexPath.row)
+			) {
+				const currentResolvedHeight = this.cachedLayout.resolvedHeight;
+
+				// If the layout has not been resolved up to this index path, continue computing it until it has
+				this._layoutIterator.next({indexPath: indexPath});
+
+				// If the resolved height changes, invalidate the content size
+				if (currentResolvedHeight != this.cachedLayout.resolvedHeight) {
+					this.invalidateContentSize();
 				}
+			}
 		}
 	    
 	    // Return the cached attributes when using dynamic sizes
@@ -4324,22 +4332,33 @@ BMCollectionViewFlowLayout.prototype = BMExtend(Object.create(BMCollectionViewLa
 		var attributes;
 		var self = this;
 		
-		this.collectionView.usingOldDataSet(function () {
-			// When using automatic cell sizes, it is important to ensure that the sizing information has been computed
-			// for the requested index path
-			if (self._expectedCellSize) {
-				if (self.previousLayout.resolvedIndexPath.section < indexPath.section ||
-					(self.previousLayout.resolvedIndexPath.section == indexPath.section && self.previousLayout.resolvedIndexPath.row < indexPath.row)) {
+		// When using automatic cell sizes, it is important to ensure that the sizing information has been computed
+		// for the requested index path
+		if (self._expectedCellSize) {
+			if (self.previousLayout.resolvedIndexPath.section < indexPath.section ||
+				(self.previousLayout.resolvedIndexPath.section == indexPath.section && self.previousLayout.resolvedIndexPath.row < indexPath.row)) {
+					self.collectionView.usingOldDataSet(function () {
 						// If the layout has not been resolved up to this index path, continue computing it until it has
 						self.previousLayout.iterator.next({indexPath: indexPath});
-					}
-			}
+					});
+				}
+		}
+		
+		this.collectionView.usingOldDataSet(function () {
 
 			if (self._cellSize && !self._expectedCellSize) {
 				attributes = self.computedAttributesForCellAtIndexPath(indexPath, {usingCache: self.previousLayout});
 			}
 			else {
 				attributes = self.cachedAttributesForCellAtIndexPath(indexPath, {usingCache: self.previousLayout});
+
+				if (!attributes) {
+					// When using automatic cell sizes, it is possible that the attributes for the moving cell were not computed
+					// in this case, return a copy of the current attributes, with the opacity set to 0
+					attributes = options.withTargetAttributes.copy();
+
+					attributes.style = Object.assign(attributes.style, {opacity: 0});
+				}
 			}
 		});
 		
@@ -4350,6 +4369,21 @@ BMCollectionViewFlowLayout.prototype = BMExtend(Object.create(BMCollectionViewLa
 	initialAttributesForMovingSupplementaryViewWithIdentifier: function (identifier, options) {
 		var attributes;
 		var self = this;
+
+		// When using automatic cell sizes, ensure that the sizing information has been computed for the requested index path
+		if (self._expectedCellSize) {
+			if (self.cachedLayout.resolvedIndexPath.section < options.atIndexPath.section ||
+				(self.cachedLayout.resolvedIndexPath.section == options.atIndexPath.section && identifier == BMCollectionViewFlowLayoutSupplementaryView.Footer)) {
+					if (options.atIndexPath.section == self.collectionView.numberOfSections() - 1) {
+						// If there is no following section, compute until the last index path
+						self._layoutIterator.next({indexPath: self.collectionView.indexPathForObjectAtRow(self.collectionView.numberOfObjectsInSectionAtIndex(options.atIndexPath.section) - 1, {inSectionAtIndex: options.atIndexPath.section})});
+					}
+					else {
+						// If the layout has not been resolved up to this index path, continue computing up to the beginning of the next section
+						self._layoutIterator.next({indexPath: self.collectionView.indexPathForObjectAtRow(0, {inSectionAtIndex: options.atIndexPath.section + 1})});
+					}
+			}
+		}
 		
 		this.collectionView.usingOldDataSet(function () {
 			if (identifier === BMCollectionViewTableLayoutSupplementaryView.Empty) {
@@ -4360,6 +4394,14 @@ BMCollectionViewFlowLayout.prototype = BMExtend(Object.create(BMCollectionViewLa
 			}
 			else {
 				attributes = self.cachedAttributesForSupplementaryViewWithIdentifier(identifier, {atIndexPath: options.atIndexPath, usingCache: self.previousLayout});
+
+				if (!attributes) {
+					// When using automatic cell sizes, it is possible that the attributes for the moving supplementary view were not computed
+					// in this case, return a copy of the current attributes, with the opacity set to 0
+					attributes = options.withTargetAttributes.copy();
+
+					attributes.style = Object.assign(attributes.style, {opacity: 0});
+				}
 			}
 		});
 		

package/build/BMCollectionView/BMCollectionViewLayout.js

@@ -659,9 +659,12 @@ BMCollectionViewLayout.prototype = {
      * Layout objects should return YES from this method if the new bounds require a new layout.
      * The default implementation returns NO in all cases.
      * @param bounds <BMRect>       The new bounds.
+	 * {
+	 * 	@param fromBounds <BMRect>	The previous bounds.
+	 * }
      * @return <Boolean>            True if the new frame requires a new layout, false otherwise.
      */
-    shouldInvalidateLayoutForBoundsChange: function (bounds) {
+    shouldInvalidateLayoutForBoundsChange: function (bounds, {fromBounds}) {
         return NO;
     },
 

package/build/BMCoreUI.css

@@ -626,7 +626,7 @@
 	background: rgba(0, 128, 255, 1);
 	
 	color: white;
-	font-family: -apple-system, BinkMacSystemFont, 'Roboto', 'Helvetica', 'Segoe UI', sans-serif;
+	font-family: -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica', 'Segoe UI', sans-serif;
 	font-size: 14px;
 	font-weight: bold;
 	
@@ -1120,10 +1120,11 @@ input:not(:checked) + .BMWindowSwitchGutter > .BMWindowSwitchKnob, .BMWindowSwit
 }
 
 
-/* MARK: Layout editor popup */
+/* MARK: Menu and container, Layout editor popup */
+/* #region - Menu container */
 
 .BMLayoutEditorConstraintPopupContainer, .BMMenuContainer {
-	position: absolute;
+	position: fixed;
 
 	left: 0px;
 	top: 0px;
@@ -1134,6 +1135,12 @@ 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 */
+.BMMenuContainer.BMMenuContainerSubmenuActive > * {
+	pointer-events: none !important;
+}
+
 .BMMenuContainerFullScreen {
 	background-color: rgba(0, 0, 0, .33);
 }
@@ -1146,7 +1153,8 @@ input:not(:checked) + .BMWindowSwitchGutter > .BMWindowSwitchKnob, .BMWindowSwit
 	}
 }
 
-.BMLayoutEditorConstraintPopup, .BMMenu {
+.BMLayoutEditorConstraintPopup, 
+.BMMenu {
 	position: absolute;
 
 	display: flex;
@@ -1158,6 +1166,8 @@ input:not(:checked) + .BMWindowSwitchGutter > .BMWindowSwitchKnob, .BMWindowSwit
 	background-color: rgba(255, 255, 255, .8);
 	box-shadow: 0px 4px 8px rgba(0, 0, 0, .1), 0px 0px 1px 1px rgba(0, 0, 0, .1);
 
+	color: rgba(0, 0, 0, .8);
+
 	border-radius: 8px;
 }
 
@@ -1192,10 +1202,39 @@ input:not(:checked) + .BMWindowSwitchGutter > .BMWindowSwitchKnob, .BMWindowSwit
 	box-shadow: 0px 4px 8px rgba(0, 0, 0, .1), 0px 0px 1px 1px rgba(0, 0, 0, .1);
 	z-index: 9999999 !important;
 	overflow: hidden !important;
+
+	-webkit-touch-callout: none;
+	-webkit-user-select: none;
+	-khtml-user-select: none;
+	-moz-user-select: none;
+	-ms-user-select: none;
+	user-select: none;
+
+	-webkit-tap-highlight-color: transparent;
 }
 
 .BMMenuSourceNode {
-	display: none !important;
+	visibility: hidden !important;
+}
+
+/* While a touch menu has a submenu, its menu items should not respond to events */
+.BMMenuTouchSubmenu.BMMenu > .BMMenuItem {
+	pointer-events: none;
+
+	/* Additionally add an opacity transition to the items to be used in an animation */
+	transition: opacity .2s ease;
+}
+
+.BMMenuTouchSubmenu.BMMenu {
+	transition: filter .2s ease;
+}
+
+.BMMenuTouchSubmenu.BMMenu.BMMenuInactive > * {
+	opacity: .75 !important;
+}
+
+.BMMenuTouchSubmenu.BMMenu.BMMenuInactive {
+	filter: brightness(95%);
 }
 
 @media (prefers-color-scheme: dark) {
@@ -1205,7 +1244,8 @@ input:not(:checked) + .BMWindowSwitchGutter > .BMWindowSwitchKnob, .BMWindowSwit
 }
 
 @media (prefers-color-scheme: dark) {
-	.BMLayoutEditorConstraintPopup, .BMMenu {
+	.BMLayoutEditorConstraintPopup,
+	.BMMenu {
 		background-color: rgba(50, 50, 50, .75);
 		box-shadow: 0px 4px 8px rgba(0, 0, 0, .66), 0px 0px 0px 1px rgba(0, 0, 0, .66);
 	}
@@ -1223,13 +1263,16 @@ input:not(:checked) + .BMWindowSwitchGutter > .BMWindowSwitchKnob, .BMWindowSwit
 	}
 }
 
+/* #endregion */
+
+/* #region - Menu item */
+
 .BMLayoutEditorConstraintPopupOption, .BMMenuItem {
 	height: 28px;
 	line-height: 28px;
 	vertical-align: middle;
 
 	padding-left: 16px;
-	padding-right: 64px;
 
 	font-family: -apple-system, BlinkMacSystemFont, Roboto, 'Segoe UI', sans-serif !important;
 	font-size: 14px !important;
@@ -1240,16 +1283,37 @@ input:not(:checked) + .BMWindowSwitchGutter > .BMWindowSwitchKnob, .BMWindowSwit
 
 	display: flex;
 	align-items: center;
+
+	-webkit-touch-callout: none;
+	-webkit-user-select: none;
+	-khtml-user-select: none;
+	-moz-user-select: none;
+	-ms-user-select: none;
+	user-select: none;
+
+	-webkit-tap-highlight-color: transparent;
+}
+
+.BMLayoutEditorConstraintPopupOption {
+	padding-right: 64px;
 }
 
 .BMMenuTouch > .BMMenuItem {
 	height: 44px;
 	line-height: 44px;
-	border-bottom: 1px solid rgba(0, 0, 0, .1);
+	border-top: 1px solid rgba(0, 0, 0, .1);
 }
 
-.BMMenuTouch > .BMMenuItem:last-child {
-	border-bottom-width: 0px;
+.BMMenuTouch > .BMMenuItem:first-child {
+	border-top-width: 0px;
+}
+
+.BMMenuTouch > .BMMenuItem.BMMenuItemHighlighted + .BMMenuItem {
+	border-top-color: rgba(0, 0, 0, .2);
+}
+
+.BMMenuTouch > .BMMenuItem.BMMenuItemHighlighted + .BMMenuDivider {
+	box-shadow: 0px 1px 0px 0px rgba(0, 0, 0, .1) inset;
 }
 
 .BMMenuIcon {
@@ -1261,6 +1325,30 @@ input:not(:checked) + .BMWindowSwitchGutter > .BMWindowSwitchKnob, .BMWindowSwit
 	margin-right: 16px;
 }
 
+/* The menu's text element should expand to fill all available space */
+.BMMenuItem > span {
+	flex-grow: 1;
+}
+
+.BMMenuItemDisclosure {
+	width: 24px;
+	height: 24px;
+
+	margin-left: 48px;
+	
+	font-weight: 600;
+
+	font-size: 18px;
+
+	display: flex;
+	align-items: center;
+	justify-content: center;
+}
+
+.BMMenuItemDisclosureSubmenu::after {
+	content: '›';
+}
+
 @keyframes BMMenuItemActiveAnimation {
 	from {
 		background: transparent;
@@ -1288,16 +1376,31 @@ input:not(:checked) + .BMWindowSwitchGutter > .BMWindowSwitchKnob, .BMWindowSwit
 	color: white;
 }
 
+.BMMenuSourceNodeShadow.BMMenuItem.BMMenuItemHighlighted {
+	background: white;
+	color: rgba(0, 0, 0, .8);
+}
+
 .BMLayoutEditorConstraintPopupOption:active, .BMMenuTouch > .BMMenuItem:hover {
 	background: transparent;
 	color: rgba(0, 0, 0, .8);
 }
 
 .BMMenuItem.BMMenuItemActive {
-	animation: .2s linear BMMenuItemActiveAnimation;
+	animation: .15s linear BMMenuItemActiveAnimation;
 	animation-fill-mode: both;
 }
 
+.BMMenuTouch > .BMMenuItem.BMMenuItemActive,
+.BMMenuTouch > .BMMenuItem.BMMenuItemHighlighted {
+	animation: none;
+	background: transparent;
+	color: rgba(0, 0, 0, .8);
+
+	backdrop-filter: brightness(90%);
+	-webkit-backdrop-filter: brightness(90%);
+}
+
 .BMLayoutEditorConstraintPopupOptionHighlighted, .BMMenuItemHighlighted {
 	background: rgba(0, 128, 255, .5);
 }
@@ -1316,6 +1419,19 @@ input:not(:checked) + .BMWindowSwitchGutter > .BMWindowSwitchKnob, .BMWindowSwit
 		border-bottom-color: rgba(255, 255, 255, .1);
 	}
 
+	.BMMenuTouch > .BMMenuItem.BMMenuItemActive,
+	.BMMenuTouch > .BMMenuItem.BMMenuItemHighlighted {
+		color: rgba(255, 255, 255, 1);
+	
+		backdrop-filter: brightness(110%);
+		-webkit-backdrop-filter: brightness(110%);
+	}
+
+	.BMMenuSourceNodeShadow.BMMenuItem.BMMenuItemHighlighted {
+		background: rgba(33, 33, 33, 1);
+		color: rgba(255, 255, 255, .9);
+	}
+
 	@keyframes BMMenuItemActiveAnimation {
 		from {
 			background: transparent;
@@ -1339,6 +1455,8 @@ input:not(:checked) + .BMWindowSwitchGutter > .BMWindowSwitchKnob, .BMWindowSwit
 	}
 }
 
+/* #endregion */
+
 .BMLayoutEditorWorkspaceToolbarSizeClass .BMLayoutEditorConstraintPopupOption {
 	color: rgba(255, 255, 255, .9);
 }
@@ -1467,6 +1585,12 @@ input:not(:checked) + .BMWindowSwitchGutter > .BMWindowSwitchKnob, .BMWindowSwit
 	flex-shrink: 0;
 }
 
+.BMMenuTouch > .BMMenuDivider {
+	margin: 0;
+	height: 3px;
+	background: rgba(0, 0, 0, .1);
+}
+
 .BMLayoutEditorDetailsDividerCell {
 	background: rgba(0, 0, 0, .05);
 }
@@ -1490,7 +1614,7 @@ input:not(:checked) + .BMWindowSwitchGutter > .BMWindowSwitchKnob, .BMWindowSwit
 	flex-shrink: 0;
 }
 
-BMLayoutEditorDetailsItemBadge {
+.BMLayoutEditorDetailsItemBadge {
 	height: 16px;
 
 	border: 1px solid rgba(0, 0, 0, .1);

package/build/BMView/BMLayoutConstraint_v2.5.js

@@ -154,7 +154,7 @@ const _BMLayoutConstraintClasses = {BMLayoutConstraint, BMEqualAttributeLayoutCo
  * A constraint is a linear equation that takes the form of 
  * ```js
 view1.attribute1 = multiplier * view2.attribute2 + constant
-```
+``` 
  * where the equals sign can be replaced with an inequality sign as needed.
  * Note that despite looking like an assignment statement, the constraint expression is a mathematical equation and the layout
  * system may choose to modify either side (or even both) of the equation to fulfill the constraint's requirements.