filerobot-image-annotator

Repository includes React plugin

Learn more about Filerobot

Filerobot Image Annotator

Usage:

Install the package

npm install filerobot-image-annotator

Import the plugin

// import ImageAnnotator, { ImageAnnotatorConfig, ...otherExports } from "filerobot-image-annotator"; // OLD SYNTAX
import { ImageAnnotatorContext, CommentsList, Canvas, NewCommentArea } from "filerobot-image-annotator";

Create plugin's config

Minimal config (uses Scaleflex servers)

check defaultConfig's object docs

If you're not going to use scaleflex servers, you will have to define commentsConnector , commentsSelectors and userConfig !!!

const imageAnnotatorConfig: ImageAnnotatorConfig = {
    imageUrl: 'https://images2.alphacoders.com/439/thumb-1920-439779.jpg', // path to image
    userConfig: {
        userId: 139,
    },
    commentsConfig: {
        commentsConnector: {
            defaultConfig: {
                fileUUID: "someuuid-a5656-aa-50f7-bcd2-de0741850000", // image uuid from Scaleflex server
                projectSlug: "wazaaarghd", // selected project's slug from Scaleflex server
                apiKey: "very_long_token" // Scaleflex server access key
            }
        }
    }
};

Initializing with Minimal config

    // Each component is freely added as a multi-level child to the context in wherever place u want and it respects its container's dimensions/styles to customize it without issues.
    <ImageAnnotatorContext config={imageAnnotatorConfig}>
        <div>
            <Canvas />
        </div>
        <div>
            <span>Comments list will reside here!</span>
            <CommentsList />
        </div>
        <div>
            <p>Hello there, we are having your comment here down below, write down ur comment please in the next box</p>
            <NewCommentArea />
        </div>
    </ImageAnnotatorContext>

Done !

Config types:

UserConfig , CommentsConfig , DatesConfig , TranslationsConfig EventsHandlersConfig DrawerViewConfig

 interface ImageAnnotatorConfig {
    imageUrl?: string, // you're going to draw over this image
    userConfig: UserConfig,
    commentsConfig: CommentsConfig,
    datesConfig?: DatesConfig,
    translationsConfig?: TranslationsConfig,
    Loader?: (() => JSX.Element), // you can use custom spinner
    eventHandlersConfig?: EventsHandlersConfig, // functions that will be executed on specific user action: for example when he clicks the like button 
    drawerViewConfig?: DrawerViewConfig,
}

CommentsEventHandlersConfig

export interface EventsHandlersConfig {
    comments?: CommentsEventHandlersConfig,
}

export interface CommentsEventHandlersConfig {
    onSentClick?: (commentText: CommentText) => void;
    onReplyClick?: () => void;
    onEditClick?: () => void;
    onLikeClick?: (comment: DrawerComment) => void;
    onSubscribeClick?: (comment: DrawerComment) => void;
    onCommentSelect?: (comment: DrawerComment) => void;
    deleteComments?: (comments_uuids: [string | number] | 'all') => void
}

CanvasConfig

export interface DrawerViewConfig {
    selectRenderNode?: () => HTMLElement, // you can use this prop to render drawerView component into your custom dom node
    classes?: string, // css classes, example "drawings-container"
    canvasOnly?: boolean, // whether to render only canvas without any extra components like message box and nav bar
    canvasConfig?: CanvasConfig,
}

export interface CanvasConfig {
    backgroundStyle?: CSSProperties;
}

Translations:

 interface TranslationsConfig {
  messageInput_sendButtonText?: string
  messageInput_placeholder?: string
  messageInput_back?: string

  comment_replyButtonText?: string
  comment_popupEditLabel?: string
  comment_popupDeleteLabel?: string
  comment_showReplies?: string
  comment_hideReplies?: string
  comments_commentsEmptyPlaceholderLabel?: string
  comments_commentsEmptyPlaceholderHint?: string
  comments_commentsFilteredEmptyPlaceholderLabel: string
  comments_commentsFilteredEmptyPlaceholderHint: string
  comments_commentHeaderResolveLabel?: string
  comments_commentHeaderReopenLabel?: string

  commentsHeader_commentsCounterText?: string
  commentsHeader_commentsSortText?: string
  commentsHeader_commentsSortAscendingText?: string
  commentsHeader_commentsSortDescendingText?: string
  commentsHeader_commentsFilterText?: string
  commentsHeader_commentsFilterAllComments?: string
  commentsHeader_commentsFilterResolved?: string
  commentsHeader_commentsFilterUnResolved?: string
  messageInput_editPlaceholder?: string
}

 interface UserConfig {
    userId: string | number,
}

CommentsSelectors CommentsConnector

 interface CommentsConfig {
    commentsSelectors?: CommentsSelectors;
    commentsConnector: CommentsConnector;
}

 interface DatesConfig {
    formatDate?: (date: string) => string // example: 03.01.1980
    difference?: (date: string) => string // returns the difference between current date and parameter date => example output: 15 minutes
}

interface CommentText {
    text: string;
    shapes: BaseShape[];
    parent?: string | number // the id of the comment that we're replying to
}

interface CommentsSelectors {
    selectComments: (data: any) => Object[];
    selectCommentId: (data: any) => string | number;
    selectCommentText: (data: any) => string;
    selectCommentDate: (data: any) => string;
    selectCommentUpdatedAt: (data: any) => string;
    selectCommentOwnerUserName: (data: any) => string;
    selectCommentOwnerName: (data: any) => string;
    selectCommentUserPhotoUri: (data: any) => string;
    selectCommentLikes: (data: any) => string[] | number[]; // ids of the users who liked the comment
    selectCommentSubscribes: (data: any) => string[] | number[]; // ids of the users who subscribed to the comment
}

CommentText

interface CommentsConnector {
    fetchCommentsRequest?: () => Promise<Record<string, unknown>[]>
    createCommentRequest?: (text: string) => Promise<any>
    deleteComments?: (comments_uuids: [string | number] | 'all') => Promise<any>
    editCommentTextRequest?: (commentId: string | number, text: CommentText) => Promise<any>
    likeCommentRequest?: (commentId: string | number) => Promise<any>
    dislikeCommentRequest?: (commentId: string | number) => Promise<any>
    subscribeToCommentRequest?: (commentId: string | number) => Promise<any>
    unsubscribeToCommentRequest?: (commentId: string | number) => Promise<any>
    defaultConfig?: CommentsConnectorDefaultConfigType
}

interface CommentsConnectorDefaultConfig {
    api?: string; // example: https://somedomain.com/api  => doesn't matter if it ends with "/"
    apiKey: string; // scaleflex server access key
    projectSlug: string; // selected project's slug from scaleflex server
    fileUUID: string; // image uuid from scaleflex server
    requestsErrorHandler?: (error: CommentRequestError) => void;
}