2

I have a transparent drag layer on top of a shape layer. Works great to make interaction distinct so I can toggle what dragging does (between scrolling the view or editing the shape positions). However, unless I turn off drag mode (by hiding the intervening transparent Rect), none of the other mouseover events fire on the shape layer beneath it. I need to propogate the non-drag mouse events to the layer below it. There are A LOT of shapes with mouse over events.

Is there an easy way to propogate the mouse over events to the layer beneath it or do I need to write a custom handler to fire events for every shape?

Timothy Ryan
  • 189
  • 7
  • I have also tried putting everything in the same layer and firing events from the layer listeners onto the shapes, but with no luck. – Timothy Ryan Feb 10 '16 at 17:41

1 Answers1

3

I managed to solve this without having to propagate events between layers. I put a draggable surface behind the shapes on the shape layer only if a shape isn't clicked. Then to cover if a shape is clicked, on the shape dragstart event, if a layerdraggable flag is set, I do a stopDrag() on the shape and a startDrag() on the layer. This allowed me to toggle with a simple flag whether I want the whole layer dragging, or just the shape.

I had to clean up a little of the shape position on the dragend event, but alternatively you can do that with a dragbounds on the shape.

shape.on('dragstart', function () {
    if (layerDraggable) {
        shape.stopDrag();
        shapeLayer.startDrag();
    }
}
Timothy Ryan
  • 189
  • 7