@itwin/imodel-components-react 4.0.0-dev.2 → 4.0.0-dev.21
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 +139 -2
- package/LICENSE.md +1 -1
- package/README.md +2 -2
- package/lib/cjs/imodel-components-react/UiIModelComponents.d.ts.map +1 -1
- package/lib/cjs/imodel-components-react/UiIModelComponents.js +3 -7
- package/lib/cjs/imodel-components-react/UiIModelComponents.js.map +1 -1
- package/lib/cjs/imodel-components-react/color/AlphaSlider.d.ts +2 -2
- package/lib/cjs/imodel-components-react/color/AlphaSlider.js +6 -2
- package/lib/cjs/imodel-components-react/color/AlphaSlider.js.map +1 -1
- package/lib/cjs/imodel-components-react/color/AlphaSlider.scss +63 -63
- package/lib/cjs/imodel-components-react/color/ColorPickerButton.d.ts.map +1 -1
- package/lib/cjs/imodel-components-react/color/ColorPickerButton.js +9 -4
- package/lib/cjs/imodel-components-react/color/ColorPickerButton.js.map +1 -1
- package/lib/cjs/imodel-components-react/color/ColorPickerButton.scss +90 -90
- package/lib/cjs/imodel-components-react/color/ColorPickerDialog.js +5 -1
- package/lib/cjs/imodel-components-react/color/ColorPickerDialog.js.map +1 -1
- package/lib/cjs/imodel-components-react/color/ColorPickerPopup.d.ts.map +1 -1
- package/lib/cjs/imodel-components-react/color/ColorPickerPopup.js +10 -4
- package/lib/cjs/imodel-components-react/color/ColorPickerPopup.js.map +1 -1
- package/lib/cjs/imodel-components-react/color/ColorPickerPopup.scss +62 -63
- package/lib/cjs/imodel-components-react/color/HueSlider.js +5 -1
- package/lib/cjs/imodel-components-react/color/HueSlider.js.map +1 -1
- package/lib/cjs/imodel-components-react/color/HueSlider.scss +61 -61
- package/lib/cjs/imodel-components-react/color/SaturationPicker.js +5 -1
- package/lib/cjs/imodel-components-react/color/SaturationPicker.js.map +1 -1
- package/lib/cjs/imodel-components-react/color/SaturationPicker.scss +35 -35
- package/lib/cjs/imodel-components-react/color/Swatch.js +5 -1
- package/lib/cjs/imodel-components-react/color/Swatch.js.map +1 -1
- package/lib/cjs/imodel-components-react/color/Swatch.scss +22 -23
- package/lib/cjs/imodel-components-react/color/getCSSColorFromDef.js.map +1 -1
- package/lib/cjs/imodel-components-react/editors/ColorEditor.js +5 -1
- package/lib/cjs/imodel-components-react/editors/ColorEditor.js.map +1 -1
- package/lib/cjs/imodel-components-react/editors/ColorEditor.scss +18 -18
- package/lib/cjs/imodel-components-react/editors/WeightEditor.js +5 -1
- package/lib/cjs/imodel-components-react/editors/WeightEditor.js.map +1 -1
- package/lib/cjs/imodel-components-react/editors/WeightEditor.scss +16 -16
- package/lib/cjs/imodel-components-react/inputs/QuantityInput.js +5 -1
- 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 +11 -4
- package/lib/cjs/imodel-components-react/inputs/QuantityNumberInput.js.map +1 -1
- package/lib/cjs/imodel-components-react/inputs/QuantityNumberInput.scss +106 -107
- package/lib/cjs/imodel-components-react/lineweight/Swatch.js +5 -1
- package/lib/cjs/imodel-components-react/lineweight/Swatch.js.map +1 -1
- package/lib/cjs/imodel-components-react/lineweight/Swatch.scss +48 -48
- package/lib/cjs/imodel-components-react/lineweight/WeightPickerButton.js +6 -2
- package/lib/cjs/imodel-components-react/lineweight/WeightPickerButton.js.map +1 -1
- package/lib/cjs/imodel-components-react/lineweight/WeightPickerButton.scss +51 -52
- package/lib/cjs/imodel-components-react/navigationaids/Cube.js +5 -1
- package/lib/cjs/imodel-components-react/navigationaids/Cube.js.map +1 -1
- package/lib/cjs/imodel-components-react/navigationaids/Cube.scss +19 -19
- package/lib/cjs/imodel-components-react/navigationaids/CubeNavigationAid.d.ts +4 -24
- package/lib/cjs/imodel-components-react/navigationaids/CubeNavigationAid.d.ts.map +1 -1
- package/lib/cjs/imodel-components-react/navigationaids/CubeNavigationAid.js +46 -54
- package/lib/cjs/imodel-components-react/navigationaids/CubeNavigationAid.js.map +1 -1
- package/lib/cjs/imodel-components-react/navigationaids/CubeNavigationAid.scss +178 -182
- package/lib/cjs/imodel-components-react/navigationaids/DrawingNavigationAid.d.ts.map +1 -1
- package/lib/cjs/imodel-components-react/navigationaids/DrawingNavigationAid.js +16 -6
- package/lib/cjs/imodel-components-react/navigationaids/DrawingNavigationAid.js.map +1 -1
- package/lib/cjs/imodel-components-react/navigationaids/DrawingNavigationAid.scss +135 -134
- package/lib/cjs/imodel-components-react/quantityformat/FormatPanel.js +6 -2
- package/lib/cjs/imodel-components-react/quantityformat/FormatPanel.js.map +1 -1
- package/lib/cjs/imodel-components-react/quantityformat/FormatPanel.scss +59 -63
- package/lib/cjs/imodel-components-react/quantityformat/FormatPrecision.js +7 -4
- package/lib/cjs/imodel-components-react/quantityformat/FormatPrecision.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 +10 -5
- package/lib/cjs/imodel-components-react/quantityformat/FormatSample.js.map +1 -1
- package/lib/cjs/imodel-components-react/quantityformat/FormatType.js +6 -3
- package/lib/cjs/imodel-components-react/quantityformat/FormatType.js.map +1 -1
- package/lib/cjs/imodel-components-react/quantityformat/FormatUnitLabel.js +6 -3
- package/lib/cjs/imodel-components-react/quantityformat/FormatUnitLabel.js.map +1 -1
- package/lib/cjs/imodel-components-react/quantityformat/FormatUnits.js +10 -10
- package/lib/cjs/imodel-components-react/quantityformat/FormatUnits.js.map +1 -1
- package/lib/cjs/imodel-components-react/quantityformat/MiscFormatOptions.js +8 -5
- package/lib/cjs/imodel-components-react/quantityformat/MiscFormatOptions.js.map +1 -1
- package/lib/cjs/imodel-components-react/quantityformat/QuantityFormatPanel.js +5 -1
- package/lib/cjs/imodel-components-react/quantityformat/QuantityFormatPanel.js.map +1 -1
- package/lib/cjs/imodel-components-react/quantityformat/misc/DecimalPrecision.js +5 -1
- package/lib/cjs/imodel-components-react/quantityformat/misc/DecimalPrecision.js.map +1 -1
- package/lib/cjs/imodel-components-react/quantityformat/misc/DecimalSeparator.js +5 -1
- package/lib/cjs/imodel-components-react/quantityformat/misc/DecimalSeparator.js.map +1 -1
- package/lib/cjs/imodel-components-react/quantityformat/misc/FractionPrecision.js +5 -1
- package/lib/cjs/imodel-components-react/quantityformat/misc/FractionPrecision.js.map +1 -1
- package/lib/cjs/imodel-components-react/quantityformat/misc/ScientificType.js +5 -1
- package/lib/cjs/imodel-components-react/quantityformat/misc/ScientificType.js.map +1 -1
- package/lib/cjs/imodel-components-react/quantityformat/misc/SignOption.js +5 -1
- package/lib/cjs/imodel-components-react/quantityformat/misc/SignOption.js.map +1 -1
- package/lib/cjs/imodel-components-react/quantityformat/misc/StationSeparatorSelector.js +5 -1
- package/lib/cjs/imodel-components-react/quantityformat/misc/StationSeparatorSelector.js.map +1 -1
- package/lib/cjs/imodel-components-react/quantityformat/misc/StationSizeSelector.js +5 -1
- package/lib/cjs/imodel-components-react/quantityformat/misc/StationSizeSelector.js.map +1 -1
- package/lib/cjs/imodel-components-react/quantityformat/misc/ThousandsSelector.js +5 -1
- package/lib/cjs/imodel-components-react/quantityformat/misc/ThousandsSelector.js.map +1 -1
- package/lib/cjs/imodel-components-react/quantityformat/misc/ThousandsSeparator.js +6 -3
- package/lib/cjs/imodel-components-react/quantityformat/misc/ThousandsSeparator.js.map +1 -1
- package/lib/cjs/imodel-components-react/quantityformat/misc/UnitDescr.js +5 -1
- 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 +22 -23
- package/lib/cjs/imodel-components-react/timeline/BaseSolarDataProvider.js.map +1 -1
- package/lib/cjs/imodel-components-react/timeline/BaseTimelineDataProvider.js.map +1 -1
- package/lib/cjs/imodel-components-react/timeline/InlineEdit.js +5 -1
- package/lib/cjs/imodel-components-react/timeline/InlineEdit.js.map +1 -1
- package/lib/cjs/imodel-components-react/timeline/InlineEdit.scss +26 -26
- package/lib/cjs/imodel-components-react/timeline/PlayerButton.d.ts.map +1 -1
- package/lib/cjs/imodel-components-react/timeline/PlayerButton.js +12 -4
- package/lib/cjs/imodel-components-react/timeline/PlayerButton.js.map +1 -1
- package/lib/cjs/imodel-components-react/timeline/PlayerButton.scss +28 -31
- package/lib/cjs/imodel-components-react/timeline/Scrubber.js +5 -1
- package/lib/cjs/imodel-components-react/timeline/Scrubber.js.map +1 -1
- package/lib/cjs/imodel-components-react/timeline/Scrubber.scss +105 -112
- package/lib/cjs/imodel-components-react/timeline/SolarTimeline.d.ts.map +1 -1
- package/lib/cjs/imodel-components-react/timeline/SolarTimeline.js +13 -5
- package/lib/cjs/imodel-components-react/timeline/SolarTimeline.js.map +1 -1
- package/lib/cjs/imodel-components-react/timeline/SolarTimeline.scss +359 -356
- package/lib/cjs/imodel-components-react/timeline/SpeedTimeline.js +5 -1
- package/lib/cjs/imodel-components-react/timeline/SpeedTimeline.js.map +1 -1
- package/lib/cjs/imodel-components-react/timeline/SpeedTimeline.scss +39 -39
- package/lib/cjs/imodel-components-react/timeline/Timeline.scss +164 -164
- package/lib/cjs/imodel-components-react/timeline/TimelineComponent.d.ts +3 -6
- package/lib/cjs/imodel-components-react/timeline/TimelineComponent.d.ts.map +1 -1
- package/lib/cjs/imodel-components-react/timeline/TimelineComponent.js +59 -19
- package/lib/cjs/imodel-components-react/timeline/TimelineComponent.js.map +1 -1
- package/lib/cjs/imodel-components-react/timeline/TimelineComponent.scss +178 -164
- package/lib/cjs/imodel-components-react/timeline/interfaces.d.ts +3 -32
- package/lib/cjs/imodel-components-react/timeline/interfaces.d.ts.map +1 -1
- package/lib/cjs/imodel-components-react/timeline/interfaces.js.map +1 -1
- package/lib/cjs/imodel-components-react/viewport/ViewportComponent.d.ts +1 -1
- package/lib/cjs/imodel-components-react/viewport/ViewportComponent.d.ts.map +1 -1
- package/lib/cjs/imodel-components-react/viewport/ViewportComponent.js +12 -10
- package/lib/cjs/imodel-components-react/viewport/ViewportComponent.js.map +1 -1
- package/lib/cjs/imodel-components-react/viewport/ViewportComponentEvents.js +1 -1
- package/lib/cjs/imodel-components-react/viewport/ViewportComponentEvents.js.map +1 -1
- package/lib/cjs/imodel-components-react.d.ts +0 -1
- package/lib/cjs/imodel-components-react.d.ts.map +1 -1
- package/lib/cjs/imodel-components-react.js +5 -2
- package/lib/cjs/imodel-components-react.js.map +1 -1
- package/lib/esm/imodel-components-react/UiIModelComponents.d.ts.map +1 -1
- package/lib/esm/imodel-components-react/UiIModelComponents.js +4 -7
- package/lib/esm/imodel-components-react/UiIModelComponents.js.map +1 -1
- package/lib/esm/imodel-components-react/color/AlphaSlider.d.ts +2 -2
- package/lib/esm/imodel-components-react/color/AlphaSlider.js +1 -1
- package/lib/esm/imodel-components-react/color/AlphaSlider.js.map +1 -1
- package/lib/esm/imodel-components-react/color/AlphaSlider.scss +63 -63
- package/lib/esm/imodel-components-react/color/ColorPickerButton.d.ts.map +1 -1
- package/lib/esm/imodel-components-react/color/ColorPickerButton.js +5 -4
- package/lib/esm/imodel-components-react/color/ColorPickerButton.js.map +1 -1
- package/lib/esm/imodel-components-react/color/ColorPickerButton.scss +90 -90
- package/lib/esm/imodel-components-react/color/ColorPickerDialog.js.map +1 -1
- package/lib/esm/imodel-components-react/color/ColorPickerPopup.d.ts.map +1 -1
- package/lib/esm/imodel-components-react/color/ColorPickerPopup.js +6 -4
- package/lib/esm/imodel-components-react/color/ColorPickerPopup.js.map +1 -1
- package/lib/esm/imodel-components-react/color/ColorPickerPopup.scss +62 -63
- package/lib/esm/imodel-components-react/color/HueSlider.js.map +1 -1
- package/lib/esm/imodel-components-react/color/HueSlider.scss +61 -61
- package/lib/esm/imodel-components-react/color/SaturationPicker.js.map +1 -1
- package/lib/esm/imodel-components-react/color/SaturationPicker.scss +35 -35
- package/lib/esm/imodel-components-react/color/Swatch.js.map +1 -1
- package/lib/esm/imodel-components-react/color/Swatch.scss +22 -23
- package/lib/esm/imodel-components-react/color/getCSSColorFromDef.js.map +1 -1
- package/lib/esm/imodel-components-react/editors/ColorEditor.js.map +1 -1
- package/lib/esm/imodel-components-react/editors/ColorEditor.scss +18 -18
- package/lib/esm/imodel-components-react/editors/WeightEditor.js.map +1 -1
- package/lib/esm/imodel-components-react/editors/WeightEditor.scss +16 -16
- 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 +7 -4
- package/lib/esm/imodel-components-react/inputs/QuantityNumberInput.js.map +1 -1
- package/lib/esm/imodel-components-react/inputs/QuantityNumberInput.scss +106 -107
- package/lib/esm/imodel-components-react/lineweight/Swatch.js.map +1 -1
- package/lib/esm/imodel-components-react/lineweight/Swatch.scss +48 -48
- package/lib/esm/imodel-components-react/lineweight/WeightPickerButton.js +2 -1
- package/lib/esm/imodel-components-react/lineweight/WeightPickerButton.js.map +1 -1
- package/lib/esm/imodel-components-react/lineweight/WeightPickerButton.scss +51 -52
- package/lib/esm/imodel-components-react/navigationaids/Cube.js.map +1 -1
- package/lib/esm/imodel-components-react/navigationaids/Cube.scss +19 -19
- package/lib/esm/imodel-components-react/navigationaids/CubeNavigationAid.d.ts +4 -24
- package/lib/esm/imodel-components-react/navigationaids/CubeNavigationAid.d.ts.map +1 -1
- package/lib/esm/imodel-components-react/navigationaids/CubeNavigationAid.js +42 -52
- package/lib/esm/imodel-components-react/navigationaids/CubeNavigationAid.js.map +1 -1
- package/lib/esm/imodel-components-react/navigationaids/CubeNavigationAid.scss +178 -182
- package/lib/esm/imodel-components-react/navigationaids/DrawingNavigationAid.d.ts.map +1 -1
- package/lib/esm/imodel-components-react/navigationaids/DrawingNavigationAid.js +12 -5
- package/lib/esm/imodel-components-react/navigationaids/DrawingNavigationAid.js.map +1 -1
- package/lib/esm/imodel-components-react/navigationaids/DrawingNavigationAid.scss +135 -134
- package/lib/esm/imodel-components-react/quantityformat/FormatPanel.js +1 -1
- package/lib/esm/imodel-components-react/quantityformat/FormatPanel.js.map +1 -1
- package/lib/esm/imodel-components-react/quantityformat/FormatPanel.scss +59 -63
- package/lib/esm/imodel-components-react/quantityformat/FormatPrecision.js +2 -3
- package/lib/esm/imodel-components-react/quantityformat/FormatPrecision.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 +6 -5
- package/lib/esm/imodel-components-react/quantityformat/FormatSample.js.map +1 -1
- package/lib/esm/imodel-components-react/quantityformat/FormatType.js +1 -2
- package/lib/esm/imodel-components-react/quantityformat/FormatType.js.map +1 -1
- package/lib/esm/imodel-components-react/quantityformat/FormatUnitLabel.js +1 -2
- package/lib/esm/imodel-components-react/quantityformat/FormatUnitLabel.js.map +1 -1
- package/lib/esm/imodel-components-react/quantityformat/FormatUnits.js +5 -9
- package/lib/esm/imodel-components-react/quantityformat/FormatUnits.js.map +1 -1
- package/lib/esm/imodel-components-react/quantityformat/MiscFormatOptions.js +3 -4
- package/lib/esm/imodel-components-react/quantityformat/MiscFormatOptions.js.map +1 -1
- package/lib/esm/imodel-components-react/quantityformat/QuantityFormatPanel.js.map +1 -1
- package/lib/esm/imodel-components-react/quantityformat/misc/DecimalPrecision.js.map +1 -1
- package/lib/esm/imodel-components-react/quantityformat/misc/DecimalSeparator.js.map +1 -1
- package/lib/esm/imodel-components-react/quantityformat/misc/FractionPrecision.js.map +1 -1
- package/lib/esm/imodel-components-react/quantityformat/misc/ScientificType.js.map +1 -1
- package/lib/esm/imodel-components-react/quantityformat/misc/SignOption.js.map +1 -1
- package/lib/esm/imodel-components-react/quantityformat/misc/StationSeparatorSelector.js.map +1 -1
- package/lib/esm/imodel-components-react/quantityformat/misc/StationSizeSelector.js.map +1 -1
- package/lib/esm/imodel-components-react/quantityformat/misc/ThousandsSelector.js.map +1 -1
- package/lib/esm/imodel-components-react/quantityformat/misc/ThousandsSeparator.js +1 -2
- package/lib/esm/imodel-components-react/quantityformat/misc/ThousandsSeparator.js.map +1 -1
- 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 +22 -23
- package/lib/esm/imodel-components-react/timeline/BaseSolarDataProvider.js.map +1 -1
- package/lib/esm/imodel-components-react/timeline/BaseTimelineDataProvider.js.map +1 -1
- package/lib/esm/imodel-components-react/timeline/InlineEdit.js.map +1 -1
- package/lib/esm/imodel-components-react/timeline/InlineEdit.scss +26 -26
- package/lib/esm/imodel-components-react/timeline/PlayerButton.d.ts.map +1 -1
- package/lib/esm/imodel-components-react/timeline/PlayerButton.js +7 -3
- package/lib/esm/imodel-components-react/timeline/PlayerButton.js.map +1 -1
- package/lib/esm/imodel-components-react/timeline/PlayerButton.scss +28 -31
- package/lib/esm/imodel-components-react/timeline/Scrubber.js.map +1 -1
- package/lib/esm/imodel-components-react/timeline/Scrubber.scss +105 -112
- package/lib/esm/imodel-components-react/timeline/SolarTimeline.d.ts.map +1 -1
- package/lib/esm/imodel-components-react/timeline/SolarTimeline.js +10 -6
- package/lib/esm/imodel-components-react/timeline/SolarTimeline.js.map +1 -1
- package/lib/esm/imodel-components-react/timeline/SolarTimeline.scss +359 -356
- package/lib/esm/imodel-components-react/timeline/SpeedTimeline.js.map +1 -1
- package/lib/esm/imodel-components-react/timeline/SpeedTimeline.scss +39 -39
- package/lib/esm/imodel-components-react/timeline/Timeline.scss +164 -164
- package/lib/esm/imodel-components-react/timeline/TimelineComponent.d.ts +3 -6
- package/lib/esm/imodel-components-react/timeline/TimelineComponent.d.ts.map +1 -1
- package/lib/esm/imodel-components-react/timeline/TimelineComponent.js +47 -11
- package/lib/esm/imodel-components-react/timeline/TimelineComponent.js.map +1 -1
- package/lib/esm/imodel-components-react/timeline/TimelineComponent.scss +178 -164
- package/lib/esm/imodel-components-react/timeline/interfaces.d.ts +3 -32
- package/lib/esm/imodel-components-react/timeline/interfaces.d.ts.map +1 -1
- package/lib/esm/imodel-components-react/timeline/interfaces.js.map +1 -1
- package/lib/esm/imodel-components-react/viewport/ViewportComponent.d.ts +1 -1
- package/lib/esm/imodel-components-react/viewport/ViewportComponent.d.ts.map +1 -1
- package/lib/esm/imodel-components-react/viewport/ViewportComponent.js +7 -9
- package/lib/esm/imodel-components-react/viewport/ViewportComponent.js.map +1 -1
- package/lib/esm/imodel-components-react/viewport/ViewportComponentEvents.js +2 -1
- package/lib/esm/imodel-components-react/viewport/ViewportComponentEvents.js.map +1 -1
- package/lib/esm/imodel-components-react.d.ts +0 -1
- package/lib/esm/imodel-components-react.d.ts.map +1 -1
- package/lib/esm/imodel-components-react.js +0 -1
- package/lib/esm/imodel-components-react.js.map +1 -1
- package/lib/public/locales/en/UiIModelComponents.json +139 -139
- package/package.json +38 -39
- package/lib/cjs/imodel-components-react/color/ColorPickerPanel.d.ts +0 -22
- package/lib/cjs/imodel-components-react/color/ColorPickerPanel.d.ts.map +0 -1
- package/lib/cjs/imodel-components-react/color/ColorPickerPanel.js +0 -146
- package/lib/cjs/imodel-components-react/color/ColorPickerPanel.js.map +0 -1
- package/lib/cjs/imodel-components-react/color/ColorPickerPanel.scss +0 -94
- package/lib/esm/imodel-components-react/color/ColorPickerPanel.d.ts +0 -22
- package/lib/esm/imodel-components-react/color/ColorPickerPanel.d.ts.map +0 -1
- package/lib/esm/imodel-components-react/color/ColorPickerPanel.js +0 -123
- package/lib/esm/imodel-components-react/color/ColorPickerPanel.js.map +0 -1
- package/lib/esm/imodel-components-react/color/ColorPickerPanel.scss +0 -94
|
@@ -1,61 +1,61 @@
|
|
|
1
|
-
/*---------------------------------------------------------------------------------------------
|
|
2
|
-
* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
|
|
3
|
-
* See LICENSE.md in the project root for license terms and full copyright notice.
|
|
4
|
-
*--------------------------------------------------------------------------------------------*/
|
|
5
|
-
.components-hue-pointer {
|
|
6
|
-
position: absolute;
|
|
7
|
-
width: 1.2em;
|
|
8
|
-
height: 1.2em;
|
|
9
|
-
border-radius: 50%;
|
|
10
|
-
box-shadow: rgba(0, 0, 0, 0.37) 0px 1px 4px 0px;
|
|
11
|
-
|
|
12
|
-
&:focus {
|
|
13
|
-
outline: none;
|
|
14
|
-
border: none;
|
|
15
|
-
}
|
|
16
|
-
}
|
|
17
|
-
|
|
18
|
-
.components-hue-container-horizontal {
|
|
19
|
-
width: 100%;
|
|
20
|
-
height: .5em;
|
|
21
|
-
display: flex;
|
|
22
|
-
align-items: center;
|
|
23
|
-
justify-content: center;
|
|
24
|
-
|
|
25
|
-
.components-hue-slider {
|
|
26
|
-
position: relative;
|
|
27
|
-
width: 100%;
|
|
28
|
-
height: 100%;
|
|
29
|
-
border-radius: 1em;
|
|
30
|
-
background: linear-gradient(to right, #f00 0%, #ff0 17%, #0f0 33%, #0ff 50%, #00f 67%, #f0f 83%, #f00 100%);
|
|
31
|
-
}
|
|
32
|
-
|
|
33
|
-
.components-hue-pointer {
|
|
34
|
-
transform: translate(-.6em, -.45em);
|
|
35
|
-
cursor: pointer;
|
|
36
|
-
border: 1px solid #fff;
|
|
37
|
-
}
|
|
38
|
-
}
|
|
39
|
-
|
|
40
|
-
.components-hue-container-vertical {
|
|
41
|
-
width: .5em;
|
|
42
|
-
display: flex;
|
|
43
|
-
align-items: center;
|
|
44
|
-
justify-content: center;
|
|
45
|
-
height: 100%;
|
|
46
|
-
|
|
47
|
-
.components-hue-slider {
|
|
48
|
-
position: relative;
|
|
49
|
-
width: 100%;
|
|
50
|
-
height: 100%;
|
|
51
|
-
border-radius: 1em;
|
|
52
|
-
background: linear-gradient(to top, #f00 0%, #ff0 17%, #0f0 33%,
|
|
53
|
-
#0ff 50%, #00f 67%, #f0f 83%, #f00 100%);
|
|
54
|
-
}
|
|
55
|
-
|
|
56
|
-
.components-hue-pointer {
|
|
57
|
-
transform: translate(-.45em, -.6em);
|
|
58
|
-
cursor: pointer;
|
|
59
|
-
border: 1px solid #fff;
|
|
60
|
-
}
|
|
61
|
-
}
|
|
1
|
+
/*---------------------------------------------------------------------------------------------
|
|
2
|
+
* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
|
|
3
|
+
* See LICENSE.md in the project root for license terms and full copyright notice.
|
|
4
|
+
*--------------------------------------------------------------------------------------------*/
|
|
5
|
+
.components-hue-pointer {
|
|
6
|
+
position: absolute;
|
|
7
|
+
width: 1.2em;
|
|
8
|
+
height: 1.2em;
|
|
9
|
+
border-radius: 50%;
|
|
10
|
+
box-shadow: rgba(0, 0, 0, 0.37) 0px 1px 4px 0px;
|
|
11
|
+
|
|
12
|
+
&:focus {
|
|
13
|
+
outline: none;
|
|
14
|
+
border: none;
|
|
15
|
+
}
|
|
16
|
+
}
|
|
17
|
+
|
|
18
|
+
.components-hue-container-horizontal {
|
|
19
|
+
width: 100%;
|
|
20
|
+
height: .5em;
|
|
21
|
+
display: flex;
|
|
22
|
+
align-items: center;
|
|
23
|
+
justify-content: center;
|
|
24
|
+
|
|
25
|
+
.components-hue-slider {
|
|
26
|
+
position: relative;
|
|
27
|
+
width: 100%;
|
|
28
|
+
height: 100%;
|
|
29
|
+
border-radius: 1em;
|
|
30
|
+
background: linear-gradient(to right, #f00 0%, #ff0 17%, #0f0 33%, #0ff 50%, #00f 67%, #f0f 83%, #f00 100%);
|
|
31
|
+
}
|
|
32
|
+
|
|
33
|
+
.components-hue-pointer {
|
|
34
|
+
transform: translate(-.6em, -.45em);
|
|
35
|
+
cursor: pointer;
|
|
36
|
+
border: 1px solid #fff;
|
|
37
|
+
}
|
|
38
|
+
}
|
|
39
|
+
|
|
40
|
+
.components-hue-container-vertical {
|
|
41
|
+
width: .5em;
|
|
42
|
+
display: flex;
|
|
43
|
+
align-items: center;
|
|
44
|
+
justify-content: center;
|
|
45
|
+
height: 100%;
|
|
46
|
+
|
|
47
|
+
.components-hue-slider {
|
|
48
|
+
position: relative;
|
|
49
|
+
width: 100%;
|
|
50
|
+
height: 100%;
|
|
51
|
+
border-radius: 1em;
|
|
52
|
+
background: linear-gradient(to top, #f00 0%, #ff0 17%, #0f0 33%,
|
|
53
|
+
#0ff 50%, #00f 67%, #f0f 83%, #f00 100%);
|
|
54
|
+
}
|
|
55
|
+
|
|
56
|
+
.components-hue-pointer {
|
|
57
|
+
transform: translate(-.45em, -.6em);
|
|
58
|
+
cursor: pointer;
|
|
59
|
+
border: 1px solid #fff;
|
|
60
|
+
}
|
|
61
|
+
}
|
|
@@ -8,7 +8,11 @@
|
|
|
8
8
|
*/
|
|
9
9
|
var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
|
|
10
10
|
if (k2 === undefined) k2 = k;
|
|
11
|
-
Object.
|
|
11
|
+
var desc = Object.getOwnPropertyDescriptor(m, k);
|
|
12
|
+
if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
|
|
13
|
+
desc = { enumerable: true, get: function() { return m[k]; } };
|
|
14
|
+
}
|
|
15
|
+
Object.defineProperty(o, k2, desc);
|
|
12
16
|
}) : (function(o, m, k, k2) {
|
|
13
17
|
if (k2 === undefined) k2 = k;
|
|
14
18
|
o[k2] = m[k];
|
|
@@ -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 { ColorDef, HSVColor } from \"@itwin/core-common\";\nimport { SpecialKey } from \"@itwin/appui-abstract\";\nimport { CommonProps } from \"@itwin/core-react\";\nimport { UiIModelComponents } from \"../UiIModelComponents\";\n\nfunction calculateChange(e: React.MouseEvent<HTMLDivElement> | React.TouchEvent<HTMLDivElement>,\n hsv: HSVColor, container: HTMLDivElement): HSVColor | undefined {\n const { width: containerWidth, height: containerHeight, top: containerTop, left: containerLeft } = 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)\n x = e.touches[0].pageX;\n }\n // istanbul ignore if\n if (undefined === x)\n 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)\n y = e.touches[0].pageY;\n }\n // istanbul ignore if\n if (undefined === y)\n 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)\n saturation = 0;\n // istanbul ignore if\n if (saturation > 100)\n saturation = 100;\n // istanbul ignore if\n if (value < 0)\n value = 0;\n // istanbul ignore if\n if (value > 100)\n value = 100;\n\n return hsv.clone(hsv.h, saturation, value);\n}\n\n/** Properties for the [[SaturationPicker]] React component\n * @beta\n */\nexport interface SaturationPickerProps extends React.HTMLAttributes<HTMLDivElement>, CommonProps {\n /** function to run when user selects location in saturation region */\n onSaturationChange?: ((saturation: HSVColor) => void) | undefined;\n /** HSV Color Value */\n hsv: HSVColor;\n}\n\n/** SaturationPicker component used to set the saturation value.\n * @beta\n */\nexport function SaturationPicker({ onSaturationChange, hsv, className, style }: SaturationPickerProps) {\n const container = React.useRef<HTMLDivElement>(null);\n const [saturationLabel] = React.useState(() => UiIModelComponents.translate(\"color.saturation\"));\n const isDragging = React.useRef(false);\n\n const onChange = React.useCallback((e: React.MouseEvent<HTMLDivElement> | React.TouchEvent<HTMLDivElement>) => {\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)\n onSaturationChange(newHsvColor);\n }\n }\n }, [hsv, onSaturationChange]);\n\n const onDragging = React.useCallback((e: React.MouseEvent<HTMLDivElement> | React.TouchEvent<HTMLDivElement>) => {\n // istanbul ignore else\n if (isDragging.current) {\n onChange(e);\n }\n }, [onChange]);\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((event: React.TouchEvent<HTMLDivElement>) => {\n // istanbul ignore else\n if (isDragging.current) {\n onChange(event);\n isDragging.current = false;\n }\n }, [onChange]);\n\n const onMouseDown = React.useCallback((e: React.MouseEvent<HTMLDivElement>) => {\n // istanbul ignore else\n if (e.target !== e.currentTarget) {\n isDragging.current = true;\n document.addEventListener(\"mouseup\", onMouseUp, { capture: true, once: true });\n }\n\n onChange(e);\n\n // istanbul ignore else\n if (container.current)\n container.current.focus();\n\n e.preventDefault();\n }, [onChange, onMouseUp]);\n\n const onTouchStart = React.useCallback((e: React.TouchEvent<HTMLDivElement>) => {\n // istanbul ignore else\n if (e.target !== e.currentTarget)\n isDragging.current = true;\n\n onChange(e);\n\n // istanbul ignore else\n if (container.current)\n container.current.focus();\n }, [onChange]);\n\n const onKeyDown = React.useCallback((evt: React.KeyboardEvent<HTMLDivElement>) => {\n const h = hsv.h;\n let { s, v } = { ...hsv };\n if (evt.key === SpecialKey.ArrowLeft) {\n s -= (evt.ctrlKey ? 10 : 1);\n } else if (evt.key === SpecialKey.ArrowDown) {\n v -= (evt.ctrlKey ? 10 : 1);\n } else if (evt.key === SpecialKey.ArrowRight) {\n s += (evt.ctrlKey ? 10 : 1);\n } else if (evt.key === SpecialKey.ArrowUp) {\n v += (evt.ctrlKey ? 10 : 1);\n } else if (evt.key === SpecialKey.PageDown) {\n v = 0;\n } else if (evt.key === SpecialKey.PageUp) {\n v = 100;\n } else if (evt.key === SpecialKey.Home) {\n s = 0;\n } else {\n // istanbul ignore else\n if (evt.key === SpecialKey.End) {\n s = 100;\n }\n }\n\n // istanbul ignore if\n if (s < 0)\n s = 0;\n // istanbul ignore if\n if (s > 100)\n s = 100;\n // istanbul ignore if\n if (v < 0)\n v = 0;\n // istanbul ignore if\n if (v > 100)\n v = 100;\n\n const newColor = new HSVColor(h, s, v);\n // istanbul ignore else\n if (onSaturationChange)\n onSaturationChange(newColor);\n\n evt.preventDefault();\n }, [hsv, onSaturationChange]);\n\n const pointerStyle: React.CSSProperties = React.useMemo(() => ({\n left: `${hsv.s}%`,\n top: `${-(hsv.v) + 100}%`,\n backgroundColor: `${ColorDef.fromHSV(hsv).toRgbString()}`,\n }), [hsv]);\n\n const colorStyle: React.CSSProperties = React.useMemo(() => ({ backgroundColor: `hsl(${hsv.h} ,100%, 50%)` }), [hsv]);\n\n return (\n <div className={classnames(\"components-saturation-container\", className)} style={style} data-testid=\"saturation-container\" >\n <div\n data-testid=\"saturation-region\"\n role=\"slider\" aria-label={saturationLabel} 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 style={pointerStyle} className=\"components-saturation-pointer\" data-testid=\"saturation-pointer\" />\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":["/*---------------------------------------------------------------------------------------------\r\n* Copyright (c) Bentley Systems, Incorporated. All rights reserved.\r\n* See LICENSE.md in the project root for license terms and full copyright notice.\r\n*--------------------------------------------------------------------------------------------*/\r\n/** @packageDocumentation\r\n * @module Color\r\n */\r\n\r\nimport \"./SaturationPicker.scss\";\r\nimport classnames from \"classnames\";\r\nimport * as React from \"react\";\r\nimport { ColorDef, HSVColor } from \"@itwin/core-common\";\r\nimport { SpecialKey } from \"@itwin/appui-abstract\";\r\nimport { CommonProps } from \"@itwin/core-react\";\r\nimport { UiIModelComponents } from \"../UiIModelComponents\";\r\n\r\nfunction calculateChange(e: React.MouseEvent<HTMLDivElement> | React.TouchEvent<HTMLDivElement>,\r\n hsv: HSVColor, container: HTMLDivElement): HSVColor | undefined {\r\n const { width: containerWidth, height: containerHeight, top: containerTop, left: containerLeft } = container.getBoundingClientRect();\r\n\r\n let x: number | undefined;\r\n if (\"pageX\" in e) {\r\n x = e.pageX;\r\n } else {\r\n // istanbul ignore next\r\n if (undefined !== e.touches && e.touches.length)\r\n x = e.touches[0].pageX;\r\n }\r\n // istanbul ignore if\r\n if (undefined === x)\r\n return hsv;\r\n\r\n let y = 0;\r\n if (\"pageY\" in e) {\r\n y = e.pageY;\r\n } else {\r\n // istanbul ignore next\r\n if (undefined !== e.touches && e.touches.length)\r\n y = e.touches[0].pageY;\r\n }\r\n // istanbul ignore if\r\n if (undefined === y)\r\n return hsv;\r\n\r\n let left = x - (containerLeft + window.scrollX);\r\n let top = y - (containerTop + window.scrollY);\r\n\r\n // istanbul ignore next\r\n if (left < 0) {\r\n left = 0;\r\n } else if (left > containerWidth) {\r\n left = containerWidth;\r\n } else if (top < 0) {\r\n top = 0;\r\n } else if (top > containerHeight) {\r\n top = containerHeight;\r\n }\r\n\r\n let saturation = Math.round((left * 100) / containerWidth);\r\n let value = Math.round(-((top * 100) / containerHeight) + 100);\r\n\r\n // istanbul ignore if\r\n if (saturation < 0)\r\n saturation = 0;\r\n // istanbul ignore if\r\n if (saturation > 100)\r\n saturation = 100;\r\n // istanbul ignore if\r\n if (value < 0)\r\n value = 0;\r\n // istanbul ignore if\r\n if (value > 100)\r\n value = 100;\r\n\r\n return hsv.clone(hsv.h, saturation, value);\r\n}\r\n\r\n/** Properties for the [[SaturationPicker]] React component\r\n * @beta\r\n */\r\nexport interface SaturationPickerProps extends React.HTMLAttributes<HTMLDivElement>, CommonProps {\r\n /** function to run when user selects location in saturation region */\r\n onSaturationChange?: ((saturation: HSVColor) => void) | undefined;\r\n /** HSV Color Value */\r\n hsv: HSVColor;\r\n}\r\n\r\n/** SaturationPicker component used to set the saturation value.\r\n * @beta\r\n */\r\nexport function SaturationPicker({ onSaturationChange, hsv, className, style }: SaturationPickerProps) {\r\n const container = React.useRef<HTMLDivElement>(null);\r\n const [saturationLabel] = React.useState(() => UiIModelComponents.translate(\"color.saturation\"));\r\n const isDragging = React.useRef(false);\r\n\r\n const onChange = React.useCallback((e: React.MouseEvent<HTMLDivElement> | React.TouchEvent<HTMLDivElement>) => {\r\n // istanbul ignore else\r\n if (container.current) {\r\n const newHsvColor = calculateChange(e, hsv, container.current);\r\n // istanbul ignore else\r\n if (newHsvColor) {\r\n // istanbul ignore else\r\n if (onSaturationChange)\r\n onSaturationChange(newHsvColor);\r\n }\r\n }\r\n }, [hsv, onSaturationChange]);\r\n\r\n const onDragging = React.useCallback((e: React.MouseEvent<HTMLDivElement> | React.TouchEvent<HTMLDivElement>) => {\r\n // istanbul ignore else\r\n if (isDragging.current) {\r\n onChange(e);\r\n }\r\n }, [onChange]);\r\n\r\n const onMouseUp = React.useCallback(() => {\r\n // istanbul ignore else\r\n if (isDragging.current) {\r\n isDragging.current = false;\r\n }\r\n }, []);\r\n\r\n const onTouchEnd = React.useCallback((event: React.TouchEvent<HTMLDivElement>) => {\r\n // istanbul ignore else\r\n if (isDragging.current) {\r\n onChange(event);\r\n isDragging.current = false;\r\n }\r\n }, [onChange]);\r\n\r\n const onMouseDown = React.useCallback((e: React.MouseEvent<HTMLDivElement>) => {\r\n // istanbul ignore else\r\n if (e.target !== e.currentTarget) {\r\n isDragging.current = true;\r\n document.addEventListener(\"mouseup\", onMouseUp, { capture: true, once: true });\r\n }\r\n\r\n onChange(e);\r\n\r\n // istanbul ignore else\r\n if (container.current)\r\n container.current.focus();\r\n\r\n e.preventDefault();\r\n }, [onChange, onMouseUp]);\r\n\r\n const onTouchStart = React.useCallback((e: React.TouchEvent<HTMLDivElement>) => {\r\n // istanbul ignore else\r\n if (e.target !== e.currentTarget)\r\n isDragging.current = true;\r\n\r\n onChange(e);\r\n\r\n // istanbul ignore else\r\n if (container.current)\r\n container.current.focus();\r\n }, [onChange]);\r\n\r\n const onKeyDown = React.useCallback((evt: React.KeyboardEvent<HTMLDivElement>) => {\r\n const h = hsv.h;\r\n let { s, v } = { ...hsv };\r\n if (evt.key === SpecialKey.ArrowLeft) {\r\n s -= (evt.ctrlKey ? 10 : 1);\r\n } else if (evt.key === SpecialKey.ArrowDown) {\r\n v -= (evt.ctrlKey ? 10 : 1);\r\n } else if (evt.key === SpecialKey.ArrowRight) {\r\n s += (evt.ctrlKey ? 10 : 1);\r\n } else if (evt.key === SpecialKey.ArrowUp) {\r\n v += (evt.ctrlKey ? 10 : 1);\r\n } else if (evt.key === SpecialKey.PageDown) {\r\n v = 0;\r\n } else if (evt.key === SpecialKey.PageUp) {\r\n v = 100;\r\n } else if (evt.key === SpecialKey.Home) {\r\n s = 0;\r\n } else {\r\n // istanbul ignore else\r\n if (evt.key === SpecialKey.End) {\r\n s = 100;\r\n }\r\n }\r\n\r\n // istanbul ignore if\r\n if (s < 0)\r\n s = 0;\r\n // istanbul ignore if\r\n if (s > 100)\r\n s = 100;\r\n // istanbul ignore if\r\n if (v < 0)\r\n v = 0;\r\n // istanbul ignore if\r\n if (v > 100)\r\n v = 100;\r\n\r\n const newColor = new HSVColor(h, s, v);\r\n // istanbul ignore else\r\n if (onSaturationChange)\r\n onSaturationChange(newColor);\r\n\r\n evt.preventDefault();\r\n }, [hsv, onSaturationChange]);\r\n\r\n const pointerStyle: React.CSSProperties = React.useMemo(() => ({\r\n left: `${hsv.s}%`,\r\n top: `${-(hsv.v) + 100}%`,\r\n backgroundColor: `${ColorDef.fromHSV(hsv).toRgbString()}`,\r\n }), [hsv]);\r\n\r\n const colorStyle: React.CSSProperties = React.useMemo(() => ({ backgroundColor: `hsl(${hsv.h} ,100%, 50%)` }), [hsv]);\r\n\r\n return (\r\n <div className={classnames(\"components-saturation-container\", className)} style={style} data-testid=\"saturation-container\" >\r\n <div\r\n data-testid=\"saturation-region\"\r\n role=\"slider\" aria-label={saturationLabel} aria-valuenow={hsv.s}\r\n style={colorStyle}\r\n className=\"components-saturation-region\"\r\n ref={container}\r\n onMouseDown={onMouseDown}\r\n onMouseMove={onDragging}\r\n onTouchMove={onDragging}\r\n onTouchStart={onTouchStart}\r\n onTouchEnd={onTouchEnd}\r\n tabIndex={0}\r\n onKeyDown={onKeyDown}\r\n >\r\n <div style={pointerStyle} className=\"components-saturation-pointer\" data-testid=\"saturation-pointer\" />\r\n </div>\r\n </div >\r\n );\r\n}\r\n"]}
|
|
@@ -1,35 +1,35 @@
|
|
|
1
|
-
/*---------------------------------------------------------------------------------------------
|
|
2
|
-
* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
|
|
3
|
-
* See LICENSE.md in the project root for license terms and full copyright notice.
|
|
4
|
-
*--------------------------------------------------------------------------------------------*/
|
|
5
|
-
|
|
6
|
-
.components-saturation-container {
|
|
7
|
-
width: 100%;
|
|
8
|
-
height: 100%;
|
|
9
|
-
min-width: 100px;
|
|
10
|
-
min-height: 100px;
|
|
11
|
-
|
|
12
|
-
.components-saturation-region {
|
|
13
|
-
position: relative;
|
|
14
|
-
width: 100%;
|
|
15
|
-
height: 100%;
|
|
16
|
-
background-image: linear-gradient(to top, #000, rgba(0, 0, 0, 0)), linear-gradient(to right, #fff, rgba(255, 255, 255, 0));
|
|
17
|
-
background-size: cover, cover;
|
|
18
|
-
overflow: visible;
|
|
19
|
-
|
|
20
|
-
.components-saturation-pointer {
|
|
21
|
-
position: absolute;
|
|
22
|
-
width: 2em;
|
|
23
|
-
height: 2em;
|
|
24
|
-
border-radius: 50%;
|
|
25
|
-
box-shadow: rgba(0, 0, 0, 0.37) 0px 4px 4px 0px;
|
|
26
|
-
border: 2px solid #fff;
|
|
27
|
-
transform: translate(-1em, -1em);
|
|
28
|
-
|
|
29
|
-
&:focus {
|
|
30
|
-
outline: none;
|
|
31
|
-
border: none;
|
|
32
|
-
}
|
|
33
|
-
}
|
|
34
|
-
}
|
|
35
|
-
}
|
|
1
|
+
/*---------------------------------------------------------------------------------------------
|
|
2
|
+
* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
|
|
3
|
+
* See LICENSE.md in the project root for license terms and full copyright notice.
|
|
4
|
+
*--------------------------------------------------------------------------------------------*/
|
|
5
|
+
|
|
6
|
+
.components-saturation-container {
|
|
7
|
+
width: 100%;
|
|
8
|
+
height: 100%;
|
|
9
|
+
min-width: 100px;
|
|
10
|
+
min-height: 100px;
|
|
11
|
+
|
|
12
|
+
.components-saturation-region {
|
|
13
|
+
position: relative;
|
|
14
|
+
width: 100%;
|
|
15
|
+
height: 100%;
|
|
16
|
+
background-image: linear-gradient(to top, #000, rgba(0, 0, 0, 0)), linear-gradient(to right, #fff, rgba(255, 255, 255, 0));
|
|
17
|
+
background-size: cover, cover;
|
|
18
|
+
overflow: visible;
|
|
19
|
+
|
|
20
|
+
.components-saturation-pointer {
|
|
21
|
+
position: absolute;
|
|
22
|
+
width: 2em;
|
|
23
|
+
height: 2em;
|
|
24
|
+
border-radius: 50%;
|
|
25
|
+
box-shadow: rgba(0, 0, 0, 0.37) 0px 4px 4px 0px;
|
|
26
|
+
border: 2px solid #fff;
|
|
27
|
+
transform: translate(-1em, -1em);
|
|
28
|
+
|
|
29
|
+
&:focus {
|
|
30
|
+
outline: none;
|
|
31
|
+
border: none;
|
|
32
|
+
}
|
|
33
|
+
}
|
|
34
|
+
}
|
|
35
|
+
}
|
|
@@ -8,7 +8,11 @@
|
|
|
8
8
|
*/
|
|
9
9
|
var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
|
|
10
10
|
if (k2 === undefined) k2 = k;
|
|
11
|
-
Object.
|
|
11
|
+
var desc = Object.getOwnPropertyDescriptor(m, k);
|
|
12
|
+
if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
|
|
13
|
+
desc = { enumerable: true, get: function() { return m[k]; } };
|
|
14
|
+
}
|
|
15
|
+
Object.defineProperty(o, k2, desc);
|
|
12
16
|
}) : (function(o, m, k, k2) {
|
|
13
17
|
if (k2 === undefined) k2 = k;
|
|
14
18
|
o[k2] = m[k];
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Swatch.js","sourceRoot":"","sources":["../../../../src/imodel-components-react/color/Swatch.tsx"],"names":[],"mappings":";AAAA;;;+FAG+F;AAC/F;;GAEG
|
|
1
|
+
{"version":3,"file":"Swatch.js","sourceRoot":"","sources":["../../../../src/imodel-components-react/color/Swatch.tsx"],"names":[],"mappings":";AAAA;;;+FAG+F;AAC/F;;GAEG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAEH,yBAAuB;AACvB,4DAAoC;AACpC,6CAA+B;AAG/B,6DAA0D;AAc1D;;GAEG;AACH,SAAgB,WAAW,CAAC,KAAuB;IACjD,MAAM,UAAU,GAAG,IAAA,uCAAkB,EAAC,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,uBAAuB;QACvB,IAAI,KAAK,IAAI,KAAK,CAAC,WAAW;YAC5B,KAAK,CAAC,WAAW,CAAC,KAAK,CAAC,QAAQ,EAAE,CAAC,CAAC,CAAC;IACzC,CAAC,CAAC;IAEF,MAAM,OAAO,GAAG,IAAA,oBAAU,EACxB,yBAAyB,EACzB,KAAK,CAAC,KAAK,IAAI,OAAO,EACtB,KAAK,CAAC,SAAS,CAChB,CAAC;IAEF,MAAM;IACJ,6DAA6D;IAC7D,WAAW,EAAE,QAAQ,EAAE,KAAK,EAAE,6CAA6C;IAC3E,wCAAwC;IACxC,GAAG,UAAU,CAAC,qBAAqB;MACpC,GAAG,KAAK,CAAC;IAEV,OAAO,mCAAY,UAAU,EAAE,KAAK,EAAE,UAAU,EAAE,SAAS,EAAE,OAAO,EAAE,OAAO,EAAE,WAAW,GAAI,CAAC;AACjG,CAAC;AA3BD,kCA2BC","sourcesContent":["/*---------------------------------------------------------------------------------------------\r\n* Copyright (c) Bentley Systems, Incorporated. All rights reserved.\r\n* See LICENSE.md in the project root for license terms and full copyright notice.\r\n*--------------------------------------------------------------------------------------------*/\r\n/** @packageDocumentation\r\n * @module Color\r\n */\r\n\r\nimport \"./Swatch.scss\";\r\nimport classnames from \"classnames\";\r\nimport * as React from \"react\";\r\nimport { ColorDef } from \"@itwin/core-common\";\r\nimport { CommonProps } from \"@itwin/core-react\";\r\nimport { getCSSColorFromDef } from \"./getCSSColorFromDef\";\r\n\r\n/** Properties for the [[ColorSwatch]] React component\r\n * @beta\r\n */\r\nexport interface ColorSwatchProps extends React.ButtonHTMLAttributes<HTMLButtonElement>, CommonProps {\r\n /** color specification */\r\n colorDef: ColorDef;\r\n /** function to run when user selects color swatch */\r\n onColorPick?: ((color: ColorDef, e: React.MouseEvent) => void) | undefined;\r\n /** Show swatches as squares unless round is set to true */\r\n round?: boolean;\r\n}\r\n\r\n/** ColorSwatch Functional component displays a color swatch in a button\r\n * @beta\r\n */\r\nexport function ColorSwatch(props: ColorSwatchProps) {\r\n const rgbaString = getCSSColorFromDef(props.colorDef);\r\n const colorStyle: React.CSSProperties = {\r\n backgroundColor: rgbaString,\r\n ...props.style,\r\n };\r\n\r\n const handleClick = (e: React.MouseEvent) => {\r\n // istanbul ignore else\r\n if (props && props.onColorPick)\r\n props.onColorPick(props.colorDef, e);\r\n };\r\n\r\n const classes = classnames(\r\n \"components-color-swatch\",\r\n props.round && \"round\",\r\n props.className,\r\n );\r\n\r\n const {\r\n // eslint-disable-next-line @typescript-eslint/no-unused-vars\r\n onColorPick, colorDef, round, // do not pass on color swatch specific props\r\n // eslint-disable-next-line comma-dangle\r\n ...otherProps // pass-through props\r\n } = props;\r\n\r\n return <button {...otherProps} style={colorStyle} className={classes} onClick={handleClick} />;\r\n}\r\n"]}
|
|
@@ -1,23 +1,22 @@
|
|
|
1
|
-
/*---------------------------------------------------------------------------------------------
|
|
2
|
-
* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
|
|
3
|
-
* See LICENSE.md in the project root for license terms and full copyright notice.
|
|
4
|
-
*--------------------------------------------------------------------------------------------*/
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
width:
|
|
11
|
-
border-
|
|
12
|
-
border-
|
|
13
|
-
border-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
}
|
|
1
|
+
/*---------------------------------------------------------------------------------------------
|
|
2
|
+
* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
|
|
3
|
+
* See LICENSE.md in the project root for license terms and full copyright notice.
|
|
4
|
+
*--------------------------------------------------------------------------------------------*/
|
|
5
|
+
|
|
6
|
+
.components-color-swatch {
|
|
7
|
+
font-size: var(--iui-font-size-1);
|
|
8
|
+
height: 1em * 1.2;
|
|
9
|
+
width: 1em * 1.2;
|
|
10
|
+
border-width: 1px;
|
|
11
|
+
border-radius: var(--iui-border-radius-1);
|
|
12
|
+
border-style: solid;
|
|
13
|
+
border-color: var(--iui-color-border-subtle);
|
|
14
|
+
|
|
15
|
+
&.round {
|
|
16
|
+
border-radius: 50%;
|
|
17
|
+
}
|
|
18
|
+
|
|
19
|
+
&[disabled] {
|
|
20
|
+
opacity: 0.2;
|
|
21
|
+
}
|
|
22
|
+
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"getCSSColorFromDef.js","sourceRoot":"","sources":["../../../../src/imodel-components-react/color/getCSSColorFromDef.ts"],"names":[],"mappings":";AAAA;;;+FAG+F;AAC/F;;GAEG;;;AAIH,gBAAgB;AAChB,SAAgB,kBAAkB,CAAC,QAAkB;IACnD,MAAM,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,GAAG,QAAQ,CAAC,MAAM,CAAC;IACvC,IAAI,UAAU,GAAG,EAAE,CAAC;IACpB,IAAI,CAAC,KAAK,CAAC;QACT,UAAU,GAAG,OAAO,CAAC,IAAI,CAAC,IAAI,CAAC,GAAG,CAAC;SAChC;QACH,MAAM,KAAK,GAAG,CAAC,CAAC,GAAG,GAAG,CAAC,CAAC,GAAG,GAAG,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC;QAC3C,UAAU,GAAG,QAAQ,CAAC,IAAI,CAAC,IAAI,CAAC,IAAI,KAAK,GAAG,CAAC;KAC9C;IACD,OAAO,UAAU,CAAC;AACpB,CAAC;AAVD,gDAUC","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 { ColorDef } from \"@itwin/core-common\";\n\n/** @internal */\nexport function getCSSColorFromDef(colorDef: ColorDef): string {\n const { b, g, r, t } = colorDef.colors;\n let rgbaString = \"\";\n if (t === 0)\n rgbaString = `rgb(${r},${g},${b})`;\n else {\n const alpha = ((255 - t) / 255).toFixed(2);\n rgbaString = `rgba(${r},${g},${b},${alpha})`;\n }\n return rgbaString;\n}\n"]}
|
|
1
|
+
{"version":3,"file":"getCSSColorFromDef.js","sourceRoot":"","sources":["../../../../src/imodel-components-react/color/getCSSColorFromDef.ts"],"names":[],"mappings":";AAAA;;;+FAG+F;AAC/F;;GAEG;;;AAIH,gBAAgB;AAChB,SAAgB,kBAAkB,CAAC,QAAkB;IACnD,MAAM,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,GAAG,QAAQ,CAAC,MAAM,CAAC;IACvC,IAAI,UAAU,GAAG,EAAE,CAAC;IACpB,IAAI,CAAC,KAAK,CAAC;QACT,UAAU,GAAG,OAAO,CAAC,IAAI,CAAC,IAAI,CAAC,GAAG,CAAC;SAChC;QACH,MAAM,KAAK,GAAG,CAAC,CAAC,GAAG,GAAG,CAAC,CAAC,GAAG,GAAG,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC;QAC3C,UAAU,GAAG,QAAQ,CAAC,IAAI,CAAC,IAAI,CAAC,IAAI,KAAK,GAAG,CAAC;KAC9C;IACD,OAAO,UAAU,CAAC;AACpB,CAAC;AAVD,gDAUC","sourcesContent":["/*---------------------------------------------------------------------------------------------\r\n* Copyright (c) Bentley Systems, Incorporated. All rights reserved.\r\n* See LICENSE.md in the project root for license terms and full copyright notice.\r\n*--------------------------------------------------------------------------------------------*/\r\n/** @packageDocumentation\r\n * @module Color\r\n */\r\n\r\nimport { ColorDef } from \"@itwin/core-common\";\r\n\r\n/** @internal */\r\nexport function getCSSColorFromDef(colorDef: ColorDef): string {\r\n const { b, g, r, t } = colorDef.colors;\r\n let rgbaString = \"\";\r\n if (t === 0)\r\n rgbaString = `rgb(${r},${g},${b})`;\r\n else {\r\n const alpha = ((255 - t) / 255).toFixed(2);\r\n rgbaString = `rgba(${r},${g},${b},${alpha})`;\r\n }\r\n return rgbaString;\r\n}\r\n"]}
|
|
@@ -8,7 +8,11 @@
|
|
|
8
8
|
*/
|
|
9
9
|
var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
|
|
10
10
|
if (k2 === undefined) k2 = k;
|
|
11
|
-
Object.
|
|
11
|
+
var desc = Object.getOwnPropertyDescriptor(m, k);
|
|
12
|
+
if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
|
|
13
|
+
desc = { enumerable: true, get: function() { return m[k]; } };
|
|
14
|
+
}
|
|
15
|
+
Object.defineProperty(o, k2, desc);
|
|
12
16
|
}) : (function(o, m, k, k2) {
|
|
13
17
|
if (k2 === undefined) k2 = k;
|
|
14
18
|
o[k2] = m[k];
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ColorEditor.js","sourceRoot":"","sources":["../../../../src/imodel-components-react/editors/ColorEditor.tsx"],"names":[],"mappings":"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","sourcesContent":["/*---------------------------------------------------------------------------------------------\n* Copyright (c) Bentley Systems, Incorporated. All rights reserved.\n* See LICENSE.md in the project root for license terms and full copyright notice.\n*--------------------------------------------------------------------------------------------*/\n/** @packageDocumentation\n * @module PropertyEditors\n */\n\nimport \"./ColorEditor.scss\";\nimport classnames from \"classnames\";\nimport * as React from \"react\";\nimport { ColorDef } from \"@itwin/core-common\";\nimport {\n ColorEditorParams, PropertyEditorParams, PropertyEditorParamTypes, PropertyRecord, PropertyValue, PropertyValueFormat,\n StandardEditorNames, StandardTypeNames,\n} from \"@itwin/appui-abstract\";\nimport { PropertyEditorBase, PropertyEditorManager, PropertyEditorProps, TypeEditor } from \"@itwin/components-react\";\nimport { ColorPickerButton } from \"../color/ColorPickerButton\";\n\n/** @internal */\ninterface ColorEditorState {\n colorValue: number;\n readonly: boolean;\n isDisabled?: boolean;\n numColumns: number;\n availableColors: ColorDef[];\n}\n\n/** ColorEditor React component that is a property editor with text input\n * @beta\n */\nexport class ColorEditor extends React.PureComponent<PropertyEditorProps, ColorEditorState> implements TypeEditor {\n private _buttonElement: React.RefObject<HTMLButtonElement> = React.createRef();\n\n /** @internal */\n public override readonly state: Readonly<ColorEditorState> = {\n colorValue: 0,\n readonly: false,\n numColumns: 4,\n availableColors: [],\n };\n\n public async getPropertyValue(): Promise<PropertyValue | undefined> {\n const record = this.props.propertyRecord;\n let propertyValue: PropertyValue | undefined;\n\n // istanbul ignore else\n if (record && record.value.valueFormat === PropertyValueFormat.Primitive) {\n propertyValue = {\n valueFormat: PropertyValueFormat.Primitive,\n value: this.state.colorValue,\n displayValue: \"\",\n };\n }\n\n return propertyValue;\n }\n\n public get htmlElement(): HTMLElement | null {\n return this._buttonElement.current;\n }\n\n public get hasFocus(): boolean {\n return document.activeElement === this._buttonElement.current;\n }\n\n private setFocus(): void {\n // istanbul ignore else\n if (this._buttonElement && this._buttonElement.current && !this.state.isDisabled) {\n this._buttonElement.current.focus();\n }\n }\n\n private _onColorPick = (color: ColorDef) => {\n const propertyRecord = this.props.propertyRecord as PropertyRecord;\n\n this.setState({\n colorValue: color.tbgr,\n }, async () => {\n // istanbul ignore else\n if (propertyRecord && this.props.onCommit) {\n const propertyValue = await this.getPropertyValue();\n // istanbul ignore else\n if (propertyValue !== undefined) {\n this.props.onCommit({ propertyRecord, newValue: propertyValue });\n }\n }\n });\n };\n\n /** @internal */\n public override componentDidMount() {\n this.setStateFromProps(); // eslint-disable-line @typescript-eslint/no-floating-promises\n }\n\n /** @internal */\n public override componentDidUpdate(prevProps: PropertyEditorProps) {\n if (this.props.propertyRecord !== prevProps.propertyRecord) {\n this.setStateFromProps(); // eslint-disable-line @typescript-eslint/no-floating-promises\n }\n }\n\n private async setStateFromProps() {\n const record = this.props.propertyRecord;\n\n // istanbul ignore else\n if (record && record.value.valueFormat === PropertyValueFormat.Primitive) {\n const colorValue = record.value.value as number;\n let numColumns = 4;\n const availableColors = new Array<ColorDef>();\n const readonly = record && undefined !== record.isReadonly ? record.isReadonly : /* istanbul ignore next */ false;\n const isDisabled = record ? record.isDisabled : /* istanbul ignore next */ undefined;\n\n if (record.property.editor && record.property.editor.params) {\n const colorParams = record.property.editor.params.find((param: PropertyEditorParams) => param.type === PropertyEditorParamTypes.ColorData) as ColorEditorParams;\n // istanbul ignore else\n if (colorParams) {\n colorParams.colorValues.forEach((colorNumber: number) => {\n availableColors.push(ColorDef.create(colorNumber));\n });\n // istanbul ignore else\n if (colorParams.numColumns)\n numColumns = colorParams.numColumns;\n }\n }\n this.setState(\n { colorValue, readonly, isDisabled, numColumns, availableColors },\n () => {\n if (this.props.setFocus) {\n this.setFocus();\n }\n },\n );\n }\n }\n\n /** @internal */\n public override render() {\n const colorDef = ColorDef.create(this.state.colorValue);\n return (\n <div className={classnames(\"components-color-editor\", this.props.className)} style={this.props.style}>\n <ColorPickerButton ref={this._buttonElement}\n initialColor={colorDef}\n colorDefs={this.state.availableColors.length > 0 ? this.state.availableColors : [colorDef]}\n numColumns={this.state.numColumns}\n disabled={this.state.isDisabled ? true : false}\n readonly={this.state.readonly}\n onColorPick={this._onColorPick}\n data-testid=\"components-color-editor\" />\n </div>\n );\n }\n}\n\n/** Color Property Editor registered for the \"number\" type name and \"color-picker\" editor name.\n * It uses the [[ColorEditor]] React component.\n * @beta\n */\nexport class ColorPropertyEditor extends PropertyEditorBase {\n public get reactNode(): React.ReactNode {\n return <ColorEditor />;\n }\n}\n\nPropertyEditorManager.registerEditor(StandardTypeNames.Number, ColorPropertyEditor, StandardEditorNames.ColorPicker);\n"]}
|
|
1
|
+
{"version":3,"file":"ColorEditor.js","sourceRoot":"","sources":["../../../../src/imodel-components-react/editors/ColorEditor.tsx"],"names":[],"mappings":"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","sourcesContent":["/*---------------------------------------------------------------------------------------------\r\n* Copyright (c) Bentley Systems, Incorporated. All rights reserved.\r\n* See LICENSE.md in the project root for license terms and full copyright notice.\r\n*--------------------------------------------------------------------------------------------*/\r\n/** @packageDocumentation\r\n * @module PropertyEditors\r\n */\r\n\r\nimport \"./ColorEditor.scss\";\r\nimport classnames from \"classnames\";\r\nimport * as React from \"react\";\r\nimport { ColorDef } from \"@itwin/core-common\";\r\nimport {\r\n ColorEditorParams, PropertyEditorParams, PropertyEditorParamTypes, PropertyRecord, PropertyValue, PropertyValueFormat,\r\n StandardEditorNames, StandardTypeNames,\r\n} from \"@itwin/appui-abstract\";\r\nimport { PropertyEditorBase, PropertyEditorManager, PropertyEditorProps, TypeEditor } from \"@itwin/components-react\";\r\nimport { ColorPickerButton } from \"../color/ColorPickerButton\";\r\n\r\n/** @internal */\r\ninterface ColorEditorState {\r\n colorValue: number;\r\n readonly: boolean;\r\n isDisabled?: boolean;\r\n numColumns: number;\r\n availableColors: ColorDef[];\r\n}\r\n\r\n/** ColorEditor React component that is a property editor with text input\r\n * @beta\r\n */\r\nexport class ColorEditor extends React.PureComponent<PropertyEditorProps, ColorEditorState> implements TypeEditor {\r\n private _buttonElement: React.RefObject<HTMLButtonElement> = React.createRef();\r\n\r\n /** @internal */\r\n public override readonly state: Readonly<ColorEditorState> = {\r\n colorValue: 0,\r\n readonly: false,\r\n numColumns: 4,\r\n availableColors: [],\r\n };\r\n\r\n public async getPropertyValue(): Promise<PropertyValue | undefined> {\r\n const record = this.props.propertyRecord;\r\n let propertyValue: PropertyValue | undefined;\r\n\r\n // istanbul ignore else\r\n if (record && record.value.valueFormat === PropertyValueFormat.Primitive) {\r\n propertyValue = {\r\n valueFormat: PropertyValueFormat.Primitive,\r\n value: this.state.colorValue,\r\n displayValue: \"\",\r\n };\r\n }\r\n\r\n return propertyValue;\r\n }\r\n\r\n public get htmlElement(): HTMLElement | null {\r\n return this._buttonElement.current;\r\n }\r\n\r\n public get hasFocus(): boolean {\r\n return document.activeElement === this._buttonElement.current;\r\n }\r\n\r\n private setFocus(): void {\r\n // istanbul ignore else\r\n if (this._buttonElement && this._buttonElement.current && !this.state.isDisabled) {\r\n this._buttonElement.current.focus();\r\n }\r\n }\r\n\r\n private _onColorPick = (color: ColorDef) => {\r\n const propertyRecord = this.props.propertyRecord as PropertyRecord;\r\n\r\n this.setState({\r\n colorValue: color.tbgr,\r\n }, async () => {\r\n // istanbul ignore else\r\n if (propertyRecord && this.props.onCommit) {\r\n const propertyValue = await this.getPropertyValue();\r\n // istanbul ignore else\r\n if (propertyValue !== undefined) {\r\n this.props.onCommit({ propertyRecord, newValue: propertyValue });\r\n }\r\n }\r\n });\r\n };\r\n\r\n /** @internal */\r\n public override componentDidMount() {\r\n this.setStateFromProps(); // eslint-disable-line @typescript-eslint/no-floating-promises\r\n }\r\n\r\n /** @internal */\r\n public override componentDidUpdate(prevProps: PropertyEditorProps) {\r\n if (this.props.propertyRecord !== prevProps.propertyRecord) {\r\n this.setStateFromProps(); // eslint-disable-line @typescript-eslint/no-floating-promises\r\n }\r\n }\r\n\r\n private async setStateFromProps() {\r\n const record = this.props.propertyRecord;\r\n\r\n // istanbul ignore else\r\n if (record && record.value.valueFormat === PropertyValueFormat.Primitive) {\r\n const colorValue = record.value.value as number;\r\n let numColumns = 4;\r\n const availableColors = new Array<ColorDef>();\r\n const readonly = record && undefined !== record.isReadonly ? record.isReadonly : /* istanbul ignore next */ false;\r\n const isDisabled = record ? record.isDisabled : /* istanbul ignore next */ undefined;\r\n\r\n if (record.property.editor && record.property.editor.params) {\r\n const colorParams = record.property.editor.params.find((param: PropertyEditorParams) => param.type === PropertyEditorParamTypes.ColorData) as ColorEditorParams;\r\n // istanbul ignore else\r\n if (colorParams) {\r\n colorParams.colorValues.forEach((colorNumber: number) => {\r\n availableColors.push(ColorDef.create(colorNumber));\r\n });\r\n // istanbul ignore else\r\n if (colorParams.numColumns)\r\n numColumns = colorParams.numColumns;\r\n }\r\n }\r\n this.setState(\r\n { colorValue, readonly, isDisabled, numColumns, availableColors },\r\n () => {\r\n if (this.props.setFocus) {\r\n this.setFocus();\r\n }\r\n },\r\n );\r\n }\r\n }\r\n\r\n /** @internal */\r\n public override render() {\r\n const colorDef = ColorDef.create(this.state.colorValue);\r\n return (\r\n <div className={classnames(\"components-color-editor\", this.props.className)} style={this.props.style}>\r\n <ColorPickerButton ref={this._buttonElement}\r\n initialColor={colorDef}\r\n colorDefs={this.state.availableColors.length > 0 ? this.state.availableColors : [colorDef]}\r\n numColumns={this.state.numColumns}\r\n disabled={this.state.isDisabled ? true : false}\r\n readonly={this.state.readonly}\r\n onColorPick={this._onColorPick}\r\n data-testid=\"components-color-editor\" />\r\n </div>\r\n );\r\n }\r\n}\r\n\r\n/** Color Property Editor registered for the \"number\" type name and \"color-picker\" editor name.\r\n * It uses the [[ColorEditor]] React component.\r\n * @beta\r\n */\r\nexport class ColorPropertyEditor extends PropertyEditorBase {\r\n public get reactNode(): React.ReactNode {\r\n return <ColorEditor />;\r\n }\r\n}\r\n\r\nPropertyEditorManager.registerEditor(StandardTypeNames.Number, ColorPropertyEditor, StandardEditorNames.ColorPicker);\r\n"]}
|
|
@@ -1,18 +1,18 @@
|
|
|
1
|
-
/*---------------------------------------------------------------------------------------------
|
|
2
|
-
* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
|
|
3
|
-
* See LICENSE.md in the project root for license terms and full copyright notice.
|
|
4
|
-
*--------------------------------------------------------------------------------------------*/
|
|
5
|
-
@import "~@itwin/core-react/lib/cjs/core-react/style/themecolors";
|
|
6
|
-
|
|
7
|
-
$components-color-editor-item-height: 100%;
|
|
8
|
-
|
|
9
|
-
.components-color-editor {
|
|
10
|
-
font-family: var(--iui-font-sans);
|
|
11
|
-
font-size: var(--iui-font-size-1);
|
|
12
|
-
color:
|
|
13
|
-
border: none;
|
|
14
|
-
box-sizing: border-box;
|
|
15
|
-
height: $components-color-editor-item-height;
|
|
16
|
-
display: flex;
|
|
17
|
-
align-items: center;
|
|
18
|
-
}
|
|
1
|
+
/*---------------------------------------------------------------------------------------------
|
|
2
|
+
* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
|
|
3
|
+
* See LICENSE.md in the project root for license terms and full copyright notice.
|
|
4
|
+
*--------------------------------------------------------------------------------------------*/
|
|
5
|
+
@import "~@itwin/core-react/lib/cjs/core-react/style/themecolors";
|
|
6
|
+
|
|
7
|
+
$components-color-editor-item-height: 100%;
|
|
8
|
+
|
|
9
|
+
.components-color-editor {
|
|
10
|
+
font-family: var(--iui-font-sans);
|
|
11
|
+
font-size: var(--iui-font-size-1);
|
|
12
|
+
color: var(--iui-color-text);
|
|
13
|
+
border: none;
|
|
14
|
+
box-sizing: border-box;
|
|
15
|
+
height: $components-color-editor-item-height;
|
|
16
|
+
display: flex;
|
|
17
|
+
align-items: center;
|
|
18
|
+
}
|
|
@@ -8,7 +8,11 @@
|
|
|
8
8
|
*/
|
|
9
9
|
var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
|
|
10
10
|
if (k2 === undefined) k2 = k;
|
|
11
|
-
Object.
|
|
11
|
+
var desc = Object.getOwnPropertyDescriptor(m, k);
|
|
12
|
+
if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
|
|
13
|
+
desc = { enumerable: true, get: function() { return m[k]; } };
|
|
14
|
+
}
|
|
15
|
+
Object.defineProperty(o, k2, desc);
|
|
12
16
|
}) : (function(o, m, k, k2) {
|
|
13
17
|
if (k2 === undefined) k2 = k;
|
|
14
18
|
o[k2] = m[k];
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"WeightEditor.js","sourceRoot":"","sources":["../../../../src/imodel-components-react/editors/WeightEditor.tsx"],"names":[],"mappings":"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","sourcesContent":["/*---------------------------------------------------------------------------------------------\n* Copyright (c) Bentley Systems, Incorporated. All rights reserved.\n* See LICENSE.md in the project root for license terms and full copyright notice.\n*--------------------------------------------------------------------------------------------*/\n/** @packageDocumentation\n * @module PropertyEditors\n */\n\nimport \"./WeightEditor.scss\";\nimport classnames from \"classnames\";\nimport * as React from \"react\";\nimport { PropertyRecord, PropertyValue, PropertyValueFormat, StandardEditorNames, StandardTypeNames } from \"@itwin/appui-abstract\";\nimport { PropertyEditorBase, PropertyEditorManager, PropertyEditorProps, TypeEditor } from \"@itwin/components-react\";\nimport { WeightPickerButton } from \"../lineweight/WeightPickerButton\";\n\n// cspell:ignore lineweight\n\n/** @internal */\ninterface WeightEditorState {\n weightValue: number;\n readonly: boolean;\n isDisabled?: boolean;\n}\n\n/** WeightEditor React component that is a property editor for picking a weight using a [[WeightPickerButton]] component\n * @public\n */\nexport class WeightEditor extends React.PureComponent<PropertyEditorProps, WeightEditorState> implements TypeEditor {\n private _control: any | null = null;\n private _isMounted = false;\n private _availableWeights: number[] = [];\n private _divElement = React.createRef<HTMLDivElement>();\n\n /** @internal */\n public override readonly state: Readonly<WeightEditorState> = {\n weightValue: 0,\n readonly: false,\n };\n\n constructor(props: PropertyEditorProps) {\n super(props);\n\n // TODO: add support for following if we need to specify set of weights to display\n // const record = this.props.propertyRecord;\n // if (record && record.property && record.property.editor && record.property.editor.params) {\n // const weightParams = record.property.editor.params.find((param: PropertyEditorParams) => param.type === PropertyEditorParamTypes.ColorData) as WeightEditorParams;\n // // istanbul ignore else\n // if (weightParams) {\n // weightParams.weightValues.forEach((weight: number) => {\n // this._availableWeights.push(weight);\n // });\n // }\n // }\n }\n\n public async getPropertyValue(): Promise<PropertyValue | undefined> {\n const record = this.props.propertyRecord;\n let propertyValue: PropertyValue | undefined;\n\n // istanbul ignore else\n if (record && record.value.valueFormat === PropertyValueFormat.Primitive) {\n propertyValue = {\n valueFormat: PropertyValueFormat.Primitive,\n value: this.state.weightValue,\n displayValue: \"\",\n };\n }\n\n return propertyValue;\n }\n\n public get htmlElement(): HTMLElement | null {\n return this._divElement.current;\n }\n\n public get hasFocus(): boolean {\n let containsFocus = false;\n // istanbul ignore else\n if (this._divElement.current)\n containsFocus = this._divElement.current.contains(document.activeElement);\n return containsFocus;\n }\n\n private setFocus(): void {\n // istanbul ignore else\n if (this._control && !this.state.isDisabled) {\n this._control.setFocus();\n }\n }\n\n private _onLineWeightPick = (weight: number) => {\n const propertyRecord = this.props.propertyRecord as PropertyRecord;\n\n this.setState({\n weightValue: weight,\n }, async () => {\n // istanbul ignore else\n if (propertyRecord && this.props.onCommit) {\n const propertyValue = await this.getPropertyValue();\n // istanbul ignore else\n if (propertyValue !== undefined) {\n this.props.onCommit({ propertyRecord, newValue: propertyValue });\n }\n }\n });\n };\n\n /** @internal */\n public override componentDidMount() {\n this._isMounted = true;\n this.setStateFromProps(); // eslint-disable-line @typescript-eslint/no-floating-promises\n }\n\n /** @internal */\n public override componentWillUnmount() {\n this._isMounted = false;\n }\n\n /** @internal */\n public override componentDidUpdate(prevProps: PropertyEditorProps) {\n if (this.props.propertyRecord !== prevProps.propertyRecord) {\n this.setStateFromProps(); // eslint-disable-line @typescript-eslint/no-floating-promises\n }\n }\n\n private async setStateFromProps() {\n const record = this.props.propertyRecord;\n let initialValue = 0;\n\n // istanbul ignore else\n if (record && record.value.valueFormat === PropertyValueFormat.Primitive) {\n initialValue = record.value.value as number;\n }\n\n const readonly = record && undefined !== record.isReadonly ? record.isReadonly : false;\n const isDisabled = record ? record.isDisabled : undefined;\n\n // istanbul ignore else\n if (this._isMounted)\n this.setState(\n { weightValue: initialValue, readonly, isDisabled },\n () => {\n if (this.props.setFocus) {\n this.setFocus();\n }\n },\n );\n }\n\n /** @internal */\n public override render() {\n return (\n <div className={classnames(\"components-weight-editor\", this.props.className)} style={this.props.style} ref={this._divElement}>\n <WeightPickerButton ref={(control) => this._control = control}\n activeWeight={this.state.weightValue}\n weights={this._availableWeights.length > 0 ? /* istanbul ignore next */ this._availableWeights : undefined}\n disabled={this.state.isDisabled ? true : false}\n readonly={this.state.readonly}\n onLineWeightPick={this._onLineWeightPick}\n data-testid=\"components-weight-editor\" />\n </div>\n );\n }\n}\n\n/** Weight Property Editor registered for the \"number\" type name and \"weight-picker\" editor name.\n * It uses the [[WeightEditor]] React component.\n * @public\n */\nexport class WeightPropertyEditor extends PropertyEditorBase {\n // istanbul ignore next\n public get reactNode(): React.ReactNode {\n return <WeightEditor />;\n }\n}\n\nPropertyEditorManager.registerEditor(StandardTypeNames.Number, WeightPropertyEditor, StandardEditorNames.WeightPicker);\n"]}
|
|
1
|
+
{"version":3,"file":"WeightEditor.js","sourceRoot":"","sources":["../../../../src/imodel-components-react/editors/WeightEditor.tsx"],"names":[],"mappings":"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","sourcesContent":["/*---------------------------------------------------------------------------------------------\r\n* Copyright (c) Bentley Systems, Incorporated. All rights reserved.\r\n* See LICENSE.md in the project root for license terms and full copyright notice.\r\n*--------------------------------------------------------------------------------------------*/\r\n/** @packageDocumentation\r\n * @module PropertyEditors\r\n */\r\n\r\nimport \"./WeightEditor.scss\";\r\nimport classnames from \"classnames\";\r\nimport * as React from \"react\";\r\nimport { PropertyRecord, PropertyValue, PropertyValueFormat, StandardEditorNames, StandardTypeNames } from \"@itwin/appui-abstract\";\r\nimport { PropertyEditorBase, PropertyEditorManager, PropertyEditorProps, TypeEditor } from \"@itwin/components-react\";\r\nimport { WeightPickerButton } from \"../lineweight/WeightPickerButton\";\r\n\r\n// cspell:ignore lineweight\r\n\r\n/** @internal */\r\ninterface WeightEditorState {\r\n weightValue: number;\r\n readonly: boolean;\r\n isDisabled?: boolean;\r\n}\r\n\r\n/** WeightEditor React component that is a property editor for picking a weight using a [[WeightPickerButton]] component\r\n * @public\r\n */\r\nexport class WeightEditor extends React.PureComponent<PropertyEditorProps, WeightEditorState> implements TypeEditor {\r\n private _control: any | null = null;\r\n private _isMounted = false;\r\n private _availableWeights: number[] = [];\r\n private _divElement = React.createRef<HTMLDivElement>();\r\n\r\n /** @internal */\r\n public override readonly state: Readonly<WeightEditorState> = {\r\n weightValue: 0,\r\n readonly: false,\r\n };\r\n\r\n constructor(props: PropertyEditorProps) {\r\n super(props);\r\n\r\n // TODO: add support for following if we need to specify set of weights to display\r\n // const record = this.props.propertyRecord;\r\n // if (record && record.property && record.property.editor && record.property.editor.params) {\r\n // const weightParams = record.property.editor.params.find((param: PropertyEditorParams) => param.type === PropertyEditorParamTypes.ColorData) as WeightEditorParams;\r\n // // istanbul ignore else\r\n // if (weightParams) {\r\n // weightParams.weightValues.forEach((weight: number) => {\r\n // this._availableWeights.push(weight);\r\n // });\r\n // }\r\n // }\r\n }\r\n\r\n public async getPropertyValue(): Promise<PropertyValue | undefined> {\r\n const record = this.props.propertyRecord;\r\n let propertyValue: PropertyValue | undefined;\r\n\r\n // istanbul ignore else\r\n if (record && record.value.valueFormat === PropertyValueFormat.Primitive) {\r\n propertyValue = {\r\n valueFormat: PropertyValueFormat.Primitive,\r\n value: this.state.weightValue,\r\n displayValue: \"\",\r\n };\r\n }\r\n\r\n return propertyValue;\r\n }\r\n\r\n public get htmlElement(): HTMLElement | null {\r\n return this._divElement.current;\r\n }\r\n\r\n public get hasFocus(): boolean {\r\n let containsFocus = false;\r\n // istanbul ignore else\r\n if (this._divElement.current)\r\n containsFocus = this._divElement.current.contains(document.activeElement);\r\n return containsFocus;\r\n }\r\n\r\n private setFocus(): void {\r\n // istanbul ignore else\r\n if (this._control && !this.state.isDisabled) {\r\n this._control.setFocus();\r\n }\r\n }\r\n\r\n private _onLineWeightPick = (weight: number) => {\r\n const propertyRecord = this.props.propertyRecord as PropertyRecord;\r\n\r\n this.setState({\r\n weightValue: weight,\r\n }, async () => {\r\n // istanbul ignore else\r\n if (propertyRecord && this.props.onCommit) {\r\n const propertyValue = await this.getPropertyValue();\r\n // istanbul ignore else\r\n if (propertyValue !== undefined) {\r\n this.props.onCommit({ propertyRecord, newValue: propertyValue });\r\n }\r\n }\r\n });\r\n };\r\n\r\n /** @internal */\r\n public override componentDidMount() {\r\n this._isMounted = true;\r\n this.setStateFromProps(); // eslint-disable-line @typescript-eslint/no-floating-promises\r\n }\r\n\r\n /** @internal */\r\n public override componentWillUnmount() {\r\n this._isMounted = false;\r\n }\r\n\r\n /** @internal */\r\n public override componentDidUpdate(prevProps: PropertyEditorProps) {\r\n if (this.props.propertyRecord !== prevProps.propertyRecord) {\r\n this.setStateFromProps(); // eslint-disable-line @typescript-eslint/no-floating-promises\r\n }\r\n }\r\n\r\n private async setStateFromProps() {\r\n const record = this.props.propertyRecord;\r\n let initialValue = 0;\r\n\r\n // istanbul ignore else\r\n if (record && record.value.valueFormat === PropertyValueFormat.Primitive) {\r\n initialValue = record.value.value as number;\r\n }\r\n\r\n const readonly = record && undefined !== record.isReadonly ? record.isReadonly : false;\r\n const isDisabled = record ? record.isDisabled : undefined;\r\n\r\n // istanbul ignore else\r\n if (this._isMounted)\r\n this.setState(\r\n { weightValue: initialValue, readonly, isDisabled },\r\n () => {\r\n if (this.props.setFocus) {\r\n this.setFocus();\r\n }\r\n },\r\n );\r\n }\r\n\r\n /** @internal */\r\n public override render() {\r\n return (\r\n <div className={classnames(\"components-weight-editor\", this.props.className)} style={this.props.style} ref={this._divElement}>\r\n <WeightPickerButton ref={(control) => this._control = control}\r\n activeWeight={this.state.weightValue}\r\n weights={this._availableWeights.length > 0 ? /* istanbul ignore next */ this._availableWeights : undefined}\r\n disabled={this.state.isDisabled ? true : false}\r\n readonly={this.state.readonly}\r\n onLineWeightPick={this._onLineWeightPick}\r\n data-testid=\"components-weight-editor\" />\r\n </div>\r\n );\r\n }\r\n}\r\n\r\n/** Weight Property Editor registered for the \"number\" type name and \"weight-picker\" editor name.\r\n * It uses the [[WeightEditor]] React component.\r\n * @public\r\n */\r\nexport class WeightPropertyEditor extends PropertyEditorBase {\r\n // istanbul ignore next\r\n public get reactNode(): React.ReactNode {\r\n return <WeightEditor />;\r\n }\r\n}\r\n\r\nPropertyEditorManager.registerEditor(StandardTypeNames.Number, WeightPropertyEditor, StandardEditorNames.WeightPicker);\r\n"]}
|
|
@@ -1,16 +1,16 @@
|
|
|
1
|
-
/*---------------------------------------------------------------------------------------------
|
|
2
|
-
* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
|
|
3
|
-
* See LICENSE.md in the project root for license terms and full copyright notice.
|
|
4
|
-
*--------------------------------------------------------------------------------------------*/
|
|
5
|
-
@import "~@itwin/core-react/lib/cjs/core-react/style/themecolors";
|
|
6
|
-
|
|
7
|
-
$components-weight-editor-item-height: 100%;
|
|
8
|
-
|
|
9
|
-
.components-weight-editor {
|
|
10
|
-
font-family: var(--iui-font-sans);
|
|
11
|
-
font-size: var(--iui-font-size-1);
|
|
12
|
-
color:
|
|
13
|
-
border: none;
|
|
14
|
-
box-sizing: border-box;
|
|
15
|
-
height: $components-weight-editor-item-height;
|
|
16
|
-
}
|
|
1
|
+
/*---------------------------------------------------------------------------------------------
|
|
2
|
+
* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
|
|
3
|
+
* See LICENSE.md in the project root for license terms and full copyright notice.
|
|
4
|
+
*--------------------------------------------------------------------------------------------*/
|
|
5
|
+
@import "~@itwin/core-react/lib/cjs/core-react/style/themecolors";
|
|
6
|
+
|
|
7
|
+
$components-weight-editor-item-height: 100%;
|
|
8
|
+
|
|
9
|
+
.components-weight-editor {
|
|
10
|
+
font-family: var(--iui-font-sans);
|
|
11
|
+
font-size: var(--iui-font-size-1);
|
|
12
|
+
color: var(--iui-color-text);
|
|
13
|
+
border: none;
|
|
14
|
+
box-sizing: border-box;
|
|
15
|
+
height: $components-weight-editor-item-height;
|
|
16
|
+
}
|
|
@@ -8,7 +8,11 @@
|
|
|
8
8
|
*/
|
|
9
9
|
var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
|
|
10
10
|
if (k2 === undefined) k2 = k;
|
|
11
|
-
Object.
|
|
11
|
+
var desc = Object.getOwnPropertyDescriptor(m, k);
|
|
12
|
+
if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
|
|
13
|
+
desc = { enumerable: true, get: function() { return m[k]; } };
|
|
14
|
+
}
|
|
15
|
+
Object.defineProperty(o, k2, desc);
|
|
12
16
|
}) : (function(o, m, k, k2) {
|
|
13
17
|
if (k2 === undefined) k2 = k;
|
|
14
18
|
o[k2] = m[k];
|