@insync-stageplayer/annotations 0.5.34 → 0.5.35-beta.1

package/lib/components/AnnotationContent.d.ts

@@ -1,38 +1,38 @@
-import React from "react";
-import { Node } from "slate";
-import { RenderElementProps, ReactEditor } from "slate-react";
-export interface ContentElementRenderer extends RenderElementProps {
-    editable: boolean;
-}
-/**
- * Keys represent element type strings
- */
-export declare type ContentElementMap = {
-    [key: string]: {
-        /**
-         * Is element a void element (https://docs.slatejs.org/concepts/02-nodes#voids)
-         */
-        isVoid: boolean;
-        /**
-         * Is element an inline element (https://docs.slatejs.org/concepts/02-nodes#blocks-vs-inlines)
-         */
-        inline: boolean;
-        /**
-         * Renders JSX output for this element
-         */
-        renderer: <T extends ContentElementRenderer>(props: T) => JSX.Element;
-    };
-};
-export interface AnnotationContentProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "onChange"> {
-    editable?: boolean;
-    content: Node[] | undefined;
-    onChange?: (newContent: Node[]) => void;
-    editorRef?: React.RefObject<ReactEditor>;
-    elements: ContentElementMap;
-}
-/**
- * Component that renders annotation content using slate.js.
- * @param props
- */
-export declare const AnnotationContent: React.FC<AnnotationContentProps>;
+import React from "react";
+import { Node } from "slate";
+import { RenderElementProps, ReactEditor } from "slate-react";
+export interface ContentElementRenderer extends RenderElementProps {
+    editable: boolean;
+}
+/**
+ * Keys represent element type strings
+ */
+export declare type ContentElementMap = {
+    [key: string]: {
+        /**
+         * Is element a void element (https://docs.slatejs.org/concepts/02-nodes#voids)
+         */
+        isVoid: boolean;
+        /**
+         * Is element an inline element (https://docs.slatejs.org/concepts/02-nodes#blocks-vs-inlines)
+         */
+        inline: boolean;
+        /**
+         * Renders JSX output for this element
+         */
+        renderer: <T extends ContentElementRenderer>(props: T) => JSX.Element;
+    };
+};
+export interface AnnotationContentProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "onChange"> {
+    editable?: boolean;
+    content: Node[] | undefined;
+    onChange?: (newContent: Node[]) => void;
+    editorRef?: React.RefObject<ReactEditor>;
+    elements: ContentElementMap;
+}
+/**
+ * Component that renders annotation content using slate.js.
+ * @param props
+ */
+export declare const AnnotationContent: React.FC<AnnotationContentProps>;
 //# sourceMappingURL=AnnotationContent.d.ts.map

package/lib/components/AnnotationContent.js

@@ -1,19 +1,19 @@
-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, { useMemo, useCallback } from "react";
-import { createEditor } from "slate";
-import { styled, css } from "@insync-stageplayer/ui-components";
-import { withReact, Slate, Editable, } from "slate-react";
-const emptyContent = [{ type: "paragraph", children: [{ text: "" }] }];
+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, { useMemo, useCallback } from "react";
+import { createEditor } from "slate";
+import { styled, css } from "@insync-stageplayer/ui-components";
+import { withReact, Slate, Editable, } from "slate-react";
+const emptyContent = [{ type: "paragraph", children: [{ text: "" }] }];
 const StyledEditable = styled(Editable) `
   height: 100%;
   width: 100%;
@@ -24,7 +24,7 @@ const StyledEditable = styled(Editable) `
   /**
    * Ugly hack to overwrite the default width of 0, which messes up the width in non-editing mode.
    */
-  ${(props) => props.readOnly &&
+  ${(props) => props.readOnly &&
     css `
       [data-slate-leaf="true"] {
         > span {
@@ -32,46 +32,46 @@ const StyledEditable = styled(Editable) `
         }
       }
     `}
-`;
-/**
- * Higher order function to add custom elements to a slate editor through a ContentElementMap.
- * @param elements
- */
-const withElements = (elements = {}) => (editor) => {
-    const { isInline, isVoid } = editor;
-    editor.isInline = (element) => {
-        var _a;
-        return ((typeof element.type === "string" && ((_a = elements[element.type]) === null || _a === void 0 ? void 0 : _a.inline)) ||
-            isInline(element));
-    };
-    editor.isVoid = (element) => {
-        var _a;
-        return ((typeof element.type === "string" && ((_a = elements[element.type]) === null || _a === void 0 ? void 0 : _a.isVoid)) ||
-            isVoid(element));
-    };
-    return editor;
-};
-/**
- * Component that renders annotation content using slate.js.
- * @param props
- */
-export const AnnotationContent = (props) => {
-    const { content = emptyContent, onChange = () => { }, editable = false, elements, editorRef } = props, rest = __rest(props, ["content", "onChange", "editable", "elements", "editorRef"]);
-    const editor = useMemo(() => {
-        return withElements(elements)(withReact(createEditor()));
-    }, [elements]);
-    if (editorRef) {
-        editorRef.current = editor;
-    }
-    const renderElement = useCallback((props) => {
-        const customElement = elements[props.element.type];
-        if (customElement) {
-            return customElement.renderer(Object.assign(Object.assign({}, props), { editable }));
-        }
-        return React.createElement("div", Object.assign({}, props.attributes), props.children);
-    }, [elements, editable]);
-    return (React.createElement("div", Object.assign({}, rest),
-        React.createElement(Slate, { editor: editor, value: content, onChange: onChange },
-            React.createElement(StyledEditable, { readOnly: !editable, renderElement: renderElement, placeholder: "Enter some text..." }))));
-};
+`;
+/**
+ * Higher order function to add custom elements to a slate editor through a ContentElementMap.
+ * @param elements
+ */
+const withElements = (elements = {}) => (editor) => {
+    const { isInline, isVoid } = editor;
+    editor.isInline = (element) => {
+        var _a;
+        return ((typeof element.type === "string" && ((_a = elements[element.type]) === null || _a === void 0 ? void 0 : _a.inline)) ||
+            isInline(element));
+    };
+    editor.isVoid = (element) => {
+        var _a;
+        return ((typeof element.type === "string" && ((_a = elements[element.type]) === null || _a === void 0 ? void 0 : _a.isVoid)) ||
+            isVoid(element));
+    };
+    return editor;
+};
+/**
+ * Component that renders annotation content using slate.js.
+ * @param props
+ */
+export const AnnotationContent = (props) => {
+    const { content = emptyContent, onChange = () => { }, editable = false, elements, editorRef } = props, rest = __rest(props, ["content", "onChange", "editable", "elements", "editorRef"]);
+    const editor = useMemo(() => {
+        return withElements(elements)(withReact(createEditor()));
+    }, [elements]);
+    if (editorRef) {
+        editorRef.current = editor;
+    }
+    const renderElement = useCallback((props) => {
+        const customElement = elements[props.element.type];
+        if (customElement) {
+            return customElement.renderer(Object.assign(Object.assign({}, props), { editable }));
+        }
+        return React.createElement("div", Object.assign({}, props.attributes), props.children);
+    }, [elements, editable]);
+    return (React.createElement("div", Object.assign({}, rest),
+        React.createElement(Slate, { editor: editor, value: content, onChange: onChange },
+            React.createElement(StyledEditable, { readOnly: !editable, renderElement: renderElement, placeholder: "Enter some text..." }))));
+};
 //# sourceMappingURL=AnnotationContent.js.map

package/lib/components/AnnotationEditForm.d.ts

@@ -1,27 +1,27 @@
-import React from "react";
-import { Annotation } from "../redux/annotations.slice";
-export declare type AnnotationEditFormProps = {
-    /**
-     * The annotation being editted.
-     */
-    annotationId?: string;
-    /**
-     * Called when form is submitted.
-     */
-    onSubmit?: (annotation: Annotation) => void;
-    /**
-     * Called when form is cancelled.
-     */
-    onCancel?: () => void;
-    /**
-     * Called when annotation is deleted (using the button in this form).
-     */
-    onDelete?: () => void;
-};
-/**
- * Form that can be used to edit an annotation. Connected to redux for state management.
- * @param props
- * @returns
- */
-export declare const AnnotationEditForm: React.FC<AnnotationEditFormProps>;
+import React from "react";
+import { Annotation } from "../redux/annotations.slice";
+export declare type AnnotationEditFormProps = {
+    /**
+     * The annotation being editted.
+     */
+    annotationId?: string;
+    /**
+     * Called when form is submitted.
+     */
+    onSubmit?: (annotation: Annotation) => void;
+    /**
+     * Called when form is cancelled.
+     */
+    onCancel?: () => void;
+    /**
+     * Called when annotation is deleted (using the button in this form).
+     */
+    onDelete?: () => void;
+};
+/**
+ * Form that can be used to edit an annotation. Connected to redux for state management.
+ * @param props
+ * @returns
+ */
+export declare const AnnotationEditForm: React.FC<AnnotationEditFormProps>;
 //# sourceMappingURL=AnnotationEditForm.d.ts.map

package/lib/components/AnnotationEditForm.js

@@ -1,147 +1,147 @@
-import { MeasurementsChooser } from "@insync-stageplayer/measurements";
-import { Popout, PopoutTargetContext, useTheme, } from "@insync-stageplayer/ui-components";
-import cx from "classnames";
-import React, { useRef, useCallback, useContext, useEffect, useMemo, } from "react";
-import { useDispatch, useSelector } from "react-redux";
-import { AnnotationContent, } from "./AnnotationContent";
-import { editDisplay, finishEditingDisplay, initEditor, pickMeasurement, pickMeasurementChoose, pickMeasurementClose, pickMeasurementSuccess, updateContent, } from "../redux/annotationEditor.slice";
-import { AnnotationsModuleContext } from "./AnnotationsModuleProvider";
-import MeasurementDisplayEditor from "./MeasurementDisplayEditor";
-import { MeasurementDisplayElement } from "./MeasurementDisplayElement";
-import { createMeasurementDisplay } from "../redux/measurementDisplays.slice";
-import { createId } from "../util";
-/**
- * A wrapper around the MeasurementDisplay. Provides entrypoint for editing MeasurementDisplays.
- * @param param
- * @returns
- */
-const MeasurementDisplayElementRenderer = ({ element, attributes, editable, children, }) => {
-    const { measurementDisplayId } = element;
-    const dispatch = useDispatch();
-    const { selector } = useContext(AnnotationsModuleContext);
-    const id = useSelector((s) => selector(s).annotationEditor.editingMeasurementDisplay);
-    const editor = id ? (React.createElement(MeasurementDisplayEditor.Container, { id: id, className: "p-1", onClose: () => dispatch(finishEditingDisplay()) })) : null;
-    return (React.createElement(Popout, { content: editor, visible: id === measurementDisplayId, placement: "right", onClickOutside: () => {
-            dispatch(finishEditingDisplay());
-        } }, ({ ref }) => (React.createElement("span", Object.assign({}, attributes),
-        React.createElement(MeasurementDisplayElement, { ref: ref, onClick: () => {
-                dispatch(editDisplay(measurementDisplayId));
-            }, id: measurementDisplayId, editable: editable, xRange: { start: 0, duration: 50000 } }),
-        children))));
-};
-const contentElements = {
-    measurementDisplay: {
-        isVoid: true,
-        inline: true,
-        renderer: MeasurementDisplayElementRenderer,
-    },
-};
-/**
- * Form that can be used to edit an annotation. Connected to redux for state management.
- * @param props
- * @returns
- */
-export const AnnotationEditForm = (props) => {
-    const theme = useTheme();
-    const dispatch = useDispatch();
-    const popoutTarget = useRef(null);
-    const { selector, entitiesSelectors } = useContext(AnnotationsModuleContext);
-    const { onSubmit, onCancel, onDelete } = props;
-    const dirtyAnnotation = useSelector((s) => props.annotationId
-        ? entitiesSelectors.annotations.selectById(s, props.annotationId)
-        : undefined);
-    const annotation = useMemo(() => {
-        var _a;
-        const go = (node) => {
-            if ((node.type === "measurementDisplay" || node.type === "paragraph") &&
-                !node.children) {
-                return Object.assign(Object.assign({}, node), { text: undefined, children: [
-                        {
-                            text: "",
-                        },
-                    ] });
-            }
-            if (Array.isArray(node.children)) {
-                return Object.assign(Object.assign({}, node), { children: node.children.map(go) });
-                // return node.children.map(go);
-            }
-            return node;
-        };
-        return dirtyAnnotation
-            ? Object.assign(Object.assign({}, dirtyAnnotation), { content: (_a = dirtyAnnotation === null || dirtyAnnotation === void 0 ? void 0 : dirtyAnnotation.content) === null || _a === void 0 ? void 0 : _a.map(go) }) : dirtyAnnotation;
-    }, [dirtyAnnotation]);
-    useEffect(() => {
-        dispatch(initEditor(annotation));
-    }, [annotation, dispatch]);
-    const editorRef = useRef(null);
-    const state = useSelector((s) => selector(s).annotationEditor);
-    const handleChange = useCallback((newContent) => {
-        dispatch(updateContent(newContent));
-    }, [dispatch]);
-    const handleSubmit = useCallback((e) => {
-        var _a;
-        e.preventDefault();
-        if (!onSubmit)
-            return;
-        if (!state.annotation.id) {
-            onSubmit(Object.assign(Object.assign({}, state.annotation), { id: createId() }));
-        }
-        ((_a = state.annotation.content) === null || _a === void 0 ? void 0 : _a.length) !== 0
-            ? onSubmit(state.annotation)
-            : onCancel;
-    }, [state.annotation, onSubmit, onCancel]);
-    const handleAddMeasurementDisplay = useCallback(() => {
-        dispatch(pickMeasurement());
-    }, [dispatch]);
-    const handleCloseMeasurementPicker = useCallback(() => {
-        dispatch(pickMeasurementClose());
-    }, [dispatch]);
-    const handleChooseMeasurement = useCallback(([measurementId]) => {
-        dispatch(pickMeasurementChoose(measurementId));
-    }, [dispatch]);
-    const handleSubmitMeasurementPicker = useCallback(() => {
-        var _a;
-        if (!state.chosenMeasurement)
-            return;
-        const id = createId();
-        dispatch(createMeasurementDisplay({
-            id,
-            measurementId: state.chosenMeasurement,
-            showX: false,
-            showY: true,
-            showSignal: true,
-            showSigColor: false,
-            padYTo: 1,
-            padXTo: 1,
-            padXChar: " ",
-            padYChar: " ",
-            decimalsY: 2,
-            decimalsX: 3,
-        }));
-        (_a = editorRef.current) === null || _a === void 0 ? void 0 : _a.insertNode({
-            type: "measurementDisplay",
-            measurementDisplayId: id,
-            children: [{ text: "" }],
-        });
-        setTimeout(() => {
-            dispatch(pickMeasurementSuccess(id));
-        }, 0);
-    }, [dispatch, state.chosenMeasurement]);
-    return (React.createElement(React.Fragment, null,
-        React.createElement("form", { onSubmit: (e) => e.preventDefault(), className: cx("card", theme.name === "light" && "bg-secondary", theme.name === "dark" && "bg-dark", "h-100", "flex-column", state.pickingMeasurement ? "d-none" : "d-flex") },
-            React.createElement("div", { className: "card-header d-flex justify-content-between" },
-                React.createElement("button", { className: "btn btn-primary", onClick: handleAddMeasurementDisplay }, "Add signal value")),
-            React.createElement(PopoutTargetContext.Provider, { value: popoutTarget },
-                React.createElement(AnnotationContent, { className: "card-body flex-1", "background-color": "slate-grey", editable: true, editorRef: editorRef, content: state.annotation.content, elements: contentElements, onChange: handleChange })),
-            React.createElement("div", { className: "card-header d-flex justify-content-between" },
-                React.createElement("button", { className: "btn btn-danger mr-1", onClick: onDelete }, "Delete Overlay"),
-                React.createElement("button", { className: "btn btn-primary", onClick: handleSubmit }, "Ok")),
-            React.createElement("div", { ref: popoutTarget })),
-        state.pickingMeasurement && (React.createElement("div", { className: "d-flex flex-column h-100" },
-            React.createElement("div", { className: "flex-grow-1" },
-                React.createElement(MeasurementsChooser, { single: true, className: "h-100", onChange: handleChooseMeasurement, selected: state.chosenMeasurement ? [state.chosenMeasurement] : [], dataViewerId: state.chosenMeasurement ? state.chosenMeasurement : "" })),
-            React.createElement("div", { className: "py-3 d-flex flex-row justify-content-end" },
-                React.createElement("button", { className: "btn btn-danger mr-3", onClick: handleCloseMeasurementPicker }, "Cancel"),
-                React.createElement("button", { className: "btn btn-primary", onClick: handleSubmitMeasurementPicker }, "Ok"))))));
-};
+import { MeasurementsChooser } from "@insync-stageplayer/measurements";
+import { Popout, PopoutTargetContext, useTheme, } from "@insync-stageplayer/ui-components";
+import cx from "classnames";
+import React, { useRef, useCallback, useContext, useEffect, useMemo, } from "react";
+import { useDispatch, useSelector } from "react-redux";
+import { AnnotationContent, } from "./AnnotationContent";
+import { editDisplay, finishEditingDisplay, initEditor, pickMeasurement, pickMeasurementChoose, pickMeasurementClose, pickMeasurementSuccess, updateContent, } from "../redux/annotationEditor.slice";
+import { AnnotationsModuleContext } from "./AnnotationsModuleProvider";
+import MeasurementDisplayEditor from "./MeasurementDisplayEditor";
+import { MeasurementDisplayElement } from "./MeasurementDisplayElement";
+import { createMeasurementDisplay } from "../redux/measurementDisplays.slice";
+import { createId } from "../util";
+/**
+ * A wrapper around the MeasurementDisplay. Provides entrypoint for editing MeasurementDisplays.
+ * @param param
+ * @returns
+ */
+const MeasurementDisplayElementRenderer = ({ element, attributes, editable, children, }) => {
+    const { measurementDisplayId } = element;
+    const dispatch = useDispatch();
+    const { selector } = useContext(AnnotationsModuleContext);
+    const id = useSelector((s) => selector(s).annotationEditor.editingMeasurementDisplay);
+    const editor = id ? (React.createElement(MeasurementDisplayEditor.Container, { id: id, className: "p-1", onClose: () => dispatch(finishEditingDisplay()) })) : null;
+    return (React.createElement(Popout, { content: editor, visible: id === measurementDisplayId, placement: "right", onClickOutside: () => {
+            dispatch(finishEditingDisplay());
+        } }, ({ ref }) => (React.createElement("span", Object.assign({}, attributes),
+        React.createElement(MeasurementDisplayElement, { ref: ref, onClick: () => {
+                dispatch(editDisplay(measurementDisplayId));
+            }, id: measurementDisplayId, editable: editable, xRange: { start: 0, duration: 50000 } }),
+        children))));
+};
+const contentElements = {
+    measurementDisplay: {
+        isVoid: true,
+        inline: true,
+        renderer: MeasurementDisplayElementRenderer,
+    },
+};
+/**
+ * Form that can be used to edit an annotation. Connected to redux for state management.
+ * @param props
+ * @returns
+ */
+export const AnnotationEditForm = (props) => {
+    const theme = useTheme();
+    const dispatch = useDispatch();
+    const popoutTarget = useRef(null);
+    const { selector, entitiesSelectors } = useContext(AnnotationsModuleContext);
+    const { onSubmit, onCancel, onDelete } = props;
+    const dirtyAnnotation = useSelector((s) => props.annotationId
+        ? entitiesSelectors.annotations.selectById(s, props.annotationId)
+        : undefined);
+    const annotation = useMemo(() => {
+        var _a;
+        const go = (node) => {
+            if ((node.type === "measurementDisplay" || node.type === "paragraph") &&
+                !node.children) {
+                return Object.assign(Object.assign({}, node), { text: undefined, children: [
+                        {
+                            text: "",
+                        },
+                    ] });
+            }
+            if (Array.isArray(node.children)) {
+                return Object.assign(Object.assign({}, node), { children: node.children.map(go) });
+                // return node.children.map(go);
+            }
+            return node;
+        };
+        return dirtyAnnotation
+            ? Object.assign(Object.assign({}, dirtyAnnotation), { content: (_a = dirtyAnnotation === null || dirtyAnnotation === void 0 ? void 0 : dirtyAnnotation.content) === null || _a === void 0 ? void 0 : _a.map(go) }) : dirtyAnnotation;
+    }, [dirtyAnnotation]);
+    useEffect(() => {
+        dispatch(initEditor(annotation));
+    }, [annotation, dispatch]);
+    const editorRef = useRef(null);
+    const state = useSelector((s) => selector(s).annotationEditor);
+    const handleChange = useCallback((newContent) => {
+        dispatch(updateContent(newContent));
+    }, [dispatch]);
+    const handleSubmit = useCallback((e) => {
+        var _a;
+        e.preventDefault();
+        if (!onSubmit)
+            return;
+        if (!state.annotation.id) {
+            onSubmit(Object.assign(Object.assign({}, state.annotation), { id: createId() }));
+        }
+        ((_a = state.annotation.content) === null || _a === void 0 ? void 0 : _a.length) !== 0
+            ? onSubmit(state.annotation)
+            : onCancel;
+    }, [state.annotation, onSubmit, onCancel]);
+    const handleAddMeasurementDisplay = useCallback(() => {
+        dispatch(pickMeasurement());
+    }, [dispatch]);
+    const handleCloseMeasurementPicker = useCallback(() => {
+        dispatch(pickMeasurementClose());
+    }, [dispatch]);
+    const handleChooseMeasurement = useCallback(([measurementId]) => {
+        dispatch(pickMeasurementChoose(measurementId));
+    }, [dispatch]);
+    const handleSubmitMeasurementPicker = useCallback(() => {
+        var _a;
+        if (!state.chosenMeasurement)
+            return;
+        const id = createId();
+        dispatch(createMeasurementDisplay({
+            id,
+            measurementId: state.chosenMeasurement,
+            showX: false,
+            showY: true,
+            showSignal: true,
+            showSigColor: false,
+            padYTo: 1,
+            padXTo: 1,
+            padXChar: " ",
+            padYChar: " ",
+            decimalsY: 2,
+            decimalsX: 3,
+        }));
+        (_a = editorRef.current) === null || _a === void 0 ? void 0 : _a.insertNode({
+            type: "measurementDisplay",
+            measurementDisplayId: id,
+            children: [{ text: "" }],
+        });
+        setTimeout(() => {
+            dispatch(pickMeasurementSuccess(id));
+        }, 0);
+    }, [dispatch, state.chosenMeasurement]);
+    return (React.createElement(React.Fragment, null,
+        React.createElement("form", { onSubmit: (e) => e.preventDefault(), className: cx("card", theme.name === "light" && "bg-secondary", theme.name === "dark" && "bg-dark", "h-100", "flex-column", state.pickingMeasurement ? "d-none" : "d-flex") },
+            React.createElement("div", { className: "card-header d-flex justify-content-between" },
+                React.createElement("button", { className: "btn btn-primary", onClick: handleAddMeasurementDisplay }, "Add signal value")),
+            React.createElement(PopoutTargetContext.Provider, { value: popoutTarget },
+                React.createElement(AnnotationContent, { className: "card-body flex-1", "background-color": "slate-grey", editable: true, editorRef: editorRef, content: state.annotation.content, elements: contentElements, onChange: handleChange })),
+            React.createElement("div", { className: "card-header d-flex justify-content-between" },
+                React.createElement("button", { className: "btn btn-danger mr-1", onClick: onDelete }, "Delete Overlay"),
+                React.createElement("button", { className: "btn btn-primary", onClick: handleSubmit }, "Ok")),
+            React.createElement("div", { ref: popoutTarget })),
+        state.pickingMeasurement && (React.createElement("div", { className: "d-flex flex-column h-100" },
+            React.createElement("div", { className: "flex-grow-1" },
+                React.createElement(MeasurementsChooser, { single: true, className: "h-100", onChange: handleChooseMeasurement, selected: state.chosenMeasurement ? [state.chosenMeasurement] : [], dataViewerId: state.chosenMeasurement ? state.chosenMeasurement : "" })),
+            React.createElement("div", { className: "py-3 d-flex flex-row justify-content-end" },
+                React.createElement("button", { className: "btn btn-danger mr-3", onClick: handleCloseMeasurementPicker }, "Cancel"),
+                React.createElement("button", { className: "btn btn-primary", onClick: handleSubmitMeasurementPicker }, "Ok"))))));
+};
 //# sourceMappingURL=AnnotationEditForm.js.map

package/lib/components/AnnotationsModuleProvider.d.ts

@@ -1,37 +1,37 @@
-import React from "react";
-import { annotationsAdapter } from "../redux/annotations.slice";
-import { measurementDisplaysAdapter } from "../redux/measurementDisplays.slice";
-import { AnnotationsModuleState } from "../redux/reducer";
-declare type AnnotationsModuleStateSelector = (state: any) => AnnotationsModuleState;
-declare type MeasurementsModuleValue = {
-    /**
-     * Selects the slice state from the redux state.
-     */
-    selector: AnnotationsModuleStateSelector;
-    /**
-     * Selectors for retrieving entities.
-     */
-    entitiesSelectors: {
-        /**
-         * Provides selectors for retrieving annotation entities from the state.
-         */
-        annotations: ReturnType<typeof annotationsAdapter.getSelectors>;
-        /**
-         * Provides selectors for retrieving measurementDisplays from the state.
-         */
-        measurementDisplays: ReturnType<typeof measurementDisplaysAdapter.getSelectors>;
-    };
-};
-export declare const AnnotationsModuleContext: React.Context<MeasurementsModuleValue>;
-declare type MeasurementsModuleProviderProps = {
-    selector: AnnotationsModuleStateSelector;
-};
-/**
- * Provides the functionalities in this module to its children components.
- *
- * @param props
- * @returns
- */
-export declare const AnnotationsModuleProvider: React.FC<MeasurementsModuleProviderProps>;
-export {};
+import React from "react";
+import { annotationsAdapter } from "../redux/annotations.slice";
+import { measurementDisplaysAdapter } from "../redux/measurementDisplays.slice";
+import { AnnotationsModuleState } from "../redux/reducer";
+declare type AnnotationsModuleStateSelector = (state: any) => AnnotationsModuleState;
+declare type MeasurementsModuleValue = {
+    /**
+     * Selects the slice state from the redux state.
+     */
+    selector: AnnotationsModuleStateSelector;
+    /**
+     * Selectors for retrieving entities.
+     */
+    entitiesSelectors: {
+        /**
+         * Provides selectors for retrieving annotation entities from the state.
+         */
+        annotations: ReturnType<typeof annotationsAdapter.getSelectors>;
+        /**
+         * Provides selectors for retrieving measurementDisplays from the state.
+         */
+        measurementDisplays: ReturnType<typeof measurementDisplaysAdapter.getSelectors>;
+    };
+};
+export declare const AnnotationsModuleContext: React.Context<MeasurementsModuleValue>;
+declare type MeasurementsModuleProviderProps = {
+    selector: AnnotationsModuleStateSelector;
+};
+/**
+ * Provides the functionalities in this module to its children components.
+ *
+ * @param props
+ * @returns
+ */
+export declare const AnnotationsModuleProvider: React.FC<MeasurementsModuleProviderProps>;
+export {};
 //# sourceMappingURL=AnnotationsModuleProvider.d.ts.map