@itwin/imodel-components-react 4.0.0-dev.11 → 4.0.0-dev.13

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

@@ -1,403 +1,403 @@
-/*---------------------------------------------------------------------------------------------
-* 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, Text, Tooltip } from "@itwin/itwinui-react";
-import { ColorByName, ColorDef } from "@itwin/core-common";
-import { RelativePosition, TimeDisplay } from "@itwin/appui-abstract";
-import { Icon, 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";
-import { SvgCalendar, SvgLoop, SvgSettings } from "@itwin/itwinui-icons-react";
-// 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" },
-                        React.createElement(Icon, { iconSpec: React.createElement(SvgCalendar, null) }))),
-                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(Text, { variant: "body", 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", !loop && "no-loop-playback", loop && "loop-playback"), onClick: this._onToggleLoop, role: "button", tabIndex: -1 },
-                    React.createElement(Icon, { iconSpec: React.createElement(SvgLoop, null) })),
-                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" },
-                        React.createElement(Icon, { iconSpec: React.createElement(SvgSettings, null) }))),
-                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 })))))));
-    }
-}
+/*---------------------------------------------------------------------------------------------
+* 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, Text, Tooltip } from "@itwin/itwinui-react";
+import { ColorByName, ColorDef } from "@itwin/core-common";
+import { RelativePosition, TimeDisplay } from "@itwin/appui-abstract";
+import { Icon, 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";
+import { SvgCalendar, SvgLoop, SvgSettings } from "@itwin/itwinui-icons-react";
+// 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" },
+                        React.createElement(Icon, { iconSpec: React.createElement(SvgCalendar, null) }))),
+                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(Text, { variant: "body", 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", !loop && "no-loop-playback", loop && "loop-playback"), onClick: this._onToggleLoop, role: "button", tabIndex: -1 },
+                    React.createElement(Icon, { iconSpec: React.createElement(SvgLoop, null) })),
+                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" },
+                        React.createElement(Icon, { iconSpec: React.createElement(SvgSettings, null) }))),
+                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