@turnix-co/konva-editor 2.0.25 → 2.0.27

package/dist/index.d.ts

@@ -1,18 +1,110 @@
-import Konva from 'konva';
-export { default as Konva } from 'konva';
-export { Stage as KonvaStage } from 'konva/lib/Stage';
 import React$1 from 'react';
+import Konva from 'konva';
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import * as _reduxjs_toolkit from '@reduxjs/toolkit';
 import * as redux_thunk from 'redux-thunk';
 import * as redux from 'redux';
 export { Provider as ReduxProvider } from 'react-redux';
 
+/**
+ * Tool identifiers for the main toolbar
+ */
+type ToolType = 'select' | 'pen' | 'eraser' | 'text' | 'shapes' | 'activities' | 'media';
+/**
+ * Shape identifiers available in shapes submenu
+ */
+type ShapeType = 'rectangle' | 'circle' | 'ellipse' | 'triangle' | 'polygon' | 'star' | 'ring' | 'wedge' | 'arrow' | 'line' | 'arc';
+/**
+ * Activity identifiers available in activities submenu
+ */
+type ActivityType = 'flashcard' | 'multiple-choice' | 'true-false' | 'short-answer' | 'fill-in-the-blank';
+/**
+ * Media identifiers available in media submenu
+ */
+type MediaType = 'photo-frame' | 'image' | 'video';
+/**
+ * Action identifiers for the toolbar action buttons
+ */
+type ActionType = 'undo' | 'redo' | 'screen-record' | 'camera-record' | 'clear';
+/**
+ * Configuration for which tools to show in the toolbar
+ */
+interface ToolbarToolsConfig {
+    /** Show select/cursor tool */
+    select?: boolean;
+    /** Show pen drawing tool */
+    pen?: boolean;
+    /** Show eraser tool */
+    eraser?: boolean;
+    /** Show text tool */
+    text?: boolean;
+    /** Show shapes menu (or provide specific shapes) */
+    shapes?: boolean | ShapeType[];
+    /** Show activities menu (or provide specific activities) */
+    activities?: boolean | ActivityType[];
+    /** Show media menu (or provide specific media types) */
+    media?: boolean | MediaType[];
+}
+/**
+ * Configuration for which action buttons to show
+ */
+interface ToolbarActionsConfig {
+    /** Show undo button */
+    undo?: boolean;
+    /** Show redo button */
+    redo?: boolean;
+    /** Show screen recording button */
+    screenRecord?: boolean;
+    /** Show camera recording button */
+    cameraRecord?: boolean;
+    /** Show clear canvas button */
+    clear?: boolean;
+}
+/**
+ * Complete toolbar configuration
+ */
+interface ToolbarConfig {
+    /** Configure which tools to show */
+    tools?: ToolbarToolsConfig;
+    /** Configure which action buttons to show */
+    actions?: ToolbarActionsConfig;
+}
+/**
+ * Default toolbar configuration - all tools and actions enabled
+ */
+declare const DEFAULT_TOOLBAR_CONFIG: Required<ToolbarConfig>;
+/**
+ * Context menu configuration
+ * Simple boolean to enable/disable context menu on right-click of canvas elements
+ */
+interface ContextMenuConfig {
+    /** Enable/disable context menu entirely (default: true) */
+    enabled: boolean;
+}
+/**
+ * Default context menu configuration - enabled by default
+ */
+declare const DEFAULT_CONTEXT_MENU_CONFIG: ContextMenuConfig;
+/**
+ * Merge user's toolbar config with defaults
+ */
+declare function mergeToolbarConfig(userConfig?: ToolbarConfig): Required<ToolbarConfig>;
+/**
+ * Preset: Viewer-only mode (no editing capabilities)
+ */
+declare const VIEWER_TOOLBAR_CONFIG: ToolbarConfig;
+/**
+ * Preset: Basic editor (no activities)
+ */
+declare const BASIC_EDITOR_TOOLBAR_CONFIG: ToolbarConfig;
+
 type CanvasProps = {
     onStageReady?: (stageRef: React$1.RefObject<Konva.Stage | null>) => void;
     onSelectionChange?: (selectedId: string | null) => void;
     onTextEditingReady?: (startEditingFn: (textId: string) => void) => void;
     onDirectDrawingCanvasReady?: (canvasRef: React$1.RefObject<HTMLCanvasElement | null>) => void;
+    /** Configuration for context menu permissions and visibility */
+    contextMenuConfig?: ContextMenuConfig;
 };
 declare const Canvas: React$1.FC<CanvasProps>;
 
@@ -23,8 +115,10 @@ type ToolbarProps = {
     stageRef?: React.RefObject<Konva.Stage | null>;
     onTextAdded?: (textId: string) => void;
     showToggleButton?: boolean;
+    /** Configuration for which tools and actions to show */
+    config?: ToolbarConfig;
 };
-declare const Toolbar: ({ isOpen: isOpenProp, onClose, onScreenRecord, stageRef, onTextAdded, showToggleButton, }?: ToolbarProps) => react_jsx_runtime.JSX.Element;
+declare const Toolbar: ({ isOpen: isOpenProp, onClose, onScreenRecord, stageRef, onTextAdded, showToggleButton, config, }?: ToolbarProps) => react_jsx_runtime.JSX.Element;
 
 declare const SlideNavigation: React$1.FC;
 
@@ -36,7 +130,7 @@ type ScreenRecorderProps = {
 };
 declare const ScreenRecorder: React$1.FC<ScreenRecorderProps>;
 
-type Line$1 = {
+type Line = {
     id?: string;
     tool: string;
     points: number[];
@@ -98,7 +192,7 @@ type ImageElement = {
     zIndex?: number;
     timestamp?: number;
     audioData?: string;
-    annotations?: Line$1[];
+    annotations?: Line[];
     isDrawingMode?: boolean;
 };
 type VideoElement = {
@@ -157,7 +251,7 @@ type PhotoFrameElement = {
     timestamp?: number;
     audioData?: string;
     isCapturing: boolean;
-    annotations?: Line$1[];
+    annotations?: Line[];
     isDrawingMode?: boolean;
 };
 type TextElement = {
@@ -308,7 +402,7 @@ type Slide = {
     name: string;
     thumbnail?: string;
     backgroundColor?: string;
-    lines: Line$1[];
+    lines: Line[];
     shapes: Shape[];
     images: ImageElement[];
     videos: VideoElement[];
@@ -356,7 +450,7 @@ declare const loadSlides: _reduxjs_toolkit.ActionCreatorWithOptionalPayload<{
     slides: Slide[];
     currentSlideId: string;
 }, "canvas/loadSlides">;
-declare const addLine: _reduxjs_toolkit.ActionCreatorWithOptionalPayload<Line$1, "canvas/addLine">;
+declare const addLine: _reduxjs_toolkit.ActionCreatorWithOptionalPayload<Line, "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> & {
@@ -401,7 +495,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$1;
+    line: Line;
 }, "canvas/addImageAnnotation">;
 declare const updateImageAnnotation: _reduxjs_toolkit.ActionCreatorWithOptionalPayload<{
     imageId: string;
@@ -411,7 +505,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$1;
+    line: Line;
 }, "canvas/addPhotoFrameAnnotation">;
 declare const updatePhotoFrameAnnotation: _reduxjs_toolkit.ActionCreatorWithOptionalPayload<{
     frameId: string;
@@ -484,7 +578,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$1[], "canvas/setLines">;
+declare const setLines: _reduxjs_toolkit.ActionCreatorWithOptionalPayload<Line[], "canvas/setLines">;
 declare const updateLinePosition: _reduxjs_toolkit.ActionCreatorWithOptionalPayload<{
     id: string;
     x: number;
@@ -546,82 +640,6 @@ interface PublishButtonProps {
 }
 declare const PublishButton: React$1.FC<PublishButtonProps>;
 
-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
- *
- * Default styles are applied for full-screen layout. Override with the style prop if needed.
- */
-declare function EditorRoot({ children, className, style }: EditorRootProps): react_jsx_runtime.JSX.Element;
-
-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>;
-
-type LayerItem = {
-    id: string;
-    type: 'image' | 'video' | 'shape' | 'text' | 'flashcard' | 'photoFrame' | 'mcq' | 'trueFalse' | 'shortAnswer' | 'longAnswer' | 'fillInTheBlanks' | 'line';
-    name: string;
-    timestamp: number;
-};
-type LayersPanelProps = {
-    selectedElementId?: string;
-    onClose: () => void;
-    onSelectElement: (id: string, type: LayerItem['type']) => void;
-};
-declare const LayersPanel: React$1.FC<LayersPanelProps>;
-
 type ToolbarState = {
     selectedTool: string;
     penColor: string;
@@ -677,60 +695,6 @@ 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: {
@@ -748,4 +712,4 @@ declare const useSelector: <T>(selector: (state: RootState) => T) => T;
 
 declare const useSlidesPersistence: () => void;
 
-export { type AppDispatch, BottomToolbar, type BottomToolbarProps, Canvas, type CanvasProps, EditorRoot, type EditorRootProps, type ExportOptions, type FillInTheBlanks, type FlashcardElement, type ImageElement, LayersPanel, type Line$1 as 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, TopNavBar, type TopNavBarProps, 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, getCompressionStats, 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, 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 };
+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 };