In the helper function style.getStylePropertyValue(), return a proc…

…essed (generated) string only if the request for the value was in rendered units. Otherwise, just return the existing string representation in `ele.pstyle(propName).strValue`. - For the rendered case, make sure that a space-separated string is returned for `multiple:true` properties. - Also for the rendered case, make sure that units are handled more strictly. - This affects `ele.style()` and `ele.renderedStyle()` getters. Ref : Cannot query style value when it supports string array #2221
cytoscape · Nov 22, 2018 · fbf399d · fbf399d
1 parent 6970b05
commit fbf399d
Show file tree

Hide file tree

Showing 2 changed files with 43 additions and 8 deletions.
diff --git a/src/style/get-for-ele.js b/src/style/get-for-ele.js
@@ -54,16 +54,36 @@ styfn.getStylePropertyValue = function( ele, propName, isRenderedVal ){
 
     let type = prop.type;
     let styleProp = ele.pstyle( prop.name );
-    let zoom = ele.cy().zoom();
 
     if( styleProp ){
-      let units = styleProp.units ? type.implicitUnits || 'px' : null;
-      let val = units ? [].concat( styleProp.pfValue ).map( function( pfValue ){
-        return ( pfValue * (isRenderedVal ? zoom : 1) ) + units;
-      } ).join( ' ' ) : styleProp.strValue;
-
-      return val;
+      let { value, units, strValue } = styleProp;
+
+      if( isRenderedVal && type.number && value != null && is.number(value) ){
+        let zoom = ele.cy().zoom();
+        let getRenderedValue = val => val * zoom;
+        let getValueStringWithUnits = (val, units) => getRenderedValue(val) + units;
+        let isArrayValue = is.array(value);
+        let haveUnits = isArrayValue ? units.every(u => u != null) : units != null;
+
+        if( haveUnits ){
+          if( isArrayValue ){
+            return value.map( (v, i) => getValueStringWithUnits(v, units[i]) ).join(' ');
+          } else {
+            return getValueStringWithUnits(value, units);
+          }
+        } else {
+          if( isArrayValue ){
+            return value.map(v => is.string(v) ? v : '' + getRenderedValue(v)).join(' ');
+          } else {
+            return '' + getRenderedValue(value);
+          }
+        }
+      } else if( strValue != null ){
+        return strValue;
+      }
     }
+
+    return null;
   }
 };
 

diff --git a/test/collection-style.js b/test/collection-style.js
@@ -33,7 +33,10 @@ describe('Collection style', function(){
         {
           selector: '#n1',
           style: {
-            label: useFn(function(){ return 'n1'; })
+            label: useFn(function(){ return 'n1'; }),
+            width: 20,
+            'background-image': ['/test/image.png', '/test/image2.png'],
+            opacity: 0.5
           }
         },
 
@@ -192,6 +195,18 @@ describe('Collection style', function(){
       expect( style['label'] ).to.equal( 'n2' );
     });
 
+    it('ele.style(propName) works for string array property value', function(){
+      expect( cy.$('#n1').style('background-image') ).to.deep.equal( '/test/image.png /test/image2.png' );
+    });
+
+    it('ele.style(propName) works for pixel property value', function(){
+      expect( cy.$('#n1').style('width') ).to.equal('20px');
+    });
+
+    it('ele.style(propName) works for unitless property value', function(){
+      expect( cy.$('#n1').style('opacity') ).to.equal('0.5');
+    });
+
     it('ele.numericStyle() returns size as a number', function(){
       var ret = cy.$('#n1').style('width', '30px').numericStyle('width');