Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add support for float numbers (positive & negative) in the z-index style property #3171

Merged
merged 3 commits into from
Oct 19, 2023
Merged

Add support for float numbers (positive & negative) in the z-index style property #3171

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
3a9eea5
Add support for float numbers in the z-index style property #3160
maxkfranz Sep 27, 2023
eff8c8c
Change the `z-index` to allow for negative values
maxkfranz Oct 19, 2023
d1e33f2
Updated related docs re. : Add support for float numbers in the z-ind…
maxkfranz Oct 19, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 3 additions & 1 deletion documentation/md/style.md
View file
Open in desktop
Original file line number Diff line number Diff line change
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.

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
View file
Open in desktop
Original file line number Diff line number Diff line change
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.number, triggersZOrder: diff.any }
];

let overlay = [
Expand Down
Loading