SmartGWT DragResize and Highcharts

[Shawn Quinn]

Hi Craig,

Thanks for posting. We're also using SmartGWT here with resizeable panels and have noticed the same issue in Chrome (you can see this happen using the resize bar in the GWT Highcharts showcase application as well). I haven't noticed this problem in Firefox or IE though. Are you also only seeing this in Chrome, or elsewhere?

It looks to me like a SVG/Canvas area rendered within the Chrome DOM may be ignoring the standard z-index conventions, so the SVG/Canvas area ends up catching the mouse move events instead of allowing the SmartGWT widgets to receive the events. I haven't done much research on this though, so perhaps someone else can post any possible work arounds they may be aware of.

Thanks,

  -Shawn

[Craig]

As far as order-of-ops goes, it appears as though when resizing starts SmartGWT adds two divs to the dom:
1. A .dragOutline div so you can see what you're resizing to, and
2. An eventMask div that contains a transparent image and is above everything else (which explains why resizing works once it's started).

You can see these divs by starting to resize something and then alt-tabbing to another window to prevent the browser from getting the onmouseup event.

More curiosity: neither the Moxie Apps HighChart nor HighCharts itself are capturing any mouse events and preventing bubbling are they? I only ask because, until i can prove otherwise, Isomorphic won't look into the issue themselves.

[Craig]

Ok, it looks like option B worked. Here is a brief rundown of what I did. Of course, we had the luxury of an "edit" mode that allowed us to reasonably get away with doing something like this onMouseDown. As such, there are a few missing if-statements in there, but the general idea should still work for others. For reference, this code was added in the constructor of the VLayout.

/* Fix Chrome/Safari not wanting to propogate mouse events through an SVG.
 * "this" is the VLayout (or whatever) that is resizable and contains the chart. */
final Img img = new Img(Img.getImgURL("[SKIN]/blank.gif"));
img.setPosition("absolute");
img.setTop(0);
img.setLeft(0);
this.addMouseDownHandler(new MouseDownHandler()
{
    @Override
    public void onMouseDown(MouseDownEvent event)
    {
        img.setSize(this.getWidthAsString(), this.getHeightAsString());
        this.addChild(img);
    }
});

/* Don't want to remove the image when resizing starts because that cancels resizing in IE */
this.addDragResizeStopHandler(new DragResizeStopHandler()
{
    @Override
    public void onDragResizeStop(DragResizeStopEvent event)
    {
        this.removeChild(img);
    }
});

/* Need to also remove the image onMouseUp because we could just click and not reszie */
this.addMouseUpHandler(new MouseUpHandler()
{
    @Override
    public void onMouseUp(MouseUpEvent event)
    {
        this.removeChild(img);
    }
});