Raphael-js drag and click events inaccurate after browser resize

Question

I've created a radial dial using the Raphael-js library and it works as should on page load. It's embedded in a responsive layout so I want it to resize according to it's container, which it does. However, the new container size makes the mouse events inaccurate. When I resize it back to what it was on page load, it works fine.

    function RadialDial(paperId, opts) {
    var thisObj = this;
    this.dialParent = document.querySelector(paperId);
    this.divPaper = this.dialParent.querySelector('.radialDial');
    this.divPaperW = this.divPaper.clientWidth;
    this.scaleRatio = this.divPaperW / 250;
    this.outputEle = this.dialParent.querySelector('.dialOutput .val');
    this.btnPlus = this.dialParent.querySelector('.btnPlus');
    this.btnMinus = this.dialParent.querySelector('.btnMinus');
    this.debug = this.dialParent.querySelector('.debug');
    this.opts = {
        dialCenter: this.divPaperW / 2,
        dialRadius: this.divPaperW / 2,
        startA: 155,
        endA: 25,
        arcCentralA: 230,
        maxRange: 12,
        minRange: 3,
        postText: false,
        rangeSteps: 3
    }
    this.currNeedleA;
    this.rangeAngles = [];
    this.setOptions(opts);
    this.paper = Raphael(this.divPaper, this.opts.dialRadius * 2, this.opts.dialRadius * 2);
    this.rangeDivisions = Raphael.rad(this.opts.arcCentralA / (this.opts.maxRange - this.opts.minRange));
    this.arcStartX = (this.opts.dialCenter + ((this.opts.dialRadius - (30 * this.scaleRatio)) * Math.cos(Raphael.rad(this.opts.startA)))).toString();
    this.arcStartY = (this.opts.dialCenter + ((this.opts.dialRadius - (30 * this.scaleRatio)) * Math.sin(Raphael.rad(this.opts.startA)))).toString();
    var currSectorX = this.arcStartX;
    var currSectorY = this.arcStartY;
    var dialFaceAtts = (Raphael.svg) ? {fill: "r#ffffff-#ffffff:85-#999999:75-#cccccc:57-#999999", stroke: "none"} : {fill: "#ffffff", stroke: "#999999", "stroke-width": (1 * this.scaleRatio)};
    this.dialFace = this.paper.circle(this.opts.dialCenter, this.opts.dialCenter, this.opts.dialRadius).attr(dialFaceAtts);

    var dialFaceRim = this.paper.circle(this.opts.dialCenter, this.opts.dialCenter, (102 * this.scaleRatio)).attr({fill: "none", "stroke-width": (8 * this.scaleRatio), stroke: "#eeeeee", "stroke-opacity": 0.4});
    var currSectorAngle = Raphael.rad(this.opts.startA);
    var rangeSet = this.paper.set();
    for (var i = this.opts.minRange; i <= (this.opts.maxRange); i++) {

        currSectorX = (this.opts.dialCenter + ((this.opts.dialRadius - (40 * this.scaleRatio)) * Math.cos(currSectorAngle))).toString();
        currSectorY = (this.opts.dialCenter + ((this.opts.dialRadius - (40 * this.scaleRatio)) * Math.sin(currSectorAngle))).toString();
        if (i % this.opts.rangeSteps == 0) {
            var rangeTxt = this.paper.text(currSectorX, currSectorY, i).attr({fill: "#00a2d8", "font-size": (22 * this.scaleRatio).toString()});
            rangeSet.push(rangeTxt);
            this.rangeAngles[i] = Raphael.deg(this.rangeDivisions * (i - (this.opts.minRange)));
        }
        currSectorAngle = currSectorAngle + this.rangeDivisions;
    }

    this.clickArea = this.paper.circle(this.opts.dialCenter, this.opts.dialCenter, this.opts.dialRadius).attr({fill: "red", "fill-opacity": 0, stroke: "none"});
    this.needle = this.paper.path("M" + (this.arcStartX).toString() + "," + (this.arcStartY).toString() +
            "L" + (this.opts.dialCenter * (138.89401 / this.opts.dialCenter) * this.scaleRatio).toString() + "," + (this.opts.dialCenter * (107.45764 / this.opts.dialCenter) * this.scaleRatio).toString() +
            "L" + (this.opts.dialCenter * (147.34637 / this.opts.dialCenter) * this.scaleRatio).toString() + "," + (this.opts.dialCenter * (125.5838 / this.opts.dialCenter) * this.scaleRatio).toString() + "z").attr({fill: '#0058b6', stroke: "none"});/* */

    var needleLine = this.paper.path("M" + (this.opts.dialCenter + (18 * this.scaleRatio)).toString() + ' ' + (this.opts.dialCenter - (8 * this.scaleRatio)).toString() + ", L" + this.arcStartX + "," + this.arcStartY).attr({stroke: "#ffffff", "stroke-width": .7});
    var centerCircle = this.paper.circle(this.opts.dialCenter, this.opts.dialCenter, (12 * this.scaleRatio)).attr({fill: "#0058b6", stroke: "none"});

    this.needleSet = this.paper.set();
    this.needleSet.push(this.needle, needleLine);
    this.dialSet = this.paper.set();


    this.dialSet.push(dialFaceRim, this.dialFace, this.clickArea, this.needleSet, rangeSet, centerCircle, needleLine);
    this.paper.setViewBox(0, 0, this.opts.dialRadius * 2, this.opts.dialRadius * 2, true);
    this.paper.canvas.setAttribute('preserveAspectRatio', 'none');

    this.needleSet.push(this.needle);

    this.needleSet.data('thisObj', thisObj);
    this.needleSet.data('paperObj', this.paper.canvas);

    this.setNeedleDrag();
    this.dialFaceClick();
}
RadialDial.prototype = {
    constructor: RadialDial,
    setOptions: function (opts) {
        for (key in opts) {
            if (!opts.hasOwnProperty(key)) {
                continue;
            }
            this.opts[key] = opts[key];
        }
    },
    drawDial: function () {

    },
    elePosition: function (ele) {
        var eleX = 0;
        var eleY = 0;
        while (ele) {
            eleX += (ele.offsetLeft - ele.scrollLeft + ele.clientLeft);
            eleY += (ele.offsetTop - ele.scrollTop + ele.clientTop);
            ele = ele.offsetParent;
        }
        return {x: eleX, y: eleY};
    },
    moveNeedle: function (dx, dy, x, y, e) {
        var classObj = this.data('thisObj');
        var rectObject = classObj.divPaper.getBoundingClientRect();
        var paperXY = classObj.elePosition(classObj.divPaper);
        var mouseX, mouseY;
        mouseX = e.clientX - rectObject.left;
        mouseY = e.clientY - rectObject.top;
        var needleA = Raphael.angle(classObj.opts.dialCenter, classObj.opts.dialCenter, classObj.needle.getPointAtLength(classObj.needle.getTotalLength())['x'], classObj.needle.getPointAtLength(classObj.needle.getTotalLength())['y']);
        var newA = Raphael.angle(classObj.opts.dialCenter, classObj.opts.dialCenter, mouseX, mouseY);
        var rotateAngle = (360 - needleA) + newA;
        if (!(newA > (360 - classObj.opts.startA) && newA < (360 - classObj.opts.endA))) {
            classObj.needleSet.transform('r' + rotateAngle + "," + classObj.opts.dialCenter + "," + classObj.opts.dialCenter);
        }
    },
    setNeedleDrag: function () {
        var startDrag = function () {
        }, dragger = this.moveNeedle,
                endDrag = this.findNearestStep;
        this.needleSet.drag(dragger, startDrag, endDrag);
    },
    dialFaceClick: function () {
        var classObj = this;
        this.clickArea.node.onclick = function (e) {
            var e = e || window.event;
            var rectObject = classObj.divPaper.getBoundingClientRect();
            var mouseX, mouseY;
            mouseX = e.clientX - rectObject.left;
            mouseY = e.clientY - rectObject.top;
            var needleA = Raphael.angle(classObj.opts.dialCenter, classObj.opts.dialCenter, classObj.needle.getPointAtLength(classObj.needle.getTotalLength())['x'], classObj.needle.getPointAtLength(classObj.needle.getTotalLength())['y']);
            var newA = Raphael.angle(classObj.opts.dialCenter, classObj.opts.dialCenter, mouseX, mouseY);
            var rotateAngle = (360 - needleA) + newA;
            if (!(newA > (360 - classObj.opts.startA) && newA < (360 - classObj.opts.endA))) {
                classObj.needleSet.transform('r' + rotateAngle + "," + classObj.opts.dialCenter.toString() + "," + classObj.opts.dialCenter.toString());
            }
            classObj.findNearestStep(classObj);
            return false;
        }
    },
    findNearestStep: function (obj) {
        var classObj = (obj.target || obj.srcElement) ? this.data('thisObj') : obj;
        var currVal = Math.round((Raphael.rad(classObj.needle.matrix.split().rotate) * ((classObj.opts.maxRange - classObj.opts.minRange) / Raphael.rad(classObj.opts.arcCentralA))) + classObj.opts.minRange);
        var nextVal = currVal;
        var prevVal, newA, index;
        if (currVal % classObj.opts.rangeSteps != 0) {

            while (nextVal % classObj.opts.rangeSteps != 0) {
                nextVal = nextVal + 1;
            }
            if ((nextVal - currVal) > (classObj.opts.rangeSteps / 2)) {
                nextVal = nextVal - classObj.opts.rangeSteps;
            }
            index = nextVal;

        } else {
            index = currVal;
        }
        newA = classObj.rangeAngles[index];
        classObj.needleSet.transform('r' + (newA) + "," + classObj.opts.dialCenter + "," + classObj.opts.dialCenter);
    }
}

Here is my fiddle, http://jsfiddle.net/fiddle_fish/rvLo1cuy/ , dragging the needle makes it follow the mouse pointer closely. Now click the "Resize container" link, whilst the needle still moves it doesn't follow the pointer closely. It seems the resize has created an offset for the mouse event target area.

I've tried changing the viewbox settings, width/height values,removing events and reapplying them, deleting the dial on resize and redrawing the dial but nothing works.

Tried, raphael js, calculate setViewBox width height to fix window

and, raphael js, resize canvas then setViewBox to show all elements

Neither works. :(

Answer 1

I sussed this out. I've multiplied the mouse x-y coordinates with a ratio based on the paper size onload/resize. Works a treat :)

Answer 2

I just encountered the same issue. Basically, on window resize I recalculate the "scale" i.e. the ratio of the svg element's viewBox to its current height/width.

Here's my solution:

var scale = {
    x:1,
    y:1
}

$(window).resize(function(){
    scale = getScale(paper);
})

function getScale(paper){
    var x = paper.canvas.viewBox.baseVal.width/$(paper.canvas).width(); 
    var y = paper.canvas.viewBox.baseVal.height/$(paper.canvas).height(); 
    return {
        x:x,
        y:y
    }
}

and then in my "move" function, I added a multiplier to dx and dy:

var move = function (dx, dy,x,y) {

       var X = this.cx + dx * scale.x,
       Y = this.cy + dy * scale.y;
       this.attr({cx: X, cy: Y});
}

For context, the move function is used like so:

var start = function(){
    this.cx = this.attr("cx"),
    this.cy = this.attr("cy");
}, move = function (dx, dy,x,y) {
    var X = this.cx + dx * scale.x,
    Y = this.cy + dy * scale.y;
    this.attr({cx: X, cy: Y});
}

raphael_element.drag(move,start);

Note that there's some JQuery thrown in here that you could easily do without.