@cuemath/leap 3.1.2-j3 → 3.1.2

package/dist/features/circle-games/hooks/use-circle-sounds/use-circle-sounds.js

@@ -1,118 +1,118 @@
-import { useCallback as c, useRef as C, useEffect as T } from "react";
+import { useCallback as a, useRef as C, useEffect as T } from "react";
 import { CircleSoundKeyMapper as A, SWIPE_SOUND_ORDER as E } from "./constants.js";
-import { CircleSoundKey as n } from "./use-circle-sounds-enums.js";
-let d = 0;
-const o = {
-  [n.BACKGROUND]: null,
-  [n.BACKGROUND_RUSHHOUR]: null,
-  [n.TUTORIAL]: null,
-  [n.SWIPE_01]: null,
-  [n.SWIPE_02]: null,
-  [n.SWIPE_03]: null,
-  [n.SWIPE_04]: null,
-  [n.SWIPE_DOWN]: null,
-  [n.TOGGLE]: null,
-  [n.POINTS_AWARDED]: null,
-  [n.POINTS_ADDED]: null,
-  [n.GAME_CARD_CLICK]: null,
-  [n.CLOCK_IN]: null,
-  [n.CLOCK_OUT]: null,
-  [n.ACCURACY_IN]: null,
-  [n.ACCURACY_OUT]: null,
-  [n.STREAK_IN]: null,
-  [n.STREAK_OUT]: null,
-  [n.ACCURACY_INTRO]: null,
-  [n.ACCURACY_TARGET]: null,
-  [n.TIME_INTRO]: null,
-  [n.TIME_TARGET]: null,
-  [n.METER_FILL]: null
-}, I = {}, D = () => {
-  const s = c((e) => {
-    if (!o[e]) {
-      const l = new Audio(A[e]);
-      o[e] = l;
+import { CircleSoundKey as e } from "./use-circle-sounds-enums.js";
+let I = 0;
+const r = {
+  [e.BACKGROUND]: null,
+  [e.BACKGROUND_RUSHHOUR]: null,
+  [e.TUTORIAL]: null,
+  [e.SWIPE_01]: null,
+  [e.SWIPE_02]: null,
+  [e.SWIPE_03]: null,
+  [e.SWIPE_04]: null,
+  [e.SWIPE_DOWN]: null,
+  [e.TOGGLE]: null,
+  [e.POINTS_AWARDED]: null,
+  [e.POINTS_ADDED]: null,
+  [e.GAME_CARD_CLICK]: null,
+  [e.CLOCK_IN]: null,
+  [e.CLOCK_OUT]: null,
+  [e.ACCURACY_IN]: null,
+  [e.ACCURACY_OUT]: null,
+  [e.STREAK_IN]: null,
+  [e.STREAK_OUT]: null,
+  [e.ACCURACY_INTRO]: null,
+  [e.ACCURACY_TARGET]: null,
+  [e.TIME_INTRO]: null,
+  [e.TIME_TARGET]: null,
+  [e.METER_FILL]: null
+}, f = {}, D = () => {
+  const c = a((n) => {
+    if (!r[n]) {
+      const l = new Audio(A[n]);
+      r[n] = l;
     }
-  }, []), f = C(/* @__PURE__ */ new Set()), p = C({}), v = c(() => {
-    document.visibilityState === "hidden" ? Object.keys(o).forEach((e) => {
-      const l = o[e];
-      l && !l.paused && (l.pause(), f.current.add(e));
-    }) : document.visibilityState === "visible" && (f.current.forEach((e) => {
-      const l = o[e];
+  }, []), v = C(/* @__PURE__ */ new Set()), o = C({}), p = a(() => {
+    document.visibilityState === "hidden" ? Object.keys(r).forEach((n) => {
+      const l = r[n];
+      l && !l.paused && (l.pause(), v.current.add(n));
+    }) : document.visibilityState === "visible" && (v.current.forEach((n) => {
+      const l = r[n];
       l == null || l.play();
-    }), f.current.clear());
+    }), v.current.clear());
   }, []);
   T(() => {
-    document.addEventListener("visibilitychange", v);
-    const e = p.current;
+    document.addEventListener("visibilitychange", p);
+    const n = o.current;
     return () => {
-      document.removeEventListener("visibilitychange", v);
-      for (const l of Object.values(e))
+      document.removeEventListener("visibilitychange", p);
+      for (const l of Object.values(n))
         l != null && clearInterval(l);
     };
-  }, [v]);
-  const S = c(() => {
+  }, [p]);
+  const S = a(() => {
     var l;
     E.forEach((u) => {
-      s(u);
+      c(u);
     });
-    const e = E[d] || n.SWIPE_01;
-    d < E.length - 1 ? d++ : d = 0, (l = o[e]) == null || l.play();
-  }, [s]), m = c(() => {
+    const n = E[I] || e.SWIPE_01;
+    I < E.length - 1 ? I++ : I = 0, (l = r[n]) == null || l.play();
+  }, [c]), m = a(() => {
     var l;
-    return s(n.TOGGLE), (l = o[n.TOGGLE]) == null ? void 0 : l.play();
-  }, [s]), _ = c(
-    (e, l = !0, u = !1) => {
-      s(e);
-      const t = o[e];
+    return c(e.TOGGLE), (l = r[e.TOGGLE]) == null ? void 0 : l.play();
+  }, [c]), _ = a(
+    (n, l = !0, u = !1) => {
+      c(n);
+      const t = r[n];
       if (!t) return;
-      if (!t.paused && t.currentTime > 0 && !t.ended)
+      if (o.current[n] && clearInterval(o.current[n]), !t.paused && t.currentTime > 0 && !t.ended)
         return t;
       if (t.loop = u, l) {
         t.volume = 1;
-        const a = t.play();
-        I[e] = a;
+        const d = t.play();
+        f[n] = d;
         return;
       }
       t.volume = 0;
-      const r = t.play();
-      I[e] = r;
+      const s = t.play();
+      f[n] = s;
       const i = setInterval(() => {
         if (!t) {
           clearInterval(i);
           return;
         }
-        const a = t.volume || 0;
-        a < 1 ? t.volume = Math.min(a + 0.1, 1) : clearInterval(i);
+        const d = t.volume || 0;
+        d < 1 ? t.volume = Math.min(d + 0.1, 1) : clearInterval(i);
       }, 100);
-      return p.current[e] = i, t;
+      return o.current[n] = i, t;
     },
-    [s]
-  ), R = c((e, l = !0) => {
+    [c]
+  ), R = a((n, l = !0) => {
     var t;
-    const u = o[e];
-    I[e] !== void 0 && ((t = I[e]) == null || t.then(() => {
+    const u = r[n];
+    f[n] !== void 0 && ((t = f[n]) == null || t.then(() => {
       if (!u) return;
-      if (l) {
+      if (o.current[n] && clearInterval(o.current[n]), l) {
         u.pause();
         return;
       }
-      const r = setInterval(() => {
+      const s = setInterval(() => {
         if (!u) {
-          clearInterval(r);
+          clearInterval(s);
           return;
         }
         const i = u.volume || 0;
-        i - 0.1 <= 0 ? (u.volume = 0, u.pause(), clearInterval(r)) : u.volume = i - 0.1;
+        i - 0.1 <= 0 ? (u.volume = 0, u.pause(), clearInterval(s)) : u.volume = i - 0.1;
       }, 100);
-      p.current[e] = r;
-    }).catch((r) => {
-      console.log("sound not playing", r);
+      o.current[n] = s;
+    }).catch((s) => {
+      console.log("sound not playing", s);
     }));
   }, []);
   return { playSwipSound: S, play: _, stop: R, playButtonSound: m };
 };
 export {
-  o as soundMapper,
+  r as soundMapper,
   D as useCircleSounds
 };
 //# sourceMappingURL=use-circle-sounds.js.map

package/dist/features/circle-games/hooks/use-circle-sounds/use-circle-sounds.js.map

@@ -1 +1 @@
-{"version":3,"file":"use-circle-sounds.js","sources":["../../../../../src/features/circle-games/hooks/use-circle-sounds/use-circle-sounds.ts"],"sourcesContent":["import type { TimeoutMap } from './use-circle-sound-types';\n\nimport { useCallback, useEffect, useRef } from 'react';\n\nimport { CircleSoundKeyMapper, SWIPE_SOUND_ORDER } from './constants';\nimport { CircleSoundKey } from './use-circle-sounds-enums';\n\nlet swipeSoundIndex = 0;\n\nexport const soundMapper: Record<keyof typeof CircleSoundKeyMapper, null | HTMLAudioElement> = {\n  [CircleSoundKey.BACKGROUND]: null,\n  [CircleSoundKey.BACKGROUND_RUSHHOUR]: null,\n  [CircleSoundKey.TUTORIAL]: null,\n  [CircleSoundKey.SWIPE_01]: null,\n  [CircleSoundKey.SWIPE_02]: null,\n  [CircleSoundKey.SWIPE_03]: null,\n  [CircleSoundKey.SWIPE_04]: null,\n  [CircleSoundKey.SWIPE_DOWN]: null,\n  [CircleSoundKey.TOGGLE]: null,\n  [CircleSoundKey.POINTS_AWARDED]: null,\n  [CircleSoundKey.POINTS_ADDED]: null,\n  [CircleSoundKey.GAME_CARD_CLICK]: null,\n  [CircleSoundKey.CLOCK_IN]: null,\n  [CircleSoundKey.CLOCK_OUT]: null,\n  [CircleSoundKey.ACCURACY_IN]: null,\n  [CircleSoundKey.ACCURACY_OUT]: null,\n  [CircleSoundKey.STREAK_IN]: null,\n  [CircleSoundKey.STREAK_OUT]: null,\n  [CircleSoundKey.ACCURACY_INTRO]: null,\n  [CircleSoundKey.ACCURACY_TARGET]: null,\n  [CircleSoundKey.TIME_INTRO]: null,\n  [CircleSoundKey.TIME_TARGET]: null,\n  [CircleSoundKey.METER_FILL]: null,\n};\n\nconst soundInstancePromise: Partial<Record<keyof typeof CircleSoundKeyMapper, Promise<void>>> = {};\n\nexport const useCircleSounds = () => {\n  const loadSound = useCallback((key: CircleSoundKey) => {\n    if (!soundMapper[key]) {\n      const loadedSound = new Audio(CircleSoundKeyMapper[key]);\n\n      soundMapper[key] = loadedSound;\n    }\n  }, []);\n\n  const pausedSoundsRef = useRef<Set<CircleSoundKey>>(new Set());\n  const timeoutRefs = useRef<TimeoutMap>({});\n\n  const handleVisibilityChange = useCallback(() => {\n    if (document.visibilityState === 'hidden') {\n      (Object.keys(soundMapper) as CircleSoundKey[]).forEach(key => {\n        const sound = soundMapper[key];\n\n        if (sound && !sound.paused) {\n          sound.pause();\n          pausedSoundsRef.current.add(key);\n        }\n      });\n    } else if (document.visibilityState === 'visible') {\n      pausedSoundsRef.current.forEach(key => {\n        const sound = soundMapper[key];\n\n        sound?.play();\n      });\n      pausedSoundsRef.current.clear();\n    }\n  }, []);\n\n  useEffect(() => {\n    document.addEventListener('visibilitychange', handleVisibilityChange);\n    const timeouts = timeoutRefs.current;\n\n    return () => {\n      document.removeEventListener('visibilitychange', handleVisibilityChange);\n      for (const id of Object.values(timeouts)) {\n        if (id != null) clearInterval(id);\n      }\n    };\n  }, [handleVisibilityChange]);\n\n  const playSwipSound = useCallback(() => {\n    SWIPE_SOUND_ORDER.forEach(key => {\n      loadSound(key);\n    });\n\n    const key = SWIPE_SOUND_ORDER[swipeSoundIndex] || CircleSoundKey.SWIPE_01;\n\n    if (swipeSoundIndex < SWIPE_SOUND_ORDER.length - 1) {\n      swipeSoundIndex++;\n    } else {\n      swipeSoundIndex = 0;\n    }\n    soundMapper[key]?.play();\n  }, [loadSound]);\n\n  const playButtonSound = useCallback(() => {\n    loadSound(CircleSoundKey.TOGGLE);\n    const sound = soundMapper[CircleSoundKey.TOGGLE]?.play();\n\n    return sound;\n  }, [loadSound]);\n\n  const play = useCallback(\n    (key: CircleSoundKey, immediately: boolean = true, loop = false) => {\n      loadSound(key);\n      const soundInstance = soundMapper[key];\n\n      if (!soundInstance) return;\n\n      if (!soundInstance.paused && soundInstance.currentTime > 0 && !soundInstance.ended) {\n        return soundInstance;\n      }\n\n      soundInstance.loop = loop;\n      if (immediately) {\n        soundInstance.volume = 1;\n        const promise = soundInstance.play();\n\n        soundInstancePromise[key] = promise;\n\n        return;\n      }\n\n      soundInstance.volume = 0;\n      const promise = soundInstance.play();\n\n      soundInstancePromise[key] = promise;\n\n      const intervalId = setInterval(() => {\n        if (!soundInstance) {\n          clearInterval(intervalId);\n\n          return;\n        }\n\n        const vol = soundInstance.volume || 0;\n\n        if (vol < 1) {\n          soundInstance.volume = Math.min(vol + 0.1, 1);\n        } else {\n          clearInterval(intervalId);\n        }\n      }, 100);\n\n      timeoutRefs.current[key] = intervalId;\n\n      return soundInstance;\n    },\n    [loadSound],\n  );\n\n  const stop = useCallback((key: CircleSoundKey, immediately: boolean = true) => {\n    const soundInstance = soundMapper[key];\n\n    if (soundInstancePromise[key] !== undefined) {\n      soundInstancePromise[key]\n        ?.then(() => {\n          if (!soundInstance) return;\n\n          if (immediately) {\n            soundInstance.pause();\n\n            return;\n          }\n\n          const intervalId = setInterval(() => {\n            if (!soundInstance) {\n              clearInterval(intervalId);\n\n              return;\n            }\n\n            const vol = soundInstance.volume || 0;\n\n            if (vol - 0.1 <= 0) {\n              soundInstance.volume = 0;\n              soundInstance.pause();\n              clearInterval(intervalId);\n            } else {\n              soundInstance.volume = vol - 0.1;\n            }\n          }, 100);\n\n          timeoutRefs.current[key] = intervalId;\n        })\n        .catch(err => {\n          // eslint-disable-next-line no-console\n          console.log('sound not playing', err);\n        });\n    }\n  }, []);\n\n  return { playSwipSound, play, stop, playButtonSound };\n};\n"],"names":["swipeSoundIndex","soundMapper","CircleSoundKey","soundInstancePromise","useCircleSounds","loadSound","useCallback","key","loadedSound","CircleSoundKeyMapper","pausedSoundsRef","useRef","timeoutRefs","handleVisibilityChange","sound","useEffect","timeouts","id","playSwipSound","SWIPE_SOUND_ORDER","_a","playButtonSound","play","immediately","loop","soundInstance","promise","intervalId","vol","stop","err"],"mappings":";;;AAOA,IAAIA,IAAkB;AAEf,MAAMC,IAAkF;AAAA,EAC7F,CAACC,EAAe,UAAU,GAAG;AAAA,EAC7B,CAACA,EAAe,mBAAmB,GAAG;AAAA,EACtC,CAACA,EAAe,QAAQ,GAAG;AAAA,EAC3B,CAACA,EAAe,QAAQ,GAAG;AAAA,EAC3B,CAACA,EAAe,QAAQ,GAAG;AAAA,EAC3B,CAACA,EAAe,QAAQ,GAAG;AAAA,EAC3B,CAACA,EAAe,QAAQ,GAAG;AAAA,EAC3B,CAACA,EAAe,UAAU,GAAG;AAAA,EAC7B,CAACA,EAAe,MAAM,GAAG;AAAA,EACzB,CAACA,EAAe,cAAc,GAAG;AAAA,EACjC,CAACA,EAAe,YAAY,GAAG;AAAA,EAC/B,CAACA,EAAe,eAAe,GAAG;AAAA,EAClC,CAACA,EAAe,QAAQ,GAAG;AAAA,EAC3B,CAACA,EAAe,SAAS,GAAG;AAAA,EAC5B,CAACA,EAAe,WAAW,GAAG;AAAA,EAC9B,CAACA,EAAe,YAAY,GAAG;AAAA,EAC/B,CAACA,EAAe,SAAS,GAAG;AAAA,EAC5B,CAACA,EAAe,UAAU,GAAG;AAAA,EAC7B,CAACA,EAAe,cAAc,GAAG;AAAA,EACjC,CAACA,EAAe,eAAe,GAAG;AAAA,EAClC,CAACA,EAAe,UAAU,GAAG;AAAA,EAC7B,CAACA,EAAe,WAAW,GAAG;AAAA,EAC9B,CAACA,EAAe,UAAU,GAAG;AAC/B,GAEMC,IAA0F,CAAA,GAEnFC,IAAkB,MAAM;AAC7B,QAAAC,IAAYC,EAAY,CAACC,MAAwB;AACjD,QAAA,CAACN,EAAYM,CAAG,GAAG;AACrB,YAAMC,IAAc,IAAI,MAAMC,EAAqBF,CAAG,CAAC;AAEvD,MAAAN,EAAYM,CAAG,IAAIC;AAAA,IACrB;AAAA,EACF,GAAG,CAAE,CAAA,GAECE,IAAkBC,EAAgC,oBAAA,IAAK,CAAA,GACvDC,IAAcD,EAAmB,CAAA,CAAE,GAEnCE,IAAyBP,EAAY,MAAM;AAC3C,IAAA,SAAS,oBAAoB,WAC9B,OAAO,KAAKL,CAAW,EAAuB,QAAQ,CAAOM,MAAA;AACtD,YAAAO,IAAQb,EAAYM,CAAG;AAEzB,MAAAO,KAAS,CAACA,EAAM,WAClBA,EAAM,MAAM,GACIJ,EAAA,QAAQ,IAAIH,CAAG;AAAA,IACjC,CACD,IACQ,SAAS,oBAAoB,cACtBG,EAAA,QAAQ,QAAQ,CAAOH,MAAA;AAC/B,YAAAO,IAAQb,EAAYM,CAAG;AAE7B,MAAAO,KAAA,QAAAA,EAAO;AAAA,IAAK,CACb,GACDJ,EAAgB,QAAQ;EAE5B,GAAG,CAAE,CAAA;AAEL,EAAAK,EAAU,MAAM;AACL,aAAA,iBAAiB,oBAAoBF,CAAsB;AACpE,UAAMG,IAAWJ,EAAY;AAE7B,WAAO,MAAM;AACF,eAAA,oBAAoB,oBAAoBC,CAAsB;AACvE,iBAAWI,KAAM,OAAO,OAAOD,CAAQ;AACjC,QAAAC,KAAM,QAAM,cAAcA,CAAE;AAAA,IAClC;AAAA,EACF,GACC,CAACJ,CAAsB,CAAC;AAErB,QAAAK,IAAgBZ,EAAY,MAAM;;AACpB,IAAAa,EAAA,QAAQ,CAAAZ,MAAO;AAC/B,MAAAF,EAAUE,CAAG;AAAA,IAAA,CACd;AAED,UAAMA,IAAMY,EAAkBnB,CAAe,KAAKE,EAAe;AAE7D,IAAAF,IAAkBmB,EAAkB,SAAS,IAC/CnB,MAEkBA,IAAA,IAERoB,IAAAnB,EAAAM,CAAG,MAAH,QAAAa,EAAM;AAAA,EAAK,GACtB,CAACf,CAAS,CAAC,GAERgB,IAAkBf,EAAY,MAAM;;AACxC,WAAAD,EAAUH,EAAe,MAAM,IACjBkB,IAAAnB,EAAYC,EAAe,MAAM,MAAjC,gBAAAkB,EAAoC;AAAA,EAE3C,GACN,CAACf,CAAS,CAAC,GAERiB,IAAOhB;AAAA,IACX,CAACC,GAAqBgB,IAAuB,IAAMC,IAAO,OAAU;AAClE,MAAAnB,EAAUE,CAAG;AACP,YAAAkB,IAAgBxB,EAAYM,CAAG;AAErC,UAAI,CAACkB,EAAe;AAEhB,UAAA,CAACA,EAAc,UAAUA,EAAc,cAAc,KAAK,CAACA,EAAc;AACpE,eAAAA;AAIT,UADAA,EAAc,OAAOD,GACjBD,GAAa;AACf,QAAAE,EAAc,SAAS;AACjBC,cAAAA,IAAUD,EAAc;AAE9B,QAAAtB,EAAqBI,CAAG,IAAImB;AAE5B;AAAA,MACF;AAEA,MAAAD,EAAc,SAAS;AACjB,YAAAC,IAAUD,EAAc;AAE9B,MAAAtB,EAAqBI,CAAG,IAAImB;AAEtB,YAAAC,IAAa,YAAY,MAAM;AACnC,YAAI,CAACF,GAAe;AAClB,wBAAcE,CAAU;AAExB;AAAA,QACF;AAEM,cAAAC,IAAMH,EAAc,UAAU;AAEpC,QAAIG,IAAM,IACRH,EAAc,SAAS,KAAK,IAAIG,IAAM,KAAK,CAAC,IAE5C,cAAcD,CAAU;AAAA,SAEzB,GAAG;AAEM,aAAAf,EAAA,QAAQL,CAAG,IAAIoB,GAEpBF;AAAA,IACT;AAAA,IACA,CAACpB,CAAS;AAAA,EAAA,GAGNwB,IAAOvB,EAAY,CAACC,GAAqBgB,IAAuB,OAAS;;AACvE,UAAAE,IAAgBxB,EAAYM,CAAG;AAEjC,IAAAJ,EAAqBI,CAAG,MAAM,YACXa,IAAAjB,EAAAI,CAAG,MAAH,QAAAa,EACjB,KAAK,MAAM;AACX,UAAI,CAACK,EAAe;AAEpB,UAAIF,GAAa;AACf,QAAAE,EAAc,MAAM;AAEpB;AAAA,MACF;AAEM,YAAAE,IAAa,YAAY,MAAM;AACnC,YAAI,CAACF,GAAe;AAClB,wBAAcE,CAAU;AAExB;AAAA,QACF;AAEM,cAAAC,IAAMH,EAAc,UAAU;AAEhC,QAAAG,IAAM,OAAO,KACfH,EAAc,SAAS,GACvBA,EAAc,MAAM,GACpB,cAAcE,CAAU,KAExBF,EAAc,SAASG,IAAM;AAAA,SAE9B,GAAG;AAEM,MAAAhB,EAAA,QAAQL,CAAG,IAAIoB;AAAA,IAAA,GAE5B,MAAM,CAAOG,MAAA;AAEJ,cAAA,IAAI,qBAAqBA,CAAG;AAAA,IAAA;AAAA,EAG5C,GAAG,CAAE,CAAA;AAEL,SAAO,EAAE,eAAAZ,GAAe,MAAAI,GAAM,MAAAO,GAAM,iBAAAR,EAAgB;AACtD;"}
+{"version":3,"file":"use-circle-sounds.js","sources":["../../../../../src/features/circle-games/hooks/use-circle-sounds/use-circle-sounds.ts"],"sourcesContent":["import type { TimeoutMap } from './use-circle-sound-types';\n\nimport { useCallback, useEffect, useRef } from 'react';\n\nimport { CircleSoundKeyMapper, SWIPE_SOUND_ORDER } from './constants';\nimport { CircleSoundKey } from './use-circle-sounds-enums';\n\nlet swipeSoundIndex = 0;\n\nexport const soundMapper: Record<keyof typeof CircleSoundKeyMapper, null | HTMLAudioElement> = {\n  [CircleSoundKey.BACKGROUND]: null,\n  [CircleSoundKey.BACKGROUND_RUSHHOUR]: null,\n  [CircleSoundKey.TUTORIAL]: null,\n  [CircleSoundKey.SWIPE_01]: null,\n  [CircleSoundKey.SWIPE_02]: null,\n  [CircleSoundKey.SWIPE_03]: null,\n  [CircleSoundKey.SWIPE_04]: null,\n  [CircleSoundKey.SWIPE_DOWN]: null,\n  [CircleSoundKey.TOGGLE]: null,\n  [CircleSoundKey.POINTS_AWARDED]: null,\n  [CircleSoundKey.POINTS_ADDED]: null,\n  [CircleSoundKey.GAME_CARD_CLICK]: null,\n  [CircleSoundKey.CLOCK_IN]: null,\n  [CircleSoundKey.CLOCK_OUT]: null,\n  [CircleSoundKey.ACCURACY_IN]: null,\n  [CircleSoundKey.ACCURACY_OUT]: null,\n  [CircleSoundKey.STREAK_IN]: null,\n  [CircleSoundKey.STREAK_OUT]: null,\n  [CircleSoundKey.ACCURACY_INTRO]: null,\n  [CircleSoundKey.ACCURACY_TARGET]: null,\n  [CircleSoundKey.TIME_INTRO]: null,\n  [CircleSoundKey.TIME_TARGET]: null,\n  [CircleSoundKey.METER_FILL]: null,\n};\n\nconst soundInstancePromise: Partial<Record<keyof typeof CircleSoundKeyMapper, Promise<void>>> = {};\n\nexport const useCircleSounds = () => {\n  const loadSound = useCallback((key: CircleSoundKey) => {\n    if (!soundMapper[key]) {\n      const loadedSound = new Audio(CircleSoundKeyMapper[key]);\n\n      soundMapper[key] = loadedSound;\n    }\n  }, []);\n\n  const pausedSoundsRef = useRef<Set<CircleSoundKey>>(new Set());\n  const timeoutRefs = useRef<TimeoutMap>({});\n\n  const handleVisibilityChange = useCallback(() => {\n    if (document.visibilityState === 'hidden') {\n      (Object.keys(soundMapper) as CircleSoundKey[]).forEach(key => {\n        const sound = soundMapper[key];\n\n        if (sound && !sound.paused) {\n          sound.pause();\n          pausedSoundsRef.current.add(key);\n        }\n      });\n    } else if (document.visibilityState === 'visible') {\n      pausedSoundsRef.current.forEach(key => {\n        const sound = soundMapper[key];\n\n        sound?.play();\n      });\n      pausedSoundsRef.current.clear();\n    }\n  }, []);\n\n  useEffect(() => {\n    document.addEventListener('visibilitychange', handleVisibilityChange);\n    const timeouts = timeoutRefs.current;\n\n    return () => {\n      document.removeEventListener('visibilitychange', handleVisibilityChange);\n      for (const id of Object.values(timeouts)) {\n        if (id != null) clearInterval(id);\n      }\n    };\n  }, [handleVisibilityChange]);\n\n  const playSwipSound = useCallback(() => {\n    SWIPE_SOUND_ORDER.forEach(key => {\n      loadSound(key);\n    });\n\n    const key = SWIPE_SOUND_ORDER[swipeSoundIndex] || CircleSoundKey.SWIPE_01;\n\n    if (swipeSoundIndex < SWIPE_SOUND_ORDER.length - 1) {\n      swipeSoundIndex++;\n    } else {\n      swipeSoundIndex = 0;\n    }\n    soundMapper[key]?.play();\n  }, [loadSound]);\n\n  const playButtonSound = useCallback(() => {\n    loadSound(CircleSoundKey.TOGGLE);\n    const sound = soundMapper[CircleSoundKey.TOGGLE]?.play();\n\n    return sound;\n  }, [loadSound]);\n\n  const play = useCallback(\n    (key: CircleSoundKey, immediately: boolean = true, loop = false) => {\n      loadSound(key);\n      const soundInstance = soundMapper[key];\n\n      if (!soundInstance) return;\n\n      if (timeoutRefs.current[key]) {\n        clearInterval(timeoutRefs.current[key]);\n      }\n\n      if (!soundInstance.paused && soundInstance.currentTime > 0 && !soundInstance.ended) {\n        return soundInstance;\n      }\n\n      soundInstance.loop = loop;\n      if (immediately) {\n        soundInstance.volume = 1;\n        const promise = soundInstance.play();\n\n        soundInstancePromise[key] = promise;\n\n        return;\n      }\n\n      soundInstance.volume = 0;\n      const promise = soundInstance.play();\n\n      soundInstancePromise[key] = promise;\n\n      const intervalId = setInterval(() => {\n        if (!soundInstance) {\n          clearInterval(intervalId);\n\n          return;\n        }\n\n        const vol = soundInstance.volume || 0;\n\n        if (vol < 1) {\n          soundInstance.volume = Math.min(vol + 0.1, 1);\n        } else {\n          clearInterval(intervalId);\n        }\n      }, 100);\n\n      timeoutRefs.current[key] = intervalId;\n\n      return soundInstance;\n    },\n    [loadSound],\n  );\n\n  const stop = useCallback((key: CircleSoundKey, immediately: boolean = true) => {\n    const soundInstance = soundMapper[key];\n\n    if (soundInstancePromise[key] !== undefined) {\n      soundInstancePromise[key]\n        ?.then(() => {\n          if (!soundInstance) return;\n\n          if (timeoutRefs.current[key]) {\n            clearInterval(timeoutRefs.current[key]);\n          }\n\n          if (immediately) {\n            soundInstance.pause();\n\n            return;\n          }\n\n          const intervalId = setInterval(() => {\n            if (!soundInstance) {\n              clearInterval(intervalId);\n\n              return;\n            }\n\n            const vol = soundInstance.volume || 0;\n\n            if (vol - 0.1 <= 0) {\n              soundInstance.volume = 0;\n              soundInstance.pause();\n              clearInterval(intervalId);\n            } else {\n              soundInstance.volume = vol - 0.1;\n            }\n          }, 100);\n\n          timeoutRefs.current[key] = intervalId;\n        })\n        .catch(err => {\n          // eslint-disable-next-line no-console\n          console.log('sound not playing', err);\n        });\n    }\n  }, []);\n\n  return { playSwipSound, play, stop, playButtonSound };\n};\n"],"names":["swipeSoundIndex","soundMapper","CircleSoundKey","soundInstancePromise","useCircleSounds","loadSound","useCallback","key","loadedSound","CircleSoundKeyMapper","pausedSoundsRef","useRef","timeoutRefs","handleVisibilityChange","sound","useEffect","timeouts","id","playSwipSound","SWIPE_SOUND_ORDER","_a","playButtonSound","play","immediately","loop","soundInstance","promise","intervalId","vol","stop","err"],"mappings":"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"}

package/dist/features/cue-canvas/bottombar/homework-controls.js

@@ -0,0 +1,73 @@
+import { jsx as n, jsxs as g } from "react/jsx-runtime";
+import { memo as b, useState as w, useCallback as i } from "react";
+import k from "../../../assets/line-icons/icons/check.js";
+import y from "../../../assets/line-icons/icons/share.js";
+import f from "../../ui/buttons/button/button.js";
+import p from "../../ui/layout/flex-view.js";
+import I from "../../ui/separator/separator.js";
+import B from "../../ui/text/text.js";
+import { dataURIToBlob as x } from "../cue-canvas-helpers.js";
+import { useCueCanvasActions as A } from "../hooks/use-cue-canvas-actions.js";
+const S = (h) => {
+  const { width: c, onSendImageToChat: t, onMarkAsResolved: s } = h, { homeworkId: o, activeInstance: r, setHomeworkId: l } = A(), [m, u] = w(!1), a = i(() => {
+    r == null || r.clearCanvas(), l(void 0), u(!1);
+  }, [r, l]), d = i(async () => {
+    if (!r) return;
+    const e = await (r == null ? void 0 : r.getCanvasAsImage());
+    return e ? [x(e)] : void 0;
+  }, [r]), $ = i(async () => {
+    const e = await d();
+    !o || !t || !e || t == null || t(o, e, a);
+  }, [d, o, t, a]), C = i(() => {
+    o && (u(!0), s == null || s(o, a));
+  }, [o, s, a]);
+  return o ? m ? /* @__PURE__ */ n(
+    p,
+    {
+      $gapX: 1,
+      $gutterX: 0.5,
+      $alignItems: "center",
+      $justifyContent: "center",
+      $width: c,
+      $background: "YELLOW_1",
+      children: /* @__PURE__ */ n(B, { $renderAs: "body3", $color: "BLACK", children: "Resolving...." })
+    }
+  ) : /* @__PURE__ */ g(
+    p,
+    {
+      $flexDirection: "row",
+      $gapX: 1,
+      $gutterX: 0.5,
+      $alignItems: "center",
+      $justifyContent: "center",
+      $width: c,
+      $background: "YELLOW_1",
+      children: [
+        /* @__PURE__ */ n(
+          f,
+          {
+            label: "Mark as reolved",
+            onClick: C,
+            renderAs: "primary",
+            Icon: k,
+            busy: m
+          }
+        ),
+        /* @__PURE__ */ n(I, { width: 16 }),
+        /* @__PURE__ */ n(
+          f,
+          {
+            label: "Send CueBoard image to chat",
+            onClick: $,
+            renderAs: "primary",
+            Icon: y
+          }
+        )
+      ]
+    }
+  ) : null;
+}, _ = b(S);
+export {
+  _ as default
+};
+//# sourceMappingURL=homework-controls.js.map

package/dist/features/cue-canvas/bottombar/homework-controls.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"homework-controls.js","sources":["../../../../src/features/cue-canvas/bottombar/homework-controls.tsx"],"sourcesContent":["import type { IHomeWorkControllerProps } from './bottombar-types';\nimport type { FC } from 'react';\n\nimport { memo, useCallback, useState } from 'react';\n\nimport CheckIcon from '../../../assets/line-icons/icons/check';\nimport ShareIcon from '../../../assets/line-icons/icons/share';\nimport Button from '../../ui/buttons/button/button';\nimport FlexView from '../../ui/layout/flex-view';\nimport Separator from '../../ui/separator/separator';\nimport Text from '../../ui/text/text';\nimport { dataURIToBlob } from '../cue-canvas-helpers';\nimport { useCueCanvasActions } from '../hooks/use-cue-canvas-actions';\n\nconst HomeworkController: FC<IHomeWorkControllerProps> = props => {\n  const { width, onSendImageToChat, onMarkAsResolved } = props;\n  const { homeworkId, activeInstance, setHomeworkId } = useCueCanvasActions();\n  const [isBusy, setIsBusy] = useState(false);\n\n  const onSuccess = useCallback(() => {\n    activeInstance?.clearCanvas();\n    setHomeworkId(undefined);\n    setIsBusy(false);\n  }, [activeInstance, setHomeworkId]);\n\n  const getBoardSnapshot = useCallback(async () => {\n    if (!activeInstance) return;\n\n    const snapshot = await activeInstance?.getCanvasAsImage();\n\n    if (!snapshot) {\n      return;\n    }\n\n    const blobdata = dataURIToBlob(snapshot);\n\n    return [blobdata];\n  }, [activeInstance]);\n\n  const handleSendImageToChat = useCallback(async () => {\n    const snapshot = await getBoardSnapshot();\n\n    if (!homeworkId || !onSendImageToChat || !snapshot) return;\n\n    onSendImageToChat?.(homeworkId, snapshot, onSuccess);\n  }, [getBoardSnapshot, homeworkId, onSendImageToChat, onSuccess]);\n\n  const handleMarkAsResolved = useCallback(() => {\n    if (!homeworkId) return;\n    setIsBusy(true);\n    onMarkAsResolved?.(homeworkId, onSuccess);\n  }, [homeworkId, onMarkAsResolved, onSuccess]);\n\n  if (!homeworkId) return null;\n\n  if (isBusy) {\n    return (\n      <FlexView\n        $gapX={1}\n        $gutterX={0.5}\n        $alignItems=\"center\"\n        $justifyContent=\"center\"\n        $width={width}\n        $background=\"YELLOW_1\"\n      >\n        <Text $renderAs=\"body3\" $color=\"BLACK\">\n          Resolving....\n        </Text>\n      </FlexView>\n    );\n  }\n\n  return (\n    <FlexView\n      $flexDirection=\"row\"\n      $gapX={1}\n      $gutterX={0.5}\n      $alignItems=\"center\"\n      $justifyContent=\"center\"\n      $width={width}\n      $background=\"YELLOW_1\"\n    >\n      <Button\n        label=\"Mark as reolved\"\n        onClick={handleMarkAsResolved}\n        renderAs={'primary'}\n        Icon={CheckIcon}\n        busy={isBusy}\n      />\n      <Separator width={16} />\n      <Button\n        label=\"Send CueBoard image to chat\"\n        onClick={handleSendImageToChat}\n        renderAs={'primary'}\n        Icon={ShareIcon}\n      />\n    </FlexView>\n  );\n};\n\nexport default memo(HomeworkController);\n"],"names":["HomeworkController","props","width","onSendImageToChat","onMarkAsResolved","homeworkId","activeInstance","setHomeworkId","useCueCanvasActions","isBusy","setIsBusy","useState","onSuccess","useCallback","getBoardSnapshot","snapshot","dataURIToBlob","handleSendImageToChat","handleMarkAsResolved","jsx","FlexView","Text","jsxs","Button","CheckIcon","Separator","ShareIcon","homeworkControls","memo"],"mappings":";;;;;;;;;;AAcA,MAAMA,IAAmD,CAASC,MAAA;AAChE,QAAM,EAAE,OAAAC,GAAO,mBAAAC,GAAmB,kBAAAC,EAAA,IAAqBH,GACjD,EAAE,YAAAI,GAAY,gBAAAC,GAAgB,eAAAC,MAAkBC,EAAoB,GACpE,CAACC,GAAQC,CAAS,IAAIC,EAAS,EAAK,GAEpCC,IAAYC,EAAY,MAAM;AAClC,IAAAP,KAAA,QAAAA,EAAgB,eAChBC,EAAc,MAAS,GACvBG,EAAU,EAAK;AAAA,EAAA,GACd,CAACJ,GAAgBC,CAAa,CAAC,GAE5BO,IAAmBD,EAAY,YAAY;AAC/C,QAAI,CAACP,EAAgB;AAEf,UAAAS,IAAW,OAAMT,KAAA,gBAAAA,EAAgB;AAEvC,WAAKS,IAME,CAFUC,EAAcD,CAAQ,CAEvB,IALd;AAAA,EAKc,GACf,CAACT,CAAc,CAAC,GAEbW,IAAwBJ,EAAY,YAAY;AAC9C,UAAAE,IAAW,MAAMD;AAEvB,IAAI,CAACT,KAAc,CAACF,KAAqB,CAACY,KAEtBZ,KAAA,QAAAA,EAAAE,GAAYU,GAAUH;AAAA,KACzC,CAACE,GAAkBT,GAAYF,GAAmBS,CAAS,CAAC,GAEzDM,IAAuBL,EAAY,MAAM;AAC7C,IAAKR,MACLK,EAAU,EAAI,GACdN,KAAA,QAAAA,EAAmBC,GAAYO;AAAA,EAC9B,GAAA,CAACP,GAAYD,GAAkBQ,CAAS,CAAC;AAExC,SAACP,IAEDI,IAEA,gBAAAU;AAAA,IAACC;AAAA,IAAA;AAAA,MACC,OAAO;AAAA,MACP,UAAU;AAAA,MACV,aAAY;AAAA,MACZ,iBAAgB;AAAA,MAChB,QAAQlB;AAAA,MACR,aAAY;AAAA,MAEZ,4BAACmB,GAAK,EAAA,WAAU,SAAQ,QAAO,SAAQ,UAEvC,iBAAA;AAAA,IAAA;AAAA,EAAA,IAMJ,gBAAAC;AAAA,IAACF;AAAA,IAAA;AAAA,MACC,gBAAe;AAAA,MACf,OAAO;AAAA,MACP,UAAU;AAAA,MACV,aAAY;AAAA,MACZ,iBAAgB;AAAA,MAChB,QAAQlB;AAAA,MACR,aAAY;AAAA,MAEZ,UAAA;AAAA,QAAA,gBAAAiB;AAAA,UAACI;AAAA,UAAA;AAAA,YACC,OAAM;AAAA,YACN,SAASL;AAAA,YACT,UAAU;AAAA,YACV,MAAMM;AAAA,YACN,MAAMf;AAAA,UAAA;AAAA,QACR;AAAA,QACA,gBAAAU,EAACM,GAAU,EAAA,OAAO,GAAI,CAAA;AAAA,QACtB,gBAAAN;AAAA,UAACI;AAAA,UAAA;AAAA,YACC,OAAM;AAAA,YACN,SAASN;AAAA,YACT,UAAU;AAAA,YACV,MAAMS;AAAA,UAAA;AAAA,QACR;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA,IA1CoB;AA6C1B,GAEeC,IAAAC,EAAK5B,CAAkB;"}

package/dist/features/cue-canvas/cue-canvas-context.js

@@ -1,17 +1,20 @@
-import { createContext as t } from "react";
-import { CANVAS_COLORS as o } from "./constants/constants.js";
-const c = t({
+import { createContext as o } from "react";
+import { CANVAS_COLORS as e } from "./constants/constants.js";
+const v = o({
   activeInstance: void 0,
   setActiveInstance: () => {
   },
   activeTool: "pen",
   setActiveTool: () => {
   },
-  activeColor: Object.keys(o)[0],
+  activeColor: Object.keys(e)[0],
   setActiveColor: () => {
+  },
+  homeworkId: void 0,
+  setHomeworkId: () => {
   }
 });
 export {
-  c as default
+  v as default
 };
 //# sourceMappingURL=cue-canvas-context.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"cue-canvas-context.js","sources":["../../../src/features/cue-canvas/cue-canvas-context.tsx"],"sourcesContent":["import type { TPolyContextValue } from './types/context';\nimport type { TCueCanvasColors } from './types/cue-canvas';\n\nimport { createContext } from 'react';\n\nimport { CANVAS_COLORS } from './constants/constants';\n\nconst PolyContext = createContext<TPolyContextValue>({\n  activeInstance: undefined,\n  setActiveInstance: () => undefined,\n  activeTool: 'pen',\n  setActiveTool: () => undefined,\n  activeColor: Object.keys(CANVAS_COLORS)[0] as TCueCanvasColors,\n  setActiveColor: () => undefined,\n});\n\nexport default PolyContext;\n"],"names":["PolyContext","createContext","CANVAS_COLORS"],"mappings":";;AAOA,MAAMA,IAAcC,EAAiC;AAAA,EACnD,gBAAgB;AAAA,EAChB,mBAAmB,MAAM;AAAA;AAAA,EACzB,YAAY;AAAA,EACZ,eAAe,MAAM;AAAA;AAAA,EACrB,aAAa,OAAO,KAAKC,CAAa,EAAE,CAAC;AAAA,EACzC,gBAAgB,MAAM;AAAA;AACxB,CAAC;"}
+{"version":3,"file":"cue-canvas-context.js","sources":["../../../src/features/cue-canvas/cue-canvas-context.tsx"],"sourcesContent":["import type { TPolyContextValue } from './types/context';\nimport type { TCueCanvasColors } from './types/cue-canvas';\n\nimport { createContext } from 'react';\n\nimport { CANVAS_COLORS } from './constants/constants';\n\nconst PolyContext = createContext<TPolyContextValue>({\n  activeInstance: undefined,\n  setActiveInstance: () => undefined,\n  activeTool: 'pen',\n  setActiveTool: () => undefined,\n  activeColor: Object.keys(CANVAS_COLORS)[0] as TCueCanvasColors,\n  setActiveColor: () => undefined,\n  homeworkId: undefined,\n  setHomeworkId: () => undefined,\n});\n\nexport default PolyContext;\n"],"names":["PolyContext","createContext","CANVAS_COLORS"],"mappings":";;AAOA,MAAMA,IAAcC,EAAiC;AAAA,EACnD,gBAAgB;AAAA,EAChB,mBAAmB,MAAM;AAAA;AAAA,EACzB,YAAY;AAAA,EACZ,eAAe,MAAM;AAAA;AAAA,EACrB,aAAa,OAAO,KAAKC,CAAa,EAAE,CAAC;AAAA,EACzC,gBAAgB,MAAM;AAAA;AAAA,EACtB,YAAY;AAAA,EACZ,eAAe,MAAM;AAAA;AACvB,CAAC;"}

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

@@ -1,20 +1,22 @@
-var d = Object.defineProperty;
-var u = (r, t, e) => t in r ? d(r, t, { enumerable: !0, configurable: !0, writable: !0, value: e }) : r[t] = e;
-var s = (r, t, e) => u(r, typeof t != "symbol" ? t + "" : t, e);
-import v from "../../node_modules/lodash.debounce/index.js";
-import { removeTileButton as f, removeMask as g, checkTextOrEquationTool as y, getReverseMap as C, getToolAndSubtool as m } from "./cue-canvas-helpers.js";
-class b {
+var u = Object.defineProperty;
+var g = (c, t, e) => t in c ? u(c, t, { enumerable: !0, configurable: !0, writable: !0, value: e }) : c[t] = e;
+var s = (c, t, e) => g(c, typeof t != "symbol" ? t + "" : t, e);
+import { captureMessage as v } from "@sentry/browser";
+import f from "../../node_modules/lodash.debounce/index.js";
+import { removeTileButton as y, removeMask as C, checkTextOrEquationTool as m, getReverseMap as T, getToolAndSubtool as w } from "./cue-canvas-helpers.js";
+class E {
   constructor({
     onPublish: t,
     onSubscribe: e,
     onUpdateActiveTool: a,
-    onUpdateHeight: n,
+    onUpdateHeight: i,
     uploadImageToS3: o,
-    height: i,
-    userId: l,
-    canvasId: h,
-    userType: c,
-    renderAs: p
+    height: n,
+    userId: h,
+    canvasId: r,
+    userType: l,
+    renderAs: p,
+    updateCanvasConfig: d
   }) {
     s(this, "polycanvas");
     s(this, "publish");
@@ -28,22 +30,22 @@ class b {
     s(this, "fileInput", null);
     s(this, "debouncedViewportChange");
     s(this, "uploadImageToS3");
-    s(this, "publishToChannel", (t, e, a) => {
+    s(this, "updateCanvasConfigChange");
+    s(this, "gridName");
+    s(this, "publishToChannel", (t) => {
       this.publish && this.publish({
         eventName: "cue_canvas_changed",
         eventPayload: {
           data: t,
           height: this.height,
           userId: this.userId,
-          responseId: this.canvasId,
-          gridName: e,
-          dimension: a
+          responseId: this.canvasId
         }
       });
     });
     s(this, "onChange", (t) => {
       const a = Object.fromEntries(t.entries());
-      y(a) && this.onUpdateActiveTool("move"), this.publishToChannel(a);
+      m(a) && this.onUpdateActiveTool("move"), this.publishToChannel(a);
     });
     s(this, "undo", () => {
       if (!this.polycanvas)
@@ -51,7 +53,7 @@ class b {
       const t = this.polycanvas.undo();
       if (!t)
         return;
-      const e = C(t);
+      const e = T(t);
       this.onChange(e);
     });
     s(this, "redo", () => {
@@ -73,6 +75,7 @@ class b {
       const t = this.polycanvas.getViewport();
       this.polycanvas.setViewport(t.x, t.y, t.zoom * 0.9);
     });
+    s(this, "getCanvasAsImage", async () => this.polycanvas ? await this.polycanvas.image(3e3, 3e3, "png") : void 0);
     s(this, "downloadCanvasAsImage", async () => {
       if (!this.polycanvas) return;
       const t = await this.polycanvas.image(3e3, 3e3, "png");
@@ -80,96 +83,103 @@ class b {
       const e = document.createElement("a");
       e.href = t, e.download = `canvas-drawing-${Date.now()}.png`, e.click();
     });
-    s(this, "uploadFileToCanvas", async (t) => new Promise((e, a) => {
-      this.uploadImageToS3 ? e(this.uploadImageToS3(t)) : a(new Error("Upload function not provided"));
-    }));
     s(this, "onViewPortChange", (t) => {
-      if (!this.publish) return;
-      const e = t;
-      this.publishToChannel({}, void 0, e);
+      this.updateCanvasConfigChange && this.updateCanvasConfigChange({ dimesion: t });
     });
     s(this, "openFileUpload", () => {
-      this.fileInput || (this.fileInput = document.createElement("input"), this.fileInput.type = "file", this.fileInput.accept = "image/*", this.fileInput.style.display = "none", this.fileInput.onchange = this.addImageToCanvas, document.body.appendChild(this.fileInput)), this.fileInput.click();
+      this.fileInput || (this.fileInput = document.createElement("input"), this.fileInput.type = "file", this.fileInput.accept = "image/*", this.fileInput.style.display = "none", this.fileInput.onchange = this.onSelectImage, document.body.appendChild(this.fileInput)), this.fileInput.click();
     });
-    s(this, "addImageToCanvas", async (t) => {
-      var h;
-      const e = t.target, a = (h = e.files) == null ? void 0 : h[0];
-      if (!a || !this.polycanvas || !this.uploadImageToS3) return;
-      const n = await this.uploadImageToS3(a), o = this.polycanvas.getViewport(), i = {
+    s(this, "addImageToCanvas", (t) => {
+      if (!this.polycanvas) return;
+      const e = this.polycanvas.getViewport(), a = {
         name: "image",
-        href: n,
-        x: o.x + 88,
-        y: o.y + 88
-      }, l = this.polycanvas.add({
-        ...i
+        href: t,
+        x: e.x + 24,
+        y: e.y + 24,
+        width: 500
+      }, i = this.polycanvas.add({
+        ...a
       });
       this.publishToChannel({
-        [l]: [void 0, { ...i, status: "locked" }]
-      }), e.value = "";
+        [i]: [void 0, { ...a, status: "locked" }]
+      });
     });
-    s(this, "updateCanvasConfig", (t, e, a) => {
-      this.polycanvas && (t > this.height && this.updateHeight(t), e && this.polycanvas.setViewport(e.x, e.y, e.zoom), a && this.polycanvas.setOptions({
-        grid: a
-      }));
+    s(this, "onSelectImage", async (t) => {
+      var o;
+      const e = t.target, a = (o = e.files) == null ? void 0 : o[0];
+      if (!a || !this.polycanvas || !this.uploadImageToS3) return;
+      const i = await this.uploadImageToS3(a);
+      i !== "error" && (this.addImageToCanvas(i), e.value = "");
     });
     s(this, "updateCanvas", ({ data: t, userId: e }) => {
       const a = this.userType === "TEACHER" || e === this.userId;
-      Object.entries(t).forEach(([n, o]) => {
-        var i, l, h;
-        !o[0] && o[1] ? (i = this.polycanvas) == null || i.add({ ...o[1], cannotEdit: !a }, n) : o[0] && !o[1] ? (l = this.polycanvas) == null || l.delete(n) : o[0] && o[1] && ((h = this.polycanvas) == null || h.update(n, { ...o[1] }));
-      });
+      try {
+        Object.entries(t).forEach(([i, o]) => {
+          var n, h, r;
+          !o[0] && o[1] ? ("name" in o[1] && o[1].name === "image" && (o[1].status = this.userType === "STUDENT" ? "locked" : void 0), (n = this.polycanvas) == null || n.add({ ...o[1], cannotEdit: !a }, i)) : o[0] && !o[1] ? (h = this.polycanvas) == null || h.delete(i) : o[0] && o[1] && ((r = this.polycanvas) == null || r.update(i, { ...o[1] }));
+        });
+      } catch {
+        v("Error Updating Canvas", t);
+      }
     });
     s(this, "toggleTiles", (t) => {
       var e;
       (e = this.polycanvas) == null || e.toggleSidebar(t);
     });
+    s(this, "setViewPort", ({ x: t, y: e, zoom: a }) => {
+      var i;
+      if (this.polycanvas) {
+        const o = (i = this.polycanvas) == null ? void 0 : i.getViewport();
+        if (o.x === t && o.y === e && o.zoom === a)
+          return;
+        this.polycanvas.setViewport(t, e, a);
+      }
+    });
     s(this, "resetViewPort", () => {
       this.polycanvas && this.polycanvas.resetViewport();
     });
     s(this, "changeGrid", (t) => {
-      this.polycanvas && (this.polycanvas.setOptions({
+      !this.polycanvas || this.gridName === t || (this.polycanvas.setOptions({
         grid: t
-      }), this.publishToChannel({}, t));
+      }), this.gridName = t, this.updateCanvasConfigChange && this.updateCanvasConfigChange({ gridName: t }));
     });
     s(this, "lockSelectedTiles", () => {
-      var a, n;
-      const { tiles: t } = ((a = this.polycanvas) == null ? void 0 : a.serialize()) || {}, e = ((n = this.polycanvas) == null ? void 0 : n.getSelection()) || [];
+      var a, i;
+      const { tiles: t } = ((a = this.polycanvas) == null ? void 0 : a.serialize()) || {}, e = ((i = this.polycanvas) == null ? void 0 : i.getSelection()) || [];
       if (e.length > 0 && t) {
         const o = {};
-        e.forEach((i) => {
-          var h, c, p;
-          if (!((h = t[i]) != null && h.name)) return;
-          const l = { ...t[i], status: "locked" };
-          (c = this.polycanvas) == null || c.update(i, l), (p = t[i]) != null && p.name && (o[i] = [t[i], l]);
+        e.forEach((n) => {
+          var r, l, p;
+          if (!((r = t[n]) != null && r.name)) return;
+          const h = { ...t[n], status: "locked" };
+          (l = this.polycanvas) == null || l.update(n, h), (p = t[n]) != null && p.name && (o[n] = [t[n], h]);
         }), this.publishToChannel(o);
       }
     });
     s(this, "unlockAllTiles", () => {
       if (!this.polycanvas) return;
       const { tiles: t } = this.polycanvas.serialize(), e = {};
-      t && Object.entries(t).length > 0 && (Object.entries(t).forEach(([a, n]) => {
-        var i;
-        if (n.status !== "locked") return;
-        const o = { ...n, status: void 0 };
-        (i = this.polycanvas) == null || i.update(a, o), e[a] = [n, o];
+      t && Object.entries(t).length > 0 && (Object.entries(t).forEach(([a, i]) => {
+        var n;
+        if (i.status !== "locked") return;
+        const o = { ...i, status: void 0 };
+        (n = this.polycanvas) == null || n.update(a, o), e[a] = [i, o];
       }), this.publishToChannel(e));
     });
     s(this, "replaceCanvas", (t) => {
       if (!this.polycanvas) return;
       const { data: e, gridName: a } = t;
-      this.polycanvas.clear(), a && this.polycanvas.setOptions({
-        grid: a
-      }), Object.entries(e).forEach(([n, o]) => {
-        var i;
+      this.polycanvas.clear(), a && this.changeGrid(a), Object.entries(e).forEach(([i, o]) => {
+        var n;
         if (!o[0] && o[1]) {
-          (i = this.polycanvas) == null || i.add({ ...o[1] }, n);
+          (n = this.polycanvas) == null || n.add({ ...o[1] }, i);
           return;
         }
-      }), this.publishToChannel(e, a);
+      }), this.publishToChannel(e);
     });
     s(this, "setTool", (t) => {
       if (this.polycanvas) {
-        const [e, a] = m(t);
+        const [e, a] = w(t);
         switch (e) {
           case "clearAll":
             this.clearCanvas();
@@ -222,10 +232,10 @@ class b {
      */
     s(this, "update", (t) => {
       if (Array.isArray(t)) {
-        const e = t.map((i) => i.height).filter(Boolean), a = Math.max(...e), n = t.map((i) => i.dimension).filter(Boolean)[t.length - 1], o = t.map((i) => i.gridName).filter(Boolean)[t.length - 1];
-        this.updateCanvasConfig(a, n, o), t.forEach((i) => this.updateCanvas(i));
+        const e = t.map((i) => i.height).filter(Boolean), a = Math.max(...e);
+        a > this.height && this.updateHeight(a), t.forEach((i) => this.updateCanvas(i));
       } else
-        this.updateCanvasConfig(t.height, t.dimension, t == null ? void 0 : t.gridName), this.updateCanvas(t);
+        t.height > this.height && this.updateHeight(t.height), this.updateCanvas(t);
     });
     s(this, "setColor", (t) => {
       this.polycanvas && this.polycanvas.setColor(t);
@@ -237,9 +247,9 @@ class b {
     s(this, "destroy", () => {
       this.polycanvas && (this.polycanvas.off("change", this.onChange), this.polycanvas.destroy(), this.debouncedViewportChange.cancel(), this.renderAs === "whiteboard" && this.userType === "TEACHER" && this.polycanvas.off("viewport", this.debouncedViewportChange), this.polycanvas = void 0, this.fileInput && this.fileInput.parentNode && (this.fileInput.parentNode.removeChild(this.fileInput), this.fileInput = null));
     });
-    this.onUpdateHeight = n, this.onUpdateActiveTool = a, this.height = i, this.uploadImageToS3 = o, this.userId = l, this.canvasId = h, this.publish = t, this.userType = c, this.renderAs = p, this.debouncedViewportChange = v(this.onViewPortChange, 300), e == null || e(this.canvasId, this.update);
+    this.onUpdateHeight = i, this.onUpdateActiveTool = a, this.height = n, this.uploadImageToS3 = o, this.userId = h, this.canvasId = r, this.publish = t, this.userType = l, this.renderAs = p, this.debouncedViewportChange = f(this.onViewPortChange, 300), this.updateCanvasConfigChange = d, e == null || e(this.canvasId, this.update);
   }
-  async create({ canvasElementRef: t, canvasConfig: e, canvasSetting: a, initialData: n }) {
+  async create({ canvasElementRef: t, canvasConfig: e, canvasSetting: a, initialData: i }) {
     if (!t.current)
       throw new Error("PolyCanvas: Div Element Not found for canvas");
     this.polycanvas = await window.Polypad.create(t.current, {
@@ -247,11 +257,11 @@ class b {
         options: e
       },
       ...a,
-      imageUpload: this.renderAs === "whiteboard" && this.userType === "TEACHER" ? this.uploadFileToCanvas : void 0
-    }), this.renderAs === "whiteboard" && this.userType === "TEACHER" && (this.polycanvas.toggleSidebar(!1), f(t), this.polycanvas.on("viewport", this.debouncedViewportChange)), g(t), this.polycanvas.on("change", this.onChange), n && this.update(n);
+      imageUpload: this.renderAs === "whiteboard" && this.userType === "TEACHER" && this.uploadImageToS3 ? this.uploadImageToS3 : void 0
+    }), this.renderAs === "whiteboard" && this.userType === "TEACHER" && (this.polycanvas.toggleSidebar(!1), this.polycanvas.bindKeyboardEvents({}), y(t), this.polycanvas.on("viewport", this.debouncedViewportChange)), C(t), this.polycanvas.on("change", this.onChange), i && this.update(i);
   }
 }
 export {
-  b as CueCanvasCore
+  E as CueCanvasCore
 };
 //# sourceMappingURL=cue-canvas-core.js.map