@itwin/measure-tools-react
Version:
Frontend framework and tools for measurements
368 lines • 17.1 kB
JavaScript
/*---------------------------------------------------------------------------------------------
* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
* See LICENSE.md in the project root for license terms and full copyright notice.
*--------------------------------------------------------------------------------------------*/
import { ColorByName, ColorDef } from "@itwin/core-common";
/** List of well-known graphic styles. */
export var WellKnownGraphicStyleType;
(function (WellKnownGraphicStyleType) {
WellKnownGraphicStyleType["AreaMeasurement"] = "AreaMeasurement";
WellKnownGraphicStyleType["AreaMeasurementDynamic"] = "AreaMeasurementDynamic";
WellKnownGraphicStyleType["DistanceMeasurement"] = "DistanceMeasurement";
WellKnownGraphicStyleType["LocationMeasurement"] = "LocationMeasurement";
WellKnownGraphicStyleType["Rise"] = "Rise";
WellKnownGraphicStyleType["Run"] = "Run";
})(WellKnownGraphicStyleType || (WellKnownGraphicStyleType = {}));
/** Defines the placement of an icon relative to its parent. */
export var IconAlignment;
(function (IconAlignment) {
IconAlignment[IconAlignment["TopLeft"] = 0] = "TopLeft";
IconAlignment[IconAlignment["Top"] = 1] = "Top";
IconAlignment[IconAlignment["TopRight"] = 2] = "TopRight";
IconAlignment[IconAlignment["Left"] = 3] = "Left";
IconAlignment[IconAlignment["Center"] = 4] = "Center";
IconAlignment[IconAlignment["Right"] = 5] = "Right";
IconAlignment[IconAlignment["BottomLeft"] = 6] = "BottomLeft";
IconAlignment[IconAlignment["Bottom"] = 7] = "Bottom";
IconAlignment[IconAlignment["BottomRight"] = 8] = "BottomRight";
})(IconAlignment || (IconAlignment = {}));
export var TextOffsetType;
(function (TextOffsetType) {
TextOffsetType[TextOffsetType["Pixels"] = 0] = "Pixels";
TextOffsetType[TextOffsetType["Percentage"] = 1] = "Percentage";
})(TextOffsetType || (TextOffsetType = {}));
/** List of well-known text styles. */
export var WellKnownTextStyleType;
(function (WellKnownTextStyleType) {
WellKnownTextStyleType["AreaMeasurement"] = "AreaMeasurement";
WellKnownTextStyleType["DistanceMeasurement"] = "DistanceMeasurement";
WellKnownTextStyleType["LocationMeasurement"] = "LocationMeasurement";
WellKnownTextStyleType["Rise"] = "Rise";
WellKnownTextStyleType["Run"] = "Run";
WellKnownTextStyleType["HoverBox"] = "HoverBox";
})(WellKnownTextStyleType || (WellKnownTextStyleType = {}));
export class GraphicStyle {
constructor(props) {
this._lineColorDef = ColorDef.fromTbgr(props.lineColor);
this._fillColorDef = ColorDef.fromTbgr(props.fillColor);
this.lineWidth = props.lineWidth;
this.linePixels = props.linePixels;
this._backgroundColorDef = (undefined !== props.backgroundColor) ? ColorDef.fromTbgr(props.backgroundColor) : undefined;
this.backgroundLineWidth = props.backgroundLineWidth;
}
get lineColorDef() { return this._lineColorDef; }
get lineColor() { return this._lineColorDef.toJSON(); }
set lineColor(v) { this._lineColorDef = ColorDef.fromTbgr(v); }
get fillColorDef() { return this._fillColorDef; }
get fillColor() { return this._fillColorDef.toJSON(); }
set fillColor(v) { this._fillColorDef = ColorDef.fromTbgr(v); }
get backgroundColorDef() { return this._backgroundColorDef; }
get backgroundColor() { return undefined !== this._backgroundColorDef ? this._backgroundColorDef.toJSON() : undefined; }
set backgroundColor(v) { this._backgroundColorDef = undefined !== v ? ColorDef.fromTbgr(v) : undefined; }
/** Adds a Path to the builder with the provided symbology. */
addStyledPath(builder, path, useBackground) {
if (useBackground) {
this.applyBackground(builder);
builder.addPath(path);
}
this.applyStyle(builder);
builder.addPath(path);
}
/** Adds a Point String to the builder with the provided symbology. */
addStyledPointString(builder, points, useBackground) {
if (useBackground) {
this.applyBackground(builder);
builder.addPointString(points);
}
this.applyStyle(builder);
builder.addPointString(points);
}
/** Adds a Line String to the builder with the provided symbology. */
addStyledLineString(builder, points, useBackground) {
if (useBackground) {
this.applyBackground(builder);
builder.addLineString(points);
}
this.applyStyle(builder);
builder.addLineString(points);
}
/** Adds a Line to the builder with the provided symbology. */
addStyledLine(builder, line, useBackground) {
return this.addStyledLineString(builder, [line.point0Ref, line.point1Ref], useBackground);
}
/** Adds a Shape to the builder with the provided symbology. */
addStyledShape(builder, points, useBackground) {
if (useBackground) {
this.applyBackground(builder);
builder.addShape(points);
}
this.applyStyle(builder);
builder.addShape(points);
}
addStyledArc(builder, arc, useBackground) {
if (useBackground) {
this.applyBackground(builder);
builder.addArc(arc, false, false);
}
this.applyStyle(builder);
builder.addArc(arc, false, false);
}
applyBackground(builder) {
const color = this.backgroundColorDef || ColorDef.black;
const lineWidth = this.backgroundLineWidth || (this.lineWidth + GraphicStyle.defaultLineWidthPaddingForBackground);
builder.setSymbology(color, color, lineWidth);
}
applyStyle(builder) {
builder.setSymbology(this.lineColorDef, this.fillColorDef, this.lineWidth, this.linePixels);
}
clone() {
return new GraphicStyle(this);
}
}
GraphicStyle.defaultLineWidthPaddingForBackground = 4;
export class StyleSet {
/** Gets or sets the styleset's name */
get name() {
return this._name;
}
set name(name) {
this._name = name;
}
/** Gets or sets the optional fallback styleset */
get fallbackStyleSetName() {
return this._fallbackStyleSetName;
}
set fallbackStyleSetName(value) {
this._fallbackStyleSet = undefined;
this._fallbackStyleSetName = value;
}
/** Gets the fallback styleset instance, if it exists. */
get fallbackStyleSet() {
// If no name, there is no style to look up...the fallback needs to be explicitly set
if (!this._fallbackStyleSetName)
return undefined;
// Return cached or look up from map
if (this._fallbackStyleSet)
return this._fallbackStyleSet;
// Cache and return
this._fallbackStyleSet = StyleSet.getOrDefault(this._fallbackStyleSetName);
return this._fallbackStyleSet;
}
constructor(name) {
this._name = name;
this._graphicStyles = new Map();
this._textStyles = new Map();
}
getGraphicStyle(name) {
const style = this._graphicStyles.get(name);
if (style)
return style;
if (this.fallbackStyleSet)
return this.fallbackStyleSet.getGraphicStyle(name);
return undefined;
}
setGraphicStyle(name, styleProps) {
if (styleProps instanceof GraphicStyle)
this._graphicStyles.set(name, styleProps);
else
this._graphicStyles.set(name, new GraphicStyle(styleProps));
}
getTextStyle(name) {
const style = this._textStyles.get(name);
if (style)
return style;
if (this.fallbackStyleSet)
return this.fallbackStyleSet.getTextStyle(name);
return undefined;
}
setTextStyle(name, style) {
this._textStyles.set(name, style);
}
clone(newName) {
const copy = new StyleSet((newName) ? newName : this._name);
for (const kv of this._graphicStyles)
copy._graphicStyles.set(kv[0], kv[1].clone());
for (const kv of this._textStyles)
copy._textStyles.set(kv[0], { ...kv[1] });
copy.fallbackStyleSetName = this.fallbackStyleSetName;
return copy;
}
/** Returns the default StyleSet */
static get default() {
return this._styleSets.get("default");
}
/** Returns the default "locked" StyleSet for inactive/frozen elements that cannot be moved or manipulated. */
static get defaultLocked() {
return this._styleSets.get("default-locked");
}
/** Returns the StyleSet matching the name, or undefined. */
static get(name) {
return this._styleSets.get(name);
}
/** Returns the StyleSet maching the name or the 'default' set. */
static getOrDefault(name) {
return this._styleSets.get(name) || StyleSet.default;
}
/** Adds a StyleSet. */
static set(styleSet) {
this._styleSets.set(styleSet.name, styleSet);
}
}
StyleSet._styleSets = new Map();
/** Sets the alpha. 0 is fully transparent and 255 is fully opaque. */
function setAlphaToJson(c, alpha) {
return ColorDef.fromTbgr(c).withAlpha(alpha).toJSON();
}
/** Adds all the default values for the GraphicalStyle/TextStyle types. */
function createStyleSets() {
const s = new StyleSet("default");
StyleSet.set(s);
const MEASURE_ALPHA = 255;
const BOX_CORNER_RADIUS = 5.0;
// MeasureArea tool
s.setGraphicStyle(WellKnownGraphicStyleType.AreaMeasurement, {
lineColor: ColorByName.white,
fillColor: setAlphaToJson(ColorByName.white, 128),
lineWidth: 3,
});
s.setGraphicStyle(WellKnownGraphicStyleType.AreaMeasurementDynamic, {
lineColor: ColorByName.gray,
fillColor: setAlphaToJson(ColorByName.gray, 128),
lineWidth: 3,
});
s.setTextStyle(WellKnownTextStyleType.AreaMeasurement, {
textFont: "14px sans-serif",
textColor: ColorByName.black,
boxPadding: 6,
boxCornerRadius: BOX_CORNER_RADIUS,
boxColor: setAlphaToJson(ColorByName.white, MEASURE_ALPHA),
});
// MeasureDistance tool
s.setGraphicStyle(WellKnownGraphicStyleType.DistanceMeasurement, {
lineColor: setAlphaToJson(ColorByName.white, MEASURE_ALPHA),
fillColor: setAlphaToJson(ColorByName.white, MEASURE_ALPHA),
lineWidth: 3,
});
s.setTextStyle(WellKnownTextStyleType.DistanceMeasurement, {
textFont: "14px sans-serif",
textColor: ColorByName.black,
boxPadding: 6,
boxCornerRadius: BOX_CORNER_RADIUS,
boxColor: setAlphaToJson(ColorByName.white, MEASURE_ALPHA),
boxBorderWidth: 1.0,
});
s.setGraphicStyle(WellKnownGraphicStyleType.Rise, {
lineColor: ColorByName.lightGray,
fillColor: ColorByName.lightGray,
lineWidth: 2,
});
s.setTextStyle(WellKnownTextStyleType.Rise, {
textFont: "14px sans-serif",
textColor: ColorByName.black,
boxPadding: 6,
boxCornerRadius: BOX_CORNER_RADIUS,
boxColor: ColorByName.lightGray,
});
s.setGraphicStyle(WellKnownGraphicStyleType.Run, {
lineColor: ColorByName.lightGray,
fillColor: ColorByName.lightGray,
lineWidth: 2,
});
s.setTextStyle(WellKnownTextStyleType.Run, {
textFont: "14px sans-serif",
textColor: ColorByName.black,
boxPadding: 6,
boxCornerRadius: BOX_CORNER_RADIUS,
boxColor: ColorByName.lightGray,
});
// MeasureLocation tool
s.setGraphicStyle(WellKnownGraphicStyleType.LocationMeasurement, {
lineColor: setAlphaToJson(ColorByName.white, MEASURE_ALPHA),
fillColor: setAlphaToJson(ColorByName.white, MEASURE_ALPHA),
lineWidth: 9,
});
s.setTextStyle(WellKnownTextStyleType.LocationMeasurement, {
textFont: "14px sans-serif",
textLineHeight: 1.4,
textColor: ColorByName.black,
boxPadding: 6,
boxCornerRadius: BOX_CORNER_RADIUS,
boxColor: setAlphaToJson(ColorByName.white, MEASURE_ALPHA),
boxBorderWidth: 1.0,
});
s.setTextStyle(WellKnownTextStyleType.HoverBox, {
textFont: "14px sans-serif",
textColor: ColorByName.black,
boxPadding: 8,
boxColor: ColorByName.white,
boxBorderWidth: 2,
boxCornerRadius: BOX_CORNER_RADIUS,
textLineHeight: 1.4,
});
// Debatable if we should clone or set the fallback. I feel like default styles should be fully populated
const lockIconStyle = { iconSpec: "icon-lock", position: IconAlignment.Bottom, offset: { x: 0, y: 16 }, padding: 5, bgColor: setAlphaToJson(ColorByName.lightGrey, MEASURE_ALPHA), bgCornerRadius: 16, borderWidth: 1 };
// Locked distance
const defaultLocked = s.clone("default-locked");
defaultLocked.fallbackStyleSetName = s.name;
const lockedDistanceStyle = defaultLocked.getGraphicStyle(WellKnownGraphicStyleType.DistanceMeasurement);
lockedDistanceStyle.lineColor = setAlphaToJson(ColorByName.slateGrey, MEASURE_ALPHA);
lockedDistanceStyle.fillColor = setAlphaToJson(ColorByName.slateGrey, MEASURE_ALPHA);
const lockedDistanceTextStyle = defaultLocked.getTextStyle(WellKnownTextStyleType.DistanceMeasurement);
lockedDistanceTextStyle.boxColor = setAlphaToJson(ColorByName.lightGrey, MEASURE_ALPHA);
lockedDistanceTextStyle.icon = lockIconStyle;
// Locked area
const lockedAreaStyle = defaultLocked.getGraphicStyle(WellKnownGraphicStyleType.AreaMeasurement);
lockedAreaStyle.lineColor = ColorByName.slateGrey;
lockedAreaStyle.fillColor = setAlphaToJson(ColorByName.slateGrey, 128);
const lockedAreaTextStyle = defaultLocked.getTextStyle(WellKnownTextStyleType.AreaMeasurement);
lockedAreaTextStyle.boxColor = setAlphaToJson(ColorByName.lightGrey, MEASURE_ALPHA);
lockedAreaTextStyle.icon = lockIconStyle;
// Locked location
const lockedLocationStyle = defaultLocked.getGraphicStyle(WellKnownGraphicStyleType.LocationMeasurement);
lockedLocationStyle.lineColor = setAlphaToJson(ColorByName.slateGrey, MEASURE_ALPHA);
lockedLocationStyle.fillColor = setAlphaToJson(ColorByName.slateGrey, MEASURE_ALPHA);
const lockedLocationTextStyle = defaultLocked.getTextStyle(WellKnownTextStyleType.LocationMeasurement);
lockedLocationTextStyle.boxColor = setAlphaToJson(ColorByName.lightGrey, MEASURE_ALPHA);
lockedLocationTextStyle.icon = lockIconStyle;
// Locked hover box
const lockedHoverBoxStyle = defaultLocked.getTextStyle(WellKnownTextStyleType.HoverBox);
lockedHoverBoxStyle.boxColor = setAlphaToJson(ColorByName.lightGrey, MEASURE_ALPHA);
lockedHoverBoxStyle.icon = lockIconStyle;
StyleSet.set(defaultLocked);
// Faded (ghosted) style
const FADED_ALPHA = 64;
const faded = s.clone("faded");
faded.fallbackStyleSetName = s.name;
// Faded distance
const fadedDistanceStyle = faded.getGraphicStyle(WellKnownGraphicStyleType.DistanceMeasurement);
fadedDistanceStyle.lineColor = setAlphaToJson(ColorByName.lightGrey, FADED_ALPHA);
fadedDistanceStyle.fillColor = setAlphaToJson(ColorByName.lightGrey, FADED_ALPHA);
fadedDistanceStyle.backgroundColor = setAlphaToJson(ColorByName.lightGrey, FADED_ALPHA);
const fadedDistanceTextStyle = faded.getTextStyle(WellKnownTextStyleType.DistanceMeasurement);
fadedDistanceTextStyle.boxColor = setAlphaToJson(ColorByName.lightGrey, FADED_ALPHA * 2);
fadedDistanceTextStyle.boxBorderWidth = undefined;
// Faded area
const fadedAreaStyle = faded.getGraphicStyle(WellKnownGraphicStyleType.AreaMeasurement);
fadedAreaStyle.lineColor = setAlphaToJson(ColorByName.lightGrey, FADED_ALPHA);
fadedAreaStyle.fillColor = setAlphaToJson(ColorByName.lightGrey, FADED_ALPHA);
fadedAreaStyle.backgroundColor = setAlphaToJson(ColorByName.lightGrey, FADED_ALPHA);
const fadedAreaTextStyle = faded.getTextStyle(WellKnownTextStyleType.AreaMeasurement);
fadedAreaTextStyle.boxColor = setAlphaToJson(ColorByName.lightGrey, FADED_ALPHA * 2);
fadedAreaTextStyle.boxBorderWidth = undefined;
// Faded location
const fadedLocationStyle = faded.getGraphicStyle(WellKnownGraphicStyleType.LocationMeasurement);
fadedLocationStyle.lineColor = setAlphaToJson(ColorByName.lightGrey, FADED_ALPHA);
fadedLocationStyle.fillColor = setAlphaToJson(ColorByName.lightGrey, FADED_ALPHA);
fadedLocationStyle.backgroundColor = setAlphaToJson(ColorByName.lightGrey, FADED_ALPHA);
const fadedLocationTextStyle = faded.getTextStyle(WellKnownTextStyleType.LocationMeasurement);
fadedLocationTextStyle.boxColor = setAlphaToJson(ColorByName.lightGrey, FADED_ALPHA * 2);
fadedLocationTextStyle.boxBorderWidth = undefined;
// Faded hover box
const fadedHoverBoxStyle = faded.getTextStyle(WellKnownTextStyleType.HoverBox);
fadedHoverBoxStyle.boxColor = setAlphaToJson(ColorByName.lightGrey, FADED_ALPHA * 2);
fadedHoverBoxStyle.boxBorderWidth = undefined;
StyleSet.set(faded);
}
// Populate default styles
createStyleSets();
//# sourceMappingURL=GraphicStyle.js.map