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:/AnalyticalGraphicsInc/cesium/pull/7579)
+* `Cesium3DTileStyle.style` now has an empty `Object` as its default value, instead of `undefined`. [#7567](https:/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:/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:/AnalyticalGraphicsInc/cesium/pull/7579)
 * Added `backFaceCulling` and `normalShading` options to `PointCloudShading`. Both options are only applicable for point clouds containing normals. [#7399](https:/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:/AnalyticalGraphicsInc/cesium/pull/7286)
+* `Cesium3DTileStyle.style` reacts to updates and represents the current state of the style. [#7567](https:/AnalyticalGraphicsInc/cesium/issues/7567)
 
 ##### Fixes :wrench:
 * Fixed the value for `BlendFunction.ONE_MINUS_CONSTANT_COLOR`. [#7624](https:/AnalyticalGraphicsInc/cesium/pull/7624)

Source/Scene/Cesium3DTileStyle.js

@@ -56,7 +56,7 @@ define([
  * @see {@link https:/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);
  }
  },