@insync-stageplayer/annotations 0.4.6 → 0.4.7

package/lib/components/MeasurementDisplayDataProvider.js

@@ -1,46 +1,46 @@
-import { useTimedMeasurementData } from "@insync-stageplayer/measurements";
-import React, { useState, useCallback, useMemo } from "react";
-import { MeasurementDisplayDataContext } from "./MeasurementDisplayDataContext";
-import { createId } from "../util";
-/**
- * Provides data for measurement displays. Keeps track of all registered measurement displays inside annotations.
- * @param props
- * @returns
- */
-export const MeasurementDisplayDataProvider = ({ timer, children }) => {
-    /**
-     * Keeps tracks of measurements being used by displays.
-     */
-    const [registered, setRegistered] = useState({});
-    /**
-     * A function to register a MeasurementDisplay. Returns a function to unregister it.
-     * The returned function should be used in the consuming component when unmounting.
-     */
-    const register = useCallback((measurementId) => {
-        let registrationId = createId();
-        setRegistered((registered) => {
-            return Object.assign(Object.assign({}, registered), { [registrationId]: measurementId });
-        });
-        return () => {
-            setRegistered((registered) => {
-                let newRegistered = Object.assign({}, registered);
-                delete newRegistered[registrationId];
-                return newRegistered;
-            });
-        };
-    }, []);
-    /**
-     * The list of unique measurement ids.
-     */
-    const uniqRegistered = useMemo(() => {
-        return [...new Set(Object.values(registered))];
-    }, [registered]);
-    const { data, error, loading } = useTimedMeasurementData({
-        timer,
-        measurements: uniqRegistered,
-        rows: 1,
-        unit: "MICRO",
-    });
-    return (React.createElement(MeasurementDisplayDataContext.Provider, { value: { register, data: data === null || data === void 0 ? void 0 : data.measurementData, error, loading } }, children));
-};
+import { useTimedMeasurementData } from "@insync-stageplayer/measurements";
+import React, { useState, useCallback, useMemo } from "react";
+import { MeasurementDisplayDataContext } from "./MeasurementDisplayDataContext";
+import { createId } from "../util";
+/**
+ * Provides data for measurement displays. Keeps track of all registered measurement displays inside annotations.
+ * @param props
+ * @returns
+ */
+export const MeasurementDisplayDataProvider = ({ timer, children }) => {
+    /**
+     * Keeps tracks of measurements being used by displays.
+     */
+    const [registered, setRegistered] = useState({});
+    /**
+     * A function to register a MeasurementDisplay. Returns a function to unregister it.
+     * The returned function should be used in the consuming component when unmounting.
+     */
+    const register = useCallback((measurementId) => {
+        let registrationId = createId();
+        setRegistered((registered) => {
+            return Object.assign(Object.assign({}, registered), { [registrationId]: measurementId });
+        });
+        return () => {
+            setRegistered((registered) => {
+                let newRegistered = Object.assign({}, registered);
+                delete newRegistered[registrationId];
+                return newRegistered;
+            });
+        };
+    }, []);
+    /**
+     * The list of unique measurement ids.
+     */
+    const uniqRegistered = useMemo(() => {
+        return [...new Set(Object.values(registered))];
+    }, [registered]);
+    const { data, error, loading } = useTimedMeasurementData({
+        timer,
+        measurements: uniqRegistered,
+        rows: 1,
+        unit: "MICRO",
+    });
+    return (React.createElement(MeasurementDisplayDataContext.Provider, { value: { register, data: data === null || data === void 0 ? void 0 : data.measurementData, error, loading } }, children));
+};
 //# sourceMappingURL=MeasurementDisplayDataProvider.js.map

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