Repository includes React plugin
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
commentsConnector , commentsSelectors and userConfig !!!
If you're not going to use scaleflex servers, you will have to define
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
}
}
}
};
Minimal config
Initializing with // 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,
}
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
}
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
}
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;
}