@insync-stageplayer/annotations 0.4.7 → 0.4.8

package/lib/components/MeasurementDisplayEditor.d.ts

@@ -1,20 +1,20 @@
-import React from "react";
-import { MeasurementDisplay } from "../redux/measurementDisplays.slice";
-declare module MeasurementDisplayEditor {
-    type SharedProps = Omit<React.HTMLAttributes<HTMLFormElement>, "onChange"> & {
-        onClose: () => void;
-    };
-    export type ComponentProps = SharedProps & {
-        display?: MeasurementDisplay;
-        onChange: (update: Partial<MeasurementDisplay>) => void;
-        onDelete: () => void;
-    };
-    export const Component: React.FC<ComponentProps>;
-    type ContainerProps = SharedProps & {
-        id: string;
-    };
-    export const Container: React.FC<ContainerProps>;
-    export {};
-}
-export default MeasurementDisplayEditor;
+import React from "react";
+import { MeasurementDisplay } from "../redux/measurementDisplays.slice";
+declare module MeasurementDisplayEditor {
+    type SharedProps = Omit<React.HTMLAttributes<HTMLFormElement>, "onChange"> & {
+        onClose: () => void;
+    };
+    export type ComponentProps = SharedProps & {
+        display?: MeasurementDisplay;
+        onChange: (update: Partial<MeasurementDisplay>) => void;
+        onDelete: () => void;
+    };
+    export const Component: React.FC<ComponentProps>;
+    type ContainerProps = SharedProps & {
+        id: string;
+    };
+    export const Container: React.FC<ContainerProps>;
+    export {};
+}
+export default MeasurementDisplayEditor;
 //# sourceMappingURL=MeasurementDisplayEditor.d.ts.map

package/lib/components/MeasurementDisplayEditor.js

@@ -1,137 +1,137 @@
-var __rest = (this && this.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-};
-import React, { useContext } from "react";
-import { useDispatch, useSelector } from "react-redux";
-import { AnnotationsModuleContext } from "./AnnotationsModuleProvider";
-import { updateMeasurementDisplay, deleteMeasurementDisplay, } from "../redux/measurementDisplays.slice";
-import { useTheme } from "@insync-stageplayer/ui-components";
-import cx from "classnames";
-var MeasurementDisplayEditor;
-(function (MeasurementDisplayEditor) {
-    MeasurementDisplayEditor.Component = (props) => {
-        const theme = useTheme();
-        const { onChange, onClose, onDelete, display, className, style } = props;
-        return (React.createElement("form", { className: className, style: style, onSubmit: (e) => {
-                e.preventDefault();
-                return false;
-            } },
-            React.createElement("div", { className: cx("card", theme.name === "dark" && "bg-dark", "h-100", "flex-column") },
-                React.createElement("div", { className: "card-body" },
-                    React.createElement("div", { className: "row" },
-                        React.createElement("div", { className: "col" },
-                            React.createElement("div", { className: "form-check" },
-                                React.createElement("input", { type: "checkbox", id: "measurementDisplayShowSignal", className: "form-check-input", name: "showSignal", checked: display === null || display === void 0 ? void 0 : display.showSignal, onChange: (e) => {
-                                        onChange({
-                                            showSignal: e.target.checked,
-                                        });
-                                    } }),
-                                React.createElement("label", { htmlFor: "measurementDisplayShowSignal", className: "form-check-label" }, "Show Signal Unit"))),
-                        React.createElement("div", { className: "col" },
-                            React.createElement("div", { className: "form-check" },
-                                React.createElement("input", { type: "checkbox", id: "measurementDisplayShowSigColor", className: "form-check-input", name: "showSigColor", checked: display === null || display === void 0 ? void 0 : display.showSigColor, onChange: (e) => {
-                                        onChange({
-                                            showSigColor: e.target.checked,
-                                        });
-                                    } }),
-                                React.createElement("label", { htmlFor: "measurementDisplayShowSigColor", className: "form-check-label" }, "Show Signal Color")))),
-                    React.createElement("div", { className: "row" },
-                        React.createElement("div", { className: "col" },
-                            React.createElement("div", { className: "form-check" },
-                                React.createElement("input", { type: "checkbox", id: "measurementDisplayShowX", className: "form-check-input", name: "showX", checked: display === null || display === void 0 ? void 0 : display.showX, onChange: (e) => {
-                                        onChange({
-                                            showX: e.target.checked,
-                                        });
-                                    } }),
-                                React.createElement("label", { htmlFor: "measurementDisplayShowX", className: "form-check-label" }, "Show X")))),
-                    React.createElement("div", { className: "row" },
-                        React.createElement("div", { className: "col" },
-                            React.createElement("label", { htmlFor: "measurementDisplayDecimalsX" }, "Decimals X"),
-                            React.createElement("input", { id: "measurementDisplayDecimalsX", type: "number", name: "decimalsX", className: "form-control", min: 0, max: 100, disabled: !(display === null || display === void 0 ? void 0 : display.showX), value: (display === null || display === void 0 ? void 0 : display.decimalsX) || "", onChange: (e) => {
-                                    onChange({
-                                        decimalsX: Math.min(100, Math.max(0, parseInt(e.target.value))),
-                                    });
-                                } }))),
-                    React.createElement("div", { className: "row" },
-                        React.createElement("div", { className: "col" },
-                            React.createElement("label", { htmlFor: "measurementDisplayPadXTo" }, "Pad X to"),
-                            React.createElement("input", { id: "measurementDisplayPadXTo", type: "number", className: "form-control", min: 0, max: 100, disabled: !(display === null || display === void 0 ? void 0 : display.showX), name: "padXTo", value: (display === null || display === void 0 ? void 0 : display.padXTo) || "", onChange: (e) => {
-                                    onChange({
-                                        padXTo: Math.max(0, parseInt(e.target.value)),
-                                    });
-                                } })),
-                        React.createElement("div", { className: "col" },
-                            React.createElement("label", { htmlFor: "measurementDisplayPadXChar" }, "Pad X character"),
-                            React.createElement("input", { type: "text", id: "measurementDisplayPadXChar", className: "form-control", name: "padXChar", maxLength: 1, disabled: !(display === null || display === void 0 ? void 0 : display.showX), value: !(display === null || display === void 0 ? void 0 : display.padXChar) || display.padXChar === " "
-                                    ? ""
-                                    : display.padXChar, onChange: (e) => {
-                                    onChange({
-                                        padXChar: e.target.value || " ",
-                                    });
-                                } }))))),
-            React.createElement("div", { className: cx("card", theme.name === "dark" && "bg-dark", "h-100", "flex-column") },
-                React.createElement("div", { className: "card-body" },
-                    React.createElement("div", { className: "row" },
-                        React.createElement("div", { className: "col" },
-                            React.createElement("div", { className: "form-check" },
-                                React.createElement("input", { id: "measurementDisplayPadTo", className: "form-check-input", type: "checkbox", name: "showY", checked: display === null || display === void 0 ? void 0 : display.showY, onChange: (e) => {
-                                        onChange({
-                                            showY: e.target.checked,
-                                        });
-                                    } }),
-                                React.createElement("label", { htmlFor: "measurementDisplayPadTo", className: "form-check-label" }, "Show Y")))),
-                    React.createElement("div", { className: "row" },
-                        React.createElement("div", { className: "col" },
-                            React.createElement("label", { htmlFor: "measurementDisplayDecimals" }, "Decimals Y"),
-                            React.createElement("input", { type: "number", className: "form-control", id: "measurementDisplayDecimals", disabled: !(display === null || display === void 0 ? void 0 : display.showY), name: "decimalsY", min: 0, max: 100, value: (display === null || display === void 0 ? void 0 : display.decimalsY) || "", onChange: (e) => {
-                                    onChange({
-                                        decimalsY: Math.min(100, Math.max(0, parseInt(e.target.value))),
-                                    });
-                                } }))),
-                    React.createElement("div", { className: "row" },
-                        React.createElement("div", { className: "col" },
-                            React.createElement("label", { htmlFor: "measurementDisplayPadYTo" }, "Pad Y to"),
-                            React.createElement("input", { id: "measurementDisplayPadYTo", type: "number", className: "form-control", min: 0, max: 100, disabled: !(display === null || display === void 0 ? void 0 : display.showY), name: "padYTo", value: (display === null || display === void 0 ? void 0 : display.padYTo) || "", onChange: (e) => {
-                                    onChange({
-                                        padYTo: Math.max(0, parseInt(e.target.value)),
-                                    });
-                                } })),
-                        React.createElement("div", { className: "col" },
-                            React.createElement("label", { htmlFor: "measurementDisplayPadYChar" }, "Pad Y character"),
-                            React.createElement("input", { type: "text", id: "measurementDisplayPadYChar", className: "form-control", name: "padYChar", maxLength: 1, disabled: !(display === null || display === void 0 ? void 0 : display.showY), value: !(display === null || display === void 0 ? void 0 : display.padYChar) || display.padYChar === " "
-                                    ? ""
-                                    : display.padYChar, onChange: (e) => {
-                                    onChange({
-                                        padYChar: e.target.value || " ",
-                                    });
-                                } }))))),
-            React.createElement("button", { className: "btn btn-primary mr-3", onClick: onClose }, "Ok"),
-            React.createElement("button", { className: "btn btn-danger", onClick: () => {
-                    onDelete();
-                    onClose();
-                } }, "Delete")));
-    };
-    MeasurementDisplayEditor.Container = (props) => {
-        const { id, onClose } = props, rest = __rest(props, ["id", "onClose"]);
-        const dispatch = useDispatch();
-        const { entitiesSelectors } = useContext(AnnotationsModuleContext);
-        const display = useSelector((s) => entitiesSelectors.measurementDisplays.selectById(s, id));
-        const handleChange = (changes) => {
-            dispatch(updateMeasurementDisplay({ id, changes }));
-        };
-        const handleDelete = () => {
-            dispatch(deleteMeasurementDisplay(id));
-        };
-        return (React.createElement(MeasurementDisplayEditor.Component, Object.assign({ display: display, onChange: handleChange, onDelete: handleDelete, onClose: onClose }, rest)));
-    };
-})(MeasurementDisplayEditor || (MeasurementDisplayEditor = {}));
-export default MeasurementDisplayEditor;
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import React, { useContext } from "react";
+import { useDispatch, useSelector } from "react-redux";
+import { AnnotationsModuleContext } from "./AnnotationsModuleProvider";
+import { updateMeasurementDisplay, deleteMeasurementDisplay, } from "../redux/measurementDisplays.slice";
+import { useTheme } from "@insync-stageplayer/ui-components";
+import cx from "classnames";
+var MeasurementDisplayEditor;
+(function (MeasurementDisplayEditor) {
+    MeasurementDisplayEditor.Component = (props) => {
+        const theme = useTheme();
+        const { onChange, onClose, onDelete, display, className, style } = props;
+        return (React.createElement("form", { className: className, style: style, onSubmit: (e) => {
+                e.preventDefault();
+                return false;
+            } },
+            React.createElement("div", { className: cx("card", theme.name === "dark" && "bg-dark", "h-100", "flex-column") },
+                React.createElement("div", { className: "card-body" },
+                    React.createElement("div", { className: "row" },
+                        React.createElement("div", { className: "col" },
+                            React.createElement("div", { className: "form-check" },
+                                React.createElement("input", { type: "checkbox", id: "measurementDisplayShowSignal", className: "form-check-input", name: "showSignal", checked: display === null || display === void 0 ? void 0 : display.showSignal, onChange: (e) => {
+                                        onChange({
+                                            showSignal: e.target.checked,
+                                        });
+                                    } }),
+                                React.createElement("label", { htmlFor: "measurementDisplayShowSignal", className: "form-check-label" }, "Show Signal Unit"))),
+                        React.createElement("div", { className: "col" },
+                            React.createElement("div", { className: "form-check" },
+                                React.createElement("input", { type: "checkbox", id: "measurementDisplayShowSigColor", className: "form-check-input", name: "showSigColor", checked: display === null || display === void 0 ? void 0 : display.showSigColor, onChange: (e) => {
+                                        onChange({
+                                            showSigColor: e.target.checked,
+                                        });
+                                    } }),
+                                React.createElement("label", { htmlFor: "measurementDisplayShowSigColor", className: "form-check-label" }, "Show Signal Color")))),
+                    React.createElement("div", { className: "row" },
+                        React.createElement("div", { className: "col" },
+                            React.createElement("div", { className: "form-check" },
+                                React.createElement("input", { type: "checkbox", id: "measurementDisplayShowX", className: "form-check-input", name: "showX", checked: display === null || display === void 0 ? void 0 : display.showX, onChange: (e) => {
+                                        onChange({
+                                            showX: e.target.checked,
+                                        });
+                                    } }),
+                                React.createElement("label", { htmlFor: "measurementDisplayShowX", className: "form-check-label" }, "Show X")))),
+                    React.createElement("div", { className: "row" },
+                        React.createElement("div", { className: "col" },
+                            React.createElement("label", { htmlFor: "measurementDisplayDecimalsX" }, "Decimals X"),
+                            React.createElement("input", { id: "measurementDisplayDecimalsX", type: "number", name: "decimalsX", className: "form-control", min: 0, max: 100, disabled: !(display === null || display === void 0 ? void 0 : display.showX), value: (display === null || display === void 0 ? void 0 : display.decimalsX) || "", onChange: (e) => {
+                                    onChange({
+                                        decimalsX: Math.min(100, Math.max(0, parseInt(e.target.value))),
+                                    });
+                                } }))),
+                    React.createElement("div", { className: "row" },
+                        React.createElement("div", { className: "col" },
+                            React.createElement("label", { htmlFor: "measurementDisplayPadXTo" }, "Pad X to"),
+                            React.createElement("input", { id: "measurementDisplayPadXTo", type: "number", className: "form-control", min: 0, max: 100, disabled: !(display === null || display === void 0 ? void 0 : display.showX), name: "padXTo", value: (display === null || display === void 0 ? void 0 : display.padXTo) || "", onChange: (e) => {
+                                    onChange({
+                                        padXTo: Math.max(0, parseInt(e.target.value)),
+                                    });
+                                } })),
+                        React.createElement("div", { className: "col" },
+                            React.createElement("label", { htmlFor: "measurementDisplayPadXChar" }, "Pad X character"),
+                            React.createElement("input", { type: "text", id: "measurementDisplayPadXChar", className: "form-control", name: "padXChar", maxLength: 1, disabled: !(display === null || display === void 0 ? void 0 : display.showX), value: !(display === null || display === void 0 ? void 0 : display.padXChar) || display.padXChar === " "
+                                    ? ""
+                                    : display.padXChar, onChange: (e) => {
+                                    onChange({
+                                        padXChar: e.target.value || " ",
+                                    });
+                                } }))))),
+            React.createElement("div", { className: cx("card", theme.name === "dark" && "bg-dark", "h-100", "flex-column") },
+                React.createElement("div", { className: "card-body" },
+                    React.createElement("div", { className: "row" },
+                        React.createElement("div", { className: "col" },
+                            React.createElement("div", { className: "form-check" },
+                                React.createElement("input", { id: "measurementDisplayPadTo", className: "form-check-input", type: "checkbox", name: "showY", checked: display === null || display === void 0 ? void 0 : display.showY, onChange: (e) => {
+                                        onChange({
+                                            showY: e.target.checked,
+                                        });
+                                    } }),
+                                React.createElement("label", { htmlFor: "measurementDisplayPadTo", className: "form-check-label" }, "Show Y")))),
+                    React.createElement("div", { className: "row" },
+                        React.createElement("div", { className: "col" },
+                            React.createElement("label", { htmlFor: "measurementDisplayDecimals" }, "Decimals Y"),
+                            React.createElement("input", { type: "number", className: "form-control", id: "measurementDisplayDecimals", disabled: !(display === null || display === void 0 ? void 0 : display.showY), name: "decimalsY", min: 0, max: 100, value: (display === null || display === void 0 ? void 0 : display.decimalsY) || "", onChange: (e) => {
+                                    onChange({
+                                        decimalsY: Math.min(100, Math.max(0, parseInt(e.target.value))),
+                                    });
+                                } }))),
+                    React.createElement("div", { className: "row" },
+                        React.createElement("div", { className: "col" },
+                            React.createElement("label", { htmlFor: "measurementDisplayPadYTo" }, "Pad Y to"),
+                            React.createElement("input", { id: "measurementDisplayPadYTo", type: "number", className: "form-control", min: 0, max: 100, disabled: !(display === null || display === void 0 ? void 0 : display.showY), name: "padYTo", value: (display === null || display === void 0 ? void 0 : display.padYTo) || "", onChange: (e) => {
+                                    onChange({
+                                        padYTo: Math.max(0, parseInt(e.target.value)),
+                                    });
+                                } })),
+                        React.createElement("div", { className: "col" },
+                            React.createElement("label", { htmlFor: "measurementDisplayPadYChar" }, "Pad Y character"),
+                            React.createElement("input", { type: "text", id: "measurementDisplayPadYChar", className: "form-control", name: "padYChar", maxLength: 1, disabled: !(display === null || display === void 0 ? void 0 : display.showY), value: !(display === null || display === void 0 ? void 0 : display.padYChar) || display.padYChar === " "
+                                    ? ""
+                                    : display.padYChar, onChange: (e) => {
+                                    onChange({
+                                        padYChar: e.target.value || " ",
+                                    });
+                                } }))))),
+            React.createElement("button", { className: "btn btn-primary mr-3", onClick: onClose }, "Ok"),
+            React.createElement("button", { className: "btn btn-danger", onClick: () => {
+                    onDelete();
+                    onClose();
+                } }, "Delete")));
+    };
+    MeasurementDisplayEditor.Container = (props) => {
+        const { id, onClose } = props, rest = __rest(props, ["id", "onClose"]);
+        const dispatch = useDispatch();
+        const { entitiesSelectors } = useContext(AnnotationsModuleContext);
+        const display = useSelector((s) => entitiesSelectors.measurementDisplays.selectById(s, id));
+        const handleChange = (changes) => {
+            dispatch(updateMeasurementDisplay({ id, changes }));
+        };
+        const handleDelete = () => {
+            dispatch(deleteMeasurementDisplay(id));
+        };
+        return (React.createElement(MeasurementDisplayEditor.Component, Object.assign({ display: display, onChange: handleChange, onDelete: handleDelete, onClose: onClose }, rest)));
+    };
+})(MeasurementDisplayEditor || (MeasurementDisplayEditor = {}));
+export default MeasurementDisplayEditor;
 //# sourceMappingURL=MeasurementDisplayEditor.js.map

package/lib/components/MeasurementDisplayElement.d.ts

@@ -1,19 +1,19 @@
-import React from "react";
-interface MeasurementDisplayElementProps extends React.HTMLAttributes<HTMLSpanElement> {
-    editable: boolean;
-    xRange: {
-        start: number;
-        duration: number;
-    };
-}
-/**
- * A component that displays the current value of a measurement.
- */
-export declare const MeasurementDisplayElement: React.ForwardRefExoticComponent<MeasurementDisplayElementProps & {
-    /**
-     * The id of the measurement display being edited.
-     */
-    id: string;
-} & React.RefAttributes<HTMLSpanElement>>;
-export default MeasurementDisplayElement;
+import React from "react";
+interface MeasurementDisplayElementProps extends React.HTMLAttributes<HTMLSpanElement> {
+    editable: boolean;
+    xRange: {
+        start: number;
+        duration: number;
+    };
+}
+/**
+ * A component that displays the current value of a measurement.
+ */
+export declare const MeasurementDisplayElement: React.ForwardRefExoticComponent<MeasurementDisplayElementProps & {
+    /**
+     * The id of the measurement display being edited.
+     */
+    id: string;
+} & React.RefAttributes<HTMLSpanElement>>;
+export default MeasurementDisplayElement;
 //# sourceMappingURL=MeasurementDisplayElement.d.ts.map

package/lib/components/MeasurementDisplayElement.js

@@ -1,98 +1,98 @@
-var __rest = (this && this.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-};
-import { useMeasurement } from "@insync-stageplayer/measurements";
-import React, { useContext, useEffect } from "react";
-import { useSelector } from "react-redux";
-import { formatNumber } from "../formatNumber";
-import { MeasurementDisplayDataContext } from "./MeasurementDisplayDataContext";
-import { AnnotationsModuleContext } from "./AnnotationsModuleProvider";
-import { useTheme } from "@insync-stageplayer/ui-components";
-/**
- * A hook that registers the consuming component in the MeasurementDisplayDataContext.
- * @param measurementId
- * @returns
- */
-const useMeasurementDisplayData = (measurementId) => {
-    const { register, data: allData, loading, error, } = useContext(MeasurementDisplayDataContext);
-    useEffect(() => {
-        if (!measurementId)
-            return;
-        const unregister = register(measurementId);
-        return () => {
-            unregister();
-        };
-    }, [register, measurementId]);
-    const data = measurementId &&
-        allData &&
-        allData[measurementId] &&
-        allData[measurementId][0]
-        ? {
-            x: allData[measurementId][0][0],
-            y: allData[measurementId][0][1],
-        }
-        : undefined;
-    return {
-        loading,
-        error,
-        data,
-    };
-};
-/**
- * A component that displays the current value of a measurement.
- */
-export const MeasurementDisplayElement = React.forwardRef((props, ref) => {
-    const { id, editable, children, xRange } = props, rest = __rest(props, ["id", "editable", "children", "xRange"]);
-    const theme = useTheme();
-    const context = useContext(AnnotationsModuleContext);
-    const display = useSelector((s) => context.entitiesSelectors.measurementDisplays.selectById(s, id));
-    const { measurement } = useMeasurement(display === null || display === void 0 ? void 0 : display.measurementId);
-    const { data } = useMeasurementDisplayData(measurement === null || measurement === void 0 ? void 0 : measurement.id);
-    const padXStart = Math.max(3, (display === null || display === void 0 ? void 0 : display.padXTo) || 0);
-    const padYStart = Math.max(3, (display === null || display === void 0 ? void 0 : display.padYTo) || 0);
-    const decimalsX = (display === null || display === void 0 ? void 0 : display.decimalsX) !== undefined ? display.decimalsX : 0;
-    const decimalsY = (display === null || display === void 0 ? void 0 : display.decimalsY) !== undefined ? display.decimalsY : 0;
-    const xValue = (display === null || display === void 0 ? void 0 : display.showX) && (data === null || data === void 0 ? void 0 : data.x) !== "NaN"
-        ? formatNumber({
-            value: (data === null || data === void 0 ? void 0 : data.x) && data.x > 0 ? data.x / 1000 / 1000 : 0,
-            decimals: decimalsX,
-            padStart: padXStart,
-            padChar: display.padXChar,
-        })
-        : undefined;
-    const yValue = (display === null || display === void 0 ? void 0 : display.showY) && (data === null || data === void 0 ? void 0 : data.y) !== "NaN"
-        ? formatNumber({
-            value: data === null || data === void 0 ? void 0 : data.y,
-            decimals: decimalsY,
-            padStart: padYStart,
-            padChar: display.padYChar,
-            unit: (display === null || display === void 0 ? void 0 : display.showSignal) ? measurement === null || measurement === void 0 ? void 0 : measurement.unit : "",
-        })
-        : undefined;
-    const formattedString = `${xValue ? `${xValue}` : ""}${xValue && yValue ? ":" : ""}${yValue ? yValue : ""}`;
-    return (React.createElement("span", Object.assign({ className: "badge", role: "button", ref: ref }, rest, { style: {
-            backgroundColor: "transparent",
-            cursor: editable ? "pointer" : "text",
-            fontFamily: "monospace",
-            fontSize: "16px",
-            fontWeight: 400,
-            padding: ".2em",
-            margin: ".1em",
-            whiteSpace: "pre",
-            color: "white",
-            border: (display === null || display === void 0 ? void 0 : display.showSigColor) ? "1px solid" : "0px solid",
-            borderColor: (display === null || display === void 0 ? void 0 : display.showSigColor) ? measurement === null || measurement === void 0 ? void 0 : measurement.color : "unset",
-        } }),
-        formattedString,
-        children));
-});
-export default MeasurementDisplayElement;
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import { useMeasurement } from "@insync-stageplayer/measurements";
+import React, { useContext, useEffect } from "react";
+import { useSelector } from "react-redux";
+import { formatNumber } from "../formatNumber";
+import { MeasurementDisplayDataContext } from "./MeasurementDisplayDataContext";
+import { AnnotationsModuleContext } from "./AnnotationsModuleProvider";
+import { useTheme } from "@insync-stageplayer/ui-components";
+/**
+ * A hook that registers the consuming component in the MeasurementDisplayDataContext.
+ * @param measurementId
+ * @returns
+ */
+const useMeasurementDisplayData = (measurementId) => {
+    const { register, data: allData, loading, error, } = useContext(MeasurementDisplayDataContext);
+    useEffect(() => {
+        if (!measurementId)
+            return;
+        const unregister = register(measurementId);
+        return () => {
+            unregister();
+        };
+    }, [register, measurementId]);
+    const data = measurementId &&
+        allData &&
+        allData[measurementId] &&
+        allData[measurementId][0]
+        ? {
+            x: allData[measurementId][0][0],
+            y: allData[measurementId][0][1],
+        }
+        : undefined;
+    return {
+        loading,
+        error,
+        data,
+    };
+};
+/**
+ * A component that displays the current value of a measurement.
+ */
+export const MeasurementDisplayElement = React.forwardRef((props, ref) => {
+    const { id, editable, children, xRange } = props, rest = __rest(props, ["id", "editable", "children", "xRange"]);
+    const theme = useTheme();
+    const context = useContext(AnnotationsModuleContext);
+    const display = useSelector((s) => context.entitiesSelectors.measurementDisplays.selectById(s, id));
+    const { measurement } = useMeasurement(display === null || display === void 0 ? void 0 : display.measurementId);
+    const { data } = useMeasurementDisplayData(measurement === null || measurement === void 0 ? void 0 : measurement.id);
+    const padXStart = Math.max(3, (display === null || display === void 0 ? void 0 : display.padXTo) || 0);
+    const padYStart = Math.max(3, (display === null || display === void 0 ? void 0 : display.padYTo) || 0);
+    const decimalsX = (display === null || display === void 0 ? void 0 : display.decimalsX) !== undefined ? display.decimalsX : 0;
+    const decimalsY = (display === null || display === void 0 ? void 0 : display.decimalsY) !== undefined ? display.decimalsY : 0;
+    const xValue = (display === null || display === void 0 ? void 0 : display.showX) && (data === null || data === void 0 ? void 0 : data.x) !== "NaN"
+        ? formatNumber({
+            value: (data === null || data === void 0 ? void 0 : data.x) && data.x > 0 ? data.x / 1000 / 1000 : 0,
+            decimals: decimalsX,
+            padStart: padXStart,
+            padChar: display.padXChar,
+        })
+        : undefined;
+    const yValue = (display === null || display === void 0 ? void 0 : display.showY) && (data === null || data === void 0 ? void 0 : data.y) !== "NaN"
+        ? formatNumber({
+            value: data === null || data === void 0 ? void 0 : data.y,
+            decimals: decimalsY,
+            padStart: padYStart,
+            padChar: display.padYChar,
+            unit: (display === null || display === void 0 ? void 0 : display.showSignal) ? measurement === null || measurement === void 0 ? void 0 : measurement.unit : "",
+        })
+        : undefined;
+    const formattedString = `${xValue ? `${xValue}` : ""}${xValue && yValue ? ":" : ""}${yValue ? yValue : ""}`;
+    return (React.createElement("span", Object.assign({ className: "badge", role: "button", ref: ref }, rest, { style: {
+            backgroundColor: "transparent",
+            cursor: editable ? "pointer" : "text",
+            fontFamily: "monospace",
+            fontSize: "16px",
+            fontWeight: 400,
+            padding: ".2em",
+            margin: ".1em",
+            whiteSpace: "pre",
+            color: "white",
+            border: (display === null || display === void 0 ? void 0 : display.showSigColor) ? "1px solid" : "0px solid",
+            borderColor: (display === null || display === void 0 ? void 0 : display.showSigColor) ? measurement === null || measurement === void 0 ? void 0 : measurement.color : "unset",
+        } }),
+        formattedString,
+        children));
+});
+export default MeasurementDisplayElement;
 //# sourceMappingURL=MeasurementDisplayElement.js.map

package/lib/components/ModalAnnotationEditor.d.ts

@@ -1,13 +1,13 @@
-import React, { CSSProperties } from "react";
-export declare type ModalAnnotationEditorProps = {
-    title: string;
-    className?: string;
-    style?: CSSProperties;
-};
-/**
- * A modal wrapper around AnnotationEditor.
- * @param props
- * @returns
- */
-export declare const ModalAnnotationEditor: React.FC<ModalAnnotationEditorProps>;
+import React, { CSSProperties } from "react";
+export declare type ModalAnnotationEditorProps = {
+    title: string;
+    className?: string;
+    style?: CSSProperties;
+};
+/**
+ * A modal wrapper around AnnotationEditor.
+ * @param props
+ * @returns
+ */
+export declare const ModalAnnotationEditor: React.FC<ModalAnnotationEditorProps>;
 //# sourceMappingURL=ModalAnnotationEditor.d.ts.map