@cuemath/leap 3.1.7-aa4 → 3.1.7-aa7
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 +42 -42
- package/dist/features/cue-canvas/cue-canvas-core.js.map +1 -1
- package/dist/features/cue-canvas/hooks/use-config-updater.js +3 -3
- package/dist/features/cue-canvas/hooks/use-config-updater.js.map +1 -1
- package/dist/features/cue-canvas/toolbar/color-palette.js +7 -7
- package/dist/features/cue-canvas/toolbar/color-palette.js.map +1 -1
- package/dist/features/cue-canvas/toolbar/tool.js +4 -4
- package/dist/features/cue-canvas/toolbar/tool.js.map +1 -1
- package/dist/features/cue-canvas/toolbar/toolbar.js +14 -14
- package/dist/features/cue-canvas/toolbar/toolbar.js.map +1 -1
- package/package.json +1 -1
|
@@ -10,8 +10,8 @@ class O {
|
|
|
10
10
|
onPublish: t,
|
|
11
11
|
onSubscribe: e,
|
|
12
12
|
onUpdateActiveTool: a,
|
|
13
|
-
onUpdateHeight:
|
|
14
|
-
uploadImageToS3:
|
|
13
|
+
onUpdateHeight: o,
|
|
14
|
+
uploadImageToS3: i,
|
|
15
15
|
height: n,
|
|
16
16
|
userId: h,
|
|
17
17
|
canvasId: r,
|
|
@@ -101,26 +101,26 @@ class O {
|
|
|
101
101
|
x: e.x + 24,
|
|
102
102
|
y: e.y + 24,
|
|
103
103
|
width: 500
|
|
104
|
-
},
|
|
104
|
+
}, o = this.polycanvas.add({
|
|
105
105
|
...a
|
|
106
106
|
});
|
|
107
107
|
this.publishToChannel({
|
|
108
|
-
[
|
|
108
|
+
[o]: [void 0, { ...a, status: "locked" }]
|
|
109
109
|
});
|
|
110
110
|
});
|
|
111
111
|
s(this, "onSelectImage", async (t) => {
|
|
112
|
-
var
|
|
113
|
-
const e = t.target, a = (
|
|
112
|
+
var i;
|
|
113
|
+
const e = t.target, a = (i = e.files) == null ? void 0 : i[0];
|
|
114
114
|
if (!a || !this.polycanvas || !this.uploadImageToS3) return;
|
|
115
|
-
const
|
|
116
|
-
|
|
115
|
+
const o = await this.uploadImageToS3(a);
|
|
116
|
+
o !== "error" && (this.addImageToCanvas(o), e.value = "");
|
|
117
117
|
});
|
|
118
118
|
s(this, "updateCanvas", ({ data: t, userId: e }) => {
|
|
119
119
|
const a = this.userType === "TEACHER" || e === this.userId;
|
|
120
120
|
try {
|
|
121
|
-
Object.entries(t).forEach(([
|
|
121
|
+
Object.entries(t).forEach(([o, i]) => {
|
|
122
122
|
var n, h, r;
|
|
123
|
-
!
|
|
123
|
+
!i[0] && i[1] ? ("name" in i[1] && i[1].name === "image" && (i[1].status = this.userType === "STUDENT" ? "locked" : void 0), (n = this.polycanvas) == null || n.add({ ...i[1], cannotEdit: !a }, o)) : i[0] && !i[1] ? (h = this.polycanvas) == null || h.delete(o) : i[0] && i[1] && ((r = this.polycanvas) == null || r.update(o, { ...i[1] }));
|
|
124
124
|
});
|
|
125
125
|
} catch {
|
|
126
126
|
f("Error Updating Canvas", t);
|
|
@@ -131,10 +131,10 @@ class O {
|
|
|
131
131
|
(e = this.polycanvas) == null || e.toggleSidebar(t);
|
|
132
132
|
});
|
|
133
133
|
s(this, "setViewPort", ({ x: t, y: e, zoom: a }) => {
|
|
134
|
-
var
|
|
134
|
+
var o;
|
|
135
135
|
if (this.polycanvas) {
|
|
136
|
-
const
|
|
137
|
-
if (
|
|
136
|
+
const i = (o = this.polycanvas) == null ? void 0 : o.getViewport();
|
|
137
|
+
if (i.x === t && i.y === e && i.zoom === a)
|
|
138
138
|
return;
|
|
139
139
|
this.polycanvas.setViewport(t, e, a);
|
|
140
140
|
}
|
|
@@ -148,44 +148,44 @@ class O {
|
|
|
148
148
|
}), this.gridName = t, this.updateCanvasConfigChange && this.updateCanvasConfigChange({ gridName: t }));
|
|
149
149
|
});
|
|
150
150
|
s(this, "lockSelectedTiles", () => {
|
|
151
|
-
var a,
|
|
152
|
-
const { tiles: t } = ((a = this.polycanvas) == null ? void 0 : a.serialize()) || {}, e = ((
|
|
151
|
+
var a, o;
|
|
152
|
+
const { tiles: t } = ((a = this.polycanvas) == null ? void 0 : a.serialize()) || {}, e = ((o = this.polycanvas) == null ? void 0 : o.getSelection()) || [];
|
|
153
153
|
if (e.length > 0 && t) {
|
|
154
|
-
const
|
|
154
|
+
const i = {};
|
|
155
155
|
e.forEach((n) => {
|
|
156
156
|
var r, l, p;
|
|
157
157
|
if (!((r = t[n]) != null && r.name)) return;
|
|
158
158
|
const h = { ...t[n], status: "locked" };
|
|
159
|
-
(l = this.polycanvas) == null || l.update(n, h), (p = t[n]) != null && p.name && (
|
|
160
|
-
}), this.publishToChannel(
|
|
159
|
+
(l = this.polycanvas) == null || l.update(n, h), (p = t[n]) != null && p.name && (i[n] = [t[n], h]);
|
|
160
|
+
}), this.publishToChannel(i);
|
|
161
161
|
}
|
|
162
162
|
});
|
|
163
163
|
s(this, "unlockAllTiles", () => {
|
|
164
164
|
if (!this.polycanvas) return;
|
|
165
165
|
const { tiles: t } = this.polycanvas.serialize(), e = {};
|
|
166
|
-
t && Object.entries(t).length > 0 && (Object.entries(t).forEach(([a,
|
|
166
|
+
t && Object.entries(t).length > 0 && (Object.entries(t).forEach(([a, o]) => {
|
|
167
167
|
var n;
|
|
168
|
-
if (
|
|
169
|
-
const
|
|
170
|
-
(n = this.polycanvas) == null || n.update(a,
|
|
168
|
+
if (o.status !== "locked") return;
|
|
169
|
+
const i = { ...o, status: void 0 };
|
|
170
|
+
(n = this.polycanvas) == null || n.update(a, i), e[a] = [o, i];
|
|
171
171
|
}), this.publishToChannel(e));
|
|
172
172
|
});
|
|
173
173
|
s(this, "replaceCanvas", (t) => {
|
|
174
174
|
if (!this.polycanvas) return;
|
|
175
175
|
const { data: e, gridName: a } = t;
|
|
176
|
-
this.polycanvas.clear(), a && this.changeGrid(a), Object.entries(e).forEach(([
|
|
176
|
+
this.polycanvas.clear(), a && this.changeGrid(a), Object.entries(e).forEach(([o, i]) => {
|
|
177
177
|
var n;
|
|
178
|
-
if (!
|
|
179
|
-
(n = this.polycanvas) == null || n.add({ ...
|
|
178
|
+
if (!i[0] && i[1]) {
|
|
179
|
+
(n = this.polycanvas) == null || n.add({ ...i[1] }, o);
|
|
180
180
|
return;
|
|
181
181
|
}
|
|
182
182
|
}), this.publishToChannel(e);
|
|
183
183
|
});
|
|
184
|
-
s(this, "setTool", (t) => {
|
|
184
|
+
s(this, "setTool", (t, e) => {
|
|
185
185
|
var i;
|
|
186
186
|
if (!this.polycanvas || t === this.activeTool) return;
|
|
187
|
-
const [
|
|
188
|
-
switch (
|
|
187
|
+
const [a, o] = b(t);
|
|
188
|
+
switch (a) {
|
|
189
189
|
case "clearAll":
|
|
190
190
|
this.clearCanvas();
|
|
191
191
|
break;
|
|
@@ -219,9 +219,9 @@ class O {
|
|
|
219
219
|
case "grid":
|
|
220
220
|
break;
|
|
221
221
|
default:
|
|
222
|
-
this.polycanvas.setTool(
|
|
222
|
+
this.polycanvas.setTool(a, o);
|
|
223
223
|
}
|
|
224
|
-
I.has(t) || (this.activeTool = t, (i = this.updateCanvasConfigChange) == null || i.call(this, { users: { [this.userId]: { tool: t } } }));
|
|
224
|
+
I.has(t) || (this.activeTool = t, e && ((i = this.updateCanvasConfigChange) == null || i.call(this, { users: { [this.userId]: { tool: t } } })));
|
|
225
225
|
});
|
|
226
226
|
/**
|
|
227
227
|
* The `update` method is called in two cases:
|
|
@@ -237,24 +237,24 @@ class O {
|
|
|
237
237
|
*/
|
|
238
238
|
s(this, "update", (t) => {
|
|
239
239
|
if (Array.isArray(t)) {
|
|
240
|
-
const e = t.map((
|
|
241
|
-
a > this.height && this.updateHeight(a), t.forEach((
|
|
240
|
+
const e = t.map((o) => o.height).filter(Boolean), a = Math.max(...e);
|
|
241
|
+
a > this.height && this.updateHeight(a), t.forEach((o) => this.updateCanvas(o));
|
|
242
242
|
} else
|
|
243
243
|
t.height > this.height && this.updateHeight(t.height), this.updateCanvas(t);
|
|
244
244
|
});
|
|
245
245
|
s(this, "getSelections", () => this.polycanvas ? this.polycanvas.getSelection() : []);
|
|
246
|
-
s(this, "setColor", (t) => {
|
|
246
|
+
s(this, "setColor", (t, e) => {
|
|
247
247
|
var i;
|
|
248
248
|
if (!this.polycanvas || this.activeColor === t) return;
|
|
249
|
-
const
|
|
249
|
+
const a = d[t], o = this.activeColor && d[this.activeColor];
|
|
250
250
|
if (this.renderAs === "whiteboard") {
|
|
251
|
-
const
|
|
252
|
-
|
|
253
|
-
var
|
|
254
|
-
(
|
|
251
|
+
const n = this.getSelections();
|
|
252
|
+
n && n.length > 0 && n.forEach((h) => {
|
|
253
|
+
var r;
|
|
254
|
+
(r = this.polycanvas) == null || r.update(h, { color: a }), this.onChange(/* @__PURE__ */ new Map([[h, [{ color: o }, { color: a }]]]));
|
|
255
255
|
});
|
|
256
256
|
}
|
|
257
|
-
this.polycanvas.setColor(
|
|
257
|
+
this.polycanvas.setColor(a), this.activeColor = t, e && ((i = this.updateCanvasConfigChange) == null || i.call(this, { users: { [this.userId]: { color: t } } }));
|
|
258
258
|
});
|
|
259
259
|
s(this, "updateHeight", (t) => {
|
|
260
260
|
var e, a;
|
|
@@ -263,9 +263,9 @@ class O {
|
|
|
263
263
|
s(this, "destroy", () => {
|
|
264
264
|
this.polycanvas && (this.polycanvas.off("change", this.onChange), this.polycanvas.destroy(), this.debouncedViewportChange.cancel(), this.renderAs === "whiteboard" && this.userType === "TEACHER" && this.polycanvas.off("viewport", this.debouncedViewportChange), this.polycanvas = void 0, this.fileInput && this.fileInput.parentNode && (this.fileInput.parentNode.removeChild(this.fileInput), this.fileInput = null));
|
|
265
265
|
});
|
|
266
|
-
this.onUpdateHeight =
|
|
266
|
+
this.onUpdateHeight = o, this.onUpdateActiveTool = a, this.height = n, this.uploadImageToS3 = i, this.userId = h, this.canvasId = r, this.publish = t, this.userType = l, this.renderAs = p, this.debouncedViewportChange = C(this.onViewPortChange, 300), this.updateCanvasConfigChange = u, this.activeColor = void 0, this.activeTool = void 0, e == null || e(this.canvasId, this.update);
|
|
267
267
|
}
|
|
268
|
-
async create({ canvasElementRef: t, canvasConfig: e, canvasSetting: a, initialData:
|
|
268
|
+
async create({ canvasElementRef: t, canvasConfig: e, canvasSetting: a, initialData: o }) {
|
|
269
269
|
if (!t.current)
|
|
270
270
|
throw new Error("PolyCanvas: Div Element Not found for canvas");
|
|
271
271
|
this.polycanvas = await window.Polypad.create(t.current, {
|
|
@@ -274,7 +274,7 @@ class O {
|
|
|
274
274
|
},
|
|
275
275
|
...a,
|
|
276
276
|
imageUpload: this.renderAs === "whiteboard" && this.userType === "TEACHER" && this.uploadImageToS3 ? this.uploadImageToS3 : void 0
|
|
277
|
-
}), this.renderAs === "whiteboard" && this.userType === "TEACHER" && (this.polycanvas.toggleSidebar(!1), this.polycanvas.bindKeyboardEvents({}), y(t), this.polycanvas.on("viewport", this.debouncedViewportChange)), m(t), this.polycanvas.on("change", this.onChange),
|
|
277
|
+
}), this.renderAs === "whiteboard" && this.userType === "TEACHER" && (this.polycanvas.toggleSidebar(!1), this.polycanvas.bindKeyboardEvents({}), y(t), this.polycanvas.on("viewport", this.debouncedViewportChange)), m(t), this.polycanvas.on("change", this.onChange), o && this.update(o);
|
|
278
278
|
}
|
|
279
279
|
}
|
|
280
280
|
export {
|
|
@@ -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 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 | undefined = undefined; // Default to undefined, will be set to first color in the palette\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 = undefined;\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 this.updateCanvasConfigChange?.({ users: { [this.userId]: { tool: 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 === color) return;\n\n const selectedColor = CANVAS_COLORS[color];\n const prevColor = this.activeColor && CANVAS_COLORS[this.activeColor];\n\n if (this.renderAs === 'whiteboard') {\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(new Map([[key, [{ color: prevColor }, { color: selectedColor }]]]));\n });\n }\n }\n\n this.polycanvas.setColor(selectedColor);\n this.activeColor = color;\n this.updateCanvasConfigChange?.({ users: { [this.userId]: { color: color } } });\n };\n\n updateHeight = (height: number) => {\n this.height = height;\n this.onUpdateHeight?.(height);\n this.updateCanvasConfigChange?.({ height: 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","prevColor","selections","debounce","canvasElementRef","canvasConfig","canvasSetting","initialData","removeTileButton","removeMask"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"cue-canvas-core.js","sources":["../../../src/features/cue-canvas/cue-canvas-core.ts"],"sourcesContent":["import type { TUserTypes } from '../ui/types';\nimport type {\n IActionData,\n IViewport,\n TCueCanvasChangeData,\n TCueCanvasGridName,\n TCueCanvasTool,\n TPublish,\n TRenderAs,\n TCueCanvasChangeDataObject,\n IReplaceCanvas,\n ICueCanvasCoreProps,\n 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 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 | undefined = undefined; // Default to undefined, will be set to first color in the palette\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 = undefined;\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, shouldSync: boolean) => {\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 if (shouldSync) {\n this.updateCanvasConfigChange?.({ users: { [this.userId]: { tool: tool } } });\n }\n }\n };\n\n /**\n * The `update` method is called in two cases:\n * 1. When receiving initial data to update the canvas content.\n * 2. When receiving strokes from other peers to update the canvas content.\n * Each item can contain multiple actions, which are applied to the canvas.\n *\n * The method checks if the payload is an array or a single object.\n * If it's an array, it iterates over each item and updates the canvas accordingly.\n * If it's a single object, it directly updates the canvas.\n *\n * Additionally, if the payload contains a height greater than the current height of the canvas, the `updateHeight` method is called to update the canvas height.\n */\n update = (payload: IActionData | IActionData[]) => {\n if (Array.isArray(payload)) {\n const heights = payload.map(data => data.height).filter(Boolean);\n const maxHeight = Math.max(...heights);\n\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, shouldSync: boolean) => {\n if (!this.polycanvas || this.activeColor === color) return;\n\n const selectedColor = CANVAS_COLORS[color];\n const prevColor = this.activeColor && CANVAS_COLORS[this.activeColor];\n\n if (this.renderAs === 'whiteboard') {\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(new Map([[key, [{ color: prevColor }, { color: selectedColor }]]]));\n });\n }\n }\n\n this.polycanvas.setColor(selectedColor);\n this.activeColor = color;\n if (shouldSync) {\n this.updateCanvasConfigChange?.({ users: { [this.userId]: { color: color } } });\n }\n };\n\n updateHeight = (height: number) => {\n this.height = height;\n this.onUpdateHeight?.(height);\n this.updateCanvasConfigChange?.({ height: 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","shouldSync","currTool","currSubTool","getToolAndSubtool","STATELESS_TOOLS","heights","maxHeight","color","selectedColor","CANVAS_COLORS","prevColor","selections","debounce","canvasElementRef","canvasConfig","canvasSetting","initialData","removeTileButton","removeMask"],"mappings":"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"}
|
|
@@ -1,11 +1,11 @@
|
|
|
1
1
|
import { useEffect as E } from "react";
|
|
2
2
|
import { useCueCanvasActions as G } from "./use-cue-canvas-actions.js";
|
|
3
3
|
const V = (x) => {
|
|
4
|
-
const { canvasConfig: e, renderAs:
|
|
4
|
+
const { canvasConfig: e, renderAs: s, userId: r } = x, { activeInstance: t, setActiveColor: o, setActiveTool: u } = G();
|
|
5
5
|
E(() => {
|
|
6
6
|
var l, d, m, i, p, A, c, I, N, T, h, w;
|
|
7
|
-
!t ||
|
|
8
|
-
}, [e, t,
|
|
7
|
+
!t || s === "canvas" || (e != null && e.gridName && t.changeGrid(e == null ? void 0 : e.gridName), e != null && e.dimesion && t.setViewPort(e == null ? void 0 : e.dimesion), (d = (l = e == null ? void 0 : e.users) == null ? void 0 : l[r]) != null && d.tool && (u((i = (m = e.users) == null ? void 0 : m[r]) == null ? void 0 : i.tool), t.setTool((A = (p = e.users) == null ? void 0 : p[r]) == null ? void 0 : A.tool, !1)), (I = (c = e == null ? void 0 : e.users) == null ? void 0 : c[r]) != null && I.color && (o((T = (N = e == null ? void 0 : e.users) == null ? void 0 : N[r]) == null ? void 0 : T.color), t.setColor((w = (h = e.users) == null ? void 0 : h[r]) == null ? void 0 : w.color, !1)));
|
|
8
|
+
}, [e, t, s, o, u, r]);
|
|
9
9
|
};
|
|
10
10
|
export {
|
|
11
11
|
V as default
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"use-config-updater.js","sources":["../../../../src/features/cue-canvas/hooks/use-config-updater.ts"],"sourcesContent":["import type { ICanvasUpdateConfig, TRenderAs } from '../types/cue-canvas';\n\nimport { useEffect } from 'react';\n\nimport { useCueCanvasActions } from './use-cue-canvas-actions';\n\ninterface IUseConfigUpdaterProps {\n canvasConfig: ICanvasUpdateConfig | null | undefined;\n renderAs: TRenderAs;\n userId: string;\n}\n\nconst useConfigUpdater = (props: IUseConfigUpdaterProps) => {\n const { canvasConfig, renderAs, userId } = props;\n const { activeInstance: cueCanvas, setActiveColor, setActiveTool } = useCueCanvasActions();\n\n useEffect(() => {\n if (!cueCanvas || renderAs === 'canvas') {\n return;\n }\n\n if (canvasConfig?.gridName) {\n cueCanvas.changeGrid(canvasConfig?.gridName);\n }\n\n if (canvasConfig?.dimesion) {\n cueCanvas.setViewPort(canvasConfig?.dimesion);\n }\n\n if (canvasConfig?.users?.[userId]?.tool) {\n setActiveTool(canvasConfig.users?.[userId]?.tool);\n cueCanvas.setTool(canvasConfig.users?.[userId]?.tool);\n }\n\n if (canvasConfig?.users?.[userId]?.color) {\n setActiveColor(canvasConfig?.users?.[userId]?.color);\n cueCanvas.setColor(canvasConfig.users?.[userId]?.color);\n }\n }, [canvasConfig, cueCanvas, renderAs, setActiveColor, setActiveTool, userId]);\n};\n\nexport default useConfigUpdater;\n"],"names":["useConfigUpdater","props","canvasConfig","renderAs","userId","cueCanvas","setActiveColor","setActiveTool","useCueCanvasActions","useEffect","_b","_a","_d","_c","_f","_e","_h","_g","_j","_i","_l","_k"],"mappings":";;AAYM,MAAAA,IAAmB,CAACC,MAAkC;AAC1D,QAAM,EAAE,cAAAC,GAAc,UAAAC,GAAU,QAAAC,EAAA,IAAWH,GACrC,EAAE,gBAAgBI,GAAW,gBAAAC,GAAgB,eAAAC,EAAA,IAAkBC;AAErE,EAAAC,EAAU,MAAM;;AACV,IAAA,CAACJ,KAAaF,MAAa,aAI3BD,KAAA,QAAAA,EAAc,YACNG,EAAA,WAAWH,KAAA,gBAAAA,EAAc,QAAQ,GAGzCA,KAAA,QAAAA,EAAc,YACNG,EAAA,YAAYH,KAAA,gBAAAA,EAAc,QAAQ,IAG1CQ,KAAAC,IAAAT,KAAA,gBAAAA,EAAc,UAAd,gBAAAS,EAAsBP,OAAtB,QAAAM,EAA+B,SACjCH,GAAcK,KAAAC,IAAAX,EAAa,UAAb,gBAAAW,EAAqBT,OAArB,gBAAAQ,EAA8B,IAAI,GAChDP,EAAU,SAAQS,KAAAC,IAAAb,EAAa,UAAb,gBAAAa,EAAqBX,OAArB,gBAAAU,EAA8B,
|
|
1
|
+
{"version":3,"file":"use-config-updater.js","sources":["../../../../src/features/cue-canvas/hooks/use-config-updater.ts"],"sourcesContent":["import type { ICanvasUpdateConfig, TRenderAs } from '../types/cue-canvas';\n\nimport { useEffect } from 'react';\n\nimport { useCueCanvasActions } from './use-cue-canvas-actions';\n\ninterface IUseConfigUpdaterProps {\n canvasConfig: ICanvasUpdateConfig | null | undefined;\n renderAs: TRenderAs;\n userId: string;\n}\n\nconst useConfigUpdater = (props: IUseConfigUpdaterProps) => {\n const { canvasConfig, renderAs, userId } = props;\n const { activeInstance: cueCanvas, setActiveColor, setActiveTool } = useCueCanvasActions();\n\n useEffect(() => {\n if (!cueCanvas || renderAs === 'canvas') {\n return;\n }\n\n if (canvasConfig?.gridName) {\n cueCanvas.changeGrid(canvasConfig?.gridName);\n }\n\n if (canvasConfig?.dimesion) {\n cueCanvas.setViewPort(canvasConfig?.dimesion);\n }\n\n if (canvasConfig?.users?.[userId]?.tool) {\n setActiveTool(canvasConfig.users?.[userId]?.tool);\n cueCanvas.setTool(canvasConfig.users?.[userId]?.tool, false);\n }\n\n if (canvasConfig?.users?.[userId]?.color) {\n setActiveColor(canvasConfig?.users?.[userId]?.color);\n cueCanvas.setColor(canvasConfig.users?.[userId]?.color, false);\n }\n }, [canvasConfig, cueCanvas, renderAs, setActiveColor, setActiveTool, userId]);\n};\n\nexport default useConfigUpdater;\n"],"names":["useConfigUpdater","props","canvasConfig","renderAs","userId","cueCanvas","setActiveColor","setActiveTool","useCueCanvasActions","useEffect","_b","_a","_d","_c","_f","_e","_h","_g","_j","_i","_l","_k"],"mappings":";;AAYM,MAAAA,IAAmB,CAACC,MAAkC;AAC1D,QAAM,EAAE,cAAAC,GAAc,UAAAC,GAAU,QAAAC,EAAA,IAAWH,GACrC,EAAE,gBAAgBI,GAAW,gBAAAC,GAAgB,eAAAC,EAAA,IAAkBC;AAErE,EAAAC,EAAU,MAAM;;AACV,IAAA,CAACJ,KAAaF,MAAa,aAI3BD,KAAA,QAAAA,EAAc,YACNG,EAAA,WAAWH,KAAA,gBAAAA,EAAc,QAAQ,GAGzCA,KAAA,QAAAA,EAAc,YACNG,EAAA,YAAYH,KAAA,gBAAAA,EAAc,QAAQ,IAG1CQ,KAAAC,IAAAT,KAAA,gBAAAA,EAAc,UAAd,gBAAAS,EAAsBP,OAAtB,QAAAM,EAA+B,SACjCH,GAAcK,KAAAC,IAAAX,EAAa,UAAb,gBAAAW,EAAqBT,OAArB,gBAAAQ,EAA8B,IAAI,GAChDP,EAAU,SAAQS,KAAAC,IAAAb,EAAa,UAAb,gBAAAa,EAAqBX,OAArB,gBAAAU,EAA8B,MAAM,EAAK,KAGzDE,KAAAC,IAAAf,KAAA,gBAAAA,EAAc,UAAd,gBAAAe,EAAsBb,OAAtB,QAAAY,EAA+B,UACjCV,GAAeY,KAAAC,IAAAjB,KAAA,gBAAAA,EAAc,UAAd,gBAAAiB,EAAsBf,OAAtB,gBAAAc,EAA+B,KAAK,GACnDb,EAAU,UAASe,KAAAC,IAAAnB,EAAa,UAAb,gBAAAmB,EAAqBjB,OAArB,gBAAAgB,EAA8B,OAAO,EAAK;AAAA,EAC/D,GACC,CAAClB,GAAcG,GAAWF,GAAUG,GAAgBC,GAAeH,CAAM,CAAC;AAC/E;"}
|
|
@@ -1,17 +1,17 @@
|
|
|
1
1
|
import { jsx as r } from "react/jsx-runtime";
|
|
2
2
|
import { memo as $, useCallback as d, useMemo as h } from "react";
|
|
3
|
-
import
|
|
3
|
+
import u from "../../ui/buttons/clickable/clickable.js";
|
|
4
4
|
import l from "../../ui/layout/flex-view.js";
|
|
5
|
-
import { getColorsForUser as
|
|
6
|
-
import { ColorPicker as
|
|
5
|
+
import { getColorsForUser as f } from "../cue-canvas-helpers.js";
|
|
6
|
+
import { ColorPicker as p, StyledCheckIcon as g } from "../cue-cavas-styled.js";
|
|
7
7
|
import { useCueCanvasActions as k } from "../hooks/use-cue-canvas-actions.js";
|
|
8
8
|
const j = $((c) => {
|
|
9
9
|
const { activeInstance: t } = k(), { setActiveColor: i, activeColor: n, userType: s, renderAs: o } = c, a = d(
|
|
10
10
|
(e) => {
|
|
11
|
-
i(e), t == null || t.setColor(e);
|
|
11
|
+
i(e), t == null || t.setColor(e, !0);
|
|
12
12
|
},
|
|
13
13
|
[t, i]
|
|
14
|
-
), m = h(() =>
|
|
14
|
+
), m = h(() => f(s, o), [s, o]);
|
|
15
15
|
return /* @__PURE__ */ r(
|
|
16
16
|
l,
|
|
17
17
|
{
|
|
@@ -20,7 +20,7 @@ const j = $((c) => {
|
|
|
20
20
|
$width: o === "canvas" ? 66 : 200,
|
|
21
21
|
$position: "relative",
|
|
22
22
|
children: m.map((e, C) => /* @__PURE__ */ r(
|
|
23
|
-
|
|
23
|
+
u,
|
|
24
24
|
{
|
|
25
25
|
onClick: () => a(e),
|
|
26
26
|
label: `Color Picker - ${e}`,
|
|
@@ -34,7 +34,7 @@ const j = $((c) => {
|
|
|
34
34
|
$background: n === e ? "BLACK" : "WHITE",
|
|
35
35
|
$alignItems: "center",
|
|
36
36
|
children: /* @__PURE__ */ r(
|
|
37
|
-
|
|
37
|
+
p,
|
|
38
38
|
{
|
|
39
39
|
$width: 20,
|
|
40
40
|
$height: 20,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"color-palette.js","sources":["../../../../src/features/cue-canvas/toolbar/color-palette.tsx"],"sourcesContent":["import type { TUserTypes } from '../../ui/types';\nimport type { TCueCanvasColors, TRenderAs } from '../types/cue-canvas';\n\nimport { memo, useCallback, useMemo } from 'react';\n\nimport Clickable from '../../ui/buttons/clickable/clickable';\nimport FlexView from '../../ui/layout/flex-view';\nimport { getColorsForUser } from '../cue-canvas-helpers';\nimport { StyledCheckIcon, ColorPicker } from '../cue-cavas-styled';\nimport { useCueCanvasActions } from '../hooks/use-cue-canvas-actions';\n\ninterface IColorPalette {\n setActiveColor: (color: TCueCanvasColors) => void;\n activeColor: TCueCanvasColors;\n userType: TUserTypes;\n renderAs: TRenderAs;\n}\n\nconst ColorPalette: React.FC<IColorPalette> = memo(props => {\n const { activeInstance: cueCanvas } = useCueCanvasActions();\n const { setActiveColor, activeColor, userType, renderAs } = props;\n const handleColorChange = useCallback(\n (color: TCueCanvasColors) => {\n setActiveColor(color);\n cueCanvas?.setColor(color);\n },\n [cueCanvas, setActiveColor],\n );\n const colors = useMemo(() => getColorsForUser(userType, renderAs), [userType, renderAs]);\n\n return (\n <FlexView\n $flexDirection=\"row\"\n $flexWrap\n $width={renderAs === 'canvas' ? 66 : 200}\n $position=\"relative\"\n >\n {colors.map((color, index) => (\n <Clickable\n key={index}\n onClick={() => handleColorChange(color)}\n label={`Color Picker - ${color}`}\n >\n <FlexView\n $width={22}\n $height={22}\n $borderRadius={11}\n $justifyContent=\"center\"\n $background={activeColor === color ? 'BLACK' : 'WHITE'}\n $alignItems=\"center\"\n >\n <ColorPicker\n $width={20}\n $height={20}\n $borderRadius={10}\n $color={color}\n $alignItems=\"center\"\n $justifyContent=\"center\"\n >\n {activeColor === color && <StyledCheckIcon />}\n </ColorPicker>\n </FlexView>\n </Clickable>\n ))}\n </FlexView>\n );\n});\n\nexport default ColorPalette;\n"],"names":["ColorPalette","memo","props","cueCanvas","useCueCanvasActions","setActiveColor","activeColor","userType","renderAs","handleColorChange","useCallback","color","colors","useMemo","getColorsForUser","jsx","FlexView","index","Clickable","ColorPicker","StyledCheckIcon"],"mappings":";;;;;;;AAkBM,MAAAA,IAAwCC,EAAK,CAASC,MAAA;AAC1D,QAAM,EAAE,gBAAgBC,EAAU,IAAIC,EAAoB,GACpD,EAAE,gBAAAC,GAAgB,aAAAC,GAAa,UAAAC,GAAU,UAAAC,MAAaN,GACtDO,IAAoBC;AAAA,IACxB,CAACC,MAA4B;AAC3B,MAAAN,EAAeM,CAAK,
|
|
1
|
+
{"version":3,"file":"color-palette.js","sources":["../../../../src/features/cue-canvas/toolbar/color-palette.tsx"],"sourcesContent":["import type { TUserTypes } from '../../ui/types';\nimport type { TCueCanvasColors, TRenderAs } from '../types/cue-canvas';\n\nimport { memo, useCallback, useMemo } from 'react';\n\nimport Clickable from '../../ui/buttons/clickable/clickable';\nimport FlexView from '../../ui/layout/flex-view';\nimport { getColorsForUser } from '../cue-canvas-helpers';\nimport { StyledCheckIcon, ColorPicker } from '../cue-cavas-styled';\nimport { useCueCanvasActions } from '../hooks/use-cue-canvas-actions';\n\ninterface IColorPalette {\n setActiveColor: (color: TCueCanvasColors) => void;\n activeColor: TCueCanvasColors;\n userType: TUserTypes;\n renderAs: TRenderAs;\n}\n\nconst ColorPalette: React.FC<IColorPalette> = memo(props => {\n const { activeInstance: cueCanvas } = useCueCanvasActions();\n const { setActiveColor, activeColor, userType, renderAs } = props;\n const handleColorChange = useCallback(\n (color: TCueCanvasColors) => {\n setActiveColor(color);\n cueCanvas?.setColor(color, true);\n },\n [cueCanvas, setActiveColor],\n );\n const colors = useMemo(() => getColorsForUser(userType, renderAs), [userType, renderAs]);\n\n return (\n <FlexView\n $flexDirection=\"row\"\n $flexWrap\n $width={renderAs === 'canvas' ? 66 : 200}\n $position=\"relative\"\n >\n {colors.map((color, index) => (\n <Clickable\n key={index}\n onClick={() => handleColorChange(color)}\n label={`Color Picker - ${color}`}\n >\n <FlexView\n $width={22}\n $height={22}\n $borderRadius={11}\n $justifyContent=\"center\"\n $background={activeColor === color ? 'BLACK' : 'WHITE'}\n $alignItems=\"center\"\n >\n <ColorPicker\n $width={20}\n $height={20}\n $borderRadius={10}\n $color={color}\n $alignItems=\"center\"\n $justifyContent=\"center\"\n >\n {activeColor === color && <StyledCheckIcon />}\n </ColorPicker>\n </FlexView>\n </Clickable>\n ))}\n </FlexView>\n );\n});\n\nexport default ColorPalette;\n"],"names":["ColorPalette","memo","props","cueCanvas","useCueCanvasActions","setActiveColor","activeColor","userType","renderAs","handleColorChange","useCallback","color","colors","useMemo","getColorsForUser","jsx","FlexView","index","Clickable","ColorPicker","StyledCheckIcon"],"mappings":";;;;;;;AAkBM,MAAAA,IAAwCC,EAAK,CAASC,MAAA;AAC1D,QAAM,EAAE,gBAAgBC,EAAU,IAAIC,EAAoB,GACpD,EAAE,gBAAAC,GAAgB,aAAAC,GAAa,UAAAC,GAAU,UAAAC,MAAaN,GACtDO,IAAoBC;AAAA,IACxB,CAACC,MAA4B;AAC3B,MAAAN,EAAeM,CAAK,GACTR,KAAA,QAAAA,EAAA,SAASQ,GAAO;AAAA,IAC7B;AAAA,IACA,CAACR,GAAWE,CAAc;AAAA,EAAA,GAEtBO,IAASC,EAAQ,MAAMC,EAAiBP,GAAUC,CAAQ,GAAG,CAACD,GAAUC,CAAQ,CAAC;AAGrF,SAAA,gBAAAO;AAAA,IAACC;AAAA,IAAA;AAAA,MACC,gBAAe;AAAA,MACf,WAAS;AAAA,MACT,QAAQR,MAAa,WAAW,KAAK;AAAA,MACrC,WAAU;AAAA,MAET,UAAOI,EAAA,IAAI,CAACD,GAAOM,MAClB,gBAAAF;AAAA,QAACG;AAAA,QAAA;AAAA,UAEC,SAAS,MAAMT,EAAkBE,CAAK;AAAA,UACtC,OAAO,kBAAkBA,CAAK;AAAA,UAE9B,UAAA,gBAAAI;AAAA,YAACC;AAAA,YAAA;AAAA,cACC,QAAQ;AAAA,cACR,SAAS;AAAA,cACT,eAAe;AAAA,cACf,iBAAgB;AAAA,cAChB,aAAaV,MAAgBK,IAAQ,UAAU;AAAA,cAC/C,aAAY;AAAA,cAEZ,UAAA,gBAAAI;AAAA,gBAACI;AAAA,gBAAA;AAAA,kBACC,QAAQ;AAAA,kBACR,SAAS;AAAA,kBACT,eAAe;AAAA,kBACf,QAAQR;AAAA,kBACR,aAAY;AAAA,kBACZ,iBAAgB;AAAA,kBAEf,UAAAL,MAAgBK,KAAS,gBAAAI,EAACK,GAAgB,CAAA,CAAA;AAAA,gBAAA;AAAA,cAC7C;AAAA,YAAA;AAAA,UACF;AAAA,QAAA;AAAA,QAtBKH;AAAA,MAAA,CAwBR;AAAA,IAAA;AAAA,EAAA;AAGP,CAAC;"}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { jsx as r } from "react/jsx-runtime";
|
|
2
2
|
import { memo as T, useCallback as d } from "react";
|
|
3
|
-
import
|
|
4
|
-
import
|
|
3
|
+
import u from "../../ui/buttons/clickable/clickable.js";
|
|
4
|
+
import C from "../../ui/layout/flex-view.js";
|
|
5
5
|
import { STATELESS_TOOLS as v, getIsWritingTool as h } from "../cue-canvas-helpers.js";
|
|
6
6
|
import { StyledWrapper as k } from "../cue-cavas-styled.js";
|
|
7
7
|
import { useCueCanvasActions as O } from "../hooks/use-cue-canvas-actions.js";
|
|
@@ -17,11 +17,11 @@ const A = ({ tool: o, withGutter: a, shouldAnimate: s }) => {
|
|
|
17
17
|
setHomeworkId: n
|
|
18
18
|
} = O(), p = d(
|
|
19
19
|
(i) => {
|
|
20
|
-
e == null || e.setTool(i), i === "clearAll" && l && n(void 0), v.has(i) || m(i);
|
|
20
|
+
e == null || e.setTool(i, !0), i === "clearAll" && l && n(void 0), v.has(i) || m(i);
|
|
21
21
|
},
|
|
22
22
|
[e, l, m, n]
|
|
23
23
|
);
|
|
24
|
-
return o === "grid" ? /* @__PURE__ */ r(S, { GridIcon: t }) : /* @__PURE__ */ r(
|
|
24
|
+
return o === "grid" ? /* @__PURE__ */ r(S, { GridIcon: t }) : /* @__PURE__ */ r(C, { $gutterX: a ? 0.25 : 0, children: /* @__PURE__ */ r(u, { onClick: () => p(o), label: o, children: h(o) ? /* @__PURE__ */ r(
|
|
25
25
|
t,
|
|
26
26
|
{
|
|
27
27
|
$active: c === o,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"tool.js","sources":["../../../../src/features/cue-canvas/toolbar/tool.tsx"],"sourcesContent":["import type { TCueCanvasTool } from '../types/cue-canvas';\nimport type { TToolComponentType } from '../types/toolbar';\nimport type { FC } from 'react';\n\nimport { memo, useCallback } from 'react';\n\nimport Clickable from '../../ui/buttons/clickable/clickable';\nimport FlexView from '../../ui/layout/flex-view';\nimport { getIsWritingTool, STATELESS_TOOLS } from '../cue-canvas-helpers';\nimport { StyledWrapper } from '../cue-cavas-styled';\nimport { useCueCanvasActions } from '../hooks/use-cue-canvas-actions';\nimport GridMenu from './grid-menu';\nimport { TOOLS_TO_COMP } from './icon-map';\n\ninterface IToolProps {\n tool: TCueCanvasTool;\n withGutter?: boolean;\n shouldAnimate?: boolean;\n}\n\nconst Tool: FC<IToolProps> = ({ tool, withGutter, shouldAnimate }) => {\n const ToolComponent = TOOLS_TO_COMP[tool] as TToolComponentType;\n const {\n activeInstance: cueCanvas,\n setActiveTool,\n activeTool,\n activeColor,\n homeworkId,\n setHomeworkId,\n } = useCueCanvasActions();\n\n const onToolClick = useCallback(\n (t: TCueCanvasTool) => {\n cueCanvas?.setTool(t);\n if (t === 'clearAll' && homeworkId) {\n setHomeworkId(undefined);\n }\n\n if (!STATELESS_TOOLS.has(t)) {\n setActiveTool(t);\n }\n },\n [cueCanvas, homeworkId, setActiveTool, setHomeworkId],\n );\n\n if (tool === 'grid') {\n return <GridMenu GridIcon={ToolComponent} />;\n }\n\n return (\n <FlexView $gutterX={withGutter ? 0.25 : 0}>\n <Clickable onClick={() => onToolClick(tool)} label={tool}>\n {getIsWritingTool(tool) ? (\n <ToolComponent\n $active={activeTool === tool}\n $activeColor={activeColor}\n $shouldAnimate={shouldAnimate}\n />\n ) : (\n <StyledWrapper $active={activeTool === tool}>\n <ToolComponent />\n </StyledWrapper>\n )}\n </Clickable>\n </FlexView>\n );\n};\n\nexport default memo(Tool);\n"],"names":["Tool","tool","withGutter","shouldAnimate","ToolComponent","TOOLS_TO_COMP","cueCanvas","setActiveTool","activeTool","activeColor","homeworkId","setHomeworkId","useCueCanvasActions","onToolClick","useCallback","t","STATELESS_TOOLS","jsx","GridMenu","FlexView","Clickable","getIsWritingTool","StyledWrapper","Tool$1","memo"],"mappings":";;;;;;;;;AAoBA,MAAMA,IAAuB,CAAC,EAAE,MAAAC,GAAM,YAAAC,GAAY,eAAAC,QAAoB;AAC9D,QAAAC,IAAgBC,EAAcJ,CAAI,GAClC;AAAA,IACJ,gBAAgBK;AAAA,IAChB,eAAAC;AAAA,IACA,YAAAC;AAAA,IACA,aAAAC;AAAA,IACA,YAAAC;AAAA,IACA,eAAAC;AAAA,MACEC,EAAoB,GAElBC,IAAcC;AAAA,IAClB,CAACC,MAAsB;
|
|
1
|
+
{"version":3,"file":"tool.js","sources":["../../../../src/features/cue-canvas/toolbar/tool.tsx"],"sourcesContent":["import type { TCueCanvasTool } from '../types/cue-canvas';\nimport type { TToolComponentType } from '../types/toolbar';\nimport type { FC } from 'react';\n\nimport { memo, useCallback } from 'react';\n\nimport Clickable from '../../ui/buttons/clickable/clickable';\nimport FlexView from '../../ui/layout/flex-view';\nimport { getIsWritingTool, STATELESS_TOOLS } from '../cue-canvas-helpers';\nimport { StyledWrapper } from '../cue-cavas-styled';\nimport { useCueCanvasActions } from '../hooks/use-cue-canvas-actions';\nimport GridMenu from './grid-menu';\nimport { TOOLS_TO_COMP } from './icon-map';\n\ninterface IToolProps {\n tool: TCueCanvasTool;\n withGutter?: boolean;\n shouldAnimate?: boolean;\n}\n\nconst Tool: FC<IToolProps> = ({ tool, withGutter, shouldAnimate }) => {\n const ToolComponent = TOOLS_TO_COMP[tool] as TToolComponentType;\n const {\n activeInstance: cueCanvas,\n setActiveTool,\n activeTool,\n activeColor,\n homeworkId,\n setHomeworkId,\n } = useCueCanvasActions();\n\n const onToolClick = useCallback(\n (t: TCueCanvasTool) => {\n cueCanvas?.setTool(t, true);\n if (t === 'clearAll' && homeworkId) {\n setHomeworkId(undefined);\n }\n\n if (!STATELESS_TOOLS.has(t)) {\n setActiveTool(t);\n }\n },\n [cueCanvas, homeworkId, setActiveTool, setHomeworkId],\n );\n\n if (tool === 'grid') {\n return <GridMenu GridIcon={ToolComponent} />;\n }\n\n return (\n <FlexView $gutterX={withGutter ? 0.25 : 0}>\n <Clickable onClick={() => onToolClick(tool)} label={tool}>\n {getIsWritingTool(tool) ? (\n <ToolComponent\n $active={activeTool === tool}\n $activeColor={activeColor}\n $shouldAnimate={shouldAnimate}\n />\n ) : (\n <StyledWrapper $active={activeTool === tool}>\n <ToolComponent />\n </StyledWrapper>\n )}\n </Clickable>\n </FlexView>\n );\n};\n\nexport default memo(Tool);\n"],"names":["Tool","tool","withGutter","shouldAnimate","ToolComponent","TOOLS_TO_COMP","cueCanvas","setActiveTool","activeTool","activeColor","homeworkId","setHomeworkId","useCueCanvasActions","onToolClick","useCallback","t","STATELESS_TOOLS","jsx","GridMenu","FlexView","Clickable","getIsWritingTool","StyledWrapper","Tool$1","memo"],"mappings":";;;;;;;;;AAoBA,MAAMA,IAAuB,CAAC,EAAE,MAAAC,GAAM,YAAAC,GAAY,eAAAC,QAAoB;AAC9D,QAAAC,IAAgBC,EAAcJ,CAAI,GAClC;AAAA,IACJ,gBAAgBK;AAAA,IAChB,eAAAC;AAAA,IACA,YAAAC;AAAA,IACA,aAAAC;AAAA,IACA,YAAAC;AAAA,IACA,eAAAC;AAAA,MACEC,EAAoB,GAElBC,IAAcC;AAAA,IAClB,CAACC,MAAsB;AACV,MAAAT,KAAA,QAAAA,EAAA,QAAQS,GAAG,KAClBA,MAAM,cAAcL,KACtBC,EAAc,MAAS,GAGpBK,EAAgB,IAAID,CAAC,KACxBR,EAAcQ,CAAC;AAAA,IAEnB;AAAA,IACA,CAACT,GAAWI,GAAYH,GAAeI,CAAa;AAAA,EAAA;AAGtD,SAAIV,MAAS,SACJ,gBAAAgB,EAACC,GAAS,EAAA,UAAUd,EAAe,CAAA,sBAIzCe,GAAS,EAAA,UAAUjB,IAAa,OAAO,GACtC,UAAC,gBAAAe,EAAAG,GAAA,EAAU,SAAS,MAAMP,EAAYZ,CAAI,GAAG,OAAOA,GACjD,UAAAoB,EAAiBpB,CAAI,IACpB,gBAAAgB;AAAA,IAACb;AAAA,IAAA;AAAA,MACC,SAASI,MAAeP;AAAA,MACxB,cAAcQ;AAAA,MACd,gBAAgBN;AAAA,IAAA;AAAA,EAClB,IAEC,gBAAAc,EAAAK,GAAA,EAAc,SAASd,MAAeP,GACrC,UAAC,gBAAAgB,EAAAb,GAAA,CAAc,CAAA,EACjB,CAAA,EAEJ,CAAA,EACF,CAAA;AAEJ,GAEemB,IAAAC,EAAKxB,CAAI;"}
|
|
@@ -1,21 +1,21 @@
|
|
|
1
|
-
import { jsx as
|
|
2
|
-
import { memo as
|
|
3
|
-
import
|
|
1
|
+
import { jsx as r, jsxs as n } from "react/jsx-runtime";
|
|
2
|
+
import { memo as f, useEffect as l } from "react";
|
|
3
|
+
import c from "../../ui/layout/flex-view.js";
|
|
4
4
|
import { getUserTools as p } from "../cue-canvas-helpers.js";
|
|
5
5
|
import { useCueCanvasActions as u } from "../hooks/use-cue-canvas-actions.js";
|
|
6
|
-
import
|
|
7
|
-
import
|
|
6
|
+
import C from "./color-picker-menu.js";
|
|
7
|
+
import v from "./tool.js";
|
|
8
8
|
import x from "./whiteboard-toolbar.js";
|
|
9
|
-
const b =
|
|
10
|
-
const
|
|
11
|
-
return
|
|
12
|
-
|
|
13
|
-
}, [
|
|
14
|
-
|
|
15
|
-
/* @__PURE__ */
|
|
9
|
+
const b = f(({ userType: t, renderAs: e }) => {
|
|
10
|
+
const i = p(t, e), { activeInstance: o, activeTool: a, activeColor: s } = u();
|
|
11
|
+
return l(() => {
|
|
12
|
+
o && (s && o.setColor(s, !1), a && o.setTool(a, !1));
|
|
13
|
+
}, [o]), e === "whiteboard" ? /* @__PURE__ */ r(x, { tools: i, userType: t }) : /* @__PURE__ */ n(c, { $flexDirection: "row", $alignItems: "center", $justifyContent: "center", $flexGapX: 0.5, children: [
|
|
14
|
+
i.map((m) => /* @__PURE__ */ r(v, { tool: m, shouldAnimate: !0 }, m)),
|
|
15
|
+
/* @__PURE__ */ r(C, { userType: t, renderAs: "canvas" })
|
|
16
16
|
] });
|
|
17
|
-
}),
|
|
17
|
+
}), I = b;
|
|
18
18
|
export {
|
|
19
|
-
|
|
19
|
+
I as default
|
|
20
20
|
};
|
|
21
21
|
//# sourceMappingURL=toolbar.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"toolbar.js","sources":["../../../../src/features/cue-canvas/toolbar/toolbar.tsx"],"sourcesContent":["import type { IToolbarProps } from '../types/toolbar';\n\nimport React, { memo, useEffect } from 'react';\n\nimport FlexView from '../../ui/layout/flex-view';\nimport { getUserTools } from '../cue-canvas-helpers';\nimport { useCueCanvasActions } from '../hooks/use-cue-canvas-actions';\nimport ColorPickerMenu from './color-picker-menu';\nimport Tool from './tool';\nimport WhiteboardToolbar from './whiteboard-toolbar';\n\nconst Toolbar: React.FC<IToolbarProps> = memo(({ userType, renderAs }) => {\n const tools = getUserTools(userType, renderAs);\n const { activeInstance: cueCanvas, activeTool, activeColor } = useCueCanvasActions();\n\n useEffect(() => {\n //This effect is used to set the active tool and color on the cueCanvas instance\n // when user navigfate to differnet questions this is used to sync tool and color for the cueCanvas instance\n // this is only needed for canvas as whiteboard will only have 1 instance\n if (cueCanvas
|
|
1
|
+
{"version":3,"file":"toolbar.js","sources":["../../../../src/features/cue-canvas/toolbar/toolbar.tsx"],"sourcesContent":["import type { IToolbarProps } from '../types/toolbar';\n\nimport React, { memo, useEffect } from 'react';\n\nimport FlexView from '../../ui/layout/flex-view';\nimport { getUserTools } from '../cue-canvas-helpers';\nimport { useCueCanvasActions } from '../hooks/use-cue-canvas-actions';\nimport ColorPickerMenu from './color-picker-menu';\nimport Tool from './tool';\nimport WhiteboardToolbar from './whiteboard-toolbar';\n\nconst Toolbar: React.FC<IToolbarProps> = memo(({ userType, renderAs }) => {\n const tools = getUserTools(userType, renderAs);\n const { activeInstance: cueCanvas, activeTool, activeColor } = useCueCanvasActions();\n\n useEffect(() => {\n //This effect is used to set the active tool and color on the cueCanvas instance\n // when user navigfate to differnet questions this is used to sync tool and color for the cueCanvas instance\n // this is only needed for canvas as whiteboard will only have 1 instance\n if (cueCanvas) {\n if (activeColor) {\n cueCanvas.setColor(activeColor, false);\n }\n\n if (activeTool) {\n cueCanvas.setTool(activeTool, false);\n }\n }\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [cueCanvas]);\n\n if (renderAs === 'whiteboard') {\n return <WhiteboardToolbar tools={tools} userType={userType} />;\n }\n\n return (\n <FlexView $flexDirection=\"row\" $alignItems=\"center\" $justifyContent=\"center\" $flexGapX={0.5}>\n {tools.map(tool => (\n <Tool tool={tool} key={tool} shouldAnimate />\n ))}\n <ColorPickerMenu userType={userType} renderAs=\"canvas\" />\n </FlexView>\n );\n});\n\nexport default Toolbar;\n"],"names":["Toolbar","memo","userType","renderAs","tools","getUserTools","cueCanvas","activeTool","activeColor","useCueCanvasActions","useEffect","jsx","WhiteboardToolbar","jsxs","FlexView","Tool","tool","ColorPickerMenu","Toolbar$1"],"mappings":";;;;;;;;AAWA,MAAMA,IAAmCC,EAAK,CAAC,EAAE,UAAAC,GAAU,UAAAC,QAAe;AAClE,QAAAC,IAAQC,EAAaH,GAAUC,CAAQ,GACvC,EAAE,gBAAgBG,GAAW,YAAAC,GAAY,aAAAC,EAAA,IAAgBC;AAkB/D,SAhBAC,EAAU,MAAM;AAId,IAAIJ,MACEE,KACQF,EAAA,SAASE,GAAa,EAAK,GAGnCD,KACQD,EAAA,QAAQC,GAAY,EAAK;AAAA,EAEvC,GAEC,CAACD,CAAS,CAAC,GAEVH,MAAa,eACR,gBAAAQ,EAACC,GAAkB,EAAA,OAAAR,GAAc,UAAAF,EAAoB,CAAA,IAI5D,gBAAAW,EAACC,KAAS,gBAAe,OAAM,aAAY,UAAS,iBAAgB,UAAS,WAAW,KACrF,UAAA;AAAA,IAAMV,EAAA,IAAI,OACR,gBAAAO,EAAAI,GAAA,EAAK,MAAAC,GAAuB,eAAa,GAAA,GAAnBA,CAAoB,CAC5C;AAAA,IACA,gBAAAL,EAAAM,GAAA,EAAgB,UAAAf,GAAoB,UAAS,SAAS,CAAA;AAAA,EACzD,EAAA,CAAA;AAEJ,CAAC,GAEDgB,IAAelB;"}
|