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

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.
Files changed (55) hide show
  1. package/lib/components/AnnotationContent.d.ts +37 -37
  2. package/lib/components/AnnotationContent.js +59 -59
  3. package/lib/components/AnnotationEditForm.d.ts +26 -26
  4. package/lib/components/AnnotationEditForm.js +146 -146
  5. package/lib/components/AnnotationsModuleProvider.d.ts +36 -36
  6. package/lib/components/AnnotationsModuleProvider.js +20 -20
  7. package/lib/components/AnnotationsViewer.d.ts +15 -15
  8. package/lib/components/AnnotationsViewer.js +107 -107
  9. package/lib/components/DraggablePosition.d.ts +31 -31
  10. package/lib/components/DraggablePosition.js +62 -62
  11. package/lib/components/MeasurementDisplayDataContext.d.ts +10 -10
  12. package/lib/components/MeasurementDisplayDataContext.js +2 -2
  13. package/lib/components/MeasurementDisplayDataProvider.d.ts +15 -15
  14. package/lib/components/MeasurementDisplayDataProvider.d.ts.map +1 -1
  15. package/lib/components/MeasurementDisplayDataProvider.js +45 -45
  16. package/lib/components/MeasurementDisplayDataProvider.js.map +1 -1
  17. package/lib/components/MeasurementDisplayEditor.d.ts +19 -19
  18. package/lib/components/MeasurementDisplayEditor.js +136 -136
  19. package/lib/components/MeasurementDisplayElement.d.ts +18 -18
  20. package/lib/components/MeasurementDisplayElement.d.ts.map +1 -1
  21. package/lib/components/MeasurementDisplayElement.js +65 -97
  22. package/lib/components/MeasurementDisplayElement.js.map +1 -1
  23. package/lib/components/ModalAnnotationEditor.d.ts +12 -12
  24. package/lib/components/ModalAnnotationEditor.js +37 -37
  25. package/lib/formatNumber.d.ts +29 -29
  26. package/lib/formatNumber.js +12 -12
  27. package/lib/hooks/useMeasurementDisplayData.d.ts +15 -0
  28. package/lib/hooks/useMeasurementDisplayData.d.ts.map +1 -0
  29. package/lib/hooks/useMeasurementDisplayData.js +40 -0
  30. package/lib/hooks/useMeasurementDisplayData.js.map +1 -0
  31. package/lib/index.d.ts +8 -7
  32. package/lib/index.d.ts.map +1 -1
  33. package/lib/index.js +8 -7
  34. package/lib/index.js.map +1 -1
  35. package/lib/redux/actions.d.ts +1 -1
  36. package/lib/redux/actions.js +1 -1
  37. package/lib/redux/annotationEditor.slice.d.ts +37 -37
  38. package/lib/redux/annotationEditor.slice.d.ts.map +1 -1
  39. package/lib/redux/annotationEditor.slice.js +122 -122
  40. package/lib/redux/annotations.slice.d.ts +31 -31
  41. package/lib/redux/annotations.slice.d.ts.map +1 -1
  42. package/lib/redux/annotations.slice.js +65 -65
  43. package/lib/redux/measurementDisplayEditor.slice.d.ts +25 -25
  44. package/lib/redux/measurementDisplayEditor.slice.d.ts.map +1 -1
  45. package/lib/redux/measurementDisplayEditor.slice.js +36 -36
  46. package/lib/redux/measurementDisplays.slice.d.ts +25 -25
  47. package/lib/redux/measurementDisplays.slice.d.ts.map +1 -1
  48. package/lib/redux/measurementDisplays.slice.js +22 -22
  49. package/lib/redux/reducer.d.ts +51 -51
  50. package/lib/redux/reducer.js +65 -65
  51. package/lib/useBoundingRect.d.ts +8 -8
  52. package/lib/useBoundingRect.js +27 -27
  53. package/lib/util.d.ts +5 -5
  54. package/lib/util.js +7 -7
  55. package/package.json +5 -5
@@ -1,21 +1,21 @@
1
- import React, { useMemo } from "react";
2
- import { annotationsAdapter } from "../redux/annotations.slice";
3
- import { measurementDisplaysAdapter } from "../redux/measurementDisplays.slice";
4
- export const AnnotationsModuleContext = React.createContext({});
5
- /**
6
- * Provides the functionalities in this module to its children components.
7
- *
8
- * @param props
9
- * @returns
10
- */
11
- export const AnnotationsModuleProvider = (props) => {
12
- const { selector, children } = props;
13
- const entitiesSelectors = useMemo(() => {
14
- return {
15
- annotations: annotationsAdapter.getSelectors((s) => selector(s).annotations),
16
- measurementDisplays: measurementDisplaysAdapter.getSelectors((s) => selector(s).measurementDisplays),
17
- };
18
- }, [selector]);
19
- return (React.createElement(AnnotationsModuleContext.Provider, { value: { selector, entitiesSelectors } }, children));
20
- };
1
+ import React, { useMemo } from "react";
2
+ import { annotationsAdapter } from "../redux/annotations.slice";
3
+ import { measurementDisplaysAdapter } from "../redux/measurementDisplays.slice";
4
+ export const AnnotationsModuleContext = React.createContext({});
5
+ /**
6
+ * Provides the functionalities in this module to its children components.
7
+ *
8
+ * @param props
9
+ * @returns
10
+ */
11
+ export const AnnotationsModuleProvider = (props) => {
12
+ const { selector, children } = props;
13
+ const entitiesSelectors = useMemo(() => {
14
+ return {
15
+ annotations: annotationsAdapter.getSelectors((s) => selector(s).annotations),
16
+ measurementDisplays: measurementDisplaysAdapter.getSelectors((s) => selector(s).measurementDisplays),
17
+ };
18
+ }, [selector]);
19
+ return (React.createElement(AnnotationsModuleContext.Provider, { value: { selector, entitiesSelectors } }, children));
20
+ };
21
21
  //# sourceMappingURL=AnnotationsModuleProvider.js.map
@@ -1,16 +1,16 @@
1
- import React from "react";
2
- declare type AnnotationsViewerProps = React.HTMLAttributes<HTMLDivElement> & {
3
- /**
4
- * The annotations to be displayed inside this AnnotationsViewer.
5
- */
6
- annotations: string[];
7
- };
8
- /**
9
- * Given a list of annotation ids, will render them.
10
- *
11
- * @param param0
12
- * @returns
13
- */
14
- export declare const AnnotationsViewer: React.FC<AnnotationsViewerProps>;
15
- export {};
1
+ import React from "react";
2
+ declare type AnnotationsViewerProps = React.HTMLAttributes<HTMLDivElement> & {
3
+ /**
4
+ * The annotations to be displayed inside this AnnotationsViewer.
5
+ */
6
+ annotations: string[];
7
+ };
8
+ /**
9
+ * Given a list of annotation ids, will render them.
10
+ *
11
+ * @param param0
12
+ * @returns
13
+ */
14
+ export declare const AnnotationsViewer: React.FC<AnnotationsViewerProps>;
15
+ export {};
16
16
  //# sourceMappingURL=AnnotationsViewer.d.ts.map
@@ -1,110 +1,110 @@
1
- var __rest = (this && this.__rest) || function (s, e) {
2
- var t = {};
3
- for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
4
- t[p] = s[p];
5
- if (s != null && typeof Object.getOwnPropertySymbols === "function")
6
- for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
7
- if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
8
- t[p[i]] = s[p[i]];
9
- }
10
- return t;
11
- };
12
- import React, { useContext, useCallback, useMemo } from "react";
13
- import { shallowEqual, useDispatch, useSelector } from "react-redux";
14
- import { styled } from "@insync-stageplayer/ui-components";
15
- import { AnnotationContent, } from "./AnnotationContent";
16
- import { DraggablePosition } from "./DraggablePosition";
17
- import { editAnnotation, updateAnnotation } from "../redux/annotations.slice";
18
- import { AnnotationsModuleContext } from "./AnnotationsModuleProvider";
19
- import MeasurementDisplayElement from "./MeasurementDisplayElement";
20
- import { useBoundingRect } from "../useBoundingRect";
1
+ var __rest = (this && this.__rest) || function (s, e) {
2
+ var t = {};
3
+ for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
4
+ t[p] = s[p];
5
+ if (s != null && typeof Object.getOwnPropertySymbols === "function")
6
+ for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
7
+ if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
8
+ t[p[i]] = s[p[i]];
9
+ }
10
+ return t;
11
+ };
12
+ import React, { useContext, useCallback, useMemo } from "react";
13
+ import { shallowEqual, useDispatch, useSelector } from "react-redux";
14
+ import { styled } from "@insync-stageplayer/ui-components";
15
+ import { AnnotationContent, } from "./AnnotationContent";
16
+ import { DraggablePosition } from "./DraggablePosition";
17
+ import { editAnnotation, updateAnnotation } from "../redux/annotations.slice";
18
+ import { AnnotationsModuleContext } from "./AnnotationsModuleProvider";
19
+ import MeasurementDisplayElement from "./MeasurementDisplayElement";
20
+ import { useBoundingRect } from "../useBoundingRect";
21
21
  const StyledAnnotationContent = styled(AnnotationContent) `
22
22
  cursor: pointer;
23
- `;
24
- /**
25
- * Wrapper around MeasurementDisplayElement to make it compatible with slate.js
26
- * @param props
27
- * @returns
28
- */
29
- const MeasurementDisplayElementRenderer = ({ element, attributes, children, }) => {
30
- const { measurementDisplayId } = element;
31
- return (React.createElement("span", Object.assign({}, attributes),
32
- React.createElement(MeasurementDisplayElement, { id: measurementDisplayId, editable: false, xRange: { start: 0, duration: 50000 } }),
33
- children));
34
- };
35
- /**
36
- * The additions to slate-js for rendering custom elements.
37
- */
38
- const contentElements = {
39
- measurementDisplay: {
40
- isVoid: true,
41
- inline: true,
42
- renderer: MeasurementDisplayElementRenderer,
43
- },
44
- };
45
- /**
46
- * Given a list of annotation ids, will render them.
47
- *
48
- * @param param0
49
- * @returns
50
- */
51
- export const AnnotationsViewer = (_a) => {
52
- var { annotations } = _a, rest = __rest(_a, ["annotations"]);
53
- const [boundsRef, bounds] = useBoundingRect();
54
- /**
55
- * Consume the AnnotationsModule context so that we have access to the annotations slice
56
- * in the redux state.
57
- */
58
- const { entitiesSelectors } = useContext(AnnotationsModuleContext);
59
- const dispatch = useDispatch();
60
- /**
61
- * Selects the annotations for the given ids from the redux state, will
62
- * do a shallowEqual comparison to prevent rerenders if an annotation is changed
63
- * that is not displayed in this AnnotationViewer.
64
- */
65
- const dirtyEntities = useSelector((s) => {
66
- return entitiesSelectors.annotations
67
- .selectAll(s)
68
- .filter((v) => annotations.indexOf(v.id) !== -1);
69
- }, shallowEqual);
70
- const entities = useMemo(() => {
71
- return dirtyEntities.map((annotation) => {
72
- var _a;
73
- const go = (node) => {
74
- if ((node.type === "measurementDisplay" || node.type === "paragraph") &&
75
- !node.children) {
76
- return Object.assign(Object.assign({}, node), { children: [
77
- {
78
- text: "",
79
- },
80
- ] });
81
- }
82
- if (Array.isArray(node.children)) {
83
- return Object.assign(Object.assign({}, node), { children: node.children.map(go) });
84
- // return node.children.map(go);
85
- }
86
- return node;
87
- };
88
- // Transforming the Annotation to a SlateJS node.
89
- return Object.assign(Object.assign({}, annotation), { content: (_a = annotation.content) === null || _a === void 0 ? void 0 : _a.map(go) });
90
- });
91
- }, [dirtyEntities]);
92
- /**
93
- * Dispatches an action to redux and updates the position of an annotation.
94
- */
95
- const handleMoveAnnotation = useCallback((id) => (ev, position) => {
96
- dispatch(updateAnnotation({
97
- id,
98
- changes: {
99
- position,
100
- },
101
- }));
102
- }, [dispatch]);
103
- return (React.createElement(React.Fragment, null,
104
- React.createElement("div", Object.assign({}, rest, { ref: boundsRef }), bounds &&
105
- entities.map((e) => (React.createElement(DraggablePosition, { key: e.id, position: e.position, bounds: bounds, onMoveEnd: handleMoveAnnotation(e.id) },
106
- React.createElement(StyledAnnotationContent, { content: e.content, onClick: () => {
107
- dispatch(editAnnotation(e.id));
108
- }, elements: contentElements })))))));
109
- };
23
+ `;
24
+ /**
25
+ * Wrapper around MeasurementDisplayElement to make it compatible with slate.js
26
+ * @param props
27
+ * @returns
28
+ */
29
+ const MeasurementDisplayElementRenderer = ({ element, attributes, children, }) => {
30
+ const { measurementDisplayId } = element;
31
+ return (React.createElement("span", Object.assign({}, attributes),
32
+ React.createElement(MeasurementDisplayElement, { id: measurementDisplayId, editable: false, xRange: { start: 0, duration: 50000 } }),
33
+ children));
34
+ };
35
+ /**
36
+ * The additions to slate-js for rendering custom elements.
37
+ */
38
+ const contentElements = {
39
+ measurementDisplay: {
40
+ isVoid: true,
41
+ inline: true,
42
+ renderer: MeasurementDisplayElementRenderer,
43
+ },
44
+ };
45
+ /**
46
+ * Given a list of annotation ids, will render them.
47
+ *
48
+ * @param param0
49
+ * @returns
50
+ */
51
+ export const AnnotationsViewer = (_a) => {
52
+ var { annotations } = _a, rest = __rest(_a, ["annotations"]);
53
+ const [boundsRef, bounds] = useBoundingRect();
54
+ /**
55
+ * Consume the AnnotationsModule context so that we have access to the annotations slice
56
+ * in the redux state.
57
+ */
58
+ const { entitiesSelectors } = useContext(AnnotationsModuleContext);
59
+ const dispatch = useDispatch();
60
+ /**
61
+ * Selects the annotations for the given ids from the redux state, will
62
+ * do a shallowEqual comparison to prevent rerenders if an annotation is changed
63
+ * that is not displayed in this AnnotationViewer.
64
+ */
65
+ const dirtyEntities = useSelector((s) => {
66
+ return entitiesSelectors.annotations
67
+ .selectAll(s)
68
+ .filter((v) => annotations.indexOf(v.id) !== -1);
69
+ }, shallowEqual);
70
+ const entities = useMemo(() => {
71
+ return dirtyEntities.map((annotation) => {
72
+ var _a;
73
+ const go = (node) => {
74
+ if ((node.type === "measurementDisplay" || node.type === "paragraph") &&
75
+ !node.children) {
76
+ return Object.assign(Object.assign({}, node), { children: [
77
+ {
78
+ text: "",
79
+ },
80
+ ] });
81
+ }
82
+ if (Array.isArray(node.children)) {
83
+ return Object.assign(Object.assign({}, node), { children: node.children.map(go) });
84
+ // return node.children.map(go);
85
+ }
86
+ return node;
87
+ };
88
+ // Transforming the Annotation to a SlateJS node.
89
+ return Object.assign(Object.assign({}, annotation), { content: (_a = annotation.content) === null || _a === void 0 ? void 0 : _a.map(go) });
90
+ });
91
+ }, [dirtyEntities]);
92
+ /**
93
+ * Dispatches an action to redux and updates the position of an annotation.
94
+ */
95
+ const handleMoveAnnotation = useCallback((id) => (ev, position) => {
96
+ dispatch(updateAnnotation({
97
+ id,
98
+ changes: {
99
+ position,
100
+ },
101
+ }));
102
+ }, [dispatch]);
103
+ return (React.createElement(React.Fragment, null,
104
+ React.createElement("div", Object.assign({}, rest, { ref: boundsRef }), bounds &&
105
+ entities.map((e) => (React.createElement(DraggablePosition, { key: e.id, position: e.position, bounds: bounds, onMoveEnd: handleMoveAnnotation(e.id) },
106
+ React.createElement(StyledAnnotationContent, { content: e.content, onClick: () => {
107
+ dispatch(editAnnotation(e.id));
108
+ }, elements: contentElements })))))));
109
+ };
110
110
  //# sourceMappingURL=AnnotationsViewer.js.map
@@ -1,32 +1,32 @@
1
- import { Position2D } from "@insync-stageplayer/common";
2
- import { MoveEvent } from "react-move-hook";
3
- import React from "react";
4
- interface AnnotationPositionProps extends React.HTMLAttributes<HTMLDivElement> {
5
- /**
6
- * The xy position of the annotation represented in a decimal value between 0 and 1
7
- */
8
- position: Position2D;
9
- /**
10
- * The bounds within the annotations are displayed in pixels
11
- */
12
- bounds: DOMRect;
13
- /**
14
- * Callback when moving starts
15
- */
16
- onMoveStart?: (ev: MoveEvent, position: Position2D) => void;
17
- /**
18
- * Callback when moving ends
19
- */
20
- onMoveEnd?: (ev: MoveEvent, position: Position2D) => void;
21
- /**
22
- * Callback when moving
23
- */
24
- onMove?: (ev: MoveEvent, position: Position2D) => void;
25
- }
26
- /**
27
- * A position with drag & drop functionality
28
- * @param props
29
- */
30
- export declare const DraggablePosition: React.FC<AnnotationPositionProps>;
31
- export {};
1
+ import { Position2D } from "@insync-stageplayer/common";
2
+ import { MoveEvent } from "react-move-hook";
3
+ import React from "react";
4
+ interface AnnotationPositionProps extends React.HTMLAttributes<HTMLDivElement> {
5
+ /**
6
+ * The xy position of the annotation represented in a decimal value between 0 and 1
7
+ */
8
+ position: Position2D;
9
+ /**
10
+ * The bounds within the annotations are displayed in pixels
11
+ */
12
+ bounds: DOMRect;
13
+ /**
14
+ * Callback when moving starts
15
+ */
16
+ onMoveStart?: (ev: MoveEvent, position: Position2D) => void;
17
+ /**
18
+ * Callback when moving ends
19
+ */
20
+ onMoveEnd?: (ev: MoveEvent, position: Position2D) => void;
21
+ /**
22
+ * Callback when moving
23
+ */
24
+ onMove?: (ev: MoveEvent, position: Position2D) => void;
25
+ }
26
+ /**
27
+ * A position with drag & drop functionality
28
+ * @param props
29
+ */
30
+ export declare const DraggablePosition: React.FC<AnnotationPositionProps>;
31
+ export {};
32
32
  //# sourceMappingURL=DraggablePosition.d.ts.map
@@ -1,23 +1,23 @@
1
- var __rest = (this && this.__rest) || function (s, e) {
2
- var t = {};
3
- for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
4
- t[p] = s[p];
5
- if (s != null && typeof Object.getOwnPropertySymbols === "function")
6
- for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
7
- if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
8
- t[p[i]] = s[p[i]];
9
- }
10
- return t;
11
- };
12
- import { styled } from "@insync-stageplayer/ui-components";
13
- import { useMovable } from "react-move-hook";
14
- import React, { useCallback, useRef, useState } from "react";
15
- const calcRelativePosition = (ev, origin, bounds) => {
16
- return {
17
- x: origin.x + ev.delta.x / bounds.width,
18
- y: origin.y + ev.delta.y / bounds.height,
19
- };
20
- };
1
+ var __rest = (this && this.__rest) || function (s, e) {
2
+ var t = {};
3
+ for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
4
+ t[p] = s[p];
5
+ if (s != null && typeof Object.getOwnPropertySymbols === "function")
6
+ for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
7
+ if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
8
+ t[p[i]] = s[p[i]];
9
+ }
10
+ return t;
11
+ };
12
+ import { styled } from "@insync-stageplayer/ui-components";
13
+ import { useMovable } from "react-move-hook";
14
+ import React, { useCallback, useRef, useState } from "react";
15
+ const calcRelativePosition = (ev, origin, bounds) => {
16
+ return {
17
+ x: origin.x + ev.delta.x / bounds.width,
18
+ y: origin.y + ev.delta.y / bounds.height,
19
+ };
20
+ };
21
21
  const Handle = styled.div `
22
22
  position: absolute;
23
23
  border-radius: 100%;
@@ -26,9 +26,9 @@ const Handle = styled.div `
26
26
  top: 0.25em;
27
27
  left: 0.25em;
28
28
  cursor: move;
29
- `;
30
- const Component = styled.div.attrs({
31
- className: "p-3",
29
+ `;
30
+ const Component = styled.div.attrs({
31
+ className: "p-3",
32
32
  }) `
33
33
  border: 2px solid transparent;
34
34
  :hover {
@@ -37,43 +37,43 @@ const Component = styled.div.attrs({
37
37
  background-color: ${(props) => { var _a; return ((_a = props.theme.colors) === null || _a === void 0 ? void 0 : _a.secondary) || "black"; }};
38
38
  }
39
39
  }
40
- `;
41
- /**
42
- * A position with drag & drop functionality
43
- * @param props
44
- */
45
- export const DraggablePosition = (_a) => {
46
- var { position, bounds, style: styleProp, className, onMoveStart, onMoveEnd, onMove, children } = _a, rest = __rest(_a, ["position", "bounds", "style", "className", "onMoveStart", "onMoveEnd", "onMove", "children"]);
47
- // The current drag position, this will takes preference over the position prop.
48
- const [move, setMove] = useState();
49
- const sizeRef = useRef(null);
50
- const handleMove = useCallback((ev) => {
51
- setMove(ev);
52
- if (onMove)
53
- onMove(ev, calcRelativePosition(ev, position, bounds));
54
- }, [onMove, bounds, position]);
55
- const handleMoveStart = useCallback(() => {
56
- (ev) => {
57
- setMove(ev);
58
- if (onMoveStart)
59
- onMoveStart(ev, calcRelativePosition(ev, position, bounds));
60
- };
61
- }, [bounds, onMoveStart, position]);
62
- const handleMoveEnd = useCallback((ev) => {
63
- setMove(undefined);
64
- if (onMoveEnd)
65
- onMoveEnd(ev, calcRelativePosition(ev, position, bounds));
66
- }, [bounds, onMoveEnd, position]);
67
- // Using the useMovable hook to handle drag & drop functionality.
68
- const ref = useMovable(Object.assign(Object.assign({}, (bounds ? { bounds } : { unbounded: true })), { onMoveStart: handleMoveStart, onMoveEnd: handleMoveEnd, onMove: handleMove, sizeRef }));
69
- // The CSS styles we will attach to the output HTML node
70
- const style = Object.assign(Object.assign({}, styleProp), { position: "absolute", left: position.x * bounds.width, top: position.y * bounds.height });
71
- if (move && move.moving) {
72
- style.transform = `translate3d(${move.delta.x}px, ${move.delta.y}px, 0)`;
73
- style.userSelect = "none";
74
- }
75
- return (React.createElement(Component, Object.assign({ ref: sizeRef }, rest, { style: style }),
76
- React.createElement(Handle, { ref: ref }),
77
- children));
78
- };
40
+ `;
41
+ /**
42
+ * A position with drag & drop functionality
43
+ * @param props
44
+ */
45
+ export const DraggablePosition = (_a) => {
46
+ var { position, bounds, style: styleProp, className, onMoveStart, onMoveEnd, onMove, children } = _a, rest = __rest(_a, ["position", "bounds", "style", "className", "onMoveStart", "onMoveEnd", "onMove", "children"]);
47
+ // The current drag position, this will takes preference over the position prop.
48
+ const [move, setMove] = useState();
49
+ const sizeRef = useRef(null);
50
+ const handleMove = useCallback((ev) => {
51
+ setMove(ev);
52
+ if (onMove)
53
+ onMove(ev, calcRelativePosition(ev, position, bounds));
54
+ }, [onMove, bounds, position]);
55
+ const handleMoveStart = useCallback(() => {
56
+ (ev) => {
57
+ setMove(ev);
58
+ if (onMoveStart)
59
+ onMoveStart(ev, calcRelativePosition(ev, position, bounds));
60
+ };
61
+ }, [bounds, onMoveStart, position]);
62
+ const handleMoveEnd = useCallback((ev) => {
63
+ setMove(undefined);
64
+ if (onMoveEnd)
65
+ onMoveEnd(ev, calcRelativePosition(ev, position, bounds));
66
+ }, [bounds, onMoveEnd, position]);
67
+ // Using the useMovable hook to handle drag & drop functionality.
68
+ const ref = useMovable(Object.assign(Object.assign({}, (bounds ? { bounds } : { unbounded: true })), { onMoveStart: handleMoveStart, onMoveEnd: handleMoveEnd, onMove: handleMove, sizeRef }));
69
+ // The CSS styles we will attach to the output HTML node
70
+ const style = Object.assign(Object.assign({}, styleProp), { position: "absolute", left: position.x * bounds.width, top: position.y * bounds.height });
71
+ if (move && move.moving) {
72
+ style.transform = `translate3d(${move.delta.x}px, ${move.delta.y}px, 0)`;
73
+ style.userSelect = "none";
74
+ }
75
+ return (React.createElement(Component, Object.assign({ ref: sizeRef }, rest, { style: style }),
76
+ React.createElement(Handle, { ref: ref }),
77
+ children));
78
+ };
79
79
  //# sourceMappingURL=DraggablePosition.js.map
@@ -1,11 +1,11 @@
1
- /// <reference types="react" />
2
- import { MeasurementsTypes } from "@insync-stageplayer/measurements";
3
- declare type MeasurementDisplayDataValue = {
4
- register: (id: MeasurementsTypes.Measurement) => () => void;
5
- loading: boolean;
6
- error?: Error;
7
- data?: MeasurementsTypes.DataMap;
8
- };
9
- export declare const MeasurementDisplayDataContext: import("react").Context<MeasurementDisplayDataValue>;
10
- export {};
1
+ /// <reference types="react" />
2
+ import { MeasurementsTypes } from "@insync-stageplayer/measurements";
3
+ declare type MeasurementDisplayDataValue = {
4
+ register: (id: MeasurementsTypes.Measurement) => () => void;
5
+ loading: boolean;
6
+ error?: Error;
7
+ data?: MeasurementsTypes.DataMap;
8
+ };
9
+ export declare const MeasurementDisplayDataContext: import("react").Context<MeasurementDisplayDataValue>;
10
+ export {};
11
11
  //# sourceMappingURL=MeasurementDisplayDataContext.d.ts.map
@@ -1,3 +1,3 @@
1
- import { createContext } from "react";
2
- export const MeasurementDisplayDataContext = createContext({});
1
+ import { createContext } from "react";
2
+ export const MeasurementDisplayDataContext = createContext({});
3
3
  //# sourceMappingURL=MeasurementDisplayDataContext.js.map
@@ -1,16 +1,16 @@
1
- import { Timer } from "@insync-stageplayer/time";
2
- import React from "react";
3
- declare type MeasurementDisplayDataProviderProps = {
4
- /**
5
- * A Timer (from @insync-stageplayer/time) that emits times.
6
- */
7
- timer: Timer;
8
- };
9
- /**
10
- * Provides data for measurement displays. Keeps track of all registered measurement displays inside annotations.
11
- * @param props
12
- * @returns
13
- */
14
- export declare const MeasurementDisplayDataProvider: React.FC<MeasurementDisplayDataProviderProps>;
15
- export {};
1
+ import { Timer } from "@insync-stageplayer/time";
2
+ import React from "react";
3
+ declare type MeasurementDisplayDataProviderProps = {
4
+ /**
5
+ * A Timer (from @insync-stageplayer/time) that emits times.
6
+ */
7
+ timer: Timer;
8
+ };
9
+ /**
10
+ * Provides data for measurement displays. Keeps track of all registered measurement displays inside annotations.
11
+ * @param props
12
+ * @returns
13
+ */
14
+ export declare const MeasurementDisplayDataProvider: React.FC<MeasurementDisplayDataProviderProps>;
15
+ export {};
16
16
  //# sourceMappingURL=MeasurementDisplayDataProvider.d.ts.map
@@ -1 +1 @@
1
- {"version":3,"file":"MeasurementDisplayDataProvider.d.ts","sourceRoot":"","sources":["../../src/components/MeasurementDisplayDataProvider.tsx"],"names":[],"mappings":"AAKA,OAAO,EAAE,KAAK,EAAE,MAAM,0BAA0B,CAAC;AACjD,OAAO,KAAyC,MAAM,OAAO,CAAC;AAI9D,aAAK,mCAAmC,GAAG;IACzC;;OAEG;IACH,KAAK,EAAE,KAAK,CAAC;CACd,CAAC;AAEF;;;;GAIG;AACH,eAAO,MAAM,8BAA8B,EAAE,KAAK,CAAC,EAAE,CAAC,mCAAmC,CAuDtF,CAAC"}
1
+ {"version":3,"file":"MeasurementDisplayDataProvider.d.ts","sourceRoot":"","sources":["../../src/components/MeasurementDisplayDataProvider.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAE,KAAK,EAAE,MAAM,0BAA0B,CAAC;AACjD,OAAO,KAAyC,MAAM,OAAO,CAAC;AAI9D,aAAK,mCAAmC,GAAG;IACzC;;OAEG;IACH,KAAK,EAAE,KAAK,CAAC;CACd,CAAC;AAEF;;;;GAIG;AACH,eAAO,MAAM,8BAA8B,EAAE,KAAK,CAAC,EAAE,CAAC,mCAAmC,CAuDtF,CAAC"}