@cuemath/leap 3.1.34 → 3.1.35-aa0
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/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/features/worksheet/worksheet/worksheet-sidebar/question-guide.js +26 -28
- package/dist/features/worksheet/worksheet/worksheet-sidebar/question-guide.js.map +1 -1
- package/dist/index.d.ts +1 -1
- package/package.json +1 -1
|
@@ -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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"}
|
|
@@ -1,45 +1,43 @@
|
|
|
1
|
-
import { jsxs as
|
|
2
|
-
import { memo as
|
|
1
|
+
import { jsxs as r, jsx as e } from "react/jsx-runtime";
|
|
2
|
+
import { memo as L, useState as T, useCallback as h, useMemo as v, useRef as H, useEffect as X } from "react";
|
|
3
3
|
import $ from "../../../ui/buttons/clickable/clickable.js";
|
|
4
4
|
import c from "../../../ui/layout/flex-view.js";
|
|
5
5
|
import y from "../../../ui/separator/separator.js";
|
|
6
6
|
import u from "../../../ui/text/text.js";
|
|
7
|
-
import
|
|
7
|
+
import N from "../../constants/events.js";
|
|
8
8
|
import { GuideContainer as P, HintIcon as V, SolIcon as j, Pointer as x, SectionContainer as B, Section as W, CloseIcon as K, Guide as M } from "./worksheet-sidebar-styled.js";
|
|
9
|
-
const Z =
|
|
10
|
-
({ questionWidth: f, questions:
|
|
9
|
+
const Z = L(
|
|
10
|
+
({ questionWidth: f, questions: _, activeQuestionIndex: O, learnosity: S, actionbarHeight: p, loggerRef: l }) => {
|
|
11
11
|
var C;
|
|
12
|
-
const [t, s] = T(), [
|
|
12
|
+
const [t, s] = T(), [k, A] = T({
|
|
13
13
|
top: 0,
|
|
14
14
|
left: 0
|
|
15
|
-
}), { top: g, left: b } =
|
|
16
|
-
s("HINT"), l.current(
|
|
15
|
+
}), { top: g, left: b } = k, R = h(() => {
|
|
16
|
+
s("HINT"), l.current(N.WORKSHEET_V3_HINT_SEEN);
|
|
17
|
+
}, [l]), w = h(() => {
|
|
18
|
+
s("SOL"), l.current(N.WORKSHEET_V3_SOLUTION_SEEN);
|
|
17
19
|
}, [l]), G = h(() => {
|
|
18
|
-
s("SOL"), l.current(_.WORKSHEET_V3_SOLUTION_SEEN);
|
|
19
|
-
}, [l]), L = h(() => {
|
|
20
20
|
s(() => {
|
|
21
21
|
});
|
|
22
|
-
}, []), { hints: n, solution: d } = ((C = O
|
|
22
|
+
}, []), { hints: n, solution: d } = ((C = _[O]) == null ? void 0 : C.metadata) || {}, o = v(() => t === void 0 ? void 0 : t === "HINT" ? n : d, [t, n, d]), E = H(null), I = H(null), m = h((a) => {
|
|
23
23
|
if (a.current) {
|
|
24
|
-
const
|
|
25
|
-
|
|
26
|
-
top:
|
|
27
|
-
left:
|
|
24
|
+
const i = a.current.getBoundingClientRect();
|
|
25
|
+
A({
|
|
26
|
+
top: i.top + i.height / 2 - 8,
|
|
27
|
+
left: i.right - 78
|
|
28
28
|
// 52px (sidebar width) + 16px (gutter) + 10px
|
|
29
29
|
});
|
|
30
30
|
}
|
|
31
31
|
}, []);
|
|
32
|
-
return
|
|
33
|
-
|
|
34
|
-
}, [
|
|
35
|
-
|
|
36
|
-
}, [t, m]), /* @__PURE__ */ i(P, { $background: "WHITE", children: [
|
|
37
|
-
/* @__PURE__ */ e($, { label: "hints", onClick: w, disabled: !n, children: /* @__PURE__ */ i(c, { $alignItems: "center", $justifyContent: "center", ref: I, children: [
|
|
32
|
+
return t && o && S && S.renderMath("mathjax"), X(() => {
|
|
33
|
+
t === "HINT" ? m(I) : t === "SOL" ? m(E) : o || s(void 0);
|
|
34
|
+
}, [t, m, o]), /* @__PURE__ */ r(P, { $background: "WHITE", children: [
|
|
35
|
+
/* @__PURE__ */ e($, { label: "hints", onClick: R, disabled: !n, children: /* @__PURE__ */ r(c, { $alignItems: "center", $justifyContent: "center", ref: I, children: [
|
|
38
36
|
/* @__PURE__ */ e(V, { width: 32, height: 32, $disabled: !n }),
|
|
39
37
|
/* @__PURE__ */ e(u, { $renderAs: "eyebrow2", $color: n ? "BLACK" : "GREY_4", children: "HINT" }),
|
|
40
38
|
/* @__PURE__ */ e(c, { $gap: 8, $alignItems: "center", children: /* @__PURE__ */ e(y, { width: 24, height: 1, background: "GREY_2" }) })
|
|
41
39
|
] }) }),
|
|
42
|
-
/* @__PURE__ */ e($, { label: "solution", onClick:
|
|
40
|
+
/* @__PURE__ */ e($, { label: "solution", onClick: w, disabled: !d, children: /* @__PURE__ */ r(c, { $alignItems: "center", $justifyContent: "center", ref: E, children: [
|
|
43
41
|
/* @__PURE__ */ e(j, { width: 32, height: 32, $disabled: !d }),
|
|
44
42
|
/* @__PURE__ */ e(u, { $renderAs: "eyebrow2", $color: n ? "BLACK" : "GREY_4", children: "SOL" })
|
|
45
43
|
] }) }),
|
|
@@ -51,7 +49,7 @@ const Z = v(
|
|
|
51
49
|
$questionWidth: f,
|
|
52
50
|
$actionbarHeight: p,
|
|
53
51
|
$borderRadius: 10,
|
|
54
|
-
children: /* @__PURE__ */
|
|
52
|
+
children: /* @__PURE__ */ r(
|
|
55
53
|
W,
|
|
56
54
|
{
|
|
57
55
|
$gutterX: 1,
|
|
@@ -59,13 +57,13 @@ const Z = v(
|
|
|
59
57
|
$questionWidth: f,
|
|
60
58
|
$actionbarHeight: p,
|
|
61
59
|
children: [
|
|
62
|
-
/* @__PURE__ */ e($, { label: "close", onClick:
|
|
60
|
+
/* @__PURE__ */ e($, { label: "close", onClick: G, children: /* @__PURE__ */ e(K, {}) }),
|
|
63
61
|
/* @__PURE__ */ e(c, { $gutterX: 0.5, children: /* @__PURE__ */ e(u, { $renderAs: "eyebrow2", $color: "ORANGE_5", $marginBottomX: 0.25, children: t === "HINT" ? "HINTS:" : "SOLUTION:" }) }),
|
|
64
|
-
|
|
65
|
-
|
|
62
|
+
o && o.map((a, i) => /* @__PURE__ */ r(c, { $gutterX: 0.5, $gapX: 0.5, children: [
|
|
63
|
+
o.length > 1 && /* @__PURE__ */ r(u, { $renderAs: "eyebrow2", $color: "ORANGE_5", $marginBottomX: 0.25, children: [
|
|
66
64
|
t,
|
|
67
65
|
" ",
|
|
68
|
-
|
|
66
|
+
i + 1,
|
|
69
67
|
":"
|
|
70
68
|
] }),
|
|
71
69
|
/* @__PURE__ */ e(
|
|
@@ -76,7 +74,7 @@ const Z = v(
|
|
|
76
74
|
}
|
|
77
75
|
}
|
|
78
76
|
)
|
|
79
|
-
] },
|
|
77
|
+
] }, i.toString()))
|
|
80
78
|
]
|
|
81
79
|
}
|
|
82
80
|
)
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"question-guide.js","sources":["../../../../../src/features/worksheet/worksheet/worksheet-sidebar/question-guide.tsx"],"sourcesContent":["import type { ILearnosity, IWorksheetProps, IWorksheetQuestion } from '../worksheet-types';\n\nimport React, { memo, useCallback, useEffect, useMemo, useState, useRef } from 'react';\n\nimport Clickable from '../../../ui/buttons/clickable/clickable';\nimport FlexView from '../../../ui/layout/flex-view';\nimport Separator from '../../../ui/separator/separator';\nimport Text from '../../../ui/text/text';\nimport EVENTS from '../../constants/events';\nimport {\n Section,\n GuideContainer,\n CloseIcon,\n SolIcon,\n HintIcon,\n SectionContainer,\n Guide,\n Pointer,\n} from './worksheet-sidebar-styled';\n\ntype TSections = 'HINT' | 'SOL';\n\ninterface IQuestionGuideProps extends Pick<IWorksheetProps, 'loggerRef'> {\n questionWidth: number;\n questions: IWorksheetQuestion[];\n activeQuestionIndex: number;\n learnosity: ILearnosity;\n actionbarHeight: number;\n}\n\nconst QuestionGuide: React.FC<IQuestionGuideProps> = memo(\n ({ questionWidth, questions, activeQuestionIndex, learnosity, actionbarHeight, loggerRef }) => {\n const [activeSection, setActiveSection] = useState<TSections | undefined>();\n const [pointerPosition, setPointerPosition] = useState({\n top: 0,\n left: 0,\n });\n const { top, left } = pointerPosition;\n\n const handleHintClick = useCallback(() => {\n setActiveSection('HINT');\n loggerRef.current(EVENTS.WORKSHEET_V3_HINT_SEEN);\n }, [loggerRef]);\n const handleSolClick = useCallback(() => {\n setActiveSection('SOL');\n loggerRef.current(EVENTS.WORKSHEET_V3_SOLUTION_SEEN);\n }, [loggerRef]);\n const handleClose = useCallback(() => {\n setActiveSection(() => undefined);\n }, []);\n\n const { hints, solution } = questions[activeQuestionIndex]?.metadata || {};\n\n const activeSectionData = useMemo(() => {\n return activeSection === undefined ? undefined : activeSection === 'HINT' ? hints : solution;\n }, [activeSection, hints, solution]);\n\n const sqlRef = useRef<HTMLDivElement>(null);\n const hintRef = useRef<HTMLDivElement>(null);\n\n const updatePointerPosition = useCallback((ref: React.RefObject<HTMLDivElement>) => {\n if (ref.current) {\n const rect = ref.current.getBoundingClientRect();\n\n setPointerPosition({\n top: rect.top + rect.height / 2 - 8,\n left: rect.right - 78, // 52px (sidebar width) + 16px (gutter) + 10px\n });\n }\n }, []);\n\n
|
|
1
|
+
{"version":3,"file":"question-guide.js","sources":["../../../../../src/features/worksheet/worksheet/worksheet-sidebar/question-guide.tsx"],"sourcesContent":["import type { ILearnosity, IWorksheetProps, IWorksheetQuestion } from '../worksheet-types';\n\nimport React, { memo, useCallback, useEffect, useMemo, useState, useRef } from 'react';\n\nimport Clickable from '../../../ui/buttons/clickable/clickable';\nimport FlexView from '../../../ui/layout/flex-view';\nimport Separator from '../../../ui/separator/separator';\nimport Text from '../../../ui/text/text';\nimport EVENTS from '../../constants/events';\nimport {\n Section,\n GuideContainer,\n CloseIcon,\n SolIcon,\n HintIcon,\n SectionContainer,\n Guide,\n Pointer,\n} from './worksheet-sidebar-styled';\n\ntype TSections = 'HINT' | 'SOL';\n\ninterface IQuestionGuideProps extends Pick<IWorksheetProps, 'loggerRef'> {\n questionWidth: number;\n questions: IWorksheetQuestion[];\n activeQuestionIndex: number;\n learnosity: ILearnosity;\n actionbarHeight: number;\n}\n\nconst QuestionGuide: React.FC<IQuestionGuideProps> = memo(\n ({ questionWidth, questions, activeQuestionIndex, learnosity, actionbarHeight, loggerRef }) => {\n const [activeSection, setActiveSection] = useState<TSections | undefined>();\n const [pointerPosition, setPointerPosition] = useState({\n top: 0,\n left: 0,\n });\n const { top, left } = pointerPosition;\n\n const handleHintClick = useCallback(() => {\n setActiveSection('HINT');\n loggerRef.current(EVENTS.WORKSHEET_V3_HINT_SEEN);\n }, [loggerRef]);\n const handleSolClick = useCallback(() => {\n setActiveSection('SOL');\n loggerRef.current(EVENTS.WORKSHEET_V3_SOLUTION_SEEN);\n }, [loggerRef]);\n const handleClose = useCallback(() => {\n setActiveSection(() => undefined);\n }, []);\n\n const { hints, solution } = questions[activeQuestionIndex]?.metadata || {};\n\n const activeSectionData = useMemo(() => {\n return activeSection === undefined ? undefined : activeSection === 'HINT' ? hints : solution;\n }, [activeSection, hints, solution]);\n\n const sqlRef = useRef<HTMLDivElement>(null);\n const hintRef = useRef<HTMLDivElement>(null);\n\n const updatePointerPosition = useCallback((ref: React.RefObject<HTMLDivElement>) => {\n if (ref.current) {\n const rect = ref.current.getBoundingClientRect();\n\n setPointerPosition({\n top: rect.top + rect.height / 2 - 8,\n left: rect.right - 78, // 52px (sidebar width) + 16px (gutter) + 10px\n });\n }\n }, []);\n\n if (activeSection && activeSectionData && learnosity) {\n learnosity.renderMath('mathjax');\n }\n\n useEffect(() => {\n if (activeSection === 'HINT') {\n updatePointerPosition(hintRef);\n } else if (activeSection === 'SOL') {\n updatePointerPosition(sqlRef);\n } else if (!activeSectionData) {\n setActiveSection(undefined);\n }\n }, [activeSection, updatePointerPosition, activeSectionData]);\n\n return (\n <GuideContainer $background=\"WHITE\">\n <Clickable label=\"hints\" onClick={handleHintClick} disabled={!hints}>\n <FlexView $alignItems=\"center\" $justifyContent=\"center\" ref={hintRef}>\n <HintIcon width={32} height={32} $disabled={!hints} />\n <Text $renderAs=\"eyebrow2\" $color={!hints ? 'GREY_4' : 'BLACK'}>\n HINT\n </Text>\n <FlexView $gap={8} $alignItems=\"center\">\n <Separator width={24} height={1} background=\"GREY_2\" />\n </FlexView>\n </FlexView>\n </Clickable>\n <Clickable label=\"solution\" onClick={handleSolClick} disabled={!solution}>\n <FlexView $alignItems=\"center\" $justifyContent=\"center\" ref={sqlRef}>\n <SolIcon width={32} height={32} $disabled={!solution} />\n <Text $renderAs=\"eyebrow2\" $color={!hints ? 'GREY_4' : 'BLACK'}>\n SOL\n </Text>\n </FlexView>\n </Clickable>\n {activeSection && top && left && <Pointer topValue={top} leftValue={left} />}\n {activeSection && (\n <SectionContainer\n $background=\"WHITE\"\n $questionWidth={questionWidth}\n $actionbarHeight={actionbarHeight}\n $borderRadius={10}\n >\n <Section\n $gutterX={1}\n $gapX={1}\n $questionWidth={questionWidth}\n $actionbarHeight={actionbarHeight}\n >\n <Clickable label=\"close\" onClick={handleClose}>\n <CloseIcon />\n </Clickable>\n <FlexView $gutterX={0.5}>\n <Text $renderAs=\"eyebrow2\" $color=\"ORANGE_5\" $marginBottomX={0.25}>\n {activeSection === 'HINT' ? 'HINTS:' : 'SOLUTION:'}\n </Text>\n </FlexView>\n {activeSectionData &&\n activeSectionData.map((item, index) => (\n <FlexView $gutterX={0.5} $gapX={0.5} key={index.toString()}>\n {activeSectionData.length > 1 && (\n <Text $renderAs=\"eyebrow2\" $color=\"ORANGE_5\" $marginBottomX={0.25}>\n {activeSection} {index + 1}:\n </Text>\n )}\n <Guide\n dangerouslySetInnerHTML={{\n __html: item,\n }}\n />\n </FlexView>\n ))}\n </Section>\n </SectionContainer>\n )}\n </GuideContainer>\n );\n },\n);\n\nexport default QuestionGuide;\n"],"names":["QuestionGuide","memo","questionWidth","questions","activeQuestionIndex","learnosity","actionbarHeight","loggerRef","activeSection","setActiveSection","useState","pointerPosition","setPointerPosition","top","left","handleHintClick","useCallback","EVENTS","handleSolClick","handleClose","hints","solution","_a","activeSectionData","useMemo","sqlRef","useRef","hintRef","updatePointerPosition","ref","rect","useEffect","jsxs","GuideContainer","jsx","Clickable","FlexView","HintIcon","Text","Separator","SolIcon","Pointer","SectionContainer","Section","CloseIcon","item","index","Guide"],"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;
|