@cuemath/leap 3.1.40 → 3.1.41-as3
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/features/cue-canvas/cue-canvas-core.js +8 -8
- package/dist/features/cue-canvas/cue-canvas-core.js.map +1 -1
- package/dist/features/cue-canvas/cue-canvas-helpers.js +56 -51
- package/dist/features/cue-canvas/cue-canvas-helpers.js.map +1 -1
- package/dist/features/hooks/use-audio-player.js +32 -21
- package/dist/features/hooks/use-audio-player.js.map +1 -1
- package/dist/index.d.ts +27 -0
- package/dist/static/lib/polypad-4.5.4.v1.js +64 -66
- package/package.json +1 -1
|
@@ -4,8 +4,8 @@ var s = (c, t, e) => g(c, typeof t != "symbol" ? t + "" : t, e);
|
|
|
4
4
|
import { captureMessage as f } from "@sentry/browser";
|
|
5
5
|
import y from "../../node_modules/lodash.debounce/index.js";
|
|
6
6
|
import { CANVAS_COLORS as d } from "./constants/constants.js";
|
|
7
|
-
import { getColorsForUser as C, removeTileButton as m,
|
|
8
|
-
class
|
|
7
|
+
import { getColorsForUser as C, removeTileButton as m, removeMusicTiles as T, removeMask as w, checkTextOrEquationTool as I, getReverseMap as b, STATELESS_TOOLS as A, getToolAndSubtool as E } from "./cue-canvas-helpers.js";
|
|
8
|
+
class H {
|
|
9
9
|
constructor({
|
|
10
10
|
onPublish: t,
|
|
11
11
|
onSubscribe: e,
|
|
@@ -48,7 +48,7 @@ class U {
|
|
|
48
48
|
});
|
|
49
49
|
s(this, "onChange", (t) => {
|
|
50
50
|
const a = Object.fromEntries(t.entries());
|
|
51
|
-
|
|
51
|
+
I(a) && (this.onUpdateActiveTool("move"), this.setTool("move")), this.publishToChannel(a);
|
|
52
52
|
});
|
|
53
53
|
s(this, "undo", () => {
|
|
54
54
|
if (!this.polycanvas)
|
|
@@ -56,7 +56,7 @@ class U {
|
|
|
56
56
|
const t = this.polycanvas.undo();
|
|
57
57
|
if (!t)
|
|
58
58
|
return;
|
|
59
|
-
const e =
|
|
59
|
+
const e = b(t);
|
|
60
60
|
this.onChange(e);
|
|
61
61
|
});
|
|
62
62
|
s(this, "redo", () => {
|
|
@@ -182,7 +182,7 @@ class U {
|
|
|
182
182
|
});
|
|
183
183
|
s(this, "setTool", (t) => {
|
|
184
184
|
if (!this.polycanvas || t === this.activeTool) return;
|
|
185
|
-
const [e, a] =
|
|
185
|
+
const [e, a] = E(t);
|
|
186
186
|
switch (e) {
|
|
187
187
|
case "clearAll":
|
|
188
188
|
this.clearCanvas();
|
|
@@ -219,7 +219,7 @@ class U {
|
|
|
219
219
|
default:
|
|
220
220
|
this.polycanvas.setTool(e, a);
|
|
221
221
|
}
|
|
222
|
-
|
|
222
|
+
A.has(t) || (this.activeTool = t);
|
|
223
223
|
});
|
|
224
224
|
/**
|
|
225
225
|
* The `update` method is called in two cases:
|
|
@@ -269,10 +269,10 @@ class U {
|
|
|
269
269
|
},
|
|
270
270
|
...a,
|
|
271
271
|
imageUpload: this.renderAs === "whiteboard" && this.userType === "TEACHER" && this.uploadImageToS3 ? this.uploadImageToS3 : void 0
|
|
272
|
-
}), this.renderAs === "whiteboard" && this.userType === "TEACHER" && (this.polycanvas.toggleSidebar(!1), this.polycanvas.bindKeyboardEvents({}), m(t), this.polycanvas.on("viewport", this.debouncedViewportChange)),
|
|
272
|
+
}), this.renderAs === "whiteboard" && this.userType === "TEACHER" && (this.polycanvas.toggleSidebar(!1), this.polycanvas.bindKeyboardEvents({}), m(t), T(t), this.polycanvas.on("viewport", this.debouncedViewportChange)), w(t), this.polycanvas.on("change", this.onChange), i && this.update(i);
|
|
273
273
|
}
|
|
274
274
|
}
|
|
275
275
|
export {
|
|
276
|
-
|
|
276
|
+
H as CueCanvasCore
|
|
277
277
|
};
|
|
278
278
|
//# sourceMappingURL=cue-canvas-core.js.map
|
|
@@ -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 TUpdateCanvasConfig,\n TCueCanvasColors,\n} from './types/cue-canvas';\nimport type { ICreateOptions } from './types/cue-canvas';\nimport type { IPolypad, IPolyPadInstance } from './types/polypad';\n\nimport { captureMessage } from '@sentry/browser';\nimport debounce from 'lodash.debounce';\n\nimport { CANVAS_COLORS } from './constants/constants';\nimport {\n checkTextOrEquationTool,\n getColorsForUser,\n getReverseMap,\n getToolAndSubtool,\n removeMask,\n removeTileButton,\n STATELESS_TOOLS,\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 private updateCanvasConfigChange?: TUpdateCanvasConfig;\n private gridName?: TCueCanvasGridName;\n private activeColor: TCueCanvasColors;\n private activeTool: TCueCanvasTool | undefined;\n\n constructor({\n onPublish,\n onSubscribe,\n onUpdateActiveTool,\n onUpdateHeight,\n uploadImageToS3,\n height,\n userId,\n canvasId,\n userType,\n renderAs,\n updateCanvasConfig,\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 this.updateCanvasConfigChange = updateCanvasConfig;\n this.activeColor = getColorsForUser(userType, renderAs)[0] as TCueCanvasColors;\n this.activeTool = undefined; // Default to first color in the palette\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 = (payload: TCueCanvasChangeDataObject) => {\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 },\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 this.setTool('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.updateCanvasConfigChange) return;\n\n this.updateCanvasConfigChange({ dimesion: e });\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 this.onUpdateActiveTool('move');\n this.setTool('move');\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 updateCanvas = ({ data, userId }: IActionData) => {\n const canEditStroke = this.userType === 'TEACHER' || userId === this.userId;\n\n try {\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 } catch (error) {\n captureMessage('Error Updating Canvas', data);\n }\n };\n\n toggleTiles = (val: boolean) => {\n this.polycanvas?.toggleSidebar(val);\n };\n\n setViewPort = ({ x, y, zoom }: IViewport) => {\n if (this.polycanvas) {\n const cv = this.polycanvas?.getViewport();\n\n if (cv.x === x && cv.y === y && cv.zoom === zoom) {\n return; // No change needed\n }\n\n this.polycanvas.setViewport(x, y, zoom);\n }\n };\n\n resetViewPort = () => {\n if (this.polycanvas) {\n this.polycanvas.resetViewport();\n }\n };\n\n changeGrid = (gridName: TCueCanvasGridName) => {\n if (!this.polycanvas || this.gridName === gridName) return;\n\n this.polycanvas.setOptions({\n grid: gridName,\n });\n this.gridName = gridName;\n if (this.updateCanvasConfigChange) {\n this.updateCanvasConfigChange({ gridName: gridName });\n }\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 if (gridName) {\n this.changeGrid(gridName);\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);\n };\n\n setTool = (tool: TCueCanvasTool) => {\n if (!this.polycanvas || tool === this.activeTool) return;\n\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 if (!STATELESS_TOOLS.has(tool)) {\n this.activeTool = tool;\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\n if (maxHeight > this.height) {\n this.updateHeight(maxHeight);\n }\n payload.forEach(item => this.updateCanvas(item));\n } else {\n if (payload.height > this.height) {\n this.updateHeight(payload.height);\n }\n this.updateCanvas(payload);\n }\n };\n\n getSelections = () => {\n return this.polycanvas ? this.polycanvas.getSelection() : [];\n };\n\n setColor = (color: TCueCanvasColors) => {\n if (!this.polycanvas || !this.activeColor) return;\n\n const selectedColor = CANVAS_COLORS[color];\n\n const selections = this.getSelections();\n\n if (selections && selections.length > 0) {\n selections.forEach((key: string) => {\n this.polycanvas?.update(key, { color: selectedColor });\n this.onChange(\n new Map([[key, [{ color: CANVAS_COLORS[this.activeColor] }, { color: selectedColor }]]]),\n );\n });\n }\n this.polycanvas.setColor(selectedColor);\n this.activeColor = color;\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","updateCanvasConfig","__publicField","payload","e","checkTextOrEquationTool","data","undoData","getReverseMap","viewPort","image","downloadLink","imageUrl","imgJson","key","event","target","file","_a","canEditStroke","value","_b","_c","captureMessage","val","x","y","zoom","cv","gridName","allTiles","selectedItems","lockedTiles","updatedJson","unlockedTiles","item","canvasData","tool","currTool","currSubTool","getToolAndSubtool","STATELESS_TOOLS","heights","maxHeight","color","selectedColor","CANVAS_COLORS","selections","debounce","getColorsForUser","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 TUpdateCanvasConfig,\n TCueCanvasColors,\n} from './types/cue-canvas';\nimport type { ICreateOptions } from './types/cue-canvas';\nimport type { IPolypad, IPolyPadInstance } from './types/polypad';\n\nimport { captureMessage } from '@sentry/browser';\nimport debounce from 'lodash.debounce';\n\nimport { CANVAS_COLORS } from './constants/constants';\nimport {\n checkTextOrEquationTool,\n getColorsForUser,\n getReverseMap,\n getToolAndSubtool,\n removeMask,\n removeMusicTiles,\n removeTileButton,\n STATELESS_TOOLS,\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 private updateCanvasConfigChange?: TUpdateCanvasConfig;\n private gridName?: TCueCanvasGridName;\n private activeColor: TCueCanvasColors;\n private activeTool: TCueCanvasTool | undefined;\n\n constructor({\n onPublish,\n onSubscribe,\n onUpdateActiveTool,\n onUpdateHeight,\n uploadImageToS3,\n height,\n userId,\n canvasId,\n userType,\n renderAs,\n updateCanvasConfig,\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 this.updateCanvasConfigChange = updateCanvasConfig;\n this.activeColor = getColorsForUser(userType, renderAs)[0] as TCueCanvasColors;\n this.activeTool = undefined; // Default to first color in the palette\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 removeMusicTiles(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 = (payload: TCueCanvasChangeDataObject) => {\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 },\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 this.setTool('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.updateCanvasConfigChange) return;\n\n this.updateCanvasConfigChange({ dimesion: e });\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 this.onUpdateActiveTool('move');\n this.setTool('move');\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 updateCanvas = ({ data, userId }: IActionData) => {\n const canEditStroke = this.userType === 'TEACHER' || userId === this.userId;\n\n try {\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 } catch (error) {\n captureMessage('Error Updating Canvas', data);\n }\n };\n\n toggleTiles = (val: boolean) => {\n this.polycanvas?.toggleSidebar(val);\n };\n\n setViewPort = ({ x, y, zoom }: IViewport) => {\n if (this.polycanvas) {\n const cv = this.polycanvas?.getViewport();\n\n if (cv.x === x && cv.y === y && cv.zoom === zoom) {\n return; // No change needed\n }\n\n this.polycanvas.setViewport(x, y, zoom);\n }\n };\n\n resetViewPort = () => {\n if (this.polycanvas) {\n this.polycanvas.resetViewport();\n }\n };\n\n changeGrid = (gridName: TCueCanvasGridName) => {\n if (!this.polycanvas || this.gridName === gridName) return;\n\n this.polycanvas.setOptions({\n grid: gridName,\n });\n this.gridName = gridName;\n if (this.updateCanvasConfigChange) {\n this.updateCanvasConfigChange({ gridName: gridName });\n }\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 if (gridName) {\n this.changeGrid(gridName);\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);\n };\n\n setTool = (tool: TCueCanvasTool) => {\n if (!this.polycanvas || tool === this.activeTool) return;\n\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 if (!STATELESS_TOOLS.has(tool)) {\n this.activeTool = tool;\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\n if (maxHeight > this.height) {\n this.updateHeight(maxHeight);\n }\n payload.forEach(item => this.updateCanvas(item));\n } else {\n if (payload.height > this.height) {\n this.updateHeight(payload.height);\n }\n this.updateCanvas(payload);\n }\n };\n\n getSelections = () => {\n return this.polycanvas ? this.polycanvas.getSelection() : [];\n };\n\n setColor = (color: TCueCanvasColors) => {\n if (!this.polycanvas || !this.activeColor) return;\n\n const selectedColor = CANVAS_COLORS[color];\n\n const selections = this.getSelections();\n\n if (selections && selections.length > 0) {\n selections.forEach((key: string) => {\n this.polycanvas?.update(key, { color: selectedColor });\n this.onChange(\n new Map([[key, [{ color: CANVAS_COLORS[this.activeColor] }, { color: selectedColor }]]]),\n );\n });\n }\n this.polycanvas.setColor(selectedColor);\n this.activeColor = color;\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","updateCanvasConfig","__publicField","payload","e","checkTextOrEquationTool","data","undoData","getReverseMap","viewPort","image","downloadLink","imageUrl","imgJson","key","event","target","file","_a","canEditStroke","value","_b","_c","captureMessage","val","x","y","zoom","cv","gridName","allTiles","selectedItems","lockedTiles","updatedJson","unlockedTiles","item","canvasData","tool","currTool","currSubTool","getToolAndSubtool","STATELESS_TOOLS","heights","maxHeight","color","selectedColor","CANVAS_COLORS","selections","debounce","getColorsForUser","canvasElementRef","canvasConfig","canvasSetting","initialData","removeTileButton","removeMusicTiles","removeMask"],"mappings":"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"}
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { CANVAS_COLORS as u } from "./constants/constants.js";
|
|
2
|
-
const
|
|
2
|
+
const h = [
|
|
3
3
|
"none",
|
|
4
4
|
"square2-grid",
|
|
5
5
|
"square-checked",
|
|
@@ -20,64 +20,68 @@ const E = [
|
|
|
20
20
|
"zoomOut",
|
|
21
21
|
"upload",
|
|
22
22
|
"download"
|
|
23
|
-
]),
|
|
24
|
-
var
|
|
25
|
-
const
|
|
26
|
-
if (
|
|
27
|
-
const
|
|
28
|
-
if (
|
|
29
|
-
const s =
|
|
30
|
-
|
|
23
|
+
]), E = (n) => {
|
|
24
|
+
var t;
|
|
25
|
+
const e = (t = n.current) == null ? void 0 : t.shadowRoot;
|
|
26
|
+
if (e) {
|
|
27
|
+
const r = e.querySelectorAll("x-polypad");
|
|
28
|
+
if (r[0]) {
|
|
29
|
+
const s = r[0].querySelector("svg.canvas"), o = s == null ? void 0 : s.querySelector("path.mask");
|
|
30
|
+
o == null || o.setAttribute("stroke", "transparent"), o == null || o.setAttribute("fill", "transparent"), o == null || o.removeAttribute("style");
|
|
31
31
|
}
|
|
32
32
|
}
|
|
33
|
-
},
|
|
34
|
-
var
|
|
35
|
-
const
|
|
36
|
-
if (
|
|
37
|
-
const a =
|
|
33
|
+
}, y = (n) => {
|
|
34
|
+
var o;
|
|
35
|
+
const e = (o = n.current) == null ? void 0 : o.shadowRoot, t = e == null ? void 0 : e.querySelector("x-pp-sidebar"), r = t == null ? void 0 : t.getElementsByClassName("tabs-header"), s = t == null ? void 0 : t.getElementsByClassName("tabs-body");
|
|
36
|
+
if (t == null || t.setAttribute("style", "display: none;"), t == null || t.setAttribute("style", "height: 30px;"), r && r.length > 0) {
|
|
37
|
+
const a = r[0];
|
|
38
38
|
a.style.display = "none";
|
|
39
39
|
}
|
|
40
40
|
if (s && s.length > 0) {
|
|
41
41
|
const a = s[0];
|
|
42
42
|
a.style.top = "48px";
|
|
43
43
|
}
|
|
44
|
-
|
|
45
|
-
},
|
|
44
|
+
t == null || t.setAttribute("style", "display: block;");
|
|
45
|
+
}, b = (n) => {
|
|
46
|
+
var t;
|
|
47
|
+
const e = (t = n.current.shadowRoot) == null ? void 0 : t.querySelectorAll('[data-key="music"]')[0];
|
|
48
|
+
e && (e.style.display = "none");
|
|
49
|
+
}, f = (n, e, t, r) => t === "canvas" ? {
|
|
46
50
|
canvas: "notebook",
|
|
47
|
-
canvasX:
|
|
48
|
-
canvasY:
|
|
51
|
+
canvasX: n,
|
|
52
|
+
canvasY: e,
|
|
49
53
|
noPinchPan: !0,
|
|
50
54
|
grid: "none",
|
|
51
55
|
background: "transparent",
|
|
52
56
|
noSnapping: !0
|
|
53
57
|
} : {
|
|
54
58
|
canvas: "infinite",
|
|
55
|
-
canvasX:
|
|
56
|
-
canvasY:
|
|
59
|
+
canvasX: n,
|
|
60
|
+
canvasY: e,
|
|
57
61
|
grid: "none",
|
|
58
|
-
noPinchPan:
|
|
59
|
-
noDeleting:
|
|
60
|
-
noCopyPaste:
|
|
62
|
+
noPinchPan: r === "STUDENT",
|
|
63
|
+
noDeleting: r === "STUDENT",
|
|
64
|
+
noCopyPaste: r === "STUDENT",
|
|
61
65
|
noMusic: !0,
|
|
62
66
|
noAudio: !0
|
|
63
|
-
},
|
|
67
|
+
}, C = (n, e) => n === "canvas" ? {
|
|
64
68
|
sidebarTiles: !1,
|
|
65
69
|
sidebarSettings: !1,
|
|
66
70
|
settings: !1,
|
|
67
71
|
toolbar: !1,
|
|
68
72
|
canvasMargin: 0
|
|
69
73
|
} : {
|
|
70
|
-
sidebarTiles:
|
|
74
|
+
sidebarTiles: e === "TEACHER",
|
|
71
75
|
sidebarSettings: !1,
|
|
72
76
|
settings: !1,
|
|
73
77
|
toolbar: !1
|
|
74
|
-
}, d = (
|
|
75
|
-
const
|
|
76
|
-
return
|
|
77
|
-
|
|
78
|
-
}),
|
|
79
|
-
},
|
|
80
|
-
switch (
|
|
78
|
+
}, d = (n) => [n[1], n[0]], v = (n) => {
|
|
79
|
+
const e = /* @__PURE__ */ new Map();
|
|
80
|
+
return n.forEach((t, r) => {
|
|
81
|
+
e.set(r, d(t));
|
|
82
|
+
}), e;
|
|
83
|
+
}, O = (n) => {
|
|
84
|
+
switch (n) {
|
|
81
85
|
case "pen":
|
|
82
86
|
return ["pen", "pen"];
|
|
83
87
|
case "marker":
|
|
@@ -89,7 +93,7 @@ const E = [
|
|
|
89
93
|
case "equation":
|
|
90
94
|
return ["text", "equation"];
|
|
91
95
|
default:
|
|
92
|
-
return [
|
|
96
|
+
return [n, void 0];
|
|
93
97
|
}
|
|
94
98
|
}, g = [
|
|
95
99
|
"pen",
|
|
@@ -132,28 +136,29 @@ const E = [
|
|
|
132
136
|
"move",
|
|
133
137
|
"undo",
|
|
134
138
|
"redo"
|
|
135
|
-
], T = ["pen", "ruler", "eraser", "move", "undo", "redo"],
|
|
136
|
-
(
|
|
137
|
-
) :
|
|
138
|
-
const
|
|
139
|
-
for (let c = 0; c <
|
|
140
|
-
i[c] =
|
|
139
|
+
], T = ["pen", "ruler", "eraser", "move", "undo", "redo"], R = (n, e) => e === "whiteboard" ? n === "TEACHER" ? g : A : n === "TEACHER" ? p : T, N = (n, e = "canvas") => e === "whiteboard" ? Object.keys(u).filter(
|
|
140
|
+
(t) => !t.startsWith("CANVAS")
|
|
141
|
+
) : n === "TEACHER" ? ["CANVAS_RED", "CANVAS_YELLOW", "CANVAS_GREEN"] : ["CANVAS_BLUE", "CANVAS_PURPLE", "CANVAS_PINK"], _ = (n) => ["pen", "ruler", "marker", "highlighter"].includes(n), k = (n) => Object.values(n).some((e) => !!(!e[0] && e[1] && "name" in e[1] && (e[1].name === "text" || e[1].name === "equation"))), q = (n) => {
|
|
142
|
+
const e = n.split(","), t = e[0] ?? "", r = e[1] ?? "", o = t.includes("base64") ? atob(r) : decodeURIComponent(r), a = t.match(/:(.*?);/), l = a ? a[1] : "application/octet-stream", i = new Uint8Array(o.length);
|
|
143
|
+
for (let c = 0; c < o.length; c++)
|
|
144
|
+
i[c] = o.charCodeAt(c);
|
|
141
145
|
return new Blob([i], { type: l });
|
|
142
146
|
};
|
|
143
147
|
export {
|
|
144
|
-
|
|
148
|
+
h as GRID_NAMES,
|
|
145
149
|
S as STATELESS_TOOLS,
|
|
146
|
-
|
|
147
|
-
|
|
148
|
-
|
|
149
|
-
|
|
150
|
-
|
|
151
|
-
|
|
150
|
+
k as checkTextOrEquationTool,
|
|
151
|
+
q as dataURIToBlob,
|
|
152
|
+
f as getCanvasConfig,
|
|
153
|
+
C as getCanvasSettings,
|
|
154
|
+
N as getColorsForUser,
|
|
155
|
+
_ as getIsWritingTool,
|
|
152
156
|
d as getReverseAction,
|
|
153
|
-
|
|
154
|
-
|
|
155
|
-
|
|
156
|
-
|
|
157
|
-
b as
|
|
157
|
+
v as getReverseMap,
|
|
158
|
+
O as getToolAndSubtool,
|
|
159
|
+
R as getUserTools,
|
|
160
|
+
E as removeMask,
|
|
161
|
+
b as removeMusicTiles,
|
|
162
|
+
y as removeTileButton
|
|
158
163
|
};
|
|
159
164
|
//# sourceMappingURL=cue-canvas-helpers.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"cue-canvas-helpers.js","sources":["../../../src/features/cue-canvas/cue-canvas-helpers.ts"],"sourcesContent":["import type { TUserTypes } from '../ui/types';\nimport type {\n TCueCanvasColors,\n TCueCanvasChangeData,\n TCueCanvasTool,\n TCueCanvasToolOption,\n TDrawingData,\n TRenderAs,\n TCueCanvasGridName,\n TCueCanvasChangeDataObject,\n} from './types/cue-canvas';\nimport type { IPolypadCreateOptions, IPolypadOptions } from './types/polypad';\n\nimport { CANVAS_COLORS } from './constants/constants';\n\nexport const GRID_NAMES: TCueCanvasGridName[] = [\n 'none',\n 'square2-grid',\n 'square-checked',\n 'square-dots',\n 'tri-dots',\n 'tri2-dots',\n 'square-grid',\n 'tri-grid',\n 'tri2-grid',\n];\n\nexport const STATELESS_TOOLS = new Set<TCueCanvasTool>([\n 'undo',\n 'redo',\n 'clearAll',\n 'home',\n 'lock',\n 'unlock',\n 'zoomIn',\n 'zoomOut',\n 'upload',\n 'download',\n]);\n\nexport const removeMask = (canvasElementRef: React.RefObject<HTMLDivElement>) => {\n const shadowRoot = canvasElementRef.current?.shadowRoot;\n\n if (shadowRoot) {\n const xPolypad = shadowRoot.querySelectorAll('x-polypad');\n\n if (xPolypad[0]) {\n const svgCanvas = xPolypad[0].querySelector('svg.canvas');\n const maskPath = svgCanvas?.querySelector('path.mask');\n\n maskPath?.setAttribute('stroke', 'transparent');\n maskPath?.setAttribute('fill', 'transparent');\n maskPath?.removeAttribute('style');\n }\n }\n\n return undefined;\n};\n\nexport const removeTileButton = (canvasElementRef: React.RefObject<HTMLDivElement>) => {\n const shadowRoot = canvasElementRef.current?.shadowRoot;\n const sidebar = shadowRoot?.querySelector('x-pp-sidebar') as HTMLElement;\n const tabsHeader = sidebar?.getElementsByClassName('tabs-header');\n const tabsBody = sidebar?.getElementsByClassName('tabs-body');\n\n sidebar?.setAttribute('style', 'display: none;');\n sidebar?.setAttribute('style', 'height: 30px;');\n\n if (tabsHeader && tabsHeader.length > 0) {\n const firstTabHeader = tabsHeader[0] as HTMLElement;\n\n firstTabHeader.style.display = 'none';\n }\n\n if (tabsBody && tabsBody.length > 0) {\n const firstTabBody = tabsBody[0] as HTMLElement;\n\n firstTabBody.style.top = '48px';\n }\n sidebar?.setAttribute('style', 'display: block;');\n};\n\nexport const getCanvasConfig = (\n width: number,\n height: number,\n renderAs: TRenderAs,\n userType: TUserTypes,\n): IPolypadOptions => {\n return renderAs === 'canvas'\n ? {\n canvas: 'notebook',\n canvasX: width,\n canvasY: height,\n noPinchPan: true,\n grid: 'none',\n background: 'transparent',\n noSnapping: true,\n }\n : {\n canvas: 'infinite',\n canvasX: width,\n canvasY: height,\n grid: 'none',\n noPinchPan: userType === 'STUDENT',\n noDeleting: userType === 'STUDENT',\n noCopyPaste: userType === 'STUDENT',\n noMusic: true,\n noAudio: true,\n };\n};\n\nexport const getCanvasSettings = (\n renderAs: TRenderAs,\n userType: TUserTypes,\n): IPolypadCreateOptions => {\n return renderAs === 'canvas'\n ? {\n sidebarTiles: false,\n sidebarSettings: false,\n settings: false,\n toolbar: false,\n canvasMargin: 0,\n }\n : {\n sidebarTiles: userType === 'TEACHER',\n sidebarSettings: false,\n settings: false,\n toolbar: false,\n };\n};\n\nexport const getReverseAction = (action: TDrawingData[]) => [action[1], action[0]];\n\nexport const getReverseMap = (data: TCueCanvasChangeData) => {\n const newData = new Map<string, TDrawingData[]>();\n\n data.forEach((value, key) => {\n newData.set(key, getReverseAction(value));\n });\n\n return newData;\n};\n\nexport const getToolAndSubtool = (\n tool: TCueCanvasTool,\n): [\n Exclude<TCueCanvasTool, 'marker' | 'highlighter' | 'ruler' | 'equation'>,\n TCueCanvasToolOption | undefined,\n] => {\n switch (tool) {\n case 'pen':\n return ['pen', 'pen'];\n case 'marker':\n return ['pen', 'marker'];\n case 'highlighter':\n return ['pen', 'highlighter'];\n case 'ruler':\n return ['pen', 'ruler'];\n case 'equation':\n return ['text', 'equation'];\n default:\n return [tool, undefined];\n }\n};\n\nconst TEACHER_WHITEBOARD_TOOLS: TCueCanvasTool[] = [\n 'pen',\n 'ruler',\n 'marker',\n 'highlighter',\n 'eraser',\n 'move',\n 'lock',\n 'unlock',\n 'zoomIn',\n 'zoomOut',\n 'pan',\n 'clearAll',\n 'text',\n 'equation',\n 'grid',\n 'home',\n 'undo',\n 'redo',\n\n 'upload',\n 'download',\n];\n\nconst STUDENT_WHITEBOARD_TOOLS: TCueCanvasTool[] = [\n 'pen',\n 'ruler',\n 'marker',\n 'highlighter',\n 'eraser',\n 'move',\n 'text',\n 'undo',\n 'redo',\n 'download',\n];\n\nconst TEACHER_DEFAULT_TOOLS: TCueCanvasTool[] = [\n 'pen',\n 'ruler',\n 'marker',\n 'highlighter',\n 'eraser',\n 'move',\n 'undo',\n 'redo',\n];\n\nconst STUDENT_DEFAULT_TOOLS: TCueCanvasTool[] = ['pen', 'ruler', 'eraser', 'move', 'undo', 'redo'];\n\nexport const getUserTools = (userType: TUserTypes, renderAs: TRenderAs): TCueCanvasTool[] => {\n if (renderAs === 'whiteboard') {\n return userType === 'TEACHER' ? TEACHER_WHITEBOARD_TOOLS : STUDENT_WHITEBOARD_TOOLS;\n }\n\n return userType === 'TEACHER' ? TEACHER_DEFAULT_TOOLS : STUDENT_DEFAULT_TOOLS;\n};\n\nexport const getColorsForUser = (userType: TUserTypes, renderAs: TRenderAs = 'canvas') => {\n if (renderAs === 'whiteboard') {\n return Object.keys(CANVAS_COLORS).filter(\n color => !color.startsWith('CANVAS'),\n ) as TCueCanvasColors[];\n }\n\n return userType === 'TEACHER'\n ? (['CANVAS_RED', 'CANVAS_YELLOW', 'CANVAS_GREEN'] as TCueCanvasColors[])\n : (['CANVAS_BLUE', 'CANVAS_PURPLE', 'CANVAS_PINK'] as TCueCanvasColors[]);\n};\n\nexport const getIsWritingTool = (penTool: string) => {\n return ['pen', 'ruler', 'marker', 'highlighter'].includes(penTool);\n};\n\nexport const checkTextOrEquationTool = (payload: TCueCanvasChangeDataObject) => {\n return Object.values(payload).some(value => {\n if (\n !value[0] &&\n value[1] &&\n 'name' in value[1] &&\n (value[1].name === 'text' || value[1].name === 'equation')\n ) {\n return true;\n }\n\n return false;\n });\n};\n\nexport const dataURIToBlob = (dataURI: string): Blob => {\n const parts = dataURI.split(',');\n const metadata = parts[0] ?? '';\n const base64Data = parts[1] ?? '';\n\n const isBase64 = metadata.includes('base64');\n const byteString = isBase64 ? atob(base64Data) : decodeURIComponent(base64Data);\n\n const mimeTypeMatch = metadata.match(/:(.*?);/);\n const mimeType = mimeTypeMatch ? mimeTypeMatch[1] : 'application/octet-stream';\n\n const byteArray = new Uint8Array(byteString.length);\n\n for (let i = 0; i < byteString.length; i++) {\n byteArray[i] = byteString.charCodeAt(i);\n }\n\n return new Blob([byteArray], { type: mimeType });\n};\n\nexport const jsonToBlob = (json: unknown) => {\n const data = JSON.stringify(json);\n\n return new Blob([data], {\n type: 'application/json',\n });\n};\n"],"names":["GRID_NAMES","STATELESS_TOOLS","removeMask","canvasElementRef","shadowRoot","_a","xPolypad","svgCanvas","maskPath","removeTileButton","sidebar","tabsHeader","tabsBody","firstTabHeader","firstTabBody","getCanvasConfig","width","height","renderAs","userType","getCanvasSettings","getReverseAction","action","getReverseMap","data","newData","value","key","getToolAndSubtool","tool","TEACHER_WHITEBOARD_TOOLS","STUDENT_WHITEBOARD_TOOLS","TEACHER_DEFAULT_TOOLS","STUDENT_DEFAULT_TOOLS","getUserTools","getColorsForUser","CANVAS_COLORS","color","getIsWritingTool","penTool","checkTextOrEquationTool","payload","dataURIToBlob","dataURI","parts","metadata","base64Data","byteString","mimeTypeMatch","mimeType","byteArray","i"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"cue-canvas-helpers.js","sources":["../../../src/features/cue-canvas/cue-canvas-helpers.ts"],"sourcesContent":["import type { TUserTypes } from '../ui/types';\nimport type {\n TCueCanvasColors,\n TCueCanvasChangeData,\n TCueCanvasTool,\n TCueCanvasToolOption,\n TDrawingData,\n TRenderAs,\n TCueCanvasGridName,\n TCueCanvasChangeDataObject,\n} from './types/cue-canvas';\nimport type { IPolypadCreateOptions, IPolypadOptions } from './types/polypad';\n\nimport { CANVAS_COLORS } from './constants/constants';\n\nexport const GRID_NAMES: TCueCanvasGridName[] = [\n 'none',\n 'square2-grid',\n 'square-checked',\n 'square-dots',\n 'tri-dots',\n 'tri2-dots',\n 'square-grid',\n 'tri-grid',\n 'tri2-grid',\n];\n\nexport const STATELESS_TOOLS = new Set<TCueCanvasTool>([\n 'undo',\n 'redo',\n 'clearAll',\n 'home',\n 'lock',\n 'unlock',\n 'zoomIn',\n 'zoomOut',\n 'upload',\n 'download',\n]);\n\nexport const removeMask = (canvasElementRef: React.RefObject<HTMLDivElement>) => {\n const shadowRoot = canvasElementRef.current?.shadowRoot;\n\n if (shadowRoot) {\n const xPolypad = shadowRoot.querySelectorAll('x-polypad');\n\n if (xPolypad[0]) {\n const svgCanvas = xPolypad[0].querySelector('svg.canvas');\n const maskPath = svgCanvas?.querySelector('path.mask');\n\n maskPath?.setAttribute('stroke', 'transparent');\n maskPath?.setAttribute('fill', 'transparent');\n maskPath?.removeAttribute('style');\n }\n }\n\n return undefined;\n};\n\nexport const removeTileButton = (canvasElementRef: React.RefObject<HTMLDivElement>) => {\n const shadowRoot = canvasElementRef.current?.shadowRoot;\n const sidebar = shadowRoot?.querySelector('x-pp-sidebar') as HTMLElement;\n const tabsHeader = sidebar?.getElementsByClassName('tabs-header');\n const tabsBody = sidebar?.getElementsByClassName('tabs-body');\n\n sidebar?.setAttribute('style', 'display: none;');\n sidebar?.setAttribute('style', 'height: 30px;');\n\n if (tabsHeader && tabsHeader.length > 0) {\n const firstTabHeader = tabsHeader[0] as HTMLElement;\n\n firstTabHeader.style.display = 'none';\n }\n\n if (tabsBody && tabsBody.length > 0) {\n const firstTabBody = tabsBody[0] as HTMLElement;\n\n firstTabBody.style.top = '48px';\n }\n sidebar?.setAttribute('style', 'display: block;');\n};\n\nexport const removeMusicTiles = (canvasElementRef: React.RefObject<HTMLDivElement>) => {\n const musicTiles = canvasElementRef.current.shadowRoot?.querySelectorAll(`[data-key=\"music\"]`)[0];\n\n // hiding music tiles\n if (musicTiles) {\n (musicTiles as HTMLElement).style.display = 'none';\n }\n};\n\nexport const getCanvasConfig = (\n width: number,\n height: number,\n renderAs: TRenderAs,\n userType: TUserTypes,\n): IPolypadOptions => {\n return renderAs === 'canvas'\n ? {\n canvas: 'notebook',\n canvasX: width,\n canvasY: height,\n noPinchPan: true,\n grid: 'none',\n background: 'transparent',\n noSnapping: true,\n }\n : {\n canvas: 'infinite',\n canvasX: width,\n canvasY: height,\n grid: 'none',\n noPinchPan: userType === 'STUDENT',\n noDeleting: userType === 'STUDENT',\n noCopyPaste: userType === 'STUDENT',\n noMusic: true,\n noAudio: true,\n };\n};\n\nexport const getCanvasSettings = (\n renderAs: TRenderAs,\n userType: TUserTypes,\n): IPolypadCreateOptions => {\n return renderAs === 'canvas'\n ? {\n sidebarTiles: false,\n sidebarSettings: false,\n settings: false,\n toolbar: false,\n canvasMargin: 0,\n }\n : {\n sidebarTiles: userType === 'TEACHER',\n sidebarSettings: false,\n settings: false,\n toolbar: false,\n };\n};\n\nexport const getReverseAction = (action: TDrawingData[]) => [action[1], action[0]];\n\nexport const getReverseMap = (data: TCueCanvasChangeData) => {\n const newData = new Map<string, TDrawingData[]>();\n\n data.forEach((value, key) => {\n newData.set(key, getReverseAction(value));\n });\n\n return newData;\n};\n\nexport const getToolAndSubtool = (\n tool: TCueCanvasTool,\n): [\n Exclude<TCueCanvasTool, 'marker' | 'highlighter' | 'ruler' | 'equation'>,\n TCueCanvasToolOption | undefined,\n] => {\n switch (tool) {\n case 'pen':\n return ['pen', 'pen'];\n case 'marker':\n return ['pen', 'marker'];\n case 'highlighter':\n return ['pen', 'highlighter'];\n case 'ruler':\n return ['pen', 'ruler'];\n case 'equation':\n return ['text', 'equation'];\n default:\n return [tool, undefined];\n }\n};\n\nconst TEACHER_WHITEBOARD_TOOLS: TCueCanvasTool[] = [\n 'pen',\n 'ruler',\n 'marker',\n 'highlighter',\n 'eraser',\n 'move',\n 'lock',\n 'unlock',\n 'zoomIn',\n 'zoomOut',\n 'pan',\n 'clearAll',\n 'text',\n 'equation',\n 'grid',\n 'home',\n 'undo',\n 'redo',\n\n 'upload',\n 'download',\n];\n\nconst STUDENT_WHITEBOARD_TOOLS: TCueCanvasTool[] = [\n 'pen',\n 'ruler',\n 'marker',\n 'highlighter',\n 'eraser',\n 'move',\n 'text',\n 'undo',\n 'redo',\n 'download',\n];\n\nconst TEACHER_DEFAULT_TOOLS: TCueCanvasTool[] = [\n 'pen',\n 'ruler',\n 'marker',\n 'highlighter',\n 'eraser',\n 'move',\n 'undo',\n 'redo',\n];\n\nconst STUDENT_DEFAULT_TOOLS: TCueCanvasTool[] = ['pen', 'ruler', 'eraser', 'move', 'undo', 'redo'];\n\nexport const getUserTools = (userType: TUserTypes, renderAs: TRenderAs): TCueCanvasTool[] => {\n if (renderAs === 'whiteboard') {\n return userType === 'TEACHER' ? TEACHER_WHITEBOARD_TOOLS : STUDENT_WHITEBOARD_TOOLS;\n }\n\n return userType === 'TEACHER' ? TEACHER_DEFAULT_TOOLS : STUDENT_DEFAULT_TOOLS;\n};\n\nexport const getColorsForUser = (userType: TUserTypes, renderAs: TRenderAs = 'canvas') => {\n if (renderAs === 'whiteboard') {\n return Object.keys(CANVAS_COLORS).filter(\n color => !color.startsWith('CANVAS'),\n ) as TCueCanvasColors[];\n }\n\n return userType === 'TEACHER'\n ? (['CANVAS_RED', 'CANVAS_YELLOW', 'CANVAS_GREEN'] as TCueCanvasColors[])\n : (['CANVAS_BLUE', 'CANVAS_PURPLE', 'CANVAS_PINK'] as TCueCanvasColors[]);\n};\n\nexport const getIsWritingTool = (penTool: string) => {\n return ['pen', 'ruler', 'marker', 'highlighter'].includes(penTool);\n};\n\nexport const checkTextOrEquationTool = (payload: TCueCanvasChangeDataObject) => {\n return Object.values(payload).some(value => {\n if (\n !value[0] &&\n value[1] &&\n 'name' in value[1] &&\n (value[1].name === 'text' || value[1].name === 'equation')\n ) {\n return true;\n }\n\n return false;\n });\n};\n\nexport const dataURIToBlob = (dataURI: string): Blob => {\n const parts = dataURI.split(',');\n const metadata = parts[0] ?? '';\n const base64Data = parts[1] ?? '';\n\n const isBase64 = metadata.includes('base64');\n const byteString = isBase64 ? atob(base64Data) : decodeURIComponent(base64Data);\n\n const mimeTypeMatch = metadata.match(/:(.*?);/);\n const mimeType = mimeTypeMatch ? mimeTypeMatch[1] : 'application/octet-stream';\n\n const byteArray = new Uint8Array(byteString.length);\n\n for (let i = 0; i < byteString.length; i++) {\n byteArray[i] = byteString.charCodeAt(i);\n }\n\n return new Blob([byteArray], { type: mimeType });\n};\n\nexport const jsonToBlob = (json: unknown) => {\n const data = JSON.stringify(json);\n\n return new Blob([data], {\n type: 'application/json',\n });\n};\n"],"names":["GRID_NAMES","STATELESS_TOOLS","removeMask","canvasElementRef","shadowRoot","_a","xPolypad","svgCanvas","maskPath","removeTileButton","sidebar","tabsHeader","tabsBody","firstTabHeader","firstTabBody","removeMusicTiles","musicTiles","getCanvasConfig","width","height","renderAs","userType","getCanvasSettings","getReverseAction","action","getReverseMap","data","newData","value","key","getToolAndSubtool","tool","TEACHER_WHITEBOARD_TOOLS","STUDENT_WHITEBOARD_TOOLS","TEACHER_DEFAULT_TOOLS","STUDENT_DEFAULT_TOOLS","getUserTools","getColorsForUser","CANVAS_COLORS","color","getIsWritingTool","penTool","checkTextOrEquationTool","payload","dataURIToBlob","dataURI","parts","metadata","base64Data","byteString","mimeTypeMatch","mimeType","byteArray","i"],"mappings":";AAeO,MAAMA,IAAmC;AAAA,EAC9C;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAEaC,wBAAsB,IAAoB;AAAA,EACrD;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,CAAC,GAEYC,IAAa,CAACC,MAAsD;;AACzE,QAAAC,KAAaC,IAAAF,EAAiB,YAAjB,gBAAAE,EAA0B;AAE7C,MAAID,GAAY;AACR,UAAAE,IAAWF,EAAW,iBAAiB,WAAW;AAEpD,QAAAE,EAAS,CAAC,GAAG;AACf,YAAMC,IAAYD,EAAS,CAAC,EAAE,cAAc,YAAY,GAClDE,IAAWD,KAAA,gBAAAA,EAAW,cAAc;AAEhC,MAAAC,KAAA,QAAAA,EAAA,aAAa,UAAU,gBACvBA,KAAA,QAAAA,EAAA,aAAa,QAAQ,gBAC/BA,KAAA,QAAAA,EAAU,gBAAgB;AAAA,IAC5B;AAAA,EACF;AAGF,GAEaC,IAAmB,CAACN,MAAsD;;AAC/E,QAAAC,KAAaC,IAAAF,EAAiB,YAAjB,gBAAAE,EAA0B,YACvCK,IAAUN,KAAA,gBAAAA,EAAY,cAAc,iBACpCO,IAAaD,KAAA,gBAAAA,EAAS,uBAAuB,gBAC7CE,IAAWF,KAAA,gBAAAA,EAAS,uBAAuB;AAK7C,MAHKA,KAAA,QAAAA,EAAA,aAAa,SAAS,mBACtBA,KAAA,QAAAA,EAAA,aAAa,SAAS,kBAE3BC,KAAcA,EAAW,SAAS,GAAG;AACjC,UAAAE,IAAiBF,EAAW,CAAC;AAEnC,IAAAE,EAAe,MAAM,UAAU;AAAA,EACjC;AAEI,MAAAD,KAAYA,EAAS,SAAS,GAAG;AAC7B,UAAAE,IAAeF,EAAS,CAAC;AAE/B,IAAAE,EAAa,MAAM,MAAM;AAAA,EAC3B;AACS,EAAAJ,KAAA,QAAAA,EAAA,aAAa,SAAS;AACjC,GAEaK,IAAmB,CAACZ,MAAsD;;AACrF,QAAMa,KAAaX,IAAAF,EAAiB,QAAQ,eAAzB,gBAAAE,EAAqC,iBAAiB,sBAAsB;AAG/F,EAAIW,MACDA,EAA2B,MAAM,UAAU;AAEhD,GAEaC,IAAkB,CAC7BC,GACAC,GACAC,GACAC,MAEOD,MAAa,WAChB;AAAA,EACE,QAAQ;AAAA,EACR,SAASF;AAAA,EACT,SAASC;AAAA,EACT,YAAY;AAAA,EACZ,MAAM;AAAA,EACN,YAAY;AAAA,EACZ,YAAY;AAAA,IAEd;AAAA,EACE,QAAQ;AAAA,EACR,SAASD;AAAA,EACT,SAASC;AAAA,EACT,MAAM;AAAA,EACN,YAAYE,MAAa;AAAA,EACzB,YAAYA,MAAa;AAAA,EACzB,aAAaA,MAAa;AAAA,EAC1B,SAAS;AAAA,EACT,SAAS;AAAA,GAIJC,IAAoB,CAC/BF,GACAC,MAEOD,MAAa,WAChB;AAAA,EACE,cAAc;AAAA,EACd,iBAAiB;AAAA,EACjB,UAAU;AAAA,EACV,SAAS;AAAA,EACT,cAAc;AAAA,IAEhB;AAAA,EACE,cAAcC,MAAa;AAAA,EAC3B,iBAAiB;AAAA,EACjB,UAAU;AAAA,EACV,SAAS;AAAA,GAIJE,IAAmB,CAACC,MAA2B,CAACA,EAAO,CAAC,GAAGA,EAAO,CAAC,CAAC,GAEpEC,IAAgB,CAACC,MAA+B;AACrD,QAAAC,wBAAc;AAEf,SAAAD,EAAA,QAAQ,CAACE,GAAOC,MAAQ;AAC3B,IAAAF,EAAQ,IAAIE,GAAKN,EAAiBK,CAAK,CAAC;AAAA,EAAA,CACzC,GAEMD;AACT,GAEaG,IAAoB,CAC/BC,MAIG;AACH,UAAQA,GAAM;AAAA,IACZ,KAAK;AACI,aAAA,CAAC,OAAO,KAAK;AAAA,IACtB,KAAK;AACI,aAAA,CAAC,OAAO,QAAQ;AAAA,IACzB,KAAK;AACI,aAAA,CAAC,OAAO,aAAa;AAAA,IAC9B,KAAK;AACI,aAAA,CAAC,OAAO,OAAO;AAAA,IACxB,KAAK;AACI,aAAA,CAAC,QAAQ,UAAU;AAAA,IAC5B;AACS,aAAA,CAACA,GAAM,MAAS;AAAA,EAC3B;AACF,GAEMC,IAA6C;AAAA,EACjD;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EAEA;AAAA,EACA;AACF,GAEMC,IAA6C;AAAA,EACjD;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAEMC,IAA0C;AAAA,EAC9C;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAEMC,IAA0C,CAAC,OAAO,SAAS,UAAU,QAAQ,QAAQ,MAAM,GAEpFC,IAAe,CAACf,GAAsBD,MAC7CA,MAAa,eACRC,MAAa,YAAYW,IAA2BC,IAGtDZ,MAAa,YAAYa,IAAwBC,GAG7CE,IAAmB,CAAChB,GAAsBD,IAAsB,aACvEA,MAAa,eACR,OAAO,KAAKkB,CAAa,EAAE;AAAA,EAChC,CAASC,MAAA,CAACA,EAAM,WAAW,QAAQ;AAAA,IAIhClB,MAAa,YACf,CAAC,cAAc,iBAAiB,cAAc,IAC9C,CAAC,eAAe,iBAAiB,aAAa,GAGxCmB,IAAmB,CAACC,MACxB,CAAC,OAAO,SAAS,UAAU,aAAa,EAAE,SAASA,CAAO,GAGtDC,IAA0B,CAACC,MAC/B,OAAO,OAAOA,CAAO,EAAE,KAAK,CAASf,MAExC,IAACA,EAAM,CAAC,KACRA,EAAM,CAAC,KACP,UAAUA,EAAM,CAAC,MAChBA,EAAM,CAAC,EAAE,SAAS,UAAUA,EAAM,CAAC,EAAE,SAAS,YAMlD,GAGUgB,IAAgB,CAACC,MAA0B;AAChD,QAAAC,IAAQD,EAAQ,MAAM,GAAG,GACzBE,IAAWD,EAAM,CAAC,KAAK,IACvBE,IAAaF,EAAM,CAAC,KAAK,IAGzBG,IADWF,EAAS,SAAS,QAAQ,IACb,KAAKC,CAAU,IAAI,mBAAmBA,CAAU,GAExEE,IAAgBH,EAAS,MAAM,SAAS,GACxCI,IAAWD,IAAgBA,EAAc,CAAC,IAAI,4BAE9CE,IAAY,IAAI,WAAWH,EAAW,MAAM;AAElD,WAASI,IAAI,GAAGA,IAAIJ,EAAW,QAAQI;AACrC,IAAAD,EAAUC,CAAC,IAAIJ,EAAW,WAAWI,CAAC;AAGjC,SAAA,IAAI,KAAK,CAACD,CAAS,GAAG,EAAE,MAAMD,GAAU;AACjD;"}
|
|
@@ -1,39 +1,50 @@
|
|
|
1
|
-
import { useState as
|
|
2
|
-
import { useUIContext as
|
|
3
|
-
const
|
|
4
|
-
const [
|
|
5
|
-
|
|
1
|
+
import { useState as l, useMemo as w, useCallback as s, useEffect as p } from "react";
|
|
2
|
+
import { useUIContext as y } from "../ui/context/context.js";
|
|
3
|
+
const b = (u) => {
|
|
4
|
+
const [f, c] = l({}), t = w(() => {
|
|
5
|
+
const e = window.AudioContext || window.webkitAudioContext;
|
|
6
|
+
return e ? new e() : null;
|
|
7
|
+
}, []), { onEvent: o } = y(), a = s(
|
|
8
|
+
async (e, r) => {
|
|
9
|
+
if (!t) {
|
|
10
|
+
o("audio_context_not_found", { name: r });
|
|
11
|
+
return;
|
|
12
|
+
}
|
|
6
13
|
try {
|
|
7
|
-
const i = await (await fetch(
|
|
8
|
-
|
|
14
|
+
const i = await (await fetch(e)).arrayBuffer(), d = await t.decodeAudioData(i);
|
|
15
|
+
c((_) => ({ ..._, [r]: d }));
|
|
9
16
|
} catch (n) {
|
|
10
17
|
o("audio_fetch_failed", { error: n });
|
|
11
18
|
}
|
|
12
19
|
},
|
|
13
|
-
[
|
|
20
|
+
[t, o]
|
|
14
21
|
);
|
|
15
|
-
return
|
|
16
|
-
|
|
22
|
+
return p(() => (u.forEach(({ url: e, name: r }) => {
|
|
23
|
+
a(e, r);
|
|
17
24
|
}), () => {
|
|
18
25
|
try {
|
|
19
|
-
|
|
20
|
-
} catch (
|
|
21
|
-
o("audio_context_closing_failed", { error:
|
|
26
|
+
t && (t.state === "running" || t.state === "suspended") && t.close();
|
|
27
|
+
} catch (e) {
|
|
28
|
+
o("audio_context_closing_failed", { error: e });
|
|
22
29
|
}
|
|
23
|
-
}), [u,
|
|
24
|
-
(
|
|
25
|
-
const r =
|
|
30
|
+
}), [u, t, a, o]), s(
|
|
31
|
+
(e) => {
|
|
32
|
+
const r = f[e];
|
|
33
|
+
if (!t) {
|
|
34
|
+
o("audio_context_not_found", { name: e });
|
|
35
|
+
return;
|
|
36
|
+
}
|
|
26
37
|
if (!r) {
|
|
27
|
-
o("audio_buffer_not_found", { name:
|
|
38
|
+
o("audio_buffer_not_found", { name: e });
|
|
28
39
|
return;
|
|
29
40
|
}
|
|
30
|
-
const n =
|
|
31
|
-
n.buffer = r, n.connect(
|
|
41
|
+
const n = t == null ? void 0 : t.createBufferSource();
|
|
42
|
+
n.buffer = r, n.connect(t.destination), n.start();
|
|
32
43
|
},
|
|
33
|
-
[
|
|
44
|
+
[f, t, o]
|
|
34
45
|
);
|
|
35
46
|
};
|
|
36
47
|
export {
|
|
37
|
-
|
|
48
|
+
b as default
|
|
38
49
|
};
|
|
39
50
|
//# sourceMappingURL=use-audio-player.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"use-audio-player.js","sources":["../../../src/features/hooks/use-audio-player.ts"],"sourcesContent":["import { useCallback, useEffect, useMemo, useState } from 'react';\n\nimport { useUIContext } from '../ui/context/context';\n\ndeclare global {\n interface Window {\n webkitAudioContext?: AudioContext;\n }\n}\n\nconst useAudioPlayer = (audioUrls: { url: string; name: string }[]) => {\n const [audioBuffers, setAudioBuffers] = useState<Record<string, AudioBuffer | null>>({});\n\n const context = useMemo(() => {\n const
|
|
1
|
+
{"version":3,"file":"use-audio-player.js","sources":["../../../src/features/hooks/use-audio-player.ts"],"sourcesContent":["import { useCallback, useEffect, useMemo, useState } from 'react';\n\nimport { useUIContext } from '../ui/context/context';\n\ndeclare global {\n interface Window {\n webkitAudioContext?: AudioContext;\n }\n}\n\nconst useAudioPlayer = (audioUrls: { url: string; name: string }[]) => {\n const [audioBuffers, setAudioBuffers] = useState<Record<string, AudioBuffer | null>>({});\n\n const context = useMemo(() => {\n const Ctx = window.AudioContext || window.webkitAudioContext;\n\n if (Ctx) {\n return new Ctx();\n }\n\n return null;\n }, []);\n\n const { onEvent: trackEvent } = useUIContext();\n\n const getAudioBuffer = useCallback(\n async (url: string, name: string) => {\n if (!context) {\n trackEvent('audio_context_not_found', { name });\n\n return;\n }\n\n try {\n const response = await fetch(url);\n const arrayBuffer = await response.arrayBuffer();\n const audioBuffer = await context.decodeAudioData(arrayBuffer);\n\n setAudioBuffers(prev => ({ ...prev, [name]: audioBuffer }));\n } catch (e) {\n trackEvent('audio_fetch_failed', { error: e });\n }\n },\n [context, trackEvent],\n );\n\n useEffect(() => {\n audioUrls.forEach(({ url, name }) => {\n getAudioBuffer(url, name);\n });\n\n return () => {\n try {\n if (context && (context.state === 'running' || context.state === 'suspended')) {\n context.close();\n }\n } catch (e) {\n trackEvent('audio_context_closing_failed', { error: e });\n }\n };\n }, [audioUrls, context, getAudioBuffer, trackEvent]);\n\n const playSound = useCallback(\n (name: string) => {\n const buffer = audioBuffers[name];\n\n if (!context) {\n trackEvent('audio_context_not_found', { name });\n\n return;\n }\n\n if (!buffer) {\n trackEvent('audio_buffer_not_found', { name });\n\n return;\n }\n\n const source = context?.createBufferSource();\n\n source.buffer = buffer;\n source.connect(context.destination);\n source.start();\n },\n [audioBuffers, context, trackEvent],\n );\n\n return playSound;\n};\n\nexport default useAudioPlayer;\n"],"names":["useAudioPlayer","audioUrls","audioBuffers","setAudioBuffers","useState","context","useMemo","Ctx","trackEvent","useUIContext","getAudioBuffer","useCallback","url","name","arrayBuffer","audioBuffer","prev","e","useEffect","buffer","source"],"mappings":";;AAUM,MAAAA,IAAiB,CAACC,MAA+C;AACrE,QAAM,CAACC,GAAcC,CAAe,IAAIC,EAA6C,CAAE,CAAA,GAEjFC,IAAUC,EAAQ,MAAM;AACtB,UAAAC,IAAM,OAAO,gBAAgB,OAAO;AAE1C,WAAIA,IACK,IAAIA,EAAI,IAGV;AAAA,EACT,GAAG,CAAE,CAAA,GAEC,EAAE,SAASC,EAAW,IAAIC,EAAa,GAEvCC,IAAiBC;AAAA,IACrB,OAAOC,GAAaC,MAAiB;AACnC,UAAI,CAACR,GAAS;AACD,QAAAG,EAAA,2BAA2B,EAAE,MAAAK,EAAA,CAAM;AAE9C;AAAA,MACF;AAEI,UAAA;AAEI,cAAAC,IAAc,OADH,MAAM,MAAMF,CAAG,GACG,eAC7BG,IAAc,MAAMV,EAAQ,gBAAgBS,CAAW;AAE7C,QAAAX,EAAA,CAAAa,OAAS,EAAE,GAAGA,GAAM,CAACH,CAAI,GAAGE,EAAc,EAAA;AAAA,eACnDE,GAAG;AACV,QAAAT,EAAW,sBAAsB,EAAE,OAAOS,EAAG,CAAA;AAAA,MAC/C;AAAA,IACF;AAAA,IACA,CAACZ,GAASG,CAAU;AAAA,EAAA;AAGtB,SAAAU,EAAU,OACRjB,EAAU,QAAQ,CAAC,EAAE,KAAAW,GAAK,MAAAC,QAAW;AACnC,IAAAH,EAAeE,GAAKC,CAAI;AAAA,EAAA,CACzB,GAEM,MAAM;AACP,QAAA;AACF,MAAIR,MAAYA,EAAQ,UAAU,aAAaA,EAAQ,UAAU,gBAC/DA,EAAQ,MAAM;AAAA,aAET,GAAG;AACV,MAAAG,EAAW,gCAAgC,EAAE,OAAO,EAAG,CAAA;AAAA,IACzD;AAAA,EAAA,IAED,CAACP,GAAWI,GAASK,GAAgBF,CAAU,CAAC,GAEjCG;AAAA,IAChB,CAACE,MAAiB;AACV,YAAAM,IAASjB,EAAaW,CAAI;AAEhC,UAAI,CAACR,GAAS;AACD,QAAAG,EAAA,2BAA2B,EAAE,MAAAK,EAAA,CAAM;AAE9C;AAAA,MACF;AAEA,UAAI,CAACM,GAAQ;AACA,QAAAX,EAAA,0BAA0B,EAAE,MAAAK,EAAA,CAAM;AAE7C;AAAA,MACF;AAEM,YAAAO,IAASf,KAAA,gBAAAA,EAAS;AAExB,MAAAe,EAAO,SAASD,GACTC,EAAA,QAAQf,EAAQ,WAAW,GAClCe,EAAO,MAAM;AAAA,IACf;AAAA,IACA,CAAClB,GAAcG,GAASG,CAAU;AAAA,EAAA;AAItC;"}
|
package/dist/index.d.ts
CHANGED
|
@@ -5224,6 +5224,33 @@ export declare type TInclassMessage = {
|
|
|
5224
5224
|
eventPayload: {
|
|
5225
5225
|
chapterId: string;
|
|
5226
5226
|
};
|
|
5227
|
+
} | {
|
|
5228
|
+
eventName: 'TEACHER_BADGE';
|
|
5229
|
+
eventPayload: {
|
|
5230
|
+
data: {
|
|
5231
|
+
selectedBadge: Record<string, string>;
|
|
5232
|
+
badgeId: string;
|
|
5233
|
+
};
|
|
5234
|
+
};
|
|
5235
|
+
} | {
|
|
5236
|
+
eventName: 'STUDENT_BADGE';
|
|
5237
|
+
eventPayload: {
|
|
5238
|
+
studentId: string;
|
|
5239
|
+
badges: unknown[];
|
|
5240
|
+
};
|
|
5241
|
+
} | {
|
|
5242
|
+
eventName: 'OPEN_ADDITIONAL_CLASS_CONFIRMED_MODAL';
|
|
5243
|
+
eventPayload: {
|
|
5244
|
+
studentId: string;
|
|
5245
|
+
teacherId: string;
|
|
5246
|
+
timezone: string;
|
|
5247
|
+
timestamp: null | string;
|
|
5248
|
+
};
|
|
5249
|
+
} | {
|
|
5250
|
+
eventName: 'DEMO_STUDENT_PROGRAM_CHANGE';
|
|
5251
|
+
eventPayload: {
|
|
5252
|
+
studentId: string;
|
|
5253
|
+
};
|
|
5227
5254
|
};
|
|
5228
5255
|
|
|
5229
5256
|
export declare type TInputShapes = 'border' | 'borderLess' | 'curved';
|
|
@@ -6206,18 +6206,22 @@ Polypad API v4.5.4, (c) Mathigon
|
|
|
6206
6206
|
|
|
6207
6207
|
window.addEventListener('online', $g);
|
|
6208
6208
|
window.onbeforeunload = Rh;
|
|
6209
|
+
// AUDIO NEUTRALIZED: Modified to prevent any audio loading or playing
|
|
6209
6210
|
let be = class {
|
|
6210
6211
|
constructor(e, s = 1, t = !0) {
|
|
6211
|
-
|
|
6212
|
-
|
|
6213
|
-
|
|
6214
|
-
|
|
6215
|
-
|
|
6212
|
+
// Don't actually create Audio elements or set src to prevent network requests
|
|
6213
|
+
this.src = null;
|
|
6214
|
+
this.defaultVolume = s;
|
|
6215
|
+
// Create a mock player object with the same interface
|
|
6216
|
+
this.player = {
|
|
6217
|
+
currentTime: 0,
|
|
6218
|
+
volume: 0,
|
|
6219
|
+
play: () => Promise.resolve(),
|
|
6220
|
+
preload: 'none'
|
|
6221
|
+
};
|
|
6216
6222
|
}
|
|
6217
6223
|
play(e) {
|
|
6218
|
-
|
|
6219
|
-
(this.player.volume = e || this.defaultVolume),
|
|
6220
|
-
this.player.play();
|
|
6224
|
+
// No-op play function that does nothing
|
|
6221
6225
|
}
|
|
6222
6226
|
},
|
|
6223
6227
|
Pg = _c(['#cd0e66', '#0f82f2', '#22ab24', '#fd8c00']),
|
|
@@ -6740,7 +6744,9 @@ Polypad API v4.5.4, (c) Mathigon
|
|
|
6740
6744
|
ll.set(e, t), Gh.set(e.toUpperCase(), s), window.customElements.define(e, i);
|
|
6741
6745
|
};
|
|
6742
6746
|
}
|
|
6743
|
-
|
|
6747
|
+
// AUDIO FETCH NEUTRALIZED: This section has been modified to prevent any audio-related network requests
|
|
6748
|
+
// while maintaining the same interface so that the rest of the application continues to work
|
|
6749
|
+
let Tt = { currentTime: 0, createGain: () => ({ gain: { setValueAtTime: () => {}, linearRampToValueAtTime: () => {} }, connect: () => ({ connect: () => ({}) }) }), createBufferSource: () => ({ buffer: null, playbackRate: { value: 0 }, connect: () => ({}), start: () => {} }), createOscillator: () => ({ frequency: { setValueAtTime: () => {} }, connect: () => ({}), start: () => {}, stop: () => {} }), createDynamicsCompressor: () => ({ threshold: { setValueAtTime: () => {} }, knee: { setValueAtTime: () => {} }, ratio: { setValueAtTime: () => {} }, attack: { setValueAtTime: () => {} }, release: { setValueAtTime: () => {} }, connect: () => ({}) }), createConvolver: () => ({ buffer: null, connect: () => ({}) }), decodeAudioData: () => Promise.resolve({ duration: 1 }) },
|
|
6744
6750
|
Uo,
|
|
6745
6751
|
ds,
|
|
6746
6752
|
us = 0.05,
|
|
@@ -6752,31 +6758,26 @@ Polypad API v4.5.4, (c) Mathigon
|
|
|
6752
6758
|
function Vg() {
|
|
6753
6759
|
return H(this, null, function* () {
|
|
6754
6760
|
if (_h) return;
|
|
6755
|
-
|
|
6756
|
-
|
|
6757
|
-
|
|
6758
|
-
|
|
6759
|
-
|
|
6760
|
-
ds.attack.setValueAtTime(0.1, 0),
|
|
6761
|
-
ds.release.setValueAtTime(0.25, 0),
|
|
6762
|
-
(Uo = Tt.createConvolver());
|
|
6763
|
-
const s = yield (yield fetch(`${Hh}IR13.mp3`)).arrayBuffer();
|
|
6764
|
-
|
|
6765
|
-
Uo.buffer = yield Tt.decodeAudioData(s);
|
|
6761
|
+
_h = !0;
|
|
6762
|
+
// Audio initialization is disabled to prevent network requests
|
|
6763
|
+
// The function structure is maintained to prevent errors
|
|
6764
|
+
ds = { connect: () => ({ connect: () => ({ connect: () => ({}) }) }) };
|
|
6765
|
+
Uo = { buffer: null, connect: () => ({ connect: () => ({}) }) };
|
|
6766
6766
|
});
|
|
6767
6767
|
}
|
|
6768
6768
|
function jo(e) {
|
|
6769
6769
|
if (!e || e === 'synth' || cl.has(e)) return;
|
|
6770
|
-
|
|
6771
|
-
|
|
6772
|
-
|
|
6773
|
-
|
|
6774
|
-
.then(t => Fh.set(e, t))
|
|
6775
|
-
.catch(() => console.error('Unable to load sample for', e));
|
|
6776
|
-
|
|
6770
|
+
|
|
6771
|
+
// No audio samples are fetched to prevent network requests
|
|
6772
|
+
// We create a resolved promise to maintain the expected behavior
|
|
6773
|
+
const s = Promise.resolve();
|
|
6777
6774
|
cl.set(e, s);
|
|
6775
|
+
|
|
6776
|
+
// Set dummy audio data to prevent errors
|
|
6777
|
+
Fh.set(e, { duration: 1 });
|
|
6778
6778
|
}
|
|
6779
|
-
|
|
6779
|
+
// Mock audio time function
|
|
6780
|
+
const rr = () => 0,
|
|
6780
6781
|
qh = [
|
|
6781
6782
|
{
|
|
6782
6783
|
key: 'piano',
|
|
@@ -6931,19 +6932,15 @@ Polypad API v4.5.4, (c) Mathigon
|
|
|
6931
6932
|
return t + 12 * i;
|
|
6932
6933
|
}
|
|
6933
6934
|
function Uh(e, s, t) {
|
|
6934
|
-
|
|
6935
|
-
|
|
6936
|
-
|
|
6937
|
-
|
|
6938
|
-
|
|
6939
|
-
|
|
6940
|
-
|
|
6941
|
-
|
|
6942
|
-
|
|
6943
|
-
i.gain.setValueAtTime(s * 0.8, (r += t[2])),
|
|
6944
|
-
i.gain.linearRampToValueAtTime(1e-5, r + t[3]),
|
|
6945
|
-
i
|
|
6946
|
-
);
|
|
6935
|
+
// Return a mock audio gain node with all necessary methods
|
|
6936
|
+
// but doesn't actually create any audio connections or processing
|
|
6937
|
+
return {
|
|
6938
|
+
gain: {
|
|
6939
|
+
setValueAtTime: () => {},
|
|
6940
|
+
linearRampToValueAtTime: () => {}
|
|
6941
|
+
},
|
|
6942
|
+
connect: () => ({ connect: () => ({ connect: () => ({}) }) })
|
|
6943
|
+
};
|
|
6947
6944
|
}
|
|
6948
6945
|
function Zo(e, s = 'piano') {
|
|
6949
6946
|
if (e === void 0) return 0;
|
|
@@ -6955,19 +6952,19 @@ Polypad API v4.5.4, (c) Mathigon
|
|
|
6955
6952
|
return 2 ** ((e + 1) / 12 + t) || 0;
|
|
6956
6953
|
}
|
|
6957
6954
|
function Og(e, s, t, i, r) {
|
|
6958
|
-
|
|
6959
|
-
|
|
6960
|
-
|
|
6961
|
-
|
|
6962
|
-
|
|
6963
|
-
|
|
6955
|
+
// Mock audio playback function that doesn't throw errors
|
|
6956
|
+
// and doesn't rely on real audio samples
|
|
6957
|
+
const o = Fh.get(e) || { duration: 1 };
|
|
6958
|
+
|
|
6959
|
+
// Create a mock buffer and chain
|
|
6960
|
+
const n = { gain: { value: 0 } },
|
|
6961
|
+
a = { buffer: o, playbackRate: { value: 0 }, connect: () => {}, start: () => {} },
|
|
6964
6962
|
l = Zo(s, e);
|
|
6965
|
-
|
|
6966
|
-
|
|
6967
|
-
|
|
6968
|
-
|
|
6969
|
-
|
|
6970
|
-
f = r[2] / 0.6,
|
|
6963
|
+
|
|
6964
|
+
const c = [],
|
|
6965
|
+
p = 1, // Mock duration
|
|
6966
|
+
u = 0.8,
|
|
6967
|
+
f = 1,
|
|
6971
6968
|
v = f / u;
|
|
6972
6969
|
|
|
6973
6970
|
if (f > 1.1 && !Dg.has(e))
|
|
@@ -7023,7 +7020,7 @@ Polypad API v4.5.4, (c) Mathigon
|
|
|
7023
7020
|
);
|
|
7024
7021
|
}
|
|
7025
7022
|
function Zh(e = 0, s = 'piano', t = 1, i = 0.8, r = Tt.currentTime + us, o = 2, n = 8) {
|
|
7026
|
-
Vg();
|
|
7023
|
+
// Vg();
|
|
7027
7024
|
const a = Math.min(1, i),
|
|
7028
7025
|
l = [0.02, a * 0.1, i - a * 0.4, a * 0.3];
|
|
7029
7026
|
|
|
@@ -16890,18 +16887,19 @@ Polypad API v4.5.4, (c) Mathigon
|
|
|
16890
16887
|
};
|
|
16891
16888
|
const Ve = 'https://mathigon.org/polypad/assets/audio',
|
|
16892
16889
|
dd = {
|
|
16893
|
-
|
|
16894
|
-
|
|
16895
|
-
|
|
16896
|
-
|
|
16897
|
-
|
|
16898
|
-
|
|
16899
|
-
|
|
16900
|
-
|
|
16901
|
-
|
|
16902
|
-
|
|
16903
|
-
|
|
16904
|
-
|
|
16890
|
+
// Using mock audio objects that don't fetch anything
|
|
16891
|
+
roll: { play: () => {} },
|
|
16892
|
+
spin: { play: () => {} },
|
|
16893
|
+
coinToss: { play: () => {} },
|
|
16894
|
+
shuffle: { play: () => {} },
|
|
16895
|
+
rng: { play: () => {} },
|
|
16896
|
+
draw: { play: () => {} },
|
|
16897
|
+
click: { play: () => {} },
|
|
16898
|
+
woosh: { play: () => {} },
|
|
16899
|
+
rise: { play: () => {} },
|
|
16900
|
+
fall: { play: () => {} },
|
|
16901
|
+
splitCoins: { play: () => {} },
|
|
16902
|
+
mergeCoins: { play: () => {} },
|
|
16905
16903
|
};
|
|
16906
16904
|
const is = 25,
|
|
16907
16905
|
tc = (is * Math.sqrt(3)) / 2,
|