@turnix-co/konva-editor 2.0.27 → 2.0.30

package/dist/index.d.ts

@@ -1,5 +1,7 @@
-import React$1 from 'react';
 import Konva from 'konva';
+export { default as Konva } from 'konva';
+export { Stage as KonvaStage } from 'konva/lib/Stage';
+import React$1 from 'react';
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import * as _reduxjs_toolkit from '@reduxjs/toolkit';
 import * as redux_thunk from 'redux-thunk';
@@ -120,17 +122,7 @@ type ToolbarProps = {
 };
 declare const Toolbar: ({ isOpen: isOpenProp, onClose, onScreenRecord, stageRef, onTextAdded, showToggleButton, config, }?: ToolbarProps) => react_jsx_runtime.JSX.Element;
 
-declare const SlideNavigation: React$1.FC;
-
-type ScreenRecorderProps = {
-    onClose: () => void;
-    stageRef?: React$1.RefObject<Konva.Stage | null>;
-    onRecordingComplete?: (videoBlob: Blob, thumbnailDataUrl: string) => void;
-    directDrawingCanvasRef?: React$1.RefObject<HTMLCanvasElement | null>;
-};
-declare const ScreenRecorder: React$1.FC<ScreenRecorderProps>;
-
-type Line = {
+type Line$1 = {
     id?: string;
     tool: string;
     points: number[];
@@ -192,7 +184,7 @@ type ImageElement = {
     zIndex?: number;
     timestamp?: number;
     audioData?: string;
-    annotations?: Line[];
+    annotations?: Line$1[];
     isDrawingMode?: boolean;
 };
 type VideoElement = {
@@ -251,7 +243,7 @@ type PhotoFrameElement = {
     timestamp?: number;
     audioData?: string;
     isCapturing: boolean;
-    annotations?: Line[];
+    annotations?: Line$1[];
     isDrawingMode?: boolean;
 };
 type TextElement = {
@@ -402,7 +394,7 @@ type Slide = {
     name: string;
     thumbnail?: string;
     backgroundColor?: string;
-    lines: Line[];
+    lines: Line$1[];
     shapes: Shape[];
     images: ImageElement[];
     videos: VideoElement[];
@@ -450,7 +442,7 @@ declare const loadSlides: _reduxjs_toolkit.ActionCreatorWithOptionalPayload<{
     slides: Slide[];
     currentSlideId: string;
 }, "canvas/loadSlides">;
-declare const addLine: _reduxjs_toolkit.ActionCreatorWithOptionalPayload<Line, "canvas/addLine">;
+declare const addLine: _reduxjs_toolkit.ActionCreatorWithOptionalPayload<Line$1, "canvas/addLine">;
 declare const removeLine: _reduxjs_toolkit.ActionCreatorWithOptionalPayload<number, "canvas/removeLine">;
 declare const addImage: _reduxjs_toolkit.ActionCreatorWithOptionalPayload<ImageElement, "canvas/addImage">;
 declare const updateImage: _reduxjs_toolkit.ActionCreatorWithOptionalPayload<Partial<ImageElement> & {
@@ -495,7 +487,7 @@ declare const duplicatePhotoFrame: _reduxjs_toolkit.ActionCreatorWithOptionalPay
 declare const toggleImageDrawingMode: _reduxjs_toolkit.ActionCreatorWithOptionalPayload<string, "canvas/toggleImageDrawingMode">;
 declare const addImageAnnotation: _reduxjs_toolkit.ActionCreatorWithOptionalPayload<{
     imageId: string;
-    line: Line;
+    line: Line$1;
 }, "canvas/addImageAnnotation">;
 declare const updateImageAnnotation: _reduxjs_toolkit.ActionCreatorWithOptionalPayload<{
     imageId: string;
@@ -505,7 +497,7 @@ declare const clearImageAnnotations: _reduxjs_toolkit.ActionCreatorWithOptionalP
 declare const togglePhotoFrameDrawingMode: _reduxjs_toolkit.ActionCreatorWithOptionalPayload<string, "canvas/togglePhotoFrameDrawingMode">;
 declare const addPhotoFrameAnnotation: _reduxjs_toolkit.ActionCreatorWithOptionalPayload<{
     frameId: string;
-    line: Line;
+    line: Line$1;
 }, "canvas/addPhotoFrameAnnotation">;
 declare const updatePhotoFrameAnnotation: _reduxjs_toolkit.ActionCreatorWithOptionalPayload<{
     frameId: string;
@@ -578,7 +570,7 @@ declare const setAudioData: _reduxjs_toolkit.ActionCreatorWithOptionalPayload<{
 }, "canvas/setAudioData">;
 declare const updateLastLine: _reduxjs_toolkit.ActionCreatorWithOptionalPayload<number[], "canvas/updateLastLine">;
 declare const finalizeDrawing: _reduxjs_toolkit.ActionCreatorWithoutPayload<"canvas/finalizeDrawing">;
-declare const setLines: _reduxjs_toolkit.ActionCreatorWithOptionalPayload<Line[], "canvas/setLines">;
+declare const setLines: _reduxjs_toolkit.ActionCreatorWithOptionalPayload<Line$1[], "canvas/setLines">;
 declare const updateLinePosition: _reduxjs_toolkit.ActionCreatorWithOptionalPayload<{
     id: string;
     x: number;
@@ -640,6 +632,77 @@ interface PublishButtonProps {
 }
 declare const PublishButton: React$1.FC<PublishButtonProps>;
 
+type TopNavBarProps = {
+    /** Title displayed in the header */
+    title?: string;
+    /** Auto-save status message */
+    autoSaveMessage?: string;
+    /** Callback when back button is clicked */
+    onBack?: () => void;
+    /** Callback when settings button is clicked */
+    onSettings?: () => void;
+    /** Callback when user/profile button is clicked */
+    onProfile?: () => void;
+    /** Function to publish slides (passed to PublishButton) */
+    onPublish?: PublishButtonProps['onPublish'];
+    /** Whether to show the publish button */
+    showPublishButton?: boolean;
+    /** Whether to show the settings button */
+    showSettingsButton?: boolean;
+    /** Whether to show the profile button */
+    showProfileButton?: boolean;
+    /** Whether to show the back button */
+    showBackButton?: boolean;
+    /** Custom class name for the container */
+    className?: string;
+    /** Custom content to render on the right side (replaces default buttons) */
+    rightContent?: React$1.ReactNode;
+    /** Custom content to render on the left side (replaces default content) */
+    leftContent?: React$1.ReactNode;
+};
+declare const TopNavBar: React$1.FC<TopNavBarProps>;
+
+type BottomToolbarProps = {
+    /** Custom colors array to override defaults */
+    colors?: Array<{
+        name: string;
+        value: string;
+    }>;
+    /** Whether to show the size slider */
+    showSizeSlider?: boolean;
+    /** Whether to show the color picker */
+    showColorPicker?: boolean;
+    /** Whether to show the background color picker */
+    showBackgroundPicker?: boolean;
+    /** Custom class name for the container */
+    className?: string;
+};
+declare const BottomToolbar: React$1.FC<BottomToolbarProps>;
+
+interface EditorRootProps {
+    children: React$1.ReactNode;
+    className?: string;
+    style?: React$1.CSSProperties;
+}
+/**
+ * EditorRoot wraps the konva editor components and scopes all Tailwind styles
+ * to prevent conflicts with host application styles.
+ *
+ * All konva-editor Tailwind utilities are scoped to the .konva-editor-root class
+ * via the `important` setting in tailwind.config.js
+ */
+declare function EditorRoot({ children, className, style }: EditorRootProps): react_jsx_runtime.JSX.Element;
+
+declare const SlideNavigation: React$1.FC;
+
+type ScreenRecorderProps = {
+    onClose: () => void;
+    stageRef?: React$1.RefObject<Konva.Stage | null>;
+    onRecordingComplete?: (videoBlob: Blob, thumbnailDataUrl: string) => void;
+    directDrawingCanvasRef?: React$1.RefObject<HTMLCanvasElement | null>;
+};
+declare const ScreenRecorder: React$1.FC<ScreenRecorderProps>;
+
 type ToolbarState = {
     selectedTool: string;
     penColor: string;
@@ -695,6 +758,60 @@ declare const exportSlideAsImage: (stage: Konva.Stage, options?: ExportOptions)
 declare const exportSlideAsBlob: (stage: Konva.Stage, options?: Omit<ExportOptions, "fileName">) => Promise<Blob>;
 declare const getSlideDataURL: (stage: Konva.Stage, options?: Omit<ExportOptions, "fileName">) => string;
 
+/**
+ * Line simplification utilities using Douglas-Peucker algorithm
+ * Reduces the number of points in a line while preserving its shape
+ */
+/**
+ * Simplify a flat points array using Douglas-Peucker algorithm
+ *
+ * @param flatPoints Array of points [x1, y1, x2, y2, ...]
+ * @param epsilon Tolerance for simplification (default: 1.5 pixels)
+ * @returns Simplified flat points array
+ */
+declare const simplifyFlatPoints: (flatPoints: number[], epsilon?: number) => number[];
+/**
+ * Line type matching the canvasSlice Line type
+ */
+type Line = {
+    id?: string;
+    tool: string;
+    points: number[];
+    color: string;
+    strokeWidth: number;
+    isSketch?: boolean;
+    timestamp?: number;
+    x?: number;
+    y?: number;
+    scaleX?: number;
+    scaleY?: number;
+    rotation?: number;
+};
+/**
+ * Simplify a single line's points using Douglas-Peucker algorithm
+ *
+ * @param line The line object to simplify
+ * @param epsilon Tolerance for simplification
+ * @returns New line object with simplified points
+ */
+declare const simplifyLine: (line: Line, epsilon?: number) => Line;
+/**
+ * Simplify an array of lines
+ *
+ * @param lines Array of line objects
+ * @param epsilon Tolerance for simplification
+ * @returns Array of lines with simplified points
+ */
+declare const simplifyLines: (lines: Line[], epsilon?: number) => Line[];
+/**
+ * Calculate compression ratio for debugging/logging
+ */
+declare const getCompressionStats: (original: number[], simplified: number[]) => {
+    originalPoints: number;
+    simplifiedPoints: number;
+    reduction: string;
+};
+
 declare const useDispatch: () => redux_thunk.ThunkDispatch<{
     toolbar: ToolbarState;
     canvas: {
@@ -712,4 +829,4 @@ declare const useSelector: <T>(selector: (state: RootState) => T) => T;
 
 declare const useSlidesPersistence: () => void;
 
-export { type ActionType, type ActivityType, type AppDispatch, BASIC_EDITOR_TOOLBAR_CONFIG, Canvas, type CanvasProps, type ContextMenuConfig, DEFAULT_CONTEXT_MENU_CONFIG, DEFAULT_TOOLBAR_CONFIG, type ExportOptions, type FillInTheBlanks, type FlashcardElement, type ImageElement, type Line, type LongAnswer, type MediaType, type MultipleChoice, type PhotoFrameElement, PublishButton, type PublishButtonProps, type PublishProgress, type PublishResponse, type RootState, ScreenRecorder, type Shape, type ShapeType, type ShortAnswer, type Slide, SlideNavigation, type TextElement, type ToolType, Toolbar, type ToolbarActionsConfig, type ToolbarConfig, type ToolbarProps, type ToolbarToolsConfig, type TrueFalse, VIEWER_TOOLBAR_CONFIG, 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, mergeToolbarConfig, 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 };
+export { type ActionType, type ActivityType, type AppDispatch, BASIC_EDITOR_TOOLBAR_CONFIG, BottomToolbar, type BottomToolbarProps, Canvas, type CanvasProps, type ContextMenuConfig, DEFAULT_CONTEXT_MENU_CONFIG, DEFAULT_TOOLBAR_CONFIG, EditorRoot, type EditorRootProps, type ExportOptions, type FillInTheBlanks, type FlashcardElement, type ImageElement, type Line$1 as Line, type LongAnswer, type MediaType, type MultipleChoice, type PhotoFrameElement, PublishButton, type PublishButtonProps, type PublishProgress, type PublishResponse, type RootState, ScreenRecorder, type Shape, type ShapeType, type ShortAnswer, type Slide, SlideNavigation, type TextElement, type ToolType, Toolbar, type ToolbarActionsConfig, type ToolbarConfig, type ToolbarProps, type ToolbarToolsConfig, TopNavBar, type TopNavBarProps, type TrueFalse, VIEWER_TOOLBAR_CONFIG, 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, getCompressionStats, getSlideDataURL, loadSlides, mergeToolbarConfig, 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, simplifyFlatPoints, simplifyLine, simplifyLines, 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 };