@insync-stageplayer/annotations 0.4.7 → 0.4.8
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/lib/components/AnnotationContent.d.ts +37 -37
- package/lib/components/AnnotationContent.js +59 -59
- package/lib/components/AnnotationEditForm.d.ts +26 -26
- package/lib/components/AnnotationEditForm.js +146 -146
- package/lib/components/AnnotationsModuleProvider.d.ts +36 -36
- package/lib/components/AnnotationsModuleProvider.js +20 -20
- package/lib/components/AnnotationsViewer.d.ts +15 -15
- package/lib/components/AnnotationsViewer.js +107 -107
- package/lib/components/DraggablePosition.d.ts +31 -31
- package/lib/components/DraggablePosition.js +62 -62
- package/lib/components/MeasurementDisplayDataContext.d.ts +10 -10
- package/lib/components/MeasurementDisplayDataContext.js +2 -2
- package/lib/components/MeasurementDisplayDataProvider.d.ts +15 -15
- package/lib/components/MeasurementDisplayDataProvider.js +45 -45
- package/lib/components/MeasurementDisplayEditor.d.ts +19 -19
- package/lib/components/MeasurementDisplayEditor.js +136 -136
- package/lib/components/MeasurementDisplayElement.d.ts +18 -18
- package/lib/components/MeasurementDisplayElement.js +97 -97
- package/lib/components/ModalAnnotationEditor.d.ts +12 -12
- package/lib/components/ModalAnnotationEditor.js +37 -37
- package/lib/formatNumber.d.ts +29 -29
- package/lib/formatNumber.js +12 -12
- package/lib/index.d.ts +7 -7
- package/lib/index.js +7 -7
- package/lib/redux/actions.d.ts +1 -1
- package/lib/redux/actions.js +1 -1
- package/lib/redux/annotationEditor.slice.d.ts +37 -37
- package/lib/redux/annotationEditor.slice.js +122 -122
- package/lib/redux/annotations.slice.d.ts +31 -31
- package/lib/redux/annotations.slice.js +65 -65
- package/lib/redux/measurementDisplayEditor.slice.d.ts +25 -25
- package/lib/redux/measurementDisplayEditor.slice.js +36 -36
- package/lib/redux/measurementDisplays.slice.d.ts +25 -25
- package/lib/redux/measurementDisplays.slice.js +22 -22
- package/lib/redux/reducer.d.ts +51 -51
- package/lib/redux/reducer.js +65 -65
- package/lib/useBoundingRect.d.ts +8 -8
- package/lib/useBoundingRect.js +27 -27
- package/lib/util.d.ts +5 -5
- package/lib/util.js +7 -7
- package/package.json +5 -5
|
@@ -1,41 +1,41 @@
|
|
|
1
|
-
import React, { useContext } from "react";
|
|
2
|
-
import { AnnotationEditForm } from "./AnnotationEditForm";
|
|
3
|
-
import { Modal, ModalHeading, ModalBody, styled, } from "@insync-stageplayer/ui-components";
|
|
4
|
-
import { editAnnotationCancel, editAnnotationDelete, editAnnotationSubmit, } from "../redux/annotations.slice";
|
|
5
|
-
import { useDispatch, useSelector } from "react-redux";
|
|
6
|
-
import { AnnotationsModuleContext } from "./AnnotationsModuleProvider";
|
|
1
|
+
import React, { useContext } from "react";
|
|
2
|
+
import { AnnotationEditForm } from "./AnnotationEditForm";
|
|
3
|
+
import { Modal, ModalHeading, ModalBody, styled, } from "@insync-stageplayer/ui-components";
|
|
4
|
+
import { editAnnotationCancel, editAnnotationDelete, editAnnotationSubmit, } from "../redux/annotations.slice";
|
|
5
|
+
import { useDispatch, useSelector } from "react-redux";
|
|
6
|
+
import { AnnotationsModuleContext } from "./AnnotationsModuleProvider";
|
|
7
7
|
const StyledModalBody = styled(ModalBody) `
|
|
8
8
|
width: 40vw;
|
|
9
9
|
height: 60vh;
|
|
10
|
-
`;
|
|
11
|
-
/**
|
|
12
|
-
* A modal wrapper around AnnotationEditor.
|
|
13
|
-
* @param props
|
|
14
|
-
* @returns
|
|
15
|
-
*/
|
|
16
|
-
export const ModalAnnotationEditor = ({ title, className, style, }) => {
|
|
17
|
-
const dispatch = useDispatch();
|
|
18
|
-
const { selector } = useContext(AnnotationsModuleContext);
|
|
19
|
-
const editingAnnotation = useSelector((s) => selector(s).annotations.editingAnnotation);
|
|
20
|
-
const handleCancel = () => {
|
|
21
|
-
dispatch(editAnnotationCancel());
|
|
22
|
-
};
|
|
23
|
-
const handleSubmit = (annotation) => {
|
|
24
|
-
var _a;
|
|
25
|
-
if (((_a = annotation.content) === null || _a === void 0 ? void 0 : _a.length) === 0) {
|
|
26
|
-
alert("There is no content to show");
|
|
27
|
-
dispatch(editAnnotationCancel());
|
|
28
|
-
}
|
|
29
|
-
else {
|
|
30
|
-
dispatch(editAnnotationSubmit(annotation));
|
|
31
|
-
}
|
|
32
|
-
};
|
|
33
|
-
const handleDelete = () => {
|
|
34
|
-
dispatch(editAnnotationDelete());
|
|
35
|
-
};
|
|
36
|
-
return (React.createElement(Modal, { visible: editingAnnotation !== undefined, style: style, className: className },
|
|
37
|
-
React.createElement(ModalHeading, null, title),
|
|
38
|
-
React.createElement(StyledModalBody, null,
|
|
39
|
-
React.createElement(AnnotationEditForm, { annotationId: editingAnnotation, onCancel: handleCancel, onSubmit: handleSubmit, onDelete: handleDelete }))));
|
|
40
|
-
};
|
|
10
|
+
`;
|
|
11
|
+
/**
|
|
12
|
+
* A modal wrapper around AnnotationEditor.
|
|
13
|
+
* @param props
|
|
14
|
+
* @returns
|
|
15
|
+
*/
|
|
16
|
+
export const ModalAnnotationEditor = ({ title, className, style, }) => {
|
|
17
|
+
const dispatch = useDispatch();
|
|
18
|
+
const { selector } = useContext(AnnotationsModuleContext);
|
|
19
|
+
const editingAnnotation = useSelector((s) => selector(s).annotations.editingAnnotation);
|
|
20
|
+
const handleCancel = () => {
|
|
21
|
+
dispatch(editAnnotationCancel());
|
|
22
|
+
};
|
|
23
|
+
const handleSubmit = (annotation) => {
|
|
24
|
+
var _a;
|
|
25
|
+
if (((_a = annotation.content) === null || _a === void 0 ? void 0 : _a.length) === 0) {
|
|
26
|
+
alert("There is no content to show");
|
|
27
|
+
dispatch(editAnnotationCancel());
|
|
28
|
+
}
|
|
29
|
+
else {
|
|
30
|
+
dispatch(editAnnotationSubmit(annotation));
|
|
31
|
+
}
|
|
32
|
+
};
|
|
33
|
+
const handleDelete = () => {
|
|
34
|
+
dispatch(editAnnotationDelete());
|
|
35
|
+
};
|
|
36
|
+
return (React.createElement(Modal, { visible: editingAnnotation !== undefined, style: style, className: className },
|
|
37
|
+
React.createElement(ModalHeading, null, title),
|
|
38
|
+
React.createElement(StyledModalBody, null,
|
|
39
|
+
React.createElement(AnnotationEditForm, { annotationId: editingAnnotation, onCancel: handleCancel, onSubmit: handleSubmit, onDelete: handleDelete }))));
|
|
40
|
+
};
|
|
41
41
|
//# sourceMappingURL=ModalAnnotationEditor.js.map
|
package/lib/formatNumber.d.ts
CHANGED
|
@@ -1,30 +1,30 @@
|
|
|
1
|
-
declare type FormatNumberArgs = {
|
|
2
|
-
/**
|
|
3
|
-
* The value to be formatted.
|
|
4
|
-
*/
|
|
5
|
-
value?: number;
|
|
6
|
-
/**
|
|
7
|
-
* How many character should be added to the start of the number.
|
|
8
|
-
*/
|
|
9
|
-
padStart?: number;
|
|
10
|
-
/**
|
|
11
|
-
* The char to use as padding character.
|
|
12
|
-
*/
|
|
13
|
-
padChar?: string;
|
|
14
|
-
/**
|
|
15
|
-
* The amount of decimals to display.
|
|
16
|
-
*/
|
|
17
|
-
decimals?: number;
|
|
18
|
-
/**
|
|
19
|
-
* The unit to display.
|
|
20
|
-
*/
|
|
21
|
-
unit?: string;
|
|
22
|
-
};
|
|
23
|
-
/**
|
|
24
|
-
* Formats a given number.
|
|
25
|
-
* @param args
|
|
26
|
-
* @returns
|
|
27
|
-
*/
|
|
28
|
-
export declare const formatNumber: ({ value, decimals, padStart, padChar, unit, }: FormatNumberArgs) => string;
|
|
29
|
-
export {};
|
|
1
|
+
declare type FormatNumberArgs = {
|
|
2
|
+
/**
|
|
3
|
+
* The value to be formatted.
|
|
4
|
+
*/
|
|
5
|
+
value?: number;
|
|
6
|
+
/**
|
|
7
|
+
* How many character should be added to the start of the number.
|
|
8
|
+
*/
|
|
9
|
+
padStart?: number;
|
|
10
|
+
/**
|
|
11
|
+
* The char to use as padding character.
|
|
12
|
+
*/
|
|
13
|
+
padChar?: string;
|
|
14
|
+
/**
|
|
15
|
+
* The amount of decimals to display.
|
|
16
|
+
*/
|
|
17
|
+
decimals?: number;
|
|
18
|
+
/**
|
|
19
|
+
* The unit to display.
|
|
20
|
+
*/
|
|
21
|
+
unit?: string;
|
|
22
|
+
};
|
|
23
|
+
/**
|
|
24
|
+
* Formats a given number.
|
|
25
|
+
* @param args
|
|
26
|
+
* @returns
|
|
27
|
+
*/
|
|
28
|
+
export declare const formatNumber: ({ value, decimals, padStart, padChar, unit, }: FormatNumberArgs) => string;
|
|
29
|
+
export {};
|
|
30
30
|
//# sourceMappingURL=formatNumber.d.ts.map
|
package/lib/formatNumber.js
CHANGED
|
@@ -1,13 +1,13 @@
|
|
|
1
|
-
/**
|
|
2
|
-
* Formats a given number.
|
|
3
|
-
* @param args
|
|
4
|
-
* @returns
|
|
5
|
-
*/
|
|
6
|
-
export const formatNumber = ({ value = 0, decimals = 0, padStart = 2, padChar = ` `, unit = "", }) => {
|
|
7
|
-
const withDecimals = value.toFixed(decimals);
|
|
8
|
-
const finalPadTo = padStart + (decimals > 0 ? 1 : 0) + decimals;
|
|
9
|
-
const str = withDecimals.padStart(finalPadTo, padChar);
|
|
10
|
-
const strWithUnit = unit !== "" ? str + " " + unit : str;
|
|
11
|
-
return strWithUnit;
|
|
12
|
-
};
|
|
1
|
+
/**
|
|
2
|
+
* Formats a given number.
|
|
3
|
+
* @param args
|
|
4
|
+
* @returns
|
|
5
|
+
*/
|
|
6
|
+
export const formatNumber = ({ value = 0, decimals = 0, padStart = 2, padChar = ` `, unit = "", }) => {
|
|
7
|
+
const withDecimals = value.toFixed(decimals);
|
|
8
|
+
const finalPadTo = padStart + (decimals > 0 ? 1 : 0) + decimals;
|
|
9
|
+
const str = withDecimals.padStart(finalPadTo, padChar);
|
|
10
|
+
const strWithUnit = unit !== "" ? str + " " + unit : str;
|
|
11
|
+
return strWithUnit;
|
|
12
|
+
};
|
|
13
13
|
//# sourceMappingURL=formatNumber.js.map
|
package/lib/index.d.ts
CHANGED
|
@@ -1,8 +1,8 @@
|
|
|
1
|
-
import * as actions from "./redux/actions";
|
|
2
|
-
export * from "./components/AnnotationsModuleProvider";
|
|
3
|
-
export * from "./components/AnnotationsViewer";
|
|
4
|
-
export * from "./redux/reducer";
|
|
5
|
-
export * from "./components/ModalAnnotationEditor";
|
|
6
|
-
export * from "./components/MeasurementDisplayDataProvider";
|
|
7
|
-
export { actions };
|
|
1
|
+
import * as actions from "./redux/actions";
|
|
2
|
+
export * from "./components/AnnotationsModuleProvider";
|
|
3
|
+
export * from "./components/AnnotationsViewer";
|
|
4
|
+
export * from "./redux/reducer";
|
|
5
|
+
export * from "./components/ModalAnnotationEditor";
|
|
6
|
+
export * from "./components/MeasurementDisplayDataProvider";
|
|
7
|
+
export { actions };
|
|
8
8
|
//# sourceMappingURL=index.d.ts.map
|
package/lib/index.js
CHANGED
|
@@ -1,8 +1,8 @@
|
|
|
1
|
-
import * as actions from "./redux/actions";
|
|
2
|
-
export * from "./components/AnnotationsModuleProvider";
|
|
3
|
-
export * from "./components/AnnotationsViewer";
|
|
4
|
-
export * from "./redux/reducer";
|
|
5
|
-
export * from "./components/ModalAnnotationEditor";
|
|
6
|
-
export * from "./components/MeasurementDisplayDataProvider";
|
|
7
|
-
export { actions };
|
|
1
|
+
import * as actions from "./redux/actions";
|
|
2
|
+
export * from "./components/AnnotationsModuleProvider";
|
|
3
|
+
export * from "./components/AnnotationsViewer";
|
|
4
|
+
export * from "./redux/reducer";
|
|
5
|
+
export * from "./components/ModalAnnotationEditor";
|
|
6
|
+
export * from "./components/MeasurementDisplayDataProvider";
|
|
7
|
+
export { actions };
|
|
8
8
|
//# sourceMappingURL=index.js.map
|
package/lib/redux/actions.d.ts
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
export { editAnnotation, editAnnotationCancel, editAnnotationSubmit, editAnnotationDelete, createAnnotation, createAnnotations, updateAnnotation, deleteAnnotation, } from "./annotations.slice";
|
|
1
|
+
export { editAnnotation, editAnnotationCancel, editAnnotationSubmit, editAnnotationDelete, createAnnotation, createAnnotations, updateAnnotation, deleteAnnotation, } from "./annotations.slice";
|
|
2
2
|
//# sourceMappingURL=actions.d.ts.map
|
package/lib/redux/actions.js
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
export { editAnnotation, editAnnotationCancel, editAnnotationSubmit, editAnnotationDelete, createAnnotation, createAnnotations, updateAnnotation, deleteAnnotation, } from "./annotations.slice";
|
|
1
|
+
export { editAnnotation, editAnnotationCancel, editAnnotationSubmit, editAnnotationDelete, createAnnotation, createAnnotations, updateAnnotation, deleteAnnotation, } from "./annotations.slice";
|
|
2
2
|
//# sourceMappingURL=actions.js.map
|
|
@@ -1,38 +1,38 @@
|
|
|
1
|
-
import { Node } from "slate";
|
|
2
|
-
import { Annotation } from "./annotations.slice";
|
|
3
|
-
declare type EditingAnnotation = Omit<Annotation, "id"> & {
|
|
4
|
-
id: string | undefined;
|
|
5
|
-
};
|
|
6
|
-
export declare const initEditor: import("@reduxjs/toolkit").ActionCreatorWithOptionalPayload<Annotation | undefined, string>, updateContent: import("@reduxjs/toolkit").ActionCreatorWithPayload<Node[], string>, pickMeasurement: import("@reduxjs/toolkit").ActionCreatorWithoutPayload<string>, pickMeasurementChoose: import("@reduxjs/toolkit").ActionCreatorWithPayload<string, string>, pickMeasurementSuccess: import("@reduxjs/toolkit").ActionCreatorWithPayload<string, string>, pickMeasurementClose: import("@reduxjs/toolkit").ActionCreatorWithoutPayload<string>, pickMeasurementSubmit: import("@reduxjs/toolkit").ActionCreatorWithoutPayload<string>, pickMeasurementFail: import("@reduxjs/toolkit").ActionCreatorWithPayload<Error, string>, editDisplay: import("@reduxjs/toolkit").ActionCreatorWithPayload<string, string>, finishEditingDisplay: import("@reduxjs/toolkit").ActionCreatorWithoutPayload<string>;
|
|
7
|
-
declare const _default: import("redux").Reducer<{
|
|
8
|
-
/**
|
|
9
|
-
* The current annotation being edited.
|
|
10
|
-
*/
|
|
11
|
-
annotation: EditingAnnotation;
|
|
12
|
-
/**
|
|
13
|
-
* The current displays added to the editor. We're tracking this so they can be added or deleted
|
|
14
|
-
* depending on whether the editor is submitted or cancelled.
|
|
15
|
-
*/
|
|
16
|
-
displays: {
|
|
17
|
-
added: string[];
|
|
18
|
-
deleted: string[];
|
|
19
|
-
};
|
|
20
|
-
/**
|
|
21
|
-
* When set to true, will show a measurement chooser.
|
|
22
|
-
*/
|
|
23
|
-
pickingMeasurement: boolean;
|
|
24
|
-
/**
|
|
25
|
-
* The measurement chosen in the measurement chooser.
|
|
26
|
-
*/
|
|
27
|
-
chosenMeasurement: string | null;
|
|
28
|
-
/**
|
|
29
|
-
* An error that might have ocurred while selecting a measurement.
|
|
30
|
-
*/
|
|
31
|
-
pickingMeasurementError: Error | null;
|
|
32
|
-
/**
|
|
33
|
-
* The MeasurementDisplay currently being editted.
|
|
34
|
-
*/
|
|
35
|
-
editingMeasurementDisplay: string | null;
|
|
36
|
-
}, import("redux").AnyAction>;
|
|
37
|
-
export default _default;
|
|
1
|
+
import { Node } from "slate";
|
|
2
|
+
import { Annotation } from "./annotations.slice";
|
|
3
|
+
declare type EditingAnnotation = Omit<Annotation, "id"> & {
|
|
4
|
+
id: string | undefined;
|
|
5
|
+
};
|
|
6
|
+
export declare const initEditor: import("@reduxjs/toolkit").ActionCreatorWithOptionalPayload<Annotation | undefined, string>, updateContent: import("@reduxjs/toolkit").ActionCreatorWithPayload<Node[], string>, pickMeasurement: import("@reduxjs/toolkit").ActionCreatorWithoutPayload<string>, pickMeasurementChoose: import("@reduxjs/toolkit").ActionCreatorWithPayload<string, string>, pickMeasurementSuccess: import("@reduxjs/toolkit").ActionCreatorWithPayload<string, string>, pickMeasurementClose: import("@reduxjs/toolkit").ActionCreatorWithoutPayload<string>, pickMeasurementSubmit: import("@reduxjs/toolkit").ActionCreatorWithoutPayload<string>, pickMeasurementFail: import("@reduxjs/toolkit").ActionCreatorWithPayload<Error, string>, editDisplay: import("@reduxjs/toolkit").ActionCreatorWithPayload<string, string>, finishEditingDisplay: import("@reduxjs/toolkit").ActionCreatorWithoutPayload<string>;
|
|
7
|
+
declare const _default: import("redux").Reducer<{
|
|
8
|
+
/**
|
|
9
|
+
* The current annotation being edited.
|
|
10
|
+
*/
|
|
11
|
+
annotation: EditingAnnotation;
|
|
12
|
+
/**
|
|
13
|
+
* The current displays added to the editor. We're tracking this so they can be added or deleted
|
|
14
|
+
* depending on whether the editor is submitted or cancelled.
|
|
15
|
+
*/
|
|
16
|
+
displays: {
|
|
17
|
+
added: string[];
|
|
18
|
+
deleted: string[];
|
|
19
|
+
};
|
|
20
|
+
/**
|
|
21
|
+
* When set to true, will show a measurement chooser.
|
|
22
|
+
*/
|
|
23
|
+
pickingMeasurement: boolean;
|
|
24
|
+
/**
|
|
25
|
+
* The measurement chosen in the measurement chooser.
|
|
26
|
+
*/
|
|
27
|
+
chosenMeasurement: string | null;
|
|
28
|
+
/**
|
|
29
|
+
* An error that might have ocurred while selecting a measurement.
|
|
30
|
+
*/
|
|
31
|
+
pickingMeasurementError: Error | null;
|
|
32
|
+
/**
|
|
33
|
+
* The MeasurementDisplay currently being editted.
|
|
34
|
+
*/
|
|
35
|
+
editingMeasurementDisplay: string | null;
|
|
36
|
+
}, import("redux").AnyAction>;
|
|
37
|
+
export default _default;
|
|
38
38
|
//# sourceMappingURL=annotationEditor.slice.d.ts.map
|
|
@@ -1,123 +1,123 @@
|
|
|
1
|
-
/**
|
|
2
|
-
* Contains the "slice" of state for the annotation editor.
|
|
3
|
-
*/
|
|
4
|
-
import { createSlice } from "@reduxjs/toolkit";
|
|
5
|
-
import { diff } from "deep-diff";
|
|
6
|
-
const defaultAnnotation = {
|
|
7
|
-
id: undefined,
|
|
8
|
-
// This has to be added, and is interpreted as an empty value. If you provide undefined, you'll be presented with unexpected behaviour.
|
|
9
|
-
content: [
|
|
10
|
-
{
|
|
11
|
-
type: "paragraph",
|
|
12
|
-
children: [{ text: "" }],
|
|
13
|
-
},
|
|
14
|
-
],
|
|
15
|
-
position: { x: 0, y: 0 },
|
|
16
|
-
};
|
|
17
|
-
const createInitialState = (annotation) => ({
|
|
18
|
-
/**
|
|
19
|
-
* The current annotation being edited.
|
|
20
|
-
*/
|
|
21
|
-
annotation: annotation || defaultAnnotation,
|
|
22
|
-
/**
|
|
23
|
-
* The current displays added to the editor. We're tracking this so they can be added or deleted
|
|
24
|
-
* depending on whether the editor is submitted or cancelled.
|
|
25
|
-
*/
|
|
26
|
-
displays: {
|
|
27
|
-
added: [],
|
|
28
|
-
deleted: [],
|
|
29
|
-
},
|
|
30
|
-
/**
|
|
31
|
-
* When set to true, will show a measurement chooser.
|
|
32
|
-
*/
|
|
33
|
-
pickingMeasurement: false,
|
|
34
|
-
/**
|
|
35
|
-
* The measurement chosen in the measurement chooser.
|
|
36
|
-
*/
|
|
37
|
-
chosenMeasurement: null,
|
|
38
|
-
/**
|
|
39
|
-
* An error that might have ocurred while selecting a measurement.
|
|
40
|
-
*/
|
|
41
|
-
pickingMeasurementError: null,
|
|
42
|
-
/**
|
|
43
|
-
* The MeasurementDisplay currently being editted.
|
|
44
|
-
*/
|
|
45
|
-
editingMeasurementDisplay: null,
|
|
46
|
-
});
|
|
47
|
-
const annotationEditorSlice = createSlice({
|
|
48
|
-
name: "annotationEditor",
|
|
49
|
-
initialState: createInitialState(),
|
|
50
|
-
reducers: {
|
|
51
|
-
initEditor: (state, action) => {
|
|
52
|
-
state.pickingMeasurement = false;
|
|
53
|
-
state.pickingMeasurementError = null;
|
|
54
|
-
state.chosenMeasurement = null;
|
|
55
|
-
state.editingMeasurementDisplay = null;
|
|
56
|
-
state.annotation = action.payload || defaultAnnotation;
|
|
57
|
-
state.displays = {
|
|
58
|
-
added: [],
|
|
59
|
-
deleted: [],
|
|
60
|
-
};
|
|
61
|
-
},
|
|
62
|
-
updateContent: (state, action) => {
|
|
63
|
-
const newContent = action.payload;
|
|
64
|
-
// Make a deep clone of the content.
|
|
65
|
-
const oldContent = JSON.parse(JSON.stringify(state.annotation.content));
|
|
66
|
-
const difference = diff(oldContent, newContent) || [];
|
|
67
|
-
// This compares the difference between the old content and new content, and checks
|
|
68
|
-
// if any measurement displays where created or deleted. We need to keep track of these
|
|
69
|
-
// because according to what happens with the editing annotation after the form is finished,
|
|
70
|
-
// we might have to delete measurement displays.
|
|
71
|
-
state.displays = difference.reduce((acc, c) => {
|
|
72
|
-
// Detect any deleted measurementDisplays.
|
|
73
|
-
if (c.kind === "A" &&
|
|
74
|
-
c.item.kind === "D" &&
|
|
75
|
-
c.item.lhs.type === "measurementDisplay") {
|
|
76
|
-
acc.deleted.push(c.item.lhs.measurementDisplayId);
|
|
77
|
-
acc.added.splice(acc.added.indexOf(c.item.lhs.measurementDisplayId), 1);
|
|
78
|
-
}
|
|
79
|
-
// Detect any added measurementDisplays.
|
|
80
|
-
if (c.kind === "A" &&
|
|
81
|
-
c.item.kind === "N" &&
|
|
82
|
-
c.item.rhs.type === "measurementDisplay") {
|
|
83
|
-
acc.added.push(c.item.rhs.measurementDisplayId);
|
|
84
|
-
}
|
|
85
|
-
return acc;
|
|
86
|
-
}, state.displays);
|
|
87
|
-
state.annotation.content = action.payload;
|
|
88
|
-
},
|
|
89
|
-
pickMeasurement: (state) => {
|
|
90
|
-
state.pickingMeasurement = true;
|
|
91
|
-
state.chosenMeasurement = null;
|
|
92
|
-
state.pickingMeasurementError = null;
|
|
93
|
-
},
|
|
94
|
-
pickMeasurementSuccess: (state, action) => {
|
|
95
|
-
state.editingMeasurementDisplay = action.payload;
|
|
96
|
-
state.pickingMeasurement = false;
|
|
97
|
-
state.chosenMeasurement = null;
|
|
98
|
-
},
|
|
99
|
-
pickMeasurementClose: (state) => {
|
|
100
|
-
state.pickingMeasurement = false;
|
|
101
|
-
state.chosenMeasurement = null;
|
|
102
|
-
},
|
|
103
|
-
pickMeasurementSubmit: (state) => {
|
|
104
|
-
state.pickingMeasurement = false;
|
|
105
|
-
},
|
|
106
|
-
pickMeasurementChoose: (state, action) => {
|
|
107
|
-
state.chosenMeasurement = action.payload;
|
|
108
|
-
},
|
|
109
|
-
pickMeasurementFail: (state, action) => {
|
|
110
|
-
state.pickingMeasurement = false;
|
|
111
|
-
state.pickingMeasurementError = action.payload;
|
|
112
|
-
},
|
|
113
|
-
editDisplay: (state, action) => {
|
|
114
|
-
state.editingMeasurementDisplay = action.payload;
|
|
115
|
-
},
|
|
116
|
-
finishEditingDisplay: (state) => {
|
|
117
|
-
state.editingMeasurementDisplay = null;
|
|
118
|
-
},
|
|
119
|
-
},
|
|
120
|
-
});
|
|
121
|
-
export const { initEditor, updateContent, pickMeasurement, pickMeasurementChoose, pickMeasurementSuccess, pickMeasurementClose, pickMeasurementSubmit, pickMeasurementFail, editDisplay, finishEditingDisplay, } = annotationEditorSlice.actions;
|
|
122
|
-
export default annotationEditorSlice.reducer;
|
|
1
|
+
/**
|
|
2
|
+
* Contains the "slice" of state for the annotation editor.
|
|
3
|
+
*/
|
|
4
|
+
import { createSlice } from "@reduxjs/toolkit";
|
|
5
|
+
import { diff } from "deep-diff";
|
|
6
|
+
const defaultAnnotation = {
|
|
7
|
+
id: undefined,
|
|
8
|
+
// This has to be added, and is interpreted as an empty value. If you provide undefined, you'll be presented with unexpected behaviour.
|
|
9
|
+
content: [
|
|
10
|
+
{
|
|
11
|
+
type: "paragraph",
|
|
12
|
+
children: [{ text: "" }],
|
|
13
|
+
},
|
|
14
|
+
],
|
|
15
|
+
position: { x: 0, y: 0 },
|
|
16
|
+
};
|
|
17
|
+
const createInitialState = (annotation) => ({
|
|
18
|
+
/**
|
|
19
|
+
* The current annotation being edited.
|
|
20
|
+
*/
|
|
21
|
+
annotation: annotation || defaultAnnotation,
|
|
22
|
+
/**
|
|
23
|
+
* The current displays added to the editor. We're tracking this so they can be added or deleted
|
|
24
|
+
* depending on whether the editor is submitted or cancelled.
|
|
25
|
+
*/
|
|
26
|
+
displays: {
|
|
27
|
+
added: [],
|
|
28
|
+
deleted: [],
|
|
29
|
+
},
|
|
30
|
+
/**
|
|
31
|
+
* When set to true, will show a measurement chooser.
|
|
32
|
+
*/
|
|
33
|
+
pickingMeasurement: false,
|
|
34
|
+
/**
|
|
35
|
+
* The measurement chosen in the measurement chooser.
|
|
36
|
+
*/
|
|
37
|
+
chosenMeasurement: null,
|
|
38
|
+
/**
|
|
39
|
+
* An error that might have ocurred while selecting a measurement.
|
|
40
|
+
*/
|
|
41
|
+
pickingMeasurementError: null,
|
|
42
|
+
/**
|
|
43
|
+
* The MeasurementDisplay currently being editted.
|
|
44
|
+
*/
|
|
45
|
+
editingMeasurementDisplay: null,
|
|
46
|
+
});
|
|
47
|
+
const annotationEditorSlice = createSlice({
|
|
48
|
+
name: "annotationEditor",
|
|
49
|
+
initialState: createInitialState(),
|
|
50
|
+
reducers: {
|
|
51
|
+
initEditor: (state, action) => {
|
|
52
|
+
state.pickingMeasurement = false;
|
|
53
|
+
state.pickingMeasurementError = null;
|
|
54
|
+
state.chosenMeasurement = null;
|
|
55
|
+
state.editingMeasurementDisplay = null;
|
|
56
|
+
state.annotation = action.payload || defaultAnnotation;
|
|
57
|
+
state.displays = {
|
|
58
|
+
added: [],
|
|
59
|
+
deleted: [],
|
|
60
|
+
};
|
|
61
|
+
},
|
|
62
|
+
updateContent: (state, action) => {
|
|
63
|
+
const newContent = action.payload;
|
|
64
|
+
// Make a deep clone of the content.
|
|
65
|
+
const oldContent = JSON.parse(JSON.stringify(state.annotation.content));
|
|
66
|
+
const difference = diff(oldContent, newContent) || [];
|
|
67
|
+
// This compares the difference between the old content and new content, and checks
|
|
68
|
+
// if any measurement displays where created or deleted. We need to keep track of these
|
|
69
|
+
// because according to what happens with the editing annotation after the form is finished,
|
|
70
|
+
// we might have to delete measurement displays.
|
|
71
|
+
state.displays = difference.reduce((acc, c) => {
|
|
72
|
+
// Detect any deleted measurementDisplays.
|
|
73
|
+
if (c.kind === "A" &&
|
|
74
|
+
c.item.kind === "D" &&
|
|
75
|
+
c.item.lhs.type === "measurementDisplay") {
|
|
76
|
+
acc.deleted.push(c.item.lhs.measurementDisplayId);
|
|
77
|
+
acc.added.splice(acc.added.indexOf(c.item.lhs.measurementDisplayId), 1);
|
|
78
|
+
}
|
|
79
|
+
// Detect any added measurementDisplays.
|
|
80
|
+
if (c.kind === "A" &&
|
|
81
|
+
c.item.kind === "N" &&
|
|
82
|
+
c.item.rhs.type === "measurementDisplay") {
|
|
83
|
+
acc.added.push(c.item.rhs.measurementDisplayId);
|
|
84
|
+
}
|
|
85
|
+
return acc;
|
|
86
|
+
}, state.displays);
|
|
87
|
+
state.annotation.content = action.payload;
|
|
88
|
+
},
|
|
89
|
+
pickMeasurement: (state) => {
|
|
90
|
+
state.pickingMeasurement = true;
|
|
91
|
+
state.chosenMeasurement = null;
|
|
92
|
+
state.pickingMeasurementError = null;
|
|
93
|
+
},
|
|
94
|
+
pickMeasurementSuccess: (state, action) => {
|
|
95
|
+
state.editingMeasurementDisplay = action.payload;
|
|
96
|
+
state.pickingMeasurement = false;
|
|
97
|
+
state.chosenMeasurement = null;
|
|
98
|
+
},
|
|
99
|
+
pickMeasurementClose: (state) => {
|
|
100
|
+
state.pickingMeasurement = false;
|
|
101
|
+
state.chosenMeasurement = null;
|
|
102
|
+
},
|
|
103
|
+
pickMeasurementSubmit: (state) => {
|
|
104
|
+
state.pickingMeasurement = false;
|
|
105
|
+
},
|
|
106
|
+
pickMeasurementChoose: (state, action) => {
|
|
107
|
+
state.chosenMeasurement = action.payload;
|
|
108
|
+
},
|
|
109
|
+
pickMeasurementFail: (state, action) => {
|
|
110
|
+
state.pickingMeasurement = false;
|
|
111
|
+
state.pickingMeasurementError = action.payload;
|
|
112
|
+
},
|
|
113
|
+
editDisplay: (state, action) => {
|
|
114
|
+
state.editingMeasurementDisplay = action.payload;
|
|
115
|
+
},
|
|
116
|
+
finishEditingDisplay: (state) => {
|
|
117
|
+
state.editingMeasurementDisplay = null;
|
|
118
|
+
},
|
|
119
|
+
},
|
|
120
|
+
});
|
|
121
|
+
export const { initEditor, updateContent, pickMeasurement, pickMeasurementChoose, pickMeasurementSuccess, pickMeasurementClose, pickMeasurementSubmit, pickMeasurementFail, editDisplay, finishEditingDisplay, } = annotationEditorSlice.actions;
|
|
122
|
+
export default annotationEditorSlice.reducer;
|
|
123
123
|
//# sourceMappingURL=annotationEditor.slice.js.map
|
|
@@ -1,32 +1,32 @@
|
|
|
1
|
-
import { Node } from "slate";
|
|
2
|
-
import { Position2D } from "@insync-stageplayer/common";
|
|
3
|
-
/**
|
|
4
|
-
* An annotation that can be placed on a 2D surface
|
|
5
|
-
*/
|
|
6
|
-
export declare type Annotation = {
|
|
7
|
-
id: string;
|
|
8
|
-
/**
|
|
9
|
-
* The position {x, y} of the annotation.
|
|
10
|
-
*/
|
|
11
|
-
position: Position2D;
|
|
12
|
-
/**
|
|
13
|
-
* The content of the annotation, this is a slate js node.
|
|
14
|
-
*/
|
|
15
|
-
content?: Node[];
|
|
16
|
-
};
|
|
17
|
-
/**
|
|
18
|
-
* Checks if an argument is a valid annotation.
|
|
19
|
-
* @param arg
|
|
20
|
-
* @returns
|
|
21
|
-
*/
|
|
22
|
-
export declare function isAnnotation(arg: unknown): arg is Annotation;
|
|
23
|
-
/**
|
|
24
|
-
* Please read up https://redux-toolkit.js.org/usage/usage-with-typescript#createentityadapter to understand what this is.
|
|
25
|
-
*/
|
|
26
|
-
export declare const annotationsAdapter: import("@reduxjs/toolkit").EntityAdapter<Annotation>;
|
|
27
|
-
export declare const editAnnotation: import("@reduxjs/toolkit").ActionCreatorWithPayload<string, string>, editAnnotationCancel: import("@reduxjs/toolkit").ActionCreatorWithoutPayload<string>, editAnnotationSubmit: import("@reduxjs/toolkit").ActionCreatorWithPayload<any, string>, editAnnotationDelete: import("@reduxjs/toolkit").ActionCreatorWithoutPayload<string>, createAnnotation: import("@reduxjs/toolkit").ActionCreatorWithPayload<string, string>, createAnnotations: import("@reduxjs/toolkit").ActionCreatorWithPayload<Record<import("@reduxjs/toolkit").EntityId, Annotation> | Annotation[], string>, updateAnnotation: import("@reduxjs/toolkit").ActionCreatorWithPayload<import("@reduxjs/toolkit").Update<Annotation>, string>, deleteAnnotation: import("@reduxjs/toolkit").ActionCreatorWithPayload<import("@reduxjs/toolkit").EntityId, string>;
|
|
28
|
-
declare const _default: import("redux").Reducer<import("@reduxjs/toolkit").EntityState<Annotation> & {
|
|
29
|
-
editingAnnotation: string | undefined;
|
|
30
|
-
}, import("redux").AnyAction>;
|
|
31
|
-
export default _default;
|
|
1
|
+
import { Node } from "slate";
|
|
2
|
+
import { Position2D } from "@insync-stageplayer/common";
|
|
3
|
+
/**
|
|
4
|
+
* An annotation that can be placed on a 2D surface
|
|
5
|
+
*/
|
|
6
|
+
export declare type Annotation = {
|
|
7
|
+
id: string;
|
|
8
|
+
/**
|
|
9
|
+
* The position {x, y} of the annotation.
|
|
10
|
+
*/
|
|
11
|
+
position: Position2D;
|
|
12
|
+
/**
|
|
13
|
+
* The content of the annotation, this is a slate js node.
|
|
14
|
+
*/
|
|
15
|
+
content?: Node[];
|
|
16
|
+
};
|
|
17
|
+
/**
|
|
18
|
+
* Checks if an argument is a valid annotation.
|
|
19
|
+
* @param arg
|
|
20
|
+
* @returns
|
|
21
|
+
*/
|
|
22
|
+
export declare function isAnnotation(arg: unknown): arg is Annotation;
|
|
23
|
+
/**
|
|
24
|
+
* Please read up https://redux-toolkit.js.org/usage/usage-with-typescript#createentityadapter to understand what this is.
|
|
25
|
+
*/
|
|
26
|
+
export declare const annotationsAdapter: import("@reduxjs/toolkit").EntityAdapter<Annotation>;
|
|
27
|
+
export declare const editAnnotation: import("@reduxjs/toolkit").ActionCreatorWithPayload<string, string>, editAnnotationCancel: import("@reduxjs/toolkit").ActionCreatorWithoutPayload<string>, editAnnotationSubmit: import("@reduxjs/toolkit").ActionCreatorWithPayload<any, string>, editAnnotationDelete: import("@reduxjs/toolkit").ActionCreatorWithoutPayload<string>, createAnnotation: import("@reduxjs/toolkit").ActionCreatorWithPayload<string, string>, createAnnotations: import("@reduxjs/toolkit").ActionCreatorWithPayload<Record<import("@reduxjs/toolkit").EntityId, Annotation> | Annotation[], string>, updateAnnotation: import("@reduxjs/toolkit").ActionCreatorWithPayload<import("@reduxjs/toolkit").Update<Annotation>, string>, deleteAnnotation: import("@reduxjs/toolkit").ActionCreatorWithPayload<import("@reduxjs/toolkit").EntityId, string>;
|
|
28
|
+
declare const _default: import("redux").Reducer<import("@reduxjs/toolkit").EntityState<Annotation> & {
|
|
29
|
+
editingAnnotation: string | undefined;
|
|
30
|
+
}, import("redux").AnyAction>;
|
|
31
|
+
export default _default;
|
|
32
32
|
//# sourceMappingURL=annotations.slice.d.ts.map
|