Kinetic JS shape shadows get more visible when adding another shape

Question

First, I'm required to use version kinetic-v4.3.3 due to a group dragging (known) bug in the latest version.

So I have a kinetic structure as follows:

ShapesGroup    
 ShapeGroup
  Circle
  Text

And on 'mouseenter' on either text or circle, a tool tip is displayed and we add the ToolTipGroup to the structure. On 'mouseout' the ToolTipGroup is destroyed.

ShapesGroup  
 ShapeGroup
  Circle
  Text
  ToolTipGroup
   Rectangle
   Text

Currently each shape and text object has shadows enabled. Now, whenever the ToolTipGroup is added, it seems that all the shadow enabled objects inside ShapesGroup (the container of all the ShapeGroups), have their shadow properties modified somehow so that they appear to get more 'bold'.

Here are a couple of screen shots : focus on the yellow banana shaped area ^_^

You should be able to easily see that all the shadows within the ShapesGroup are much 'stronger'.

Here's the fiddle: http://jsfiddle.net/Robodude/LxhLX/3/ It's really easy to notice whenever you hover over a circle/text.

The calendar.js file is pretty huge, so here's some relevant code.

This is the method that creates the tooltip kinetic object.

Day.prototype.createDataToolTip = function (data, target, xOffset, yOffset) {
    var month = this.parent;
    var year = month.parent;
    var calendar = year.parent;

    var stagePos = calendar.stage.getPosition();
    var mousePos = calendar.stage.getMousePosition();
    var bgLayerPos = calendar.stage.get(".bgCalendarLayer")[0].getPosition();
    var dataPos = calendar.stage.get(".dataGroup")[0].getPosition();
    var targetPos = target.getPosition();
    var parentPos = target.parent.getPosition();
    var width = target.getWidth();
    var height = target.getWidth();


    var widthMultiplier = 5;
    var newW = calendar.dayWidth * widthMultiplier;

    var alreadyDisplayed = target.parent.get(".toolTipGroup_" + data.Id)[0];

    if (alreadyDisplayed == null) {
        var padding = 6;
        var tooltipText = new Kinetic.Text({
            text: data.HoverText,
            x: padding,
            y: padding,
            //height:(calendar.dayHeight * 4) - padding,
            width: (calendar.dayWidth * widthMultiplier) - (padding * 2),
            align: "left",
            fontSize: 12,
            fontFamily: 'Tahoma',
            fontStyle: 'bold',
            fill: 'white',
            //shadowColor: 'black',
            id: "tooltipText_" + data.Id,
            name: "tooltipText_" + data.Id
        });

        var th = tooltipText.getHeight();

        var tooltipBG = new Kinetic.Rect({
            height: th + (padding / 2) + tooltipText.getFontSize(),
            width: calendar.dayWidth * widthMultiplier,
            //fill: data.Color,
            stroke: 'black',
            strokeWidth: 1,
            fillLinearGradientStartPoint: [-50, -50],
            fillLinearGradientEndPoint: [50, 50],
            fillLinearGradientColorStops: [0, 'white', 1, data.Color],
            name: "toolTipBG_" + data.Id,
            id: "toolTipBG_" + data.Id,
            shadowColor: 'black',
            shadowBlur: 10,
            shadowOffset: 5,
            shadowOpacity: .5
        });

        var newX = 0 - (newW / 2);
        var newY = yOffset + 1;

        if (parentPos.y > calendar.stage.getHeight() / 2) // if the shape is in bottom half of the screen
        {
            newX = 0 - (newW / 2);
            newY = -yOffset - 1 - tooltipBG.getHeight();
        }


        var tooltipGroup = new Kinetic.Group({
            x: newX,
            y: newY,
            name: "toolTipGroup_" + data.Id,
            id: "toolTipGroup_" + data.Id
        });


        tooltipGroup.add(tooltipBG);
        tooltipGroup.add(tooltipText);

        target.parent.add(tooltipGroup);

        target.parent.draw();
        console.log(target.parent);
    }


}

This is the event handler for the 'mouseenter' on the circles:

dataCircle.on("mouseenter", function () {
    this.parent.moveToTop();
    if (calendar.miniMap != false) {
        var parent = this.parent;
        var text = parent.get(".dataCircleText_" + data.Id)[0];
        text.moveToTop();
        day.createDataToolTip(data, this, this.attrs.radius, this.attrs.radius);
    }
    dg.draw();
});

Any ideas why this is happening? It seems so unrelated and unexpected that I'm not sure what's going on.

Thanks for reading :)

EDIT: Since the draggable bug which 'forces' me into using an older version of kinetic, I tried using the latest version and this is what happens on hover:

As you can see, the shadow problem doesn't seem to be an issue here - but something else is totally wrong -_-;;

Answer 1

I have never used KineticJS but here is an idea that you might want to check out if you didn't already. Make sure your "circles with shadow" aren't getting redrawn again when your event happens. It sure looks like shadow in second example is just duplicated one from first example. I really don't know Kinetic as I said, but there must be a way to "clear" everything and redraw it again. Try to force it when event occurs and if that fixes it you found your problem source.