Skip to content

Commit

Permalink
Add support for float numbers in the z-index style property #3160
Browse files Browse the repository at this point in the history
- Revise `z-index` property to use a `nonNegativeNumber` type rather than `nonNegativeInt`.
- Revise documentation accordingly.
  • Loading branch information
maxkfranz committed Sep 27, 2023
1 parent 576121a commit 3a9eea5
Show file tree
Hide file tree
Showing 2 changed files with 5 additions and 2 deletions.
4 changes: 3 additions & 1 deletion documentation/md/style.md
Expand Up @@ -533,7 +533,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. Like CSS, the value is non-negative.

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:

Expand Down
3 changes: 2 additions & 1 deletion src/style/properties.js
Expand Up @@ -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 },
Expand Down Expand Up @@ -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.nonNegativeNumber, triggersZOrder: diff.any }
];

let overlay = [
Expand Down

0 comments on commit 3a9eea5

Please sign in to comment.