npm - @cuemath/leap - Versions diffs - 3.0.22-aa1 → 3.0.22-aa13 - Mend

@cuemath/leap 3.0.22-aa1 → 3.0.22-aa13

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (124) hide show

package/dist/_virtual/_commonjsHelpers.js CHANGED Viewed

@@ -1,29 +1,9 @@
-var u = typeof globalThis < "u" ? globalThis : typeof window < "u" ? window : typeof global < "u" ? global : typeof self < "u" ? self : {};
-function f(e) {
-  return e && e.__esModule && Object.prototype.hasOwnProperty.call(e, "default") ? e.default : e;
-}
+var o = typeof globalThis < "u" ? globalThis : typeof window < "u" ? window : typeof global < "u" ? global : typeof self < "u" ? self : {};
 function l(e) {
-  if (e.__esModule) return e;
-  var r = e.default;
-  if (typeof r == "function") {
-    var t = function o() {
-      return this instanceof o ? Reflect.construct(r, arguments, this.constructor) : r.apply(this, arguments);
-    };
-    t.prototype = r.prototype;
-  } else t = {};
-  return Object.defineProperty(t, "__esModule", { value: !0 }), Object.keys(e).forEach(function(o) {
-    var n = Object.getOwnPropertyDescriptor(e, o);
-    Object.defineProperty(t, o, n.get ? n : {
-      enumerable: !0,
-      get: function() {
-        return e[o];
-      }
-    });
-  }), t;
+  return e && e.__esModule && Object.prototype.hasOwnProperty.call(e, "default") ? e.default : e;
 }
 export {
-  u as commonjsGlobal,
-  l as getAugmentedNamespace,
-  f as getDefaultExportFromCjs
+  o as commonjsGlobal,
+  l as getDefaultExportFromCjs
 };
 //# sourceMappingURL=_commonjsHelpers.js.map

package/dist/_virtual/_commonjsHelpers.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"_commonjsHelpers.js","sources":[],"sourcesContent":[],"names":[],"mappings":"~~;;;;;;;;;;;;;;;;;;;;;;;~~"}
1	+ {"version":3,"file":"_commonjsHelpers.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;"}

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

@@ -7,9 +7,9 @@ class b {
   constructor({
     onPublish: t,
     onSubscribe: e,
-    onUpdateActiveTool: a,
+    onUpdateActiveTool: i,
     onUpdateHeight: n,
-    uploadImageToS3: i,
+    uploadImageToS3: a,
     height: o,
     userId: h,
     canvasId: r,
@@ -28,7 +28,7 @@ class b {
     s(this, "fileInput", null);
     s(this, "debouncedViewportChange");
     s(this, "uploadImageToS3");
-    s(this, "publishToChannel", (t, e, a) => {
+    s(this, "publishToChannel", (t, e, i) => {
       this.publish && this.publish({
         eventName: "cue_canvas_changed",
         eventPayload: {
@@ -37,13 +37,13 @@ class b {
           userId: this.userId,
           responseId: this.canvasId,
           gridName: e,
-          dimension: a
+          dimension: i
         }
       });
     });
     s(this, "onChange", (t) => {
-      const a = Object.fromEntries(t.entries());
-      y(a) && this.onUpdateActiveTool("move"), this.publishToChannel(a);
+      const i = Object.fromEntries(t.entries());
+      y(i) && this.onUpdateActiveTool("move"), this.publishToChannel(i);
     });
     s(this, "undo", () => {
       if (!this.polycanvas)
@@ -91,36 +91,36 @@ class b {
     });
     s(this, "addImageToCanvas", (t) => {
       if (!this.polycanvas) return;
-      const e = this.polycanvas.getViewport(), a = {
+      const e = this.polycanvas.getViewport(), i = {
         name: "image",
         href: t,
         x: e.x + 24,
         y: e.y + 24,
         width: 500
       }, n = this.polycanvas.add({
-        ...a
+        ...i
       });
       this.publishToChannel({
-        [n]: [void 0, { ...a, status: "locked" }]
+        [n]: [void 0, { ...i, status: "locked" }]
       });
     });
     s(this, "onSelectImage", async (t) => {
-      var i;
-      const e = t.target, a = (i = e.files) == null ? void 0 : i[0];
-      if (!a || !this.polycanvas || !this.uploadImageToS3) return;
-      const n = await this.uploadImageToS3(a);
+      var a;
+      const e = t.target, i = (a = e.files) == null ? void 0 : a[0];
+      if (!i || !this.polycanvas || !this.uploadImageToS3) return;
+      const n = await this.uploadImageToS3(i);
       n !== "error" && (this.addImageToCanvas(n), e.value = "");
     });
-    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, "updateCanvasConfig", (t, e, i) => {
+      this.polycanvas && (t > this.height && this.updateHeight(t), e && this.polycanvas.setViewport(e.x, e.y, e.zoom), i && this.polycanvas.setOptions({
+        grid: i
       }));
     });
     s(this, "updateCanvas", ({ data: t, userId: e }) => {
-      const a = this.userType === "TEACHER" || e === this.userId;
-      Object.entries(t).forEach(([n, i]) => {
+      const i = this.userType === "TEACHER" || e === this.userId;
+      Object.entries(t).forEach(([n, a]) => {
         var o, h, r;
-        !i[0] && i[1] ? (o = this.polycanvas) == null || o.add({ ...i[1], cannotEdit: !a }, n) : i[0] && !i[1] ? (h = this.polycanvas) == null || h.delete(n) : i[0] && i[1] && ((r = this.polycanvas) == null || r.update(n, { ...i[1] }));
+        !a[0] && a[1] ? ("name" in a[1] && a[1].name === "image" && (a[1].status = this.userType === "STUDENT" ? "locked" : void 0), (o = this.polycanvas) == null || o.add({ ...a[1], cannotEdit: !i }, n)) : a[0] && !a[1] ? (h = this.polycanvas) == null || h.delete(n) : a[0] && a[1] && ((r = this.polycanvas) == null || r.update(n, { ...a[1] }));
       });
     });
     s(this, "toggleTiles", (t) => {
@@ -136,44 +136,44 @@ class b {
       }), this.publishToChannel({}, 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 i, n;
+      const { tiles: t } = ((i = this.polycanvas) == null ? void 0 : i.serialize()) || {}, e = ((n = this.polycanvas) == null ? void 0 : n.getSelection()) || [];
       if (e.length > 0 && t) {
-        const i = {};
+        const a = {};
         e.forEach((o) => {
           var r, c, p;
           if (!((r = t[o]) != null && r.name)) return;
           const h = { ...t[o], status: "locked" };
-          (c = this.polycanvas) == null || c.update(o, h), (p = t[o]) != null && p.name && (i[o] = [t[o], h]);
-        }), this.publishToChannel(i);
+          (c = this.polycanvas) == null || c.update(o, h), (p = t[o]) != null && p.name && (a[o] = [t[o], h]);
+        }), this.publishToChannel(a);
       }
     });
     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]) => {
+      t && Object.entries(t).length > 0 && (Object.entries(t).forEach(([i, n]) => {
         var o;
         if (n.status !== "locked") return;
-        const i = { ...n, status: void 0 };
-        (o = this.polycanvas) == null || o.update(a, i), e[a] = [n, i];
+        const a = { ...n, status: void 0 };
+        (o = this.polycanvas) == null || o.update(i, a), e[i] = [n, a];
       }), 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, i]) => {
+      const { data: e, gridName: i } = t;
+      this.polycanvas.clear(), i && this.polycanvas.setOptions({
+        grid: i
+      }), Object.entries(e).forEach(([n, a]) => {
         var o;
-        if (!i[0] && i[1]) {
-          (o = this.polycanvas) == null || o.add({ ...i[1] }, n);
+        if (!a[0] && a[1]) {
+          (o = this.polycanvas) == null || o.add({ ...a[1] }, n);
           return;
         }
-      }), this.publishToChannel(e, a);
+      }), this.publishToChannel(e, i);
     });
     s(this, "setTool", (t) => {
       if (this.polycanvas) {
-        const [e, a] = C(t);
+        const [e, i] = C(t);
         switch (e) {
           case "clearAll":
             this.clearCanvas();
@@ -208,7 +208,7 @@ class b {
           case "grid":
             break;
           default:
-            this.polycanvas.setTool(e, a);
+            this.polycanvas.setTool(e, i);
         }
       }
     });
@@ -226,8 +226,8 @@ class b {
      */
     s(this, "update", (t) => {
       if (Array.isArray(t)) {
-        const e = t.map((o) => o.height).filter(Boolean), a = Math.max(...e), n = t.map((o) => o.dimension).filter(Boolean)[t.length - 1], i = t.map((o) => o.gridName).filter(Boolean)[t.length - 1];
-        this.updateCanvasConfig(a, n, i), t.forEach((o) => this.updateCanvas(o));
+        const e = t.map((o) => o.height).filter(Boolean), i = Math.max(...e), n = t.map((o) => o.dimension).filter(Boolean)[t.length - 1], a = t.map((o) => o.gridName).filter(Boolean)[t.length - 1];
+        this.updateCanvasConfig(i, n, a), t.forEach((o) => this.updateCanvas(o));
       } else
         this.updateCanvasConfig(t.height, t.dimension, t == null ? void 0 : t.gridName), this.updateCanvas(t);
     });
@@ -241,16 +241,16 @@ 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 = o, this.uploadImageToS3 = i, this.userId = h, this.canvasId = r, this.publish = t, this.userType = c, this.renderAs = p, this.debouncedViewportChange = v(this.onViewPortChange, 300), e == null || e(this.canvasId, this.update);
+    this.onUpdateHeight = n, this.onUpdateActiveTool = i, this.height = o, this.uploadImageToS3 = a, this.userId = h, this.canvasId = r, this.publish = t, this.userType = c, this.renderAs = p, this.debouncedViewportChange = v(this.onViewPortChange, 300), e == null || e(this.canvasId, this.update);
   }
-  async create({ canvasElementRef: t, canvasConfig: e, canvasSetting: a, initialData: n }) {
+  async create({ canvasElementRef: t, canvasConfig: e, canvasSetting: i, initialData: n }) {
     if (!t.current)
       throw new Error("PolyCanvas: Div Element Not found for canvas");
     this.polycanvas = await window.Polypad.create(t.current, {
       initial: {
         options: e
       },
-      ...a,
+      ...i,
       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({}), g(t), this.polycanvas.on("viewport", this.debouncedViewportChange)), f(t), this.polycanvas.on("change", this.onChange), n && this.update(n);
   }

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

	@@ -1 +1 @@
1	- {"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 IViewport,\n TCueCanvasChangeData,\n TCueCanvasGridName,\n TCueCanvasTool,\n TPublish,\n TRenderAs,\n TCueCanvasChangeDataObject,\n IReplaceCanvas,\n ICueCanvasCoreProps,\n} from './types/cue-canvas';\nimport type { ICreateOptions } from './types/cue-canvas';\nimport type { IPolypad, IPolyPadInstance } from './types/polypad';\n\nimport debounce from 'lodash.debounce';\n\nimport {\n checkTextOrEquationTool,\n getReverseMap,\n getToolAndSubtool,\n removeMask,\n removeTileButton,\n} from './cue-canvas-helpers';\n\ndeclare global {\n interface Window {\n Polypad: IPolypad;\n }\n}\n\n/*\n The CueCanvasCore class manages the canvas state and tool synchronization.\n * When text or equations are added, Polypad automatically switches to 'move' tool.\n * onUpdateActiveTool ensures the UI reflects this automatic tool change.\n /\n\nexport class CueCanvasCore {\n private polycanvas: IPolyPadInstance \| undefined;\n private publish?: TPublish;\n private height: number;\n private onUpdateActiveTool: (tool: TCueCanvasTool) => void;\n private onUpdateHeight?: (height: number) => void;\n private userId: string;\n private canvasId: string;\n private userType: TUserTypes;\n private renderAs: TRenderAs;\n private fileInput: HTMLInputElement \| null = null;\n private debouncedViewportChange: ReturnType<typeof debounce>;\n private uploadImageToS3?: (file: File) => Promise<string>;\n\n constructor({\n onPublish,\n onSubscribe,\n onUpdateActiveTool,\n onUpdateHeight,\n uploadImageToS3,\n height,\n userId,\n canvasId,\n userType,\n renderAs,\n }: ICueCanvasCoreProps) {\n this.onUpdateHeight = onUpdateHeight;\n this.onUpdateActiveTool = onUpdateActiveTool;\n this.height = height;\n this.uploadImageToS3 = uploadImageToS3;\n this.userId = userId;\n this.canvasId = canvasId;\n this.publish = onPublish;\n this.userType = userType;\n this.renderAs = renderAs;\n this.debouncedViewportChange = debounce(this.onViewPortChange, 300);\n onSubscribe?.(this.canvasId, 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 imageUpload:\n this.renderAs === 'whiteboard' && this.userType === 'TEACHER' && this.uploadImageToS3\n ? this.uploadImageToS3\n : undefined,\n });\n\n if (this.renderAs === 'whiteboard' && this.userType === 'TEACHER') {\n this.polycanvas.toggleSidebar(false);\n this.polycanvas.bindKeyboardEvents({});\n\n removeTileButton(canvasElementRef);\n this.polycanvas.on('viewport', this.debouncedViewportChange);\n }\n\n removeMask(canvasElementRef);\n this.polycanvas.on('change', this.onChange);\n if (initialData) {\n this.update(initialData);\n }\n }\n\n private publishToChannel = (\n payload: TCueCanvasChangeDataObject,\n gridName?: TCueCanvasGridName,\n dimension?: IViewport,\n ) => {\n if (!this.publish) return;\n\n this.publish({\n eventName: 'cue_canvas_changed',\n eventPayload: {\n data: payload,\n height: this.height,\n userId: this.userId,\n responseId: this.canvasId,\n gridName,\n dimension,\n },\n });\n };\n\n private onChange = (e: unknown) => {\n const data = e as TCueCanvasChangeData;\n const payload = Object.fromEntries(data.entries());\n\n if (checkTextOrEquationTool(payload)) {\n this.onUpdateActiveTool('move');\n }\n\n this.publishToChannel(payload);\n };\n\n private 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 private 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 clearCanvas = () => {\n if (this.polycanvas) {\n this.polycanvas.clear();\n }\n };\n\n private zoomIn = () => {\n if (!this.polycanvas) return;\n\n const viewPort = this.polycanvas.getViewport();\n\n this.polycanvas.setViewport(viewPort.x, viewPort.y, viewPort.zoom 1.1);\n };\n\n private zoomOut = () => {\n if (!this.polycanvas) return;\n\n const viewPort = this.polycanvas.getViewport();\n\n this.polycanvas.setViewport(viewPort.x, viewPort.y, viewPort.zoom * 0.9);\n };\n\n getCanvasAsImage = async () => {\n if (!this.polycanvas) return;\n\n const image = await this.polycanvas.image(3000, 3000, 'png');\n\n return image;\n };\n\n private downloadCanvasAsImage = async () => {\n if (!this.polycanvas) return;\n\n const image = await this.polycanvas.image(3000, 3000, 'png');\n\n if (!image) return;\n\n const downloadLink = document.createElement('a');\n\n downloadLink.href = image;\n downloadLink.download = `canvas-drawing-${Date.now()}.png`;\n downloadLink.click();\n };\n\n private onViewPortChange = (e: IViewport): void => {\n if (!this.publish) return;\n\n const data = e as IViewport;\n\n this.publishToChannel({}, undefined, data);\n };\n\n private openFileUpload = (): void => {\n if (!this.fileInput) {\n this.fileInput = document.createElement('input');\n this.fileInput.type = 'file';\n this.fileInput.accept = 'image/';\n this.fileInput.style.display = 'none';\n this.fileInput.onchange = this.onSelectImage;\n document.body.appendChild(this.fileInput);\n }\n\n this.fileInput.click();\n };\n\n addImageToCanvas = (imageUrl: string): void => {\n if (!this.polycanvas) return;\n\n const viewPort = this.polycanvas.getViewport();\n const imgJson = {\n name: 'image',\n href: imageUrl,\n x: viewPort.x + 24,\n y: viewPort.y + 24,\n width: 500,\n };\n\n const key = this.polycanvas.add({\n ...imgJson,\n });\n\n this.publishToChannel({\n [key]: [undefined, { ...imgJson, status: 'locked' }],\n });\n };\n\n private onSelectImage = async (event: Event): Promise<void> => {\n const target = event.target as HTMLInputElement;\n const file = target.files?.[0];\n\n if (!file \|\| !this.polycanvas \|\| !this.uploadImageToS3) return;\n\n const imageUrl = await this.uploadImageToS3(file);\n\n if (imageUrl === 'error') {\n return;\n }\n\n this.addImageToCanvas(imageUrl);\n\n target.value = '';\n };\n\n private updateCanvasConfig = (\n height: number,\n dimension: IViewport \| undefined,\n gridName: TCueCanvasGridName \| undefined,\n ) => {\n if (!this.polycanvas) return;\n\n if (height > this.height) {\n this.updateHeight(height);\n }\n\n if (dimension) {\n this.polycanvas.setViewport(dimension.x, dimension.y, dimension.zoom);\n }\n\n if (gridName) {\n this.polycanvas.setOptions({\n grid: gridName,\n });\n }\n };\n\n private 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 if (value[0] && value[1]) {\n this.polycanvas?.update(key, { ...value[1] });\n }\n });\n };\n\n toggleTiles = (val: boolean) => {\n this.polycanvas?.toggleSidebar(val);\n };\n\n resetViewPort = () => {\n if (this.polycanvas) {\n this.polycanvas.resetViewport();\n }\n };\n\n changeGrid = (gridName: TCueCanvasGridName) => {\n if (!this.polycanvas) return;\n\n this.polycanvas.setOptions({\n grid: gridName,\n });\n\n this.publishToChannel({}, gridName);\n };\n\n lockSelectedTiles = () => {\n const { tiles: allTiles } = this.polycanvas?.serialize() \|\| {};\n const selectedItems = this.polycanvas?.getSelection() \|\| [];\n\n if (selectedItems.length > 0 && allTiles) {\n const lockedTiles: TCueCanvasChangeDataObject = {};\n\n selectedItems.forEach(key => {\n if (!allTiles[key]?.name) return;\n\n const updatedJson = { ...allTiles[key], status: 'locked' as const };\n\n this.polycanvas?.update(key, updatedJson);\n if (allTiles[key]?.name) lockedTiles[key] = [allTiles[key], updatedJson];\n });\n\n this.publishToChannel(lockedTiles);\n }\n };\n\n unlockAllTiles = () => {\n if (!this.polycanvas) return;\n\n const { tiles: allTiles } = this.polycanvas.serialize();\n const unlockedTiles: TCueCanvasChangeDataObject = {};\n\n if (allTiles && Object.entries(allTiles).length > 0) {\n Object.entries(allTiles).forEach(([key, item]) => {\n if (item.status !== 'locked') return;\n\n const updatedJson = { ...item, status: undefined };\n\n this.polycanvas?.update(key, updatedJson);\n unlockedTiles[key] = [item, updatedJson];\n });\n\n this.publishToChannel(unlockedTiles);\n }\n };\n\n replaceCanvas = (data: IReplaceCanvas) => {\n if (!this.polycanvas) return;\n\n const { data: canvasData, gridName } = data;\n\n this.polycanvas.clear();\n\n if (gridName) {\n this.polycanvas.setOptions({\n grid: gridName,\n });\n }\n\n Object.entries(canvasData).forEach(([key, value]) => {\n if (!value[0] && value[1]) {\n this.polycanvas?.add({ ...value[1] }, key);\n\n return;\n }\n });\n\n this.publishToChannel(canvasData, gridName);\n };\n\n setTool = (tool: TCueCanvasTool) => {\n if (this.polycanvas) {\n const [currTool, currSubTool] = getToolAndSubtool(tool);\n\n switch (currTool) {\n case 'clearAll':\n this.clearCanvas();\n break;\n case 'home':\n this.resetViewPort();\n break;\n case 'undo':\n this.undo();\n break;\n case 'redo':\n this.redo();\n break;\n case 'lock':\n this.lockSelectedTiles();\n break;\n case 'unlock':\n this.unlockAllTiles();\n break;\n case 'zoomIn':\n this.zoomIn();\n break;\n case 'zoomOut':\n this.zoomOut();\n break;\n case 'upload':\n this.openFileUpload();\n break;\n case 'download':\n this.downloadCanvasAsImage();\n break;\n case 'grid':\n break;\n default:\n this.polycanvas.setTool(currTool, currSubTool);\n }\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).filter(Boolean);\n const maxHeight = Math.max(...heights);\n const lastDimension = payload.map(data => data.dimension).filter(Boolean)[payload.length - 1];\n const lastGrid = payload.map(data => data.gridName).filter(Boolean)[payload.length - 1];\n\n this.updateCanvasConfig(maxHeight, lastDimension, lastGrid);\n payload.forEach(item => this.updateCanvas(item));\n } else {\n this.updateCanvasConfig(payload.height, payload.dimension, payload?.gridName);\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.debouncedViewportChange.cancel();\n\n if (this.renderAs === 'whiteboard' && this.userType === 'TEACHER') {\n this.polycanvas.off('viewport', this.debouncedViewportChange);\n }\n this.polycanvas = undefined;\n\n if (this.fileInput && this.fileInput.parentNode) {\n this.fileInput.parentNode.removeChild(this.fileInput);\n this.fileInput = null;\n }\n }\n };\n}\n"],"names":["CueCanvasCore","onPublish","onSubscribe","onUpdateActiveTool","onUpdateHeight","uploadImageToS3","height","userId","canvasId","userType","renderAs","__publicField","payload","gridName","dimension","e","checkTextOrEquationTool","data","undoData","getReverseMap","viewPort","image","downloadLink","imageUrl","imgJson","key","event","target","file","_a","canEditStroke","value","_b","_c","val","allTiles","selectedItems","lockedTiles","updatedJson","unlockedTiles","item","canvasData","tool","currTool","currSubTool","getToolAndSubtool","heights","maxHeight","lastDimension","lastGrid","color","debounce","canvasElementRef","canvasConfig","canvasSetting","initialData","removeTileButton","removeMask"],"mappings":"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"}
1	+ {"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 IViewport,\n TCueCanvasChangeData,\n TCueCanvasGridName,\n TCueCanvasTool,\n TPublish,\n TRenderAs,\n TCueCanvasChangeDataObject,\n IReplaceCanvas,\n ICueCanvasCoreProps,\n} from './types/cue-canvas';\nimport type { ICreateOptions } from './types/cue-canvas';\nimport type { IPolypad, IPolyPadInstance } from './types/polypad';\n\nimport debounce from 'lodash.debounce';\n\nimport {\n checkTextOrEquationTool,\n getReverseMap,\n getToolAndSubtool,\n removeMask,\n removeTileButton,\n} from './cue-canvas-helpers';\n\ndeclare global {\n interface Window {\n Polypad: IPolypad;\n }\n}\n\n/*\n The CueCanvasCore class manages the canvas state and tool synchronization.\n * When text or equations are added, Polypad automatically switches to 'move' tool.\n * onUpdateActiveTool ensures the UI reflects this automatic tool change.\n /\n\nexport class CueCanvasCore {\n private polycanvas: IPolyPadInstance \| undefined;\n private publish?: TPublish;\n private height: number;\n private onUpdateActiveTool: (tool: TCueCanvasTool) => void;\n private onUpdateHeight?: (height: number) => void;\n private userId: string;\n private canvasId: string;\n private userType: TUserTypes;\n private renderAs: TRenderAs;\n private fileInput: HTMLInputElement \| null = null;\n private debouncedViewportChange: ReturnType<typeof debounce>;\n private uploadImageToS3?: (file: File) => Promise<string>;\n\n constructor({\n onPublish,\n onSubscribe,\n onUpdateActiveTool,\n onUpdateHeight,\n uploadImageToS3,\n height,\n userId,\n canvasId,\n userType,\n renderAs,\n }: ICueCanvasCoreProps) {\n this.onUpdateHeight = onUpdateHeight;\n this.onUpdateActiveTool = onUpdateActiveTool;\n this.height = height;\n this.uploadImageToS3 = uploadImageToS3;\n this.userId = userId;\n this.canvasId = canvasId;\n this.publish = onPublish;\n this.userType = userType;\n this.renderAs = renderAs;\n this.debouncedViewportChange = debounce(this.onViewPortChange, 300);\n onSubscribe?.(this.canvasId, 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 imageUpload:\n this.renderAs === 'whiteboard' && this.userType === 'TEACHER' && this.uploadImageToS3\n ? this.uploadImageToS3\n : undefined,\n });\n\n if (this.renderAs === 'whiteboard' && this.userType === 'TEACHER') {\n this.polycanvas.toggleSidebar(false);\n this.polycanvas.bindKeyboardEvents({});\n\n removeTileButton(canvasElementRef);\n this.polycanvas.on('viewport', this.debouncedViewportChange);\n }\n\n removeMask(canvasElementRef);\n this.polycanvas.on('change', this.onChange);\n if (initialData) {\n this.update(initialData);\n }\n }\n\n private publishToChannel = (\n payload: TCueCanvasChangeDataObject,\n gridName?: TCueCanvasGridName,\n dimension?: IViewport,\n ) => {\n if (!this.publish) return;\n\n this.publish({\n eventName: 'cue_canvas_changed',\n eventPayload: {\n data: payload,\n height: this.height,\n userId: this.userId,\n responseId: this.canvasId,\n gridName,\n dimension,\n },\n });\n };\n\n private onChange = (e: unknown) => {\n const data = e as TCueCanvasChangeData;\n const payload = Object.fromEntries(data.entries());\n\n if (checkTextOrEquationTool(payload)) {\n this.onUpdateActiveTool('move');\n }\n\n this.publishToChannel(payload);\n };\n\n private 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 private 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 clearCanvas = () => {\n if (this.polycanvas) {\n this.polycanvas.clear();\n }\n };\n\n private zoomIn = () => {\n if (!this.polycanvas) return;\n\n const viewPort = this.polycanvas.getViewport();\n\n this.polycanvas.setViewport(viewPort.x, viewPort.y, viewPort.zoom 1.1);\n };\n\n private zoomOut = () => {\n if (!this.polycanvas) return;\n\n const viewPort = this.polycanvas.getViewport();\n\n this.polycanvas.setViewport(viewPort.x, viewPort.y, viewPort.zoom * 0.9);\n };\n\n getCanvasAsImage = async () => {\n if (!this.polycanvas) return;\n\n const image = await this.polycanvas.image(3000, 3000, 'png');\n\n return image;\n };\n\n private downloadCanvasAsImage = async () => {\n if (!this.polycanvas) return;\n\n const image = await this.polycanvas.image(3000, 3000, 'png');\n\n if (!image) return;\n\n const downloadLink = document.createElement('a');\n\n downloadLink.href = image;\n downloadLink.download = `canvas-drawing-${Date.now()}.png`;\n downloadLink.click();\n };\n\n private onViewPortChange = (e: IViewport): void => {\n if (!this.publish) return;\n\n const data = e as IViewport;\n\n this.publishToChannel({}, undefined, data);\n };\n\n private openFileUpload = (): void => {\n if (!this.fileInput) {\n this.fileInput = document.createElement('input');\n this.fileInput.type = 'file';\n this.fileInput.accept = 'image/';\n this.fileInput.style.display = 'none';\n this.fileInput.onchange = this.onSelectImage;\n document.body.appendChild(this.fileInput);\n }\n\n this.fileInput.click();\n };\n\n addImageToCanvas = (imageUrl: string): void => {\n if (!this.polycanvas) return;\n\n const viewPort = this.polycanvas.getViewport();\n const imgJson = {\n name: 'image',\n href: imageUrl,\n x: viewPort.x + 24,\n y: viewPort.y + 24,\n width: 500,\n };\n\n const key = this.polycanvas.add({\n ...imgJson,\n });\n\n this.publishToChannel({\n [key]: [undefined, { ...imgJson, status: 'locked' }],\n });\n };\n\n private onSelectImage = async (event: Event): Promise<void> => {\n const target = event.target as HTMLInputElement;\n const file = target.files?.[0];\n\n if (!file \|\| !this.polycanvas \|\| !this.uploadImageToS3) return;\n\n const imageUrl = await this.uploadImageToS3(file);\n\n if (imageUrl === 'error') {\n return;\n }\n\n this.addImageToCanvas(imageUrl);\n\n target.value = '';\n };\n\n private updateCanvasConfig = (\n height: number,\n dimension: IViewport \| undefined,\n gridName: TCueCanvasGridName \| undefined,\n ) => {\n if (!this.polycanvas) return;\n\n if (height > this.height) {\n this.updateHeight(height);\n }\n\n if (dimension) {\n this.polycanvas.setViewport(dimension.x, dimension.y, dimension.zoom);\n }\n\n if (gridName) {\n this.polycanvas.setOptions({\n grid: gridName,\n });\n }\n };\n\n private 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 if ('name' in value[1] && value[1].name === 'image') {\n value[1].status = this.userType === 'STUDENT' ? 'locked' : undefined; // Lock only images for students\n }\n this.polycanvas?.add({ ...value[1], cannotEdit: !canEditStroke }, key);\n } else if (value[0] && !value[1]) {\n this.polycanvas?.delete(key);\n } else if (value[0] && value[1]) {\n this.polycanvas?.update(key, { ...value[1] });\n }\n });\n };\n\n toggleTiles = (val: boolean) => {\n this.polycanvas?.toggleSidebar(val);\n };\n\n resetViewPort = () => {\n if (this.polycanvas) {\n this.polycanvas.resetViewport();\n }\n };\n\n changeGrid = (gridName: TCueCanvasGridName) => {\n if (!this.polycanvas) return;\n\n this.polycanvas.setOptions({\n grid: gridName,\n });\n\n this.publishToChannel({}, gridName);\n };\n\n lockSelectedTiles = () => {\n const { tiles: allTiles } = this.polycanvas?.serialize() \|\| {};\n const selectedItems = this.polycanvas?.getSelection() \|\| [];\n\n if (selectedItems.length > 0 && allTiles) {\n const lockedTiles: TCueCanvasChangeDataObject = {};\n\n selectedItems.forEach(key => {\n if (!allTiles[key]?.name) return;\n\n const updatedJson = { ...allTiles[key], status: 'locked' as const };\n\n this.polycanvas?.update(key, updatedJson);\n if (allTiles[key]?.name) lockedTiles[key] = [allTiles[key], updatedJson];\n });\n\n this.publishToChannel(lockedTiles);\n }\n };\n\n unlockAllTiles = () => {\n if (!this.polycanvas) return;\n\n const { tiles: allTiles } = this.polycanvas.serialize();\n const unlockedTiles: TCueCanvasChangeDataObject = {};\n\n if (allTiles && Object.entries(allTiles).length > 0) {\n Object.entries(allTiles).forEach(([key, item]) => {\n if (item.status !== 'locked') return;\n\n const updatedJson = { ...item, status: undefined };\n\n this.polycanvas?.update(key, updatedJson);\n unlockedTiles[key] = [item, updatedJson];\n });\n\n this.publishToChannel(unlockedTiles);\n }\n };\n\n replaceCanvas = (data: IReplaceCanvas) => {\n if (!this.polycanvas) return;\n\n const { data: canvasData, gridName } = data;\n\n this.polycanvas.clear();\n\n if (gridName) {\n this.polycanvas.setOptions({\n grid: gridName,\n });\n }\n\n Object.entries(canvasData).forEach(([key, value]) => {\n if (!value[0] && value[1]) {\n this.polycanvas?.add({ ...value[1] }, key);\n\n return;\n }\n });\n\n this.publishToChannel(canvasData, gridName);\n };\n\n setTool = (tool: TCueCanvasTool) => {\n if (this.polycanvas) {\n const [currTool, currSubTool] = getToolAndSubtool(tool);\n\n switch (currTool) {\n case 'clearAll':\n this.clearCanvas();\n break;\n case 'home':\n this.resetViewPort();\n break;\n case 'undo':\n this.undo();\n break;\n case 'redo':\n this.redo();\n break;\n case 'lock':\n this.lockSelectedTiles();\n break;\n case 'unlock':\n this.unlockAllTiles();\n break;\n case 'zoomIn':\n this.zoomIn();\n break;\n case 'zoomOut':\n this.zoomOut();\n break;\n case 'upload':\n this.openFileUpload();\n break;\n case 'download':\n this.downloadCanvasAsImage();\n break;\n case 'grid':\n break;\n default:\n this.polycanvas.setTool(currTool, currSubTool);\n }\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).filter(Boolean);\n const maxHeight = Math.max(...heights);\n const lastDimension = payload.map(data => data.dimension).filter(Boolean)[payload.length - 1];\n const lastGrid = payload.map(data => data.gridName).filter(Boolean)[payload.length - 1];\n\n this.updateCanvasConfig(maxHeight, lastDimension, lastGrid);\n payload.forEach(item => this.updateCanvas(item));\n } else {\n this.updateCanvasConfig(payload.height, payload.dimension, payload?.gridName);\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.debouncedViewportChange.cancel();\n\n if (this.renderAs === 'whiteboard' && this.userType === 'TEACHER') {\n this.polycanvas.off('viewport', this.debouncedViewportChange);\n }\n this.polycanvas = undefined;\n\n if (this.fileInput && this.fileInput.parentNode) {\n this.fileInput.parentNode.removeChild(this.fileInput);\n this.fileInput = null;\n }\n }\n };\n}\n"],"names":["CueCanvasCore","onPublish","onSubscribe","onUpdateActiveTool","onUpdateHeight","uploadImageToS3","height","userId","canvasId","userType","renderAs","__publicField","payload","gridName","dimension","e","checkTextOrEquationTool","data","undoData","getReverseMap","viewPort","image","downloadLink","imageUrl","imgJson","key","event","target","file","_a","canEditStroke","value","_b","_c","val","allTiles","selectedItems","lockedTiles","updatedJson","unlockedTiles","item","canvasData","tool","currTool","currSubTool","getToolAndSubtool","heights","maxHeight","lastDimension","lastGrid","color","debounce","canvasElementRef","canvasConfig","canvasSetting","initialData","removeTileButton","removeMask"],"mappings":"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"}

package/dist/features/cue-canvas/cue-cavas-styled.js CHANGED Viewed

@@ -10,7 +10,9 @@ import $ from "../../assets/line-icons/icons/undo.js";
 import m from "../../assets/line-icons/icons/unlock.js";
 import p from "../ui/layout/flex-view.js";
 import { CANVAS_COLORS as c } from "./constants/constants.js";
-const S = i(u)(({
+const W = i(p)`
+  border: 2px solid;
+`, S = i(u)(({
   theme: r,
   $active: o,
   $activeColor: t,
@@ -79,7 +81,7 @@ const S = i(u)(({
       }
     `}
   `;
-}), W = i(h)(({
+}), Y = i(h)(({
   $active: r,
   theme: o,
   $activeColor: t,
@@ -123,7 +125,7 @@ const S = i(u)(({
       }
     `}
   `;
-}), Y = i(x)(({
+}), w = i(x)(({
   $active: r,
   theme: o,
   $activeColor: t,
@@ -169,13 +171,13 @@ const S = i(u)(({
       }
     `}
   `;
-}), w = i(f)`
+}), H = i(f)`
   width: 20px;
   height: 20px;
-`, H = i(m)`
+`, P = i(m)`
   width: 20px;
   height: 20px;
-`, P = i(p)(
+`, T = i(p)(
   ({ theme: r, $active: o }) => {
     const { colors: t } = r;
     return l`
@@ -215,13 +217,13 @@ const S = i(u)(({
       `}
     `;
   }
-), T = i(a)`
+), U = i(a)`
   path {
     stroke: ${"white"};
   }
-`, U = i($)`
+`, j = i($)`
   transform: scaleX(-1);
-`, j = i(p)`
+`, D = i(p)`
   position: absolute;
   display: flex;
   justify-content: center;
@@ -229,7 +231,7 @@ const S = i(u)(({
   transition:
     opacity 0.5s ease,
     transform 0.5s ease;
-`, D = i(p)(
+`, O = i(p)(
   ({ $canScribble: r, $canRender: o, $renderAs: t }) => `
   display: ${o ? "block" : "none"};
   opacity: ${r ? 1 : 0.5};
@@ -242,18 +244,18 @@ const S = i(u)(({
     `}
 `
-), O = i(p)(
+), V = i(p)(
   ({ $color: r }) => `
 background: ${c[r]};
 `
-), V = i(d)`
+), z = i(d)`
   pointer-events: none;
   transition: transform 0.5s ease;
   transform: ${({ $isAnimating: r }) => r ? "rotate(180deg)" : "rotate(0deg)"};
-`, z = i(p)`
+`, F = i(p)`
   overflow: hidden;
   border-right: 1px solid ${({ theme: r }) => r.colors.GREY_1};
-`, F = i(p)`
+`, M = i(p)`
   position: absolute;
   padding: 8px 8px 0 8px;
   overflow: hidden;
@@ -269,20 +271,21 @@ background: ${c[r]};
   }
 `;
 export {
-  O as ColorPicker,
-  D as CueCanvasWrapper,
-  F as MenuWrapper,
-  j as PaletteWrapper,
-  z as PenIconWrapper,
-  U as RedoIcon,
-  T as StyledCheckIcon,
-  V as StyledDownIcon,
-  W as StyledHighlighterWrapper,
-  w as StyledLockIcon,
+  V as ColorPicker,
+  O as CueCanvasWrapper,
+  W as HWWrapper,
+  M as MenuWrapper,
+  D as PaletteWrapper,
+  F as PenIconWrapper,
+  j as RedoIcon,
+  U as StyledCheckIcon,
+  z as StyledDownIcon,
+  Y as StyledHighlighterWrapper,
+  H as StyledLockIcon,
   S as StyledPencilIcon,
   G as StyledRulerIcon,
-  Y as StyledSketchWrapper,
-  H as StyledUnlockIcon,
-  P as StyledWrapper
+  w as StyledSketchWrapper,
+  P as StyledUnlockIcon,
+  T as StyledWrapper
 };
 //# sourceMappingURL=cue-cavas-styled.js.map

package/dist/features/cue-canvas/cue-cavas-styled.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"cue-cavas-styled.js","sources":["../../../src/features/cue-canvas/cue-cavas-styled.tsx"],"sourcesContent":["import type { ICueCanvasWrapper, TCueCanvasColors } from './types/cue-canvas';\n\nimport styled, { css } from 'styled-components';\n\nimport TickIcon from '../../assets/line-icons/icons/check';\nimport DownIcon from '../../assets/line-icons/icons/down';\nimport HighlighterIcon from '../../assets/line-icons/icons/highlighter';\nimport LockIcon from '../../assets/line-icons/icons/lock';\nimport PencilIcon from '../../assets/line-icons/icons/pencil';\nimport RulerIcon from '../../assets/line-icons/icons/ruler';\nimport SketchIcon from '../../assets/line-icons/icons/sketch';\nimport UndoIcon from '../../assets/line-icons/icons/undo';\nimport UnlockIcon from '../../assets/line-icons/icons/unlock';\nimport FlexView from '../ui/layout/flex-view';\nimport { CANVAS_COLORS } from './constants/constants';\n\ninterface IToolProps {\n $active: boolean;\n $activeColor: TCueCanvasColors;\n $shouldAnimate: boolean;\n}\n\nexport const StyledPencilIcon = styled(PencilIcon)<IToolProps>(({\n theme,\n $active,\n $activeColor,\n $shouldAnimate,\n}) => {\n const { colors } = theme;\n const color = $active ? CANVAS_COLORS[$activeColor] : colors.REAL_BLACK_50;\n\n return css`\n position: relative;\n transition: top 0.3s ease-in-out;\n top: ${$active && $shouldAnimate ? '0px' : '8px'};\n cursor: ${$active ? 'auto' : 'pointer'};\n .pencil-dark-shade {\n fill: ${$active ? color : colors.GREY_3};\n }\n\n .pencil-light-shade {\n fill: ${$active ? color : colors.GREY_2};\n opacity: ${$active ? 0.3 : 1};\n }\n\n ${!$active &&\n css`\n &:hover {\n .pencil-dark-shade {\n fill: ${colors.GREY_4};\n }\n .pencil-light-shade {\n fill: ${colors.GREY_2};\n }\n }\n `}\n `;\n});\n\nexport const StyledRulerIcon = styled(RulerIcon)<IToolProps>(({\n theme,\n $active,\n $activeColor,\n $shouldAnimate,\n}) => {\n const { colors } = theme;\n const color = $active ? CANVAS_COLORS[$activeColor] : colors.REAL_BLACK_50;\n\n return css`\n cursor: ${$active ? 'auto' : 'pointer'};\n position: relative;\n transition: top 0.3s ease-in-out;\n top: ${$active && $shouldAnimate ? '0px' : '8px'};\n\n .ruler-rect-color {\n fill: ${$active ? color : colors.GREY_3};\n }\n\n .ruler-stripe-base {\n fill: ${$active ? color : colors.GREY_2};\n opacity: ${$active ? 0.2 : 1};\n }\n\n .ruler-small-stripe {\n fill: ${colors.REAL_BLACK};\n }\n\n ${!$active &&\n css`\n &:hover {\n .ruler-rect-color {\n fill: ${colors.GREY_4};\n }\n .ruler-stripe-base {\n fill: ${colors.GREY_3};\n }\n }\n `}\n `;\n});\n\nexport const StyledHighlighterWrapper = styled(HighlighterIcon)<IToolProps>(({\n $active,\n theme,\n $activeColor,\n $shouldAnimate,\n}) => {\n const { colors } = theme;\n const color = $active ? CANVAS_COLORS[$activeColor] : colors.REAL_BLACK_50;\n\n return css`\n cursor: ${$active ? 'auto' : 'pointer'};\n position: relative;\n transition: top 0.3s ease-in-out;\n top: ${$active && $shouldAnimate ? '0px' : '8px'};\n ${!$active &&\n css`\n &:hover {\n .highlighter-tip {\n fill: ${theme.colors.BLACK};\n }\n\n .highlighter-stripe {\n fill: ${theme.colors.BLACK_50};\n }\n\n .highlighter-light-body {\n fill: ${theme.colors.BLACK_10};\n }\n }\n `}\n\n ${$active &&\n css`\n .highlighter-tip {\n fill: ${color};\n }\n\n .highlighter-stripe {\n fill: ${color};\n opacity: 0.6;\n }\n\n .highlighter-light-body {\n fill: ${color};\n opacity: 0.2;\n }\n `}\n `;\n});\n\nexport const StyledSketchWrapper = styled(SketchIcon)<IToolProps>(({\n $active,\n theme,\n $activeColor,\n $shouldAnimate,\n}) => {\n const { colors } = theme;\n const color = $active ? CANVAS_COLORS[$activeColor] : colors.REAL_BLACK_50;\n\n return css`\n cursor: ${$active ? 'auto' : 'pointer'};\n position: relative;\n transition: top 0.3s ease-in-out;\n top: ${$active && $shouldAnimate ? '0px' : '8px'};\n\n ${!$active &&\n css`\n &:hover {\n .pen-tip {\n fill: ${theme.colors.BLACK};\n }\n\n .pen-dark-shade {\n fill: ${theme.colors.BLACK_50};\n }\n\n .pen-light-shade {\n fill: ${theme.colors.BLACK_10};\n }\n }\n `}\n\n ${$active &&\n css`\n cursor: ${$active ? 'auto' : 'pointer'};\n .pen-tip {\n fill: ${color};\n }\n\n .pen-dark-shade {\n fill: ${color};\n opacity: 0.6;\n }\n\n .pen-light-shade {\n fill: ${color};\n opacity: 0.4;\n }\n `}\n `;\n});\n\nexport const StyledLockIcon = styled(LockIcon)`\n width: 20px;\n height: 20px;\n`;\n\nexport const StyledUnlockIcon = styled(UnlockIcon)`\n width: 20px;\n height: 20px;\n`;\n\nexport const StyledWrapper = styled(FlexView)<Omit<IToolProps, '$activeColor' \| '$shouldAnimate'>>(\n ({ theme, $active }) => {\n const { colors } = theme;\n\n return css`\n cursor: ${$active ? 'auto' : 'pointer'};\n width: 32px;\n height: 32px;\n justify-content: center;\n align-items: center;\n border: 1px solid ${colors.WHITE};\n border-radius: 50%;\n transition: all 100ms ease-in-out;\n border: 1px solid ${colors.GREY_1};\n\n ${!$active &&\n css`\n &:hover {\n border: 1px solid ${colors.REAL_BLACK};\n }\n `}\n\n ${$active &&\n css`\n cursor: auto;\n background: ${colors.BLACK};\n .tile-icon {\n fill: ${colors.BLACK};\n }\n svg {\n path,\n rect,\n circle {\n stroke: ${colors.WHITE};\n }\n .hover-eraser {\n stroke: none;\n fill: ${colors.WHITE};\n }\n }\n `}\n `;\n },\n);\n\nexport const StyledCheckIcon = styled(TickIcon)`\n path {\n stroke: ${'white'};\n }\n`;\n\nexport const RedoIcon = styled(UndoIcon)`\n transform: scaleX(-1);\n`;\n\nexport const PaletteWrapper = styled(FlexView)`\n position: absolute;\n display: flex;\n justify-content: center;\n top: -24px; //-16 for icon, -8 for gap\n transition:\n opacity 0.5s ease,\n transform 0.5s ease;\n`;\n\nexport const CueCanvasWrapper = styled(FlexView)<ICueCanvasWrapper>(\n ({ $canScribble, $canRender, $renderAs }) => `\n display: ${$canRender ? 'block' : 'none'};\n opacity: ${$canScribble ? 1 : 0.5};\n pointer-events: ${$canScribble ? 'auto' : 'none'};\n\n ${\n $renderAs === 'canvas' &&\n $canScribble &&\n `\n background-image: radial-gradient(rgb(43 43 43 / 8%) 2px, transparent 10%);\n background-position:0 0,32px 32px;\n background-size: 30px 32px;\n `\n }\n \n`,\n);\n\nexport const ColorPicker = styled(FlexView)<{ $color: TCueCanvasColors }>(\n ({ $color }) => `\nbackground: ${CANVAS_COLORS[$color]};\n`,\n);\n\nexport const StyledDownIcon = styled(DownIcon)<{ $isAnimating: boolean }>`\n pointer-events: none;\n transition: transform 0.5s ease;\n transform: ${({ $isAnimating }) => ($isAnimating ? 'rotate(180deg)' : 'rotate(0deg)')};\n`;\n\nexport const PenIconWrapper = styled(FlexView)`\n overflow: hidden;\n border-right: 1px solid ${({ theme }) => theme.colors.GREY_1};\n`;\n\nexport const MenuWrapper = styled(FlexView)`\n position: absolute;\n padding: 8px 8px 0 8px;\n overflow: hidden;\n bottom: 58px;\n border-top-left-radius: 8px;\n border-top-right-radius: 8px;\n transition:\n opacity 0.5s ease,\n transform 0.5s ease;\n\n :hover {\n cursor: pointer;\n }\n`;\n"],"names":["StyledPencilIcon","styled","PencilIcon","theme","$active","$activeColor","$shouldAnimate","colors","color","CANVAS_COLORS","css","StyledRulerIcon","RulerIcon","StyledHighlighterWrapper","HighlighterIcon","StyledSketchWrapper","SketchIcon","StyledLockIcon","LockIcon","StyledUnlockIcon","UnlockIcon","StyledWrapper","FlexView","StyledCheckIcon","TickIcon","RedoIcon","UndoIcon","PaletteWrapper","CueCanvasWrapper","$canScribble","$canRender","$renderAs","ColorPicker","$color","StyledDownIcon","DownIcon","$isAnimating","PenIconWrapper","MenuWrapper"],"mappings":"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"}
1	+ {"version":3,"file":"cue-cavas-styled.js","sources":["../../../src/features/cue-canvas/cue-cavas-styled.tsx"],"sourcesContent":["import type { ICueCanvasWrapper, TCueCanvasColors } from './types/cue-canvas';\n\nimport styled, { css } from 'styled-components';\n\nimport TickIcon from '../../assets/line-icons/icons/check';\nimport DownIcon from '../../assets/line-icons/icons/down';\nimport HighlighterIcon from '../../assets/line-icons/icons/highlighter';\nimport LockIcon from '../../assets/line-icons/icons/lock';\nimport PencilIcon from '../../assets/line-icons/icons/pencil';\nimport RulerIcon from '../../assets/line-icons/icons/ruler';\nimport SketchIcon from '../../assets/line-icons/icons/sketch';\nimport UndoIcon from '../../assets/line-icons/icons/undo';\nimport UnlockIcon from '../../assets/line-icons/icons/unlock';\nimport FlexView from '../ui/layout/flex-view';\nimport { CANVAS_COLORS } from './constants/constants';\n\ninterface IToolProps {\n $active: boolean;\n $activeColor: TCueCanvasColors;\n $shouldAnimate: boolean;\n}\nexport const HWWrapper = styled(FlexView)`\n border: 2px solid;\n`;\n\nexport const StyledPencilIcon = styled(PencilIcon)<IToolProps>(({\n theme,\n $active,\n $activeColor,\n $shouldAnimate,\n}) => {\n const { colors } = theme;\n const color = $active ? CANVAS_COLORS[$activeColor] : colors.REAL_BLACK_50;\n\n return css`\n position: relative;\n transition: top 0.3s ease-in-out;\n top: ${$active && $shouldAnimate ? '0px' : '8px'};\n cursor: ${$active ? 'auto' : 'pointer'};\n .pencil-dark-shade {\n fill: ${$active ? color : colors.GREY_3};\n }\n\n .pencil-light-shade {\n fill: ${$active ? color : colors.GREY_2};\n opacity: ${$active ? 0.3 : 1};\n }\n\n ${!$active &&\n css`\n &:hover {\n .pencil-dark-shade {\n fill: ${colors.GREY_4};\n }\n .pencil-light-shade {\n fill: ${colors.GREY_2};\n }\n }\n `}\n `;\n});\n\nexport const StyledRulerIcon = styled(RulerIcon)<IToolProps>(({\n theme,\n $active,\n $activeColor,\n $shouldAnimate,\n}) => {\n const { colors } = theme;\n const color = $active ? CANVAS_COLORS[$activeColor] : colors.REAL_BLACK_50;\n\n return css`\n cursor: ${$active ? 'auto' : 'pointer'};\n position: relative;\n transition: top 0.3s ease-in-out;\n top: ${$active && $shouldAnimate ? '0px' : '8px'};\n\n .ruler-rect-color {\n fill: ${$active ? color : colors.GREY_3};\n }\n\n .ruler-stripe-base {\n fill: ${$active ? color : colors.GREY_2};\n opacity: ${$active ? 0.2 : 1};\n }\n\n .ruler-small-stripe {\n fill: ${colors.REAL_BLACK};\n }\n\n ${!$active &&\n css`\n &:hover {\n .ruler-rect-color {\n fill: ${colors.GREY_4};\n }\n .ruler-stripe-base {\n fill: ${colors.GREY_3};\n }\n }\n `}\n `;\n});\n\nexport const StyledHighlighterWrapper = styled(HighlighterIcon)<IToolProps>(({\n $active,\n theme,\n $activeColor,\n $shouldAnimate,\n}) => {\n const { colors } = theme;\n const color = $active ? CANVAS_COLORS[$activeColor] : colors.REAL_BLACK_50;\n\n return css`\n cursor: ${$active ? 'auto' : 'pointer'};\n position: relative;\n transition: top 0.3s ease-in-out;\n top: ${$active && $shouldAnimate ? '0px' : '8px'};\n ${!$active &&\n css`\n &:hover {\n .highlighter-tip {\n fill: ${theme.colors.BLACK};\n }\n\n .highlighter-stripe {\n fill: ${theme.colors.BLACK_50};\n }\n\n .highlighter-light-body {\n fill: ${theme.colors.BLACK_10};\n }\n }\n `}\n\n ${$active &&\n css`\n .highlighter-tip {\n fill: ${color};\n }\n\n .highlighter-stripe {\n fill: ${color};\n opacity: 0.6;\n }\n\n .highlighter-light-body {\n fill: ${color};\n opacity: 0.2;\n }\n `}\n `;\n});\n\nexport const StyledSketchWrapper = styled(SketchIcon)<IToolProps>(({\n $active,\n theme,\n $activeColor,\n $shouldAnimate,\n}) => {\n const { colors } = theme;\n const color = $active ? CANVAS_COLORS[$activeColor] : colors.REAL_BLACK_50;\n\n return css`\n cursor: ${$active ? 'auto' : 'pointer'};\n position: relative;\n transition: top 0.3s ease-in-out;\n top: ${$active && $shouldAnimate ? '0px' : '8px'};\n\n ${!$active &&\n css`\n &:hover {\n .pen-tip {\n fill: ${theme.colors.BLACK};\n }\n\n .pen-dark-shade {\n fill: ${theme.colors.BLACK_50};\n }\n\n .pen-light-shade {\n fill: ${theme.colors.BLACK_10};\n }\n }\n `}\n\n ${$active &&\n css`\n cursor: ${$active ? 'auto' : 'pointer'};\n .pen-tip {\n fill: ${color};\n }\n\n .pen-dark-shade {\n fill: ${color};\n opacity: 0.6;\n }\n\n .pen-light-shade {\n fill: ${color};\n opacity: 0.4;\n }\n `}\n `;\n});\n\nexport const StyledLockIcon = styled(LockIcon)`\n width: 20px;\n height: 20px;\n`;\n\nexport const StyledUnlockIcon = styled(UnlockIcon)`\n width: 20px;\n height: 20px;\n`;\n\nexport const StyledWrapper = styled(FlexView)<Omit<IToolProps, '$activeColor' \| '$shouldAnimate'>>(\n ({ theme, $active }) => {\n const { colors } = theme;\n\n return css`\n cursor: ${$active ? 'auto' : 'pointer'};\n width: 32px;\n height: 32px;\n justify-content: center;\n align-items: center;\n border: 1px solid ${colors.WHITE};\n border-radius: 50%;\n transition: all 100ms ease-in-out;\n border: 1px solid ${colors.GREY_1};\n\n ${!$active &&\n css`\n &:hover {\n border: 1px solid ${colors.REAL_BLACK};\n }\n `}\n\n ${$active &&\n css`\n cursor: auto;\n background: ${colors.BLACK};\n .tile-icon {\n fill: ${colors.BLACK};\n }\n svg {\n path,\n rect,\n circle {\n stroke: ${colors.WHITE};\n }\n .hover-eraser {\n stroke: none;\n fill: ${colors.WHITE};\n }\n }\n `}\n `;\n },\n);\n\nexport const StyledCheckIcon = styled(TickIcon)`\n path {\n stroke: ${'white'};\n }\n`;\n\nexport const RedoIcon = styled(UndoIcon)`\n transform: scaleX(-1);\n`;\n\nexport const PaletteWrapper = styled(FlexView)`\n position: absolute;\n display: flex;\n justify-content: center;\n top: -24px; //-16 for icon, -8 for gap\n transition:\n opacity 0.5s ease,\n transform 0.5s ease;\n`;\n\nexport const CueCanvasWrapper = styled(FlexView)<ICueCanvasWrapper>(\n ({ $canScribble, $canRender, $renderAs }) => `\n display: ${$canRender ? 'block' : 'none'};\n opacity: ${$canScribble ? 1 : 0.5};\n pointer-events: ${$canScribble ? 'auto' : 'none'};\n\n ${\n $renderAs === 'canvas' &&\n $canScribble &&\n `\n background-image: radial-gradient(rgb(43 43 43 / 8%) 2px, transparent 10%);\n background-position:0 0,32px 32px;\n background-size: 30px 32px;\n `\n }\n \n`,\n);\n\nexport const ColorPicker = styled(FlexView)<{ $color: TCueCanvasColors }>(\n ({ $color }) => `\nbackground: ${CANVAS_COLORS[$color]};\n`,\n);\n\nexport const StyledDownIcon = styled(DownIcon)<{ $isAnimating: boolean }>`\n pointer-events: none;\n transition: transform 0.5s ease;\n transform: ${({ $isAnimating }) => ($isAnimating ? 'rotate(180deg)' : 'rotate(0deg)')};\n`;\n\nexport const PenIconWrapper = styled(FlexView)`\n overflow: hidden;\n border-right: 1px solid ${({ theme }) => theme.colors.GREY_1};\n`;\n\nexport const MenuWrapper = styled(FlexView)`\n position: absolute;\n padding: 8px 8px 0 8px;\n overflow: hidden;\n bottom: 58px;\n border-top-left-radius: 8px;\n border-top-right-radius: 8px;\n transition:\n opacity 0.5s ease,\n transform 0.5s ease;\n\n :hover {\n cursor: pointer;\n }\n`;\n"],"names":["HWWrapper","styled","FlexView","StyledPencilIcon","PencilIcon","theme","$active","$activeColor","$shouldAnimate","colors","color","CANVAS_COLORS","css","StyledRulerIcon","RulerIcon","StyledHighlighterWrapper","HighlighterIcon","StyledSketchWrapper","SketchIcon","StyledLockIcon","LockIcon","StyledUnlockIcon","UnlockIcon","StyledWrapper","StyledCheckIcon","TickIcon","RedoIcon","UndoIcon","PaletteWrapper","CueCanvasWrapper","$canScribble","$canRender","$renderAs","ColorPicker","$color","StyledDownIcon","DownIcon","$isAnimating","PenIconWrapper","MenuWrapper"],"mappings":";;;;;;;;;;;;AAqBa,MAAAA,IAAYC,EAAOC,CAAQ;AAAA;AAAA,GAI3BC,IAAmBF,EAAOG,CAAU,EAAc,CAAC;AAAA,EAC9D,OAAAC;AAAA,EACA,SAAAC;AAAA,EACA,cAAAC;AAAA,EACA,gBAAAC;AACF,MAAM;AACE,QAAA,EAAE,QAAAC,EAAW,IAAAJ,GACbK,IAAQJ,IAAUK,EAAcJ,CAAY,IAAIE,EAAO;AAEtD,SAAAG;AAAA;AAAA;AAAA,WAGEN,KAAWE,IAAiB,QAAQ,KAAK;AAAA,cACtCF,IAAU,SAAS,SAAS;AAAA;AAAA,cAE5BA,IAAUI,IAAQD,EAAO,MAAM;AAAA;AAAA;AAAA;AAAA,cAI/BH,IAAUI,IAAQD,EAAO,MAAM;AAAA,iBAC5BH,IAAU,MAAM,CAAC;AAAA;AAAA;AAAA,MAG5B,CAACA,KACHM;AAAA;AAAA;AAAA,kBAGcH,EAAO,MAAM;AAAA;AAAA;AAAA,kBAGbA,EAAO,MAAM;AAAA;AAAA;AAAA,KAG1B;AAAA;AAEL,CAAC,GAEYI,IAAkBZ,EAAOa,CAAS,EAAc,CAAC;AAAA,EAC5D,OAAAT;AAAA,EACA,SAAAC;AAAA,EACA,cAAAC;AAAA,EACA,gBAAAC;AACF,MAAM;AACE,QAAA,EAAE,QAAAC,EAAW,IAAAJ,GACbK,IAAQJ,IAAUK,EAAcJ,CAAY,IAAIE,EAAO;AAEtD,SAAAG;AAAA,cACKN,IAAU,SAAS,SAAS;AAAA;AAAA;AAAA,WAG/BA,KAAWE,IAAiB,QAAQ,KAAK;AAAA;AAAA;AAAA,cAGtCF,IAAUI,IAAQD,EAAO,MAAM;AAAA;AAAA;AAAA;AAAA,cAI/BH,IAAUI,IAAQD,EAAO,MAAM;AAAA,iBAC5BH,IAAU,MAAM,CAAC;AAAA;AAAA;AAAA;AAAA,cAIpBG,EAAO,UAAU;AAAA;AAAA;AAAA,MAGzB,CAACH,KACHM;AAAA;AAAA;AAAA,kBAGcH,EAAO,MAAM;AAAA;AAAA;AAAA,kBAGbA,EAAO,MAAM;AAAA;AAAA;AAAA,KAG1B;AAAA;AAEL,CAAC,GAEYM,IAA2Bd,EAAOe,CAAe,EAAc,CAAC;AAAA,EAC3E,SAAAV;AAAA,EACA,OAAAD;AAAA,EACA,cAAAE;AAAA,EACA,gBAAAC;AACF,MAAM;AACE,QAAA,EAAE,QAAAC,EAAW,IAAAJ,GACbK,IAAQJ,IAAUK,EAAcJ,CAAY,IAAIE,EAAO;AAEtD,SAAAG;AAAA,cACKN,IAAU,SAAS,SAAS;AAAA;AAAA;AAAA,WAG/BA,KAAWE,IAAiB,QAAQ,KAAK;AAAA,MAC9C,CAACF,KACHM;AAAA;AAAA;AAAA,kBAGcP,EAAM,OAAO,KAAK;AAAA;AAAA;AAAA;AAAA,kBAIlBA,EAAM,OAAO,QAAQ;AAAA;AAAA;AAAA;AAAA,kBAIrBA,EAAM,OAAO,QAAQ;AAAA;AAAA;AAAA,KAGlC;AAAA;AAAA,MAECC,KACFM;AAAA;AAAA,gBAEYF,CAAK;AAAA;AAAA;AAAA;AAAA,gBAILA,CAAK;AAAA;AAAA;AAAA;AAAA;AAAA,gBAKLA,CAAK;AAAA;AAAA;AAAA,KAGhB;AAAA;AAEL,CAAC,GAEYO,IAAsBhB,EAAOiB,CAAU,EAAc,CAAC;AAAA,EACjE,SAAAZ;AAAA,EACA,OAAAD;AAAA,EACA,cAAAE;AAAA,EACA,gBAAAC;AACF,MAAM;AACE,QAAA,EAAE,QAAAC,EAAW,IAAAJ,GACbK,IAAQJ,IAAUK,EAAcJ,CAAY,IAAIE,EAAO;AAEtD,SAAAG;AAAA,cACKN,IAAU,SAAS,SAAS;AAAA;AAAA;AAAA,WAG/BA,KAAWE,IAAiB,QAAQ,KAAK;AAAA;AAAA,MAE9C,CAACF,KACHM;AAAA;AAAA;AAAA,kBAGcP,EAAM,OAAO,KAAK;AAAA;AAAA;AAAA;AAAA,kBAIlBA,EAAM,OAAO,QAAQ;AAAA;AAAA;AAAA;AAAA,kBAIrBA,EAAM,OAAO,QAAQ;AAAA;AAAA;AAAA,KAGlC;AAAA;AAAA,MAECC,KACFM;AAAA,gBACYN,IAAU,SAAS,SAAS;AAAA;AAAA,gBAE5BI,CAAK;AAAA;AAAA;AAAA;AAAA,gBAILA,CAAK;AAAA;AAAA;AAAA;AAAA;AAAA,gBAKLA,CAAK;AAAA;AAAA;AAAA,KAGhB;AAAA;AAEL,CAAC,GAEYS,IAAiBlB,EAAOmB,CAAQ;AAAA;AAAA;AAAA,GAKhCC,IAAmBpB,EAAOqB,CAAU;AAAA;AAAA;AAAA,GAKpCC,IAAgBtB,EAAOC,CAAQ;AAAA,EAC1C,CAAC,EAAE,OAAAG,GAAO,SAAAC,QAAc;AAChB,UAAA,EAAE,QAAAG,EAAW,IAAAJ;AAEZ,WAAAO;AAAA,gBACKN,IAAU,SAAS,SAAS;AAAA;AAAA;AAAA;AAAA;AAAA,0BAKlBG,EAAO,KAAK;AAAA;AAAA;AAAA,0BAGZA,EAAO,MAAM;AAAA;AAAA,QAE/B,CAACH,KACHM;AAAA;AAAA,8BAEwBH,EAAO,UAAU;AAAA;AAAA,OAExC;AAAA;AAAA,QAECH,KACFM;AAAA;AAAA,sBAEgBH,EAAO,KAAK;AAAA;AAAA,kBAEhBA,EAAO,KAAK;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,sBAMRA,EAAO,KAAK;AAAA;AAAA;AAAA;AAAA,oBAIdA,EAAO,KAAK;AAAA;AAAA;AAAA,OAGzB;AAAA;AAAA,EAEL;AACF,GAEae,IAAkBvB,EAAOwB,CAAQ;AAAA;AAAA,cAEhC,OAAO;AAAA;AAAA,GAIRC,IAAWzB,EAAO0B,CAAQ;AAAA;AAAA,GAI1BC,IAAiB3B,EAAOC,CAAQ;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,GAUhC2B,IAAmB5B,EAAOC,CAAQ;AAAA,EAC7C,CAAC,EAAE,cAAA4B,GAAc,YAAAC,GAAY,WAAAC,EAAgB,MAAA;AAAA,aAClCD,IAAa,UAAU,MAAM;AAAA,aAC7BD,IAAe,IAAI,GAAG;AAAA,oBACfA,IAAe,SAAS,MAAM;AAAA;AAAA,IAG9CE,MAAc,YACdF,KACA;AAAA;AAAA;AAAA;AAAA,KAKF;AAAA;AAAA;AAGF,GAEaG,IAAchC,EAAOC,CAAQ;AAAA,EACxC,CAAC,EAAE,QAAAgC,EAAA,MAAa;AAAA,cACJvB,EAAcuB,CAAM,CAAC;AAAA;AAEnC,GAEaC,IAAiBlC,EAAOmC,CAAQ;AAAA;AAAA;AAAA,eAG9B,CAAC,EAAE,cAAAC,EAAA,MAAoBA,IAAe,mBAAmB,cAAe;AAAA,GAG1EC,IAAiBrC,EAAOC,CAAQ;AAAA;AAAA,4BAEjB,CAAC,EAAE,OAAAG,EAAA,MAAYA,EAAM,OAAO,MAAM;AAAA,GAGjDkC,IAActC,EAAOC,CAAQ;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;"}

package/dist/features/cue-canvas/sidebar/homework/homework-request.js CHANGED Viewed

@@ -1,21 +1,21 @@
 import { jsx as o, jsxs as q } from "react/jsx-runtime";
 import { h as c } from "../../../../node_modules/humanize-plus/dist/humanize.js";
-import { memo as $, useCallback as k } from "react";
-import W from "../../../ui/buttons/clickable/clickable.js";
-import _ from "../../../ui/layout/flex-view.js";
+import { memo as k, useCallback as $ } from "react";
+import y from "../../../ui/buttons/clickable/clickable.js";
+import W from "../../../ui/layout/flex-view.js";
 import d from "../../../ui/text/text.js";
-import { useCueCanvasActions as y } from "../../hooks/use-cue-canvas-actions.js";
+import { useCueCanvasActions as _ } from "../../hooks/use-cue-canvas-actions.js";
 import { getDateInInputFormat as E, getMonthNameforNumber as T } from "./helper.js";
 import { HWImageContainer as v } from "./homework-styled.js";
 import l from "../../../../node_modules/uuid/dist/esm-browser/v4.js";
-const D = (u) => {
+const j = (u) => {
   var a;
   const { hwRequest: h, onSelect: r, studentName: p } = u, {
-    problem_description: n,
+    problem_description: s,
     problem_image_urls: e,
     created_on_ts: f,
-    homework_id: s
-  } = h, { setHomeworkId: m, activeInstance: t } = y(), g = k(() => {
+    homework_id: n
+  } = h, { setHomeworkId: m, activeInstance: t } = _(), g = $(() => {
     const x = l();
     if (e && e.length > 0) {
       const i = {
@@ -24,7 +24,7 @@ const D = (u) => {
             void 0,
             {
               name: "text",
-              html: n,
+              html: s,
               x: 500,
               y: 75,
               rot: 0
@@ -33,7 +33,7 @@ const D = (u) => {
         }
       };
       e.forEach((C) => {
-        const H = l(), R = C + `?${Date.now()}`;
+        const H = l(), R = C + "?dummyProp=true";
         i.data[H] = [
           void 0,
           {
@@ -47,15 +47,22 @@ const D = (u) => {
         ];
       }), t == null || t.replaceCanvas(i);
     }
-    r(), m(s);
-  }, [t, n, s, e, r, m]), { date: w, month: I } = E(f), b = `${c.ordinal(w)} ${c.titleCase((a = T(I)) == null ? void 0 : a.toLowerCase())}`;
-  return /* @__PURE__ */ o(W, { label: "HW Request Item", onClick: g, children: /* @__PURE__ */ q(_, { $alignItems: "center", $justifyContent: "center", $borderRadius: 8, $background: "WHITE", children: [
-    /* @__PURE__ */ o(v, { src: e[0], alt: "Homework Request" }),
+    r(), m(n);
+  }, [t, s, n, e, r, m]), { date: I, month: w } = E(f), b = `${c.ordinal(I)} ${c.titleCase((a = T(w)) == null ? void 0 : a.toLowerCase())}`;
+  return /* @__PURE__ */ o(y, { label: "HW Request Item", onClick: g, children: /* @__PURE__ */ q(W, { $alignItems: "center", $justifyContent: "center", $borderRadius: 8, $background: "WHITE", children: [
+    /* @__PURE__ */ o(
+      v,
+      {
+        src: e[0],
+        alt: "Homework Request",
+        crossOrigin: "anonymous"
+      }
+    ),
     /* @__PURE__ */ o(d, { $renderAs: "body3", color: "WHITE", children: p }),
     /* @__PURE__ */ o(d, { $renderAs: "body3", color: "WHITE", children: b })
   ] }) });
-}, V = $(D);
+}, U = k(j);
 export {
-  V as default
+  U as default
 };
 //# sourceMappingURL=homework-request.js.map