@cuemath/leap 3.1.15 → 3.1.16

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

@@ -48,7 +48,7 @@ class U {
     });
     s(this, "onChange", (t) => {
       const a = Object.fromEntries(t.entries());
-      w(a) && this.onUpdateActiveTool("move"), this.publishToChannel(a);
+      w(a) && (this.onUpdateActiveTool("move"), this.setTool("move")), this.publishToChannel(a);
     });
     s(this, "undo", () => {
       if (!this.polycanvas)

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

@@ -1 +1 @@
-{"version":3,"file":"cue-canvas-core.js","sources":["../../../src/features/cue-canvas/cue-canvas-core.ts"],"sourcesContent":["import 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    }\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  };\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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"}
+{"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  };\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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"}

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

@@ -98,6 +98,10 @@ const E = [
   "highlighter",
   "eraser",
   "move",
+  "lock",
+  "unlock",
+  "zoomIn",
+  "zoomOut",
   "pan",
   "clearAll",
   "text",
@@ -106,10 +110,6 @@ const E = [
   "home",
   "undo",
   "redo",
-  "lock",
-  "unlock",
-  "zoomIn",
-  "zoomOut",
   "upload",
   "download"
 ], A = [

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

@@ -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  'pan',\n  'clearAll',\n  'text',\n  'equation',\n  'grid',\n  'home',\n  'undo',\n  'redo',\n  'lock',\n  'unlock',\n  'zoomIn',\n  'zoomOut',\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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"}
+{"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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"}

package/dist/features/cue-canvas/sidebar/tiles/tile.js

@@ -1,14 +1,14 @@
 import { jsx as l } from "react/jsx-runtime";
-import { memo as c, useCallback as a } from "react";
-import n from "../../../../assets/line-icons/icons/tile.js";
-import { StyledWrapper as p } from "../../cue-cavas-styled.js";
+import { memo as c, useCallback as p } from "react";
+import a from "../../../../assets/line-icons/icons/tile.js";
+import { StyledWrapper as T } from "../../cue-cavas-styled.js";
 import { useCueCanvasActions as d } from "../../hooks/use-cue-canvas-actions.js";
-const C = c((s) => {
-  const { setActiveSidebar: t, activeSidebar: o } = s, { activeInstance: e, setActiveTool: i } = d(), m = a(() => {
-    const r = o !== "tile";
-    e == null || e.toggleTiles(r), t(r ? "tile" : void 0), i("move");
-  }, [o, e, t, i]);
-  return /* @__PURE__ */ l(p, { $active: o === "tile", onClick: m, children: /* @__PURE__ */ l(n, {}) });
+const C = c((m) => {
+  const { setActiveSidebar: t, activeSidebar: e } = m, { activeInstance: o, setActiveTool: i } = d(), s = p(() => {
+    const r = e !== "tile";
+    o == null || o.toggleTiles(r), t(r ? "tile" : void 0), i("move"), o == null || o.setTool("move");
+  }, [e, o, t, i]);
+  return /* @__PURE__ */ l(T, { $active: e === "tile", onClick: s, children: /* @__PURE__ */ l(a, {}) });
 });
 export {
   C as default

package/dist/features/cue-canvas/sidebar/tiles/tile.js.map

@@ -1 +1 @@
-{"version":3,"file":"tile.js","sources":["../../../../../src/features/cue-canvas/sidebar/tiles/tile.tsx"],"sourcesContent":["import type { TActiveSidebar } from '../puzzles/puzzles-type';\nimport type { Dispatch, FC, SetStateAction } from 'react';\n\nimport { memo, useCallback } from 'react';\n\nimport TileIcon from '../../../../assets/line-icons/icons/tile';\nimport { StyledWrapper } from '../../cue-cavas-styled';\nimport { useCueCanvasActions } from '../../hooks/use-cue-canvas-actions';\n\ninterface ITileBar {\n  setActiveSidebar: Dispatch<SetStateAction<TActiveSidebar | undefined>>;\n  activeSidebar?: TActiveSidebar;\n}\n\nconst TileBar: FC<ITileBar> = memo(props => {\n  const { setActiveSidebar, activeSidebar } = props;\n  const { activeInstance, setActiveTool } = useCueCanvasActions();\n\n  const toggleTiles = useCallback(() => {\n    const newTileState = activeSidebar !== 'tile';\n\n    activeInstance?.toggleTiles(newTileState);\n    setActiveSidebar(newTileState ? 'tile' : undefined);\n    setActiveTool('move');\n  }, [activeSidebar, activeInstance, setActiveSidebar, setActiveTool]);\n\n  return (\n    <StyledWrapper $active={activeSidebar === 'tile'} onClick={toggleTiles}>\n      <TileIcon />\n    </StyledWrapper>\n  );\n});\n\nexport default TileBar;\n"],"names":["TileBar","memo","props","setActiveSidebar","activeSidebar","activeInstance","setActiveTool","useCueCanvasActions","toggleTiles","useCallback","newTileState","jsx","StyledWrapper","TileIcon"],"mappings":";;;;;AAcM,MAAAA,IAAwBC,EAAK,CAASC,MAAA;AACpC,QAAA,EAAE,kBAAAC,GAAkB,eAAAC,EAAkB,IAAAF,GACtC,EAAE,gBAAAG,GAAgB,eAAAC,EAAc,IAAIC,EAAoB,GAExDC,IAAcC,EAAY,MAAM;AACpC,UAAMC,IAAeN,MAAkB;AAEvC,IAAAC,KAAA,QAAAA,EAAgB,YAAYK,IACXP,EAAAO,IAAe,SAAS,MAAS,GAClDJ,EAAc,MAAM;AAAA,KACnB,CAACF,GAAeC,GAAgBF,GAAkBG,CAAa,CAAC;AAGjE,SAAA,gBAAAK,EAACC,KAAc,SAASR,MAAkB,QAAQ,SAASI,GACzD,UAAC,gBAAAG,EAAAE,GAAA,CAAS,CAAA,EACZ,CAAA;AAEJ,CAAC;"}
+{"version":3,"file":"tile.js","sources":["../../../../../src/features/cue-canvas/sidebar/tiles/tile.tsx"],"sourcesContent":["import type { TActiveSidebar } from '../puzzles/puzzles-type';\nimport type { Dispatch, FC, SetStateAction } from 'react';\n\nimport { memo, useCallback } from 'react';\n\nimport TileIcon from '../../../../assets/line-icons/icons/tile';\nimport { StyledWrapper } from '../../cue-cavas-styled';\nimport { useCueCanvasActions } from '../../hooks/use-cue-canvas-actions';\n\ninterface ITileBar {\n  setActiveSidebar: Dispatch<SetStateAction<TActiveSidebar | undefined>>;\n  activeSidebar?: TActiveSidebar;\n}\n\nconst TileBar: FC<ITileBar> = memo(props => {\n  const { setActiveSidebar, activeSidebar } = props;\n  const { activeInstance, setActiveTool } = useCueCanvasActions();\n\n  const toggleTiles = useCallback(() => {\n    const newTileState = activeSidebar !== 'tile';\n\n    activeInstance?.toggleTiles(newTileState);\n    setActiveSidebar(newTileState ? 'tile' : undefined);\n    setActiveTool('move');\n    activeInstance?.setTool('move');\n  }, [activeSidebar, activeInstance, setActiveSidebar, setActiveTool]);\n\n  return (\n    <StyledWrapper $active={activeSidebar === 'tile'} onClick={toggleTiles}>\n      <TileIcon />\n    </StyledWrapper>\n  );\n});\n\nexport default TileBar;\n"],"names":["TileBar","memo","props","setActiveSidebar","activeSidebar","activeInstance","setActiveTool","useCueCanvasActions","toggleTiles","useCallback","newTileState","jsx","StyledWrapper","TileIcon"],"mappings":";;;;;AAcM,MAAAA,IAAwBC,EAAK,CAASC,MAAA;AACpC,QAAA,EAAE,kBAAAC,GAAkB,eAAAC,EAAkB,IAAAF,GACtC,EAAE,gBAAAG,GAAgB,eAAAC,EAAc,IAAIC,EAAoB,GAExDC,IAAcC,EAAY,MAAM;AACpC,UAAMC,IAAeN,MAAkB;AAEvC,IAAAC,KAAA,QAAAA,EAAgB,YAAYK,IACXP,EAAAO,IAAe,SAAS,MAAS,GAClDJ,EAAc,MAAM,GACpBD,KAAA,QAAAA,EAAgB,QAAQ;AAAA,KACvB,CAACD,GAAeC,GAAgBF,GAAkBG,CAAa,CAAC;AAGjE,SAAA,gBAAAK,EAACC,KAAc,SAASR,MAAkB,QAAQ,SAASI,GACzD,UAAC,gBAAAG,EAAAE,GAAA,CAAS,CAAA,EACZ,CAAA;AAEJ,CAAC;"}

package/dist/features/cue-canvas/toolbar/pen-tool-menu.js

@@ -1,45 +1,53 @@
-import { jsxs as i, jsx as e } from "react/jsx-runtime";
-import { memo as f, useRef as p } from "react";
-import d from "../../ui/buttons/clickable/clickable.js";
-import C from "../../ui/hooks/use-context-menu-click-handler.js";
-import l from "../../ui/layout/flex-view.js";
-import { getIsWritingTool as c } from "../cue-canvas-helpers.js";
-import { PenIconWrapper as $, StyledDownIcon as T, MenuWrapper as v } from "../cue-cavas-styled.js";
-import { useCueCanvasActions as h } from "../hooks/use-cue-canvas-actions.js";
-import { TOOLS_TO_COMP as b } from "./icon-map.js";
-import g from "./tool.js";
-const D = f(({ writingTools: m }) => {
-  const { activeTool: o, activeColor: s } = h(), r = p(null), { menuVisible: n, onMenuClick: a } = C(
-    r,
+import { jsxs as a, jsx as e } from "react/jsx-runtime";
+import { memo as g, useState as h, useRef as b, useEffect as k, useCallback as v } from "react";
+import m from "../../ui/buttons/clickable/clickable.js";
+import w from "../../ui/hooks/use-context-menu-click-handler.js";
+import u from "../../ui/layout/flex-view.js";
+import { getIsWritingTool as n } from "../cue-canvas-helpers.js";
+import { PenIconWrapper as x, StyledDownIcon as A, MenuWrapper as M } from "../cue-cavas-styled.js";
+import { useCueCanvasActions as I } from "../hooks/use-cue-canvas-actions.js";
+import { TOOLS_TO_COMP as D } from "./icon-map.js";
+import W from "./tool.js";
+const y = g(({ writingTools: d }) => {
+  const { activeTool: o, activeColor: f, setActiveTool: i, activeInstance: t } = I(), [r, p] = h(
+    () => n(o) ? o : "pen"
+  ), l = b(null), { menuVisible: s, onMenuClick: C } = w(
+    l,
     void 0,
     !0,
     void 0
-  ), u = b[c(o) ? o : "pen"];
-  return /* @__PURE__ */ i(l, { $borderRadius: 16, $background: "WHITE", ref: r, children: [
-    /* @__PURE__ */ e($, { children: /* @__PURE__ */ e(d, { onClick: a, label: "Active Tool", children: /* @__PURE__ */ i(l, { $flexDirection: "row", $justifyContent: "center", $alignItems: "center", children: [
+  );
+  k(() => {
+    n(o) && p(o);
+  }, [o]);
+  const T = v(() => {
+    i(r), t == null || t.setTool(r);
+  }, [t, r, i]), $ = D[r];
+  return /* @__PURE__ */ a(u, { $borderRadius: 16, $background: "WHITE", ref: l, children: [
+    /* @__PURE__ */ e(x, { children: /* @__PURE__ */ e(m, { onClick: T, label: "Active Tool", children: /* @__PURE__ */ a(u, { $flexDirection: "row", $justifyContent: "center", $alignItems: "center", children: [
       /* @__PURE__ */ e(
-        u,
+        $,
         {
-          $active: c(o),
-          $activeColor: s,
+          $active: n(o),
+          $activeColor: f,
           $shouldAnimate: !1
         }
       ),
-      /* @__PURE__ */ e(T, { $isAnimating: n })
+      /* @__PURE__ */ e(m, { label: "Toggle Pen Menu", onClick: C, children: /* @__PURE__ */ e(A, { $isAnimating: s }) })
     ] }) }) }),
-    n && /* @__PURE__ */ e(
-      v,
+    s && /* @__PURE__ */ e(
+      M,
       {
         $flexDirection: "row",
         $alignItems: "center",
         $borderColor: "GREY_1",
         $background: "WHITE",
-        children: m.map((t) => /* @__PURE__ */ e(g, { tool: t, shouldAnimate: !1, withGutter: !0 }, t))
+        children: d.map((c) => /* @__PURE__ */ e(W, { tool: c, shouldAnimate: !1, withGutter: !0 }, c))
       }
     )
   ] });
 });
 export {
-  D as default
+  y as default
 };
 //# sourceMappingURL=pen-tool-menu.js.map

package/dist/features/cue-canvas/toolbar/pen-tool-menu.js.map

@@ -1 +1 @@
-{"version":3,"file":"pen-tool-menu.js","sources":["../../../../src/features/cue-canvas/toolbar/pen-tool-menu.tsx"],"sourcesContent":["import type { IPenToolMenu, TToolComponentType } from '../types/toolbar';\nimport type { FC } from 'react';\n\nimport { memo, useRef } from 'react';\n\nimport Clickable from '../../ui/buttons/clickable/clickable';\nimport useContextMenuClickHandler from '../../ui/hooks/use-context-menu-click-handler';\nimport FlexView from '../../ui/layout/flex-view';\nimport { getIsWritingTool } from '../cue-canvas-helpers';\nimport { MenuWrapper, PenIconWrapper, StyledDownIcon } from '../cue-cavas-styled';\nimport { useCueCanvasActions } from '../hooks/use-cue-canvas-actions';\nimport { TOOLS_TO_COMP } from './icon-map';\nimport Tool from './tool';\n\nconst PenToolMenu: FC<IPenToolMenu> = memo(({ writingTools }) => {\n  const { activeTool, activeColor } = useCueCanvasActions();\n\n  const penMenuRef = useRef(null);\n  const { menuVisible, onMenuClick } = useContextMenuClickHandler(\n    penMenuRef,\n    undefined,\n    true,\n    undefined,\n  );\n\n  const ActiveToolComponent = TOOLS_TO_COMP[\n    getIsWritingTool(activeTool) ? activeTool : 'pen'\n  ] as TToolComponentType;\n\n  return (\n    <FlexView $borderRadius={16} $background=\"WHITE\" ref={penMenuRef}>\n      <PenIconWrapper>\n        <Clickable onClick={onMenuClick} label=\"Active Tool\">\n          <FlexView $flexDirection=\"row\" $justifyContent=\"center\" $alignItems=\"center\">\n            <ActiveToolComponent\n              $active={getIsWritingTool(activeTool)}\n              $activeColor={activeColor}\n              $shouldAnimate={false}\n            />\n            <StyledDownIcon $isAnimating={menuVisible} />\n          </FlexView>\n        </Clickable>\n      </PenIconWrapper>\n      {menuVisible && (\n        <MenuWrapper\n          $flexDirection=\"row\"\n          $alignItems=\"center\"\n          $borderColor=\"GREY_1\"\n          $background=\"WHITE\"\n        >\n          {writingTools.map(tool => (\n            <Tool tool={tool} key={tool} shouldAnimate={false} withGutter />\n          ))}\n        </MenuWrapper>\n      )}\n    </FlexView>\n  );\n});\n\nexport default PenToolMenu;\n"],"names":["PenToolMenu","memo","writingTools","activeTool","activeColor","useCueCanvasActions","penMenuRef","useRef","menuVisible","onMenuClick","useContextMenuClickHandler","ActiveToolComponent","TOOLS_TO_COMP","getIsWritingTool","FlexView","jsx","PenIconWrapper","Clickable","jsxs","StyledDownIcon","MenuWrapper","tool","Tool"],"mappings":";;;;;;;;;;AAcA,MAAMA,IAAgCC,EAAK,CAAC,EAAE,cAAAC,QAAmB;AAC/D,QAAM,EAAE,YAAAC,GAAY,aAAAC,EAAY,IAAIC,EAAoB,GAElDC,IAAaC,EAAO,IAAI,GACxB,EAAE,aAAAC,GAAa,aAAAC,EAAA,IAAgBC;AAAA,IACnCJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EAAA,GAGIK,IAAsBC,EAC1BC,EAAiBV,CAAU,IAAIA,IAAa,KAC9C;AAEA,2BACGW,GAAS,EAAA,eAAe,IAAI,aAAY,SAAQ,KAAKR,GACpD,UAAA;AAAA,IAAA,gBAAAS,EAACC,GACC,EAAA,UAAA,gBAAAD,EAACE,GAAU,EAAA,SAASR,GAAa,OAAM,eACrC,UAAC,gBAAAS,EAAAJ,GAAA,EAAS,gBAAe,OAAM,iBAAgB,UAAS,aAAY,UAClE,UAAA;AAAA,MAAA,gBAAAC;AAAA,QAACJ;AAAA,QAAA;AAAA,UACC,SAASE,EAAiBV,CAAU;AAAA,UACpC,cAAcC;AAAA,UACd,gBAAgB;AAAA,QAAA;AAAA,MAClB;AAAA,MACA,gBAAAW,EAACI,GAAe,EAAA,cAAcX,EAAa,CAAA;AAAA,IAAA,EAC7C,CAAA,EACF,CAAA,GACF;AAAA,IACCA,KACC,gBAAAO;AAAA,MAACK;AAAA,MAAA;AAAA,QACC,gBAAe;AAAA,QACf,aAAY;AAAA,QACZ,cAAa;AAAA,QACb,aAAY;AAAA,QAEX,UAAAlB,EAAa,IAAI,CAAAmB,MACf,gBAAAN,EAAAO,GAAA,EAAK,MAAAD,GAAuB,eAAe,IAAO,YAAU,GAAtC,GAAAA,CAAuC,CAC/D;AAAA,MAAA;AAAA,IACH;AAAA,EAEJ,EAAA,CAAA;AAEJ,CAAC;"}
+{"version":3,"file":"pen-tool-menu.js","sources":["../../../../src/features/cue-canvas/toolbar/pen-tool-menu.tsx"],"sourcesContent":["import type { IPenToolMenu, TToolComponentType } from '../types/toolbar';\nimport type { FC } from 'react';\n\nimport { memo, useCallback, useEffect, useRef, useState } from 'react';\n\nimport Clickable from '../../ui/buttons/clickable/clickable';\nimport useContextMenuClickHandler from '../../ui/hooks/use-context-menu-click-handler';\nimport FlexView from '../../ui/layout/flex-view';\nimport { getIsWritingTool } from '../cue-canvas-helpers';\nimport { MenuWrapper, PenIconWrapper, StyledDownIcon } from '../cue-cavas-styled';\nimport { useCueCanvasActions } from '../hooks/use-cue-canvas-actions';\nimport { TOOLS_TO_COMP } from './icon-map';\nimport Tool from './tool';\n\nconst PenToolMenu: FC<IPenToolMenu> = memo(({ writingTools }) => {\n  const { activeTool, activeColor, setActiveTool, activeInstance } = useCueCanvasActions();\n  const [lastUsedDrawingTool, setLastUsedDrawingTool] = useState(() =>\n    getIsWritingTool(activeTool) ? activeTool : 'pen',\n  );\n  const penMenuRef = useRef(null);\n  const { menuVisible, onMenuClick } = useContextMenuClickHandler(\n    penMenuRef,\n    undefined,\n    true,\n    undefined,\n  );\n\n  useEffect(() => {\n    if (getIsWritingTool(activeTool)) {\n      setLastUsedDrawingTool(activeTool);\n    }\n  }, [activeTool]);\n  const handleLastUsedToolClick = useCallback(() => {\n    setActiveTool(lastUsedDrawingTool);\n    activeInstance?.setTool(lastUsedDrawingTool);\n  }, [activeInstance, lastUsedDrawingTool, setActiveTool]);\n\n  const ActiveToolComponent = TOOLS_TO_COMP[lastUsedDrawingTool] as TToolComponentType;\n\n  return (\n    <FlexView $borderRadius={16} $background=\"WHITE\" ref={penMenuRef}>\n      <PenIconWrapper>\n        <Clickable onClick={handleLastUsedToolClick} label=\"Active Tool\">\n          <FlexView $flexDirection=\"row\" $justifyContent=\"center\" $alignItems=\"center\">\n            <ActiveToolComponent\n              $active={getIsWritingTool(activeTool)}\n              $activeColor={activeColor}\n              $shouldAnimate={false}\n            />\n            <Clickable label=\"Toggle Pen Menu\" onClick={onMenuClick}>\n              <StyledDownIcon $isAnimating={menuVisible} />\n            </Clickable>\n          </FlexView>\n        </Clickable>\n      </PenIconWrapper>\n      {menuVisible && (\n        <MenuWrapper\n          $flexDirection=\"row\"\n          $alignItems=\"center\"\n          $borderColor=\"GREY_1\"\n          $background=\"WHITE\"\n        >\n          {writingTools.map(tool => (\n            <Tool tool={tool} key={tool} shouldAnimate={false} withGutter />\n          ))}\n        </MenuWrapper>\n      )}\n    </FlexView>\n  );\n});\n\nexport default PenToolMenu;\n"],"names":["PenToolMenu","memo","writingTools","activeTool","activeColor","setActiveTool","activeInstance","useCueCanvasActions","lastUsedDrawingTool","setLastUsedDrawingTool","useState","getIsWritingTool","penMenuRef","useRef","menuVisible","onMenuClick","useContextMenuClickHandler","useEffect","handleLastUsedToolClick","useCallback","ActiveToolComponent","TOOLS_TO_COMP","FlexView","jsx","PenIconWrapper","Clickable","jsxs","StyledDownIcon","MenuWrapper","tool","Tool"],"mappings":";;;;;;;;;;AAcA,MAAMA,IAAgCC,EAAK,CAAC,EAAE,cAAAC,QAAmB;AAC/D,QAAM,EAAE,YAAAC,GAAY,aAAAC,GAAa,eAAAC,GAAe,gBAAAC,EAAA,IAAmBC,KAC7D,CAACC,GAAqBC,CAAsB,IAAIC;AAAA,IAAS,MAC7DC,EAAiBR,CAAU,IAAIA,IAAa;AAAA,EAAA,GAExCS,IAAaC,EAAO,IAAI,GACxB,EAAE,aAAAC,GAAa,aAAAC,EAAA,IAAgBC;AAAA,IACnCJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EAAA;AAGF,EAAAK,EAAU,MAAM;AACV,IAAAN,EAAiBR,CAAU,KAC7BM,EAAuBN,CAAU;AAAA,EACnC,GACC,CAACA,CAAU,CAAC;AACT,QAAAe,IAA0BC,EAAY,MAAM;AAChD,IAAAd,EAAcG,CAAmB,GACjCF,KAAA,QAAAA,EAAgB,QAAQE;AAAA,EACvB,GAAA,CAACF,GAAgBE,GAAqBH,CAAa,CAAC,GAEjDe,IAAsBC,EAAcb,CAAmB;AAE7D,2BACGc,GAAS,EAAA,eAAe,IAAI,aAAY,SAAQ,KAAKV,GACpD,UAAA;AAAA,IAAA,gBAAAW,EAACC,GACC,EAAA,UAAA,gBAAAD,EAACE,GAAU,EAAA,SAASP,GAAyB,OAAM,eACjD,UAAC,gBAAAQ,EAAAJ,GAAA,EAAS,gBAAe,OAAM,iBAAgB,UAAS,aAAY,UAClE,UAAA;AAAA,MAAA,gBAAAC;AAAA,QAACH;AAAA,QAAA;AAAA,UACC,SAAST,EAAiBR,CAAU;AAAA,UACpC,cAAcC;AAAA,UACd,gBAAgB;AAAA,QAAA;AAAA,MAClB;AAAA,MACA,gBAAAmB,EAACE,GAAU,EAAA,OAAM,mBAAkB,SAASV,GAC1C,UAAC,gBAAAQ,EAAAI,GAAA,EAAe,cAAcb,EAAA,CAAa,EAC7C,CAAA;AAAA,IAAA,EACF,CAAA,EACF,CAAA,GACF;AAAA,IACCA,KACC,gBAAAS;AAAA,MAACK;AAAA,MAAA;AAAA,QACC,gBAAe;AAAA,QACf,aAAY;AAAA,QACZ,cAAa;AAAA,QACb,aAAY;AAAA,QAEX,UAAA1B,EAAa,IAAI,CAAA2B,MACf,gBAAAN,EAAAO,GAAA,EAAK,MAAAD,GAAuB,eAAe,IAAO,YAAU,GAAtC,GAAAA,CAAuC,CAC/D;AAAA,MAAA;AAAA,IACH;AAAA,EAEJ,EAAA,CAAA;AAEJ,CAAC;"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cuemath/leap",
-  "version": "3.1.15",
+  "version": "3.1.16",
   "type": "module",
   "files": [
     "dist"