Merge pull request #3171 from cytoscape/feature/float-z-index

Add support for float numbers (positive & negative) in the z-index style property
cytoscape · Oct 19, 2023 · b1751b8 · b1751b8
2 parents 5351c06 + d1e33f2
commit b1751b8
Show file tree

Hide file tree

Showing 2 changed files with 5 additions and 2 deletions.
diff --git a/documentation/md/style.md b/documentation/md/style.md
@@ -551,7 +551,9 @@ Endpoint modification is not supported for `curve-style: haystack` edges for per
     * An `opacity: 0` element is considered normally by layouts.
     * An `opacity: 0` element is taken into consideration for viewport fitting.
   * An `opacity: 0` element is interactive.
-* **`z-index`** : An integer value that affects the relative draw order of elements.  In general, an element with a higher `z-index` will be drawn on top of an element with a lower `z-index`.  Note that edges are under nodes despite `z-index`, except when necessary for compound nodes.
+* **`z-index`** : A numeric value that affects the relative draw order of elements.  In general, an element with a higher `z-index` will be drawn on top of an element with a lower `z-index`.  
+  * Note that edges are under nodes despite `z-index`, except when necessary for compound nodes.
+  * Note that unlike CSS proper, the `z-index` is a floating point value.
 
 Elements are drawn in a specific order based on compound depth (low to high), the element type (typically nodes above edges), and z-index (low to high).  These styles affect the ordering:
 

diff --git a/src/style/properties.js b/src/style/properties.js
@@ -29,6 +29,7 @@ const styfn = {};
     zeroOneNumbers: { number: true, min: 0, max: 1, unitless: true, multiple: true },
     nOneOneNumber: { number: true, min: -1, max: 1, unitless: true },
     nonNegativeInt: { number: true, min: 0, integer: true, unitless: true },
+    nonNegativeNumber: { number: true, min: 0, unitless: true },
     position: { enums: [ 'parent', 'origin' ] },
     nodeSize: { number: true, min: 0, enums: [ 'label' ] },
     number: { number: true, unitless: true },
@@ -241,7 +242,7 @@ const styfn = {};
     { name: 'min-zoomed-font-size', type: t.size },
     { name: 'z-compound-depth', type: t.zCompoundDepth, triggersZOrder: diff.any },
     { name: 'z-index-compare', type: t.zIndexCompare, triggersZOrder: diff.any },
-    { name: 'z-index', type: t.nonNegativeInt, triggersZOrder: diff.any }
+    { name: 'z-index', type: t.number, triggersZOrder: diff.any }
   ];
 
   let overlay = [