@itwin/imodel-components-react 3.0.0-dev.77 → 3.0.0-dev.81

package/lib/esm/imodel-components-react/timeline/SolarTimeline.js

@@ -0,0 +1,399 @@
+/*---------------------------------------------------------------------------------------------
+* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+* See LICENSE.md in the project root for license terms and full copyright notice.
+*--------------------------------------------------------------------------------------------*/
+/** @packageDocumentation
+ * @module Timeline
+ */
+// component is in alpha state - it may change after usability testing - test coverage not complete
+/* istanbul ignore file */
+import "./SolarTimeline.scss";
+import classnames from "classnames";
+import * as React from "react";
+import { Slider, Tooltip } from "@itwin/itwinui-react";
+import { ColorByName, ColorDef } from "@itwin/core-common";
+import { RelativePosition, TimeDisplay } from "@itwin/appui-abstract";
+import { BodyText, Popup } from "@itwin/core-react";
+import { adjustDateToTimezone, DatePicker, TimeField, UiComponents } from "@itwin/components-react";
+import { HueSlider } from "../color/HueSlider";
+import { SaturationPicker } from "../color/SaturationPicker";
+import { ColorSwatch } from "../color/Swatch";
+import { PlayButton } from "./PlayerButton";
+import { SpeedTimeline } from "./SpeedTimeline";
+import { CustomThumb, getPercentageOfRectangle, RailMarkers, useFocusedThumb } from "./Scrubber";
+import { UiIModelComponents } from "../UiIModelComponents";
+// cSpell:ignore millisec solarsettings showticks shadowcolor solartimeline datepicker millisecs
+const millisecPerMinute = 1000 * 60;
+const millisecPerHour = millisecPerMinute * 60;
+// const millisecPerDay = millisecPerHour * 24;
+const defaultPlaybackDuration = 40 * 1000; // 40 seconds
+const addZero = (i) => {
+    return (i < 10) ? `0${i}` : i;
+};
+function Timeline(props) {
+    const sliderRef = React.useRef(null);
+    const [sliderContainer, setSliderContainer] = React.useState();
+    const [pointerPercent, setPointerPercent] = React.useState(0);
+    React.useLayoutEffect(() => {
+        // istanbul ignore else
+        if (sliderRef.current) {
+            const container = sliderRef.current.querySelector(".iui-slider-container");
+            if (container && sliderContainer !== container) {
+                setSliderContainer(container);
+            }
+        }
+    }, [sliderContainer]);
+    const thumbProps = () => {
+        return {
+            className: "components-timeline-thumb",
+            children: React.createElement(CustomThumb, null),
+        };
+    };
+    const tooltipProps = React.useCallback(() => {
+        return { visible: false };
+    }, []);
+    const [showRailTooltip, setShowRailTooltip] = React.useState(false);
+    const handlePointerEnter = React.useCallback(() => {
+        setShowRailTooltip(true);
+    }, []);
+    const handlePointerLeave = React.useCallback(() => {
+        setShowRailTooltip(false);
+    }, []);
+    const handlePointerMove = React.useCallback((event) => {
+        sliderContainer &&
+            setPointerPercent(getPercentageOfRectangle(sliderContainer.getBoundingClientRect(), event.clientX));
+    }, [sliderContainer]);
+    const { formatTick, formatTime, onChange, onUpdate, dayStartMs, sunSetOffsetMs, sunRiseOffsetMs, currentTimeOffsetMs, isPlaying } = props;
+    const thumbHasFocus = useFocusedThumb(sliderContainer);
+    const tickLabel = React.useMemo(() => {
+        const showTip = isPlaying || showRailTooltip || thumbHasFocus;
+        const totalDuration = sunSetOffsetMs - sunRiseOffsetMs;
+        const percent = (isPlaying || thumbHasFocus) ? (currentTimeOffsetMs - sunRiseOffsetMs) / totalDuration : pointerPercent;
+        const tooltipText = formatTime((isPlaying || thumbHasFocus) ? (dayStartMs + currentTimeOffsetMs) : (dayStartMs + (sunRiseOffsetMs + (pointerPercent * totalDuration))));
+        return (React.createElement(RailMarkers, { showToolTip: showTip, percent: percent, tooltipText: tooltipText }));
+    }, [isPlaying, showRailTooltip, thumbHasFocus, sunSetOffsetMs, sunRiseOffsetMs, currentTimeOffsetMs, pointerPercent, formatTime, dayStartMs]);
+    const className = classnames("solar-slider", props.className, formatTick && "showticks");
+    const sunRiseFormat = formatTime(dayStartMs + sunRiseOffsetMs);
+    const sunSetFormat = formatTime(dayStartMs + sunSetOffsetMs);
+    return (React.createElement("div", { className: className },
+        React.createElement(Tooltip, { content: sunRiseFormat },
+            React.createElement("span", { className: "sunrise" }, "\u2600")),
+        React.createElement(Slider, { ref: sliderRef, className: className, step: millisecPerMinute, min: sunRiseOffsetMs, max: sunSetOffsetMs, minLabel: "", maxLabel: "", onUpdate: onUpdate, onChange: onChange, values: [currentTimeOffsetMs], tooltipProps: tooltipProps, thumbProps: thumbProps, tickLabels: tickLabel, railContainerProps: {
+                onPointerEnter: handlePointerEnter,
+                onPointerMove: handlePointerMove,
+                onPointerLeave: handlePointerLeave,
+            } }),
+        React.createElement(Tooltip, { content: sunSetFormat },
+            React.createElement("span", { className: "sunset" }, "\u263D"))));
+}
+/** Solar Timeline
+ * @alpha
+ */
+export class SolarTimeline extends React.PureComponent {
+    constructor(props) {
+        super(props);
+        this._datePicker = null;
+        this._settings = null;
+        this._requestFrame = 0;
+        this._unmounted = false;
+        this._timeLastCycle = 0;
+        this._totalPlayTime = 0;
+        this._settingsPopupTitle = UiIModelComponents.translate("solarsettings.shadowcolor");
+        this._playLabel = UiIModelComponents.translate("solartimeline.play");
+        this._settingLabel = UiIModelComponents.translate("solartimeline.settings");
+        this._loopLabel = UiIModelComponents.translate("timeline.repeat");
+        this._speedLabel = UiIModelComponents.translate("solartimeline.speed");
+        this._dateTimeLabel = UiIModelComponents.translate("solartimeline.dateTime");
+        this._months = [
+            UiComponents.translate("month.short.january"),
+            UiComponents.translate("month.short.february"),
+            UiComponents.translate("month.short.march"),
+            UiComponents.translate("month.short.april"),
+            UiComponents.translate("month.short.may"),
+            UiComponents.translate("month.short.june"),
+            UiComponents.translate("month.short.july"),
+            UiComponents.translate("month.short.august"),
+            UiComponents.translate("month.short.september"),
+            UiComponents.translate("month.short.october"),
+            UiComponents.translate("month.short.november"),
+            UiComponents.translate("month.short.december"),
+        ];
+        this._timeLabel = UiComponents.translate("datepicker.time");
+        this._amLabel = UiComponents.translate("time.am");
+        this._pmLabel = UiComponents.translate("time.pm");
+        this._presetColors = [
+            ColorDef.create(ColorByName.grey),
+            ColorDef.create(ColorByName.lightGrey),
+            ColorDef.create(ColorByName.darkGrey),
+            ColorDef.create(ColorByName.lightBlue),
+            ColorDef.create(ColorByName.lightGreen),
+            ColorDef.create(ColorByName.darkGreen),
+            ColorDef.create(ColorByName.tan),
+            ColorDef.create(ColorByName.darkBrown),
+        ];
+        // recursively update the animation until we hit the end or the pause button is clicked
+        this._updateAnimation = (_timestamp) => {
+            // istanbul ignore else
+            if (!this.state.isPlaying || this._unmounted) {
+                window.cancelAnimationFrame(this._requestFrame);
+                return;
+            }
+            const currentTime = new Date().getTime();
+            this._totalPlayTime += (currentTime - this._timeLastCycle);
+            this._timeLastCycle = currentTime;
+            let percentComplete = this._totalPlayTime / this.state.adjustedDuration;
+            if (percentComplete > 1)
+                percentComplete = 1;
+            let newPlayingState = true;
+            // calculate the next sun time base on the percentage playback complete - should be int value as that is step amount for slider
+            let nextSunOffset = Math.floor(this.state.sunRiseOffsetMs + (percentComplete * this.state.sunDeltaMs));
+            if (percentComplete > 0.99) {
+                if (!this.state.loop) {
+                    newPlayingState = false;
+                    nextSunOffset = this.state.sunSetOffsetMs;
+                    window.cancelAnimationFrame(this._requestFrame);
+                }
+                else {
+                    nextSunOffset = this.state.sunRiseOffsetMs;
+                    this._totalPlayTime = 0;
+                }
+            }
+            if (this.props.dataProvider.onTimeChanged) {
+                const currentSunTime = new Date(this.state.dayStartMs + nextSunOffset);
+                this.props.dataProvider.onTimeChanged(currentSunTime);
+            }
+            this.setState({ isPlaying: newPlayingState, currentTimeOffsetMs: nextSunOffset }, () => {
+                if (newPlayingState)
+                    this._requestFrame = window.requestAnimationFrame(this._updateAnimation);
+            });
+        };
+        // user clicked pause button
+        this._onPause = () => {
+            // istanbul ignore if
+            if (!this.state.isPlaying)
+                return;
+            const currentTime = new Date().getTime();
+            this._totalPlayTime += (currentTime - this._timeLastCycle);
+            // stop requesting frames
+            window.cancelAnimationFrame(this._requestFrame);
+            // stop playing
+            this.setState({ isPlaying: false });
+            // istanbul ignore else
+            if (this.props.onPlayPause)
+                this.props.onPlayPause(false);
+        };
+        // user clicked play button
+        this._onPlay = () => {
+            // istanbul ignore if
+            if (this.state.isPlaying)
+                return;
+            if (this.state.currentTimeOffsetMs >= this.state.sunSetOffsetMs || this.state.currentTimeOffsetMs <= this.state.sunRiseOffsetMs) {
+                this._totalPlayTime = 0;
+                this._play(this.state.sunRiseOffsetMs);
+            }
+            else {
+                this._play(this.state.currentTimeOffsetMs);
+            }
+        };
+        /** note the day passed in is in the time of the current user not in project time because the date picker works in
+         * local time  */
+        this._onDayClick = (day) => {
+            const selectedDate = new Date(day.getTime() + this.state.currentTimeOffsetMs);
+            this.props.dataProvider.setDateAndTime(selectedDate);
+            const dayStartMs = this.props.dataProvider.dayStartMs;
+            const sunRiseOffsetMs = this.props.dataProvider.sunrise.getTime() - dayStartMs;
+            const sunSetOffsetMs = this.props.dataProvider.sunset.getTime() - dayStartMs;
+            const sunDeltaMs = sunSetOffsetMs - sunRiseOffsetMs;
+            const sunOffsetMs = this.ensureRange(this.state.currentTimeOffsetMs, sunRiseOffsetMs, sunSetOffsetMs);
+            this.setPlaybackTimeBySunTime(sunOffsetMs, sunRiseOffsetMs, sunDeltaMs);
+            /** call dataProvider to update display style */
+            if (this.props.dataProvider.onTimeChanged)
+                this.props.dataProvider.onTimeChanged(this.props.dataProvider.timeOfDay);
+            this.setState({ dayStartMs, sunRiseOffsetMs, sunSetOffsetMs, currentTimeOffsetMs: sunOffsetMs, sunDeltaMs, isDateOpened: false }, () => {
+                this._timeLastCycle = new Date().getTime();
+            });
+        };
+        this._onTimeChanged = (time) => {
+            // compute the current date (with time)
+            const dayStartMs = this.props.dataProvider.dayStartMs;
+            const sunTime = (time.hours * millisecPerHour) + (time.minutes * millisecPerMinute);
+            const dateWithNewTime = new Date(dayStartMs + sunTime);
+            this.props.dataProvider.setDateAndTime(dateWithNewTime, true);
+            // notify the provider to update style
+            if (this.props.dataProvider.onTimeChanged)
+                this.props.dataProvider.onTimeChanged(dateWithNewTime);
+            const currentTimeOffsetMs = this.ensureRange(sunTime, this.state.sunRiseOffsetMs, this.state.sunSetOffsetMs);
+            this.setPlaybackTimeBySunTime(currentTimeOffsetMs, this.state.sunRiseOffsetMs, this.state.sunDeltaMs);
+            this._timeLastCycle = new Date().getTime();
+            // update the timeline
+            this.setState({ currentTimeOffsetMs });
+        };
+        this._onCloseDayPicker = () => {
+            this.setState({ isDateOpened: false });
+        };
+        this._onOpenDayPicker = () => {
+            this.setState((prevState) => ({ isDateOpened: !prevState.isDateOpened }));
+        };
+        this._onCloseSettingsPopup = () => {
+            this.setState({ isSettingsOpened: false });
+        };
+        this._onOpenSettingsPopup = () => {
+            this.setState((prevState) => ({ isSettingsOpened: !prevState.isSettingsOpened }));
+        };
+        this._onUpdate = (values) => {
+            if (!this.state.isPlaying)
+                this.processSunTimeChange(values[0]);
+        };
+        this._onChange = (values) => {
+            if (!this.state.isPlaying)
+                this.processSunTimeChange(values[0]);
+        };
+        this._onSpeedChange = (value) => {
+            const adjustedDuration = this.state.duration / value;
+            this.setState({ speed: value, adjustedDuration });
+        };
+        this._onToggleLoop = () => {
+            this.setState((prevState) => ({ loop: !prevState.loop }));
+        };
+        this._formatTime = (millisec) => {
+            const date = new Date(millisec);
+            // convert project date to browser locale date
+            const localTime = adjustDateToTimezone(date, this.props.dataProvider.timeZoneOffset * 60);
+            let hours = localTime.getHours();
+            const minutes = addZero(date.getMinutes());
+            const abbrev = (hours < 12) ? this._amLabel : (hours === 24) ? this._amLabel : this._pmLabel;
+            hours = (hours > 12) ? hours - 12 : hours;
+            return `${hours}:${minutes} ${abbrev}`;
+        };
+        this._onPresetColorPick = (shadowColor) => {
+            this.setState({ shadowColor }, () => this.props.dataProvider.shadowColor = shadowColor);
+        };
+        this._handleHueOrSaturationChange = (hueOrSaturation) => {
+            if (hueOrSaturation.s === 0) // for a ColorDef to be created from hsv s can't be 0
+                hueOrSaturation = hueOrSaturation.clone(undefined, 0.5);
+            const shadowColor = hueOrSaturation.toColorDef();
+            this.setState({ shadowColor }, () => this.props.dataProvider.shadowColor = shadowColor);
+        };
+        const dayStartMs = this.props.dataProvider.dayStartMs;
+        const sunRiseOffsetMs = this.props.dataProvider.sunrise.getTime() - dayStartMs;
+        const sunSetOffsetMs = this.props.dataProvider.sunset.getTime() - dayStartMs;
+        const sunDeltaMs = sunSetOffsetMs - sunRiseOffsetMs;
+        const sunOffsetMs = this.props.dataProvider.timeOfDay.getTime() - dayStartMs;
+        const currentTimeOffsetMs = this.ensureRange(sunOffsetMs, sunRiseOffsetMs, sunSetOffsetMs);
+        const shadowColor = this.props.dataProvider.shadowColor;
+        const duration = this.props.duration ? this.props.duration : defaultPlaybackDuration;
+        const speed = this.props.speed ? this.props.speed : 2;
+        const adjustedDuration = duration / speed;
+        this.setPlaybackTimeBySunTime(currentTimeOffsetMs, sunRiseOffsetMs, sunDeltaMs, adjustedDuration);
+        this.state = {
+            isDateOpened: false,
+            isSettingsOpened: false,
+            isPlaying: false,
+            dayStartMs,
+            sunRiseOffsetMs,
+            sunSetOffsetMs,
+            sunDeltaMs,
+            currentTimeOffsetMs,
+            speed,
+            loop: false,
+            shadowColor,
+            duration,
+            adjustedDuration,
+        };
+    }
+    componentWillUnmount() {
+        window.cancelAnimationFrame(this._requestFrame);
+        this._unmounted = true;
+    }
+    _play(sunTimeMs) {
+        this._timeLastCycle = new Date().getTime();
+        // start playing
+        this.setState({ isPlaying: true, currentTimeOffsetMs: sunTimeMs }, () => {
+            this._requestFrame = window.requestAnimationFrame(this._updateAnimation);
+            // istanbul ignore else
+            if (this.props.onPlayPause)
+                this.props.onPlayPause(true);
+        });
+    }
+    setPlaybackTimeBySunTime(sunOffsetMs, sunRiseOffsetMs, sunDeltaMs, adjustedDuration) {
+        this._totalPlayTime = ((sunOffsetMs - sunRiseOffsetMs) / (sunDeltaMs)) * ((adjustedDuration) ? adjustedDuration : this.state.adjustedDuration);
+    }
+    ensureRange(value, min, max) {
+        return Math.max(Math.min(value, max), min);
+    }
+    processSunTimeChange(sunTime) {
+        if (sunTime === this.state.currentTimeOffsetMs)
+            return;
+        const currentTimeOffsetMs = this.ensureRange(sunTime, this.state.sunRiseOffsetMs, this.state.sunSetOffsetMs);
+        if (this.props.dataProvider.onTimeChanged) {
+            const currentSunTime = new Date(this.state.dayStartMs + currentTimeOffsetMs);
+            this.props.dataProvider.onTimeChanged(currentSunTime);
+        }
+        this.setState({ currentTimeOffsetMs }, () => {
+            const currentTime = new Date().getTime();
+            this._timeLastCycle = currentTime;
+            const percentComplete = (currentTimeOffsetMs - this.state.sunRiseOffsetMs) / this.state.sunDeltaMs;
+            this._totalPlayTime = percentComplete * this.state.adjustedDuration;
+        });
+    }
+    getLocalTime(ticks) {
+        const projectTime = new Date(ticks);
+        // convert project date to browser locale date
+        return adjustDateToTimezone(projectTime, this.props.dataProvider.timeZoneOffset * 60);
+    }
+    render() {
+        const { dataProvider } = this.props;
+        const { speed, loop, currentTimeOffsetMs, sunRiseOffsetMs, sunSetOffsetMs } = this.state;
+        const localTime = this.getLocalTime(this.state.dayStartMs + this.state.currentTimeOffsetMs);
+        const formattedTime = this._formatTime(dataProvider.dayStartMs + currentTimeOffsetMs);
+        const formattedDate = `${this._months[localTime.getMonth()]}, ${localTime.getDate()}`;
+        const colorSwatchStyle = {
+            width: `100%`,
+            height: `100%`,
+        };
+        return (React.createElement("div", { className: "solar-timeline-wrapper" },
+            React.createElement("div", { className: "header" },
+                React.createElement(PlayButton, { tooltip: this._playLabel, className: "play-button", isPlaying: this.state.isPlaying, onPlay: this._onPlay, onPause: this._onPause }),
+                React.createElement("button", { "data-testid": "solar-date-time-button", title: this._dateTimeLabel, className: "current-date", ref: (element) => this._datePicker = element, onClick: this._onOpenDayPicker },
+                    React.createElement("span", null, formattedDate),
+                    React.createElement("span", null, "/"),
+                    React.createElement("span", null, formattedTime),
+                    React.createElement("span", { className: "icon icon-calendar" })),
+                React.createElement(Popup, { style: { border: "none" }, offset: 11, target: this._datePicker, isOpen: this.state.isDateOpened, onClose: this._onCloseDayPicker, position: RelativePosition.Top },
+                    React.createElement("div", { className: "components-date-picker-calendar-popup-panel", "data-testid": "components-date-picker-calendar-popup-panel" },
+                        React.createElement(DatePicker, { selected: localTime, onDateChange: this._onDayClick, showFocusOutline: false }),
+                        React.createElement("div", { className: "time-container" },
+                            React.createElement(BodyText, { className: "time-label" }, this._timeLabel),
+                            React.createElement(TimeField, { time: { hours: localTime.getHours(), minutes: localTime.getMinutes(), seconds: 0 }, timeDisplay: TimeDisplay.H12MC, onTimeChange: this._onTimeChanged })))),
+                React.createElement(Timeline, { className: "solar-timeline", dayStartMs: dataProvider.dayStartMs, sunSetOffsetMs: sunSetOffsetMs, sunRiseOffsetMs: sunRiseOffsetMs, currentTimeOffsetMs: currentTimeOffsetMs, onChange: this._onChange, onUpdate: this._onUpdate, formatTime: this._formatTime, isPlaying: this.state.isPlaying }),
+                React.createElement("div", { className: "speed-container" },
+                    React.createElement("span", { title: this._speedLabel },
+                        speed,
+                        "x"),
+                    React.createElement(SpeedTimeline, { className: "speed", onChange: this._onSpeedChange, speed: this.state.speed })),
+                React.createElement("span", { title: this._loopLabel, className: classnames("icon", "icon-media-controls-loop", !loop && "no-loop-playback", loop && "loop-playback"), onClick: this._onToggleLoop, role: "button", tabIndex: -1 }),
+                React.createElement("button", { "data-testid": "shadow-settings-button", title: this._settingLabel, className: "shadow-settings-button", ref: (element) => this._settings = element, onClick: this._onOpenSettingsPopup },
+                    React.createElement("span", { className: "icon icon-settings" })),
+                React.createElement(Popup, { className: "shadow-settings-popup", target: this._settings, offset: 11, isOpen: this.state.isSettingsOpened, onClose: this._onCloseSettingsPopup, position: RelativePosition.Top },
+                    React.createElement("div", { className: "shadow-settings-popup-container" },
+                        React.createElement("div", { className: "shadow-settings-header" }, this._settingsPopupTitle),
+                        React.createElement("div", { className: "shadow-settings-color" },
+                            React.createElement("div", { className: "shadow-settings-color-top" },
+                                React.createElement(SaturationPicker, { hsv: this.state.shadowColor.toHSV(), onSaturationChange: this._handleHueOrSaturationChange })),
+                            React.createElement("div", { className: "shadow-settings-color-bottom" },
+                                React.createElement("div", { className: "shadow-settings-color-bottom-left" },
+                                    React.createElement(HueSlider, { hsv: this.state.shadowColor.toHSV(), onHueChange: this._handleHueOrSaturationChange, isHorizontal: true })),
+                                React.createElement("div", { className: "shadow-settings-color-bottom-right" },
+                                    React.createElement(ColorSwatch, { style: colorSwatchStyle, colorDef: this.state.shadowColor, round: false })))),
+                        React.createElement("div", { className: "shadow-settings-color-presets" },
+                            React.createElement(ColorSwatch, { colorDef: this._presetColors[0], round: false, onColorPick: this._onPresetColorPick }),
+                            React.createElement(ColorSwatch, { colorDef: this._presetColors[1], round: false, onColorPick: this._onPresetColorPick }),
+                            React.createElement(ColorSwatch, { colorDef: this._presetColors[2], round: false, onColorPick: this._onPresetColorPick }),
+                            React.createElement(ColorSwatch, { colorDef: this._presetColors[3], round: false, onColorPick: this._onPresetColorPick }),
+                            React.createElement(ColorSwatch, { colorDef: this._presetColors[4], round: false, onColorPick: this._onPresetColorPick }),
+                            React.createElement(ColorSwatch, { colorDef: this._presetColors[5], round: false, onColorPick: this._onPresetColorPick }),
+                            React.createElement(ColorSwatch, { colorDef: this._presetColors[6], round: false, onColorPick: this._onPresetColorPick }),
+                            React.createElement(ColorSwatch, { colorDef: this._presetColors[7], round: false, onColorPick: this._onPresetColorPick })))))));
+    }
+}
+//# sourceMappingURL=SolarTimeline.js.map

package/lib/esm/imodel-components-react/timeline/SolarTimeline.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SolarTimeline.js","sourceRoot":"","sources":["../../../../src/imodel-components-react/timeline/SolarTimeline.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 Timeline\n */\n\n// component is in alpha state - it may change after usability testing - test coverage not complete\n/* istanbul ignore file */\n\nimport \"./SolarTimeline.scss\";\nimport classnames from \"classnames\";\nimport * as React from \"react\";\nimport { Slider, Tooltip } from \"@itwin/itwinui-react\";\n\nimport { ColorByName, ColorDef, HSVColor } from \"@itwin/core-common\";\nimport { RelativePosition, TimeDisplay } from \"@itwin/appui-abstract\";\nimport { BodyText, CommonProps, Popup } from \"@itwin/core-react\";\nimport { adjustDateToTimezone, DatePicker, TimeField, TimeSpec, UiComponents } from \"@itwin/components-react\";\nimport { HueSlider } from \"../color/HueSlider\";\nimport { SaturationPicker } from \"../color/SaturationPicker\";\nimport { ColorSwatch } from \"../color/Swatch\";\nimport { SolarDataProvider } from \"./interfaces\";\nimport { PlayButton } from \"./PlayerButton\";\nimport { SpeedTimeline } from \"./SpeedTimeline\";\nimport { CustomThumb, getPercentageOfRectangle, RailMarkers, useFocusedThumb } from \"./Scrubber\";\nimport { UiIModelComponents } from \"../UiIModelComponents\";\n\n// cSpell:ignore millisec solarsettings showticks shadowcolor solartimeline datepicker millisecs\n\nconst millisecPerMinute = 1000 * 60;\nconst millisecPerHour = millisecPerMinute * 60;\n// const millisecPerDay = millisecPerHour * 24;\nconst defaultPlaybackDuration = 40 * 1000; // 40 seconds\nconst addZero = (i: number) => {\n  return (i < 10) ? `0${i}` : i;\n};\n\ninterface TimelineProps extends CommonProps {\n  dayStartMs: number;\n  sunRiseOffsetMs: number;\n  sunSetOffsetMs: number;\n  currentTimeOffsetMs: number;\n  isPlaying: boolean;\n  formatTick?: (millisec: number) => string;\n  formatTime: (millisec: number) => string;\n  onChange?: (values: ReadonlyArray<number>) => void;\n  onUpdate?: (values: ReadonlyArray<number>) => void;\n}\nfunction Timeline(props: TimelineProps) {\n  const sliderRef = React.useRef<HTMLDivElement>(null);\n  const [sliderContainer, setSliderContainer] = React.useState<HTMLDivElement>();\n  const [pointerPercent, setPointerPercent] = React.useState(0);\n\n  React.useLayoutEffect(() => {\n    // istanbul ignore else\n    if (sliderRef.current) {\n      const container = sliderRef.current.querySelector(\".iui-slider-container\");\n      if (container && sliderContainer !== container) {\n        setSliderContainer(container as HTMLDivElement);\n      }\n    }\n  }, [sliderContainer]);\n\n  const thumbProps = () => {\n    return {\n      className: \"components-timeline-thumb\",\n      children: <CustomThumb />,\n    };\n  };\n\n  const tooltipProps = React.useCallback(() => {\n    return { visible: false };\n  }, []);\n\n  const [showRailTooltip, setShowRailTooltip] = React.useState(false);\n\n  const handlePointerEnter = React.useCallback(() => {\n    setShowRailTooltip(true);\n  }, []);\n\n  const handlePointerLeave = React.useCallback(() => {\n    setShowRailTooltip(false);\n  }, []);\n\n  const handlePointerMove = React.useCallback((event: React.PointerEvent) => {\n    sliderContainer &&\n      setPointerPercent(getPercentageOfRectangle(sliderContainer.getBoundingClientRect(), event.clientX));\n  }, [sliderContainer]);\n\n  const { formatTick, formatTime, onChange, onUpdate, dayStartMs, sunSetOffsetMs, sunRiseOffsetMs, currentTimeOffsetMs, isPlaying } = props;\n\n  const thumbHasFocus = useFocusedThumb(sliderContainer);\n\n  const tickLabel = React.useMemo(() => {\n    const showTip = isPlaying || showRailTooltip || thumbHasFocus;\n    const totalDuration = sunSetOffsetMs - sunRiseOffsetMs;\n    const percent = (isPlaying || thumbHasFocus) ? (currentTimeOffsetMs - sunRiseOffsetMs) / totalDuration : pointerPercent;\n    const tooltipText = formatTime((isPlaying || thumbHasFocus) ? (dayStartMs + currentTimeOffsetMs) : (dayStartMs + (sunRiseOffsetMs + (pointerPercent * totalDuration))));\n    return (<RailMarkers showToolTip={showTip} percent={percent} tooltipText={tooltipText} />);\n  }, [isPlaying, showRailTooltip, thumbHasFocus, sunSetOffsetMs, sunRiseOffsetMs, currentTimeOffsetMs, pointerPercent, formatTime, dayStartMs]);\n\n  const className = classnames(\"solar-slider\", props.className, formatTick && \"showticks\");\n  const sunRiseFormat = formatTime(dayStartMs + sunRiseOffsetMs);\n  const sunSetFormat = formatTime(dayStartMs + sunSetOffsetMs);\n  return (\n    <div className={className}>\n      <Tooltip content={sunRiseFormat}>\n        <span className=\"sunrise\">\n          &#x2600;\n        </span>\n      </Tooltip>\n      <Slider ref={sliderRef}\n        className={className}\n        step={millisecPerMinute}\n        min={sunRiseOffsetMs}\n        max={sunSetOffsetMs}\n        minLabel=\"\"\n        maxLabel=\"\"\n        onUpdate={onUpdate}\n        onChange={onChange}\n        values={[currentTimeOffsetMs]}\n        tooltipProps={tooltipProps}\n        thumbProps={thumbProps}\n        tickLabels={tickLabel}\n        railContainerProps={{\n          onPointerEnter: handlePointerEnter,\n          onPointerMove: handlePointerMove,\n          onPointerLeave: handlePointerLeave,\n        }}\n      />\n      <Tooltip content={sunSetFormat}>\n        <span className=\"sunset\">\n          &#x263D;\n        </span>\n      </Tooltip>\n    </div>\n  );\n}\n\ninterface SolarTimelineComponentProps {\n  dataProvider: SolarDataProvider;  // provides date, sunrise, sunset in millisecs, also contains timezone offset from UTC, and updates the display style to current time.\n  onPlayPause?: (playing: boolean) => void; // callback triggered when play/pause button is pressed\n  duration?: number;  // playback duration in milliseconds\n  speed?: number;\n}\n\ninterface SolarTimelineComponentState {\n  isPlaying: boolean;     // timeline is currently playing or paused\n  isDateOpened: boolean;  // date picker is opened\n  isSettingsOpened: boolean;  // settings popup is opened\n  dayStartMs: number;\n  sunRiseOffsetMs: number;\n  sunSetOffsetMs: number;\n  sunDeltaMs: number;\n  currentTimeOffsetMs: number;\n  speed: number;\n  loop: boolean;\n  shadowColor: ColorDef;\n  duration: number;  // playback duration in milliseconds\n  adjustedDuration: number;  // playback duration in milliseconds/ speed\n}\n\n/** Solar Timeline\n * @alpha\n */\nexport class SolarTimeline extends React.PureComponent<SolarTimelineComponentProps, SolarTimelineComponentState> {\n  private _datePicker: HTMLElement | null = null;\n  private _settings: HTMLElement | null = null;\n  private _requestFrame = 0;\n  private _unmounted = false;\n  private _timeLastCycle = 0;\n  private _totalPlayTime = 0;\n  private _settingsPopupTitle = UiIModelComponents.translate(\"solarsettings.shadowcolor\");\n  private _playLabel = UiIModelComponents.translate(\"solartimeline.play\");\n  private _settingLabel = UiIModelComponents.translate(\"solartimeline.settings\");\n  private _loopLabel = UiIModelComponents.translate(\"timeline.repeat\");\n  private _speedLabel = UiIModelComponents.translate(\"solartimeline.speed\");\n  private _dateTimeLabel = UiIModelComponents.translate(\"solartimeline.dateTime\");\n\n  private _months = [\n    UiComponents.translate(\"month.short.january\"),\n    UiComponents.translate(\"month.short.february\"),\n    UiComponents.translate(\"month.short.march\"),\n    UiComponents.translate(\"month.short.april\"),\n    UiComponents.translate(\"month.short.may\"),\n    UiComponents.translate(\"month.short.june\"),\n    UiComponents.translate(\"month.short.july\"),\n    UiComponents.translate(\"month.short.august\"),\n    UiComponents.translate(\"month.short.september\"),\n    UiComponents.translate(\"month.short.october\"),\n    UiComponents.translate(\"month.short.november\"),\n    UiComponents.translate(\"month.short.december\"),\n  ];\n\n  private _timeLabel = UiComponents.translate(\"datepicker.time\");\n  private _amLabel = UiComponents.translate(\"time.am\");\n  private _pmLabel = UiComponents.translate(\"time.pm\");\n  private readonly _presetColors = [\n    ColorDef.create(ColorByName.grey),\n    ColorDef.create(ColorByName.lightGrey),\n    ColorDef.create(ColorByName.darkGrey),\n    ColorDef.create(ColorByName.lightBlue),\n    ColorDef.create(ColorByName.lightGreen),\n    ColorDef.create(ColorByName.darkGreen),\n    ColorDef.create(ColorByName.tan),\n    ColorDef.create(ColorByName.darkBrown),\n  ];\n\n  constructor(props: SolarTimelineComponentProps) {\n    super(props);\n\n    const dayStartMs = this.props.dataProvider.dayStartMs;\n    const sunRiseOffsetMs = this.props.dataProvider.sunrise.getTime() - dayStartMs;\n    const sunSetOffsetMs = this.props.dataProvider.sunset.getTime() - dayStartMs;\n    const sunDeltaMs = sunSetOffsetMs - sunRiseOffsetMs;\n    const sunOffsetMs = this.props.dataProvider.timeOfDay.getTime() - dayStartMs;\n    const currentTimeOffsetMs = this.ensureRange(sunOffsetMs, sunRiseOffsetMs, sunSetOffsetMs);\n    const shadowColor = this.props.dataProvider.shadowColor;\n    const duration = this.props.duration ? this.props.duration : defaultPlaybackDuration;\n    const speed = this.props.speed ? this.props.speed : 2;\n    const adjustedDuration = duration / speed;\n    this.setPlaybackTimeBySunTime(currentTimeOffsetMs, sunRiseOffsetMs, sunDeltaMs, adjustedDuration);\n\n    this.state = {\n      isDateOpened: false,\n      isSettingsOpened: false,\n      isPlaying: false,\n      dayStartMs,\n      sunRiseOffsetMs,\n      sunSetOffsetMs,\n      sunDeltaMs,\n      currentTimeOffsetMs,\n      speed,\n      loop: false,\n      shadowColor,\n      duration,\n      adjustedDuration,\n    };\n  }\n\n  public override componentWillUnmount() {\n    window.cancelAnimationFrame(this._requestFrame);\n    this._unmounted = true;\n  }\n\n  // recursively update the animation until we hit the end or the pause button is clicked\n  private _updateAnimation = (_timestamp: number) => {\n    // istanbul ignore else\n    if (!this.state.isPlaying || this._unmounted) {\n      window.cancelAnimationFrame(this._requestFrame);\n      return;\n    }\n\n    const currentTime = new Date().getTime();\n    this._totalPlayTime += (currentTime - this._timeLastCycle);\n    this._timeLastCycle = currentTime;\n    let percentComplete = this._totalPlayTime / this.state.adjustedDuration;\n    if (percentComplete > 1)\n      percentComplete = 1;\n\n    let newPlayingState = true;\n\n    // calculate the next sun time base on the percentage playback complete - should be int value as that is step amount for slider\n    let nextSunOffset = Math.floor(this.state.sunRiseOffsetMs + (percentComplete * this.state.sunDeltaMs));\n\n    if (percentComplete > 0.99) {\n      if (!this.state.loop) {\n        newPlayingState = false;\n        nextSunOffset = this.state.sunSetOffsetMs;\n        window.cancelAnimationFrame(this._requestFrame);\n      } else {\n        nextSunOffset = this.state.sunRiseOffsetMs;\n        this._totalPlayTime = 0;\n      }\n    }\n\n    if (this.props.dataProvider.onTimeChanged) {\n      const currentSunTime = new Date(this.state.dayStartMs + nextSunOffset);\n      this.props.dataProvider.onTimeChanged(currentSunTime);\n    }\n\n    this.setState({ isPlaying: newPlayingState, currentTimeOffsetMs: nextSunOffset }, () => {\n      if (newPlayingState)\n        this._requestFrame = window.requestAnimationFrame(this._updateAnimation);\n    });\n  };\n\n  private _play(sunTimeMs: number) {\n    this._timeLastCycle = new Date().getTime();\n\n    // start playing\n    this.setState({ isPlaying: true, currentTimeOffsetMs: sunTimeMs }, () => {\n      this._requestFrame = window.requestAnimationFrame(this._updateAnimation);\n      // istanbul ignore else\n      if (this.props.onPlayPause)\n        this.props.onPlayPause(true);\n    });\n  }\n\n  // user clicked pause button\n  private _onPause = () => {\n    // istanbul ignore if\n    if (!this.state.isPlaying)\n      return;\n\n    const currentTime = new Date().getTime();\n    this._totalPlayTime += (currentTime - this._timeLastCycle);\n\n    // stop requesting frames\n    window.cancelAnimationFrame(this._requestFrame);\n\n    // stop playing\n    this.setState({ isPlaying: false });\n\n    // istanbul ignore else\n    if (this.props.onPlayPause)\n      this.props.onPlayPause(false);\n  };\n\n  // user clicked play button\n  private _onPlay = () => {\n    // istanbul ignore if\n    if (this.state.isPlaying)\n      return;\n\n    if (this.state.currentTimeOffsetMs >= this.state.sunSetOffsetMs || this.state.currentTimeOffsetMs <= this.state.sunRiseOffsetMs) {\n      this._totalPlayTime = 0;\n      this._play(this.state.sunRiseOffsetMs);\n    } else {\n      this._play(this.state.currentTimeOffsetMs);\n    }\n  };\n\n  private setPlaybackTimeBySunTime(sunOffsetMs: number, sunRiseOffsetMs: number, sunDeltaMs: number, adjustedDuration?: number) {\n    this._totalPlayTime = ((sunOffsetMs - sunRiseOffsetMs) / (sunDeltaMs)) * ((adjustedDuration) ? adjustedDuration : this.state.adjustedDuration);\n  }\n\n  /** note the day passed in is in the time of the current user not in project time because the date picker works in\n   * local time  */\n  private _onDayClick = (day: Date) => {\n    const selectedDate = new Date(day.getTime() + this.state.currentTimeOffsetMs);\n    this.props.dataProvider.setDateAndTime(selectedDate);\n    const dayStartMs = this.props.dataProvider.dayStartMs;\n    const sunRiseOffsetMs = this.props.dataProvider.sunrise.getTime() - dayStartMs;\n    const sunSetOffsetMs = this.props.dataProvider.sunset.getTime() - dayStartMs;\n    const sunDeltaMs = sunSetOffsetMs - sunRiseOffsetMs;\n\n    const sunOffsetMs = this.ensureRange(this.state.currentTimeOffsetMs, sunRiseOffsetMs, sunSetOffsetMs);\n    this.setPlaybackTimeBySunTime(sunOffsetMs, sunRiseOffsetMs, sunDeltaMs);\n\n    /** call dataProvider to update display style */\n    if (this.props.dataProvider.onTimeChanged)\n      this.props.dataProvider.onTimeChanged(this.props.dataProvider.timeOfDay);\n\n    this.setState({ dayStartMs, sunRiseOffsetMs, sunSetOffsetMs, currentTimeOffsetMs: sunOffsetMs, sunDeltaMs, isDateOpened: false }, () => {\n      this._timeLastCycle = new Date().getTime();\n    });\n  };\n\n  private _onTimeChanged = (time: TimeSpec) => {\n    // compute the current date (with time)\n    const dayStartMs = this.props.dataProvider.dayStartMs;\n    const sunTime = (time.hours * millisecPerHour) + (time.minutes * millisecPerMinute);\n    const dateWithNewTime = new Date(dayStartMs + sunTime);\n    this.props.dataProvider.setDateAndTime(dateWithNewTime, true);\n\n    // notify the provider to update style\n    if (this.props.dataProvider.onTimeChanged)\n      this.props.dataProvider.onTimeChanged(dateWithNewTime);\n\n    const currentTimeOffsetMs = this.ensureRange(sunTime, this.state.sunRiseOffsetMs, this.state.sunSetOffsetMs);\n\n    this.setPlaybackTimeBySunTime(currentTimeOffsetMs, this.state.sunRiseOffsetMs, this.state.sunDeltaMs);\n    this._timeLastCycle = new Date().getTime();\n\n    // update the timeline\n    this.setState({ currentTimeOffsetMs });\n  };\n\n  private _onCloseDayPicker = () => {\n    this.setState({ isDateOpened: false });\n  };\n\n  private _onOpenDayPicker = () => {\n    this.setState((prevState) => ({ isDateOpened: !prevState.isDateOpened }));\n  };\n\n  private _onCloseSettingsPopup = () => {\n    this.setState({ isSettingsOpened: false });\n  };\n\n  private _onOpenSettingsPopup = () => {\n    this.setState((prevState) => ({ isSettingsOpened: !prevState.isSettingsOpened }));\n  };\n\n  private ensureRange(value: number, min: number, max: number): number {\n    return Math.max(Math.min(value, max), min);\n  }\n\n  private processSunTimeChange(sunTime: number) {\n    if (sunTime === this.state.currentTimeOffsetMs)\n      return;\n\n    const currentTimeOffsetMs = this.ensureRange(sunTime, this.state.sunRiseOffsetMs, this.state.sunSetOffsetMs);\n\n    if (this.props.dataProvider.onTimeChanged) {\n      const currentSunTime = new Date(this.state.dayStartMs + currentTimeOffsetMs);\n      this.props.dataProvider.onTimeChanged(currentSunTime);\n    }\n\n    this.setState({ currentTimeOffsetMs }, () => {\n      const currentTime = new Date().getTime();\n      this._timeLastCycle = currentTime;\n      const percentComplete = (currentTimeOffsetMs - this.state.sunRiseOffsetMs) / this.state.sunDeltaMs;\n      this._totalPlayTime = percentComplete * this.state.adjustedDuration;\n    });\n  }\n\n  private _onUpdate = (values: ReadonlyArray<number>) => {\n    if (!this.state.isPlaying)\n      this.processSunTimeChange(values[0]);\n  };\n\n  private _onChange = (values: ReadonlyArray<number>) => {\n    if (!this.state.isPlaying)\n      this.processSunTimeChange(values[0]);\n  };\n\n  private _onSpeedChange = (value: number) => {\n    const adjustedDuration = this.state.duration / value;\n    this.setState({ speed: value, adjustedDuration });\n  };\n\n  private _onToggleLoop = () => {\n    this.setState((prevState) => ({ loop: !prevState.loop }));\n  };\n\n  private _formatTime = (millisec: number) => {\n    const date = new Date(millisec);\n    // convert project date to browser locale date\n    const localTime = adjustDateToTimezone(date, this.props.dataProvider.timeZoneOffset * 60);\n    let hours = localTime.getHours();\n    const minutes = addZero(date.getMinutes());\n    const abbrev = (hours < 12) ? this._amLabel : (hours === 24) ? this._amLabel : this._pmLabel;\n    hours = (hours > 12) ? hours - 12 : hours;\n    return `${hours}:${minutes} ${abbrev}`;\n  };\n\n  private _onPresetColorPick = (shadowColor: ColorDef) => {\n    this.setState({ shadowColor }, () => this.props.dataProvider.shadowColor = shadowColor);\n  };\n\n  private _handleHueOrSaturationChange = (hueOrSaturation: HSVColor) => {\n    if (hueOrSaturation.s === 0)  // for a ColorDef to be created from hsv s can't be 0\n      hueOrSaturation = hueOrSaturation.clone(undefined, 0.5);\n\n    const shadowColor = hueOrSaturation.toColorDef();\n    this.setState({ shadowColor }, () => this.props.dataProvider.shadowColor = shadowColor);\n  };\n\n  public getLocalTime(ticks: number): Date {\n    const projectTime = new Date(ticks);\n    // convert project date to browser locale date\n    return adjustDateToTimezone(projectTime, this.props.dataProvider.timeZoneOffset * 60);\n  }\n\n  public override render() {\n    const { dataProvider } = this.props;\n    const { speed, loop, currentTimeOffsetMs,\n      sunRiseOffsetMs, sunSetOffsetMs } = this.state;\n    const localTime = this.getLocalTime(this.state.dayStartMs + this.state.currentTimeOffsetMs);\n    const formattedTime = this._formatTime(dataProvider.dayStartMs + currentTimeOffsetMs);\n    const formattedDate = `${this._months[localTime.getMonth()]}, ${localTime.getDate()}`;\n\n    const colorSwatchStyle: React.CSSProperties = {\n      width: `100%`,\n      height: `100%`,\n    };\n\n    return (\n      <div className={\"solar-timeline-wrapper\"} >\n        <div className=\"header\">\n          <PlayButton tooltip={this._playLabel} className=\"play-button\" isPlaying={this.state.isPlaying} onPlay={this._onPlay} onPause={this._onPause} />\n          <button data-testid=\"solar-date-time-button\" title={this._dateTimeLabel} className=\"current-date\" ref={(element) => this._datePicker = element} onClick={this._onOpenDayPicker}>\n            <span>{formattedDate}</span>\n            <span>/</span>\n            <span>{formattedTime}</span>\n            <span className=\"icon icon-calendar\" />\n          </button>\n          <Popup style={{ border: \"none\" }} offset={11} target={this._datePicker} isOpen={this.state.isDateOpened} onClose={this._onCloseDayPicker} position={RelativePosition.Top}>\n            <div className=\"components-date-picker-calendar-popup-panel\" data-testid=\"components-date-picker-calendar-popup-panel\">\n              <DatePicker selected={localTime} onDateChange={this._onDayClick} showFocusOutline={false} />\n              <div className=\"time-container\">\n                <BodyText className=\"time-label\">{this._timeLabel}</BodyText>\n                <TimeField time={{ hours: localTime.getHours(), minutes: localTime.getMinutes(), seconds: 0 }} timeDisplay={TimeDisplay.H12MC} onTimeChange={this._onTimeChanged} />\n              </div>\n            </div>\n          </Popup>\n          <Timeline className=\"solar-timeline\"\n            dayStartMs={dataProvider.dayStartMs}\n            sunSetOffsetMs={sunSetOffsetMs}\n            sunRiseOffsetMs={sunRiseOffsetMs}\n            currentTimeOffsetMs={currentTimeOffsetMs}\n            onChange={this._onChange}\n            onUpdate={this._onUpdate}\n            formatTime={this._formatTime}\n            isPlaying={this.state.isPlaying}\n          />\n          <div className=\"speed-container\">\n            <span title={this._speedLabel}>{speed}x</span>\n            <SpeedTimeline className=\"speed\" onChange={this._onSpeedChange} speed={this.state.speed} />\n          </div>\n          {/* eslint-disable-next-line jsx-a11y/click-events-have-key-events */}\n          <span title={this._loopLabel}\n            className={classnames(\"icon\", \"icon-media-controls-loop\", !loop && \"no-loop-playback\", loop && \"loop-playback\")} onClick={this._onToggleLoop}\n            role=\"button\" tabIndex={-1}\n          ></span>\n          <button data-testid=\"shadow-settings-button\" title={this._settingLabel} className=\"shadow-settings-button\" ref={(element) => this._settings = element} onClick={this._onOpenSettingsPopup}>\n            <span className=\"icon icon-settings\" />\n          </button>\n          <Popup className=\"shadow-settings-popup\" target={this._settings} offset={11} isOpen={this.state.isSettingsOpened} onClose={this._onCloseSettingsPopup} position={RelativePosition.Top}>\n            <div className=\"shadow-settings-popup-container\" >\n              <div className=\"shadow-settings-header\">{this._settingsPopupTitle}</div>\n              <div className=\"shadow-settings-color\">\n                <div className=\"shadow-settings-color-top\">\n                  <SaturationPicker hsv={this.state.shadowColor.toHSV()} onSaturationChange={this._handleHueOrSaturationChange} />\n                </div>\n                <div className=\"shadow-settings-color-bottom\">\n                  <div className=\"shadow-settings-color-bottom-left\">\n                    <HueSlider hsv={this.state.shadowColor.toHSV()} onHueChange={this._handleHueOrSaturationChange} isHorizontal={true} />\n                  </div>\n                  <div className=\"shadow-settings-color-bottom-right\">\n                    <ColorSwatch style={colorSwatchStyle} colorDef={this.state.shadowColor} round={false} />\n                  </div>\n                </div>\n              </div>\n              <div className=\"shadow-settings-color-presets\">\n                <ColorSwatch colorDef={this._presetColors[0]} round={false} onColorPick={this._onPresetColorPick} />\n                <ColorSwatch colorDef={this._presetColors[1]} round={false} onColorPick={this._onPresetColorPick} />\n                <ColorSwatch colorDef={this._presetColors[2]} round={false} onColorPick={this._onPresetColorPick} />\n                <ColorSwatch colorDef={this._presetColors[3]} round={false} onColorPick={this._onPresetColorPick} />\n                <ColorSwatch colorDef={this._presetColors[4]} round={false} onColorPick={this._onPresetColorPick} />\n                <ColorSwatch colorDef={this._presetColors[5]} round={false} onColorPick={this._onPresetColorPick} />\n                <ColorSwatch colorDef={this._presetColors[6]} round={false} onColorPick={this._onPresetColorPick} />\n                <ColorSwatch colorDef={this._presetColors[7]} round={false} onColorPick={this._onPresetColorPick} />\n              </div>\n            </div>\n          </Popup>\n        </div>\n      </div>\n    );\n  }\n}\n"]}