From 3a9eea58a16b405661330769416c3ae1f55d3986 Mon Sep 17 00:00:00 2001 From: Max Franz Date: Wed, 27 Sep 2023 15:06:18 -0400 Subject: [PATCH 1/3] Add support for float numbers in the z-index style property #3160 - Revise `z-index` property to use a `nonNegativeNumber` type rather than `nonNegativeInt`. - Revise documentation accordingly. --- documentation/md/style.md | 4 +++- src/style/properties.js | 3 ++- 2 files changed, 5 insertions(+), 2 deletions(-) diff --git a/documentation/md/style.md b/documentation/md/style.md index 92470fe925..3f5ff4116d 100644 --- a/documentation/md/style.md +++ b/documentation/md/style.md @@ -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: diff --git a/src/style/properties.js b/src/style/properties.js index 3804852bfd..64394525bb 100644 --- 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.nonNegativeNumber, triggersZOrder: diff.any } ]; let overlay = [ From eff8c8c1b78a15779770a052727dc23c3cacbb23 Mon Sep 17 00:00:00 2001 From: Max Franz Date: Thu, 19 Oct 2023 11:54:03 -0400 Subject: [PATCH 2/3] Change the `z-index` to allow for negative values Ref: Add support for float numbers in the z-index style property #3160 --- src/style/properties.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/style/properties.js b/src/style/properties.js index 64394525bb..425066aaf8 100644 --- a/src/style/properties.js +++ b/src/style/properties.js @@ -242,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.nonNegativeNumber, triggersZOrder: diff.any } + { name: 'z-index', type: t.number, triggersZOrder: diff.any } ]; let overlay = [ From d1e33f2ef36f2cc3856648f08c26c41647116ab9 Mon Sep 17 00:00:00 2001 From: Max Franz Date: Thu, 19 Oct 2023 12:20:31 -0400 Subject: [PATCH 3/3] Updated related docs re. : Add support for float numbers in the z-index style property #3160 --- documentation/md/style.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/documentation/md/style.md b/documentation/md/style.md index 3f5ff4116d..997fb60baa 100644 --- a/documentation/md/style.md +++ b/documentation/md/style.md @@ -535,7 +535,7 @@ Endpoint modification is not supported for `curve-style: haystack` edges for per * An `opacity: 0` element is interactive. * **`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. + * 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: