Feature reactive Cesium3DTileStyle.style object

CHANGES.md

@@ -5,6 +5,7 @@ Change Log
 
 ##### Breaking Changes :mega:
 * `Resource.fetchImage` now returns an `ImageBitmap` instead of `Image` when supported. This allows for decoding images while fetching using `createImageBitmap` to greatly speed up texture upload and decrease frame drops when loading models with large textures. [#7579](https://github.com/AnalyticalGraphicsInc/cesium/pull/7579)
+* `Cesium3DTileStyle.style` now has an empty `Object` as its default value, instead of `undefined`. [#7567](https://github.com/AnalyticalGraphicsInc/cesium/issues/7567)
 
 ##### Deprecated :hourglass_flowing_sand:
 * `Resource.fetchImage` now takes an options object. Use `resource.fetchImage({ preferBlob: true })` instead of `resource.fetchImage(true)`. The previous function definition will no longer work in 1.57. [#7579](https://github.com/AnalyticalGraphicsInc/cesium/pull/7579)
@@ -13,6 +14,7 @@ Change Log
 * `Resource.fetchImage` now has a `flipY` option to vertically flip an image during fetch & decode. It is only valid when `ImageBitmapOptions` is supported by the browser. [#7579](https://github.com/AnalyticalGraphicsInc/cesium/pull/7579)
 * Added `backFaceCulling` and `normalShading` options to `PointCloudShading`. Both options are only applicable for point clouds containing normals. [#7399](https://github.com/AnalyticalGraphicsInc/cesium/pull/7399)
 * Added support for touch and hold gesture. The touch and hold delay can be customized by updating `ScreenSpaceEventHandler.touchHoldDelayMilliseconds`. [#7286](https://github.com/AnalyticalGraphicsInc/cesium/pull/7286)
+* `Cesium3DTileStyle.style` reacts to updates and represents the current state of the style. [#7567](https://github.com/AnalyticalGraphicsInc/cesium/issues/7567)
 
 ##### Fixes :wrench:
 * Fixed the value for `BlendFunction.ONE_MINUS_CONSTANT_COLOR`. [#7624](https://github.com/AnalyticalGraphicsInc/cesium/pull/7624)

Source/Scene/Cesium3DTileStyle.js

@@ -56,7 +56,7 @@ define([
      * @see {@link https://github.com/AnalyticalGraphicsInc/3d-tiles/tree/master/specification/Styling|3D Tiles Styling language}
      */
     function Cesium3DTileStyle(style) {
-        this._style = undefined;
+        this._style = {};
         this._ready = false;
 
         this._show = undefined;
@@ -112,9 +112,8 @@ define([
     }
 
     function setup(that, styleJson) {
-        that._style = clone(styleJson, true);
-
-        styleJson = defaultValue(styleJson, defaultValue.EMPTY_OBJECT);
+        styleJson = defaultValue(clone(styleJson, true), that._style);
+        that._style = styleJson;
 
         that.show = styleJson.show;
         that.color = styleJson.color;
@@ -161,6 +160,7 @@ define([
 
     function getExpression(tileStyle, value) {
         var defines = defaultValue(tileStyle._style, defaultValue.EMPTY_OBJECT).defines;
+
         if (!defined(value)) {
             return undefined;
         } else if (typeof value === 'boolean' || typeof value === 'number') {
@@ -173,6 +173,17 @@ define([
         return value;
     }
 
+    function getJsonFromExpression(expression) {
+        if (!defined(expression)) {
+            return undefined;
+        } else if (defined(expression.expression)) {
+            return expression.expression;
+        } else if (defined(expression.conditionsExpression)) {
+            return clone(expression.conditionsExpression, true);
+        }
+        return expression;
+    }
+
     defineProperties(Cesium3DTileStyle.prototype, {
         /**
          * Gets the object defining the style using the
@@ -183,7 +194,7 @@ define([
          * @type {Object}
          * @readonly
          *
-         * @default undefined
+         * @default {}
          *
          * @exception {DeveloperError} The style is not loaded.  Use Cesium3DTileStyle.readyPromise or wait for Cesium3DTileStyle.ready to be true.
          */
@@ -295,6 +306,7 @@ define([
             },
             set : function(value) {
                 this._show = getExpression(this, value);
+                this._style.show = getJsonFromExpression(this._show);
                 this._showShaderFunctionReady = false;
             }
         },
@@ -357,6 +369,7 @@ define([
             },
             set : function(value) {
                 this._color = getExpression(this, value);
+                this._style.color = getJsonFromExpression(this._color);
                 this._colorShaderFunctionReady = false;
             }
         },
@@ -424,6 +437,7 @@ define([
             },
             set : function(value) {
                 this._pointSize = getExpression(this, value);
+                this._style.pointSize = getJsonFromExpression(this._pointSize);
                 this._pointSizeShaderFunctionReady = false;
             }
         },
@@ -473,6 +487,7 @@ define([
             },
             set : function(value) {
                 this._pointOutlineColor = getExpression(this, value);
+                this._style.pointOutlineColor = getJsonFromExpression(this._pointOutlineColor);
             }
         },
 
@@ -521,6 +536,7 @@ define([
             },
             set : function(value) {
                 this._pointOutlineWidth = getExpression(this, value);
+                this._style.pointOutlineWidth = getJsonFromExpression(this._pointOutlineWidth);
             }
         },
 
@@ -569,6 +585,7 @@ define([
             },
             set : function(value) {
                 this._labelColor = getExpression(this, value);
+                this._style.labelColor = getJsonFromExpression(this._labelColor);
             }
         },
 
@@ -617,6 +634,7 @@ define([
             },
             set : function(value) {
                 this._labelOutlineColor = getExpression(this, value);
+                this._style.labelOutlineColor = getJsonFromExpression(this._labelOutlineColor);
             }
         },
 
@@ -665,6 +683,7 @@ define([
             },
             set : function(value) {
                 this._labelOutlineWidth = getExpression(this, value);
+                this._style.labelOutlineWidth = getJsonFromExpression(this._labelOutlineWidth);
             }
         },
 
@@ -713,6 +732,7 @@ define([
             },
             set : function(value) {
                 this._font = getExpression(this, value);
+                this._style.font = getJsonFromExpression(this._font);
             }
         },
 
@@ -761,6 +781,7 @@ define([
             },
             set : function(value) {
                 this._labelStyle = getExpression(this, value);
+                this._style.labelStyle = getJsonFromExpression(this._labelStyle);
             }
         },
 
@@ -809,6 +830,7 @@ define([
             },
             set : function(value) {
                 this._labelText = getExpression(this, value);
+                this._style.labelText = getJsonFromExpression(this._labelText);
             }
         },
 
@@ -857,6 +879,7 @@ define([
             },
             set : function(value) {
                 this._backgroundColor = getExpression(this, value);
+                this._style.backgroundColor = getJsonFromExpression(this._backgroundColor);
             }
         },
 
@@ -896,6 +919,7 @@ define([
             },
             set : function(value) {
                 this._backgroundPadding = getExpression(this, value);
+                this._style.backgroundPadding = getJsonFromExpression(this._backgroundPadding);
             }
         },
 
@@ -944,6 +968,7 @@ define([
             },
             set : function(value) {
                 this._backgroundEnabled = getExpression(this, value);
+                this._style.backgroundEnabled = getJsonFromExpression(this._backgroundEnabled);
             }
         },
 
@@ -983,6 +1008,7 @@ define([
             },
             set : function(value) {
                 this._scaleByDistance = getExpression(this, value);
+                this._style.scaleByDistance = getJsonFromExpression(this._scaleByDistance);
             }
         },
 
@@ -1022,6 +1048,7 @@ define([
             },
             set : function(value) {
                 this._translucencyByDistance = getExpression(this, value);
+                this._style.translucencyByDistance = getJsonFromExpression(this._translucencyByDistance);
             }
         },
 
@@ -1061,6 +1088,7 @@ define([
             },
             set : function(value) {
                 this._distanceDisplayCondition = getExpression(this, value);
+                this._style.distanceDisplayCondition = getJsonFromExpression(this._distanceDisplayCondition);
             }
         },
 
@@ -1109,6 +1137,7 @@ define([
             },
             set : function(value) {
                 this._heightOffset = getExpression(this, value);
+                this._style.heightOffset = getJsonFromExpression(this._heightOffset);
             }
         },
 
@@ -1157,6 +1186,7 @@ define([
             },
             set : function(value) {
                 this._anchorLineEnabled = getExpression(this, value);
+                this._style.anchorLineEnabled = getJsonFromExpression(this._anchorLineEnabled);
             }
         },
 
@@ -1205,6 +1235,7 @@ define([
             },
             set : function(value) {
                 this._anchorLineColor = getExpression(this, value);
+                this._style.anchorLineColor = getJsonFromExpression(this._anchorLineColor);
             }
         },
 
@@ -1253,6 +1284,7 @@ define([
             },
             set : function(value) {
                 this._image = getExpression(this, value);
+                this._style.image = getJsonFromExpression(this._image);
             }
         },
 
@@ -1292,6 +1324,7 @@ define([
             },
             set : function(value) {
                 this._disableDepthTestDistance = getExpression(this, value);
+                this._style.disableDepthTestDistance = getJsonFromExpression(this._disableDepthTestDistance);
             }
         },
 
@@ -1340,6 +1373,7 @@ define([
             },
             set : function(value) {
                 this._horizontalOrigin = getExpression(this, value);
+                this._style.horizontalOrigin = getJsonFromExpression(this._horizontalOrigin);
             }
         },
 
@@ -1388,6 +1422,7 @@ define([
             },
             set : function(value) {
                 this._verticalOrigin = getExpression(this, value);
+                this._style.verticalOrigin = getJsonFromExpression(this._verticalOrigin);
             }
         },
 
@@ -1436,6 +1471,7 @@ define([
             },
             set : function(value) {
                 this._labelHorizontalOrigin = getExpression(this, value);
+                this._style.labelHorizontalOrigin = getJsonFromExpression(this._labelHorizontalOrigin);
             }
         },
 
@@ -1484,6 +1520,7 @@ define([
             },
             set : function(value) {
                 this._labelVerticalOrigin = getExpression(this, value);
+                this._style.labelVerticalOrigin = getJsonFromExpression(this._labelVerticalOrigin);
             }
         },