@cuemath/leap 3.1.35 → 3.1.37-akm-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.
- package/dist/features/circle-games/games/tutorial/tutorial.js +49 -30
- package/dist/features/circle-games/games/tutorial/tutorial.js.map +1 -1
- package/dist/features/cue-canvas/hooks/use-canvas-sync-broker.js +57 -62
- package/dist/features/cue-canvas/hooks/use-canvas-sync-broker.js.map +1 -1
- package/dist/index.d.ts +1 -1
- package/package.json +1 -1
|
@@ -1,48 +1,67 @@
|
|
|
1
|
-
import { jsxs as
|
|
2
|
-
import {
|
|
3
|
-
import
|
|
4
|
-
import
|
|
5
|
-
import { getTheme as
|
|
6
|
-
import { InfoBar as
|
|
7
|
-
import { GameTutorialWrapper as
|
|
8
|
-
const
|
|
9
|
-
src:
|
|
10
|
-
title:
|
|
11
|
-
onCross:
|
|
12
|
-
showProgress:
|
|
13
|
-
onTutorialPlayedOnce:
|
|
14
|
-
isJourneyActive:
|
|
1
|
+
import { jsxs as b, jsx as e } from "react/jsx-runtime";
|
|
2
|
+
import { useRef as l, useState as p, useCallback as D } from "react";
|
|
3
|
+
import L from "../../../../assets/line-icons/icons/cross.js";
|
|
4
|
+
import E from "../../../ui/text/text.js";
|
|
5
|
+
import { getTheme as V } from "../../../ui/theme/get-theme.js";
|
|
6
|
+
import { InfoBar as H } from "../../comps/info-bar/info-bar.js";
|
|
7
|
+
import { GameTutorialWrapper as U, GameTutorialHeader as W, HeaderIconContainer as k, GameTutorialContainer as A, VideoContainer as G, VideoProgressWrapper as S, VideoProgressContainer as j, VideoProgress as B } from "./tutorial-styled.js";
|
|
8
|
+
const N = ({
|
|
9
|
+
src: I,
|
|
10
|
+
title: c,
|
|
11
|
+
onCross: u,
|
|
12
|
+
showProgress: x = !0,
|
|
13
|
+
onTutorialPlayedOnce: i,
|
|
14
|
+
isJourneyActive: M
|
|
15
15
|
}) => {
|
|
16
|
-
const [
|
|
17
|
-
(
|
|
18
|
-
|
|
19
|
-
|
|
16
|
+
const s = l(null), f = l(!1), g = l(null), [h, a] = p(0), [d, $] = p(0), [w, v] = p(!1), { device: C } = V(), P = C === "mobile" ? "ab3-bold" : "ab2-bold", R = D(
|
|
17
|
+
(t) => {
|
|
18
|
+
if (!w) {
|
|
19
|
+
const o = t.target.currentTime || 0, n = t.target.duration || 1, r = o / n * 100;
|
|
20
|
+
r >= 90 && !f.current && (f.current = !0, i == null || i()), a(r), $(n);
|
|
21
|
+
}
|
|
20
22
|
},
|
|
21
|
-
[
|
|
22
|
-
)
|
|
23
|
-
|
|
24
|
-
(o
|
|
25
|
-
|
|
26
|
-
|
|
23
|
+
[i, w]
|
|
24
|
+
), T = (t) => {
|
|
25
|
+
const o = g.current;
|
|
26
|
+
if (!o) return 0;
|
|
27
|
+
const n = o.getBoundingClientRect(), r = "clientX" in t ? t.clientX : 0;
|
|
28
|
+
return Math.max(0, Math.min(1, (r - n.left) / n.width));
|
|
29
|
+
};
|
|
30
|
+
return /* @__PURE__ */ b(U, { ref: g, onMouseDown: () => {
|
|
31
|
+
if (!s.current || d === 0) return;
|
|
32
|
+
v(!0);
|
|
33
|
+
const t = (n) => {
|
|
34
|
+
const r = T(n), m = r * d;
|
|
35
|
+
s.current.currentTime = m, a(r * 100);
|
|
36
|
+
}, o = (n) => {
|
|
37
|
+
const r = T(n), m = r * d;
|
|
38
|
+
s.current.currentTime = m, a(r * 100), v(!1), window.removeEventListener("mousemove", t), window.removeEventListener("mouseup", o);
|
|
39
|
+
};
|
|
40
|
+
window.addEventListener("mousemove", t), window.addEventListener("mouseup", o);
|
|
41
|
+
}, children: [
|
|
42
|
+
(c || u) && /* @__PURE__ */ b(W, { children: [
|
|
43
|
+
c && /* @__PURE__ */ e(E, { $renderAs: "ac3", $color: "WHITE", $align: "center", children: c }),
|
|
44
|
+
u && /* @__PURE__ */ e(k, { children: /* @__PURE__ */ e(L, { color: "#fff", onClick: u }) })
|
|
27
45
|
] }),
|
|
28
|
-
|
|
29
|
-
/* @__PURE__ */ e(
|
|
46
|
+
M && /* @__PURE__ */ e(H, { hue: "PURPLE", children: /* @__PURE__ */ e(E, { $renderAs: P, $color: "WHITE_T_87", $align: "center", children: "Understanding the rules is always helpful before you begin." }) }),
|
|
47
|
+
/* @__PURE__ */ e(A, { children: /* @__PURE__ */ e(G, { children: /* @__PURE__ */ e(
|
|
30
48
|
"video",
|
|
31
49
|
{
|
|
50
|
+
ref: s,
|
|
32
51
|
loop: !0,
|
|
33
52
|
autoPlay: !0,
|
|
34
53
|
muted: !0,
|
|
35
|
-
src:
|
|
36
|
-
onTimeUpdate:
|
|
54
|
+
src: I,
|
|
55
|
+
onTimeUpdate: R,
|
|
37
56
|
disablePictureInPicture: !0,
|
|
38
57
|
itemType: "video/mp4",
|
|
39
58
|
playsInline: !0
|
|
40
59
|
}
|
|
41
60
|
) }) }),
|
|
42
|
-
|
|
61
|
+
x && /* @__PURE__ */ e(S, { children: /* @__PURE__ */ e(j, { children: h > 0 && /* @__PURE__ */ e(B, { $width: h }) }) })
|
|
43
62
|
] });
|
|
44
63
|
};
|
|
45
64
|
export {
|
|
46
|
-
|
|
65
|
+
N as Tutorial
|
|
47
66
|
};
|
|
48
67
|
//# sourceMappingURL=tutorial.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"tutorial.js","sources":["../../../../../src/features/circle-games/games/tutorial/tutorial.tsx"],"sourcesContent":["import type { ITutorialProps } from './tutorial-types';\nimport type { ChangeEvent } from 'react';\n\nimport { useCallback, useRef, useState } from 'react';\n\nimport CrossIcon from '../../../../assets/line-icons/icons/cross';\nimport Text from '../../../ui/text/text';\nimport { getTheme } from '../../../ui/theme/get-theme';\nimport { InfoBar } from '../../comps/info-bar/info-bar';\nimport * as Styled from './tutorial-styled';\n\nexport const Tutorial = ({\n src,\n title,\n onCross,\n showProgress = true,\n onTutorialPlayedOnce,\n isJourneyActive,\n}: ITutorialProps) => {\n const [progress, setProgress] = useState(0);\n const
|
|
1
|
+
{"version":3,"file":"tutorial.js","sources":["../../../../../src/features/circle-games/games/tutorial/tutorial.tsx"],"sourcesContent":["import type { ITutorialProps } from './tutorial-types';\nimport type { ChangeEvent } from 'react';\n\nimport { useCallback, useRef, useState } from 'react';\n\nimport CrossIcon from '../../../../assets/line-icons/icons/cross';\nimport Text from '../../../ui/text/text';\nimport { getTheme } from '../../../ui/theme/get-theme';\nimport { InfoBar } from '../../comps/info-bar/info-bar';\nimport * as Styled from './tutorial-styled';\n\nexport const Tutorial = ({\n src,\n title,\n onCross,\n showProgress = true,\n onTutorialPlayedOnce,\n isJourneyActive,\n}: ITutorialProps) => {\n const videoRef = useRef<HTMLVideoElement | null>(null);\n const hasVideoEnded = useRef(false);\n\n const wrapperRef = useRef<HTMLDivElement | null>(null);\n\n const [progress, setProgress] = useState(0);\n const [duration, setDuration] = useState(0);\n const [isDragging, setIsDragging] = useState(false);\n\n const { device } = getTheme();\n const tooltipTextRenderAs = device === 'mobile' ? 'ab3-bold' : 'ab2-bold';\n\n const onProgress = useCallback(\n (e: ChangeEvent<HTMLVideoElement>) => {\n if (!isDragging) {\n const current = e.target.currentTime || 0;\n const dur = e.target.duration || 1;\n const p = (current / dur) * 100;\n\n if (p >= 90 && !hasVideoEnded.current) {\n hasVideoEnded.current = true;\n onTutorialPlayedOnce?.();\n }\n\n setProgress(p);\n setDuration(dur);\n }\n },\n [onTutorialPlayedOnce, isDragging],\n );\n\n const getSeekPercentageFromScreen = (e: MouseEvent | React.MouseEvent) => {\n const wrapper = wrapperRef.current;\n\n if (!wrapper) return 0;\n\n const rect = wrapper.getBoundingClientRect();\n const x = 'clientX' in e ? e.clientX : 0;\n\n return Math.max(0, Math.min(1, (x - rect.left) / rect.width));\n };\n\n const onMouseDown = () => {\n if (!videoRef.current || duration === 0) return;\n\n setIsDragging(true);\n\n const handleMouseMove = (moveEvent: MouseEvent) => {\n const percentage = getSeekPercentageFromScreen(moveEvent);\n const newTime = percentage * duration;\n\n videoRef.current!.currentTime = newTime;\n setProgress(percentage * 100);\n };\n\n const handleMouseUp = (upEvent: MouseEvent) => {\n const percentage = getSeekPercentageFromScreen(upEvent);\n const newTime = percentage * duration;\n\n videoRef.current!.currentTime = newTime;\n setProgress(percentage * 100);\n setIsDragging(false);\n window.removeEventListener('mousemove', handleMouseMove);\n window.removeEventListener('mouseup', handleMouseUp);\n };\n\n window.addEventListener('mousemove', handleMouseMove);\n window.addEventListener('mouseup', handleMouseUp);\n };\n\n return (\n <Styled.GameTutorialWrapper ref={wrapperRef} onMouseDown={onMouseDown}>\n {(title || onCross) && (\n <Styled.GameTutorialHeader>\n {title && (\n <Text $renderAs=\"ac3\" $color=\"WHITE\" $align=\"center\">\n {title}\n </Text>\n )}\n {onCross && (\n <Styled.HeaderIconContainer>\n <CrossIcon color=\"#fff\" onClick={onCross} />\n </Styled.HeaderIconContainer>\n )}\n </Styled.GameTutorialHeader>\n )}\n\n {isJourneyActive && (\n <InfoBar hue=\"PURPLE\">\n <Text $renderAs={tooltipTextRenderAs} $color=\"WHITE_T_87\" $align=\"center\">\n Understanding the rules is always helpful before you begin.\n </Text>\n </InfoBar>\n )}\n\n <Styled.GameTutorialContainer>\n <Styled.VideoContainer>\n <video\n ref={videoRef}\n loop={true}\n autoPlay={true}\n muted={true}\n src={src}\n onTimeUpdate={onProgress}\n disablePictureInPicture={true}\n itemType=\"video/mp4\"\n playsInline\n />\n </Styled.VideoContainer>\n </Styled.GameTutorialContainer>\n\n {showProgress && (\n <Styled.VideoProgressWrapper>\n <Styled.VideoProgressContainer>\n {progress > 0 && <Styled.VideoProgress $width={progress} />}\n </Styled.VideoProgressContainer>\n </Styled.VideoProgressWrapper>\n )}\n </Styled.GameTutorialWrapper>\n );\n};\n"],"names":["Tutorial","src","title","onCross","showProgress","onTutorialPlayedOnce","isJourneyActive","videoRef","useRef","hasVideoEnded","wrapperRef","progress","setProgress","useState","duration","setDuration","isDragging","setIsDragging","device","getTheme","tooltipTextRenderAs","onProgress","useCallback","e","current","dur","p","getSeekPercentageFromScreen","wrapper","rect","x","Styled.GameTutorialWrapper","handleMouseMove","moveEvent","percentage","newTime","handleMouseUp","upEvent","jsxs","Styled.GameTutorialHeader","jsx","Text","Styled.HeaderIconContainer","CrossIcon","InfoBar","Styled.GameTutorialContainer","Styled.VideoContainer","Styled.VideoProgressWrapper","Styled.VideoProgressContainer","Styled.VideoProgress"],"mappings":"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"}
|
|
@@ -1,77 +1,72 @@
|
|
|
1
|
-
import { useMessageBrokerChannel as
|
|
2
|
-
import {
|
|
3
|
-
const
|
|
4
|
-
userId:
|
|
5
|
-
data:
|
|
6
|
-
height:
|
|
7
|
-
responseId:
|
|
8
|
-
}),
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
1
|
+
import { useMessageBrokerChannel as W } from "@cuemath/cue-message-broker";
|
|
2
|
+
import { useMemo as m, useState as $, useRef as j, useCallback as f } from "react";
|
|
3
|
+
const C = (e) => ({
|
|
4
|
+
userId: e.userId,
|
|
5
|
+
data: e.data,
|
|
6
|
+
height: e.height,
|
|
7
|
+
responseId: e.responseId
|
|
8
|
+
}), z = (e) => {
|
|
9
|
+
var i, r;
|
|
10
|
+
const n = {};
|
|
11
|
+
if (!e) return n;
|
|
12
|
+
for (const { message: u } of e) {
|
|
13
|
+
const t = (i = u.payload) == null ? void 0 : i.eventPayload, a = t == null ? void 0 : t.responseId;
|
|
14
|
+
if (!(t != null && t.responseId)) continue;
|
|
15
|
+
const o = C(t);
|
|
16
|
+
a && n[a] ? (r = n[a]) == null || r.push(o) : n[a] = [o];
|
|
17
|
+
}
|
|
18
|
+
return n;
|
|
19
|
+
}, A = (e, n, i, r = "canvas") => {
|
|
20
|
+
const u = m(
|
|
21
|
+
() => z(i),
|
|
22
|
+
[i]
|
|
23
|
+
), [t, a] = $(void 0), o = j({}), M = m(
|
|
23
24
|
() => ({
|
|
24
|
-
channelId:
|
|
25
|
-
ttl:
|
|
26
|
-
logger:
|
|
25
|
+
channelId: e,
|
|
26
|
+
ttl: r === "canvas" ? 0 : 24,
|
|
27
|
+
logger: n
|
|
27
28
|
}),
|
|
28
|
-
[
|
|
29
|
-
), S = f((
|
|
30
|
-
|
|
31
|
-
}, []),
|
|
32
|
-
(
|
|
33
|
-
const
|
|
34
|
-
|
|
35
|
-
var
|
|
36
|
-
const { payload:
|
|
37
|
-
if (!
|
|
29
|
+
[e, n, r]
|
|
30
|
+
), S = f((k, l) => {
|
|
31
|
+
o.current = { ...o.current, [k]: l };
|
|
32
|
+
}, []), b = f(
|
|
33
|
+
(k, l) => {
|
|
34
|
+
const h = u;
|
|
35
|
+
k.forEach((x) => {
|
|
36
|
+
var I;
|
|
37
|
+
const { payload: F } = x.message, { eventPayload: s } = F, c = s == null ? void 0 : s.responseId, O = s == null ? void 0 : s.data, v = s == null ? void 0 : s.userId, H = s == null ? void 0 : s.height, g = o.current[c];
|
|
38
|
+
if (!l && g)
|
|
38
39
|
g({
|
|
39
|
-
data:
|
|
40
|
-
height:
|
|
41
|
-
userId:
|
|
42
|
-
responseId:
|
|
40
|
+
data: O,
|
|
41
|
+
height: H,
|
|
42
|
+
userId: v,
|
|
43
|
+
responseId: c
|
|
43
44
|
});
|
|
44
45
|
else {
|
|
45
|
-
const p =
|
|
46
|
-
|
|
46
|
+
const p = C(s);
|
|
47
|
+
c && h[c] ? (I = h[c]) == null || I.push(p) : h[c] = [p];
|
|
47
48
|
}
|
|
48
|
-
}),
|
|
49
|
-
const e = { ...a };
|
|
50
|
-
return Object.keys(n).forEach((s) => {
|
|
51
|
-
var t;
|
|
52
|
-
s && e[s] ? (t = e[s]) == null || t.push(...n[s] ?? []) : e[s] = n[s] ?? [];
|
|
53
|
-
}), e;
|
|
54
|
-
});
|
|
49
|
+
}), a(h);
|
|
55
50
|
},
|
|
56
|
-
[]
|
|
57
|
-
), { publish: D, channelStatus: R, channel:
|
|
58
|
-
channelOptions:
|
|
59
|
-
consumerFn:
|
|
60
|
-
metadataRequired:
|
|
61
|
-
}),
|
|
62
|
-
|
|
63
|
-
}, [
|
|
51
|
+
[u]
|
|
52
|
+
), { publish: D, channelStatus: R, channel: d, channelMetadata: q, setChannelMetadata: B } = W({
|
|
53
|
+
channelOptions: M,
|
|
54
|
+
consumerFn: b,
|
|
55
|
+
metadataRequired: r === "whiteboard"
|
|
56
|
+
}), w = f(() => {
|
|
57
|
+
d && d.destroyChannel();
|
|
58
|
+
}, [d]);
|
|
64
59
|
return {
|
|
65
60
|
publishStrokes: D,
|
|
66
61
|
channelStatus: R,
|
|
67
|
-
closeChannel:
|
|
68
|
-
initialStrokesData:
|
|
62
|
+
closeChannel: w,
|
|
63
|
+
initialStrokesData: t,
|
|
69
64
|
registerCallback: S,
|
|
70
|
-
setChannelMetadata:
|
|
71
|
-
channelMetadata:
|
|
65
|
+
setChannelMetadata: B,
|
|
66
|
+
channelMetadata: q
|
|
72
67
|
};
|
|
73
|
-
},
|
|
68
|
+
}, J = A;
|
|
74
69
|
export {
|
|
75
|
-
|
|
70
|
+
J as default
|
|
76
71
|
};
|
|
77
72
|
//# sourceMappingURL=use-canvas-sync-broker.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"use-canvas-sync-broker.js","sources":["../../../../src/features/cue-canvas/hooks/use-canvas-sync-broker.ts"],"sourcesContent":["import type {\n IActionData,\n ICanvasUpdateConfig,\n IPublishData,\n TCueCanvasChangeDataObject,\n TRenderAs,\n} from '../types/cue-canvas';\n\nimport { useMessageBrokerChannel, type IChannelMessage } from '@cuemath/cue-message-broker';\nimport { useMemo, useCallback, useState, useRef } from 'react';\n\ninterface IMessage {\n eventName: string;\n eventPayload: {\n responseId: string;\n data: TCueCanvasChangeDataObject;\n userId: string;\n height: number;\n };\n}\n\nconst extractStrokeData = (payload: IMessage['eventPayload']): IActionData => ({\n userId: payload.userId,\n data: payload.data,\n height: payload.height,\n responseId: payload.responseId,\n});\n\nconst
|
|
1
|
+
{"version":3,"file":"use-canvas-sync-broker.js","sources":["../../../../src/features/cue-canvas/hooks/use-canvas-sync-broker.ts"],"sourcesContent":["import type {\n IActionData,\n ICanvasUpdateConfig,\n IPublishData,\n TCueCanvasChangeDataObject,\n TRenderAs,\n} from '../types/cue-canvas';\n\nimport { useMessageBrokerChannel, type IChannelMessage } from '@cuemath/cue-message-broker';\nimport { useMemo, useCallback, useState, useRef } from 'react';\n\ninterface IMessage {\n eventName: string;\n eventPayload: {\n responseId: string;\n data: TCueCanvasChangeDataObject;\n userId: string;\n height: number;\n };\n}\n\nconst extractStrokeData = (payload: IMessage['eventPayload']): IActionData => ({\n userId: payload.userId,\n data: payload.data,\n height: payload.height,\n responseId: payload.responseId,\n});\n\nconst getCanvasDataFromInitialData = (\n initialCanvasData: Array<IChannelMessage> | undefined,\n): Record<string, IActionData[]> => {\n const map: Record<string, IActionData[]> = {};\n\n if (!initialCanvasData) return map;\n\n for (const { message } of initialCanvasData) {\n const payload = (message.payload as IMessage)?.eventPayload;\n const qrId = payload?.responseId;\n\n if (!payload?.responseId) continue;\n\n const strokeData = extractStrokeData(payload);\n\n if (qrId && map[qrId]) {\n map[qrId]?.push(strokeData);\n } else {\n map[qrId] = [strokeData];\n }\n }\n\n return map;\n};\n\nconst useCanvasSyncBroker = (\n channelId: string,\n logEvent: (type: string, payload?: Record<string, unknown>) => void,\n initialCanvasData?: Array<IChannelMessage>,\n type: TRenderAs = 'canvas',\n) => {\n const initialCanvasDataMap = useMemo(\n () => getCanvasDataFromInitialData(initialCanvasData),\n [initialCanvasData],\n );\n const [initialStrokesData, setInitialStrokesData] = useState<\n Record<string, IActionData[]> | undefined\n >(undefined);\n const callbacksMapRef = useRef<Record<string, (data: IActionData) => void>>({});\n\n const channelOptions = useMemo(\n () => ({\n channelId,\n ttl: type === 'canvas' ? 0 : 24,\n logger: logEvent,\n }),\n [channelId, logEvent, type],\n );\n\n const registerCallback = useCallback((qrId: string, cb: (data: IActionData) => void) => {\n callbacksMapRef.current = { ...callbacksMapRef.current, [qrId]: cb };\n }, []);\n\n const onMessageReceive = useCallback(\n (messages: Array<IChannelMessage>, initialData?: boolean) => {\n const strokesPerWidgetMap: Record<string, Array<IActionData>> = initialCanvasDataMap;\n\n messages.forEach(message => {\n const { payload } = message.message;\n const { eventPayload } = payload as IMessage;\n const qrId = eventPayload?.responseId as string;\n const strokes = eventPayload?.data;\n const userId = eventPayload?.userId;\n const canvasHeight = eventPayload?.height;\n const widgetOnReceiveCallback = callbacksMapRef.current[qrId];\n\n if (!initialData && widgetOnReceiveCallback) {\n widgetOnReceiveCallback({\n data: strokes,\n height: canvasHeight,\n userId,\n responseId: qrId,\n });\n } else {\n const strokeData = extractStrokeData(eventPayload);\n\n if (qrId && strokesPerWidgetMap[qrId]) {\n strokesPerWidgetMap[qrId]?.push(strokeData);\n } else {\n strokesPerWidgetMap[qrId] = [strokeData];\n }\n }\n });\n setInitialStrokesData(strokesPerWidgetMap);\n },\n [initialCanvasDataMap],\n );\n\n const { publish, channelStatus, channel, channelMetadata, setChannelMetadata } =\n useMessageBrokerChannel<IPublishData, ICanvasUpdateConfig>({\n channelOptions,\n consumerFn: onMessageReceive,\n metadataRequired: type === 'whiteboard',\n });\n\n const closeChannel = useCallback(() => {\n if (channel) {\n channel.destroyChannel();\n }\n }, [channel]);\n\n return {\n publishStrokes: publish,\n channelStatus,\n closeChannel,\n initialStrokesData,\n registerCallback,\n setChannelMetadata,\n channelMetadata,\n };\n};\n\nexport default useCanvasSyncBroker;\n"],"names":["extractStrokeData","payload","getCanvasDataFromInitialData","initialCanvasData","map","message","_a","qrId","strokeData","_b","useCanvasSyncBroker","channelId","logEvent","type","initialCanvasDataMap","useMemo","initialStrokesData","setInitialStrokesData","useState","callbacksMapRef","useRef","channelOptions","registerCallback","useCallback","cb","onMessageReceive","messages","initialData","strokesPerWidgetMap","eventPayload","strokes","userId","canvasHeight","widgetOnReceiveCallback","publish","channelStatus","channel","channelMetadata","setChannelMetadata","useMessageBrokerChannel","closeChannel","useCanvasSyncBroker$1"],"mappings":"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"}
|
package/dist/index.d.ts
CHANGED
|
@@ -5784,7 +5784,7 @@ export declare const useCanvasSyncBroker: (channelId: string, logEvent: (type: s
|
|
|
5784
5784
|
publishStrokes: ((message: IPublishData) => boolean) | undefined;
|
|
5785
5785
|
channelStatus: ChannelStatus | undefined;
|
|
5786
5786
|
closeChannel: () => void;
|
|
5787
|
-
initialStrokesData: Record<string, IActionData[]
|
|
5787
|
+
initialStrokesData: Record<string, IActionData[]> | undefined;
|
|
5788
5788
|
registerCallback: (qrId: string, cb: (data: IActionData) => void) => void;
|
|
5789
5789
|
setChannelMetadata: ((metadata: ICanvasUpdateConfig, merge?: boolean) => void) | undefined;
|
|
5790
5790
|
channelMetadata: ICanvasUpdateConfig | null | undefined;
|