@itwin/core-common
Version:
iTwin.js components common to frontend and backend
423 lines • 23.5 kB
JavaScript
/*---------------------------------------------------------------------------------------------
* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
* See LICENSE.md in the project root for license terms and full copyright notice.
*--------------------------------------------------------------------------------------------*/
/** @packageDocumentation
* @module Symbology
*/
import { compareNumbers } from "@itwin/core-bentley";
import { Point3d, Range1d, Vector3d } from "@itwin/core-geometry";
import { ColorDef } from "./ColorDef";
import { Gradient } from "./Gradient";
import { TextureTransparency } from "./TextureProps";
/** A thematic gradient mode used to generate and apply a thematic effect to a scene.
* @see [[ThematicGradientSettings.mode]]
* @public
* @extensions
*/
export var ThematicGradientMode;
(function (ThematicGradientMode) {
/** Apply a smooth color gradient to the scene. */
ThematicGradientMode[ThematicGradientMode["Smooth"] = 0] = "Smooth";
/** Apply a stepped color gradient to the scene. */
ThematicGradientMode[ThematicGradientMode["Stepped"] = 1] = "Stepped";
/** Apply a stepped color gradient to the scene with delimiters (lines between the color steps). Can only be used with [[ThematicDisplayMode.Height]]. */
ThematicGradientMode[ThematicGradientMode["SteppedWithDelimiter"] = 2] = "SteppedWithDelimiter";
/** Apply isolines to the scene to achieve an effect similar to a contour map. Can only be used with [[ThematicDisplayMode.Height]]. */
ThematicGradientMode[ThematicGradientMode["IsoLines"] = 3] = "IsoLines";
})(ThematicGradientMode || (ThematicGradientMode = {}));
/** Describes how transparency is computed when applying a thematic gradient to a surface.
* Each [[Gradient.KeyColor]] in [[ThematicGradientSettings.customKeys]] has a transparency value.
* Each surface to which the gradient is applied has its own transparency.
* The transparency mode determines how these two values are combined to compute the final transparency.
* @see [[ThematicGradientSettings.transparencyMode]].
* @public
* @extensions
*/
export var ThematicGradientTransparencyMode;
(function (ThematicGradientTransparencyMode) {
/** Ignore the gradient's transparency, applying only the surface's own transparency. */
ThematicGradientTransparencyMode[ThematicGradientTransparencyMode["SurfaceOnly"] = 0] = "SurfaceOnly";
/** The final transparency is computed from the product of the surface and gradient alpha channels.
* (Alpha is the inverse of transparency, where `alpha = (255 - transparency) / 255`).
* If the gradient color is opaque, this produces the same result as [[SurfaceOnly]].
*/
ThematicGradientTransparencyMode[ThematicGradientTransparencyMode["MultiplySurfaceAndGradient"] = 1] = "MultiplySurfaceAndGradient";
})(ThematicGradientTransparencyMode || (ThematicGradientTransparencyMode = {}));
/** A color scheme used to generate the colors of a thematic gradient within an applied range.
* @see [[ThematicGradientSettings.colorScheme]]
* @see [[ThematicDisplay.range]]
* @public
* @extensions
*/
export var ThematicGradientColorScheme;
(function (ThematicGradientColorScheme) {
/** A color gradient scheme that represents a blue-to-red gradation. */
ThematicGradientColorScheme[ThematicGradientColorScheme["BlueRed"] = 0] = "BlueRed";
/** A color gradient scheme that represents a red-to-blue gradation. */
ThematicGradientColorScheme[ThematicGradientColorScheme["RedBlue"] = 1] = "RedBlue";
/** A color gradient scheme that represents a monochrome (black-to-white) gradation. */
ThematicGradientColorScheme[ThematicGradientColorScheme["Monochrome"] = 2] = "Monochrome";
/** A color gradient scheme that suits a topographic gradation. */
ThematicGradientColorScheme[ThematicGradientColorScheme["Topographic"] = 3] = "Topographic";
/** A color gradient scheme that suits a sea-mountain gradation. */
ThematicGradientColorScheme[ThematicGradientColorScheme["SeaMountain"] = 4] = "SeaMountain";
/** A custom color gradient scheme configured by the user.
* @see [[ThematicGradientSettings.customKeys]]
*/
ThematicGradientColorScheme[ThematicGradientColorScheme["Custom"] = 5] = "Custom";
})(ThematicGradientColorScheme || (ThematicGradientColorScheme = {}));
/** Thematic settings specific to creating a color gradient used by [[ThematicDisplay]].
* @public
*/
export class ThematicGradientSettings {
/** The thematic image mode used to generate the gradient. Defaults to [[ThematicGradientMode.Smooth]]. */
mode;
/** The step count value used for [[ThematicGradientMode.Stepped]], [[ThematicGradientMode.SteppedWithDelimiter]], and [[ThematicGradientMode.IsoLines]]. Defaults to 10. Cannot be less than 2. */
stepCount;
/** The margin color used at the extremes of the gradient, when outside the applied range. Defaults to a black color using [[ColorDef.fromJSON]] with no arguments. */
marginColor;
/** The color scheme used to generate the colors of the gradient color within the applied range. Defaults to [[ThematicGradientColorScheme.BlueRed]]. */
colorScheme;
/** The key color values that must be provided when using a custom thematic color scheme.
* Defaults to empty, unless using a custom thematic color scheme. In that case, this defaults to two key colors going from white to black.
* When using a custom thematic color scheme, there must be at least two entries in here. If there are not, it will revert to the default settings.
*/
customKeys;
/** The percentage to mix in the original color with the thematic display gradient color (0-1).
* Applies to background map terrain and point clouds only. Defaults to 0. */
colorMix;
/** Specifies how the transparency is computed. Defaults to [[ThematicGradientTransparencyMode.SurfaceOnly]].
* @note This property is ignored for gradients applied using an [[AnalysisStyle]] via [[AnalysisStyleThematic]] - in that case, only the color and
* transparency of the thematic gradient are applied.
*/
transparencyMode;
static get margin() { return .001; } // A fixed portion of the gradient for out of range values.
static get contentRange() { return 1.0 - 2.0 * ThematicGradientSettings.margin; }
static get contentMax() { return 1.0 - ThematicGradientSettings.margin; }
static defaults = new ThematicGradientSettings({});
static _defaultCustomKeys = [[0.0, 255, 255, 255], [1.0, 0, 0, 0]];
/** @alpha */
get textureTransparency() {
let transp = TextureTransparency.Opaque;
if (ThematicGradientColorScheme.Custom === this.colorScheme) {
let haveOpaque = false;
let haveTransparent = false;
for (const key of this.customKeys) {
const isOpaque = key.color.isOpaque;
haveOpaque = haveOpaque || isOpaque;
haveTransparent = haveTransparent || !isOpaque;
}
if (haveTransparent)
transp = haveOpaque ? TextureTransparency.Mixed : TextureTransparency.Translucent;
}
if (transp !== TextureTransparency.Mixed)
if (this.marginColor.isOpaque !== (transp === TextureTransparency.Opaque))
transp = TextureTransparency.Mixed;
return transp;
}
equals(other) {
if (this.mode !== other.mode || this.stepCount !== other.stepCount || !this.marginColor.equals(other.marginColor)
|| this.colorScheme !== other.colorScheme || this.customKeys.length !== other.customKeys.length
|| this.colorMix !== other.colorMix || this.transparencyMode !== other.transparencyMode) {
return false;
}
return this.customKeys.every((key, index) => Gradient.keyColorEquals(key, other.customKeys[index]));
}
/** Compares two sets of thematic gradient settings.
* @param lhs First set of thematic gradient settings to compare
* @param rhs Second set of thematic gradient settings to compare
* @returns 0 if lhs is equivalent to rhs, a negative number if lhs compares less than rhs, or a positive number if lhs compares greater than rhs.
*/
static compare(lhs, rhs) {
let diff = 0;
if ((diff = compareNumbers(lhs.mode, rhs.mode)) !== 0)
return diff;
if ((diff = compareNumbers(lhs.stepCount, rhs.stepCount)) !== 0)
return diff;
if ((diff = compareNumbers(lhs.marginColor.tbgr, rhs.marginColor.tbgr)) !== 0)
return diff;
if ((diff = compareNumbers(lhs.colorScheme, rhs.colorScheme)) !== 0)
return diff;
if ((diff = compareNumbers(lhs.colorMix, rhs.colorMix)) !== 0)
return diff;
if ((diff = compareNumbers(lhs.customKeys.length, rhs.customKeys.length)) !== 0)
return diff;
if ((diff = compareNumbers(lhs.transparencyMode, rhs.transparencyMode)) !== 0)
return diff;
for (let i = 0; i < lhs.customKeys.length; i++)
if ((diff = compareNumbers(lhs.customKeys[i].color.tbgr, rhs.customKeys[i].color.tbgr)) !== 0)
return diff;
return diff;
}
constructor(json) {
this.customKeys = [];
if (undefined === json) {
this.mode = ThematicGradientMode.Smooth;
this.stepCount = 10;
this.marginColor = ColorDef.fromJSON();
this.colorScheme = ThematicGradientColorScheme.BlueRed;
this.colorMix = 0.0;
this.transparencyMode = ThematicGradientTransparencyMode.SurfaceOnly;
}
else {
this.mode = (json.mode !== undefined && json.mode !== null) ? json.mode : ThematicGradientMode.Smooth;
if (this.mode < ThematicGradientMode.Smooth || this.mode > ThematicGradientMode.IsoLines)
this.mode = ThematicGradientMode.Smooth;
this.stepCount = (typeof json.stepCount === "number") ? json.stepCount : 10;
if (this.stepCount < 2)
this.stepCount = 2;
this.marginColor = ColorDef.fromJSON(json.marginColor);
this.colorScheme = (json.colorScheme !== undefined && json.colorScheme !== null) ? json.colorScheme : ThematicGradientColorScheme.BlueRed;
if (this.colorScheme < ThematicGradientColorScheme.BlueRed || this.colorScheme > ThematicGradientColorScheme.Custom)
this.colorScheme = ThematicGradientColorScheme.BlueRed;
if (json.customKeys !== undefined && json.customKeys !== null)
json.customKeys.forEach((key) => this.customKeys.push(new Gradient.KeyColor(key)));
// Enforce 2 entries in custom color keys if violated
if (this.colorScheme === ThematicGradientColorScheme.Custom && this.customKeys.length < 2) {
this.customKeys = [];
for (const keyValue of ThematicGradientSettings._defaultCustomKeys)
this.customKeys.push(new Gradient.KeyColor({ value: keyValue[0], color: ColorDef.computeTbgrFromComponents(keyValue[1], keyValue[3], keyValue[2]) }));
}
this.colorMix = json.colorMix ?? 0.0;
this.transparencyMode = json.transparencyMode ?? ThematicGradientTransparencyMode.SurfaceOnly;
}
}
static fromJSON(json) {
return json ? new ThematicGradientSettings(json) : this.defaults;
}
toJSON() {
const props = {};
if (ThematicGradientMode.Smooth !== this.mode)
props.mode = this.mode;
if (10 !== this.stepCount)
props.stepCount = this.stepCount;
const marginColor = this.marginColor.toJSON();
if (0 !== marginColor)
props.marginColor = marginColor;
if (ThematicGradientColorScheme.BlueRed !== this.colorScheme)
props.colorScheme = this.colorScheme;
if (0 !== this.colorMix)
props.colorMix = this.colorMix;
if (ThematicGradientTransparencyMode.SurfaceOnly !== this.transparencyMode)
props.transparencyMode = this.transparencyMode;
if (this.customKeys.length > 0)
props.customKeys = this.customKeys.map((key) => { return { value: key.value, color: key.color.toJSON() }; });
return props;
}
/** Create a copy of this ThematicGradientSettings, optionally modifying some of its properties.
* @param changedProps JSON representation of the properties to change.
* @returns A ThematicGradientSettings with all of its properties set to match those of `this`, except those explicitly defined in `changedProps`.
*/
clone(changedProps) {
if (undefined === changedProps)
return ThematicGradientSettings.fromJSON(this.toJSON());
const props = {
mode: undefined !== changedProps.mode ? changedProps.mode : this.mode,
stepCount: undefined !== changedProps.stepCount ? changedProps.stepCount : this.stepCount,
marginColor: undefined !== changedProps.marginColor ? changedProps.marginColor : this.marginColor.tbgr,
colorScheme: undefined !== changedProps.colorScheme ? changedProps.colorScheme : this.colorScheme,
customKeys: undefined !== changedProps.customKeys ? changedProps.customKeys : this.customKeys.map((key) => ({ value: key.value, color: key.color.tbgr })),
colorMix: undefined !== changedProps.colorMix ? changedProps.colorMix : this.colorMix,
transparencyMode: changedProps.transparencyMode ?? this.transparencyMode,
};
return ThematicGradientSettings.fromJSON(props);
}
}
/** A sensor in world space, used for [[ThematicDisplayMode.InverseDistanceWeightedSensors]].
* @public
*/
export class ThematicDisplaySensor {
/** The world position of the sensor in X, Y, and Z. Defaults to {0,0,0}. */
position;
/** The value of the sensor used when accessing the thematic gradient texture; expected range is 0 to 1. Defaults to 0. */
value;
constructor(json) {
if (undefined === json) {
this.position = Point3d.fromJSON();
this.value = 0;
}
else {
this.position = Point3d.fromJSON(json.position);
this.value = (typeof json.value !== "number") ? 0 : json.value;
if (this.value < 0)
this.value = 0;
else if (this.value > 1)
this.value = 1;
}
}
equals(other) {
return (this.value === other.value) && this.position.isAlmostEqual(other.position);
}
static fromJSON(json) {
return new ThematicDisplaySensor(json);
}
toJSON() {
return {
position: this.position.toJSON(),
value: this.value,
};
}
}
/** Settings for sensor-based thematic display for [[ThematicDisplayMode.InverseDistanceWeightedSensors]].
* @public
*/
export class ThematicDisplaySensorSettings {
/** This is the list of sensors. Defaults to an empty array. */
sensors;
/** This is the distance cutoff in meters. For a position on screen to be affected by a sensor, it must be at least this close to the sensor.
* If this is zero or negative, then no distance cutoff is applied (all sensors affect all positions regardless of nearness).
* Defaults to zero.
* @note Using a suitable distance cutoff imparts a significant performance benefit. The larger this value becomes, performance will degrade.
*/
distanceCutoff;
constructor(json) {
this.sensors = [];
if (undefined !== json) {
if (json.sensors !== undefined && json.sensors !== null) {
json.sensors.forEach((sensorJSON) => this.sensors.push(ThematicDisplaySensor.fromJSON(sensorJSON)));
}
this.distanceCutoff = (typeof json.distanceCutoff === "number") ? json.distanceCutoff : 0;
}
else {
this.distanceCutoff = 0;
}
}
equals(other) {
if (this.distanceCutoff !== other.distanceCutoff)
return false;
const thisSensors = this.sensors;
const otherSensors = other.sensors;
if (thisSensors.length !== otherSensors.length)
return false;
for (let i = 0; i < thisSensors.length; i++) {
if (!thisSensors[i].equals(otherSensors[i]))
return false;
}
return true;
}
static fromJSON(json) {
return new ThematicDisplaySensorSettings(json);
}
toJSON() {
const json = {};
json.sensors = [];
for (const sensor of this.sensors) {
json.sensors.push(sensor.toJSON());
}
json.distanceCutoff = this.distanceCutoff;
return json;
}
}
/** The thematic display mode. This determines how to apply the thematic color gradient to the geometry.
* @public
* @extensions
*/
export var ThematicDisplayMode;
(function (ThematicDisplayMode) {
/** The color gradient will be mapped to surface geometry and point clouds based on world height in meters. */
ThematicDisplayMode[ThematicDisplayMode["Height"] = 0] = "Height";
/** The color gradient will be mapped to surface geometry and point clouds using inverse distance weighting based on world positions and corresponding values from a list of sensors.
* @note Performance will decrease as more sensors are added.
*/
ThematicDisplayMode[ThematicDisplayMode["InverseDistanceWeightedSensors"] = 1] = "InverseDistanceWeightedSensors";
/** The color gradient will be mapped to surface geometry based on the slope of the surface. The slope value is calculated based on the angle between the surface and the axis specified in the associated [[ThematicDisplay]] object.
* @note This display mode does not affect point clouds.
*/
ThematicDisplayMode[ThematicDisplayMode["Slope"] = 2] = "Slope";
/** The color gradient will be mapped to surface geometry based on the direction of a sun shining on the surface.
* @note This display mode does not affect point clouds.
*/
ThematicDisplayMode[ThematicDisplayMode["HillShade"] = 3] = "HillShade";
})(ThematicDisplayMode || (ThematicDisplayMode = {}));
/** The thematic display setup of a [[DisplayStyle3d]].
* Thematic display allows a user to colorize a scene using a color gradient in a way that provides a visual cue about certain attributes of the rendered geometry. This scene colorization will be done based on certain geometric attributes like height, surface slope, position of surfaces relative to a sun position, or geometric position relative to a list of sensors.
* The documentation for [[ThematicDisplayMode]] describes how each mode colorizes the scene.
* @note Applying thematic display to geometry prevents shadows from applying to the same geometry.
* @public
*/
export class ThematicDisplay {
/** The thematic display mode. This determines how to apply the thematic color gradient to the geometry. Defaults to [[ThematicDisplayMode.Height]]. */
displayMode;
/** The settings used to create a color gradient applied to the geometry. Defaults to an instantiation using [[ThematicGradientSettings.fromJSON]] with no arguments. */
gradientSettings;
/** The range to use when applying the thematic gradient for height and slope mode.
* For [[ThematicDisplayMode.Height]], this is world space in meters and represents the range in which to apply the gradient along the specified axis.
* For [[ThematicDisplayMode.Slope]], this is a range in radians with a minimum low value of 0 degrees and a maximum high value of 90 degrees.
* Defaults to a null range.
*/
range;
/** For [[ThematicDisplayMode.Height]], this is the axis along which to apply the thematic gradient in the scene. For [[ThematicDisplayMode.Slope]], the slope of a surface is calculated in relation to this axis. Defaults to {0,0,0}. */
axis;
/** For [[ThematicDisplayMode.HillShade]], this is the direction of the sun in world space. Defaults to {0,0,0}. */
sunDirection;
/** For [[ThematicDisplayMode.InverseDistanceWeightedSensors]], these are the settings that control the sensors. Defaults to an instantiation using [[ThematicDisplaySensorSettings.fromJSON]] with no arguments.
* @public
*/
sensorSettings;
equals(other) {
if (this.displayMode !== other.displayMode)
return false;
if (!this.gradientSettings.equals(other.gradientSettings))
return false;
if (!this.range.isAlmostEqual(other.range))
return false;
if (!this.axis.isAlmostEqual(other.axis))
return false;
if (!this.sunDirection.isAlmostEqual(other.sunDirection))
return false;
if (!this.sensorSettings.equals(other.sensorSettings))
return false;
return true;
}
constructor(json) {
if (undefined === json) {
this.displayMode = ThematicDisplayMode.Height;
this.gradientSettings = ThematicGradientSettings.fromJSON();
this.axis = Vector3d.fromJSON();
this.range = Range1d.fromJSON();
this.sunDirection = Vector3d.fromJSON();
this.sensorSettings = ThematicDisplaySensorSettings.fromJSON();
}
else {
this.displayMode = (json.displayMode !== undefined && json.displayMode !== null) ? json.displayMode : ThematicDisplayMode.Height;
if (this.displayMode < ThematicDisplayMode.Height || this.displayMode > ThematicDisplayMode.HillShade)
this.displayMode = ThematicDisplayMode.Height;
this.gradientSettings = ThematicGradientSettings.fromJSON(json.gradientSettings);
this.axis = Vector3d.fromJSON(json.axis);
this.range = Range1d.fromJSON(json.range);
this.sunDirection = Vector3d.fromJSON(json.sunDirection);
this.sensorSettings = ThematicDisplaySensorSettings.fromJSON(json.sensorSettings);
}
if (ThematicDisplayMode.Height !== this.displayMode) {
// Disallow isoline and stepped-with-delimiter gradient modes in any mode other than height.
if (ThematicGradientMode.IsoLines === this.gradientSettings.mode || ThematicGradientMode.SteppedWithDelimiter === this.gradientSettings.mode) {
const gradientSettingsJSON = this.gradientSettings.toJSON();
gradientSettingsJSON.mode = ThematicGradientMode.Smooth;
this.gradientSettings = ThematicGradientSettings.fromJSON(gradientSettingsJSON);
}
if (ThematicDisplayMode.Slope === this.displayMode) {
if (this.range.low < 0.0)
this.range.low = 0.0;
if (this.range.high > 90.0)
this.range.high = 90.0;
}
}
}
static fromJSON(json) {
return new ThematicDisplay(json);
}
toJSON() {
const json = {
displayMode: this.displayMode,
gradientSettings: this.gradientSettings.toJSON(),
axis: this.axis.toJSON(),
sunDirection: this.sunDirection.toJSON(),
range: this.range.toJSON(),
};
if (this.sensorSettings.sensors.length > 0)
json.sensorSettings = this.sensorSettings.toJSON();
return json;
}
}
//# sourceMappingURL=ThematicDisplay.js.map