Question

Got this code from here http://www.irunmywebsite.com/raphael/drawtool2.php. Runs great in IE when I tested it on that site… I made a few mods to it in order to change the cursor style and stroke color, etc… but my version does not work in IE. I know this is a ton of code to look over, but I could really use a fresh set of eyes (or 20) to help me see what I’ve changed that breaks the funct in IE8.

ORIGINAL VERSION:

        var g_masterPathArray;
        var g_masterDrawingBox;
        var g_masterPaper;

        function initDrawing() {
            var g_masterPaper = Raphael(10,10,700,500);

            var masterBackground = g_masterPaper.rect(10,10,600,400);
            masterBackground.attr("fill", "#eee");
            masterBackground.mousemove(function (event) {
                var evt = event;
                var IE = document.all?true:false;
                var x, y;
                if (IE) {
                    x = evt.clientX + document.body.scrollLeft +
                    document.documentElement.scrollLeft;
                    y = evt.clientY + document.body.scrollTop +
                    document.documentElement.scrollTop;
                }
                else {
                    x = evt.pageX;
                    y = evt.pageY;
                }

                // subtract paper coords on page
                this.ox = x - 10;
                this.oy = y - 10;
            });

            var start = function () {
                g_masterPathArray = new Array();
            },
            move = function (dx, dy) {
                if (g_masterPathArray.length == 0) {
                    g_masterPathArray[0] = ["M",this.ox,this.oy];
                    g_masterDrawingBox = g_masterPaper.path(g_masterPathArray);
                    g_masterDrawingBox.attr({stroke: "#000000","stroke-width": 3});
                }
                else
                    g_masterPathArray[g_masterPathArray.length] =["L",this.ox,this.oy];

                g_masterDrawingBox.attr({path: g_masterPathArray});
            },
            up = function () {
                ;
            };

            masterBackground.drag(move, start, up);
            return g_masterPaper;
        }

MY VERSION:

var g_masterPathArray;
var g_masterDrawingBox;
var g_masterPaper;
var paperOffset;
var dataObj = {};
var sketchpadArray = new Array();
var backgroundArray = new Array();
var evtIndex;
var stylus = { 'utensils' : [
{// Pen default settings
    'stroke':'#000',
    'strokeWidth': 3,
    'strokeOpacity':1,
    'cursor':'url('+jsThemeDir+'pix/pencil-flip.png), auto;'
},
{// Highlight default settings
    'stroke':'#EDF30C',
    'strokeWidth':10,
    'strokeOpacity':0.5,
    'cursor':'url('+jsThemeDir+'pix/highlight-flip.png), auto'
}
 ]
};// end stylus

jQuery('div.sketchpad').each( function(index,element) {

  var g_masterPaper = Raphael(element, jQuery( element ).css('width') , jQuery( element).css('height') );
  sketchpadArray.push( g_masterPaper );
  sketchpadArray[index].currentUtensil = 0;
  var masterBackground = g_masterPaper.rect(0,0, jQuery(element).css('width'),jQuery(element).css('height'));
  masterBackground.attr("fill", "#fff");// Background color of drawing rectangle
  masterBackground.attr("fill-opacity",0);// Opacity of this bgcolor
  masterBackground.attr('stroke-width',0);// Turn off rectangle border. We will give this to the svg in the css.

  backgroundArray.push( masterBackground );
  var drawSet = sketchpadArray[index].set();
  sketchpadArray[index].drawSet = drawSet;

  //masterBackground.attr('cursor','url('+jsThemeDir+'pix/pencil-flip.png)');// Cursor. We can apply this to the svg in css and avoid hardcoding here. 
  masterBackground.mousemove(function (event) {

    evtIndex = jQuery('svg').index( jQuery(event.target).parent('svg') );

    var evt = event;
    var IE = document.all?true:false;
    var x, y;
    if (IE) {
      x = evt.clientX + document.body.scrollLeft +
    document.documentElement.scrollLeft;
      y = evt.clientY + document.body.scrollTop +
    document.documentElement.scrollTop;
    }
    else {
      x = evt.pageX;
      y = evt.pageY;
    }

    // subtract paper coords on page
    paperOffset = jQuery( element ).offset();// get paper x and paper y
    this.ox = x - paperOffset.left;
    this.oy = y - paperOffset.top;
  });

  var start = function () {
    g_masterPathArray = new Array();
  },
  move = function (dx, dy) {
    if (g_masterPathArray.length == 0) {
      g_masterPathArray[0] = ["M",this.ox,this.oy];
      g_masterDrawingBox = g_masterPaper.path(g_masterPathArray);
      g_masterDrawingBox.attr({ 
        'stroke': stylus.utensils[sketchpadArray[evtIndex].currentUtensil].stroke,
        'stroke-width': stylus.utensils[sketchpadArray[evtIndex].currentUtensil].strokeWidth,
    'stroke-opacity': stylus.utensils[sketchpadArray[evtIndex].currentUtensil].strokeOpacity,
        'stroke-linecap':'round',
        'stroke-linejoin':'round'
      });    //stroke: "#000000","stroke-width": 3,"stroke-linecap":"round"});
    }
    else {
      g_masterPathArray[g_masterPathArray.length] =["L",this.ox,this.oy];
      g_masterDrawingBox.attr({path: g_masterPathArray});
      //console.log( masterbackgroundArray[masterBackground] );
  sketchpadArray[evtIndex].drawSet.push(g_masterDrawingBox);
  jQuery('.sketchpad:eq(0)').next('.sketchpad-controls-cont').find('.undo-btn, .clear-btn').removeClass('disabled');

    }
  },
  up = function () {
;
  };

  masterBackground.drag(move, start, up);

  // Draw immediate elements now! use a for/each to call each, sending appropriate obj
  drawInit(index, 'draw-on-load');
  initCorrect(index, 'draw-show-correct');

  return g_masterPaper;
});

Answer 1

SOLUTION:

OK, Chasbeen was correct in pointing back to the dimensions for init. Init of Raphael() object seemed to work fine in drawing width and height from parent using jquery:

var g_masterPaper = Raphael(element, jQuery( element ).css('width') , jQuery( element).css('height') );

But… when I did the same thing with the child rectangle that was going to detect mousemove, problems resulted:

var masterBackground = g_masterPaper.rect(0,0, jQuery(element).css('width'),jQuery(element).css('height'));

What I found was that I had to get the val using jquery, strip off the ‘px’ from the string, re-type as Number, and then IE would accept it to init that rectangle.

var width = jQuery( element ).css('width');
width = width.replace('px','');
width = Number( width );

var height = jQuery( element ).css('height');
height = height.replace('px','');
height = Number( height );

New init for masterBackground looks like this:

var masterBackground = g_masterPaper.rect(0,0,width,height); 

I assume that masterBackground was being created with width and height of 0 previously and this is why no mousemove was being detected.

In addition, I was trying to identify index of the drawing box in case there was more than one in a given page. I was trying to get it using

jQuery( mycollection ).index( jQuery( event.target ) );

This will not work with IE8. You have to get the event target obj in a different way:

var eventTarget = event.target || event.srcElement;