This is an automated email from the ASF dual-hosted git repository.
harbs pushed a commit to branch develop
in repository https://gitbox.apache.org/repos/asf/royale-asjs.git
The following commit(s) were added to refs/heads/develop by this push:
new 57a500be56 flex and grid positioning
57a500be56 is described below
commit 57a500be561e8f1273910145a3044e9d1b91a85b
Author: Harbs <[email protected]>
AuthorDate: Mon Feb 23 15:13:37 2026 +0200
flex and grid positioning
---
.../Style/src/main/resources/basic-manifest.xml | 2 +
.../projects/Style/src/main/royale/StyleClasses.as | 1 +
.../royale/style/stylebeads/ContainerPosition.as | 229 +++++++++++++++++++++
.../apache/royale/style/stylebeads/SelfPosition.as | 147 +++++++++++++
.../royale/org/apache/royale/style/util/CSSUnit.as | 3 +
.../org/apache/royale/style/util/ContentAlign.as | 52 +++++
6 files changed, 434 insertions(+)
diff --git a/frameworks/projects/Style/src/main/resources/basic-manifest.xml
b/frameworks/projects/Style/src/main/resources/basic-manifest.xml
index 95e7330617..19021a19b0 100644
--- a/frameworks/projects/Style/src/main/resources/basic-manifest.xml
+++ b/frameworks/projects/Style/src/main/resources/basic-manifest.xml
@@ -20,6 +20,7 @@
<componentPackage>
+ <component id="ContainerPosition"
class="org.apache.royale.style.stylebeads.ContainerPosition"/>
<component id="FlexContainerStyle"
class="org.apache.royale.style.stylebeads.FlexContainerStyle"/>
<component id="FlexItemStyle"
class="org.apache.royale.style.stylebeads.FlexItemStyle"/>
<component id="HeightStyle"
class="org.apache.royale.style.stylebeads.HeightStyle"/>
@@ -33,6 +34,7 @@
<component id="OverflowStyle"
class="org.apache.royale.style.stylebeads.OverflowStyle"/>
<component id="PaddingStyle"
class="org.apache.royale.style.stylebeads.PaddingStyle"/>
<component id="PositionStyle"
class="org.apache.royale.style.stylebeads.PositionStyle"/>
+ <component id="SelfPosition"
class="org.apache.royale.style.stylebeads.SelfPosition"/>
<component id="SizeStyle"
class="org.apache.royale.style.stylebeads.SizeStyle"/>
<component id="WidthStyle"
class="org.apache.royale.style.stylebeads.WidthStyle"/>
</componentPackage>
diff --git a/frameworks/projects/Style/src/main/royale/StyleClasses.as
b/frameworks/projects/Style/src/main/royale/StyleClasses.as
index 5464cbe3aa..feb357d886 100644
--- a/frameworks/projects/Style/src/main/royale/StyleClasses.as
+++ b/frameworks/projects/Style/src/main/royale/StyleClasses.as
@@ -55,6 +55,7 @@ package
import org.apache.royale.style.colors.ZincSwatch; ZincSwatch;
import org.apache.royale.style.util.StyleManager; StyleManager;
import org.apache.royale.style.util.ThemeManager; ThemeManager;
+ import org.apache.royale.style.util.ContentAlign; ContentAlign;
}
diff --git
a/frameworks/projects/Style/src/main/royale/org/apache/royale/style/stylebeads/ContainerPosition.as
b/frameworks/projects/Style/src/main/royale/org/apache/royale/style/stylebeads/ContainerPosition.as
new file mode 100644
index 0000000000..035a1ed2c0
--- /dev/null
+++
b/frameworks/projects/Style/src/main/royale/org/apache/royale/style/stylebeads/ContainerPosition.as
@@ -0,0 +1,229 @@
+////////////////////////////////////////////////////////////////////////////////
+//
+// Licensed to the Apache Software Foundation (ASF) under one or more
+// contributor license agreements. See the NOTICE file distributed with
+// this work for additional information regarding copyright ownership.
+// The ASF licenses this file to You under the Apache License, Version 2.0
+// (the "License"); you may not use this file except in compliance with
+// the License. You may obtain a copy of the License at
+//
+// http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+//
+////////////////////////////////////////////////////////////////////////////////
+package org.apache.royale.style.stylebeads
+{
+ public class ContainerPosition extends StyleBeadBase
+ {
+ public function ContainerPosition()
+ {
+ super();
+ }
+
+ private var _justifyContent:String;
+ /**
+ * Applicabale for both flex and grid containers.
+ * Defines the alignment along the main axis.
+ * The main axis is defined by the flex-direction or
grid-auto-flow property.
+ * By default, the main axis is the horizontal axis (row).
+ *
+ * @langversion 3.0
+ * @productversion Royale 0.9.13
+ */
+ [Inspectable(category="General",
enumeration="flex-start,flex-end,center,space-between,space-around,space-evenly,stretch,baseline,normal",
defaultValue="")]
+ public function get justifyContent():String
+ {
+ return _justifyContent;
+ }
+ public function set justifyContent(value:String):void
+ {
+ _justifyContent = value;
+ }
+
+ private var _alignItems:String;
+ /**
+ * Applicabale for both flex and grid containers.
+ * Defines the default alignment for items along the cross axis.
+ * The cross axis is perpendicular to the main axis.
+ * By default, the cross axis is the vertical axis (column).
+ *
+ * @langversion 3.0
+ * @productversion Royale 0.9.13
+ */
+ [Inspectable(category="General",
enumeration="flex-start,flex-end,center,baseline,last baseline,stretch",
defaultValue="")]
+ public function get alignItems():String
+ {
+ return _alignItems;
+ }
+ public function set alignItems(value:String):void
+ {
+ _alignItems = value;
+ }
+
+ private var _justifyItems:String;
+ [Inspectable(category="General",
enumeration="start,end,center,stretch,normal", defaultValue="")]
+ /**
+ * Applicabale for grid containers.
+ * Defines the default alignment for items along the main axis.
+ * The main axis is defined by the flex-direction or
grid-auto-flow property.
+ * By default, the main axis is the horizontal axis (row).
+ */
+ public function get justifyItems():String
+ {
+ return _justifyItems;
+ }
+ public function set justifyItems(value:String):void
+ {
+ _justifyItems = value;
+ }
+
+ private var _alignContent:String;
+ [Inspectable(category="General",
enumeration="normal,center,flex-start,flex-end,space-between,space-around,space-evenly,baseline,stretch",
defaultValue="")]
+ /**
+ * Applicabale for grid containers.
+ * Defines the alignment of the grid within the grid container
when the size of the grid is smaller than the size of the container.
+ * The main axis is defined by the flex-direction or
grid-auto-flow property.
+ *
+ * @langversion 3.0
+ * @productversion Royale 0.9.13
+ */
+ public function get alignContent():String
+ {
+ return _alignContent;
+ }
+
+ public function set alignContent(value:String):void
+ {
+ _alignContent = value;
+ }
+
+ private var _placeContent:String;
+
+ [Inspectable(category="General",
enumeration="center,start,end,space-between,space-around,space-evenly,baseline,stretch",
defaultValue="")]
+ /**
+ * Applicabale for grid containers.
+ * A shorthand property for align-content and justify-content.
+ * The main axis is defined by the flex-direction or
grid-auto-flow property.
+ * By default, the main axis is the horizontal axis (row).
+ *
+ * @langversion 3.0
+ * @productversion Royale 0.9.13
+ */
+ public function get placeContent():String
+ {
+ return _placeContent;
+ }
+
+ public function set placeContent(value:String):void
+ {
+ _placeContent = value;
+ }
+ private var _placeItems:String;
+
+ [Inspectable(category="General", enumeration="start,end,safe
end,center,safe center,baseline,stretch", defaultValue="")]
+ /**
+ * Applicabale for grid containers.
+ * A shorthand property for align-items and justify-items.
+ * The main axis is defined by the flex-direction or
grid-auto-flow property.
+ * By default, the main axis is the horizontal axis (row).
+ *
+ * @langversion 3.0
+ * @productversion Royale 0.9.13
+ */
+ public function get placeItems():String
+ {
+ return _placeItems;
+ }
+
+ public function set placeItems(value:String):void
+ {
+ _placeItems = value;
+ }
+
+ public var safe:Boolean = false;
+ private function needsSafe(val:String):Boolean
+ {
+ if(!safe)
+ return false;
+ return val == "end" || val == "center" || val ==
"flex-end";
+ }
+ private function safeSelector(val:String):String
+ {
+ if(!safe)
+ return "";
+ return needsSafe(val) ? "-safe" : "";
+ }
+ private function safeRule(val:String):String
+ {
+ if(!safe)
+ return "";
+ return needsSafe(val) ? ": safe " : ": ";
+ }
+ override public function get selectors():Array
+ {
+ var safeStr:String = safeSelector(justifyContent);
+ var jcStr:String = ".justify-" + justifyContent +
safeStr;
+ safeStr = safeSelector(alignItems);
+ var aiStr:String = ".align-" + alignItems + safeStr;
+ safeStr = safeSelector(justifyItems);
+ var jiStr:String = ".justify-items-" + justifyItems +
safeStr;
+ safeStr = safeSelector(alignContent);
+ var acStr:String = ".align-content-" + alignContent +
safeStr;
+ safeStr = safeSelector(placeContent);
+ var pcStr:String = ".place-content-" + placeContent +
safeStr;
+ safeStr = safeSelector(placeItems);
+ var piStr:String = ".place-items-" + placeItems +
safeStr;
+
+ var retVal:Array = [];
+ if(justifyContent)
+ retVal.push(jcStr);
+ if(alignItems)
+ retVal.push(aiStr);
+ if(justifyItems)
+ retVal.push(jiStr);
+ if(alignContent)
+ retVal.push(acStr);
+ if(placeContent)
+ retVal.push(pcStr);
+ if(placeItems)
+ retVal.push(piStr);
+ return retVal;
+ }
+
+ override public function get rules():Array
+ {
+ var safeStr:String = safeRule(justifyContent);
+ var jcStr:String = "justify-content" + safeStr +
justifyContent;
+ safeStr = safeRule(alignItems);
+ var aiStr:String = "align-items" + safeStr + alignItems;
+ safeStr = safeRule(justifyItems);
+ var jiStr:String = "justify-items" + safeStr +
justifyItems;
+ safeStr = safeRule(alignContent);
+ var acStr:String = "align-content" + safeStr +
alignContent;
+ safeStr = safeRule(placeContent);
+ var pcStr:String = "place-content" + safeStr +
placeContent;
+ safeStr = safeRule(placeItems);
+ var piStr:String = "place-items" + safeStr + placeItems;
+
+ var retVal:Array = [];
+ if(justifyContent)
+ retVal.push(jcStr);
+ if(alignItems)
+ retVal.push(aiStr);
+ if(justifyItems)
+ retVal.push(jiStr);
+ if(alignContent)
+ retVal.push(acStr);
+ if(placeContent)
+ retVal.push(pcStr);
+ if(placeItems)
+ retVal.push(piStr);
+ return retVal;
+ }
+ }
+}
\ No newline at end of file
diff --git
a/frameworks/projects/Style/src/main/royale/org/apache/royale/style/stylebeads/SelfPosition.as
b/frameworks/projects/Style/src/main/royale/org/apache/royale/style/stylebeads/SelfPosition.as
new file mode 100644
index 0000000000..0244bbd307
--- /dev/null
+++
b/frameworks/projects/Style/src/main/royale/org/apache/royale/style/stylebeads/SelfPosition.as
@@ -0,0 +1,147 @@
+////////////////////////////////////////////////////////////////////////////////
+//
+// Licensed to the Apache Software Foundation (ASF) under one or more
+// contributor license agreements. See the NOTICE file distributed with
+// this work for additional information regarding copyright ownership.
+// The ASF licenses this file to You under the Apache License, Version 2.0
+// (the "License"); you may not use this file except in compliance with
+// the License. You may obtain a copy of the License at
+//
+// http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+//
+////////////////////////////////////////////////////////////////////////////////
+package org.apache.royale.style.stylebeads
+{
+ public class SelfPosition extends StyleBeadBase
+ {
+ public function SelfPosition()
+ {
+ super();
+ }
+
+ private var _justifySelf:String;
+ /**
+ * Applicabale for both flex and grid containers.
+ * Defines the alignment along the main axis.
+ * The main axis is defined by the flex-direction or
grid-auto-flow property.
+ * By default, the main axis is the horizontal axis (row).
+ *
+ * @langversion 3.0
+ * @productversion Royale 0.9.13
+ */
+ [Inspectable(category="General",
enumeration="auto,start,center,end,stretch", defaultValue="")]
+ public function get justifySelf():String
+ {
+ return _justifySelf;
+ }
+ public function set justifySelf(value:String):void
+ {
+ _justifySelf = value;
+ }
+
+ private var _alignSelf:String;
+ /**
+ * Applicabale for both flex and grid containers.
+ * Defines the default alignment for items along the cross axis.
+ * The cross axis is perpendicular to the main axis.
+ * By default, the cross axis is the vertical axis (column).
+ *
+ * @langversion 3.0
+ * @productversion Royale 0.9.13
+ */
+ [Inspectable(category="General",
enumeration="auto,flex-start,flex-end,center,stretch,baseline,last baseline",
defaultValue="")]
+ public function get alignSelf():String
+ {
+ return _alignSelf;
+ }
+ public function set alignSelf(value:String):void
+ {
+ _alignSelf = value;
+ }
+
+ private var _placeSelf:String;
+
+ [Inspectable(category="General",
enumeration="auto,start,center,end,stretch", defaultValue="")]
+ /**
+ * Applicabale for grid containers.
+ * A shorthand property for align-content and justify-content.
+ * The main axis is defined by the flex-direction or
grid-auto-flow property.
+ * By default, the main axis is the horizontal axis (row).
+ *
+ * @langversion 3.0
+ * @productversion Royale 0.9.13
+ */
+ public function get placeSelf():String
+ {
+ return _placeSelf;
+ }
+
+ public function set placeSelf(value:String):void
+ {
+ _placeSelf = value;
+ }
+
+ public var safe:Boolean = false;
+ private function needsSafe(val:String):Boolean
+ {
+ if(!safe)
+ return false;
+ return val == "end" || val == "center" || val ==
"flex-end";
+ }
+ private function safeSelector(val:String):String
+ {
+ if(!safe)
+ return "";
+ return needsSafe(val) ? "-safe" : "";
+ }
+ private function safeRule(val:String):String
+ {
+ if(!safe)
+ return "";
+ return needsSafe(val) ? ": safe " : ": ";
+ }
+ override public function get selectors():Array
+ {
+ var safeStr:String = safeSelector(justifySelf);
+ var jsStr:String = ".justify-" + justifySelf + safeStr;
+ safeStr = safeSelector(alignSelf);
+ var asStr:String = ".align-" + alignSelf + safeStr;
+ safeStr = safeSelector(placeSelf);
+ var psStr:String = ".place-self-" + placeSelf + safeStr;
+
+ var retVal:Array = [];
+ if(justifySelf)
+ retVal.push(jsStr);
+ if(alignSelf)
+ retVal.push(asStr);
+ if(placeSelf)
+ retVal.push(psStr);
+ return retVal;
+ }
+
+ override public function get rules():Array
+ {
+ var safeStr:String = safeRule(justifySelf);
+ var jcStr:String = "justify-self" + safeStr +
justifySelf;
+ safeStr = safeRule(alignSelf);
+ var aiStr:String = "align-self" + safeStr + alignSelf;
+ safeStr = safeRule(placeSelf);
+ var psStr:String = "place-self" + safeStr + placeSelf;
+
+ var retVal:Array = [];
+ if(justifySelf)
+ retVal.push(jcStr);
+ if(alignSelf)
+ retVal.push(aiStr);
+ if(placeSelf)
+ retVal.push(psStr);
+ return retVal;
+ }
+ }
+}
\ No newline at end of file
diff --git
a/frameworks/projects/Style/src/main/royale/org/apache/royale/style/util/CSSUnit.as
b/frameworks/projects/Style/src/main/royale/org/apache/royale/style/util/CSSUnit.as
index df86682335..530427871b 100644
---
a/frameworks/projects/Style/src/main/royale/org/apache/royale/style/util/CSSUnit.as
+++
b/frameworks/projects/Style/src/main/royale/org/apache/royale/style/util/CSSUnit.as
@@ -18,6 +18,9 @@
////////////////////////////////////////////////////////////////////////////////
package org.apache.royale.style.util
{
+ /**
+ * @royalesuppressexport
+ */
public class CSSUnit
{
private function CSSUnit()
diff --git
a/frameworks/projects/Style/src/main/royale/org/apache/royale/style/util/ContentAlign.as
b/frameworks/projects/Style/src/main/royale/org/apache/royale/style/util/ContentAlign.as
new file mode 100644
index 0000000000..5796a8f2ef
--- /dev/null
+++
b/frameworks/projects/Style/src/main/royale/org/apache/royale/style/util/ContentAlign.as
@@ -0,0 +1,52 @@
+////////////////////////////////////////////////////////////////////////////////
+//
+// Licensed to the Apache Software Foundation (ASF) under one or more
+// contributor license agreements. See the NOTICE file distributed with
+// this work for additional information regarding copyright ownership.
+// The ASF licenses this file to You under the Apache License, Version 2.0
+// (the "License"); you may not use this file except in compliance with
+// the License. You may obtain a copy of the License at
+//
+// http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+//
+////////////////////////////////////////////////////////////////////////////////
+package org.apache.royale.style.util
+{
+ /**
+ * @royalesuppressexport
+ */
+ public class ContentAlign
+ {
+ public static const NORMAL:String = "normal";
+ public static const STRETCH:String = "stretch";
+ public static const CENTER:String = "center";
+ public static const START:String = "start";
+ public static const END:String = "end";
+ public static const LEFT:String = "left";
+ public static const RIGHT:String = "right";
+ public static const FLEX_START:String = "flex-start";
+ public static const FLEX_END:String = "flex-end";
+ public static const SELF_START:String = "self-start";
+ public static const SELF_END:String = "self-end";
+ public static const ANCHOR_CENTER:String = "anchor-center";
+ public static const SAFE:String = "safe";
+ public static const BASELINE:String = "baseline";
+ public static const FIRST_BASELINE:String = "first-baseline";
+ public static const LAST_BASELINE:String = "last-baseline";
+ public static const SPACE_BETWEEN:String = "space-between";
+ public static const SPACE_AROUND:String = "space-around";
+ public static const SPACE_EVENLY:String = "space-evenly";
+
+ private function ContentAlign()
+ {
+
+ }
+
+ }
+}
\ No newline at end of file
