filerobot-image-annotator
    TypeScript icon, indicating that this package has built-in type declarations

    2.0.2 • Public • Published

    Repository includes React plugin

    Contributions welcome License Scaleflex team

    The Lounge

    Learn more about Filerobot

    Filerobot Image Annotator

    image info

    Usage:

    Install the package

    npm install filerobot-image-annotator

    Import the plugin

    import ImageAnnotator, { ImageAnnotatorConfig, ...otherExports } 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 = {
        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

    <ImageAnnotator
      config={imageAnnotatorConfig}
    />

    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;
    }

    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
    
        comment_replyButtonText?: string
    
        commentsHeader_commentsCounterText?: string
        commentsHeader_commentsFilterAscendingText?: string
        commentsHeader_commentsFilterDescendingText?: 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;
        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<Object[]>;
        createCommentRequest?: (text: string) => 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?: CommentsConnectorDefaultConfig;
    }

    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
    }

    Install

    npm i filerobot-image-annotator

    DownloadsWeekly Downloads

    37

    Version

    2.0.2

    License

    MIT

    Unpacked Size

    113 kB

    Total Files

    113

    Last publish

    Collaborators

    • vitaly.shaposhnik