@turnix-co/konva-editor 2.0.7 → 2.0.10

package/README.md

@@ -46,9 +46,16 @@ import {
   Canvas,
   Toolbar,
   SlideNavigation,
+  TopNavBar,
+  BottomToolbar,
+  PublishButton,
+  EditorRoot,
   ReduxProvider,
   store,
-  useSlidesPersistence
+  useSlidesPersistence,
+  type Slide,
+  type PublishProgress,
+  type PublishResponse,
 } from '@turnix-co/konva-editor';
 import '@turnix-co/konva-editor/styles.css';
 import type Konva from 'konva';
@@ -62,24 +69,48 @@ function PersistenceLoader({ children }: { children: React.ReactNode }) {
 export default function EditorPage() {
   const stageRef = useRef<Konva.Stage | null>(null);
 
+  const handlePublish = async (
+    slides: Slide[],
+    onProgress?: (progress: PublishProgress) => void
+  ): Promise<PublishResponse> => {
+    // Your publish logic here
+    return { success: true, message: 'Published!' };
+  };
+
   return (
     <ReduxProvider store={store}>
       <PersistenceLoader>
-        <div style={{
-          width: '100vw',
-          height: '100vh',
-          display: 'flex',
-          flexDirection: 'column',
-          overflow: 'hidden'
-        }}>
+        <EditorRoot
+          style={{
+            width: '100vw',
+            height: '100vh',
+            display: 'flex',
+            flexDirection: 'column',
+            overflow: 'hidden',
+          }}
+        >
+          {/* Header with title and publish button */}
+          <TopNavBar
+            title="My Lesson"
+            autoSaveMessage="Auto-saved just now"
+            onBack={() => window.history.back()}
+            onPublish={handlePublish}
+          />
+
+          {/* Main toolbar */}
           <Toolbar stageRef={stageRef} />
 
+          {/* Canvas area */}
           <div style={{ flex: 1, position: 'relative' }}>
             <Canvas onStageReady={(ref) => { stageRef.current = ref.current; }} />
+
+            {/* Bottom toolbar for pen size and colors (shows when drawing) */}
+            <BottomToolbar />
           </div>
 
+          {/* Slide navigation */}
           <SlideNavigation />
-        </div>
+        </EditorRoot>
       </PersistenceLoader>
     </ReduxProvider>
   );
@@ -112,9 +143,12 @@ export default function EditorPage() {
 | `Canvas` | Main canvas component with drawing, images, videos, and text |
 | `Toolbar` | Toolbar with drawing tools, colors, and actions |
 | `SlideNavigation` | Multi-slide navigation and management |
+| `TopNavBar` | Header with title, auto-save status, and action buttons |
+| `BottomToolbar` | Pen size and color picker toolbar |
+| `LayersPanel` | Layer management panel for reordering elements |
 | `ScreenRecorder` | Screen recording functionality |
 | `PublishButton` | Customizable publish button with progress tracking |
-| `EditorRoot` | Root wrapper that scopes styles (optional) |
+| `EditorRoot` | Root wrapper that scopes styles (required for styling) |
 
 ### Redux Setup
 
@@ -311,6 +345,8 @@ import type {
   CanvasProps,
   ToolbarProps,
   EditorRootProps,
+  TopNavBarProps,
+  BottomToolbarProps,
   ExportOptions,
   PublishProgress,
   PublishResponse,
@@ -319,6 +355,36 @@ import type {
 } from '@turnix-co/konva-editor';
 ```
 
+## Component Props
+
+### TopNavBar
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `title` | `string` | `'Untitled'` | Title displayed in the header |
+| `autoSaveMessage` | `string` | `'Auto-saved just now'` | Auto-save status text |
+| `onBack` | `() => void` | - | Callback when back button clicked |
+| `onSettings` | `() => void` | - | Callback when settings button clicked |
+| `onProfile` | `() => void` | - | Callback when profile button clicked |
+| `onPublish` | `PublishButtonProps['onPublish']` | - | Publish function (shows publish button if provided) |
+| `showBackButton` | `boolean` | `true` | Show/hide back button |
+| `showSettingsButton` | `boolean` | `true` | Show/hide settings button |
+| `showProfileButton` | `boolean` | `true` | Show/hide profile button |
+| `showPublishButton` | `boolean` | `true` | Show/hide publish button |
+| `leftContent` | `React.ReactNode` | - | Custom left side content |
+| `rightContent` | `React.ReactNode` | - | Custom right side content |
+| `className` | `string` | - | Additional CSS classes |
+
+### BottomToolbar
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `colors` | `Array<{name: string, value: string}>` | Default colors | Custom color palette |
+| `showSizeSlider` | `boolean` | `true` | Show/hide pen size slider |
+| `showColorPicker` | `boolean` | `true` | Show/hide color picker |
+| `showBackgroundPicker` | `boolean` | `true` | Show/hide background color picker |
+| `className` | `string` | - | Additional CSS classes |
+
 ## Troubleshooting
 
 ### Recorded Video Not Displaying Full Screen

package/dist/index.d.ts

@@ -560,6 +560,66 @@ interface EditorRootProps {
  */
 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;
@@ -686,4 +746,4 @@ declare const useSelector: <T>(selector: (state: RootState) => T) => T;
 
 declare const useSlidesPersistence: () => void;
 
-export { type AppDispatch, Canvas, type CanvasProps, EditorRoot, type EditorRootProps, type ExportOptions, type FillInTheBlanks, type FlashcardElement, type ImageElement, 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, 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 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 };