@turnix-co/konva-editor 2.0.0
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/README.md +558 -0
- package/dist/index.d.ts +635 -0
- package/dist/index.js +26 -0
- package/dist/index.js.map +1 -0
- package/dist/styles.css +1 -0
- package/package.json +78 -0
package/dist/index.d.ts
ADDED
|
@@ -0,0 +1,635 @@
|
|
|
1
|
+
import Konva from 'konva';
|
|
2
|
+
export { default as Konva } from 'konva';
|
|
3
|
+
export { Stage as KonvaStage } from 'konva/lib/Stage';
|
|
4
|
+
import React$1 from 'react';
|
|
5
|
+
import * as react_jsx_runtime from 'react/jsx-runtime';
|
|
6
|
+
import * as _reduxjs_toolkit from '@reduxjs/toolkit';
|
|
7
|
+
import * as redux_thunk from 'redux-thunk';
|
|
8
|
+
import * as redux from 'redux';
|
|
9
|
+
export { Provider as ReduxProvider } from 'react-redux';
|
|
10
|
+
|
|
11
|
+
type CanvasProps = {
|
|
12
|
+
onStageReady?: (stageRef: React$1.RefObject<Konva.Stage | null>) => void;
|
|
13
|
+
onSelectionChange?: (selectedId: string | null) => void;
|
|
14
|
+
onTextEditingReady?: (startEditingFn: (textId: string) => void) => void;
|
|
15
|
+
onDirectDrawingCanvasReady?: (canvasRef: React$1.RefObject<HTMLCanvasElement | null>) => void;
|
|
16
|
+
};
|
|
17
|
+
declare const Canvas: React$1.FC<CanvasProps>;
|
|
18
|
+
|
|
19
|
+
type ToolbarProps = {
|
|
20
|
+
isOpen?: boolean;
|
|
21
|
+
onClose?: () => void;
|
|
22
|
+
onScreenRecord?: () => void;
|
|
23
|
+
stageRef?: React.RefObject<Konva.Stage | null>;
|
|
24
|
+
onTextAdded?: (textId: string) => void;
|
|
25
|
+
showToggleButton?: boolean;
|
|
26
|
+
};
|
|
27
|
+
declare const Toolbar: ({ isOpen: isOpenProp, onClose, onScreenRecord, stageRef, onTextAdded, showToggleButton, }?: ToolbarProps) => react_jsx_runtime.JSX.Element;
|
|
28
|
+
|
|
29
|
+
declare const SlideNavigation: React$1.FC;
|
|
30
|
+
|
|
31
|
+
type ScreenRecorderProps = {
|
|
32
|
+
onClose: () => void;
|
|
33
|
+
stageRef?: React$1.RefObject<Konva.Stage | null>;
|
|
34
|
+
onRecordingComplete?: (videoBlob: Blob, thumbnailDataUrl: string) => void;
|
|
35
|
+
directDrawingCanvasRef?: React$1.RefObject<HTMLCanvasElement | null>;
|
|
36
|
+
};
|
|
37
|
+
declare const ScreenRecorder: React$1.FC<ScreenRecorderProps>;
|
|
38
|
+
|
|
39
|
+
type Line = {
|
|
40
|
+
id?: string;
|
|
41
|
+
tool: string;
|
|
42
|
+
points: number[];
|
|
43
|
+
color: string;
|
|
44
|
+
strokeWidth: number;
|
|
45
|
+
isSketch?: boolean;
|
|
46
|
+
timestamp?: number;
|
|
47
|
+
x?: number;
|
|
48
|
+
y?: number;
|
|
49
|
+
scaleX?: number;
|
|
50
|
+
scaleY?: number;
|
|
51
|
+
rotation?: number;
|
|
52
|
+
};
|
|
53
|
+
type Shape = {
|
|
54
|
+
id: string;
|
|
55
|
+
type: string;
|
|
56
|
+
x: number;
|
|
57
|
+
y: number;
|
|
58
|
+
width: number;
|
|
59
|
+
height: number;
|
|
60
|
+
rotation: number;
|
|
61
|
+
color?: string;
|
|
62
|
+
locked?: boolean;
|
|
63
|
+
link?: string;
|
|
64
|
+
altText?: string;
|
|
65
|
+
zIndex?: number;
|
|
66
|
+
timestamp?: number;
|
|
67
|
+
audioData?: string;
|
|
68
|
+
radius?: number;
|
|
69
|
+
innerRadius?: number;
|
|
70
|
+
outerRadius?: number;
|
|
71
|
+
numPoints?: number;
|
|
72
|
+
radiusX?: number;
|
|
73
|
+
radiusY?: number;
|
|
74
|
+
angle?: number;
|
|
75
|
+
points?: number[];
|
|
76
|
+
pointerLength?: number;
|
|
77
|
+
pointerWidth?: number;
|
|
78
|
+
strokeWidth?: number;
|
|
79
|
+
scaleX?: number;
|
|
80
|
+
scaleY?: number;
|
|
81
|
+
sides?: number;
|
|
82
|
+
innerRadius2?: number;
|
|
83
|
+
outerRadius2?: number;
|
|
84
|
+
clockwise?: boolean;
|
|
85
|
+
};
|
|
86
|
+
type ImageElement = {
|
|
87
|
+
id: string;
|
|
88
|
+
src: string;
|
|
89
|
+
x: number;
|
|
90
|
+
y: number;
|
|
91
|
+
width: number;
|
|
92
|
+
height: number;
|
|
93
|
+
draggable: boolean;
|
|
94
|
+
rotation: number;
|
|
95
|
+
locked?: boolean;
|
|
96
|
+
link?: string;
|
|
97
|
+
altText?: string;
|
|
98
|
+
zIndex?: number;
|
|
99
|
+
timestamp?: number;
|
|
100
|
+
audioData?: string;
|
|
101
|
+
annotations?: Line[];
|
|
102
|
+
isDrawingMode?: boolean;
|
|
103
|
+
};
|
|
104
|
+
type VideoElement = {
|
|
105
|
+
id: string;
|
|
106
|
+
objectUrl: string;
|
|
107
|
+
thumbnailDataUrl: string;
|
|
108
|
+
x: number;
|
|
109
|
+
y: number;
|
|
110
|
+
width: number;
|
|
111
|
+
height: number;
|
|
112
|
+
draggable: boolean;
|
|
113
|
+
isPlaying: boolean;
|
|
114
|
+
rotation: number;
|
|
115
|
+
locked?: boolean;
|
|
116
|
+
link?: string;
|
|
117
|
+
altText?: string;
|
|
118
|
+
zIndex?: number;
|
|
119
|
+
timestamp?: number;
|
|
120
|
+
videoData?: string;
|
|
121
|
+
videoBlob?: Blob;
|
|
122
|
+
audioData?: string;
|
|
123
|
+
isRecorded?: boolean;
|
|
124
|
+
};
|
|
125
|
+
type FlashcardElement = {
|
|
126
|
+
id: string;
|
|
127
|
+
images: string[];
|
|
128
|
+
currentIndex: number;
|
|
129
|
+
order: 'sequential' | 'random';
|
|
130
|
+
navigationHistory?: number[];
|
|
131
|
+
x: number;
|
|
132
|
+
y: number;
|
|
133
|
+
width: number;
|
|
134
|
+
height: number;
|
|
135
|
+
rotation: number;
|
|
136
|
+
draggable: boolean;
|
|
137
|
+
locked?: boolean;
|
|
138
|
+
link?: string;
|
|
139
|
+
altText?: string;
|
|
140
|
+
zIndex?: number;
|
|
141
|
+
timestamp?: number;
|
|
142
|
+
audioData?: string;
|
|
143
|
+
};
|
|
144
|
+
type PhotoFrameElement = {
|
|
145
|
+
id: string;
|
|
146
|
+
capturedImageUrl?: string;
|
|
147
|
+
x: number;
|
|
148
|
+
y: number;
|
|
149
|
+
width: number;
|
|
150
|
+
height: number;
|
|
151
|
+
rotation: number;
|
|
152
|
+
draggable: boolean;
|
|
153
|
+
locked?: boolean;
|
|
154
|
+
link?: string;
|
|
155
|
+
altText?: string;
|
|
156
|
+
zIndex?: number;
|
|
157
|
+
timestamp?: number;
|
|
158
|
+
audioData?: string;
|
|
159
|
+
isCapturing: boolean;
|
|
160
|
+
annotations?: Line[];
|
|
161
|
+
isDrawingMode?: boolean;
|
|
162
|
+
};
|
|
163
|
+
type TextElement = {
|
|
164
|
+
id: string;
|
|
165
|
+
text: string;
|
|
166
|
+
x: number;
|
|
167
|
+
y: number;
|
|
168
|
+
width?: number;
|
|
169
|
+
height?: number;
|
|
170
|
+
rotation: number;
|
|
171
|
+
draggable: boolean;
|
|
172
|
+
locked?: boolean;
|
|
173
|
+
link?: string;
|
|
174
|
+
altText?: string;
|
|
175
|
+
zIndex?: number;
|
|
176
|
+
timestamp?: number;
|
|
177
|
+
audioData?: string;
|
|
178
|
+
fontSize: number;
|
|
179
|
+
fontFamily: string;
|
|
180
|
+
fontStyle: string;
|
|
181
|
+
fontWeight: string;
|
|
182
|
+
textDecoration: string;
|
|
183
|
+
fill: string;
|
|
184
|
+
align: string;
|
|
185
|
+
};
|
|
186
|
+
type MultipleChoice = {
|
|
187
|
+
id: string;
|
|
188
|
+
data: {
|
|
189
|
+
questionType: string;
|
|
190
|
+
responseType: string;
|
|
191
|
+
feedbackMode: string;
|
|
192
|
+
question: string;
|
|
193
|
+
responseOptions: {
|
|
194
|
+
options: string[];
|
|
195
|
+
correctIndex: number[];
|
|
196
|
+
};
|
|
197
|
+
};
|
|
198
|
+
x: number;
|
|
199
|
+
y: number;
|
|
200
|
+
width: number;
|
|
201
|
+
height: number;
|
|
202
|
+
rotation: number;
|
|
203
|
+
locked?: boolean;
|
|
204
|
+
link?: string;
|
|
205
|
+
altText?: string;
|
|
206
|
+
zIndex?: number;
|
|
207
|
+
timestamp?: number;
|
|
208
|
+
audioData?: string;
|
|
209
|
+
};
|
|
210
|
+
type TrueFalse = {
|
|
211
|
+
id: string;
|
|
212
|
+
data: {
|
|
213
|
+
questionType: string;
|
|
214
|
+
responseType: string;
|
|
215
|
+
feedbackMode: string;
|
|
216
|
+
question: string;
|
|
217
|
+
responseOptions: {
|
|
218
|
+
options: string[];
|
|
219
|
+
correctAnswer: boolean;
|
|
220
|
+
};
|
|
221
|
+
};
|
|
222
|
+
x: number;
|
|
223
|
+
y: number;
|
|
224
|
+
width: number;
|
|
225
|
+
height: number;
|
|
226
|
+
rotation: number;
|
|
227
|
+
locked?: boolean;
|
|
228
|
+
link?: string;
|
|
229
|
+
altText?: string;
|
|
230
|
+
zIndex?: number;
|
|
231
|
+
timestamp?: number;
|
|
232
|
+
audioData?: string;
|
|
233
|
+
};
|
|
234
|
+
type ShortAnswer = {
|
|
235
|
+
id: string;
|
|
236
|
+
data: {
|
|
237
|
+
questionType: string;
|
|
238
|
+
responseType: string;
|
|
239
|
+
feedbackMode: string;
|
|
240
|
+
question: string;
|
|
241
|
+
responseOptions: {
|
|
242
|
+
options: string[];
|
|
243
|
+
correctShortAnswer: string;
|
|
244
|
+
};
|
|
245
|
+
};
|
|
246
|
+
x: number;
|
|
247
|
+
y: number;
|
|
248
|
+
width: number;
|
|
249
|
+
height: number;
|
|
250
|
+
rotation: number;
|
|
251
|
+
locked?: boolean;
|
|
252
|
+
link?: string;
|
|
253
|
+
altText?: string;
|
|
254
|
+
zIndex?: number;
|
|
255
|
+
timestamp?: number;
|
|
256
|
+
audioData?: string;
|
|
257
|
+
};
|
|
258
|
+
type LongAnswer = {
|
|
259
|
+
id: string;
|
|
260
|
+
data: {
|
|
261
|
+
questionType: string;
|
|
262
|
+
responseType: string;
|
|
263
|
+
feedbackMode: string;
|
|
264
|
+
question: string;
|
|
265
|
+
responseOptions: {
|
|
266
|
+
options: string[];
|
|
267
|
+
correctLongAnswer: string;
|
|
268
|
+
};
|
|
269
|
+
};
|
|
270
|
+
x: number;
|
|
271
|
+
y: number;
|
|
272
|
+
width: number;
|
|
273
|
+
height: number;
|
|
274
|
+
rotation: number;
|
|
275
|
+
locked?: boolean;
|
|
276
|
+
link?: string;
|
|
277
|
+
altText?: string;
|
|
278
|
+
zIndex?: number;
|
|
279
|
+
timestamp?: number;
|
|
280
|
+
audioData?: string;
|
|
281
|
+
};
|
|
282
|
+
type FillInTheBlanks = {
|
|
283
|
+
id: string;
|
|
284
|
+
data: {
|
|
285
|
+
questionType: string;
|
|
286
|
+
responseType: string;
|
|
287
|
+
feedbackMode: string;
|
|
288
|
+
question: string;
|
|
289
|
+
responseOptions: {
|
|
290
|
+
options: string[];
|
|
291
|
+
correctShortAnswer: string;
|
|
292
|
+
};
|
|
293
|
+
};
|
|
294
|
+
x: number;
|
|
295
|
+
y: number;
|
|
296
|
+
width: number;
|
|
297
|
+
height: number;
|
|
298
|
+
rotation: number;
|
|
299
|
+
locked?: boolean;
|
|
300
|
+
link?: string;
|
|
301
|
+
altText?: string;
|
|
302
|
+
zIndex?: number;
|
|
303
|
+
timestamp?: number;
|
|
304
|
+
audioData?: string;
|
|
305
|
+
};
|
|
306
|
+
type Slide = {
|
|
307
|
+
id: string;
|
|
308
|
+
name: string;
|
|
309
|
+
thumbnail?: string;
|
|
310
|
+
backgroundColor?: string;
|
|
311
|
+
lines: Line[];
|
|
312
|
+
shapes: Shape[];
|
|
313
|
+
images: ImageElement[];
|
|
314
|
+
videos: VideoElement[];
|
|
315
|
+
flashcards: FlashcardElement[];
|
|
316
|
+
photoFrames: PhotoFrameElement[];
|
|
317
|
+
texts: TextElement[];
|
|
318
|
+
createdAt: number;
|
|
319
|
+
updatedAt: number;
|
|
320
|
+
activityType: string;
|
|
321
|
+
multipleChoices: MultipleChoice[];
|
|
322
|
+
trueFalses: TrueFalse[];
|
|
323
|
+
shortAnswers: ShortAnswer[];
|
|
324
|
+
LongAnswer: LongAnswer[];
|
|
325
|
+
fillInTheBlanks: FillInTheBlanks[];
|
|
326
|
+
showMcqForm: boolean;
|
|
327
|
+
showFlashcardForm: boolean;
|
|
328
|
+
editingActivity: MultipleChoice | TrueFalse | ShortAnswer | LongAnswer | FillInTheBlanks | null;
|
|
329
|
+
editingFlashcard: FlashcardElement | null;
|
|
330
|
+
};
|
|
331
|
+
type SlideHistory = {
|
|
332
|
+
past: Slide[];
|
|
333
|
+
future: Slide[];
|
|
334
|
+
};
|
|
335
|
+
type CanvasState = {
|
|
336
|
+
slides: Slide[];
|
|
337
|
+
currentSlideId: string;
|
|
338
|
+
history: Record<string, SlideHistory>;
|
|
339
|
+
isSketchMode: boolean;
|
|
340
|
+
editingTextId: string | null;
|
|
341
|
+
};
|
|
342
|
+
declare const addSlide: _reduxjs_toolkit.ActionCreatorWithoutPayload<"canvas/addSlide">;
|
|
343
|
+
declare const deleteSlide: _reduxjs_toolkit.ActionCreatorWithOptionalPayload<string, "canvas/deleteSlide">;
|
|
344
|
+
declare const duplicateSlide: _reduxjs_toolkit.ActionCreatorWithOptionalPayload<string, "canvas/duplicateSlide">;
|
|
345
|
+
declare const setCurrentSlide: _reduxjs_toolkit.ActionCreatorWithOptionalPayload<string, "canvas/setCurrentSlide">;
|
|
346
|
+
declare const updateSlideThumbnail: _reduxjs_toolkit.ActionCreatorWithOptionalPayload<{
|
|
347
|
+
id: string;
|
|
348
|
+
thumbnail: string;
|
|
349
|
+
}, "canvas/updateSlideThumbnail">;
|
|
350
|
+
declare const setBackgroundColor: _reduxjs_toolkit.ActionCreatorWithOptionalPayload<string, "canvas/setBackgroundColor">;
|
|
351
|
+
declare const reorderSlides: _reduxjs_toolkit.ActionCreatorWithOptionalPayload<{
|
|
352
|
+
fromIndex: number;
|
|
353
|
+
toIndex: number;
|
|
354
|
+
}, "canvas/reorderSlides">;
|
|
355
|
+
declare const loadSlides: _reduxjs_toolkit.ActionCreatorWithOptionalPayload<{
|
|
356
|
+
slides: Slide[];
|
|
357
|
+
currentSlideId: string;
|
|
358
|
+
}, "canvas/loadSlides">;
|
|
359
|
+
declare const addLine: _reduxjs_toolkit.ActionCreatorWithOptionalPayload<Line, "canvas/addLine">;
|
|
360
|
+
declare const removeLine: _reduxjs_toolkit.ActionCreatorWithOptionalPayload<number, "canvas/removeLine">;
|
|
361
|
+
declare const addImage: _reduxjs_toolkit.ActionCreatorWithOptionalPayload<ImageElement, "canvas/addImage">;
|
|
362
|
+
declare const updateImage: _reduxjs_toolkit.ActionCreatorWithOptionalPayload<Partial<ImageElement> & {
|
|
363
|
+
id: string;
|
|
364
|
+
}, "canvas/updateImage">;
|
|
365
|
+
declare const deleteImage: _reduxjs_toolkit.ActionCreatorWithOptionalPayload<string, "canvas/deleteImage">;
|
|
366
|
+
declare const duplicateImage: _reduxjs_toolkit.ActionCreatorWithOptionalPayload<string, "canvas/duplicateImage">;
|
|
367
|
+
declare const addVideo: _reduxjs_toolkit.ActionCreatorWithOptionalPayload<VideoElement, "canvas/addVideo">;
|
|
368
|
+
declare const updateVideo: _reduxjs_toolkit.ActionCreatorWithOptionalPayload<Partial<VideoElement> & {
|
|
369
|
+
id: string;
|
|
370
|
+
}, "canvas/updateVideo">;
|
|
371
|
+
declare const deleteVideo: _reduxjs_toolkit.ActionCreatorWithOptionalPayload<string, "canvas/deleteVideo">;
|
|
372
|
+
declare const duplicateVideo: _reduxjs_toolkit.ActionCreatorWithOptionalPayload<string, "canvas/duplicateVideo">;
|
|
373
|
+
declare const toggleVideoPlaying: _reduxjs_toolkit.ActionCreatorWithOptionalPayload<string, "canvas/toggleVideoPlaying">;
|
|
374
|
+
declare const addShape: _reduxjs_toolkit.ActionCreatorWithOptionalPayload<Shape, "canvas/addShape">;
|
|
375
|
+
declare const updateShape: _reduxjs_toolkit.ActionCreatorWithOptionalPayload<Partial<Shape> & {
|
|
376
|
+
id: string;
|
|
377
|
+
}, "canvas/updateShape">;
|
|
378
|
+
declare const duplicateShape: _reduxjs_toolkit.ActionCreatorWithOptionalPayload<string, "canvas/duplicateShape">;
|
|
379
|
+
declare const deleteShape: _reduxjs_toolkit.ActionCreatorWithOptionalPayload<string, "canvas/deleteShape">;
|
|
380
|
+
declare const addText: _reduxjs_toolkit.ActionCreatorWithOptionalPayload<TextElement, "canvas/addText">;
|
|
381
|
+
declare const updateText: _reduxjs_toolkit.ActionCreatorWithOptionalPayload<Partial<TextElement> & {
|
|
382
|
+
id: string;
|
|
383
|
+
}, "canvas/updateText">;
|
|
384
|
+
declare const deleteText: _reduxjs_toolkit.ActionCreatorWithOptionalPayload<string, "canvas/deleteText">;
|
|
385
|
+
declare const duplicateText: _reduxjs_toolkit.ActionCreatorWithOptionalPayload<string, "canvas/duplicateText">;
|
|
386
|
+
declare const addFlashcard: _reduxjs_toolkit.ActionCreatorWithOptionalPayload<FlashcardElement, "canvas/addFlashcard">;
|
|
387
|
+
declare const updateFlashcard: _reduxjs_toolkit.ActionCreatorWithOptionalPayload<Partial<FlashcardElement> & {
|
|
388
|
+
id: string;
|
|
389
|
+
}, "canvas/updateFlashcard">;
|
|
390
|
+
declare const deleteFlashcard: _reduxjs_toolkit.ActionCreatorWithOptionalPayload<string, "canvas/deleteFlashcard">;
|
|
391
|
+
declare const duplicateFlashcard: _reduxjs_toolkit.ActionCreatorWithOptionalPayload<string, "canvas/duplicateFlashcard">;
|
|
392
|
+
declare const editFlashcard: _reduxjs_toolkit.ActionCreatorWithOptionalPayload<FlashcardElement, "canvas/editFlashcard">;
|
|
393
|
+
declare const nextFlashcard: _reduxjs_toolkit.ActionCreatorWithOptionalPayload<string, "canvas/nextFlashcard">;
|
|
394
|
+
declare const previousFlashcard: _reduxjs_toolkit.ActionCreatorWithOptionalPayload<string, "canvas/previousFlashcard">;
|
|
395
|
+
declare const addPhotoFrame: _reduxjs_toolkit.ActionCreatorWithOptionalPayload<PhotoFrameElement, "canvas/addPhotoFrame">;
|
|
396
|
+
declare const updatePhotoFrame: _reduxjs_toolkit.ActionCreatorWithOptionalPayload<Partial<PhotoFrameElement> & {
|
|
397
|
+
id: string;
|
|
398
|
+
}, "canvas/updatePhotoFrame">;
|
|
399
|
+
declare const deletePhotoFrame: _reduxjs_toolkit.ActionCreatorWithOptionalPayload<string, "canvas/deletePhotoFrame">;
|
|
400
|
+
declare const duplicatePhotoFrame: _reduxjs_toolkit.ActionCreatorWithOptionalPayload<string, "canvas/duplicatePhotoFrame">;
|
|
401
|
+
declare const toggleImageDrawingMode: _reduxjs_toolkit.ActionCreatorWithOptionalPayload<string, "canvas/toggleImageDrawingMode">;
|
|
402
|
+
declare const addImageAnnotation: _reduxjs_toolkit.ActionCreatorWithOptionalPayload<{
|
|
403
|
+
imageId: string;
|
|
404
|
+
line: Line;
|
|
405
|
+
}, "canvas/addImageAnnotation">;
|
|
406
|
+
declare const updateImageAnnotation: _reduxjs_toolkit.ActionCreatorWithOptionalPayload<{
|
|
407
|
+
imageId: string;
|
|
408
|
+
points: number[];
|
|
409
|
+
}, "canvas/updateImageAnnotation">;
|
|
410
|
+
declare const clearImageAnnotations: _reduxjs_toolkit.ActionCreatorWithOptionalPayload<string, "canvas/clearImageAnnotations">;
|
|
411
|
+
declare const togglePhotoFrameDrawingMode: _reduxjs_toolkit.ActionCreatorWithOptionalPayload<string, "canvas/togglePhotoFrameDrawingMode">;
|
|
412
|
+
declare const addPhotoFrameAnnotation: _reduxjs_toolkit.ActionCreatorWithOptionalPayload<{
|
|
413
|
+
frameId: string;
|
|
414
|
+
line: Line;
|
|
415
|
+
}, "canvas/addPhotoFrameAnnotation">;
|
|
416
|
+
declare const updatePhotoFrameAnnotation: _reduxjs_toolkit.ActionCreatorWithOptionalPayload<{
|
|
417
|
+
frameId: string;
|
|
418
|
+
points: number[];
|
|
419
|
+
}, "canvas/updatePhotoFrameAnnotation">;
|
|
420
|
+
declare const clearPhotoFrameAnnotations: _reduxjs_toolkit.ActionCreatorWithOptionalPayload<string, "canvas/clearPhotoFrameAnnotations">;
|
|
421
|
+
declare const addMultipleChoice: _reduxjs_toolkit.ActionCreatorWithOptionalPayload<MultipleChoice, "canvas/addMultipleChoice">;
|
|
422
|
+
declare const updateMultipleChoice: _reduxjs_toolkit.ActionCreatorWithOptionalPayload<Partial<MultipleChoice> & {
|
|
423
|
+
id: string;
|
|
424
|
+
}, "canvas/updateMultipleChoice">;
|
|
425
|
+
declare const editMultipleChoice: _reduxjs_toolkit.ActionCreatorWithOptionalPayload<Partial<MultipleChoice> & {
|
|
426
|
+
id: string;
|
|
427
|
+
}, "canvas/editMultipleChoice">;
|
|
428
|
+
declare const deleteMultipleChoice: _reduxjs_toolkit.ActionCreatorWithOptionalPayload<string, "canvas/deleteMultipleChoice">;
|
|
429
|
+
declare const duplicateMultipleChoice: _reduxjs_toolkit.ActionCreatorWithOptionalPayload<string, "canvas/duplicateMultipleChoice">;
|
|
430
|
+
declare const addTrueFalse: _reduxjs_toolkit.ActionCreatorWithOptionalPayload<TrueFalse, "canvas/addTrueFalse">;
|
|
431
|
+
declare const updateTrueFalse: _reduxjs_toolkit.ActionCreatorWithOptionalPayload<Partial<TrueFalse> & {
|
|
432
|
+
id: string;
|
|
433
|
+
}, "canvas/updateTrueFalse">;
|
|
434
|
+
declare const deleteTrueFalse: _reduxjs_toolkit.ActionCreatorWithOptionalPayload<string, "canvas/deleteTrueFalse">;
|
|
435
|
+
declare const duplicateTrueFalse: _reduxjs_toolkit.ActionCreatorWithOptionalPayload<string, "canvas/duplicateTrueFalse">;
|
|
436
|
+
declare const addShortAnswer: _reduxjs_toolkit.ActionCreatorWithOptionalPayload<ShortAnswer, "canvas/addShortAnswer">;
|
|
437
|
+
declare const updateShortAnswer: _reduxjs_toolkit.ActionCreatorWithOptionalPayload<Partial<ShortAnswer> & {
|
|
438
|
+
id: string;
|
|
439
|
+
}, "canvas/updateShortAnswer">;
|
|
440
|
+
declare const deleteShortAnswer: _reduxjs_toolkit.ActionCreatorWithOptionalPayload<string, "canvas/deleteShortAnswer">;
|
|
441
|
+
declare const duplicateShortAnswer: _reduxjs_toolkit.ActionCreatorWithOptionalPayload<string, "canvas/duplicateShortAnswer">;
|
|
442
|
+
declare const addLongAnswer: _reduxjs_toolkit.ActionCreatorWithOptionalPayload<LongAnswer, "canvas/addLongAnswer">;
|
|
443
|
+
declare const updateLongAnswer: _reduxjs_toolkit.ActionCreatorWithOptionalPayload<Partial<LongAnswer> & {
|
|
444
|
+
id: string;
|
|
445
|
+
}, "canvas/updateLongAnswer">;
|
|
446
|
+
declare const deleteLongAnswer: _reduxjs_toolkit.ActionCreatorWithOptionalPayload<string, "canvas/deleteLongAnswer">;
|
|
447
|
+
declare const duplicateLongAnswer: _reduxjs_toolkit.ActionCreatorWithOptionalPayload<string, "canvas/duplicateLongAnswer">;
|
|
448
|
+
declare const addFillInTheBlanks: _reduxjs_toolkit.ActionCreatorWithOptionalPayload<FillInTheBlanks, "canvas/addFillInTheBlanks">;
|
|
449
|
+
declare const updateFillInTheBlanks: _reduxjs_toolkit.ActionCreatorWithOptionalPayload<Partial<FillInTheBlanks> & {
|
|
450
|
+
id: string;
|
|
451
|
+
}, "canvas/updateFillInTheBlanks">;
|
|
452
|
+
declare const deleteFillInTheBlanks: _reduxjs_toolkit.ActionCreatorWithOptionalPayload<string, "canvas/deleteFillInTheBlanks">;
|
|
453
|
+
declare const duplicateFillInTheBlanks: _reduxjs_toolkit.ActionCreatorWithOptionalPayload<string, "canvas/duplicateFillInTheBlanks">;
|
|
454
|
+
declare const setShowMcqForm: _reduxjs_toolkit.ActionCreatorWithOptionalPayload<boolean, "canvas/setShowMcqForm">;
|
|
455
|
+
declare const setShowFlashcardForm: _reduxjs_toolkit.ActionCreatorWithOptionalPayload<boolean, "canvas/setShowFlashcardForm">;
|
|
456
|
+
declare const setActivityType: _reduxjs_toolkit.ActionCreatorWithOptionalPayload<string, "canvas/setActivityType">;
|
|
457
|
+
declare const setEditingActivity: _reduxjs_toolkit.ActionCreatorWithOptionalPayload<MultipleChoice | TrueFalse | ShortAnswer | LongAnswer | FillInTheBlanks, "canvas/setEditingActivity">;
|
|
458
|
+
declare const bringToFront: _reduxjs_toolkit.ActionCreatorWithOptionalPayload<{
|
|
459
|
+
id: string;
|
|
460
|
+
type: "image" | "video" | "shape" | "mcq" | "flashcard" | "photoFrame" | "text" | "trueFalse" | "shortAnswer" | "longAnswer" | "fillInTheBlanks";
|
|
461
|
+
}, "canvas/bringToFront">;
|
|
462
|
+
declare const sendToBack: _reduxjs_toolkit.ActionCreatorWithOptionalPayload<{
|
|
463
|
+
id: string;
|
|
464
|
+
type: "image" | "video" | "shape" | "mcq" | "flashcard" | "photoFrame" | "text" | "trueFalse" | "shortAnswer" | "longAnswer" | "fillInTheBlanks";
|
|
465
|
+
}, "canvas/sendToBack">;
|
|
466
|
+
declare const toggleLock: _reduxjs_toolkit.ActionCreatorWithOptionalPayload<{
|
|
467
|
+
id: string;
|
|
468
|
+
type: "image" | "video" | "shape" | "mcq" | "flashcard" | "photoFrame" | "text" | "trueFalse" | "shortAnswer" | "longAnswer" | "fillInTheBlanks";
|
|
469
|
+
}, "canvas/toggleLock">;
|
|
470
|
+
declare const setLink: _reduxjs_toolkit.ActionCreatorWithOptionalPayload<{
|
|
471
|
+
id: string;
|
|
472
|
+
type: "image" | "video" | "shape" | "mcq" | "flashcard" | "photoFrame" | "text" | "trueFalse" | "shortAnswer" | "longAnswer" | "fillInTheBlanks";
|
|
473
|
+
link: string;
|
|
474
|
+
}, "canvas/setLink">;
|
|
475
|
+
declare const setAltText: _reduxjs_toolkit.ActionCreatorWithOptionalPayload<{
|
|
476
|
+
id: string;
|
|
477
|
+
type: "image" | "video" | "shape" | "flashcard" | "photoFrame" | "mcq" | "text" | "trueFalse" | "shortAnswer" | "longAnswer" | "fillInTheBlanks";
|
|
478
|
+
altText: string;
|
|
479
|
+
}, "canvas/setAltText">;
|
|
480
|
+
declare const setAudioData: _reduxjs_toolkit.ActionCreatorWithOptionalPayload<{
|
|
481
|
+
id: string;
|
|
482
|
+
type: "image" | "video" | "shape" | "flashcard" | "photoFrame" | "mcq" | "text" | "trueFalse" | "shortAnswer" | "longAnswer" | "fillInTheBlanks";
|
|
483
|
+
audioData: string;
|
|
484
|
+
}, "canvas/setAudioData">;
|
|
485
|
+
declare const updateLastLine: _reduxjs_toolkit.ActionCreatorWithOptionalPayload<number[], "canvas/updateLastLine">;
|
|
486
|
+
declare const finalizeDrawing: _reduxjs_toolkit.ActionCreatorWithoutPayload<"canvas/finalizeDrawing">;
|
|
487
|
+
declare const setLines: _reduxjs_toolkit.ActionCreatorWithOptionalPayload<Line[], "canvas/setLines">;
|
|
488
|
+
declare const updateLinePosition: _reduxjs_toolkit.ActionCreatorWithOptionalPayload<{
|
|
489
|
+
id: string;
|
|
490
|
+
x: number;
|
|
491
|
+
y: number;
|
|
492
|
+
}, "canvas/updateLinePosition">;
|
|
493
|
+
declare const updateLineTransform: _reduxjs_toolkit.ActionCreatorWithOptionalPayload<{
|
|
494
|
+
id: string;
|
|
495
|
+
x: number;
|
|
496
|
+
y: number;
|
|
497
|
+
scaleX: number;
|
|
498
|
+
scaleY: number;
|
|
499
|
+
rotation: number;
|
|
500
|
+
}, "canvas/updateLineTransform">;
|
|
501
|
+
declare const deleteLineById: _reduxjs_toolkit.ActionCreatorWithOptionalPayload<string, "canvas/deleteLineById">;
|
|
502
|
+
declare const duplicateLine: _reduxjs_toolkit.ActionCreatorWithOptionalPayload<string, "canvas/duplicateLine">;
|
|
503
|
+
declare const updateElementOrder: _reduxjs_toolkit.ActionCreatorWithOptionalPayload<{
|
|
504
|
+
id: string;
|
|
505
|
+
type: "image" | "video" | "shape" | "text" | "flashcard" | "photoFrame" | "mcq" | "trueFalse" | "shortAnswer" | "longAnswer" | "fillInTheBlanks" | "line";
|
|
506
|
+
newTimestamp: number;
|
|
507
|
+
}, "canvas/updateElementOrder">;
|
|
508
|
+
declare const clearCanvas: _reduxjs_toolkit.ActionCreatorWithoutPayload<"canvas/clearCanvas">;
|
|
509
|
+
declare const undo: _reduxjs_toolkit.ActionCreatorWithoutPayload<"canvas/undo">;
|
|
510
|
+
declare const redo: _reduxjs_toolkit.ActionCreatorWithoutPayload<"canvas/redo">;
|
|
511
|
+
declare const saveToHistory: _reduxjs_toolkit.ActionCreatorWithoutPayload<"canvas/saveToHistory">;
|
|
512
|
+
declare const toggleSketchMode: _reduxjs_toolkit.ActionCreatorWithoutPayload<"canvas/toggleSketchMode">;
|
|
513
|
+
declare const setSketchMode: _reduxjs_toolkit.ActionCreatorWithOptionalPayload<boolean, "canvas/setSketchMode">;
|
|
514
|
+
declare const setEditingTextId: _reduxjs_toolkit.ActionCreatorWithOptionalPayload<string, "canvas/setEditingTextId">;
|
|
515
|
+
declare const selectCurrentSlideId: (state: {
|
|
516
|
+
canvas: CanvasState;
|
|
517
|
+
}) => string;
|
|
518
|
+
declare const selectCurrentSlide: (state: {
|
|
519
|
+
canvas: CanvasState;
|
|
520
|
+
}) => Slide;
|
|
521
|
+
declare const selectAllSlides: (state: {
|
|
522
|
+
canvas: CanvasState;
|
|
523
|
+
}) => Slide[];
|
|
524
|
+
declare const selectCanAddSlide: (state: {
|
|
525
|
+
canvas: CanvasState;
|
|
526
|
+
}) => boolean;
|
|
527
|
+
declare const selectSlideById: (slideId: string) => (state: {
|
|
528
|
+
canvas: CanvasState;
|
|
529
|
+
}) => Slide;
|
|
530
|
+
|
|
531
|
+
interface PublishProgress {
|
|
532
|
+
current: number;
|
|
533
|
+
total: number;
|
|
534
|
+
status: string;
|
|
535
|
+
}
|
|
536
|
+
interface PublishResponse {
|
|
537
|
+
success: boolean;
|
|
538
|
+
message: string;
|
|
539
|
+
projectId?: string;
|
|
540
|
+
url?: string;
|
|
541
|
+
}
|
|
542
|
+
interface PublishButtonProps {
|
|
543
|
+
onPublish?: (slides: Slide[], onProgress?: (progress: PublishProgress) => void) => Promise<PublishResponse>;
|
|
544
|
+
label?: string;
|
|
545
|
+
className?: string;
|
|
546
|
+
}
|
|
547
|
+
declare const PublishButton: React$1.FC<PublishButtonProps>;
|
|
548
|
+
|
|
549
|
+
interface EditorRootProps {
|
|
550
|
+
children: React$1.ReactNode;
|
|
551
|
+
className?: string;
|
|
552
|
+
style?: React$1.CSSProperties;
|
|
553
|
+
}
|
|
554
|
+
/**
|
|
555
|
+
* EditorRoot wraps the konva editor components and scopes all Tailwind styles
|
|
556
|
+
* to prevent conflicts with host application styles.
|
|
557
|
+
*
|
|
558
|
+
* All konva-editor Tailwind utilities are scoped to the .konva-editor-root class
|
|
559
|
+
* via the `important` setting in tailwind.config.js
|
|
560
|
+
*/
|
|
561
|
+
declare function EditorRoot({ children, className, style }: EditorRootProps): react_jsx_runtime.JSX.Element;
|
|
562
|
+
|
|
563
|
+
type ToolbarState = {
|
|
564
|
+
selectedTool: string;
|
|
565
|
+
penColor: string;
|
|
566
|
+
strokeWidth: number;
|
|
567
|
+
fontSize: number;
|
|
568
|
+
fontFamily: string;
|
|
569
|
+
fontStyle: string;
|
|
570
|
+
fontWeight: string;
|
|
571
|
+
textDecoration: string;
|
|
572
|
+
textColor: string;
|
|
573
|
+
};
|
|
574
|
+
declare const setTool: _reduxjs_toolkit.ActionCreatorWithOptionalPayload<string, "toolbar/setTool">;
|
|
575
|
+
declare const setPenColor: _reduxjs_toolkit.ActionCreatorWithOptionalPayload<string, "toolbar/setPenColor">;
|
|
576
|
+
declare const setStrokeWidth: _reduxjs_toolkit.ActionCreatorWithOptionalPayload<number, "toolbar/setStrokeWidth">;
|
|
577
|
+
|
|
578
|
+
declare const store: _reduxjs_toolkit.EnhancedStore<{
|
|
579
|
+
toolbar: ToolbarState;
|
|
580
|
+
canvas: {
|
|
581
|
+
slides: Slide[];
|
|
582
|
+
currentSlideId: string;
|
|
583
|
+
history: Record<string, {
|
|
584
|
+
past: Slide[];
|
|
585
|
+
future: Slide[];
|
|
586
|
+
}>;
|
|
587
|
+
isSketchMode: boolean;
|
|
588
|
+
editingTextId: string | null;
|
|
589
|
+
};
|
|
590
|
+
}, redux.UnknownAction, _reduxjs_toolkit.Tuple<[redux.StoreEnhancer<{
|
|
591
|
+
dispatch: redux_thunk.ThunkDispatch<{
|
|
592
|
+
toolbar: ToolbarState;
|
|
593
|
+
canvas: {
|
|
594
|
+
slides: Slide[];
|
|
595
|
+
currentSlideId: string;
|
|
596
|
+
history: Record<string, {
|
|
597
|
+
past: Slide[];
|
|
598
|
+
future: Slide[];
|
|
599
|
+
}>;
|
|
600
|
+
isSketchMode: boolean;
|
|
601
|
+
editingTextId: string | null;
|
|
602
|
+
};
|
|
603
|
+
}, undefined, redux.UnknownAction>;
|
|
604
|
+
}>, redux.StoreEnhancer]>>;
|
|
605
|
+
type RootState = ReturnType<typeof store.getState>;
|
|
606
|
+
type AppDispatch = typeof store.dispatch;
|
|
607
|
+
|
|
608
|
+
type ExportOptions = {
|
|
609
|
+
format?: 'png' | 'jpeg';
|
|
610
|
+
quality?: number;
|
|
611
|
+
pixelRatio?: number;
|
|
612
|
+
fileName?: string;
|
|
613
|
+
};
|
|
614
|
+
declare const exportSlideAsImage: (stage: Konva.Stage, options?: ExportOptions) => void;
|
|
615
|
+
declare const exportSlideAsBlob: (stage: Konva.Stage, options?: Omit<ExportOptions, "fileName">) => Promise<Blob>;
|
|
616
|
+
declare const getSlideDataURL: (stage: Konva.Stage, options?: Omit<ExportOptions, "fileName">) => string;
|
|
617
|
+
|
|
618
|
+
declare const useDispatch: () => redux_thunk.ThunkDispatch<{
|
|
619
|
+
toolbar: ToolbarState;
|
|
620
|
+
canvas: {
|
|
621
|
+
slides: Slide[];
|
|
622
|
+
currentSlideId: string;
|
|
623
|
+
history: Record<string, {
|
|
624
|
+
past: Slide[];
|
|
625
|
+
future: Slide[];
|
|
626
|
+
}>;
|
|
627
|
+
isSketchMode: boolean;
|
|
628
|
+
editingTextId: string | null;
|
|
629
|
+
};
|
|
630
|
+
}, undefined, redux.UnknownAction> & redux.Dispatch<redux.UnknownAction>;
|
|
631
|
+
declare const useSelector: <T>(selector: (state: RootState) => T) => T;
|
|
632
|
+
|
|
633
|
+
declare const useSlidesPersistence: () => void;
|
|
634
|
+
|
|
635
|
+
export { type AppDispatch, Canvas, type CanvasProps, EditorRoot, type EditorRootProps, type ExportOptions, type FillInTheBlanks, type FlashcardElement, type ImageElement, type Line, type LongAnswer, type MultipleChoice, type PhotoFrameElement, PublishButton, type PublishButtonProps, type PublishProgress, type PublishResponse, type RootState, ScreenRecorder, type Shape, type ShortAnswer, type Slide, SlideNavigation, type TextElement, Toolbar, type ToolbarProps, type TrueFalse, type VideoElement, addFillInTheBlanks, addFlashcard, addImage, addImageAnnotation, addLine, addLongAnswer, addMultipleChoice, addPhotoFrame, addPhotoFrameAnnotation, addShape, addShortAnswer, addSlide, addText, addTrueFalse, addVideo, bringToFront, clearCanvas, clearImageAnnotations, clearPhotoFrameAnnotations, deleteFillInTheBlanks, deleteFlashcard, deleteImage, deleteLineById, deleteLongAnswer, deleteMultipleChoice, deletePhotoFrame, deleteShape, deleteShortAnswer, deleteSlide, deleteText, deleteTrueFalse, deleteVideo, duplicateFillInTheBlanks, duplicateFlashcard, duplicateImage, duplicateLine, duplicateLongAnswer, duplicateMultipleChoice, duplicatePhotoFrame, duplicateShape, duplicateShortAnswer, duplicateSlide, duplicateText, duplicateTrueFalse, duplicateVideo, editFlashcard, editMultipleChoice, exportSlideAsBlob, exportSlideAsImage, finalizeDrawing, getSlideDataURL, loadSlides, nextFlashcard, previousFlashcard, redo, removeLine, reorderSlides, saveToHistory, selectAllSlides, selectCanAddSlide, selectCurrentSlide, selectCurrentSlideId, selectSlideById, sendToBack, setActivityType, setAltText, setAudioData, setBackgroundColor, setCurrentSlide, setEditingActivity, setEditingTextId, setLines, setLink, setPenColor, setShowFlashcardForm, setShowMcqForm, setSketchMode, setStrokeWidth, setTool, store, toggleImageDrawingMode, toggleLock, togglePhotoFrameDrawingMode, toggleSketchMode, toggleVideoPlaying, undo, updateElementOrder, updateFillInTheBlanks, updateFlashcard, updateImage, updateImageAnnotation, updateLastLine, updateLinePosition, updateLineTransform, updateLongAnswer, updateMultipleChoice, updatePhotoFrame, updatePhotoFrameAnnotation, updateShape, updateShortAnswer, updateSlideThumbnail, updateText, updateTrueFalse, updateVideo, useDispatch, useSelector, useSlidesPersistence };
|