You are viewing a plain text version of this content. The canonical link for it is here.
Posted to dev@royale.apache.org by Harbs <ha...@gmail.com> on 2020/01/14 19:53:13 UTC

Re: [royale-asjs] branch develop updated: Reversed logic on number lookup in AllCSSValuesImpl

What prompted this change was the fact that I found that flex-shrink was not working because it’s a number. (flex-grow and many other CSS props would have the same issue)

This seems more PAYG than the original implementation (I was able to remove code from SimpleCSSValuesImpl), and I think it truly takes care of all cases.

FWIW, I also added “defaultLengthUnit” to the “all css” impl to allow the user to specify a unit other than px when converting. IIRC, Carlos ran into that problem.

Cheers,
Harbs

> On Jan 14, 2020, at 9:46 PM, harbs@apache.org wrote:
> 
> 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 925c5ed  Reversed logic on number lookup in AllCSSValuesImpl
> 925c5ed is described below
> 
> commit 925c5ed94461f3bac6342d38b5c94b6e31c40ceb
> Author: Harbs <ha...@in-tools.com>
> AuthorDate: Tue Jan 14 21:46:01 2020 +0200
> 
>    Reversed logic on number lookup in AllCSSValuesImpl
> 
>    There are many more css properties which can accept numbers than
>    <length> properies. This should enable correct parsing of *all* valid
>    css numbers
> ---
> .../org/apache/royale/core/AllCSSValuesImpl.as     | 53 +++++++++++++++++++++-
> .../org/apache/royale/core/SimpleCSSValuesImpl.as  | 20 ++++----
> 2 files changed, 62 insertions(+), 11 deletions(-)
> 
> diff --git a/frameworks/projects/Core/src/main/royale/org/apache/royale/core/AllCSSValuesImpl.as b/frameworks/projects/Core/src/main/royale/org/apache/royale/core/AllCSSValuesImpl.as
> index 6a2961e..b83de8f 100644
> --- a/frameworks/projects/Core/src/main/royale/org/apache/royale/core/AllCSSValuesImpl.as
> +++ b/frameworks/projects/Core/src/main/royale/org/apache/royale/core/AllCSSValuesImpl.as
> @@ -19,6 +19,8 @@
> package org.apache.royale.core
> {
> 
> +    import org.apache.royale.utils.CSSUtils;
> +
>     /**
>      *  The AllCSSValuesImpl class will eventually implement a full set of
>      *  CSS lookup rules.
> @@ -73,6 +75,55 @@ package org.apache.royale.core
>         {
>             return AllCSSValuesImpl._numericStyles;
>         }
> -        
> +        private var _defaultLengthUnit:String = "px";
> +        /**
> +         * The default value used when converting numbers in CSS to length units. Can be px, em, etc.
> +         * Defaults to px
> +         *  @langversion 3.0
> +         *  @playerversion Flash 10.2
> +         *  @playerversion AIR 2.6
> +         *  @productversion Royale 0.9.7
> +         */
> +        public function get defaultLengthUnit():String
> +        {
> +        	return _defaultLengthUnit;
> +        }
> +
> +        public function set defaultLengthUnit(value:String):void
> +        {
> +        	_defaultLengthUnit = value;
> +        }
> +        protected var lengthProps:Array = [
> +            "width",
> +            "height",
> +            "margin",
> +            "padding",
> +            "borderWidth",
> +            "fontSize",
> +            "textShadow"
> +        ];
> +        protected function isLengthProp(prop:String):Boolean{
> +            if(lengthProps.indexOf(prop) != -1){
> +                return true;
> +            }
> +            // margin and padding can have variants
> +            if(prop.indexOf("margin")== 0){
> +                return true;
> +            }
> +            if(prop.indexOf("padding")== 0){
> +                return true;
> +            }
> +            return false;
> +        }
> +        COMPILE::JS
> +        override protected function processNumberStyle(prop:String,value:*):*{
> +            if (colorStyles[prop])
> +                value = CSSUtils.attributeFromColor(value);
> +            else if (isLengthProp(prop))
> +                return value + defaultLengthUnit;
> +            return value;
> +        }
> +
> +
>     }
> }
> diff --git a/frameworks/projects/Core/src/main/royale/org/apache/royale/core/SimpleCSSValuesImpl.as b/frameworks/projects/Core/src/main/royale/org/apache/royale/core/SimpleCSSValuesImpl.as
> index c2221c1..5c5273b 100644
> --- a/frameworks/projects/Core/src/main/royale/org/apache/royale/core/SimpleCSSValuesImpl.as
> +++ b/frameworks/projects/Core/src/main/royale/org/apache/royale/core/SimpleCSSValuesImpl.as
> @@ -748,10 +748,7 @@ package org.apache.royale.core
> 				    if (typeof(value) == 'function') continue;
> 					cssString += p + ": ";
> 					if (typeof(value) == 'number') {
> -                    	if (colorStyles[p])
> -                        	value = CSSUtils.attributeFromColor(value as uint);
> -                    	else
> -                        	value = value.toString() + 'px';
> +                        value = processNumberStyle(p,value);
>                 	}
>                 	else if (p == 'backgroundImage') {
>                     	if (p.indexOf('url') != 0)
> @@ -764,6 +761,14 @@ package org.apache.royale.core
> 				ss.insertRule(cssString, ss.cssRules.length);
> 			}
>         }
> +        COMPILE::JS
> +        protected function processNumberStyle(prop:String,value:*):*{
> +            if (colorStyles[prop])
> +                value = CSSUtils.attributeFromColor(value);
> +            else if (numericStyles[prop])
> +                return value;
> +            return value + 'px';
> +        }
> 		
> 		COMPILE::JS
> 		private var ss:CSSStyleSheet;
> @@ -871,12 +876,7 @@ package org.apache.royale.core
>                 if (value === undefined)
>                     continue;
>                 if (typeof(value) == 'number') {
> -                    if (colorStyles[p])
> -                        value = CSSUtils.attributeFromColor(value);
> -                    else if (numericStyles[p])
> -                        value = value.toString();
> -                    else
> -                        value = value.toString() + 'px';
> +                    value = processNumberStyle(p,value);
>                 }
>                 else if (p == 'backgroundImage' && value.indexOf('url') != 0) {
>                         value = 'url(' + value + ')';
> 


Re: [royale-asjs] branch develop updated: Reversed logic on number lookup in AllCSSValuesImpl

Posted by Carlos Rovira <ca...@apache.org>.
Hi Harbs,

can you elaborate more on defaultLenghtUnit. not sure I understand what is
the purpose or how to use it.
thanks

El mar., 14 ene. 2020 a las 20:53, Harbs (<ha...@gmail.com>) escribió:

> What prompted this change was the fact that I found that flex-shrink was
> not working because it’s a number. (flex-grow and many other CSS props
> would have the same issue)
>
> This seems more PAYG than the original implementation (I was able to
> remove code from SimpleCSSValuesImpl), and I think it truly takes care of
> all cases.
>
> FWIW, I also added “defaultLengthUnit” to the “all css” impl to allow the
> user to specify a unit other than px when converting. IIRC, Carlos ran into
> that problem.
>
> Cheers,
> Harbs
>
> > On Jan 14, 2020, at 9:46 PM, harbs@apache.org wrote:
> >
> > 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 925c5ed  Reversed logic on number lookup in AllCSSValuesImpl
> > 925c5ed is described below
> >
> > commit 925c5ed94461f3bac6342d38b5c94b6e31c40ceb
> > Author: Harbs <ha...@in-tools.com>
> > AuthorDate: Tue Jan 14 21:46:01 2020 +0200
> >
> >    Reversed logic on number lookup in AllCSSValuesImpl
> >
> >    There are many more css properties which can accept numbers than
> >    <length> properies. This should enable correct parsing of *all* valid
> >    css numbers
> > ---
> > .../org/apache/royale/core/AllCSSValuesImpl.as     | 53
> +++++++++++++++++++++-
> > .../org/apache/royale/core/SimpleCSSValuesImpl.as  | 20 ++++----
> > 2 files changed, 62 insertions(+), 11 deletions(-)
> >
> > diff --git
> a/frameworks/projects/Core/src/main/royale/org/apache/royale/core/AllCSSValuesImpl.as
> b/frameworks/projects/Core/src/main/royale/org/apache/royale/core/AllCSSValuesImpl.as
> > index 6a2961e..b83de8f 100644
> > ---
> a/frameworks/projects/Core/src/main/royale/org/apache/royale/core/AllCSSValuesImpl.as
> > +++
> b/frameworks/projects/Core/src/main/royale/org/apache/royale/core/AllCSSValuesImpl.as
> > @@ -19,6 +19,8 @@
> > package org.apache.royale.core
> > {
> >
> > +    import org.apache.royale.utils.CSSUtils;
> > +
> >     /**
> >      *  The AllCSSValuesImpl class will eventually implement a full set
> of
> >      *  CSS lookup rules.
> > @@ -73,6 +75,55 @@ package org.apache.royale.core
> >         {
> >             return AllCSSValuesImpl._numericStyles;
> >         }
> > -
> > +        private var _defaultLengthUnit:String = "px";
> > +        /**
> > +         * The default value used when converting numbers in CSS to
> length units. Can be px, em, etc.
> > +         * Defaults to px
> > +         *  @langversion 3.0
> > +         *  @playerversion Flash 10.2
> > +         *  @playerversion AIR 2.6
> > +         *  @productversion Royale 0.9.7
> > +         */
> > +        public function get defaultLengthUnit():String
> > +        {
> > +             return _defaultLengthUnit;
> > +        }
> > +
> > +        public function set defaultLengthUnit(value:String):void
> > +        {
> > +             _defaultLengthUnit = value;
> > +        }
> > +        protected var lengthProps:Array = [
> > +            "width",
> > +            "height",
> > +            "margin",
> > +            "padding",
> > +            "borderWidth",
> > +            "fontSize",
> > +            "textShadow"
> > +        ];
> > +        protected function isLengthProp(prop:String):Boolean{
> > +            if(lengthProps.indexOf(prop) != -1){
> > +                return true;
> > +            }
> > +            // margin and padding can have variants
> > +            if(prop.indexOf("margin")== 0){
> > +                return true;
> > +            }
> > +            if(prop.indexOf("padding")== 0){
> > +                return true;
> > +            }
> > +            return false;
> > +        }
> > +        COMPILE::JS
> > +        override protected function
> processNumberStyle(prop:String,value:*):*{
> > +            if (colorStyles[prop])
> > +                value = CSSUtils.attributeFromColor(value);
> > +            else if (isLengthProp(prop))
> > +                return value + defaultLengthUnit;
> > +            return value;
> > +        }
> > +
> > +
> >     }
> > }
> > diff --git
> a/frameworks/projects/Core/src/main/royale/org/apache/royale/core/SimpleCSSValuesImpl.as
> b/frameworks/projects/Core/src/main/royale/org/apache/royale/core/SimpleCSSValuesImpl.as
> > index c2221c1..5c5273b 100644
> > ---
> a/frameworks/projects/Core/src/main/royale/org/apache/royale/core/SimpleCSSValuesImpl.as
> > +++
> b/frameworks/projects/Core/src/main/royale/org/apache/royale/core/SimpleCSSValuesImpl.as
> > @@ -748,10 +748,7 @@ package org.apache.royale.core
> >                                   if (typeof(value) == 'function')
> continue;
> >                                       cssString += p + ": ";
> >                                       if (typeof(value) == 'number') {
> > -                     if (colorStyles[p])
> > -                             value = CSSUtils.attributeFromColor(value
> as uint);
> > -                     else
> > -                             value = value.toString() + 'px';
> > +                        value = processNumberStyle(p,value);
> >                       }
> >                       else if (p == 'backgroundImage') {
> >                       if (p.indexOf('url') != 0)
> > @@ -764,6 +761,14 @@ package org.apache.royale.core
> >                               ss.insertRule(cssString,
> ss.cssRules.length);
> >                       }
> >         }
> > +        COMPILE::JS
> > +        protected function processNumberStyle(prop:String,value:*):*{
> > +            if (colorStyles[prop])
> > +                value = CSSUtils.attributeFromColor(value);
> > +            else if (numericStyles[prop])
> > +                return value;
> > +            return value + 'px';
> > +        }
> >
> >               COMPILE::JS
> >               private var ss:CSSStyleSheet;
> > @@ -871,12 +876,7 @@ package org.apache.royale.core
> >                 if (value === undefined)
> >                     continue;
> >                 if (typeof(value) == 'number') {
> > -                    if (colorStyles[p])
> > -                        value = CSSUtils.attributeFromColor(value);
> > -                    else if (numericStyles[p])
> > -                        value = value.toString();
> > -                    else
> > -                        value = value.toString() + 'px';
> > +                    value = processNumberStyle(p,value);
> >                 }
> >                 else if (p == 'backgroundImage' && value.indexOf('url')
> != 0) {
> >                         value = 'url(' + value + ')';
> >
>
>

-- 
Carlos Rovira
http://about.me/carlosrovira