Fix background updating when label hidden #12138

CHANGES.md

@@ -12,6 +12,7 @@
 - Improved performance and reduced memory usage of `Event` class. [#12896](https://github.com/CesiumGS/cesium/pull/12896)
 - Fixes vertical misalignment of glyphs in labels with small fonts [#8474](https://github.com/CesiumGS/cesium/issues/8474)
 - Prevent runtime errors for certain forms of invalid PNTS files [#12872](https://github.com/CesiumGS/cesium/issues/12872)
+- Fix disappearing label background after updating label while `label.show` is `false`. [#12138](https://github.com/CesiumGS/cesium/issues/12138)
 
 #### Additions :tada:
 

CONTRIBUTORS.md

@@ -431,3 +431,4 @@ See [CONTRIBUTING.md](CONTRIBUTING.md) for details on how to contribute to Cesiu
 - [Easy Mahaffey](https://github.com/easymaahffey)
 - [Pamela Augustine](https://github.com/pamelaAugustine)
 - [宋时旺](https://github.com/BlockCnFuture)
+- [Adam Beili](https://github.com/Beilinson)

packages/engine/Source/Scene/LabelCollection.js

@@ -155,20 +155,25 @@ function rebindAllGlyphs(labelCollection, label) {
   let backgroundBillboard = label._backgroundBillboard;
   const backgroundBillboardCollection =
     labelCollection._backgroundBillboardCollection;
-  if (!showBackground) {
-    if (defined(backgroundBillboard)) {
+
+  if (label._showBackground && !defined(backgroundBillboard)) {
+    backgroundBillboard = getWhitePixelBillboard(
+      backgroundBillboardCollection,
+      labelCollection,
+    );
+    label._backgroundBillboard = backgroundBillboard;
+  }
+  if (defined(backgroundBillboard) && !showBackground) {
+    if (label.show) {
+      // Label is shown, remove the background billboard
       backgroundBillboardCollection.remove(backgroundBillboard);
       label._backgroundBillboard = backgroundBillboard = undefined;
+    } else {
+      // Label is hidden, hide backgroundBillboard as well
+      backgroundBillboard.show = false;
     }
-  } else {
-    if (!defined(backgroundBillboard)) {
-      backgroundBillboard = getWhitePixelBillboard(
-        backgroundBillboardCollection,
-        labelCollection,
-      );
-      label._backgroundBillboard = backgroundBillboard;
-    }
-
+  }
+  if (defined(backgroundBillboard)) {
     backgroundBillboard.color = label._backgroundColor;
     backgroundBillboard.show = label._show;
     backgroundBillboard.position = label._position;
@@ -506,7 +511,6 @@ function repositionAllGlyphs(label) {
       glyphPixelOffset.y = 0;
     }
     glyphPixelOffset.y = glyphPixelOffset.y * scale;
-
     backgroundBillboard.width = totalLineWidth;
     backgroundBillboard.height = totalLineHeight;
     backgroundBillboard._setTranslate(glyphPixelOffset);

packages/engine/Specs/Scene/LabelCollectionSpec.js

@@ -1148,6 +1148,26 @@ describe("Scene/LabelCollection", function () {
       });
 
       describe("Label", function () {
+        it("should update background billboard when updating label properties while label is hidden", async function () {
+          const label = labels.add({
+            text: "abc",
+            showBackground: true,
+          });
+
+          await allLabelsReady();
+          expect(labels._backgroundBillboardCollection.length).toEqual(1);
+
+          const backgroundBillboard = label._backgroundBillboard;
+          const { width } = backgroundBillboard;
+
+          label.show = false;
+          label.text = "abcde";
+          expect(labels._backgroundBillboardCollection.length).toEqual(1);
+
+          label.show = true;
+          scene.renderForSpecs();
+          expect(backgroundBillboard.width).toBeGreaterThan(width);
+        });
         it("can compute screen space position", function () {
           labels.clampToPixel = false;
           const label = labels.add({