Bound | Tech Tips & Tricks

How To Get PDF.JS Text Below The Bounds Of A Canvas Annotation Shape

August 3, 2015 by blogmeister·0 Comments

So you successfully added an annotation feature in your PDF.JS web application. You created some shapes onto the Canvas and you want to get the text that are within the bounds of the annotation shape.

How can you do it?

Take this image for example. See the yellow highlighted shape?

The only solution to do this is to add a Span tag for each character because doing this you will be able to get the offset x,y coordinates as well as the width and height and use these details to see if it intersects within the annotation shape’s bound.

This is my custom made function:

getTextBelowIt: function(annotation) {
    var div = $('#pageContainer' + (this.pageIndex + 1) + ' > .textLayer');
    var divs = $(div).children();
    var buffer = '';
    divs.each(function(index) {
        var x = parseFloat($(this).css('left'));
        var y = parseFloat($(this).css('top'));
        var w = parseFloat($(this).attr('data-canvas-width'));
        var h = parseFloat($(this).height());
        if (someIntersectFunctionThatReturnsBoolean(x, y, w, h)) {
            var divSpan = $(this);
            var origHtml = divSpan.html();
            divSpan.html(function (i, html) {
                var chars = $.trim(html).split("");
                return '<span someattribute="true">' + chars.join('</span><span someattribute="true">') + '</span>';
            });
            var letterBuffer = '';
            $(divSpan).find('span[someattribute="true"]').each(function() {
                if (annotation.intersects($(this).offset().left - div.offset().left, $(this).offset().top - div.offset().top, $(this).width(), $(this).height()))
                {
                    letterBuffer += $(this).text();
                }
            });
            divSpan.html(origHtml);
            if (letterBuffer.length > 0) {
                buffer += letterBuffer;
                if (index + 1 <= divs.length - 1 && parseFloat(divs.eq(index).css('top')) != parseFloat(divs.eq(index + 1).css('top'))) {
                    buffer += '\\n';
                }
            }
        }
    });
    return buffer;
}

getTextBelowIt: function(annotation) {

var div = $('#pageContainer' + (this.pageIndex + 1) + ' > .textLayer');

var divs = $(div).children();

var buffer = '';

divs.each(function(index) {

var x = parseFloat($(this).css('left'));

var y = parseFloat($(this).css('top'));

var w = parseFloat($(this).attr('data-canvas-width'));

var h = parseFloat($(this).height());

if (someIntersectFunctionThatReturnsBoolean(x, y, w, h)) {

var divSpan = $(this);

var origHtml = divSpan.html();

divSpan.html(function (i, html) {

var chars = $.trim(html).split("");

return '<span someattribute="true">' + chars.join('</span><span someattribute="true">') + '</span>';

});

var letterBuffer = '';

$(divSpan).find('span[someattribute="true"]').each(function() {

if (annotation.intersects($(this).offset().left - div.offset().left, $(this).offset().top - div.offset().top, $(this).width(), $(this).height()))

{

letterBuffer += $(this).text();

}

});

divSpan.html(origHtml);

if (letterBuffer.length > 0) {

buffer += letterBuffer;

if (index + 1 <= divs.length - 1 && parseFloat(divs.eq(index).css('top')) != parseFloat(divs.eq(index + 1).css('top'))) {

buffer += '\\n';

}

});

return buffer;

}

By passing the annotation into the parameter, it will get its x, y, width and height details and loops through all the text Div layer of PDF.JS in the page number where the annotation is placed.

Then, if the text Div layer’s bound intersects that of the annotation shape’s bound, it will loop through all the text and add a Span tag.

Each span tag will have its own x, y, width and height and it will be used to see if it intersects with the annotation shape’s bound. If so, the character will be added to the buffer variable.

The buffer variable is the one that stores all the characters found to be within the bounds of the annotation shape.

The annotation parameter should be some annotation class that has a pageIndex and x, y, width and height attributes.

How To Get Rectangle Bounds Of Selected Text In Javascript

April 15, 2015 by blogmeister·0 Comments

User Tim Down from the Stack Overflow forum provided a very handy function to get the rectangle bounds of selected text in Javascript.

This is mighty useful in cases like mine where I wanted to control the visibility of the context menu and that I required it to appear only when the mouse cursor is within the selected text bound.

function getSelectionBound() {
    var sel = document.selection, range;
    var x = 0, y = 0, width = 0, height = 0;
    if (sel) {
        if (sel.type != "Control") {
            range = sel.createRange();
            x = range.boundingLeft;
            y = range.boundingTop;
            width = range.boundingWidth;
            height = range.boundingHeight;
        }
    } else if (window.getSelection) {
        sel = window.getSelection();
        if (sel.rangeCount) {
            range = sel.getRangeAt(0).cloneRange();
            if (range.getBoundingClientRect) {
                var rect = range.getBoundingClientRect();
                x = rect.left;
                y = rect.top;
                width = rect.right - rect.left;
                height = rect.bottom - rect.top;
            }
        }
    }
    return { x: x, y: y, width: width , height: height };
}

function getSelectionBound() {

var sel = document.selection, range;

var x = 0, y = 0, width = 0, height = 0;

if (sel) {

if (sel.type != "Control") {

range = sel.createRange();

x = range.boundingLeft;

y = range.boundingTop;

width = range.boundingWidth;

height = range.boundingHeight;

}

} else if (window.getSelection) {

sel = window.getSelection();

if (sel.rangeCount) {

range = sel.getRangeAt(0).cloneRange();

if (range.getBoundingClientRect) {

var rect = range.getBoundingClientRect();

x = rect.left;

y = rect.top;

width = rect.right - rect.left;

height = rect.bottom - rect.top;

}

return { x: x, y: y, width: width , height: height };

}

How To Hide A Java FX Control Without Affecting Its Bounded Area

December 29, 2014 by blogmeister·0 Comments

The problem in Java FX when we hide controls is that once we set it to setVisible(false), the control will be hidden yes. But its bounded space will still be in effect and it would look pretty ugly seeing a huge empty area in your user interface.

While some have suggested placing it in an HBox or VBox and removing and adding them when needed, the better solution for me is to call this control.managedProperty().bind(control.visibleProperty()); before any calls to setVisible() whether you want to hide it or not.

Once that is called, when you hide a control, its bounded space will be removed from the user interface as well making it look like it is not there at all.

Tech Tips & Tricks

tech tips gadgets programming software

Tag: bound

How To Get PDF.JS Text Below The Bounds Of A Canvas Annotation Shape

How To Get Rectangle Bounds Of Selected Text In Javascript

How To Hide A Java FX Control Without Affecting Its Bounded Area