@itwin/imodel-components-react 4.10.0-dev.1 → 4.10.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +9 -1
- package/lib/cjs/imodel-components-react/color/AlphaSlider.d.ts.map +1 -1
- package/lib/cjs/imodel-components-react/color/AlphaSlider.js +8 -6
- package/lib/cjs/imodel-components-react/color/AlphaSlider.js.map +1 -1
- package/lib/cjs/imodel-components-react/color/HueSlider.d.ts.map +1 -1
- package/lib/cjs/imodel-components-react/color/HueSlider.js +8 -6
- package/lib/cjs/imodel-components-react/color/HueSlider.js.map +1 -1
- package/lib/cjs/imodel-components-react/color/SaturationPicker.js +8 -8
- package/lib/cjs/imodel-components-react/color/SaturationPicker.js.map +1 -1
- package/lib/cjs/imodel-components-react/editors/ColorEditor.js +1 -1
- package/lib/cjs/imodel-components-react/editors/ColorEditor.js.map +1 -1
- package/lib/cjs/imodel-components-react/editors/WeightEditor.d.ts.map +1 -1
- package/lib/cjs/imodel-components-react/editors/WeightEditor.js.map +1 -1
- package/lib/cjs/imodel-components-react/inputs/QuantityNumberInput.js +4 -4
- package/lib/cjs/imodel-components-react/inputs/QuantityNumberInput.js.map +1 -1
- package/lib/cjs/imodel-components-react/lineweight/WeightPickerButton.js +3 -3
- package/lib/cjs/imodel-components-react/lineweight/WeightPickerButton.js.map +1 -1
- package/lib/cjs/imodel-components-react/navigationaids/DrawingNavigationAid.d.ts.map +1 -1
- package/lib/cjs/imodel-components-react/navigationaids/DrawingNavigationAid.js +2 -1
- package/lib/cjs/imodel-components-react/navigationaids/DrawingNavigationAid.js.map +1 -1
- package/lib/cjs/imodel-components-react/quantityformat/FormatSample.js +1 -1
- package/lib/cjs/imodel-components-react/quantityformat/FormatSample.js.map +1 -1
- package/lib/cjs/imodel-components-react/quantityformat/MiscFormatOptions.js +1 -1
- package/lib/cjs/imodel-components-react/quantityformat/MiscFormatOptions.js.map +1 -1
- package/lib/cjs/imodel-components-react/timeline/InlineEdit.js +2 -2
- package/lib/cjs/imodel-components-react/timeline/InlineEdit.js.map +1 -1
- package/lib/cjs/imodel-components-react/timeline/PlayButton.d.ts +24 -0
- package/lib/cjs/imodel-components-react/timeline/PlayButton.d.ts.map +1 -0
- package/lib/cjs/imodel-components-react/timeline/{PlayerButton.js → PlayButton.js} +5 -25
- package/lib/cjs/imodel-components-react/timeline/PlayButton.js.map +1 -0
- package/lib/cjs/imodel-components-react/timeline/{PlayerButton.scss → PlayButton.scss} +1 -1
- package/lib/cjs/imodel-components-react/timeline/Scrubber.d.ts +0 -1
- package/lib/cjs/imodel-components-react/timeline/Scrubber.d.ts.map +1 -1
- package/lib/cjs/imodel-components-react/timeline/Scrubber.js.map +1 -1
- package/lib/cjs/imodel-components-react/timeline/SolarTimeline.js +2 -2
- package/lib/cjs/imodel-components-react/timeline/SolarTimeline.js.map +1 -1
- package/lib/cjs/imodel-components-react/timeline/TimelineComponent.d.ts +28 -66
- package/lib/cjs/imodel-components-react/timeline/TimelineComponent.d.ts.map +1 -1
- package/lib/cjs/imodel-components-react/timeline/TimelineComponent.js +216 -329
- package/lib/cjs/imodel-components-react/timeline/TimelineComponent.js.map +1 -1
- package/lib/cjs/imodel-components-react/timeline/TimelineComponent.scss +27 -140
- package/lib/cjs/imodel-components-react.d.ts +0 -1
- package/lib/cjs/imodel-components-react.d.ts.map +1 -1
- package/lib/cjs/imodel-components-react.js +0 -1
- package/lib/cjs/imodel-components-react.js.map +1 -1
- package/lib/esm/imodel-components-react/color/AlphaSlider.d.ts.map +1 -1
- package/lib/esm/imodel-components-react/color/AlphaSlider.js +8 -6
- package/lib/esm/imodel-components-react/color/AlphaSlider.js.map +1 -1
- package/lib/esm/imodel-components-react/color/HueSlider.d.ts.map +1 -1
- package/lib/esm/imodel-components-react/color/HueSlider.js +8 -6
- package/lib/esm/imodel-components-react/color/HueSlider.js.map +1 -1
- package/lib/esm/imodel-components-react/color/SaturationPicker.js +8 -8
- package/lib/esm/imodel-components-react/color/SaturationPicker.js.map +1 -1
- package/lib/esm/imodel-components-react/editors/ColorEditor.js +1 -1
- package/lib/esm/imodel-components-react/editors/ColorEditor.js.map +1 -1
- package/lib/esm/imodel-components-react/editors/WeightEditor.d.ts.map +1 -1
- package/lib/esm/imodel-components-react/editors/WeightEditor.js.map +1 -1
- package/lib/esm/imodel-components-react/inputs/QuantityNumberInput.js +4 -4
- package/lib/esm/imodel-components-react/inputs/QuantityNumberInput.js.map +1 -1
- package/lib/esm/imodel-components-react/lineweight/WeightPickerButton.js +3 -3
- package/lib/esm/imodel-components-react/lineweight/WeightPickerButton.js.map +1 -1
- package/lib/esm/imodel-components-react/navigationaids/DrawingNavigationAid.d.ts.map +1 -1
- package/lib/esm/imodel-components-react/navigationaids/DrawingNavigationAid.js +2 -1
- package/lib/esm/imodel-components-react/navigationaids/DrawingNavigationAid.js.map +1 -1
- package/lib/esm/imodel-components-react/quantityformat/FormatSample.js +1 -1
- package/lib/esm/imodel-components-react/quantityformat/FormatSample.js.map +1 -1
- package/lib/esm/imodel-components-react/quantityformat/MiscFormatOptions.js +1 -1
- package/lib/esm/imodel-components-react/quantityformat/MiscFormatOptions.js.map +1 -1
- package/lib/esm/imodel-components-react/timeline/InlineEdit.js +2 -2
- package/lib/esm/imodel-components-react/timeline/InlineEdit.js.map +1 -1
- package/lib/esm/imodel-components-react/timeline/PlayButton.d.ts +24 -0
- package/lib/esm/imodel-components-react/timeline/PlayButton.d.ts.map +1 -0
- package/lib/esm/imodel-components-react/timeline/{PlayerButton.js → PlayButton.js} +4 -23
- package/lib/esm/imodel-components-react/timeline/PlayButton.js.map +1 -0
- package/lib/esm/imodel-components-react/timeline/{PlayerButton.scss → PlayButton.scss} +1 -1
- package/lib/esm/imodel-components-react/timeline/Scrubber.d.ts +0 -1
- package/lib/esm/imodel-components-react/timeline/Scrubber.d.ts.map +1 -1
- package/lib/esm/imodel-components-react/timeline/Scrubber.js.map +1 -1
- package/lib/esm/imodel-components-react/timeline/SolarTimeline.js +1 -1
- package/lib/esm/imodel-components-react/timeline/SolarTimeline.js.map +1 -1
- package/lib/esm/imodel-components-react/timeline/TimelineComponent.d.ts +28 -66
- package/lib/esm/imodel-components-react/timeline/TimelineComponent.d.ts.map +1 -1
- package/lib/esm/imodel-components-react/timeline/TimelineComponent.js +217 -327
- package/lib/esm/imodel-components-react/timeline/TimelineComponent.js.map +1 -1
- package/lib/esm/imodel-components-react/timeline/TimelineComponent.scss +27 -140
- package/lib/esm/imodel-components-react.d.ts +0 -1
- package/lib/esm/imodel-components-react.d.ts.map +1 -1
- package/lib/esm/imodel-components-react.js +0 -1
- package/lib/esm/imodel-components-react.js.map +1 -1
- package/package.json +16 -16
- package/lib/cjs/imodel-components-react/timeline/PlayerButton.d.ts +0 -34
- package/lib/cjs/imodel-components-react/timeline/PlayerButton.d.ts.map +0 -1
- package/lib/cjs/imodel-components-react/timeline/PlayerButton.js.map +0 -1
- package/lib/esm/imodel-components-react/timeline/PlayerButton.d.ts +0 -34
- package/lib/esm/imodel-components-react/timeline/PlayerButton.d.ts.map +0 -1
- package/lib/esm/imodel-components-react/timeline/PlayerButton.js.map +0 -1
package/CHANGELOG.md
CHANGED
|
@@ -1,6 +1,14 @@
|
|
|
1
1
|
# Change Log - @itwin/imodel-components-react
|
|
2
2
|
|
|
3
|
-
This log was last generated on
|
|
3
|
+
This log was last generated on Mon, 26 Feb 2024 15:50:45 GMT and should not be manually modified.
|
|
4
|
+
|
|
5
|
+
## 4.10.0
|
|
6
|
+
Mon, 26 Feb 2024 15:50:45 GMT
|
|
7
|
+
|
|
8
|
+
### Updates
|
|
9
|
+
|
|
10
|
+
- Fix timeline to keep fractional duration unchanged when total duration is changed.
|
|
11
|
+
- Use iTwinUI 3.x.
|
|
4
12
|
|
|
5
13
|
## 4.9.0
|
|
6
14
|
Tue, 06 Feb 2024 08:56:40 GMT
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"AlphaSlider.d.ts","sourceRoot":"","sources":["../../../../src/imodel-components-react/color/AlphaSlider.tsx"],"names":[],"mappings":"AAIA;;GAEG;AAEH,OAAO,oBAAoB,CAAC;AAE5B,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAC;AAGrD;;GAEG;AACH,MAAM,WAAW,gBACf,SAAQ,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,EAC1C,WAAW;IACb,kFAAkF;IAClF,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,qDAAqD;IACrD,aAAa,CAAC,EAAE,CAAC,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC,GAAG,SAAS,CAAC;IACtD,yDAAyD;IACzD,KAAK,EAAE,MAAM,CAAC;CACf;AAED;;GAEG;AACH,qBAAa,WAAY,SAAQ,KAAK,CAAC,aAAa,CAAC,gBAAgB,CAAC;IACpE,OAAO,CAAC,UAAU,CAA+B;IACjD,OAAO,CAAC,kBAAkB,CAC2B;IAErD,gBAAgB;gBACJ,KAAK,EAAE,gBAAgB;IAInC,OAAO,CAAC,gBAAgB,CAgEtB;IAEF,gBAAgB;IACA,oBAAoB;IAIpC,OAAO,CAAC,SAAS,CAef;IAEF,OAAO,CAAC,YAAY,CAMlB;IAEF,OAAO,CAAC,UAAU,
|
|
1
|
+
{"version":3,"file":"AlphaSlider.d.ts","sourceRoot":"","sources":["../../../../src/imodel-components-react/color/AlphaSlider.tsx"],"names":[],"mappings":"AAIA;;GAEG;AAEH,OAAO,oBAAoB,CAAC;AAE5B,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAC;AAGrD;;GAEG;AACH,MAAM,WAAW,gBACf,SAAQ,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,EAC1C,WAAW;IACb,kFAAkF;IAClF,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,qDAAqD;IACrD,aAAa,CAAC,EAAE,CAAC,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC,GAAG,SAAS,CAAC;IACtD,yDAAyD;IACzD,KAAK,EAAE,MAAM,CAAC;CACf;AAED;;GAEG;AACH,qBAAa,WAAY,SAAQ,KAAK,CAAC,aAAa,CAAC,gBAAgB,CAAC;IACpE,OAAO,CAAC,UAAU,CAA+B;IACjD,OAAO,CAAC,kBAAkB,CAC2B;IAErD,gBAAgB;gBACJ,KAAK,EAAE,gBAAgB;IAInC,OAAO,CAAC,gBAAgB,CAgEtB;IAEF,gBAAgB;IACA,oBAAoB;IAIpC,OAAO,CAAC,SAAS,CAef;IAEF,OAAO,CAAC,YAAY,CAMlB;IAEF,OAAO,CAAC,UAAU,CAkChB;IAEF,OAAO,CAAC,UAAU,CAEhB;IAEF,OAAO,CAAC,qBAAqB;IAK7B,gBAAgB;IACA,MAAM,IAAI,KAAK,CAAC,SAAS;CA0C1C"}
|
|
@@ -133,24 +133,26 @@ class AlphaSlider extends React.PureComponent {
|
|
|
133
133
|
};
|
|
134
134
|
this._onKeyDown = (evt) => {
|
|
135
135
|
let newTransparency;
|
|
136
|
-
if (evt.key === ts_key_enum_1.Key.ArrowLeft
|
|
136
|
+
if (evt.key === ts_key_enum_1.Key.ArrowLeft.valueOf() ||
|
|
137
|
+
evt.key === ts_key_enum_1.Key.ArrowDown.valueOf()) {
|
|
137
138
|
newTransparency = this.props.alpha - (evt.ctrlKey ? 0.1 : 0.05);
|
|
138
139
|
}
|
|
139
|
-
else if (evt.key === ts_key_enum_1.Key.ArrowRight
|
|
140
|
+
else if (evt.key === ts_key_enum_1.Key.ArrowRight.valueOf() ||
|
|
141
|
+
evt.key === ts_key_enum_1.Key.ArrowUp.valueOf()) {
|
|
140
142
|
newTransparency = this.props.alpha + (evt.ctrlKey ? 0.1 : 0.05);
|
|
141
143
|
}
|
|
142
|
-
else if (evt.key === ts_key_enum_1.Key.PageDown) {
|
|
144
|
+
else if (evt.key === ts_key_enum_1.Key.PageDown.valueOf()) {
|
|
143
145
|
newTransparency = this.props.alpha - (evt.ctrlKey ? 0.5 : 0.25);
|
|
144
146
|
}
|
|
145
|
-
else if (evt.key === ts_key_enum_1.Key.PageUp) {
|
|
147
|
+
else if (evt.key === ts_key_enum_1.Key.PageUp.valueOf()) {
|
|
146
148
|
newTransparency = this.props.alpha + (evt.ctrlKey ? 0.5 : 0.25);
|
|
147
149
|
}
|
|
148
|
-
else if (evt.key === ts_key_enum_1.Key.Home) {
|
|
150
|
+
else if (evt.key === ts_key_enum_1.Key.Home.valueOf()) {
|
|
149
151
|
newTransparency = 0;
|
|
150
152
|
}
|
|
151
153
|
else {
|
|
152
154
|
// istanbul ignore else
|
|
153
|
-
if (evt.key === ts_key_enum_1.Key.End) {
|
|
155
|
+
if (evt.key === ts_key_enum_1.Key.End.valueOf()) {
|
|
154
156
|
newTransparency = 1;
|
|
155
157
|
}
|
|
156
158
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"AlphaSlider.js","sourceRoot":"","sources":["../../../../src/imodel-components-react/color/AlphaSlider.tsx"],"names":[],"mappings":"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","sourcesContent":["/*---------------------------------------------------------------------------------------------\n * Copyright (c) Bentley Systems, Incorporated. All rights reserved.\n * See LICENSE.md in the project root for license terms and full copyright notice.\n *--------------------------------------------------------------------------------------------*/\n/** @packageDocumentation\n * @module Color\n */\n\nimport \"./AlphaSlider.scss\";\nimport classnames from \"classnames\";\nimport * as React from \"react\";\nimport { Key } from \"ts-key-enum\";\nimport type { CommonProps } from \"@itwin/core-react\";\nimport { UiIModelComponents } from \"../UiIModelComponents\";\n\n/** Properties for the [[AlphaSlider]] React component\n * @public\n */\nexport interface AlphaSliderProps\n extends React.HTMLAttributes<HTMLDivElement>,\n CommonProps {\n /** true if slider is oriented horizontal, else vertical orientation is assumed */\n isHorizontal?: boolean;\n /** function to run when user selects color swatch */\n onAlphaChange?: ((alpha: number) => void) | undefined;\n /** Alpha value between 0 (transparent) and 1 (opaque) */\n alpha: number;\n}\n\n/** AlphaSlider component used to set the alpha value.\n * @public\n */\nexport class AlphaSlider extends React.PureComponent<AlphaSliderProps> {\n private _container: HTMLDivElement | null = null;\n private _transparencyLabel =\n UiIModelComponents.translate(\"color.transparency\");\n\n /** @internal */\n constructor(props: AlphaSliderProps) {\n super(props);\n }\n\n private _calculateChange = (\n e: React.MouseEvent<HTMLDivElement> | React.TouchEvent<HTMLDivElement>,\n isHorizontal: boolean,\n alpha: number,\n container: HTMLDivElement\n ): number | undefined => {\n e.preventDefault();\n const { width: containerWidth, height: containerHeight } =\n container.getBoundingClientRect();\n\n let x = 0;\n if (\"pageX\" in e) {\n x = e.pageX;\n } else {\n // istanbul ignore if\n if (undefined === e.touches) return undefined;\n x = e.touches[0].pageX;\n }\n // istanbul ignore if\n if (undefined === x) return undefined;\n\n let y = 0;\n if (\"pageY\" in e) {\n y = e.pageY;\n } else {\n // istanbul ignore if\n if (undefined === e.touches) return;\n y = e.touches[0].pageY;\n }\n // istanbul ignore if\n if (undefined === y) return undefined;\n\n const left = x - (container.getBoundingClientRect().left + window.scrollX);\n const top = y - (container.getBoundingClientRect().top + window.scrollY);\n\n let t = 0;\n\n if (!isHorizontal) {\n // istanbul ignore next\n if (top < 0) {\n t = 1;\n } else if (top > containerHeight) {\n t = 0;\n } else {\n t = 1 - top / containerHeight;\n }\n } else {\n // horizontal\n // istanbul ignore next\n if (left < 0) {\n t = 0;\n } else if (left > containerWidth) {\n t = 1;\n } else {\n t = left / containerWidth;\n }\n }\n\n // istanbul ignore if\n if (t < 0) t = 0;\n // istanbul ignore if\n if (t > 1) t = 1;\n // istanbul ignore next\n return alpha !== t ? t : undefined;\n };\n\n /** @internal */\n public override componentWillUnmount() {\n this._unbindEventListeners();\n }\n\n private _onChange = (\n e: React.MouseEvent<HTMLDivElement> | React.TouchEvent<HTMLDivElement>\n ) => {\n // istanbul ignore else\n if (this._container && this.props.onAlphaChange) {\n const change = this._calculateChange(\n e,\n this.props.isHorizontal ? this.props.isHorizontal : false,\n this.props.alpha,\n this._container\n );\n undefined !== change &&\n typeof this.props.onAlphaChange === \"function\" &&\n this.props.onAlphaChange(change);\n }\n };\n\n private _onMouseDown = (e: React.MouseEvent<HTMLDivElement>) => {\n this._onChange(e);\n // istanbul ignore else\n if (this._container) this._container.focus();\n window.addEventListener(\"mousemove\", this._onChange as any);\n window.addEventListener(\"mouseup\", this._onMouseUp);\n };\n\n private _onKeyDown = (evt: React.KeyboardEvent<HTMLDivElement>) => {\n let newTransparency: number | undefined;\n if (evt.key === Key.ArrowLeft || evt.key === Key.ArrowDown) {\n newTransparency = this.props.alpha - (evt.ctrlKey ? 0.1 : 0.05);\n } else if (evt.key === Key.ArrowRight || evt.key === Key.ArrowUp) {\n newTransparency = this.props.alpha + (evt.ctrlKey ? 0.1 : 0.05);\n } else if (evt.key === Key.PageDown) {\n newTransparency = this.props.alpha - (evt.ctrlKey ? 0.5 : 0.25);\n } else if (evt.key === Key.PageUp) {\n newTransparency = this.props.alpha + (evt.ctrlKey ? 0.5 : 0.25);\n } else if (evt.key === Key.Home) {\n newTransparency = 0;\n } else {\n // istanbul ignore else\n if (evt.key === Key.End) {\n newTransparency = 1;\n }\n }\n\n // istanbul ignore else\n if (undefined !== newTransparency) {\n // istanbul ignore if\n if (newTransparency > 1) newTransparency = 1;\n // istanbul ignore if\n if (newTransparency < 0) newTransparency = 0;\n // istanbul ignore else\n if (this.props.onAlphaChange) this.props.onAlphaChange(newTransparency);\n }\n };\n\n private _onMouseUp = () => {\n this._unbindEventListeners();\n };\n\n private _unbindEventListeners() {\n window.removeEventListener(\"mousemove\", this._onChange as any);\n window.removeEventListener(\"mouseup\", this._onMouseUp);\n }\n\n /** @internal */\n public override render(): React.ReactNode {\n const containerClasses = classnames(\n this.props.isHorizontal\n ? \"components-alpha-container-horizontal\"\n : \"components-alpha-container-vertical\",\n this.props.className\n );\n\n const pointerStyle: React.CSSProperties = this.props.isHorizontal\n ? { left: `${this.props.alpha * 100}%` }\n : { left: `0px`, top: `${-(this.props.alpha * 100) + 100}%` };\n\n return (\n <div\n className={containerClasses}\n style={this.props.style}\n data-testid=\"alpha-container\"\n >\n <div\n data-testid=\"alpha-slider\"\n role=\"slider\"\n aria-label={this._transparencyLabel}\n aria-valuemin={0}\n aria-valuemax={1}\n aria-valuenow={this.props.alpha}\n className=\"components-alpha-slider\"\n ref={(container) => (this._container = container)}\n onMouseDown={this._onMouseDown}\n onTouchMove={this._onChange}\n onTouchStart={this._onChange}\n tabIndex={0}\n onKeyDown={this._onKeyDown}\n >\n <div\n style={pointerStyle}\n className=\"components-alpha-pointer\"\n data-testid=\"alpha-pointer\"\n />\n </div>\n </div>\n );\n }\n}\n"]}
|
|
1
|
+
{"version":3,"file":"AlphaSlider.js","sourceRoot":"","sources":["../../../../src/imodel-components-react/color/AlphaSlider.tsx"],"names":[],"mappings":"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","sourcesContent":["/*---------------------------------------------------------------------------------------------\n * Copyright (c) Bentley Systems, Incorporated. All rights reserved.\n * See LICENSE.md in the project root for license terms and full copyright notice.\n *--------------------------------------------------------------------------------------------*/\n/** @packageDocumentation\n * @module Color\n */\n\nimport \"./AlphaSlider.scss\";\nimport classnames from \"classnames\";\nimport * as React from \"react\";\nimport { Key } from \"ts-key-enum\";\nimport type { CommonProps } from \"@itwin/core-react\";\nimport { UiIModelComponents } from \"../UiIModelComponents\";\n\n/** Properties for the [[AlphaSlider]] React component\n * @public\n */\nexport interface AlphaSliderProps\n extends React.HTMLAttributes<HTMLDivElement>,\n CommonProps {\n /** true if slider is oriented horizontal, else vertical orientation is assumed */\n isHorizontal?: boolean;\n /** function to run when user selects color swatch */\n onAlphaChange?: ((alpha: number) => void) | undefined;\n /** Alpha value between 0 (transparent) and 1 (opaque) */\n alpha: number;\n}\n\n/** AlphaSlider component used to set the alpha value.\n * @public\n */\nexport class AlphaSlider extends React.PureComponent<AlphaSliderProps> {\n private _container: HTMLDivElement | null = null;\n private _transparencyLabel =\n UiIModelComponents.translate(\"color.transparency\");\n\n /** @internal */\n constructor(props: AlphaSliderProps) {\n super(props);\n }\n\n private _calculateChange = (\n e: React.MouseEvent<HTMLDivElement> | React.TouchEvent<HTMLDivElement>,\n isHorizontal: boolean,\n alpha: number,\n container: HTMLDivElement\n ): number | undefined => {\n e.preventDefault();\n const { width: containerWidth, height: containerHeight } =\n container.getBoundingClientRect();\n\n let x = 0;\n if (\"pageX\" in e) {\n x = e.pageX;\n } else {\n // istanbul ignore if\n if (undefined === e.touches) return undefined;\n x = e.touches[0].pageX;\n }\n // istanbul ignore if\n if (undefined === x) return undefined;\n\n let y = 0;\n if (\"pageY\" in e) {\n y = e.pageY;\n } else {\n // istanbul ignore if\n if (undefined === e.touches) return;\n y = e.touches[0].pageY;\n }\n // istanbul ignore if\n if (undefined === y) return undefined;\n\n const left = x - (container.getBoundingClientRect().left + window.scrollX);\n const top = y - (container.getBoundingClientRect().top + window.scrollY);\n\n let t = 0;\n\n if (!isHorizontal) {\n // istanbul ignore next\n if (top < 0) {\n t = 1;\n } else if (top > containerHeight) {\n t = 0;\n } else {\n t = 1 - top / containerHeight;\n }\n } else {\n // horizontal\n // istanbul ignore next\n if (left < 0) {\n t = 0;\n } else if (left > containerWidth) {\n t = 1;\n } else {\n t = left / containerWidth;\n }\n }\n\n // istanbul ignore if\n if (t < 0) t = 0;\n // istanbul ignore if\n if (t > 1) t = 1;\n // istanbul ignore next\n return alpha !== t ? t : undefined;\n };\n\n /** @internal */\n public override componentWillUnmount() {\n this._unbindEventListeners();\n }\n\n private _onChange = (\n e: React.MouseEvent<HTMLDivElement> | React.TouchEvent<HTMLDivElement>\n ) => {\n // istanbul ignore else\n if (this._container && this.props.onAlphaChange) {\n const change = this._calculateChange(\n e,\n this.props.isHorizontal ? this.props.isHorizontal : false,\n this.props.alpha,\n this._container\n );\n undefined !== change &&\n typeof this.props.onAlphaChange === \"function\" &&\n this.props.onAlphaChange(change);\n }\n };\n\n private _onMouseDown = (e: React.MouseEvent<HTMLDivElement>) => {\n this._onChange(e);\n // istanbul ignore else\n if (this._container) this._container.focus();\n window.addEventListener(\"mousemove\", this._onChange as any);\n window.addEventListener(\"mouseup\", this._onMouseUp);\n };\n\n private _onKeyDown = (evt: React.KeyboardEvent<HTMLDivElement>) => {\n let newTransparency: number | undefined;\n if (\n evt.key === Key.ArrowLeft.valueOf() ||\n evt.key === Key.ArrowDown.valueOf()\n ) {\n newTransparency = this.props.alpha - (evt.ctrlKey ? 0.1 : 0.05);\n } else if (\n evt.key === Key.ArrowRight.valueOf() ||\n evt.key === Key.ArrowUp.valueOf()\n ) {\n newTransparency = this.props.alpha + (evt.ctrlKey ? 0.1 : 0.05);\n } else if (evt.key === Key.PageDown.valueOf()) {\n newTransparency = this.props.alpha - (evt.ctrlKey ? 0.5 : 0.25);\n } else if (evt.key === Key.PageUp.valueOf()) {\n newTransparency = this.props.alpha + (evt.ctrlKey ? 0.5 : 0.25);\n } else if (evt.key === Key.Home.valueOf()) {\n newTransparency = 0;\n } else {\n // istanbul ignore else\n if (evt.key === Key.End.valueOf()) {\n newTransparency = 1;\n }\n }\n\n // istanbul ignore else\n if (undefined !== newTransparency) {\n // istanbul ignore if\n if (newTransparency > 1) newTransparency = 1;\n // istanbul ignore if\n if (newTransparency < 0) newTransparency = 0;\n // istanbul ignore else\n if (this.props.onAlphaChange) this.props.onAlphaChange(newTransparency);\n }\n };\n\n private _onMouseUp = () => {\n this._unbindEventListeners();\n };\n\n private _unbindEventListeners() {\n window.removeEventListener(\"mousemove\", this._onChange as any);\n window.removeEventListener(\"mouseup\", this._onMouseUp);\n }\n\n /** @internal */\n public override render(): React.ReactNode {\n const containerClasses = classnames(\n this.props.isHorizontal\n ? \"components-alpha-container-horizontal\"\n : \"components-alpha-container-vertical\",\n this.props.className\n );\n\n const pointerStyle: React.CSSProperties = this.props.isHorizontal\n ? { left: `${this.props.alpha * 100}%` }\n : { left: `0px`, top: `${-(this.props.alpha * 100) + 100}%` };\n\n return (\n <div\n className={containerClasses}\n style={this.props.style}\n data-testid=\"alpha-container\"\n >\n <div\n data-testid=\"alpha-slider\"\n role=\"slider\"\n aria-label={this._transparencyLabel}\n aria-valuemin={0}\n aria-valuemax={1}\n aria-valuenow={this.props.alpha}\n className=\"components-alpha-slider\"\n ref={(container) => (this._container = container)}\n onMouseDown={this._onMouseDown}\n onTouchMove={this._onChange}\n onTouchStart={this._onChange}\n tabIndex={0}\n onKeyDown={this._onKeyDown}\n >\n <div\n style={pointerStyle}\n className=\"components-alpha-pointer\"\n data-testid=\"alpha-pointer\"\n />\n </div>\n </div>\n );\n }\n}\n"]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"HueSlider.d.ts","sourceRoot":"","sources":["../../../../src/imodel-components-react/color/HueSlider.tsx"],"names":[],"mappings":"AAIA;;GAEG;AAEH,OAAO,kBAAkB,CAAC;AAE1B,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,oBAAoB,CAAC;AACnD,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAC;AAgErD;;GAEG;AACH,MAAM,WAAW,cACf,SAAQ,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,EAC1C,WAAW;IACb,kFAAkF;IAClF,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,+CAA+C;IAC/C,WAAW,CAAC,EAAE,CAAC,CAAC,GAAG,EAAE,QAAQ,KAAK,IAAI,CAAC,GAAG,SAAS,CAAC;IACpD,sBAAsB;IACtB,GAAG,EAAE,QAAQ,CAAC;CACf;AAED;;GAEG;AACH,wBAAgB,SAAS,CAAC,EACxB,YAAY,EACZ,WAAW,EACX,GAAG,EACH,SAAS,EACT,KAAK,GACN,EAAE,cAAc,
|
|
1
|
+
{"version":3,"file":"HueSlider.d.ts","sourceRoot":"","sources":["../../../../src/imodel-components-react/color/HueSlider.tsx"],"names":[],"mappings":"AAIA;;GAEG;AAEH,OAAO,kBAAkB,CAAC;AAE1B,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,oBAAoB,CAAC;AACnD,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAC;AAgErD;;GAEG;AACH,MAAM,WAAW,cACf,SAAQ,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,EAC1C,WAAW;IACb,kFAAkF;IAClF,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,+CAA+C;IAC/C,WAAW,CAAC,EAAE,CAAC,CAAC,GAAG,EAAE,QAAQ,KAAK,IAAI,CAAC,GAAG,SAAS,CAAC;IACpD,sBAAsB;IACtB,GAAG,EAAE,QAAQ,CAAC;CACf;AAED;;GAEG;AACH,wBAAgB,SAAS,CAAC,EACxB,YAAY,EACZ,WAAW,EACX,GAAG,EACH,SAAS,EACT,KAAK,GACN,EAAE,cAAc,qBA0LhB"}
|
|
@@ -162,24 +162,26 @@ function HueSlider({ isHorizontal, onHueChange, hsv, className, style, }) {
|
|
|
162
162
|
const onKeyDown = React.useCallback((evt) => {
|
|
163
163
|
let newHue;
|
|
164
164
|
const hueValue = hsv.h;
|
|
165
|
-
if (evt.key === ts_key_enum_1.Key.ArrowLeft
|
|
165
|
+
if (evt.key === ts_key_enum_1.Key.ArrowLeft.valueOf() ||
|
|
166
|
+
evt.key === ts_key_enum_1.Key.ArrowDown.valueOf()) {
|
|
166
167
|
newHue = hueValue - (evt.ctrlKey ? 10 : 1);
|
|
167
168
|
}
|
|
168
|
-
else if (evt.key === ts_key_enum_1.Key.ArrowRight
|
|
169
|
+
else if (evt.key === ts_key_enum_1.Key.ArrowRight.valueOf() ||
|
|
170
|
+
evt.key === ts_key_enum_1.Key.ArrowUp.valueOf()) {
|
|
169
171
|
newHue = hueValue + (evt.ctrlKey ? 10 : 1);
|
|
170
172
|
}
|
|
171
|
-
else if (evt.key === ts_key_enum_1.Key.PageDown) {
|
|
173
|
+
else if (evt.key === ts_key_enum_1.Key.PageDown.valueOf()) {
|
|
172
174
|
newHue = hueValue - (evt.ctrlKey ? 180 : 60);
|
|
173
175
|
}
|
|
174
|
-
else if (evt.key === ts_key_enum_1.Key.PageUp) {
|
|
176
|
+
else if (evt.key === ts_key_enum_1.Key.PageUp.valueOf()) {
|
|
175
177
|
newHue = hueValue + (evt.ctrlKey ? 180 : 60);
|
|
176
178
|
}
|
|
177
|
-
else if (evt.key === ts_key_enum_1.Key.Home) {
|
|
179
|
+
else if (evt.key === ts_key_enum_1.Key.Home.valueOf()) {
|
|
178
180
|
newHue = 0;
|
|
179
181
|
}
|
|
180
182
|
else {
|
|
181
183
|
// istanbul ignore else
|
|
182
|
-
if (evt.key === ts_key_enum_1.Key.End) {
|
|
184
|
+
if (evt.key === ts_key_enum_1.Key.End.valueOf()) {
|
|
183
185
|
newHue = 359;
|
|
184
186
|
}
|
|
185
187
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"HueSlider.js","sourceRoot":"","sources":["../../../../src/imodel-components-react/color/HueSlider.tsx"],"names":[],"mappings":"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","sourcesContent":["/*---------------------------------------------------------------------------------------------\n * Copyright (c) Bentley Systems, Incorporated. All rights reserved.\n * See LICENSE.md in the project root for license terms and full copyright notice.\n *--------------------------------------------------------------------------------------------*/\n/** @packageDocumentation\n * @module Color\n */\n\nimport \"./HueSlider.scss\";\nimport classnames from \"classnames\";\nimport * as React from \"react\";\nimport { Key } from \"ts-key-enum\";\nimport type { HSVColor } from \"@itwin/core-common\";\nimport type { CommonProps } from \"@itwin/core-react\";\nimport { UiIModelComponents } from \"../UiIModelComponents\";\n\n// hue is a value from 0 to 360\nfunction calculateHue(currentPos: number, high: number, isVertical: boolean) {\n // istanbul ignore next\n if (currentPos <= 0) {\n return isVertical ? 359 : 0;\n } else if (currentPos >= high) {\n return isVertical ? 0 : 359;\n } else {\n let percent = (currentPos * 100) / high;\n if (isVertical) percent = 100 - percent;\n return Math.round((359 * percent) / 100);\n }\n}\n\nfunction calculateChange(\n currentHue: number,\n e: React.MouseEvent<HTMLDivElement> | React.TouchEvent<HTMLDivElement>,\n isHorizontal: boolean,\n container: HTMLDivElement\n) {\n const {\n width: containerWidth,\n height: containerHeight,\n top: containerTop,\n left: containerLeft,\n } = container.getBoundingClientRect();\n\n let x: number | undefined;\n if (\"pageX\" in e) {\n x = e.pageX;\n } else {\n // istanbul ignore if\n if (undefined === e.touches || 0 === e.touches.length) return currentHue;\n x = e.touches[0].pageX;\n }\n // istanbul ignore if\n if (undefined === x) return currentHue;\n\n let y: number | undefined;\n if (\"pageY\" in e) {\n y = e.pageY;\n } else {\n // istanbul ignore if\n if (undefined === e.touches || 0 === e.touches.length) return currentHue;\n y = e.touches[0].pageY;\n }\n // istanbul ignore if\n if (undefined === y) return currentHue;\n\n const pointerX = x - (containerLeft + window.scrollX);\n const pointerY = y - (containerTop + window.scrollY);\n\n if (!isHorizontal) {\n // vertical\n return calculateHue(pointerY, containerHeight, true);\n } else {\n // horizontal\n return calculateHue(pointerX, containerWidth, false);\n }\n}\n\n/** Properties for the [[HueSlider]] React component\n * @beta\n */\nexport interface HueSliderProps\n extends React.HTMLAttributes<HTMLDivElement>,\n CommonProps {\n /** true if slider is oriented horizontal, else vertical orientation is assumed */\n isHorizontal?: boolean;\n /** function to run when user hue is changed */\n onHueChange?: ((hue: HSVColor) => void) | undefined;\n /** HSV Color Value */\n hsv: HSVColor;\n}\n\n/** HueSlider component used to set the hue value.\n * @beta\n */\nexport function HueSlider({\n isHorizontal,\n onHueChange,\n hsv,\n className,\n style,\n}: HueSliderProps) {\n const container = React.useRef<HTMLDivElement>(null);\n const [hueLabel] = React.useState(() =>\n UiIModelComponents.translate(\"color.hue\")\n );\n const isDragging = React.useRef(false);\n\n const onChange = React.useCallback(\n (\n e: React.MouseEvent<HTMLDivElement> | React.TouchEvent<HTMLDivElement>\n ) => {\n // istanbul ignore else\n if (container.current) {\n const newHue = calculateChange(\n hsv.h,\n e,\n !!isHorizontal,\n container.current\n );\n // istanbul ignore else\n const newColor = hsv.clone(newHue);\n // istanbul ignore else\n if (onHueChange) onHueChange(newColor);\n }\n },\n [isHorizontal, hsv, onHueChange]\n );\n\n const onDragging = React.useCallback(\n (\n e: React.MouseEvent<HTMLDivElement> | React.TouchEvent<HTMLDivElement>\n ) => {\n // istanbul ignore else\n if (isDragging.current) {\n onChange(e);\n }\n },\n [onChange]\n );\n\n const onMouseUp = React.useCallback(() => {\n // istanbul ignore else\n if (isDragging.current) {\n isDragging.current = false;\n }\n }, []);\n\n const onTouchEnd = React.useCallback(\n (event: React.TouchEvent<HTMLDivElement>) => {\n event.preventDefault();\n\n // istanbul ignore else\n if (isDragging.current) {\n onChange(event);\n isDragging.current = false;\n }\n },\n [onChange]\n );\n\n const onMouseDown = React.useCallback(\n (e: React.MouseEvent<HTMLDivElement>) => {\n e.preventDefault();\n\n // istanbul ignore else\n if (e.target !== e.currentTarget) {\n // istanbul ignore else\n if (!isDragging.current) {\n document.addEventListener(\"mouseup\", onMouseUp, {\n capture: true,\n once: true,\n });\n isDragging.current = true;\n }\n }\n\n onChange(e);\n\n // istanbul ignore else\n if (container.current) container.current.focus();\n },\n [onChange, onMouseUp]\n );\n\n const onTouchStart = React.useCallback(\n (e: React.TouchEvent<HTMLDivElement>) => {\n // istanbul ignore else\n if (e.target !== e.currentTarget) isDragging.current = true;\n\n onChange(e);\n\n // istanbul ignore else\n if (container.current) container.current.focus();\n },\n [onChange]\n );\n\n const onKeyDown = React.useCallback(\n (evt: React.KeyboardEvent<HTMLDivElement>) => {\n let newHue: number | undefined;\n const hueValue = hsv.h;\n if (evt.key === Key.ArrowLeft || evt.key === Key.ArrowDown) {\n newHue = hueValue - (evt.ctrlKey ? 10 : 1);\n } else if (evt.key === Key.ArrowRight || evt.key === Key.ArrowUp) {\n newHue = hueValue + (evt.ctrlKey ? 10 : 1);\n } else if (evt.key === Key.PageDown) {\n newHue = hueValue - (evt.ctrlKey ? 180 : 60);\n } else if (evt.key === Key.PageUp) {\n newHue = hueValue + (evt.ctrlKey ? 180 : 60);\n } else if (evt.key === Key.Home) {\n newHue = 0;\n } else {\n // istanbul ignore else\n if (evt.key === Key.End) {\n newHue = 359;\n }\n }\n\n // istanbul ignore else\n if (undefined !== newHue) {\n // istanbul ignore if\n if (newHue > 359) newHue = 359; // 360 is same as zero\n // istanbul ignore if\n if (newHue < 0) newHue = 0;\n\n const newColor = hsv.clone(newHue);\n // istanbul ignore else\n if (onHueChange) onHueChange(newColor);\n evt.preventDefault();\n }\n },\n [hsv, onHueChange]\n );\n\n const containerClasses = classnames(\n isHorizontal\n ? \"components-hue-container-horizontal\"\n : \"components-hue-container-vertical\",\n className\n );\n\n const pointerStyle: React.CSSProperties = isHorizontal\n ? {\n left: `${(hsv.h * 100) / 360}%`,\n backgroundColor: `hsl(${hsv.h} ,100%, 50%)`,\n }\n : {\n left: `0px`,\n top: `${-((hsv.h * 100) / 360) + 100}%`,\n backgroundColor: `hsl(${hsv.h} ,100%, 50%)`,\n };\n\n return (\n <div className={containerClasses} style={style} data-testid=\"hue-container\">\n <div\n data-testid=\"hue-slider\"\n role=\"slider\"\n aria-label={hueLabel}\n aria-valuemin={0}\n aria-valuemax={360}\n aria-valuenow={hsv.h}\n className=\"components-hue-slider\"\n ref={container}\n onMouseDown={onMouseDown}\n onMouseMove={onDragging}\n onTouchMove={onDragging}\n onMouseUp={onMouseUp}\n onTouchStart={onTouchStart}\n onTouchEnd={onTouchEnd}\n tabIndex={0}\n onKeyDown={onKeyDown}\n >\n <div\n style={pointerStyle}\n className=\"components-hue-pointer\"\n data-testid=\"hue-pointer\"\n />\n </div>\n </div>\n );\n}\n"]}
|
|
1
|
+
{"version":3,"file":"HueSlider.js","sourceRoot":"","sources":["../../../../src/imodel-components-react/color/HueSlider.tsx"],"names":[],"mappings":"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","sourcesContent":["/*---------------------------------------------------------------------------------------------\n * Copyright (c) Bentley Systems, Incorporated. All rights reserved.\n * See LICENSE.md in the project root for license terms and full copyright notice.\n *--------------------------------------------------------------------------------------------*/\n/** @packageDocumentation\n * @module Color\n */\n\nimport \"./HueSlider.scss\";\nimport classnames from \"classnames\";\nimport * as React from \"react\";\nimport { Key } from \"ts-key-enum\";\nimport type { HSVColor } from \"@itwin/core-common\";\nimport type { CommonProps } from \"@itwin/core-react\";\nimport { UiIModelComponents } from \"../UiIModelComponents\";\n\n// hue is a value from 0 to 360\nfunction calculateHue(currentPos: number, high: number, isVertical: boolean) {\n // istanbul ignore next\n if (currentPos <= 0) {\n return isVertical ? 359 : 0;\n } else if (currentPos >= high) {\n return isVertical ? 0 : 359;\n } else {\n let percent = (currentPos * 100) / high;\n if (isVertical) percent = 100 - percent;\n return Math.round((359 * percent) / 100);\n }\n}\n\nfunction calculateChange(\n currentHue: number,\n e: React.MouseEvent<HTMLDivElement> | React.TouchEvent<HTMLDivElement>,\n isHorizontal: boolean,\n container: HTMLDivElement\n) {\n const {\n width: containerWidth,\n height: containerHeight,\n top: containerTop,\n left: containerLeft,\n } = container.getBoundingClientRect();\n\n let x: number | undefined;\n if (\"pageX\" in e) {\n x = e.pageX;\n } else {\n // istanbul ignore if\n if (undefined === e.touches || 0 === e.touches.length) return currentHue;\n x = e.touches[0].pageX;\n }\n // istanbul ignore if\n if (undefined === x) return currentHue;\n\n let y: number | undefined;\n if (\"pageY\" in e) {\n y = e.pageY;\n } else {\n // istanbul ignore if\n if (undefined === e.touches || 0 === e.touches.length) return currentHue;\n y = e.touches[0].pageY;\n }\n // istanbul ignore if\n if (undefined === y) return currentHue;\n\n const pointerX = x - (containerLeft + window.scrollX);\n const pointerY = y - (containerTop + window.scrollY);\n\n if (!isHorizontal) {\n // vertical\n return calculateHue(pointerY, containerHeight, true);\n } else {\n // horizontal\n return calculateHue(pointerX, containerWidth, false);\n }\n}\n\n/** Properties for the [[HueSlider]] React component\n * @beta\n */\nexport interface HueSliderProps\n extends React.HTMLAttributes<HTMLDivElement>,\n CommonProps {\n /** true if slider is oriented horizontal, else vertical orientation is assumed */\n isHorizontal?: boolean;\n /** function to run when user hue is changed */\n onHueChange?: ((hue: HSVColor) => void) | undefined;\n /** HSV Color Value */\n hsv: HSVColor;\n}\n\n/** HueSlider component used to set the hue value.\n * @beta\n */\nexport function HueSlider({\n isHorizontal,\n onHueChange,\n hsv,\n className,\n style,\n}: HueSliderProps) {\n const container = React.useRef<HTMLDivElement>(null);\n const [hueLabel] = React.useState(() =>\n UiIModelComponents.translate(\"color.hue\")\n );\n const isDragging = React.useRef(false);\n\n const onChange = React.useCallback(\n (\n e: React.MouseEvent<HTMLDivElement> | React.TouchEvent<HTMLDivElement>\n ) => {\n // istanbul ignore else\n if (container.current) {\n const newHue = calculateChange(\n hsv.h,\n e,\n !!isHorizontal,\n container.current\n );\n // istanbul ignore else\n const newColor = hsv.clone(newHue);\n // istanbul ignore else\n if (onHueChange) onHueChange(newColor);\n }\n },\n [isHorizontal, hsv, onHueChange]\n );\n\n const onDragging = React.useCallback(\n (\n e: React.MouseEvent<HTMLDivElement> | React.TouchEvent<HTMLDivElement>\n ) => {\n // istanbul ignore else\n if (isDragging.current) {\n onChange(e);\n }\n },\n [onChange]\n );\n\n const onMouseUp = React.useCallback(() => {\n // istanbul ignore else\n if (isDragging.current) {\n isDragging.current = false;\n }\n }, []);\n\n const onTouchEnd = React.useCallback(\n (event: React.TouchEvent<HTMLDivElement>) => {\n event.preventDefault();\n\n // istanbul ignore else\n if (isDragging.current) {\n onChange(event);\n isDragging.current = false;\n }\n },\n [onChange]\n );\n\n const onMouseDown = React.useCallback(\n (e: React.MouseEvent<HTMLDivElement>) => {\n e.preventDefault();\n\n // istanbul ignore else\n if (e.target !== e.currentTarget) {\n // istanbul ignore else\n if (!isDragging.current) {\n document.addEventListener(\"mouseup\", onMouseUp, {\n capture: true,\n once: true,\n });\n isDragging.current = true;\n }\n }\n\n onChange(e);\n\n // istanbul ignore else\n if (container.current) container.current.focus();\n },\n [onChange, onMouseUp]\n );\n\n const onTouchStart = React.useCallback(\n (e: React.TouchEvent<HTMLDivElement>) => {\n // istanbul ignore else\n if (e.target !== e.currentTarget) isDragging.current = true;\n\n onChange(e);\n\n // istanbul ignore else\n if (container.current) container.current.focus();\n },\n [onChange]\n );\n\n const onKeyDown = React.useCallback(\n (evt: React.KeyboardEvent<HTMLDivElement>) => {\n let newHue: number | undefined;\n const hueValue = hsv.h;\n if (\n evt.key === Key.ArrowLeft.valueOf() ||\n evt.key === Key.ArrowDown.valueOf()\n ) {\n newHue = hueValue - (evt.ctrlKey ? 10 : 1);\n } else if (\n evt.key === Key.ArrowRight.valueOf() ||\n evt.key === Key.ArrowUp.valueOf()\n ) {\n newHue = hueValue + (evt.ctrlKey ? 10 : 1);\n } else if (evt.key === Key.PageDown.valueOf()) {\n newHue = hueValue - (evt.ctrlKey ? 180 : 60);\n } else if (evt.key === Key.PageUp.valueOf()) {\n newHue = hueValue + (evt.ctrlKey ? 180 : 60);\n } else if (evt.key === Key.Home.valueOf()) {\n newHue = 0;\n } else {\n // istanbul ignore else\n if (evt.key === Key.End.valueOf()) {\n newHue = 359;\n }\n }\n\n // istanbul ignore else\n if (undefined !== newHue) {\n // istanbul ignore if\n if (newHue > 359) newHue = 359; // 360 is same as zero\n // istanbul ignore if\n if (newHue < 0) newHue = 0;\n\n const newColor = hsv.clone(newHue);\n // istanbul ignore else\n if (onHueChange) onHueChange(newColor);\n evt.preventDefault();\n }\n },\n [hsv, onHueChange]\n );\n\n const containerClasses = classnames(\n isHorizontal\n ? \"components-hue-container-horizontal\"\n : \"components-hue-container-vertical\",\n className\n );\n\n const pointerStyle: React.CSSProperties = isHorizontal\n ? {\n left: `${(hsv.h * 100) / 360}%`,\n backgroundColor: `hsl(${hsv.h} ,100%, 50%)`,\n }\n : {\n left: `0px`,\n top: `${-((hsv.h * 100) / 360) + 100}%`,\n backgroundColor: `hsl(${hsv.h} ,100%, 50%)`,\n };\n\n return (\n <div className={containerClasses} style={style} data-testid=\"hue-container\">\n <div\n data-testid=\"hue-slider\"\n role=\"slider\"\n aria-label={hueLabel}\n aria-valuemin={0}\n aria-valuemax={360}\n aria-valuenow={hsv.h}\n className=\"components-hue-slider\"\n ref={container}\n onMouseDown={onMouseDown}\n onMouseMove={onDragging}\n onTouchMove={onDragging}\n onMouseUp={onMouseUp}\n onTouchStart={onTouchStart}\n onTouchEnd={onTouchEnd}\n tabIndex={0}\n onKeyDown={onKeyDown}\n >\n <div\n style={pointerStyle}\n className=\"components-hue-pointer\"\n data-testid=\"hue-pointer\"\n />\n </div>\n </div>\n );\n}\n"]}
|
|
@@ -162,30 +162,30 @@ function SaturationPicker({ onSaturationChange, hsv, className, style, }) {
|
|
|
162
162
|
const onKeyDown = React.useCallback((evt) => {
|
|
163
163
|
const h = hsv.h;
|
|
164
164
|
let { s, v } = { ...hsv };
|
|
165
|
-
if (evt.key === ts_key_enum_1.Key.ArrowLeft) {
|
|
165
|
+
if (evt.key === ts_key_enum_1.Key.ArrowLeft.valueOf()) {
|
|
166
166
|
s -= evt.ctrlKey ? 10 : 1;
|
|
167
167
|
}
|
|
168
|
-
else if (evt.key === ts_key_enum_1.Key.ArrowDown) {
|
|
168
|
+
else if (evt.key === ts_key_enum_1.Key.ArrowDown.valueOf()) {
|
|
169
169
|
v -= evt.ctrlKey ? 10 : 1;
|
|
170
170
|
}
|
|
171
|
-
else if (evt.key === ts_key_enum_1.Key.ArrowRight) {
|
|
171
|
+
else if (evt.key === ts_key_enum_1.Key.ArrowRight.valueOf()) {
|
|
172
172
|
s += evt.ctrlKey ? 10 : 1;
|
|
173
173
|
}
|
|
174
|
-
else if (evt.key === ts_key_enum_1.Key.ArrowUp) {
|
|
174
|
+
else if (evt.key === ts_key_enum_1.Key.ArrowUp.valueOf()) {
|
|
175
175
|
v += evt.ctrlKey ? 10 : 1;
|
|
176
176
|
}
|
|
177
|
-
else if (evt.key === ts_key_enum_1.Key.PageDown) {
|
|
177
|
+
else if (evt.key === ts_key_enum_1.Key.PageDown.valueOf()) {
|
|
178
178
|
v = 0;
|
|
179
179
|
}
|
|
180
|
-
else if (evt.key === ts_key_enum_1.Key.PageUp) {
|
|
180
|
+
else if (evt.key === ts_key_enum_1.Key.PageUp.valueOf()) {
|
|
181
181
|
v = 100;
|
|
182
182
|
}
|
|
183
|
-
else if (evt.key === ts_key_enum_1.Key.Home) {
|
|
183
|
+
else if (evt.key === ts_key_enum_1.Key.Home.valueOf()) {
|
|
184
184
|
s = 0;
|
|
185
185
|
}
|
|
186
186
|
else {
|
|
187
187
|
// istanbul ignore else
|
|
188
|
-
if (evt.key === ts_key_enum_1.Key.End) {
|
|
188
|
+
if (evt.key === ts_key_enum_1.Key.End.valueOf()) {
|
|
189
189
|
s = 100;
|
|
190
190
|
}
|
|
191
191
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"SaturationPicker.js","sourceRoot":"","sources":["../../../../src/imodel-components-react/color/SaturationPicker.tsx"],"names":[],"mappings":";AAAA;;;gGAGgG;AAChG;;GAEG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAEH,mCAAiC;AACjC,4DAAoC;AACpC,6CAA+B;AAC/B,6CAAkC;AAClC,oDAAwD;AAExD,8DAA2D;AAE3D,SAAS,eAAe,CACtB,CAAsE,EACtE,GAAa,EACb,SAAyB;IAEzB,MAAM,EACJ,KAAK,EAAE,cAAc,EACrB,MAAM,EAAE,eAAe,EACvB,GAAG,EAAE,YAAY,EACjB,IAAI,EAAE,aAAa,GACpB,GAAG,SAAS,CAAC,qBAAqB,EAAE,CAAC;IAEtC,IAAI,CAAqB,CAAC;IAC1B,IAAI,OAAO,IAAI,CAAC,EAAE;QAChB,CAAC,GAAG,CAAC,CAAC,KAAK,CAAC;KACb;SAAM;QACL,uBAAuB;QACvB,IAAI,SAAS,KAAK,CAAC,CAAC,OAAO,IAAI,CAAC,CAAC,OAAO,CAAC,MAAM;YAAE,CAAC,GAAG,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC;KACzE;IACD,qBAAqB;IACrB,IAAI,SAAS,KAAK,CAAC;QAAE,OAAO,GAAG,CAAC;IAEhC,IAAI,CAAC,GAAG,CAAC,CAAC;IACV,IAAI,OAAO,IAAI,CAAC,EAAE;QAChB,CAAC,GAAG,CAAC,CAAC,KAAK,CAAC;KACb;SAAM;QACL,uBAAuB;QACvB,IAAI,SAAS,KAAK,CAAC,CAAC,OAAO,IAAI,CAAC,CAAC,OAAO,CAAC,MAAM;YAAE,CAAC,GAAG,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC;KACzE;IACD,qBAAqB;IACrB,IAAI,SAAS,KAAK,CAAC;QAAE,OAAO,GAAG,CAAC;IAEhC,IAAI,IAAI,GAAG,CAAC,GAAG,CAAC,aAAa,GAAG,MAAM,CAAC,OAAO,CAAC,CAAC;IAChD,IAAI,GAAG,GAAG,CAAC,GAAG,CAAC,YAAY,GAAG,MAAM,CAAC,OAAO,CAAC,CAAC;IAE9C,uBAAuB;IACvB,IAAI,IAAI,GAAG,CAAC,EAAE;QACZ,IAAI,GAAG,CAAC,CAAC;KACV;SAAM,IAAI,IAAI,GAAG,cAAc,EAAE;QAChC,IAAI,GAAG,cAAc,CAAC;KACvB;SAAM,IAAI,GAAG,GAAG,CAAC,EAAE;QAClB,GAAG,GAAG,CAAC,CAAC;KACT;SAAM,IAAI,GAAG,GAAG,eAAe,EAAE;QAChC,GAAG,GAAG,eAAe,CAAC;KACvB;IAED,IAAI,UAAU,GAAG,IAAI,CAAC,KAAK,CAAC,CAAC,IAAI,GAAG,GAAG,CAAC,GAAG,cAAc,CAAC,CAAC;IAC3D,IAAI,KAAK,GAAG,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,GAAG,GAAG,GAAG,CAAC,GAAG,eAAe,CAAC,GAAG,GAAG,CAAC,CAAC;IAE/D,qBAAqB;IACrB,IAAI,UAAU,GAAG,CAAC;QAAE,UAAU,GAAG,CAAC,CAAC;IACnC,qBAAqB;IACrB,IAAI,UAAU,GAAG,GAAG;QAAE,UAAU,GAAG,GAAG,CAAC;IACvC,qBAAqB;IACrB,IAAI,KAAK,GAAG,CAAC;QAAE,KAAK,GAAG,CAAC,CAAC;IACzB,qBAAqB;IACrB,IAAI,KAAK,GAAG,GAAG;QAAE,KAAK,GAAG,GAAG,CAAC;IAE7B,OAAO,GAAG,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,EAAE,UAAU,EAAE,KAAK,CAAC,CAAC;AAC7C,CAAC;AAcD;;GAEG;AACH,SAAgB,gBAAgB,CAAC,EAC/B,kBAAkB,EAClB,GAAG,EACH,SAAS,EACT,KAAK,GACiB;IACtB,MAAM,SAAS,GAAG,KAAK,CAAC,MAAM,CAAiB,IAAI,CAAC,CAAC;IACrD,MAAM,CAAC,eAAe,CAAC,GAAG,KAAK,CAAC,QAAQ,CAAC,GAAG,EAAE,CAC5C,uCAAkB,CAAC,SAAS,CAAC,kBAAkB,CAAC,CACjD,CAAC;IACF,MAAM,UAAU,GAAG,KAAK,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC;IAEvC,MAAM,QAAQ,GAAG,KAAK,CAAC,WAAW,CAChC,CACE,CAAsE,EACtE,EAAE;QACF,uBAAuB;QACvB,IAAI,SAAS,CAAC,OAAO,EAAE;YACrB,MAAM,WAAW,GAAG,eAAe,CAAC,CAAC,EAAE,GAAG,EAAE,SAAS,CAAC,OAAO,CAAC,CAAC;YAC/D,uBAAuB;YACvB,IAAI,WAAW,EAAE;gBACf,uBAAuB;gBACvB,IAAI,kBAAkB;oBAAE,kBAAkB,CAAC,WAAW,CAAC,CAAC;aACzD;SACF;IACH,CAAC,EACD,CAAC,GAAG,EAAE,kBAAkB,CAAC,CAC1B,CAAC;IAEF,MAAM,UAAU,GAAG,KAAK,CAAC,WAAW,CAClC,CACE,CAAsE,EACtE,EAAE;QACF,uBAAuB;QACvB,IAAI,UAAU,CAAC,OAAO,EAAE;YACtB,QAAQ,CAAC,CAAC,CAAC,CAAC;SACb;IACH,CAAC,EACD,CAAC,QAAQ,CAAC,CACX,CAAC;IAEF,MAAM,SAAS,GAAG,KAAK,CAAC,WAAW,CAAC,GAAG,EAAE;QACvC,uBAAuB;QACvB,IAAI,UAAU,CAAC,OAAO,EAAE;YACtB,UAAU,CAAC,OAAO,GAAG,KAAK,CAAC;SAC5B;IACH,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,MAAM,UAAU,GAAG,KAAK,CAAC,WAAW,CAClC,CAAC,KAAuC,EAAE,EAAE;QAC1C,uBAAuB;QACvB,IAAI,UAAU,CAAC,OAAO,EAAE;YACtB,QAAQ,CAAC,KAAK,CAAC,CAAC;YAChB,UAAU,CAAC,OAAO,GAAG,KAAK,CAAC;SAC5B;IACH,CAAC,EACD,CAAC,QAAQ,CAAC,CACX,CAAC;IAEF,MAAM,WAAW,GAAG,KAAK,CAAC,WAAW,CACnC,CAAC,CAAmC,EAAE,EAAE;QACtC,uBAAuB;QACvB,IAAI,CAAC,CAAC,MAAM,KAAK,CAAC,CAAC,aAAa,EAAE;YAChC,UAAU,CAAC,OAAO,GAAG,IAAI,CAAC;YAC1B,QAAQ,CAAC,gBAAgB,CAAC,SAAS,EAAE,SAAS,EAAE;gBAC9C,OAAO,EAAE,IAAI;gBACb,IAAI,EAAE,IAAI;aACX,CAAC,CAAC;SACJ;QAED,QAAQ,CAAC,CAAC,CAAC,CAAC;QAEZ,uBAAuB;QACvB,IAAI,SAAS,CAAC,OAAO;YAAE,SAAS,CAAC,OAAO,CAAC,KAAK,EAAE,CAAC;QAEjD,CAAC,CAAC,cAAc,EAAE,CAAC;IACrB,CAAC,EACD,CAAC,QAAQ,EAAE,SAAS,CAAC,CACtB,CAAC;IAEF,MAAM,YAAY,GAAG,KAAK,CAAC,WAAW,CACpC,CAAC,CAAmC,EAAE,EAAE;QACtC,uBAAuB;QACvB,IAAI,CAAC,CAAC,MAAM,KAAK,CAAC,CAAC,aAAa;YAAE,UAAU,CAAC,OAAO,GAAG,IAAI,CAAC;QAE5D,QAAQ,CAAC,CAAC,CAAC,CAAC;QAEZ,uBAAuB;QACvB,IAAI,SAAS,CAAC,OAAO;YAAE,SAAS,CAAC,OAAO,CAAC,KAAK,EAAE,CAAC;IACnD,CAAC,EACD,CAAC,QAAQ,CAAC,CACX,CAAC;IAEF,MAAM,SAAS,GAAG,KAAK,CAAC,WAAW,CACjC,CAAC,GAAwC,EAAE,EAAE;QAC3C,MAAM,CAAC,GAAG,GAAG,CAAC,CAAC,CAAC;QAChB,IAAI,EAAE,CAAC,EAAE,CAAC,EAAE,GAAG,EAAE,GAAG,GAAG,EAAE,CAAC;QAC1B,IAAI,GAAG,CAAC,GAAG,KAAK,iBAAG,CAAC,SAAS,EAAE;YAC7B,CAAC,IAAI,GAAG,CAAC,OAAO,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,CAAC;SAC3B;aAAM,IAAI,GAAG,CAAC,GAAG,KAAK,iBAAG,CAAC,SAAS,EAAE;YACpC,CAAC,IAAI,GAAG,CAAC,OAAO,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,CAAC;SAC3B;aAAM,IAAI,GAAG,CAAC,GAAG,KAAK,iBAAG,CAAC,UAAU,EAAE;YACrC,CAAC,IAAI,GAAG,CAAC,OAAO,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,CAAC;SAC3B;aAAM,IAAI,GAAG,CAAC,GAAG,KAAK,iBAAG,CAAC,OAAO,EAAE;YAClC,CAAC,IAAI,GAAG,CAAC,OAAO,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,CAAC;SAC3B;aAAM,IAAI,GAAG,CAAC,GAAG,KAAK,iBAAG,CAAC,QAAQ,EAAE;YACnC,CAAC,GAAG,CAAC,CAAC;SACP;aAAM,IAAI,GAAG,CAAC,GAAG,KAAK,iBAAG,CAAC,MAAM,EAAE;YACjC,CAAC,GAAG,GAAG,CAAC;SACT;aAAM,IAAI,GAAG,CAAC,GAAG,KAAK,iBAAG,CAAC,IAAI,EAAE;YAC/B,CAAC,GAAG,CAAC,CAAC;SACP;aAAM;YACL,uBAAuB;YACvB,IAAI,GAAG,CAAC,GAAG,KAAK,iBAAG,CAAC,GAAG,EAAE;gBACvB,CAAC,GAAG,GAAG,CAAC;aACT;SACF;QAED,qBAAqB;QACrB,IAAI,CAAC,GAAG,CAAC;YAAE,CAAC,GAAG,CAAC,CAAC;QACjB,qBAAqB;QACrB,IAAI,CAAC,GAAG,GAAG;YAAE,CAAC,GAAG,GAAG,CAAC;QACrB,qBAAqB;QACrB,IAAI,CAAC,GAAG,CAAC;YAAE,CAAC,GAAG,CAAC,CAAC;QACjB,qBAAqB;QACrB,IAAI,CAAC,GAAG,GAAG;YAAE,CAAC,GAAG,GAAG,CAAC;QAErB,MAAM,QAAQ,GAAG,IAAI,sBAAQ,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC,CAAC,CAAC;QACvC,uBAAuB;QACvB,IAAI,kBAAkB;YAAE,kBAAkB,CAAC,QAAQ,CAAC,CAAC;QAErD,GAAG,CAAC,cAAc,EAAE,CAAC;IACvB,CAAC,EACD,CAAC,GAAG,EAAE,kBAAkB,CAAC,CAC1B,CAAC;IAEF,MAAM,YAAY,GAAwB,KAAK,CAAC,OAAO,CACrD,GAAG,EAAE,CAAC,CAAC;QACL,IAAI,EAAE,GAAG,GAAG,CAAC,CAAC,GAAG;QACjB,GAAG,EAAE,GAAG,CAAC,GAAG,CAAC,CAAC,GAAG,GAAG,GAAG;QACvB,eAAe,EAAE,GAAG,sBAAQ,CAAC,OAAO,CAAC,GAAG,CAAC,CAAC,WAAW,EAAE,EAAE;KAC1D,CAAC,EACF,CAAC,GAAG,CAAC,CACN,CAAC;IAEF,MAAM,UAAU,GAAwB,KAAK,CAAC,OAAO,CACnD,GAAG,EAAE,CAAC,CAAC,EAAE,eAAe,EAAE,OAAO,GAAG,CAAC,CAAC,cAAc,EAAE,CAAC,EACvD,CAAC,GAAG,CAAC,CACN,CAAC;IAEF,OAAO,CACL,6BACE,SAAS,EAAE,IAAA,oBAAU,EAAC,iCAAiC,EAAE,SAAS,CAAC,EACnE,KAAK,EAAE,KAAK,iBACA,sBAAsB;QAElC,4CACc,mBAAmB,EAC/B,IAAI,EAAC,QAAQ,gBACD,eAAe,mBACZ,GAAG,CAAC,CAAC,EACpB,KAAK,EAAE,UAAU,EACjB,SAAS,EAAC,8BAA8B,EACxC,GAAG,EAAE,SAAS,EACd,WAAW,EAAE,WAAW,EACxB,WAAW,EAAE,UAAU,EACvB,WAAW,EAAE,UAAU,EACvB,YAAY,EAAE,YAAY,EAC1B,UAAU,EAAE,UAAU,EACtB,QAAQ,EAAE,CAAC,EACX,SAAS,EAAE,SAAS;YAEpB,6BACE,KAAK,EAAE,YAAY,EACnB,SAAS,EAAC,+BAA+B,iBAC7B,oBAAoB,GAChC,CACE,CACF,CACP,CAAC;AACJ,CAAC;AApLD,4CAoLC","sourcesContent":["/*---------------------------------------------------------------------------------------------\n * Copyright (c) Bentley Systems, Incorporated. All rights reserved.\n * See LICENSE.md in the project root for license terms and full copyright notice.\n *--------------------------------------------------------------------------------------------*/\n/** @packageDocumentation\n * @module Color\n */\n\nimport \"./SaturationPicker.scss\";\nimport classnames from \"classnames\";\nimport * as React from \"react\";\nimport { Key } from \"ts-key-enum\";\nimport { ColorDef, HSVColor } from \"@itwin/core-common\";\nimport type { CommonProps } from \"@itwin/core-react\";\nimport { UiIModelComponents } from \"../UiIModelComponents\";\n\nfunction calculateChange(\n e: React.MouseEvent<HTMLDivElement> | React.TouchEvent<HTMLDivElement>,\n hsv: HSVColor,\n container: HTMLDivElement\n): HSVColor | undefined {\n const {\n width: containerWidth,\n height: containerHeight,\n top: containerTop,\n left: containerLeft,\n } = container.getBoundingClientRect();\n\n let x: number | undefined;\n if (\"pageX\" in e) {\n x = e.pageX;\n } else {\n // istanbul ignore next\n if (undefined !== e.touches && e.touches.length) x = e.touches[0].pageX;\n }\n // istanbul ignore if\n if (undefined === x) return hsv;\n\n let y = 0;\n if (\"pageY\" in e) {\n y = e.pageY;\n } else {\n // istanbul ignore next\n if (undefined !== e.touches && e.touches.length) y = e.touches[0].pageY;\n }\n // istanbul ignore if\n if (undefined === y) return hsv;\n\n let left = x - (containerLeft + window.scrollX);\n let top = y - (containerTop + window.scrollY);\n\n // istanbul ignore next\n if (left < 0) {\n left = 0;\n } else if (left > containerWidth) {\n left = containerWidth;\n } else if (top < 0) {\n top = 0;\n } else if (top > containerHeight) {\n top = containerHeight;\n }\n\n let saturation = Math.round((left * 100) / containerWidth);\n let value = Math.round(-((top * 100) / containerHeight) + 100);\n\n // istanbul ignore if\n if (saturation < 0) saturation = 0;\n // istanbul ignore if\n if (saturation > 100) saturation = 100;\n // istanbul ignore if\n if (value < 0) value = 0;\n // istanbul ignore if\n if (value > 100) value = 100;\n\n return hsv.clone(hsv.h, saturation, value);\n}\n\n/** Properties for the [[SaturationPicker]] React component\n * @beta\n */\nexport interface SaturationPickerProps\n extends React.HTMLAttributes<HTMLDivElement>,\n CommonProps {\n /** function to run when user selects location in saturation region */\n onSaturationChange?: ((saturation: HSVColor) => void) | undefined;\n /** HSV Color Value */\n hsv: HSVColor;\n}\n\n/** SaturationPicker component used to set the saturation value.\n * @beta\n */\nexport function SaturationPicker({\n onSaturationChange,\n hsv,\n className,\n style,\n}: SaturationPickerProps) {\n const container = React.useRef<HTMLDivElement>(null);\n const [saturationLabel] = React.useState(() =>\n UiIModelComponents.translate(\"color.saturation\")\n );\n const isDragging = React.useRef(false);\n\n const onChange = React.useCallback(\n (\n e: React.MouseEvent<HTMLDivElement> | React.TouchEvent<HTMLDivElement>\n ) => {\n // istanbul ignore else\n if (container.current) {\n const newHsvColor = calculateChange(e, hsv, container.current);\n // istanbul ignore else\n if (newHsvColor) {\n // istanbul ignore else\n if (onSaturationChange) onSaturationChange(newHsvColor);\n }\n }\n },\n [hsv, onSaturationChange]\n );\n\n const onDragging = React.useCallback(\n (\n e: React.MouseEvent<HTMLDivElement> | React.TouchEvent<HTMLDivElement>\n ) => {\n // istanbul ignore else\n if (isDragging.current) {\n onChange(e);\n }\n },\n [onChange]\n );\n\n const onMouseUp = React.useCallback(() => {\n // istanbul ignore else\n if (isDragging.current) {\n isDragging.current = false;\n }\n }, []);\n\n const onTouchEnd = React.useCallback(\n (event: React.TouchEvent<HTMLDivElement>) => {\n // istanbul ignore else\n if (isDragging.current) {\n onChange(event);\n isDragging.current = false;\n }\n },\n [onChange]\n );\n\n const onMouseDown = React.useCallback(\n (e: React.MouseEvent<HTMLDivElement>) => {\n // istanbul ignore else\n if (e.target !== e.currentTarget) {\n isDragging.current = true;\n document.addEventListener(\"mouseup\", onMouseUp, {\n capture: true,\n once: true,\n });\n }\n\n onChange(e);\n\n // istanbul ignore else\n if (container.current) container.current.focus();\n\n e.preventDefault();\n },\n [onChange, onMouseUp]\n );\n\n const onTouchStart = React.useCallback(\n (e: React.TouchEvent<HTMLDivElement>) => {\n // istanbul ignore else\n if (e.target !== e.currentTarget) isDragging.current = true;\n\n onChange(e);\n\n // istanbul ignore else\n if (container.current) container.current.focus();\n },\n [onChange]\n );\n\n const onKeyDown = React.useCallback(\n (evt: React.KeyboardEvent<HTMLDivElement>) => {\n const h = hsv.h;\n let { s, v } = { ...hsv };\n if (evt.key === Key.ArrowLeft) {\n s -= evt.ctrlKey ? 10 : 1;\n } else if (evt.key === Key.ArrowDown) {\n v -= evt.ctrlKey ? 10 : 1;\n } else if (evt.key === Key.ArrowRight) {\n s += evt.ctrlKey ? 10 : 1;\n } else if (evt.key === Key.ArrowUp) {\n v += evt.ctrlKey ? 10 : 1;\n } else if (evt.key === Key.PageDown) {\n v = 0;\n } else if (evt.key === Key.PageUp) {\n v = 100;\n } else if (evt.key === Key.Home) {\n s = 0;\n } else {\n // istanbul ignore else\n if (evt.key === Key.End) {\n s = 100;\n }\n }\n\n // istanbul ignore if\n if (s < 0) s = 0;\n // istanbul ignore if\n if (s > 100) s = 100;\n // istanbul ignore if\n if (v < 0) v = 0;\n // istanbul ignore if\n if (v > 100) v = 100;\n\n const newColor = new HSVColor(h, s, v);\n // istanbul ignore else\n if (onSaturationChange) onSaturationChange(newColor);\n\n evt.preventDefault();\n },\n [hsv, onSaturationChange]\n );\n\n const pointerStyle: React.CSSProperties = React.useMemo(\n () => ({\n left: `${hsv.s}%`,\n top: `${-hsv.v + 100}%`,\n backgroundColor: `${ColorDef.fromHSV(hsv).toRgbString()}`,\n }),\n [hsv]\n );\n\n const colorStyle: React.CSSProperties = React.useMemo(\n () => ({ backgroundColor: `hsl(${hsv.h} ,100%, 50%)` }),\n [hsv]\n );\n\n return (\n <div\n className={classnames(\"components-saturation-container\", className)}\n style={style}\n data-testid=\"saturation-container\"\n >\n <div\n data-testid=\"saturation-region\"\n role=\"slider\"\n aria-label={saturationLabel}\n aria-valuenow={hsv.s}\n style={colorStyle}\n className=\"components-saturation-region\"\n ref={container}\n onMouseDown={onMouseDown}\n onMouseMove={onDragging}\n onTouchMove={onDragging}\n onTouchStart={onTouchStart}\n onTouchEnd={onTouchEnd}\n tabIndex={0}\n onKeyDown={onKeyDown}\n >\n <div\n style={pointerStyle}\n className=\"components-saturation-pointer\"\n data-testid=\"saturation-pointer\"\n />\n </div>\n </div>\n );\n}\n"]}
|
|
1
|
+
{"version":3,"file":"SaturationPicker.js","sourceRoot":"","sources":["../../../../src/imodel-components-react/color/SaturationPicker.tsx"],"names":[],"mappings":"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","sourcesContent":["/*---------------------------------------------------------------------------------------------\n * Copyright (c) Bentley Systems, Incorporated. All rights reserved.\n * See LICENSE.md in the project root for license terms and full copyright notice.\n *--------------------------------------------------------------------------------------------*/\n/** @packageDocumentation\n * @module Color\n */\n\nimport \"./SaturationPicker.scss\";\nimport classnames from \"classnames\";\nimport * as React from \"react\";\nimport { Key } from \"ts-key-enum\";\nimport { ColorDef, HSVColor } from \"@itwin/core-common\";\nimport type { CommonProps } from \"@itwin/core-react\";\nimport { UiIModelComponents } from \"../UiIModelComponents\";\n\nfunction calculateChange(\n e: React.MouseEvent<HTMLDivElement> | React.TouchEvent<HTMLDivElement>,\n hsv: HSVColor,\n container: HTMLDivElement\n): HSVColor | undefined {\n const {\n width: containerWidth,\n height: containerHeight,\n top: containerTop,\n left: containerLeft,\n } = container.getBoundingClientRect();\n\n let x: number | undefined;\n if (\"pageX\" in e) {\n x = e.pageX;\n } else {\n // istanbul ignore next\n if (undefined !== e.touches && e.touches.length) x = e.touches[0].pageX;\n }\n // istanbul ignore if\n if (undefined === x) return hsv;\n\n let y = 0;\n if (\"pageY\" in e) {\n y = e.pageY;\n } else {\n // istanbul ignore next\n if (undefined !== e.touches && e.touches.length) y = e.touches[0].pageY;\n }\n // istanbul ignore if\n if (undefined === y) return hsv;\n\n let left = x - (containerLeft + window.scrollX);\n let top = y - (containerTop + window.scrollY);\n\n // istanbul ignore next\n if (left < 0) {\n left = 0;\n } else if (left > containerWidth) {\n left = containerWidth;\n } else if (top < 0) {\n top = 0;\n } else if (top > containerHeight) {\n top = containerHeight;\n }\n\n let saturation = Math.round((left * 100) / containerWidth);\n let value = Math.round(-((top * 100) / containerHeight) + 100);\n\n // istanbul ignore if\n if (saturation < 0) saturation = 0;\n // istanbul ignore if\n if (saturation > 100) saturation = 100;\n // istanbul ignore if\n if (value < 0) value = 0;\n // istanbul ignore if\n if (value > 100) value = 100;\n\n return hsv.clone(hsv.h, saturation, value);\n}\n\n/** Properties for the [[SaturationPicker]] React component\n * @beta\n */\nexport interface SaturationPickerProps\n extends React.HTMLAttributes<HTMLDivElement>,\n CommonProps {\n /** function to run when user selects location in saturation region */\n onSaturationChange?: ((saturation: HSVColor) => void) | undefined;\n /** HSV Color Value */\n hsv: HSVColor;\n}\n\n/** SaturationPicker component used to set the saturation value.\n * @beta\n */\nexport function SaturationPicker({\n onSaturationChange,\n hsv,\n className,\n style,\n}: SaturationPickerProps) {\n const container = React.useRef<HTMLDivElement>(null);\n const [saturationLabel] = React.useState(() =>\n UiIModelComponents.translate(\"color.saturation\")\n );\n const isDragging = React.useRef(false);\n\n const onChange = React.useCallback(\n (\n e: React.MouseEvent<HTMLDivElement> | React.TouchEvent<HTMLDivElement>\n ) => {\n // istanbul ignore else\n if (container.current) {\n const newHsvColor = calculateChange(e, hsv, container.current);\n // istanbul ignore else\n if (newHsvColor) {\n // istanbul ignore else\n if (onSaturationChange) onSaturationChange(newHsvColor);\n }\n }\n },\n [hsv, onSaturationChange]\n );\n\n const onDragging = React.useCallback(\n (\n e: React.MouseEvent<HTMLDivElement> | React.TouchEvent<HTMLDivElement>\n ) => {\n // istanbul ignore else\n if (isDragging.current) {\n onChange(e);\n }\n },\n [onChange]\n );\n\n const onMouseUp = React.useCallback(() => {\n // istanbul ignore else\n if (isDragging.current) {\n isDragging.current = false;\n }\n }, []);\n\n const onTouchEnd = React.useCallback(\n (event: React.TouchEvent<HTMLDivElement>) => {\n // istanbul ignore else\n if (isDragging.current) {\n onChange(event);\n isDragging.current = false;\n }\n },\n [onChange]\n );\n\n const onMouseDown = React.useCallback(\n (e: React.MouseEvent<HTMLDivElement>) => {\n // istanbul ignore else\n if (e.target !== e.currentTarget) {\n isDragging.current = true;\n document.addEventListener(\"mouseup\", onMouseUp, {\n capture: true,\n once: true,\n });\n }\n\n onChange(e);\n\n // istanbul ignore else\n if (container.current) container.current.focus();\n\n e.preventDefault();\n },\n [onChange, onMouseUp]\n );\n\n const onTouchStart = React.useCallback(\n (e: React.TouchEvent<HTMLDivElement>) => {\n // istanbul ignore else\n if (e.target !== e.currentTarget) isDragging.current = true;\n\n onChange(e);\n\n // istanbul ignore else\n if (container.current) container.current.focus();\n },\n [onChange]\n );\n\n const onKeyDown = React.useCallback(\n (evt: React.KeyboardEvent<HTMLDivElement>) => {\n const h = hsv.h;\n let { s, v } = { ...hsv };\n if (evt.key === Key.ArrowLeft.valueOf()) {\n s -= evt.ctrlKey ? 10 : 1;\n } else if (evt.key === Key.ArrowDown.valueOf()) {\n v -= evt.ctrlKey ? 10 : 1;\n } else if (evt.key === Key.ArrowRight.valueOf()) {\n s += evt.ctrlKey ? 10 : 1;\n } else if (evt.key === Key.ArrowUp.valueOf()) {\n v += evt.ctrlKey ? 10 : 1;\n } else if (evt.key === Key.PageDown.valueOf()) {\n v = 0;\n } else if (evt.key === Key.PageUp.valueOf()) {\n v = 100;\n } else if (evt.key === Key.Home.valueOf()) {\n s = 0;\n } else {\n // istanbul ignore else\n if (evt.key === Key.End.valueOf()) {\n s = 100;\n }\n }\n\n // istanbul ignore if\n if (s < 0) s = 0;\n // istanbul ignore if\n if (s > 100) s = 100;\n // istanbul ignore if\n if (v < 0) v = 0;\n // istanbul ignore if\n if (v > 100) v = 100;\n\n const newColor = new HSVColor(h, s, v);\n // istanbul ignore else\n if (onSaturationChange) onSaturationChange(newColor);\n\n evt.preventDefault();\n },\n [hsv, onSaturationChange]\n );\n\n const pointerStyle: React.CSSProperties = React.useMemo(\n () => ({\n left: `${hsv.s}%`,\n top: `${-hsv.v + 100}%`,\n backgroundColor: `${ColorDef.fromHSV(hsv).toRgbString()}`,\n }),\n [hsv]\n );\n\n const colorStyle: React.CSSProperties = React.useMemo(\n () => ({ backgroundColor: `hsl(${hsv.h} ,100%, 50%)` }),\n [hsv]\n );\n\n return (\n <div\n className={classnames(\"components-saturation-container\", className)}\n style={style}\n data-testid=\"saturation-container\"\n >\n <div\n data-testid=\"saturation-region\"\n role=\"slider\"\n aria-label={saturationLabel}\n aria-valuenow={hsv.s}\n style={colorStyle}\n className=\"components-saturation-region\"\n ref={container}\n onMouseDown={onMouseDown}\n onMouseMove={onDragging}\n onTouchMove={onDragging}\n onTouchStart={onTouchStart}\n onTouchEnd={onTouchEnd}\n tabIndex={0}\n onKeyDown={onKeyDown}\n >\n <div\n style={pointerStyle}\n className=\"components-saturation-pointer\"\n data-testid=\"saturation-pointer\"\n />\n </div>\n </div>\n );\n}\n"]}
|
|
@@ -122,7 +122,7 @@ class ColorEditor extends React.PureComponent {
|
|
|
122
122
|
? record.isDisabled
|
|
123
123
|
: /* istanbul ignore next */ undefined;
|
|
124
124
|
if (record.property.editor && record.property.editor.params) {
|
|
125
|
-
const colorParams = record.property.editor.params.find((param) => param.type === appui_abstract_1.PropertyEditorParamTypes.ColorData);
|
|
125
|
+
const colorParams = record.property.editor.params.find((param) => param.type === appui_abstract_1.PropertyEditorParamTypes.ColorData.valueOf());
|
|
126
126
|
// istanbul ignore else
|
|
127
127
|
if (colorParams) {
|
|
128
128
|
colorParams.colorValues.forEach((colorNumber) => {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ColorEditor.js","sourceRoot":"","sources":["../../../../src/imodel-components-react/editors/ColorEditor.tsx"],"names":[],"mappings":"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","sourcesContent":["/*---------------------------------------------------------------------------------------------\n * Copyright (c) Bentley Systems, Incorporated. All rights reserved.\n * See LICENSE.md in the project root for license terms and full copyright notice.\n *--------------------------------------------------------------------------------------------*/\n/** @packageDocumentation\n * @module PropertyEditors\n */\n\nimport \"./ColorEditor.scss\";\nimport classnames from \"classnames\";\nimport * as React from \"react\";\nimport { ColorDef } from \"@itwin/core-common\";\nimport type {\n ColorEditorParams,\n PropertyEditorParams,\n PropertyRecord,\n PropertyValue,\n} from \"@itwin/appui-abstract\";\nimport {\n PropertyEditorParamTypes,\n PropertyValueFormat,\n StandardEditorNames,\n StandardTypeNames,\n} from \"@itwin/appui-abstract\";\nimport type { PropertyEditorProps, TypeEditor } from \"@itwin/components-react\";\nimport {\n PropertyEditorBase,\n PropertyEditorManager,\n} from \"@itwin/components-react\";\nimport { ColorPickerButton } from \"../color/ColorPickerButton\";\n\n/** @internal */\ninterface ColorEditorState {\n colorValue: number;\n readonly: boolean;\n isDisabled?: boolean;\n numColumns: number;\n availableColors: ColorDef[];\n}\n\n/** ColorEditor React component that is a property editor with text input\n * @beta\n */\nexport class ColorEditor\n extends React.PureComponent<PropertyEditorProps, ColorEditorState>\n implements TypeEditor\n{\n private _buttonElement: React.RefObject<HTMLButtonElement> =\n React.createRef();\n\n /** @internal */\n public override readonly state: Readonly<ColorEditorState> = {\n colorValue: 0,\n readonly: false,\n numColumns: 4,\n availableColors: [],\n };\n\n public async getPropertyValue(): Promise<PropertyValue | undefined> {\n const record = this.props.propertyRecord;\n let propertyValue: PropertyValue | undefined;\n\n // istanbul ignore else\n if (record && record.value.valueFormat === PropertyValueFormat.Primitive) {\n propertyValue = {\n valueFormat: PropertyValueFormat.Primitive,\n value: this.state.colorValue,\n displayValue: \"\",\n };\n }\n\n return propertyValue;\n }\n\n public get htmlElement(): HTMLElement | null {\n return this._buttonElement.current;\n }\n\n public get hasFocus(): boolean {\n return document.activeElement === this._buttonElement.current;\n }\n\n private setFocus(): void {\n // istanbul ignore else\n if (\n this._buttonElement &&\n this._buttonElement.current &&\n !this.state.isDisabled\n ) {\n this._buttonElement.current.focus();\n }\n }\n\n private _onColorPick = (color: ColorDef) => {\n const propertyRecord = this.props.propertyRecord as PropertyRecord;\n\n this.setState(\n {\n colorValue: color.tbgr,\n },\n async () => {\n // istanbul ignore else\n if (propertyRecord && this.props.onCommit) {\n const propertyValue = await this.getPropertyValue();\n // istanbul ignore else\n if (propertyValue !== undefined) {\n this.props.onCommit({ propertyRecord, newValue: propertyValue });\n }\n }\n }\n );\n };\n\n /** @internal */\n public override componentDidMount() {\n void this.setStateFromProps();\n }\n\n /** @internal */\n public override componentDidUpdate(prevProps: PropertyEditorProps) {\n if (this.props.propertyRecord !== prevProps.propertyRecord) {\n void this.setStateFromProps();\n }\n }\n\n private async setStateFromProps() {\n const record = this.props.propertyRecord;\n\n // istanbul ignore else\n if (record && record.value.valueFormat === PropertyValueFormat.Primitive) {\n const colorValue = record.value.value as number;\n let numColumns = 4;\n const availableColors = new Array<ColorDef>();\n const readonly =\n record && undefined !== record.isReadonly\n ? record.isReadonly\n : /* istanbul ignore next */ false;\n const isDisabled = record\n ? record.isDisabled\n : /* istanbul ignore next */ undefined;\n\n if (record.property.editor && record.property.editor.params) {\n const colorParams = record.property.editor.params.find(\n (param: PropertyEditorParams) =>\n param.type === PropertyEditorParamTypes.ColorData\n ) as ColorEditorParams;\n // istanbul ignore else\n if (colorParams) {\n colorParams.colorValues.forEach((colorNumber: number) => {\n availableColors.push(ColorDef.create(colorNumber));\n });\n // istanbul ignore else\n if (colorParams.numColumns) numColumns = colorParams.numColumns;\n }\n }\n this.setState(\n { colorValue, readonly, isDisabled, numColumns, availableColors },\n () => {\n if (this.props.setFocus) {\n this.setFocus();\n }\n }\n );\n }\n }\n\n /** @internal */\n public override render() {\n const colorDef = ColorDef.create(this.state.colorValue);\n return (\n <div\n className={classnames(\"components-color-editor\", this.props.className)}\n style={this.props.style}\n >\n <ColorPickerButton\n ref={this._buttonElement}\n initialColor={colorDef}\n colorDefs={\n this.state.availableColors.length > 0\n ? this.state.availableColors\n : [colorDef]\n }\n numColumns={this.state.numColumns}\n disabled={this.state.isDisabled ? true : false}\n readonly={this.state.readonly}\n onColorPick={this._onColorPick}\n data-testid=\"components-color-editor\"\n />\n </div>\n );\n }\n}\n\n/** Color Property Editor registered for the \"number\" type name and \"color-picker\" editor name.\n * It uses the [[ColorEditor]] React component.\n * @beta\n */\nexport class ColorPropertyEditor extends PropertyEditorBase {\n public get reactNode(): React.ReactNode {\n return <ColorEditor />;\n }\n}\n\nPropertyEditorManager.registerEditor(\n StandardTypeNames.Number,\n ColorPropertyEditor,\n StandardEditorNames.ColorPicker\n);\n"]}
|
|
1
|
+
{"version":3,"file":"ColorEditor.js","sourceRoot":"","sources":["../../../../src/imodel-components-react/editors/ColorEditor.tsx"],"names":[],"mappings":"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","sourcesContent":["/*---------------------------------------------------------------------------------------------\n * Copyright (c) Bentley Systems, Incorporated. All rights reserved.\n * See LICENSE.md in the project root for license terms and full copyright notice.\n *--------------------------------------------------------------------------------------------*/\n/** @packageDocumentation\n * @module PropertyEditors\n */\n\nimport \"./ColorEditor.scss\";\nimport classnames from \"classnames\";\nimport * as React from \"react\";\nimport { ColorDef } from \"@itwin/core-common\";\nimport type {\n ColorEditorParams,\n PropertyEditorParams,\n PropertyRecord,\n PropertyValue,\n} from \"@itwin/appui-abstract\";\nimport {\n PropertyEditorParamTypes,\n PropertyValueFormat,\n StandardEditorNames,\n StandardTypeNames,\n} from \"@itwin/appui-abstract\";\nimport type { PropertyEditorProps, TypeEditor } from \"@itwin/components-react\";\nimport {\n PropertyEditorBase,\n PropertyEditorManager,\n} from \"@itwin/components-react\";\nimport { ColorPickerButton } from \"../color/ColorPickerButton\";\n\n/** @internal */\ninterface ColorEditorState {\n colorValue: number;\n readonly: boolean;\n isDisabled?: boolean;\n numColumns: number;\n availableColors: ColorDef[];\n}\n\n/** ColorEditor React component that is a property editor with text input\n * @beta\n */\nexport class ColorEditor\n extends React.PureComponent<PropertyEditorProps, ColorEditorState>\n implements TypeEditor\n{\n private _buttonElement: React.RefObject<HTMLButtonElement> =\n React.createRef();\n\n /** @internal */\n public override readonly state: Readonly<ColorEditorState> = {\n colorValue: 0,\n readonly: false,\n numColumns: 4,\n availableColors: [],\n };\n\n public async getPropertyValue(): Promise<PropertyValue | undefined> {\n const record = this.props.propertyRecord;\n let propertyValue: PropertyValue | undefined;\n\n // istanbul ignore else\n if (record && record.value.valueFormat === PropertyValueFormat.Primitive) {\n propertyValue = {\n valueFormat: PropertyValueFormat.Primitive,\n value: this.state.colorValue,\n displayValue: \"\",\n };\n }\n\n return propertyValue;\n }\n\n public get htmlElement(): HTMLElement | null {\n return this._buttonElement.current;\n }\n\n public get hasFocus(): boolean {\n return document.activeElement === this._buttonElement.current;\n }\n\n private setFocus(): void {\n // istanbul ignore else\n if (\n this._buttonElement &&\n this._buttonElement.current &&\n !this.state.isDisabled\n ) {\n this._buttonElement.current.focus();\n }\n }\n\n private _onColorPick = (color: ColorDef) => {\n const propertyRecord = this.props.propertyRecord as PropertyRecord;\n\n this.setState(\n {\n colorValue: color.tbgr,\n },\n async () => {\n // istanbul ignore else\n if (propertyRecord && this.props.onCommit) {\n const propertyValue = await this.getPropertyValue();\n // istanbul ignore else\n if (propertyValue !== undefined) {\n this.props.onCommit({ propertyRecord, newValue: propertyValue });\n }\n }\n }\n );\n };\n\n /** @internal */\n public override componentDidMount() {\n void this.setStateFromProps();\n }\n\n /** @internal */\n public override componentDidUpdate(prevProps: PropertyEditorProps) {\n if (this.props.propertyRecord !== prevProps.propertyRecord) {\n void this.setStateFromProps();\n }\n }\n\n private async setStateFromProps() {\n const record = this.props.propertyRecord;\n\n // istanbul ignore else\n if (record && record.value.valueFormat === PropertyValueFormat.Primitive) {\n const colorValue = record.value.value as number;\n let numColumns = 4;\n const availableColors = new Array<ColorDef>();\n const readonly =\n record && undefined !== record.isReadonly\n ? record.isReadonly\n : /* istanbul ignore next */ false;\n const isDisabled = record\n ? record.isDisabled\n : /* istanbul ignore next */ undefined;\n\n if (record.property.editor && record.property.editor.params) {\n const colorParams = record.property.editor.params.find(\n (param: PropertyEditorParams) =>\n param.type === PropertyEditorParamTypes.ColorData.valueOf()\n ) as ColorEditorParams;\n // istanbul ignore else\n if (colorParams) {\n colorParams.colorValues.forEach((colorNumber: number) => {\n availableColors.push(ColorDef.create(colorNumber));\n });\n // istanbul ignore else\n if (colorParams.numColumns) numColumns = colorParams.numColumns;\n }\n }\n this.setState(\n { colorValue, readonly, isDisabled, numColumns, availableColors },\n () => {\n if (this.props.setFocus) {\n this.setFocus();\n }\n }\n );\n }\n }\n\n /** @internal */\n public override render() {\n const colorDef = ColorDef.create(this.state.colorValue);\n return (\n <div\n className={classnames(\"components-color-editor\", this.props.className)}\n style={this.props.style}\n >\n <ColorPickerButton\n ref={this._buttonElement}\n initialColor={colorDef}\n colorDefs={\n this.state.availableColors.length > 0\n ? this.state.availableColors\n : [colorDef]\n }\n numColumns={this.state.numColumns}\n disabled={this.state.isDisabled ? true : false}\n readonly={this.state.readonly}\n onColorPick={this._onColorPick}\n data-testid=\"components-color-editor\"\n />\n </div>\n );\n }\n}\n\n/** Color Property Editor registered for the \"number\" type name and \"color-picker\" editor name.\n * It uses the [[ColorEditor]] React component.\n * @beta\n */\nexport class ColorPropertyEditor extends PropertyEditorBase {\n public get reactNode(): React.ReactNode {\n return <ColorEditor />;\n }\n}\n\nPropertyEditorManager.registerEditor(\n StandardTypeNames.Number,\n ColorPropertyEditor,\n StandardEditorNames.ColorPicker\n);\n"]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"WeightEditor.d.ts","sourceRoot":"","sources":["../../../../src/imodel-components-react/editors/WeightEditor.tsx"],"names":[],"mappings":"AAIA;;GAEG;AAEH,OAAO,qBAAqB,CAAC;AAE7B,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,KAAK,EAAkB,aAAa,EAAE,MAAM,uBAAuB,CAAC;AAM3E,OAAO,KAAK,EAAE,mBAAmB,EAAE,UAAU,EAAE,MAAM,yBAAyB,CAAC;AAC/E,OAAO,EACL,kBAAkB,EAEnB,MAAM,yBAAyB,CAAC;AAKjC,gBAAgB;AAChB,UAAU,iBAAiB;IACzB,WAAW,EAAE,MAAM,CAAC;IACpB,QAAQ,EAAE,OAAO,CAAC;IAClB,UAAU,CAAC,EAAE,OAAO,CAAC;CACtB;AAED;;GAEG;AACH,qBAAa,YACX,SAAQ,KAAK,CAAC,aAAa,CAAC,mBAAmB,EAAE,iBAAiB,CAClE,YAAW,UAAU;IAErB,OAAO,CAAC,QAAQ,
|
|
1
|
+
{"version":3,"file":"WeightEditor.d.ts","sourceRoot":"","sources":["../../../../src/imodel-components-react/editors/WeightEditor.tsx"],"names":[],"mappings":"AAIA;;GAEG;AAEH,OAAO,qBAAqB,CAAC;AAE7B,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,KAAK,EAAkB,aAAa,EAAE,MAAM,uBAAuB,CAAC;AAM3E,OAAO,KAAK,EAAE,mBAAmB,EAAE,UAAU,EAAE,MAAM,yBAAyB,CAAC;AAC/E,OAAO,EACL,kBAAkB,EAEnB,MAAM,yBAAyB,CAAC;AAKjC,gBAAgB;AAChB,UAAU,iBAAiB;IACzB,WAAW,EAAE,MAAM,CAAC;IACpB,QAAQ,EAAE,OAAO,CAAC;IAClB,UAAU,CAAC,EAAE,OAAO,CAAC;CACtB;AAED;;GAEG;AACH,qBAAa,YACX,SAAQ,KAAK,CAAC,aAAa,CAAC,mBAAmB,EAAE,iBAAiB,CAClE,YAAW,UAAU;IAErB,OAAO,CAAC,QAAQ,CAAa;IAC7B,OAAO,CAAC,UAAU,CAAS;IAC3B,OAAO,CAAC,iBAAiB,CAAgB;IACzC,OAAO,CAAC,WAAW,CAAqC;IAExD,gBAAgB;IAChB,SAAyB,KAAK,EAAE,QAAQ,CAAC,iBAAiB,CAAC,CAGzD;gBAEU,KAAK,EAAE,mBAAmB;IAgBzB,gBAAgB,IAAI,OAAO,CAAC,aAAa,GAAG,SAAS,CAAC;IAgBnE,IAAW,WAAW,IAAI,WAAW,GAAG,IAAI,CAE3C;IAED,IAAW,QAAQ,IAAI,OAAO,CAM7B;IAED,OAAO,CAAC,QAAQ;IAOhB,OAAO,CAAC,iBAAiB,CAkBvB;IAEF,gBAAgB;IACA,iBAAiB;IAKjC,gBAAgB;IACA,oBAAoB;IAIpC,gBAAgB;IACA,kBAAkB,CAAC,SAAS,EAAE,mBAAmB;YAMnD,iBAAiB;IAsB/B,gBAAgB;IACA,MAAM;CAuBvB;AAED;;;GAGG;AACH,qBAAa,oBAAqB,SAAQ,kBAAkB;IAE1D,IAAW,SAAS,IAAI,KAAK,CAAC,SAAS,CAEtC;CACF"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"WeightEditor.js","sourceRoot":"","sources":["../../../../src/imodel-components-react/editors/WeightEditor.tsx"],"names":[],"mappings":"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","sourcesContent":["/*---------------------------------------------------------------------------------------------\n * Copyright (c) Bentley Systems, Incorporated. All rights reserved.\n * See LICENSE.md in the project root for license terms and full copyright notice.\n *--------------------------------------------------------------------------------------------*/\n/** @packageDocumentation\n * @module PropertyEditors\n */\n\nimport \"./WeightEditor.scss\";\nimport classnames from \"classnames\";\nimport * as React from \"react\";\nimport type { PropertyRecord, PropertyValue } from \"@itwin/appui-abstract\";\nimport {\n PropertyValueFormat,\n StandardEditorNames,\n StandardTypeNames,\n} from \"@itwin/appui-abstract\";\nimport type { PropertyEditorProps, TypeEditor } from \"@itwin/components-react\";\nimport {\n PropertyEditorBase,\n PropertyEditorManager,\n} from \"@itwin/components-react\";\nimport { WeightPickerButton } from \"../lineweight/WeightPickerButton\";\n\n// cspell:ignore lineweight\n\n/** @internal */\ninterface WeightEditorState {\n weightValue: number;\n readonly: boolean;\n isDisabled?: boolean;\n}\n\n/** WeightEditor React component that is a property editor for picking a weight using a [[WeightPickerButton]] component\n * @public\n */\nexport class WeightEditor\n extends React.PureComponent<PropertyEditorProps, WeightEditorState>\n implements TypeEditor\n{\n private _control: any | null = null;\n private _isMounted = false;\n private _availableWeights: number[] = [];\n private _divElement = React.createRef<HTMLDivElement>();\n\n /** @internal */\n public override readonly state: Readonly<WeightEditorState> = {\n weightValue: 0,\n readonly: false,\n };\n\n constructor(props: PropertyEditorProps) {\n super(props);\n\n // TODO: add support for following if we need to specify set of weights to display\n // const record = this.props.propertyRecord;\n // if (record && record.property && record.property.editor && record.property.editor.params) {\n // const weightParams = record.property.editor.params.find((param: PropertyEditorParams) => param.type === PropertyEditorParamTypes.ColorData) as WeightEditorParams;\n // // istanbul ignore else\n // if (weightParams) {\n // weightParams.weightValues.forEach((weight: number) => {\n // this._availableWeights.push(weight);\n // });\n // }\n // }\n }\n\n public async getPropertyValue(): Promise<PropertyValue | undefined> {\n const record = this.props.propertyRecord;\n let propertyValue: PropertyValue | undefined;\n\n // istanbul ignore else\n if (record && record.value.valueFormat === PropertyValueFormat.Primitive) {\n propertyValue = {\n valueFormat: PropertyValueFormat.Primitive,\n value: this.state.weightValue,\n displayValue: \"\",\n };\n }\n\n return propertyValue;\n }\n\n public get htmlElement(): HTMLElement | null {\n return this._divElement.current;\n }\n\n public get hasFocus(): boolean {\n let containsFocus = false;\n // istanbul ignore else\n if (this._divElement.current)\n containsFocus = this._divElement.current.contains(document.activeElement);\n return containsFocus;\n }\n\n private setFocus(): void {\n // istanbul ignore else\n if (this._control && !this.state.isDisabled) {\n this._control.setFocus();\n }\n }\n\n private _onLineWeightPick = (weight: number) => {\n const propertyRecord = this.props.propertyRecord as PropertyRecord;\n\n this.setState(\n {\n weightValue: weight,\n },\n async () => {\n // istanbul ignore else\n if (propertyRecord && this.props.onCommit) {\n const propertyValue = await this.getPropertyValue();\n // istanbul ignore else\n if (propertyValue !== undefined) {\n this.props.onCommit({ propertyRecord, newValue: propertyValue });\n }\n }\n }\n );\n };\n\n /** @internal */\n public override componentDidMount() {\n this._isMounted = true;\n void this.setStateFromProps();\n }\n\n /** @internal */\n public override componentWillUnmount() {\n this._isMounted = false;\n }\n\n /** @internal */\n public override componentDidUpdate(prevProps: PropertyEditorProps) {\n if (this.props.propertyRecord !== prevProps.propertyRecord) {\n void this.setStateFromProps();\n }\n }\n\n private async setStateFromProps() {\n const record = this.props.propertyRecord;\n let initialValue = 0;\n\n // istanbul ignore else\n if (record && record.value.valueFormat === PropertyValueFormat.Primitive) {\n initialValue = record.value.value as number;\n }\n\n const readonly =\n record && undefined !== record.isReadonly ? record.isReadonly : false;\n const isDisabled = record ? record.isDisabled : undefined;\n\n // istanbul ignore else\n if (this._isMounted)\n this.setState({ weightValue: initialValue, readonly, isDisabled }, () => {\n if (this.props.setFocus) {\n this.setFocus();\n }\n });\n }\n\n /** @internal */\n public override render() {\n return (\n <div\n className={classnames(\"components-weight-editor\", this.props.className)}\n style={this.props.style}\n ref={this._divElement}\n >\n <WeightPickerButton\n ref={(control) => (this._control = control)}\n activeWeight={this.state.weightValue}\n weights={\n this._availableWeights.length > 0\n ? /* istanbul ignore next */ this._availableWeights\n : undefined\n }\n disabled={this.state.isDisabled ? true : false}\n readonly={this.state.readonly}\n onLineWeightPick={this._onLineWeightPick}\n data-testid=\"components-weight-editor\"\n />\n </div>\n );\n }\n}\n\n/** Weight Property Editor registered for the \"number\" type name and \"weight-picker\" editor name.\n * It uses the [[WeightEditor]] React component.\n * @public\n */\nexport class WeightPropertyEditor extends PropertyEditorBase {\n // istanbul ignore next\n public get reactNode(): React.ReactNode {\n return <WeightEditor />;\n }\n}\n\nPropertyEditorManager.registerEditor(\n StandardTypeNames.Number,\n WeightPropertyEditor,\n StandardEditorNames.WeightPicker\n);\n"]}
|
|
1
|
+
{"version":3,"file":"WeightEditor.js","sourceRoot":"","sources":["../../../../src/imodel-components-react/editors/WeightEditor.tsx"],"names":[],"mappings":"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","sourcesContent":["/*---------------------------------------------------------------------------------------------\n * Copyright (c) Bentley Systems, Incorporated. All rights reserved.\n * See LICENSE.md in the project root for license terms and full copyright notice.\n *--------------------------------------------------------------------------------------------*/\n/** @packageDocumentation\n * @module PropertyEditors\n */\n\nimport \"./WeightEditor.scss\";\nimport classnames from \"classnames\";\nimport * as React from \"react\";\nimport type { PropertyRecord, PropertyValue } from \"@itwin/appui-abstract\";\nimport {\n PropertyValueFormat,\n StandardEditorNames,\n StandardTypeNames,\n} from \"@itwin/appui-abstract\";\nimport type { PropertyEditorProps, TypeEditor } from \"@itwin/components-react\";\nimport {\n PropertyEditorBase,\n PropertyEditorManager,\n} from \"@itwin/components-react\";\nimport { WeightPickerButton } from \"../lineweight/WeightPickerButton\";\n\n// cspell:ignore lineweight\n\n/** @internal */\ninterface WeightEditorState {\n weightValue: number;\n readonly: boolean;\n isDisabled?: boolean;\n}\n\n/** WeightEditor React component that is a property editor for picking a weight using a [[WeightPickerButton]] component\n * @public\n */\nexport class WeightEditor\n extends React.PureComponent<PropertyEditorProps, WeightEditorState>\n implements TypeEditor\n{\n private _control: any = null;\n private _isMounted = false;\n private _availableWeights: number[] = [];\n private _divElement = React.createRef<HTMLDivElement>();\n\n /** @internal */\n public override readonly state: Readonly<WeightEditorState> = {\n weightValue: 0,\n readonly: false,\n };\n\n constructor(props: PropertyEditorProps) {\n super(props);\n\n // TODO: add support for following if we need to specify set of weights to display\n // const record = this.props.propertyRecord;\n // if (record && record.property && record.property.editor && record.property.editor.params) {\n // const weightParams = record.property.editor.params.find((param: PropertyEditorParams) => param.type === PropertyEditorParamTypes.ColorData) as WeightEditorParams;\n // // istanbul ignore else\n // if (weightParams) {\n // weightParams.weightValues.forEach((weight: number) => {\n // this._availableWeights.push(weight);\n // });\n // }\n // }\n }\n\n public async getPropertyValue(): Promise<PropertyValue | undefined> {\n const record = this.props.propertyRecord;\n let propertyValue: PropertyValue | undefined;\n\n // istanbul ignore else\n if (record && record.value.valueFormat === PropertyValueFormat.Primitive) {\n propertyValue = {\n valueFormat: PropertyValueFormat.Primitive,\n value: this.state.weightValue,\n displayValue: \"\",\n };\n }\n\n return propertyValue;\n }\n\n public get htmlElement(): HTMLElement | null {\n return this._divElement.current;\n }\n\n public get hasFocus(): boolean {\n let containsFocus = false;\n // istanbul ignore else\n if (this._divElement.current)\n containsFocus = this._divElement.current.contains(document.activeElement);\n return containsFocus;\n }\n\n private setFocus(): void {\n // istanbul ignore else\n if (this._control && !this.state.isDisabled) {\n this._control.setFocus();\n }\n }\n\n private _onLineWeightPick = (weight: number) => {\n const propertyRecord = this.props.propertyRecord as PropertyRecord;\n\n this.setState(\n {\n weightValue: weight,\n },\n async () => {\n // istanbul ignore else\n if (propertyRecord && this.props.onCommit) {\n const propertyValue = await this.getPropertyValue();\n // istanbul ignore else\n if (propertyValue !== undefined) {\n this.props.onCommit({ propertyRecord, newValue: propertyValue });\n }\n }\n }\n );\n };\n\n /** @internal */\n public override componentDidMount() {\n this._isMounted = true;\n void this.setStateFromProps();\n }\n\n /** @internal */\n public override componentWillUnmount() {\n this._isMounted = false;\n }\n\n /** @internal */\n public override componentDidUpdate(prevProps: PropertyEditorProps) {\n if (this.props.propertyRecord !== prevProps.propertyRecord) {\n void this.setStateFromProps();\n }\n }\n\n private async setStateFromProps() {\n const record = this.props.propertyRecord;\n let initialValue = 0;\n\n // istanbul ignore else\n if (record && record.value.valueFormat === PropertyValueFormat.Primitive) {\n initialValue = record.value.value as number;\n }\n\n const readonly =\n record && undefined !== record.isReadonly ? record.isReadonly : false;\n const isDisabled = record ? record.isDisabled : undefined;\n\n // istanbul ignore else\n if (this._isMounted)\n this.setState({ weightValue: initialValue, readonly, isDisabled }, () => {\n if (this.props.setFocus) {\n this.setFocus();\n }\n });\n }\n\n /** @internal */\n public override render() {\n return (\n <div\n className={classnames(\"components-weight-editor\", this.props.className)}\n style={this.props.style}\n ref={this._divElement}\n >\n <WeightPickerButton\n ref={(control) => (this._control = control)}\n activeWeight={this.state.weightValue}\n weights={\n this._availableWeights.length > 0\n ? /* istanbul ignore next */ this._availableWeights\n : undefined\n }\n disabled={this.state.isDisabled ? true : false}\n readonly={this.state.readonly}\n onLineWeightPick={this._onLineWeightPick}\n data-testid=\"components-weight-editor\"\n />\n </div>\n );\n }\n}\n\n/** Weight Property Editor registered for the \"number\" type name and \"weight-picker\" editor name.\n * It uses the [[WeightEditor]] React component.\n * @public\n */\nexport class WeightPropertyEditor extends PropertyEditorBase {\n // istanbul ignore next\n public get reactNode(): React.ReactNode {\n return <WeightEditor />;\n }\n}\n\nPropertyEditorManager.registerEditor(\n StandardTypeNames.Number,\n WeightPropertyEditor,\n StandardEditorNames.WeightPicker\n);\n"]}
|
|
@@ -233,19 +233,19 @@ const ForwardRefQuantityNumberInput = React.forwardRef(function ForwardRefQuanti
|
|
|
233
233
|
]);
|
|
234
234
|
const handleKeyDown = React.useCallback((event) => {
|
|
235
235
|
// istanbul ignore else
|
|
236
|
-
if (event.key === ts_key_enum_1.Key.Enter) {
|
|
236
|
+
if (event.key === ts_key_enum_1.Key.Enter.valueOf()) {
|
|
237
237
|
updateValueFromString(event.currentTarget.value);
|
|
238
238
|
event.preventDefault();
|
|
239
239
|
}
|
|
240
|
-
else if (event.key === ts_key_enum_1.Key.Escape) {
|
|
240
|
+
else if (event.key === ts_key_enum_1.Key.Escape.valueOf()) {
|
|
241
241
|
setFormattedValue(formatValue(rawValueRef.current));
|
|
242
242
|
event.preventDefault();
|
|
243
243
|
}
|
|
244
|
-
else if (event.key === ts_key_enum_1.Key.ArrowDown) {
|
|
244
|
+
else if (event.key === ts_key_enum_1.Key.ArrowDown.valueOf()) {
|
|
245
245
|
applyStep(false);
|
|
246
246
|
event.preventDefault();
|
|
247
247
|
}
|
|
248
|
-
else if (event.key === ts_key_enum_1.Key.ArrowUp) {
|
|
248
|
+
else if (event.key === ts_key_enum_1.Key.ArrowUp.valueOf()) {
|
|
249
249
|
applyStep(true);
|
|
250
250
|
event.preventDefault();
|
|
251
251
|
}
|