@itwin/imodel-components-react 4.13.3 → 4.14.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 +3 -3
- package/lib/cjs/imodel-components-react/UiIModelComponents.d.ts.map +1 -1
- package/lib/cjs/imodel-components-react/UiIModelComponents.js +1 -2
- package/lib/cjs/imodel-components-react/UiIModelComponents.js.map +1 -1
- package/lib/cjs/imodel-components-react/color/AlphaSlider.d.ts.map +1 -1
- package/lib/cjs/imodel-components-react/color/AlphaSlider.js +0 -16
- package/lib/cjs/imodel-components-react/color/AlphaSlider.js.map +1 -1
- package/lib/cjs/imodel-components-react/color/ColorPickerButton.d.ts +1 -1
- package/lib/cjs/imodel-components-react/color/ColorPickerButton.d.ts.map +1 -1
- package/lib/cjs/imodel-components-react/color/ColorPickerButton.js +0 -1
- package/lib/cjs/imodel-components-react/color/ColorPickerButton.js.map +1 -1
- package/lib/cjs/imodel-components-react/color/ColorPickerDialog.d.ts.map +1 -1
- package/lib/cjs/imodel-components-react/color/ColorPickerDialog.js +0 -1
- package/lib/cjs/imodel-components-react/color/ColorPickerDialog.js.map +1 -1
- package/lib/cjs/imodel-components-react/color/ColorPickerPopup.d.ts +1 -1
- package/lib/cjs/imodel-components-react/color/ColorPickerPopup.d.ts.map +1 -1
- package/lib/cjs/imodel-components-react/color/ColorPickerPopup.js +0 -4
- package/lib/cjs/imodel-components-react/color/ColorPickerPopup.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 +0 -21
- package/lib/cjs/imodel-components-react/color/HueSlider.js.map +1 -1
- package/lib/cjs/imodel-components-react/color/SaturationPicker.d.ts.map +1 -1
- package/lib/cjs/imodel-components-react/color/SaturationPicker.js +0 -25
- package/lib/cjs/imodel-components-react/color/SaturationPicker.js.map +1 -1
- package/lib/cjs/imodel-components-react/color/Swatch.d.ts.map +1 -1
- package/lib/cjs/imodel-components-react/color/Swatch.js +0 -1
- package/lib/cjs/imodel-components-react/color/Swatch.js.map +1 -1
- package/lib/cjs/imodel-components-react/editors/ColorEditor.d.ts.map +1 -1
- package/lib/cjs/imodel-components-react/editors/ColorEditor.js +2 -13
- 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 +2 -11
- package/lib/cjs/imodel-components-react/editors/WeightEditor.js.map +1 -1
- package/lib/cjs/imodel-components-react/inputs/QuantityInput.d.ts.map +1 -1
- package/lib/cjs/imodel-components-react/inputs/QuantityInput.js +0 -6
- package/lib/cjs/imodel-components-react/inputs/QuantityInput.js.map +1 -1
- package/lib/cjs/imodel-components-react/inputs/QuantityNumberInput.d.ts +1 -1
- package/lib/cjs/imodel-components-react/inputs/QuantityNumberInput.d.ts.map +1 -1
- package/lib/cjs/imodel-components-react/inputs/QuantityNumberInput.js +1 -15
- package/lib/cjs/imodel-components-react/inputs/QuantityNumberInput.js.map +1 -1
- package/lib/cjs/imodel-components-react/lineweight/Swatch.d.ts.map +1 -1
- package/lib/cjs/imodel-components-react/lineweight/Swatch.js +0 -1
- package/lib/cjs/imodel-components-react/lineweight/Swatch.js.map +1 -1
- package/lib/cjs/imodel-components-react/lineweight/WeightPickerButton.d.ts.map +1 -1
- package/lib/cjs/imodel-components-react/lineweight/WeightPickerButton.js +0 -9
- package/lib/cjs/imodel-components-react/lineweight/WeightPickerButton.js.map +1 -1
- package/lib/cjs/imodel-components-react/navigationaids/Cube.d.ts.map +1 -1
- package/lib/cjs/imodel-components-react/navigationaids/Cube.js +0 -1
- package/lib/cjs/imodel-components-react/navigationaids/Cube.js.map +1 -1
- package/lib/cjs/imodel-components-react/navigationaids/CubeNavigationAid.d.ts.map +1 -1
- package/lib/cjs/imodel-components-react/navigationaids/CubeNavigationAid.js +1 -27
- package/lib/cjs/imodel-components-react/navigationaids/CubeNavigationAid.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 +9 -34
- package/lib/cjs/imodel-components-react/navigationaids/DrawingNavigationAid.js.map +1 -1
- package/lib/cjs/imodel-components-react/quantityformat/FormatSample.d.ts.map +1 -1
- package/lib/cjs/imodel-components-react/quantityformat/FormatSample.js +0 -1
- package/lib/cjs/imodel-components-react/quantityformat/FormatSample.js.map +1 -1
- package/lib/cjs/imodel-components-react/quantityformat/FormatUnitLabel.d.ts.map +1 -1
- package/lib/cjs/imodel-components-react/quantityformat/FormatUnitLabel.js +2 -6
- package/lib/cjs/imodel-components-react/quantityformat/FormatUnitLabel.js.map +1 -1
- package/lib/cjs/imodel-components-react/quantityformat/FormatUnits.d.ts.map +1 -1
- package/lib/cjs/imodel-components-react/quantityformat/FormatUnits.js +2 -12
- package/lib/cjs/imodel-components-react/quantityformat/FormatUnits.js.map +1 -1
- package/lib/cjs/imodel-components-react/quantityformat/MiscFormatOptions.d.ts.map +1 -1
- package/lib/cjs/imodel-components-react/quantityformat/MiscFormatOptions.js +2 -7
- package/lib/cjs/imodel-components-react/quantityformat/MiscFormatOptions.js.map +1 -1
- package/lib/cjs/imodel-components-react/quantityformat/QuantityFormatPanel.d.ts.map +1 -1
- package/lib/cjs/imodel-components-react/quantityformat/QuantityFormatPanel.js +0 -7
- package/lib/cjs/imodel-components-react/quantityformat/QuantityFormatPanel.js.map +1 -1
- package/lib/cjs/imodel-components-react/quantityformat/misc/StationSeparatorSelector.d.ts.map +1 -1
- package/lib/cjs/imodel-components-react/quantityformat/misc/StationSeparatorSelector.js +0 -1
- package/lib/cjs/imodel-components-react/quantityformat/misc/StationSeparatorSelector.js.map +1 -1
- package/lib/cjs/imodel-components-react/quantityformat/misc/ThousandsSelector.d.ts.map +1 -1
- package/lib/cjs/imodel-components-react/quantityformat/misc/ThousandsSelector.js +0 -1
- package/lib/cjs/imodel-components-react/quantityformat/misc/ThousandsSelector.js.map +1 -1
- package/lib/cjs/imodel-components-react/quantityformat/misc/ThousandsSeparator.d.ts.map +1 -1
- package/lib/cjs/imodel-components-react/quantityformat/misc/ThousandsSeparator.js +2 -5
- package/lib/cjs/imodel-components-react/quantityformat/misc/ThousandsSeparator.js.map +1 -1
- package/lib/cjs/imodel-components-react/quantityformat/misc/UnitDescr.d.ts.map +1 -1
- package/lib/cjs/imodel-components-react/quantityformat/misc/UnitDescr.js +6 -12
- package/lib/cjs/imodel-components-react/quantityformat/misc/UnitDescr.js.map +1 -1
- package/lib/cjs/imodel-components-react/timeline/BaseSolarDataProvider.d.ts.map +1 -1
- package/lib/cjs/imodel-components-react/timeline/BaseSolarDataProvider.js +0 -1
- package/lib/cjs/imodel-components-react/timeline/BaseSolarDataProvider.js.map +1 -1
- package/lib/cjs/imodel-components-react/timeline/BaseTimelineDataProvider.d.ts.map +1 -1
- package/lib/cjs/imodel-components-react/timeline/BaseTimelineDataProvider.js +2 -10
- package/lib/cjs/imodel-components-react/timeline/BaseTimelineDataProvider.js.map +1 -1
- package/lib/cjs/imodel-components-react/timeline/InlineEdit.d.ts.map +1 -1
- package/lib/cjs/imodel-components-react/timeline/InlineEdit.js +0 -2
- package/lib/cjs/imodel-components-react/timeline/InlineEdit.js.map +1 -1
- package/lib/cjs/imodel-components-react/timeline/Scrubber.d.ts.map +1 -1
- package/lib/cjs/imodel-components-react/timeline/Scrubber.js +0 -6
- package/lib/cjs/imodel-components-react/timeline/Scrubber.js.map +1 -1
- package/lib/cjs/imodel-components-react/timeline/SpeedTimeline.d.ts.map +1 -1
- package/lib/cjs/imodel-components-react/timeline/SpeedTimeline.js +0 -1
- package/lib/cjs/imodel-components-react/timeline/SpeedTimeline.js.map +1 -1
- package/lib/cjs/imodel-components-react/viewport/ViewportComponent.d.ts.map +1 -1
- package/lib/cjs/imodel-components-react/viewport/ViewportComponent.js +0 -17
- package/lib/cjs/imodel-components-react/viewport/ViewportComponent.js.map +1 -1
- package/lib/cjs/imodel-components-react/viewport/ViewportComponentEvents.d.ts.map +1 -1
- package/lib/cjs/imodel-components-react/viewport/ViewportComponentEvents.js +0 -1
- package/lib/cjs/imodel-components-react/viewport/ViewportComponentEvents.js.map +1 -1
- package/lib/esm/imodel-components-react/UiIModelComponents.d.ts.map +1 -1
- package/lib/esm/imodel-components-react/UiIModelComponents.js +1 -2
- package/lib/esm/imodel-components-react/UiIModelComponents.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 +0 -16
- package/lib/esm/imodel-components-react/color/AlphaSlider.js.map +1 -1
- package/lib/esm/imodel-components-react/color/ColorPickerButton.d.ts +1 -1
- package/lib/esm/imodel-components-react/color/ColorPickerButton.d.ts.map +1 -1
- package/lib/esm/imodel-components-react/color/ColorPickerButton.js +0 -1
- package/lib/esm/imodel-components-react/color/ColorPickerButton.js.map +1 -1
- package/lib/esm/imodel-components-react/color/ColorPickerDialog.d.ts.map +1 -1
- package/lib/esm/imodel-components-react/color/ColorPickerDialog.js +0 -1
- package/lib/esm/imodel-components-react/color/ColorPickerDialog.js.map +1 -1
- package/lib/esm/imodel-components-react/color/ColorPickerPopup.d.ts +1 -1
- package/lib/esm/imodel-components-react/color/ColorPickerPopup.d.ts.map +1 -1
- package/lib/esm/imodel-components-react/color/ColorPickerPopup.js +0 -4
- package/lib/esm/imodel-components-react/color/ColorPickerPopup.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 +0 -21
- package/lib/esm/imodel-components-react/color/HueSlider.js.map +1 -1
- package/lib/esm/imodel-components-react/color/SaturationPicker.d.ts.map +1 -1
- package/lib/esm/imodel-components-react/color/SaturationPicker.js +0 -25
- package/lib/esm/imodel-components-react/color/SaturationPicker.js.map +1 -1
- package/lib/esm/imodel-components-react/color/Swatch.d.ts.map +1 -1
- package/lib/esm/imodel-components-react/color/Swatch.js +0 -1
- package/lib/esm/imodel-components-react/color/Swatch.js.map +1 -1
- package/lib/esm/imodel-components-react/editors/ColorEditor.d.ts.map +1 -1
- package/lib/esm/imodel-components-react/editors/ColorEditor.js +2 -13
- 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 +2 -11
- package/lib/esm/imodel-components-react/editors/WeightEditor.js.map +1 -1
- package/lib/esm/imodel-components-react/inputs/QuantityInput.d.ts.map +1 -1
- package/lib/esm/imodel-components-react/inputs/QuantityInput.js +0 -6
- package/lib/esm/imodel-components-react/inputs/QuantityInput.js.map +1 -1
- package/lib/esm/imodel-components-react/inputs/QuantityNumberInput.d.ts +1 -1
- package/lib/esm/imodel-components-react/inputs/QuantityNumberInput.d.ts.map +1 -1
- package/lib/esm/imodel-components-react/inputs/QuantityNumberInput.js +1 -15
- package/lib/esm/imodel-components-react/inputs/QuantityNumberInput.js.map +1 -1
- package/lib/esm/imodel-components-react/lineweight/Swatch.d.ts.map +1 -1
- package/lib/esm/imodel-components-react/lineweight/Swatch.js +0 -1
- package/lib/esm/imodel-components-react/lineweight/Swatch.js.map +1 -1
- package/lib/esm/imodel-components-react/lineweight/WeightPickerButton.d.ts.map +1 -1
- package/lib/esm/imodel-components-react/lineweight/WeightPickerButton.js +0 -9
- package/lib/esm/imodel-components-react/lineweight/WeightPickerButton.js.map +1 -1
- package/lib/esm/imodel-components-react/navigationaids/Cube.d.ts.map +1 -1
- package/lib/esm/imodel-components-react/navigationaids/Cube.js +0 -1
- package/lib/esm/imodel-components-react/navigationaids/Cube.js.map +1 -1
- package/lib/esm/imodel-components-react/navigationaids/CubeNavigationAid.d.ts.map +1 -1
- package/lib/esm/imodel-components-react/navigationaids/CubeNavigationAid.js +1 -27
- package/lib/esm/imodel-components-react/navigationaids/CubeNavigationAid.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 +9 -34
- package/lib/esm/imodel-components-react/navigationaids/DrawingNavigationAid.js.map +1 -1
- package/lib/esm/imodel-components-react/quantityformat/FormatSample.d.ts.map +1 -1
- package/lib/esm/imodel-components-react/quantityformat/FormatSample.js +0 -1
- package/lib/esm/imodel-components-react/quantityformat/FormatSample.js.map +1 -1
- package/lib/esm/imodel-components-react/quantityformat/FormatUnitLabel.d.ts.map +1 -1
- package/lib/esm/imodel-components-react/quantityformat/FormatUnitLabel.js +2 -6
- package/lib/esm/imodel-components-react/quantityformat/FormatUnitLabel.js.map +1 -1
- package/lib/esm/imodel-components-react/quantityformat/FormatUnits.d.ts.map +1 -1
- package/lib/esm/imodel-components-react/quantityformat/FormatUnits.js +2 -12
- package/lib/esm/imodel-components-react/quantityformat/FormatUnits.js.map +1 -1
- package/lib/esm/imodel-components-react/quantityformat/MiscFormatOptions.d.ts.map +1 -1
- package/lib/esm/imodel-components-react/quantityformat/MiscFormatOptions.js +2 -7
- package/lib/esm/imodel-components-react/quantityformat/MiscFormatOptions.js.map +1 -1
- package/lib/esm/imodel-components-react/quantityformat/QuantityFormatPanel.d.ts.map +1 -1
- package/lib/esm/imodel-components-react/quantityformat/QuantityFormatPanel.js +0 -7
- package/lib/esm/imodel-components-react/quantityformat/QuantityFormatPanel.js.map +1 -1
- package/lib/esm/imodel-components-react/quantityformat/misc/StationSeparatorSelector.d.ts.map +1 -1
- package/lib/esm/imodel-components-react/quantityformat/misc/StationSeparatorSelector.js +0 -1
- package/lib/esm/imodel-components-react/quantityformat/misc/StationSeparatorSelector.js.map +1 -1
- package/lib/esm/imodel-components-react/quantityformat/misc/ThousandsSelector.d.ts.map +1 -1
- package/lib/esm/imodel-components-react/quantityformat/misc/ThousandsSelector.js +0 -1
- package/lib/esm/imodel-components-react/quantityformat/misc/ThousandsSelector.js.map +1 -1
- package/lib/esm/imodel-components-react/quantityformat/misc/ThousandsSeparator.d.ts.map +1 -1
- package/lib/esm/imodel-components-react/quantityformat/misc/ThousandsSeparator.js +2 -5
- package/lib/esm/imodel-components-react/quantityformat/misc/ThousandsSeparator.js.map +1 -1
- package/lib/esm/imodel-components-react/quantityformat/misc/UnitDescr.d.ts.map +1 -1
- package/lib/esm/imodel-components-react/quantityformat/misc/UnitDescr.js +6 -12
- package/lib/esm/imodel-components-react/quantityformat/misc/UnitDescr.js.map +1 -1
- package/lib/esm/imodel-components-react/timeline/BaseSolarDataProvider.d.ts.map +1 -1
- package/lib/esm/imodel-components-react/timeline/BaseSolarDataProvider.js +0 -1
- package/lib/esm/imodel-components-react/timeline/BaseSolarDataProvider.js.map +1 -1
- package/lib/esm/imodel-components-react/timeline/BaseTimelineDataProvider.d.ts.map +1 -1
- package/lib/esm/imodel-components-react/timeline/BaseTimelineDataProvider.js +2 -10
- package/lib/esm/imodel-components-react/timeline/BaseTimelineDataProvider.js.map +1 -1
- package/lib/esm/imodel-components-react/timeline/InlineEdit.d.ts.map +1 -1
- package/lib/esm/imodel-components-react/timeline/InlineEdit.js +0 -2
- package/lib/esm/imodel-components-react/timeline/InlineEdit.js.map +1 -1
- package/lib/esm/imodel-components-react/timeline/Scrubber.d.ts.map +1 -1
- package/lib/esm/imodel-components-react/timeline/Scrubber.js +0 -6
- package/lib/esm/imodel-components-react/timeline/Scrubber.js.map +1 -1
- package/lib/esm/imodel-components-react/timeline/SpeedTimeline.d.ts.map +1 -1
- package/lib/esm/imodel-components-react/timeline/SpeedTimeline.js +0 -1
- package/lib/esm/imodel-components-react/timeline/SpeedTimeline.js.map +1 -1
- package/lib/esm/imodel-components-react/viewport/ViewportComponent.d.ts.map +1 -1
- package/lib/esm/imodel-components-react/viewport/ViewportComponent.js +0 -17
- package/lib/esm/imodel-components-react/viewport/ViewportComponent.js.map +1 -1
- package/lib/esm/imodel-components-react/viewport/ViewportComponentEvents.d.ts.map +1 -1
- package/lib/esm/imodel-components-react/viewport/ViewportComponentEvents.js +0 -1
- package/lib/esm/imodel-components-react/viewport/ViewportComponentEvents.js.map +1 -1
- package/package.json +13 -15
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ColorPickerDialog.js","sourceRoot":"","sources":["../../../../src/imodel-components-react/color/ColorPickerDialog.tsx"],"names":[],"mappings":"AAAA;;;gGAGgG;AAChG;;GAEG;AAEH,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,gBAAgB,EAAE,MAAM,uBAAuB,CAAC;AACzD,OAAO,EAAE,MAAM,EAAE,MAAM,mBAAmB,CAAC;AAC3C,OAAO,EAAE,QAAQ,EAAE,MAAM,oBAAoB,CAAC;AAC9C,OAAO,EACL,YAAY,EACZ,eAAe,EACf,YAAY,EACZ,WAAW,EACX,UAAU,GACX,MAAM,sBAAsB,CAAC;AAiB9B;;;;GAIG;AACH,MAAM,UAAU,iBAAiB,CAAC,EAChC,WAAW,EACX,KAAK,EACL,UAAU,EACV,cAAc,EACd,YAAY,EACZ,cAAc,GAEM;IACpB,MAAM,CAAC,WAAW,EAAE,cAAc,CAAC,GAAG,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,CAAC;IAC5D,MAAM,eAAe,GAAG,KAAK,CAAC,MAAM,CAAiB,IAAI,CAAC,CAAC;IAE3D,MAAM,QAAQ,GAAG,KAAK,CAAC,WAAW,CAAC,GAAG,EAAE;QACtC,UAAU,CAAC,WAAW,CAAC,CAAC;IAC1B,CAAC,EAAE,CAAC,UAAU,EAAE,WAAW,CAAC,CAAC,CAAC;IAC9B,MAAM,YAAY,GAAG,KAAK,CAAC,WAAW,CAAC,GAAG,EAAE;QAC1C,
|
|
1
|
+
{"version":3,"file":"ColorPickerDialog.js","sourceRoot":"","sources":["../../../../src/imodel-components-react/color/ColorPickerDialog.tsx"],"names":[],"mappings":"AAAA;;;gGAGgG;AAChG;;GAEG;AAEH,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,gBAAgB,EAAE,MAAM,uBAAuB,CAAC;AACzD,OAAO,EAAE,MAAM,EAAE,MAAM,mBAAmB,CAAC;AAC3C,OAAO,EAAE,QAAQ,EAAE,MAAM,oBAAoB,CAAC;AAC9C,OAAO,EACL,YAAY,EACZ,eAAe,EACf,YAAY,EACZ,WAAW,EACX,UAAU,GACX,MAAM,sBAAsB,CAAC;AAiB9B;;;;GAIG;AACH,MAAM,UAAU,iBAAiB,CAAC,EAChC,WAAW,EACX,KAAK,EACL,UAAU,EACV,cAAc,EACd,YAAY,EACZ,cAAc,GAEM;IACpB,MAAM,CAAC,WAAW,EAAE,cAAc,CAAC,GAAG,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,CAAC;IAC5D,MAAM,eAAe,GAAG,KAAK,CAAC,MAAM,CAAiB,IAAI,CAAC,CAAC;IAE3D,MAAM,QAAQ,GAAG,KAAK,CAAC,WAAW,CAAC,GAAG,EAAE;QACtC,UAAU,CAAC,WAAW,CAAC,CAAC;IAC1B,CAAC,EAAE,CAAC,UAAU,EAAE,WAAW,CAAC,CAAC,CAAC;IAC9B,MAAM,YAAY,GAAG,KAAK,CAAC,WAAW,CAAC,GAAG,EAAE;QAC1C,IAAI,cAAc;YAAE,cAAc,EAAE,CAAC;IACvC,CAAC,EAAE,CAAC,cAAc,CAAC,CAAC,CAAC;IAErB,MAAM,kBAAkB,GAAG,KAAK,CAAC,WAAW,CAAC,CAAC,aAAyB,EAAE,EAAE;QACzE,MAAM,WAAW,GAAG,QAAQ,CAAC,QAAQ,CAAC,aAAa,CAAC,MAAM,EAAE,CAAC,CAAC;QAC9D,cAAc,CAAC,WAAW,CAAC,CAAC;IAC9B,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,MAAM,aAAa,GAAG,KAAK,CAAC,OAAO,CACjC,GAAG,EAAE,CAAC;QACJ,EAAE,IAAI,EAAE,gBAAgB,CAAC,EAAE,EAAE,OAAO,EAAE,QAAQ,EAAE;QAChD,EAAE,IAAI,EAAE,gBAAgB,CAAC,MAAM,EAAE,OAAO,EAAE,YAAY,EAAE;KACzD,EACD,CAAC,YAAY,EAAE,QAAQ,CAAC,CACzB,CAAC;IAEF,MAAM,YAAY,GAAG,KAAK,CAAC,OAAO,CAAC,GAAG,EAAE;QACtC,IAAI,YAAY,EAAE,CAAC;YACjB,OAAO,YAAY,CAAC,GAAG,CAAC,CAAC,GAAG,EAAE,EAAE,CAAC,UAAU,CAAC,QAAQ,CAAC,GAAG,CAAC,IAAI,CAAC,CAAC,CAAC;QAClE,CAAC;QACD,OAAO,SAAS,CAAC;IACnB,CAAC,EAAE,CAAC,YAAY,CAAC,CAAC,CAAC;IAEnB,OAAO,CACL,6BAAK,GAAG,EAAE,eAAe;QAEvB,oBAAC,MAAM,IACL,KAAK,EAAE,WAAW,EAClB,MAAM,EAAE,IAAI,EACZ,SAAS,EAAE,KAAK,EAChB,OAAO,EAAE,IAAI,EACb,KAAK,EAAE,IAAI,EACX,aAAa,EAAE,aAAa,EAC5B,OAAO,EAAE,YAAY,EACrB,QAAQ,EAAE,YAAY,EACtB,QAAQ,EAAE,GAAG;YAEb,oBAAC,WAAW,IACV,aAAa,EAAE,UAAU,CAAC,QAAQ,CAAC,WAAW,CAAC,IAAI,CAAC,EACpD,gBAAgB,EAAE,kBAAkB;gBAEpC,oBAAC,YAAY,OAAG;gBACf,cAAc,IAAI,CACjB,oBAAC,eAAe,IAAC,kBAAkB,EAAE,cAAc,GAAI,CACxD;gBACA,YAAY,IAAI,oBAAC,YAAY,IAAC,MAAM,EAAE,YAAY,GAAI,CAC3C,CACP,CACL,CACP,CAAC;AACJ,CAAC","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 * as React from \"react\";\nimport { DialogButtonType } from \"@itwin/appui-abstract\";\nimport { Dialog } from \"@itwin/core-react\";\nimport { ColorDef } from \"@itwin/core-common\";\nimport {\n ColorBuilder,\n ColorInputPanel,\n ColorPalette,\n ColorPicker,\n ColorValue,\n} from \"@itwin/itwinui-react\";\n\n/** Properties for the [[ColorPickerDialog]] React component\n * @beta\n * @deprecated in 4.11.x. Props of deprecated component {@link ColorPickerDialog}.\n */\nexport interface ColorPickerDialogProps {\n dialogTitle: string;\n color: ColorDef;\n onOkResult: (selectedColor: ColorDef) => void;\n onCancelResult: () => void;\n /** displayed in rows of 9 items */\n colorPresets?: ColorDef[];\n /** If set show either HSL, RGB, or HEX input values. If undefined no input value is shown */\n colorInputType?: \"hsl\" | \"rgb\" | \"hex\";\n}\n\n/**\n * Color Picker Dialog to use as modal dialog.\n * @beta\n * @deprecated in 4.11.x. Use {@link https://itwinui.bentley.com/docs/colorpicker iTwinUI color picker} instead.\n */\nexport function ColorPickerDialog({\n dialogTitle,\n color,\n onOkResult,\n onCancelResult,\n colorPresets,\n colorInputType,\n}: // eslint-disable-next-line deprecation/deprecation\nColorPickerDialogProps) {\n const [activeColor, setActiveColor] = React.useState(color);\n const dialogContainer = React.useRef<HTMLDivElement>(null);\n\n const handleOk = React.useCallback(() => {\n onOkResult(activeColor);\n }, [onOkResult, activeColor]);\n const handleCancel = React.useCallback(() => {\n if (onCancelResult) onCancelResult();\n }, [onCancelResult]);\n\n const handleColorChanged = React.useCallback((newColorValue: ColorValue) => {\n const newColorDef = ColorDef.fromTbgr(newColorValue.toTbgr());\n setActiveColor(newColorDef);\n }, []);\n\n const buttonCluster = React.useMemo(\n () => [\n { type: DialogButtonType.OK, onClick: handleOk },\n { type: DialogButtonType.Cancel, onClick: handleCancel },\n ],\n [handleCancel, handleOk]\n );\n\n const colorOptions = React.useMemo(() => {\n if (colorPresets) {\n return colorPresets.map((def) => ColorValue.fromTbgr(def.tbgr));\n }\n return undefined;\n }, [colorPresets]);\n\n return (\n <div ref={dialogContainer}>\n {/* eslint-disable-next-line deprecation/deprecation */}\n <Dialog\n title={dialogTitle}\n opened={true}\n resizable={false}\n movable={true}\n modal={true}\n buttonCluster={buttonCluster}\n onClose={handleCancel}\n onEscape={handleCancel}\n maxWidth={320}\n >\n <ColorPicker\n selectedColor={ColorValue.fromTbgr(activeColor.tbgr)}\n onChangeComplete={handleColorChanged}\n >\n <ColorBuilder />\n {colorInputType && (\n <ColorInputPanel defaultColorFormat={colorInputType} />\n )}\n {colorOptions && <ColorPalette colors={colorOptions} />}\n </ColorPicker>\n </Dialog>\n </div>\n );\n}\n"]}
|
|
@@ -43,5 +43,5 @@ export interface ColorPickerPopupProps extends React.ButtonHTMLAttributes<HTMLBu
|
|
|
43
43
|
* @public
|
|
44
44
|
* @deprecated in 4.11.x. Use {@link https://itwinui.bentley.com/docs/colorpicker iTwinUI color picker} instead.
|
|
45
45
|
*/
|
|
46
|
-
export declare const ColorPickerPopup: (props: ColorPickerPopupProps) => React.
|
|
46
|
+
export declare const ColorPickerPopup: (props: ColorPickerPopupProps) => React.ReactNode;
|
|
47
47
|
//# sourceMappingURL=ColorPickerPopup.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ColorPickerPopup.d.ts","sourceRoot":"","sources":["../../../../src/imodel-components-react/color/ColorPickerPopup.tsx"],"names":[],"mappings":"AAIA;;GAEG;AAEH,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAAe,QAAQ,EAAE,MAAM,oBAAoB,CAAC;AAC3D,OAAO,EAAE,gBAAgB,EAAE,MAAM,uBAAuB,CAAC;AACzD,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAC;AASrD,OAAO,yBAAyB,CAAC;AASjC;;;GAGG;AACH,MAAM,WAAW,qBACf,SAAQ,KAAK,CAAC,oBAAoB,CAAC,iBAAiB,CAAC,EACnD,WAAW;IACb,oBAAoB;IACpB,YAAY,EAAE,QAAQ,CAAC;IACvB;uCACmC;IACnC,SAAS,CAAC,EAAE,QAAQ,EAAE,CAAC;IACvB,uDAAuD;IACvD,aAAa,CAAC,EAAE,CAAC,CAAC,QAAQ,EAAE,QAAQ,KAAK,IAAI,CAAC,GAAG,SAAS,CAAC;IAC3D,gDAAgD;IAChD,OAAO,CAAC,EAAE,CAAC,CAAC,UAAU,EAAE,QAAQ,KAAK,IAAI,CAAC,GAAG,SAAS,CAAC;IACvD,sBAAsB;IACtB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,oFAAoF;IACpF,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,qEAAqE;IACrE,aAAa,CAAC,EAAE,gBAAgB,CAAC;IACjC,gEAAgE;IAChE,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,iBAAiB,CAAC,CAAC;IACnC,gDAAgD;IAChD,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,6DAA6D;IAC7D,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,8CAA8C;IAC9C,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,+BAA+B;IAC/B,cAAc,CAAC,EAAE,KAAK,GAAG,KAAK,GAAG,KAAK,CAAC;CACxC;
|
|
1
|
+
{"version":3,"file":"ColorPickerPopup.d.ts","sourceRoot":"","sources":["../../../../src/imodel-components-react/color/ColorPickerPopup.tsx"],"names":[],"mappings":"AAIA;;GAEG;AAEH,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAAe,QAAQ,EAAE,MAAM,oBAAoB,CAAC;AAC3D,OAAO,EAAE,gBAAgB,EAAE,MAAM,uBAAuB,CAAC;AACzD,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAC;AASrD,OAAO,yBAAyB,CAAC;AASjC;;;GAGG;AACH,MAAM,WAAW,qBACf,SAAQ,KAAK,CAAC,oBAAoB,CAAC,iBAAiB,CAAC,EACnD,WAAW;IACb,oBAAoB;IACpB,YAAY,EAAE,QAAQ,CAAC;IACvB;uCACmC;IACnC,SAAS,CAAC,EAAE,QAAQ,EAAE,CAAC;IACvB,uDAAuD;IACvD,aAAa,CAAC,EAAE,CAAC,CAAC,QAAQ,EAAE,QAAQ,KAAK,IAAI,CAAC,GAAG,SAAS,CAAC;IAC3D,gDAAgD;IAChD,OAAO,CAAC,EAAE,CAAC,CAAC,UAAU,EAAE,QAAQ,KAAK,IAAI,CAAC,GAAG,SAAS,CAAC;IACvD,sBAAsB;IACtB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,oFAAoF;IACpF,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,qEAAqE;IACrE,aAAa,CAAC,EAAE,gBAAgB,CAAC;IACjC,gEAAgE;IAChE,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,iBAAiB,CAAC,CAAC;IACnC,gDAAgD;IAChD,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,6DAA6D;IAC7D,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,8CAA8C;IAC9C,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,+BAA+B;IAC/B,cAAc,CAAC,EAAE,KAAK,GAAG,KAAK,GAAG,KAAK,CAAC;CACxC;AA6JD;;;;;GAKG;AACH,eAAO,MAAM,gBAAgB,EAAE,CAE7B,KAAK,EAAE,qBAAqB,KACzB,KAAK,CAAC,SAAsC,CAAC"}
|
|
@@ -49,7 +49,6 @@ const ForwardRefColorPickerPopup = React.forwardRef(function ForwardRefColorPick
|
|
|
49
49
|
ColorValue.fromTbgr(ColorByName.olive),
|
|
50
50
|
ColorValue.fromTbgr(ColorByName.darkGreen),
|
|
51
51
|
]);
|
|
52
|
-
// istanbul ignore next
|
|
53
52
|
const closePopup = React.useCallback(() => {
|
|
54
53
|
props.onClose && props.onClose(colorDef);
|
|
55
54
|
setShowPopup(false);
|
|
@@ -59,10 +58,8 @@ const ForwardRefColorPickerPopup = React.forwardRef(function ForwardRefColorPick
|
|
|
59
58
|
}, [showPopup]);
|
|
60
59
|
const handleColorChanged = React.useCallback((newColorValue) => {
|
|
61
60
|
const newColor = ColorDef.fromTbgr(newColorValue.toTbgr());
|
|
62
|
-
// istanbul ignore else
|
|
63
61
|
if (!newColor.equals(colorDef)) {
|
|
64
62
|
setColorDef(newColor);
|
|
65
|
-
// istanbul ignore else
|
|
66
63
|
props.onColorChange && props.onColorChange(newColor);
|
|
67
64
|
}
|
|
68
65
|
}, [colorDef, props]);
|
|
@@ -71,7 +68,6 @@ const ForwardRefColorPickerPopup = React.forwardRef(function ForwardRefColorPick
|
|
|
71
68
|
const swatchStyle = { backgroundColor: rgbaString };
|
|
72
69
|
const buttonClassNames = classnames("components-colorpicker-popup-button", props.readonly && "readonly", props.className);
|
|
73
70
|
const clickHandler = (event) => {
|
|
74
|
-
// istanbul ignore else
|
|
75
71
|
if (props.captureClicks)
|
|
76
72
|
event.stopPropagation();
|
|
77
73
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ColorPickerPopup.js","sourceRoot":"","sources":["../../../../src/imodel-components-react/color/ColorPickerPopup.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 * as React from \"react\";\nimport classnames from \"classnames\";\nimport { ColorByName, ColorDef } from \"@itwin/core-common\";\nimport { RelativePosition } from \"@itwin/appui-abstract\";\nimport type { CommonProps } from \"@itwin/core-react\";\nimport { Icon, Popup, useRefs } from \"@itwin/core-react\";\nimport {\n ColorBuilder,\n ColorInputPanel,\n ColorPalette,\n ColorPicker,\n ColorValue,\n} from \"@itwin/itwinui-react\";\nimport \"./ColorPickerPopup.scss\";\nimport { getCSSColorFromDef } from \"./getCSSColorFromDef\";\nimport {\n SvgCaretDownSmall,\n SvgCaretUpSmall,\n SvgClose,\n} from \"@itwin/itwinui-icons-react\";\nimport { useTranslation } from \"../useTranslation\";\n\n/** Properties for the [[ColorPickerPopup]] React component\n * @public\n * @deprecated in 4.11.x. Props of deprecated component {@link ColorPickerPopup}.\n */\nexport interface ColorPickerPopupProps\n extends React.ButtonHTMLAttributes<HTMLButtonElement>,\n CommonProps {\n /** Current color */\n initialColor: ColorDef;\n /** Preset colors. Pass undefined to show default preset colors. Pass empty array to show no presets.\n * Displayed in rows of 9 items */\n colorDefs?: ColorDef[];\n /** Function to call when the color value is changed */\n onColorChange?: ((newColor: ColorDef) => void) | undefined;\n /** Function to call when the popup is closed */\n onClose?: ((colorValue: ColorDef) => void) | undefined;\n /** Disabled or not */\n disabled?: boolean;\n /** Readonly or not, color displayed on button but button will not trigger pop-up */\n readonly?: boolean;\n /** popup position. If not set RelativePosition.BottomLeft is used */\n popupPosition?: RelativePosition;\n /** Provides ability to return reference to HTMLButtonElement */\n ref?: React.Ref<HTMLButtonElement>;\n /** If true show up/down caret next to color */\n showCaret?: boolean;\n /** If true, don't propagate clicks out of the ColorPicker */\n captureClicks?: boolean;\n /** If true, don't show close button at top */\n hideCloseButton?: boolean;\n /** If set show input values */\n colorInputType?: \"hsl\" | \"rgb\" | \"hex\";\n}\n\n// Defined using following pattern (const ColorPickerPopup at bottom) to ensure useful API documentation is extracted\n\nconst ForwardRefColorPickerPopup = React.forwardRef<\n HTMLButtonElement,\n // eslint-disable-next-line deprecation/deprecation\n ColorPickerPopupProps\n>(function ForwardRefColorPickerPopup(props, ref) {\n const { translate } = useTranslation();\n const target = React.useRef<HTMLButtonElement>(null);\n const refs = useRefs(target, ref); // combine ref needed for target with the forwardRef needed by the Parent when parent is a Type Editor.\n const [showPopup, setShowPopup] = React.useState(false);\n const [colorDef, setColorDef] = React.useState(props.initialColor);\n const initialColorRef = React.useRef(props.initialColor);\n\n React.useEffect(() => {\n if (props.initialColor !== initialColorRef.current) {\n initialColorRef.current = props.initialColor;\n setColorDef(props.initialColor);\n }\n }, [props.initialColor]);\n\n const defaultColors = React.useRef([\n ColorValue.fromTbgr(ColorByName.red),\n ColorValue.fromTbgr(ColorByName.orange),\n ColorValue.fromTbgr(ColorByName.yellow),\n ColorValue.fromTbgr(ColorByName.green),\n ColorValue.fromTbgr(ColorByName.blue),\n ColorValue.fromTbgr(ColorByName.mediumBlue),\n ColorValue.fromTbgr(ColorByName.indigo),\n ColorValue.fromTbgr(ColorByName.violet),\n ColorValue.fromTbgr(ColorByName.black),\n ColorValue.fromTbgr(ColorByName.white),\n ColorValue.fromTbgr(ColorByName.cyan),\n ColorValue.fromTbgr(ColorByName.fuchsia),\n ColorValue.fromTbgr(ColorByName.tan),\n ColorValue.fromTbgr(ColorByName.gray),\n ColorValue.fromTbgr(ColorByName.brown),\n ColorValue.fromTbgr(ColorByName.purple),\n ColorValue.fromTbgr(ColorByName.olive),\n ColorValue.fromTbgr(ColorByName.darkGreen),\n ]);\n\n // istanbul ignore next\n const closePopup = React.useCallback(() => {\n props.onClose && props.onClose(colorDef);\n setShowPopup(false);\n }, [colorDef, props]);\n\n const togglePopup = React.useCallback(() => {\n setShowPopup(!showPopup);\n }, [showPopup]);\n\n const handleColorChanged = React.useCallback(\n (newColorValue: ColorValue) => {\n const newColor = ColorDef.fromTbgr(newColorValue.toTbgr());\n // istanbul ignore else\n if (!newColor.equals(colorDef)) {\n setColorDef(newColor);\n\n // istanbul ignore else\n props.onColorChange && props.onColorChange(newColor);\n }\n },\n [colorDef, props]\n );\n\n const rgbaString = getCSSColorFromDef(colorDef);\n\n const buttonStyle = { ...props.style } as React.CSSProperties;\n const swatchStyle = { backgroundColor: rgbaString } as React.CSSProperties;\n const buttonClassNames = classnames(\n \"components-colorpicker-popup-button\",\n props.readonly && \"readonly\",\n props.className\n );\n\n const clickHandler = (event: React.MouseEvent) => {\n // istanbul ignore else\n if (props.captureClicks) event.stopPropagation();\n };\n\n const colorOptions = React.useMemo(() => {\n if (props.colorDefs && props.colorDefs.length) {\n return props.colorDefs.map((def) => ColorValue.fromTbgr(def.tbgr));\n }\n if (props.colorDefs && 0 === props.colorDefs.length) return undefined;\n return defaultColors.current;\n }, [props.colorDefs]);\n const popupPosition =\n undefined !== props.popupPosition\n ? props.popupPosition\n : RelativePosition.BottomLeft;\n\n const closeLabel = translate(\"color.close\");\n const togglePopupLabel = translate(\"color.toggleColorPopup\");\n\n return (\n /* eslint-disable-next-line jsx-a11y/no-static-element-interactions, jsx-a11y/click-events-have-key-events */\n <div onClick={clickHandler}>\n <button\n data-testid=\"components-colorpicker-popup-button\"\n onClick={togglePopup}\n className={buttonClassNames}\n style={buttonStyle}\n disabled={props.disabled}\n ref={refs}\n title={togglePopupLabel}\n >\n <div className=\"components-colorpicker-button-container\">\n <div\n className=\"components-colorpicker-button-color-swatch\"\n style={swatchStyle}\n data-testid={showPopup ? \"caret-up\" : \"caret-down\"}\n />\n {props.showCaret && (\n <Icon\n className=\"components-caret\"\n iconSpec={showPopup ? <SvgCaretUpSmall /> : <SvgCaretDownSmall />}\n />\n )}\n </div>\n </button>\n <Popup\n className=\"components-colorpicker-popup\"\n isOpen={showPopup}\n position={popupPosition}\n onClose={closePopup}\n target={target.current}\n closeOnNestedPopupOutsideClick\n >\n <div className=\"components-colorpicker-popup-panel-padding\">\n {!props.hideCloseButton && (\n <button\n title={closeLabel}\n className={\n \"core-focus-trap-ignore-initial core-dialog-close icon\"\n }\n data-testid=\"core-dialog-close\"\n onClick={togglePopup}\n >\n <Icon iconSpec={<SvgClose />} />\n </button>\n )}\n <ColorPicker\n selectedColor={ColorValue.fromTbgr(colorDef.tbgr)}\n onChangeComplete={handleColorChanged}\n >\n <ColorBuilder />\n {props.colorInputType && (\n <ColorInputPanel defaultColorFormat={props.colorInputType} />\n )}\n {colorOptions && <ColorPalette colors={colorOptions} />}\n </ColorPicker>\n </div>\n </Popup>\n </div>\n );\n});\n\n/**\n * ColorPickerButton component that allows user to select a color from a set of color swatches or to define a new color.\n * @note Using forwardRef so the ColorEditor (Type Editor) can access the ref of the button element inside this component.\n * @public\n * @deprecated in 4.11.x. Use {@link https://itwinui.bentley.com/docs/colorpicker iTwinUI color picker} instead.\n */\nexport const ColorPickerPopup: (\n // eslint-disable-next-line deprecation/deprecation\n props: ColorPickerPopupProps\n) => React.ReactElement | null = ForwardRefColorPickerPopup;\n"]}
|
|
1
|
+
{"version":3,"file":"ColorPickerPopup.js","sourceRoot":"","sources":["../../../../src/imodel-components-react/color/ColorPickerPopup.tsx"],"names":[],"mappings":"AAAA;;;gGAGgG;AAChG;;GAEG;AAEH,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,UAAU,MAAM,YAAY,CAAC;AACpC,OAAO,EAAE,WAAW,EAAE,QAAQ,EAAE,MAAM,oBAAoB,CAAC;AAC3D,OAAO,EAAE,gBAAgB,EAAE,MAAM,uBAAuB,CAAC;AAEzD,OAAO,EAAE,IAAI,EAAE,KAAK,EAAE,OAAO,EAAE,MAAM,mBAAmB,CAAC;AACzD,OAAO,EACL,YAAY,EACZ,eAAe,EACf,YAAY,EACZ,WAAW,EACX,UAAU,GACX,MAAM,sBAAsB,CAAC;AAC9B,OAAO,yBAAyB,CAAC;AACjC,OAAO,EAAE,kBAAkB,EAAE,MAAM,sBAAsB,CAAC;AAC1D,OAAO,EACL,iBAAiB,EACjB,eAAe,EACf,QAAQ,GACT,MAAM,4BAA4B,CAAC;AACpC,OAAO,EAAE,cAAc,EAAE,MAAM,mBAAmB,CAAC;AAoCnD,qHAAqH;AAErH,MAAM,0BAA0B,GAAG,KAAK,CAAC,UAAU,CAIjD,SAAS,0BAA0B,CAAC,KAAK,EAAE,GAAG;IAC9C,MAAM,EAAE,SAAS,EAAE,GAAG,cAAc,EAAE,CAAC;IACvC,MAAM,MAAM,GAAG,KAAK,CAAC,MAAM,CAAoB,IAAI,CAAC,CAAC;IACrD,MAAM,IAAI,GAAG,OAAO,CAAC,MAAM,EAAE,GAAG,CAAC,CAAC,CAAC,uGAAuG;IAC1I,MAAM,CAAC,SAAS,EAAE,YAAY,CAAC,GAAG,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,CAAC;IACxD,MAAM,CAAC,QAAQ,EAAE,WAAW,CAAC,GAAG,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,YAAY,CAAC,CAAC;IACnE,MAAM,eAAe,GAAG,KAAK,CAAC,MAAM,CAAC,KAAK,CAAC,YAAY,CAAC,CAAC;IAEzD,KAAK,CAAC,SAAS,CAAC,GAAG,EAAE;QACnB,IAAI,KAAK,CAAC,YAAY,KAAK,eAAe,CAAC,OAAO,EAAE,CAAC;YACnD,eAAe,CAAC,OAAO,GAAG,KAAK,CAAC,YAAY,CAAC;YAC7C,WAAW,CAAC,KAAK,CAAC,YAAY,CAAC,CAAC;QAClC,CAAC;IACH,CAAC,EAAE,CAAC,KAAK,CAAC,YAAY,CAAC,CAAC,CAAC;IAEzB,MAAM,aAAa,GAAG,KAAK,CAAC,MAAM,CAAC;QACjC,UAAU,CAAC,QAAQ,CAAC,WAAW,CAAC,GAAG,CAAC;QACpC,UAAU,CAAC,QAAQ,CAAC,WAAW,CAAC,MAAM,CAAC;QACvC,UAAU,CAAC,QAAQ,CAAC,WAAW,CAAC,MAAM,CAAC;QACvC,UAAU,CAAC,QAAQ,CAAC,WAAW,CAAC,KAAK,CAAC;QACtC,UAAU,CAAC,QAAQ,CAAC,WAAW,CAAC,IAAI,CAAC;QACrC,UAAU,CAAC,QAAQ,CAAC,WAAW,CAAC,UAAU,CAAC;QAC3C,UAAU,CAAC,QAAQ,CAAC,WAAW,CAAC,MAAM,CAAC;QACvC,UAAU,CAAC,QAAQ,CAAC,WAAW,CAAC,MAAM,CAAC;QACvC,UAAU,CAAC,QAAQ,CAAC,WAAW,CAAC,KAAK,CAAC;QACtC,UAAU,CAAC,QAAQ,CAAC,WAAW,CAAC,KAAK,CAAC;QACtC,UAAU,CAAC,QAAQ,CAAC,WAAW,CAAC,IAAI,CAAC;QACrC,UAAU,CAAC,QAAQ,CAAC,WAAW,CAAC,OAAO,CAAC;QACxC,UAAU,CAAC,QAAQ,CAAC,WAAW,CAAC,GAAG,CAAC;QACpC,UAAU,CAAC,QAAQ,CAAC,WAAW,CAAC,IAAI,CAAC;QACrC,UAAU,CAAC,QAAQ,CAAC,WAAW,CAAC,KAAK,CAAC;QACtC,UAAU,CAAC,QAAQ,CAAC,WAAW,CAAC,MAAM,CAAC;QACvC,UAAU,CAAC,QAAQ,CAAC,WAAW,CAAC,KAAK,CAAC;QACtC,UAAU,CAAC,QAAQ,CAAC,WAAW,CAAC,SAAS,CAAC;KAC3C,CAAC,CAAC;IAEH,MAAM,UAAU,GAAG,KAAK,CAAC,WAAW,CAAC,GAAG,EAAE;QACxC,KAAK,CAAC,OAAO,IAAI,KAAK,CAAC,OAAO,CAAC,QAAQ,CAAC,CAAC;QACzC,YAAY,CAAC,KAAK,CAAC,CAAC;IACtB,CAAC,EAAE,CAAC,QAAQ,EAAE,KAAK,CAAC,CAAC,CAAC;IAEtB,MAAM,WAAW,GAAG,KAAK,CAAC,WAAW,CAAC,GAAG,EAAE;QACzC,YAAY,CAAC,CAAC,SAAS,CAAC,CAAC;IAC3B,CAAC,EAAE,CAAC,SAAS,CAAC,CAAC,CAAC;IAEhB,MAAM,kBAAkB,GAAG,KAAK,CAAC,WAAW,CAC1C,CAAC,aAAyB,EAAE,EAAE;QAC5B,MAAM,QAAQ,GAAG,QAAQ,CAAC,QAAQ,CAAC,aAAa,CAAC,MAAM,EAAE,CAAC,CAAC;QAC3D,IAAI,CAAC,QAAQ,CAAC,MAAM,CAAC,QAAQ,CAAC,EAAE,CAAC;YAC/B,WAAW,CAAC,QAAQ,CAAC,CAAC;YAEtB,KAAK,CAAC,aAAa,IAAI,KAAK,CAAC,aAAa,CAAC,QAAQ,CAAC,CAAC;QACvD,CAAC;IACH,CAAC,EACD,CAAC,QAAQ,EAAE,KAAK,CAAC,CAClB,CAAC;IAEF,MAAM,UAAU,GAAG,kBAAkB,CAAC,QAAQ,CAAC,CAAC;IAEhD,MAAM,WAAW,GAAG,EAAE,GAAG,KAAK,CAAC,KAAK,EAAyB,CAAC;IAC9D,MAAM,WAAW,GAAG,EAAE,eAAe,EAAE,UAAU,EAAyB,CAAC;IAC3E,MAAM,gBAAgB,GAAG,UAAU,CACjC,qCAAqC,EACrC,KAAK,CAAC,QAAQ,IAAI,UAAU,EAC5B,KAAK,CAAC,SAAS,CAChB,CAAC;IAEF,MAAM,YAAY,GAAG,CAAC,KAAuB,EAAE,EAAE;QAC/C,IAAI,KAAK,CAAC,aAAa;YAAE,KAAK,CAAC,eAAe,EAAE,CAAC;IACnD,CAAC,CAAC;IAEF,MAAM,YAAY,GAAG,KAAK,CAAC,OAAO,CAAC,GAAG,EAAE;QACtC,IAAI,KAAK,CAAC,SAAS,IAAI,KAAK,CAAC,SAAS,CAAC,MAAM,EAAE,CAAC;YAC9C,OAAO,KAAK,CAAC,SAAS,CAAC,GAAG,CAAC,CAAC,GAAG,EAAE,EAAE,CAAC,UAAU,CAAC,QAAQ,CAAC,GAAG,CAAC,IAAI,CAAC,CAAC,CAAC;QACrE,CAAC;QACD,IAAI,KAAK,CAAC,SAAS,IAAI,CAAC,KAAK,KAAK,CAAC,SAAS,CAAC,MAAM;YAAE,OAAO,SAAS,CAAC;QACtE,OAAO,aAAa,CAAC,OAAO,CAAC;IAC/B,CAAC,EAAE,CAAC,KAAK,CAAC,SAAS,CAAC,CAAC,CAAC;IACtB,MAAM,aAAa,GACjB,SAAS,KAAK,KAAK,CAAC,aAAa;QAC/B,CAAC,CAAC,KAAK,CAAC,aAAa;QACrB,CAAC,CAAC,gBAAgB,CAAC,UAAU,CAAC;IAElC,MAAM,UAAU,GAAG,SAAS,CAAC,aAAa,CAAC,CAAC;IAC5C,MAAM,gBAAgB,GAAG,SAAS,CAAC,wBAAwB,CAAC,CAAC;IAE7D,OAAO;IACL,6GAA6G;IAC7G,6BAAK,OAAO,EAAE,YAAY;QACxB,+CACc,qCAAqC,EACjD,OAAO,EAAE,WAAW,EACpB,SAAS,EAAE,gBAAgB,EAC3B,KAAK,EAAE,WAAW,EAClB,QAAQ,EAAE,KAAK,CAAC,QAAQ,EACxB,GAAG,EAAE,IAAI,EACT,KAAK,EAAE,gBAAgB;YAEvB,6BAAK,SAAS,EAAC,yCAAyC;gBACtD,6BACE,SAAS,EAAC,4CAA4C,EACtD,KAAK,EAAE,WAAW,iBACL,SAAS,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,YAAY,GAClD;gBACD,KAAK,CAAC,SAAS,IAAI,CAClB,oBAAC,IAAI,IACH,SAAS,EAAC,kBAAkB,EAC5B,QAAQ,EAAE,SAAS,CAAC,CAAC,CAAC,oBAAC,eAAe,OAAG,CAAC,CAAC,CAAC,oBAAC,iBAAiB,OAAG,GACjE,CACH,CACG,CACC;QACT,oBAAC,KAAK,IACJ,SAAS,EAAC,8BAA8B,EACxC,MAAM,EAAE,SAAS,EACjB,QAAQ,EAAE,aAAa,EACvB,OAAO,EAAE,UAAU,EACnB,MAAM,EAAE,MAAM,CAAC,OAAO,EACtB,8BAA8B;YAE9B,6BAAK,SAAS,EAAC,4CAA4C;gBACxD,CAAC,KAAK,CAAC,eAAe,IAAI,CACzB,gCACE,KAAK,EAAE,UAAU,EACjB,SAAS,EACP,uDAAuD,iBAE7C,mBAAmB,EAC/B,OAAO,EAAE,WAAW;oBAEpB,oBAAC,IAAI,IAAC,QAAQ,EAAE,oBAAC,QAAQ,OAAG,GAAI,CACzB,CACV;gBACD,oBAAC,WAAW,IACV,aAAa,EAAE,UAAU,CAAC,QAAQ,CAAC,QAAQ,CAAC,IAAI,CAAC,EACjD,gBAAgB,EAAE,kBAAkB;oBAEpC,oBAAC,YAAY,OAAG;oBACf,KAAK,CAAC,cAAc,IAAI,CACvB,oBAAC,eAAe,IAAC,kBAAkB,EAAE,KAAK,CAAC,cAAc,GAAI,CAC9D;oBACA,YAAY,IAAI,oBAAC,YAAY,IAAC,MAAM,EAAE,YAAY,GAAI,CAC3C,CACV,CACA,CACJ,CACP,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH;;;;;GAKG;AACH,MAAM,CAAC,MAAM,gBAAgB,GAGN,0BAA0B,CAAC","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 * as React from \"react\";\nimport classnames from \"classnames\";\nimport { ColorByName, ColorDef } from \"@itwin/core-common\";\nimport { RelativePosition } from \"@itwin/appui-abstract\";\nimport type { CommonProps } from \"@itwin/core-react\";\nimport { Icon, Popup, useRefs } from \"@itwin/core-react\";\nimport {\n ColorBuilder,\n ColorInputPanel,\n ColorPalette,\n ColorPicker,\n ColorValue,\n} from \"@itwin/itwinui-react\";\nimport \"./ColorPickerPopup.scss\";\nimport { getCSSColorFromDef } from \"./getCSSColorFromDef\";\nimport {\n SvgCaretDownSmall,\n SvgCaretUpSmall,\n SvgClose,\n} from \"@itwin/itwinui-icons-react\";\nimport { useTranslation } from \"../useTranslation\";\n\n/** Properties for the [[ColorPickerPopup]] React component\n * @public\n * @deprecated in 4.11.x. Props of deprecated component {@link ColorPickerPopup}.\n */\nexport interface ColorPickerPopupProps\n extends React.ButtonHTMLAttributes<HTMLButtonElement>,\n CommonProps {\n /** Current color */\n initialColor: ColorDef;\n /** Preset colors. Pass undefined to show default preset colors. Pass empty array to show no presets.\n * Displayed in rows of 9 items */\n colorDefs?: ColorDef[];\n /** Function to call when the color value is changed */\n onColorChange?: ((newColor: ColorDef) => void) | undefined;\n /** Function to call when the popup is closed */\n onClose?: ((colorValue: ColorDef) => void) | undefined;\n /** Disabled or not */\n disabled?: boolean;\n /** Readonly or not, color displayed on button but button will not trigger pop-up */\n readonly?: boolean;\n /** popup position. If not set RelativePosition.BottomLeft is used */\n popupPosition?: RelativePosition;\n /** Provides ability to return reference to HTMLButtonElement */\n ref?: React.Ref<HTMLButtonElement>;\n /** If true show up/down caret next to color */\n showCaret?: boolean;\n /** If true, don't propagate clicks out of the ColorPicker */\n captureClicks?: boolean;\n /** If true, don't show close button at top */\n hideCloseButton?: boolean;\n /** If set show input values */\n colorInputType?: \"hsl\" | \"rgb\" | \"hex\";\n}\n\n// Defined using following pattern (const ColorPickerPopup at bottom) to ensure useful API documentation is extracted\n\nconst ForwardRefColorPickerPopup = React.forwardRef<\n HTMLButtonElement,\n // eslint-disable-next-line deprecation/deprecation\n ColorPickerPopupProps\n>(function ForwardRefColorPickerPopup(props, ref) {\n const { translate } = useTranslation();\n const target = React.useRef<HTMLButtonElement>(null);\n const refs = useRefs(target, ref); // combine ref needed for target with the forwardRef needed by the Parent when parent is a Type Editor.\n const [showPopup, setShowPopup] = React.useState(false);\n const [colorDef, setColorDef] = React.useState(props.initialColor);\n const initialColorRef = React.useRef(props.initialColor);\n\n React.useEffect(() => {\n if (props.initialColor !== initialColorRef.current) {\n initialColorRef.current = props.initialColor;\n setColorDef(props.initialColor);\n }\n }, [props.initialColor]);\n\n const defaultColors = React.useRef([\n ColorValue.fromTbgr(ColorByName.red),\n ColorValue.fromTbgr(ColorByName.orange),\n ColorValue.fromTbgr(ColorByName.yellow),\n ColorValue.fromTbgr(ColorByName.green),\n ColorValue.fromTbgr(ColorByName.blue),\n ColorValue.fromTbgr(ColorByName.mediumBlue),\n ColorValue.fromTbgr(ColorByName.indigo),\n ColorValue.fromTbgr(ColorByName.violet),\n ColorValue.fromTbgr(ColorByName.black),\n ColorValue.fromTbgr(ColorByName.white),\n ColorValue.fromTbgr(ColorByName.cyan),\n ColorValue.fromTbgr(ColorByName.fuchsia),\n ColorValue.fromTbgr(ColorByName.tan),\n ColorValue.fromTbgr(ColorByName.gray),\n ColorValue.fromTbgr(ColorByName.brown),\n ColorValue.fromTbgr(ColorByName.purple),\n ColorValue.fromTbgr(ColorByName.olive),\n ColorValue.fromTbgr(ColorByName.darkGreen),\n ]);\n\n const closePopup = React.useCallback(() => {\n props.onClose && props.onClose(colorDef);\n setShowPopup(false);\n }, [colorDef, props]);\n\n const togglePopup = React.useCallback(() => {\n setShowPopup(!showPopup);\n }, [showPopup]);\n\n const handleColorChanged = React.useCallback(\n (newColorValue: ColorValue) => {\n const newColor = ColorDef.fromTbgr(newColorValue.toTbgr());\n if (!newColor.equals(colorDef)) {\n setColorDef(newColor);\n\n props.onColorChange && props.onColorChange(newColor);\n }\n },\n [colorDef, props]\n );\n\n const rgbaString = getCSSColorFromDef(colorDef);\n\n const buttonStyle = { ...props.style } as React.CSSProperties;\n const swatchStyle = { backgroundColor: rgbaString } as React.CSSProperties;\n const buttonClassNames = classnames(\n \"components-colorpicker-popup-button\",\n props.readonly && \"readonly\",\n props.className\n );\n\n const clickHandler = (event: React.MouseEvent) => {\n if (props.captureClicks) event.stopPropagation();\n };\n\n const colorOptions = React.useMemo(() => {\n if (props.colorDefs && props.colorDefs.length) {\n return props.colorDefs.map((def) => ColorValue.fromTbgr(def.tbgr));\n }\n if (props.colorDefs && 0 === props.colorDefs.length) return undefined;\n return defaultColors.current;\n }, [props.colorDefs]);\n const popupPosition =\n undefined !== props.popupPosition\n ? props.popupPosition\n : RelativePosition.BottomLeft;\n\n const closeLabel = translate(\"color.close\");\n const togglePopupLabel = translate(\"color.toggleColorPopup\");\n\n return (\n /* eslint-disable-next-line jsx-a11y/no-static-element-interactions, jsx-a11y/click-events-have-key-events */\n <div onClick={clickHandler}>\n <button\n data-testid=\"components-colorpicker-popup-button\"\n onClick={togglePopup}\n className={buttonClassNames}\n style={buttonStyle}\n disabled={props.disabled}\n ref={refs}\n title={togglePopupLabel}\n >\n <div className=\"components-colorpicker-button-container\">\n <div\n className=\"components-colorpicker-button-color-swatch\"\n style={swatchStyle}\n data-testid={showPopup ? \"caret-up\" : \"caret-down\"}\n />\n {props.showCaret && (\n <Icon\n className=\"components-caret\"\n iconSpec={showPopup ? <SvgCaretUpSmall /> : <SvgCaretDownSmall />}\n />\n )}\n </div>\n </button>\n <Popup\n className=\"components-colorpicker-popup\"\n isOpen={showPopup}\n position={popupPosition}\n onClose={closePopup}\n target={target.current}\n closeOnNestedPopupOutsideClick\n >\n <div className=\"components-colorpicker-popup-panel-padding\">\n {!props.hideCloseButton && (\n <button\n title={closeLabel}\n className={\n \"core-focus-trap-ignore-initial core-dialog-close icon\"\n }\n data-testid=\"core-dialog-close\"\n onClick={togglePopup}\n >\n <Icon iconSpec={<SvgClose />} />\n </button>\n )}\n <ColorPicker\n selectedColor={ColorValue.fromTbgr(colorDef.tbgr)}\n onChangeComplete={handleColorChanged}\n >\n <ColorBuilder />\n {props.colorInputType && (\n <ColorInputPanel defaultColorFormat={props.colorInputType} />\n )}\n {colorOptions && <ColorPalette colors={colorOptions} />}\n </ColorPicker>\n </div>\n </Popup>\n </div>\n );\n});\n\n/**\n * ColorPickerButton component that allows user to select a color from a set of color swatches or to define a new color.\n * @note Using forwardRef so the ColorEditor (Type Editor) can access the ref of the button element inside this component.\n * @public\n * @deprecated in 4.11.x. Use {@link https://itwinui.bentley.com/docs/colorpicker iTwinUI color picker} instead.\n */\nexport const ColorPickerPopup: (\n // eslint-disable-next-line deprecation/deprecation\n props: ColorPickerPopupProps\n) => React.ReactNode = ForwardRefColorPickerPopup;\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;
|
|
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;AA2DrD;;;GAGG;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;;;GAGG;AACH,wBAAgB,SAAS,CAAC,EACxB,YAAY,EACZ,WAAW,EACX,GAAG,EACH,SAAS,EACT,KAAK,GACN,EACD,cAAc,qBAwKb"}
|
|
@@ -12,7 +12,6 @@ import { Key } from "ts-key-enum";
|
|
|
12
12
|
import { useTranslation } from "../useTranslation";
|
|
13
13
|
// hue is a value from 0 to 360
|
|
14
14
|
function calculateHue(currentPos, high, isVertical) {
|
|
15
|
-
// istanbul ignore next
|
|
16
15
|
if (currentPos <= 0) {
|
|
17
16
|
return isVertical ? 359 : 0;
|
|
18
17
|
}
|
|
@@ -33,12 +32,10 @@ function calculateChange(currentHue, e, isHorizontal, container) {
|
|
|
33
32
|
x = e.pageX;
|
|
34
33
|
}
|
|
35
34
|
else {
|
|
36
|
-
// istanbul ignore if
|
|
37
35
|
if (undefined === e.touches || 0 === e.touches.length)
|
|
38
36
|
return currentHue;
|
|
39
37
|
x = e.touches[0].pageX;
|
|
40
38
|
}
|
|
41
|
-
// istanbul ignore if
|
|
42
39
|
if (undefined === x)
|
|
43
40
|
return currentHue;
|
|
44
41
|
let y;
|
|
@@ -46,12 +43,10 @@ function calculateChange(currentHue, e, isHorizontal, container) {
|
|
|
46
43
|
y = e.pageY;
|
|
47
44
|
}
|
|
48
45
|
else {
|
|
49
|
-
// istanbul ignore if
|
|
50
46
|
if (undefined === e.touches || 0 === e.touches.length)
|
|
51
47
|
return currentHue;
|
|
52
48
|
y = e.touches[0].pageY;
|
|
53
49
|
}
|
|
54
|
-
// istanbul ignore if
|
|
55
50
|
if (undefined === y)
|
|
56
51
|
return currentHue;
|
|
57
52
|
const pointerX = x - (containerLeft + window.scrollX);
|
|
@@ -74,31 +69,25 @@ export function HueSlider({ isHorizontal, onHueChange, hsv, className, style, })
|
|
|
74
69
|
const container = React.useRef(null);
|
|
75
70
|
const isDragging = React.useRef(false);
|
|
76
71
|
const onChange = React.useCallback((e) => {
|
|
77
|
-
// istanbul ignore else
|
|
78
72
|
if (container.current) {
|
|
79
73
|
const newHue = calculateChange(hsv.h, e, !!isHorizontal, container.current);
|
|
80
|
-
// istanbul ignore else
|
|
81
74
|
const newColor = hsv.clone(newHue);
|
|
82
|
-
// istanbul ignore else
|
|
83
75
|
if (onHueChange)
|
|
84
76
|
onHueChange(newColor);
|
|
85
77
|
}
|
|
86
78
|
}, [isHorizontal, hsv, onHueChange]);
|
|
87
79
|
const onDragging = React.useCallback((e) => {
|
|
88
|
-
// istanbul ignore else
|
|
89
80
|
if (isDragging.current) {
|
|
90
81
|
onChange(e);
|
|
91
82
|
}
|
|
92
83
|
}, [onChange]);
|
|
93
84
|
const onMouseUp = React.useCallback(() => {
|
|
94
|
-
// istanbul ignore else
|
|
95
85
|
if (isDragging.current) {
|
|
96
86
|
isDragging.current = false;
|
|
97
87
|
}
|
|
98
88
|
}, []);
|
|
99
89
|
const onTouchEnd = React.useCallback((event) => {
|
|
100
90
|
event.preventDefault();
|
|
101
|
-
// istanbul ignore else
|
|
102
91
|
if (isDragging.current) {
|
|
103
92
|
onChange(event);
|
|
104
93
|
isDragging.current = false;
|
|
@@ -106,9 +95,7 @@ export function HueSlider({ isHorizontal, onHueChange, hsv, className, style, })
|
|
|
106
95
|
}, [onChange]);
|
|
107
96
|
const onMouseDown = React.useCallback((e) => {
|
|
108
97
|
e.preventDefault();
|
|
109
|
-
// istanbul ignore else
|
|
110
98
|
if (e.target !== e.currentTarget) {
|
|
111
|
-
// istanbul ignore else
|
|
112
99
|
if (!isDragging.current) {
|
|
113
100
|
document.addEventListener("mouseup", onMouseUp, {
|
|
114
101
|
capture: true,
|
|
@@ -118,16 +105,13 @@ export function HueSlider({ isHorizontal, onHueChange, hsv, className, style, })
|
|
|
118
105
|
}
|
|
119
106
|
}
|
|
120
107
|
onChange(e);
|
|
121
|
-
// istanbul ignore else
|
|
122
108
|
if (container.current)
|
|
123
109
|
container.current.focus();
|
|
124
110
|
}, [onChange, onMouseUp]);
|
|
125
111
|
const onTouchStart = React.useCallback((e) => {
|
|
126
|
-
// istanbul ignore else
|
|
127
112
|
if (e.target !== e.currentTarget)
|
|
128
113
|
isDragging.current = true;
|
|
129
114
|
onChange(e);
|
|
130
|
-
// istanbul ignore else
|
|
131
115
|
if (container.current)
|
|
132
116
|
container.current.focus();
|
|
133
117
|
}, [onChange]);
|
|
@@ -152,21 +136,16 @@ export function HueSlider({ isHorizontal, onHueChange, hsv, className, style, })
|
|
|
152
136
|
newHue = 0;
|
|
153
137
|
}
|
|
154
138
|
else {
|
|
155
|
-
// istanbul ignore else
|
|
156
139
|
if (evt.key === Key.End.valueOf()) {
|
|
157
140
|
newHue = 359;
|
|
158
141
|
}
|
|
159
142
|
}
|
|
160
|
-
// istanbul ignore else
|
|
161
143
|
if (undefined !== newHue) {
|
|
162
|
-
// istanbul ignore if
|
|
163
144
|
if (newHue > 359)
|
|
164
145
|
newHue = 359; // 360 is same as zero
|
|
165
|
-
// istanbul ignore if
|
|
166
146
|
if (newHue < 0)
|
|
167
147
|
newHue = 0;
|
|
168
148
|
const newColor = hsv.clone(newHue);
|
|
169
|
-
// istanbul ignore else
|
|
170
149
|
if (onHueChange)
|
|
171
150
|
onHueChange(newColor);
|
|
172
151
|
evt.preventDefault();
|
|
@@ -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 { useTranslation } from \"../useTranslation\";\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 * @deprecated in 4.11.x. Props of deprecated component {@link HueSlider}.\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 * @deprecated in 4.11.x. Use {@link https://itwinui.bentley.com/docs/colorpicker iTwinUI color picker} instead.\n */\nexport function HueSlider({\n isHorizontal,\n onHueChange,\n hsv,\n className,\n style,\n}: // eslint-disable-next-line deprecation/deprecation\nHueSliderProps) {\n const { translate } = useTranslation();\n const container = React.useRef<HTMLDivElement>(null);\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={translate(\"color.hue\")}\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":"AAAA;;;gGAGgG;AAChG;;GAEG;AAEH,OAAO,kBAAkB,CAAC;AAC1B,OAAO,UAAU,MAAM,YAAY,CAAC;AACpC,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,GAAG,EAAE,MAAM,aAAa,CAAC;AAGlC,OAAO,EAAE,cAAc,EAAE,MAAM,mBAAmB,CAAC;AAEnD,+BAA+B;AAC/B,SAAS,YAAY,CAAC,UAAkB,EAAE,IAAY,EAAE,UAAmB;IACzE,IAAI,UAAU,IAAI,CAAC,EAAE,CAAC;QACpB,OAAO,UAAU,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,CAAC;IAC9B,CAAC;SAAM,IAAI,UAAU,IAAI,IAAI,EAAE,CAAC;QAC9B,OAAO,UAAU,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,GAAG,CAAC;IAC9B,CAAC;SAAM,CAAC;QACN,IAAI,OAAO,GAAG,CAAC,UAAU,GAAG,GAAG,CAAC,GAAG,IAAI,CAAC;QACxC,IAAI,UAAU;YAAE,OAAO,GAAG,GAAG,GAAG,OAAO,CAAC;QACxC,OAAO,IAAI,CAAC,KAAK,CAAC,CAAC,GAAG,GAAG,OAAO,CAAC,GAAG,GAAG,CAAC,CAAC;IAC3C,CAAC;AACH,CAAC;AAED,SAAS,eAAe,CACtB,UAAkB,EAClB,CAAsE,EACtE,YAAqB,EACrB,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,CAAC;QACjB,CAAC,GAAG,CAAC,CAAC,KAAK,CAAC;IACd,CAAC;SAAM,CAAC;QACN,IAAI,SAAS,KAAK,CAAC,CAAC,OAAO,IAAI,CAAC,KAAK,CAAC,CAAC,OAAO,CAAC,MAAM;YAAE,OAAO,UAAU,CAAC;QACzE,CAAC,GAAG,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC;IACzB,CAAC;IACD,IAAI,SAAS,KAAK,CAAC;QAAE,OAAO,UAAU,CAAC;IAEvC,IAAI,CAAqB,CAAC;IAC1B,IAAI,OAAO,IAAI,CAAC,EAAE,CAAC;QACjB,CAAC,GAAG,CAAC,CAAC,KAAK,CAAC;IACd,CAAC;SAAM,CAAC;QACN,IAAI,SAAS,KAAK,CAAC,CAAC,OAAO,IAAI,CAAC,KAAK,CAAC,CAAC,OAAO,CAAC,MAAM;YAAE,OAAO,UAAU,CAAC;QACzE,CAAC,GAAG,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC;IACzB,CAAC;IACD,IAAI,SAAS,KAAK,CAAC;QAAE,OAAO,UAAU,CAAC;IAEvC,MAAM,QAAQ,GAAG,CAAC,GAAG,CAAC,aAAa,GAAG,MAAM,CAAC,OAAO,CAAC,CAAC;IACtD,MAAM,QAAQ,GAAG,CAAC,GAAG,CAAC,YAAY,GAAG,MAAM,CAAC,OAAO,CAAC,CAAC;IAErD,IAAI,CAAC,YAAY,EAAE,CAAC;QAClB,WAAW;QACX,OAAO,YAAY,CAAC,QAAQ,EAAE,eAAe,EAAE,IAAI,CAAC,CAAC;IACvD,CAAC;SAAM,CAAC;QACN,aAAa;QACb,OAAO,YAAY,CAAC,QAAQ,EAAE,cAAc,EAAE,KAAK,CAAC,CAAC;IACvD,CAAC;AACH,CAAC;AAiBD;;;GAGG;AACH,MAAM,UAAU,SAAS,CAAC,EACxB,YAAY,EACZ,WAAW,EACX,GAAG,EACH,SAAS,EACT,KAAK,GAEO;IACZ,MAAM,EAAE,SAAS,EAAE,GAAG,cAAc,EAAE,CAAC;IACvC,MAAM,SAAS,GAAG,KAAK,CAAC,MAAM,CAAiB,IAAI,CAAC,CAAC;IACrD,MAAM,UAAU,GAAG,KAAK,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC;IAEvC,MAAM,QAAQ,GAAG,KAAK,CAAC,WAAW,CAChC,CACE,CAAsE,EACtE,EAAE;QACF,IAAI,SAAS,CAAC,OAAO,EAAE,CAAC;YACtB,MAAM,MAAM,GAAG,eAAe,CAC5B,GAAG,CAAC,CAAC,EACL,CAAC,EACD,CAAC,CAAC,YAAY,EACd,SAAS,CAAC,OAAO,CAClB,CAAC;YACF,MAAM,QAAQ,GAAG,GAAG,CAAC,KAAK,CAAC,MAAM,CAAC,CAAC;YACnC,IAAI,WAAW;gBAAE,WAAW,CAAC,QAAQ,CAAC,CAAC;QACzC,CAAC;IACH,CAAC,EACD,CAAC,YAAY,EAAE,GAAG,EAAE,WAAW,CAAC,CACjC,CAAC;IAEF,MAAM,UAAU,GAAG,KAAK,CAAC,WAAW,CAClC,CACE,CAAsE,EACtE,EAAE;QACF,IAAI,UAAU,CAAC,OAAO,EAAE,CAAC;YACvB,QAAQ,CAAC,CAAC,CAAC,CAAC;QACd,CAAC;IACH,CAAC,EACD,CAAC,QAAQ,CAAC,CACX,CAAC;IAEF,MAAM,SAAS,GAAG,KAAK,CAAC,WAAW,CAAC,GAAG,EAAE;QACvC,IAAI,UAAU,CAAC,OAAO,EAAE,CAAC;YACvB,UAAU,CAAC,OAAO,GAAG,KAAK,CAAC;QAC7B,CAAC;IACH,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,MAAM,UAAU,GAAG,KAAK,CAAC,WAAW,CAClC,CAAC,KAAuC,EAAE,EAAE;QAC1C,KAAK,CAAC,cAAc,EAAE,CAAC;QAEvB,IAAI,UAAU,CAAC,OAAO,EAAE,CAAC;YACvB,QAAQ,CAAC,KAAK,CAAC,CAAC;YAChB,UAAU,CAAC,OAAO,GAAG,KAAK,CAAC;QAC7B,CAAC;IACH,CAAC,EACD,CAAC,QAAQ,CAAC,CACX,CAAC;IAEF,MAAM,WAAW,GAAG,KAAK,CAAC,WAAW,CACnC,CAAC,CAAmC,EAAE,EAAE;QACtC,CAAC,CAAC,cAAc,EAAE,CAAC;QAEnB,IAAI,CAAC,CAAC,MAAM,KAAK,CAAC,CAAC,aAAa,EAAE,CAAC;YACjC,IAAI,CAAC,UAAU,CAAC,OAAO,EAAE,CAAC;gBACxB,QAAQ,CAAC,gBAAgB,CAAC,SAAS,EAAE,SAAS,EAAE;oBAC9C,OAAO,EAAE,IAAI;oBACb,IAAI,EAAE,IAAI;iBACX,CAAC,CAAC;gBACH,UAAU,CAAC,OAAO,GAAG,IAAI,CAAC;YAC5B,CAAC;QACH,CAAC;QAED,QAAQ,CAAC,CAAC,CAAC,CAAC;QAEZ,IAAI,SAAS,CAAC,OAAO;YAAE,SAAS,CAAC,OAAO,CAAC,KAAK,EAAE,CAAC;IACnD,CAAC,EACD,CAAC,QAAQ,EAAE,SAAS,CAAC,CACtB,CAAC;IAEF,MAAM,YAAY,GAAG,KAAK,CAAC,WAAW,CACpC,CAAC,CAAmC,EAAE,EAAE;QACtC,IAAI,CAAC,CAAC,MAAM,KAAK,CAAC,CAAC,aAAa;YAAE,UAAU,CAAC,OAAO,GAAG,IAAI,CAAC;QAE5D,QAAQ,CAAC,CAAC,CAAC,CAAC;QAEZ,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,IAAI,MAA0B,CAAC;QAC/B,MAAM,QAAQ,GAAG,GAAG,CAAC,CAAC,CAAC;QACvB,IACE,GAAG,CAAC,GAAG,KAAK,GAAG,CAAC,SAAS,CAAC,OAAO,EAAE;YACnC,GAAG,CAAC,GAAG,KAAK,GAAG,CAAC,SAAS,CAAC,OAAO,EAAE,EACnC,CAAC;YACD,MAAM,GAAG,QAAQ,GAAG,CAAC,GAAG,CAAC,OAAO,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;QAC7C,CAAC;aAAM,IACL,GAAG,CAAC,GAAG,KAAK,GAAG,CAAC,UAAU,CAAC,OAAO,EAAE;YACpC,GAAG,CAAC,GAAG,KAAK,GAAG,CAAC,OAAO,CAAC,OAAO,EAAE,EACjC,CAAC;YACD,MAAM,GAAG,QAAQ,GAAG,CAAC,GAAG,CAAC,OAAO,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;QAC7C,CAAC;aAAM,IAAI,GAAG,CAAC,GAAG,KAAK,GAAG,CAAC,QAAQ,CAAC,OAAO,EAAE,EAAE,CAAC;YAC9C,MAAM,GAAG,QAAQ,GAAG,CAAC,GAAG,CAAC,OAAO,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC;QAC/C,CAAC;aAAM,IAAI,GAAG,CAAC,GAAG,KAAK,GAAG,CAAC,MAAM,CAAC,OAAO,EAAE,EAAE,CAAC;YAC5C,MAAM,GAAG,QAAQ,GAAG,CAAC,GAAG,CAAC,OAAO,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC;QAC/C,CAAC;aAAM,IAAI,GAAG,CAAC,GAAG,KAAK,GAAG,CAAC,IAAI,CAAC,OAAO,EAAE,EAAE,CAAC;YAC1C,MAAM,GAAG,CAAC,CAAC;QACb,CAAC;aAAM,CAAC;YACN,IAAI,GAAG,CAAC,GAAG,KAAK,GAAG,CAAC,GAAG,CAAC,OAAO,EAAE,EAAE,CAAC;gBAClC,MAAM,GAAG,GAAG,CAAC;YACf,CAAC;QACH,CAAC;QAED,IAAI,SAAS,KAAK,MAAM,EAAE,CAAC;YACzB,IAAI,MAAM,GAAG,GAAG;gBAAE,MAAM,GAAG,GAAG,CAAC,CAAC,sBAAsB;YACtD,IAAI,MAAM,GAAG,CAAC;gBAAE,MAAM,GAAG,CAAC,CAAC;YAE3B,MAAM,QAAQ,GAAG,GAAG,CAAC,KAAK,CAAC,MAAM,CAAC,CAAC;YACnC,IAAI,WAAW;gBAAE,WAAW,CAAC,QAAQ,CAAC,CAAC;YACvC,GAAG,CAAC,cAAc,EAAE,CAAC;QACvB,CAAC;IACH,CAAC,EACD,CAAC,GAAG,EAAE,WAAW,CAAC,CACnB,CAAC;IAEF,MAAM,gBAAgB,GAAG,UAAU,CACjC,YAAY;QACV,CAAC,CAAC,qCAAqC;QACvC,CAAC,CAAC,mCAAmC,EACvC,SAAS,CACV,CAAC;IAEF,MAAM,YAAY,GAAwB,YAAY;QACpD,CAAC,CAAC;YACE,IAAI,EAAE,GAAG,CAAC,GAAG,CAAC,CAAC,GAAG,GAAG,CAAC,GAAG,GAAG,GAAG;YAC/B,eAAe,EAAE,OAAO,GAAG,CAAC,CAAC,cAAc;SAC5C;QACH,CAAC,CAAC;YACE,IAAI,EAAE,KAAK;YACX,GAAG,EAAE,GAAG,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,GAAG,GAAG,CAAC,GAAG,GAAG,CAAC,GAAG,GAAG,GAAG;YACvC,eAAe,EAAE,OAAO,GAAG,CAAC,CAAC,cAAc;SAC5C,CAAC;IAEN,OAAO,CACL,6BAAK,SAAS,EAAE,gBAAgB,EAAE,KAAK,EAAE,KAAK,iBAAc,eAAe;QACzE,4CACc,YAAY,EACxB,IAAI,EAAC,QAAQ,gBACD,SAAS,CAAC,WAAW,CAAC,mBACnB,CAAC,mBACD,GAAG,mBACH,GAAG,CAAC,CAAC,EACpB,SAAS,EAAC,uBAAuB,EACjC,GAAG,EAAE,SAAS,EACd,WAAW,EAAE,WAAW,EACxB,WAAW,EAAE,UAAU,EACvB,WAAW,EAAE,UAAU,EACvB,SAAS,EAAE,SAAS,EACpB,YAAY,EAAE,YAAY,EAC1B,UAAU,EAAE,UAAU,EACtB,QAAQ,EAAE,CAAC,EACX,SAAS,EAAE,SAAS;YAEpB,6BACE,KAAK,EAAE,YAAY,EACnB,SAAS,EAAC,wBAAwB,iBACtB,aAAa,GACzB,CACE,CACF,CACP,CAAC;AACJ,CAAC","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 { useTranslation } from \"../useTranslation\";\n\n// hue is a value from 0 to 360\nfunction calculateHue(currentPos: number, high: number, isVertical: boolean) {\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 if (undefined === e.touches || 0 === e.touches.length) return currentHue;\n x = e.touches[0].pageX;\n }\n if (undefined === x) return currentHue;\n\n let y: number | undefined;\n if (\"pageY\" in e) {\n y = e.pageY;\n } else {\n if (undefined === e.touches || 0 === e.touches.length) return currentHue;\n y = e.touches[0].pageY;\n }\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 * @deprecated in 4.11.x. Props of deprecated component {@link HueSlider}.\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 * @deprecated in 4.11.x. Use {@link https://itwinui.bentley.com/docs/colorpicker iTwinUI color picker} instead.\n */\nexport function HueSlider({\n isHorizontal,\n onHueChange,\n hsv,\n className,\n style,\n}: // eslint-disable-next-line deprecation/deprecation\nHueSliderProps) {\n const { translate } = useTranslation();\n const container = React.useRef<HTMLDivElement>(null);\n const isDragging = React.useRef(false);\n\n const onChange = React.useCallback(\n (\n e: React.MouseEvent<HTMLDivElement> | React.TouchEvent<HTMLDivElement>\n ) => {\n if (container.current) {\n const newHue = calculateChange(\n hsv.h,\n e,\n !!isHorizontal,\n container.current\n );\n const newColor = hsv.clone(newHue);\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 if (isDragging.current) {\n onChange(e);\n }\n },\n [onChange]\n );\n\n const onMouseUp = React.useCallback(() => {\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 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 if (e.target !== e.currentTarget) {\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 if (container.current) container.current.focus();\n },\n [onChange, onMouseUp]\n );\n\n const onTouchStart = React.useCallback(\n (e: React.TouchEvent<HTMLDivElement>) => {\n if (e.target !== e.currentTarget) isDragging.current = true;\n\n onChange(e);\n\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 if (evt.key === Key.End.valueOf()) {\n newHue = 359;\n }\n }\n\n if (undefined !== newHue) {\n if (newHue > 359) newHue = 359; // 360 is same as zero\n if (newHue < 0) newHue = 0;\n\n const newColor = hsv.clone(newHue);\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={translate(\"color.hue\")}\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 +1 @@
|
|
|
1
|
-
{"version":3,"file":"SaturationPicker.d.ts","sourceRoot":"","sources":["../../../../src/imodel-components-react/color/SaturationPicker.tsx"],"names":[],"mappings":"AAIA;;GAEG;AAEH,OAAO,yBAAyB,CAAC;AAEjC,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAAY,QAAQ,EAAE,MAAM,oBAAoB,CAAC;AACxD,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAC;
|
|
1
|
+
{"version":3,"file":"SaturationPicker.d.ts","sourceRoot":"","sources":["../../../../src/imodel-components-react/color/SaturationPicker.tsx"],"names":[],"mappings":"AAIA;;GAEG;AAEH,OAAO,yBAAyB,CAAC;AAEjC,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAAY,QAAQ,EAAE,MAAM,oBAAoB,CAAC;AACxD,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAC;AAuDrD;;;GAGG;AACH,MAAM,WAAW,qBACf,SAAQ,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,EAC1C,WAAW;IACb,sEAAsE;IACtE,kBAAkB,CAAC,EAAE,CAAC,CAAC,UAAU,EAAE,QAAQ,KAAK,IAAI,CAAC,GAAG,SAAS,CAAC;IAClE,sBAAsB;IACtB,GAAG,EAAE,QAAQ,CAAC;CACf;AAED;;;GAGG;AACH,wBAAgB,gBAAgB,CAAC,EAC/B,kBAAkB,EAClB,GAAG,EACH,SAAS,EACT,KAAK,GACN,EACD,qBAAqB,qBA6JpB"}
|
|
@@ -18,11 +18,9 @@ function calculateChange(e, hsv, container) {
|
|
|
18
18
|
x = e.pageX;
|
|
19
19
|
}
|
|
20
20
|
else {
|
|
21
|
-
// istanbul ignore next
|
|
22
21
|
if (undefined !== e.touches && e.touches.length)
|
|
23
22
|
x = e.touches[0].pageX;
|
|
24
23
|
}
|
|
25
|
-
// istanbul ignore if
|
|
26
24
|
if (undefined === x)
|
|
27
25
|
return hsv;
|
|
28
26
|
let y = 0;
|
|
@@ -30,16 +28,13 @@ function calculateChange(e, hsv, container) {
|
|
|
30
28
|
y = e.pageY;
|
|
31
29
|
}
|
|
32
30
|
else {
|
|
33
|
-
// istanbul ignore next
|
|
34
31
|
if (undefined !== e.touches && e.touches.length)
|
|
35
32
|
y = e.touches[0].pageY;
|
|
36
33
|
}
|
|
37
|
-
// istanbul ignore if
|
|
38
34
|
if (undefined === y)
|
|
39
35
|
return hsv;
|
|
40
36
|
let left = x - (containerLeft + window.scrollX);
|
|
41
37
|
let top = y - (containerTop + window.scrollY);
|
|
42
|
-
// istanbul ignore next
|
|
43
38
|
if (left < 0) {
|
|
44
39
|
left = 0;
|
|
45
40
|
}
|
|
@@ -54,16 +49,12 @@ function calculateChange(e, hsv, container) {
|
|
|
54
49
|
}
|
|
55
50
|
let saturation = Math.round((left * 100) / containerWidth);
|
|
56
51
|
let value = Math.round(-((top * 100) / containerHeight) + 100);
|
|
57
|
-
// istanbul ignore if
|
|
58
52
|
if (saturation < 0)
|
|
59
53
|
saturation = 0;
|
|
60
|
-
// istanbul ignore if
|
|
61
54
|
if (saturation > 100)
|
|
62
55
|
saturation = 100;
|
|
63
|
-
// istanbul ignore if
|
|
64
56
|
if (value < 0)
|
|
65
57
|
value = 0;
|
|
66
|
-
// istanbul ignore if
|
|
67
58
|
if (value > 100)
|
|
68
59
|
value = 100;
|
|
69
60
|
return hsv.clone(hsv.h, saturation, value);
|
|
@@ -77,38 +68,31 @@ export function SaturationPicker({ onSaturationChange, hsv, className, style, })
|
|
|
77
68
|
const container = React.useRef(null);
|
|
78
69
|
const isDragging = React.useRef(false);
|
|
79
70
|
const onChange = React.useCallback((e) => {
|
|
80
|
-
// istanbul ignore else
|
|
81
71
|
if (container.current) {
|
|
82
72
|
const newHsvColor = calculateChange(e, hsv, container.current);
|
|
83
|
-
// istanbul ignore else
|
|
84
73
|
if (newHsvColor) {
|
|
85
|
-
// istanbul ignore else
|
|
86
74
|
if (onSaturationChange)
|
|
87
75
|
onSaturationChange(newHsvColor);
|
|
88
76
|
}
|
|
89
77
|
}
|
|
90
78
|
}, [hsv, onSaturationChange]);
|
|
91
79
|
const onDragging = React.useCallback((e) => {
|
|
92
|
-
// istanbul ignore else
|
|
93
80
|
if (isDragging.current) {
|
|
94
81
|
onChange(e);
|
|
95
82
|
}
|
|
96
83
|
}, [onChange]);
|
|
97
84
|
const onMouseUp = React.useCallback(() => {
|
|
98
|
-
// istanbul ignore else
|
|
99
85
|
if (isDragging.current) {
|
|
100
86
|
isDragging.current = false;
|
|
101
87
|
}
|
|
102
88
|
}, []);
|
|
103
89
|
const onTouchEnd = React.useCallback((event) => {
|
|
104
|
-
// istanbul ignore else
|
|
105
90
|
if (isDragging.current) {
|
|
106
91
|
onChange(event);
|
|
107
92
|
isDragging.current = false;
|
|
108
93
|
}
|
|
109
94
|
}, [onChange]);
|
|
110
95
|
const onMouseDown = React.useCallback((e) => {
|
|
111
|
-
// istanbul ignore else
|
|
112
96
|
if (e.target !== e.currentTarget) {
|
|
113
97
|
isDragging.current = true;
|
|
114
98
|
document.addEventListener("mouseup", onMouseUp, {
|
|
@@ -117,17 +101,14 @@ export function SaturationPicker({ onSaturationChange, hsv, className, style, })
|
|
|
117
101
|
});
|
|
118
102
|
}
|
|
119
103
|
onChange(e);
|
|
120
|
-
// istanbul ignore else
|
|
121
104
|
if (container.current)
|
|
122
105
|
container.current.focus();
|
|
123
106
|
e.preventDefault();
|
|
124
107
|
}, [onChange, onMouseUp]);
|
|
125
108
|
const onTouchStart = React.useCallback((e) => {
|
|
126
|
-
// istanbul ignore else
|
|
127
109
|
if (e.target !== e.currentTarget)
|
|
128
110
|
isDragging.current = true;
|
|
129
111
|
onChange(e);
|
|
130
|
-
// istanbul ignore else
|
|
131
112
|
if (container.current)
|
|
132
113
|
container.current.focus();
|
|
133
114
|
}, [onChange]);
|
|
@@ -156,25 +137,19 @@ export function SaturationPicker({ onSaturationChange, hsv, className, style, })
|
|
|
156
137
|
s = 0;
|
|
157
138
|
}
|
|
158
139
|
else {
|
|
159
|
-
// istanbul ignore else
|
|
160
140
|
if (evt.key === Key.End.valueOf()) {
|
|
161
141
|
s = 100;
|
|
162
142
|
}
|
|
163
143
|
}
|
|
164
|
-
// istanbul ignore if
|
|
165
144
|
if (s < 0)
|
|
166
145
|
s = 0;
|
|
167
|
-
// istanbul ignore if
|
|
168
146
|
if (s > 100)
|
|
169
147
|
s = 100;
|
|
170
|
-
// istanbul ignore if
|
|
171
148
|
if (v < 0)
|
|
172
149
|
v = 0;
|
|
173
|
-
// istanbul ignore if
|
|
174
150
|
if (v > 100)
|
|
175
151
|
v = 100;
|
|
176
152
|
const newColor = new HSVColor(h, s, v);
|
|
177
|
-
// istanbul ignore else
|
|
178
153
|
if (onSaturationChange)
|
|
179
154
|
onSaturationChange(newColor);
|
|
180
155
|
evt.preventDefault();
|
|
@@ -1 +1 @@
|
|
|
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 { useTranslation } from \"../useTranslation\";\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 * @deprecated in 4.11.x. Props of deprecated component {@link SaturationPicker}.\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 * @deprecated in 4.11.x. Use {@link https://itwinui.bentley.com/docs/colorpicker iTwinUI color picker} instead.\n */\nexport function SaturationPicker({\n onSaturationChange,\n hsv,\n className,\n style,\n}: // eslint-disable-next-line deprecation/deprecation\nSaturationPickerProps) {\n const { translate } = useTranslation();\n const container = React.useRef<HTMLDivElement>(null);\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={translate(\"color.saturation\")}\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 { useTranslation } from \"../useTranslation\";\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 if (undefined !== e.touches && e.touches.length) x = e.touches[0].pageX;\n }\n if (undefined === x) return hsv;\n\n let y = 0;\n if (\"pageY\" in e) {\n y = e.pageY;\n } else {\n if (undefined !== e.touches && e.touches.length) y = e.touches[0].pageY;\n }\n if (undefined === y) return hsv;\n\n let left = x - (containerLeft + window.scrollX);\n let top = y - (containerTop + window.scrollY);\n\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 if (saturation < 0) saturation = 0;\n if (saturation > 100) saturation = 100;\n if (value < 0) value = 0;\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 * @deprecated in 4.11.x. Props of deprecated component {@link SaturationPicker}.\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 * @deprecated in 4.11.x. Use {@link https://itwinui.bentley.com/docs/colorpicker iTwinUI color picker} instead.\n */\nexport function SaturationPicker({\n onSaturationChange,\n hsv,\n className,\n style,\n}: // eslint-disable-next-line deprecation/deprecation\nSaturationPickerProps) {\n const { translate } = useTranslation();\n const container = React.useRef<HTMLDivElement>(null);\n const isDragging = React.useRef(false);\n\n const onChange = React.useCallback(\n (\n e: React.MouseEvent<HTMLDivElement> | React.TouchEvent<HTMLDivElement>\n ) => {\n if (container.current) {\n const newHsvColor = calculateChange(e, hsv, container.current);\n if (newHsvColor) {\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 if (isDragging.current) {\n onChange(e);\n }\n },\n [onChange]\n );\n\n const onMouseUp = React.useCallback(() => {\n if (isDragging.current) {\n isDragging.current = false;\n }\n }, []);\n\n const onTouchEnd = React.useCallback(\n (event: React.TouchEvent<HTMLDivElement>) => {\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 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 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 if (e.target !== e.currentTarget) isDragging.current = true;\n\n onChange(e);\n\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 if (evt.key === Key.End.valueOf()) {\n s = 100;\n }\n }\n\n if (s < 0) s = 0;\n if (s > 100) s = 100;\n if (v < 0) v = 0;\n if (v > 100) v = 100;\n\n const newColor = new HSVColor(h, s, v);\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={translate(\"color.saturation\")}\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 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Swatch.d.ts","sourceRoot":"","sources":["../../../../src/imodel-components-react/color/Swatch.tsx"],"names":[],"mappings":"AAIA;;GAEG;AAEH,OAAO,eAAe,CAAC;AAEvB,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,oBAAoB,CAAC;AACnD,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAC;AAGrD;;;GAGG;AACH,MAAM,WAAW,gBACf,SAAQ,KAAK,CAAC,oBAAoB,CAAC,iBAAiB,CAAC,EACnD,WAAW;IACb,0BAA0B;IAC1B,QAAQ,EAAE,QAAQ,CAAC;IACnB,qDAAqD;IACrD,WAAW,CAAC,EAAE,CAAC,CAAC,KAAK,EAAE,QAAQ,EAAE,CAAC,EAAE,KAAK,CAAC,UAAU,KAAK,IAAI,CAAC,GAAG,SAAS,CAAC;IAC3E,2DAA2D;IAC3D,KAAK,CAAC,EAAE,OAAO,CAAC;CACjB;AAED;;;GAGG;AAEH,wBAAgB,WAAW,CAAC,KAAK,EAAE,gBAAgB,
|
|
1
|
+
{"version":3,"file":"Swatch.d.ts","sourceRoot":"","sources":["../../../../src/imodel-components-react/color/Swatch.tsx"],"names":[],"mappings":"AAIA;;GAEG;AAEH,OAAO,eAAe,CAAC;AAEvB,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,oBAAoB,CAAC;AACnD,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAC;AAGrD;;;GAGG;AACH,MAAM,WAAW,gBACf,SAAQ,KAAK,CAAC,oBAAoB,CAAC,iBAAiB,CAAC,EACnD,WAAW;IACb,0BAA0B;IAC1B,QAAQ,EAAE,QAAQ,CAAC;IACnB,qDAAqD;IACrD,WAAW,CAAC,EAAE,CAAC,CAAC,KAAK,EAAE,QAAQ,EAAE,CAAC,EAAE,KAAK,CAAC,UAAU,KAAK,IAAI,CAAC,GAAG,SAAS,CAAC;IAC3E,2DAA2D;IAC3D,KAAK,CAAC,EAAE,OAAO,CAAC;CACjB;AAED;;;GAGG;AAEH,wBAAgB,WAAW,CAAC,KAAK,EAAE,gBAAgB,qBAgClD"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Swatch.js","sourceRoot":"","sources":["../../../../src/imodel-components-react/color/Swatch.tsx"],"names":[],"mappings":"AAAA;;;gGAGgG;AAChG;;GAEG;AAEH,OAAO,eAAe,CAAC;AACvB,OAAO,UAAU,MAAM,YAAY,CAAC;AACpC,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,OAAO,EAAE,kBAAkB,EAAE,MAAM,sBAAsB,CAAC;AAiB1D;;;GAGG;AACH,mDAAmD;AACnD,MAAM,UAAU,WAAW,CAAC,KAAuB;IACjD,MAAM,UAAU,GAAG,kBAAkB,CAAC,KAAK,CAAC,QAAQ,CAAC,CAAC;IACtD,MAAM,UAAU,GAAwB;QACtC,eAAe,EAAE,UAAU;QAC3B,GAAG,KAAK,CAAC,KAAK;KACf,CAAC;IAEF,MAAM,WAAW,GAAG,CAAC,CAAmB,EAAE,EAAE;QAC1C,
|
|
1
|
+
{"version":3,"file":"Swatch.js","sourceRoot":"","sources":["../../../../src/imodel-components-react/color/Swatch.tsx"],"names":[],"mappings":"AAAA;;;gGAGgG;AAChG;;GAEG;AAEH,OAAO,eAAe,CAAC;AACvB,OAAO,UAAU,MAAM,YAAY,CAAC;AACpC,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,OAAO,EAAE,kBAAkB,EAAE,MAAM,sBAAsB,CAAC;AAiB1D;;;GAGG;AACH,mDAAmD;AACnD,MAAM,UAAU,WAAW,CAAC,KAAuB;IACjD,MAAM,UAAU,GAAG,kBAAkB,CAAC,KAAK,CAAC,QAAQ,CAAC,CAAC;IACtD,MAAM,UAAU,GAAwB;QACtC,eAAe,EAAE,UAAU;QAC3B,GAAG,KAAK,CAAC,KAAK;KACf,CAAC;IAEF,MAAM,WAAW,GAAG,CAAC,CAAmB,EAAE,EAAE;QAC1C,IAAI,KAAK,IAAI,KAAK,CAAC,WAAW;YAAE,KAAK,CAAC,WAAW,CAAC,KAAK,CAAC,QAAQ,EAAE,CAAC,CAAC,CAAC;IACvE,CAAC,CAAC;IAEF,MAAM,OAAO,GAAG,UAAU,CACxB,yBAAyB,EACzB,KAAK,CAAC,KAAK,IAAI,OAAO,EACtB,KAAK,CAAC,SAAS,CAChB,CAAC;IAEF,MAAM,EACJ,WAAW,EACX,QAAQ,EACR,KAAK,EAAE,6CAA6C;IACpD,GAAG,UAAU,CAAC,qBAAqB;MACpC,GAAG,KAAK,CAAC;IAEV,OAAO,CACL,mCACM,UAAU,EACd,KAAK,EAAE,UAAU,EACjB,SAAS,EAAE,OAAO,EAClB,OAAO,EAAE,WAAW,GACpB,CACH,CAAC;AACJ,CAAC","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 \"./Swatch.scss\";\nimport classnames from \"classnames\";\nimport * as React from \"react\";\nimport type { ColorDef } from \"@itwin/core-common\";\nimport type { CommonProps } from \"@itwin/core-react\";\nimport { getCSSColorFromDef } from \"./getCSSColorFromDef\";\n\n/** Properties for the [[ColorSwatch]] React component\n * @beta\n * @deprecated in 4.11.x. Props of deprecated component {@link ColorSwatch}.\n */\nexport interface ColorSwatchProps\n extends React.ButtonHTMLAttributes<HTMLButtonElement>,\n CommonProps {\n /** color specification */\n colorDef: ColorDef;\n /** function to run when user selects color swatch */\n onColorPick?: ((color: ColorDef, e: React.MouseEvent) => void) | undefined;\n /** Show swatches as squares unless round is set to true */\n round?: boolean;\n}\n\n/** ColorSwatch Functional component displays a color swatch in a button\n * @beta\n * @deprecated in 4.11.x. Use {@link https://itwinui.bentley.com/docs/colorpicker iTwinUI color picker} instead.\n */\n// eslint-disable-next-line deprecation/deprecation\nexport function ColorSwatch(props: ColorSwatchProps) {\n const rgbaString = getCSSColorFromDef(props.colorDef);\n const colorStyle: React.CSSProperties = {\n backgroundColor: rgbaString,\n ...props.style,\n };\n\n const handleClick = (e: React.MouseEvent) => {\n if (props && props.onColorPick) props.onColorPick(props.colorDef, e);\n };\n\n const classes = classnames(\n \"components-color-swatch\",\n props.round && \"round\",\n props.className\n );\n\n const {\n onColorPick,\n colorDef,\n round, // do not pass on color swatch specific props\n ...otherProps // pass-through props\n } = props;\n\n return (\n <button\n {...otherProps}\n style={colorStyle}\n className={classes}\n onClick={handleClick}\n />\n );\n}\n"]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ColorEditor.d.ts","sourceRoot":"","sources":["../../../../src/imodel-components-react/editors/ColorEditor.tsx"],"names":[],"mappings":"AAIA;;GAEG;AAEH,OAAO,oBAAoB,CAAC;AAE5B,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,QAAQ,EAAE,MAAM,oBAAoB,CAAC;AAC9C,OAAO,KAAK,EAIV,aAAa,EACd,MAAM,uBAAuB,CAAC;AAO/B,OAAO,KAAK,EAAE,mBAAmB,EAAE,UAAU,EAAE,MAAM,yBAAyB,CAAC;AAC/E,OAAO,EACL,kBAAkB,EAEnB,MAAM,yBAAyB,CAAC;AAGjC,gBAAgB;AAChB,UAAU,gBAAgB;IACxB,UAAU,EAAE,MAAM,CAAC;IACnB,QAAQ,EAAE,OAAO,CAAC;IAClB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,UAAU,EAAE,MAAM,CAAC;IACnB,eAAe,EAAE,QAAQ,EAAE,CAAC;CAC7B;AAED;;GAEG;AACH,qBAAa,WACX,SAAQ,KAAK,CAAC,aAAa,CAAC,mBAAmB,EAAE,gBAAgB,CACjE,YAAW,UAAU;IAErB,OAAO,CAAC,cAAc,CACF;IAEpB,gBAAgB;IAChB,SAAyB,KAAK,EAAE,QAAQ,CAAC,gBAAgB,CAAC,CAKxD;IAEW,gBAAgB,IAAI,OAAO,CAAC,aAAa,GAAG,SAAS,CAAC;
|
|
1
|
+
{"version":3,"file":"ColorEditor.d.ts","sourceRoot":"","sources":["../../../../src/imodel-components-react/editors/ColorEditor.tsx"],"names":[],"mappings":"AAIA;;GAEG;AAEH,OAAO,oBAAoB,CAAC;AAE5B,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,QAAQ,EAAE,MAAM,oBAAoB,CAAC;AAC9C,OAAO,KAAK,EAIV,aAAa,EACd,MAAM,uBAAuB,CAAC;AAO/B,OAAO,KAAK,EAAE,mBAAmB,EAAE,UAAU,EAAE,MAAM,yBAAyB,CAAC;AAC/E,OAAO,EACL,kBAAkB,EAEnB,MAAM,yBAAyB,CAAC;AAGjC,gBAAgB;AAChB,UAAU,gBAAgB;IACxB,UAAU,EAAE,MAAM,CAAC;IACnB,QAAQ,EAAE,OAAO,CAAC;IAClB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,UAAU,EAAE,MAAM,CAAC;IACnB,eAAe,EAAE,QAAQ,EAAE,CAAC;CAC7B;AAED;;GAEG;AACH,qBAAa,WACX,SAAQ,KAAK,CAAC,aAAa,CAAC,mBAAmB,EAAE,gBAAgB,CACjE,YAAW,UAAU;IAErB,OAAO,CAAC,cAAc,CACF;IAEpB,gBAAgB;IAChB,SAAyB,KAAK,EAAE,QAAQ,CAAC,gBAAgB,CAAC,CAKxD;IAEW,gBAAgB,IAAI,OAAO,CAAC,aAAa,GAAG,SAAS,CAAC;IAenE,IAAW,WAAW,IAAI,WAAW,GAAG,IAAI,CAE3C;IAED,IAAW,QAAQ,IAAI,OAAO,CAE7B;IAED,OAAO,CAAC,QAAQ;IAUhB,OAAO,CAAC,YAAY,CAgBlB;IAEF,gBAAgB;IACA,iBAAiB;IAIjC,gBAAgB;IACA,kBAAkB,CAAC,SAAS,EAAE,mBAAmB;YAMnD,iBAAiB;IAkC/B,gBAAgB;IACA,MAAM;CAwBvB;AAED;;;GAGG;AACH,qBAAa,mBAAoB,SAAQ,kBAAkB;IACzD,IAAW,SAAS,IAAI,KAAK,CAAC,SAAS,CAEtC;CACF"}
|