@cuemath/leap 2.8.34 → 2.8.35-aa0

package/dist/features/cue-canvas/cue-canvas-core.js.map

@@ -1 +1 @@
-{"version":3,"file":"cue-canvas-core.js","sources":["../../../src/features/cue-canvas/cue-canvas-core.ts"],"sourcesContent":["import '../../library/polypad';\nimport type { TUserTypes } from '../ui/types';\nimport type {\n  IActionData,\n  TCueCanvasChangeData,\n  TCueCanvasTool,\n  TPublish,\n  TSubscribe,\n} from './types/cue-canvas';\nimport type { ICreateOptions } from './types/cue-canvas';\nimport type { IPolypad, IPolyPadInstance } from './types/polypad';\n\nimport { getReverseMap, getToolAndSubtool, removeMask } from './cue-canvas-helpers';\n\ndeclare global {\n  interface Window {\n    Polypad: IPolypad;\n  }\n}\nexport class CueCanvasCore {\n  private polycanvas: IPolyPadInstance | undefined;\n  private publish?: TPublish;\n  private height: number;\n  private onUpdateHeight: (height: number) => void;\n  private userId: string;\n  private responseId: string;\n  private userType: TUserTypes;\n\n  constructor(\n    onPublish: TPublish,\n    onSubscribe: TSubscribe,\n    onUpdateHeight: (height: number) => void,\n    height: number,\n    userId: string,\n    responseId: string,\n    userType: TUserTypes,\n  ) {\n    this.onUpdateHeight = onUpdateHeight;\n    this.height = height;\n    this.userId = userId;\n    this.responseId = responseId;\n    this.publish = onPublish;\n    this.userType = userType;\n    onSubscribe(this.responseId, this.update);\n  }\n\n  async create({ canvasElementRef, canvasConfig, canvasSetting, initialData }: ICreateOptions) {\n    if (!canvasElementRef.current) {\n      throw new Error('PolyCanvas: Div Element Not found for canvas');\n    }\n    this.polycanvas = await window.Polypad.create(canvasElementRef.current, {\n      initial: {\n        options: canvasConfig,\n      },\n      ...canvasSetting,\n    });\n\n    removeMask(canvasElementRef);\n    this.polycanvas.on('change', this.onChange);\n    if (initialData) {\n      this.update(initialData);\n    }\n  }\n\n  resetViewPort = () => {\n    if (this.polycanvas) {\n      this.polycanvas.resetViewport();\n    }\n  };\n\n  onChange = (e: unknown) => {\n    const data = e as TCueCanvasChangeData;\n    const payload = Object.fromEntries(data.entries());\n\n    if (this.publish) {\n      this.publish({\n        eventName: 'cue_canvas_changed',\n        eventPayload: {\n          data: payload,\n          height: this.height,\n          userId: this.userId,\n          responseId: this.responseId,\n        },\n      });\n    }\n  };\n\n  undo = () => {\n    if (!this.polycanvas) {\n      return;\n    }\n\n    const data = this.polycanvas.undo() as TCueCanvasChangeData;\n\n    if (!data) {\n      return;\n    }\n\n    const undoData = getReverseMap(data);\n\n    this.onChange(undoData);\n  };\n\n  redo = () => {\n    if (!this.polycanvas) {\n      return;\n    }\n\n    const data = this.polycanvas.redo() as TCueCanvasChangeData;\n\n    if (!data) {\n      return;\n    }\n\n    this.onChange(data);\n  };\n\n  setTool = (tool: TCueCanvasTool) => {\n    if (this.polycanvas) {\n      const [currTool, currSubTool] = getToolAndSubtool(tool);\n\n      switch (currTool) {\n        case 'undo':\n          this.undo();\n          break;\n        case 'redo':\n          this.redo();\n          break;\n        default:\n          this.polycanvas.setTool(currTool, currSubTool);\n      }\n    }\n  };\n\n  updateCanvas = ({ data, userId }: IActionData) => {\n    const canEditStroke = this.userType === 'TEACHER' || userId === this.userId;\n\n    Object.entries(data).forEach(([key, value]) => {\n      if (!value[0] && value[1]) {\n        this.polycanvas?.add({ ...value[1], cannotEdit: !canEditStroke }, key);\n      } else if (value[0] && !value[1]) {\n        this.polycanvas?.delete(key);\n      } else {\n        // This is the case for tile edit (rotate, flip, slice etc)\n        // this.polycanvas?.update(key, { ...value[1] });\n      }\n    });\n  };\n  /**\n   * The `update` method is called in two cases:\n   * 1. When receiving initial data to update the canvas content.\n   * 2. When receiving strokes from other peers to update the canvas content.\n   * Each item can contain multiple actions, which are applied to the canvas.\n   *\n   * The method checks if the payload is an array or a single object.\n   * If it's an array, it iterates over each item and updates the canvas accordingly.\n   * If it's a single object, it directly updates the canvas.\n   *\n   * Additionally, if the payload contains a height greater than the current height of the canvas, the `updateHeight` method is called to update the canvas height.\n   */\n  update = (payload: IActionData | IActionData[]) => {\n    if (Array.isArray(payload)) {\n      const heights = payload.map(data => data.height);\n      const maxHeight = Math.max(...heights);\n\n      if (maxHeight > this.height) {\n        this.updateHeight(maxHeight);\n      }\n      payload.forEach(item => this.updateCanvas(item));\n    } else {\n      if (payload.height > this.height) {\n        this.updateHeight(payload.height);\n      }\n      this.updateCanvas(payload);\n    }\n  };\n\n  setColor = (color: string) => {\n    if (this.polycanvas) {\n      this.polycanvas.setColor(color);\n    }\n  };\n\n  updateHeight = (height: number) => {\n    this.height = height;\n    this.onUpdateHeight(height);\n  };\n\n  destroy = () => {\n    if (this.polycanvas) {\n      this.polycanvas.off('change', this.onChange);\n      this.polycanvas.destroy();\n      this.polycanvas = undefined;\n    }\n  };\n}\n"],"names":["CueCanvasCore","onPublish","onSubscribe","onUpdateHeight","height","userId","responseId","userType","__publicField","e","payload","data","undoData","getReverseMap","tool","currTool","currSubTool","getToolAndSubtool","canEditStroke","key","value","_a","_b","heights","maxHeight","item","color","canvasElementRef","canvasConfig","canvasSetting","initialData","removeMask"],"mappings":"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"}
+{"version":3,"file":"cue-canvas-core.js","sources":["../../../src/features/cue-canvas/cue-canvas-core.ts"],"sourcesContent":["import type { TUserTypes } from '../ui/types';\nimport type {\n  IActionData,\n  TCueCanvasChangeData,\n  TCueCanvasTool,\n  TPublish,\n  TSubscribe,\n} from './types/cue-canvas';\nimport type { ICreateOptions } from './types/cue-canvas';\nimport type { IPolypad, IPolyPadInstance } from './types/polypad';\n\nimport { getReverseMap, getToolAndSubtool, removeMask } from './cue-canvas-helpers';\n\ndeclare global {\n  interface Window {\n    Polypad: IPolypad;\n  }\n}\nexport class CueCanvasCore {\n  private polycanvas: IPolyPadInstance | undefined;\n  private publish?: TPublish;\n  private height: number;\n  private onUpdateHeight: (height: number) => void;\n  private userId: string;\n  private responseId: string;\n  private userType: TUserTypes;\n\n  constructor(\n    onPublish: TPublish,\n    onSubscribe: TSubscribe,\n    onUpdateHeight: (height: number) => void,\n    height: number,\n    userId: string,\n    responseId: string,\n    userType: TUserTypes,\n  ) {\n    this.onUpdateHeight = onUpdateHeight;\n    this.height = height;\n    this.userId = userId;\n    this.responseId = responseId;\n    this.publish = onPublish;\n    this.userType = userType;\n    onSubscribe(this.responseId, this.update);\n  }\n\n  async create({ canvasElementRef, canvasConfig, canvasSetting, initialData }: ICreateOptions) {\n    if (!canvasElementRef.current) {\n      throw new Error('PolyCanvas: Div Element Not found for canvas');\n    }\n    this.polycanvas = await window.Polypad.create(canvasElementRef.current, {\n      initial: {\n        options: canvasConfig,\n      },\n      ...canvasSetting,\n    });\n\n    removeMask(canvasElementRef);\n    this.polycanvas.on('change', this.onChange);\n    if (initialData) {\n      this.update(initialData);\n    }\n  }\n\n  resetViewPort = () => {\n    if (this.polycanvas) {\n      this.polycanvas.resetViewport();\n    }\n  };\n\n  onChange = (e: unknown) => {\n    const data = e as TCueCanvasChangeData;\n    const payload = Object.fromEntries(data.entries());\n\n    if (this.publish) {\n      this.publish({\n        eventName: 'cue_canvas_changed',\n        eventPayload: {\n          data: payload,\n          height: this.height,\n          userId: this.userId,\n          responseId: this.responseId,\n        },\n      });\n    }\n  };\n\n  undo = () => {\n    if (!this.polycanvas) {\n      return;\n    }\n\n    const data = this.polycanvas.undo() as TCueCanvasChangeData;\n\n    if (!data) {\n      return;\n    }\n\n    const undoData = getReverseMap(data);\n\n    this.onChange(undoData);\n  };\n\n  redo = () => {\n    if (!this.polycanvas) {\n      return;\n    }\n\n    const data = this.polycanvas.redo() as TCueCanvasChangeData;\n\n    if (!data) {\n      return;\n    }\n\n    this.onChange(data);\n  };\n\n  setTool = (tool: TCueCanvasTool) => {\n    if (this.polycanvas) {\n      const [currTool, currSubTool] = getToolAndSubtool(tool);\n\n      switch (currTool) {\n        case 'undo':\n          this.undo();\n          break;\n        case 'redo':\n          this.redo();\n          break;\n        default:\n          this.polycanvas.setTool(currTool, currSubTool);\n      }\n    }\n  };\n\n  updateCanvas = ({ data, userId }: IActionData) => {\n    const canEditStroke = this.userType === 'TEACHER' || userId === this.userId;\n\n    Object.entries(data).forEach(([key, value]) => {\n      if (!value[0] && value[1]) {\n        this.polycanvas?.add({ ...value[1], cannotEdit: !canEditStroke }, key);\n      } else if (value[0] && !value[1]) {\n        this.polycanvas?.delete(key);\n      } else {\n        // This is the case for tile edit (rotate, flip, slice etc)\n        // this.polycanvas?.update(key, { ...value[1] });\n      }\n    });\n  };\n  /**\n   * The `update` method is called in two cases:\n   * 1. When receiving initial data to update the canvas content.\n   * 2. When receiving strokes from other peers to update the canvas content.\n   * Each item can contain multiple actions, which are applied to the canvas.\n   *\n   * The method checks if the payload is an array or a single object.\n   * If it's an array, it iterates over each item and updates the canvas accordingly.\n   * If it's a single object, it directly updates the canvas.\n   *\n   * Additionally, if the payload contains a height greater than the current height of the canvas, the `updateHeight` method is called to update the canvas height.\n   */\n  update = (payload: IActionData | IActionData[]) => {\n    if (Array.isArray(payload)) {\n      const heights = payload.map(data => data.height);\n      const maxHeight = Math.max(...heights);\n\n      if (maxHeight > this.height) {\n        this.updateHeight(maxHeight);\n      }\n      payload.forEach(item => this.updateCanvas(item));\n    } else {\n      if (payload.height > this.height) {\n        this.updateHeight(payload.height);\n      }\n      this.updateCanvas(payload);\n    }\n  };\n\n  setColor = (color: string) => {\n    if (this.polycanvas) {\n      this.polycanvas.setColor(color);\n    }\n  };\n\n  updateHeight = (height: number) => {\n    this.height = height;\n    this.onUpdateHeight(height);\n  };\n\n  destroy = () => {\n    if (this.polycanvas) {\n      this.polycanvas.off('change', this.onChange);\n      this.polycanvas.destroy();\n      this.polycanvas = undefined;\n    }\n  };\n}\n"],"names":["CueCanvasCore","onPublish","onSubscribe","onUpdateHeight","height","userId","responseId","userType","__publicField","e","payload","data","undoData","getReverseMap","tool","currTool","currSubTool","getToolAndSubtool","canEditStroke","key","value","_a","_b","heights","maxHeight","item","color","canvasElementRef","canvasConfig","canvasSetting","initialData","removeMask"],"mappings":"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"}

package/dist/features/cue-canvas/hooks/use-canvas-sync-broker.js

@@ -1,65 +1,74 @@
-import { useMessageBrokerChannel as B } from "@cuemath/cue-message-broker";
-import { useState as j, useRef as D, useMemo as q, useCallback as p } from "react";
-const w = (f, g) => {
-  const [C, k] = j(
-    {}
-  ), c = D({}), m = q(
+import { useMessageBrokerChannel as q } from "@cuemath/cue-message-broker";
+import { useState as x, useRef as w, useMemo as E, useCallback as h } from "react";
+const I = (c) => ({
+  userId: c.userId,
+  data: c.data,
+  height: c.height,
+  responseId: c.responseId
+}), F = (c, f, g) => {
+  const [d, m] = x(
+    () => {
+      var o, r;
+      const n = {};
+      if (!g) return n;
+      for (const { message: a } of g) {
+        const e = (o = a.payload) == null ? void 0 : o.eventPayload, s = e == null ? void 0 : e.responseId;
+        if (!(e != null && e.responseId)) continue;
+        const t = I(e);
+        s && n[s] ? (r = n[s]) == null || r.push(t) : n[s] = [t];
+      }
+      return n;
+    }
+  ), u = w({}), b = E(
     () => ({
-      channelId: f,
+      channelId: c,
       ttl: 0,
-      logger: g
+      logger: f
     }),
-    [f, g]
-  ), I = p((a, n) => {
-    c.current = { ...c.current, [a]: n };
-  }, []), S = p(
-    (a, n) => {
-      const t = {};
-      a.forEach((i) => {
-        var d;
-        const { payload: r } = i.message, { eventPayload: s } = r, e = s == null ? void 0 : s.responseId, u = s == null ? void 0 : s.data, h = s == null ? void 0 : s.userId, l = s == null ? void 0 : s.height, b = c.current[e];
-        !n && b ? b({
-          data: u,
-          height: l,
-          userId: h,
-          responseId: e
-        }) : e && t[e] ? (d = t[e]) == null || d.push({
-          userId: h,
-          data: u,
-          height: l,
-          responseId: e
-        }) : t[e] = [
-          {
-            userId: h,
-            data: u,
-            height: l,
-            responseId: e
-          }
-        ];
-      }), Object.keys(t).length > 0 && k(n ? t : (i) => {
-        const r = { ...i };
-        return Object.keys(t).forEach((s) => {
-          var e;
-          s && r[s] ? (e = r[s]) == null || e.push(...t[s] ?? []) : r[s] = t[s] ?? [];
-        }), r;
+    [c, f]
+  ), S = h((n, o) => {
+    u.current = { ...u.current, [n]: o };
+  }, []), C = h(
+    (n, o) => {
+      const r = {};
+      n.forEach((a) => {
+        var p;
+        const { payload: e } = a.message, { eventPayload: s } = e, t = s == null ? void 0 : s.responseId, R = s == null ? void 0 : s.data, B = s == null ? void 0 : s.userId, j = s == null ? void 0 : s.height, l = u.current[t];
+        if (!o && l)
+          l({
+            data: R,
+            height: j,
+            userId: B,
+            responseId: t
+          });
+        else {
+          const k = I(s);
+          t && r[t] ? (p = r[t]) == null || p.push(k) : r[t] = [k];
+        }
+      }), Object.keys(r).length > 0 && m((a) => {
+        const e = { ...a };
+        return Object.keys(r).forEach((s) => {
+          var t;
+          s && e[s] ? (t = e[s]) == null || t.push(...r[s] ?? []) : e[s] = r[s] ?? [];
+        }), e;
       });
     },
     []
-  ), { publish: M, channelStatus: O, channel: o } = B({
-    channelOptions: m,
-    consumerFn: S
-  }), R = p(() => {
-    o && o.destroyChannel();
-  }, [o]);
+  ), { publish: D, channelStatus: M, channel: i } = q({
+    channelOptions: b,
+    consumerFn: C
+  }), O = h(() => {
+    i && i.destroyChannel();
+  }, [i]);
   return {
-    publishStrokes: M,
-    channelStatus: O,
-    closeChannel: R,
-    initialStrokesData: C,
-    registerCallback: I
+    publishStrokes: D,
+    channelStatus: M,
+    closeChannel: O,
+    initialStrokesData: d,
+    registerCallback: S
   };
-}, F = w;
+}, $ = F;
 export {
-  F as default
+  $ as default
 };
 //# sourceMappingURL=use-canvas-sync-broker.js.map

package/dist/features/cue-canvas/hooks/use-canvas-sync-broker.js.map

@@ -1 +1 @@
-{"version":3,"file":"use-canvas-sync-broker.js","sources":["../../../../src/features/cue-canvas/hooks/use-canvas-sync-broker.ts"],"sourcesContent":["import type { IActionData, TCueCanvasChangeDataObject } 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 useCanvasSyncBroker = (\n  channelId: string,\n  logEvent: (type: string, payload?: Record<string, unknown>) => void,\n) => {\n  const [initialStrokesData, setInitialStrokesData] = useState<Record<string, Array<IActionData>>>(\n    {},\n  );\n  const callbacksMapRef = useRef<Record<string, (data: IActionData) => void>>({});\n\n  const channelOptions = useMemo(\n    () => ({\n      channelId,\n      ttl: 0,\n      logger: logEvent,\n    }),\n    [channelId, logEvent],\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>> = {};\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          if (qrId && strokesPerWidgetMap[qrId]) {\n            strokesPerWidgetMap[qrId]?.push({\n              userId,\n              data: strokes,\n              height: canvasHeight,\n              responseId: qrId,\n            });\n          } else {\n            strokesPerWidgetMap[qrId] = [\n              {\n                userId,\n                data: strokes,\n                height: canvasHeight,\n                responseId: qrId,\n              },\n            ];\n          }\n        }\n      });\n\n      if (Object.keys(strokesPerWidgetMap).length > 0) {\n        if (initialData) {\n          setInitialStrokesData(strokesPerWidgetMap);\n        } else {\n          setInitialStrokesData(prevData => {\n            const currentData = { ...prevData };\n\n            Object.keys(strokesPerWidgetMap).forEach(key => {\n              if (key && currentData[key]) {\n                currentData[key]?.push(...(strokesPerWidgetMap[key] ?? []));\n              } else {\n                currentData[key] = strokesPerWidgetMap[key] ?? [];\n              }\n            });\n\n            return currentData;\n          });\n        }\n      }\n    },\n    [],\n  );\n\n  const { publish, channelStatus, channel } = useMessageBrokerChannel({\n    channelOptions,\n    consumerFn: onMessageReceive,\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  };\n};\n\nexport default useCanvasSyncBroker;\n"],"names":["useCanvasSyncBroker","channelId","logEvent","initialStrokesData","setInitialStrokesData","useState","callbacksMapRef","useRef","channelOptions","useMemo","registerCallback","useCallback","qrId","cb","onMessageReceive","messages","initialData","strokesPerWidgetMap","message","payload","eventPayload","strokes","userId","canvasHeight","widgetOnReceiveCallback","_a","prevData","currentData","key","publish","channelStatus","channel","useMessageBrokerChannel","closeChannel","useCanvasSyncBroker$1"],"mappings":";;AAeA,MAAMA,IAAsB,CAC1BC,GACAC,MACG;AACG,QAAA,CAACC,GAAoBC,CAAqB,IAAIC;AAAA,IAClD,CAAC;AAAA,EAAA,GAEGC,IAAkBC,EAAoD,CAAA,CAAE,GAExEC,IAAiBC;AAAA,IACrB,OAAO;AAAA,MACL,WAAAR;AAAA,MACA,KAAK;AAAA,MACL,QAAQC;AAAA,IAAA;AAAA,IAEV,CAACD,GAAWC,CAAQ;AAAA,EAAA,GAGhBQ,IAAmBC,EAAY,CAACC,GAAcC,MAAoC;AACtE,IAAAP,EAAA,UAAU,EAAE,GAAGA,EAAgB,SAAS,CAACM,CAAI,GAAGC;EAClE,GAAG,CAAE,CAAA,GAECC,IAAmBH;AAAA,IACvB,CAACI,GAAkCC,MAA0B;AAC3D,YAAMC,IAA0D,CAAA;AAEhE,MAAAF,EAAS,QAAQ,CAAWG,MAAA;;AACpB,cAAA,EAAE,SAAAC,EAAQ,IAAID,EAAQ,SACtB,EAAE,cAAAE,EAAiB,IAAAD,GACnBP,IAAOQ,KAAA,gBAAAA,EAAc,YACrBC,IAAUD,KAAA,gBAAAA,EAAc,MACxBE,IAASF,KAAA,gBAAAA,EAAc,QACvBG,IAAeH,KAAA,gBAAAA,EAAc,QAC7BI,IAA0BlB,EAAgB,QAAQM,CAAI;AAExD,QAAA,CAACI,KAAeQ,IACMA,EAAA;AAAA,UACtB,MAAMH;AAAA,UACN,QAAQE;AAAA,UACR,QAAAD;AAAA,UACA,YAAYV;AAAA,QAAA,CACb,IAEGA,KAAQK,EAAoBL,CAAI,KACda,IAAAR,EAAAL,CAAI,MAAJ,QAAAa,EAAO,KAAK;AAAA,UAC9B,QAAAH;AAAA,UACA,MAAMD;AAAA,UACN,QAAQE;AAAA,UACR,YAAYX;AAAA,QAAA,KAGdK,EAAoBL,CAAI,IAAI;AAAA,UAC1B;AAAA,YACE,QAAAU;AAAA,YACA,MAAMD;AAAA,YACN,QAAQE;AAAA,YACR,YAAYX;AAAA,UACd;AAAA,QAAA;AAAA,MAGN,CACD,GAEG,OAAO,KAAKK,CAAmB,EAAE,SAAS,KAE1Cb,EADEY,IACoBC,IAEA,CAAYS,MAAA;AAC1B,cAAAC,IAAc,EAAE,GAAGD;AAEzB,sBAAO,KAAKT,CAAmB,EAAE,QAAQ,CAAOW,MAAA;;AAC1C,UAAAA,KAAOD,EAAYC,CAAG,KACZH,IAAAE,EAAAC,CAAG,MAAH,QAAAH,EAAM,KAAK,GAAIR,EAAoBW,CAAG,KAAK,CAAA,KAEvDD,EAAYC,CAAG,IAAIX,EAAoBW,CAAG,KAAK,CAAA;AAAA,QACjD,CACD,GAEMD;AAAA,MAAA,CAbgC;AAAA,IAiB/C;AAAA,IACA,CAAC;AAAA,EAAA,GAGG,EAAE,SAAAE,GAAS,eAAAC,GAAe,SAAAC,EAAA,IAAYC,EAAwB;AAAA,IAClE,gBAAAxB;AAAA,IACA,YAAYM;AAAA,EAAA,CACb,GAEKmB,IAAetB,EAAY,MAAM;AACrC,IAAIoB,KACFA,EAAQ,eAAe;AAAA,EACzB,GACC,CAACA,CAAO,CAAC;AAEL,SAAA;AAAA,IACL,gBAAgBF;AAAA,IAChB,eAAAC;AAAA,IACA,cAAAG;AAAA,IACA,oBAAA9B;AAAA,IACA,kBAAAO;AAAA,EAAA;AAEJ,GAEAwB,IAAelC;"}
+{"version":3,"file":"use-canvas-sync-broker.js","sources":["../../../../src/features/cue-canvas/hooks/use-canvas-sync-broker.ts"],"sourcesContent":["import type { IActionData, TCueCanvasChangeDataObject } 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 useCanvasSyncBroker = (\n  channelId: string,\n  logEvent: (type: string, payload?: Record<string, unknown>) => void,\n  initialCanvasData?: Array<IChannelMessage>,\n) => {\n  const [initialStrokesData, setInitialStrokesData] = useState<Record<string, IActionData[]>>(\n    () => {\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  );\n  const callbacksMapRef = useRef<Record<string, (data: IActionData) => void>>({});\n\n  const channelOptions = useMemo(\n    () => ({\n      channelId,\n      ttl: 0,\n      logger: logEvent,\n    }),\n    [channelId, logEvent],\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>> = {};\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\n      if (Object.keys(strokesPerWidgetMap).length > 0) {\n        setInitialStrokesData(prevData => {\n          const currentData = { ...prevData };\n\n          Object.keys(strokesPerWidgetMap).forEach(key => {\n            if (key && currentData[key]) {\n              currentData[key]?.push(...(strokesPerWidgetMap[key] ?? []));\n            } else {\n              currentData[key] = strokesPerWidgetMap[key] ?? [];\n            }\n          });\n\n          return currentData;\n        });\n      }\n    },\n    [],\n  );\n\n  const { publish, channelStatus, channel } = useMessageBrokerChannel({\n    channelOptions,\n    consumerFn: onMessageReceive,\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  };\n};\n\nexport default useCanvasSyncBroker;\n"],"names":["extractStrokeData","payload","useCanvasSyncBroker","channelId","logEvent","initialCanvasData","initialStrokesData","setInitialStrokesData","useState","map","message","_a","qrId","strokeData","_b","callbacksMapRef","useRef","channelOptions","useMemo","registerCallback","useCallback","cb","onMessageReceive","messages","initialData","strokesPerWidgetMap","eventPayload","strokes","userId","canvasHeight","widgetOnReceiveCallback","prevData","currentData","key","publish","channelStatus","channel","useMessageBrokerChannel","closeChannel","useCanvasSyncBroker$1"],"mappings":"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"}

package/dist/index.d.ts

@@ -9,6 +9,7 @@ import type { Dispatch } from 'react';
 import { FC } from 'react';
 import { ForwardRefExoticComponent } from 'react';
 import { HTMLAttributes } from 'react';
+import { IChannelMessage } from '@cuemath/cue-message-broker';
 import type { IframeHTMLAttributes } from 'react';
 import type { InputHTMLAttributes } from 'react';
 import { IProvidedProps } from 'google-maps-react';
@@ -2993,6 +2994,7 @@ export declare interface IWorksheetAttemptModel {
     desmos_calculator_enabled: boolean;
     due_date: number | null;
     state: TLPARSheetAttemptState;
+    canvas_data?: Array<IChannelMessage>;
 }
 
 export declare interface IWorksheetBehavior {
@@ -4793,7 +4795,7 @@ export declare const UpIcon: React.FC<React.SVGProps<SVGSVGElement>>;
 
 export declare const useAutoPlayPermission: () => IAutoPlayPermissionContextType;
 
-export declare const useCanvasSyncBroker: (channelId: string, logEvent: (type: string, payload?: Record<string, unknown>) => void) => {
+export declare const useCanvasSyncBroker: (channelId: string, logEvent: (type: string, payload?: Record<string, unknown>) => void, initialCanvasData?: Array<IChannelMessage>) => {
     publishStrokes: ((message: unknown) => boolean) | undefined;
     channelStatus: ChannelStatus | undefined;
     closeChannel: () => void;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cuemath/leap",
-  "version": "2.8.34",
+  "version": "2.8.35-aa0",
   "type": "module",
   "files": [
     "dist"