Rotatable/resizeable arrow

HTML

<div class="arrow-container">
    <div class="arrow-top">
        <div class="arrow-rotate arrow-control"></div>
    </div>
    <div class="arrow">
        <div class="arrow-resize arrow-control"></div>
        <div class="arrow-tail"></div>
        <div class="arrow-head">
            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 18 15">
                <polygon points="18,7.5 0,15 4.3,7.5 0,0 "/>
            </svg>
        </div>
    </div>
</div>

CSS

.arrow-container {
    position: absolute;
    top: 200px;
    left: 200px;
}

.arrow-control {
    width: 40px;
    height: 40px;
    cursor: pointer;
}

.arrow-rotate {
    background-color: #000088;
}

.arrow-resize {
    background-color: #006600;
}

.arrow div {
    display: inline-block;
    vertical-align: middle;
}

.arrow-top div {
    display: inline-block;
    vertical-align: middle;
}

.arrow-label div {
    vertical-align: bottom;
    text-align: center;
}

.arrow-tail {
    width: 150px;
    height: 3px;
    margin-right: -15px;
    background-color: #0672bd;
}

.arrow-head {
    width: 30px;
}

.arrow svg {
    display: block;
}

.arrow polygon {
    fill: #0672bd;
}

JavaScript

(function() {
    this.isDragging = false;
    this.isRotate = false;
    this.isResize = false;
    this.hx = null;
    this.hy = null;
    this.ox = null;
    this.oy = null;
    this.cx = null;
    this.cy = null;
    this.rx = null;
    this.ry = null;
    this.lastAngle = 0;

    this.init = function() {
        this.setEventHandlers();
    };
    
    this.setEventHandlers = function() {
        var that = this;

        $('.arrow-resize')
            .on('mousedown', function(e) {
                e.preventDefault();
                e.stopPropagation();
                that.isResize = true;
                that.initArrowDrag(e);
            });

        $('.arrow-rotate')
            .on('mousedown', function(e) {
                e.preventDefault();
                e.stopPropagation();
                that.isRotate = true;
                that.initArrowDrag(e);
            });

        $(document)
            .on('mousemove', function(e) {
                if (that.isDragging) {
                    e.preventDefault();

                    if (that.isRotate) {
                        that.dragRotate(e);
                    }
                    else if (that.isResize) {
                        that.dragResize(e);
                    }
                }
            })
            .on('mouseup mouseleave', function(e) {
                if (that.isDragging) {

                    if (that.isRotate) {
                        that.stopDragRotate(e);
                    }
                    else if (that.isResize) {
                        that.stopDragResize(e);
                    }

                }
            });
    };
    
    this.initArrowDrag = function(e) {
        var $arrow = $(e.target).parents('.arrow-container');
        var offset = $arrow.offset();
        var width = $arrow.width();
        var height = $arrow.height();

        this.isDragging = true;
        this.ox = offset.left;
        this.oy = offset.top;
        debugger;
       ...