You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@royale.apache.org by ca...@apache.org on 2020/06/04 14:03:33 UTC
[royale-asjs] 14/17: jewel-tilelayout: restore old code since we
are splitting in 2 classes. This class will be removed soon
This is an automated email from the ASF dual-hosted git repository.
carlosrovira pushed a commit to branch develop
in repository https://gitbox.apache.org/repos/asf/royale-asjs.git
commit e0df55e4a970bf77301b87926df0ff7e73881a78
Author: Carlos Rovira <ca...@apache.org>
AuthorDate: Thu Jun 4 11:58:23 2020 +0200
jewel-tilelayout: restore old code since we are splitting in 2 classes. This class will be removed soon
---
.../royale/jewel/beads/layouts/TileLayout.as | 369 ++++++---------------
1 file changed, 110 insertions(+), 259 deletions(-)
diff --git a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/layouts/TileLayout.as b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/layouts/TileLayout.as
index 0df34e0..e91378c 100644
--- a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/layouts/TileLayout.as
+++ b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/layouts/TileLayout.as
@@ -18,22 +18,23 @@
////////////////////////////////////////////////////////////////////////////////
package org.apache.royale.jewel.beads.layouts
{
- COMPILE::SWF
+ COMPILE::JS
{
- import org.apache.royale.core.IUIBase;
+ import org.apache.royale.core.WrappedHTMLElement;
}
import org.apache.royale.core.IBorderPaddingMarginValuesImpl;
- import org.apache.royale.core.ILayoutView;
+ import org.apache.royale.core.IParentIUIBase;
+ import org.apache.royale.core.IUIBase;
+ import org.apache.royale.core.LayoutBase;
import org.apache.royale.core.UIBase;
import org.apache.royale.core.ValuesManager;
import org.apache.royale.core.layout.EdgeData;
import org.apache.royale.core.layout.ILayoutStyleProperties;
- import org.apache.royale.events.Event;
/**
* The TileLayout class bead sizes and positions the elements it manages into rows and columns.
* The size of each element is determined either by setting TileLayout's columnWidth and rowHeight
- * properties, or having the tile size determined by factoring the columnCount into the area assigned
+ * properties, or having the tile size determined by factoring the numColumns into the area assigned
* for the layout.
*
* @langversion 3.0
@@ -41,7 +42,7 @@ package org.apache.royale.jewel.beads.layouts
* @playerversion AIR 2.6
* @productversion Royale 0.9.4
*/
- public class TileLayout extends StyledLayoutBase implements ILayoutStyleProperties
+ public class TileLayout extends LayoutBase implements ILayoutStyleProperties
{
/**
* constructor.
@@ -56,80 +57,30 @@ package org.apache.royale.jewel.beads.layouts
super();
}
- public static const LAYOUT_TYPE_NAMES:String = "layout tile";
-
- /**
- * Add class selectors when the component is addedToParent
- * Otherwise component will not get the class selectors when
- * perform "removeElement" and then "addElement"
- *
- * @langversion 3.0
- * @playerversion Flash 10.2
- * @playerversion AIR 2.6
- * @productversion Royale 0.9.4
- */
- override public function beadsAddedHandler(event:Event = null):void
- {
- super.beadsAddedHandler();
-
- COMPILE::JS
- {
- if (hostComponent.containsClass("layout"))
- hostComponent.removeClass("layout");
- hostComponent.addClass("layout");
- if(hostComponent.containsClass("tile"))
- hostComponent.removeClass("tile");
- hostComponent.addClass("tile");
- }
- }
+ private var _numColumns:Number = 4;
+ private var _columnWidth:Number = Number.NaN;
+ private var _rowHeight:Number = Number.NaN;
- private var _columnCount:int = -1;
/**
* The number of tiles to fit horizontally into the layout.
- * Contain the actual column count.
- * The default value is -1.
*
* @langversion 3.0
* @playerversion Flash 10.2
* @playerversion AIR 2.6
* @productversion Royale 0.9.4
*/
- public function get columnCount():int
+ public function get numColumns():Number
{
- return _columnCount;
+ return _numColumns;
}
-
- private var _requestedColumnCount:int = -1;
- /**
- * Number of columns to be displayed.
- * Set to -1 to allow the TileLayout to determine the column count automatically.
- *
- * @langversion 3.0
- * @playerversion Flash 10.2
- * @playerversion AIR 2.6
- * @productversion Royale 0.9.8
- */
- [Bindable("requestedColumnCountChanged")]
- public function get requestedColumnCount():int
- {
- return _requestedColumnCount;
- }
- public function set requestedColumnCount(value:int):void
+ public function set numColumns(value:Number):void
{
- _requestedColumnCount = value;
- layout();
+ _numColumns = value;
}
- private var _columnWidth:Number = Number.NaN;
/**
- * Contain the actual column width, in pixels.
- * If not explicitly set, the column width is determined from the width of the widest element.
- * If the columnAlign property is set to "justifyUsingWidth", the column width grows to the container width to justify the fully-visible columns.
- * The default value is NaN.
- * This property can be used as the source for data binding.
- *
* The width of each column, in pixels. If left unspecified, the
- * columnWidth is determined by dividing the columnCount into the
+ * columnWidth is determined by dividing the numColumns into the
* strand's bounding box width.
*
* @langversion 3.0
@@ -137,7 +88,6 @@ package org.apache.royale.jewel.beads.layouts
* @playerversion AIR 2.6
* @productversion Royale 0.9.4
*/
- [Bindable("columnWidthChanged")]
public function get columnWidth():Number
{
return _columnWidth;
@@ -145,57 +95,9 @@ package org.apache.royale.jewel.beads.layouts
public function set columnWidth(value:Number):void
{
_columnWidth = value;
- layout();
- }
-
- private var _rowCount:int = -1;
- /**
- * The number of tiles to fit horizontally into the layout.
- * The row count.
- * The default value is -1.
- *
- * @langversion 3.0
- * @playerversion Flash 10.2
- * @playerversion AIR 2.6
- * @productversion Royale 0.9.8
- */
- [Bindable("rowCountChanged")]
- public function get rowCount():int
- {
- return _rowCount;
- }
-
- private var _requestedRowCount:int = -1;
- /**
- * Number of rows to be displayed.
- * Set to -1 to remove explicit override and allow the TileLayout to determine the row count automatically.
- * If the orientation property is set to TileOrientation.COLUMNS, setting this property has no effect. in this case, columnCount is explicitly set, and the container height is explicitly set.
- * The default value is -1.
- *
- * @langversion 3.0
- * @playerversion Flash 10.2
- * @playerversion AIR 2.6
- * @productversion Royale 0.9.8
- */
- [Bindable("requestedRowCountChanged")]
- public function get requestedRowCount():int
- {
- return _requestedRowCount;
- }
- public function set requestedRowCount(value:int):void
- {
- _requestedRowCount = value;
- layout();
}
- private var _rowHeight:Number = Number.NaN;
/**
- * The row height, in pixels.
- * If not explicitly set, the row height is determined from the maximum of elements' height.
- * If rowAlign is set to "justifyUsingHeight", the actual row height increases to justify the fully-visible rows to the container height.
- * The default value is NaN.
- * This property can be used as the source for data binding.
- *
* The height of each row, in pixels. If left unspecified, the
* rowHeight is determine by dividing the possible number of rows
* into the strand's bounding box height.
@@ -205,7 +107,6 @@ package org.apache.royale.jewel.beads.layouts
* @playerversion AIR 2.6
* @productversion Royale 0.9.4
*/
- [Bindable("rowHeightChanged")]
public function get rowHeight():Number
{
return _rowHeight;
@@ -213,65 +114,64 @@ package org.apache.royale.jewel.beads.layouts
public function set rowHeight(value:Number):void
{
_rowHeight = value;
- layout();
}
/**
* @private
*/
- private var horizontalGapInitialized:Boolean;
- public static const HORIZONTAL_GAP_STYLE:String = "horizontalGap"
- private var _horizontalGap:Number = 0;
+ private var verticalGapInitialized:Boolean;
+ public static const VERTICAL_GAP_STYLE:String = "verticalGap"
+ private var _verticalGap:Number = 0;
+
/**
- * The horizontalGap between items.
+ * The verticalGap between items.
*
* @langversion 3.0
* @playerversion Flash 10.2
* @playerversion AIR 2.6
* @productversion Royale 0.9.4
*/
- [Bindable("horizontalGapChanged")]
- public function get horizontalGap():Number
+ public function get verticalGap():Number
{
- return _horizontalGap;
+ return _verticalGap;
}
+
/**
* @private
*/
- public function set horizontalGap(value:Number):void
+ public function set verticalGap(value:Number):void
{
- _horizontalGap = value;
- horizontalGapInitialized = true;
- // layout();
+ _verticalGap = value;
+ verticalGapInitialized = true;
}
/**
* @private
*/
- private var verticalGapInitialized:Boolean;
- public static const VERTICAL_GAP_STYLE:String = "verticalGap"
- private var _verticalGap:Number = 0;
+ private var horizontalGapInitialized:Boolean;
+ public static const HORIZONTAL_GAP_STYLE:String = "horizontalGap"
+ private var _horizontalGap:Number = 0;
+
/**
- * The verticalGap between items.
+ * The horizontalGap between items.
*
* @langversion 3.0
* @playerversion Flash 10.2
* @playerversion AIR 2.6
* @productversion Royale 0.9.4
*/
- [Bindable("verticalGapChanged")]
- public function get verticalGap():Number
+ public function get horizontalGap():Number
{
- return _verticalGap;
+ return _horizontalGap;
}
+
/**
* @private
*/
- public function set verticalGap(value:Number):void
+ public function set horizontalGap(value:Number):void
{
- _verticalGap = value;
- verticalGapInitialized = true;
- // layout();
+ _horizontalGap = value;
+ horizontalGapInitialized = true;
}
/**
@@ -287,25 +187,25 @@ package org.apache.royale.jewel.beads.layouts
* @playerversion AIR 2.6
* @productversion Royale 0.9.4
*/
- // override public function applyStyleToLayout(component:IUIBase, cssProperty:String):void
- // {
- // var cssValue:* = ValuesManager.valuesImpl.getValue(component, cssProperty);
- // if (cssValue !== undefined)
- // {
- // switch(cssProperty)
- // {
- // case VERTICAL_GAP_STYLE:
- // if(!verticalGapInitialized)
- // {
- // verticalGap = Number(cssValue);
- // }
- // break;
- // default:
- // break;
- // }
- // }
- // }
-
+ public function applyStyleToLayout(component:IUIBase, cssProperty:String):void
+ {
+ var cssValue:* = ValuesManager.valuesImpl.getValue(component, cssProperty);
+ if (cssValue !== undefined)
+ {
+ switch(cssProperty)
+ {
+ case VERTICAL_GAP_STYLE:
+ if(!verticalGapInitialized)
+ {
+ verticalGap = Number(cssValue);
+ }
+ break;
+ default:
+ break;
+ }
+ }
+ }
+
/**
* Layout children
*
@@ -340,10 +240,10 @@ package org.apache.royale.jewel.beads.layouts
if (testChild == null || !testChild.visible) realN--;
}
- if (isNaN(useWidth)) useWidth = Math.floor(adjustedWidth / columnCount); // + gap
+ if (isNaN(useWidth)) useWidth = Math.floor(adjustedWidth / numColumns); // + verticalGap
if (isNaN(useHeight)) {
// given the width and total number of items, how many rows?
- var numRows:Number = Math.ceil(realN/columnCount);
+ var numRows:Number = Math.ceil(realN/numColumns);
if (host.isHeightSizedToContent()) useHeight = 30; // default height
else useHeight = Math.floor(adjustedHeight / numRows);
}
@@ -363,7 +263,7 @@ package org.apache.royale.jewel.beads.layouts
xpos += useWidth;
maxWidth = Math.max(maxWidth,xpos);
- var test:Number = (i+1)%columnCount;
+ var test:Number = (i+1)%numColumns;
if (test == 0) {
xpos = 0;
@@ -372,7 +272,7 @@ package org.apache.royale.jewel.beads.layouts
}
}
- maxWidth = Math.max(maxWidth, columnCount*useWidth);
+ maxWidth = Math.max(maxWidth, numColumns*useWidth);
maxHeight = Math.max(maxHeight, numRows*useHeight);
// Only return true if the contentView needs to be larger; that new
@@ -383,129 +283,80 @@ package org.apache.royale.jewel.beads.layouts
}
COMPILE::JS
{
- trace(" **** TILE LAYOUT ****");
-
- trace(" - requestedColumnCount", requestedColumnCount);
- trace(" - columnCount", columnCount);
- trace(" - columnWidth", columnWidth);
- trace(" - horizontalGap", horizontalGap);
-
- trace(" - requestedRowCount", requestedRowCount);
- trace(" - rowCount", rowCount);
- trace(" - rowHeight", rowHeight);
- trace(" - verticalGap", verticalGap);
+ var contentView:IParentIUIBase = layoutView as IParentIUIBase;
+ var c:UIBase = (contentView as UIBase);
+ c.element.classList.add("layout");
+ c.element.classList.add("tile");
+ var children:Array = contentView.internalChildren();
var i:int;
- var n:int;
- var child:UIBase;
- var useWidth:Number;
- var useHeight:Number;
-
- var contentView:ILayoutView = layoutView as ILayoutView;
- n = contentView.numElements;
-
+ var n:int = children.length;
if (n === 0) return false;
-
- useWidth = columnWidth;
- trace(" - useWidth", useWidth);
- useHeight = rowHeight;
- trace(" - useHeight", useHeight);
- var needWidth:Boolean = isNaN(useWidth);
- trace(" - needWidth", needWidth);
- var needHeight:Boolean = isNaN(useHeight);
- trace(" - needHeight", needHeight);
-
var realN:int = n;
- var widestTile:Number = 0; // hold the widest tile
- var tallestTile:Number = 0; // hold the widest tile
for (i = 0; i < n; i++)
{
- child = contentView.getElementAt(i) as UIBase;
+ child = children[i].royale_wrapper;
if (!child.visible) realN--;
- if (needWidth && child.width > widestTile) widestTile = child.width;
- if (needWidth && child.height > tallestTile) tallestTile = child.height;
}
- trace(" - widestTile", widestTile);
- trace(" - tallestTile", tallestTile);
- if(needHeight || needWidth)
+ var useWidth:Number = columnWidth;
+ var useHeight:Number = rowHeight;
+ var needWidth:Boolean = isNaN(useWidth);
+ var needHeight:Boolean = isNaN(useHeight);
+
+ // given the width and total number of items, how many rows?
+ var borderMetrics:EdgeData = (ValuesManager.valuesImpl as IBorderPaddingMarginValuesImpl).getBorderMetrics(host);
+ var adjustedWidth:Number = Math.floor(host.width - borderMetrics.left - borderMetrics.right);
+ var adjustedHeight:Number = Math.floor(host.height - borderMetrics.top - borderMetrics.bottom);
+ var numRows:Number = Math.ceil(realN / (numColumns + _verticalGap));
+
+ if(needWidth || needHeight)
{
- trace(" -- calculate useWidth & useHeight");
- var borderMetrics:EdgeData = (ValuesManager.valuesImpl as IBorderPaddingMarginValuesImpl).getBorderMetrics(host);
- var adjustedHostWidth:Number = Math.floor(host.width - borderMetrics.left - borderMetrics.right);
- trace(" - adjustedWidth", adjustedHostWidth);
- var adjustedHostHeight:Number = Math.floor(host.height - borderMetrics.top - borderMetrics.bottom);
- trace(" - adjustedHeight", adjustedHostHeight);
if (needWidth)
- {
- // calculate columnCount in base of the widesTile
- _columnCount = _requestedColumnCount != -1 ? _requestedColumnCount : Math.floor(adjustedHostWidth / (widestTile + horizontalGap));
- useWidth = _requestedColumnCount == -1 ? widestTile : Math.floor((adjustedHostWidth - horizontalGap) / columnCount);
- } else {
- _columnCount = _requestedColumnCount != -1 ? _requestedColumnCount : Math.floor(adjustedHostWidth/ (_columnWidth + horizontalGap));
- useWidth = _requestedColumnCount == -1 ? _columnWidth : Math.floor((adjustedHostWidth - horizontalGap) / columnCount);
- }
- trace(" -- _columnCount", _columnCount);
- trace(" -- useWidth", useWidth);
-
- // given the width and total number of items, how many rows?
- // _rowCount = _requestedRowCount != -1 ? _requestedRowCount : Math.floor(adjustedHostHeight / (tallestTile + verticalGap));
- _rowCount = Math.ceil(realN / columnCount);
- trace(" -- _rowCount", _rowCount);
+ useWidth = Math.floor(adjustedWidth / numColumns);// + _horizontalGap;
if (needHeight)
- {
- useHeight = tallestTile;
-
- // if (host.isHeightSizedToContent()) useHeight = 30; // default height
- // else useHeight = Math.floor((adjustedHostHeight + verticalGap) / numRows);
- // trace(" -- useHeight", useHeight);
- } else {
- // _rowCount = _requestedRowCount != -1 ? _requestedRowCount : Math.floor(adjustedHostHeight / (_rowHeight + verticalGap));
- useHeight = _rowHeight;
+ {
+ if (host.isHeightSizedToContent())
+ useHeight = 30; // default height
+ else
+ useHeight = Math.floor(adjustedHeight / numRows);// + _verticalGap;
}
- // else {
- // // we have tile height so calculate rowCount
- // _rowCount = Math.floor((adjustedHostHeight + verticalGap)/ useHeight);
- // }
}
+
+ var child:UIBase;
+ var numCols:Number = Math.floor(1+(adjustedWidth - useWidth) / (useWidth + _horizontalGap));
- trace(" -- useHeight", useHeight);
for (i = 0; i < n; i++)
{
- child = contentView.getElementAt(i) as UIBase;
-
+ child = children[i].royale_wrapper;
if (!child.visible) continue;
+ child.width = useWidth;
+ child.height = useHeight;
+
+ var childW:WrappedHTMLElement = children[i];
+ if (childW == null) continue;
- trace(i, i % columnCount, i % rowCount);
-
- // add horizontalGap
- if(i % columnCount != 0)
- child.positioner.style.marginLeft = horizontalGap + "px";
- else
- child.positioner.style.marginLeft = null;
-
- // add verticalGap
- if(i >= columnCount)
- child.positioner.style.marginTop = verticalGap + "px";
+ if(i < numCols)
+ {
+ childW.style.marginTop = 0 + 'px';//_paddingTop
+ }
else
- child.positioner.style.marginTop = null;
+ {
+ childW.style.marginTop = _verticalGap + 'px';
+ }
- //child.setDisplayStyleForLayout('inline-flex');
- //if the parent width/height not explicitly set, we can't calculate the child width/height
- if(useWidth > 0)
- child.width = _requestedColumnCount == -1 ? useWidth : useWidth - horizontalGap;
- if(useHeight > 0)
- child.height = _requestedRowCount == -1 ? useHeight : useHeight - verticalGap;
-
- // avoid a tile from the next row stay in the previous row due to flexbox algorithm
- if(i % columnCount == columnCount - 1)
- child.positioner.style.marginRight = Math.floor(adjustedHostWidth - (1 + child.width + (child.width + horizontalGap) * (_columnCount - 1))) + "px";
+ if(i % numCols)
+ {
+ childW.style.marginLeft = _horizontalGap + 'px';
+ }
else
- child.positioner.style.marginRight = null;
-
- child.dispatchEvent('sizeChanged');
+ {
+ childW.style.marginLeft = 0 + 'px';//_paddingLeft
+ }
+
+ childW.royale_wrapper.dispatchEvent('sizeChanged');
}
return true;
}