how can I use Tools.TextAnnotationCreateTool() method

[Richard]

Hi,

Did webview API support the feature that we can input some text in documents just like annotation(please see the attachment).

I want to use the Tools.TextAnnotationCreateTool method but it does not work. Here is my code. Could you please help me?

var text = me.docViewer.SetToolMode(Tools.TextAnnotationCreateTool); ///not work

var highlight = me.docViewer.SetToolMode(Tools.TextHighlightCreateTool);///work

Regards,

Richard

[Matt Parizeau]

Hi Richard,

The TextAnnotationCreateTool is actually just the base text tool that the highlight, underline and strikeout tools inherit from.

What I think you're looking for is the FreeText annotation. In the current version there is no FreeTextCreateTool but it will be there in the next version and for now you can actually implement it yourself. Here are the steps:

1) In WebViewerInterface.js add AnnotationCreateFreeText: "AnnotationCreateFreeText" as a property on the exports.PDFTron.WebViewer.ToolMode object.

2) In AnnotationPanel.html add an element to the toolModePicker element that has a data-toolmode of AnnotationCreateFreeText.

3) In ReaderControl.js find the section with toolModeMap and add an entry:

this.toolModeMap[ToolMode.AnnotationCreateFreeText] = Tools.FreeTextCreateTool;

4) Add the following tool code in a config file:

var Tools = window.Tools;

Tools.FreeTextCreateTool = function(docViewer) {
    Tools.GenericAnnotationCreateTool.call(this, docViewer, Annotations.FreeTextAnnotation);
};

Tools.FreeTextCreateTool.prototype = $.extend(new Tools.GenericAnnotationCreateTool(), {
    mouseLeftDown: function(e) {
        if (!this.annotation) {
            Tools.GenericAnnotationCreateTool.prototype.mouseLeftDown.call(this, e);
            this.annotation.setContents("Text");
        }
    },
    mouseMove: function(e) {
        if (!this.annotation) {
            return;
        }
        Tools.Tool.prototype.mouseMove.call(this, e);

        if (typeof this.pageCoordinates === "undefined") {
            return;
        }
        var pt0 = this.pageCoordinates[0];
        var pt1 = this.pageCoordinates[1];
        if (pt1 === null || pt0 === null || (pt0.pageIndex !== pt1.pageIndex)) {
            return;
        }
        var rect = new Annotations.Rect(pt0.x, pt0.y, pt1.x, pt1.y);
        rect.normalize();

        this.annotation.setRect(rect);
        this.annotation.setPadding(new Annotations.Rect(0, 0, 0, 0));
        this.docViewer.GetAnnotationManager().RedrawAnnotation(this.annotation);
    },        
    mouseLeftUp: function(e) {
        Tools.Tool.prototype.mouseLeftUp.call(this, e);
        if (this.annotation) {
            var am = this.docViewer.GetAnnotationManager();
            var w = this.annotation.GetWidth();
            var h = this.annotation.GetHeight();
            // delete if dimensions to small
            if (w === 0 && h === 0) {
                am.DeleteAnnotation(this.annotation);
            } else {
                this.annotation.setPadding(new Annotations.Rect(0, 0, 0, 0));
                am.AddAnnotation(this.annotation);
            }
            this.annotation = null;
        }
    }
});

One thing to note is that to change the text for this annotation you need to edit it inside the popup note.

Matt Parizeau

Software Developer

PDFTron Systems Inc.

[Richard]

Hi Matt,

Thanks for your reply. But the FreeText did not work after following your tutorial. Here are some questions I want to ask.

1) In step 2, do I need to config the data-i18n of AnnotationCreateFreeText element in AnnotationPanel.html.

2) In step 3, I have added the tool codes in the end of ReaderControlConfig.js. Correct? If not, what should do?

3)The FreeText has shown in the annotation tabs but it didn't show anything when I click it. What should I do to make it sense?

Regards,

Richard

在 2014年6月26日星期四UTC+8上午3时27分58秒，Matt Parizeau写道：

Hi Richard,

The TextAnnotationCreateTool is actually just the base text tool that the highlight, underline and strikeout tools inherit from.

What I think you're looking for is the FreeText annotation. In the current version there is no FreeTextCreateTool but it will be there in the next version and for now you can actually implement it yourself. Here are the steps:

1) In WebViewerInterface.js add AnnotationCreateFreeText: "AnnotationCreateFreeText" as a property on the exports.PDFTron.WebViewer.ToolMode object.

2) In AnnotationPanel.html add an element to the toolModePicker element that has a data-toolmode of AnnotationCreateFreeText.

3) Add the following tool code in a config file:

[Matt Parizeau]

Hi Richard,

Sorry it seems that I forgot one step! I edited my post and you'll see it as step 3.

The data-i18n attribute is used to set the tooltip for the button. If you modify Resources/i18n/translation-en.json then you could add another entry for "FreeText" and use it in the data-i18n attribute.

Matt Parizeau

Software Developer

PDFTron Systems Inc.

[Richard]

Hi Matt,

Thanks for your reply. I have make it sense after following your step. Thanks. In order to make my customize annotation more friendly and look good, I have some questions to ask. Could you please help me to fig it out?

1) Could we edit the FreeText annotation's text without the popup note.

2) Could we set the default color when we select the annotation type such as FreeHandCreatTool, instead of changing color and side after editing annotation.

3) Could we change the FreeText icon and make it like TextSelect icon.

Regards,

Richard

在 2014年6月28日星期六UTC+8上午1时52分54秒，Matt Parizeau写道：

[Matt Parizeau]

Hi Richard,

1) To do this you would want to customize the draw function of the annotation. See this post for a simple example. For editing without the popup note maybe you could take a look at this library?

2) To set the color for the next annotation to be created you can change the default fill color and default stroke color. You can use AnnotationManager.defaultFillColor and AnnotationManager.defaultStrokeColor. This will set the fill and stroke colors of the next annotation to be created. Use like:

annotManager.defaultFillColor = new Annotations.Color(255, 0, 0);

3) In AnnotationPanel.html you can see the toolModePicker and all of the buttons there. You'll see that each of them has an image associated with it and you can change it there.

Matt Parizeau

Software Developer

PDFTron Systems Inc.