angularjs: rescaling textbox

Question

I'm trying to make an editable textbox like those in powerpoint and other presentation editors.

This is my feeble attempt.

I'm having trouble with the initial rescaling. To be concise, the first instant when I adjust the drag handle, the box does not scale to the correct height and width.

Any idea why is that so?

element.find('span').bind('mousedown', function(event) {
                console.log('resizing...');
                event.preventDefault();
                var domElement = element[0];

                var rect = domElement.getBoundingClientRect();
                startX = rect.left;
                startY = rect.bottom;
                console.log(startX + " " + startY);

                $document.bind('mousemove', resize);
                $document.bind('mouseup', mouseup2);
                event.cancelBubble = true;
            });


function resize(event) {

                var height = event.screenY - startY;
                var width = event.screenX - startX;
                scope.$apply(function() {
                    scope.tb.height = height + 'px';
                    scope.tb.width = width + 'px';
                });
            }

Reto Aebersold · Accepted Answer · 2013-10-30 10:16:27Z

2

I updated your fiddle implementing this:

tbW and tbH hold the current box size (inital 200px x 100px):

var tbW = 200,
    tbH = 100;

scope.tb.width = tbW + 'px',
scope.tb.height = tbH + 'px';

On mousedown startX and startY are assigned to the current mouse postion

In the resize function the delta of the mouse movement is calculated and added to the width and height of your tbox:

tbH += event.screenY - startY;
startY = event.screenY;
tbW += event.screenX - startX;
startX = event.screenX;
scope.$apply(function () {
  scope.tb.height = tbH + 'px';
  scope.tb.width = tbW + 'px';
});

answered Oct 30, 2013 at 10:16

Reto Aebersold

16.7k5 gold badges58 silver badges76 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

goh Over a year ago

Brilliant! Apologize for the late response. Thank you!

Collectives™ on Stack Overflow

angularjs: rescaling textbox

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related