Search code examples
canvasfabricjsvaadin7

Vaadin canvas fabric.js no user interaction


I have a GWT widget (canvas) working perfect based on fabric.js. Now I need to plug it in vaadin, I made an addon, and all works except user events (drag object within canvas) dont work for unknown reason. It paints objects, but i cant move and make any action with them (as it supposed to work). I think that there is a css rule that blocks this functionality. Now insidemy vaadin app it looks like a ordinal image (no coursor changes when hover objects on canvas etc).

The code of the "fabric.js" part invaadin addon (GWT):

 var fabricx = new $wnd.fabric.Canvas(canvas);
    $wnd.fabricx = fabricx;
    var rect = new $wnd.fabric.Rect({
        left: 100,
        top: 100,
        fill: 'red',
        width: 150,
        height: 40
    });

    var rect2 = new $wnd.fabric.Rect({
        left: 200,
        top: 200,
        fill: 'green',
        width: 150,
        height: 40
    });

    var text = new $wnd.fabric.IText("Time:\nDate:\nElse:", {
        left: 500,
        top: 20,
        fontSize: 13,
        selectable: false
    });

    fabricx.add(rect);
    fabricx.add(rect2);
    fabricx.add(text);

This results in: enter image description here


Solution

  • Finally, I found what was causing this issue. When the GWT module "extends Composite" you should not adding widgets through initWidget directly, but first add it to panel and then pass panel to init widget. I've been randomly making changes in code for 2 days and found the answer.